@danske/sapphire-angular 1.15.0 → 1.16.1

package/fesm2020/danske-sapphire-angular.mjs

@@ -1609,20 +1609,20 @@ class PopoverTriggerDirective {
                     this.closed.next();
                     this.changeDetectorRef.detectChanges();
                 });
-                this.overlayRef
-                    .outsidePointerEvents()
-                    .pipe(takeUntil(merge(this.closed, this.destroyed)))
-                    .subscribe((event) => {
-                    if (
-                    // If popover is opened on press start, an outside pointer event
-                    // is emitted as the mouse is being released, which would immediately
-                    // close the popover. Probably a bug in @angular/cdk/overlay.
-                    !(this.openOnPressStart && this.isBeingPressed) &&
-                        !this.elementRef.nativeElement.contains(event.target)) {
-                        this.close();
-                    }
-                });
             }
+            this.overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntil(merge(this.closed, this.destroyed)))
+                .subscribe((event) => {
+                if (
+                // If popover is opened on press start, an outside pointer event
+                // is emitted as the mouse is being released, which would immediately
+                // close the popover. Probably a bug in @angular/cdk/overlay.
+                !(this.openOnPressStart && this.isBeingPressed) &&
+                    !this.elementRef.nativeElement.contains(event.target)) {
+                    this.close();
+                }
+            });
             this.overlayRef.attach(this.getContentPortal());
             this.changeDetectorRef.detectChanges();
         }
@@ -1894,7 +1894,17 @@ class PopoverComponent {
             // focus is going. So we asynchronously check if the focus is outside the trigger and close
             // in that case.
             setTimeout(() => {
-                if (!this.trigger?.elementRef.nativeElement.contains(document.activeElement)) {
+                if (
+                /**
+                 * If the focus is going to body, don't close the popover.
+                 * similar consideration in react-aria's useOverlay:
+                 * https://github.com/adobe/react-spectrum/blob/2bda4c971dd557be7ecc44614569a8281e6cb6dd/packages/%40react-aria/overlays/src/useOverlay.ts#L128-L130
+                 *
+                 * In addition to those scenarios, the focused element may get disabled in the popover,
+                 * which moves the focus to body.
+                 */
+                document.activeElement !== document.body &&
+                    !this.trigger?.elementRef.nativeElement.contains(document.activeElement)) {
                     this.trigger?.close();
                 }
             });
@@ -5312,10 +5322,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
 
 class TableRowDirective {
     onRowClick() {
-        this.table.rowAction.emit({
-            index: this.table.rows?.toArray().findIndex((row) => row === this) ?? -1,
-            rowData: this.rowData,
-        });
+        if (!this.disabled) {
+            this.table.rowAction.emit({
+                index: this.table.rows?.toArray().findIndex((row) => row === this) ?? -1,
+                rowData: this.rowData,
+            });
+        }
     }
     getColumnHeadCell(cell) {
         const index = this.cells.toArray().indexOf(cell);
@@ -5325,16 +5337,26 @@ class TableRowDirective {
         this.table = table;
         this.cells = new QueryList();
         this.rowData = null;
+        this.disabled = 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" }, host: { listeners: { "click": "onRowClick()" }, 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" }, host: { listeners: { "click": "onRowClick()" }, properties: { "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);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableRowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'tr[sp-table-tr]',
                     host: {
                         class: 'sapphire-table__row',
+                        /**
+                         * We want the css hover styles to not be applied for the disabled rows.
+                         * The "js-hover" class basically means that we're taking over the hover
+                         * styles from css.
+                         */
+                        '[class.js-hover]': 'disabled',
                     },
                     hostDirectives: [UseComponentStyles],
                 }]
@@ -5346,6 +5368,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 args: [TableCellDirective]
             }], rowData: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], onRowClick: [{
                 type: HostListener,
                 args: ['click']
@@ -7939,5 +7963,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BasicSelectComponent, BasicSingleSelectDirective, ButtonComponent, ButtonGroupComponent, ButtonIconDirective, CheckboxChange, CheckboxComponent, ConfirmationDialogComponent, ContextualHelpComponent, ContextualHelpContentDirective, ContextualHelpFooterDirective, ContextualHelpHeaderDirective, DEFAULT_BREAKPOINTS, DangerDialogComponent, DialogCloseButtonDirective, DialogComponent, DialogContentDirective, DialogFooterComponent, DialogFooterDirective, DialogHeaderComponent, DialogHeaderDirective, DialogTriggerDirective, FieldComponent, FieldControl, FieldErrorDirective, FieldLabelDirective, FieldNoteDirective, FieldNoteSuffixDirective, HeadingComponent, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, InlinePanelComponent, LinkComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuItemComponent, MenuSectionComponent, MenuTriggerDirective, ModalService, MultiSelectDirective, NotificationBadgeComponent, OptionComponent, OptionIconDirective, OptionPrimaryTextDirective, OptionSecondaryTextDirective, POPOVER_TRIGGER, PaginationComponent, PanelBackButtonDirective, PanelCloseButtonDirective, PanelComponent, PanelContentComponent, PanelFooterComponent, PanelFooterDirective, PanelHeaderComponent, PanelHeaderDirective, PanelTriggerDirective, ParagraphComponent, PopoverCloseButtonDirective, PopoverComponent, PopoverTitleDirective, PopoverTriggerDirective, RadioComponent, RadioGroupComponent, SapphireBadgeModule, SapphireButtonModule, SapphireCheckboxModule, SapphireCheckboxRequiredValidator, SapphireContextualHelpModule, SapphireCoreModule, SapphireFieldModule, SapphireIconModule, SapphireLinkModule, SapphireListboxModule, SapphireMenuModule, SapphireModalModule, SapphireNotificationBadgeModule, SapphireOverlayContainer, SapphirePaginationChange, SapphirePaginationModule, SapphirePopoverModule, SapphireRadioChange, SapphireRadioModule, SapphireSegmentedTabsModule, SapphireSelectModule, SapphireSkeletonModule, SapphireSurfaceModule, SapphireSwitchChange, SapphireSwitchModule, SapphireSwitchRequiredValidator, SapphireTableModule, SapphireTextFieldModule, SapphireThemeModule, SapphireToggleButtonRequiredValidator, SapphireTooltipModule, SapphireTypographyModule, ScrollMonitorDirective, SearchableSelectDirective, SectionDirective, SegmentedTabComponent, SegmentedTabContentDirective, SegmentedTabLabelDirective, SegmentedTabsComponent, SelectComponent, SelectionTextDirective, SingleSelectDirective, SkeletonBlockDirective, SkeletonCircleDirective, SkeletonComponent, SkeletonTextDirective, SurfaceComponent, SwitchComponent, TableBodyDirective, TableCellDirective, TableComponent, TableDirective, TableHeadCellComponent, TableHeadDirective, TableRowDirective, TableSortDirective, TableSortHeaderDirective, TextFieldAffixDirective, TextFieldComponent, TextFieldInputDirective, TextFieldPostfixDirective, TextFieldPrefixDirective, TextFieldTextareaAutosizeDirective, ThemeBaseDirective, ThemeCheckDirective, ThemeDefault, ThemeDefaultDark, ThemeRootDirective, ToggleButtonComponent, TooltipComponent, TooltipDirective, TruncatedWithTooltipDirective, UseComponentStyles, UseComponentStylesOnHost, ViewEncapsulationProvider };
+export { BadgeComponent, BasicSelectComponent, BasicSingleSelectDirective, ButtonComponent, ButtonGroupComponent, ButtonIconDirective, CheckboxChange, CheckboxComponent, ConfirmationDialogComponent, ContextualHelpComponent, ContextualHelpContentDirective, ContextualHelpFooterDirective, ContextualHelpHeaderDirective, DEFAULT_BREAKPOINTS, DangerDialogComponent, DialogCloseButtonDirective, DialogComponent, DialogContentDirective, DialogFooterComponent, DialogFooterDirective, DialogHeaderComponent, DialogHeaderDirective, DialogTriggerDirective, FieldComponent, FieldControl, FieldErrorDirective, FieldLabelDirective, FieldNoteDirective, FieldNoteSuffixDirective, HeadingComponent, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, InlinePanelComponent, LinkComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuItemComponent, MenuSectionComponent, MenuTriggerDirective, ModalCloseButtonDirective, ModalService, MultiSelectDirective, NotificationBadgeComponent, OptionComponent, OptionIconDirective, OptionPrimaryTextDirective, OptionSecondaryTextDirective, POPOVER_TRIGGER, PaginationComponent, PanelBackButtonDirective, PanelCloseButtonDirective, PanelComponent, PanelContentComponent, PanelFooterComponent, PanelFooterDirective, PanelHeaderComponent, PanelHeaderDirective, PanelTriggerDirective, ParagraphComponent, PopoverCloseButtonDirective, PopoverComponent, PopoverTitleDirective, PopoverTriggerDirective, RadioComponent, RadioGroupComponent, SapphireBadgeModule, SapphireButtonModule, SapphireCheckboxModule, SapphireCheckboxRequiredValidator, SapphireContextualHelpModule, SapphireCoreModule, SapphireFieldModule, SapphireIconModule, SapphireLinkModule, SapphireListboxModule, SapphireMenuModule, SapphireModalModule, SapphireNotificationBadgeModule, SapphireOverlayContainer, SapphirePaginationChange, SapphirePaginationModule, SapphirePopoverModule, SapphireRadioChange, SapphireRadioModule, SapphireSegmentedTabsModule, SapphireSelectModule, SapphireSkeletonModule, SapphireSurfaceModule, SapphireSwitchChange, SapphireSwitchModule, SapphireSwitchRequiredValidator, SapphireTableModule, SapphireTextFieldModule, SapphireThemeModule, SapphireToggleButtonRequiredValidator, SapphireTooltipModule, SapphireTypographyModule, ScrollMonitorDirective, SearchableSelectDirective, SectionDirective, SegmentedTabComponent, SegmentedTabContentDirective, SegmentedTabLabelDirective, SegmentedTabsComponent, SelectComponent, SelectionTextDirective, SingleSelectDirective, SkeletonBlockDirective, SkeletonCircleDirective, SkeletonComponent, SkeletonTextDirective, SurfaceComponent, SwitchComponent, TableBodyDirective, TableCellDirective, TableComponent, TableDirective, TableHeadCellComponent, TableHeadDirective, TableRowDirective, TableSortDirective, TableSortHeaderDirective, TextFieldAffixDirective, TextFieldComponent, TextFieldInputDirective, TextFieldPostfixDirective, TextFieldPrefixDirective, TextFieldTextareaAutosizeDirective, ThemeBaseDirective, ThemeCheckDirective, ThemeDefault, ThemeDefaultDark, ThemeRootDirective, ToggleButtonComponent, TooltipComponent, TooltipDirective, TruncatedWithTooltipDirective, UseComponentStyles, UseComponentStylesOnHost, ViewEncapsulationProvider };
 //# sourceMappingURL=danske-sapphire-angular.mjs.map