ngx-tethys 19.1.0-next.0 → 19.1.0-next.1

package/fesm2022/ngx-tethys-strength.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, forwardRef, Input, HostBinding, Component, NgModule } from '@angular/core';
+import { inject, computed, input, forwardRef, HostBinding, Component, NgModule } from '@angular/core';
 import { ThyTranslate } from 'ngx-tethys/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { injectLocale } from 'ngx-tethys/i18n';
@@ -21,61 +21,57 @@ class ThyStrength {
         this.translate = inject(ThyTranslate);
         this.styleClass = true;
         this.locale = injectLocale('strength');
-        this.strengthMap = {
-            [ThyStrengthEnum.highest]: {
-                level: 'highest',
-                text: this.locale().highest
-            },
-            [ThyStrengthEnum.high]: {
-                level: 'high',
-                text: this.locale().high
-            },
-            [ThyStrengthEnum.average]: {
-                level: 'average',
-                text: this.locale().medium
-            },
-            [ThyStrengthEnum.low]: {
-                level: 'low',
-                text: this.locale().low
-            }
-        };
+        this.strengthMap = computed(() => {
+            return {
+                [ThyStrengthEnum.highest]: {
+                    level: 'highest',
+                    text: this.highestKey()
+                },
+                [ThyStrengthEnum.high]: {
+                    level: 'high',
+                    text: this.highKey()
+                },
+                [ThyStrengthEnum.average]: {
+                    level: 'average',
+                    text: this.averageKey()
+                },
+                [ThyStrengthEnum.low]: {
+                    level: 'low',
+                    text: this.lowKey()
+                }
+            };
+        });
+        /**
+         * 组件标题，描述程度所指类型
+         */
+        this.titleKey = input('', { transform: (value) => this.translate.instant(value) || '' });
+        /**
+         * 程度最高值文本
+         */
+        this.highestKey = input(this.locale().highest, {
+            transform: (value) => this.translate.instant(value) || this.locale().highest
+        });
+        /**
+         * 程度为高值时展示的文本
+         */
+        this.highKey = input(this.locale().high, {
+            transform: (value) => this.translate.instant(value) || this.locale().high
+        });
+        /**
+         * 程度为中值时展示的文本
+         */
+        this.averageKey = input(this.locale().medium, {
+            transform: (value) => this.translate.instant(value) || this.locale().medium
+        });
+        /**
+         * 程度为低值时展示的文本
+         */
+        this.lowKey = input(this.locale().low, {
+            transform: (value) => this.translate.instant(value) || this.locale().low
+        });
         this._onChange = Function.prototype;
         this._onTouched = Function.prototype;
     }
-    /**
-     * 组件标题，描述程度所指类型
-     */
-    set titleKey(value) {
-        this.strengthTitle = this.translate.instant(value);
-    }
-    /**
-     * 程度最高值文本
-     * @default 最高
-     */
-    set highestKey(value) {
-        this.strengthMap[ThyStrengthEnum.highest].text = this.translate.instant(value);
-    }
-    /**
-     * 程度为高值时展示的文本
-     * @default 高
-     */
-    set highKey(value) {
-        this.strengthMap[ThyStrengthEnum.high].text = this.translate.instant(value);
-    }
-    /**
-     * 程度为中值时展示的文本
-     * @default 中
-     */
-    set averageKey(value) {
-        this.strengthMap[ThyStrengthEnum.average].text = this.translate.instant(value);
-    }
-    /**
-     * 程度为低值时展示的文本
-     * @default 低
-     */
-    set lowKey(value) {
-        this.strengthMap[ThyStrengthEnum.low].text = this.translate.instant(value);
-    }
     ngOnInit() { }
     writeValue(value) {
         this.strength = value;
@@ -89,13 +85,13 @@ class ThyStrength {
         this._onTouched = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStrength, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyStrength, isStandalone: true, selector: "thy-strength", inputs: { titleKey: "titleKey", highestKey: "highestKey", highKey: "highKey", averageKey: "averageKey", lowKey: "lowKey" }, host: { properties: { "class.password-strength-container": "this.styleClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyStrength, isStandalone: true, selector: "thy-strength", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, highestKey: { classPropertyName: "highestKey", publicName: "highestKey", isSignal: true, isRequired: false, transformFunction: null }, highKey: { classPropertyName: "highKey", publicName: "highKey", isSignal: true, isRequired: false, transformFunction: null }, averageKey: { classPropertyName: "averageKey", publicName: "averageKey", isSignal: true, isRequired: false, transformFunction: null }, lowKey: { classPropertyName: "lowKey", publicName: "lowKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.password-strength-container": "this.styleClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyStrength),
                 multi: true
             }
-        ], ngImport: i0, template: "<div>\n  {{ strengthTitle }} <span class=\"strength-text strength-text-{{ strengthMap[strength]?.level }}\">{{ strengthMap[strength]?.text }}</span>\n</div>\n<div class=\"strength-level strength-level-{{ strengthMap[strength]?.level }}\">\n  <span></span>\n</div>\n" }); }
+        ], ngImport: i0, template: "<div>\n  {{ titleKey() }} <span class=\"strength-text strength-text-{{ strengthMap()[strength]?.level }}\">{{ strengthMap()[strength]?.text }}</span>\n</div>\n<div class=\"strength-level strength-level-{{ strengthMap()[strength]?.level }}\">\n  <span></span>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStrength, decorators: [{
             type: Component,
@@ -105,20 +101,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                             useExisting: forwardRef(() => ThyStrength),
                             multi: true
                         }
-                    ], template: "<div>\n  {{ strengthTitle }} <span class=\"strength-text strength-text-{{ strengthMap[strength]?.level }}\">{{ strengthMap[strength]?.text }}</span>\n</div>\n<div class=\"strength-level strength-level-{{ strengthMap[strength]?.level }}\">\n  <span></span>\n</div>\n" }]
+                    ], template: "<div>\n  {{ titleKey() }} <span class=\"strength-text strength-text-{{ strengthMap()[strength]?.level }}\">{{ strengthMap()[strength]?.text }}</span>\n</div>\n<div class=\"strength-level strength-level-{{ strengthMap()[strength]?.level }}\">\n  <span></span>\n</div>\n" }]
         }], propDecorators: { styleClass: [{
                 type: HostBinding,
                 args: ['class.password-strength-container']
-            }], titleKey: [{
-                type: Input
-            }], highestKey: [{
-                type: Input
-            }], highKey: [{
-                type: Input
-            }], averageKey: [{
-                type: Input
-            }], lowKey: [{
-                type: Input
             }] } });
 
 class ThyStrengthModule {

package/fesm2022/ngx-tethys-strength.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-strength.mjs","sources":["../../../src/strength/strength.component.ts","../../../src/strength/strength.component.html","../../../src/strength/strength.module.ts","../../../src/strength/ngx-tethys-strength.ts"],"sourcesContent":["import { ThyTranslate } from 'ngx-tethys/core';\n\nimport { Component, forwardRef, HostBinding, Input, OnInit, inject, Signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { injectLocale, ThyStrengthLocale } from 'ngx-tethys/i18n';\n\nenum ThyStrengthEnum {\n    highest = 4,\n    high = 3,\n    average = 2,\n    low = 1\n}\n\n/**\n * 程度展示组件\n * @name thy-strength\n * @order 10\n */\n@Component({\n    selector: 'thy-strength',\n    templateUrl: 'strength.component.html',\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => ThyStrength),\n            multi: true\n        }\n    ]\n})\nexport class ThyStrength implements OnInit, ControlValueAccessor {\n    translate = inject(ThyTranslate);\n\n    @HostBinding('class.password-strength-container') styleClass = true;\n\n    strengthTitle: string;\n\n    strength: ThyStrengthEnum;\n\n    locale: Signal<ThyStrengthLocale> = injectLocale('strength');\n\n    strengthMap = {\n        [ThyStrengthEnum.highest]: {\n            level: 'highest',\n            text: this.locale().highest\n        },\n        [ThyStrengthEnum.high]: {\n            level: 'high',\n            text: this.locale().high\n        },\n        [ThyStrengthEnum.average]: {\n            level: 'average',\n            text: this.locale().medium\n        },\n        [ThyStrengthEnum.low]: {\n            level: 'low',\n            text: this.locale().low\n        }\n    };\n\n    /**\n     * 组件标题，描述程度所指类型\n     */\n    @Input()\n    set titleKey(value: string) {\n        this.strengthTitle = this.translate.instant(value);\n    }\n\n    /**\n     * 程度最高值文本\n     * @default 最高\n     */\n    @Input()\n    set highestKey(value: string) {\n        this.strengthMap[ThyStrengthEnum.highest].text = this.translate.instant(value);\n    }\n\n    /**\n     * 程度为高值时展示的文本\n     * @default 高\n     */\n    @Input()\n    set highKey(value: string) {\n        this.strengthMap[ThyStrengthEnum.high].text = this.translate.instant(value);\n    }\n\n    /**\n     * 程度为中值时展示的文本\n     * @default 中\n     */\n    @Input()\n    set averageKey(value: string) {\n        this.strengthMap[ThyStrengthEnum.average].text = this.translate.instant(value);\n    }\n\n    /**\n     * 程度为低值时展示的文本\n     * @default 低\n     */\n    @Input()\n    set lowKey(value: string) {\n        this.strengthMap[ThyStrengthEnum.low].text = this.translate.instant(value);\n    }\n\n    private _onChange = Function.prototype;\n\n    private _onTouched = Function.prototype;\n\n    ngOnInit() {}\n\n    writeValue(value: ThyStrengthEnum) {\n        this.strength = value;\n        this._onChange(value);\n        this._onTouched();\n    }\n\n    registerOnChange(fn: (value: any) => any): void {\n        this._onChange = fn;\n    }\n\n    registerOnTouched(fn: () => any): void {\n        this._onTouched = fn;\n    }\n}\n","<div>\n  {{ strengthTitle }} <span class=\"strength-text strength-text-{{ strengthMap[strength]?.level }}\">{{ strengthMap[strength]?.text }}</span>\n</div>\n<div class=\"strength-level strength-level-{{ strengthMap[strength]?.level }}\">\n  <span></span>\n</div>\n","import { NgModule } from '@angular/core';\nimport { ThyStrength } from './strength.component';\n\n@NgModule({\n    imports: [ThyStrength],\n    exports: [ThyStrength],\n    providers: []\n})\nexport class ThyStrengthModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-tethys-strength.mjs","sources":["../../../src/strength/strength.component.ts","../../../src/strength/strength.component.html","../../../src/strength/strength.module.ts","../../../src/strength/ngx-tethys-strength.ts"],"sourcesContent":["import { ThyTranslate } from 'ngx-tethys/core';\n\nimport { Component, computed, forwardRef, HostBinding, inject, input, OnInit, Signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { injectLocale, ThyStrengthLocale } from 'ngx-tethys/i18n';\n\nenum ThyStrengthEnum {\n    highest = 4,\n    high = 3,\n    average = 2,\n    low = 1\n}\n\n/**\n * 程度展示组件\n * @name thy-strength\n * @order 10\n */\n@Component({\n    selector: 'thy-strength',\n    templateUrl: 'strength.component.html',\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => ThyStrength),\n            multi: true\n        }\n    ]\n})\nexport class ThyStrength implements OnInit, ControlValueAccessor {\n    translate = inject(ThyTranslate);\n\n    @HostBinding('class.password-strength-container') styleClass = true;\n\n    strength: ThyStrengthEnum;\n\n    locale: Signal<ThyStrengthLocale> = injectLocale('strength');\n\n    readonly strengthMap = computed(() => {\n        return {\n            [ThyStrengthEnum.highest]: {\n                level: 'highest',\n                text: this.highestKey()\n            },\n            [ThyStrengthEnum.high]: {\n                level: 'high',\n                text: this.highKey()\n            },\n            [ThyStrengthEnum.average]: {\n                level: 'average',\n                text: this.averageKey()\n            },\n            [ThyStrengthEnum.low]: {\n                level: 'low',\n                text: this.lowKey()\n            }\n        };\n    });\n\n    /**\n     * 组件标题，描述程度所指类型\n     */\n    readonly titleKey = input<string, string>('', { transform: (value: string) => this.translate.instant(value) || '' });\n\n    /**\n     * 程度最高值文本\n     */\n    readonly highestKey = input<string, string>(this.locale().highest, {\n        transform: (value: string) => this.translate.instant(value) || this.locale().highest\n    });\n\n    /**\n     * 程度为高值时展示的文本\n     */\n    readonly highKey = input<string, string>(this.locale().high, {\n        transform: (value: string) => this.translate.instant(value) || this.locale().high\n    });\n\n    /**\n     * 程度为中值时展示的文本\n     */\n    readonly averageKey = input<string, string>(this.locale().medium, {\n        transform: (value: string) => this.translate.instant(value) || this.locale().medium\n    });\n\n    /**\n     * 程度为低值时展示的文本\n     */\n    readonly lowKey = input<string, string>(this.locale().low, {\n        transform: (value: string) => this.translate.instant(value) || this.locale().low\n    });\n\n    private _onChange = Function.prototype;\n\n    private _onTouched = Function.prototype;\n\n    ngOnInit() {}\n\n    writeValue(value: ThyStrengthEnum) {\n        this.strength = value;\n        this._onChange(value);\n        this._onTouched();\n    }\n\n    registerOnChange(fn: (value: any) => any): void {\n        this._onChange = fn;\n    }\n\n    registerOnTouched(fn: () => any): void {\n        this._onTouched = fn;\n    }\n}\n","<div>\n  {{ titleKey() }} <span class=\"strength-text strength-text-{{ strengthMap()[strength]?.level }}\">{{ strengthMap()[strength]?.text }}</span>\n</div>\n<div class=\"strength-level strength-level-{{ strengthMap()[strength]?.level }}\">\n  <span></span>\n</div>\n","import { NgModule } from '@angular/core';\nimport { ThyStrength } from './strength.component';\n\n@NgModule({\n    imports: [ThyStrength],\n    exports: [ThyStrength],\n    providers: []\n})\nexport class ThyStrengthModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-tethys-transfer.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, IterableDiffers, EventEmitter, HostBinding, Output, Input, ViewEncapsulation, Component, ContentChild, NgModule } from '@angular/core';
+import { inject, IterableDiffers, input, numberAttribute, output, ViewEncapsulation, Component, contentChild, computed, effect, NgModule } from '@angular/core';
 import { ThyFlexibleText, ThyFlexibleTextModule } from 'ngx-tethys/flexible-text';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
@@ -7,6 +7,7 @@ import { moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkD
 import { ThyList, ThyListItem, ThyListModule } from 'ngx-tethys/list';
 import { ThyDragDropDirective, ThySharedModule } from 'ngx-tethys/shared';
 import { injectLocale } from 'ngx-tethys/i18n';
+import { coerceBooleanProperty } from 'ngx-tethys/util';
 import { ThyButtonModule } from 'ngx-tethys/button';
 
 var TransferDirection;
@@ -24,12 +25,20 @@ class ThyTransferList {
         this.lockItems = [];
         this.unlockItems = [];
         this.locale = injectLocale('transfer');
-        this.draggableUpdate = new EventEmitter();
-        this.selectItem = new EventEmitter();
-        this.unselectItem = new EventEmitter();
-        this.hostClass = 'thy-transfer-list';
+        this.title = input();
+        this.items = input();
+        this.draggable = input(false, { transform: coerceBooleanProperty });
+        this.canLock = input(false, { transform: coerceBooleanProperty });
+        this.maxLock = input(undefined, { transform: numberAttribute });
+        this.max = input(undefined, { transform: numberAttribute });
+        this.disabled = input(false, { transform: coerceBooleanProperty });
+        this.template = input();
+        this.renderContentRef = input();
+        this.draggableUpdate = output();
+        this.selectItem = output();
+        this.unselectItem = output();
         this.lockListEnterPredicate = () => {
-            return this.lockItems.length < this.maxLock;
+            return this.lockItems.length < this.maxLock();
         };
         this.unlockListEnterPredicate = (event) => {
             return !event.data.isFixed;
@@ -43,20 +52,20 @@ class ThyTransferList {
     }
     ngOnInit() {
         this._combineTransferData();
-        if (this.canLock) {
+        if (this.canLock()) {
             this._lockDiff = this.differs.find(this.lockItems).create();
             this._unlockDiff = this.differs.find(this.unlockItems).create();
         }
         else {
             this._unlockDiff = this.differs.find(this.unlockItems).create();
         }
-        this._diff = this.differs.find(this.items).create();
+        this._diff = this.differs.find(this.items()).create();
     }
     _combineTransferData() {
         this.lockItems = [];
         this.unlockItems = [];
-        if (this.canLock) {
-            (this.items || []).forEach(item => {
+        if (this.canLock()) {
+            (this.items() || []).forEach(item => {
                 if (item.isLock) {
                     this.lockItems.push(item);
                 }
@@ -66,7 +75,7 @@ class ThyTransferList {
             });
         }
         else {
-            this.unlockItems = this.items;
+            this.unlockItems = this.items();
         }
     }
     _afterChangeItems(changes, items) {
@@ -86,9 +95,9 @@ class ThyTransferList {
         });
     }
     ngDoCheck() {
-        const changes = this._diff.diff(this.items);
+        const changes = this._diff.diff(this.items());
         if (changes) {
-            this._afterChangeItems(changes, this.items);
+            this._afterChangeItems(changes, this.items());
             this._combineTransferData();
         }
         if (this._lockDiff) {
@@ -127,40 +136,14 @@ class ThyTransferList {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTransferList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTransferList, isStandalone: true, selector: "thy-transfer-list", inputs: { title: "title", items: "items", draggable: "draggable", canLock: "canLock", maxLock: "maxLock", max: "max", disabled: "disabled", template: "template", contentRef: ["renderContentRef", "contentRef"] }, outputs: { draggableUpdate: "draggableUpdate", selectItem: "selectItem", unselectItem: "unselectItem" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"thy-transfer-list-header\">\n  <span class=\"thy-transfer-list-header-title\"\n    >{{ title }} \u00B7 {{ items?.length }}\n    @if (max) {\n      <span>{{ locale().maxLimit.replace('{max}', max) }}</span>\n    }\n  </span>\n</div>\n@if (!contentRef) {\n  <div class=\"thy-transfer-list-body\" cdkDropListGroup [cdkDropListGroupDisabled]=\"!draggable\">\n    @if (canLock) {\n      <div class=\"thy-transfer-list-group-name\">{{ locale().maxLockLimit.replace('{maxLock}', maxLock) }}</div>\n      <thy-list\n        class=\"thy-transfer-list-content\"\n        cdkDropList\n        thyDragDrop\n        id=\"lock\"\n        [cdkDropListData]=\"lockItems\"\n        (cdkDropListDropped)=\"drop($event)\"\n        [cdkDropListEnterPredicate]=\"lockListEnterPredicate\">\n        @if (lockItems.length === 0) {\n          <div class=\"cdk-drop-list-empty\"></div>\n        }\n        @for (item of lockItems; track $index) {\n          <thy-list-item\n            class=\"thy-transfer-list-content-item text-truncate\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            [ngClass]=\"{ active: item.checked }\">\n            <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n          </thy-list-item>\n        }\n      </thy-list>\n      <div class=\"thy-transfer-list-group-name\">{{ locale().unlocked }}</div>\n    }\n    <thy-list\n      class=\"thy-transfer-list-content\"\n      cdkDropList\n      thyDragDrop\n      [cdkDropListDisabled]=\"!draggable\"\n      id=\"unlock\"\n      [cdkDropListData]=\"unlockItems\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListEnterPredicate]=\"unlockListEnterPredicate\">\n      @if (unlockItems.length === 0) {\n        <div class=\"cdk-drop-list-empty\"></div>\n      }\n      @for (item of unlockItems; track $index) {\n        <thy-list-item\n          class=\"thy-transfer-list-content-item text-truncate\"\n          cdkDrag\n          [cdkDragData]=\"item\"\n          [ngClass]=\"{ active: item.checked, disabled: disabled && item.direction === 'left' }\">\n          <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </thy-list-item>\n      }\n    </thy-list>\n  </div>\n} @else {\n  <div class=\"thy-transfer-list-body\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        contentRef;\n        context: {\n          $implicit: items,\n          onSelectItem: onSelectItem,\n          onUnselectItem: onUnselectItem\n        }\n      \"></ng-container>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: ThyList, selector: "thy-list", inputs: ["thyDivided"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: ThyDragDropDirective, selector: "[thyDragDrop]" }, { kind: "component", type: ThyListItem, selector: "thy-list-item,[thy-list-item]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTransferList, isStandalone: true, selector: "thy-transfer-list", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, canLock: { classPropertyName: "canLock", publicName: "canLock", isSignal: true, isRequired: false, transformFunction: null }, maxLock: { classPropertyName: "maxLock", publicName: "maxLock", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, renderContentRef: { classPropertyName: "renderContentRef", publicName: "renderContentRef", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { draggableUpdate: "draggableUpdate", selectItem: "selectItem", unselectItem: "unselectItem" }, host: { classAttribute: "thy-transfer-list" }, ngImport: i0, template: "<div class=\"thy-transfer-list-header\">\n  <span class=\"thy-transfer-list-header-title\"\n    >{{ title() }} \u00B7 {{ items()?.length }}\n    @if (max()) {\n      <span>{{ locale().maxLimit.replace('{max}', max()?.toString() ?? '') }}</span>\n    }\n  </span>\n</div>\n@if (!renderContentRef()) {\n  <div class=\"thy-transfer-list-body\" cdkDropListGroup [cdkDropListGroupDisabled]=\"!draggable()\">\n    @if (canLock()) {\n      <div class=\"thy-transfer-list-group-name\">{{ locale().maxLockLimit.replace('{maxLock}', maxLock()?.toString() ?? '') }}</div>\n      <thy-list\n        class=\"thy-transfer-list-content\"\n        cdkDropList\n        thyDragDrop\n        id=\"lock\"\n        [cdkDropListData]=\"lockItems\"\n        (cdkDropListDropped)=\"drop($event)\"\n        [cdkDropListEnterPredicate]=\"lockListEnterPredicate\">\n        @if (lockItems.length === 0) {\n          <div class=\"cdk-drop-list-empty\"></div>\n        }\n        @for (item of lockItems; track $index) {\n          <thy-list-item\n            class=\"thy-transfer-list-content-item text-truncate\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            [ngClass]=\"{ active: item.checked }\">\n            <ng-template [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n          </thy-list-item>\n        }\n      </thy-list>\n      <div class=\"thy-transfer-list-group-name\">{{ locale().unlocked }}</div>\n    }\n    <thy-list\n      class=\"thy-transfer-list-content\"\n      cdkDropList\n      thyDragDrop\n      [cdkDropListDisabled]=\"!draggable()\"\n      id=\"unlock\"\n      [cdkDropListData]=\"unlockItems\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListEnterPredicate]=\"unlockListEnterPredicate\">\n      @if (unlockItems.length === 0) {\n        <div class=\"cdk-drop-list-empty\"></div>\n      }\n      @for (item of unlockItems; track $index) {\n        <thy-list-item\n          class=\"thy-transfer-list-content-item text-truncate\"\n          cdkDrag\n          [cdkDragData]=\"item\"\n          [ngClass]=\"{ active: item.checked, disabled: disabled() && item.direction === 'left' }\">\n          <ng-template [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </thy-list-item>\n      }\n    </thy-list>\n  </div>\n} @else {\n  <div class=\"thy-transfer-list-body\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        renderContentRef();\n        context: {\n          $implicit: items(),\n          onSelectItem: onSelectItem,\n          onUnselectItem: onUnselectItem\n        }\n      \"></ng-container>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: ThyList, selector: "thy-list", inputs: ["thyDivided"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: ThyDragDropDirective, selector: "[thyDragDrop]" }, { kind: "component", type: ThyListItem, selector: "thy-list-item,[thy-list-item]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTransferList, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-transfer-list', encapsulation: ViewEncapsulation.None, imports: [CdkDropListGroup, ThyList, CdkDropList, ThyDragDropDirective, ThyListItem, CdkDrag, NgClass, NgTemplateOutlet], template: "<div class=\"thy-transfer-list-header\">\n  <span class=\"thy-transfer-list-header-title\"\n    >{{ title }} \u00B7 {{ items?.length }}\n    @if (max) {\n      <span>{{ locale().maxLimit.replace('{max}', max) }}</span>\n    }\n  </span>\n</div>\n@if (!contentRef) {\n  <div class=\"thy-transfer-list-body\" cdkDropListGroup [cdkDropListGroupDisabled]=\"!draggable\">\n    @if (canLock) {\n      <div class=\"thy-transfer-list-group-name\">{{ locale().maxLockLimit.replace('{maxLock}', maxLock) }}</div>\n      <thy-list\n        class=\"thy-transfer-list-content\"\n        cdkDropList\n        thyDragDrop\n        id=\"lock\"\n        [cdkDropListData]=\"lockItems\"\n        (cdkDropListDropped)=\"drop($event)\"\n        [cdkDropListEnterPredicate]=\"lockListEnterPredicate\">\n        @if (lockItems.length === 0) {\n          <div class=\"cdk-drop-list-empty\"></div>\n        }\n        @for (item of lockItems; track $index) {\n          <thy-list-item\n            class=\"thy-transfer-list-content-item text-truncate\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            [ngClass]=\"{ active: item.checked }\">\n            <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n          </thy-list-item>\n        }\n      </thy-list>\n      <div class=\"thy-transfer-list-group-name\">{{ locale().unlocked }}</div>\n    }\n    <thy-list\n      class=\"thy-transfer-list-content\"\n      cdkDropList\n      thyDragDrop\n      [cdkDropListDisabled]=\"!draggable\"\n      id=\"unlock\"\n      [cdkDropListData]=\"unlockItems\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListEnterPredicate]=\"unlockListEnterPredicate\">\n      @if (unlockItems.length === 0) {\n        <div class=\"cdk-drop-list-empty\"></div>\n      }\n      @for (item of unlockItems; track $index) {\n        <thy-list-item\n          class=\"thy-transfer-list-content-item text-truncate\"\n          cdkDrag\n          [cdkDragData]=\"item\"\n          [ngClass]=\"{ active: item.checked, disabled: disabled && item.direction === 'left' }\">\n          <ng-template [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </thy-list-item>\n      }\n    </thy-list>\n  </div>\n} @else {\n  <div class=\"thy-transfer-list-body\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        contentRef;\n        context: {\n          $implicit: items,\n          onSelectItem: onSelectItem,\n          onUnselectItem: onUnselectItem\n        }\n      \"></ng-container>\n  </div>\n}\n" }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], draggable: [{
-                type: Input
-            }], canLock: [{
-                type: Input
-            }], maxLock: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], contentRef: [{
-                type: Input,
-                args: ['renderContentRef']
-            }], draggableUpdate: [{
-                type: Output
-            }], selectItem: [{
-                type: Output
-            }], unselectItem: [{
-                type: Output
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+            args: [{ selector: 'thy-transfer-list', host: {
+                        class: 'thy-transfer-list'
+                    }, encapsulation: ViewEncapsulation.None, imports: [CdkDropListGroup, ThyList, CdkDropList, ThyDragDropDirective, ThyListItem, CdkDrag, NgClass, NgTemplateOutlet], template: "<div class=\"thy-transfer-list-header\">\n  <span class=\"thy-transfer-list-header-title\"\n    >{{ title() }} \u00B7 {{ items()?.length }}\n    @if (max()) {\n      <span>{{ locale().maxLimit.replace('{max}', max()?.toString() ?? '') }}</span>\n    }\n  </span>\n</div>\n@if (!renderContentRef()) {\n  <div class=\"thy-transfer-list-body\" cdkDropListGroup [cdkDropListGroupDisabled]=\"!draggable()\">\n    @if (canLock()) {\n      <div class=\"thy-transfer-list-group-name\">{{ locale().maxLockLimit.replace('{maxLock}', maxLock()?.toString() ?? '') }}</div>\n      <thy-list\n        class=\"thy-transfer-list-content\"\n        cdkDropList\n        thyDragDrop\n        id=\"lock\"\n        [cdkDropListData]=\"lockItems\"\n        (cdkDropListDropped)=\"drop($event)\"\n        [cdkDropListEnterPredicate]=\"lockListEnterPredicate\">\n        @if (lockItems.length === 0) {\n          <div class=\"cdk-drop-list-empty\"></div>\n        }\n        @for (item of lockItems; track $index) {\n          <thy-list-item\n            class=\"thy-transfer-list-content-item text-truncate\"\n            cdkDrag\n            [cdkDragData]=\"item\"\n            [ngClass]=\"{ active: item.checked }\">\n            <ng-template [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n          </thy-list-item>\n        }\n      </thy-list>\n      <div class=\"thy-transfer-list-group-name\">{{ locale().unlocked }}</div>\n    }\n    <thy-list\n      class=\"thy-transfer-list-content\"\n      cdkDropList\n      thyDragDrop\n      [cdkDropListDisabled]=\"!draggable()\"\n      id=\"unlock\"\n      [cdkDropListData]=\"unlockItems\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListEnterPredicate]=\"unlockListEnterPredicate\">\n      @if (unlockItems.length === 0) {\n        <div class=\"cdk-drop-list-empty\"></div>\n      }\n      @for (item of unlockItems; track $index) {\n        <thy-list-item\n          class=\"thy-transfer-list-content-item text-truncate\"\n          cdkDrag\n          [cdkDragData]=\"item\"\n          [ngClass]=\"{ active: item.checked, disabled: disabled() && item.direction === 'left' }\">\n          <ng-template [ngTemplateOutlet]=\"template()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n        </thy-list-item>\n      }\n    </thy-list>\n  </div>\n} @else {\n  <div class=\"thy-transfer-list-body\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        renderContentRef();\n        context: {\n          $implicit: items(),\n          onSelectItem: onSelectItem,\n          onUnselectItem: onUnselectItem\n        }\n      \"></ng-container>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * 穿梭框组件
@@ -169,54 +152,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class ThyTransfer {
     constructor() {
-        this.hostClass = 'thy-transfer';
         this.leftDataSource = [];
         this.rightDataSource = [];
-        this.allDataSource = [];
-        this.rightDraggable = false;
-        this._autoMove = true;
+        /**
+         * 数据源
+         * @type ThyTransferItem[]
+         */
+        this.thyData = input([]);
+        this.thyRenderLeftTemplateRef = input();
+        this.thyRenderRightTemplateRef = input();
+        /**
+         * title集合，title[0]为左标题，title[1]为右标题
+         * @type string[]
+         */
+        this.thyTitles = input([]);
+        /**
+         * 右侧列表是否可以锁定
+         * @default false
+         */
+        this.thyRightCanLock = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 右侧锁定最大数量
+         */
+        this.thyRightLockMax = input(undefined, { transform: numberAttribute });
+        /**
+         * 右侧选择最大数量
+         */
+        this.thyRightMax = input(undefined, { transform: numberAttribute });
+        /**
+         * 设置是否自动移动
+         * @description.en-us Currently not implemented, in order to support the selections move
+         * @default true
+         */
+        this.thyAutoMove = input(true, { transform: coerceBooleanProperty });
+        /**
+         * 左侧列表是否拖动
+         * @default false
+         */
+        this.thyLeftDraggable = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 右侧列表是否拖动
+         * @default false
+         */
+        this.thyRightDraggable = input(false, { transform: coerceBooleanProperty });
         /**
          * @type EventEmitter<ThyTransferDragEvent>
          */
-        this.thyDraggableUpdate = new EventEmitter();
+        this.thyDraggableUpdate = output();
         /**
          * Transfer变化的回调事件
          * @type EventEmitter<ThyTransferChangeEvent>
          */
-        this.thyChange = new EventEmitter();
-    }
-    /**
-     * 数据源
-     * @type ThyTransferItem[]
-     */
-    set thyData(value) {
-        if (value) {
-            this.initializeTransferData(value);
-        }
-    }
-    /**
-     * title集合，title[0]为左标题，title[1]为右标题
-     * @type string[]
-     */
-    set thyTitles(value) {
-        this.leftTitle = value[0] || '';
-        this.rightTitle = value[1] || '';
-    }
-    /**
-     * 设置是否自动移动
-     * @description.en-us Currently not implemented, in order to support the selections move
-     * @default true
-     */
-    set thyAutoMove(value) {
-        this._autoMove = value;
+        this.thyChange = output();
+        /**
+         * 设置自定义Item渲染数据模板
+         * @type TemplateRef
+         */
+        this.templateRef = contentChild('renderTemplate');
+        /**
+         * 设置自定义左侧内容模板
+         * @type TemplateRef
+         */
+        this.leftContentRef = contentChild('renderLeftTemplate');
+        /**
+         * 设置自定义右侧内容模板
+         * @type TemplateRef
+         */
+        this.rightContentRef = contentChild('renderRightTemplate');
+        this.leftTitle = computed(() => this.thyTitles()[0] || '');
+        this.rightTitle = computed(() => this.thyTitles()[1] || '');
+        effect(() => {
+            this.initializeTransferData();
+        });
     }
     ngOnInit() { }
     initializeTransferData(data = []) {
-        this.allDataSource = [];
         this.leftDataSource = [];
         this.rightDataSource = [];
-        data.forEach(item => {
-            this.allDataSource.push(item);
+        this.thyData().forEach(item => {
             if (item.direction === TransferDirection.left) {
                 this.leftDataSource.push(item);
             }
@@ -229,12 +242,12 @@ class ThyTransfer {
         if (event.item.isFixed) {
             return;
         }
-        if (this.thyRightMax <= this.rightDataSource.length && from === TransferDirection.left) {
+        if (this.thyRightMax() <= this.rightDataSource.length && from === TransferDirection.left) {
             return;
         }
         const to = from === TransferDirection.left ? TransferDirection.right : TransferDirection.left;
         event.item.checked = !event.item.checked;
-        if (this._autoMove) {
+        if (this.thyAutoMove()) {
             this.onMove(to);
         }
     }
@@ -292,48 +305,14 @@ class ThyTransfer {
                 : [...otherListData.lock, ...otherListData.unlock];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTransfer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTransfer, isStandalone: true, selector: "thy-transfer", inputs: { thyData: "thyData", thyrenderLeftTemplateRef: "thyrenderLeftTemplateRef", thyrenderRightTemplateRef: "thyrenderRightTemplateRef", thyTitles: "thyTitles", thyRightCanLock: "thyRightCanLock", thyRightLockMax: "thyRightLockMax", thyRightMax: "thyRightMax", thyAutoMove: "thyAutoMove", thyLeftDraggable: "thyLeftDraggable", thyRightDraggable: "thyRightDraggable" }, outputs: { thyDraggableUpdate: "thyDraggableUpdate", thyChange: "thyChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "templateRef", first: true, predicate: ["renderTemplate"], descendants: true }, { propertyName: "leftContentRef", first: true, predicate: ["renderLeftTemplate"], descendants: true }, { propertyName: "rightContentRef", first: true, predicate: ["renderRightTemplate"], descendants: true }], ngImport: i0, template: "<thy-transfer-list\n  [items]=\"allDataSource\"\n  [title]=\"leftTitle\"\n  [draggable]=\"thyLeftDraggable\"\n  [disabled]=\"thyRightMax <= rightDataSource.length\"\n  [renderContentRef]=\"leftContentRef\"\n  (draggableUpdate)=\"onDragUpdate('left', $event)\"\n  [template]=\"leftTemplateRef\"\n  (selectItem)=\"selectItem($event)\"\n  (unselectItem)=\"unselectItem($event)\"\n  >\n  <ng-template #leftTemplateRef let-item>\n    <div (click)=\"onSelect(item.direction === 'left' ? 'left' : 'right', { item: item })\" class=\"list-item-content\">\n      @if (thyLeftDraggable) {\n        <thy-icon thyIconName=\"drag\" class=\"drag-handle\"></thy-icon>\n      }\n      <div class=\"item-name\" [ngClass]=\"{ 'un-select-item': item.direction !== 'right' }\">\n        <ng-template [ngTemplateOutlet]=\"thyTransferListItem\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n      </div>\n      @if (item.direction === 'right') {\n        <thy-icon class=\"text-primary item-status\" thyIconName=\"check\"></thy-icon>\n      }\n    </div>\n  </ng-template>\n</thy-transfer-list>\n\n<div class=\"thy-transfer-operation\">\n  <div class=\"thy-transfer-operation-body\">\n    <thy-icon thyIconName=\"angle-right\" class=\"operation-link\"></thy-icon>\n    <br />\n    <thy-icon thyIconName=\"angle-left\" class=\"operation-link\"></thy-icon>\n  </div>\n</div>\n\n<thy-transfer-list\n  [items]=\"rightDataSource\"\n  [title]=\"rightTitle\"\n  [draggable]=\"thyRightDraggable\"\n  (draggableUpdate)=\"onDragUpdate('right', $event)\"\n  [canLock]=\"thyRightCanLock\"\n  [maxLock]=\"thyRightLockMax\"\n  [max]=\"thyRightMax\"\n  [template]=\"rightTemplateRef\"\n  [renderContentRef]=\"rightContentRef\"\n  (selectItem)=\"selectItem($event)\"\n  (unselectItem)=\"unselectItem($event)\"\n  >\n  <ng-template #rightTemplateRef let-item>\n    @if (thyRightDraggable) {\n      <thy-icon thyIconName=\"drag\" class=\"drag-handle\"></thy-icon>\n    }\n    <div class=\"item-name\">\n      <ng-template [ngTemplateOutlet]=\"thyTransferListItem\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    </div>\n    @if (item.direction === 'right' && !item.isFixed) {\n      <a class=\"link-secondary\" (click)=\"onSelect('right', { item: item })\">\n        <thy-icon class=\"item-status\" thyIconName=\"close\"></thy-icon>\n      </a>\n    }\n  </ng-template>\n</thy-transfer-list>\n\n<ng-template #thyTransferListItem let-item>\n  @if (templateRef) {\n    <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n  }\n  @if (!templateRef) {\n    <thy-flexible-text [thyTooltipContent]=\"item.title\">\n      {{ item.title }}\n    </thy-flexible-text>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyTransferList, selector: "thy-transfer-list", inputs: ["title", "items", "draggable", "canLock", "maxLock", "max", "disabled", "template", "renderContentRef"], outputs: ["draggableUpdate", "selectItem", "unselectItem"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTransfer, isStandalone: true, selector: "thy-transfer", inputs: { thyData: { classPropertyName: "thyData", publicName: "thyData", isSignal: true, isRequired: false, transformFunction: null }, thyRenderLeftTemplateRef: { classPropertyName: "thyRenderLeftTemplateRef", publicName: "thyRenderLeftTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, thyRenderRightTemplateRef: { classPropertyName: "thyRenderRightTemplateRef", publicName: "thyRenderRightTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, thyTitles: { classPropertyName: "thyTitles", publicName: "thyTitles", isSignal: true, isRequired: false, transformFunction: null }, thyRightCanLock: { classPropertyName: "thyRightCanLock", publicName: "thyRightCanLock", isSignal: true, isRequired: false, transformFunction: null }, thyRightLockMax: { classPropertyName: "thyRightLockMax", publicName: "thyRightLockMax", isSignal: true, isRequired: false, transformFunction: null }, thyRightMax: { classPropertyName: "thyRightMax", publicName: "thyRightMax", isSignal: true, isRequired: false, transformFunction: null }, thyAutoMove: { classPropertyName: "thyAutoMove", publicName: "thyAutoMove", isSignal: true, isRequired: false, transformFunction: null }, thyLeftDraggable: { classPropertyName: "thyLeftDraggable", publicName: "thyLeftDraggable", isSignal: true, isRequired: false, transformFunction: null }, thyRightDraggable: { classPropertyName: "thyRightDraggable", publicName: "thyRightDraggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyDraggableUpdate: "thyDraggableUpdate", thyChange: "thyChange" }, host: { classAttribute: "thy-transfer" }, queries: [{ propertyName: "templateRef", first: true, predicate: ["renderTemplate"], descendants: true, isSignal: true }, { propertyName: "leftContentRef", first: true, predicate: ["renderLeftTemplate"], descendants: true, isSignal: true }, { propertyName: "rightContentRef", first: true, predicate: ["renderRightTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<thy-transfer-list\n  [items]=\"thyData()\"\n  [title]=\"leftTitle()\"\n  [draggable]=\"thyLeftDraggable()\"\n  [disabled]=\"thyRightMax() <= rightDataSource.length\"\n  [renderContentRef]=\"leftContentRef()\"\n  (draggableUpdate)=\"onDragUpdate('left', $event)\"\n  [template]=\"leftTemplateRef\"\n  (selectItem)=\"selectItem($event)\"\n  (unselectItem)=\"unselectItem($event)\">\n  <ng-template #leftTemplateRef let-item>\n    <div (click)=\"onSelect(item.direction === 'left' ? 'left' : 'right', { item: item })\" class=\"list-item-content\">\n      @if (thyLeftDraggable()) {\n        <thy-icon thyIconName=\"drag\" class=\"drag-handle\"></thy-icon>\n      }\n      <div class=\"item-name\" [ngClass]=\"{ 'un-select-item': item.direction !== 'right' }\">\n        <ng-template [ngTemplateOutlet]=\"thyTransferListItem\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n      </div>\n      @if (item.direction === 'right') {\n        <thy-icon class=\"text-primary item-status\" thyIconName=\"check\"></thy-icon>\n      }\n    </div>\n  </ng-template>\n</thy-transfer-list>\n\n<div class=\"thy-transfer-operation\">\n  <div class=\"thy-transfer-operation-body\">\n    <thy-icon thyIconName=\"angle-right\" class=\"operation-link\"></thy-icon>\n    <br />\n    <thy-icon thyIconName=\"angle-left\" class=\"operation-link\"></thy-icon>\n  </div>\n</div>\n\n<thy-transfer-list\n  [items]=\"rightDataSource\"\n  [title]=\"rightTitle()\"\n  [draggable]=\"thyRightDraggable()\"\n  (draggableUpdate)=\"onDragUpdate('right', $event)\"\n  [canLock]=\"thyRightCanLock()\"\n  [maxLock]=\"thyRightLockMax()\"\n  [max]=\"thyRightMax()\"\n  [template]=\"rightTemplateRef\"\n  [renderContentRef]=\"rightContentRef()\"\n  (selectItem)=\"selectItem($event)\"\n  (unselectItem)=\"unselectItem($event)\">\n  <ng-template #rightTemplateRef let-item>\n    @if (thyRightDraggable()) {\n      <thy-icon thyIconName=\"drag\" class=\"drag-handle\"></thy-icon>\n    }\n    <div class=\"item-name\">\n      <ng-template [ngTemplateOutlet]=\"thyTransferListItem\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    </div>\n    @if (item.direction === 'right' && !item.isFixed) {\n      <a class=\"link-secondary\" (click)=\"onSelect('right', { item: item })\">\n        <thy-icon class=\"item-status\" thyIconName=\"close\"></thy-icon>\n      </a>\n    }\n  </ng-template>\n</thy-transfer-list>\n\n<ng-template #thyTransferListItem let-item>\n  @if (templateRef()) {\n    <ng-template [ngTemplateOutlet]=\"templateRef()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n  }\n  @if (!templateRef()) {\n    <thy-flexible-text [thyTooltipContent]=\"item.title\">\n      {{ item.title }}\n    </thy-flexible-text>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyTransferList, selector: "thy-transfer-list", inputs: ["title", "items", "draggable", "canLock", "maxLock", "max", "disabled", "template", "renderContentRef"], outputs: ["draggableUpdate", "selectItem", "unselectItem"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTransfer, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-transfer', encapsulation: ViewEncapsulation.None, imports: [ThyTransferList, ThyIcon, NgClass, NgTemplateOutlet, ThyFlexibleText], template: "<thy-transfer-list\n  [items]=\"allDataSource\"\n  [title]=\"leftTitle\"\n  [draggable]=\"thyLeftDraggable\"\n  [disabled]=\"thyRightMax <= rightDataSource.length\"\n  [renderContentRef]=\"leftContentRef\"\n  (draggableUpdate)=\"onDragUpdate('left', $event)\"\n  [template]=\"leftTemplateRef\"\n  (selectItem)=\"selectItem($event)\"\n  (unselectItem)=\"unselectItem($event)\"\n  >\n  <ng-template #leftTemplateRef let-item>\n    <div (click)=\"onSelect(item.direction === 'left' ? 'left' : 'right', { item: item })\" class=\"list-item-content\">\n      @if (thyLeftDraggable) {\n        <thy-icon thyIconName=\"drag\" class=\"drag-handle\"></thy-icon>\n      }\n      <div class=\"item-name\" [ngClass]=\"{ 'un-select-item': item.direction !== 'right' }\">\n        <ng-template [ngTemplateOutlet]=\"thyTransferListItem\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n      </div>\n      @if (item.direction === 'right') {\n        <thy-icon class=\"text-primary item-status\" thyIconName=\"check\"></thy-icon>\n      }\n    </div>\n  </ng-template>\n</thy-transfer-list>\n\n<div class=\"thy-transfer-operation\">\n  <div class=\"thy-transfer-operation-body\">\n    <thy-icon thyIconName=\"angle-right\" class=\"operation-link\"></thy-icon>\n    <br />\n    <thy-icon thyIconName=\"angle-left\" class=\"operation-link\"></thy-icon>\n  </div>\n</div>\n\n<thy-transfer-list\n  [items]=\"rightDataSource\"\n  [title]=\"rightTitle\"\n  [draggable]=\"thyRightDraggable\"\n  (draggableUpdate)=\"onDragUpdate('right', $event)\"\n  [canLock]=\"thyRightCanLock\"\n  [maxLock]=\"thyRightLockMax\"\n  [max]=\"thyRightMax\"\n  [template]=\"rightTemplateRef\"\n  [renderContentRef]=\"rightContentRef\"\n  (selectItem)=\"selectItem($event)\"\n  (unselectItem)=\"unselectItem($event)\"\n  >\n  <ng-template #rightTemplateRef let-item>\n    @if (thyRightDraggable) {\n      <thy-icon thyIconName=\"drag\" class=\"drag-handle\"></thy-icon>\n    }\n    <div class=\"item-name\">\n      <ng-template [ngTemplateOutlet]=\"thyTransferListItem\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    </div>\n    @if (item.direction === 'right' && !item.isFixed) {\n      <a class=\"link-secondary\" (click)=\"onSelect('right', { item: item })\">\n        <thy-icon class=\"item-status\" thyIconName=\"close\"></thy-icon>\n      </a>\n    }\n  </ng-template>\n</thy-transfer-list>\n\n<ng-template #thyTransferListItem let-item>\n  @if (templateRef) {\n    <ng-template [ngTemplateOutlet]=\"templateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n  }\n  @if (!templateRef) {\n    <thy-flexible-text [thyTooltipContent]=\"item.title\">\n      {{ item.title }}\n    </thy-flexible-text>\n  }\n</ng-template>\n" }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], thyData: [{
-                type: Input
-            }], thyrenderLeftTemplateRef: [{
-                type: Input
-            }], thyrenderRightTemplateRef: [{
-                type: Input
-            }], thyTitles: [{
-                type: Input
-            }], thyRightCanLock: [{
-                type: Input
-            }], thyRightLockMax: [{
-                type: Input
-            }], thyRightMax: [{
-                type: Input
-            }], thyAutoMove: [{
-                type: Input
-            }], thyLeftDraggable: [{
-                type: Input
-            }], thyRightDraggable: [{
-                type: Input
-            }], thyDraggableUpdate: [{
-                type: Output
-            }], thyChange: [{
-                type: Output
-            }], templateRef: [{
-                type: ContentChild,
-                args: ['renderTemplate']
-            }], leftContentRef: [{
-                type: ContentChild,
-                args: ['renderLeftTemplate']
-            }], rightContentRef: [{
-                type: ContentChild,
-                args: ['renderRightTemplate']
-            }] } });
+            args: [{ selector: 'thy-transfer', host: {
+                        class: 'thy-transfer'
+                    }, encapsulation: ViewEncapsulation.None, imports: [ThyTransferList, ThyIcon, NgClass, NgTemplateOutlet, ThyFlexibleText], template: "<thy-transfer-list\n  [items]=\"thyData()\"\n  [title]=\"leftTitle()\"\n  [draggable]=\"thyLeftDraggable()\"\n  [disabled]=\"thyRightMax() <= rightDataSource.length\"\n  [renderContentRef]=\"leftContentRef()\"\n  (draggableUpdate)=\"onDragUpdate('left', $event)\"\n  [template]=\"leftTemplateRef\"\n  (selectItem)=\"selectItem($event)\"\n  (unselectItem)=\"unselectItem($event)\">\n  <ng-template #leftTemplateRef let-item>\n    <div (click)=\"onSelect(item.direction === 'left' ? 'left' : 'right', { item: item })\" class=\"list-item-content\">\n      @if (thyLeftDraggable()) {\n        <thy-icon thyIconName=\"drag\" class=\"drag-handle\"></thy-icon>\n      }\n      <div class=\"item-name\" [ngClass]=\"{ 'un-select-item': item.direction !== 'right' }\">\n        <ng-template [ngTemplateOutlet]=\"thyTransferListItem\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n      </div>\n      @if (item.direction === 'right') {\n        <thy-icon class=\"text-primary item-status\" thyIconName=\"check\"></thy-icon>\n      }\n    </div>\n  </ng-template>\n</thy-transfer-list>\n\n<div class=\"thy-transfer-operation\">\n  <div class=\"thy-transfer-operation-body\">\n    <thy-icon thyIconName=\"angle-right\" class=\"operation-link\"></thy-icon>\n    <br />\n    <thy-icon thyIconName=\"angle-left\" class=\"operation-link\"></thy-icon>\n  </div>\n</div>\n\n<thy-transfer-list\n  [items]=\"rightDataSource\"\n  [title]=\"rightTitle()\"\n  [draggable]=\"thyRightDraggable()\"\n  (draggableUpdate)=\"onDragUpdate('right', $event)\"\n  [canLock]=\"thyRightCanLock()\"\n  [maxLock]=\"thyRightLockMax()\"\n  [max]=\"thyRightMax()\"\n  [template]=\"rightTemplateRef\"\n  [renderContentRef]=\"rightContentRef()\"\n  (selectItem)=\"selectItem($event)\"\n  (unselectItem)=\"unselectItem($event)\">\n  <ng-template #rightTemplateRef let-item>\n    @if (thyRightDraggable()) {\n      <thy-icon thyIconName=\"drag\" class=\"drag-handle\"></thy-icon>\n    }\n    <div class=\"item-name\">\n      <ng-template [ngTemplateOutlet]=\"thyTransferListItem\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n    </div>\n    @if (item.direction === 'right' && !item.isFixed) {\n      <a class=\"link-secondary\" (click)=\"onSelect('right', { item: item })\">\n        <thy-icon class=\"item-status\" thyIconName=\"close\"></thy-icon>\n      </a>\n    }\n  </ng-template>\n</thy-transfer-list>\n\n<ng-template #thyTransferListItem let-item>\n  @if (templateRef()) {\n    <ng-template [ngTemplateOutlet]=\"templateRef()\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\n  }\n  @if (!templateRef()) {\n    <thy-flexible-text [thyTooltipContent]=\"item.title\">\n      {{ item.title }}\n    </thy-flexible-text>\n  }\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
 
 class ThyTransferModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTransferModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }