codexly-ui 0.14.1 → 0.14.3

package/fesm2022/codexly-ui.mjs

@@ -9412,6 +9412,11 @@ class ClxModalService {
                 { provide: CLX_MODAL_SIZE, useValue: size },
             ],
         });
+        // The element that had focus right before opening (typically the button that triggered
+        // this modal) — its own hover/focus tooltip, if any, never receives a real blur otherwise:
+        // focus stays parked on it for as long as the modal is open, so switching OS windows while
+        // it's open can leave a hover-triggered tooltip stuck with no blur/mouseleave to dismiss it.
+        const triggerEl = document.activeElement;
         const { compRef, overlayRef } = this._overlay.mount(component, innerInjector, {
             zIndex: 1000,
             backdrop: hasBackdrop,
@@ -9421,6 +9426,11 @@ class ClxModalService {
         panelEl.style.width = `min(calc(100vw - 2rem), ${maxWidth})`;
         panelEl.style.maxWidth = maxWidth;
         panelEl.style.maxHeight = '90vh';
+        // Move focus into the modal so the trigger element actually blurs (see triggerEl above).
+        // tabIndex -1 + outline:none keeps this a pure focus target, not a visible/tabbable stop.
+        panelEl.tabIndex = -1;
+        panelEl.style.outline = 'none';
+        panelEl.focus();
         // Enter animation
         this._animate.animate(panelEl, {
             animation: animationIn,
@@ -9438,6 +9448,9 @@ class ClxModalService {
                 fillMode: 'forwards',
             }).then(() => {
                 overlayRef.destroy();
+                // Restore focus to whatever opened this modal — standard modal a11y practice, and what
+                // lets that element's tooltip (if any) receive a real blur instead of staying stuck.
+                triggerEl?.focus?.();
                 _resolve(result);
             });
         };
@@ -15004,158 +15017,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
-/** Generic sample values keyed by variable name — covers the real {{variable}} vocabulary already
- *  used across Codexly's notification/label templates (see NotificationTypeCatalog on the backend
- *  and LABEL_TEMPLATE_VARS on the frontend), so a preview looks realistic with zero configuration.
- *  A consumer can still override/extend via the `vars` input; this is only the fallback for any
- *  key it doesn't supply. */
-const TEMPLATE_PREVIEW_SAMPLE_VARS = {
-    orderNumber: 'ORD-4471',
-    orderId: 'ORD-4471',
-    amount: '198.000',
-    toStatus: 'Confirmada',
-    fromStatus: 'Pendiente',
-    trackingNumber: 'TRK-88213045',
-    customerName: 'Juan Pérez',
-    customerPhone: '+57 300 123 4567',
-    customerAddress: 'Carrera 45 # 12-34',
-    customerCity: 'Bogotá',
-    customerNeighborhood: 'Chapinero',
-    companyName: 'CodexlyShop',
-    companyStyledName: 'Codexly<span style="color:#f5c400">Shop</span>',
-    companyLogo: '',
-    senderLabel: 'Transportadora',
-    senderName: 'Envía',
-    variantName: 'Casco abatible ICH 3120',
-    variantSku: 'CAS-3120-NEG',
-    sellerName: 'David Medina',
-    referenceId: 'a1b2c3d4-0000-0000-0000-000000000000',
-};
-/** Naive {{key}} → value string replacement — the exact primitive already used by
- *  ShipmentLabelModalComponent (`html.split('{{key}}').join(v)`) and mirrored server-side by
- *  NotificationDispatcher.render() (Java, plain .replace loop, no expressions). Kept here as the
- *  single shared implementation so every consumer (this component, ShipmentLabelModalComponent)
- *  renders previews identically instead of drifting. Unresolved {{key}} placeholders are left
- *  as-is (visible literally), same as the real dispatchers when a var wasn't supplied. */
-function renderClxTemplate(body, vars) {
-    let result = body;
-    for (const [key, value] of Object.entries(vars)) {
-        result = result.split(`{{${key}}}`).join(value);
-    }
-    return result;
-}
-
-/** Read-only live preview of a `{{variable}}` template — for a template EDITOR (notification
- *  templates, shipping label templates, ...) to show what the body will actually look like once
- *  substituted, instead of only exposing the raw markup/placeholders. "Dumb" like ClxNotification/
- *  ClxToast: it never fetches sample data itself — pass real values via `vars`, or rely on the
- *  built-in generic fallbacks (TEMPLATE_PREVIEW_SAMPLE_VARS) for any key you don't supply.
- *
- *  Substitution is the same naive {{key}} → value replace used by the real dispatchers (backend
- *  NotificationDispatcher.render() in Java, and ShipmentLabelModalComponent client-side) — no
- *  expression evaluation, so a Thymeleaf-flavored body (th:if/th:each, used only by the PROMOTION
- *  notification type) will show its raw tags rather than truly rendering; that's a known, accepted
- *  gap, not a bug — this component previews the plain {{var}} vocabulary every other template uses. */
-class ClxTemplatePreviewComponent {
-    _sanitizer = inject(DomSanitizer);
-    /** Raw template body — plain text (toast/in-app) or HTML (rich, e.g. an email body). */
-    body = input('', ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
-    /** Optional separate title/subject, substituted the same way as body. Shown above the message in
-     *  plain-toast/plain-inapp mode; ignored in rich mode (the body itself carries its own heading). */
-    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    mode = input('rich', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    /** Material Symbols icon shown in plain-toast/plain-inapp mode — defaults to 'notifications'. */
-    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Sample values for {{key}} substitution — merged OVER the built-in generic fallbacks
-     *  (TEMPLATE_PREVIEW_SAMPLE_VARS), so you only need to pass the keys you want to control
-     *  (e.g. a real shipment's data) and every other {{var}} still resolves to something readable. */
-    vars = input(undefined, ...(ngDevMode ? [{ debugName: "vars" }] : /* istanbul ignore next */ []));
-    _mergedVars = computed(() => ({
-        ...TEMPLATE_PREVIEW_SAMPLE_VARS,
-        ...(this.vars() ?? {}),
-    }), ...(ngDevMode ? [{ debugName: "_mergedVars" }] : /* istanbul ignore next */ []));
-    _title = computed(() => this.title() ? renderClxTemplate(this.title(), this._mergedVars()) : '', ...(ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []));
-    _renderedText = computed(() => renderClxTemplate(this.body(), this._mergedVars()), ...(ngDevMode ? [{ debugName: "_renderedText" }] : /* istanbul ignore next */ []));
-    _renderedHtml = computed(() => this._sanitizer.bypassSecurityTrustHtml(renderClxTemplate(this.body(), this._mergedVars())), ...(ngDevMode ? [{ debugName: "_renderedHtml" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTemplatePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTemplatePreviewComponent, isStandalone: true, selector: "clx-template-preview", inputs: { body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, vars: { classPropertyName: "vars", publicName: "vars", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @switch (mode()) {
-      @case ('plain-toast') {
-        <div class="flex items-start gap-3.5 w-full rounded-xl border border-clx-border-soft bg-clx-surface px-4 py-3.5">
-          <span class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center bg-clx-primary">
-            <span clx-icon [name]="icon() ?? 'notifications'" size="sm" class="text-white"></span>
-          </span>
-          <div class="flex-1 min-w-0 pt-0.5">
-            @if (_title()) {
-              <p class="text-sm font-semibold leading-snug mb-0.5 text-clx-text-label">{{ _title() }}</p>
-            }
-            <p class="text-sm text-clx-text leading-snug wrap-break-word opacity-80">{{ _renderedText() }}</p>
-          </div>
-        </div>
-      }
-      @case ('plain-inapp') {
-        <div class="flex items-start gap-3 rounded-lg border border-clx-border-soft bg-clx-surface px-3 py-2.5">
-          <span class="flex items-center justify-center rounded-lg shrink-0 w-8.5 h-8.5 mt-0.5 bg-clx-primary-subtle text-clx-primary">
-            <span clx-icon [name]="icon() ?? 'notifications'" size="sm"></span>
-          </span>
-          <div class="flex-1 min-w-0">
-            @if (_title()) {
-              <p class="text-sm font-[600] text-clx-text-label">{{ _title() }}</p>
-            }
-            <p class="mt-0.5 text-sm text-clx-text-muted">{{ _renderedText() }}</p>
-          </div>
-        </div>
-      }
-      @default {
-        <div class="rounded-xl border border-clx-border-soft bg-white overflow-hidden" [innerHTML]="_renderedHtml()"></div>
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTemplatePreviewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clx-template-preview',
-                    standalone: true,
-                    imports: [ClxIconComponent],
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @switch (mode()) {
-      @case ('plain-toast') {
-        <div class="flex items-start gap-3.5 w-full rounded-xl border border-clx-border-soft bg-clx-surface px-4 py-3.5">
-          <span class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center bg-clx-primary">
-            <span clx-icon [name]="icon() ?? 'notifications'" size="sm" class="text-white"></span>
-          </span>
-          <div class="flex-1 min-w-0 pt-0.5">
-            @if (_title()) {
-              <p class="text-sm font-semibold leading-snug mb-0.5 text-clx-text-label">{{ _title() }}</p>
-            }
-            <p class="text-sm text-clx-text leading-snug wrap-break-word opacity-80">{{ _renderedText() }}</p>
-          </div>
-        </div>
-      }
-      @case ('plain-inapp') {
-        <div class="flex items-start gap-3 rounded-lg border border-clx-border-soft bg-clx-surface px-3 py-2.5">
-          <span class="flex items-center justify-center rounded-lg shrink-0 w-8.5 h-8.5 mt-0.5 bg-clx-primary-subtle text-clx-primary">
-            <span clx-icon [name]="icon() ?? 'notifications'" size="sm"></span>
-          </span>
-          <div class="flex-1 min-w-0">
-            @if (_title()) {
-              <p class="text-sm font-[600] text-clx-text-label">{{ _title() }}</p>
-            }
-            <p class="mt-0.5 text-sm text-clx-text-muted">{{ _renderedText() }}</p>
-          </div>
-        </div>
-      }
-      @default {
-        <div class="rounded-xl border border-clx-border-soft bg-white overflow-hidden" [innerHTML]="_renderedHtml()"></div>
-      }
-    }
-  `,
-                }]
-        }], propDecorators: { body: [{ type: i0.Input, args: [{ isSignal: true, alias: "body", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], vars: [{ type: i0.Input, args: [{ isSignal: true, alias: "vars", required: false }] }] } });
-
 // ── Base classes ─────────────────────────────────────────────────────────────
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';
 const TABLE_HEADER_CELL_CLASS = 'px-4 py-3 font-semibold whitespace-nowrap';
@@ -18871,5 +18732,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, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTemplatePreviewComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TEMPLATE_PREVIEW_SAMPLE_VARS, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, parseColorInput, provideCodexlyTheme, renderClxTemplate, 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, ClxCardExpiryInputComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCardNumberInputComponent, ClxCardValidators, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorImageModalComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map