codexly-ui 0.0.9 → 0.0.12

package/fesm2022/codexly-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, effect, signal, inject, ElementRef, InjectionToken, PLATFORM_ID, Injectable, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, Directive, output, contentChildren, NgZone, model, untracked, forwardRef, viewChild, HostListener, ViewChildren, contentChild, Injector, ViewChild, ChangeDetectorRef, ContentChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
-import { isPlatformBrowser, CurrencyPipe, NgTemplateOutlet, DecimalPipe, NgStyle } from '@angular/common';
+import { isPlatformBrowser, CurrencyPipe, NgTemplateOutlet, DecimalPipe, NgStyle, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl, FormControl, ReactiveFormsModule, FormGroup, Validators } from '@angular/forms';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -10880,57 +10880,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 args: [ClxStepComponent]
             }] } });
 
+const CLX_MENU_COLOR = new InjectionToken('CLX_MENU_COLOR');
+const CLX_LAYOUT_COLLAPSED = new InjectionToken('CLX_LAYOUT_COLLAPSED');
+// ── Item geometry ──────────────────────────────────────────────────────────────
+const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
+const NAV_ITEM_L1 = 'px-6 py-3';
+const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
+const NAV_ITEM_IDLE = 'text-slate-400';
+// ── Children container ─────────────────────────────────────────────────────────
+const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
+const NAV_CHILDREN_INNER = 'overflow-hidden';
+const NAV_CHILDREN_LIST = 'ml-6 border-l border-slate-700/60 py-1 space-y-0.5';
+
 class ClxAppLayoutComponent {
-    // ── Inputs ─────────────────────────────────────────────────────────────────
+    _zone = inject(NgZone);
+    _document = inject(DOCUMENT);
     activeColor = input('indigo', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
-    // ── Sidebar state ──────────────────────────────────────────────────────────
-    _sidebarOpen = signal(true, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : []));
+    _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : []));
+    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
+    _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : []));
+    _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : []));
     _sidebarCls = computed(() => {
-        const base = [
-            // Mobile: fixed overlay from left edge
-            'fixed inset-y-0 left-0 z-30 w-72 flex flex-col',
+        const collapsed = this._collapsed() && !this._isMobile();
+        const width = collapsed ? 'w-16' : 'w-72';
+        return [
+            `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
             'bg-slate-900 overflow-y-auto shrink-0',
-            'transition-transform duration-300 ease-in-out',
-            // Desktop (lg+): back into flow, no translation
-            'lg:relative lg:inset-auto lg:z-auto lg:translate-x-0',
+            'transition-[width,transform] duration-300 ease-in-out',
+            'lg:transition-[width] lg:relative lg:inset-auto lg:z-auto lg:translate-x-0',
+            (!this._isMobile() || this._sidebarOpen()) ? 'translate-x-0' : '-translate-x-full',
         ].join(' ');
-        return this._sidebarOpen()
-            ? `${base} translate-x-0`
-            : `${base} -translate-x-full`;
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : []));
-    // ── Public API ─────────────────────────────────────────────────────────────
-    toggleSidebar() {
-        this._sidebarOpen.update(v => !v);
-    }
-    openSidebar() {
-        this._sidebarOpen.set(true);
+    _mql;
+    _mqlListener;
+    ngOnInit() {
+        const win = this._document.defaultView;
+        if (!win)
+            return;
+        this._mql = win.matchMedia('(min-width: 1024px)');
+        this._isMobile.set(!this._mql.matches);
+        if (this._mql.matches)
+            this._sidebarOpen.set(true);
+        this._mqlListener = (e) => {
+            this._zone.run(() => {
+                this._isMobile.set(!e.matches);
+                if (e.matches) {
+                    this._sidebarOpen.set(true);
+                }
+                else {
+                    this._sidebarOpen.set(false);
+                    this._collapsed.set(false);
+                }
+            });
+        };
+        this._mql.addEventListener('change', this._mqlListener);
     }
-    closeSidebar() {
-        this._sidebarOpen.set(false);
+    ngOnDestroy() {
+        this._mql?.removeEventListener('change', this._mqlListener);
     }
+    _toggleCollapsed() { this._collapsed.update(v => !v); }
+    toggleSidebar() { this._sidebarOpen.update(v => !v); }
+    openSidebar() { this._sidebarOpen.set(true); }
+    closeSidebar() { this._sidebarOpen.set(false); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
-    <!-- ── Mobile backdrop ───────────────────────────────────────────────────── -->
-    @if (_sidebarOpen()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex h-screen overflow-hidden" }, providers: [
+            {
+                provide: CLX_LAYOUT_COLLAPSED,
+                useFactory: (self) => () => self._collapsed(),
+                deps: [ClxAppLayoutComponent],
+            },
+        ], ngImport: i0, template: `
+    <!-- Mobile backdrop -->
+    @if (_showBackdrop()) {
       <div
-        class="fixed inset-0 z-20 bg-slate-900/60 backdrop-blur-sm lg:hidden"
+        class="fixed inset-0 z-20 bg-slate-900/60"
         aria-hidden="true"
         (click)="closeSidebar()">
       </div>
     }
 
-    <!-- ── Sidebar ───────────────────────────────────────────────────────────── -->
-    <aside
-      [class]="_sidebarCls()"
-      aria-label="Navegación principal">
+    <!-- Sidebar -->
+    <aside [class]="_sidebarCls()" aria-label="Navegación principal">
       <ng-content select="[clx-sidebar]"></ng-content>
     </aside>
 
-    <!-- ── Right panel ───────────────────────────────────────────────────────── -->
+    <!-- Right panel -->
     <div class="flex-1 flex flex-col overflow-hidden min-w-0">
 
-      <!-- Header slot (h-16, white/blur, bottom border) -->
-      <header class="h-16 shrink-0 bg-white backdrop-blur-md border-b border-slate-200 flex items-center z-10 px-4 gap-3">
+      <header class="h-16 shrink-0 bg-white border-b border-slate-200 flex items-center z-10 px-4 gap-3">
+        <!-- Toggle button desktop -->
+        <button
+          type="button"
+          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-slate-500 hover:text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
+          (click)="_toggleCollapsed()">
+          <span clx-icon [name]="_collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
+        </button>
+        <!-- Toggle button mobile -->
+        <button
+          type="button"
+          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-slate-500 hover:text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
+          (click)="toggleSidebar()">
+          <span clx-icon name="menu" size="sm"></span>
+        </button>
+
         <ng-content select="[clx-header]"></ng-content>
       </header>
 
@@ -10939,36 +10991,55 @@ class ClxAppLayoutComponent {
       </main>
 
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, 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: "20.3.21", ngImport: i0, type: ClxAppLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-app-layout',
                     standalone: true,
-                    imports: [],
+                    imports: [ClxIconComponent],
+                    providers: [
+                        {
+                            provide: CLX_LAYOUT_COLLAPSED,
+                            useFactory: (self) => () => self._collapsed(),
+                            deps: [ClxAppLayoutComponent],
+                        },
+                    ],
                     template: `
-    <!-- ── Mobile backdrop ───────────────────────────────────────────────────── -->
-    @if (_sidebarOpen()) {
+    <!-- Mobile backdrop -->
+    @if (_showBackdrop()) {
       <div
-        class="fixed inset-0 z-20 bg-slate-900/60 backdrop-blur-sm lg:hidden"
+        class="fixed inset-0 z-20 bg-slate-900/60"
         aria-hidden="true"
         (click)="closeSidebar()">
       </div>
     }
 
-    <!-- ── Sidebar ───────────────────────────────────────────────────────────── -->
-    <aside
-      [class]="_sidebarCls()"
-      aria-label="Navegación principal">
+    <!-- Sidebar -->
+    <aside [class]="_sidebarCls()" aria-label="Navegación principal">
       <ng-content select="[clx-sidebar]"></ng-content>
     </aside>
 
-    <!-- ── Right panel ───────────────────────────────────────────────────────── -->
+    <!-- Right panel -->
     <div class="flex-1 flex flex-col overflow-hidden min-w-0">
 
-      <!-- Header slot (h-16, white/blur, bottom border) -->
-      <header class="h-16 shrink-0 bg-white backdrop-blur-md border-b border-slate-200 flex items-center z-10 px-4 gap-3">
+      <header class="h-16 shrink-0 bg-white border-b border-slate-200 flex items-center z-10 px-4 gap-3">
+        <!-- Toggle button desktop -->
+        <button
+          type="button"
+          class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-slate-500 hover:text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
+          (click)="_toggleCollapsed()">
+          <span clx-icon [name]="_collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
+        </button>
+        <!-- Toggle button mobile -->
+        <button
+          type="button"
+          class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-slate-500 hover:text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
+          (click)="toggleSidebar()">
+          <span clx-icon name="menu" size="sm"></span>
+        </button>
+
         <ng-content select="[clx-header]"></ng-content>
       </header>
 
@@ -10980,23 +11051,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'flex h-screen overflow-hidden',
-                    },
+                    host: { class: 'flex h-screen overflow-hidden' },
                 }]
         }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }] } });
 
-const CLX_MENU_COLOR = new InjectionToken('CLX_MENU_COLOR');
-// ── Item geometry ──────────────────────────────────────────────────────────────
-const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
-const NAV_ITEM_L1 = 'px-6 py-3';
-const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
-const NAV_ITEM_IDLE = 'text-slate-400';
-// ── Children container ─────────────────────────────────────────────────────────
-const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
-const NAV_CHILDREN_INNER = 'overflow-hidden';
-const NAV_CHILDREN_LIST = 'ml-6 border-l border-slate-700/60 py-1 space-y-0.5';
-
 class ClxMenuItemComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
@@ -11004,9 +11062,15 @@ class ClxMenuItemComponent {
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
     _menuColorFn = inject(CLX_MENU_COLOR, { optional: true });
+    _collapsedFn = inject(CLX_LAYOUT_COLLAPSED, { optional: true });
     _hasParent = !!this._menuColorFn;
+    _collapsed = computed(() => this._collapsedFn?.() ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
     _resolvedColor = computed(() => this._menuColorFn?.() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
-    _geom = computed(() => this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1, ...(ngDevMode ? [{ debugName: "_geom" }] : []));
+    _geom = computed(() => {
+        if (this._collapsed())
+            return 'px-0 justify-center';
+        return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
+    }, ...(ngDevMode ? [{ debugName: "_geom" }] : []));
     _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
     _idleCls = computed(() => {
         const t = resolveColor(this._resolvedColor());
@@ -11014,6 +11078,9 @@ class ClxMenuItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolvedColor());
+        if (this._collapsed()) {
+            return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold`;
+        }
         return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_activeCls" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -11024,11 +11091,14 @@ class ClxMenuItemComponent {
       #rla="routerLinkActive"
       [routerLinkActiveOptions]="{ exact: false }"
       [class]="rla.isActive ? _activeCls() : _idleCls()"
+      [title]="_collapsed() ? label() : ''"
       (click)="route() ? null : $event.preventDefault()">
       @if (icon()) {
         <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || !_hasParent ? _iconCls() : 'text-slate-500'"></span>
       }
-      <span class="flex-1 truncate">{{ label() }}</span>
+      @if (!_collapsed()) {
+        <span class="flex-1 truncate">{{ label() }}</span>
+      }
     </a>
   `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -11045,11 +11115,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
       #rla="routerLinkActive"
       [routerLinkActiveOptions]="{ exact: false }"
       [class]="rla.isActive ? _activeCls() : _idleCls()"
+      [title]="_collapsed() ? label() : ''"
       (click)="route() ? null : $event.preventDefault()">
       @if (icon()) {
         <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || !_hasParent ? _iconCls() : 'text-slate-500'"></span>
       }
-      <span class="flex-1 truncate">{{ label() }}</span>
+      @if (!_collapsed()) {
+        <span class="flex-1 truncate">{{ label() }}</span>
+      }
     </a>
   `,
                     encapsulation: ViewEncapsulation.None,
@@ -11063,6 +11136,8 @@ class ClxMenuComponent {
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
+    _collapsedFn = inject(CLX_LAYOUT_COLLAPSED, { optional: true });
+    _collapsed = computed(() => this._collapsedFn?.() ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
     _childItems;
     _childRoutes = [];
     _router = inject(Router);
@@ -11078,9 +11153,12 @@ class ClxMenuComponent {
     }
     _iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
     _buttonCls = computed(() => {
-        const base = `${NAV_ITEM_BASE} ${NAV_ITEM_L1}`;
+        const geom = this._collapsed() ? 'px-0 justify-center' : NAV_ITEM_L1;
+        const base = `${NAV_ITEM_BASE} ${geom}`;
         const t = resolveColor(this.color());
         if (this._isChildActive()) {
+            if (this._collapsed())
+                return `${base} ${t.textSubtle} font-semibold`;
             return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
         }
         return `${base} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
@@ -11109,29 +11187,34 @@ class ClxMenuComponent {
     <button
       type="button"
       [class]="_buttonCls()"
-      (click)="_toggle()">
+      [title]="_collapsed() ? label() : ''"
+      (click)="!_collapsed() && _toggle()">
       @if (icon()) {
         <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
       }
-      <span class="flex-1 text-left truncate">{{ label() }}</span>
-      <span
-        clx-icon
-        name="expand_more"
-        size="sm"
-        class="shrink-0 transition-transform duration-300"
-        [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-      </span>
+      @if (!_collapsed()) {
+        <span class="flex-1 text-left truncate">{{ label() }}</span>
+        <span
+          clx-icon
+          name="expand_more"
+          size="sm"
+          class="shrink-0 transition-transform duration-300"
+          [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+        </span>
+      }
     </button>
 
-    <div
-      [class]="NAV_CHILDREN_WRAPPER"
-      [style.grid-template-rows]="_isExpanded() ? '1fr' : '0fr'">
-      <div [class]="NAV_CHILDREN_INNER">
-        <div [class]="NAV_CHILDREN_LIST">
-          <ng-content></ng-content>
+    @if (!_collapsed()) {
+      <div
+        [class]="NAV_CHILDREN_WRAPPER"
+        [style.grid-template-rows]="_isExpanded() ? '1fr' : '0fr'">
+        <div [class]="NAV_CHILDREN_INNER">
+          <div [class]="NAV_CHILDREN_LIST">
+            <ng-content></ng-content>
+          </div>
         </div>
       </div>
-    </div>
+    }
   `, 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: "20.3.21", ngImport: i0, type: ClxMenuComponent, decorators: [{
@@ -11147,29 +11230,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
     <button
       type="button"
       [class]="_buttonCls()"
-      (click)="_toggle()">
+      [title]="_collapsed() ? label() : ''"
+      (click)="!_collapsed() && _toggle()">
       @if (icon()) {
         <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
       }
-      <span class="flex-1 text-left truncate">{{ label() }}</span>
-      <span
-        clx-icon
-        name="expand_more"
-        size="sm"
-        class="shrink-0 transition-transform duration-300"
-        [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-      </span>
+      @if (!_collapsed()) {
+        <span class="flex-1 text-left truncate">{{ label() }}</span>
+        <span
+          clx-icon
+          name="expand_more"
+          size="sm"
+          class="shrink-0 transition-transform duration-300"
+          [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+        </span>
+      }
     </button>
 
-    <div
-      [class]="NAV_CHILDREN_WRAPPER"
-      [style.grid-template-rows]="_isExpanded() ? '1fr' : '0fr'">
-      <div [class]="NAV_CHILDREN_INNER">
-        <div [class]="NAV_CHILDREN_LIST">
-          <ng-content></ng-content>
+    @if (!_collapsed()) {
+      <div
+        [class]="NAV_CHILDREN_WRAPPER"
+        [style.grid-template-rows]="_isExpanded() ? '1fr' : '0fr'">
+        <div [class]="NAV_CHILDREN_INNER">
+          <div [class]="NAV_CHILDREN_LIST">
+            <ng-content></ng-content>
+          </div>
         </div>
       </div>
-    </div>
+    }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,