@ds-autonomie/web-components 2.13.0 → 2.14.1

package/dist/chunks/chunk.I42LCUCM.js

@@ -0,0 +1,109 @@
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.AKYLOFUZ.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var DSABreadcrumbItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "prefix",
+      "suffix"
+    );
+    this.rel = "noreferrer noopener";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+  }
+  render() {
+    const isLink = this.href ? true : false;
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <slot
+          name="prefix"
+          part="prefix"
+          class="breadcrumb-item__prefix"
+        ></slot>
+
+        ${isLink ? html`
+              <a
+                part="label"
+                class="breadcrumb-item__label"
+                href="${this.href}"
+                target="${ifDefined(this.target ? this.target : void 0)}"
+                rel=${ifDefined(this.target ? this.rel : void 0)}
+              >
+                <slot></slot>
+              </a>
+            ` : html`
+              <button
+                role="link"
+                part="label"
+                type="button"
+                class="breadcrumb-item__label"
+              >
+                <slot></slot>
+              </button>
+            `}
+
+        <slot
+          name="suffix"
+          part="suffix"
+          class="breadcrumb-item__suffix"
+        ></slot>
+
+        <dsa-icon
+          class="breadcrumb-item__separator"
+          aria-hidden="true"
+          name=${this.localize.dir() === "rtl" ? "keyboard_arrow_left" : "keyboard_arrow_right"}
+          library="system"
+        ></dsa-icon>
+      </div>
+    `;
+  }
+};
+DSABreadcrumbItem.styles = breadcrumb_item_styles_default;
+__decorateClass([
+  property()
+], DSABreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSABreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], DSABreadcrumbItem.prototype, "rel", 2);
+DSABreadcrumbItem = __decorateClass([
+  customElement("dsa-breadcrumb-item")
+], DSABreadcrumbItem);
+
+export {
+  DSABreadcrumbItem
+};

package/dist/chunks/chunk.I5OZW4PT.js

@@ -0,0 +1,405 @@
+import {
+  DSASelect
+} from "./chunk.5OP4WI4B.js";
+import {
+  getPhoneConfig
+} from "./chunk.YKKP7YAT.js";
+import {
+  input_phone_styles_default
+} from "./chunk.LGIV2ORI.js";
+import {
+  frenchNumberPrefix,
+  phonePrefixOptions
+} from "./chunk.RJXLIOW7.js";
+import {
+  maskedValueToRawValue,
+  rawValueToMaskedValue,
+  stripSpecialChars
+} from "./chunk.7OLEA3GQ.js";
+import {
+  InputBase
+} from "./chunk.ZKUGZ55W.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  watch
+} from "./chunk.QB2NJE2Y.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.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 InputBase {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.maskedNumber = "";
+    this.phoneConfig = getPhoneConfig("+33");
+    this.placeholder = this.phoneConfig.placeholder;
+    this.pattern = this.phoneConfig.pattern;
+    this._isSyncing = false;
+    this.value = "";
+    this.phonePrefix = "+33";
+    this.phoneNumber = "";
+    this.inputPrefix = "";
+    this.placement = "bottom-start";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    let patternMatch = void 0;
+    if (this.phoneNumber.length > 0) {
+      const matches = this.value.match(this.pattern);
+      patternMatch = matches !== null;
+    }
+    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;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+    this.setPhoneFromValue(this.value);
+    this.maskedNumber = rawValueToMaskedValue(
+      this.phoneNumber,
+      this.placeholder
+    );
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("phonePrefix") && !frenchNumberPrefix.includes(this.phonePrefix)) {
+      this.phonePrefix = changedProperties.get("phonePrefix");
+    }
+  }
+  /*
+   * Event handlers
+   */
+  handleDocumentKeyUp() {
+    const strippedValue = stripSpecialChars(this.input.value);
+    const newValue = maskedValueToRawValue(
+      strippedValue,
+      this.phoneConfig.mask
+    );
+    const maskedValue = rawValueToMaskedValue(newValue, this.placeholder);
+    this.phoneNumber = newValue;
+    this.maskedNumber = maskedValue;
+    this.input.value = maskedValue;
+    this.updateValue();
+    this.formControlController.updateValidity();
+    this.emit("dsa-input");
+  }
+  handlePhonePrefixSelectChange(event) {
+    event.stopPropagation();
+    const { target } = event;
+    if (target instanceof DSASelect) {
+      this.phonePrefix = target.value;
+      this.updateValue();
+      this.emit("dsa-change");
+    }
+  }
+  handleInputChange(event) {
+    const { target } = event;
+    if (target instanceof HTMLInputElement) {
+      const strippedValue = stripSpecialChars(target.value);
+      this.phoneNumber = strippedValue;
+      this.updateValue();
+      this.emit("dsa-change");
+    }
+  }
+  handleClearIconClick(event) {
+    this.phonePrefix = "+33";
+    this.phoneNumber = "";
+    this.emit("dsa-clear");
+    this.emit("dsa-input");
+    this.emit("dsa-change");
+    this.input.focus();
+    event.stopPropagation();
+  }
+  /*
+   * Internal methods
+   */
+  updateValue() {
+    if (this._isSyncing) return;
+    this._isSyncing = true;
+    if (this.phoneNumber.length === 0) {
+      this.value = "";
+    } else {
+      const placeholderLength = stripSpecialChars(this.placeholder).length;
+      this.value = `${this.phonePrefix}${this.phoneNumber.substring(
+        0,
+        placeholderLength
+      )}`;
+    }
+    this._isSyncing = false;
+  }
+  updatePhoneConfig() {
+    this.phoneConfig = getPhoneConfig(this.phonePrefix);
+    this.placeholder = this.phoneConfig.placeholder;
+    this.pattern = this.phoneConfig.pattern;
+  }
+  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;
+    }
+  }
+  getDescriptionIds() {
+    let ids = ["input-phone"];
+    if (this.error) ids = [...ids, "error-text"];
+    ids = [...ids, "help-text", "description"];
+    return ids.join(" ");
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.phonePrefixEl.setAttribute("disabled", "");
+    } else {
+      this.phonePrefixEl.removeAttribute("disabled");
+    }
+    this.formControlController.setValidity(this.disabled);
+  }
+  async handleValueChange() {
+    if (this._isSyncing) return;
+    this._isSyncing = true;
+    this.setPhoneFromValue(this.value);
+    this.maskedNumber = rawValueToMaskedValue(
+      this.phoneNumber,
+      this.placeholder
+    );
+    await this.updateComplete;
+    this.formControlController.updateValidity();
+    this._isSyncing = false;
+  }
+  handlePhonePrefixChange() {
+    this.updatePhoneConfig();
+    this.updateValue();
+  }
+  handlePhoneNumberChange() {
+    this.updateValue();
+  }
+  /*
+   * Exposed methods
+   */
+  checkValidity() {
+    var _a;
+    const isValidInput = (_a = this.input) == null ? void 0 : _a.checkValidity();
+    if (this.phoneNumber.length === 0) {
+      return isValidInput != null ? isValidInput : false;
+    }
+    const matches = this.value.match(this.pattern);
+    const patternMatch = matches !== null;
+    return patternMatch;
+  }
+  reportValidity() {
+    var _a;
+    const isValidInput = (_a = this.input) == null ? void 0 : _a.reportValidity();
+    if (this.phoneNumber.length === 0) {
+      return isValidInput != null ? isValidInput : false;
+    }
+    const matches = this.value.match(this.pattern);
+    const patternMatch = matches !== null;
+    return patternMatch;
+  }
+  renderInput() {
+    var _a, _b, _c;
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasClearIcon = this.clearable && !this.disabled && !this.readonly && (typeof this.phoneNumber === "number" || ((_a = this.phoneNumber) == null ? void 0 : _a.length) > 0);
+    const placeholder = this.placeholder.substring(
+      this.maskedNumber.length || 0
+    );
+    return html`
+      <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,
+      "input-phone__select-success": this.success && !this.error
+    })}
+          .variant=${live(this.variant)}
+          .value=${this.phonePrefix}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          accessible-name=${this.localize.term("countryCallingCode")}
+          .placement=${this.placement}
+          hoist
+          .size=${this.size}
+          @dsa-change=${this.handlePhonePrefixSelectChange}
+          enterkeyhint="enter"
+          display-value
+          no-sync-width
+        >
+          ${phonePrefixOptions.map((option) => {
+      return html`
+              <dsa-option value=${option.value} .size=${this.size}>
+                <dsa-icon
+                  slot="prefix"
+                  name="french_flag"
+                  library="system"
+                  class="input-phone__flag"
+                ></dsa-icon>
+                ${this.localize.term(option.label)} (${option.value})
+              </dsa-option>
+            `;
+    })}
+        </dsa-select>
+
+        <div
+          class=${classMap({
+      "input-phone": true,
+      // States
+      "input-phone--error": this.error,
+      "input-phone--success": this.success && !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 === ""
+    })}
+        >
+          <span>${this.inputPrefix}</span>
+
+          <div class="input-phone__mask">
+            <div
+              class=${classMap({
+      "input-phone__placeholder": true
+    })}
+              aria-placeholder=${placeholder}
+              aria-hidden="true"
+            >
+              <span class="input-phone__value" aria-hidden="true">
+                ${this.maskedNumber}</span
+              >
+              ${placeholder}
+            </div>
+
+            <input
+              part="input"
+              id="input"
+              class=${classMap({
+      "input-phone__control": true
+    })}
+              type="text"
+              title=${ifDefinedAndNotEmpty(
+      hasLabel ? void 0 : (_b = this.accessibleName) != null ? _b : this.title
+    )}
+              name=${ifDefinedAndNotEmpty(this.name)}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              aria-disabled=${ifDefined(this.readonly ? "true" : void 0)}
+              ?required=${this.required}
+              minlength=${ifDefined(this.placeholder.length)}
+              maxlength=${ifDefined(this.placeholder.length)}
+              size=${ifDefined(this.placeholder.length)}
+              placeholder=${ifDefined(this.placeholder)}
+              .value=${live(this.maskedNumber)}
+              autocomplete="tel-national"
+              ?autofocus=${this.autofocus}
+              enterkeyhint=${ifDefined(this.enterkeyhint)}
+              inputmode="tel"
+              aria-label=${ifDefinedAndNotEmpty(
+      hasLabel ? void 0 : (_c = this.accessibleName) != null ? _c : this.title
+    )}
+              aria-describedby=${this.getDescriptionIds()}
+              aria-invalid=${ifDefined(this.error ? "true" : void 0)}
+              @change=${this.handleInputChange}
+              @keyup=${this.handleDocumentKeyUp}
+              @keydown=${this.handleKeyDown}
+              @focus=${this.handleFocus}
+              @blur=${this.handleBlur}
+              @invalid=${this.handleInvalid}
+            />
+          </div>
+          ${hasClearIcon ? html`
+                <dsa-icon-button
+                  part="clear-button"
+                  class="input-phone__clear"
+                  label=${this.localize.term("clearEntry")}
+                  @click=${this.handleClearIconClick}
+                  name="close"
+                  library="system"
+                >
+                </dsa-icon-button>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+DSAInputPhone.styles = input_phone_styles_default;
+__decorateClass([
+  query(".input-phone__control")
+], DSAInputPhone.prototype, "input", 2);
+__decorateClass([
+  query(".input-phone__select")
+], DSAInputPhone.prototype, "phonePrefixEl", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "maskedNumber", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "phoneConfig", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "placeholder", 2);
+__decorateClass([
+  state()
+], DSAInputPhone.prototype, "pattern", 2);
+__decorateClass([
+  property()
+], DSAInputPhone.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: false })
+], DSAInputPhone.prototype, "phonePrefix", 2);
+__decorateClass([
+  property({ attribute: false })
+], DSAInputPhone.prototype, "phoneNumber", 2);
+__decorateClass([
+  property({ attribute: "input-prefix" })
+], DSAInputPhone.prototype, "inputPrefix", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAInputPhone.prototype, "placement", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSAInputPhone.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("value")
+], DSAInputPhone.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("phonePrefix", { waitUntilFirstUpdate: true })
+], DSAInputPhone.prototype, "handlePhonePrefixChange", 1);
+__decorateClass([
+  watch("phoneNumber", { waitUntilFirstUpdate: true })
+], DSAInputPhone.prototype, "handlePhoneNumberChange", 1);
+DSAInputPhone = __decorateClass([
+  customElement("dsa-input-phone")
+], DSAInputPhone);
+
+export {
+  DSAInputPhone
+};

package/dist/chunks/chunk.IAEVVAIE.js

@@ -0,0 +1,191 @@
+import {
+  header_styles_default
+} from "./chunk.TRGRP3EU.js";
+import {
+  cnsaLogoSvg,
+  spaLogoSvg
+} from "./chunk.7TLERCGA.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.QY3AIGLE.js";
+import {
+  watch
+} from "./chunk.QB2NJE2Y.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/header/header.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSAHeader = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "external-links",
+      "second-logo",
+      "site-name",
+      "baseline",
+      "search"
+    );
+    this.localize = new LocalizeController(this);
+    this.firstLogo = "public";
+    this.logoHref = "/";
+    this.logoSize = "default";
+    this.searchExpanded = false;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleSearchExpandEvent = this.handleSearchExpandEvent.bind(this);
+    this.handleSearchCollapseEvent = this.handleSearchCollapseEvent.bind(this);
+    this.addEventListener("dsa-expand", this.handleSearchExpandEvent);
+    this.addEventListener("dsa-collapse", this.handleSearchCollapseEvent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("dsa-expand", this.handleSearchExpandEvent);
+    this.removeEventListener("dsa-collapse", this.handleSearchCollapseEvent);
+  }
+  handleSearchExpandEvent() {
+    this.searchExpanded = true;
+  }
+  handleSearchCollapseEvent() {
+    this.searchExpanded = false;
+  }
+  getFirtLogo() {
+    if (this.firstLogo === "pro") {
+      return spaLogoSvg(this.localize.term("spaGoToHomepage"));
+    }
+    return cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"));
+  }
+  handleSearchExpanded() {
+    if (this.hasSlotController.test("search")) {
+      const search = this.querySelector("dsa-header-search");
+      if (!search) return;
+      if (this.searchExpanded) {
+        search.setAttribute("expanded", "true");
+      } else {
+        search.removeAttribute("expanded");
+      }
+    }
+  }
+  handleMobile() {
+    if (this.hasSlotController.test("search")) {
+      const search = this.querySelector("dsa-header-search");
+      if (!search) return;
+      if (this.mobile) {
+        search.setAttribute("mobile", "true");
+      } else {
+        search.removeAttribute("mobile");
+      }
+    }
+  }
+  render() {
+    const hasBrand = this.hasSlotController.test("second-logo") || this.hasSlotController.test("site-name");
+    return html`
+      <header
+        part="base"
+        role="banner"
+        class=${classMap({
+      header: true,
+      "header--mobile": this.mobile === true,
+      "header--desktop": this.mobile === false,
+      "header--spa": this.firstLogo === "pro",
+      "header--cnsa": this.firstLogo === "public",
+      "header--with-external-links": this.hasSlotController.test("external-links"),
+      "header--with-second-logo": this.hasSlotController.test("second-logo"),
+      "header--with-navbar": this.hasSlotController.test("navbar"),
+      "header--with-site-info": this.hasSlotController.test("site-name") || this.hasSlotController.test("baseline")
+    })}
+      >
+        <ul class="external-links__container">
+          <slot name="external-links" part="external-links"></slot>
+        </ul>
+
+        <div class="header__main-container">
+          <section
+            part="main"
+            class=${classMap({
+      header__main: true,
+      "header--has-brand": hasBrand,
+      "header--search-expanded": this.hasSlotController.test("search") && this.searchExpanded
+    })}
+          >
+            <slot
+              name="first-logo"
+              part="first-logo"
+              class=${classMap({
+      logo: true,
+      "logo-large": this.logoSize === "large"
+    })}
+            >
+              <a href=${this.logoHref} class="logo-link">
+                ${this.getFirtLogo()}
+              </a>
+            </slot>
+            <div class="header__brand">
+              <slot
+                id="second-logo"
+                name="second-logo"
+                class="logo ${this.logoSize === "large" && "logo-large"}"
+              ></slot>
+              <div class="site-info">
+                <slot name="site-name" part="site-name"></slot>
+                <slot name="baseline" part="baseline"></slot>
+              </div>
+            </div>
+            <div class="header__actions">
+              <slot name="search" part="search"></slot>
+              <slot part="navigation"></slot>
+            </div>
+          </section>
+        </div>
+
+        <div class="header__navbar-container">
+          <slot name="navbar" part="navbar"></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+DSAHeader.styles = header_styles_default;
+__decorateClass([
+  query('[part="external-links"]')
+], DSAHeader.prototype, "externalLinks", 2);
+__decorateClass([
+  property({ reflect: true, attribute: "first-logo" })
+], DSAHeader.prototype, "firstLogo", 2);
+__decorateClass([
+  property({ reflect: true, attribute: "logo-href" })
+], DSAHeader.prototype, "logoHref", 2);
+__decorateClass([
+  property({ attribute: "logo-size" })
+], DSAHeader.prototype, "logoSize", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean, attribute: "search-expanded" })
+], DSAHeader.prototype, "searchExpanded", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAHeader.prototype, "mobile", 2);
+__decorateClass([
+  watch("searchExpanded")
+], DSAHeader.prototype, "handleSearchExpanded", 1);
+__decorateClass([
+  watch("mobile")
+], DSAHeader.prototype, "handleMobile", 1);
+DSAHeader = __decorateClass([
+  customElement("dsa-header")
+], DSAHeader);
+
+export {
+  DSAHeader
+};