ng-primitives 0.34.0 → 0.35.0

package/a11y/index.d.ts

@@ -1,2 +1,2 @@
 export * from './visually-hidden/visually-hidden';
-export { NgpVisuallyHiddenToken, injectVisuallyHidden, } from './visually-hidden/visually-hidden-token';
+export { provideVisuallyHiddenState, injectVisuallyHiddenState, } from './visually-hidden/visually-hidden-state';

package/a11y/visually-hidden/visually-hidden-state.d.ts

@@ -0,0 +1,52 @@
+import type { NgpVisuallyHidden } from './visually-hidden';
+/**
+ * The state token  for the VisuallyHidden primitive.
+ */
+export declare const NgpVisuallyHiddenStateToken: import("@angular/core").InjectionToken<NgpVisuallyHidden>;
+/**
+ * Provides the VisuallyHidden state.
+ */
+export declare const provideVisuallyHiddenState: () => import("@angular/core").FactoryProvider;
+/**
+ * Injects the VisuallyHidden state.
+ */
+export declare const injectVisuallyHiddenState: <U = {
+    readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    readonly style: import("@angular/core").Signal<{
+        position?: undefined;
+        width?: undefined;
+        height?: undefined;
+        margin?: undefined;
+        padding?: undefined;
+        overflow?: undefined;
+        clip?: undefined;
+        whiteSpace?: undefined;
+        border?: undefined;
+        wordWrap?: undefined;
+        outline?: undefined;
+        '-webkit-appearance'?: undefined;
+        '-moz-appearance'?: undefined;
+        'inset-inline-start'?: undefined;
+    } | {
+        position: string;
+        width: string;
+        height: string;
+        margin: string;
+        padding: string;
+        overflow: string;
+        clip: string;
+        whiteSpace: string;
+        border: string;
+        wordWrap: string;
+        outline: string;
+        '-webkit-appearance': string;
+        '-moz-appearance': string;
+        'inset-inline-start': string;
+    }>;
+    readonly state: import("ng-primitives/state").CreatedState<NgpVisuallyHidden>;
+    setVisibility: (visible: boolean) => void;
+}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+/**
+ * The VisuallyHidden state registration function.
+ */
+export declare const visuallyHiddenState: <U>(state: U) => import("ng-primitives/state").CreatedState<U>;

package/a11y/visually-hidden/visually-hidden.d.ts

@@ -38,6 +38,7 @@ export declare class NgpVisuallyHidden {
         '-moz-appearance': string;
         'inset-inline-start': string;
     }>;
+    protected readonly state: import("ng-primitives/state").CreatedState<NgpVisuallyHidden>;
     /**
      * Set the element visibility.
      * @param visible

package/avatar/avatar-image/avatar-image.d.ts

@@ -9,7 +9,42 @@ export declare class NgpAvatarImage implements OnInit {
     /**
      * Control the visibility of the image.
      */
-    protected readonly visuallyHidden: NgpVisuallyHidden;
+    protected readonly visuallyHidden: import("@angular/core").Signal<import("ng-primitives/state").State<{
+        readonly hidden: import("@angular/core").WritableSignal<boolean>;
+        readonly style: import("@angular/core").Signal<{
+            position?: undefined;
+            width?: undefined;
+            height?: undefined;
+            margin?: undefined;
+            padding?: undefined;
+            overflow?: undefined;
+            clip?: undefined;
+            whiteSpace?: undefined;
+            border?: undefined;
+            wordWrap?: undefined;
+            outline?: undefined;
+            "-webkit-appearance"?: undefined;
+            "-moz-appearance"?: undefined;
+            "inset-inline-start"?: undefined;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            margin: string;
+            padding: string;
+            overflow: string;
+            clip: string;
+            whiteSpace: string;
+            border: string;
+            wordWrap: string;
+            outline: string;
+            "-webkit-appearance": string;
+            "-moz-appearance": string;
+            "inset-inline-start": string;
+        }>;
+        readonly state: import("ng-primitives/state").CreatedState<NgpVisuallyHidden>;
+        setVisibility: (visible: boolean) => void;
+    }>>;
     /**
      * Access the avatar
      */

package/button/button/button-state.d.ts

@@ -1,3 +1,4 @@
+import { Signal } from '@angular/core';
 import type { NgpButton } from './button';
 /**
  * The state token  for the Button primitive.
@@ -15,8 +16,17 @@ export declare const injectButtonState: <U = {
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly isButton: boolean;
     readonly state: import("ng-primitives/state").CreatedState<NgpButton>;
-}>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
+}>(injectOptions?: import("@angular/core").InjectOptions) => Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Button state registration function.
  */
 export declare const buttonState: <U>(state: U) => import("ng-primitives/state").CreatedState<U>;
+interface SyncButton {
+    disabled: Signal<boolean>;
+}
+/**
+ * Sync the button state with control state.
+ * @param disabled The disabled state of the control.
+ */
+export declare function syncButton({ disabled }: SyncButton): void;
+export {};

package/button/button/button.d.ts

@@ -1,7 +1,6 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { NgpCanDisable } from 'ng-primitives/internal';
 import * as i0 from "@angular/core";
-export declare class NgpButton implements NgpCanDisable {
+export declare class NgpButton {
     /**
      * Get the native element of the button.
      */

package/button/index.d.ts

@@ -1,2 +1,2 @@
 export { NgpButton } from './button/button';
-export { injectButtonState, provideButtonState } from './button/button-state';
+export { injectButtonState, provideButtonState, syncButton } from './button/button-state';

package/checkbox/checkbox/checkbox.d.ts

@@ -1,12 +1,10 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { NgpCanDisable } from 'ng-primitives/internal';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/form-field";
-import * as i2 from "ng-primitives/interactions";
 /**
  * Apply the `ngpCheckbox` directive to an element to that represents the checkbox, such as a `button`.
  */
-export declare class NgpCheckbox implements NgpCanDisable {
+export declare class NgpCheckbox {
     /**
      * The id of the checkbox.
      * @internal
@@ -40,8 +38,9 @@ export declare class NgpCheckbox implements NgpCanDisable {
      * The state of the checkbox.
      */
     protected readonly state: import("ng-primitives/state").CreatedState<NgpCheckbox>;
+    constructor();
     protected onEnter(event: KeyboardEvent): void;
     toggle(event?: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpCheckbox, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpCheckbox, "[ngpCheckbox]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpCheckboxChecked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "ngpCheckboxIndeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "ngpCheckboxRequired"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpCheckboxDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpCheckboxCheckedChange"; "indeterminateChange": "ngpCheckboxIndeterminateChange"; }, never, never, true, [{ directive: typeof i1.NgpFormControl; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpHover; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpFocusVisible; inputs: {}; outputs: {}; }, { directive: typeof i2.NgpPress; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpCheckbox, "[ngpCheckbox]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpCheckboxChecked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "ngpCheckboxIndeterminate"; "required": false; "isSignal": true; }; "required": { "alias": "ngpCheckboxRequired"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpCheckboxDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpCheckboxCheckedChange"; "indeterminateChange": "ngpCheckboxIndeterminateChange"; }, never, never, true, [{ directive: typeof i1.NgpFormControl; inputs: {}; outputs: {}; }]>;
 }

package/date-picker/date-picker-date-button/date-picker-date-button.d.ts

@@ -1,11 +1,10 @@
 import { OnDestroy } from '@angular/core';
-import { NgpCanDisable } from 'ng-primitives/internal';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/button";
 /**
  * A button that represents a date in the date picker grid.
  */
-export declare class NgpDatePickerDateButton<T> implements NgpCanDisable, OnDestroy {
+export declare class NgpDatePickerDateButton<T> implements OnDestroy {
     /**
      * Access the element ref.
      */

package/date-picker/date-picker-next-month/date-picker-next-month.d.ts

@@ -1,10 +1,9 @@
-import { NgpCanDisable } from 'ng-primitives/internal';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/button";
 /**
  * A button that navigates to the next month.
  */
-export declare class NgpDatePickerNextMonth<T> implements NgpCanDisable {
+export declare class NgpDatePickerNextMonth<T> {
     /**
      * Access the element ref.
      */
@@ -30,6 +29,7 @@ export declare class NgpDatePickerNextMonth<T> implements NgpCanDisable {
      * @internal
      */
     readonly disabled: import("@angular/core").Signal<boolean>;
+    constructor();
     /**
      * Navigate to the next month.
      */

package/date-picker/date-picker-previous-month/date-picker-previous-month.d.ts

@@ -1,10 +1,9 @@
-import { NgpCanDisable } from 'ng-primitives/internal';
 import * as i0 from "@angular/core";
 import * as i1 from "ng-primitives/button";
 /**
  * A button that navigates to the previous month.
  */
-export declare class NgpDatePickerPreviousMonth<T> implements NgpCanDisable {
+export declare class NgpDatePickerPreviousMonth<T> {
     /**
      * Access the element ref.
      */
@@ -30,6 +29,7 @@ export declare class NgpDatePickerPreviousMonth<T> implements NgpCanDisable {
      * @internal
      */
     readonly disabled: import("@angular/core").Signal<boolean>;
+    constructor();
     /**
      * Navigate to the previous month.
      */

package/date-picker/index.d.ts

@@ -1,19 +1,15 @@
 export { NgpDatePickerCellRender } from './date-picker-cell-render/date-picker-cell-render';
-export { NgpDatePickerCellRenderToken, injectDatePickerCellDate, injectDatePickerCellRender, } from './date-picker-cell-render/date-picker-cell-render-token';
+export { injectDatePickerCellDate, injectDatePickerCellRender, NgpDatePickerCellRenderToken, } from './date-picker-cell-render/date-picker-cell-render-token';
 export { NgpDatePickerCell } from './date-picker-cell/date-picker-cell';
-export { NgpDatePickerCellToken, injectDatePickerCell, } from './date-picker-cell/date-picker-cell-token';
 export { NgpDatePickerDateButton } from './date-picker-date-button/date-picker-date-button';
-export { NgpDatePickerDateButtonToken, injectDatePickerDateButton, } from './date-picker-date-button/date-picker-date-button-token';
+export { injectDatePickerDateButton, NgpDatePickerDateButtonToken, } from './date-picker-date-button/date-picker-date-button-token';
 export { NgpDatePickerGrid } from './date-picker-grid/date-picker-grid';
-export { NgpDatePickerGridToken, injectDatePickerGrid, } from './date-picker-grid/date-picker-grid-token';
 export { NgpDatePickerLabel } from './date-picker-label/date-picker-label';
-export { NgpDatePickerLabelToken, injectDatePickerLabel, } from './date-picker-label/date-picker-label-token';
+export { injectDatePickerLabel, NgpDatePickerLabelToken, } from './date-picker-label/date-picker-label-token';
 export { NgpDatePickerNextMonth } from './date-picker-next-month/date-picker-next-month';
-export { NgpDatePickerNextMonthToken, injectDatePickerNextMonth, } from './date-picker-next-month/date-picker-next-month-token';
 export { NgpDatePickerPreviousMonth } from './date-picker-previous-month/date-picker-previous-month';
-export { NgpDatePickerPreviousMonthToken, injectDatePickerPreviousMonth, } from './date-picker-previous-month/date-picker-previous-month-token';
 export { NgpDatePickerRowRender } from './date-picker-row-render/date-picker-row-render';
-export { NgpDatePickerRowRenderToken, injectDatePickerRowRender, injectDatePickerWeek, } from './date-picker-row-render/date-picker-row-render-token';
+export { injectDatePickerRowRender, injectDatePickerWeek, NgpDatePickerRowRenderToken, } from './date-picker-row-render/date-picker-row-render-token';
 export { NgpDatePicker } from './date-picker/date-picker';
 export { injectDatePickerState, provideDatePickerState } from './date-picker/date-picker-state';
-export { NgpDatePickerToken, injectDatePicker } from './date-picker/date-picker-token';
+export { injectDatePicker, NgpDatePickerToken } from './date-picker/date-picker-token';

package/dialog/index.d.ts

@@ -1,12 +1,8 @@
 export { NgpDialogConfig, provideDialogConfig } from './config/dialog-config';
 export { NgpDialogDescription } from './dialog-description/dialog-description';
-export { injectDialogDescription, NgpDialogDescriptionToken, } from './dialog-description/dialog-description-token';
 export { NgpDialogOverlay } from './dialog-overlay/dialog-overlay';
-export { injectDialogOverlay, NgpDialogOverlayToken } from './dialog-overlay/dialog-overlay-token';
 export { NgpDialogTitle } from './dialog-title/dialog-title';
-export { injectDialogTitle, NgpDialogTitleToken } from './dialog-title/dialog-title-token';
 export { NgpDialogTrigger } from './dialog-trigger/dialog-trigger';
-export { injectDialogTrigger, NgpDialogTriggerToken } from './dialog-trigger/dialog-trigger-token';
 export { NgpDialog } from './dialog/dialog';
 export { injectDialogRef, NgpDialogRef } from './dialog/dialog-ref';
 export { injectDialogState, provideDialogState } from './dialog/dialog-state';

package/fesm2022/ng-primitives-a11y.mjs

@@ -1,13 +1,23 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, computed, Directive } from '@angular/core';
+import { signal, computed, Directive } from '@angular/core';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 
-const NgpVisuallyHiddenToken = new InjectionToken('NgpVisuallyHiddenToken');
 /**
- * Inject the VisuallyHidden directive instance
+ * The state token  for the VisuallyHidden primitive.
  */
-function injectVisuallyHidden() {
-    return inject(NgpVisuallyHiddenToken);
-}
+const NgpVisuallyHiddenStateToken = createStateToken('VisuallyHidden');
+/**
+ * Provides the VisuallyHidden state.
+ */
+const provideVisuallyHiddenState = createStateProvider(NgpVisuallyHiddenStateToken);
+/**
+ * Injects the VisuallyHidden state.
+ */
+const injectVisuallyHiddenState = createStateInjector(NgpVisuallyHiddenStateToken);
+/**
+ * The VisuallyHidden state registration function.
+ */
+const visuallyHiddenState = createState(NgpVisuallyHiddenStateToken);
 
 /**
  * Hide an element visually while keeping it present in the DOM.
@@ -39,6 +49,7 @@ class NgpVisuallyHidden {
                 'inset-inline-start': '0',
             };
         });
+        this.state = visuallyHiddenState(this);
     }
     /**
      * Set the element visibility.
@@ -48,14 +59,14 @@ class NgpVisuallyHidden {
         this.hidden.set(!visible);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpVisuallyHidden, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpVisuallyHidden, isStandalone: true, selector: "[ngpVisuallyHidden]", host: { properties: { "style": "style()" } }, providers: [{ provide: NgpVisuallyHiddenToken, useExisting: NgpVisuallyHidden }], exportAs: ["ngpVisuallyHidden"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpVisuallyHidden, isStandalone: true, selector: "[ngpVisuallyHidden]", host: { properties: { "style": "style()" } }, providers: [provideVisuallyHiddenState()], exportAs: ["ngpVisuallyHidden"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpVisuallyHidden, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpVisuallyHidden]',
                     exportAs: 'ngpVisuallyHidden',
-                    providers: [{ provide: NgpVisuallyHiddenToken, useExisting: NgpVisuallyHidden }],
+                    providers: [provideVisuallyHiddenState()],
                     host: {
                         '[style]': 'style()',
                     },
@@ -66,5 +77,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgpVisuallyHidden, NgpVisuallyHiddenToken, injectVisuallyHidden };
+export { NgpVisuallyHidden, injectVisuallyHiddenState, provideVisuallyHiddenState };
 //# sourceMappingURL=ng-primitives-a11y.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-a11y.mjs","sources":["../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden-token.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.ts","../../../../packages/ng-primitives/a11y/src/ng-primitives-a11y.ts"],"sourcesContent":["import { InjectionToken, inject } from '@angular/core';\nimport type { NgpVisuallyHidden } from './visually-hidden';\n\nexport const NgpVisuallyHiddenToken = new InjectionToken<NgpVisuallyHidden>(\n  'NgpVisuallyHiddenToken',\n);\n\n/**\n * Inject the VisuallyHidden directive instance\n */\nexport function injectVisuallyHidden(): NgpVisuallyHidden {\n  return inject(NgpVisuallyHiddenToken);\n}\n","import { Directive, computed, signal } from '@angular/core';\nimport { NgpVisuallyHiddenToken } from './visually-hidden-token';\n\n/**\n * Hide an element visually while keeping it present in the DOM.\n */\n@Directive({\n  selector: '[ngpVisuallyHidden]',\n  exportAs: 'ngpVisuallyHidden',\n  providers: [{ provide: NgpVisuallyHiddenToken, useExisting: NgpVisuallyHidden }],\n  host: {\n    '[style]': 'style()',\n  },\n})\nexport class NgpVisuallyHidden {\n  /**\n   * Whether the element is hidden.\n   */\n  protected readonly hidden = signal<boolean>(true);\n\n  protected readonly style = computed(() => {\n    if (!this.hidden()) {\n      return {};\n    }\n\n    return {\n      position: 'absolute',\n      width: '1px',\n      height: '1px',\n      margin: '-1px',\n      padding: '0',\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      border: '0',\n      wordWrap: 'normal',\n      outline: '0',\n      '-webkit-appearance': 'none',\n      '-moz-appearance': 'none',\n      'inset-inline-start': '0',\n    };\n  });\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void {\n    this.hidden.set(!visible);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAGa,sBAAsB,GAAG,IAAI,cAAc,CACtD,wBAAwB;AAG1B;;AAEG;SACa,oBAAoB,GAAA;AAClC,IAAA,OAAO,MAAM,CAAC,sBAAsB,CAAC;AACvC;;ACTA;;AAEG;MASU,iBAAiB,CAAA;AAR9B,IAAA,WAAA,GAAA;AASE;;AAEG;AACgB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAU,IAAI,CAAC;AAE9B,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;AAClB,gBAAA,OAAO,EAAE;;YAGX,OAAO;AACL,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,MAAM,EAAE,KAAK;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,IAAI,EAAE,kBAAkB;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,MAAM,EAAE,GAAG;AACX,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,oBAAoB,EAAE,MAAM;AAC5B,gBAAA,iBAAiB,EAAE,MAAM;AACzB,gBAAA,oBAAoB,EAAE,GAAG;aAC1B;AACH,SAAC,CAAC;AASH;AAPC;;;AAGG;AACH,IAAA,aAAa,CAAC,OAAgB,EAAA;QAC5B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;;8GAlChB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,EAAA,SAAA,EALjB,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAKrE,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,QAAQ,EAAE,mBAAmB;oBAC7B,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAmB,iBAAA,EAAE,CAAC;AAChF,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,SAAS;AACrB,qBAAA;AACF,iBAAA;;;ACbD;;AAEG;;;;"}
+{"version":3,"file":"ng-primitives-a11y.mjs","sources":["../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden-state.ts","../../../../packages/ng-primitives/a11y/src/visually-hidden/visually-hidden.ts","../../../../packages/ng-primitives/a11y/src/ng-primitives-a11y.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpVisuallyHidden } from './visually-hidden';\n\n/**\n * The state token  for the VisuallyHidden primitive.\n */\nexport const NgpVisuallyHiddenStateToken = createStateToken<NgpVisuallyHidden>('VisuallyHidden');\n\n/**\n * Provides the VisuallyHidden state.\n */\nexport const provideVisuallyHiddenState = createStateProvider(NgpVisuallyHiddenStateToken);\n\n/**\n * Injects the VisuallyHidden state.\n */\nexport const injectVisuallyHiddenState = createStateInjector(NgpVisuallyHiddenStateToken);\n\n/**\n * The VisuallyHidden state registration function.\n */\nexport const visuallyHiddenState = createState(NgpVisuallyHiddenStateToken);\n","import { Directive, computed, signal } from '@angular/core';\nimport { provideVisuallyHiddenState, visuallyHiddenState } from './visually-hidden-state';\n\n/**\n * Hide an element visually while keeping it present in the DOM.\n */\n@Directive({\n  selector: '[ngpVisuallyHidden]',\n  exportAs: 'ngpVisuallyHidden',\n  providers: [provideVisuallyHiddenState()],\n  host: {\n    '[style]': 'style()',\n  },\n})\nexport class NgpVisuallyHidden {\n  /**\n   * Whether the element is hidden.\n   */\n  protected readonly hidden = signal<boolean>(true);\n\n  protected readonly style = computed(() => {\n    if (!this.hidden()) {\n      return {};\n    }\n\n    return {\n      position: 'absolute',\n      width: '1px',\n      height: '1px',\n      margin: '-1px',\n      padding: '0',\n      overflow: 'hidden',\n      clip: 'rect(0, 0, 0, 0)',\n      whiteSpace: 'nowrap',\n      border: '0',\n      wordWrap: 'normal',\n      outline: '0',\n      '-webkit-appearance': 'none',\n      '-moz-appearance': 'none',\n      'inset-inline-start': '0',\n    };\n  });\n\n  protected readonly state = visuallyHiddenState<NgpVisuallyHidden>(this);\n\n  /**\n   * Set the element visibility.\n   * @param visible\n   */\n  setVisibility(visible: boolean): void {\n    this.hidden.set(!visible);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAQA;;AAEG;AACI,MAAM,2BAA2B,GAAG,gBAAgB,CAAoB,gBAAgB,CAAC;AAEhG;;AAEG;MACU,0BAA0B,GAAG,mBAAmB,CAAC,2BAA2B;AAEzF;;AAEG;MACU,yBAAyB,GAAG,mBAAmB,CAAC,2BAA2B;AAExF;;AAEG;AACI,MAAM,mBAAmB,GAAG,WAAW,CAAC,2BAA2B,CAAC;;ACvB3E;;AAEG;MASU,iBAAiB,CAAA;AAR9B,IAAA,WAAA,GAAA;AASE;;AAEG;AACgB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAU,IAAI,CAAC;AAE9B,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;AAClB,gBAAA,OAAO,EAAE;;YAGX,OAAO;AACL,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,MAAM,EAAE,KAAK;AACb,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,IAAI,EAAE,kBAAkB;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,MAAM,EAAE,GAAG;AACX,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,oBAAoB,EAAE,MAAM;AAC5B,gBAAA,iBAAiB,EAAE,MAAM;AACzB,gBAAA,oBAAoB,EAAE,GAAG;aAC1B;AACH,SAAC,CAAC;AAEiB,QAAA,IAAA,CAAA,KAAK,GAAG,mBAAmB,CAAoB,IAAI,CAAC;AASxE;AAPC;;;AAGG;AACH,IAAA,aAAa,CAAC,OAAgB,EAAA;QAC5B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;;8GApChB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EALjB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,0BAA0B,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAK9B,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,SAAS,EAAE,CAAC,0BAA0B,EAAE,CAAC;AACzC,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,SAAS;AACrB,qBAAA;AACF,iBAAA;;;ACbD;;AAEG;;;;"}

package/fesm2022/ng-primitives-avatar.mjs

@@ -5,7 +5,7 @@ import * as i1 from 'ng-primitives/interactions';
 import { NgpHover, NgpFocusVisible, NgpPress } from 'ng-primitives/interactions';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import * as i1$1 from 'ng-primitives/a11y';
-import { injectVisuallyHidden, NgpVisuallyHidden } from 'ng-primitives/a11y';
+import { injectVisuallyHiddenState, NgpVisuallyHidden } from 'ng-primitives/a11y';
 
 /**
  * The state token  for the Avatar primitive.
@@ -157,7 +157,7 @@ class NgpAvatarImage {
         /**
          * Control the visibility of the image.
          */
-        this.visuallyHidden = injectVisuallyHidden();
+        this.visuallyHidden = injectVisuallyHiddenState();
         /**
          * Access the avatar
          */
@@ -188,7 +188,7 @@ class NgpAvatarImage {
     setState(state) {
         this.avatar().setStatus(state);
         // if the state is loaded then we should make the image visible
-        this.visuallyHidden.setVisibility(state === NgpAvatarStatus.Loaded);
+        this.visuallyHidden().setVisibility(state === NgpAvatarStatus.Loaded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpAvatarImage, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: NgpAvatarImage, isStandalone: true, selector: "img[ngpAvatarImage]", host: { listeners: { "load": "onLoad()", "error": "onError()" } }, exportAs: ["ngpAvatarImage"], hostDirectives: [{ directive: i1$1.NgpVisuallyHidden }], ngImport: i0 }); }

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-avatar.mjs","sources":["../../../../packages/ng-primitives/avatar/src/avatar/avatar-state.ts","../../../../packages/ng-primitives/avatar/src/avatar/avatar.ts","../../../../packages/ng-primitives/avatar/src/config/avatar-config.ts","../../../../packages/ng-primitives/avatar/src/avatar-fallback/avatar-fallback.ts","../../../../packages/ng-primitives/avatar/src/avatar-image/avatar-image.ts","../../../../packages/ng-primitives/avatar/src/ng-primitives-avatar.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpAvatar } from './avatar';\n\n/**\n * The state token  for the Avatar primitive.\n */\nexport const NgpAvatarStateToken = createStateToken<NgpAvatar>('Avatar');\n\n/**\n * Provides the Avatar state.\n */\nexport const provideAvatarState = createStateProvider(NgpAvatarStateToken);\n\n/**\n * Injects the Avatar state.\n */\nexport const injectAvatarState = createStateInjector(NgpAvatarStateToken);\n\n/**\n * The Avatar state registration function.\n */\nexport const avatarState = createState(NgpAvatarStateToken);\n","import { Directive, signal } from '@angular/core';\nimport { NgpFocusVisible, NgpHover, NgpPress } from 'ng-primitives/interactions';\nimport { avatarState, provideAvatarState } from './avatar-state';\n\n/**\n * Apply the `ngpAvatar` directive to an element that represents the avatar. This directive is a container for the image and/or fallback.\n */\n@Directive({\n  selector: '[ngpAvatar]',\n  exportAs: 'ngpAvatar',\n  providers: [provideAvatarState()],\n  host: {\n    '[attr.data-status]': 'status()',\n  },\n  hostDirectives: [NgpHover, NgpFocusVisible, NgpPress],\n})\nexport class NgpAvatar {\n  /**\n   * Store the current status of the avatar.\n   * @internal\n   */\n  readonly status = signal(NgpAvatarStatus.Idle);\n\n  /**\n   * The avatar state.\n   */\n  protected readonly state = avatarState<NgpAvatar>(this);\n\n  /**\n   * Set the avatar status.\n   * @param status The status to set.\n   * @internal\n   */\n  setStatus(status: NgpAvatarStatus): void {\n    this.status.set(status);\n  }\n}\n\nexport enum NgpAvatarStatus {\n  Idle = 'idle',\n  Loading = 'loading',\n  Loaded = 'loaded',\n  Error = 'error',\n}\n","import { InjectionToken, Provider, inject } from '@angular/core';\n\nexport interface NgpAvatarConfig {\n  /**\n   * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.\n   * @default 0\n   */\n  delay: number;\n}\n\nexport const defaultAvatarConfig: NgpAvatarConfig = {\n  delay: 0,\n};\n\nexport const NgpAvatarConfigToken = new InjectionToken<NgpAvatarConfig>('NgpAvatarConfigToken');\n\n/**\n * Provide the avatar config\n * @param config The avatar config\n * @returns The provider\n */\nexport function provideAvatarConfig(config: Partial<NgpAvatarConfig>): Provider[] {\n  return [\n    {\n      provide: NgpAvatarConfigToken,\n      useValue: { ...defaultAvatarConfig, ...config },\n    },\n  ];\n}\n\n/**\n * Inject the avatar config\n * @returns The global avatar config\n */\nexport function injectAvatarConfig(): NgpAvatarConfig {\n  return inject(NgpAvatarConfigToken, { optional: true }) ?? defaultAvatarConfig;\n}\n","import { NumberInput } from '@angular/cdk/coercion';\nimport { computed, Directive, input, numberAttribute, OnInit, signal } from '@angular/core';\nimport { injectDisposables } from 'ng-primitives/utils';\nimport { NgpAvatarStatus } from '../avatar/avatar';\nimport { injectAvatarState } from '../avatar/avatar-state';\nimport { injectAvatarConfig } from '../config/avatar-config';\n\n/**\n * Apply the `ngpAvatarFallback` directive to an element that represents the user in the absence of an image. This is typically the user's initials.\n */\n@Directive({\n  selector: '[ngpAvatarFallback]',\n  exportAs: 'ngpAvatarFallback',\n  host: {\n    '[style.display]': 'visible() ? null : \"none\"',\n  },\n})\nexport class NgpAvatarFallback implements OnInit {\n  /**\n   * Access the avatar\n   */\n  private readonly avatar = injectAvatarState();\n\n  /**\n   * Access the global configuration.\n   */\n  private readonly config = injectAvatarConfig();\n\n  /**\n   * Access the disposable utilities.\n   */\n  private readonly disposables = injectDisposables();\n\n  /**\n   * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.\n   * @default 0\n   */\n  readonly delay = input<number, NumberInput>(this.config.delay, {\n    alias: 'ngpAvatarFallbackDelay',\n    transform: numberAttribute,\n  });\n\n  /**\n   * Determine if this element should be hidden.\n   * @returns True if the element should be visible\n   */\n  protected readonly visible = computed(\n    () =>\n      // we need to check if the element can render and if the avatar is not in a loaded state\n      this.delayElapsed() && this.avatar().status() !== NgpAvatarStatus.Loaded,\n  );\n\n  /**\n   * Determine the delay has elapsed, and we can show the fallback.\n   */\n  private delayElapsed = signal(false);\n\n  ngOnInit(): void {\n    this.disposables.setTimeout(() => this.delayElapsed.set(true), this.delay());\n  }\n}\n","import { Directive, ElementRef, HostListener, inject, OnInit } from '@angular/core';\nimport { injectVisuallyHidden, NgpVisuallyHidden } from 'ng-primitives/a11y';\nimport { NgpAvatarStatus } from '../avatar/avatar';\nimport { injectAvatarState } from '../avatar/avatar-state';\n\n/**\n * Apply the `ngpAvatarImage` directive to an element that represents the avatar image. This would typically be an `img` element or a `div` with a background image.\n */\n@Directive({\n  selector: 'img[ngpAvatarImage]',\n  exportAs: 'ngpAvatarImage',\n  hostDirectives: [NgpVisuallyHidden],\n})\nexport class NgpAvatarImage implements OnInit {\n  /**\n   * Control the visibility of the image.\n   */\n  protected readonly visuallyHidden = injectVisuallyHidden();\n\n  /**\n   * Access the avatar\n   */\n  private readonly avatar = injectAvatarState();\n\n  /**\n   * Access the image element ref.\n   */\n  private readonly elementRef = inject<ElementRef<HTMLImageElement>>(ElementRef);\n\n  ngOnInit(): void {\n    // mark the avatar as loading\n    this.setState(NgpAvatarStatus.Loading);\n\n    // if there is no src, we can report this as an error\n    if (!this.elementRef.nativeElement.src) {\n      this.setState(NgpAvatarStatus.Error);\n    }\n\n    // if the image has already loaded, we can report this to the avatar\n    if (this.elementRef.nativeElement.complete) {\n      this.setState(NgpAvatarStatus.Loaded);\n    }\n  }\n\n  @HostListener('load')\n  protected onLoad(): void {\n    this.setState(NgpAvatarStatus.Loaded);\n  }\n\n  @HostListener('error')\n  protected onError(): void {\n    this.setState(NgpAvatarStatus.Error);\n  }\n\n  private setState(state: NgpAvatarStatus) {\n    this.avatar().setStatus(state);\n\n    // if the state is loaded then we should make the image visible\n    this.visuallyHidden.setVisibility(state === NgpAvatarStatus.Loaded);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"ng-primitives-avatar.mjs","sources":["../../../../packages/ng-primitives/avatar/src/avatar/avatar-state.ts","../../../../packages/ng-primitives/avatar/src/avatar/avatar.ts","../../../../packages/ng-primitives/avatar/src/config/avatar-config.ts","../../../../packages/ng-primitives/avatar/src/avatar-fallback/avatar-fallback.ts","../../../../packages/ng-primitives/avatar/src/avatar-image/avatar-image.ts","../../../../packages/ng-primitives/avatar/src/ng-primitives-avatar.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpAvatar } from './avatar';\n\n/**\n * The state token  for the Avatar primitive.\n */\nexport const NgpAvatarStateToken = createStateToken<NgpAvatar>('Avatar');\n\n/**\n * Provides the Avatar state.\n */\nexport const provideAvatarState = createStateProvider(NgpAvatarStateToken);\n\n/**\n * Injects the Avatar state.\n */\nexport const injectAvatarState = createStateInjector(NgpAvatarStateToken);\n\n/**\n * The Avatar state registration function.\n */\nexport const avatarState = createState(NgpAvatarStateToken);\n","import { Directive, signal } from '@angular/core';\nimport { NgpFocusVisible, NgpHover, NgpPress } from 'ng-primitives/interactions';\nimport { avatarState, provideAvatarState } from './avatar-state';\n\n/**\n * Apply the `ngpAvatar` directive to an element that represents the avatar. This directive is a container for the image and/or fallback.\n */\n@Directive({\n  selector: '[ngpAvatar]',\n  exportAs: 'ngpAvatar',\n  providers: [provideAvatarState()],\n  host: {\n    '[attr.data-status]': 'status()',\n  },\n  hostDirectives: [NgpHover, NgpFocusVisible, NgpPress],\n})\nexport class NgpAvatar {\n  /**\n   * Store the current status of the avatar.\n   * @internal\n   */\n  readonly status = signal(NgpAvatarStatus.Idle);\n\n  /**\n   * The avatar state.\n   */\n  protected readonly state = avatarState<NgpAvatar>(this);\n\n  /**\n   * Set the avatar status.\n   * @param status The status to set.\n   * @internal\n   */\n  setStatus(status: NgpAvatarStatus): void {\n    this.status.set(status);\n  }\n}\n\nexport enum NgpAvatarStatus {\n  Idle = 'idle',\n  Loading = 'loading',\n  Loaded = 'loaded',\n  Error = 'error',\n}\n","import { InjectionToken, Provider, inject } from '@angular/core';\n\nexport interface NgpAvatarConfig {\n  /**\n   * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.\n   * @default 0\n   */\n  delay: number;\n}\n\nexport const defaultAvatarConfig: NgpAvatarConfig = {\n  delay: 0,\n};\n\nexport const NgpAvatarConfigToken = new InjectionToken<NgpAvatarConfig>('NgpAvatarConfigToken');\n\n/**\n * Provide the avatar config\n * @param config The avatar config\n * @returns The provider\n */\nexport function provideAvatarConfig(config: Partial<NgpAvatarConfig>): Provider[] {\n  return [\n    {\n      provide: NgpAvatarConfigToken,\n      useValue: { ...defaultAvatarConfig, ...config },\n    },\n  ];\n}\n\n/**\n * Inject the avatar config\n * @returns The global avatar config\n */\nexport function injectAvatarConfig(): NgpAvatarConfig {\n  return inject(NgpAvatarConfigToken, { optional: true }) ?? defaultAvatarConfig;\n}\n","import { NumberInput } from '@angular/cdk/coercion';\nimport { computed, Directive, input, numberAttribute, OnInit, signal } from '@angular/core';\nimport { injectDisposables } from 'ng-primitives/utils';\nimport { NgpAvatarStatus } from '../avatar/avatar';\nimport { injectAvatarState } from '../avatar/avatar-state';\nimport { injectAvatarConfig } from '../config/avatar-config';\n\n/**\n * Apply the `ngpAvatarFallback` directive to an element that represents the user in the absence of an image. This is typically the user's initials.\n */\n@Directive({\n  selector: '[ngpAvatarFallback]',\n  exportAs: 'ngpAvatarFallback',\n  host: {\n    '[style.display]': 'visible() ? null : \"none\"',\n  },\n})\nexport class NgpAvatarFallback implements OnInit {\n  /**\n   * Access the avatar\n   */\n  private readonly avatar = injectAvatarState();\n\n  /**\n   * Access the global configuration.\n   */\n  private readonly config = injectAvatarConfig();\n\n  /**\n   * Access the disposable utilities.\n   */\n  private readonly disposables = injectDisposables();\n\n  /**\n   * Define a delay before the fallback is shown. This is useful to only show the fallback for those with slower connections.\n   * @default 0\n   */\n  readonly delay = input<number, NumberInput>(this.config.delay, {\n    alias: 'ngpAvatarFallbackDelay',\n    transform: numberAttribute,\n  });\n\n  /**\n   * Determine if this element should be hidden.\n   * @returns True if the element should be visible\n   */\n  protected readonly visible = computed(\n    () =>\n      // we need to check if the element can render and if the avatar is not in a loaded state\n      this.delayElapsed() && this.avatar().status() !== NgpAvatarStatus.Loaded,\n  );\n\n  /**\n   * Determine the delay has elapsed, and we can show the fallback.\n   */\n  private delayElapsed = signal(false);\n\n  ngOnInit(): void {\n    this.disposables.setTimeout(() => this.delayElapsed.set(true), this.delay());\n  }\n}\n","import { Directive, ElementRef, HostListener, inject, OnInit } from '@angular/core';\nimport { injectVisuallyHiddenState, NgpVisuallyHidden } from 'ng-primitives/a11y';\nimport { NgpAvatarStatus } from '../avatar/avatar';\nimport { injectAvatarState } from '../avatar/avatar-state';\n\n/**\n * Apply the `ngpAvatarImage` directive to an element that represents the avatar image. This would typically be an `img` element or a `div` with a background image.\n */\n@Directive({\n  selector: 'img[ngpAvatarImage]',\n  exportAs: 'ngpAvatarImage',\n  hostDirectives: [NgpVisuallyHidden],\n})\nexport class NgpAvatarImage implements OnInit {\n  /**\n   * Control the visibility of the image.\n   */\n  protected readonly visuallyHidden = injectVisuallyHiddenState();\n\n  /**\n   * Access the avatar\n   */\n  private readonly avatar = injectAvatarState();\n\n  /**\n   * Access the image element ref.\n   */\n  private readonly elementRef = inject<ElementRef<HTMLImageElement>>(ElementRef);\n\n  ngOnInit(): void {\n    // mark the avatar as loading\n    this.setState(NgpAvatarStatus.Loading);\n\n    // if there is no src, we can report this as an error\n    if (!this.elementRef.nativeElement.src) {\n      this.setState(NgpAvatarStatus.Error);\n    }\n\n    // if the image has already loaded, we can report this to the avatar\n    if (this.elementRef.nativeElement.complete) {\n      this.setState(NgpAvatarStatus.Loaded);\n    }\n  }\n\n  @HostListener('load')\n  protected onLoad(): void {\n    this.setState(NgpAvatarStatus.Loaded);\n  }\n\n  @HostListener('error')\n  protected onError(): void {\n    this.setState(NgpAvatarStatus.Error);\n  }\n\n  private setState(state: NgpAvatarStatus) {\n    this.avatar().setStatus(state);\n\n    // if the state is loaded then we should make the image visible\n    this.visuallyHidden().setVisibility(state === NgpAvatarStatus.Loaded);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":";;;;;;;;;AAQA;;AAEG;AACI,MAAM,mBAAmB,GAAG,gBAAgB,CAAY,QAAQ,CAAC;AAExE;;AAEG;MACU,kBAAkB,GAAG,mBAAmB,CAAC,mBAAmB;AAEzE;;AAEG;MACU,iBAAiB,GAAG,mBAAmB,CAAC,mBAAmB;AAExE;;AAEG;AACI,MAAM,WAAW,GAAG,WAAW,CAAC,mBAAmB,CAAC;;ACtB3D;;AAEG;MAUU,SAAS,CAAA;AATtB,IAAA,WAAA,GAAA;AAUE;;;AAGG;AACM,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC;AAE9C;;AAEG;AACgB,QAAA,IAAA,CAAA,KAAK,GAAG,WAAW,CAAY,IAAI,CAAC;AAUxD;AARC;;;;AAIG;AACH,IAAA,SAAS,CAAC,MAAuB,EAAA;AAC/B,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;;8GAlBd,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,EANT,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,kBAAkB,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,QAAA,EAAA,EAAA,EAAA,SAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,SAAA,EAAA,EAAA,CAAA,QAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAMtB,SAAS,EAAA,UAAA,EAAA,CAAA;kBATrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,SAAS,EAAE,CAAC,kBAAkB,EAAE,CAAC;AACjC,oBAAA,IAAI,EAAE;AACJ,wBAAA,oBAAoB,EAAE,UAAU;AACjC,qBAAA;AACD,oBAAA,cAAc,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,QAAQ,CAAC;AACtD,iBAAA;;IAuBW;AAAZ,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,eAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,eAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EALW,eAAe,KAAf,eAAe,GAK1B,EAAA,CAAA,CAAA;;ACjCM,MAAM,mBAAmB,GAAoB;AAClD,IAAA,KAAK,EAAE,CAAC;CACT;AAEM,MAAM,oBAAoB,GAAG,IAAI,cAAc,CAAkB,sBAAsB,CAAC;AAE/F;;;;AAIG;AACG,SAAU,mBAAmB,CAAC,MAAgC,EAAA;IAClE,OAAO;AACL,QAAA;AACE,YAAA,OAAO,EAAE,oBAAoB;AAC7B,YAAA,QAAQ,EAAE,EAAE,GAAG,mBAAmB,EAAE,GAAG,MAAM,EAAE;AAChD,SAAA;KACF;AACH;AAEA;;;AAGG;SACa,kBAAkB,GAAA;AAChC,IAAA,OAAO,MAAM,CAAC,oBAAoB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,IAAI,mBAAmB;AAChF;;AC7BA;;AAEG;MAQU,iBAAiB,CAAA;AAP9B,IAAA,WAAA,GAAA;AAQE;;AAEG;QACc,IAAM,CAAA,MAAA,GAAG,iBAAiB,EAAE;AAE7C;;AAEG;QACc,IAAM,CAAA,MAAA,GAAG,kBAAkB,EAAE;AAE9C;;AAEG;QACc,IAAW,CAAA,WAAA,GAAG,iBAAiB,EAAE;AAElD;;;AAGG;QACM,IAAK,CAAA,KAAA,GAAG,KAAK,CAAsB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AAC7D,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,SAAS,EAAE,eAAe;AAC3B,SAAA,CAAC;AAEF;;;AAGG;AACgB,QAAA,IAAA,CAAA,OAAO,GAAG,QAAQ,CACnC;;AAEE,QAAA,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,KAAK,eAAe,CAAC,MAAM,CAC3E;AAED;;AAEG;AACK,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;AAKrC;IAHC,QAAQ,GAAA;QACN,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;8GAzCnE,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,6BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,IAAI,EAAE;AACJ,wBAAA,iBAAiB,EAAE,2BAA2B;AAC/C,qBAAA;AACF,iBAAA;;;ACXD;;AAEG;MAMU,cAAc,CAAA;AAL3B,IAAA,WAAA,GAAA;AAME;;AAEG;QACgB,IAAc,CAAA,cAAA,GAAG,yBAAyB,EAAE;AAE/D;;AAEG;QACc,IAAM,CAAA,MAAA,GAAG,iBAAiB,EAAE;AAE7C;;AAEG;AACc,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA+B,UAAU,CAAC;AAiC/E;IA/BC,QAAQ,GAAA;;AAEN,QAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC;;QAGtC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,EAAE;AACtC,YAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC;;;QAItC,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,EAAE;AAC1C,YAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC;;;IAK/B,MAAM,GAAA;AACd,QAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC;;IAI7B,OAAO,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC;;AAG9B,IAAA,QAAQ,CAAC,KAAsB,EAAA;QACrC,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;;AAG9B,QAAA,IAAI,CAAC,cAAc,EAAE,CAAC,aAAa,CAAC,KAAK,KAAK,eAAe,CAAC,MAAM,CAAC;;8GA7C5D,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAAA,IAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,QAAQ,EAAE,gBAAgB;oBAC1B,cAAc,EAAE,CAAC,iBAAiB,CAAC;AACpC,iBAAA;8BAiCW,MAAM,EAAA,CAAA;sBADf,YAAY;uBAAC,MAAM;gBAMV,OAAO,EAAA,CAAA;sBADhB,YAAY;uBAAC,OAAO;;;ACjDvB;;AAEG;;;;"}

package/fesm2022/ng-primitives-button.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, booleanAttribute, Directive } from '@angular/core';
-import { setupInteractions, NgpDisabledToken } from 'ng-primitives/internal';
+import { syncState, setupInteractions } from 'ng-primitives/internal';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 
 /**
@@ -19,6 +19,14 @@ const injectButtonState = createStateInjector(NgpButtonStateToken);
  * The Button state registration function.
  */
 const buttonState = createState(NgpButtonStateToken);
+/**
+ * Sync the button state with control state.
+ * @param disabled The disabled state of the control.
+ */
+function syncButton({ disabled }) {
+    const button = injectButtonState();
+    syncState(disabled, button().disabled);
+}
 
 class NgpButton {
     constructor() {
@@ -41,17 +49,22 @@ class NgpButton {
          */
         this.state = buttonState(this);
         // setup the hover, press, and focus-visible listeners
-        setupInteractions({ disabled: this.state.disabled });
+        setupInteractions({
+            disabled: this.state.disabled,
+            hover: true,
+            press: true,
+            focusVisible: true,
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpButton, isStandalone: true, selector: "[ngpButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "state.disabled() ? \"\" : null", "attr.disabled": "isButton && state.disabled() ? true : null" } }, providers: [{ provide: NgpDisabledToken, useExisting: NgpButton }, provideButtonState()], exportAs: ["ngpButton"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpButton, isStandalone: true, selector: "[ngpButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "state.disabled() ? \"\" : null", "attr.disabled": "isButton && state.disabled() ? true : null" } }, providers: [provideButtonState()], exportAs: ["ngpButton"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpButton]',
                     exportAs: 'ngpButton',
-                    providers: [{ provide: NgpDisabledToken, useExisting: NgpButton }, provideButtonState()],
+                    providers: [provideButtonState()],
                     host: {
                         '[attr.data-disabled]': 'state.disabled() ? "" : null',
                         '[attr.disabled]': 'isButton && state.disabled() ? true : null',
@@ -63,5 +76,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgpButton, injectButtonState, provideButtonState };
+export { NgpButton, injectButtonState, provideButtonState, syncButton };
 //# sourceMappingURL=ng-primitives-button.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-primitives-button.mjs","sources":["../../../../packages/ng-primitives/button/src/button/button-state.ts","../../../../packages/ng-primitives/button/src/button/button.ts","../../../../packages/ng-primitives/button/src/ng-primitives-button.ts"],"sourcesContent":["import {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpButton } from './button';\n\n/**\n * The state token  for the Button primitive.\n */\nexport const NgpButtonStateToken = createStateToken<NgpButton>('Button');\n\n/**\n * Provides the Button state.\n */\nexport const provideButtonState = createStateProvider(NgpButtonStateToken);\n\n/**\n * Injects the Button state.\n */\nexport const injectButtonState = createStateInjector(NgpButtonStateToken);\n\n/**\n * The Button state registration function.\n */\nexport const buttonState = createState(NgpButtonStateToken);\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, ElementRef, inject, input } from '@angular/core';\nimport { NgpCanDisable, NgpDisabledToken, setupInteractions } from 'ng-primitives/internal';\nimport { buttonState, provideButtonState } from './button-state';\n\n@Directive({\n  selector: '[ngpButton]',\n  exportAs: 'ngpButton',\n  providers: [{ provide: NgpDisabledToken, useExisting: NgpButton }, provideButtonState()],\n  host: {\n    '[attr.data-disabled]': 'state.disabled() ? \"\" : null',\n    '[attr.disabled]': 'isButton && state.disabled() ? true : null',\n  },\n})\nexport class NgpButton implements NgpCanDisable {\n  /**\n   * Get the native element of the button.\n   */\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /**\n   * Whether the button is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Detect if this is an HTML button element.\n   */\n  protected readonly isButton = this.elementRef.nativeElement.tagName.toLowerCase() === 'button';\n\n  /**\n   * The button state.\n   */\n  protected readonly state = buttonState<NgpButton>(this);\n\n  constructor() {\n    // setup the hover, press, and focus-visible listeners\n    setupInteractions({ disabled: this.state.disabled });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAQA;;AAEG;AACI,MAAM,mBAAmB,GAAG,gBAAgB,CAAY,QAAQ,CAAC;AAExE;;AAEG;MACU,kBAAkB,GAAG,mBAAmB,CAAC,mBAAmB;AAEzE;;AAEG;MACU,iBAAiB,GAAG,mBAAmB,CAAC,mBAAmB;AAExE;;AAEG;AACI,MAAM,WAAW,GAAG,WAAW,CAAC,mBAAmB,CAAC;;MCZ9C,SAAS,CAAA;AAuBpB,IAAA,WAAA,GAAA;AAtBA;;AAEG;AACc,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AAEzE;;AAEG;AACM,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAwB,KAAK,EAAE;AACtD,YAAA,SAAS,EAAE,gBAAgB;AAC5B,SAAA,CAAC;AAEF;;AAEG;AACgB,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,QAAQ;AAE9F;;AAEG;AACgB,QAAA,IAAA,CAAA,KAAK,GAAG,WAAW,CAAY,IAAI,CAAC;;QAIrD,iBAAiB,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;;8GAzB3C,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,EANT,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,gCAAA,EAAA,eAAA,EAAA,4CAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,kBAAkB,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAM7E,SAAS,EAAA,UAAA,EAAA,CAAA;kBATrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAW,SAAA,EAAE,EAAE,kBAAkB,EAAE,CAAC;AACxF,oBAAA,IAAI,EAAE;AACJ,wBAAA,sBAAsB,EAAE,8BAA8B;AACtD,wBAAA,iBAAiB,EAAE,4CAA4C;AAChE,qBAAA;AACF,iBAAA;;;ACbD;;AAEG;;;;"}
+{"version":3,"file":"ng-primitives-button.mjs","sources":["../../../../packages/ng-primitives/button/src/button/button-state.ts","../../../../packages/ng-primitives/button/src/button/button.ts","../../../../packages/ng-primitives/button/src/ng-primitives-button.ts"],"sourcesContent":["import { Signal } from '@angular/core';\nimport { syncState } from 'ng-primitives/internal';\nimport {\n  createState,\n  createStateInjector,\n  createStateProvider,\n  createStateToken,\n} from 'ng-primitives/state';\nimport type { NgpButton } from './button';\n\n/**\n * The state token  for the Button primitive.\n */\nexport const NgpButtonStateToken = createStateToken<NgpButton>('Button');\n\n/**\n * Provides the Button state.\n */\nexport const provideButtonState = createStateProvider(NgpButtonStateToken);\n\n/**\n * Injects the Button state.\n */\nexport const injectButtonState = createStateInjector(NgpButtonStateToken);\n\n/**\n * The Button state registration function.\n */\nexport const buttonState = createState(NgpButtonStateToken);\n\ninterface SyncButton {\n  disabled: Signal<boolean>;\n}\n\n/**\n * Sync the button state with control state.\n * @param disabled The disabled state of the control.\n */\nexport function syncButton({ disabled }: SyncButton) {\n  const button = injectButtonState();\n  syncState(disabled, button().disabled);\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, Directive, ElementRef, inject, input } from '@angular/core';\nimport { setupInteractions } from 'ng-primitives/internal';\nimport { buttonState, provideButtonState } from './button-state';\n\n@Directive({\n  selector: '[ngpButton]',\n  exportAs: 'ngpButton',\n  providers: [provideButtonState()],\n  host: {\n    '[attr.data-disabled]': 'state.disabled() ? \"\" : null',\n    '[attr.disabled]': 'isButton && state.disabled() ? true : null',\n  },\n})\nexport class NgpButton {\n  /**\n   * Get the native element of the button.\n   */\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n  /**\n   * Whether the button is disabled.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: booleanAttribute,\n  });\n\n  /**\n   * Detect if this is an HTML button element.\n   */\n  protected readonly isButton = this.elementRef.nativeElement.tagName.toLowerCase() === 'button';\n\n  /**\n   * The button state.\n   */\n  protected readonly state = buttonState<NgpButton>(this);\n\n  constructor() {\n    // setup the hover, press, and focus-visible listeners\n    setupInteractions({\n      disabled: this.state.disabled,\n      hover: true,\n      press: true,\n      focusVisible: true,\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAUA;;AAEG;AACI,MAAM,mBAAmB,GAAG,gBAAgB,CAAY,QAAQ,CAAC;AAExE;;AAEG;MACU,kBAAkB,GAAG,mBAAmB,CAAC,mBAAmB;AAEzE;;AAEG;MACU,iBAAiB,GAAG,mBAAmB,CAAC,mBAAmB;AAExE;;AAEG;AACI,MAAM,WAAW,GAAG,WAAW,CAAC,mBAAmB,CAAC;AAM3D;;;AAGG;AACa,SAAA,UAAU,CAAC,EAAE,QAAQ,EAAc,EAAA;AACjD,IAAA,MAAM,MAAM,GAAG,iBAAiB,EAAE;IAClC,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC;AACxC;;MC3Ba,SAAS,CAAA;AAuBpB,IAAA,WAAA,GAAA;AAtBA;;AAEG;AACc,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AAEzE;;AAEG;AACM,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAwB,KAAK,EAAE;AACtD,YAAA,SAAS,EAAE,gBAAgB;AAC5B,SAAA,CAAC;AAEF;;AAEG;AACgB,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,QAAQ;AAE9F;;AAEG;AACgB,QAAA,IAAA,CAAA,KAAK,GAAG,WAAW,CAAY,IAAI,CAAC;;AAIrD,QAAA,iBAAiB,CAAC;AAChB,YAAA,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;AAC7B,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,YAAY,EAAE,IAAI;AACnB,SAAA,CAAC;;8GA9BO,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,EANT,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,gCAAA,EAAA,eAAA,EAAA,4CAAA,EAAA,EAAA,EAAA,SAAA,EAAA,CAAC,kBAAkB,EAAE,CAAC,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAMtB,SAAS,EAAA,UAAA,EAAA,CAAA;kBATrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,SAAS,EAAE,CAAC,kBAAkB,EAAE,CAAC;AACjC,oBAAA,IAAI,EAAE;AACJ,wBAAA,sBAAsB,EAAE,8BAA8B;AACtD,wBAAA,iBAAiB,EAAE,4CAA4C;AAChE,qBAAA;AACF,iBAAA;;;ACbD;;AAEG;;;;"}

package/fesm2022/ng-primitives-checkbox.mjs

@@ -1,10 +1,8 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, output, Directive, HostListener } from '@angular/core';
 import * as i1 from 'ng-primitives/form-field';
-import { NgpFormControl } from 'ng-primitives/form-field';
-import * as i2 from 'ng-primitives/interactions';
-import { NgpHover, NgpFocusVisible, NgpPress } from 'ng-primitives/interactions';
-import { NgpDisabledToken } from 'ng-primitives/internal';
+import { syncFormControl, NgpFormControl } from 'ng-primitives/form-field';
+import { setupInteractions } from 'ng-primitives/internal';
 import { uniqueId } from 'ng-primitives/utils';
 import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 
@@ -79,6 +77,13 @@ class NgpCheckbox {
          * The state of the checkbox.
          */
         this.state = checkboxState(this);
+        syncFormControl({ disabled: this.state.disabled });
+        setupInteractions({
+            hover: true,
+            press: true,
+            focusVisible: true,
+            disabled: this.state.disabled,
+        });
     }
     onEnter(event) {
         // According to WAI ARIA, Checkboxes don't activate on enter keypress
@@ -99,14 +104,14 @@ class NgpCheckbox {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpCheckbox, isStandalone: true, selector: "[ngpCheckbox]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "ngpCheckboxChecked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "ngpCheckboxIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "ngpCheckboxRequired", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpCheckboxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "ngpCheckboxCheckedChange", indeterminateChange: "ngpCheckboxIndeterminateChange" }, host: { attributes: { "role": "checkbox" }, listeners: { "keydown.enter": "onEnter($event)", "click": "toggle($event)", "keydown.space": "toggle($event)" }, properties: { "attr.aria-checked": "state.indeterminate() ? \"mixed\" : state.checked()", "attr.data-checked": "state.checked() ? \"\" : null", "attr.data-indeterminate": "state.indeterminate() ? \"\" : null", "attr.aria-disabled": "state.disabled()", "tabindex": "state.disabled() ? -1 : 0" } }, providers: [provideCheckboxState(), { provide: NgpDisabledToken, useExisting: NgpCheckbox }], hostDirectives: [{ directive: i1.NgpFormControl }, { directive: i2.NgpHover }, { directive: i2.NgpFocusVisible }, { directive: i2.NgpPress }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: NgpCheckbox, isStandalone: true, selector: "[ngpCheckbox]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "ngpCheckboxChecked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "ngpCheckboxIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "ngpCheckboxRequired", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpCheckboxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "ngpCheckboxCheckedChange", indeterminateChange: "ngpCheckboxIndeterminateChange" }, host: { attributes: { "role": "checkbox" }, listeners: { "keydown.enter": "onEnter($event)", "click": "toggle($event)", "keydown.space": "toggle($event)" }, properties: { "attr.aria-checked": "state.indeterminate() ? \"mixed\" : state.checked()", "attr.data-checked": "state.checked() ? \"\" : null", "attr.data-indeterminate": "state.indeterminate() ? \"\" : null", "attr.aria-disabled": "state.disabled()", "tabindex": "state.disabled() ? -1 : 0" } }, providers: [provideCheckboxState()], hostDirectives: [{ directive: i1.NgpFormControl }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgpCheckbox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpCheckbox]',
-                    providers: [provideCheckboxState(), { provide: NgpDisabledToken, useExisting: NgpCheckbox }],
-                    hostDirectives: [NgpFormControl, NgpHover, NgpFocusVisible, NgpPress],
+                    providers: [provideCheckboxState()],
+                    hostDirectives: [NgpFormControl],
                     host: {
                         role: 'checkbox',
                         '[attr.aria-checked]': 'state.indeterminate() ? "mixed" : state.checked()',
@@ -116,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                         '[tabindex]': 'state.disabled() ? -1 : 0',
                     },
                 }]
-        }], propDecorators: { onEnter: [{
+        }], ctorParameters: () => [], propDecorators: { onEnter: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
             }], toggle: [{