@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.KOH5V4C6.js

@@ -0,0 +1,552 @@
+import {
+  DSASelect
+} from "./chunk.PWWER3ZK.js";
+import {
+  getMaskedValue,
+  stripSpecialChars
+} from "./chunk.SQMWMSBA.js";
+import {
+  PhoneConfig
+} from "./chunk.DRGGQ4WL.js";
+import {
+  input_phone_styles_default
+} from "./chunk.HC5BO5YV.js";
+import {
+  frenchFlag,
+  frenchNumberPrefix,
+  phoneInputValidityRegex,
+  phonePrefixOptions
+} from "./chunk.6ZQ4OQ2C.js";
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  FormControlController
+} from "./chunk.KIFBWPW5.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/input-phone/input-phone.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { LocalizeController } from "@shoelace-style/localize";
+var DSAInputPhone = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["dsa-blur", "dsa-input"]
+    });
+    this.hasSlotController = new HasSlotController(
+      this,
+      "help-text",
+      "label",
+      "prefix"
+    );
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.title = "";
+    this.name = "";
+    this.value = "";
+    this.phonePrefix = "+33";
+    this.phoneNumber = "";
+    this.defaultValue = "";
+    this.size = "medium";
+    this.variant = "base";
+    this.label = "";
+    this.helpText = "";
+    this.clearable = false;
+    this.disabled = false;
+    this.placeholder = PhoneConfig.placeholder;
+    this.readonly = false;
+    this.validate = false;
+    this.error = false;
+    this.errorMessage = "";
+    this.form = "";
+    this.required = false;
+    this.pattern = PhoneConfig.pattern;
+    this.placement = "bottom-start";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    if (this.validate) {
+      if (this.phoneNumber.length > 0) {
+        const matches = this.value.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;
+    }
+    return this.inputEl.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.inputEl.validationMessage;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+    this.setPhoneFromValue(this.value);
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("phonePrefix") || changedProperties.has("phoneNumber")) {
+      if (!frenchNumberPrefix.includes(this.phonePrefix)) {
+        this.phonePrefix = changedProperties.get("phonePrefix");
+      }
+      if (this.phoneNumber.length === 0) {
+        this.value = "";
+      } else {
+        const placeholderLength = stripSpecialChars(this.placeholder).length;
+        this.value = `${this.phonePrefix}${this.phoneNumber.substring(
+          0,
+          placeholderLength
+        )}`;
+      }
+    }
+    if (changedProperties.has("value")) {
+      this.setPhoneFromValue(this.value);
+    }
+  }
+  setPhoneFromValue(value) {
+    const placeholderLength = stripSpecialChars(this.placeholder).length;
+    const prefixIndex = frenchNumberPrefix.findIndex(
+      (prefix) => value.startsWith(prefix)
+    );
+    if (prefixIndex >= 0) {
+      const prefix = frenchNumberPrefix[prefixIndex];
+      const number = value.replace(prefix, "").substring(0, placeholderLength);
+      this.phonePrefix = prefix;
+      this.phoneNumber = number;
+      this.value = `${prefix}${number}`;
+    }
+  }
+  // Select handlers
+  handlePhonePrefixChange(event) {
+    const { target } = event;
+    if (target instanceof DSASelect) {
+      this.phonePrefix = target.value;
+    }
+    this.emit("dsa-change");
+  }
+  handlePhonePrefixKeydown(event) {
+    if (event.key === "Tab") {
+      this.phonePrefixEl.hide();
+    }
+    this.emit("dsa-change");
+  }
+  // Input Mask handlers
+  handleChange(event) {
+    const { target } = event;
+    if (target instanceof HTMLInputElement) {
+      const strippedValue = stripSpecialChars(target.value);
+      this.phoneNumber = strippedValue;
+    }
+    this.emit("dsa-change");
+  }
+  handleInput(event) {
+    const { target } = event;
+    if (target instanceof HTMLInputElement) {
+      const strippedValue = stripSpecialChars(target.value);
+      this.phoneNumber = strippedValue;
+    }
+    this.emit("dsa-input");
+  }
+  handleKeyDown(event) {
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented && !event.isComposing) {
+          this.formControlController.submit();
+        }
+      });
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  // Clear Icon handlers
+  handleClearIconClick(event) {
+    this.phonePrefix = "+33";
+    this.phoneNumber = "";
+    this.emit("dsa-clear");
+    this.emit("dsa-input");
+    this.emit("dsa-change");
+    this.inputEl.focus();
+    event.stopPropagation();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.phonePrefixEl.setAttribute("disabled", "");
+    } else {
+      this.phonePrefixEl.removeAttribute("disabled");
+    }
+    this.formControlController.setValidity(this.disabled);
+  }
+  async handleValueChange() {
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+  }
+  handleErrorChange() {
+    if (this.error) {
+      this.setAttribute("aria-invalid", "true");
+    } else {
+      this.removeAttribute("aria-invalid");
+    }
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.inputEl.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.inputEl.blur();
+  }
+  /** Selects all the text in the input. */
+  select() {
+    this.inputEl.select();
+  }
+  /** Sets the start and end positions of the text selection (0-based). */
+  setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    this.inputEl.setSelectionRange(
+      selectionStart,
+      selectionEnd,
+      selectionDirection
+    );
+  }
+  /** Replaces a range of text with a new string. */
+  setRangeText(replacement, start, end, selectMode) {
+    this.inputEl.setRangeText(replacement, start, end, selectMode);
+    if (this.phoneNumber !== this.inputEl.value) {
+      this.phoneNumber = this.inputEl.value;
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.phoneNumber === "" && this.required)
+      return false;
+    return phoneInputValidityRegex.test(this.value);
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.phoneNumber === "" && this.required)
+      return false;
+    return phoneInputValidityRegex.test(this.value);
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    if (this.validate) {
+      this.inputEl.setCustomValidity(this.error ? this.errorMessage : "");
+    } else {
+      this.inputEl.setCustomValidity(message);
+    }
+    this.formControlController.updateValidity();
+  }
+  render() {
+    var _a;
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasPrefixIcon = this.hasSlotController.test("prefix");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.phoneNumber === "number" || ((_a = this.phoneNumber) == null ? void 0 : _a.length) > 0);
+    const maskedNumber = getMaskedValue(this.phoneNumber, this.placeholder);
+    const placeholder = this.placeholder.substring(maskedNumber.length || 0);
+    return html`<div
+    part="form-control"
+    class=${classMap({
+      "form-control": true,
+      "form-control--error": this.error,
+      "form-control--readonly": this.readonly,
+      "form-control--disabled": this.disabled,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText
+    })}
+  >
+    <label
+      part="form-control-label"
+      class='form-control__label'
+      for="input-phone"
+      aria-hidden=${hasLabel ? "false" : "true"}
+
+    >
+      ${this.required ? html`<span class="form-control__label-required">*</span>` : ""}
+      <slot name="label">${this.label}</slot>
+    </label>
+      <slot name="tooltip" class="form-control__tooltip"></slot>
+
+    <div part="base" class="input-phone__input form-control__field" >
+
+    <dsa-select
+      id="prefix"
+      part="select"
+      class=${classMap({
+      "input-phone__select": true,
+      "input-phone__select-error": this.error
+    })}
+      .variant=${live(this.variant)}
+      .value=${this.phonePrefix}
+      ?disabled=${this.disabled || this.readonly}
+      title=${this.localize.term("countryCallingCode")}
+      .placement=${this.placement}
+      hoist
+      .size=${this.size}
+      @dsa-change=${this.handlePhonePrefixChange}
+      @keydown=${this.handlePhonePrefixKeydown}
+      enterkeyhint="enter"
+      display-value
+      no-sync-width
+    >
+    ${frenchFlag}
+    ${phonePrefixOptions.map((option) => {
+      return html`<dsa-option value=${option.value} .size=${this.size}>
+        ${frenchFlag} (${option.value}) ${this.localize.term(option.label)}
+      </dsa-option>`;
+    })}
+  </dsa-select>
+
+    <div
+        part="mask"
+        class=${classMap({
+      "input-phone": true,
+      // Sizes
+      "input-phone--small": this.size === "small",
+      "input-phone--medium": this.size === "medium",
+      "input-phone--large": this.size === "large",
+      // States
+      "input-phone--error": this.error,
+      "input-phone--on-layer": this.variant === "layer",
+      "input-phone--on-base": this.variant === "base",
+      "input-phone--disabled": this.disabled,
+      "input-phone--readonly": this.readonly,
+      "input-phone--focused": this.hasFocus,
+      "input-phone--empty": this.phoneNumber === ""
+    })}
+      >
+      <slot name="prefix" part="prefix" class="input-phone__prefix"></slot>
+
+
+
+      <div class=${classMap({
+      "input-phone__placeholder": true
+    })}   aria-placeholder=${placeholder} aria-hidden="true"
+          >
+            <span class="input-phone__value"  aria-hidden="true">
+            ${maskedNumber}</span>
+            ${placeholder}
+           </div
+        >
+
+
+        <input
+          part="input"
+          id="input-phone"
+          class=${classMap({
+      "input-phone__control": true,
+      "input-phone__control-with-prefix": hasPrefixIcon
+    })}
+          type="text"
+          title=${this.title}
+          name=${ifDefined(this.name)}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.placeholder.length)}
+          size=${ifDefined(this.placeholder.length)}
+          pattern=${ifDefined(this.pattern)}
+          placeholder=${ifDefined(this.placeholder)}
+          .value=${live(maskedNumber)}
+          autocomplete='tel-national'
+          autocorrect=${ifDefined(this.autocorrect)}
+          ?autofocus=${this.autofocus}
+          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"}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @invalid=${this.handleInvalid}
+        />
+
+
+        ${hasClearIcon ? html`
+                <dsa-icon-button
+                  part="clear-button"
+                  class="input-phone__clear"
+                  aria-label=${this.localize.term("clearEntry")}
+                  @click=${this.handleClearIconClick}
+                  name="close"
+                ></dsa-icon-button>
+              ` : ""}
+
+
+      </div>
+    </div>
+
+    <slot
+      name="help-text"
+      part="form-control-help-text"
+      id="help-text"
+      class="form-control__help-text"
+      aria-hidden=${hasHelpText ? "false" : "true"}
+    >
+      ${this.helpText}
+    </slot>
+
+    ${this.error && !this.disabled ? html`<dsa-error-text id="error-text" class="form-control__error-text"
+            >${this.errorMessage}</dsa-error-text
+          >` : ""}
+    </div>
+  </div>`;
+  }
+};
+DSAInputPhone.styles = input_phone_styles_default;
+__decorateClass([
+  query(".input-phone__control")
+], DSAInputPhone.prototype, "inputEl", 2);
+__decorateClass([
+  query(".input-phone__select")
+], DSAInputPhone.prototype, "phonePrefixEl", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], DSAInputPhone.prototype, "title", 2);
+__decorateClass([
+  property()
+], DSAInputPhone.prototype, "name", 2);
+__decorateClass([
+  property()
+], DSAInputPhone.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: false })
+], DSAInputPhone.prototype, "phonePrefix", 2);
+__decorateClass([
+  property({ attribute: false })
+], DSAInputPhone.prototype, "phoneNumber", 2);
+__decorateClass([
+  defaultValue()
+], DSAInputPhone.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputPhone.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputPhone.prototype, "variant", 2);
+__decorateClass([
+  property()
+], DSAInputPhone.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], DSAInputPhone.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInputPhone.prototype, "clearable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputPhone.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputPhone.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputPhone.prototype, "validate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputPhone.prototype, "error", 2);
+__decorateClass([
+  property({ attribute: "error-message" })
+], DSAInputPhone.prototype, "errorMessage", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputPhone.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAInputPhone.prototype, "required", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "pattern", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAInputPhone.prototype, "minlength", 2);
+__decorateClass([
+  property()
+], DSAInputPhone.prototype, "autocorrect", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAInputPhone.prototype, "autofocus", 2);
+__decorateClass([
+  property()
+], DSAInputPhone.prototype, "enterkeyhint", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputPhone.prototype, "placement", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSAInputPhone.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("value", { waitUntilFirstUpdate: true })
+], DSAInputPhone.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("error")
+], DSAInputPhone.prototype, "handleErrorChange", 1);
+DSAInputPhone = __decorateClass([
+  customElement("dsa-input-phone")
+], DSAInputPhone);
+
+export {
+  DSAInputPhone
+};

package/dist/chunks/chunk.LC54322H.js

@@ -0,0 +1,99 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/accordion/accordion.styles.ts
+import { css } from "lit";
+var accordion_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .accordion {
+    border: solid 1px var(--dsa-wc-accordion-border-color);
+    border-radius: var(--dsa-wc-accordion-border-radius);
+    background-color: var(--dsa-wc-accordion-background-color);
+    font: var(--dsa-wc-accordion-font);
+    color: var(--dsa-wc-accordion-color);
+    overflow-anchor: none;
+  }
+
+  .accordion--disabled {
+    opacity: 0.5;
+  }
+
+  .accordion__header {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    padding: var(--dsa-wc-accordion-padding);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .accordion:focus-within {
+    outline: var(--dsa-wc-focus-ring);
+  }
+  .accordion:hover:not(.accordion--disabled) {
+    border-color: var(--dsa-wc-accordion-hover-border-color);
+  }
+
+  .accordion:hover:not(.accordion--disabled) .accordion__header {
+    background-color: var(--dsa-wc-accordion-header-hover-background-color);
+  }
+
+  .accordion__header:not(accordion--open):focus-visible {
+    outline: none;
+  }
+
+  .accordion--disabled .accordion__header {
+    cursor: not-allowed;
+  }
+
+  .accordion--disabled .accordion__header:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .accordion__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .accordion__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    color: var(--dsa-wc-accordion-icon-color);
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+  }
+
+  .accordion--open.accordion--chevron .accordion__summary-icon {
+    rotate: 90deg;
+  }
+
+  .accordion--open.accordion--rtl.accordion--chevron .accordion__summary-icon {
+    rotate: -90deg;
+  }
+
+  .accordion--open .accordion__expand-icon,
+  .accordion:not(.accordion--open) .accordion__collapse-icon {
+    display: none;
+  }
+
+  .accordion__body {
+    overflow: hidden;
+  }
+
+  .accordion__content {
+    display: block;
+    padding: var(--dsa-wc-accordion-padding);
+  }
+`;
+
+export {
+  accordion_styles_default
+};

package/dist/chunks/chunk.LMJPQPQT.js

@@ -0,0 +1,26 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/icon/icon.styles.ts
+import { css } from "lit";
+var icon_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    box-sizing: content-box !important;
+  }
+
+  svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+export {
+  icon_styles_default
+};