@scania/tegel 0.0.7 → 0.0.9

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

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

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

@@ -0,0 +1,118 @@
+import { h } from '@stencil/core';
+export class TdsBadge {
+  constructor() {
+    this.value = '';
+    this.hidden = false;
+    this.size = 'lg';
+    this.shape = '';
+    this.text = '';
+  }
+  watchProps() {
+    this.checkProps();
+  }
+  componentWillLoad() {
+    this.checkProps();
+  }
+  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: `tds-badge tds-badge-${this.size} ${this.shape === 'pill' ? 'tds-badge-pill' : ''} ${this.hidden ? 'tds-badge-hidden' : ''}` }, h("div", { class: "tds-badge-text" }, this.text)));
+  }
+  static get is() { return "tds-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["badge.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["badge.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"
+      },
+      "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": "size",
+        "methodName": "watchProps"
+      }];
+  }
+}

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

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

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

@@ -0,0 +1,251 @@
+import { Host, h } from '@stencil/core';
+export class TdsBanner {
+  constructor() {
+    this.handleClose = () => {
+      const tdsCloseEvent = this.tdsClose.emit({
+        bannerId: this.bannerId,
+      });
+      if (!tdsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.handleShow = () => {
+      const tdsCloseEvent = this.tdsShow.emit({
+        bannerId: this.bannerId,
+      });
+      if (!tdsCloseEvent.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("tds-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("tds-icon", { name: "cross", size: "20px" }))))));
+  }
+  static get is() { return "tds-banner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["banner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["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,\nas 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": "tdsClose",
+        "name": "tdsClose",
+        "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": "tdsShow",
+        "name": "tdsShow",
+        "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/block.css

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

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

@@ -0,0 +1,55 @@
+import { h } from '@stencil/core';
+export class TdsBlock {
+  constructor() {
+    this.modeVariant = null;
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'TDS-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: `tds-block ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get is() { return "tds-block"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["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/breadcrumbs/breadcrumb/breadcrumb.css

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+[role=listitem] ::slotted(*) {
+  color: var(--tds-breadcrumb-color);
+  text-decoration: none;
+}
+[role=listitem]:hover ::slotted(*) {
+  color: var(--tds-breadcrumb-color-hover);
+  text-decoration: underline;
+}
+[role=listitem]:focus-visible {
+  outline: 2px solid var(--tds-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(--tds-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(--tds-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/breadcrumbs/breadcrumb/breadcrumb.js

@@ -0,0 +1,63 @@
+import { h } from '@stencil/core';
+export class TdsBreadcrumb {
+  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 "tds-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumb.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/breadcrumbs/breadcrumbs.css

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