@spw-ds/spw-stencil-library 1.2.3 → 1.2.5

package/dist/collection/components/spw-wizard/spw-wizard-item/spw-wizard-item.js

@@ -0,0 +1,339 @@
+import { Host, h } from "@stencil/core";
+export class SpwWizardItem {
+    constructor() {
+        /** État de l'étape (géré automatiquement par spw-wizard sauf si status est défini) */
+        this.state = 'inactive';
+        /** Indique si c'est le dernier item (géré automatiquement par spw-wizard) */
+        this.isLast = 'false';
+        /** Indique si l'item est cliquable (géré automatiquement par spw-wizard) */
+        this.isClickable = 'false';
+        /** Indique si l'item est avant l'étape courante (géré automatiquement par spw-wizard) */
+        this.isBeforeCurrent = 'false';
+        /** Indique si l'item est après l'étape courante (géré automatiquement par spw-wizard) */
+        this.isAfterCurrent = 'false';
+        /** Indique si c'est l'étape courante (géré automatiquement par spw-wizard) */
+        this.isCurrent = 'false';
+        this.handleClick = () => {
+            if (this.isClickable === 'true') {
+                this.wizardItemClick.emit(this.stepNumber);
+            }
+        };
+    }
+    renderIcon() {
+        const effectiveState = this.status || this.state;
+        if (effectiveState === 'warning') {
+            return h("spw-icon", { variant: "fa-solid", icon: "fa-triangle-exclamation" });
+        }
+        if (effectiveState === 'error') {
+            return h("spw-icon", { variant: "fa-solid", icon: "fa-xmark" });
+        }
+        if (this.icon) {
+            return h("spw-icon", { variant: "fa-solid", icon: this.icon });
+        }
+        return h("span", null, this.stepNumber);
+    }
+    get elementClass() {
+        const effectiveState = this.status || this.state;
+        return {
+            'spw-wizard-item': true,
+            [`spw-wizard-item--${effectiveState}`]: true,
+            [`spw-wizard-item--${this.variant}`]: true,
+            'spw-wizard-item--clickable': this.isClickable === 'true',
+            'spw-wizard-item--current': this.isCurrent === 'true',
+            'spw-wizard-item--before-current': this.isBeforeCurrent === 'true',
+            'spw-wizard-item--after-current': this.isAfterCurrent === 'true',
+        };
+    }
+    render() {
+        const showConnector = this.isLast === 'false';
+        return (h(Host, { key: '5916ce5a37b11c5c50b4babd9efd8e2c98090895' }, h("div", { key: 'a0b0e498981bafdf74d45cbd7425659c6fc222a2', class: this.elementClass, onClick: this.handleClick }, h("div", { key: '49a6ffc1af0636a4aeb6480243c9ae02111a5915', class: "spw-wizard-item__step" }, h("div", { key: 'a1cd7562fcad90c22e27d3a6a0706e3d6c5e7e0b', class: "spw-wizard-item__icon" }, this.renderIcon()), showConnector && h("div", { key: '346688377fa5b6b4ef03aad38cff7b5dc67404fe', class: "spw-wizard-item__connector" })), h("div", { key: '732bcd5e1ae9c7eba5466c7b398dbbeb6d31deef', class: "spw-wizard-item__content" }, this.label && h("div", { key: '07b5f9ad5792444deb7adfcd8998a9557bdf574c', class: "spw-wizard-item__label" }, this.label), this.description && h("div", { key: 'fdc5193fca89fb8557b516b193ed4066326d2093', class: "spw-wizard-item__description" }, this.description), this.additionalInfo && h("div", { key: '50a3248951eb7e5f2af34defdbcb267d3aff882f', class: "spw-wizard-item__additional-info" }, this.additionalInfo)))));
+    }
+    static get is() { return "spw-wizard-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-wizard-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-wizard-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label affich\u00E9 sous l'ic\u00F4ne"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Description affich\u00E9 sous le label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false
+            },
+            "additionalInfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Info additionnelle affich\u00E9e sous la description (par exemple lors d'une erreur)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "additional-info",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Ic\u00F4ne \u00E0 afficher (r\u00E9f\u00E9rence font-awesome)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inactive' | 'active' | 'completed' | 'warning' | 'error'",
+                    "resolved": "\"active\" | \"completed\" | \"error\" | \"inactive\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9tat de l'\u00E9tape (g\u00E9r\u00E9 automatiquement par spw-wizard sauf si status est d\u00E9fini)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "'inactive'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inactive' | 'active' | 'completed' | 'warning' | 'error'",
+                    "resolved": "\"active\" | \"completed\" | \"error\" | \"inactive\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Statut manuel qui override l'\u00E9tat automatique"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false
+            },
+            "isLast": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si c'est le dernier item (g\u00E9r\u00E9 automatiquement par spw-wizard)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-last",
+                "reflect": false,
+                "defaultValue": "'false'"
+            },
+            "stepNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Num\u00E9ro de l'\u00E9tape (g\u00E9r\u00E9 automatiquement par spw-wizard)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step-number",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant qui permet de d\u00E9finir la direction (g\u00E9r\u00E9 automatiquement par spw-wizard)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false
+            },
+            "isClickable": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si l'item est cliquable (g\u00E9r\u00E9 automatiquement par spw-wizard)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-clickable",
+                "reflect": false,
+                "defaultValue": "'false'"
+            },
+            "isBeforeCurrent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si l'item est avant l'\u00E9tape courante (g\u00E9r\u00E9 automatiquement par spw-wizard)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-before-current",
+                "reflect": false,
+                "defaultValue": "'false'"
+            },
+            "isAfterCurrent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si l'item est apr\u00E8s l'\u00E9tape courante (g\u00E9r\u00E9 automatiquement par spw-wizard)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-after-current",
+                "reflect": false,
+                "defaultValue": "'false'"
+            },
+            "isCurrent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si c'est l'\u00E9tape courante (g\u00E9r\u00E9 automatiquement par spw-wizard)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-current",
+                "reflect": false,
+                "defaultValue": "'false'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wizardItemClick",
+                "name": "wizardItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis lors du clic sur l'item"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=spw-wizard-item.js.map

package/dist/collection/components/spw-wizard/spw-wizard-item/spw-wizard-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-wizard-item.js","sourceRoot":"","sources":["../../../../src/components/spw-wizard/spw-wizard-item/spw-wizard-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-wizard-item',\n  styleUrl: 'spw-wizard-item.scss',\n  shadow: true,\n})\nexport class SpwWizardItem {\n  /** Label affiché sous l'icône */\n  @Prop() label?: string;\n  /** Description affiché sous le label */\n  @Prop() description?: string;\n  /** Info additionnelle affichée sous la description (par exemple lors d'une erreur) */\n  @Prop() additionalInfo?: string;\n  /** Icône à afficher (référence font-awesome) */\n  @Prop() icon?: string;\n  /** État de l'étape (géré automatiquement par spw-wizard sauf si status est défini) */\n  @Prop() state?: 'inactive' | 'active' | 'completed' | 'warning' | 'error' = 'inactive';\n  /** Statut manuel qui override l'état automatique */\n  @Prop() status?: 'inactive' | 'active' | 'completed' | 'warning' | 'error';\n  /** Indique si c'est le dernier item (géré automatiquement par spw-wizard) */\n  @Prop() isLast?: string = 'false';\n  /** Numéro de l'étape (géré automatiquement par spw-wizard) */\n  @Prop() stepNumber?: number;\n  /** Variant qui permet de définir la direction (géré automatiquement par spw-wizard) */\n  @Prop() variant?: 'vertical' | 'horizontal';\n  /** Indique si l'item est cliquable (géré automatiquement par spw-wizard) */\n  @Prop() isClickable?: string = 'false';\n  /** Indique si l'item est avant l'étape courante (géré automatiquement par spw-wizard) */\n  @Prop() isBeforeCurrent?: string = 'false';\n  /** Indique si l'item est après l'étape courante (géré automatiquement par spw-wizard) */\n  @Prop() isAfterCurrent?: string = 'false';\n  /** Indique si c'est l'étape courante (géré automatiquement par spw-wizard) */\n  @Prop() isCurrent?: string = 'false';\n  /** Événement émis lors du clic sur l'item */\n  @Event() wizardItemClick: EventEmitter<number>;\n\n  private handleClick = () => {\n    if (this.isClickable === 'true') {\n      this.wizardItemClick.emit(this.stepNumber);\n    }\n  };\n\n  private renderIcon() {\n    const effectiveState = this.status || this.state;\n\n    if (effectiveState === 'warning') {\n      return <spw-icon variant=\"fa-solid\" icon=\"fa-triangle-exclamation\"></spw-icon>;\n    }\n    if (effectiveState === 'error') {\n      return <spw-icon variant=\"fa-solid\" icon=\"fa-xmark\"></spw-icon>;\n    }\n\n    if (this.icon) {\n      return <spw-icon variant=\"fa-solid\" icon={this.icon}></spw-icon>;\n    }\n\n    return <span>{this.stepNumber}</span>;\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    const effectiveState = this.status || this.state;\n    return {\n      'spw-wizard-item': true,\n      [`spw-wizard-item--${effectiveState}`]: true,\n      [`spw-wizard-item--${this.variant}`]: true,\n      'spw-wizard-item--clickable': this.isClickable === 'true',\n      'spw-wizard-item--current': this.isCurrent === 'true',\n      'spw-wizard-item--before-current': this.isBeforeCurrent === 'true',\n      'spw-wizard-item--after-current': this.isAfterCurrent === 'true',\n    };\n  }\n\n  render() {\n    const showConnector = this.isLast === 'false';\n\n    return (\n      <Host>\n        <div class={this.elementClass} onClick={this.handleClick}>\n          <div class=\"spw-wizard-item__step\">\n            <div class=\"spw-wizard-item__icon\">{this.renderIcon()}</div>\n            {showConnector && <div class=\"spw-wizard-item__connector\"></div>}\n          </div>\n          <div class=\"spw-wizard-item__content\">\n            {this.label && <div class=\"spw-wizard-item__label\">{this.label}</div>}\n            {this.description && <div class=\"spw-wizard-item__description\">{this.description}</div>}\n            {this.additionalInfo && <div class=\"spw-wizard-item__additional-info\">{this.additionalInfo}</div>}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/spw-wizard/spw-wizard.css

@@ -0,0 +1,2 @@
+
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1200px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-wizard{display:flex;gap:0}.spw-wizard--horizontal{flex-direction:row}.spw-wizard--vertical{align-items:flex-start;flex-direction:column}

package/dist/collection/components/spw-wizard/spw-wizard.js

@@ -0,0 +1,192 @@
+import { Host, h } from "@stencil/core";
+export class SpwWizard {
+    constructor() {
+        /** Étape actuellement active (index basé sur 1) */
+        this.currentStep = 1;
+        /** Orientation du wizard */
+        this.variant = 'horizontal';
+    }
+    componentWillLoad() {
+        this.updateStepsState();
+    }
+    slotChanged() {
+        this.updateStepsState();
+    }
+    /** Méthode publique pour définir une step au wizard */
+    async setStep(step) {
+        this.currentStep = step;
+        this.updateStepsState();
+        this.scrollToWizard();
+    }
+    handleStepClick(event) {
+        const clickedStep = event.detail;
+        if (clickedStep < this.currentStep) {
+            this.currentStep = clickedStep;
+            this.updateStepsState();
+            this.stepClick.emit(clickedStep);
+            this.scrollToWizard();
+        }
+    }
+    scrollToWizard() {
+        var _a;
+        const host = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.host;
+        const scrollTarget = (host === null || host === void 0 ? void 0 : host.parentElement) || this.el;
+        if (scrollTarget) {
+            scrollTarget.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    }
+    updateStepsState() {
+        requestAnimationFrame(() => {
+            const items = this.el.querySelectorAll('spw-wizard-item');
+            items.forEach((item, index) => {
+                const stepNumber = index + 1;
+                if (stepNumber > this.currentStep && item.hasAttribute('status')) {
+                    item.removeAttribute('status');
+                }
+                if (!item.hasAttribute('status')) {
+                    if (stepNumber < this.currentStep) {
+                        item.setAttribute('state', 'completed');
+                    }
+                    else if (stepNumber === this.currentStep) {
+                        item.setAttribute('state', 'active');
+                    }
+                    else {
+                        item.setAttribute('state', 'inactive');
+                    }
+                }
+                item.setAttribute('variant', this.variant);
+                item.setAttribute('step-number', stepNumber.toString());
+                item.setAttribute('is-last', (index === items.length - 1).toString());
+                item.setAttribute('is-clickable', (stepNumber < this.currentStep).toString());
+                item.setAttribute('is-current', (stepNumber === this.currentStep).toString());
+                item.setAttribute('is-before-current', (stepNumber < this.currentStep).toString());
+                item.setAttribute('is-after-current', (stepNumber > this.currentStep).toString());
+            });
+        });
+    }
+    get elementClass() {
+        return {
+            'spw-wizard': true,
+            [`spw-wizard--${this.variant}`]: true,
+        };
+    }
+    render() {
+        return (h(Host, { key: '9ba69652c40a6e47ce15e3b032c89caed001667f' }, h("div", { key: '3c499b8f19bb4e3f311e77a67b84d27d8d1fbfee', class: this.elementClass }, h("slot", { key: '1aa0973bfbe60e812ca0daf22905596e31ed3509' }))));
+    }
+    static get is() { return "spw-wizard"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-wizard.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-wizard.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentStep": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9tape actuellement active (index bas\u00E9 sur 1)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "current-step",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation du wizard"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "stepClick",
+                "name": "stepClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis lors du clic sur une \u00E9tape ant\u00E9rieure"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setStep": {
+                "complexType": {
+                    "signature": "(step: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "step",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9thode publique pour d\u00E9finir une step au wizard",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "slotChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wizardItemClick",
+                "method": "handleStepClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=spw-wizard.js.map

package/dist/collection/components/spw-wizard/spw-wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-wizard.js","sourceRoot":"","sources":["../../../src/components/spw-wizard/spw-wizard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Listen, Event, EventEmitter, Host, Method, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-wizard',\n  styleUrl: 'spw-wizard.scss',\n  shadow: true,\n})\nexport class SpwWizard {\n  @Element() el: HTMLSpwWizardElement;\n  /** Étape actuellement active (index basé sur 1) */\n  @Prop({ mutable: true }) currentStep: number = 1;\n  /** Orientation du wizard */\n  @Prop() variant?: 'horizontal' | 'vertical' = 'horizontal';\n  /** Événement émis lors du clic sur une étape antérieure */\n  @Event() stepClick: EventEmitter<number>;\n\n  componentWillLoad() {\n    this.updateStepsState();\n  }\n\n  @Listen('slotchange')\n  slotChanged() {\n    this.updateStepsState();\n  }\n\n  /** Méthode publique pour définir une step au wizard */\n  @Method()\n  async setStep(step: number) {\n    this.currentStep = step;\n    this.updateStepsState();\n    this.scrollToWizard();\n  }\n\n  @Listen('wizardItemClick')\n  handleStepClick(event: CustomEvent<number>) {\n    const clickedStep = event.detail;\n    if (clickedStep < this.currentStep) {\n      this.currentStep = clickedStep;\n      this.updateStepsState();\n      this.stepClick.emit(clickedStep);\n      this.scrollToWizard();\n    }\n  }\n\n  private scrollToWizard() {\n    const host = this.el.shadowRoot?.host as HTMLElement;\n    const scrollTarget = host?.parentElement || this.el;\n    if (scrollTarget) {\n      scrollTarget.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n  }\n\n  private updateStepsState() {\n    requestAnimationFrame(() => {\n      const items = this.el.querySelectorAll('spw-wizard-item');\n\n      items.forEach((item, index) => {\n        const stepNumber = index + 1;\n\n        if (stepNumber > this.currentStep && item.hasAttribute('status')) {\n          item.removeAttribute('status');\n        }\n\n        if (!item.hasAttribute('status')) {\n          if (stepNumber < this.currentStep) {\n            item.setAttribute('state', 'completed');\n          } else if (stepNumber === this.currentStep) {\n            item.setAttribute('state', 'active');\n          } else {\n            item.setAttribute('state', 'inactive');\n          }\n        }\n\n        item.setAttribute('variant', this.variant);\n        item.setAttribute('step-number', stepNumber.toString());\n        item.setAttribute('is-last', (index === items.length - 1).toString());\n        item.setAttribute('is-clickable', (stepNumber < this.currentStep).toString());\n        item.setAttribute('is-current', (stepNumber === this.currentStep).toString());\n        item.setAttribute('is-before-current', (stepNumber < this.currentStep).toString());\n        item.setAttribute('is-after-current', (stepNumber > this.currentStep).toString());\n      });\n    });\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-wizard': true,\n      [`spw-wizard--${this.variant}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.elementClass}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/stories/components/spw-date-picker/spw-date-picker.stories.js

@@ -22,7 +22,7 @@ const meta = {
 
 Composant de sélection de date avec options simples et avancées, incluant gestion de plages.
 
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/xxx/yyy)
+[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/314e53-choix-de-date-date-picker)
         `,
             },
         },
@@ -72,4 +72,49 @@ Disabled.args = {
     placeholder: 'Non disponible',
     disabled: true,
 };
+// Range template (nécessite deux datepickers)
+const RangeTemplate = args => {
+    const container = document.createElement('div');
+    // Créer le datepicker de début
+    const startPicker = document.createElement(elementTag);
+    startPicker.setAttribute('range', 'true');
+    startPicker.setAttribute('range-id', args.rangeId || '1');
+    startPicker.setAttribute('is-start', 'true');
+    startPicker.setAttribute('label', args.startLabel || 'Date de début');
+    startPicker.setAttribute('placeholder', args.startPlaceholder || 'Choisissez une date de début');
+    if (args.startValue)
+        startPicker.setAttribute('value', args.startValue);
+    startPicker.classList.add('mb-3');
+    // Créer le datepicker de fin
+    const endPicker = document.createElement(elementTag);
+    endPicker.setAttribute('range', 'true');
+    endPicker.setAttribute('range-id', args.rangeId || '1');
+    endPicker.setAttribute('label', args.endLabel || 'Date de fin');
+    endPicker.setAttribute('placeholder', args.endPlaceholder || 'Choisissez une date de fin');
+    if (args.endValue)
+        endPicker.setAttribute('value', args.endValue);
+    container.appendChild(startPicker);
+    container.appendChild(endPicker);
+    return container;
+};
+// DateRange
+export const DateRange = RangeTemplate.bind({});
+DateRange.args = {
+    rangeId: 'range-story-1',
+    startLabel: 'Date de début',
+    startPlaceholder: 'Choisissez une date de début',
+    endLabel: 'Date de fin',
+    endPlaceholder: 'Choisissez une date de fin',
+};
+// DateRangeWithValues
+export const DateRangeWithValues = RangeTemplate.bind({});
+DateRangeWithValues.args = {
+    rangeId: 'range-story-2',
+    startLabel: 'Date de début',
+    startPlaceholder: 'Choisissez une date de début',
+    startValue: '2025-06-01',
+    endLabel: 'Date de fin',
+    endPlaceholder: 'Choisissez une date de fin',
+    endValue: '2025-06-15',
+};
 //# sourceMappingURL=spw-date-picker.stories.js.map