@ngneers/controls 0.0.1-pre1 → 0.0.1-pre2

package/fesm2022/ngneers-controls-toast.mjs

@@ -0,0 +1,184 @@
+import * as i0 from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component, inject, ElementRef, afterNextRender, signal, ApplicationRef, createComponent, Injectable, InjectionToken, runInInjectionContext } from '@angular/core';
+import { Platform } from '@ngneers/controls/api/ng';
+import { NgnError } from '@ngneers/controls/utils';
+import { injectOrThrow } from '@ngneers/controls/utils-ng';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';
+import { NgTemplateOutlet } from '@angular/common';
+import { NgnButton } from '@ngneers/controls/button';
+import { NgnIcon } from '@ngneers/controls/icon';
+
+const DEFAULT_TOAST_OPTIONS = {
+    closable: false,
+    autoHide: 5000,
+};
+
+/**
+ * @category control
+ */
+class NgnToast extends NgnBase {
+    theme = this.injectThemeTemplate(toastControlTemplate, 'root');
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
+    content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    closeIcon = input(...(ngDevMode ? [undefined, { debugName: "closeIcon" }] : []));
+    closable = input(DEFAULT_TOAST_OPTIONS.closable, ...(ngDevMode ? [{ debugName: "closable" }] : []));
+    autoHide = input(DEFAULT_TOAST_OPTIONS.autoHide, ...(ngDevMode ? [{ debugName: "autoHide" }] : []));
+    templateContent = input(...(ngDevMode ? [undefined, { debugName: "templateContent" }] : []));
+    templateHeader = input(...(ngDevMode ? [undefined, { debugName: "templateHeader" }] : []));
+    closeToast = output();
+    _closeTimeout;
+    ngOnInit() {
+        this.startHideTimer();
+    }
+    startHideTimer() {
+        const autoHide = this.autoHide();
+        if (autoHide && autoHide > 0) {
+            this._closeTimeout = setTimeout(() => this.close(), autoHide);
+        }
+    }
+    close() {
+        this.closeToast.emit();
+        if (this._closeTimeout) {
+            clearTimeout(this._closeTimeout);
+        }
+    }
+    mouseEnter() {
+        if (this._closeTimeout) {
+            clearTimeout(this._closeTimeout);
+            this._closeTimeout = undefined;
+        }
+    }
+    mouseLeave() {
+        this.startHideTimer();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnToast, isStandalone: true, selector: "ngn-toast", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, templateContent: { classPropertyName: "templateContent", publicName: "templateContent", isSignal: true, isRequired: false, transformFunction: null }, templateHeader: { classPropertyName: "templateHeader", publicName: "templateHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeToast: "closeToast" }, host: { attributes: { "role": "alert", "aria-live": "assertive" }, listeners: { "mouseenter": "mouseEnter()", "mouseleave": "mouseLeave()" }, properties: { "animate.enter": "theme.class('anim-enter')", "animate.leave": "theme.class('anim-leave')" } }, providers: [provideSelf(NgnToast)], usesInheritance: true, ngImport: i0, template: "@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", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"] }, { 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: NgnToast, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-toast', imports: [NgTemplateOutlet, NgnPt, NgnButton, NgnIcon], providers: [provideSelf(NgnToast)], host: {
+                        '(mouseenter)': 'mouseEnter()',
+                        '(mouseleave)': 'mouseLeave()',
+                        '[animate.enter]': "theme.class('anim-enter')",
+                        '[animate.leave]': "theme.class('anim-leave')",
+                        role: 'alert',
+                        'aria-live': 'assertive',
+                    }, template: "@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" }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], templateContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContent", required: false }] }], templateHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateHeader", required: false }] }], closeToast: [{ type: i0.Output, args: ["closeToast"] }] } });
+
+/**
+ * The host component that renders toasts.
+ */
+class NgnToastHost extends NgnBase {
+    theme = this.injectThemeTemplate(toastControlTemplate, 'host');
+    _toastManager = inject(NgnToastManager);
+    _el = inject(ElementRef);
+    toasts = this._toastManager.toasts;
+    constructor() {
+        super();
+        afterNextRender(() => {
+            this._el.nativeElement.showPopover();
+        });
+    }
+    removeToast(id) {
+        this._toastManager.removeToast(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnToastHost, isStandalone: true, selector: "ngn-toast-host", host: { properties: { "attr.popover": "\"manual\"" } }, usesInheritance: true, ngImport: i0, template: "@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", dependencies: [{ kind: "component", type: NgnToast, selector: "ngn-toast", inputs: ["header", "content", "icon", "closeIcon", "closable", "autoHide", "templateContent", "templateHeader"], outputs: ["closeToast"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastHost, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-toast-host', imports: [NgnToast], host: {
+                        '[attr.popover]': '"manual"',
+                    }, template: "@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" }]
+        }], ctorParameters: () => [] });
+
+class NgnToastManager {
+    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
+    _appRef = inject(ApplicationRef);
+    _userDefaults = injectOrThrow(NGN_TOAST_USER_DEFAULTS, 'NgnToastManager', 'Failed to inject NGN_TOAST_USER_DEFAULTS, make sure to use withToasts() to provide ngn toasts!');
+    _nextId = 0;
+    toasts = this._toasts.asReadonly();
+    _component;
+    constructor() {
+        if (!inject(Platform).isBrowser) {
+            return;
+        }
+        // Defer creation to avoid issues with Angular's injection tree during app initialization
+        queueMicrotask(() => {
+            // Create and attach the toast host component to the application's root
+            this._component = createComponent(NgnToastHost, {
+                environmentInjector: this._appRef.injector,
+            });
+            this._appRef.attachView(this._component.hostView);
+            const hostEl = this._component.location.nativeElement;
+            const appRootEl = this._appRef.components[0]?.location.nativeElement;
+            if (!appRootEl) {
+                throw new NgnError('NgnToastManager', 'Failed to find application root element to attach toast host!');
+            }
+            appRootEl.appendChild(hostEl);
+        });
+    }
+    ngOnDestroy() {
+        if (this._component) {
+            this._appRef.detachView(this._component.hostView);
+            this._component.destroy();
+            this._component = undefined;
+        }
+    }
+    removeToast(id) {
+        this._toasts.update(toasts => toasts.filter(t => t.id !== id));
+    }
+    addToast(options) {
+        const id = this._nextId++;
+        const toast = { ...DEFAULT_TOAST_OPTIONS, ...this._userDefaults, ...options, id };
+        this._toasts.update(toasts => [...toasts, toast]);
+        return id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastManager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnToastManager, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+const NGN_TOAST_USER_DEFAULTS = new InjectionToken('NGN_TOAST_USER_DEFAULTS');
+function withToasts(defaultOptions) {
+    return {
+        providers: [
+            NgnToastManager,
+            {
+                provide: NGN_TOAST_USER_DEFAULTS,
+                useValue: defaultOptions || {},
+            },
+        ],
+    };
+}
+
+class ToastCreator {
+    _manager;
+    constructor() {
+        this._manager = injectOrThrow(NgnToastManager, 'injectToastCreator', 'NgnToastManager not found. Make sure to use withToasts() to provide ngn toasts!');
+    }
+    show(options) {
+        const id = this._manager.addToast(options);
+        return {
+            hide: () => this._manager.removeToast(id),
+        };
+    }
+}
+function injectToastCreator(injector) {
+    if (injector) {
+        return runInInjectionContext(injector, () => injectToastCreator());
+    }
+    return new ToastCreator();
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGN_TOAST_USER_DEFAULTS, NgnToast, injectToastCreator, withToasts };
+//# sourceMappingURL=ngneers-controls-toast.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,65 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { toggleButtonControlTemplate } from '@ngneers/controls-themes/templates/toggle-button';
+
+/**
+ * @category control
+ */
+class NgnToggleButton extends ValueControlBase {
+    theme = this.injectThemeTemplate(toggleButtonControlTemplate, {
+        root: true,
+        active: () => this.value(),
+        invalid: () => this.invalid(),
+    });
+    /**
+     * Optional labels for on and off states.
+     * If not provided, the {@link label} input will be used.
+     */
+    labelOn = input(...(ngDevMode ? [undefined, { debugName: "labelOn" }] : []));
+    /**
+     * Optional labels for on and off states.
+     * If not provided, the {@link label} input will be used.
+     */
+    labelOff = input(...(ngDevMode ? [undefined, { debugName: "labelOff" }] : []));
+    /**
+     * 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" }] : []));
+    /**
+     * Optional icons for on and off states.
+     * If not provided, the {@link icon} input will be used.
+     */
+    iconOn = input(...(ngDevMode ? [undefined, { debugName: "iconOn" }] : []));
+    /**
+     * Optional icons for on and off states.
+     * If not provided, the {@link icon} input will be used.
+     */
+    iconOff = input(...(ngDevMode ? [undefined, { debugName: "iconOff" }] : []));
+    /**
+     * If true, the button will always have the width of the longest possible content.
+     * @default false
+     */
+    fixedWidth = input(false, ...(ngDevMode ? [{ debugName: "fixedWidth" }] : []));
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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" }]
+        }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnToggleButton };
+//# sourceMappingURL=ngneers-controls-toggle-button.mjs.map

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

@@ -0,0 +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":"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"}