@basis-ng/primitives 0.0.1-alpha.105 → 0.0.1-alpha.107

package/fesm2022/basis-ng-primitives.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, inject, ElementRef, signal, model, contentChildren, computed, effect, Injectable, contentChild, ViewEncapsulation, HostListener, Directive, forwardRef, linkedSignal, TemplateRef, ChangeDetectorRef, Pipe, afterRenderEffect, RendererFactory2, PLATFORM_ID } from '@angular/core';
+import { input, output, Component, inject, ElementRef, signal, computed, model, booleanAttribute, forwardRef, ChangeDetectionStrategy, contentChildren, effect, Injectable, contentChild, ViewEncapsulation, HostListener, Directive, linkedSignal, TemplateRef, ChangeDetectorRef, Pipe, afterRenderEffect, RendererFactory2, PLATFORM_ID } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX, lucideAArrowUp, lucideAArrowDown, lucideLoaderCircle, lucideLoader, lucideGripVertical } from '@ng-icons/lucide';
+import { lucideX, lucideLoaderCircle, lucideLoader, lucideGripVertical } from '@ng-icons/lucide';
+import { NG_VALUE_ACCESSOR, NgModel } from '@angular/forms';
 import { ActiveDescendantKeyManager, CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i1 from '@angular/cdk/listbox';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { NgModel, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Dialog as Dialog$1, CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
 import { CommonModule, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
@@ -248,50 +248,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
  */
 class Checkbox {
     /**
-     * Current boolean checked state.
+     * Internal checked state for the checkbox.
      */
-    value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    internalValue = signal(false, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
     /**
-     * The host input element reference.
+     * Public checked state exposed to the template bindings.
      */
-    el = inject(ElementRef);
+    checked = computed(() => this.internalValue(), ...(ngDevMode ? [{ debugName: "checked" }] : []));
     /**
-     * Emitted when the checked state changes.
+     * Public two-way binding output emitted on user interaction.
      */
     valueChange = output();
     /**
      * Visual size of the checkbox.
      */
     size = model('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    ngAfterViewInit() {
-        this.value.set(this.el.nativeElement.checked);
+    /**
+     * Disabled flag coming from template bindings.
+     */
+    disabledBinding = input(false, ...(ngDevMode ? [{ debugName: "disabledBinding", transform: booleanAttribute }] : [{ 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" }] : []));
+    /**
+     * Internal change handler for the checkbox.
+     */
+    onChange = () => undefined;
+    /**
+     * Internal touched handler for the checkbox.
+     */
+    onTouched = () => undefined;
+    /**
+     * Toggle the checkbox when the user clicks on it.
+     */
+    onToggle() {
+        if (this.isDisabled()) {
+            return;
+        }
+        const next = !this.checked();
+        this.setChecked(next, true);
+        this.markTouched();
     }
     /**
-     * Toggle the current value and emit the change.
+     * Prevent the page from scrolling when pressing the space key.
      */
-    toggleValue() {
-        const newValue = !this.value();
-        this.value.set(newValue);
-        this.valueChange.emit(newValue);
+    suppressSpace(event) {
+        if (!this.isDisabled()) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * Mark the control as touched.
+     */
+    markTouched() {
+        this.onTouched();
+    }
+    /**
+     * Write the value to the internal form control.
+     * @param value - New value to write.
+     */
+    writeValue(value) {
+        this.internalValue.set(!!value);
+    }
+    /**
+     * Register a change handler for the checkbox.
+     * @param fn - Change callback.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Register a touched handler for the checkbox.
+     * @param fn - Touched callback.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Toggle disabled state on the checkbox.
+     * @param isDisabled - Whether the control is disabled.
+     */
+    setDisabledState(isDisabled) {
+        this.disabledFromControl.set(isDisabled);
+    }
+    /**
+     * Set the checked state internally and emit change events if needed.
+     * @param value - New checked value.
+     * @param emitChange - Whether to emit change events.
+     */
+    setChecked(value, emitChange) {
+        const normalized = !!value;
+        if (this.internalValue() !== normalized) {
+            this.internalValue.set(normalized);
+        }
+        if (emitChange) {
+            this.onChange(normalized);
+            this.valueChange.emit(normalized);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.6", type: Checkbox, isStandalone: true, selector: "input[b-checkbox]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", size: "sizeChange" }, host: { listeners: { "click": "toggleValue()", "keydown.enter": "toggleValue()", "keydown.space": "toggleValue()" }, properties: { "attr.role": "\"checkbox\"", "attr.checked": "value()", "attr.aria-checked": "value()" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: Checkbox, isStandalone: true, selector: "button[b-checkbox]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabledBinding: { classPropertyName: "disabledBinding", publicName: "disabledBinding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", size: "sizeChange" }, host: { attributes: { "type": "\"button\"" }, listeners: { "click": "onToggle()", "keydown.space": "suppressSpace($event)", "blur": "markTouched()" }, properties: { "attr.role": "\"checkbox\"", "attr.aria-checked": "checked()", "attr.data-state": "checked() ? \"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\"" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => Checkbox),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <span class="b-checkbox-indicator" aria-hidden="true">
+      @if (checked()) {
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"
+          />
+        </svg>
+      }
+    </span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: Checkbox, decorators: [{
             type: Component,
             args: [{
-                    selector: 'input[b-checkbox]',
-                    template: ``,
+                    selector: 'button[b-checkbox]',
+                    template: `
+    <span class="b-checkbox-indicator" aria-hidden="true">
+      @if (checked()) {
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 9 9"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z"
+          />
+        </svg>
+      }
+    </span>
+  `,
                     host: {
+                        type: '"button"',
                         '[attr.role]': '"checkbox"',
-                        '[attr.checked]': 'value()',
-                        '[attr.aria-checked]': 'value()',
-                        '(click)': 'toggleValue()',
-                        '(keydown.enter)': 'toggleValue()',
-                        '(keydown.space)': 'toggleValue()',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': 'checked() ? "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"',
+                        '(click)': 'onToggle()',
+                        '(keydown.space)': 'suppressSpace($event)',
+                        '(blur)': 'markTouched()',
                     },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Checkbox),
+                            multi: true,
+                        },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }] } });
+        }], propDecorators: { 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 }] }] } });
 
 /**
  * Presents a list of selectable command options and manages keyboard navigation.
@@ -2188,48 +2322,54 @@ class SelectTrigger {
      */
     disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /**
-     * Whether the trigger is activated.
+     * Whether the trigger has been activated to open the select.
      */
     triggered = signal(false, ...(ngDevMode ? [{ debugName: "triggered" }] : []));
-    /**
-     * Handle click events on the trigger.
-     */
-    handleClick() {
-        this.buttonClicked.emit();
-        this.triggered.set(!this.triggered());
-    }
-    /**
-     * Handle keydown events on the trigger.
-     * @param event - The keyboard event.
-     */
-    handleKeydown(event) {
-        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-            this.buttonClicked.emit();
-            this.triggered.set(event.key === 'ArrowUp');
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: SelectTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: SelectTrigger, isStandalone: true, selector: "button[b-select-trigger]", outputs: { buttonClicked: "buttonClicked" }, host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick()" }, properties: { "disabled": "disabled()" } }, providers: [provideIcons({ lucideAArrowDown, lucideAArrowUp })], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: SelectTrigger, isStandalone: true, selector: "button[b-select-trigger]", outputs: { buttonClicked: "buttonClicked" }, host: { listeners: { "keydown.arrowUp": "buttonClicked.emit()", "keydown.arrowDown": "buttonClicked.emit()", "click": "buttonClicked.emit()" }, properties: { "disabled": "disabled()" } }, ngImport: i0, template: `
     <ng-content />
-    <ng-icon [name]="triggered() ? 'lucide-a-arrow-up' : 'lucide-a-arrow-down'" />
-  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] });
+    <svg
+      [class.b-select-triggered]="triggered()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-chevron-down-icon lucide-chevron-down"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  `, isInline: true, styles: [":host .b-select-triggered{transform:rotate(180deg)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: SelectTrigger, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'button[b-select-trigger]',
-                    imports: [NgIcon],
-                    template: `
+            args: [{ selector: 'button[b-select-trigger]', template: `
     <ng-content />
-    <ng-icon [name]="triggered() ? 'lucide-a-arrow-up' : 'lucide-a-arrow-down'" />
-  `,
-                    host: {
-                        '(keydown)': 'handleKeydown($event)',
-                        '(click)': 'handleClick()',
+    <svg
+      [class.b-select-triggered]="triggered()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-chevron-down-icon lucide-chevron-down"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  `, host: {
+                        '(keydown.arrowUp)': 'buttonClicked.emit()',
+                        '(keydown.arrowDown)': 'buttonClicked.emit()',
+                        '(click)': 'buttonClicked.emit()',
                         '[disabled]': 'disabled()',
-                    },
-                    providers: [provideIcons({ lucideAArrowDown, lucideAArrowUp })],
-                }]
+                    }, styles: [":host .b-select-triggered{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { buttonClicked: [{ type: i0.Output, args: ["buttonClicked"] }] } });
 
 /**
@@ -2325,6 +2465,7 @@ class Select {
      */
     handleOverlayAttached() {
         this.overlay()?.attachEmitter.subscribe(() => {
+            this.selectTrigger()?.triggered.set(true);
             if (this.value().length === 0) {
                 this.selectContent()?.el.nativeElement.focus();
                 return;
@@ -2345,6 +2486,7 @@ class Select {
     handleOverlayDetached() {
         this.overlay()?.detachEmitter.subscribe(() => {
             this.overlay()?.closeOverlay();
+            this.selectTrigger()?.triggered.set(false);
         });
     }
     /**