codexly-ui 0.12.34 → 0.12.36

package/fesm2022/codexly-ui.mjs

@@ -664,7 +664,13 @@ class ClxThemeService {
                 error: n?.severityColors?.error ?? this._config().dangerColor,
             },
             unreadColor: n?.unreadColor ?? this._config().primaryColor,
-            tabsColor: n?.tabsColor ?? this._config().primaryColor,
+            // Falls back to the general "Pestañas" theme (tabs.activeTextColor/underlineColor) before
+            // primaryColor — the notification panel's own Todas/Sin leer tabs are still clx-tabs under
+            // the hood, so they should read the same theming a host already configured for every other
+            // clx-tabs instance, unless notification.tabsColor/activeTextColor/underlineColor override
+            // it specifically.
+            tabsColor: n?.tabsColor ?? this.tabsStyle().activeTextColor,
+            tabsUnderlineColor: n?.tabsUnderlineColor ?? this.tabsStyle().underlineColor,
             size: n?.size ?? 'md',
             border: n?.border ?? true,
             borderColor: n?.borderColor ?? this._config().listBorderColor ?? this._config().primaryColor,
@@ -8670,6 +8676,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }] });
 
+/** Generic "insert image by URL" fallback for clx-editor's image button — used only when the host
+ *  app doesn't provide its own imagePicker() (see ClxEditorComponent), since this library has no
+ *  way to reach an app-specific catalog/media backend itself. */
+class ClxEditorImageModalComponent {
+    _modalRef = inject(CLX_MODAL_REF, { optional: true });
+    _themeSvc = inject(ClxThemeService);
+    _primaryColor = computed(() => this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_primaryColor" }] : /* istanbul ignore next */ []));
+    _form = new FormGroup({
+        url: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.pattern(/^https?:\/\/.+/)] }),
+        alt: new FormControl('', { nonNullable: true }),
+    });
+    _urlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "_urlInvalid" }] : /* istanbul ignore next */ []));
+    _confirm() {
+        const url = this._form.controls.url.value.trim();
+        const alt = this._form.controls.alt.value.trim();
+        if (!url || this._form.controls.url.invalid) {
+            this._urlInvalid.set(true);
+            return;
+        }
+        this._modalRef?.close({ url, alt });
+    }
+    _cancel() {
+        this._modalRef?.close(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxEditorImageModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: ClxEditorImageModalComponent, isStandalone: true, selector: "clx-editor-image-modal", ngImport: i0, template: `
+    <clx-modal
+      size="sm"
+      [confirmButton]="{ text: 'Insertar', color: _primaryColor() }"
+      [cancelButton]="{ text: 'Cancelar', color: 'slate', variant: 'ghost' }"
+      [showCancelButton]="true"
+      (confirmClick)="_confirm()"
+      (cancelClick)="_cancel()">
+
+      <span clx-modal-title class="text-base font-semibold text-clx-text-label">
+        Insertar imagen
+      </span>
+
+      <form [formGroup]="_form" class="space-y-4" (ngSubmit)="_confirm()">
+        <clx-input
+          label="URL de la imagen"
+          placeholder="https://ejemplo.com/imagen.jpg"
+          formControlName="url"
+          [status]="_urlInvalid() ? 'error' : 'default'"
+          statusMessage="Ingresa una URL válida">
+        </clx-input>
+        <clx-input
+          label="Texto alternativo"
+          placeholder="Descripción de la imagen"
+          formControlName="alt">
+        </clx-input>
+      </form>
+
+    </clx-modal>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxModalComponent, selector: "clx-modal", inputs: ["size", "showClose", "confirmButton", "cancelButton", "showCancelButton"], outputs: ["confirmClick", "cancelClick"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxEditorImageModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-editor-image-modal',
+                    standalone: true,
+                    imports: [ClxModalComponent, ClxInputComponent, ReactiveFormsModule],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <clx-modal
+      size="sm"
+      [confirmButton]="{ text: 'Insertar', color: _primaryColor() }"
+      [cancelButton]="{ text: 'Cancelar', color: 'slate', variant: 'ghost' }"
+      [showCancelButton]="true"
+      (confirmClick)="_confirm()"
+      (cancelClick)="_cancel()">
+
+      <span clx-modal-title class="text-base font-semibold text-clx-text-label">
+        Insertar imagen
+      </span>
+
+      <form [formGroup]="_form" class="space-y-4" (ngSubmit)="_confirm()">
+        <clx-input
+          label="URL de la imagen"
+          placeholder="https://ejemplo.com/imagen.jpg"
+          formControlName="url"
+          [status]="_urlInvalid() ? 'error' : 'default'"
+          statusMessage="Ingresa una URL válida">
+        </clx-input>
+        <clx-input
+          label="Texto alternativo"
+          placeholder="Descripción de la imagen"
+          formControlName="alt">
+        </clx-input>
+      </form>
+
+    </clx-modal>
+  `,
+                }]
+        }] });
+
 const EDITOR_SIZE_MAP = {
     sm: { minH: 'min-h-[120px]', maxH: 'max-h-[200px]', text: 'text-sm', label: 'text-xs font-medium', hint: 'text-xs', toolbar: 'p-1 gap-0.5' },
     md: { minH: 'min-h-[180px]', maxH: 'max-h-[320px]', text: 'text-sm', label: 'text-sm font-medium', hint: 'text-xs', toolbar: 'p-1.5 gap-0.5' },
@@ -8875,6 +8978,7 @@ const TOOLBAR_GROUPS = [
     ],
     [
         { cmd: 'createLink', icon: 'link', title: 'Enlace' },
+        { cmd: 'insertImage', icon: 'image', title: 'Imagen' },
         { cmd: 'removeFormat', icon: 'format_clear', title: 'Limpiar formato' },
         { cmd: 'undo', icon: 'undo', title: 'Deshacer' },
         { cmd: 'redo', icon: 'redo', title: 'Rehacer' },
@@ -8911,6 +9015,11 @@ class ClxEditorComponent {
     statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Overrides the toolbar's Image button: when provided, clicking it calls this instead of
+     *  opening the generic "insert by URL" modal (ClxEditorImageModalComponent) — lets a host app
+     *  plug in its own picker (e.g. an ERP's product/variant image browser) without this library
+     *  needing to know about that app's catalog backend. Resolve to undefined/null to cancel. */
+    imagePicker = input(undefined, ...(ngDevMode ? [{ debugName: "imagePicker" }] : /* istanbul ignore next */ []));
     // ── View ─────────────────────────────────────────────────────────────────
     _bodyEl;
     _sourceEl;
@@ -9064,6 +9173,10 @@ class ClxEditorComponent {
             this._openLinkModal();
             return;
         }
+        if (cmd === 'insertImage') {
+            this._openImageModal();
+            return;
+        }
         this._bodyEl.nativeElement.focus();
         this._restoreRange();
         document.execCommand(cmd, false, arg);
@@ -9104,6 +9217,27 @@ class ClxEditorComponent {
             this._tick.update(v => v + 1);
         });
     }
+    // ── Image insert ──────────────────────────────────────────────────────────
+    _openImageModal() {
+        this._saveRange();
+        const picker = this.imagePicker();
+        const insert = (result) => {
+            if (!result?.url)
+                return;
+            this._restoreRange();
+            this._bodyEl.nativeElement.focus();
+            const alt = (result.alt ?? '').replace(/"/g, '&quot;');
+            document.execCommand('insertHTML', false, `<img src="${result.url}" alt="${alt}" style="max-width:100%;height:auto;" />`);
+            this._emitChange();
+            this._tick.update(v => v + 1);
+        };
+        if (picker) {
+            picker().then(insert);
+            return;
+        }
+        const ref = this._modal.open(ClxEditorImageModalComponent, { size: 'sm' });
+        ref.afterClosed().then((result) => insert(result));
+    }
     // ── Range save/restore ────────────────────────────────────────────────────
     _saveRange() {
         const sel = window.getSelection();
@@ -9222,7 +9356,7 @@ class ClxEditorComponent {
         this._cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxEditorComponent, isStandalone: true, selector: "clx-editor", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxEditorComponent, isStandalone: true, selector: "clx-editor", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, imagePicker: { classPropertyName: "imagePicker", publicName: "imagePicker", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClxEditorComponent),
@@ -9593,7 +9727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <p [class]="_sizeCfg().hint + ' text-gray-400'">{{ hint() }}</p>
     }
   `, host: { class: 'flex flex-col gap-1.5' }, styles: [".clx-editor-body:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}.clx-editor-body:focus{outline:none}.clx-editor-body p{margin:0 0 .4em}.clx-editor-body p:last-child{margin-bottom:0}.clx-editor-body h1{font-size:1.5em;font-weight:700;margin:.5em 0}.clx-editor-body h2{font-size:1.25em;font-weight:600;margin:.5em 0}.clx-editor-body h3{font-size:1.1em;font-weight:600;margin:.5em 0}.clx-editor-body ul,.clx-editor-body ol{padding-left:1.5em;margin:.35em 0}.clx-editor-body li{margin:.1em 0}.clx-editor-body blockquote{border-left:3px solid #e2e8f0;padding-left:.75em;color:#64748b;margin:.4em 0}.clx-editor-body code{background:#f1f5f9;border-radius:3px;padding:.1em .3em;font-size:.875em;font-family:ui-monospace,monospace}.clx-editor-body a{color:#6366f1;text-decoration:underline}.clx-editor-body hr{border:none;border-top:1px solid #e2e8f0;margin:.6em 0}.clx-editor-color-btn{position:relative;overflow:hidden}.clx-editor-color-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0}.clx-editor-toolbar-select clx-select .flex.flex-col{gap:0!important}.clx-editor-source{width:100%;resize:none;border:none;outline:none;background:#0f172a;color:#e2e8f0;font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:.8125rem;line-height:1.6;padding:1rem;tab-size:2}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _bodyEl: [{
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], imagePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePicker", required: false }] }], _bodyEl: [{
                 type: ViewChild,
                 args: ['bodyEl', { static: false }]
             }], _sourceEl: [{
@@ -11460,9 +11594,14 @@ class ClxNotificationComponent {
      *  primaryColor) when unset. */
     badgeColor = input(undefined, ...(ngDevMode ? [{ debugName: "badgeColor" }] : /* istanbul ignore next */ []));
     // ── Panel accents — independent from the bell button's own color. ──────────────────────────
-    /** clx-tabs (Todas/Sin leer/...) + "Marcar todo leído" link accent — falls back to the theme's
-     *  notification.tabsColor (then primaryColor) when unset. */
+    /** clx-tabs (Todas/Sin leer/...) active tab text/icon color + "Marcar todo leído" link accent —
+     *  falls back to the theme's notification.tabsColor (which itself falls back to the general
+     *  "Pestañas" theme's tabs.activeTextColor, then primaryColor) when unset. */
     tabsColor = input(undefined, ...(ngDevMode ? [{ debugName: "tabsColor" }] : /* istanbul ignore next */ []));
+    /** clx-tabs underline color, independent of tabsColor — falls back to the theme's
+     *  notification.tabsUnderlineColor (which itself falls back to tabs.underlineColor, then
+     *  primaryColor) when unset. */
+    tabsUnderlineColor = input(undefined, ...(ngDevMode ? [{ debugName: "tabsUnderlineColor" }] : /* istanbul ignore next */ []));
     /** Whether the floating panel shows its outer border — falls back to the theme's
      *  notification.border (then true) when unset. */
     border = input(undefined, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
@@ -11477,6 +11616,7 @@ class ClxNotificationComponent {
     _buttonColor = computed(() => this.buttonColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_buttonColor" }] : /* istanbul ignore next */ []));
     _badgeColor = computed(() => this.badgeColor() ?? this._style().unreadColor, ...(ngDevMode ? [{ debugName: "_badgeColor" }] : /* istanbul ignore next */ []));
     _tabsColor = computed(() => this.tabsColor() ?? this._style().tabsColor, ...(ngDevMode ? [{ debugName: "_tabsColor" }] : /* istanbul ignore next */ []));
+    _tabsUnderlineColor = computed(() => this.tabsUnderlineColor() ?? this._style().tabsUnderlineColor, ...(ngDevMode ? [{ debugName: "_tabsUnderlineColor" }] : /* istanbul ignore next */ []));
     _border = computed(() => this.border() ?? this._style().border, ...(ngDevMode ? [{ debugName: "_border" }] : /* istanbul ignore next */ []));
     _borderColor = computed(() => this.borderColor() ?? this._style().borderColor, ...(ngDevMode ? [{ debugName: "_borderColor" }] : /* istanbul ignore next */ []));
     // ── CDK Overlay ─────────────────────────────────────────────────────────────
@@ -11574,7 +11714,7 @@ class ClxNotificationComponent {
         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 }, categoryTab: { classPropertyName: "categoryTab", publicName: "categoryTab", isSignal: true, isRequired: false, transformFunction: null }, buttonColor: { classPropertyName: "buttonColor", publicName: "buttonColor", isSignal: true, isRequired: false, transformFunction: null }, buttonVariant: { classPropertyName: "buttonVariant", publicName: "buttonVariant", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, tabsColor: { classPropertyName: "tabsColor", publicName: "tabsColor", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
+    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 }, categoryTab: { classPropertyName: "categoryTab", publicName: "categoryTab", isSignal: true, isRequired: false, transformFunction: null }, buttonColor: { classPropertyName: "buttonColor", publicName: "buttonColor", isSignal: true, isRequired: false, transformFunction: null }, buttonVariant: { classPropertyName: "buttonVariant", publicName: "buttonVariant", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, tabsColor: { classPropertyName: "tabsColor", publicName: "tabsColor", isSignal: true, isRequired: false, transformFunction: null }, tabsUnderlineColor: { classPropertyName: "tabsUnderlineColor", publicName: "tabsUnderlineColor", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
     <!-- Trigger -->
     <button clx-button
       #origin="cdkOverlayOrigin"
@@ -11621,7 +11761,8 @@ class ClxNotificationComponent {
 
         <!-- Tabs -->
         <div class="px-4">
-          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_tabsColor()" />
+          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter"
+            [activeTextColor]="_tabsColor()" [underlineColor]="_tabsUnderlineColor()" />
         </div>
 
         <!-- List -->
@@ -11735,7 +11876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
         <!-- Tabs -->
         <div class="px-4">
-          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_tabsColor()" />
+          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter"
+            [activeTextColor]="_tabsColor()" [underlineColor]="_tabsUnderlineColor()" />
         </div>
 
         <!-- List -->
@@ -11799,7 +11941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'relative inline-flex items-center' },
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], categoryTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTab", required: false }] }], buttonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonColor", required: false }] }], buttonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonVariant", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], buttonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonIcon", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }], tabsColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsColor", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", 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"] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], categoryTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTab", required: false }] }], buttonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonColor", required: false }] }], buttonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonVariant", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], buttonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonIcon", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }], tabsColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsColor", required: false }] }], tabsUnderlineColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsUnderlineColor", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", 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');
@@ -17919,5 +18061,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, 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 };
+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, 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, 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