adp-web-components 0.1.57 → 0.1.59

package/dist/collection/components/form-elements/form-date-picker-legacy.js

@@ -0,0 +1,498 @@
+/*!
+ * Built by ShiftSoftware
+ * Copyright (c)
+ */
+import { Host, h } from "@stencil/core";
+import cn from "../../global/lib/cn";
+import { getNestedValue } from "../../global/lib/get-nested-value";
+import { FormInputLabel } from "./components/form-input-label";
+import { FormErrorMessage } from "./components/form-error-message";
+export class FormDatePicker {
+    constructor() {
+        this.language = 'en';
+        this.firstDayOfWeek = 0; // 0=Sun, 1=Mon, 6=Sat
+        this.isOpen = false;
+        this.selectedValue = '';
+        this.openUpwards = false;
+        this.handleOutsideClick = (event) => {
+            if (!this.el.contains(event.target))
+                this.isOpen = false;
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Escape' && this.isOpen)
+                this.isOpen = false;
+        };
+        this.toggleDropdown = () => {
+            if (this.isOpen) {
+                this.isOpen = false;
+                return;
+            }
+            this.adjustDropdownPosition();
+        };
+        this.selectDate = (year, month, day) => {
+            this.selectedValue = this.toDateString(year, month, day);
+            this.isOpen = false;
+        };
+        this.prevMonth = () => {
+            if (!this.canGoPrev())
+                return;
+            if (this.viewMonth === 0) {
+                this.viewMonth = 11;
+                this.viewYear--;
+            }
+            else {
+                this.viewMonth--;
+            }
+        };
+        this.nextMonth = () => {
+            if (!this.canGoNext())
+                return;
+            if (this.viewMonth === 11) {
+                this.viewMonth = 0;
+                this.viewYear++;
+            }
+            else {
+                this.viewMonth++;
+            }
+        };
+    }
+    async componentWillLoad() {
+        this.form.subscribe(this.name, this);
+        if (this.staticValue)
+            this.defaultValue = this.staticValue;
+        if (this.defaultValue)
+            this.selectedValue = this.defaultValue;
+        const initDate = this.selectedValue ? new Date(this.selectedValue + 'T00:00:00') : new Date();
+        this.viewYear = initDate.getFullYear();
+        this.viewMonth = initDate.getMonth();
+    }
+    async onStaticValueChange(newStaticValue) {
+        if (newStaticValue) {
+            this.selectedValue = newStaticValue;
+            const date = new Date(newStaticValue + 'T00:00:00');
+            this.viewYear = date.getFullYear();
+            this.viewMonth = date.getMonth();
+        }
+    }
+    async componentDidLoad() {
+        document.addEventListener('click', this.handleOutsideClick);
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    async disconnectedCallback() {
+        this.form.unsubscribe(this.name);
+        document.removeEventListener('click', this.handleOutsideClick);
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    reset(newValue) {
+        this.selectedValue = newValue || this.defaultValue || '';
+        if (this.selectedValue) {
+            const date = new Date(this.selectedValue + 'T00:00:00');
+            this.viewYear = date.getFullYear();
+            this.viewMonth = date.getMonth();
+        }
+    }
+    adjustDropdownPosition() {
+        requestAnimationFrame(() => {
+            const input = this.el.querySelector('.form-input-style');
+            if (!input)
+                return;
+            const rect = input.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - rect.bottom - 20;
+            this.openUpwards = spaceBelow < 320;
+            setTimeout(() => {
+                this.isOpen = true;
+            }, 10);
+        });
+    }
+    // Date utilities
+    toDateString(year, month, day) {
+        return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+    isDateDisabled(year, month, day) {
+        const dateStr = this.toDateString(year, month, day);
+        if (this.minDate && dateStr < this.minDate)
+            return true;
+        if (this.maxDate && dateStr > this.maxDate)
+            return true;
+        if (this.disabledDates)
+            return this.disabledDates(new Date(year, month, day));
+        return false;
+    }
+    getCalendarDays() {
+        const year = this.viewYear;
+        const month = this.viewMonth;
+        const firstDayOfMonth = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPrevMonth = new Date(year, month, 0).getDate();
+        const leadingDays = (firstDayOfMonth - this.firstDayOfWeek + 7) % 7;
+        const days = [];
+        for (let i = leadingDays - 1; i >= 0; i--) {
+            const prevMonth = month === 0 ? 11 : month - 1;
+            const prevYear = month === 0 ? year - 1 : year;
+            days.push({ day: daysInPrevMonth - i, month: prevMonth, year: prevYear, isCurrentMonth: false });
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push({ day: i, month, year, isCurrentMonth: true });
+        }
+        const remaining = 42 - days.length;
+        for (let i = 1; i <= remaining; i++) {
+            const nextMonth = month === 11 ? 0 : month + 1;
+            const nextYear = month === 11 ? year + 1 : year;
+            days.push({ day: i, month: nextMonth, year: nextYear, isCurrentMonth: false });
+        }
+        return days;
+    }
+    getWeekDayNames() {
+        const names = [];
+        const baseDate = new Date(2024, 0, 7); // known Sunday
+        for (let i = 0; i < 7; i++) {
+            const d = new Date(baseDate);
+            d.setDate(d.getDate() + ((this.firstDayOfWeek + i) % 7));
+            names.push(new Intl.DateTimeFormat(this.language, { weekday: 'short' }).format(d));
+        }
+        return names;
+    }
+    getMonthYearTitle() {
+        return new Intl.DateTimeFormat(this.language, { month: 'long', year: 'numeric' }).format(new Date(this.viewYear, this.viewMonth));
+    }
+    formatDisplayValue() {
+        if (!this.selectedValue)
+            return '';
+        try {
+            return new Intl.DateTimeFormat(this.language, { year: 'numeric', month: '2-digit', day: '2-digit' }).format(new Date(this.selectedValue + 'T00:00:00'));
+        }
+        catch (_a) {
+            return this.selectedValue;
+        }
+    }
+    canGoPrev() {
+        if (!this.minDate)
+            return true;
+        const [minYear, minMonth] = this.minDate.split('-').map(Number);
+        return this.viewYear > minYear || (this.viewYear === minYear && this.viewMonth > minMonth - 1);
+    }
+    canGoNext() {
+        if (!this.maxDate)
+            return true;
+        const [maxYear, maxMonth] = this.maxDate.split('-').map(Number);
+        return this.viewYear < maxYear || (this.viewYear === maxYear && this.viewMonth < maxMonth - 1);
+    }
+    render() {
+        const { disabled, isRequired, meta, isError, errorMessage } = this.form.getInputState(this.name);
+        const [locale] = this.form.getFormLocale();
+        const label = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.label) || (meta === null || meta === void 0 ? void 0 : meta.label);
+        const placeholder = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.placeholder);
+        const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
+        const displayValue = this.formatDisplayValue();
+        const weekDays = this.getWeekDayNames();
+        const days = this.getCalendarDays();
+        const monthTitle = this.getMonthYearTitle();
+        const now = new Date();
+        const todayStr = this.toDateString(now.getFullYear(), now.getMonth(), now.getDate());
+        return (h(Host, { key: '4db95c0c0381da76cfda97fdf70810808673d381' }, h("label", { key: 'cc816c07f4b85437a4b08f46e84c67acd6d6e804', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '8661150081ea4a8bbf98cdf8200b1467912715be', isRequired: isRequired, label: label }), h("form-shadow-input", { key: '70978796ac1617c54806c87963d772c0e2c2e50b', name: this.name, form: this.form, value: this.selectedValue }), h("div", { key: '9341f0d67eb4471d321124c9a9ee7ca8feb06e70', part: `${this.name}-container form-input-container`, class: cn('form-input-container', { open: this.isOpen }) }, h("input", { key: 'f8bfd2ea087a16ee69aa52d98d4ed02daa4b027f', type: "text", readOnly: true, disabled: isDisabled, value: displayValue, onClick: this.toggleDropdown, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), class: cn('form-input-style form-input-select', {
+                'form-input-error-style': isError,
+            }) }), h("span", { key: 'b90d55597940d7265aa4a9da2bf62e2206c1a443', part: `${this.name}-icon form-date-picker-icon`, class: "form-input-icon form-input-icon-end" }, h("svg", { key: '44a9ffabb98b9fa353504f2e32714cfc4cc55c0a', "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "size-full" }, h("path", { key: '65a36c47d6677d140bdd2732cc2a39cf0e1b4da0', d: "M8 2v4" }), h("path", { key: 'c8147da41710e22f6b9787f249140ad0a0b0e728', d: "M16 2v4" }), h("rect", { key: '05cecc8e5f7a1f7790cafd5bb55f3fce0909b359', width: "18", height: "18", x: "3", y: "4", rx: "2" }), h("path", { key: 'bad2f8467be0592c5878278845561d2d19c389c9', d: "M3 10h18" }))), h("div", { key: 'eab0aa136052e3fbe9d7b336f9214162ddc97167', part: `${this.name}-dropdown form-date-picker-dropdown`, class: cn('form-picker-dropdown', {
+                upwards: this.openUpwards,
+                downwards: !this.openUpwards,
+            }) }, h("div", { key: '58b349b2f93b3e6b144acb91462018175e8a2d4d', class: "form-date-picker-header" }, h("button", { key: '8bc1e5c9d917791c25a8abff82af6ed22ea2f840', type: "button", disabled: !this.canGoPrev(), part: `${this.name}-prev form-date-picker-nav`, onClick: this.prevMonth, class: "form-date-picker-nav" }, h("svg", { key: '4813e5358e8755f1fb8bd445182dd49706f72c51', "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "size-4 rtl:rotate-180" }, h("path", { key: 'c135f860ca663d428dad92669f33510be4f72dda', d: "m15 18-6-6 6-6" }))), h("span", { key: '0ee9dda3778c4c32c0ac6b9c29fe1f145cc72e6c', part: `${this.name}-title form-date-picker-title`, class: "form-date-picker-title" }, monthTitle), h("button", { key: '9c4a0e263c81c080ae4886f30a89be182e4f403a', type: "button", disabled: !this.canGoNext(), part: `${this.name}-next form-date-picker-nav`, onClick: this.nextMonth, class: "form-date-picker-nav" }, h("svg", { key: 'b647449654ae66e719bf1c1c93d203bad6ca814a', "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "size-4 rtl:rotate-180" }, h("path", { key: '6c3ab653e7eb383253f1696ace2e2d29c2a23d79', d: "m9 18 6-6-6-6" })))), h("div", { key: 'e650578c5e476e02f318f8a41ea3e4a5b4591bfb', class: "form-date-picker-grid" }, weekDays.map(day => (h("div", { class: "form-date-picker-weekday" }, day))), days.map(cell => {
+            const dateStr = this.toDateString(cell.year, cell.month, cell.day);
+            const isSelected = dateStr === this.selectedValue;
+            const isToday = dateStr === todayStr;
+            const dateDisabled = !cell.isCurrentMonth || this.isDateDisabled(cell.year, cell.month, cell.day);
+            return (h("button", { type: "button", disabled: dateDisabled, onClick: () => this.selectDate(cell.year, cell.month, cell.day), part: cn('form-date-picker-day', { 'form-date-picker-day-selected': isSelected, 'form-date-picker-day-today': isToday }), class: cn('form-date-picker-day', {
+                    selected: isSelected,
+                    today: isToday && !isSelected,
+                    outside: !cell.isCurrentMonth,
+                }) }, cell.day));
+        })))), h(FormErrorMessage, { key: '04191c85e8dd2c23a3714c9f62c39ca0b5fa42d8', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+    }
+    static get is() { return "form-date-picker"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["form-inputs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "wrapperId": {
+                "type": "string",
+                "attribute": "wrapper-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isLoading": {
+                "type": "boolean",
+                "attribute": "is-loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "attribute": "is-disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "form": {
+                "type": "unknown",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormHook<any>",
+                    "resolved": "FormHook<any>",
+                    "references": {
+                        "FormHook": {
+                            "location": "import",
+                            "path": "~features/form-hook/form-hook",
+                            "id": "src/features/form-hook/form-hook.ts::FormHook"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "wrapperClass": {
+                "type": "string",
+                "attribute": "wrapper-class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "staticValue": {
+                "type": "string",
+                "attribute": "static-value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "defaultValue": {
+                "type": "string",
+                "attribute": "default-value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "attribute": "language",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'en'"
+            },
+            "minDate": {
+                "type": "string",
+                "attribute": "min-date",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxDate": {
+                "type": "string",
+                "attribute": "max-date",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabledDates": {
+                "type": "unknown",
+                "attribute": "disabled-dates",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "(date: Date) => boolean",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "attribute": "first-day-of-week",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "selectedValue": {},
+            "viewYear": {},
+            "viewMonth": {},
+            "openUpwards": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "staticValue",
+                "methodName": "onStaticValueChange"
+            }];
+    }
+}

package/dist/collection/components/form-elements/form-dialog.js

@@ -33,12 +33,12 @@ export class FormInput {
     }
     render() {
         const [locale] = this.form.getFormLocale();
-        return (h(Host, { key: '199ef538686cf27c61302a6beca75ac5b9defb6d' }, h("div", { key: 'ddf67b9a178b0ba626039a4d286d007da76c4edb', part: "form-dialog-modal", dir: locale.sharedFormLocales.direction, class: cn('dialog-drop-container', {
+        return (h(Host, { key: 'c441c354ce115473f511a40781d24b7514b722d1' }, h("div", { key: 'f3569f94609f0306ab1ebcda3c6f6d248991b3a0', part: "form-dialog-modal", dir: locale.sharedFormLocales.direction, class: cn('dialog-drop-container', {
                 'opened-dialog-drop-container dialog-blur': this.isOpened,
                 'error': this.isError,
-            }) }, h("div", { key: 'a8b7d5df1921736b9be3485d235ce87f0ad9e893', part: "dialog-wrapper", class: cn('dialog-wrapper', {
+            }) }, h("div", { key: '1d0cdd5ebc72dd513bd504aba206d9013e06e532', part: "dialog-wrapper", class: cn('dialog-wrapper', {
                 'opened-dialog-wrapper': this.isOpened,
-            }) }, h("button", { key: 'b841ac1bc84e4f87a0e4c497aaf0df4a1b24eefc', part: "dialog-close-icon-button", onClick: this.closeDialog, type: "button", class: "dialog-close-icon-button" }, h(AddIcon, { key: '444c50be6be0d87a1b35d13b389d60a849454b35' })), h("div", { key: '7e24a9f5d93046bea743553b388273dabd2e3054', part: "dialog-content", class: "dialog-content" }, this.isError && this.internalMessage, h("div", { key: 'eee613b8b3c5dacba95fd70695e92837cbb07229', style: { display: this.isError ? 'none' : 'block' } }, h("slot", { key: '41c811128d2e49e2472ebf6b1ee99e5099896a75' }))), h("button", { key: '8d70d118f61c8abb480a85551de869546885965c', part: "dialog-close-button", type: "button", onClick: this.closeDialog, class: "dialog-close-button" }, this.closeText)))));
+            }) }, h("button", { key: 'e20cbff0c28e88df61fb0fb9ba0648f5122bc9d1', "aria-label": "Close the dialog", part: "dialog-close-icon-button", onClick: this.closeDialog, type: "button", class: "dialog-close-icon-button" }, h(AddIcon, { key: '537d601ce25e20faa543f7be795310c7bf97cdbe' })), h("div", { key: '65c713967f31b1fab0c730d8b328a62cc2e319c1', part: "dialog-content", class: "dialog-content" }, this.isError && this.internalMessage, h("div", { key: 'fbc7477f1c2963081bd5026ac6ebefea68a17475', style: { display: this.isError ? 'none' : 'block' } }, h("slot", { key: '8127f5e16e326fc862cfac12910fde9a3aa45946' }))), h("button", { key: '7a36718edc3de3682201caeeaffee1ffc3cd9c9d', part: "dialog-close-button", type: "button", onClick: this.closeDialog, class: "dialog-close-button" }, this.closeText)))));
     }
     static get is() { return "form-dialog"; }
     static get originalStyleUrls() {

package/dist/collection/components/form-elements/form-input.js

@@ -12,7 +12,12 @@ const partKeyPrefix = 'form-input-';
 export class FormInput {
     constructor() {
         this.inputProps = {};
+        this.iconPosition = 'end';
         this.prefixWidth = 0;
+        this.onInputChange = (event) => {
+            const target = event.target;
+            target.value = this.formatter ? this.formatter(target.value) : target.value;
+        };
     }
     async componentWillLoad() {
         this.form.subscribe(this.name, this);
@@ -20,8 +25,9 @@ export class FormInput {
     }
     async onStaticValueChange(newStaticValue, notInitialLoad = true) {
         if (!!newStaticValue) {
-            this.defaultValue = newStaticValue;
-            this.inputRef.value = newStaticValue;
+            const formatted = this.formatter ? this.formatter(newStaticValue) : newStaticValue;
+            this.defaultValue = formatted;
+            this.inputRef.value = formatted;
         }
         else if (notInitialLoad) {
             this.defaultValue = '';
@@ -38,7 +44,7 @@ export class FormInput {
     }
     reset(newValue) {
         const value = newValue || this.defaultValue || '';
-        this.inputRef.value = value;
+        this.inputRef.value = this.formatter ? this.formatter(value) : value;
     }
     render() {
         var _a, _b;
@@ -48,9 +54,18 @@ export class FormInput {
         const label = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.label) || (meta === null || meta === void 0 ? void 0 : meta.label);
         const placeholder = getNestedValue(locale, meta === null || meta === void 0 ? void 0 : meta.placeholder);
         const isDisabled = disabled || this.isLoading || !!this.staticValue || this.isDisabled;
-        return (h(Host, { key: '09bb9086c366f7267c76d1ee68d2b428463e1cb2' }, h("label", { key: 'f5c77348b7850981074220ed92b7536583108694', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: '191b3d82af70a315092df65e68b3ba1e513309e1', isRequired: isRequired, label: label }), h("div", { key: '952b388e58e053f29000ba43694c9edb0a7220d4', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: '3a21d902431bd6a761a6189148be5fa751737099', name: this.name, direction: (_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.direction, prefix: this.inputPrefix }), h("input", Object.assign({ key: '9c6393954ecfaa7b5a4b2ad6484bb4225f28e642' }, this.inputProps, { name: this.name, type: this === null || this === void 0 ? void 0 : this.type, disabled: isDisabled, defaultValue: this.defaultValue, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign({}, (this.prefixWidth ? { [((_b = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _b === void 0 ? void 0 : _b.direction) === 'rtl' ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), class: cn('form-input-style', part, {
+        const isRtl = ((_a = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _a === void 0 ? void 0 : _a.direction) === 'rtl';
+        const isIconStart = this.iconPosition === 'start';
+        const iconPaddingSide = isIconStart ? (isRtl ? 'paddingRight' : 'paddingLeft') : isRtl ? 'paddingLeft' : 'paddingRight';
+        const iconClass = cn('form-input-icon', {
+            'form-input-icon-start': isIconStart,
+            'form-input-icon-end': !isIconStart,
+            'form-input-icon-interactive': !!this.iconAction,
+        });
+        const renderIcon = () => this.iconAction ? (h("button", { type: "button", disabled: isDisabled, onClick: this.iconAction, part: `${this.name}-icon form-input-icon`, class: iconClass }, this.icon)) : (h("span", { part: `${this.name}-icon form-input-icon`, class: iconClass }, this.icon));
+        return (h(Host, { key: '64e1dc935b2527d8264fd145b830533b244a3e06' }, h("label", { key: 'a3a03a65a13c1f64f3bc10236b26cdd9b0990250', part: this.name, id: this.wrapperId, class: cn('form-input-label-container', this.wrapperClass, { disabled: isDisabled }) }, h(FormInputLabel, { key: 'a650f865e2dc033dc611203b1c0bb02654c30c66', isRequired: isRequired, label: label }), h("div", { key: '21fc7153d4d1d8b1f66df3931deb3fe9467f1984', part: `${this.name}-container form-input-container`, class: "form-input-container" }, h(FormInputPrefix, { key: '2bcf38f42353f939603c2b6a9cced6962d1ba795', name: this.name, direction: (_b = locale === null || locale === void 0 ? void 0 : locale.sharedFormLocales) === null || _b === void 0 ? void 0 : _b.direction, prefix: this.inputPrefix }), h("input", Object.assign({ key: '056b29e97c4e784d824da863a12c6118d32c6b05' }, this.inputProps, { name: this.name, type: this === null || this === void 0 ? void 0 : this.type, disabled: isDisabled, onInput: this.onInputChange, defaultValue: this.formatter ? this.formatter(this.defaultValue || '') : this.defaultValue, part: `${this.name}-input form-input`, placeholder: placeholder || (meta === null || meta === void 0 ? void 0 : meta.placeholder), style: Object.assign(Object.assign({}, (this.prefixWidth ? { [isRtl ? 'paddingRight' : 'paddingLeft']: `${this.prefixWidth}px` } : {})), (this.icon ? { [iconPaddingSide]: '40px' } : {})), class: cn('form-input-style', part, {
                 'form-input-error-style': isError,
-            }) }))), h(FormErrorMessage, { key: '77532a9d8c77c5cd67b3a141d07315de1ad857f8', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
+            }) })), this.icon && renderIcon()), h(FormErrorMessage, { key: 'd1f35267c7fb6348c456532042d922d56640c549', name: this.name, isError: isError, errorMessage: locale[errorMessage] || errorMessage }))));
     }
     static get is() { return "form-input"; }
     static get originalStyleUrls() {
@@ -284,6 +299,81 @@ export class FormInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "formatter": {
+                "type": "unknown",
+                "attribute": "formatter",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: string) => string",
+                    "resolved": "(value: string) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "icon": {
+                "type": "any",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "iconAction": {
+                "type": "unknown",
+                "attribute": "icon-action",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "iconPosition": {
+                "type": "string",
+                "attribute": "icon-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'end'"
             }
         };
     }