@six-group/ui-library 3.0.0-beta.1.11

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

@@ -0,0 +1,79 @@
+: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;
+}

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

@@ -0,0 +1,420 @@
+import { Component, Element, Event, getAssetPath, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
+import { EventListeners } from '../../utils/event-listeners';
+import { getAvailableSlots } from '../../utils/slot';
+var Section;
+(function (Section) {
+  Section[Section["None"] = 0] = "None";
+  Section[Section["Search"] = 1] = "Search";
+  Section[Section["Notifications"] = 2] = "Notifications";
+  Section[Section["AppSwitcher"] = 3] = "AppSwitcher";
+  Section[Section["Profile"] = 4] = "Profile";
+})(Section || (Section = {}));
+var Slot;
+(function (Slot) {
+  Slot["Search"] = "search-field";
+  Slot["Notifications"] = "notifications";
+  Slot["AppSwitcher"] = "app-switcher-menu";
+  Slot["Profile"] = "profile-menu";
+  Slot["Logo"] = "logo";
+})(Slot || (Slot = {}));
+const getSlots = getAvailableSlots(Slot);
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define a custom component that is included in the header.
+ * @slot search-field - Used to define the search field component in the header.
+ * @slot notifications - Used to define the notification component in the header.
+ * @slot app-switcher-menu - Used to define the application switcher menu in the header.
+ * @slot profile-menu - Used to define the profile menu in the header.
+ * @slot profile-avatar - Used to define the avator in the header.
+ */
+export class SixHeader {
+  constructor() {
+    /** Indicates if content should be shifted down when search field is visible. */
+    this.shiftContent = false;
+    /** Set the hamburger menu icon to open or closed state */
+    this.openHamburgerMenu = false;
+    /** Set the header search to be in an open or closed state */
+    this.openSearch = false;
+    /** Set whether the logo should be clickable */
+    this.clickableLogo = false;
+    this.eventListeners = new EventListeners();
+    this.has = (slot) => this.slots[slot];
+    this.selected = (value) => value === this.selectedSection;
+    this.select = (value) => () => {
+      this.selectedSection = value;
+    };
+    this.toggleSearch = (value) => () => {
+      var _a;
+      if (value === Section.Search) {
+        const visible = this.selectedSection !== value;
+        if (visible) {
+          (_a = this.host.querySelector(`[slot="${Slot.Search}"]`).shadowRoot.querySelector('six-input')) === null || _a === void 0 ? void 0 : _a.setFocus();
+        }
+        this.sixSearchFieldToggle.emit({ visible });
+      }
+      this.selectedSection = this.selectedSection === value ? Section.None : value;
+    };
+    this.setupMenu = (el) => {
+      this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
+    };
+    this.setupLogo = (el) => {
+      if (!this.clickableLogo) {
+        return;
+      }
+      this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
+    };
+    this.setupProfile = (el) => {
+      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.Profile));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));
+      this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
+        const { name, item } = event.detail;
+        this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });
+      });
+    };
+    this.setupAppSwitcher = (el) => {
+      this.eventListeners.add(el, 'six-dropdown-show', this.select(Section.AppSwitcher));
+      this.eventListeners.add(el, 'six-dropdown-hide', this.select(Section.None));
+      this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
+        const { name, item } = event.detail;
+        this.selectedApp = item.innerText;
+        this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });
+      });
+    };
+    this.appNameClicked = () => this.sixAppNameClicked.emit();
+    this.computeSearchOpenState = () => {
+      this.selectedSection = this.openSearch ? Section.Search : Section.None;
+    };
+  }
+  handleOpenSearchChange() {
+    this.computeSearchOpenState();
+  }
+  /** Sets open state for search */
+  async setSearchOpenState(openState) {
+    if (this.selectedSection === Section.Search && !openState) {
+      this.selectedSection = Section.None;
+    }
+    else if (openState && this.selectedSection !== Section.Search) {
+      this.selectedSection = Section.Search;
+    }
+  }
+  /** Get open state for search */
+  async getIsSearchOpen() {
+    return this.selectedSection === Section.Search;
+  }
+  componentWillLoad() {
+    this.slots = getSlots(this.host);
+    if (this.has(Slot.AppSwitcher)) {
+      this.selectedApp = this.getSelectedApp();
+    }
+    if (this.has(Slot.Search)) {
+      this.computeSearchOpenState();
+    }
+  }
+  getSelectedApp() {
+    // there are more concise ways to select the first checked menu item, but this is one that works for jest
+    const element = this.host.querySelector(`[slot="${Slot.AppSwitcher}"]`);
+    const items = Array.from(element.querySelectorAll('six-menu-item'));
+    const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked'));
+    return firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent;
+  }
+  disconnectedCallback() {
+    this.eventListeners.removeAll();
+  }
+  render() {
+    const search = this.has(Slot.Search) && (h("section", { class: {
+        'six-header__search': true,
+        'six-header__search--open': this.selected(Section.Search),
+      } },
+      h("six-icon-button", { name: "search", onClick: this.toggleSearch(Section.Search), "data-testid": "search-trigger" })));
+    const notifications = this.has(Slot.Notifications) && (h("section", { class: "six-header__notification" },
+      h("slot", { name: Slot.Notifications })));
+    const appSwitcher = this.has(Slot.AppSwitcher) && (h("section", { class: {
+        'six-header__app-switcher': true,
+        'six-header__app-switcher--open': this.selected(Section.AppSwitcher),
+      } },
+      h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp),
+      h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher },
+        h("six-icon-button", { name: "apps", slot: "trigger" }),
+        h("slot", { name: Slot.AppSwitcher }))));
+    const profile = this.has(Slot.Profile) && (h("section", { class: {
+        'six-header__profile': true,
+        'six-header__profile--open': this.selected(Section.Profile),
+      } },
+      h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile },
+        h("slot", { name: "profile-avatar", slot: "trigger" }),
+        h("slot", { name: "profile-menu" }))));
+    const logo = this.has(Slot.Logo) ? (h("section", null,
+      h("slot", { name: "logo" }))) : (h("section", { class: {
+        'six-header__logo': true,
+        'six-header__logo--clickable': this.clickableLogo,
+      }, ref: this.setupLogo },
+      h("img", { src: getAssetPath(`./assets/six-logo.svg`), height: "20", alt: "SIX" })));
+    return (h(Host, null,
+      h("header", { class: "six-header" },
+        h("section", { class: "six-header__menu" },
+          h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })),
+        logo,
+        h("section", { class: "six-header__placeholder" }),
+        h("section", { class: "six-header__custom" },
+          h("slot", null)),
+        search,
+        notifications,
+        appSwitcher,
+        profile),
+      h("div", { class: {
+          'six-header__search-field': true,
+          'six-header__search-field--visible': this.selected(Section.Search),
+          'six-header__search-field--shift-content': this.shiftContent,
+        } },
+        h("slot", { name: Slot.Search }))));
+  }
+  static get is() { return "six-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-header.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "shiftContent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates if content should be shifted down when search field is visible."
+      },
+      "attribute": "shift-content",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "openHamburgerMenu": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the hamburger menu icon to open or closed state"
+      },
+      "attribute": "open-hamburger-menu",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "openSearch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the header search to be in an open or closed state"
+      },
+      "attribute": "open-search",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clickableLogo": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set whether the logo should be clickable"
+      },
+      "attribute": "clickable-logo",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "selectedApp": {},
+    "selectedSection": {}
+  }; }
+  static get events() { return [{
+      "method": "sixAppNameClicked",
+      "name": "six-header-app-name-clicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the name of the selected app is clicked."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixAppSwitcherSelect",
+      "name": "six-header-app-switcher-select",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a menu item is in the app switcher menu is selected."
+      },
+      "complexType": {
+        "original": "SixHeaderAppSwitcherSelectPayload",
+        "resolved": "SixHeaderAppSwitcherSelectPayload",
+        "references": {
+          "SixHeaderAppSwitcherSelectPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "sixProfileSelect",
+      "name": "six-header-profile-select",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a menu item is in the profile menu is selected."
+      },
+      "complexType": {
+        "original": "SixHeaderProfileSelectPayload",
+        "resolved": "SixHeaderProfileSelectPayload",
+        "references": {
+          "SixHeaderProfileSelectPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "sixHamburgerClick",
+      "name": "six-header-hamburger-menu-clicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the hamburger menu is clicked."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixLogoClick",
+      "name": "six-header-logo-clicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the header logo is clicked."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixSearchFieldToggle",
+      "name": "six-header-search-field-toggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when search field is toggled."
+      },
+      "complexType": {
+        "original": "SixHeaderSearchFieldToggle",
+        "resolved": "SixHeaderSearchFieldToggle",
+        "references": {
+          "SixHeaderSearchFieldToggle": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setSearchOpenState": {
+      "complexType": {
+        "signature": "(openState: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets open state for search",
+        "tags": []
+      }
+    },
+    "getIsSearchOpen": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Get open state for search",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "openSearch",
+      "methodName": "handleOpenSearchChange"
+    }]; }
+}

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

@@ -0,0 +1,63 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: inline;
+}
+
+.material-icons {
+  vertical-align: middle;
+  font-weight: normal;
+  font-style: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  /* Support for IE. */
+  font-feature-settings: "liga";
+}
+
+.material-icons-filled {
+  font-family: "Material Icons";
+}
+
+.material-icons-outlined {
+  font-family: "Material Icons Outlined";
+}
+
+.icon--xsmall {
+  font-size: 12px;
+}
+.icon--small {
+  font-size: 18px;
+}
+.icon--medium {
+  font-size: 24px;
+}
+.icon--large {
+  font-size: 36px;
+}
+.icon--xlarge {
+  font-size: 48px;
+}
+.icon--xxlarge {
+  font-size: 72px;
+}
+.icon--xxxlarge {
+  font-size: 96px;
+}
+.icon--inherit {
+  font-size: 1.5em;
+}

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

@@ -0,0 +1,77 @@
+import { Component, h, Prop } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the material icon name.
+ */
+export class SixIcon {
+  constructor() {
+    /** The icon's size. */
+    this.size = 'inherit';
+    /** If set to true the default material outlined icons are not used. */
+    this.filled = false;
+  }
+  render() {
+    return (h("i", { class: {
+        'material-icons': true,
+        'material-icons-outlined': !this.filled,
+        'material-icons-filled': this.filled,
+        'icon--xsmall': this.size === 'xSmall',
+        'icon--small': this.size === 'small',
+        'icon--medium': this.size === 'medium',
+        'icon--large': this.size === 'large',
+        'icon--xlarge': this.size === 'xLarge',
+        'icon--xxlarge': this.size === 'xxLarge',
+        'icon--xxxlarge': this.size === 'xxxLarge',
+        'icon--inherit': this.size === 'inherit',
+      } },
+      h("slot", null)));
+  }
+  static get is() { return "six-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-icon.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
+        "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon's size."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'inherit'"
+    },
+    "filled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set to true the default material outlined icons are not used."
+      },
+      "attribute": "filled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}