@basis-ng/primitives 0.0.1-alpha.140 → 0.0.1-alpha.142

package/fesm2022/basis-ng-primitives.mjs

@@ -800,22 +800,14 @@ class Checkbox {
      */
     size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /**
-     * Disabled flag coming from template bindings.
+     * Whether the checkbox is disabled. Automatically bound by Signal Forms.
      */
-    disabledBinding = input(false, { ...(ngDevMode ? { debugName: "disabledBinding" } : {}), transform: booleanAttribute });
-    /**
-     * Disabled flag controlled by Angular forms APIs.
-     */
-    disabledFromControl = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromControl" }] : []));
-    /**
-     * Combined disabled state exposed to the template bindings.
-     */
-    isDisabled = computed(() => this.disabledBinding() || this.disabledFromControl(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     /**
      * Toggle the checkbox when the user clicks on it.
      */
     onToggle() {
-        if (this.isDisabled()) {
+        if (this.disabled()) {
             return;
         }
         const newValue = !this.value();
@@ -826,17 +818,10 @@ class Checkbox {
      * Prevent the page from scrolling when pressing the space key.
      */
     suppressSpace(event) {
-        if (!this.isDisabled()) {
+        if (!this.disabled()) {
             event.preventDefault();
         }
     }
-    /**
-     * Toggle disabled state on the checkbox.
-     * @param isDisabled - Whether the control is disabled.
-     */
-    setDisabledState(isDisabled) {
-        this.disabledFromControl.set(isDisabled);
-    }
     /**
      * Update the current value (FormValueControl API).
      * @param value - New boolean value to apply.
@@ -846,7 +831,7 @@ class Checkbox {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: Checkbox, isStandalone: true, selector: "button[b-checkbox]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabledBinding: { classPropertyName: "disabledBinding", publicName: "disabledBinding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", size: "sizeChange" }, host: { attributes: { "type": "\"button\"" }, listeners: { "click": "onToggle()", "keydown.space": "suppressSpace($event)" }, properties: { "attr.role": "\"checkbox\"", "attr.aria-checked": "value()", "attr.data-state": "value() ? \"checked\" : \"unchecked\"", "attr.aria-disabled": "isDisabled()", "disabled": "isDisabled()", "attr.data-disabled": "isDisabled() ? \"\" : null", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: Checkbox, isStandalone: true, selector: "button[b-checkbox]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", size: "sizeChange" }, host: { attributes: { "type": "\"button\"" }, listeners: { "click": "onToggle()", "keydown.space": "suppressSpace($event)" }, properties: { "attr.role": "\"checkbox\"", "attr.aria-checked": "value()", "attr.data-state": "value() ? \"checked\" : \"unchecked\"", "attr.aria-disabled": "disabled()", "disabled": "disabled()", "attr.data-disabled": "disabled() ? \"\" : null", "class.b-size-sm": "size() === \"sm\"", "class.b-size-md": "size() === \"md\"", "class.b-size-lg": "size() === \"lg\"" } }, ngImport: i0, template: `
     <span class="b-checkbox-indicator" aria-hidden="true">
       @if (value()) {
         <svg
@@ -894,9 +879,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[attr.role]': '"checkbox"',
                         '[attr.aria-checked]': 'value()',
                         '[attr.data-state]': 'value() ? "checked" : "unchecked"',
-                        '[attr.aria-disabled]': 'isDisabled()',
-                        '[disabled]': 'isDisabled()',
-                        '[attr.data-disabled]': 'isDisabled() ? "" : null',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[disabled]': 'disabled()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[class.b-size-sm]': 'size() === "sm"',
                         '[class.b-size-md]': 'size() === "md"',
                         '[class.b-size-lg]': 'size() === "lg"',
@@ -905,7 +890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], disabledBinding: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledBinding", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Presents a list of selectable command options and manages keyboard navigation.
@@ -2933,6 +2918,8 @@ class Select {
     selectContent = contentChild(SelectContent, ...(ngDevMode ? [{ debugName: "selectContent" }] : []));
     /** Function to display the selected value(s). */
     displayWith = input.required(...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    /** Whether the select is disabled. Automatically bound by Signal Forms. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     /** Current value array for the select. */
     value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Emitted when the value changes. */
@@ -2940,6 +2927,7 @@ class Select {
     constructor() {
         effect(() => this.updateDisplayedValue());
         effect(() => this.handleContentValueChanges());
+        effect(() => this.selectTrigger()?.disabled.set(this.disabled()));
     }
     ngOnInit() {
         this.setupTriggerEvents();
@@ -3014,13 +3002,6 @@ class Select {
             overlay.closeOverlay();
         });
     }
-    /**
-     * Toggle disabled state on the select trigger.
-     * @param isDisabled - Whether the control is disabled.
-     */
-    setDisabledState(isDisabled) {
-        this.selectTrigger()?.disabled.set(isDisabled);
-    }
     /**
      * Update the current value.
      * @param value - New value array to apply.
@@ -3030,7 +3011,7 @@ class Select {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: Select, isStandalone: true, selector: "b-select", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, queries: [{ propertyName: "overlay", first: true, predicate: ConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "selectTrigger", first: true, predicate: SelectTrigger, descendants: true, isSignal: true }, { propertyName: "selectValue", first: true, predicate: SelectValue, descendants: true, isSignal: true }, { propertyName: "selectContent", first: true, predicate: SelectContent, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: Select, isStandalone: true, selector: "b-select", inputs: { displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, queries: [{ propertyName: "overlay", first: true, predicate: ConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "selectTrigger", first: true, predicate: SelectTrigger, descendants: true, isSignal: true }, { propertyName: "selectValue", first: true, predicate: SelectValue, descendants: true, isSignal: true }, { propertyName: "selectContent", first: true, predicate: SelectContent, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: Select, decorators: [{
             type: Component,
@@ -3039,7 +3020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     template: ` <ng-content />`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { overlay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ConnectedOverlay), { isSignal: true }] }], selectTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTrigger), { isSignal: true }] }], selectValue: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValue), { isSignal: true }] }], selectContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectContent), { isSignal: true }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { overlay: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ConnectedOverlay), { isSignal: true }] }], selectTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTrigger), { isSignal: true }] }], selectValue: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectValue), { isSignal: true }] }], selectContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectContent), { isSignal: true }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Directive to automatically focus the select filter input when it is initialized.