@kksdev/ds-angular 1.7.2 → 1.8.0

package/index.d.ts

@@ -7640,6 +7640,215 @@ declare class DsListGroup {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsListGroup, "ds-list-group", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Option pour le ds-entity-picker
+ * Supporte les entités riches avec icône, couleur, emoji
+ */
+interface DsEntityOption {
+    /** Identifiant unique de l'option */
+    value: string;
+    /** Texte affiché */
+    label: string;
+    /** Description secondaire (optionnel) */
+    description?: string;
+    /** Icône FontAwesome (optionnel) */
+    icon?: IconDefinition$2;
+    /** Emoji affiché à gauche (optionnel) */
+    emoji?: string;
+    /** Couleur hex ou CSS (optionnel) */
+    color?: string;
+    /** Option désactivée */
+    disabled?: boolean;
+    /** Données custom attachées */
+    data?: unknown;
+}
+/** Tailles disponibles */
+type DsEntityPickerSize = 'sm' | 'md' | 'lg';
+/** Mode d'affichage des sélections multiples */
+type DsEntityPickerDisplayMode = 'chip' | 'count';
+
+/**
+ * Entity Picker - Sélecteur d'entités riches
+ *
+ * Permet la sélection d'entités avec icônes, couleurs, emojis.
+ * Supporte la sélection simple et multiple avec affichage en chips colorés.
+ *
+ * @example
+ * ```html
+ * <!-- Sélection simple -->
+ * <ds-entity-picker
+ *   [options]="tags"
+ *   [(ngModel)]="selectedTag"
+ *   placeholder="Choisir un tag"
+ * />
+ *
+ * <!-- Sélection multiple -->
+ * <ds-entity-picker
+ *   [options]="categories"
+ *   [multiple]="true"
+ *   [(ngModel)]="selectedCategories"
+ *   [allowCreate]="true"
+ *   (createRequested)="onCreateCategory($event)"
+ * />
+ * ```
+ */
+declare class DsEntityPicker implements ControlValueAccessor {
+    /** Liste des options disponibles */
+    readonly options: _angular_core.InputSignal<DsEntityOption[]>;
+    /** Active la sélection multiple */
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    /** Permet la création d'options à la volée */
+    readonly allowCreate: _angular_core.InputSignal<boolean>;
+    /** Placeholder du champ de recherche */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Taille du composant */
+    readonly size: _angular_core.InputSignal<DsEntityPickerSize>;
+    /** Mode d'affichage des sélections multiples */
+    readonly displayMode: _angular_core.InputSignal<DsEntityPickerDisplayMode>;
+    /** Afficher le bouton clear */
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    /** Nombre maximum de sélections (multi-select) */
+    readonly maxSelections: _angular_core.InputSignal<number | undefined>;
+    /** Label du champ */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Message d'erreur */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Texte d'aide */
+    readonly helper: _angular_core.InputSignal<string>;
+    /** Champ désactivé */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Champ obligatoire */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /** Caractères minimum avant filtrage */
+    readonly minChars: _angular_core.InputSignal<number>;
+    /** Texte si aucun résultat */
+    readonly noResultsText: _angular_core.InputSignal<string>;
+    /** Template du texte de création (utiliser {query} comme placeholder) */
+    readonly createText: _angular_core.InputSignal<string>;
+    /** Nom du champ (pour formulaires) */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Émis lors d'un changement de sélection */
+    readonly selectionChange: _angular_core.OutputEmitterRef<DsEntityOption | DsEntityOption[] | null>;
+    /** Émis lors d'une demande de création */
+    readonly createRequested: _angular_core.OutputEmitterRef<string>;
+    /** Émis lors d'un changement de recherche */
+    readonly searchChange: _angular_core.OutputEmitterRef<string>;
+    /** Émis à l'ouverture du panel */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /** Émis à la fermeture du panel */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly searchQuery: _angular_core.WritableSignal<string>;
+    protected readonly focusedIndex: _angular_core.WritableSignal<number>;
+    private readonly internalValue;
+    private readonly cvaDisabled;
+    inputElement: ElementRef<HTMLInputElement>;
+    listbox: ElementRef<HTMLUListElement>;
+    private onChange;
+    private onTouched;
+    readonly iconPlus: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly iconChevron: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly iconClear: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly iconSearch: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly overlayPositions: _angular_cdk_overlay.ConnectedPosition[];
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Options sélectionnées (objets complets) */
+    protected readonly selectedOptions: _angular_core.Signal<DsEntityOption[]>;
+    /** Texte affiché dans l'input (mode single) */
+    protected readonly displayValue: _angular_core.Signal<string>;
+    /** Options filtrées selon la recherche */
+    protected readonly filteredOptions: _angular_core.Signal<DsEntityOption[]>;
+    /** Peut créer une nouvelle option */
+    protected readonly canCreate: _angular_core.Signal<boolean>;
+    /** Afficher le dropdown */
+    protected readonly shouldShowDropdown: _angular_core.Signal<boolean>;
+    /** Classes du container */
+    protected readonly containerClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ds-entity-picker': boolean;
+        'ds-entity-picker--open': boolean;
+        'ds-entity-picker--disabled': boolean;
+        'ds-entity-picker--error': boolean;
+        'ds-entity-picker--multiple': boolean;
+    }>;
+    /** Classes de l'input */
+    protected readonly inputClasses: _angular_core.Signal<{
+        'ds-entity-picker__input': boolean;
+        'ds-entity-picker__input--has-value': boolean;
+    }>;
+    /** ID unique pour le listbox */
+    protected readonly listboxId: _angular_core.Signal<string>;
+    /** ID unique pour l'input */
+    protected readonly inputId: _angular_core.Signal<string>;
+    /** Texte du compteur (mode count) */
+    protected readonly countText: _angular_core.Signal<string>;
+    /** Limite de sélection atteinte */
+    protected readonly maxReached: _angular_core.Signal<boolean>;
+    /** Texte formaté pour l'option de création */
+    protected readonly formattedCreateText: _angular_core.Signal<string>;
+    writeValue(value: string | string[] | null): void;
+    registerOnChange(fn: (value: string | string[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onInputFocus(): void;
+    onInputBlur(): void;
+    onSearchInput(event: Event): void;
+    open(): void;
+    close(): void;
+    selectOption(option: DsEntityOption): void;
+    removeOption(option: DsEntityOption): void;
+    clear(event?: Event): void;
+    requestCreate(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onDocumentClick(event: Event): void;
+    private moveFocus;
+    private scrollFocusedOptionIntoView;
+    protected isOptionFocused(index: number): boolean;
+    protected isOptionSelected(option: DsEntityOption): boolean;
+    protected getOptionId(index: number): string;
+    protected isCreateFocused(): boolean;
+    protected trackOption(_: number, option: DsEntityOption): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsEntityPicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsEntityPicker, "ds-entity-picker", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "displayMode": { "alias": "displayMode"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxSelections": { "alias": "maxSelections"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "createText": { "alias": "createText"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "createRequested": "createRequested"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * Chip coloré pour afficher une entité sélectionnée dans ds-entity-picker
+ *
+ * @example
+ * ```html
+ * <ds-entity-chip
+ *   [option]="{ value: '1', label: 'Important', color: '#ef4444', emoji: '🏷️' }"
+ *   [removable]="true"
+ *   (removed)="onRemove()"
+ * />
+ * ```
+ */
+declare class DsEntityChip {
+    /** Option à afficher */
+    readonly option: _angular_core.InputSignal<DsEntityOption>;
+    /** Taille du chip */
+    readonly size: _angular_core.InputSignal<DsEntityPickerSize>;
+    /** Afficher le bouton de suppression */
+    readonly removable: _angular_core.InputSignal<boolean>;
+    /** Chip désactivé */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Événement de suppression */
+    readonly removed: _angular_core.OutputEmitterRef<DsEntityOption>;
+    /** Icône de fermeture */
+    readonly closeIcon: IconDefinition;
+    /** Couleur du chip (depuis l'option ou fallback) */
+    readonly chipColor: _angular_core.Signal<string>;
+    /** Couleur de fond (10% opacity) */
+    readonly backgroundColor: _angular_core.Signal<string>;
+    /** Gestion du clic sur le bouton supprimer */
+    handleRemove(event: Event): void;
+    /** Gestion du clavier */
+    handleKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsEntityChip, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsEntityChip, "ds-entity-chip", never, { "option": { "alias": "option"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, never, true, never>;
+}
+
 /**
  * Positions standard pour dropdowns (menus déroulants, select, etc.)
  *
@@ -8011,5 +8220,5 @@ declare function generateId(): string;
  */
 declare function generateShortId(prefix?: string): string;
 
-export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
-export type { AccordionChangeEvent, AccordionItem, AccordionSize, AccordionVariant, AlertSize, AlertType, AvatarShape, AvatarSize, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarMode, CalendarSize, CardSize, CardVariant, CarouselDotsPosition, CarouselEffect, CarouselSlide, CheckboxListChangeEvent, CheckboxListItem, CheckboxListItemChangeEvent, CheckboxListSize, CheckboxSize, CheckboxState, ChipColor, ChipSize, ChipVariant, ColorFormat, ColorPickerSize, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DrawerPosition, DrawerSize, DropdownItem, DropdownItemDTO, DropdownPosition, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, EmptySize, FileUploadSize, FlattenedSidebarItem, HSLColor, I18nLabels, InputAppearance, InputNumberControlsPosition, InputNumberSize, InputSize, InputState, InputType, ListDragEvent, ListEmptyConfig, ListGroupToggleEvent, ListGroupVariant, ListItemCheckEvent, ListItemClickEvent, ListItemIndicator, ListItemIndicatorColor, ListItemSize, ListSelectionChangeEvent, ListSize, ListVariant, MenuItem, MenuSize, MenuTrigger, NavListBadgeVariant, NavListGroup, NavListGroupToggleEvent, NavListItem, NavListItemClickEvent, NavListSize, NotificationAction, NotificationConfig, NotificationItem, NotificationPlacement, PageChangeEvent, PageSizeOption, PaginationSize, PasswordCriterion, PasswordStrength, PasswordStrengthSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RGBColor, RadioGroupLayout, RadioOption, RadioSize, RatingSize, SearchInputSize, SegmentOption, SegmentedControlColor, SegmentedControlOrientation, SegmentedControlSize, SidebarBadgeVariant, SidebarCollapsedTrigger, SidebarItem, SidebarItemClickEvent, SidebarItemExpandEvent, SidebarMode, SidebarPosition, SidebarSize, SkeletonSize, SkeletonVariant, SliderOrientation, SliderSize, SliderValue, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, TimeFormat, TimePickerSize, TimeValue, TimelineColor, TimelineItem, TimelineItemClickEvent, TimelineMode, TimelineSize, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize, TransferChangeEvent, TransferDirection, TransferItem, TransferSize, TreeNode, TreeNodeCheckEvent, TreeNodeExpandEvent, TreeNodeSelectEvent, TreeSize, UploadFile };
+export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsEntityChip, DsEntityPicker, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
+export type { AccordionChangeEvent, AccordionItem, AccordionSize, AccordionVariant, AlertSize, AlertType, AvatarShape, AvatarSize, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarMode, CalendarSize, CardSize, CardVariant, CarouselDotsPosition, CarouselEffect, CarouselSlide, CheckboxListChangeEvent, CheckboxListItem, CheckboxListItemChangeEvent, CheckboxListSize, CheckboxSize, CheckboxState, ChipColor, ChipSize, ChipVariant, ColorFormat, ColorPickerSize, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DrawerPosition, DrawerSize, DropdownItem, DropdownItemDTO, DropdownPosition, DsComboboxOption, DsComboboxSize, DsEntityOption, DsEntityPickerDisplayMode, DsEntityPickerSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, EmptySize, FileUploadSize, FlattenedSidebarItem, HSLColor, I18nLabels, InputAppearance, InputNumberControlsPosition, InputNumberSize, InputSize, InputState, InputType, ListDragEvent, ListEmptyConfig, ListGroupToggleEvent, ListGroupVariant, ListItemCheckEvent, ListItemClickEvent, ListItemIndicator, ListItemIndicatorColor, ListItemSize, ListSelectionChangeEvent, ListSize, ListVariant, MenuItem, MenuSize, MenuTrigger, NavListBadgeVariant, NavListGroup, NavListGroupToggleEvent, NavListItem, NavListItemClickEvent, NavListSize, NotificationAction, NotificationConfig, NotificationItem, NotificationPlacement, PageChangeEvent, PageSizeOption, PaginationSize, PasswordCriterion, PasswordStrength, PasswordStrengthSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RGBColor, RadioGroupLayout, RadioOption, RadioSize, RatingSize, SearchInputSize, SegmentOption, SegmentedControlColor, SegmentedControlOrientation, SegmentedControlSize, SidebarBadgeVariant, SidebarCollapsedTrigger, SidebarItem, SidebarItemClickEvent, SidebarItemExpandEvent, SidebarMode, SidebarPosition, SidebarSize, SkeletonSize, SkeletonVariant, SliderOrientation, SliderSize, SliderValue, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, TimeFormat, TimePickerSize, TimeValue, TimelineColor, TimelineItem, TimelineItemClickEvent, TimelineMode, TimelineSize, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize, TransferChangeEvent, TransferDirection, TransferItem, TransferSize, TreeNode, TreeNodeCheckEvent, TreeNodeExpandEvent, TreeNodeSelectEvent, TreeSize, UploadFile };

package/package.json

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