codexly-ui 0.12.35 → 0.12.36

package/fesm2022/codexly-ui.mjs

@@ -8676,6 +8676,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }] });
 
+/** Generic "insert image by URL" fallback for clx-editor's image button — used only when the host
+ *  app doesn't provide its own imagePicker() (see ClxEditorComponent), since this library has no
+ *  way to reach an app-specific catalog/media backend itself. */
+class ClxEditorImageModalComponent {
+    _modalRef = inject(CLX_MODAL_REF, { optional: true });
+    _themeSvc = inject(ClxThemeService);
+    _primaryColor = computed(() => this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_primaryColor" }] : /* istanbul ignore next */ []));
+    _form = new FormGroup({
+        url: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.pattern(/^https?:\/\/.+/)] }),
+        alt: new FormControl('', { nonNullable: true }),
+    });
+    _urlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "_urlInvalid" }] : /* istanbul ignore next */ []));
+    _confirm() {
+        const url = this._form.controls.url.value.trim();
+        const alt = this._form.controls.alt.value.trim();
+        if (!url || this._form.controls.url.invalid) {
+            this._urlInvalid.set(true);
+            return;
+        }
+        this._modalRef?.close({ url, alt });
+    }
+    _cancel() {
+        this._modalRef?.close(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxEditorImageModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: ClxEditorImageModalComponent, isStandalone: true, selector: "clx-editor-image-modal", ngImport: i0, template: `
+    <clx-modal
+      size="sm"
+      [confirmButton]="{ text: 'Insertar', color: _primaryColor() }"
+      [cancelButton]="{ text: 'Cancelar', color: 'slate', variant: 'ghost' }"
+      [showCancelButton]="true"
+      (confirmClick)="_confirm()"
+      (cancelClick)="_cancel()">
+
+      <span clx-modal-title class="text-base font-semibold text-clx-text-label">
+        Insertar imagen
+      </span>
+
+      <form [formGroup]="_form" class="space-y-4" (ngSubmit)="_confirm()">
+        <clx-input
+          label="URL de la imagen"
+          placeholder="https://ejemplo.com/imagen.jpg"
+          formControlName="url"
+          [status]="_urlInvalid() ? 'error' : 'default'"
+          statusMessage="Ingresa una URL válida">
+        </clx-input>
+        <clx-input
+          label="Texto alternativo"
+          placeholder="Descripción de la imagen"
+          formControlName="alt">
+        </clx-input>
+      </form>
+
+    </clx-modal>
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxModalComponent, selector: "clx-modal", inputs: ["size", "showClose", "confirmButton", "cancelButton", "showCancelButton"], outputs: ["confirmClick", "cancelClick"] }, { kind: "component", type: ClxInputComponent, selector: "clx-input", inputs: ["label", "placeholder", "type", "color", "hint", "prefixIcon", "suffixIcon", "prefixText", "suffixText", "status", "statusMessage", "size", "value", "disabled", "autocomplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxEditorImageModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-editor-image-modal',
+                    standalone: true,
+                    imports: [ClxModalComponent, ClxInputComponent, ReactiveFormsModule],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <clx-modal
+      size="sm"
+      [confirmButton]="{ text: 'Insertar', color: _primaryColor() }"
+      [cancelButton]="{ text: 'Cancelar', color: 'slate', variant: 'ghost' }"
+      [showCancelButton]="true"
+      (confirmClick)="_confirm()"
+      (cancelClick)="_cancel()">
+
+      <span clx-modal-title class="text-base font-semibold text-clx-text-label">
+        Insertar imagen
+      </span>
+
+      <form [formGroup]="_form" class="space-y-4" (ngSubmit)="_confirm()">
+        <clx-input
+          label="URL de la imagen"
+          placeholder="https://ejemplo.com/imagen.jpg"
+          formControlName="url"
+          [status]="_urlInvalid() ? 'error' : 'default'"
+          statusMessage="Ingresa una URL válida">
+        </clx-input>
+        <clx-input
+          label="Texto alternativo"
+          placeholder="Descripción de la imagen"
+          formControlName="alt">
+        </clx-input>
+      </form>
+
+    </clx-modal>
+  `,
+                }]
+        }] });
+
 const EDITOR_SIZE_MAP = {
     sm: { minH: 'min-h-[120px]', maxH: 'max-h-[200px]', text: 'text-sm', label: 'text-xs font-medium', hint: 'text-xs', toolbar: 'p-1 gap-0.5' },
     md: { minH: 'min-h-[180px]', maxH: 'max-h-[320px]', text: 'text-sm', label: 'text-sm font-medium', hint: 'text-xs', toolbar: 'p-1.5 gap-0.5' },
@@ -8881,6 +8978,7 @@ const TOOLBAR_GROUPS = [
     ],
     [
         { cmd: 'createLink', icon: 'link', title: 'Enlace' },
+        { cmd: 'insertImage', icon: 'image', title: 'Imagen' },
         { cmd: 'removeFormat', icon: 'format_clear', title: 'Limpiar formato' },
         { cmd: 'undo', icon: 'undo', title: 'Deshacer' },
         { cmd: 'redo', icon: 'redo', title: 'Rehacer' },
@@ -8917,6 +9015,11 @@ class ClxEditorComponent {
     statusMessage = input('', ...(ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Overrides the toolbar's Image button: when provided, clicking it calls this instead of
+     *  opening the generic "insert by URL" modal (ClxEditorImageModalComponent) — lets a host app
+     *  plug in its own picker (e.g. an ERP's product/variant image browser) without this library
+     *  needing to know about that app's catalog backend. Resolve to undefined/null to cancel. */
+    imagePicker = input(undefined, ...(ngDevMode ? [{ debugName: "imagePicker" }] : /* istanbul ignore next */ []));
     // ── View ─────────────────────────────────────────────────────────────────
     _bodyEl;
     _sourceEl;
@@ -9070,6 +9173,10 @@ class ClxEditorComponent {
             this._openLinkModal();
             return;
         }
+        if (cmd === 'insertImage') {
+            this._openImageModal();
+            return;
+        }
         this._bodyEl.nativeElement.focus();
         this._restoreRange();
         document.execCommand(cmd, false, arg);
@@ -9110,6 +9217,27 @@ class ClxEditorComponent {
             this._tick.update(v => v + 1);
         });
     }
+    // ── Image insert ──────────────────────────────────────────────────────────
+    _openImageModal() {
+        this._saveRange();
+        const picker = this.imagePicker();
+        const insert = (result) => {
+            if (!result?.url)
+                return;
+            this._restoreRange();
+            this._bodyEl.nativeElement.focus();
+            const alt = (result.alt ?? '').replace(/"/g, '&quot;');
+            document.execCommand('insertHTML', false, `<img src="${result.url}" alt="${alt}" style="max-width:100%;height:auto;" />`);
+            this._emitChange();
+            this._tick.update(v => v + 1);
+        };
+        if (picker) {
+            picker().then(insert);
+            return;
+        }
+        const ref = this._modal.open(ClxEditorImageModalComponent, { size: 'sm' });
+        ref.afterClosed().then((result) => insert(result));
+    }
     // ── Range save/restore ────────────────────────────────────────────────────
     _saveRange() {
         const sel = window.getSelection();
@@ -9228,7 +9356,7 @@ class ClxEditorComponent {
         this._cdr.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxEditorComponent, isStandalone: true, selector: "clx-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxEditorComponent, isStandalone: true, selector: "clx-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusMessage: { classPropertyName: "statusMessage", publicName: "statusMessage", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, imagePicker: { classPropertyName: "imagePicker", publicName: "imagePicker", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClxEditorComponent),
@@ -9599,7 +9727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <p [class]="_sizeCfg().hint + ' text-gray-400'">{{ hint() }}</p>
     }
   `, host: { class: 'flex flex-col gap-1.5' }, styles: [".clx-editor-body:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}.clx-editor-body:focus{outline:none}.clx-editor-body p{margin:0 0 .4em}.clx-editor-body p:last-child{margin-bottom:0}.clx-editor-body h1{font-size:1.5em;font-weight:700;margin:.5em 0}.clx-editor-body h2{font-size:1.25em;font-weight:600;margin:.5em 0}.clx-editor-body h3{font-size:1.1em;font-weight:600;margin:.5em 0}.clx-editor-body ul,.clx-editor-body ol{padding-left:1.5em;margin:.35em 0}.clx-editor-body li{margin:.1em 0}.clx-editor-body blockquote{border-left:3px solid #e2e8f0;padding-left:.75em;color:#64748b;margin:.4em 0}.clx-editor-body code{background:#f1f5f9;border-radius:3px;padding:.1em .3em;font-size:.875em;font-family:ui-monospace,monospace}.clx-editor-body a{color:#6366f1;text-decoration:underline}.clx-editor-body hr{border:none;border-top:1px solid #e2e8f0;margin:.6em 0}.clx-editor-color-btn{position:relative;overflow:hidden}.clx-editor-color-btn input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0}.clx-editor-toolbar-select clx-select .flex.flex-col{gap:0!important}.clx-editor-source{width:100%;resize:none;border:none;outline:none;background:#0f172a;color:#e2e8f0;font-family:ui-monospace,Cascadia Code,Fira Code,monospace;font-size:.8125rem;line-height:1.6;padding:1rem;tab-size:2}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _bodyEl: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], imagePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePicker", required: false }] }], _bodyEl: [{
                 type: ViewChild,
                 args: ['bodyEl', { static: false }]
             }], _sourceEl: [{
@@ -17933,5 +18061,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, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, 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, 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, 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, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map