@ukic/web-components 2.0.0-alpha.121

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

@@ -0,0 +1,166 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3ef30d9d.js');
+const helpers = require('./helpers-9d4961dc.js');
+
+const Expand = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor" />
+</svg>
+`;
+
+const Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6666 4.27334L11.7266 3.33334L7.99998 7.06001L4.27331 3.33334L3.33331 4.27334L7.05998 8.00001L3.33331 11.7267L4.27331 12.6667L7.99998 8.94001L11.7266 12.6667L12.6666 11.7267L8.93998 8.00001L12.6666 4.27334Z" fill="currentColor" />
+</svg>
+`;
+
+const icSelectCss = "/*! 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}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible;transition:visibility 0s 149ms}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 6px center;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-input{width:100%;height:100%;padding:0 6px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:none}:host(:not([disabled])) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}:host([disabled]) .select-input{pointer-events:none}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--expand-icon-hover, var(--ic-architectural-400))}:host([disabled]) .expand-icon,:host([disabled]) .expand-icon>svg>path{color:var(--ic-architectural-200)}.expand-icon-open{transform:rotateX(180deg);color:var(--ic-action-dark)}.expand-icon-filled{padding-left:var(--ic-space-xxs);color:var(--ic-action-dark)}.placeholder{color:var(--ic-color-tertiary-text)}:host([disabled]) .value-text{color:var(--ic-architectural-200)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:var(--ic-space-xs)}.divider{width:1px;background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:1px}:host :focus-within .clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 2px var(--ic-focus-glow);border-radius:4px}.clear-button:focus *{fill:white}";
+
+let inputIds = 0;
+const Select = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.icChange = index.createEvent(this, "icChange", 7);
+    this.icFocus = index.createEvent(this, "icFocus", 7);
+    this.icBlur = index.createEvent(this, "icBlur", 7);
+    this.inputId = `ic-select-input-${inputIds++}`;
+    this.menuId = `${this.inputId}-menu`;
+    this.inheritedAttributes = {};
+    this.setTextColor = () => {
+      if (this.nativeSelectElement.selectedIndex === 0) {
+        this.nativeSelectElement.className = "placeholder";
+      }
+      else {
+        this.nativeSelectElement.className = "select-option-selected";
+      }
+    };
+    this.getLabelFromValue = (value) => {
+      return helpers.getLabelFromValue(value, this.options);
+    };
+    this.handleNativeSelectChange = () => {
+      this.icChange.emit({ value: this.nativeSelectElement.value });
+      this.setTextColor();
+    };
+    this.handleCustomSelectChange = (event) => {
+      this.icChange.emit({ value: event.detail.value });
+    };
+    this.handleMenuChange = (event) => {
+      this.open = event.detail.open;
+    };
+    this.handleMouseDown = (event) => {
+      if (!this.open) {
+        event.preventDefault();
+      }
+    };
+    this.handleClick = (event) => {
+      if (event.detail !== 0) {
+        this.menu.handleClickOpen();
+      }
+    };
+    this.handleClear = (event) => {
+      event.stopPropagation();
+      this.icChange.emit({ value: null });
+      this.customSelectElement.focus();
+    };
+    this.handleKeyDown = (event) => {
+      this.menu.handleKeyboardOpen(event);
+    };
+    this.handleClearButtonFocus = () => {
+      this.clearButtonFocused = true;
+    };
+    this.handleClearButtonBlur = () => {
+      this.clearButtonFocused = false;
+    };
+    this.onFocus = () => {
+      this.icFocus.emit();
+    };
+    this.onBlur = () => {
+      this.icBlur.emit();
+    };
+    this.label = undefined;
+    this.options = [];
+    this.required = false;
+    this.hideLabel = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.placeholder = "Select an option";
+    this.helperText = "";
+    this.dense = false;
+    this.fullWidth = false;
+    this.validationStatus = "";
+    this.validationText = "";
+    this.value = undefined;
+    this.name = this.inputId;
+    this.showClearButton = false;
+    this.open = false;
+    this.clearButtonFocused = false;
+  }
+  /**
+   * Sets focus on the input box.
+   */
+  async setFocus() {
+    if (this.nativeSelectElement) {
+      this.nativeSelectElement.focus();
+    }
+    else if (this.customSelectElement) {
+      this.customSelectElement.focus();
+    }
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = helpers.inheritAttributes(this.host, [
+      ...helpers.IC_INHERITED_ARIA,
+      "tabindex",
+      "title",
+    ]);
+    if (this.options.length > 0) {
+      this.options.map((option) => {
+        if (!option.value) {
+          option.value = option.label;
+        }
+      });
+    }
+  }
+  componentDidRender() {
+    if (this.nativeSelectElement && !this.disabled) {
+      this.setTextColor();
+    }
+  }
+  componentDidLoad() {
+    helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
+  }
+  render() {
+    const { dense, disabled, fullWidth, helperText, hideLabel, host, inputId, label, name, open, options, menuId, placeholder, readonly, required, showClearButton, validationStatus, validationText, value, } = this;
+    helpers.renderHiddenInput(true, this.host, name, value, disabled);
+    const invalid = validationStatus === helpers.IcInformationStatus.Error ? "true" : "false";
+    const describedBy = helpers.getInputDescribedByText(inputId, helperText !== "", helpers.hasValidationStatus(this.validationStatus, this.disabled)).trim();
+    return (index.h(index.Host, null, index.h("ic-input-container", { readonly: readonly }, !hideLabel && (index.h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), index.h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, dense: dense, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (index.h("ic-typography", null, index.h("p", null, this.getLabelFromValue(value)))) : helpers.isMobileOrTablet() ? (index.h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes), index.h("option", { value: "", selected: true, disabled: !this.showClearButton }, placeholder), options.map((option) => {
+      if (option.children) {
+        return (index.h("optgroup", { label: option.label }, option.children.map((option) => (index.h("option", { value: option.value, disabled: option.disabled, selected: option.value === value }, option.label)))));
+      }
+      else {
+        return (index.h("option", { value: option.value, disabled: option.disabled, selected: option.value === value }, option.label));
+      }
+    }))) : (index.h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: inputId, "aria-label": `${label}, ${this.getLabelFromValue(value) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, index.h("ic-typography", { variant: "body", class: {
+        "value-text": true,
+        placeholder: this.getLabelFromValue(value) === undefined,
+      } }, index.h("p", null, this.getLabelFromValue(value) || placeholder)), index.h("div", { class: "select-input-end" }, value && showClearButton && (index.h("div", { class: "clear-button-container" }, index.h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: dense ? "dense" : "default", variant: "icon", buttonStyle: this.clearButtonFocused
+        ? helpers.IcThemeForegroundEnum.Light
+        : helpers.IcThemeForegroundEnum.Dark }), index.h("div", { class: "divider" }))), index.h("span", { class: {
+        "expand-icon": true,
+        "expand-icon-open": this.open,
+        "expand-icon-filled": !(this.value == null || this.value === ""),
+      }, innerHTML: Expand, "aria-hidden": "true" }))))), !helpers.isMobileOrTablet() && (index.h("ic-menu", { ref: (el) => (this.menu = el), inputEl: this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, dense: dense, menuId: menuId, open: open, options: options, value: value, fullWidth: fullWidth, onMenuChange: this.handleMenuChange, onOptionSelect: this.handleCustomSelectChange, parentEl: host })), index.h("ic-input-validation", { class: { "menu-open": open }, ariaLiveMode: "polite", status: helpers.hasValidationStatus(this.validationStatus, this.disabled) ===
+        false
+        ? ""
+        : validationStatus, message: helpers.hasValidationStatus(this.validationStatus, this.disabled)
+        ? validationText
+        : "", for: inputId }))));
+  }
+  get host() { return index.getElement(this); }
+};
+Select.style = icSelectCss;
+
+exports.ic_select = Select;
+
+//# sourceMappingURL=ic-select.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-select.entry.cjs.js","mappings":"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","names":["getLabelFromValue","inheritAttributes","IC_INHERITED_ARIA","onComponentRequiredPropUndefined","renderHiddenInput","IcInformationStatus","getInputDescribedByText","hasValidationStatus","h","Host","isMobileOrTablet","IcThemeForegroundEnum"],"sources":["./src/components/ic-select/ic-select.css?tag=ic-select&encapsulation=shadow","./src/components/ic-select/ic-select.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n/**\n   * @prop --input-width: Width of the input field\n*/\n\nic-input-component-container:hover {\n  --border-color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:active {\n  --border-color: var(--ic-action-dark-active);\n\n  color: var(--ic-action-dark-active);\n}\n\nic-input-component-container.menu-open {\n  --border-color: var(--ic-architectural-400);\n\n  color: var(--ic-action-dark);\n}\n\nic-input-validation .status-icon,\nic-input-validation .statustext {\n  visibility: visible;\n  transition: visibility 0s 149ms;\n}\n\nic-input-validation.menu-open .status-icon,\nic-input-validation.menu-open .statustext {\n  visibility: hidden;\n  transition: visibility 0s;\n}\n\nselect {\n  border: 0;\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  line-height: 1.5rem;\n  letter-spacing: 0.005rem;\n  width: 100%;\n  height: 100%;\n  padding-left: 6px;\n  appearance: none;\n  background-repeat: no-repeat;\n  background-position: right 6px center;\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect option,\n.select-option-selected {\n  color: var(--ic-color-primary-text);\n}\n\nselect:disabled {\n  color: var(--ic-architectural-200);\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect:focus {\n  border: 0;\n  outline: 0;\n}\n\nselect:not([disabled]) {\n  cursor: pointer;\n}\n\n.select-input {\n  width: 100%;\n  height: 100%;\n  padding: 0 6px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  background: none;\n  border: none;\n}\n\n.select-input:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) ic-input-component-container:hover .select-input {\n  background-color: var(--ic-architectural-white);\n}\n\n:host([disabled]) .select-input {\n  pointer-events: none;\n}\n\n.expand-icon {\n  height: var(--ic-space-lg);\n  padding-left: var(--ic-space-xs);\n  color: var(--expand-icon-hover, var(--ic-architectural-400));\n}\n\n:host([disabled]) .expand-icon,\n:host([disabled]) .expand-icon > svg > path {\n  color: var(--ic-architectural-200);\n}\n\n.expand-icon-open {\n  transform: rotateX(180deg);\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-filled {\n  padding-left: var(--ic-space-xxs);\n  color: var(--ic-action-dark);\n}\n\n.placeholder {\n  color: var(--ic-color-tertiary-text);\n}\n\n:host([disabled]) .value-text {\n  color: var(--ic-architectural-200);\n}\n\n.select-input-end {\n  display: flex;\n  align-items: center;\n}\n\n.clear-button-container {\n  display: flex;\n  gap: var(--ic-space-xxs);\n  padding-left: var(--ic-space-xs);\n}\n\n.divider {\n  width: 1px;\n  background-color: var(--ic-architectural-400);\n  margin: var(--ic-space-xxs) 0;\n  border-radius: 1px;\n}\n\n:host :focus-within .clear-button:focus {\n  background-color: var(--ic-focus-blue);\n  box-shadow: inset 0 0 0 2px var(--ic-focus-glow);\n  border-radius: 4px;\n}\n\n.clear-button:focus * {\n  fill: white;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\n\nimport {\n  getInputDescribedByText,\n  getLabelFromValue,\n  hasValidationStatus,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  isMobileOrTablet,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcThemeForegroundEnum,\n  IcMenuOption,\n} from \"../../utils/types\";\nimport Expand from \"./assets/Expand.svg\";\nimport Clear from \"./assets/Clear.svg\";\nimport { IcValueEventDetail } from \"../../interface\";\n\nlet inputIds = 0;\n\n@Component({\n  tag: \"ic-select\",\n  styleUrl: \"ic-select.css\",\n  shadow: true,\n})\nexport class Select {\n  private nativeSelectElement: HTMLSelectElement;\n  private customSelectElement: HTMLButtonElement;\n  private menu: HTMLIcMenuElement;\n  private anchorEl: HTMLElement;\n\n  private inputId = `ic-select-input-${inputIds++}`;\n  private menuId = `${this.inputId}-menu`;\n\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide the possible selection options.\n   */\n  @Prop() options?: IcMenuOption[] = [];\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Specify whether the input is read only.\n   */\n  @Prop() readonly?: boolean = false;\n\n  /**\n   * Provide a placeholder value to display.\n   */\n  @Prop() placeholder?: string = \"Select an option\";\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * Specify whether dense styling is to be applied to the element.\n   */\n  @Prop() dense?: boolean = false;\n\n  /**\n   * If true, then fill width of container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Provide a validation status.\n   */\n  @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * Provide the text to display as the validation message.\n   */\n  @Prop() validationText?: string = \"\";\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop() value?: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * Display a button which clears the input when clicked.\n   */\n  @Prop() showClearButton?: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() clearButtonFocused: boolean = false;\n\n  /**\n   * Emitted when a value is selected.\n   */\n  @Event() icChange!: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when select has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when select has blur.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @Element() host!: HTMLIcSelectElement;\n\n  /**\n   * Sets focus on the input box.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.nativeSelectElement) {\n      this.nativeSelectElement.focus();\n    } else if (this.customSelectElement) {\n      this.customSelectElement.focus();\n    }\n  }\n\n  private setTextColor = (): void => {\n    if (this.nativeSelectElement.selectedIndex === 0) {\n      this.nativeSelectElement.className = \"placeholder\";\n    } else {\n      this.nativeSelectElement.className = \"select-option-selected\";\n    }\n  };\n\n  private getLabelFromValue = (value: string): string | undefined => {\n    return getLabelFromValue(value, this.options);\n  };\n\n  private handleNativeSelectChange = (): void => {\n    this.icChange.emit({ value: this.nativeSelectElement.value });\n    this.setTextColor();\n  };\n\n  private handleCustomSelectChange = (event: CustomEvent): void => {\n    this.icChange.emit({ value: event.detail.value });\n  };\n\n  private handleMenuChange = (event: CustomEvent): void => {\n    this.open = event.detail.open;\n  };\n\n  private handleMouseDown = (event: Event): void => {\n    if (!this.open) {\n      event.preventDefault();\n    }\n  };\n\n  private handleClick = (event: MouseEvent): void => {\n    if (event.detail !== 0) {\n      this.menu.handleClickOpen();\n    }\n  };\n\n  private handleClear = (event: Event): void => {\n    event.stopPropagation();\n    this.icChange.emit({ value: null });\n    this.customSelectElement.focus();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    this.menu.handleKeyboardOpen(event);\n  };\n\n  private handleClearButtonFocus = (): void => {\n    this.clearButtonFocused = true;\n  };\n\n  private handleClearButtonBlur = (): void => {\n    this.clearButtonFocused = false;\n  };\n\n  private onFocus = (): void => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = (): void => {\n    this.icBlur.emit();\n  };\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.host, [\n      ...IC_INHERITED_ARIA,\n      \"tabindex\",\n      \"title\",\n    ]);\n\n    if (this.options.length > 0) {\n      this.options.map((option) => {\n        if (!option.value) {\n          option.value = option.label;\n        }\n      });\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.nativeSelectElement && !this.disabled) {\n      this.setTextColor();\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Select\"\n    );\n  }\n\n  render() {\n    const {\n      dense,\n      disabled,\n      fullWidth,\n      helperText,\n      hideLabel,\n      host,\n      inputId,\n      label,\n      name,\n      open,\n      options,\n      menuId,\n      placeholder,\n      readonly,\n      required,\n      showClearButton,\n      validationStatus,\n      validationText,\n      value,\n    } = this;\n\n    renderHiddenInput(true, this.host, name, value, disabled);\n\n    const invalid =\n      validationStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      hasValidationStatus(this.validationStatus, this.disabled)\n    ).trim();\n\n    return (\n      <Host>\n        <ic-input-container readonly={readonly}>\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabled}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n          <ic-input-component-container\n            ref={(el) => (this.anchorEl = el)}\n            class={{ \"menu-open\": open }}\n            dense={dense}\n            fullWidth={fullWidth}\n            disabled={disabled}\n            readonly={readonly}\n            validationStatus={validationStatus}\n          >\n            {readonly ? (\n              <ic-typography>\n                <p>{this.getLabelFromValue(value)}</p>\n              </ic-typography>\n            ) : isMobileOrTablet() ? (\n              <select\n                ref={(el) => (this.nativeSelectElement = el)}\n                disabled={disabled}\n                onChange={this.handleNativeSelectChange}\n                required={required}\n                id={inputId}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                {...this.inheritedAttributes}\n              >\n                <option value=\"\" selected disabled={!this.showClearButton}>\n                  {placeholder}\n                </option>\n                {options.map((option) => {\n                  if (option.children) {\n                    return (\n                      <optgroup label={option.label}>\n                        {option.children.map((option) => (\n                          <option\n                            value={option.value}\n                            disabled={option.disabled}\n                            selected={option.value === value}\n                          >\n                            {option.label}\n                          </option>\n                        ))}\n                      </optgroup>\n                    );\n                  } else {\n                    return (\n                      <option\n                        value={option.value}\n                        disabled={option.disabled}\n                        selected={option.value === value}\n                      >\n                        {option.label}\n                      </option>\n                    );\n                  }\n                })}\n              </select>\n            ) : (\n              <button\n                class=\"select-input\"\n                ref={(el) => (this.customSelectElement = el)}\n                id={inputId}\n                aria-label={`${label}, ${\n                  this.getLabelFromValue(value) || placeholder\n                }${required ? \", required\" : \"\"}`}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                aria-haspopup=\"listbox\"\n                aria-expanded={open ? \"true\" : \"false\"}\n                aria-owns={menuId}\n                aria-controls={menuId}\n                disabled={disabled}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                onClick={this.handleClick}\n                onMouseDown={this.handleMouseDown}\n                onKeyDown={this.handleKeyDown}\n              >\n                <ic-typography\n                  variant=\"body\"\n                  class={{\n                    \"value-text\": true,\n                    placeholder: this.getLabelFromValue(value) === undefined,\n                  }}\n                >\n                  <p>{this.getLabelFromValue(value) || placeholder}</p>\n                </ic-typography>\n                <div class=\"select-input-end\">\n                  {value && showClearButton && (\n                    <div class=\"clear-button-container\">\n                      <ic-button\n                        id=\"clear-button\"\n                        aria-label=\"Clear selection\"\n                        class=\"clear-button\"\n                        innerHTML={Clear}\n                        onClick={this.handleClear}\n                        onFocus={this.handleClearButtonFocus}\n                        onBlur={this.handleClearButtonBlur}\n                        size={dense ? \"dense\" : \"default\"}\n                        variant=\"icon\"\n                        buttonStyle={\n                          this.clearButtonFocused\n                            ? IcThemeForegroundEnum.Light\n                            : IcThemeForegroundEnum.Dark\n                        }\n                      ></ic-button>\n                      <div class=\"divider\"></div>\n                    </div>\n                  )}\n                  <span\n                    class={{\n                      \"expand-icon\": true,\n                      \"expand-icon-open\": this.open,\n                      \"expand-icon-filled\": !(\n                        this.value == null || this.value === \"\"\n                      ),\n                    }}\n                    innerHTML={Expand}\n                    aria-hidden=\"true\"\n                  />\n                </div>\n              </button>\n            )}\n          </ic-input-component-container>\n          {!isMobileOrTablet() && (\n            <ic-menu\n              ref={(el) => (this.menu = el)}\n              inputEl={this.customSelectElement}\n              inputLabel={label}\n              anchorEl={this.anchorEl}\n              dense={dense}\n              menuId={menuId}\n              open={open}\n              options={options}\n              value={value}\n              fullWidth={fullWidth}\n              onMenuChange={this.handleMenuChange}\n              onOptionSelect={this.handleCustomSelectChange}\n              parentEl={host}\n            ></ic-menu>\n          )}\n          <ic-input-validation\n            class={{ \"menu-open\": open }}\n            ariaLiveMode=\"polite\"\n            status={\n              hasValidationStatus(this.validationStatus, this.disabled) ===\n              false\n                ? \"\"\n                : validationStatus\n            }\n            message={\n              hasValidationStatus(this.validationStatus, this.disabled)\n                ? validationText\n                : \"\"\n            }\n            for={inputId}\n          ></ic-input-validation>\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,384 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3ef30d9d.js');
+const closeIcon = require('./close-icon-8ccb0163.js');
+const chevronIcon = require('./chevron-icon-d175fe66.js');
+const helpers = require('./helpers-9d4961dc.js');
+
+const menuIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+  <path d="M0 0h24v24H0V0z" fill="none" />
+  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+  <title>menu icon</title>
+</svg>
+`;
+
+const icSideNavigationCss = ":host{display:block;--side-navigation-position:fixed;--side-navigation-position-left:0;--side-navigation-position-top:var(--ic-space-xxl);--side-navigation-height:var(--ic-space-xxl);--sm-side-navigation-top-bar-height:56px;--sm-side-navigation-collapsed-labels-width:96px;--sm-side-navigation-expand-transition-duration:var(\n    --ic-transition-duration-slow\n  );--side-navigation-width:320px}:host>*{box-sizing:border-box}.side-navigation{display:flex;flex-direction:column;width:var(--side-navigation-width);color:var(--ic-theme-text);position:var(--side-navigation-position);top:var(--side-navigation-position-top);left:calc(var(--side-navigation-width) * -1);bottom:0;background-color:var(--ic-theme-primary)}:host(.inline) .side-navigation{position:absolute;height:100%}:host(.anchor-right) .side-navigation{right:calc(var(--side-navigation-width) * -1)}.classification-spacing{margin-bottom:var(--ic-space-lg)}.navigation-list{padding:0;margin:0;list-style:none}.side-navigation-inner{background-color:var(--ic-theme-primary);display:flex;flex-direction:column;flex:1 1 0;overflow:auto;visibility:hidden}:host(.inline) .side-navigation-inner{flex:1}:host(.xs-menu-open) .side-navigation{transition:left var(--ic-easing-transition-slow);left:0}:host(.xs-menu-close) .side-navigation{left:calc(var(--side-navigation-width) * -1);transition:left var(--ic-easing-transition-slow)}:host(.anchor-right.xs-menu-open) .side-navigation{right:0;left:auto}:host(.anchor-right.xs-menu-close) .side-navigation{right:calc(var(--side-navigation-width) * -1);left:auto;transition:right var(--ic-easing-transition-slow)}.bottom-wrapper{border-top:var(--ic-keyline-lighten);position:sticky;bottom:0;left:0;z-index:2;box-shadow:-3px -3px 8px rgb(0 0 0 / 20%);background-color:var(--ic-theme-primary);display:flex;flex-direction:column;visibility:hidden}:host(.dark) .bottom-wrapper{border-top:var(--ic-keyline-darken)}.top-bar{display:flex;flex-direction:row;align-items:center;min-height:var(--side-navigation-height);padding:var(--ic-space-xs);box-sizing:border-box;background-color:var(--ic-theme-primary);position:fixed;top:0;left:0;right:0;border-bottom:var(--ic-keyline-darken);box-shadow:var(--ic-elevation-overlay);z-index:2;overflow:hidden;visibility:visible}:host(.inline) .top-bar{position:absolute}.top-bar.dark a:focus{box-shadow:var(--ic-border-focus)}.top-bar.light{border-bottom:var(--ic-keyline-lighten)}.app-title-wrapper{display:flex;margin-left:var(--ic-space-xs);border-left:var(--ic-keyline-darken);padding-left:var(--ic-space-xxs);color:var(--ic-theme-text);align-items:center}@media screen and (min-width: 340px){.app-title-wrapper ic-typography{margin-left:var(--ic-space-xs)}}:host .title-link:link{display:flex;align-items:center;transition:box-shadow var(--ic-easing-transition-fast),\n    background-color var(--ic-easing-transition-fast);text-decoration:none;padding:var(--ic-space-xxs);color:var(--ic-theme-text)}:host .title-link:visited,:host .title-link:active{color:var(--ic-theme-text)}:host .title-link:hover{border-radius:var(--ic-border-radius);background-color:var(--ic-theme-hover)}:host .title-link:active{background-color:var(--ic-theme-active)}:host .title-link:focus{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:none;background-color:transparent}:host .title-link ic-typography{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.app-title-wrapper ::slotted(svg){fill:var(--ic-theme-text)}.app-icon-container{display:none}.button-label{display:flex;align-items:center}.mobile-top-bar-menu-icon{display:flex}.menu-button{width:104px}.app-status-wrapper{position:absolute;right:var(--ic-space-md);top:0;bottom:0;width:auto;display:flex;align-items:center;pointer-events:none}.app-status-wrapper .app-version{max-width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-status-wrapper .app-status{border-radius:80px;background-color:var(--ic-theme-text);color:var(--ic-color-primary-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-right:var(--ic-space-xs);max-width:100px}.app-status-wrapper .app-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}:host(.dark) .app-status-wrapper .app-status{color:var(--ic-color-white-text)}.navigation-landmark-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden}::slotted(ic-navigation-group){--navigation-group-height:44px;--navigation-group-width:100%;--navigation-group-justify-content:space-between;--navigation-group-hover:var(--ic-theme-hover);--navigation-group-text-hover:var(--ic-theme-text);--navigation-item-child-height:56px;--navigation-item-child-active:var(--ic-action-dark-bg-active);--navigation-item-child-color:var(--ic-theme-text);--navigation-group-expand-toggle-padding:4px}::slotted(ic-navigation-item),::slotted(ic-navigation-group){--navigation-item-height:56px;--navigation-item-width:auto;--navigation-item-justify-content:flex-start}.bottom-side-nav{position:relative;align-content:flex-end;height:var(--sm-side-navigation-top-bar-height)}.primary-navigation{flex:1;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.primary-navigation::-webkit-scrollbar{display:none}.primary-navigation,.secondary-navigation{overflow-x:hidden}.bottom-side-nav .menu-expand-button{display:none}.menu-visibility-visible{visibility:visible}.menu-visibility-hidden{visibility:hidden}@media screen and (min-width: 340px){.app-icon-container{display:flex}}@media screen and (min-width: 577px){:host{display:flex;flex-direction:column;height:100vh;position:var(--side-navigation-position);left:0;top:0;bottom:0}:host(.inline){position:absolute}:host(.static){position:relative;left:auto;top:auto;bottom:auto}.app-icon-container{padding:var(--ic-space-xxs) 0}.top-bar{--side-navigation-height:var(--sm-side-navigation-top-bar-height);position:relative;padding:0;box-shadow:-3px 3px 8px rgb(0 0 0 / 20%)}:host(.inline) .top-bar{position:relative}:host(.anchor-right) .top-bar{box-shadow:3px 3px 8px rgb(0 0 0 / 20%)}:host(.anchor-right) .bottom-wrapper{box-shadow:3px -3px 8px rgb(0 0 0 / 20%)}.side-navigation,.top-bar{width:var(--sm-side-navigation-top-bar-height)}:host(.sm-collapsed){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed.collapsed-labels){width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-expanded){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow);box-shadow:var(--ic-elevation-overlay)}.side-navigation{--side-navigation-position-top:0;flex:1;position:relative;top:auto;left:auto;bottom:auto}:host(.inline) .side-navigation{position:relative}:host(.anchor-right) .side-navigation{left:auto;right:0}.side-navigation-inner{width:100%;visibility:visible}.bottom-wrapper{visibility:visible}.app-title-wrapper{margin-left:0;border-left:none;padding:var(--ic-space-sm)}.app-title-wrapper ::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg)}.app-title-wrapper ic-typography{margin-left:var(--ic-space-md);font-weight:var(--ic-font-weight-semibold)}:host(.sm-collapsed) .app-title-wrapper ic-typography{position:absolute;left:-9999px;opacity:0;transition:opacity var(--ic-easing-transition-slow)}:host(.sm-expanded) ic-typography{position:relative;left:0}:host(.sm-expanded) :is(.side-navigation,.top-bar){width:var(--side-navigation-width);transition:width var(--ic-easing-transition-slow)}:host(.sm-collapsed) :is(.side-navigation,.top-bar){width:var(--sm-side-navigation-top-bar-height);transition:width var(--ic-easing-transition-slow)}:host(.anchor-right.sm-expanded) :is(.side-navigation,.top-bar){left:auto;right:0}.app-status-wrapper,:host(.sm-collapsed) .app-status-wrapper{display:none}:host(.sm-expanded) .app-status-wrapper{display:flex}.bottom-side-nav{justify-items:flex-end;display:flex;flex-direction:column}.bottom-side-nav .menu-expand-button{padding-left:var(--ic-space-md);height:var(--sm-side-navigation-top-bar-height);width:100%;color:var(--ic-theme-text);background-color:transparent;outline:none;border:none;cursor:pointer;display:flex;transition:var(--ic-easing-transition-fast)}.bottom-side-nav .menu-expand-button svg{justify-items:flex-start;align-self:center}.bottom-side-nav .menu-expand-button:hover{background-color:var(--ic-theme-hover)}:host .bottom-side-nav{outline:none}:host .bottom-side-nav .menu-expand-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset);background-color:transparent}:host(.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1);transition:transform var(--ic-easing-transition-slow)}:host(.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1);transition:transform var(--ic-easing-transition-slow)}:host(.anchor-right.sm-collapsed) .bottom-side-nav .menu-expand-button svg{transform:scaleX(-1)}:host(.anchor-right.sm-expanded) .bottom-side-nav .menu-expand-button svg{transform:scaleX(1)}:host(.sm-collapsed) ::slotted(ic-navigation-item){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-item),:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-item-label-opacity:0}:host(.sm-expanded) ::slotted(ic-navigation-item),:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-item-label-opacity:1}:host(.sm-collapsed) ::slotted(ic-navigation-group){--navigation-group-title-position:absolute;--navigation-group-title-position-left:-9999px;--navigation-group-title-opacity:none}:host(.sm-expanded) ::slotted(ic-navigation-group){--navigation-group-title-position:relative;--navigation-group-title-position-left:0;--navigation-group-expand-toggle-padding:4px;--navigation-group-title-opacity:flex}:host(.sm-collapsed.collapsed-labels) .side-navigation,:host(.sm-collapsed.collapsed-labels) .top-bar{width:var(--sm-side-navigation-collapsed-labels-width)}:host(.sm-collapsed.collapsed-labels) .menu-expand-button{padding:0}:host(.sm-collapsed.collapsed-labels) .app-title-wrapper{width:100%;justify-content:center}:host(.sm-collapsed.collapsed-labels) ::slotted(ic-navigation-group){--navigation-group-justify-content:center;--navigation-item-label-opacity:1;--navigation-group-item-min-width:100%;--navigation-group-expand-toggle-padding:16px}:host(.collapsed-labels) .bottom-side-nav .menu-expand-button{justify-content:center}:host .collapsed-icon-labels-start{visibility:hidden;opacity:0}:host .collapsed-icon-labels-end{visibility:visible;opacity:1;transition:visibility 0s, opacity var(--ic-easing-transition-slow)}}@media screen and (min-width: 993px){:host{position:relative;left:auto;top:auto;bottom:auto}:host(.inline){position:relative}:host(.sm-expanded){box-shadow:none}}";
+
+const SideNavigation = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ANIMATION_DURATION = parseInt(helpers.getCssProperty("--ic-transition-duration")) || 0;
+    this.emitSideNavigationExpanded = (objDetails) => {
+      const event = new CustomEvent("sideNavExpanded", {
+        detail: {
+          sideNavExpanded: objDetails.sideNavExpanded,
+          sideNavMobile: objDetails.sideNavMobile,
+        },
+      });
+      this.el.dispatchEvent(event);
+    };
+    this.toggleMenu = () => {
+      this.menuOpen = !this.menuOpen;
+      this.setMobileMenuAriaAttributes(this.menuOpen);
+      this.setToggleMenuFlyoutMenuVisibility(this.menuOpen);
+      this.emitSideNavigationExpanded({
+        sideNavExpanded: this.menuOpen,
+        sideNavMobile: true,
+      });
+    };
+    this.setToggleMenuFlyoutMenuVisibility = (menuOpen) => {
+      const sideNav = this.el.shadowRoot.querySelector("#side-navigation");
+      const sideNavInner = sideNav.querySelector(".side-navigation-inner");
+      const bottomWrapper = sideNav.querySelector(".bottom-wrapper");
+      if (menuOpen) {
+        bottomWrapper.classList.add("menu-visibility-visible");
+        sideNavInner.classList.add("menu-visibility-visible");
+      }
+      else {
+        setTimeout(() => {
+          sideNavInner.classList.remove("menu-visibility-visible");
+          bottomWrapper.classList.remove("menu-visibility-visible");
+        }, this.ANIMATION_DURATION);
+      }
+    };
+    this.setMobileMenuAriaAttributes = (menuOpen) => {
+      const nativeButton = this.el.shadowRoot
+        .querySelector("#menu-button")
+        .shadowRoot.querySelector("button");
+      if (menuOpen) {
+        nativeButton.setAttribute("aria-expanded", "true");
+        nativeButton.setAttribute("aria-label", "Close navigation menu");
+      }
+      else {
+        nativeButton.setAttribute("aria-expanded", "false");
+        nativeButton.setAttribute("aria-label", "Open navigation menu");
+      }
+    };
+    this.setAndRemoveNoWrapAfterMenuExpanded = () => {
+      const appTitle = this.el.shadowRoot.querySelector(".title-link ic-typography");
+      appTitle.classList.add("ic-typography-no-wrap");
+      setTimeout(() => {
+        appTitle.classList.remove("ic-typography-no-wrap");
+      }, this.ANIMATION_DURATION);
+    };
+    this.toggleMenuExpanded = () => {
+      this.menuExpanded = !this.menuExpanded;
+      if (this.menuExpanded) {
+        this.setAndRemoveNoWrapAfterMenuExpanded();
+      }
+      this.arrangeSlottedNavigationItem(this.menuExpanded);
+      this.displayTooltipWithExpandedLongLabel(this.menuExpanded);
+      if (this.collapsedIconLabels) {
+        this.animateCollapsedIconLabels();
+      }
+      this.emitSideNavigationExpanded({ sideNavExpanded: this.menuExpanded });
+    };
+    /**
+     * In order to style nested slotted elements (e.g. using React Router components), this method
+     * rearranges the a tag and labels and adds inline styling expand/collaped animations as external CSS classes are not
+     * do not take affect.
+     * @param menuExpanded boolean - true or false depending on seide navigation state
+     */
+    this.arrangeSlottedNavigationItem = (menuExpanded) => {
+      const navItems = this.el.querySelectorAll("ic-navigation-item");
+      navItems.forEach((navItem) => {
+        const hasUsedSlot = helpers.isSlotUsed(navItem, "navigation-item");
+        if (hasUsedSlot) {
+          const navItemSlot = navItem.querySelector("[slot='navigation-item']");
+          const iconWrapper = document.createElement("div");
+          const icon = navItemSlot.querySelector("svg");
+          const label = navItem.textContent.trim();
+          const icTypography = document.createElement("ic-typography");
+          icTypography.classList.add("ic-typography-label", "hydrated", "navigation-item-side-nav-slotted-text");
+          iconWrapper.className = "icon-container";
+          iconWrapper.append(icon);
+          navItemSlot.textContent = "";
+          icTypography.textContent = label;
+          navItemSlot.append(iconWrapper);
+          navItemSlot.append(icTypography);
+          if (this.collapsedIconLabels) {
+            this.styleSlottedCollapsedIconLabels(menuExpanded, icTypography);
+          }
+          else {
+            this.styleSlottedIconLabels(menuExpanded, icTypography);
+          }
+        }
+      });
+    };
+    this.styleSlottedCollapsedIconLabels = (menuExpanded, icTypography) => {
+      if (menuExpanded) {
+        icTypography.style.marginTop = "0";
+        icTypography.style.whiteSpace = "nowrap";
+        icTypography.style.overflow = "hidden";
+        icTypography.style.textOverflow = "ellipsis";
+      }
+      else {
+        icTypography.style.marginTop = "10px";
+        icTypography.style.whiteSpace = "nowrap";
+        icTypography.style.overflow = "hidden";
+        icTypography.style.textOverflow = "ellipsis";
+      }
+    };
+    this.styleSlottedIconLabels = (menuExpanded, icTypography) => {
+      if (menuExpanded) {
+        icTypography.style.opacity = "1";
+        icTypography.style.visibility = "visible";
+        icTypography.style.transition =
+          "visibility 0s, opacity var(--ic-easing-transition-slow)";
+      }
+      else {
+        icTypography.style.opacity = "0";
+        icTypography.style.visibility = "hidden";
+        icTypography.style.transition =
+          "visibility 0s, opacity var(--ic-easing-transition-slow)";
+      }
+    };
+    this.animateCollapsedIconLabels = () => {
+      const primaryNavigationWrapper = this.el.shadowRoot.querySelector(".primary-navigation");
+      const secondaryNavigationWrapper = this.el.shadowRoot.querySelector(".bottom-wrapper > .secondary-navigation");
+      if (primaryNavigationWrapper) {
+        primaryNavigationWrapper.classList.remove("collapsed-icon-labels-end");
+        primaryNavigationWrapper.classList.add("collapsed-icon-labels-start");
+      }
+      if (secondaryNavigationWrapper) {
+        secondaryNavigationWrapper.classList.remove("collapsed-icon-labels-end");
+        secondaryNavigationWrapper.classList.add("collapsed-icon-labels-start");
+      }
+      this.el.addEventListener("transitionend", () => {
+        if (primaryNavigationWrapper) {
+          primaryNavigationWrapper.classList.remove("collapsed-icon-labels-start");
+          primaryNavigationWrapper.classList.add("collapsed-icon-labels-end");
+        }
+        if (secondaryNavigationWrapper) {
+          secondaryNavigationWrapper.classList.remove("collapsed-icon-labels-start");
+          secondaryNavigationWrapper.classList.add("collapsed-icon-labels-end");
+        }
+      });
+    };
+    this.paddingIconWidth = (navItems) => {
+      const navItemLink = (navItems[0].shadowRoot &&
+        navItems[0].shadowRoot.querySelector("ic-tooltip a")) ||
+        navItems[0].querySelector("a");
+      const navItemSVG = navItems[0].querySelector("svg");
+      const navStyles = {
+        gap: window.getComputedStyle(navItemLink).gap,
+        iconWidth: window.getComputedStyle(navItemSVG).width,
+        paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,
+      };
+      return Object.values(navStyles).reduce((prev, curr) => {
+        return (prev += parseInt(curr));
+      }, 0);
+    };
+    this.displayTooltipWithExpandedLongLabel = (menuExpanded) => {
+      let timer;
+      if (menuExpanded) {
+        timer = setTimeout(() => {
+          const sideNavWidth = this.el.clientWidth;
+          const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+          const paddingIconDelta = navigationItems.length
+            ? this.paddingIconWidth(navigationItems)
+            : 0;
+          navigationItems.forEach((navigationItem) => {
+            var _a, _b;
+            const icTypographyScrollWidth = ((_a = (navigationItem.shadowRoot &&
+              navigationItem.shadowRoot.querySelector("ic-tooltip .link ic-typography.ic-typography-label"))) === null || _a === void 0 ? void 0 : _a.scrollWidth) ||
+              ((_b = navigationItem.querySelector("ic-typography.ic-typography-label")) === null || _b === void 0 ? void 0 : _b.scrollWidth);
+            if (icTypographyScrollWidth > sideNavWidth - paddingIconDelta) {
+              navigationItem.setAttribute("display-navigation-tooltip", "true");
+            }
+          });
+        }, this.ANIMATION_DURATION);
+      }
+      else {
+        clearTimeout(timer);
+        const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+        navigationItems.forEach((navigationItem) => {
+          navigationItem.setAttribute("display-navigation-tooltip", "false");
+        });
+      }
+    };
+    this.setMenuExpanded = (expanded) => {
+      this.menuExpanded = expanded;
+    };
+    /**
+     * As the mobile top bar is fixed, a padding top is required
+     * to push main content down the height of the mobile top bar
+     * @param value - padding-top css value
+     */
+    this.setParentPaddingTop = (value) => {
+      this.el.parentElement.style.paddingTop = value;
+    };
+    this.setParentPaddingLeft = (value) => {
+      this.el.parentElement.style.paddingLeft = value;
+    };
+    this.resizeObserver = null;
+    this.resizeObserverCallback = (currSize) => {
+      if (currSize !== this.deviceSize) {
+        this.deviceSize = currSize;
+        if (currSize === helpers.DEVICE_SIZES.S) {
+          if (!this.disableAutoParentStyling) {
+            const topBarHeight = this.el.shadowRoot.querySelector(".top-bar").scrollHeight;
+            this.setParentPaddingTop(`${topBarHeight}px`);
+            this.setParentPaddingLeft("0");
+          }
+          this.emitSideNavigationExpanded({
+            sideNavExpanded: this.menuExpanded,
+            sideNavMobile: true,
+          });
+        }
+        else {
+          if (!this.disableAutoParentStyling) {
+            this.setParentPaddingTop("0");
+          }
+          this.emitSideNavigationExpanded({
+            sideNavExpanded: this.menuExpanded,
+            sideNavMobile: false,
+          });
+        }
+        if (currSize > helpers.DEVICE_SIZES.L) {
+          if (!this.disableAutoParentStyling) {
+            this.setParentPaddingTop("0");
+            this.setParentPaddingLeft("0");
+          }
+        }
+        else if (currSize > helpers.DEVICE_SIZES.S &&
+          currSize <= helpers.DEVICE_SIZES.L &&
+          !this.static &&
+          !this.disableAutoParentStyling) {
+          if (this.collapsedIconLabels) {
+            this.setParentPaddingLeft("calc(var(--ic-space-xxl) * 2)");
+          }
+          else {
+            this.setParentPaddingLeft("calc(var(--ic-space-xxl) + var(--ic-space-xs))");
+          }
+        }
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        const currSize = helpers.getCurrentDeviceSize();
+        this.deviceSizeAppTitle = currSize;
+        this.resizeObserverCallback(currSize);
+      });
+      this.resizeObserver.observe(document.body, { box: "content-box" });
+    };
+    this.setCollapsedIconLabels = () => {
+      const navigationItems = Array.from(this.el.querySelectorAll("ic-navigation-item"));
+      navigationItems.forEach((navigationItem) => {
+        navigationItem.setAttribute("collapsed-icon-label", "true");
+      });
+    };
+    this.styleSlottedCollapsedIconLabel = () => {
+      const dynamicSlottedIcTypographyComps = Array.from(this.el.querySelectorAll(".navigation-item-side-nav-slotted-text"));
+      dynamicSlottedIcTypographyComps.forEach((icTypography) => {
+        var _a, _b;
+        if ((_b = (_a = icTypography === null || icTypography === void 0 ? void 0 : icTypography.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("navigation-item-side-nav-collapsed-with-label")) {
+          icTypography.style.whiteSpace = "nowrap";
+          icTypography.style.overflow = "hidden";
+          icTypography.style.textOverflow = "ellipsis";
+          icTypography.style.marginTop = "10px";
+        }
+      });
+    };
+    this.renderTopBar = ({ isSDevice, foregroundColor, menuOpen, href, isAppNameSubtitleVariant, appTitle, }) => (index.h("div", { class: {
+        "top-bar": true,
+        [this.foregroundColor]: true,
+      } }, isSDevice && (index.h("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, index.h("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "dense", "full-width": "true", buttonStyle: foregroundColor, onClick: this.toggleMenu, "aria-owns": "side-navigation", "aria-haspopup": "true", "aria-expanded": "false" }, index.h("span", { class: "mobile-top-bar-menu-icon", slot: "icon", innerHTML: menuOpen ? closeIcon.closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), index.h("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), index.h("div", { class: "app-title-wrapper" }, index.h("a", { href: href, class: "title-link" }, index.h("div", { class: "app-icon-container", "aria-hidden": "true" }, index.h("slot", { name: "app-icon" })), index.h("ic-typography", { variant: isAppNameSubtitleVariant ? "subtitle-small" : "h3" }, appTitle)))));
+    this.appTitle = undefined;
+    this.status = undefined;
+    this.version = undefined;
+    this.expanded = false;
+    this.href = "/";
+    this.static = false;
+    this.collapsedIconLabels = false;
+    this.inline = false;
+    this.disableAutoParentStyling = false;
+    this.foregroundColor = helpers.getThemeForegroundColor();
+    this.menuOpen = false;
+    this.menuExpanded = false;
+    this.deviceSize = helpers.DEVICE_SIZES.XL;
+    this.deviceSizeAppTitle = helpers.DEVICE_SIZES.S;
+    this.hasSecondaryNavigation = false;
+  }
+  themeChangeHandler(ev) {
+    const theme = ev.detail;
+    this.foregroundColor = theme.mode;
+  }
+  componentWillLoad() {
+    if (this.expanded) {
+      this.setMenuExpanded(true);
+    }
+    else {
+      this.setMenuExpanded(false);
+    }
+    if (this.collapsedIconLabels) {
+      this.setCollapsedIconLabels();
+    }
+    this.hasSecondaryNavigation = helpers.isSlotUsed(this.el, "secondary-navigation");
+  }
+  componentDidLoad() {
+    this.emitSideNavigationExpanded({
+      sideNavExpanded: this.menuExpanded,
+      sideNavMobile: this.deviceSize === helpers.DEVICE_SIZES.S,
+    });
+    helpers.checkResizeObserver(this.runResizeObserver);
+    this.arrangeSlottedNavigationItem();
+    this.styleSlottedCollapsedIconLabel();
+    this.displayTooltipWithExpandedLongLabel(this.menuExpanded);
+    helpers.onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Side Navigation");
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  render() {
+    const { appTitle, menuOpen, foregroundColor, menuExpanded, href, status, version, collapsedIconLabels, inline, } = this;
+    const isSDevice = this.deviceSize === helpers.DEVICE_SIZES.S;
+    const isMdDevice = this.deviceSize === helpers.DEVICE_SIZES.M;
+    const isLgDevice = this.deviceSize >= helpers.DEVICE_SIZES.L;
+    const isAppNameSubtitleVariant = this.deviceSizeAppTitle === helpers.DEVICE_SIZES.S;
+    const displayExpandBtn = isMdDevice || (isLgDevice && !this.static);
+    const topBarProps = {
+      isSDevice,
+      foregroundColor,
+      menuOpen,
+      href,
+      isAppNameSubtitleVariant,
+      appTitle,
+    };
+    return (index.h(index.Host, { class: {
+        "xs-menu-open": menuOpen && isSDevice,
+        "xs-menu-close": !menuOpen && isSDevice,
+        "sm-collapsed": !isSDevice && !menuExpanded,
+        "sm-expanded": !isSDevice && menuExpanded,
+        [helpers.IcThemeForegroundEnum.Dark]: foregroundColor === helpers.IcThemeForegroundEnum.Dark,
+        ["collapsed-labels"]: !isSDevice && !menuExpanded && collapsedIconLabels,
+        ["static"]: this.static,
+        ["inline"]: inline,
+      } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), index.h("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), index.h("div", { class: "side-navigation-inner" }, helpers.isSlotUsed(this.el, "primary-navigation") && (index.h("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, index.h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), index.h("ul", { class: "navigation-list" }, index.h("slot", { name: "primary-navigation" }))))), index.h("div", { class: {
+        ["bottom-wrapper"]: true,
+        ["classification-spacing"]: helpers.hasClassificationBanner(),
+      } }, helpers.isSlotUsed(this.el, "secondary-navigation") && (index.h("nav", { class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, index.h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), index.h("ul", { class: "navigation-list" }, index.h("slot", { name: "secondary-navigation" })))), index.h("div", { class: "bottom-side-nav" }, this.hasSecondaryNavigation && index.h("ic-divider", null), displayExpandBtn && (index.h("button", { class: "menu-expand-button", innerHTML: chevronIcon.chevronIcon, onClick: this.toggleMenuExpanded, "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), index.h("div", { class: "app-status-wrapper" }, status !== "" && (index.h("div", { class: {
+        ["app-status"]: true,
+      } }, index.h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version !== "" && (index.h("ic-typography", { variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+  }
+  get el() { return index.getElement(this); }
+};
+SideNavigation.style = icSideNavigationCss;
+
+exports.ic_side_navigation = SideNavigation;
+
+//# sourceMappingURL=ic-side-navigation.cjs.entry.js.map