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

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

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

@@ -1 +1 @@
-{"version":3,"file":"spw-date-picker.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-date-picker/spw-date-picker.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAErC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;SAMV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,mBAAmB;AACnB,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,kBAAkB;IACzB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,YAAY;IACzB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,YAAY;CAClB,CAAC;AAEF,WAAW;AACX,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,gBAAgB;IAC7B,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-date-picker';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Choix de date (date picker)',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nComposant de sélection de date avec options simples et avancées, incluant gestion de plages.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/xxx/yyy)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\n// Stories template\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n  return element;\n};\n\n// Default\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Date de naissance',\n  placeholder: 'JJ/MM/AAAA',\n};\n\n// WithValue\nexport const WithValue = Template.bind({});\nWithValue.args = {\n  label: 'Date avec valeur',\n  value: '2025-06-30',\n  placeholder: 'JJ/MM/AAAA',\n};\n\n// WithConstraints\nexport const WithConstraints = Template.bind({});\nWithConstraints.args = {\n  label: 'Date limitée',\n  placeholder: 'JJ/MM/AAAA',\n  min: '2025-01-01',\n  max: '2025-12-31',\n};\n\n// Disabled\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Date désactivée',\n  placeholder: 'Non disponible',\n  disabled: true,\n};\n"]}
+{"version":3,"file":"spw-date-picker.stories.js","sourceRoot":"","sources":["../../../../src/stories/components/spw-date-picker/spw-date-picker.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAElE,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAErC,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,CAAC;AAE5E,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;SAMV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,mBAAmB;AACnB,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,kBAAkB;IACzB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,YAAY;CAC1B,CAAC;AAEF,kBAAkB;AAClB,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,YAAY;IACzB,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,YAAY;CAClB,CAAC;AAEF,WAAW;AACX,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,gBAAgB;IAC7B,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,8CAA8C;AAC9C,MAAM,aAAa,GAAY,IAAI,CAAC,EAAE;IACpC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAEhD,+BAA+B;IAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACvD,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC1C,WAAW,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,GAAG,CAAC,CAAC;IAC1D,WAAW,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAC7C,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,IAAI,eAAe,CAAC,CAAC;IACtE,WAAW,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,IAAI,8BAA8B,CAAC,CAAC;IACjG,IAAI,IAAI,CAAC,UAAU;QAAE,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACxE,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAElC,6BAA6B;IAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACrD,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,GAAG,CAAC,CAAC;IACxD,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,CAAC;IAChE,SAAS,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,IAAI,4BAA4B,CAAC,CAAC;IAC3F,IAAI,IAAI,CAAC,QAAQ;QAAE,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAEjC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,YAAY;AACZ,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,eAAe;IACxB,UAAU,EAAE,eAAe;IAC3B,gBAAgB,EAAE,8BAA8B;IAChD,QAAQ,EAAE,aAAa;IACvB,cAAc,EAAE,4BAA4B;CAC7C,CAAC;AAEF,sBAAsB;AACtB,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1D,mBAAmB,CAAC,IAAI,GAAG;IACzB,OAAO,EAAE,eAAe;IACxB,UAAU,EAAE,eAAe;IAC3B,gBAAgB,EAAE,8BAA8B;IAChD,UAAU,EAAE,YAAY;IACxB,QAAQ,EAAE,aAAa;IACvB,cAAc,EAAE,4BAA4B;IAC5C,QAAQ,EAAE,YAAY;CACvB,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-date-picker';\n\nconst argTypes = withComponentControls(componentsData, { tag: elementTag });\n\nconst meta: Meta = {\n  title: 'Composants/Choix de date (date picker)',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nComposant de sélection de date avec options simples et avancées, incluant gestion de plages.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/314e53-choix-de-date-date-picker)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\n// Stories template\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n  return element;\n};\n\n// Default\nexport const Default = Template.bind({});\nDefault.args = {\n  label: 'Date de naissance',\n  placeholder: 'JJ/MM/AAAA',\n};\n\n// WithValue\nexport const WithValue = Template.bind({});\nWithValue.args = {\n  label: 'Date avec valeur',\n  value: '2025-06-30',\n  placeholder: 'JJ/MM/AAAA',\n};\n\n// WithConstraints\nexport const WithConstraints = Template.bind({});\nWithConstraints.args = {\n  label: 'Date limitée',\n  placeholder: 'JJ/MM/AAAA',\n  min: '2025-01-01',\n  max: '2025-12-31',\n};\n\n// Disabled\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  label: 'Date désactivée',\n  placeholder: 'Non disponible',\n  disabled: true,\n};\n\n// Range template (nécessite deux datepickers)\nconst RangeTemplate: StoryFn = args => {\n  const container = document.createElement('div');\n\n  // Créer le datepicker de début\n  const startPicker = document.createElement(elementTag);\n  startPicker.setAttribute('range', 'true');\n  startPicker.setAttribute('range-id', args.rangeId || '1');\n  startPicker.setAttribute('is-start', 'true');\n  startPicker.setAttribute('label', args.startLabel || 'Date de début');\n  startPicker.setAttribute('placeholder', args.startPlaceholder || 'Choisissez une date de début');\n  if (args.startValue) startPicker.setAttribute('value', args.startValue);\n  startPicker.classList.add('mb-3');\n\n  // Créer le datepicker de fin\n  const endPicker = document.createElement(elementTag);\n  endPicker.setAttribute('range', 'true');\n  endPicker.setAttribute('range-id', args.rangeId || '1');\n  endPicker.setAttribute('label', args.endLabel || 'Date de fin');\n  endPicker.setAttribute('placeholder', args.endPlaceholder || 'Choisissez une date de fin');\n  if (args.endValue) endPicker.setAttribute('value', args.endValue);\n\n  container.appendChild(startPicker);\n  container.appendChild(endPicker);\n\n  return container;\n};\n\n// DateRange\nexport const DateRange = RangeTemplate.bind({});\nDateRange.args = {\n  rangeId: 'range-story-1',\n  startLabel: 'Date de début',\n  startPlaceholder: 'Choisissez une date de début',\n  endLabel: 'Date de fin',\n  endPlaceholder: 'Choisissez une date de fin',\n};\n\n// DateRangeWithValues\nexport const DateRangeWithValues = RangeTemplate.bind({});\nDateRangeWithValues.args = {\n  rangeId: 'range-story-2',\n  startLabel: 'Date de début',\n  startPlaceholder: 'Choisissez une date de début',\n  startValue: '2025-06-01',\n  endLabel: 'Date de fin',\n  endPlaceholder: 'Choisissez une date de fin',\n  endValue: '2025-06-15',\n};\n"]}

package/dist/collection/stories/organisms/spw-header/spw-header.stories.js

@@ -19,7 +19,7 @@ const meta = {
         docs: {
             description: {
                 component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="orange">En cours</spw-tag>
+<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
 
 Section supérieure d'une page, servant de conteneur pour les éléments de navigation et les informations importantes.
 

package/dist/collection/stories/organisms/spw-header/spw-header.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-header.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-header/spw-header.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,CAAC,uBAAuB,EAAE,4BAA4B,CAAC,CAAC;AAEjF,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;SAMV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,QAAQ;IAC3B,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA2C2B,QAAQ,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2C7D,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,eAAe;IAC1B,WAAW,EAAE,uBAAuB;CACrC,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-header';\n\nconst subComponentTags = ['spw-header-navigation', 'spw-header-navigation-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/En-tête de site (header)',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"orange\">En cours</spw-tag>\n\nSection supérieure d'une page, servant de conteneur pour les éléments de navigation et les informations importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n  return /* HTML */ `\n    <div slot=\"top-left\">\n      <spw-header-persona>\n        <option data-link=\"#\" selected value=\"citoyen\">Citoyen</option>\n        <option data-link=\"#\" value=\"entreprise\">Entreprise</option>\n        <option data-link=\"#\" value=\"pouvoirs-locaux\">Pouvoirs locaux</option>\n        <option data-link=\"#\" value=\"non-marchands\">Non-marchands</option>\n      </spw-header-persona>\n    </div>\n\n    <div slot=\"right\">\n      <spw-header-lang>\n        <option data-link=\"#\" selected value=\"fr\">Fr</option>\n        <option data-link=\"#\" value=\"nl\">Nl</option>\n        <option data-link=\"#\" value=\"en\">En</option>\n        <option data-link=\"#\" value=\"de\">De</option>\n      </spw-header-lang>\n    </div>\n\n    <div slot=\"search\">\n      <spw-search-field\n        class=\"mb-4\"\n        size=\"medium\"\n        name=\"search\"\n        items='[\n                    {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n                    {\"label\": \"Pomme\"},\n                    {\"label\": \"Poire\"},\n                    {\"label\": \"Cerise\"},\n                    {\"label\": \"Raisin\"}\n                  ]'\n        placeholder=\"Exemple : un mot-clé...\"\n      ></spw-search-field>\n      <h2 class=\"spw-ds-typography-heading-04 mb-4\">Suggestions de pages :</h2>\n      <spw-group orientation=\"vertical\">\n        <spw-link variant=\"tertiary\">Démarches</spw-link>\n        <spw-link variant=\"tertiary\">Réforme primes énergie</spw-link>\n        <spw-link variant=\"tertiary\">Jobs</spw-link>\n        <spw-link variant=\"tertiary\">Trafiroutes</spw-link>\n      </spw-group>\n    </div>\n\n    <spw-header-navigation>\n      <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n        <a href=\"#\">Rubrique 1</a>\n\n        <spw-header-navigation-dropdown>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique niveau 2</a>\n            <spw-header-navigation-dropdown>\n              <spw-header-navigation-item>\n                <a href=\"#\">Sous-rubrique niveau 3</a>\n              </spw-header-navigation-item>\n              <spw-header-navigation-item>\n                <a href=\"#\">Sous-rubrique niveau 3</a>\n              </spw-header-navigation-item>\n            </spw-header-navigation-dropdown>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n        </spw-header-navigation-dropdown>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 2</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 3</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 4</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 5</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 6</a>\n      </spw-header-navigation-item>\n    </spw-header-navigation>\n  `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContent(args);\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  isActive: false,\n  siteTitle: 'Titre du site',\n  borderColor: 'var(--spw-ds-primary)',\n};\n"]}
+{"version":3,"file":"spw-header.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-header/spw-header.stories.ts"],"names":[],"mappings":"AAAA,IAAI,cAAmB,CAAC;AAExB,IAAI,CAAC;IACH,cAAc,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC;AACpE,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,IAAI,CAAC,qEAAqE,CAAC,CAAC;IACpF,cAAc,GAAG,EAAE,CAAC;AACtB,CAAC;AAGD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnF,MAAM,UAAU,GAAG,YAAY,CAAC;AAEhC,MAAM,gBAAgB,GAAG,CAAC,uBAAuB,EAAE,4BAA4B,CAAC,CAAC;AAEjF,MAAM,QAAQ,mCACT,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAC1D,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC,CACrD,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,UAAU;IACrB,QAAQ;IACR,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE;;;;;;SAMV;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,SAAS,WAAW,CAAC,QAAQ;IAC3B,OAAO,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+CA2C2B,QAAQ,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2C7D,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAY,IAAI,CAAC,EAAE;IAC/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,qBAAqB,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC;IAClF,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAElE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,GAAa,CAAC,CAAC;QACxD,CAAC;aAAM,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,CAAC;QAChE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,eAAe;IAC1B,WAAW,EAAE,uBAAuB;CACrC,CAAC","sourcesContent":["let componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes, toKebabCase } from '@utils/utils';\n\nconst elementTag = 'spw-header';\n\nconst subComponentTags = ['spw-header-navigation', 'spw-header-navigation-item'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n};\n\nconst meta: Meta = {\n  title: 'Organismes/En-tête de site (header)',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nSection supérieure d'une page, servant de conteneur pour les éléments de navigation et les informations importantes.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/78fef5-en-tete-de-site-header)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction htmlContent(slotArgs) {\n  return /* HTML */ `\n    <div slot=\"top-left\">\n      <spw-header-persona>\n        <option data-link=\"#\" selected value=\"citoyen\">Citoyen</option>\n        <option data-link=\"#\" value=\"entreprise\">Entreprise</option>\n        <option data-link=\"#\" value=\"pouvoirs-locaux\">Pouvoirs locaux</option>\n        <option data-link=\"#\" value=\"non-marchands\">Non-marchands</option>\n      </spw-header-persona>\n    </div>\n\n    <div slot=\"right\">\n      <spw-header-lang>\n        <option data-link=\"#\" selected value=\"fr\">Fr</option>\n        <option data-link=\"#\" value=\"nl\">Nl</option>\n        <option data-link=\"#\" value=\"en\">En</option>\n        <option data-link=\"#\" value=\"de\">De</option>\n      </spw-header-lang>\n    </div>\n\n    <div slot=\"search\">\n      <spw-search-field\n        class=\"mb-4\"\n        size=\"medium\"\n        name=\"search\"\n        items='[\n                    {\"url\": \"http://google.com\", \"label\": \"Banane\"},\n                    {\"label\": \"Pomme\"},\n                    {\"label\": \"Poire\"},\n                    {\"label\": \"Cerise\"},\n                    {\"label\": \"Raisin\"}\n                  ]'\n        placeholder=\"Exemple : un mot-clé...\"\n      ></spw-search-field>\n      <h2 class=\"spw-ds-typography-heading-04 mb-4\">Suggestions de pages :</h2>\n      <spw-group orientation=\"vertical\">\n        <spw-link variant=\"tertiary\">Démarches</spw-link>\n        <spw-link variant=\"tertiary\">Réforme primes énergie</spw-link>\n        <spw-link variant=\"tertiary\">Jobs</spw-link>\n        <spw-link variant=\"tertiary\">Trafiroutes</spw-link>\n      </spw-group>\n    </div>\n\n    <spw-header-navigation>\n      <spw-header-navigation-item is-active=\"${slotArgs.isActive}\">\n        <a href=\"#\">Rubrique 1</a>\n\n        <spw-header-navigation-dropdown>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique niveau 2</a>\n            <spw-header-navigation-dropdown>\n              <spw-header-navigation-item>\n                <a href=\"#\">Sous-rubrique niveau 3</a>\n              </spw-header-navigation-item>\n              <spw-header-navigation-item>\n                <a href=\"#\">Sous-rubrique niveau 3</a>\n              </spw-header-navigation-item>\n            </spw-header-navigation-dropdown>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n          <spw-header-navigation-item>\n            <a href=\"#\">Sous-rubrique</a>\n          </spw-header-navigation-item>\n        </spw-header-navigation-dropdown>\n      </spw-header-navigation-item>\n\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 2</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 3</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 4</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 5</a>\n      </spw-header-navigation-item>\n      <spw-header-navigation-item>\n        <a href=\"#\">Rubrique 6</a>\n      </spw-header-navigation-item>\n    </spw-header-navigation>\n  `;\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      element.setAttribute(toKebabCase(key), val as string);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = htmlContent(args);\n\n  return element;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  isActive: false,\n  siteTitle: 'Titre du site',\n  borderColor: 'var(--spw-ds-primary)',\n};\n"]}

package/dist/collection/stories/organisms/spw-table/spw-table.stories.js

@@ -310,4 +310,123 @@ CompactTable.args = {
     </spw-table-body>
   `,
 };
+export const LoadingWithSkeleton = Template.bind({});
+LoadingWithSkeleton.args = {
+    isZebra: true,
+    innerHTML: `
+    <spw-table-head>
+      <spw-table-row>
+        <spw-table-header width="20" scope="col">
+          <spw-checkbox></spw-checkbox>
+        </spw-table-header>
+        <spw-table-header column-id="name" sortable scope="col">Nom</spw-table-header>
+        <spw-table-header column-id="age" sortable scope="col">Âge</spw-table-header>
+        <spw-table-header column-id="status" scope="col">Statut</spw-table-header>
+        <spw-table-header text-align="center" scope="col">Actions</spw-table-header>
+      </spw-table-row>
+    </spw-table-head>
+    <spw-table-body>
+      <spw-table-row>
+        <spw-table-cell width="20">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell width="40">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+      </spw-table-row>
+      <spw-table-row>
+        <spw-table-cell width="20">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell width="40">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+      </spw-table-row>
+      <spw-table-row>
+        <spw-table-cell width="20">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell width="40">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+      </spw-table-row>
+      <spw-table-row>
+        <spw-table-cell width="20">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell width="40">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+      </spw-table-row>
+      <spw-table-row>
+        <spw-table-cell width="20">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell>
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell width="40">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+        <spw-table-cell padding="small" width="10">
+          <spw-skeleton lines="1"></spw-skeleton>
+        </spw-table-cell>
+      </spw-table-row>
+    </spw-table-body>
+    <spw-table-footer>
+      <div slot="left">Chargement en cours...</div>
+      <div slot="center">
+        <spw-pagination class="spw-pagination" variant="numbers" total-items="30" items-per-page="10"></spw-pagination>
+      </div>
+      <div slot="right">
+        <spw-select placeholder="N°" name="mon-select-natif" size="medium">
+          <option selected value="10">10</option>
+          <option value="20">20</option>
+          <option value="30">30</option>
+          <option value="40">40</option>
+        </spw-select>
+        éléments par page
+      </div>
+    </spw-table-footer>
+  `,
+};
 //# sourceMappingURL=spw-table.stories.js.map

package/dist/collection/stories/organisms/spw-table/spw-table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spw-table.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-table/spw-table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes } from '@utils/utils';\n\nlet componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nconst elementTag = 'spw-table';\n\nconst subComponentTags = ['spw-table-body', 'spw-table-cell', 'spw-table-footer', 'spw-table-header', 'spw-table-head', 'spw-table-row'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n  innerHTML: { table: { disable: true } },\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Tableau',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nAffiche toutes les informations d’un ensemble de données.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/90a77b-tableau)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction camelToKebab(str: string) {\n  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      const kebabKey = camelToKebab(key);\n      element.setAttribute(kebabKey, val);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = args.innerHTML || '';\n  return element;\n};\n\nexport const Base: StoryFn = Template.bind({});\nBase.args = {\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header scope=\"col\">Header 1</spw-table-header>\n        <spw-table-header scope=\"col\">Header 2</spw-table-header>\n        <spw-table-header scope=\"col\">Header 3</spw-table-header>\n        <spw-table-header scope=\"col\">Header 4</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n  `,\n};\n\nexport const StickyTableWithMaxHeight: StoryFn = Template.bind({});\nStickyTableWithMaxHeight.args = {\n  maxHeight: '225',\n  minWidth: '800',\n  isSticky: true,\n  innerHTML: Base.args.innerHTML,\n};\n\nexport const ZebraTableWithSorting: StoryFn = Template.bind({});\nZebraTableWithSorting.args = {\n  isZebra: true,\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n        <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n        <spw-table-header column-id=\"city\" sortable scope=\"col\">Ville</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell>Zoé</spw-table-cell>\n        <spw-table-cell>28</spw-table-cell>\n        <spw-table-cell>Charleroi</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Arthur</spw-table-cell>\n        <spw-table-cell>35</spw-table-cell>\n        <spw-table-cell>Namur</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Micheline</spw-table-cell>\n        <spw-table-cell>17</spw-table-cell>\n        <spw-table-cell>Liège</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>André</spw-table-cell>\n        <spw-table-cell>84</spw-table-cell>\n        <spw-table-cell>Tournai</spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n  `,\n};\n\nexport const TableWithActionsAndTags: StoryFn = Template.bind({});\nTableWithActionsAndTags.args = {\n  isZebra: true,\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header width=\"20\" scope=\"col\">\n          <spw-checkbox></spw-checkbox>\n        </spw-table-header>\n        <spw-table-header tooltip-title=\"Information\" tooltip-text=\"Ceci est une phrase d'exemple\" column-id=\"name\" sortable scope=\"col\">\n          Nom\n          <spw-dropdown slot=\"filters\" content-width=\"360\" direction=\"bottom\">\n            <spw-icon icon=\"fa-filter\">\n              <div slot=\"dropdownContent\">\n                <h3 class=\"spw-ds-typography-heading-03\">Filtrer la colonne nom</h3>\n                <form>\n                  <spw-text-field\n                    required\n                    size=\"small\"\n                    max-length=\"100\"\n                    min-length=\"3\"\n                    label=\"Champ texte\"\n                    type=\"text\"\n                    placeholder=\"Entrez un texte\"\n                    name=\"firstname\"\n                    class=\"mb-2\"\n                  ></spw-text-field>\n                  <spw-custom-select\n                    label=\"Mon label\"\n                    placeholder=\"Sélectionnez une option\"\n                    name=\"mon-super-select\"\n                    required=\"true\"\n                    multiple=\"true\"\n                    id=\"mon-custom-select-dynamique\"\n                    is-search=\"true\"\n                    class=\"mb-3\"\n                  ></spw-custom-select>\n                  <spw-group label=\"Des choix horizontaux\" required=\"true\" type=\"radios\" orientation=\"horizontal\">\n                    <spw-radio name=\"radio1\" value=\"option1\">Un input radio</spw-radio>\n                    <spw-radio name=\"radio1\" value=\"option2\">Un input radio</spw-radio>\n                  </spw-group>\n                </form>\n                <spw-group orientation=\"vertical\" is-full-width>\n                  <spw-button class=\"mt-3\" is-full-width variant=\"primary\" size=\"small\">Appliquer</spw-button>\n                </spw-group>\n              </div>\n            </spw-icon>\n          </spw-dropdown>\n        </spw-table-header>\n        <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n        <spw-table-header column-id=\"status\" sortable scope=\"col\">Statut</spw-table-header>\n        <spw-table-header text-align=\"center\" scope=\"col\">Actions</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell width=\"20\"><spw-checkbox></spw-checkbox></spw-table-cell>\n        <spw-table-cell>Zoé</spw-table-cell>\n        <spw-table-cell>28</spw-table-cell>\n        <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <div class=\"d-flex\">\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-dropdown direction=\"left\">\n              <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n                <div slot=\"dropdownContent\">\n                  <spw-group orientation=\"vertical\" is-full-width>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n                  </spw-group>\n                </div>\n              </spw-button>\n            </spw-dropdown>\n          </div>\n        </spw-table-cell>\n      </spw-table-row>\n      <spw-table-row state=\"disabled\">\n        <spw-table-cell width=\"20\"><spw-checkbox disabled=\"true\"></spw-checkbox></spw-table-cell>\n        <spw-table-cell>Marie</spw-table-cell>\n        <spw-table-cell>22</spw-table-cell>\n        <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <div class=\"d-flex\">\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-dropdown direction=\"left\">\n              <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n                <div slot=\"dropdownContent\">\n                  <spw-group orientation=\"vertical\" is-full-width>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n                  </spw-group>\n                </div>\n              </spw-button>\n            </spw-dropdown>\n          </div>\n        </spw-table-cell>\n      </spw-table-row>\n      <spw-table-row state=\"selected\">\n        <spw-table-cell width=\"20\"><spw-checkbox checked=\"true\"></spw-checkbox></spw-table-cell>\n        <spw-table-cell>Thomas</spw-table-cell>\n        <spw-table-cell>37</spw-table-cell>\n        <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <div class=\"d-flex\">\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-dropdown direction=\"left\">\n              <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n                <div slot=\"dropdownContent\">\n                  <spw-group orientation=\"vertical\" is-full-width>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n                  </spw-group>\n                </div>\n              </spw-button>\n            </spw-dropdown>\n          </div>\n        </spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n    <spw-table-footer>\n      <div slot=\"left\">1-10 sur 9999 éléments</div>\n      <div slot=\"center\">\n        <spw-pagination class=\"spw-pagination\" variant=\"numbers\" total-items=\"30\" items-per-page=\"10\"></spw-pagination>\n      </div>\n      <div slot=\"right\">\n        <spw-select placeholder=\"N°\" name=\"mon-select-natif\" size=\"medium\">\n          <option selected value=\"10\">10</option>\n          <option value=\"20\">20</option>\n          <option value=\"30\">30</option>\n          <option value=\"40\">40</option>\n        </spw-select>\n        éléments par page\n      </div>\n    </spw-table-footer>\n  `,\n};\n\nexport const CompactTable: StoryFn = Template.bind({});\nCompactTable.args = {\n  isZebra: true,\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header padding=\"small\" column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n        <spw-table-header padding=\"small\" column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n        <spw-table-header padding=\"small\" column-id=\"city\" sortable scope=\"col\">Ville</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell padding=\"small\">Zoé</spw-table-cell>\n        <spw-table-cell padding=\"small\">28</spw-table-cell>\n        <spw-table-cell padding=\"small\">Charleroi</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell padding=\"small\">Arthur</spw-table-cell>\n        <spw-table-cell padding=\"small\">35</spw-table-cell>\n        <spw-table-cell padding=\"small\">Namur</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell padding=\"small\">Micheline</spw-table-cell>\n        <spw-table-cell padding=\"small\">17</spw-table-cell>\n        <spw-table-cell padding=\"small\">Liège</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell padding=\"small\">André</spw-table-cell>\n        <spw-table-cell padding=\"small\">84</spw-table-cell>\n        <spw-table-cell padding=\"small\">Tournai</spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n  `,\n};\n"]}
+{"version":3,"file":"spw-table.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/spw-table/spw-table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { Meta, StoryFn } from '@storybook/web-components';\nimport { withComponentControls, extractArgTypes } from '@utils/utils';\n\nlet componentsData: any;\n\ntry {\n  componentsData = require('../../../../dist/components_json.json');\n} catch (error) {\n  console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');\n  componentsData = {};\n}\n\nconst elementTag = 'spw-table';\n\nconst subComponentTags = ['spw-table-body', 'spw-table-cell', 'spw-table-footer', 'spw-table-header', 'spw-table-head', 'spw-table-row'];\n\nconst argTypes = {\n  ...withComponentControls(componentsData, { tag: elementTag }),\n  ...extractArgTypes(componentsData, subComponentTags),\n  innerHTML: { table: { disable: true } },\n};\n\nconst meta: Meta = {\n  title: 'Organismes/Tableau',\n  component: elementTag,\n  argTypes,\n  tags: ['autodocs'],\n  parameters: {\n    docs: {\n      description: {\n        component: `\n<strong class=\"mr-2\">Statut du composant :</strong> <spw-tag size=\"small\" variant=\"green\">Prêt</spw-tag>\n\nAffiche toutes les informations d’un ensemble de données.\n\n[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/90a77b-tableau)\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\nfunction camelToKebab(str: string) {\n  return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);\n}\n\nconst Template: StoryFn = args => {\n  const element = document.createElement(elementTag);\n  const controls = withComponentControls(componentsData, { tag: elementTag }) || {};\n  const masterProps = controls.__realProps || Object.keys(controls);\n\n  Object.entries(args).forEach(([key, val]) => {\n    if (masterProps.includes(key)) {\n      const kebabKey = camelToKebab(key);\n      element.setAttribute(kebabKey, val);\n    } else if (key.startsWith('on')) {\n      element.addEventListener(key.substring(2).toLowerCase(), val);\n    }\n  });\n\n  element.innerHTML = args.innerHTML || '';\n  return element;\n};\n\nexport const Base: StoryFn = Template.bind({});\nBase.args = {\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header scope=\"col\">Header 1</spw-table-header>\n        <spw-table-header scope=\"col\">Header 2</spw-table-header>\n        <spw-table-header scope=\"col\">Header 3</spw-table-header>\n        <spw-table-header scope=\"col\">Header 4</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n        <spw-table-cell>Cellule</spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n  `,\n};\n\nexport const StickyTableWithMaxHeight: StoryFn = Template.bind({});\nStickyTableWithMaxHeight.args = {\n  maxHeight: '225',\n  minWidth: '800',\n  isSticky: true,\n  innerHTML: Base.args.innerHTML,\n};\n\nexport const ZebraTableWithSorting: StoryFn = Template.bind({});\nZebraTableWithSorting.args = {\n  isZebra: true,\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n        <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n        <spw-table-header column-id=\"city\" sortable scope=\"col\">Ville</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell>Zoé</spw-table-cell>\n        <spw-table-cell>28</spw-table-cell>\n        <spw-table-cell>Charleroi</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Arthur</spw-table-cell>\n        <spw-table-cell>35</spw-table-cell>\n        <spw-table-cell>Namur</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>Micheline</spw-table-cell>\n        <spw-table-cell>17</spw-table-cell>\n        <spw-table-cell>Liège</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell>André</spw-table-cell>\n        <spw-table-cell>84</spw-table-cell>\n        <spw-table-cell>Tournai</spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n  `,\n};\n\nexport const TableWithActionsAndTags: StoryFn = Template.bind({});\nTableWithActionsAndTags.args = {\n  isZebra: true,\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header width=\"20\" scope=\"col\">\n          <spw-checkbox></spw-checkbox>\n        </spw-table-header>\n        <spw-table-header tooltip-title=\"Information\" tooltip-text=\"Ceci est une phrase d'exemple\" column-id=\"name\" sortable scope=\"col\">\n          Nom\n          <spw-dropdown slot=\"filters\" content-width=\"360\" direction=\"bottom\">\n            <spw-icon icon=\"fa-filter\">\n              <div slot=\"dropdownContent\">\n                <h3 class=\"spw-ds-typography-heading-03\">Filtrer la colonne nom</h3>\n                <form>\n                  <spw-text-field\n                    required\n                    size=\"small\"\n                    max-length=\"100\"\n                    min-length=\"3\"\n                    label=\"Champ texte\"\n                    type=\"text\"\n                    placeholder=\"Entrez un texte\"\n                    name=\"firstname\"\n                    class=\"mb-2\"\n                  ></spw-text-field>\n                  <spw-custom-select\n                    label=\"Mon label\"\n                    placeholder=\"Sélectionnez une option\"\n                    name=\"mon-super-select\"\n                    required=\"true\"\n                    multiple=\"true\"\n                    id=\"mon-custom-select-dynamique\"\n                    is-search=\"true\"\n                    class=\"mb-3\"\n                  ></spw-custom-select>\n                  <spw-group label=\"Des choix horizontaux\" required=\"true\" type=\"radios\" orientation=\"horizontal\">\n                    <spw-radio name=\"radio1\" value=\"option1\">Un input radio</spw-radio>\n                    <spw-radio name=\"radio1\" value=\"option2\">Un input radio</spw-radio>\n                  </spw-group>\n                </form>\n                <spw-group orientation=\"vertical\" is-full-width>\n                  <spw-button class=\"mt-3\" is-full-width variant=\"primary\" size=\"small\">Appliquer</spw-button>\n                </spw-group>\n              </div>\n            </spw-icon>\n          </spw-dropdown>\n        </spw-table-header>\n        <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n        <spw-table-header column-id=\"status\" sortable scope=\"col\">Statut</spw-table-header>\n        <spw-table-header text-align=\"center\" scope=\"col\">Actions</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell width=\"20\"><spw-checkbox></spw-checkbox></spw-table-cell>\n        <spw-table-cell>Zoé</spw-table-cell>\n        <spw-table-cell>28</spw-table-cell>\n        <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <div class=\"d-flex\">\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-dropdown direction=\"left\">\n              <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n                <div slot=\"dropdownContent\">\n                  <spw-group orientation=\"vertical\" is-full-width>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n                  </spw-group>\n                </div>\n              </spw-button>\n            </spw-dropdown>\n          </div>\n        </spw-table-cell>\n      </spw-table-row>\n      <spw-table-row state=\"disabled\">\n        <spw-table-cell width=\"20\"><spw-checkbox disabled=\"true\"></spw-checkbox></spw-table-cell>\n        <spw-table-cell>Marie</spw-table-cell>\n        <spw-table-cell>22</spw-table-cell>\n        <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <div class=\"d-flex\">\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-dropdown direction=\"left\">\n              <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n                <div slot=\"dropdownContent\">\n                  <spw-group orientation=\"vertical\" is-full-width>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n                  </spw-group>\n                </div>\n              </spw-button>\n            </spw-dropdown>\n          </div>\n        </spw-table-cell>\n      </spw-table-row>\n      <spw-table-row state=\"selected\">\n        <spw-table-cell width=\"20\"><spw-checkbox checked=\"true\"></spw-checkbox></spw-table-cell>\n        <spw-table-cell>Thomas</spw-table-cell>\n        <spw-table-cell>37</spw-table-cell>\n        <spw-table-cell width=\"40\"><spw-tag size=\"small\" variant=\"green\">Validé</spw-tag></spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <div class=\"d-flex\">\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-trash\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-button size=\"small\" variant=\"secondary\" icon=\"fa-edit\" is-icon-only=\"true\" class=\"mx-1\"></spw-button>\n            <spw-dropdown direction=\"left\">\n              <spw-button icon=\"fa-ellipsis-vertical\" is-icon-only=\"true\" size=\"small\" variant=\"secondary\" class=\"mx-1\">\n                <div slot=\"dropdownContent\">\n                  <spw-group orientation=\"vertical\" is-full-width>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Modifier</spw-button>\n                    <spw-button is-full-width variant=\"secondary\" size=\"small\">Supprimer</spw-button>\n                  </spw-group>\n                </div>\n              </spw-button>\n            </spw-dropdown>\n          </div>\n        </spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n    <spw-table-footer>\n      <div slot=\"left\">1-10 sur 9999 éléments</div>\n      <div slot=\"center\">\n        <spw-pagination class=\"spw-pagination\" variant=\"numbers\" total-items=\"30\" items-per-page=\"10\"></spw-pagination>\n      </div>\n      <div slot=\"right\">\n        <spw-select placeholder=\"N°\" name=\"mon-select-natif\" size=\"medium\">\n          <option selected value=\"10\">10</option>\n          <option value=\"20\">20</option>\n          <option value=\"30\">30</option>\n          <option value=\"40\">40</option>\n        </spw-select>\n        éléments par page\n      </div>\n    </spw-table-footer>\n  `,\n};\n\nexport const CompactTable: StoryFn = Template.bind({});\nCompactTable.args = {\n  isZebra: true,\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header padding=\"small\" column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n        <spw-table-header padding=\"small\" column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n        <spw-table-header padding=\"small\" column-id=\"city\" sortable scope=\"col\">Ville</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell padding=\"small\">Zoé</spw-table-cell>\n        <spw-table-cell padding=\"small\">28</spw-table-cell>\n        <spw-table-cell padding=\"small\">Charleroi</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell padding=\"small\">Arthur</spw-table-cell>\n        <spw-table-cell padding=\"small\">35</spw-table-cell>\n        <spw-table-cell padding=\"small\">Namur</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell padding=\"small\">Micheline</spw-table-cell>\n        <spw-table-cell padding=\"small\">17</spw-table-cell>\n        <spw-table-cell padding=\"small\">Liège</spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell padding=\"small\">André</spw-table-cell>\n        <spw-table-cell padding=\"small\">84</spw-table-cell>\n        <spw-table-cell padding=\"small\">Tournai</spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n  `,\n};\n\nexport const LoadingWithSkeleton: StoryFn = Template.bind({});\nLoadingWithSkeleton.args = {\n  isZebra: true,\n  innerHTML: `\n    <spw-table-head>\n      <spw-table-row>\n        <spw-table-header width=\"20\" scope=\"col\">\n          <spw-checkbox></spw-checkbox>\n        </spw-table-header>\n        <spw-table-header column-id=\"name\" sortable scope=\"col\">Nom</spw-table-header>\n        <spw-table-header column-id=\"age\" sortable scope=\"col\">Âge</spw-table-header>\n        <spw-table-header column-id=\"status\" scope=\"col\">Statut</spw-table-header>\n        <spw-table-header text-align=\"center\" scope=\"col\">Actions</spw-table-header>\n      </spw-table-row>\n    </spw-table-head>\n    <spw-table-body>\n      <spw-table-row>\n        <spw-table-cell width=\"20\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell width=\"40\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell width=\"20\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell width=\"40\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell width=\"20\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell width=\"40\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell width=\"20\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell width=\"40\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n      </spw-table-row>\n      <spw-table-row>\n        <spw-table-cell width=\"20\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell>\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell width=\"40\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n        <spw-table-cell padding=\"small\" width=\"10\">\n          <spw-skeleton lines=\"1\"></spw-skeleton>\n        </spw-table-cell>\n      </spw-table-row>\n    </spw-table-body>\n    <spw-table-footer>\n      <div slot=\"left\">Chargement en cours...</div>\n      <div slot=\"center\">\n        <spw-pagination class=\"spw-pagination\" variant=\"numbers\" total-items=\"30\" items-per-page=\"10\"></spw-pagination>\n      </div>\n      <div slot=\"right\">\n        <spw-select placeholder=\"N°\" name=\"mon-select-natif\" size=\"medium\">\n          <option selected value=\"10\">10</option>\n          <option value=\"20\">20</option>\n          <option value=\"30\">30</option>\n          <option value=\"40\">40</option>\n        </spw-select>\n        éléments par page\n      </div>\n    </spw-table-footer>\n  `,\n};\n"]}