@kksdev/ds-angular 1.10.0 → 1.12.0

package/index.d.ts

@@ -5523,7 +5523,13 @@ declare class DsTimePicker implements ControlValueAccessor {
     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>;
 }
 
+/**
+ * Tailles disponibles pour le tree.
+ */
 type TreeSize = 'sm' | 'md' | 'lg';
+/**
+ * Interface représentant un nœud de l'arbre.
+ */
 interface TreeNode {
     id: string | number;
     label: string;
@@ -5535,18 +5541,28 @@ interface TreeNode {
     checked?: boolean;
     data?: any;
 }
+/**
+ * Événement de sélection d'un nœud.
+ */
 interface TreeNodeSelectEvent {
     node: TreeNode;
     selected: boolean;
 }
+/**
+ * Événement d'expansion/collapse d'un nœud.
+ */
 interface TreeNodeExpandEvent {
     node: TreeNode;
     expanded: boolean;
 }
+/**
+ * Événement de check d'un nœud.
+ */
 interface TreeNodeCheckEvent {
     node: TreeNode;
     checked: boolean;
 }
+
 /**
  * DsTree - Composant d'affichage hiérarchique
  *
@@ -7976,6 +7992,84 @@ declare class DsEntityChip {
     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>;
 }
 
+type InputDateSize = 'sm' | 'md' | 'lg';
+interface DateParseResult {
+    valid: boolean;
+    date: Date | null;
+    error?: 'invalid_format' | 'invalid_date' | 'out_of_range';
+}
+/**
+ * DsInputDate - Composant de saisie de date avec calendrier popup
+ *
+ * @description
+ * Input textuel avec icône calendrier et popup DsDatePicker pour la sélection
+ * de date dans les formulaires. Supporte la saisie manuelle et les contraintes min/max.
+ *
+ * @example
+ * ```html
+ * <ds-input-date
+ *   [(ngModel)]="selectedDate"
+ *   label="Date de naissance"
+ *   placeholder="jj/mm/aaaa">
+ * </ds-input-date>
+ * ```
+ */
+declare class DsInputDate implements ControlValueAccessor {
+    inputElementRef?: ElementRef<HTMLInputElement>;
+    readonly value: _angular_core.InputSignal<Date | null>;
+    readonly size: _angular_core.InputSignal<InputDateSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    readonly helper: _angular_core.InputSignal<string | undefined>;
+    readonly minDate: _angular_core.InputSignal<Date | null>;
+    readonly maxDate: _angular_core.InputSignal<Date | null>;
+    readonly clearable: _angular_core.InputSignal<boolean>;
+    readonly dateChange: _angular_core.OutputEmitterRef<Date | null>;
+    readonly calendarIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly clearIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly errorIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    readonly overlayPositions: ConnectedPosition[];
+    readonly panelId: string;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly internalValue: _angular_core.WritableSignal<Date | null>;
+    readonly isFocused: _angular_core.WritableSignal<boolean>;
+    readonly inputText: _angular_core.WritableSignal<string>;
+    readonly hasParseError: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    private hasExternalValue;
+    readonly displayValue: _angular_core.Signal<string>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    readonly inputState: _angular_core.Signal<"error" | "default">;
+    readonly showClearButton: _angular_core.Signal<boolean>;
+    readonly effectiveMinDate: _angular_core.Signal<Date | null>;
+    readonly effectiveMaxDate: _angular_core.Signal<Date | null>;
+    constructor();
+    writeValue(value: Date | null): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    onInputFocus(): void;
+    onInputBlur(): void;
+    onInputChange(event: Event): void;
+    onInputKeydown(event: KeyboardEvent): void;
+    onCalendarIconClick(event: Event): void;
+    onDateSelected(date: Date | null): void;
+    onBackdropClick(): void;
+    onOverlayKeydown(event: KeyboardEvent): void;
+    clearValue(event: Event): void;
+    private updateValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsInputDate, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsInputDate, "ds-input-date", never, { "value": { "alias": "value"; "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; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; }, never, never, true, never>;
+}
+
 /**
  * Positions standard pour dropdowns (menus déroulants, select, etc.)
  *
@@ -8347,5 +8441,5 @@ declare function generateId(): string;
  */
 declare function generateShortId(prefix?: string): string;
 
-export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAccordionItem, 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, NavListGroupActionEvent, NavListGroupToggleEvent, NavListHeaderAction, 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, DsAccordionItem, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsEntityChip, DsEntityPicker, DsFileUpload, DsI18nService, DsInputDate, 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, DateParseResult, 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, InputDateSize, InputNumberControlsPosition, InputNumberSize, InputSize, InputState, InputType, ListDragEvent, ListEmptyConfig, ListGroupToggleEvent, ListGroupVariant, ListItemCheckEvent, ListItemClickEvent, ListItemIndicator, ListItemIndicatorColor, ListItemSize, ListSelectionChangeEvent, ListSize, ListVariant, MenuItem, MenuSize, MenuTrigger, NavListBadgeVariant, NavListGroup, NavListGroupActionEvent, NavListGroupToggleEvent, NavListHeaderAction, 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,6 +1,6 @@
 {
   "name": "@kksdev/ds-angular",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Angular 20 standalone component library - Design System with 55 components, 7 primitives, 3 themes, i18n support",
   "keywords": [
     "angular",
@@ -51,4 +51,4 @@
       "default": "./fesm2022/kksdev-ds-angular.mjs"
     }
   }
-}
+}

package/src/styles/themes/_custom.scss

@@ -766,6 +766,21 @@
   --time-picker-btn-confirm-text: var(--gray-50);
   --time-picker-btn-confirm-hover: color-mix(in oklab, var(--role-primary) 85%, var(--text-default));
 
+  /* ==========================================================================
+   * 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: color-mix(in oklab, var(--role-primary) 15%, transparent);
+  --tree-node-selected-text: var(--role-primary);
+  --tree-toggle-color: var(--text-muted);
+  --tree-toggle-hover-color: var(--text-default);
+  --tree-icon-color: var(--text-muted);
+  --tree-line-color: var(--border-color);
+  --tree-line-width: 1px;
+  --tree-indent: 20px;
+
   /* ==========================================================================
    * SIDEBAR
    * ======================================================================== */
@@ -787,5 +802,21 @@
   --sidebar-trigger-shadow: var(--shadow-2);
   --sidebar-scrollbar-thumb: var(--custom-border);
   --sidebar-scrollbar-thumb-hover: var(--custom-text-muted);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS INPUT DATE
+   * ======================================================================== */
+  --ds-input-date-bg: var(--input-bg);
+  --ds-input-date-border: var(--input-border);
+  --ds-input-date-border-focus: var(--input-focus-border);
+  --ds-input-date-border-error: var(--input-error-border);
+  --ds-input-date-text: var(--input-text);
+  --ds-input-date-placeholder: var(--input-placeholder);
+  --ds-input-date-icon: var(--input-icon);
+  --ds-input-date-icon-hover: var(--custom-accent-primary);
+  --ds-input-date-popup-bg: var(--custom-bg);
+  --ds-input-date-popup-shadow: var(--shadow-3);
+  --ds-input-date-popup-border: var(--custom-border);
+  --ds-input-date-icon-zone-width: 72px;
 }
 

package/src/styles/themes/_dark.scss

@@ -752,6 +752,9 @@
   --tree-toggle-color: var(--gray-400);
   --tree-toggle-hover-color: var(--gray-100);
   --tree-icon-color: var(--gray-400);
+  --tree-line-color: var(--gray-600);
+  --tree-line-width: 1px;
+  --tree-indent: 20px;
 
   /* ==========================================================================
    * SÉMANTIQUES DS PASSWORD STRENGTH
@@ -962,4 +965,20 @@
   --sidebar-trigger-shadow: var(--shadow-2);
   --sidebar-scrollbar-thumb: var(--gray-600);
   --sidebar-scrollbar-thumb-hover: var(--gray-500);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS INPUT DATE
+   * ======================================================================== */
+  --ds-input-date-bg: var(--input-bg);
+  --ds-input-date-border: var(--input-border);
+  --ds-input-date-border-focus: var(--input-focus-border);
+  --ds-input-date-border-error: var(--input-error-border);
+  --ds-input-date-text: var(--input-text);
+  --ds-input-date-placeholder: var(--input-placeholder);
+  --ds-input-date-icon: var(--input-icon);
+  --ds-input-date-icon-hover: var(--color-primary);
+  --ds-input-date-popup-bg: var(--gray-800);
+  --ds-input-date-popup-shadow: var(--shadow-3);
+  --ds-input-date-popup-border: var(--gray-700);
+  --ds-input-date-icon-zone-width: 72px;
 }

package/src/styles/themes/_light.scss

@@ -742,6 +742,9 @@
   --tree-toggle-color: var(--text-muted);
   --tree-toggle-hover-color: var(--text-default);
   --tree-icon-color: var(--text-muted);
+  --tree-line-color: var(--gray-300);
+  --tree-line-width: 1px;
+  --tree-indent: 20px;
 
   /* ==========================================================================
    * SÉMANTIQUES DS PASSWORD STRENGTH
@@ -952,4 +955,20 @@
   --sidebar-trigger-shadow: var(--shadow-2);
   --sidebar-scrollbar-thumb: var(--gray-300);
   --sidebar-scrollbar-thumb-hover: var(--gray-400);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS INPUT DATE
+   * ======================================================================== */
+  --ds-input-date-bg: var(--input-bg);
+  --ds-input-date-border: var(--input-border);
+  --ds-input-date-border-focus: var(--input-focus-border);
+  --ds-input-date-border-error: var(--input-error-border);
+  --ds-input-date-text: var(--input-text);
+  --ds-input-date-placeholder: var(--input-placeholder);
+  --ds-input-date-icon: var(--input-icon);
+  --ds-input-date-icon-hover: var(--color-primary);
+  --ds-input-date-popup-bg: var(--surface-default);
+  --ds-input-date-popup-shadow: var(--shadow-3);
+  --ds-input-date-popup-border: var(--border-color);
+  --ds-input-date-icon-zone-width: 72px;
 }