@ds-autonomie/web-components 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ds-autonomie/web-components
 
+## 1.4.0
+
+### Minor Changes
+
+- be8eaf7: `input-phone`,`input-mask`: ajout d'un nouvel attribut 'mask' qui spécifie les caractères autorisés qui peuvent être présents à des positions spécifiques dans une séquence.
+- 994505d: `input-mask`, `input-phone`: refactorisation de la validation des composants input-mask et input-phone
+
+### Patch Changes
+
+- a885c7a: `combobox`: mise à jour graphique des tags sur le composant combobox
+- 0d8788d: `tag`: documentation sur l'utilisation d'un lien avec le composant tag
+- 0a16775: `button`: mise à jour du style en enlevant la bordure lorsque le composant button a pour variant 'tertiary'
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/chunks/{chunk.J2XNYTTZ.js → chunk.3GJ3KGGY.js}

@@ -245,27 +245,23 @@ var button_styles_default = css`
   /* Tertiary/On Base */
   .button--on-base.button--tertiary {
     background-color: var(--dsa-wc-button-tertiary-on-base-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-font-color);
+    border: none;
     color: var(--dsa-wc-button-tertiary-on-base-font-color);
   }
   .button--on-base.button--tertiary:hover:not(.button--disabled) {
     background-color: var(--dsa-wc-button-tertiary-on-base-hover-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-hover-font-color);
     color: var(--dsa-wc-button-tertiary-on-base-hover-font-color);
   }
   .button--on-base.button--tertiary:active:not(.button--disabled) {
     background-color: var(--dsa-wc-button-tertiary-on-base-active-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-active-font-color);
     color: var(--dsa-wc-button-tertiary-on-base-active-font-color);
   }
   .button--on-base.button--tertiary.button--disabled {
     background-color: var(--dsa-wc-button-tertiary-on-base-disabled-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-disabled-font-color);
     color: var(--dsa-wc-button-tertiary-on-base-disabled-font-color);
   }
   .button--on-base.button--tertiary.button--loading {
     background-color: var(--dsa-wc-button-tertiary-on-base-loading-color);
-    border-color: var(--dsa-wc-button-tertiary-on-base-loading-font-color);
     color: var(--dsa-wc-button-tertiary-on-base-loading-font-color);
   }
   .button--on-base.button--tertiary.button--loading dsa-spinner {
@@ -279,43 +275,31 @@ var button_styles_default = css`
   /* Tertiary/On Floating Menu */
   .button--on-floating-menu.button--tertiary {
     background-color: var(--dsa-wc-button-tertiary-on-floating-menu-color);
-    border-color: var(--dsa-wc-button-tertiary-on-floating-menu-font-color);
+    border: none;
     color: var(--dsa-wc-button-tertiary-on-floating-menu-font-color);
   }
   .button--on-floating-menu.button--tertiary:hover:not(.button--disabled) {
     background-color: var(
       --dsa-wc-button-tertiary-on-floating-menu-hover-color
     );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-hover-font-color
-    );
     color: var(--dsa-wc-button-tertiary-on-floating-menu-hover-font-color);
   }
   .button--on-floating-menu.button--tertiary:active:not(.button--disabled) {
     background-color: var(
       --dsa-wc-button-tertiary-on-floating-menu-active-color
     );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-active-font-color
-    );
     color: var(--dsa-wc-button-tertiary-on-floating-menu-active-font-color);
   }
   .button--on-floating-menu.button--tertiary.button--disabled {
     background-color: var(
       --dsa-wc-button-tertiary-on-floating-menu-disabled-color
     );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-disabled-font-color
-    );
     color: var(--dsa-wc-button-tertiary-on-floating-menu-disabled-font-color);
   }
   .button--on-floating-menu.button--tertiary.button--loading {
     background-color: var(
       --dsa-wc-button-tertiary-on-floating-menu-loading-color
     );
-    border-color: var(
-      --dsa-wc-button-tertiary-on-floating-menu-loading-font-color
-    );
     color: var(--dsa-wc-button-tertiary-on-floating-menu-loading-font-color);
   }
   .button--on-floating-menu.button--tertiary.button--loading dsa-spinner {

package/dist/chunks/{chunk.YHOA7MQN.js → chunk.4TRQBTMY.js}

@@ -2,9 +2,10 @@ import {
   input_mask_styles_default
 } from "./chunk.2HV2U4RQ.js";
 import {
-  getMaskedValue,
+  maskedValueToRawValue,
+  rawValueToMaskedValue,
   stripSpecialChars
-} from "./chunk.SQMWMSBA.js";
+} from "./chunk.7OLEA3GQ.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -14,15 +15,15 @@ import {
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
 } from "./chunk.7BYKP4SA.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -50,6 +51,7 @@ var DSAInputMask = class extends ShoelaceElement {
     );
     this.localize = new LocalizeController(this);
     this.hasFocus = false;
+    this.maskedValue = "";
     this.title = "";
     this.name = "";
     this.value = "";
@@ -62,38 +64,35 @@ var DSAInputMask = class extends ShoelaceElement {
     this.disabled = false;
     this.placeholder = "";
     this.readonly = false;
-    this.validate = false;
     this.error = false;
     this.errorMessage = "";
     this.form = "";
     this.required = false;
+    this.pattern = "";
+    this.mask = "";
   }
   /** Gets the validity state object */
   get validity() {
-    if (this.validate) {
-      if (this.value.length > 0) {
-        const strippedValue = stripSpecialChars(this.value);
-        const matches = strippedValue.match(this.pattern);
-        this.error = matches === null;
-      } else {
-        this.error = false;
-      }
-      const validityState = {
-        badInput: false,
-        customError: false,
-        patternMismatch: this.error,
-        rangeOverflow: false,
-        rangeUnderflow: false,
-        stepMismatch: false,
-        tooLong: false,
-        tooShort: false,
-        typeMismatch: false,
-        valid: !this.error,
-        valueMissing: false
-      };
-      return validityState;
+    let patternMatch = void 0;
+    if (this.value.length > 0 && this.pattern.length > 0) {
+      const strippedValue = stripSpecialChars(this.value);
+      const matches = strippedValue.match(this.pattern);
+      patternMatch = matches !== null;
     }
-    return this.input.validity;
+    const validityState = {
+      badInput: this.input.validity.badInput,
+      customError: this.input.validity.customError,
+      patternMismatch: !patternMatch,
+      rangeOverflow: this.input.validity.rangeOverflow,
+      rangeUnderflow: this.input.validity.rangeUnderflow,
+      stepMismatch: this.input.validity.stepMismatch,
+      tooLong: this.input.validity.tooLong,
+      tooShort: this.input.validity.tooShort,
+      typeMismatch: this.input.validity.typeMismatch,
+      valid: patternMatch !== void 0 ? patternMatch : this.input.validity.valid,
+      valueMissing: this.input.validity.valueMissing
+    };
+    return validityState;
   }
   /** Gets the validation message */
   get validationMessage() {
@@ -102,17 +101,34 @@ var DSAInputMask = class extends ShoelaceElement {
   firstUpdated() {
     this.formControlController.updateValidity();
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.mask.length > 0 && this.mask.length !== this.placeholder.length) {
+      console.warn(
+        "For correct usage: add `mask` attribute. It should have the same format than the placeholder."
+      );
+    }
+    this.maskedValue = this.rawValueToMaskedValue(this.value);
+  }
+  handleDocumentKeyUp() {
+    const strippedValue = stripSpecialChars(this.input.value);
+    const newValue = maskedValueToRawValue(
+      strippedValue,
+      this.mask.length > 0 ? this.mask : this.placeholder
+    );
+    const maskedValue = this.rawValueToMaskedValue(newValue);
+    this.value = newValue;
+    this.maskedValue = maskedValue;
+    this.input.value = maskedValue;
+    this.formControlController.updateValidity();
+    this.emit("dsa-input");
+  }
   handleBlur() {
     this.hasFocus = false;
     this.emit("dsa-blur");
   }
-  handleChange() {
-    const strippedValue = stripSpecialChars(this.input.value);
-    this.value = strippedValue;
-    this.emit("dsa-change");
-  }
-  getMaskedValue(inputValue) {
-    return getMaskedValue(inputValue, this.placeholder);
+  rawValueToMaskedValue(inputValue) {
+    return rawValueToMaskedValue(inputValue, this.placeholder);
   }
   handleClearClick(event) {
     this.value = "";
@@ -126,11 +142,9 @@ var DSAInputMask = class extends ShoelaceElement {
     this.hasFocus = true;
     this.emit("dsa-focus");
   }
-  handleInput() {
-    const strippedValue = stripSpecialChars(this.input.value);
-    this.value = strippedValue;
-    this.formControlController.updateValidity();
-    this.emit("dsa-input");
+  handleChange() {
+    this.value = this.input.value;
+    this.emit("dsa-change");
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
@@ -201,11 +215,7 @@ var DSAInputMask = class extends ShoelaceElement {
   }
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message) {
-    if (this.validate) {
-      this.input.setCustomValidity(this.error ? this.errorMessage : "");
-    } else {
-      this.input.setCustomValidity(message);
-    }
+    this.input.setCustomValidity(message);
     this.formControlController.updateValidity();
   }
   render() {
@@ -215,8 +225,7 @@ var DSAInputMask = class extends ShoelaceElement {
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
-    const maskedValue = this.getMaskedValue(this.value);
-    const placeholder = this.placeholder.substring(maskedValue.length);
+    const placeholder = this.placeholder.substring(this.maskedValue.length);
     return html`
       <div
         part="form-control"
@@ -268,7 +277,7 @@ var DSAInputMask = class extends ShoelaceElement {
       "input-mask__placeholder": true
     })}  aria-placeholder=${placeholder}  aria-hidden="true"
               >
-                <span class="input-mask__value"  aria-hidden="true">${maskedValue}</span>
+                <span class="input-mask__value"  aria-hidden="true">${this.maskedValue}</span>
                 ${placeholder}</div
             >
 
@@ -288,9 +297,8 @@ var DSAInputMask = class extends ShoelaceElement {
               minlength=${ifDefined(this.minlength)}
               maxlength=${ifDefined(this.placeholder.length)}
               size=${ifDefined(this.placeholder.length)}
-              pattern=${ifDefined(this.pattern)}
               placeholder=${ifDefined(this.placeholder)}
-              .value=${live(maskedValue)}
+              .value=${live(this.maskedValue)}
               autocomplete=${ifDefined(this.autocomplete)}
               autocorrect=${ifDefined(this.autocorrect)}
               ?autofocus=${this.autofocus}
@@ -302,8 +310,8 @@ var DSAInputMask = class extends ShoelaceElement {
     )}
               aria-describedby=${this.error ? "input-mask error-text help-text" : "input-mask help-text"}
               @change=${this.handleChange}
-              @input=${this.handleInput}
               @invalid=${this.handleInvalid}
+              @keyup=${this.handleDocumentKeyUp}
               @keydown=${this.handleKeyDown}
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
@@ -355,6 +363,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], DSAInputMask.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], DSAInputMask.prototype, "maskedValue", 2);
 __decorateClass([
   property()
 ], DSAInputMask.prototype, "title", 2);
@@ -392,10 +403,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSAInputMask.prototype, "readonly", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], DSAInputMask.prototype, "validate", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
+  property({ type: Boolean })
 ], DSAInputMask.prototype, "error", 2);
 __decorateClass([
   property({ attribute: "error-message" })
@@ -427,6 +435,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], DSAInputMask.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputMask.prototype, "mask", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], DSAInputMask.prototype, "handleDisabledChange", 1);

package/dist/chunks/{chunk.SQMWMSBA.js → chunk.7OLEA3GQ.js}

@@ -1,13 +1,21 @@
 // src/components/input-mask/input-mask.utils.ts
-var specialCharPattern = /[\W]+/g;
+var specialCharPattern = /[^a-zA-Z0-9#?_]+/g;
 var normalCharPattern = /^[_A-z0-9]*((-)*[_A-z0-9])*$/;
+var maskOptions = {
+  allChar: "_",
+  numericChar: "#dDmMyYaA09",
+  alphaChar: "?LaA"
+};
+function keepMaskChars(word) {
+  return word.replace(/[^_#dDmMyYaA09?L]+/g, "");
+}
 function stripSpecialChars(word) {
   return word.replace(specialCharPattern, "");
 }
 function isSpecialChar(word) {
   return word.match(specialCharPattern) !== null;
 }
-function getMaskedValue(rawValue, mask) {
+function rawValueToMaskedValue(rawValue, mask) {
   const explodedValue = [...rawValue];
   const explodedMask = [...mask];
   let valueIndex = 0;
@@ -30,6 +38,26 @@ function getMaskedValue(rawValue, mask) {
   });
   return maskedValue;
 }
+var BASE_RADIX = 10;
+function maskedValueToRawValue(value, mask) {
+  let rawValue = "";
+  const maskControl = keepMaskChars(mask);
+  for (let maskIndex = 0, valueIndex = 0; maskIndex < maskControl.length; ++maskIndex) {
+    if (value[valueIndex] === void 0) {
+      return rawValue;
+    }
+    const valueCharMatchesMaskAny = maskOptions.allChar.indexOf(maskControl[maskIndex]) >= 0;
+    const valueCharMatchesMaskNumber = isFinite(parseInt(value[valueIndex], BASE_RADIX)) && maskOptions.numericChar.indexOf(maskControl[maskIndex]) >= 0;
+    const valueCharMatchesMaskLetter = value[valueIndex].match(/[A-Z]/i) && maskOptions.alphaChar.indexOf(maskControl[maskIndex]) >= 0;
+    if (valueCharMatchesMaskAny || valueCharMatchesMaskLetter || valueCharMatchesMaskNumber) {
+      rawValue += value[valueIndex];
+      ++valueIndex;
+    } else {
+      break;
+    }
+  }
+  return rawValue;
+}
 var IBANTestValues = [
   "AD1400080001001234567890",
   "AT483200000012345864",
@@ -199,8 +227,10 @@ var NIRTestValues = ["187089932132113"];
 export {
   specialCharPattern,
   normalCharPattern,
+  maskOptions,
   stripSpecialChars,
-  getMaskedValue,
+  rawValueToMaskedValue,
+  maskedValueToRawValue,
   IBANTestValues,
   BICTestValues,
   NIRTestValues

package/dist/chunks/{chunk.UPYCV66H.js → chunk.A3UKO7AU.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.J2XNYTTZ.js";
+} from "./chunk.3GJ3KGGY.js";
 
 // src/components/checkbox-button/checkbox-button.styles.ts
 import { css } from "lit";

package/dist/chunks/{chunk.QDZXNGR6.js → chunk.BL4IZFBA.js}

@@ -1,6 +1,6 @@
 import {
   radio_button_styles_default
-} from "./chunk.EM4JONLW.js";
+} from "./chunk.C7CCBBLF.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";

package/dist/chunks/{chunk.EM4JONLW.js → chunk.C7CCBBLF.js}

@@ -1,6 +1,6 @@
 import {
   button_styles_default
-} from "./chunk.J2XNYTTZ.js";
+} from "./chunk.3GJ3KGGY.js";
 
 // src/components/radio-button/radio-button.styles.ts
 import { css } from "lit";

package/dist/chunks/{chunk.JJLAOWR2.js → chunk.GY5KJYSY.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.CMJ2SRTL.js";
 import {
   combobox_styles_default
-} from "./chunk.WFJLQFI3.js";
+} from "./chunk.O4XPNLT4.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";

package/dist/chunks/chunk.H2JSXKGD.js

@@ -0,0 +1,83 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/anchor-tag/anchor-tag.styles.ts
+import { css } from "lit";
+var anchor_tag_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+  }
+
+  .anchor-tag {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    user-select: none;
+    border-radius: var(--dsa-wc-tag-border-radius);
+    text-decoration: none;
+    color: hsla(120, 1%, 27%, 1);
+    background: hsla(0, 0%, 85%, 1);
+  }
+
+  .anchor-tag:hover {
+    color: hsla(265, 90%, 39%, 1);
+    background: hsla(265, 69%, 94%, 1);
+  }
+
+  .anchor-tag:active {
+    color: hsla(264, 68%, 25%, 1);
+    background: hsla(267, 61%, 81%, 1);
+  }
+
+  .anchor-tag__prefix,
+  .anchor-tag__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .anchor-tag__prefix {
+    margin-inline-end: var(--dsa-wc-tag-icon-spacing);
+  }
+
+  .anchor-tag__suffix {
+    margin-inline-start: var(--dsa-wc-tag-icon-spacing);
+  }
+
+  .anchor-tag__content {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+  }
+
+  /*
+  * Size modifiers
+  */
+
+  .anchor-tag--small {
+    font: var(--dsa-wc-tag-small-font-size);
+    height: var(--dsa-wc-tag-small-height);
+    padding: 0 var(--dsa-wc-tag-small-padding-y);
+  }
+
+  .anchor-tag--medium {
+    font: var(--dsa-wc-tag-medium-font-size);
+    height: var(--dsa-wc-tag-medium-height);
+    padding: 0 var(--dsa-wc-tag-medium-padding-y);
+  }
+
+  .anchor-tag--large {
+    font: var(--dsa-wc-tag-large-font-size);
+    height: var(--dsa-wc-tag-large-height);
+    padding: 0 var(--dsa-wc-tag-large-padding-y);
+  }
+`;
+
+export {
+  anchor_tag_styles_default
+};

package/dist/chunks/{chunk.ZKYSHEVZ.js → chunk.IER4ZBFV.js}

@@ -1,8 +1,9 @@
 // src/components/input-mask/input-mask.configs.ts
 var IBANConfig = {
   placeholder: "____ ____ ____ ____ ____ ____ ____ ___",
+  mask: "LL__ ____ ____ ____ ____ ____ ____ ___",
   pattern: "^(?:((?:IT|SM)\\d{2}[A-Z]{1}\\d{22})|(NL\\d{2}[A-Z]{4}\\d{10})|(LV\\d{2}[A-Z]{4}\\d{13})|((?:BG|GB|IE)\\d{2}[A-Z]{4}\\d{14})|(GI\\d{2}[A-Z]{4}\\d{15})|(RO\\d{2}[A-Z]{4}\\d{16})|(MT\\d{2}[A-Z]{4}\\d{23})|(NO\\d{13})|((?:DK|FI)\\d{16})|((?:SI)\\d{17})|((?:AT|EE|LU|LT)\\d{18})|((?:HR|LI|CH)\\d{19})|((?:DE|VA)\\d{20})|((?:AD|CZ|ES|MD|SK|SE)\\d{22})|(PT\\d{23})|((?:IS)\\d{24})|((?:BE)\\d{14})|((?:FR|MC|GR)\\d{25})|((?:PL|HU|CY)\\d{26}))$",
-  "help-text": `Indicaficatif pays en 2 lettres majuscules suivi de 10 \xE0 31 charact\xE8res num\xE9riques`
+  "help-text": `Indicatif pays en 2 lettres majuscules suivi de 10 \xE0 31 charact\xE8res num\xE9riques`
 };
 var BICConfig = {
   placeholder: "____ __ __ ___",
@@ -11,6 +12,7 @@ var BICConfig = {
 };
 var NIRConfig = {
   placeholder: "_ __ __ __ ___ ___ __",
+  mask: "# ## ## ## ### ### ##",
   pattern: `[12][0-9]{2}(0[1-9]|1[0-2])(2[AB]|[0-9]{2})[0-9]{3}[0-9]{3}([0-9]{2})`,
   "help-text": "15 charact\xE8res"
 };