@six-group/ui-library 0.0.0-insider.2b3efd5 → 0.0.0-insider.2c5f541

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

@@ -1,200 +1,33 @@
 import { h, Host } from "@stencil/core";
 import { EventListeners } from "../../utils/event-listeners";
-import { getSlot, hasSlot } from "../../utils/slot";
-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 = {}));
+import { getSlot } from "../../utils/slot";
 /**
  * @since 1.0
  * @status stable
- * @slot - Used to define a custom component that is included in the header.
  * @slot search-field - Used to define the search field component in the header.
- * @slot notifications - <span style="color:red">[Deprecated]</span>, use six-header `custom` property instead. Used to define the notification component in the header.
- * @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.
- * @slot profile-menu -  <span style="color:red">[Deprecated]</span>, use six-header `custom` property instead. Used to define the profile menu in the header.
- * @slot profile-avatar - <span style="color:red">[Deprecated]</span>, use six-header `custom` property instead. Used to define the avator in the header.
  */
 export class SixHeader {
     constructor() {
         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;
         this.shiftContent = false;
-        this.hideHamburgerMenu = false;
-        this.openHamburgerMenu = false;
         this.openSearch = false;
-        this.clickableLogo = false;
-        this.logo = 'six';
-        this.selectedApp = undefined;
-        this.selectedSection = undefined;
     }
     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);
-        }
-    }
-    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;
+        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);
         }
-        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: {
+        console.log('render', this.openSearch);
+        return (h(Host, { key: '52af99894d875dcaab9e43584e3f85a032ee5297' }, h("header", { key: '0de37377a1ec6137940c9dc06d6db2be650473c4', part: "header", class: "six-header" }, h("slot", { key: '5a236e823be39bbf26073ac7ff5413ef09c25bda' })), h("div", { key: '77182a4e207a72ba9400a2d13d3cfddfdb98668c', 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: '27cfb931af55b164761a22c11c320874ddac3e3a', name: 'search-field' }))));
     }
     static get is() { return "six-header"; }
     static get encapsulation() { return "shadow"; }
@@ -211,30 +44,6 @@ export class SixHeader {
     static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
-            "custom": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "since",
-                            "text": "4.2.7"
-                        }, {
-                            "name": "status",
-                            "text": "beta"
-                        }],
-                    "text": "Set `custom` to `true` for complete control over the header content. When enabled, all other properties and slots\nare ignored.\n\nUse `six-header-item`, `six-header-dropdown-item` and `six-header-menu-button` to structure the content."
-                },
-                "attribute": "custom",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "shiftContent": {
                 "type": "boolean",
                 "mutable": false,
@@ -253,48 +62,6 @@ export class SixHeader {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "hideHamburgerMenu": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property instead"
-                        }],
-                    "text": "Set whether the hamburger menu should be visible or not"
-                },
-                "attribute": "hide-hamburger-menu",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "openHamburgerMenu": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property instead"
-                        }],
-                    "text": "Set the hamburger menu icon to open or closed state"
-                },
-                "attribute": "open-hamburger-menu",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "openSearch": {
                 "type": "boolean",
                 "mutable": false,
@@ -307,254 +74,11 @@ export class SixHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the header search to be in an open or closed state.\n\nIf `custom` is `true`, focuses the first `six-input` found in the search slot."
+                    "text": "Set the header search input to be in an open or closed state.\n\nFocuses the first `six-input` found in the search slot."
                 },
                 "attribute": "open-search",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "clickableLogo": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property with `six-logo` instead"
-                        }],
-                    "text": "Set whether the logo should be clickable"
-                },
-                "attribute": "clickable-logo",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "logo": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'six' | 'bme'",
-                    "resolved": "\"bme\" | \"six\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property with `six-logo` instead"
-                        }],
-                    "text": "The displayed logo. Either six or bme. Defaults to six."
-                },
-                "attribute": "logo",
-                "reflect": false,
-                "defaultValue": "'six'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "selectedApp": {},
-            "selectedSection": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "sixAppNameClicked",
-                "name": "six-header-app-name-clicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead"
-                        }],
-                    "text": "Emitted when the name of the selected app is clicked."
-                },
-                "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
-                    "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixAppSwitcherSelect",
-                "name": "six-header-app-switcher-select",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead"
-                        }],
-                    "text": "Emitted when a menu item is in the app switcher menu is selected."
-                },
-                "complexType": {
-                    "original": "SixHeaderAppSwitcherSelectPayload",
-                    "resolved": "SixHeaderAppSwitcherSelectPayload",
-                    "references": {
-                        "SixHeaderAppSwitcherSelectPayload": {
-                            "location": "local",
-                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
-                            "id": "src/components/six-header/six-header.tsx::SixHeaderAppSwitcherSelectPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixProfileSelect",
-                "name": "six-header-profile-select",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property with `six-header-dropdown-item` and `six-avatar` instead"
-                        }],
-                    "text": "Emitted when a menu item is in the profile menu is selected."
-                },
-                "complexType": {
-                    "original": "SixHeaderProfileSelectPayload",
-                    "resolved": "SixHeaderProfileSelectPayload",
-                    "references": {
-                        "SixHeaderProfileSelectPayload": {
-                            "location": "local",
-                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
-                            "id": "src/components/six-header/six-header.tsx::SixHeaderProfileSelectPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixHamburgerClick",
-                "name": "six-header-hamburger-menu-clicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property instead"
-                        }],
-                    "text": "Emitted when the hamburger menu is clicked."
-                },
-                "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
-                    "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "logoClick",
-                "name": "six-header-logo-clicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property instead"
-                        }],
-                    "text": "Emitted when the header logo is clicked."
-                },
-                "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
-                    "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixSearchFieldToggle",
-                "name": "six-header-search-field-toggle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property instead"
-                        }],
-                    "text": "Emitted when search field is toggled."
-                },
-                "complexType": {
-                    "original": "SixHeaderSearchFieldToggle",
-                    "resolved": "SixHeaderSearchFieldToggle",
-                    "references": {
-                        "SixHeaderSearchFieldToggle": {
-                            "location": "local",
-                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
-                            "id": "src/components/six-header/six-header.tsx::SixHeaderSearchFieldToggle"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "setSearchOpenState": {
-                "complexType": {
-                    "signature": "(openState: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "openState",
-                            "type": "boolean",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets open state for search",
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property instead"
-                        }]
-                }
-            },
-            "getIsSearchOpen": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Get open state for search",
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use six-header `custom` property instead"
-                        }]
-                }
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"six-header.js","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"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","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;;;GAIG;AAOH,MAAM,OAAO,SAAS;;QAwBZ,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;4BAtBvB,KAAK;0BAOP,KAAK;;IAG1B,sBAAsB;QACpB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,oEAAoE;YACpE,UAAU,CACR,KAAK,IAAI,EAAE,mBAAC,OAAA,MAAA,MAAA,MAAA,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,0CAAE,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,0CAAE,QAAQ,EAAE,CAAA,EAAA,EAClG,EAAE,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAMD,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACvC,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY;gBACtC,8DAAQ,CACD;YACT,4DACE,KAAK,EAAE;oBACL,0BAA0B,EAAE,IAAI;oBAChC,mCAAmC,EAAE,IAAI,CAAC,UAAU;oBACpD,yCAAyC,EAAE,IAAI,CAAC,YAAY;iBAC7D;gBAED,6DAAM,IAAI,EAAE,cAAc,GAAI,CAC1B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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    console.log('render', this.openSearch);\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"]}

package/dist/collection/components/six-header-dropdown-item/six-header-dropdown-item.css

@@ -6,10 +6,8 @@
   padding: 0 var(--six-spacing-large);
   border-bottom: solid var(--six-header-border-height) transparent;
   border-top: solid var(--six-header-border-height) transparent;
-  transition: var(--six-transition-fast) border-color;
 }
 
 :host(.six-header-dropdown-item--active) {
   border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);
-  transition: var(--six-transition-fast) border-color;
 }