@kksdev/ds-angular 1.1.0 → 1.2.0

package/index.d.ts

@@ -4187,6 +4187,135 @@ interface CalendarDay {
     ariaLabel: string;
 }
 
+type AvatarShape = 'circle' | 'rounded' | 'square';
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+declare class DsAvatar {
+    /** URL de l'image avatar */
+    readonly src: _angular_core.InputSignal<string | undefined>;
+    /** Texte alternatif pour l'image */
+    readonly alt: _angular_core.InputSignal<string>;
+    /** Nom complet pour générer les initiales */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Initiales personnalisées (priorité sur name) */
+    readonly initials: _angular_core.InputSignal<string | undefined>;
+    /** Forme de l'avatar */
+    readonly shape: _angular_core.InputSignal<AvatarShape>;
+    /** Taille de l'avatar */
+    readonly size: _angular_core.InputSignal<AvatarSize>;
+    /** Générer automatiquement une couleur de fond à partir des initiales */
+    readonly autoColor: _angular_core.InputSignal<boolean>;
+    /** État interne pour l'erreur de chargement d'image */
+    private readonly imageError;
+    /** Indique si l'image doit être affichée */
+    readonly showImage: _angular_core.Signal<boolean>;
+    /** Initiales à afficher (générées ou fournies) */
+    readonly displayInitials: _angular_core.Signal<string>;
+    /** Classes CSS du conteneur */
+    readonly containerClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ds-avatar': boolean;
+        'ds-avatar--has-image': boolean;
+        'ds-avatar--initials': boolean;
+    }>;
+    /** Couleur de fond auto-générée */
+    readonly generatedBgColor: _angular_core.Signal<string | null>;
+    /** Label ARIA pour l'accessibilité */
+    readonly ariaLabel: _angular_core.Signal<string>;
+    /** Gestionnaire d'erreur de chargement d'image */
+    onImageError(): void;
+    /** Gestionnaire de chargement réussi d'image */
+    onImageLoad(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsAvatar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsAvatar, "ds-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "autoColor": { "alias": "autoColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface MenuItem {
+    /** Identifiant unique de l'item */
+    id: string;
+    /** Label affiché */
+    label: string;
+    /** Icône FontAwesome optionnelle */
+    icon?: IconDefinition;
+    /** Item désactivé */
+    disabled?: boolean;
+    /** Séparateur avant cet item */
+    dividerBefore?: boolean;
+}
+type MenuTrigger = 'click' | 'contextmenu';
+type MenuSize = 'sm' | 'md' | 'lg';
+declare class DsMenu implements OnDestroy {
+    /** Liste des items du menu */
+    readonly items: _angular_core.InputSignal<MenuItem[]>;
+    /** Taille du menu */
+    readonly size: _angular_core.InputSignal<MenuSize>;
+    /** Événement déclencheur */
+    readonly trigger: _angular_core.InputSignal<MenuTrigger>;
+    /** Fermer le menu après sélection */
+    readonly closeOnSelect: _angular_core.InputSignal<boolean>;
+    /** Label ARIA pour l'accessibilité */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Événement émis lors de la sélection d'un item */
+    readonly itemSelected: _angular_core.OutputEmitterRef<MenuItem>;
+    /** Événement émis à l'ouverture du menu */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /** Événement émis à la fermeture du menu */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    triggerElement?: ElementRef;
+    menuItemsRef?: QueryList<ElementRef<HTMLButtonElement>>;
+    /** État interne d'ouverture */
+    private readonly menuOpen;
+    /** Index de l'item actif pour la navigation clavier */
+    private readonly internalActiveIndex;
+    /** Exposition en lecture seule de l'index actif */
+    readonly activeIndex: _angular_core.Signal<number>;
+    /** État d'ouverture du menu (lecture seule) */
+    readonly isOpen: _angular_core.Signal<boolean>;
+    /** Positions pour l'overlay CDK */
+    readonly overlayPositions: _angular_cdk_overlay.ConnectedPosition[];
+    /** Classes CSS du panel menu */
+    readonly menuClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ds-menu__panel': boolean;
+    }>;
+    /** ID de l'item actif pour aria-activedescendant */
+    readonly activeDescendantId: _angular_core.Signal<string | undefined>;
+    /** Ouvre le menu */
+    open(): void;
+    /** Ferme le menu */
+    close(refocusTrigger?: boolean): void;
+    /** Bascule l'état du menu */
+    toggle(): void;
+    /** Sélectionne un item */
+    selectItem(item: MenuItem): void;
+    /** Gestionnaire de clic sur le trigger */
+    onTriggerClick(event: MouseEvent): void;
+    /** Gestionnaire de clic droit sur le trigger */
+    onTriggerContextMenu(event: MouseEvent): void;
+    /** Gestionnaire de clavier sur le trigger */
+    onTriggerKeydown(event: KeyboardEvent): void;
+    /** Gestionnaire de clavier dans le menu */
+    onMenuKeydown(event: KeyboardEvent): void;
+    /** Met à jour l'index actif au survol */
+    onItemMouseEnter(index: number): void;
+    /** Gestionnaire de clic sur le backdrop */
+    onBackdropClick(): void;
+    ngOnDestroy(): void;
+    /** Trouve l'index du premier item activable */
+    private findFirstEnabledIndex;
+    /** Trouve l'index du dernier item activable */
+    private findLastEnabledIndex;
+    /** Navigue vers le prochain item activable */
+    private moveToNextEnabled;
+    /** Définit l'index actif et focus l'élément */
+    private setActiveIndex;
+    /** Focus l'item actif */
+    private focusActiveItem;
+    /** Sélectionne l'item actuellement actif */
+    private selectActiveItem;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; "opened": "opened"; "closed": "closed"; }, never, ["[dsMenuTrigger]"], true, never>;
+}
+
 /**
  * Positions standard pour dropdowns (menus déroulants, select, etc.)
  *
@@ -4555,5 +4684,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, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsI18nService, DsInputField, DsInputTextarea, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsSearchInput, DsSelect, DsSkeleton, 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, BadgeAppearance, BadgeShape, BadgeSize, BadgeType, BadgeVariant, BreadcrumbItem, ButtonAppearance, ButtonSize, ButtonType, ButtonVariant, CardSize, CardVariant, CheckboxSize, CheckboxState, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, I18nLabels, InputAppearance, InputSize, InputState, InputType, PageChangeEvent, PageSizeOption, PaginationSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, SearchInputSize, SkeletonSize, SkeletonVariant, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize };
+export { AUTOCOMPLETE_POSITIONS, BUTTON_APPEARANCE_OPTIONS, BUTTON_SIZE_OPTIONS, BUTTON_VARIANT_OPTIONS, DROPDOWN_POSITIONS, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCard, DsCheckbox, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDropdown, DsI18nService, DsInputField, DsInputTextarea, DsMenu, DsModalComponent, DsPagination, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsSearchInput, DsSelect, DsSkeleton, 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, ContainerGutter, ContainerMaxWidth, DatePickerMode, DatePickerSize, DateRange, DividerLabelPosition, DividerOrientation, DividerSize, DividerVariant, DropdownItem, DropdownItemDTO, DsComboboxOption, DsComboboxSize, DsSelectOption, DsSelectSize, DsTableColumn, DsTableSize, DsTableVariant, I18nLabels, InputAppearance, InputSize, InputState, InputType, MenuItem, MenuSize, MenuTrigger, PageChangeEvent, PageSizeOption, PaginationSize, PopoverTrigger, ProgressBarMode, ProgressBarSize, ProgressBarVariant, RadioGroupLayout, RadioOption, RadioSize, SearchInputSize, SkeletonSize, SkeletonVariant, SortDirection, SortEvent, Step, StepChangeEvent, StepState, StepperOrientation, StepperSize, SupportedLocale, TabItem, TableState, TextareaAppearance, TextareaResize, TextareaSize, TextareaState, ToastInstance, ToastOptions, ToastPosition, ToastType, ToggleSize };

package/package.json

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

package/src/styles/themes/_dark.scss

@@ -412,4 +412,30 @@
   --accordion-icon-color: var(--gray-400);
   --accordion-focus-color: var(--color-primary);
   --accordion-expanded-border-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS AVATAR
+   * ======================================================================== */
+  --avatar-bg: var(--gray-700);
+  --avatar-text: var(--gray-200);
+  --avatar-border: var(--gray-600);
+  --avatar-placeholder-bg: var(--color-primary);
+  --avatar-placeholder-text: var(--gray-900);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS MENU
+   * ======================================================================== */
+  --menu-bg: var(--gray-800);
+  --menu-border: var(--gray-700);
+  --menu-shadow: var(--shadow-3);
+  --menu-item-text: var(--gray-100);
+  --menu-item-icon: var(--gray-400);
+  --menu-item-hover-bg: var(--gray-700);
+  --menu-item-hover-text: var(--gray-50);
+  --menu-item-active-bg: color-mix(in oklab, var(--color-primary) 20%, transparent);
+  --menu-item-active-text: var(--color-primary);
+  --menu-item-disabled-text: var(--gray-500);
+  --menu-item-disabled-icon: var(--gray-600);
+  --menu-divider: var(--gray-700);
+  --menu-backdrop: transparent;
 }

package/src/styles/themes/_light.scss

@@ -402,4 +402,30 @@
   --accordion-icon-color: var(--text-muted);
   --accordion-focus-color: var(--color-primary);
   --accordion-expanded-border-color: var(--color-primary);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS AVATAR
+   * ======================================================================== */
+  --avatar-bg: var(--gray-200);
+  --avatar-text: var(--gray-700);
+  --avatar-border: var(--gray-300);
+  --avatar-placeholder-bg: var(--color-primary);
+  --avatar-placeholder-text: var(--gray-50);
+
+  /* ==========================================================================
+   * SÉMANTIQUES DS MENU
+   * ======================================================================== */
+  --menu-bg: var(--surface-default);
+  --menu-border: var(--border-color);
+  --menu-shadow: var(--shadow-2);
+  --menu-item-text: var(--text-default);
+  --menu-item-icon: var(--text-muted);
+  --menu-item-hover-bg: var(--surface-hover);
+  --menu-item-hover-text: var(--text-default);
+  --menu-item-active-bg: color-mix(in oklab, var(--color-primary) 15%, transparent);
+  --menu-item-active-text: var(--color-primary);
+  --menu-item-disabled-text: var(--text-disabled);
+  --menu-item-disabled-icon: var(--text-disabled-alt);
+  --menu-divider: var(--border-subtle);
+  --menu-backdrop: transparent;
 }

package/src/styles/tokens/_semantic.scss

@@ -361,3 +361,43 @@ $combobox-font-size-lg: $font-size-4;
 $combobox-radius: $radius-2;
 $combobox-dropdown-shadow: $shadow-2;
 $combobox-max-height: 250px;
+
+// === AVATAR ===
+
+$avatar-size-sm: 32px;
+$avatar-size-md: 40px;
+$avatar-size-lg: 48px;
+$avatar-size-xl: 56px;
+
+$avatar-font-size-sm: $font-size-1;
+$avatar-font-size-md: $font-size-2;
+$avatar-font-size-lg: $font-size-3;
+$avatar-font-size-xl: $font-size-4;
+
+$avatar-radius-circle: $radius-round;
+$avatar-radius-rounded: $radius-2;
+$avatar-radius-square: 0;
+
+$avatar-border-width: 2px;
+
+// === MENU ===
+
+$menu-min-width: 160px;
+$menu-max-width: 280px;
+$menu-padding: $space-2;
+$menu-radius: $radius-2;
+
+$menu-item-height-sm: 28px;
+$menu-item-height-md: 36px;
+$menu-item-height-lg: 44px;
+
+$menu-item-padding-x: $space-3;
+$menu-item-padding-y: $space-2;
+$menu-item-radius: $radius-1-5;
+$menu-item-gap: $space-2;
+
+$menu-font-size-sm: $font-size-1;
+$menu-font-size-md: $font-size-2;
+$menu-font-size-lg: $font-size-3;
+
+$menu-divider-margin: $space-2;

package/src/styles/tokens/_tokens.scss

@@ -436,4 +436,35 @@
   --font-size-sm: var(--font-size-2);
   --font-size-base: var(--font-size-3);
   --font-size-lg: var(--font-size-4);
+
+  /* === AVATAR === */
+  --avatar-size-sm: #{$avatar-size-sm};
+  --avatar-size-md: #{$avatar-size-md};
+  --avatar-size-lg: #{$avatar-size-lg};
+  --avatar-size-xl: #{$avatar-size-xl};
+  --avatar-font-size-sm: #{$avatar-font-size-sm};
+  --avatar-font-size-md: #{$avatar-font-size-md};
+  --avatar-font-size-lg: #{$avatar-font-size-lg};
+  --avatar-font-size-xl: #{$avatar-font-size-xl};
+  --avatar-radius-circle: #{$avatar-radius-circle};
+  --avatar-radius-rounded: #{$avatar-radius-rounded};
+  --avatar-radius-square: #{$avatar-radius-square};
+  --avatar-border-width: #{$avatar-border-width};
+
+  /* === MENU === */
+  --menu-min-width: #{$menu-min-width};
+  --menu-max-width: #{$menu-max-width};
+  --menu-padding: #{$menu-padding};
+  --menu-radius: #{$menu-radius};
+  --menu-item-height-sm: #{$menu-item-height-sm};
+  --menu-item-height-md: #{$menu-item-height-md};
+  --menu-item-height-lg: #{$menu-item-height-lg};
+  --menu-item-padding-x: #{$menu-item-padding-x};
+  --menu-item-padding-y: #{$menu-item-padding-y};
+  --menu-item-radius: #{$menu-item-radius};
+  --menu-item-gap: #{$menu-item-gap};
+  --menu-font-size-sm: #{$menu-font-size-sm};
+  --menu-font-size-md: #{$menu-font-size-md};
+  --menu-font-size-lg: #{$menu-font-size-lg};
+  --menu-divider-margin: #{$menu-divider-margin};
 }