npm - @ukic/web-components - Versions diffs - 3.4.0 → 3.5.0 - Mend

@ukic/web-components 3.4.0 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (477) hide show

package/dist/collection/components/ic-toast-region/ic-toast-region.js CHANGED Viewed

@@ -40,7 +40,7 @@ export class ToastRegion {
         }
     }
     render() {
-        return h("slot", { key: '3ff4dd455989c1922414e4d4ed83d9b5472736bf' });
+        return h("slot", { key: '9a80027a3b497771ca83af4172fdccc2bfcc10f0' });
     }
     static get is() { return "ic-toast-region"; }
     static get properties() {

package/dist/collection/components/ic-toggle-button/ic-toggle-button.js CHANGED Viewed

@@ -129,7 +129,7 @@ export class ToggleButton {
     render() {
         const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, size, theme, tooltipPlacement, variant, } = this;
         const iconVariant = variant === "icon";
-        return (h(Host, { key: 'e34299dc13ff4f36657b4fea7c88d5d478fa85c1', class: {
+        return (h(Host, { key: '64acdb10437030311b26805c7a5b4fb4e53a7641', class: {
                 "ic-toggle-button-checked": checked,
                 "ic-toggle-button-disabled": disabled,
                 "ic-toggle-button-icon": iconVariant,
@@ -138,7 +138,7 @@ export class ToggleButton {
                 "ic-toggle-button-full-width": fullWidth,
                 [`ic-toggle-button-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleFocus }, h("ic-button", { key: '9f6f52717db592139175316c88a781eaa98adb65', "aria-pressed": `${checked}`, variant: iconVariant ? "icon" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'c180d619e44820ba7a0f597070f0cea2d26a4830' }), isSlotUsed(this.el, "icon") && (h("slot", { key: 'b2a2545a6b0ed44a7911da313306ed6de84c7862', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'c7de6d7eb51d0f444ede14995f708ffcd42174a1', name: "badge", slot: "badge" })))));
+            }, onFocus: this.handleFocus }, h("ic-button", { key: '7ec9db00accaa2e67f4797534f4ad2b304da6397', "aria-pressed": `${checked}`, variant: iconVariant ? "icon" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: 'e84bac663f0dababe84c49180fbeabaaff23c24d' }), isSlotUsed(this.el, "icon") && (h("slot", { key: 'ee8b32317edb8d9f0dfcbdb0daa106a53bcf26d4', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: 'baa79552fb587d8f1167874dc55f47bbf9cf711b', name: "badge", slot: "badge" })))));
     }
     static get is() { return "ic-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -217,13 +217,13 @@ export class ToggleButtonGroup {
     }
     render() {
         const { accessibleLabel, disabled, fullWidth, loading, monochrome, theme } = this;
-        return (h(Host, { key: '91a65da59d67e885a34b5d8c9390f6f419342125', role: "group", "aria-label": accessibleLabel, tabindex: 0, class: {
+        return (h(Host, { key: 'c82ba602f319c2074da44667618cc5d7b7c3499b', role: "group", "aria-label": accessibleLabel, tabindex: 0, class: {
                 "ic-toggle-button-group-disabled": disabled,
                 "ic-toggle-button-group-full-width": fullWidth,
                 "ic-toggle-button-group-loading": loading,
                 "ic-toggle-button-group-monochrome": monochrome,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus }, h("slot", { key: 'bbf0f773b7978915b5421b1962a3391323ee1d3a' })));
+            }, onFocus: this.handleHostFocus }, h("slot", { key: '98defd37fd3f5c87d4d0aceefd1b5ac0c5ad6123' })));
     }
     static get is() { return "ic-toggle-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-top-navigation/ic-top-navigation.css CHANGED Viewed

@@ -610,6 +610,7 @@ slot[name="app-icon"]::slotted(*) {
   fill: var(--ic-top-navigation-logo);
   width: 2em;
   height: 2em;
+  cursor: pointer;
 }
 slot[name="toggle-icon"] svg {

package/dist/collection/components/ic-top-navigation/ic-top-navigation.js CHANGED Viewed

@@ -13,6 +13,7 @@ import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getBrandForegr
 export class TopNavigation {
     constructor() {
         this.hasAppIcon = false;
+        this.hasAppTitleSlot = false;
         this.hasIconButtons = false;
         this.hasNavigation = false;
         this.hasSearchSlotContent = false;
@@ -61,9 +62,15 @@ export class TopNavigation {
         this.version = "";
         this.checkSlots = () => {
             this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+            this.hasAppTitleSlot = isSlotUsed(this.el, "app-title");
             this.hasNavigation = isSlotUsed(this.el, "navigation");
             this.hasIconButtons = isSlotUsed(this.el, "buttons");
             this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+            if (this.hasAppIcon) {
+                const slottedAppIcon = this.el.querySelector('[slot="app-icon"]');
+                if (slottedAppIcon && slottedAppIcon.tagName === "A")
+                    slottedAppIcon.tabIndex = -1;
+            }
         };
         this.initialiseSearchBar = () => {
             if (!this.hasSearchSlotContent)
@@ -156,7 +163,7 @@ export class TopNavigation {
     }
     componentDidLoad() {
         checkResizeObserver(this.runResizeObserver);
-        if (!isSlotUsed(this.el, "app-title")) {
+        if (!this.hasAppTitleSlot) {
             onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
         }
     }
@@ -184,7 +191,7 @@ export class TopNavigation {
         this.foregroundColor = detail.mode;
     }
     render() {
-        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, theme, } = this;
+        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasAppTitleSlot, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, theme, } = this;
         const hasStatus = status !== "";
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
@@ -200,21 +207,20 @@ export class TopNavigation {
         const mobileSearchButtonTitle = `${mobileSearchBarVisible ? "Hide" : "Show"} search`;
         const menuSize = isSmallDeviceSize ? "small" : "medium";
         const shortAppTitleSlot = isSlotUsed(el, "short-app-title");
-        const hasAppTitleSlot = isSlotUsed(el, "app-title");
         const Component = hasAppTitleSlot ? "div" : "a";
         const attrs = Component == "a" && {
             href: href,
         };
-        return (h(Host, { key: '109a8d5b8745b485182a193c3f4929a7b01db39a', class: {
+        return (h(Host, { key: '04ae428a97e2c58967096b74d112eaff245f8dff', class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
                 [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '4ed96db767e6c034003f84053651fe68396799c7', class: "top-navigation" }, h("ic-section-container", { key: '44ac38abd7935fe8feed493a1f1550fccc3c5535', aligned: contentAligned, "full-height": true }, h("header", { key: 'b5468dc9e39a3f45e857464179d3bb9f6ea15707', role: "banner" }, h("div", { key: '856acd47849f1621f800385e630cd9d045535ef0', class: "top-panel-container" }, h("div", { key: '0ac5b5c3313230a12f75b99531b6db5280f54729', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: 'c27a485d2d304ea74edd37e30dfc013c7f42d1f6', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: '18e1af273850b3174fdc3c2ac3b7cd1e51d27dc8', class: "app-icon-container" }, h("slot", { key: '98ff1d08d3cd6a0332c42f8c08d2e04897da1014', name: "app-icon" }))), isSmallDeviceSize &&
+            } }, h("div", { key: '567b43f0ff4239ec947520f1b3cfdca5f248a273', class: "top-navigation" }, h("ic-section-container", { key: 'de93c750d52edcafbf52b45f35adeb6547a68b7b', aligned: contentAligned, "full-height": true }, h("header", { key: '70f3227f015418d9fa82e64786a0b6c9543b3bee', role: "banner" }, h("div", { key: 'cd42a8c33f9baef9566f2fea19d3e9462f4e067a', class: "top-panel-container" }, h("div", { key: '192dbc95a46ffb8d06a7f55258e791a149003bd4', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: '434d3d4de2d251752145200352425032692fc1cd', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: '6f3d2089eb16b717946baa082706beb46f04657d', class: "app-icon-container" }, h("slot", { key: '0daa4b46d9e2d72aa1c68e62279e5a3389ec3ab2', name: "app-icon" }))), isSmallDeviceSize &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '6cb297d4f6942bb1a277c8ce7476e861d97c8443', class: "app-status" }, h("ic-typography", { key: 'df12aa96dbce804e3bf0241f68a93b2027667f65', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: '6312913ba6a1da16d992e225b1c2c81a9ef08e86', class: "app-version" }, h("ic-typography", { key: 'e1885cd980327cac6254860daeb80e3bf3b71b71', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '227e6a17a7f8f353aac7c7fc684adef110387e12', class: "search-menu-container" }, h("div", { key: 'c61983790f01a2f4cccde572ccae52d598f2ef8f', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: '151189b97bf2f3d25a492b94d18abbcdf75fecfe', class: "search-bar-container" }, h("slot", { key: 'e2cce191292a452cd262225cc37a7740a3062e27', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '276e4e02593c11acf3b9d6d3e9fa180d1a931638', class: "navigation-tabs" }, h("span", { key: '36300650d07526bc75fb99461c8749a12d08bfe1', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: '0f8c7ac61bb6bf1007f29a79759faaa4700b1d90', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: '35f848caea4ea1dd4acf40fb745c8c21e3527a1c', monochrome: true, appearance: foregroundColor }, h("ul", { key: 'e3258950c9a102ab131421f43c6c255a25a92b86', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: '47b7b95636042b538630b97a124420a1fc27c948', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: '3882936269a606b370eb187404194be1add62dd5', version: version, status: status, class: {
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '83a440ebcedf586a87690b57ea9ecfce1495ceb7', class: "app-status" }, h("ic-typography", { key: '0889ee69e31b3665821b286915a43e253fd66c1a', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: '542d3f22383d5bac8eda47fcd47ef694f054929b', class: "app-version" }, h("ic-typography", { key: '0ed2b7209b4f03da9d462ac1406d3530696b702c', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: 'dbc3439b52e9d9257fc1c98ad50e25e92140ceca', class: "search-menu-container" }, h("div", { key: '3f5b5d05659459daab6d0bcbd69dd0ac70eae0f8', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: 'b3f55a4e18ef3c55503b56447d5fbeb19e569a4f', class: "search-bar-container" }, h("slot", { key: '99ebca2aa04bf76d949384c517dc2012312dbd92', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '6113dfcd92cf06c1f9a533ec6c2f0af3d26abca7', class: "navigation-tabs" }, h("span", { key: 'fa638d34955dccbdb7a8f149e0a8e083e3df0f72', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: 'fc6e24c76b720a463e81dbbe00c91a065bb260ea', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: 'da133fd91d91ff172067fc9aad86651a4c3a2f95', monochrome: true, appearance: foregroundColor }, h("ul", { key: 'f48330caa3937f35f2f65a3fbad830bda2b5c342', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: '74eb909d405109d5387f42e00a633e8ed09ff6f6', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: 'c77d988d1af3ac37eebb5d598b5f649f1d47c899', version: version, status: status, class: {
                 inline,
-            } }, hasIconButtons && (h("div", { key: '0de3827a70e0d7b3148148b89a36a98693883770', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: 'a4a175ccfa0aa523fda4ce61d389175c40f75be0', name: "buttons" }))), h("ul", { key: 'c601f64f4e48c2cb197793d440fdac7d2dc08261', slot: "navigation" }, h("slot", { key: 'af85842692b892b7614fafff255c2c107a5bfdc9', name: "navigation" }))))));
+            } }, hasIconButtons && (h("div", { key: '77d9283a5fdffa724e13f667e9d09ae72f72329e', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '020b485ca53e55926b072738ab7dcb465f1efce5', name: "buttons" }))), h("ul", { key: '16101ca81c95d2de0d55c7a051ccffd5a987f5f8', slot: "navigation" }, h("slot", { key: '02bde8c67591e4c2c15d005252f1f7ae87cff61a', name: "navigation" }))))));
     }
     static get is() { return "ic-top-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n Fragment,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcBrand,\n IcDeviceSizes,\n IcValueEventDetail,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/*\n @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n /\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n private hasAppIcon = false;\n private hasIconButtons = false;\n private hasNavigation = false;\n private hasSearchSlotContent = false;\n private mobileSearchButtonEl?: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver \| null = null;\n private searchBar: HTMLIcSearchBarElement \| null = null;\n private menuButtonEl?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasFullWidthSearchBar = false;\n @State() mobileSearchBarVisible = false;\n @State() mobileSearchHiddenOnBlur = false;\n @State() navMenuVisible = false;\n @State() searchButtonClick = false;\n @State() searchValue = \"\";\n\n /\n The alignment of the top navigation content.\n /\n @Prop() contentAligned: IcAlignment = \"full-width\";\n /\n Can set a custom breakpoint for the top navigation to switch to mobile mode.\n * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n /\n @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n /\n The URL to navigate to when the app title is clicked.\n /\n @Prop() href = \"/\";\n\n /\n If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n /\n @Prop() inline = false;\n\n /\n The short title of the app to be displayed at small screen sizes in place of the app title.\n /\n @Prop() shortAppTitle = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status = \"\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n The version info to be displayed.\n /\n @Prop() version = \"\";\n\n /\n The app title to be displayed. This is required, unless a slotted app title link is used.\n /\n @Prop() appTitle?: string;\n @Watch(\"appTitle\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n //this watch can be removed once Gatsby hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /\n @internal - Emitted when the menu is closed.\n /\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n /\n @internal - Emitted when the menu is opened.\n /\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /\n Emitted when the top navigation is resized.\n */\n @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.checkSlots();\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (!isSlotUsed(this.el, \"app-title\")) {\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.menuButtonEl?.setFocus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler({\n detail,\n }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n if (detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = detail.value as string;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n this.searchValue = detail.value;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.foregroundColor = detail.mode;\n }\n\n private checkSlots = () => {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n };\n\n private initialiseSearchBar = () => {\n if (!this.hasSearchSlotContent) return;\n\n const slot = getSlot(this.el, \"search\");\n if (slot?.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot?.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\"ic-search-bar\");\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n };\n\n private toggleSearchBar = () => {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (!this.searchBar) return;\n\n this.mobileSearchButtonEl?.setAttribute(\n \"aria-label\",\n `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n );\n this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n this.searchBar.fullWidth = this.mobileSearchBarVisible;\n if (this.mobileSearchBarVisible) {\n setTimeout(() => {\n this.searchBar?.focus();\n }, 100);\n }\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu = (show: boolean) => {\n this.navMenuVisible = show;\n (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n document.body.style.height = show ? \"100%\" : \"auto\";\n document.body.style.overflow = show ? \"hidden\" : \"auto\";\n };\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize === this.deviceSize) return;\n\n this.deviceSize = currSize;\n if (currSize > this.customMobileBreakpoint) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.icTopNavResized.emit({\n size: currSize,\n });\n if (this.searchBar && document.activeElement === this.searchBar) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar?.focus();\n }, 100);\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback(getCurrentDeviceSize());\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const {\n appTitle,\n contentAligned,\n customMobileBreakpoint,\n deviceSize,\n el,\n foregroundColor,\n hasAppIcon,\n hasFullWidthSearchBar,\n hasIconButtons,\n hasNavigation,\n hasSearchSlotContent,\n href,\n inline,\n menuButtonClick,\n mobileSearchBarVisible,\n navMenuVisible,\n searchButtonClickHandler,\n searchButtonMouseDownHandler,\n shortAppTitle,\n status,\n version,\n theme,\n } = this;\n\n const hasStatus = status !== \"\";\n const hasVersion = version !== \"\";\n const hasMenuContent =\n hasNavigation \|\| hasIconButtons \|\| hasStatus \|\| hasVersion;\n\n const isSmallDeviceSize = deviceSize <= DEVICE_SIZES.S;\n\n const searchButtonSize = isSmallDeviceSize ? \"medium\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? isSmallDeviceSize\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = isSmallDeviceSize ? \"small\" : \"medium\";\n\n const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n const hasAppTitleSlot = isSlotUsed(el, \"app-title\");\n const Component = hasAppTitleSlot ? \"div\" : \"a\";\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <Host\n class={{\n \"fullwidth-searchbar\": hasFullWidthSearchBar,\n \"mobile-mode\": overMobileBreakpoint,\n [IcBrandForegroundEnum.Dark]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle \|\| hasAppTitleSlot) && (\n <Component class=\"title-link\" {...attrs}>\n {hasAppIcon && (\n <div class=\"app-icon-container\">\n <slot name=\"app-icon\" />\n </div>\n )}\n {isSmallDeviceSize &&\n (!isEmptyString(shortAppTitle) \|\| shortAppTitleSlot) ? (\n <ic-typography\n variant=\"subtitle-small\"\n aria-label={\n (!hasAppTitleSlot \|\| !shortAppTitleSlot) &&\n `${appTitle} (${shortAppTitle})`\n }\n >\n <h1>\n {shortAppTitleSlot ? (\n <slot name=\"short-app-title\"></slot>\n ) : (\n shortAppTitle\n )}\n </h1>\n </ic-typography>\n ) : (\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {hasAppTitleSlot ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </h1>\n </ic-typography>\n )}\n </Component>\n )}\n {hasStatus && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {hasVersion && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(hasSearchSlotContent \|\| hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {!overMobileBreakpoint ? (\n <Fragment>\n <slot name=\"search\"></slot>\n {hasIconButtons && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n </Fragment>\n ) : (\n <Fragment>\n {hasSearchSlotContent && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={searchButtonMouseDownHandler}\n variant=\"icon-tertiary\"\n monochrome\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n theme={foregroundColor as IcThemeMode}\n onClick={searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n {hasMenuContent && (\n <div class=\"menu-button-container\">\n <span\n id=\"navigation-landmark-button-text\"\n class=\"navigation-landmark-button-text\"\n aria-hidden=\"true\"\n >\n Main navigation button\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-button-text\"\n aria-hidden={`${navMenuVisible}`}\n >\n <ic-button\n id=\"menu-button\"\n ref={(el) => (this.menuButtonEl = el)}\n theme={foregroundColor as IcThemeMode}\n variant=\"secondary\"\n monochrome\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-label={`Open ${\n hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"left-icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </Fragment>\n )}\n </div>\n </div>\n )}\n </div>\n\n {mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {hasNavigation && !overMobileBreakpoint && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main pages\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll\n monochrome\n appearance={foregroundColor}\n >\n <ul class=\"navigation-item-list\" tabindex=\"-1\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-horizontal-scroll>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {navMenuVisible && (\n <ic-navigation-menu\n version={version}\n status={status}\n class={{\n inline,\n }}\n >\n {hasIconButtons && (\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-top-navigation.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,KAAK,EACL,MAAM,EACN,KAAK,EAEL,KAAK,EACL,QAAQ,GACT,MAAM,eAAe,CAAC;AAEvB,OAAO,EAIL,qBAAqB,GAKtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,4BAA4B,EAC5B,OAAO,EACP,8BAA8B,EAC9B,gCAAgC,EAChC,UAAU,EACV,aAAa,EACb,aAAa,GACd,MAAM,qBAAqB,CAAC;AAG7B;;;;;;;;GAQG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAMU,eAAU,GAAG,KAAK,CAAC;QACnB,oBAAe,GAAG,KAAK,CAAC;QACxB,mBAAc,GAAG,KAAK,CAAC;QACvB,kBAAa,GAAG,KAAK,CAAC;QACtB,yBAAoB,GAAG,KAAK,CAAC;QAE7B,mBAAc,GAA0B,IAAI,CAAC;QAC7C,cAAS,GAAkC,IAAI,CAAC;QAK/C,eAAU,GAAW,YAAY,CAAC,EAAE,CAAC;QACrC,oBAAe,GAAsB,4BAA4B,EAAE,CAAC;QACpE,0BAAqB,GAAG,KAAK,CAAC;QAC9B,2BAAsB,GAAG,KAAK,CAAC;QAC/B,6BAAwB,GAAG,KAAK,CAAC;QACjC,mBAAc,GAAG,KAAK,CAAC;QACvB,sBAAiB,GAAG,KAAK,CAAC;QAC1B,gBAAW,GAAG,EAAE,CAAC;QAE1B;;WAEG;QACK,mBAAc,GAAgB,YAAY,CAAC;QACnD;;;WAGG;QACK,2BAAsB,GAAkB,YAAY,CAAC,CAAC,CAAC;QAC/D;;WAEG;QACK,SAAI,GAAG,GAAG,CAAC;QAEnB;;WAEG;QACK,WAAM,GAAG,KAAK,CAAC;QAEvB;;WAEG;QACK,kBAAa,GAAG,EAAE,CAAC;QAE3B;;WAEG;QACK,WAAM,GAAG,EAAE,CAAC;QAEpB;;WAEG;QACK,UAAK,GAAgB,SAAS,CAAC;QAEvC;;WAEG;QACK,YAAO,GAAG,EAAE,CAAC;QAqFb,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;YAClD,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;YACxD,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YACrD,IAAI,CAAC,oBAAoB,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;YAE1D,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,MAAM,cAAc,GAClB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAc,mBAAmB,CAAC,CAAC;gBAC1D,IAAI,cAAc,IAAI,cAAc,CAAC,OAAO,KAAK,GAAG;oBAClD,cAAc,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACjC,CAAC;QACH,CAAC,CAAC;QAEM,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,oBAAoB;gBAAE,OAAO;YAEvC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;YACxC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,eAAe,EAAE,CAAC;gBACtC,IAAI,CAAC,SAAS,GAAG,IAA8B,CAAC;YAClD,CAAC;iBAAM,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,MAAM,EAAE,CAAC;gBACpC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACvD,CAAC;YAED,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;gBAC5B,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;YAClC,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;;YAC7B,IAAI,CAAC,sBAAsB,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC;YAE3D,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,OAAO;YAE5B,MAAA,IAAI,CAAC,oBAAoB,0CAAE,YAAY,CACrC,YAAY,EACZ,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,SAAS,CAC1D,CAAC;YACF,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,sBAAsB,CAAC;YACzD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,sBAAsB,CAAC;YACvD,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAChC,UAAU,CAAC,GAAG,EAAE;;oBACd,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;gBAC1B,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,IAAa,EAAE,EAAE;YACtC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,IAAI,EAAE,CAAC;YAC1E,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YACpD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;QAC1D,CAAC,CAAC;QAEM,iCAA4B,GAAG,GAAG,EAAE;YAC1C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;QAEM,6BAAwB,GAAG,GAAG,EAAE;YACtC,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;QACjC,CAAC,CAAC;QAEM,2BAAsB,GAAG,CAAC,QAAgB,EAAE,EAAE;YACpD,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU;gBAAE,OAAO;YAEzC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;YAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAC3C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;gBACxB,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;oBAChC,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACxB,IAAI,EAAE,QAAQ;aACf,CAAC,CAAC;YACH,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;gBAChE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;gBAC9C,+DAA+D;gBAC/D,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACzC,UAAU,CAAC,GAAG,EAAE;;oBACd,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;gBAC1B,CAAC,EAAE,GAAG,CAAC,CAAC;YACV,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,sBAAsB,CAAC,oBAAoB,EAAE,CAAC,CAAC;YACtD,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,CAAC,CAAC;KAmRH;IAlcC,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;QACjD,uGAAuG;QACvG,mEAAmE;QACnE,8BAA8B,CAC5B,QAAQ,EACR,QAAQ,EACR,IAAI,CAAC,mBAAmB,CACzB,CAAC;IACJ,CAAC;IAiBD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,oBAAoB,EAAE,CAAC;QACzC,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,gBAAgB;QACd,mBAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAChD,gBAAgB,CACjB,CAAC;QACJ,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAGD,sBAAsB;;QACpB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,MAAA,IAAI,CAAC,YAAY,0CAAE,QAAQ,EAAE,CAAC;IAChC,CAAC;IAGD,sBAAsB,CAAC,EACrB,MAAM,GACkC;QACxC,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC3D,qGAAqG;gBACrG,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;YACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAe,CAAC;QAC5C,CAAC;IACH,CAAC;IAGD,wBAAwB,CAAC,EAAE,MAAM,EAAmC;QAClE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;IAClC,CAAC;IAGD,kBAAkB,CAAC,EAAE,MAAM,EAAwB;QACjD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC;IACrC,CAAC;IAqGD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,EAAE,EACF,eAAe,EACf,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,IAAI,EACJ,MAAM,EACN,eAAe,EACf,sBAAsB,EACtB,cAAc,EACd,wBAAwB,EACxB,4BAA4B,EAC5B,aAAa,EACb,MAAM,EACN,OAAO,EACP,KAAK,GACN,GAAG,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,MAAM,KAAK,EAAE,CAAC;QAChC,MAAM,UAAU,GAAG,OAAO,KAAK,EAAE,CAAC;QAClC,MAAM,cAAc,GAClB,aAAa,IAAI,cAAc,IAAI,SAAS,IAAI,UAAU,CAAC;QAE7D,MAAM,iBAAiB,GAAG,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC;QAEvD,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;QAChE,MAAM,QAAQ,GAAG,QAAQ,KAAK,EAAE,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5D,MAAM,oBAAoB,GAAG,UAAU,IAAI,sBAAsB,CAAC;QAElE,MAAM,eAAe,GAAyB,oBAAoB;YAChE,CAAC,CAAC,iBAAiB;gBACjB,CAAC,CAAC,gBAAgB;gBAClB,CAAC,CAAC,IAAI;YACR,CAAC,CAAC,IAAI,CAAC;QAET,MAAM,uBAAuB,GAAG,GAC9B,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MACpC,SAAS,CAAC;QACV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;QAExD,MAAM,iBAAiB,GAAG,UAAU,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;QAChD,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,IAAI;YAChC,IAAI,EAAE,IAAI;SACX,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,qBAAqB,EAAE,qBAAqB;gBAC5C,aAAa,EAAE,oBAAoB;gBACnC,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAC1B,eAAe,KAAK,qBAAqB,CAAC,IAAI;gBAChD,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C;YAED,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,6EAAsB,OAAO,EAAE,cAAc;oBAC3C,+DAAQ,IAAI,EAAC,QAAQ;wBACnB,4DAAK,KAAK,EAAC,qBAAqB;4BAC9B,4DAAK,KAAK,EAAC,uBAAuB;gCAC/B,CAAC,QAAQ,IAAI,eAAe,CAAC,IAAI,CAChC,EAAC,SAAS,mEAAC,KAAK,EAAC,YAAY,IAAK,KAAK;oCACpC,UAAU,IAAI,CACb,4DAAK,KAAK,EAAC,oBAAoB;wCAC7B,6DAAM,IAAI,EAAC,UAAU,GAAG,CACpB,CACP;oCACA,iBAAiB;wCAClB,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACrD,qBACE,OAAO,EAAC,gBAAgB,gBAEtB,CAAC,CAAC,eAAe,IAAI,CAAC,iBAAiB,CAAC;4CACxC,GAAG,QAAQ,KAAK,aAAa,GAAG;wCAGlC,cACG,iBAAiB,CAAC,CAAC,CAAC,CACnB,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CACrC,CAAC,CAAC,CAAC,CACF,aAAa,CACd,CACE,CACS,CACjB,CAAC,CAAC,CAAC,CACF,qBAAe,OAAO,EAAE,eAAe;wCACrC,UAAI,KAAK,EAAC,YAAY,IACnB,eAAe,CAAC,CAAC,CAAC,CACjB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC/B,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACE,CACS,CACjB,CACS,CACb;gCACA,SAAS,IAAI,CACZ,4DAAK,KAAK,EAAC,YAAY;oCACrB,oFACa,SAAS,EACpB,OAAO,EAAC,iBAAiB,EACzB,KAAK,EAAC,iBAAiB,IAEtB,MAAM,CACO,CACZ,CACP;gCACA,UAAU,IAAI,CACb,4DAAK,KAAK,EAAC,aAAa;oCACtB,sEACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,kBAAkB,gBACb,aAAa,IAEvB,OAAO,CACM,CACZ,CACP,CACG;4BAEL,CAAC,oBAAoB,IAAI,cAAc,CAAC,IAAI,CAC3C,4DAAK,KAAK,EAAC,uBAAuB;gCAChC,4DAAK,KAAK,EAAC,0BAA0B,IAClC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CACvB,EAAC,QAAQ;oCACP,YAAM,IAAI,EAAC,QAAQ,GAAQ;oCAC1B,cAAc,IAAI,CACjB,WAAK,KAAK,EAAC,wBAAwB;wCACjC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,CACQ,CACZ,CAAC,CAAC,CAAC,CACF,EAAC,QAAQ;oCACN,oBAAoB,IAAI,CACvB,iBACE,EAAE,EAAC,sBAAsB,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC,EAC7C,WAAW,EAAE,4BAA4B,EACzC,OAAO,EAAC,eAAe,EACvB,UAAU,QACV,IAAI,EAAE,gBAAgB,gBACV,uBAAuB,EACnC,KAAK,EAAE,eAA8B,EACrC,OAAO,EAAE,wBAAwB;wCAEjC,YAAM,IAAI,EAAC,aAAa;4CACtB,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,SAAS;gDAEd,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG;gDACxC,YAAM,CAAC,EAAC,4OAA4O,GAAG,CACnP,CACD,CACG,CACb;oCACA,cAAc,IAAI,CACjB,WAAK,KAAK,EAAC,uBAAuB;wCAChC,YACE,EAAE,EAAC,iCAAiC,EACpC,KAAK,EAAC,iCAAiC,iBAC3B,MAAM,6BAGb;wCACP,8BACkB,iCAAiC,iBACpC,GAAG,cAAc,EAAE;4CAEhC,iBACE,EAAE,EAAC,aAAa,EAChB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,KAAK,EAAE,eAA8B,EACrC,OAAO,EAAC,WAAW,EACnB,UAAU,yBACI,OAAO,mBACP,MAAM,gBACR,QACV,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KACjC,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,eAAe;;gDAGxB,WACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,WAAW;oDAEhB,YAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG;oDACxC,YAAM,CAAC,EAAC,+CAA+C,GAAG,CACtD,CACI,CACR,CACF,CACP,CACQ,CACZ,CACG,CACF,CACP,CACG;wBAEL,sBAAsB,IAAI,CACzB,4DAAK,KAAK,EAAC,sBAAsB;4BAC/B,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACP;wBAEA,aAAa,IAAI,CAAC,oBAAoB,IAAI,CACzC,4DAAK,KAAK,EAAC,iBAAiB;4BAC1B,6DACE,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,iBACpB,MAAM,iBAGb;4BACP,+EACkB,0BAA0B,EAC1C,KAAK,EAAC,qBAAqB;gCAE3B,6EACE,UAAU,QACV,UAAU,EAAE,eAAe;oCAE3B,2DAAI,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,IAAI;wCAC5C,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACgB,CACnB,CACF,CACP,CACM,CACY,CACnB;YACL,cAAc,IAAI,CACjB,2EACE,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;oBACL,MAAM;iBACP;gBAEA,cAAc,IAAI,CACjB,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS;oBAC3C,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP;gBACD,2DAAI,IAAI,EAAC,YAAY;oBACnB,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACc,CACtB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n Fragment,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcBrand,\n IcDeviceSizes,\n IcValueEventDetail,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getBrandForegroundAppearance,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n isEmptyString,\n isPropDefined,\n} from \"../../utils/helpers\";\nimport { IcSearchBarBlurEventDetail } from \"../ic-search-bar/ic-search-bar.types\";\n\n/*\n @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.\n * @slot app-title - Handle routing by nesting a route in the app title.\n * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).\n * @slot search - Content will be rendered in search area to left of buttons.\n * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices\n * @slot navigation - Content will be rendered in navigation panel.\n * @slot buttons - Content will be rendered to right of search bar.\n /\n@Component({\n tag: \"ic-top-navigation\",\n styleUrl: \"ic-top-navigation.css\",\n shadow: true,\n})\nexport class TopNavigation {\n private hasAppIcon = false;\n private hasAppTitleSlot = false;\n private hasIconButtons = false;\n private hasNavigation = false;\n private hasSearchSlotContent = false;\n private mobileSearchButtonEl?: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver \| null = null;\n private searchBar: HTMLIcSearchBarElement \| null = null;\n private menuButtonEl?: HTMLIcButtonElement;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasFullWidthSearchBar = false;\n @State() mobileSearchBarVisible = false;\n @State() mobileSearchHiddenOnBlur = false;\n @State() navMenuVisible = false;\n @State() searchButtonClick = false;\n @State() searchValue = \"\";\n\n /\n The alignment of the top navigation content.\n /\n @Prop() contentAligned: IcAlignment = \"full-width\";\n /\n Can set a custom breakpoint for the top navigation to switch to mobile mode.\n * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.\n /\n @Prop() customMobileBreakpoint: IcDeviceSizes = DEVICE_SIZES.L;\n /\n The URL to navigate to when the app title is clicked.\n /\n @Prop() href = \"/\";\n\n /\n If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n /\n @Prop() inline = false;\n\n /\n The short title of the app to be displayed at small screen sizes in place of the app title.\n /\n @Prop() shortAppTitle = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status = \"\";\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n The version info to be displayed.\n /\n @Prop() version = \"\";\n\n /\n The app title to be displayed. This is required, unless a slotted app title link is used.\n /\n @Prop() appTitle?: string;\n @Watch(\"appTitle\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value\n //this watch can be removed once Gatsby hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /\n @internal - Emitted when the menu is closed.\n /\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n /\n @internal - Emitted when the menu is opened.\n /\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /\n Emitted when the top navigation is resized.\n */\n @Event() icTopNavResized: EventEmitter<{ size: number }>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n this.checkSlots();\n this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n if (!this.hasAppTitleSlot) {\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.menuButtonEl?.setFocus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler({\n detail,\n }: CustomEvent<IcSearchBarBlurEventDetail>): void {\n if (detail !== null) {\n if (this.mobileSearchBarVisible && !this.searchButtonClick) {\n //don't hide if blur was triggered by click on search button - let the click handler toggle the state\n this.toggleSearchBar();\n }\n this.searchValue = detail.value as string;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n this.searchValue = detail.value;\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.foregroundColor = detail.mode;\n }\n\n private checkSlots = () => {\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n this.hasAppTitleSlot = isSlotUsed(this.el, \"app-title\");\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n\n if (this.hasAppIcon) {\n const slottedAppIcon =\n this.el.querySelector<HTMLElement>('[slot=\"app-icon\"]');\n if (slottedAppIcon && slottedAppIcon.tagName === \"A\")\n slottedAppIcon.tabIndex = -1;\n }\n };\n\n private initialiseSearchBar = () => {\n if (!this.hasSearchSlotContent) return;\n\n const slot = getSlot(this.el, \"search\");\n if (slot?.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot?.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\"ic-search-bar\");\n }\n\n if (this.searchBar !== null) {\n this.searchBar.hideLabel = true;\n }\n };\n\n private toggleSearchBar = () => {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (!this.searchBar) return;\n\n this.mobileSearchButtonEl?.setAttribute(\n \"aria-label\",\n `${this.mobileSearchBarVisible ? \"Hide\" : \"Show\"} search`\n );\n this.hasFullWidthSearchBar = this.mobileSearchBarVisible;\n this.searchBar.fullWidth = this.mobileSearchBarVisible;\n if (this.mobileSearchBarVisible) {\n setTimeout(() => {\n this.searchBar?.focus();\n }, 100);\n }\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu = (show: boolean) => {\n this.navMenuVisible = show;\n (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();\n document.body.style.height = show ? \"100%\" : \"auto\";\n document.body.style.overflow = show ? \"hidden\" : \"auto\";\n };\n\n private searchButtonMouseDownHandler = () => {\n this.searchButtonClick = true;\n };\n\n private searchButtonClickHandler = () => {\n this.toggleSearchBar();\n this.searchButtonClick = false;\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize === this.deviceSize) return;\n\n this.deviceSize = currSize;\n if (currSize > this.customMobileBreakpoint) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.icTopNavResized.emit({\n size: currSize,\n });\n if (this.searchBar && document.activeElement === this.searchBar) {\n this.searchBar.setAttribute(\"hidden\", \"true\");\n //remove attribute again as this trigger a redraw & applies css\n this.searchBar.removeAttribute(\"hidden\");\n setTimeout(() => {\n this.searchBar?.focus();\n }, 100);\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback(getCurrentDeviceSize());\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const {\n appTitle,\n contentAligned,\n customMobileBreakpoint,\n deviceSize,\n el,\n foregroundColor,\n hasAppIcon,\n hasAppTitleSlot,\n hasFullWidthSearchBar,\n hasIconButtons,\n hasNavigation,\n hasSearchSlotContent,\n href,\n inline,\n menuButtonClick,\n mobileSearchBarVisible,\n navMenuVisible,\n searchButtonClickHandler,\n searchButtonMouseDownHandler,\n shortAppTitle,\n status,\n version,\n theme,\n } = this;\n\n const hasStatus = status !== \"\";\n const hasVersion = version !== \"\";\n const hasMenuContent =\n hasNavigation \|\| hasIconButtons \|\| hasStatus \|\| hasVersion;\n\n const isSmallDeviceSize = deviceSize <= DEVICE_SIZES.S;\n\n const searchButtonSize = isSmallDeviceSize ? \"medium\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? isSmallDeviceSize\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = isSmallDeviceSize ? \"small\" : \"medium\";\n\n const shortAppTitleSlot = isSlotUsed(el, \"short-app-title\");\n const Component = hasAppTitleSlot ? \"div\" : \"a\";\n const attrs = Component == \"a\" && {\n href: href,\n };\n\n return (\n <Host\n class={{\n \"fullwidth-searchbar\": hasFullWidthSearchBar,\n \"mobile-mode\": overMobileBreakpoint,\n [IcBrandForegroundEnum.Dark]:\n foregroundColor === IcBrandForegroundEnum.Dark,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle \|\| hasAppTitleSlot) && (\n <Component class=\"title-link\" {...attrs}>\n {hasAppIcon && (\n <div class=\"app-icon-container\">\n <slot name=\"app-icon\" />\n </div>\n )}\n {isSmallDeviceSize &&\n (!isEmptyString(shortAppTitle) \|\| shortAppTitleSlot) ? (\n <ic-typography\n variant=\"subtitle-small\"\n aria-label={\n (!hasAppTitleSlot \|\| !shortAppTitleSlot) &&\n `${appTitle} (${shortAppTitle})`\n }\n >\n <h1>\n {shortAppTitleSlot ? (\n <slot name=\"short-app-title\"></slot>\n ) : (\n shortAppTitle\n )}\n </h1>\n </ic-typography>\n ) : (\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {hasAppTitleSlot ? (\n <slot name=\"app-title\"></slot>\n ) : (\n appTitle\n )}\n </h1>\n </ic-typography>\n )}\n </Component>\n )}\n {hasStatus && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {status}\n </ic-typography>\n </div>\n )}\n {hasVersion && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(hasSearchSlotContent \|\| hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {!overMobileBreakpoint ? (\n <Fragment>\n <slot name=\"search\"></slot>\n {hasIconButtons && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n </Fragment>\n ) : (\n <Fragment>\n {hasSearchSlotContent && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={searchButtonMouseDownHandler}\n variant=\"icon-tertiary\"\n monochrome\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n theme={foregroundColor as IcThemeMode}\n onClick={searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#ffffff\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n </svg>\n </slot>\n </ic-button>\n )}\n {hasMenuContent && (\n <div class=\"menu-button-container\">\n <span\n id=\"navigation-landmark-button-text\"\n class=\"navigation-landmark-button-text\"\n aria-hidden=\"true\"\n >\n Main navigation button\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-button-text\"\n aria-hidden={`${navMenuVisible}`}\n >\n <ic-button\n id=\"menu-button\"\n ref={(el) => (this.menuButtonEl = el)}\n theme={foregroundColor as IcThemeMode}\n variant=\"secondary\"\n monochrome\n aria-expanded=\"false\"\n aria-haspopup=\"true\"\n aria-label={`Open ${\n hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={menuButtonClick}\n >\n Menu\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n fill=\"#ffffff\"\n slot=\"left-icon\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n </svg>\n </ic-button>\n </nav>\n </div>\n )}\n </Fragment>\n )}\n </div>\n </div>\n )}\n </div>\n\n {mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {hasNavigation && !overMobileBreakpoint && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main pages\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll\n monochrome\n appearance={foregroundColor}\n >\n <ul class=\"navigation-item-list\" tabindex=\"-1\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-horizontal-scroll>\n </nav>\n </div>\n )}\n </header>\n </ic-section-container>\n </div>\n {navMenuVisible && (\n <ic-navigation-menu\n version={version}\n status={status}\n class={{\n inline,\n }}\n >\n {hasIconButtons && (\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n <ul slot=\"navigation\">\n <slot name=\"navigation\"></slot>\n </ul>\n </ic-navigation-menu>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-typography/ic-typography.js CHANGED Viewed

@@ -163,7 +163,7 @@ export class Typography {
     render() {
         var _a, _b;
         const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, theme, } = this;
-        return (h(Host, { key: '5cc23b5c8822124b4963df5c55094a3408cbb813', class: {
+        return (h(Host, { key: 'f3ae0024474b949d4cd79a2d626524a08f0a83f9', class: {
                 [`ic-typography-${variant}`]: true,
                 [`ic-typography-vertical-margins-${variant}`]: !!applyVerticalMargins,
                 ["ic-typography-bold"]: !!bold,
@@ -176,7 +176,7 @@ export class Typography {
             ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
                 "IC-TOOLTIP") &&
             maxLines &&
-            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines && maxLines > 0 && truncated && (h("button", { key: '93e4f11420b64377f5fa5639bd8d7963c6191942', class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded }, expanded ? "See less" : "See more"))));
+            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines && maxLines > 0 && truncated && (h("button", { key: 'ab55fb9e3b5d0ed50a99d8f194fe0e9436de1613', class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded }, expanded ? "See less" : "See more"))));
     }
     static get is() { return "ic-typography"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/constants.js CHANGED Viewed

@@ -66,7 +66,7 @@ export const IC_BLOCK_COLOR_COMPONENTS = [
     "ic-footer",
     "ic-side-navigation",
     "ic-alert",
-];
+].join(",");
 export const IC_FIXED_COLOR_COMPONENTS = ["ic-alert"];
 export const IC_BLOCK_COLOR_EXCEPTIONS = {
     "ic-alert": ["ic-link", "ic-button"],

package/dist/collection/utils/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAErD,sBAAsB;AACtB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,sBAAsB;KAClC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,cAAc;IACd,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,eAAe;IACf,sBAAsB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,mBAAmB;IACnB,WAAW;IACX,oBAAoB;IACpB,UAAU;CACX,CAAC;~~AAEF~~,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,CAAC;AAMtD,MAAM,CAAC,MAAM,yBAAyB,GAAsB;IAC1D,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;CACrC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAClD,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAE9C,sFAAsF;AACtF,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK;IACL,UAAU;IACV,WAAW;IACX,WAAW;IACX,YAAY;IACZ,SAAS;IACT,iBAAiB;IACjB,iBAAiB;IACjB,eAAe;IACf,UAAU;IACV,aAAa;IACb,SAAS;IACT,QAAQ;IACR,KAAK;IACL,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,QAAQ;IACR,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,OAAO;IACP,KAAK;CACN,CAAC","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n neutral: {\n icon: neutralIcon,\n ariaLabel: \"Neutral\",\n },\n info: {\n icon: infoIcon,\n ariaLabel: \"For your information\",\n },\n warning: {\n icon: warningIcon,\n ariaLabel: \"Warning\",\n },\n error: {\n icon: errorIcon,\n ariaLabel: \"Error\",\n },\n success: {\n icon: successIcon,\n ariaLabel: \"Success\",\n },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n \"aria-atomic\",\n \"aria-autocomplete\",\n \"aria-busy\",\n \"aria-controls\",\n \"aria-current\",\n \"aria-describedby\",\n \"aria-description\",\n \"aria-details\",\n \"aria-disabled\",\n \"aria-dropeffect\",\n \"aria-errormessage\",\n \"aria-expanded\",\n \"aria-flowto\",\n \"aria-grabbed\",\n \"aria-haspopup\",\n \"aria-hidden\",\n \"aria-invalid\",\n \"aria-keyshortcuts\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-live\",\n \"aria-owns\",\n \"aria-relevant\",\n \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n XS: 576,\n S: 768,\n M: 992,\n L: 1200,\n XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n \"ic-hero\",\n \"ic-top-navigation\",\n \"ic-footer\",\n \"ic-side-navigation\",\n \"ic-alert\",\n];\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n \"ic-alert\": [\"ic-link\", \"ic-button\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n\n// Keyboard characters that do not affect the content of an input control when pressed\nexport const IGNORED_KEYBOARD_CHARACTERS = [\n \"Alt\",\n \"AltGraph\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"ArrowUp\",\n \"AudioVolumeDown\",\n \"AudioVolumeMute\",\n \"AudioVolumeUp\",\n \"CapsLock\",\n \"ContextMenu\",\n \"Control\",\n \"Delete\",\n \"End\",\n \"Enter\",\n \"Escape\",\n \"F1\",\n \"F10\",\n \"F11\",\n \"F12\",\n \"F2\",\n \"F3\",\n \"F4\",\n \"F5\",\n \"F6\",\n \"F7\",\n \"F8\",\n \"F9\",\n \"Home\",\n \"Insert\",\n \"Meta\",\n \"NumLock\",\n \"PageDown\",\n \"PageUp\",\n \"Shift\",\n \"Tab\",\n];\n"]}
1	+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAErD,sBAAsB;AACtB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,sBAAsB;KAClC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,cAAc;IACd,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,eAAe;IACf,sBAAsB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,mBAAmB;IACnB,WAAW;IACX,oBAAoB;IACpB,UAAU;CACX,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,CAAC;AAMtD,MAAM,CAAC,MAAM,yBAAyB,GAAsB;IAC1D,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;CACrC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAClD,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAE9C,sFAAsF;AACtF,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK;IACL,UAAU;IACV,WAAW;IACX,WAAW;IACX,YAAY;IACZ,SAAS;IACT,iBAAiB;IACjB,iBAAiB;IACjB,eAAe;IACf,UAAU;IACV,aAAa;IACb,SAAS;IACT,QAAQ;IACR,KAAK;IACL,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,QAAQ;IACR,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,OAAO;IACP,KAAK;CACN,CAAC","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n neutral: {\n icon: neutralIcon,\n ariaLabel: \"Neutral\",\n },\n info: {\n icon: infoIcon,\n ariaLabel: \"For your information\",\n },\n warning: {\n icon: warningIcon,\n ariaLabel: \"Warning\",\n },\n error: {\n icon: errorIcon,\n ariaLabel: \"Error\",\n },\n success: {\n icon: successIcon,\n ariaLabel: \"Success\",\n },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n \"aria-atomic\",\n \"aria-autocomplete\",\n \"aria-busy\",\n \"aria-controls\",\n \"aria-current\",\n \"aria-describedby\",\n \"aria-description\",\n \"aria-details\",\n \"aria-disabled\",\n \"aria-dropeffect\",\n \"aria-errormessage\",\n \"aria-expanded\",\n \"aria-flowto\",\n \"aria-grabbed\",\n \"aria-haspopup\",\n \"aria-hidden\",\n \"aria-invalid\",\n \"aria-keyshortcuts\",\n \"aria-label\",\n \"aria-labelledby\",\n \"aria-live\",\n \"aria-owns\",\n \"aria-relevant\",\n \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n XS: 576,\n S: 768,\n M: 992,\n L: 1200,\n XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n \"ic-hero\",\n \"ic-top-navigation\",\n \"ic-footer\",\n \"ic-side-navigation\",\n \"ic-alert\",\n].join(\",\");\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n \"ic-alert\": [\"ic-link\", \"ic-button\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n\n// Keyboard characters that do not affect the content of an input control when pressed\nexport const IGNORED_KEYBOARD_CHARACTERS = [\n \"Alt\",\n \"AltGraph\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \"ArrowUp\",\n \"AudioVolumeDown\",\n \"AudioVolumeMute\",\n \"AudioVolumeUp\",\n \"CapsLock\",\n \"ContextMenu\",\n \"Control\",\n \"Delete\",\n \"End\",\n \"Enter\",\n \"Escape\",\n \"F1\",\n \"F10\",\n \"F11\",\n \"F12\",\n \"F2\",\n \"F3\",\n \"F4\",\n \"F5\",\n \"F6\",\n \"F7\",\n \"F8\",\n \"F9\",\n \"Home\",\n \"Insert\",\n \"Meta\",\n \"NumLock\",\n \"PageDown\",\n \"PageUp\",\n \"Shift\",\n \"Tab\",\n];\n"]}

package/dist/collection/utils/helpers.js CHANGED Viewed

@@ -121,7 +121,9 @@ export const removeHiddenInput = (container) => {
 export const hasShadowDom = (el) => !!el && !!el.shadowRoot && !!el.attachShadow;
 export const getInputHelperTextID = (id) => id + "-helper-text";
 export const getInputValidationTextID = (id) => id + "-validation-text";
-export const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
+export const getInputDescribedByText = (el, inputId, helperText, validationText) => `${isSlotUsed(el, "helper-text") || helperText
+    ? getInputHelperTextID(inputId)
+    : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
 /**
  * This method helps to understand the context in which a component exists,
  * to assist with choosing appropriate foreground colours to use. For example,
@@ -137,25 +139,24 @@ export const getInputDescribedByText = (inputId, helperText, validationText) =>
 export const getBrandFromContext = (el, brandFromEvent = null) => {
     var _a;
     const parentElement = el.parentElement || el.getRootNode().host.parentElement;
-    const blockColorParent = parentElement === null || parentElement === void 0 ? void 0 : parentElement.closest(IC_BLOCK_COLOR_COMPONENTS.join(","));
-    // If within a block color component
-    if (blockColorParent) {
-        const parentTag = blockColorParent.tagName.toLowerCase();
-        const currentTag = el.tagName.toLowerCase();
-        if ((_a = IC_BLOCK_COLOR_EXCEPTIONS[parentTag]) === null || _a === void 0 ? void 0 : _a.includes(currentTag)) {
-            return IcBrandForegroundEnum.Default;
-        }
-        else if (brandFromEvent !== null &&
-            !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)) {
-            return brandFromEvent;
-        }
-        else if (blockColorParent.classList.contains(`${parentTag}-${IcBrandForegroundEnum.Dark}`) ||
-            blockColorParent.classList.contains(IcBrandForegroundEnum.Dark)) {
-            return IcBrandForegroundEnum.Dark;
-        }
+    const blockColorParent = parentElement === null || parentElement === void 0 ? void 0 : parentElement.closest(IC_BLOCK_COLOR_COMPONENTS);
+    if (!blockColorParent)
+        return IcBrandForegroundEnum.Default;
+    const parentTag = blockColorParent.tagName.toLowerCase();
+    if ((_a = IC_BLOCK_COLOR_EXCEPTIONS[parentTag]) === null || _a === void 0 ? void 0 : _a.includes(el.tagName.toLowerCase())) {
+        return IcBrandForegroundEnum.Default;
+    }
+    else if (brandFromEvent !== null &&
+        !IC_FIXED_COLOR_COMPONENTS.includes(parentTag)) {
+        return brandFromEvent;
+    }
+    else if (blockColorParent.classList.contains(`${parentTag}-${IcBrandForegroundEnum.Dark}`) ||
+        blockColorParent.classList.contains(IcBrandForegroundEnum.Dark)) {
+        return IcBrandForegroundEnum.Dark;
+    }
+    else {
         return IcBrandForegroundEnum.Light;
     }
-    return IcBrandForegroundEnum.Default;
 };
 /**
  * Checks if the current device is a mobile or tablet device.
@@ -173,12 +174,13 @@ export const isMobileOrTablet = () => "maxTouchPoints" in navigator && "userAgen
  * @param button - shadowDOM button
  */
 export const handleHiddenFormButtonClick = (form, button) => {
-    const hiddenFormButton = document.createElement("button");
-    button.type && hiddenFormButton.setAttribute("type", button.type);
+    var _a, _b;
+    const hiddenFormButton = (_a = document.querySelector("#hidden-form-button")) !== null && _a !== void 0 ? _a : document.createElement("button");
+    hiddenFormButton.setAttribute("type", (_b = button.type) !== null && _b !== void 0 ? _b : "button");
+    hiddenFormButton.id = "hidden-form-button";
     hiddenFormButton.style.display = "none";
     form.appendChild(hiddenFormButton);
     hiddenFormButton.click();
-    hiddenFormButton.remove();
 };
 export const isEmptyString = (value) => !value || value.trim().length === 0;
 // A helper function that checks if a prop has been defined
@@ -274,15 +276,10 @@ export const getCssProperty = (cssVar) => getComputedStyle(document.documentElem
  * This is a similar calculation to its CSS counterpart: "--ic-brand-text-color"
  * @returns number representing the brightness of the theme colour
  */
-export const getBrandColorBrightness = () => {
-    const themeRed = getCssProperty("--ic-brand-color-primary-r");
-    const themeGreen = getCssProperty("--ic-brand-color-primary-g");
-    const themeBlue = getCssProperty("--ic-brand-color-primary-b");
-    return ((parseInt(themeRed) * 299 +
-        parseInt(themeGreen) * 587 +
-        parseInt(themeBlue) * 114) /
-        1000);
-};
+export const getBrandColorBrightness = () => (parseInt(getCssProperty("--ic-brand-color-primary-r")) * 299 +
+    parseInt(getCssProperty("--ic-brand-color-primary-g")) * 587 +
+    parseInt(getCssProperty("--ic-brand-color-primary-b")) * 114) /
+    1000;
 /**
  * Returns if dark or light foreground colors should be used for color contrast reasons
  * @returns "dark" or "light"