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

package/fesm2022/ngx-tethys-shared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, ViewContainerRef, effect, Directive, ElementRef, NgZone, Renderer2, EventEmitter, Output, computed, output, ContentChildren, KeyValueDiffers, TemplateRef, ChangeDetectorRef, NgModule, Input, linkedSignal, numberAttribute, viewChild, untracked, ChangeDetectionStrategy, Component, InjectionToken, HostListener, HostBinding, ViewEncapsulation, signal } from '@angular/core';
+import { input, inject, ViewContainerRef, effect, Directive, ElementRef, NgZone, Renderer2, output, computed, ContentChildren, KeyValueDiffers, TemplateRef, ChangeDetectorRef, NgModule, Input, model, signal, linkedSignal, numberAttribute, viewChild, untracked, ChangeDetectionStrategy, Component, InjectionToken, HostListener, ViewEncapsulation } from '@angular/core';
 import { reqAnimFrame, TabIndexDisabledControlValueAccessorMixin, ThyTranslate, mixinDisabled, MixinBase } from 'ngx-tethys/core';
 import { coerceBooleanProperty, keycodes, isTemplateRef, isUndefinedOrNull, ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
@@ -98,7 +98,7 @@ class ThyEnterDirective {
         this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
-        this.thyEnter = new EventEmitter();
+        this.thyEnter = output();
         this.onKeydown = (event) => {
             const keyCode = event.which || event.keyCode;
             if (keyCode === keycodes.ENTER) {
@@ -124,9 +124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: '[thyEnter]'
                 }]
-        }], propDecorators: { thyEnter: [{
-                type: Output
-            }] } });
+        }] });
 
 /**
  * @name thyCtrlEnter
@@ -136,7 +134,7 @@ class ThyCtrlEnterDirective {
         this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
-        this.thyCtrlEnter = new EventEmitter();
+        this.thyCtrlEnter = output();
         this.onKeydown = (event) => {
             const keyCode = event.which || event.keyCode;
             if ((event.ctrlKey || event.metaKey) && keyCode === keycodes.ENTER) {
@@ -163,9 +161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: '[thyCtrlEnter]'
                 }]
-        }], propDecorators: { thyCtrlEnter: [{
-                type: Output
-            }] } });
+        }] });
 
 /**
  * @name thyShow
@@ -181,7 +177,7 @@ class ThyShowDirective {
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
         this.ngZone = inject(NgZone);
-        this.thyShowChange = new EventEmitter();
+        this.thyShowChange = output();
         this.hostRenderer = useHostRenderer();
         this.thyShow = input(false, { transform: coerceBooleanProperty });
         effect(() => {
@@ -190,9 +186,7 @@ class ThyShowDirective {
                 this.ngZone.runOutsideAngular(() => setTimeout(() => {
                     this.unListenEvent = this.renderer.listen('document', 'click', event => {
                         if (!this.elementRef.nativeElement.contains(event.target)) {
-                            if (this.thyShowChange.observers.length) {
-                                this.ngZone.run(() => this.thyShowChange.emit(false));
-                            }
+                            this.ngZone.run(() => this.thyShowChange.emit(false));
                             this.unListenDocument();
                         }
                     });
@@ -215,9 +209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: '[thyShow]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyShowChange: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * 阻止事件冒泡
@@ -279,7 +271,7 @@ class ThyContextMenuDirective {
         this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
-        this.thyContextMenu = new EventEmitter();
+        this.thyContextMenu = output();
         this.rightClick = (event) => {
             event.preventDefault();
             this.ngZone.run(() => {
@@ -303,9 +295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             args: [{
                     selector: '[thyContextMenu]'
                 }]
-        }], propDecorators: { thyContextMenu: [{
-                type: Output
-            }] } });
+        }] });
 
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
 /**
@@ -712,38 +702,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * @private
  */
 class ThySelectControl {
-    get selectedValueStyle() {
-        let showSelectedValue = false;
-        if (this.thyShowSearch()) {
-            if (this.thyPanelOpened()) {
-                showSelectedValue = !(this.isComposing || this.inputValue);
-            }
-            else {
-                showSelectedValue = true;
-            }
-        }
-        else {
-            showSelectedValue = true;
-        }
-        return { display: showSelectedValue ? 'flex' : 'none' };
-    }
-    get placeholderStyle() {
-        let placeholder = true;
-        if (this.isSelectedValue()) {
-            placeholder = false;
-        }
-        if (!this.thyPlaceholder()) {
-            placeholder = false;
-        }
-        if (this.isComposing || this.inputValue) {
-            placeholder = false;
-        }
-        return { display: placeholder ? 'block' : 'none' };
-    }
     constructor() {
         this.renderer = inject(Renderer2);
-        this.inputValue = '';
-        this.isComposing = false;
+        this.inputValue = model('');
+        this.isComposing = signal(false);
         this.hostRenderer = useHostRenderer();
         this.thyPanelOpened = input(false, { transform: coerceBooleanProperty });
         this.thyIsMultiple = input(false, { transform: coerceBooleanProperty });
@@ -792,13 +754,41 @@ class ThySelectControl {
             }
             return selectedOptions;
         });
+        this.selectedValueStyle = computed(() => {
+            let showSelectedValue = false;
+            if (this.thyShowSearch()) {
+                if (this.thyPanelOpened()) {
+                    showSelectedValue = !(this.isComposing() || this.inputValue());
+                }
+                else {
+                    showSelectedValue = true;
+                }
+            }
+            else {
+                showSelectedValue = true;
+            }
+            return { display: showSelectedValue ? 'flex' : 'none' };
+        });
+        this.placeholderStyle = computed(() => {
+            let placeholder = true;
+            if (this.isSelectedValue()) {
+                placeholder = false;
+            }
+            if (!this.thyPlaceholder()) {
+                placeholder = false;
+            }
+            if (this.isComposing() || this.inputValue()) {
+                placeholder = false;
+            }
+            return { display: placeholder ? 'block' : 'none' };
+        });
         effect(() => {
             const panelOpened = this.thyPanelOpened();
             if (panelOpened) {
                 untracked(() => {
                     if (this.thyShowSearch()) {
                         Promise.resolve(null).then(() => {
-                            this.inputElement().nativeElement.focus();
+                            this.inputElement()?.nativeElement.focus();
                         });
                     }
                 });
@@ -807,10 +797,10 @@ class ThySelectControl {
                 untracked(() => {
                     if (this.thyShowSearch()) {
                         new Promise(resolve => setTimeout(resolve, 100)).then(() => {
-                            if (this.inputValue) {
-                                this.inputValue = '';
+                            if (this.inputValue()) {
+                                this.inputValue.set('');
                                 this.updateWidth();
-                                this.thyOnSearch.emit(this.inputValue);
+                                this.thyOnSearch.emit(this.inputValue());
                             }
                         });
                     }
@@ -821,35 +811,37 @@ class ThySelectControl {
             this.setSelectControlClass();
         });
         effect(() => {
-            let sameValue = false;
             const oldValue = this.previousSelectedOptions();
             const value = this.thySelectedOptions();
-            untracked(() => {
-                if (this.thyIsMultiple()) {
-                    if (oldValue instanceof Array && value instanceof Array && oldValue.length === value.length) {
-                        sameValue = value.every((option, index) => option.thyValue === oldValue[index].thyValue);
-                    }
-                }
-                else {
-                    if (oldValue && value) {
-                        sameValue = oldValue.thyValue === value.thyValue;
+            if (value) {
+                let sameValue = false;
+                untracked(() => {
+                    if (this.thyIsMultiple()) {
+                        if (oldValue instanceof Array && value instanceof Array && oldValue.length === value.length) {
+                            sameValue = value.every((option, index) => option.thyValue === oldValue[index].thyValue);
+                        }
                     }
-                }
-                if (this.thyPanelOpened() && this.thyShowSearch()) {
-                    if (!sameValue) {
-                        Promise.resolve(null).then(() => {
-                            this.inputValue = '';
-                            this.updateWidth();
-                        });
+                    else {
+                        if (oldValue && value) {
+                            sameValue = oldValue.thyValue === value.thyValue;
+                        }
                     }
-                    //等待组件渲染好再聚焦
-                    setTimeout(() => {
-                        if (this.thyPanelOpened()) {
-                            this.inputElement().nativeElement.focus();
+                    if (this.thyPanelOpened() && this.thyShowSearch()) {
+                        if (!sameValue) {
+                            Promise.resolve(null).then(() => {
+                                this.inputValue.set('');
+                                this.updateWidth();
+                            });
                         }
-                    }, 200);
-                }
-            });
+                        //等待组件渲染好再聚焦
+                        setTimeout(() => {
+                            if (this.thyPanelOpened()) {
+                                this.inputElement()?.nativeElement.focus();
+                            }
+                        }, 200);
+                    }
+                });
+            }
         });
     }
     ngOnInit() { }
@@ -875,10 +867,10 @@ class ThySelectControl {
         };
     }
     setInputValue(value) {
-        if (value !== this.inputValue) {
-            this.inputValue = value;
+        if (value !== this.inputValue()) {
+            this.inputValue.set(value);
             this.updateWidth();
-            this.thyOnSearch.emit(this.inputValue);
+            this.thyOnSearch.emit(this.inputValue());
         }
     }
     handleBackspace(event) {
@@ -886,7 +878,7 @@ class ThySelectControl {
             return;
         }
         const selectedOptions = this.thySelectedOptions();
-        if (!this.inputValue?.length && selectedOptions instanceof Array) {
+        if (!this.inputValue()?.length && selectedOptions instanceof Array) {
             if (selectedOptions.length > 0) {
                 this.removeHandle(selectedOptions[selectedOptions.length - 1], event);
             }
@@ -894,11 +886,11 @@ class ThySelectControl {
     }
     updateWidth() {
         if (this.thyIsMultiple() && this.thyShowSearch()) {
-            if (this.inputValue || this.isComposing) {
-                this.renderer.setStyle(this.inputElement().nativeElement, 'width', `${this.inputElement().nativeElement.scrollWidth}px`);
+            if (this.inputValue() || this.isComposing()) {
+                this.renderer.setStyle(this.inputElement()?.nativeElement, 'width', `${this.inputElement()?.nativeElement.scrollWidth}px`);
             }
             else {
-                this.renderer.removeStyle(this.inputElement().nativeElement, 'width');
+                this.renderer.removeStyle(this.inputElement()?.nativeElement, 'width');
             }
         }
     }
@@ -908,6 +900,9 @@ class ThySelectControl {
     clearHandle($event) {
         this.thyOnClear.emit($event);
     }
+    compositionChange(isComposing) {
+        this.isComposing.set(isComposing);
+    }
     trackValue(_index, option) {
         return option.thyValue;
     }
@@ -915,13 +910,13 @@ class ThySelectControl {
         this.thyOnBlur.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { thyPanelOpened: { classPropertyName: "thyPanelOpened", publicName: "thyPanelOpened", isSignal: true, isRequired: false, transformFunction: null }, thyIsMultiple: { classPropertyName: "thyIsMultiple", publicName: "thyIsMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thySelectedOptions: { classPropertyName: "thySelectedOptions", publicName: "thySelectedOptions", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, customDisplayTemplate: { classPropertyName: "customDisplayTemplate", publicName: "customDisplayTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyBorderless: { classPropertyName: "thyBorderless", publicName: "thyBorderless", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless()" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"isComposing = true\"\n    (compositionend)=\"isComposing = false\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled()\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue()) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle\">\n      {{ thyPlaceholder() }}\n    </div>\n  }\n  @if (thyIsMultiple()) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset() === 'tag') {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem thyTag class=\"choice-item\" [ngClass]=\"{ disabled: thyDisabled() === true }\" [thySize]=\"tagSize()\">\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate()) {\n                {{ item?.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (thyMaxTagCount() && thySelectedOptions()?.length > thyMaxTagCount()) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize()\"\n          [ngClass]=\"{ disabled: thyDisabled() === true }\">\n          <div class=\"text-truncate\">+{{ thySelectedOptions()?.length - thyMaxTagCount() + 1 }}...</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue()) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle\">\n        @if (!customDisplayTemplate()) {\n          <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate()\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i2.ThyFlex, selector: "[thyFlex]", inputs: ["thyDirection", "thyWrap", "thyJustifyContent", "thyAlignItems", "thyGap"] }, { kind: "directive", type: i2.ThyFlexItem, selector: "[thyFlexItem]", inputs: ["thyFlexItem", "thyGrow", "thyShrink", "thyBasis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, thyPanelOpened: { classPropertyName: "thyPanelOpened", publicName: "thyPanelOpened", isSignal: true, isRequired: false, transformFunction: null }, thyIsMultiple: { classPropertyName: "thyIsMultiple", publicName: "thyIsMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thySelectedOptions: { classPropertyName: "thySelectedOptions", publicName: "thySelectedOptions", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, customDisplayTemplate: { classPropertyName: "customDisplayTemplate", publicName: "customDisplayTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyBorderless: { classPropertyName: "thyBorderless", publicName: "thyBorderless", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange", thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless()" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"compositionChange(true)\"\n    (compositionend)=\"compositionChange(false)\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue()\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled()\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue()) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle()\">\n      {{ thyPlaceholder() }}\n    </div>\n  }\n  @if (thyIsMultiple()) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset() === 'tag') {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem thyTag class=\"choice-item\" [ngClass]=\"{ disabled: thyDisabled() === true }\" [thySize]=\"tagSize()\">\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate()) {\n                {{ item?.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (thyMaxTagCount() && thySelectedOptions()?.length > thyMaxTagCount()) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize()\"\n          [ngClass]=\"{ disabled: thyDisabled() === true }\">\n          <div class=\"text-truncate\">+{{ thySelectedOptions()?.length - thyMaxTagCount() + 1 }}...</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue()) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle()\">\n        @if (!customDisplayTemplate()) {\n          <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate()\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i2.ThyFlex, selector: "[thyFlex]", inputs: ["thyDirection", "thyWrap", "thyJustifyContent", "thyAlignItems", "thyGap"] }, { kind: "directive", type: i2.ThyFlexItem, selector: "[thyFlexItem]", inputs: ["thyFlexItem", "thyGrow", "thyShrink", "thyBasis"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectControl, decorators: [{
             type: Component,
             args: [{ selector: 'thy-select-control,[thySelectControl]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass, NgStyle, ThyTag, NgTemplateOutlet, ThyIcon, ThyGridModule], host: {
                         '[class.select-control-borderless]': 'thyBorderless()'
-                    }, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"isComposing = true\"\n    (compositionend)=\"isComposing = false\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled()\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue()) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle\">\n      {{ thyPlaceholder() }}\n    </div>\n  }\n  @if (thyIsMultiple()) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset() === 'tag') {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem thyTag class=\"choice-item\" [ngClass]=\"{ disabled: thyDisabled() === true }\" [thySize]=\"tagSize()\">\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate()) {\n                {{ item?.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (thyMaxTagCount() && thySelectedOptions()?.length > thyMaxTagCount()) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize()\"\n          [ngClass]=\"{ disabled: thyDisabled() === true }\">\n          <div class=\"text-truncate\">+{{ thySelectedOptions()?.length - thyMaxTagCount() + 1 }}...</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue()) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle\">\n        @if (!customDisplayTemplate()) {\n          <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate()\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n" }]
+                    }, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"compositionChange(true)\"\n    (compositionend)=\"compositionChange(false)\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue()\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled()\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue()) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle()\">\n      {{ thyPlaceholder() }}\n    </div>\n  }\n  @if (thyIsMultiple()) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset() === 'tag') {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of maxSelectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem thyTag class=\"choice-item\" [ngClass]=\"{ disabled: thyDisabled() === true }\" [thySize]=\"tagSize()\">\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate()) {\n                {{ item?.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (thyMaxTagCount() && thySelectedOptions()?.length > thyMaxTagCount()) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize()\"\n          [ngClass]=\"{ disabled: thyDisabled() === true }\">\n          <div class=\"text-truncate\">+{{ thySelectedOptions()?.length - thyMaxTagCount() + 1 }}...</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue()) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle()\">\n        @if (!customDisplayTemplate()) {\n          <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate()\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -962,36 +957,25 @@ class ThyListOption {
     constructor() {
         this.element = inject(ElementRef);
         this.parentSelectionList = inject(THY_LIST_OPTION_PARENT_COMPONENT, { optional: true });
-        this._role = 'option';
-        this._tabIndex = -1;
+        this.role = 'option';
+        this.tabIndex = -1;
+        this.isMultiple = computed(() => this.parentSelectionList.multiple());
+        this.isListOption = computed(() => this.parentSelectionList.layout() === 'list');
+        this.isGridOption = computed(() => this.parentSelectionList.layout() === 'grid');
         this.id = input(`thy-list-option-${_uniqueIdCounter++}`);
         this.thyValue = input(undefined);
         this.thyDisabled = input(false, { transform: coerceBooleanProperty });
     }
-    get _isListOption() {
-        return this.parentSelectionList.layout === 'list';
-    }
-    get _parentLayout() {
-        return this.parentSelectionList.layout === 'grid';
-    }
     /** Whether the option is selected. */
     get selected() {
         return this.parentSelectionList.isSelected(this);
     }
     onClick(event) {
-        if (this.parentSelectionList.multiple || !this.parentSelectionList.isSelected(this)) {
+        if (this.parentSelectionList.multiple() || !this.parentSelectionList.isSelected(this)) {
             this.parentSelectionList.toggleOption(this, event);
             this.parentSelectionList.setActiveOption(this);
         }
     }
-    // @HostListener('focus', ['$event'])
-    // onFocus(event: Event) {
-    //     this.parentSelectionList.setFocusedOption(this, event);
-    // }
-    /** Allows for programmatic focusing of the option. */
-    // focus(origin?: FocusOrigin): void {
-    //     this.element.nativeElement.focus();
-    // }
     setActiveStyles() {
         this.element.nativeElement.classList.add('hover');
         this.parentSelectionList.scrollIntoView(this);
@@ -1007,29 +991,19 @@ class ThyListOption {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.disabled": "thyDisabled()", "class.thy-list-option": "this._isListOption", "class.thy-grid-option": "this._parentLayout", "attr.role": "this._role", "attr.tabindex": "this._tabIndex", "class.active": "this.selected" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (parentSelectionList.multiple && parentSelectionList.layout === 'list') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (parentSelectionList.layout === 'grid') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.disabled": "thyDisabled()", "class.thy-list-option": "isListOption()", "class.thy-grid-option": "isGridOption()", "class.active": "selected", "attr.role": "role", "attr.tabindex": "tabIndex" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (isMultiple() && isListOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (isGridOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyListOption, decorators: [{
             type: Component,
             args: [{ selector: 'thy-list-option,[thy-list-option]', imports: [ThyIcon], host: {
-                        '[class.disabled]': 'thyDisabled()'
-                    }, template: "<ng-content></ng-content>\n@if (parentSelectionList.multiple && parentSelectionList.layout === 'list') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (parentSelectionList.layout === 'grid') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n" }]
-        }], propDecorators: { _isListOption: [{
-                type: HostBinding,
-                args: [`class.thy-list-option`]
-            }], _parentLayout: [{
-                type: HostBinding,
-                args: [`class.thy-grid-option`]
-            }], _role: [{
-                type: HostBinding,
-                args: [`attr.role`]
-            }], _tabIndex: [{
-                type: HostBinding,
-                args: [`attr.tabindex`]
-            }], selected: [{
-                type: HostBinding,
-                args: [`class.active`]
-            }], onClick: [{
+                        '[class.disabled]': 'thyDisabled()',
+                        '[class.thy-list-option]': 'isListOption()',
+                        '[class.thy-grid-option]': 'isGridOption()',
+                        '[class.active]': 'selected',
+                        '[attr.role]': 'role',
+                        '[attr.tabindex]': 'tabIndex'
+                    }, template: "<ng-content></ng-content>\n@if (isMultiple() && isListOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (isGridOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n" }]
+        }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });