npm - @design-factory/angular - Versions diffs - 21.1.0-next.1 → 22.0.0-next.0 - Mend

@design-factory/angular 21.1.0-next.1 → 22.0.0-next.0

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.

Files changed (331) hide show

package/fesm2022/design-factory-angular-theme.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, computed, effect, Injectable, provideAppInitializer } from '@angular/core';
+import { inject, DOCUMENT, PLATFORM_ID, signal, computed, effect, Injectable, provideAppInitializer } from '@angular/core';
 /**
  * The DfThemeService is an abstract service that manages the theme state of the application.
@@ -10,6 +10,7 @@ import { inject, PLATFORM_ID, signal, computed, effect, Injectable, provideAppIn
  * @since 21.1
  */
 class DfThemeService {
+    #document = inject(DOCUMENT);
     #preferred;
     #system;
     #toApply;
@@ -31,18 +32,23 @@ class DfThemeService {
         if (isPlatformBrowser(inject(PLATFORM_ID))) {
             defaultMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;
         }
-        this.#preferred = signal(defaultMode, ...(ngDevMode ? [{ debugName: "#preferred" }] : []));
-        this.#system = signal(defaultMode, ...(ngDevMode ? [{ debugName: "#system" }] : []));
-        this.applied = signal(defaultMode, ...(ngDevMode ? [{ debugName: "applied" }] : []));
+        this.#preferred = signal(defaultMode, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#preferred" }] : /* istanbul ignore next */ []));
+        this.#system = signal(defaultMode, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#system" }] : /* istanbul ignore next */ []));
+        this.applied = signal(defaultMode, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "applied" }] : /* istanbul ignore next */ []));
         this.selected = computed(() => this.allOptions.includes(this.#preferred())
             ? this.#preferred()
             : this.allOptions.includes('auto')
                 ? 'auto'
-                : defaultMode, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+                : defaultMode, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
         this.#toApply = computed(() => {
             const selected = this.selected();
             return selected === 'auto' ? this.#system() : selected;
-        }, ...(ngDevMode ? [{ debugName: "#toApply" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#toApply" }] : /* istanbul ignore next */ []));
     }
     init() {
         if (isPlatformBrowser(inject(PLATFORM_ID))) {
@@ -78,7 +84,7 @@ class DfThemeService {
         this.#preferred.set(theme);
     }
     #applyTheme(theme) {
-        document.documentElement.setAttribute('data-df-theme', theme);
+        this.#document.documentElement.setAttribute('data-df-theme', theme);
         this.#themeApplied = true;
         this.applied.set(theme);
     }
@@ -86,7 +92,7 @@ class DfThemeService {
         // Use View Transitions API if available and user has not requested reduced motion
         if (!this.#themeApplied ||
             !this.viewTransitionAnimation ||
-            !document.startViewTransition ||
+            !this.#document.startViewTransition ||
             window.parent !== window ||
             window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
             this.#applyTheme(theme);
@@ -96,18 +102,22 @@ class DfThemeService {
         if (setup) {
             await setup();
         }
-        const viewTransition = document.startViewTransition(() => this.#applyTheme(theme));
+        const viewTransition = this.#document.startViewTransition(() => this.#applyTheme(theme));
         await viewTransition.ready;
-        await animation(theme);
-        await viewTransition.finished;
-        if (cleanup) {
-            await cleanup();
+        try {
+            await animation(theme);
+        }
+        finally {
+            await viewTransition.finished;
+            if (cleanup) {
+                await cleanup();
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfThemeService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfThemeService, providedIn: 'root', useFactory: () => new DfThemeDefaultService() }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfThemeService, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfThemeService, providedIn: 'root', useFactory: () => new DfThemeDefaultService() }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -160,7 +170,7 @@ class DfThemeDefaultService extends DfThemeService {
           from { opacity: 0; }
           to   { opacity: 1; }
         }
-        .df-app-container > .df-topnav > .df-topnav-header {
+        .df-topnav-header {
           view-transition-name: unset !important;
         }
       `;
@@ -173,10 +183,10 @@ class DfThemeDefaultService extends DfThemeService {
         };
         this.init();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfThemeDefaultService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfThemeDefaultService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfThemeDefaultService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfThemeDefaultService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfThemeDefaultService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfThemeDefaultService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 /**

package/fesm2022/design-factory-angular-theme.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"design-factory-angular-theme.mjs","sources":["../../theme/theme.service.ts","../../theme/design-factory-angular-theme.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n computed,\n effect,\n inject,\n Injectable,\n PLATFORM_ID,\n provideAppInitializer,\n Signal,\n signal,\n WritableSignal\n} from '@angular/core';\n\n/*\n The view transition animation configuration for {@link DfThemeService}.\n \n @since 21.1\n /\nexport type DfViewTransitionAnimation<T extends string> = {\n /\n The setup function is called before the view transition starts. It can be used to prepare the DOM for the upcoming theme change, e.g. by adding necessary styles or classes.\n /\n setup?: () => Promise<void> \| void;\n /\n The animation function is called after the view transition has started. It can be used to perform any necessary animations during the theme change. The function receives the theme that is being applied as an argument.\n /\n animation: (theme: T) => Promise<void> \| void;\n /\n The cleanup function is called after the view transition has completed. It can be used to remove any temporary styles or classes added during the setup or animation phases.\n /\n cleanup?: () => Promise<void> \| void;\n};\n\n/\n The DfThemeService is an abstract service that manages the theme state of the application.\n \n It provides functionality to select and apply themes, persist user preferences, and handle system theme changes.\n \n @since 21.1\n /\n@Injectable({\n providedIn: 'root',\n useFactory: () => new DfThemeDefaultService()\n})\nexport abstract class DfThemeService<ThemeMode extends string> {\n // The configuration of the theme service that must be provided by concrete implementations\n /\n An array of all available theme options. Must include at least the default light and dark themes, and optionally 'auto' if the service should support automatic theme selection based on system preferences.\n /\n abstract readonly allOptions: ThemeMode[];\n /\n The key used to store the user's theme preference in local storage. This is required if `syncLocalStorage` is true.\n /\n abstract readonly storageKey: string;\n /\n Whether to synchronize the user's theme selection with local storage. If true, the service will persist the selected theme in local storage and listen for changes to update the theme across tabs/frames.\n /\n abstract readonly syncLocalStorage: boolean;\n /\n The view transition animation configuration. If provided, the service will use the View Transitions API to animate theme changes. If not provided, theme changes will be applied immediately without animation.\n /\n abstract readonly viewTransitionAnimation: DfViewTransitionAnimation<Exclude<ThemeMode, 'auto'>> \| undefined;\n\n readonly #preferred: WritableSignal<ThemeMode>;\n readonly #system: WritableSignal<Exclude<ThemeMode, 'auto'>>;\n readonly #toApply: Signal<Exclude<ThemeMode, 'auto'>>;\n\n /\n The currently selected theme option by the user.\n /\n readonly selected: Signal<ThemeMode>;\n\n /\n The currently applied theme. This signal is triggered after the view transition has started.\n /\n readonly applied: WritableSignal<Exclude<ThemeMode, 'auto'>>;\n\n #themeApplied = false;\n\n constructor(\n /\n The default light theme.\n /\n // eslint-disable-next-line @angular-eslint/prefer-inject\n private readonly defaultLight: Exclude<ThemeMode, 'auto'>,\n /\n The default dark theme.\n /\n // eslint-disable-next-line @angular-eslint/prefer-inject\n private readonly defaultDark: Exclude<ThemeMode, 'auto'>\n ) {\n let defaultMode: Exclude<ThemeMode, 'auto'> = defaultLight;\n if (isPlatformBrowser(inject(PLATFORM_ID))) {\n defaultMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;\n }\n this.#preferred = signal<ThemeMode>(defaultMode);\n this.#system = signal<Exclude<ThemeMode, 'auto'>>(defaultMode);\n this.applied = signal<Exclude<ThemeMode, 'auto'>>(defaultMode);\n\n this.selected = computed(() =>\n this.allOptions.includes(this.#preferred())\n ? this.#preferred()\n : this.allOptions.includes('auto' as ThemeMode)\n ? ('auto' as ThemeMode)\n : defaultMode\n );\n this.#toApply = computed(() => {\n const selected = this.selected();\n return selected === 'auto' ? this.#system() : (selected as Exclude<ThemeMode, 'auto'>);\n });\n }\n\n protected init() {\n if (isPlatformBrowser(inject(PLATFORM_ID))) {\n // System theme preference change handling\n if (this.allOptions.includes('auto' as ThemeMode)) {\n window\n .matchMedia('(prefers-color-scheme: dark)')\n .addEventListener('change', (event) =>\n this.#system.set(event.matches ? this.defaultDark : this.defaultLight)\n );\n }\n\n // Local storage handling\n if (this.syncLocalStorage) {\n this.#preferred.set(window.localStorage.getItem(this.storageKey) as ThemeMode);\n effect(() => window.localStorage.setItem(this.storageKey, this.selected()));\n\n // Updates the theme across tabs/frames\n // Note: it is raised only in \"other\" tabs/frames, not the one that changes the storage\n window.addEventListener('storage', ({ key, newValue }) => {\n if (key === this.storageKey) {\n this.#preferred.set((newValue as ThemeMode) ?? 'auto');\n }\n });\n }\n\n // In the browser - apply with animation (maybe)\n effect(() => void this.#applyThemeWithAnimation(this.#toApply()));\n } else {\n // on the server - just apply directly\n effect(() => this.#applyTheme(this.#toApply()));\n }\n\n // valid selected theme and actually applied theme\n\n this.applied.set(this.#toApply());\n }\n\n setTheme(theme: ThemeMode) {\n this.#preferred.set(theme);\n }\n\n #applyTheme(theme: Exclude<ThemeMode, 'auto'>) {\n document.documentElement.setAttribute('data-df-theme', theme);\n this.#themeApplied = true;\n this.applied.set(theme);\n }\n\n async #applyThemeWithAnimation(theme: Exclude<ThemeMode, 'auto'>) {\n // Use View Transitions API if available and user has not requested reduced motion\n if (\n !this.#themeApplied \|\|\n !this.viewTransitionAnimation \|\|\n !document.startViewTransition \|\|\n window.parent !== window \|\|\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n ) {\n this.#applyTheme(theme);\n return;\n }\n\n const { setup, animation, cleanup } = this.viewTransitionAnimation;\n\n if (setup) {\n await setup();\n }\n\n const viewTransition = document.startViewTransition(() => this.#applyTheme(theme));\n await viewTransition.ready;\n\n await animation(theme);\n\n await viewTransition.finished;\n\n if (cleanup) {\n await cleanup();\n }\n }\n}\n\n/\n The modes supported by the {@link DfThemeDefaultService}.\n \n @since 21.1\n /\nexport type DfThemeDefaultMode = 'auto' \| 'light' \| 'dark';\n/\n The storage key used by the {@link DfThemeDefaultService} to persist the user's theme selection in local storage.\n \n @since 21.1\n /\nexport const DF_THEME_DEFAULT_STORAGE_KEY = 'df-theme';\n\n/\n The default {@link DfThemeService} implementation.\n \n - It supports the modes `auto`, `light` and `dark`, and uses local storage to persist the user's selection.\n * - It provides a cross fade transition when changing themes.\n \n @since 21.1\n /\n@Injectable()\nexport class DfThemeDefaultService extends DfThemeService<DfThemeDefaultMode> {\n override readonly allOptions = ['auto', 'light', 'dark'] satisfies DfThemeDefaultMode[];\n override readonly storageKey = DF_THEME_DEFAULT_STORAGE_KEY;\n override readonly syncLocalStorage = true;\n\n private styleElement!: HTMLStyleElement;\n\n override readonly viewTransitionAnimation = {\n setup: () => {\n this.styleElement = document.createElement('style');\n this.styleElement.textContent = `\n ::view-transition-old(),\n ::view-transition-new() {\n animation: false !important;\n mix-blend-mode: normal !important;\n }\n {\n transition: none !important;\n } \n ::view-transition-old(root) {\n animation: fade-out 300ms ease both !important;\n }\n ::view-transition-new(root) {\n animation: fade-in 300ms ease both !important;\n }\n @keyframes fade-out {\n from { opacity: 1; }\n to { opacity: 0; }\n }\n @keyframes fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .df-app-container > .df-topnav > .df-topnav-header {\n view-transition-name: unset !important;\n }\n `;\n document.head.appendChild(this.styleElement);\n },\n animation: () => {},\n cleanup: () => {\n this.styleElement.remove();\n }\n };\n\n constructor() {\n super('light', 'dark');\n this.init();\n }\n}\n\n/*\n Provides the {@link DfThemeService} and initializes it on app startup.\n \n This should be included in the providers array of the root module or component to ensure the theme service is available and initialized when the application starts.\n \n @since 21.1\n /\nexport const provideDfThemeService = () =>\n provideAppInitializer(() => {\n inject(DfThemeService);\n });\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"design-factory-angular-theme.mjs","sources":["../../theme/theme.service.ts","../../theme/design-factory-angular-theme.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n computed,\n DOCUMENT,\n effect,\n inject,\n Injectable,\n PLATFORM_ID,\n provideAppInitializer,\n Signal,\n signal,\n WritableSignal\n} from '@angular/core';\n\n/*\n The view transition animation configuration for {@link DfThemeService}.\n \n @since 21.1\n /\nexport type DfViewTransitionAnimation<T extends string> = {\n /\n The setup function is called before the view transition starts. It can be used to prepare the DOM for the upcoming theme change, e.g. by adding necessary styles or classes.\n /\n setup?: () => Promise<void> \| void;\n /\n The animation function is called after the view transition has started. It can be used to perform any necessary animations during the theme change. The function receives the theme that is being applied as an argument.\n /\n animation: (theme: T) => Promise<void> \| void;\n /\n The cleanup function is called after the view transition has completed. It can be used to remove any temporary styles or classes added during the setup or animation phases.\n /\n cleanup?: () => Promise<void> \| void;\n};\n\n/\n The DfThemeService is an abstract service that manages the theme state of the application.\n \n It provides functionality to select and apply themes, persist user preferences, and handle system theme changes.\n \n @since 21.1\n /\n@Injectable({\n providedIn: 'root',\n useFactory: () => new DfThemeDefaultService()\n})\nexport abstract class DfThemeService<ThemeMode extends string> {\n // The configuration of the theme service that must be provided by concrete implementations\n /\n An array of all available theme options. Must include at least the default light and dark themes, and optionally 'auto' if the service should support automatic theme selection based on system preferences.\n /\n abstract readonly allOptions: ThemeMode[];\n /\n The key used to store the user's theme preference in local storage. This is required if `syncLocalStorage` is true.\n /\n abstract readonly storageKey: string;\n /\n Whether to synchronize the user's theme selection with local storage. If true, the service will persist the selected theme in local storage and listen for changes to update the theme across tabs/frames.\n /\n abstract readonly syncLocalStorage: boolean;\n /\n The view transition animation configuration. If provided, the service will use the View Transitions API to animate theme changes. If not provided, theme changes will be applied immediately without animation.\n /\n abstract readonly viewTransitionAnimation: DfViewTransitionAnimation<Exclude<ThemeMode, 'auto'>> \| undefined;\n\n readonly #document = inject(DOCUMENT);\n readonly #preferred: WritableSignal<ThemeMode>;\n readonly #system: WritableSignal<Exclude<ThemeMode, 'auto'>>;\n readonly #toApply: Signal<Exclude<ThemeMode, 'auto'>>;\n\n /\n The currently selected theme option by the user.\n /\n readonly selected: Signal<ThemeMode>;\n\n /\n The currently applied theme. This signal is triggered after the view transition has started.\n /\n readonly applied: WritableSignal<Exclude<ThemeMode, 'auto'>>;\n\n #themeApplied = false;\n\n constructor(\n /\n The default light theme.\n /\n // eslint-disable-next-line @angular-eslint/prefer-inject\n private readonly defaultLight: Exclude<ThemeMode, 'auto'>,\n /\n The default dark theme.\n /\n // eslint-disable-next-line @angular-eslint/prefer-inject\n private readonly defaultDark: Exclude<ThemeMode, 'auto'>\n ) {\n let defaultMode: Exclude<ThemeMode, 'auto'> = defaultLight;\n if (isPlatformBrowser(inject(PLATFORM_ID))) {\n defaultMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? defaultDark : defaultLight;\n }\n this.#preferred = signal<ThemeMode>(defaultMode);\n this.#system = signal<Exclude<ThemeMode, 'auto'>>(defaultMode);\n this.applied = signal<Exclude<ThemeMode, 'auto'>>(defaultMode);\n\n this.selected = computed(() =>\n this.allOptions.includes(this.#preferred())\n ? this.#preferred()\n : this.allOptions.includes('auto' as ThemeMode)\n ? ('auto' as ThemeMode)\n : defaultMode\n );\n this.#toApply = computed(() => {\n const selected = this.selected();\n return selected === 'auto' ? this.#system() : (selected as Exclude<ThemeMode, 'auto'>);\n });\n }\n\n protected init() {\n if (isPlatformBrowser(inject(PLATFORM_ID))) {\n // System theme preference change handling\n if (this.allOptions.includes('auto' as ThemeMode)) {\n window\n .matchMedia('(prefers-color-scheme: dark)')\n .addEventListener('change', (event) =>\n this.#system.set(event.matches ? this.defaultDark : this.defaultLight)\n );\n }\n\n // Local storage handling\n if (this.syncLocalStorage) {\n this.#preferred.set(window.localStorage.getItem(this.storageKey) as ThemeMode);\n effect(() => window.localStorage.setItem(this.storageKey, this.selected()));\n\n // Updates the theme across tabs/frames\n // Note: it is raised only in \"other\" tabs/frames, not the one that changes the storage\n window.addEventListener('storage', ({ key, newValue }) => {\n if (key === this.storageKey) {\n this.#preferred.set((newValue as ThemeMode) ?? 'auto');\n }\n });\n }\n\n // In the browser - apply with animation (maybe)\n effect(() => void this.#applyThemeWithAnimation(this.#toApply()));\n } else {\n // on the server - just apply directly\n effect(() => this.#applyTheme(this.#toApply()));\n }\n\n // valid selected theme and actually applied theme\n\n this.applied.set(this.#toApply());\n }\n\n setTheme(theme: ThemeMode) {\n this.#preferred.set(theme);\n }\n\n #applyTheme(theme: Exclude<ThemeMode, 'auto'>) {\n this.#document.documentElement.setAttribute('data-df-theme', theme);\n this.#themeApplied = true;\n this.applied.set(theme);\n }\n\n async #applyThemeWithAnimation(theme: Exclude<ThemeMode, 'auto'>) {\n // Use View Transitions API if available and user has not requested reduced motion\n if (\n !this.#themeApplied \|\|\n !this.viewTransitionAnimation \|\|\n !this.#document.startViewTransition \|\|\n window.parent !== window \|\|\n window.matchMedia('(prefers-reduced-motion: reduce)').matches\n ) {\n this.#applyTheme(theme);\n return;\n }\n\n const { setup, animation, cleanup } = this.viewTransitionAnimation;\n\n if (setup) {\n await setup();\n }\n\n const viewTransition = this.#document.startViewTransition(() => this.#applyTheme(theme));\n await viewTransition.ready;\n\n try {\n await animation(theme);\n } finally {\n await viewTransition.finished;\n\n if (cleanup) {\n await cleanup();\n }\n }\n }\n}\n\n/\n The modes supported by the {@link DfThemeDefaultService}.\n \n @since 21.1\n /\nexport type DfThemeDefaultMode = 'auto' \| 'light' \| 'dark';\n/\n The storage key used by the {@link DfThemeDefaultService} to persist the user's theme selection in local storage.\n \n @since 21.1\n /\nexport const DF_THEME_DEFAULT_STORAGE_KEY = 'df-theme';\n\n/\n The default {@link DfThemeService} implementation.\n \n - It supports the modes `auto`, `light` and `dark`, and uses local storage to persist the user's selection.\n * - It provides a cross fade transition when changing themes.\n \n @since 21.1\n /\n@Injectable()\nexport class DfThemeDefaultService extends DfThemeService<DfThemeDefaultMode> {\n override readonly allOptions = ['auto', 'light', 'dark'] satisfies DfThemeDefaultMode[];\n override readonly storageKey = DF_THEME_DEFAULT_STORAGE_KEY;\n override readonly syncLocalStorage = true;\n\n private styleElement!: HTMLStyleElement;\n\n override readonly viewTransitionAnimation = {\n setup: () => {\n this.styleElement = document.createElement('style');\n this.styleElement.textContent = `\n ::view-transition-old(),\n ::view-transition-new() {\n animation: false !important;\n mix-blend-mode: normal !important;\n }\n {\n transition: none !important;\n } \n ::view-transition-old(root) {\n animation: fade-out 300ms ease both !important;\n }\n ::view-transition-new(root) {\n animation: fade-in 300ms ease both !important;\n }\n @keyframes fade-out {\n from { opacity: 1; }\n to { opacity: 0; }\n }\n @keyframes fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n .df-topnav-header {\n view-transition-name: unset !important;\n }\n `;\n document.head.appendChild(this.styleElement);\n },\n animation: () => {},\n cleanup: () => {\n this.styleElement.remove();\n }\n };\n\n constructor() {\n super('light', 'dark');\n this.init();\n }\n}\n\n/*\n Provides the {@link DfThemeService} and initializes it on app startup.\n \n This should be included in the providers array of the root module or component to ensure the theme service is available and initialized when the application starts.\n \n @since 21.1\n /\nexport const provideDfThemeService = () =>\n provideAppInitializer(() => {\n inject(DfThemeService);\n });\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/design-factory-angular-toggle.mjs ADDED Viewed

@@ -0,0 +1,172 @@
+import * as i0 from '@angular/core';
+import { input, model, booleanAttribute, signal, computed, forwardRef, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { generateId } from '@design-factory/core/utils/id';
+/**
+ * Design Factory toggle switch.
+ *
+ * Renders a native `<input type="checkbox" role="switch">` underneath with a custom visual.
+ * Any projected content is rendered inline-end of the switch (typically the on/off state text,
+ * e.g. `{{ checked() ? 'On' : 'Off' }}`).
+ *
+ * Form integration is handled through `ControlValueAccessor`; `disabled`, `readonly`, and
+ * `required` states flow from the bound Angular form control.
+ *
+ * @experimental 22.0
+ */
+class DfToggle {
+    constructor() {
+        /**
+         * ID of the internal `<input>` element.
+         *
+         * Defaults to a generated `dfId-[counter]` so the internal input always has a stable id that
+         * surrounding labels or form-field markup can target.
+         *
+         * @defaultValue `'dfId-[number]'`
+         */
+        this.id = input(generateId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Checked state of the toggle.
+         *
+         * @defaultValue `false`
+         */
+        this.checked = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        /**
+         * Size of the toggle.
+         *
+         * @defaultValue `'md'`
+         */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * Accessible name for the internal `<input>`. Use when the toggle has no visible label
+         * (e.g. when projected content describes state, not purpose).
+         *
+         * Forwarded to the internal `<input>` as `aria-label`. Prefer {@link ariaLabelledby} when a
+         * visible label element exists.
+         */
+        this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+        /**
+         * IDs of one or more elements that label the internal `<input>`.
+         *
+         * Forwarded to the internal `<input>` as `aria-labelledby`. Used by the surrounding form-field
+         * markup to wire its label element to the toggle.
+         */
+        this.ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+        /**
+         * Disabled state of the toggle.
+         *
+         * Combines additively with the disabled state driven by `ControlValueAccessor.setDisabledState`
+         * (typically `formControl.disable()`): the toggle is disabled if **either** source asks for it.
+         *
+         * Concrete behavior:
+         * - `[disabled]="true"` disables the toggle regardless of the form control state.
+         * - `formControl.disable()` disables the toggle regardless of the `[disabled]` value.
+         * - To re-enable, **both** sources must agree: clear `[disabled]` (or set it to `false`) **and**
+         *   call `formControl.enable()`.
+         * - There is no precedence/last-write-wins: the order in which the two sources change does not
+         *   matter. The combined state is recomputed reactively whenever either source changes.
+         *
+         * Use the input for ad-hoc disabling that does not need a form control (e.g. gating on a sibling
+         * signal); use the form control when the toggle is part of an Angular form.
+         *
+         * @defaultValue `false`
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Disabled state driven by `ControlValueAccessor.setDisabledState` (form-driven channel). */
+        this.cvaDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+        /** Effective disabled state forwarded to the internal `<input>`: input OR form-driven. */
+        this.effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    handleChange(event) {
+        const next = event.target.checked;
+        this.checked.set(next);
+        this.onChange(next);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    /** @internal */
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    /** @internal */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @internal */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @internal */
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfToggle, isStandalone: true, selector: "df-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.df-toggle-sm": "size() === 'sm'", "class.df-toggle-lg": "size() === 'lg'", "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null" }, classAttribute: "df-toggle" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DfToggle),
+                multi: true
+            }
+        ], ngImport: i0, template: `
+    <input
+      type="checkbox"
+      role="switch"
+      class="df-toggle-input"
+      [id]="id()"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [checked]="checked()"
+      [disabled]="effectiveDisabled()"
+      (change)="handleChange($event)"
+      (blur)="handleBlur()"
+    />
+    <span class="df-toggle-content"><ng-content /></span>
+  `, isInline: true, styles: [".df-toggle{display:inline-flex;align-items:center;gap:var(--df-spacing-3);vertical-align:middle;cursor:pointer}.df-toggle:has(.df-toggle-input:disabled){cursor:not-allowed;color:var(--df-color-inert-neutral-main-foreground)}.df-toggle-input{appearance:none;flex:none;width:48px;height:24px;margin:0;padding:0;border:1px solid var(--df-color-neutral-main-default-border);border-radius:var(--df-borderRadius-main-rounded);background-color:var(--df-color-neutral-alt-default-background);cursor:inherit;position:relative}.df-toggle-input:before{content:\"\";position:absolute;inset:3px 2px;background-color:var(--df-color-neutral-main-default-background);-webkit-mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'><circle cx='1' cy='1' r='1' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'><circle cx='1' cy='1' r='1' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:left center;mask-position:left center;transition:mask-position .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-toggle-input:before{transition:none}}.df-toggle-input:checked{background-color:var(--df-color-primary-main-default-background);border-color:var(--df-color-primary-main-default-border)}.df-toggle-input:checked:before{-webkit-mask-position:right center;mask-position:right center;background-color:var(--df-color-primary-alt-default-background)}.df-toggle-input:checked:focus-visible{--df-box-shadow-color: var(--df-color-primary-main-default-border)}.df-toggle-input:focus-visible{outline:0;--df-box-shadow-color: var(--df-color-neutral-main-default-border);box-shadow:0 0 0 2px var(--df-color-inert-neutral-main-background),0 0 0 4px var(--df-box-shadow-color)}.df-toggle-input:disabled{border-color:var(--df-color-disabled-main-border);background-color:var(--df-color-disabled-main-background)}.df-toggle-input:disabled:before{background-color:var(--df-color-disabled-alt-background)}.df-toggle-input:disabled:checked{background-color:var(--df-color-disabled-alt-background)}.df-toggle-input:disabled:checked:before{background-color:var(--df-color-disabled-main-background)}[dir=rtl] .df-toggle-input:before{-webkit-mask-position:right center;mask-position:right center}[dir=rtl] .df-toggle-input:checked:before{-webkit-mask-position:left center;mask-position:left center}.df-toggle-sm .df-toggle-input{width:37px;height:18px}.df-toggle-sm .df-toggle-input:before{inset:2px;-webkit-mask-size:12px;mask-size:12px}.df-toggle-lg .df-toggle-input{width:61px;height:30px}.df-toggle-lg .df-toggle-input:before{inset:2px;-webkit-mask-size:24px;mask-size:24px}.df-toggle-content{font-weight:var(--df-typo-weight-medium)}.df-toggle-content:empty{display:none}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-toggle', encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DfToggle),
+                            multi: true
+                        }
+                    ], host: {
+                        class: 'df-toggle',
+                        '[class.df-toggle-sm]': `size() === 'sm'`,
+                        '[class.df-toggle-lg]': `size() === 'lg'`,
+                        '[attr.id]': 'null',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null'
+                    }, template: `
+    <input
+      type="checkbox"
+      role="switch"
+      class="df-toggle-input"
+      [id]="id()"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [checked]="checked()"
+      [disabled]="effectiveDisabled()"
+      (change)="handleChange($event)"
+      (blur)="handleBlur()"
+    />
+    <span class="df-toggle-content"><ng-content /></span>
+  `, styles: [".df-toggle{display:inline-flex;align-items:center;gap:var(--df-spacing-3);vertical-align:middle;cursor:pointer}.df-toggle:has(.df-toggle-input:disabled){cursor:not-allowed;color:var(--df-color-inert-neutral-main-foreground)}.df-toggle-input{appearance:none;flex:none;width:48px;height:24px;margin:0;padding:0;border:1px solid var(--df-color-neutral-main-default-border);border-radius:var(--df-borderRadius-main-rounded);background-color:var(--df-color-neutral-alt-default-background);cursor:inherit;position:relative}.df-toggle-input:before{content:\"\";position:absolute;inset:3px 2px;background-color:var(--df-color-neutral-main-default-background);-webkit-mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'><circle cx='1' cy='1' r='1' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'><circle cx='1' cy='1' r='1' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:left center;mask-position:left center;transition:mask-position .15s ease-in-out}@media(prefers-reduced-motion:reduce){.df-toggle-input:before{transition:none}}.df-toggle-input:checked{background-color:var(--df-color-primary-main-default-background);border-color:var(--df-color-primary-main-default-border)}.df-toggle-input:checked:before{-webkit-mask-position:right center;mask-position:right center;background-color:var(--df-color-primary-alt-default-background)}.df-toggle-input:checked:focus-visible{--df-box-shadow-color: var(--df-color-primary-main-default-border)}.df-toggle-input:focus-visible{outline:0;--df-box-shadow-color: var(--df-color-neutral-main-default-border);box-shadow:0 0 0 2px var(--df-color-inert-neutral-main-background),0 0 0 4px var(--df-box-shadow-color)}.df-toggle-input:disabled{border-color:var(--df-color-disabled-main-border);background-color:var(--df-color-disabled-main-background)}.df-toggle-input:disabled:before{background-color:var(--df-color-disabled-alt-background)}.df-toggle-input:disabled:checked{background-color:var(--df-color-disabled-alt-background)}.df-toggle-input:disabled:checked:before{background-color:var(--df-color-disabled-main-background)}[dir=rtl] .df-toggle-input:before{-webkit-mask-position:right center;mask-position:right center}[dir=rtl] .df-toggle-input:checked:before{-webkit-mask-position:left center;mask-position:left center}.df-toggle-sm .df-toggle-input{width:37px;height:18px}.df-toggle-sm .df-toggle-input:before{inset:2px;-webkit-mask-size:12px;mask-size:12px}.df-toggle-lg .df-toggle-input{width:61px;height:30px}.df-toggle-lg .df-toggle-input:before{inset:2px;-webkit-mask-size:24px;mask-size:24px}.df-toggle-content{font-weight:var(--df-typo-weight-medium)}.df-toggle-content:empty{display:none}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { DfToggle };
+//# sourceMappingURL=design-factory-angular-toggle.mjs.map

package/fesm2022/design-factory-angular-toggle.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"design-factory-angular-toggle.mjs","sources":["../../toggle/toggle.ts","../../toggle/design-factory-angular-toggle.ts"],"sourcesContent":["import {\n booleanAttribute,\n Component,\n computed,\n forwardRef,\n input,\n model,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { generateId } from '@design-factory/core/utils/id';\n\n/**\n * Design Factory toggle switch.\n *\n * Renders a native `<input type=\"checkbox\" role=\"switch\">` underneath with a custom visual.\n * Any projected content is rendered inline-end of the switch (typically the on/off state text,\n * e.g. `{{ checked() ? 'On' : 'Off' }}`).\n *\n * Form integration is handled through `ControlValueAccessor`; `disabled`, `readonly`, and\n * `required` states flow from the bound Angular form control.\n *\n * @experimental 22.0\n */\n@Component({\n selector: 'df-toggle',\n encapsulation: ViewEncapsulation.None,\n styles: \"@use '@design-factory/components-styles/toggle';\",\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => DfToggle),\n multi: true\n }\n ],\n host: {\n class: 'df-toggle',\n '[class.df-toggle-sm]': `size() === 'sm'`,\n '[class.df-toggle-lg]': `size() === 'lg'`,\n '[attr.id]': 'null',\n '[attr.aria-label]': 'null',\n '[attr.aria-labelledby]': 'null'\n },\n template: `\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"df-toggle-input\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [checked]=\"checked()\"\n [disabled]=\"effectiveDisabled()\"\n (change)=\"handleChange($event)\"\n (blur)=\"handleBlur()\"\n />\n <span class=\"df-toggle-content\"><ng-content /></span>\n `\n})\nexport class DfToggle implements ControlValueAccessor {\n /**\n * ID of the internal `<input>` element.\n *\n * Defaults to a generated `dfId-[counter]` so the internal input always has a stable id that\n * surrounding labels or form-field markup can target.\n *\n * @defaultValue `'dfId-[number]'`\n */\n readonly id = input<string>(generateId());\n\n /**\n * Checked state of the toggle.\n *\n * @defaultValue `false`\n */\n readonly checked = model<boolean>(false);\n\n /**\n * Size of the toggle.\n *\n * @defaultValue `'md'`\n */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /**\n * Accessible name for the internal `<input>`. Use when the toggle has no visible label\n * (e.g. when projected content describes state, not purpose).\n *\n * Forwarded to the internal `<input>` as `aria-label`. Prefer {@link ariaLabelledby} when a\n * visible label element exists.\n */\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n /**\n * IDs of one or more elements that label the internal `<input>`.\n *\n * Forwarded to the internal `<input>` as `aria-labelledby`. Used by the surrounding form-field\n * markup to wire its label element to the toggle.\n */\n readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n\n /**\n * Disabled state of the toggle.\n *\n * Combines additively with the disabled state driven by `ControlValueAccessor.setDisabledState`\n * (typically `formControl.disable()`): the toggle is disabled if **either** source asks for it.\n *\n * Concrete behavior:\n * - `[disabled]=\"true\"` disables the toggle regardless of the form control state.\n * - `formControl.disable()` disables the toggle regardless of the `[disabled]` value.\n * - To re-enable, **both** sources must agree: clear `[disabled]` (or set it to `false`) **and**\n * call `formControl.enable()`.\n * - There is no precedence/last-write-wins: the order in which the two sources change does not\n * matter. The combined state is recomputed reactively whenever either source changes.\n *\n * Use the input for ad-hoc disabling that does not need a form control (e.g. gating on a sibling\n * signal); use the form control when the toggle is part of an Angular form.\n *\n * @defaultValue `false`\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /** Disabled state driven by `ControlValueAccessor.setDisabledState` (form-driven channel). */\n private readonly cvaDisabled = signal(false);\n\n /** Effective disabled state forwarded to the internal `<input>`: input OR form-driven. */\n protected readonly effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled());\n\n private onChange: (value: boolean) => void = () => {};\n private onTouched: () => void = () => {};\n\n protected handleChange(event: Event): void {\n const next = (event.target as HTMLInputElement).checked;\n this.checked.set(next);\n this.onChange(next);\n }\n\n protected handleBlur(): void {\n this.onTouched();\n }\n\n /** @internal */\n writeValue(value: boolean): void {\n this.checked.set(!!value);\n }\n\n /** @internal */\n registerOnChange(fn: (value: boolean) => void): void {\n this.onChange = fn;\n }\n\n /** @internal */\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /** @internal */\n setDisabledState(isDisabled: boolean): void {\n this.cvaDisabled.set(isDisabled);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/design-factory-angular-tooltip.mjs ADDED Viewed

@@ -0,0 +1,138 @@
+import * as i0 from '@angular/core';
+import { input, ViewEncapsulation, Component, inject, ApplicationRef, DOCUMENT, Injector, EnvironmentInjector, effect, untracked, createComponent, Directive } from '@angular/core';
+import { AgnosWidgetDirective, callWidgetFactory, useDirectiveForHost, useDirectiveForElement, auBooleanAttribute, provideDfComponentConfig, injectDfComponentConfig } from '@design-factory/angular/internals';
+import { createTooltip } from '@design-factory/core/components/tooltip';
+class DfTooltipWindow {
+    constructor() {
+        this.widget = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTooltipWindow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfTooltipWindow, isStandalone: true, selector: "df-tooltip-window", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.df-tooltip-sm": "widget().state.size() === 'sm'", "class.df-tooltip-lg": "widget().state.size() === 'lg'" }, classAttribute: "df-tooltip-window" }, ngImport: i0, template: `{{ widget().state.content() }}`, isInline: true, styles: [".df-fade{transition:opacity .15s linear}@media(prefers-reduced-motion:reduce){.df-fade{transition:none}}.df-fade:not(.df-show){opacity:0}.df-hidden{display:none!important}.df-tooltip-window{z-index:2020;display:block;max-width:320px;padding:var(--df-spacing-2) var(--df-spacing-5);font-size:var(--df-typo-sizing-default);color:var(--df-color-inert-neutral-alt-foreground);text-align:center;background-color:var(--df-color-tooltip-background);border-radius:var(--df-borderRadius-main-medium);overflow-wrap:break-word}.df-tooltip-window.df-tooltip-sm{border-radius:var(--df-borderRadius-main-small);font-size:var(--df-typo-sizing-small);padding:var(--df-spacing-2) var(--df-spacing-3)}.df-tooltip-window.df-tooltip-lg{border-radius:var(--df-borderRadius-main-large);font-size:var(--df-typo-sizing-large);padding:var(--df-spacing-3) var(--df-spacing-6)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTooltipWindow, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-tooltip-window', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'df-tooltip-window',
+                        '[class.df-tooltip-sm]': "widget().state.size() === 'sm'",
+                        '[class.df-tooltip-lg]': "widget().state.size() === 'lg'"
+                    }, template: `{{ widget().state.content() }}`, styles: [".df-fade{transition:opacity .15s linear}@media(prefers-reduced-motion:reduce){.df-fade{transition:none}}.df-fade:not(.df-show){opacity:0}.df-hidden{display:none!important}.df-tooltip-window{z-index:2020;display:block;max-width:320px;padding:var(--df-spacing-2) var(--df-spacing-5);font-size:var(--df-typo-sizing-default);color:var(--df-color-inert-neutral-alt-foreground);text-align:center;background-color:var(--df-color-tooltip-background);border-radius:var(--df-borderRadius-main-medium);overflow-wrap:break-word}.df-tooltip-window.df-tooltip-sm{border-radius:var(--df-borderRadius-main-small);font-size:var(--df-typo-sizing-small);padding:var(--df-spacing-2) var(--df-spacing-3)}.df-tooltip-window.df-tooltip-lg{border-radius:var(--df-borderRadius-main-large);font-size:var(--df-typo-sizing-large);padding:var(--df-spacing-3) var(--df-spacing-6)}\n"] }]
+        }], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }] } });
+/**
+ * A directive that attaches a tooltip to its host element.
+ *
+ * The tooltip is shown when the host element is hovered, receives keyboard focus or long press, and hidden when the mouse leaves,
+ * the element loses keyboard focus, or the user presses `Escape`. The tooltip window is rendered in `document.body` and
+ * positioned next to the host using the configured placement preference.
+ *
+ * @since 22.0
+ */
+class DfTooltip extends AgnosWidgetDirective {
+    constructor() {
+        const widget = callWidgetFactory(createTooltip, {
+            afterInit: () => {
+                useDirectiveForHost(widget.directives.referenceDirective);
+                const applicationRef = inject(ApplicationRef);
+                const document = inject(DOCUMENT);
+                const injector = inject(Injector);
+                const environmentInjector = inject(EnvironmentInjector);
+                effect((onCleanup) => {
+                    if (!widget.state.hidden()) {
+                        untracked(() => {
+                            const hostElement = document.body.appendChild(document.createElement('df-tooltip-window'));
+                            const tooltipWindow = createComponent(DfTooltipWindow, {
+                                hostElement,
+                                elementInjector: injector,
+                                environmentInjector
+                            });
+                            useDirectiveForElement(hostElement, widget.directives.floatingDirective, tooltipWindow.injector);
+                            tooltipWindow.setInput('widget', widget);
+                            applicationRef.attachView(tooltipWindow.hostView);
+                            tooltipWindow.changeDetectorRef.detectChanges();
+                            onCleanup(() => {
+                                applicationRef.detachView(tooltipWindow.hostView);
+                                tooltipWindow.destroy();
+                                hostElement.remove();
+                            });
+                        });
+                    }
+                });
+            }
+        });
+        super(widget);
+        /**
+         * Text content to be displayed inside the tooltip.
+         */
+        this.content = input(undefined, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'dfTooltip' });
+        /**
+         * Size of the tooltip.
+         */
+        this.size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'dfTooltipSize' });
+        /**
+         * List of placements, in order of preference. The first valid placement will be used.
+         */
+        this.placement = input(undefined, { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'dfTooltipPlacement' });
+        /**
+         * Whether the tooltip is disabled. When `true`, the tooltip will not be displayed, even if the reference element is focused, hovered or long-pressed.
+         */
+        this.disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'dfTooltipDisabled', transform: auBooleanAttribute });
+        /**
+         * Whether showing or hiding the tooltip should be animated.
+         */
+        this.animated = input(undefined, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), alias: 'dfTooltipAnimated', transform: auBooleanAttribute });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: DfTooltip, isStandalone: true, selector: "[dfTooltip]", inputs: { content: { classPropertyName: "content", publicName: "dfTooltip", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "dfTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "dfTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "dfTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "dfTooltipAnimated", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dfTooltip]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfTooltip", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfTooltipSize", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfTooltipPlacement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfTooltipDisabled", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfTooltipAnimated", required: false }] }] } });
+/**
+ * Tooltip config key in the global DF component config.
+ * @since 22.0
+ */
+const TOOLTIP_CONFIG_KEY = 'tooltip';
+/**
+ * Provides the configuration for the tooltip component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfTooltipConfig({ animated: false })]
+ * })
+ * export class MyHomeComponent {}
+ * ```
+ *
+ * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.
+ * @since 22.0
+ */
+const provideDfTooltipConfig = provideDfComponentConfig(TOOLTIP_CONFIG_KEY);
+/**
+ * Injects the configuration for the tooltip component.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   providers: [provideDfTooltipConfig()]
+ * })
+ * export class MyTooltipComponent {
+ *   readonly tooltipConfig = injectDfTooltipConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the tooltip configuration.
+ * @since 22.0
+ */
+const injectDfTooltipConfig = injectDfComponentConfig(TOOLTIP_CONFIG_KEY);
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { DfTooltip, TOOLTIP_CONFIG_KEY, injectDfTooltipConfig, provideDfTooltipConfig };
+//# sourceMappingURL=design-factory-angular-tooltip.mjs.map

package/fesm2022/design-factory-angular-tooltip.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"design-factory-angular-tooltip.mjs","sources":["../../tooltip/tooltip.ts","../../tooltip/tooltip.config.ts","../../tooltip/design-factory-angular-tooltip.ts"],"sourcesContent":["import {\n ApplicationRef,\n Component,\n createComponent,\n Directive,\n DOCUMENT,\n effect,\n EnvironmentInjector,\n inject,\n Injector,\n input,\n untracked,\n ViewEncapsulation\n} from '@angular/core';\nimport {\n AgnosWidgetDirective,\n AngularWidget,\n auBooleanAttribute,\n callWidgetFactory,\n useDirectiveForElement,\n useDirectiveForHost\n} from '@design-factory/angular/internals';\nimport { createTooltip, TooltipPlacement, TooltipSize, TooltipWidget } from '@design-factory/core/components/tooltip';\n\n/**\n * Valid placement values for the tooltip.\n * Includes all individual placement values plus `'auto'`, `'vertical'` and `'horizontal'` shortcuts.\n *\n * - `'auto'` expands to `'vertical horizontal'`\n * - `'vertical'` expands to `'top top-start top-end bottom bottom-start bottom-end'`\n * - `'horizontal'` expands to `'end end-end end-start start start-end start-start'`\n *\n * @since 22.0\n */\nexport type DfTooltipPlacement = TooltipPlacement;\n\n/**\n * Accepted value for the tooltip `placement` input.\n *\n * Either an array of placements or a space-separated string of placements, in order of preference.\n * The first placement that fits the viewport will be used.\n *\n * @since 22.0\n */\nexport type DfTooltipPlacementArray = DfTooltipPlacement[] | `${DfTooltipPlacement}${string}`;\n\n/**\n * Available tooltip sizes.\n * @since 22.0\n */\nexport type DfTooltipSize = TooltipSize;\n\n@Component({\n selector: 'df-tooltip-window',\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'df-tooltip-window',\n '[class.df-tooltip-sm]': \"widget().state.size() === 'sm'\",\n '[class.df-tooltip-lg]': \"widget().state.size() === 'lg'\"\n },\n styles: \"@use '@design-factory/components-styles/tooltip';\",\n template: `{{ widget().state.content() }}`\n})\nclass DfTooltipWindow {\n readonly widget = input.required<AngularWidget<TooltipWidget>>();\n}\n\n/**\n * A directive that attaches a tooltip to its host element.\n *\n * The tooltip is shown when the host element is hovered, receives keyboard focus or long press, and hidden when the mouse leaves,\n * the element loses keyboard focus, or the user presses `Escape`. The tooltip window is rendered in `document.body` and\n * positioned next to the host using the configured placement preference.\n *\n * @since 22.0\n */\n@Directive({\n selector: '[dfTooltip]'\n})\nexport class DfTooltip extends AgnosWidgetDirective<TooltipWidget> {\n /**\n * Text content to be displayed inside the tooltip.\n */\n readonly content = input<string | null | undefined>(undefined, { alias: 'dfTooltip' });\n\n /**\n * Size of the tooltip.\n */\n readonly size = input<DfTooltipSize | undefined>(undefined, { alias: 'dfTooltipSize' });\n\n /**\n * List of placements, in order of preference. The first valid placement will be used.\n */\n readonly placement = input<DfTooltipPlacementArray | undefined>(undefined, { alias: 'dfTooltipPlacement' });\n\n /**\n * Whether the tooltip is disabled. When `true`, the tooltip will not be displayed, even if the reference element is focused, hovered or long-pressed.\n */\n readonly disabled = input(undefined, { alias: 'dfTooltipDisabled', transform: auBooleanAttribute });\n\n /**\n * Whether showing or hiding the tooltip should be animated.\n */\n readonly animated = input(undefined, { alias: 'dfTooltipAnimated', transform: auBooleanAttribute });\n\n constructor() {\n const widget = callWidgetFactory(createTooltip, {\n afterInit: () => {\n useDirectiveForHost(widget.directives.referenceDirective);\n const applicationRef = inject(ApplicationRef);\n const document = inject(DOCUMENT);\n const injector = inject(Injector);\n const environmentInjector = inject(EnvironmentInjector);\n effect((onCleanup) => {\n if (!widget.state.hidden()) {\n untracked(() => {\n const hostElement = document.body.appendChild(document.createElement('df-tooltip-window'));\n const tooltipWindow = createComponent(DfTooltipWindow, {\n hostElement,\n elementInjector: injector,\n environmentInjector\n });\n useDirectiveForElement(hostElement, widget.directives.floatingDirective, tooltipWindow.injector);\n tooltipWindow.setInput('widget', widget);\n applicationRef.attachView(tooltipWindow.hostView);\n tooltipWindow.changeDetectorRef.detectChanges();\n onCleanup(() => {\n applicationRef.detachView(tooltipWindow.hostView);\n tooltipWindow.destroy();\n hostElement.remove();\n });\n });\n }\n });\n }\n });\n\n super(widget);\n }\n}\n","import type { TooltipProps } from '@design-factory/core/components/tooltip';\nimport { injectDfComponentConfig, provideDfComponentConfig } from '@design-factory/angular/internals';\n\n/**\n * Configuration options supported by `provideDfTooltipConfig`.\n *\n * These defaults apply to every `DfTooltip` instance within the providing injector, unless explicitly overridden on\n * the directive itself.\n *\n * @since 22.0\n */\nexport type DfTooltipConfig = Pick<TooltipProps, 'animated'>;\n\n/**\n * Tooltip config key in the global DF component config.\n * @since 22.0\n */\nexport const TOOLTIP_CONFIG_KEY = 'tooltip' as const;\n\n/**\n * Provides the configuration for the tooltip component.\n *\n * @example\n * ```ts\n * @Component({\n * providers: [provideDfTooltipConfig({ animated: false })]\n * })\n * export class MyHomeComponent {}\n * ```\n *\n * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.\n * @since 22.0\n */\nexport const provideDfTooltipConfig = provideDfComponentConfig<DfTooltipConfig>(TOOLTIP_CONFIG_KEY);\n\n/**\n * Injects the configuration for the tooltip component.\n *\n * @example\n * ```ts\n * @Component({\n * providers: [provideDfTooltipConfig()]\n * })\n * export class MyTooltipComponent {\n * readonly tooltipConfig = injectDfTooltipConfig();\n * }\n * ```\n *\n * @returns A writable signal containing the tooltip configuration.\n * @since 22.0\n */\nexport const injectDfTooltipConfig = injectDfComponentConfig<DfTooltipConfig>(TOOLTIP_CONFIG_KEY);\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}