@six-group/ui-library 0.0.0-insider.a8d68c7 → 0.0.0-insider.a9875a1

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

@@ -1,20 +1,20 @@
-import { h, Host } from '@stencil/core';
-import { EventListeners } from '../../utils/event-listeners';
-import { getSlot, hasSlot } from '../../utils/slot';
+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["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["Search"] = "search-field";
+    Slot["Notifications"] = "notifications";
+    Slot["AppSwitcher"] = "app-switcher-menu";
+    Slot["Profile"] = "profile-menu";
+    Slot["Logo"] = "logo";
 })(Slot || (Slot = {}));
 /**
  * @since 1.0
@@ -28,407 +28,428 @@ var Slot;
  * @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.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;
+    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.openHamburgerMenu = false;
+        this.openSearch = false;
+        this.clickableLogo = false;
+        this.selectedApp = undefined;
+        this.selectedSection = undefined;
     }
-    else if (openState && this.selectedSection !== Section.Search) {
-      this.selectedSection = Section.Search;
+    handleOpenSearchChange() {
+        this.computeSearchOpenState();
     }
-  }
-  /** Get open state for search */
-  async getIsSearchOpen() {
-    return this.selectedSection === Section.Search;
-  }
-  hasSlot(slot) {
-    if (this.slots == null) {
-      return false;
+    /** 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;
+        }
     }
-    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);
+    /** Get open state for search */
+    async getIsSearchOpen() {
+        return this.selectedSection === Section.Search;
     }
-  }
-  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.selectedApp = this.getSelectedApp();
+    hasSlot(slot) {
+        if (this.slots == null) {
+            return false;
+        }
+        return this.slots[slot];
     }
-    if (this.hasSlot(Slot.Search)) {
-      this.computeSearchOpenState();
+    isSectionSelected(value) {
+        return value === this.selectedSection;
     }
-  }
-  getSelectedApp() {
-    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;
+    selectSection(section) {
+        return () => (this.selectedSection = section);
     }
-    const items = Array.from(element.querySelectorAll('six-menu-item'));
-    const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
-    return (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  render() {
-    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("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("six-icon-button", { name: "apps", slot: "trigger" }), 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" }, h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })), 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"
-      },
-      "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"
-            }
-          }
+    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);
         }
-      }, {
-        "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"
-            }
-          }
-        }
-      }, {
-        "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"
-            }
-          }
+    }
+    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();
         }
-      }, {
-        "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"
-            }
-          }
+        if (this.hasSlot(Slot.Search)) {
+            this.computeSearchOpenState();
         }
-      }, {
-        "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"
-            }
-          }
+    }
+    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 });
         }
-      }, {
-        "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"
-            }
-          }
+    }
+    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;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setSearchOpenState": {
-        "complexType": {
-          "signature": "(openState: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+        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 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("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("six-icon-button", { name: "apps", slot: "trigger" }), 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" }, h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })), 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"
+            },
+            "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"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets open state for search",
-          "tags": []
-        }
-      },
-      "getIsSearchOpen": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        };
+    }
+    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": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "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": []
+                }
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Get open state for search",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "openSearch",
-        "methodName": "handleOpenSearchChange"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "openSearch",
+                "methodName": "handleOpenSearchChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-header.js.map