codexly-ui 0.12.37 → 0.12.39

package/fesm2022/codexly-ui.mjs

@@ -4973,7 +4973,7 @@ class ClxCheckboxComponent {
     _onTouched = () => { };
     _sizeConfig = computed(() => CHECKBOX_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _boxClass = computed(() => {
-        const base = `${this._sizeConfig().box} flex items-center justify-center rounded border-2 transition-colors duration-200`;
+        const base = `${this._sizeConfig().box} shrink-0 flex items-center justify-center rounded border-2 transition-colors duration-200`;
         if (this._disabled()) {
             return this._checked()
                 ? `${base} border-clx-border bg-clx-border text-white`
@@ -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',