npm - @ukic/web-components - Versions diffs - 2.35.2 → 3.0.0-alpha.10 - Mend

@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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 (1059) hide show

package/dist/cjs/ic-top-navigation.cjs.entry.js CHANGED Viewed

@@ -3,17 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f982899d.js');
-const types = require('./types-dc22e301.js');
-const helpers = require('./helpers-6f6991cb.js');
+const helpers = require('./helpers-eca4c27e.js');
-const icTopNavigationCss = "/*! 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;color:var(--ic-theme-text);width:100%;position:relative}:host .top-navigation{background-color:var(--ic-theme-primary);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-theme-text);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-theme-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-theme-active)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-keyline-lighten);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name=\"app-icon\"]::slotted(*){fill:var(--ic-theme-text);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-theme-text)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}:host(.mobile-mode) .app-status,:host(.mobile-mode) .app-version{display:none}:host(.mobile-mode) .title-link{margin-right:var(--ic-space-xs)}:host(.mobile-mode) .search-menu-container{max-width:10rem}:host(.mobile-mode) .search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(*){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-hc-border)}.app-status,.app-version{border:var(--ic-hc-border)}slot[name=\"app-icon\"]::slotted(*){fill:currentcolor}slot[name=\"toggle-icon\"] svg{fill:currentcolor}}";
+const icTopNavigationCss = "/*! 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;color:var(--ic-top-navigation-text);width:100%;position:relative;--ic-typography-color:var(--ic-top-navigation-text);--ic-button-secondary-text-monochrome:var(--ic-brand-text-color);--ic-button-secondary-border-monochrome:var(--ic-brand-text-color)}:host(.dark){color:var(--ic-color-text-primary-light);--ic-typography-color:var(--ic-color-text-primary-light);--ic-top-navigation-logo:var(--ic-color-icon-neutral);--ic-top-navigation-icon:var(--ic-color-icon-neutral);--ic-top-navigation-theme:var(--ic-color-icon-neutral);--ic-top-navigation-status-tag:var(--ic-color-background-primary-dark);--ic-top-navigation-status-tag-text:var(--ic-color-brand-text);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-darken-10);--navigation-link-colour:var(--ic-color-text-primary-light)}:host ::slotted(ic-navigation-item){--navigation-link-colour:var(--ic-top-navigation-text)}:host(.dark) ::slotted(ic-navigation-button){--ic-button-icon-monochrome:var(--ic-color-text-primary-light)}::slotted(ic-navigation-button){--ic-button-icon-monochrome:white}:host .top-navigation{background-color:var(--ic-top-navigation-background);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-top-navigation-icon-and-label);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-top-navigation-title-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-top-navigation-title-pressed)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-space-1px) solid var(--ic-top-navigation-keyline);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-border-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag);color:var(--ic-top-navigation-status-tag-text);--ic-typography-color:var(--ic-top-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag-secondary);color:var(--ic-top-navigation-status-tag);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name=\"app-icon\"]::slotted(*){fill:var(--ic-top-navigation-logo);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-top-navigation-icon)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}:host(.mobile-mode) .app-status,:host(.mobile-mode) .app-version{display:none}:host(.mobile-mode) .title-link{margin-right:var(--ic-space-xs)}:host(.mobile-mode) .search-menu-container{max-width:10rem}:host(.mobile-mode) .search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-border-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(*){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-border-hc)}.app-status,.app-version{border:var(--ic-border-hc)}slot[name=\"app-icon\"]::slotted(*){fill:currentcolor}slot[name=\"toggle-icon\"] svg{fill:currentcolor}}";
 const TopNavigation = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.icNavigationMenuClosed = index.createEvent(this, "icNavigationMenuClosed", 7);
         this.icNavigationMenuOpened = index.createEvent(this, "icNavigationMenuOpened", 7);
-        this.topNavResized = index.createEvent(this, "topNavResized", 7);
+        this.icTopNavResized = index.createEvent(this, "icTopNavResized", 7);
         this.hasAppIcon = false;
         this.hasIconButtons = false;
         this.hasNavigation = false;
@@ -59,7 +58,7 @@ const TopNavigation = class {
                         this.toggleSearchBar();
                     }
                 }
-                this.topNavResized.emit({
+                this.icTopNavResized.emit({
                     size: currSize,
                 });
                 if (this.searchBar && document.activeElement === this.searchBar) {
@@ -79,7 +78,7 @@ const TopNavigation = class {
             this.resizeObserver.observe(this.el);
         };
         this.deviceSize = helpers.DEVICE_SIZES.XL;
-        this.foregroundColor = helpers.getThemeForegroundColor();
+        this.foregroundColor = helpers.getBrandForegroundAppearance();
         this.hasFullWidthSearchBar = false;
         this.mobileSearchBarVisible = false;
         this.mobileSearchHiddenOnBlur = false;
@@ -92,6 +91,7 @@ const TopNavigation = class {
         this.inline = false;
         this.shortAppTitle = "";
         this.status = "";
+        this.theme = "inherit";
         this.version = "";
         this.appTitle = undefined;
     }
@@ -133,7 +133,7 @@ const TopNavigation = class {
     searchValueChangeHandler({ detail }) {
         this.searchValue = detail.value;
     }
-    themeChangeHandler({ detail }) {
+    brandChangeHandler({ detail }) {
         this.foregroundColor = detail.mode;
     }
     toggleSearchBar() {
@@ -156,11 +156,11 @@ const TopNavigation = class {
         document.body.style.overflow = show ? "hidden" : "auto";
     }
     render() {
-        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, } = this;
+        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 hasStatus = status !== "";
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
-        const searchButtonSize = deviceSize <= helpers.DEVICE_SIZES.S ? "default" : "large";
+        const searchButtonSize = deviceSize <= helpers.DEVICE_SIZES.S ? "medium" : "large";
         const hasTitle = appTitle !== "" && helpers.isPropDefined(appTitle);
         const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;
         const appTitleVariant = overMobileBreakpoint
@@ -169,7 +169,7 @@ const TopNavigation = class {
                 : "h4"
             : "h3";
         const mobileSearchButtonTitle = `${mobileSearchBarVisible ? "Hide" : "Show"} search`;
-        const menuSize = deviceSize <= helpers.DEVICE_SIZES.S ? "small" : "default";
+        const menuSize = deviceSize <= helpers.DEVICE_SIZES.S ? "small" : "medium";
         const shortAppTitleSlot = helpers.isSlotUsed(el, "short-app-title");
         const hasAppTitleSlot = helpers.isSlotUsed(el, "app-title");
         const Component = hasAppTitleSlot ? "div" : "a";
@@ -179,10 +179,15 @@ const TopNavigation = class {
         return (index.h(index.Host, { class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
-                [types.IcThemeForegroundEnum.Dark]: foregroundColor === types.IcThemeForegroundEnum.Dark,
+                [helpers.IcBrandForegroundEnum.Dark]: foregroundColor === helpers.IcBrandForegroundEnum.Dark,
+                [`ic-theme-${theme}`]: theme !== "inherit",
             } }, index.h("div", { class: "top-navigation" }, index.h("ic-section-container", { aligned: contentAligned, "full-height": true }, index.h("header", { role: "banner" }, index.h("div", { class: "top-panel-container" }, index.h("div", { class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (index.h(Component, Object.assign({ class: "title-link" }, attrs), hasAppIcon && (index.h("div", { class: "app-icon-container" }, index.h("slot", { name: "app-icon" }))), deviceSize <= helpers.DEVICE_SIZES.S &&
             (!helpers.isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (index.h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, index.h("h1", null, shortAppTitleSlot ? (index.h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (index.h("ic-typography", { variant: appTitleVariant }, index.h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (index.h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (index.h("div", { class: "app-status" }, index.h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (index.h("div", { class: "app-version" }, index.h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (index.h("div", { class: "search-menu-container" }, index.h("div", { class: "search-actions-container" }, !overMobileBreakpoint && index.h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (index.h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: foregroundColor, onClick: searchButtonClickHandler }, index.h("slot", { name: "toggle-icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))))), hasIconButtons && !overMobileBreakpoint && (index.h("div", { class: "icon-buttons-container" }, index.h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (index.h("div", { class: "menu-button-container" }, index.h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), index.h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, index.h("ic-button", { id: "menu-button", appearance: foregroundColor, variant: "secondary", "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "icon" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (index.h("div", { class: "search-bar-container" }, index.h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (index.h("div", { class: "navigation-tabs" }, index.h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), index.h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, index.h("ic-horizontal-scroll", { appearance: foregroundColor }, index.h("ul", { class: "navigation-item-list", tabindex: "-1" }, index.h("slot", { name: "navigation" }))))))))), navMenuVisible && (index.h("ic-navigation-menu", { version: version, status: status, class: {
+                `${appTitle} (${shortAppTitle})` }, index.h("h1", null, shortAppTitleSlot ? (index.h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (index.h("ic-typography", { variant: appTitleVariant }, index.h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (index.h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (index.h("div", { class: "app-status" }, index.h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (index.h("div", { class: "app-version" }, index.h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (index.h("div", { class: "search-menu-container" }, index.h("div", { class: "search-actions-container" }, !overMobileBreakpoint && index.h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (index.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 == helpers.IcBrandForegroundEnum.Light
+                ? helpers.IcBrandForegroundEnum.Dark
+                : helpers.IcBrandForegroundEnum.Light, onClick: searchButtonClickHandler }, index.h("slot", { name: "toggle-icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.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" }))))), hasIconButtons && !overMobileBreakpoint && (index.h("div", { class: "icon-buttons-container" }, index.h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (index.h("div", { class: "menu-button-container" }, index.h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), index.h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, index.h("ic-button", { id: "menu-button", theme: foregroundColor == helpers.IcBrandForegroundEnum.Light
+                ? helpers.IcBrandForegroundEnum.Dark
+                : helpers.IcBrandForegroundEnum.Light, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, index.h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), index.h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (index.h("div", { class: "search-bar-container" }, index.h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (index.h("div", { class: "navigation-tabs" }, index.h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), index.h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, index.h("ic-horizontal-scroll", { monochrome: true, appearance: foregroundColor }, index.h("ul", { class: "navigation-item-list", tabindex: "-1" }, index.h("slot", { name: "navigation" }))))))))), navMenuVisible && (index.h("ic-navigation-menu", { version: version, status: status, class: {
                 ["inline"]: inline,
             } }, hasIconButtons && (index.h("div", { class: "menu-buttons-slot", slot: "buttons" }, index.h("slot", { name: "buttons" }))), index.h("ul", { slot: "navigation" }, index.h("slot", { name: "navigation" }))))));
     }

package/dist/cjs/ic-top-navigation.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-top-navigation.entry.cjs.js","mappings":"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","names":["isSlotUsed","getSlot","getCurrentDeviceSize","DEVICE_SIZES","getThemeForegroundColor","onComponentPropUndefinedChange","checkResizeObserver","onComponentRequiredPropUndefined","isPropDefined","h","Host","IcThemeForegroundEnum","isEmptyString"],"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n color: var(--ic-theme-text);\n width: 100%;\n position: relative;\n}\n\n:host .top-navigation {\n background-color: var(--ic-theme-primary);\n height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n width: 100%;\n}\n\n:host .title-link {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n padding: var(--ic-space-xxs);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n color: var(--ic-theme-text);\n text-decoration: none;\n outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n background-color: var(--ic-theme-hover);\n}\n\n:host .title-link:active:not(:focus) {\n background-color: var(--ic-theme-active);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n font-weight: 600;\n}\n\n:host .nav-panel-container {\n border-top: var(--ic-keyline-lighten);\n padding: 0 var(--ic-space-lg);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n border-top: var(--ic-keyline-darken);\n}\n\n.top-panel-container {\n display: flex;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n display: flex;\n padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n display: flex;\n margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n display: flex;\n}\n\n.title-wrap {\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n}\n\n:host .app-status {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-architectural-white);\n color: var(--ic-color-primary-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\n:host(.dark) .app-status {\n background-color: var(--ic-theme-text);\n color: var(--ic-color-white-text);\n}\n\n:host .app-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-theme-active);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-left: var(--ic-space-xs);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted() {\n fill: var(--ic-theme-text);\n width: 2em;\n height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n fill: var(--ic-theme-text);\n}\n\n.search-menu-container {\n justify-content: right;\n display: flex;\n align-items: center;\n}\n\n.menu-button-container {\n margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.search-actions-container {\n display: flex;\n}\n\n.menu-buttons-slot {\n display: flex;\n flex-direction: column;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 var(--ic-space-1px));\n overflow: hidden;\n}\n\n.navigation-item-list {\n display: flex;\n list-style: none;\n height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n display: none;\n}\n\n:host ic-section-container {\n padding-bottom: 0 !important;\n padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n .app-details-container {\n margin-right: var(--ic-space-lg);\n }\n}\n\n/* large /\n@media screen and (max-width: 1200px) {\n :host .nav-panel-container {\n padding: 0 var(--ic-space-md);\n }\n}\n\n/* Mobile styling */\n:host(.mobile-mode) .app-status,\n:host(.mobile-mode) .app-version {\n display: none;\n}\n\n:host(.mobile-mode) .title-link {\n margin-right: var(--ic-space-xs);\n}\n\n:host(.mobile-mode) .search-menu-container {\n max-width: 10rem;\n}\n\n:host(.mobile-mode) .search-bar-container {\n display: flex;\n justify-content: center;\n align-items: center;\n border-top: var(--ic-keyline-darken);\n height: 4rem;\n padding-left: var(--ic-space-md);\n padding-right: var(--ic-space-md);\n margin-left: calc(-1 var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n}\n\n/* x small /\n@media screen and (max-width: 576px) {\n :host .title-link {\n margin-right: var(--ic-space-xxxs);\n word-break: break-word;\n hyphens: none;\n }\n\n .top-panel-container {\n min-height: 2.5rem;\n }\n\n .search-bar-container {\n margin-top: 0;\n height: 3.5rem;\n padding-left: var(--ic-space-xs);\n padding-right: var(--ic-space-xs);\n }\n\n .menu-button-container {\n margin-left: var(--ic-space-sm);\n }\n\n slot[name=\"app-icon\"]::slotted() {\n width: 1.5em;\n height: 1.5em;\n }\n\n slot[name=\"toggle-icon\"] svg {\n width: 1.5em;\n height: 1.5em;\n }\n}\n\n@media (forced-colors: active) {\n :host .top-navigation {\n border-bottom: var(--ic-hc-border);\n }\n\n .app-status,\n .app-version {\n border: var(--ic-hc-border);\n }\n\n slot[name=\"app-icon\"]::slotted() {\n fill: currentcolor;\n }\n\n slot[name=\"toggle-icon\"] svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n IcTypographyVariants,\n IcAlignment,\n IcThemeForeground,\n IcThemeForegroundEnum,\n IcTheme,\n IcDeviceSizes,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\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: boolean = false;\n private hasIconButtons: boolean = false;\n private hasNavigation: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver = null;\n private searchBar: HTMLIcSearchBarElement = null;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() hasFullWidthSearchBar: boolean = false;\n @State() mobileSearchBarVisible: boolean = false;\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() searchValue: string = \"\";\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: string = \"/\";\n\n /\n If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n /\n @Prop() inline: boolean = 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: string = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status: string = \"\";\n\n /\n The version info to be displayed.\n /\n @Prop() version: string = \"\";\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\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() topNavResized: 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 !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\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;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void {\n this.searchValue = detail.value;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler({ detail }: CustomEvent<IcTheme>): 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) {\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\n private toggleSearchBar(): void {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (this.searchBar !== null) {\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\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\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) {\n this.deviceSize = currSize;\n if (currSize > this.customMobileBreakpoint) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.topNavResized.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\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 } = this;\n\n const hasStatus = status !== \"\";\n const hasVersion = version !== \"\";\n const hasMenuContent =\n hasNavigation \|\| hasIconButtons \|\| hasStatus \|\| hasVersion;\n\n const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? deviceSize <= DEVICE_SIZES.S\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\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 [IcThemeForegroundEnum.Dark]:\n foregroundColor === IcThemeForegroundEnum.Dark,\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 {deviceSize <= DEVICE_SIZES.S &&\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 && <slot name=\"search\"></slot>}\n\n {hasSearchSlotContent && overMobileBreakpoint && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={searchButtonMouseDownHandler}\n variant=\"icon\"\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n appearance={foregroundColor}\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\n {hasIconButtons && !overMobileBreakpoint && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && overMobileBreakpoint && (\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 appearance={foregroundColor}\n variant=\"secondary\"\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=\"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 </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 appearance={foregroundColor}>\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\"]: 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"],"version":3}
1	+ {"file":"ic-top-navigation.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,qtQAAqtQ;;MCmDnuQ,aAAa;;;;;;QAChB,eAAU,GAAY,KAAK,CAAC;QAC5B,mBAAc,GAAY,KAAK,CAAC;QAChC,kBAAa,GAAY,KAAK,CAAC;QAC/B,yBAAoB,GAAY,KAAK,CAAC;QAEtC,mBAAc,GAAmB,IAAI,CAAC;QACtC,cAAS,GAA2B,IAAI,CAAC;QAuIzC,eAAU,GAAG;YACnB,IAAI,CAAC,UAAU,GAAGA,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;YAClD,IAAI,CAAC,aAAa,GAAGA,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,cAAc,GAAGA,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YACrD,IAAI,CAAC,oBAAoB,GAAGA,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;SAC3D,CAAC;QAEM,wBAAmB,GAAG;YAC5B,IAAI,IAAI,CAAC,oBAAoB,EAAE;gBAC7B,MAAM,IAAI,GAAGC,eAAO,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;gBACxC,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,eAAe,EAAE;oBACrC,IAAI,CAAC,SAAS,GAAG,IAA8B,CAAC;iBACjD;qBAAM,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,MAAM,EAAE;oBACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;iBACtD;gBAED,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;oBAC3B,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;iBACjC;aACF;SACF,CAAC;QAoBM,oBAAe,GAAG;YACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;SACxB,CAAC;QASM,iCAA4B,GAAG;YACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;SAC/B,CAAC;QAEM,6BAAwB,GAAG;YACjC,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;SAChC,CAAC;QAEM,2BAAsB,GAAG,CAAC,QAAgB;YAChD,IAAI,QAAQ,KAAK,IAAI,CAAC,UAAU,EAAE;gBAChC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;gBAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,sBAAsB,EAAE;oBAC1C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;oBACxB,IAAI,IAAI,CAAC,sBAAsB,EAAE;wBAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;qBACxB;iBACF;gBACD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;oBACxB,IAAI,EAAE,QAAQ;iBACf,CAAC,CAAC;gBACH,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,SAAS,EAAE;oBAC/D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;;oBAE9C,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;oBACzC,UAAU,CAAC;wBACT,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;qBACxB,EAAE,GAAG,CAAC,CAAC;iBACT;aACF;SACF,CAAC;QAEM,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;gBACvC,IAAI,CAAC,sBAAsB,CAACC,4BAAoB,EAAE,CAAC,CAAC;aACrD,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACtC,CAAC;0BA5N4BC,oBAAY,CAAC,EAAE;+BACCC,oCAA4B,EAAE;qCAClC,KAAK;sCACJ,KAAK;wCACH,KAAK;8BACf,KAAK;iCACF,KAAK;2BACZ,EAAE;8BAKK,YAAY;sCAKFD,oBAAY,CAAC,CAAC;oBAIvC,GAAG;sBAKA,KAAK;6BAKC,EAAE;sBAKT,EAAE;qBAKG,SAAS;uBAKb,EAAE;;;IAQ5B,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;;;QAGjDE,sCAA8B,CAC5B,QAAQ,EACR,QAAQ,EACR,IAAI,CAAC,mBAAmB,CACzB,CAAC;KACH;IAiBD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACnC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,UAAU,GAAGH,4BAAoB,EAAE,CAAC;QACzC,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,gBAAgB;QACdI,2BAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5C,CAACN,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC;YAC/BO,wCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAChD,gBAAgB,CACjB,CAAC;KACL;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAGD,sBAAsB;QACpB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAc,cAAc,CAAC,CAAC,KAAK,EAAE,CAAC;KACvE;IAGD,sBAAsB,CAAC,EACrB,MAAM,GACkC;QACxC,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,IAAI,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;;gBAE1D,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB;YACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAe,CAAC;SAC3C;KACF;IAGD,wBAAwB,CAAC,EAAE,MAAM,EAAmC;QAClE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAe,CAAC;KAC3C;IAGD,kBAAkB,CAAC,EAAE,MAAM,EAAwB;QACjD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC;KACpC;IAwBO,eAAe;QACrB,IAAI,CAAC,sBAAsB,GAAG,CAAC,IAAI,CAAC,sBAAsB,CAAC;QAE3D,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;YAC3B,IAAI,CAAC,oBAAoB,CAAC,YAAY,CACpC,YAAY,EACZ,GAAG,IAAI,CAAC,sBAAsB,GAAG,MAAM,GAAG,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;gBAC/B,UAAU,CAAC;oBACT,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;iBACxB,EAAE,GAAG,CAAC,CAAC;aACT;SACF;KACF;IAMO,WAAW,CAAC,IAAa;QAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC3B,CAAC,IAAI,GAAG,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,EAAE,CAAC;QAC1E,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;QACpD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;KACzD;IA0CD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,EAAE,EACF,eAAe,EACf,UAAU,EACV,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,gBAAgB,GAAG,UAAU,IAAIJ,oBAAY,CAAC,CAAC,GAAG,QAAQ,GAAG,OAAO,CAAC;QAC3E,MAAM,QAAQ,GAAG,QAAQ,KAAK,EAAE,IAAIK,qBAAa,CAAC,QAAQ,CAAC,CAAC;QAC5D,MAAM,oBAAoB,GAAG,UAAU,IAAI,sBAAsB,CAAC;QAElE,MAAM,eAAe,GAAyB,oBAAoB;cAC9D,UAAU,IAAIL,oBAAY,CAAC,CAAC;kBAC1B,gBAAgB;kBAChB,IAAI;cACN,IAAI,CAAC;QAET,MAAM,uBAAuB,GAAG,GAC9B,sBAAsB,GAAG,MAAM,GAAG,MACpC,SAAS,CAAC;QACV,MAAM,QAAQ,GAAG,UAAU,IAAIA,oBAAY,CAAC,CAAC,GAAG,OAAO,GAAG,QAAQ,CAAC;QAEnE,MAAM,iBAAiB,GAAGH,kBAAU,CAAC,EAAE,EAAE,iBAAiB,CAAC,CAAC;QAC5D,MAAM,eAAe,GAAGA,kBAAU,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;QACpD,MAAM,SAAS,GAAG,eAAe,GAAG,KAAK,GAAG,GAAG,CAAC;QAChD,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,IAAI;YAChC,IAAI,EAAE,IAAI;SACX,CAAC;QAEF,QACES,QAACC,UAAI,IACH,KAAK,EAAE;gBACL,qBAAqB,EAAE,qBAAqB;gBAC5C,aAAa,EAAE,oBAAoB;gBACnC,CAACC,6BAAqB,CAAC,IAAI,GACzB,eAAe,KAAKA,6BAAqB,CAAC,IAAI;gBAChD,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAEDF,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,kCAAsB,OAAO,EAAE,cAAc,yBAC3CA,oBAAQ,IAAI,EAAC,QAAQ,IACnBA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,iBAAK,KAAK,EAAC,uBAAuB,IAC/B,CAAC,QAAQ,IAAI,eAAe,MAC3BA,QAAC,SAAS,kBAAC,KAAK,EAAC,YAAY,IAAK,KAAK,GACpC,UAAU,KACTA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACpB,CACP,EACA,UAAU,IAAIN,oBAAY,CAAC,CAAC;aAC5B,CAACS,qBAAa,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,IAClDH,2BACE,OAAO,EAAC,gBAAgB,gBAEtB,CAAC,CAAC,eAAe,IAAI,CAAC,iBAAiB;gBACvC,GAAG,QAAQ,KAAK,aAAa,GAAG,IAGlCA,oBACG,iBAAiB,IAChBA,kBAAM,IAAI,EAAC,iBAAiB,GAAQ,KAEpC,aAAa,CACd,CACE,CACS,KAEhBA,2BAAe,OAAO,EAAE,eAAe,IACrCA,gBAAI,KAAK,EAAC,YAAY,IACnB,eAAe,IACdA,kBAAM,IAAI,EAAC,WAAW,GAAQ,KAE9B,QAAQ,CACT,CACE,CACS,CACjB,CACS,CACb,EACA,SAAS,KACRA,iBAAK,KAAK,EAAC,YAAY,IACrBA,yCACa,SAAS,EACpB,OAAO,EAAC,iBAAiB,EACzB,KAAK,EAAC,iBAAiB,IAEtB,MAAM,CACO,CACZ,CACP,EACA,UAAU,KACTA,iBAAK,KAAK,EAAC,aAAa,IACtBA,2BACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,kBAAkB,gBACb,aAAa,IAEvB,OAAO,CACM,CACZ,CACP,CACG,EAEL,CAAC,oBAAoB,IAAI,cAAc,MACtCA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,iBAAK,KAAK,EAAC,0BAA0B,IAClC,CAAC,oBAAoB,IAAIA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAEpD,oBAAoB,IAAI,oBAAoB,KAC3CA,uBACE,EAAE,EAAC,sBAAsB,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC,EAC7C,WAAW,EAAE,4BAA4B,EACzC,OAAO,EAAC,eAAe,EACvB,UAAU,QACV,IAAI,EAAE,gBAAgB,gBACV,uBAAuB,EACnC,KAAK,EACH,eAAe,IAAIE,6BAAqB,CAAC,KAAK;kBAC1CA,6BAAqB,CAAC,IAAI;kBAC1BA,6BAAqB,CAAC,KAAK,EAEjC,OAAO,EAAE,wBAAwB,IAEjCF,kBAAM,IAAI,EAAC,aAAa,IACtBA,iBACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,SAAS,IAEdA,kBAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG,EACxCA,kBAAM,CAAC,EAAC,4OAA4O,GAAG,CACnP,CACD,CACG,CACb,EAEA,cAAc,IAAI,CAAC,oBAAoB,KACtCA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,EACA,cAAc,IAAI,oBAAoB,KACrCA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,kBACE,EAAE,EAAC,iCAAiC,EACpC,KAAK,EAAC,iCAAiC,iBAC3B,MAAM,6BAGb,EACPA,oCACkB,iCAAiC,iBACpC,GAAG,cAAc,EAAE,IAEhCA,uBACE,EAAE,EAAC,aAAa,EAChB,KAAK,EACH,eAAe,IAAIE,6BAAqB,CAAC,KAAK;kBAC1CA,6BAAqB,CAAC,IAAI;kBAC1BA,6BAAqB,CAAC,KAAK,EAEjC,OAAO,EAAC,WAAW,EACnB,UAAU,yBACI,OAAO,mBACP,MAAM,gBACR,QACV,aAAa,GAAG,YAAY,GAAG,KACjC,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,eAAe,YAGxBF,iBACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,WAAW,IAEhBA,kBAAM,CAAC,EAAC,iBAAiB,EAAC,IAAI,EAAC,MAAM,GAAG,EACxCA,kBAAM,CAAC,EAAC,+CAA+C,GAAG,CACtD,CACI,CACR,CACF,CACP,CACG,CACF,CACP,CACG,EAEL,sBAAsB,KACrBA,iBAAK,KAAK,EAAC,sBAAsB,IAC/BA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACP,EAEA,aAAa,IAAI,CAAC,oBAAoB,KACrCA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,kBACE,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,iBACpB,MAAM,iBAGb,EACPA,oCACkB,0BAA0B,EAC1C,KAAK,EAAC,qBAAqB,IAE3BA,kCACE,UAAU,QACV,UAAU,EAAE,eAAe,IAE3BA,gBAAI,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,IAAI,IAC5CA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACgB,CACnB,CACF,CACP,CACM,CACY,CACnB,EACL,cAAc,KACbA,gCACE,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;gBACL,CAAC,QAAQ,GAAG,MAAM;aACnB,IAEA,cAAc,KACbA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS,IAC3CA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACP,EACDA,gBAAI,IAAI,EAAC,YAAY,IACnBA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CAC5B,CACc,CACtB,CACI,EACP;KACH;;;;;;;;;;","names":["isSlotUsed","getSlot","getCurrentDeviceSize","DEVICE_SIZES","getBrandForegroundAppearance","onComponentPropUndefinedChange","checkResizeObserver","onComponentRequiredPropUndefined","isPropDefined","h","Host","IcBrandForegroundEnum","isEmptyString"],"sources":["src/components/ic-top-navigation/ic-top-navigation.css?tag=ic-top-navigation&encapsulation=shadow","src/components/ic-top-navigation/ic-top-navigation.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n color: var(--ic-top-navigation-text);\n width: 100%;\n position: relative;\n\n --ic-typography-color: var(--ic-top-navigation-text);\n\n --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);\n --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);\n}\n\n:host(.dark) {\n color: var(--ic-color-text-primary-light);\n --ic-typography-color: var(--ic-color-text-primary-light);\n --ic-top-navigation-logo: var(--ic-color-icon-neutral);\n --ic-top-navigation-icon: var(--ic-color-icon-neutral);\n --ic-top-navigation-theme: var(--ic-color-icon-neutral);\n --ic-top-navigation-status-tag: var(--ic-color-background-primary-dark);\n --ic-top-navigation-status-tag-text: var(--ic-color-brand-text);\n --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);\n --navigation-link-colour: var(--ic-color-text-primary-light);\n}\n\n:host ::slotted(ic-navigation-item) {\n --navigation-link-colour: var(--ic-top-navigation-text);\n}\n\n:host(.dark) ::slotted(ic-navigation-button) {\n --ic-button-icon-monochrome: var(--ic-color-text-primary-light);\n}\n\n::slotted(ic-navigation-button) {\n --ic-button-icon-monochrome: white;\n}\n\n:host .top-navigation {\n background-color: var(--ic-top-navigation-background);\n height: max-content;\n}\n\n:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form) {\n width: 100%;\n}\n\n:host .title-link {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n padding: var(--ic-space-xxs);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host .title-link,\n:host .title-link:visited,\n:host .title-link:active,\n:host .title-link ::slotted(a),\n:host .title-link:visited ::slotted(a),\n:host .title-link:active ::slotted(a) {\n color: var(--ic-top-navigation-icon-and-label);\n text-decoration: none;\n outline: none;\n}\n\n:host .title-link:hover:not(:focus) {\n background-color: var(--ic-top-navigation-title-hover);\n}\n\n:host .title-link:active:not(:focus) {\n background-color: var(--ic-top-navigation-title-pressed);\n}\n\n:host .title-link:hover {\n border-radius: var(--ic-border-radius);\n}\n\n:host .title-link:focus,\n:host .title-link:focus-within {\n border-radius: var(--ic-border-radius);\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n}\n\n:host .title-link ic-typography {\n font-weight: 600;\n}\n\n:host .nav-panel-container {\n border-top: var(--ic-space-1px) solid var(--ic-top-navigation-keyline);\n padding: 0 var(--ic-space-lg);\n margin-left: calc(-1 * var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n display: flex;\n}\n\n:host(.dark) .nav-panel-container {\n border-top: var(--ic-border-keyline-darken);\n}\n\n.top-panel-container {\n display: flex;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.navigation-tabs {\n margin-top: calc(-1 * var(--ic-space-1px));\n}\n\n.app-details-container {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n margin-right: var(--ic-space-md);\n}\n\n.app-icon-container {\n display: flex;\n padding-right: var(--ic-space-xs);\n}\n\n.icon-buttons-container {\n display: flex;\n margin-left: var(--ic-space-md);\n}\n\n.icon-buttons-container ::slotted(nav) {\n display: flex;\n}\n\n.title-wrap {\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n hyphens: auto;\n}\n\n:host .app-status {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-top-navigation-status-tag);\n color: var(--ic-top-navigation-status-tag-text);\n --ic-typography-color: var(--ic-top-navigation-status-tag-text);\n padding: var(--ic-space-xxs) var(--ic-space-lg);\n margin-left: var(--ic-space-md);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\n:host .app-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-top-navigation-status-tag-secondary);\n color: var(--ic-top-navigation-status-tag);\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n margin-left: var(--ic-space-xs);\n flex: 1 1 0;\n max-width: fit-content;\n}\n\nslot[name=\"app-icon\"]::slotted() {\n fill: var(--ic-top-navigation-logo);\n width: 2em;\n height: 2em;\n}\n\nslot[name=\"toggle-icon\"] svg {\n fill: var(--ic-top-navigation-icon);\n}\n\n.search-menu-container {\n justify-content: right;\n display: flex;\n align-items: center;\n}\n\n.menu-button-container {\n margin-left: var(--ic-space-md);\n}\n\n.menu-button-container .navigation-landmark-button-text {\n position: absolute;\n left: -10000px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.search-actions-container {\n display: flex;\n}\n\n.menu-buttons-slot {\n display: flex;\n flex-direction: column;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 var(--ic-space-1px));\n overflow: hidden;\n}\n\n.navigation-item-list {\n display: flex;\n list-style: none;\n height: 2.75rem;\n}\n\n.navigation-item-list::-webkit-scrollbar {\n display: none;\n}\n\n:host ic-section-container {\n padding-bottom: 0 !important;\n padding-top: 0 !important;\n}\n\n@media screen and (min-width: 993px) {\n .app-details-container {\n margin-right: var(--ic-space-lg);\n }\n}\n\n/* large /\n@media screen and (max-width: 1200px) {\n :host .nav-panel-container {\n padding: 0 var(--ic-space-md);\n }\n}\n\n/* Mobile styling */\n:host(.mobile-mode) .app-status,\n:host(.mobile-mode) .app-version {\n display: none;\n}\n\n:host(.mobile-mode) .title-link {\n margin-right: var(--ic-space-xs);\n}\n\n:host(.mobile-mode) .search-menu-container {\n max-width: 10rem;\n}\n\n:host(.mobile-mode) .search-bar-container {\n display: flex;\n justify-content: center;\n align-items: center;\n border-top: var(--ic-border-keyline-darken);\n height: 4rem;\n padding-left: var(--ic-space-md);\n padding-right: var(--ic-space-md);\n margin-left: calc(-1 var(--section-container-margin));\n margin-right: calc(-1 * var(--section-container-margin));\n}\n\n/* x small /\n@media screen and (max-width: 576px) {\n :host .title-link {\n margin-right: var(--ic-space-xxxs);\n word-break: break-word;\n hyphens: none;\n }\n\n .top-panel-container {\n min-height: 2.5rem;\n }\n\n .search-bar-container {\n margin-top: 0;\n height: 3.5rem;\n padding-left: var(--ic-space-xs);\n padding-right: var(--ic-space-xs);\n }\n\n .menu-button-container {\n margin-left: var(--ic-space-sm);\n }\n\n slot[name=\"app-icon\"]::slotted() {\n width: 1.5em;\n height: 1.5em;\n }\n\n slot[name=\"toggle-icon\"] svg {\n width: 1.5em;\n height: 1.5em;\n }\n}\n\n@media (forced-colors: active) {\n :host .top-navigation {\n border-bottom: var(--ic-border-hc);\n }\n\n .app-status,\n .app-version {\n border: var(--ic-border-hc);\n }\n\n slot[name=\"app-icon\"]::slotted() {\n fill: currentcolor;\n }\n\n slot[name=\"toggle-icon\"] svg {\n fill: currentcolor;\n }\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Listen,\n Event,\n EventEmitter,\n Watch,\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: boolean = false;\n private hasIconButtons: boolean = false;\n private hasNavigation: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n private resizeObserver: ResizeObserver = null;\n private searchBar: HTMLIcSearchBarElement = null;\n\n @Element() el: HTMLIcTopNavigationElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n @State() hasFullWidthSearchBar: boolean = false;\n @State() mobileSearchBarVisible: boolean = false;\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() searchValue: string = \"\";\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: string = \"/\";\n\n /\n If `true`, the flyout navigation menu on small devices will be contained by the parent element.\n /\n @Prop() inline: boolean = 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: string = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status: string = \"\";\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: string = \"\";\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\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 !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n componentWillRender(): void {\n this.checkSlots();\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n this.el.shadowRoot.querySelector<HTMLElement>(\"#menu-button\").focus();\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 as string;\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) {\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\n private toggleSearchBar(): void {\n this.mobileSearchBarVisible = !this.mobileSearchBarVisible;\n\n if (this.searchBar !== null) {\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\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\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) {\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\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 searchButtonSize = deviceSize <= DEVICE_SIZES.S ? \"medium\" : \"large\";\n const hasTitle = appTitle !== \"\" && isPropDefined(appTitle);\n const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;\n\n const appTitleVariant: IcTypographyVariants = overMobileBreakpoint\n ? deviceSize <= DEVICE_SIZES.S\n ? \"subtitle-small\"\n : \"h4\"\n : \"h3\";\n\n const mobileSearchButtonTitle = `${\n mobileSearchBarVisible ? \"Hide\" : \"Show\"\n } search`;\n const menuSize = deviceSize <= DEVICE_SIZES.S ? \"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 {deviceSize <= DEVICE_SIZES.S &&\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 && <slot name=\"search\"></slot>}\n\n {hasSearchSlotContent && overMobileBreakpoint && (\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={\n foregroundColor == IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light\n }\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\n {hasIconButtons && !overMobileBreakpoint && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && overMobileBreakpoint && (\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 theme={\n foregroundColor == IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light\n }\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 </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\"]: 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"],"version":3}

package/dist/cjs/ic-typography.cjs.entry.js CHANGED Viewed

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-6f6991cb.js');
-require('./types-dc22e301.js');
+const helpers = require('./helpers-eca4c27e.js');
-const icTypographyCss = "/*! 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;position:relative}:host(.ic-typography-vertical-margins-h1){margin:0 0 var(--ic-space-xl)}:host(.ic-typography-vertical-margins-h2){margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}:host(.ic-typography-vertical-margins-h3){margin:var(--ic-space-xl) 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-h4){margin:var(--ic-space-lg) 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-subtitle-large),:host(.ic-typography-vertical-margins-subtitle-small),:host(.ic-typography-vertical-margins-body),:host(.ic-typography-vertical-margins-code-large),:host(.ic-typography-vertical-margins-code-small),:host(.ic-typography-vertical-margins-code-extra-small){margin:0 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-caption),:host(.ic-typography-vertical-margins-caption-uppercase){margin:0 0 var(--ic-space-xs)}:host(.ic-typography-vertical-margins-h2:first-child),:host(.ic-typography-vertical-margins-h3:first-child),:host(.ic-typography-vertical-margins-h4:first-child){margin-top:0}:host(.ic-typography-h1){font:var(--ic-font-h1) !important}:host(.ic-typography-h2){font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-h3){font:var(--ic-font-h3)}:host(.ic-typography-h4){font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-large){font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-small){font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-body){font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}:host(.ic-typography-caption){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-caption-uppercase){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}:host(.ic-typography-label){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-label-uppercase){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}:host(.ic-typography-code-large){font:var(--ic-font-code-large);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-code-small){font:var(--ic-font-code-small);letter-spacing:var(--ic-font-letter-spacing-0pt005)}:host(.ic-typography-code-extra-small){font:var(--ic-font-code-extra-small);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-badge){font:var(--ic-font-badge);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-badge-small){font:var(--ic-font-badge-small);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-no-wrap){white-space:nowrap}:host ::slotted(h1),:host ::slotted(h2),:host ::slotted(h3),:host ::slotted(h4),:host ::slotted(h5),:host ::slotted(h6),:host ::slotted(p),:host ::slotted(label){font:inherit;letter-spacing:inherit}.trunc-wrapper{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--truncation-max-lines, initial);-webkit-line-clamp:var(--truncation-max-lines, initial);overflow:hidden;padding-right:var(--ellipsis-padding-right, 0)}.trunc-btn{border:none;background:none;padding:0;color:var(--ic-color-primary-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}.trunc-btn:hover,.trunc-btn.focus{outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none;cursor:pointer}:host(.strikethrough){text-decoration:line-through}:host(.underline){text-decoration:underline}:host(.underline.strikethrough){text-decoration:line-through underline}:host(.italic){font-style:italic !important}:host(.bold){font-weight:var(--ic-font-weight-bold)}:host(.in-ag-grid),:host(.in-ag-grid) ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@supports (text-underline-offset: 25%){.trunc-btn:hover,.trunc-btn.focus{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
+const icTypographyCss = "/*! 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;position:relative;color:var(--ic-typography-color, var(--ic-color-text-primary))}:host(.ic-typography-vertical-margins-h1){margin:0 0 var(--ic-space-xl)}:host(.ic-typography-vertical-margins-h2){margin:var(--ic-space-xxl) 0 var(--ic-space-lg)}:host(.ic-typography-vertical-margins-h3){margin:var(--ic-space-xl) 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-h4){margin:var(--ic-space-lg) 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-subtitle-large),:host(.ic-typography-vertical-margins-subtitle-small),:host(.ic-typography-vertical-margins-body),:host(.ic-typography-vertical-margins-code-large),:host(.ic-typography-vertical-margins-code-small),:host(.ic-typography-vertical-margins-code-extra-small){margin:0 0 var(--ic-space-md)}:host(.ic-typography-vertical-margins-caption),:host(.ic-typography-vertical-margins-caption-uppercase){margin:0 0 var(--ic-space-xs)}:host(.ic-typography-vertical-margins-h2:first-child),:host(.ic-typography-vertical-margins-h3:first-child),:host(.ic-typography-vertical-margins-h4:first-child){margin-top:0}:host(.ic-typography-h1){font:var(--ic-font-h1) !important}:host(.ic-typography-h2){font:var(--ic-font-h2);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-h3){font:var(--ic-font-h3)}:host(.ic-typography-h4){font:var(--ic-font-h4);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-large){font:var(--ic-font-subtitle-large);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-subtitle-small){font:var(--ic-font-subtitle-small);letter-spacing:var(--ic-font-letter-spacing-0pt0015)}:host(.ic-typography-body){font:var(--ic-font-body);letter-spacing:var(--ic-font-letter-spacing-0pt005)}:host(.ic-typography-caption){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-caption-uppercase){font:var(--ic-font-caption);letter-spacing:var(--ic-font-letter-spacing-0pt0025);text-transform:uppercase}:host(.ic-typography-label){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-label-uppercase){font:var(--ic-font-label);letter-spacing:var(--ic-font-letter-spacing-0pt025);text-transform:uppercase}:host(.ic-typography-code-large){font:var(--ic-font-code-large);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-code-small){font:var(--ic-font-code-small);letter-spacing:var(--ic-font-letter-spacing-0pt005)}:host(.ic-typography-code-extra-small){font:var(--ic-font-code-extra-small);letter-spacing:var(--ic-font-letter-spacing-0pt025)}:host(.ic-typography-badge){font:var(--ic-font-badge);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-badge-small){font:var(--ic-font-badge-small);letter-spacing:var(--ic-font-letter-spacing-0pt0025)}:host(.ic-typography-no-wrap){white-space:nowrap}:host ::slotted(h1),:host ::slotted(h2),:host ::slotted(h3),:host ::slotted(h4),:host ::slotted(h5),:host ::slotted(h6),:host ::slotted(p),:host ::slotted(label){font:inherit;letter-spacing:inherit}.trunc-wrapper{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--truncation-max-lines, initial);-webkit-line-clamp:var(--truncation-max-lines, initial);overflow:hidden;padding-right:var(--ellipsis-padding-right, 0)}.trunc-btn{border:none;background:none;padding:0;color:var(--ic-color-text-primary);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}.trunc-btn:hover,.trunc-btn.focus{outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none;cursor:pointer}:host(.ic-typography-strikethrough){text-decoration:line-through}:host(.ic-typography-underline){text-decoration:underline}:host(.ic-typography-underline.ic-typography-strikethrough){text-decoration:line-through underline}:host(.ic-typography-italic){font-style:italic !important}:host(.ic-typography-bold){font-weight:var(--ic-font-weight-bold)}:host(.ic-theme-dark),:host(.ic-theme-light){--ic-typography-color:var(--ic-color-text-primary)}:host(.in-ag-grid),:host(.in-ag-grid) ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@supports (text-underline-offset: 25%){.trunc-btn:hover,.trunc-btn.focus{text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}@media (prefers-color-scheme: dark) and (not (forced-colors: active)){:host,.trunc-btn::not(ic-tooltip){color:var(--ic-typography-color)}}";
 const Typography = class {
     constructor(hostRef) {
@@ -82,6 +81,7 @@ const Typography = class {
         this.italic = false;
         this.maxLines = undefined;
         this.strikethrough = false;
+        this.theme = "inherit";
         this.underline = false;
         this.variant = "body";
         this.expanded = false;
@@ -147,15 +147,16 @@ const Typography = class {
     }
     render() {
         var _a, _b;
-        const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, } = this;
+        const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, theme, } = this;
         return (index.h(index.Host, { class: {
                 [`ic-typography-${variant}`]: true,
                 [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,
-                ["bold"]: bold,
-                ["italic"]: italic,
-                ["strikethrough"]: strikethrough,
-                ["underline"]: underline,
+                ["ic-typography-bold"]: bold,
+                ["ic-typography-italic"]: italic,
+                ["ic-typography-strikethrough"]: strikethrough,
+                ["ic-typography-underline"]: underline,
                 ["in-ag-grid"]: this.inAGGrid,
+                [`ic-theme-${theme}`]: theme !== "inherit",
             } }, (variant === "body" ||
             ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
                 "IC-TOOLTIP") &&

package/dist/cjs/ic-typography.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-typography.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,+9MAA+9M;;MCqB1+M,UAAU;;;;QACb,yBAAoB,GAAY,IAAI,CAAC;QACrC,aAAQ,GAAY,KAAK,CAAC;QAC1B,kBAAa,GAAW,CAAC,CAAC;QAC1B,cAAS,GAAW,CAAC,CAAC;QAGtB,mBAAc,GAAmB,IAAI,CAAC;QACtC,oBAAe,GAAW,CAAC,CAAC;QAwG5B,mBAAc,GAAG,CAAC,EAAS;YACjC,EAAE,CAAC,eAAe,EAAE,CAAC;YAErB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;gBACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,YAAY,EAAE,IAAI,CAAC,EAAE;aACtB,CAAC,CAAC;SACJ,CAAC;QA0BM,wBAAmB,GAAG,CAAC,KAAa,EAAE,SAAiB;YAC7D,IAAI,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE;gBAC5C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB;iBAAM;gBACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;aACvB;SACF,CAAC;QAEM,kBAAa,GAAG,CAAC,EAAe;YACtC,OAAO,EAAE,CAAC,cAAc,IAAI,EAAE,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;kBAC9C,EAAE,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG;kBAC1B,CAAC,CAAC;SACP,CAAC;QAEM,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;gBACvC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBAClC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC;aAC1E,CAAC,CAAC;YACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAClD,CAAC;QAEM,2BAAsB,GAAG;YAC/B,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE;gBAC1C,OAAO;aACR;YAED,IAAI,IAAI,CAAC,eAAe,KAAK,CAAC,EAAE;gBAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;gBACzC,OAAO;aACR;YAED,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAClD,IAAI,SAAS,KAAK,IAAI,CAAC,aAAa,EAAE;gBACpC,OAAO;aACR;YAED,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;YACjE,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;YAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;SACtC,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,oBAAoB,EAAE;gBAC7B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;aACjC;SACF,CAAC;QAEM,oBAAe,GAAG;YACxB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;SAClC,CAAC;QAEM,8BAAyB,GAAG;YAClC,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;SACnC,CAAC;yBA7L4B,KAAK;mCACK,KAAK;oCAKJ,KAAK;oBAMrB,KAAK;sBAKH,KAAK;;6BAUE,KAAK;yBAKT,KAAK;uBAKM,MAAM;wBAUlB,KAAK;;IAGlC,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,OAAO,EACP,2BAA2B,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,CACvE,CAAC;KACH;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;SAClC;KACF;;;;IAKD,MAAM,eAAe;QACnB,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAClB,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YACrC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAClC;KACF;IAED,gBAAgB;;QACd,IACE,CAAC,IAAI,CAAC,OAAO,KAAK,MAAM;YACtB,CAAA,MAAA,MAAC,IAAI,CAAC,EAAE,CAAC,WAAW,EAAiB,0CAAE,IAAI,0CAAE,OAAO;gBAClD,YAAY;YAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,EACjB;YACA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC9C,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;YACnC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;YAC5B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;YACzCA,2BAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC7C;KACF;IAED,mBAAmB;QACjB,IAAIC,oBAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;;;;;IAkBD,MAAM,aAAa,CAAC,MAAc;;QAEhC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;QACzC,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;YAC5B,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,2BAA2B,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1E,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;YAC5C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;KACF;;;;IAMD,MAAM,mBAAmB,CAAC,QAAiB;QACzC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC1B;IA4DD,MAAM;;QACJ,MAAM,EACJ,OAAO,EACP,oBAAoB,EACpB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,EACT,MAAM,EACN,IAAI,GACL,GAAG,IAAI,CAAC;QAET,QACEC,QAACC,UAAI,IACH,KAAK,EAAE;gBACL,CAAC,iBAAiB,OAAO,EAAE,GAAG,IAAI;gBAClC,CAAC,kCAAkC,OAAO,EAAE,GAAG,oBAAoB;gBACnE,CAAC,MAAM,GAAG,IAAI;gBACd,CAAC,QAAQ,GAAG,MAAM;gBAClB,CAAC,eAAe,GAAG,aAAa;gBAChC,CAAC,WAAW,GAAG,SAAS;gBACxB,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ;aAC9B,IAEA,CAAC,OAAO,KAAK,MAAM;YAClB,CAAA,MAAA,MAAC,IAAI,CAAC,EAAE,CAAC,WAAW,EAAiB,0CAAE,IAAI,0CAAE,OAAO;gBAClD,YAAY;YAChB,QAAQ,GAAG,CAAC,IACVD,iBAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,IAChEA,qBAAQ,CACJ,KAENA,qBAAQ,CACT,EACA,OAAO,KAAK,MAAM,IAAI,QAAQ,GAAG,CAAC,IAAI,SAAS,KAC9CA,oBACE,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,EAC7D,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,WAAW,EAAE,IAAI,CAAC,yBAAyB,EAC3C,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,QAAQ,GAAG,UAAU,GAAG,UAAU,CAC5B,CACV,CACI,EACP;KACH;;;;;;;;;;","names":["checkResizeObserver","isElInAGGrid","h","Host"],"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n position: relative;\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small) {\n margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n font: var(--ic-font-h1) !important;\n}\n\n:host(.ic-typography-h2) {\n font: var(--ic-font-h2);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n font: var(--ic-font-h4);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n font: var(--ic-font-subtitle-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n font: var(--ic-font-subtitle-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n font: var(--ic-font-body);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-code-large) {\n font: var(--ic-font-code-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-code-small) {\n font: var(--ic-font-code-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-code-extra-small) {\n font: var(--ic-font-code-extra-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-badge) {\n font: var(--ic-font-badge);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-badge-small) {\n font: var(--ic-font-badge-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-no-wrap) {\n white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n font: inherit;\n letter-spacing: inherit;\n}\n\n.trunc-wrapper {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n line-clamp: var(--truncation-max-lines, initial);\n -webkit-line-clamp: var(--truncation-max-lines, initial);\n overflow: hidden;\n padding-right: var(--ellipsis-padding-right, 0);\n}\n\n.trunc-btn {\n border: none;\n background: none;\n padding: 0;\n color: var(--ic-color-primary-text);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n.trunc-btn:hover,\n.trunc-btn.focus {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n cursor: pointer;\n}\n\n:host(.strikethrough) {\n text-decoration: line-through;\n}\n\n:host(.underline) {\n text-decoration: underline;\n}\n\n:host(.underline.strikethrough) {\n text-decoration: line-through underline;\n}\n\n:host(.italic) {\n font-style: italic !important;\n}\n\n:host(.bold) {\n font-weight: var(--ic-font-weight-bold);\n}\n\n:host(.in-ag-grid),\n:host(.in-ag-grid) ::slotted() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@supports (text-underline-offset: 25%) {\n .trunc-btn:hover,\n .trunc-btn.focus {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n/ Add back in after storybook has the `color-scheme: light dark` code /\n\n/ @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host,\n .trunc-btn {\n color: var(--ic-architectural-white);\n }\n} /\n","import {\n Component,\n Prop,\n h,\n Element,\n Host,\n State,\n Watch,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\nimport { checkResizeObserver, isElInAGGrid } from \"../../utils/helpers\";\n\n@Component({\n styleUrl: \"ic-typography.css\",\n tag: \"ic-typography\",\n shadow: true,\n})\nexport class Typography {\n private focusBtnFromKeyboard: boolean = true;\n private inAGGrid: boolean = false;\n private lastMarkerTop: number = 0;\n private lastWidth: number = 0;\n private marker: HTMLElement;\n private resizeInterval: number;\n private resizeObserver: ResizeObserver = null;\n private truncatedHeight: number = 0;\n private truncWrapperEl: Element;\n\n @Element() el: HTMLIcTypographyElement;\n\n @State() truncated: boolean = false;\n @State() truncButtonFocussed: boolean = false;\n\n /\n If `true`, appropriate top and bottom margins will be applied to the typography.\n /\n @Prop() applyVerticalMargins?: boolean = false;\n\n /\n If `true`, the typography will have a bold font weight.\n * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n /\n @Prop() bold?: boolean = false;\n\n /\n If `true`, the typography will have an italic font style.\n /\n @Prop() italic?: boolean = false;\n\n /\n The number of lines to display before truncating the text, only used for the 'body' variant.\n /\n @Prop({ mutable: true }) maxLines?: number;\n\n /\n If `true`, the typography will have a line through it.\n /\n @Prop() strikethrough?: boolean = false;\n\n /\n If `true`, the typography will have a line under it.\n /\n @Prop() underline?: boolean = false;\n\n /\n The ICDS typography style to use.\n /\n @Prop() variant?: IcTypographyVariants = \"body\";\n\n /\n @internal Emits and event when the typography truncation button has been clicked.\n /\n @Event() typographyTruncationExpandToggle: EventEmitter<{\n expanded: boolean;\n typographyEl: HTMLIcTypographyElement;\n }>;\n\n @State() expanded: boolean = false;\n\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.el.setAttribute(\n \"style\",\n `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n /\n @internal This is used by data table to remove all truncation in certain events\n /\n @Method()\n async resetTruncation() {\n if (this.truncated) {\n this.truncated = false;\n this.maxLines = 0;\n this.el.removeAttribute(\"max-lines\");\n this.expanded = false;\n this.el.removeAttribute(\"style\");\n }\n }\n\n componentDidLoad(): void {\n if (\n (this.variant === \"body\" \|\|\n (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n \"IC-TOOLTIP\") &&\n this.maxLines > 0\n ) {\n const marker = document.createElement(\"span\");\n marker.style.visibility = \"hidden\";\n this.el.appendChild(marker);\n this.marker = marker;\n this.lastWidth = this.el.clientWidth;\n this.checkMaxLines(this.el.clientHeight);\n checkResizeObserver(this.runResizeObserver);\n }\n }\n\n componentWillRender(): void {\n if (isElInAGGrid(this.el)) {\n this.inAGGrid = true;\n }\n }\n\n private toggleExpanded = (ev: Event) => {\n ev.stopPropagation();\n\n this.expanded = !this.expanded;\n this.typographyTruncationExpandToggle.emit({\n expanded: this.expanded,\n typographyEl: this.el,\n });\n };\n\n /\n @internal This checks if the number of lines of text exceeds the maxLines prop. If so, set the line clamp CSS to the max lines\n * @param height - text container height\n /\n\n @Method()\n async checkMaxLines(height: number) {\n //24 is the height of a single line\n const numLines = Math.floor(height / 24);\n if (numLines > this.maxLines) {\n this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n this.truncatedHeight = this.el.clientHeight;\n this.truncated = true;\n }\n }\n\n /\n @internal This method makes it possible to set the expanded status of truncated text outside of ic-typography component\n */\n @Method()\n async setShowHideExpanded(expanded: boolean) {\n this.expanded = expanded;\n }\n\n private checkMarkerPosition = (elTop: number, markerTop: number) => {\n if (markerTop - elTop < this.truncatedHeight) {\n this.truncated = false;\n this.expanded = false;\n } else {\n this.truncated = true;\n }\n };\n\n private getElementTop = (el: HTMLElement) => {\n return el.getClientRects && el.getClientRects()[0]\n ? el.getClientRects()[0].top\n : 0;\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n clearTimeout(this.resizeInterval);\n this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n });\n this.resizeObserver.observe(this.truncWrapperEl);\n };\n\n private resizeObserverCallback = () => {\n if (this.lastWidth === this.el.clientWidth) {\n return;\n }\n\n if (this.truncatedHeight === 0) {\n this.checkMaxLines(this.el.clientHeight);\n return;\n }\n\n const markerTop = this.getElementTop(this.marker);\n if (markerTop === this.lastMarkerTop) {\n return;\n }\n\n this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n this.lastMarkerTop = markerTop;\n this.lastWidth = this.el.clientWidth;\n };\n\n private truncButtonFocus = (): void => {\n if (this.focusBtnFromKeyboard) {\n this.truncButtonFocussed = true;\n }\n };\n\n private truncButtonBlur = (): void => {\n this.focusBtnFromKeyboard = true;\n this.truncButtonFocussed = false;\n };\n\n private truncButtonFocusFromMouse = (): void => {\n this.focusBtnFromKeyboard = false;\n };\n\n render() {\n const {\n variant,\n applyVerticalMargins,\n maxLines,\n truncated,\n expanded,\n strikethrough,\n underline,\n italic,\n bold,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n [\"bold\"]: bold,\n [\"italic\"]: italic,\n [\"strikethrough\"]: strikethrough,\n [\"underline\"]: underline,\n [\"in-ag-grid\"]: this.inAGGrid,\n }}\n >\n {(variant === \"body\" \|\|\n (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n \"IC-TOOLTIP\") &&\n maxLines > 0 ? (\n <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n <slot />\n </div>\n ) : (\n <slot />\n )}\n {variant === \"body\" && maxLines > 0 && truncated && (\n <button\n class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n onFocus={this.truncButtonFocus}\n onBlur={this.truncButtonBlur}\n onMouseDown={this.truncButtonFocusFromMouse}\n onClick={this.toggleExpanded}\n >\n {expanded ? \"See less\" : \"See more\"}\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-typography.entry.cjs.js","mappings":"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","names":["checkResizeObserver","isElInAGGrid","h","Host"],"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n position: relative;\n color: var(--ic-typography-color, var(--ic-color-text-primary));\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small) {\n margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n font: var(--ic-font-h1) !important;\n}\n\n:host(.ic-typography-h2) {\n font: var(--ic-font-h2);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n font: var(--ic-font-h4);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n font: var(--ic-font-subtitle-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n font: var(--ic-font-subtitle-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n font: var(--ic-font-body);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n font: var(--ic-font-caption);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n font: var(--ic-font-label);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n text-transform: uppercase;\n}\n\n:host(.ic-typography-code-large) {\n font: var(--ic-font-code-large);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-code-small) {\n font: var(--ic-font-code-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-code-extra-small) {\n font: var(--ic-font-code-extra-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-badge) {\n font: var(--ic-font-badge);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-badge-small) {\n font: var(--ic-font-badge-small);\n letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-no-wrap) {\n white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n font: inherit;\n letter-spacing: inherit;\n}\n\n.trunc-wrapper {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n line-clamp: var(--truncation-max-lines, initial);\n -webkit-line-clamp: var(--truncation-max-lines, initial);\n overflow: hidden;\n padding-right: var(--ellipsis-padding-right, 0);\n}\n\n.trunc-btn {\n border: none;\n background: none;\n padding: 0;\n color: var(--ic-color-text-primary);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n.trunc-btn:hover,\n.trunc-btn.focus {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n cursor: pointer;\n}\n\n:host(.ic-typography-strikethrough) {\n text-decoration: line-through;\n}\n\n:host(.ic-typography-underline) {\n text-decoration: underline;\n}\n\n:host(.ic-typography-underline.ic-typography-strikethrough) {\n text-decoration: line-through underline;\n}\n\n:host(.ic-typography-italic) {\n font-style: italic !important;\n}\n\n:host(.ic-typography-bold) {\n font-weight: var(--ic-font-weight-bold);\n}\n\n:host(.ic-theme-dark),\n:host(.ic-theme-light) {\n --ic-typography-color: var(--ic-color-text-primary);\n}\n\n:host(.in-ag-grid),\n:host(.in-ag-grid) ::slotted() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@supports (text-underline-offset: 25%) {\n .trunc-btn:hover,\n .trunc-btn.focus {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n@media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host,\n .trunc-btn::not(ic-tooltip) {\n color: var(--ic-typography-color);\n }\n}\n","import {\n Component,\n Prop,\n h,\n Element,\n Host,\n State,\n Watch,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport { IcTypographyVariants, IcThemeMode } from \"../../utils/types\";\nimport { checkResizeObserver, isElInAGGrid } from \"../../utils/helpers\";\n\n@Component({\n styleUrl: \"ic-typography.css\",\n tag: \"ic-typography\",\n shadow: true,\n})\nexport class Typography {\n private focusBtnFromKeyboard: boolean = true;\n private inAGGrid: boolean = false;\n private lastMarkerTop: number = 0;\n private lastWidth: number = 0;\n private marker: HTMLElement;\n private resizeInterval: number;\n private resizeObserver: ResizeObserver = null;\n private truncatedHeight: number = 0;\n private truncWrapperEl: Element;\n\n @Element() el: HTMLIcTypographyElement;\n\n @State() truncated: boolean = false;\n @State() truncButtonFocussed: boolean = false;\n\n /\n If `true`, appropriate top and bottom margins will be applied to the typography.\n /\n @Prop() applyVerticalMargins?: boolean = false;\n\n /\n If `true`, the typography will have a bold font weight.\n * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n /\n @Prop() bold?: boolean = false;\n\n /\n If `true`, the typography will have an italic font style.\n /\n @Prop() italic?: boolean = false;\n\n /\n The number of lines to display before truncating the text, only used for the 'body' variant.\n /\n @Prop({ mutable: true }) maxLines?: number;\n\n /\n If `true`, the typography will have a line through it.\n /\n @Prop() strikethrough?: boolean = false;\n\n /\n Sets the text 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 If `true`, the typography will have a line under it.\n /\n @Prop() underline?: boolean = false;\n\n /\n The ICDS typography style to use.\n /\n @Prop() variant?: IcTypographyVariants = \"body\";\n\n /\n @internal Emits and event when the typography truncation button has been clicked.\n /\n @Event() typographyTruncationExpandToggle: EventEmitter<{\n expanded: boolean;\n typographyEl: HTMLIcTypographyElement;\n }>;\n\n @State() expanded: boolean = false;\n\n @Watch(\"expanded\")\n watchExpandedHandler(): void {\n this.el.setAttribute(\n \"style\",\n `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n /\n @internal This is used by data table to remove all truncation in certain events\n /\n @Method()\n async resetTruncation() {\n if (this.truncated) {\n this.truncated = false;\n this.maxLines = 0;\n this.el.removeAttribute(\"max-lines\");\n this.expanded = false;\n this.el.removeAttribute(\"style\");\n }\n }\n\n componentDidLoad(): void {\n if (\n (this.variant === \"body\" \|\|\n (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n \"IC-TOOLTIP\") &&\n this.maxLines > 0\n ) {\n const marker = document.createElement(\"span\");\n marker.style.visibility = \"hidden\";\n this.el.appendChild(marker);\n this.marker = marker;\n this.lastWidth = this.el.clientWidth;\n this.checkMaxLines(this.el.clientHeight);\n checkResizeObserver(this.runResizeObserver);\n }\n }\n\n componentWillRender(): void {\n if (isElInAGGrid(this.el)) {\n this.inAGGrid = true;\n }\n }\n\n private toggleExpanded = (ev: Event) => {\n ev.stopPropagation();\n\n this.expanded = !this.expanded;\n this.typographyTruncationExpandToggle.emit({\n expanded: this.expanded,\n typographyEl: this.el,\n });\n };\n\n /\n @internal This checks if the number of lines of text exceeds the maxLines prop. If so, set the line clamp CSS to the max lines\n * @param height - text container height\n /\n\n @Method()\n async checkMaxLines(height: number) {\n //24 is the height of a single line\n const numLines = Math.floor(height / 24);\n if (numLines > this.maxLines) {\n this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n this.truncatedHeight = this.el.clientHeight;\n this.truncated = true;\n }\n }\n\n /\n @internal This method makes it possible to set the expanded status of truncated text outside of ic-typography component\n */\n @Method()\n async setShowHideExpanded(expanded: boolean) {\n this.expanded = expanded;\n }\n\n private checkMarkerPosition = (elTop: number, markerTop: number) => {\n if (markerTop - elTop < this.truncatedHeight) {\n this.truncated = false;\n this.expanded = false;\n } else {\n this.truncated = true;\n }\n };\n\n private getElementTop = (el: HTMLElement) => {\n return el.getClientRects && el.getClientRects()[0]\n ? el.getClientRects()[0].top\n : 0;\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n clearTimeout(this.resizeInterval);\n this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n });\n this.resizeObserver.observe(this.truncWrapperEl);\n };\n\n private resizeObserverCallback = () => {\n if (this.lastWidth === this.el.clientWidth) {\n return;\n }\n\n if (this.truncatedHeight === 0) {\n this.checkMaxLines(this.el.clientHeight);\n return;\n }\n\n const markerTop = this.getElementTop(this.marker);\n if (markerTop === this.lastMarkerTop) {\n return;\n }\n\n this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n this.lastMarkerTop = markerTop;\n this.lastWidth = this.el.clientWidth;\n };\n\n private truncButtonFocus = (): void => {\n if (this.focusBtnFromKeyboard) {\n this.truncButtonFocussed = true;\n }\n };\n\n private truncButtonBlur = (): void => {\n this.focusBtnFromKeyboard = true;\n this.truncButtonFocussed = false;\n };\n\n private truncButtonFocusFromMouse = (): void => {\n this.focusBtnFromKeyboard = false;\n };\n\n render() {\n const {\n variant,\n applyVerticalMargins,\n maxLines,\n truncated,\n expanded,\n strikethrough,\n underline,\n italic,\n bold,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n [\"ic-typography-bold\"]: bold,\n [\"ic-typography-italic\"]: italic,\n [\"ic-typography-strikethrough\"]: strikethrough,\n [\"ic-typography-underline\"]: underline,\n [\"in-ag-grid\"]: this.inAGGrid,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n {(variant === \"body\" \|\|\n (this.el.getRootNode() as ShadowRoot)?.host?.tagName ===\n \"IC-TOOLTIP\") &&\n maxLines > 0 ? (\n <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n <slot />\n </div>\n ) : (\n <slot />\n )}\n {variant === \"body\" && maxLines > 0 && truncated && (\n <button\n class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n onFocus={this.truncButtonFocus}\n onBlur={this.truncButtonBlur}\n onMouseDown={this.truncButtonFocusFromMouse}\n onClick={this.toggleExpanded}\n >\n {expanded ? \"See less\" : \"See more\"}\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/index-f982899d.js CHANGED Viewed

@@ -2723,6 +2723,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './ic-accordion-group.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'ic-alert.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './ic-alert.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'ic-back-to-top.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -2735,10 +2739,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './ic-breadcrumb-group.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'ic-card.cjs':
+                case 'ic-card-vertical.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './ic-card.cjs.entry.js')); }).then(processMod, consoleError);
+                        './ic-card-vertical.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'ic-checkbox.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -2755,10 +2759,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './ic-classification-banner.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'ic-data-entity.cjs':
+                case 'ic-data-list.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './ic-data-entity.cjs.entry.js')); }).then(processMod, consoleError);
+                        './ic-data-list.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'ic-data-row.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -2871,6 +2875,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './ic-tab-panel.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'ic-text-field.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './ic-text-field.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'ic-theme.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -2895,10 +2903,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './ic-top-navigation.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'ic-alert.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './ic-alert.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'ic-breadcrumb.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -2919,14 +2923,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './ic-pagination-item.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'ic-text-field.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './ic-text-field.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'ic-link.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './ic-link.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'ic-input-component-container_3.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -2935,6 +2931,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './ic-horizontal-scroll.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'ic-link.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './ic-link.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'ic-input-label_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */