@ukic/web-components 2.0.0-alpha.121

package/dist/components/ic-section-container2.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const icSectionContainerCss = "/*! 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}@media only screen and (max-width: 576px){:host{--section-container-margin:var(--ic-space-xs);--section-container-max-width:var(--ic-breakpoint-sm)}}@media only screen and (min-width: 577px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-md)}}@media only screen and (min-width: 769px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-lg)}}@media only screen and (min-width: 993px){:host{--section-container-margin:var(--ic-space-md);--section-container-max-width:var(--ic-breakpoint-xl)}}@media only screen and (min-width: 1201px){:host{--section-container-margin:var(--ic-space-lg);--section-container-max-width:var(--ic-breakpoint-xl)}}:host{display:block;padding-top:var(--ic-space-md);padding-bottom:var(--ic-space-md)}:host(.aligned-center){max-width:var(--section-container-max-width);margin-left:auto;margin-right:auto;padding-left:var(--section-container-margin);padding-right:var(--section-container-margin)}:host(.aligned-left){max-width:var(--section-container-max-width);margin-left:var(--section-container-margin);margin-right:auto;padding-right:var(--section-container-margin)}:host(.aligned-full-width){margin-left:var(--section-container-margin);margin-right:var(--section-container-margin)}:host(.vertical-padding){padding-top:var(--ic-space-md);padding-bottom:var(--ic-space-md)}:host(.no-vertical-padding){padding-top:0;padding-bottom:0}";
+
+const SectionContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.aligned = "left";
+    this.fullHeight = false;
+  }
+  render() {
+    const { aligned, fullHeight } = this;
+    return (h(Host, { class: {
+        ["aligned-left"]: aligned === "left",
+        ["aligned-center"]: aligned === "center",
+        ["aligned-full-width"]: aligned === "full-width",
+        ["no-vertical-padding"]: fullHeight,
+      } }, h("slot", null)));
+  }
+  static get style() { return icSectionContainerCss; }
+}, [1, "ic-section-container", {
+    "aligned": [1],
+    "fullHeight": [4, "full-height"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-section-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-section-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SectionContainer);
+      }
+      break;
+  } });
+}
+
+export { SectionContainer as S, defineCustomElement as d };
+
+//# sourceMappingURL=ic-section-container2.js.map

package/dist/components/ic-section-container2.js.map

@@ -0,0 +1 @@
+{"file":"ic-section-container2.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,yzHAAyzH;;MCQ10H,gBAAgB;;;;;mBAIK,MAAM;sBAKP,KAAK;;EAEpC,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IACrC,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,OAAO,KAAK,MAAM;QACpC,CAAC,gBAAgB,GAAG,OAAO,KAAK,QAAQ;QACxC,CAAC,oBAAoB,GAAG,OAAO,KAAK,YAAY;QAChD,CAAC,qBAAqB,GAAG,UAAU;OACpC,IAED,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/ic-section-container/ic-section-container.css?tag=ic-section-container&encapsulation=shadow","./src/components/ic-section-container/ic-section-container.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n@media only screen and (max-width: 576px) {\n  :host {\n    --section-container-margin: var(--ic-space-xs);\n    --section-container-max-width: var(--ic-breakpoint-sm);\n  }\n}\n\n@media only screen and (min-width: 577px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-md);\n  }\n}\n\n@media only screen and (min-width: 769px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-lg);\n  }\n}\n\n@media only screen and (min-width: 993px) {\n  :host {\n    --section-container-margin: var(--ic-space-md);\n    --section-container-max-width: var(--ic-breakpoint-xl);\n  }\n}\n\n@media only screen and (min-width: 1201px) {\n  :host {\n    --section-container-margin: var(--ic-space-lg);\n    --section-container-max-width: var(--ic-breakpoint-xl);\n  }\n}\n\n:host {\n  display: block;\n  padding-top: var(--ic-space-md);\n  padding-bottom: var(--ic-space-md);\n}\n\n:host(.aligned-center) {\n  max-width: var(--section-container-max-width);\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: var(--section-container-margin);\n  padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-left) {\n  max-width: var(--section-container-max-width);\n  margin-left: var(--section-container-margin);\n  margin-right: auto;\n  padding-right: var(--section-container-margin);\n}\n\n:host(.aligned-full-width) {\n  margin-left: var(--section-container-margin);\n  margin-right: var(--section-container-margin);\n}\n\n:host(.vertical-padding) {\n  padding-top: var(--ic-space-md);\n  padding-bottom: var(--ic-space-md);\n}\n\n:host(.no-vertical-padding) {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n","import { Component, Prop, Host, h } from \"@stencil/core\";\nimport { IcAlignment } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-section-container\",\n  styleUrl: \"ic-section-container.css\",\n  shadow: true,\n})\nexport class SectionContainer {\n  /**\n   * How the container should be aligned.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * Removes the standard vertical padding from the container.\n   */\n  @Prop() fullHeight?: boolean = false;\n\n  render() {\n    const { aligned, fullHeight } = this;\n    return (\n      <Host\n        class={{\n          [\"aligned-left\"]: aligned === \"left\",\n          [\"aligned-center\"]: aligned === \"center\",\n          [\"aligned-full-width\"]: aligned === \"full-width\",\n          [\"no-vertical-padding\"]: fullHeight,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-select.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcSelect extends Components.IcSelect, HTMLElement {}
+export const IcSelect: {
+  prototype: IcSelect;
+  new (): IcSelect;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-select.js

@@ -0,0 +1,253 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { u as getLabelFromValue, k as inheritAttributes, a as onComponentRequiredPropUndefined, r as renderHiddenInput, d as getInputDescribedByText, h as hasValidationStatus, v as isMobileOrTablet, I as IcThemeForegroundEnum, l as IC_INHERITED_ARIA, w as IcInformationStatus } from './helpers.js';
+import { d as defineCustomElement$a } from './ic-button2.js';
+import { d as defineCustomElement$9 } from './ic-input-component-container2.js';
+import { d as defineCustomElement$8 } from './ic-input-container2.js';
+import { d as defineCustomElement$7 } from './ic-input-label2.js';
+import { d as defineCustomElement$6 } from './ic-input-validation2.js';
+import { d as defineCustomElement$5 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$4 } from './ic-menu2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.icChange = createEvent(this, "icChange", 7);
+    this.icFocus = createEvent(this, "icFocus", 7);
+    this.icBlur = 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 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 = inheritAttributes(this.host, [
+      ...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() {
+    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;
+    renderHiddenInput(true, this.host, name, value, disabled);
+    const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
+    const describedBy = getInputDescribedByText(inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
+    return (h(Host, null, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), 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 ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(value)))) : isMobileOrTablet() ? (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), h("option", { value: "", selected: true, disabled: !this.showClearButton }, placeholder), options.map((option) => {
+      if (option.children) {
+        return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === value }, option.label)))));
+      }
+      else {
+        return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === value }, option.label));
+      }
+    }))) : (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 }, h("ic-typography", { variant: "body", class: {
+        "value-text": true,
+        placeholder: this.getLabelFromValue(value) === undefined,
+      } }, h("p", null, this.getLabelFromValue(value) || placeholder)), h("div", { class: "select-input-end" }, value && showClearButton && (h("div", { class: "clear-button-container" }, 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
+        ? IcThemeForegroundEnum.Light
+        : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { class: {
+        "expand-icon": true,
+        "expand-icon-open": this.open,
+        "expand-icon-filled": !(this.value == null || this.value === ""),
+      }, innerHTML: Expand, "aria-hidden": "true" }))))), !isMobileOrTablet() && (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 })), h("ic-input-validation", { class: { "menu-open": open }, ariaLiveMode: "polite", status: hasValidationStatus(this.validationStatus, this.disabled) ===
+        false
+        ? ""
+        : validationStatus, message: hasValidationStatus(this.validationStatus, this.disabled)
+        ? validationText
+        : "", for: inputId }))));
+  }
+  get host() { return this; }
+  static get style() { return icSelectCss; }
+}, [1, "ic-select", {
+    "label": [1],
+    "options": [16],
+    "required": [4],
+    "hideLabel": [4, "hide-label"],
+    "disabled": [516],
+    "readonly": [4],
+    "placeholder": [1],
+    "helperText": [1, "helper-text"],
+    "dense": [4],
+    "fullWidth": [4, "full-width"],
+    "validationStatus": [1, "validation-status"],
+    "validationText": [1, "validation-text"],
+    "value": [1],
+    "name": [1],
+    "showClearButton": [4, "show-clear-button"],
+    "open": [32],
+    "clearButtonFocused": [32],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-select", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-menu", "ic-tooltip", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Select);
+      }
+      break;
+    case "ic-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "ic-input-component-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "ic-input-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ic-input-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ic-input-validation":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ic-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ic-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IcSelect = Select;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcSelect, defineCustomElement };
+
+//# sourceMappingURL=ic-select.js.map

package/dist/components/ic-select.js.map

@@ -0,0 +1 @@
+{"file":"ic-select.js","mappings":"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","names":[],"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/components/ic-side-navigation.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcSideNavigation extends Components.IcSideNavigation, HTMLElement {}
+export const IcSideNavigation: {
+  prototype: IcSideNavigation;
+  new (): IcSideNavigation;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;