npm - wabtec-internal-volt-basic-components - Versions diffs - 1.0.0 → 1.2.0 - Mend

wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (773) hide show

package/dist/collection/components/autocomplete/vds-basic-autocomplete.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { toggleContainerDisplay, updateContainerWidth } from "../basic-dropdown/
 import { updateFloatingBoxPosition } from "../../utils/floating-engine-utils";
 import { cloneAttributes } from "../../utils/clone-attributes";
 import { findOptionByExactValue, findOptionByValue, getFilteredOptions } from "./vds-basic-autocomplete.utils";
-import { getIconSize } from "../../utils/icon-attr.utils";
+import { getIconSize, getActionIconButtonSize, getIconColor } from "../../utils/icon-attr.utils";
 export class VdsBasicAutocomplete {
     constructor() {
         /**
@@ -162,7 +162,6 @@ export class VdsBasicAutocomplete {
             if (this.dropdown) {
                 this.selectedDropdownValue = value;
             }
-            this.value = value;
         }
     }
     /**
@@ -201,7 +200,7 @@ export class VdsBasicAutocomplete {
         if (isValidOption && this.multiple) {
             selectedOption.isSelected = evt.detail.selected;
         }
-        this.handleValueAssignment(evt);
+        this.handleValueAssignment(evt, selectedOption);
         if (isValidOption && this.dropdown) {
             this.setOptionsSingle(evt.detail.value);
         }
@@ -232,7 +231,7 @@ export class VdsBasicAutocomplete {
         this.multiselectValues = Array.from(this.multipleValues);
         this.basicInput.setFocus();
     }
-    handleValueAssignment(evt) {
+    handleValueAssignment(evt, selectedOption) {
         if (this.multiple) {
             this.handleMultiselection(evt.detail);
         }
@@ -240,6 +239,14 @@ export class VdsBasicAutocomplete {
             this.value = evt.detail.value;
             this.setSelectionValue(evt.detail.value);
             this.valueChanged.emit(this.value);
+            if (selectedOption) {
+                this.selectedValueChanged.emit({
+                    label: selectedOption.label,
+                    value: selectedOption.value,
+                    target: selectedOption
+                });
+            }
+            this.handleInputChange();
             this.close();
         }
     }
@@ -256,6 +263,10 @@ export class VdsBasicAutocomplete {
             this.showUnfilteredOptions = false;
         }
     }
+    handleInputChange() {
+        const inputEvent = new InputEvent("input");
+        this.hostEl.dispatchEvent(inputEvent);
+    }
     hasFocus() {
         this.open();
         if (this.hasValue() && this.dropdown) {
@@ -324,7 +335,7 @@ export class VdsBasicAutocomplete {
         }
     }
     setDropdownOption() {
-        var _a;
+        var _a, _b;
         try {
             const hasValidValue = (_a = this.options) === null || _a === void 0 ? void 0 : _a.some(opt => findOptionByExactValue(opt, this.selectedDropdownValue));
             if (hasValidValue &&
@@ -333,7 +344,8 @@ export class VdsBasicAutocomplete {
                 this.selectedDropdownValue !== "") {
                 this.setOptionsSingle(this.selectedDropdownValue);
                 if (this.validateDropdownValue) {
-                    this.value = this.selectedDropdownValue;
+                    const option = (_b = this.options) === null || _b === void 0 ? void 0 : _b.find(opt => findOptionByExactValue(opt, this.selectedDropdownValue));
+                    this.value = option ? (option.label || option.value) : this.value;
                     this.validateDropdownValue = false;
                 }
             }
@@ -390,15 +402,15 @@ export class VdsBasicAutocomplete {
     }
     renderClearIcon() {
         const disabled = this.disabled || this.isReadonly;
-        return (h("vds-icon-button", { tabIndex: disabled ? -1 : undefined, disabled: disabled, variant: "secondary", size: this.size === "medium" ? "small" : this.size === "small" ? "extra-small" : "medium", icon: "close", onClick: disabled ? undefined : () => { this.clear(); this.basicInput.setFocus(); } }));
+        return (h("vds-icon-button", { tabIndex: disabled ? -1 : undefined, disabled: disabled, variant: "secondary", size: getActionIconButtonSize(this.size), icon: "close", onClick: disabled ? undefined : () => { this.clear(); this.basicInput.setFocus(); } }));
     }
     renderActionIcon() {
         const disabled = this.disabled || this.isReadonly;
         if (this.dropdown && this.showDropdownIcon) {
-            return (h("vds-icon", { svgIcon: this.isOpened ? 'chevron-up' : 'chevron-down', color: disabled ? 'color-icon-disabled' : 'color-icon-high', size: getIconSize(this.size), onClick: disabled ? undefined : () => this.isOpened ? this.close() : this.open() }));
+            return (h("vds-icon", { svgIcon: this.isOpened ? 'chevron-up' : 'chevron-down', color: getIconColor(this.disabled, this.isReadonly), size: getIconSize(this.size), onClick: disabled ? undefined : () => this.isOpened ? this.close() : this.open() }));
         }
         if (this.actionIcon) {
-            return (h("vds-icon-button", { tabIndex: disabled ? -1 : undefined, disabled: disabled, variant: "secondary", size: this.size === "medium" ? "small" : this.size === "small" ? "extra-small" : "medium", icon: this.actionIcon, onClick: disabled ? undefined : () => this.emitActionIcon() }));
+            return (h("vds-icon-button", { tabIndex: disabled ? -1 : undefined, disabled: disabled, variant: "secondary", size: getActionIconButtonSize(this.size), icon: this.actionIcon, onClick: disabled ? undefined : () => this.emitActionIcon() }));
         }
     }
     renderOptions() {
@@ -412,14 +424,14 @@ export class VdsBasicAutocomplete {
     }
     render() {
         const filteredOptions = getFilteredOptions(this.options, this.value || "");
-        return (h(Host, { key: '9b035fb33aa14173337829378d0b4024d30e6358', class: this.disabled ? "vds-basic-autocomplete--disabled" : "", title: this.value }, h("div", { key: '3d19e70ce7783ab0b6dc46e1405e1223505db622', class: combineClasses("vds-basic-autocomplete__container") }, h("vds-basic-input", { key: 'd7235b7b4cf781dbe72d6076f080e3f2e0ef1e31', ref: (el) => {
+        return (h(Host, { key: '33314c7daf892e83429def416796fd44d0072061', class: this.disabled ? "vds-basic-autocomplete--disabled" : "", title: this.value }, h("div", { key: '313249e9a7bfe83f7cdb5c3a19e213efede9288a', class: combineClasses("vds-basic-autocomplete__container") }, h("vds-basic-input", { key: 'a9c7f870b30a5206263a3aabb60e440e1c10b799', ref: (el) => {
                 if (el) {
                     this.basicInput = el;
                 }
-            }, type: "text", placeholder: this.placeholder, value: this.value, size: this.size, disabled: this.disabled, isReadonly: this.isReadonly, error: this.error, isRequired: this.isRequired, formatter: this.formatter, informativeIcon: this.informativeIcon, allowedStyles: this.allowedStyles, onChangeInput: (evt) => this.handleChange(evt), onFocus: () => this.hasFocus(), onBlur: () => this.lostFocus() }, this.showClearButton && this.hasValue() && (h("div", { key: '637bd881af823a444595ff826b2aa6521452e020', class: "vds-basic-autocomplete__secondary-action", slot: "secondaryActionIcon" }, this.renderClearIcon())), ((this.dropdown && this.showDropdownIcon) || this.actionIcon) && (h("div", { key: '2042f0659fdaad6855f797b6b79596a90b77bec1', class: "vds-basic-autocomplete__primary-action", slot: "primaryActionIcon" }, this.renderActionIcon()))), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '4f0893d4476df5bc5723127528101dac34c0d697', ref: (el) => {
+            }, type: "text", placeholder: this.placeholder, value: this.value, size: this.size, disabled: this.disabled, isReadonly: this.isReadonly, error: this.error, isRequired: this.isRequired, formatter: this.formatter, informativeIcon: this.informativeIcon, allowedStyles: this.allowedStyles, onChangeInput: (evt) => this.handleChange(evt), onFocus: () => this.hasFocus(), onBlur: () => this.lostFocus() }, this.showClearButton && this.hasValue() && (h("div", { key: '2715d86808bda1bbac461e9383da206b6b285224', class: "vds-basic-autocomplete__secondary-action", slot: "secondaryActionIcon" }, this.renderClearIcon())), ((this.dropdown && this.showDropdownIcon) || this.actionIcon) && (h("div", { key: 'a4b2ed560302233dd049634ab825bc09ea447303', class: "vds-basic-autocomplete__primary-action", slot: "primaryActionIcon" }, this.renderActionIcon()))), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '8627f4c261001c9b3ce9415de579ab39a4a1eca0', ref: (el) => {
                 if (el)
                     this.autocompleteContent = el;
-            }, class: combineClasses("vds-basic-autocomplete__content", this.maxHeight ? "has-scroll" : "", (!this.emptyMessage || this.emptyMessage === "") && filteredOptions.length === 0 ? "no-shadow" : "", !this.showEmptyMessage && filteredOptions.length === 0 ? "no-shadow" : "", !this.value && this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: '33047b025c6d88f2ff8bf550f4a6090ebf198ec0', class: "vds-basic-autocomplete__content__header" }, h("slot", { key: '55ce34e7e2233e14a819a1c79288f3ffa5550ebe', name: "header" })), this.renderOptions()))));
+            }, class: combineClasses("vds-basic-autocomplete__content", this.maxHeight ? "has-scroll" : "", (!this.emptyMessage || this.emptyMessage === "") && filteredOptions.length === 0 ? "no-shadow" : "", !this.showEmptyMessage && filteredOptions.length === 0 ? "no-shadow" : "", !this.value && this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: 'e9c886f1c5c6f3ce1d9195dee4aadb22cfb9dc29', class: "vds-basic-autocomplete__content__header" }, h("slot", { key: 'bf20136cbad0011b8619353c01947552c6dacc3f', name: "header" })), this.renderOptions()))));
     }
     static get is() { return "vds-basic-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -437,7 +449,6 @@ export class VdsBasicAutocomplete {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -453,11 +464,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -472,11 +483,11 @@ export class VdsBasicAutocomplete {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "multipleValues": {
                 "type": "unknown",
-                "attribute": "multiple-values",
                 "mutable": true,
                 "complexType": {
                     "original": "Array<string>",
@@ -500,7 +511,6 @@ export class VdsBasicAutocomplete {
             },
             "selectedDropdownValue": {
                 "type": "string",
-                "attribute": "selected-dropdown-value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -516,11 +526,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "selected-dropdown-value",
                 "defaultValue": "\"\""
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -535,11 +545,11 @@ export class VdsBasicAutocomplete {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "placeholder"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -554,11 +564,11 @@ export class VdsBasicAutocomplete {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "disabled"
             },
             "isReadonly": {
                 "type": "boolean",
-                "attribute": "is-readonly",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -573,11 +583,11 @@ export class VdsBasicAutocomplete {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "is-readonly"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -592,11 +602,11 @@ export class VdsBasicAutocomplete {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "error"
             },
             "isRequired": {
                 "type": "boolean",
-                "attribute": "is-required",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -612,11 +622,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "is-required",
                 "defaultValue": "false"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -631,11 +641,11 @@ export class VdsBasicAutocomplete {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "formatter": {
                 "type": "unknown",
-                "attribute": "formatter",
                 "mutable": true,
                 "complexType": {
                     "original": "Function",
@@ -658,7 +668,6 @@ export class VdsBasicAutocomplete {
             },
             "allowedStyles": {
                 "type": "unknown",
-                "attribute": "allowed-styles",
                 "mutable": true,
                 "complexType": {
                     "original": "{ [key: string]: string }[]",
@@ -677,7 +686,6 @@ export class VdsBasicAutocomplete {
             },
             "maxHeight": {
                 "type": "string",
-                "attribute": "max-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -692,11 +700,11 @@ export class VdsBasicAutocomplete {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-height"
             },
             "matchWidth": {
                 "type": "boolean",
-                "attribute": "match-width",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -712,11 +720,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "match-width",
                 "defaultValue": "true"
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -731,11 +739,11 @@ export class VdsBasicAutocomplete {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "debounce"
             },
             "actionIcon": {
                 "type": "string",
-                "attribute": "action-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -751,11 +759,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "action-icon",
                 "defaultValue": "\"zoom\""
             },
             "showClearButton": {
                 "type": "boolean",
-                "attribute": "show-clear-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -771,11 +779,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-clear-button",
                 "defaultValue": "true"
             },
             "dropdown": {
                 "type": "boolean",
-                "attribute": "dropdown",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -791,11 +799,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "dropdown",
                 "defaultValue": "false"
             },
             "showDropdownIcon": {
                 "type": "boolean",
-                "attribute": "show-dropdown-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -811,11 +819,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-dropdown-icon",
                 "defaultValue": "true"
             },
             "showEmptyMessage": {
                 "type": "boolean",
-                "attribute": "show-empty-message",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -831,11 +839,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-empty-message",
                 "defaultValue": "false"
             },
             "emptyMessage": {
                 "type": "string",
-                "attribute": "empty-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -851,11 +859,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "empty-message",
                 "defaultValue": "\"No options\""
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -871,11 +879,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "multiple",
                 "defaultValue": "false"
             },
             "autoPosition": {
                 "type": "boolean",
-                "attribute": "auto-position",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -891,11 +899,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "auto-position",
                 "defaultValue": "false"
             },
             "clearSelection": {
                 "type": "boolean",
-                "attribute": "clear-selection",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -911,11 +919,11 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "clear-selection",
                 "defaultValue": "false"
             },
             "backdrop": {
                 "type": "boolean",
-                "attribute": "backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -931,6 +939,7 @@ export class VdsBasicAutocomplete {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "backdrop",
                 "defaultValue": "false"
             }
         };
@@ -980,7 +989,7 @@ export class VdsBasicAutocomplete {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits event when an item is selected, this event contains the value of the selected item(s)"
+                    "text": "Emits event when an item is selected, this event contains the label of the selected item(s)"
                 },
                 "complexType": {
                     "original": "string | string[]",
@@ -1032,6 +1041,27 @@ export class VdsBasicAutocomplete {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "selectedValueChanged",
+                "name": "selectedValueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when an item is selected, this event contains the value of the selected item(s)"
+                },
+                "complexType": {
+                    "original": "SelectedValueChangedEventDetail",
+                    "resolved": "SelectedValueChangedEventDetail",
+                    "references": {
+                        "SelectedValueChangedEventDetail": {
+                            "location": "import",
+                            "path": "./vds-basic-autocomplete.utils",
+                            "id": "src/components/autocomplete/vds-basic-autocomplete.utils.ts::SelectedValueChangedEventDetail"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {