codexly-ui 0.12.36 → 0.12.37

package/fesm2022/codexly-ui.mjs

@@ -9020,6 +9020,12 @@ class ClxEditorComponent {
      *  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 */ []));
+    /** Adds an extra toolbar button (only rendered when provided) that inserts a raw HTML block at
+     *  the cursor — e.g. an ERP's "poster" template resolved against a chosen product/variant, where
+     *  the result is a whole <table> block, not a single <img>, so imagePicker's fixed <img>-only
+     *  output doesn't fit. The returned html is inserted as-is via insertHTML, no sanitization beyond
+     *  what insertHTML/_sanitizePaste already does for pasted content. */
+    blockPicker = input(undefined, ...(ngDevMode ? [{ debugName: "blockPicker" }] : /* istanbul ignore next */ []));
     // ── View ─────────────────────────────────────────────────────────────────
     _bodyEl;
     _sourceEl;
@@ -9238,6 +9244,20 @@ class ClxEditorComponent {
         const ref = this._modal.open(ClxEditorImageModalComponent, { size: 'sm' });
         ref.afterClosed().then((result) => insert(result));
     }
+    _openBlockPicker() {
+        const picker = this.blockPicker();
+        if (!picker)
+            return;
+        picker.fn().then(result => {
+            if (!result?.html)
+                return;
+            this._restoreRange();
+            this._bodyEl.nativeElement.focus();
+            document.execCommand('insertHTML', false, result.html);
+            this._emitChange();
+            this._tick.update(v => v + 1);
+        });
+    }
     // ── Range save/restore ────────────────────────────────────────────────────
     _saveRange() {
         const sel = window.getSelection();
@@ -9356,7 +9376,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 }, imagePicker: { classPropertyName: "imagePicker", publicName: "imagePicker", 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 }, blockPicker: { classPropertyName: "blockPicker", publicName: "blockPicker", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClxEditorComponent),
@@ -9462,6 +9482,25 @@ class ClxEditorComponent {
             </button>
 
             <div class="clx-editor-divider mx-1"></div>
+
+            <!-- Custom HTML block insert (e.g. an ERP's "insert poster" flow) -->
+            @if (blockPicker(); as picker) {
+              <button
+                clx-button
+                type="button"
+                variant="ghost"
+                [color]="_color()"
+                size="xs"
+                shape="rounded"
+                [icon]="picker.icon"
+                [iconOnly]="true"
+                [title]="picker.title"
+                (mousedown)="_saveRange()"
+                (click)="_openBlockPicker()">
+              </button>
+
+              <div class="clx-editor-divider mx-1"></div>
+            }
           }
 
           <!-- HTML source toggle -->
@@ -9649,6 +9688,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             </button>
 
             <div class="clx-editor-divider mx-1"></div>
+
+            <!-- Custom HTML block insert (e.g. an ERP's "insert poster" flow) -->
+            @if (blockPicker(); as picker) {
+              <button
+                clx-button
+                type="button"
+                variant="ghost"
+                [color]="_color()"
+                size="xs"
+                shape="rounded"
+                [icon]="picker.icon"
+                [iconOnly]="true"
+                [title]="picker.title"
+                (mousedown)="_saveRange()"
+                (click)="_openBlockPicker()">
+              </button>
+
+              <div class="clx-editor-divider mx-1"></div>
+            }
           }
 
           <!-- HTML source toggle -->
@@ -9727,7 +9785,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 }] }], imagePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePicker", 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 }] }], blockPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockPicker", required: false }] }], _bodyEl: [{
                 type: ViewChild,
                 args: ['bodyEl', { static: false }]
             }], _sourceEl: [{