codexly-ui 0.0.78 → 0.0.80

package/fesm2022/codexly-ui.mjs

@@ -4124,15 +4124,16 @@ class ClxSelectComponent {
     _isInvalid = computed(() => this._wasTouched() && (this._ngControl?.control?.invalid ?? false), ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
     _selectedOptions = computed(() => {
         const vals = this._selectedVals();
-        return this.options().filter(o => vals.includes(o.value));
+        return (this.options() ?? []).filter(o => vals.includes(o.value));
     }, ...(ngDevMode ? [{ debugName: "_selectedOptions" }] : /* istanbul ignore next */ []));
     _filteredOptions = computed(() => {
         if (this.async())
             return this._asyncOptions();
+        const opts = this.options() ?? [];
         const q = (this._searchQuery() ?? '').toLowerCase().trim();
         if (!q)
-            return this.options();
-        return this.options().filter(o => o.label.toLowerCase().includes(q));
+            return opts;
+        return opts.filter(o => o.label.toLowerCase().includes(q));
     }, ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : /* istanbul ignore next */ []));
     _showAsyncPlaceholder = computed(() => this.async() && !this._asyncLoading() && this._asyncOptions().length === 0 && (this._asyncQuery().length < this.minChars()), ...(ngDevMode ? [{ debugName: "_showAsyncPlaceholder" }] : /* istanbul ignore next */ []));
     _displayValue = computed(() => {
@@ -9801,6 +9802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }] } });
 
 const SWITCH_SIZE_MAP = {
+    xs: { track: 'w-7 h-4', thumb: 'w-3 h-3', translate: 'translate-x-3', label: 'text-xs' },
     sm: { track: 'w-9 h-5', thumb: 'w-4 h-4', translate: 'translate-x-4', label: 'text-xs' },
     md: { track: 'w-12 h-6', thumb: 'w-5 h-5', translate: 'translate-x-6', label: 'text-sm' },
     lg: { track: 'w-14 h-7', thumb: 'w-6 h-6', translate: 'translate-x-7', label: 'text-base' },
@@ -9810,10 +9812,9 @@ class ClxSwitchComponent {
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Initial value for standalone use (without FormControl) */
     value = input(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Disabled state for standalone use (without FormControl) */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    changed = output();
     _checked = signal(false, ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
     _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
     _cvaConnected = false;
@@ -9850,14 +9851,20 @@ class ClxSwitchComponent {
     }
     _handleChange(event) {
         const checked = event.target.checked;
-        this._checked.set(checked);
-        this._onChange(checked);
+        if (this._cvaConnected) {
+            this._checked.set(checked);
+            this._onChange(checked);
+        }
+        else {
+            event.target.checked = !checked;
+            this.changed.emit(checked);
+        }
     }
     _handleBlur() {
         this._onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxSwitchComponent, isStandalone: true, selector: "label[clx-switch]", inputs: { color: { classPropertyName: "color", publicName: "color", 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: { properties: { "style.opacity": "_disabled() ? \"0.5\" : null", "style.cursor": "_disabled() ? \"not-allowed\" : \"pointer\"", "style.pointer-events": "_disabled() ? \"none\" : null" }, classAttribute: "relative inline-flex items-center gap-2 select-none" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxSwitchComponent, isStandalone: true, selector: "label[clx-switch]", inputs: { color: { classPropertyName: "color", publicName: "color", 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 } }, outputs: { changed: "changed" }, host: { properties: { "style.opacity": "_disabled() ? \"0.5\" : null", "style.cursor": "_disabled() ? \"not-allowed\" : \"pointer\"", "style.pointer-events": "_disabled() ? \"none\" : null" }, classAttribute: "relative inline-flex items-center gap-2 select-none" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ClxSwitchComponent),
@@ -9917,7 +9924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         '[style.pointer-events]': '_disabled() ? "none" : null',
                     },
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 // ── Size map ─────────────────────────────────────────────────────────────────
 const TEXTAREA_SIZE_MAP = {