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

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

@@ -1,420 +1,420 @@
-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 { 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"
+    }]; }
+}