@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/text-field/text-field.js

@@ -0,0 +1,431 @@
+import { h } from '@stencil/core';
+export class TdsTextField {
+  constructor() {
+    this.type = 'text';
+    this.labelPosition = 'no-label';
+    this.label = '';
+    this.helper = undefined;
+    this.placeholder = '';
+    this.value = '';
+    this.disabled = false;
+    this.readOnly = false;
+    this.size = 'lg';
+    this.modeVariant = null;
+    this.noMinWidth = false;
+    this.name = '';
+    this.state = 'default';
+    this.maxLength = undefined;
+    this.autofocus = false;
+    this.focusInput = undefined;
+  }
+  handleChange(event) {
+    this.tdsChange.emit(event);
+  }
+  // Data input event in value prop
+  handleInput(event) {
+    this.tdsInput.emit(event);
+    this.value = event.target.value;
+  }
+  /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
+  handleFocus(event) {
+    this.textInput.focus();
+    this.focusInput = true;
+    this.tdsFocus.emit(event);
+  }
+  /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
+  handleBlur(event) {
+    this.focusInput = false;
+    this.tdsBlur.emit(event);
+  }
+  render() {
+    var _a;
+    return (h("div", { class: `
+        ${this.noMinWidth ? 'form-text-field-nomin' : ''}
+        ${this.focusInput && !this.disabled
+        ? 'form-text-field text-field-focus'
+        : ' form-text-field'}
+        ${this.value ? 'text-field-data' : ''}
+        ${this.labelPosition === 'inside' && this.size !== 'sm'
+        ? 'text-field-container-label-inside'
+        : ''}
+        ${this.disabled ? 'form-text-field-disabled' : ''}
+        ${this.readOnly ? 'form-text-field-readonly' : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ${this.size === 'md' ? 'form-text-field-md' : ''}
+        ${this.size === 'sm' ? 'form-text-field-sm' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" })), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        if (!this.readOnly) {
+          this.handleFocus(event);
+        }
+      }, onBlur: (event) => {
+        if (!this.readOnly) {
+          this.handleBlur(event);
+        }
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" })), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength)))));
+  }
+  static get is() { return "tds-text-field"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["text-field.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["text-field.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'text' | 'password'",
+          "resolved": "\"password\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Which input type, text, password or similar"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'text'"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inside' | 'outside' | 'no-label'",
+          "resolved": "\"inside\" | \"no-label\" | \"outside\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the label for the Text Field."
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'no-label'"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label text"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "helper": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Helper text"
+        },
+        "attribute": "helper",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text"
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of the input text"
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set input in disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set input in readonly state"
+        },
+        "attribute": "read-only",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the input"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mode variant of the Text Field"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "noMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With setting"
+        },
+        "attribute": "no-min-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name property"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'error' | 'success' | 'default'",
+          "resolved": "\"default\" | \"error\" | \"success\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Error state of input"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Max length of input"
+        },
+        "attribute": "max-length",
+        "reflect": false
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Autofocus for input"
+        },
+        "attribute": "autofocus",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focusInput": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsChange",
+        "name": "tdsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Change event for the Text Field"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "tdsInput",
+        "name": "tdsInput",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input event for the Text Field"
+        },
+        "complexType": {
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "tdsFocus",
+        "name": "tdsFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event for the Text Field"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "tdsBlur",
+        "name": "tdsBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Blur event for the Text Field"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/textarea/textarea.css

@@ -25,7 +25,7 @@
   height: 2px;
   width: 0;
   position: absolute;
-  background: var(--sdds-textarea-bar);
+  background: var(--tds-textarea-bar);
   transition: 0.35s ease all;
 }
 .textarea-container:not(.textarea-disabled) .textarea-wrapper::before {
@@ -46,43 +46,43 @@
   border: none;
   outline: none;
   height: 100%;
-  color: var(--sdds-textarea-color);
-  background-color: var(--sdds-textarea-background);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
+  color: var(--tds-textarea-color);
+  background-color: var(--tds-textarea-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
   display: block;
   resize: vertical;
-  border-bottom: 1px solid var(--sdds-textarea-border-bottom);
+  border-bottom: 1px solid var(--tds-textarea-border-bottom);
   transition: border-bottom-color 200ms ease;
 }
 .textarea-input::placeholder {
   opacity: 1;
-  color: var(--sdds-textarea-placeholder);
+  color: var(--tds-textarea-placeholder);
 }
 .textarea-input:focus::placeholder {
-  color: var(--sdds-textarea-placeholder-focus-color);
+  color: var(--tds-textarea-placeholder-focus-color);
 }
 .textarea-input:disabled {
-  background-color: var(--sdds-textarea-disabled-background);
-  color: var(--sdds-textarea-disabled-color);
+  background-color: var(--tds-textarea-disabled-background);
+  color: var(--tds-textarea-disabled-color);
   cursor: not-allowed;
 }
 .textarea-input:disabled::placeholder {
-  color: var(--sdds-textarea-disabled-placeholder);
+  color: var(--tds-textarea-disabled-placeholder);
 }
 .textarea-input:disabled ~ .textfield-label-inside {
-  color: var(--sdds-textarea-disabled-label);
+  color: var(--tds-textarea-disabled-label);
 }
 .textarea-input::-webkit-resizer {
   display: none;
 }
 .textarea-input:hover {
-  border-bottom-color: var(--sdds-textarea-border-bottom-hover);
+  border-bottom-color: var(--tds-textarea-border-bottom-hover);
 }
 
 .textarea-resizer-icon {
-  color: var(--sdds-textarea-resize-icon);
+  color: var(--tds-textarea-resize-icon);
   position: absolute;
   display: block;
   bottom: 2px;
@@ -90,29 +90,29 @@
   padding-bottom: 2px;
   padding-right: 2px;
   pointer-events: none;
-  background-color: var(--sdds-textarea-background);
+  background-color: var(--tds-textarea-background);
 }
 .textarea-resizer-icon svg {
   display: block;
 }
 
 .textarea-label {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: block;
   z-index: 1;
-  margin-bottom: var(--sdds-spacing-element-8);
-  color: var(--sdds-textarea-label-color);
+  margin-bottom: var(--tds-spacing-element-8);
+  color: var(--tds-textarea-label-color);
 }
 
 .textarea-container.textarea-label-inside .textarea-label {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   transition: 0.1s ease all;
-  color: var(--sdds-textarea-label-inside-color);
+  color: var(--tds-textarea-label-inside-color);
   position: absolute;
-  top: var(--sdds-spacing-element-20);
-  left: var(--sdds-spacing-element-16);
+  top: var(--tds-spacing-element-20);
+  left: var(--tds-spacing-element-16);
 }
 .textarea-container.textarea-label-inside .textarea-input::placeholder {
   color: transparent;
@@ -122,45 +122,45 @@
 }
 .textarea-container.textarea-label-inside .textarea-input:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--sdds-textarea-placeholder-focus-color);
+  color: var(--tds-textarea-placeholder-focus-color);
 }
 .textarea-container.textarea-focus.textarea-label-inside .textarea-label {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  top: var(--sdds-spacing-element-8);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  top: var(--tds-spacing-element-8);
 }
 .textarea-container.textarea-focus .textarea-wrapper::before, .textarea-container.textarea-focus .textarea-wrapper::after {
   width: 50%;
 }
 .textarea-container.textarea-data.textarea-label-inside .textarea-label {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  top: var(--sdds-spacing-element-8);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  top: var(--tds-spacing-element-8);
 }
 
 .textarea-textcounter {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-textarea-textcounter);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-textarea-textcounter);
   float: right;
   flex-basis: 100%;
   text-align: right;
-  padding-top: var(--sdds-spacing-element-4);
+  padding-top: var(--tds-spacing-element-4);
 }
 .textarea-textcounter .textfield-textcounter-divider {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-textarea-textcounter-divider);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-textarea-textcounter-divider);
 }
 
 .textarea-helper {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   gap: 8px;
   align-items: center;
-  padding-top: var(--sdds-spacing-element-4);
-  color: var(--sdds-textarea-helper);
+  padding-top: var(--tds-spacing-element-4);
+  color: var(--tds-textarea-helper);
   flex-grow: 2;
   flex-basis: auto;
 }
@@ -169,24 +169,24 @@
 }
 
 .textarea-success .textarea-input {
-  border-bottom-color: var(--sdds-textarea-border-bottom-success);
+  border-bottom-color: var(--tds-textarea-border-bottom-success);
 }
 
 .textarea-error .textarea-input {
-  border-bottom-color: var(--sdds-textarea-border-bottom-error);
+  border-bottom-color: var(--tds-textarea-border-bottom-error);
 }
 .textarea-error .textarea-wrapper::after, .textarea-error .textarea-wrapper::before {
-  background: var(--sdds-textarea-bar-error);
+  background: var(--tds-textarea-bar-error);
 }
 .textarea-error .textarea-helper {
-  color: var(--sdds-textarea-helper-error);
+  color: var(--tds-textarea-helper-error);
 }
 
 .textarea-disabled .textarea-input {
   border-bottom-color: transparent;
 }
 .textarea-disabled .textarea-label {
-  color: var(--sdds-textarea-disabled-label);
+  color: var(--tds-textarea-disabled-label);
 }
 
 .textarea-icon__readonly {
@@ -194,18 +194,18 @@
   position: absolute;
   right: 18px;
   top: 18px;
-  color: var(--sdds-textarea-icon-read-only-color);
+  color: var(--tds-textarea-icon-read-only-color);
 }
 .textarea-icon__readonly-label {
   display: none;
   position: absolute;
   right: 18px;
   top: 48px;
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   padding: 8px;
-  color: var(--sdds-textarea-icon-read-only-label-color);
-  background-color: var(--sdds-textarea-icon-read-only-label-background);
+  color: var(--tds-textarea-icon-read-only-label-color);
+  background-color: var(--tds-textarea-icon-read-only-label-background);
   white-space: nowrap;
   border-radius: 4px 0 4px 4px;
 }