@scania/tegel 0.0.72 → 1.0.1

package/dist/collection/components/badge/badges.css

@@ -1,42 +0,0 @@
-:host {
-  --sdds-badges-background-color: var(--sdds-negative);
-  --sdds-badges-color-text: var(--sdds-white);
-  box-sizing: border-box;
-  display: block;
-}
-:host * {
-  box-sizing: border-box;
-}
-
-.sdds-badges {
-  display: block;
-  border-radius: 12px;
-  background-color: var(--sdds-badges-background-color);
-  text-align: center;
-}
-.sdds-badges.sdds-badges-sm {
-  height: 8px;
-  width: 8px;
-  line-height: 8px;
-}
-.sdds-badges.sdds-badges-lg {
-  height: 20px;
-  line-height: 20px;
-  width: 20px;
-}
-.sdds-badges.sdds-badges-pill {
-  display: inline-block;
-  width: unset;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.sdds-badges.sdds-badges-hidden {
-  display: none;
-}
-
-.sdds-badges-text {
-  font-family: var(--sdds-font-family-semi-condensed-bold);
-  font-size: 12px;
-  color: var(--sdds-badges-color-text);
-  font-weight: bold;
-}

package/dist/collection/components/badge/badges.js

@@ -1,147 +0,0 @@
-import { h } from '@stencil/core';
-export class SddsBadges {
-  constructor() {
-    this.value = '';
-    this.hidden = false;
-    this.isSmall = false;
-    this.size = 'lg';
-    this.shape = '';
-    this.text = '';
-  }
-  watchProps() {
-    this.checkProps();
-  }
-  componentWillLoad() {
-    this.checkProps();
-    if (this.isSmall) {
-      this.size = 'sm';
-      console.warn('Prop isSmall is deprecated. Use size"small" instead');
-    }
-  }
-  checkProps() {
-    const valueAsNumber = parseInt(this.value);
-    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
-      this.size = 'lg';
-      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
-    }
-    else {
-      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      this.value !== '' && this.size !== 'sm'
-        ? console.warn('The provided value is either empty or string, please provide value as number.')
-        : '';
-    }
-  }
-  render() {
-    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, h("div", { class: "sdds-badges-text" }, this.text)));
-  }
-  static get is() { return "sdds-badges"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["badges.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["badges.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value shown in badge"
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "hidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Changes visibility of badge"
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isSmall": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use size prop instead. Changes badge from large to small size"
-            }],
-          "text": ""
-        },
-        "attribute": "is-small",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'lg' | 'sm'",
-          "resolved": "\"lg\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets component size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "shape": {},
-      "text": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "watchProps"
-      }, {
-        "propName": "isSmall",
-        "methodName": "watchProps"
-      }, {
-        "propName": "size",
-        "methodName": "watchProps"
-      }];
-  }
-}

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