@rededor/cura 1.0.0 → 1.2.0-alpha.0

package/dist/collection/components/forms/cura-input-date/cura-input-date.js

@@ -0,0 +1,424 @@
+import { Host, h } from "@stencil/core";
+import { isAfter, isBefore } from "date-fns";
+export class CuraInputDate {
+    constructor() {
+        this.label = '';
+        this.status = 'default';
+        this.size = 'medium';
+        this.name = '';
+        this.helperText = undefined;
+        this.enableRangeDates = undefined;
+        this.disableFutureDates = undefined;
+        this.disablePassDates = undefined;
+        this.iconName = '';
+        this.placeholder = null;
+        this.styles = {};
+        this.isCalendarVisible = false;
+        this.dates = [];
+        this.value = '';
+    }
+    connectedCallback() {
+        const weights = window.CuraAPI.theme.fonts.getWeights();
+        this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+        this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
+        this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);
+        this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+        this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+        this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
+        this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+        this.styles['--font-weight-regular'] = weights.regular;
+    }
+    /**
+     * Callback for form association
+     */
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    /**
+     * Formats the placeholder based on the enableRangeDates flag
+     *
+     * @returns {string} A string representing the placeholder format,
+     * either for a date range ('dd/mm/yyyy - dd/mm/yyyy') or a single date ('dd/mm/yyyy')
+     */
+    setPlaceholder() {
+        if (this.placeholder) {
+            return this.placeholder;
+        }
+        return this.enableRangeDates ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa';
+    }
+    /**
+     * Sets the mask type based on the enableRangeDates flag
+     *
+     * @returns {string} The mask type, either 'dateRange' or 'date'
+     */
+    setMask() {
+        return this.enableRangeDates ? 'dateRange' : 'date';
+    }
+    /**
+     * Sets the mode type based on the enableRangeDates flag
+     *
+     * @returns {'range' | 'single'}
+     */
+    setMode() {
+        return this.enableRangeDates ? 'range' : 'single';
+    }
+    handleClick(ev) {
+        if (this.el.contains(ev.target)) {
+            return;
+        }
+        this.hideCalendar();
+    }
+    hideCalendar() {
+        this.isCalendarVisible = false;
+    }
+    showCalendar() {
+        this.isCalendarVisible = true;
+    }
+    handleInputDates(event) {
+        const inputValue = event.target.value;
+        const dateRangeRegex = /^(\d{2}\/\d{2}\/\d{4})\s*-\s*(\d{2}\/\d{2}\/\d{4})$/;
+        const simpleDateRegex = /^(\d{2}\/\d{2}\/\d{4})$/;
+        if (dateRangeRegex.test(inputValue)) {
+            const matches = inputValue.match(dateRangeRegex);
+            const startDate = this.parseStringToDate(matches[1]);
+            const endDate = this.parseStringToDate(matches[2]);
+            if (this.isDateValid(startDate) && this.isDateValid(endDate)) {
+                this.status = 'default';
+                this.dates = [startDate, endDate];
+                this.value = `${this.parseDateToString(startDate)} - ${this.parseDateToString(endDate)}`;
+                this.dateChange.emit(this.value);
+            }
+            else {
+                this.status = 'error';
+                this.dates = [];
+            }
+        }
+        else if (simpleDateRegex.test(inputValue)) {
+            const matches = inputValue.match(simpleDateRegex);
+            const singleDate = this.parseStringToDate(matches[1]);
+            if (this.isDateValid(singleDate)) {
+                this.status = 'default';
+                this.dates = [singleDate];
+                this.value = this.parseDateToString(singleDate);
+                this.dateChange.emit(this.value);
+            }
+            else {
+                this.status = 'error';
+                this.dates = [];
+            }
+        }
+        else {
+            this.dates = [];
+        }
+    }
+    handleChangeDates(event) {
+        if (event.detail === '') {
+            this.dates = [];
+            this.status = 'default';
+            this.value = '';
+            this.dateChange.emit(this.value);
+        }
+    }
+    isDateValid(date) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        if (this.disablePassDates)
+            return !isBefore(date, today);
+        if (this.disableFutureDates)
+            return !isAfter(date, today);
+        return true;
+    }
+    parseStringToDate(dateString) {
+        const [day, month, year] = dateString.split('/').map(Number);
+        return new Date(year, month - 1, day);
+    }
+    parseDateToString(date) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+    renderCalendarOrHelperText() {
+        if (this.isCalendarVisible) {
+            return (h("div", { class: "calendar" }, h("cura-calendar", { customDates: this.dates, mode: this.setMode(), width: "100%", embedded: false, floating: false, disableFutureDates: this.disableFutureDates, disablePassDates: this.disablePassDates, onOnchangeday: e => {
+                    const days = e.detail.days;
+                    if (days.length === 1) {
+                        this.value = this.parseDateToString(days[0]);
+                    }
+                    else if (days.length > 0) {
+                        this.value = `${this.parseDateToString(days[0])} - ${this.parseDateToString(days[days.length - 1])}`;
+                    }
+                    else {
+                        this.value = '';
+                    }
+                    this.dateChange.emit(this.value);
+                } })));
+        }
+        else {
+            return this.helperText;
+        }
+    }
+    render() {
+        return (h(Host, { key: '8bf7141427b370ea271d2f589c26060111862f79' }, h("div", { key: '5c955bf76f93912512bbf18887db5305e6772faa', class: "container", style: this.styles }, h("cura-input-text", { key: 'a8c3ff65ca54123d0f7612f61e06e44275047961', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, iconName: this.iconName, placeholder: this.setPlaceholder(), "mask-preset": this.setMask(), "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
+    }
+    static get is() { return "cura-input-date"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-input-date.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-input-date.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the input date"
+                },
+                "attribute": "label",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'error' | 'success' | 'default'",
+                    "resolved": "\"default\" | \"error\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates input status (default: default)"
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the input mode default: 'small', 'medium', or 'large' (default: 'medium')"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name text for the input date"
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the input"
+                },
+                "attribute": "helper-text",
+                "reflect": true
+            },
+            "enableRangeDates": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the date range selection mode, allowing users to select a period of dates"
+                },
+                "attribute": "enable-range-dates",
+                "reflect": true
+            },
+            "disableFutureDates": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether future dates (dates before the current date) should be disabled"
+                },
+                "attribute": "disable-future-dates",
+                "reflect": true
+            },
+            "disablePassDates": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether past dates (dates before the current date) should be disabled"
+                },
+                "attribute": "disable-pass-dates",
+                "reflect": true
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display a cura icon (default: null)"
+                },
+                "attribute": "icon-name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the input"
+                },
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {},
+            "isCalendarVisible": {},
+            "dates": {},
+            "value": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dateChange",
+                "name": "dateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{EventEmitter<string>}"
+                        }],
+                    "text": "Emitted when the value of the input changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "enableRangeDates",
+                "methodName": "setPlaceholder"
+            }, {
+                "propName": "enableRangeDates",
+                "methodName": "setMask"
+            }, {
+                "propName": "enableRangeDates",
+                "methodName": "setMode"
+            }, {
+                "propName": "disableFutureDates",
+                "methodName": "isDateValid"
+            }, {
+                "propName": "disablePassDates",
+                "methodName": "isDateValid"
+            }, {
+                "propName": "dates",
+                "methodName": "renderCalendarOrHelperText"
+            }, {
+                "propName": "isCalendarVisible",
+                "methodName": "renderCalendarOrHelperText"
+            }, {
+                "propName": "disableFutureDates",
+                "methodName": "renderCalendarOrHelperText"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=cura-input-date.js.map

package/dist/collection/components/forms/cura-input-date/cura-input-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-input-date.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-input-date/cura-input-date.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE7G,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAQ7C,MAAM,OAAO,aAAa;;qBAMkB,EAAE;sBAKsC,SAAS;oBAKd,QAAQ;oBAK5C,EAAE;;;;;wBAyBiB,EAAE;2BAKP,IAAI;sBAQzC,EAAE;iCAEkB,KAAK;qBAElB,EAAE;qBAED,EAAE;;IAE5B,iBAAiB;QACf,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACxD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAC1E,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;QAC3F,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACrF,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACpE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACtE,IAAI,CAAC,MAAM,CAAC,uBAAuB,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IACzD,CAAC;IAED;;OAEG;IACH,sBAAsB,CAAC,IAA2B;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;IAC9B,CAAC;IAED;;;;;OAKG;IAEH,cAAc;QACZ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QACD,OAAO,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,YAAY,CAAC;IAC1E,CAAC;IAED;;;;OAIG;IAEH,OAAO;QACL,OAAO,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;IACtD,CAAC;IAED;;;;OAIG;IAEH,OAAO;QACL,OAAO,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;IACpD,CAAC;IAGD,WAAW,CAAC,EAAoB;QAC9B,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,YAAY;QACV,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;IACjC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,gBAAgB,CAAC,KAAU;QACzB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAEtC,MAAM,cAAc,GAAG,qDAAqD,CAAC;QAC7E,MAAM,eAAe,GAAG,yBAAyB,CAAC;QAElD,IAAI,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACpC,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;YACjD,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YACrD,MAAM,OAAO,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YACnD,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC7D,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;gBACxB,IAAI,CAAC,KAAK,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBAClC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAC;gBACzF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBACtB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;aAAM,IAAI,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5C,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;YAClD,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;YACtD,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;gBACxB,IAAI,CAAC,KAAK,GAAG,CAAC,UAAU,CAAC,CAAC;gBAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;gBAChD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBACtB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,KAAgD;QAChE,IAAI,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAID,WAAW,CAAC,IAAU;QACpB,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAE3B,IAAI,IAAI,CAAC,gBAAgB;YAAE,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACzD,IAAI,IAAI,CAAC,kBAAkB;YAAE,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC;IACd,CAAC;IAED,iBAAiB,CAAC,UAAkB;QAClC,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC7D,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IACxC,CAAC;IAED,iBAAiB,CAAC,IAAU;QAC1B,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACpD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEhC,OAAO,GAAG,GAAG,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;IACnC,CAAC;IAKD,0BAA0B;QACxB,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,OAAO,CACL,WAAK,KAAK,EAAC,UAAU;gBACnB,qBACE,WAAW,EAAE,IAAI,CAAC,KAAK,EACvB,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EACpB,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,KAAK,EACf,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,CAAC,CAAC,EAAE;wBACjB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;wBAC3B,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;4BACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC/C,CAAC;6BAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;4BAC3B,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;wBACvG,CAAC;6BAAM,CAAC;4BACN,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;wBAClB,CAAC;wBACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBACnC,CAAC,GACD,CACE,CACP,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,UAAU,CAAC;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;gBACvC,wEACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,cAAc,EAAE,iBACrB,IAAI,CAAC,OAAO,EAAE,2BACJ,IAAI,EAC3B,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAC9C,YAAY,EAAC,KAAK,EAClB,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAEpD,IAAI,CAAC,0BAA0B,EAAE,CAClB,CACd,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Listen, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport { CuraInputTextCustomEvent } from '../../../components';\nimport { isAfter, isBefore } from 'date-fns';\n\n@Component({\n  tag: 'cura-input-date',\n  styleUrl: 'cura-input-date.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraInputDate {\n  @Element() el: HTMLElement;\n\n  /**\n   * Label text for the input date\n   */\n  @Prop({ reflect: true }) label?: string = '';\n\n  /**\n   * Indicates input status (default: default)\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n\n  /**\n   * Size of the input mode default: 'small', 'medium', or 'large' (default: 'medium')\n   */\n  @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Name text for the input date\n   */\n  @Prop({ reflect: true }) name?: string = '';\n\n  /**\n   * Helper text displayed below the input\n   */\n  @Prop({ reflect: true, mutable: true }) helperText?: string;\n\n  /**\n   * Enables the date range selection mode, allowing users to select a period of dates\n   */\n  @Prop({ reflect: true, mutable: true }) enableRangeDates: boolean;\n\n  /**\n   * Controls whether future dates (dates before the current date) should be disabled\n   */\n  @Prop({ reflect: true, mutable: true }) disableFutureDates: boolean;\n\n  /**\n   * Controls whether past dates (dates before the current date) should be disabled\n   */\n  @Prop({ reflect: true, mutable: true }) disablePassDates: boolean;\n\n  /**\n   * Whether to display a cura icon (default: null)\n   */\n  @Prop({ reflect: true, mutable: true }) iconName?: string = '';\n\n  /**\n   * Placeholder text for the input\n   */\n  @Prop({ reflect: true }) placeholder?: string | null = null;\n\n  /**\n   * Emitted when the value of the input changes\n   * @type {EventEmitter<string>}\n   */\n  @Event() dateChange: EventEmitter<string>;\n\n  @State() styles = {};\n\n  @State() isCalendarVisible: boolean = false;\n\n  @State() dates: Date[] = [];\n\n  @State() value?: string = '';\n\n  connectedCallback() {\n    const weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n    this.styles['--neutral-lighter'] = window.CuraAPI.theme.colors.getColor(`neutral-lighter`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-regular'] = weights.regular;\n  }\n\n  /**\n   * Callback for form association\n   */\n  formAssociatedCallback(form: { ariaLabel: string }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n   * Formats the placeholder based on the enableRangeDates flag\n   *\n   * @returns {string} A string representing the placeholder format,\n   * either for a date range ('dd/mm/yyyy - dd/mm/yyyy') or a single date ('dd/mm/yyyy')\n   */\n  @Watch('enableRangeDates')\n  setPlaceholder(): string {\n    if (this.placeholder) {\n      return this.placeholder;\n    }\n    return this.enableRangeDates ? 'dd/mm/aaaa - dd/mm/aaaa' : 'dd/mm/aaaa';\n  }\n\n  /**\n   * Sets the mask type based on the enableRangeDates flag\n   *\n   * @returns {string} The mask type, either 'dateRange' or 'date'\n   */\n  @Watch('enableRangeDates')\n  setMask(): string {\n    return this.enableRangeDates ? 'dateRange' : 'date';\n  }\n\n  /**\n   * Sets the mode type based on the enableRangeDates flag\n   *\n   * @returns {'range' | 'single'}\n   */\n  @Watch('enableRangeDates')\n  setMode(): 'range' | 'single' {\n    return this.enableRangeDates ? 'range' : 'single';\n  }\n\n  @Listen('click', { target: 'window' })\n  handleClick(ev: { target: Node }) {\n    if (this.el.contains(ev.target)) {\n      return;\n    }\n    this.hideCalendar();\n  }\n\n  hideCalendar() {\n    this.isCalendarVisible = false;\n  }\n\n  showCalendar() {\n    this.isCalendarVisible = true;\n  }\n\n  handleInputDates(event: any) {\n    const inputValue = event.target.value;\n\n    const dateRangeRegex = /^(\\d{2}\\/\\d{2}\\/\\d{4})\\s*-\\s*(\\d{2}\\/\\d{2}\\/\\d{4})$/;\n    const simpleDateRegex = /^(\\d{2}\\/\\d{2}\\/\\d{4})$/;\n\n    if (dateRangeRegex.test(inputValue)) {\n      const matches = inputValue.match(dateRangeRegex);\n      const startDate = this.parseStringToDate(matches[1]);\n      const endDate = this.parseStringToDate(matches[2]);\n      if (this.isDateValid(startDate) && this.isDateValid(endDate)) {\n        this.status = 'default';\n        this.dates = [startDate, endDate];\n        this.value = `${this.parseDateToString(startDate)} - ${this.parseDateToString(endDate)}`;\n        this.dateChange.emit(this.value);\n      } else {\n        this.status = 'error';\n        this.dates = [];\n      }\n    } else if (simpleDateRegex.test(inputValue)) {\n      const matches = inputValue.match(simpleDateRegex);\n      const singleDate = this.parseStringToDate(matches[1]);\n      if (this.isDateValid(singleDate)) {\n        this.status = 'default';\n        this.dates = [singleDate];\n        this.value = this.parseDateToString(singleDate);\n        this.dateChange.emit(this.value);\n      } else {\n        this.status = 'error';\n        this.dates = [];\n      }\n    } else {\n      this.dates = [];\n    }\n  }\n\n  handleChangeDates(event: CuraInputTextCustomEvent<string | number>) {\n    if (event.detail === '') {\n      this.dates = [];\n      this.status = 'default';\n      this.value = '';\n      this.dateChange.emit(this.value);\n    }\n  }\n\n  @Watch('disableFutureDates')\n  @Watch('disablePassDates')\n  isDateValid(date: Date) {\n    const today = new Date();\n    today.setHours(0, 0, 0, 0);\n\n    if (this.disablePassDates) return !isBefore(date, today);\n    if (this.disableFutureDates) return !isAfter(date, today);\n    return true;\n  }\n\n  parseStringToDate(dateString: string): Date {\n    const [day, month, year] = dateString.split('/').map(Number);\n    return new Date(year, month - 1, day);\n  }\n\n  parseDateToString(date: Date): string {\n    const day = String(date.getDate()).padStart(2, '0');\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const year = date.getFullYear();\n\n    return `${day}/${month}/${year}`;\n  }\n\n  @Watch('dates')\n  @Watch('isCalendarVisible')\n  @Watch('disableFutureDates')\n  renderCalendarOrHelperText() {\n    if (this.isCalendarVisible) {\n      return (\n        <div class=\"calendar\">\n          <cura-calendar\n            customDates={this.dates}\n            mode={this.setMode()}\n            width=\"100%\"\n            embedded={false}\n            floating={false}\n            disableFutureDates={this.disableFutureDates}\n            disablePassDates={this.disablePassDates}\n            onOnchangeday={e => {\n              const days = e.detail.days;\n              if (days.length === 1) {\n                this.value = this.parseDateToString(days[0]);\n              } else if (days.length > 0) {\n                this.value = `${this.parseDateToString(days[0])} - ${this.parseDateToString(days[days.length - 1])}`;\n              } else {\n                this.value = '';\n              }\n              this.dateChange.emit(this.value);\n            }}\n          />\n        </div>\n      );\n    } else {\n      return this.helperText;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-input-text\n            label={this.label}\n            name={this.name}\n            status={this.status}\n            value={this.value}\n            onFocus={() => this.showCalendar()}\n            size={this.size}\n            iconName={this.iconName}\n            placeholder={this.setPlaceholder()}\n            mask-preset={this.setMask()}\n            enable-selection-mode={true}\n            onKeyUp={event => this.handleInputDates(event)}\n            autocomplete=\"off\"\n            onValueChange={event => this.handleChangeDates(event)}\n          >\n            {this.renderCalendarOrHelperText()}\n          </cura-input-text>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/forms/cura-input-date/cura-input-date.stories.js

@@ -0,0 +1,138 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import iconNames from "../../../assets/icons/iconset-default-list";
+const renderCuraInputDate = (args) => {
+    const block = `<cura-input-date
+  ${args.label ? `label="${args.label}"` : ''}
+  ${args.size && args.size !== 'medium' ? `size="${args.size}"` : ''}
+  ${args.status && args.status !== 'default' ? `status="${args.status}"` : ''}
+  ${args.name ? `name="${args.name}"` : ''}
+  ${args.helperText ? `helper-text="${args.helperText}"` : ''}
+  ${args.enableRangeDates ? `enable-range-dates="${args.enableRangeDates}"` : ''}
+  ${args.disablePassDates ? `disable-pass-dates="${args.disablePassDates}"` : ''}
+  ${args.disableFutureDates ? `disable-future-dates="${args.disableFutureDates}"` : ''}
+  ${args.iconName ? `icon-name="${args.iconName}"` : ''}
+  ${args.placeholder ? `placeholder="${args.placeholder}" ` : ''}
+  >
+</cura-input-date>
+`;
+    return `${block}`;
+};
+export default {
+    title: 'Componentes/Forms/InputDate',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraInputDate(args);
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Texto da label do input',
+            required: false,
+            table: {
+                category: 'Properties',
+            },
+        },
+        name: {
+            control: 'text',
+            description: 'Propriedade name do input',
+            required: false,
+            table: {
+                category: 'Properties',
+            },
+        },
+        status: {
+            control: { type: 'inline-radio' },
+            options: ['default', 'success', 'error'],
+            description: 'Status do input',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'default' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Texto de placeholder do input',
+            required: false,
+            table: {
+                category: 'Properties',
+            },
+        },
+        size: {
+            control: { type: 'inline-radio' },
+            options: ['small', 'medium', 'large'],
+            description: 'Tamanho do input',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'medium' },
+            },
+        },
+        helperText: {
+            control: 'text',
+            description: 'Define o texto de ajuda do input',
+            table: {
+                category: 'Properties',
+            },
+        },
+        disableFutureDates: {
+            control: 'boolean',
+            description: 'Define se deve desabilitar datas futuras',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+        },
+        enableRangeDates: {
+            control: 'boolean',
+            description: 'Define se deve habilitar um range de datas',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+        },
+        disablePassDates: {
+            control: 'boolean',
+            description: 'Define se deve desabilitar datas passadas',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+        },
+        iconName: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Nome do ícone usado no campo de input date',
+            required: false,
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '' },
+            },
+        },
+    },
+};
+export const InputDate = {
+    args: {
+        label: 'Label',
+        helperText: 'Texto de ajuda',
+        size: 'medium',
+        name: 'cura-input-date',
+        enableRangeDates: false,
+        disableFutureDates: false,
+        disablePassDates: false,
+        status: 'default',
+        iconName: '',
+        placeholder: '',
+    },
+};
+//# sourceMappingURL=cura-input-date.stories.js.map

package/dist/collection/components/forms/cura-input-date/cura-input-date.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-input-date.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-input-date/cura-input-date.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,MAAM,mBAAmB,GAAG,CAAC,IAAS,EAAE,EAAE;IACxC,MAAM,KAAK,GAAG;IACZ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;IACzC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;IAChE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE;IACzE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;IACtC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;IACzD,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,EAAE;IAC5E,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,EAAE;IAC5E,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,yBAAyB,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,CAAC,EAAE;IAClF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;IACnD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,EAAE;;;CAG/D,CAAC;IACA,OAAO,GAAG,KAAK,EAAE,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,yBAAyB;YACtC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2BAA2B;YACxC,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;YACxC,WAAW,EAAE,iBAAiB;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACrC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,+BAA+B;YAC5C,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;YACjC,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,WAAW,EAAE,kBAAkB;YAC/B,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aACpC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,4CAA4C;YACzD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;YAC3B,WAAW,EAAE,4CAA4C;YACzD,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;aAC9B;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,gBAAgB;QAC5B,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,iBAAiB;QACvB,gBAAgB,EAAE,KAAK;QACvB,kBAAkB,EAAE,KAAK;QACzB,gBAAgB,EAAE,KAAK;QACvB,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,EAAE;QACZ,WAAW,EAAE,EAAE;KAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraInputDate = (args: any) => {\n  const block = `<cura-input-date\n  ${args.label ? `label=\"${args.label}\"` : ''}\n  ${args.size && args.size !== 'medium' ? `size=\"${args.size}\"` : ''}\n  ${args.status && args.status !== 'default' ? `status=\"${args.status}\"` : ''}\n  ${args.name ? `name=\"${args.name}\"` : ''}\n  ${args.helperText ? `helper-text=\"${args.helperText}\"` : ''}\n  ${args.enableRangeDates ? `enable-range-dates=\"${args.enableRangeDates}\"` : ''}\n  ${args.disablePassDates ? `disable-pass-dates=\"${args.disablePassDates}\"` : ''}\n  ${args.disableFutureDates ? `disable-future-dates=\"${args.disableFutureDates}\"` : ''}\n  ${args.iconName ? `icon-name=\"${args.iconName}\"` : ''}\n  ${args.placeholder ? `placeholder=\"${args.placeholder}\" ` : ''}\n  >\n</cura-input-date>\n`;\n  return `${block}`;\n};\n\nexport default {\n  title: 'Componentes/Forms/InputDate',\n  tags: ['autodocs'],\n\n  render: ({ ...args }) => {\n    return renderCuraInputDate(args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto da label do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    name: {\n      control: 'text',\n      description: 'Propriedade name do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    status: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'success', 'error'],\n      description: 'Status do input',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    placeholder: {\n      control: 'text',\n      description: 'Texto de placeholder do input',\n      required: false,\n      table: {\n        category: 'Properties',\n      },\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: 'Tamanho do input',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium' },\n      },\n    },\n    helperText: {\n      control: 'text',\n      description: 'Define o texto de ajuda do input',\n      table: {\n        category: 'Properties',\n      },\n    },\n    disableFutureDates: {\n      control: 'boolean',\n      description: 'Define se deve desabilitar datas futuras',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    enableRangeDates: {\n      control: 'boolean',\n      description: 'Define se deve habilitar um range de datas',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    disablePassDates: {\n      control: 'boolean',\n      description: 'Define se deve desabilitar datas passadas',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    iconName: {\n      control: { type: 'select' },\n      options: ['', ...iconNames],\n      description: 'Nome do ícone usado no campo de input date',\n      required: false,\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nexport const InputDate = {\n  args: {\n    label: 'Label',\n    helperText: 'Texto de ajuda',\n    size: 'medium',\n    name: 'cura-input-date',\n    enableRangeDates: false,\n    disableFutureDates: false,\n    disablePassDates: false,\n    status: 'default',\n    iconName: '',\n    placeholder: '',\n  },\n};\n"]}

package/dist/collection/components/forms/cura-input-text/cura-input-text.css

@@ -235,14 +235,17 @@
 .cura-input-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder {
   color: var(--neutral-dark);
 }
-.cura-input-group:focus-within .cura-input-field {
+.cura-input-group:focus-within:not(.selection) .cura-input-field {
   border: 2px solid var(--info-base) !important;
   background-color: var(--neutral-purewhite);
   outline: none;
 }
-.cura-input-group:focus-within .cura-input-field input {
+.cura-input-group:focus-within:not(.selection) .cura-input-field input {
   color: var(--neutral-black) !important;
 }
+.cura-input-group:focus-within.selection .cura-input-field {
+  border-radius: 4px 4px 0px 0px;
+}
 .cura-input-group.isLoading {
   cursor: wait;
 }