@ds-autonomie/web-components 2.1.0 → 2.3.0

package/dist/chunks/chunk.PWVYG6XN.js

@@ -0,0 +1,181 @@
+import {
+  ShoelaceElement
+} from "./chunk.XZ5FE34T.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/internal/components/checkbox-box/checkbox-box.ts
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+
+// src/internal/components/checkbox-box/checkbox-box.styles.ts
+import { css } from "lit";
+var checkbox_box_styles_default = css`
+  :host {
+    display: contents;
+  }
+
+  :host::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  .checkbox__control--small {
+    --toggle-size: var(--dsa-wc-checkbox-size-small);
+  }
+
+  .checkbox__control--medium {
+    --toggle-size: var(--dsa-wc-checkbox-size);
+  }
+
+  .checkbox__control--large {
+    --toggle-size: var(--dsa-wc-checkbox-size-large);
+  }
+
+  .checkbox__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border: var(--dsa-wc-checkbox-border);
+    border-radius: var(--dsa-wc-checkbox-border-radius);
+    background-color: var(--dsa-wc-checkbox-background-color);
+    color: var(--dsa-wc-checkbox-icon-color);
+    transition: var(--dsa-wc-transition-fast) border-color,
+      var(--dsa-wc-transition-fast) background-color,
+      var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) box-shadow;
+    box-sizing: border-box;
+  }
+
+  .checkbox__control.checkbox__control--small {
+    border-radius: var(--dsa-wc-checkbox-border-radius-small);
+  }
+
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+
+  /* Hover */
+  :host(:hover)
+    .checkbox__control:not(.checkbox__control--checked):not(
+      .checkbox__control--disabled
+    ):not(.checkbox__control--readonly) {
+    border-color: var(--dsa-wc-checkbox-color-hover);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox__control--checked,
+  .checkbox__control--indeterminate {
+    border-color: var(--dsa-wc-checkbox-color-active);
+    background-color: var(--dsa-wc-checkbox-color-active);
+  }
+
+  /* Checked/indeterminate + hover */
+  :host(:hover)
+    .checkbox.checkbox__control--checked:not(.checkbox__control--disabled):not(
+      .checkbox__control--readonly
+    ),
+  :host(:hover)
+    .checkbox.checkbox__control--indeterminate:not(
+      .checkbox__control--disabled
+    ):not(.checkbox__control--readonly) {
+    border-color: var(--dsa-wc-checkbox-color-active);
+    background-color: var(--dsa-wc-checkbox-color-active);
+  }
+
+  /* Disabled */
+  .checkbox__control--disabled {
+    border-color: var(--dsa-wc-checkbox-color-disabled);
+  }
+  .checkbox__control--checked.checkbox__control--disabled,
+  .checkbox__control--indeterminate.checkbox__control--disabled {
+    background-color: var(--dsa-wc-checkbox-color-disabled);
+  }
+
+  /* Readonly */
+  .checkbox__control--readonly {
+    border-color: var(--dsa-wc-checkbox-border-color-readonly);
+    color: var(--dsa-wc-checkbox-color-readonly);
+    background-color: var(--dsa-wc-checkbox-background-color);
+  }
+`;
+
+// src/internal/components/checkbox-box/checkbox-box.ts
+var DSAInternalCheckboxBox = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.indeterminate = false;
+    this.size = "medium";
+    this.disabled = false;
+    this.readonly = false;
+    this.error = false;
+  }
+  render() {
+    return html`
+      <span
+        part="control"
+        class=${classMap({
+      checkbox__control: true,
+      "checkbox__control--checked": this.checked,
+      "checkbox__control--indeterminate": this.indeterminate,
+      "checkbox__control--disabled": this.disabled,
+      "checkbox__control--readonly": this.readonly,
+      "checkbox__control--error": this.error,
+      "checkbox__control--small": this.size === "small",
+      "checkbox__control--medium": this.size === "medium",
+      "checkbox__control--large": this.size === "large"
+    })}
+      >
+        ${this.checked ? html`
+              <dsa-icon
+                part="checked-icon"
+                class="checkbox__checked-icon"
+                name="done"
+                library="system"
+              ></dsa-icon>
+            ` : ""}
+        ${!this.checked && this.indeterminate ? html`
+              <dsa-icon
+                part="indeterminate-icon"
+                class="checkbox__indeterminate-icon"
+                name="horizontal_rule"
+                library="system"
+              ></dsa-icon>
+            ` : ""}
+      </span>
+    `;
+  }
+};
+DSAInternalCheckboxBox.styles = checkbox_box_styles_default;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInternalCheckboxBox.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInternalCheckboxBox.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInternalCheckboxBox.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInternalCheckboxBox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInternalCheckboxBox.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInternalCheckboxBox.prototype, "error", 2);
+DSAInternalCheckboxBox = __decorateClass([
+  customElement("dsa-internal-checkbox-box")
+], DSAInternalCheckboxBox);

package/dist/chunks/{chunk.NCECJWN7.js → chunk.QBHSEMUU.js}

@@ -1,9 +1,9 @@
 import {
   DSARadioGroup
-} from "./chunk.JX7OISYA.js";
+} from "./chunk.5NXRUN57.js";
 import {
   FormToggleButton
-} from "./chunk.GGXJ2MP3.js";
+} from "./chunk.6KWCQDRD.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -19,9 +19,12 @@ var DSARadioButton = class extends FormToggleButton {
     this.type = "radio";
   }
   handleClick() {
+    if (this.disabled || this.readonly || this.parentDisabled || this.parentReadonly) {
+      return;
+    }
     this.checked = true;
   }
-  handleDisabledChange() {
+  handleDeactivatedChange() {
     const parent = this.parentElement;
     if (parent instanceof DSARadioGroup) {
       parent.updateTabIndexes();
@@ -29,8 +32,10 @@ var DSARadioButton = class extends FormToggleButton {
   }
 };
 __decorateClass([
-  watch(["disabled", "readonly"], { waitUntilFirstUpdate: true })
-], DSARadioButton.prototype, "handleDisabledChange", 1);
+  watch(["disabled", "readonly", "parentDisabled", "parentReadonly"], {
+    waitUntilFirstUpdate: true
+  })
+], DSARadioButton.prototype, "handleDeactivatedChange", 1);
 DSARadioButton = __decorateClass([
   customElement("dsa-radio-button")
 ], DSARadioButton);

package/dist/chunks/{chunk.ZSBVQKVM.js → chunk.SWP3OZUN.js}

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   ShoelaceElement
 } from "./chunk.XZ5FE34T.js";

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.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.O3AR4B4F.js → chunk.UL2XNE5X.js}

@@ -7,13 +7,13 @@ import {
 } from "./chunk.DQI2JTKU.js";
 import {
   FilterBase
-} from "./chunk.FQB6S2KS.js";
+} from "./chunk.3SX7AERB.js";
 import {
   getDateFromISO,
   getISOFormattedDate,
   getLocaleDateFromISO,
   isValidDate
-} from "./chunk.IPZC55RV.js";
+} from "./chunk.6BXZEG5L.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

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";