@six-group/ui-library 0.0.0-insider.012ddb2

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

@@ -0,0 +1,476 @@
+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 = {}));
+/**
+ * @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 - Used to define the notification component in the header.
+ * @slot app-switcher-menu - Used to define the application switcher menu in the header.
+ * @slot profile-menu - Used to define the profile menu in the header.
+ * @slot profile-avatar - 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.sixLogoClick.emit());
+        };
+        this.setupProfile = (el) => {
+            if (el == null)
+                return;
+            this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));
+            this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
+            this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
+                const { name, item } = event.detail;
+                this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });
+            });
+        };
+        this.setupAppSwitcher = (el) => {
+            if (el == null)
+                return;
+            this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));
+            this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
+            this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
+                const { name, item } = event.detail;
+                this.selectedApp = item.innerText;
+                this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });
+            });
+        };
+        this.appNameClicked = () => this.sixAppNameClicked.emit();
+        this.computeSearchOpenState = () => {
+            this.selectedSection = this.openSearch ? Section.Search : Section.None;
+        };
+        this.shiftContent = false;
+        this.hideHamburgerMenu = false;
+        this.openHamburgerMenu = false;
+        this.openSearch = false;
+        this.clickableLogo = false;
+        this.selectedApp = undefined;
+        this.selectedSection = undefined;
+    }
+    handleOpenSearchChange() {
+        this.computeSearchOpenState();
+    }
+    /** Sets open state for search */
+    async setSearchOpenState(openState) {
+        if (this.selectedSection === Section.Search && !openState) {
+            this.selectedSection = Section.None;
+        }
+        else if (openState && this.selectedSection !== Section.Search) {
+            this.selectedSection = Section.Search;
+        }
+    }
+    /** Get open state for search */
+    async getIsSearchOpen() {
+        return this.selectedSection === Section.Search;
+    }
+    hasSlot(slot) {
+        if (this.slots == null) {
+            return false;
+        }
+        return this.slots[slot];
+    }
+    isSectionSelected(value) {
+        return value === this.selectedSection;
+    }
+    selectSection(section) {
+        return () => (this.selectedSection = section);
+    }
+    toggleSearch() {
+        const visible = this.selectedSection !== Section.Search;
+        this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;
+        this.sixSearchFieldToggle.emit({ visible });
+        if (this.selectedSection === Section.Search) {
+            // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772
+            setTimeout(async () => {
+                var _a, _b;
+                const slot = getSlot(this.host, Slot.Search);
+                (_b = (_a = slot === null || slot === void 0 ? void 0 : slot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.setFocus();
+            }, 50);
+        }
+    }
+    componentWillLoad() {
+        this.slots = {
+            [Slot.Search]: hasSlot(this.host, Slot.Search),
+            [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),
+            [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),
+            [Slot.Profile]: hasSlot(this.host, Slot.Profile),
+            [Slot.Logo]: hasSlot(this.host, Slot.Logo),
+        };
+        if (this.hasSlot(Slot.AppSwitcher)) {
+            this.updateSelectedApp();
+        }
+        if (this.hasSlot(Slot.Search)) {
+            this.computeSearchOpenState();
+        }
+    }
+    connectedCallback() {
+        const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);
+        if (appSwitcherSlot) {
+            this.mutationObserver = new MutationObserver((mutations) => {
+                if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {
+                    this.updateSelectedApp();
+                }
+            });
+            this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });
+        }
+    }
+    updateSelectedApp() {
+        var _a;
+        // there are more concise ways to select the first checked menu item, but this is one that works for jest
+        const element = getSlot(this.host, Slot.AppSwitcher);
+        if (element == null) {
+            return undefined;
+        }
+        const items = Array.from(element.querySelectorAll('six-menu-item'));
+        const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false');
+        this.selectedApp = (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
+    }
+    disconnectedCallback() {
+        var _a;
+        this.eventListeners.removeAll();
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        const hamburgerMenu = !this.hideHamburgerMenu && (h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })));
+        const search = this.hasSlot(Slot.Search) && (h("section", { class: {
+                'six-header__search': true,
+                'six-header__search--open': this.isSectionSelected(Section.Search),
+            } }, h("six-icon-button", { name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
+        const notifications = this.hasSlot(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
+        const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
+                'six-header__app-switcher': true,
+                'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
+            } }, h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { name: "apps" })), h("slot", { name: Slot.AppSwitcher }))));
+        const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
+                'six-header__profile': true,
+                'six-header__profile--open': this.isSectionSelected(Section.Profile),
+            } }, h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { name: "profile-avatar", slot: "trigger" }), h("slot", { name: "profile-menu" }))));
+        const logo = this.hasSlot(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
+                'six-header__logo': true,
+                'six-header__logo--clickable': this.clickableLogo,
+            }, ref: this.setupLogo }, h("svg", { height: "20", viewBox: "0 0 90 26", xmlns: "http://www.w3.org/2000/svg" }, h("title", null, "SIX"), h("g", { fill: "#DE3919", "fill-rule": "nonzero" }, h("path", { d: "m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525" }), h("path", { d: "m42.16.324h5.21v24.806h-5.21z" }), h("path", { d: "m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545" })))));
+        return (h(Host, null, h("header", { class: "six-header" }, hamburgerMenu, logo, h("section", { class: "six-header__placeholder" }), h("section", { class: "six-header__custom" }, h("slot", null)), search, notifications, appSwitcher, profile), h("div", { class: {
+                'six-header__search-field': true,
+                'six-header__search-field--visible': this.isSectionSelected(Section.Search),
+                'six-header__search-field--shift-content': this.shiftContent,
+            } }, h("slot", { name: Slot.Search }))));
+    }
+    static get is() { return "six-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-header.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "shiftContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if content should be shifted down when search field is visible."
+                },
+                "attribute": "shift-content",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideHamburgerMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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": [],
+                    "text": "Set the hamburger menu icon to open or closed state"
+                },
+                "attribute": "open-hamburger-menu",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "openSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the header search to be in an open or closed state"
+                },
+                "attribute": "open-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clickableLogo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set whether the logo should be clickable"
+                },
+                "attribute": "clickable-logo",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    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": [],
+                    "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": [],
+                    "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": [],
+                    "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": [],
+                    "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": "sixLogoClick",
+                "name": "six-header-logo-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "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": [],
+                    "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": []
+                }
+            },
+            "getIsSearchOpen": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Get open state for search",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "openSearch",
+                "methodName": "handleOpenSearchChange"
+            }];
+    }
+}
+//# sourceMappingURL=six-header.js.map

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

@@ -0,0 +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 *\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 - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n */\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  /** Set whether the hamburger menu should be visible or not */\n  @Prop() hideHamburgerMenu = false;\n\n  /** Set the hamburger menu icon to open or closed state */\n  @Prop() openHamburgerMenu = false;\n\n  /** Set the header search to be in an open or closed state */\n  @Prop() openSearch = false;\n\n  /** Set whether the logo should be clickable */\n  @Prop() clickableLogo = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    this.computeSearchOpenState();\n  }\n\n  /** Sets open state for search */\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  /** Get open state for search */\n  @Method()\n  async getIsSearchOpen() {\n    return this.selectedSection === Section.Search;\n  }\n\n  /** Emitted when the name of the selected app is clicked. */\n  @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when a menu item is in the app switcher menu is selected. */\n  @Event({ eventName: 'six-header-app-switcher-select' })\n  sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n  /** Emitted when a menu item is in the profile menu is selected. */\n  @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /** Emitted when the hamburger menu is clicked. */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the header logo is clicked. */\n  @Event({ eventName: 'six-header-logo-clicked' }) sixLogoClick!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when search field is toggled. */\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.sixLogoClick.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      <section class=\"six-header__menu\">\n        <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n      </section>\n    );\n\n    const search = this.hasSlot(Slot.Search) && (\n      <section\n        class={{\n          'six-header__search': true,\n          'six-header__search--open': this.isSectionSelected(Section.Search),\n        }}\n      >\n        <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n      </section>\n    );\n\n    const notifications = this.hasSlot(Slot.Notifications) && (\n      <section class=\"six-header__notification\">\n        <slot name={Slot.Notifications} />\n      </section>\n    );\n\n    const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n      <section\n        class={{\n          'six-header__app-switcher': true,\n          'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),\n        }}\n      >\n        <six-dropdown distance={13} 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      </section>\n    );\n\n    const profile = this.hasSlot(Slot.Profile) && (\n      <section\n        class={{\n          'six-header__profile': true,\n          'six-header__profile--open': this.isSectionSelected(Section.Profile),\n        }}\n      >\n        <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n          <slot name=\"profile-avatar\" slot=\"trigger\" />\n          <slot name=\"profile-menu\" />\n        </six-dropdown>\n      </section>\n    );\n\n    const logo = this.hasSlot(Slot.Logo) ? (\n      <section>\n        <slot name=\"logo\" />\n      </section>\n    ) : (\n      <section\n        class={{\n          'six-header__logo': true,\n          'six-header__logo--clickable': this.clickableLogo,\n        }}\n        ref={this.setupLogo}\n      >\n        <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n          <title>SIX</title>\n          <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n            <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n            <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n            <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n          </g>\n        </svg>\n      </section>\n    );\n\n    return (\n      <Host>\n        <header class=\"six-header\">\n          {hamburgerMenu}\n\n          {logo}\n\n          <section class=\"six-header__placeholder\" />\n\n          <section class=\"six-header__custom\">\n            <slot />\n          </section>\n\n          {search}\n\n          {notifications}\n\n          {appSwitcher}\n\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}\n"]}