@ds-autonomie/web-components 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @ds-autonomie/web-components
 
+## 1.2.0
+
+### Minor Changes
+
+- b63aa59: `stepper`, `step`: implémentation des composants stepper et step
+
+### Patch Changes
+
+- Updated dependencies [b63aa59]
+  - @ds-autonomie/assets@1.1.1
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/chunks/chunk.2WSMYCPC.js

@@ -0,0 +1,24 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/stepper/stepper.styles.ts
+import { css } from "lit";
+var stepper_styles_default = css`
+  ${component_styles_default}
+
+  .stepper {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    list-style-type: none;
+  }
+
+  .slot_steps {
+    display: none;
+  }
+`;
+
+export {
+  stepper_styles_default
+};

package/dist/chunks/{chunk.T7JSALXE.js → chunk.3HI3T5R2.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/chunk.3I2KXA35.js

@@ -0,0 +1,126 @@
+import {
+  step_styles_default
+} from "./chunk.YRBTSDUN.js";
+import {
+  getStepIcon
+} from "./chunk.CCTWXABH.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.NBPVVWJU.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/step/step.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAStep = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "title",
+      "content"
+    );
+    this.localize = new LocalizeController(this);
+    this.status = "default";
+    this.title = "";
+    this.content = "";
+  }
+  getStepLabel() {
+    switch (this.status) {
+      case "default":
+        return this.localize.term("step");
+      case "complete":
+        return this.localize.term("stepCompleted");
+      case "in-progress":
+        return this.localize.term("stepInProgress");
+      case "active":
+        return this.localize.term("stepActive");
+      case "error":
+        return this.localize.term("stepError");
+    }
+    return this.localize.term("step");
+  }
+  render() {
+    const hasTitleSlot = this.hasSlotController.test("title");
+    const hasContentSlot = this.hasSlotController.test("content");
+    const hasTitle = this.title ? true : !!hasTitleSlot;
+    const hasContent = this.content ? true : !!hasContentSlot;
+    const stepIconName = this.status !== "in-progress" && this.status !== "active" ? getStepIcon(this.status) : void 0;
+    const stepLabel = this.getStepLabel();
+    return html`
+      <div
+        role="listitem"
+        part="step"
+        class=${classMap({
+      "step-container": true,
+      "step-container--has-title": hasTitle,
+      "step-container--has-content": hasContent
+    })}
+      >
+        <div
+          class=${classMap({
+      step: true,
+      "step--default": this.status === "default",
+      "step--complete": this.status === "complete",
+      "step--in-progress": this.status === "in-progress" || this.status === "active",
+      "step--error": this.status === "error"
+    })}
+        >
+          ${this.status === "in-progress" || this.status === "active" ? html`<span class="step-icon--in-progress"
+                ><dsa-visually-hidden>${stepLabel}</dsa-visually-hidden></span
+              >` : html`<dsa-icon
+                class="step-icon"
+                name="${stepIconName}"
+                label=${stepLabel}
+              ></dsa-icon>`}
+        </div>
+
+        ${this.index !== void 0 ? html`
+              <p class="step-index">
+                ${this.localize.term("step")} ${this.index + 1}
+              </p>
+            ` : html``}
+
+        <div class="step-title-container">
+          <slot
+            name="title"
+            class="step-title"
+            aria-hidden=${hasTitle ? "false" : "true"}
+            >${this.title}</slot
+          >
+          <slot name="tooltip" class="step-tooltip"></slot>
+        </div>
+        <slot name="content" class="step-content">${this.content}</slot>
+      </div>
+    `;
+  }
+};
+DSAStep.styles = step_styles_default;
+__decorateClass([
+  property()
+], DSAStep.prototype, "status", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "title", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "content", 2);
+__decorateClass([
+  property()
+], DSAStep.prototype, "index", 2);
+DSAStep = __decorateClass([
+  customElement("dsa-step")
+], DSAStep);
+
+export {
+  DSAStep
+};

package/dist/chunks/{chunk.NOEQVLAW.js → chunk.4DWONP4W.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.2DGAEK66.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.LSKBY2HF.js → chunk.5BTJP6HC.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.NKPNQBLW.js → chunk.AFAQWHMU.js}

@@ -1,12 +1,12 @@
-import {
-  DSATreeItem
-} from "./chunk.NBQ3AEK6.js";
 import {
   tree_styles_default
 } from "./chunk.73T7TU6S.js";
+import {
+  DSATreeItem
+} from "./chunk.MDFIMRCC.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.4MC32HP7.js → chunk.B4O7IAPL.js}

@@ -1,6 +1,6 @@
 import {
   DSASelect
-} from "./chunk.GJCVGGCP.js";
+} from "./chunk.JJ3GF7YP.js";
 import {
   frenchFlag,
   frenchNumberPrefix,

package/dist/chunks/chunk.CCTWXABH.js

@@ -0,0 +1,13 @@
+// src/components/step/step.utils.ts
+var stepIcons = {
+  default: "",
+  complete: "check",
+  error: "error_outline"
+};
+function getStepIcon(status) {
+  return stepIcons[status];
+}
+
+export {
+  getStepIcon
+};

package/dist/chunks/{chunk.VIULAG23.js → chunk.DOMRNQHQ.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.7EWUWW3E.js → chunk.FHGXKQDW.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.AYXPVAYS.js → chunk.FKIKQX6B.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.V6V7AGDB.js → chunk.GRV3MK3D.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.L6LQN6AI.js → chunk.IJL7YMFL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.GJCVGGCP.js → chunk.JJ3GF7YP.js}

@@ -29,7 +29,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.F4XMSVNF.js → chunk.JLMY5OVR.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.U5KRBVRP.js → chunk.K6YLMID4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.ST2QYN4S.js → chunk.KOZIER6A.js}

@@ -27,7 +27,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.ILUHEJYG.js → chunk.LUHEO6AS.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   alert_styles_default
 } from "./chunk.Z6TBD2AC.js";

package/dist/chunks/{chunk.NBQ3AEK6.js → chunk.MDFIMRCC.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.IQ7SDYSC.js → chunk.NBPVVWJU.js}

@@ -36,6 +36,11 @@ var translation = {
   slideNum: (slide) => `Diapositive ${slide}`,
   toggleColorFormat: "Changer le format de couleur",
   noMatchFound: "Aucune correspondance trouv\xE9e",
+  step: "\xC9tape",
+  stepActive: "\xC9tape active",
+  stepCompleted: "\xC9tape valid\xE9e",
+  stepInProgress: "\xC9tape en cours",
+  stepError: "\xC9tape en erreur",
   // countries
   fr_FR: "France",
   fr_GP: "Guadeloupe",
@@ -86,6 +91,11 @@ var translation2 = {
   slideNum: (slide) => `Slide ${slide}`,
   toggleColorFormat: "Toggle color format",
   noMatchFound: "No match found",
+  step: "Step",
+  stepActive: "Active step",
+  stepCompleted: "Step completed",
+  stepInProgress: "Step in progress",
+  stepError: "Step in error",
   // countries
   fr_FR: "France",
   fr_GP: "Guadeloupe",

package/dist/chunks/{chunk.RSJYKNXT.js → chunk.NQU3YD5L.js}

@@ -27,7 +27,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.6BJBVSW4.js → chunk.OGQBKAFT.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.CBMFAOZI.js → chunk.ORSUTGLR.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.R37CT3PN.js → chunk.OXSDZ5LQ.js}

@@ -26,7 +26,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.DFTZEFHF.js → chunk.P2AJBSND.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.FIGO7UV2.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/chunk.QSNJ4FV6.js

@@ -0,0 +1,54 @@
+import {
+  stepper_styles_default
+} from "./chunk.2WSMYCPC.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/stepper/stepper.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var STEP_TAG = "dsa-step";
+var DSAStepper = class extends ShoelaceElement {
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  // Gets an array of all <dsa-step> elements
+  getAllSteps() {
+    return [...this.querySelectorAll(STEP_TAG)];
+  }
+  handleDefaultSlotChange() {
+    const allSteps = this.getAllSteps();
+    if (customElements.get(STEP_TAG)) {
+      if (this.hideLabel) {
+        return;
+      }
+      allSteps.forEach((step, index) => {
+        step.index = index;
+      });
+    } else {
+      customElements.whenDefined(STEP_TAG).then(() => this.handleDefaultSlotChange());
+    }
+  }
+  render() {
+    return html`
+      <div role="list" class="stepper">
+        <slot @slotchange=${this.handleDefaultSlotChange}> </slot>
+      </div>
+    `;
+  }
+};
+DSAStepper.styles = stepper_styles_default;
+__decorateClass([
+  property()
+], DSAStepper.prototype, "hideLabel", 2);
+DSAStepper = __decorateClass([
+  customElement("dsa-stepper")
+], DSAStepper);
+
+export {
+  DSAStepper
+};

package/dist/chunks/{chunk.DZWH4V6H.js → chunk.RDVFMQLV.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.QSPKKO3T.js → chunk.TINRLVWL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.IGYXUK7A.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.HEOTAAPU.js → chunk.WG5VRMQG.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.W74UQSZJ.js → chunk.XJPCULMC.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/chunk.YRBTSDUN.js

@@ -0,0 +1,134 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/step/step.styles.ts
+import { css } from "lit";
+var step_styles_default = css`
+  ${component_styles_default}
+
+  :host(:first-of-type) .step:before {
+    content: unset;
+  }
+
+  .step-container {
+    display: grid;
+    position: relative;
+    align-content: start;
+    grid-template:
+      'icon .'
+      'index .'
+      'title title'
+      'content content' 1fr
+      / auto minmax(0, 1fr);
+    padding-right: var(--dsa-spacing-24);
+  }
+
+  .step-container .step-title-container {
+    grid-area: title;
+    display: none;
+  }
+
+  .step-container--has-title .step-title-container {
+    display: inline-flex;
+  }
+
+  .step-title {
+    color: var(--dsa-wc-stepper-color-title);
+    font: var(--dsa-wc-stepper-font-title);
+  }
+
+  .step-tooltip {
+    display: inline-block;
+    margin-left: auto;
+    position: relative;
+    top: 2px;
+  }
+
+  .step:before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 1.4px;
+    background-color: var(--dsa-wc-stepper-color-progress-default);
+    right: calc(100% + var(--dsa-spacing-4));
+    width: calc(100% - calc(var(--dsa-spacing-4) + var(--dsa-spacing-32)));
+    z-index: -1;
+  }
+
+  .step--complete:before {
+    background-color: var(--dsa-wc-stepper-color-progress-complete);
+  }
+
+  .step {
+    grid-area: icon;
+    height: var(--dsa-wc-stepper-icon-size);
+    width: var(--dsa-wc-stepper-icon-size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--dsa-radius-32);
+    border-width: var(--dsa-wc-stepper-icon-border-width);
+    border-style: var(--dsa-wc-stepper-icon-border-style);
+    margin-bottom: var(--dsa-spacing-16);
+  }
+
+  .step--default {
+    border-color: var(--dsa-wc-stepper-color-tag-blocked-base);
+  }
+
+  .step--complete {
+    border-color: var(--dsa-wc-stepper-color-tag-complete-base);
+    background-color: var(--dsa-wc-stepper-color-tag-complete-base);
+  }
+
+  .step--complete .step-icon {
+    color: var(--dsa-wc-stepper-color-tag-complete-on-base);
+  }
+
+  .step--error {
+    border-color: var(--dsa-wc-stepper-color-tag-error-base);
+    background-color: var(--dsa-wc-stepper-color-tag-error-base);
+  }
+
+  .step--error .step-icon {
+    color: var(--dsa-wc-stepper-color-tag-error-on-base);
+  }
+
+  .step--in-progress {
+    border-color: var(--dsa-wc-stepper-color-tag-in-progress-base);
+  }
+
+  .step-icon--in-progress {
+    height: var(--dsa-wc-stepper-icon-in-progress-size);
+    width: var(--dsa-wc-stepper-icon-in-progress-size);
+    background-color: var(--dsa-wc-stepper-color-tag-in-progress-base);
+    border-radius: var(--dsa-radius-8);
+  }
+
+  .step-container .step-content {
+    grid-area: content;
+    display: none;
+  }
+
+  .step-container--has-content .step-content {
+    display: inline-block;
+    margin: 0;
+    margin-top: var(--dsa-spacing-8);
+    color: var(--dsa-wc-stepper-color-content);
+    font: var(--dsa-wc-stepper-font-content);
+  }
+
+  .step-index {
+    grid-area: index;
+    margin: 0;
+    margin-bottom: var(--dsa-spacing-4);
+    text-transform: uppercase;
+    color: var(--dsa-wc-stepper-color-index);
+    font: var(--dsa-wc-stepper-font-index);
+  }
+`;
+
+export {
+  step_styles_default
+};

package/dist/chunks/{chunk.2CCKS3CP.js → chunk.ZXVIEHXI.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.S4ATPBQN.js";
 import {
   LocalizeController
-} from "./chunk.IQ7SDYSC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/components/accordion/accordion.js

@@ -1,11 +1,11 @@
 import {
   DSAAccordion
-} from "../../chunks/chunk.HEOTAAPU.js";
+} from "../../chunks/chunk.WG5VRMQG.js";
 import "../../chunks/chunk.LC54322H.js";
 import "../../chunks/chunk.B4BZKR24.js";
 import "../../chunks/chunk.2FK6USFR.js";
 import "../../chunks/chunk.V7RJROLH.js";
-import "../../chunks/chunk.IQ7SDYSC.js";
+import "../../chunks/chunk.NBPVVWJU.js";
 import "../../chunks/chunk.VRU3XH45.js";
 import "../../chunks/chunk.7J7CS3BK.js";
 import "../../chunks/chunk.23TOS4ZE.js";