ngx-tethys 20.0.0 → 20.0.1

package/fesm2022/ngx-tethys-shared.mjs

@@ -3,8 +3,8 @@ import { input, inject, ViewContainerRef, effect, Directive, ElementRef, NgZone,
 import { reqAnimFrame, TabIndexDisabledControlValueAccessorMixin, ThyTranslate, mixinDisabled, MixinBase } from 'ngx-tethys/core';
 import { coerceBooleanProperty, keycodes, isTemplateRef, isUndefinedOrNull, coerceArray, ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
-import { Subject, Observable, fromEvent, merge, throttleTime, of, defer } from 'rxjs';
-import { startWith, switchMap, takeUntil, take, debounceTime, map } from 'rxjs/operators';
+import { Subject, Observable, fromEvent, merge, throttleTime, of } from 'rxjs';
+import { startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
@@ -12,7 +12,7 @@ import { ThyTag, ThyTagModule } from 'ngx-tethys/tag';
 import { NgClass, NgStyle, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
 import * as i2 from 'ngx-tethys/grid';
 import { ThyGridModule } from 'ngx-tethys/grid';
@@ -1058,10 +1058,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-/**
- * Injection token used to provide the parent component to options.
- */
-const THY_OPTION_PARENT_COMPONENT = new InjectionToken('THY_OPTION_PARENT_COMPONENT');
 /**
  * Injection token used to provide the parent component to options.
  */
@@ -1148,8 +1144,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-class SelectOptionBase {
+class ThySelectOptionGroup {
+    constructor() {
+        this.thyGroupLabel = input(...(ngDevMode ? [undefined, { debugName: "thyGroupLabel" }] : []));
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyGroupLabel: { classPropertyName: "thyGroupLabel", publicName: "thyGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectOptionGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'thy-option-group',
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { thyGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyGroupLabel", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }] } });
 
 class ThyOptionSelectionChangeEvent {
     constructor(option, isUserInput = false) {
@@ -1157,39 +1166,155 @@ class ThyOptionSelectionChangeEvent {
         this.isUserInput = isUserInput;
     }
 }
-class ThyOptionVisibleChangeEvent {
-}
 /**
- * @private
- * @order 20
+ * 选项组件
+ * @name thy-option
  */
-class ThyOption extends SelectOptionBase {
-    // 继承至 Highlightable，无法修改为 Signal
-    get disabled() {
-        return this.hidden() || this.thyDisabled();
-    }
-    get tabIndex() {
-        return this.disabled ? '-1' : '0';
-    }
+class ThyOption {
     constructor() {
-        super();
-        this.element = inject(ElementRef);
-        this.parent = inject(THY_OPTION_PARENT_COMPONENT, { optional: true });
-        this.cdr = inject(ChangeDetectorRef);
+        /**
+         * 选项的值，具有唯一性
+         */
+        this.thyValue = input(...(ngDevMode ? [undefined, { debugName: "thyValue" }] : []));
+        /**
+         * 选项的原始值
+         */
+        this.thyRawValue = input(...(ngDevMode ? [undefined, { debugName: "thyRawValue" }] : []));
+        /**
+         * 选项的文本
+         */
+        this.thyLabelText = input(...(ngDevMode ? [undefined, { debugName: "thyLabelText" }] : []));
+        /**
+         * 是否显示自定义模板
+         */
         this.thyShowOptionCustom = input(...(ngDevMode ? [undefined, { debugName: "thyShowOptionCustom" }] : []));
+        /**
+         * 搜索关键字
+         */
         this.thySearchKey = input(...(ngDevMode ? [undefined, { debugName: "thySearchKey" }] : []));
-        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
-        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
-        this.hidden = signal(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+        /**
+         * 是否禁用
+         */
+        this.thyDisabled = input(...(ngDevMode ? [undefined, { debugName: "thyDisabled" }] : []));
+        /**
+         * 是否选中，会跟随 ThyOptionSelectionChangeEvent 抛出去
+         */
         this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        /**
+         * 选项被选中时的回调
+         */
         this.selectionChange = output();
-        this.visibleChange = output();
+        /**
+         * 模板
+         */
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
+        this.optionGroupComponent = inject(ThySelectOptionGroup, { optional: true });
     }
-    getHostElement() {
-        return this.element.nativeElement;
+    get groupLabel() {
+        return this.optionGroupComponent?.thyGroupLabel() || '';
     }
-    onClick(event) {
-        this.selectViaInteraction();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyRawValue: { classPropertyName: "thyRawValue", publicName: "thyRawValue", isSignal: true, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, thyShowOptionCustom: { classPropertyName: "thyShowOptionCustom", publicName: "thyShowOptionCustom", isSignal: true, isRequired: false, transformFunction: null }, thySearchKey: { classPropertyName: "thySearchKey", publicName: "thySearchKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOption, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'thy-option',
+                    template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { thyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyValue", required: false }] }], thyRawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyRawValue", required: false }] }], thyLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyLabelText", required: false }] }], thyShowOptionCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowOptionCustom", required: false }] }], thySearchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySearchKey", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/**
+ * 选项渲染组件
+ * @private
+ * @name thy-option-render
+ */
+class ThyOptionRender {
+    constructor() {
+        this.element = inject(ElementRef);
+        this.hostRenderer = useHostRenderer();
+        /**
+         * 选项的值，具有唯一性
+         */
+        this.thyValue = input(...(ngDevMode ? [undefined, { debugName: "thyValue" }] : []));
+        /**
+         * 选项的原始值
+         */
+        this.thyRawValue = input(...(ngDevMode ? [undefined, { debugName: "thyRawValue" }] : []));
+        /**
+         * 选项的文本
+         */
+        this.thyLabelText = input(...(ngDevMode ? [undefined, { debugName: "thyLabelText" }] : []));
+        /**
+         * 搜索关键字
+         */
+        this.thySearchKey = input(...(ngDevMode ? [undefined, { debugName: "thySearchKey" }] : []));
+        /**
+         * 是否禁用
+         */
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        /**
+         * 是否显示自定义模板
+         */
+        this.thyShowOptionCustom = input(false, ...(ngDevMode ? [{ debugName: "thyShowOptionCustom", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        /**
+         * 模板
+         */
+        this.thyTemplate = input(...(ngDevMode ? [undefined, { debugName: "thyTemplate" }] : []));
+        /**
+         * 模板上下文
+         */
+        this.thyTemplateContext = input(...(ngDevMode ? [undefined, { debugName: "thyTemplateContext" }] : []));
+        /**
+         * 被选中时，是否显示勾选图标
+         */
+        this.thyShowCheckedIcon = input(false, ...(ngDevMode ? [{ debugName: "thyShowCheckedIcon", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        /**
+         * Select 组件选中的值
+         */
+        this.thySelectedValuesMap = input(new Map(), ...(ngDevMode ? [{ debugName: "thySelectedValuesMap" }] : []));
+        /**
+         * 当前高亮选项的值
+         */
+        this.thyActivatedValue = input(...(ngDevMode ? [undefined, { debugName: "thyActivatedValue" }] : []));
+        /**
+         * 点击选项时的回调
+         */
+        this.optionClick = output();
+        /**
+         * 鼠标悬浮时的回调
+         */
+        this.optionHover = output();
+        /**
+         * 是否被选中
+         */
+        this.selected = computed(() => {
+            return this.thySelectedValuesMap().has(this.thyValue());
+        }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        /**
+         * 是否高亮
+         */
+        this.activated = computed(() => {
+            return this.thyActivatedValue() === this.thyValue();
+        }, ...(ngDevMode ? [{ debugName: "activated" }] : []));
+        this.tabIndex = computed(() => {
+            return this.thyDisabled() ? '-1' : '0';
+        }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+        effect(() => {
+            this.activated() ? this.setActiveStyles() : this.setInactiveStyles();
+        });
+    }
+    mouseEnter() {
+        this.optionHover.emit(this.thyValue());
     }
     handleKeydown(event) {
         if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
@@ -1198,190 +1323,66 @@ class ThyOption extends SelectOptionBase {
         }
     }
     selectViaInteraction() {
-        if (!this.disabled) {
-            const selected = this.parent.isMultiple ? !this.selected() : true;
-            this.selected.set(selected);
-            this.cdr.markForCheck();
-            this.emitSelectionChangeEvent(true);
+        if (!this.thyDisabled()) {
+            this.optionClick.emit({ value: this.thyValue(), isUserInput: true });
         }
     }
-    select(event) {
-        if (!this.disabled) {
+    select() {
+        if (!this.thyDisabled()) {
             if (!this.selected()) {
-                this.selected.set(true);
-                this.emitSelectionChangeEvent();
-                this.cdr.markForCheck();
+                this.optionClick.emit({ value: this.thyValue() });
             }
         }
     }
     deselect() {
-        if (this.selected() || this.disabled) {
-            this.selected.set(false);
-            this.emitSelectionChangeEvent();
-            this.cdr.markForCheck();
-        }
-    }
-    hideOption() {
-        if (!this.hidden()) {
-            this.hidden.set(true);
-            this.visibleChange.emit({ option: this });
-            this.cdr.markForCheck();
-        }
-    }
-    showOption() {
-        if (this.hidden()) {
-            this.hidden.set(false);
-            this.visibleChange.emit({ option: this });
-            this.cdr.markForCheck();
-        }
-    }
-    matchSearchText(searchText) {
-        const thySearchKey = this.thySearchKey();
-        if (thySearchKey) {
-            if (thySearchKey.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        }
-        else {
-            if (this.thyLabelText.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
-                return true;
-            }
-            else {
-                return false;
-            }
+        if (this.selected() || this.thyDisabled()) {
+            this.optionClick.emit({ value: this.thyValue() });
         }
     }
     setActiveStyles() {
-        this.getHostElement().classList.add('hover');
-        this.cdr.markForCheck();
+        this.hostRenderer.addClass('hover');
     }
     setInactiveStyles() {
-        this.getHostElement().classList.remove('hover');
-        this.cdr.markForCheck();
-    }
-    getLabel() {
-        return '';
+        this.hostRenderer.removeClass('hover');
     }
-    emitSelectionChangeEvent(isUserInput = false) {
-        this.selectionChange.emit(new ThyOptionSelectionChangeEvent(this, isUserInput));
-    }
-    ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: false, isRequired: false, transformFunction: null }, thyRawValue: { classPropertyName: "thyRawValue", publicName: "thyRawValue", isSignal: false, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: false, isRequired: false, transformFunction: null }, thyShowOptionCustom: { classPropertyName: "thyShowOptionCustom", publicName: "thyShowOptionCustom", isSignal: true, isRequired: false, transformFunction: null }, thySearchKey: { classPropertyName: "thySearchKey", publicName: "thySearchKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.disabled": "thyDisabled()", "class.hidden": "hidden()", "attr.tabindex": "tabIndex", "class.active": "selected()" }, classAttribute: "thy-option-item" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (thyShowOptionCustom()) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThyOptionRender, isStandalone: true, selector: "thy-option-render", inputs: { thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyRawValue: { classPropertyName: "thyRawValue", publicName: "thyRawValue", isSignal: true, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, thySearchKey: { classPropertyName: "thySearchKey", publicName: "thySearchKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyShowOptionCustom: { classPropertyName: "thyShowOptionCustom", publicName: "thyShowOptionCustom", isSignal: true, isRequired: false, transformFunction: null }, thyTemplate: { classPropertyName: "thyTemplate", publicName: "thyTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyTemplateContext: { classPropertyName: "thyTemplateContext", publicName: "thyTemplateContext", isSignal: true, isRequired: false, transformFunction: null }, thyShowCheckedIcon: { classPropertyName: "thyShowCheckedIcon", publicName: "thyShowCheckedIcon", isSignal: true, isRequired: false, transformFunction: null }, thySelectedValuesMap: { classPropertyName: "thySelectedValuesMap", publicName: "thySelectedValuesMap", isSignal: true, isRequired: false, transformFunction: null }, thyActivatedValue: { classPropertyName: "thyActivatedValue", publicName: "thyActivatedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionClick: "optionClick", optionHover: "optionHover" }, host: { listeners: { "click": "selectViaInteraction()", "mouseenter": "mouseEnter()", "keydown": "handleKeydown($event)" }, properties: { "class.disabled": "thyDisabled()", "attr.tabindex": "tabIndex()", "class.active": "selected()" }, classAttribute: "thy-option-item" }, ngImport: i0, template: "@if (thyShowOptionCustom()) {\n  <ng-container *ngTemplateOutlet=\"thyTemplate(); context: thyTemplateContext()\"></ng-container>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText() }}</span>\n}\n@if (thyShowCheckedIcon() && selected()) {\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionRender, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyIcon], host: {
+            args: [{ selector: 'thy-option-render', imports: [ThyIcon, NgTemplateOutlet], host: {
                         class: 'thy-option-item',
                         '[class.disabled]': 'thyDisabled()',
-                        '[class.hidden]': 'hidden()',
-                        '[attr.tabindex]': `tabIndex`,
-                        '[class.active]': 'selected()'
-                    }, template: "@if (thyShowOptionCustom()) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { thyValue: [{
-                type: Input
-            }], thyRawValue: [{
-                type: Input
-            }], thyLabelText: [{
-                type: Input
-            }], thyShowOptionCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowOptionCustom", required: false }] }], thySearchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySearchKey", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+                        '[attr.tabindex]': `tabIndex()`,
+                        '[class.active]': 'selected()',
+                        '(click)': 'selectViaInteraction()',
+                        '(mouseenter)': 'mouseEnter()',
+                        '(keydown)': 'handleKeydown($event)'
+                    }, template: "@if (thyShowOptionCustom()) {\n  <ng-container *ngTemplateOutlet=\"thyTemplate(); context: thyTemplateContext()\"></ng-container>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText() }}</span>\n}\n@if (thyShowCheckedIcon() && selected()) {\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { thyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyValue", required: false }] }], thyRawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyRawValue", required: false }] }], thyLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyLabelText", required: false }] }], thySearchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySearchKey", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], thyShowOptionCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowOptionCustom", required: false }] }], thyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTemplate", required: false }] }], thyTemplateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTemplateContext", required: false }] }], thyShowCheckedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowCheckedIcon", required: false }] }], thySelectedValuesMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySelectedValuesMap", required: false }] }], thyActivatedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyActivatedValue", required: false }] }], optionClick: [{ type: i0.Output, args: ["optionClick"] }], optionHover: [{ type: i0.Output, args: ["optionHover"] }] } });
 
 /**
  * @private
  */
-class ThySelectOptionGroup {
+class ThyOptionGroupRender {
     constructor() {
-        this._ngZone = inject(NgZone);
-        this.cdr = inject(ChangeDetectorRef);
-        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
-        this.hidden = signal(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
         this.thyGroupLabel = input(undefined, ...(ngDevMode ? [{ debugName: "thyGroupLabel" }] : []));
-        this._destroy$ = new Subject();
-        this.optionVisibleChanges = defer(() => {
-            if (this.options) {
-                return merge(...this.options.map(option => outputToObservable(option.visibleChange)));
-            }
-            return this._ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionVisibleChanges));
-        });
-    }
-    ngAfterContentInit() {
-        this.options.changes.pipe(startWith(null), takeUntil(this._destroy$)).subscribe(() => {
-            this._resetOptions();
-        });
-    }
-    _resetOptions() {
-        const changedOrDestroyed$ = merge(this.options.changes, this._destroy$);
-        merge(...this.options.map(option => outputToObservable(option.visibleChange)))
-            .pipe(takeUntil(changedOrDestroyed$), debounceTime(10), map((event) => {
-            const hasOption = this.options.find(option => {
-                if (!option.hidden()) {
-                    return true;
-                }
-            });
-            if (hasOption) {
-                return false;
-            }
-            else {
-                return true;
-            }
-        }))
-            .subscribe((data) => {
-            this.hidden.set(data);
-            this.cdr.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyGroupLabel: { classPropertyName: "thyGroupLabel", publicName: "thyGroupLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "thyDisabled()", "class.thy-select-option-group-hidden": "hidden()" }, classAttribute: "thy-option-item-group" }, queries: [{ propertyName: "options", predicate: ThyOption }], ngImport: i0, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel() }}</span>\n<ng-content></ng-content>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectOptionGroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'thy-option-group', host: {
-                        class: 'thy-option-item-group',
-                        '[class.disabled]': 'thyDisabled()',
-                        '[class.thy-select-option-group-hidden]': 'hidden()'
-                    }, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel() }}</span>\n<ng-content></ng-content>\n" }]
-        }], propDecorators: { thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], thyGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyGroupLabel", required: false }] }], options: [{
-                type: ContentChildren,
-                args: [ThyOption]
-            }] } });
-
-class ThyOptionsContainer {
-    constructor() {
-        this.optionsTemplate = viewChild('options', ...(ngDevMode ? [{ debugName: "optionsTemplate" }] : []));
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
     }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: ThyOptionsContainer, isStandalone: true, selector: "thy-options-container", viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["options"], descendants: true, isSignal: true }], ngImport: i0, template: `
-        <ng-template #options>
-            <ng-content></ng-content>
-        </ng-template>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionGroupRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: ThyOptionGroupRender, isStandalone: true, selector: "thy-option-group-render", inputs: { thyGroupLabel: { classPropertyName: "thyGroupLabel", publicName: "thyGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "thyDisabled()" }, classAttribute: "thy-option-group-render" }, ngImport: i0, template: `<span class="group-name text-truncate">{{ thyGroupLabel() }}</span>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionsContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionGroupRender, decorators: [{
             type: Component,
             args: [{
-                    selector: 'thy-options-container',
-                    template: `
-        <ng-template #options>
-            <ng-content></ng-content>
-        </ng-template>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    selector: 'thy-option-group-render',
+                    template: `<span class="group-name text-truncate">{{ thyGroupLabel() }}</span>`,
+                    host: {
+                        class: 'thy-option-group-render',
+                        '[class.disabled]': 'thyDisabled()'
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { optionsTemplate: [{ type: i0.ViewChild, args: ['options', { isSignal: true }] }] } });
+        }], propDecorators: { thyGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyGroupLabel", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }] } });
 
 /**
  * @license
@@ -1392,20 +1393,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  */
 class ThyOptionModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, imports: [CommonModule, ThyIconModule, ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer], exports: [ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, imports: [CommonModule, ThyIconModule, ThyListOption, ThyOption] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, imports: [CommonModule,
+            ThyIconModule,
+            ThyListOption,
+            ThyOptionGroup,
+            ThyOption,
+            ThyOptionRender,
+            ThySelectOptionGroup,
+            ThyOptionGroupRender], exports: [ThyListOption, ThyOptionGroup, ThyOption, ThyOptionRender, ThySelectOptionGroup, ThyOptionGroupRender] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, imports: [CommonModule,
+            ThyIconModule,
+            ThyListOption,
+            ThyOptionRender] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ThyIconModule, ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer],
-                    exports: [ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer]
+                    imports: [
+                        CommonModule,
+                        ThyIconModule,
+                        ThyListOption,
+                        ThyOptionGroup,
+                        ThyOption,
+                        ThyOptionRender,
+                        ThySelectOptionGroup,
+                        ThyOptionGroupRender
+                    ],
+                    exports: [ThyListOption, ThyOptionGroup, ThyOption, ThyOptionRender, ThySelectOptionGroup, ThyOptionGroupRender]
                 }]
         }] });
 
+class SelectOptionBase {
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SelectOptionBase, THY_LIST_OPTION_PARENT_COMPONENT, THY_OPTION_PARENT_COMPONENT, ThyAutofocusDirective, ThyContextMenuDirective, ThyCtrlEnterDirective, ThyDragDropDirective, ThyEnterDirective, ThyFormCheckBaseComponent, ThyListOption, ThyOption, ThyOptionGroup, ThyOptionModule, ThyOptionSelectionChangeEvent, ThyOptionVisibleChangeEvent, ThyOptionsContainer, ThyScrollDirective, ThySelectCommonModule, ThySelectControl, ThySelectOptionGroup, ThySharedModule, ThyShowDirective, ThyStopPropagationDirective, ThyStringOrTemplateOutletDirective, ThyTranscludeDirective, ThyViewOutletDirective };
+export { SelectOptionBase, THY_LIST_OPTION_PARENT_COMPONENT, ThyAutofocusDirective, ThyContextMenuDirective, ThyCtrlEnterDirective, ThyDragDropDirective, ThyEnterDirective, ThyFormCheckBaseComponent, ThyListOption, ThyOption, ThyOptionGroup, ThyOptionGroupRender, ThyOptionModule, ThyOptionRender, ThyOptionSelectionChangeEvent, ThyScrollDirective, ThySelectCommonModule, ThySelectControl, ThySelectOptionGroup, ThySharedModule, ThyShowDirective, ThyStopPropagationDirective, ThyStringOrTemplateOutletDirective, ThyTranscludeDirective, ThyViewOutletDirective };
 //# sourceMappingURL=ngx-tethys-shared.mjs.map