diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 32b5d6f468..248e699dc4 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -22,6 +22,7 @@ import { IcMenuItemVariants } from "./components/ic-menu-item/ic-menu-item.types import { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types"; import { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types"; import { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-radio-group/ic-radio-group.types"; +import { IcExpandedDetail } from "./components/ic-side-navigation/ic-side-navigation.types"; import { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types"; import { IcStatusTagAppearance, IcStatusTagStatuses } from "./components/ic-status-tag/ic-status-tag.types"; import { IcStepStatuses, IcStepTypes, IcStepVariants } from "./components/ic-step/ic-step.types"; @@ -47,6 +48,7 @@ export { IcMenuItemVariants } from "./components/ic-menu-item/ic-menu-item.types export { IcChangeEventDetail as IcChangeEventDetail1, IcPaginationTypes } from "./components/ic-pagination/ic-pagination.types"; export { IcPaginationItemType } from "./components/ic-pagination-item/ic-pagination-item.types"; export { IcChangeEventDetail as IcChangeEventDetail2 } from "./components/ic-radio-group/ic-radio-group.types"; +export { IcExpandedDetail } from "./components/ic-side-navigation/ic-side-navigation.types"; export { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types"; export { IcStatusTagAppearance, IcStatusTagStatuses } from "./components/ic-status-tag/ic-status-tag.types"; export { IcStepStatuses, IcStepTypes, IcStepVariants } from "./components/ic-step/ic-step.types"; @@ -2300,6 +2302,10 @@ export interface IcSelectCustomEvent extends CustomEvent { detail: T; target: HTMLIcSelectElement; } +export interface IcSideNavigationCustomEvent extends CustomEvent { + detail: T; + target: HTMLIcSideNavigationElement; +} export interface IcSwitchCustomEvent extends CustomEvent { detail: T; target: HTMLIcSwitchElement; @@ -2841,7 +2847,18 @@ declare global { prototype: HTMLIcSelectElement; new (): HTMLIcSelectElement; }; + interface HTMLIcSideNavigationElementEventMap { + "sideNavExpanded": IcExpandedDetail; + } interface HTMLIcSideNavigationElement extends Components.IcSideNavigation, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLIcSideNavigationElement, ev: IcSideNavigationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLIcSideNavigationElement, ev: IcSideNavigationCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLIcSideNavigationElement: { prototype: HTMLIcSideNavigationElement; @@ -3024,6 +3041,7 @@ declare global { interface HTMLIcTopNavigationElementEventMap { "icNavigationMenuClosed": void; "icNavigationMenuOpened": void; + "topNavResized": { size: number }; } interface HTMLIcTopNavigationElement extends Components.IcTopNavigation, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLIcTopNavigationElement, ev: IcTopNavigationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -4877,6 +4895,10 @@ declare namespace LocalJSX { */ "href"?: string; "inline"?: boolean; + /** + * Emitted when the side navigation is collapsed and expanded. + */ + "onSideNavExpanded"?: (event: IcSideNavigationCustomEvent) => void; /** * The short title of the app to be displayed at small screen sizes in place of the app title. */ @@ -5340,6 +5362,10 @@ declare namespace LocalJSX { "inline"?: boolean; "onIcNavigationMenuClosed"?: (event: IcTopNavigationCustomEvent) => void; "onIcNavigationMenuOpened"?: (event: IcTopNavigationCustomEvent) => void; + /** + * Emitted when the top navigation is resized. + */ + "onTopNavResized"?: (event: IcTopNavigationCustomEvent<{ size: number }>) => void; /** * The short title of the app to be displayed at small screen sizes in place of the app title. */ diff --git a/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.stories.mdx b/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.stories.mdx index 8ca26514d3..5a59aebdd0 100644 --- a/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.stories.mdx +++ b/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.stories.mdx @@ -1892,3 +1892,308 @@ import readme from "./readme.md"; `} + +### Side nav expanded event + + + + {html` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + vestibulum venenatis facilisis. Nam tortor felis, auctor vel + ante quis, tempor interdum libero. In dictum sodales velit, eu + egestas arcu dignissim ac. Aliquam facilisis eros dolor, id + laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, + lectus magna interdum risus, vel fringilla libero ex eu dui. + Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit + nisl, vitae congue ligula rutrum id. + Etiam in suscipit metus. Duis semper, sapien a molestie semper, + ex nibh porttitor tellus, vel molestie justo odio vel purus. + Curabitur porttitor, tortor sed semper sollicitudin, odio odio + congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies + commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt + ullamcorper sit amet in metus. Aenean facilisis placerat dictum. + Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor + lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. + Nam non lorem ante. + Donec aliquam eget mauris condimentum cursus. Nullam tempus a + urna in commodo. Proin mauris augue, viverra id finibus id, + vulputate in ante. Aliquam volutpat hendrerit tellus vitae + tristique. Donec pellentesque enim arcu, at feugiat mauris + venenatis vitae. Sed iaculis ut elit et ultrices. Donec diam + eros, iaculis ac est nec, tempus feugiat nisl. Suspendisse eget + interdum lorem. Phasellus pretium urna id elit pharetra + hendrerit. + Mauris blandit, mi ut posuere dapibus, est ante porttitor sem, + quis pretium velit ante nec felis. Vivamus efficitur scelerisque + dapibus. Nunc lacinia finibus laoreet. Praesent commodo augue + orci, congue rutrum velit malesuada gravida. Nunc magna mauris, + ornare nec nisl vel, faucibus euismod orci. Proin in augue vitae + nunc gravida consectetur. Pellentesque id malesuada ex, sit amet + imperdiet est. Duis erat nibh, lacinia vitae faucibus non, + aliquam in dolor. Nam interdum felis vitae feugiat posuere. Cras + volutpat molestie ipsum, sed auctor quam volutpat vitae. Vivamus + lobortis scelerisque libero vel scelerisque. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Praesent eget orci condimentum, tempus tortor posuere, lacinia + ex. Curabitur bibendum suscipit turpis vitae mollis. Ut laoreet + orci a risus facilisis porta. Orci varius natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Curabitur + a porttitor neque, ac dignissim velit. Morbi quis malesuada + massa, vitae sodales tellus. Aenean laoreet mattis lobortis. In + mauris erat, tincidunt in placerat sed, pretium ac tortor. Morbi + blandit lacus a leo vehicula aliquet. + Pellentesque aliquam risus vel eros maximus, at pellentesque mi + pretium. Etiam nec velit at orci varius porttitor. Aliquam + facilisis, elit non cursus fringilla, metus metus malesuada + lacus, at blandit nibh augue aliquet orci. Duis aliquam, est + eget sodales ullamcorper, eros turpis euismod nulla, sed + sollicitudin diam massa semper purus. Vivamus vel turpis ipsum. + Interdum et malesuada fames ac ante ipsum primis in faucibus. + Morbi euismod turpis dapibus quam fermentum condimentum. Mauris + ex orci, consequat quis tempor eu, finibus vitae eros. Ut eu + erat eu ipsum pulvinar cursus vel at dui. Etiam tincidunt quam + porta nulla suscipit vestibulum. Sed iaculis enim leo, et + aliquam justo feugiat in. Vivamus in ornare nulla, at tempor + massa. Sed et aliquam nisi. + Mauris tempus accumsan libero non tincidunt. Curabitur et leo + orci. Suspendisse molestie posuere leo vitae posuere. Cras + lacinia urna non erat gravida sagittis. Quisque dapibus arcu nec + sem pharetra convallis. Nullam sed arcu mollis, posuere elit at, + condimentum ligula. Nullam maximus nulla quam, ut euismod est + feugiat at. Quisque ut venenatis ex, in facilisis sapien. + Pellentesque in orci vitae metus iaculis venenatis. Nunc + porttitor tellus arcu, in posuere quam vulputate nec. Aenean in + venenatis ligula, non mollis quam. Suspendisse nec enim vel + massa finibus pretium et a urna. Etiam suscipit semper est, id + efficitur diam sollicitudin nec. Nullam nibh sapien, condimentum + ut laoreet et, euismod ac mi. Vestibulum tristique odio non + risus ullamcorper, et aliquam turpis varius. Nunc metus ex, + tempus a augue sit amet, interdum vulputate + libero. + Aenean convallis libero id magna congue pellentesque. Nulla + iaculis interdum porta. Aenean laoreet scelerisque nulla vel + molestie. Class aptent taciti sociosqu ad litora torquent per + conubia nostra, per inceptos himenaeos. Integer sollicitudin in + felis vitae rhoncus. Sed eu elementum massa. Cras ut accumsan + risus. Donec nec augue justo. Aenean sagittis luctus leo egestas + consectetur. Sed sit amet nisl quis felis volutpat facilisis ac + vitae tellus. Curabitur pharetra commodo consequat. Aliquam + consequat ipsum lacus, sed faucibus sapien mollis + vel. + +
+ + Get Started + Accessibility + Styles + Components + Patterns + Design toolkit +
+ Logo +
+ + +
+
`} + + diff --git a/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.tsx b/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.tsx index 361e237093..6706288017 100644 --- a/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.tsx +++ b/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.tsx @@ -6,6 +6,8 @@ import { State, Element, Listen, + Event, + EventEmitter, } from "@stencil/core"; import menuIcon from "../../assets/hamburger-menu-icon.svg"; @@ -28,7 +30,7 @@ import { IcThemeForeground, IcThemeForegroundEnum, } from "../../utils/types"; -import { IcTopBar } from "./ic-side-navigation.types"; +import { IcTopBar, IcExpandedDetail } from "./ic-side-navigation.types"; /** * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation. @@ -115,6 +117,11 @@ export class SideNavigation { */ @Prop() version: string; + /** + * Emitted when the side navigation is collapsed and expanded. + */ + @Event() sideNavExpanded: EventEmitter; + componentWillLoad(): void { if (this.expanded) { this.setMenuExpanded(true); @@ -168,13 +175,10 @@ export class SideNavigation { sideNavExpanded: boolean; sideNavMobile?: boolean; }): void => { - const event = new CustomEvent("sideNavExpanded", { - detail: { - sideNavExpanded: objDetails.sideNavExpanded, - sideNavMobile: objDetails.sideNavMobile, - }, + this.sideNavExpanded.emit({ + sideNavExpanded: objDetails.sideNavExpanded, + sideNavMobile: objDetails.sideNavMobile, }); - this.el.dispatchEvent(event); }; private toggleMenu = (): void => { diff --git a/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.types.ts b/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.types.ts index fafd6efd86..492be88d5b 100644 --- a/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.types.ts +++ b/packages/web-components/src/components/ic-side-navigation/ic-side-navigation.types.ts @@ -8,3 +8,8 @@ export interface IcTopBar { isAppNameSubtitleVariant: boolean; appTitle: string; } + +export interface IcExpandedDetail { + sideNavExpanded: boolean; + sideNavMobile: boolean; +} diff --git a/packages/web-components/src/components/ic-side-navigation/readme.md b/packages/web-components/src/components/ic-side-navigation/readme.md index 10ef96741b..9bff7e3b76 100644 --- a/packages/web-components/src/components/ic-side-navigation/readme.md +++ b/packages/web-components/src/components/ic-side-navigation/readme.md @@ -21,6 +21,13 @@ | `version` | `version` | The version of the app to be displayed. | `string` | `undefined` | +## Events + +| Event | Description | Type | +| ----------------- | ----------------------------------------------------------- | ------------------------------- | +| `sideNavExpanded` | Emitted when the side navigation is collapsed and expanded. | `CustomEvent` | + + ## Slots | Slot | Description | diff --git a/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.stories.mdx b/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.stories.mdx index c6a2b5b9ea..a5962bb65a 100644 --- a/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.stories.mdx +++ b/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.stories.mdx @@ -870,3 +870,36 @@ import NavigationGroup from "../ic-navigation-group/readme.md"; } + +### Top nav resized event + + + + {(args) => + html` + + + + + + ` + } + + diff --git a/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.tsx b/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.tsx index 72ffb84a45..e11831923d 100644 --- a/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.tsx +++ b/packages/web-components/src/components/ic-top-navigation/ic-top-navigation.tsx @@ -120,6 +120,11 @@ export class TopNavigation { */ @Event() icNavigationMenuOpened: EventEmitter; + /** + * Emitted when the top navigation is resized. + */ + @Event() topNavResized: EventEmitter<{ size: number }>; + disconnectedCallback(): void { if (this.resizeObserver !== null) { this.resizeObserver.disconnect(); @@ -218,11 +223,6 @@ export class TopNavigation { } } - private emitTopNavResized = (size: number): void => { - const event = new CustomEvent("topNavResized", { detail: { size: size } }); - this.el.dispatchEvent(event); - }; - private menuButtonClick = () => { this.showNavMenu(true); }; @@ -258,7 +258,9 @@ export class TopNavigation { this.toggleSearchBar(); } } - this.emitTopNavResized(currSize); + this.topNavResized.emit({ + size: currSize, + }); if ( document.activeElement !== null && document.activeElement !== undefined && diff --git a/packages/web-components/src/components/ic-top-navigation/readme.md b/packages/web-components/src/components/ic-top-navigation/readme.md index a057936536..94898bca23 100644 --- a/packages/web-components/src/components/ic-top-navigation/readme.md +++ b/packages/web-components/src/components/ic-top-navigation/readme.md @@ -18,6 +18,13 @@ | `version` | `version` | The version info to be displayed. | `string` | `""` | +## Events + +| Event | Description | Type | +| --------------- | ------------------------------------------- | -------------------------------- | +| `topNavResized` | Emitted when the top navigation is resized. | `CustomEvent<{ size: number; }>` | + + ## Slots | Slot | Description |