@ds-autonomie/web-components 2.4.1 → 2.5.1

package/cdn/chunks/chunk.BDPH2MRN.js

@@ -0,0 +1,234 @@
+import {
+  card_nav_accordion_styles_default
+} from "./chunk.6CVNT3XU.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.UBKKXGSV.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.2WRFDMKN.js";
+import {
+  LocalizeController
+} from "./chunk.BMQ5WSY7.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  e as e2
+} from "./chunk.IKHG7XGO.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/card-nav-accordion/card-nav-accordion.ts
+var DSACardNavAccordion = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(this, "summary");
+    this.open = false;
+    this.role = "listitem";
+  }
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    this.body.style.height = this.open ? "auto" : "0";
+  }
+  handleSummaryClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+    this.headerButton.focus();
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      const slShow = this.emit("dsa-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      const { keyframes, options } = getAnimation(this, "accordion.show", {
+        dir: this.localize.dir()
+      });
+      await animateTo(
+        this.body,
+        shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+        options
+      );
+      this.body.style.height = "auto";
+      this.emit("dsa-after-show");
+    } else {
+      const slHide = this.emit("dsa-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "accordion.hide", {
+        dir: this.localize.dir()
+      });
+      await animateTo(
+        this.body,
+        shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+        options
+      );
+      this.body.hidden = true;
+      this.body.style.height = "auto";
+      this.emit("dsa-after-hide");
+    }
+  }
+  /** Shows the accordion. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return await waitForEvent(this, "dsa-after-show");
+  }
+  /** Hides the accordion */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return await waitForEvent(this, "dsa-after-hide");
+  }
+  render() {
+    if (!this.summary && !this.hasSlotController.test("summary")) {
+      a11yWarning(
+        "<dsa-card-nav-accordion> requires a summary attribute or a summary slot for accessibility"
+      );
+    }
+    return x`
+      <div
+        part="base"
+        class=${e2({
+      "card-nav-accordion": true,
+      "card-nav-accordion--open": this.open,
+      "card-nav-accordion--chevron": true
+    })}
+      >
+        <div part="header" id="header" class="card-nav-accordion__header">
+          <span
+            role="button"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-controls="content"
+            @click=${this.handleSummaryClick}
+            @keydown=${this.handleSummaryKeyDown}
+            class="card-nav-accordion__header-button"
+            tabindex="0"
+          >
+            <slot name="summary" class="card-nav-accordion__summary"
+              >${this.summary}</slot
+            >
+
+            <span part="summary-icon" class="card-nav-accordion__summary-icon">
+              <dsa-icon
+                class="card-nav-accordion__expand-icon"
+                name="expand_more"
+                library="system"
+              ></dsa-icon>
+            </span>
+          </span>
+        </div>
+
+        <div
+          class="card-nav-accordion__body"
+          role="list"
+          aria-labelledby="header"
+        >
+          <slot
+            part="content"
+            id="content"
+            class="card-nav-accordion__content"
+          ></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+DSACardNavAccordion.styles = card_nav_accordion_styles_default;
+__decorateClass([
+  e(".card-nav-accordion")
+], DSACardNavAccordion.prototype, "accordion", 2);
+__decorateClass([
+  e(".card-nav-accordion__header-button")
+], DSACardNavAccordion.prototype, "headerButton", 2);
+__decorateClass([
+  e(".card-nav-accordion__body")
+], DSACardNavAccordion.prototype, "body", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSACardNavAccordion.prototype, "open", 2);
+__decorateClass([
+  n()
+], DSACardNavAccordion.prototype, "summary", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSACardNavAccordion.prototype, "role", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSACardNavAccordion.prototype, "handleOpenChange", 1);
+DSACardNavAccordion = __decorateClass([
+  t("dsa-card-nav-accordion")
+], DSACardNavAccordion);
+setDefaultAnimation("accordion.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("accordion.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  DSACardNavAccordion
+};

package/cdn/chunks/{chunk.JO52YCNJ.js → chunk.BKSVKEYX.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.DTSCRQ4P.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.VARBZAJP.js → chunk.BMQ5WSY7.js}

@@ -91,6 +91,7 @@ var translation = {
   minutes: (value) => `${value} Minute${Number(value) > 1 ? "s" : ""}`,
   seconds: (value) => `${value} Seconde${Number(value) > 1 ? "s" : ""}`,
   milliseconds: (value) => `${value} Milliseconde${Number(value) > 1 ? "s" : ""}`,
+  selectedTime: "Heure s\xE9lectionn\xE9e :",
   day: "Jour",
   month: "Mois",
   year: "Ann\xE9e",
@@ -253,6 +254,7 @@ var translation2 = {
   minutes: (value) => `${value} Minute${Number(value) > 1 ? "s" : ""}`,
   seconds: (value) => `${value} Second${Number(value) > 1 ? "s" : ""}`,
   milliseconds: (value) => `${value} Millisecond${Number(value) > 1 ? "s" : ""}`,
+  selectedTime: "Selected time :",
   day: "Day",
   month: "Month",
   year: "Year",

package/cdn/chunks/{chunk.MCSZ2F65.js → chunk.BQ3SI4TM.js}

@@ -14,7 +14,7 @@ import {
 } from "./chunk.VIVOXZF6.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.5UVKMYSG.js → chunk.BQX4GGIU.js}

@@ -154,18 +154,24 @@ var DSACheckboxGroup = class extends ShoelaceElement {
     }
   }
   handleSlotChange() {
-    const allCheckboxes = this.getAllCheckboxes();
-    allCheckboxes.forEach((checkbox) => {
-      checkbox.checked = this.value.includes(checkbox.value);
-      checkbox.parentDisabled = this.disabled;
-      checkbox.parentReadonly = this.readonly;
-    });
-    this.hasCheckboxButtons = allCheckboxes.some(
-      (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
-    );
-    this.hasCheckboxCards = allCheckboxes.some(
-      (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-card"
-    );
+    if (customElements.get("dsa-checkbox") || customElements.get("dsa-checkbox-button") || customElements.get("dsa-checkbox-card")) {
+      const allCheckboxes = this.getAllCheckboxes();
+      allCheckboxes.forEach((checkbox) => {
+        checkbox.checked = this.value.includes(checkbox.value);
+        checkbox.parentDisabled = this.disabled;
+        checkbox.parentReadonly = this.readonly;
+      });
+      this.hasCheckboxButtons = allCheckboxes.some(
+        (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-button"
+      );
+      this.hasCheckboxCards = allCheckboxes.some(
+        (checkbox) => checkbox.tagName.toLowerCase() === "dsa-checkbox-card"
+      );
+    } else {
+      customElements.whenDefined("dsa-checkbox").then(() => this.handleSlotChange());
+      customElements.whenDefined("dsa-checkbox-button").then(() => this.handleSlotChange());
+      customElements.whenDefined("dsa-checkbox-card").then(() => this.handleSlotChange());
+    }
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);

package/cdn/chunks/{chunk.H2OEFMQC.js → chunk.BWYI3OOJ.js}

@@ -22,12 +22,6 @@ var checkbox_box_styles_default = i`
     display: contents;
   }
 
-  :host::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-  }
-
   .checkbox__control--small {
     --toggle-size: var(--dsa-wc-checkbox-size-small);
   }

package/cdn/chunks/chunk.CAWNJ57J.js

@@ -0,0 +1,291 @@
+import {
+  DSAInputTime
+} from "./chunk.7CBNLWGC.js";
+import {
+  DSAInputDate
+} from "./chunk.T6APUNAB.js";
+import {
+  InputBase
+} from "./chunk.YGJ3KERC.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
+import {
+  e,
+  n,
+  t
+} from "./chunk.DZB6XUZ7.js";
+import {
+  x
+} from "./chunk.7HUC6BF3.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/input/input.ts
+var DSAInput = class extends InputBase {
+  /**
+   * Connect methods to underlying input element
+   */
+  /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
+  get valueAsDate() {
+    return this.inputElement.valueAsDate;
+  }
+  set valueAsDate(newValue) {
+    this.inputElement.valueAsDate = newValue;
+    this.value = this.inputElement.value;
+  }
+  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
+  get valueAsNumber() {
+    return this.inputElement.valueAsNumber;
+  }
+  set valueAsNumber(newValue) {
+    this.inputElement.valueAsNumber = newValue;
+    this.value = this.inputElement.value;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.inputElement.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.inputElement.validationMessage;
+  }
+  handleChange() {
+    this.value = this.inputElement.value;
+  }
+  handleInput() {
+    this.value = this.inputElement.value;
+  }
+  handleStepChange() {
+    this.inputElement.step = this.step;
+    this.formControlController.updateValidity();
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.inputElement.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.inputElement.blur();
+  }
+  /** Selects all the text in the input. */
+  select() {
+    this.inputElement.select();
+  }
+  /** Sets the start and end positions of the text selection (0-based). */
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.inputElement.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+  /** Replaces a range of text with a new string. */
+  setRangeText(replacement, start, end, selectMode) {
+    this.inputElement.setRangeText(replacement, start, end, selectMode);
+    if (this.value !== this.inputElement.value) {
+      this.value = this.inputElement.value;
+    }
+  }
+  async showTimePicker() {
+    if (this.inputElement instanceof DSAInputTime) {
+      await this.inputElement.showTimePicker();
+    }
+  }
+  async hideTimePicker() {
+    if (this.inputElement instanceof DSAInputTime) {
+      await this.inputElement.hideTimePicker();
+    }
+  }
+  async showDatepicker() {
+    if (this.inputElement instanceof DSAInputDate) {
+      await this.inputElement.showDatepicker();
+    }
+  }
+  async hideDatepicker() {
+    if (this.inputElement instanceof DSAInputDate) {
+      await this.inputElement.hideDatepicker();
+    }
+  }
+  /** Increments the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter. */
+  stepUp(stepNumber) {
+    this.inputElement.stepUp(stepNumber);
+    if (this.value !== this.inputElement.value) {
+      this.value = this.inputElement.value;
+    }
+  }
+  /** Decrements the value of a numeric or time input type by the value of the step attribute, multiplied by an optional number parameter.  */
+  stepDown(stepNumber) {
+    this.inputElement.stepDown(stepNumber);
+    if (this.value !== this.inputElement.value) {
+      this.value = this.inputElement.value;
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.inputElement.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.inputElement.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    this.inputElement.setCustomValidity(message);
+  }
+  async getUpdateComplete() {
+    if (!this.inputElement) return false;
+    return await this.inputElement.updateComplete;
+  }
+  render() {
+    if (this.type === "date") {
+      return x`
+        <dsa-input-date
+          class="input-element"
+          name=${o(this.name)}
+          title=${o(this.title)}
+          value=${this.value}
+          .defaultValue=${o(this.defaultValue)}
+          size=${o(this.size)}
+          variant=${o(this.variant)}
+          label=${o(this.label)}
+          help-text=${o(this.helpText)}
+          ?clearable=${this.clearable}
+          ?disabled=${this.disabled}
+          lang=${o(this.lang)}
+          placeholder=${o(this.placeholder)}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${o(this.errorMessage)}
+          form=${o(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          calendar-start-date=${o(this.calendarStartDate)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${o(this.enterkeyhint)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+          description=${o(this.description)}
+        >
+          ${this.hasSlotController.test("label") ? x` <slot name="label" slot="label"></slot> ` : ""}
+          ${this.hasSlotController.test("prefix") ? x` <slot name="prefix" slot="prefix"></slot> ` : ""}
+          ${this.hasSlotController.test("help-text") ? x` <slot name="help-text" slot="help-text"></slot> ` : ""}
+          ${this.hasSlotController.test("tooltip") ? x` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
+        </dsa-input-date>
+      `;
+    } else if (this.type === "time") {
+      return x`
+        <dsa-input-time
+          class="input-element"
+          name=${o(this.name)}
+          title=${o(this.title)}
+          value=${this.value}
+          .defaultValue=${o(this.defaultValue)}
+          size=${o(this.size)}
+          variant=${o(this.variant)}
+          label=${o(this.label)}
+          help-text=${o(this.helpText)}
+          ?clearable=${this.clearable}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${o(this.errorMessage)}
+          form=${o(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          step=${o(this.step)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${o(this.enterkeyhint)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+          description=${o(this.description)}
+        >
+          ${this.hasSlotController.test("label") ? x` <slot name="label" slot="label"></slot> ` : ""}
+          ${this.hasSlotController.test("prefix") ? x` <slot name="prefix" slot="prefix"></slot> ` : ""}
+          ${this.hasSlotController.test("suffix") ? x` <slot name="suffix" slot="suffix"></slot> ` : ""}
+          ${this.hasSlotController.test("help-text") ? x` <slot name="help-text" slot="help-text"></slot> ` : ""}
+          ${this.hasSlotController.test("tooltip") ? x` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
+        </dsa-input-time>
+      `;
+    } else {
+      return x`
+        <dsa-input-native
+          class="input-element"
+          title=${o(this.title)}
+          name=${o(this.name)}
+          size=${o(this.size)}
+          variant=${o(this.variant)}
+          label=${o(this.label)}
+          help-text=${o(this.helpText)}
+          ?disabled=${this.disabled}
+          placeholder=${o(this.placeholder)}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${o(this.errorMessage)}
+          form=${o(this.form)}
+          .formControlController=${this.formControlController}
+          ?required=${this.required}
+          description=${o(this.description)}
+          type=${this.type}
+          value=${this.value}
+          .defaultValue=${o(this.defaultValue)}
+          ?clearable=${this.clearable}
+          ?passwordVisible=${this.passwordVisible}
+          pattern=${o(this.pattern)}
+          minlength=${o(this.minlength)}
+          maxlength=${o(this.maxlength)}
+          ?counter=${this.counter}
+          min=${o(this.min)}
+          max=${o(this.max)}
+          step=${o(this.step)}
+          autocapitalize=${o(this.autocapitalize)}
+          autocorrect=${o(this.autocorrect)}
+          autocomplete=${o(this.autocomplete)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${o(this.enterkeyhint)}
+          spellcheck=${this.spellcheck}
+          inputmode=${o(this.inputmode)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+        >
+          ${this.hasSlotController.test("label") ? x` <slot name="label" slot="label"></slot> ` : ""}
+          ${this.hasSlotController.test("prefix") ? x` <slot name="prefix" slot="prefix"></slot> ` : ""}
+          ${this.hasSlotController.test("suffix") ? x` <slot name="suffix" slot="suffix"></slot> ` : ""}
+          ${this.hasSlotController.test("help-text") ? x` <slot name="help-text" slot="help-text"></slot> ` : ""}
+          ${this.hasSlotController.test("tooltip") ? x` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
+        </dsa-input-native>
+      `;
+    }
+  }
+};
+__decorateClass([
+  e(".input-element")
+], DSAInput.prototype, "inputElement", 2);
+__decorateClass([
+  n()
+], DSAInput.prototype, "lang", 2);
+__decorateClass([
+  n({ attribute: "calendar-start-date" })
+], DSAInput.prototype, "calendarStartDate", 2);
+__decorateClass([
+  watch("step", { waitUntilFirstUpdate: true })
+], DSAInput.prototype, "handleStepChange", 1);
+DSAInput = __decorateClass([
+  t("dsa-input")
+], DSAInput);
+
+export {
+  DSAInput
+};

package/cdn/chunks/{chunk.NTOOFOWB.js → chunk.DBJLSCQP.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk.3BJMFOLF.js";
 import {
   header_styles_default
-} from "./chunk.VZJGVIXG.js";
+} from "./chunk.UJQUHHXT.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.SJM5UCFK.js → chunk.DRUKNJJ5.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.VARBZAJP.js";
+} from "./chunk.BMQ5WSY7.js";
 import {
   ShoelaceElement,
   n,