@six-group/ui-library 0.0.0-insider.bc75fdf → 0.0.0-insider.bea5ab5

package/dist/components/six-root.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixRoot extends Components.SixRoot, HTMLElement {}
 export const SixRoot: {
-  prototype: SixRoot;
-  new (): SixRoot;
+    prototype: SixRoot;
+    new (): SixRoot;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-root.js

@@ -1,77 +1,51 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './set-attributes2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$3 } from './six-icon2.js';
 import { d as defineCustomElement$2 } from './six-stage-indicator2.js';
 
 const sixRootCss = ":host{display:block;overflow:hidden;height:inherit}.six-root{display:grid;grid-template:auto 1fr auto/auto 1fr auto;height:100%}.six-root__container--padded{padding:var(--six-spacing-xxx-large)}.six-root__left-sidebar{height:100%;overflow:scroll;grid-column:1/2}.six-root__right-sidebar{height:100%;overflow:scroll;grid-column:3/4}.six-root nav{overflow:hidden}header{grid-column:1/4;position:sticky;top:0;z-index:var(--six-z-index-header);margin-right:2px}main{height:100%;display:flex;flex-direction:column;justify-content:space-between;grid-column:2/3;overflow:auto}footer{grid-column:1/4}";
+const SixRootStyle0 = sixRootCss;
 
 const SixRoot$1 = /*@__PURE__*/ proxyCustomElement(class SixRoot extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.collapsedEvent = createEvent(this, "six-root-collapsed", 7);
-    this.resizeObserver = new ResizeObserver(([host]) => {
-      const { width } = host.contentRect;
-      this.collapse = width < this.breakpoint;
-    });
-    this.breakpoint = 1024;
-    this.padded = true;
-    this.stage = null;
-    this.version = '';
-    this.collapse = false;
-  }
-  handleCollapsed(collapsed) {
-    this.collapsedEvent.emit({ collapsed });
-  }
-  componentWillLoad() {
-    this.resizeObserver.observe(this.host);
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
-  }
-  render() {
-    return (h("host", { class: "six-root" }, h("header", { part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { name: "header" })), h("nav", { class: "six-root__left-sidebar", part: "left-sidebar" }, h("set-attributes", { value: { open: !this.collapse } }, h("slot", { name: "left-sidebar" }))), h("main", { part: "main" }, h("div", { class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { name: "main" })), h("div", { class: "six-root__footer" }, h("slot", { name: "footer" }))), h("nav", { class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { name: "right-sidebar" }))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "collapse": ["handleCollapsed"]
-  }; }
-  static get style() { return sixRootCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.padded = true;
+        this.stage = null;
+        this.version = '';
+    }
+    render() {
+        return (h("host", { key: 'afa4ab3690aae98f49bc74f2f78fbc7d7c804cde', class: "six-root" }, h("header", { key: '256dc2baecc083a3fe7fade7f0238d149123c465', part: "header" }, this.stage && h("six-stage-indicator", { key: 'f53065557a13d9513cc654306fd6e17eea28f8af', stage: this.stage }, this.version), h("slot", { key: '4458f26a10c2c550b5d3ad1adbca8067e1376cab', name: "header" })), h("nav", { key: '86824c3286c747d3bd8e235af341ed5671c24ec4', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: '7eac3c269e294cbd8f0c98f045c8791be10b8aef', name: "left-sidebar" })), h("main", { key: 'cf1b6c43cd996f0673e8990a6d78409af51eea41', part: "main" }, h("div", { key: 'f95ec5b509e1834cb5c0f8abaac498409753105f', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: 'd13f71d95d83748eedf59b43334892e2fd842e7c', name: "main" })), h("div", { key: '2c76a92a46db1d09cea6b09eea6bc8a7c81b6536', class: "six-root__footer" }, h("slot", { key: '9d0aa991bcb43a360c770c9d63b404799dfb94ff', name: "footer" }))), h("nav", { key: '7af5df12fe56e6414627608fd704507d949ce1ad', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '621b9a7c7d9db229a9bb8e82680ee2d41e245883', name: "right-sidebar" }))));
+    }
+    get host() { return this; }
+    static get style() { return SixRootStyle0; }
 }, [1, "six-root", {
-    "breakpoint": [2],
-    "padded": [4],
-    "stage": [1],
-    "version": [1],
-    "collapse": [32]
-  }]);
+        "padded": [4],
+        "stage": [1],
+        "version": [1]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-root", "set-attributes", "six-icon", "six-stage-indicator"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-root":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixRoot$1);
-      }
-      break;
-    case "set-attributes":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "six-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "six-stage-indicator":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-root", "six-icon", "six-stage-indicator"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-root":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixRoot$1);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-stage-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const SixRoot = SixRoot$1;

package/dist/components/six-root.js.map

@@ -1 +1 @@
-{"file":"six-root.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,klBAAklB;;MCuBxlBA,SAAO;;;;;;IAoBV,mBAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;MACjD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;KACzC,CAAC,CAAC;sBAnBkB,IAAI;kBAGR,IAAI;iBAGM,IAAI;mBAGb,EAAE;oBAKA,KAAK;;EAQzB,eAAe,CAAC,SAAkB;IAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACxC;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACE,YAAM,KAAK,EAAC,UAAU,IACpB,cAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAI,2BAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3F,YAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACT,WAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrD,sBAAgB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,IAC7C,YAAM,IAAI,EAAC,cAAc,GAAG,CACb,CACb,EACN,YAAM,IAAI,EAAC,MAAM,IACf,WAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvG,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,WAAK,KAAK,EAAC,kBAAkB,IAC3B,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP,WAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvD,YAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixRoot"],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  overflow: hidden;\n  height: inherit;\n}\n\n.six-root {\n  display: grid;\n  grid-template: auto 1fr auto / auto 1fr auto;\n  height: 100%;\n\n  &__container {\n    &--padded {\n      padding: var(--six-spacing-xxx-large);\n    }\n  }\n\n  &__left-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 1 / 2;\n  }\n\n  &__right-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 3 / 4;\n  }\n\n  nav {\n    overflow: hidden;\n  }\n}\n\nheader {\n  grid-column: 1 / 4;\n  position: sticky;\n  top: 0;\n  z-index: var(--six-z-index-header);\n  // border fix\n  margin-right: 2px;\n}\n\nmain {\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  grid-column: 2 / 3;\n  overflow: auto;\n}\n\nfooter {\n  grid-column: 1 / 4;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\nexport interface SixRootCollapsedPayload {\n  collapsed: boolean;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Breakpoint for smaller screens when the right sidebar is collapsed by default. */\n  @Prop() breakpoint = 1024;\n\n  /** Defines whether the content section should be padded */\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  /** Emitted when display size is updated. */\n  @Event({ eventName: 'six-root-collapsed' }) collapsedEvent!: EventEmitter<SixRootCollapsedPayload>;\n\n  @State() collapse = false;\n\n  private resizeObserver = new ResizeObserver(([host]) => {\n    const { width } = host.contentRect;\n    this.collapse = width < this.breakpoint;\n  });\n\n  @Watch('collapse')\n  handleCollapsed(collapsed: boolean) {\n    this.collapsedEvent.emit({ collapsed });\n  }\n\n  componentWillLoad() {\n    this.resizeObserver.observe(this.host);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver.disconnect();\n  }\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <set-attributes value={{ open: !this.collapse }}>\n            <slot name=\"left-sidebar\" />\n          </set-attributes>\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-root.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,klBAAklB,CAAC;AACtmB,sBAAe,UAAU;;MCkBZA,SAAO;;;;;sBAKD,IAAI;qBAGM,IAAI;uBAGb,EAAE;;IAEpB,MAAM;QACJ,QACE,6DAAM,KAAK,EAAC,UAAU,IACpB,+DAAQ,IAAI,EAAC,QAAQ,IAClB,IAAI,CAAC,KAAK,IAAI,4EAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB,EAC3F,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf,EACT,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc,IACrD,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,EACN,6DAAM,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW,IACvG,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,EACP,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe,IACvD,6DAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixRoot"],"sources":["src/components/six-root/six-root.scss?tag=six-root&encapsulation=shadow","src/components/six-root/six-root.tsx"],"sourcesContent":["@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  overflow: hidden;\n  height: inherit;\n}\n\n.six-root {\n  display: grid;\n  grid-template: auto 1fr auto / auto 1fr auto;\n  height: 100%;\n\n  &__container {\n    &--padded {\n      padding: var(--six-spacing-xxx-large);\n    }\n  }\n\n  &__left-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 1 / 2;\n  }\n\n  &__right-sidebar {\n    height: 100%;\n    overflow: scroll;\n    grid-column: 3 / 4;\n  }\n\n  nav {\n    overflow: hidden;\n  }\n}\n\nheader {\n  grid-column: 1 / 4;\n  position: sticky;\n  top: 0;\n  z-index: var(--six-z-index-header);\n  // border fix\n  margin-right: 2px;\n}\n\nmain {\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  grid-column: 2 / 3;\n  overflow: auto;\n}\n\nfooter {\n  grid-column: 1 / 4;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n */\n\n@Component({\n  tag: 'six-root',\n  styleUrl: 'six-root.scss',\n  shadow: true,\n})\nexport class SixRoot {\n  @Element() host!: HTMLSixRootElement;\n\n  /** Defines whether the content section should be padded */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() padded = true;\n\n  /** Defines the stage of the application*/\n  @Prop() stage: StageType = null;\n\n  /** Defines the version of the application*/\n  @Prop() version = '';\n\n  render() {\n    return (\n      <host class=\"six-root\">\n        <header part=\"header\">\n          {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n          <slot name=\"header\" />\n        </header>\n        <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n          <slot name=\"left-sidebar\" />\n        </nav>\n        <main part=\"main\">\n          <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n            <slot name=\"main\" />\n          </div>\n          <div class=\"six-root__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </main>\n        <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n          <slot name=\"right-sidebar\" />\n        </nav>\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-search-field.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixSearchField extends Components.SixSearchField, HTMLElement {}
 export const SixSearchField: {
-  prototype: SixSearchField;
-  new (): SixSearchField;
+    prototype: SixSearchField;
+    new (): SixSearchField;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-search-field.js

@@ -5,87 +5,90 @@ import { d as defineCustomElement$4 } from './six-error2.js';
 import { d as defineCustomElement$3 } from './six-icon2.js';
 import { d as defineCustomElement$2 } from './six-input2.js';
 
-const sixSearchFieldCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";
+const sixSearchFieldCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";
+const SixSearchFieldStyle0 = sixSearchFieldCss;
 
 const SixSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SixSearchField extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.searchFieldChange = createEvent(this, "six-search-field-change", 7);
-    this.eventListeners = new EventListeners();
-    this.handleInputChange = () => {
-      if (this.inputElement != null) {
-        this.searchFieldChange.emit({ value: this.inputElement.value });
-      }
-    };
-    this.placeholder = undefined;
-    this.debounce = DEFAULT_DEBOUNCE_FAST;
-    this.disabled = false;
-    this.value = '';
-    this.clearable = false;
-  }
-  handleValueChange() {
-    if (this.inputElement != null) {
-      this.inputElement.value = this.value;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.searchFieldChange = createEvent(this, "six-search-field-change", 7);
+        this.eventListeners = new EventListeners();
+        this.handleInputChange = () => {
+            if (this.inputElement != null) {
+                this.searchFieldChange.emit({ value: this.inputElement.value });
+            }
+        };
+        this.placeholder = undefined;
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        this.disabled = false;
+        this.value = '';
+        this.clearable = false;
     }
-  }
-  componentDidLoad() {
-    if (this.inputElement == null)
-      return;
-    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
-    this.eventListeners.add(this.inputElement, 'keydown', (event) => {
-      const keyboardEvent = event;
-      if (keyboardEvent.key === 'Enter') {
-        // emit immediately
-        this.handleInputChange();
-      }
-    });
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  render() {
-    return (h("div", { class: "search-box" }, h("six-input", { ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", null)));
-  }
-  static get watchers() { return {
-    "value": ["handleValueChange"]
-  }; }
-  static get style() { return sixSearchFieldCss; }
+    handleValueChange() {
+        if (this.inputElement != null) {
+            this.inputElement.value = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.inputElement == null)
+            return;
+        this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));
+        this.eventListeners.add(this.inputElement, 'keydown', (event) => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === 'Enter') {
+                // emit immediately
+                this.handleInputChange();
+            }
+        });
+    }
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
+    }
+    render() {
+        return (h("div", { key: '8ee6b08e385e3974b05f7ef53b6ea4fe36a1592d', class: "search-box" }, h("six-input", { key: 'e6be5b0097a8218a53f624680af8d9158fd6fc9a', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: 'd1a516a60040f28d58c0e688ff6fb0722633ccf1', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'da46accd23e5efe5741f917aa6de64e0ddc08e19' })));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return SixSearchFieldStyle0; }
 }, [1, "six-search-field", {
-    "placeholder": [1],
-    "debounce": [514],
-    "disabled": [516],
-    "value": [513],
-    "clearable": [4]
-  }]);
+        "placeholder": [1],
+        "debounce": [514],
+        "disabled": [516],
+        "value": [513],
+        "clearable": [4]
+    }, undefined, {
+        "value": ["handleValueChange"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-search-field", "six-error", "six-icon", "six-input"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-search-field":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixSearchField$1);
-      }
-      break;
-    case "six-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "six-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "six-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-search-field", "six-error", "six-icon", "six-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-search-field":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixSearchField$1);
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const SixSearchField = SixSearchField$1;

package/dist/components/six-search-field.js.map

@@ -1 +1 @@
-{"file":"six-search-field.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,iNAAiN;;MCoB9NA,gBAAc;;;;;;IAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;IAEtC,sBAAiB,GAAG;MAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;QAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;OACjE;KACF,CAAC;;oBAtBkC,qBAAqB;oBAGrB,KAAK;iBAGR,EAAE;qBAGf,KAAK;;EAgBzB,iBAAiB;IACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;MAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;KACtC;GACF;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;MAAE,OAAO;IAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY;MACjE,MAAM,aAAa,GAAG,KAAsB,CAAC;MAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;QAEjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;KACF,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;GACjC;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,YAAY,IACrB,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZ,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSearchField"],"sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-search-field.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,oNAAoN,CAAC;AAC/O,6BAAe,iBAAiB;;MCmBnBA,gBAAc;;;;;;QAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAEtC,sBAAiB,GAAG;YAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;gBAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;aACjE;SACF,CAAC;;wBAtBkC,qBAAqB;wBAGrB,KAAK;qBAGR,EAAE;yBAGf,KAAK;;IAgBzB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACtC;KACF;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE,OAAO;QAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY;YACjE,MAAM,aAAa,GAAG,KAAsB,CAAC;YAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;SACF,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,YAAY,IACrB,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,iEAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZ,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSearchField"],"sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixSelect extends Components.SixSelect, HTMLElement {}
 export const SixSelect: {
-  prototype: SixSelect;
-  new (): SixSelect;
+    prototype: SixSelect;
+    new (): SixSelect;
 };
 /**
  * Used to define this component and all nested components recursively.