@danske/sapphire-angular 3.7.1 → 3.8.1

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

@@ -1,12 +1,16 @@
-import { AfterContentInit, ElementRef } from '@angular/core';
+import { AfterContentInit, AfterViewChecked, ElementRef } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { IconComponent } from '../../icon/public_api';
 import { ButtonIconDirective } from './button-icon.directive';
+import { TooltipDirective, TruncatedWithTooltipDirective } from '../../tooltip/public_api';
 import * as i0 from "@angular/core";
 import * as i1 from "../../theme/src/theme-check.directive";
 import * as i2 from "../../common/sapphire-view-encapsulation";
-export declare class ButtonComponent implements AfterContentInit {
+import * as i3 from "../../tooltip/src/truncated-with-tooltip.directive";
+export declare class ButtonComponent implements AfterContentInit, AfterViewChecked {
     elementRef: ElementRef<HTMLButtonElement>;
+    private userTooltipDirective;
+    private truncatedWithTooltipDirective;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'danger' | 'danger-secondary' | 'danger-tertiary' | 'danger-text';
     size?: 'sm' | 'md' | 'lg';
     disabled: BooleanInput;
@@ -20,8 +24,9 @@ export declare class ButtonComponent implements AfterContentInit {
     get hostTabIndex(): number | string | null;
     buttonIcon?: ButtonIconDirective;
     icon?: IconComponent;
-    constructor(elementRef: ElementRef<HTMLButtonElement>);
+    constructor(elementRef: ElementRef<HTMLButtonElement>, userTooltipDirective: TooltipDirective, truncatedWithTooltipDirective: TruncatedWithTooltipDirective);
     ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[sp-button], a[sp-button]", never, { "variant": "variant"; "size": "size"; "disabled": "disabled"; "iconAlign": "iconAlign"; "type": "type"; "tabindex": "tabindex"; }, {}, ["buttonIcon", "icon"], ["*", "[spButtonIcon]"], false, [{ directive: typeof i1.ThemeCheckDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.UseComponentStylesOnHost; inputs: {}; outputs: {}; }]>;
+    ngAfterViewChecked(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, [null, { optional: true; self: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[sp-button], a[sp-button]", never, { "variant": "variant"; "size": "size"; "disabled": "disabled"; "iconAlign": "iconAlign"; "type": "type"; "tabindex": "tabindex"; }, {}, ["buttonIcon", "icon"], ["*", "[spButtonIcon]"], false, [{ directive: typeof i1.ThemeCheckDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.UseComponentStylesOnHost; inputs: {}; outputs: {}; }, { directive: typeof i3.TruncatedWithTooltipDirective; inputs: {}; outputs: {}; }]>;
 }

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

@@ -7,8 +7,10 @@ import * as i5 from "./button-group.component";
 import * as i6 from "./toggle-button-required-validator";
 import * as i7 from "@angular/common";
 import * as i8 from "@angular/forms";
+import * as i9 from "../../tooltip/src/tooltip.directive";
+import * as i10 from "../../tooltip/src/truncated-with-tooltip.directive";
 export declare class SapphireButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SapphireButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireButtonModule, [typeof i1.ButtonComponent, typeof i2.ButtonIconDirective, typeof i3.IconButtonComponent, typeof i4.ToggleButtonComponent, typeof i5.ButtonGroupComponent, typeof i6.SapphireToggleButtonRequiredValidator], [typeof i7.CommonModule, typeof i8.FormsModule], [typeof i1.ButtonComponent, typeof i2.ButtonIconDirective, typeof i3.IconButtonComponent, typeof i4.ToggleButtonComponent, typeof i5.ButtonGroupComponent, typeof i6.SapphireToggleButtonRequiredValidator]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireButtonModule, [typeof i1.ButtonComponent, typeof i2.ButtonIconDirective, typeof i3.IconButtonComponent, typeof i4.ToggleButtonComponent, typeof i5.ButtonGroupComponent, typeof i6.SapphireToggleButtonRequiredValidator], [typeof i7.CommonModule, typeof i8.FormsModule, typeof i9.TooltipDirective, typeof i10.TruncatedWithTooltipContentElementDirective], [typeof i1.ButtonComponent, typeof i2.ButtonIconDirective, typeof i3.IconButtonComponent, typeof i4.ToggleButtonComponent, typeof i5.ButtonGroupComponent, typeof i6.SapphireToggleButtonRequiredValidator]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SapphireButtonModule>;
 }

package/lib/common/focused.directive.d.ts

@@ -20,8 +20,8 @@ export declare class FocusedDirective {
     focusedInput?: boolean;
     private hostFocused;
     private get className();
-    private onFocusIn;
-    private onFocusOut;
+    private onFocus;
+    private onBlur;
     isFocused(): boolean;
     isFocusVisible(): boolean;
     constructor(inputModalityDetector: InputModalityDetector);

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

@@ -6,6 +6,6 @@ import * as i4 from "./tooltip.directive";
 import * as i5 from "./truncated-with-tooltip.directive";
 export declare class SapphireTooltipModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SapphireTooltipModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireTooltipModule, [typeof i1.TooltipComponent], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.TooltipDirective, typeof i5.TruncatedWithTooltipDirective], [typeof i4.TooltipDirective, typeof i5.TruncatedWithTooltipDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SapphireTooltipModule, [typeof i1.TooltipComponent], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.TooltipDirective, typeof i5.TruncatedWithTooltipDirective, typeof i5.TruncatedWithTooltipContentElementDirective], [typeof i4.TooltipDirective, typeof i5.TruncatedWithTooltipDirective, typeof i5.TruncatedWithTooltipContentElementDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SapphireTooltipModule>;
 }

package/lib/tooltip/src/truncated-with-tooltip.directive.d.ts

@@ -1,8 +1,38 @@
-import { AfterContentChecked, ElementRef } from '@angular/core';
+import { AfterContentChecked, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { TooltipDirective } from './tooltip.directive';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
-import * as i1 from "./tooltip.directive";
+/**
+ * Marks an element as the content element to be checked for overflow
+ * when using spTruncatedWithTooltip directive.
+ * Automatically registers itself with the parent TruncatedWithTooltipDirective.
+ */
+export declare class TruncatedWithTooltipContentElementDirective implements OnInit, OnDestroy {
+    elementRef: ElementRef<HTMLElement>;
+    private parentDirective?;
+    constructor(elementRef: ElementRef<HTMLElement>, parentDirective?: TruncatedWithTooltipDirective | undefined);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TruncatedWithTooltipContentElementDirective, [null, { optional: true; skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TruncatedWithTooltipContentElementDirective, "[spTruncatedWithTooltipContent]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Internal wrapper directive that extends TooltipDirective for use with truncated text functionality.
+ *
+ * This directive is designed to be used exclusively as a hostDirective within the
+ * TruncatedWithTooltipDirective, enabling components to support automatic truncation tooltips
+ * without conflicting with user-provided tooltip directives.
+ *
+ * Angular's hostDirectives feature allows a directive to be composed with other directives,
+ * but if we used TooltipDirective directly in components that expose spTruncatedWithTooltip,
+ * it would prevent users from also applying their own spTooltip directive to the same component.
+ * By creating this internal wrapper, we maintain directive composition flexibility while
+ * avoiding selector conflicts.
+ */
+export declare class TruncatedWithTooltipDirectiveInternal extends TooltipDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TruncatedWithTooltipDirectiveInternal, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TruncatedWithTooltipDirectiveInternal, never, never, {}, {}, never, never, true, never>;
+}
 /**
  * Shows a tooltip with the text content of the host element, if the content is
  * overflowing. It also applies inline styles to hide the overflow and show the
@@ -10,6 +40,12 @@ import * as i1 from "./tooltip.directive";
  *
  * @example <something spTruncatedWithTooltip>Overflow will always be truncated</something>
  * @example <something spTruncatedWithTooltip="someCondition">Overflow will be truncated only if someCondition is truthy</something>
+ * @example
+ * By using spTruncatedWithTooltipContent, you can detect overflow on a child element
+ * while keeping the tooltip attached to the host element:
+ * <div spTruncatedWithTooltip>
+ *   <span spTruncatedWithTooltipContent>This text will be checked for overflow</span>
+ * </div>
  */
 export declare class TruncatedWithTooltipDirective implements AfterContentChecked {
     private tooltipDirective;
@@ -18,9 +54,27 @@ export declare class TruncatedWithTooltipDirective implements AfterContentChecke
      * Whether the directive is enabled.
      */
     enabled: BooleanInput;
-    constructor(tooltipDirective: TooltipDirective, elementRef: ElementRef);
+    /**
+     * Optional content element marked with spTruncatedWithTooltipContent directive.
+     * If not provided, the host element will be used.
+     * This is automatically set when a child element has the directive.
+     */
+    contentElementDirective?: TruncatedWithTooltipContentElementDirective;
+    /**
+     * Registers a content element directive.
+     * Called automatically by TruncatedWithTooltipContentElementDirective.
+     * @internal
+     */
+    registerContentElement(directive: TruncatedWithTooltipContentElementDirective): void;
+    /**
+     * Unregisters the content element directive.
+     * Called automatically by TruncatedWithTooltipContentElementDirective.
+     * @internal
+     */
+    unregisterContentElement(): void;
+    constructor(tooltipDirective: TruncatedWithTooltipDirectiveInternal, elementRef: ElementRef);
     ngAfterContentChecked(): void;
     private hasOverflow;
     static ɵfac: i0.ɵɵFactoryDeclaration<TruncatedWithTooltipDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TruncatedWithTooltipDirective, "[spTruncatedWithTooltip]", never, { "enabled": "spTruncatedWithTooltip"; }, {}, never, never, true, [{ directive: typeof i1.TooltipDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TruncatedWithTooltipDirective, "[spTruncatedWithTooltip]", never, { "enabled": "spTruncatedWithTooltip"; }, {}, never, never, true, [{ directive: typeof TruncatedWithTooltipDirectiveInternal; inputs: {}; outputs: {}; }]>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-angular",
-  "version": "3.7.1",
+  "version": "3.8.1",
   "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,12 +16,12 @@
     "@danske/sapphire-icons": "^3.1.0"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^48.0.1",
+    "@danske/sapphire-css": "^49.1.0",
     "@internationalized/message": "^3.1.5",
     "dompurify": "^3.2.6",
     "tslib": "^2.3.0"
   },
-  "gitHead": "62297801a42339d31b5099ad337f29fc5ebd7391",
+  "gitHead": "88e11202ab17bb9830ba1f261d631ab24edf57d2",
   "es2020": "fesm2020/danske-sapphire-angular.mjs",
   "esm2020": "esm2020/danske-sapphire-angular.mjs",
   "fesm2020": "fesm2020/danske-sapphire-angular.mjs",