@tetacom/ng-components 1.0.124 → 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/default/numeric-cell/numeric-cell.component.mjs +1 -1
- package/esm2020/component/table/head-cell/head-cell.component.mjs +20 -4
- package/esm2020/component/table/service/table.service.mjs +1 -1
- package/esm2020/directive/only-number/only-number.directive.mjs +7 -3
- package/fesm2015/tetacom-ng-components.mjs +27 -7
- package/fesm2015/tetacom-ng-components.mjs.map +1 -1
- package/fesm2020/tetacom-ng-components.mjs +27 -7
- 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
|
};
|
|
@@ -2811,8 +2811,12 @@ class OnlyNumberDirective {
|
|
|
2811
2811
|
}
|
|
2812
2812
|
else {
|
|
2813
2813
|
if (e.key === ',' && originalValue.indexOf('.') < 0) {
|
|
2814
|
-
this._elementRef.nativeElement.value =
|
|
2815
|
-
|
|
2814
|
+
// this._elementRef.nativeElement.value =
|
|
2815
|
+
// `${originalValue.slice(0, cursorPosition)}.${originalValue.slice(cursorPosition)}`;
|
|
2816
|
+
this._control.control.patchValue(`${originalValue.slice(0, cursorPosition)}.${originalValue.slice(cursorPosition)}`);
|
|
2817
|
+
if (this._elementRef.nativeElement.setSelectionRange) {
|
|
2818
|
+
this._elementRef.nativeElement.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
|
|
2819
|
+
}
|
|
2816
2820
|
}
|
|
2817
2821
|
e.preventDefault();
|
|
2818
2822
|
}
|
|
@@ -9169,12 +9173,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
9169
9173
|
}] } });
|
|
9170
9174
|
|
|
9171
9175
|
class HeadCellComponent {
|
|
9172
|
-
constructor(_svc, _app, _elementRef) {
|
|
9176
|
+
constructor(_svc, _app, _elementRef, _cdr) {
|
|
9173
9177
|
this._svc = _svc;
|
|
9174
9178
|
this._app = _app;
|
|
9175
9179
|
this._elementRef = _elementRef;
|
|
9180
|
+
this._cdr = _cdr;
|
|
9176
9181
|
this.verticalAlign = VerticalAlign;
|
|
9177
9182
|
this.align = Align;
|
|
9183
|
+
this.dropDownOpen = false;
|
|
9178
9184
|
this.showDrag = null;
|
|
9179
9185
|
this._alive = true;
|
|
9180
9186
|
}
|
|
@@ -9259,9 +9265,23 @@ class HeadCellComponent {
|
|
|
9259
9265
|
}
|
|
9260
9266
|
return '';
|
|
9261
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);
|
|
9262
9280
|
}
|
|
9263
9281
|
ngOnDestroy() {
|
|
9264
9282
|
this._alive = false;
|
|
9283
|
+
this.observer.unobserve(this._elementRef.nativeElement);
|
|
9284
|
+
this.observer.disconnect();
|
|
9265
9285
|
}
|
|
9266
9286
|
resizeStart(event) {
|
|
9267
9287
|
const rect = this._elementRef.nativeElement.getBoundingClientRect();
|
|
@@ -9281,12 +9301,12 @@ class HeadCellComponent {
|
|
|
9281
9301
|
this._startPosition = null;
|
|
9282
9302
|
}
|
|
9283
9303
|
}
|
|
9284
|
-
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 });
|
|
9285
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 });
|
|
9286
9306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, decorators: [{
|
|
9287
9307
|
type: Component,
|
|
9288
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"] }]
|
|
9289
|
-
}], 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: [{
|
|
9290
9310
|
type: Input
|
|
9291
9311
|
}], showHeadCellMenu: [{
|
|
9292
9312
|
type: Input
|