@spw-ds/spw-stencil-library 1.2.0 → 1.2.1

package/dist/types/components/spw-checkbox/spw-checkbox.d.ts

@@ -12,6 +12,8 @@ export declare class SpwCheckbox {
     icon: string;
     /** Nom de l'élément utilisé dans les formulaires */
     name: string;
+    /** Type de variant pour la checkbox */
+    variant?: 'default' | 'toggle';
     internalChecked: boolean;
     internals: ElementInternals;
     /** Événement déclenché lors d'un changement d'état de la case à cocher (cochée ou décochée) */

package/dist/types/components/spw-custom-select/spw-custom-select.d.ts

@@ -27,12 +27,12 @@ export declare class SpwCustomSelect {
     /** Indique si la sélection est obligatoire dans le formulaire */
     required: boolean;
     /** Chaîne JSON des options disponibles dans le select (valeur et label) */
-    options: string;
+    items: string | any[];
     /** Taille du select, peut être "large" ou "medium" */
     size: 'large' | 'medium';
     /** Permet la sélection multiple si vrai */
     multiple: boolean;
-    /** Active la fonction de recherche dans la liste des options */
+    /** Active la fonction de recherche dans la liste des items */
     isSearch: boolean;
     /** Texte d'assistance à afficher sous le champ */
     assistiveText?: string;
@@ -57,7 +57,7 @@ export declare class SpwCustomSelect {
     componentDidLoad(): void;
     disconnectedCallback(): void;
     private handleClickOutside;
-    parseOptions(newValue: string): void;
+    parseOptions(newValue: string | any[]): void;
     valueChangedHandler(newValue: (string | number)[] | string | number): void;
     private updateSelectedOption;
     internalValueChanged(): void;

package/dist/types/components/spw-hero/spw-hero.d.ts

@@ -5,6 +5,8 @@ export declare class SpwHero {
     imageAlt?: string;
     /** Permet de choisir la surface d'arrière-plan du hero */
     surface?: 'dark' | 'light';
+    /** Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding */
+    hasPictureFull?: boolean;
     /** Permet de choisir le variant du hero */
     variant?: 'grey' | 'white' | 'maxi' | 'photo';
     /** Permet de choisir l'alignement du contenu */

package/dist/types/components/spw-illustration/spw-illustration.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Catalogue d'illustrations SVG
+ */
+declare const ILLUSTRATIONS: {
+    '404-illustration1': string;
+    '404-illustration2': string;
+    '404-illustration3': string;
+    '404-illustration4': string;
+    '404-illustration5': string;
+    '404-illustration6': string;
+};
+export type IllustrationType = keyof typeof ILLUSTRATIONS;
+export declare class SpwIllustration {
+    /**
+     * Variante de l'illustration à afficher
+     */
+    variant: IllustrationType;
+    /**
+     * Largeur de l'illustration (ex: "200px", "100%")
+     */
+    width?: string;
+    /**
+     * Hauteur de l'illustration (ex: "200px", "auto")
+     */
+    height?: string;
+    /**
+     * Texte alternatif pour l'accessibilité
+     */
+    alt?: string;
+    render(): any;
+}
+export {};

package/dist/types/components/spw-select/spw-select.d.ts

@@ -1,4 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+export interface SelectItem {
+    label: string;
+    value: string | number;
+}
 export declare class SpwSelect {
     el: HTMLSpwSelectElement;
     /** Emet un event si la valeur change */
@@ -36,9 +40,16 @@ export declare class SpwSelect {
     showSuccessIcon?: boolean;
     /** Affiche une icône de warning si vrai */
     showWarningIcon?: boolean;
+    /** Liste d'items dynamiques pour générer les options (array d'objects avec label + value) */
+    items?: SelectItem[];
+    /** Propriété à utiliser comme label des options */
+    itemLabel?: string;
+    /** Propriété à utiliser comme valeur des options */
+    itemValue?: string;
     private selectElement;
     private defaultValue;
     internals: ElementInternals;
+    handleItemsChange(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     formResetCallback(): void;
@@ -47,6 +58,7 @@ export declare class SpwSelect {
     private getInitialSelectedValue;
     private handleSelectChange;
     private moveOptionsToLightDom;
+    private syncDynamicOptions;
     private renderErrorMessage;
     private renderHintMessage;
     private renderSuccessMessage;

package/dist/types/components/spw-table/spw-table-row/spw-table-row.d.ts

@@ -1,3 +1,6 @@
 export declare class SpwTableRow {
+    /** Permet de changer le state du spw-table-row  */
+    state?: 'default' | 'selected' | 'disabled';
+    private get elementClass();
     render(): any;
 }

package/dist/types/components/spw-table/spw-table.d.ts

@@ -19,6 +19,7 @@ export declare class SpwTable {
     currentSort?: SortEvent;
     componentDidLoad(): void;
     private getMasterCheckboxColumnIndex;
+    private isCheckboxDisabled;
     private updateMasterCheckboxState;
     private setupHeaderCheckboxListener;
     private setupBodyCheckboxListener;

package/dist/types/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.d.ts

@@ -1,3 +1,20 @@
 export declare class SpwTabsNavigation {
+    hostElement: HTMLElement;
+    showLeftArrow: boolean;
+    showRightArrow: boolean;
+    private ulElement;
+    private scrollPercentage;
+    private resizeObserver;
+    private mutationObserver;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onWindowResize(): void;
+    private setupObservers;
+    private updateSlottedElementsObservation;
+    private cleanupObservers;
+    private checkOverflow;
+    private scrollLeft;
+    private scrollRight;
+    private handleScroll;
     render(): any;
 }

package/dist/types/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.d.ts

@@ -11,6 +11,10 @@ export declare class SpwTabsNavigationItem {
     bubble: boolean;
     /** Définit si le texte doit être coupé pour les onglets au titre trop long */
     hasEllipsis?: boolean;
+    /** Si rempli, vous pouvez utiliser une référence d'icône font-awesome sur le spw-tabs-navigation-item */
+    icon?: string;
+    /** Position de l'icône à l'intérieur du bouton sur le spw-tabs-navigation-item */
+    iconPosition?: 'left' | 'right';
     slotText: string;
     tabSelected: EventEmitter<string>;
     componentDidLoad(): void;

package/dist/types/components/spw-tabs/spw-tabs.d.ts

@@ -1,15 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SpwTabs {
     el: HTMLElement;
     /** Onglet actif par défaut */
     defaultActiveTab: string;
     /** Variante des onglets */
     variant: 'default' | 'box';
-    /** Texte coupé si trop long */
+    /** Texte coupé si trop long, affiche un tooltip si le contenu excède la max-width définie */
     hasEllipsis?: boolean;
+    /** Définit la largeur maximale de l'onglet (en pixels) */
+    maxWidth?: number;
+    /** Permet de spécifier la taille de l'onglet */
+    size?: 'large' | 'medium' | 'small';
     activeTab: string;
+    /** Événement émis lorsque l'onglet actif change */
+    tabChanged: EventEmitter<string>;
     componentWillLoad(): void;
     componentDidLoad(): void;
     activeTabChanged(): void;
+    maxWidthChanged(): void;
+    hasEllipsisChanged(): void;
     /**
      * Récupère l'onglet actuellement sélectionné
      * @returns {Promise<string>} L'ID de l'onglet actif
@@ -24,6 +33,7 @@ export declare class SpwTabs {
     handleTabSelected(event: CustomEvent<string>): void;
     slotChanged(): void;
     private updateActiveStates;
+    private applyMaxWidthToChildren;
     private applyVariantToChildren;
     private get elementClass();
     render(): any;

package/dist/types/components.d.ts

@@ -5,8 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { IllustrationType } from "./components/spw-illustration/spw-illustration";
+import { SelectItem } from "./components/spw-select/spw-select";
 import { SortEvent } from "./components/spw-table/spw-table";
 import { SpwTheme } from "./themes/themes";
+export { IllustrationType } from "./components/spw-illustration/spw-illustration";
+export { SelectItem } from "./components/spw-select/spw-select";
 export { SortEvent } from "./components/spw-table/spw-table";
 export { SpwTheme } from "./themes/themes";
 export namespace Components {
@@ -227,6 +231,10 @@ export namespace Components {
           * Méthode publique pour changer l'état de la case à cocher.
          */
         "toggleCheckedState": (newVal: boolean) => Promise<void>;
+        /**
+          * Type de variant pour la checkbox
+         */
+        "variant"?: 'default' | 'toggle';
     }
     interface SpwCookies {
         /**
@@ -264,9 +272,13 @@ export namespace Components {
          */
         "hint"?: string;
         /**
-          * Active la fonction de recherche dans la liste des options
+          * Active la fonction de recherche dans la liste des items
          */
         "isSearch": boolean;
+        /**
+          * Chaîne JSON des options disponibles dans le select (valeur et label)
+         */
+        "items": string | any[];
         /**
           * Label associé au champ de sélection personnalisé
          */
@@ -279,10 +291,6 @@ export namespace Components {
           * Nom de l'élément dans les formulaires, utilisé pour associer la valeur
          */
         "name": string;
-        /**
-          * Chaîne JSON des options disponibles dans le select (valeur et label)
-         */
-        "options": string;
         /**
           * Placeholder à afficher lorsque aucune option n'est sélectionnée
          */
@@ -650,6 +658,10 @@ export namespace Components {
           * Permet de choisir l'alignement du contenu
          */
         "alignment"?: 'left' | 'center' | 'right';
+        /**
+          * Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding
+         */
+        "hasPictureFull"?: boolean;
         /**
           * Texte alternatif de l'image du hero banner
          */
@@ -681,6 +693,24 @@ export namespace Components {
          */
         "variant": 'fa-solid' | 'fa-brands' | 'fa-regular';
     }
+    interface SpwIllustration {
+        /**
+          * Texte alternatif pour l'accessibilité
+         */
+        "alt"?: string;
+        /**
+          * Hauteur de l'illustration (ex: "200px", "auto")
+         */
+        "height"?: string;
+        /**
+          * Variante de l'illustration à afficher
+         */
+        "variant": IllustrationType;
+        /**
+          * Largeur de l'illustration (ex: "200px", "100%")
+         */
+        "width"?: string;
+    }
     interface SpwIodda {
     }
     interface SpwLink {
@@ -966,6 +996,18 @@ export namespace Components {
           * Message d'indication (hint) à afficher sous le champ de sélection
          */
         "hint"?: string;
+        /**
+          * Propriété à utiliser comme label des options
+         */
+        "itemLabel"?: string;
+        /**
+          * Propriété à utiliser comme valeur des options
+         */
+        "itemValue"?: string;
+        /**
+          * Liste d'items dynamiques pour générer les options (array d'objects avec label + value)
+         */
+        "items"?: SelectItem[];
         /**
           * Label associé au champ de sélection
          */
@@ -1219,6 +1261,10 @@ export namespace Components {
         "verticalAlign"?: 'top' | 'bottom' | 'middle';
     }
     interface SpwTableRow {
+        /**
+          * Permet de changer le state du spw-table-row
+         */
+        "state"?: 'default' | 'selected' | 'disabled';
     }
     interface SpwTabs {
         /**
@@ -1231,15 +1277,23 @@ export namespace Components {
          */
         "getSelectedTab": () => Promise<string>;
         /**
-          * Texte coupé si trop long
+          * Texte coupé si trop long, affiche un tooltip si le contenu excède la max-width définie
          */
         "hasEllipsis"?: boolean;
+        /**
+          * Définit la largeur maximale de l'onglet (en pixels)
+         */
+        "maxWidth"?: number;
         /**
           * Définit l'onglet sélectionné
           * @param tabId L'ID de l'onglet à sélectionner
           * @returns
          */
         "setSelectedTab": (tabId: string) => Promise<void>;
+        /**
+          * Permet de spécifier la taille de l'onglet
+         */
+        "size"?: 'large' | 'medium' | 'small';
         /**
           * Variante des onglets
          */
@@ -1268,6 +1322,14 @@ export namespace Components {
           * Définit si le texte doit être coupé pour les onglets au titre trop long
          */
         "hasEllipsis"?: boolean;
+        /**
+          * Si rempli, vous pouvez utiliser une référence d'icône font-awesome sur le spw-tabs-navigation-item
+         */
+        "icon"?: string;
+        /**
+          * Position de l'icône à l'intérieur du bouton sur le spw-tabs-navigation-item
+         */
+        "iconPosition"?: 'left' | 'right';
         /**
           * Définit un id pour le tab
          */
@@ -1606,6 +1668,10 @@ export interface SpwTableHeaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSpwTableHeaderElement;
 }
+export interface SpwTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSpwTabsElement;
+}
 export interface SpwTabsNavigationItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSpwTabsNavigationItemElement;
@@ -1928,6 +1994,12 @@ declare global {
         prototype: HTMLSpwIconElement;
         new (): HTMLSpwIconElement;
     };
+    interface HTMLSpwIllustrationElement extends Components.SpwIllustration, HTMLStencilElement {
+    }
+    var HTMLSpwIllustrationElement: {
+        prototype: HTMLSpwIllustrationElement;
+        new (): HTMLSpwIllustrationElement;
+    };
     interface HTMLSpwIoddaElement extends Components.SpwIodda, HTMLStencilElement {
     }
     var HTMLSpwIoddaElement: {
@@ -2180,7 +2252,18 @@ declare global {
         prototype: HTMLSpwTableRowElement;
         new (): HTMLSpwTableRowElement;
     };
+    interface HTMLSpwTabsElementEventMap {
+        "tabChanged": string;
+    }
     interface HTMLSpwTabsElement extends Components.SpwTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSpwTabsElementEventMap>(type: K, listener: (this: HTMLSpwTabsElement, ev: SpwTabsCustomEvent<HTMLSpwTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSpwTabsElementEventMap>(type: K, listener: (this: HTMLSpwTabsElement, ev: SpwTabsCustomEvent<HTMLSpwTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLSpwTabsElement: {
         prototype: HTMLSpwTabsElement;
@@ -2330,6 +2413,7 @@ declare global {
         "spw-header-persona-item": HTMLSpwHeaderPersonaItemElement;
         "spw-hero": HTMLSpwHeroElement;
         "spw-icon": HTMLSpwIconElement;
+        "spw-illustration": HTMLSpwIllustrationElement;
         "spw-iodda": HTMLSpwIoddaElement;
         "spw-link": HTMLSpwLinkElement;
         "spw-list": HTMLSpwListElement;
@@ -2608,6 +2692,10 @@ declare namespace LocalJSX {
           * Événement déclenché lors d'un changement d'état de la case à cocher (cochée ou décochée)
          */
         "onSpwChange"?: (event: SpwCheckboxCustomEvent<boolean>) => void;
+        /**
+          * Type de variant pour la checkbox
+         */
+        "variant"?: 'default' | 'toggle';
     }
     interface SpwCookies {
         /**
@@ -2645,9 +2733,13 @@ declare namespace LocalJSX {
          */
         "hint"?: string;
         /**
-          * Active la fonction de recherche dans la liste des options
+          * Active la fonction de recherche dans la liste des items
          */
         "isSearch"?: boolean;
+        /**
+          * Chaîne JSON des options disponibles dans le select (valeur et label)
+         */
+        "items"?: string | any[];
         /**
           * Label associé au champ de sélection personnalisé
          */
@@ -2664,10 +2756,6 @@ declare namespace LocalJSX {
           * Événement émis lorsque la valeur sélectionnée change
          */
         "onValueChanged"?: (event: SpwCustomSelectCustomEvent<(string | number)[] | string | number>) => void;
-        /**
-          * Chaîne JSON des options disponibles dans le select (valeur et label)
-         */
-        "options"?: string;
         /**
           * Placeholder à afficher lorsque aucune option n'est sélectionnée
          */
@@ -3027,6 +3115,10 @@ declare namespace LocalJSX {
           * Permet de choisir l'alignement du contenu
          */
         "alignment"?: 'left' | 'center' | 'right';
+        /**
+          * Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding
+         */
+        "hasPictureFull"?: boolean;
         /**
           * Texte alternatif de l'image du hero banner
          */
@@ -3058,6 +3150,24 @@ declare namespace LocalJSX {
          */
         "variant"?: 'fa-solid' | 'fa-brands' | 'fa-regular';
     }
+    interface SpwIllustration {
+        /**
+          * Texte alternatif pour l'accessibilité
+         */
+        "alt"?: string;
+        /**
+          * Hauteur de l'illustration (ex: "200px", "auto")
+         */
+        "height"?: string;
+        /**
+          * Variante de l'illustration à afficher
+         */
+        "variant": IllustrationType;
+        /**
+          * Largeur de l'illustration (ex: "200px", "100%")
+         */
+        "width"?: string;
+    }
     interface SpwIodda {
     }
     interface SpwLink {
@@ -3347,6 +3457,18 @@ declare namespace LocalJSX {
           * Message d'indication (hint) à afficher sous le champ de sélection
          */
         "hint"?: string;
+        /**
+          * Propriété à utiliser comme label des options
+         */
+        "itemLabel"?: string;
+        /**
+          * Propriété à utiliser comme valeur des options
+         */
+        "itemValue"?: string;
+        /**
+          * Liste d'items dynamiques pour générer les options (array d'objects avec label + value)
+         */
+        "items"?: SelectItem[];
         /**
           * Label associé au champ de sélection
          */
@@ -3605,6 +3727,10 @@ declare namespace LocalJSX {
         "verticalAlign"?: 'top' | 'bottom' | 'middle';
     }
     interface SpwTableRow {
+        /**
+          * Permet de changer le state du spw-table-row
+         */
+        "state"?: 'default' | 'selected' | 'disabled';
     }
     interface SpwTabs {
         /**
@@ -3612,9 +3738,21 @@ declare namespace LocalJSX {
          */
         "defaultActiveTab"?: string;
         /**
-          * Texte coupé si trop long
+          * Texte coupé si trop long, affiche un tooltip si le contenu excède la max-width définie
          */
         "hasEllipsis"?: boolean;
+        /**
+          * Définit la largeur maximale de l'onglet (en pixels)
+         */
+        "maxWidth"?: number;
+        /**
+          * Événement émis lorsque l'onglet actif change
+         */
+        "onTabChanged"?: (event: SpwTabsCustomEvent<string>) => void;
+        /**
+          * Permet de spécifier la taille de l'onglet
+         */
+        "size"?: 'large' | 'medium' | 'small';
         /**
           * Variante des onglets
          */
@@ -3643,6 +3781,14 @@ declare namespace LocalJSX {
           * Définit si le texte doit être coupé pour les onglets au titre trop long
          */
         "hasEllipsis"?: boolean;
+        /**
+          * Si rempli, vous pouvez utiliser une référence d'icône font-awesome sur le spw-tabs-navigation-item
+         */
+        "icon"?: string;
+        /**
+          * Position de l'icône à l'intérieur du bouton sur le spw-tabs-navigation-item
+         */
+        "iconPosition"?: 'left' | 'right';
         "onTabSelected"?: (event: SpwTabsNavigationItemCustomEvent<string>) => void;
         /**
           * Définit un id pour le tab
@@ -3971,6 +4117,7 @@ declare namespace LocalJSX {
         "spw-header-persona-item": SpwHeaderPersonaItem;
         "spw-hero": SpwHero;
         "spw-icon": SpwIcon;
+        "spw-illustration": SpwIllustration;
         "spw-iodda": SpwIodda;
         "spw-link": SpwLink;
         "spw-list": SpwList;
@@ -4057,6 +4204,7 @@ declare module "@stencil/core" {
             "spw-header-persona-item": LocalJSX.SpwHeaderPersonaItem & JSXBase.HTMLAttributes<HTMLSpwHeaderPersonaItemElement>;
             "spw-hero": LocalJSX.SpwHero & JSXBase.HTMLAttributes<HTMLSpwHeroElement>;
             "spw-icon": LocalJSX.SpwIcon & JSXBase.HTMLAttributes<HTMLSpwIconElement>;
+            "spw-illustration": LocalJSX.SpwIllustration & JSXBase.HTMLAttributes<HTMLSpwIllustrationElement>;
             "spw-iodda": LocalJSX.SpwIodda & JSXBase.HTMLAttributes<HTMLSpwIoddaElement>;
             "spw-link": LocalJSX.SpwLink & JSXBase.HTMLAttributes<HTMLSpwLinkElement>;
             "spw-list": LocalJSX.SpwList & JSXBase.HTMLAttributes<HTMLSpwListElement>;

package/dist/types/stories/components/spw-custom-select/spw-custom-select.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Default: any;
+export declare const Multiple: any;
+export declare const AvecRecherche: any;
+export declare const AvecErreur: any;
+export declare const AvecSucces: any;
+export declare const AvecWarning: any;

package/dist/types/stories/organisms/spw-hero/spw-hero.stories.d.ts

@@ -9,3 +9,5 @@ export declare const GreyLeft: any;
 export declare const GreyRight: any;
 export declare const WhiteLeft: any;
 export declare const WhiteRight: any;
+export declare const WhiteLeftPictureFull: any;
+export declare const WhiteRightPictureFull: any;