wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.js

@@ -0,0 +1,441 @@
+import { Host, h } from "@stencil/core";
+import { cloneAttributes } from "../../utils/clone-attributes";
+export class VdsSidenavItemInput {
+    constructor() {
+        /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+        this.expanded = true;
+        /** Allows user to define a search icon inside the input at its right (zoom by default) . */
+        this.actionIcon = "zoom";
+        this.inputIcon = this.actionIcon;
+    }
+    componentDidLoad() {
+        this.setFormValue();
+    }
+    setFormValue() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    /**
+       * Sets focus on the vds-input element.
+       *
+       * @returns Promise<void>
+       */
+    setFocus() {
+        return this.inputEl.setFocus();
+    }
+    /**
+       * Gets value prop from the vds-input element.
+       *
+       * @returns Promise<string>
+       */
+    getValue() {
+        return this.inputEl.getValue();
+    }
+    /**
+       * Clears value prop from the vds-input element.
+       *
+       * @returns Promise<void>
+       */
+    clear() {
+        this.value = "";
+        this.inputEl.clear();
+        this.inputIcon = this.actionIcon;
+        return Promise.resolve();
+    }
+    /**
+       * Handles change input event from vds-basic-input
+     * Emits changeInput event.
+     * Sets icon to close when value is not blank otherwise zoom.
+       *
+     * @params evt - VdsBasicInputCustomEvent
+       * @returns void
+       */
+    handleChangeInput(evt) {
+        evt.preventDefault();
+        this.value = evt.detail;
+        this.inputIcon = evt.detail.length > 0 ? "close" : this.actionIcon;
+        this.changeInput.emit(this.value);
+    }
+    /**
+       * Handles click event from vds-icon-button inside the input.
+     * Emits iconClick event.
+     * When inputIcon equals close, vds-basic-input gets clear.
+     * When inputIcon equals zoom, vds-basic-input gets focus.
+       *
+     * @params evt - MouseEvent
+       * @returns void
+       */
+    handleIconClick(evt) {
+        if (this.inputIcon === "close") {
+            this.clear();
+        }
+        if (this.inputIcon === this.actionIcon) {
+            this.setFocus();
+        }
+        this.iconClick.emit(evt);
+    }
+    /**
+       * Handles click event from vds-icon-button when expanded is false
+     * Emits collapseIconClick event.
+       *
+     * @params evt - MouseEvent
+       * @returns void
+       */
+    handleCollapseIconClick(evt) {
+        this.collapseIconClick.emit(evt);
+    }
+    /**
+       * Renders input when expanded is to set true.
+       *
+       * @returns HTMLStencilElement
+       */
+    renderInput() {
+        return h("vds-basic-input", Object.assign({ ref: (el) => {
+                if (el) {
+                    this.inputEl = el;
+                }
+            }, size: "medium", type: "text", value: this.value, placeholder: this.placeholder, disabled: this.disabled, isReadonly: this.isReadonly, formatter: this.formatter, class: "vds-sidenav-item-input", error: this.error, informativeIcon: this.informativeIcon, onChangeInput: (evt) => { this.handleChangeInput(evt); } }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style")), h("vds-icon-button", { slot: "primaryActionIcon", onClick: (evt) => { this.handleIconClick(evt); }, icon: this.inputIcon, variant: "secondary", disabled: this.disabled, size: "medium" }));
+    }
+    /**
+       * Renders sidenav-item icon when expanded is to set false.
+       *
+       * @returns HTMLStencilElement
+       */
+    renderIcon() {
+        return h("vds-sidenav-item", { onClick: (evt) => { this.handleCollapseIconClick(evt); }, icon: this.actionIcon, expanded: false });
+    }
+    render() {
+        return (h(Host, { key: 'fe50c45e2b1bcd1823d0b9f90f81e588a5e8f8e7', class: this.disabled ? 'vds__sidenav-item-input--disabled' : '' }, this.expanded ? this.renderInput() : this.renderIcon()));
+    }
+    static get is() { return "vds-sidenav-item-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-sidenav-item-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-sidenav-item-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "expanded": {
+                "type": "boolean",
+                "attribute": "expanded",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true expands the nav item to show both text and icon. When false, only shows the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the input's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "attribute": "placeholder",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the input's placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the input in disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "isReadonly": {
+                "type": "boolean",
+                "attribute": "is-readonly",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the input in readonly state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the input in error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "informativeIcon": {
+                "type": "string",
+                "attribute": "informative-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows user to define a information icon inside the input at its left ."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "actionIcon": {
+                "type": "string",
+                "attribute": "action-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows user to define a search icon inside the input at its right (zoom by default) ."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"zoom\""
+            },
+            "formatter": {
+                "type": "unknown",
+                "attribute": "formatter",
+                "mutable": true,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets character formatting for user input. Useful for adding a mask to the input."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeInput",
+                "name": "changeInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the user change the value"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "iconClick",
+                "name": "iconClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the user clicks on input's icon"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "collapseIconClick",
+                "name": "collapseIconClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits an event when the user clicks on icon when expanded is false"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the vds-input element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            },
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Gets value prop from the vds-input element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<string>"
+                        }]
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears value prop from the vds-input element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<void>"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "setFormValue"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=vds-sidenav-item-input.js.map

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sidenav-item-input.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-input/vds-sidenav-item-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { AttachInternals, HTMLStencilElement, State, Watch } from '@stencil/core/internal';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { VdsBasicInputCustomEvent } from '../../components';\n\n@Component({\n  tag: 'vds-sidenav-item-input',\n  styleUrl: 'vds-sidenav-item-input.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsSidenavItemInput {\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop() expanded: boolean = true;\n  /** Sets the input's value. */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Sets the input's placeholder. */\n  @Prop({ mutable: true, reflect: true }) placeholder: string;\n  /** Sets the input in disabled state. */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean;\n  /** Sets the input in readonly state. */\n  @Prop({ mutable: true, reflect: true }) isReadonly: boolean;\n  /** Sets the input in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Allows user to define a information icon inside the input at its left . */\n  @Prop() informativeIcon: string;\n  /** Allows user to define a search icon inside the input at its right (zoom by default) . */\n  @Prop() actionIcon: string = \"zoom\";\n  /** Sets character formatting for user input. Useful for adding a mask to the input. */\n  @Prop({ mutable: true }) formatter?: Function;\n\n  /** Emits an event when the user change the value */\n  @Event() changeInput: EventEmitter<string>;\n  /** Emits an event when the user clicks on input's icon */\n  @Event() iconClick: EventEmitter<MouseEvent>;\n  /** Emits an event when the user clicks on icon when expanded is false */\n  @Event() collapseIconClick: EventEmitter<MouseEvent>;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n  \n  @State() inputIcon: string = this.actionIcon;\n\n  private inputEl: HTMLVdsBasicInputElement;\n\n  componentDidLoad(): void {\n    this.setFormValue();\n  }\n\n  @Watch(\"value\")\n  setFormValue(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  /**\n\t * Sets focus on the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n    return this.inputEl.setFocus();\n\t}\n\n  /**\n\t * Gets value prop from the vds-input element.\n\t *\n\t * @returns Promise<string>\n\t */\n\t@Method()\n\tgetValue(): Promise<string> {\n    return this.inputEl.getValue();\n\t}\n\n  /**\n\t * Clears value prop from the vds-input element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tclear(): Promise<void> {\n    this.value = \"\";\n    this.inputEl.clear();\n    this.inputIcon = this.actionIcon;\n    return Promise.resolve();\n\t}\n\n  /**\n\t * Handles change input event from vds-basic-input\n   * Emits changeInput event.\n   * Sets icon to close when value is not blank otherwise zoom.\n\t *\n   * @params evt - VdsBasicInputCustomEvent\n\t * @returns void\n\t */\n  private handleChangeInput(evt: VdsBasicInputCustomEvent<string>): void {\n    evt.preventDefault();\n    \n    this.value = evt.detail;\n    this.inputIcon = evt.detail.length > 0 ? \"close\" : this.actionIcon;\n\n    this.changeInput.emit(this.value);\n  }\n\n  /**\n\t * Handles click event from vds-icon-button inside the input.\n   * Emits iconClick event.\n   * When inputIcon equals close, vds-basic-input gets clear.\n   * When inputIcon equals zoom, vds-basic-input gets focus.\n\t *\n   * @params evt - MouseEvent\n\t * @returns void\n\t */\n  private handleIconClick(evt: MouseEvent): void {\n    if (this.inputIcon === \"close\") {\n      this.clear();\n    }\n    if (this.inputIcon === this.actionIcon) {\n      this.setFocus();\n    }\n    this.iconClick.emit(evt);\n  }\n\n  /**\n\t * Handles click event from vds-icon-button when expanded is false\n   * Emits collapseIconClick event.\n\t *\n   * @params evt - MouseEvent\n\t * @returns void\n\t */\n  private handleCollapseIconClick(evt: MouseEvent): void {\n    this.collapseIconClick.emit(evt)\n  }\n\n  /**\n\t * Renders input when expanded is to set true.\n\t *\n\t * @returns HTMLStencilElement\n\t */\n  private renderInput(): HTMLStencilElement {\n    return <vds-basic-input\n      ref={(el): void => {\n        if (el) {\n          this.inputEl = el;\n        }\n      }}\n      size={\"medium\"}\n      type={\"text\"}\n      value={this.value}\n      placeholder={this.placeholder}\n      disabled={this.disabled}\n      isReadonly={this.isReadonly}\n      formatter={this.formatter}\n      class={\"vds-sidenav-item-input\"}\n      error={this.error}\n      informativeIcon={this.informativeIcon}\n      onChangeInput={(evt): void => { this.handleChangeInput(evt); }}\n      {...cloneAttributes(\n        this.hostEl,\n        \"class\",\n        \"value\",\n        \"disabled\",\n        \"placeholder\",\n        \"label\",\n        \"style\"\n      )}\n    >\n      <vds-icon-button\n        slot=\"primaryActionIcon\"\n        onClick={(evt): void => { this.handleIconClick(evt); }}\n        icon={this.inputIcon}\n        variant=\"secondary\"\n        disabled={this.disabled}\n        size=\"medium\">\n      </vds-icon-button>\n    </vds-basic-input>\n  }\n\n  /**\n\t * Renders sidenav-item icon when expanded is to set false.\n\t *\n\t * @returns HTMLStencilElement\n\t */\n  private renderIcon(): HTMLStencilElement {\n    return <vds-sidenav-item\n          onClick={(evt): void => { this.handleCollapseIconClick(evt); }}\n          icon={this.actionIcon}\n          expanded={false}\n        ></vds-sidenav-item>\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds__sidenav-item-input--disabled' : ''}>\n        {this.expanded ? this.renderInput() : this.renderIcon() }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.stories.js

@@ -0,0 +1,88 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+export default {
+    title: 'VDS/Components/Sidenav/Sidenav-Item-Input',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        informativeIcon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+        actionIcon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+vds-sidenav-item-input {
+    margin: 10px;
+}
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-sidenav-item-input 
+    expanded="${args.expanded}" 
+    value="${args.value}"
+    placeholder="${args.placeholder}"
+    disabled="${args.disabled}"
+    is-readonly="${args.isReadonly}"
+    error="${args.error}"
+    ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+    action-icon="${args.actionIcon}"
+>
+</vds-sidenav-item-input>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    expanded: true,
+    value: "",
+    placeholder: "Search",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    informativeIcon: undefined,
+    actionIcon: "zoom"
+};
+const codeCustomWidthTemplate = (args) => {
+    return `
+<style>
+    vds-sidenav-item-input {
+        padding: 5px;
+        --vds-sidenav-item-input-expanded-width: ${args.ExpandedWidth || '17.5rem'};
+        --vds-sidenav-item-input-collapsed-width: ${args.CollapsedWidth || '3.5rem'};
+    }
+</style>
+<vds-sidenav-item-input 
+    expanded="${args.expanded}" 
+    value="${args.value}"
+    placeholder="${args.placeholder}"
+    disabled="${args.disabled}"
+    is-readonly="${args.isReadonly}"
+    error="${args.error}"
+    ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+    action-icon="${args.actionIcon}"
+>
+</vds-sidenav-item-input>
+    `;
+};
+export const CustomWidthUsage = codeCustomWidthTemplate.bind({});
+CustomWidthUsage.args = {
+    expanded: true,
+    value: "",
+    placeholder: "Search",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    informativeIcon: undefined,
+    actionIcon: "zoom",
+    ExpandedWidth: '17.5rem',
+    CollapsedWidth: '3.5rem',
+};
+//# sourceMappingURL=vds-sidenav-item-input.stories.js.map

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sidenav-item-input.stories.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-input/vds-sidenav-item-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAE3C,eAAe;IACX,KAAK,EAAE,2CAA2C;IAClD,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,eAAe,EAAE;YACb,OAAO,EAAE,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,UAAU,EAAE;YACR,OAAO,EAAE,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;CAId,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;gBAEC,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,KAAK;mBACJ,IAAI,CAAC,WAAW;gBACnB,IAAI,CAAC,QAAQ;mBACV,IAAI,CAAC,UAAU;aACrB,IAAI,CAAC,KAAK;MACjB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,eAAe,GAAG,CAAA,CAAC,CAAC,EAAE;mBAC1D,IAAI,CAAC,UAAU;;;KAG7B,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,QAAQ;IACrB,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,KAAK;IACZ,eAAe,EAAE,SAAS;IAC1B,UAAU,EAAE,MAAM;CACrB,CAAC;AAGF,MAAM,uBAAuB,GAAG,CAAC,IAAI,EAAE,EAAE;IACrC,OAAO;;;;mDAIwC,IAAI,CAAC,aAAa,IAAI,SAAS;oDAC9B,IAAI,CAAC,cAAc,IAAI,QAAQ;;;;gBAInE,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,KAAK;mBACJ,IAAI,CAAC,WAAW;gBACnB,IAAI,CAAC,QAAQ;mBACV,IAAI,CAAC,UAAU;aACrB,IAAI,CAAC,KAAK;MACjB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,eAAe,GAAG,CAAA,CAAC,CAAC,EAAE;mBAC1D,IAAI,CAAC,UAAU;;;KAG7B,CAAC;AACN,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjE,gBAAgB,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,QAAQ;IACrB,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,KAAK;IACZ,eAAe,EAAE,SAAS;IAC1B,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,QAAQ;CAC3B,CAAC","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n    title: 'VDS/Components/Sidenav/Sidenav-Item-Input',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        informativeIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        actionIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\nvds-sidenav-item-input {\n    margin: 10px;\n}\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-sidenav-item-input \n    expanded=\"${args.expanded}\" \n    value=\"${args.value}\"\n    placeholder=\"${args.placeholder}\"\n    disabled=\"${args.disabled}\"\n    is-readonly=\"${args.isReadonly}\"\n    error=\"${args.error}\"\n    ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n    action-icon=\"${args.actionIcon}\"\n>\n</vds-sidenav-item-input>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    expanded: true,\n    value: \"\",\n    placeholder: \"Search\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    informativeIcon: undefined,\n    actionIcon: \"zoom\"\n};\n\n\nconst codeCustomWidthTemplate = (args) => {\n    return `\n<style>\n    vds-sidenav-item-input {\n        padding: 5px;\n        --vds-sidenav-item-input-expanded-width: ${args.ExpandedWidth || '17.5rem'};\n        --vds-sidenav-item-input-collapsed-width: ${args.CollapsedWidth || '3.5rem'};\n    }\n</style>\n<vds-sidenav-item-input \n    expanded=\"${args.expanded}\" \n    value=\"${args.value}\"\n    placeholder=\"${args.placeholder}\"\n    disabled=\"${args.disabled}\"\n    is-readonly=\"${args.isReadonly}\"\n    error=\"${args.error}\"\n    ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"`: \"\"}\n    action-icon=\"${args.actionIcon}\"\n>\n</vds-sidenav-item-input>\n    `;\n}\n\nexport const CustomWidthUsage = codeCustomWidthTemplate.bind({});\n\nCustomWidthUsage.args = {\n    expanded: true,\n    value: \"\",\n    placeholder: \"Search\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    informativeIcon: undefined,\n    actionIcon: \"zoom\",\n    ExpandedWidth: '17.5rem',\n    CollapsedWidth: '3.5rem',\n};\n\n"]}