ngx-tethys 19.1.0-next.7 → 19.1.0-next.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/fesm2022/ngx-tethys-cascader.mjs +1 -1
- package/fesm2022/ngx-tethys-cascader.mjs.map +1 -1
- package/fesm2022/ngx-tethys-i18n.mjs +15 -0
- package/fesm2022/ngx-tethys-i18n.mjs.map +1 -1
- package/fesm2022/ngx-tethys-layout.mjs +2 -2
- package/fesm2022/ngx-tethys-layout.mjs.map +1 -1
- package/fesm2022/ngx-tethys-select.mjs +1 -1
- package/fesm2022/ngx-tethys-select.mjs.map +1 -1
- package/fesm2022/ngx-tethys-shared.mjs +85 -69
- package/fesm2022/ngx-tethys-shared.mjs.map +1 -1
- package/fesm2022/ngx-tethys-tree-select.mjs +1 -1
- package/fesm2022/ngx-tethys-tree-select.mjs.map +1 -1
- package/fesm2022/ngx-tethys.mjs +1 -1
- package/fesm2022/ngx-tethys.mjs.map +1 -1
- package/i18n/i18n.d.ts +5 -1
- package/i18n/locales/de-de.d.ts +3 -0
- package/i18n/locales/en-us.d.ts +3 -0
- package/i18n/locales/ja-jp.d.ts +3 -0
- package/i18n/locales/zh-hans.d.ts +3 -0
- package/i18n/locales/zh-hant.d.ts +3 -0
- package/package.json +1 -1
- package/schematics/version.d.ts +1 -1
- package/schematics/version.js +1 -1
- package/shared/select/select-control/select-control.component.d.ts +11 -7
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, inject, ViewContainerRef, effect, Directive, ElementRef, NgZone, Renderer2, output, computed, ContentChildren, KeyValueDiffers, TemplateRef, ChangeDetectorRef, NgModule, Input, linkedSignal, numberAttribute, viewChild, untracked, ChangeDetectionStrategy, Component, InjectionToken, HostListener, ViewEncapsulation
|
|
2
|
+
import { input, inject, ViewContainerRef, effect, Directive, ElementRef, NgZone, Renderer2, output, computed, ContentChildren, KeyValueDiffers, TemplateRef, ChangeDetectorRef, NgModule, Input, model, signal, linkedSignal, numberAttribute, viewChild, untracked, ChangeDetectionStrategy, Component, InjectionToken, HostListener, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import { reqAnimFrame, TabIndexDisabledControlValueAccessorMixin, ThyTranslate, mixinDisabled, MixinBase } from 'ngx-tethys/core';
|
|
4
4
|
import { coerceBooleanProperty, keycodes, isTemplateRef, isUndefinedOrNull, ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
|
|
5
5
|
import { useHostRenderer } from '@tethys/cdk/dom';
|
|
@@ -14,6 +14,8 @@ import * as i1 from '@angular/forms';
|
|
|
14
14
|
import { FormsModule } from '@angular/forms';
|
|
15
15
|
import * as i2 from 'ngx-tethys/grid';
|
|
16
16
|
import { ThyGridModule } from 'ngx-tethys/grid';
|
|
17
|
+
import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
|
|
18
|
+
import { injectLocale } from 'ngx-tethys/i18n';
|
|
17
19
|
import { outputToObservable } from '@angular/core/rxjs-interop';
|
|
18
20
|
|
|
19
21
|
/**
|
|
@@ -702,38 +704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
702
704
|
* @private
|
|
703
705
|
*/
|
|
704
706
|
class ThySelectControl {
|
|
705
|
-
get selectedValueStyle() {
|
|
706
|
-
let showSelectedValue = false;
|
|
707
|
-
if (this.thyShowSearch()) {
|
|
708
|
-
if (this.thyPanelOpened()) {
|
|
709
|
-
showSelectedValue = !(this.isComposing || this.inputValue);
|
|
710
|
-
}
|
|
711
|
-
else {
|
|
712
|
-
showSelectedValue = true;
|
|
713
|
-
}
|
|
714
|
-
}
|
|
715
|
-
else {
|
|
716
|
-
showSelectedValue = true;
|
|
717
|
-
}
|
|
718
|
-
return { display: showSelectedValue ? 'flex' : 'none' };
|
|
719
|
-
}
|
|
720
|
-
get placeholderStyle() {
|
|
721
|
-
let placeholder = true;
|
|
722
|
-
if (this.isSelectedValue()) {
|
|
723
|
-
placeholder = false;
|
|
724
|
-
}
|
|
725
|
-
if (!this.thyPlaceholder()) {
|
|
726
|
-
placeholder = false;
|
|
727
|
-
}
|
|
728
|
-
if (this.isComposing || this.inputValue) {
|
|
729
|
-
placeholder = false;
|
|
730
|
-
}
|
|
731
|
-
return { display: placeholder ? 'block' : 'none' };
|
|
732
|
-
}
|
|
733
707
|
constructor() {
|
|
734
708
|
this.renderer = inject(Renderer2);
|
|
735
|
-
this.inputValue = '';
|
|
736
|
-
this.isComposing = false;
|
|
709
|
+
this.inputValue = model('');
|
|
710
|
+
this.isComposing = signal(false);
|
|
737
711
|
this.hostRenderer = useHostRenderer();
|
|
738
712
|
this.thyPanelOpened = input(false, { transform: coerceBooleanProperty });
|
|
739
713
|
this.thyIsMultiple = input(false, { transform: coerceBooleanProperty });
|
|
@@ -768,6 +742,7 @@ class ThySelectControl {
|
|
|
768
742
|
this.thyOnClear = output();
|
|
769
743
|
this.thyOnBlur = output();
|
|
770
744
|
this.inputElement = viewChild('inputElement');
|
|
745
|
+
this.locale = injectLocale('shared');
|
|
771
746
|
this.isSelectedValue = computed(() => {
|
|
772
747
|
return ((!this.thyIsMultiple() && !isUndefinedOrNull(this.thySelectedOptions())) ||
|
|
773
748
|
(this.thyIsMultiple() && this.thySelectedOptions().length > 0));
|
|
@@ -782,13 +757,49 @@ class ThySelectControl {
|
|
|
782
757
|
}
|
|
783
758
|
return selectedOptions;
|
|
784
759
|
});
|
|
760
|
+
this.collapsedSelectedTags = computed(() => {
|
|
761
|
+
const selectedOptions = this.thySelectedOptions();
|
|
762
|
+
const maxTagCount = this.thyMaxTagCount();
|
|
763
|
+
if (maxTagCount && selectedOptions instanceof Array && selectedOptions.length > maxTagCount) {
|
|
764
|
+
return selectedOptions.slice(maxTagCount - 1, selectedOptions.length);
|
|
765
|
+
}
|
|
766
|
+
return [];
|
|
767
|
+
});
|
|
768
|
+
this.selectedValueStyle = computed(() => {
|
|
769
|
+
let showSelectedValue = false;
|
|
770
|
+
if (this.thyShowSearch()) {
|
|
771
|
+
if (this.thyPanelOpened()) {
|
|
772
|
+
showSelectedValue = !(this.isComposing() || this.inputValue());
|
|
773
|
+
}
|
|
774
|
+
else {
|
|
775
|
+
showSelectedValue = true;
|
|
776
|
+
}
|
|
777
|
+
}
|
|
778
|
+
else {
|
|
779
|
+
showSelectedValue = true;
|
|
780
|
+
}
|
|
781
|
+
return { display: showSelectedValue ? 'flex' : 'none' };
|
|
782
|
+
});
|
|
783
|
+
this.placeholderStyle = computed(() => {
|
|
784
|
+
let placeholder = true;
|
|
785
|
+
if (this.isSelectedValue()) {
|
|
786
|
+
placeholder = false;
|
|
787
|
+
}
|
|
788
|
+
if (!this.thyPlaceholder()) {
|
|
789
|
+
placeholder = false;
|
|
790
|
+
}
|
|
791
|
+
if (this.isComposing() || this.inputValue()) {
|
|
792
|
+
placeholder = false;
|
|
793
|
+
}
|
|
794
|
+
return { display: placeholder ? 'block' : 'none' };
|
|
795
|
+
});
|
|
785
796
|
effect(() => {
|
|
786
797
|
const panelOpened = this.thyPanelOpened();
|
|
787
798
|
if (panelOpened) {
|
|
788
799
|
untracked(() => {
|
|
789
800
|
if (this.thyShowSearch()) {
|
|
790
801
|
Promise.resolve(null).then(() => {
|
|
791
|
-
this.inputElement()
|
|
802
|
+
this.inputElement()?.nativeElement.focus();
|
|
792
803
|
});
|
|
793
804
|
}
|
|
794
805
|
});
|
|
@@ -797,10 +808,10 @@ class ThySelectControl {
|
|
|
797
808
|
untracked(() => {
|
|
798
809
|
if (this.thyShowSearch()) {
|
|
799
810
|
new Promise(resolve => setTimeout(resolve, 100)).then(() => {
|
|
800
|
-
if (this.inputValue) {
|
|
801
|
-
this.inputValue
|
|
811
|
+
if (this.inputValue()) {
|
|
812
|
+
this.inputValue.set('');
|
|
802
813
|
this.updateWidth();
|
|
803
|
-
this.thyOnSearch.emit(this.inputValue);
|
|
814
|
+
this.thyOnSearch.emit(this.inputValue());
|
|
804
815
|
}
|
|
805
816
|
});
|
|
806
817
|
}
|
|
@@ -811,35 +822,37 @@ class ThySelectControl {
|
|
|
811
822
|
this.setSelectControlClass();
|
|
812
823
|
});
|
|
813
824
|
effect(() => {
|
|
814
|
-
let sameValue = false;
|
|
815
825
|
const oldValue = this.previousSelectedOptions();
|
|
816
826
|
const value = this.thySelectedOptions();
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
if (oldValue && value) {
|
|
825
|
-
sameValue = oldValue.thyValue === value.thyValue;
|
|
827
|
+
if (value) {
|
|
828
|
+
let sameValue = false;
|
|
829
|
+
untracked(() => {
|
|
830
|
+
if (this.thyIsMultiple()) {
|
|
831
|
+
if (oldValue instanceof Array && value instanceof Array && oldValue.length === value.length) {
|
|
832
|
+
sameValue = value.every((option, index) => option.thyValue === oldValue[index].thyValue);
|
|
833
|
+
}
|
|
826
834
|
}
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
this.inputValue = '';
|
|
832
|
-
this.updateWidth();
|
|
833
|
-
});
|
|
835
|
+
else {
|
|
836
|
+
if (oldValue && value) {
|
|
837
|
+
sameValue = oldValue.thyValue === value.thyValue;
|
|
838
|
+
}
|
|
834
839
|
}
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
840
|
+
if (this.thyPanelOpened() && this.thyShowSearch()) {
|
|
841
|
+
if (!sameValue) {
|
|
842
|
+
Promise.resolve(null).then(() => {
|
|
843
|
+
this.inputValue.set('');
|
|
844
|
+
this.updateWidth();
|
|
845
|
+
});
|
|
839
846
|
}
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
847
|
+
//等待组件渲染好再聚焦
|
|
848
|
+
setTimeout(() => {
|
|
849
|
+
if (this.thyPanelOpened()) {
|
|
850
|
+
this.inputElement()?.nativeElement.focus();
|
|
851
|
+
}
|
|
852
|
+
}, 200);
|
|
853
|
+
}
|
|
854
|
+
});
|
|
855
|
+
}
|
|
843
856
|
});
|
|
844
857
|
}
|
|
845
858
|
ngOnInit() { }
|
|
@@ -865,10 +878,10 @@ class ThySelectControl {
|
|
|
865
878
|
};
|
|
866
879
|
}
|
|
867
880
|
setInputValue(value) {
|
|
868
|
-
if (value !== this.inputValue) {
|
|
869
|
-
this.inputValue
|
|
881
|
+
if (value !== this.inputValue()) {
|
|
882
|
+
this.inputValue.set(value);
|
|
870
883
|
this.updateWidth();
|
|
871
|
-
this.thyOnSearch.emit(this.inputValue);
|
|
884
|
+
this.thyOnSearch.emit(this.inputValue());
|
|
872
885
|
}
|
|
873
886
|
}
|
|
874
887
|
handleBackspace(event) {
|
|
@@ -876,7 +889,7 @@ class ThySelectControl {
|
|
|
876
889
|
return;
|
|
877
890
|
}
|
|
878
891
|
const selectedOptions = this.thySelectedOptions();
|
|
879
|
-
if (!this.inputValue?.length && selectedOptions instanceof Array) {
|
|
892
|
+
if (!this.inputValue()?.length && selectedOptions instanceof Array) {
|
|
880
893
|
if (selectedOptions.length > 0) {
|
|
881
894
|
this.removeHandle(selectedOptions[selectedOptions.length - 1], event);
|
|
882
895
|
}
|
|
@@ -884,11 +897,11 @@ class ThySelectControl {
|
|
|
884
897
|
}
|
|
885
898
|
updateWidth() {
|
|
886
899
|
if (this.thyIsMultiple() && this.thyShowSearch()) {
|
|
887
|
-
if (this.inputValue || this.isComposing) {
|
|
888
|
-
this.renderer.setStyle(this.inputElement()
|
|
900
|
+
if (this.inputValue() || this.isComposing()) {
|
|
901
|
+
this.renderer.setStyle(this.inputElement()?.nativeElement, 'width', `${this.inputElement()?.nativeElement.scrollWidth}px`);
|
|
889
902
|
}
|
|
890
903
|
else {
|
|
891
|
-
this.renderer.removeStyle(this.inputElement()
|
|
904
|
+
this.renderer.removeStyle(this.inputElement()?.nativeElement, 'width');
|
|
892
905
|
}
|
|
893
906
|
}
|
|
894
907
|
}
|
|
@@ -898,6 +911,9 @@ class ThySelectControl {
|
|
|
898
911
|
clearHandle($event) {
|
|
899
912
|
this.thyOnClear.emit($event);
|
|
900
913
|
}
|
|
914
|
+
compositionChange(isComposing) {
|
|
915
|
+
this.isComposing.set(isComposing);
|
|
916
|
+
}
|
|
901
917
|
trackValue(_index, option) {
|
|
902
918
|
return option.thyValue;
|
|
903
919
|
}
|
|
@@ -905,13 +921,13 @@ class ThySelectControl {
|
|
|
905
921
|
this.thyOnBlur.emit(event);
|
|
906
922
|
}
|
|
907
923
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { thyPanelOpened: { classPropertyName: "thyPanelOpened", publicName: "thyPanelOpened", isSignal: true, isRequired: false, transformFunction: null }, thyIsMultiple: { classPropertyName: "thyIsMultiple", publicName: "thyIsMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thySelectedOptions: { classPropertyName: "thySelectedOptions", publicName: "thySelectedOptions", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, customDisplayTemplate: { classPropertyName: "customDisplayTemplate", publicName: "customDisplayTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyBorderless: { classPropertyName: "thyBorderless", publicName: "thyBorderless", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless()" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n <input\n #inputElement\n [tabindex]=\"-1\"\n (compositionstart)=\"
|
|
924
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, thyPanelOpened: { classPropertyName: "thyPanelOpened", publicName: "thyPanelOpened", isSignal: true, isRequired: false, transformFunction: null }, thyIsMultiple: { classPropertyName: "thyIsMultiple", publicName: "thyIsMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thySelectedOptions: { classPropertyName: "thySelectedOptions", publicName: "thySelectedOptions", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, customDisplayTemplate: { classPropertyName: "customDisplayTemplate", publicName: "customDisplayTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyBorderless: { classPropertyName: "thyBorderless", publicName: "thyBorderless", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange", thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless()" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n <input\n #inputElement\n [tabindex]=\"-1\"\n (compositionstart)=\"compositionChange(true)\"\n (compositionend)=\"compositionChange(false)\"\n autocomplete=\"something-new\"\n [ngClass]=\"searchInputControlClass\"\n (input)=\"updateWidth()\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"setInputValue($event)\"\n (keydown.backspace)=\"handleBackspace($event)\"\n [disabled]=\"thyDisabled()\"\n (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n @if (!isSelectedValue()) {\n <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle()\">\n {{ thyPlaceholder() }}\n </div>\n }\n @if (thyIsMultiple()) {\n <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n @if (thyPreset() === 'tag') {\n @for (item of maxSelectedTags(); track trackValue($index, item)) {\n <div thyFlexItem class=\"custom-choice-item text-truncate\">\n <ng-template\n [ngTemplateOutlet]=\"customDisplayTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n </ng-template>\n @if (!thyDisabled()) {\n <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n <span>\n <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n </span>\n </div>\n }\n </div>\n }\n } @else {\n @for (item of maxSelectedTags(); track trackValue($index, item)) {\n <div thyFlexItem thyTag class=\"choice-item\" [ngClass]=\"{ disabled: thyDisabled() === true }\" [thySize]=\"tagSize()\">\n <div class=\"text-truncate h-100\">\n @if (!customDisplayTemplate()) {\n {{ item?.thyLabelText }}\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"customDisplayTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n }\n </div>\n @if (!thyDisabled()) {\n <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n <span>\n <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n </span>\n </div>\n }\n </div>\n }\n }\n @if (thyMaxTagCount() && thySelectedOptions()?.length > thyMaxTagCount()) {\n <div\n thyFlexItem\n class=\"choice-item max-tag-count-choice\"\n thyTag\n [thySize]=\"tagSize()\"\n [ngClass]=\"{ disabled: thyDisabled() === true }\"\n [thyTooltip]=\"maxTagTooltip\">\n <div class=\"text-truncate\">+{{ thySelectedOptions()?.length - thyMaxTagCount() + 1 }}</div>\n </div>\n }\n <div thyFlexItem class=\"select-control-search\">\n <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n </div>\n </div>\n } @else {\n @if (isSelectedValue()) {\n <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle()\">\n @if (!customDisplayTemplate()) {\n <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"customDisplayTemplate()\"\n [ngTemplateOutletContext]=\"{\n $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n }\"></ng-template>\n }\n </div>\n }\n <div class=\"select-control-search\">\n <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n </div>\n }\n</div>\n<span class=\"select-control-arrow\">\n <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n </span>\n}\n\n<ng-template #maxTagTooltip>\n @let lastIndex = collapsedSelectedTags().length - 1;\n @for (item of collapsedSelectedTags(); track trackValue($index, item)) {\n {{ item.thyLabelText }}\n @if ($index !== lastIndex) {\n {{ locale().comma }}\n }\n }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i2.ThyFlex, selector: "[thyFlex]", inputs: ["thyDirection", "thyWrap", "thyJustifyContent", "thyAlignItems", "thyGap"] }, { kind: "directive", type: i2.ThyFlexItem, selector: "[thyFlexItem]", inputs: ["thyFlexItem", "thyGrow", "thyShrink", "thyBasis"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
909
925
|
}
|
|
910
926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectControl, decorators: [{
|
|
911
927
|
type: Component,
|
|
912
|
-
args: [{ selector: 'thy-select-control,[thySelectControl]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass, NgStyle, ThyTag, NgTemplateOutlet, ThyIcon, ThyGridModule], host: {
|
|
928
|
+
args: [{ selector: 'thy-select-control,[thySelectControl]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass, NgStyle, ThyTag, NgTemplateOutlet, ThyIcon, ThyGridModule, ThyTooltipDirective], host: {
|
|
913
929
|
'[class.select-control-borderless]': 'thyBorderless()'
|
|
914
|
-
}, template: "<ng-template #inputTemplate>\n <input\n #inputElement\n [tabindex]=\"-1\"\n (compositionstart)=\"
|
|
930
|
+
}, template: "<ng-template #inputTemplate>\n <input\n #inputElement\n [tabindex]=\"-1\"\n (compositionstart)=\"compositionChange(true)\"\n (compositionend)=\"compositionChange(false)\"\n autocomplete=\"something-new\"\n [ngClass]=\"searchInputControlClass\"\n (input)=\"updateWidth()\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"setInputValue($event)\"\n (keydown.backspace)=\"handleBackspace($event)\"\n [disabled]=\"thyDisabled()\"\n (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n @if (!isSelectedValue()) {\n <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle()\">\n {{ thyPlaceholder() }}\n </div>\n }\n @if (thyIsMultiple()) {\n <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n @if (thyPreset() === 'tag') {\n @for (item of maxSelectedTags(); track trackValue($index, item)) {\n <div thyFlexItem class=\"custom-choice-item text-truncate\">\n <ng-template\n [ngTemplateOutlet]=\"customDisplayTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n </ng-template>\n @if (!thyDisabled()) {\n <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n <span>\n <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n </span>\n </div>\n }\n </div>\n }\n } @else {\n @for (item of maxSelectedTags(); track trackValue($index, item)) {\n <div thyFlexItem thyTag class=\"choice-item\" [ngClass]=\"{ disabled: thyDisabled() === true }\" [thySize]=\"tagSize()\">\n <div class=\"text-truncate h-100\">\n @if (!customDisplayTemplate()) {\n {{ item?.thyLabelText }}\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"customDisplayTemplate()\"\n [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n }\n </div>\n @if (!thyDisabled()) {\n <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n <span>\n <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n </span>\n </div>\n }\n </div>\n }\n }\n @if (thyMaxTagCount() && thySelectedOptions()?.length > thyMaxTagCount()) {\n <div\n thyFlexItem\n class=\"choice-item max-tag-count-choice\"\n thyTag\n [thySize]=\"tagSize()\"\n [ngClass]=\"{ disabled: thyDisabled() === true }\"\n [thyTooltip]=\"maxTagTooltip\">\n <div class=\"text-truncate\">+{{ thySelectedOptions()?.length - thyMaxTagCount() + 1 }}</div>\n </div>\n }\n <div thyFlexItem class=\"select-control-search\">\n <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n </div>\n </div>\n } @else {\n @if (isSelectedValue()) {\n <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle()\">\n @if (!customDisplayTemplate()) {\n <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n } @else {\n <ng-template\n [ngTemplateOutlet]=\"customDisplayTemplate()\"\n [ngTemplateOutletContext]=\"{\n $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n }\"></ng-template>\n }\n </div>\n }\n <div class=\"select-control-search\">\n <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n </div>\n }\n</div>\n<span class=\"select-control-arrow\">\n <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n </span>\n}\n\n<ng-template #maxTagTooltip>\n @let lastIndex = collapsedSelectedTags().length - 1;\n @for (item of collapsedSelectedTags(); track trackValue($index, item)) {\n {{ item.thyLabelText }}\n @if ($index !== lastIndex) {\n {{ locale().comma }}\n }\n }\n</ng-template>\n" }]
|
|
915
931
|
}], ctorParameters: () => [] });
|
|
916
932
|
|
|
917
933
|
/**
|