@scania/tegel 0.0.5 → 0.0.7

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

@@ -0,0 +1,84 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuDropdownListItem {
+  constructor() {
+    this.selected = false;
+    this.dropdownHasIcon = false;
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandeler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  componentDidLoad() {
+    var _a;
+    const dropdownEl = this.host.closest('sdds-side-menu-dropdown');
+    const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="button-icon"]');
+    const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
+    const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
+    const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'sdds-side-menu-user-image';
+    if (hasBtnIcon && !btnIconIsUserImage) {
+      this.dropdownHasIcon = true;
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+        'component-dropdown-has-icon': this.dropdownHasIcon,
+        'component-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-side-menu-dropdown-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list-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"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownHasIcon": {},
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandeler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,53 @@
+/*
+  Contains spacing variables for the layout
+*/
+:host {
+  display: block;
+}
+:host .component ::slotted(a),
+:host .component ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  height: 68px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  border: none;
+  background-color: var(--sdds-sidebar-side-menu-background-cover);
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-sidebar-side-menu-single-item-color);
+}
+:host .component ::slotted(a:focus-visible),
+:host .component ::slotted(button:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .component:hover ::slotted(a),
+:host .component:hover ::slotted(button) {
+  cursor: pointer;
+  background-color: var(--sdds-sidebar-item-state-hover);
+}
+:host .component-collapsed ::slotted(a),
+:host .component-collapsed ::slotted(button) {
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host .component-selected:not(:host .component-active) ::slotted(a),
+:host .component-selected:not(:host .component-active) ::slotted(button) {
+  border-left: 4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);
+  padding-left: 20px;
+  background-color: var(--sdds-sidebar-item-state-selected);
+}
+
+@media (min-width: 992px) {
+  :host .component.component-collapsed ::slotted(a),
+:host .component.component-collapsed ::slotted(button) {
+    color: rgba(90, 90, 90, 0);
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,128 @@
+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() {
+    var _a;
+    // 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');
+    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  collapsedSideMenuEventHandeler(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": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandeler",
+        "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
+      }
+    };
+  }
+}