codexly-ui 0.10.3 → 0.10.5

package/fesm2022/codexly-ui.mjs

@@ -4,11 +4,11 @@ import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, D
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, NgControl, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
+import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError, filter } from 'rxjs';
 import * as i1 from '@angular/cdk/overlay';
 import { ScrollStrategyOptions, OverlayModule } from '@angular/cdk/overlay';
 import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 
 // ── Parse 'red' | 'red-500' → { color, shade } ───────────────────────────────
 function parseColorInput(input) {
@@ -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()',
@@ -9442,6 +9448,14 @@ class ClxAppLayoutComponent {
         const zone = inject(NgZone, { optional: true });
         this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
         this._document = inject(DOCUMENT);
+        // On mobile the sidebar is an overlay drawer over the page content — leaving it open after
+        // the user picks a menu item would hide the very page they just navigated to. Desktop is
+        // unaffected: there the sidebar is a permanent rail, not an overlay, so it should stay as-is.
+        const router = inject(Router, { optional: true });
+        router?.events.pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => {
+            if (this._isMobile())
+                this._sidebarOpen.set(false);
+        });
     }
     _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : /* istanbul ignore next */ []));
     _isExpanded = computed(() => !this.collapsed() || this._hovered(), ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));