codexly-ui 0.10.0 → 0.10.2

package/fesm2022/codexly-ui.mjs

@@ -2491,17 +2491,32 @@ class ClxTooltipService {
         this._animate.animate(el, { animation: 'fadeIn', duration: 160, trigger: 'manual', fillMode: 'both' });
     }
     /** Hides the bubble, but only if `trigger` is the element that currently owns it — a hover-out
-     *  from an element that already lost ownership (a newer hover-in interrupted it) is a no-op. */
+     *  from an element that already lost ownership (a newer hover-in interrupted it) is a no-op.
+     *  Relies on the 'animationend' DOM event to know when the fade-out finished — but that event
+     *  can simply never fire (backgrounded tab throttling animations, layout thrashing from a route
+     *  change interrupting the transition, etc.), which would leave the promise unresolved forever
+     *  and _owner never cleared — since this bubble lives outside any component's lifecycle (a
+     *  singleton appended straight to document.body), nothing else would ever hide it again. A hard
+     *  fallback timeout guarantees the bubble is actually hidden and ownership released regardless of
+     *  whether the CSS event cooperates. */
     hide(trigger) {
         if (!this._isBrowser || this._owner !== trigger || !this._ref)
             return;
         this._hiding = true;
         trigger.removeAttribute('aria-describedby');
         const el = this._ref.location.nativeElement;
+        const settle = () => {
+            if (this._owner !== trigger || !this._hiding)
+                return;
+            el.style.visibility = 'hidden';
+            this._owner = null;
+            this._hiding = false;
+        };
+        const fallback = setTimeout(settle, 400);
         this._animate.animate(el, { animation: 'fadeOut', duration: 120, trigger: 'manual', fillMode: 'forwards' })
             .then(() => {
-            if (this._owner === trigger && this._hiding)
-                this._owner = null;
+            clearTimeout(fallback);
+            settle();
         });
     }
     /** Synchronous, no fade — used on touchend/click so the bubble can't linger over UI the
@@ -8028,6 +8043,16 @@ class ClxNativeOverlayService {
     _injector = inject(Injector);
     /** Block body scroll like CDK used to */
     _scrollBlocked = 0;
+    // Overlays (modals, drawers, …) mount straight to document.body, outside the router-outlet
+    // tree — a route navigation never tears them down on its own. Tracked here so callers (e.g. an
+    // auth interceptor forcing sign-out on session expiry) can close whatever's open instead of
+    // leaving a modal visually stuck on top of the page the user gets redirected to.
+    _active = new Set();
+    /** Force-closes every currently mounted overlay — no exit animation, immediate DOM removal. */
+    destroyAll() {
+        for (const ref of [...this._active])
+            ref.destroy();
+    }
     mount(component, injector, options) {
         // ── backdrop ────────────────────────────────────────────────────────────
         let backdropEl = null;
@@ -8062,12 +8087,14 @@ class ClxNativeOverlayService {
             backdrop: backdropEl,
             container,
             destroy: () => {
+                this._active.delete(overlayRef);
                 compRef.destroy();
                 backdropEl?.remove();
                 container.remove();
                 this._unblockScroll();
             },
         };
+        this._active.add(overlayRef);
         return { compRef, overlayRef };
     }
     _blockScroll() {
@@ -11557,6 +11584,11 @@ class ClxPaginationComponent {
     _destroyRef = inject(DestroyRef);
     // ── FormControl interno para el select de pageSize ─────────────────────────
     _pageSizeCtrl = new FormControl(null);
+    /** True once the user has explicitly picked a pageSize from the select — after that, their
+     *  choice is respected even if a later filter shrinks totalItems below it. Until then, a
+     *  caller-provided default (e.g. 20) that exceeds a small totalItems is auto-corrected down
+     *  to the smallest available option, so the select never opens pre-selected on the largest value. */
+    _userTouchedPageSize = false;
     constructor() {
         // Sincroniza el pageSize model → FormControl cada vez que cambia desde afuera
         effect(() => {
@@ -11565,11 +11597,26 @@ class ClxPaginationComponent {
                 this._pageSizeCtrl.setValue(ps, { emitEvent: false });
             }
         });
+        // Mientras el usuario no haya elegido un pageSize a propósito, si el default provisto por el
+        // padre excede totalItems, se ajusta al más pequeño disponible en vez de quedar seleccionado
+        // como si fuera el "más grande elegido".
+        effect(() => {
+            if (this._userTouchedPageSize)
+                return;
+            const total = this.totalItems();
+            if (!total || total <= 0)
+                return;
+            const smallest = this._pageSizeOptions()[0]?.value;
+            if (smallest != null && this.pageSize() > total && smallest !== this.pageSize()) {
+                this.pageSize.set(smallest);
+            }
+        });
         // Sincroniza el FormControl → pageSize model cuando el usuario elige
         this._pageSizeCtrl.valueChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(val => {
             const newSize = Number(val);
             if (!val || !Number.isFinite(newSize) || newSize <= 0 || newSize === this.pageSize())
                 return;
+            this._userTouchedPageSize = true;
             this.pageSize.set(newSize);
             this.currentPage.set(1);
             this.sizeChange.emit({ pageSize: newSize });
@@ -15914,5 +15961,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map