codexly-ui 0.19.4 → 0.19.6

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';
@@ -1247,17 +1247,24 @@ class ClxButtonGroupComponent {
     _groupClass = computed(() => {
         const isVertical = this.orientation() === 'vertical';
         const dir = isVertical ? 'flex-col' : 'flex-row';
-        const gap = this.attached() ? 'gap-0' : 'gap-2';
-        return `inline-flex items-center ${dir} ${gap}`;
+        if (!this.attached())
+            return `inline-flex items-center ${dir} gap-2`;
+        // Attached = one segmented control: only the outer corners stay rounded and neighbouring
+        // borders overlap (no double line). The hovered/focused button is raised so its full border
+        // and focus ring are never hidden under the next one.
+        const joined = isVertical
+            ? '[&>*:not(:first-child)]:!rounded-t-none [&>*:not(:last-child)]:!rounded-b-none [&>*:not(:first-child)]:-mt-0.5'
+            : '[&>*:not(:first-child)]:!rounded-l-none [&>*:not(:last-child)]:!rounded-r-none [&>*:not(:first-child)]:-ml-0.5';
+        return `inline-flex items-stretch ${dir} gap-0 ${joined} [&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10`;
     }, ...(ngDevMode ? [{ debugName: "_groupClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxButtonGroupComponent, isStandalone: true, selector: "clx-button-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, ngImport: i0, template: `
-    @if (label()) {
-      <span class="text-sm font-medium text-clx-text-label leading-none">{{ label() }}</span>
-    }
-    <div [class]="_groupClass()">
-      <ng-content />
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxButtonGroupComponent, isStandalone: true, selector: "clx-button-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, attached: { classPropertyName: "attached", publicName: "attached", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, ngImport: i0, template: `
+    @if (label()) {
+      <span class="text-sm font-medium text-clx-text-label leading-none">{{ label() }}</span>
+    }
+    <div [class]="_groupClass()">
+      <ng-content />
+    </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonGroupComponent, decorators: [{
@@ -1265,13 +1272,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{
                     selector: 'clx-button-group',
                     standalone: true,
-                    template: `
-    @if (label()) {
-      <span class="text-sm font-medium text-clx-text-label leading-none">{{ label() }}</span>
-    }
-    <div [class]="_groupClass()">
-      <ng-content />
-    </div>
+                    template: `
+    @if (label()) {
+      <span class="text-sm font-medium text-clx-text-label leading-none">{{ label() }}</span>
+    }
+    <div [class]="_groupClass()">
+      <ng-content />
+    </div>
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17126,12 +17133,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">
@@ -17220,14 +17228,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()) {
@@ -17263,12 +17271,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">