codexly-ui 0.0.27 → 0.0.28

package/fesm2022/codexly-ui.mjs

@@ -11,8 +11,6 @@ import { Chart, LineController, BarController, PieController, DoughnutController
 import * as i1$2 from '@angular/cdk/portal';
 import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
-import { RouterLink, RouterLinkActive, Router, NavigationEnd } from '@angular/router';
-import { filter, map, startWith as startWith$1 } from 'rxjs/operators';
 
 // ── Parse 'red' | 'red-500' → { color, shade } ───────────────────────────────
 function parseColorInput(input) {
@@ -11145,10 +11143,11 @@ 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" }] : []));
-    route = input('', ...(ngDevMode ? [{ debugName: "route" }] : []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    itemClick = output();
     _inheritedColor = signal(null, ...(ngDevMode ? [{ debugName: "_inheritedColor" }] : []));
     _resolvedColor = computed(() => this._inheritedColor() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
     inheritColor(c) { this._inheritedColor.set(c); }
@@ -11170,70 +11169,58 @@ class ClxMenuItemComponent {
         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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    <a
-      [routerLink]="route() || null"
-      routerLinkActive
-      #rla="routerLinkActive"
-      [routerLinkActiveOptions]="{ exact: false }"
-      [class]="rla.isActive ? _activeCls() : _idleCls()"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [class]="active() ? _activeCls() : _idleCls()"
       [title]="collapsed() ? label() : ''"
-      (click)="route() ? null : $event.preventDefault()">
+      (click)="itemClick.emit()">
       @if (icon()) {
-        <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || nested() ? _iconCls() : 'text-slate-500'"></span>
+        <span clx-icon [name]="icon()" size="sm" [class]="active() || nested() ? _iconCls() : 'text-slate-500'"></span>
       }
       @if (!collapsed()) {
-        <span class="flex-1 truncate">{{ label() }}</span>
+        <span class="flex-1 text-left 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 });
+    </button>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-menu-item',
                     standalone: true,
-                    imports: [ClxIconComponent, RouterLink, RouterLinkActive],
+                    imports: [ClxIconComponent],
                     template: `
-    <a
-      [routerLink]="route() || null"
-      routerLinkActive
-      #rla="routerLinkActive"
-      [routerLinkActiveOptions]="{ exact: false }"
-      [class]="rla.isActive ? _activeCls() : _idleCls()"
+    <button
+      type="button"
+      [class]="active() ? _activeCls() : _idleCls()"
       [title]="collapsed() ? label() : ''"
-      (click)="route() ? null : $event.preventDefault()">
+      (click)="itemClick.emit()">
       @if (icon()) {
-        <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || nested() ? _iconCls() : 'text-slate-500'"></span>
+        <span clx-icon [name]="icon()" size="sm" [class]="active() || nested() ? _iconCls() : 'text-slate-500'"></span>
       }
       @if (!collapsed()) {
-        <span class="flex-1 truncate">{{ label() }}</span>
+        <span class="flex-1 text-left truncate">{{ label() }}</span>
       }
-    </a>
+    </button>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 class ClxMenuComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
     _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
     _childItems;
-    _childRoutes = [];
-    _router = inject(Router);
     _destroyRef = inject(DestroyRef);
-    _url = toSignal(this._router.events.pipe(filter(e => e instanceof NavigationEnd), map(() => this._router.url), startWith$1(this._router.url)), { initialValue: this._router.url });
-    _isChildActive = computed(() => {
-        const url = this._url();
-        return this._childRoutes.some(r => r && (url === r || url.startsWith(r + '/')));
-    }, ...(ngDevMode ? [{ debugName: "_isChildActive" }] : []));
     constructor() {
-        effect(() => { if (this._isChildActive())
+        effect(() => { if (this.active())
             this._isExpanded.set(true); });
         effect(() => { if (this.collapsed())
             this._isExpanded.set(false); });
@@ -11243,7 +11230,7 @@ class ClxMenuComponent {
         const geom = this.collapsed() ? 'w-full py-3 px-0 justify-center' : NAV_ITEM_L1;
         const base = `${NAV_ITEM_BASE} ${geom}`;
         const t = resolveColor(this.color());
-        if (this._isChildActive()) {
+        if (this.active()) {
             if (this.collapsed())
                 return `${base} ${t.textSubtle} font-semibold`;
             return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
@@ -11261,15 +11248,13 @@ class ClxMenuComponent {
     }
     _syncChildren() {
         const color = this.color();
-        this._childRoutes = this._childItems
-            .filter(c => !!c.route())
-            .map(c => { c.inheritColor(color); return c.route(); });
+        this._childItems.forEach(c => c.inheritColor(color));
     }
     _toggle() {
         this._isExpanded.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent, descendants: true }], ngImport: i0, template: `
     <button
       type="button"
       [class]="_buttonCls()"
@@ -11342,7 +11327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], _childItems: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], _childItems: [{
                 type: ContentChildren,
                 args: [ClxMenuItemComponent, { descendants: true }]
             }] } });