@scania/tegel 0.0.72 → 1.0.0

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);
-}

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

@@ -1,276 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class SddsCard {
-  constructor() {
-    this.handleClick = () => {
-      this.sddsClick.emit({
-        cardId: this.cardId,
-      });
-    };
-    this.getCardContent = () => (h("div", null, this.headerPlacement === 'above' && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), ' ', h("div", { class: `
-          card-top-header
-          ${!this.headerImg ? 'no-header-img' : ''}
-          ${!this.header || !this.subheader ? 'single-line-header' : ''}
-          ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), h("div", { class: `card-body` }, this.bodyImg && h("img", { class: `card-body-img`, src: this.bodyImg, alt: this.bodyImgAlt }), this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), h("div", { class: `
-            card-top-header
-            ${!this.headerImg ? 'no-header-img' : ''}
-            ${!this.header || !this.subheader ? 'single-line-header' : ''}
-            ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), this.bodyDivider && h("div", { class: `sdds-divider` }), h("slot", { name: "card-body" })), h("div", { class: `card-bottom` }, this.hasCardBottomSlot && h("slot", { name: `card-bottom` }))));
-    this.modeVariant = null;
-    this.headerPlacement = 'above';
-    this.header = undefined;
-    this.subheader = undefined;
-    this.headerImg = undefined;
-    this.headerImgAlt = undefined;
-    this.bodyImg = undefined;
-    this.bodyImgAlt = undefined;
-    this.bodyDivider = false;
-    this.clickable = false;
-    this.cardId = crypto.randomUUID();
-    this.hasCardBottomSlot = false;
-    this.hasCardBodySlot = false;
-  }
-  connectedCallback() {
-    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot="card-bottom"]');
-    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot="card-body"]');
-  }
-  render() {
-    return (h(Host, { class: this.modeVariant && `sdds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
-        if (this.clickable) {
-          this.handleClick();
-        }
-      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
-  }
-  static get is() { return "sdds-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-card.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": "Variant of the card based on the theme used."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "headerPlacement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'above' | 'below'",
-          "resolved": "\"above\" | \"below\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Placement of the header"
-        },
-        "attribute": "header-placement",
-        "reflect": false,
-        "defaultValue": "'above'"
-      },
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text in the header"
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "subheader": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Subheader text in the header"
-        },
-        "attribute": "subheader",
-        "reflect": false
-      },
-      "headerImg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header image src"
-        },
-        "attribute": "header-img",
-        "reflect": false
-      },
-      "headerImgAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Alt text for the header image"
-        },
-        "attribute": "header-img-alt",
-        "reflect": false
-      },
-      "bodyImg": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Body image src"
-        },
-        "attribute": "body-img",
-        "reflect": false
-      },
-      "bodyImgAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Alt text for the body image"
-        },
-        "attribute": "body-img-alt",
-        "reflect": false
-      },
-      "bodyDivider": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Divider for the body"
-        },
-        "attribute": "body-divider",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "clickable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the card clickable."
-        },
-        "attribute": "clickable",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "cardId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "ID for the card, must be unique.\n\n**NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time."
-        },
-        "attribute": "card-id",
-        "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasCardBottomSlot": {},
-      "hasCardBodySlot": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsClick",
-        "name": "sddsClick",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Sends unique card identifier when the card is clicked, if clickable=true"
-        },
-        "complexType": {
-          "original": "{\n    cardId: string;\n  }",
-          "resolved": "{ cardId: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-}

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

@@ -1,100 +0,0 @@
-.sdds-checkbox-webcomponent {
-  box-sizing: border-box;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-checkbox-text);
-  display: flex;
-  align-items: center;
-  margin-left: -4px;
-}
-.sdds-checkbox-webcomponent * {
-  box-sizing: border-box;
-}
-.sdds-checkbox-webcomponent input[type=checkbox] {
-  appearance: none;
-  outline: none;
-  margin: 0;
-  border: 0;
-  border-radius: 2px;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  cursor: pointer;
-  flex-shrink: 0;
-  align-self: flex-start;
-}
-.sdds-checkbox-webcomponent input[type=checkbox] + label {
-  color: var(--sdds-checkbox-color);
-  padding-left: var(--sdds-spacing-element-4);
-  padding-top: var(--sdds-spacing-element-4);
-  padding-bottom: var(--sdds-spacing-element-4);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]::before, .sdds-checkbox-webcomponent input[type=checkbox]::after {
-  content: "";
-  position: absolute;
-  box-sizing: border-box;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
-  border-radius: 4px;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]::after {
-  border: 1px solid var(--sdds-checkbox-interaction-01);
-  background-color: var(--sdds-checkbox-interaction-02);
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border-radius: 2px;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:hover::before {
-  background-color: var(--sdds-checkbox-background-hover);
-  opacity: var(--sdds-checkbox-background-opacity-hover);
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:focus::before {
-  background-color: var(--sdds-checkbox-background-focus);
-  opacity: var(--sdds-checkbox-background-opacity-focus);
-  transition: opacity 0.2s ease-in-out;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:disabled, .sdds-checkbox-webcomponent input[type=checkbox].disabled {
-  cursor: not-allowed;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:disabled::after, .sdds-checkbox-webcomponent input[type=checkbox].disabled::after {
-  border-color: var(--sdds-checkbox-border-color-disabled-after);
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:disabled + label, .sdds-checkbox-webcomponent input[type=checkbox].disabled + label {
-  color: var(--sdds-grey-600);
-  cursor: not-allowed;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox].disabled:hover::before {
-  display: none;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:checked::after {
-  background-image: var(--sdds-checkbox-background-img);
-  background-color: var(--sdds-checkbox-interaction-01);
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:checked:hover::before {
-  background-color: var(--sdds-checkbox-background-hover);
-  opacity: var(--sdds-checkbox-background-opacity-hover);
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid #b0b7c4;
-}
-.sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled::after, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled::after {
-  background-image: var(--sdds-checkbox-background-img-disabled);
-  background-color: var(--sdds-checkbox-interaction-02);
-  color: var(--sdds-checkbox-color-disabled-after);
-}