npm - @ukic/web-components - Versions diffs - 2.29.1 → 2.30.0 - Mend

@ukic/web-components 2.29.1 → 2.30.0

Files changed (155) hide show

package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-popover-menu.js","sourceRoot":"","sources":["../../../src/components/ic-popover-menu/ic-popover-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /*\n The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n /\n @Prop() anchor: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentLabel?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /\n The unique identifier for a popover submenu.\n /\n @Prop() submenuId?: string;\n\n /\n @internal The level of menu being displayed.\n /\n @Prop() submenuLevel: number = 1;\n\n /\n If `true`, the popover menu will be displayed.\n /\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = isPropDefined(this.submenuId) ? 1 : 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /\n Emitted when the popover menu is closed.\n /\n @Event() icPopoverClosed: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(\n ev: CustomEvent<{\n label: string;\n hasSubMenu: boolean;\n }>\n ): void {\n if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n this.closeMenu();\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /\n @internal Opens the menu from the child menu.\n /\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /\n @internal Opens the menu from the parent menu.\n /\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string): HTMLElement => {\n let anchorElement: HTMLElement = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /\n @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(setFocusToAnchor = false): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit();\n }\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] \| NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n this.addMenuItems(menuGroupElements);\n }\n }\n };\n\n private getMenuAriaLabel = (): string => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n };\n\n render() {\n return (\n <Host class={{ open: this.open }}>\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n tabindex={open ? \"0\" : \"-1\"}\n >\n <div\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <div>\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </div>\n )}\n <ul\n class=\"button\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n aria-owns={\n isPropDefined(this.submenuId)\n ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n : false\n }\n aria-controls={\n isPropDefined(this.submenuId)\n ? `ic-popover-submenu-back-button-${this.submenuLevel}`\n : false\n }\n >\n <slot></slot>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-popover-menu.js","sourceRoot":"","sources":["../../../src/components/ic-popover-menu/ic-popover-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport { createPopper, Instance as PopperInstance } from \"@popperjs/core\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n\n /*\n The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n /\n @Prop() anchor: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentLabel?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /\n The unique identifier for a popover submenu.\n /\n @Prop() submenuId?: string;\n\n /\n @internal The level of menu being displayed.\n /\n @Prop() submenuLevel: number = 1;\n\n /\n If `true`, the popover menu will be displayed.\n /\n @Prop({ reflect: true, mutable: true }) open: boolean = undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n if (this.open) {\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /\n Emitted when the popover menu is closed.\n /\n @Event() icPopoverClosed: EventEmitter<void>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot.querySelector(\"ul.button\");\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(\n ev: CustomEvent<{\n label: string;\n hasSubMenu: boolean;\n }>\n ): void {\n if (!ev.detail.hasSubMenu && ev.detail.label !== \"Back\") {\n this.closeMenu();\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /\n @internal Opens the menu from the child menu.\n /\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /\n @internal Opens the menu from the parent menu.\n /\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string): HTMLElement => {\n let anchorElement: HTMLElement = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /\n @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n */\n @Method()\n async closeMenu(setFocusToAnchor = false): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit();\n }\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] \| NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot.querySelector(\"ul\");\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n\n this.addMenuItems(menuGroupElements);\n }\n }\n };\n\n private getMenuAriaLabel = (): string => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n });\n };\n\n render() {\n return (\n <Host class={{ open: this.open }}>\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n tabindex={open ? \"0\" : \"-1\"}\n >\n <div\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <div>\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </div>\n )}\n <ul class=\"button\" aria-label={this.getMenuAriaLabel()} role=\"menu\">\n <slot></slot>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-radio-group/ic-radio-group.js CHANGED Viewed

@@ -135,7 +135,7 @@ export class RadioGroup {
         });
         if (this.radioOptions !== undefined) {
             this.radioOptions.forEach((radioOption, index) => {
-                radioOption.selected = this.checkedValue === radioOption.value;
+                radioOption.selected = selectedOption === radioOption;
                 if (radioOption.selected) {
                     this.selectedChild = index;
                 }

package/dist/collection/components/ic-radio-group/ic-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderHiddenInput,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /*\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n }\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n The label for the radio group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the radio group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n /\n @Prop() orientation: IcOrientation = \"vertical\";\n\n /\n If `true`, the radio group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the radio group component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation;\n this.checkOrientation();\n }\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = detail.value;\n const selectedOption = target as HTMLIcRadioOptionElement;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (totalWidth >= this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n class={{ small: this.small \|\| this.size === \"small\" }}\n >\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: this.currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-radio-group.js","sourceRoot":"","sources":["../../../src/components/ic-radio-group/ic-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n renderHiddenInput,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /*\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n }\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n The label for the radio group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the radio group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n /\n @Prop() orientation: IcOrientation = \"vertical\";\n\n /\n If `true`, the radio group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the radio group component.\n /\n @Prop() size?: IcSizesNoLarge = \"default\";\n\n /\n @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n /\n @Prop() small?: boolean = false;\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation;\n this.checkOrientation();\n }\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = detail.value;\n const selectedOption = target as HTMLIcRadioOptionElement;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (totalWidth >= this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer?.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.querySelectorAll(\"ic-radio-option\"));\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n isSlotUsed(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n renderHiddenInput(\n true,\n this.el,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n class={{ small: this.small \|\| this.size === \"small\" }}\n >\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: this.currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-search-bar/ic-search-bar.css CHANGED Viewed

@@ -447,6 +447,7 @@ video {
 :host(.search) {
   --divider-height: 1.5rem;
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
 }
 :host(.search.small) {

package/dist/collection/components/ic-select/ic-select.css CHANGED Viewed

@@ -449,6 +449,7 @@ video {
 :host {
   display: block;
   position: relative;
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
 }
 :host(.full-width) {

package/dist/collection/components/ic-switch/ic-switch.css CHANGED Viewed

@@ -634,6 +634,11 @@ input {
     border: var(--ic-hc-border);
   }
+  .ic-switch-input:focus + .ic-switch-toggle {
+    border-color: highlight;
+    outline: 0.125rem solid highlight;
+  }
   .ic-switch-input:checked + .ic-switch-toggle::before {
     transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);
   }

package/dist/collection/components/ic-text-field/ic-text-field.css CHANGED Viewed

@@ -446,6 +446,7 @@ video {
    * @prop --input-width: Width of the input field
    */
   display: block;
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
 }
 :host(.fullwidth) {

package/dist/components/ic-alert2.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
-const icAlertCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.container{min-height:3.5rem;border-radius:var(--ic-border-radius);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-status-unknown-light)}.container-info{background-color:var(--ic-status-info-light)}.container-warning{background-color:var(--ic-status-warning-light)}.container-error{background-color:var(--ic-status-error-light)}.container-success{background-color:var(--ic-status-success-light)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-status-unknown)}.divider-info{background-color:var(--ic-status-info)}.divider-warning{background-color:var(--ic-status-warning)}.divider-error{background-color:var(--ic-status-error)}.divider-success{background-color:var(--ic-status-success)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.icon-placeholder{margin-left:var(--ic-space-xs)}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}:host([showdefaulticon=\"false\"]) .icon-neutral{display:none}.icon-neutral>svg,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block;fill:var(--ic-status-unknown)}:host([variant=\"info\"]) .alert-icon svg{fill:var(--ic-status-info)}:host([variant=\"warning\"]) .alert-icon svg{fill:var(--ic-status-warning)}:host([variant=\"error\"]) .alert-icon svg{fill:var(--ic-status-error)}:host([variant=\"success\"]) .alert-icon svg{fill:var(--ic-status-success)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}";
+const icAlertCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.container{min-height:3.5rem;border-radius:var(--ic-border-radius);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-status-unknown-light)}.container-info{background-color:var(--ic-status-info-light)}.container-warning{background-color:var(--ic-status-warning-light)}.container-error{background-color:var(--ic-status-error-light)}.container-success{background-color:var(--ic-status-success-light)}.alert-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-status-unknown)}.divider-info{background-color:var(--ic-status-info)}.divider-warning{background-color:var(--ic-status-warning)}.divider-error{background-color:var(--ic-status-error)}.divider-success{background-color:var(--ic-status-success)}.alert-icon{height:var(--ic-space-lg);width:1.375rem;margin-left:1.125rem}.icon-placeholder{margin-left:var(--ic-space-xs)}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}:host([showdefaulticon=\"false\"]) .icon-neutral{visibility:hidden;width:0;margin-left:0.625rem}.icon-neutral>svg,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block;fill:var(--ic-status-unknown)}:host([variant=\"info\"]) .alert-icon svg{fill:var(--ic-status-info)}:host([variant=\"warning\"]) .alert-icon svg{fill:var(--ic-status-warning)}:host([variant=\"error\"]) .alert-icon svg{fill:var(--ic-status-error)}:host([variant=\"success\"]) .alert-icon svg{fill:var(--ic-status-success)}.alert-content{display:flex;align-items:center;margin-left:0.625rem;width:100%}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-content{display:flex;flex-direction:column;align-items:flex-start}.alert-message{display:flex;flex-direction:column;align-items:flex-start}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs)}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}";
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     constructor() {

package/dist/components/ic-alert2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-alert2.js","mappings":"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","names":[],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.container {\n min-height: 3.5rem;\n border-radius: var(--ic-border-radius);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-status-unknown-light);\n}\n\n.container-info {\n background-color: var(--ic-status-info-light);\n}\n\n.container-warning {\n background-color: var(--ic-status-warning-light);\n}\n\n.container-error {\n background-color: var(--ic-status-error-light);\n}\n\n.container-success {\n background-color: var(--ic-status-success-light);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-status-unknown);\n}\n\n.divider-info {\n background-color: var(--ic-status-info);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning);\n}\n\n.divider-error {\n background-color: var(--ic-status-error);\n}\n\n.divider-success {\n background-color: var(--ic-status-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false /\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n display: none;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n fill: var(--ic-status-unknown);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-status-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-status-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-status-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-status-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n If `true`, the default icon for the neutral variant will be appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Dark}\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-alert2.js","mappings":"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","names":[],"sources":["src/components/ic-alert/ic-alert.css?tag=ic-alert&encapsulation=shadow","src/components/ic-alert/ic-alert.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\n.container {\n min-height: 3.5rem;\n border-radius: var(--ic-border-radius);\n position: relative;\n display: flex;\n align-items: center;\n}\n\n.container-neutral {\n background-color: var(--ic-status-unknown-light);\n}\n\n.container-info {\n background-color: var(--ic-status-info-light);\n}\n\n.container-warning {\n background-color: var(--ic-status-warning-light);\n}\n\n.container-error {\n background-color: var(--ic-status-error-light);\n}\n\n.container-success {\n background-color: var(--ic-status-success-light);\n}\n\n.alert-icon-container {\n height: 100%;\n display: flex;\n align-items: center;\n}\n\n.divider {\n height: 100%;\n width: var(--ic-space-xs);\n border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n position: absolute;\n}\n\n.divider-neutral {\n background-color: var(--ic-status-unknown);\n}\n\n.divider-info {\n background-color: var(--ic-status-info);\n}\n\n.divider-warning {\n background-color: var(--ic-status-warning);\n}\n\n.divider-error {\n background-color: var(--ic-status-error);\n}\n\n.divider-success {\n background-color: var(--ic-status-success);\n}\n\n.alert-icon {\n height: var(--ic-space-lg);\n width: 1.375rem;\n margin-left: 1.125rem;\n}\n\n.icon-placeholder {\n margin-left: var(--ic-space-xs);\n}\n\n.alert-icon > svg {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n}\n\n/* required for Gatsby as prop does not seem to work when set to false /\n:host([showdefaulticon=\"false\"]) .icon-neutral {\n visibility: hidden;\n width: 0;\n margin-left: 0.625rem;\n}\n\n.icon-neutral > svg,\n::slotted(svg) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n display: inline-block;\n fill: var(--ic-status-unknown);\n}\n\n:host([variant=\"info\"]) .alert-icon svg {\n fill: var(--ic-status-info);\n}\n\n:host([variant=\"warning\"]) .alert-icon svg {\n fill: var(--ic-status-warning);\n}\n\n:host([variant=\"error\"]) .alert-icon svg {\n fill: var(--ic-status-error);\n}\n\n:host([variant=\"success\"]) .alert-icon svg {\n fill: var(--ic-status-success);\n}\n\n.alert-content {\n display: flex;\n align-items: center;\n margin-left: 0.625rem;\n width: 100%;\n}\n\n.alert-message {\n display: flex;\n align-items: center;\n padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n flex: 1;\n}\n\n.alert-message-title-above {\n display: inline;\n}\n\n.alert-title {\n margin-right: var(--ic-space-xs);\n}\n\n.alert-title-above {\n white-space: normal;\n}\n\n.alert-action-container {\n margin-right: var(--ic-space-xs);\n display: flex;\n align-items: center;\n}\n\n.dismiss-icon {\n margin-right: var(--ic-space-xxxs);\n margin-left: -0.375rem;\n padding: 0.375rem;\n border: none;\n border-radius: 50%;\n background-color: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dismiss-icon:hover {\n cursor: pointer;\n}\n\n@media (max-width: 628px) {\n .alert-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-message {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .alert-title {\n white-space: normal;\n }\n\n .alert-action-container {\n margin-bottom: var(--ic-space-xs);\n }\n}\n\n@media (forced-colors: active) {\n .container {\n border: var(--ic-hc-border);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n State,\n Listen,\n Prop,\n h,\n forceUpdate,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed, checkSlotInChildMutations } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/\n @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.\n /\n@Component({\n tag: \"ic-alert\",\n styleUrl: \"ic-alert.css\",\n shadow: true,\n})\nexport class Alert {\n private hostMutationObserver: MutationObserver = null;\n\n @Element() el: HTMLIcAlertElement;\n\n @State() alertTitleWrap: boolean = false;\n @State() visible: boolean = true;\n\n /\n If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n /\n @Prop() announced?: boolean = true;\n\n /\n If `true`, the alert will have a close icon at the end to dismiss it.\n /\n @Prop() dismissible?: boolean = false;\n\n /\n The optional title to display at the start of the alert.\n /\n @Prop() heading?: string = \"\";\n\n /\n The main body message of the alert.\n /\n @Prop() message?: string;\n\n /\n If `true`, the title and message will appear above and below instead of inline.\n /\n @Prop() titleAbove?: boolean = false;\n\n /\n The variant of the alert which will be rendered.\n /\n @Prop() variant?: IcStatusVariants = \"neutral\";\n\n /\n If `true`, the default icon for the neutral variant will appear on the left of the alert.\n /\n @Prop() showDefaultIcon: boolean = true;\n\n /\n @deprecated This event should not be used anymore. Use icDismiss instead.\n /\n @Event() dismiss: EventEmitter<void>;\n\n /\n Is emitted when the user dismisses the alert.\n */\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentDidLoad(): void {\n this.alertTitleShouldWrap();\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n private dismissAction = (): void => {\n this.dismiss.emit();\n this.icDismiss.emit();\n };\n\n private alertTitleShouldWrap() {\n const titleHeight =\n this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n if (titleHeight > 24) this.alertTitleWrap = true;\n }\n\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n if (\n mutationList.some(({ type, addedNodes, removedNodes }) =>\n type === \"childList\"\n ? checkSlotInChildMutations(addedNodes, removedNodes, \"action\")\n : false\n )\n ) {\n forceUpdate(this);\n }\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n titleAbove,\n dismissible,\n announced,\n visible,\n showDefaultIcon,\n } = this;\n\n return (\n visible && (\n <Host\n role={announced ? \"alert\" : null}\n class={{\n [IcThemeForegroundEnum.Dark]: true,\n }}\n >\n <div\n class={{\n [\"container\"]: true,\n [`container-${variant}`]: true,\n }}\n >\n <div class=\"alert-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n isSlotUsed(this.el, \"neutral-icon\") ? (\n <div class=\"alert-icon svg-container icon-neutral\">\n <slot name=\"neutral-icon\"></slot>\n </div>\n ) : showDefaultIcon ? (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n ) : (\n <div class=\"icon-placeholder\"></div>\n )\n ) : (\n <span\n class={{\n [\"alert-icon\"]: true,\n [\"svg-container\"]: true,\n [`icon-${variant}`]: true,\n }}\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n <div class=\"alert-content\">\n <div\n class={{\n [\"alert-message\"]: true,\n [\"alert-message-title-above\"]:\n titleAbove \|\| this.alertTitleWrap,\n }}\n >\n {heading && (\n <ic-typography\n class={{\n [\"alert-title\"]: true,\n [\"alert-title-above\"]: titleAbove \|\| this.alertTitleWrap,\n }}\n variant=\"subtitle-large\"\n >\n <p>{heading}</p>\n </ic-typography>\n )}\n <slot name=\"message\">\n <ic-typography variant=\"body\">{message}</ic-typography>\n </slot>\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"alert-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n <div class=\"dismiss-icon-container\">\n {dismissible && (\n <ic-button\n class={{\n [\"svg-container\"]: true,\n [\"dismiss-icon\"]: true,\n }}\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n appearance={IcThemeForegroundEnum.Dark}\n title=\"dismiss\"\n ></ic-button>\n )}\n </div>\n </div>\n </Host>\n )\n );\n }\n}\n"],"version":3}

package/dist/components/ic-breadcrumb-group.js CHANGED Viewed

@@ -22,7 +22,10 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
         };
         this.setBackBreadcrumb = () => {
             if (this.backBreadcrumbOnly) {
-                this.setBackBreadcrumbAttr();
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.revertLastParentCollapsedBreadcrumb();
             }
         };
         this.setBackBreadcrumbAttr = () => {
@@ -36,8 +39,8 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
             if (allBreadcrumbs.length === 1) {
                 return null;
             }
-            this.breadcrumbs = allBreadcrumbs.filter((breadcrumb) => !breadcrumb.getAttribute("current"));
-            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];
+            this.breadcrumbs = allBreadcrumbs;
+            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];
             return this.breadcrumb;
         };
         this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
@@ -48,20 +51,32 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
             });
         };
         this.setCollapsed = () => {
+            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+            const firstBreadcrumb = allBreadcrumbs[0];
+            if (this.collapsedBreadcrumbs) {
+                this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+                    breadcrumb.classList.remove("visuallyhidden");
+                    breadcrumb.classList.remove("fade");
+                });
+            }
             if (this.collapsed) {
-                const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+                this.renderCollapsedBreadcrumb();
                 this.collapsedBreadcrumbs = allBreadcrumbs
                     .splice(1, allBreadcrumbs.length - 2)
                     .filter((breadcrumb) => !breadcrumb.classList.contains("collapsed-breadcrumb-wrapper"));
-                this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
-                const firstBreadcrumb = allBreadcrumbs[0];
+                if (!this.backBreadcrumbOnly) {
+                    this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
+                }
                 if (firstBreadcrumb) {
                     firstBreadcrumb.insertAdjacentElement("afterend", this.collapsedBreadcrumbWrapper);
                 }
             }
+            else {
+                this.collapsedBreadcrumbWrapper.remove();
+            }
         };
         this.clickHandler = () => {
-            this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);
+            this.handleHiddenCollapsedBreadcrumbs();
         };
         this.renderCollapsedBreadcrumb = () => {
             this.collapsedBreadcrumbWrapper = document.createElement("ic-breadcrumb");
@@ -86,8 +101,8 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
             this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);
             return this.collapsedBreadcrumbWrapper;
         };
-        this.handleHiddenCollapsedBreadcrumbs = (collapsedBreadcrumbWrapper) => {
-            collapsedBreadcrumbWrapper.remove();
+        this.handleHiddenCollapsedBreadcrumbs = () => {
+            this.collapsedBreadcrumbWrapper.remove();
             this.collapsedBreadcrumbs.forEach((breadcrumb) => {
                 breadcrumb.classList.add("visuallyhidden");
                 breadcrumb.classList.remove("hide");
@@ -109,11 +124,18 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
             breadcrumb.addEventListener("transitionend", this.transitionendHandler);
         };
         this.setLastParentCollapsedBackBreadcrumb = () => {
+            this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
             this.setBackBreadcrumbAttr();
-            this.lastParentBreadcrumb.classList.remove("hide");
+            if (this.lastParentBreadcrumb) {
+                this.lastParentBreadcrumb.classList.remove("hide");
+                this.lastParentBreadcrumb.classList.add("show");
+            }
         };
         this.revertLastParentCollapsedBreadcrumb = () => {
             this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+            if (this.collapsed) {
+                this.lastParentBreadcrumb.classList.add("hide");
+            }
         };
         this.resizeObserverCallback = (currSize) => {
             if (currSize !== this.deviceSize) {
@@ -163,6 +185,9 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
     watchBackBreadcrumbHandler() {
         this.setBackBreadcrumb();
     }
+    watchCollapsedHandler() {
+        this.setCollapsed();
+    }
     componentWillLoad() {
         const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
         this.setAppearance();
@@ -172,15 +197,12 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
         else {
             checkResizeObserver(this.runResizeObserver);
         }
-        if (this.collapsed) {
-            this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();
-            if (allBreadcrumbs.length > 2) {
-                if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
-                    this.setLastParentCollapsedBackBreadcrumb();
-                }
-                else {
-                    this.setCollapsed();
-                }
+        if (this.collapsed && allBreadcrumbs.length > 2) {
+            if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.setCollapsed();
             }
         }
     }
@@ -199,7 +221,8 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
     get el() { return this; }
     static get watchers() { return {
         "appearance": ["watchAppearanceHandler"],
-        "backBreadcrumbOnly": ["watchBackBreadcrumbHandler"]
+        "backBreadcrumbOnly": ["watchBackBreadcrumbHandler"],
+        "collapsed": ["watchCollapsedHandler"]
     }; }
     static get style() { return icBreadcrumbGroupCss; }
 }, [1, "ic-breadcrumb-group", {
@@ -210,7 +233,8 @@ const BreadcrumbGroup = /*@__PURE__*/ proxyCustomElement(class BreadcrumbGroup e
         "expandedBreadcrumbs": [32]
     }, undefined, {
         "appearance": ["watchAppearanceHandler"],
-        "backBreadcrumbOnly": ["watchBackBreadcrumbHandler"]
+        "backBreadcrumbOnly": ["watchBackBreadcrumbHandler"],
+        "collapsed": ["watchCollapsedHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/ic-breadcrumb-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-breadcrumb-group.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeForeground } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n private ADD_CLASS_DELAY = 50;\n private breadcrumb: HTMLIcBreadcrumbElement;\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbEl: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n private resizeObserver: ResizeObserver = null;\n private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n /*\n The appearance of the breadcrumb group.\n /\n @Prop() appearance: IcThemeForeground = \"default\";\n @Watch(\"appearance\")\n watchAppearanceHandler(): void {\n this.setAppearance();\n }\n\n /\n If `true`, display only a single breadcrumb for the parent page with a back icon.\n /\n @Prop() backBreadcrumbOnly: boolean = false;\n @Watch(\"backBreadcrumbOnly\")\n watchBackBreadcrumbHandler(): void {\n this.setBackBreadcrumb();\n }\n\n /\n If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n */\n @Prop() collapsed: boolean = false;\n\n componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n this.setAppearance();\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed) {\n this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n if (allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n }\n\n disconnectedCallback(): void {\n this.breadcrumb &&\n this.breadcrumb.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl &&\n this.collapsedBreadcrumbEl.removeEventListener(\n \"click\",\n this.clickHandler\n );\n }\n\n private setAppearance = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(\"appearance\", this.appearance);\n });\n };\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumbAttr();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (allBreadcrumbs.length === 1) {\n return null;\n }\n\n this.breadcrumbs = allBreadcrumbs.filter(\n (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n );\n this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n return this.breadcrumb;\n };\n\n private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n private setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n };\n\n private setCollapsed = () => {\n if (this.collapsed) {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n\n const firstBreadcrumb = allBreadcrumbs[0];\n\n if (firstBreadcrumb) {\n firstBreadcrumb.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n }\n };\n\n private clickHandler = () => {\n this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n };\n\n private renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-labelledby\",\n \"collapsed-button-label\"\n );\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n return this.collapsedBreadcrumbWrapper;\n };\n\n private handleHiddenCollapsedBreadcrumbs = (\n collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n ) => {\n collapsedBreadcrumbWrapper.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n this.removeVisuallyHiddenClass(breadcrumb);\n });\n this.expandedBreadcrumbs = true;\n // Set focus to first unhidden breadcrumb\n this.collapsedBreadcrumbs[0].setFocus();\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.setBackBreadcrumbAttr();\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (this.deviceSize <= DEVICE_SIZES.S) {\n this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n if (this.expandedBreadcrumbs) {\n this.setDefaultBreadcrumbs();\n } else {\n this.setCollapsed();\n }\n } else {\n this.setDefaultBreadcrumbs();\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n back: this.backBreadcrumbOnly,\n collapsed: this.collapsed,\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-breadcrumb-group.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeForeground } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n private ADD_CLASS_DELAY = 50;\n private breadcrumb: HTMLIcBreadcrumbElement;\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbEl: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n private resizeObserver: ResizeObserver = null;\n private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n /*\n The appearance of the breadcrumb group.\n /\n @Prop() appearance: IcThemeForeground = \"default\";\n @Watch(\"appearance\")\n watchAppearanceHandler(): void {\n this.setAppearance();\n }\n\n /\n If `true`, display only a single breadcrumb for the parent page with a back icon.\n /\n @Prop() backBreadcrumbOnly: boolean = false;\n @Watch(\"backBreadcrumbOnly\")\n watchBackBreadcrumbHandler(): void {\n this.setBackBreadcrumb();\n }\n\n /\n If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n */\n @Prop() collapsed: boolean = false;\n @Watch(\"collapsed\")\n watchCollapsedHandler(): void {\n this.setCollapsed();\n }\n\n componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n this.setAppearance();\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed && allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n\n disconnectedCallback(): void {\n this.breadcrumb &&\n this.breadcrumb.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl &&\n this.collapsedBreadcrumbEl.removeEventListener(\n \"click\",\n this.clickHandler\n );\n }\n\n private setAppearance = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(\"appearance\", this.appearance);\n });\n };\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.revertLastParentCollapsedBreadcrumb();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (allBreadcrumbs.length === 1) {\n return null;\n }\n\n this.breadcrumbs = allBreadcrumbs;\n this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];\n\n return this.breadcrumb;\n };\n\n private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n private setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n };\n\n private setCollapsed = () => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n const firstBreadcrumb = allBreadcrumbs[0];\n if (this.collapsedBreadcrumbs) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.remove(\"visuallyhidden\");\n breadcrumb.classList.remove(\"fade\");\n });\n }\n\n if (this.collapsed) {\n this.renderCollapsedBreadcrumb();\n\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n if (!this.backBreadcrumbOnly) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n }\n\n if (firstBreadcrumb) {\n firstBreadcrumb.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n } else {\n this.collapsedBreadcrumbWrapper.remove();\n }\n };\n\n private clickHandler = () => {\n this.handleHiddenCollapsedBreadcrumbs();\n };\n\n private renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-labelledby\",\n \"collapsed-button-label\"\n );\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n return this.collapsedBreadcrumbWrapper;\n };\n\n private handleHiddenCollapsedBreadcrumbs = () => {\n this.collapsedBreadcrumbWrapper.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n this.removeVisuallyHiddenClass(breadcrumb);\n });\n this.expandedBreadcrumbs = true;\n // Set focus to first unhidden breadcrumb\n this.collapsedBreadcrumbs[0].setFocus();\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n this.setBackBreadcrumbAttr();\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n this.lastParentBreadcrumb.classList.add(\"show\");\n }\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n if (this.collapsed) {\n this.lastParentBreadcrumb.classList.add(\"hide\");\n }\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (this.deviceSize <= DEVICE_SIZES.S) {\n this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n if (this.expandedBreadcrumbs) {\n this.setDefaultBreadcrumbs();\n } else {\n this.setCollapsed();\n }\n } else {\n this.setDefaultBreadcrumbs();\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n back: this.backBreadcrumbOnly,\n collapsed: this.collapsed,\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}