@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/components/banner/sdds-banner.css

@@ -1,94 +0,0 @@
-:root,
-.sdds-mode-light {
-  --sdds-link: var(--sdds-blue-500);
-  --sdds-link-hover: var(--sdds-blue-400);
-  --sdds-link-focus: var(--sdds-blue-400);
-  --sdds-link-visited: var(--sdds-grey-900);
-  --sdds-link-disabled: var(--sdds-grey-400);
-}
-
-.sdds-mode-dark {
-  --sdds-link: var(--sdds-blue-300);
-  --sdds-link-hover: var(--sdds-blue-400);
-  --sdds-link-focus: var(--sdds-blue-400);
-  --sdds-link-visited: var(--sdds-blue-100);
-  --sdds-link-disabled: var(--sdds-grey-800);
-}
-
-:host(.hide) {
-  display: none;
-  visibility: hidden;
-}
-
-:host(.error) {
-  background-color: var(--sdds-banner-background-error);
-}
-
-:host(.information) {
-  background-color: var(--sdds-banner-background-info);
-}
-
-:host {
-  display: flex;
-  background-color: var(--sdds-banner-background-default);
-  z-index: 400;
-}
-:host .banner-icon {
-  padding-left: 20px;
-  padding-top: 14px;
-  padding-right: 12px;
-  color: var(--sdds-banner-prefix-default-color);
-}
-:host .banner-icon.error {
-  color: var(--sdds-banner-prefix-error-color);
-}
-:host .banner-icon.information {
-  color: var(--sdds-banner-prefix-info-color);
-}
-:host .banner-content {
-  color: var(--sdds-banner-text-color);
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 16px 0;
-}
-:host .banner-content.no-icon {
-  padding-left: 16px;
-}
-:host .banner-content .banner-header {
-  font: var(--sdds-headline-06);
-  letter-spacing: var(--sdds-headline-06-ls);
-}
-:host .banner-content slot[name=banner-subheader] {
-  display: block;
-  margin-top: 4px;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-}
-:host .banner-content .banner-link slot[name=banner-link] {
-  display: block;
-  width: fit-content;
-  margin-top: 16px;
-}
-:host .banner-content .banner-link.no-subheader slot[name=banner-link] {
-  margin-top: 4px;
-}
-:host .banner-close {
-  color: var(--sdds-banner-x-color);
-}
-:host .banner-close button {
-  padding-right: 16px;
-  padding-top: 14px;
-  background-color: transparent;
-  border: none;
-  color: var(--sdds-banner-x-color);
-}
-:host .banner-close button:hover {
-  cursor: pointer;
-}
-:host .banner-close button:focus {
-  outline: none;
-}
-:host .banner-close button:focus sdds-icon {
-  outline: 2px solid var(--sdds-link-focus);
-}

package/dist/collection/components/banner/sdds-banner.js

@@ -1,251 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class SddsBanner {
-  constructor() {
-    this.handleClose = () => {
-      const sddsCloseEvent = this.sddsClose.emit({
-        bannerId: this.bannerId,
-      });
-      if (!sddsCloseEvent.defaultPrevented) {
-        this.hidden = true;
-      }
-    };
-    this.handleShow = () => {
-      const sddsCloseEvent = this.sddsShow.emit({
-        bannerId: this.bannerId,
-      });
-      if (!sddsCloseEvent.defaultPrevented) {
-        this.hidden = false;
-      }
-    };
-    this.icon = undefined;
-    this.header = undefined;
-    this.type = 'none';
-    this.bannerId = crypto.randomUUID();
-    this.persistent = false;
-    this.hidden = false;
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
-  }
-  /** Hides the Banner. */
-  async hideBanner() {
-    this.handleClose();
-  }
-  /** Shows the Banner */
-  async showBanner() {
-    this.handleShow();
-  }
-  connectedCallback() {
-    if (this.type === 'error') {
-      this.icon = 'error';
-    }
-    else if (this.type === 'information') {
-      this.icon = 'info';
-    }
-    const children = Array.from(this.host.children);
-    this.hasSubheader = children.some((childElement) => childElement.slot === 'banner-subheader');
-    this.hasLink = children.some((childElement) => childElement.slot === 'banner-link');
-  }
-  render() {
-    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.type}` }, h("sdds-icon", { name: this.icon, size: "20px" }))), h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && h("span", { class: `banner-header` }, this.header), this.hasSubheader && h("slot", { name: "banner-subheader" }), this.hasLink && (h("div", { class: `banner-link ${!this.hasSubheader ? 'no-subheader' : ''}` }, h("slot", { name: "banner-link" })))), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
-        this.handleClose();
-      } }, h("sdds-icon", { name: "cross", size: "20px" }))))));
-  }
-  static get is() { return "sdds-banner"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-banner.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-banner.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name of the icon for the component. For error and information type the icon is predefined."
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header text."
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'error' | 'information' | 'none'",
-          "resolved": "\"error\" | \"information\" | \"none\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of Banner"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'none'"
-      },
-      "bannerId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ID used for internal table functionality and events, must be unique.\n\n**NOTE**: If you're listening for Banner close events you need to set this ID yourself to identify the Banner, as the default ID is random and will be different every time."
-        },
-        "attribute": "banner-id",
-        "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
-      },
-      "persistent": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Removes the close button on the Banner."
-        },
-        "attribute": "persistent",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hides the Banner"
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasSubheader": {},
-      "hasLink": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsClose",
-        "name": "sddsClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Sends a unique Banner identifier when the close button is pressed."
-        },
-        "complexType": {
-          "original": "{\n    bannerId: string;\n  }",
-          "resolved": "{ bannerId: string; }",
-          "references": {}
-        }
-      }, {
-        "method": "sddsShow",
-        "name": "sddsShow",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Sends the unique Banner identifier when the close button is pressed."
-        },
-        "complexType": {
-          "original": "{\n    bannerId: string;\n  }",
-          "resolved": "{ bannerId: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "hideBanner": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the Banner.",
-          "tags": []
-        }
-      },
-      "showBanner": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the Banner",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/block/sdds-block.css

@@ -1,22 +0,0 @@
-.sdds-block-webcomponent {
-  box-sizing: border-box;
-  color: var(--sdds-block-color);
-  border-radius: 4px;
-  padding: 16px;
-  font: var(--sdds-body-01);
-  letter-spacing: var(--sdds-body-01-ls);
-  background-color: var(--sdds-block-background);
-}
-.sdds-block-webcomponent * {
-  box-sizing: border-box;
-}
-
-.sdds-mode-variant-primary {
-  --sdds-block-background: var(--sdds-block-background-primary);
-  --sdds-block-background-nested: var(--sdds-block-background-nested-primary);
-}
-
-.sdds-mode-variant-secondary {
-  --sdds-block-background: var(--sdds-block-background-secondary);
-  --sdds-block-background-nested: var(--sdds-block-background-nested-secondary);
-}

package/dist/collection/components/block/sdds-block.js

@@ -1,55 +0,0 @@
-import { h } from '@stencil/core';
-export class SddsBlock {
-  constructor() {
-    this.modeVariant = null;
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'SDDS-BLOCK');
-    this.children.forEach((item) => {
-      if (!this.modeVariant) {
-        item.setAttribute('mode-variant', 'secondary');
-      }
-      else {
-        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
-      }
-    });
-  }
-  render() {
-    return (h("div", { class: `sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
-  }
-  static get is() { return "sdds-block"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-block.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-block.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Mode variant of the component, based on current mode."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

package/dist/collection/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.css

@@ -1,37 +0,0 @@
-@charset "UTF-8";
-[role=listitem] ::slotted(*) {
-  color: var(--sdds-breadcrumb-color);
-  text-decoration: none;
-}
-[role=listitem]:hover ::slotted(*) {
-  color: var(--sdds-breadcrumb-color-hover);
-  text-decoration: underline;
-}
-[role=listitem]:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-[role=listitem].disabled ::slotted(*), [role=listitem].current ::slotted(*),
-[role=listitem] [aria-current=page] ::slotted(*) {
-  pointer-events: none;
-  cursor: default;
-  color: var(--sdds-breadcrumb-color-disabled);
-}
-[role=listitem].disabled:hover ::slotted(*), [role=listitem].current:hover ::slotted(*),
-[role=listitem] [aria-current=page]:hover ::slotted(*) {
-  text-decoration: none;
-  cursor: not-allowed;
-}
-[role=listitem] ::slotted(*)::after {
-  content: "›";
-  color: var(--sdds-breadcrumb-separator-color);
-  margin-right: 4px;
-  margin-left: 4px;
-  display: inline-block;
-  width: 4px;
-  height: 8px;
-}
-
-:host(.last) ::slotted(*)::after {
-  display: none;
-}

package/dist/collection/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js

@@ -1,63 +0,0 @@
-import { h } from '@stencil/core';
-export class SddsBreadcrumbItem {
-  constructor() {
-    this.current = false;
-    this.disabled = false;
-  }
-  render() {
-    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
-        ${this.disabled ? 'disabled' : ''}` }, h("slot", null)));
-  }
-  static get is() { return "sdds-breadcrumb-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-breadcrumb-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-breadcrumb-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "current": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Boolean for the current link"
-        },
-        "attribute": "current",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Toggle the disabled state for the breadcrumb"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-}

package/dist/collection/components/breadcrumb/sdds-breadcrumb.css

@@ -1,15 +0,0 @@
-:host {
-  box-sizing: border-box;
-}
-:host * {
-  box-sizing: border-box;
-}
-:host [role=list] {
-  padding: 0;
-  margin: 0;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  display: flex;
-  flex-wrap: wrap;
-  list-style-type: none;
-}

package/dist/collection/components/breadcrumb/sdds-breadcrumb.js

@@ -1,22 +0,0 @@
-import { h } from '@stencil/core';
-export class SddsBreadcrumb {
-  connectedCallback() {
-    this.el.children[this.el.children.length - 1].classList.add('last');
-  }
-  render() {
-    return (h("nav", null, h("div", { role: "list", class: 'sdds-breadcrumb' }, h("slot", null))));
-  }
-  static get is() { return "sdds-breadcrumb"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-breadcrumb.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-breadcrumb.css"]
-    };
-  }
-  static get elementRef() { return "el"; }
-}

package/dist/collection/components/card/sdds-card.css

@@ -1,80 +0,0 @@
-.card {
-  box-shadow: var(--sdds-card-box);
-  background-color: var(--sdds-card-background);
-  display: block;
-  border-radius: 4px;
-  max-width: 368px;
-  overflow: hidden;
-  width: 100%;
-}
-.card.clickable:hover {
-  box-shadow: var(--sdds-card-box-hover);
-  cursor: pointer;
-}
-.card .card-top {
-  font: var(--sdds-headline-06);
-  letter-spacing: var(--sdds-headline-06-ls);
-  padding: 16px;
-  display: flex;
-  align-items: center;
-}
-.card .card-top img.card-top-image {
-  width: 36px;
-  height: 36px;
-  border-radius: 100%;
-}
-.card .card-top .card-top-header {
-  padding-left: 16px;
-  display: flex;
-  flex-direction: column;
-  row-gap: 4px;
-}
-.card .card-top .card-top-header.no-header-img {
-  padding-left: 0;
-}
-.card .card-top .card-top-header.single-line-header {
-  row-gap: 0;
-}
-.card .card-top.below {
-  padding-top: 16px;
-}
-.card .card-header {
-  color: var(--sdds-card-headline);
-}
-.card .card-subheader {
-  color: var(--sdds-card-sub-headline);
-}
-.card .card-body-img {
-  width: 100%;
-}
-.card .sdds-divider {
-  margin: 16px 16px 0;
-  background-color: var(--sdds-card-divider);
-  height: 1px;
-}
-.card slot[name=card-body]::slotted(*) {
-  font: var(--sdds-detail-03);
-  letter-spacing: var(--sdds-detail-03-ls);
-  color: var(--sdds-card-body-color);
-  padding: 0 16px;
-  margin-bottom: 16px;
-  margin-top: 16px;
-}
-.card slot[name=card-bottom]::slotted(*) {
-  display: flex;
-  padding: 16px;
-  color: var(--sdds-card-icon-color);
-}
-
-button {
-  border: none;
-  text-align: left;
-  padding: 0;
-}
-button:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-button:active {
-  box-shadow: var(--sdds-card-box-pressed);
-}