ngx-tethys 19.1.0-next.6 → 19.1.0-next.8

package/fesm2022/ngx-tethys-list.mjs

@@ -1,15 +1,14 @@
 import * as i0 from '@angular/core';
-import { input, Component, inject, Renderer2, ElementRef, NgZone, ChangeDetectorRef, EventEmitter, forwardRef, Output, Input, ContentChildren, HostBinding, ChangeDetectionStrategy, contentChild, NgModule } from '@angular/core';
+import { input, Component, inject, Renderer2, ElementRef, NgZone, ChangeDetectorRef, computed, output, effect, forwardRef, ContentChildren, ChangeDetectionStrategy, contentChild, NgModule } from '@angular/core';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import { coerceBooleanProperty, dom, helpers, keycodes } from 'ngx-tethys/util';
 import { ScrollToService } from 'ngx-tethys/core';
 import { ThyListOption, THY_LIST_OPTION_PARENT_COMPONENT, ThyOptionModule } from 'ngx-tethys/shared';
-import { Subscription } from 'rxjs';
-import { startWith } from 'rxjs/operators';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { SelectionModel } from '@angular/cdk/collections';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { startWith } from 'rxjs/operators';
 import { ThyAvatar, ThyAvatarModule } from 'ngx-tethys/avatar';
 
 /**
@@ -71,62 +70,68 @@ class ThySelectionList {
         this.elementRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
         this.changeDetectorRef = inject(ChangeDetectorRef);
-        this._selectionChangesUnsubscribe$ = Subscription.EMPTY;
         this.hostRenderer = useHostRenderer();
-        this.layout = 'list';
-        this._isList = true;
-        this._isSelectionList = true;
-        this.multiple = true;
-        this.isLayoutGrid = false;
-        this.spaceEnabled = true;
+        /**
+         * 改变 grid item 的选择模式，使其支持多选
+         */
+        this.multiple = input(true, { alias: 'thyMultiple', transform: coerceBooleanProperty });
+        /**
+         * 绑定键盘事件的容器
+         * @type HTMLElement | ElementRef | string
+         * @default thy-selection-list 组件绑定的元素
+         */
+        this.thyBindKeyEventContainer = input();
+        /**
+         * 出现滚动条的容器
+         * @type HTMLElement | ElementRef | string
+         * @default thy-selection-list 组件绑定的元素
+         */
+        this.thyScrollContainer = input();
+        /**
+         * 键盘事件触发 Before 调用，如果返回 false 则停止继续执行
+         */
+        this.thyBeforeKeydown = input();
+        /**
+         * Option Value 唯一的 Key，用于存储哪些选择被选中的唯一值，只有 Option 的 thyValue 是对象的时才可以传入该选项
+         */
+        this.thyUniqueKey = input();
+        /**
+         * 比较2个选项的 Value 是否相同
+         */
+        this.thyCompareWith = input();
+        /**
+         * grid item 的展示样式
+         * @type list | grid
+         */
+        this.layout = input('list', { alias: 'thyLayout' });
+        this.isLayoutGrid = computed(() => this.layout() === 'grid');
+        /**
+         * 是否自动激活第一项
+         */
+        this.thyAutoActiveFirstItem = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 改变 grid item 的大小，支持默认以及 sm 两种大小
+         * @type sm | md | lg
+         */
+        this.thySize = input();
+        /**
+         * 是否按下空格切换聚焦选项
+         */
+        this.thySpaceKeyEnabled = input(true, { transform: coerceBooleanProperty });
         /**
          * 每当选项的选定状态发生更改时，都会触发更改事件
-         * @type EventEmitter<ThySelectionListChange>
          */
-        this.thySelectionChange = new EventEmitter();
-        this._onTouched = () => { };
-        this._onChange = (_) => { };
-    }
-    /**
-     * 改变 grid item 的选择模式，使其支持多选
-     * @default true
-     */
-    set thyMultiple(value) {
-        const previousValue = this.multiple;
-        this.multiple = value;
-        if (previousValue !== this.multiple) {
-            this._instanceSelectionModel();
-        }
+        this.thySelectionChange = output();
+        this.onTouched = () => { };
+        this.onChange = (_) => { };
+        effect(() => {
+            this.setListSize();
+        });
+        effect(() => {
+            this.instanceSelectionModel();
+        });
     }
-    /**
-     * grid item 的展示样式
-     * @type list | grid
-     * @default list
-     */
-    set thyLayout(value) {
-        this.layout = value;
-        this.isLayoutGrid = value === 'grid';
-    }
-    /**
-     * 是否自动激活第一项
-     */
-    set thyAutoActiveFirstItem(value) {
-        this.autoActiveFirstItem = value;
-    }
-    /**
-     * 改变 grid item 的大小，支持默认以及 sm 两种大小
-     * @type sm | md | lg
-     */
-    set thySize(value) {
-        this._setListSize(value);
-    }
-    /**
-     * 是否按下空格切换聚焦选项
-     */
-    set thySpaceKeyEnabled(value) {
-        this.spaceEnabled = value;
-    }
-    _emitChangeEvent(option, event) {
+    emitChangeEvent(option, event) {
         this.thySelectionChange.emit({
             source: this,
             value: option.thyValue(),
@@ -135,86 +140,91 @@ class ThySelectionList {
             selected: this.isSelected(option)
         });
     }
-    _emitModelValueChange() {
+    emitModelValueChange() {
+        const uniqueKey = this.thyUniqueKey();
         if (this.options) {
             let selectedValues = this.selectionModel.selected;
-            if (this.thyUniqueKey) {
+            if (uniqueKey) {
                 selectedValues = selectedValues.map(selectedValue => {
                     const selectedOption = this.options.find(option => {
-                        return option.thyValue()[this.thyUniqueKey] === selectedValue;
+                        return option.thyValue()[uniqueKey] === selectedValue;
                     });
                     if (selectedOption) {
                         return selectedOption.thyValue();
                     }
                     else {
-                        return this._modelValues.find(value => {
-                            return value[this.thyUniqueKey] === selectedValue;
+                        return this.modelValues.find(value => {
+                            return value[uniqueKey] === selectedValue;
                         });
                     }
                 });
             }
-            this._modelValues = selectedValues;
+            this.modelValues = selectedValues;
             let changeValue = selectedValues;
-            if (!this.multiple && selectedValues && selectedValues.length > 0) {
+            if (!this.multiple() && selectedValues && selectedValues.length > 0) {
                 changeValue = selectedValues[0];
             }
-            this._onChange(changeValue);
+            this.onChange(changeValue);
         }
     }
-    _toggleFocusedOption(event) {
-        if (this._keyManager.activeItem) {
+    toggleFocusedOption(event) {
+        if (this.keyManager.activeItem) {
             this.ngZone.run(() => {
-                this.toggleOption(this._keyManager.activeItem, event);
+                this.toggleOption(this.keyManager.activeItem, event);
             });
         }
     }
-    _initializeFocusKeyManager() {
-        this._keyManager = new ActiveDescendantKeyManager(this.options)
+    initializeFocusKeyManager() {
+        this.keyManager = new ActiveDescendantKeyManager(this.options)
             .withWrap()
             // .withTypeAhead()
             // Allow disabled items to be focusable. For accessibility reasons, there must be a way for
             // screenreader users, that allows reading the different options of the list.
             .skipPredicate(() => false);
     }
-    _instanceSelectionModel() {
-        this.selectionModel = new SelectionModel(this.multiple);
+    instanceSelectionModel() {
+        this.selectionModel = new SelectionModel(this.multiple());
     }
-    _getElementBySelector(element) {
+    getElementBySelector(element) {
         return dom.getHTMLElementBySelector(element, this.elementRef);
     }
-    _compareValue(value1, value2) {
-        if (this.thyCompareWith) {
-            const compareFn = this.thyCompareWith;
+    compareValue(value1, value2) {
+        const thyUniqueKey = this.thyUniqueKey();
+        const thyCompareWith = this.thyCompareWith();
+        if (thyCompareWith) {
+            const compareFn = thyCompareWith;
             return compareFn(value1, value2);
         }
-        else if (this.thyUniqueKey) {
-            return value1 && value1[this.thyUniqueKey] === value2 && value2[this.thyUniqueKey];
+        else if (thyUniqueKey) {
+            return value1 && value1[thyUniqueKey] === value2 && value2[thyUniqueKey];
         }
         else {
             return value1 === value2;
         }
     }
-    _getOptionSelectionValue(option) {
+    getOptionSelectionValue(option) {
         const thyValue = option.thyValue();
         if (thyValue) {
-            return this.thyUniqueKey ? thyValue[this.thyUniqueKey] : thyValue;
+            const thyUniqueKey = this.thyUniqueKey();
+            return thyUniqueKey ? thyValue[thyUniqueKey] : thyValue;
         }
         else {
             return option;
         }
     }
-    _setSelectionByValues(values) {
+    setSelectionByValues(values) {
         this.selectionModel.clear();
         values.forEach(value => {
-            if (this.thyUniqueKey) {
-                this.selectionModel.select(value[this.thyUniqueKey]);
+            const thyUniqueKey = this.thyUniqueKey();
+            if (thyUniqueKey) {
+                this.selectionModel.select(value[thyUniqueKey]);
             }
             else {
                 this.selectionModel.select(value);
             }
         });
     }
-    _setAllOptionsSelected(toIsSelected) {
+    setAllOptionsSelected(toIsSelected) {
         // Keep track of whether anything changed, because we only want to
         // emit the changed event when something actually changed.
         let hasChanged = false;
@@ -226,23 +236,24 @@ class ThySelectionList {
             }
         });
         if (hasChanged) {
-            this._emitModelValueChange();
+            this.emitModelValueChange();
         }
     }
-    _getOptionByValue(value) {
+    getOptionByValue(value) {
         return this.options.find(option => {
-            return this._compareValue(option.thyValue(), value);
+            return this.compareValue(option.thyValue(), value);
         });
     }
-    _getActiveOption() {
-        if (this._keyManager.activeItem) {
-            return this._getOptionByValue(this._keyManager.activeItem.thyValue());
+    getActiveOption() {
+        if (this.keyManager.activeItem) {
+            return this.getOptionByValue(this.keyManager.activeItem.thyValue());
         }
         else {
             return null;
         }
     }
-    _setListSize(size) {
+    setListSize() {
+        const size = this.thySize();
         for (const key in listSizesMap) {
             if (listSizesMap.hasOwnProperty(key)) {
                 this.hostRenderer.removeClass(listSizesMap[key]);
@@ -253,55 +264,57 @@ class ThySelectionList {
         }
     }
     ngOnInit() {
-        const bindKeyEventElement = this._getElementBySelector(this.thyBindKeyEventContainer);
+        const bindKeyEventElement = this.getElementBySelector(this.thyBindKeyEventContainer());
         this.ngZone.runOutsideAngular(() => {
-            this._bindKeyEventUnsubscribe = this.renderer.listen(bindKeyEventElement, 'keydown', this.onKeydown.bind(this));
+            this.bindKeyEventUnsubscribe = this.renderer.listen(bindKeyEventElement, 'keydown', this.onKeydown.bind(this));
         });
-        this._instanceSelectionModel();
+        this.instanceSelectionModel();
     }
     writeValue(value) {
         if ((typeof ngDevMode === 'undefined' || ngDevMode) && value) {
-            if (this.multiple && !helpers.isArray(value)) {
+            const multiple = this.multiple();
+            if (multiple && !helpers.isArray(value)) {
                 throw new Error(`The multiple selection ngModel must be an array.`);
             }
-            if (!this.multiple && helpers.isArray(value)) {
+            if (!multiple && helpers.isArray(value)) {
                 throw new Error(`The single selection ngModel should not be an array.`);
             }
         }
         const values = helpers.isArray(value) ? value : value ? [value] : [];
-        this._modelValues = values;
+        this.modelValues = values;
         if (this.options) {
-            this._setSelectionByValues(values);
+            this.setSelectionByValues(values);
         }
         this.changeDetectorRef.markForCheck();
     }
     registerOnChange(fn) {
-        this._onChange = fn;
+        this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this._onTouched = fn;
+        this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
     onKeydown(event) {
-        if (this.thyBeforeKeydown) {
+        const thyBeforeKeydown = this.thyBeforeKeydown();
+        if (thyBeforeKeydown) {
             // stop key down event
-            const isContinue = this.thyBeforeKeydown(event);
+            const isContinue = thyBeforeKeydown(event);
             if (!isContinue) {
                 return;
             }
         }
         const keyCode = event.keyCode || event.which;
-        const manager = this._keyManager;
+        const manager = this.keyManager;
         const previousFocusIndex = manager.activeItemIndex;
         switch (keyCode) {
             case keycodes.SPACE:
             case keycodes.ENTER:
-                if (keyCode === keycodes.SPACE && !this.spaceEnabled) {
+                if (keyCode === keycodes.SPACE && !this.thySpaceKeyEnabled()) {
                     return;
                 }
-                this._toggleFocusedOption(event);
+                this.toggleFocusedOption(event);
                 // Always prevent space from scrolling the page since the list has focus
                 event.preventDefault();
                 break;
@@ -311,64 +324,63 @@ class ThySelectionList {
         if ((keyCode === keycodes.UP_ARROW || keyCode === keycodes.DOWN_ARROW) &&
             event.shiftKey &&
             manager.activeItemIndex !== previousFocusIndex) {
-            this._toggleFocusedOption(event);
+            this.toggleFocusedOption(event);
         }
     }
     toggleOption(option, event) {
         if (option && !option.thyDisabled()) {
-            this.selectionModel.toggle(this._getOptionSelectionValue(option));
+            this.selectionModel.toggle(this.getOptionSelectionValue(option));
             // Emit a change event because the focused option changed its state through user
             // interaction.
-            this._emitModelValueChange();
-            this._emitChangeEvent(option, event);
+            this.emitModelValueChange();
+            this.emitChangeEvent(option, event);
         }
     }
     setActiveOption(option) {
-        this._keyManager.updateActiveItem(option); // .updateActiveItemIndex(this._getOptionIndex(option));
+        this.keyManager.updateActiveItem(option); // .updateActiveItemIndex(this._getOptionIndex(option));
     }
     scrollIntoView(option) {
-        const scrollContainerElement = dom.getHTMLElementBySelector(this.thyScrollContainer, this.elementRef);
+        const scrollContainerElement = dom.getHTMLElementBySelector(this.thyScrollContainer(), this.elementRef);
         ScrollToService.scrollToElement(option.element.nativeElement, scrollContainerElement);
     }
     isSelected(option) {
-        return this.selectionModel.isSelected(this._getOptionSelectionValue(option));
+        return this.selectionModel.isSelected(this.getOptionSelectionValue(option));
     }
     clearActiveItem() {
-        if (this._keyManager.activeItem) {
-            this._keyManager.setActiveItem(-1);
+        if (this.keyManager.activeItem) {
+            this.keyManager.setActiveItem(-1);
         }
     }
     determineClearActiveItem() {
-        if (!this._getActiveOption()) {
+        if (!this.getActiveOption()) {
             this.clearActiveItem();
         }
     }
     /** Selects all of the options. */
     selectAll() {
-        this._setAllOptionsSelected(true);
+        this.setAllOptionsSelected(true);
     }
     /** Deselects all of the options. */
     deselectAll() {
-        this._setAllOptionsSelected(false);
+        this.setAllOptionsSelected(false);
     }
     ngAfterContentInit() {
-        this._initializeFocusKeyManager();
+        this.initializeFocusKeyManager();
         this.options.changes.pipe(startWith(true)).subscribe(() => {
-            if (this.autoActiveFirstItem) {
-                if (!this._keyManager.activeItem || this.options.toArray().indexOf(this._keyManager.activeItem) < 0) {
-                    this._keyManager.setFirstItemActive();
+            if (this.thyAutoActiveFirstItem()) {
+                if (!this.keyManager.activeItem || this.options.toArray().indexOf(this.keyManager.activeItem) < 0) {
+                    this.keyManager.setFirstItemActive();
                 }
             }
         });
     }
     ngOnDestroy() {
-        this._selectionChangesUnsubscribe$.unsubscribe();
-        if (this._bindKeyEventUnsubscribe) {
-            this._bindKeyEventUnsubscribe();
+        if (this.bindKeyEventUnsubscribe) {
+            this.bindKeyEventUnsubscribe();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectionList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: ThySelectionList, isStandalone: true, selector: "thy-selection-list,[thy-selection-list]", inputs: { thyMultiple: ["thyMultiple", "thyMultiple", coerceBooleanProperty], thyBindKeyEventContainer: "thyBindKeyEventContainer", thyScrollContainer: "thyScrollContainer", thyBeforeKeydown: "thyBeforeKeydown", thyUniqueKey: "thyUniqueKey", thyCompareWith: "thyCompareWith", thyLayout: "thyLayout", thyAutoActiveFirstItem: ["thyAutoActiveFirstItem", "thyAutoActiveFirstItem", coerceBooleanProperty], thySize: "thySize", thySpaceKeyEnabled: ["thySpaceKeyEnabled", "thySpaceKeyEnabled", coerceBooleanProperty] }, outputs: { thySelectionChange: "thySelectionChange" }, host: { properties: { "class.thy-list": "this._isList", "class.thy-selection-list": "this._isSelectionList", "class.thy-multiple-selection-list": "this.multiple", "class.thy-grid-list": "this.isLayoutGrid" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThySelectionList, isStandalone: true, selector: "thy-selection-list,[thy-selection-list]", inputs: { multiple: { classPropertyName: "multiple", publicName: "thyMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyBindKeyEventContainer: { classPropertyName: "thyBindKeyEventContainer", publicName: "thyBindKeyEventContainer", isSignal: true, isRequired: false, transformFunction: null }, thyScrollContainer: { classPropertyName: "thyScrollContainer", publicName: "thyScrollContainer", isSignal: true, isRequired: false, transformFunction: null }, thyBeforeKeydown: { classPropertyName: "thyBeforeKeydown", publicName: "thyBeforeKeydown", isSignal: true, isRequired: false, transformFunction: null }, thyUniqueKey: { classPropertyName: "thyUniqueKey", publicName: "thyUniqueKey", isSignal: true, isRequired: false, transformFunction: null }, thyCompareWith: { classPropertyName: "thyCompareWith", publicName: "thyCompareWith", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "thyLayout", isSignal: true, isRequired: false, transformFunction: null }, thyAutoActiveFirstItem: { classPropertyName: "thyAutoActiveFirstItem", publicName: "thyAutoActiveFirstItem", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thySpaceKeyEnabled: { classPropertyName: "thySpaceKeyEnabled", publicName: "thySpaceKeyEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thySelectionChange: "thySelectionChange" }, host: { properties: { "class.thy-multiple-selection-list": "multiple()", "class.thy-grid-list": "isLayoutGrid()" }, classAttribute: "thy-list thy-selection-list" }, providers: [
             {
                 provide: THY_LIST_OPTION_PARENT_COMPONENT,
                 useExisting: ThySelectionList
@@ -396,48 +408,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             multi: true
                         }
                     ],
+                    host: {
+                        class: 'thy-list thy-selection-list',
+                        '[class.thy-multiple-selection-list]': 'multiple()',
+                        '[class.thy-grid-list]': 'isLayoutGrid()'
+                    },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { _isList: [{
-                type: HostBinding,
-                args: [`class.thy-list`]
-            }], _isSelectionList: [{
-                type: HostBinding,
-                args: [`class.thy-selection-list`]
-            }], multiple: [{
-                type: HostBinding,
-                args: [`class.thy-multiple-selection-list`]
-            }], isLayoutGrid: [{
-                type: HostBinding,
-                args: [`class.thy-grid-list`]
-            }], options: [{
+        }], ctorParameters: () => [], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [ThyListOption, { descendants: true }]
-            }], thyMultiple: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyBindKeyEventContainer: [{
-                type: Input
-            }], thyScrollContainer: [{
-                type: Input
-            }], thyBeforeKeydown: [{
-                type: Input
-            }], thyUniqueKey: [{
-                type: Input
-            }], thyCompareWith: [{
-                type: Input
-            }], thyLayout: [{
-                type: Input
-            }], thyAutoActiveFirstItem: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thySize: [{
-                type: Input
-            }], thySpaceKeyEnabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thySelectionChange: [{
-                type: Output
             }] } });
 
 /**