@ds-autonomie/web-components 2.2.0 → 2.3.0

package/dist/chunks/chunk.NVQTI6CK.js

@@ -0,0 +1,44 @@
+import {
+  FormSelectableCard
+} from "./chunk.TZFYJ4KJ.js";
+import {
+  watch
+} from "./chunk.NOMN6DGD.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/checkbox-card/checkbox-card.ts
+import { customElement } from "lit/decorators.js";
+var DSACheckboxCard = class extends FormSelectableCard {
+  constructor() {
+    super(...arguments);
+    this.type = "checkbox";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+  }
+  handleClick() {
+    this.checked = !this.checked;
+  }
+  handleErrorChange() {
+    if (this.error) {
+      this.button.setAttribute("aria-invalid", "true");
+    } else {
+      this.button.removeAttribute("aria-invalid");
+    }
+  }
+};
+__decorateClass([
+  watch("error", { waitUntilFirstUpdate: true })
+], DSACheckboxCard.prototype, "handleErrorChange", 1);
+DSACheckboxCard = __decorateClass([
+  customElement("dsa-checkbox-card")
+], DSACheckboxCard);
+
+export {
+  DSACheckboxCard
+};

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

@@ -1,3 +1,6 @@
+import {
+  DSAInputTime
+} from "./chunk.7YIOE3D2.js";
 import {
   getOverridenIconDetails,
   isInvalidAmountKey,
@@ -6,12 +9,15 @@ import {
   parseFrAmount,
   roundToStep
 } from "./chunk.Z2A5AEMU.js";
+import {
+  DSAInputDate
+} from "./chunk.P5DC3N5P.js";
 import {
   input_styles_default
-} from "./chunk.VNFFOE7Z.js";
+} from "./chunk.CWDSCTUA.js";
 import {
   FormControlLayout
-} from "./chunk.I5HR7JYK.js";
+} from "./chunk.5EBCNG2J.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.ODXKNTKC.js

@@ -0,0 +1,21 @@
+import {
+  form_control_styles_default
+} from "./chunk.EIZK62ST.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/checkbox-group/checkbox-group.styles.ts
+import { css } from "lit";
+var checkbox_group_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+`;
+
+export {
+  checkbox_group_styles_default
+};

package/dist/chunks/{chunk.IZACKXPC.js → chunk.P3CATWXI.js}

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

package/dist/chunks/{chunk.LTCZARVI.js → chunk.P5DC3N5P.js}

@@ -1,13 +1,13 @@
 import {
   input_date_styles_default
-} from "./chunk.RWGL6D5U.js";
+} from "./chunk.3EAWXV27.js";
 import {
   FormControlLayout
-} from "./chunk.I5HR7JYK.js";
+} from "./chunk.5EBCNG2J.js";
 import {
   getDateFromISO,
   getISOFormattedDate
-} from "./chunk.IPZC55RV.js";
+} from "./chunk.6BXZEG5L.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.HGR7A5FK.js";
 import {
   LocalizeController
-} from "./chunk.QLA2JXR7.js";
+} from "./chunk.U7ZMMMJ3.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";
@@ -98,11 +98,12 @@ var DSAInputDate = class extends FormControlLayout {
     document.removeEventListener("mousedown", this.handleDocumentMouseDown);
     this.removeEventListener("dsa-date-selected", this.handleSelectedDate);
   }
-  handleSelectedDate(event) {
+  async handleSelectedDate(event) {
     const { detail } = event;
     const selectedDate = detail.dates[0];
     this.value = getISOFormattedDate(selectedDate);
     this.hideDatepicker();
+    await this.updateComplete;
     this.emit("dsa-change");
   }
   handleDocumentFocusIn(event) {
@@ -265,6 +266,9 @@ var DSAInputDate = class extends FormControlLayout {
     await this.dateField.updateComplete;
     return result;
   }
+  handleLabelClick() {
+    this.dateField.focus();
+  }
   renderInput() {
     var _a, _b;
     const hasPrefixIcon = this.hasSlotController.test("prefix");
@@ -333,7 +337,6 @@ var DSAInputDate = class extends FormControlLayout {
           strategy="absolute"
           flip
           shift
-          tabindex="0"
           auto-size="vertical"
           auto-size-padding="10"
         >

package/dist/chunks/{chunk.AVHERTGT.js → chunk.PTFOYYGJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3SMOVUNI.js";
 import {
   FilterBase
-} from "./chunk.FQB6S2KS.js";
+} from "./chunk.3SX7AERB.js";
 import {
   watch
 } from "./chunk.NOMN6DGD.js";

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.KN6RQWYN.js → chunk.QBHSEMUU.js}

@@ -1,9 +1,9 @@
 import {
   DSARadioGroup
-} from "./chunk.KUYI27GJ.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";