codexly-ui 0.9.0 → 0.10.1

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() {
@@ -11013,6 +11040,7 @@ class ClxToastComponent {
     _colorClass = computed(() => TOAST_COLOR_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_colorClass" }] : /* istanbul ignore next */ []));
     _progressColor = computed(() => TOAST_PROGRESS_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _buttonColor = computed(() => this.entry().type, ...(ngDevMode ? [{ debugName: "_buttonColor" }] : /* istanbul ignore next */ []));
+    _actions = computed(() => this.entry().actions ?? (this.entry().action ? [this.entry().action] : []), ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
     get _card() {
         return this._el.nativeElement.querySelector('.clx-toast-card');
     }
@@ -11042,8 +11070,8 @@ class ClxToastComponent {
             this._paused = false;
     }
     // ─── Action ────────────────────────────────────────────────────────────────
-    _onAction() {
-        this.entry().action?.onClick();
+    _onAction(action) {
+        action.onClick();
         this.dismiss.emit(this.entry().id);
     }
     // ─── Animated exit (called by container before removal) ───────────────────
@@ -11113,18 +11141,22 @@ class ClxToastComponent {
         <p class="text-sm text-clx-text-muted leading-snug wrap-break-word">
           {{ entry().message }}
         </p>
-        @if (entry().action) {
-          <button
-            clx-button
-            type="button"
-            variant="link"
-            [color]="_buttonColor()"
-            size="xs"
-            class="mt-1 -ml-1 h-auto p-0"
-            (click)="_onAction()"
-          >
-            {{ entry().action!.label }}
-          </button>
+        @if (_actions().length) {
+          <div class="flex items-center gap-3 mt-2">
+            @for (a of _actions(); track a.label) {
+              <button
+                clx-button
+                type="button"
+                [variant]="a.variant ?? 'link'"
+                [color]="_buttonColor()"
+                size="xs"
+                [class]="a.variant && a.variant !== 'link' ? '' : '-ml-1 h-auto p-0'"
+                (click)="_onAction(a)"
+              >
+                {{ a.label }}
+              </button>
+            }
+          </div>
         }
       </div>
 
@@ -11184,18 +11216,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <p class="text-sm text-clx-text-muted leading-snug wrap-break-word">
           {{ entry().message }}
         </p>
-        @if (entry().action) {
-          <button
-            clx-button
-            type="button"
-            variant="link"
-            [color]="_buttonColor()"
-            size="xs"
-            class="mt-1 -ml-1 h-auto p-0"
-            (click)="_onAction()"
-          >
-            {{ entry().action!.label }}
-          </button>
+        @if (_actions().length) {
+          <div class="flex items-center gap-3 mt-2">
+            @for (a of _actions(); track a.label) {
+              <button
+                clx-button
+                type="button"
+                [variant]="a.variant ?? 'link'"
+                [color]="_buttonColor()"
+                size="xs"
+                [class]="a.variant && a.variant !== 'link' ? '' : '-ml-1 h-auto p-0'"
+                (click)="_onAction(a)"
+              >
+                {{ a.label }}
+              </button>
+            }
+          </div>
         }
       </div>
 
@@ -15844,6 +15880,7 @@ class ClxToastService {
             animationOut: options.animationOut ?? TOAST_DEFAULTS.animationOut,
             animationDuration: options.animationDuration ?? TOAST_DEFAULTS.animationDuration,
             action: options.action,
+            actions: options.actions,
             removing: false,
         };
         const isBottom = position.startsWith('bottom');
@@ -15904,5 +15941,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