npm - @ngneers/controls - Versions diffs - 0.0.1-pre5 → 0.0.1-pre7 - Mend

@ngneers/controls 0.0.1-pre5 → 0.0.1-pre7

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 (168) hide show

package/fesm2022/ngneers-controls-toast.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngneers-controls-toast.mjs","sources":["../../src/toast/defaults.ts","../../src/toast/toast.ts","../../src/toast/toast.html","../../src/toast/toast-host.ts","../../src/toast/toast-host.html","../../src/toast/toast-manager.ts","../../src/toast/provider.ts","../../src/toast/toast-creator.ts","../../src/toast/ngneers-controls-toast.ts"],"sourcesContent":["import type { NgnToastOptions } from './types';\r\n\r\nexport const DEFAULT_TOAST_OPTIONS: NgnToastOptions = {\r\n closable: false,\r\n autoHide: 5000,\r\n};\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n Component,\r\n ChangeDetectionStrategy,\r\n input,\r\n TemplateRef,\r\n output,\r\n type OnInit,\r\n} from '@angular/core';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';\r\n\r\nimport { DEFAULT_TOAST_OPTIONS } from './defaults';\r\n\r\nimport type { ContentTemplateType, HeaderTemplateType } from './types';\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/*\r\n @category control\r\n /\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'ngn-toast',\r\n templateUrl: './toast.html',\r\n imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon],\r\n providers: [provideSelf(NgnToast)],\r\n host: {\r\n '(mouseenter)': 'mouseEnter()',\r\n '(mouseleave)': 'mouseLeave()',\r\n '[animate.enter]': \"theme.class('anim-enter')\",\r\n '[animate.leave]': \"theme.class('anim-leave')\",\r\n role: 'alert',\r\n 'aria-live': 'assertive',\r\n },\r\n})\r\nexport class NgnToast extends NgnBase<'toast'> implements OnInit {\r\n protected readonly theme = this.injectThemeTemplate(toastControlTemplate, 'root');\r\n\r\n public readonly header = input<string>();\r\n public readonly content = input<string>();\r\n\r\n public readonly icon = input<IconType>();\r\n public readonly closeIcon = input<IconType>();\r\n public readonly closable = input<boolean \| undefined>(DEFAULT_TOAST_OPTIONS.closable);\r\n public readonly autoHide = input<number \| false \| undefined>(DEFAULT_TOAST_OPTIONS.autoHide);\r\n\r\n public readonly templateContent = input<TemplateRef<ContentTemplateType> \| null>();\r\n public readonly templateHeader = input<TemplateRef<HeaderTemplateType> \| null>();\r\n\r\n public readonly closeToast = output<void>();\r\n private _closeTimeout?: number;\r\n\r\n public ngOnInit(): void {\r\n this.startHideTimer();\r\n }\r\n\r\n private startHideTimer() {\r\n const autoHide = this.autoHide();\r\n if (autoHide && autoHide > 0) {\r\n this._closeTimeout = setTimeout(() => this.close(), autoHide) as unknown as number;\r\n }\r\n }\r\n\r\n protected close() {\r\n this.closeToast.emit();\r\n if (this._closeTimeout) {\r\n clearTimeout(this._closeTimeout);\r\n }\r\n }\r\n\r\n protected mouseEnter(): void {\r\n if (this._closeTimeout) {\r\n clearTimeout(this._closeTimeout);\r\n this._closeTimeout = undefined;\r\n }\r\n }\r\n\r\n protected mouseLeave(): void {\r\n this.startHideTimer();\r\n }\r\n}\r\n","@if (templateHeader(); as headerTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n header: header(),\r\n closable: !!closable(),\r\n closeToast: close.bind(this),\r\n }\"\r\n ></ng-container>\r\n} @else {\r\n <div [ptInt]=\"this\" [ptClass]=\"'defaultHeader'\">\r\n <span [ptInt]=\"this\" [ptClass]=\"'defaultHeaderText'\">\r\n @if (icon(); as icon) {\r\n <ngn-icon [icon]=\"icon\" />\r\n }\r\n {{ header() }}\r\n </span>\r\n @if (closable()) {\r\n <button ngnButton kind=\"icon\" (click)=\"close()\">\r\n <ngn-icon [defaultIcon]=\"'xmark'\" [icon]=\"closeIcon()\" />\r\n </button>\r\n }\r\n </div>\r\n}\r\n@if (templateContent(); as contentTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n content: content(),\r\n }\"\r\n ></ng-container>\r\n} @else {\r\n <div [ptInt]=\"this\" [ptClass]=\"'defaultContent'\">\r\n {{ content() }}\r\n </div>\r\n}\r\n","import {\r\n afterNextRender,\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n inject,\r\n} from '@angular/core';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\nimport { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';\r\n\r\nimport { NgnToast } from './toast';\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\n/\r\n The host component that renders toasts.\r\n /\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'ngn-toast-host',\r\n templateUrl: 'toast-host.html',\r\n imports: [NgnToast],\r\n host: {\r\n '[attr.popover]': '\"manual\"',\r\n },\r\n})\r\nexport class NgnToastHost extends NgnBase<'toast'> {\r\n protected readonly theme = this.injectThemeTemplate(toastControlTemplate, 'host');\r\n private readonly _toastManager = inject(NgnToastManager);\r\n private readonly _el = inject<ElementRef<HTMLElement>>(ElementRef);\r\n\r\n protected readonly toasts = this._toastManager.toasts;\r\n\r\n constructor() {\r\n super();\r\n afterNextRender(() => {\r\n this._el.nativeElement.showPopover();\r\n });\r\n }\r\n\r\n protected removeToast(id: number): void {\r\n this._toastManager.removeToast(id);\r\n }\r\n}\r\n","@for (toast of toasts(); track toast.id) {\r\n <ngn-toast\r\n [header]=\"toast.header\"\r\n [content]=\"toast.content\"\r\n [color]=\"toast.color\"\r\n [icon]=\"toast.icon\"\r\n [autoHide]=\"toast.autoHide\"\r\n [templateContent]=\"toast.contentTemplate\"\r\n [templateHeader]=\"toast.headerTemplate\"\r\n [closable]=\"!!toast.closable\"\r\n (closeToast)=\"removeToast(toast.id)\"\r\n />\r\n}\r\n","import {\r\n ApplicationRef,\r\n ComponentRef,\r\n createComponent,\r\n inject,\r\n Injectable,\r\n type OnDestroy,\r\n signal,\r\n} from '@angular/core';\r\nimport { Platform } from '@ngneers/controls/api/ng';\r\nimport { NgnError } from '@ngneers/controls/utils';\r\nimport { injectOrThrow } from '@ngneers/controls/utils-ng';\r\n\r\nimport { DEFAULT_TOAST_OPTIONS } from './defaults';\r\nimport { NGN_TOAST_USER_DEFAULTS } from './provider';\r\nimport { NgnToastHost } from './toast-host';\r\n\r\nimport type { NgnToastOptions } from './types';\r\n\r\ntype ToastFull = NgnToastOptions & { id: number };\r\n\r\n@Injectable()\r\nexport class NgnToastManager implements OnDestroy {\r\n private readonly _toasts = signal<ToastFull[]>([]);\r\n private readonly _appRef = inject(ApplicationRef);\r\n private readonly _userDefaults = injectOrThrow(\r\n NGN_TOAST_USER_DEFAULTS,\r\n 'NgnToastManager',\r\n 'Failed to inject NGN_TOAST_USER_DEFAULTS, make sure to use withToasts() to provide ngn toasts!'\r\n );\r\n private _nextId = 0;\r\n\r\n public readonly toasts = this._toasts.asReadonly();\r\n private _component?: ComponentRef<NgnToastHost>;\r\n\r\n constructor() {\r\n if (!inject(Platform).isBrowser) {\r\n return;\r\n }\r\n // Defer creation to avoid issues with Angular's injection tree during app initialization\r\n queueMicrotask(() => {\r\n // Create and attach the toast host component to the application's root\r\n this._component = createComponent(NgnToastHost, {\r\n environmentInjector: this._appRef.injector,\r\n });\r\n this._appRef.attachView(this._component.hostView);\r\n const hostEl = this._component.location.nativeElement as HTMLElement;\r\n const appRootEl = this._appRef.components[0]?.location.nativeElement as\r\n \| undefined\r\n \| HTMLElement;\r\n if (!appRootEl) {\r\n throw new NgnError(\r\n 'NgnToastManager',\r\n 'Failed to find application root element to attach toast host!'\r\n );\r\n }\r\n appRootEl.appendChild(hostEl);\r\n });\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this._component) {\r\n this._appRef.detachView(this._component.hostView);\r\n this._component.destroy();\r\n this._component = undefined;\r\n }\r\n }\r\n\r\n public removeToast(id: number): void {\r\n this._toasts.update(toasts => toasts.filter(t => t.id !== id));\r\n }\r\n\r\n public addToast(options: NgnToastOptions): number {\r\n const id = this._nextId++;\r\n const toast: ToastFull = { ...DEFAULT_TOAST_OPTIONS, ...this._userDefaults, ...options, id };\r\n this._toasts.update(toasts => [...toasts, toast]);\r\n return id;\r\n }\r\n}\r\n","import { InjectionToken, type Provider } from '@angular/core';\r\n\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\nimport type { NgnToastOptionsMeta } from './types';\r\n\r\nexport type NgnToastFeature = {\r\n providers: Provider[];\r\n};\r\n\r\nexport const NGN_TOAST_USER_DEFAULTS = new InjectionToken<NgnToastOptionsMeta>(\r\n 'NGN_TOAST_USER_DEFAULTS'\r\n);\r\n\r\nexport function withToasts(defaultOptions?: NgnToastOptionsMeta): NgnToastFeature {\r\n return {\r\n providers: [\r\n NgnToastManager,\r\n {\r\n provide: NGN_TOAST_USER_DEFAULTS,\r\n useValue: defaultOptions \|\| {},\r\n },\r\n ],\r\n };\r\n}\r\n","import { Injector, runInInjectionContext } from '@angular/core';\r\nimport { injectOrThrow } from '@ngneers/controls/utils-ng';\r\n\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\nimport type { NgnToastOptions, NgnToastRef } from './types';\r\n\r\nclass ToastCreator {\r\n private readonly _manager: NgnToastManager;\r\n\r\n constructor() {\r\n this._manager = injectOrThrow(\r\n NgnToastManager,\r\n 'injectToastCreator',\r\n 'NgnToastManager not found. Make sure to use withToasts() to provide ngn toasts!'\r\n );\r\n }\r\n\r\n public show(options: NgnToastOptions): NgnToastRef {\r\n const id = this._manager.addToast(options);\r\n return {\r\n hide: () => this._manager.removeToast(id),\r\n };\r\n }\r\n}\r\n\r\nexport function injectToastCreator(injector?: Injector): ToastCreator {\r\n if (injector) {\r\n return runInInjectionContext(injector, () => injectToastCreator());\r\n }\r\n return new ToastCreator();\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ngneers-controls-toast.mjs","sources":["../../src/toast/defaults.ts","../../src/toast/toast.ts","../../src/toast/toast.html","../../src/toast/toast-host.ts","../../src/toast/toast-host.html","../../src/toast/toast-manager.ts","../../src/toast/provider.ts","../../src/toast/toast-creator.ts","../../src/toast/ngneers-controls-toast.ts"],"sourcesContent":["import type { NgnToastOptions } from './types';\r\n\r\nexport const DEFAULT_TOAST_OPTIONS: NgnToastOptions = {\r\n closable: false,\r\n autoHide: 5000,\r\n};\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n Component,\r\n ChangeDetectionStrategy,\r\n input,\r\n TemplateRef,\r\n output,\r\n type OnInit,\r\n} from '@angular/core';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';\r\n\r\nimport { DEFAULT_TOAST_OPTIONS } from './defaults';\r\n\r\nimport type { ContentTemplateType, HeaderTemplateType } from './types';\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/*\r\n @category control\r\n /\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'ngn-toast',\r\n templateUrl: './toast.html',\r\n imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon],\r\n providers: [provideSelf(NgnToast)],\r\n host: {\r\n '(mouseenter)': 'mouseEnter()',\r\n '(mouseleave)': 'mouseLeave()',\r\n '[animate.enter]': \"theme.class('anim-enter')\",\r\n '[animate.leave]': \"theme.class('anim-leave')\",\r\n role: 'alert',\r\n 'aria-live': 'assertive',\r\n },\r\n})\r\nexport class NgnToast extends NgnBase<'toast'> implements OnInit {\r\n protected readonly theme = this.injectThemeTemplate(toastControlTemplate, 'root');\r\n\r\n public readonly header = input<string>();\r\n public readonly content = input<string>();\r\n\r\n public readonly icon = input<IconType>();\r\n public readonly closeIcon = input<IconType>();\r\n public readonly closable = input<boolean \| undefined>(DEFAULT_TOAST_OPTIONS.closable);\r\n public readonly autoHide = input<number \| false \| undefined>(DEFAULT_TOAST_OPTIONS.autoHide);\r\n\r\n public readonly templateContent = input<TemplateRef<ContentTemplateType> \| null>();\r\n public readonly templateHeader = input<TemplateRef<HeaderTemplateType> \| null>();\r\n\r\n public readonly closeToast = output<void>();\r\n private _closeTimeout?: number;\r\n\r\n public ngOnInit(): void {\r\n this.startHideTimer();\r\n }\r\n\r\n private startHideTimer() {\r\n const autoHide = this.autoHide();\r\n if (autoHide && autoHide > 0) {\r\n this._closeTimeout = setTimeout(() => this.close(), autoHide) as unknown as number;\r\n }\r\n }\r\n\r\n protected close() {\r\n this.closeToast.emit();\r\n if (this._closeTimeout) {\r\n clearTimeout(this._closeTimeout);\r\n }\r\n }\r\n\r\n protected mouseEnter(): void {\r\n if (this._closeTimeout) {\r\n clearTimeout(this._closeTimeout);\r\n this._closeTimeout = undefined;\r\n }\r\n }\r\n\r\n protected mouseLeave(): void {\r\n this.startHideTimer();\r\n }\r\n}\r\n","@if (templateHeader(); as headerTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"headerTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n header: header(),\r\n closable: !!closable(),\r\n closeToast: close.bind(this),\r\n }\"\r\n ></ng-container>\r\n} @else {\r\n <div [ptInt]=\"this\" [ptClass]=\"'defaultHeader'\">\r\n <span [ptInt]=\"this\" [ptClass]=\"'defaultHeaderText'\">\r\n @if (icon(); as icon) {\r\n <ngn-icon [icon]=\"icon\" />\r\n }\r\n {{ header() }}\r\n </span>\r\n @if (closable()) {\r\n <button ngnButton kind=\"icon\" (click)=\"close()\">\r\n <ngn-icon [defaultIcon]=\"'toast-close'\" [icon]=\"closeIcon()\" />\r\n </button>\r\n }\r\n </div>\r\n}\r\n@if (templateContent(); as contentTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"contentTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n content: content(),\r\n }\"\r\n ></ng-container>\r\n} @else {\r\n <div [ptInt]=\"this\" [ptClass]=\"'defaultContent'\">\r\n {{ content() }}\r\n </div>\r\n}\r\n","import {\r\n afterNextRender,\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n inject,\r\n} from '@angular/core';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\nimport { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';\r\n\r\nimport { NgnToast } from './toast';\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\n/\r\n The host component that renders toasts.\r\n /\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'ngn-toast-host',\r\n templateUrl: 'toast-host.html',\r\n imports: [NgnToast],\r\n host: {\r\n '[attr.popover]': '\"manual\"',\r\n },\r\n})\r\nexport class NgnToastHost extends NgnBase<'toast'> {\r\n protected readonly theme = this.injectThemeTemplate(toastControlTemplate, 'host');\r\n private readonly _toastManager = inject(NgnToastManager);\r\n private readonly _el = inject<ElementRef<HTMLElement>>(ElementRef);\r\n\r\n protected readonly toasts = this._toastManager.toasts;\r\n\r\n constructor() {\r\n super();\r\n afterNextRender(() => {\r\n this._el.nativeElement.showPopover();\r\n });\r\n }\r\n\r\n protected removeToast(id: number): void {\r\n this._toastManager.removeToast(id);\r\n }\r\n}\r\n","@for (toast of toasts(); track toast.id) {\r\n <ngn-toast\r\n [header]=\"toast.header\"\r\n [content]=\"toast.content\"\r\n [color]=\"toast.color\"\r\n [icon]=\"toast.icon\"\r\n [autoHide]=\"toast.autoHide\"\r\n [templateContent]=\"toast.contentTemplate\"\r\n [templateHeader]=\"toast.headerTemplate\"\r\n [closable]=\"!!toast.closable\"\r\n (closeToast)=\"removeToast(toast.id)\"\r\n />\r\n}\r\n","import {\r\n ApplicationRef,\r\n ComponentRef,\r\n createComponent,\r\n inject,\r\n Injectable,\r\n type OnDestroy,\r\n signal,\r\n} from '@angular/core';\r\nimport { Platform } from '@ngneers/controls/api/ng';\r\nimport { NgnError } from '@ngneers/controls/utils';\r\nimport { injectOrThrow } from '@ngneers/controls/utils-ng';\r\n\r\nimport { DEFAULT_TOAST_OPTIONS } from './defaults';\r\nimport { NGN_TOAST_USER_DEFAULTS } from './provider';\r\nimport { NgnToastHost } from './toast-host';\r\n\r\nimport type { NgnToastOptions } from './types';\r\n\r\ntype ToastFull = NgnToastOptions & { id: number };\r\n\r\n@Injectable()\r\nexport class NgnToastManager implements OnDestroy {\r\n private readonly _toasts = signal<ToastFull[]>([]);\r\n private readonly _appRef = inject(ApplicationRef);\r\n private readonly _userDefaults = injectOrThrow(\r\n NGN_TOAST_USER_DEFAULTS,\r\n 'NgnToastManager',\r\n 'Failed to inject NGN_TOAST_USER_DEFAULTS, make sure to use withToasts() to provide ngn toasts!'\r\n );\r\n private _nextId = 0;\r\n\r\n public readonly toasts = this._toasts.asReadonly();\r\n private _component?: ComponentRef<NgnToastHost>;\r\n\r\n constructor() {\r\n if (!inject(Platform).isBrowser) {\r\n return;\r\n }\r\n // Defer creation to avoid issues with Angular's injection tree during app initialization\r\n queueMicrotask(() => {\r\n // Create and attach the toast host component to the application's root\r\n this._component = createComponent(NgnToastHost, {\r\n environmentInjector: this._appRef.injector,\r\n });\r\n this._appRef.attachView(this._component.hostView);\r\n const hostEl = this._component.location.nativeElement as HTMLElement;\r\n const appRootEl = this._appRef.components[0]?.location.nativeElement as\r\n \| undefined\r\n \| HTMLElement;\r\n if (!appRootEl) {\r\n throw new NgnError(\r\n 'NgnToastManager',\r\n 'Failed to find application root element to attach toast host!'\r\n );\r\n }\r\n appRootEl.appendChild(hostEl);\r\n });\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n if (this._component) {\r\n this._appRef.detachView(this._component.hostView);\r\n this._component.destroy();\r\n this._component = undefined;\r\n }\r\n }\r\n\r\n public removeToast(id: number): void {\r\n this._toasts.update(toasts => toasts.filter(t => t.id !== id));\r\n }\r\n\r\n public addToast(options: NgnToastOptions): number {\r\n const id = this._nextId++;\r\n const toast: ToastFull = { ...DEFAULT_TOAST_OPTIONS, ...this._userDefaults, ...options, id };\r\n this._toasts.update(toasts => [...toasts, toast]);\r\n return id;\r\n }\r\n}\r\n","import { InjectionToken, type Provider } from '@angular/core';\r\n\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\nimport type { NgnToastOptionsMeta } from './types';\r\n\r\nexport type NgnToastFeature = {\r\n providers: Provider[];\r\n};\r\n\r\nexport const NGN_TOAST_USER_DEFAULTS = new InjectionToken<NgnToastOptionsMeta>(\r\n 'NGN_TOAST_USER_DEFAULTS'\r\n);\r\n\r\nexport function withToasts(defaultOptions?: NgnToastOptionsMeta): NgnToastFeature {\r\n return {\r\n providers: [\r\n NgnToastManager,\r\n {\r\n provide: NGN_TOAST_USER_DEFAULTS,\r\n useValue: defaultOptions \|\| {},\r\n },\r\n ],\r\n };\r\n}\r\n","import { Injector, runInInjectionContext } from '@angular/core';\r\nimport { injectOrThrow } from '@ngneers/controls/utils-ng';\r\n\r\nimport { NgnToastManager } from './toast-manager';\r\n\r\nimport type { NgnToastOptions, NgnToastRef } from './types';\r\n\r\nclass ToastCreator {\r\n private readonly _manager: NgnToastManager;\r\n\r\n constructor() {\r\n this._manager = injectOrThrow(\r\n NgnToastManager,\r\n 'injectToastCreator',\r\n 'NgnToastManager not found. Make sure to use withToasts() to provide ngn toasts!'\r\n );\r\n }\r\n\r\n public show(options: NgnToastOptions): NgnToastRef {\r\n const id = this._manager.addToast(options);\r\n return {\r\n hide: () => this._manager.removeToast(id),\r\n };\r\n }\r\n}\r\n\r\nexport function injectToastCreator(injector?: Injector): ToastCreator {\r\n if (injector) {\r\n return runInInjectionContext(injector, () => injectToastCreator());\r\n }\r\n return new ToastCreator();\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-toggle-button.mjs CHANGED Viewed

@@ -17,44 +17,44 @@ class NgnToggleButton extends ValueControlBase {
      * Optional labels for on and off states.
      * If not provided, the {@link label} input will be used.
      */
-    labelOn = input(...(ngDevMode ? [undefined, { debugName: "labelOn" }] : []));
+    labelOn = input(...(ngDevMode ? [undefined, { debugName: "labelOn" }] : /* istanbul ignore next */ []));
     /**
      * Optional labels for on and off states.
      * If not provided, the {@link label} input will be used.
      */
-    labelOff = input(...(ngDevMode ? [undefined, { debugName: "labelOff" }] : []));
+    labelOff = input(...(ngDevMode ? [undefined, { debugName: "labelOff" }] : /* istanbul ignore next */ []));
     /**
      * Optional icon for the button. Can be used instead of the label or in combination with it.
      * If {@link iconOn} and {@link iconOff} are provided, they will take precedence over this input for their respective states.
      */
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     /**
      * Optional icons for on and off states.
      * If not provided, the {@link icon} input will be used.
      */
-    iconOn = input(...(ngDevMode ? [undefined, { debugName: "iconOn" }] : []));
+    iconOn = input(...(ngDevMode ? [undefined, { debugName: "iconOn" }] : /* istanbul ignore next */ []));
     /**
      * Optional icons for on and off states.
      * If not provided, the {@link icon} input will be used.
      */
-    iconOff = input(...(ngDevMode ? [undefined, { debugName: "iconOff" }] : []));
+    iconOff = input(...(ngDevMode ? [undefined, { debugName: "iconOff" }] : /* istanbul ignore next */ []));
     /**
      * If true, the button will always have the width of the longest possible content.
      * @default false
      */
-    fixedWidth = input(false, ...(ngDevMode ? [{ debugName: "fixedWidth" }] : []));
+    fixedWidth = input(false, ...(ngDevMode ? [{ debugName: "fixedWidth" }] : /* istanbul ignore next */ []));
     toggle() {
         if (this.disabled() || this.readonly()) {
             return;
         }
         this.value.update(v => !v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToggleButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnToggleButton, isStandalone: true, selector: "ngn-toggle-button", inputs: { labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, fixedWidth: { classPropertyName: "fixedWidth", publicName: "fixedWidth", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnToggleButton)], usesInheritance: true, ngImport: i0, template: "<button\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'button'\"\r\n  (click)=\"toggle()\"\r\n  [disabled]=\"disabled()\"\r\n  [ariaReadOnly]=\"readonly()\"\r\n  (blur)=\"touched.set(true)\"\r\n>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'label'\">\r\n    @let renderedIcon = (value() ? iconOn() : iconOff()) ?? icon();\r\n    @if (renderedIcon) {\r\n      <ngn-icon [icon]=\"renderedIcon\" />\r\n    }\r\n    {{ (value() ? labelOn() : labelOff()) ?? label() }}\r\n  </span>\r\n  @if (fixedWidth()) {\r\n    <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder-active'\">\r\n      @let renderedIconOn = iconOn() ?? icon();\r\n      @if (renderedIconOn) {\r\n        <ngn-icon [icon]=\"renderedIconOn\" />\r\n      }\r\n      {{ labelOn() ?? label() }}\r\n    </span>\r\n    <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder'\">\r\n      @let renderedIconOff = iconOff() ?? icon();\r\n      @if (renderedIconOff) {\r\n        <ngn-icon [icon]=\"renderedIconOff\" />\r\n      }\r\n      {{ labelOff() ?? label() }}\r\n    </span>\r\n  }\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToggleButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgnToggleButton, isStandalone: true, selector: "ngn-toggle-button", inputs: { labelOn: { classPropertyName: "labelOn", publicName: "labelOn", isSignal: true, isRequired: false, transformFunction: null }, labelOff: { classPropertyName: "labelOff", publicName: "labelOff", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOn: { classPropertyName: "iconOn", publicName: "iconOn", isSignal: true, isRequired: false, transformFunction: null }, iconOff: { classPropertyName: "iconOff", publicName: "iconOff", isSignal: true, isRequired: false, transformFunction: null }, fixedWidth: { classPropertyName: "fixedWidth", publicName: "fixedWidth", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnToggleButton)], usesInheritance: true, ngImport: i0, template: "<button\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'button'\"\r\n  (click)=\"toggle()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-pressed]=\"value()\"\r\n  [attr.aria-readonly]=\"readonly() || null\"\r\n  [attr.aria-label]=\"label()\"\r\n  [attr.aria-labelledby]=\"labelledBy()\"\r\n  (blur)=\"touched.set(true)\"\r\n>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'label'\">\r\n    @let renderedIcon = (value() ? iconOn() : iconOff()) ?? icon();\r\n    @if (renderedIcon) {\r\n      <ngn-icon [icon]=\"renderedIcon\" />\r\n    }\r\n    {{ (value() ? labelOn() : labelOff()) ?? label() }}\r\n  </span>\r\n  @if (fixedWidth()) {\r\n    <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder-active'\">\r\n      @let renderedIconOn = iconOn() ?? icon();\r\n      @if (renderedIconOn) {\r\n        <ngn-icon [icon]=\"renderedIconOn\" />\r\n      }\r\n      {{ labelOn() ?? label() }}\r\n    </span>\r\n    <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder'\">\r\n      @let renderedIconOff = iconOff() ?? icon();\r\n      @if (renderedIconOff) {\r\n        <ngn-icon [icon]=\"renderedIconOff\" />\r\n      }\r\n      {{ labelOff() ?? label() }}\r\n    </span>\r\n  }\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToggleButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnToggleButton, decorators: [{
             type: Component,
-            args: [{ selector: 'ngn-toggle-button', providers: [provideSelf(NgnToggleButton)], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgnPt, NgnIcon], template: "<button\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'button'\"\r\n  (click)=\"toggle()\"\r\n  [disabled]=\"disabled()\"\r\n  [ariaReadOnly]=\"readonly()\"\r\n  (blur)=\"touched.set(true)\"\r\n>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'label'\">\r\n    @let renderedIcon = (value() ? iconOn() : iconOff()) ?? icon();\r\n    @if (renderedIcon) {\r\n      <ngn-icon [icon]=\"renderedIcon\" />\r\n    }\r\n    {{ (value() ? labelOn() : labelOff()) ?? label() }}\r\n  </span>\r\n  @if (fixedWidth()) {\r\n    <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder-active'\">\r\n      @let renderedIconOn = iconOn() ?? icon();\r\n      @if (renderedIconOn) {\r\n        <ngn-icon [icon]=\"renderedIconOn\" />\r\n      }\r\n      {{ labelOn() ?? label() }}\r\n    </span>\r\n    <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder'\">\r\n      @let renderedIconOff = iconOff() ?? icon();\r\n      @if (renderedIconOff) {\r\n        <ngn-icon [icon]=\"renderedIconOff\" />\r\n      }\r\n      {{ labelOff() ?? label() }}\r\n    </span>\r\n  }\r\n</button>\r\n" }]
+            args: [{ selector: 'ngn-toggle-button', providers: [provideSelf(NgnToggleButton)], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgnPt, NgnIcon], template: "<button\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"'button'\"\r\n  (click)=\"toggle()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-pressed]=\"value()\"\r\n  [attr.aria-readonly]=\"readonly() || null\"\r\n  [attr.aria-label]=\"label()\"\r\n  [attr.aria-labelledby]=\"labelledBy()\"\r\n  (blur)=\"touched.set(true)\"\r\n>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'label'\">\r\n    @let renderedIcon = (value() ? iconOn() : iconOff()) ?? icon();\r\n    @if (renderedIcon) {\r\n      <ngn-icon [icon]=\"renderedIcon\" />\r\n    }\r\n    {{ (value() ? labelOn() : labelOff()) ?? label() }}\r\n  </span>\r\n  @if (fixedWidth()) {\r\n    <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder-active'\">\r\n      @let renderedIconOn = iconOn() ?? icon();\r\n      @if (renderedIconOn) {\r\n        <ngn-icon [icon]=\"renderedIconOn\" />\r\n      }\r\n      {{ labelOn() ?? label() }}\r\n    </span>\r\n    <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder'\">\r\n      @let renderedIconOff = iconOff() ?? icon();\r\n      @if (renderedIconOff) {\r\n        <ngn-icon [icon]=\"renderedIconOff\" />\r\n      }\r\n      {{ labelOff() ?? label() }}\r\n    </span>\r\n  }\r\n</button>\r\n" }]
         }], propDecorators: { labelOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOn", required: false }] }], labelOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelOff", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOn", required: false }] }], iconOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOff", required: false }] }], fixedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWidth", required: false }] }] } });
 /**

package/fesm2022/ngneers-controls-toggle-button.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngneers-controls-toggle-button.mjs","sources":["../../src/toggle-button/toggle-button.ts","../../src/toggle-button/toggle-button.html","../../src/toggle-button/ngneers-controls-toggle-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\nimport { provideSelf, ValueControlBase, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { toggleButtonControlTemplate } from '@ngneers/controls-themes/templates/toggle-button';\r\n\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/*\r\n @category control\r\n /\r\n@Component({\r\n selector: 'ngn-toggle-button',\r\n providers: [provideSelf(NgnToggleButton)],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [NgnPt, NgnIcon],\r\n templateUrl: './toggle-button.html',\r\n})\r\nexport class NgnToggleButton extends ValueControlBase<'toggleButton', boolean> {\r\n protected readonly theme = this.injectThemeTemplate(toggleButtonControlTemplate, {\r\n root: true,\r\n active: () => this.value(),\r\n invalid: () => this.invalid(),\r\n });\r\n\r\n /\r\n Optional labels for on and off states.\r\n * If not provided, the {@link label} input will be used.\r\n /\r\n public readonly labelOn = input<string>();\r\n /\r\n Optional labels for on and off states.\r\n * If not provided, the {@link label} input will be used.\r\n /\r\n public readonly labelOff = input<string>();\r\n /\r\n Optional icon for the button. Can be used instead of the label or in combination with it.\r\n * If {@link iconOn} and {@link iconOff} are provided, they will take precedence over this input for their respective states.\r\n /\r\n public readonly icon = input<IconType>();\r\n /\r\n Optional icons for on and off states.\r\n * If not provided, the {@link icon} input will be used.\r\n /\r\n public readonly iconOn = input<IconType>();\r\n /\r\n Optional icons for on and off states.\r\n * If not provided, the {@link icon} input will be used.\r\n /\r\n public readonly iconOff = input<IconType>();\r\n /\r\n If true, the button will always have the width of the longest possible content.\r\n * @default false\r\n /\r\n public readonly fixedWidth = input<boolean>(false);\r\n\r\n public toggle() {\r\n if (this.disabled() \|\| this.readonly()) {\r\n return;\r\n }\r\n this.value.update(v => !v);\r\n }\r\n}\r\n","<button\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'button'\"\r\n (click)=\"toggle()\"\r\n [disabled]=\"disabled()\"\r\n [~~ariaReadOnly~~]=\"readonly()\"\r\n (blur)=\"touched.set(true)\"\r\n>\r\n <span [ptInt]=\"this\" [ptClass]=\"'label'\">\r\n @let renderedIcon = (value() ? iconOn() : iconOff()) ?? icon();\r\n @if (renderedIcon) {\r\n <ngn-icon [icon]=\"renderedIcon\" />\r\n }\r\n {{ (value() ? labelOn() : labelOff()) ?? label() }}\r\n </span>\r\n @if (fixedWidth()) {\r\n <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder-active'\">\r\n @let renderedIconOn = iconOn() ?? icon();\r\n @if (renderedIconOn) {\r\n <ngn-icon [icon]=\"renderedIconOn\" />\r\n }\r\n {{ labelOn() ?? label() }}\r\n </span>\r\n <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder'\">\r\n @let renderedIconOff = iconOff() ?? icon();\r\n @if (renderedIconOff) {\r\n <ngn-icon [icon]=\"renderedIconOff\" />\r\n }\r\n {{ labelOff() ?? label() }}\r\n </span>\r\n }\r\n</button>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;AAEG;AAQG,MAAO,eAAgB,SAAQ,gBAAyC,CAAA;AACzD,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,2BAA2B,EAAE;AAC/E,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE;AAC9B,KAAA,CAAC;AAEF;;;AAGG;IACa,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,~~GAAA~~,EAAA,CAAA,CAAU;AACzC;;;AAGG;IACa,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,~~GAAA~~,EAAA,CAAA,CAAU;AAC1C;;;AAGG;IACa,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,~~GAAA~~,EAAA,CAAA,CAAY;AACxC;;;AAGG;IACa,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,~~GAAA~~,EAAA,CAAA,CAAY;AAC1C;;;AAGG;IACa,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,~~GAAA~~,EAAA,CAAA,CAAY;AAC3C;;;AAGG;AACa,IAAA,UAAU,GAAG,KAAK,CAAU,KAAK,~~sDAAC~~;IAE3C,MAAM,GAAA;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACtC;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5B;~~uGA3CW~~,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EALf,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZ3C,~~yhCAgCA~~,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDlBY~~,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;~~2FAGb~~,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,SAAA,EAClB,CAAC,WAAW,CAAA,eAAA,CAAiB,CAAC,EAAA,eAAA,EACxB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,~~yhCAAA~~,EAAA;;;AEd3B;;AAEG;;;;"}
1	+ {"version":3,"file":"ngneers-controls-toggle-button.mjs","sources":["../../src/toggle-button/toggle-button.ts","../../src/toggle-button/toggle-button.html","../../src/toggle-button/ngneers-controls-toggle-button.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\nimport { provideSelf, ValueControlBase, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { toggleButtonControlTemplate } from '@ngneers/controls-themes/templates/toggle-button';\r\n\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/*\r\n @category control\r\n /\r\n@Component({\r\n selector: 'ngn-toggle-button',\r\n providers: [provideSelf(NgnToggleButton)],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [NgnPt, NgnIcon],\r\n templateUrl: './toggle-button.html',\r\n})\r\nexport class NgnToggleButton extends ValueControlBase<'toggleButton', boolean> {\r\n protected readonly theme = this.injectThemeTemplate(toggleButtonControlTemplate, {\r\n root: true,\r\n active: () => this.value(),\r\n invalid: () => this.invalid(),\r\n });\r\n\r\n /\r\n Optional labels for on and off states.\r\n * If not provided, the {@link label} input will be used.\r\n /\r\n public readonly labelOn = input<string>();\r\n /\r\n Optional labels for on and off states.\r\n * If not provided, the {@link label} input will be used.\r\n /\r\n public readonly labelOff = input<string>();\r\n /\r\n Optional icon for the button. Can be used instead of the label or in combination with it.\r\n * If {@link iconOn} and {@link iconOff} are provided, they will take precedence over this input for their respective states.\r\n /\r\n public readonly icon = input<IconType>();\r\n /\r\n Optional icons for on and off states.\r\n * If not provided, the {@link icon} input will be used.\r\n /\r\n public readonly iconOn = input<IconType>();\r\n /\r\n Optional icons for on and off states.\r\n * If not provided, the {@link icon} input will be used.\r\n /\r\n public readonly iconOff = input<IconType>();\r\n /\r\n If true, the button will always have the width of the longest possible content.\r\n * @default false\r\n /\r\n public readonly fixedWidth = input<boolean>(false);\r\n\r\n public toggle() {\r\n if (this.disabled() \|\| this.readonly()) {\r\n return;\r\n }\r\n this.value.update(v => !v);\r\n }\r\n}\r\n","<button\r\n [ptInt]=\"this\"\r\n [ptClass]=\"'button'\"\r\n (click)=\"toggle()\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-pressed]=\"value()\"\r\n [attr.aria-readonly]=\"readonly() \|\| null\"\r\n [attr.aria-label]=\"label()\"\r\n [attr.aria-labelledby]=\"labelledBy()\"\r\n (blur)=\"touched.set(true)\"\r\n>\r\n <span [ptInt]=\"this\" [ptClass]=\"'label'\">\r\n @let renderedIcon = (value() ? iconOn() : iconOff()) ?? icon();\r\n @if (renderedIcon) {\r\n <ngn-icon [icon]=\"renderedIcon\" />\r\n }\r\n {{ (value() ? labelOn() : labelOff()) ?? label() }}\r\n </span>\r\n @if (fixedWidth()) {\r\n <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder-active'\">\r\n @let renderedIconOn = iconOn() ?? icon();\r\n @if (renderedIconOn) {\r\n <ngn-icon [icon]=\"renderedIconOn\" />\r\n }\r\n {{ labelOn() ?? label() }}\r\n </span>\r\n <span inert [ptInt]=\"this\" [ptClass]=\"'placeholder'\">\r\n @let renderedIconOff = iconOff() ?? icon();\r\n @if (renderedIconOff) {\r\n <ngn-icon [icon]=\"renderedIconOff\" />\r\n }\r\n {{ labelOff() ?? label() }}\r\n </span>\r\n }\r\n</button>\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;AAEG;AAQG,MAAO,eAAgB,SAAQ,gBAAyC,CAAA;AACzD,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,2BAA2B,EAAE;AAC/E,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE;AAC9B,KAAA,CAAC;AAEF;;;AAGG;IACa,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AACzC;;;AAGG;IACa,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAC1C;;;AAGG;IACa,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAY;AACxC;;;AAGG;IACa,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAY;AAC1C;;;AAGG;IACa,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAY;AAC3C;;;AAGG;AACa,IAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;IAE3C,MAAM,GAAA;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACtC;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAC5B;wGA3CW,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EALf,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZ3C,4pCAmCA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrBY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAGb,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,SAAA,EAClB,CAAC,WAAW,CAAA,eAAA,CAAiB,CAAC,EAAA,eAAA,EACxB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,4pCAAA,EAAA;;;AEd3B;;AAEG;;;;"}

package/fesm2022/ngneers-controls-tooltip.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, signal, input, computed, effect, TemplateRef, Directive, viewChild, DOCUMENT, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ViewContainerRef, signal, input, computed, effect, afterRenderEffect, TemplateRef, Directive, viewChild, DOCUMENT, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NGN_CONFIG, abortSignalOnDestroy, autoPositionElement, splitPlacement } from '@ngneers/controls/api/ng';
 import { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';
 import { NgnDefer } from '@ngneers/controls/defer';
@@ -42,87 +42,93 @@ class NgnTooltip extends NgnBase {
     theme = null;
     _viewContainerRef = inject(ViewContainerRef);
     _config = inject(NGN_CONFIG);
-    _tooltip = signal(null, ...(ngDevMode ? [{ debugName: "_tooltip" }] : []));
+    _tooltip = signal(null, ...(ngDevMode ? [{ debugName: "_tooltip" }] : /* istanbul ignore next */ []));
     /**
      * The content of the tooltip, can be a string or a TemplateRef.
      * If the value is falsy, the tooltip will not be shown.
      * @alias ngnTooltip
      */
-    content = input(null, { ...(ngDevMode ? { debugName: "content" } : {}), alias: 'ngnTooltip' });
+    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'ngnTooltip' });
     /**
      * If set to `true`, the tooltip will only be shown if the anchor element is truncated. `""` is equivalent to `true`.
      * @alias ngnTooltipShowOnlyIfTruncated
      * @default false
      */
-    showOnlyIfTruncated = input(false, { ...(ngDevMode ? { debugName: "showOnlyIfTruncated" } : {}), alias: 'ngnTooltipShowOnlyIfTruncated' });
+    showOnlyIfTruncated = input(false, { ...(ngDevMode ? { debugName: "showOnlyIfTruncated" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipShowOnlyIfTruncated' });
     /**
      * The size constraints for the tooltip.
      * This can be used to limit the width and height of the tooltip.
      * If not provided, the tooltip is only constrained by the size of the screen.
      * @alias ngnTooltipSize
      */
-    size = input(null, { ...(ngDevMode ? { debugName: "size" } : {}), alias: 'ngnTooltipSize' });
+    size = input(null, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipSize' });
     /**
      * The options for the tooltip.
      * This is a shorthand for setting multiple options at once.
      * The individual options take precedence over the options set here.
      * @alias ngnTooltipOptions
      */
-    options = input(null, { ...(ngDevMode ? { debugName: "options" } : {}), alias: 'ngnTooltipOptions' });
+    options = input(null, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipOptions' });
     /**
      * The placement of the tooltip relative to the anchor element.
      * @alias ngnTooltipPlacement
      * @default 'bottom'
      */
-    placement = input(null, { ...(ngDevMode ? { debugName: "placement" } : {}), alias: 'ngnTooltipPlacement' });
+    placement = input(null, { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipPlacement' });
     /**
      * The offset in Pixels of the tooltip from the anchor element.
      * @alias ngnTooltipOffset
      * @default 4
      */
-    offset = input(null, { ...(ngDevMode ? { debugName: "offset" } : {}), alias: 'ngnTooltipOffset' });
+    offset = input(null, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipOffset' });
     /**
      * The delay before the tooltip is shown. If a number is provided, it is interpreted as milliseconds.
      * @alias ngnTooltipShowDelay
      * @default '0.5s'
      */
-    showDelay = input(null, { ...(ngDevMode ? { debugName: "showDelay" } : {}), alias: 'ngnTooltipShowDelay' });
+    showDelay = input(null, { ...(ngDevMode ? { debugName: "showDelay" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipShowDelay' });
     /**
      * The delay before the tooltip is hidden. If a number is provided, it is interpreted as milliseconds.
      * @alias ngnTooltipHideDelay
      * @default '0.1s'
      */
-    hideDelay = input(null, { ...(ngDevMode ? { debugName: "hideDelay" } : {}), alias: 'ngnTooltipHideDelay' });
+    hideDelay = input(null, { ...(ngDevMode ? { debugName: "hideDelay" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipHideDelay' });
     /**
      * Whether to show an arrow pointing to the anchor element. `""` is equivalent to `true`.
      * @alias ngnTooltipShowArrow
      * @default true
      */
-    showArrow = input(null, { ...(ngDevMode ? { debugName: "showArrow" } : {}), alias: 'ngnTooltipShowArrow' });
+    showArrow = input(null, { ...(ngDevMode ? { debugName: "showArrow" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipShowArrow' });
     /**
      * Shows the tooltip on hover.
      * @alias ngnTooltipShowOnHover
      * @default true
      */
-    showOnHover = input(null, { ...(ngDevMode ? { debugName: "showOnHover" } : {}), alias: 'ngnTooltipShowOnHover' });
+    showOnHover = input(null, { ...(ngDevMode ? { debugName: "showOnHover" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipShowOnHover' });
     /**
      * Shows the tooltip on focus.
      * @alias ngnTooltipShowOnFocus
      * @default true
      */
-    showOnFocus = input(null, { ...(ngDevMode ? { debugName: "showOnFocus" } : {}), alias: 'ngnTooltipShowOnFocus' });
+    showOnFocus = input(null, { ...(ngDevMode ? { debugName: "showOnFocus" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipShowOnFocus' });
     /**
      * Hides the tooltip (without delay) when the mouse hovers over the tooltip.
      * @alias ngnTooltipHideOnTooltipHover
      * @default false
      */
-    hideOnTooltipHover = input(null, { ...(ngDevMode ? { debugName: "hideOnTooltipHover" } : {}), alias: 'ngnTooltipHideOnTooltipHover' });
+    hideOnTooltipHover = input(null, { ...(ngDevMode ? { debugName: "hideOnTooltipHover" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipHideOnTooltipHover' });
     /**
      * Hides the tooltip (without delay) when the user clicks on the tooltip.
      * @alias ngnTooltipHideOnClick
      * @default true
      */
-    hideOnClick = input(null, { ...(ngDevMode ? { debugName: "hideOnClick" } : {}), alias: 'ngnTooltipHideOnClick' });
+    hideOnClick = input(null, { ...(ngDevMode ? { debugName: "hideOnClick" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipHideOnClick' });
+    /**
+     * Whether to automatically manage ARIA attributes for the tooltip.
+     * @alias ngnTooltipAutoAriaMode
+     * @default 'description'
+     */
+    autoAriaMode = input(null, { ...(ngDevMode ? { debugName: "autoAriaMode" } : /* istanbul ignore next */ {}), alias: 'ngnTooltipAutoAriaMode' });
     effectiveOptions = computed(() => {
         const defaults = this._config.defaults.tooltip;
         return {
@@ -137,9 +143,10 @@ class NgnTooltip extends NgnBase {
                 this.options()?.hideOnTooltipHover ??
                 defaults.hideOnTooltipHover) !== false,
             hideOnClick: (this.hideOnClick() ?? this.options()?.hideOnClick ?? defaults.hideOnClick) !== false,
+            autoAriaMode: this.autoAriaMode() ?? this.options()?.autoAriaMode ?? defaults.autoAriaMode,
         };
-    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
-    tooltip = computed(() => this._tooltip()?.instance, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
+    tooltip = computed(() => this._tooltip()?.instance, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         const abortSignal = abortSignalOnDestroy();
@@ -163,6 +170,34 @@ class NgnTooltip extends NgnBase {
         effect(() => this._tooltip()?.setInput('showOnlyIfTruncated', this.showOnlyIfTruncated()));
         effect(() => this._tooltip()?.setInput('size', this.size()));
         effect(() => this._tooltip()?.setInput('options', this.effectiveOptions()));
+        afterRenderEffect(() => {
+            const el = this.element.nativeElement;
+            const content = this.content();
+            const autoAriaMode = this.effectiveOptions().autoAriaMode;
+            el.removeAttribute('aria-label');
+            el.removeAttribute('aria-description');
+            el.removeAttribute('aria-labelledby');
+            el.removeAttribute('aria-describedby');
+            if (autoAriaMode === 'none' || !content) {
+                return;
+            }
+            const tooltip = this.tooltip();
+            const isShown = tooltip?.isShown() ?? false;
+            if (typeof content === 'string') {
+                if (isShown && tooltip) {
+                    const attr = autoAriaMode === 'label' ? 'aria-labelledby' : 'aria-describedby';
+                    el.setAttribute(attr, tooltip.id);
+                }
+                else {
+                    const attr = autoAriaMode === 'label' ? 'aria-label' : 'aria-description';
+                    el.setAttribute(attr, content);
+                }
+            }
+            else if (content instanceof TemplateRef && isShown && tooltip) {
+                const attr = autoAriaMode === 'label' ? 'aria-labelledby' : 'aria-describedby';
+                el.setAttribute(attr, tooltip.id);
+            }
+        });
     }
     ngOnDestroy() {
         this._tooltip()?.destroy();
@@ -227,17 +262,17 @@ class NgnTooltip extends NgnBase {
             tooltip.setInput('content', null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgnTooltip, isStandalone: true, selector: "[ngnTooltip]", inputs: { content: { classPropertyName: "content", publicName: "ngnTooltip", isSignal: true, isRequired: false, transformFunction: null }, showOnlyIfTruncated: { classPropertyName: "showOnlyIfTruncated", publicName: "ngnTooltipShowOnlyIfTruncated", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "ngnTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "ngnTooltipOptions", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngnTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngnTooltipOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngnTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngnTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "ngnTooltipShowArrow", isSignal: true, isRequired: false, transformFunction: null }, showOnHover: { classPropertyName: "showOnHover", publicName: "ngnTooltipShowOnHover", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "ngnTooltipShowOnFocus", isSignal: true, isRequired: false, transformFunction: null }, hideOnTooltipHover: { classPropertyName: "hideOnTooltipHover", publicName: "ngnTooltipHideOnTooltipHover", isSignal: true, isRequired: false, transformFunction: null }, hideOnClick: { classPropertyName: "hideOnClick", publicName: "ngnTooltipHideOnClick", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnTooltip)], exportAs: ["ngnTooltip"], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: NgnTooltip, isStandalone: true, selector: "[ngnTooltip]", inputs: { content: { classPropertyName: "content", publicName: "ngnTooltip", isSignal: true, isRequired: false, transformFunction: null }, showOnlyIfTruncated: { classPropertyName: "showOnlyIfTruncated", publicName: "ngnTooltipShowOnlyIfTruncated", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "ngnTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "ngnTooltipOptions", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngnTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngnTooltipOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngnTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngnTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "ngnTooltipShowArrow", isSignal: true, isRequired: false, transformFunction: null }, showOnHover: { classPropertyName: "showOnHover", publicName: "ngnTooltipShowOnHover", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "ngnTooltipShowOnFocus", isSignal: true, isRequired: false, transformFunction: null }, hideOnTooltipHover: { classPropertyName: "hideOnTooltipHover", publicName: "ngnTooltipHideOnTooltipHover", isSignal: true, isRequired: false, transformFunction: null }, hideOnClick: { classPropertyName: "hideOnClick", publicName: "ngnTooltipHideOnClick", isSignal: true, isRequired: false, transformFunction: null }, autoAriaMode: { classPropertyName: "autoAriaMode", publicName: "ngnTooltipAutoAriaMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnTooltip)], exportAs: ["ngnTooltip"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnTooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngnTooltip]',
                     exportAs: 'ngnTooltip',
                     providers: [provideSelf(NgnTooltip)],
                 }]
-        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltip", required: false }] }], showOnlyIfTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowOnlyIfTruncated", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipSize", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipOptions", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipOffset", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipHideDelay", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowArrow", required: false }] }], showOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowOnHover", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowOnFocus", required: false }] }], hideOnTooltipHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipHideOnTooltipHover", required: false }] }], hideOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipHideOnClick", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltip", required: false }] }], showOnlyIfTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowOnlyIfTruncated", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipSize", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipOptions", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipOffset", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipHideDelay", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowArrow", required: false }] }], showOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowOnHover", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipShowOnFocus", required: false }] }], hideOnTooltipHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipHideOnTooltipHover", required: false }] }], hideOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipHideOnClick", required: false }] }], autoAriaMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnTooltipAutoAriaMode", required: false }] }] } });
 class TooltipComponent extends NgnBase {
     _showHideTimeout;
     theme = this.injectThemeTemplate(tooltipControlTemplate, {
@@ -249,43 +284,43 @@ class TooltipComponent extends NgnBase {
     /**
      * The anchor element to which the tooltip is attached.
      */
-    anchor = input.required(...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    anchor = input.required(...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
     /**
      * The text content of the tooltip.
      */
-    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     /**
      * The content template of the tooltip.
      */
-    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : /* istanbul ignore next */ []));
     /**
      * If set to `true`, the tooltip will only be shown if the anchor element is truncated. `""` is equivalent to `true`.
      * @default `false`
      */
-    showOnlyIfTruncated = input(false, ...(ngDevMode ? [{ debugName: "showOnlyIfTruncated" }] : []));
+    showOnlyIfTruncated = input(false, ...(ngDevMode ? [{ debugName: "showOnlyIfTruncated" }] : /* istanbul ignore next */ []));
     /**
      * The size constraints for the tooltip.
      * This can be used to limit the width and height of the tooltip.
      * If not provided, the tooltip is only constrained by the size of the screen.
      */
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
     /**
      * The options for the tooltip.
      *
      */
-    options = input(this._config.defaults.tooltip, ...(ngDevMode ? [{ debugName: "options" }] : []));
-    showDelayMs = computed(() => getTimeSpanMilliseconds(this.options().showDelay), ...(ngDevMode ? [{ debugName: "showDelayMs" }] : []));
-    hideDelayMs = computed(() => getTimeSpanMilliseconds(this.options().hideDelay), ...(ngDevMode ? [{ debugName: "hideDelayMs" }] : []));
-    position = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : []));
-    positionClass = signal('', ...(ngDevMode ? [{ debugName: "positionClass" }] : []));
-    relativeAnchorElementPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "relativeAnchorElementPosition" }] : []));
-    _isShown = signal(false, ...(ngDevMode ? [{ debugName: "_isShown" }] : []));
-    _isClosing = signal(false, ...(ngDevMode ? [{ debugName: "_isClosing" }] : []));
+    options = input(this._config.defaults.tooltip, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    showDelayMs = computed(() => getTimeSpanMilliseconds(this.options().showDelay), ...(ngDevMode ? [{ debugName: "showDelayMs" }] : /* istanbul ignore next */ []));
+    hideDelayMs = computed(() => getTimeSpanMilliseconds(this.options().hideDelay), ...(ngDevMode ? [{ debugName: "hideDelayMs" }] : /* istanbul ignore next */ []));
+    position = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    positionClass = signal('', ...(ngDevMode ? [{ debugName: "positionClass" }] : /* istanbul ignore next */ []));
+    relativeAnchorElementPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "relativeAnchorElementPosition" }] : /* istanbul ignore next */ []));
+    _isShown = signal(false, ...(ngDevMode ? [{ debugName: "_isShown" }] : /* istanbul ignore next */ []));
+    _isClosing = signal(false, ...(ngDevMode ? [{ debugName: "_isClosing" }] : /* istanbul ignore next */ []));
     id = generateElementId();
     isShown = this._isShown.asReadonly();
     isClosing = this._isClosing.asReadonly();
     _defaultContentTemplate = viewChild.required('defaultContentTemplate');
-    contentTemplate = computed(() => this.content() ?? this._defaultContentTemplate(), ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+    contentTemplate = computed(() => this.content() ?? this._defaultContentTemplate(), ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
     _autoPos = computedWithPrevious(prev => {
         prev?.stop();
         const element = this.element.nativeElement;
@@ -409,10 +444,10 @@ class TooltipComponent extends NgnBase {
     toPixels(value) {
         return value !== undefined ? `${value}px` : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: TooltipComponent, isStandalone: true, selector: "ngn-tooltip", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, showOnlyIfTruncated: { classPropertyName: "showOnlyIfTruncated", publicName: "showOnlyIfTruncated", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "toggle": "onToggle($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick($event)" }, properties: { "class": "positionClass()", "style.--anchor-start": "toPixels(relativeAnchorElementPosition()?.start)", "style.--anchor-center": "toPixels(relativeAnchorElementPosition()?.center)", "style.--anchor-end": "toPixels(relativeAnchorElementPosition()?.end)", "style.left": "toPixels(position().x)", "style.top": "toPixels(position().y)", "attr.popover": "'hint'", "attr.id": "id", "attr.role": "'tooltip'" } }, providers: [provideSelf(TooltipComponent)], viewQueries: [{ propertyName: "_defaultContentTemplate", first: true, predicate: ["defaultContentTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ngn-defer [lazyContent]=\"contentTemplate()\" [open]=\"isShown()\" [cache]=\"false\"></ngn-defer>\r\n</div>\r\n\r\n<ng-template #defaultContentTemplate>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'text'\">{{ text() }}</span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: TooltipComponent, isStandalone: true, selector: "ngn-tooltip", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, showOnlyIfTruncated: { classPropertyName: "showOnlyIfTruncated", publicName: "showOnlyIfTruncated", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "toggle": "onToggle($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick($event)" }, properties: { "class": "positionClass()", "style.--anchor-start": "toPixels(relativeAnchorElementPosition()?.start)", "style.--anchor-center": "toPixels(relativeAnchorElementPosition()?.center)", "style.--anchor-end": "toPixels(relativeAnchorElementPosition()?.end)", "style.left": "toPixels(position().x)", "style.top": "toPixels(position().y)", "attr.popover": "'hint'", "attr.id": "id", "attr.role": "'tooltip'", "attr.aria-hidden": "isShown() ? null : true" } }, providers: [provideSelf(TooltipComponent)], viewQueries: [{ propertyName: "_defaultContentTemplate", first: true, predicate: ["defaultContentTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ngn-defer [lazyContent]=\"contentTemplate()\" [open]=\"isShown()\" [cache]=\"false\"></ngn-defer>\r\n</div>\r\n\r\n<ng-template #defaultContentTemplate>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'text'\">{{ text() }}</span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-tooltip', imports: [NgnPt, NgnDefer], providers: [provideSelf(TooltipComponent)], host: {
                         '[class]': `positionClass()`,
@@ -428,6 +463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '(mouseenter)': 'onMouseEnter()',
                         '(mouseleave)': 'onMouseLeave()',
                         '(click)': 'onClick($event)',
+                        '[attr.aria-hidden]': `isShown() ? null : true`,
                     }, template: "<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ngn-defer [lazyContent]=\"contentTemplate()\" [open]=\"isShown()\" [cache]=\"false\"></ngn-defer>\r\n</div>\r\n\r\n<ng-template #defaultContentTemplate>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'text'\">{{ text() }}</span>\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], showOnlyIfTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnlyIfTruncated", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], _defaultContentTemplate: [{ type: i0.ViewChild, args: ['defaultContentTemplate', { isSignal: true }] }] } });
 function isElementTruncated(element) {