ps-helix 6.0.0 → 6.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ps-helix",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "description": "Helix Design System - A comprehensive Angular component library",
   "author": "Fabrice PEREZ - Product designer at PACK Solutions",
   "license": "MIT",

package/src/lib/styles/tokens/effects.tokens.css

@@ -1,38 +1,39 @@
-/* Design Tokens - Visual Effects */
-
-:root {
-  /* Border Radii - Semantic aliases for sizing.tokens.css radius scale */
-  --border-radius: var(--radius-lg);        /* 0.5rem / 8px - Default radius */
-  --border-radius-lg: var(--radius-xl);     /* 0.75rem / 12px - Large radius */
-  --border-radius-full: var(--radius-full); /* 9999px - Full circle */
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-
-  /* Z-Index System */
-  --z-index-navigation: 50;
-  --z-index-dropdown: 100;
-  --z-index-tooltip: 200;
-  --z-index-modal-backdrop: 999;
-  --z-index-modal: 1000;
-  --z-index-toast: 9999;
-
-  /* Focus System */
-  --focus-outline-width: 2px;
-  --focus-outline-style: solid;
-  --focus-outline-color: var(--primary-color);
-  --focus-outline-offset: 2px;
-  --focus-ring-width: 3px;
-  --focus-ring-color: rgba(var(--primary-color-rgb), 0.2);
-
-  /* Focus variants */
-  --focus-ring-error: rgba(var(--danger-color-rgb), 0.2);
-  --focus-ring-success: rgba(var(--success-color-rgb), 0.2);
-  --focus-ring-warning: rgba(var(--warning-color-rgb), 0.2);
-
-  /* Opacity System */
-  --opacity-disabled: 0.6;
-  --opacity-loading: 0.7;
-}
+/* Design Tokens - Visual Effects */
+
+:root {
+  /* Border Radii - Semantic aliases for sizing.tokens.css radius scale */
+  --border-radius: var(--radius-lg);        /* 0.5rem / 8px - Default radius */
+  --border-radius-lg: var(--radius-xl);     /* 0.75rem / 12px - Large radius */
+  --border-radius-full: var(--radius-full); /* 9999px - Full circle */
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  /* Z-Index System */
+  --z-index-navigation: 50;
+  --z-index-dropdown: 100;
+  --z-index-tooltip: 200;
+  --z-index-modal-backdrop: 999;
+  --z-index-modal: 1000;
+  --z-index-overlay: 1100; /* body-teleported popovers (select/dropdown/menu) above modals */
+  --z-index-toast: 9999;
+
+  /* Focus System */
+  --focus-outline-width: 2px;
+  --focus-outline-style: solid;
+  --focus-outline-color: var(--primary-color);
+  --focus-outline-offset: 2px;
+  --focus-ring-width: 3px;
+  --focus-ring-color: rgba(var(--primary-color-rgb), 0.2);
+
+  /* Focus variants */
+  --focus-ring-error: rgba(var(--danger-color-rgb), 0.2);
+  --focus-ring-success: rgba(var(--success-color-rgb), 0.2);
+  --focus-ring-warning: rgba(var(--warning-color-rgb), 0.2);
+
+  /* Opacity System */
+  --opacity-disabled: 0.6;
+  --opacity-loading: 0.7;
+}

package/types/ps-helix.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { AfterContentChecked, OnDestroy, AfterContentInit, InjectionToken, AfterViewInit, EventEmitter, TemplateRef, Type } from '@angular/core';
+import { AfterContentChecked, OnDestroy, AfterContentInit, InjectionToken, AfterViewInit, EventEmitter, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FormCheckboxControl, FormValueControl } from '@angular/forms/signals';
 import * as ps_helix from 'ps-helix';
@@ -123,7 +123,7 @@ declare class PshAvatarComponent {
     hasIcon: _angular_core.Signal<boolean>;
     computedAriaLabel: _angular_core.Signal<string>;
     statusColor: _angular_core.Signal<string | undefined>;
-    state: _angular_core.Signal<"default" | AvatarStatus>;
+    state: _angular_core.Signal<AvatarStatus | "default">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PshAvatarComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PshAvatarComponent, "psh-avatar", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; "shape": "shapeChange"; "src": "srcChange"; "alt": "altChange"; }, never, never, true, never>;
 }
@@ -288,7 +288,7 @@ declare class PshCardComponent implements OnDestroy {
     /** État désactivé - réduit l'opacité */
     disabled: _angular_core.InputSignal<boolean>;
     /** Émis lors du clic sur la carte (si interactive) */
-    clicked: _angular_core.OutputEmitterRef<KeyboardEvent | MouseEvent>;
+    clicked: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
     /** Classes CSS calculées selon les propriétés */
     computedClasses: _angular_core.Signal<string>;
     /** Styles calculés */
@@ -356,7 +356,7 @@ declare class PshStatCardComponent {
     /** Active la direction row pour le card-body (icône et contenu côte à côte en flex-row) */
     rowDirection: _angular_core.InputSignal<boolean>;
     /** Émis lors du clic sur la carte */
-    clicked: _angular_core.OutputEmitterRef<KeyboardEvent | MouseEvent>;
+    clicked: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
     private computedValue;
     private computedDescription;
     private computedIcon;
@@ -450,7 +450,7 @@ declare class PshHorizontalCardComponent {
     /** Hauteur du contenu latéral sur mobile (utiliser les tokens de sizing) */
     mobileHeight: _angular_core.InputSignal<string>;
     /** Émis lors du clic sur la carte */
-    clicked: _angular_core.OutputEmitterRef<KeyboardEvent | MouseEvent>;
+    clicked: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
     /** Classes CSS calculées selon les propriétés */
     computedClasses: _angular_core.Signal<string>;
     /** Styles calculés */
@@ -560,7 +560,7 @@ declare class PshInfoCardComponent implements AfterContentInit, OnDestroy {
     /** Whether the card is disabled */
     disabled: _angular_core.InputSignal<boolean>;
     /** Emitted when card is clicked */
-    clicked: _angular_core.OutputEmitterRef<KeyboardEvent | MouseEvent>;
+    clicked: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
     /** Whether to show copy buttons on rows (opt-in) */
     copyable: _angular_core.InputSignal<boolean>;
     /** Label prefix for the copy button aria-label */
@@ -796,7 +796,11 @@ declare class PshDropdownComponent<T = string> {
     private elementRef;
     private readonly isBrowser;
     private readonly overlayPosition;
-    private readonly injector;
+    private readonly portal;
+    private readonly viewContainer;
+    private readonly menuTpl;
+    private portalRef;
+    private readonly repositionHandler;
     appearance: _angular_core.InputSignal<DropdownAppearance>;
     variant: _angular_core.InputSignal<DropdownVariant>;
     size: _angular_core.InputSignal<DropdownSize>;
@@ -822,6 +826,8 @@ declare class PshDropdownComponent<T = string> {
     state: _angular_core.Signal<string>;
     private getState;
     constructor();
+    private openPanel;
+    private closePanel;
     private reposition;
     toggleDropdown(): void;
     selectItem(item: DropdownItem<T>): void;
@@ -873,6 +879,12 @@ declare class PshInputComponent implements ControlValueAccessor, FormValueContro
     private readonly elementRef;
     private readonly cdr;
     private readonly destroyRef;
+    private readonly portal;
+    private readonly viewContainer;
+    private readonly overlayPosition;
+    private readonly suggestionsTpl;
+    private portalRef;
+    private readonly repositionHandler;
     private static nextId;
     readonly inputId: string;
     readonly value: _angular_core.ModelSignal<string>;
@@ -916,6 +928,11 @@ declare class PshInputComponent implements ControlValueAccessor, FormValueContro
     state: _angular_core.Signal<string>;
     private getState;
     constructor();
+    /** Attaches / detaches / repositions the teleported suggestions panel to match visibility. */
+    private syncPanel;
+    private openPanel;
+    private closePanel;
+    private reposition;
     private onChange;
     private onTouched;
     writeValue(value: unknown): void;
@@ -1006,7 +1023,7 @@ declare class PshTextareaComponent implements ControlValueAccessor, FormValueCon
     hasError: _angular_core.Signal<boolean>;
     computedAriaLabel: _angular_core.Signal<string | null>;
     describedBy: _angular_core.Signal<string | null>;
-    state: _angular_core.Signal<"default" | "success" | "disabled" | "error" | "readonly" | "focused">;
+    state: _angular_core.Signal<"success" | "default" | "disabled" | "error" | "readonly" | "focused">;
     characterCountLabel: "caractères";
     constructor();
     private onChange;
@@ -1649,7 +1666,11 @@ declare class PshSelectComponent<T = unknown> implements ControlValueAccessor, F
     private readonly elementRef;
     private readonly destroyRef;
     private readonly overlayPosition;
-    private readonly injector;
+    private readonly portal;
+    private readonly viewContainer;
+    private readonly panelTpl;
+    private portalRef;
+    private readonly repositionHandler;
     protected readonly resolvedSide: _angular_core.WritableSignal<"top" | "bottom">;
     protected readonly selectId: string;
     readonly value: _angular_core.ModelSignal<T | T[] | null>;
@@ -1684,7 +1705,7 @@ declare class PshSelectComponent<T = unknown> implements ControlValueAccessor, F
     scrollEnd: _angular_core.OutputEmitterRef<void>;
     isOpen: _angular_core.Signal<boolean>;
     searchTerm: _angular_core.Signal<string>;
-    state: _angular_core.Signal<"default" | "success" | "disabled" | "error">;
+    state: _angular_core.Signal<"success" | "default" | "disabled" | "error">;
     computedAriaLabel: _angular_core.Signal<string>;
     describedBy: _angular_core.Signal<"error-message" | "success-message" | "hint-message" | null>;
     flatFilteredOptions: _angular_core.Signal<FlatOption<T>[]>;
@@ -1692,6 +1713,9 @@ declare class PshSelectComponent<T = unknown> implements ControlValueAccessor, F
     selectedLabel: _angular_core.Signal<string>;
     filteredOptions: _angular_core.Signal<(SelectOption<T> | SelectOptionGroup<T>)[]>;
     constructor();
+    /** Teleports the options panel to the body-level overlay layer and positions it. */
+    private openPanel;
+    private closePanel;
     private reposition;
     private onChange;
     private onTouched;
@@ -2254,7 +2278,7 @@ declare const TABLE_CONFIG: InjectionToken<Partial<TableConfig>>;
 declare class PshTableComponent {
     private config;
     variant: _angular_core.InputSignal<"default" | "outline">;
-    size: _angular_core.InputSignal<"medium" | "small" | "large">;
+    size: _angular_core.InputSignal<"small" | "medium" | "large">;
     striped: _angular_core.InputSignal<boolean>;
     hoverable: _angular_core.InputSignal<boolean>;
     bordered: _angular_core.InputSignal<boolean>;
@@ -2266,7 +2290,7 @@ declare class PshTableComponent {
     emptyMessage: _angular_core.InputSignal<string>;
     noResultsMessage: _angular_core.InputSignal<string>;
     globalSearchPlaceholder: _angular_core.InputSignal<string>;
-    tableLayout: _angular_core.InputSignal<"auto" | "fixed">;
+    tableLayout: _angular_core.InputSignal<"fixed" | "auto">;
     truncateText: _angular_core.InputSignal<boolean>;
     expandable: _angular_core.InputSignal<boolean>;
     singleExpand: _angular_core.InputSignal<boolean>;
@@ -2851,5 +2875,50 @@ declare class PshOverlayService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<PshOverlayService>;
 }
 
-export { CHECKBOX_CONFIG, CUSTOMER_CONTEXT_SERVICE, INPUT_LABELS, MODAL_CONFIG, ModalService, NgxTranslateProvider, PAGINATION_CONFIG, PROGRESSBAR_CONFIG, PSH_THEME_OPTIONS, PshAlertComponent, PshAvatarComponent, PshBadgeComponent, PshButtonComponent, PshCardComponent, PshCheckboxComponent, PshClickOutsideDirective, PshCollapseComponent, PshDropdownComponent, PshFlowStepComponent, PshFocusTrapDirective, PshHorizontalCardComponent, PshInfoCardComponent, PshInputComponent, PshLiveAnnouncerService, PshMenuComponent, PshModalComponent, PshOverlayPositionService, PshOverlayService, PshPaginationComponent, PshProgressbarComponent, PshRadioComponent, PshSelectComponent, PshSidebarComponent, PshSpinLoaderComponent, PshStatCardComponent, PshStateFlowIndicatorComponent, PshStepComponent, PshStepperComponent, PshSwitchComponent, PshTabBarComponent, PshTabComponent, PshTableComponent, PshTabsComponent, PshTagComponent, PshTextareaComponent, PshToastComponent, PshToastService, PshTooltipComponent, RADIO_CONFIG, RADIO_STYLES, SIDEBAR_CONFIG, SPINLOADER_CONFIG, STATE_FLOW_INDICATOR_CONFIG, STEPPER_CONFIG, SWITCH_CONFIG, ScrollService, TABLE_CONFIG, TABS_CONFIG, TAB_BAR_CONFIG, TAG_CONFIG, TEXTAREA_LABELS, TOAST_CONFIG, TOOLTIP_CONFIG, TRANSLATION_PROVIDER, ThemeService, ToastComponent, ToastService, provideTranslation };
-export type { AlertConfig, AlertLabels, AlertRole, AlertSize, AlertType, AnnouncerPoliteness, AutocompleteConfig, AvatarConfig, AvatarShape, AvatarSize, AvatarStatus, BadgeDisplayType, BadgePosition, BadgeSize, BadgeVariant, ButtonAppearance, ButtonIconPosition, ButtonSize, ButtonVariant, CardActionsAlignment, CardColorVariant, CardDensity, CardVariant, CheckboxConfig, CheckboxLabelPosition, CheckboxSize, CollapseSize, CollapseVariant, CustomerContextService, DropdownAppearance, DropdownConfig, DropdownItem, DropdownPlacement, DropdownSize, DropdownVariant, FlowStepConfig, IconPosition, InfoCardData, InfoCardOptions, InfoCardVariant, InputConfig, InputSize, InputType, InputVariant, MenuItem, MenuMode, MenuVariant, ModalConfig, ModalSize, OverlayHandle, OverlayPositionOptions, OverlaySide, PaginationConfig, PaginationSize, PaginationVariant, ProgressbarConfig, ProgressbarLabelPosition, ProgressbarMode, ProgressbarSize, ProgressbarVariant, PshThemeOptions, RadioConfig, RadioSize, SearchConfig, SelectOption, SelectOptionGroup, SelectSize, SelectVariant, SidebarConfig, SidebarMode, SidebarPosition, SpinLoaderColor, SpinLoaderConfig, SpinLoaderSize, SpinLoaderVariant, StatCardLayout, StatCardVariant, StatTagVariant, StateFlowIndicatorAriaLabels, StateFlowIndicatorConfig, StateFlowIndicatorSize, StepConfig, StepperAriaLabels, StepperConfig, StepperVariant, SuggestionResult, SwitchConfig, SwitchSize, Tab, TabBarChangeEvent, TabBarConfig, TabBarItem, TabChangeEvent, TableCellContext, TableColumn, TableConfig, TableExpandedRowContext, TableRow, TableRowClickEvent, TableRowExpandEvent, TableSort, TabsConfig, TabsSize, TabsVariant, TagConfig, TagSize, TagVariant, TextareaConfig, TextareaResize, TextareaSize, TextareaVariant, Theme, ThemeConfig, Toast, ToastConfig, ToastPosition, ToastType, TooltipConfig, TooltipPosition, TooltipVariant, TranslationConfig, TranslationEntry, TranslationProvider };
+/** A handle to a teleported overlay panel. */
+interface PshPortalRef {
+    /** The panel's root element — use it to position and to scope click-outside. */
+    readonly panel: HTMLElement;
+    /**
+     * Positions the panel as `fixed` relative to `anchor`'s viewport rect, on the
+     * given side with `gap` px of spacing. Bounds `max-height` to the available
+     * viewport space so the panel never overflows the screen.
+     */
+    position(anchor: HTMLElement, side: 'top' | 'bottom', gap: number): void;
+    /**
+     * Positions the panel as `fixed` from `anchor`'s viewport rect for a
+     * `<side>-<align>` placement (e.g. `bottom-start`, `top-end`). The panel keeps
+     * its content width; the aligned edge (start/end) is anchored to the trigger.
+     */
+    positionByPlacement(anchor: HTMLElement, placement: string, gap: number): void;
+    /** Destroys the embedded view and removes the panel from the overlay layer. */
+    detach(): void;
+}
+/**
+ * Teleports a `TemplateRef` into a single body-level overlay layer so popover
+ * panels (select / dropdown / menu…) escape any ancestor `overflow`, `transform`
+ * or stacking context and can layer above modals.
+ *
+ * A lightweight, CDK-free "manual portal": the embedded view is created from the
+ * consumer's `ViewContainerRef` (so it stays in that component's change-detection
+ * tree and keeps its bindings reactive), then its root nodes are moved into the
+ * shared `.psh-overlay-layer`. The layer is `position: fixed; inset: 0;
+ * pointer-events: none` at `z-index: var(--z-index-overlay)`; panels re-enable
+ * pointer events. The layer is created lazily and removed once empty.
+ */
+declare class PshPortalService {
+    private readonly document;
+    private layer;
+    private count;
+    /** Teleports `tpl` into the overlay layer and returns a handle to control it. */
+    attach(tpl: TemplateRef<unknown>, vcr: ViewContainerRef): PshPortalRef;
+    private position;
+    private positionByPlacement;
+    private detach;
+    private ensureLayer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PshPortalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<PshPortalService>;
+}
+
+export { CHECKBOX_CONFIG, CUSTOMER_CONTEXT_SERVICE, INPUT_LABELS, MODAL_CONFIG, ModalService, NgxTranslateProvider, PAGINATION_CONFIG, PROGRESSBAR_CONFIG, PSH_THEME_OPTIONS, PshAlertComponent, PshAvatarComponent, PshBadgeComponent, PshButtonComponent, PshCardComponent, PshCheckboxComponent, PshClickOutsideDirective, PshCollapseComponent, PshDropdownComponent, PshFlowStepComponent, PshFocusTrapDirective, PshHorizontalCardComponent, PshInfoCardComponent, PshInputComponent, PshLiveAnnouncerService, PshMenuComponent, PshModalComponent, PshOverlayPositionService, PshOverlayService, PshPaginationComponent, PshPortalService, PshProgressbarComponent, PshRadioComponent, PshSelectComponent, PshSidebarComponent, PshSpinLoaderComponent, PshStatCardComponent, PshStateFlowIndicatorComponent, PshStepComponent, PshStepperComponent, PshSwitchComponent, PshTabBarComponent, PshTabComponent, PshTableComponent, PshTabsComponent, PshTagComponent, PshTextareaComponent, PshToastComponent, PshToastService, PshTooltipComponent, RADIO_CONFIG, RADIO_STYLES, SIDEBAR_CONFIG, SPINLOADER_CONFIG, STATE_FLOW_INDICATOR_CONFIG, STEPPER_CONFIG, SWITCH_CONFIG, ScrollService, TABLE_CONFIG, TABS_CONFIG, TAB_BAR_CONFIG, TAG_CONFIG, TEXTAREA_LABELS, TOAST_CONFIG, TOOLTIP_CONFIG, TRANSLATION_PROVIDER, ThemeService, ToastComponent, ToastService, provideTranslation };
+export type { AlertConfig, AlertLabels, AlertRole, AlertSize, AlertType, AnnouncerPoliteness, AutocompleteConfig, AvatarConfig, AvatarShape, AvatarSize, AvatarStatus, BadgeDisplayType, BadgePosition, BadgeSize, BadgeVariant, ButtonAppearance, ButtonIconPosition, ButtonSize, ButtonVariant, CardActionsAlignment, CardColorVariant, CardDensity, CardVariant, CheckboxConfig, CheckboxLabelPosition, CheckboxSize, CollapseSize, CollapseVariant, CustomerContextService, DropdownAppearance, DropdownConfig, DropdownItem, DropdownPlacement, DropdownSize, DropdownVariant, FlowStepConfig, IconPosition, InfoCardData, InfoCardOptions, InfoCardVariant, InputConfig, InputSize, InputType, InputVariant, MenuItem, MenuMode, MenuVariant, ModalConfig, ModalSize, OverlayHandle, OverlayPositionOptions, OverlaySide, PaginationConfig, PaginationSize, PaginationVariant, ProgressbarConfig, ProgressbarLabelPosition, ProgressbarMode, ProgressbarSize, ProgressbarVariant, PshPortalRef, PshThemeOptions, RadioConfig, RadioSize, SearchConfig, SelectOption, SelectOptionGroup, SelectSize, SelectVariant, SidebarConfig, SidebarMode, SidebarPosition, SpinLoaderColor, SpinLoaderConfig, SpinLoaderSize, SpinLoaderVariant, StatCardLayout, StatCardVariant, StatTagVariant, StateFlowIndicatorAriaLabels, StateFlowIndicatorConfig, StateFlowIndicatorSize, StepConfig, StepperAriaLabels, StepperConfig, StepperVariant, SuggestionResult, SwitchConfig, SwitchSize, Tab, TabBarChangeEvent, TabBarConfig, TabBarItem, TabChangeEvent, TableCellContext, TableColumn, TableConfig, TableExpandedRowContext, TableRow, TableRowClickEvent, TableRowExpandEvent, TableSort, TabsConfig, TabsSize, TabsVariant, TagConfig, TagSize, TagVariant, TextareaConfig, TextareaResize, TextareaSize, TextareaVariant, Theme, ThemeConfig, Toast, ToastConfig, ToastPosition, ToastType, TooltipConfig, TooltipPosition, TooltipVariant, TranslationConfig, TranslationEntry, TranslationProvider };