ng-primitives 0.57.0 → 0.59.0

package/schematics/ng-generate/__snapshots__/index.spec.ts.snap

@@ -1,13 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component Schematic should create a button primitive 1`] = `
-"import { Component } from '@angular/core';
+"import { Component, input } from '@angular/core';
 import { NgpButton } from 'ng-primitives/button';
 
+/**
+ * The size of the button.
+ */
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * The variant of the button.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+
 @Component({
   selector: 'button[app-button]',
   hostDirectives: [{ directive: NgpButton, inputs: ['disabled'] }],
   template: '<ng-content />',
+  host: {
+    '[attr.data-size]': 'size()',
+    '[attr.data-variant]': 'variant()',
+  },
   styles: \`
 /* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
 
@@ -23,22 +37,151 @@ import { NgpButton } from 'ng-primitives/button';
       transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: var(--ngp-button-shadow);
       box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+
+    :host[data-variant='primary'],
+    :host:not([data-variant]) {
+      background-color: var(--ngp-background);
+      color: var(--ngp-text-primary);
+      border: none;
+    }
+
+    :host[data-variant='primary'][data-hover],
+    :host:not([data-variant])[data-hover] {
+      background-color: var(--ngp-background-hover);
+    }
+
+    :host[data-variant='primary'][data-press],
+    :host:not([data-variant])[data-press] {
+      background-color: var(--ngp-background-active);
+    }
+
+    :host[data-variant='secondary'] {
+      background-color: var(--ngp-secondary-background, #f1f5f9);
+      color: var(--ngp-secondary-text, #0f172a);
+      border: none;
+    }
+
+    :host[data-variant='secondary'][data-hover] {
+      background-color: var(--ngp-secondary-background-hover, #e2e8f0);
+    }
+
+    :host[data-variant='secondary'][data-press] {
+      background-color: var(--ngp-secondary-background-active, #cbd5e1);
+    }
+
+    :host[data-variant='destructive'] {
+      background-color: var(--ngp-destructive-background, #ef4444);
+      color: var(--ngp-destructive-text, #ffffff);
+      border: none;
+    }
+
+    :host[data-variant='destructive'][data-hover] {
+      background-color: var(--ngp-destructive-background-hover, #dc2626);
+    }
+
+    :host[data-variant='destructive'][data-press] {
+      background-color: var(--ngp-destructive-background-active, #b91c1c);
+    }
+
+    :host[data-variant='outline'] {
+      background-color: transparent;
+      color: var(--ngp-text-primary);
+      border: 1px solid var(--ngp-outline-border, #e2e8f0);
+      box-shadow: none;
     }
 
-    :host[data-hover] {
+    :host[data-variant='outline'][data-hover] {
       background-color: var(--ngp-background-hover);
+      border-color: var(--ngp-outline-border-hover, #cbd5e1);
+    }
+
+    :host[data-variant='outline'][data-press] {
+      background-color: var(--ngp-outline-background-active, rgba(15, 23, 42, 0.1));
+    }
+
+    :host[data-variant='ghost'] {
+      background-color: transparent;
+      color: var(--ngp-text-primary);
+      border: none;
+      box-shadow: none;
+    }
+
+    :host[data-variant='ghost'][data-hover] {
+      background-color: var(--ngp-background-hover);
+    }
+
+    :host[data-variant='ghost'][data-press] {
+      background-color: var(--ngp-ghost-background-active, rgba(15, 23, 42, 0.1));
+    }
+
+    :host[data-variant='link'] {
+      background-color: transparent;
+      color: var(--ngp-text-primary);
+      border: none;
+      box-shadow: none;
+      text-decoration-line: none;
+      height: auto;
+      padding: 0;
+    }
+
+    :host[data-variant='link'][data-hover] {
+      text-decoration-line: underline;
+    }
+
+    :host[data-variant='link'][data-press] {
+      text-decoration-line: underline;
     }
 
     :host[data-focus-visible] {
       outline: 2px solid var(--ngp-focus-ring);
     }
 
-    :host[data-press] {
-      background-color: var(--ngp-background-active);
+    :host[data-size='sm'] {
+      height: 2rem;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      font-size: 0.875rem;
+    }
+
+    :host[data-size='md'],
+    :host:not([data-size]) {
+      height: 2.5rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      font-size: 0.875rem;
+    }
+
+    :host[data-size='lg'] {
+      height: 3rem;
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+      font-size: 1rem;
+    }
+
+    :host[data-size='xl'] {
+      height: 3.5rem;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      font-size: 1.125rem;
     }
   \`,
 })
-export class ButtonComponent {}
+export class ButtonComponent {
+  /**
+   * The size of the button.
+   */
+  readonly size = input<ButtonSize>('md');
+
+  /**
+   * The variant of the button.
+   */
+  readonly variant = input<ButtonVariant>('primary');
+}
 "
 `;
 

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

@@ -1,10 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { NgpButton } from 'ng-primitives/button';
 
+/**
+ * The size of the button.
+ */
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * The variant of the button.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+
 @Component({
   selector: 'button[<%= prefix %>-button]',
   hostDirectives: [{ directive: NgpButton, inputs: ['disabled'] }],
   template: '<ng-content />',
+  host: {
+    '[attr.data-size]': 'size()',
+    '[attr.data-variant]': 'variant()',
+  },
   styles: `
 /* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
 
@@ -20,19 +34,148 @@ import { NgpButton } from 'ng-primitives/button';
       transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: var(--ngp-button-shadow);
       box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+
+    :host[data-variant='primary'],
+    :host:not([data-variant]) {
+      background-color: var(--ngp-background);
+      color: var(--ngp-text-primary);
+      border: none;
+    }
+
+    :host[data-variant='primary'][data-hover],
+    :host:not([data-variant])[data-hover] {
+      background-color: var(--ngp-background-hover);
+    }
+
+    :host[data-variant='primary'][data-press],
+    :host:not([data-variant])[data-press] {
+      background-color: var(--ngp-background-active);
+    }
+
+    :host[data-variant='secondary'] {
+      background-color: var(--ngp-secondary-background, #f1f5f9);
+      color: var(--ngp-secondary-text, #0f172a);
+      border: none;
+    }
+
+    :host[data-variant='secondary'][data-hover] {
+      background-color: var(--ngp-secondary-background-hover, #e2e8f0);
+    }
+
+    :host[data-variant='secondary'][data-press] {
+      background-color: var(--ngp-secondary-background-active, #cbd5e1);
+    }
+
+    :host[data-variant='destructive'] {
+      background-color: var(--ngp-destructive-background, #ef4444);
+      color: var(--ngp-destructive-text, #ffffff);
+      border: none;
+    }
+
+    :host[data-variant='destructive'][data-hover] {
+      background-color: var(--ngp-destructive-background-hover, #dc2626);
+    }
+
+    :host[data-variant='destructive'][data-press] {
+      background-color: var(--ngp-destructive-background-active, #b91c1c);
+    }
+
+    :host[data-variant='outline'] {
+      background-color: transparent;
+      color: var(--ngp-text-primary);
+      border: 1px solid var(--ngp-outline-border, #e2e8f0);
+      box-shadow: none;
     }
 
-    :host[data-hover] {
+    :host[data-variant='outline'][data-hover] {
       background-color: var(--ngp-background-hover);
+      border-color: var(--ngp-outline-border-hover, #cbd5e1);
+    }
+
+    :host[data-variant='outline'][data-press] {
+      background-color: var(--ngp-outline-background-active, rgba(15, 23, 42, 0.1));
+    }
+
+    :host[data-variant='ghost'] {
+      background-color: transparent;
+      color: var(--ngp-text-primary);
+      border: none;
+      box-shadow: none;
+    }
+
+    :host[data-variant='ghost'][data-hover] {
+      background-color: var(--ngp-background-hover);
+    }
+
+    :host[data-variant='ghost'][data-press] {
+      background-color: var(--ngp-ghost-background-active, rgba(15, 23, 42, 0.1));
+    }
+
+    :host[data-variant='link'] {
+      background-color: transparent;
+      color: var(--ngp-text-primary);
+      border: none;
+      box-shadow: none;
+      text-decoration-line: none;
+      height: auto;
+      padding: 0;
+    }
+
+    :host[data-variant='link'][data-hover] {
+      text-decoration-line: underline;
+    }
+
+    :host[data-variant='link'][data-press] {
+      text-decoration-line: underline;
     }
 
     :host[data-focus-visible] {
       outline: 2px solid var(--ngp-focus-ring);
     }
 
-    :host[data-press] {
-      background-color: var(--ngp-background-active);
+    :host[data-size='sm'] {
+      height: 2rem;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      font-size: 0.875rem;
+    }
+
+    :host[data-size='md'],
+    :host:not([data-size]) {
+      height: 2.5rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      font-size: 0.875rem;
+    }
+
+    :host[data-size='lg'] {
+      height: 3rem;
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+      font-size: 1rem;
+    }
+
+    :host[data-size='xl'] {
+      height: 3.5rem;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      font-size: 1.125rem;
     }
   `,
 })
-export class Button<%= componentSuffix %> {}
+export class Button<%= componentSuffix %> {
+  /**
+   * The size of the button.
+   */
+  readonly size = input<ButtonSize>('md');
+
+  /**
+   * The variant of the button.
+   */
+  readonly variant = input<ButtonVariant>('primary');
+}

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

@@ -15,6 +15,7 @@ import { Tooltip } from './tooltip';
         'ngpTooltipTriggerHideDelay:appTooltipTriggerHideDelay',
         'ngpTooltipTriggerFlip:appTooltipTriggerFlip',
         'ngpTooltipTriggerContainer:appTooltipTriggerContainer',
+        'ngpTooltipTriggerShowOnOverflow:appTooltipTriggerShowOnOverflow',
         'ngpTooltipTriggerContext:appTooltipTrigger',
       ],
     },

package/tooltip/config/tooltip-config.d.ts

@@ -31,6 +31,11 @@ export interface NgpTooltipConfig {
      * @default document.body
      */
     container: HTMLElement | null;
+    /**
+     * Whether the tooltip should only show when the trigger element overflows.
+     * @default false
+     */
+    showOnOverflow: boolean;
 }
 export declare const defaultTooltipConfig: NgpTooltipConfig;
 export declare const NgpTooltipConfigToken: InjectionToken<NgpTooltipConfig>;

package/tooltip/tooltip-trigger/tooltip-trigger.d.ts

@@ -1,5 +1,5 @@
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
-import { OnDestroy } from '@angular/core';
+import { OnDestroy, Signal } from '@angular/core';
 import { Placement } from '@floating-ui/dom';
 import { NgpOverlay, NgpOverlayContent } from 'ng-primitives/portal';
 import * as i0 from "@angular/core";
@@ -62,6 +62,11 @@ export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      * @default document.body
      */
     readonly container: import("@angular/core").InputSignal<HTMLElement | null>;
+    /**
+     * Define whether the tooltip should only show when the trigger element overflows.
+     * @default false
+     */
+    readonly showOnOverflow: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
     /**
      * Provide context to the tooltip. This can be used to pass data to the tooltip content.
      */
@@ -75,12 +80,17 @@ export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      * The open state of the tooltip.
      * @internal
      */
-    readonly open: import("@angular/core").Signal<boolean>;
+    readonly open: Signal<boolean>;
+    /**
+     * Determine if the trigger element has overflow.
+     */
+    private readonly hasOverflow;
     /**
      * Store the state of the tooltip.
      * @internal
      */
     readonly state: import("ng-primitives/state").CreatedState<NgpTooltipTrigger<T>>;
+    constructor();
     ngOnDestroy(): void;
     /**
      * Show the tooltip.
@@ -95,5 +105,5 @@ export declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      */
     private createOverlay;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgpTooltipTrigger<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltipTrigger<any>, "[ngpTooltipTrigger]", ["ngpTooltipTrigger"], { "tooltip": { "alias": "ngpTooltipTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpTooltipTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpTooltipTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpTooltipTriggerOffset"; "required": false; "isSignal": true; }; "showDelay": { "alias": "ngpTooltipTriggerShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "ngpTooltipTriggerHideDelay"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpTooltipTriggerFlip"; "required": false; "isSignal": true; }; "container": { "alias": "ngpTooltipTriggerContainer"; "required": false; "isSignal": true; }; "context": { "alias": "ngpTooltipTriggerContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpTooltipTrigger<any>, "[ngpTooltipTrigger]", ["ngpTooltipTrigger"], { "tooltip": { "alias": "ngpTooltipTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpTooltipTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpTooltipTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpTooltipTriggerOffset"; "required": false; "isSignal": true; }; "showDelay": { "alias": "ngpTooltipTriggerShowDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "ngpTooltipTriggerHideDelay"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpTooltipTriggerFlip"; "required": false; "isSignal": true; }; "container": { "alias": "ngpTooltipTriggerContainer"; "required": false; "isSignal": true; }; "showOnOverflow": { "alias": "ngpTooltipTriggerShowOnOverflow"; "required": false; "isSignal": true; }; "context": { "alias": "ngpTooltipTriggerContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/utils/helpers/attributes.d.ts

@@ -0,0 +1,2 @@
+import { Signal } from '@angular/core';
+export declare function booleanAttributeBinding(element: HTMLElement, attribute: string, value: Signal<boolean> | undefined): void;

package/utils/index.d.ts

@@ -1,8 +1,9 @@
 export { provideValueAccessor } from './forms/providers';
 export { controlStatus, NgpControlStatus } from './forms/status';
 export { ChangeFn, TouchedFn } from './forms/types';
+export { booleanAttributeBinding } from './helpers/attributes';
 export { injectDisposables } from './helpers/disposables';
 export { uniqueId } from './helpers/unique-id';
+export { safeTakeUntilDestroyed } from './observables/take-until-destroyed';
 export { onBooleanChange, onChange } from './signals';
 export { injectDimensions } from './ui/dimensions';
-export { safeTakeUntilDestroyed } from './observables/take-until-destroyed';

package/internal/signals/sync-state.d.ts

@@ -1,2 +0,0 @@
-import { Signal, WritableSignal } from '@angular/core';
-export declare function syncState<T>(source: Signal<T>, target: WritableSignal<T>): void;