codexly-ui 0.10.5 → 0.10.6

package/fesm2022/codexly-ui.mjs

@@ -9771,6 +9771,13 @@ class ClxMenuComponent {
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
+    /** Whether this module has any nested clx-menu-item children. When false and routerLink is set,
+     *  clicking navigates straight through instead of only toggling an (empty) expand arrow — the
+     *  module keeps its normal "Módulos" color either way, only the click behavior and the arrow's
+     *  presence change. See ShellComponent's usage for the real case this covers: a module with no
+     *  options assigned still needs somewhere to go rather than dead-ending on a submenu with nothing
+     *  in it. */
+    hasChildren = input(true, ...(ngDevMode ? [{ debugName: "hasChildren" }] : /* istanbul ignore next */ []));
     _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
     _rla;
     _destroyRef = inject(DestroyRef);
@@ -9808,8 +9815,18 @@ class ClxMenuComponent {
     _toggle() {
         this._isExpanded.update(v => !v);
     }
+    /** With children: the anchor's real navigation is suppressed, click only toggles the submenu
+     *  (the routerLink here exists solely to drive routerLinkActive styling on the row). Without
+     *  children: there's nothing to expand, so the click is left to navigate normally instead. */
+    _onRouterLinkClick(event) {
+        if (!this.hasChildren())
+            return;
+        event.preventDefault();
+        if (!this.collapsed())
+            this._toggle();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 }, style: { classPropertyName: "style", publicName: "style", 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 }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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 }, style: { classPropertyName: "style", publicName: "style", 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 }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
     @if (routerLink()) {
       <a
         [routerLink]="routerLink()"
@@ -9818,19 +9835,21 @@ class ClxMenuComponent {
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
         [class]="_buttonCls(rla.isActive)"
         [title]="collapsed() ? label() : ''"
-        (click)="$event.preventDefault(); !collapsed() && _toggle()">
+        (click)="_onRouterLinkClick($event)">
         @if (icon()) {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
+          @if (hasChildren()) {
+            <span
+              clx-icon
+              name="expand_more"
+              size="sm"
+              [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
+              [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+            </span>
+          }
         }
       </a>
     } @else {
@@ -9881,19 +9900,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
         [class]="_buttonCls(rla.isActive)"
         [title]="collapsed() ? label() : ''"
-        (click)="$event.preventDefault(); !collapsed() && _toggle()">
+        (click)="_onRouterLinkClick($event)">
         @if (icon()) {
           <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate" [class]="rla.isActive ? '' : 'text-clx-text-subtle'">{{ label() }}</span>
-          <span
-            clx-icon
-            name="expand_more"
-            size="sm"
-            [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
-            [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
-          </span>
+          @if (hasChildren()) {
+            <span
+              clx-icon
+              name="expand_more"
+              size="sm"
+              [class]="'shrink-0 transition-transform duration-300 ' + (rla.isActive ? '' : 'text-clx-text-subtle')"
+              [style.transform]="_isExpanded() ? 'rotate(180deg)' : 'rotate(0deg)'">
+            </span>
+          }
         }
       </a>
     } @else {
@@ -9932,7 +9953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", 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 }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], _rla: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], hasChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildren", required: false }] }], _rla: [{
                 type: ViewChild,
                 args: [RouterLinkActive]
             }] } });