@scania/tegel 0.0.52 → 0.0.71-beta

package/dist/collection/components/side-menu/webcomponent/side-menu-item/side-menu-item.js

@@ -0,0 +1,126 @@
+import { h, Host } from '@stencil/core';
+import { dfs } from '../../../../utils/utils';
+export class SddsSideMenuItem {
+  constructor() {
+    this.selected = false;
+    this.active = false;
+    this.collapsed = false;
+  }
+  updateSlotted(searchPredicate, mutationCallback) {
+    const assignedElements = this.slotEl.assignedElements({ flatten: true });
+    const firstSlottedElement = assignedElements[0];
+    if (firstSlottedElement) {
+      const foundElement = dfs(firstSlottedElement, searchPredicate);
+      if (foundElement) {
+        mutationCallback(foundElement);
+      }
+    }
+  }
+  /**
+   * This function is needed because we can't use CSS selectors to style something in the light dom
+   */
+  updateSlottedElements() {
+    if (this.slotEl) {
+      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
+      const addIconClass = (element) => {
+        element.classList.add('__sdds-side-menu-item-icon');
+        if (this.collapsed) {
+          element.classList.add('__sdds-side-menu-item-icon-collapsed');
+        }
+        else {
+          element.classList.remove('__sdds-side-menu-item-icon-collapsed');
+        }
+      };
+      this.updateSlotted(isIconOrSvg, addIconClass);
+    }
+  }
+  connectedCallback() {
+    // closest() will return null if side-menu-item is inside a shadowRoot that
+    // does not contain a side-menu. This is the case for the side-menu-dropdown.
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  collapseSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+    this.updateSlottedElements();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+        'component-active': this.active,
+        'component-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-side-menu-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the item should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the item should appear active. Can be used when the item is\ntriggering a dropdown, and the dropdown is open, for example."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalSddsSideMenuPropChange",
+        "method": "collapseSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.css

@@ -0,0 +1,8 @@
+:host {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  transition: opacity 0.4s linear;
+  opacity: 0;
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.js

@@ -0,0 +1,18 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuOverlay {
+  render() {
+    return (h(Host, null, h("div", null)));
+  }
+  static get is() { return "sdds-side-menu-overlay"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-overlay.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-overlay.css"]
+    };
+  }
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-user/side-menu-user.css

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 68px;
+}
+:host sdds-side-menu-user-image {
+  margin-left: -4px;
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-user/side-menu-user.js

@@ -0,0 +1,96 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuUser {
+  constructor() {
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.imgSrc = undefined;
+    this.imgAlt = undefined;
+  }
+  render() {
+    return (h(Host, null, h("sdds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, h("slot", { name: "image" })), h("sdds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
+  }
+  static get is() { return "sdds-side-menu-user"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-user.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-user.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The heading text."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The subheading text."
+        },
+        "attribute": "subheading",
+        "reflect": false
+      },
+      "imgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image source."
+        },
+        "attribute": "img-src",
+        "reflect": false
+      },
+      "imgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image alt text."
+        },
+        "attribute": "img-alt",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.css

@@ -0,0 +1,6 @@
+:host img,
+:host ::slotted(*) {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.js

@@ -0,0 +1,62 @@
+import { h, Host } from '@stencil/core';
+// TODO this component is just for the dropdown detecting that it should
+// change layout
+export class SideMenuUserImage {
+  constructor() {
+    this.src = undefined;
+    this.alt = undefined;
+  }
+  render() {
+    return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
+  }
+  static get is() { return "sdds-side-menu-user-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-user-image.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-user-image.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image source."
+        },
+        "attribute": "src",
+        "reflect": false
+      },
+      "alt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image alt text."
+        },
+        "attribute": "alt",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-sidebar-side-menu-single-item-color);
+}
+:host .subheading {
+  color: var(--sdds-grey-500);
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.js

@@ -0,0 +1,60 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuUserLabel {
+  constructor() {
+    this.heading = undefined;
+    this.subheading = undefined;
+  }
+  render() {
+    return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
+  }
+  static get is() { return "sdds-side-menu-user-label"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-user-label.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-user-label.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The heading text."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The subheading text."
+        },
+        "attribute": "subheading",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/side-menu/webcomponent/side-menu.css

@@ -0,0 +1,129 @@
+/*
+  Contains spacing variables for the layout
+*/
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host([open]) {
+  pointer-events: auto;
+  z-index: 301;
+}
+
+:host {
+  pointer-events: none;
+  display: block;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+:host .wrapper {
+  height: inherit;
+  /* default slot */
+  /* 'end' slot */
+}
+:host .wrapper slot:not([name])::slotted(*) {
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .wrapper ::slotted([slot=end]) {
+  border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .wrapper .sdds-side-menu-list-end {
+  margin-top: 68px;
+}
+:host .state-closed {
+  display: none;
+}
+:host .state-open slot[name=overlay]::slotted(sdds-side-menu-overlay) {
+  opacity: 0.4;
+}
+:host .state-open slot[name=close-button]::slotted(sdds-side-menu-close-button) {
+  opacity: 1;
+}
+:host .state-open .sdds-side-menu-wrapper {
+  transform: scaleY(1);
+}
+:host .state-upper-slot-empty .sdds-side-menu-list-upper {
+  display: none;
+}
+:host .state-upper-slot-empty .sdds-side-menu-list-end {
+  margin-top: 0;
+}
+:host .state-upper-slot-empty ::slotted([slot=end]) {
+  border-top: none;
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+
+@media (min-width: 992px) {
+  :host([persistent]) {
+    pointer-events: auto;
+    position: static;
+    width: 272px;
+    height: auto;
+    border-right: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+  }
+  :host([persistent]) .wrapper slot[name=overlay]::slotted(sdds-side-menu-overlay) {
+    display: none;
+  }
+  :host([persistent]) .wrapper slot[name=close-button]::slotted(sdds-side-menu-close-button) {
+    display: none;
+  }
+  :host([persistent]) .wrapper .sdds-side-menu-wrapper {
+    transform: none;
+  }
+  :host([persistent]) .menu {
+    width: 272px;
+  }
+  :host([persistent]) .state-closed {
+    display: block;
+  }
+  :host([persistent]):host([collapsed]) {
+    width: 69px;
+  }
+  :host([persistent]):host([collapsed]) .menu {
+    width: 68px;
+  }
+  :host([persistent]) slot[name=end]::slotted(*) {
+    display: none;
+  }
+}
+.menu {
+  width: 80%;
+  height: inherit;
+  position: relative;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.menu * {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+@media (max-width: 384px) {
+  .menu {
+    width: 100%;
+  }
+}
+aside .sdds-side-menu-wrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  flex-grow: 1;
+  background-color: var(--sdds-sidebar-side-menu-background-cover);
+  transition: transform 250ms ease;
+  transform-origin: top;
+  transform: scaleY(0);
+  overflow-y: auto;
+}
+aside .sdds-side-menu-wrapper::-webkit-scrollbar {
+  width: 4px;
+  background-color: inherit;
+}
+aside .sdds-side-menu-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-300);
+}
+aside .sdds-side-menu-wrapper ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}