ng-primitives 0.36.0 → 0.37.0

package/fesm2022/ng-primitives-listbox.mjs

@@ -125,10 +125,10 @@ class NgpListboxOption {
         }
         this.listbox()?.activateOption(this.value());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpListboxOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpListboxOption, isStandalone: true, selector: "[ngpListboxOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpListboxOptionValue", isSignal: true, isRequired: true, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "ngpListboxOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select(\"mouse\")", "mouseenter": "activate()", "keydown.enter": "select(\"keyboard\")", "keydown.space": "select(\"keyboard\")" }, properties: { "attr.id": "id()", "attr.aria-disabled": "optionDisabled()", "attr.data-active": "listbox()?.isFocused() && active() ? \"\" : undefined", "attr.data-selected": "selected() ? \"\" : undefined", "attr.data-disabled": "optionDisabled() ? \"\" : undefined" } }, exportAs: ["ngpListboxOption"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpListboxOption, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpListboxOption, isStandalone: true, selector: "[ngpListboxOption]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpListboxOptionValue", isSignal: true, isRequired: true, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "ngpListboxOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "select(\"mouse\")", "mouseenter": "activate()", "keydown.enter": "select(\"keyboard\")", "keydown.space": "select(\"keyboard\")" }, properties: { "attr.id": "id()", "attr.aria-disabled": "optionDisabled()", "attr.data-active": "listbox()?.isFocused() && active() ? \"\" : undefined", "attr.data-selected": "selected() ? \"\" : undefined", "attr.data-disabled": "optionDisabled() ? \"\" : undefined" } }, exportAs: ["ngpListboxOption"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpListboxOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpListboxOption, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpListboxOption]',
@@ -155,10 +155,10 @@ class NgpListboxSection {
          */
         this.header = contentChild(NgpHeaderToken, { descendants: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpListboxSection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.7", type: NgpListboxSection, isStandalone: true, selector: "[ngpListboxSection]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "header()?.id()" } }, queries: [{ propertyName: "header", first: true, predicate: NgpHeaderToken, descendants: true, isSignal: true }], exportAs: ["ngpListboxSection"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpListboxSection, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: NgpListboxSection, isStandalone: true, selector: "[ngpListboxSection]", host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "header()?.id()" } }, queries: [{ propertyName: "header", first: true, predicate: NgpHeaderToken, descendants: true, isSignal: true }], exportAs: ["ngpListboxSection"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpListboxSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpListboxSection, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpListboxSection]',
@@ -186,10 +186,10 @@ class NgpListboxTrigger {
             event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpListboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpListboxTrigger, isStandalone: true, selector: "[ngpListboxTrigger]", host: { listeners: { "keydown": "openPopover($event)" } }, exportAs: ["ngpListboxTrigger"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpListboxTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpListboxTrigger, isStandalone: true, selector: "[ngpListboxTrigger]", host: { listeners: { "keydown": "openPopover($event)" } }, exportAs: ["ngpListboxTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpListboxTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpListboxTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpListboxTrigger]',
@@ -377,10 +377,10 @@ class NgpListbox {
     removeOption(option) {
         this.options.update(options => options.filter(o => o !== option));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpListbox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpListbox, isStandalone: true, selector: "[ngpListbox]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "ngpListboxMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpListboxValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpListboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpListboxCompareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpListboxValueChange" }, host: { attributes: { "role": "listbox" }, listeners: { "focusin": "isFocused.set(true)", "focusout": "isFocused.set(false)", "keydown": "onKeydown($event)" }, properties: { "id": "state.id()", "attr.tabindex": "tabindex()", "attr.aria-disabled": "state.disabled()", "attr.aria-multiselectable": "state.mode() === \"multiple\"", "attr.aria-activedescendant": "activeDescendant()" } }, providers: [provideListboxState()], exportAs: ["ngpListbox"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpListbox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpListbox, isStandalone: true, selector: "[ngpListbox]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "ngpListboxMode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "ngpListboxValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpListboxDisabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "ngpListboxCompareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpListboxValueChange" }, host: { attributes: { "role": "listbox" }, listeners: { "focusin": "isFocused.set(true)", "focusout": "isFocused.set(false)", "keydown": "onKeydown($event)" }, properties: { "id": "state.id()", "attr.tabindex": "tabindex()", "attr.aria-disabled": "state.disabled()", "attr.aria-multiselectable": "state.mode() === \"multiple\"", "attr.aria-activedescendant": "activeDescendant()" } }, providers: [provideListboxState()], exportAs: ["ngpListbox"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpListbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpListbox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpListbox]',

package/fesm2022/ng-primitives-menu.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, HostListener, Injector } from '@angular/core';
+import { InjectionToken, inject, HostListener, Directive, Injector } from '@angular/core';
 import * as i1$1 from 'ng-primitives/button';
 import { NgpButton } from 'ng-primitives/button';
 import { injectElementRef } from 'ng-primitives/internal';
@@ -82,10 +82,10 @@ class NgpSubmenuTrigger {
     showSubmenuOnHover() {
         this.openMenu('mouse');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpSubmenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpSubmenuTrigger, isStandalone: true, selector: "[ngpSubmenuTrigger]", host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown.ArrowRight": "showSubmenuOnArrow($event)", "keydown.ArrowLeft": "showSubmenuOnArrow($event)", "mouseenter": "showSubmenuOnHover()" } }, exportAs: ["ngpSubmenuTrigger"], hostDirectives: [{ directive: i1.NgpPopoverTrigger, inputs: ["ngpPopoverTrigger", "ngpSubmenuTrigger"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpSubmenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpSubmenuTrigger, isStandalone: true, selector: "[ngpSubmenuTrigger]", host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown.ArrowRight": "showSubmenuOnArrow($event)", "keydown.ArrowLeft": "showSubmenuOnArrow($event)", "mouseenter": "showSubmenuOnHover()" } }, exportAs: ["ngpSubmenuTrigger"], hostDirectives: [{ directive: i1.NgpPopoverTrigger, inputs: ["ngpPopoverTrigger", "ngpSubmenuTrigger"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpSubmenuTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpSubmenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSubmenuTrigger]',
@@ -157,10 +157,10 @@ class NgpMenuItem {
     showSubmenuOnHover() {
         this.parentMenu?.closeSubmenus.next(this.elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpMenuItem, isStandalone: true, selector: "[ngpMenuItem]", host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick($event)", "keydown.ArrowLeft": "handleArrowKey($event)", "keydown.ArrowRight": "handleArrowKey($event)", "mouseenter": "showSubmenuOnHover()" } }, exportAs: ["ngpMenuItem"], hostDirectives: [{ directive: i1$1.NgpButton, inputs: ["disabled", "ngpMenuItemDisabled"] }, { directive: i2.NgpRovingFocusItem }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpMenuItem, isStandalone: true, selector: "[ngpMenuItem]", host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick($event)", "keydown.ArrowLeft": "handleArrowKey($event)", "keydown.ArrowRight": "handleArrowKey($event)", "mouseenter": "showSubmenuOnHover()" } }, exportAs: ["ngpMenuItem"], hostDirectives: [{ directive: i1$1.NgpButton, inputs: ["disabled", "ngpMenuItemDisabled"] }, { directive: i2.NgpRovingFocusItem }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpMenuItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpMenuItem]',
@@ -202,10 +202,10 @@ class NgpMenuTrigger {
     closeOnEscape() {
         this.parentMenu?.closeAllMenus('keyboard');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpMenuTrigger, isStandalone: true, selector: "[ngpMenuTrigger]", host: { attributes: { "aria-haspopup": "true" }, listeners: { "document:keydown.escape": "closeOnEscape()" } }, exportAs: ["ngpMenuTrigger"], hostDirectives: [{ directive: i1.NgpPopoverTrigger, inputs: ["ngpPopoverTrigger", "ngpMenuTrigger", "ngpPopoverTriggerDisabled", "ngpMenuTriggerDisabled", "ngpPopoverTriggerPlacement", "ngpMenuTriggerPlacement", "ngpPopoverTriggerOffset", "ngpMenuTriggerOffset", "ngpPopoverTriggerShowDelay", "ngpMenuTriggerShowDelay", "ngpPopoverTriggerHideDelay", "ngpMenuTriggerHideDelay", "ngpPopoverTriggerFlip", "ngpMenuTriggerFlip", "ngpPopoverTriggerContainer", "ngpMenuTriggerContainer", "ngpPopoverTriggerScrollBehavior", "ngpMenuTriggerScrollBehavior"] }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpMenuTrigger, isStandalone: true, selector: "[ngpMenuTrigger]", host: { attributes: { "aria-haspopup": "true" }, listeners: { "document:keydown.escape": "closeOnEscape()" } }, exportAs: ["ngpMenuTrigger"], hostDirectives: [{ directive: i1.NgpPopoverTrigger, inputs: ["ngpPopoverTrigger", "ngpMenuTrigger", "ngpPopoverTriggerDisabled", "ngpMenuTriggerDisabled", "ngpPopoverTriggerPlacement", "ngpMenuTriggerPlacement", "ngpPopoverTriggerOffset", "ngpMenuTriggerOffset", "ngpPopoverTriggerShowDelay", "ngpMenuTriggerShowDelay", "ngpPopoverTriggerHideDelay", "ngpMenuTriggerHideDelay", "ngpPopoverTriggerFlip", "ngpMenuTriggerFlip", "ngpPopoverTriggerContainer", "ngpMenuTriggerContainer", "ngpPopoverTriggerScrollBehavior", "ngpMenuTriggerScrollBehavior"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpMenuTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpMenuTrigger]',
@@ -250,14 +250,14 @@ class NgpMenu {
         this.popover().hide(origin);
         this.parentMenu?.closeAllMenus(origin);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpMenu, isStandalone: true, selector: "[ngpMenu]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpMenu, isStandalone: true, selector: "[ngpMenu]", providers: [
             // ensure we don't inherit the focus group from the parent menu if there is one
             provideRovingFocusGroup(NgpRovingFocusGroup, { inherit: false }),
             provideMenu(NgpMenu),
         ], exportAs: ["ngpMenu"], hostDirectives: [{ directive: i1.NgpPopover }, { directive: i2.NgpRovingFocusGroup }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMenu, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpMenu]',

package/fesm2022/ng-primitives-meter.mjs

@@ -0,0 +1,164 @@
+import * as i0 from '@angular/core';
+import { input, numberAttribute, signal, computed, Directive } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { uniqueId } from 'ng-primitives/utils';
+
+/**
+ * The state token  for the Meter primitive.
+ */
+const NgpMeterStateToken = createStateToken('Meter');
+/**
+ * Provides the Meter state.
+ */
+const provideMeterState = createStateProvider(NgpMeterStateToken);
+/**
+ * Injects the Meter state.
+ */
+const injectMeterState = createStateInjector(NgpMeterStateToken);
+/**
+ * The Meter state registration function.
+ */
+const meterState = createState(NgpMeterStateToken);
+
+class NgpMeter {
+    constructor() {
+        /** The value of the meter. */
+        this.value = input(0, {
+            alias: 'ngpMeterValue',
+            transform: numberAttribute,
+        });
+        /** The minimum value of the meter. */
+        this.min = input(0, {
+            alias: 'ngpMeterMin',
+            transform: numberAttribute,
+        });
+        /** The maximum value of the meter. */
+        this.max = input(100, {
+            alias: 'ngpMeterMax',
+            transform: numberAttribute,
+        });
+        /**
+         * Define a function that returns the meter value label.
+         * @param value The current value
+         * @param max The maximum value
+         * @returns The value label
+         */
+        this.valueLabel = input((value, max) => `${Math.round((value / max) * 100)}%`, {
+            alias: 'ngpMeterValueLabel',
+        });
+        /** @internal Store the label instance */
+        this.label = signal(null);
+        /** @internal The percentage of the meter. */
+        this.percentage = computed(() => {
+            const value = this.state.value();
+            const min = this.state.min();
+            const max = this.state.max();
+            if (value == null) {
+                return 0;
+            }
+            if (value < min) {
+                return 0;
+            }
+            if (value > max) {
+                return 100;
+            }
+            return ((value - min) / (max - min)) * 100;
+        });
+        /** The state of the meter. */
+        this.state = meterState(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeter, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpMeter, isStandalone: true, selector: "[ngpMeter]", inputs: { value: { classPropertyName: "value", publicName: "ngpMeterValue", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "ngpMeterMin", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "ngpMeterMax", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "ngpMeterValueLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-valuenow": "percentage()", "attr.aria-valuemin": "min()", "attr.aria-valuemax": "max()", "attr.aria-valuetext": "valueLabel()(value(), max())", "attr.aria-labelledby": "label()?.id()" } }, providers: [provideMeterState()], exportAs: ["ngpMeter"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMeter]',
+                    exportAs: 'ngpMeter',
+                    providers: [provideMeterState()],
+                    host: {
+                        role: 'meter',
+                        '[attr.aria-valuenow]': 'percentage()',
+                        '[attr.aria-valuemin]': 'min()',
+                        '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-valuetext]': 'valueLabel()(value(), max())',
+                        '[attr.aria-labelledby]': 'label()?.id()',
+                    },
+                }]
+        }] });
+
+class NgpMeterTrack {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeterTrack, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpMeterTrack, isStandalone: true, selector: "[ngpMeterTrack]", exportAs: ["ngpMeterTrack"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeterTrack, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMeterTrack]',
+                    exportAs: 'ngpMeterTrack',
+                }]
+        }] });
+
+class NgpMeterIndicator {
+    constructor() {
+        /** Access the meter */
+        this.meter = injectMeterState();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeterIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpMeterIndicator, isStandalone: true, selector: "[ngpMeterIndicator]", host: { properties: { "style.width.%": "meter().percentage()" } }, exportAs: ["ngpMeterIndicator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeterIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMeterIndicator]',
+                    exportAs: 'ngpMeterIndicator',
+                    host: {
+                        '[style.width.%]': 'meter().percentage()',
+                    },
+                }]
+        }] });
+
+class NgpMeterValue {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeterValue, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpMeterValue, isStandalone: true, selector: "[ngpMeterValue]", host: { attributes: { "aria-hidden": "true" } }, exportAs: ["ngpMeterValue"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeterValue, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMeterValue]',
+                    exportAs: 'ngpMeterValue',
+                    host: {
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+class NgpMeterLabel {
+    constructor() {
+        /** Access the meter */
+        this.meter = injectMeterState();
+        /** The id of the meter label */
+        this.id = input(uniqueId('ngp-meter-label'));
+        // Register the label with the meter
+        this.meter().label.set(this);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeterLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpMeterLabel, isStandalone: true, selector: "[ngpMeterLabel]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()" } }, exportAs: ["ngpMeterLabel"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpMeterLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMeterLabel]',
+                    exportAs: 'ngpMeterLabel',
+                    host: {
+                        '[attr.id]': 'id()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgpMeter, NgpMeterIndicator, NgpMeterLabel, NgpMeterTrack, NgpMeterValue, injectMeterState, provideMeterState };
+//# sourceMappingURL=ng-primitives-meter.mjs.map

package/fesm2022/ng-primitives-meter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-primitives-meter.mjs","sources":["../../../../packages/ng-primitives/meter/src/meter/meter-state.ts","../../../../packages/ng-primitives/meter/src/meter/meter.ts","../../../../packages/ng-primitives/meter/src/meter-track/meter-track.ts","../../../../packages/ng-primitives/meter/src/meter-indicator/meter-indicator.ts","../../../../packages/ng-primitives/meter/src/meter-value/meter-value.ts","../../../../packages/ng-primitives/meter/src/meter-label/meter-label.ts","../../../../packages/ng-primitives/meter/src/ng-primitives-meter.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpMeter } from './meter';\n\n/**\n * The state token  for the Meter primitive.\n */\nexport const NgpMeterStateToken = createStateToken<NgpMeter>('Meter');\n\n/**\n * Provides the Meter state.\n */\nexport const provideMeterState = createStateProvider(NgpMeterStateToken);\n\n/**\n * Injects the Meter state.\n */\nexport const injectMeterState = createStateInjector(NgpMeterStateToken);\n\n/**\n * The Meter state registration function.\n */\nexport const meterState = createState(NgpMeterStateToken);\n","import { NumberInput } from '@angular/cdk/coercion';\nimport { computed, Directive, input, numberAttribute, signal } from '@angular/core';\nimport type { NgpMeterLabel } from '../meter-label/meter-label';\nimport { meterState, provideMeterState } from './meter-state';\n\n@Directive({\n  selector: '[ngpMeter]',\n  exportAs: 'ngpMeter',\n  providers: [provideMeterState()],\n  host: {\n    role: 'meter',\n    '[attr.aria-valuenow]': 'percentage()',\n    '[attr.aria-valuemin]': 'min()',\n    '[attr.aria-valuemax]': 'max()',\n    '[attr.aria-valuetext]': 'valueLabel()(value(), max())',\n    '[attr.aria-labelledby]': 'label()?.id()',\n  },\n})\nexport class NgpMeter {\n  /** The value of the meter. */\n  readonly value = input<number, NumberInput>(0, {\n    alias: 'ngpMeterValue',\n    transform: numberAttribute,\n  });\n\n  /** The minimum value of the meter. */\n  readonly min = input<number, NumberInput>(0, {\n    alias: 'ngpMeterMin',\n    transform: numberAttribute,\n  });\n\n  /** The maximum value of the meter. */\n  readonly max = input<number, NumberInput>(100, {\n    alias: 'ngpMeterMax',\n    transform: numberAttribute,\n  });\n\n  /**\n   * Define a function that returns the meter value label.\n   * @param value The current value\n   * @param max The maximum value\n   * @returns The value label\n   */\n  readonly valueLabel = input<NgpMeterValueTextFn>(\n    (value, max) => `${Math.round((value / max) * 100)}%`,\n    {\n      alias: 'ngpMeterValueLabel',\n    },\n  );\n\n  /** @internal Store the label instance */\n  readonly label = signal<NgpMeterLabel | null>(null);\n\n  /** @internal The percentage of the meter. */\n  readonly percentage = computed(() => {\n    const value = this.state.value();\n    const min = this.state.min();\n    const max = this.state.max();\n\n    if (value == null) {\n      return 0;\n    }\n\n    if (value < min) {\n      return 0;\n    }\n\n    if (value > max) {\n      return 100;\n    }\n\n    return ((value - min) / (max - min)) * 100;\n  });\n\n  /** The state of the meter. */\n  private readonly state = meterState<NgpMeter>(this);\n}\n\nexport type NgpMeterValueTextFn = (value: number, max: number) => string;\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngpMeterTrack]',\n  exportAs: 'ngpMeterTrack',\n})\nexport class NgpMeterTrack {}\n","import { Directive } from '@angular/core';\nimport { injectMeterState } from '../meter/meter-state';\n\n@Directive({\n  selector: '[ngpMeterIndicator]',\n  exportAs: 'ngpMeterIndicator',\n  host: {\n    '[style.width.%]': 'meter().percentage()',\n  },\n})\nexport class NgpMeterIndicator {\n  /** Access the meter */\n  protected readonly meter = injectMeterState();\n}\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[ngpMeterValue]',\n  exportAs: 'ngpMeterValue',\n  host: {\n    'aria-hidden': 'true',\n  },\n})\nexport class NgpMeterValue {}\n","import { Directive, input } from '@angular/core';\nimport { uniqueId } from 'ng-primitives/utils';\nimport { injectMeterState } from '../meter/meter-state';\n\n@Directive({\n  selector: '[ngpMeterLabel]',\n  exportAs: 'ngpMeterLabel',\n  host: {\n    '[attr.id]': 'id()',\n  },\n})\nexport class NgpMeterLabel {\n  /** Access the meter */\n  protected readonly meter = injectMeterState();\n\n  /** The id of the meter label */\n  readonly id = input(uniqueId('ngp-meter-label'));\n\n  constructor() {\n    // Register the label with the meter\n    this.meter().label.set(this);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-primitives-pagination.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, numberAttribute, booleanAttribute, computed, Directive, HostListener, output } from '@angular/core';
+import { input, numberAttribute, booleanAttribute, computed, HostListener, Directive, output } from '@angular/core';
 import * as i1 from 'ng-primitives/button';
 import { syncButton, NgpButton } from 'ng-primitives/button';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
@@ -72,10 +72,10 @@ class NgpPaginationButton {
         event.stopPropagation();
         this.goToPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpPaginationButton, isStandalone: true, selector: "[ngpPaginationButton]", inputs: { page: { classPropertyName: "page", publicName: "ngpPaginationButtonPage", isSignal: true, isRequired: true, transformFunction: null }, buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationButtonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-page": "page()", "attr.data-selected": "selected() ? \"\" : null", "attr.aria-current": "selected()" } }, exportAs: ["ngpPaginationButton"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpPaginationButton, isStandalone: true, selector: "[ngpPaginationButton]", inputs: { page: { classPropertyName: "page", publicName: "ngpPaginationButtonPage", isSignal: true, isRequired: true, transformFunction: null }, buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationButtonDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-page": "page()", "attr.data-selected": "selected() ? \"\" : null", "attr.aria-current": "selected()" } }, exportAs: ["ngpPaginationButton"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationButton]',
@@ -139,10 +139,10 @@ class NgpPaginationFirst {
         event.stopPropagation();
         this.goToFirstPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationFirst, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpPaginationFirst, isStandalone: true, selector: "[ngpPaginationFirst]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationFirstDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToFirstPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-first-page": "paginationState().firstPage() ? \"\" : null" } }, exportAs: ["ngpPaginationFirst"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationFirst, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpPaginationFirst, isStandalone: true, selector: "[ngpPaginationFirst]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationFirstDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToFirstPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-first-page": "paginationState().firstPage() ? \"\" : null" } }, exportAs: ["ngpPaginationFirst"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationFirst, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationFirst, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationFirst]',
@@ -204,10 +204,10 @@ class NgpPaginationLast {
         event.stopPropagation();
         this.goToLastPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationLast, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpPaginationLast, isStandalone: true, selector: "[ngpPaginationLast]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationLastDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToLastPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-last-page": "paginationState().lastPage() ? \"\" : null" } }, exportAs: ["ngpPaginationLast"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationLast, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpPaginationLast, isStandalone: true, selector: "[ngpPaginationLast]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationLastDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToLastPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-last-page": "paginationState().lastPage() ? \"\" : null" } }, exportAs: ["ngpPaginationLast"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationLast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationLast, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationLast]',
@@ -272,10 +272,10 @@ class NgpPaginationNext {
         event.stopPropagation();
         this.goToNextPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationNext, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpPaginationNext, isStandalone: true, selector: "[ngpPaginationNext]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationNextDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToNextPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-last-page": "paginationState().lastPage() ? \"\" : null" } }, exportAs: ["ngpPaginationNext"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationNext, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpPaginationNext, isStandalone: true, selector: "[ngpPaginationNext]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationNextDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToNextPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-last-page": "paginationState().lastPage() ? \"\" : null" } }, exportAs: ["ngpPaginationNext"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationNext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationNext, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationNext]',
@@ -340,10 +340,10 @@ class NgpPaginationPrevious {
         event.stopPropagation();
         this.goToPreviousPage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpPaginationPrevious, isStandalone: true, selector: "[ngpPaginationPrevious]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationPreviousDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToPreviousPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-first-page": "paginationState().firstPage() ? \"\" : null" } }, exportAs: ["ngpPaginationPrevious"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpPaginationPrevious, isStandalone: true, selector: "[ngpPaginationPrevious]", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "ngpPaginationPreviousDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "goToPreviousPage()", "keydown.enter": "onEnter($event)", "keydown.space": "onEnter($event)" }, properties: { "tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-first-page": "paginationState().firstPage() ? \"\" : null" } }, exportAs: ["ngpPaginationPrevious"], hostDirectives: [{ directive: i1.NgpButton }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPaginationPrevious, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPaginationPrevious, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPaginationPrevious]',
@@ -426,10 +426,10 @@ class NgpPagination {
         this.state.page.set(page);
         this.pageChange.emit(page);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPagination, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpPagination, isStandalone: true, selector: "[ngpPagination]", inputs: { page: { classPropertyName: "page", publicName: "ngpPaginationPage", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "ngpPaginationPageCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPaginationDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "ngpPaginationPageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.data-page": "state.page()", "attr.data-page-count": "state.pageCount()", "attr.data-first-page": "firstPage() ? \"\" : null", "attr.data-last-page": "lastPage() ? \"\" : null", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [providePaginationState()], exportAs: ["ngpPagination"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPagination, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpPagination, isStandalone: true, selector: "[ngpPagination]", inputs: { page: { classPropertyName: "page", publicName: "ngpPaginationPage", isSignal: true, isRequired: false, transformFunction: null }, pageCount: { classPropertyName: "pageCount", publicName: "ngpPaginationPageCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPaginationDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "ngpPaginationPageChange" }, host: { attributes: { "role": "navigation" }, properties: { "attr.data-page": "state.page()", "attr.data-page-count": "state.pageCount()", "attr.data-first-page": "firstPage() ? \"\" : null", "attr.data-last-page": "lastPage() ? \"\" : null", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [providePaginationState()], exportAs: ["ngpPagination"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPagination, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPagination, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPagination]',

package/fesm2022/ng-primitives-popover.mjs

@@ -12,7 +12,7 @@ import { fromResizeEvent } from 'ng-primitives/resize';
 import { injectDisposables } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import * as i1 from 'ng-primitives/focus-trap';
-import { NgpFocusTrap } from 'ng-primitives/focus-trap';
+import { injectFocusTrapState, NgpFocusTrap } from 'ng-primitives/focus-trap';
 
 const defaultPopoverConfig = {
     offset: 4,
@@ -330,11 +330,14 @@ class NgpPopoverTrigger {
         for (const child of this.stack) {
             child.hide(origin);
         }
+        // disable the focus trap in the popover to prevent it trying to return focus to the popover
+        // when the popover is closed/closing
+        this.popoverInstance?.focusTrap().disabled.set(true);
+        // ensure the trigger is focused after closing the popover
+        this.focusTrigger(origin);
         this.closeTimeout = this.disposables.setTimeout(async () => {
             this.closeTimeout = undefined;
             await this.destroyPopover();
-            // ensure the trigger is focused after closing the popover
-            this.disposables.setTimeout(() => this.focusTrigger(origin), 0);
         }, this.state.hideDelay());
     }
     onDocumentClick(event) {
@@ -403,15 +406,17 @@ class NgpPopoverTrigger {
     async destroyPopover() {
         // clear the close timeout
         this.closeTimeout = undefined;
-        await this.exitAnimationState.exit();
         const viewRef = this.viewRef();
-        // if the view is already destroyed then do not destroy it again
-        const isDestroyed = viewRef instanceof ComponentRef ? false : viewRef?.destroyed;
-        if (viewRef && !isDestroyed) {
-            // destroy the view ref
-            viewRef.destroy();
+        if (!viewRef) {
+            return;
         }
+        // we remove this to prevent the popover from being destroyed twice
+        // because ngOnDestroy will be called on the viewRef
+        // when the popover is destroyed triggering this method again
         this.viewRef.set(null);
+        await this.exitAnimationState.exit();
+        // destroy the view ref
+        viewRef.destroy();
         this.dispose?.();
         // deactivate the scroll strategy
         this.scrollStrategy().disable();
@@ -439,10 +444,10 @@ class NgpPopoverTrigger {
     setPopover(instance) {
         this.popoverInstance = instance;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpPopoverTrigger, isStandalone: true, selector: "[ngpPopoverTrigger]", inputs: { popover: { classPropertyName: "popover", publicName: "ngpPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPopoverTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpPopoverTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpPopoverTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngpPopoverTriggerShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngpPopoverTriggerHideDelay", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpPopoverTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpPopoverTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "ngpPopoverTriggerCloseOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "ngpPopoverTriggerCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "ngpPopoverTriggerScrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpPopoverTriggerContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleOpenState($event)", "document:keydown.escape": "handleEscapeKey()" }, properties: { "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"\" : null", "attr.data-placement": "state.placement()", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [providePopoverTriggerState({ inherit: false }), provideExitAnimationManager()], exportAs: ["ngpPopoverTrigger"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: NgpPopoverTrigger, isStandalone: true, selector: "[ngpPopoverTrigger]", inputs: { popover: { classPropertyName: "popover", publicName: "ngpPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpPopoverTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpPopoverTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpPopoverTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "ngpPopoverTriggerShowDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "ngpPopoverTriggerHideDelay", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpPopoverTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpPopoverTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "ngpPopoverTriggerCloseOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "ngpPopoverTriggerCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "ngpPopoverTriggerScrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpPopoverTriggerContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleOpenState($event)", "document:keydown.escape": "handleEscapeKey()" }, properties: { "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"\" : null", "attr.data-placement": "state.placement()", "attr.data-disabled": "state.disabled() ? \"\" : null" } }, providers: [providePopoverTriggerState({ inherit: false }), provideExitAnimationManager()], exportAs: ["ngpPopoverTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPopoverTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPopoverTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPopoverTrigger]',
@@ -504,6 +509,11 @@ class NgpPopover {
          * Access the focus monitor.
          */
         this.focusMonitor = inject(FocusMonitor);
+        /**
+         * Access the focus trap.
+         * @internal
+         */
+        this.focusTrap = injectFocusTrapState();
         /**
          * Access the trigger instance.
          */
@@ -543,10 +553,10 @@ class NgpPopover {
             this.popover.nativeElement.focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpPopover, isStandalone: true, selector: "[ngpPopover]", host: { attributes: { "role": "menu" }, listeners: { "keydown.escape": "trigger().handleEscapeKey()" }, properties: { "style.left.px": "x()", "style.top.px": "y()", "style.--ngp-popover-trigger-width.px": "trigger().width()", "style.--ngp-popover-transform-origin": "transformOrigin()" } }, exportAs: ["ngpPopover"], hostDirectives: [{ directive: i1.NgpFocusTrap }, { directive: i2.NgpExitAnimation }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: NgpPopover, isStandalone: true, selector: "[ngpPopover]", host: { attributes: { "role": "menu" }, listeners: { "keydown.escape": "trigger().handleEscapeKey()" }, properties: { "style.left.px": "x()", "style.top.px": "y()", "style.--ngp-popover-trigger-width.px": "trigger().width()", "style.--ngp-popover-transform-origin": "transformOrigin()" } }, exportAs: ["ngpPopover"], hostDirectives: [{ directive: i1.NgpFocusTrap }, { directive: i2.NgpExitAnimation }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: NgpPopover, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpPopover]',