@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
|
@@ -3538,7 +3538,8 @@ class StringFilterComponent extends FilterComponentBase {
|
|
|
3538
3538
|
get state() {
|
|
3539
3539
|
return this.state$;
|
|
3540
3540
|
}
|
|
3541
|
-
ngOnInit() {
|
|
3541
|
+
ngOnInit() {
|
|
3542
|
+
}
|
|
3542
3543
|
setFilter() {
|
|
3543
3544
|
this.filterChanged.emit(this.filter);
|
|
3544
3545
|
}
|
|
@@ -3557,10 +3558,10 @@ class StringFilterComponent extends FilterComponentBase {
|
|
|
3557
3558
|
}
|
|
3558
3559
|
}
|
|
3559
3560
|
StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3560
|
-
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 });
|
|
3561
|
+
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 });
|
|
3561
3562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringFilterComponent, decorators: [{
|
|
3562
3563
|
type: Component,
|
|
3563
|
-
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: [""] }]
|
|
3564
|
+
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: [""] }]
|
|
3564
3565
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
|
|
3565
3566
|
type: Input
|
|
3566
3567
|
}], filterOptions: [{
|
|
@@ -8144,6 +8145,9 @@ class HeadCellDropdownComponent {
|
|
|
8144
8145
|
this.hiddenColumns = _;
|
|
8145
8146
|
});
|
|
8146
8147
|
}
|
|
8148
|
+
enter() {
|
|
8149
|
+
this.applyFilter();
|
|
8150
|
+
}
|
|
8147
8151
|
get sortParam() {
|
|
8148
8152
|
return StateUtil.getSortState(this.state, this.column);
|
|
8149
8153
|
}
|
|
@@ -8221,7 +8225,8 @@ class HeadCellDropdownComponent {
|
|
|
8221
8225
|
setColumnsVisibility() {
|
|
8222
8226
|
this._svc.setHiddenColumns(this.hiddenColumns);
|
|
8223
8227
|
}
|
|
8224
|
-
ngOnInit() {
|
|
8228
|
+
ngOnInit() {
|
|
8229
|
+
}
|
|
8225
8230
|
ngOnDestroy() {
|
|
8226
8231
|
this._alive = false;
|
|
8227
8232
|
}
|
|
@@ -8257,10 +8262,10 @@ class HeadCellDropdownComponent {
|
|
|
8257
8262
|
}
|
|
8258
8263
|
}
|
|
8259
8264
|
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 });
|
|
8260
|
-
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\"
|
|
8265
|
+
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 });
|
|
8261
8266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellDropdownComponent, decorators: [{
|
|
8262
8267
|
type: Component,
|
|
8263
|
-
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\"
|
|
8268
|
+
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"] }]
|
|
8264
8269
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
|
|
8265
8270
|
type: Input
|
|
8266
8271
|
}], column: [{
|
|
@@ -8281,6 +8286,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
8281
8286
|
}], bg: [{
|
|
8282
8287
|
type: HostBinding,
|
|
8283
8288
|
args: ['class.bg-background-50']
|
|
8289
|
+
}], enter: [{
|
|
8290
|
+
type: HostListener,
|
|
8291
|
+
args: ['keydown.enter']
|
|
8284
8292
|
}] } });
|
|
8285
8293
|
|
|
8286
8294
|
class ResizeDragDirective {
|
|
@@ -8442,10 +8450,10 @@ class HeadCellComponent {
|
|
|
8442
8450
|
}
|
|
8443
8451
|
}
|
|
8444
8452
|
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 });
|
|
8445
|
-
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 });
|
|
8453
|
+
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 });
|
|
8446
8454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellComponent, decorators: [{
|
|
8447
8455
|
type: Component,
|
|
8448
|
-
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"] }]
|
|
8456
|
+
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"] }]
|
|
8449
8457
|
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }]; }, propDecorators: { column: [{
|
|
8450
8458
|
type: Input
|
|
8451
8459
|
}], showHeadCellMenu: [{
|
|
@@ -10635,6 +10643,7 @@ class LoaderDirective {
|
|
|
10635
10643
|
this._renderer = _renderer;
|
|
10636
10644
|
this._document = _document;
|
|
10637
10645
|
this.appendToBody = false;
|
|
10646
|
+
this.mask = false;
|
|
10638
10647
|
this._alive = true;
|
|
10639
10648
|
this._element = this._elementRef.nativeElement;
|
|
10640
10649
|
}
|
|
@@ -10659,6 +10668,13 @@ class LoaderDirective {
|
|
|
10659
10668
|
this._loader = this._renderer.createElement('div');
|
|
10660
10669
|
this._loader.setAttribute('class', 'loader');
|
|
10661
10670
|
}
|
|
10671
|
+
if ((this._mask === null || this._mask === undefined) && this.mask) {
|
|
10672
|
+
this._mask = this._renderer.createElement('div');
|
|
10673
|
+
this._mask.setAttribute('class', 'loader-mask');
|
|
10674
|
+
}
|
|
10675
|
+
if (this.mask) {
|
|
10676
|
+
this._renderer.appendChild(this.appendToBody ? this._document.body : this._element, this._mask);
|
|
10677
|
+
}
|
|
10662
10678
|
this._renderer.appendChild(this.appendToBody ? this._document.body : this._element, this._loader);
|
|
10663
10679
|
this.setPosition();
|
|
10664
10680
|
}
|
|
@@ -10666,6 +10682,9 @@ class LoaderDirective {
|
|
|
10666
10682
|
if (this._loader && this._loader.parentElement) {
|
|
10667
10683
|
this._renderer.removeChild(this._loader.parentElement, this._loader);
|
|
10668
10684
|
}
|
|
10685
|
+
if (this._mask && this._mask.parentElement) {
|
|
10686
|
+
this._renderer.removeChild(this._loader.parentElement, this._mask);
|
|
10687
|
+
}
|
|
10669
10688
|
}
|
|
10670
10689
|
setPosition() {
|
|
10671
10690
|
const position = this._element.getBoundingClientRect();
|
|
@@ -10674,7 +10693,7 @@ class LoaderDirective {
|
|
|
10674
10693
|
}
|
|
10675
10694
|
}
|
|
10676
10695
|
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 });
|
|
10677
|
-
LoaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: LoaderDirective, selector: "[tetaLoader]", inputs: { appendToBody: "appendToBody", tetaLoader: "tetaLoader" }, ngImport: i0 });
|
|
10696
|
+
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 });
|
|
10678
10697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LoaderDirective, decorators: [{
|
|
10679
10698
|
type: Directive,
|
|
10680
10699
|
args: [{
|
|
@@ -10687,6 +10706,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
|
|
|
10687
10706
|
}] }];
|
|
10688
10707
|
}, propDecorators: { appendToBody: [{
|
|
10689
10708
|
type: Input
|
|
10709
|
+
}], mask: [{
|
|
10710
|
+
type: Input
|
|
10690
10711
|
}], tetaLoader: [{
|
|
10691
10712
|
type: Input
|
|
10692
10713
|
}] } });
|