@danske/sapphire-angular 2.2.0 → 2.4.0

package/lib/segmented-tabs/src/segmented-tabs.component.d.ts

@@ -27,7 +27,7 @@ export declare class SegmentedTabsComponent implements AfterContentInit, AfterVi
     readonly tabs: QueryList<SegmentedTabComponent>;
     private _tabIds;
     private resizeObserver;
-    _activeTabPosition: {
+    _gliderStyles: {
         left: string;
         width: string;
     };
@@ -44,7 +44,8 @@ export declare class SegmentedTabsComponent implements AfterContentInit, AfterVi
     _getTabContentTemplate(): import("@angular/core").TemplateRef<any> | null;
     _onFocusChange(origin: FocusOrigin): void;
     _onKeyDown(event: KeyboardEvent): void;
-    private setActiveTabPosition;
+    private setGliderStyles;
+    private getSelectedTabPosition;
     private onTabsChange;
     private skipAnimationFrame;
     private findFocusableIndex;

package/lib/select/src/select/select.component.d.ts

@@ -75,6 +75,7 @@ export declare class SelectComponent extends SelectComponentBase implements Fiel
     _onSearchInput(event: Event): void;
     _handleSelected(): void;
     isDisabled(): boolean;
+    hasDefaultWidth: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "sp-select", ["spSelect"], {}, {}, never, ["sp-selection-text"], false, [{ directive: typeof i1.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
 }

package/lib/table/public_api.d.ts

@@ -9,3 +9,4 @@ export * from './src/table-head.directive';
 export * from './src/table-sort.directive';
 export * from './src/table-sort-header.directive';
 export * from './src/table.module';
+export { CdkVirtualScrollViewportFixDirective } from './src/cdk-virtual-scroll-viewport-fix.directive';

package/lib/table/src/cdk-virtual-scroll-viewport-fix.directive.d.ts

@@ -0,0 +1,25 @@
+import { OnInit } from '@angular/core';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import * as i0 from "@angular/core";
+/**
+ * A patch to fix the issue of sticky header position getting affected
+ * by transform, which is due to transform making the element
+ * a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
+ *
+ * It intercepts style assignments on the content wrapper, and converts
+ * transform: translateY(value) to top: value, to avoid making the content
+ * wrapper a containing block for sticky positioned children.
+ *
+ * @see
+ * https://github.com/angular/components/issues/14833
+ * https://github.com/angular/components/issues/18240
+ * https://github.com/angular/components/issues/21576
+ * https://github.com/angular/components/issues/28584
+ */
+export declare class CdkVirtualScrollViewportFixDirective implements OnInit {
+    private cdkViewport;
+    constructor(cdkViewport: CdkVirtualScrollViewport);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollViewportFixDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkVirtualScrollViewportFixDirective, "cdk-virtual-scroll-viewport", never, {}, {}, never, never, true, never>;
+}

package/lib/table/src/table-cell.directive.d.ts

@@ -11,7 +11,7 @@ export declare class TableCellDirective implements AfterContentChecked {
     private table;
     private truncatedWithTooltipDirective;
     private tableRow;
-    get role(): "rowheader" | "cell";
+    get role(): "cell" | "rowheader";
     /**
      * Horizontal alignment of content in the cell.
      *

package/lib/table/src/table.module.d.ts

@@ -12,9 +12,10 @@ import * as i10 from "./table-sort-header.directive";
 import * as i11 from "@angular/common";
 import * as i12 from "../../icon/src/icon.module";
 import * as i13 from "../../tooltip/src/truncated-with-tooltip.directive";
-import * as i14 from "../../common/sapphire-view-encapsulation";
+import * as i14 from "./cdk-virtual-scroll-viewport-fix.directive";
+import * as i15 from "../../common/sapphire-view-encapsulation";
 export declare class SapphireTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SapphireTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireTableModule, [typeof i1.TableComponent, typeof i2.TableDirective, typeof i3.TableBodyDirective, typeof i4.TableFooterDirective, typeof i5.TableHeadDirective, typeof i6.TableRowDirective, typeof i7.TableHeadCellComponent, typeof i8.TableCellDirective, typeof i9.TableSortDirective, typeof i10.TableSortHeaderDirective], [typeof i11.CommonModule, typeof i12.SapphireIconModule, typeof i13.TruncatedWithTooltipDirective, typeof i14.UseComponentStyles], [typeof i1.TableComponent, typeof i2.TableDirective, typeof i3.TableBodyDirective, typeof i4.TableFooterDirective, typeof i5.TableHeadDirective, typeof i6.TableRowDirective, typeof i7.TableHeadCellComponent, typeof i8.TableCellDirective, typeof i9.TableSortDirective, typeof i10.TableSortHeaderDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireTableModule, [typeof i1.TableComponent, typeof i2.TableDirective, typeof i3.TableBodyDirective, typeof i4.TableFooterDirective, typeof i5.TableHeadDirective, typeof i6.TableRowDirective, typeof i7.TableHeadCellComponent, typeof i8.TableCellDirective, typeof i9.TableSortDirective, typeof i10.TableSortHeaderDirective], [typeof i11.CommonModule, typeof i12.SapphireIconModule, typeof i13.TruncatedWithTooltipDirective, typeof i14.CdkVirtualScrollViewportFixDirective, typeof i15.UseComponentStyles], [typeof i1.TableComponent, typeof i2.TableDirective, typeof i3.TableBodyDirective, typeof i4.TableFooterDirective, typeof i5.TableHeadDirective, typeof i6.TableRowDirective, typeof i7.TableHeadCellComponent, typeof i8.TableCellDirective, typeof i9.TableSortDirective, typeof i10.TableSortHeaderDirective, typeof i14.CdkVirtualScrollViewportFixDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SapphireTableModule>;
 }

package/lib/text-field/src/text-field.component.d.ts

@@ -14,6 +14,7 @@ export declare class TextFieldComponent implements FieldControl {
     isCharacterCounterExceeded(): boolean;
     isDisabled(): boolean;
     getId(): string | undefined;
+    readonly hasDefaultWidth = true;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextFieldComponent, [{ optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TextFieldComponent, "sp-text-field", never, { "characterCounterMax": "characterCounterMax"; }, {}, ["inputElement", "_inputDirective"], ["sp-text-field-prefix", "input", "sp-text-field-postfix", "textarea"], false, [{ directive: typeof i1.ThemeCheckDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
 }

package/lib/theme/public_api.d.ts

@@ -17,7 +17,7 @@ export type Breakpoints = Record<Breakpoint, number>;
  */
 export declare const DEFAULT_BREAKPOINTS: Breakpoints;
 export { SapphireThemeModule } from './src/theme.module';
-export { SapphireOverlayContainer } from './src/sapphire-overlay-container.service';
+export { SapphireOverlay } from './src/sapphire-overlay.service';
 export { ThemeDefaultDark, ThemeDefault } from './src/themes';
 export { ThemeRootDirective } from './src/theme-root.directive';
 export { ThemeBaseDirective } from './src/theme-base.directive';

package/lib/theme/src/sapphire-overlay.service.d.ts

@@ -0,0 +1,34 @@
+import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { ThemeBaseDirective } from './theme-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * NOTE: Providing a theme-aware OverlayContainer was a solution for overlay styles we used to have.
+ * It proved error-prone since it can lead to multiple overlay containers, which can cause
+ * z-index issues in various scenarios (UC-4160, UC-2897, UC-3843).
+ * The current solution applies.
+ */
+/**
+ * Sapphire theme aware overlay service.
+ * It's a slim wrapper around CDK Overlay service that adds theme styles to the overlay container.
+ */
+export declare class SapphireOverlay extends Overlay {
+    private topLevelThemeRef;
+    private theme;
+    /**
+     * Same as Angular CDK's `overlay.create`,
+     * but applies the current theme style on the overlay container.
+     * @param overlayConfig The overlay configuration to pass to overlay.create()
+     * @param theme The theme to apply. If not provided, the current theme will be used.
+     */
+    create(overlayConfig?: OverlayConfig, theme?: ThemeBaseDirective): OverlayRef;
+    /**
+     * Applies the current theme style on the overlay container.
+     * Useful only when the overlay is not created using `SapphireOverlay.create` method.
+     * E.g. when using some higher-level service like Dialog from angular CDK.
+     * @param overlayRef The overlay reference to apply the theme on.
+     * @param theme The theme to apply. If not provided, the current theme will be used.
+     */
+    applyTheme(overlayRef: OverlayRef, theme?: ThemeBaseDirective): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SapphireOverlay, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SapphireOverlay>;
+}

package/lib/tooltip/src/tooltip.directive.d.ts

@@ -1,6 +1,6 @@
-import { Overlay } from '@angular/cdk/overlay';
 import { ElementRef } from '@angular/core';
 import { NumberInput } from '@angular/cdk/coercion';
+import { SapphireOverlay } from '../../theme/public_api';
 import * as i0 from "@angular/core";
 export declare class TooltipDirective {
     private _overlay;
@@ -33,7 +33,7 @@ export declare class TooltipDirective {
     hide: (immediate?: boolean) => void;
     warmup: () => void;
     private attachTooltipPortal;
-    constructor(_overlay: Overlay, _elementRef: ElementRef<HTMLElement>);
+    constructor(_overlay: SapphireOverlay, _elementRef: ElementRef<HTMLElement>);
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[spTooltip]", ["spTooltip"], { "tooltipText": "spTooltip"; "delay": "spTooltipDelay"; "placement": "spTooltipPlacement"; }, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-angular",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "The Angular implementation of the Sapphire Design System from Danske Bank A/S",
   "module": "fesm2015/danske-sapphire-angular.mjs",
@@ -16,11 +16,11 @@
     "@danske/sapphire-icons": "^2.0.0"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^35.4.0",
+    "@danske/sapphire-css": "^36.0.0",
     "@internationalized/message": "^3.1.5",
     "tslib": "^2.3.0"
   },
-  "gitHead": "5289085e86eb94dc62d1e843364fbbd8f0c1903f",
+  "gitHead": "e179f6a7aeae452c8969507b46c735398037faa2",
   "es2020": "fesm2020/danske-sapphire-angular.mjs",
   "esm2020": "esm2020/danske-sapphire-angular.mjs",
   "fesm2020": "fesm2020/danske-sapphire-angular.mjs",

package/esm2020/lib/theme/src/sapphire-overlay-container.service.mjs

@@ -1,37 +0,0 @@
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, inject } from '@angular/core';
-import { ThemeBaseDirective } from './theme-base.directive';
-import { TopLevelThemeRef } from './top-level-theme-ref.service';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/cdk/platform";
-/**
- * Sapphire theme aware overlay container.
- */
-export class SapphireOverlayContainer extends OverlayContainer {
-    constructor(document, platform) {
-        super(document, platform);
-        this.topLevelThemeRef = inject(TopLevelThemeRef);
-        this.theme = inject(ThemeBaseDirective, {
-            optional: true,
-        });
-    }
-    _createContainer() {
-        const theme = this.theme || this.topLevelThemeRef.getTheme();
-        if (!theme) {
-            throw new Error('Could not find the current theme needed for overlay container');
-        }
-        super._createContainer();
-        // wrapping the .cdk-overlay-container element with another div which provides theme styles.
-        theme?.applyOnDomNode(this._containerElement);
-    }
-}
-SapphireOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireOverlayContainer, deps: [{ token: DOCUMENT }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Injectable });
-SapphireOverlayContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireOverlayContainer });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireOverlayContainer, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i1.Platform }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2FwcGhpcmUtb3ZlcmxheS1jb250YWluZXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvdGhlbWUvc3JjL3NhcHBoaXJlLW92ZXJsYXktY29udGFpbmVyLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFFeEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzNDLE9BQU8sRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7O0FBRWpFOztHQUVHO0FBRUgsTUFBTSxPQUFPLHdCQUF5QixTQUFRLGdCQUFnQjtJQU01RCxZQUE4QixRQUFrQixFQUFFLFFBQWtCO1FBQ2xFLEtBQUssQ0FBQyxRQUFRLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFOcEIscUJBQWdCLEdBQXFCLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQzlELFVBQUssR0FBOEIsTUFBTSxDQUFDLGtCQUFrQixFQUFFO1lBQ3BFLFFBQVEsRUFBRSxJQUFJO1NBQ2YsQ0FBQyxDQUFDO0lBSUgsQ0FBQztJQUVRLGdCQUFnQjtRQUN2QixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUM3RCxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ1YsTUFBTSxJQUFJLEtBQUssQ0FDYiwrREFBK0QsQ0FDaEUsQ0FBQztTQUNIO1FBQ0QsS0FBSyxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDekIsNEZBQTRGO1FBQzVGLEtBQUssRUFBRSxjQUFjLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLENBQUM7SUFDaEQsQ0FBQzs7cUhBcEJVLHdCQUF3QixrQkFNZixRQUFRO3lIQU5qQix3QkFBd0I7MkZBQXhCLHdCQUF3QjtrQkFEcEMsVUFBVTs7MEJBT0ksTUFBTTsyQkFBQyxRQUFRIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgT3ZlcmxheUNvbnRhaW5lciB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcbmltcG9ydCB7IFBsYXRmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL3BsYXRmb3JtJztcbmltcG9ydCB7IERPQ1VNRU5UIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEluamVjdCwgSW5qZWN0YWJsZSwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUaGVtZUJhc2VEaXJlY3RpdmUgfSBmcm9tICcuL3RoZW1lLWJhc2UuZGlyZWN0aXZlJztcbmltcG9ydCB7IFRvcExldmVsVGhlbWVSZWYgfSBmcm9tICcuL3RvcC1sZXZlbC10aGVtZS1yZWYuc2VydmljZSc7XG5cbi8qKlxuICogU2FwcGhpcmUgdGhlbWUgYXdhcmUgb3ZlcmxheSBjb250YWluZXIuXG4gKi9cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBTYXBwaGlyZU92ZXJsYXlDb250YWluZXIgZXh0ZW5kcyBPdmVybGF5Q29udGFpbmVyIHtcbiAgcHJpdmF0ZSB0b3BMZXZlbFRoZW1lUmVmOiBUb3BMZXZlbFRoZW1lUmVmID0gaW5qZWN0KFRvcExldmVsVGhlbWVSZWYpO1xuICBwcml2YXRlIHRoZW1lOiBUaGVtZUJhc2VEaXJlY3RpdmUgfCBudWxsID0gaW5qZWN0KFRoZW1lQmFzZURpcmVjdGl2ZSwge1xuICAgIG9wdGlvbmFsOiB0cnVlLFxuICB9KTtcblxuICBjb25zdHJ1Y3RvcihASW5qZWN0KERPQ1VNRU5UKSBkb2N1bWVudDogRG9jdW1lbnQsIHBsYXRmb3JtOiBQbGF0Zm9ybSkge1xuICAgIHN1cGVyKGRvY3VtZW50LCBwbGF0Zm9ybSk7XG4gIH1cblxuICBvdmVycmlkZSBfY3JlYXRlQ29udGFpbmVyKCkge1xuICAgIGNvbnN0IHRoZW1lID0gdGhpcy50aGVtZSB8fCB0aGlzLnRvcExldmVsVGhlbWVSZWYuZ2V0VGhlbWUoKTtcbiAgICBpZiAoIXRoZW1lKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoXG4gICAgICAgICdDb3VsZCBub3QgZmluZCB0aGUgY3VycmVudCB0aGVtZSBuZWVkZWQgZm9yIG92ZXJsYXkgY29udGFpbmVyJ1xuICAgICAgKTtcbiAgICB9XG4gICAgc3VwZXIuX2NyZWF0ZUNvbnRhaW5lcigpO1xuICAgIC8vIHdyYXBwaW5nIHRoZSAuY2RrLW92ZXJsYXktY29udGFpbmVyIGVsZW1lbnQgd2l0aCBhbm90aGVyIGRpdiB3aGljaCBwcm92aWRlcyB0aGVtZSBzdHlsZXMuXG4gICAgdGhlbWU/LmFwcGx5T25Eb21Ob2RlKHRoaXMuX2NvbnRhaW5lckVsZW1lbnQpO1xuICB9XG59XG4iXX0=

package/lib/theme/src/sapphire-overlay-container.service.d.ts

@@ -1,14 +0,0 @@
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { Platform } from '@angular/cdk/platform';
-import * as i0 from "@angular/core";
-/**
- * Sapphire theme aware overlay container.
- */
-export declare class SapphireOverlayContainer extends OverlayContainer {
-    private topLevelThemeRef;
-    private theme;
-    constructor(document: Document, platform: Platform);
-    _createContainer(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SapphireOverlayContainer, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<SapphireOverlayContainer>;
-}