codexly-ui 0.12.36 → 0.12.38

package/fesm2022/codexly-ui.mjs

@@ -5015,8 +5015,16 @@ class ClxCheckboxComponent {
     _handleBlur() {
         this._onTouched();
     }
+    /** The host's (click) toggles the checkbox for any click inside it — including clicks on a link
+     *  projected via ng-content (e.g. "Acepto los <a>Términos</a>"), which would otherwise both
+     *  navigate AND flip the checkbox. Stops propagation only when the click originated on (or
+     *  inside) an <a>, so the rest of the projected text still toggles normally. */
+    _onLabelClick(event) {
+        if (event.target?.closest('a'))
+            event.stopPropagation();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCheckboxComponent, isStandalone: true, selector: "clx-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "_toggle()", "keydown.space": "_onSpace($event)" }, properties: { "style.cursor": "_disabled() ? \"not-allowed\" : \"pointer\"", "style.pointer-events": "_disabled() ? \"none\" : null", "attr.aria-checked": "_checked()", "attr.tabindex": "_disabled() ? -1 : 0" }, classAttribute: "inline-flex items-center gap-2 select-none" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCheckboxComponent, isStandalone: true, selector: "clx-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "checkbox" }, listeners: { "click": "_toggle()", "keydown.space": "_onSpace($event)" }, properties: { "style.cursor": "_disabled() ? \"not-allowed\" : \"pointer\"", "style.pointer-events": "_disabled() ? \"none\" : null", "attr.aria-checked": "_checked()", "attr.tabindex": "_disabled() ? -1 : 0" }, classAttribute: "inline-flex items-start gap-2 select-none" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClxCheckboxComponent),
@@ -5040,6 +5048,10 @@ class ClxCheckboxComponent {
     </div>
     @if (label()) {
       <span [class]="_labelClass()">{{ label() }}</span>
+    } @else {
+      <span [class]="_labelClass()" (click)="_onLabelClick($event)">
+        <ng-content></ng-content>
+      </span>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -5074,12 +5086,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     </div>
     @if (label()) {
       <span [class]="_labelClass()">{{ label() }}</span>
+    } @else {
+      <span [class]="_labelClass()" (click)="_onLabelClick($event)">
+        <ng-content></ng-content>
+      </span>
     }
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        class: 'inline-flex items-center gap-2 select-none',
+                        class: 'inline-flex items-start gap-2 select-none',
                         '[style.cursor]': '_disabled() ? "not-allowed" : "pointer"',
                         '[style.pointer-events]': '_disabled() ? "none" : null',
                         role: 'checkbox',
@@ -9020,6 +9036,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 +9260,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 +9392,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 +9498,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 +9704,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 +9801,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: [{