@six-group/ui-library 0.0.0-insider.e433304 → 0.0.0-insider.e8b5a11

package/dist/components/six-header-dropdown-item.js

@@ -0,0 +1,114 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BAe7gBEi.js';
+import { g as getSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$8 } from './p-H_jOwrje.js';
+import { d as defineCustomElement$7 } from './p-Bw28MhTp.js';
+import { d as defineCustomElement$6 } from './p-Cku9xxcT.js';
+import { d as defineCustomElement$5 } from './p-DyBhkgST.js';
+import { d as defineCustomElement$4 } from './p-NB9EUAIJ.js';
+import { d as defineCustomElement$3 } from './p-DhglcyBm.js';
+import { d as defineCustomElement$2 } from './p-CmLb31Bn.js';
+
+const sixHeaderDropdownItemCss = ":host{height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-dropdown-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
+
+const SixHeaderDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderDropdownItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Set to true to allow auto filtering for entries in the dropdown.
+         * With this flag the dropdown will automatically filter itsel.
+         * If you need to coordinate the shown elements yourself,
+         * e.g. because you need to call an endpoint use asyncFilter instead
+         */
+        this.filter = false;
+        /** The filter's placeholder text. */
+        this.filterPlaceholder = 'Filter...';
+        this.active = false;
+    }
+    connectedCallback() {
+        this.updateDropdownDistance();
+    }
+    componentDidLoad() {
+        this.updateDropdownDistance();
+    }
+    render() {
+        return (h(Host, { key: '2eeb14e33c0c150aaa8a7d8633a03cb54c70531c', class: {
+                'six-header-dropdown-item--active': this.active,
+            } }, h("six-dropdown", { key: 'ff2635a4cd3f90ddc34385c6e4202a7b6cece082', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: '45812e7c183405a089f0e2d8762e24d10ca498a1', slot: "trigger", name: "trigger" }), h("slot", { key: 'eeaae542f2aca30c74fc14ba5db3529f1e515eaf' }))));
+    }
+    updateDropdownDistance() {
+        const trigger = getSlot(this.host, 'trigger');
+        const header = this.host.closest('six-header');
+        if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {
+            const hostRight = this.host.getBoundingClientRect().right;
+            const triggerRight = trigger.getBoundingClientRect().right;
+            const headerBottom = header.getBoundingClientRect().bottom;
+            const triggerBottom = trigger.getBoundingClientRect().bottom;
+            this.dropdownElement.distance = headerBottom - triggerBottom + 3;
+            this.dropdownElement.skidding = hostRight - triggerRight;
+        }
+    }
+    get host() { return this; }
+    static get style() { return sixHeaderDropdownItemCss; }
+}, [1, "six-header-dropdown-item", {
+        "filter": [4],
+        "filterPlaceholder": [1, "filter-placeholder"],
+        "active": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-header-dropdown-item", "six-checkbox", "six-dropdown", "six-error", "six-icon", "six-input", "six-menu", "six-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-header-dropdown-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixHeaderDropdownItem$1);
+            }
+            break;
+        case "six-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "six-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "six-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "six-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "six-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-menu-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SixHeaderDropdownItem = SixHeaderDropdownItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixHeaderDropdownItem, defineCustomElement };
+//# sourceMappingURL=six-header-dropdown-item.js.map
+
+//# sourceMappingURL=six-header-dropdown-item.js.map

package/dist/components/six-header-dropdown-item.js.map

@@ -0,0 +1 @@
+{"file":"six-header-dropdown-item.js","mappings":";;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,2WAA2W;;MCa/XA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AALlC,IAAA,WAAA,GAAA;;;;AAME;;;;;AAKG;AACK,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAiB,CAAA,iBAAA,GAAG,WAAW;AAE9B,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAkDxB;IA5CC,iBAAiB,GAAA;QACf,IAAI,CAAC,sBAAsB,EAAE;;IAG/B,gBAAgB,GAAA;QACd,IAAI,CAAC,sBAAsB,EAAE;;IAG/B,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,kCAAkC,EAAE,IAAI,CAAC,MAAM;aAChD,EAAA,EAED,CACE,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,EACxC,KAAK,EACL,IAAA,EAAA,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,YAAY,EACD,qBAAA,EAAA,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAC1B,qBAAA,EAAA,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAChD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAEzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,EACtC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACK,CACV;;IAIH,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QAC9C,IAAI,OAAO,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;YAC1F,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACzD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK;YAC1D,MAAM,YAAY,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM;YAC1D,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;YAC5D,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,YAAY,GAAG,aAAa,GAAG,CAAC;YAChE,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,SAAS,GAAG,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderDropdownItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header-dropdown-item/six-header-dropdown-item.scss?tag=six-header-dropdown-item&encapsulation=shadow","src/components/six-header-dropdown-item/six-header-dropdown-item.tsx"],"sourcesContent":[":host {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 var(--six-spacing-large);\n  border-bottom: solid var(--six-header-border-height) transparent;\n  border-top: solid var(--six-header-border-height) transparent;\n}\n\n:host(.six-header-dropdown-item--active) {\n  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-dropdown-item',\n  styleUrl: 'six-header-dropdown-item.scss',\n  shadow: true,\n})\nexport class SixHeaderDropdownItem {\n  /**\n   * Set to true to allow auto filtering for entries in the dropdown.\n   * With this flag the dropdown will automatically filter itsel.\n   * If you need to coordinate the shown elements yourself,\n   * e.g. because you need to call an endpoint use asyncFilter instead\n   */\n  @Prop() filter = false;\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder = 'Filter...';\n\n  @State() active = false;\n\n  @Element() host!: HTMLSixHeaderDropdownItemElement;\n\n  private dropdownElement?: HTMLSixDropdownElement;\n\n  connectedCallback() {\n    this.updateDropdownDistance();\n  }\n\n  componentDidLoad() {\n    this.updateDropdownDistance();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'six-header-dropdown-item--active': this.active,\n        }}\n      >\n        <six-dropdown\n          ref={(el) => (this.dropdownElement = el)}\n          hoist\n          skidding={0}\n          placement=\"bottom-end\"\n          onSix-dropdown-show={() => (this.active = true)}\n          onSix-dropdown-hide={() => (this.active = false)}\n          filter={this.filter}\n          filterPlaceholder={this.filterPlaceholder}\n        >\n          <slot slot=\"trigger\" name=\"trigger\" />\n          <slot />\n        </six-dropdown>\n      </Host>\n    );\n  }\n\n  private updateDropdownDistance() {\n    const trigger = getSlot(this.host, 'trigger');\n    const header = this.host.closest('six-header');\n    if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {\n      const hostRight = this.host.getBoundingClientRect().right;\n      const triggerRight = trigger.getBoundingClientRect().right;\n      const headerBottom = header.getBoundingClientRect().bottom;\n      const triggerBottom = trigger.getBoundingClientRect().bottom;\n      this.dropdownElement.distance = headerBottom - triggerBottom + 3;\n      this.dropdownElement.skidding = hostRight - triggerRight;\n    }\n  }\n}\n"],"version":3}

package/dist/components/six-header-item.d.ts

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

package/dist/components/six-header-item.js

@@ -0,0 +1,46 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BAe7gBEi.js';
+
+const sixHeaderItemCss = ":host{position:relative;isolation:isolate;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
+
+const SixHeaderItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Indicates whether the item is styled as active.
+         * When set to `true`, a border is displayed below the trigger element.
+         *
+         * Use <code>six-header-dropdown-item</code> to automatically set the active
+         * state for dropdowns.
+         */
+        this.active = false;
+    }
+    render() {
+        return (h(Host, { key: 'bd303733a1f5526f00e3ff8e38a7057bcc1e28d4', class: { 'six-header-item--active': this.active } }, h("slot", { key: 'e6d05fd86d8f8c63c3a833999c64ec9a4b5d8349' })));
+    }
+    static get style() { return sixHeaderItemCss; }
+}, [1, "six-header-item", {
+        "active": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-header-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-header-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixHeaderItem$1);
+            }
+            break;
+    } });
+}
+
+const SixHeaderItem = SixHeaderItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixHeaderItem, defineCustomElement };
+//# sourceMappingURL=six-header-item.js.map
+
+//# sourceMappingURL=six-header-item.js.map

package/dist/components/six-header-item.js.map

@@ -0,0 +1 @@
+{"file":"six-header-item.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sYAAsY;;MCYlZA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;AAME;;;;;;AAMG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AASxC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EACrD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header-item/six-header-item.scss?tag=six-header-item&encapsulation=shadow","src/components/six-header-item/six-header-item.tsx"],"sourcesContent":[":host {\n  position: relative;\n  isolation: isolate;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 var(--six-spacing-large);\n  border-bottom: solid var(--six-header-border-height) transparent;\n  border-top: solid var(--six-header-border-height) transparent;\n}\n\n:host(.six-header-item--active) {\n  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-item',\n  styleUrl: 'six-header-item.scss',\n  shadow: true,\n})\nexport class SixHeaderItem {\n  /**\n   * Indicates whether the item is styled as active.\n   * When set to `true`, a border is displayed below the trigger element.\n   *\n   * Use <code>six-header-dropdown-item</code> to automatically set the active\n   * state for dropdowns.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host class={{ 'six-header-item--active': this.active }}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-header-menu-button.d.ts

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

package/dist/components/six-header-menu-button.js

@@ -0,0 +1,64 @@
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
+import { d as defineCustomElement$3 } from './p-D3m7RdL_.js';
+import { d as defineCustomElement$2 } from './p-Dgi7xz4X.js';
+
+const sixHeaderMenuButtonCss = ":host{display:block}six-button::part(base){border:none;padding-right:0}six-button[disabled]::part(base){color:var(--six-color-web-rock-600);background-color:transparent}six-button::part(label){border:none;font-weight:var(--six-font-weight-bold);font-size:var(--six-font-size-small);padding-left:0}six-button:focus::part(base),six-button:hover::part(base),six-button:active::part(base){background-color:initial;border-color:initial}six-button:hover::part(base),six-button:active::part(base){color:var(--six-header-selected-app-color-hover)}";
+
+const SixHeaderMenuButton$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderMenuButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
+        this.caret = false;
+        /** Set to true to disable the button. */
+        this.disabled = false;
+        /** Set to true to draw the button in a loading state. */
+        this.loading = false;
+        /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
+        this.submit = false;
+        /** Indicates if activating the button should reset the form. */
+        this.reset = false;
+    }
+    render() {
+        return (h("six-button", { key: 'aba167b8655a2a28b78bcc29be8f8dc5bd5c4a25', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, h("slot", { key: '8cc82cbd3da98322f4e1a414cfed46022d97068f', name: "suffix", slot: "suffix" }), h("slot", { key: '52635a198a62d30f4bbacec06a9632cb675d036f', name: "prefix", slot: "prefix" }), h("slot", { key: '8aef5d218249dc18183e43e398031820615359e8' })));
+    }
+    static get style() { return sixHeaderMenuButtonCss; }
+}, [1, "six-header-menu-button", {
+        "caret": [4],
+        "disabled": [516],
+        "loading": [516],
+        "submit": [516],
+        "reset": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-header-menu-button", "six-button", "six-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-header-menu-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixHeaderMenuButton$1);
+            }
+            break;
+        case "six-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SixHeaderMenuButton = SixHeaderMenuButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixHeaderMenuButton, defineCustomElement };
+//# sourceMappingURL=six-header-menu-button.js.map
+
+//# sourceMappingURL=six-header-menu-button.js.map

package/dist/components/six-header-menu-button.js.map

@@ -0,0 +1 @@
+{"file":"six-header-menu-button.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,6hBAA6hB;;MCY/iBA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;;AAGI,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAkBvC;IAhBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderMenuButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header-menu-button/six-header-menu-button.scss?tag=six-header-menu-button&encapsulation=shadow","src/components/six-header-menu-button/six-header-menu-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsix-button::part(base) {\n  border: none;\n  padding-right: 0;\n}\n\nsix-button[disabled]::part(base) {\n  color: var(--six-color-web-rock-600);\n  background-color: transparent;\n}\n\nsix-button::part(label) {\n  border: none;\n  font-weight: var(--six-font-weight-bold);\n  font-size: var(--six-font-size-small);\n  padding-left: 0;\n}\n\nsix-button:focus::part(base),\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  background-color: initial;\n  border-color: initial;\n}\n\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  color: var(--six-header-selected-app-color-hover);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-menu-button',\n  styleUrl: 'six-header-menu-button.scss',\n  shadow: true,\n})\nexport class SixHeaderMenuButton {\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  render() {\n    return (\n      <six-button\n        type=\"secondary\"\n        caret={this.caret}\n        disabled={this.disabled}\n        loading={this.loading}\n        submit={this.submit}\n        reset={this.reset}\n      >\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot />\n      </six-button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-header.js

@@ -1,194 +1,39 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { E as EventListeners } from './event-listeners.js';
-import { g as getSlot, h as hasSlot } from './slot.js';
-import { d as defineCustomElement$9 } from './six-checkbox2.js';
-import { d as defineCustomElement$8 } from './six-dropdown2.js';
-import { d as defineCustomElement$7 } from './six-error2.js';
-import { d as defineCustomElement$6 } from './six-icon2.js';
-import { d as defineCustomElement$5 } from './six-icon-button2.js';
-import { d as defineCustomElement$4 } from './six-input2.js';
-import { d as defineCustomElement$3 } from './six-menu2.js';
-import { d as defineCustomElement$2 } from './six-menu-item2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-BAe7gBEi.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { g as getSlot } from './p-j3oIB5oT.js';
 
-const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:var(--six-header-height);background-color:var(--six-header-background-color);align-items:stretch;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
 
-var Section;
-(function (Section) {
-    Section[Section["None"] = 0] = "None";
-    Section[Section["Search"] = 1] = "Search";
-    Section[Section["AppSwitcher"] = 2] = "AppSwitcher";
-    Section[Section["Profile"] = 3] = "Profile";
-})(Section || (Section = {}));
-var Slot;
-(function (Slot) {
-    Slot["Search"] = "search-field";
-    Slot["Notifications"] = "notifications";
-    Slot["AppSwitcher"] = "app-switcher-menu";
-    Slot["Profile"] = "profile-menu";
-    Slot["Logo"] = "logo";
-})(Slot || (Slot = {}));
-const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTMLElement {
+const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixAppNameClicked = createEvent(this, "six-header-app-name-clicked", 7);
-        this.sixAppSwitcherSelect = createEvent(this, "six-header-app-switcher-select", 7);
-        this.sixProfileSelect = createEvent(this, "six-header-profile-select", 7);
-        this.sixHamburgerClick = createEvent(this, "six-header-hamburger-menu-clicked", 7);
-        this.sixLogoClick = createEvent(this, "six-header-logo-clicked", 7);
-        this.sixSearchFieldToggle = createEvent(this, "six-header-search-field-toggle", 7);
-        this.eventListeners = new EventListeners();
-        this.setupMenu = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
-        };
-        this.setupLogo = (el) => {
-            if (!this.clickableLogo || el == null)
-                return;
-            this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
-        };
-        this.setupProfile = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));
-            this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
-            this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
-                const { name, item } = event.detail;
-                this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });
-            });
-        };
-        this.setupAppSwitcher = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));
-            this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
-            this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
-                const { name, item } = event.detail;
-                this.selectedApp = item.innerText;
-                this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });
-            });
-        };
-        this.appNameClicked = () => this.sixAppNameClicked.emit();
-        this.computeSearchOpenState = () => {
-            this.selectedSection = this.openSearch ? Section.Search : Section.None;
-        };
+        /** Indicates if content should be shifted down when search field is visible. */
         this.shiftContent = false;
-        this.hideHamburgerMenu = false;
-        this.openHamburgerMenu = false;
+        /**
+         * Set the header search input to be in an open or closed state.
+         *
+         * Focuses the first `six-input` found in the search slot.
+         */
         this.openSearch = false;
-        this.clickableLogo = false;
-        this.selectedApp = undefined;
-        this.selectedSection = undefined;
+        this.eventListeners = new EventListeners();
     }
     handleOpenSearchChange() {
-        this.computeSearchOpenState();
-    }
-    /** Sets open state for search */
-    async setSearchOpenState(openState) {
-        if (this.selectedSection === Section.Search && !openState) {
-            this.selectedSection = Section.None;
-        }
-        else if (openState && this.selectedSection !== Section.Search) {
-            this.selectedSection = Section.Search;
-        }
-    }
-    /** Get open state for search */
-    async getIsSearchOpen() {
-        return this.selectedSection === Section.Search;
-    }
-    hasSlot(slot) {
-        if (this.slots == null) {
-            return false;
-        }
-        return this.slots[slot];
-    }
-    isSectionSelected(value) {
-        return value === this.selectedSection;
-    }
-    selectSection(section) {
-        return () => (this.selectedSection = section);
-    }
-    toggleSearch() {
-        const visible = this.selectedSection !== Section.Search;
-        this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;
-        this.sixSearchFieldToggle.emit({ visible });
-        if (this.selectedSection === Section.Search) {
-            // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772
-            setTimeout(async () => {
-                var _a, _b;
-                const slot = getSlot(this.host, Slot.Search);
-                (_b = (_a = slot === null || slot === void 0 ? void 0 : slot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.setFocus();
-            }, 50);
+        if (this.openSearch) {
+            // deferred due to https://github.com/ionic-team/stencil/issues/3772
+            setTimeout(async () => { var _a, _b, _c; return (_c = (_b = (_a = getSlot(this.host, 'search-field')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('six-input')) === null || _c === void 0 ? void 0 : _c.setFocus(); }, 50);
         }
     }
-    componentWillLoad() {
-        this.slots = {
-            [Slot.Search]: hasSlot(this.host, Slot.Search),
-            [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),
-            [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),
-            [Slot.Profile]: hasSlot(this.host, Slot.Profile),
-            [Slot.Logo]: hasSlot(this.host, Slot.Logo),
-        };
-        if (this.hasSlot(Slot.AppSwitcher)) {
-            this.updateSelectedApp();
-        }
-        if (this.hasSlot(Slot.Search)) {
-            this.computeSearchOpenState();
-        }
-    }
-    connectedCallback() {
-        const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);
-        if (appSwitcherSlot) {
-            this.mutationObserver = new MutationObserver((mutations) => {
-                if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {
-                    this.updateSelectedApp();
-                }
-            });
-            this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });
-        }
-    }
-    updateSelectedApp() {
-        var _a;
-        // there are more concise ways to select the first checked menu item, but this is one that works for jest
-        const element = getSlot(this.host, Slot.AppSwitcher);
-        if (element == null) {
-            return undefined;
-        }
-        const items = Array.from(element.querySelectorAll('six-menu-item'));
-        const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false');
-        this.selectedApp = (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
-    }
     disconnectedCallback() {
-        var _a;
         this.eventListeners.removeAll();
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        const hamburgerMenu = !this.hideHamburgerMenu && (h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })));
-        const search = this.hasSlot(Slot.Search) && (h("section", { class: {
-                'six-header__search': true,
-                'six-header__search--open': this.isSectionSelected(Section.Search),
-            } }, h("six-icon-button", { name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
-        const notifications = this.hasSlot(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
-        const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
-                'six-header__app-switcher': true,
-                'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
-            } }, h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { name: "apps" })), h("slot", { name: Slot.AppSwitcher }))));
-        const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
-                'six-header__profile': true,
-                'six-header__profile--open': this.isSectionSelected(Section.Profile),
-            } }, h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { name: "profile-avatar", slot: "trigger" }), h("slot", { name: "profile-menu" }))));
-        const logo = this.hasSlot(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
-                'six-header__logo': true,
-                'six-header__logo--clickable': this.clickableLogo,
-            }, ref: this.setupLogo }, h("svg", { height: "20", viewBox: "0 0 90 26", xmlns: "http://www.w3.org/2000/svg" }, h("title", null, "SIX"), h("g", { fill: "#DE3919", "fill-rule": "nonzero" }, h("path", { d: "m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525" }), h("path", { d: "m42.16.324h5.21v24.806h-5.21z" }), h("path", { d: "m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545" })))));
-        return (h(Host, null, h("header", { class: "six-header" }, hamburgerMenu, logo, h("section", { class: "six-header__placeholder" }), h("section", { class: "six-header__custom" }, h("slot", null)), search, notifications, appSwitcher, profile), h("div", { class: {
+        return (h(Host, { key: 'ed8164b5e5b438de0751d41af0e936bf136519d2' }, h("header", { key: 'c5f7b7e28a0dd4e425cc14191ee1508c4e9e144c', part: "header", class: "six-header" }, h("slot", { key: 'cf2992e1a0b4ad9110594a9531344729636f9989' })), h("div", { key: '4999baf74ab6d9ca2fa663dc528e05988d422655', class: {
                 'six-header__search-field': true,
-                'six-header__search-field--visible': this.isSectionSelected(Section.Search),
+                'six-header__search-field--visible': this.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { name: Slot.Search }))));
+            } }, h("slot", { key: 'f956a8f35caf73dce95f49713febaa69fe4bff17', name: 'search-field' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get host() { return this; }
@@ -198,14 +43,7 @@ const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTM
     static get style() { return sixHeaderCss; }
 }, [1, "six-header", {
         "shiftContent": [4, "shift-content"],
-        "hideHamburgerMenu": [4, "hide-hamburger-menu"],
-        "openHamburgerMenu": [4, "open-hamburger-menu"],
-        "openSearch": [4, "open-search"],
-        "clickableLogo": [4, "clickable-logo"],
-        "selectedApp": [32],
-        "selectedSection": [32],
-        "setSearchOpenState": [64],
-        "getIsSearchOpen": [64]
+        "openSearch": [4, "open-search"]
     }, undefined, {
         "openSearch": ["handleOpenSearchChange"]
     }]);
@@ -213,53 +51,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["six-header", "six-checkbox", "six-dropdown", "six-error", "six-icon", "six-icon-button", "six-input", "six-menu", "six-menu-item"];
+    const components = ["six-header"];
     components.forEach(tagName => { switch (tagName) {
         case "six-header":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SixHeader$1);
             }
             break;
-        case "six-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "six-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "six-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "six-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "six-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "six-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "six-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "six-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 
@@ -267,5 +65,6 @@ const SixHeader = SixHeader$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixHeader, defineCustomElement };
+//# sourceMappingURL=six-header.js.map
 
 //# sourceMappingURL=six-header.js.map