@ng-nest/ui 13.1.6 → 13.1.7
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/core/config/config.d.ts +5 -0
- package/esm2020/auto-complete/auto-complete.component.mjs +3 -2
- package/esm2020/core/config/config.mjs +1 -1
- package/esm2020/core/interfaces/identify.type.mjs +1 -1
- package/esm2020/description/description.component.mjs +3 -3
- package/esm2020/table/table-body.component.mjs +14 -7
- package/esm2020/table/table.component.mjs +65 -17
- package/esm2020/table/table.module.mjs +5 -1
- package/esm2020/table/table.property.mjs +44 -3
- package/esm2020/upload/upload.component.mjs +9 -4
- package/esm2020/upload/upload.property.mjs +15 -3
- package/fesm2015/ng-nest-ui-auto-complete.mjs +2 -1
- package/fesm2015/ng-nest-ui-auto-complete.mjs.map +1 -1
- package/fesm2015/ng-nest-ui-core.mjs.map +1 -1
- package/fesm2015/ng-nest-ui-description.mjs +2 -2
- package/fesm2015/ng-nest-ui-description.mjs.map +1 -1
- package/fesm2015/ng-nest-ui-table.mjs +124 -22
- package/fesm2015/ng-nest-ui-table.mjs.map +1 -1
- package/fesm2015/ng-nest-ui-upload.mjs +22 -5
- package/fesm2015/ng-nest-ui-upload.mjs.map +1 -1
- package/fesm2020/ng-nest-ui-auto-complete.mjs +2 -1
- package/fesm2020/ng-nest-ui-auto-complete.mjs.map +1 -1
- package/fesm2020/ng-nest-ui-core.mjs.map +1 -1
- package/fesm2020/ng-nest-ui-description.mjs +2 -2
- package/fesm2020/ng-nest-ui-description.mjs.map +1 -1
- package/fesm2020/ng-nest-ui-table.mjs +122 -22
- package/fesm2020/ng-nest-ui-table.mjs.map +1 -1
- package/fesm2020/ng-nest-ui-upload.mjs +22 -5
- package/fesm2020/ng-nest-ui-upload.mjs.map +1 -1
- package/package.json +1 -1
- package/table/examples/en_US/default/expand/README.md +8 -0
- package/table/examples/zh_CN/default/expand/README.md +8 -0
- package/table/table-body.component.d.ts +1 -0
- package/table/table.component.d.ts +10 -2
- package/table/table.module.d.ts +5 -4
- package/table/table.property.d.ts +60 -5
- package/upload/upload.property.d.ts +16 -1
|
@@ -170,10 +170,10 @@ class XDescriptionComponent extends XDescriptionProperty {
|
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
172
|
/** @nocollapse */ /** @nocollapse */ XDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDescriptionComponent, deps: [{ token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
|
173
|
-
/** @nocollapse */ /** @nocollapse */ XDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDescriptionComponent, selector: "x-description", queries: [{ propertyName: "items", predicate: XDescriptionItemComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n <div class=\"x-description-header\">\r\n <div class=\"x-description-title\" *xOutlet=\"title\">\r\n {{ title }}\r\n </div>\r\n </div>\r\n <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n <div\r\n *ngFor=\"let item of items; index as i\"\r\n class=\"x-description-item\"\r\n [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n [class.x-description-item-heading]=\"item.heading\"\r\n [ngClass]=\"setFlex(item)\"\r\n >\r\n <div class=\"x-description-item-label\">\r\n <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n </div>\r\n <div class=\"x-description-item-content\">\r\n <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
173
|
+
/** @nocollapse */ /** @nocollapse */ XDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDescriptionComponent, selector: "x-description", queries: [{ propertyName: "items", predicate: XDescriptionItemComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n <div class=\"x-description-header\" *ngIf=\"title\">\r\n <div class=\"x-description-title\" *xOutlet=\"title\">\r\n {{ title }}\r\n </div>\r\n </div>\r\n <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n <div\r\n *ngFor=\"let item of items; index as i\"\r\n class=\"x-description-item\"\r\n [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n [class.x-description-item-heading]=\"item.heading\"\r\n [ngClass]=\"setFlex(item)\"\r\n >\r\n <div class=\"x-description-item-label\">\r\n <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n </div>\r\n <div class=\"x-description-item-content\">\r\n <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
174
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDescriptionComponent, decorators: [{
|
|
175
175
|
type: Component,
|
|
176
|
-
args: [{ selector: `${XDescriptionPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n <div class=\"x-description-header\">\r\n <div class=\"x-description-title\" *xOutlet=\"title\">\r\n {{ title }}\r\n </div>\r\n </div>\r\n <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n <div\r\n *ngFor=\"let item of items; index as i\"\r\n class=\"x-description-item\"\r\n [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n [class.x-description-item-heading]=\"item.heading\"\r\n [ngClass]=\"setFlex(item)\"\r\n >\r\n <div class=\"x-description-item-label\">\r\n <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n </div>\r\n <div class=\"x-description-item-content\">\r\n <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"] }]
|
|
176
|
+
args: [{ selector: `${XDescriptionPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n <div class=\"x-description-header\" *ngIf=\"title\">\r\n <div class=\"x-description-title\" *xOutlet=\"title\">\r\n {{ title }}\r\n </div>\r\n </div>\r\n <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n <div\r\n *ngFor=\"let item of items; index as i\"\r\n class=\"x-description-item\"\r\n [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n [class.x-description-item-heading]=\"item.heading\"\r\n [ngClass]=\"setFlex(item)\"\r\n >\r\n <div class=\"x-description-item-label\">\r\n <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n </div>\r\n <div class=\"x-description-item-content\">\r\n <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".x-description{margin:0;padding:0}.x-description-header{display:flex;align-items:center}.x-description-title{font-weight:700}.x-description-grid{display:grid;grid-auto-flow:row}.x-description-item{display:flex;align-items:baseline}.x-description-item.x-flex{display:flex}.x-description-item.x-justify-start{justify-content:flex-start}.x-description-item.x-justify-center{justify-content:center}.x-description-item.x-justify-end{justify-content:flex-end}.x-description-item.x-justify-space-between{justify-content:space-between}.x-description-item.x-justify-space-around{justify-content:space-around}.x-description-item.x-align-start{align-items:flex-start}.x-description-item.x-align-center{align-items:center}.x-description-item.x-align-end{align-items:flex-end}.x-description-item.x-direction-column{flex-direction:column}.x-description-item.x-direction-column-reverse{flex-direction:column-reverse}.x-description-item.x-direction-row{flex-direction:row}.x-description-item.x-direction-row-reverse{flex-direction:row-reverse}.x-description-item-heading{background-color:var(--x-background-a100)}.x-description-bordered .x-description-item{border:var(--x-border-width) var(--x-border-style) var(--x-border);margin-left:-1px;margin-top:-1px}.x-description-big .x-description-header{padding:var(--x-padding-big) 0}.x-description-big .x-description-item{padding:calc(var(--x-padding-big) / 2) 0}.x-description-big.x-description-bordered .x-description-item{padding:var(--x-padding-big)}.x-description-large .x-description-header{padding:var(--x-padding-large) 0}.x-description-large .x-description-item{padding:calc(var(--x-padding-large) / 2) 0}.x-description-large.x-description-bordered .x-description-item{padding:var(--x-padding-large)}.x-description-medium .x-description-header{padding:var(--x-padding-medium) 0}.x-description-medium .x-description-item{padding:calc(var(--x-padding-medium) / 2) 0}.x-description-medium.x-description-bordered .x-description-item{padding:var(--x-padding-medium)}.x-description-small .x-description-header{padding:var(--x-padding-small) 0}.x-description-small .x-description-item{padding:calc(var(--x-padding-small) / 2) 0}.x-description-small.x-description-bordered .x-description-item{padding:var(--x-padding-small)}.x-description-mini .x-description-header{padding:var(--x-padding-mini) 0}.x-description-mini .x-description-item{padding:calc(var(--x-padding-mini) / 2) 0}.x-description-mini.x-description-bordered .x-description-item{padding:var(--x-padding-mini)}\n"] }]
|
|
177
177
|
}], ctorParameters: function () { return [{ type: i1.XConfigService }]; }, propDecorators: { items: [{
|
|
178
178
|
type: ContentChildren,
|
|
179
179
|
args: [XDescriptionItemComponent]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ng-nest-ui-description.mjs","sources":["../../../../lib/ng-nest/ui/description/description.property.ts","../../../../lib/ng-nest/ui/description/description-item.component.ts","../../../../lib/ng-nest/ui/description/description.component.ts","../../../../lib/ng-nest/ui/description/description.component.html","../../../../lib/ng-nest/ui/description/description.module.ts","../../../../lib/ng-nest/ui/description/ng-nest-ui-description.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\nimport { XAlign, XBoolean, XDirection, XInputBoolean, XJustify, XProperty, XSize, XTemplate, XWithConfig } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Description\r\n * @selector x-description\r\n * @decorator component\r\n */\r\nexport const XDescriptionPrefix = 'x-description';\r\nconst X_CONFIG_NAME = 'description';\r\n\r\n/**\r\n * Description Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDescriptionProperty extends XProperty {\r\n /**\r\n * @zh_CN 描述列表的标题，支持自定义模板\r\n * @en_US Describe the title of the list, support custom template\r\n */\r\n @Input() title?: XTemplate;\r\n /**\r\n * @zh_CN 是否展示边框\r\n * @en_US Whether to show column borders\r\n */\r\n @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME, false) @XInputBoolean() bordered!: XBoolean;\r\n /**\r\n * @zh_CN grid 布局下定义列宽度\r\n * @en_US Define column width under grid layout\r\n */\r\n @Input() gridTemplateColumns?: string;\r\n /**\r\n * @zh_CN 尺寸\r\n * @en_US Size\r\n */\r\n @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size!: XSize;\r\n}\r\n\r\n/**\r\n * Description Item\r\n * @selector x-description-item\r\n * @decorator component\r\n */\r\nexport const XDescriptionItemPrefix = 'x-description-item';\r\n\r\n/**\r\n * Description Item Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDescriptionItemProperty {\r\n /**\r\n * @zh_CN 使用 grid 布局\r\n * @en_US Use grid layout to merge cells\r\n */\r\n @Input() gridArea?: string;\r\n /**\r\n * @zh_CN 内容的描述，支持自定义模板\r\n * @en_US Description of content, support custom templates\r\n */\r\n @Input() label?: XTemplate;\r\n /**\r\n * @zh_CN flex 布局下的子元素水平排列方式\r\n * @en_US Child element under the horizontal arrangement of the layout flex\r\n */\r\n @Input() justify?: XJustify = 'start';\r\n /**\r\n * @zh_CN flex 布局下的子元素垂直排列方式\r\n * @en_US Child element under the vertical layout flex arrangement\r\n */\r\n @Input() align?: XAlign = 'start';\r\n /**\r\n * @zh_CN flex 布局下的子元素排列方向\r\n * @en_US Child element under the direction of arrangement of the layout flex\r\n */\r\n @Input() direction?: XDirection = 'row';\r\n /**\r\n * @zh_CN 宽度\r\n * @en_US Width\r\n */\r\n @Input() width?: string;\r\n /**\r\n * @zh_CN flex 比重\r\n * @en_US Flex proportion\r\n */\r\n @Input() flex?: number;\r\n /**\r\n * @zh_CN 是否是标题\r\n * @en_US Whether it is heading\r\n */\r\n @Input() @XInputBoolean() heading: XBoolean = false;\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, TemplateRef } from '@angular/core';\r\nimport { XDescriptionItemPrefix, XDescriptionItemProperty } from './description.property';\r\n\r\n@Component({\r\n selector: `${XDescriptionItemPrefix}`,\r\n template: `\r\n <ng-template>\r\n <ng-content></ng-content>\r\n </ng-template>\r\n `,\r\n styleUrls: ['./style/index.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionItemComponent extends XDescriptionItemProperty {\r\n @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<void>;\r\n constructor() {\r\n super();\r\n }\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList, SimpleChanges } from '@angular/core';\r\nimport { XDescriptionPrefix, XDescriptionProperty } from './description.property';\r\nimport { XClearClass, XConfigService, XIsChange, XIsEmpty } from '@ng-nest/ui/core';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\n\r\n@Component({\r\n selector: `${XDescriptionPrefix}`,\r\n templateUrl: './description.component.html',\r\n styleUrls: ['./style/index.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionComponent extends XDescriptionProperty {\r\n @ContentChildren(XDescriptionItemComponent) items!: QueryList<XDescriptionItemComponent>;\r\n constructor(public configService: XConfigService) {\r\n super();\r\n }\r\n\r\n ngOnInit() {\r\n this.setClassMap();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n const { size } = changes;\r\n XIsChange(size) && this.setClassMap();\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.setMerge();\r\n }\r\n\r\n setClassMap() {\r\n XClearClass(this.classMap);\r\n this.classMap = {\r\n [`${XDescriptionPrefix}-${this.size}`]: !XIsEmpty(this.size)\r\n };\r\n }\r\n\r\n setFlex(item: XDescriptionItemComponent) {\r\n let classes: { [property: string]: boolean } = {};\r\n if (!XIsEmpty(item.justify)) classes[`x-justify-${item.justify}`] = true;\r\n if (!XIsEmpty(item.align)) classes[`x-align-${item.align}`] = true;\r\n if (!XIsEmpty(item.direction)) classes[`x-direction-${item.direction}`] = true;\r\n return classes;\r\n }\r\n\r\n setMerge() {\r\n if (this.gridTemplateColumns) return;\r\n let gridTemplateColumns: string[] = [];\r\n this.items.forEach((x) => {\r\n if (x.width) {\r\n gridTemplateColumns.push(x.width);\r\n } else if (x.flex) {\r\n gridTemplateColumns.push(`${x.flex}fr`);\r\n }\r\n });\r\n this.gridTemplateColumns = gridTemplateColumns.join(' ');\r\n }\r\n}\r\n","<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n <div class=\"x-description-header\">\r\n <div class=\"x-description-title\" *xOutlet=\"title\">\r\n {{ title }}\r\n </div>\r\n </div>\r\n <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n <div\r\n *ngFor=\"let item of items; index as i\"\r\n class=\"x-description-item\"\r\n [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n [class.x-description-item-heading]=\"item.heading\"\r\n [ngClass]=\"setFlex(item)\"\r\n >\r\n <div class=\"x-description-item-label\">\r\n <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n </div>\r\n <div class=\"x-description-item-content\">\r\n <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { XOutletModule } from '@ng-nest/ui/outlet';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\nimport { XDescriptionComponent } from './description.component';\r\nimport { XDescriptionItemProperty, XDescriptionProperty } from './description.property';\r\n\r\n@NgModule({\r\n declarations: [XDescriptionComponent, XDescriptionProperty, XDescriptionItemComponent, XDescriptionItemProperty],\r\n exports: [XDescriptionComponent, XDescriptionItemComponent],\r\n imports: [CommonModule, XOutletModule]\r\n})\r\nexport class XDescriptionModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ng-nest-ui-description.mjs","sources":["../../../../lib/ng-nest/ui/description/description.property.ts","../../../../lib/ng-nest/ui/description/description-item.component.ts","../../../../lib/ng-nest/ui/description/description.component.ts","../../../../lib/ng-nest/ui/description/description.component.html","../../../../lib/ng-nest/ui/description/description.module.ts","../../../../lib/ng-nest/ui/description/ng-nest-ui-description.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\r\nimport { XAlign, XBoolean, XDirection, XInputBoolean, XJustify, XProperty, XSize, XTemplate, XWithConfig } from '@ng-nest/ui/core';\r\n\r\n/**\r\n * Description\r\n * @selector x-description\r\n * @decorator component\r\n */\r\nexport const XDescriptionPrefix = 'x-description';\r\nconst X_CONFIG_NAME = 'description';\r\n\r\n/**\r\n * Description Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDescriptionProperty extends XProperty {\r\n /**\r\n * @zh_CN 描述列表的标题，支持自定义模板\r\n * @en_US Describe the title of the list, support custom template\r\n */\r\n @Input() title?: XTemplate;\r\n /**\r\n * @zh_CN 是否展示边框\r\n * @en_US Whether to show column borders\r\n */\r\n @Input() @XWithConfig<XBoolean>(X_CONFIG_NAME, false) @XInputBoolean() bordered!: XBoolean;\r\n /**\r\n * @zh_CN grid 布局下定义列宽度\r\n * @en_US Define column width under grid layout\r\n */\r\n @Input() gridTemplateColumns?: string;\r\n /**\r\n * @zh_CN 尺寸\r\n * @en_US Size\r\n */\r\n @Input() @XWithConfig<XSize>(X_CONFIG_NAME, 'medium') size!: XSize;\r\n}\r\n\r\n/**\r\n * Description Item\r\n * @selector x-description-item\r\n * @decorator component\r\n */\r\nexport const XDescriptionItemPrefix = 'x-description-item';\r\n\r\n/**\r\n * Description Item Property\r\n */\r\n@Component({ template: '' })\r\nexport class XDescriptionItemProperty {\r\n /**\r\n * @zh_CN 使用 grid 布局\r\n * @en_US Use grid layout to merge cells\r\n */\r\n @Input() gridArea?: string;\r\n /**\r\n * @zh_CN 内容的描述，支持自定义模板\r\n * @en_US Description of content, support custom templates\r\n */\r\n @Input() label?: XTemplate;\r\n /**\r\n * @zh_CN flex 布局下的子元素水平排列方式\r\n * @en_US Child element under the horizontal arrangement of the layout flex\r\n */\r\n @Input() justify?: XJustify = 'start';\r\n /**\r\n * @zh_CN flex 布局下的子元素垂直排列方式\r\n * @en_US Child element under the vertical layout flex arrangement\r\n */\r\n @Input() align?: XAlign = 'start';\r\n /**\r\n * @zh_CN flex 布局下的子元素排列方向\r\n * @en_US Child element under the direction of arrangement of the layout flex\r\n */\r\n @Input() direction?: XDirection = 'row';\r\n /**\r\n * @zh_CN 宽度\r\n * @en_US Width\r\n */\r\n @Input() width?: string;\r\n /**\r\n * @zh_CN flex 比重\r\n * @en_US Flex proportion\r\n */\r\n @Input() flex?: number;\r\n /**\r\n * @zh_CN 是否是标题\r\n * @en_US Whether it is heading\r\n */\r\n @Input() @XInputBoolean() heading: XBoolean = false;\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, TemplateRef } from '@angular/core';\r\nimport { XDescriptionItemPrefix, XDescriptionItemProperty } from './description.property';\r\n\r\n@Component({\r\n selector: `${XDescriptionItemPrefix}`,\r\n template: `\r\n <ng-template>\r\n <ng-content></ng-content>\r\n </ng-template>\r\n `,\r\n styleUrls: ['./style/index.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionItemComponent extends XDescriptionItemProperty {\r\n @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<void>;\r\n constructor() {\r\n super();\r\n }\r\n}\r\n","import { Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList, SimpleChanges } from '@angular/core';\r\nimport { XDescriptionPrefix, XDescriptionProperty } from './description.property';\r\nimport { XClearClass, XConfigService, XIsChange, XIsEmpty } from '@ng-nest/ui/core';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\n\r\n@Component({\r\n selector: `${XDescriptionPrefix}`,\r\n templateUrl: './description.component.html',\r\n styleUrls: ['./style/index.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class XDescriptionComponent extends XDescriptionProperty {\r\n @ContentChildren(XDescriptionItemComponent) items!: QueryList<XDescriptionItemComponent>;\r\n constructor(public configService: XConfigService) {\r\n super();\r\n }\r\n\r\n ngOnInit() {\r\n this.setClassMap();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n const { size } = changes;\r\n XIsChange(size) && this.setClassMap();\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.setMerge();\r\n }\r\n\r\n setClassMap() {\r\n XClearClass(this.classMap);\r\n this.classMap = {\r\n [`${XDescriptionPrefix}-${this.size}`]: !XIsEmpty(this.size)\r\n };\r\n }\r\n\r\n setFlex(item: XDescriptionItemComponent) {\r\n let classes: { [property: string]: boolean } = {};\r\n if (!XIsEmpty(item.justify)) classes[`x-justify-${item.justify}`] = true;\r\n if (!XIsEmpty(item.align)) classes[`x-align-${item.align}`] = true;\r\n if (!XIsEmpty(item.direction)) classes[`x-direction-${item.direction}`] = true;\r\n return classes;\r\n }\r\n\r\n setMerge() {\r\n if (this.gridTemplateColumns) return;\r\n let gridTemplateColumns: string[] = [];\r\n this.items.forEach((x) => {\r\n if (x.width) {\r\n gridTemplateColumns.push(x.width);\r\n } else if (x.flex) {\r\n gridTemplateColumns.push(`${x.flex}fr`);\r\n }\r\n });\r\n this.gridTemplateColumns = gridTemplateColumns.join(' ');\r\n }\r\n}\r\n","<div class=\"x-description\" [class.x-description-bordered]=\"bordered\" [ngClass]=\"classMap\">\r\n <div class=\"x-description-header\" *ngIf=\"title\">\r\n <div class=\"x-description-title\" *xOutlet=\"title\">\r\n {{ title }}\r\n </div>\r\n </div>\r\n <div class=\"x-description-grid\" [style.grid-template-columns]=\"gridTemplateColumns\">\r\n <div\r\n *ngFor=\"let item of items; index as i\"\r\n class=\"x-description-item\"\r\n [style.grid-area]=\"item.gridArea ? item.gridArea : '1 / ' + (i + 1)\"\r\n [class.x-description-item-heading]=\"item.heading\"\r\n [ngClass]=\"setFlex(item)\"\r\n >\r\n <div class=\"x-description-item-label\">\r\n <ng-container *xOutlet=\"item.label\">{{ item.label }}</ng-container>\r\n </div>\r\n <div class=\"x-description-item-content\">\r\n <ng-template [ngTemplateOutlet]=\"item.content\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { XOutletModule } from '@ng-nest/ui/outlet';\r\nimport { XDescriptionItemComponent } from './description-item.component';\r\nimport { XDescriptionComponent } from './description.component';\r\nimport { XDescriptionItemProperty, XDescriptionProperty } from './description.property';\r\n\r\n@NgModule({\r\n declarations: [XDescriptionComponent, XDescriptionProperty, XDescriptionItemComponent, XDescriptionItemProperty],\r\n exports: [XDescriptionComponent, XDescriptionItemComponent],\r\n imports: [CommonModule, XOutletModule]\r\n})\r\nexport class XDescriptionModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Component, Input, Output, Directive, Inject, ViewEncapsulation, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
3
3
|
import { __decorate } from 'tslib';
|
|
4
4
|
import * as i1 from '@ng-nest/ui/core';
|
|
5
|
-
import { XWithConfig, XInputNumber, XInputBoolean, XProperty, XIsChange, removeNgTag, XIsEmpty, XResize, stripTags } from '@ng-nest/ui/core';
|
|
5
|
+
import { XWithConfig, XInputNumber, XInputBoolean, XProperty, XIsChange, removeNgTag, XIsEmpty, XResize, stripTags, XIsUndefined } from '@ng-nest/ui/core';
|
|
6
6
|
import * as i6$1 from '@ng-nest/ui/pagination';
|
|
7
7
|
import { XPaginationProperty, XPaginationModule } from '@ng-nest/ui/pagination';
|
|
8
8
|
import { takeUntil } from 'rxjs/operators';
|
|
@@ -23,6 +23,8 @@ import * as i2$1 from '@ng-nest/ui/empty';
|
|
|
23
23
|
import { XEmptyModule } from '@ng-nest/ui/empty';
|
|
24
24
|
import * as i3$1 from '@angular/cdk/scrolling';
|
|
25
25
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
26
|
+
import * as i5 from '@ng-nest/ui/button';
|
|
27
|
+
import { XButtonModule } from '@ng-nest/ui/button';
|
|
26
28
|
|
|
27
29
|
/**
|
|
28
30
|
* Table
|
|
@@ -102,10 +104,15 @@ class XTableProperty extends XPaginationProperty {
|
|
|
102
104
|
* @en_US Pagination position
|
|
103
105
|
*/
|
|
104
106
|
this.paginationPosition = 'bottom-left';
|
|
107
|
+
/**
|
|
108
|
+
* @zh_CN 展开的节点
|
|
109
|
+
* @en_US Expanded node
|
|
110
|
+
*/
|
|
111
|
+
this.expanded = [];
|
|
105
112
|
}
|
|
106
113
|
}
|
|
107
114
|
/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
-
/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", rowHeight: "rowHeight", loading: "loading", bordered: "bordered", showHeader: "showHeader", activatedRow: "activatedRow", headColumnTpl: "headColumnTpl", bodyColumnTpl: "bodyColumnTpl", rowClass: "rowClass", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", bodyHeight: "bodyHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", checkedRow: "checkedRow", manual: "manual", scroll: "scroll", cellConfig: "cellConfig", rowSize: "rowSize", paginationPosition: "paginationPosition", showPagination: "showPagination" }, outputs: { activatedRowChange: "activatedRowChange", sortChange: "sortChange", manualChange: "manualChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
|
|
115
|
+
/** @nocollapse */ /** @nocollapse */ XTableProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", rowHeight: "rowHeight", loading: "loading", bordered: "bordered", showHeader: "showHeader", activatedRow: "activatedRow", headColumnTpl: "headColumnTpl", bodyColumnTpl: "bodyColumnTpl", rowClass: "rowClass", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", bodyHeight: "bodyHeight", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", checkedRow: "checkedRow", manual: "manual", scroll: "scroll", cellConfig: "cellConfig", rowSize: "rowSize", paginationPosition: "paginationPosition", showPagination: "showPagination", treeTable: "treeTable", expandedAll: "expandedAll", expandedLevel: "expandedLevel", expanded: "expanded", expandTpl: "expandTpl" }, outputs: { activatedRowChange: "activatedRowChange", sortChange: "sortChange", manualChange: "manualChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
|
|
109
116
|
__decorate([
|
|
110
117
|
XWithConfig(X_CONFIG_NAME, 42),
|
|
111
118
|
XInputNumber()
|
|
@@ -153,6 +160,18 @@ __decorate([
|
|
|
153
160
|
XWithConfig(X_CONFIG_NAME, true),
|
|
154
161
|
XInputBoolean()
|
|
155
162
|
], XTableProperty.prototype, "showPagination", void 0);
|
|
163
|
+
__decorate([
|
|
164
|
+
XWithConfig(X_CONFIG_NAME, false),
|
|
165
|
+
XInputBoolean()
|
|
166
|
+
], XTableProperty.prototype, "treeTable", void 0);
|
|
167
|
+
__decorate([
|
|
168
|
+
XWithConfig(X_CONFIG_NAME, false),
|
|
169
|
+
XInputBoolean()
|
|
170
|
+
], XTableProperty.prototype, "expandedAll", void 0);
|
|
171
|
+
__decorate([
|
|
172
|
+
XWithConfig(X_CONFIG_NAME, -1),
|
|
173
|
+
XInputNumber()
|
|
174
|
+
], XTableProperty.prototype, "expandedLevel", void 0);
|
|
156
175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableProperty, decorators: [{
|
|
157
176
|
type: Component,
|
|
158
177
|
args: [{ template: '' }]
|
|
@@ -212,6 +231,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
212
231
|
type: Input
|
|
213
232
|
}], showPagination: [{
|
|
214
233
|
type: Input
|
|
234
|
+
}], treeTable: [{
|
|
235
|
+
type: Input
|
|
236
|
+
}], expandedAll: [{
|
|
237
|
+
type: Input
|
|
238
|
+
}], expandedLevel: [{
|
|
239
|
+
type: Input
|
|
240
|
+
}], expanded: [{
|
|
241
|
+
type: Input
|
|
242
|
+
}], expandTpl: [{
|
|
243
|
+
type: Input
|
|
215
244
|
}] } });
|
|
216
245
|
/**
|
|
217
246
|
* Table Head
|
|
@@ -330,10 +359,15 @@ class XTableBodyProperty extends XProperty {
|
|
|
330
359
|
* @en_US Document height percentage, used by pop-up window percentage height
|
|
331
360
|
*/
|
|
332
361
|
this.docPercent = 1;
|
|
362
|
+
/**
|
|
363
|
+
* @zh_CN 树形表格下的层级
|
|
364
|
+
* @en_US The level under the tree table
|
|
365
|
+
*/
|
|
366
|
+
this.level = 0;
|
|
333
367
|
}
|
|
334
368
|
}
|
|
335
369
|
/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableBodyProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
336
|
-
/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableBodyProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", columnTpl: "columnTpl", activatedRow: "activatedRow", rowHeight: "rowHeight", bodyHeight: "bodyHeight", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", scroll: "scroll", cellConfig: "cellConfig", rowClass: "rowClass" }, outputs: { activatedRowChange: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
|
|
370
|
+
/** @nocollapse */ /** @nocollapse */ XTableBodyProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableBodyProperty, selector: "ng-component", inputs: { data: "data", columns: "columns", columnTpl: "columnTpl", activatedRow: "activatedRow", rowHeight: "rowHeight", bodyHeight: "bodyHeight", allowSelectRow: "allowSelectRow", virtualScroll: "virtualScroll", itemSize: "itemSize", minBufferPx: "minBufferPx", maxBufferPx: "maxBufferPx", adaptionHeight: "adaptionHeight", docPercent: "docPercent", scroll: "scroll", cellConfig: "cellConfig", rowClass: "rowClass", level: "level", expandedAll: "expandedAll", expandTpl: "expandTpl" }, outputs: { activatedRowChange: "activatedRowChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
|
|
337
371
|
__decorate([
|
|
338
372
|
XInputNumber()
|
|
339
373
|
], XTableBodyProperty.prototype, "rowHeight", void 0);
|
|
@@ -355,6 +389,9 @@ __decorate([
|
|
|
355
389
|
__decorate([
|
|
356
390
|
XInputNumber()
|
|
357
391
|
], XTableBodyProperty.prototype, "docPercent", void 0);
|
|
392
|
+
__decorate([
|
|
393
|
+
XInputBoolean()
|
|
394
|
+
], XTableBodyProperty.prototype, "expandedAll", void 0);
|
|
358
395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableBodyProperty, decorators: [{
|
|
359
396
|
type: Component,
|
|
360
397
|
args: [{ template: '' }]
|
|
@@ -392,6 +429,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
392
429
|
type: Input
|
|
393
430
|
}], rowClass: [{
|
|
394
431
|
type: Input
|
|
432
|
+
}], level: [{
|
|
433
|
+
type: Input
|
|
434
|
+
}], expandedAll: [{
|
|
435
|
+
type: Input
|
|
436
|
+
}], expandTpl: [{
|
|
437
|
+
type: Input
|
|
395
438
|
}] } });
|
|
396
439
|
/**
|
|
397
440
|
* Table Foot
|
|
@@ -609,12 +652,14 @@ class XTableBodyComponent extends XTableBodyProperty {
|
|
|
609
652
|
return this.rowHeight !== 0 && this.itemSize > this.rowHeight ? this.rowHeight : this.itemSize;
|
|
610
653
|
}
|
|
611
654
|
ngOnChanges(simples) {
|
|
612
|
-
const { data, columns, activatedRow, mergeRule } = simples;
|
|
613
|
-
XIsChange(data, columns, activatedRow, mergeRule) && this.cdr.detectChanges();
|
|
655
|
+
const { data, columns, activatedRow, mergeRule, expandedAll } = simples;
|
|
656
|
+
XIsChange(data, columns, activatedRow, mergeRule, expandedAll) && this.cdr.detectChanges();
|
|
614
657
|
}
|
|
615
658
|
ngOnInit() {
|
|
616
659
|
var _a;
|
|
617
660
|
removeNgTag(this.elementRef.nativeElement);
|
|
661
|
+
if (this.level > 0)
|
|
662
|
+
removeNgTag(this.tbody.nativeElement);
|
|
618
663
|
if (((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.y) && !this.bodyHeight) {
|
|
619
664
|
this.bodyHeight = this.scroll.y;
|
|
620
665
|
}
|
|
@@ -755,15 +800,19 @@ class XTableBodyComponent extends XTableBodyProperty {
|
|
|
755
800
|
this.activatedRowChange.emit(row);
|
|
756
801
|
this.cdr.detectChanges();
|
|
757
802
|
}
|
|
803
|
+
onExpanded(_event, node) {
|
|
804
|
+
node.expanded = !node.expanded;
|
|
805
|
+
this.cdr.detectChanges();
|
|
806
|
+
}
|
|
758
807
|
trackByItem(_index, item) {
|
|
759
808
|
return item.id;
|
|
760
809
|
}
|
|
761
810
|
}
|
|
762
811
|
/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableBodyComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
|
763
|
-
/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableBodyComponent, selector: "x-table-body", inputs: { table: "table" }, viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<tbody #tbody>\r\n <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n <td\r\n *ngFor=\"let column of cellConfig.cells; index as j\"\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.grid-area]=\"column.gridArea\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n *ngIf=\"virtualScroll; else bodyTpl\"\r\n [itemSize]=\"getItemSize\"\r\n [minBufferPx]=\"minBufferPx\"\r\n [maxBufferPx]=\"maxBufferPx\"\r\n [style.height.px]=\"bodyHeight\"\r\n >\r\n <tr\r\n *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n [
|
|
812
|
+
/** @nocollapse */ /** @nocollapse */ XTableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableBodyComponent, selector: "x-table-body", inputs: { table: "table" }, viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<tbody #tbody>\r\n <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n <td\r\n *ngFor=\"let column of cellConfig.cells; index as j\"\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.grid-area]=\"column.gridArea\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <x-empty *ngIf=\"isEmpty && level === 0\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n *ngIf=\"virtualScroll; else bodyTpl\"\r\n [itemSize]=\"getItemSize\"\r\n [minBufferPx]=\"minBufferPx\"\r\n [maxBufferPx]=\"maxBufferPx\"\r\n [style.height.px]=\"bodyHeight\"\r\n >\r\n <tr\r\n *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n [style.height.px]=\"getRowHeight\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n (click)=\"rowClick(row)\"\r\n >\r\n <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n </tr>\r\n </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<ng-template #bodyTpl>\r\n <ng-container *ngFor=\"let row of data; index as i; trackBy: trackByItem\">\r\n <tr\r\n [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n [style.height.px]=\"getRowHeight\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n (click)=\"rowClick(row)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n </tr>\r\n <div class=\"x-table-children\" [class.x-table-expandTpl]=\"expandTpl\" *ngIf=\"table.treeTable && row.children && row.expanded\">\r\n <x-table-body\r\n [data]=\"row.children\"\r\n [columns]=\"table.columns\"\r\n [itemSize]=\"table.itemSize\"\r\n [rowHeight]=\"table.rowHeight\"\r\n [columnTpl]=\"table.bodyColumnTpl\"\r\n [allowSelectRow]=\"table.allowSelectRow\"\r\n [rowClass]=\"table.rowClass\"\r\n [cellConfig]=\"table.cellConfig?.tbody\"\r\n [(activatedRow)]=\"table.activatedRow\"\r\n [expandedAll]=\"expandedAll\"\r\n [expandTpl]=\"expandTpl\"\r\n (activatedRowChange)=\"table.activatedRowChange.emit($event)\"\r\n [level]=\"row.level! + 1\"\r\n [table]=\"table\"\r\n ></x-table-body>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n <ng-container *ngIf=\"level > 0 && expandTpl\">\r\n <ng-container *xOutlet=\"expandTpl; context: { $row: row, $index: i, $level: level }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"level === 0 || !expandTpl\">\r\n <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: level }\"></ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n <ng-container *ngFor=\"let column of columns; index as j; trackBy: trackByItem\">\r\n <td\r\n [style.width.px]=\"column.width\"\r\n [style.flex]=\"getFlex(column)\"\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [style.left.px]=\"column.left\"\r\n [ngClass]=\"!rowClass ? {} : rowClass(row, i)\"\r\n >\r\n <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n </td>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <x-checkbox\r\n [data]=\"[{ id: true, label: '' }]\"\r\n [(ngModel)]=\"row[column.id]\"\r\n (ngModelChange)=\"table.bodyChecked($event, column)\"\r\n ></x-checkbox>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'index'\">\r\n <div>{{ table.getIndex(i) }}</div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"table.isExpandColumn(column)\">\r\n <x-button\r\n [class.is-leaf]=\"!row.leaf\"\r\n [class.is-expanded]=\"row.expanded\"\r\n (click)=\"onExpanded($event, row)\"\r\n icon=\"fto-chevron-right\"\r\n size=\"mini\"\r\n onlyIcon\r\n class=\"x-table-expand\"\r\n [style.margin-left.rem]=\"row.level - 0.5\"\r\n ></x-button>\r\n </ng-container>\r\n <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n {{ table.rowExpandNext && table.rowExpandNext.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n", components: [{ type: i2$1.XEmptyComponent, selector: "x-empty" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { type: i2.XCheckboxComponent, selector: "x-checkbox" }, { type: i5.XButtonComponent, selector: "x-button" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i7.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
764
813
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableBodyComponent, decorators: [{
|
|
765
814
|
type: Component,
|
|
766
|
-
args: [{ selector: `${XTableBodyPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tbody #tbody>\r\n <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n <td\r\n *ngFor=\"let column of cellConfig.cells; index as j\"\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.grid-area]=\"column.gridArea\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <x-empty *ngIf=\"isEmpty\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n *ngIf=\"virtualScroll; else bodyTpl\"\r\n [itemSize]=\"getItemSize\"\r\n [minBufferPx]=\"minBufferPx\"\r\n [maxBufferPx]=\"maxBufferPx\"\r\n [style.height.px]=\"bodyHeight\"\r\n >\r\n <tr\r\n *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n [
|
|
815
|
+
args: [{ selector: `${XTableBodyPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tbody #tbody>\r\n <ng-container *ngIf=\"cellConfig; else virtualScrollTpl\">\r\n <tr *ngFor=\"let row of data; index as i; trackBy: trackByItem\" [style.gridTemplateColumns]=\"cellConfig.gridTemplateColumns\">\r\n <td\r\n *ngFor=\"let column of cellConfig.cells; index as j\"\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.grid-area]=\"column.gridArea\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <x-empty *ngIf=\"isEmpty && level === 0\"></x-empty>\r\n</tbody>\r\n\r\n<ng-template #virtualScrollTpl>\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n *ngIf=\"virtualScroll; else bodyTpl\"\r\n [itemSize]=\"getItemSize\"\r\n [minBufferPx]=\"minBufferPx\"\r\n [maxBufferPx]=\"maxBufferPx\"\r\n [style.height.px]=\"bodyHeight\"\r\n >\r\n <tr\r\n *cdkVirtualFor=\"let row of data; let index = index; trackBy: trackByItem\"\r\n [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n [style.height.px]=\"getRowHeight\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n (click)=\"rowClick(row)\"\r\n >\r\n <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n </tr>\r\n </cdk-virtual-scroll-viewport>\r\n</ng-template>\r\n\r\n<ng-template #bodyTpl>\r\n <ng-container *ngFor=\"let row of data; index as i; trackBy: trackByItem\">\r\n <tr\r\n [class.x-table-activated]=\"allowSelectRow && activatedRow?.id === row.id\"\r\n [style.height.px]=\"getRowHeight\"\r\n [style.min-height.px]=\"getRowHeight\"\r\n (click)=\"rowClick(row)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n </tr>\r\n <div class=\"x-table-children\" [class.x-table-expandTpl]=\"expandTpl\" *ngIf=\"table.treeTable && row.children && row.expanded\">\r\n <x-table-body\r\n [data]=\"row.children\"\r\n [columns]=\"table.columns\"\r\n [itemSize]=\"table.itemSize\"\r\n [rowHeight]=\"table.rowHeight\"\r\n [columnTpl]=\"table.bodyColumnTpl\"\r\n [allowSelectRow]=\"table.allowSelectRow\"\r\n [rowClass]=\"table.rowClass\"\r\n [cellConfig]=\"table.cellConfig?.tbody\"\r\n [(activatedRow)]=\"table.activatedRow\"\r\n [expandedAll]=\"expandedAll\"\r\n [expandTpl]=\"expandTpl\"\r\n (activatedRowChange)=\"table.activatedRowChange.emit($event)\"\r\n [level]=\"row.level! + 1\"\r\n [table]=\"table\"\r\n ></x-table-body>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n <ng-container *ngIf=\"level > 0 && expandTpl\">\r\n <ng-container *xOutlet=\"expandTpl; context: { $row: row, $index: i, $level: level }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"level === 0 || !expandTpl\">\r\n <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: level }\"></ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n <ng-container *ngFor=\"let column of columns; index as j; trackBy: trackByItem\">\r\n <td\r\n [style.width.px]=\"column.width\"\r\n [style.flex]=\"getFlex(column)\"\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [style.left.px]=\"column.left\"\r\n [ngClass]=\"!rowClass ? {} : rowClass(row, i)\"\r\n >\r\n <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n </td>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n <ng-container [ngSwitch]=\"column.type\">\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <x-checkbox\r\n [data]=\"[{ id: true, label: '' }]\"\r\n [(ngModel)]=\"row[column.id]\"\r\n (ngModelChange)=\"table.bodyChecked($event, column)\"\r\n ></x-checkbox>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'index'\">\r\n <div>{{ table.getIndex(i) }}</div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <ng-container *ngIf=\"table.isExpandColumn(column)\">\r\n <x-button\r\n [class.is-leaf]=\"!row.leaf\"\r\n [class.is-expanded]=\"row.expanded\"\r\n (click)=\"onExpanded($event, row)\"\r\n icon=\"fto-chevron-right\"\r\n size=\"mini\"\r\n onlyIcon\r\n class=\"x-table-expand\"\r\n [style.margin-left.rem]=\"row.level - 0.5\"\r\n ></x-button>\r\n </ng-container>\r\n <ng-container *xOutlet=\"columnTpl[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n <div [innerHTML]=\"row[column.id]\" [style.text-align]=\"column.textAlign\"></div>\r\n {{ table.rowExpandNext && table.rowExpandNext.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n" }]
|
|
767
816
|
}], ctorParameters: function () {
|
|
768
817
|
return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
769
818
|
type: Inject,
|
|
@@ -823,6 +872,7 @@ class XTableComponent extends XTableProperty {
|
|
|
823
872
|
this.dataIsFunc = false;
|
|
824
873
|
this.getting = false;
|
|
825
874
|
this.tableData = [];
|
|
875
|
+
this.treeTableData = [];
|
|
826
876
|
this.checkedValues = {};
|
|
827
877
|
this.indeterminate = '$$indeterminate';
|
|
828
878
|
this._unSubject = new Subject();
|
|
@@ -836,11 +886,13 @@ class XTableComponent extends XTableProperty {
|
|
|
836
886
|
ngOnInit() {
|
|
837
887
|
this.setClassMap();
|
|
838
888
|
this.setRowChecked();
|
|
889
|
+
this.setRowExpand();
|
|
839
890
|
this.setMerge();
|
|
840
891
|
this.setPaginationPosition();
|
|
841
892
|
}
|
|
842
893
|
ngOnChanges(simples) {
|
|
843
|
-
const { data, checkedRow, columns, activatedRow, manual, showPagination } = simples;
|
|
894
|
+
const { data, checkedRow, columns, activatedRow, manual, showPagination, expandedAll } = simples;
|
|
895
|
+
XIsChange(expandedAll) && this.setExpandedAll();
|
|
844
896
|
XIsChange(data, checkedRow) && this.setData();
|
|
845
897
|
XIsChange(columns, activatedRow, showPagination) && this.cdr.detectChanges();
|
|
846
898
|
XIsChange(manual) && this.setManual();
|
|
@@ -867,9 +919,12 @@ class XTableComponent extends XTableProperty {
|
|
|
867
919
|
setData() {
|
|
868
920
|
if (Array.isArray(this.data)) {
|
|
869
921
|
this.dataIsFunc = false;
|
|
922
|
+
this.setChecked(this.data);
|
|
923
|
+
this.setHeadCheckboxList(this.data);
|
|
924
|
+
this.setExpand(this.data);
|
|
925
|
+
this.setHeadExpandList();
|
|
870
926
|
this.tableData = this.data;
|
|
871
|
-
this.
|
|
872
|
-
this.setHeadCheckboxList();
|
|
927
|
+
this.detectChanges();
|
|
873
928
|
}
|
|
874
929
|
else if (this.data instanceof Function) {
|
|
875
930
|
this.dataIsFunc = true;
|
|
@@ -885,14 +940,18 @@ class XTableComponent extends XTableProperty {
|
|
|
885
940
|
this.data(this.index, this.size, this.query)
|
|
886
941
|
.pipe(takeUntil(this._unSubject))
|
|
887
942
|
.subscribe((x) => {
|
|
888
|
-
[
|
|
943
|
+
let [data, total] = [x.list, x.total];
|
|
889
944
|
if (this.virtualBody) {
|
|
890
945
|
this.virtualBody.scrollToIndex(0);
|
|
891
946
|
this.virtualBody.checkViewportSize();
|
|
892
947
|
}
|
|
893
948
|
this.getting = false;
|
|
894
|
-
this.setChecked();
|
|
895
|
-
this.setHeadCheckboxList();
|
|
949
|
+
this.setChecked(data);
|
|
950
|
+
this.setHeadCheckboxList(data);
|
|
951
|
+
this.setExpand(data);
|
|
952
|
+
this.setHeadExpandList();
|
|
953
|
+
this.tableData = data;
|
|
954
|
+
this.total = total;
|
|
896
955
|
this.detectChanges();
|
|
897
956
|
});
|
|
898
957
|
}
|
|
@@ -904,6 +963,16 @@ class XTableComponent extends XTableProperty {
|
|
|
904
963
|
this.rowChecked = this.columns.find((x) => x.rowChecked);
|
|
905
964
|
this.headCheckboxList = this.columns.filter((x) => x.type === 'checkbox' && x.headChecked);
|
|
906
965
|
}
|
|
966
|
+
setRowExpand() {
|
|
967
|
+
this.rowExpand = this.columns.find((x) => x.rowExpand);
|
|
968
|
+
}
|
|
969
|
+
isExpandColumn(column) {
|
|
970
|
+
let expandColumn = this.columns.find((x) => x.id === column.id && x.type === 'expand');
|
|
971
|
+
if (expandColumn) {
|
|
972
|
+
return true;
|
|
973
|
+
}
|
|
974
|
+
return false;
|
|
975
|
+
}
|
|
907
976
|
setMerge() {
|
|
908
977
|
if (!this.cellConfig)
|
|
909
978
|
return;
|
|
@@ -949,28 +1018,58 @@ class XTableComponent extends XTableProperty {
|
|
|
949
1018
|
if (this.hasScrollY && y)
|
|
950
1019
|
(_b = this.virtualBody) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
|
|
951
1020
|
}
|
|
952
|
-
setChecked() {
|
|
1021
|
+
setChecked(data) {
|
|
953
1022
|
let result = [];
|
|
954
|
-
if (XIsEmpty(
|
|
1023
|
+
if (XIsEmpty(data) || !this.checkedRow)
|
|
955
1024
|
return;
|
|
956
1025
|
for (let key in this.checkedRow) {
|
|
957
1026
|
const arr = this.checkedRow[key];
|
|
958
|
-
for (let item of
|
|
1027
|
+
for (let item of data) {
|
|
959
1028
|
item[key] = arr.includes(item.id);
|
|
960
1029
|
result = [...result, item];
|
|
961
1030
|
}
|
|
962
1031
|
}
|
|
963
1032
|
if (result.length > 0)
|
|
964
|
-
|
|
965
|
-
this.detectChanges();
|
|
1033
|
+
data = [...result];
|
|
966
1034
|
}
|
|
967
|
-
setHeadCheckboxList() {
|
|
968
|
-
if (XIsEmpty(
|
|
1035
|
+
setHeadCheckboxList(data) {
|
|
1036
|
+
if (XIsEmpty(data) || !this.headCheckboxList)
|
|
969
1037
|
return;
|
|
970
1038
|
for (let column of this.headCheckboxList) {
|
|
971
1039
|
this.setCheckedValues(column);
|
|
972
1040
|
}
|
|
973
1041
|
}
|
|
1042
|
+
setExpand(data) {
|
|
1043
|
+
const getChildren = (node, level) => {
|
|
1044
|
+
var _a, _b;
|
|
1045
|
+
node.level = level;
|
|
1046
|
+
node.expanded = Boolean(this.expandedAll) || level <= this.expandedLevel || this.expanded.includes(node.id);
|
|
1047
|
+
if (XIsUndefined(node.children))
|
|
1048
|
+
node.children = data.filter((y) => y.pid === node.id);
|
|
1049
|
+
if (XIsUndefined(node.leaf))
|
|
1050
|
+
node.leaf = ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
1051
|
+
if (node.leaf)
|
|
1052
|
+
(_b = node.children) === null || _b === void 0 ? void 0 : _b.map((y) => getChildren(y, level + 1));
|
|
1053
|
+
return node;
|
|
1054
|
+
};
|
|
1055
|
+
this.treeTableData = data.filter((x) => XIsEmpty(x.pid)).map((x) => getChildren(x, 0));
|
|
1056
|
+
}
|
|
1057
|
+
setExpandedAll() {
|
|
1058
|
+
var _a;
|
|
1059
|
+
if (!this.treeTable || ((_a = this.treeTableData) === null || _a === void 0 ? void 0 : _a.length) === 0)
|
|
1060
|
+
return;
|
|
1061
|
+
const setChildren = (nodes) => {
|
|
1062
|
+
if (XIsEmpty(nodes))
|
|
1063
|
+
return;
|
|
1064
|
+
nodes.forEach((x) => {
|
|
1065
|
+
x.expanded = Boolean(this.expandedAll);
|
|
1066
|
+
setChildren(x.children);
|
|
1067
|
+
});
|
|
1068
|
+
};
|
|
1069
|
+
setChildren(this.treeTableData);
|
|
1070
|
+
this.detectChanges();
|
|
1071
|
+
}
|
|
1072
|
+
setHeadExpandList() { }
|
|
974
1073
|
checkSort(sort) {
|
|
975
1074
|
if (!this.dataIsFunc)
|
|
976
1075
|
return;
|
|
@@ -1004,10 +1103,10 @@ class XTableComponent extends XTableProperty {
|
|
|
1004
1103
|
}
|
|
1005
1104
|
}
|
|
1006
1105
|
/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.XConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1007
|
-
/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableComponent, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n #table\r\n class=\"x-table\"\r\n [ngClass]=\"classMap\"\r\n [x-loading]=\"loading && getting\"\r\n [class.x-table-scroll-left]=\"getScrollLeft\"\r\n [class.x-table-scroll-top]=\"getScrollTop\"\r\n [class.x-table-bordered]=\"bordered\"\r\n [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n <x-table-head\r\n *ngIf=\"showHeader\"\r\n [columns]=\"columns\"\r\n [rowHeight]=\"rowHeight\"\r\n [columnTpl]=\"headColumnTpl\"\r\n [scrollYWidth]=\"scrollYWidth\"\r\n [scrollXWidth]=\"scrollXWidth\"\r\n [cellConfig]=\"cellConfig?.thead\"\r\n [table]=\"this\"\r\n ></x-table-head>\r\n <x-table-body\r\n [data]=\"tableData\"\r\n [columns]=\"columns\"\r\n [itemSize]=\"itemSize\"\r\n [rowHeight]=\"rowHeight\"\r\n [bodyHeight]=\"bodyHeight\"\r\n [columnTpl]=\"bodyColumnTpl\"\r\n [allowSelectRow]=\"allowSelectRow\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [minBufferPx]=\"minBufferPx\"\r\n [maxBufferPx]=\"maxBufferPx\"\r\n [adaptionHeight]=\"adaptionHeight\"\r\n [docPercent]=\"docPercent\"\r\n [scroll]=\"scroll\"\r\n [rowClass]=\"rowClass\"\r\n [cellConfig]=\"cellConfig?.tbody\"\r\n [(activatedRow)]=\"activatedRow\"\r\n (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n [table]=\"this\"\r\n ></x-table-body>\r\n <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n #pagination\r\n *ngIf=\"showPagination && size\"\r\n [(index)]=\"index\"\r\n [(size)]=\"size\"\r\n [(query)]=\"query\"\r\n [total]=\"total\"\r\n (indexChange)=\"change($event)\"\r\n [showEllipsis]=\"showEllipsis\"\r\n [showTotal]=\"showTotal\"\r\n [space]=\"space\"\r\n [hiddenBorder]=\"hiddenBorder\"\r\n>\r\n</x-pagination>\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{position:absolute;width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:1}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:1}.x-table>tbody tr.x-table-activated>td{background-color:#0000000d;color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:#0000000d}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table>tfoot{display:flex;flex-direction:column;justify-content:center}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left>thead .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-scroll-left>tbody .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}\n"], components: [{ type: i2$2.XLoadingComponent, selector: "x-loading, [x-loading]" }, { type: XTableHeadComponent, selector: "x-table-head", inputs: ["table"] }, { type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { type: XTableFootComponent, selector: "x-table-foot", inputs: ["table"] }, { type: i6$1.XPaginationComponent, selector: "x-pagination" }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1106
|
+
/** @nocollapse */ /** @nocollapse */ XTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XTableComponent, selector: "x-table", viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "pagination", first: true, predicate: ["pagination"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\r\n #table\r\n class=\"x-table\"\r\n [ngClass]=\"classMap\"\r\n [x-loading]=\"loading && getting\"\r\n [class.x-table-scroll-left]=\"getScrollLeft\"\r\n [class.x-table-scroll-top]=\"getScrollTop\"\r\n [class.x-table-bordered]=\"bordered\"\r\n [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n <x-table-head\r\n *ngIf=\"showHeader\"\r\n [columns]=\"columns\"\r\n [rowHeight]=\"rowHeight\"\r\n [columnTpl]=\"headColumnTpl\"\r\n [scrollYWidth]=\"scrollYWidth\"\r\n [scrollXWidth]=\"scrollXWidth\"\r\n [cellConfig]=\"cellConfig?.thead\"\r\n [table]=\"this\"\r\n ></x-table-head>\r\n <x-table-body\r\n [data]=\"treeTable ? treeTableData : tableData\"\r\n [columns]=\"columns\"\r\n [itemSize]=\"itemSize\"\r\n [rowHeight]=\"rowHeight\"\r\n [bodyHeight]=\"bodyHeight\"\r\n [columnTpl]=\"bodyColumnTpl\"\r\n [allowSelectRow]=\"allowSelectRow\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [minBufferPx]=\"minBufferPx\"\r\n [maxBufferPx]=\"maxBufferPx\"\r\n [adaptionHeight]=\"adaptionHeight\"\r\n [docPercent]=\"docPercent\"\r\n [scroll]=\"scroll\"\r\n [rowClass]=\"rowClass\"\r\n [cellConfig]=\"cellConfig?.tbody\"\r\n [expandedAll]=\"expandedAll\"\r\n [expandTpl]=\"expandTpl\"\r\n [(activatedRow)]=\"activatedRow\"\r\n (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n [table]=\"this\"\r\n ></x-table-body>\r\n <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n #pagination\r\n *ngIf=\"showPagination && size\"\r\n [(index)]=\"index\"\r\n [(size)]=\"size\"\r\n [(query)]=\"query\"\r\n [total]=\"total\"\r\n (indexChange)=\"change($event)\"\r\n [showEllipsis]=\"showEllipsis\"\r\n [showTotal]=\"showTotal\"\r\n [space]=\"space\"\r\n [hiddenBorder]=\"hiddenBorder\"\r\n>\r\n</x-pagination>\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{position:absolute;width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:1}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:1}.x-table>tbody tr>td>x-button .x-icon{transition:var(--x-animation-duration-base)}.x-table>tbody tr>td>x-button.is-leaf{visibility:hidden}.x-table>tbody tr>td>x-button.is-expanded .x-icon{transform:rotate(90deg)}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-background-a200);color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:var(--x-background-a200)}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table>tfoot{display:flex;flex-direction:column;justify-content:center}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left>thead .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-scroll-left>tbody .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-expand{margin-right:.5rem}.x-table-expandTpl{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-expandTpl>tr{display:block!important;height:inherit!important}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}\n"], components: [{ type: i2$2.XLoadingComponent, selector: "x-loading, [x-loading]" }, { type: XTableHeadComponent, selector: "x-table-head", inputs: ["table"] }, { type: XTableBodyComponent, selector: "x-table-body", inputs: ["table"] }, { type: XTableFootComponent, selector: "x-table-foot", inputs: ["table"] }, { type: i6$1.XPaginationComponent, selector: "x-pagination" }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1008
1107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XTableComponent, decorators: [{
|
|
1009
1108
|
type: Component,
|
|
1010
|
-
args: [{ selector: `${XTablePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n #table\r\n class=\"x-table\"\r\n [ngClass]=\"classMap\"\r\n [x-loading]=\"loading && getting\"\r\n [class.x-table-scroll-left]=\"getScrollLeft\"\r\n [class.x-table-scroll-top]=\"getScrollTop\"\r\n [class.x-table-bordered]=\"bordered\"\r\n [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n <x-table-head\r\n *ngIf=\"showHeader\"\r\n [columns]=\"columns\"\r\n [rowHeight]=\"rowHeight\"\r\n [columnTpl]=\"headColumnTpl\"\r\n [scrollYWidth]=\"scrollYWidth\"\r\n [scrollXWidth]=\"scrollXWidth\"\r\n [cellConfig]=\"cellConfig?.thead\"\r\n [table]=\"this\"\r\n ></x-table-head>\r\n <x-table-body\r\n [data]=\"tableData\"\r\n [columns]=\"columns\"\r\n [itemSize]=\"itemSize\"\r\n [rowHeight]=\"rowHeight\"\r\n [bodyHeight]=\"bodyHeight\"\r\n [columnTpl]=\"bodyColumnTpl\"\r\n [allowSelectRow]=\"allowSelectRow\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [minBufferPx]=\"minBufferPx\"\r\n [maxBufferPx]=\"maxBufferPx\"\r\n [adaptionHeight]=\"adaptionHeight\"\r\n [docPercent]=\"docPercent\"\r\n [scroll]=\"scroll\"\r\n [rowClass]=\"rowClass\"\r\n [cellConfig]=\"cellConfig?.tbody\"\r\n [(activatedRow)]=\"activatedRow\"\r\n (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n [table]=\"this\"\r\n ></x-table-body>\r\n <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n #pagination\r\n *ngIf=\"showPagination && size\"\r\n [(index)]=\"index\"\r\n [(size)]=\"size\"\r\n [(query)]=\"query\"\r\n [total]=\"total\"\r\n (indexChange)=\"change($event)\"\r\n [showEllipsis]=\"showEllipsis\"\r\n [showTotal]=\"showTotal\"\r\n [space]=\"space\"\r\n [hiddenBorder]=\"hiddenBorder\"\r\n>\r\n</x-pagination>\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{position:absolute;width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:1}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:1}.x-table>tbody tr.x-table-activated>td{background-color:#0000000d;color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:#0000000d}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table>tfoot{display:flex;flex-direction:column;justify-content:center}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left>thead .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-scroll-left>tbody .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}\n"] }]
|
|
1109
|
+
args: [{ selector: `${XTablePrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table\r\n #table\r\n class=\"x-table\"\r\n [ngClass]=\"classMap\"\r\n [x-loading]=\"loading && getting\"\r\n [class.x-table-scroll-left]=\"getScrollLeft\"\r\n [class.x-table-scroll-top]=\"getScrollTop\"\r\n [class.x-table-bordered]=\"bordered\"\r\n [class.x-table-td-adaption-height]=\"rowHeight == 0\"\r\n [class.x-table-cell-config]=\"cellConfig\"\r\n>\r\n <x-table-head\r\n *ngIf=\"showHeader\"\r\n [columns]=\"columns\"\r\n [rowHeight]=\"rowHeight\"\r\n [columnTpl]=\"headColumnTpl\"\r\n [scrollYWidth]=\"scrollYWidth\"\r\n [scrollXWidth]=\"scrollXWidth\"\r\n [cellConfig]=\"cellConfig?.thead\"\r\n [table]=\"this\"\r\n ></x-table-head>\r\n <x-table-body\r\n [data]=\"treeTable ? treeTableData : tableData\"\r\n [columns]=\"columns\"\r\n [itemSize]=\"itemSize\"\r\n [rowHeight]=\"rowHeight\"\r\n [bodyHeight]=\"bodyHeight\"\r\n [columnTpl]=\"bodyColumnTpl\"\r\n [allowSelectRow]=\"allowSelectRow\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [minBufferPx]=\"minBufferPx\"\r\n [maxBufferPx]=\"maxBufferPx\"\r\n [adaptionHeight]=\"adaptionHeight\"\r\n [docPercent]=\"docPercent\"\r\n [scroll]=\"scroll\"\r\n [rowClass]=\"rowClass\"\r\n [cellConfig]=\"cellConfig?.tbody\"\r\n [expandedAll]=\"expandedAll\"\r\n [expandTpl]=\"expandTpl\"\r\n [(activatedRow)]=\"activatedRow\"\r\n (activatedRowChange)=\"activatedRowChange.emit($event)\"\r\n [table]=\"this\"\r\n ></x-table-body>\r\n <x-table-foot [table]=\"this\"></x-table-foot>\r\n</table>\r\n<x-pagination\r\n #pagination\r\n *ngIf=\"showPagination && size\"\r\n [(index)]=\"index\"\r\n [(size)]=\"size\"\r\n [(query)]=\"query\"\r\n [total]=\"total\"\r\n (indexChange)=\"change($event)\"\r\n [showEllipsis]=\"showEllipsis\"\r\n [showTotal]=\"showTotal\"\r\n [space]=\"space\"\r\n [hiddenBorder]=\"hiddenBorder\"\r\n>\r\n</x-pagination>\r\n", styles: [".x-table{margin:0;padding:0;display:flex;flex-direction:column;border-collapse:collapse;width:100%;border:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead{position:relative;overflow:hidden;display:block;background-color:var(--x-background);min-height:42px}.x-table>thead>tr{position:absolute;width:100%;display:flex;min-height:42px}.x-table>thead>tr>th{display:flex;align-items:center;flex:1;position:relative;font-weight:600;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>thead>tr>th>a{display:inline-flex;align-items:center;color:var(--x-text-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-table>thead>tr>th.x-table-sticky{position:sticky;z-index:1}.x-table>thead>tr>th .x-table-drag-width{position:absolute;height:100%;width:.1875rem;right:-.125rem;cursor:ew-resize;transition:background-color var(--x-animation-duration-fast);z-index:1}.x-table>thead>tr>th .x-table-drag-width:hover{background-color:var(--x-primary)}.x-table>tbody{display:block;border-top:none;position:relative;min-height:7rem}.x-table>tbody tr{display:flex}.x-table>tbody tr>td{display:flex;align-items:center;position:relative;justify-content:space-between;overflow:hidden;background-color:var(--x-background);border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table>tbody tr>td>div{flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x-table>tbody tr>td.x-table-sticky{position:sticky;z-index:1}.x-table>tbody tr>td>x-button .x-icon{transition:var(--x-animation-duration-base)}.x-table>tbody tr>td>x-button.is-leaf{visibility:hidden}.x-table>tbody tr>td>x-button.is-expanded .x-icon{transform:rotate(90deg)}.x-table>tbody tr.x-table-activated>td{background-color:var(--x-background-a200);color:var(--x-primary)}.x-table>tbody tr:hover>td{background-color:var(--x-background-a200)}.x-table>tbody tr:last-child{border-bottom:none}.x-table>tbody x-empty{position:absolute;top:0;width:100%;padding:calc(var(--x-font-size) * 2)}.x-table>tfoot{display:flex;flex-direction:column;justify-content:center}.x-table-sort{cursor:pointer;transition:transform .2s}.x-table-sort:hover{color:var(--x-text-300)}.x-table-sort:active{transform:translate(1px,1px)}.x-table-sort-icon.x-icon{margin-left:.25rem;display:none;font-size:1rem;transform:rotate(90deg) rotateY(180deg);transition:.3s}.x-table-sort-icon.x-icon.x-table-icon-up,.x-table-sort-icon.x-icon.x-table-icon-down{display:inherit}.x-table-sort-icon.x-icon.x-table-icon-down{transform:rotate(90deg)}.x-table-scroll-top>thead{box-shadow:0 var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);z-index:1}.x-table-scroll-left>thead .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-scroll-left>tbody .x-table-sticky{box-shadow:var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-width) var(--x-box-shadow-light-color);border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-td-adaption-height>tbody tr>td{overflow:inherit}.x-table-td-adaption-height>tbody tr>td>div{white-space:inherit;text-overflow:inherit;overflow:inherit}.x-table-bordered>thead>tr>th,.x-table-bordered>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border);padding-left:calc(var(--x-font-size) / 2)}.x-table-bordered>thead>tr>th:last-child,.x-table-bordered>tbody tr>td:last-child{border-right:none}.x-table-cell-config>thead tr,.x-table-cell-config>tbody tr{display:grid;grid-auto-flow:row;height:100%}.x-table-cell-config>thead>tr>th,.x-table-cell-config>tbody tr>td{border-right:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-cell-config>thead>tr>th:last-child,.x-table-cell-config>tbody tr>td:last-child{border-right:none}.x-table-expand{margin-right:.5rem}.x-table-expandTpl{border-bottom:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-table-expandTpl>tr{display:block!important;height:inherit!important}.x-table-row-size-big>thead>tr>th,.x-table-row-size-big>tbody tr>td{padding:calc(var(--x-font-size) / 5 * 4) calc(var(--x-font-size) * 5 / 4) calc(var(--x-font-size) / 5 * 4) 0}.x-table-row-size-big>thead>tr>th:first-child,.x-table-row-size-big>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-bordered>thead>tr>th,.x-table-row-size-big.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-big.x-table-cell-config>thead>tr>th,.x-table-row-size-big.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 5 / 4)}.x-table-row-size-large>thead>tr>th,.x-table-row-size-large>tbody tr>td{padding:calc(var(--x-font-size) / 4 * 3) calc(var(--x-font-size) * 4 / 3) calc(var(--x-font-size) / 4 * 3) 0}.x-table-row-size-large>thead>tr>th:first-child,.x-table-row-size-large>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-bordered>thead>tr>th,.x-table-row-size-large.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-large.x-table-cell-config>thead>tr>th,.x-table-row-size-large.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 4 / 3)}.x-table-row-size-medium>thead>tr>th,.x-table-row-size-medium>tbody tr>td{padding:calc(var(--x-font-size) / 2) var(--x-font-size) calc(var(--x-font-size) / 2) 0}.x-table-row-size-medium>thead>tr>th:first-child,.x-table-row-size-medium>tbody tr>td:first-child{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-bordered>thead>tr>th,.x-table-row-size-medium.x-table-bordered>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-medium.x-table-cell-config>thead>tr>th,.x-table-row-size-medium.x-table-cell-config>tbody tr>td{padding-left:var(--x-font-size)}.x-table-row-size-small>thead>tr>th,.x-table-row-size-small>tbody tr>td{padding:calc(var(--x-font-size) / 3) calc(var(--x-font-size) * 2 / 3) calc(var(--x-font-size) / 3) 0}.x-table-row-size-small>thead>tr>th:first-child,.x-table-row-size-small>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-bordered>thead>tr>th,.x-table-row-size-small.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-small.x-table-cell-config>thead>tr>th,.x-table-row-size-small.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) * 2 / 3)}.x-table-row-size-mini>thead>tr>th,.x-table-row-size-mini>tbody tr>td{padding:calc(var(--x-font-size) / 4) calc(var(--x-font-size) / 2) calc(var(--x-font-size) / 4) 0}.x-table-row-size-mini>thead>tr>th:first-child,.x-table-row-size-mini>tbody tr>td:first-child{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-bordered>thead>tr>th,.x-table-row-size-mini.x-table-bordered>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}.x-table-row-size-mini.x-table-cell-config>thead>tr>th,.x-table-row-size-mini.x-table-cell-config>tbody tr>td{padding-left:calc(var(--x-font-size) / 2)}x-table{width:100%;display:flex;flex-direction:column}x-table .x-pagination{padding-top:calc(var(--x-font-size) / 2)}x-table.x-table-top-left{flex-direction:column-reverse}x-table.x-table-top-left .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-center{flex-direction:column-reverse;align-items:center}x-table.x-table-top-center .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-top-right{flex-direction:column-reverse;align-items:flex-end}x-table.x-table-top-right .x-pagination{padding-top:0;padding-bottom:calc(var(--x-font-size) / 2)}x-table.x-table-bottom-center{align-items:center}x-table.x-table-bottom-right{align-items:flex-end}\n"] }]
|
|
1011
1110
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.XConfigService }]; }, propDecorators: { table: [{
|
|
1012
1111
|
type: ViewChild,
|
|
1013
1112
|
args: ['table']
|
|
@@ -1033,6 +1132,7 @@ class XTableModule {
|
|
|
1033
1132
|
XOutletModule,
|
|
1034
1133
|
XCheckboxModule,
|
|
1035
1134
|
XIconModule,
|
|
1135
|
+
XButtonModule,
|
|
1036
1136
|
ScrollingModule,
|
|
1037
1137
|
XEmptyModule,
|
|
1038
1138
|
XLoadingModule], exports: [XTableComponent] });
|
|
@@ -1043,6 +1143,7 @@ class XTableModule {
|
|
|
1043
1143
|
XOutletModule,
|
|
1044
1144
|
XCheckboxModule,
|
|
1045
1145
|
XIconModule,
|
|
1146
|
+
XButtonModule,
|
|
1046
1147
|
ScrollingModule,
|
|
1047
1148
|
XEmptyModule,
|
|
1048
1149
|
XLoadingModule
|
|
@@ -1069,6 +1170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
1069
1170
|
XOutletModule,
|
|
1070
1171
|
XCheckboxModule,
|
|
1071
1172
|
XIconModule,
|
|
1173
|
+
XButtonModule,
|
|
1072
1174
|
ScrollingModule,
|
|
1073
1175
|
XEmptyModule,
|
|
1074
1176
|
XLoadingModule
|