@kksdev/ds-angular 1.3.0 → 1.4.0

package/index.d.ts

@@ -4666,6 +4666,528 @@ declare class DsFileUpload implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsFileUpload, "ds-file-upload", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showPreview": { "alias": "showPreview"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "dragHelpText": { "alias": "dragHelpText"; "required": false; "isSignal": true; }; }, { "filesChange": "filesChange"; "fileRemoved": "fileRemoved"; "uploadProgress": "uploadProgress"; }, never, never, true, never>;
 }
 
+/**
+ * Tailles disponibles pour le composant Empty.
+ */
+type EmptySize = 'sm' | 'md' | 'lg';
+/**
+ * # DsEmpty
+ *
+ * Composant d'état vide standardisé permettant d'afficher un message
+ * lorsqu'aucune donnée n'est disponible, avec une illustration optionnelle.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-empty
+ *   title="Aucun résultat"
+ *   description="Essayez de modifier vos filtres"
+ *   [icon]="faSearch">
+ *   <button ds-button (click)="resetFilters()">Réinitialiser</button>
+ * </ds-empty>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Utilise `role="region"` avec `aria-label` descriptif
+ * - Icônes décoratives avec `aria-hidden="true"`
+ * - Support des actions via content projection
+ *
+ * @component
+ */
+declare class DsEmpty {
+    /**
+     * Titre principal de l'état vide.
+     * @default 'Aucune donnée'
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Description complémentaire optionnelle.
+     */
+    description: _angular_core.InputSignal<string>;
+    /**
+     * Icône FontAwesome à afficher.
+     * @default faInbox
+     */
+    icon: _angular_core.InputSignal<IconDefinition>;
+    /**
+     * URL d'une image personnalisée (illustration ou SVG).
+     * Si fournie, prend le pas sur l'icône FontAwesome.
+     */
+    imageUrl: _angular_core.InputSignal<string>;
+    /**
+     * Taille du composant (affecte l'icône et les espacements).
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<EmptySize>;
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /**
+     * Classes CSS calculées pour l'icône.
+     */
+    readonly iconClasses: _angular_core.Signal<string>;
+    /**
+     * Classes CSS calculées pour l'image.
+     */
+    readonly imageClasses: _angular_core.Signal<string>;
+    /**
+     * Détermine si une image doit être affichée.
+     */
+    readonly hasImage: _angular_core.Signal<boolean>;
+    /**
+     * Détermine si une description est fournie.
+     */
+    readonly hasDescription: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsEmpty, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsEmpty, "ds-empty", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "imageUrl": { "alias": "imageUrl"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Tailles disponibles pour le composant Rating.
+ */
+type RatingSize = 'sm' | 'md' | 'lg';
+/**
+ * # DsRating
+ *
+ * Composant de notation par étoiles permettant d'afficher et de saisir
+ * une note sur une échelle configurable (par défaut 0-5).
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-rating
+ *   [(value)]="rating"
+ *   [max]="5"
+ *   [allowHalf]="true"
+ *   (ratingChange)="handleRatingChange($event)" />
+ * ```
+ *
+ * ## Intégration formulaires
+ *
+ * ```html
+ * <form [formGroup]="form">
+ *   <ds-rating formControlName="rating" />
+ * </form>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Navigation clavier : ArrowLeft/Right pour changer la note
+ * - Attributs ARIA : role, aria-label, aria-valuenow/valuemin/valuemax
+ * - Focus visible sur les étoiles
+ *
+ * @component
+ */
+declare class DsRating implements ControlValueAccessor {
+    /**
+     * Valeur actuelle de la notation (0 à max).
+     * @default 0
+     */
+    value: _angular_core.InputSignal<number>;
+    /**
+     * Valeur maximale de la notation.
+     * @default 5
+     */
+    max: _angular_core.InputSignal<number>;
+    /**
+     * Taille du composant (affecte la taille des étoiles).
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<RatingSize>;
+    /**
+     * Permet la saisie de demi-étoiles (notes 0.5, 1.5, etc.).
+     * @default false
+     */
+    allowHalf: _angular_core.InputSignal<boolean>;
+    /**
+     * Mode lecture seule (affichage uniquement).
+     * @default false
+     */
+    readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * État désactivé (pas d'interaction).
+     * @default false
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Émis lorsque la notation change.
+     */
+    ratingChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * État interne de la valeur (ControlValueAccessor).
+     */
+    readonly internalValue: _angular_core.WritableSignal<number>;
+    /**
+     * État de survol (pour aperçu avant clic).
+     */
+    readonly hoverValue: _angular_core.WritableSignal<number | null>;
+    /**
+     * Callbacks ControlValueAccessor.
+     */
+    private onChange;
+    private onTouched;
+    /**
+     * Icônes FontAwesome pour les étoiles.
+     */
+    protected readonly faStar: _fortawesome_fontawesome_common_types.IconDefinition;
+    protected readonly faStarHalf: _fortawesome_fontawesome_common_types.IconDefinition;
+    /**
+     * Tableau des indices d'étoiles pour le rendu.
+     */
+    readonly stars: _angular_core.Signal<number[]>;
+    /**
+     * Valeur affichée (avec prise en compte du survol).
+     */
+    readonly displayValue: _angular_core.Signal<number>;
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /**
+     * Détermine le type d'icône à afficher pour une étoile donnée.
+     * - 'full' : étoile pleine
+     * - 'half' : demi-étoile
+     * - 'empty' : étoile vide
+     */
+    getStarType(index: number): 'full' | 'half' | 'empty';
+    /**
+     * Gère le clic sur une étoile.
+     */
+    handleStarClick(index: number, event: MouseEvent): void;
+    /**
+     * Gère le survol d'une étoile.
+     */
+    handleStarHover(index: number, event: MouseEvent): void;
+    /**
+     * Réinitialise le survol.
+     */
+    handleMouseLeave(): void;
+    /**
+     * Navigation clavier (ArrowLeft/Right).
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Met à jour la valeur interne et notifie les changements.
+     */
+    private updateValue;
+    writeValue(value: number): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsRating, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsRating, "ds-rating", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "allowHalf": { "alias": "allowHalf"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "ratingChange": "ratingChange"; }, never, never, true, never>;
+}
+
+/**
+ * Position du drawer (gauche ou droite).
+ */
+type DrawerPosition = 'left' | 'right';
+/**
+ * Tailles disponibles pour le drawer.
+ */
+type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+/**
+ * # DsDrawer
+ *
+ * Composant de panneau latéral overlay avec animation slide-in/out.
+ * Utilise CDK Overlay pour le backdrop et le focus trap.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ds-drawer
+ *   [(visible)]="isDrawerOpen"
+ *   position="right"
+ *   size="md"
+ *   title="Détails"
+ *   [closable]="true"
+ *   (closed)="onDrawerClose()">
+ *   <!-- Header -->
+ *   <ng-template #header>
+ *     <h3>Mon en-tête personnalisé</h3>
+ *   </ng-template>
+ *
+ *   <!-- Body -->
+ *   <p>Contenu du drawer</p>
+ *
+ *   <!-- Footer -->
+ *   <ng-template #footer>
+ *     <button>Annuler</button>
+ *     <button>Valider</button>
+ *   </ng-template>
+ * </ds-drawer>
+ * ```
+ *
+ * ## Accessibilité
+ *
+ * - Focus trap : le focus reste dans le drawer
+ * - Navigation clavier : Escape pour fermer
+ * - Attributs ARIA : role, aria-labelledby, aria-modal
+ *
+ * @component
+ */
+declare class DsDrawer implements AfterViewInit, OnDestroy {
+    /**
+     * Visibilité du drawer.
+     * @default false
+     */
+    visible: _angular_core.InputSignal<boolean>;
+    /**
+     * Position du drawer (left/right).
+     * @default 'right'
+     */
+    position: _angular_core.InputSignal<DrawerPosition>;
+    /**
+     * Taille du drawer.
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<DrawerSize>;
+    /**
+     * Titre affiché dans le header (optionnel).
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Affiche le bouton de fermeture.
+     * @default true
+     */
+    closable: _angular_core.InputSignal<boolean>;
+    /**
+     * Ferme le drawer au clic sur le backdrop.
+     * @default true
+     */
+    maskClosable: _angular_core.InputSignal<boolean>;
+    /**
+     * Émis lorsque la visibilité change.
+     */
+    visibleChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Émis lorsque le drawer est fermé.
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Référence au conteneur du drawer.
+     */
+    drawerContainer?: ElementRef<HTMLElement>;
+    /**
+     * État interne de visibilité pour gérer l'animation.
+     */
+    protected isOpen: _angular_core.WritableSignal<boolean>;
+    protected isAnimating: _angular_core.WritableSignal<boolean>;
+    /**
+     * Indique si la vue est prête.
+     */
+    private viewReady;
+    /**
+     * Focus trap pour confiner la navigation clavier.
+     */
+    private focusTrap;
+    /**
+     * Services injectés.
+     */
+    private readonly documentRef;
+    private readonly focusTrapFactory;
+    /**
+     * Icône de fermeture.
+     */
+    protected readonly closeIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    /**
+     * ID unique pour l'accessibilité.
+     */
+    private readonly drawerId;
+    readonly drawerTitleId: string;
+    /**
+     * Classes CSS calculées pour le conteneur.
+     */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /**
+     * Classes CSS calculées pour le backdrop.
+     */
+    readonly backdropClasses: _angular_core.Signal<string>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Ouvre le drawer avec animation.
+     */
+    private openDrawer;
+    /**
+     * Ferme le drawer avec animation.
+     */
+    private closeDrawer;
+    /**
+     * Gère la fermeture du drawer.
+     */
+    handleClose(): void;
+    /**
+     * Gère le clic sur le backdrop.
+     */
+    handleBackdropClick(): void;
+    /**
+     * Gère la touche Escape.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Attache le focus trap.
+     */
+    private attachFocusTrap;
+    /**
+     * Détache le focus trap.
+     */
+    private detachFocusTrap;
+    /**
+     * Place le focus sur le premier élément focusable.
+     */
+    private focusInitialElement;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsDrawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsDrawer, "ds-drawer", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "maskClosable": { "alias": "maskClosable"; "required": false; "isSignal": true; }; }, { "visibleChange": "visibleChange"; "closed": "closed"; }, never, ["[drawer-header]", "*", "[drawer-footer]"], true, never>;
+}
+
+type TimePickerSize = 'sm' | 'md' | 'lg';
+type TimeFormat = '12h' | '24h';
+interface TimeValue {
+    hours: number;
+    minutes: number;
+    seconds?: number;
+}
+/**
+ * DsTimePicker - Composant de sélection d'heure
+ *
+ * @description
+ * Sélecteur d'heure avec dropdown scrollable, support 12h/24h,
+ * et intégration formulaires via ControlValueAccessor.
+ *
+ * @example
+ * ```html
+ * <ds-time-picker
+ *   [format]="'24h'"
+ *   [showSeconds]="true"
+ *   (timeChange)="onTimeChange($event)">
+ * </ds-time-picker>
+ * ```
+ */
+declare class DsTimePicker implements ControlValueAccessor {
+    private overlay;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly format: _angular_core.InputSignal<TimeFormat>;
+    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    readonly hourStep: _angular_core.InputSignal<number>;
+    readonly size: _angular_core.InputSignal<TimePickerSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly minTime: _angular_core.InputSignal<string | null>;
+    readonly maxTime: _angular_core.InputSignal<string | null>;
+    readonly timeChange: _angular_core.OutputEmitterRef<string>;
+    readonly clockIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly upIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly downIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly internalValue: _angular_core.WritableSignal<string>;
+    readonly isFocused: _angular_core.WritableSignal<boolean>;
+    private overlayRef;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly displayValue: _angular_core.Signal<string>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    constructor(overlay: Overlay);
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    onFocus(): void;
+    onBlur(): void;
+    onTimeSelected(timeString: string): void;
+    private updateValue;
+    private createOverlay;
+    private destroyOverlay;
+    private parseTime;
+    private formatTimeForDisplay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsTimePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTimePicker, "ds-time-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "required": false; "isSignal": true; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
+}
+
+type TreeSize = 'sm' | 'md' | 'lg';
+interface TreeNode {
+    id: string | number;
+    label: string;
+    children?: TreeNode[];
+    icon?: string;
+    disabled?: boolean;
+    expanded?: boolean;
+    checked?: boolean;
+    data?: any;
+}
+interface TreeNodeSelectEvent {
+    node: TreeNode;
+    selected: boolean;
+}
+interface TreeNodeExpandEvent {
+    node: TreeNode;
+    expanded: boolean;
+}
+interface TreeNodeCheckEvent {
+    node: TreeNode;
+    checked: boolean;
+}
+/**
+ * DsTree - Composant d'affichage hiérarchique
+ *
+ * @description
+ * Arbre hiérarchique avec support de sélection, checkbox,
+ * expand/collapse, et navigation clavier.
+ *
+ * @example
+ * ```html
+ * <ds-tree
+ *   [data]="treeData"
+ *   [selectable]="true"
+ *   (nodeSelect)="onNodeSelect($event)">
+ * </ds-tree>
+ * ```
+ */
+declare class DsTree {
+    readonly data: _angular_core.InputSignal<TreeNode[]>;
+    readonly selectable: _angular_core.InputSignal<boolean>;
+    readonly checkable: _angular_core.InputSignal<boolean>;
+    readonly expandAll: _angular_core.InputSignal<boolean>;
+    readonly showIcon: _angular_core.InputSignal<boolean>;
+    readonly showLine: _angular_core.InputSignal<boolean>;
+    readonly draggable: _angular_core.InputSignal<boolean>;
+    readonly virtualScroll: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<TreeSize>;
+    readonly loadChildren: _angular_core.InputSignal<((node: TreeNode) => Promise<TreeNode[]>) | null>;
+    readonly nodeSelect: _angular_core.OutputEmitterRef<TreeNodeSelectEvent>;
+    readonly nodeExpand: _angular_core.OutputEmitterRef<TreeNodeExpandEvent>;
+    readonly nodeCheck: _angular_core.OutputEmitterRef<TreeNodeCheckEvent>;
+    readonly selectedNodeId: _angular_core.WritableSignal<string | number | null>;
+    readonly expandedNodeIds: _angular_core.WritableSignal<Set<string | number>>;
+    readonly checkedNodeIds: _angular_core.WritableSignal<Set<string | number>>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly processedData: _angular_core.Signal<TreeNode[]>;
+    constructor();
+    onNodeClick(node: TreeNode): void;
+    onNodeToggle(node: TreeNode): void;
+    onNodeCheck(node: TreeNode, checked: boolean): void;
+    isSelected(nodeId: string | number): boolean;
+    isExpanded(nodeId: string | number): boolean;
+    isChecked(nodeId: string | number): boolean;
+    getIndeterminateState(node: TreeNode): boolean;
+    private toggleExpand;
+    private setNodeChecked;
+    private updateChildrenChecked;
+    private expandAllNodes;
+    private initializeExpandedState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsTree, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTree, "ds-tree", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "checkable": { "alias": "checkable"; "required": false; "isSignal": true; }; "expandAll": { "alias": "expandAll"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "showLine": { "alias": "showLine"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loadChildren": { "alias": "loadChildren"; "required": false; "isSignal": true; }; }, { "nodeSelect": "nodeSelect"; "nodeExpand": "nodeExpand"; "nodeCheck": "nodeCheck"; }, never, never, true, never>;
+}
+
 /**
  * Positions standard pour dropdowns (menus déroulants, select, etc.)
  *
@@ -5034,5 +5556,5 @@ declare class DsI18nService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsI18nService>;
 }
 
-export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsChip, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsFileUpload, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsSearchInput, DsSelect, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
-export type { AccordionChangeEvent, AccordionItem, AccordionSize, AccordionVariant, AlertSize, AlertType, AvatarShape, AvatarSize, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CardSize, CardVariant, CheckboxSize, CheckboxState, ChipColor, ChipSize, ChipVariant, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, FileUploadSize, I18nLabels, InputAppearance, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, PageChangeEvent, PageSizeOption, PaginationSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, SearchInputSize, SkeletonSize, SkeletonVariant, SliderOrientation, SliderSize, SliderValue, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize, UploadFile };
+export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsChip, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSelect, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, TOOLTIP_POSITIONS, buildButtonArgTypes, buildButtonArgs, createSizeRender, createVariantRender };
+export type { AccordionChangeEvent, AccordionItem, AccordionSize, AccordionVariant, AlertSize, AlertType, AvatarShape, AvatarSize, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CardSize, CardVariant, CheckboxSize, CheckboxState, ChipColor, ChipSize, ChipVariant, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DrawerPosition, DrawerSize, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, EmptySize, FileUploadSize, I18nLabels, InputAppearance, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, PageChangeEvent, PageSizeOption, PaginationSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, RatingSize, SearchInputSize, SkeletonSize, SkeletonVariant, SliderOrientation, SliderSize, SliderValue, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, TimeFormat, TimePickerSize, TimeValue, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize, TreeNode, TreeNodeCheckEvent, TreeNodeExpandEvent, TreeNodeSelectEvent, TreeSize, UploadFile };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kksdev/ds-angular",
-  "version": "1.3.0",
-  "description": "Angular 20 standalone component library - Design System with 33 components, 7 primitives, 3 themes, i18n support",
+  "version": "1.4.0",
+  "description": "Angular 20 standalone component library - Design System with 38 components, 7 primitives, 3 themes, i18n support",
   "keywords": [
     "angular",
     "angular20",

package/src/styles/themes/_dark.scss

@@ -665,4 +665,63 @@
   --chip-info-border: var(--info);
   --chip-info-hover-bg: color-mix(in oklab, var(--info) 30%, transparent);
   --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 15%, transparent);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS EMPTY
+   * ======================================================================== */
+  --empty-text: var(--text-muted);
+  --empty-icon-color: var(--gray-500);
+  --empty-title-color: var(--text-default);
+  --empty-description-color: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS RATING
+   * ======================================================================== */
+  --rating-filled-color: var(--warning);
+  --rating-empty-color: var(--gray-600);
+  --rating-hover-color: color-mix(in oklab, var(--warning) 60%, transparent);
+  --rating-focus-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DRAWER
+   * ======================================================================== */
+  --drawer-bg: var(--gray-800);
+  --drawer-border: var(--gray-700);
+  --drawer-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+  --drawer-header-bg: var(--gray-750);
+  --drawer-footer-bg: var(--gray-750);
+  --drawer-title-color: var(--gray-100);
+  --drawer-body-color: var(--gray-200);
+  --drawer-close-color: var(--gray-400);
+  --drawer-close-hover-bg: var(--gray-700);
+  --drawer-close-hover-color: var(--gray-100);
+  --drawer-close-active-bg: var(--gray-600);
+  --drawer-close-focus-color: var(--color-primary);
+  --drawer-backdrop: rgba(0, 0, 0, 0.7);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TIME PICKER
+   * ======================================================================== */
+  --time-picker-panel-bg: var(--gray-800);
+  --time-picker-panel-border: var(--gray-700);
+  --time-picker-column-bg: var(--gray-850);
+  --time-picker-column-border: var(--gray-700);
+  --time-picker-option-text: var(--gray-200);
+  --time-picker-option-hover: var(--gray-700);
+  --time-picker-option-focus: var(--gray-700);
+  --time-picker-option-selected-bg: var(--color-primary);
+  --time-picker-option-selected-text: var(--white);
+  --time-picker-option-selected-hover: color-mix(in oklab, var(--color-primary) 75%, var(--gray-800));
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TREE
+   * ======================================================================== */
+  --tree-bg: var(--gray-800);
+  --tree-border: var(--gray-700);
+  --tree-node-hover-bg: var(--gray-700);
+  --tree-node-selected-bg: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --tree-node-selected-text: var(--color-primary);
+  --tree-toggle-color: var(--gray-400);
+  --tree-toggle-hover-color: var(--gray-100);
+  --tree-icon-color: var(--gray-400);
 }

package/src/styles/themes/_light.scss

@@ -655,4 +655,63 @@
   --chip-info-border: var(--info);
   --chip-info-hover-bg: color-mix(in oklab, var(--info) 25%, transparent);
   --chip-info-hover-bg-outlined: color-mix(in oklab, var(--info) 10%, transparent);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS EMPTY
+   * ======================================================================== */
+  --empty-text: var(--text-muted);
+  --empty-icon-color: var(--text-disabled);
+  --empty-title-color: var(--text-default);
+  --empty-description-color: var(--text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS RATING
+   * ======================================================================== */
+  --rating-filled-color: var(--warning);
+  --rating-empty-color: var(--border-color);
+  --rating-hover-color: color-mix(in oklab, var(--warning) 50%, transparent);
+  --rating-focus-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS DRAWER
+   * ======================================================================== */
+  --drawer-bg: var(--surface-default);
+  --drawer-border: var(--border-color);
+  --drawer-shadow: var(--shadow-3);
+  --drawer-header-bg: var(--surface-raised);
+  --drawer-footer-bg: var(--surface-raised);
+  --drawer-title-color: var(--text-default);
+  --drawer-body-color: var(--text-default);
+  --drawer-close-color: var(--text-muted);
+  --drawer-close-hover-bg: var(--surface-hover);
+  --drawer-close-hover-color: var(--text-default);
+  --drawer-close-active-bg: var(--surface-raised);
+  --drawer-close-focus-color: var(--color-primary);
+  --drawer-backdrop: rgba(0, 0, 0, 0.5);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TIME PICKER
+   * ======================================================================== */
+  --time-picker-panel-bg: var(--surface-default);
+  --time-picker-panel-border: var(--border-color);
+  --time-picker-column-bg: var(--surface-default);
+  --time-picker-column-border: var(--gray-200);
+  --time-picker-option-text: var(--text-default);
+  --time-picker-option-hover: var(--surface-hover);
+  --time-picker-option-focus: var(--surface-hover);
+  --time-picker-option-selected-bg: var(--color-primary);
+  --time-picker-option-selected-text: var(--white);
+  --time-picker-option-selected-hover: color-mix(in oklab, var(--color-primary) 85%, var(--background-main));
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS TREE
+   * ======================================================================== */
+  --tree-bg: var(--surface-default);
+  --tree-border: var(--border-color);
+  --tree-node-hover-bg: var(--surface-hover);
+  --tree-node-selected-bg: var(--blue-100);
+  --tree-node-selected-text: var(--color-primary);
+  --tree-toggle-color: var(--text-muted);
+  --tree-toggle-hover-color: var(--text-default);
+  --tree-icon-color: var(--text-muted);
 }