codexly-ui 0.19.8 → 0.20.0

package/fesm2022/codexly-ui.mjs

@@ -690,6 +690,7 @@ class ClxThemeService {
     /** Resolved border color for ClxCardComponent (outlined/elevated variants) — falls back to
      *  primaryColor when unset. Per-instance `[color]` input on clx-card still takes precedence. */
     cardBorderColor = computed(() => this._config().cardBorderColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "cardBorderColor" }] : /* istanbul ignore next */ []));
+    cardIconColor = computed(() => this._config().cardIconColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "cardIconColor" }] : /* istanbul ignore next */ []));
     /** Resolved divider/border color for ClxListComponent — falls back to primaryColor when unset.
      *  Per-instance `[color]` input on clx-list still takes precedence. */
     listBorderColor = computed(() => this._config().listBorderColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "listBorderColor" }] : /* istanbul ignore next */ []));
@@ -1624,6 +1625,11 @@ class ClxCardComponent {
     /** Optional secondary line under headerTitle. */
     headerSubtitle = input(undefined, ...(ngDevMode ? [{ debugName: "headerSubtitle" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.cardBorderColor(), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Header icon badge: explicit [color] → theme cardIconColor → primaryColor (same fallback chain
+     *  as clx-collapse / the form controls). */
+    _iconColor = computed(() => this.color() ?? this._themeSvc.cardIconColor(), ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
+    _iconWrapCls = computed(() => `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${resolveColor(this._iconColor()).bgMuted}`, ...(ngDevMode ? [{ debugName: "_iconWrapCls" }] : /* istanbul ignore next */ []));
+    _iconCls = computed(() => resolveColor(this._iconColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _titleClass = computed(() => `text-sm font-[${this._themeSvc.cardTitleStyle().weight}] text-clx-text-label leading-tight truncate`, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
     _headerActionsSlot = contentChild(ClxCardHeaderActionsDirective, ...(ngDevMode ? [{ debugName: "_headerActionsSlot" }] : /* istanbul ignore next */ []));
@@ -1679,8 +1685,8 @@ class ClxCardComponent {
       <div class="clx-card-header flex w-full items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <div class="flex items-center gap-3 min-w-0">
           @if (icon()) {
-            <div class="w-8 h-8 rounded-lg bg-clx-primary-subtle flex items-center justify-center shrink-0">
-              <span clx-icon [name]="icon()!" size="sm" class="text-clx-primary"></span>
+            <div [class]="_iconWrapCls()">
+              <span clx-icon [name]="icon()!" size="sm" [class]="_iconCls()"></span>
             </div>
           }
           <div class="flex flex-col min-w-0">
@@ -1731,8 +1737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="clx-card-header flex w-full items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <div class="flex items-center gap-3 min-w-0">
           @if (icon()) {
-            <div class="w-8 h-8 rounded-lg bg-clx-primary-subtle flex items-center justify-center shrink-0">
-              <span clx-icon [name]="icon()!" size="sm" class="text-clx-primary"></span>
+            <div [class]="_iconWrapCls()">
+              <span clx-icon [name]="icon()!" size="sm" [class]="_iconCls()"></span>
             </div>
           }
           <div class="flex flex-col min-w-0">
@@ -7704,7 +7710,7 @@ function isSameDay$1(a, b) {
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate();
 }
-function startOfDay$1(d) {
+function startOfDay$2(d) {
     return new Date(d.getFullYear(), d.getMonth(), d.getDate());
 }
 class ClxDatepickerComponent {
@@ -7801,10 +7807,10 @@ class ClxDatepickerComponent {
     _calendarDays = computed(() => {
         const year = this._cursorYear();
         const month = this._cursorMonth();
-        const today = startOfDay$1(new Date());
-        const selected = this._value() ? startOfDay$1(this._value()) : null;
-        const min = this.minDate() ? startOfDay$1(this.minDate()) : null;
-        const max = this.maxDate() ? startOfDay$1(this.maxDate()) : null;
+        const today = startOfDay$2(new Date());
+        const selected = this._value() ? startOfDay$2(this._value()) : null;
+        const min = this.minDate() ? startOfDay$2(this.minDate()) : null;
+        const max = this.maxDate() ? startOfDay$2(this.maxDate()) : null;
         const firstDay = new Date(year, month, 1);
         const lastDay = new Date(year, month + 1, 0);
         const days = [];
@@ -7876,15 +7882,15 @@ class ClxDatepickerComponent {
         this._cursorYear.set(y);
     }
     _selectDate(date) {
-        const d = startOfDay$1(date);
+        const d = startOfDay$2(date);
         this._value.set(d);
         this._onChange(d);
         this._closePanel();
     }
     _selectToday() {
-        const today = startOfDay$1(new Date());
-        const min = this.minDate() ? startOfDay$1(this.minDate()) : null;
-        const max = this.maxDate() ? startOfDay$1(this.maxDate()) : null;
+        const today = startOfDay$2(new Date());
+        const min = this.minDate() ? startOfDay$2(this.minDate()) : null;
+        const max = this.maxDate() ? startOfDay$2(this.maxDate()) : null;
         if ((min && today < min) || (max && today > max))
             return;
         this._selectDate(today);
@@ -7898,7 +7904,7 @@ class ClxDatepickerComponent {
     }
     writeValue(val) {
         this._cvaConnected = true;
-        const d = val ? startOfDay$1(val) : null;
+        const d = val ? startOfDay$2(val) : null;
         this._value.set(d);
         if (d) {
             this._cursorYear.set(d.getFullYear());
@@ -8421,7 +8427,7 @@ const MONTH_NAMES_ES = [
     'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
 ];
 const DAY_LABELS = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
-function startOfDay(d) {
+function startOfDay$1(d) {
     return new Date(d.getFullYear(), d.getMonth(), d.getDate());
 }
 function isSameDay(a, b) {
@@ -8449,9 +8455,9 @@ function addMonths(year, month, delta) {
     return { year: y, month: m };
 }
 function buildCalendar(year, month, minDate, maxDate) {
-    const today = startOfDay(new Date());
-    const min = minDate ? startOfDay(minDate) : null;
-    const max = maxDate ? startOfDay(maxDate) : null;
+    const today = startOfDay$1(new Date());
+    const min = minDate ? startOfDay$1(minDate) : null;
+    const max = maxDate ? startOfDay$1(maxDate) : null;
     const firstDay = new Date(year, month, 1);
     const lastDay = new Date(year, month + 1, 0);
     const days = [];
@@ -8471,8 +8477,8 @@ function buildCalendar(year, month, minDate, maxDate) {
     return days;
 }
 const DATE_PRESETS = [
-    { label: 'Hoy', range: () => { const t = startOfDay(new Date()); return { from: t, to: t }; } },
-    { label: 'Esta semana', range: () => { const t = startOfDay(new Date()); const d = t.getDay(); const f = new Date(t); f.setDate(t.getDate() - d); const e = new Date(f); e.setDate(f.getDate() + 6); return { from: f, to: e }; } },
+    { label: 'Hoy', range: () => { const t = startOfDay$1(new Date()); return { from: t, to: t }; } },
+    { label: 'Esta semana', range: () => { const t = startOfDay$1(new Date()); const d = t.getDay(); const f = new Date(t); f.setDate(t.getDate() - d); const e = new Date(f); e.setDate(f.getDate() + 6); return { from: f, to: e }; } },
     { label: 'Este mes', range: () => { const t = new Date(); return { from: new Date(t.getFullYear(), t.getMonth(), 1), to: new Date(t.getFullYear(), t.getMonth() + 1, 0) }; } },
     { label: 'Mes anterior', range: () => { const t = new Date(); return { from: new Date(t.getFullYear(), t.getMonth() - 1, 1), to: new Date(t.getFullYear(), t.getMonth(), 0) }; } },
     { label: 'Último trimestre', range: () => { const t = new Date(); const q = Math.floor(t.getMonth() / 3); return { from: new Date(t.getFullYear(), (q - 1) * 3, 1), to: new Date(t.getFullYear(), q * 3, 0) }; } },
@@ -8515,8 +8521,8 @@ class ClxDateRangePickerComponent {
             untracked(() => {
                 this._committed.set(v);
                 if (v) {
-                    this._draftFrom.set(startOfDay(v.from));
-                    this._draftTo.set(startOfDay(v.to));
+                    this._draftFrom.set(startOfDay$1(v.from));
+                    this._draftTo.set(startOfDay$1(v.to));
                     this._cursorYear.set(v.from.getFullYear());
                     this._cursorMonth.set(v.from.getMonth());
                 }
@@ -8585,7 +8591,7 @@ class ClxDateRangePickerComponent {
         const base = 'w-9 h-9 flex items-center justify-center text-sm transition-colors focus:outline-none relative';
         if (cell.isDisabled)
             return `${base} text-gray-200 cursor-not-allowed rounded-full`;
-        const d = startOfDay(cell.date);
+        const d = startOfDay$1(cell.date);
         const from = this._draftFrom();
         const to = this._draftTo();
         const hover = this._hoverDate();
@@ -8623,7 +8629,7 @@ class ClxDateRangePickerComponent {
     _formatShort(d) { return formatShort(d); }
     // ── Selection logic ────────────────────────────────────────────────────────
     _selectDate(date) {
-        const d = startOfDay(date);
+        const d = startOfDay$1(date);
         const from = this._draftFrom();
         // Reset and start new if no from, or both already set, or clicked before from
         if (!from || (from && this._draftTo()) || isBefore(d, from)) {
@@ -8638,7 +8644,7 @@ class ClxDateRangePickerComponent {
     }
     _onHover(date) {
         if (this._draftFrom() && !this._draftTo()) {
-            this._hoverDate.set(startOfDay(date));
+            this._hoverDate.set(startOfDay$1(date));
         }
     }
     _applyPreset(preset) {
@@ -8712,8 +8718,8 @@ class ClxDateRangePickerComponent {
         const r = val ?? null;
         this._committed.set(r);
         if (r) {
-            this._draftFrom.set(startOfDay(r.from));
-            this._draftTo.set(startOfDay(r.to));
+            this._draftFrom.set(startOfDay$1(r.from));
+            this._draftTo.set(startOfDay$1(r.to));
             this._cursorYear.set(r.from.getFullYear());
             this._cursorMonth.set(r.from.getMonth());
         }
@@ -16024,6 +16030,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], errorId: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorId", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
+/** Time formatting shared by clx-page-maintenance and clx-maintenance-banner (es-CO, 12 h). */
+const TIME = new Intl.DateTimeFormat('es-CO', { hour: 'numeric', minute: '2-digit' });
+const DAY = new Intl.DateTimeFormat('es-CO', { weekday: 'long', day: 'numeric', month: 'short' });
+function toDate(value) {
+    if (!value)
+        return null;
+    const d = value instanceof Date ? value : new Date(value);
+    return isNaN(d.getTime()) ? null : d;
+}
+/** "11:30 p. m." — empty string when there is no valid date. */
+function formatClxTime(value) {
+    const d = toDate(value);
+    return d ? TIME.format(d) : '';
+}
+/** "hoy de 11:00 p. m. a 11:30 p. m." · "mañana de …" · "el jueves, 23 oct de …" ·
+ *  spanning midnight: "hoy de 11:00 p. m. a mañana 1:00 a. m.". */
+function formatClxWindow(start, end, now = new Date()) {
+    const s = toDate(start);
+    const e = toDate(end);
+    if (!s || !e)
+        return '';
+    const day = (d) => {
+        const diff = Math.round((startOfDay(d) - startOfDay(now)) / 86_400_000);
+        if (diff === 0)
+            return 'hoy';
+        if (diff === 1)
+            return 'mañana';
+        return 'el ' + DAY.format(d);
+    };
+    const sameDay = startOfDay(s) === startOfDay(e);
+    return sameDay
+        ? `${day(s)} de ${TIME.format(s)} a ${TIME.format(e)}`
+        : `${day(s)} de ${TIME.format(s)} a ${day(e)} ${TIME.format(e)}`;
+}
+function startOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+
+/** Full-page "we're under maintenance" state (503). Same layout as clx-page-server-error, in the
+ *  brand yellow. No buttons: the host app removes it by itself when the service is back. */
+class ClxPageMaintenanceComponent {
+    title = input('Estamos en mantenimiento', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('Estamos actualizando la plataforma para darte un mejor servicio. Vuelve en unos minutos.', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Estimated end (ISO string or Date). Empty → no "Volvemos a las…" pill. */
+    until = input(null, ...(ngDevMode ? [{ debugName: "until" }] : /* istanbul ignore next */ []));
+    liveLabel = input('Esta página se actualiza sola cuando volvamos', ...(ngDevMode ? [{ debugName: "liveLabel" }] : /* istanbul ignore next */ []));
+    showCode = input(true, ...(ngDevMode ? [{ debugName: "showCode" }] : /* istanbul ignore next */ []));
+    untilLabel = computed(() => formatClxTime(this.until()), ...(ngDevMode ? [{ debugName: "untilLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageMaintenanceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageMaintenanceComponent, isStandalone: true, selector: "clx-page-maintenance", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, until: { classPropertyName: "until", publicName: "until", isSignal: true, isRequired: false, transformFunction: null }, liveLabel: { classPropertyName: "liveLabel", publicName: "liveLabel", isSignal: true, isRequired: false, transformFunction: null }, showCode: { classPropertyName: "showCode", publicName: "showCode", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-live": "polite" }, classAttribute: "flex flex-col items-center justify-center min-h-[60vh] px-6 text-center text-sm" }, ngImport: i0, template: `
+    <div class="w-20 h-20 rounded-2xl bg-yellow-50 flex items-center justify-center mb-6">
+      <span clx-icon name="build" size="xl" class="text-yellow-500"></span>
+    </div>
+
+    @if (showCode()) {
+      <p class="text-[50px] font-black text-clx-text-faint leading-none select-none mb-2">503</p>
+    }
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
+    <p class="text-clx-text-subtle max-w-sm mb-6">{{ description() }}</p>
+
+    @if (untilLabel()) {
+      <div class="inline-flex items-center gap-2 rounded-full border border-clx-border-soft bg-clx-surface
+                  px-3.5 py-1.5 font-semibold text-clx-text-label mb-5">
+        <span clx-icon name="schedule" size="sm" class="text-yellow-500"></span>
+        Volvemos aprox. a las {{ untilLabel() }}
+      </div>
+    }
+
+    @if (liveLabel()) {
+      <p class="inline-flex items-center gap-2 text-xs text-clx-text-subtle">
+        <span class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" aria-hidden="true"></span>
+        {{ liveLabel() }}
+      </p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageMaintenanceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-page-maintenance',
+                    standalone: true,
+                    imports: [ClxIconComponent],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex flex-col items-center justify-center min-h-[60vh] px-6 text-center text-sm',
+                        role: 'status',
+                        'aria-live': 'polite',
+                    },
+                    template: `
+    <div class="w-20 h-20 rounded-2xl bg-yellow-50 flex items-center justify-center mb-6">
+      <span clx-icon name="build" size="xl" class="text-yellow-500"></span>
+    </div>
+
+    @if (showCode()) {
+      <p class="text-[50px] font-black text-clx-text-faint leading-none select-none mb-2">503</p>
+    }
+    <h1 class="text-base font-semibold text-clx-text-label mb-2">{{ title() }}</h1>
+    <p class="text-clx-text-subtle max-w-sm mb-6">{{ description() }}</p>
+
+    @if (untilLabel()) {
+      <div class="inline-flex items-center gap-2 rounded-full border border-clx-border-soft bg-clx-surface
+                  px-3.5 py-1.5 font-semibold text-clx-text-label mb-5">
+        <span clx-icon name="schedule" size="sm" class="text-yellow-500"></span>
+        Volvemos aprox. a las {{ untilLabel() }}
+      </div>
+    }
+
+    @if (liveLabel()) {
+      <p class="inline-flex items-center gap-2 text-xs text-clx-text-subtle">
+        <span class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" aria-hidden="true"></span>
+        {{ liveLabel() }}
+      </p>
+    }
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], until: [{ type: i0.Input, args: [{ isSignal: true, alias: "until", required: false }] }], liveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "liveLabel", required: false }] }], showCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCode", required: false }] }] } });
+
+/** Non-blocking announcement of a scheduled maintenance window:
+ *  "Mantenimiento programado hoy de 11:00 p. m. a 11:30 p. m. · <message>". The window is formatted
+ *  from startsAt/endsAt (hoy / mañana / day name). `checkoutBlocked` switches the copy to "las
+ *  compras están pausadas" for the store. Emits `dismissed` when closed (the host decides for how long). */
+class ClxMaintenanceBannerComponent {
+    startsAt = input.required(...(ngDevMode ? [{ debugName: "startsAt" }] : /* istanbul ignore next */ []));
+    endsAt = input.required(...(ngDevMode ? [{ debugName: "endsAt" }] : /* istanbul ignore next */ []));
+    /** Extra text from Sistema → Mantenimiento. */
+    message = input(null, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** The store already stopped taking purchases. */
+    checkoutBlocked = input(false, ...(ngDevMode ? [{ debugName: "checkoutBlocked" }] : /* istanbul ignore next */ []));
+    dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    dismissed = output();
+    heading = computed(() => {
+        const window = formatClxWindow(this.startsAt(), this.endsAt());
+        return this.checkoutBlocked()
+            ? `Compras pausadas por mantenimiento ${window}`
+            : `Mantenimiento programado ${window}`;
+    }, ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    detail = computed(() => this.message()?.trim() || null, ...(ngDevMode ? [{ debugName: "detail" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMaintenanceBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMaintenanceBannerComponent, isStandalone: true, selector: "clx-maintenance-banner", inputs: { startsAt: { classPropertyName: "startsAt", publicName: "startsAt", isSignal: true, isRequired: true, transformFunction: null }, endsAt: { classPropertyName: "endsAt", publicName: "endsAt", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, checkoutBlocked: { classPropertyName: "checkoutBlocked", publicName: "checkoutBlocked", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { attributes: { "role": "status", "aria-live": "polite" }, classAttribute: "flex items-start gap-3 rounded-xl border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-900" }, ngImport: i0, template: `
+    <span clx-icon name="build" size="sm" class="text-yellow-600 mt-0.5 shrink-0"></span>
+    <p class="flex-1 min-w-0 leading-snug">
+      <span class="font-semibold">{{ heading() }}</span>
+      @if (detail()) { <span> · {{ detail() }}</span> }
+    </p>
+    @if (dismissible()) {
+      <button type="button" class="shrink-0 -m-1 p-1 rounded-md text-yellow-700 hover:bg-yellow-100 cursor-pointer"
+        aria-label="Cerrar aviso" (click)="dismissed.emit()">
+        <span clx-icon name="close" size="sm"></span>
+      </button>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMaintenanceBannerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-maintenance-banner',
+                    standalone: true,
+                    imports: [ClxIconComponent],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex items-start gap-3 rounded-xl border border-yellow-300 bg-yellow-50 px-4 py-3 text-sm text-yellow-900',
+                        role: 'status',
+                        'aria-live': 'polite',
+                    },
+                    template: `
+    <span clx-icon name="build" size="sm" class="text-yellow-600 mt-0.5 shrink-0"></span>
+    <p class="flex-1 min-w-0 leading-snug">
+      <span class="font-semibold">{{ heading() }}</span>
+      @if (detail()) { <span> · {{ detail() }}</span> }
+    </p>
+    @if (dismissible()) {
+      <button type="button" class="shrink-0 -m-1 p-1 rounded-md text-yellow-700 hover:bg-yellow-100 cursor-pointer"
+        aria-label="Cerrar aviso" (click)="dismissed.emit()">
+        <span clx-icon name="close" size="sm"></span>
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { startsAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startsAt", required: true }] }], endsAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "endsAt", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], checkoutBlocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkoutBlocked", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
 class ClxStatCardComponent {
     _themeSvc = inject(ClxThemeService);
     metric = input.required(...(ngDevMode ? [{ debugName: "metric" }] : /* istanbul ignore next */ []));
@@ -19607,5 +19795,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertListComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRankedListComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTableProductCellComponent, ClxTableProgressCellComponent, ClxTableStatusCellComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWidgetCardComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertListComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMaintenanceBannerComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageMaintenanceComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRankedListComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTableProductCellComponent, ClxTableProgressCellComponent, ClxTableStatusCellComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWidgetCardComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, formatClxTime, formatClxWindow, isClxCardExpired, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map