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

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, getAssetPath, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { EventListeners } from '../../utils/event-listeners';
 import { getAvailableSlots } from '../../utils/slot';
 var Section;
@@ -31,14 +31,6 @@ const getSlots = getAvailableSlots(Slot);
  */
 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;
@@ -86,6 +78,12 @@ export class SixHeader {
     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();
@@ -126,295 +124,289 @@ export class SixHeader {
     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 })));
+      } }, 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 }))));
+      } }, 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: {
+      } }, 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 }))));
+      }, 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 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": {}
+  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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set whether the logo should be clickable"
+      "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"
       },
-      "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."
+      "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"
       },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
+      "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"
       }
-    }, {
-      "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"
+    };
+  }
+  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": "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": "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": "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": "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"
+            }
           }
         }
-      }
-    }, {
-      "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": "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": "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "setSearchOpenState": {
-      "complexType": {
-        "signature": "(openState: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "sixSearchFieldToggle",
+        "name": "six-header-search-field-toggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when search field is toggled."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets open state for search",
-        "tags": []
-      }
-    },
-    "getIsSearchOpen": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "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"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setSearchOpenState": {
+        "complexType": {
+          "signature": "(openState: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "Sets open state for search",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Get 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"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "openSearch",
+        "methodName": "handleOpenSearchChange"
+      }];
+  }
 }
+//# sourceMappingURL=six-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-header.js","sourceRoot":"","sources":["../../../src/components/six-header/six-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getAvailableSlots } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n  visible: boolean;\n}\n\nenum Section {\n  None,\n  Search,\n  Notifications,\n  AppSwitcher,\n  Profile,\n}\n\nenum Slot {\n  Search = 'search-field',\n  Notifications = 'notifications',\n  AppSwitcher = 'app-switcher-menu',\n  Profile = 'profile-menu',\n  Logo = 'logo',\n}\n\nconst getSlots = getAvailableSlots(Slot);\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - Used to define the notification component in the header.\n * @slot app-switcher-menu - Used to define the application switcher menu in the header.\n * @slot profile-menu - Used to define the profile menu in the header.\n * @slot profile-avatar - Used to define the avator in the header.\n */\n\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /** Set the hamburger menu icon to open or closed state */\n  @Prop() openHamburgerMenu = false;\n\n  /** Set the header search to be in an open or closed state */\n  @Prop() openSearch = false;\n\n  /** Set whether the logo should be clickable */\n  @Prop() clickableLogo = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    this.computeSearchOpenState();\n  }\n\n  /** Sets open state for search */\n  @Method()\n  async setSearchOpenState(openState: boolean) {\n    if (this.selectedSection === Section.Search && !openState) {\n      this.selectedSection = Section.None;\n    } else if (openState && this.selectedSection !== Section.Search) {\n      this.selectedSection = Section.Search;\n    }\n  }\n\n  /** Get open state for search */\n  @Method()\n  async getIsSearchOpen() {\n    return this.selectedSection === Section.Search;\n  }\n\n  /** Emitted when the name of the selected app is clicked. */\n  @Event({ eventName: 'six-header-app-name-clicked' })\n  sixAppNameClicked: EventEmitter<EmptyPayload>;\n\n  /** Emitted when a menu item is in the app switcher menu is selected. */\n  @Event({ eventName: 'six-header-app-switcher-select' })\n  sixAppSwitcherSelect: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n  /** Emitted when a menu item is in the profile menu is selected. */\n  @Event({ eventName: 'six-header-profile-select' })\n  sixProfileSelect: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /** Emitted when the hamburger menu is clicked. */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' })\n  sixHamburgerClick: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the header logo is clicked. */\n  @Event({ eventName: 'six-header-logo-clicked' })\n  sixLogoClick: EventEmitter<EmptyPayload>;\n\n  /** Emitted when search field is toggled. */\n  @Event({ eventName: 'six-header-search-field-toggle' })\n  sixSearchFieldToggle: EventEmitter<SixHeaderSearchFieldToggle>;\n\n  @Element() host: HTMLSixHeaderElement;\n\n  readonly eventListeners = new EventListeners();\n\n  slots: { readonly [K: string]: boolean };\n\n  @State() selectedApp: string;\n  @State() selectedSection: Section;\n\n  has = (slot: Slot) => this.slots[slot];\n\n  selected = (value: Section) => value === this.selectedSection;\n\n  select = (value: Section) => () => {\n    this.selectedSection = value;\n  };\n\n  toggleSearch = (value: Section) => () => {\n    if (value === Section.Search) {\n      const visible = this.selectedSection !== value;\n      if (visible) {\n        this.host.querySelector(`[slot=\"${Slot.Search}\"]`).shadowRoot.querySelector('six-input')?.setFocus();\n      }\n      this.sixSearchFieldToggle.emit({ visible });\n    }\n    this.selectedSection = this.selectedSection === value ? Section.None : value;\n  };\n\n  setupMenu = (el: HTMLSixIconButtonElement) => {\n    this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n  };\n\n  setupLogo = (el: HTMLSixIconButtonElement) => {\n    if (!this.clickableLogo) {\n      return;\n    }\n\n    this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n  };\n\n  setupProfile = (el: HTMLSixDropdownElement) => {\n    this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: CustomEvent) => {\n      const { name, item } = event.detail;\n      this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  setupAppSwitcher = (el: HTMLSixDropdownElement) => {\n    this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: CustomEvent) => {\n      const { name, item } = event.detail;\n      this.selectedApp = item.innerText;\n      this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  appNameClicked = () => this.sixAppNameClicked.emit();\n\n  computeSearchOpenState = () => {\n    this.selectedSection = this.openSearch ? Section.Search : Section.None;\n  };\n\n  componentWillLoad() {\n    this.slots = getSlots(this.host);\n\n    if (this.has(Slot.AppSwitcher)) {\n      this.selectedApp = this.getSelectedApp();\n    }\n\n    if (this.has(Slot.Search)) {\n      this.computeSearchOpenState();\n    }\n  }\n\n  private getSelectedApp() {\n    // there are more concise ways to select the first checked menu item, but this is one that works for jest\n    const element = this.host.querySelector(`[slot=\"${Slot.AppSwitcher}\"]`);\n    const items = Array.from(element.querySelectorAll('six-menu-item'));\n    const firstCheckedMenuItem = items.find((item: HTMLElement) => item.hasAttribute('checked'));\n    return firstCheckedMenuItem?.textContent;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    const search = this.has(Slot.Search) && (\n      <section\n        class={{\n          'six-header__search': true,\n          'six-header__search--open': this.selected(Section.Search),\n        }}\n      >\n        <six-icon-button name=\"search\" onClick={this.toggleSearch(Section.Search)} data-testid=\"search-trigger\" />\n      </section>\n    );\n\n    const notifications = this.has(Slot.Notifications) && (\n      <section class=\"six-header__notification\">\n        <slot name={Slot.Notifications} />\n      </section>\n    );\n\n    const appSwitcher = this.has(Slot.AppSwitcher) && (\n      <section\n        class={{\n          'six-header__app-switcher': true,\n          'six-header__app-switcher--open': this.selected(Section.AppSwitcher),\n        }}\n      >\n        <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n          {this.selectedApp}\n        </a>\n        <six-dropdown distance={13} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n          <six-icon-button name=\"apps\" slot=\"trigger\" />\n          <slot name={Slot.AppSwitcher} />\n        </six-dropdown>\n      </section>\n    );\n\n    const profile = this.has(Slot.Profile) && (\n      <section\n        class={{\n          'six-header__profile': true,\n          'six-header__profile--open': this.selected(Section.Profile),\n        }}\n      >\n        <six-dropdown distance={17} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n          <slot name=\"profile-avatar\" slot=\"trigger\" />\n          <slot name=\"profile-menu\" />\n        </six-dropdown>\n      </section>\n    );\n\n    const logo = this.has(Slot.Logo) ? (\n      <section>\n        <slot name=\"logo\" />\n      </section>\n    ) : (\n      <section\n        class={{\n          'six-header__logo': true,\n          'six-header__logo--clickable': this.clickableLogo,\n        }}\n        ref={this.setupLogo}\n      >\n        <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n          <title>SIX</title>\n          <g fill=\"#DE3919\" fill-rule=\"nonzero\">\n            <path d=\"m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525\" />\n            <path d=\"m42.16.324h5.21v24.806h-5.21z\" />\n            <path d=\"m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545\" />\n          </g>\n        </svg>\n      </section>\n    );\n\n    return (\n      <Host>\n        <header class=\"six-header\">\n          <section class=\"six-header__menu\">\n            <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n          </section>\n\n          {logo}\n\n          <section class=\"six-header__placeholder\" />\n\n          <section class=\"six-header__custom\">\n            <slot />\n          </section>\n\n          {search}\n\n          {notifications}\n\n          {appSwitcher}\n\n          {profile}\n        </header>\n\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.selected(Section.Search),\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}