@danske/sapphire-angular 1.19.1 → 1.19.2
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/esm2020/lib/checkbox/src/checkbox.component.mjs +2 -2
- package/esm2020/lib/modal/src/dialog/dialog-trigger.directive.mjs +3 -4
- package/esm2020/lib/table/src/table-cell.directive.mjs +15 -2
- package/esm2020/lib/table/src/table-head-cell.component.mjs +18 -4
- package/esm2020/lib/table/src/table-row.directive.mjs +13 -2
- package/fesm2015/danske-sapphire-angular.mjs +42 -9
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +42 -9
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/table/src/table-cell.directive.d.ts +7 -1
- package/lib/table/src/table-head-cell.component.d.ts +7 -1
- package/lib/table/src/table-row.directive.d.ts +6 -3
- package/package.json +2 -2
|
@@ -1102,7 +1102,7 @@ class CheckboxComponent extends _CheckboxMixinBase {
|
|
|
1102
1102
|
}
|
|
1103
1103
|
_onInputClick($event) {
|
|
1104
1104
|
$event.stopPropagation();
|
|
1105
|
-
if (!this.disabled && !this.readonly
|
|
1105
|
+
if (!this.disabled && !this.readonly) {
|
|
1106
1106
|
this._selected = !this._selected;
|
|
1107
1107
|
// Emit our custom change event if the native input emitted one.
|
|
1108
1108
|
// It is important to only emit it, if the native input triggered one, because
|
|
@@ -5667,18 +5667,28 @@ class TableHeadCellComponent {
|
|
|
5667
5667
|
* Horizontal alignment of content in the cell.
|
|
5668
5668
|
*/
|
|
5669
5669
|
this.align = 'left';
|
|
5670
|
+
/**
|
|
5671
|
+
* Applies the styles for selection cell. A selection cell is the first cell in a row, containing
|
|
5672
|
+
* a checkbox.
|
|
5673
|
+
*/
|
|
5674
|
+
this.selectionCell = false;
|
|
5670
5675
|
}
|
|
5671
5676
|
}
|
|
5672
5677
|
TableHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableHeadCellComponent, deps: [{ token: forwardRef(() => TableComponent) }, { token: TableSortHeaderDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
5673
|
-
TableHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TableHeadCellComponent, selector: "th[sp-table-th]", inputs: { align: "align", width: "width", minWidth: "minWidth", maxWidth: "maxWidth" }, host: { properties: { "class.sapphire-table__cell--alignLeft": "align === 'left'", "class.sapphire-table__cell--alignCenter": "align === 'center'", "class.sapphire-table__cell--alignRight": "align === 'right'", "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" }
|
|
5678
|
+
TableHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TableHeadCellComponent, selector: "th[sp-table-th]", inputs: { align: "align", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", selectionCell: "selectionCell" }, host: { properties: { "class.sapphire-table__headCell": "!selectionCell", "class.sapphire-table__cell": "selectionCell", "class.sapphire-table__cell--alignLeft": "align === 'left'", "class.sapphire-table__cell--alignCenter": "align === 'center'", "class.sapphire-table__cell--alignRight": "align === 'right'", "class.sapphire-table__selectionCell": "selectionCell", "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" } }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0, template: "<div\n *ngIf=\"!selectionCell\"\n class=\"sapphire-table__headCell_container\"\n _spUseComponentStyles\n>\n <span *ngIf=\"tableSortHeader && align === 'right'\">\n <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n </span>\n <span [spTruncatedWithTooltip]=\"cellOverflow === 'truncate'\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </span>\n <span *ngIf=\"tableSortHeader && align !== 'right'\">\n <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n </span>\n</div>\n<ng-container *ngIf=\"selectionCell\"\n ><ng-container *ngTemplateOutlet=\"content\"></ng-container\n></ng-container>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-template #sortIcon>\n <span\n *ngIf=\"tableSortHeader\"\n aria-hidden=\"true\"\n [class.sapphire-table-sortableIcon]=\"\n tableSortHeader.tableSort.sortDescriptor.column !==\n tableSortHeader.sortHeader\n \"\n [class.sapphire-table-sortedIcon]=\"\n tableSortHeader.tableSort.sortDescriptor.column ===\n tableSortHeader.sortHeader\n \"\n _spUseComponentStyles\n >\n <sp-icon\n [name]=\"\n tableSortHeader.tableSort.sortDescriptor.column ===\n tableSortHeader.sortHeader &&\n tableSortHeader.tableSort.sortDescriptor.direction === 'descending'\n ? 'caretDownMedium'\n : 'caretUpMedium'\n \"\n ></sp-icon>\n </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: TruncatedWithTooltipDirective, selector: "[spTruncatedWithTooltip]", inputs: ["spTruncatedWithTooltip"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
5679
|
+
__decorate([
|
|
5680
|
+
CoerceBoolean
|
|
5681
|
+
], TableHeadCellComponent.prototype, "selectionCell", void 0);
|
|
5674
5682
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableHeadCellComponent, decorators: [{
|
|
5675
5683
|
type: Component,
|
|
5676
5684
|
args: [{ selector: 'th[sp-table-th]', host: {
|
|
5677
|
-
class
|
|
5685
|
+
'[class.sapphire-table__headCell]': '!selectionCell',
|
|
5686
|
+
'[class.sapphire-table__cell]': 'selectionCell',
|
|
5678
5687
|
'[class.sapphire-table__cell--alignLeft]': "align === 'left'",
|
|
5679
5688
|
'[class.sapphire-table__cell--alignCenter]': "align === 'center'",
|
|
5680
5689
|
'[class.sapphire-table__cell--alignRight]': "align === 'right'",
|
|
5681
|
-
|
|
5690
|
+
'[class.sapphire-table__selectionCell]': 'selectionCell',
|
|
5691
|
+
}, hostDirectives: [UseComponentStyles], template: "<div\n *ngIf=\"!selectionCell\"\n class=\"sapphire-table__headCell_container\"\n _spUseComponentStyles\n>\n <span *ngIf=\"tableSortHeader && align === 'right'\">\n <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n </span>\n <span [spTruncatedWithTooltip]=\"cellOverflow === 'truncate'\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </span>\n <span *ngIf=\"tableSortHeader && align !== 'right'\">\n <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n </span>\n</div>\n<ng-container *ngIf=\"selectionCell\"\n ><ng-container *ngTemplateOutlet=\"content\"></ng-container\n></ng-container>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-template #sortIcon>\n <span\n *ngIf=\"tableSortHeader\"\n aria-hidden=\"true\"\n [class.sapphire-table-sortableIcon]=\"\n tableSortHeader.tableSort.sortDescriptor.column !==\n tableSortHeader.sortHeader\n \"\n [class.sapphire-table-sortedIcon]=\"\n tableSortHeader.tableSort.sortDescriptor.column ===\n tableSortHeader.sortHeader\n \"\n _spUseComponentStyles\n >\n <sp-icon\n [name]=\"\n tableSortHeader.tableSort.sortDescriptor.column ===\n tableSortHeader.sortHeader &&\n tableSortHeader.tableSort.sortDescriptor.direction === 'descending'\n ? 'caretDownMedium'\n : 'caretUpMedium'\n \"\n ></sp-icon>\n </span>\n</ng-template>\n" }]
|
|
5682
5692
|
}], ctorParameters: function () { return [{ type: TableComponent, decorators: [{
|
|
5683
5693
|
type: Inject,
|
|
5684
5694
|
args: [forwardRef(() => TableComponent)]
|
|
@@ -5701,6 +5711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5701
5711
|
args: ['style.max-width']
|
|
5702
5712
|
}, {
|
|
5703
5713
|
type: Input
|
|
5714
|
+
}], selectionCell: [{
|
|
5715
|
+
type: Input
|
|
5704
5716
|
}] } });
|
|
5705
5717
|
|
|
5706
5718
|
class SapphireTooltipModule {
|
|
@@ -5754,6 +5766,11 @@ class TableCellDirective {
|
|
|
5754
5766
|
this.table = table;
|
|
5755
5767
|
this.truncatedWithTooltipDirective = truncatedWithTooltipDirective;
|
|
5756
5768
|
this.tableRow = tableRow;
|
|
5769
|
+
/**
|
|
5770
|
+
* Applies the styles for selection cell.
|
|
5771
|
+
* A selection cell is the first cell in a row, containing a checkbox.
|
|
5772
|
+
*/
|
|
5773
|
+
this.selectionCell = false;
|
|
5757
5774
|
this.isFirstCellInRow = false;
|
|
5758
5775
|
}
|
|
5759
5776
|
ngAfterContentChecked() {
|
|
@@ -5764,7 +5781,10 @@ class TableCellDirective {
|
|
|
5764
5781
|
}
|
|
5765
5782
|
}
|
|
5766
5783
|
TableCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableCellDirective, deps: [{ token: forwardRef(() => TableComponent) }, { token: TruncatedWithTooltipDirective }, { token: forwardRef(() => TableRowDirective) }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5767
|
-
TableCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TableCellDirective, selector: "td[sp-table-td]", inputs: { align: "align" }, host: { properties: { "class.sapphire-table__cell--alignLeft": "align === 'left'", "class.sapphire-table__cell--alignCenter": "align === 'center'", "class.sapphire-table__cell--alignRight": "align === 'right'", "attr.role": "this.role", "attr.align": "this.align", "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" }, classAttribute: "sapphire-table__cell" }, hostDirectives: [{ directive: TruncatedWithTooltipDirective }, { directive: UseComponentStyles }], ngImport: i0 });
|
|
5784
|
+
TableCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TableCellDirective, selector: "td[sp-table-td]", inputs: { align: "align", selectionCell: "selectionCell" }, host: { properties: { "class.sapphire-table__cell--alignLeft": "align === 'left'", "class.sapphire-table__cell--alignCenter": "align === 'center'", "class.sapphire-table__cell--alignRight": "align === 'right'", "class.sapphire-table__selectionCell": "selectionCell", "attr.role": "this.role", "attr.align": "this.align", "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" }, classAttribute: "sapphire-table__cell" }, hostDirectives: [{ directive: TruncatedWithTooltipDirective }, { directive: UseComponentStyles }], ngImport: i0 });
|
|
5785
|
+
__decorate([
|
|
5786
|
+
CoerceBoolean
|
|
5787
|
+
], TableCellDirective.prototype, "selectionCell", void 0);
|
|
5768
5788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableCellDirective, decorators: [{
|
|
5769
5789
|
type: Directive,
|
|
5770
5790
|
args: [{
|
|
@@ -5775,6 +5795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5775
5795
|
'[class.sapphire-table__cell--alignLeft]': "align === 'left'",
|
|
5776
5796
|
'[class.sapphire-table__cell--alignCenter]': "align === 'center'",
|
|
5777
5797
|
'[class.sapphire-table__cell--alignRight]': "align === 'right'",
|
|
5798
|
+
'[class.sapphire-table__selectionCell]': 'selectionCell',
|
|
5778
5799
|
},
|
|
5779
5800
|
}]
|
|
5780
5801
|
}], ctorParameters: function () { return [{ type: TableComponent, decorators: [{
|
|
@@ -5791,6 +5812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5791
5812
|
args: ['attr.align']
|
|
5792
5813
|
}, {
|
|
5793
5814
|
type: Input
|
|
5815
|
+
}], selectionCell: [{
|
|
5816
|
+
type: Input
|
|
5794
5817
|
}], width: [{
|
|
5795
5818
|
type: HostBinding,
|
|
5796
5819
|
args: ['style.width']
|
|
@@ -5820,13 +5843,20 @@ class TableRowDirective {
|
|
|
5820
5843
|
this.cells = new QueryList();
|
|
5821
5844
|
this.rowData = null;
|
|
5822
5845
|
this.disabled = false;
|
|
5846
|
+
/**
|
|
5847
|
+
* Applies selected row styles, and marks the row as selected for assistive technology.
|
|
5848
|
+
*/
|
|
5849
|
+
this.selected = false;
|
|
5823
5850
|
}
|
|
5824
5851
|
}
|
|
5825
5852
|
TableRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableRowDirective, deps: [{ token: forwardRef(() => TableComponent) }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5826
|
-
TableRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TableRowDirective, selector: "tr[sp-table-tr]", inputs: { rowData: "rowData", disabled: "disabled" }, host: { listeners: { "click": "onRowClick()" }, properties: { "class.js-hover": "disabled" }, classAttribute: "sapphire-table__row" }, queries: [{ propertyName: "cells", predicate: TableCellDirective }], hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
|
|
5853
|
+
TableRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TableRowDirective, selector: "tr[sp-table-tr]", inputs: { rowData: "rowData", disabled: "disabled", selected: "selected" }, host: { listeners: { "click": "onRowClick()" }, properties: { "class.sapphire-table__row--selected": "selected", "attr.aria-selected": "selected || null", "class.js-hover": "disabled" }, classAttribute: "sapphire-table__row" }, queries: [{ propertyName: "cells", predicate: TableCellDirective }], hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
|
|
5827
5854
|
__decorate([
|
|
5828
5855
|
CoerceBoolean
|
|
5829
5856
|
], TableRowDirective.prototype, "disabled", void 0);
|
|
5857
|
+
__decorate([
|
|
5858
|
+
CoerceBoolean
|
|
5859
|
+
], TableRowDirective.prototype, "selected", void 0);
|
|
5830
5860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableRowDirective, decorators: [{
|
|
5831
5861
|
type: Directive,
|
|
5832
5862
|
args: [{
|
|
@@ -5838,6 +5868,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5838
5868
|
* The "js-hover" class basically means that we're taking over the hover
|
|
5839
5869
|
* styles from css.
|
|
5840
5870
|
*/
|
|
5871
|
+
'[class.sapphire-table__row--selected]': 'selected',
|
|
5872
|
+
'[attr.aria-selected]': 'selected || null',
|
|
5841
5873
|
'[class.js-hover]': 'disabled',
|
|
5842
5874
|
},
|
|
5843
5875
|
hostDirectives: [UseComponentStyles],
|
|
@@ -5852,6 +5884,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5852
5884
|
type: Input
|
|
5853
5885
|
}], disabled: [{
|
|
5854
5886
|
type: Input
|
|
5887
|
+
}], selected: [{
|
|
5888
|
+
type: Input
|
|
5855
5889
|
}], onRowClick: [{
|
|
5856
5890
|
type: HostListener,
|
|
5857
5891
|
args: ['click']
|
|
@@ -6943,10 +6977,9 @@ class DialogTriggerDirective extends ModalTriggerDirective {
|
|
|
6943
6977
|
this.modalService = modalService;
|
|
6944
6978
|
}
|
|
6945
6979
|
open() {
|
|
6946
|
-
if (
|
|
6947
|
-
|
|
6980
|
+
if (this.templateRef) {
|
|
6981
|
+
this.dialogRef = this.modalService.openDialog(this.templateRef, this);
|
|
6948
6982
|
}
|
|
6949
|
-
this.dialogRef = this.modalService.openDialog(this.templateRef, this);
|
|
6950
6983
|
}
|
|
6951
6984
|
}
|
|
6952
6985
|
DialogTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogTriggerDirective, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });
|