@coolon/angular-ui-powerups 3.12.0 → 3.13.0
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/CHANGELOG.md +7 -0
- package/assets/table.scss +6 -0
- package/bundles/coolon-angular-ui-powerups.umd.js +30 -9
- package/bundles/coolon-angular-ui-powerups.umd.js.map +1 -1
- package/bundles/coolon-angular-ui-powerups.umd.min.js +1 -1
- package/bundles/coolon-angular-ui-powerups.umd.min.js.map +1 -1
- package/coolon-angular-ui-powerups.metadata.json +1 -1
- package/esm2015/lib/components/card-container/card-container.component.js +1 -1
- package/esm2015/lib/components/card-container/card-container.component.metadata.json +1 -1
- package/esm2015/lib/components/components.module.ngfactory.js.map +1 -1
- package/esm2015/lib/components/resize-aware.component.js +3 -3
- package/esm2015/lib/components/resize-aware.component.js.map +1 -1
- package/esm2015/lib/components/resize-aware.component.metadata.json +1 -1
- package/esm2015/lib/components/table/table.component.js +24 -7
- package/esm2015/lib/components/table/table.component.js.map +1 -1
- package/esm2015/lib/components/table/table.component.metadata.json +1 -1
- package/fesm2015/coolon-angular-ui-powerups.js +26 -9
- package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
- package/lib/components/resize-aware.component.d.ts +1 -1
- package/lib/components/table/table.component.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate, __metadata } from "tslib";
|
|
2
|
-
import { Component, ElementRef, Input, NgZone } from '@angular/core';
|
|
3
|
-
import { Dsl, MutableValueModel, TrackExternal } from '@coolon/pectin';
|
|
2
|
+
import { Component, ElementRef, HostBinding, Input, NgZone } from '@angular/core';
|
|
3
|
+
import { Dsl, MutableValueModel, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
|
|
4
4
|
import { ResizeAwareComponent } from '../resize-aware.component';
|
|
5
5
|
import { AbstractTableModel } from './abstract-table-model';
|
|
6
6
|
import { CustomTemplateColumnModel } from './column-model';
|
|
@@ -39,16 +39,22 @@ export class TableComponent extends ResizeAwareComponent {
|
|
|
39
39
|
// TODO: support user defined header and row heights via css vars.
|
|
40
40
|
this.headerHeight = new MutableValueModel(56);
|
|
41
41
|
this.rowHeight = new MutableValueModel(48);
|
|
42
|
-
const { chain } = Dsl.disposeWith(this);
|
|
42
|
+
const { chain, when } = Dsl.disposeWith(this);
|
|
43
|
+
const actualHeaderHeight = chain(this.showHeaderModel).map(show => {
|
|
44
|
+
return show ? this.headerHeight.value : 0;
|
|
45
|
+
}, { dependsOn: this.headerHeight });
|
|
43
46
|
this.visibleRowCount = chain(this.boundsModel).map(bounds => {
|
|
44
47
|
// TODO: this doesn't take into account any css styling adjustments etc. Will invistigate if it's an issue.
|
|
45
|
-
const rawRowCount = (bounds.height -
|
|
48
|
+
const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;
|
|
46
49
|
return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
|
|
47
50
|
}, {
|
|
48
|
-
dependsOn: [
|
|
51
|
+
dependsOn: [actualHeaderHeight, this.rowHeight],
|
|
49
52
|
postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)
|
|
50
53
|
});
|
|
51
54
|
}
|
|
55
|
+
get hideHeader() {
|
|
56
|
+
return !this.showHeader;
|
|
57
|
+
}
|
|
52
58
|
ngOnInit() {
|
|
53
59
|
const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
|
|
54
60
|
this.columns = chain(this.tableModel.columns);
|
|
@@ -72,7 +78,7 @@ TableComponent.decorators = [
|
|
|
72
78
|
{ type: Component, args: [{
|
|
73
79
|
selector: 'aup-table',
|
|
74
80
|
template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\">\n <aup-table-header-cell-renderer [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-header-cell-renderer>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n >\n <aup-table-cell-renderer [column]=\"column\"\n [row]=\"row\"\n [tableModel]=\"tableModel\"\n [editSession]=\"tableModel.getEditSessionFor(row)\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-cell-renderer>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n ></tr>\n\n</table>\n",
|
|
75
|
-
styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{
|
|
81
|
+
styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}"]
|
|
76
82
|
},] }
|
|
77
83
|
];
|
|
78
84
|
TableComponent.ctorParameters = () => [
|
|
@@ -80,10 +86,21 @@ TableComponent.ctorParameters = () => [
|
|
|
80
86
|
{ type: NgZone }
|
|
81
87
|
];
|
|
82
88
|
TableComponent.propDecorators = {
|
|
83
|
-
tableModel: [{ type: Input }]
|
|
89
|
+
tableModel: [{ type: Input }],
|
|
90
|
+
showHeaderModel: [{ type: Input }],
|
|
91
|
+
showHeader: [{ type: Input }],
|
|
92
|
+
hideHeader: [{ type: HostBinding, args: ["class.hide-header",] }]
|
|
84
93
|
};
|
|
85
94
|
__decorate([
|
|
86
95
|
TrackExternal(),
|
|
87
96
|
__metadata("design:type", AbstractTableModel)
|
|
88
97
|
], TableComponent.prototype, "tableModel", void 0);
|
|
98
|
+
__decorate([
|
|
99
|
+
TrackExternal({ defaultValue: true }),
|
|
100
|
+
__metadata("design:type", ValueModel)
|
|
101
|
+
], TableComponent.prototype, "showHeaderModel", void 0);
|
|
102
|
+
__decorate([
|
|
103
|
+
StoreInValueModel("showHeaderModel"),
|
|
104
|
+
__metadata("design:type", Boolean)
|
|
105
|
+
], TableComponent.prototype, "showHeader", void 0);
|
|
89
106
|
//# sourceMappingURL=table.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/table/table.component.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/table/table.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ElementRef,\n HostBinding,\n Input,\n NgZone,\n OnInit,\n TemplateRef,\n ViewContainerRef\n} from '@angular/core';\nimport {\n Dsl,\n ListModelChain,\n MapModelChain,\n MutableValueModel,\n StoreInValueModel,\n TrackExternal,\n ValueModel\n} from '@coolon/pectin';\nimport { ResizeAwareComponent } from '../resize-aware.component';\nimport { AbstractTableModel } from './abstract-table-model';\nimport { ColumnModel, CustomTemplateColumnModel } from './column-model';\n\n/**\n * Create your model:\n * @example\n * this.heroTableModel = TableModel.fromList(heroList, table => {\n * table.pluck(\"firstName\");\n * table.pluck(\"lastName\");\n * table.addCustomColumn(\"fullName\", hero => `${hero.firstName} ${hero.lastName}`);\n * });\n *\n * Create your table\n * @example\n * <aup-table [tableModel]=\"heroTableModel\"></aup-table>\n *\n * Styling\n * @example\n * aup-table {\n * --column-gap: 10px; // defaults to 24px\n * --row-hover-background-color, rgba(0, 0, 0, 0.05)\n * --row-selected-background-color: rebeccapurple; // defaults to transparent\n * aup-table-cell-renderer {\n * &:first-column {\n * // do stuff\n * }\n * &:last-column {\n * // do stuff\n * }\n * }\n * }\n */\n@Component({\n selector: 'aup-table',\n templateUrl: './table.component.html',\n styleUrls: ['./table.component.scss']\n})\nexport class TableComponent<Row> extends ResizeAwareComponent implements OnInit {\n\n @Input()\n @TrackExternal()\n tableModel: AbstractTableModel<Row>;\n\n @Input()\n @TrackExternal({defaultValue: true})\n showHeaderModel: ValueModel<boolean>;\n\n @Input()\n @StoreInValueModel(\"showHeaderModel\")\n showHeader: boolean;\n\n columns: ListModelChain<ColumnModel<Row>>;\n columnIds: ListModelChain<string>;\n private columnsById: MapModelChain<string, ColumnModel<Row>>;\n\n readonly visibleRowCount: ValueModel<number>;\n\n // TODO: support user defined header and row heights via css vars.\n private readonly headerHeight = new MutableValueModel<number>(56);\n private readonly rowHeight = new MutableValueModel<number>(48);\n\n constructor(elementRef: ElementRef, ngZone: NgZone) {\n super(elementRef, ngZone);\n const { chain, when } = Dsl.disposeWith(this);\n\n const actualHeaderHeight = chain(this.showHeaderModel).map( show => {\n return show ? this.headerHeight.value : 0;\n }, {dependsOn: this.headerHeight});\n\n this.visibleRowCount = chain(this.boundsModel).map(bounds => {\n // TODO: this doesn't take into account any css styling adjustments etc. Will invistigate if it's an issue.\n const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;\n return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);\n }, {\n dependsOn: [actualHeaderHeight, this.rowHeight],\n postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)\n });\n }\n\n @HostBinding(\"class.hide-header\")\n get hideHeader() {\n return !this.showHeader;\n }\n\n\n ngOnInit(): void {\n const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n this.columns = chain(this.tableModel.columns);\n this.columnIds = chain(this.columns).pluck('columnId');\n this.columnsById = chain(this.columns).indexBy('columnId');\n }\n\n isEditing(row: Row): boolean {\n return !!this.tableModel.getEditSessionFor(row);\n }\n\n registerColumnTemplate(columnId: string, templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, fillCell: boolean, padChild: boolean) {\n const column = this.columnsById.get(columnId);\n if (column instanceof CustomTemplateColumnModel) {\n column.setTemplate(templateRef, viewContainer, fillCell, padChild);\n }\n }\n\n notifyCellClicked(columnModel: ColumnModel<Row>, row: Row) {\n this.tableModel._notifyCellClicked(columnModel, row);\n }\n\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../resize-aware.component","name":"ResizeAwareComponent","line":
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../resize-aware.component","name":"ResizeAwareComponent","line":57,"character":41},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":52,"character":1},"arguments":[{"selector":"aup-table","template":"<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\">\n <aup-table-header-cell-renderer [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-header-cell-renderer>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n >\n <aup-table-cell-renderer [column]=\"column\"\n [row]=\"row\"\n [tableModel]=\"tableModel\"\n [editSession]=\"tableModel.getEditSessionFor(row)\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-cell-renderer>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n ></tr>\n\n</table>\n","styles":[":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}"]}]}],"members":{"tableModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":60,"character":3}}]}],"showHeaderModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":64,"character":3},"arguments":[{"defaultValue":true}]}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":68,"character":3},"arguments":["showHeaderModel"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":81,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":81,"character":46}]}],"hideHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":99,"character":3},"arguments":["class.hide-header"]}]}],"ngOnInit":[{"__symbolic":"method"}],"isEditing":[{"__symbolic":"method"}],"registerColumnTemplate":[{"__symbolic":"method"}],"notifyCellClicked":[{"__symbolic":"method"}]}}}}]
|
|
@@ -520,7 +520,7 @@ CardContainerComponent.decorators = [
|
|
|
520
520
|
{ type: Component, args: [{
|
|
521
521
|
selector: 'aup-card-container',
|
|
522
522
|
template: "<div class=\"card-container\">\n <ng-content></ng-content>\n\n <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n </div>\n\n <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n </div>\n\n</div>\n",
|
|
523
|
-
styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px;margin-bottom:var(--default-padding)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
|
|
523
|
+
styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px;margin-bottom:var(--default-padding)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table.hide-header .mat-table thead{display:none}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
|
|
524
524
|
},] }
|
|
525
525
|
];
|
|
526
526
|
CardContainerComponent.ctorParameters = () => [];
|
|
@@ -1865,10 +1865,10 @@ class ResizeAwareComponent extends DisposableComponent {
|
|
|
1865
1865
|
this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
|
|
1866
1866
|
}
|
|
1867
1867
|
ngAfterViewInit() {
|
|
1868
|
-
this.
|
|
1868
|
+
this._updateBounds();
|
|
1869
1869
|
const element = this.elementRef.nativeElement;
|
|
1870
1870
|
const ro = new ResizeObserver((entries, observer) => {
|
|
1871
|
-
this.ngZone.run(() => this.
|
|
1871
|
+
this.ngZone.run(() => this._updateBounds());
|
|
1872
1872
|
});
|
|
1873
1873
|
ro.observe(element);
|
|
1874
1874
|
this.onDispose(() => ro.disconnect());
|
|
@@ -1886,7 +1886,7 @@ class ResizeAwareComponent extends DisposableComponent {
|
|
|
1886
1886
|
get bounds() {
|
|
1887
1887
|
return this._boundsModel.value;
|
|
1888
1888
|
}
|
|
1889
|
-
|
|
1889
|
+
_updateBounds() {
|
|
1890
1890
|
this._boundsModel.value = Bounds.ofElement(this.nativeElement);
|
|
1891
1891
|
}
|
|
1892
1892
|
}
|
|
@@ -2660,16 +2660,22 @@ class TableComponent extends ResizeAwareComponent {
|
|
|
2660
2660
|
// TODO: support user defined header and row heights via css vars.
|
|
2661
2661
|
this.headerHeight = new MutableValueModel(56);
|
|
2662
2662
|
this.rowHeight = new MutableValueModel(48);
|
|
2663
|
-
const { chain } = Dsl.disposeWith(this);
|
|
2663
|
+
const { chain, when } = Dsl.disposeWith(this);
|
|
2664
|
+
const actualHeaderHeight = chain(this.showHeaderModel).map(show => {
|
|
2665
|
+
return show ? this.headerHeight.value : 0;
|
|
2666
|
+
}, { dependsOn: this.headerHeight });
|
|
2664
2667
|
this.visibleRowCount = chain(this.boundsModel).map(bounds => {
|
|
2665
2668
|
// TODO: this doesn't take into account any css styling adjustments etc. Will invistigate if it's an issue.
|
|
2666
|
-
const rawRowCount = (bounds.height -
|
|
2669
|
+
const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;
|
|
2667
2670
|
return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
|
|
2668
2671
|
}, {
|
|
2669
|
-
dependsOn: [
|
|
2672
|
+
dependsOn: [actualHeaderHeight, this.rowHeight],
|
|
2670
2673
|
postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)
|
|
2671
2674
|
});
|
|
2672
2675
|
}
|
|
2676
|
+
get hideHeader() {
|
|
2677
|
+
return !this.showHeader;
|
|
2678
|
+
}
|
|
2673
2679
|
ngOnInit() {
|
|
2674
2680
|
const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
|
|
2675
2681
|
this.columns = chain(this.tableModel.columns);
|
|
@@ -2693,7 +2699,7 @@ TableComponent.decorators = [
|
|
|
2693
2699
|
{ type: Component, args: [{
|
|
2694
2700
|
selector: 'aup-table',
|
|
2695
2701
|
template: "<table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n matColumnDef=\"{{column.columnId}}\">\n <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\">\n <aup-table-header-cell-renderer [column]=\"column\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-header-cell-renderer>\n </th>\n <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n [class.flex]=\"column.isFlex()\"\n >\n <aup-table-cell-renderer [column]=\"column\"\n [row]=\"row\"\n [tableModel]=\"tableModel\"\n [editSession]=\"tableModel.getEditSessionFor(row)\"\n [attr.column-index]=\"index\"\n [attr.column-id]=\"column.columnId\"\n [class.first-column]=\"first\"\n [class.last-column]=\"last\"\n ></aup-table-cell-renderer>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n ></tr>\n\n</table>\n",
|
|
2696
|
-
styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{
|
|
2702
|
+
styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}"]
|
|
2697
2703
|
},] }
|
|
2698
2704
|
];
|
|
2699
2705
|
TableComponent.ctorParameters = () => [
|
|
@@ -2701,12 +2707,23 @@ TableComponent.ctorParameters = () => [
|
|
|
2701
2707
|
{ type: NgZone }
|
|
2702
2708
|
];
|
|
2703
2709
|
TableComponent.propDecorators = {
|
|
2704
|
-
tableModel: [{ type: Input }]
|
|
2710
|
+
tableModel: [{ type: Input }],
|
|
2711
|
+
showHeaderModel: [{ type: Input }],
|
|
2712
|
+
showHeader: [{ type: Input }],
|
|
2713
|
+
hideHeader: [{ type: HostBinding, args: ["class.hide-header",] }]
|
|
2705
2714
|
};
|
|
2706
2715
|
__decorate([
|
|
2707
2716
|
TrackExternal(),
|
|
2708
2717
|
__metadata("design:type", AbstractTableModel)
|
|
2709
2718
|
], TableComponent.prototype, "tableModel", void 0);
|
|
2719
|
+
__decorate([
|
|
2720
|
+
TrackExternal({ defaultValue: true }),
|
|
2721
|
+
__metadata("design:type", ValueModel)
|
|
2722
|
+
], TableComponent.prototype, "showHeaderModel", void 0);
|
|
2723
|
+
__decorate([
|
|
2724
|
+
StoreInValueModel("showHeaderModel"),
|
|
2725
|
+
__metadata("design:type", Boolean)
|
|
2726
|
+
], TableComponent.prototype, "showHeader", void 0);
|
|
2710
2727
|
|
|
2711
2728
|
class ColumnTemplateDirective {
|
|
2712
2729
|
constructor(host, templateRef, viewContainer) {
|