wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,486 @@
+import { Host, h } from "@stencil/core";
+import { isValidIcon, toggleFocusClass, getIconColor, setInputStyles, setTouchedClass, setDirtyClass, maskInput } from "./vds-basic-input.utils";
+import { combineClasses } from "../../utils/combine-classes";
+import { cloneAttributes } from "../../utils/clone-attributes";
+import { shadowSubmitForm } from "../../utils/form";
+export class VdsBasicInput {
+    constructor() {
+        /** Sets the input size. */
+        this.size = "medium";
+        /** Sets input type in the DOM. Check HTML 5 Input type. */
+        this.type = "text";
+        /** Toggles the required sign in the field */
+        this.isRequired = false;
+        /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */
+        this.allowedStyles = [];
+    }
+    componentDidLoad() {
+        this.setFormValue();
+    }
+    setFormValue() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    /**
+     * Displays vds-icon when icon string is valid
+     *
+     * @returns HTMLStencilElement
+     */
+    getInputIcon(icon) {
+        if (!isValidIcon(icon))
+            return null;
+        const inputState = this.disabled ? "disabled" : this.isReadonly ? "readonly" : "normal";
+        const size = this.size === "medium" ? "1rem" : this.size === "small" ? "0.75rem" : "1.25rem";
+        return (h("vds-icon", { class: "vds-input__informative-icon", svgIcon: icon, size: size, color: getIconColor(inputState) }));
+    }
+    /**
+     * Toggle class vds__input__container--focus in focus/blur input's event
+     *
+     * @returns void
+     */
+    toggleFocusClass() {
+        this.inputContainerRef && toggleFocusClass(this.inputContainerRef);
+    }
+    /**
+     * Sets input inline styles for the allowedStyles
+     * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]
+     *
+     * @returns void
+     */
+    setInputStyles() {
+        return setInputStyles(this.allowedStyles);
+    }
+    /**
+     * Sets value from input's event target.
+     * Emits change, input and changeInput events.
+     * Sets input as dirty when input's event is triggered.
+     * Executes formatter prop function on every inputed value.
+     *
+     * @returns void
+     */
+    handleInput(evt) {
+        evt.stopPropagation();
+        const target = evt.target;
+        const inputEvent = new InputEvent("input");
+        setDirtyClass(this.hostEl);
+        if (this.formatter) {
+            const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);
+            evt.currentTarget.value = maskValue;
+            this.value = maskValue;
+        }
+        else {
+            this.value = target.value;
+        }
+        this.changeInput.emit(this.value);
+        this.hostEl.dispatchEvent(inputEvent);
+    }
+    /**
+       * Executes method when input's keyup event is triggered.
+       *
+       * @returns void
+       */
+    handleEnterKey(event) {
+        if (event.key === "Enter") {
+            shadowSubmitForm(this.hostEl);
+        }
+    }
+    /**
+       * Executes method when vds-input gets focus.
+       *
+       * @returns void
+       */
+    handleFocus() {
+        setTouchedClass(this.hostEl);
+    }
+    /**
+       * Sets focus on the vds-input element.
+       *
+       * @returns Promise<void>
+       */
+    setFocus() {
+        return new Promise((resolve) => {
+            this.inputEl.focus();
+            resolve();
+        });
+    }
+    /**
+       * Gets value prop from the vds-input element.
+       *
+       * @returns Promise<string>
+       */
+    getValue() {
+        return new Promise((resolve) => {
+            resolve(this.value);
+        });
+    }
+    /**
+       * Clears value prop from the vds-input element.
+       *
+       * @returns Promise<voiid>
+       */
+    clear() {
+        return new Promise((resolve) => {
+            this.value = "";
+            this.inputEl.value = "";
+            resolve();
+        });
+    }
+    render() {
+        if (this.type === "datetime") {
+            console.warn("The type datetime has been deprecated.Please use datetime-local.");
+        }
+        return (h(Host, { key: '66b0128418fe3b7673a69ccd9b875f39a985e2dc', class: this.disabled ? "vds-basic-input--disabled" : "" }, h("div", { key: '7dd35182a8003c189936e81012c80e047f0bae6a', ref: (el) => {
+                if (el)
+                    this.inputContainerRef = el;
+            }, class: combineClasses("vds__input__container", `vds__input--size-${this.size}`, this.error && "vds__input__container--error", this.isReadonly && "vds__input__container--readonly", this.disabled && "vds__input__container--disabled") }, this.getInputIcon(this.informativeIcon), h("input", Object.assign({ key: 'f7222b70a9d719015864ec256234350a397b384c', ref: (el) => {
+                if (el)
+                    this.inputEl = el;
+            }, class: "vds__input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.isRequired, readOnly: this.isReadonly, onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass(), style: this.setInputStyles() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style"))), h("slot", { key: '472ce9e22a9c8ee078b69ee2ed2856fb08d34ce6', name: "secondaryActionIcon" }), h("slot", { key: '1aa398222c7ab3661d74c619bedc684176513ec8', name: "primaryActionIcon" }))));
+    }
+    static get is() { return "vds-basic-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-basic-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-basic-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the input size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": true,
+                "complexType": {
+                    "original": "VdsInputType",
+                    "resolved": "\"date\" | \"datetime\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"submit\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
+                    "references": {
+                        "VdsInputType": {
+                            "location": "import",
+                            "path": "./vds-basic-input.utils",
+                            "id": "src/components/input/vds-basic-input.utils.ts::VdsInputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets input type in the DOM. Check HTML 5 Input type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "\"text\""
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the input 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 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
+            },
+            "isRequired": {
+                "type": "boolean",
+                "attribute": "is-required",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the required sign in the field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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
+            },
+            "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
+            },
+            "allowedStyles": {
+                "type": "unknown",
+                "attribute": "allowed-styles",
+                "mutable": true,
+                "complexType": {
+                    "original": "{ [key: string]: string }[]",
+                    "resolved": "{ [key: string]: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeInput",
+                "name": "changeInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits updated input value"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    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<voiid>"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "setFormValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleEnterKey",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focus",
+                "method": "handleFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=vds-basic-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-input.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,OAAO,EACP,KAAK,EAEL,MAAM,EACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,aAAa,EACb,SAAS,EACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAsB,MAAM,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,MAAM,OAAO,aAAa;IAN1B;QAOE,2BAA2B;QACF,SAAI,GAAiC,QAAQ,CAAC;QACvE,2DAA2D;QACnB,SAAI,GAAiB,MAAM,CAAC;QAWpE,6CAA6C;QACL,eAAU,GAAY,KAAK,CAAC;QAKpE,gGAAgG;QACvE,kBAAa,GAAgC,EAAE,CAAC;KAyL1E;IA7KC,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAGD,YAAY;QACV,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC;YACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,YAAY,CAAC,IAAY;QAC/B,IAAG,CAAC,WAAW,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;QAEnC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;QACxF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;QAC7F,OAAO,CAAC,gBAAU,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,GAAa,CAAC,CAAC;IACjI,CAAC;IAED;;;;OAIG;IACK,gBAAgB;QACtB,IAAI,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACrE,CAAC;IAED;;;;;OAKG;IACK,cAAc;QACpB,OAAO,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC7C,CAAC;IAEA;;;;;;;OAOG;IACK,WAAW,CAAC,GAAe;QACjC,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B,CAAC;QAC9C,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3B,IAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAClB,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;YAC5F,GAAG,CAAC,aAAkC,CAAC,KAAK,GAAG,SAAS,CAAC;YAC1D,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC5B,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACtC,CAAC;IAED;;;;SAIE;IAEH,cAAc,CAAC,KAAoB;QAClC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC3B,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC;IACF,CAAC;IAEA;;;;SAIE;IAEH,WAAW;QACR,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAEA;;;;SAIE;IAEH,QAAQ;QACL,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YACrB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACN,CAAC;IAEA;;;;SAIE;IAEH,QAAQ;QACL,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,CAAC,CAAC;IACN,CAAC;IAEA;;;;SAIE;IAEH,KAAK;QACF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACN,CAAC;IAEA,MAAM;QACJ,IAAG,IAAI,CAAC,IAAI,KAAK,UAAU,EAAC,CAAC;YAAC,OAAO,CAAC,IAAI,CAAC,kEAAkE,CAAC,CAAA;QAAA,CAAC;QAC/G,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;YAC3D,4DACE,GAAG,EAAE,CAAC,EAAE,EAAQ,EAAE,GAAG,IAAG,EAAE;oBAAE,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAA,CAAA,CAAC,EACxD,KAAK,EAAE,cAAc,CACnB,uBAAuB,EACvB,oBAAoB,IAAI,CAAC,IAAI,EAAE,EAC/B,IAAI,CAAC,KAAK,IAAI,8BAA8B,EAC5C,IAAI,CAAC,UAAU,IAAI,iCAAiC,EACpD,IAAI,CAAC,QAAQ,IAAI,iCAAiC,CACnD;gBAEA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;gBACxC,4EACE,GAAG,EAAE,CAAC,EAAE,EAAQ,EAAE,GAAG,IAAG,EAAE;wBAAE,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA,CAAA,CAAC,EAC9C,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,OAAO,EAAE,CAAC,GAAG,EAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,GAAS,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC5C,MAAM,EAAE,GAAS,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAC3C,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IACxB,eAAe,CACjB,IAAI,CAAC,MAAM,EACX,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,OAAO,CACR,EACD;gBACF,6DAAM,IAAI,EAAC,qBAAqB,GAAG;gBACnC,6DAAM,IAAI,EAAC,mBAAmB,GAAG,CAC7B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from '@stencil/core';\nimport { \n  VdsInputType,\n  isValidIcon,\n  toggleFocusClass,\n  getIconColor,\n  setInputStyles,\n  setTouchedClass,\n  setDirtyClass, \n  maskInput\n} from './vds-basic-input.utils';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { AttachInternals, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport { shadowSubmitForm } from '../../utils/form';\n\n@Component({\n  tag: 'vds-basic-input',\n  styleUrl: 'vds-basic-input.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicInput {\n  /** Sets the input size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets input type in the DOM. Check HTML 5 Input type. */\n  @Prop({ mutable: true, reflect: true }) type: VdsInputType = \"text\";\n  /** Sets the input value. */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  /** Sets the input 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  /** Toggles the required sign in the field */\n  @Prop({ mutable: true, reflect: true }) isRequired: boolean = false;\n  /** Allows user to define a information icon inside the input at its left . */\n  @Prop() informativeIcon: string;\n  /** Sets character formatting for user input. Useful for adding a mask to the input. */\n  @Prop({ mutable: true }) formatter?: Function;\n  /** Sets custom allowed styles to input (text-align, text-transform, unicode-bidi, direction) */\n  @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n\n  @Element() hostEl: HTMLInputElement;    \n  \n\t/**  Emits updated input value */\n\t@Event() changeInput: EventEmitter<string>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private inputContainerRef: HTMLDivElement;\n  private inputEl: HTMLInputElement;\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   * Displays vds-icon when icon string is valid\n   *\n   * @returns HTMLStencilElement\n   */\n  private getInputIcon(icon: string): HTMLStencilElement {\n    if(!isValidIcon(icon)) return null;\n\n    const inputState = this.disabled ? \"disabled\" : this.isReadonly ? \"readonly\" : \"normal\";\n    const size = this.size === \"medium\" ? \"1rem\" : this.size === \"small\" ? \"0.75rem\" : \"1.25rem\";\n    return (<vds-icon class=\"vds-input__informative-icon\" svgIcon={icon} size={size} color={getIconColor(inputState)}></vds-icon>);\n  }\n\n  /**\n   * Toggle class vds__input__container--focus in focus/blur input's event\n   *\n   * @returns void\n   */\n  private toggleFocusClass(): void {\n    this.inputContainerRef && toggleFocusClass(this.inputContainerRef);\n  }\n\n  /**\n   * Sets input inline styles for the allowedStyles \n   * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n   *\n   * @returns void\n   */\n  private setInputStyles(): { [key: string]: string } {\n    return setInputStyles(this.allowedStyles);\n\t}\n\n  /**\n   * Sets value from input's event target.\n   * Emits change, input and changeInput events.\n   * Sets input as dirty when input's event is triggered.\n   * Executes formatter prop function on every inputed value.\n   *\n   * @returns void\n   */\n  private handleInput(evt: InputEvent): void {\n    evt.stopPropagation();\n    const target = evt.target as HTMLInputElement;\n    const inputEvent = new InputEvent(\"input\");\n    setDirtyClass(this.hostEl);\n    if(this.formatter) {\n      const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n      (evt.currentTarget as HTMLInputElement).value = maskValue;\n      this.value = maskValue;\n    } else {\n      this.value = target.value;\n    }\n\n    this.changeInput.emit(this.value);\n\t\tthis.hostEl.dispatchEvent(inputEvent);\n  }\n\n  /**\n\t * Executes method when input's keyup event is triggered.\n\t *\n\t * @returns void\n\t */\n  @Listen(\"keyup\")\n\thandleEnterKey(event: KeyboardEvent): void {\n\t\tif (event.key === \"Enter\") {\n\t\t\tshadowSubmitForm(this.hostEl);\n\t\t}\n\t}\n\n  /**\n\t * Executes method when vds-input gets focus.\n\t *\n\t * @returns void\n\t */\n\t@Listen(\"focus\")\n\thandleFocus(): void {\n    setTouchedClass(this.hostEl);\n\t}\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 new Promise((resolve) => {\n      this.inputEl.focus();\n      resolve();\n    });\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 new Promise((resolve) => {\n      resolve(this.value);\n    });\n\t}\n\n  /**\n\t * Clears value prop from the vds-input element.\n\t *\n\t * @returns Promise<voiid>\n\t */\n\t@Method()\n\tclear(): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = \"\";\n      this.inputEl.value = \"\";\n      resolve();\n    });\n\t}\n\n  render(): HTMLStencilElement {\n    if(this.type === \"datetime\"){ console.warn(\"The type datetime has been deprecated.Please use datetime-local.\")}\n    return (\n      <Host class={this.disabled ? \"vds-basic-input--disabled\" : \"\"}>\n        <div\n          ref={(el): void => { if(el) this.inputContainerRef = el} }\n          class={combineClasses(\n            \"vds__input__container\",\n            `vds__input--size-${this.size}`,\n            this.error && \"vds__input__container--error\",\n            this.isReadonly && \"vds__input__container--readonly\",\n            this.disabled && \"vds__input__container--disabled\"\n          )}\n        >\n          {this.getInputIcon(this.informativeIcon)}\n          <input\n            ref={(el): void => { if(el) this.inputEl = el} }\n            class={\"vds__input\"}\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.isRequired}\n            readOnly={this.isReadonly}\n            onInput={(evt): void => this.handleInput(evt)}\n            onFocus={(): void => this.toggleFocusClass()}\n            onBlur={(): void => this.toggleFocusClass()}\n            style={this.setInputStyles()}\n            {...cloneAttributes(\n              this.hostEl,\n              \"class\",\n              \"value\",\n              \"disabled\",\n              \"placeholder\",\n              \"label\",\n              \"style\",\n            )}\n          />\n          <slot name=\"secondaryActionIcon\" />\n          <slot name=\"primaryActionIcon\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,91 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+export default {
+    title: 'VDS/Components/Input/Basic Input',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        size: {
+            options: ["small", "medium", "large"],
+            control: { type: "select" }
+        },
+        type: {
+            options: ["number", "text", "date", "tel", "datetime", "datetime-local", "email", "submit", "password", "month", "time", "url", "week"],
+            control: { type: "select" }
+        },
+        informativeIcon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+        primaryActionIcon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+        secondaryActionIcon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+    div {
+       margin: 20px;
+       width: 400px; 
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div>
+    <vds-basic-input
+        size="${args.size}"
+        type="${args.type}"
+        value="${args.value}"
+        placeholder="${args.placeholder}"
+        ${args.disabled ? `disabled="${args.disabled}"` : ""}
+        ${args.isReadonly ? `is-readonly="${args.isReadonly}` : ""}
+        ${args.error ? `error="${args.error}"` : ""}
+        informative-icon="${args.informativeIcon}"
+        is-required="${args.isRequired}"
+        min="${args.min}"
+        max="${args.max}"
+    >
+        ${args.secondaryActionIcon &&
+        `<vds-icon-button
+                slot="secondaryActionIcon"
+                icon="${args.secondaryActionIcon}"
+                variant="secondary"
+                size="${args.size === "medium" ? "small" : args.size === "large" ? "medium" : "extra-small"}">
+            </vds-icon-button>`}
+        ${args.primaryActionIcon &&
+        `<vds-icon-button
+                slot="primaryActionIcon"
+                icon="${args.primaryActionIcon}"
+                variant="secondary"
+                size="${args.size === "medium" ? "small" : args.size === "large" ? "medium" : "extra-small"}">
+            </vds-icon-button>`}
+    </vds-basic-input>
+    
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    size: "medium",
+    type: "text",
+    value: "",
+    placeholder: "",
+    disabled: false,
+    isReadonly: false,
+    error: false,
+    informativeIcon: undefined,
+    primaryActionIcon: undefined,
+    secondaryActionIcon: undefined,
+    isRequired: false,
+    min: "",
+    max: ""
+};
+//# sourceMappingURL=vds-basic-input.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-basic-input.stories.js","sourceRoot":"","sources":["../../../src/components/input/vds-basic-input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n    title: 'VDS/Components/Input/Basic Input',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n        type: {\n            options: [\"number\", \"text\", \"date\", \"tel\", \"datetime\",\"datetime-local\", \"email\", \"submit\", \"password\", \"month\", \"time\", \"url\", \"week\"],\n            control: { type: \"select\" }\n        },\n        informativeIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        primaryActionIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        secondaryActionIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n    div {\n       margin: 20px;\n       width: 400px; \n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<div>\n    <vds-basic-input\n        size=\"${args.size}\"\n        type=\"${args.type}\"\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        informative-icon=\"${args.informativeIcon}\"\n        is-required=\"${args.isRequired}\"\n        min=\"${args.min}\"\n        max=\"${args.max}\"\n    >\n        ${args.secondaryActionIcon && \n            `<vds-icon-button\n                slot=\"secondaryActionIcon\"\n                icon=\"${args.secondaryActionIcon}\"\n                variant=\"secondary\"\n                size=\"${args.size === \"medium\" ? \"small\" : args.size === \"large\" ? \"medium\" : \"extra-small\"}\">\n            </vds-icon-button>`}\n        ${args.primaryActionIcon && \n            `<vds-icon-button\n                slot=\"primaryActionIcon\"\n                icon=\"${args.primaryActionIcon}\"\n                variant=\"secondary\"\n                size=\"${args.size === \"medium\" ? \"small\" : args.size === \"large\" ? \"medium\" : \"extra-small\"}\">\n            </vds-icon-button>`}\n    </vds-basic-input>\n    \n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    size: \"medium\",\n    type: \"text\",\n    value: \"\",\n    placeholder: \"\",\n    disabled: false,\n    isReadonly: false,\n    error: false,\n    informativeIcon: undefined,\n    primaryActionIcon: undefined,\n    secondaryActionIcon: undefined,\n    isRequired: false,\n    min: \"\" ,\n    max: \"\"\n};"]}