@ds-autonomie/web-components 2.2.0 → 2.3.1

package/dist/chunks/{chunk.KLKJ2LRK.js → chunk.T2OLM5TG.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.Y52TCF24.js → chunk.THO67JP2.js}

@@ -1,9 +1,9 @@
 import {
   select_styles_default
-} from "./chunk.VT3IWNRD.js";
+} from "./chunk.LE5LHO5Y.js";
 import {
   FormControlLayout
-} from "./chunk.I5HR7JYK.js";
+} from "./chunk.LGDM46D4.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/chunk.TZFYJ4KJ.js

@@ -0,0 +1,311 @@
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/internal/components/form-selectable-card/form-selectable-card.ts
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html } from "lit/static-html.js";
+
+// src/internal/components/form-selectable-card/form-selectable-card.styles.ts
+import { css } from "lit";
+var form_selectable_card_styles_default = css`
+  :host {
+    display: inline-block;
+    position: relative;
+    width: auto;
+  }
+
+  .selectable-card {
+    display: inline-flex;
+    align-items: flex-start;
+    width: 100%;
+    border-style: solid;
+    border-width: var(--dsa-wc-selectable-card-border-width);
+    border-color: var(--dsa-wc-selectable-card-border-color);
+    border-radius: var(--dsa-wc-selectable-card-border-radius);
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    transition: var(--dsa-wc-transition-x-fast) background-color,
+      var(--dsa-wc-transition-x-fast) color,
+      var(--dsa-wc-transition-x-fast) border,
+      var(--dsa-wc-transition-x-fast) box-shadow;
+    cursor: pointer;
+    background-color: var(--dsa-wc-selectable-card-background-color);
+  }
+  .selectable-card__content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: var(--dsa-wc-selectable-card-content-gap);
+  }
+  .selectable-card__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--dsa-wc-selectable-card-text-gap);
+    text-align: start;
+    white-space: normal;
+  }
+
+  .selectable-card--horizontal {
+    flex-direction: row;
+    gap: var(--dsa-wc-selectable-card-horizontal-gap);
+    padding: var(--dsa-wc-selectable-card-horizontal-padding);
+  }
+  .selectable-card--horizontal .selectable-card__content {
+    flex-direction: row;
+  }
+  .selectable-card--horizontal .selectable-card__image {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .selectable-card--vertical {
+    flex-direction: column;
+    gap: var(--dsa-wc-selectable-card-vertical-gap);
+    padding: var(--dsa-wc-selectable-card-vertical-padding);
+  }
+  .selectable-card--vertical .selectable-card__content {
+    flex-direction: column;
+  }
+  .selectable-card--vertical .selectable-card__text {
+    align-items: center;
+    text-align: center;
+  }
+  .selectable-card--vertical .selectable-card__image {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .selectable-card__label {
+    font: var(--dsa-wc-selectable-card-label-font);
+    color: var(--dsa-wc-selectable-card-label-color);
+  }
+  .selectable-card__description {
+    font: var(--dsa-wc-selectable-card-description-font);
+    color: var(--dsa-wc-selectable-card-description-color);
+  }
+
+  /*  
+  * States
+  */
+  .selectable-card:hover {
+    background-color: var(--dsa-wc-selectable-card-hover-background-color);
+    border-color: var(--dsa-wc-selectable-card-hover-border-color);
+    box-shadow: inset 0 0 0 1px var(--dsa-wc-selectable-card-hover-border-color);
+  }
+
+  .selectable-card--checked,
+  .selectable-card:active {
+    background-color: var(--dsa-wc-selectable-card-checked-background-color);
+    border-color: var(--dsa-wc-selectable-card-checked-border-color);
+  }
+  .selectable-card:active {
+    box-shadow: inset 0 0 0 1px
+      var(--dsa-wc-selectable-card-checked-border-color);
+  }
+
+  .selectable-card--checked:hover {
+    background-color: var(
+      --dsa-wc-selectable-card-checked-hover-background-color
+    );
+    border-color: var(--dsa-wc-selectable-card-checked-hover-border-color);
+    box-shadow: inset 0 0 0 1px
+      var(--dsa-wc-selectable-card-checked-hover-border-color);
+  }
+
+  .selectable-card--readonly,
+  .selectable-card--disabled {
+    pointer-events: none;
+  }
+
+  .selectable-card.selectable-card--readonly {
+    background-color: var(--dsa-wc-selectable-card-read-only-background-color);
+    border-color: var(--dsa-wc-selectable-card-read-only-border-color);
+  }
+
+  .selectable-card.selectable-card--disabled {
+    background-color: var(--dsa-wc-selectable-card-disabled-background-color);
+    border-color: var(--dsa-wc-selectable-card-disabled-border-color);
+  }
+  .selectable-card.selectable-card--disabled .selectable-card__label,
+  .selectable-card.selectable-card--disabled .selectable-card__description {
+    color: var(--dsa-wc-selectable-card-disabled-color);
+  }
+
+  .selectable-card--error {
+    border-color: var(--dsa-wc-selectable-card-error-border-color);
+  }
+
+  .selectable-card:focus {
+    outline: none;
+  }
+
+  .selectable-card:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+`;
+
+// src/internal/components/form-selectable-card/form-selectable-card.ts
+var FormSelectableCard = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.disabled = false;
+    this.parentDisabled = false;
+    this.readonly = false;
+    this.parentReadonly = false;
+    this.error = false;
+    this.layout = "horizontal";
+  }
+  handleClick() {
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleDisabledChange() {
+    if (this.disabled || this.readonly || this.parentDisabled || this.parentReadonly) {
+      this.button.setAttribute("aria-disabled", "true");
+    } else {
+      this.button.removeAttribute("aria-disabled");
+    }
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    const isDisabled = this.disabled || this.parentDisabled;
+    const isReadonly = this.readonly || this.parentReadonly;
+    const isDeactivated = isDisabled || isReadonly;
+    return html`
+      <div part="base">
+        <button
+          part="${`button${this.checked ? " selectable-card--checked" : ""}`}"
+          role=${this.type}
+          aria-checked="${this.checked}"
+          class=${classMap({
+      "selectable-card": true,
+      "selectable-card--vertical": this.layout === "vertical",
+      "selectable-card--horizontal": this.layout === "horizontal",
+      "selectable-card--on-base": true,
+      "selectable-card--toggle": true,
+      "selectable-card--medium": true,
+      "selectable-card--checked": this.checked,
+      "selectable-card--readonly": isReadonly,
+      "selectable-card--disabled": isDisabled,
+      "selectable-card--error": this.error,
+      "selectable-card--checkbox": this.type === "checkbox"
+    })}
+          ?disabled=${isDisabled}
+          aria-disabled=${ifDefined(isDeactivated ? "true" : void 0)}
+          aria-invalid=${ifDefined(
+      this.type === "checkbox" && this.error ? "true" : void 0
+    )}
+          type="button"
+          value=${ifDefined(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+          title="${this.innerText}"
+        >
+          ${this.type === "radio" ? html`
+                <dsa-internal-radio-icon
+                  ?checked=${this.checked}
+                  ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
+                  ?error=${this.error}
+                ></dsa-internal-radio-icon>
+              ` : html`
+                <dsa-internal-checkbox-box
+                  ?checked=${this.checked}
+                  ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
+                  ?error=${this.error}
+                ></dsa-internal-checkbox-box>
+              `}
+
+          <div class="selectable-card__content">
+            ${this.layout === "vertical" ? html`
+                  <slot
+                    name="image"
+                    part="image"
+                    class="selectable-card__image"
+                  ></slot>
+                ` : ""}
+            <div class="selectable-card__text">
+              <slot part="label" class="selectable-card__label"></slot>
+              <slot
+                name="description"
+                part="description"
+                class="selectable-card__description"
+              ></slot>
+            </div>
+            ${this.layout === "horizontal" ? html`
+                  <slot
+                    name="image"
+                    part="image"
+                    class="selectable-card__image"
+                  ></slot>
+                ` : ""}
+          </div>
+        </button>
+      </div>
+    `;
+  }
+};
+FormSelectableCard.styles = form_selectable_card_styles_default;
+__decorateClass([
+  query(".selectable-card")
+], FormSelectableCard.prototype, "button", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FormSelectableCard.prototype, "checked", 2);
+__decorateClass([
+  property()
+], FormSelectableCard.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FormSelectableCard.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FormSelectableCard.prototype, "parentDisabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FormSelectableCard.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FormSelectableCard.prototype, "parentReadonly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], FormSelectableCard.prototype, "error", 2);
+__decorateClass([
+  property()
+], FormSelectableCard.prototype, "layout", 2);
+__decorateClass([
+  watch(["disabled", "readonly", "parentDisabled", "parentReadonly"], {
+    waitUntilFirstUpdate: true
+  })
+], FormSelectableCard.prototype, "handleDisabledChange", 1);
+
+export {
+  FormSelectableCard
+};

package/dist/chunks/{chunk.QLA2JXR7.js → chunk.U7ZMMMJ3.js}

@@ -83,6 +83,10 @@ var translation = {
   min: "Min",
   max: "Max",
   clearButton: "Effacer valeur",
+  hours: (value) => `${value} Heure${Number(value) > 1 ? "s" : ""}`,
+  minutes: (value) => `${value} Minute${Number(value) > 1 ? "s" : ""}`,
+  seconds: (value) => `${value} Seconde${Number(value) > 1 ? "s" : ""}`,
+  milliseconds: (value) => `${value} Milliseconde${Number(value) > 1 ? "s" : ""}`,
   day: "Jour",
   month: "Mois",
   year: "Ann\xE9e",
@@ -137,6 +141,8 @@ var translation = {
   invalidEndDate: "Date de fin non valide",
   tableOfContents: "Sommaire :",
   userMenu: "Menu utilisateur",
+  switchOn: "Activ\xE9",
+  switchOff: "D\xE9sactiv\xE9",
   // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe, Saint-Barth\xE9lemy et Saint-Martin",
@@ -238,6 +244,10 @@ var translation2 = {
   min: "Min",
   max: "Max",
   clearButton: "Clear value",
+  hours: (value) => `${value} Hour${Number(value) > 1 ? "s" : ""}`,
+  minutes: (value) => `${value} Minute${Number(value) > 1 ? "s" : ""}`,
+  seconds: (value) => `${value} Second${Number(value) > 1 ? "s" : ""}`,
+  milliseconds: (value) => `${value} Millisecond${Number(value) > 1 ? "s" : ""}`,
   day: "Day",
   month: "Month",
   year: "Year",
@@ -292,6 +302,8 @@ var translation2 = {
   invalidEndDate: "Invalide end date",
   tableOfContents: "Table of contents :",
   userMenu: "User Menu",
+  switchOn: "On",
+  switchOff: "Off",
   // countries and regions
   fr_FR: "France",
   fr_GP: "Guadeloupe",

package/dist/chunks/{chunk.UNO3SMWX.js → chunk.UG7D663E.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

package/dist/chunks/{chunk.H3FSR35C.js → chunk.UJAK75R6.js}

@@ -1,3 +1,6 @@
+import {
+  DSAInputTime
+} from "./chunk.KQJQQDCQ.js";
 import {
   getOverridenIconDetails,
   isInvalidAmountKey,
@@ -6,12 +9,15 @@ import {
   parseFrAmount,
   roundToStep
 } from "./chunk.Z2A5AEMU.js";
+import {
+  DSAInputDate
+} from "./chunk.3JLROK74.js";
 import {
   input_styles_default
-} from "./chunk.VNFFOE7Z.js";
+} from "./chunk.CWDSCTUA.js";
 import {
   FormControlLayout
-} from "./chunk.I5HR7JYK.js";
+} from "./chunk.LGDM46D4.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -20,7 +26,7 @@ import {
 } from "./chunk.JA7YFGLI.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -57,6 +63,9 @@ var DSAInput = class extends FormControlLayout {
   /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
   get valueAsDate() {
     var _a, _b;
+    if (this.input instanceof DSAInputTime) {
+      return null;
+    }
     return (_b = (_a = this.input) == null ? void 0 : _a.valueAsDate) != null ? _b : null;
   }
   set valueAsDate(newValue) {
@@ -88,20 +97,22 @@ var DSAInput = class extends FormControlLayout {
     await this.updateComplete;
     if (this.type === "date") {
       this.input = this.dateInput;
+    } else if (this.type === "time") {
+      this.input = this.timeInput;
     } else {
       this.input = this.standardInput;
     }
     this.formControlController.updateValidity();
   }
   handleBlur(event) {
-    if (this.type === "date") {
+    if (["date", "time"].includes(this.type)) {
       event.stopPropagation();
     }
     this.hasFocus = false;
     this.emit("dsa-blur");
   }
   handleChange(event) {
-    if (this.type === "date") {
+    if (["date", "time"].includes(this.type)) {
       event.stopPropagation();
     }
     if (this.type === "amount") {
@@ -139,14 +150,14 @@ var DSAInput = class extends FormControlLayout {
     event.stopPropagation();
   }
   handleFocus(event) {
-    if (this.type === "date") {
+    if (["date", "time"].includes(this.type)) {
       event.stopPropagation();
     }
     this.hasFocus = true;
     this.emit("dsa-focus");
   }
   handleInput(event) {
-    if (this.type === "date") {
+    if (["date", "time"].includes(this.type)) {
       event.stopPropagation();
     }
     if (this.type === "amount") {
@@ -264,27 +275,21 @@ var DSAInput = class extends FormControlLayout {
       }
     }
   }
-  /** Checks whether the current navigator is compatible with type=time */
-  checkNavigatorCompatibility() {
-    const uAgent = navigator.userAgent;
-    const isChromeAgent = uAgent.indexOf("Chrome") > -1;
-    const isSafariAgent = uAgent.indexOf("Safari") > -1;
-    const isSafari = isSafariAgent && !isChromeAgent;
-    const isIExplorer = uAgent.indexOf("MSIE") > -1 || uAgent.indexOf("rv:") > -1;
-    const isFirefox = uAgent.indexOf("Firefox") > -1;
-    return "showPicker" in HTMLInputElement.prototype && !(isSafari || isIExplorer || isFirefox);
+  async showTimePicker() {
+    if (this.input instanceof DSAInputTime) {
+      await this.input.showTimePicker();
+    }
   }
-  /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
-  showTimePicker() {
-    if ("showPicker" in HTMLInputElement.prototype) {
-      this.standardInput.showPicker();
+  async hideTimePicker() {
+    if (this.input instanceof DSAInputTime) {
+      await this.input.hideTimePicker();
     }
   }
-  /** Displays the dsa-calendar picker for an input element. */
   async showDatepicker() {
-    await this.dateInput.showDatepicker();
+    if (this.input instanceof DSAInputDate) {
+      await this.input.showDatepicker();
+    }
   }
-  /** Hides dsa-calendar. */
   async hideDatepicker() {
     await this.dateInput.hideDatepicker();
   }
@@ -298,6 +303,9 @@ var DSAInput = class extends FormControlLayout {
   }
   /** Increments the value of a numeric input type by the value of the step attribute. */
   stepUp() {
+    if (this.input instanceof DSAInputDate || this.input instanceof DSAInputTime) {
+      return;
+    }
     if (this.type === "amount") {
       this.adjustAmountValue("up");
     } else {
@@ -309,6 +317,9 @@ var DSAInput = class extends FormControlLayout {
   }
   /** Decrements the value of a numeric input type by the value of the step attribute. */
   stepDown() {
+    if (this.input instanceof DSAInputDate || this.input instanceof DSAInputTime) {
+      return;
+    }
     if (this.type === "amount") {
       this.adjustAmountValue("down");
     } else {
@@ -349,9 +360,11 @@ var DSAInput = class extends FormControlLayout {
     this.formControlController.updateValidity();
   }
   async getUpdateComplete() {
-    const result = await super.getUpdateComplete();
-    if (this.type === "date") {
-      await this.dateInput.updateComplete;
+    let result;
+    if (this.input instanceof DSAInputDate || this.input instanceof DSAInputTime) {
+      result = await this.input.updateComplete;
+    } else {
+      result = await super.getUpdateComplete();
     }
     return result;
   }
@@ -392,6 +405,41 @@ var DSAInput = class extends FormControlLayout {
           ${this.hasSlotController.test("tooltip") ? html` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
         </dsa-input-date>
       `;
+    } else if (this.type === "time") {
+      return html`
+        <dsa-input-time
+          name=${ifDefined(this.name)}
+          title=${ifDefined(this.title)}
+          value=${this.value}
+          .defaultValue=${ifDefined(this.defaultValue)}
+          size=${ifDefined(this.size)}
+          variant=${ifDefined(this.variant)}
+          label=${ifDefined(this.label)}
+          help-text=${ifDefined(this.helpText)}
+          ?clearable=${this.clearable}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?error=${this.error}
+          .errorMessage=${ifDefined(this.errorMessage)}
+          form=${ifDefined(this.form)}
+          ?required=${this.required}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          step=${ifDefined(this.step)}
+          ?autofocus=${this.autofocus}
+          enterkeyhint=${ifDefined(this.enterkeyhint)}
+          @dsa-change=${this.handleChange}
+          @dsa-input=${this.handleInput}
+          @dsa-focus=${this.handleFocus}
+          @dsa-blur=${this.handleBlur}
+        >
+          ${this.hasSlotController.test("label") ? html` <slot name="label" slot="label"></slot> ` : ""}
+          ${this.hasSlotController.test("prefix") ? html` <slot name="prefix" slot="prefix"></slot> ` : ""}
+          ${this.hasSlotController.test("suffix") ? html` <slot name="suffix" slot="suffix"></slot> ` : ""}
+          ${this.hasSlotController.test("help-text") ? html` <slot name="help-text" slot="help-text"></slot> ` : ""}
+          ${this.hasSlotController.test("tooltip") ? html` <slot name="tooltip" slot="tooltip"></slot> ` : ""}
+        </dsa-input-time>
+      `;
     } else {
       return super.render();
     }
@@ -504,16 +552,6 @@ var DSAInput = class extends FormControlLayout {
               @click=${this.handlePasswordToggle}
               library="system"
             ></dsa-icon-button>` : ""}
-        ${this.type === "time" && this.checkNavigatorCompatibility() ? html`
-              <dsa-icon-button
-                part="picker-button"
-                class="input__action-button"
-                name="schedule"
-                label=${this.localize.term("selectATime")}
-                @click=${this.showTimePicker}
-                library="system"
-              ></dsa-icon-button>
-            ` : ""}
       </div>
     `;
   }
@@ -536,6 +574,9 @@ __decorateClass([
 __decorateClass([
   query("dsa-input-date")
 ], DSAInput.prototype, "dateInput", 2);
+__decorateClass([
+  query("dsa-input-time")
+], DSAInput.prototype, "timeInput", 2);
 __decorateClass([
   state()
 ], DSAInput.prototype, "input", 2);

package/dist/chunks/{chunk.EP7LLKJN.js → chunk.V75T6QXR.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.2JIPPL3I.js";
+} from "./chunk.JEZOETYM.js";
 
 // src/components/pagination-button/pagination-button.styles.ts
 import { css } from "lit";