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

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.js

@@ -1,8 +1,9 @@
 import { Host, h, forceUpdate } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { updateFloatingBoxPosition } from "../../utils/floating-engine-utils";
-import { getIconSize } from "../../utils/icon-attr.utils";
-import { getSelectedLabel, scrollToSelectedValue, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from "./vds-basic-dropdown.utils";
+import { getIconSize, getIconColor, getActionIconButtonSize } from "../../utils/icon-attr.utils";
+import { getSelectedLabel, scrollToSelectedValue, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth, } from "./vds-basic-dropdown.utils";
+import { emitInputEvent } from "../../utils/form";
 export class VdsBasicDropdown {
     constructor() {
         /** Sets the dropdown's size. */
@@ -19,7 +20,8 @@ export class VdsBasicDropdown {
         this.showClearButton = true;
         /** Sets the width value for the floating container of the items to match the dropdown width */
         this.matchWidth = false;
-        /** Toggles the floating container auto-positioning based on available window space.
+        /**
+         * Toggles the floating container auto-positioning based on available window space.
          * False by default as it may cause positioning issues in some situations, use with caution
          */
         this.autoPosition = false;
@@ -47,6 +49,7 @@ export class VdsBasicDropdown {
         }
     }
     setValueHandler() {
+        emitInputEvent(this.hostEl, this.value);
         unselectNonSelectedItems(this.dropdownContentElementRef, this.value);
         selectSelectedItems(this.dropdownContentElementRef, this.value);
         this.defineValue();
@@ -93,6 +96,8 @@ export class VdsBasicDropdown {
     handleDropdownItemClicked(event) {
         this.handleSelection(event);
         this.valueChanged.emit(this.value);
+        const inputEvent = new InputEvent("input");
+        this.hostEl.dispatchEvent(inputEvent);
         this.dynamicInformativeIcon ? (this.informativeIcon = event.detail.icon) : null;
         this.close();
     }
@@ -192,7 +197,7 @@ export class VdsBasicDropdown {
         }
     }
     componentDidRender() {
-        this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
+        this.options = Array.from(this.hostEl.querySelectorAll('vds-dropdown-item'));
         updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', false);
         updateContainerWidth(this.actionElementRef, this.matchWidth, this.dropdownContentElementRef);
     }
@@ -208,7 +213,7 @@ export class VdsBasicDropdown {
         (_a = this.actionElementRef) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleFloatingKeydown.bind(this));
         (_b = this.dropdownContentElementRef) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleFloatingKeydown.bind(this));
         if (!this.dropdownContentElementRef) {
-            this.dropdownContentElementRef = this.hostEl.shadowRoot.querySelector(".vds__dropdown--container");
+            this.dropdownContentElementRef = this.hostEl.shadowRoot.querySelector('.vds__dropdown--container');
         }
         if (this.value) {
             this.setPredefinedItem();
@@ -236,10 +241,10 @@ export class VdsBasicDropdown {
     setListenerForChildren() {
         const config = {
             childList: true,
-            subtree: true
+            subtree: true,
         };
         this.observer = new MutationObserver(() => {
-            this.options = Array.from(this.hostEl.querySelectorAll("vds-dropdown-item"));
+            this.options = Array.from(this.hostEl.querySelectorAll('vds-dropdown-item'));
             forceUpdate(this);
         });
         this.observer.observe(this.hostEl, config);
@@ -249,14 +254,14 @@ export class VdsBasicDropdown {
      * @returns string
      */
     getIconColor() {
-        return this.disabled ? 'color-icon-disabled' : 'color-icon-high';
+        return getIconColor(this.disabled, this.isReadonly);
     }
     setDropdownIcon() {
-        return (h("span", null, h("vds-icon", { svgIcon: this.dropdownOpened ? 'chevron-up' : 'chevron-down', color: this.disabled ? 'color-icon-disabled' : 'color-icon-high', size: getIconSize(this.size) })));
+        return h("vds-icon", { svgIcon: this.dropdownOpened ? 'chevron-up' : 'chevron-down', color: this.getIconColor(), size: getIconSize(this.size) });
     }
     setInformativeIcon() {
         if (this.informativeIcon) {
-            return (h("span", null, h("vds-icon", { class: "vds-dropdown__informative-icon", svgIcon: this.informativeIcon, color: this.getIconColor(), size: getIconSize(this.size) })));
+            return h("vds-icon", { class: 'vds-dropdown__informative-icon', svgIcon: this.informativeIcon, color: this.getIconColor(), size: getIconSize(this.size) });
         }
         else {
             return null;
@@ -267,26 +272,26 @@ export class VdsBasicDropdown {
     }
     setClearValueButtonIcon() {
         if (this.value && this.valueLabel && this.showClearButton) {
-            return (h("span", null, h("vds-icon-button", { icon: "close", variant: "secondary", size: this.size, onClick: !this.disabled && !this.isReadonly
+            return (h("vds-icon-button", { icon: "close", variant: "secondary", size: getActionIconButtonSize(this.size), onClick: !this.disabled && !this.isReadonly
                     ? event => {
                         this.clearValue(event);
                     }
-                    : null, disabled: this.disabled || this.isReadonly, setAriaLabel: "clear" })));
+                    : null, disabled: this.disabled || this.isReadonly, setAriaLabel: "clear" }));
         }
         else {
             return null;
         }
     }
     render() {
-        return (h(Host, { key: '8aec128863f8c4adc5fca7bbbed5dffacb6b8451', class: combineClasses(this.disabled ? "vds-basic-dropdown--disabled" : ""), onClicked: event => this.handleDropdownItemClicked(event.detail) }, h("div", { key: 'd06c359d8395fda9079fdf6e1f90c16ba2d95834', class: "vds-basic-dropdown__container" }, h("button", { key: 'fd909d282c7b86aa78f3e386853bd34b76c19707', tabIndex: 0, disabled: this.disabled, value: this.value, class: combineClasses('vds__dropdown--trigger', this.disabled ? 'vds__dropdown--trigger-disabled' : '', this.error ? 'vds__dropdown--trigger-error' : '', `vds__dropdown--trigger--size-${this.size}`), onClick: (evt) => {
+        return (h(Host, { key: '616eedd8c799a2409d88874ba0758448edd0285d', class: combineClasses(this.disabled ? 'vds-basic-dropdown--disabled' : ''), onClicked: event => this.handleDropdownItemClicked(event.detail) }, h("div", { key: '2aabe96aaa92a9255e282883b280b09a8749baed', class: 'vds-basic-dropdown__container' }, h("button", { key: 'f3d0fcf355f30dd0c29bffb677937481c89515ae', tabIndex: 0, disabled: this.disabled, value: this.value, class: combineClasses('vds__dropdown--trigger', this.disabled ? 'vds__dropdown--trigger-disabled' : '', this.isReadonly ? 'vds__dropdown--trigger--readonly' : '', this.error ? 'vds__dropdown--trigger-error' : '', `vds__dropdown--trigger--size-${this.size}`), onClick: (evt) => {
                 this.handleClick(evt);
             }, ref: triggerEl => {
                 if (triggerEl)
                     this.actionElementRef = triggerEl;
-            } }, h("span", { key: '2848f9bc0db70b8e87c0fef709fd01b7424eb461', class: "vds__dropdown--left-content" }, this.setInformativeIcon(), this.setLabelValue()), h("span", { key: '643260effea4a2079f1fdb6bf7fee2af8f620af3', class: "vds__dropdown--right-actions" }, this.setClearValueButtonIcon(), this.setDropdownIcon())), this.backdrop && this.dropdownOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '1fa1365e65f584ac54968825d480d73998e6c863', class: combineClasses('vds__dropdown--container', this.maxHeight ? 'has-scroll' : '', this.options.length === 0 ? "no-shadow" : ""), ref: dropdownEl => {
+            } }, h("span", { key: '539454912726ea7446220d9fa87c6e9bc5484acc', class: "vds__dropdown--left-content" }, this.setInformativeIcon(), this.setLabelValue()), h("span", { key: '5e0b393ef2558a1a7ef3a7769989dae2128654f8', class: "vds__dropdown--right-actions" }, this.setClearValueButtonIcon(), this.setDropdownIcon())), this.backdrop && this.dropdownOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '0749713281a272b18799f399f5fbc5511e3c9407', class: combineClasses('vds__dropdown--container', this.maxHeight ? 'has-scroll' : '', this.options.length === 0 ? 'no-shadow' : ''), ref: dropdownEl => {
                 if (dropdownEl)
                     this.dropdownContentElementRef = dropdownEl;
-            } }, h("div", { key: '435d3f12c6ee95cc22a31dc4523f0f1b399b4b11', class: combineClasses('vds-dropdown__content', this.maxHeight ? 'scrollable' : ''), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: '62a1f25cffa23e577fba89a2b02dd91a7c82f6f9' }))))));
+            } }, h("div", { key: 'fcb82abe92dc75927d15e40bdcd323addcb58bf2', class: combineClasses('vds-dropdown__content', this.maxHeight ? 'scrollable' : ''), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: '6e0b66bbd2fda0dc66d43fd48b6a229440310b66' }))))));
     }
     static get is() { return "vds-basic-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -305,7 +310,6 @@ export class VdsBasicDropdown {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -321,11 +325,11 @@ export class VdsBasicDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -340,11 +344,11 @@ export class VdsBasicDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true,
+                "attribute": "value"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -359,11 +363,11 @@ export class VdsBasicDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "dynamicInformativeIcon": {
                 "type": "boolean",
-                "attribute": "dynamic-informative-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -379,11 +383,11 @@ export class VdsBasicDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "dynamic-informative-icon",
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -398,11 +402,11 @@ export class VdsBasicDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -418,11 +422,11 @@ export class VdsBasicDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "isReadonly": {
                 "type": "boolean",
-                "attribute": "is-readonly",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -438,11 +442,11 @@ export class VdsBasicDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-readonly",
                 "defaultValue": "false"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -457,11 +461,11 @@ export class VdsBasicDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "error"
             },
             "event": {
                 "type": "string",
-                "attribute": "event",
                 "mutable": true,
                 "complexType": {
                     "original": "'click' | 'hover'",
@@ -477,11 +481,11 @@ export class VdsBasicDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "event",
                 "defaultValue": "'click'"
             },
             "showClearButton": {
                 "type": "boolean",
-                "attribute": "show-clear-button",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -497,11 +501,11 @@ export class VdsBasicDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-clear-button",
                 "defaultValue": "true"
             },
             "maxHeight": {
                 "type": "string",
-                "attribute": "max-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -516,11 +520,11 @@ export class VdsBasicDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-height"
             },
             "matchWidth": {
                 "type": "boolean",
-                "attribute": "match-width",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -536,11 +540,11 @@ export class VdsBasicDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "match-width",
                 "defaultValue": "false"
             },
             "autoPosition": {
                 "type": "boolean",
-                "attribute": "auto-position",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -551,16 +555,16 @@ export class VdsBasicDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Toggles the floating container auto-positioning based on available window space. \nFalse by default as it may cause positioning issues in some situations, use with caution"
+                    "text": "Toggles the floating container auto-positioning based on available window space.\nFalse by default as it may cause positioning issues in some situations, use with caution"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "auto-position",
                 "defaultValue": "false"
             },
             "backdrop": {
                 "type": "boolean",
-                "attribute": "backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -576,6 +580,7 @@ export class VdsBasicDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "backdrop",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-basic-dropdown.js","sourceRoot":"","sources":["../../../src/components/basic-dropdown/vds-basic-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Method, Listen, Element, Event, EventEmitter, State, Watch, AttachInternals, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { DropdownItemClickedEvent } from '../dropdown-item/vds-dropdown-item-clicked-event';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { getSelectedLabel, scrollToSelectedValue, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from './vds-basic-dropdown.utils';\n\n@Component({\n  tag: 'vds-basic-dropdown',\n  styleUrl: 'vds-basic-dropdown.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class VdsBasicDropdown {\n  @Element() hostEl: HTMLElement;\n  /** Sets the dropdown's size. */\n  @Prop({ mutable: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /** Sets the dropdown's value. */\n  @Prop({ mutable: true }) value: string;\n  /** Allows user to define a information icon to the left of the dropdown. */\n  @Prop({ mutable: true }) informativeIcon: string;\n  /** Allows dropdown-item informativeIcon reflect dynamically as informativeIcon of the dropdown. */\n  @Prop({ mutable: true }) dynamicInformativeIcon: boolean = false;\n  /** Sets the dropdown's placeholder. */\n  @Prop({ mutable: true }) placeholder: string;\n  /** Sets the dropdown in disabled state. */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Sets the dropdown in readonly state. */\n  @Prop({ mutable: true }) isReadonly: boolean = false;\n  /** Sets the dropdown in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Sets the dropdown's trigger event. */\n  @Prop({ mutable: true }) event: 'click' | 'hover' = 'click';\n  /** Sets the dropdown's clear button visibility. */\n  @Prop({ mutable: true }) showClearButton: boolean = true;\n  /** Set the max height value for the floating container of the items */\n  @Prop({ mutable: true }) maxHeight: string;\n  /** Sets the width value for the floating container of the items to match the dropdown width */\n  @Prop({ mutable: true }) matchWidth: boolean = false;\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   */\n  @Prop({mutable: true}) autoPosition: boolean = false;\n  /** Toggles the overlay element, allowing interaction only with this element when active */\n  @Prop() backdrop: boolean = false;\n  \n  \n\n  /** Emits event when floating element gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when floating element gets closes */\n  @Event() closed: EventEmitter<void>;\n  /** Emits event when an item is selected, this event contains the value of the selected item */\n  @Event() valueChanged: EventEmitter<string>;\n  /** Emits an event when the clear button is clicked */\n  @Event() cleared: EventEmitter<boolean>;\n  \n  /** Dropdown's status. */\n  @State() dropdownOpened: boolean = false;\n  /** Dropdown's label of the current value. */\n  @State() private valueLabel: string = undefined;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private actionElementRef: HTMLButtonElement;\n  private dropdownContentElementRef: HTMLDivElement;\n  private defaultInformativeIcon: string;\n  private options: HTMLVdsDropdownItemElement[] = [];\n\n  private floatingCleanUp: () => void;\n  observer: any;\n\n  @Watch('dropdownOpened')\n  async emitValue(): Promise<void> {\n    if (this.dropdownOpened) {\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', this.autoPosition);\n      toggleContainerDisplay(this.dropdownContentElementRef, true);\n      if (this.value) {\n        scrollToSelectedValue(this.dropdownContentElementRef, this.value);\n      }\n      this.opened.emit();\n    } else {\n      toggleContainerDisplay(this.dropdownContentElementRef, false);\n      this.floatingCleanUp();\n      this.closed.emit();\n    }\n  }\n\n  @Watch('value')\n  setValueHandler(): void {\n    unselectNonSelectedItems(this.dropdownContentElementRef, this.value);\n    selectSelectedItems(this.dropdownContentElementRef, this.value);\n    this.defineValue();\n    this.setFormValue();\n    this.valueLabel = getSelectedLabel(this.dropdownContentElementRef, this.value);\n  }\n \n  private setFormValue(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  /* Close the floating element when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    evt.stopPropagation();\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.close();\n    }\n  }\n\n  /* Close the floating element with keydown on the trigger element  */\n  private handleFloatingKeydown(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      this.close();\n    }\n  }\n\n  /* Open the floating element with click on the trigger element  */\n  private handleClick(evt: Event): void {\n    evt.stopImmediatePropagation();\n    if (this.event === 'click') {\n      const clickedElement = evt.target as HTMLElement;\n      if (clickedElement && !this.disabled && !this.isReadonly) {\n        this.dropdownOpened = !this.dropdownOpened;\n      }\n    }\n  }\n  /* Clear selected value from the Dropdown  */\n  private clearValue(evt: Event): void {\n    evt.stopImmediatePropagation();\n    this.clear();\n    this.close();\n  }\n  /* Listen when Dropdown Item element is clicked to close Dropdown Items window */\n  @Listen('dropdownItemClicked')\n  private handleDropdownItemClicked(event: CustomEvent<DropdownItemClickedEvent>): void {\n    this.handleSelection(event);\n    this.valueChanged.emit(this.value);\n    this.dynamicInformativeIcon ? (this.informativeIcon = event.detail.icon) : null;\n    this.close();\n  }\n\n  /* Checks if the item is already selected and if so clears the selection, otherwise sets the value */\n  private handleSelection(event: CustomEvent<DropdownItemClickedEvent>): void {\n    this.value = event.detail.value;\n    this.valueLabel = event.detail.label;\n  }\n\n  /* Open the floating element(menu) of the Dropdown. */\n  @Method()\n  public async open(): Promise<void> {\n    this.dropdownOpened = true;\n  }\n\n  /* Close the floating element(menu) of the Dropdown. */\n  @Method()\n  public async close(): Promise<void> {\n    this.dropdownOpened = false;\n  }\n  /* Clear the selected value from the Dropdown. */\n  @Method()\n  public async clear(): Promise<void> {\n    this.value = null;\n    this.valueLabel = null;\n    this.valueChanged.emit(this.value);\n    this.dynamicInformativeIcon ? (this.informativeIcon = this.defaultInformativeIcon) : null;\n    unselectAllItems(this.dropdownContentElementRef);\n    this.cleared.emit(true);\n  }\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__dropdown--trigger') as HTMLElement;\n  }\n  /**\n   *  Gets the selected value of the dropdown\n   *  returns a promise with the value.\n   */\n  @Method()\n  public async getValue(): Promise<String | null> {\n    return this.value;\n  }\n\n  /**\n   *  Set the value of the dropdown\n   */\n  @Method()\n  public async setValue(value: string): Promise<void> {\n    this.clear();\n    this.value = value;\n  }\n\n  private handleHover(event: Event): void {\n    const hoveredElement = event.target as HTMLElement;\n    if (this.event === 'hover' && hoveredElement) {\n      this.dropdownOpened = true;\n    }\n  }\n  private handleHoverOut(event: Event): void {\n    const hoveredElement = event.target as HTMLElement;\n    if (this.event === 'hover' && hoveredElement) {\n      this.close();\n    }\n  }\n\n  private setPredefinedItem() {\n    const slotElement = this.dropdownContentElementRef?.querySelector('slot');\n    const items = typeof slotElement?.assignedElements === 'function' && slotElement?.assignedElements();\n    let preselectedItem = Array.from(items || []).filter(item => item.tagName.toLowerCase() === 'vds-dropdown-item' && item.getAttribute('value') === this.value)[0];\n    if (preselectedItem) {\n      preselectedItem.setAttribute('is-selected', 'true');\n      preselectedItem.setAttribute('is-active', 'true');\n      this.valueLabel = preselectedItem.getAttribute('label');\n    }\n  }\n\n  private findAndSetPredefinedItem() {\n    let getPreselectedItem = undefined;\n    const slotElement = this.dropdownContentElementRef?.querySelector('slot');\n    if (slotElement && typeof slotElement.assignedElements === 'function' && slotElement.assignedElements().length > 0) {\n      getPreselectedItem = Array.from(slotElement.assignedElements()).find(\n        item =>\n          item.tagName.toLowerCase() === 'vds-dropdown-item' &&\n          item.hasAttribute('is-selected') &&\n          item.getAttribute('is-selected') === 'true' &&\n          item.hasAttribute('is-active') &&\n          item.getAttribute('is-active') === 'true',\n      );\n    }\n    if (getPreselectedItem !== undefined) {\n      this.value = getPreselectedItem.getAttribute('value');\n      this.valueLabel = getPreselectedItem.getAttribute('label');\n    }\n  }\n\n  private defineValue() {\n    if (this.value && !this.valueLabel) {\n      this.setPredefinedItem();\n    }\n    if (this.value) {\n      this.findAndSetPredefinedItem();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.dynamicInformativeIcon && this.defaultInformativeIcon === undefined) {\n      this.defaultInformativeIcon = this.informativeIcon;\n    }\n  }\n\n  componentDidRender() {\n    this.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n    updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', false);\n    updateContainerWidth(this.actionElementRef, this.matchWidth, this.dropdownContentElementRef);\n  }\n\n  componentDidLoad() {\n    if (this.event === 'click') {\n      this.actionElementRef.addEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n      this.dropdownContentElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n    this.actionElementRef?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.dropdownContentElementRef?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    if (!this.dropdownContentElementRef) {\n      this.dropdownContentElementRef = this.hostEl.shadowRoot.querySelector(\".vds__dropdown--container\");\n    }\n    if (this.value) {\n      this.setPredefinedItem();\n    } else\n    {\n      this.findAndSetPredefinedItem();\n    }\n    this.setFormValue();\n    this.setListenerForChildren();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n      this.dropdownContentElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n      this.actionElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n      this.dropdownContentElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    }\n\n    this.observer?.disconnect();\n  }\n\n  private setListenerForChildren(): void {\n\t\tconst config = {\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t};\n\n\t\tthis.observer = new MutationObserver(() => {\n\t\t\tthis.options = Array.from(this.hostEl.querySelectorAll(\"vds-dropdown-item\"));\n\t\t\tforceUpdate(this);\n\t\t});\n\n\t\tthis.observer.observe(this.hostEl, config);\n\t}\n\n  /** Gets the icon color.\n   *\n   * @returns string\n   */\n  private getIconColor() {\n    return this.disabled ? 'color-icon-disabled' : 'color-icon-high';\n  }\n\n  private setDropdownIcon() {\n    return (\n      <span>\n        <vds-icon\n          svgIcon={this.dropdownOpened ? 'chevron-up' : 'chevron-down'}\n          color={this.disabled ? 'color-icon-disabled' : 'color-icon-high'}\n          size={getIconSize(this.size)}\n        ></vds-icon>\n      </span>\n    );\n  }\n  private setInformativeIcon() {\n    if (this.informativeIcon) {\n      return (\n        <span>\n          <vds-icon class={\"vds-dropdown__informative-icon\"} svgIcon={this.informativeIcon} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>\n        </span>\n      );\n    } else {\n      return null;\n    }\n  }\n\n  private setLabelValue() {\n    return (\n      <span\n        class={combineClasses('vds__dropdown--value', 'vds__dropdown--value-' + this.size, 'vds__dropdown--value-' + (this.value && this.valueLabel ? 'label' : 'placeholder'))}\n      >\n        {this.value && this.valueLabel ? this.valueLabel : this.placeholder}\n      </span>\n    );\n  }\n\n  private setClearValueButtonIcon() {\n    if (this.value && this.valueLabel && this.showClearButton) {\n      return (\n        <span>\n          <vds-icon-button\n            icon=\"close\"\n            variant=\"secondary\"\n            size={this.size}\n            onClick={\n              !this.disabled && !this.isReadonly\n                ? event => {\n                    this.clearValue(event);\n                  }\n                : null\n            }\n            disabled={this.disabled || this.isReadonly}\n            setAriaLabel=\"clear\"\n          ></vds-icon-button>\n        </span>\n      );\n    } else {\n      return null;\n    }\n  }\n  render() {\n    return (\n      <Host class={combineClasses(this.disabled ? \"vds-basic-dropdown--disabled\" : \"\")} onClicked={event => this.handleDropdownItemClicked(event.detail)}>\n        <div class={\"vds-basic-dropdown__container\"}>\n          <button\n            tabIndex={0}\n            disabled={this.disabled}\n            value={this.value}\n            class={combineClasses('vds__dropdown--trigger', this.disabled ? 'vds__dropdown--trigger-disabled' : '', this.error ? 'vds__dropdown--trigger-error' : '', `vds__dropdown--trigger--size-${this.size}`,)}\n            onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);\n            }}\n            ref={triggerEl => {\n              if (triggerEl) this.actionElementRef = triggerEl;\n            }}\n          >\n            <span class=\"vds__dropdown--left-content\">\n              {this.setInformativeIcon()}\n              {this.setLabelValue()}\n            </span>\n            <span class=\"vds__dropdown--right-actions\">\n              {this.setClearValueButtonIcon()}\n              {this.setDropdownIcon()}\n            </span>\n          </button>\n          {this.backdrop && this.dropdownOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n          <div\n            class={combineClasses(\n              'vds__dropdown--container',\n              this.maxHeight ? 'has-scroll' : '',\n              this.options.length === 0 ? \"no-shadow\" : \"\"\n            )}\n            ref={dropdownEl => {\n              if (dropdownEl) this.dropdownContentElementRef = dropdownEl;\n            }}\n          >\n            <div class={combineClasses('vds-dropdown__content', this.maxHeight ? 'scrollable' : '')} style={setDropdownStyles(this.maxHeight)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-basic-dropdown.js","sourceRoot":"","sources":["../../../src/components/basic-dropdown/vds-basic-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Method, Listen, Element, Event, EventEmitter, State, Watch, AttachInternals, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { DropdownItemClickedEvent } from '../dropdown-item/vds-dropdown-item-clicked-event';\nimport { getIconSize, getIconColor, getActionIconButtonSize } from '../../utils/icon-attr.utils';\nimport {\n  getSelectedLabel,\n  scrollToSelectedValue,\n  selectSelectedItems,\n  setDropdownStyles,\n  toggleContainerDisplay,\n  unselectAllItems,\n  unselectNonSelectedItems,\n  updateContainerWidth,\n} from './vds-basic-dropdown.utils';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n  tag: 'vds-basic-dropdown',\n  styleUrl: 'vds-basic-dropdown.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class VdsBasicDropdown {\n  @Element() hostEl: HTMLElement;\n  /** Sets the dropdown's size. */\n  @Prop({ mutable: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /** Sets the dropdown's value. */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Allows user to define a information icon to the left of the dropdown. */\n  @Prop({ mutable: true }) informativeIcon: string;\n  /** Allows dropdown-item informativeIcon reflect dynamically as informativeIcon of the dropdown. */\n  @Prop({ mutable: true }) dynamicInformativeIcon: boolean = false;\n  /** Sets the dropdown's placeholder. */\n  @Prop({ mutable: true }) placeholder: string;\n  /** Sets the dropdown in disabled state. */\n  @Prop({ mutable: true }) disabled: boolean = false;\n  /** Sets the dropdown in readonly state. */\n  @Prop({ mutable: true }) isReadonly: boolean = false;\n  /** Sets the dropdown in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Sets the dropdown's trigger event. */\n  @Prop({ mutable: true }) event: 'click' | 'hover' = 'click';\n  /** Sets the dropdown's clear button visibility. */\n  @Prop({ mutable: true }) showClearButton: boolean = true;\n  /** Set the max height value for the floating container of the items */\n  @Prop({ mutable: true }) maxHeight: string;\n  /** Sets the width value for the floating container of the items to match the dropdown width */\n  @Prop({ mutable: true }) matchWidth: boolean = false;\n  /**\n   * Toggles the floating container auto-positioning based on available window space.\n   * False by default as it may cause positioning issues in some situations, use with caution\n   */\n  @Prop({ mutable: true }) autoPosition: boolean = false;\n  /** Toggles the overlay element, allowing interaction only with this element when active */\n  @Prop() backdrop: boolean = false;\n\n  /** Emits event when floating element gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when floating element gets closes */\n  @Event() closed: EventEmitter<void>;\n  /** Emits event when an item is selected, this event contains the value of the selected item */\n  @Event() valueChanged: EventEmitter<string>;\n  /** Emits an event when the clear button is clicked */\n  @Event() cleared: EventEmitter<boolean>;\n\n  /** Dropdown's status. */\n  @State() dropdownOpened: boolean = false;\n  /** Dropdown's label of the current value. */\n  @State() private valueLabel: string = undefined;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private actionElementRef: HTMLButtonElement;\n  private dropdownContentElementRef: HTMLDivElement;\n  private defaultInformativeIcon: string;\n  private options: HTMLVdsDropdownItemElement[] = [];\n\n  private floatingCleanUp: () => void;\n  observer: any;\n\n  @Watch('dropdownOpened')\n  async emitValue(): Promise<void> {\n    if (this.dropdownOpened) {\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', this.autoPosition);\n      toggleContainerDisplay(this.dropdownContentElementRef, true);\n      if (this.value) {\n        scrollToSelectedValue(this.dropdownContentElementRef, this.value);\n      }\n      this.opened.emit();\n    } else {\n      toggleContainerDisplay(this.dropdownContentElementRef, false);\n      this.floatingCleanUp();\n      this.closed.emit();\n    }\n  }\n\n  @Watch('value')\n  setValueHandler(): void {\n    emitInputEvent(this.hostEl, this.value);\n    unselectNonSelectedItems(this.dropdownContentElementRef, this.value);\n    selectSelectedItems(this.dropdownContentElementRef, this.value);\n    this.defineValue();\n    this.setFormValue();\n    this.valueLabel = getSelectedLabel(this.dropdownContentElementRef, this.value);\n  }\n\n  private setFormValue(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  /* Close the floating element when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    evt.stopPropagation();\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.close();\n    }\n  }\n\n  /* Close the floating element with keydown on the trigger element  */\n  private handleFloatingKeydown(event: KeyboardEvent): void {\n    event.stopImmediatePropagation();\n    if (event.key === 'Escape' || event.key === 'Esc') {\n      this.close();\n    }\n  }\n\n  /* Open the floating element with click on the trigger element  */\n  private handleClick(evt: Event): void {\n    evt.stopImmediatePropagation();\n    if (this.event === 'click') {\n      const clickedElement = evt.target as HTMLElement;\n      if (clickedElement && !this.disabled && !this.isReadonly) {\n        this.dropdownOpened = !this.dropdownOpened;\n      }\n    }\n  }\n\n  /* Clear selected value from the Dropdown  */\n  private clearValue(evt: Event): void {\n    evt.stopImmediatePropagation();\n    this.clear();\n    this.close();\n  }\n\n  /* Listen when Dropdown Item element is clicked to close Dropdown Items window */\n  @Listen('dropdownItemClicked')\n  private handleDropdownItemClicked(event: CustomEvent<DropdownItemClickedEvent>): void {\n    this.handleSelection(event);\n    this.valueChanged.emit(this.value);\n    const inputEvent = new InputEvent(\"input\");\n    this.hostEl.dispatchEvent(inputEvent);\n    this.dynamicInformativeIcon ? (this.informativeIcon = event.detail.icon) : null;\n    this.close();\n  }\n\n  /* Checks if the item is already selected and if so clears the selection, otherwise sets the value */\n  private handleSelection(event: CustomEvent<DropdownItemClickedEvent>): void {\n    this.value = event.detail.value;\n    this.valueLabel = event.detail.label;\n  }\n\n  /* Open the floating element(menu) of the Dropdown. */\n  @Method()\n  public async open(): Promise<void> {\n    this.dropdownOpened = true;\n  }\n\n  /* Close the floating element(menu) of the Dropdown. */\n  @Method()\n  public async close(): Promise<void> {\n    this.dropdownOpened = false;\n  }\n\n  /* Clear the selected value from the Dropdown. */\n  @Method()\n  public async clear(): Promise<void> {\n    this.value = null;\n    this.valueLabel = null;\n    this.valueChanged.emit(this.value);\n    this.dynamicInformativeIcon ? (this.informativeIcon = this.defaultInformativeIcon) : null;\n    unselectAllItems(this.dropdownContentElementRef);\n    this.cleared.emit(true);\n  }\n\n  /**\n   *  Gets the target that will manage the menu\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__dropdown--trigger') as HTMLElement;\n  }\n\n  /**\n   *  Gets the selected value of the dropdown\n   *  returns a promise with the value.\n   */\n  @Method()\n  public async getValue(): Promise<String | null> {\n    return this.value;\n  }\n\n  /**\n   *  Set the value of the dropdown\n   */\n  @Method()\n  public async setValue(value: string): Promise<void> {\n    this.clear();\n    this.value = value;\n  }\n\n  private handleHover(event: Event): void {\n    const hoveredElement = event.target as HTMLElement;\n    if (this.event === 'hover' && hoveredElement) {\n      this.dropdownOpened = true;\n    }\n  }\n  private handleHoverOut(event: Event): void {\n    const hoveredElement = event.target as HTMLElement;\n    if (this.event === 'hover' && hoveredElement) {\n      this.close();\n    }\n  }\n\n  private setPredefinedItem() {\n    const slotElement = this.dropdownContentElementRef?.querySelector('slot');\n    const items = typeof slotElement?.assignedElements === 'function' && slotElement?.assignedElements();\n    let preselectedItem = Array.from(items || []).filter(item => item.tagName.toLowerCase() === 'vds-dropdown-item' && item.getAttribute('value') === this.value)[0];\n    if (preselectedItem) {\n      preselectedItem.setAttribute('is-selected', 'true');\n      preselectedItem.setAttribute('is-active', 'true');\n      this.valueLabel = preselectedItem.getAttribute('label');\n    }\n  }\n\n  private findAndSetPredefinedItem() {\n    let getPreselectedItem = undefined;\n    const slotElement = this.dropdownContentElementRef?.querySelector('slot');\n    if (slotElement && typeof slotElement.assignedElements === 'function' && slotElement.assignedElements().length > 0) {\n      getPreselectedItem = Array.from(slotElement.assignedElements()).find(\n        item =>\n          item.tagName.toLowerCase() === 'vds-dropdown-item' &&\n          item.hasAttribute('is-selected') &&\n          item.getAttribute('is-selected') === 'true' &&\n          item.hasAttribute('is-active') &&\n          item.getAttribute('is-active') === 'true',\n      );\n    }\n    if (getPreselectedItem !== undefined) {\n      this.value = getPreselectedItem.getAttribute('value');\n      this.valueLabel = getPreselectedItem.getAttribute('label');\n    }\n  }\n\n  private defineValue() {\n    if (this.value && !this.valueLabel) {\n      this.setPredefinedItem();\n    }\n    if (this.value) {\n      this.findAndSetPredefinedItem();\n    }\n  }\n\n  componentWillLoad() {\n    if (this.dynamicInformativeIcon && this.defaultInformativeIcon === undefined) {\n      this.defaultInformativeIcon = this.informativeIcon;\n    }\n  }\n\n  componentDidRender() {\n    this.options = Array.from(this.hostEl.querySelectorAll('vds-dropdown-item'));\n    updateFloatingBoxPosition(this.actionElementRef, this.dropdownContentElementRef, null, 'bottom', false);\n    updateContainerWidth(this.actionElementRef, this.matchWidth, this.dropdownContentElementRef);\n  }\n\n  componentDidLoad() {\n    if (this.event === 'click') {\n      this.actionElementRef.addEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n      this.dropdownContentElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n    this.actionElementRef?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    this.dropdownContentElementRef?.addEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    if (!this.dropdownContentElementRef) {\n      this.dropdownContentElementRef = this.hostEl.shadowRoot.querySelector('.vds__dropdown--container');\n    }\n    if (this.value) {\n      this.setPredefinedItem();\n    } else {\n      this.findAndSetPredefinedItem();\n    }\n    this.setFormValue();\n    this.setListenerForChildren();\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n      this.dropdownContentElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n      this.actionElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n      this.dropdownContentElementRef.removeEventListener('keydown', this.handleFloatingKeydown.bind(this));\n    }\n\n    this.observer?.disconnect();\n  }\n\n  private setListenerForChildren(): void {\n    const config = {\n      childList: true,\n      subtree: true,\n    };\n\n    this.observer = new MutationObserver(() => {\n      this.options = Array.from(this.hostEl.querySelectorAll('vds-dropdown-item'));\n      forceUpdate(this);\n    });\n\n    this.observer.observe(this.hostEl, config);\n  }\n\n  /** Gets the icon color.\n   *\n   * @returns string\n   */\n  private getIconColor() {\n    return getIconColor(this.disabled, this.isReadonly);\n  }\n\n  private setDropdownIcon() {\n    return <vds-icon svgIcon={this.dropdownOpened ? 'chevron-up' : 'chevron-down'} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>;\n  }\n\n  private setInformativeIcon() {\n    if (this.informativeIcon) {\n      return <vds-icon class={'vds-dropdown__informative-icon'} svgIcon={this.informativeIcon} color={this.getIconColor()} size={getIconSize(this.size)}></vds-icon>;\n    } else {\n      return null;\n    }\n  }\n\n  private setLabelValue() {\n    return (\n      <span\n        class={combineClasses('vds__dropdown--value', 'vds__dropdown--value-' + this.size, 'vds__dropdown--value-' + (this.value && this.valueLabel ? 'label' : 'placeholder'))}\n      >\n        {this.value && this.valueLabel ? this.valueLabel : this.placeholder}\n      </span>\n    );\n  }\n\n  private setClearValueButtonIcon() {\n    if (this.value && this.valueLabel && this.showClearButton) {\n      return (\n        <vds-icon-button\n          icon=\"close\"\n          variant=\"secondary\"\n          size={getActionIconButtonSize(this.size)}\n          onClick={\n            !this.disabled && !this.isReadonly\n              ? event => {\n                  this.clearValue(event);\n                }\n              : null\n          }\n          disabled={this.disabled || this.isReadonly}\n          setAriaLabel=\"clear\"\n        ></vds-icon-button>\n      );\n    } else {\n      return null;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={combineClasses(this.disabled ? 'vds-basic-dropdown--disabled' : '')} onClicked={event => this.handleDropdownItemClicked(event.detail)}>\n        <div class={'vds-basic-dropdown__container'}>\n          <button\n            tabIndex={0}\n            disabled={this.disabled}\n            value={this.value}\n            class={combineClasses(\n              'vds__dropdown--trigger',\n              this.disabled ? 'vds__dropdown--trigger-disabled' : '',\n              this.isReadonly ? 'vds__dropdown--trigger--readonly' : '',\n              this.error ? 'vds__dropdown--trigger-error' : '',\n              `vds__dropdown--trigger--size-${this.size}`,\n            )}\n            onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);\n            }}\n            ref={triggerEl => {\n              if (triggerEl) this.actionElementRef = triggerEl;\n            }}\n          >\n            <span class=\"vds__dropdown--left-content\">\n              {this.setInformativeIcon()}\n              {this.setLabelValue()}\n            </span>\n            <span class=\"vds__dropdown--right-actions\">\n              {this.setClearValueButtonIcon()}\n              {this.setDropdownIcon()}\n            </span>\n          </button>\n          {this.backdrop && this.dropdownOpened ? <div class=\"vds-floating-backdrop\" onClick={this.close.bind(this)}></div> : ''}\n          <div\n            class={combineClasses('vds__dropdown--container', this.maxHeight ? 'has-scroll' : '', this.options.length === 0 ? 'no-shadow' : '')}\n            ref={dropdownEl => {\n              if (dropdownEl) this.dropdownContentElementRef = dropdownEl;\n            }}\n          >\n            <div class={combineClasses('vds-dropdown__content', this.maxHeight ? 'scrollable' : '')} style={setDropdownStyles(this.maxHeight)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.stories.js

@@ -43,9 +43,9 @@ const codeTemplate = (args) => {
             size="${args.size}"
             value="${args.value}"
             placeholder="${args.placeholder}"
-            ${args.disabled ? `disabled="${args.disabled}"` : ""}
-            ${args.isReadonly ? `is-readonly="${args.isReadonly}` : ""}
-            ${args.error ? `error="${args.error}"` : ""}
+            ${args.disabled ? "disabled" : ""}
+            ${args.isReadonly ? "is-readonly" : ""}
+            ${args.error ? "error" : ""}
             is-required="${args.isRequired}"
             event="${args.event}"
             show-clear-button="${args.showClearButton}"
@@ -116,9 +116,9 @@ const codeTemplateWithIcons = (args) => {
             size="${args.size}"
             value="${args.value}"
             placeholder="${args.placeholder}"
-            disabled="${args.disabled}"
-            is-readonly="${args.isReadonly}"
-            error="${args.error}"
+            ${args.disabled ? "disabled" : ""}
+            ${args.isReadonly ? "is-readonly" : ""}
+            ${args.error ? "error" : ""}
             is-required="${args.isRequired}"
             informative-icon="${args.informativeIcon}"
             dynamic-informative-icon="${args.dynamicInformativeIcon}"
@@ -155,9 +155,9 @@ const codeTemplateWithPredefinedItem = (args) => {
             size="${args.size}"
             value="${args.value}"
             placeholder="${args.placeholder}"
-            disabled="${args.disabled}"
-            is-readonly="${args.isReadonly}"
-            error="${args.error}"
+            ${args.disabled ? "disabled" : ""}
+            ${args.isReadonly ? "is-readonly" : ""}
+            ${args.error ? "error" : ""}
             is-required="${args.isRequired}"
             event="${args.event}"
             match-width="${args.matchWidth}"
@@ -174,9 +174,9 @@ const codeTemplateWithPredefinedItem = (args) => {
             size="${args.size}"
             value="Item-2"
             placeholder="${args.placeholder}"
-            disabled="${args.disabled}"
-            is-readonly="${args.isReadonly}"
-            error="${args.error}"
+            ${args.disabled ? "disabled" : ""}
+            ${args.isReadonly ? "is-readonly" : ""}
+            ${args.error ? "error" : ""}
             is-required="${args.isRequired}"
             event="${args.event}"
             match-width="${args.matchWidth}"
@@ -211,9 +211,9 @@ const codeTemplateWithItemCheckmarkUsage = (args) => {
             size="${args.size}"
             value="${args.value}"
             placeholder="${args.placeholder}"
-            disabled="${args.disabled}"
-            is-readonly="${args.isReadonly}"
-            error="${args.error}"
+            ${args.disabled ? "disabled" : ""}
+            ${args.isReadonly ? "is-readonly" : ""}
+            ${args.error ? "error" : ""}
             is-required="${args.isRequired}"
             event="${args.event}"
             match-width="${args.matchWidth}"

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-basic-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/basic-dropdown/vds-basic-dropdown.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'VDS/Components/Dropdown/Basic-dropdown',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29047-159996\"\n        }\n      },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [\"add\", \"calendar\", \"train\", \"administration\"],\n            control: { type: \"select\" }\n        },\n        event: {\n            options: [\"click\", \"hover\"],\n            control: { type: \"select\" }\n        },\n                autoPosition: {\n            control: \"boolean\"\n        }\n    },\n};\nconst styles = `\n    .container {\n        position: relative;\n        padding:10px;\n        width: 500px;\n    }\n`;\n\nconst codeTemplate = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            class=\"animal-dropdown\"\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            ${args.disabled ? `disabled=\"${args.disabled}\"` : \"\"}\n            ${args.isReadonly ? `is-readonly=\"${args.isReadonly}` : \"\"}\n            ${args.error ? `error=\"${args.error}\"` : \"\"}\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            show-clear-button=\"${args.showClearButton}\"\n            max-height=\"${args.maxHeight}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n            backdrop=\"${args.backdrop}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">Carnivores</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"lion\" label=\"Lion\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"tiger\" label=\"Tiger\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"leopard\" label=\"Leopard\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"cheetah\" label=\"Cheetah\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"wolf\" label=\"Wolf\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Primates</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"chimpanzee\" label=\"Chimpanzee\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"gorilla\" label=\"Gorilla\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"orangutan\" label=\"Orangutan\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"monkey\" label=\"Monkey\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"human\" label=\"Human\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Rodents</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"rat\" label=\"Rat\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"mouse\" label=\"Mouse\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"squirrel\" label=\"Squirrel\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"hamster\" label=\"Hamster\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"guinea pig\" label=\"Guinea Pig\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Ungulates</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"elephant\" label=\"Elephant\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"giraffe\" label=\"Giraffe\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"zebra\" label=\"Zebra\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"horse\" label=\"Horse\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"rhino\" label=\"Rhino\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Cetaceans</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"whale\" label=\"Whale\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"dolphin\" label=\"Dolphin\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"porpoise\" label=\"Porpoise\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"orca\" label=\"Orca\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"manatee\" label=\"Manatee\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    showClearButton: true,\n    maxHeight: \"200px\",\n    matchWidth: true,\n    backdrop: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithIcons = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            informative-icon=\"${args.informativeIcon}\"\n            dynamic-informative-icon=\"${args.dynamicInformativeIcon}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item informative-icon=\"add\" value=\"Item 1\" label=\"Item 1\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item informative-icon=\"administration\" value=\"Item 2 with more content\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item informative-icon=\"user\" value=\"Item 3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithIconsUsage = codeTemplateWithIcons.bind({});\n\nBasicWithIconsUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    informativeIcon: \"add\",\n    dynamicInformativeIcon: false,\n    matchWidth: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithPredefinedItem = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"Item-1\" label=\"Item 1\" is-active=\"true\" is-selected=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"Item-2\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"Item-1\" label=\"Item 1\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithPredefinedItemUsage = codeTemplateWithPredefinedItem.bind({});\n\nBasicWithPredefinedItemUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    matchWidth: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithItemCheckmarkUsage = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            disabled=\"${args.disabled}\"\n            is-readonly=\"${args.isReadonly}\"\n            error=\"${args.error}\"\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-1\" label=\"Item 1\" is-selected=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithItemCheckmarkUsage = codeTemplateWithItemCheckmarkUsage.bind({});\n\nBasicWithItemCheckmarkUsage.args = {\n    size: \"medium\",\n    value: \"Item-1\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    matchWidth: true,\n    autoPosition: false\n}"]}
+{"version":3,"file":"vds-basic-dropdown.stories.js","sourceRoot":"","sources":["../../../src/components/basic-dropdown/vds-basic-dropdown.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'VDS/Components/Dropdown/Basic-dropdown',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29047-159996\"\n        }\n      },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [\"add\", \"calendar\", \"train\", \"administration\"],\n            control: { type: \"select\" }\n        },\n        event: {\n            options: [\"click\", \"hover\"],\n            control: { type: \"select\" }\n        },\n                autoPosition: {\n            control: \"boolean\"\n        }\n    },\n};\nconst styles = `\n    .container {\n        position: relative;\n        padding:10px;\n        width: 500px;\n    }\n`;\n\nconst codeTemplate = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            class=\"animal-dropdown\"\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            ${args.disabled ? \"disabled\" : \"\"}\n            ${args.isReadonly ? \"is-readonly\" : \"\"}\n            ${args.error ? \"error\" : \"\"}\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            show-clear-button=\"${args.showClearButton}\"\n            max-height=\"${args.maxHeight}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n            backdrop=\"${args.backdrop}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">Carnivores</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"lion\" label=\"Lion\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"tiger\" label=\"Tiger\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"leopard\" label=\"Leopard\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"cheetah\" label=\"Cheetah\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"wolf\" label=\"Wolf\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Primates</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"chimpanzee\" label=\"Chimpanzee\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"gorilla\" label=\"Gorilla\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"orangutan\" label=\"Orangutan\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"monkey\" label=\"Monkey\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"human\" label=\"Human\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Rodents</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"rat\" label=\"Rat\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"mouse\" label=\"Mouse\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"squirrel\" label=\"Squirrel\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"hamster\" label=\"Hamster\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"guinea pig\" label=\"Guinea Pig\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Ungulates</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"elephant\" label=\"Elephant\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"giraffe\" label=\"Giraffe\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"zebra\" label=\"Zebra\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"horse\" label=\"Horse\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"rhino\" label=\"Rhino\" size=\"${args.size}\"></vds-dropdown-item>\n\n            <vds-dropdown-group-header size=\"${args.size}\">Cetaceans</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"whale\" label=\"Whale\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"dolphin\" label=\"Dolphin\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"porpoise\" label=\"Porpoise\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"orca\" label=\"Orca\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"manatee\" label=\"Manatee\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    showClearButton: true,\n    maxHeight: \"200px\",\n    matchWidth: true,\n    backdrop: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithIcons = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            ${args.disabled ? \"disabled\" : \"\"}\n            ${args.isReadonly ? \"is-readonly\" : \"\"}\n            ${args.error ? \"error\" : \"\"}\n            is-required=\"${args.isRequired}\"\n            informative-icon=\"${args.informativeIcon}\"\n            dynamic-informative-icon=\"${args.dynamicInformativeIcon}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item informative-icon=\"add\" value=\"Item 1\" label=\"Item 1\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item informative-icon=\"administration\" value=\"Item 2 with more content\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item informative-icon=\"user\" value=\"Item 3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithIconsUsage = codeTemplateWithIcons.bind({});\n\nBasicWithIconsUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    informativeIcon: \"add\",\n    dynamicInformativeIcon: false,\n    matchWidth: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithPredefinedItem = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            ${args.disabled ? \"disabled\" : \"\"}\n            ${args.isReadonly ? \"is-readonly\" : \"\"}\n            ${args.error ? \"error\" : \"\"}\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"Item-1\" label=\"Item 1\" is-active=\"true\" is-selected=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"Item-2\"\n            placeholder=\"${args.placeholder}\"\n            ${args.disabled ? \"disabled\" : \"\"}\n            ${args.isReadonly ? \"is-readonly\" : \"\"}\n            ${args.error ? \"error\" : \"\"}\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item value=\"Item-1\" label=\"Item 1\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithPredefinedItemUsage = codeTemplateWithPredefinedItem.bind({});\n\nBasicWithPredefinedItemUsage.args = {\n    size: \"medium\",\n    value: \"\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    matchWidth: true,\n    autoPosition: false\n}\n\nconst codeTemplateWithItemCheckmarkUsage = (args) => {\n    return `\n    <style>${styles}</style>\n    <div class=\"container\">\n        <vds-basic-dropdown\n            size=\"${args.size}\"\n            value=\"${args.value}\"\n            placeholder=\"${args.placeholder}\"\n            ${args.disabled ? \"disabled\" : \"\"}\n            ${args.isReadonly ? \"is-readonly\" : \"\"}\n            ${args.error ? \"error\" : \"\"}\n            is-required=\"${args.isRequired}\"\n            event=\"${args.event}\"\n            match-width=\"${args.matchWidth}\"\n            auto-position=\"${args.autoPosition}\"\n        >\n            <vds-dropdown-group-header size=\"${args.size}\">My Group</vds-dropdown-group-header>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-1\" label=\"Item 1\" is-selected=\"true\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-2\" label=\"Item 2 with more content\" size=\"${args.size}\"></vds-dropdown-item>\n            <vds-dropdown-item has-checkmark=\"true\" value=\"Item-3\" label=\"Item 3\" size=\"${args.size}\"></vds-dropdown-item>\n        </vds-basic-dropdown>\n    </div>\n`;\n}\n\nexport const BasicWithItemCheckmarkUsage = codeTemplateWithItemCheckmarkUsage.bind({});\n\nBasicWithItemCheckmarkUsage.args = {\n    size: \"medium\",\n    value: \"Item-1\",\n    placeholder: \"Placeholder\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    isRequired: false,\n    event: \"click\",\n    matchWidth: true,\n    autoPosition: false\n}"]}