codexly-ui 0.10.77 → 0.10.79

package/fesm2022/codexly-ui.mjs

@@ -925,14 +925,16 @@ class ClxButtonComponent {
         const shapeClass = s === 'rounded'
             ? resolveRadius(this._themeSvc.config().borderRadius)
             : BUTTON_SHAPE_FIXED[s];
-        const overflowClass = (this.badge() !== undefined && this.badge() !== null) ? 'overflow-visible' : 'overflow-hidden';
+        // The host no longer needs to toggle overflow-hidden/-visible for the badge — the ripple has
+        // its own clipped container (.clx-ripple-clip) independent of the host's overflow, so the host
+        // can stay overflow-visible unconditionally without ripple waves escaping the button shape.
         // If the consumer already positions the button (absolute/fixed/sticky), don't force
         // `relative` — same-specificity utility classes are resolved by CSS source order, not
         // template order, so `relative` from the base class can silently win over a consumer's
         // `absolute`, leaving the button positioned in-flow instead of where it was placed.
         const isPositioned = /(^|\s)(absolute|fixed|sticky)(\s|$)/.test(this._consumerClass);
         const base = (isPositioned ? BUTTON_BASE_CLASS.replace(/^relative\s/, '') : BUTTON_BASE_CLASS)
-            .replace('overflow-hidden', overflowClass);
+            .replace('overflow-hidden', 'overflow-visible');
         const consumer = this._consumerClass ? ` ${this._consumerClass}` : '';
         return `${base} ${colorClass} ${sizeClass} ${shapeClass}${this.block() ? ' w-full' : ''}${consumer}`.trimEnd();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
@@ -958,20 +960,22 @@ class ClxButtonComponent {
     @if (icon() && iconPosition() === 'right' && !loading()) {
       <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
     }
-    @for (r of _ripples(); track r.id) {
-      <span
-        class="clx-ripple-wave"
-        [style.background-color]="_rippleColor()"
-        [style.width.px]="r.diameter"
-        [style.height.px]="r.diameter"
-        [style.left.px]="r.x - r.diameter / 2"
-        [style.top.px]="r.y - r.diameter / 2"
-      ></span>
-    }
+    <span class="clx-ripple-clip">
+      @for (r of _ripples(); track r.id) {
+        <span
+          class="clx-ripple-wave"
+          [style.background-color]="_rippleColor()"
+          [style.width.px]="r.diameter"
+          [style.height.px]="r.diameter"
+          [style.left.px]="r.x - r.diameter / 2"
+          [style.top.px]="r.y - r.diameter / 2"
+        ></span>
+      }
+    </span>
     @if (badge() !== undefined && badge() !== null) {
       <span [class]="_badgeClass()">{{ badge() }}</span>
     }
-  `, isInline: true, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSpinnerComponent, selector: "clx-spinner", inputs: ["size", "color", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxButtonComponent, decorators: [{
             type: Component,
@@ -986,16 +990,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     @if (icon() && iconPosition() === 'right' && !loading()) {
       <span clx-icon [name]="icon()!" [size]="_iconSize()"></span>
     }
-    @for (r of _ripples(); track r.id) {
-      <span
-        class="clx-ripple-wave"
-        [style.background-color]="_rippleColor()"
-        [style.width.px]="r.diameter"
-        [style.height.px]="r.diameter"
-        [style.left.px]="r.x - r.diameter / 2"
-        [style.top.px]="r.y - r.diameter / 2"
-      ></span>
-    }
+    <span class="clx-ripple-clip">
+      @for (r of _ripples(); track r.id) {
+        <span
+          class="clx-ripple-wave"
+          [style.background-color]="_rippleColor()"
+          [style.width.px]="r.diameter"
+          [style.height.px]="r.diameter"
+          [style.left.px]="r.x - r.diameter / 2"
+          [style.top.px]="r.y - r.diameter / 2"
+        ></span>
+      }
+    </span>
     @if (badge() !== undefined && badge() !== null) {
       <span [class]="_badgeClass()">{{ badge() }}</span>
     }
@@ -1006,7 +1012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         '[attr.disabled]': '_inactive() ? true : null',
                         '[attr.aria-busy]': 'loading()',
                         '(click)': '_onRipple($event)',
-                    }, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"] }]
+                    }, styles: ["@keyframes clx-ripple-anim{to{transform:scale(4);opacity:0}}.clx-ripple-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}.clx-ripple-wave{position:absolute;border-radius:50%;transform:scale(0);animation:clx-ripple-anim .6s linear;pointer-events:none}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }] } });
 
 class ClxButtonGroupComponent {
@@ -1358,6 +1364,9 @@ class ClxCardComponent {
     shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Set to false to drop the card's border entirely (e.g. a shadow-only card matching a
+     *  product-cart-style layout) regardless of variant/color. */
+    border = input(true, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
     /** Auto-generated header icon (Material Symbols name) — shown in a rounded primary-subtle
      *  square next to headerTitle. Ignored when a manual [clxCardHeader] block is projected. */
     icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
@@ -1388,14 +1397,19 @@ class ClxCardComponent {
         const t = resolveColor(this._color());
         const shadowInput = this.shadow();
         const hover = this.hover() ? `transition-shadow duration-200 hover:shadow-lg cursor-pointer` : '';
+        const showBorder = this.border();
         let variantClass;
         if (variant === 'elevated') {
             const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : 'shadow-md';
-            variantClass = `bg-clx-surface ${shadowClass} border ${t.borderLight}`;
+            variantClass = showBorder
+                ? `bg-clx-surface ${shadowClass} border ${t.borderLight}`
+                : `bg-clx-surface ${shadowClass} border border-transparent`;
         }
         else if (variant === 'outlined') {
             const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : '';
-            variantClass = `bg-clx-surface border ${t.border} ${shadowClass}`;
+            variantClass = showBorder
+                ? `bg-clx-surface border ${t.border} ${shadowClass}`
+                : `bg-clx-surface border border-transparent ${shadowClass}`;
         }
         else {
             const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : '';
@@ -1405,7 +1419,7 @@ class ClxCardComponent {
         return `flex flex-col ${resolveContainerRadius(this._themeSvc.config().borderRadius)} overflow-hidden w-full ${variantClass} ${hover} ${disabledCls}`.trim();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_headerActionsSlot", first: true, predicate: ClxCardHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_headerActionsSlot", first: true, predicate: ClxCardHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (_hasHeader()) {
       <div class="clx-card-header flex items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <ng-content select="[clxCardHeader]" />
@@ -1497,7 +1511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _headerActionsSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderActionsDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _headerActionsSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderActionsDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
 
 const CLX_LIST_CONTEXT = new InjectionToken('CLX_LIST_CONTEXT');
 // ── Variant maps ──────────────────────────────────────────────────────────────