@spartan-ng/brain 0.0.1-alpha.613 → 0.0.1-alpha.628

package/fesm2022/spartan-ng-brain-command.mjs

@@ -1,8 +1,8 @@
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, ElementRef, Injector, input, linkedSignal, computed, signal, effect, forwardRef, Directive, output, contentChild, contentChildren, untracked, afterNextRender, TemplateRef, ViewContainerRef, PLATFORM_ID, booleanAttribute } from '@angular/core';
+import { InjectionToken, inject, forwardRef, Injector, input, booleanAttribute, linkedSignal, output, model, contentChildren, effect, untracked, afterNextRender, Directive, TemplateRef, ViewContainerRef, computed, ElementRef, signal, PLATFORM_ID } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { startWith } from 'rxjs/operators';
 import { isPlatformBrowser } from '@angular/common';
 
@@ -11,11 +11,6 @@ function provideBrnCommandItem(command) {
     return { provide: BrnCommandItemToken, useExisting: command };
 }
 
-const BrnCommandSearchInputToken = new InjectionToken('BrnCommandSearchInputToken');
-function provideBrnCommandSearchInput(command) {
-    return { provide: BrnCommandSearchInputToken, useExisting: command };
-}
-
 const BrnCommandToken = new InjectionToken('BrnCommandToken');
 function provideBrnCommand(command) {
     return { provide: BrnCommandToken, useExisting: command };
@@ -34,74 +29,11 @@ function injectBrnCommandConfig() {
     return inject(BrnCommandConfigToken, { optional: true }) ?? defaultConfig;
 }
 
-class BrnCommandSearchInput extends DefaultValueAccessor {
-    _destroyRef = inject(DestroyRef);
-    _el = inject(ElementRef);
-    _injector = inject(Injector);
-    _command = injectBrnCommand();
-    /** The initial value of the search input */
-    value = input('');
-    /** @internal The mutable value of the search input */
-    mutableValue = linkedSignal(this.value);
-    /** @internal The "real" value of the search input */
-    valueState = computed(() => this.mutableValue());
-    /** The id of the active option */
-    _activeDescendant = signal(undefined);
-    ngOnInit() {
-        this._command.keyManager.change
-            .pipe(startWith(this._command.keyManager.activeItemIndex), takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => this._activeDescendant.set(this._command.keyManager.activeItem?.id()));
-        effect(() => {
-            this._el.nativeElement.value = this.valueState();
-        }, { injector: this._injector });
-    }
-    /** Listen for changes to the input value */
-    onInput() {
-        this.mutableValue.set(this._el.nativeElement.value);
-    }
-    /** Listen for keydown events */
-    onKeyDown(event) {
-        this._command.keyManager.onKeydown(event);
-    }
-    /** CONROL VALUE ACCESSOR */
-    writeValue(value) {
-        super.writeValue(value);
-        if (value) {
-            this.mutableValue.set(value);
-        }
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnCommandSearchInput, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnCommandSearchInput, isStandalone: true, selector: "input[brnCommandSearchInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list" }, listeners: { "keydown": "onKeyDown($event)", "input": "onInput()" }, properties: { "attr.aria-activedescendant": "_activeDescendant()" } }, providers: [
-            provideBrnCommandSearchInput(BrnCommandSearchInput),
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => BrnCommandSearchInput)),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnCommandSearchInput, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[brnCommandSearchInput]',
-                    providers: [
-                        provideBrnCommandSearchInput(BrnCommandSearchInput),
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef((() => BrnCommandSearchInput)),
-                            multi: true,
-                        },
-                    ],
-                    host: {
-                        role: 'combobox',
-                        'aria-autocomplete': 'list',
-                        '[attr.aria-activedescendant]': '_activeDescendant()',
-                        '(keydown)': 'onKeyDown($event)',
-                        '(input)': 'onInput()',
-                    },
-                }]
-        }] });
-
+const BRN_COMMAND_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => BrnCommand),
+    multi: true,
+};
 class BrnCommand {
     static _id = 0;
     _injector = inject(Injector);
@@ -110,20 +42,23 @@ class BrnCommand {
     id = input(`brn-command-${++BrnCommand._id}`);
     /** A custom filter function to use when searching. */
     filter = input(this._config.filter);
+    /** Whether the command is disabled */
+    disabled = input(false, { transform: booleanAttribute });
+    _disabled = linkedSignal(this.disabled);
+    /** @internal The disabled state as a readonly signal */
+    disabledState = this._disabled.asReadonly();
     /** when the selection has changed */
     valueChange = output();
-    /** @internal The search query */
-    search = computed(() => this._searchInput()?.valueState() ?? '');
-    /** Access the search input if present */
-    _searchInput = contentChild(BrnCommandSearchInput, {
-        descendants: true,
-    });
+    /** The current search query. */
+    search = model('');
     /** @internal Access all the items within the command */
     items = contentChildren(BrnCommandItemToken, {
         descendants: true,
     });
     /** @internal The key manager for managing active descendant */
     keyManager = new ActiveDescendantKeyManager(this.items, this._injector);
+    _onChange;
+    _onTouched;
     constructor() {
         this.keyManager
             .withVerticalOrientation()
@@ -155,14 +90,29 @@ class BrnCommand {
     selectActiveItem() {
         this.keyManager.activeItem?.selected.emit();
     }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        if (value) {
+            this.search.set(value);
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnCommand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnCommand, isStandalone: true, selector: "[brnCommand]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "selectActiveItem()" }, properties: { "id": "id()" } }, providers: [provideBrnCommand(BrnCommand)], queries: [{ propertyName: "_searchInput", first: true, predicate: BrnCommandSearchInput, descendants: true, isSignal: true }, { propertyName: "items", predicate: BrnCommandItemToken, descendants: true, isSignal: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.7", type: BrnCommand, isStandalone: true, selector: "[brnCommand]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", search: "searchChange" }, host: { listeners: { "keydown.enter": "selectActiveItem()" }, properties: { "id": "id()" } }, providers: [provideBrnCommand(BrnCommand), BRN_COMMAND_VALUE_ACCESSOR], queries: [{ propertyName: "items", predicate: BrnCommandItemToken, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnCommand, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnCommand]',
-                    providers: [provideBrnCommand(BrnCommand)],
+                    providers: [provideBrnCommand(BrnCommand), BRN_COMMAND_VALUE_ACCESSOR],
                     host: {
                         '[id]': 'id()',
                         '(keydown.enter)': 'selectActiveItem()',
@@ -221,6 +171,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                 }]
         }] });
 
+const BrnCommandInputToken = new InjectionToken('BrnCommandInputToken');
+function provideBrnCommandInput(command) {
+    return { provide: BrnCommandInputToken, useExisting: command };
+}
+
+class BrnCommandInput {
+    static _id = 0;
+    _el = inject(ElementRef);
+    _command = injectBrnCommand();
+    _initialId = `brn-command-input-${++BrnCommandInput._id}`;
+    /** The id of the command input */
+    id = input(this._initialId, {
+        transform: (value) => value || this._initialId,
+    });
+    _disabled = this._command.disabledState;
+    /** The id of the active option */
+    _activeDescendant = signal(undefined);
+    constructor() {
+        this._command.keyManager.change
+            .pipe(startWith(this._command.keyManager.activeItemIndex), takeUntilDestroyed())
+            .subscribe(() => this._activeDescendant.set(this._command.keyManager.activeItem?.id()));
+        effect(() => {
+            const search = this._command.search();
+            if (this._el.nativeElement.value !== search) {
+                this._el.nativeElement.value = search;
+            }
+        });
+    }
+    /** Listen for changes to the input value */
+    onInput() {
+        this._command.search.set(this._el.nativeElement.value);
+    }
+    /** Listen for keydown events */
+    onKeyDown(event) {
+        this._command.keyManager.onKeydown(event);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnCommandInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.7", type: BrnCommandInput, isStandalone: true, selector: "input[brnCommandInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "type": "text", "autocomplete": "off", "autocorrect": "off", "spellcheck": "false" }, listeners: { "keydown": "onKeyDown($event)", "input": "onInput()" }, properties: { "id": "id()", "attr.aria-activedescendant": "_activeDescendant()", "attr.disabled": "_disabled() ? \"\" : null" } }, providers: [provideBrnCommandInput(BrnCommandInput)], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BrnCommandInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[brnCommandInput]',
+                    providers: [provideBrnCommandInput(BrnCommandInput)],
+                    host: {
+                        '[id]': 'id()',
+                        role: 'combobox',
+                        'aria-autocomplete': 'list',
+                        '[attr.aria-activedescendant]': '_activeDescendant()',
+                        '[attr.disabled]': '_disabled() ? "" : null',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(input)': 'onInput()',
+                        type: 'text',
+                        autocomplete: 'off',
+                        autocorrect: 'off',
+                        spellcheck: 'false',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
 class BrnCommandItem {
     static _id = 0;
     _platform = inject(PLATFORM_ID);
@@ -354,9 +364,9 @@ const BrnCommandImports = [
     BrnCommand,
     BrnCommandEmpty,
     BrnCommandGroup,
+    BrnCommandInput,
     BrnCommandItem,
     BrnCommandList,
-    BrnCommandSearchInput,
     BrnCommandSeparator,
 ];
 
@@ -364,5 +374,5 @@ const BrnCommandImports = [
  * Generated bundle index. Do not edit.
  */
 
-export { BrnCommand, BrnCommandEmpty, BrnCommandGroup, BrnCommandImports, BrnCommandItem, BrnCommandItemToken, BrnCommandList, BrnCommandSearchInput, BrnCommandSearchInputToken, BrnCommandSeparator, BrnCommandToken, injectBrnCommand, injectBrnCommandConfig, provideBrnCommand, provideBrnCommandConfig, provideBrnCommandItem, provideBrnCommandSearchInput };
+export { BRN_COMMAND_VALUE_ACCESSOR, BrnCommand, BrnCommandEmpty, BrnCommandGroup, BrnCommandImports, BrnCommandInput, BrnCommandInputToken, BrnCommandItem, BrnCommandItemToken, BrnCommandList, BrnCommandSeparator, BrnCommandToken, injectBrnCommand, injectBrnCommandConfig, provideBrnCommand, provideBrnCommandConfig, provideBrnCommandInput, provideBrnCommandItem };
 //# sourceMappingURL=spartan-ng-brain-command.mjs.map