@scania/tegel 0.0.8 → 0.0.10

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

@@ -1,380 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class DropdownFilter {
-  constructor() {
-    this.dataOptions = [];
-    this.filteredContent = [];
-    this.searchTerm = '';
-    this.selectedOptionState = undefined;
-    this.dropdownRef = undefined;
-    this.modeVariant = null;
-    this.placeholder = '';
-    this.label = undefined;
-    this.defaultOption = undefined;
-    this.openDirection = 'auto';
-    this.selectedOption = undefined;
-    this.disabled = false;
-    this.size = 'lg';
-    this.inline = false;
-    this.labelPosition = 'no-label';
-    this.state = false;
-    this.helper = '';
-    this.data = undefined;
-    this.selectedLabel = 'no-selected';
-    this.selectedValue = 'no-selected';
-  }
-  componentWillLoad() {
-    this.parseData(this.data);
-    if (this.defaultOption) {
-      this.selectedOptionState = this.defaultOption;
-    }
-  }
-  parseData(newValue) {
-    if (newValue)
-      this.dataOptions = JSON.parse(newValue);
-    this.filteredContent = this.dataOptions;
-  }
-  updateOptionsContent(event) {
-    this.searchTerm = event.detail;
-    this.findData();
-  }
-  selectOptionHandler(event) {
-    this.selectedOptionState = event.detail.value;
-    this.selectedLabel = event.detail.label;
-    this.selectedValue = event.detail.value;
-    // Reset list when search is done and user have selected one option
-    // To match with animation time for option list to fadeout first
-    setTimeout(() => {
-      this.filteredContent = this.dataOptions;
-    }, 200);
-  }
-  findData() {
-    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');
-    this.filteredContent = this.dataOptions.filter((option) => {
-      if (option.label) {
-        const listItem = option.label.toLowerCase();
-        const searchResultList = listItem.match(searchAsRegEx);
-        if (searchResultList) {
-          return searchResultList;
-        }
-        this.selectedOptionState = null;
-        this.selectedLabel = 'no-result';
-        this.selectedValue = 'no-result';
-      }
-    });
-  }
-  setOptionsContent() {
-    const newList = this.filteredContent.map((obj) => (h("sdds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
-    if (newList.length > 0) {
-      return newList;
-    }
-    return (h("sdds-dropdown-option", { tabindex: "-1", value: "no-result", class: "sdds-option--no-result" }, "No result"));
-  }
-  /** Use this method to reset the dropdown. Then it will go back to its initial state. */
-  async resetOption() {
-    var _a;
-    await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.resetOption());
-  }
-  render() {
-    return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel, class: `
-      ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
-     ` }, h("sdds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null, openDirection: this.openDirection }, this.setOptionsContent())));
-  }
-  static get is() { return "sdds-dropdown-filter"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./../dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../dropdown.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": "Set the variant of the dropdown."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Placeholder text for dropdown with no selected item"
-        },
-        "attribute": "placeholder",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label for dropdown with no selected item"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "defaultOption": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add the value of the option to set it as default"
-        },
-        "attribute": "default-option",
-        "reflect": false
-      },
-      "openDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'down' | 'up' | 'auto'",
-          "resolved": "\"auto\" | \"down\" | \"up\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Direction that the dropdown will open. Default is auto."
-        },
-        "attribute": "open-direction",
-        "reflect": false,
-        "defaultValue": "'auto'"
-      },
-      "selectedOption": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add the value of the option as string to set it as new selected value"
-        },
-        "attribute": "selected-option",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add the value of the option to set it as default"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "inline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to make the width following the label text length"
-        },
-        "attribute": "inline",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "labelPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'no-label' | 'outside'",
-          "resolved": "\"no-label\" | \"outside\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Position of label"
-        },
-        "attribute": "label-position",
-        "reflect": false,
-        "defaultValue": "'no-label'"
-      },
-      "state": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Support `error` state"
-        },
-        "attribute": "state",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "helper": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Add helper text in the bottom of dropdown"
-        },
-        "attribute": "helper",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "data": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Data is an array of objects that contains label and value\n`data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`"
-        },
-        "attribute": "data",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "dataOptions": {},
-      "filteredContent": {},
-      "searchTerm": {},
-      "selectedOptionState": {},
-      "dropdownRef": {},
-      "selectedLabel": {},
-      "selectedValue": {}
-    };
-  }
-  static get methods() {
-    return {
-      "resetOption": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Use this method to reset the dropdown. Then it will go back to its initial state.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "data",
-        "methodName": "parseData"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "internalSddsSearch",
-        "method": "updateOptionsContent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "internalSddsSelect",
-        "method": "selectOptionHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

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

@@ -1,64 +0,0 @@
-:host {
-  display: block;
-  background-color: var(--sdds-dropdown-option-background);
-}
-:host .dropdown-option {
-  display: flex;
-  align-items: center;
-  color: var(--sdds-dropdown-option-color);
-  border-bottom: 1px solid var(--sdds-dropdown-option-border);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-}
-:host .dropdown-option.selected {
-  background-color: var(--sdds-dropdown-option-background-selected);
-}
-:host .dropdown-option.disabled {
-  color: var(--sdds-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(--sdds-blue-400);
-  outline-offset: -2px;
-}
-:host .dropdown-option .multiselect {
-  padding: 0 16px;
-  width: 100%;
-}
-:host .dropdown-option .multiselect sdds-checkbox,
-:host .dropdown-option .multiselect .sdds-checkbox-webcomponent,
-:host .dropdown-option .multiselect label {
-  height: 100%;
-  width: 100%;
-}
-:host .dropdown-option:hover {
-  background-color: var(--sdds-dropdown-option-background-hover);
-  cursor: pointer;
-}
-:host .dropdown-option:hover.disabled {
-  background-color: var(--sdds-dropdown-option-background);
-  cursor: not-allowed;
-}
-
-:host([hidden]) {
-  display: none;
-}

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

@@ -1,216 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class SddsDropdownOptionV2 {
-  constructor() {
-    this.connectedCallback = () => {
-      this.parentElement =
-        this.host.parentElement.tagName === 'SDDS-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.sddsSelect.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.sddsSelect.emit({
-            value: this.value,
-            selected: this.selected,
-          });
-        }
-        else {
-          this.parentElement.removeValue(this.value);
-          this.selected = false;
-          this.sddsSelect.emit({
-            value: this.value,
-            selected: this.selected,
-          });
-        }
-      }
-    };
-    this.handleFocus = (event) => {
-      this.sddsFocus.emit(event);
-    };
-    this.handleBlur = (event) => {
-      this.sddsBlur.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("sdds-checkbox", { onSddsChange: (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("sdds-icon", { name: "tick", size: "16px" })))))));
-  }
-  static get is() { return "sdds-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": "sddsSelect",
-        "name": "sddsSelect",
-        "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": "sddsFocus",
-        "name": "sddsFocus",
-        "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": "sddsBlur",
-        "name": "sddsBlur",
-        "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"; }
-}