@scania/tegel 0.0.7 → 0.0.9

package/dist/collection/components/dropdown/dropdown.js

@@ -1,5 +1,5 @@
 import { h, Host, } from '@stencil/core';
-export class Dropdown {
+export class TdsDropdown {
   constructor() {
     this.modeVariant = null;
     this.placeholder = undefined;
@@ -31,7 +31,7 @@ export class Dropdown {
     this.listItemObject = undefined;
   }
   componentWillLoad() {
-    // If default option is set, update the default selectedLabel value
+    // If a default option is set, update the default selectedLabel value
     // this.host.children is a HTMLCollection type, cannot use forEach
     this.listItemObject = this.host.children;
     this.listItemArray = Array.from(this.listItemObject);
@@ -144,8 +144,8 @@ export class Dropdown {
       const distanceToBottom = this.host.getBoundingClientRect().top;
       const viewportHeight = window.innerHeight;
       this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
-      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
-      // Additional 57px is added as compensation for dropdown element own input/button height
+      // If summary of Dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
+      // Additional 57px is added as compensation for Dropdown element own input/button height
       // It is added on handleClick due to possible dynamic injection of data when component is already rendered
     }
     else {
@@ -156,7 +156,7 @@ export class Dropdown {
     if (typeof this.textInput !== 'undefined' || this.textInput === null) {
       if (!this.selectedLabel && this.selectedLabel.length <= 0) {
         this.textInput.value = '';
-        this.internalSddsSearch.emit('');
+        this.internalTdsSearch.emit('');
       }
       if (this.selectedLabel !== this.textInput.value) {
         this.textInput.value = this.selectedLabel;
@@ -184,7 +184,7 @@ export class Dropdown {
   }
   handleSearch(ev) {
     const searchTerm = ev.target.value;
-    this.internalSddsSearch.emit(searchTerm);
+    this.internalTdsSearch.emit(searchTerm);
     this.open = true;
   }
   deselectAll() {
@@ -203,36 +203,34 @@ export class Dropdown {
   }
   render() {
     return (h(Host, { class: `
-        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}
-        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}
-        ${this.inline ? 'sdds-dropdown-inline' : ''}
-        ${this.selectedLabel.length > 0 || this.selectedLabel === ''
-        ? 'sdds-dropdown--selected'
-        : ''}
-        ${this.state ? 'sdds-dropdown--error' : ''}
-        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}
+        ${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ${this.open && !this.disabled ? 'tds-dropdown--open' : ''}
+        ${this.type === 'multiselect' ? 'tds-dropdown-multiselect' : ''}
+        ${this.inline ? 'tds-dropdown-inline' : ''}
+        ${this.selectedLabel.length > 0 || this.selectedLabel === '' ? 'tds-dropdown--selected' : ''}
+        ${this.state ? 'tds-dropdown--error' : ''}
+        ${this.openUpwards ? 'tds-dropdown--open-upwards' : ''}
         ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
-        ? 'sdds-dropdown--label-inside-position'
+        ? 'tds-dropdown--label-inside-position'
         : ''}
-       `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, h("span", { class: `sdds-dropdown sdds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (h("span", { class: "sdds-dropdown-label-outside" }, this.label)) : (''), h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
-        ? 'sdds-dropdown-toggle--selected'
+       `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, h("span", { class: `tds-dropdown tds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (h("span", { class: "tds-dropdown-label-outside" }, this.label)) : (''), h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `tds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
+        ? 'tds-dropdown-toggle--selected'
         : ''}
                 ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
-        ? `sdds-dropdown-toggle-label-inside-${this.size}`
-        : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, onInput: (event) => this.handleSearch(event), autoComplete: "off" })) : (h("span", { class: {
-        'sdds-dropdown-label-container': true,
-        'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
+        ? `tds-dropdown-toggle-label-inside-${this.size}`
+        : `tds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "tds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "tds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, autoComplete: "off" })) : (h("span", { class: {
+        'tds-dropdown-label-container': true,
+        'tds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
           this.size !== 'sm' &&
           (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
       } }, this.size !== 'sm' &&
       (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
       this.labelPosition === 'inside' &&
-      this.label.length > 0 && (h("span", { class: "sdds-dropdown-label-inside" }, this.label)), h("span", { class: `sdds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
+      this.label.length > 0 && (h("span", { class: "tds-dropdown-label-inside" }, this.label)), h("span", { class: `tds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
         (this.labelPosition === 'inside' && this.label.length < 0)) &&
-        'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
+        'tds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
       this.type !== 'multiselect' &&
-      this.selectedLabel, this.type === 'multiselect' && (h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
+      this.selectedLabel, this.type === 'multiselect' && (h("span", { class: "tds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
       this.selectedLabelsArray.toString().length < 1 &&
       this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
       this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
@@ -244,11 +242,11 @@ export class Dropdown {
       this.placeholder, !this.selectedLabel &&
       this.size === 'sm' &&
       this.labelPosition === 'inside' &&
-      this.placeholder)))), h("svg", { class: "sdds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { class: "sdds-dropdown-menu",
+      this.placeholder)))), h("svg", { class: "tds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { class: "tds-dropdown-menu",
       // Need to have reference in order to calc height and distance from bottom
-      ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, h("slot", null))), h("p", { class: "sdds-dropdown-helper" }, h("svg", { class: "sdds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), h("span", null, this.helper))));
+      ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, h("slot", null))), h("p", { class: "tds-dropdown-helper" }, h("svg", { class: "tds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), h("span", null, this.helper))));
   }
-  static get is() { return "sdds-dropdown"; }
+  static get is() { return "tds-dropdown"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -274,7 +272,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the variant of the dropdown."
+          "text": "Set the variant of the Dropdown."
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -292,7 +290,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Placeholder text for dropdown with no selectedLabel item"
+          "text": "Placeholder text for Dropdown with no selectedLabel item"
         },
         "attribute": "placeholder",
         "reflect": false
@@ -361,7 +359,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "`Controls type of dropdown."
+          "text": "`Controls type of Dropdown."
         },
         "attribute": "type",
         "reflect": false,
@@ -379,7 +377,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
+          "text": "Controls the size of the Dropdown.\n'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
         },
         "attribute": "size",
         "reflect": false,
@@ -468,7 +466,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Add helper text in the bottom of dropdown"
+          "text": "Add helper text in the bottom of Dropdown"
         },
         "attribute": "helper",
         "reflect": false,
@@ -486,7 +484,7 @@ export class Dropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Direction that the dropdown will open. Default is auto."
+          "text": "Direction that the Dropdown will open. Default is auto."
         },
         "attribute": "open-direction",
         "reflect": false,
@@ -515,15 +513,15 @@ export class Dropdown {
   }
   static get events() {
     return [{
-        "method": "internalSddsSearch",
-        "name": "internalSddsSearch",
+        "method": "internalTdsSearch",
+        "name": "internalTdsSearch",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Search event that is emitted to the sdds-dropdown-filter"
+              "text": "Search event that is emitted to the tds-dropdown-filter"
             }],
           "text": ""
         },
@@ -575,7 +573,7 @@ export class Dropdown {
         "capture": false,
         "passive": false
       }, {
-        "name": "internalSddsSelect",
+        "name": "internalTdsSelect",
         "method": "selectOptionHandler",
         "target": undefined,
         "capture": false,

package/dist/collection/components/dropdown-v2/dropdown-option-v2/dropdown-option-v2.css

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+  background-color: var(--tds-dropdown-option-background);
+}
+:host .dropdown-option {
+  display: flex;
+  align-items: center;
+  color: var(--tds-dropdown-option-color);
+  border-bottom: 1px solid var(--tds-dropdown-option-border);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+}
+:host .dropdown-option.selected {
+  background-color: var(--tds-dropdown-option-background-selected);
+}
+:host .dropdown-option.disabled {
+  color: var(--tds-dropdown-option-color-disabled);
+}
+:host .dropdown-option.lg {
+  height: 47px;
+}
+:host .dropdown-option.md {
+  height: 47px;
+}
+:host .dropdown-option.sm {
+  height: 39px;
+}
+:host .dropdown-option button {
+  all: unset;
+  width: 100%;
+  height: 100%;
+}
+:host .dropdown-option button .single-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+:host .dropdown-option button:focus {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host .dropdown-option .multiselect {
+  padding: 0 16px;
+  width: 100%;
+}
+:host .dropdown-option .multiselect tds-checkbox,
+:host .dropdown-option .multiselect .tds-checkbox-webcomponent,
+:host .dropdown-option .multiselect label {
+  height: 100%;
+  width: 100%;
+}
+:host .dropdown-option:hover {
+  background-color: var(--tds-dropdown-option-background-hover);
+  cursor: pointer;
+}
+:host .dropdown-option:hover.disabled {
+  background-color: var(--tds-dropdown-option-background);
+  cursor: not-allowed;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/dropdown-v2/dropdown-option-v2/dropdown-option-v2.js

@@ -0,0 +1,216 @@
+import { Host, h } from '@stencil/core';
+export class TdsDropdownOptionV2 {
+  constructor() {
+    this.connectedCallback = () => {
+      this.parentElement =
+        this.host.parentElement.tagName === 'TDS-DROPDOWN-V2'
+          ? this.host.parentElement
+          : this.host.getRootNode().host;
+      this.multiselect = this.parentElement.multiselect;
+      this.size = this.parentElement.size;
+      this.label = this.host.textContent.trim();
+    };
+    this.handleSingleSelect = () => {
+      if (!this.disabled) {
+        this.selected = true;
+        this.parentElement.setValue(this.value, this.label);
+        this.parentElement.close();
+        this.tdsSelect.emit({
+          value: this.value,
+          selected: this.selected,
+        });
+      }
+    };
+    this.handleMultiselect = (event) => {
+      if (!this.disabled) {
+        if (event.detail.checked) {
+          this.parentElement.setValue(this.value, this.label);
+          this.selected = true;
+          this.tdsSelect.emit({
+            value: this.value,
+            selected: this.selected,
+          });
+        }
+        else {
+          this.parentElement.removeValue(this.value);
+          this.selected = false;
+          this.tdsSelect.emit({
+            value: this.value,
+            selected: this.selected,
+          });
+        }
+      }
+    };
+    this.handleFocus = (event) => {
+      this.tdsFocus.emit(event);
+    };
+    this.handleBlur = (event) => {
+      this.tdsBlur.emit(event);
+    };
+    this.value = undefined;
+    this.disabled = false;
+    this.selected = false;
+    this.multiselect = undefined;
+    this.size = 'lg';
+  }
+  /** Method to select/deselect an option if the option is not disabled. */
+  async setSelected(selected) {
+    if (!this.disabled) {
+      this.selected = selected;
+    }
+  }
+  render() {
+    return (h(Host, { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { class: `dropdown-option 
+          ${this.size}
+          ${this.selected ? 'selected' : ''}
+          ${this.disabled ? 'disabled' : ''}
+          ` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
+        if (event.key === 'Escape') {
+          this.parentElement.close();
+        }
+      } }, h("tds-checkbox", { onTdsChange: (event) => {
+        this.handleMultiselect(event);
+      }, disabled: this.disabled, checked: this.selected }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
+        this.handleSingleSelect();
+      }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
+  }
+  static get is() { return "tds-dropdown-option-v2"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-option-v2.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-option-v2.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value for the Dropdown option."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the option as disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selected": {},
+      "multiselect": {},
+      "size": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsSelect",
+        "name": "tdsSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Click event for the Dropdown option."
+        },
+        "complexType": {
+          "original": "{\n    selected: boolean;\n    value: string;\n  }",
+          "resolved": "{ selected: boolean; value: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "tdsFocus",
+        "name": "tdsFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event for the Dropdown option."
+        },
+        "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 Dropdown option."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setSelected": {
+        "complexType": {
+          "signature": "(selected: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Method to select/deselect an option if the option is not disabled.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}