codexly-ui 0.0.85 → 0.0.87

package/fesm2022/codexly-ui.mjs

@@ -7,8 +7,8 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
 import * as i1$1 from '@angular/cdk/overlay';
 import { ScrollStrategyOptions, OverlayModule } from '@angular/cdk/overlay';
+import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { Chart, LineController, BarController, PieController, DoughnutController, RadarController, PolarAreaController, CategoryScale, LinearScale, RadialLinearScale, BarElement, LineElement, PointElement, ArcElement, Filler, Tooltip, Legend } from 'chart.js';
-import { CdkScrollable } from '@angular/cdk/scrolling';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 // ── Parse 'red' | 'red-500' → { color, shade } ───────────────────────────────
@@ -5381,7 +5381,7 @@ class ClxModalComponent {
     </div>
 
     <!-- Body -->
-    <div class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
+    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
       <ng-content />
     </div>
 
@@ -5412,14 +5412,14 @@ class ClxModalComponent {
         <ng-content select="[clx-modal-footer]" />
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-modal',
                     standalone: true,
-                    imports: [ClxButtonComponent],
+                    imports: [ClxButtonComponent, ScrollingModule],
                     template: `
     <!-- Header -->
     <div class="flex items-center gap-3 px-6 py-4 border-b border-slate-100 shrink-0">
@@ -5442,7 +5442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     </div>
 
     <!-- Body -->
-    <div class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
+    <div cdkScrollable class="flex-1 min-h-0 overflow-y-auto px-6 py-5">
       <ng-content />
     </div>
 
@@ -8120,6 +8120,305 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 args: ['keydown.escape']
             }] } });
 
+const TIMEPICKER_SIZE_MAP = {
+    sm: { trigger: 'h-8 text-sm', label: 'text-xs font-medium', hint: 'text-xs', iconSize: 'xs' },
+    md: { trigger: 'h-10 text-sm', label: 'text-sm font-medium', hint: 'text-xs', iconSize: 'sm' },
+    lg: { trigger: 'h-12 text-base', label: 'text-sm font-medium', hint: 'text-sm', iconSize: 'md' },
+};
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const MINUTES = [0, 15, 30, 45];
+function pad2(n) {
+    return n.toString().padStart(2, '0');
+}
+function roundToNearest15(date) {
+    const m = date.getMinutes();
+    const rem = m % 15;
+    const rounded = rem < 8 ? m - rem : m + (15 - rem);
+    let h = date.getHours();
+    let mn = rounded;
+    if (mn >= 60) {
+        mn = 0;
+        h = (h + 1) % 24;
+    }
+    return `${pad2(h)}:${pad2(mn)}`;
+}
+class ClxTimepickerComponent {
+    origin;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Selecciona una hora', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _cvaConnected = false;
+    _valueEffect = effect(() => {
+        const v = this.value();
+        if (!this._cvaConnected)
+            untracked(() => { this._value.set(v); });
+    }, ...(ngDevMode ? [{ debugName: "_valueEffect" }] : /* istanbul ignore next */ []));
+    _disabled = computed(() => this._cvaDisabled() || this.disabled(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    _hours = HOURS;
+    _minutes = MINUTES;
+    _el = inject((ElementRef));
+    _sso = inject(ScrollStrategyOptions);
+    _scrollStrategy = this._sso.reposition();
+    _onChange = () => { };
+    _onTouched = () => { };
+    _positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ];
+    _sizeConfig = computed(() => TIMEPICKER_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
+    _statusCfg = computed(() => INPUT_STATUS_MAP[this.status()], ...(ngDevMode ? [{ debugName: "_statusCfg" }] : /* istanbul ignore next */ []));
+    _overlayWidth = computed(() => {
+        this._isOpen();
+        return this._el.nativeElement.getBoundingClientRect().width;
+    }, ...(ngDevMode ? [{ debugName: "_overlayWidth" }] : /* istanbul ignore next */ []));
+    _labelClass = computed(() => `${this._sizeConfig().label} text-slate-700 leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
+    _hintClass = computed(() => `${this._sizeConfig().hint} text-gray-400`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
+    _statusMsgClass = computed(() => `${this._sizeConfig().hint} ${this._statusCfg().msgCls}`, ...(ngDevMode ? [{ debugName: "_statusMsgClass" }] : /* istanbul ignore next */ []));
+    _prefixCellCls = computed(() => {
+        const t = resolveColor(this.color());
+        return `px-3 flex items-center shrink-0 border-r ${t.bgSubtle} ${t.textSubtle} ${t.borderLight}`;
+    }, ...(ngDevMode ? [{ debugName: "_prefixCellCls" }] : /* istanbul ignore next */ []));
+    _triggerClass = computed(() => {
+        const size = this._sizeConfig();
+        const status = this._statusCfg();
+        const focus = resolveColor(this.color()).focus;
+        const border = this._disabled() ? 'border-gray-200 bg-gray-50' : `${status.border} focus:outline-none ${focus}`;
+        const cursor = this._disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer';
+        return `relative flex items-stretch ${size.trigger} rounded-md border ${border} ${cursor} overflow-hidden transition-all duration-200 select-none`;
+    }, ...(ngDevMode ? [{ debugName: "_triggerClass" }] : /* istanbul ignore next */ []));
+    _displayClass = computed(() => {
+        const hasValue = !!this._value();
+        const color = this._disabled() ? 'text-gray-400' : hasValue ? 'text-slate-700' : 'text-gray-400';
+        return `flex-1 pl-3 pr-9 flex items-center text-sm ${color} truncate`;
+    }, ...(ngDevMode ? [{ debugName: "_displayClass" }] : /* istanbul ignore next */ []));
+    _displayValue = computed(() => this._value() ?? this.placeholder(), ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    _panelClass = computed(() => 'bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden w-full min-w-56', ...(ngDevMode ? [{ debugName: "_panelClass" }] : /* istanbul ignore next */ []));
+    _cellCls(h, m) {
+        const base = 'py-1.5 text-xs rounded-lg transition-colors text-center font-mono';
+        const t = resolveColor(this.color());
+        const selected = this._value() === `${pad2(h)}:${pad2(m)}`;
+        return selected
+            ? `${base} ${t.bg} ${t.text} font-semibold`
+            : `${base} text-slate-600 ${t.hoverBgMuted} cursor-pointer`;
+    }
+    _pad(n) { return pad2(n); }
+    _togglePanel() { this._isOpen() ? this._closePanel() : this._isOpen.set(true); }
+    _closePanel() { this._isOpen.set(false); this._onTouched(); }
+    _selectTime(h, m) {
+        const val = `${pad2(h)}:${pad2(m)}`;
+        this._value.set(val);
+        this._onChange(val);
+        this._closePanel();
+    }
+    _selectNow() {
+        const val = roundToNearest15(new Date());
+        this._value.set(val);
+        this._onChange(val);
+        this._closePanel();
+    }
+    _clear() { this._value.set(null); this._onChange(null); }
+    onEscape() { if (this._isOpen())
+        this._closePanel(); }
+    _onOverlayKeydown(event) {
+        if (event.key === 'Escape')
+            this._closePanel();
+    }
+    writeValue(val) {
+        this._cvaConnected = true;
+        this._value.set(val ?? null);
+    }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(disabled) { this._cvaDisabled.set(disabled); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTimepickerComponent, isStandalone: true, selector: "clx-timepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "flex flex-col gap-1.5" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ClxTimepickerComponent), multi: true }], viewQueries: [{ propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label [class]="_labelClass()">{{ label() }}</label>
+    }
+
+    <div
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      [class]="_triggerClass()"
+      (click)="!_disabled() && _togglePanel()"
+      (keydown.enter)="!_disabled() && _togglePanel()"
+      (keydown.space)="!_disabled() && _togglePanel()"
+      tabindex="0"
+      role="button"
+      [attr.aria-expanded]="_isOpen()"
+      aria-label="Selecciona una hora">
+
+      <div [class]="_prefixCellCls()">
+        <span clx-icon name="schedule" [size]="_sizeConfig().iconSize"></span>
+      </div>
+
+      <span [class]="_displayClass()">{{ _displayValue() }}</span>
+
+      @if (_value() && !_disabled()) {
+        <div class="absolute right-0 top-0 h-full flex items-center pr-1">
+          <button clx-button variant="ghost" [color]="color()" shape="circle" size="sm"
+                  icon="close" [iconOnly]="true"
+                  (mousedown)="$event.preventDefault()"
+                  (click)="$event.stopPropagation(); _clear()"></button>
+        </div>
+      }
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayMinWidth]="_overlayWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_closePanel()"
+      (overlayKeydown)="_onOverlayKeydown($event)">
+
+      <div [class]="_panelClass()" role="dialog" aria-label="Selector de hora">
+
+        <div class="px-4 pt-4 pb-2 border-b border-slate-100">
+          <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Selecciona una hora</p>
+        </div>
+
+        <div class="p-3 max-h-64 overflow-y-auto">
+          <div class="grid grid-cols-4 gap-1">
+            @for (h of _hours; track h) {
+              @for (m of _minutes; track m) {
+                <button
+                  type="button"
+                  [class]="_cellCls(h, m)"
+                  (click)="_selectTime(h, m)">
+                  {{ _pad(h) }}:{{ _pad(m) }}
+                </button>
+              }
+            }
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between px-4 py-2 border-t border-slate-100">
+          <button clx-button variant="ghost" [color]="color()" size="sm" (click)="_selectNow()">Ahora</button>
+          <button clx-button variant="ghost" color="slate" size="sm" (click)="_closePanel()">Cerrar</button>
+        </div>
+
+      </div>
+    </ng-template>
+
+    @if (statusMessage() && status() !== 'default') {
+      <p [class]="_statusMsgClass()">{{ statusMessage() }}</p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-timepicker',
+                    standalone: true,
+                    imports: [ClxIconComponent, ClxButtonComponent, OverlayModule],
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ClxTimepickerComponent), multi: true }],
+                    template: `
+    @if (label()) {
+      <label [class]="_labelClass()">{{ label() }}</label>
+    }
+
+    <div
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      [class]="_triggerClass()"
+      (click)="!_disabled() && _togglePanel()"
+      (keydown.enter)="!_disabled() && _togglePanel()"
+      (keydown.space)="!_disabled() && _togglePanel()"
+      tabindex="0"
+      role="button"
+      [attr.aria-expanded]="_isOpen()"
+      aria-label="Selecciona una hora">
+
+      <div [class]="_prefixCellCls()">
+        <span clx-icon name="schedule" [size]="_sizeConfig().iconSize"></span>
+      </div>
+
+      <span [class]="_displayClass()">{{ _displayValue() }}</span>
+
+      @if (_value() && !_disabled()) {
+        <div class="absolute right-0 top-0 h-full flex items-center pr-1">
+          <button clx-button variant="ghost" [color]="color()" shape="circle" size="sm"
+                  icon="close" [iconOnly]="true"
+                  (mousedown)="$event.preventDefault()"
+                  (click)="$event.stopPropagation(); _clear()"></button>
+        </div>
+      }
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayMinWidth]="_overlayWidth()"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_closePanel()"
+      (overlayKeydown)="_onOverlayKeydown($event)">
+
+      <div [class]="_panelClass()" role="dialog" aria-label="Selector de hora">
+
+        <div class="px-4 pt-4 pb-2 border-b border-slate-100">
+          <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Selecciona una hora</p>
+        </div>
+
+        <div class="p-3 max-h-64 overflow-y-auto">
+          <div class="grid grid-cols-4 gap-1">
+            @for (h of _hours; track h) {
+              @for (m of _minutes; track m) {
+                <button
+                  type="button"
+                  [class]="_cellCls(h, m)"
+                  (click)="_selectTime(h, m)">
+                  {{ _pad(h) }}:{{ _pad(m) }}
+                </button>
+              }
+            }
+          </div>
+        </div>
+
+        <div class="flex items-center justify-between px-4 py-2 border-t border-slate-100">
+          <button clx-button variant="ghost" [color]="color()" size="sm" (click)="_selectNow()">Ahora</button>
+          <button clx-button variant="ghost" color="slate" size="sm" (click)="_closePanel()">Cerrar</button>
+        </div>
+
+      </div>
+    </ng-template>
+
+    @if (statusMessage() && status() !== 'default') {
+      <p [class]="_statusMsgClass()">{{ statusMessage() }}</p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'flex flex-col gap-1.5' },
+                }]
+        }], propDecorators: { origin: [{
+                type: ViewChild,
+                args: ['origin']
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+
 const MONTH_NAMES_ES = [
     'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
     'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
@@ -14311,5 +14610,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_COLOR_HEX, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_RADIO_GROUP, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxTimelineComponent, ClxTimelineItemComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, parseColorInput, resolveColor };
+export { CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_COLOR_HEX, CLX_COLOR_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_RADIO_GROUP, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxChartComponent, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, resolveColor };
 //# sourceMappingURL=codexly-ui.mjs.map