@ds-autonomie/web-components 1.0.1 → 1.2.0

package/dist/chunks/chunk.7HGZSZJK.js

@@ -0,0 +1,409 @@
+import {
+  form_control_styles_default
+} from "./chunk.3RBCYA4F.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/combobox/combobox.styles.ts
+import { css } from "lit";
+var combobox_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .select::part(popup) {
+    z-index: var(--dsa-wc-z-index-dropdown);
+  }
+
+  .select[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .select[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .select__combobox {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    font: var(--dsa-wc-combobox-input-font);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    transition: var(--dsa-wc-transition-fast) color,
+      var(--dsa-wc-transition-fast) border,
+      var(--dsa-wc-transition-fast) box-shadow,
+      var(--dsa-wc-transition-fast) background-color;
+    border-radius: var(--dsa-wc-input-border-radius);
+    padding: var(--dsa-wc-input-padding);
+  }
+
+  .select__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .select__display-input:focus {
+    outline: none;
+  }
+
+  /* Visually hide the display input when multiple is enabled */
+  .select--multiple:not(.select--placeholder-visible) .select__display-input {
+    flex: 1;
+    margin-left: 0.25rem;
+    min-width: 100px;
+  }
+
+  .input-container {
+    width: 100%;
+    display: flex;
+    align-items-center;
+    flex-wrap: wrap;
+    min-width: 0;
+    row-gap: 4px;
+  }
+
+  .select__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .select__tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-inline-start: var(--dsa-wc-combobox-tag-margin-inline-start);
+    min-width: 0;
+  }
+
+  .select__tags dsa-tag {
+    cursor: pointer !important;
+    min-width: 0;
+  }
+
+  .select__tags dsa-tag::part(base) {
+    background: var(--dsa-wc-combobox-tag-background) !important;
+    color: var(--dsa-wc-combobox-tag-color) !important;
+    border: solid 1px var(--dsa-wc-combobox-tag-border-color);
+  }
+
+  .select--error .select__tags dsa-tag::part(base) {
+    background: var(--dsa-wc-combobox-tag-error-background) !important;
+    color: var(--dsa-wc-combobox-tag-error-color) !important;
+    border: solid 1px var(--dsa-wc-combobox-tag-error-border-color);
+  }
+
+  .select--error .select__tags dsa-tag::part(remove-button) {
+    color: var(--dsa-wc-combobox-tag-error-color) !important;
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__tags::slotted(dsa-tag) {
+    cursor: not-allowed !important;
+  }
+
+  /* On base selects */
+  .select--on-base .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-background-color,
+      var(--dsa-wc-input-on-base-background-color)
+    );
+    border: solid var(--dsa-wc-input-border-width)
+      var(
+        --dsa-wc-internal-combobox-on-base-border-color,
+        var(--dsa-wc-input-on-base-border-color)
+      );
+  }
+
+  .select--on-base:hover:not(.select--disabled) .select__combobox {
+    border-color: var(
+      --dsa-wc-internal-combobox-on-base-hover-border-color,
+      var(--dsa-wc-input-on-base-border-color-hover)
+    );
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-hover-background-color,
+      inherit
+    );
+  }
+  .select--on-base.select--disabled .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-disabled-background-color,
+      var(--dsa-wc-input-on-base-background-color-disabled)
+    );
+    border-color: var(
+      --dsa-wc-internal-combobox-on-base-disabled-border-color,
+      var(--dsa-wc-input-on-base-border-color-disabled)
+    );
+    cursor: var(--dsa-wc-internal-combobox-disabled-cursor, not-allowed);
+    opacity: var(--dsa-wc-internal-combobox-disabled-opacity, 0.5);
+    outline: none;
+  }
+
+  .select--on-base:not(.select--disabled).select--open .select__combobox,
+  .select--on-base:not(.select--disabled).select--focused .select__combobox {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    z-index: 2;
+
+    background-color: var(
+      --dsa-wc-internal-combobox-on-base-active-background-color,
+      inherit
+    );
+  }
+
+  .select--on-base select__prefix {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .select--error.select--on-base:not(.select--disabled) .select__combobox {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+
+  .select--error.select--on-base:hover:not(.select--disabled)
+    .select__combobox {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  /* On Layer selects */
+  .select--on-layer .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-background-color,
+      var(--dsa-wc-input-on-layer-background-color)
+    );
+    border: solid var(--dsa-wc-input-border-width)
+      var(
+        --dsa-wc-internal-combobox-on-layer-border-color,
+        var(--dsa-wc-input-on-layer-border-color)
+      );
+  }
+
+  .select--on-layer:hover:not(.select--disabled) .select__combobox {
+    border-color: var(
+      --dsa-wc-internal-combobox-on-layer-hover-border-color,
+      var(--dsa-wc-input-on-layer-border-color-hover)
+    );
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-hover-background-color,
+      var(--dsa-wc-internal-combobox-on-layer-hover-background-color, inherit)
+    );
+  }
+
+  .select--on-layer.select--disabled .select__combobox {
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-disabled-background-color,
+      var(--dsa-wc-input-on-layer-background-color-disabled)
+    );
+    border-color: var(
+      --dsa-wc-internal-combobox-on-layer-disabled-border-color,
+      var(--dsa-wc-input-on-layer-border-color-disabled)
+    );
+    opacity: var(--dsa-wc-internal-combobox-disabled-opacity, 0.5);
+    cursor: var(--dsa-wc-internal-combobox-disabled-cursor, not-allowed);
+    outline: none;
+  }
+
+  .select--on-layer:not(.select--disabled).select--open .select__combobox,
+  .select--on-layer:not(.select--disabled).select--focused .select__combobox {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+
+    background-color: var(
+      --dsa-wc-internal-combobox-on-layer-active-background-color,
+      inherit
+    );
+  }
+
+  .select--on-layer select__prefix {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .select--error.select--on-layer:not(.select--disabled) .select__combobox {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+
+  .select--error.select--on-layer:hover:not(.select--disabled)
+    .select__combobox {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  /* Sizes */
+  .select--small .select__combobox {
+    font: var(--dsa-wc-combobox-input-font-small);
+  }
+
+  .select--small.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-block: 2px;
+    padding-inline-start: 0;
+  }
+
+  .select--small .select__tags {
+    gap: 2px;
+  }
+
+  .select--medium .select__combobox {
+    font: var(--dsa-wc-combobox-input-font);
+  }
+
+  .select--medium.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+    padding-inline-start: 0;
+    padding-block: 3px;
+  }
+
+  .select--medium .select__tags {
+    gap: 3px;
+  }
+  .select--large .select__combobox {
+    font: var(--dsa-wc-combobox-input-font-large);
+  }
+  .select--large.select--multiple:not(.select--placeholder-visible)
+    .select__combobox {
+  }
+
+  .select--large .select__tags {
+    gap: 4px;
+  }
+
+  /* Prefix */
+  .select__prefix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+  .select__prefix::slotted(*) {
+    margin-inline-end: var(--dsa-wc-input-margin-inline);
+  }
+  .select--multiple .select__prefix::slotted(*) {
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  /* Clear button */
+  .select__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--dsa-wc-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--dsa-wc-transition-fast) color;
+    cursor: pointer;
+    margin-inline-start: var(--dsa-wc-input-margin-inline);
+  }
+
+  :not(.select--disabled) .select__clear:hover,
+  :not(.select--disabled) .select__expand-icon:hover {
+    color: var(--dsa-wc-input-icon-color-hover);
+  }
+
+  .select--disabled .select__clear,
+  .select--disabled .select__expand-icon {
+    color: var(--dsa-wc-input-icon-color-disabled);
+  }
+
+  .select__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+    rotate: 0;
+    margin-inline-start: var(--dsa-wc-combobox-icon-margin-inline);
+    color: var(--dsa-wc-input-icon-color);
+  }
+
+  .select--error .select__expand-icon {
+    color: var(--dsa-wc-combobox-expand-icon-error-color);
+  }
+
+  .select--open .select__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Listbox */
+  .select__listbox {
+    display: block;
+    position: relative;
+    font: var(--dsa-wc-input-text-field-font);
+    box-shadow: var(--dsa-wc-shadow-large);
+    background: var(--dsa-wc-combobox-listbox-background-color);
+    border: solid var(--dsa-wc-combobox-listbox-border-width)
+      var(--dsa-wc-combobox-listbox-border-color);
+    border-radius: var(--dsa-wc-combobox-listbox-border-radius);
+    padding-inline: 0;
+    margin-top: var(--dsa-wc-combobox-listbox-margin-top);
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+
+  .select__listbox::slotted(dsa-divider) {
+    --spacing-start: var(--dsa-wc-combobox-listbox-divider-spacing);
+    --spacing-end: var(--dsa-wc-combobox-listbox-divider-spacing);
+  }
+
+  .select__listbox::slotted(small) {
+    font-size: var(--dsa-wc-input-text-field-font-small);
+    padding-inline: var(--dsa-wc-combobox-listbox-padding-inline);
+  }
+
+  .slot_options {
+    display: none;
+  }
+
+  .select__empty_text {
+    font: var(--dsa-wc-combobox-empty-label-font);
+    color: var(--dsa-wc-combobox-empty-label-color);
+    padding-inline: var(--dsa-wc-combobox-listbox-padding-inline);
+  }
+`;
+
+export {
+  combobox_styles_default
+};

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

@@ -3,13 +3,13 @@ import {
 } from "./chunk.73T7TU6S.js";
 import {
   DSATreeItem
-} from "./chunk.7ZCCXTFG.js";
+} from "./chunk.MDFIMRCC.js";
 import {
   LocalizeController
-} from "./chunk.5XL2LZLC.js";
+} from "./chunk.NBPVVWJU.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";

package/dist/chunks/{chunk.ODSCDJDO.js → chunk.ARVWTY56.js}

@@ -2,8 +2,8 @@ import {
   progress_ring_styles_default
 } from "./chunk.EU56EW33.js";
 import {
-  LocalizeController
-} from "./chunk.5XL2LZLC.js";
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -18,7 +18,6 @@ import { classMap } from "lit/directives/class-map.js";
 var DSAProgressRing = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
-    this.localize = new LocalizeController(this);
     this.value = 0;
     this.label = "";
     this.size = "medium";
@@ -45,7 +44,9 @@ var DSAProgressRing = class extends ShoelaceElement {
       "progress-ring--medium": this.size === "medium"
     })}
         role="progressbar"
-        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-label=${ifDefinedAndNotEmpty(
+      this.label.length > 0 ? this.label : void 0
+    )}
         aria-describedby="label"
         aria-valuemin="0"
         aria-valuemax="100"

package/dist/chunks/{chunk.KOH5V4C6.js → chunk.B4O7IAPL.js}

@@ -1,6 +1,12 @@
 import {
   DSASelect
-} from "./chunk.PWWER3ZK.js";
+} from "./chunk.JJ3GF7YP.js";
+import {
+  frenchFlag,
+  frenchNumberPrefix,
+  phoneInputValidityRegex,
+  phonePrefixOptions
+} from "./chunk.6ZQ4OQ2C.js";
 import {
   getMaskedValue,
   stripSpecialChars
@@ -10,25 +16,22 @@ import {
 } from "./chunk.DRGGQ4WL.js";
 import {
   input_phone_styles_default
-} from "./chunk.HC5BO5YV.js";
-import {
-  frenchFlag,
-  frenchNumberPrefix,
-  phoneInputValidityRegex,
-  phonePrefixOptions
-} from "./chunk.6ZQ4OQ2C.js";
+} from "./chunk.NHYFVEGM.js";
 import {
   defaultValue
-} from "./chunk.GI7VDIWX.js";
+} from "./chunk.CMJ2SRTL.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   watch
-} from "./chunk.D7CATJYB.js";
+} from "./chunk.6IH66JBY.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -367,7 +370,7 @@ var DSAInputPhone = class extends ShoelaceElement {
       "input-phone--empty": this.phoneNumber === ""
     })}
       >
-      <slot name="prefix" part="prefix" class="input-phone__prefix"></slot>
+     
 
 
 
@@ -390,8 +393,8 @@ var DSAInputPhone = class extends ShoelaceElement {
       "input-phone__control-with-prefix": hasPrefixIcon
     })}
           type="text"
-          title=${this.title}
-          name=${ifDefined(this.name)}
+          title=${ifDefinedAndNotEmpty(this.title)}
+          name=${ifDefinedAndNotEmpty(this.name)}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
@@ -407,8 +410,8 @@ var DSAInputPhone = class extends ShoelaceElement {
           spellcheck=${this.spellcheck}
           enterkeyhint=${ifDefined(this.enterkeyhint)}
           inputmode='tel'
-          aria-label=${hasLabel ? this.label : this.title}
-          aria-describedby=${this.error ? "error-text help-text" : "help-text"}
+          aria-label=${ifDefinedAndNotEmpty(hasLabel ? this.label : this.title)}
+          aria-describedby=${this.error ? "input-phone error-text help-text" : "input-phone help-text"}
           @change=${this.handleChange}
           @input=${this.handleInput}
           @keydown=${this.handleKeyDown}
@@ -422,10 +425,11 @@ var DSAInputPhone = class extends ShoelaceElement {
                 <dsa-icon-button
                   part="clear-button"
                   class="input-phone__clear"
-                  aria-label=${this.localize.term("clearEntry")}
+                  label=${this.localize.term("clearEntry")}
                   @click=${this.handleClearIconClick}
                   name="close"
-                ></dsa-icon-button>
+                >
+                </dsa-icon-button>
               ` : ""}
 
 

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.CMJ2SRTL.js

@@ -0,0 +1,26 @@
+// src/internal/default-value.ts
+import { defaultConverter } from "lit";
+function defaultValue(propertyName = "value") {
+  return (proto, key) => {
+    const ctor = proto.constructor;
+    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+    ctor.prototype.attributeChangedCallback = function attributeChangedCallbackFn(name, old, value) {
+      var _a;
+      const options = ctor.getPropertyOptions(propertyName);
+      const attributeName = typeof options.attribute === "string" ? options.attribute : propertyName;
+      if (name === attributeName) {
+        const converter = options.converter || defaultConverter;
+        const fromAttribute = typeof converter === "function" ? converter : (_a = converter == null ? void 0 : converter.fromAttribute) != null ? _a : defaultConverter.fromAttribute;
+        const newValue = fromAttribute(value, options.type);
+        if (this[propertyName] !== newValue) {
+          this[key] = newValue;
+        }
+      }
+      attributeChangedCallback.call(this, name, old, value);
+    };
+  };
+}
+
+export {
+  defaultValue
+};

package/dist/chunks/{chunk.DURVPB6M.js → chunk.D6DEGG4H.js}

@@ -147,7 +147,8 @@ var select_styles_default = css`
       );
   }
 
-  .select--on-base:hover:not(.select--disabled) .select__combobox {
+  .select--on-base:hover:not(.select--disabled):not(.select--readonly)
+    .select__combobox {
     border-color: var(
       --dsa-wc-internal-select-on-base-hover-border-color,
       var(--dsa-wc-input-on-base-border-color-hover)
@@ -171,7 +172,14 @@ var select_styles_default = css`
     outline: none;
   }
 
-  .select--on-base:not(.select--disabled).select--open .select__combobox,
+  .select--on-base.select--readonly .select__combobox {
+    background-color: var(--dsa-wc-input-on-base-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-base-read-only-border-color);
+    cursor: text;
+  }
+
+  .select--on-base:not(.select--disabled):not(.select--readonly).select--open
+    .select__combobox,
   .select--on-base:not(.select--disabled).select--focused .select__combobox {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);
@@ -187,12 +195,15 @@ var select_styles_default = css`
     color: var(--dsa-wc-input-on-base-text-field-input-color);
   }
 
-  .select--error.select--on-base:not(.select--disabled) .select__combobox {
+  .select--error.select--on-base:not(.select--disabled):not(.select--readonly)
+    .select__combobox {
     background-color: var(--dsa-wc-input-on-base-background-color-error);
     border-color: var(--dsa-wc-input-on-base-border-color-error);
   }
 
-  .select--error.select--on-base:hover:not(.select--disabled)
+  .select--error.select--on-base:hover:not(.select--disabled):not(
+      .select--readonly
+    )
     .select__combobox {
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
   }
@@ -210,7 +221,8 @@ var select_styles_default = css`
       );
   }
 
-  .select--on-layer:hover:not(.select--disabled) .select__combobox {
+  .select--on-layer:hover:not(.select--disabled):not(.select--readonly)
+    .select__combobox {
     border-color: var(
       --dsa-wc-internal-select-on-layer-hover-border-color,
       var(--dsa-wc-input-on-layer-border-color-hover)
@@ -235,7 +247,14 @@ var select_styles_default = css`
     outline: none;
   }
 
-  .select--on-layer:not(.select--disabled).select--open .select__combobox,
+  .select--on-layer.select--readonly .select__combobox {
+    background-color: var(--dsa-wc-input-on-layer-read-only-background-color);
+    border-color: var(--dsa-wc-input-on-layer-read-only-border-color);
+    cursor: text;
+  }
+
+  .select--on-layer:not(.select--disabled):not(.select--readonly).select--open
+    .select__combobox,
   .select--on-layer:not(.select--disabled).select--focused .select__combobox {
     outline: var(--dsa-wc-focus-ring);
     outline-offset: var(--dsa-wc-focus-ring-offset);

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

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