ngx-tethys 17.0.9 → 17.0.11

package/fesm2022/ngx-tethys-shared.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, booleanAttribute, EventEmitter, Output, ContentChildren, TemplateRef, ChangeDetectorRef, NgModule, HostBinding, numberAttribute, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, HostListener, ViewEncapsulation } from '@angular/core';
+import { Directive, Input, EventEmitter, Output, ContentChildren, TemplateRef, ChangeDetectorRef, NgModule, HostBinding, numberAttribute, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, HostListener, ViewEncapsulation } from '@angular/core';
 import * as i1 from 'ngx-tethys/core';
 import { reqAnimFrame, TabIndexDisabledControlValueAccessorMixin, mixinDisabled, MixinBase } from 'ngx-tethys/core';
-import { keycodes, isTemplateRef, isUndefinedOrNull, ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
+import { coerceBooleanProperty, keycodes, isTemplateRef, isUndefinedOrNull, ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { Subject, Observable, fromEvent, merge, defer } from 'rxjs';
 import { startWith, switchMap, takeUntil, take, debounceTime, map } from 'rxjs/operators';
@@ -85,7 +85,7 @@ class ThyAutofocusDirective {
         this._autoSelect = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyAutofocusDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: ThyAutofocusDirective, isStandalone: true, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: { thyAutofocus: ["thyAutofocus", "thyAutofocus", booleanAttribute], thyAutoSelect: ["thyAutoSelect", "thyAutoSelect", booleanAttribute] }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: ThyAutofocusDirective, isStandalone: true, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: { thyAutofocus: ["thyAutofocus", "thyAutofocus", coerceBooleanProperty], thyAutoSelect: ["thyAutoSelect", "thyAutoSelect", coerceBooleanProperty] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyAutofocusDirective, decorators: [{
             type: Directive,
@@ -95,10 +95,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { thyAutofocus: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], thyAutoSelect: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }] } });
 
 /**
@@ -221,7 +221,7 @@ class ThyShowDirective {
         this.unListenDocument();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyShowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: ThyShowDirective, isStandalone: true, selector: "[thyShow]", inputs: { thyShow: ["thyShow", "thyShow", booleanAttribute] }, outputs: { thyShowChange: "thyShowChange" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: ThyShowDirective, isStandalone: true, selector: "[thyShow]", inputs: { thyShow: ["thyShow", "thyShow", coerceBooleanProperty] }, outputs: { thyShowChange: "thyShowChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyShowDirective, decorators: [{
             type: Directive,
@@ -233,7 +233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Output
             }], thyShow: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }] } });
 
 /**
@@ -387,7 +387,7 @@ class ThyScrollDirective {
         return this.elementRef;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyScrollDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: ThyScrollDirective, isStandalone: true, selector: "[thyScroll]", inputs: { thyEnable: ["thyEnable", "thyEnable", booleanAttribute] }, outputs: { thyOnScrolled: "thyOnScrolled" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: ThyScrollDirective, isStandalone: true, selector: "[thyScroll]", inputs: { thyEnable: ["thyEnable", "thyEnable", coerceBooleanProperty] }, outputs: { thyOnScrolled: "thyOnScrolled" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyScrollDirective, decorators: [{
             type: Directive,
@@ -397,7 +397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { thyEnable: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], thyOnScrolled: [{
                 type: Output
             }] } });
@@ -731,7 +731,7 @@ class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixi
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyFormCheckBaseComponent, deps: [{ token: i1.ThyTranslate }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: ThyFormCheckBaseComponent, inputs: { thyInline: ["thyInline", "thyInline", booleanAttribute], thyLabelText: "thyLabelText", thyLabelTextTranslateKey: "thyLabelTextTranslateKey", thyDisabled: ["thyDisabled", "thyDisabled", booleanAttribute] }, host: { properties: { "class.form-check": "this._isFormCheck", "class.form-check-inline": "this._isFormCheckInline", "class.form-check-checked": "this._isChecked", "class.form-check-inline-no-label-text": "this._isNoText" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.2.3", type: ThyFormCheckBaseComponent, inputs: { thyInline: ["thyInline", "thyInline", coerceBooleanProperty], thyLabelText: "thyLabelText", thyLabelTextTranslateKey: "thyLabelTextTranslateKey", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { properties: { "class.form-check": "this._isFormCheck", "class.form-check-inline": "this._isFormCheckInline", "class.form-check-checked": "this._isChecked", "class.form-check-inline-no-label-text": "this._isNoText" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyFormCheckBaseComponent, decorators: [{
             type: Directive
@@ -749,14 +749,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['class.form-check-inline-no-label-text']
             }], thyInline: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], thyLabelText: [{
                 type: Input
             }], thyLabelTextTranslateKey: [{
                 type: Input
             }], thyDisabled: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }] } });
 
 /**
@@ -977,7 +977,7 @@ class ThySelectControl {
         this.thyOnBlur.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThySelectControl, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { thyPanelOpened: ["thyPanelOpened", "thyPanelOpened", booleanAttribute], thyIsMultiple: ["thyIsMultiple", "thyIsMultiple", booleanAttribute], thyShowSearch: ["thyShowSearch", "thyShowSearch", booleanAttribute], thySelectedOptions: "thySelectedOptions", thyDisabled: ["thyDisabled", "thyDisabled", booleanAttribute], customDisplayTemplate: "customDisplayTemplate", thyAllowClear: ["thyAllowClear", "thyAllowClear", booleanAttribute], thyPlaceholder: "thyPlaceholder", thySize: "thySize", thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyBorderless: ["thyBorderless", "thyBorderless", booleanAttribute], thyPreset: "thyPreset" }, 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 }], 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  <div class=\"text-placeholder text-truncate\" *ngIf=\"!isSelectedValue\" [ngStyle]=\"placeholderStyle\">\n    {{ thyPlaceholder }}\n  </div>\n  <ng-container *ngIf=\"isMultiple; else single\">\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      <ng-container *ngIf=\"thyPreset === 'tag'; else default\">\n        <div thyFlexItem class=\"custom-choice-item text-truncate\" *ngFor=\"let item of maxSelectedTags; trackBy: trackValue\">\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n          </ng-template>\n          <div *ngIf=\"!disabled\" 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        </div>\n      </ng-container>\n\n      <ng-template #default>\n        <div\n          thyFlexItem\n          thyTag\n          class=\"choice-item\"\n          [ngClass]=\"{ disabled: disabled === true }\"\n          [thySize]=\"tagSize\"\n          *ngFor=\"let item of maxSelectedTags; trackBy: trackValue\">\n          <div class=\"text-truncate h-100\">\n            <ng-template\n              #customDisplay\n              [ngTemplateOutlet]=\"customDisplayTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n            <ng-container *ngIf=\"!customDisplayTemplate; else customDisplay\">\n              {{ item.thyLabelText }}\n            </ng-container>\n          </div>\n          <div *ngIf=\"!disabled\" 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        </div>\n      </ng-template>\n\n      <div\n        thyFlexItem\n        class=\"choice-item max-tag-count-choice\"\n        *ngIf=\"thyMaxTagCount && multipleSelectedValue.length > thyMaxTagCount\"\n        thyTag\n        [thySize]=\"tagSize\"\n        [ngClass]=\"{ disabled: disabled === true }\">\n        <div class=\"text-truncate\">+{{ multipleSelectedValue.length - thyMaxTagCount + 1 }}...</div>\n      </div>\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #single>\n    <ng-container *ngIf=\"isSelectedValue\">\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle\">\n        <ng-template\n          #customDisplay\n          [ngTemplateOutlet]=\"customDisplayTemplate\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: selectedValue.thyRawValue || selectedValue.thyValue || selectedValue\n          }\"></ng-template>\n        <ng-container *ngIf=\"!customDisplayTemplate; else customDisplay\">\n          <span class=\"text-truncate\">{{ selectedValue?.thyLabelText }}</span>\n        </ng-container>\n      </div>\n    </ng-container>\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  </ng-template>\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n<span class=\"select-control-clear remove-link\" *ngIf=\"showClearIcon\" (click)=\"clearHandle($event)\">\n  <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n</span>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "16.1.0", version: "17.2.3", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { thyPanelOpened: ["thyPanelOpened", "thyPanelOpened", coerceBooleanProperty], thyIsMultiple: ["thyIsMultiple", "thyIsMultiple", coerceBooleanProperty], thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thySelectedOptions: "thySelectedOptions", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], customDisplayTemplate: "customDisplayTemplate", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyPlaceholder: "thyPlaceholder", thySize: "thySize", thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyBorderless: ["thyBorderless", "thyBorderless", coerceBooleanProperty], thyPreset: "thyPreset" }, 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 }], 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  <div class=\"text-placeholder text-truncate\" *ngIf=\"!isSelectedValue\" [ngStyle]=\"placeholderStyle\">\n    {{ thyPlaceholder }}\n  </div>\n  <ng-container *ngIf=\"isMultiple; else single\">\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      <ng-container *ngIf=\"thyPreset === 'tag'; else default\">\n        <div thyFlexItem class=\"custom-choice-item text-truncate\" *ngFor=\"let item of maxSelectedTags; trackBy: trackValue\">\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n          </ng-template>\n          <div *ngIf=\"!disabled\" 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        </div>\n      </ng-container>\n\n      <ng-template #default>\n        <div\n          thyFlexItem\n          thyTag\n          class=\"choice-item\"\n          [ngClass]=\"{ disabled: disabled === true }\"\n          [thySize]=\"tagSize\"\n          *ngFor=\"let item of maxSelectedTags; trackBy: trackValue\">\n          <div class=\"text-truncate h-100\">\n            <ng-template\n              #customDisplay\n              [ngTemplateOutlet]=\"customDisplayTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n            <ng-container *ngIf=\"!customDisplayTemplate; else customDisplay\">\n              {{ item.thyLabelText }}\n            </ng-container>\n          </div>\n          <div *ngIf=\"!disabled\" 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        </div>\n      </ng-template>\n\n      <div\n        thyFlexItem\n        class=\"choice-item max-tag-count-choice\"\n        *ngIf=\"thyMaxTagCount && multipleSelectedValue.length > thyMaxTagCount\"\n        thyTag\n        [thySize]=\"tagSize\"\n        [ngClass]=\"{ disabled: disabled === true }\">\n        <div class=\"text-truncate\">+{{ multipleSelectedValue.length - thyMaxTagCount + 1 }}...</div>\n      </div>\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #single>\n    <ng-container *ngIf=\"isSelectedValue\">\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle\">\n        <ng-template\n          #customDisplay\n          [ngTemplateOutlet]=\"customDisplayTemplate\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: selectedValue.thyRawValue || selectedValue.thyValue || selectedValue\n          }\"></ng-template>\n        <ng-container *ngIf=\"!customDisplayTemplate; else customDisplay\">\n          <span class=\"text-truncate\">{{ selectedValue?.thyLabelText }}</span>\n        </ng-container>\n      </div>\n    </ng-container>\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  </ng-template>\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n<span class=\"select-control-clear remove-link\" *ngIf=\"showClearIcon\" (click)=\"clearHandle($event)\">\n  <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n</span>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "17.2.3", ngImport: i0, type: ThySelectControl, decorators: [{
             type: Component,
@@ -986,23 +986,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                     }, 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  <div class=\"text-placeholder text-truncate\" *ngIf=\"!isSelectedValue\" [ngStyle]=\"placeholderStyle\">\n    {{ thyPlaceholder }}\n  </div>\n  <ng-container *ngIf=\"isMultiple; else single\">\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      <ng-container *ngIf=\"thyPreset === 'tag'; else default\">\n        <div thyFlexItem class=\"custom-choice-item text-truncate\" *ngFor=\"let item of maxSelectedTags; trackBy: trackValue\">\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n          </ng-template>\n          <div *ngIf=\"!disabled\" 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        </div>\n      </ng-container>\n\n      <ng-template #default>\n        <div\n          thyFlexItem\n          thyTag\n          class=\"choice-item\"\n          [ngClass]=\"{ disabled: disabled === true }\"\n          [thySize]=\"tagSize\"\n          *ngFor=\"let item of maxSelectedTags; trackBy: trackValue\">\n          <div class=\"text-truncate h-100\">\n            <ng-template\n              #customDisplay\n              [ngTemplateOutlet]=\"customDisplayTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n            <ng-container *ngIf=\"!customDisplayTemplate; else customDisplay\">\n              {{ item.thyLabelText }}\n            </ng-container>\n          </div>\n          <div *ngIf=\"!disabled\" 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        </div>\n      </ng-template>\n\n      <div\n        thyFlexItem\n        class=\"choice-item max-tag-count-choice\"\n        *ngIf=\"thyMaxTagCount && multipleSelectedValue.length > thyMaxTagCount\"\n        thyTag\n        [thySize]=\"tagSize\"\n        [ngClass]=\"{ disabled: disabled === true }\">\n        <div class=\"text-truncate\">+{{ multipleSelectedValue.length - thyMaxTagCount + 1 }}...</div>\n      </div>\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #single>\n    <ng-container *ngIf=\"isSelectedValue\">\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle\">\n        <ng-template\n          #customDisplay\n          [ngTemplateOutlet]=\"customDisplayTemplate\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: selectedValue.thyRawValue || selectedValue.thyValue || selectedValue\n          }\"></ng-template>\n        <ng-container *ngIf=\"!customDisplayTemplate; else customDisplay\">\n          <span class=\"text-truncate\">{{ selectedValue?.thyLabelText }}</span>\n        </ng-container>\n      </div>\n    </ng-container>\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  </ng-template>\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n<span class=\"select-control-clear remove-link\" *ngIf=\"showClearIcon\" (click)=\"clearHandle($event)\">\n  <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n</span>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { thyPanelOpened: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], thyIsMultiple: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], thyShowSearch: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], thySelectedOptions: [{
                 type: Input
             }], thyDisabled: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], customDisplayTemplate: [{
                 type: Input
             }], thyAllowClear: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], thyPlaceholder: [{
                 type: Input
             }], thySize: [{
@@ -1012,7 +1012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: [{ transform: numberAttribute }]
             }], thyBorderless: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], thyPreset: [{
                 type: Input
             }], thyOnSearch: [{
@@ -1119,7 +1119,7 @@ class ThyListOption {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyListOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: THY_LIST_OPTION_PARENT_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: "id", thyValue: "thyValue", thyDisabled: ["thyDisabled", "thyDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.thy-list-option": "this._isListOption", "class.thy-grid-option": "this._parentLayout", "attr.role": "this._role", "attr.tabindex": "this._tabIndex", "class.disabled": "this.disabled", "class.active": "this.selected" } }, ngImport: i0, template: "<ng-content></ng-content>\n<span class=\"checked-icon\" *ngIf=\"parentSelectionList.multiple && parentSelectionList.layout === 'list'\">\n  <thy-icon thyIconName=\"check\"></thy-icon>\n</span>\n<span *ngIf=\"parentSelectionList.layout === 'grid'\" class=\"checked-icon\">\n  <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n</span>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: "id", thyValue: "thyValue", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.thy-list-option": "this._isListOption", "class.thy-grid-option": "this._parentLayout", "attr.role": "this._role", "attr.tabindex": "this._tabIndex", "class.disabled": "this.disabled", "class.active": "this.selected" } }, ngImport: i0, template: "<ng-content></ng-content>\n<span class=\"checked-icon\" *ngIf=\"parentSelectionList.multiple && parentSelectionList.layout === 'list'\">\n  <thy-icon thyIconName=\"check\"></thy-icon>\n</span>\n<span *ngIf=\"parentSelectionList.layout === 'grid'\" class=\"checked-icon\">\n  <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n</span>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyListOption, decorators: [{
             type: Component,
@@ -1147,7 +1147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }], thyDisabled: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }], disabled: [{
                 type: HostBinding,
                 args: [`class.disabled`]
@@ -1311,7 +1311,7 @@ class ThyOption extends SelectOptionBase {
     }
     ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyOption, deps: [{ token: i0.ElementRef }, { token: THY_OPTION_PARENT_COMPONENT, optional: true }, { token: THY_OPTION_GROUP_COMPONENT, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: "thyValue", thyRawValue: "thyRawValue", thyLabelText: "thyLabelText", thyShowOptionCustom: "thyShowOptionCustom", thySearchKey: "thySearchKey", thyDisabled: ["thyDisabled", "thyDisabled", booleanAttribute] }, outputs: { selectionChange: "selectionChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.thy-option-item": "this._isOptionItem", "class.disabled": "this.thyDisabled", "class.hidden": "this.hidden", "attr.tabindex": "this.tabIndex", "class.active": "this.selected" } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"thyShowOptionCustom; else defaultOption\">\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n</ng-container>\n<ng-template #defaultOption>\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: "thyValue", thyRawValue: "thyRawValue", thyLabelText: "thyLabelText", thyShowOptionCustom: "thyShowOptionCustom", thySearchKey: "thySearchKey", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, outputs: { selectionChange: "selectionChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.thy-option-item": "this._isOptionItem", "class.disabled": "this.thyDisabled", "class.hidden": "this.hidden", "attr.tabindex": "this.tabIndex", "class.active": "this.selected" } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"thyShowOptionCustom; else defaultOption\">\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n</ng-container>\n<ng-template #defaultOption>\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThyOption, decorators: [{
             type: Component,
@@ -1344,7 +1344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: [TemplateRef, { static: true }]
             }], thyDisabled: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }, {
                 type: HostBinding,
                 args: [`class.disabled`]
@@ -1420,7 +1420,7 @@ class ThySelectOptionGroup {
         this._destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ThySelectOptionGroup, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyDisabled: ["thyDisabled", "thyDisabled", booleanAttribute], thyGroupLabel: "thyGroupLabel" }, host: { properties: { "class.disabled": "this.thyDisabled", "class.thy-option-item-group": "this._isOptionGroup", "class.thy-select-option-group-hidden": "this.hidden" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.2.3", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyGroupLabel: "thyGroupLabel" }, host: { properties: { "class.disabled": "this.thyDisabled", "class.thy-option-item-group": "this._isOptionGroup", "class.thy-select-option-group-hidden": "this.hidden" } }, providers: [
             {
                 provide: THY_OPTION_GROUP_COMPONENT,
                 useExisting: ThySelectOptionGroup
@@ -1437,7 +1437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                     ], standalone: true, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel }}</span>\n<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { thyDisabled: [{
                 type: Input,
-                args: [{ transform: booleanAttribute }]
+                args: [{ transform: coerceBooleanProperty }]
             }, {
                 type: HostBinding,
                 args: [`class.disabled`]