@tetacom/ng-components 1.7.4 → 1.7.5
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.
|
@@ -6641,6 +6641,15 @@ class SelectComponent {
|
|
|
6641
6641
|
this.value = this.options && this.options?.find((option) => this.getValue(option) === value);
|
|
6642
6642
|
}
|
|
6643
6643
|
}
|
|
6644
|
+
trackOption(item, index) {
|
|
6645
|
+
if (typeof item === 'object' && item['id'] !== null && item['id'] !== undefined) {
|
|
6646
|
+
return item['id'];
|
|
6647
|
+
}
|
|
6648
|
+
if (typeof item === 'string' || typeof item === 'number') {
|
|
6649
|
+
return item;
|
|
6650
|
+
}
|
|
6651
|
+
return index;
|
|
6652
|
+
}
|
|
6644
6653
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6645
6654
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SelectComponent, isStandalone: true, selector: "teta-select", inputs: { multiple: "multiple", options: "options", invalid: "invalid", align: "align", verticalAlign: "verticalAlign", autoClose: "autoClose", autoCloseIgnore: "autoCloseIgnore", disabled: "disabled", itemSize: "itemSize", virtual: "virtual", icon: "icon", placeholder: "placeholder", appendToBody: "appendToBody", allowNull: "allowNull", viewType: "viewType", notFoundText: "notFoundText", valueRef: "valueRef", textRef: "textRef", searchRef: "searchRef", open: "open" }, host: { properties: { "class.select_multiple": "this.multiple", "class.select_open": "this.open", "class.select": "this.selectClass", "tabindex": "this.tabindex", "class.select_disabled": "this.isDisabled" } }, providers: [
|
|
6646
6655
|
{
|
|
@@ -6648,7 +6657,7 @@ class SelectComponent {
|
|
|
6648
6657
|
useExisting: forwardRef(() => SelectComponent),
|
|
6649
6658
|
multi: true,
|
|
6650
6659
|
},
|
|
6651
|
-
], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@if (locale | async; as loc) {\n <teta-dropdown\n [align]=\"align\"\n [verticalAlign]=\"verticalAlign\"\n [autoClose]=\"autoClose\"\n [autoCloseIgnore]=\"autoCloseIgnore\"\n [(open)]=\"open\"\n [appendToBody]=\"appendToBody\"\n [disabled]=\"disabled\"\n [viewType]=\"viewType\"\n class=\"row row_auto\"\n >\n <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n <div class=\"row_auto flex align-center\">\n @if (icon) {\n <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n }\n @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n <span class=\"placeholder\">\n {{ placeholder || loc.notSelected }}\n </span>\n }\n <ng-container\n *ngTemplateOutlet=\"\n valueDirective ? valueDirective.template : valueDefault;\n context: { $implicit: value, value: value }\n \"\n ></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n @if (options?.length) {\n <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n @if (searchRef) {\n <div #searchInput class=\"select-search padding-h-2 padding-top-2\" (click)=\"$event.stopPropagation()\">\n <teta-text-field\n [ngModel]=\"searchText\"\n [class]=\"'select_' + viewType\"\n (ngModelChange)=\"search($event)\"\n [placeholder]=\"loc.search\"\n [leftIconName]=\"'search'\"\n ></teta-text-field>\n </div>\n }\n @if (visibleOptions?.length) {\n @if (!multiple && allowNull) {\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n {{ loc.notSelected }}\n </div>\n <div class=\"list-divider margin-bottom-0\"></div>\n }\n @if (virtual) {\n <div class=\"column column_auto padding-v-2\" style=\"height: 50vh\">\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n <cdk-virtual-scroll-viewport\n tetaScrollable\n [itemSize]=\"28\"\n minBufferPx=\"200\"\n maxBufferPx=\"600\"\n style=\"flex-grow: 1\"\n >\n <div\n [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n style=\"display: flex\"\n *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n [class.list-item_active]=\"itemSelected(option)\"\n [class.list-item_disabled]=\"option.disabled === true\"\n [tetaHighlight]=\"searchText\"\n [style.height.px]=\"28\"\n (click)=\"clickOption(option, $event)\"\n >\n <div [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"\n optionDirective ? optionDirective.template : optionDefault;\n context: { $implicit: option, option: option }\n \"\n >\n </ng-container>\n </div>\n @if (itemSelected(option)) {\n <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n </div>\n } @else {\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n <div class=\"list\">\n @for (option of visibleOptions; track option) {\n <div\n [class]=\"'list-item list-item_interactive justify-content-between select_' + viewType\"\n [class.list-item_active]=\"itemSelected(option)\"\n [class.list-item_disabled]=\"option.disabled === true\"\n (click)=\"clickOption(option, $event)\"\n >\n <span [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"\n optionDirective ? optionDirective.template : optionDefault;\n context: { $implicit: option, option: option }\n \"\n >\n </ng-container>\n </span>\n @if (itemSelected(option) && multiple) {\n <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n }\n </div>\n }\n </div>\n </teta-scrollable>\n }\n } @else {\n <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n {{ notFoundText || loc.notFound }}\n </p>\n }\n @if (multiple && value?.length) {\n <div class=\"row row_auto select-chip-field flex-wrap\">\n @for (item of value; track item) {\n <div class=\"tag\">\n <p>{{ getText(item) }}</p>\n <teta-icon\n class=\"cursor-pointer\"\n [palette]=\"'text'\"\n [name]=\"'closeCircle'\"\n (click)=\"removeItemClick(item, $event)\"\n ></teta-icon>\n </div>\n }\n </div>\n }\n </div>\n }\n </teta-dropdown>\n <ng-template #notFound>\n <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n {{ notFoundText || loc.notFound }}\n </p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{ getText(option) }}\n </ng-template>\n <ng-template #valueDefault let-value>\n @if (multiple) {\n <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n {{ loc.selected + ' ' + value?.length }}\n </div>\n }\n @if (!multiple) {\n <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n }\n </ng-template>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6660
|
+
], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@if (locale | async; as loc) {\n <teta-dropdown\n [align]=\"align\"\n [verticalAlign]=\"verticalAlign\"\n [autoClose]=\"autoClose\"\n [autoCloseIgnore]=\"autoCloseIgnore\"\n [(open)]=\"open\"\n [appendToBody]=\"appendToBody\"\n [disabled]=\"disabled\"\n [viewType]=\"viewType\"\n class=\"row row_auto\"\n >\n <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n <div class=\"row_auto flex align-center\">\n @if (icon) {\n <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n }\n @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n <span class=\"placeholder\">\n {{ placeholder || loc.notSelected }}\n </span>\n }\n <ng-container\n *ngTemplateOutlet=\"\n valueDirective ? valueDirective.template : valueDefault;\n context: { $implicit: value, value: value }\n \"\n ></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n @if (options?.length) {\n <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n @if (searchRef) {\n <div #searchInput class=\"select-search padding-h-2 padding-top-2\" (click)=\"$event.stopPropagation()\">\n <teta-text-field\n [ngModel]=\"searchText\"\n [class]=\"'select_' + viewType\"\n (ngModelChange)=\"search($event)\"\n [placeholder]=\"loc.search\"\n [leftIconName]=\"'search'\"\n ></teta-text-field>\n </div>\n }\n @if (visibleOptions?.length) {\n @if (!multiple && allowNull) {\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n {{ loc.notSelected }}\n </div>\n <div class=\"list-divider margin-bottom-0\"></div>\n }\n @if (virtual) {\n <div class=\"column column_auto padding-v-2\" style=\"height: 50vh\">\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n <cdk-virtual-scroll-viewport\n tetaScrollable\n [itemSize]=\"28\"\n minBufferPx=\"200\"\n maxBufferPx=\"600\"\n style=\"flex-grow: 1\"\n >\n <div\n [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n style=\"display: flex\"\n *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n [class.list-item_active]=\"itemSelected(option)\"\n [class.list-item_disabled]=\"option.disabled === true\"\n [tetaHighlight]=\"searchText\"\n [style.height.px]=\"28\"\n (click)=\"clickOption(option, $event)\"\n >\n <div [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"\n optionDirective ? optionDirective.template : optionDefault;\n context: { $implicit: option, option: option }\n \"\n >\n </ng-container>\n </div>\n @if (itemSelected(option)) {\n <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n </div>\n } @else {\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n <div class=\"list\">\n @for (option of visibleOptions; track trackOption(option, $index)) {\n <div\n [class]=\"'list-item list-item_interactive justify-content-between select_' + viewType\"\n [class.list-item_active]=\"itemSelected(option)\"\n [class.list-item_disabled]=\"option.disabled === true\"\n (click)=\"clickOption(option, $event)\"\n >\n <span [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"\n optionDirective ? optionDirective.template : optionDefault;\n context: { $implicit: option, option: option }\n \"\n >\n </ng-container>\n </span>\n @if (itemSelected(option) && multiple) {\n <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n }\n </div>\n }\n </div>\n </teta-scrollable>\n }\n } @else {\n <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n {{ notFoundText || loc.notFound }}\n </p>\n }\n @if (multiple && value?.length) {\n <div class=\"row row_auto select-chip-field flex-wrap\">\n @for (item of value; track trackOption(item, $index)) {\n <div class=\"tag\">\n <p>{{ getText(item) }}</p>\n <teta-icon\n class=\"cursor-pointer\"\n [palette]=\"'text'\"\n [name]=\"'closeCircle'\"\n (click)=\"removeItemClick(item, $event)\"\n ></teta-icon>\n </div>\n }\n </div>\n }\n </div>\n }\n </teta-dropdown>\n <ng-template #notFound>\n <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n {{ notFoundText || loc.notFound }}\n </p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{ getText(option) }}\n </ng-template>\n <ng-template #valueDefault let-value>\n @if (multiple) {\n <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n {{ loc.selected + ' ' + value?.length }}\n </div>\n }\n @if (!multiple) {\n <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n }\n </ng-template>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6652
6661
|
}
|
|
6653
6662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectComponent, decorators: [{
|
|
6654
6663
|
type: Component,
|
|
@@ -6673,7 +6682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
6673
6682
|
CdkVirtualForOf,
|
|
6674
6683
|
HighlightDirective,
|
|
6675
6684
|
AsyncPipe,
|
|
6676
|
-
], template: "@if (locale | async; as loc) {\n <teta-dropdown\n [align]=\"align\"\n [verticalAlign]=\"verticalAlign\"\n [autoClose]=\"autoClose\"\n [autoCloseIgnore]=\"autoCloseIgnore\"\n [(open)]=\"open\"\n [appendToBody]=\"appendToBody\"\n [disabled]=\"disabled\"\n [viewType]=\"viewType\"\n class=\"row row_auto\"\n >\n <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n <div class=\"row_auto flex align-center\">\n @if (icon) {\n <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n }\n @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n <span class=\"placeholder\">\n {{ placeholder || loc.notSelected }}\n </span>\n }\n <ng-container\n *ngTemplateOutlet=\"\n valueDirective ? valueDirective.template : valueDefault;\n context: { $implicit: value, value: value }\n \"\n ></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n @if (options?.length) {\n <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n @if (searchRef) {\n <div #searchInput class=\"select-search padding-h-2 padding-top-2\" (click)=\"$event.stopPropagation()\">\n <teta-text-field\n [ngModel]=\"searchText\"\n [class]=\"'select_' + viewType\"\n (ngModelChange)=\"search($event)\"\n [placeholder]=\"loc.search\"\n [leftIconName]=\"'search'\"\n ></teta-text-field>\n </div>\n }\n @if (visibleOptions?.length) {\n @if (!multiple && allowNull) {\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n {{ loc.notSelected }}\n </div>\n <div class=\"list-divider margin-bottom-0\"></div>\n }\n @if (virtual) {\n <div class=\"column column_auto padding-v-2\" style=\"height: 50vh\">\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n <cdk-virtual-scroll-viewport\n tetaScrollable\n [itemSize]=\"28\"\n minBufferPx=\"200\"\n maxBufferPx=\"600\"\n style=\"flex-grow: 1\"\n >\n <div\n [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n style=\"display: flex\"\n *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n [class.list-item_active]=\"itemSelected(option)\"\n [class.list-item_disabled]=\"option.disabled === true\"\n [tetaHighlight]=\"searchText\"\n [style.height.px]=\"28\"\n (click)=\"clickOption(option, $event)\"\n >\n <div [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"\n optionDirective ? optionDirective.template : optionDefault;\n context: { $implicit: option, option: option }\n \"\n >\n </ng-container>\n </div>\n @if (itemSelected(option)) {\n <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n </div>\n } @else {\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n <div class=\"list\">\n @for (option of visibleOptions; track option) {\n <div\n [class]=\"'list-item list-item_interactive justify-content-between select_' + viewType\"\n [class.list-item_active]=\"itemSelected(option)\"\n [class.list-item_disabled]=\"option.disabled === true\"\n (click)=\"clickOption(option, $event)\"\n >\n <span [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"\n optionDirective ? optionDirective.template : optionDefault;\n context: { $implicit: option, option: option }\n \"\n >\n </ng-container>\n </span>\n @if (itemSelected(option) && multiple) {\n <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n }\n </div>\n }\n </div>\n </teta-scrollable>\n }\n } @else {\n <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n {{ notFoundText || loc.notFound }}\n </p>\n }\n @if (multiple && value?.length) {\n <div class=\"row row_auto select-chip-field flex-wrap\">\n @for (item of value; track item) {\n <div class=\"tag\">\n <p>{{ getText(item) }}</p>\n <teta-icon\n class=\"cursor-pointer\"\n [palette]=\"'text'\"\n [name]=\"'closeCircle'\"\n (click)=\"removeItemClick(item, $event)\"\n ></teta-icon>\n </div>\n }\n </div>\n }\n </div>\n }\n </teta-dropdown>\n <ng-template #notFound>\n <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n {{ notFoundText || loc.notFound }}\n </p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{ getText(option) }}\n </ng-template>\n <ng-template #valueDefault let-value>\n @if (multiple) {\n <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n {{ loc.selected + ' ' + value?.length }}\n </div>\n }\n @if (!multiple) {\n <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n }\n </ng-template>\n}\n" }]
|
|
6685
|
+
], template: "@if (locale | async; as loc) {\n <teta-dropdown\n [align]=\"align\"\n [verticalAlign]=\"verticalAlign\"\n [autoClose]=\"autoClose\"\n [autoCloseIgnore]=\"autoCloseIgnore\"\n [(open)]=\"open\"\n [appendToBody]=\"appendToBody\"\n [disabled]=\"disabled\"\n [viewType]=\"viewType\"\n class=\"row row_auto\"\n >\n <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n <div class=\"row_auto flex align-center\">\n @if (icon) {\n <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n }\n @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n <span class=\"placeholder\">\n {{ placeholder || loc.notSelected }}\n </span>\n }\n <ng-container\n *ngTemplateOutlet=\"\n valueDirective ? valueDirective.template : valueDefault;\n context: { $implicit: value, value: value }\n \"\n ></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n @if (options?.length) {\n <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n @if (searchRef) {\n <div #searchInput class=\"select-search padding-h-2 padding-top-2\" (click)=\"$event.stopPropagation()\">\n <teta-text-field\n [ngModel]=\"searchText\"\n [class]=\"'select_' + viewType\"\n (ngModelChange)=\"search($event)\"\n [placeholder]=\"loc.search\"\n [leftIconName]=\"'search'\"\n ></teta-text-field>\n </div>\n }\n @if (visibleOptions?.length) {\n @if (!multiple && allowNull) {\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n {{ loc.notSelected }}\n </div>\n <div class=\"list-divider margin-bottom-0\"></div>\n }\n @if (virtual) {\n <div class=\"column column_auto padding-v-2\" style=\"height: 50vh\">\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n <cdk-virtual-scroll-viewport\n tetaScrollable\n [itemSize]=\"28\"\n minBufferPx=\"200\"\n maxBufferPx=\"600\"\n style=\"flex-grow: 1\"\n >\n <div\n [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n style=\"display: flex\"\n *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n [class.list-item_active]=\"itemSelected(option)\"\n [class.list-item_disabled]=\"option.disabled === true\"\n [tetaHighlight]=\"searchText\"\n [style.height.px]=\"28\"\n (click)=\"clickOption(option, $event)\"\n >\n <div [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"\n optionDirective ? optionDirective.template : optionDefault;\n context: { $implicit: option, option: option }\n \"\n >\n </ng-container>\n </div>\n @if (itemSelected(option)) {\n <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n </div>\n } @else {\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n <div class=\"list\">\n @for (option of visibleOptions; track trackOption(option, $index)) {\n <div\n [class]=\"'list-item list-item_interactive justify-content-between select_' + viewType\"\n [class.list-item_active]=\"itemSelected(option)\"\n [class.list-item_disabled]=\"option.disabled === true\"\n (click)=\"clickOption(option, $event)\"\n >\n <span [tetaHighlight]=\"searchText\">\n <ng-container\n *ngTemplateOutlet=\"\n optionDirective ? optionDirective.template : optionDefault;\n context: { $implicit: option, option: option }\n \"\n >\n </ng-container>\n </span>\n @if (itemSelected(option) && multiple) {\n <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n }\n </div>\n }\n </div>\n </teta-scrollable>\n }\n } @else {\n <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n {{ notFoundText || loc.notFound }}\n </p>\n }\n @if (multiple && value?.length) {\n <div class=\"row row_auto select-chip-field flex-wrap\">\n @for (item of value; track trackOption(item, $index)) {\n <div class=\"tag\">\n <p>{{ getText(item) }}</p>\n <teta-icon\n class=\"cursor-pointer\"\n [palette]=\"'text'\"\n [name]=\"'closeCircle'\"\n (click)=\"removeItemClick(item, $event)\"\n ></teta-icon>\n </div>\n }\n </div>\n }\n </div>\n }\n </teta-dropdown>\n <ng-template #notFound>\n <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n {{ notFoundText || loc.notFound }}\n </p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{ getText(option) }}\n </ng-template>\n <ng-template #valueDefault let-value>\n @if (multiple) {\n <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n {{ loc.selected + ' ' + value?.length }}\n </div>\n }\n @if (!multiple) {\n <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n }\n </ng-template>\n}\n" }]
|
|
6677
6686
|
}], ctorParameters: () => [], propDecorators: { multiple: [{
|
|
6678
6687
|
type: HostBinding,
|
|
6679
6688
|
args: ['class.select_multiple']
|