@scania/tegel 0.0.8 → 0.0.9

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

@@ -1,83 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class SideMenuDropdownListItem {
-  constructor() {
-    this.selected = false;
-    this.dropdownHasIcon = false;
-    this.collapsed = false;
-  }
-  collapseSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    this.sideMenuEl = this.host.closest('sdds-side-menu');
-  }
-  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": "internalSddsSideMenuPropChange",
-        "method": "collapseSideMenuEventHandler",
-        "target": "body",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

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

@@ -1,60 +0,0 @@
-/*
-  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);
-  cursor: pointer;
-}
-:host .component sdds-icon {
-  color: red !important;
-}
-: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) {
-  background-color: var(--sdds-sidebar-item-state-hover);
-}
-:host .component:active ::slotted(a),
-:host .component:active ::slotted(button) {
-  background-color: var(--sdds-sidemenu-item-state-active);
-}
-: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

@@ -1,126 +0,0 @@
-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.js

@@ -1,18 +0,0 @@
-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

@@ -1,9 +0,0 @@
-: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

@@ -1,96 +0,0 @@
-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.js

@@ -1,62 +0,0 @@
-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

@@ -1,9 +0,0 @@
-: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

@@ -1,60 +0,0 @@
-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

@@ -1,129 +0,0 @@
-/*
-  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;
-}