ng-primitives 0.46.0 → 0.48.0

package/schematics/ng-generate/templates/menu/menu-item.__fileSuffix@dasherize__.ts.template

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { NgpMenuItem } from 'ng-primitives/menu';
+
+@Component({
+  selector: 'button[<%= prefix %>-menu-item]',
+  hostDirectives: [NgpMenuItem],
+  template: `
+    <ng-content />
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 8px 6px 14px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      border-radius: 4px;
+      min-width: 120px;
+      text-align: start;
+      outline: none;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    :host[data-hover] {
+      background-color: var(--ngp-background-active);
+    }
+
+    :host[data-focus-visible] {
+      outline: 2px solid var(--ngp-focus-ring);
+      z-index: 1;
+    }
+  `,
+})
+export class MenuItem<%= componentSuffix %> {}

package/schematics/ng-generate/templates/menu/menu.__fileSuffix@dasherize__.ts.template

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { NgpMenu } from 'ng-primitives/menu';
+
+@Component({
+  selector: '<%= prefix %>-menu',
+  hostDirectives: [NgpMenu],
+  template: `
+    <ng-content />
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      width: max-content;
+      background: var(--ngp-background);
+      border: 1px solid var(--ngp-border);
+      box-shadow: var(--ngp-shadow);
+      border-radius: 8px;
+      padding: 4px;
+      animation: menu-show 300ms ease-out;
+    }
+
+    :host[data-exit] {
+      animation: menu-hide 300ms ease-out;
+    }
+
+    @keyframes menu-show {
+      0% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes menu-hide {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+    }
+  `,
+})
+export class Menu<%= componentSuffix %> {}

package/switch/switch/switch-state.d.ts

@@ -18,7 +18,7 @@ export declare const injectSwitchState: <U = {
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly state: import("ng-primitives/state").CreatedState<NgpSwitch>;
     toggle: () => void;
-    onKeyDown: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
 }>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**
  * The Switch state registration function.

package/switch/switch/switch.d.ts

@@ -1,6 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
-import * as i1 from "ng-primitives/form-field";
 /**
  * Apply the `ngpSwitch` directive to an element to manage the checked state.
  */
@@ -40,7 +39,7 @@ export declare class NgpSwitch {
     /**
      * Handle the keydown event.
      */
-    protected onKeyDown(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSwitch, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, [{ directive: typeof i1.NgpFormControl; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, never>;
 }

package/switch/switch-thumb/switch-thumb.d.ts

@@ -14,7 +14,7 @@ export declare class NgpSwitchThumb {
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
         readonly state: import("ng-primitives/state").CreatedState<import("ng-primitives/switch").NgpSwitch>;
         toggle: () => void;
-        onKeyDown: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
     }>>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpSwitchThumb, never>;

package/tooltip/tooltip/tooltip.d.ts

@@ -1,5 +1,4 @@
 import * as i0 from "@angular/core";
-import * as i1 from "ng-primitives/internal";
 /**
  * Apply the `ngpTooltip` directive to an element that represents the tooltip. This typically would be a `div` inside an `ng-template`.
  */
@@ -9,5 +8,5 @@ export declare class NgpTooltip {
      */
     protected readonly overlay: import("ng-primitives/portal").NgpOverlay<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpTooltip, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltip, "[ngpTooltip]", ["ngpTooltip"], {}, {}, never, never, true, [{ directive: typeof i1.NgpExitAnimation; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltip, "[ngpTooltip]", ["ngpTooltip"], {}, {}, never, never, true, never>;
 }