@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.98c4058

package/dist/components/six-header.js

@@ -1,219 +1,70 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { E as EventListeners } from './event-listeners.js';
-import { g as getAvailableSlots } from './slot.js';
-import { d as defineCustomElement$7 } from './six-dropdown2.js';
-import { d as defineCustomElement$6 } from './six-icon2.js';
-import { d as defineCustomElement$5 } from './six-icon-button2.js';
-import { d as defineCustomElement$4 } from './six-input2.js';
-import { d as defineCustomElement$3 } from './six-menu2.js';
-import { d as defineCustomElement$2 } from './six-menu-item2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-BAe7gBEi.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { g as getSlot } from './p-j3oIB5oT.js';
 
-const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;box-shadow:var(--six-shadow-x-large);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__logo{width:6rem;margin-top:0.15rem}.six-header__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__menu,.six-header__logo,.six-header__custom,.six-header__search,.six-header__notification,.six-header__app-switcher,.six-header__profile{height:calc(100% - 0.25rem - 1px);padding:0 1.25rem;display:flex;align-items:center;border-bottom:solid 0.25rem transparent}.six-header__menu--open,.six-header__logo--open,.six-header__custom--open,.six-header__search--open,.six-header__notification--open,.six-header__app-switcher--open,.six-header__profile--open{border-bottom:solid 0.25rem var(--six-header-border-color-open)}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:var(--six-header-height);background-color:var(--six-header-background-color);align-items:stretch;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
 
-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);
-const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sixAppNameClicked = createEvent(this, "six-header-app-name-clicked", 7);
-    this.sixAppSwitcherSelect = createEvent(this, "six-header-app-switcher-select", 7);
-    this.sixProfileSelect = createEvent(this, "six-header-profile-select", 7);
-    this.sixHamburgerClick = createEvent(this, "six-header-hamburger-menu-clicked", 7);
-    this.sixLogoClick = createEvent(this, "six-header-logo-clicked", 7);
-    this.sixSearchFieldToggle = createEvent(this, "six-header-search-field-toggle", 7);
-    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;
+const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Indicates if content should be shifted down when search field is visible. */
+        this.shiftContent = false;
+        /**
+         * Set the header search input to be in an open or closed state.
+         *
+         * Focuses the first `six-input` found in the search slot.
+         */
+        this.openSearch = false;
+        this.eventListeners = new EventListeners();
     }
-    else if (openState && this.selectedSection !== Section.Search) {
-      this.selectedSection = Section.Search;
+    handleOpenSearchChange() {
+        if (this.openSearch) {
+            // deferred due to https://github.com/ionic-team/stencil/issues/3772
+            setTimeout(async () => { var _a, _b, _c; return (_c = (_b = (_a = getSlot(this.host, 'search-field')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('six-input')) === null || _c === void 0 ? void 0 : _c.setFocus(); }, 50);
+        }
     }
-  }
-  /** 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();
+    disconnectedCallback() {
+        this.eventListeners.removeAll();
     }
-    if (this.has(Slot.Search)) {
-      this.computeSearchOpenState();
+    render() {
+        return (h(Host, { key: '946ca876978cf1ebf631f50bc8f000ff0a92c281' }, h("header", { key: '8b678dc6e2ffbb4493ccd6c9e847d47c84266b3a', part: "header", class: "six-header" }, h("slot", { key: 'a2d343bec0bc9835fd64b02222de0c43e9d0f4a3' })), h("div", { key: '909b3039b8d9fa078dd3e83b3837d622a1fc6dd7', class: {
+                'six-header__search-field': true,
+                'six-header__search-field--visible': this.openSearch,
+                'six-header__search-field--shift-content': this.shiftContent,
+            } }, h("slot", { key: 'f90ee90f387bc62aa485dfa638f32acb1e81c71c', name: 'search-field' }))));
     }
-  }
-  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 assetsDirs() { return ["assets"]; }
-  get host() { return this; }
-  static get watchers() { return {
-    "openSearch": ["handleOpenSearchChange"]
-  }; }
-  static get style() { return sixHeaderCss; }
+    static get assetsDirs() { return ["assets"]; }
+    get host() { return this; }
+    static get watchers() { return {
+        "openSearch": ["handleOpenSearchChange"]
+    }; }
+    static get style() { return sixHeaderCss; }
 }, [1, "six-header", {
-    "shiftContent": [4, "shift-content"],
-    "openHamburgerMenu": [4, "open-hamburger-menu"],
-    "openSearch": [4, "open-search"],
-    "clickableLogo": [4, "clickable-logo"],
-    "selectedApp": [32],
-    "selectedSection": [32],
-    "setSearchOpenState": [64],
-    "getIsSearchOpen": [64]
-  }]);
+        "shiftContent": [4, "shift-content"],
+        "openSearch": [4, "open-search"]
+    }, undefined, {
+        "openSearch": ["handleOpenSearchChange"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-header", "six-dropdown", "six-icon", "six-icon-button", "six-input", "six-menu", "six-menu-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-header":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixHeader$1);
-      }
-      break;
-    case "six-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "six-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "six-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "six-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "six-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "six-menu-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixHeader$1);
+            }
+            break;
+    } });
 }
 
 const SixHeader = SixHeader$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixHeader, defineCustomElement };
+//# sourceMappingURL=six-header.js.map
 
 //# sourceMappingURL=six-header.js.map

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

@@ -1 +1 @@
-{"file":"six-header.js","mappings":"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","names":["SixHeader"],"sources":["./src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","./src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$header-height: 3.75rem;\n$border-height: 0.25rem;\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: $header-height;\n  background-color: var(--six-header-background-color);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: var(--six-shadow-x-large);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__logo {\n    width: 6rem;\n    margin-top: 0.15rem;\n\n    &--clickable {\n      cursor: pointer;\n    }\n  }\n\n  &__placeholder {\n    flex: 1;\n  }\n\n  &__menu,\n  &__logo,\n  &__custom,\n  &__search,\n  &__notification,\n  &__app-switcher,\n  &__profile {\n    height: calc(100% - #{$border-height} - 1px);\n    padding: 0 1.25rem;\n    display: flex;\n    align-items: center;\n    border-bottom: solid $border-height transparent;\n\n    &--open {\n      border-bottom: solid $border-height var(--six-header-border-color-open);\n    }\n  }\n\n  &__selected-app {\n    cursor: pointer;\n    font-size: 0.9rem;\n    font-weight: 600;\n    padding-right: 0;\n    padding-left: 0.3rem;\n    &:hover {\n      color: var(--six-header-selected-app-color-hover);\n    }\n  }\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","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"],"version":3}
+{"file":"six-header.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,oiCAAoiC;;MCe5iCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,GAAA;;;;;AAQU,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AAE5B;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAelB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,cAAc,EAAE;AAwB9C;IApCC,sBAAsB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,UAAU,CACR,8BAAY,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAClG,EAAE,CACH;;;IAQL,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,0BAA0B,EAAE,IAAI;gBAChC,mCAAmC,EAAE,IAAI,CAAC,UAAU;gBACpD,yCAAyC,EAAE,IAAI,CAAC,YAAY;AAC7D,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAE,cAAc,GAAI,CAC1B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n * @slot search-field - Used to define the search field component in the header.\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  /**\n   * Set the header search input to be in an open or closed state.\n   *\n   * Focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.openSearch) {\n      // deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(\n        async () => getSlot(this.host, 'search-field')?.shadowRoot?.querySelector('six-input')?.setFocus(),\n        50\n      );\n    }\n  }\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={'search-field'} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-icon-button.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixIconButton extends Components.SixIconButton, HTMLElement {}
 export const SixIconButton: {
-  prototype: SixIconButton;
-  new (): SixIconButton;
+    prototype: SixIconButton;
+    new (): SixIconButton;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-icon-button.js

@@ -1,8 +1,9 @@
-import { S as SixIconButton$1, d as defineCustomElement$1 } from './six-icon-button2.js';
+import { S as SixIconButton$1, d as defineCustomElement$1 } from './p-CIvx-Vfd.js';
 
 const SixIconButton = SixIconButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixIconButton, defineCustomElement };
+//# sourceMappingURL=six-icon-button.js.map
 
 //# sourceMappingURL=six-icon-button.js.map

package/dist/components/six-icon.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixIcon extends Components.SixIcon, HTMLElement {}
 export const SixIcon: {
-  prototype: SixIcon;
-  new (): SixIcon;
+    prototype: SixIcon;
+    new (): SixIcon;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-icon.js

@@ -1,8 +1,9 @@
-import { S as SixIcon$1, d as defineCustomElement$1 } from './six-icon2.js';
+import { S as SixIcon$1, d as defineCustomElement$1 } from './p-Q3Zlhwd0.js';
 
 const SixIcon = SixIcon$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixIcon, defineCustomElement };
+//# sourceMappingURL=six-icon.js.map
 
 //# sourceMappingURL=six-icon.js.map

package/dist/components/six-input.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixInput extends Components.SixInput, HTMLElement {}
 export const SixInput: {
-  prototype: SixInput;
-  new (): SixInput;
+    prototype: SixInput;
+    new (): SixInput;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-input.js

@@ -1,8 +1,9 @@
-import { S as SixInput$1, d as defineCustomElement$1 } from './six-input2.js';
+import { S as SixInput$1, d as defineCustomElement$1 } from './p-CRqqZ-BJ.js';
 
 const SixInput = SixInput$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixInput, defineCustomElement };
+//# sourceMappingURL=six-input.js.map
 
 //# sourceMappingURL=six-input.js.map

package/dist/components/six-item-picker.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixItemPicker extends Components.SixItemPicker, HTMLElement {}
 export const SixItemPicker: {
-  prototype: SixItemPicker;
-  new (): SixItemPicker;
+    prototype: SixItemPicker;
+    new (): SixItemPicker;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-item-picker.js

@@ -1,8 +1,9 @@
-import { S as SixItemPicker$1, d as defineCustomElement$1 } from './six-item-picker2.js';
+import { S as SixItemPicker$1, d as defineCustomElement$1 } from './p-D34Iwjco.js';
 
 const SixItemPicker = SixItemPicker$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixItemPicker, defineCustomElement };
+//# sourceMappingURL=six-item-picker.js.map
 
 //# sourceMappingURL=six-item-picker.js.map

package/dist/components/six-language-switcher.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixLanguageSwitcher extends Components.SixLanguageSwitcher, HTMLElement {}
 export const SixLanguageSwitcher: {
-  prototype: SixLanguageSwitcher;
-  new (): SixLanguageSwitcher;
+    prototype: SixLanguageSwitcher;
+    new (): SixLanguageSwitcher;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-language-switcher.js

@@ -1,82 +1,89 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
 
-const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-red)}.language-switcher__label--selected{color:var(--six-color-red)}";
+const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-web-rock-600)}.language-switcher__label:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.language-switcher__label--selected{color:var(--six-color-black);text-decoration:underline}";
 
 const DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];
-const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguageSwitcher extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sixChange = createEvent(this, "six-language-switcher-change", 7);
-    this.handleLanguageSwitching = (newLanguage, languageValue) => () => {
-      if (languageValue !== undefined) {
-        this.sixChange.emit(languageValue);
-      }
-      else {
-        this.sixChange.emit(newLanguage);
-      }
-      this.selected = newLanguage;
-    };
-    this.selected = undefined;
-    this.languages = DEFAULT_LANGUAGES;
-  }
-  handleChangesLanguages(newValue) {
-    if (!Array.isArray(newValue)) {
-      throw new Error('languages is expected to be an array');
+const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguageSwitcher extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixChange = createEvent(this, "six-language-switcher-change");
+        /** The languages which should be selectable options. */
+        this.languages = DEFAULT_LANGUAGES;
+        this.handleLanguageSwitching = (newLanguage, languageValue) => () => {
+            if (languageValue !== undefined) {
+                this.sixChange.emit(languageValue);
+            }
+            else {
+                this.sixChange.emit(newLanguage);
+            }
+            this.selected = newLanguage;
+        };
     }
-    this.updateSelectedLanguage();
-  }
-  componentWillLoad() {
-    if (this.selected === undefined) {
-      this.updateSelectedLanguage();
+    handleChangesLanguages(newValue) {
+        if (!Array.isArray(newValue)) {
+            throw new Error('languages is expected to be an array');
+        }
+        this.updateSelectedLanguage();
     }
-  }
-  updateSelectedLanguage() {
-    const selectedLanguage = this.languages[0];
-    if (typeof selectedLanguage === 'string') {
-      this.selected = selectedLanguage;
-      this.sixChange.emit(this.selected);
+    componentWillLoad() {
+        if (this.selected === undefined) {
+            this.updateSelectedLanguage();
+        }
     }
-    else {
-      this.selected = selectedLanguage.key;
-      this.sixChange.emit(selectedLanguage.value);
+    updateSelectedLanguage() {
+        const selectedLanguage = this.languages[0];
+        if (typeof selectedLanguage === 'string') {
+            this.selected = selectedLanguage;
+            this.sixChange.emit(this.selected);
+        }
+        else {
+            this.selected = selectedLanguage.key;
+            this.sixChange.emit(selectedLanguage.value);
+        }
     }
-  }
-  render() {
-    return (h("div", { part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
-      const language = typeof lang === 'string' ? lang : lang.key;
-      return (h("div", { onClick: this.handleLanguageSwitching(language, lang.value) }, h("span", { part: "label", class: {
-          'language-switcher__label': true,
-          'language-switcher__label--selected': this.selected === language,
-        } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "/"))));
-    })));
-  }
-  static get watchers() { return {
-    "languages": ["handleChangesLanguages"]
-  }; }
-  static get style() { return sixLanguageSwitcherCss; }
+    render() {
+        return (h("div", { key: '4cc6a1c89025bc9d7e1515f19a18ef1fc79879a0', part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
+            const language = typeof lang === 'string' ? lang : lang.key;
+            return (h("div", { onClick: this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        this.handleLanguageSwitching(language, typeof lang === 'string' ? lang : lang.value)();
+                    }
+                } }, h("span", { part: "label", tabindex: "0", class: {
+                    'language-switcher__label': true,
+                    'language-switcher__label--selected': this.selected === language,
+                } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "|"))));
+        })));
+    }
+    static get watchers() { return {
+        "languages": ["handleChangesLanguages"]
+    }; }
+    static get style() { return sixLanguageSwitcherCss; }
 }, [1, "six-language-switcher", {
-    "selected": [1537],
-    "languages": [16]
-  }]);
+        "selected": [1537],
+        "languages": [16]
+    }, undefined, {
+        "languages": ["handleChangesLanguages"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-language-switcher"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-language-switcher":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixLanguageSwitcher$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-language-switcher"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-language-switcher":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixLanguageSwitcher$1);
+            }
+            break;
+    } });
 }
 
 const SixLanguageSwitcher = SixLanguageSwitcher$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixLanguageSwitcher, defineCustomElement };
+//# sourceMappingURL=six-language-switcher.js.map
 
 //# sourceMappingURL=six-language-switcher.js.map