codexly-ui 0.10.113 → 0.11.0

package/fesm2022/codexly-ui.mjs

@@ -627,6 +627,28 @@ class ClxThemeService {
             bordered: t?.bordered ?? true,
         };
     }, ...(ngDevMode ? [{ debugName: "paginationStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for ClxNotificationComponent — severity colors fall back to built-in
+     *  green/amber/sky/red, unreadColor to primaryColor, borderColor to listBorderColor then
+     *  primaryColor, radius to the app-wide borderRadius. Per-instance inputs on clx-notification
+     *  still take precedence over this theme-wide default. */
+    notificationStyle = computed(() => {
+        const n = this._config().notification;
+        return {
+            severityColors: {
+                success: n?.severityColors?.success ?? this._config().successColor,
+                warning: n?.severityColors?.warning ?? this._config().warningColor,
+                info: n?.severityColors?.info ?? 'sky',
+                error: n?.severityColors?.error ?? this._config().dangerColor,
+            },
+            unreadColor: n?.unreadColor ?? this._config().primaryColor,
+            size: n?.size ?? 'md',
+            borderColor: n?.borderColor ?? this._config().listBorderColor ?? this._config().primaryColor,
+            radius: n?.radius ?? this._config().borderRadius,
+            titleWeight: n?.titleWeight ?? 600,
+            detailColor: n?.detailColor,
+            groupLabelWeight: n?.groupLabelWeight ?? 700,
+        };
+    }, ...(ngDevMode ? [{ debugName: "notificationStyle" }] : /* istanbul ignore next */ []));
     /** Resolved text color for solid primary/secondary buttons — undefined means "let
      *  resolveColor() auto-pick white/dark-800 based on shade", same as today. */
     buttonTextColor(role) {
@@ -11236,6 +11258,300 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], confirmButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButton", required: false }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], confirmClick: [{ type: i0.Output, args: ["confirmClick"] }], cancelClick: [{ type: i0.Output, args: ["cancelClick"] }] } });
 
+// ── Size map — same density-token shape as LIST_SIZE_MAP ──────────────────────
+const NOTIFICATION_SIZE_MAP = {
+    sm: { row: 'py-2', iconWrap: 'w-7 h-7', iconSize: 'xs', title: 'text-xs', detail: 'text-[11px]', time: 'text-[10px]' },
+    md: { row: 'py-2.5', iconWrap: 'w-8.5 h-8.5', iconSize: 'sm', title: 'text-[13px]', detail: 'text-xs', time: 'text-[11px]' },
+    lg: { row: 'py-3', iconWrap: 'w-10 h-10', iconSize: 'md', title: 'text-sm', detail: 'text-[13px]', time: 'text-xs' },
+};
+// ── Default icon per severity — used when an item doesn't specify its own `icon` ──
+const NOTIFICATION_SEVERITY_ICON = {
+    success: 'check_circle',
+    warning: 'notifications_active',
+    info: 'info',
+    error: 'error',
+};
+
+/** "Dumb" panel: renders whatever list of items it's given via `items()` and emits intent
+ *  (itemClick/markRead/markAllRead/delete/deleteAllRead) outward — it never fetches, persists,
+ *  or connects to a real-time source itself. Callers (e.g. codexly-app's NotificationService,
+ *  backed by SSE) own that and just feed the current list in. Meant to be projected inside
+ *  clx-drawer's body, same as any other content. */
+class ClxNotificationComponent {
+    _themeSvc = inject(ClxThemeService);
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    markRead = output();
+    markAllRead = output();
+    delete = output();
+    deleteAllRead = output();
+    _filter = signal('all', ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
+    _style = this._themeSvc.notificationStyle;
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _resolvedSize = computed(() => this.size() ?? this._style().size, ...(ngDevMode ? [{ debugName: "_resolvedSize" }] : /* istanbul ignore next */ []));
+    _sizeTokens = computed(() => NOTIFICATION_SIZE_MAP[this._resolvedSize()], ...(ngDevMode ? [{ debugName: "_sizeTokens" }] : /* istanbul ignore next */ []));
+    _unreadCount = computed(() => this.items().filter(i => !i.read).length, ...(ngDevMode ? [{ debugName: "_unreadCount" }] : /* istanbul ignore next */ []));
+    _readCount = computed(() => this.items().filter(i => i.read).length, ...(ngDevMode ? [{ debugName: "_readCount" }] : /* istanbul ignore next */ []));
+    _visibleItems = computed(() => this._filter() === 'unread' ? this.items().filter(i => !i.read) : this.items(), ...(ngDevMode ? [{ debugName: "_visibleItems" }] : /* istanbul ignore next */ []));
+    _groups = computed(() => {
+        const byLabel = new Map();
+        for (const item of this._visibleItems()) {
+            const label = this._dayLabel(item.createdAt);
+            const bucket = byLabel.get(label);
+            if (bucket)
+                bucket.push(item);
+            else
+                byLabel.set(label, [item]);
+        }
+        return Array.from(byLabel, ([label, items]) => ({ label, items }));
+    }, ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+    _wrapClass = computed(() => `flex flex-col ${resolveContainerRadius(this._style().radius)}`, ...(ngDevMode ? [{ debugName: "_wrapClass" }] : /* istanbul ignore next */ []));
+    _groupLabelClass = computed(() => {
+        const w = this._style().groupLabelWeight;
+        return `px-1 pt-3 pb-1.5 text-[11px] uppercase tracking-wide text-clx-text-subtle font-[${w}]`;
+    }, ...(ngDevMode ? [{ debugName: "_groupLabelClass" }] : /* istanbul ignore next */ []));
+    _linkClass = computed(() => resolveColor(this._color()).textSubtle, ...(ngDevMode ? [{ debugName: "_linkClass" }] : /* istanbul ignore next */ []));
+    _unreadRailClass = computed(() => resolveColor(this._style().unreadColor).bg, ...(ngDevMode ? [{ debugName: "_unreadRailClass" }] : /* istanbul ignore next */ []));
+    _unreadDotClass = computed(() => `w-1.5 h-1.5 rounded-full shrink-0 ${resolveColor(this._style().unreadColor).bg}`, ...(ngDevMode ? [{ debugName: "_unreadDotClass" }] : /* istanbul ignore next */ []));
+    _detailClass = computed(() => this._style().detailColor ? resolveColor(this._style().detailColor).textSubtle : 'text-clx-text-muted', ...(ngDevMode ? [{ debugName: "_detailClass" }] : /* istanbul ignore next */ []));
+    _titleClass(item) {
+        const weight = item.read ? 500 : this._style().titleWeight;
+        return `text-clx-text-label font-[${weight}]`;
+    }
+    _iconWrapClass(item) {
+        const c = resolveColor(this._severityColor(item.severity));
+        return `flex items-center justify-center rounded-lg shrink-0 ${c.bgSubtle} ${c.textSubtle} ${this._sizeTokens().iconWrap}`;
+    }
+    _defaultIcon(severity) {
+        return NOTIFICATION_SEVERITY_ICON[severity];
+    }
+    _open(item) {
+        this.itemClick.emit(item);
+        if (!item.read)
+            this.markRead.emit(item.id);
+    }
+    _countBadgeClass(tab) {
+        const active = this._filter() === tab;
+        return active
+            ? 'ml-0.5 text-[10px] font-bold tabular-nums'
+            : 'ml-0.5 text-[10px] font-bold tabular-nums text-clx-text-subtle';
+    }
+    _severityColor(severity) {
+        return this._style().severityColors[severity];
+    }
+    _dayLabel(iso) {
+        const date = new Date(iso);
+        const now = new Date();
+        const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+        const diffDays = Math.round((startOf(now) - startOf(date)) / 86_400_000);
+        if (diffDays === 0)
+            return 'Hoy';
+        if (diffDays === 1)
+            return 'Ayer';
+        if (diffDays > 1 && diffDays < 7)
+            return `Hace ${diffDays} días`;
+        return date.toLocaleDateString('es-CO', { day: 'numeric', month: 'short' });
+    }
+    _timeOf(iso) {
+        return new Date(iso).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNotificationComponent, isStandalone: true, selector: "clx-notification", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, ngImport: i0, template: `
+    <div [class]="_wrapClass()">
+      <!-- Filter -->
+      <div class="flex items-center gap-2 px-1 pb-3">
+        <button clx-button type="button" size="xs" shape="pill"
+          [variant]="_filter() === 'all' ? 'solid' : 'ghost'"
+          [color]="_filter() === 'all' ? _color() : 'slate'"
+          (click)="_filter.set('all')">
+          Todas
+          @if (items().length) {
+            <span [class]="_countBadgeClass('all')">{{ items().length }}</span>
+          }
+        </button>
+        <button clx-button type="button" size="xs" shape="pill"
+          [variant]="_filter() === 'unread' ? 'solid' : 'ghost'"
+          [color]="_filter() === 'unread' ? _color() : 'slate'"
+          (click)="_filter.set('unread')">
+          Sin leer
+          @if (_unreadCount() > 0) {
+            <span [class]="_countBadgeClass('unread')">{{ _unreadCount() }}</span>
+          }
+        </button>
+        <div class="flex-1"></div>
+        @if (_unreadCount() > 0) {
+          <button type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
+            (click)="markAllRead.emit()">
+            Marcar todo leído
+          </button>
+        }
+        @if (_readCount() > 0) {
+          <button type="button" class="text-xs font-semibold shrink-0 text-clx-text-subtle hover:text-red-500"
+            (click)="deleteAllRead.emit()">
+            Eliminar leídas
+          </button>
+        }
+      </div>
+
+      <!-- List -->
+      @if (_groups().length) {
+        <div class="flex flex-col">
+          @for (group of _groups(); track group.label) {
+            <p [class]="_groupLabelClass()">{{ group.label }}</p>
+            @for (item of group.items; track item.id) {
+              <div
+                class="group relative flex items-start gap-3 px-1 rounded-lg cursor-pointer hover:bg-clx-surface-2 {{ _sizeTokens().row }}"
+                role="button"
+                tabindex="0"
+                (click)="_open(item)"
+                (keydown.enter)="_open(item)">
+
+                <span class="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-full {{ item.read ? '' : _unreadRailClass() }}"></span>
+
+                <span [class]="_iconWrapClass(item)">
+                  <span clx-icon [name]="item.icon || _defaultIcon(item.severity)" [size]="_sizeTokens().iconSize"></span>
+                </span>
+
+                <div class="flex-1 min-w-0 pl-1.5">
+                  <p class="flex items-baseline gap-1.5 {{ _sizeTokens().title }}" [class]="_titleClass(item)">
+                    @if (!item.read) {
+                      <span [class]="_unreadDotClass()"></span>
+                    }
+                    <span class="truncate">{{ item.title }}</span>
+                  </p>
+                  @if (item.detail) {
+                    <p class="mt-0.5 line-clamp-2 {{ _sizeTokens().detail }}" [class]="_detailClass()">{{ item.detail }}</p>
+                  }
+                </div>
+
+                <div class="flex flex-col items-end gap-1 shrink-0 pl-2">
+                  <span class="text-clx-text-subtle tabular-nums {{ _sizeTokens().time }}">{{ _timeOf(item.createdAt) }}</span>
+                  <button type="button"
+                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity rounded-md p-0.5 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                    aria-label="Eliminar notificación"
+                    (click)="$event.stopPropagation(); delete.emit(item.id)">
+                    <span clx-icon name="close" size="xs"></span>
+                  </button>
+                </div>
+              </div>
+            }
+          }
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-2 py-14 text-center">
+          <span clx-icon name="notifications_off" size="xl" class="text-clx-text-subtle"></span>
+          <p class="text-sm font-medium text-clx-text-label">
+            {{ _filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones' }}
+          </p>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { 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: ClxNotificationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-notification',
+                    standalone: true,
+                    imports: [ClxButtonComponent, ClxIconComponent],
+                    template: `
+    <div [class]="_wrapClass()">
+      <!-- Filter -->
+      <div class="flex items-center gap-2 px-1 pb-3">
+        <button clx-button type="button" size="xs" shape="pill"
+          [variant]="_filter() === 'all' ? 'solid' : 'ghost'"
+          [color]="_filter() === 'all' ? _color() : 'slate'"
+          (click)="_filter.set('all')">
+          Todas
+          @if (items().length) {
+            <span [class]="_countBadgeClass('all')">{{ items().length }}</span>
+          }
+        </button>
+        <button clx-button type="button" size="xs" shape="pill"
+          [variant]="_filter() === 'unread' ? 'solid' : 'ghost'"
+          [color]="_filter() === 'unread' ? _color() : 'slate'"
+          (click)="_filter.set('unread')">
+          Sin leer
+          @if (_unreadCount() > 0) {
+            <span [class]="_countBadgeClass('unread')">{{ _unreadCount() }}</span>
+          }
+        </button>
+        <div class="flex-1"></div>
+        @if (_unreadCount() > 0) {
+          <button type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
+            (click)="markAllRead.emit()">
+            Marcar todo leído
+          </button>
+        }
+        @if (_readCount() > 0) {
+          <button type="button" class="text-xs font-semibold shrink-0 text-clx-text-subtle hover:text-red-500"
+            (click)="deleteAllRead.emit()">
+            Eliminar leídas
+          </button>
+        }
+      </div>
+
+      <!-- List -->
+      @if (_groups().length) {
+        <div class="flex flex-col">
+          @for (group of _groups(); track group.label) {
+            <p [class]="_groupLabelClass()">{{ group.label }}</p>
+            @for (item of group.items; track item.id) {
+              <div
+                class="group relative flex items-start gap-3 px-1 rounded-lg cursor-pointer hover:bg-clx-surface-2 {{ _sizeTokens().row }}"
+                role="button"
+                tabindex="0"
+                (click)="_open(item)"
+                (keydown.enter)="_open(item)">
+
+                <span class="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-full {{ item.read ? '' : _unreadRailClass() }}"></span>
+
+                <span [class]="_iconWrapClass(item)">
+                  <span clx-icon [name]="item.icon || _defaultIcon(item.severity)" [size]="_sizeTokens().iconSize"></span>
+                </span>
+
+                <div class="flex-1 min-w-0 pl-1.5">
+                  <p class="flex items-baseline gap-1.5 {{ _sizeTokens().title }}" [class]="_titleClass(item)">
+                    @if (!item.read) {
+                      <span [class]="_unreadDotClass()"></span>
+                    }
+                    <span class="truncate">{{ item.title }}</span>
+                  </p>
+                  @if (item.detail) {
+                    <p class="mt-0.5 line-clamp-2 {{ _sizeTokens().detail }}" [class]="_detailClass()">{{ item.detail }}</p>
+                  }
+                </div>
+
+                <div class="flex flex-col items-end gap-1 shrink-0 pl-2">
+                  <span class="text-clx-text-subtle tabular-nums {{ _sizeTokens().time }}">{{ _timeOf(item.createdAt) }}</span>
+                  <button type="button"
+                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity rounded-md p-0.5 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                    aria-label="Eliminar notificación"
+                    (click)="$event.stopPropagation(); delete.emit(item.id)">
+                    <span clx-icon name="close" size="xs"></span>
+                  </button>
+                </div>
+              </div>
+            }
+          }
+        </div>
+      } @else {
+        <div class="flex flex-col items-center justify-center gap-2 py-14 text-center">
+          <span clx-icon name="notifications_off" size="xl" class="text-clx-text-subtle"></span>
+          <p class="text-sm font-medium text-clx-text-label">
+            {{ _filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones' }}
+          </p>
+        </div>
+      }
+    </div>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], markRead: [{ type: i0.Output, args: ["markRead"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], delete: [{ type: i0.Output, args: ["delete"] }], deleteAllRead: [{ type: i0.Output, args: ["deleteAllRead"] }] } });
+
 // ─── CDK overlay token (carries the resolved ref into the component) ──────────
 const CLX_ALERT_OPTIONS = new InjectionToken('CLX_ALERT_OPTIONS');
 const CLX_ALERT_RESOLVE = new InjectionToken('CLX_ALERT_RESOLVE');
@@ -17065,5 +17381,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, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, 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, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, 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, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map