@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

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

@@ -1,420 +1,412 @@
-import { Component, Element, Event, getAssetPath, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
-import { EventListeners } from '../../utils/event-listeners';
-import { getAvailableSlots } from '../../utils/slot';
-var Section;
-(function (Section) {
-  Section[Section["None"] = 0] = "None";
-  Section[Section["Search"] = 1] = "Search";
-  Section[Section["Notifications"] = 2] = "Notifications";
-  Section[Section["AppSwitcher"] = 3] = "AppSwitcher";
-  Section[Section["Profile"] = 4] = "Profile";
-})(Section || (Section = {}));
-var Slot;
-(function (Slot) {
-  Slot["Search"] = "search-field";
-  Slot["Notifications"] = "notifications";
-  Slot["AppSwitcher"] = "app-switcher-menu";
-  Slot["Profile"] = "profile-menu";
-  Slot["Logo"] = "logo";
-})(Slot || (Slot = {}));
-const getSlots = getAvailableSlots(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() {
-    /** Indicates if content should be shifted down when search field is visible. */
-    this.shiftContent = false;
-    /** Set the hamburger menu icon to open or closed state */
-    this.openHamburgerMenu = false;
-    /** Set the header search to be in an open or closed state */
-    this.openSearch = false;
-    /** Set whether the logo should be clickable */
-    this.clickableLogo = false;
-    this.eventListeners = new EventListeners();
-    this.has = (slot) => this.slots[slot];
-    this.selected = (value) => value === this.selectedSection;
-    this.select = (value) => () => {
-      this.selectedSection = value;
-    };
-    this.toggleSearch = (value) => () => {
-      var _a;
-      if (value === Section.Search) {
-        const visible = this.selectedSection !== value;
-        if (visible) {
-          (_a = this.host.querySelector(`[slot="${Slot.Search}"]`).shadowRoot.querySelector('six-input')) === null || _a === void 0 ? void 0 : _a.setFocus();
-        }
-        this.sixSearchFieldToggle.emit({ visible });
-      }
-      this.selectedSection = this.selectedSection === value ? Section.None : value;
-    };
-    this.setupMenu = (el) => {
-      this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
-    };
-    this.setupLogo = (el) => {
-      if (!this.clickableLogo) {
-        return;
-      }
-      this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
-    };
-    this.setupProfile = (el) => {
-      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));
-      this.eventListeners.add(el, 'six-dropdown-hide', this.select(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) => {
-      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));
-      this.eventListeners.add(el, 'six-dropdown-hide', this.select(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;
-    };
-  }
-  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;
-  }
-  componentWillLoad() {
-    this.slots = getSlots(this.host);
-    if (this.has(Slot.AppSwitcher)) {
-      this.selectedApp = this.getSelectedApp();
-    }
-    if (this.has(Slot.Search)) {
-      this.computeSearchOpenState();
-    }
-  }
-  getSelectedApp() {
-    // there are more concise ways to select the first checked menu item, but this is one that works for jest
-    const element = this.host.querySelector(`[slot="${Slot.AppSwitcher}"]`);
-    const items = Array.from(element.querySelectorAll('six-menu-item'));
-    const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
-    return firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent;
-  }
-  disconnectedCallback() {
-    this.eventListeners.removeAll();
-  }
-  render() {
-    const search = this.has(Slot.Search) && (h("section", { class: {
-        'six-header__search': true,
-        'six-header__search--open': this.selected(Section.Search),
-      } },
-      h("six-icon-button", { name: "search", onClick: this.toggleSearch(Section.Search), "data-testid": "search-trigger" })));
-    const notifications = this.has(Slot.Notifications) && (h("section", { class: "six-header__notification" },
-      h("slot", { name: Slot.Notifications })));
-    const appSwitcher = this.has(Slot.AppSwitcher) && (h("section", { class: {
-        'six-header__app-switcher': true,
-        'six-header__app-switcher--open': this.selected(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.has(Slot.Profile) && (h("section", { class: {
-        'six-header__profile': true,
-        'six-header__profile--open': this.selected(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.has(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("img", { src: getAssetPath(`./assets/six-logo.svg`), height: "20", alt: "SIX" })));
-    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.selected(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"
-          }
-        }
-      }
-    }, {
-      "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"
-          }
-        }
-      }
-    }, {
-      "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"
-          }
-        }
-      }
-    }, {
-      "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"
-          }
-        }
-      }
-    }, {
-      "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"
-          }
-        }
-      }
-    }, {
-      "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"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "setSearchOpenState": {
-      "complexType": {
-        "signature": "(openState: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets open state for search",
-        "tags": []
-      }
-    },
-    "getIsSearchOpen": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Get open state for search",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "openSearch",
-      "methodName": "handleOpenSearchChange"
-    }]; }
-}
+import { h, Host } from '@stencil/core';
+import { EventListeners } from '../../utils/event-listeners';
+import { getAvailableSlots } from '../../utils/slot';
+var Section;
+(function (Section) {
+  Section[Section["None"] = 0] = "None";
+  Section[Section["Search"] = 1] = "Search";
+  Section[Section["Notifications"] = 2] = "Notifications";
+  Section[Section["AppSwitcher"] = 3] = "AppSwitcher";
+  Section[Section["Profile"] = 4] = "Profile";
+})(Section || (Section = {}));
+var Slot;
+(function (Slot) {
+  Slot["Search"] = "search-field";
+  Slot["Notifications"] = "notifications";
+  Slot["AppSwitcher"] = "app-switcher-menu";
+  Slot["Profile"] = "profile-menu";
+  Slot["Logo"] = "logo";
+})(Slot || (Slot = {}));
+const getSlots = getAvailableSlots(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.has = (slot) => this.slots[slot];
+    this.selected = (value) => value === this.selectedSection;
+    this.select = (value) => () => {
+      this.selectedSection = value;
+    };
+    this.toggleSearch = (value) => () => {
+      var _a;
+      if (value === Section.Search) {
+        const visible = this.selectedSection !== value;
+        if (visible) {
+          (_a = this.host.querySelector(`[slot="${Slot.Search}"]`).shadowRoot.querySelector('six-input')) === null || _a === void 0 ? void 0 : _a.setFocus();
+        }
+        this.sixSearchFieldToggle.emit({ visible });
+      }
+      this.selectedSection = this.selectedSection === value ? Section.None : value;
+    };
+    this.setupMenu = (el) => {
+      this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
+    };
+    this.setupLogo = (el) => {
+      if (!this.clickableLogo) {
+        return;
+      }
+      this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
+    };
+    this.setupProfile = (el) => {
+      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.select(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) => {
+      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.select(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;
+    }
+    else if (openState && this.selectedSection !== Section.Search) {
+      this.selectedSection = Section.Search;
+    }
+  }
+  /** Get open state for search */
+  async getIsSearchOpen() {
+    return this.selectedSection === Section.Search;
+  }
+  componentWillLoad() {
+    this.slots = getSlots(this.host);
+    if (this.has(Slot.AppSwitcher)) {
+      this.selectedApp = this.getSelectedApp();
+    }
+    if (this.has(Slot.Search)) {
+      this.computeSearchOpenState();
+    }
+  }
+  getSelectedApp() {
+    // there are more concise ways to select the first checked menu item, but this is one that works for jest
+    const element = this.host.querySelector(`[slot="${Slot.AppSwitcher}"]`);
+    const items = Array.from(element.querySelectorAll('six-menu-item'));
+    const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
+    return firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent;
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  render() {
+    const search = this.has(Slot.Search) && (h("section", { class: {
+        'six-header__search': true,
+        'six-header__search--open': this.selected(Section.Search),
+      } }, h("six-icon-button", { name: "search", onClick: this.toggleSearch(Section.Search), "data-testid": "search-trigger" })));
+    const notifications = this.has(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
+    const appSwitcher = this.has(Slot.AppSwitcher) && (h("section", { class: {
+        'six-header__app-switcher': true,
+        'six-header__app-switcher--open': this.selected(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.has(Slot.Profile) && (h("section", { class: {
+        'six-header__profile': true,
+        'six-header__profile--open': this.selected(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.has(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.selected(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"
+            }
+          }
+        }
+      }, {
+        "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/packages/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/packages/ui-library/src/components/six-header/six-header.tsx"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }, {
+        "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/packages/ui-library/src/components/six-header/six-header.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setSearchOpenState": {
+        "complexType": {
+          "signature": "(openState: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets open state for search",
+          "tags": []
+        }
+      },
+      "getIsSearchOpen": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "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