ng-primitives 0.97.0 → 0.99.0

package/popover/index.d.ts

@@ -1,5 +1,5 @@
 import * as ng_primitives_portal from 'ng-primitives/portal';
-import { NgpOffset, NgpOverlayContent, NgpOffsetInput, NgpOverlay } from 'ng-primitives/portal';
+import { NgpOffset, NgpShift, NgpOverlayContent, NgpOffsetInput, NgpShiftInput, NgpOverlay } from 'ng-primitives/portal';
 export { injectOverlayContext as injectPopoverContext } from 'ng-primitives/portal';
 import * as _angular_core from '@angular/core';
 import { Provider, OnDestroy, InjectOptions, Signal } from '@angular/core';
@@ -57,6 +57,12 @@ interface NgpPopoverConfig {
      * @default scroll
      */
     scrollBehavior: 'reposition' | 'block';
+    /**
+     * Configure shift behavior to keep the popover in view.
+     * Can be a boolean to enable/disable, or an object with padding and limiter options.
+     * @default undefined (enabled by default in overlay)
+     */
+    shift: NgpShift;
 }
 /**
  * Provide the default Popover configuration
@@ -126,6 +132,12 @@ declare class NgpPopoverTrigger<T = null> implements OnDestroy {
      * @default true
      */
     readonly flip: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Configure shift behavior to keep the popover in view.
+     * Can be a boolean to enable/disable, or an object with padding and limiter options.
+     * @default undefined (enabled by default in overlay)
+     */
+    readonly shift: _angular_core.InputSignalWithTransform<NgpShift, NgpShiftInput>;
     /**
      * Define the container in which the popover should be attached.
      * @default document.body
@@ -191,7 +203,7 @@ declare class NgpPopoverTrigger<T = null> implements OnDestroy {
      */
     private createOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPopoverTrigger<any>, never>;
-    static ɵdir: _angular_core.ɵɵ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; }; "anchor": { "alias": "ngpPopoverTriggerAnchor"; "required": false; "isSignal": true; }; }, { "openChange": "ngpPopoverTriggerOpenChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵ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; }; "shift": { "alias": "ngpPopoverTriggerShift"; "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; }; "anchor": { "alias": "ngpPopoverTriggerAnchor"; "required": false; "isSignal": true; }; }, { "openChange": "ngpPopoverTriggerOpenChange"; }, never, never, true, never>;
 }
 type NgpPopoverPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
 

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

@@ -6,6 +6,10 @@ import { injectToastContext, NgpToast, NgpToastManager } from 'ng-primitives/toa
   selector: '<%= prefix %>-toast',
   imports: [NgpButton],
   hostDirectives: [NgpToast],
+  host: {
+    'animate.enter': 'toast-enter',
+    'animate.leave': 'toast-leave',
+  },
   template: `
     <p class="toast-title">{{ context.header }}</p>
     <p class="toast-description">{{ context.description }}</p>
@@ -17,11 +21,6 @@ import { injectToastContext, NgpToast, NgpToastManager } from 'ng-primitives/toa
     :host {
       position: absolute;
       touch-action: none;
-      transition:
-        transform 0.4s,
-        opacity 0.4s,
-        height 0.4s,
-        box-shadow 0.2s;
       box-sizing: border-box;
       align-items: center;
       gap: 6px;
@@ -31,16 +30,16 @@ import { injectToastContext, NgpToast, NgpToastManager } from 'ng-primitives/toa
       border: 1px solid var(--ngp-border);
       padding: 12px 16px;
       opacity: 0;
-      transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
       border-radius: 8px;
       z-index: var(--ngp-toast-z-index);
       grid-template-columns: 1fr auto;
       grid-template-rows: min-content min-content;
       column-gap: 12px;
       align-items: center;
-      width: var(--ngp-toast-width);
+      width: 350px;
       height: fit-content;
       transform: var(--y);
+      transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
     }
 
     .toast-title {
@@ -133,7 +132,7 @@ import { injectToastContext, NgpToast, NgpToastManager } from 'ng-primitives/toa
 
     :host[data-expanded='true'] {
       --y: translateY(calc(var(--lift) * var(--ngp-toast-offset)));
-      height: var(--ngp-toast-height);
+      height: auto;
     }
 
     :host[data-swiping='true'] {
@@ -161,6 +160,71 @@ import { injectToastContext, NgpToast, NgpToastManager } from 'ng-primitives/toa
       /* Fade out from 45px to 100px swipe */
       opacity: calc(1 - clamp(0, (var(--ngp-toast-swipe-y, 0px) - 45) / 55, 1));
     }
+
+    /* Truncate text only when toast is not front AND not expanded */
+    :host[data-front='false'][data-expanded='false'] .toast-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :host[data-front='false'][data-expanded='false'] .toast-description {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Angular animations based on position */
+
+    /* Bottom position animations */
+    :host[data-position-y='bottom'].toast-enter {
+      animation: toast-slide-in-bottom 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    :host[data-position-y='bottom'].toast-leave {
+      opacity: 0;
+      transform: translateY(100%);
+      transition:
+        opacity 400ms cubic-bezier(0.215, 0.61, 0.355, 1),
+        transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    /* Top position animations */
+    :host[data-position-y='top'].toast-enter {
+      animation: toast-slide-in-top 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    :host[data-position-y='top'].toast-leave {
+      opacity: 0;
+      transform: translateY(-100%);
+      transition:
+        opacity 400ms cubic-bezier(0.215, 0.61, 0.355, 1),
+        transform 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    /* Keyframes for bottom position */
+    @keyframes toast-slide-in-bottom {
+      from {
+        opacity: 0;
+        transform: translateY(100%);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Keyframes for top position */
+    @keyframes toast-slide-in-top {
+      from {
+        opacity: 0;
+        transform: translateY(-100%);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
   `,
 })
 export class Toast<%= componentSuffix %> {

package/toast/index.d.ts

@@ -216,4 +216,4 @@ interface NgpToastRef {
 }
 
 export { NgpToast, NgpToastManager, injectToastContext, provideToastConfig };
-export type { NgpToastConfig, NgpToastRef };
+export type { NgpToastConfig, NgpToastOptions, NgpToastRef };

package/toggle-group/index.d.ts

@@ -84,6 +84,10 @@ interface NgpToggleGroupState {
      * Whether the toggle group is disabled.
      */
     readonly disabled: WritableSignal<boolean>;
+    /**
+     * The orientation of the toggle group.
+     */
+    readonly orientation: WritableSignal<NgpOrientation>;
     /**
      * Select a value in the toggle group.
      */

package/tooltip/index.d.ts

@@ -1,5 +1,5 @@
 import * as ng_primitives_portal from 'ng-primitives/portal';
-import { NgpOffset, NgpOverlayContent, NgpOffsetInput, NgpOverlay } from 'ng-primitives/portal';
+import { NgpOffset, NgpShift, NgpOverlayContent, NgpOffsetInput, NgpShiftInput, NgpOverlay } from 'ng-primitives/portal';
 export { injectOverlayContext as injectTooltipContext } from 'ng-primitives/portal';
 import * as _angular_core from '@angular/core';
 import { Provider, OnDestroy, Signal } from '@angular/core';
@@ -49,6 +49,12 @@ interface NgpTooltipConfig {
      * @default true
      */
     useTextContent: boolean;
+    /**
+     * Configure shift behavior to keep the tooltip in view.
+     * Can be a boolean to enable/disable, or an object with padding and limiter options.
+     * @default undefined (enabled by default in overlay)
+     */
+    shift: NgpShift;
 }
 /**
  * Provide the default Tooltip configuration
@@ -119,6 +125,12 @@ declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      * @default true
      */
     readonly flip: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Configure shift behavior to keep the tooltip in view.
+     * Can be a boolean to enable/disable, or an object with padding and limiter options.
+     * @default undefined (enabled by default in overlay)
+     */
+    readonly shift: _angular_core.InputSignalWithTransform<NgpShift, NgpShiftInput>;
     /**
      * Define the container in which the tooltip should be attached.
      * @default document.body
@@ -181,7 +193,7 @@ declare class NgpTooltipTrigger<T = null> implements OnDestroy {
      */
     setTooltipId(id: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTooltipTrigger<any>, never>;
-    static ɵdir: _angular_core.ɵɵ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; }; "useTextContent": { "alias": "ngpTooltipTriggerUseTextContent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵ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; }; "shift": { "alias": "ngpTooltipTriggerShift"; "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; }; "useTextContent": { "alias": "ngpTooltipTriggerUseTextContent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 type NgpTooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';