@tetacom/ng-components 1.6.10 → 1.6.12
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.
|
@@ -36,7 +36,9 @@ export declare class SelectComponent implements ControlValueAccessor {
|
|
|
36
36
|
searchRef: string | ((item: any) => string);
|
|
37
37
|
optionDirective: SelectOptionDirective;
|
|
38
38
|
valueDirective: SelectValueDirective;
|
|
39
|
-
|
|
39
|
+
searchInput: ElementRef;
|
|
40
|
+
set open(value: boolean);
|
|
41
|
+
get open(): boolean;
|
|
40
42
|
private readonly selectClass;
|
|
41
43
|
private get tabindex();
|
|
42
44
|
get isDisabled(): boolean;
|
|
@@ -46,6 +48,7 @@ export declare class SelectComponent implements ControlValueAccessor {
|
|
|
46
48
|
get visibleOptions(): any[];
|
|
47
49
|
private _options;
|
|
48
50
|
private _internalValue;
|
|
51
|
+
private _open;
|
|
49
52
|
constructor(_cdr: ChangeDetectorRef, _elementRef: ElementRef, _config: TetaConfigService);
|
|
50
53
|
clear(): void;
|
|
51
54
|
clickOption(option: any, event: MouseEvent): void;
|
|
@@ -44,6 +44,7 @@ export interface ITableColumnOptions extends IFilterItemOptions {
|
|
|
44
44
|
minValue?: number;
|
|
45
45
|
maxLength?: number;
|
|
46
46
|
required?: boolean;
|
|
47
|
+
decimalLength?: number;
|
|
47
48
|
validators?: ValidatorFn[];
|
|
48
49
|
}
|
|
49
50
|
export declare class TableColumn extends FilterItem {
|
|
@@ -125,6 +126,10 @@ export declare class TableColumn extends FilterItem {
|
|
|
125
126
|
* Поле обязательно для заполнения
|
|
126
127
|
*/
|
|
127
128
|
required: boolean;
|
|
129
|
+
/**
|
|
130
|
+
* Размер дробной части для числовых полей
|
|
131
|
+
*/
|
|
132
|
+
decimalLength?: number;
|
|
128
133
|
/**
|
|
129
134
|
* Функции валидации
|
|
130
135
|
*/
|
|
@@ -5886,6 +5886,17 @@ class SelectComponent {
|
|
|
5886
5886
|
get options() {
|
|
5887
5887
|
return this._options;
|
|
5888
5888
|
}
|
|
5889
|
+
set open(value) {
|
|
5890
|
+
this._open = value;
|
|
5891
|
+
if (value && this.searchInput) {
|
|
5892
|
+
setTimeout(() => {
|
|
5893
|
+
this.searchInput?.nativeElement.querySelector('input')?.focus();
|
|
5894
|
+
}, 0);
|
|
5895
|
+
}
|
|
5896
|
+
}
|
|
5897
|
+
get open() {
|
|
5898
|
+
return this._open;
|
|
5899
|
+
}
|
|
5889
5900
|
get tabindex() {
|
|
5890
5901
|
return this.disabled ? null : 0;
|
|
5891
5902
|
}
|
|
@@ -5909,9 +5920,11 @@ class SelectComponent {
|
|
|
5909
5920
|
this.itemSize = 32;
|
|
5910
5921
|
this.allowNull = true;
|
|
5911
5922
|
this.viewType = 'rounded';
|
|
5912
|
-
this.open = false;
|
|
5913
5923
|
this.selectClass = true;
|
|
5924
|
+
this._open = false;
|
|
5925
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5914
5926
|
this.onChange = () => { };
|
|
5927
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5915
5928
|
this.onTouched = () => { };
|
|
5916
5929
|
this.locale = this._config.locale;
|
|
5917
5930
|
}
|
|
@@ -6042,7 +6055,7 @@ class SelectComponent {
|
|
|
6042
6055
|
useExisting: forwardRef(() => SelectComponent),
|
|
6043
6056
|
multi: true,
|
|
6044
6057
|
},
|
|
6045
|
-
], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: 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 class=\"select-search padding-h-2 padding-top-2\">\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 }); }
|
|
6058
|
+
], 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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 }); }
|
|
6046
6059
|
}
|
|
6047
6060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
6048
6061
|
type: Component,
|
|
@@ -6053,7 +6066,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
6053
6066
|
multi: true,
|
|
6054
6067
|
},
|
|
6055
6068
|
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6056
|
-
LetDirective,
|
|
6057
6069
|
DropdownComponent,
|
|
6058
6070
|
DropdownHeadDirective,
|
|
6059
6071
|
IconComponent,
|
|
@@ -6068,7 +6080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
6068
6080
|
CdkVirtualForOf,
|
|
6069
6081
|
HighlightDirective,
|
|
6070
6082
|
AsyncPipe,
|
|
6071
|
-
], 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 class=\"select-search padding-h-2 padding-top-2\">\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" }]
|
|
6083
|
+
], 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" }]
|
|
6072
6084
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TetaConfigService }], propDecorators: { multiple: [{
|
|
6073
6085
|
type: HostBinding,
|
|
6074
6086
|
args: ['class.select_multiple']
|
|
@@ -6116,6 +6128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
6116
6128
|
}], valueDirective: [{
|
|
6117
6129
|
type: ContentChild,
|
|
6118
6130
|
args: [SelectValueDirective, { static: true }]
|
|
6131
|
+
}], searchInput: [{
|
|
6132
|
+
type: ViewChild,
|
|
6133
|
+
args: ['searchInput']
|
|
6119
6134
|
}], open: [{
|
|
6120
6135
|
type: HostBinding,
|
|
6121
6136
|
args: ['class.select_open']
|
|
@@ -6853,6 +6868,7 @@ class TableColumn extends FilterItem {
|
|
|
6853
6868
|
this.minValue = options?.minValue;
|
|
6854
6869
|
this.maxLength = options?.maxLength;
|
|
6855
6870
|
this.required = options?.required;
|
|
6871
|
+
this.decimalLength = options?.decimalLength;
|
|
6856
6872
|
this.columns = options?.columns?.map((x) => new TableColumn(x)) ?? [];
|
|
6857
6873
|
this.validators = options?.validators;
|
|
6858
6874
|
}
|
|
@@ -7832,11 +7848,11 @@ class NumericCellComponent extends CellComponentBase {
|
|
|
7832
7848
|
this.cdr.markForCheck();
|
|
7833
7849
|
}
|
|
7834
7850
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumericCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7835
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NumericCellComponent, isStandalone: true, selector: "teta-numeric-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n {{ control?.value | tetaNumber: 2 }}\n</span>\n@if (edit) {\n <input\n #input\n [tetaOnlyNumber]=\"true\"\n type=\"text\"\n class=\"input row_auto border-radius-0\"\n (keydown.enter)=\"input.blur()\"\n [formControl]=\"control\"\n />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator", "onlyPositive"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NumericCellComponent, isStandalone: true, selector: "teta-numeric-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n {{ control?.value | tetaNumber: column.decimalLength ?? 2 }}\n</span>\n@if (edit) {\n <input\n #input\n [tetaOnlyNumber]=\"true\"\n type=\"text\"\n class=\"input row_auto border-radius-0\"\n (keydown.enter)=\"input.blur()\"\n [formControl]=\"control\"\n />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator", "onlyPositive"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7836
7852
|
}
|
|
7837
7853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NumericCellComponent, decorators: [{
|
|
7838
7854
|
type: Component,
|
|
7839
|
-
args: [{ selector: 'teta-numeric-cell', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [FormsUtil.formProvider], imports: [FormsModule, OnlyNumberDirective, ReactiveFormsModule, NumberPipe], template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n {{ control?.value | tetaNumber: 2 }}\n</span>\n@if (edit) {\n <input\n #input\n [tetaOnlyNumber]=\"true\"\n type=\"text\"\n class=\"input row_auto border-radius-0\"\n (keydown.enter)=\"input.blur()\"\n [formControl]=\"control\"\n />\n}\n" }]
|
|
7855
|
+
args: [{ selector: 'teta-numeric-cell', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [FormsUtil.formProvider], imports: [FormsModule, OnlyNumberDirective, ReactiveFormsModule, NumberPipe], template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n {{ control?.value | tetaNumber: column.decimalLength ?? 2 }}\n</span>\n@if (edit) {\n <input\n #input\n [tetaOnlyNumber]=\"true\"\n type=\"text\"\n class=\"input row_auto border-radius-0\"\n (keydown.enter)=\"input.blur()\"\n [formControl]=\"control\"\n />\n}\n" }]
|
|
7840
7856
|
}], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
|
|
7841
7857
|
type: ViewChild,
|
|
7842
7858
|
args: ['input', { static: false }]
|