@ifsworld/granite-components 3.3.0 → 3.4.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/bundles/ifsworld-granite-components.umd.js +7 -6
- package/bundles/ifsworld-granite-components.umd.js.map +1 -1
- package/bundles/ifsworld-granite-components.umd.min.js +1 -1
- package/bundles/ifsworld-granite-components.umd.min.js.map +1 -1
- package/esm2015/lib/table/cell/table-data-cell.component.js +4 -3
- package/esm2015/lib/table/cell/table-data-cell.component.js.map +1 -1
- package/esm2015/lib/table/cell/table-data-cell.component.metadata.json +1 -1
- package/esm2015/lib/table/cell/table-header-cell.component.js +1 -1
- package/esm2015/lib/table/cell/table-header-cell.component.metadata.json +1 -1
- package/esm2015/lib/table/table.component.js +2 -2
- package/esm2015/lib/table/table.component.js.map +1 -1
- package/esm2015/lib/table/table.component.metadata.json +1 -1
- package/fesm2015/ifsworld-granite-components.js +7 -6
- package/fesm2015/ifsworld-granite-components.js.map +1 -1
- package/ifsworld-granite-components.metadata.json +1 -1
- package/lib/table/cell/table-data-cell.component.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/core/style/_mixins.scss +10 -0
|
@@ -6,8 +6,8 @@ GraniteTableDataCellComponent.decorators = [
|
|
|
6
6
|
{ type: Component, args: [{
|
|
7
7
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
8
8
|
selector: 'cdk-cell[graniteTableDataCell]',
|
|
9
|
-
template: "<span class=\"granite-table-data-cell-static-container\">\n <ng-template\n [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n [ngTemplateOutletContext]=\"{\n data: value,\n rowIndex: rowIndex,\n columnIndex: columnIndex,\n column: column\n }\"\n ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n <ng-container [ngSwitch]=\"staticType\">\n <ng-container *ngSwitchCase=\"'badge'\">\n <granite-badge>{{ value }}</granite-badge>\n </ng-container>\n <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n </ng-container>\n</ng-template>\n",
|
|
10
|
-
styles: [".granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:
|
|
9
|
+
template: "<span class=\"granite-table-data-cell-static-container\">\n <ng-template\n [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n [ngTemplateOutletContext]=\"{\n data: value,\n rowIndex: rowIndex,\n columnIndex: columnIndex,\n column: column,\n row: row\n }\"\n ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n <ng-container [ngSwitch]=\"staticType\">\n <ng-container *ngSwitchCase=\"'badge'\">\n <granite-badge>{{ value }}</granite-badge>\n </ng-container>\n <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n </ng-container>\n</ng-template>\n",
|
|
10
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}"]
|
|
11
11
|
},] }
|
|
12
12
|
];
|
|
13
13
|
GraniteTableDataCellComponent.propDecorators = {
|
|
@@ -15,6 +15,7 @@ GraniteTableDataCellComponent.propDecorators = {
|
|
|
15
15
|
staticType: [{ type: Input }],
|
|
16
16
|
rowIndex: [{ type: Input }],
|
|
17
17
|
columnIndex: [{ type: Input }],
|
|
18
|
-
tableCellTemplateRef: [{ type: Input }]
|
|
18
|
+
tableCellTemplateRef: [{ type: Input }],
|
|
19
|
+
row: [{ type: Input }]
|
|
19
20
|
};
|
|
20
21
|
//# sourceMappingURL=table-data-cell.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-data-cell.component.js","sourceRoot":"","sources":["../../../../../../../libs/granite-components/src/lib/table/cell/table-data-cell.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAUrC,MAAM,OAAO,6BAA8B,SAAQ,WAAW;;;YAN7D,SAAS,SAAC;gBACT,8DAA8D;gBAC9D,QAAQ,EAAE,gCAAgC;gBAC1C,
|
|
1
|
+
{"version":3,"file":"table-data-cell.component.js","sourceRoot":"","sources":["../../../../../../../libs/granite-components/src/lib/table/cell/table-data-cell.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAUrC,MAAM,OAAO,6BAA8B,SAAQ,WAAW;;;YAN7D,SAAS,SAAC;gBACT,8DAA8D;gBAC9D,QAAQ,EAAE,gCAAgC;gBAC1C,ipBAA+C;;aAEhD;;;oBAEE,KAAK;yBAGL,KAAK;uBAGL,KAAK;0BAGL,KAAK;mCAIL,KAAK;kBAGL,KAAK","sourcesContent":["import { Component, Input, TemplateRef } from '@angular/core';\nimport { GraniteCell } from './cell';\n\nexport type StaticType = 'text' | 'badge';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'cdk-cell[graniteTableDataCell]',\n templateUrl: './table-data-cell.component.html',\n styleUrls: ['./table-data-cell.component.scss'],\n})\nexport class GraniteTableDataCellComponent extends GraniteCell {\n @Input()\n value: any;\n\n @Input()\n staticType: StaticType;\n\n @Input()\n rowIndex: number;\n\n @Input()\n columnIndex: number;\n\n // Custom template provided by the consumer\n @Input()\n tableCellTemplateRef: TemplateRef<any>;\n\n @Input()\n row: any;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"StaticType":{"__symbolic":"interface"},"GraniteTableDataCellComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./cell","name":"GraniteCell","line":11,"character":51},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"cdk-cell[graniteTableDataCell]","template":"<span class=\"granite-table-data-cell-static-container\">\n <ng-template\n [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n [ngTemplateOutletContext]=\"{\n data: value,\n rowIndex: rowIndex,\n columnIndex: columnIndex,\n column: column\n }\"\n ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n <ng-container [ngSwitch]=\"staticType\">\n <ng-container *ngSwitchCase=\"'badge'\">\n <granite-badge>{{ value }}</granite-badge>\n </ng-container>\n <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n </ng-container>\n</ng-template>\n","styles":[".granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"StaticType":{"__symbolic":"interface"},"GraniteTableDataCellComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./cell","name":"GraniteCell","line":11,"character":51},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"cdk-cell[graniteTableDataCell]","template":"<span class=\"granite-table-data-cell-static-container\">\n <ng-template\n [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n [ngTemplateOutletContext]=\"{\n data: value,\n rowIndex: rowIndex,\n columnIndex: columnIndex,\n column: column,\n row: row\n }\"\n ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n <ng-container [ngSwitch]=\"staticType\">\n <ng-container *ngSwitchCase=\"'badge'\">\n <granite-badge>{{ value }}</granite-badge>\n </ng-container>\n <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n </ng-container>\n</ng-template>\n","styles":[":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"staticType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"rowIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"columnIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"tableCellTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"row":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}]}}}}]
|
|
@@ -7,7 +7,7 @@ GraniteTableHeaderCellComponent.decorators = [
|
|
|
7
7
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
8
8
|
selector: 'cdk-header-cell[graniteTableHeaderCell]',
|
|
9
9
|
template: "<span class=\"granite-table-header-cell-title\">\n <ng-content></ng-content>\n</span>\n",
|
|
10
|
-
styles: [".granite-table-header-cell-title{padding:var(--granite-spacing-s);height:
|
|
10
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-header-cell-title{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}"]
|
|
11
11
|
},] }
|
|
12
12
|
];
|
|
13
13
|
//# sourceMappingURL=table-header-cell.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteTableHeaderCellComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./cell","name":"GraniteCell","line":9,"character":53},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"cdk-header-cell[graniteTableHeaderCell]","template":"<span class=\"granite-table-header-cell-title\">\n <ng-content></ng-content>\n</span>\n","styles":[".granite-table-header-cell-title{padding:var(--granite-spacing-s);height:
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"GraniteTableHeaderCellComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./cell","name":"GraniteCell","line":9,"character":53},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"cdk-header-cell[graniteTableHeaderCell]","template":"<span class=\"granite-table-header-cell-title\">\n <ng-content></ng-content>\n</span>\n","styles":[":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-header-cell-title{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}"]}]}]}}}]
|
|
@@ -14,9 +14,9 @@ export class GraniteTableComponent {
|
|
|
14
14
|
GraniteTableComponent.decorators = [
|
|
15
15
|
{ type: Component, args: [{
|
|
16
16
|
selector: 'granite-table',
|
|
17
|
-
template: "<cdk-table\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\n [trackBy]=\"trackBy\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container\n *ngFor=\"let column of columns; index as columnI\"\n [cdkColumnDef]=\"column.name\"\n >\n <!-- Cell Header -->\n <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n {{ (column.title ? column.title : column.name) | graniteTitle }}\n </cdk-header-cell>\n\n <!-- Cell Data -->\n <cdk-cell\n graniteTableDataCell\n *cdkCellDef=\"let
|
|
17
|
+
template: "<cdk-table\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\n [trackBy]=\"trackBy\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container\n *ngFor=\"let column of columns; index as columnI\"\n [cdkColumnDef]=\"column.name\"\n >\n <!-- Cell Header -->\n <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n {{ (column.title ? column.title : column.name) | graniteTitle }}\n </cdk-header-cell>\n\n <!-- Cell Data -->\n <cdk-cell\n graniteTableDataCell\n *cdkCellDef=\"let row; let rowI = dataIndex\"\n [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n [value]=\"row[column.name]\"\n [rowIndex]=\"rowI\"\n [columnIndex]=\"columnI\"\n [staticType]=\"column.staticType\"\n [column]=\"column\"\n [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n [row]=\"row\"\n ></cdk-cell>\n </ng-container>\n\n <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n <cdk-row\n *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n [attr.aria-rowindex]=\"rowI + 1\"\n ></cdk-row>\n</cdk-table>\n",
|
|
18
18
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
19
|
-
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1
|
|
19
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1;height:calc(var(--granite-spacing-m) * 2.5)}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}"]
|
|
20
20
|
},] }
|
|
21
21
|
];
|
|
22
22
|
GraniteTableComponent.propDecorators = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/table/table.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,eAAe,EACf,SAAS,EAET,uBAAuB,GACxB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,OAAO,qBAAqB;IANlC;QAcE,cAAS,GAAkB,IAAI,CAAC;QAKvB,iBAAY,GAAG,cAAc,CAAC,cAAc,CAAC;IASxD,CAAC;IAJC,kBAAkB;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;QACpD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnE,CAAC;;;YA3BF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,
|
|
1
|
+
{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../../../libs/granite-components/src/lib/table/table.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,eAAe,EACf,SAAS,EAET,uBAAuB,GACxB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,OAAO,qBAAqB;IANlC;QAcE,cAAS,GAAkB,IAAI,CAAC;QAKvB,iBAAY,GAAG,cAAc,CAAC,cAAc,CAAC;IASxD,CAAC;IAJC,kBAAkB;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;QACpD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnE,CAAC;;;YA3BF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,onCAAqC;gBAErC,eAAe,EAAE,uBAAuB,CAAC,MAAM;;aAChD;;;yBAEE,KAAK;sBAGL,KAAK;wBAGL,KAAK,SAAC,YAAY;oCAGlB,eAAe,SAAC,2BAA2B","sourcesContent":["import { DataSource } from '@angular/cdk/table';\nimport {\n Component,\n Input,\n TrackByFunction,\n ContentChildren,\n QueryList,\n AfterContentInit,\n ChangeDetectionStrategy,\n} from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { GraniteTableColumnDirective } from './column/table-column.directive';\nimport { TableConstants } from './table-constants.library';\n\ntype CdkTableDataSourceInput<T> =\n | readonly T[]\n | DataSource<T>\n | Observable<readonly T[]>;\n\n@Component({\n selector: 'granite-table',\n templateUrl: './table.component.html',\n styleUrls: ['./table.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GraniteTableComponent<T> implements AfterContentInit {\n @Input()\n dataSource: CdkTableDataSourceInput<T>;\n\n @Input()\n trackBy: TrackByFunction<T>;\n\n @Input('aria-label')\n ariaLabel: string | null = null;\n\n @ContentChildren(GraniteTableColumnDirective)\n tableColumnsComponent: QueryList<GraniteTableColumnDirective>;\n\n readonly cellIdPrefix = TableConstants.CELL_ID_PREFIX;\n\n columns: GraniteTableColumnDirective[];\n renderedColumns: string[];\n\n ngAfterContentInit(): void {\n this.columns = this.tableColumnsComponent.toArray();\n this.renderedColumns = this.columns.map((column) => column.name);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[{"__symbolic":"module","version":4,"metadata":{"GraniteTableComponent":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"granite-table","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"template":"<cdk-table\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\n [trackBy]=\"trackBy\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container\n *ngFor=\"let column of columns; index as columnI\"\n [cdkColumnDef]=\"column.name\"\n >\n <!-- Cell Header -->\n <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n {{ (column.title ? column.title : column.name) | graniteTitle }}\n </cdk-header-cell>\n\n <!-- Cell Data -->\n <cdk-cell\n graniteTableDataCell\n *cdkCellDef=\"let
|
|
1
|
+
[{"__symbolic":"module","version":4,"metadata":{"GraniteTableComponent":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"granite-table","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"template":"<cdk-table\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\n [trackBy]=\"trackBy\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container\n *ngFor=\"let column of columns; index as columnI\"\n [cdkColumnDef]=\"column.name\"\n >\n <!-- Cell Header -->\n <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n {{ (column.title ? column.title : column.name) | graniteTitle }}\n </cdk-header-cell>\n\n <!-- Cell Data -->\n <cdk-cell\n graniteTableDataCell\n *cdkCellDef=\"let row; let rowI = dataIndex\"\n [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n [value]=\"row[column.name]\"\n [rowIndex]=\"rowI\"\n [columnIndex]=\"columnI\"\n [staticType]=\"column.staticType\"\n [column]=\"column\"\n [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n [row]=\"row\"\n ></cdk-cell>\n </ng-container>\n\n <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n <cdk-row\n *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n [attr.aria-rowindex]=\"rowI + 1\"\n ></cdk-row>\n</cdk-table>\n","styles":[":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1;height:calc(var(--granite-spacing-m) * 2.5)}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}"]}]}],"members":{"dataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3},"arguments":["aria-label"]}]}],"tableColumnsComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":35,"character":3},"arguments":[{"__symbolic":"reference","module":"./column/table-column.directive","name":"GraniteTableColumnDirective","line":35,"character":19}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}]}}}}]
|
|
@@ -2428,9 +2428,9 @@ class GraniteTableComponent {
|
|
|
2428
2428
|
GraniteTableComponent.decorators = [
|
|
2429
2429
|
{ type: Component, args: [{
|
|
2430
2430
|
selector: 'granite-table',
|
|
2431
|
-
template: "<cdk-table\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\n [trackBy]=\"trackBy\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container\n *ngFor=\"let column of columns; index as columnI\"\n [cdkColumnDef]=\"column.name\"\n >\n <!-- Cell Header -->\n <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n {{ (column.title ? column.title : column.name) | graniteTitle }}\n </cdk-header-cell>\n\n <!-- Cell Data -->\n <cdk-cell\n graniteTableDataCell\n *cdkCellDef=\"let
|
|
2431
|
+
template: "<cdk-table\n [dataSource]=\"dataSource\"\n multiTemplateDataRows\n [trackBy]=\"trackBy\"\n [attr.aria-label]=\"ariaLabel\"\n>\n <ng-container\n *ngFor=\"let column of columns; index as columnI\"\n [cdkColumnDef]=\"column.name\"\n >\n <!-- Cell Header -->\n <cdk-header-cell *cdkHeaderCellDef graniteTableHeaderCell>\n {{ (column.title ? column.title : column.name) | graniteTitle }}\n </cdk-header-cell>\n\n <!-- Cell Data -->\n <cdk-cell\n graniteTableDataCell\n *cdkCellDef=\"let row; let rowI = dataIndex\"\n [id]=\"cellIdPrefix + '-' + rowI + '-' + columnI\"\n [value]=\"row[column.name]\"\n [rowIndex]=\"rowI\"\n [columnIndex]=\"columnI\"\n [staticType]=\"column.staticType\"\n [column]=\"column\"\n [tableCellTemplateRef]=\"column.tableCellTemplateRef\"\n [row]=\"row\"\n ></cdk-cell>\n </ng-container>\n\n <cdk-header-row *cdkHeaderRowDef=\"renderedColumns\"></cdk-header-row>\n <cdk-row\n *cdkRowDef=\"let row; let rowI = dataIndex; columns: renderedColumns\"\n [attr.aria-rowindex]=\"rowI + 1\"\n ></cdk-row>\n</cdk-table>\n",
|
|
2432
2432
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2433
|
-
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1
|
|
2433
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}cdk-table{flex-direction:column;background-color:var(--granite-color-background-variant)}cdk-header-row,cdk-row,cdk-table{display:flex}cdk-cell,cdk-header-cell{flex:1;height:calc(var(--granite-spacing-m) * 2.5)}cdk-cell{border-top:1px solid var(--granite-color-border-soft)}"]
|
|
2434
2434
|
},] }
|
|
2435
2435
|
];
|
|
2436
2436
|
GraniteTableComponent.propDecorators = {
|
|
@@ -2456,8 +2456,8 @@ GraniteTableDataCellComponent.decorators = [
|
|
|
2456
2456
|
{ type: Component, args: [{
|
|
2457
2457
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
2458
2458
|
selector: 'cdk-cell[graniteTableDataCell]',
|
|
2459
|
-
template: "<span class=\"granite-table-data-cell-static-container\">\n <ng-template\n [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n [ngTemplateOutletContext]=\"{\n data: value,\n rowIndex: rowIndex,\n columnIndex: columnIndex,\n column: column\n }\"\n ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n <ng-container [ngSwitch]=\"staticType\">\n <ng-container *ngSwitchCase=\"'badge'\">\n <granite-badge>{{ value }}</granite-badge>\n </ng-container>\n <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n </ng-container>\n</ng-template>\n",
|
|
2460
|
-
styles: [".granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:
|
|
2459
|
+
template: "<span class=\"granite-table-data-cell-static-container\">\n <ng-template\n [ngTemplateOutlet]=\"tableCellTemplateRef || defaultTableCellTemplate\"\n [ngTemplateOutletContext]=\"{\n data: value,\n rowIndex: rowIndex,\n columnIndex: columnIndex,\n column: column,\n row: row\n }\"\n ></ng-template>\n</span>\n\n<ng-template #defaultTableCellTemplate>\n <ng-container [ngSwitch]=\"staticType\">\n <ng-container *ngSwitchCase=\"'badge'\">\n <granite-badge>{{ value }}</granite-badge>\n </ng-container>\n <ng-container *ngSwitchDefault>{{ value }}</ng-container>\n </ng-container>\n</ng-template>\n",
|
|
2460
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-data-cell-static-container{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);display:flex;justify-content:center;align-items:center;color:var(--granite-color-text)}"]
|
|
2461
2461
|
},] }
|
|
2462
2462
|
];
|
|
2463
2463
|
GraniteTableDataCellComponent.propDecorators = {
|
|
@@ -2465,7 +2465,8 @@ GraniteTableDataCellComponent.propDecorators = {
|
|
|
2465
2465
|
staticType: [{ type: Input }],
|
|
2466
2466
|
rowIndex: [{ type: Input }],
|
|
2467
2467
|
columnIndex: [{ type: Input }],
|
|
2468
|
-
tableCellTemplateRef: [{ type: Input }]
|
|
2468
|
+
tableCellTemplateRef: [{ type: Input }],
|
|
2469
|
+
row: [{ type: Input }]
|
|
2469
2470
|
};
|
|
2470
2471
|
|
|
2471
2472
|
class GraniteTableHeaderCellComponent extends GraniteCell {
|
|
@@ -2475,7 +2476,7 @@ GraniteTableHeaderCellComponent.decorators = [
|
|
|
2475
2476
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
2476
2477
|
selector: 'cdk-header-cell[graniteTableHeaderCell]',
|
|
2477
2478
|
template: "<span class=\"granite-table-header-cell-title\">\n <ng-content></ng-content>\n</span>\n",
|
|
2478
|
-
styles: [".granite-table-header-cell-title{padding:var(--granite-spacing-s);height:
|
|
2479
|
+
styles: [":host{box-sizing:border-box}:host *,:host :after,:host :before{box-sizing:inherit}.granite-table-header-cell-title{padding:var(--granite-spacing-s);height:inherit;font-size:var(--granite-font-size-micro);line-height:var(--granite-line-height-flowing);letter-spacing:.015em;font-weight:400;display:flex;justify-content:center;align-items:center;color:var(--granite-color-text-weak)}"]
|
|
2479
2480
|
},] }
|
|
2480
2481
|
];
|
|
2481
2482
|
|