npm - @ukic/web-components - Versions diffs - 2.1.0-beta.15 → 2.1.0-beta.17 - Mend

@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

Files changed (1078) hide show

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IcThemeForegroundEnum } from './types.js';
-import { G as getSlot, D as DEVICE_SIZES, g as getCurrentDeviceSize, k as getThemeForegroundColor, o as onComponentPropUndefinedChange, i as isSlotUsed, c as checkResizeObserver, a as onComponentRequiredPropUndefined } from './helpers.js';
+import { E as getSlot, D as DEVICE_SIZES, d as getCurrentDeviceSize, t as getThemeForegroundColor, b as onComponentPropUndefinedChange, i as isSlotUsed, c as checkResizeObserver, o as onComponentRequiredPropUndefined } from './helpers.js';
 import { d as defineCustomElement$8 } from './ic-button2.js';
 import { d as defineCustomElement$7 } from './ic-horizontal-scroll2.js';
 import { d as defineCustomElement$6 } from './ic-loading-indicator2.js';
@@ -11,17 +11,18 @@ import { d as defineCustomElement$2 } from './ic-typography2.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(svg){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)}}@media screen and (max-width: 992px){:host .nav-panel-container,:host .app-status,:host .app-version{display:none}:host .title-link{margin-right:var(--ic-space-xs)}.search-menu-container{max-width:10rem}.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}.searchbox-inline{display:none}.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(svg){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(svg){fill:currentcolor}}";
-const TopNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.icNavigationMenuOpened = createEvent(this, "icNavigationMenuOpened", 7);
     this.icNavigationMenuClosed = createEvent(this, "icNavigationMenuClosed", 7);
+    this.icNavigationMenuOpened = createEvent(this, "icNavigationMenuOpened", 7);
     this.hasAppIcon = false;
-    this.hasNavigation = false;
     this.hasIconButtons = false;
+    this.hasNavigation = false;
     this.hasSearchSlotContent = false;
+    this.resizeObserver = null;
     this.searchBar = null;
     this.initialiseSearchBar = () => {
       if (this.hasSearchSlotContent) {
@@ -51,7 +52,6 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.toggleSearchBar();
       this.searchButtonClick = false;
     };
-    this.resizeObserver = null;
     this.resizeObserverCallback = (currSize) => {
       if (currSize !== this.deviceSize) {
         this.deviceSize = currSize;
@@ -81,27 +81,51 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       });
       this.resizeObserver.observe(this.el);
     };
-    this.appTitle = undefined;
-    this.href = "/";
-    this.version = "";
-    this.status = "";
-    this.contentAligned = "full-width";
-    this.inline = false;
-    this.menuOpen = false;
     this.deviceSize = DEVICE_SIZES.XL;
+    this.foregroundColor = getThemeForegroundColor();
+    this.hasFullWidthSearchBar = false;
+    this.menuOpen = false;
     this.mobileSearchBarVisible = false;
-    this.navMenuVisible = false;
-    this.searchValue = "";
     this.mobileSearchHiddenOnBlur = false;
+    this.navMenuVisible = false;
     this.searchButtonClick = false;
-    this.foregroundColor = getThemeForegroundColor();
-    this.hasFullWidthSearchBar = false;
+    this.searchValue = "";
+    this.contentAligned = "full-width";
+    this.href = "/";
+    this.inline = false;
+    this.status = "";
+    this.version = "";
+    this.appTitle = undefined;
   }
   watchPropHandler(newValue, oldValue) {
     //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
     //this watch can be removed once gatbsy hydration issue is resolved
     onComponentPropUndefinedChange(oldValue, newValue, this.initialiseSearchBar);
   }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+    this.hasNavigation = isSlotUsed(this.el, "navigation");
+    this.hasIconButtons = isSlotUsed(this.el, "buttons");
+    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+    this.deviceSize = getCurrentDeviceSize();
+    this.initialiseSearchBar();
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+    !isSlotUsed(this.el, "app-title") &&
+      onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
+  }
+  componentWillRender() {
+    this.hasNavigation = isSlotUsed(this.el, "navigation");
+    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
+    this.hasIconButtons = isSlotUsed(this.el, "buttons");
+    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
+  }
   navBarMenuCloseHandler() {
     this.showNavMenu(false);
     const menuBtn = this.el.shadowRoot.querySelector("#menu-button");
@@ -154,30 +178,6 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       document.body.style.overflow = "auto";
     }
   }
-  componentWillLoad() {
-    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
-    this.hasNavigation = isSlotUsed(this.el, "navigation");
-    this.hasIconButtons = isSlotUsed(this.el, "buttons");
-    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
-    this.deviceSize = getCurrentDeviceSize();
-    this.initialiseSearchBar();
-  }
-  componentWillRender() {
-    this.hasNavigation = isSlotUsed(this.el, "navigation");
-    this.hasSearchSlotContent = isSlotUsed(this.el, "search");
-    this.hasIconButtons = isSlotUsed(this.el, "buttons");
-    this.hasAppIcon = isSlotUsed(this.el, "app-icon");
-  }
-  componentDidLoad() {
-    checkResizeObserver(this.runResizeObserver);
-    !isSlotUsed(this.el, "app-title") &&
-      onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
-    }
-  }
   render() {
     const hasMenuContent = this.hasNavigation ||
       this.hasIconButtons ||
@@ -214,21 +214,21 @@ const TopNavigation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }; }
   static get style() { return icTopNavigationCss; }
 }, [1, "ic-top-navigation", {
-    "appTitle": [1, "app-title"],
-    "href": [1],
-    "version": [1],
-    "status": [1],
     "contentAligned": [1, "content-aligned"],
+    "href": [1],
     "inline": [4],
-    "menuOpen": [32],
+    "status": [1],
+    "version": [1],
+    "appTitle": [1, "app-title"],
     "deviceSize": [32],
+    "foregroundColor": [32],
+    "hasFullWidthSearchBar": [32],
+    "menuOpen": [32],
     "mobileSearchBarVisible": [32],
-    "navMenuVisible": [32],
-    "searchValue": [32],
     "mobileSearchHiddenOnBlur": [32],
+    "navMenuVisible": [32],
     "searchButtonClick": [32],
-    "foregroundColor": [32],
-    "hasFullWidthSearchBar": [32]
+    "searchValue": [32]
   }, [[0, "icNavigationMenuClose", "navBarMenuCloseHandler"], [0, "icSearchBarBlur", "searchInputBlurHandler"], [0, "icChange", "searchValueChangeHandler"], [4, "themeChange", "themeChangeHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"ic-top-navigation.js","mappings":"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","names":[],"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(svg) {\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/ medium /\n@media screen and (max-width: 992px) {\n :host .nav-panel-container,\n :host .app-status,\n :host .app-version {\n display: none;\n }\n\n :host .title-link {\n margin-right: var(--ic-space-xs);\n }\n\n .search-menu-container {\n max-width: 10rem;\n }\n\n .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\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 .searchbox-inline {\n display: none;\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(svg) {\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(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} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\n\n/\n @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\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 @Element() el: HTMLIcTopNavigationElement;\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 /\n The URL to navigate to when the app title is clicked.\n /\n @Prop() href: string = \"/\";\n\n /\n The version info to be displayed.\n /\n @Prop() version: string = \"\";\n\n /\n The status info to be displayed.\n /\n @Prop() status: string = \"\";\n\n /\n The alignment of the top navigation content.\n /\n @Prop() contentAligned: IcAlignment = \"full-width\";\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 @State() menuOpen: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() mobileSearchBarVisible: boolean = false;\n @State() navMenuVisible: boolean = false;\n @State() searchValue: string = \"\";\n @State() mobileSearchHiddenOnBlur: boolean = false;\n @State() searchButtonClick: boolean = false;\n @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n @State() hasFullWidthSearchBar: boolean = false;\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 gatbsy hydration issue is resolved\n onComponentPropUndefinedChange(\n oldValue,\n newValue,\n this.initialiseSearchBar\n );\n }\n\n /\n @internal - Emitted when the menu is opened.\n /\n @Event() icNavigationMenuOpened: EventEmitter<void>;\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClosed: EventEmitter<void>;\n\n private hasAppIcon: boolean = false;\n private hasNavigation: boolean = false;\n private hasIconButtons: boolean = false;\n private hasSearchSlotContent: boolean = false;\n private searchBar: HTMLIcSearchBarElement = null;\n private mobileSearchButtonEl: HTMLIcButtonElement;\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n const menuBtn = this.el.shadowRoot.querySelector(\n \"#menu-button\"\n ) as HTMLElement;\n menuBtn.focus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler(ev: CustomEvent): void {\n if (ev.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 = ev.detail.value;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler(ev: CustomEvent): void {\n this.searchValue = ev.detail.value;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n private initialiseSearchBar = () => {\n if (this.hasSearchSlotContent) {\n const slot = getSlot(this.el, \"search\");\n if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot && slot.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\n \"ic-search-bar\"\n ) as HTMLIcSearchBarElement;\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 if (this.mobileSearchBarVisible) {\n this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n this.hasFullWidthSearchBar = true;\n this.searchBar.fullWidth = true;\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n } else {\n this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n this.hasFullWidthSearchBar = false;\n this.searchBar.fullWidth = false;\n }\n }\n }\n\n private emitTopNavResized = (size: number): void => {\n const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n this.el.dispatchEvent(event);\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\n this.navMenuVisible = show;\n if (show) {\n this.icNavigationMenuOpened.emit();\n document.body.style.height = \"100%\";\n document.body.style.overflow = \"hidden\";\n } else {\n this.icNavigationMenuClosed.emit();\n document.body.style.height = \"auto\";\n document.body.style.overflow = \"auto\";\n }\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 resizeObserver: ResizeObserver = null;\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n if (currSize > DEVICE_SIZES.L) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.emitTopNavResized(currSize);\n if (\n document.activeElement !== null &&\n document.activeElement !== undefined &&\n document.activeElement.tagName === \"IC-SEARCH-BAR\"\n ) {\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 const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n componentWillLoad(): void {\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 this.deviceSize = getCurrentDeviceSize();\n this.initialiseSearchBar();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n\n !isSlotUsed(this.el, \"app-title\") &&\n onComponentRequiredPropUndefined(\n [{ prop: this.appTitle, propName: \"app-title\" }],\n \"Top Navigation\"\n );\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const hasMenuContent =\n this.hasNavigation \|\|\n this.hasIconButtons \|\|\n this.status !== \"\" \|\|\n this.version !== \"\";\n\n const searchButtonSize =\n this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n let appTitleVariant: IcTypographyVariants = \"h3\";\n\n const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n if (this.deviceSize <= DEVICE_SIZES.L) {\n appTitleVariant = \"h4\";\n if (this.deviceSize <= DEVICE_SIZES.S) {\n appTitleVariant = \"subtitle-small\";\n }\n }\n\n const mobileSearchButtonTitle = this.mobileSearchBarVisible\n ? \"Hide search\"\n : \"Show search\";\n const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: this.href,\n };\n\n return (\n <Host\n class={{\n [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n [IcThemeForegroundEnum.Dark]:\n this.foregroundColor === IcThemeForegroundEnum.Dark,\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={this.contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle \|\| isSlotUsed(this.el, \"app-title\")) && (\n <Component class=\"title-link\" {...attrs}>\n {this.hasAppIcon && (\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\" />\n </div>\n )}\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n this.appTitle\n )}\n </h1>\n </ic-typography>\n </Component>\n )}\n {this.status !== \"\" && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(this.hasSearchSlotContent \|\| hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {this.deviceSize > DEVICE_SIZES.L && (\n <slot name=\"search\"></slot>\n )}\n\n {this.hasSearchSlotContent &&\n this.deviceSize <= DEVICE_SIZES.L && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={this.searchButtonMouseDownHandler}\n variant=\"icon\"\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n appearance={this.foregroundColor}\n onClick={this.searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\" slot=\"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 {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\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={this.navMenuVisible ? \"true\" : \"false\"}\n >\n <ic-button\n id=\"menu-button\"\n appearance={this.foregroundColor}\n variant=\"secondary\"\n aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"true\"\n aria-label={`Open ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={this.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 {this.mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll appearance={this.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 {this.navMenuVisible && (\n <ic-navigation-menu\n version={this.version}\n status={this.status}\n class={{\n [\"inline\"]: this.inline,\n }}\n >\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\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.js","mappings":"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","names":[],"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(svg) {\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/ medium /\n@media screen and (max-width: 992px) {\n :host .nav-panel-container,\n :host .app-status,\n :host .app-version {\n display: none;\n }\n\n :host .title-link {\n margin-right: var(--ic-space-xs);\n }\n\n .search-menu-container {\n max-width: 10rem;\n }\n\n .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\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 .searchbox-inline {\n display: none;\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(svg) {\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(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} from \"../../utils/types\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n getThemeForegroundColor,\n getSlot,\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n isSlotUsed,\n} from \"../../utils/helpers\";\n\n/\n @slot app-icon - Content will be rendered to left of app title.\n * @slot app-title - Handle routing by nesting a route in the app title.\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() menuOpen: 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 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 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 @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 gatbsy 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 disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\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 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.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasSearchSlotContent = isSlotUsed(this.el, \"search\");\n this.hasIconButtons = isSlotUsed(this.el, \"buttons\");\n this.hasAppIcon = isSlotUsed(this.el, \"app-icon\");\n }\n\n @Listen(\"icNavigationMenuClose\", {})\n navBarMenuCloseHandler(): void {\n this.showNavMenu(false);\n const menuBtn = this.el.shadowRoot.querySelector(\n \"#menu-button\"\n ) as HTMLElement;\n menuBtn.focus();\n }\n\n @Listen(\"icSearchBarBlur\", {})\n searchInputBlurHandler(ev: CustomEvent): void {\n if (ev.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 = ev.detail.value;\n }\n }\n\n @Listen(\"icChange\", {})\n searchValueChangeHandler(ev: CustomEvent): void {\n this.searchValue = ev.detail.value;\n }\n\n @Listen(\"themeChange\", { target: \"document\" })\n themeChangeHandler(ev: CustomEvent): void {\n const theme: IcTheme = ev.detail;\n this.foregroundColor = theme.mode;\n }\n\n private initialiseSearchBar = () => {\n if (this.hasSearchSlotContent) {\n const slot = getSlot(this.el, \"search\");\n if (slot && slot.tagName === \"IC-SEARCH-BAR\") {\n this.searchBar = slot as HTMLIcSearchBarElement;\n } else if (slot && slot.tagName === \"FORM\") {\n this.searchBar = slot.querySelector(\n \"ic-search-bar\"\n ) as HTMLIcSearchBarElement;\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 if (this.mobileSearchBarVisible) {\n this.mobileSearchButtonEl.updateAriaLabel(\"Hide search\");\n this.hasFullWidthSearchBar = true;\n this.searchBar.fullWidth = true;\n setTimeout(() => {\n this.searchBar.focus();\n }, 100);\n } else {\n this.mobileSearchButtonEl.updateAriaLabel(\"Show search\");\n this.hasFullWidthSearchBar = false;\n this.searchBar.fullWidth = false;\n }\n }\n }\n\n private emitTopNavResized = (size: number): void => {\n const event = new CustomEvent(\"topNavResized\", { detail: { size: size } });\n this.el.dispatchEvent(event);\n };\n\n private menuButtonClick = () => {\n this.showNavMenu(true);\n };\n\n private showNavMenu(show: boolean): void {\n this.navMenuVisible = show;\n if (show) {\n this.icNavigationMenuOpened.emit();\n document.body.style.height = \"100%\";\n document.body.style.overflow = \"hidden\";\n } else {\n this.icNavigationMenuClosed.emit();\n document.body.style.height = \"auto\";\n document.body.style.overflow = \"auto\";\n }\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 > DEVICE_SIZES.L) {\n this.showNavMenu(false);\n if (this.mobileSearchBarVisible) {\n this.toggleSearchBar();\n }\n }\n this.emitTopNavResized(currSize);\n if (\n document.activeElement !== null &&\n document.activeElement !== undefined &&\n document.activeElement.tagName === \"IC-SEARCH-BAR\"\n ) {\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 const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n const hasMenuContent =\n this.hasNavigation \|\|\n this.hasIconButtons \|\|\n this.status !== \"\" \|\|\n this.version !== \"\";\n\n const searchButtonSize =\n this.deviceSize <= DEVICE_SIZES.S ? \"default\" : \"large\";\n\n let appTitleVariant: IcTypographyVariants = \"h3\";\n\n const hasTitle = this.appTitle !== \"\" && this.appTitle !== undefined;\n\n if (this.deviceSize <= DEVICE_SIZES.L) {\n appTitleVariant = \"h4\";\n if (this.deviceSize <= DEVICE_SIZES.S) {\n appTitleVariant = \"subtitle-small\";\n }\n }\n\n const mobileSearchButtonTitle = this.mobileSearchBarVisible\n ? \"Hide search\"\n : \"Show search\";\n const menuSize = this.deviceSize <= DEVICE_SIZES.S ? \"small\" : \"default\";\n\n const Component = isSlotUsed(this.el, \"app-title\") ? \"div\" : \"a\";\n\n const attrs = Component == \"a\" && {\n href: this.href,\n };\n\n return (\n <Host\n class={{\n [\"fullwidth-searchbar\"]: this.hasFullWidthSearchBar,\n [IcThemeForegroundEnum.Dark]:\n this.foregroundColor === IcThemeForegroundEnum.Dark,\n }}\n >\n <div class=\"top-navigation\">\n <ic-section-container aligned={this.contentAligned} full-height>\n <header role=\"banner\">\n <div class=\"top-panel-container\">\n <div class=\"app-details-container\">\n {(hasTitle \|\| isSlotUsed(this.el, \"app-title\")) && (\n <Component class=\"title-link\" {...attrs}>\n {this.hasAppIcon && (\n <div class=\"app-icon-container\" aria-hidden=\"true\">\n <slot name=\"app-icon\" />\n </div>\n )}\n <ic-typography variant={appTitleVariant}>\n <h1 class=\"title-wrap\">\n {isSlotUsed(this.el, \"app-title\") ? (\n <slot name=\"app-title\"></slot>\n ) : (\n this.appTitle\n )}\n </h1>\n </ic-typography>\n </Component>\n )}\n {this.status !== \"\" && (\n <div class=\"app-status\">\n <ic-typography\n aria-label=\"app tag\"\n variant=\"label-uppercase\"\n class=\"app-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"app-version\">\n <ic-typography\n variant=\"label\"\n class=\"app-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n\n {(this.hasSearchSlotContent \|\| hasMenuContent) && (\n <div class=\"search-menu-container\">\n <div class=\"search-actions-container\">\n {this.deviceSize > DEVICE_SIZES.L && (\n <slot name=\"search\"></slot>\n )}\n\n {this.hasSearchSlotContent &&\n this.deviceSize <= DEVICE_SIZES.L && (\n <ic-button\n id=\"search-toggle-button\"\n ref={(el) => (this.mobileSearchButtonEl = el)}\n onMouseDown={this.searchButtonMouseDownHandler}\n variant=\"icon\"\n size={searchButtonSize}\n aria-label={mobileSearchButtonTitle}\n appearance={this.foregroundColor}\n onClick={this.searchButtonClickHandler}\n >\n <slot name=\"toggle-icon\" slot=\"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 {this.hasIconButtons && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"icon-buttons-container\">\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {hasMenuContent && this.deviceSize <= DEVICE_SIZES.L && (\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={this.navMenuVisible ? \"true\" : \"false\"}\n >\n <ic-button\n id=\"menu-button\"\n appearance={this.foregroundColor}\n variant=\"secondary\"\n aria-expanded={this.menuOpen ? \"true\" : \"false\"}\n aria-haspopup=\"true\"\n aria-label={`Open ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n size={menuSize}\n onClick={this.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 {this.mobileSearchBarVisible && (\n <div class=\"search-bar-container\">\n <slot name=\"search\"></slot>\n </div>\n )}\n\n {this.hasNavigation && this.deviceSize > DEVICE_SIZES.L && (\n <div class=\"navigation-tabs\">\n <span\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n aria-hidden=\"true\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n class=\"nav-panel-container\"\n >\n <ic-horizontal-scroll appearance={this.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 {this.navMenuVisible && (\n <ic-navigation-menu\n version={this.version}\n status={this.status}\n class={{\n [\"inline\"]: this.inline,\n }}\n >\n <div class=\"menu-buttons-slot\" slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\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/components/ic-typography2.js CHANGED Viewed

@@ -3,16 +3,16 @@ import { c as checkResizeObserver } from './helpers.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)}: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-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}.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:var(--ic-space-xxs) solid !important;margin-bottom:calc(-1 * var(--ic-space-xxs)) !important;text-decoration:none;cursor:pointer}@supports (text-decoration-thickness: 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 Typography = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Typography = /*@__PURE__*/ proxyCustomElement(class Typography extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.resizeObserver = null;
-    this.lastWidth = 0;
+    this.focusBtnFromKeyboard = true;
     this.lastMarkerTop = 0;
+    this.lastWidth = 0;
+    this.resizeObserver = null;
     this.truncatedHeight = 0;
-    this.focusBtnFromKeyboard = true;
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
@@ -72,16 +72,21 @@ const Typography = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.truncButtonFocusFromMouse = () => {
       this.focusBtnFromKeyboard = false;
     };
-    this.variant = "body";
+    this.truncated = false;
+    this.truncButtonFocussed = false;
     this.applyVerticalMargins = false;
     this.maxLines = undefined;
+    this.variant = "body";
     this.expanded = false;
-    this.truncated = false;
-    this.truncButtonFocussed = false;
   }
   watchExpandedHandler() {
     this.el.setAttribute("style", `--truncation-max-lines: ${this.expanded ? "initial" : this.maxLines}`);
   }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
   componentDidLoad() {
     if (this.variant === "body" && this.maxLines > 0) {
       const marker = document.createElement("span");
@@ -93,11 +98,6 @@ const Typography = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       checkResizeObserver(this.runResizeObserver);
     }
   }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
-    }
-  }
   render() {
     const { variant, applyVerticalMargins, maxLines, truncated, expanded } = this;
     return (h(Host, { class: {
@@ -111,12 +111,12 @@ const Typography = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return icTypographyCss; }
 }, [1, "ic-typography", {
-    "variant": [1],
     "applyVerticalMargins": [4, "apply-vertical-margins"],
     "maxLines": [2, "max-lines"],
-    "expanded": [32],
+    "variant": [1],
     "truncated": [32],
-    "truncButtonFocussed": [32]
+    "truncButtonFocussed": [32],
+    "expanded": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"ic-typography2.js","mappings":"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","names":[],"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);\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-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}\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: var(--ic-space-xxs) solid !important;\n margin-bottom: calc(-1 * var(--ic-space-xxs)) !important;\n text-decoration: none;\n cursor: pointer;\n}\n\n@supports (text-decoration-thickness: 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","import { Component, Prop, h, Element, Host, State, Watch } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\n\n@Component({\n styleUrl: \"ic-typography.css\",\n tag: \"ic-typography\",\n shadow: true,\n})\nexport class Typography {\n @Element() el: HTMLIcTypographyElement;\n\n /*\n The ICDS typography style to use.\n /\n @Prop() variant?: IcTypographyVariants = \"body\";\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 The number of lines to display before truncating the text, only used for the 'body' variant.\n */\n @Prop() maxLines?: number;\n\n @State() expanded: boolean = false;\n @State() truncated: boolean = false;\n @State() truncButtonFocussed: boolean = false;\n\n private truncWrapperEl: Element;\n private resizeObserver: ResizeObserver = null;\n\n private resizeInterval: number;\n private lastWidth: number = 0;\n private lastMarkerTop: number = 0;\n private truncatedHeight: number = 0;\n private marker: HTMLElement;\n private focusBtnFromKeyboard: boolean = true;\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 private toggleExpanded = () => {\n this.expanded = !this.expanded;\n };\n\n private 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 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].top : 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 componentDidLoad(): void {\n if (this.variant === \"body\" && this.maxLines > 0) {\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 disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const { variant, applyVerticalMargins, maxLines, truncated, expanded } =\n this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n }}\n >\n {variant === \"body\" && 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 aria-hidden=\"true\"\n >\n {expanded ? \"See less\" : \"See more\"}\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-typography2.js","mappings":"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","names":[],"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);\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-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}\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: var(--ic-space-xxs) solid !important;\n margin-bottom: calc(-1 * var(--ic-space-xxs)) !important;\n text-decoration: none;\n cursor: pointer;\n}\n\n@supports (text-decoration-thickness: 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","import { Component, Prop, h, Element, Host, State, Watch } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\nimport { checkResizeObserver } 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 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 The number of lines to display before truncating the text, only used for the 'body' variant.\n /\n @Prop() maxLines?: number;\n\n /\n The ICDS typography style to use.\n */\n @Prop() variant?: IcTypographyVariants = \"body\";\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 componentDidLoad(): void {\n if (this.variant === \"body\" && this.maxLines > 0) {\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 private toggleExpanded = () => {\n this.expanded = !this.expanded;\n };\n\n private 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 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].top : 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 { variant, applyVerticalMargins, maxLines, truncated, expanded } =\n this;\n\n return (\n <Host\n class={{\n [`ic-typography-${variant}`]: true,\n [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n }}\n >\n {variant === \"body\" && 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 aria-hidden=\"true\"\n >\n {expanded ? \"See less\" : \"See more\"}\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index.d.ts CHANGED Viewed

@@ -1,62 +1,3 @@
-/* core custom elements */
-export { Alert as IcAlert } from '../types/components/ic-alert/ic-alert';
-export { BackToTop as IcBackToTop } from '../types/components/ic-back-to-top/ic-back-to-top';
-export { Breadcrumb as IcBreadcrumb } from '../types/components/ic-breadcrumb/ic-breadcrumb';
-export { BreadcrumbGroup as IcBreadcrumbGroup } from '../types/components/ic-breadcrumb-group/ic-breadcrumb-group';
-export { Button as IcButton } from '../types/components/ic-button/ic-button';
-export { Card as IcCard } from '../types/components/ic-card/ic-card';
-export { Checkbox as IcCheckbox } from '../types/components/ic-checkbox/ic-checkbox';
-export { CheckboxGroup as IcCheckboxGroup } from '../types/components/ic-checkbox-group/ic-checkbox-group';
-export { Chip as IcChip } from '../types/components/ic-chip/ic-chip';
-export { ClassificationBanner as IcClassificationBanner } from '../types/components/ic-classification-banner/ic-classification-banner';
-export { DataEntity as IcDataEntity } from '../types/components/ic-data-entity/ic-data-entity';
-export { DataRow as IcDataRow } from '../types/components/ic-data-row/ic-data-row';
-export { Divider as IcDivider } from '../types/components/ic-divider/ic-divider';
-export { Footer as IcFooter } from '../types/components/ic-footer/ic-footer';
-export { FooterLink as IcFooterLink } from '../types/components/ic-footer-link/ic-footer-link';
-export { FooterLinkGroup as IcFooterLinkGroup } from '../types/components/ic-footer-link-group/ic-footer-link-group';
-export { Hero as IcHero } from '../types/components/ic-hero/ic-hero';
-export { HorizontalScroll as IcHorizontalScroll } from '../types/components/ic-horizontal-scroll/ic-horizontal-scroll';
-export { InputComponentContainer as IcInputComponentContainer } from '../types/components/ic-input-component-container/ic-input-component-container';
-export { InputContainer as IcInputContainer } from '../types/components/ic-input-container/ic-input-container';
-export { InputLabel as IcInputLabel } from '../types/components/ic-input-label/ic-input-label';
-export { InputValidation as IcInputValidation } from '../types/components/ic-input-validation/ic-input-validation';
-export { Link as IcLink } from '../types/components/ic-link/ic-link';
-export { LoadingIndicator as IcLoadingIndicator } from '../types/components/ic-loading-indicator/ic-loading-indicator';
-export { Menu as IcMenu } from '../types/components/ic-menu/ic-menu';
-export { MenuGroup as IcMenuGroup } from '../types/components/ic-menu-group/ic-menu-group';
-export { MenuItem as IcMenuItem } from '../types/components/ic-menu-item/ic-menu-item';
-export { NavigationButton as IcNavigationButton } from '../types/components/ic-navigation-button/ic-navigation-button';
-export { NavigationGroup as IcNavigationGroup } from '../types/components/ic-navigation-group/ic-navigation-group';
-export { NavigationItem as IcNavigationItem } from '../types/components/ic-navigation-item/ic-navigation-item';
-export { NavigationMenu as IcNavigationMenu } from '../types/components/ic-navigation-menu/ic-navigation-menu';
-export { PageHeader as IcPageHeader } from '../types/components/ic-page-header/ic-page-header';
-export { Pagination as IcPagination } from '../types/components/ic-pagination/ic-pagination';
-export { PaginationItem as IcPaginationItem } from '../types/components/ic-pagination-item/ic-pagination-item';
-export { PopoverMenu as IcPopoverMenu } from '../types/components/ic-popover-menu/ic-popover-menu';
-export { RadioGroup as IcRadioGroup } from '../types/components/ic-radio-group/ic-radio-group';
-export { RadioOption as IcRadioOption } from '../types/components/ic-radio-option/ic-radio-option';
-export { SearchBar as IcSearchBar } from '../types/components/ic-search-bar/ic-search-bar';
-export { SectionContainer as IcSectionContainer } from '../types/components/ic-section-container/ic-section-container';
-export { Select as IcSelect } from '../types/components/ic-select/ic-select';
-export { SideNavigation as IcSideNavigation } from '../types/components/ic-side-navigation/ic-side-navigation';
-export { Skeleton as IcSkeleton } from '../types/components/ic-skeleton/ic-skeleton';
-export { StatusTag as IcStatusTag } from '../types/components/ic-status-tag/ic-status-tag';
-export { Step as IcStep } from '../types/components/ic-step/ic-step';
-export { Stepper as IcStepper } from '../types/components/ic-stepper/ic-stepper';
-export { Switch as IcSwitch } from '../types/components/ic-switch/ic-switch';
-export { Tab as IcTab } from '../types/components/ic-tab/ic-tab';
-export { TabContext as IcTabContext } from '../types/components/ic-tab-context/ic-tab-context';
-export { TabGroup as IcTabGroup } from '../types/components/ic-tab-group/ic-tab-group';
-export { TabPanel as IcTabPanel } from '../types/components/ic-tab-panel/ic-tab-panel';
-export { TextField as IcTextField } from '../types/components/ic-text-field/ic-text-field';
-export { Theme as IcTheme } from '../types/components/ic-theme/ic-theme';
-export { Toast as IcToast } from '../types/components/ic-toast/ic-toast';
-export { ToastRegion as IcToastRegion } from '../types/components/ic-toast-region/ic-toast-region';
-export { Tooltip as IcTooltip } from '../types/components/ic-tooltip/ic-tooltip';
-export { TopNavigation as IcTopNavigation } from '../types/components/ic-top-navigation/ic-top-navigation';
-export { Typography as IcTypography } from '../types/components/ic-typography/ic-typography';
 /**
  * Used to manually set the base path where assets can be found.
  * If the script is used as "module", it's recommended to use "import.meta.url",
@@ -69,10 +10,18 @@ export { Typography as IcTypography } from '../types/components/ic-typography/ic
  */
 export declare const setAssetPath: (path: string) => void;
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-export * from '../types';