@scania/tegel 0.0.72 → 1.0.0

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"; }
-}

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

@@ -1,286 +0,0 @@
-:host button {
-  all: unset;
-  height: 100%;
-  width: 100%;
-  background-color: var(--sdds-dropdown-bg);
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom);
-  border-radius: 4px 4px 0 0;
-}
-:host button:hover {
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom-hover);
-}
-:host button .value-wrapper {
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-:host button.placeholder {
-  color: var(--sdds-dropdown-placeholder-color);
-}
-:host button.value {
-  color: var(--sdds-dropdown-value-color);
-}
-:host button:focus {
-  border-bottom-color: transparent;
-}
-:host button:focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--sdds-dropdown-border-bottom-open);
-}
-:host button:disabled {
-  color: var(--sdds-dropdown-disabled-color);
-}
-
-:host .filter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-  background-color: var(--sdds-dropdown-bg);
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom);
-  padding-left: 16px;
-  border-radius: 4px 4px 0 0;
-}
-:host .filter:hover {
-  border-bottom: 1px solid var(--sdds-dropdown-border-bottom-hover);
-}
-:host .filter.disabled {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .filter .value-wrapper {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-:host .filter .label-inside-as-placeholder {
-  position: absolute;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-dropdown-placeholder-color);
-}
-:host .filter .label-inside-as-placeholder.lg {
-  top: 20px;
-}
-:host .filter .label-inside-as-placeholder.md {
-  top: 16px;
-}
-:host .filter .label-inside-as-placeholder.sm {
-  display: none;
-}
-:host .filter .label-inside-as-placeholder.selected {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  transition: all 0.2s ease-in-out;
-}
-:host .filter .label-inside-as-placeholder.selected.lg {
-  top: 12px;
-}
-:host .filter .label-inside-as-placeholder.selected.md {
-  top: 8px;
-}
-:host .filter .label-inside-as-placeholder.selected.sm {
-  display: none;
-}
-:host .filter .label-inside-as-placeholder.selected + .placeholder:not(.sm) {
-  margin-top: 8px;
-}
-:host .filter.focus {
-  border-bottom-color: transparent;
-}
-:host .filter.focus::before {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: var(--sdds-dropdown-border-bottom-open);
-}
-:host .filter input {
-  flex: 1;
-  all: unset;
-  width: 100%;
-}
-:host .filter input::placeholder {
-  color: var(--sdds-dropdown-placeholder-color);
-}
-:host .filter input:disabled::placeholder {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .filter sdds-icon {
-  margin-right: 16px;
-  z-index: 101;
-}
-
-:host {
-  display: block;
-  position: relative;
-  z-index: 100;
-}
-:host .label-outside {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-dropdown-label-color);
-  margin-bottom: 8px;
-}
-:host .label-outside.disabled {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .dropdown-select {
-  position: relative;
-}
-:host .dropdown-select.disabled .label-inside,
-:host .dropdown-select.disabled .placeholder,
-:host .dropdown-select.disabled .label-inside-as-placeholder,
-:host .dropdown-select.disabled .value-wrapper {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .dropdown-select .label-inside {
-  position: absolute;
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  color: var(--sdds-dropdown-label-inside-color);
-}
-:host .dropdown-select .label-inside.lg {
-  top: 12px;
-  left: 16px;
-}
-:host .dropdown-select .label-inside.md {
-  top: 8px;
-  left: 16px;
-}
-:host .dropdown-select .label-inside.sm {
-  display: none;
-}
-:host .dropdown-select .label-inside + .placeholder:not(.sm) {
-  margin-top: 8px;
-}
-:host .dropdown-select .placeholder {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-:host .dropdown-select .label-inside-as-placeholder {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-dropdown-placeholder-color);
-}
-:host .dropdown-select .label-inside-as-placeholder.selected {
-  position: absolute;
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  transition: all 0.2s ease-in-out;
-}
-:host .dropdown-select .label-inside-as-placeholder.selected.lg {
-  top: 12px;
-}
-:host .dropdown-select .label-inside-as-placeholder.selected.md {
-  top: 8px;
-}
-:host .dropdown-select .label-inside-as-placeholder.selected.sm {
-  display: none;
-}
-:host .dropdown-select .label-inside-as-placeholder.selected + .placeholder:not(.sm) {
-  margin-top: 8px;
-}
-:host .dropdown-select.lg {
-  height: 55px;
-}
-:host .dropdown-select.md {
-  height: 47px;
-}
-:host .dropdown-select.sm {
-  height: 39px;
-}
-:host .helper {
-  margin-top: 4px;
-  color: var(--sdds-dropdown-helper-color);
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-:host .helper.error {
-  color: var(--sdds-negative);
-}
-:host .helper.disabled {
-  color: var(--sdds-dropdown-disabled-color);
-}
-:host .dropdown-list {
-  position: absolute;
-  margin-top: 1px;
-  width: 100%;
-  transform-origin: top;
-  transition: transform 0.2s ease-in-out;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px 0;
-  border-radius: 0 0 4px 4px;
-  overflow-y: auto;
-}
-:host .dropdown-list::-webkit-scrollbar {
-  width: 4px;
-  background-color: inherit;
-}
-:host .dropdown-list::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-300);
-}
-:host .dropdown-list ::-webkit-scrollbar-button {
-  height: 0;
-  width: 0;
-}
-:host .dropdown-list.lg {
-  max-height: 312px;
-}
-:host .dropdown-list.md {
-  max-height: 312px;
-}
-:host .dropdown-list.sm {
-  max-height: 260px;
-}
-:host .dropdown-list.up {
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 1px;
-  transform-origin: bottom;
-  display: flex;
-  flex-direction: column-reverse;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 3px 0;
-  border-radius: 4px 4px 0 0;
-}
-:host .dropdown-list.up.label-outside {
-  bottom: calc(100% - 24px);
-}
-:host .dropdown-list.closed {
-  transform: scaleY(0);
-  visibility: hidden;
-}
-:host .dropdown-list.open {
-  transform: scaleY(1);
-}
-:host .dropdown-list .no-result {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  background-color: var(--sdds-dropdown-bg);
-}
-:host .dropdown-list .no-result.lg {
-  height: 56px;
-}
-:host .dropdown-list .no-result.md {
-  height: 48px;
-}
-:host .dropdown-list .no-result.sm {
-  height: 40px;
-}
-:host sdds-icon {
-  transition: transform 0.2s ease-in-out;
-}
-:host sdds-icon.open {
-  transform: rotateZ(180deg);
-}