codexly-ui 0.19.3 → 0.19.5

package/fesm2022/codexly-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, model, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, DestroyRef, untracked, ViewChildren, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, contentChildren, ContentChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
+import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, NgOptimizedImage, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, NgControl, TouchedChangeEvent, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -3129,7 +3129,15 @@ class ClxTooltipDirective {
         const { signal } = this._abort;
         host.addEventListener('mouseenter', () => this._scheduleShow(), { signal });
         host.addEventListener('mouseleave', () => this._scheduleHide(), { signal });
-        host.addEventListener('focus', () => this._scheduleShow(), { signal });
+        // :focus-visible, not a bare 'focus' check — a modal/drawer restores focus to its trigger
+        // button programmatically when it closes (standard a11y behavior), which fires 'focus' on
+        // this host with no real hover/keyboard interaction behind it. That reopened the tooltip and
+        // left it stuck floating over the page after the modal was dismissed. :focus-visible only
+        // matches when the browser itself determines the focus came from keyboard navigation, not
+        // from a programmatic .focus() call or a mouse/touch click — exactly the real-vs-restored
+        // distinction needed here.
+        host.addEventListener('focus', () => { if (host.matches(':focus-visible'))
+            this._scheduleShow(); }, { signal });
         host.addEventListener('blur', () => this._scheduleHide(), { signal });
         // Touch devices fire 'mouseenter'/'focus' on tap but never a real
         // 'mouseleave' — dismiss immediately (no fade) so the bubble can't
@@ -17118,12 +17126,13 @@ class ClxProductComponent {
 
         <!-- Image Container -->
         <div [class]="_imageContainerClass()">
-          @if (product()?.main_image) {
+          @if (product()?.main_image; as mainImage) {
             <img
-              [src]="product()!.main_image"
+              [ngSrc]="mainImage"
               [alt]="product()!.name"
               [class]="_imageClass()"
-              [loading]="priority() ? 'eager' : 'lazy'"
+              [priority]="priority()"
+              fill
             />
           } @else {
             <div class="w-full h-full flex items-center justify-center bg-clx-surface-2">
@@ -17212,14 +17221,14 @@ class ClxProductComponent {
         </div>
       </article>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "emphasis", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-product',
                     standalone: true,
-                    imports: [CurrencyPipe, ClxBadgeComponent, ClxButtonComponent, ClxSkeletonComponent, ClxTooltipDirective],
+                    imports: [CurrencyPipe, NgOptimizedImage, ClxBadgeComponent, ClxButtonComponent, ClxSkeletonComponent, ClxTooltipDirective],
                     template: `
     @if (loading()) {
       @if (_h()) {
@@ -17255,12 +17264,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
         <!-- Image Container -->
         <div [class]="_imageContainerClass()">
-          @if (product()?.main_image) {
+          @if (product()?.main_image; as mainImage) {
             <img
-              [src]="product()!.main_image"
+              [ngSrc]="mainImage"
               [alt]="product()!.name"
               [class]="_imageClass()"
-              [loading]="priority() ? 'eager' : 'lazy'"
+              [priority]="priority()"
+              fill
             />
           } @else {
             <div class="w-full h-full flex items-center justify-center bg-clx-surface-2">