@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.11

package/dist/cjs/ic-theme.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3ef30d9d.js');
-const helpers = require('./helpers-8bc3b6d2.js');
+const index = require('./index-f79a4e53.js');
+const helpers = require('./helpers-2021e212.js');
 require('./types-3eb02246.js');
 
 const Theme = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.icThemeChange = index.createEvent(this, "icThemeChange", 7);
+    this.themeChange = index.createEvent(this, "themeChange", 7);
     this.checkThemeColorContrast = () => {
       if (helpers.getThemeColorBrightness() < helpers.BLACK_MIN_COLOR_BRIGHTNESS &&
         helpers.getThemeColorBrightness() > helpers.WHITE_MAX_COLOR_BRIGHTNESS) {
@@ -38,7 +38,7 @@ const Theme = class {
         root.style.setProperty("--ic-theme-primary-a", colorRGBA.a.toString());
         this.checkThemeColorContrast();
         const foregroundColor = helpers.getThemeForegroundColor();
-        this.icThemeChange.emit({ mode: foregroundColor, color: colorRGBA });
+        this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });
       }
     };
     this.color = null;

package/dist/cjs/ic-theme.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-theme.entry.cjs.js","mappings":";;;;;;;;MA0Ba,KAAK;;;;IAgBR,4BAAuB,GAAG;MAChC,IACEA,+BAAuB,EAAE,GAAGC,kCAA0B;QACtDD,+BAAuB,EAAE,GAAGE,kCAA0B,EACtD;QACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;OACH;KACF,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAGC,iBAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAGC,oBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;OAC9B;KACF,CAAC;IAEM,iBAAY,GAAG,CAAC,SAAsB;MAC5C,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,eAAe,GAAGC,+BAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;OACtE;KACF,CAAC;iBAjDuB,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EA8CD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,OAAOC,QAACC,UAAI,OAAQ,CAAC;GACtB;;;;;;;;","names":["getThemeColorBrightness","BLACK_MIN_COLOR_BRIGHTNESS","WHITE_MAX_COLOR_BRIGHTNESS","hexToRgba","rgbaStrToObj","getThemeForegroundColor","h","Host"],"sources":["./src/components/ic-theme/ic-theme.tsx"],"sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value eg \"#ff0000\" or RGB eg \"rgb(255, 0, 0)\"\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * Emitted when the theme is changed.\n   */\n  @Event() icThemeChange: EventEmitter<IcTheme>;\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.icThemeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}
+{"file":"ic-theme.entry.cjs.js","mappings":";;;;;;;;MA0Ba,KAAK;;;;IAgBR,4BAAuB,GAAG;MAChC,IACEA,+BAAuB,EAAE,GAAGC,kCAA0B;QACtDD,+BAAuB,EAAE,GAAGE,kCAA0B,EACtD;QACA,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;OACH;KACF,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;QACvB,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAGC,iBAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAGC,oBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;OAC9B;KACF,CAAC;IAEM,iBAAY,GAAG,CAAC,SAAsB;MAC5C,IAAI,SAAS,KAAK,IAAI,EAAE;QACtB,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEvE,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,eAAe,GAAGC,+BAAuB,EAAE,CAAC;QAClD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;OACpE;KACF,CAAC;iBAjDuB,IAAI;;EAG7B,qBAAqB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EA8CD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,MAAM;IACJ,OAAOC,QAACC,UAAI,OAAQ,CAAC;GACtB;;;;;;;;","names":["getThemeColorBrightness","BLACK_MIN_COLOR_BRIGHTNESS","WHITE_MAX_COLOR_BRIGHTNESS","hexToRgba","rgbaStrToObj","getThemeForegroundColor","h","Host"],"sources":["./src/components/ic-theme/ic-theme.tsx"],"sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColorRGBA, IcTheme } from \"../../utils/types\";\nimport {\n  getThemeForegroundColor,\n  hexToRgba,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\nimport { getThemeColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() color?: string = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setThemeColor = () => {\n    if (this.color !== null) {\n      let colorRGBA = null;\n      const firstChar = this.color.slice(0, 1);\n      if (firstChar === \"#\") {\n        colorRGBA = hexToRgba(this.color);\n      } else if (firstChar.toLowerCase() === \"r\") {\n        colorRGBA = rgbaStrToObj(this.color);\n      }\n      this.setThemeRGBA(colorRGBA);\n    }\n  };\n\n  private setThemeRGBA = (colorRGBA: IcColorRGBA) => {\n    if (colorRGBA !== null) {\n      const root = document.documentElement;\n      root.style.setProperty(\"--ic-theme-primary-r\", colorRGBA.r.toString());\n      root.style.setProperty(\"--ic-theme-primary-g\", colorRGBA.g.toString());\n      root.style.setProperty(\"--ic-theme-primary-b\", colorRGBA.b.toString());\n      root.style.setProperty(\"--ic-theme-primary-a\", colorRGBA.a.toString());\n\n      this.checkThemeColorContrast();\n\n      const foregroundColor = getThemeForegroundColor();\n      this.themeChange.emit({ mode: foregroundColor, color: colorRGBA });\n    }\n  };\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/cjs/ic-toast-region.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f79a4e53.js');
+
+const ToastRegion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pendingVisibility = [];
+  }
+  /**
+   * Handles setting the visibility of various toasts based on what is already visible
+   * @param toast The toast element being requested to display
+   */
+  async setVisible(toast) {
+    const visibleToasts = Array.from(document.querySelectorAll("ic-toast")).filter((el) => window.getComputedStyle(el).display !== "none");
+    if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {
+      toast.setVisible().then((res) => (this.previouslyFocused = res));
+    }
+    if (visibleToasts.length > 0)
+      this.pendingVisibility.push(toast);
+  }
+  handleDismissedToast() {
+    var _a;
+    if (this.pendingVisibility.length > 0) {
+      this.pendingVisibility[0]
+        .setVisible()
+        .then((res) => (this.previouslyFocused = res));
+      this.pendingVisibility.shift();
+    }
+    else {
+      if (this.previouslyFocused && "setFocus" in this.previouslyFocused) {
+        this.previouslyFocused.setFocus();
+      }
+      else
+        (_a = this.previouslyFocused) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  render() {
+    return index.h("slot", null);
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.ic_toast_region = ToastRegion;
+
+//# sourceMappingURL=ic-toast-region.cjs.entry.js.map

package/dist/cjs/ic-toast-region.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-toast-region.entry.cjs.js","mappings":";;;;;;MAIa,WAAW;EADxB;;IAKE,sBAAiB,GAAyB,EAAE,CAAC;GAkC9C;;;;;EA3BC,MAAM,UAAU,CAAC,KAAyB;IACxC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC,CACtC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;IACjE,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,IAAI,CAAC,EAAE;MACpE,KAAK,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;KAClE;IACD,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;MAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAClE;EAGD,oBAAoB;;IAClB,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;MACrC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;SACtB,UAAU,EAAE;SACZ,IAAI,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,CAAC,CAAC;MACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;KAChC;SAAM;MACL,IAAI,IAAI,CAAC,iBAAiB,IAAI,UAAU,IAAI,IAAI,CAAC,iBAAiB,EAAE;QACjE,IAAI,CAAC,iBAA2C,CAAC,QAAQ,EAAE,CAAC;OAC9D;;QAAM,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACxC;GACF;EAED,MAAM;IACJ,OAAOA,qBAAa,CAAC;GACtB;;;;;;","names":["h"],"sources":["./src/components/ic-toast-region/ic-toast-region.tsx"],"sourcesContent":["import { Component, Element, h, Listen, Method } from \"@stencil/core\";\nimport { IcFocusableComponents } from \"../../utils/types\";\n\n@Component({ tag: \"ic-toast-region\" })\nexport class ToastRegion {\n  @Element() el: HTMLIcToastRegionElement;\n\n  previouslyFocused: HTMLElement;\n  pendingVisibility: HTMLIcToastElement[] = [];\n\n  /**\n   * Handles setting the visibility of various toasts based on what is already visible\n   * @param toast The toast element being requested to display\n   */\n  @Method()\n  async setVisible(toast: HTMLIcToastElement) {\n    const visibleToasts = Array.from(\n      document.querySelectorAll(\"ic-toast\")\n    ).filter((el) => window.getComputedStyle(el).display !== \"none\");\n    if (visibleToasts.indexOf(toast) === -1 && visibleToasts.length <= 0) {\n      toast.setVisible().then((res) => (this.previouslyFocused = res));\n    }\n    if (visibleToasts.length > 0) this.pendingVisibility.push(toast);\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismissedToast() {\n    if (this.pendingVisibility.length > 0) {\n      this.pendingVisibility[0]\n        .setVisible()\n        .then((res) => (this.previouslyFocused = res));\n      this.pendingVisibility.shift();\n    } else {\n      if (this.previouslyFocused && \"setFocus\" in this.previouslyFocused) {\n        (this.previouslyFocused as IcFocusableComponents).setFocus();\n      } else this.previouslyFocused?.focus();\n    }\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}

package/dist/cjs/ic-toast.cjs.entry.js

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f79a4e53.js');
+const closeIcon = require('./close-icon-8ccb0163.js');
+const helpers = require('./helpers-2021e212.js');
+const types = require('./types-3eb02246.js');
+
+const icToastCss = "/*! 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{--bottom-position:var(--ic-space-xl);position:fixed;bottom:var(--bottom-position);left:50%;transform:translate(-50%);animation:fadein var(--ic-transition-duration-slow) ease-in-out;z-index:var(--ic-z-index-toast)}:host(.hidden){display:none;animation:fadeout var(--ic-transition-duration-slow) ease-in-out}.container{max-width:32.5rem;min-width:18rem;box-shadow:var(--ic-elevation-overlay);min-height:3.5rem;background-color:var(--ic-architectural-800);color:var(--ic-color-white-text);display:flex;align-items:center;position:relative;border-radius:var(--ic-border-radius)}.toast-icon-container{height:100%;display:flex;align-items:center}.divider{height:100%;width:var(--ic-space-xs);position:absolute;border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs)}.divider-neutral{background-color:var(--ic-architectural-500)}.divider-info{background-color:var(--ic-status-info-contrast)}.divider-warning{background-color:var(--ic-status-warning-contrast)}.divider-error{background-color:var(--ic-status-error-contrast)}.divider-success{background-color:var(--ic-status-success-contrast)}.toast-icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-md)}:host([variant=\"neutral\"]) .toast-icon svg,::slotted(svg){fill:var(--ic-architectural-500)}:host([variant=\"info\"]) .toast-icon svg{fill:var(--ic-status-info-contrast)}:host([variant=\"warning\"]) .toast-icon svg{fill:var(--ic-status-warning-contrast)}:host([variant=\"error\"]) .toast-icon svg{fill:var(--ic-status-error-contrast)}:host([variant=\"success\"]) .toast-icon svg{fill:var(--ic-status-success-contrast)}.toast-content{margin-left:var(--ic-space-xs);width:100%}.no-icon{margin-left:var(--ic-space-md)}.toast-message{padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}.toast-action-container{padding-bottom:var(--ic-space-md)}ic-button,.toast-dismiss-timer{padding:var(--ic-space-xs)}@media (max-width: 576px){:host{--bottom-position:var(--ic-space-lg);width:calc(100% - 2 * var(--ic-space-md))}}@media (min-width: 993px){:host{--bottom-position:calc(var(--ic-space-xl) + var(--ic-space-xs))}}@media (forced-colors: active){.container{border:var(--ic-hc-border)}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:var(--bottom-position);opacity:1}}@keyframes fadeout{from{bottom:var(--bottom-position);opacity:1}to{bottom:0;opacity:0}}";
+
+const AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;
+const TOAST_HEADING_CHAR_LIMIT = 70;
+const TOAST_MESSAGE_CHAR_LIMIT = 140;
+const Toast = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.icDismiss = index.createEvent(this, "icDismiss", 7);
+    this.interactiveElements = [];
+    this.dismissAction = () => {
+      this.icDismiss.emit();
+    };
+    this.handleProgressChange = () => {
+      this.timerProgress -=
+        (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;
+    };
+    this.heading = undefined;
+    this.variant = undefined;
+    this.message = undefined;
+    this.dismissMode = "manual";
+    this.autoDismissTimeout = 5000;
+    this.neutralIconAriaLabel = undefined;
+    this.dismissButtonAriaLabel = "dismiss";
+    this.visible = false;
+    this.timerProgress = 100;
+  }
+  /**
+   * Used to display the individual toast
+   * @returns The element that previously had focus before the toast appeared
+   */
+  async setVisible() {
+    if (!this.visible)
+      this.visible = true;
+    if (!this.isManual) {
+      this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
+      this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
+      return null;
+    }
+    else {
+      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);
+      return document.activeElement;
+    }
+  }
+  handleDismiss() {
+    this.visible = false;
+    clearInterval(this.timerRefreshInterval);
+    this.timerProgress = 100;
+  }
+  handleKeyboard(ev) {
+    if (this.isManual && this.visible) {
+      switch (ev.key) {
+        case "Tab":
+          ev.preventDefault();
+          this.findNextInteractiveElement(ev.shiftKey).setFocus();
+          break;
+        case "Escape":
+          !ev.repeat && this.dismissAction();
+          ev.stopImmediatePropagation();
+          break;
+      }
+    }
+  }
+  handleTimer(ev) {
+    if (!this.isManual) {
+      switch (ev.type) {
+        case "mouseenter":
+          window.clearTimeout(this.dismissTimeout);
+          window.clearInterval(this.timerRefreshInterval);
+          this.timerProgress = 100;
+          break;
+        case "mouseleave":
+          this.dismissTimeout = window.setTimeout(this.dismissAction, this.autoDismissTimeout);
+          this.timerRefreshInterval = window.setInterval(this.handleProgressChange, AUTO_DISMISS_TIMER_REFRESH_RATE_MS);
+          break;
+      }
+    }
+  }
+  handleLongText(headingTooLong, messageTooLong) {
+    if (messageTooLong || headingTooLong) {
+      console.error(`Too many characters in toast ${headingTooLong ? "heading" : ""}${headingTooLong && messageTooLong ? " and " : ""}${messageTooLong ? "message" : ""}. Refer to character limits specified in the prop description`);
+    }
+  }
+  findNextInteractiveElement(isBackwards) {
+    const first = this.interactiveElements[0];
+    const last = this.interactiveElements[this.interactiveElements.length - 1];
+    const source = isBackwards ? first : last;
+    const target = isBackwards ? last : first;
+    if (this.isActive(source))
+      return target;
+    let currentIndex;
+    const found = this.interactiveElements.some((el, index) => {
+      if (!this.isActive(el))
+        return false;
+      currentIndex = index;
+      return true;
+    });
+    if (!found)
+      return first;
+    return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];
+  }
+  isActive(targetEl) {
+    if (targetEl === this.el)
+      return !!this.el.shadowRoot.activeElement;
+    return document.activeElement === targetEl;
+  }
+  componentWillLoad() {
+    var _a, _b;
+    this.handleLongText(this.heading.length > TOAST_HEADING_CHAR_LIMIT, ((_a = this.message) === null || _a === void 0 ? void 0 : _a.length) > TOAST_MESSAGE_CHAR_LIMIT);
+    if (this.autoDismissTimeout < 5000)
+      this.autoDismissTimeout = 5000;
+    if (helpers.isSlotUsed(this.el, "action"))
+      this.dismissMode = "manual";
+    this.isManual = this.dismissMode === "manual";
+    if (helpers.isSlotUsed(this.el, "neutral-icon"))
+      this.variant = "neutral";
+    if (this.variant === "neutral") {
+      this.neutralVariantLabel =
+        (_b = this.neutralIconAriaLabel) !== null && _b !== void 0 ? _b : helpers.VARIANT_ICONS[this.variant].ariaLabel;
+    }
+    if (this.isManual) {
+      this.el.setAttribute("aria-label", this.variant
+        ? this.neutralVariantLabel || helpers.VARIANT_ICONS[this.variant].ariaLabel
+        : this.heading);
+      (this.variant || this.message) &&
+        this.el.setAttribute("aria-description", this.variant
+          ? `${this.heading}${this.message !== undefined ? `. ${this.message}` : ""}`
+          : this.message);
+    }
+  }
+  componentDidLoad() {
+    helpers.onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Toast");
+    const actionContent = helpers.getSlot(this.el, "action");
+    const dismissButton = this.el.shadowRoot.querySelector("ic-button");
+    if (actionContent)
+      this.interactiveElements.push(actionContent);
+    if (dismissButton)
+      this.interactiveElements.push(dismissButton);
+  }
+  render() {
+    const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
+    return (index.h(index.Host, { class: { ["hidden"]: !visible }, role: isManual ? "dialog" : "status" }, index.h("div", { class: "container" }, variant && visible && (index.h("div", { class: "toast-icon-container" }, index.h("div", { class: {
+        ["divider"]: true,
+        [`divider-${variant}`]: true,
+      } }), variant === "neutral" ? (index.h("slot", { name: "neutral-icon" })) : (index.h("span", { class: "toast-icon", innerHTML: helpers.VARIANT_ICONS[variant].icon })))), index.h("div", { class: {
+        ["toast-content"]: true,
+        ["no-icon"]: variant === "neutral" && !helpers.isSlotUsed(this.el, "neutral-icon"),
+      } }, index.h("div", { class: "toast-message" }, index.h("ic-typography", { variant: "subtitle-large" }, visible && index.h("h5", null, heading)), message && (index.h("ic-typography", { variant: "body" }, visible && index.h("p", null, message)))), helpers.isSlotUsed(this.el, "action") && (index.h("div", { class: "toast-action-container" }, index.h("slot", { name: "action" })))), !isManual ? (index.h("ic-loading-indicator", { class: "toast-dismiss-timer", appearance: "light", size: "icon", progress: this.timerProgress })) : (index.h("ic-button", { id: "dismiss-button", innerHTML: closeIcon.closeIcon, onClick: this.dismissAction, variant: "icon", appearance: types.IcThemeForegroundEnum.Light, "aria-label": dismissButtonAriaLabel })))));
+  }
+  get el() { return index.getElement(this); }
+};
+Toast.style = icToastCss;
+
+exports.ic_toast = Toast;
+
+//# sourceMappingURL=ic-toast.cjs.entry.js.map

package/dist/cjs/ic-toast.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-toast.entry.cjs.js","mappings":"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","names":["isSlotUsed","VARIANT_ICONS","onComponentRequiredPropUndefined","getSlot","h","Host","closeIcon","IcThemeForegroundEnum"],"sources":["./src/components/ic-toast/ic-toast.css?tag=ic-toast&encapsulation=shadow","./src/components/ic-toast/ic-toast.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-toast: z-index of toast\n */\n\n:host {\n  --bottom-position: var(--ic-space-xl);\n\n  position: fixed;\n  bottom: var(--bottom-position);\n  left: 50%;\n  transform: translate(-50%);\n  animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n  z-index: var(--ic-z-index-toast);\n}\n\n:host(.hidden) {\n  display: none;\n  animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n}\n\n.container {\n  max-width: 32.5rem;\n  min-width: 18rem;\n  box-shadow: var(--ic-elevation-overlay);\n  min-height: 3.5rem;\n  background-color: var(--ic-architectural-800);\n  color: var(--ic-color-white-text);\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: var(--ic-border-radius);\n}\n\n.toast-icon-container {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.divider {\n  height: 100%;\n  width: var(--ic-space-xs);\n  position: absolute;\n  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n}\n\n.divider-neutral {\n  background-color: var(--ic-architectural-500);\n}\n\n.divider-info {\n  background-color: var(--ic-status-info-contrast);\n}\n\n.divider-warning {\n  background-color: var(--ic-status-warning-contrast);\n}\n\n.divider-error {\n  background-color: var(--ic-status-error-contrast);\n}\n\n.divider-success {\n  background-color: var(--ic-status-success-contrast);\n}\n\n.toast-icon,\n::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n:host([variant=\"neutral\"]) .toast-icon svg,\n::slotted(svg) {\n  fill: var(--ic-architectural-500);\n}\n\n:host([variant=\"info\"]) .toast-icon svg {\n  fill: var(--ic-status-info-contrast);\n}\n\n:host([variant=\"warning\"]) .toast-icon svg {\n  fill: var(--ic-status-warning-contrast);\n}\n\n:host([variant=\"error\"]) .toast-icon svg {\n  fill: var(--ic-status-error-contrast);\n}\n\n:host([variant=\"success\"]) .toast-icon svg {\n  fill: var(--ic-status-success-contrast);\n}\n\n.toast-content {\n  margin-left: var(--ic-space-xs);\n  width: 100%;\n}\n\n.no-icon {\n  margin-left: var(--ic-space-md);\n}\n\n.toast-message {\n  padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n.toast-action-container {\n  padding-bottom: var(--ic-space-md);\n}\n\nic-button,\n.toast-dismiss-timer {\n  padding: var(--ic-space-xs);\n}\n\n@media (max-width: 576px) {\n  :host {\n    --bottom-position: var(--ic-space-lg);\n\n    width: calc(100% - 2 * var(--ic-space-md));\n  }\n}\n\n@media (min-width: 993px) {\n  :host {\n    --bottom-position: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  }\n}\n\n@media (forced-colors: active) {\n  .container {\n    border: var(--ic-hc-border);\n  }\n}\n\n@keyframes fadein {\n  from {\n    bottom: 0;\n    opacity: 0;\n  }\n\n  to {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeout {\n  from {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n\n  to {\n    bottom: 0;\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n  getSlot,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcActivationTypes,\n  IcStatusVariants,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n  tag: \"ic-toast\",\n  styleUrl: \"ic-toast.css\",\n  shadow: true,\n})\nexport class Toast {\n  @Element() el: HTMLIcToastElement;\n  /**\n   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n   */\n  @Prop() heading!: string;\n  /**\n   * The variant of the toast being rendered\n   */\n  @Prop() variant?: IcStatusVariants;\n  /**\n   * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n   */\n  @Prop() message?: string;\n  /**\n   * How the toast will be dismissed. If manual will display a dismiss button.\n   */\n  @Prop() dismissMode?: IcActivationTypes = \"manual\";\n  /**\n   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n   * (NOTE: Has a minimum value of `5000ms`)\n   */\n  @Prop() autoDismissTimeout? = 5000;\n  /**\n   * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n   */\n  @Prop() neutralIconAriaLabel?: string;\n  /**\n   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n   */\n  @Prop() dismissButtonAriaLabel? = \"dismiss\";\n  /**\n   * Is emitted when the user dismisses the toast\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  @State() visible = false;\n  @State() timerProgress = 100;\n\n  dismissTimeout: number;\n  timerRefreshInterval: number;\n  isManual: boolean;\n  interactiveElements: ActionAreaElementTypes[] = [];\n  neutralVariantLabel: string;\n\n  /**\n   * Used to display the individual toast\n   * @returns The element that previously had focus before the toast appeared\n   */\n  @Method()\n  async setVisible() {\n    if (!this.visible) this.visible = true;\n    if (!this.isManual) {\n      this.dismissTimeout = window.setTimeout(\n        this.dismissAction,\n        this.autoDismissTimeout\n      );\n      this.timerRefreshInterval = window.setInterval(\n        this.handleProgressChange,\n        AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n      );\n      return null;\n    } else {\n      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n      return document.activeElement as HTMLElement;\n    }\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismiss(): void {\n    this.visible = false;\n    clearInterval(this.timerRefreshInterval);\n    this.timerProgress = 100;\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.isManual && this.visible) {\n      switch (ev.key) {\n        case \"Tab\":\n          ev.preventDefault();\n          this.findNextInteractiveElement(ev.shiftKey).setFocus();\n          break;\n        case \"Escape\":\n          !ev.repeat && this.dismissAction();\n          ev.stopImmediatePropagation();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"mouseenter\")\n  @Listen(\"mouseleave\")\n  handleTimer(ev: MouseEvent): void {\n    if (!this.isManual) {\n      switch (ev.type) {\n        case \"mouseenter\":\n          window.clearTimeout(this.dismissTimeout);\n          window.clearInterval(this.timerRefreshInterval);\n          this.timerProgress = 100;\n          break;\n        case \"mouseleave\":\n          this.dismissTimeout = window.setTimeout(\n            this.dismissAction,\n            this.autoDismissTimeout\n          );\n          this.timerRefreshInterval = window.setInterval(\n            this.handleProgressChange,\n            AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n          );\n          break;\n      }\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private handleProgressChange = () => {\n    this.timerProgress -=\n      (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;\n  };\n\n  private handleLongText(\n    headingTooLong: boolean,\n    messageTooLong?: boolean\n  ): void {\n    if (messageTooLong || headingTooLong) {\n      console.error(\n        `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n          headingTooLong && messageTooLong ? \" and \" : \"\"\n        }${\n          messageTooLong ? \"message\" : \"\"\n        }. Refer to character limits specified in the prop description`\n      );\n    }\n  }\n\n  private findNextInteractiveElement(\n    isBackwards: boolean\n  ): ActionAreaElementTypes {\n    const first = this.interactiveElements[0];\n    const last = this.interactiveElements[this.interactiveElements.length - 1];\n\n    const source = isBackwards ? first : last;\n    const target = isBackwards ? last : first;\n    if (this.isActive(source)) return target;\n\n    let currentIndex: number;\n    const found = this.interactiveElements.some((el, index) => {\n      if (!this.isActive(el)) return false;\n      currentIndex = index;\n      return true;\n    });\n\n    if (!found) return first;\n    return this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)];\n  }\n\n  private isActive(targetEl: HTMLElement): boolean {\n    if (targetEl === this.el) return !!this.el.shadowRoot.activeElement;\n    return document.activeElement === targetEl;\n  }\n\n  componentWillLoad() {\n    this.handleLongText(\n      this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n      this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n    );\n\n    if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n    if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n    this.isManual = this.dismissMode === \"manual\";\n\n    if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n    if (this.variant === \"neutral\") {\n      this.neutralVariantLabel =\n        this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n    }\n\n    if (this.isManual) {\n      this.el.setAttribute(\n        \"aria-label\",\n        this.variant\n          ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n          : this.heading\n      );\n      (this.variant || this.message) &&\n        this.el.setAttribute(\n          \"aria-description\",\n          this.variant\n            ? `${this.heading}${\n                this.message !== undefined ? `. ${this.message}` : \"\"\n              }`\n            : this.message\n        );\n    }\n  }\n\n  componentDidLoad() {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Toast\"\n    );\n    const actionContent = getSlot(this.el, \"action\") as ActionAreaElementTypes;\n    const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n    if (actionContent) this.interactiveElements.push(actionContent);\n    if (dismissButton) this.interactiveElements.push(dismissButton);\n  }\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      visible,\n      isManual,\n      dismissButtonAriaLabel,\n    } = this;\n    return (\n      <Host\n        class={{ [\"hidden\"]: !visible }}\n        role={isManual ? \"dialog\" : \"status\"}\n      >\n        <div class=\"container\">\n          {variant && visible && (\n            <div class=\"toast-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                <slot name=\"neutral-icon\" />\n              ) : (\n                <span\n                  class=\"toast-icon\"\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n          )}\n          <div\n            class={{\n              [\"toast-content\"]: true,\n              [\"no-icon\"]:\n                variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n            }}\n          >\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                {visible && <h5>{heading}</h5>}\n              </ic-typography>\n              {message && (\n                <ic-typography variant=\"body\">\n                  {visible && <p>{message}</p>}\n                </ic-typography>\n              )}\n            </div>\n            {isSlotUsed(this.el, \"action\") && (\n              <div class=\"toast-action-container\">\n                <slot name=\"action\" />\n              </div>\n            )}\n          </div>\n          {!isManual ? (\n            <ic-loading-indicator\n              class=\"toast-dismiss-timer\"\n              appearance=\"light\"\n              size=\"icon\"\n              progress={this.timerProgress}\n            ></ic-loading-indicator>\n          ) : (\n            <ic-button\n              id=\"dismiss-button\"\n              innerHTML={closeIcon}\n              onClick={this.dismissAction}\n              variant=\"icon\"\n              appearance={IcThemeForegroundEnum.Light}\n              aria-label={dismissButtonAriaLabel}\n            ></ic-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3ef30d9d.js');
+const index = require('./index-f79a4e53.js');
 const types = require('./types-3eb02246.js');
-const helpers = require('./helpers-8bc3b6d2.js');
+const helpers = require('./helpers-2021e212.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);margin-left:calc(-1 * var(--ic-space-xxs));transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}: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{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-left: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:8px;padding-bottom:8px}.navigation-tabs{margin-top:-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}.app-title{padding-right:var(--ic-space-lg)}:host .app-status{border-radius:80px;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)}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:16px;background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs)}.app-status-text,.app-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}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;flex:1 auto}.menu-button-container{margin-left:var(--ic-space-md)}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:44px}:host([content-aligned=\"left\"]) .app-details-container{flex-basis:1}:host([content-aligned=\"left\"]) .app-details-container,:host([content-aligned=\"left\"]) .nav-panel-container,:host([content-aligned=\"center\"]) .nav-panel-container,:host([content-aligned=\"left\"]) .search-menu-container,:host([content-aligned=\"center\"]) .search-menu-container{justify-content:flex-start}:host([content-aligned=\"center\"]) .app-details-container{justify-content:flex-end}: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)}:host([content-aligned=\"center\"]) .top-navigation{display:flex;justify-content:center}:host([content-aligned=\"left\"]) .top-navigation{display:flex}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding-left: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:160px}.search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-keyline-darken);height:64px;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))}:host([content-aligned=\"left\"]) .app-details-container,:host([content-aligned=\"left\"]) .search-menu-container,:host([content-aligned=\"center\"]) .search-menu-container,:host([content-aligned=\"center\"]) .app-details-container{justify-content:flex-start}}@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:40px}.searchbox-inline{display:none}.search-bar-container{margin-top:0;height:56px;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 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);margin-left:calc(-1 * 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:-0.063rem}.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:5rem;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)}:host(.dark) .app-status{background-color:var(--ic-theme-text);color:var(--ic-color-white-text)}:host .app-version{border-radius:1rem;background-color:var(--ic-theme-active);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs)}.app-status-text,.app-version-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:6rem}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)}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:0.063rem;height:0.063rem;padding:0;margin:-0.063rem;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 = class {
   constructor(hostRef) {
@@ -64,7 +64,7 @@ const TopNavigation = class {
           //remove attribute again as this trigger a redraw & applies css
           this.searchBar.removeAttribute("hidden");
           setTimeout(() => {
-            this.searchBar.setFocus();
+            this.searchBar.focus();
           }, 100);
         }
       }
@@ -100,7 +100,7 @@ const TopNavigation = class {
   navBarMenuCloseHandler() {
     this.showNavMenu(false);
     const menuBtn = this.el.shadowRoot.querySelector("#menu-button");
-    menuBtn.setFocus();
+    menuBtn.focus();
   }
   searchInputBlurHandler(ev) {
     if (ev.detail !== null) {
@@ -126,7 +126,7 @@ const TopNavigation = class {
         this.hasFullWidthSearchBar = true;
         this.searchBar.fullWidth = true;
         setTimeout(() => {
-          this.searchBar.setFocus();
+          this.searchBar.focus();
         }, 100);
       }
       else {
@@ -161,7 +161,8 @@ const TopNavigation = class {
   }
   componentDidLoad() {
     helpers.checkResizeObserver(this.runResizeObserver);
-    helpers.onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
+    !helpers.isSlotUsed(this.el, "app-title") &&
+      helpers.onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
   }
   disconnectedCallback() {
     if (this.resizeObserver !== null) {
@@ -186,13 +187,17 @@ const TopNavigation = class {
       ? "Hide search"
       : "Show search";
     const menuSize = this.deviceSize <= helpers.DEVICE_SIZES.S ? "small" : "default";
+    const Component = helpers.isSlotUsed(this.el, "app-title") ? "div" : "a";
+    const attrs = Component == "a" && {
+      href: this.href,
+    };
     return (index.h(index.Host, { class: {
         ["fullwidth-searchbar"]: this.hasFullWidthSearchBar,
         [types.IcThemeForegroundEnum.Dark]: this.foregroundColor === types.IcThemeForegroundEnum.Dark,
-      } }, index.h("div", { class: "top-navigation" }, index.h("ic-section-container", { aligned: "full-width", "full-height": true }, index.h("header", { role: "banner" }, index.h("div", { class: "top-panel-container" }, index.h("div", { class: "app-details-container" }, hasTitle && (index.h("a", { class: "title-link", href: this.href }, this.hasAppIcon && (index.h("div", { class: "app-icon-container", "aria-hidden": "true" }, index.h("slot", { name: "app-icon" }))), index.h("ic-typography", { variant: appTitleVariant }, index.h("h1", null, this.appTitle)))), this.status !== "" && (index.h("div", { class: "app-status" }, index.h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (index.h("div", { class: "app-version" }, index.h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (index.h("div", { class: "search-menu-container" }, index.h("div", { class: "search-actions-container" }, this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("slot", { name: "search" })), this.hasSearchSlotContent &&
-      this.deviceSize <= helpers.DEVICE_SIZES.L && (index.h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: this.searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: this.foregroundColor, onClick: this.searchButtonClickHandler }, index.h("slot", { name: "toggle-icon", slot: "icon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", 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" }))))), this.hasIconButtons && this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("div", { class: "icon-buttons-container" }, index.h("slot", { name: "buttons" }))), hasMenuContent && this.deviceSize <= helpers.DEVICE_SIZES.L && (index.h("div", { class: "menu-button-container" }, index.h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": !this.hasNavigation || this.navMenuVisible
+      } }, index.h("div", { class: "top-navigation" }, index.h("ic-section-container", { aligned: this.contentAligned, "full-height": true }, index.h("header", { role: "banner" }, index.h("div", { class: "top-panel-container" }, index.h("div", { class: "app-details-container" }, (hasTitle || helpers.isSlotUsed(this.el, "app-title")) && (index.h(Component, Object.assign({ class: "title-link" }, attrs), this.hasAppIcon && (index.h("div", { class: "app-icon-container", "aria-hidden": "true" }, index.h("slot", { name: "app-icon" }))), index.h("ic-typography", { variant: appTitleVariant }, index.h("h1", { class: "title-wrap" }, helpers.isSlotUsed(this.el, "app-title") ? (index.h("slot", { name: "app-title" })) : (this.appTitle))))), this.status !== "" && (index.h("div", { class: "app-status" }, index.h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (index.h("div", { class: "app-version" }, index.h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (index.h("div", { class: "search-menu-container" }, index.h("div", { class: "search-actions-container" }, this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("slot", { name: "search" })), this.hasSearchSlotContent &&
+      this.deviceSize <= helpers.DEVICE_SIZES.L && (index.h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: this.searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: this.foregroundColor, onClick: this.searchButtonClickHandler }, index.h("slot", { name: "toggle-icon", slot: "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" }))))), this.hasIconButtons && this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("div", { class: "icon-buttons-container" }, index.h("slot", { name: "buttons" }))), hasMenuContent && this.deviceSize <= helpers.DEVICE_SIZES.L && (index.h("div", { class: "menu-button-container" }, index.h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": !this.hasNavigation || this.navMenuVisible
         ? "true"
-        : "false" }, index.h("ic-button", { id: "menu-button", appearance: this.foregroundColor, variant: "secondary", "aria-expanded": this.menuOpen ? "true" : "false", "aria-haspopup": "true", "aria-label": `Open ${this.hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: this.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" })))))))))), this.mobileSearchBarVisible && (index.h("div", { class: "search-bar-container" }, index.h("slot", { name: "search" }))), this.hasNavigation && this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("div", { class: "navigation-tabs" }, index.h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main navigation"), index.h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, index.h("ul", { class: "navigation-item-list" }, index.h("slot", { name: "navigation" })))))))), this.navMenuVisible && (index.h("ic-navigation-menu", { version: this.version, status: this.status, class: {
+        : "false" }, index.h("ic-button", { id: "menu-button", appearance: this.foregroundColor, variant: "secondary", "aria-expanded": this.menuOpen ? "true" : "false", "aria-haspopup": "true", "aria-label": `Open ${this.hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: this.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" })))))))))), this.mobileSearchBarVisible && (index.h("div", { class: "search-bar-container" }, index.h("slot", { name: "search" }))), this.hasNavigation && this.deviceSize > helpers.DEVICE_SIZES.L && (index.h("div", { class: "navigation-tabs" }, index.h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main navigation"), index.h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, index.h("ic-horizontal-scroll", { appearance: this.foregroundColor }, index.h("ul", { class: "navigation-item-list", tabindex: "-1" }, index.h("slot", { name: "navigation" }))))))))), this.navMenuVisible && (index.h("ic-navigation-menu", { version: this.version, status: this.status, class: {
         ["inline"]: this.inline,
       } }, 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

@@ -1 +1 @@
-{"file":"ic-top-navigation.entry.cjs.js","mappings":"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","names":["getSlot","DEVICE_SIZES","getCurrentDeviceSize","getThemeForegroundColor","onComponentPropUndefinedChange","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","h","Host","IcThemeForegroundEnum"],"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/normalise.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  margin-left: calc(-1 * 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  color: var(--ic-theme-text);\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  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-left: 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: 8px;\n  padding-bottom: 8px;\n}\n\n.navigation-tabs {\n  margin-top: -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.app-title {\n  padding-right: var(--ic-space-lg);\n}\n\n:host .app-status {\n  border-radius: 80px;\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}\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: 16px;\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}\n\n.app-status-text,\n.app-version-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 96px;\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  flex: 1 auto;\n}\n\n.menu-button-container {\n  margin-left: var(--ic-space-md);\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: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n}\n\n.navigation-item-list {\n  display: flex;\n  list-style: none;\n  height: 44px;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container {\n  flex-basis: 1;\n}\n\n:host([content-aligned=\"left\"]) .app-details-container,\n:host([content-aligned=\"left\"]) .nav-panel-container,\n:host([content-aligned=\"center\"]) .nav-panel-container,\n:host([content-aligned=\"left\"]) .search-menu-container,\n:host([content-aligned=\"center\"]) .search-menu-container {\n  justify-content: flex-start;\n}\n\n:host([content-aligned=\"center\"]) .app-details-container {\n  justify-content: flex-end;\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  :host([content-aligned=\"center\"]) .top-navigation {\n    display: flex;\n    justify-content: center;\n  }\n\n  :host([content-aligned=\"left\"]) .top-navigation {\n    display: flex;\n  }\n}\n\n/* large */\n@media screen and (max-width: 1200px) {\n  :host .nav-panel-container {\n    padding-left: 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: 160px;\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: 64px;\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  :host([content-aligned=\"left\"]) .app-details-container,\n  :host([content-aligned=\"left\"]) .search-menu-container,\n  :host([content-aligned=\"center\"]) .search-menu-container,\n  :host([content-aligned=\"center\"]) .app-details-container {\n    justify-content: flex-start;\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: 40px;\n  }\n\n  .searchbox-inline {\n    display: none;\n  }\n\n  .search-bar-container {\n    margin-top: 0;\n    height: 56px;\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 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   *  Title to display\n   */\n  @Prop() appTitle!: string;\n\n  /**\n   *  The url to navigate to when title is clicked\n   */\n  @Prop() href: string = \"/\";\n\n  /**\n   *  Version info to display\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   *  Status info to display\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The alignment of the top nav 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 HTMLIcButtonElement;\n    menuBtn.setFocus();\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(\"icThemeChange\", { 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.setFocus();\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    } else {\n      this.icNavigationMenuClosed.emit();\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.setFocus();\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    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    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=\"full-width\" full-height>\n            <header role=\"banner\">\n              <div class=\"top-panel-container\">\n                <div class=\"app-details-container\">\n                  {hasTitle && (\n                    <a class=\"title-link\" href={this.href}>\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>{this.appTitle}</h1>\n                      </ic-typography>\n                    </a>\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                                height=\"24px\"\n                                viewBox=\"0 0 24 24\"\n                                width=\"24px\"\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                          <nav\n                            aria-labelledby=\"navigation-landmark-text\"\n                            aria-hidden={\n                              !this.hasNavigation || this.navMenuVisible\n                                ? \"true\"\n                                : \"false\"\n                            }\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                    <ul class=\"navigation-item-list\">\n                      <slot name=\"navigation\"></slot>\n                    </ul>\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}
+{"file":"ic-top-navigation.entry.cjs.js","mappings":"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","names":["getSlot","DEVICE_SIZES","getCurrentDeviceSize","getThemeForegroundColor","onComponentPropUndefinedChange","isSlotUsed","checkResizeObserver","onComponentRequiredPropUndefined","h","Host","IcThemeForegroundEnum"],"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  margin-left: calc(-1 * 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: -0.063rem;\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: 5rem;\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}\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: 1rem;\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}\n\n.app-status-text,\n.app-version-text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 6rem;\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.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: 0.063rem;\n  height: 0.063rem;\n  padding: 0;\n  margin: -0.063rem;\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    } else {\n      this.icNavigationMenuClosed.emit();\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                          <nav\n                            aria-labelledby=\"navigation-landmark-text\"\n                            aria-hidden={\n                              !this.hasNavigation || this.navMenuVisible\n                                ? \"true\"\n                                : \"false\"\n                            }\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}