@spw-ds/spw-stencil-library 1.2.2 → 1.2.4

package/dist/components/spw-wizard.js

@@ -0,0 +1,110 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const spwWizardCss = "/*! 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}";
+
+const SpwWizard$1 = /*@__PURE__*/ proxyCustomElement(class SpwWizard extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stepClick = createEvent(this, "stepClick", 7);
+        /** É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' }))));
+    }
+    get el() { return this; }
+    static get style() { return spwWizardCss; }
+}, [1, "spw-wizard", {
+        "currentStep": [1026, "current-step"],
+        "variant": [1],
+        "setStep": [64]
+    }, [[0, "slotchange", "slotChanged"], [0, "wizardItemClick", "handleStepClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-wizard"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-wizard":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwWizard$1);
+            }
+            break;
+    } });
+}
+
+const SpwWizard = SpwWizard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwWizard, defineCustomElement };
+//# sourceMappingURL=spw-wizard.js.map
+
+//# sourceMappingURL=spw-wizard.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-wizard.js","mappings":"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","names":["SpwWizard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-wizard/spw-wizard.scss?tag=spw-wizard&encapsulation=shadow","src/components/spw-wizard/spw-wizard.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-wizard {\n  display: flex;\n  gap: 0;\n\n  &--horizontal {\n    flex-direction: row;\n  }\n\n  &--vertical {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n}\n","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"],"version":3}