codexly-ui 0.13.5 → 0.14.0

package/fesm2022/codexly-ui.mjs

@@ -2788,6 +2788,15 @@ class ClxAnimateService {
             void element.offsetHeight;
         const animClass = `${PREFIX}${config.animation}`;
         const isInfinite = config.repeat === 'infinite';
+        // A fillMode: 'forwards' animation (an exit fade/slide, e.g. clx-toast's playExitAnimation)
+        // is almost always followed by the caller destroying the element on the same tick its promise
+        // resolves — stripping animClass in _cleanup right then would drop animation-fill-mode's hold
+        // on the last keyframe, snapping the element back to its static CSS state (opaque, in place)
+        // for one paintable frame before removal, which read as a flash/"ghost" re-appearance. Classes
+        // are only stripped for a non-forwards run; a forwards run keeps them and instead resets
+        // them at the START of runAnimation's own reflow-forced restart path above, so a persisted
+        // element that's re-animated later (e.g. clx-animate-directive on hover) still resets cleanly.
+        const keepClassesOnEnd = config.fillMode === 'forwards';
         element.style.setProperty('--clx-anim-duration', `${config.duration}ms`);
         element.style.setProperty('--clx-anim-delay', `${config.delay}ms`);
         element.style.setProperty('--clx-anim-repeat', isInfinite ? 'infinite' : String(config.repeat ?? 1));
@@ -2809,7 +2818,12 @@ class ClxAnimateService {
         return new Promise(resolve => {
             const handleEnd = (ev) => {
                 ev.stopPropagation();
-                this._cleanup(element, animClass);
+                if (keepClassesOnEnd) {
+                    this._cleanups.delete(element);
+                }
+                else {
+                    this._cleanup(element, animClass);
+                }
                 this._runningCount.update(c => Math.max(0, c - 1));
                 resolve();
             };
@@ -14990,6 +15004,158 @@ 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';
@@ -18705,5 +18871,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, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, detectClxCardBrand, isClxCardExpired, 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, 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 };
 //# sourceMappingURL=codexly-ui.mjs.map