codexly-ui 0.4.5 → 0.4.7

package/fesm2022/codexly-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, output, Directive, contentChild, forwardRef, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, contentChild, forwardRef, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, NgControl, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
@@ -782,10 +782,12 @@ class ClxButtonComponent {
     _ripples = signal([], ...(ngDevMode ? [{ debugName: "_ripples" }] : /* istanbul ignore next */ []));
     _nextId = 0;
     _el = inject((ElementRef));
-    /** Static `class="..."` written by the consumer template, captured before the `[class]`
-     *  host binding below overwrites it — otherwise any consumer-supplied classes (e.g.
-     *  positioning utilities like `absolute`/`group-hover:opacity-100`) would be silently lost. */
-    _consumerClass = this._el.nativeElement.getAttribute('class') ?? '';
+    /** Static `class="..."` written by the consumer template. Read via `HostAttributeToken`
+     *  (resolved from the template's static attribute at DI time) rather than
+     *  `ElementRef.nativeElement.getAttribute`, since the `[class]` host binding below hasn't
+     *  necessarily painted yet when the constructor runs — otherwise any consumer-supplied
+     *  classes (e.g. positioning utilities like `absolute`/`top-1`) would be silently lost. */
+    _consumerClass = inject(new HostAttributeToken('class'), { optional: true }) ?? '';
     _inactive = computed(() => this.loading() || this.disabled(), ...(ngDevMode ? [{ debugName: "_inactive" }] : /* istanbul ignore next */ []));
     _badgeClass = computed(() => {
         const t = resolveColor(this.badgeColor());
@@ -848,7 +850,13 @@ class ClxButtonComponent {
             ? resolveRadius(this._themeSvc.config().borderRadius)
             : BUTTON_SHAPE_FIXED[s];
         const overflowClass = (this.badge() !== undefined && this.badge() !== null) ? 'overflow-visible' : 'overflow-hidden';
-        const base = BUTTON_BASE_CLASS.replace('overflow-hidden', overflowClass);
+        // 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);
         const consumer = this._consumerClass ? ` ${this._consumerClass}` : '';
         return `${base} ${colorClass} ${sizeClass} ${shapeClass}${this.block() ? ' w-full' : ''}${consumer}`.trimEnd();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));