codexly-ui 0.10.77 → 0.10.78

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 {