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

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

@@ -1,13 +1,12 @@
-import { h, Host } from '@stencil/core';
-import { EventListeners } from '../../utils/event-listeners';
-import { getAvailableSlots } from '../../utils/slot';
+import { h, Host } from "@stencil/core";
+import { EventListeners } from "../../utils/event-listeners";
+import { getSlot, hasSlot } from "../../utils/slot";
 var Section;
 (function (Section) {
   Section[Section["None"] = 0] = "None";
   Section[Section["Search"] = 1] = "Search";
-  Section[Section["Notifications"] = 2] = "Notifications";
-  Section[Section["AppSwitcher"] = 3] = "AppSwitcher";
-  Section[Section["Profile"] = 4] = "Profile";
+  Section[Section["AppSwitcher"] = 2] = "AppSwitcher";
+  Section[Section["Profile"] = 3] = "Profile";
 })(Section || (Section = {}));
 var Slot;
 (function (Slot) {
@@ -17,7 +16,6 @@ var Slot;
   Slot["Profile"] = "profile-menu";
   Slot["Logo"] = "logo";
 })(Slot || (Slot = {}));
-const getSlots = getAvailableSlots(Slot);
 /**
  * @since 1.0
  * @status stable
@@ -32,42 +30,31 @@ const getSlots = getAvailableSlots(Slot);
 export class SixHeader {
   constructor() {
     this.eventListeners = new EventListeners();
-    this.has = (slot) => this.slots[slot];
-    this.selected = (value) => value === this.selectedSection;
-    this.select = (value) => () => {
-      this.selectedSection = value;
-    };
-    this.toggleSearch = (value) => () => {
-      var _a;
-      if (value === Section.Search) {
-        const visible = this.selectedSection !== value;
-        if (visible) {
-          (_a = this.host.querySelector(`[slot="${Slot.Search}"]`).shadowRoot.querySelector('six-input')) === null || _a === void 0 ? void 0 : _a.setFocus();
-        }
-        this.sixSearchFieldToggle.emit({ visible });
-      }
-      this.selectedSection = this.selectedSection === value ? Section.None : value;
-    };
     this.setupMenu = (el) => {
+      if (el == null)
+        return;
       this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
     };
     this.setupLogo = (el) => {
-      if (!this.clickableLogo) {
+      if (!this.clickableLogo || el == null)
         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));
+      if (el == null)
+        return;
+      this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
       this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
         const { name, item } = event.detail;
         this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });
       });
     };
     this.setupAppSwitcher = (el) => {
-      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));
-      this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));
+      if (el == null)
+        return;
+      this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
       this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
         const { name, item } = event.detail;
         this.selectedApp = item.innerText;
@@ -101,46 +88,81 @@ export class SixHeader {
   async getIsSearchOpen() {
     return this.selectedSection === Section.Search;
   }
+  hasSlot(slot) {
+    if (this.slots == null) {
+      return false;
+    }
+    return this.slots[slot];
+  }
+  isSectionSelected(value) {
+    return value === this.selectedSection;
+  }
+  selectSection(section) {
+    return () => (this.selectedSection = section);
+  }
+  toggleSearch() {
+    const visible = this.selectedSection !== Section.Search;
+    this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;
+    this.sixSearchFieldToggle.emit({ visible });
+    if (this.selectedSection === Section.Search) {
+      // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772
+      setTimeout(async () => {
+        var _a, _b;
+        const slot = getSlot(this.host, Slot.Search);
+        (_b = (_a = slot === null || slot === void 0 ? void 0 : slot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.setFocus();
+      }, 50);
+    }
+  }
   componentWillLoad() {
-    this.slots = getSlots(this.host);
-    if (this.has(Slot.AppSwitcher)) {
+    this.slots = {
+      [Slot.Search]: hasSlot(this.host, Slot.Search),
+      [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),
+      [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),
+      [Slot.Profile]: hasSlot(this.host, Slot.Profile),
+      [Slot.Logo]: hasSlot(this.host, Slot.Logo),
+    };
+    if (this.hasSlot(Slot.AppSwitcher)) {
       this.selectedApp = this.getSelectedApp();
     }
-    if (this.has(Slot.Search)) {
+    if (this.hasSlot(Slot.Search)) {
       this.computeSearchOpenState();
     }
   }
   getSelectedApp() {
+    var _a;
     // there are more concise ways to select the first checked menu item, but this is one that works for jest
-    const element = this.host.querySelector(`[slot="${Slot.AppSwitcher}"]`);
+    const element = getSlot(this.host, Slot.AppSwitcher);
+    if (element == null) {
+      return undefined;
+    }
     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;
+    return (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
   }
   disconnectedCallback() {
     this.eventListeners.removeAll();
   }
   render() {
-    const search = this.has(Slot.Search) && (h("section", { class: {
+    const search = this.hasSlot(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__search--open': this.isSectionSelected(Section.Search),
+      } }, h("six-icon-button", { name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
+    const notifications = this.hasSlot(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
+    const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
         'six-header__app-switcher': true,
-        'six-header__app-switcher--open': this.selected(Section.AppSwitcher),
+        'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
       } }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("six-icon-button", { name: "apps", slot: "trigger" }), h("slot", { name: Slot.AppSwitcher }))));
-    const profile = this.has(Slot.Profile) && (h("section", { class: {
+    const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
         'six-header__profile': true,
-        'six-header__profile--open': this.selected(Section.Profile),
+        'six-header__profile--open': this.isSectionSelected(Section.Profile),
       } }, h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { name: "profile-avatar", slot: "trigger" }), h("slot", { name: "profile-menu" }))));
-    const logo = this.has(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
+    const logo = this.hasSlot(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
         'six-header__logo': true,
         'six-header__logo--clickable': this.clickableLogo,
       }, ref: this.setupLogo }, h("svg", { height: "20", viewBox: "0 0 90 26", xmlns: "http://www.w3.org/2000/svg" }, h("title", null, "SIX"), h("g", { fill: "#DE3919", "fill-rule": "nonzero" }, h("path", { d: "m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525" }), h("path", { d: "m42.16.324h5.21v24.806h-5.21z" }), h("path", { d: "m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545" })))));
     return (h(Host, null, h("header", { class: "six-header" }, h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })), logo, h("section", { class: "six-header__placeholder" }), h("section", { class: "six-header__custom" }, h("slot", null)), search, notifications, appSwitcher, profile), h("div", { class: {
         'six-header__search-field': true,
-        'six-header__search-field--visible': this.selected(Section.Search),
+        'six-header__search-field--visible': this.isSectionSelected(Section.Search),
         'six-header__search-field--shift-content': this.shiftContent,
       } }, h("slot", { name: Slot.Search }))));
   }
@@ -256,7 +278,8 @@ export class SixHeader {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -276,7 +299,8 @@ export class SixHeader {
           "references": {
             "SixHeaderAppSwitcherSelectPayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
+              "id": "src/components/six-header/six-header.tsx::SixHeaderAppSwitcherSelectPayload"
             }
           }
         }
@@ -296,7 +320,8 @@ export class SixHeader {
           "references": {
             "SixHeaderProfileSelectPayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
+              "id": "src/components/six-header/six-header.tsx::SixHeaderProfileSelectPayload"
             }
           }
         }
@@ -316,7 +341,8 @@ export class SixHeader {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -336,7 +362,8 @@ export class SixHeader {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -356,7 +383,8 @@ export class SixHeader {
           "references": {
             "SixHeaderSearchFieldToggle": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
+              "id": "src/components/six-header/six-header.tsx::SixHeaderSearchFieldToggle"
             }
           }
         }
@@ -373,7 +401,8 @@ export class SixHeader {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -389,7 +418,8 @@ export class SixHeader {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<boolean>"

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

@@ -1 +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"]}
+{"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 { getSlot, hasSlot } 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  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\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' }) 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' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /** Emitted when the hamburger menu is clicked. */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the header logo is clicked. */\n  @Event({ eventName: 'six-header-logo-clicked' }) 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  private eventListeners = new EventListeners();\n\n  private slots?: Record<Slot, boolean>;\n\n  @State() selectedApp?: string;\n  @State() selectedSection?: Section;\n\n  private hasSlot(slot: Slot): boolean {\n    if (this.slots == null) {\n      return false;\n    }\n    return this.slots[slot];\n  }\n\n  private isSectionSelected(value: Section) {\n    return value === this.selectedSection;\n  }\n\n  private selectSection(section: Section) {\n    return () => (this.selectedSection = section);\n  }\n\n  private toggleSearch() {\n    const visible = this.selectedSection !== Section.Search;\n    this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n    this.sixSearchFieldToggle.emit({ visible });\n    if (this.selectedSection === Section.Search) {\n      // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(async () => {\n        const slot = getSlot(this.host, Slot.Search);\n        slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n      }, 50);\n    }\n  }\n\n  private setupMenu = (el?: HTMLSixIconButtonElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n  };\n\n  private setupLogo = (el?: HTMLElement) => {\n    if (!this.clickableLogo || el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());\n  };\n\n  private setupProfile = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.selectedApp = item.innerText;\n      this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private appNameClicked = () => this.sixAppNameClicked.emit();\n\n  private computeSearchOpenState = () => {\n    this.selectedSection = this.openSearch ? Section.Search : Section.None;\n  };\n\n  componentWillLoad() {\n    this.slots = {\n      [Slot.Search]: hasSlot(this.host, Slot.Search),\n      [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n      [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n      [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n      [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n    };\n\n    if (this.hasSlot(Slot.AppSwitcher)) {\n      this.selectedApp = this.getSelectedApp();\n    }\n\n    if (this.hasSlot(Slot.Search)) {\n      this.computeSearchOpenState();\n    }\n  }\n\n  private getSelectedApp(): string | undefined {\n    // there are more concise ways to select the first checked menu item, but this is one that works for jest\n    const element = getSlot(this.host, Slot.AppSwitcher);\n    if (element == null) {\n      return undefined;\n    }\n    const items = Array.from(element.querySelectorAll('six-menu-item'));\n    const firstCheckedMenuItem = items.find((item: HTMLElement) => item.hasAttribute('checked'));\n    return firstCheckedMenuItem?.textContent ?? undefined;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    const search = this.hasSlot(Slot.Search) && (\n      <section\n        class={{\n          'six-header__search': true,\n          'six-header__search--open': this.isSectionSelected(Section.Search),\n        }}\n      >\n        <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n      </section>\n    );\n\n    const notifications = this.hasSlot(Slot.Notifications) && (\n      <section class=\"six-header__notification\">\n        <slot name={Slot.Notifications} />\n      </section>\n    );\n\n    const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n      <section\n        class={{\n          'six-header__app-switcher': true,\n          'six-header__app-switcher--open': this.isSectionSelected(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.hasSlot(Slot.Profile) && (\n      <section\n        class={{\n          'six-header__profile': true,\n          'six-header__profile--open': this.isSectionSelected(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.hasSlot(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.isSectionSelected(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"]}

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

@@ -0,0 +1,133 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixHeader } from "../six-header";
+describe('six-header', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixHeader],
+      html: `<six-header></six-header>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-header>
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__menu">
+              <six-icon-button name="menu"></six-icon-button>
+            </section>
+            <section class="six-header__logo">
+             <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
+               <title>
+                 SIX
+               </title>
+               <g fill="#DE3919" fill-rule="nonzero">
+                 <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"></path>
+                 <path d="m42.16.324h5.21v24.806h-5.21z"></path>
+                 <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"></path>
+               </g>
+             </svg>
+
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+      </six-header>
+    `);
+  });
+  it('should render custom logo ', async () => {
+    // given
+    const html = `<six-header><div slot="logo">custom logo</div></six-header>`;
+    // when
+    const page = await newSpecPage({
+      components: [SixHeader],
+      html: html,
+    });
+    // then
+    expect(page.root).toEqualHtml(`
+      <six-header>
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__menu">
+              <six-icon-button name="menu"></six-icon-button>
+            </section>
+            <section>
+               <slot name="logo"></slot>
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+          <div slot="logo">
+            custom logo
+          </div>
+      </six-header>
+    `);
+  });
+  it('should render app switcher', async () => {
+    // given
+    const html = `<six-header>
+                    <six-menu slot="app-switcher-menu">
+                      <six-menu-item checked="checked">Custody</six-menu-item>
+                      <six-menu-item>Swiss Interbank Clearing</six-menu-item>
+                    </six-menu>
+                  </six-header>`;
+    // when
+    const page = await newSpecPage({
+      components: [SixHeader],
+      html: html,
+    });
+    // then
+    expect(page.root).toEqualHtml(`
+      <six-header>
+        <mock:shadow-root>
+          <header class="six-header">
+            <section class="six-header__menu">
+              <six-icon-button name="menu"></six-icon-button>
+            </section>
+            <section class="six-header__logo">
+             <svg height="20" viewBox="0 0 90 26" xmlns="http://www.w3.org/2000/svg">
+               <title>
+                 SIX
+               </title>
+               <g fill="#DE3919" fill-rule="nonzero">
+                 <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"></path>
+                 <path d="m42.16.324h5.21v24.806h-5.21z"></path>
+                 <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"></path>
+               </g>
+             </svg>
+
+            </section>
+            <section class="six-header__placeholder"></section>
+            <section class="six-header__custom">
+              <slot></slot>
+            </section>
+            <section class="six-header__app-switcher">
+                <a class="six-header__selected-app">Custody</a>
+                <six-dropdown distance="13" placement="bottom-end" skidding="20">
+                  <six-icon-button name="apps" slot="trigger"></six-icon-button>
+                  <slot name="app-switcher-menu"></slot>
+               </six-dropdown>
+           </section>
+          </header>
+          <div class="six-header__search-field">
+            <slot name="search-field"></slot>
+          </div>
+        </mock:shadow-root>
+        <six-menu slot="app-switcher-menu">
+            <six-menu-item checked="checked">Custody</six-menu-item>
+            <six-menu-item>Swiss Interbank Clearing</six-menu-item>
+        </six-menu>
+      </six-header>
+    `);
+  });
+});
+//# sourceMappingURL=six-header.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-header.spec.js","sourceRoot":"","sources":["../../../../src/components/six-header/test/six-header.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,2BAA2B;KAClC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8B7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,QAAQ;IACR,MAAM,IAAI,GAAG,6DAA6D,CAAC;IAE3E,OAAO;IACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,IAAI;KACX,CAAC,CAAC;IAEH,OAAO;IACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,QAAQ;IACR,MAAM,IAAI,GAAG;;;;;gCAKe,CAAC;IAE7B,OAAO;IACP,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,IAAI;KACX,CAAC,CAAC;IAEH,OAAO;IACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyC7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixHeader } from '../six-header';\n\ndescribe('six-header', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: `<six-header></six-header>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section class=\"six-header__logo\">\n             <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n               <title>\n                 SIX\n               </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\"></path>\n                 <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\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\"></path>\n               </g>\n             </svg>\n\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n      </six-header>\n    `);\n  });\n\n  it('should render custom logo ', async () => {\n    // given\n    const html = `<six-header><div slot=\"logo\">custom logo</div></six-header>`;\n\n    // when\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: html,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section>\n               <slot name=\"logo\"></slot>\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n          <div slot=\"logo\">\n            custom logo\n          </div>\n      </six-header>\n    `);\n  });\n\n  it('should render app switcher', async () => {\n    // given\n    const html = `<six-header>\n                    <six-menu slot=\"app-switcher-menu\">\n                      <six-menu-item checked=\"checked\">Custody</six-menu-item>\n                      <six-menu-item>Swiss Interbank Clearing</six-menu-item>\n                    </six-menu>\n                  </six-header>`;\n\n    // when\n    const page = await newSpecPage({\n      components: [SixHeader],\n      html: html,\n    });\n\n    // then\n    expect(page.root).toEqualHtml(`\n      <six-header>\n        <mock:shadow-root>\n          <header class=\"six-header\">\n            <section class=\"six-header__menu\">\n              <six-icon-button name=\"menu\"></six-icon-button>\n            </section>\n            <section class=\"six-header__logo\">\n             <svg height=\"20\" viewBox=\"0 0 90 26\" xmlns=\"http://www.w3.org/2000/svg\">\n               <title>\n                 SIX\n               </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\"></path>\n                 <path d=\"m42.16.324h5.21v24.806h-5.21z\"></path>\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\"></path>\n               </g>\n             </svg>\n\n            </section>\n            <section class=\"six-header__placeholder\"></section>\n            <section class=\"six-header__custom\">\n              <slot></slot>\n            </section>\n            <section class=\"six-header__app-switcher\">\n                <a class=\"six-header__selected-app\">Custody</a>\n                <six-dropdown distance=\"13\" placement=\"bottom-end\" skidding=\"20\">\n                  <six-icon-button name=\"apps\" slot=\"trigger\"></six-icon-button>\n                  <slot name=\"app-switcher-menu\"></slot>\n               </six-dropdown>\n           </section>\n          </header>\n          <div class=\"six-header__search-field\">\n            <slot name=\"search-field\"></slot>\n          </div>\n        </mock:shadow-root>\n        <six-menu slot=\"app-switcher-menu\">\n            <six-menu-item checked=\"checked\">Custody</six-menu-item>\n            <six-menu-item>Swiss Interbank Clearing</six-menu-item>\n        </six-menu>\n      </six-header>\n    `);\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable

package/dist/collection/components/six-icon/test/six-icon.spec.js

@@ -0,0 +1,20 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixIcon } from "../six-icon";
+describe('six-icon', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixIcon],
+      html: `<six-icon></six-icon>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-icon size="inherit">
+        <mock:shadow-root>
+          <i class="icon--inherit material-icons material-icons-outlined">
+            <slot></slot>
+          </i>
+        </mock:shadow-root>
+      </six-icon>
+    `);
+  });
+});
+//# sourceMappingURL=six-icon.spec.js.map

package/dist/collection/components/six-icon/test/six-icon.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-icon.spec.js","sourceRoot":"","sources":["../../../../src/components/six-icon/test/six-icon.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,uBAAuB;KAC9B,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixIcon } from '../six-icon';\n\ndescribe('six-icon', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixIcon],\n      html: `<six-icon></six-icon>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-icon size=\"inherit\">\n        <mock:shadow-root>\n          <i class=\"icon--inherit material-icons material-icons-outlined\">\n            <slot></slot>\n          </i>\n        </mock:shadow-root>\n      </six-icon>\n    `);\n  });\n});\n"]}

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { focusVisible } from '../../utils/focus-visible';
+import { h } from "@stencil/core";
+import { focusVisible } from "../../utils/focus-visible";
 /**
  * @since 1.0
  * @status stable
@@ -23,12 +23,12 @@ export class SixIconButton {
     this.html = undefined;
   }
   componentDidLoad() {
-    if (this.button) {
+    if (this.button != null) {
       focusVisible.observe(this.button);
     }
   }
   disconnectedCallback() {
-    if (this.button) {
+    if (this.button != null) {
       focusVisible.unobserve(this.button);
     }
   }
@@ -58,11 +58,11 @@ export class SixIconButton {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The name of the icon to draw."
@@ -93,11 +93,11 @@ export class SixIconButton {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\nalways include a label that describes what the icon button does."
@@ -128,11 +128,11 @@ export class SixIconButton {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "HTML symbol code or entity."

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

@@ -1 +1 @@
-{"version":3,"file":"six-icon-button.js","sourceRoot":"","sources":["../../../src/components/six-icon-button/six-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;;IA2DhB,qBAAgB,GAAG,CAAC,KAAK,EAAE,EAAE;MACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB;IACH,CAAC,CAAC;;gBAzD2G,QAAQ;;oBASjF,KAAK;;;EAKzC,gBAAgB;IACd,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAEzD,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE;MAC5F,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;SACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;QAEtB,+BAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD;QACX,eAAQ;QACP,IAAI,CACE,CACL,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  button: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html: string;\n\n  componentDidLoad() {\n    if (this.button) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"]}
+{"version":3,"file":"six-icon-button.js","sourceRoot":"","sources":["../../../src/components/six-icon-button/six-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;;;;GAOG;AAOH,MAAM,OAAO,aAAa;;IA2DhB,qBAAgB,GAAG,CAAC,KAAY,EAAE,EAAE;MAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;OACzB;IACH,CAAC,CAAC;;gBAzD2G,QAAQ;;oBASjF,KAAK;;;EAKzC,gBAAgB;IACd,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;MACvB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE;MACvB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,YAAM,SAAS,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAEzD,OAAO,CACL,WAAK,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,QAAQ,EAAE;MAC5F,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;SACvC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;QAEtB,+BAAsB,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,IAAI,CACD;QACX,eAAQ;QACP,IAAI,CACE,CACL,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-icon-button',\n  styleUrl: 'six-icon-button.scss',\n  shadow: true,\n})\nexport class SixIconButton {\n  private button?: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n  /**\n   * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** HTML symbol code or entity. */\n  @Prop({ reflect: true }) html?: string;\n\n  componentDidLoad() {\n    if (this.button != null) {\n      focusVisible.observe(this.button);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.button != null) {\n      focusVisible.unobserve(this.button);\n    }\n  }\n\n  render() {\n    const html = this.html && <span innerHTML={this.html} />;\n\n    return (\n      <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n        <button\n          ref={(el) => (this.button = el)}\n          part=\"base\"\n          disabled={this.disabled}\n          class={{\n            'icon-button': true,\n            'icon-button--disabled': this.disabled,\n          }}\n          type=\"button\"\n          aria-label={this.label}\n        >\n          <six-icon aria-hidden=\"true\" size={this.size}>\n            {this.name}\n          </six-icon>\n          <slot />\n          {html}\n        </button>\n      </div>\n    );\n  }\n\n  private handleClickEvent = (event: Event) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n}\n"]}