@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/date-picker/date-picker.js

@@ -0,0 +1,113 @@
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, input, model, output, signal, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation, } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { AiIcon } from "../icon/icon.component";
+import { AiDatePickerOverlayService } from "./date-picker-overlay.service";
+import { datePickerCalendarVariants, datePickerTriggerVariants } from "./date-picker.variants";
+import { buildCalendarMonth, formatDate, getMonthLabel, getWeekdayLabels, parseDate } from "./date-picker.util";
+import * as i0 from "@angular/core";
+export class AiDatePicker {
+    #overlay = inject(AiDatePickerOverlayService);
+    #destroyRef = inject(DestroyRef);
+    #elRef = inject((ElementRef));
+    #vcr = inject(ViewContainerRef);
+    calendarTemplate;
+    id = input("", ...(ngDevMode ? [{ debugName: "id" }] : []));
+    placeholder = input("Selecione a data", ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    format = input("yyyy-MM-dd", ...(ngDevMode ? [{ debugName: "format" }] : []));
+    minDate = input("", ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = input("", ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    value = model("", ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueChange = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    viewYear = signal(new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "viewYear" }] : []));
+    viewMonth = signal(new Date().getMonth(), ...(ngDevMode ? [{ debugName: "viewMonth" }] : []));
+    weekdays = getWeekdayLabels();
+    selectedDate = computed(() => parseDate(this.value()), ...(ngDevMode ? [{ debugName: "selectedDate" }] : []));
+    calendarMonth = computed(() => buildCalendarMonth(this.viewYear(), this.viewMonth(), this.selectedDate(), this.minDate() ? parseDate(this.minDate()) ?? undefined : undefined, this.maxDate() ? parseDate(this.maxDate()) ?? undefined : undefined), ...(ngDevMode ? [{ debugName: "calendarMonth" }] : []));
+    monthLabel = computed(() => `${getMonthLabel(this.viewMonth())} ${this.viewYear()}`, ...(ngDevMode ? [{ debugName: "monthLabel" }] : []));
+    displayValue = computed(() => {
+        const date = this.selectedDate();
+        return date ? formatDate(date, this.format()) : "";
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    triggerClasses = computed(() => mergeClasses(datePickerTriggerVariants({ disabled: this.disabled() }), this.class()), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    calendarClasses = computed(() => mergeClasses(datePickerCalendarVariants()), ...(ngDevMode ? [{ debugName: "calendarClasses" }] : []));
+    ngOnInit() {
+        this.#overlay.create(this.#elRef);
+        this.#destroyRef.onDestroy(() => this.#overlay.destroy());
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isOpen())
+            return;
+        const date = this.selectedDate();
+        if (date) {
+            this.viewYear.set(date.getFullYear());
+            this.viewMonth.set(date.getMonth());
+        }
+        this.#overlay.attach(this.calendarTemplate, this.#vcr);
+        this.isOpen.set(true);
+        this.#overlay.outsidePointerEvents().subscribe(event => {
+            const target = event.target;
+            if (!this.#elRef.nativeElement.contains(target)) {
+                this.close();
+            }
+        });
+    }
+    close() {
+        this.#overlay.detach();
+        this.isOpen.set(false);
+    }
+    selectDay(date) {
+        const formatted = formatDate(date, "yyyy-MM-dd");
+        this.value.set(formatted);
+        this.valueChange.emit(formatted);
+        this.close();
+    }
+    prevMonth() {
+        const m = this.viewMonth();
+        if (m === 0) {
+            this.viewMonth.set(11);
+            this.viewYear.update(y => y - 1);
+        }
+        else {
+            this.viewMonth.set(m - 1);
+        }
+    }
+    nextMonth() {
+        const m = this.viewMonth();
+        if (m === 11) {
+            this.viewMonth.set(0);
+            this.viewYear.update(y => y + 1);
+        }
+        else {
+            this.viewMonth.set(m + 1);
+        }
+    }
+    prevYear() {
+        this.viewYear.update(y => y - 1);
+    }
+    nextYear() {
+        this.viewYear.update(y => y + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiDatePicker, isStandalone: true, selector: "ai-date-picker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, providers: [AiDatePickerOverlayService], viewQueries: [{ propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, static: true }], exportAs: ["aiDatePicker"], ngImport: i0, template: "<button type=\"button\" [class]=\"triggerClasses()\" [disabled]=\"disabled()\" (click)=\"toggle()\">\r\n    <span class=\"truncate\">\r\n        @if (displayValue()) {\r\n            {{ displayValue() }}\r\n        } @else {\r\n            <span class=\"text-muted-foreground\">{{ placeholder() }}</span>\r\n        }\r\n    </span>\r\n    <ai-icon icon=\"calendar\" size=\"default\" class=\"text-muted-foreground\" />\r\n</button>\r\n\r\n<ng-template #calendarTemplate>\r\n    <div [class]=\"calendarClasses()\">\r\n        <div class=\"flex items-center justify-between mb-2\">\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"prevYear()\">\r\n                <ai-icon icon=\"arrow-left-double\" size=\"sm\" />\r\n            </button>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"prevMonth()\">\r\n                <ai-icon icon=\"arrow-left-s\" size=\"sm\" />\r\n            </button>\r\n            <span class=\"text-sm font-medium\">{{ monthLabel() }}</span>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"nextMonth()\">\r\n                <ai-icon icon=\"arrow-right-s\" size=\"sm\" />\r\n            </button>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"nextYear()\">\r\n                <ai-icon icon=\"arrow-right-double\" size=\"sm\" />\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"grid grid-cols-7 gap-1 text-center mb-1\">\r\n            @for (day of weekdays; track $index) {\r\n                <div class=\"text-xs font-medium text-muted-foreground py-1\">{{ day }}</div>\r\n            }\r\n        </div>\r\n\r\n            @for (week of calendarMonth().weeks; track $index) {\r\n                <div class=\"grid grid-cols-7 gap-1\">\r\n                @for (day of week; track day.date.getTime()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"day.isDisabled\"\r\n                        [class]=\"[\r\n                            'inline-flex items-center justify-center size-8 rounded-md text-sm transition-colors',\r\n                            !day.isCurrentMonth ? 'text-muted-foreground/40' : '',\r\n                            day.isToday && !day.isSelected ? 'text-primary font-bold' : '', \r\n                            day.isSelected ? 'bg-primary text-primary-foreground' : '', \r\n                            day.isDisabled ? 'pointer-events-none opacity-50' : 'hover:bg-primary hover:text-primary-foreground',\r\n                            !day.isSelected && !day.isDisabled ? 'hover:bg-primary hover:text-primary-foreground' : '',\r\n                        ].join(' ')\"\r\n                        (click)=\"selectDay(day.date)\">\r\n                        {{ day.day }}\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: AiIcon, selector: "ai-icon, [ai-icon]", inputs: ["icon", "size", "type", "disabled", "class"], exportAs: ["aiIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiDatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-date-picker", exportAs: "aiDatePicker", imports: [AiIcon], providers: [AiDatePickerOverlayService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button type=\"button\" [class]=\"triggerClasses()\" [disabled]=\"disabled()\" (click)=\"toggle()\">\r\n    <span class=\"truncate\">\r\n        @if (displayValue()) {\r\n            {{ displayValue() }}\r\n        } @else {\r\n            <span class=\"text-muted-foreground\">{{ placeholder() }}</span>\r\n        }\r\n    </span>\r\n    <ai-icon icon=\"calendar\" size=\"default\" class=\"text-muted-foreground\" />\r\n</button>\r\n\r\n<ng-template #calendarTemplate>\r\n    <div [class]=\"calendarClasses()\">\r\n        <div class=\"flex items-center justify-between mb-2\">\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"prevYear()\">\r\n                <ai-icon icon=\"arrow-left-double\" size=\"sm\" />\r\n            </button>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"prevMonth()\">\r\n                <ai-icon icon=\"arrow-left-s\" size=\"sm\" />\r\n            </button>\r\n            <span class=\"text-sm font-medium\">{{ monthLabel() }}</span>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"nextMonth()\">\r\n                <ai-icon icon=\"arrow-right-s\" size=\"sm\" />\r\n            </button>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"nextYear()\">\r\n                <ai-icon icon=\"arrow-right-double\" size=\"sm\" />\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"grid grid-cols-7 gap-1 text-center mb-1\">\r\n            @for (day of weekdays; track $index) {\r\n                <div class=\"text-xs font-medium text-muted-foreground py-1\">{{ day }}</div>\r\n            }\r\n        </div>\r\n\r\n            @for (week of calendarMonth().weeks; track $index) {\r\n                <div class=\"grid grid-cols-7 gap-1\">\r\n                @for (day of week; track day.date.getTime()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"day.isDisabled\"\r\n                        [class]=\"[\r\n                            'inline-flex items-center justify-center size-8 rounded-md text-sm transition-colors',\r\n                            !day.isCurrentMonth ? 'text-muted-foreground/40' : '',\r\n                            day.isToday && !day.isSelected ? 'text-primary font-bold' : '', \r\n                            day.isSelected ? 'bg-primary text-primary-foreground' : '', \r\n                            day.isDisabled ? 'pointer-events-none opacity-50' : 'hover:bg-primary hover:text-primary-foreground',\r\n                            !day.isSelected && !day.isDisabled ? 'hover:bg-primary hover:text-primary-foreground' : '',\r\n                        ].join(' ')\"\r\n                        (click)=\"selectDay(day.date)\">\r\n                        {{ day.day }}\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n" }]
+        }], propDecorators: { calendarTemplate: [{
+                type: ViewChild,
+                args: ["calendarTemplate", { static: true }]
+            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+//# sourceMappingURL=date-picker.js.map

package/esm2022/lib/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/date-picker/date-picker.ts","../../../../../../../libs/ai-ui/src/lib/components/date-picker/date-picker.html"],"names":[],"mappings":"AAEA,OAAO,EACH,uBAAuB,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,UAAU,EACV,MAAM,EACN,KAAK,EACL,KAAK,EAEL,MAAM,EACN,MAAM,EACN,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,iBAAiB,GACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC/F,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;;AAWhH,MAAM,OAAO,YAAY;IACZ,QAAQ,GAAG,MAAM,CAAC,0BAA0B,CAAC,CAAC;IAC9C,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACjC,MAAM,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IACzC,IAAI,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAEQ,gBAAgB,CAAqB;IAE7E,EAAE,GAAG,KAAK,CAAS,EAAE,8CAAC,CAAC;IACvB,WAAW,GAAG,KAAK,CAAS,kBAAkB,uDAAC,CAAC;IAChD,MAAM,GAAG,KAAK,CAAS,YAAY,kDAAC,CAAC;IACrC,OAAO,GAAG,KAAK,CAAS,EAAE,mDAAC,CAAC;IAC5B,OAAO,GAAG,KAAK,CAAS,EAAE,mDAAC,CAAC;IAC5B,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC,CAAC;IACjC,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAE9B,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC,CAAC;IAE1B,WAAW,GAAG,MAAM,EAAU,CAAC;IAErB,MAAM,GAAG,MAAM,CAAC,KAAK,kDAAC,CAAC;IACvB,QAAQ,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,oDAAC,CAAC;IAC5C,SAAS,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,QAAQ,EAAE,qDAAC,CAAC;IAC1C,QAAQ,GAAG,gBAAgB,EAAE,CAAC;IAE9B,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,wDAAC,CAAC;IAEvD,aAAa,GAAG,QAAQ,CAAC,GAAG,EAAE,CAC7C,kBAAkB,CACd,IAAI,CAAC,QAAQ,EAAE,EACf,IAAI,CAAC,SAAS,EAAE,EAChB,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,EACnE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CACtE,yDACJ,CAAC;IAEiB,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,sDAAC,CAAC;IAErF,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvD,CAAC,wDAAC,CAAC;IAEgB,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,yBAAyB,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,0DAAC,CAAC;IAEtH,eAAe,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,0BAA0B,EAAE,CAAC,2DAAC,CAAC;IAEhG,QAAQ;QACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAC9D,CAAC;IAES,MAAM;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,OAAO;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,IAAI,EAAE,CAAC;QAChB,CAAC;IACL,CAAC;IAES,IAAI;QACV,IAAI,IAAI,CAAC,MAAM,EAAE;YAAE,OAAO;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACjC,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAEtB,IAAI,CAAC,QAAQ,CAAC,oBAAoB,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YACnD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC9C,IAAI,CAAC,KAAK,EAAE,CAAC;YACjB,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAES,KAAK;QACX,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACvB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAES,SAAS,CAAC,IAAU;QAC1B,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QACjD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC;IAES,SAAS;QACf,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3B,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACV,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9B,CAAC;IACL,CAAC;IAES,SAAS;QACf,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3B,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9B,CAAC;IACL,CAAC;IAES,QAAQ;QACd,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACrC,CAAC;IAES,QAAQ;QACd,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACrC,CAAC;uGAtHQ,YAAY;2FAAZ,YAAY,ymCALV,CAAC,0BAA0B,CAAC,0LC9B3C,ouGAyDA,4CD5Bc,MAAM;;2FAMP,YAAY;kBATxB,SAAS;+BACI,gBAAgB,YAChB,cAAc,WACf,CAAC,MAAM,CAAC,aACN,CAAC,0BAA0B,CAAC,mBAEtB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI;;sBAQpC,SAAS;uBAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport {\r\n    ChangeDetectionStrategy,\r\n    Component,\r\n    computed,\r\n    DestroyRef,\r\n    ElementRef,\r\n    inject,\r\n    input,\r\n    model,\r\n    OnInit,\r\n    output,\r\n    signal,\r\n    TemplateRef,\r\n    ViewChild,\r\n    ViewContainerRef,\r\n    ViewEncapsulation,\r\n} from \"@angular/core\";\r\n\r\nimport { mergeClasses } from \"../../core\";\r\nimport { AiIcon } from \"../icon/icon.component\";\r\nimport { AiDatePickerOverlayService } from \"./date-picker-overlay.service\";\r\nimport { datePickerCalendarVariants, datePickerTriggerVariants } from \"./date-picker.variants\";\r\nimport { buildCalendarMonth, formatDate, getMonthLabel, getWeekdayLabels, parseDate } from \"./date-picker.util\";\r\n\r\n@Component({\r\n    selector: \"ai-date-picker\",\r\n    exportAs: \"aiDatePicker\",\r\n    imports: [AiIcon],\r\n    providers: [AiDatePickerOverlayService],\r\n    templateUrl: \"./date-picker.html\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class AiDatePicker implements OnInit {\r\n    readonly #overlay = inject(AiDatePickerOverlayService);\r\n    readonly #destroyRef = inject(DestroyRef);\r\n    readonly #elRef = inject(ElementRef<HTMLElement>);\r\n    readonly #vcr = inject(ViewContainerRef);\r\n\r\n    @ViewChild(\"calendarTemplate\", { static: true }) calendarTemplate!: TemplateRef<void>;\r\n\r\n    readonly id = input<string>(\"\");\r\n    readonly placeholder = input<string>(\"Selecione a data\");\r\n    readonly format = input<string>(\"yyyy-MM-dd\");\r\n    readonly minDate = input<string>(\"\");\r\n    readonly maxDate = input<string>(\"\");\r\n    readonly disabled = input<boolean>(false);\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    readonly value = model<string>(\"\");\r\n\r\n    readonly valueChange = output<string>();\r\n\r\n    protected readonly isOpen = signal(false);\r\n    protected readonly viewYear = signal(new Date().getFullYear());\r\n    protected readonly viewMonth = signal(new Date().getMonth());\r\n    protected readonly weekdays = getWeekdayLabels();\r\n\r\n    protected readonly selectedDate = computed(() => parseDate(this.value()));\r\n\r\n    protected readonly calendarMonth = computed(() =>\r\n        buildCalendarMonth(\r\n            this.viewYear(),\r\n            this.viewMonth(),\r\n            this.selectedDate(),\r\n            this.minDate() ? parseDate(this.minDate()) ?? undefined : undefined,\r\n            this.maxDate() ? parseDate(this.maxDate()) ?? undefined : undefined,\r\n        ),\r\n    );\r\n\r\n    protected readonly monthLabel = computed(() => `${getMonthLabel(this.viewMonth())} ${this.viewYear()}`);\r\n\r\n    protected readonly displayValue = computed(() => {\r\n        const date = this.selectedDate();\r\n        return date ? formatDate(date, this.format()) : \"\";\r\n    });\r\n\r\n    protected readonly triggerClasses = computed(() => mergeClasses(datePickerTriggerVariants({ disabled: this.disabled() }), this.class()));\r\n\r\n    protected readonly calendarClasses = computed(() => mergeClasses(datePickerCalendarVariants()));\r\n\r\n    ngOnInit() {\r\n        this.#overlay.create(this.#elRef);\r\n        this.#destroyRef.onDestroy(() => this.#overlay.destroy());\r\n    }\r\n\r\n    protected toggle() {\r\n        if (this.disabled()) return;\r\n        if (this.isOpen()) {\r\n            this.close();\r\n        } else {\r\n            this.open();\r\n        }\r\n    }\r\n\r\n    protected open() {\r\n        if (this.isOpen()) return;\r\n        const date = this.selectedDate();\r\n        if (date) {\r\n            this.viewYear.set(date.getFullYear());\r\n            this.viewMonth.set(date.getMonth());\r\n        }\r\n        this.#overlay.attach(this.calendarTemplate, this.#vcr);\r\n        this.isOpen.set(true);\r\n\r\n        this.#overlay.outsidePointerEvents().subscribe(event => {\r\n            const target = event.target as HTMLElement;\r\n            if (!this.#elRef.nativeElement.contains(target)) {\r\n                this.close();\r\n            }\r\n        });\r\n    }\r\n\r\n    protected close() {\r\n        this.#overlay.detach();\r\n        this.isOpen.set(false);\r\n    }\r\n\r\n    protected selectDay(date: Date) {\r\n        const formatted = formatDate(date, \"yyyy-MM-dd\");\r\n        this.value.set(formatted);\r\n        this.valueChange.emit(formatted);\r\n        this.close();\r\n    }\r\n\r\n    protected prevMonth() {\r\n        const m = this.viewMonth();\r\n        if (m === 0) {\r\n            this.viewMonth.set(11);\r\n            this.viewYear.update(y => y - 1);\r\n        } else {\r\n            this.viewMonth.set(m - 1);\r\n        }\r\n    }\r\n\r\n    protected nextMonth() {\r\n        const m = this.viewMonth();\r\n        if (m === 11) {\r\n            this.viewMonth.set(0);\r\n            this.viewYear.update(y => y + 1);\r\n        } else {\r\n            this.viewMonth.set(m + 1);\r\n        }\r\n    }\r\n\r\n    protected prevYear() {\r\n        this.viewYear.update(y => y - 1);\r\n    }\r\n\r\n    protected nextYear() {\r\n        this.viewYear.update(y => y + 1);\r\n    }\r\n}\r\n","<button type=\"button\" [class]=\"triggerClasses()\" [disabled]=\"disabled()\" (click)=\"toggle()\">\r\n    <span class=\"truncate\">\r\n        @if (displayValue()) {\r\n            {{ displayValue() }}\r\n        } @else {\r\n            <span class=\"text-muted-foreground\">{{ placeholder() }}</span>\r\n        }\r\n    </span>\r\n    <ai-icon icon=\"calendar\" size=\"default\" class=\"text-muted-foreground\" />\r\n</button>\r\n\r\n<ng-template #calendarTemplate>\r\n    <div [class]=\"calendarClasses()\">\r\n        <div class=\"flex items-center justify-between mb-2\">\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"prevYear()\">\r\n                <ai-icon icon=\"arrow-left-double\" size=\"sm\" />\r\n            </button>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"prevMonth()\">\r\n                <ai-icon icon=\"arrow-left-s\" size=\"sm\" />\r\n            </button>\r\n            <span class=\"text-sm font-medium\">{{ monthLabel() }}</span>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"nextMonth()\">\r\n                <ai-icon icon=\"arrow-right-s\" size=\"sm\" />\r\n            </button>\r\n            <button type=\"button\" class=\"inline-flex items-center justify-center size-7 rounded-md hover:bg-primary hover:text-primary-foreground\" (click)=\"nextYear()\">\r\n                <ai-icon icon=\"arrow-right-double\" size=\"sm\" />\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"grid grid-cols-7 gap-1 text-center mb-1\">\r\n            @for (day of weekdays; track $index) {\r\n                <div class=\"text-xs font-medium text-muted-foreground py-1\">{{ day }}</div>\r\n            }\r\n        </div>\r\n\r\n            @for (week of calendarMonth().weeks; track $index) {\r\n                <div class=\"grid grid-cols-7 gap-1\">\r\n                @for (day of week; track day.date.getTime()) {\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"day.isDisabled\"\r\n                        [class]=\"[\r\n                            'inline-flex items-center justify-center size-8 rounded-md text-sm transition-colors',\r\n                            !day.isCurrentMonth ? 'text-muted-foreground/40' : '',\r\n                            day.isToday && !day.isSelected ? 'text-primary font-bold' : '', \r\n                            day.isSelected ? 'bg-primary text-primary-foreground' : '', \r\n                            day.isDisabled ? 'pointer-events-none opacity-50' : 'hover:bg-primary hover:text-primary-foreground',\r\n                            !day.isSelected && !day.isDisabled ? 'hover:bg-primary hover:text-primary-foreground' : '',\r\n                        ].join(' ')\"\r\n                        (click)=\"selectDay(day.date)\">\r\n                        {{ day.day }}\r\n                    </button>\r\n                }\r\n            </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n"]}

package/esm2022/lib/components/date-picker/date-picker.util.js

@@ -0,0 +1,71 @@
+const WEEKDAY_LABELS = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
+const MONTH_LABELS = [
+    "Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho",
+    "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro",
+];
+export function getWeekdayLabels() {
+    return WEEKDAY_LABELS;
+}
+export function getMonthLabel(month) {
+    return MONTH_LABELS[month];
+}
+export function buildCalendarMonth(year, month, selectedDate, minDate, maxDate) {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const firstDay = new Date(year, month, 1);
+    const startDay = new Date(firstDay);
+    startDay.setDate(startDay.getDate() - startDay.getDay());
+    const weeks = [];
+    const current = new Date(startDay);
+    for (let w = 0; w < 6; w++) {
+        const week = [];
+        for (let d = 0; d < 7; d++) {
+            const date = new Date(current);
+            date.setHours(0, 0, 0, 0);
+            let isDisabled = false;
+            if (minDate) {
+                const min = new Date(minDate);
+                min.setHours(0, 0, 0, 0);
+                isDisabled = date < min;
+            }
+            if (maxDate && !isDisabled) {
+                const max = new Date(maxDate);
+                max.setHours(0, 0, 0, 0);
+                isDisabled = date > max;
+            }
+            week.push({
+                date,
+                day: date.getDate(),
+                isCurrentMonth: date.getMonth() === month,
+                isToday: date.getTime() === today.getTime(),
+                isSelected: selectedDate ? date.getTime() === selectedDate.getTime() : false,
+                isDisabled,
+            });
+            current.setDate(current.getDate() + 1);
+        }
+        weeks.push(week);
+    }
+    return { year, month, weeks };
+}
+export function formatDate(date, format) {
+    if (!date)
+        return "";
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    switch (format) {
+        case "yyyy-MM-dd":
+            return `${y}-${m}-${d}`;
+        case "dd/MM/yyyy":
+            return `${d}/${m}/${y}`;
+        default:
+            return `${y}-${m}-${d}`;
+    }
+}
+export function parseDate(value) {
+    if (!value)
+        return null;
+    const date = new Date(value + "T00:00:00");
+    return isNaN(date.getTime()) ? null : date;
+}
+//# sourceMappingURL=date-picker.util.js.map

package/esm2022/lib/components/date-picker/date-picker.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.util.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/date-picker/date-picker.util.ts"],"names":[],"mappings":"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","sourcesContent":["export interface AiCalendarDay {\r\n    date: Date;\r\n    day: number;\r\n    isCurrentMonth: boolean;\r\n    isToday: boolean;\r\n    isSelected: boolean;\r\n    isDisabled: boolean;\r\n}\r\n\r\nexport interface AiCalendarMonth {\r\n    year: number;\r\n    month: number;\r\n    weeks: AiCalendarDay[][];\r\n}\r\n\r\nconst WEEKDAY_LABELS = [\"Dom\", \"Seg\", \"Ter\", \"Qua\", \"Qui\", \"Sex\", \"Sáb\"];\r\nconst MONTH_LABELS = [\r\n    \"Janeiro\", \"Fevereiro\", \"Março\", \"Abril\", \"Maio\", \"Junho\",\r\n    \"Julho\", \"Agosto\", \"Setembro\", \"Outubro\", \"Novembro\", \"Dezembro\",\r\n];\r\n\r\nexport function getWeekdayLabels(): string[] {\r\n    return WEEKDAY_LABELS;\r\n}\r\n\r\nexport function getMonthLabel(month: number): string {\r\n    return MONTH_LABELS[month];\r\n}\r\n\r\nexport function buildCalendarMonth(year: number, month: number, selectedDate: Date | null, minDate?: Date, maxDate?: Date): AiCalendarMonth {\r\n    const today = new Date();\r\n    today.setHours(0, 0, 0, 0);\r\n\r\n    const firstDay = new Date(year, month, 1);\r\n    const startDay = new Date(firstDay);\r\n    startDay.setDate(startDay.getDate() - startDay.getDay());\r\n\r\n    const weeks: AiCalendarDay[][] = [];\r\n\r\n    const current = new Date(startDay);\r\n    for (let w = 0; w < 6; w++) {\r\n        const week: AiCalendarDay[] = [];\r\n        for (let d = 0; d < 7; d++) {\r\n            const date = new Date(current);\r\n            date.setHours(0, 0, 0, 0);\r\n\r\n            let isDisabled = false;\r\n            if (minDate) {\r\n                const min = new Date(minDate);\r\n                min.setHours(0, 0, 0, 0);\r\n                isDisabled = date < min;\r\n            }\r\n            if (maxDate && !isDisabled) {\r\n                const max = new Date(maxDate);\r\n                max.setHours(0, 0, 0, 0);\r\n                isDisabled = date > max;\r\n            }\r\n\r\n            week.push({\r\n                date,\r\n                day: date.getDate(),\r\n                isCurrentMonth: date.getMonth() === month,\r\n                isToday: date.getTime() === today.getTime(),\r\n                isSelected: selectedDate ? date.getTime() === selectedDate.getTime() : false,\r\n                isDisabled,\r\n            });\r\n            current.setDate(current.getDate() + 1);\r\n        }\r\n        weeks.push(week);\r\n    }\r\n\r\n    return { year, month, weeks };\r\n}\r\n\r\nexport function formatDate(date: Date | null, format: string): string {\r\n    if (!date) return \"\";\r\n    const y = date.getFullYear();\r\n    const m = String(date.getMonth() + 1).padStart(2, \"0\");\r\n    const d = String(date.getDate()).padStart(2, \"0\");\r\n\r\n    switch (format) {\r\n        case \"yyyy-MM-dd\":\r\n            return `${y}-${m}-${d}`;\r\n        case \"dd/MM/yyyy\":\r\n            return `${d}/${m}/${y}`;\r\n        default:\r\n            return `${y}-${m}-${d}`;\r\n    }\r\n}\r\n\r\nexport function parseDate(value: string): Date | null {\r\n    if (!value) return null;\r\n    const date = new Date(value + \"T00:00:00\");\r\n    return isNaN(date.getTime()) ? null : date;\r\n}\r\n"]}

package/esm2022/lib/components/date-picker/date-picker.variants.js

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority";
+export const datePickerTriggerVariants = cva("inline-flex items-center justify-between gap-2 rounded-lg border-2 px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background w-full cursor-pointer", {
+    variants: {
+        error: {
+            true: "border-destructive text-destructive",
+            false: "border-input text-muted-foreground hover:border-primary",
+        },
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-not-allowed",
+        },
+    },
+    defaultVariants: {
+        error: false,
+    },
+});
+export const datePickerCalendarVariants = cva("rounded-lg border bg-background p-3 text-muted-foreground shadow-md animate-in fade-in-0 zoom-in-95");
+//# sourceMappingURL=date-picker.variants.js.map

package/esm2022/lib/components/date-picker/date-picker.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/date-picker/date-picker.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CACxC,uQAAuQ,EACvQ;IACI,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE,qCAAqC;YAC3C,KAAK,EAAE,yDAAyD;SACnE;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,mDAAmD;SAC5D;KACJ;IACD,eAAe,EAAE;QACb,KAAK,EAAE,KAAK;KACf;CACJ,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC,qGAAqG,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const datePickerTriggerVariants = cva(\r\n    \"inline-flex items-center justify-between gap-2 rounded-lg border-2 px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background w-full cursor-pointer\",\r\n    {\r\n        variants: {\r\n            error: {\r\n                true: \"border-destructive text-destructive\",\r\n                false: \"border-input text-muted-foreground hover:border-primary\",\r\n            },\r\n            disabled: {\r\n                true: \"pointer-events-none opacity-50 cursor-not-allowed\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            error: false,\r\n        },\r\n    },\r\n);\r\n\r\nexport const datePickerCalendarVariants = cva(\"rounded-lg border bg-background p-3 text-muted-foreground shadow-md animate-in fade-in-0 zoom-in-95\");\r\n\r\nexport type DatePickerTriggerVariants = VariantProps<typeof datePickerTriggerVariants>;\r\n"]}

package/esm2022/lib/components/date-picker/demo/date-picker.js

@@ -0,0 +1,21 @@
+import { DemoDatePickerDefaultComponent } from "./default";
+import { DemoDatePickerDisabledComponent } from "./disabled";
+import { DemoDatePickerRangeComponent } from "./range";
+export const DATE_PICKER = {
+    componentName: "date-picker",
+    examples: [
+        {
+            name: "default",
+            component: DemoDatePickerDefaultComponent,
+        },
+        {
+            name: "range",
+            component: DemoDatePickerRangeComponent,
+        },
+        {
+            name: "disabled",
+            component: DemoDatePickerDisabledComponent,
+        },
+    ],
+};
+//# sourceMappingURL=date-picker.js.map

package/esm2022/lib/components/date-picker/demo/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/date-picker/demo/date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,+BAA+B,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,aAAa,EAAE,aAAa;IAC5B,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,8BAA8B;SAC5C;QACD;YACI,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,4BAA4B;SAC1C;QACD;YACI,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE,+BAA+B;SAC7C;KACJ;CACJ,CAAC","sourcesContent":["import { DemoDatePickerDefaultComponent } from \"./default\";\r\nimport { DemoDatePickerDisabledComponent } from \"./disabled\";\r\nimport { DemoDatePickerRangeComponent } from \"./range\";\r\n\r\nexport const DATE_PICKER = {\r\n    componentName: \"date-picker\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoDatePickerDefaultComponent,\r\n        },\r\n        {\r\n            name: \"range\",\r\n            component: DemoDatePickerRangeComponent,\r\n        },\r\n        {\r\n            name: \"disabled\",\r\n            component: DemoDatePickerDisabledComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/date-picker/demo/default.js

@@ -0,0 +1,30 @@
+import { Component } from "@angular/core";
+import { AiDatePicker } from "../date-picker";
+import * as i0 from "@angular/core";
+export class DemoDatePickerDefaultComponent {
+    selectedDate = "";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDatePickerDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoDatePickerDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-70">
+            <ai-date-picker placeholder="Selecione a data" [(value)]="selectedDate" />
+            <p class="text-sm text-muted-foreground">
+                Valor selecionado: <strong>{{ selectedDate || "nenhum" }}</strong>
+            </p>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiDatePicker, selector: "ai-date-picker", inputs: ["id", "placeholder", "format", "minDate", "maxDate", "disabled", "class", "value"], outputs: ["valueChange"], exportAs: ["aiDatePicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDatePickerDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiDatePicker],
+                    template: `
+        <div class="flex flex-col gap-4 w-70">
+            <ai-date-picker placeholder="Selecione a data" [(value)]="selectedDate" />
+            <p class="text-sm text-muted-foreground">
+                Valor selecionado: <strong>{{ selectedDate || "nenhum" }}</strong>
+            </p>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/date-picker/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/date-picker/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;;AAa9C,MAAM,OAAO,8BAA8B;IACvC,YAAY,GAAG,EAAE,CAAC;uGADT,8BAA8B;2FAA9B,8BAA8B,wEAT7B;;;;;;;KAOT,4DARS,YAAY;;2FAUb,8BAA8B;kBAX1C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,QAAQ,EAAE;;;;;;;KAOT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiDatePicker } from \"../date-picker\";\r\n\r\n@Component({\r\n    imports: [AiDatePicker],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-70\">\r\n            <ai-date-picker placeholder=\"Selecione a data\" [(value)]=\"selectedDate\" />\r\n            <p class=\"text-sm text-muted-foreground\">\r\n                Valor selecionado: <strong>{{ selectedDate || \"nenhum\" }}</strong>\r\n            </p>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoDatePickerDefaultComponent {\r\n    selectedDate = \"\";\r\n}\r\n"]}

package/esm2022/lib/components/date-picker/demo/disabled.js

@@ -0,0 +1,23 @@
+import { Component } from "@angular/core";
+import { AiDatePicker } from "../date-picker";
+import * as i0 from "@angular/core";
+export class DemoDatePickerDisabledComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDatePickerDisabledComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoDatePickerDisabledComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-70">
+            <ai-date-picker placeholder="Desabilitado" [disabled]="true" />
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiDatePicker, selector: "ai-date-picker", inputs: ["id", "placeholder", "format", "minDate", "maxDate", "disabled", "class", "value"], outputs: ["valueChange"], exportAs: ["aiDatePicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDatePickerDisabledComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiDatePicker],
+                    template: `
+        <div class="flex flex-col gap-4 w-70">
+            <ai-date-picker placeholder="Desabilitado" [disabled]="true" />
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=disabled.js.map

package/esm2022/lib/components/date-picker/demo/disabled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disabled.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/date-picker/demo/disabled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;;AAU9C,MAAM,OAAO,+BAA+B;uGAA/B,+BAA+B;2FAA/B,+BAA+B,wEAN9B;;;;KAIT,4DALS,YAAY;;2FAOb,+BAA+B;kBAR3C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,QAAQ,EAAE;;;;KAIT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiDatePicker } from \"../date-picker\";\r\n\r\n@Component({\r\n    imports: [AiDatePicker],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-70\">\r\n            <ai-date-picker placeholder=\"Desabilitado\" [disabled]=\"true\" />\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoDatePickerDisabledComponent {}\r\n"]}

package/esm2022/lib/components/date-picker/demo/range.js

@@ -0,0 +1,30 @@
+import { Component } from "@angular/core";
+import { AiDatePicker } from "../date-picker";
+import * as i0 from "@angular/core";
+export class DemoDatePickerRangeComponent {
+    selectedDate = "";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDatePickerRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoDatePickerRangeComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4 w-70">
+            <ai-date-picker placeholder="Data com mínimo e máximo" minDate="2026-01-01" maxDate="2026-12-31" [(value)]="selectedDate" />
+            <p class="text-sm text-muted-foreground">
+                Valor selecionado: <strong>{{ selectedDate || "nenhum" }}</strong>
+            </p>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiDatePicker, selector: "ai-date-picker", inputs: ["id", "placeholder", "format", "minDate", "maxDate", "disabled", "class", "value"], outputs: ["valueChange"], exportAs: ["aiDatePicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDatePickerRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiDatePicker],
+                    template: `
+        <div class="flex flex-col gap-4 w-70">
+            <ai-date-picker placeholder="Data com mínimo e máximo" minDate="2026-01-01" maxDate="2026-12-31" [(value)]="selectedDate" />
+            <p class="text-sm text-muted-foreground">
+                Valor selecionado: <strong>{{ selectedDate || "nenhum" }}</strong>
+            </p>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=range.js.map

package/esm2022/lib/components/date-picker/demo/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/date-picker/demo/range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;;AAa9C,MAAM,OAAO,4BAA4B;IACrC,YAAY,GAAG,EAAE,CAAC;uGADT,4BAA4B;2FAA5B,4BAA4B,wEAT3B;;;;;;;KAOT,4DARS,YAAY;;2FAUb,4BAA4B;kBAXxC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,QAAQ,EAAE;;;;;;;KAOT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiDatePicker } from \"../date-picker\";\r\n\r\n@Component({\r\n    imports: [AiDatePicker],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4 w-70\">\r\n            <ai-date-picker placeholder=\"Data com mínimo e máximo\" minDate=\"2026-01-01\" maxDate=\"2026-12-31\" [(value)]=\"selectedDate\" />\r\n            <p class=\"text-sm text-muted-foreground\">\r\n                Valor selecionado: <strong>{{ selectedDate || \"nenhum\" }}</strong>\r\n            </p>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoDatePickerRangeComponent {\r\n    selectedDate = \"\";\r\n}\r\n"]}

package/esm2022/lib/components/date-picker/index.js

@@ -0,0 +1,3 @@
+export * from "./date-picker";
+export * from "./demo/date-picker";
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/date-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/date-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from \"./date-picker\";\r\nexport * from \"./demo/date-picker\";\r\n"]}

package/esm2022/lib/components/dialog/demo/default.js

@@ -0,0 +1,108 @@
+import z from "zod";
+import { Component, inject, signal } from "@angular/core";
+import { form, FormField, validateStandardSchema } from "@angular/forms/signals";
+import { AiButton } from "../../button";
+import { AiInput, AiSelectImports } from "../../form-field";
+import { AI_DIALOG_DATA, AiDialogService } from "../dialog.service";
+import * as i0 from "@angular/core";
+import * as i1 from "../../form-field/select/select";
+import * as i2 from "../../form-field/select/select-item";
+export const userSchema = z.object({
+    name: z.string(),
+    email: z.email(),
+    skill: z.string(),
+});
+export class DemoDialogDefaultFormComponent {
+    data = inject(AI_DIALOG_DATA);
+    user = signal({
+        name: "",
+        email: "",
+        skill: "",
+    }, ...(ngDevMode ? [{ debugName: "user" }] : []));
+    skills = signal(["Angular", "TypeScript", "Nestjs", "Docker"], ...(ngDevMode ? [{ debugName: "skills" }] : []));
+    userForm = form(this.user, schema => {
+        validateStandardSchema(schema, userSchema);
+    });
+    ngAfterViewInit() {
+        if (this.data) {
+            this.user.set(this.data);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDialogDefaultFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DemoDialogDefaultFormComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <form class="w-full flex flex-col gap-y-4">
+            <ai-input class="w-full" label="Name" [formField]="userForm.name" />
+            <ai-input class="w-full" type="email" label="E-mail" [formField]="userForm.email" />
+
+            <ai-select class="w-full" placeholder="selected skills" [formField]="userForm.skill">
+                @for (item of skills(); track item) {
+                    <ng-container>
+                        <ai-select-item [value]="item">{{ item }}</ai-select-item>
+                    </ng-container>
+                }
+            </ai-select>
+
+            <div class="flex items-center justify-end"></div>
+        </form>
+    `, isInline: true, dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: AiInput, selector: "ai-input", inputs: ["id", "label", "placeholder", "type", "variant", "icon", "class", "value", "touched", "disabled", "invalid", "readonly", "required", "maxlength", "minlength", "errors", "strength", "mask", "maskConfig", "normalize", "normalizeConfig"], outputs: ["valueChange", "touchedChange", "changeIcon"], exportAs: ["aiInput"] }, { kind: "component", type: i1.AiSelect, selector: "ai-select", inputs: ["maxLabelCount", "multiple", "value", "disabled", "invalid", "readonly", "required", "label", "placeholder", "id", "touched", "class", "size", "selectedValue"], outputs: ["valueChange", "touchedChange", "selectedValueChange", "selectionChange"], exportAs: ["aiSelect"] }, { kind: "component", type: i2.AiSelectItem, selector: "ai-select-item, [ai-select-item]", inputs: ["value", "disabled", "class"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDialogDefaultFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [FormField, AiInput, AiSelectImports],
+                    template: `
+        <form class="w-full flex flex-col gap-y-4">
+            <ai-input class="w-full" label="Name" [formField]="userForm.name" />
+            <ai-input class="w-full" type="email" label="E-mail" [formField]="userForm.email" />
+
+            <ai-select class="w-full" placeholder="selected skills" [formField]="userForm.skill">
+                @for (item of skills(); track item) {
+                    <ng-container>
+                        <ai-select-item [value]="item">{{ item }}</ai-select-item>
+                    </ng-container>
+                }
+            </ai-select>
+
+            <div class="flex items-center justify-end"></div>
+        </form>
+    `,
+                }]
+        }] });
+export class DemoDialogDefaultComponent {
+    #dialogService = inject(AiDialogService);
+    openDialog() {
+        this.#dialogService.create({
+            component: DemoDialogDefaultFormComponent,
+            title: "Update User",
+            description: "Update user information",
+            data: {
+                name: "John Doe",
+                email: "johndoe@example.com",
+                skill: "Angular",
+            },
+            width: "425px",
+            confirmText: "Save",
+            onConfirm: instance => {
+                console.log("Confirmed with data:", instance.user());
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDialogDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoDialogDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="w-150 flex items-center justify-center">
+            <ai-button (click)="openDialog()">Edit user</ai-button>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiButton, selector: "ai-button, button[ai-button], a[ai-button]", inputs: ["variant", "size", "shape", "type", "fill", "class", "icon", "full", "loading", "disabled"], exportAs: ["aiButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoDialogDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiButton],
+                    template: `
+        <div class="w-150 flex items-center justify-center">
+            <ai-button (click)="openDialog()">Edit user</ai-button>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/dialog/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/dialog/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,KAAK,CAAC;AAEpB,OAAO,EAAiB,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEjF,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;;;AAEpE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE;IAChB,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE;IAChB,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE;CACpB,CAAC,CAAC;AAuBH,MAAM,OAAO,8BAA8B;IAC7B,IAAI,GAAY,MAAM,CAAC,cAAc,CAAY,CAAC;IAE5D,IAAI,GAAG,MAAM,CAAU;QACnB,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACZ,gDAAC,CAAC;IAEH,MAAM,GAAG,MAAM,CAAW,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,kDAAC,CAAC;IAEzE,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE;QAChC,sBAAsB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,eAAe;QACX,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAe,CAAC,CAAC;QACxC,CAAC;IACL,CAAC;uGAnBQ,8BAA8B;2FAA9B,8BAA8B,wEAjB7B;;;;;;;;;;;;;;;KAeT,4DAhBS,SAAS,+EAAE,OAAO;;2FAkBnB,8BAA8B;kBAnB1C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,CAAC;oBAC9C,QAAQ,EAAE;;;;;;;;;;;;;;;KAeT;iBACJ;;AA+BD,MAAM,OAAO,0BAA0B;IACnC,cAAc,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAEzC,UAAU;QACN,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;YACvB,SAAS,EAAE,8BAA8B;YACzC,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,yBAAyB;YACtC,IAAI,EAAE;gBACF,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,qBAAqB;gBAC5B,KAAK,EAAE,SAAS;aACR;YACZ,KAAK,EAAE,OAAO;YACd,WAAW,EAAE,MAAM;YACnB,SAAS,EAAE,QAAQ,CAAC,EAAE;gBAClB,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;YACzD,CAAC;SACJ,CAAC,CAAC;IACP,CAAC;uGAnBQ,0BAA0B;2FAA1B,0BAA0B,wEANzB;;;;KAIT,4DALS,QAAQ;;2FAOT,0BAA0B;kBARtC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,QAAQ,CAAC;oBACnB,QAAQ,EAAE;;;;KAIT;iBACJ","sourcesContent":["import z from \"zod\";\r\n\r\nimport { AfterViewInit, Component, inject, signal } from \"@angular/core\";\r\nimport { form, FormField, validateStandardSchema } from \"@angular/forms/signals\";\r\n\r\nimport { AiButton } from \"../../button\";\r\nimport { AiInput, AiSelectImports } from \"../../form-field\";\r\nimport { AI_DIALOG_DATA, AiDialogService } from \"../dialog.service\";\r\n\r\nexport const userSchema = z.object({\r\n    name: z.string(),\r\n    email: z.email(),\r\n    skill: z.string(),\r\n});\r\n\r\nexport type UserDto = z.infer<typeof userSchema>;\r\n\r\n@Component({\r\n    imports: [FormField, AiInput, AiSelectImports],\r\n    template: `\r\n        <form class=\"w-full flex flex-col gap-y-4\">\r\n            <ai-input class=\"w-full\" label=\"Name\" [formField]=\"userForm.name\" />\r\n            <ai-input class=\"w-full\" type=\"email\" label=\"E-mail\" [formField]=\"userForm.email\" />\r\n\r\n            <ai-select class=\"w-full\" placeholder=\"selected skills\" [formField]=\"userForm.skill\">\r\n                @for (item of skills(); track item) {\r\n                    <ng-container>\r\n                        <ai-select-item [value]=\"item\">{{ item }}</ai-select-item>\r\n                    </ng-container>\r\n                }\r\n            </ai-select>\r\n\r\n            <div class=\"flex items-center justify-end\"></div>\r\n        </form>\r\n    `,\r\n})\r\nexport class DemoDialogDefaultFormComponent implements AfterViewInit {\r\n    protected data: UserDto = inject(AI_DIALOG_DATA) as UserDto;\r\n\r\n    user = signal<UserDto>({\r\n        name: \"\",\r\n        email: \"\",\r\n        skill: \"\",\r\n    });\r\n\r\n    skills = signal<string[]>([\"Angular\", \"TypeScript\", \"Nestjs\", \"Docker\"]);\r\n\r\n    userForm = form(this.user, schema => {\r\n        validateStandardSchema(schema, userSchema);\r\n    });\r\n\r\n    ngAfterViewInit() {\r\n        if (this.data) {\r\n            this.user.set(this.data as UserDto);\r\n        }\r\n    }\r\n}\r\n\r\n@Component({\r\n    imports: [AiButton],\r\n    template: `\r\n        <div class=\"w-150 flex items-center justify-center\">\r\n            <ai-button (click)=\"openDialog()\">Edit user</ai-button>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoDialogDefaultComponent {\r\n    #dialogService = inject(AiDialogService);\r\n\r\n    openDialog() {\r\n        this.#dialogService.create({\r\n            component: DemoDialogDefaultFormComponent,\r\n            title: \"Update User\",\r\n            description: \"Update user information\",\r\n            data: {\r\n                name: \"John Doe\",\r\n                email: \"johndoe@example.com\",\r\n                skill: \"Angular\",\r\n            } as UserDto,\r\n            width: \"425px\",\r\n            confirmText: \"Save\",\r\n            onConfirm: instance => {\r\n                console.log(\"Confirmed with data:\", instance.user());\r\n            },\r\n        });\r\n    }\r\n}\r\n"]}

package/esm2022/lib/components/dialog/demo/dialog.js

@@ -0,0 +1,12 @@
+import { DemoDialogDefaultComponent } from "./default";
+export const DIALOG = {
+    componentName: "dialog",
+    componentType: "dialog",
+    examples: [
+        {
+            name: "default",
+            component: DemoDialogDefaultComponent,
+        },
+    ],
+};
+//# sourceMappingURL=dialog.js.map

package/esm2022/lib/components/dialog/demo/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/dialog/demo/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;AAEvD,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,aAAa,EAAE,QAAQ;IACvB,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,0BAA0B;SACxC;KACJ;CACJ,CAAC","sourcesContent":["import { DemoDialogDefaultComponent } from \"./default\";\r\n\r\nexport const DIALOG = {\r\n    componentName: \"dialog\",\r\n    componentType: \"dialog\",\r\n    examples: [\r\n        {\r\n            name: \"default\",\r\n            component: DemoDialogDefaultComponent,\r\n        },\r\n    ],\r\n};\r\n"]}