@tetacom/ng-components 1.0.125 → 1.0.126
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/head-cell.component.d.ts +4 -2
- package/component/table/service/table.service.d.ts +1 -1
- package/esm2020/component/dropdown/dropdown-base.mjs +3 -3
- package/esm2020/component/table/head-cell/head-cell.component.mjs +20 -4
- package/esm2020/component/table/service/table.service.mjs +1 -1
- package/fesm2015/tetacom-ng-components.mjs +21 -5
- package/fesm2015/tetacom-ng-components.mjs.map +1 -1
- package/fesm2020/tetacom-ng-components.mjs +21 -5
- package/fesm2020/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/style/tokens/basedark.tokens.css +77 -0
- package/style/tokens/baselight.tokens.css +61 -0
- package/style/tokens/global.tokens.css +235 -0
- package/style/tokens/utility.tokens.css +1119 -0
|
@@ -1232,8 +1232,8 @@ class DropdownBase {
|
|
|
1232
1232
|
this._backdrop = null;
|
|
1233
1233
|
this._open = false;
|
|
1234
1234
|
this._alive = true;
|
|
1235
|
-
this.scrollListener = () => {
|
|
1236
|
-
if (this.open) {
|
|
1235
|
+
this.scrollListener = (event) => {
|
|
1236
|
+
if (this.open && !this._body.contains(event.target) && this._body !== event.target) {
|
|
1237
1237
|
this.closeDropdown();
|
|
1238
1238
|
}
|
|
1239
1239
|
};
|
|
@@ -9173,12 +9173,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9173
9173
|
}] } });
|
|
9174
9174
|
|
|
9175
9175
|
class HeadCellComponent {
|
|
9176
|
-
constructor(_svc, _app, _elementRef) {
|
|
9176
|
+
constructor(_svc, _app, _elementRef, _cdr) {
|
|
9177
9177
|
this._svc = _svc;
|
|
9178
9178
|
this._app = _app;
|
|
9179
9179
|
this._elementRef = _elementRef;
|
|
9180
|
+
this._cdr = _cdr;
|
|
9180
9181
|
this.verticalAlign = VerticalAlign;
|
|
9181
9182
|
this.align = Align;
|
|
9183
|
+
this.dropDownOpen = false;
|
|
9182
9184
|
this.showDrag = null;
|
|
9183
9185
|
this._alive = true;
|
|
9184
9186
|
}
|
|
@@ -9263,9 +9265,23 @@ class HeadCellComponent {
|
|
|
9263
9265
|
}
|
|
9264
9266
|
return '';
|
|
9265
9267
|
}));
|
|
9268
|
+
this.observer = new IntersectionObserver((entries) => {
|
|
9269
|
+
entries.forEach((entry) => {
|
|
9270
|
+
if (!entry.isIntersecting && this.dropDownOpen) {
|
|
9271
|
+
this.dropDownOpen = false;
|
|
9272
|
+
this._cdr.detectChanges();
|
|
9273
|
+
}
|
|
9274
|
+
});
|
|
9275
|
+
}, {
|
|
9276
|
+
root: this._svc.getTableElement(this._elementRef.nativeElement),
|
|
9277
|
+
threshold: [1]
|
|
9278
|
+
});
|
|
9279
|
+
this.observer.observe(this._elementRef.nativeElement);
|
|
9266
9280
|
}
|
|
9267
9281
|
ngOnDestroy() {
|
|
9268
9282
|
this._alive = false;
|
|
9283
|
+
this.observer.unobserve(this._elementRef.nativeElement);
|
|
9284
|
+
this.observer.disconnect();
|
|
9269
9285
|
}
|
|
9270
9286
|
resizeStart(event) {
|
|
9271
9287
|
const rect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
@@ -9285,12 +9301,12 @@ class HeadCellComponent {
|
|
|
9285
9301
|
this._startPosition = null;
|
|
9286
9302
|
}
|
|
9287
9303
|
}
|
|
9288
|
-
HeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, deps: [{ token: TableService }, { token: i0.ApplicationRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9304
|
+
HeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, deps: [{ token: TableService }, { token: i0.ApplicationRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9289
9305
|
HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, viewQueries: [{ propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }, { propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row row_auto\">\n <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n [verticalAlign]=\"verticalAlign.bottom\"\n [appendToBody]=\"true\"\n [(open)]=\"dropDownOpen\"\n [align]=\"align.auto\"\n (click)=\"$event.preventDefault()\"\n [class.table-head__cell__menu_open]=\"dropDownOpen\"\n class=\"column column_auto justify-content-center\">\n <div tetaDropdownHead\n draggable=\"true\"\n class=\"table-head__cell__wrapper\"\n (dragstart)=\"dragstart($event)\"\n [ngClass]=\"column.headCellClass\">\n <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n <teta-icon *ngIf=\"iconName | async as icon\"\n [palette]=\"'text'\"\n [name]=\"icon\"></teta-icon>\n </div>\n <teta-head-cell-dropdown tetaDropdownContent\n *ngIf=\"showHeadCellMenu\"\n [tabTemplates]=\"tabTemplates\"\n [data]=\"data\"\n [column]=\"column\"\n [columns]=\"columns | async\"\n [state]=\"state | async\"\n [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n </teta-dropdown>\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()\">\n <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-main-dropdown-tab [column]=\"column\"\n [state]=\"state\"\n [close]=\"close\"\n [headCellElementRef]=\"elementRef\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-filter-dropdown-tab [column]=\"column\"\n [state]=\"state\"\n [close]=\"close\"\n [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-visibility-dropdown-tab [column]=\"column\"\n [columns]=\"columns\"\n [state]=\"state\"\n [close]=\"close\"\n [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { kind: "component", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "columns", "data"] }, { kind: "component", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "tabTemplates", "dropDownOpen"], outputs: ["dropDownOpenChange"] }, { kind: "component", type: MainDropdownTabComponent, selector: "teta-main-dropdown-tab", inputs: ["columns", "column", "state", "data", "close", "headCellElementRef"] }, { kind: "component", type: FilterDropdownTabComponent, selector: "teta-filter-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: VisibilityDropdownTabComponent, selector: "teta-visibility-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9290
9306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, decorators: [{
|
|
9291
9307
|
type: Component,
|
|
9292
9308
|
args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row_auto\">\n <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n [verticalAlign]=\"verticalAlign.bottom\"\n [appendToBody]=\"true\"\n [(open)]=\"dropDownOpen\"\n [align]=\"align.auto\"\n (click)=\"$event.preventDefault()\"\n [class.table-head__cell__menu_open]=\"dropDownOpen\"\n class=\"column column_auto justify-content-center\">\n <div tetaDropdownHead\n draggable=\"true\"\n class=\"table-head__cell__wrapper\"\n (dragstart)=\"dragstart($event)\"\n [ngClass]=\"column.headCellClass\">\n <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n <teta-icon *ngIf=\"iconName | async as icon\"\n [palette]=\"'text'\"\n [name]=\"icon\"></teta-icon>\n </div>\n <teta-head-cell-dropdown tetaDropdownContent\n *ngIf=\"showHeadCellMenu\"\n [tabTemplates]=\"tabTemplates\"\n [data]=\"data\"\n [column]=\"column\"\n [columns]=\"columns | async\"\n [state]=\"state | async\"\n [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n </teta-dropdown>\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()\">\n <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-main-dropdown-tab [column]=\"column\"\n [state]=\"state\"\n [close]=\"close\"\n [headCellElementRef]=\"elementRef\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-filter-dropdown-tab [column]=\"column\"\n [state]=\"state\"\n [close]=\"close\"\n [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n let-close=\"close\">\n <teta-visibility-dropdown-tab [column]=\"column\"\n [columns]=\"columns\"\n [state]=\"state\"\n [close]=\"close\"\n [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\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"] }]
|
|
9293
|
-
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }]; }, propDecorators: { column: [{
|
|
9309
|
+
}], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
|
|
9294
9310
|
type: Input
|
|
9295
9311
|
}], showHeadCellMenu: [{
|
|
9296
9312
|
type: Input
|