ng-primitives 0.35.0 → 0.37.0

package/popover/popover-trigger/popover-trigger.d.ts

@@ -1,17 +1,21 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import { OnDestroy, TemplateRef } from '@angular/core';
+import { ComponentRef, EmbeddedViewRef, OnDestroy, TemplateRef, Type } from '@angular/core';
 import { Placement } from '@floating-ui/dom';
 import type { NgpPopover } from '../popover/popover';
 import * as i0 from "@angular/core";
 /**
  * Apply the `ngpPopoverTrigger` directive to an element that triggers the popover to show.
  */
-export declare class NgpPopoverTrigger implements OnDestroy {
+export declare class NgpPopoverTrigger<T = null> implements OnDestroy {
     /**
      * Access the trigger element
      */
     private readonly trigger;
+    /**
+     * Access the exit animation state.
+     */
+    private readonly exitAnimationState;
     /**
      * Inject the parent popover trigger if available.
      */
@@ -47,16 +51,7 @@ export declare class NgpPopoverTrigger implements OnDestroy {
     /**
      * Access the popover template ref.
      */
-    readonly popover: import("@angular/core").InputSignal<TemplateRef<void>>;
-    /**
-     * The open state of the popover.
-     * @default false
-     */
-    readonly open: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
-    /**
-     * Emit when the open state changes.
-     */
-    readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly popover: import("@angular/core").InputSignal<NgpPopoverContent<T> | null>;
     /**
      * Define if the trigger should be disabled.
      * @default false
@@ -107,10 +102,19 @@ export declare class NgpPopoverTrigger implements OnDestroy {
      * @default 'reposition'
      */
     readonly scrollBehavior: import("@angular/core").InputSignal<"reposition" | "block">;
+    /**
+     * Provide context to the popover.
+     * @default null
+     */
+    readonly context: import("@angular/core").InputSignal<T | null>;
     /**
      * Store the popover view ref.
      */
-    private viewRef;
+    protected readonly viewRef: import("@angular/core").WritableSignal<ComponentRef<unknown> | EmbeddedViewRef<void> | null>;
+    /**
+     * Determines if the popover is open.
+     */
+    readonly open: import("@angular/core").Signal<boolean>;
     /**
      * Derive the popover middleware from the provided configuration.
      */
@@ -150,7 +154,7 @@ export declare class NgpPopoverTrigger implements OnDestroy {
      * @internal
      * Register any child popover to the stack.
      */
-    readonly stack: NgpPopoverTrigger[];
+    readonly stack: NgpPopoverTrigger<any>[];
     /**
      * @internal
      * The timeout to open the popover.
@@ -164,12 +168,11 @@ export declare class NgpPopoverTrigger implements OnDestroy {
     /**
      * The popover trigger state.
      */
-    protected readonly state: import("ng-primitives/state").CreatedState<NgpPopoverTrigger>;
+    readonly state: import("ng-primitives/state").CreatedState<NgpPopoverTrigger<T>>;
     constructor();
     ngOnDestroy(): void;
     protected toggleOpenState(event: MouseEvent): void;
     /**
-     * @internal
      * Show the popover.
      */
     show(origin: FocusOrigin): void;
@@ -192,6 +195,11 @@ export declare class NgpPopoverTrigger implements OnDestroy {
      * @internal
      */
     setPopover(instance: NgpPopover): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgpPopoverTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpPopoverTrigger, "[ngpPopoverTrigger]", ["ngpPopoverTrigger"], { "popover": { "alias": "ngpPopoverTrigger"; "required": true; "isSignal": true; }; "open": { "alias": "ngpPopoverTriggerOpen"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpPopoverTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpPopoverTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpPopoverTriggerOffset"; "required": false; "isSignal": true; }; "showDelay": { "alias": "ngpPopoverTriggerShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "ngpPopoverTriggerHideDelay"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpPopoverTriggerFlip"; "required": false; "isSignal": true; }; "container": { "alias": "ngpPopoverTriggerContainer"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "ngpPopoverTriggerCloseOnOutsideClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "ngpPopoverTriggerCloseOnEscape"; "required": false; "isSignal": true; }; "scrollBehavior": { "alias": "ngpPopoverTriggerScrollBehavior"; "required": false; "isSignal": true; }; }, { "openChange": "ngpPopoverTriggerOpenChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpPopoverTrigger<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpPopoverTrigger<any>, "[ngpPopoverTrigger]", ["ngpPopoverTrigger"], { "popover": { "alias": "ngpPopoverTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpPopoverTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpPopoverTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpPopoverTriggerOffset"; "required": false; "isSignal": true; }; "showDelay": { "alias": "ngpPopoverTriggerShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "ngpPopoverTriggerHideDelay"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpPopoverTriggerFlip"; "required": false; "isSignal": true; }; "container": { "alias": "ngpPopoverTriggerContainer"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "ngpPopoverTriggerCloseOnOutsideClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "ngpPopoverTriggerCloseOnEscape"; "required": false; "isSignal": true; }; "scrollBehavior": { "alias": "ngpPopoverTriggerScrollBehavior"; "required": false; "isSignal": true; }; "context": { "alias": "ngpPopoverTriggerContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+type NgpPopoverTemplateContext<T> = {
+    $implicit: T;
+};
+type NgpPopoverContent<T> = TemplateRef<NgpPopoverTemplateContext<T>> | Type<unknown>;
+export {};

package/progress/progress/progress-state.d.ts

@@ -6,13 +6,13 @@ export declare const NgpProgressStateToken: import("@angular/core").InjectionTok
 /**
  * Provides the Progress state.
  */
-export declare const provideProgressState: () => import("@angular/core").FactoryProvider;
+export declare const provideProgressState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
 /**
  * Injects the Progress state.
  */
 export declare const injectProgressState: <U = {
-    readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
-    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+    readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
     readonly valueLabel: import("@angular/core").InputSignal<import("./progress").NgpProgressValueLabelFn>;
     readonly dataState: import("@angular/core").Signal<"indeterminate" | "complete" | "loading">;
     readonly label: import("@angular/core").Signal<string>;

package/progress/progress-indicator/progress-indicator.d.ts

@@ -8,8 +8,8 @@ export declare class NgpProgressIndicator {
      * Access the progress state.
      */
     protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
         readonly valueLabel: import("@angular/core").InputSignal<import("ng-primitives/progress").NgpProgressValueLabelFn>;
         readonly dataState: import("@angular/core").Signal<"indeterminate" | "complete" | "loading">;
         readonly label: import("@angular/core").Signal<string>;

package/radio/radio-group/radio-group-state.d.ts

@@ -7,7 +7,7 @@ export declare const NgpRadioGroupStateToken: import("@angular/core").InjectionT
 /**
  * Provides the RadioGroup state.
  */
-export declare const provideRadioGroupState: () => import("@angular/core").FactoryProvider;
+export declare const provideRadioGroupState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
 /**
  * Injects the RadioGroup state.
  */

package/radio/radio-item/radio-item-state.d.ts

@@ -7,7 +7,7 @@ export declare const NgpRadioItemStateToken: import("@angular/core").InjectionTo
 /**
  * Provides the RadioItem state.
  */
-export declare const provideRadioItemState: () => import("@angular/core").FactoryProvider;
+export declare const provideRadioItemState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
 /**
  * Injects the RadioItem state.
  */

package/roving-focus/roving-focus-group/roving-focus-group-state.d.ts

@@ -6,12 +6,12 @@ export declare const NgpRovingFocusGroupStateToken: import("@angular/core").Inje
 /**
  * Provides the RovingFocusGroup state.
  */
-export declare const provideRovingFocusGroupState: () => import("@angular/core").FactoryProvider;
+export declare const provideRovingFocusGroupState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
 /**
  * Injects the RovingFocusGroup state.
  */
 export declare const injectRovingFocusGroupState: <U = {
-    readonly directionality: import("@angular/cdk/bidi").Directionality;
+    readonly directionality: import("@angular/cdk/bidi-module.d-BSI86Zrk").Directionality;
     readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
     readonly wrap: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly homeEnd: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
@@ -22,11 +22,11 @@ export declare const injectRovingFocusGroupState: <U = {
     readonly state: import("ng-primitives/state").CreatedState<NgpRovingFocusGroup>;
     register: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem) => void;
     unregister: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem) => void;
-    setActiveItem: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem | null, origin?: import("@angular/cdk/a11y").FocusOrigin) => void;
-    activateFirstItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
-    activateLastItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
-    activateNextItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
-    activatePreviousItem: (origin: import("@angular/cdk/a11y").FocusOrigin) => void;
+    setActiveItem: (item: import("ng-primitives/roving-focus").NgpRovingFocusItem | null, origin?: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
+    activateFirstItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
+    activateLastItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
+    activateNextItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
+    activatePreviousItem: (origin: import("@angular/cdk/focus-monitor.d-BBkiOKUH").FocusOrigin) => void;
     onKeydown: (event: KeyboardEvent) => void;
 }>(injectOptions?: import("@angular/core").InjectOptions) => import("@angular/core").Signal<import("ng-primitives/state").State<U>>;
 /**

package/schematics/ng-generate/schema.d.ts

@@ -22,7 +22,10 @@ export interface AngularPrimitivesComponentSchema {
     | 'dialog'
     | 'file-upload'
     | 'search'
-    | 'toast';
+    | 'toast'
+    | 'toolbar'
+    | 'tooltip'
+    | 'meter';
 
   /**
    * The path where the component files should be created, relative to the current workspace.

package/schematics/ng-generate/schema.json

@@ -20,6 +20,7 @@
         "form-field",
         "input",
         "listbox",
+        "meter",
         "pagination",
         "progress",
         "radio",
@@ -31,7 +32,9 @@
         "textarea",
         "toast",
         "toggle",
-        "toggle-group"
+        "toggle-group",
+        "toolbar",
+        "tooltip"
       ],
       "x-prompt": "What primitive would you like to generate?",
       "$default": {

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

@@ -0,0 +1,78 @@
+import { NumberInput } from '@angular/cdk/coercion';
+import { Component, input, numberAttribute } from '@angular/core';
+import {
+  NgpMeter,
+  NgpMeterIndicator,
+  NgpMeterLabel,
+  NgpMeterTrack,
+  NgpMeterValue,
+} from 'ng-primitives/meter';
+
+@Component({
+  selector: '<%= prefix %>-meter',
+  hostDirectives: [
+    { directive: NgpMeter, inputs: ['ngpMeterValue:value', 'ngpMeterMin:min', 'ngpMeterMax:max'] },
+  ],
+  imports: [NgpMeterIndicator, NgpMeterLabel, NgpMeterValue, NgpMeterTrack],
+  template: `
+    <span ngpMeterLabel>{{ label() }}</span>
+    <span ngpMeterValue>{{ value() }}%</span>
+
+    <div ngpMeterTrack>
+      <div ngpMeterIndicator></div>
+    </div>
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-row-gap: 0.5rem;
+      width: 200px;
+      box-sizing: border-box;
+      padding: 0.5rem;
+    }
+
+    [ngpMeterLabel] {
+      color: var(--ngp-text-emphasis);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    [ngpMeterValue] {
+      color: var(--ngp-text-secondary);
+      font-size: 14px;
+      font-weight: 500;
+      text-align: right;
+      grid-column-start: 2;
+      text-align: end;
+    }
+
+    [ngpMeterTrack] {
+      grid-column: 1 / 3;
+      overflow: hidden;
+      background-color: var(--ngp-background);
+      box-shadow: var(--ngp-shadow-border);
+      border-radius: 4px;
+      height: 8px;
+    }
+
+    [ngpMeterIndicator] {
+      background-color: var(--ngp-background-success);
+      height: 100%;
+      transition: width 0.2s ease-in-out;
+      inset-inline-start: 0px;
+      border-radius: 4px;
+    }
+  `,
+})
+export class Meter<%= componentSuffix %> {
+  /** The value of the meter. */
+  readonly value = input<number, NumberInput>(0, {
+    transform: numberAttribute,
+  });
+
+  /** The label of the meter. */
+  readonly label = input.required<string>();
+}

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

@@ -51,39 +51,39 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
   template: `
     <ul>
       <li>
-        <a ngpPaginationFirst aria-label="First Page">
+        <button ngpPaginationFirst aria-label="First Page">
           <ng-icon name="heroChevronDoubleLeft" />
-        </a>
+        </button>
       </li>
 
       <li>
-        <a ngpPaginationPrevious aria-label="Previous Page">
+        <button ngpPaginationPrevious aria-label="Previous Page">
           <ng-icon name="heroChevronLeft" />
-        </a>
+        </button>
       </li>
 
       @for (page of pages(); track page) {
         <li>
-          <a
+          <button
             [ngpPaginationButtonPage]="page"
             [attr.aria-label]="'Page ' + page"
             ngpPaginationButton
           >
             {{ page }}
-          </a>
+          </button>
         </li>
       }
 
       <li>
-        <a ngpPaginationNext aria-label="Next Page">
+        <button ngpPaginationNext aria-label="Next Page">
           <ng-icon name="heroChevronRight" />
-        </a>
+        </button>
       </li>
 
       <li>
-        <a ngpPaginationLast aria-label="Last Page">
+        <button ngpPaginationLast aria-label="Last Page">
           <ng-icon name="heroChevronDoubleRight" />
-        </a>
+        </button>
       </li>
     </ul>
   `,
@@ -116,7 +116,7 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
       background-color: var(--ngp-background);
       box-shadow: var(--ngp-button-shadow);
       cursor: pointer;
-      transition: all 0.2s;
+      transition: background-color 0.2s;
 
       &[data-hover]:not([data-disabled]):not([data-selected]) {
         background-color: var(--ngp-background-hover);

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import {
   injectSliderState,
@@ -24,12 +24,12 @@ import { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';
     },
   ],
   imports: [NgpSliderTrack, NgpSliderRange, NgpSliderThumb],
-  viewProviders: [provideValueAccessor(Slider<%= componentSuffix %>)],
+  providers: [provideValueAccessor(Slider<%= componentSuffix %>)],
   template: `
     <div ngpSliderTrack>
       <div ngpSliderRange></div>
     </div>
-    <div ngpSliderThumb></div>
+    <div [ariaLabel]="ariaLabel()" ngpSliderThumb></div>
   `,
   styles: `
 /* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
@@ -84,6 +84,11 @@ export class Slider<%= componentSuffix %> implements ControlValueAccessor {
   /** Access the slider state */
   private readonly state = injectSliderState();
 
+  /** Forward the aria-label to the thumb */
+  readonly ariaLabel = input<string | null>(null, {
+    alias: 'aria-label',
+  });
+
   /**
    * The onChange callback function.
    */

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

@@ -0,0 +1,58 @@
+import { Component } from '@angular/core';
+import { NgpButton } from 'ng-primitives/button';
+import { NgpRovingFocusItem } from 'ng-primitives/roving-focus';
+
+@Component({
+  selector: 'button[<%= prefix %>-toolbar-button]',
+  hostDirectives: [
+    { directive: NgpButton, inputs: ['disabled'] },
+    {
+      directive: NgpRovingFocusItem,
+      inputs: ['ngpRovingFocusItemDisabled:disabled'],
+    },
+  ],
+  host: {
+    type: 'button',
+  },
+  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;
+      width: 2rem;
+      height: 2rem;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0.25rem;
+      border: 1px solid transparent;
+      background: transparent;
+      outline: none;
+      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      box-sizing: border-box;
+      color: var(--ngp-text-primary);
+      cursor: pointer;
+    }
+
+    :host[data-hover] {
+      background-color: var(--ngp-background-hover);
+      border-color: var(--ngp-border);
+    }
+
+    :host[data-focus-visible] {
+      outline: 2px solid var(--ngp-focus-ring);
+    }
+
+    :host[data-press] {
+      background-color: var(--ngp-background-active);
+    }
+
+    :host[data-selected] {
+      background-color: var(--ngp-background-inverse);
+      color: var(--ngp-text-inverse);
+    }
+  `,
+})
+export class ToolbarButton<%= componentSuffix %> {}

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

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { injectToolbarState, NgpToolbar } from 'ng-primitives/toolbar';
+
+@Component({
+  selector: '<%= prefix %>-toolbar',
+  hostDirectives: [{ directive: NgpToolbar, inputs: ['ngpToolbarOrientation:orientation'] }],
+  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;
+      column-gap: 0.25rem;
+      align-items: center;
+      border-radius: 0.375rem;
+      background-color: var(--ngp-background);
+      box-shadow: var(--ngp-button-shadow);
+      padding: 0.25rem;
+    }
+
+    :host[data-orientation='vertical'] {
+      flex-direction: column;
+      row-gap: 0.25rem;
+    }
+  `,
+})
+export class Toolbar<%= componentSuffix %> {
+  /** Access the toolbar state */
+  private readonly toolbar = injectToolbarState();
+
+  constructor() {
+    // default to horizontal orientation
+    this.toolbar().orientation.set('horizontal');
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Directive, input } from '@angular/core';
+import { injectTooltipTriggerState, NgpTooltipTrigger } from 'ng-primitives/tooltip';
+import { Tooltip } from './tooltip';
+
+@Directive({
+  selector: '[appTooltipTrigger]',
+  hostDirectives: [
+    {
+      directive: NgpTooltipTrigger,
+      inputs: [
+        'ngpTooltipTriggerPlacement:appTooltipTriggerPlacement',
+        'ngpTooltipTriggerDisabled:appTooltipTriggerDisabled',
+        'ngpTooltipTriggerOffset:appTooltipTriggerOffset',
+        'ngpTooltipTriggerShowDelay:appTooltipTriggerShowDelay',
+        'ngpTooltipTriggerHideDelay:appTooltipTriggerHideDelay',
+        'ngpTooltipTriggerFlip:appTooltipTriggerFlip',
+        'ngpTooltipTriggerContainer:appTooltipTriggerContainer',
+        'ngpTooltipTriggerContext:appTooltipTrigger',
+      ],
+    },
+  ],
+})
+export class TooltipTrigger {
+  /** Access the tooltip trigger */
+  private readonly tooltipTrigger = injectTooltipTriggerState();
+
+  /** Define the content of the tooltip */
+  readonly content = input.required<string>({
+    alias: 'appTooltipTrigger',
+  });
+
+  constructor() {
+    this.tooltipTrigger().tooltip.set(Tooltip);
+  }
+}

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

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { injectTooltipContext, NgpTooltip } from 'ng-primitives/tooltip';
+
+@Component({
+  selector: '<%= prefix %>-tooltip',
+  hostDirectives: [NgpTooltip],
+  template: `
+    {{ 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: absolute;
+      max-width: 16rem;
+      border-radius: 0.5rem;
+      background-color: var(--ngp-background-inverse);
+      padding: 0.5rem 0.75rem;
+      border: none;
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--ngp-text-inverse);
+      transform-origin: var(--ngp-tooltip-transform-origin);
+    }
+
+    :host[data-enter] {
+      animation: tooltip-show 200ms ease-in-out;
+    }
+
+    :host[data-exit] {
+      animation: tooltip-hide 200ms ease-in-out;
+    }
+
+    @keyframes tooltip-show {
+      0% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes tooltip-hide {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+    }
+  `,
+})
+export class Tooltip<%= componentSuffix %> {
+  /** Access the tooltip context where the content is stored. */
+  protected readonly content = injectTooltipContext<string>();
+}

package/search/search/search-state.d.ts

@@ -6,7 +6,7 @@ export declare const NgpSearchStateToken: import("@angular/core").InjectionToken
 /**
  * Provides the Search state.
  */
-export declare const provideSearchState: () => import("@angular/core").FactoryProvider;
+export declare const provideSearchState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
 /**
  * Injects the Search state.
  */

package/select/select/select-state.d.ts

@@ -6,7 +6,7 @@ export declare const NgpSelectStateToken: import("@angular/core").InjectionToken
 /**
  * Provides the Select state.
  */
-export declare const provideSelectState: () => import("@angular/core").FactoryProvider;
+export declare const provideSelectState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
 /**
  * Injects the Select state.
  */

package/slider/slider/slider-state.d.ts

@@ -6,16 +6,16 @@ export declare const NgpSliderStateToken: import("@angular/core").InjectionToken
 /**
  * Provides the Slider state.
  */
-export declare const provideSliderState: () => import("@angular/core").FactoryProvider;
+export declare const provideSliderState: (options?: import("ng-primitives/state").CreateStateProviderOptions) => import("@angular/core").FactoryProvider;
 /**
  * Injects the Slider state.
  */
 export declare const injectSliderState: <U = {
-    readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+    readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
     readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-    readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
-    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
-    readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+    readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+    readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+    readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
     readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     readonly track: import("@angular/core").WritableSignal<import("ng-primitives/slider").NgpSliderTrack | undefined>;

package/slider/slider-range/slider-range.d.ts

@@ -7,11 +7,11 @@ export declare class NgpSliderRange {
      * Access the slider state.
      */
     protected readonly sliderState: import("@angular/core").Signal<import("ng-primitives/state").State<{
-        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly value: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
         readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
-        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
-        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
-        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/coercion").NumberInput>;
+        readonly min: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly max: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
+        readonly step: import("@angular/core").InputSignalWithTransform<number, import("@angular/cdk/number-property.d-BzBQchZ2").NumberInput>;
         readonly orientation: import("@angular/core").InputSignal<import("ng-primitives/common").NgpOrientation>;
         readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
         readonly track: import("@angular/core").WritableSignal<import("ng-primitives/slider").NgpSliderTrack | undefined>;