@tetacom/ng-components 1.0.31 → 1.0.33
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/component/table/head-cell-dropdown/head-cell-dropdown.component.d.ts +1 -0
- package/directive/loader/loader.directive.d.ts +3 -1
- package/esm2020/component/filter/string-filter/string-filter.component.mjs +5 -4
- package/esm2020/component/table/head-cell/head-cell.component.mjs +3 -3
- package/esm2020/component/table/head-cell-dropdown/head-cell-dropdown.component.mjs +12 -5
- package/esm2020/directive/loader/loader.directive.mjs +15 -2
- package/fesm2015/tetacom-ng-components.mjs +30 -9
- package/fesm2015/tetacom-ng-components.mjs.map +1 -1
- package/fesm2020/tetacom-ng-components.mjs +30 -9
- package/fesm2020/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/style/loader.scss +10 -0
|
@@ -3514,7 +3514,8 @@ class StringFilterComponent extends FilterComponentBase {
|
|
|
3514
3514
|
get state() {
|
|
3515
3515
|
return this.state$;
|
|
3516
3516
|
}
|
|
3517
|
-
ngOnInit() {
|
|
3517
|
+
ngOnInit() {
|
|
3518
|
+
}
|
|
3518
3519
|
setFilter() {
|
|
3519
3520
|
this.filterChanged.emit(this.filter);
|
|
3520
3521
|
}
|
|
@@ -3533,10 +3534,10 @@ class StringFilterComponent extends FilterComponentBase {
|
|
|
3533
3534
|
}
|
|
3534
3535
|
}
|
|
3535
3536
|
StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3536
|
-
StringFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: StringFilterComponent, selector: "teta-string-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-3\">\n <teta-input [label]=\"'\u041F\u043E\u0438\u0441\u043A'\">\n <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" />\n </teta-input>\n</div>\n\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3537
|
+
StringFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: StringFilterComponent, selector: "teta-string-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-3\">\n <teta-input [label]=\"'\u041F\u043E\u0438\u0441\u043A'\">\n <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" (keydown.enter)=\"setFilter()\" />\n </teta-input>\n</div>\n\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3537
3538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringFilterComponent, decorators: [{
|
|
3538
3539
|
type: Component,
|
|
3539
|
-
args: [{ selector: 'teta-string-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-3\">\n <teta-input [label]=\"'\u041F\u043E\u0438\u0441\u043A'\">\n <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" />\n </teta-input>\n</div>\n\n", styles: [""] }]
|
|
3540
|
+
args: [{ selector: 'teta-string-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-3\">\n <teta-input [label]=\"'\u041F\u043E\u0438\u0441\u043A'\">\n <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" (keydown.enter)=\"setFilter()\" />\n </teta-input>\n</div>\n\n", styles: [""] }]
|
|
3540
3541
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
|
|
3541
3542
|
type: Input
|
|
3542
3543
|
}], filterOptions: [{
|
|
@@ -8086,6 +8087,9 @@ class HeadCellDropdownComponent {
|
|
|
8086
8087
|
this.hiddenColumns = _;
|
|
8087
8088
|
});
|
|
8088
8089
|
}
|
|
8090
|
+
enter() {
|
|
8091
|
+
this.applyFilter();
|
|
8092
|
+
}
|
|
8089
8093
|
get sortParam() {
|
|
8090
8094
|
return StateUtil.getSortState(this.state, this.column);
|
|
8091
8095
|
}
|
|
@@ -8162,7 +8166,8 @@ class HeadCellDropdownComponent {
|
|
|
8162
8166
|
setColumnsVisibility() {
|
|
8163
8167
|
this._svc.setHiddenColumns(this.hiddenColumns);
|
|
8164
8168
|
}
|
|
8165
|
-
ngOnInit() {
|
|
8169
|
+
ngOnInit() {
|
|
8170
|
+
}
|
|
8166
8171
|
ngOnDestroy() {
|
|
8167
8172
|
this._alive = false;
|
|
8168
8173
|
}
|
|
@@ -8198,10 +8203,10 @@ class HeadCellDropdownComponent {
|
|
|
8198
8203
|
}
|
|
8199
8204
|
}
|
|
8200
8205
|
HeadCellDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellDropdownComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8201
|
-
HeadCellDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange", autosize: "autosize", autosizeAll: "autosizeAll" }, host: { properties: { "class.shadow-2": "this.shadow", "class.bg-background-50": "this.bg" } }, ngImport: i0, template: "<teta-tabs class=\"column_auto\">\n <teta-tab *ngIf=\"column.filterable\">\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'filter'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <teta-filter-host [column]=\"column\"
|
|
8206
|
+
HeadCellDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange", autosize: "autosize", autosizeAll: "autosizeAll" }, host: { listeners: { "keydown.enter": "enter()" }, properties: { "class.shadow-2": "this.shadow", "class.bg-background-50": "this.bg" } }, ngImport: i0, template: "<teta-tabs class=\"column_auto\">\n <teta-tab *ngIf=\"column.filterable\">\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'filter'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <teta-filter-host [column]=\"column\"\n [state]=\"state\"\n *ngIf=\"dict | async as d\"\n [filterOptions]=\"d[column.name]\"></teta-filter-host>\n <teta-toolbar class=\"justify-content-between\">\n <button teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\n </button>\n <button teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n <teta-icon [name]=\"'tick'\"></teta-icon>\n \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n </button>\n </teta-toolbar>\n </ng-template>\n </teta-tab>\n <teta-tab *ngIf=\"column.headDropdownTemplate\">\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'measurement'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <ng-container\n *ngTemplateOutlet=\"column.headDropdownTemplate; context: {$implicit: column, column: column}\"></ng-container>\n </ng-template>\n </teta-tab>\n <teta-tab>\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'menu'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <div class=\"list column_auto\">\n <div class=\"list-item list-item_interactive\" (click)=\"pinColumn()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"column.locked ? 'unpin' : 'pin'\"\n class=\"margin-right-2\"></teta-icon>\n {{column.locked ? '\u041E\u0442\u043A\u0440\u0435\u043F\u0438\u0442\u044C' : '\u0417\u0430\u043A\u0440\u0435\u043F\u0438\u0442\u044C'}}\n </div>\n <div class=\"list-divider\"></div>\n <ng-container *ngIf=\"hasSortedColumns()\">\n <div class=\"list-item list-item_interactive\"\n *ngIf=\"sortParam\"\n (click)=\"clearSort()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'pin'\" class=\"margin-right-2\"></teta-icon>\n \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0443\n </div>\n <div class=\"list-item list-item_interactive\"\n (click)=\"clearAllSort()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'pin'\"\n class=\"margin-right-2\"></teta-icon>\n \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0438\n </div>\n <div class=\"list-divider\"></div>\n </ng-container>\n <ng-container *ngIf=\"hasFilteredColumns()\">\n <div class=\"list-item list-item_interactive\"\n *ngIf=\"filtered\"\n (click)=\"clearFilter()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'pin'\"\n class=\"margin-right-2\"></teta-icon>\n \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\n </div>\n <div class=\"list-item list-item_interactive\"\n (click)=\"clearAllFilters()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'pin'\"\n class=\"margin-right-2\"></teta-icon>\n \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n </div>\n <div class=\"list-divider\"></div>\n </ng-container>\n <div class=\"list-item list-item_interactive\" (click)=\"autosize.emit()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'autoSize'\"\n class=\"margin-right-2\"></teta-icon>\n \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u043A\u043E\u043B\u043E\u043D\u043A\u0438\n </div>\n <div class=\"list-item list-item_interactive\" (click)=\"autosizeAll.emit()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'autoSizeAll'\"\n class=\"margin-right-2\"></teta-icon>\n \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u0432\u0441\u0435\u0445 \u043A\u043E\u043B\u043E\u043D\u043E\u043A\n </div>\n <div class=\"list-divider\"></div>\n <div class=\"list-item list-item_interactive\" (click)=\"restoreDefaultColumns()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'undo'\"\n class=\"margin-right-2\"></teta-icon>\n \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0432\u0441\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F\n </div>\n </div>\n </ng-template>\n </teta-tab>\n <teta-tab>\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'eye'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n <teta-checkbox [binary]=\"true\"\n [allowNull]=\"true\"\n [ngModel]=\"allColumnsVisible()\"\n (ngModelChange)=\"setAllColumns($event)\">\n \u0412\u0441\u0435\n </teta-checkbox>\n </div>\n <div class=\"list-divider\"></div>\n <div class=\"padding-v-2 column column_auto scrollable\">\n <teta-tree [data]=\"columns\"\n [openItems]=\"openItems\"\n (openItemsChange)=\"openItems = $event\"\n [childNodeName]=\"'columns'\"\n [compareItems]=\"compareItems\">\n <ng-template tetaTemplate let-item>\n <div class=\"tree__item\">\n <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n <teta-checkbox\n [ngModel]=\"!columnIsHidden(item)\"\n (ngModelChange)=\"setColumnVisibility(item, $event)\"\n (click)=\"$event.stopPropagation()\"\n [binary]=\"true\"\n >\n {{item.caption}}\n </teta-checkbox>\n </div>\n </ng-template>\n </teta-tree>\n </div>\n <teta-toolbar class=\"justify-content-end\">\n <button teta-button\n [disabled]=\"allColumnsVisible() === false\"\n [palette]=\"'primary'\"\n (click)=\"setColumnsVisibility()\">\n \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n </button>\n </teta-toolbar>\n </ng-template>\n </teta-tab>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;width:250px}\n"], components: [{ type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "destroyOnHide"], outputs: ["tabChange"] }, { type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: FilterHostComponent, selector: "teta-filter-host", inputs: ["column", "state", "filterOptions"], outputs: ["filterChanged"] }, { type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }, { type: TreeComponent, selector: "teta-tree", inputs: ["data", "class", "padding", "childNodeName", "openItems", "compareItems"], outputs: ["service", "openItemsChange"] }, { type: TreeItemToggleComponent, selector: "teta-tree-item-toggle", inputs: ["item"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TabTitleDirective, selector: "[tetaTabTitle]" }, { type: TabContentDirective, selector: "[tetaTabContent]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TetaTemplateDirective, selector: "[tetaTemplate]", inputs: ["tetaTemplate"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8202
8207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellDropdownComponent, decorators: [{
|
|
8203
8208
|
type: Component,
|
|
8204
|
-
args: [{ selector: 'teta-head-cell-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-tabs class=\"column_auto\">\n <teta-tab *ngIf=\"column.filterable\">\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'filter'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <teta-filter-host [column]=\"column\"
|
|
8209
|
+
args: [{ selector: 'teta-head-cell-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-tabs class=\"column_auto\">\n <teta-tab *ngIf=\"column.filterable\">\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'filter'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <teta-filter-host [column]=\"column\"\n [state]=\"state\"\n *ngIf=\"dict | async as d\"\n [filterOptions]=\"d[column.name]\"></teta-filter-host>\n <teta-toolbar class=\"justify-content-between\">\n <button teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\n </button>\n <button teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n <teta-icon [name]=\"'tick'\"></teta-icon>\n \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n </button>\n </teta-toolbar>\n </ng-template>\n </teta-tab>\n <teta-tab *ngIf=\"column.headDropdownTemplate\">\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'measurement'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <ng-container\n *ngTemplateOutlet=\"column.headDropdownTemplate; context: {$implicit: column, column: column}\"></ng-container>\n </ng-template>\n </teta-tab>\n <teta-tab>\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'menu'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <div class=\"list column_auto\">\n <div class=\"list-item list-item_interactive\" (click)=\"pinColumn()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"column.locked ? 'unpin' : 'pin'\"\n class=\"margin-right-2\"></teta-icon>\n {{column.locked ? '\u041E\u0442\u043A\u0440\u0435\u043F\u0438\u0442\u044C' : '\u0417\u0430\u043A\u0440\u0435\u043F\u0438\u0442\u044C'}}\n </div>\n <div class=\"list-divider\"></div>\n <ng-container *ngIf=\"hasSortedColumns()\">\n <div class=\"list-item list-item_interactive\"\n *ngIf=\"sortParam\"\n (click)=\"clearSort()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'pin'\" class=\"margin-right-2\"></teta-icon>\n \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0443\n </div>\n <div class=\"list-item list-item_interactive\"\n (click)=\"clearAllSort()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'pin'\"\n class=\"margin-right-2\"></teta-icon>\n \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0438\n </div>\n <div class=\"list-divider\"></div>\n </ng-container>\n <ng-container *ngIf=\"hasFilteredColumns()\">\n <div class=\"list-item list-item_interactive\"\n *ngIf=\"filtered\"\n (click)=\"clearFilter()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'pin'\"\n class=\"margin-right-2\"></teta-icon>\n \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\n </div>\n <div class=\"list-item list-item_interactive\"\n (click)=\"clearAllFilters()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'pin'\"\n class=\"margin-right-2\"></teta-icon>\n \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n </div>\n <div class=\"list-divider\"></div>\n </ng-container>\n <div class=\"list-item list-item_interactive\" (click)=\"autosize.emit()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'autoSize'\"\n class=\"margin-right-2\"></teta-icon>\n \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u043A\u043E\u043B\u043E\u043D\u043A\u0438\n </div>\n <div class=\"list-item list-item_interactive\" (click)=\"autosizeAll.emit()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'autoSizeAll'\"\n class=\"margin-right-2\"></teta-icon>\n \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u0432\u0441\u0435\u0445 \u043A\u043E\u043B\u043E\u043D\u043E\u043A\n </div>\n <div class=\"list-divider\"></div>\n <div class=\"list-item list-item_interactive\" (click)=\"restoreDefaultColumns()\">\n <teta-icon [palette]=\"'text'\"\n [name]=\"'undo'\"\n class=\"margin-right-2\"></teta-icon>\n \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0432\u0441\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F\n </div>\n </div>\n </ng-template>\n </teta-tab>\n <teta-tab>\n <ng-template tetaTabTitle>\n <teta-icon [name]=\"'eye'\"></teta-icon>\n </ng-template>\n <ng-template tetaTabContent>\n <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n <teta-checkbox [binary]=\"true\"\n [allowNull]=\"true\"\n [ngModel]=\"allColumnsVisible()\"\n (ngModelChange)=\"setAllColumns($event)\">\n \u0412\u0441\u0435\n </teta-checkbox>\n </div>\n <div class=\"list-divider\"></div>\n <div class=\"padding-v-2 column column_auto scrollable\">\n <teta-tree [data]=\"columns\"\n [openItems]=\"openItems\"\n (openItemsChange)=\"openItems = $event\"\n [childNodeName]=\"'columns'\"\n [compareItems]=\"compareItems\">\n <ng-template tetaTemplate let-item>\n <div class=\"tree__item\">\n <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n <teta-checkbox\n [ngModel]=\"!columnIsHidden(item)\"\n (ngModelChange)=\"setColumnVisibility(item, $event)\"\n (click)=\"$event.stopPropagation()\"\n [binary]=\"true\"\n >\n {{item.caption}}\n </teta-checkbox>\n </div>\n </ng-template>\n </teta-tree>\n </div>\n <teta-toolbar class=\"justify-content-end\">\n <button teta-button\n [disabled]=\"allColumnsVisible() === false\"\n [palette]=\"'primary'\"\n (click)=\"setColumnsVisibility()\">\n \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n </button>\n </teta-toolbar>\n </ng-template>\n </teta-tab>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;width:250px}\n"] }]
|
|
8205
8210
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
|
|
8206
8211
|
type: Input
|
|
8207
8212
|
}], column: [{
|
|
@@ -8222,6 +8227,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
8222
8227
|
}], bg: [{
|
|
8223
8228
|
type: HostBinding,
|
|
8224
8229
|
args: ['class.bg-background-50']
|
|
8230
|
+
}], enter: [{
|
|
8231
|
+
type: HostListener,
|
|
8232
|
+
args: ['keydown.enter']
|
|
8225
8233
|
}] } });
|
|
8226
8234
|
|
|
8227
8235
|
class ResizeDragDirective {
|
|
@@ -8381,10 +8389,10 @@ class HeadCellComponent {
|
|
|
8381
8389
|
}
|
|
8382
8390
|
}
|
|
8383
8391
|
HeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellComponent, deps: [{ token: TableService }, { token: i0.ApplicationRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8384
|
-
HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu" }, host: { listeners: { "dragstart": "dragstart($event)", "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" } }, ngImport: i0, template: "<div draggable=\"true\" class=\"row row_auto\">\n <div class=\"table-head__cell__wrapper\"\n [ngClass]=\"column.headCellClass\"\n (click)=\"sortColumn(column, $event)\">\n <teta-icon *ngIf=\"iconName | async as icon\"\n [palette]=\"'text'\"\n [name]=\"icon\"></teta-icon>\n <teta-head-cell-host [column]=\"column\"></teta-head-cell-host>\n <teta-dropdown *ngIf=\"showHeadCellMenu\"\n [verticalAlign]=\"verticalAlign.bottom\"\n [appendToBody]=\"true\"\n [(open)]=\"dropDownOpen\"\n [align]=\"align.right\"\n (click)=\"$event.preventDefault()\"\n [class.table-head__cell__menu_open]=\"dropDownOpen\"\n class=\"table-head__cell__menu\">\n <button tetaDropdownHead teta-button\n [square]=\"true\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [palette]=\"'text'\" [name]=\"'menu'\"></teta-icon>\n </button>\n <teta-head-cell-dropdown tetaDropdownContent\n (autosize)=\"autosizeColumn()\"\n (autosizeAll)=\"autosizeAllColumns()\"\n [column]=\"column\"\n [columns]=\"columns | async\"\n [state]=\"state | async\"\n [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n </teta-dropdown>\n </div>\n <div class=\"drop-area\"\n draggable=\"false\"\n [class.drop-area_left]=\"showDrag === 'left'\"\n [class.drop-area_right]=\"showDrag === 'right'\"\n *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n draggable=\"false\"\n (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n [tetaResizeDrag]=\"'vertical'\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column"] }, { type: DropdownComponent, selector: "teta-dropdown" }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "dropDownOpen"], outputs: ["dropDownOpenChange", "autosize", "autosizeAll"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8392
|
+
HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu" }, host: { listeners: { "dragstart": "dragstart($event)", "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" } }, ngImport: i0, template: "<div draggable=\"true\" class=\"row row_auto\">\n <div class=\"table-head__cell__wrapper\"\n [ngClass]=\"column.headCellClass\"\n (click)=\"sortColumn(column, $event)\">\n <teta-icon *ngIf=\"iconName | async as icon\"\n [palette]=\"'text'\"\n [name]=\"icon\"></teta-icon>\n <teta-head-cell-host [column]=\"column\"></teta-head-cell-host>\n <teta-dropdown *ngIf=\"showHeadCellMenu\"\n [autoCloseIgnore]=\"['enter']\"\n [verticalAlign]=\"verticalAlign.bottom\"\n [appendToBody]=\"true\"\n [(open)]=\"dropDownOpen\"\n [align]=\"align.right\"\n (click)=\"$event.preventDefault()\"\n [class.table-head__cell__menu_open]=\"dropDownOpen\"\n class=\"table-head__cell__menu\">\n <button tetaDropdownHead teta-button\n [square]=\"true\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [palette]=\"'text'\" [name]=\"'menu'\"></teta-icon>\n </button>\n <teta-head-cell-dropdown tetaDropdownContent\n (autosize)=\"autosizeColumn()\"\n (autosizeAll)=\"autosizeAllColumns()\"\n [column]=\"column\"\n [columns]=\"columns | async\"\n [state]=\"state | async\"\n [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n </teta-dropdown>\n </div>\n <div class=\"drop-area\"\n draggable=\"false\"\n [class.drop-area_left]=\"showDrag === 'left'\"\n [class.drop-area_right]=\"showDrag === 'right'\"\n *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n draggable=\"false\"\n (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n [tetaResizeDrag]=\"'vertical'\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column"] }, { type: DropdownComponent, selector: "teta-dropdown" }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "dropDownOpen"], outputs: ["dropDownOpenChange", "autosize", "autosizeAll"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8385
8393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellComponent, decorators: [{
|
|
8386
8394
|
type: Component,
|
|
8387
|
-
args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div draggable=\"true\" class=\"row row_auto\">\n <div class=\"table-head__cell__wrapper\"\n [ngClass]=\"column.headCellClass\"\n (click)=\"sortColumn(column, $event)\">\n <teta-icon *ngIf=\"iconName | async as icon\"\n [palette]=\"'text'\"\n [name]=\"icon\"></teta-icon>\n <teta-head-cell-host [column]=\"column\"></teta-head-cell-host>\n <teta-dropdown *ngIf=\"showHeadCellMenu\"\n [verticalAlign]=\"verticalAlign.bottom\"\n [appendToBody]=\"true\"\n [(open)]=\"dropDownOpen\"\n [align]=\"align.right\"\n (click)=\"$event.preventDefault()\"\n [class.table-head__cell__menu_open]=\"dropDownOpen\"\n class=\"table-head__cell__menu\">\n <button tetaDropdownHead teta-button\n [square]=\"true\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [palette]=\"'text'\" [name]=\"'menu'\"></teta-icon>\n </button>\n <teta-head-cell-dropdown tetaDropdownContent\n (autosize)=\"autosizeColumn()\"\n (autosizeAll)=\"autosizeAllColumns()\"\n [column]=\"column\"\n [columns]=\"columns | async\"\n [state]=\"state | async\"\n [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n </teta-dropdown>\n </div>\n <div class=\"drop-area\"\n draggable=\"false\"\n [class.drop-area_left]=\"showDrag === 'left'\"\n [class.drop-area_right]=\"showDrag === 'right'\"\n *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n draggable=\"false\"\n (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n [tetaResizeDrag]=\"'vertical'\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
|
|
8395
|
+
args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div draggable=\"true\" class=\"row row_auto\">\n <div class=\"table-head__cell__wrapper\"\n [ngClass]=\"column.headCellClass\"\n (click)=\"sortColumn(column, $event)\">\n <teta-icon *ngIf=\"iconName | async as icon\"\n [palette]=\"'text'\"\n [name]=\"icon\"></teta-icon>\n <teta-head-cell-host [column]=\"column\"></teta-head-cell-host>\n <teta-dropdown *ngIf=\"showHeadCellMenu\"\n [autoCloseIgnore]=\"['enter']\"\n [verticalAlign]=\"verticalAlign.bottom\"\n [appendToBody]=\"true\"\n [(open)]=\"dropDownOpen\"\n [align]=\"align.right\"\n (click)=\"$event.preventDefault()\"\n [class.table-head__cell__menu_open]=\"dropDownOpen\"\n class=\"table-head__cell__menu\">\n <button tetaDropdownHead teta-button\n [square]=\"true\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [palette]=\"'text'\" [name]=\"'menu'\"></teta-icon>\n </button>\n <teta-head-cell-dropdown tetaDropdownContent\n (autosize)=\"autosizeColumn()\"\n (autosizeAll)=\"autosizeAllColumns()\"\n [column]=\"column\"\n [columns]=\"columns | async\"\n [state]=\"state | async\"\n [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n </teta-dropdown>\n </div>\n <div class=\"drop-area\"\n draggable=\"false\"\n [class.drop-area_left]=\"showDrag === 'left'\"\n [class.drop-area_right]=\"showDrag === 'right'\"\n *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n draggable=\"false\"\n (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n [tetaResizeDrag]=\"'vertical'\"\n (resizeStart)=\"resizeStart($event)\"\n (resizeProcess)=\"resizeProcess($event)\"\n (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
|
|
8388
8396
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }]; }, propDecorators: { column: [{
|
|
8389
8397
|
type: Input
|
|
8390
8398
|
}], showHeadCellMenu: [{
|
|
@@ -10544,6 +10552,7 @@ class LoaderDirective {
|
|
|
10544
10552
|
this._renderer = _renderer;
|
|
10545
10553
|
this._document = _document;
|
|
10546
10554
|
this.appendToBody = false;
|
|
10555
|
+
this.mask = false;
|
|
10547
10556
|
this._alive = true;
|
|
10548
10557
|
this._element = this._elementRef.nativeElement;
|
|
10549
10558
|
}
|
|
@@ -10568,6 +10577,13 @@ class LoaderDirective {
|
|
|
10568
10577
|
this._loader = this._renderer.createElement('div');
|
|
10569
10578
|
this._loader.setAttribute('class', 'loader');
|
|
10570
10579
|
}
|
|
10580
|
+
if ((this._mask === null || this._mask === undefined) && this.mask) {
|
|
10581
|
+
this._mask = this._renderer.createElement('div');
|
|
10582
|
+
this._mask.setAttribute('class', 'loader-mask');
|
|
10583
|
+
}
|
|
10584
|
+
if (this.mask) {
|
|
10585
|
+
this._renderer.appendChild(this.appendToBody ? this._document.body : this._element, this._mask);
|
|
10586
|
+
}
|
|
10571
10587
|
this._renderer.appendChild(this.appendToBody ? this._document.body : this._element, this._loader);
|
|
10572
10588
|
this.setPosition();
|
|
10573
10589
|
}
|
|
@@ -10575,6 +10591,9 @@ class LoaderDirective {
|
|
|
10575
10591
|
if (this._loader && this._loader.parentElement) {
|
|
10576
10592
|
this._renderer.removeChild(this._loader.parentElement, this._loader);
|
|
10577
10593
|
}
|
|
10594
|
+
if (this._mask && this._mask.parentElement) {
|
|
10595
|
+
this._renderer.removeChild(this._loader.parentElement, this._mask);
|
|
10596
|
+
}
|
|
10578
10597
|
}
|
|
10579
10598
|
setPosition() {
|
|
10580
10599
|
const position = this._element.getBoundingClientRect();
|
|
@@ -10583,7 +10602,7 @@ class LoaderDirective {
|
|
|
10583
10602
|
}
|
|
10584
10603
|
}
|
|
10585
10604
|
LoaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LoaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
|
|
10586
|
-
LoaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: LoaderDirective, selector: "[tetaLoader]", inputs: { appendToBody: "appendToBody", tetaLoader: "tetaLoader" }, ngImport: i0 });
|
|
10605
|
+
LoaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: LoaderDirective, selector: "[tetaLoader]", inputs: { appendToBody: "appendToBody", mask: "mask", tetaLoader: "tetaLoader" }, ngImport: i0 });
|
|
10587
10606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LoaderDirective, decorators: [{
|
|
10588
10607
|
type: Directive,
|
|
10589
10608
|
args: [{
|
|
@@ -10594,6 +10613,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
10594
10613
|
args: [DOCUMENT]
|
|
10595
10614
|
}] }]; }, propDecorators: { appendToBody: [{
|
|
10596
10615
|
type: Input
|
|
10616
|
+
}], mask: [{
|
|
10617
|
+
type: Input
|
|
10597
10618
|
}], tetaLoader: [{
|
|
10598
10619
|
type: Input
|
|
10599
10620
|
}] } });
|