@danske/sapphire-angular 1.19.1 → 1.19.3

package/fesm2015/danske-sapphire-angular.mjs

@@ -1116,7 +1116,7 @@ class CheckboxComponent extends _CheckboxMixinBase {
     }
     _onInputClick($event) {
         $event.stopPropagation();
-        if (!this.disabled && !this.readonly && !this.indeterminate) {
+        if (!this.disabled && !this.readonly) {
             this._selected = !this._selected;
             // Emit our custom change event if the native input emitted one.
             // It is important to only emit it, if the native input triggered one, because
@@ -5766,18 +5766,28 @@ class TableHeadCellComponent {
          * Horizontal alignment of content in the cell.
          */
         this.align = 'left';
+        /**
+         * Applies the styles for selection cell. A selection cell is the first cell in a row, containing
+         * a checkbox.
+         */
+        this.selectionCell = false;
     }
 }
 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 });
-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" }, classAttribute: "sapphire-table__headCell" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-table__headCell_container\" _spUseComponentStyles>\n  <span *ngIf=\"tableSortHeader && align === 'right'\">\n    <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n  </span>\n  <span [spTruncatedWithTooltip]=\"cellOverflow === 'truncate'\">\n    <ng-content></ng-content>\n  </span>\n  <span *ngIf=\"tableSortHeader && align !== 'right'\">\n    <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n  </span>\n</div>\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]" }] });
+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]" }] });
+__decorate([
+    CoerceBoolean
+], TableHeadCellComponent.prototype, "selectionCell", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableHeadCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'th[sp-table-th]', host: {
-                        class: 'sapphire-table__headCell',
+                        '[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'",
-                    }, hostDirectives: [UseComponentStyles], template: "<div class=\"sapphire-table__headCell_container\" _spUseComponentStyles>\n  <span *ngIf=\"tableSortHeader && align === 'right'\">\n    <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n  </span>\n  <span [spTruncatedWithTooltip]=\"cellOverflow === 'truncate'\">\n    <ng-content></ng-content>\n  </span>\n  <span *ngIf=\"tableSortHeader && align !== 'right'\">\n    <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n  </span>\n</div>\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" }]
+                        '[class.sapphire-table__selectionCell]': 'selectionCell',
+                    }, 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" }]
         }], ctorParameters: function () {
         return [{ type: TableComponent, decorators: [{
                         type: Inject,
@@ -5802,6 +5812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 args: ['style.max-width']
             }, {
                 type: Input
+            }], selectionCell: [{
+                type: Input
             }] } });
 
 class SapphireTooltipModule {
@@ -5859,6 +5871,11 @@ class TableCellDirective {
         this.table = table;
         this.truncatedWithTooltipDirective = truncatedWithTooltipDirective;
         this.tableRow = tableRow;
+        /**
+         * Applies the styles for selection cell.
+         * A selection cell is the first cell in a row, containing a checkbox.
+         */
+        this.selectionCell = false;
         this.isFirstCellInRow = false;
     }
     ngAfterContentChecked() {
@@ -5869,7 +5886,10 @@ class TableCellDirective {
     }
 }
 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 });
-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 });
+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 });
+__decorate([
+    CoerceBoolean
+], TableCellDirective.prototype, "selectionCell", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableCellDirective, decorators: [{
             type: Directive,
             args: [{
@@ -5880,6 +5900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[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',
                     },
                 }]
         }], ctorParameters: function () {
@@ -5898,6 +5919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 args: ['attr.align']
             }, {
                 type: Input
+            }], selectionCell: [{
+                type: Input
             }], width: [{
                 type: HostBinding,
                 args: ['style.width']
@@ -5929,13 +5952,20 @@ class TableRowDirective {
         this.cells = new QueryList();
         this.rowData = null;
         this.disabled = false;
+        /**
+         * Applies selected row styles, and marks the row as selected for assistive technology.
+         */
+        this.selected = false;
     }
 }
 TableRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableRowDirective, deps: [{ token: forwardRef(() => TableComponent) }], target: i0.ɵɵFactoryTarget.Directive });
-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 });
+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 });
 __decorate([
     CoerceBoolean
 ], TableRowDirective.prototype, "disabled", void 0);
+__decorate([
+    CoerceBoolean
+], TableRowDirective.prototype, "selected", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableRowDirective, decorators: [{
             type: Directive,
             args: [{
@@ -5947,6 +5977,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                          * The "js-hover" class basically means that we're taking over the hover
                          * styles from css.
                          */
+                        '[class.sapphire-table__row--selected]': 'selected',
+                        '[attr.aria-selected]': 'selected || null',
                         '[class.js-hover]': 'disabled',
                     },
                     hostDirectives: [UseComponentStyles],
@@ -5963,6 +5995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], selected: [{
+                type: Input
             }], onRowClick: [{
                 type: HostListener,
                 args: ['click']
@@ -6484,11 +6518,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
  *
  */
 class ThemeRootDirective {
-    constructor(elementRef, theme) {
+    constructor(elementRef, themeRef, parentTheme) {
+        const theme = parentTheme || themeRef.theme;
         theme.applyOnDomNode(elementRef.nativeElement);
     }
 }
-ThemeRootDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, deps: [{ token: i0.ElementRef }, { token: ThemeBaseDirective }], target: i0.ɵɵFactoryTarget.Directive });
+ThemeRootDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, deps: [{ token: i0.ElementRef }, { token: TopLevelThemeRef }, { token: ThemeBaseDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
 ThemeRootDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ThemeRootDirective, isStandalone: true, selector: "[sp-theme-root]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, decorators: [{
             type: Directive,
@@ -6496,7 +6531,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     selector: '[sp-theme-root]',
                     standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ThemeBaseDirective }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: TopLevelThemeRef }, { type: ThemeBaseDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }];
+    } });
 
 /**
  * - Makes sure currently applied theme is applied on overlays which are rendered as portal
@@ -7066,10 +7107,9 @@ class DialogTriggerDirective extends ModalTriggerDirective {
         this.modalService = modalService;
     }
     open() {
-        if (!this.templateRef) {
-            throw new Error('Template referenced by modal trigger not found.');
+        if (this.templateRef) {
+            this.dialogRef = this.modalService.openDialog(this.templateRef, this);
         }
-        this.dialogRef = this.modalService.openDialog(this.templateRef, this);
     }
 }
 DialogTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogTriggerDirective, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Directive });