@six-group/ui-library 0.0.0-insider.931e1d7 → 0.0.0-insider.98c4058

package/dist/components/six-header.js

@@ -1,232 +1,49 @@
-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$b } from './six-checkbox2.js';
-import { d as defineCustomElement$a } from './six-dropdown2.js';
-import { d as defineCustomElement$9 } from './six-error2.js';
-import { d as defineCustomElement$8 } from './six-header-item2.js';
-import { d as defineCustomElement$7 } from './six-icon2.js';
-import { d as defineCustomElement$6 } from './six-icon-button2.js';
-import { d as defineCustomElement$5 } from './six-input2.js';
-import { d as defineCustomElement$4 } from './six-logo2.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: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__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-bold);padding-right:0;padding-left:var(--six-spacing-x-small)}.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 SixHeaderStyle0 = sixHeaderCss;
+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.logoClick = 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.logoClick.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;
-        };
-        this.custom = false;
+        /** 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.logo = 'six';
-        this.selectedApp = undefined;
-        this.selectedSection = undefined;
+        this.eventListeners = new EventListeners();
     }
     handleOpenSearchChange() {
-        if (this.custom) {
-            if (this.openSearch) {
-                // 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);
-            }
-        }
-        else {
-            this.computeSearchOpenState();
-        }
-    }
-    /**
-     * Sets open state for search
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    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
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    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("six-header-item", { key: 'f5e4bf7b91ab71b6fde280777ef56741c4e8593b' }, h("six-icon-button", { key: '691a031db2a0f40177b54d689c2041647977a6f1', name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })));
-        const search = this.hasSlot(Slot.Search) && (h("six-header-item", { key: 'd25050b55ff11cd3888fd1cd7a922f850c43d513', active: this.isSectionSelected(Section.Search) }, h("six-icon-button", { key: '59cb3875f60c30c7829f57b39ad5a49dd58b3f6b', name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
-        const notifications = this.hasSlot(Slot.Notifications) && (h("six-header-item", { key: '2093e028f6b63d5a746121ce7f34a60ccd8b814c' }, h("slot", { key: '14b764a489ccef0d535d990c5827c0bfdcdfadb3', name: Slot.Notifications })));
-        const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("six-header-item", { key: 'b0640d2560ff7cb738f48985aaf0471cb7b49972', active: this.isSectionSelected(Section.AppSwitcher) }, h("six-dropdown", { key: '8e25753fce395164ce9cfc5479a46a19975de4b0', distance: 14, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { key: 'fe5f0fdf9411f05221c914533732db7be3d3d033', slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { key: '81a4d4647b1de8acaadc19d5e58d674c2b930ac4', onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { key: 'd903125dfa9ceadb186bc1eb56f15799c7705eb3', name: "apps" })), h("slot", { key: '57316a36e610fdedcd49a0eed7c81d3e26df3cca', name: Slot.AppSwitcher }))));
-        const profile = this.hasSlot(Slot.Profile) && (h("six-header-item", { key: 'a3133d7f1c50dda15b211fbf46f596e7934aa037', active: this.isSectionSelected(Section.Profile) }, h("six-dropdown", { key: 'c06dc87cd548d08ad0821350a54364e03189ec31', distance: 18, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { key: '2f661377226178aee7fc5915939df0918991e4c6', name: "profile-avatar", slot: "trigger" }), h("slot", { key: '0c9ab4cf7a943e169515a2e73f5d154bf88e0300', name: "profile-menu" }))));
-        const logo = this.hasSlot(Slot.Logo) ? (h("six-header-item", null, h("slot", { name: "logo" }))) : (h("six-header-item", { class: { 'six-header__logo--clickable': this.clickableLogo }, ref: this.setupLogo }, h("six-logo", { brand: this.logo })));
-        const customView = (h(Host, { key: '0b95cbc2c5e2e132f1c6c789c33941efcc4e5a22' }, h("header", { key: 'e8c71cb2c22f2cdc410d2e678f5e30528e50f074', part: "header", class: "six-header" }, h("slot", { key: 'c8d3c17a6c3435f9d7338bcdf4e0dee210b5527a' })), h("div", { key: '1cfe987e74fb40b1ee774a0d3e9718e50770ef0e', class: {
+        return (h(Host, { key: '946ca876978cf1ebf631f50bc8f000ff0a92c281' }, h("header", { key: '8b678dc6e2ffbb4493ccd6c9e847d47c84266b3a', part: "header", class: "six-header" }, h("slot", { key: 'a2d343bec0bc9835fd64b02222de0c43e9d0f4a3' })), h("div", { key: '909b3039b8d9fa078dd3e83b3837d622a1fc6dd7', class: {
                 'six-header__search-field': true,
                 'six-header__search-field--visible': this.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { key: 'c6f91d3251a01c33281a0437c1273c1851641251', name: Slot.Search }))));
-        const defaultView = (h(Host, { key: '64fad48c1c9f738ec60d46eca751e0fbaa02121a' }, h("header", { key: '96ebb16b846a8f6331fa882dd557fb57bbc19bc1', part: "header", class: "six-header" }, hamburgerMenu, logo, h("six-header-item", { key: 'dbf70c1f28a8ac8e5fce05cd5d7d46b219057f59', class: "six-header__placeholder" }), h("six-header-item", { key: 'd3c30d7836f81bf58114f1ef9dffcd0ef51f078f' }, h("slot", { key: '2a0901b0730ed12d5f8f56f1b1ab575fb4863c6f' })), search, notifications, appSwitcher, profile), h("div", { key: 'aaf0973d3476a29d6ab3f117aa961e9dc6958bbe', class: {
-                'six-header__search-field': true,
-                'six-header__search-field--visible': this.isSectionSelected(Section.Search),
-                'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { key: '708bead402bdd620a21fa629b4ddf37772fc75e0', name: Slot.Search }))));
-        return this.custom ? customView : defaultView;
+            } }, h("slot", { key: 'f90ee90f387bc62aa485dfa638f32acb1e81c71c', name: 'search-field' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get host() { return this; }
     static get watchers() { return {
         "openSearch": ["handleOpenSearchChange"]
     }; }
-    static get style() { return SixHeaderStyle0; }
+    static get style() { return sixHeaderCss; }
 }, [1, "six-header", {
-        "custom": [4],
         "shiftContent": [4, "shift-content"],
-        "hideHamburgerMenu": [4, "hide-hamburger-menu"],
-        "openHamburgerMenu": [4, "open-hamburger-menu"],
-        "openSearch": [4, "open-search"],
-        "clickableLogo": [4, "clickable-logo"],
-        "logo": [1],
-        "selectedApp": [32],
-        "selectedSection": [32],
-        "setSearchOpenState": [64],
-        "getIsSearchOpen": [64]
+        "openSearch": [4, "open-search"]
     }, undefined, {
         "openSearch": ["handleOpenSearchChange"]
     }]);
@@ -234,63 +51,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["six-header", "six-checkbox", "six-dropdown", "six-error", "six-header-item", "six-icon", "six-icon-button", "six-input", "six-logo", "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$b();
-            }
-            break;
-        case "six-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "six-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "six-header-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "six-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "six-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "six-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "six-logo":
-            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;
     } });
 }
 
@@ -298,5 +65,6 @@ const SixHeader = SixHeader$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixHeader, defineCustomElement };
+//# sourceMappingURL=six-header.js.map
 
 //# sourceMappingURL=six-header.js.map

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

@@ -1 +1 @@
-{"file":"six-header.js","mappings":"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","names":["SixHeader"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__logo {\n    &--clickable {\n      cursor: pointer;\n    }\n  }\n\n  &__placeholder {\n    flex: 1;\n  }\n\n  &__app-switcher-dropdown {\n    display: flex;\n    align-items: center;\n  }\n\n  &__selected-app {\n    cursor: pointer;\n    font-size: var(--six-font-size-small);\n    font-weight: var(--six-font-weight-bold);\n    padding-right: 0;\n    padding-left: var(--six-spacing-x-small);\n    &:hover {\n      color: var(--six-header-selected-app-color-hover);\n    }\n  }\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n  visible: boolean;\n}\n\nenum Section {\n  None,\n  Search,\n  AppSwitcher,\n  Profile,\n}\n\nenum Slot {\n  Search = 'search-field',\n  Notifications = 'notifications',\n  AppSwitcher = 'app-switcher-menu',\n  Profile = 'profile-menu',\n  Logo = 'logo',\n}\n\n/**\n * @since 1.0\n * @status stable\n * @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the notification component in the header.\n * @slot app-switcher-menu - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the application switcher menu in the header.\n * @slot profile-menu -  <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the profile menu in the header.\n * @slot profile-avatar - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the avator in the header.\n */\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /**\n   * Set `custom` to `true` for complete control over the header content. When enabled, all other properties and slots\n   * are ignored.\n   *\n   * Use `six-header-item`, `six-header-dropdown-item` and `six-header-menu-button` to structure the content.\n   *\n   * @since 4.2.7\n   * @status beta\n   */\n  @Prop() custom = false;\n\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set whether the hamburger menu should be visible or not\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Prop() hideHamburgerMenu = false;\n\n  /**\n   * Set the hamburger menu icon to open or closed state\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Prop() openHamburgerMenu = false;\n\n  /**\n   * Set the header search to be in an open or closed state.\n   *\n   * If `custom` is `true`, focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  /**\n   * Set whether the logo should be clickable\n   *\n   * @deprecated Use six-header `custom` property with `six-logo` instead\n   */\n  @Prop() clickableLogo = false;\n\n  /**\n   * The displayed logo. Either six or bme. Defaults to six.\n   *\n   * @deprecated Use six-header `custom` property with `six-logo` instead\n   */\n  @Prop() logo: 'six' | 'bme' = 'six';\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.custom) {\n      if (this.openSearch) {\n        // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n        setTimeout(async () => {\n          const slot = getSlot(this.host, Slot.Search);\n          slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n        }, 50);\n      }\n    } else {\n      this.computeSearchOpenState();\n    }\n  }\n\n  /**\n   * Sets open state for search\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Method()\n  async setSearchOpenState(openState: boolean) {\n    if (this.selectedSection === Section.Search && !openState) {\n      this.selectedSection = Section.None;\n    } else if (openState && this.selectedSection !== Section.Search) {\n      this.selectedSection = Section.Search;\n    }\n  }\n\n  /**\n   * Get open state for search\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Method()\n  async getIsSearchOpen() {\n    return this.selectedSection === Section.Search;\n  }\n\n  /**\n   * Emitted when the name of the selected app is clicked.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead\n   */\n  @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when a menu item is in the app switcher menu is selected.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead\n   */\n  @Event({ eventName: 'six-header-app-switcher-select' })\n  sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n  /**\n   * Emitted when a menu item is in the profile menu is selected.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-avatar` instead\n   */\n  @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /**\n   * Emitted when the hamburger menu is clicked.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the header logo is clicked.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-logo-clicked' }) logoClick!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when search field is toggled.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-search-field-toggle' })\n  sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  private slots?: Record<Slot, boolean>;\n\n  private mutationObserver?: MutationObserver;\n\n  @State() selectedApp?: string;\n  @State() selectedSection?: Section;\n\n  private hasSlot(slot: Slot): boolean {\n    if (this.slots == null) {\n      return false;\n    }\n    return this.slots[slot];\n  }\n\n  private isSectionSelected(value: Section) {\n    return value === this.selectedSection;\n  }\n\n  private selectSection(section: Section) {\n    return () => (this.selectedSection = section);\n  }\n\n  private toggleSearch() {\n    const visible = this.selectedSection !== Section.Search;\n    this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n    this.sixSearchFieldToggle.emit({ visible });\n    if (this.selectedSection === Section.Search) {\n      // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(async () => {\n        const slot = getSlot(this.host, Slot.Search);\n        slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n      }, 50);\n    }\n  }\n\n  private setupMenu = (el?: HTMLSixIconButtonElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n  };\n\n  private setupLogo = (el?: HTMLElement) => {\n    if (!this.clickableLogo || el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.logoClick.emit());\n  };\n\n  private setupProfile = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.selectedApp = item.innerText;\n      this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private appNameClicked = () => this.sixAppNameClicked.emit();\n\n  private computeSearchOpenState = () => {\n    this.selectedSection = this.openSearch ? Section.Search : Section.None;\n  };\n\n  componentWillLoad() {\n    this.slots = {\n      [Slot.Search]: hasSlot(this.host, Slot.Search),\n      [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n      [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n      [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n      [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n    };\n\n    if (this.hasSlot(Slot.AppSwitcher)) {\n      this.updateSelectedApp();\n    }\n\n    if (this.hasSlot(Slot.Search)) {\n      this.computeSearchOpenState();\n    }\n  }\n\n  connectedCallback() {\n    const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);\n    if (appSwitcherSlot) {\n      this.mutationObserver = new MutationObserver((mutations) => {\n        if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {\n          this.updateSelectedApp();\n        }\n      });\n      this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });\n    }\n  }\n\n  private updateSelectedApp() {\n    // there are more concise ways to select the first checked menu item, but this is one that works for jest\n    const element = getSlot(this.host, Slot.AppSwitcher);\n    if (element == null) {\n      return undefined;\n    }\n    const items = Array.from(element.querySelectorAll('six-menu-item'));\n    const firstCheckedMenuItem = items.find(\n      (item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false'\n    );\n    this.selectedApp = firstCheckedMenuItem?.textContent ?? undefined;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n    this.mutationObserver?.disconnect();\n  }\n\n  render() {\n    const hamburgerMenu = !this.hideHamburgerMenu && (\n      <six-header-item>\n        <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n      </six-header-item>\n    );\n\n    const search = this.hasSlot(Slot.Search) && (\n      <six-header-item active={this.isSectionSelected(Section.Search)}>\n        <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n      </six-header-item>\n    );\n\n    const notifications = this.hasSlot(Slot.Notifications) && (\n      <six-header-item>\n        <slot name={Slot.Notifications} />\n      </six-header-item>\n    );\n\n    const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n      <six-header-item active={this.isSectionSelected(Section.AppSwitcher)}>\n        <six-dropdown distance={14} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n          <div slot=\"trigger\" class=\"six-header__app-switcher-dropdown\">\n            <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n              {this.selectedApp}\n            </a>\n            <six-icon-button name=\"apps\" />\n          </div>\n          <slot name={Slot.AppSwitcher} />\n        </six-dropdown>\n      </six-header-item>\n    );\n\n    const profile = this.hasSlot(Slot.Profile) && (\n      <six-header-item active={this.isSectionSelected(Section.Profile)}>\n        <six-dropdown distance={18} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n          <slot name=\"profile-avatar\" slot=\"trigger\" />\n          <slot name=\"profile-menu\" />\n        </six-dropdown>\n      </six-header-item>\n    );\n\n    const logo = this.hasSlot(Slot.Logo) ? (\n      <six-header-item>\n        <slot name=\"logo\" />\n      </six-header-item>\n    ) : (\n      <six-header-item class={{ 'six-header__logo--clickable': this.clickableLogo }} ref={this.setupLogo}>\n        <six-logo brand={this.logo} />\n      </six-header-item>\n    );\n\n    const customView = (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n\n    const defaultView = (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          {hamburgerMenu}\n          {logo}\n          <six-header-item class=\"six-header__placeholder\" />\n          <six-header-item>\n            <slot />\n          </six-header-item>\n          {search}\n          {notifications}\n          {appSwitcher}\n          {profile}\n        </header>\n\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n\n    return this.custom ? customView : defaultView;\n  }\n}\n"],"version":3}
+{"file":"six-header.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,oiCAAoiC;;MCe5iCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,GAAA;;;;;AAQU,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AAE5B;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAelB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,cAAc,EAAE;AAwB9C;IApCC,sBAAsB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,UAAU,CACR,8BAAY,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAClG,EAAE,CACH;;;IAQL,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,0BAA0B,EAAE,IAAI;gBAChC,mCAAmC,EAAE,IAAI,CAAC,UAAU;gBACpD,yCAAyC,EAAE,IAAI,CAAC,YAAY;AAC7D,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAE,cAAc,GAAI,CAC1B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n * @slot search-field - Used to define the search field component in the header.\n */\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set the header search input to be in an open or closed state.\n   *\n   * Focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.openSearch) {\n      // deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(\n        async () => getSlot(this.host, 'search-field')?.shadowRoot?.querySelector('six-input')?.setFocus(),\n        50\n      );\n    }\n  }\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={'search-field'} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-icon-button.js

@@ -1,8 +1,9 @@
-import { S as SixIconButton$1, d as defineCustomElement$1 } from './six-icon-button2.js';
+import { S as SixIconButton$1, d as defineCustomElement$1 } from './p-CIvx-Vfd.js';
 
 const SixIconButton = SixIconButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixIconButton, defineCustomElement };
+//# sourceMappingURL=six-icon-button.js.map
 
 //# sourceMappingURL=six-icon-button.js.map

package/dist/components/six-icon.js

@@ -1,8 +1,9 @@
-import { S as SixIcon$1, d as defineCustomElement$1 } from './six-icon2.js';
+import { S as SixIcon$1, d as defineCustomElement$1 } from './p-Q3Zlhwd0.js';
 
 const SixIcon = SixIcon$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixIcon, defineCustomElement };
+//# sourceMappingURL=six-icon.js.map
 
 //# sourceMappingURL=six-icon.js.map

package/dist/components/six-input.js

@@ -1,8 +1,9 @@
-import { S as SixInput$1, d as defineCustomElement$1 } from './six-input2.js';
+import { S as SixInput$1, d as defineCustomElement$1 } from './p-CRqqZ-BJ.js';
 
 const SixInput = SixInput$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixInput, defineCustomElement };
+//# sourceMappingURL=six-input.js.map
 
 //# sourceMappingURL=six-input.js.map

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

@@ -1,8 +1,9 @@
-import { S as SixItemPicker$1, d as defineCustomElement$1 } from './six-item-picker2.js';
+import { S as SixItemPicker$1, d as defineCustomElement$1 } from './p-D34Iwjco.js';
 
 const SixItemPicker = SixItemPicker$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixItemPicker, defineCustomElement };
+//# sourceMappingURL=six-item-picker.js.map
 
 //# sourceMappingURL=six-item-picker.js.map

package/dist/components/six-language-switcher.js

@@ -1,15 +1,16 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
 
 const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";
-const SixLanguageSwitcherStyle0 = sixLanguageSwitcherCss;
 
 const DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];
-const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguageSwitcher extends HTMLElement {
+const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguageSwitcher extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixChange = createEvent(this, "six-language-switcher-change", 7);
+        this.sixChange = createEvent(this, "six-language-switcher-change");
+        /** The languages which should be selectable options. */
+        this.languages = DEFAULT_LANGUAGES;
         this.handleLanguageSwitching = (newLanguage, languageValue) => () => {
             if (languageValue !== undefined) {
                 this.sixChange.emit(languageValue);
@@ -19,8 +20,6 @@ const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguage
             }
             this.selected = newLanguage;
         };
-        this.selected = undefined;
-        this.languages = DEFAULT_LANGUAGES;
     }
     handleChangesLanguages(newValue) {
         if (!Array.isArray(newValue)) {
@@ -45,7 +44,7 @@ const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguage
         }
     }
     render() {
-        return (h("div", { key: '7cccb95163be8e657098166413343a2c45de876f', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
+        return (h("div", { key: '4cc6a1c89025bc9d7e1515f19a18ef1fc79879a0', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
             const language = typeof lang === 'string' ? lang : lang.key;
             return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -60,7 +59,7 @@ const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguage
     static get watchers() { return {
         "languages": ["handleChangesLanguages"]
     }; }
-    static get style() { return SixLanguageSwitcherStyle0; }
+    static get style() { return sixLanguageSwitcherCss; }
 }, [1, "six-language-switcher", {
         "selected": [1537],
         "languages": [16]
@@ -85,5 +84,6 @@ const SixLanguageSwitcher = SixLanguageSwitcher$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixLanguageSwitcher, defineCustomElement };
+//# sourceMappingURL=six-language-switcher.js.map
 
 //# sourceMappingURL=six-language-switcher.js.map

package/dist/components/six-language-switcher.js.map

@@ -1 +1 @@
-{"file":"six-language-switcher.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,uZAAuZ,CAAC;AACvb,kCAAe,sBAAsB;;ACYrC,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchCA,qBAAmB;;;;;;QAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;YACjF,IAAI,aAAa,KAAK,SAAS,EAAE;gBAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACpC;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;aAClC;YACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;SAC7B,CAAC;;yBAvCyD,iBAAiB;;IAG5E,sBAAsB,CAAC,QAAkB;QACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;KACF;IAEO,sBAAsB;QAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;YACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAWD,MAAM;QACJ,QACE,4DAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;YAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;YAC5D,QACE,WACE,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAC7F,SAAS,EAAE,CAAC,CAAC;oBACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACtC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;qBACxF;iBACF,IAED,YACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;oBACL,0BAA0B,EAAE,IAAI;oBAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;iBACjE,IAEA,QAAQ,CACJ,EAEN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;SACH,CAAC,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixLanguageSwitcher"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n  &__container {\n    display: flex;\n  }\n\n  &__separator {\n    padding: 0 0.25rem;\n  }\n\n  &__label {\n    cursor: pointer;\n\n    &:hover {\n      color: var(--six-color-web-rock-600);\n    }\n\n    &:focus-visible {\n      outline: var(--six-focus-ring);\n      outline-offset: var(--six-focus-ring-offset);\n    }\n\n    &--selected {\n      color: var(--six-color-black);\n      text-decoration: underline;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n  key: string;\n  value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n  tag: 'six-language-switcher',\n  styleUrl: 'six-language-switcher.scss',\n  shadow: true,\n})\nexport class SixLanguageSwitcher {\n  /** The language which should be shown as selected */\n  @Prop({ mutable: true, reflect: true }) selected?: string;\n\n  /** The languages which should be selectable options. */\n  @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n  @Watch('languages')\n  handleChangesLanguages(newValue: string[]) {\n    if (!Array.isArray(newValue)) {\n      throw new Error('languages is expected to be an array');\n    }\n\n    this.updateSelectedLanguage();\n  }\n  /**\n   * Emitted when the language switchers value changes\n   */\n  @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n  componentWillLoad() {\n    if (this.selected === undefined) {\n      this.updateSelectedLanguage();\n    }\n  }\n\n  private updateSelectedLanguage() {\n    const selectedLanguage = this.languages[0];\n    if (typeof selectedLanguage === 'string') {\n      this.selected = selectedLanguage;\n      this.sixChange.emit(this.selected);\n    } else {\n      this.selected = selectedLanguage.key;\n      this.sixChange.emit(selectedLanguage.value);\n    }\n  }\n\n  private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n    if (languageValue !== undefined) {\n      this.sixChange.emit(languageValue);\n    } else {\n      this.sixChange.emit(newLanguage);\n    }\n    this.selected = newLanguage;\n  };\n\n  render() {\n    return (\n      <div part=\"container\" class=\"language-switcher__container\">\n        {this.languages.map((lang, index) => {\n          const language = typeof lang === 'string' ? lang : lang.key;\n          return (\n            <div\n              onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();\n                }\n              }}\n            >\n              <span\n                part=\"label\"\n                tabindex=\"0\"\n                class={{\n                  'language-switcher__label': true,\n                  'language-switcher__label--selected': this.selected === language,\n                }}\n              >\n                {language}\n              </span>\n\n              {index < this.languages.length - 1 && (\n                <span part=\"separator\" class=\"language-switcher__separator\">\n                  |\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-language-switcher.js","mappings":"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","names":["SixLanguageSwitcher","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n  &__container {\n    display: flex;\n  }\n\n  &__separator {\n    padding: 0 0.25rem;\n  }\n\n  &__label {\n    cursor: pointer;\n\n    &:hover {\n      color: var(--six-color-web-rock-600);\n    }\n\n    &:focus-visible {\n      outline: var(--six-focus-ring);\n      outline-offset: var(--six-focus-ring-offset);\n    }\n\n    &--selected {\n      color: var(--six-color-black);\n      text-decoration: underline;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n  key: string;\n  value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n  tag: 'six-language-switcher',\n  styleUrl: 'six-language-switcher.scss',\n  shadow: true,\n})\nexport class SixLanguageSwitcher {\n  /** The language which should be shown as selected */\n  @Prop({ mutable: true, reflect: true }) selected?: string;\n\n  /** The languages which should be selectable options. */\n  @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n  @Watch('languages')\n  handleChangesLanguages(newValue: string[]) {\n    if (!Array.isArray(newValue)) {\n      throw new Error('languages is expected to be an array');\n    }\n\n    this.updateSelectedLanguage();\n  }\n  /**\n   * Emitted when the language switchers value changes\n   */\n  @Event({ eventName: 'six-language-switcher-change' }) sixChange!: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n  componentWillLoad() {\n    if (this.selected === undefined) {\n      this.updateSelectedLanguage();\n    }\n  }\n\n  private updateSelectedLanguage() {\n    const selectedLanguage = this.languages[0];\n    if (typeof selectedLanguage === 'string') {\n      this.selected = selectedLanguage;\n      this.sixChange.emit(this.selected);\n    } else {\n      this.selected = selectedLanguage.key;\n      this.sixChange.emit(selectedLanguage.value);\n    }\n  }\n\n  private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n    if (languageValue !== undefined) {\n      this.sixChange.emit(languageValue);\n    } else {\n      this.sixChange.emit(newLanguage);\n    }\n    this.selected = newLanguage;\n  };\n\n  render() {\n    return (\n      <div part=\"container\" class=\"language-switcher__container\">\n        {this.languages.map((lang, index) => {\n          const language = typeof lang === 'string' ? lang : lang.key;\n          return (\n            <div\n              onClick={this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();\n                }\n              }}\n            >\n              <span\n                part=\"label\"\n                tabindex=\"0\"\n                class={{\n                  'language-switcher__label': true,\n                  'language-switcher__label--selected': this.selected === language,\n                }}\n              >\n                {language}\n              </span>\n\n              {index < this.languages.length - 1 && (\n                <span part=\"separator\" class=\"language-switcher__separator\">\n                  |\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-layout-grid.js

@@ -1,14 +1,12 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, d as Host } from './p-BAe7gBEi.js';
 
 const sixLayoutGridCss = ":host{display:grid;grid-template-columns:repeat(var(--no-of-columns), 1fr);grid-column-gap:1rem}";
-const SixLayoutGridStyle0 = sixLayoutGridCss;
 
-const SixLayoutGrid$1 = /*@__PURE__*/ proxyCustomElement(class SixLayoutGrid extends HTMLElement {
+const SixLayoutGrid$1 = /*@__PURE__*/ proxyCustomElement(class SixLayoutGrid extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.columns = undefined;
     }
     handleColumnsChange() {
         if (typeof this.columns !== 'number' || this.columns === 0) {
@@ -20,13 +18,13 @@ const SixLayoutGrid$1 = /*@__PURE__*/ proxyCustomElement(class SixLayoutGrid ext
         this.handleColumnsChange();
     }
     render() {
-        return (h(Host, { key: '9d64b40f5853f79014a899a1f90bc91582f59ea4' }, h("slot", { key: '7a122ed9eec7ae326f96afa65a0f65e3d5beb6a7' })));
+        return (h(Host, { key: 'de90d25716b47f3735ca12087d2bf8abe80f6ece' }, h("slot", { key: '466a2342511748fe26d74ab5a73ca7e82679e81c' })));
     }
     get host() { return this; }
     static get watchers() { return {
         "columns": ["handleColumnsChange"]
     }; }
-    static get style() { return SixLayoutGridStyle0; }
+    static get style() { return sixLayoutGridCss; }
 }, [1, "six-layout-grid", {
         "columns": [1026]
     }, undefined, {
@@ -50,5 +48,6 @@ const SixLayoutGrid = SixLayoutGrid$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixLayoutGrid, defineCustomElement };
+//# sourceMappingURL=six-layout-grid.js.map
 
 //# sourceMappingURL=six-layout-grid.js.map

package/dist/components/six-layout-grid.js.map

@@ -1 +1 @@
-{"file":"six-layout-grid.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,kGAAkG,CAAC;AAC5H,4BAAe,gBAAgB;;MCalBA,eAAa;;;;;;;IAOxB,mBAAmB;QACjB,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,EAAE;YAC1D,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;SACnB;QACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KACtE;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixLayoutGrid"],"sources":["src/components/six-layout-grid/six-layout-grid.scss?tag=six-layout-grid&encapsulation=shadow","src/components/six-layout-grid/six-layout-grid.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: repeat(var(--no-of-columns), 1fr);\n  grid-column-gap: 1rem;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The grid's content\n */\n\n@Component({\n  tag: 'six-layout-grid',\n  styleUrl: 'six-layout-grid.scss',\n  shadow: true,\n})\nexport class SixLayoutGrid {\n  @Element() host!: HTMLSixLayoutGridElement;\n\n  /** Set the number of grid columns */\n  @Prop({ mutable: true }) columns?: number;\n\n  @Watch('columns')\n  handleColumnsChange() {\n    if (typeof this.columns !== 'number' || this.columns === 0) {\n      this.columns = 12;\n    }\n    this.host.style.setProperty('--no-of-columns', String(this.columns));\n  }\n\n  componentWillLoad() {\n    this.handleColumnsChange();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-layout-grid.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,kGAAkG;;MCc9GA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;IAOxB,mBAAmB,GAAA;AACjB,QAAA,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,EAAE;AAC1D,YAAA,IAAI,CAAC,OAAO,GAAG,EAAE;;AAEnB,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;;IAGtE,iBAAiB,GAAA;QACf,IAAI,CAAC,mBAAmB,EAAE;;IAG5B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixLayoutGrid","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-layout-grid/six-layout-grid.scss?tag=six-layout-grid&encapsulation=shadow","src/components/six-layout-grid/six-layout-grid.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: repeat(var(--no-of-columns), 1fr);\n  grid-column-gap: 1rem;\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The grid's content\n */\n\n@Component({\n  tag: 'six-layout-grid',\n  styleUrl: 'six-layout-grid.scss',\n  shadow: true,\n})\nexport class SixLayoutGrid {\n  @Element() host!: HTMLSixLayoutGridElement;\n\n  /** Set the number of grid columns */\n  @Prop({ mutable: true }) columns?: number;\n\n  @Watch('columns')\n  handleColumnsChange() {\n    if (typeof this.columns !== 'number' || this.columns === 0) {\n      this.columns = 12;\n    }\n    this.host.style.setProperty('--no-of-columns', String(this.columns));\n  }\n\n  componentWillLoad() {\n    this.handleColumnsChange();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}