@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/textarea/textarea.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-export class Textarea {
+export class TdsTextarea {
   constructor() {
     this.label = '';
     this.name = '';
@@ -19,22 +19,22 @@ export class Textarea {
     this.focusInput = undefined;
   }
   handleChange(event) {
-    this.sddsChange.emit(event);
+    this.tdsChange.emit(event);
   }
   handleBlur(event) {
-    this.sddsBlur.emit(event);
+    this.tdsBlur.emit(event);
     this.focusInput = false;
   }
   // Data input event in value prop
   handleInput(event) {
-    this.sddsInput.emit(event);
+    this.tdsInput.emit(event);
     this.value = event.target.value;
   }
-  /* Set the input as focus when clicking the whole textfield with suffix/prefix */
+  /* Set the input as focus when clicking the whole textarea with suffix/prefix */
   handleFocus(event) {
     this.textEl.focus();
     this.focusInput = true;
-    this.sddsFocus.emit(event);
+    this.tdsFocus.emit(event);
   }
   render() {
     var _a;
@@ -44,7 +44,7 @@ export class Textarea {
         ${this.focusInput ? 'textarea-focus' : ''}
         ${this.disabled ? 'textarea-disabled' : ''}
         ${this.readOnly ? 'textarea-readonly' : ''}
-        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
         ${this.value ? 'textarea-data' : ''}
         ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
         ${this.noMinWidth ? 'no-min-width' : ''}
@@ -56,9 +56,9 @@ export class Textarea {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { class: "textarea-icon__readonly" }, h("sdds-icon", { name: "edit_inactive" })), h("span", { class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'textarea-helper' }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+      }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { class: "textarea-icon__readonly" }, h("tds-icon", { name: "edit_inactive" })), h("span", { class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
   }
-  static get is() { return "sdds-textarea"; }
+  static get is() { return "tds-textarea"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -171,7 +171,7 @@ export class Textarea {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Position of the label for the textfield."
+          "text": "Position of the label for the Textarea."
         },
         "attribute": "label-position",
         "reflect": false,
@@ -296,7 +296,7 @@ export class Textarea {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Mode variant of the textarea"
+          "text": "Mode variant of the Textarea"
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -347,14 +347,14 @@ export class Textarea {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Change event for the textarea"
+          "text": "Change event for the Textarea"
         },
         "complexType": {
           "original": "any",
@@ -362,14 +362,14 @@ export class Textarea {
           "references": {}
         }
       }, {
-        "method": "sddsBlur",
-        "name": "sddsBlur",
+        "method": "tdsBlur",
+        "name": "tdsBlur",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Blur event for the textarea"
+          "text": "Blur event for the Textarea"
         },
         "complexType": {
           "original": "FocusEvent",
@@ -381,14 +381,14 @@ export class Textarea {
           }
         }
       }, {
-        "method": "sddsInput",
-        "name": "sddsInput",
+        "method": "tdsInput",
+        "name": "tdsInput",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Input event for the textarea"
+          "text": "Input event for the Textarea"
         },
         "complexType": {
           "original": "InputEvent",
@@ -400,14 +400,14 @@ export class Textarea {
           }
         }
       }, {
-        "method": "sddsFocus",
-        "name": "sddsFocus",
+        "method": "tdsFocus",
+        "name": "tdsFocus",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Focus event for the textarea"
+          "text": "Focus event for the Textarea"
         },
         "complexType": {
           "original": "FocusEvent",

package/dist/collection/components/toast/toast.css

@@ -0,0 +1,102 @@
+:host(.hide) {
+  display: none;
+  visibility: hidden;
+}
+
+:host {
+  z-index: 700;
+}
+:host .toast-wrapper {
+  display: flex;
+  width: 348px;
+  background-color: var(--tds-toast-background-color);
+  border-radius: 4px;
+}
+:host .toast-wrapper.information {
+  border-left: 4px solid var(--tds-information);
+}
+:host .toast-wrapper.information tds-icon {
+  color: var(--tds-information);
+}
+:host .toast-wrapper.success {
+  border-left: 4px solid var(--tds-positive);
+}
+:host .toast-wrapper.success tds-icon {
+  color: var(--tds-positive);
+}
+:host .toast-wrapper.error {
+  border-left: 4px solid var(--tds-negative);
+}
+:host .toast-wrapper.error tds-icon {
+  color: var(--tds-negative);
+}
+:host .toast-wrapper.warning {
+  border-left: 4px solid var(--tds-warning);
+}
+:host .toast-wrapper.warning tds-icon {
+  color: var(--tds-warning);
+}
+:host .toast-wrapper button.toast-close {
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 14px 14px 0 0;
+  border: none;
+  background: transparent;
+}
+:host .toast-wrapper button.toast-close:hover {
+  cursor: pointer;
+}
+:host .toast-wrapper button.toast-close:focus {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host .toast-wrapper button.toast-close tds-icon {
+  color: var(--tds-toast-dissmiss-color);
+  padding: 0;
+}
+:host tds-icon {
+  padding: 14px 0 0 12px;
+}
+:host .toast-content {
+  padding: 16px 0 16px 10px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+:host .toast-content .toast-header {
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-toast-headline-color);
+}
+:host .toast-content .toast-header.no-subheader {
+  margin-bottom: 4px;
+}
+:host .toast-content .toast-header.only-header {
+  margin-bottom: 0;
+}
+:host .toast-content .toast-subheader slot::slotted(*) {
+  margin-top: 4px;
+  color: var(--tds-toast-subheadline-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding-bottom: 16px;
+  max-width: 252px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host .toast-content .toast-subheader.no-link slot::slotted(*) {
+  padding-bottom: 0;
+}
+:host slot[name=toast-link]::slotted(*) {
+  color: var(--tds-toast-link-color);
+}
+:host .tds-mode-variant-primary {
+  --tds-toast-background: var(--tds-toast-background-primary);
+}
+:host .tds-mode-variant-secondary {
+  --tds-toast-background: var(--tds-toast-background-secondary);
+}

package/dist/collection/components/toast/toast.js

@@ -0,0 +1,258 @@
+import { Host, h } from '@stencil/core';
+export class TdsToast {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.handleClose = () => {
+      const tdsCloseEvent = this.tdsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!tdsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.handleShow = () => {
+      const tdsCloseEvent = this.tdsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!tdsCloseEvent.defaultPrevented) {
+        this.hidden = false;
+      }
+    };
+    this.getHeaderClasses = () => {
+      if (!this.hasSubheader && !this.hasLink) {
+        return 'only-header';
+      }
+      if (!this.hasSubheader) {
+        return 'no-subheader';
+      }
+      return '';
+    };
+    this.toastId = crypto.randomUUID();
+    this.header = undefined;
+    this.subheader = undefined;
+    this.type = 'information';
+    this.hidden = false;
+    this.toastRole = 'alert';
+    this.hasSubheader = undefined;
+    this.hasLink = undefined;
+  }
+  /** Hides the Toast. */
+  async hideToast() {
+    this.handleClose();
+  }
+  /** Shows the Toast. */
+  async showToast() {
+    this.handleShow();
+  }
+  connectedCallback() {
+    const children = Array.from(this.host.children);
+    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
+    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
+  }
+  render() {
+    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+            toast-wrapper
+            ${this.type}
+            ` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header
+              ${this.getHeaderClasses()}
+              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
+        this.handleClose();
+      }, class: `toast-close` }, h("tds-icon", { name: "cross", size: "20px" })))));
+  }
+  static get is() { return "tds-toast"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["toast.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["toast.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "toastId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the Toast. Randomly generated if not specified."
+        },
+        "attribute": "toast-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text for the component."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text for the component."
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'information' | 'error' | 'warning' | 'success'",
+          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of Toast."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'information'"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hides the Toast."
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "toastRole": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'alert' | 'log' | 'status'",
+          "resolved": "\"alert\" | \"log\" | \"status\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ARIA role for the Toast."
+        },
+        "attribute": "toast-role",
+        "reflect": false,
+        "defaultValue": "'alert'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasSubheader": {},
+      "hasLink": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsClose",
+        "name": "tdsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique Toast identifier when component is closed."
+        },
+        "complexType": {
+          "original": "{\n    toastId: string;\n  }",
+          "resolved": "{ toastId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hideToast": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hides the Toast.",
+          "tags": []
+        }
+      },
+      "showToast": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the Toast.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/toggle/toggle.css

@@ -0,0 +1,105 @@
+.tds-toggle .toggle-headline {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-toggle-headline);
+  margin-bottom: 12px;
+}
+.tds-toggle .toggle-headline.disabled {
+  color: var(--tds-toggle-headline-disabled);
+}
+.tds-toggle input[type=checkbox] {
+  appearance: initial;
+  margin: 0;
+  width: 44px;
+  height: 24px;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  /* Switch */
+}
+.tds-toggle input[type=checkbox]::after, .tds-toggle input[type=checkbox]::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+.tds-toggle input[type=checkbox]::before {
+  /* Slider */
+  width: 44px;
+  height: 24px;
+  border-radius: 16px;
+  background-color: var(--tds-toggle-off-slider);
+  left: 0;
+}
+.tds-toggle input[type=checkbox]::after {
+  width: 16px;
+  height: 16px;
+  background-color: var(--tds-toggle-switch);
+  border-radius: 50%;
+  left: 4px;
+  top: 4px;
+}
+.tds-toggle input[type=checkbox]:focus {
+  outline: none;
+}
+.tds-toggle input[type=checkbox]:focus::before {
+  background-color: var(--tds-toggle-off-slider-focus);
+  border: 1px solid var(--tds-toggle-off-border-focus);
+}
+.tds-toggle input[type=checkbox]:checked::before {
+  background-color: var(--tds-toggle-on-slider);
+  border: 1px solid var(--tds-toggle-on-border-focus);
+}
+.tds-toggle input[type=checkbox]:checked::after {
+  left: 24px;
+}
+.tds-toggle input[type=checkbox]:disabled::before {
+  background-color: var(--tds-toggle-slider-disabled);
+  border: 1px solid var(--tds-toggle-slider-disabled);
+}
+.tds-toggle input[type=checkbox]:disabled::after {
+  background-color: var(--tds-toggle-switch-disabled);
+}
+.tds-toggle input[type=checkbox]:disabled:checked::before {
+  background-color: var(--tds-toggle-on-slider-disabled);
+  border: 1px solid var(--tds-toggle-on-slider-disabled);
+}
+.tds-toggle input[type=checkbox]:disabled:checked::after {
+  background-color: var(--tds-toggle-switch-disabled);
+}
+.tds-toggle input[type=checkbox].sm {
+  width: 28px;
+  height: 16px;
+}
+.tds-toggle input[type=checkbox].sm::before {
+  width: 28px;
+  height: 16px;
+}
+.tds-toggle input[type=checkbox].sm::after {
+  width: 8px;
+  height: 8px;
+}
+.tds-toggle input[type=checkbox].sm:checked::before {
+  background-color: var(--tds-toggle-on-slider);
+}
+.tds-toggle input[type=checkbox].sm:checked::after {
+  left: 16px;
+}
+.tds-toggle input[type=checkbox].sm:disabled::before {
+  background-color: var(--tds-toggle-slider-disabled);
+  border: 1px solid var(--tds-toggle-slider-disabled);
+}
+.tds-toggle input[type=checkbox].sm:disabled::after {
+  background-color: var(--tds-toggle-switch-disabled);
+}
+.tds-toggle label {
+  display: inline-block;
+  vertical-align: middle;
+  font: var(--tds-detail-01);
+  letter-spacing: var(--tds-detail-01-ls);
+  color: var(--tds-toggle-label-color);
+  padding-left: 8px;
+}
+.tds-toggle label.disabled {
+  color: var(--tds-toggle-label-color-disabled);
+}