codexly-ui 0.10.4 → 0.10.6

package/fesm2022/codexly-ui.mjs

@@ -183,7 +183,7 @@ class ClxIconComponent {
         return `'FILL' ${this.fill() ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${opsz}`;
     }, ...(ngDevMode ? [{ debugName: "_fontVariation" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxIconComponent, isStandalone: true, selector: "span[clx-icon]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_colorClass()", "textContent": "name()", "style.font-size": "_fontSize()", "style.font-variation-settings": "_fontVariation()" }, classAttribute: "material-symbols-outlined" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxIconComponent, isStandalone: true, selector: "span[clx-icon]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "translate": "no" }, properties: { "class": "_colorClass()", "textContent": "name()", "style.font-size": "_fontSize()", "style.font-variation-settings": "_fontVariation()" }, classAttribute: "material-symbols-outlined notranslate" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxIconComponent, decorators: [{
             type: Component,
@@ -194,7 +194,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        class: 'material-symbols-outlined',
+                        // notranslate + translate="no": the icon glyph is rendered via textContent (e.g. "home",
+                        // "person") through the Material Symbols ligature font — browser translate tools see that as
+                        // real text and swap it for the translated word, which breaks the ligature and shows the
+                        // plain word instead of the glyph. Both are needed: Chrome's translate honors the class,
+                        // Firefox/Safari and other translate tooling look for the attribute.
+                        class: 'material-symbols-outlined notranslate',
+                        'translate': 'no',
                         '[class]': '_colorClass()',
                         '[textContent]': 'name()',
                         '[style.font-size]': '_fontSize()',
@@ -9765,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);
@@ -9802,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()"
@@ -9812,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 {
@@ -9875,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 {
@@ -9926,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]
             }] } });