@ds-autonomie/web-components 2.0.1 → 2.1.0

package/cdn/chunks/chunk.CCL2RZON.js

@@ -1,132 +0,0 @@
-import {
-  x
-} from "./chunk.7HUC6BF3.js";
-
-// src/components/input-phone/input-phone.utils.ts
-var frenchNumberPrefix = [
-  "+33",
-  "+262",
-  "+508",
-  "+590",
-  "+594",
-  "+596",
-  "+681",
-  "+687",
-  "+689"
-];
-var phonePrefixOptions = [
-  { value: "+33", label: "fr_FR" },
-  { value: "+590", label: "fr_GP" },
-  { value: "+594", label: "fr_GF" },
-  { value: "+596", label: "fr_MQ" },
-  { value: "+687", label: "fr_NC" },
-  { value: "+689", label: "fr_PF" },
-  { value: "+508", label: "fr_PM" },
-  { value: "+262", label: "fr_RE" },
-  { value: "+681", label: "fr_WF" }
-];
-var frenchFlagSelect = x`<svg
-  slot="prefix"
-  xmlns="http://www.w3.org/2000/svg"
-  width="28"
-  height="20"
-  fill="none"
-  aria-hidden="true"
->
-  <rect
-    width="27.5"
-    height="19.5"
-    x=".25"
-    y=".25"
-    fill="#fff"
-    stroke="#F5F5F5"
-    stroke-width=".5"
-    rx="1.75"
-  />
-  <mask
-    id="mask0_16382_21057"
-    width="28"
-    height="20"
-    x="0"
-    y="0"
-    maskUnits="userSpaceOnUse"
-    style="mask-type:luminance"
-  >
-    <rect
-      width="27.5"
-      height="19.5"
-      x=".25"
-      y=".25"
-      fill="#fff"
-      stroke="#fff"
-      stroke-width=".5"
-      rx="1.75"
-    />
-  </mask>
-  <g mask="url(#mask0_16382_21057)">
-    <path fill="#F44653" d="M18.666 0h9.333v20h-9.333z" />
-    <path
-      fill="#1035BB"
-      fill-rule="evenodd"
-      d="M0 20h9.333V0H0v20Z"
-      clip-rule="evenodd"
-    />
-  </g>
-</svg>`;
-var frenchFlagOption = (id) => x`<svg
-  slot="prefix"
-  xmlns="http://www.w3.org/2000/svg"
-  width="14"
-  height="15"
-  fill="none"
-  aria-hidden="true"
->
-  <g clip-path=${`url(#clip${id})`}>
-    <rect
-      width="13.5"
-      height="13.5"
-      x=".25"
-      y=".75"
-      fill="#fff"
-      stroke="#F5F5F5"
-      stroke-width=".5"
-      rx="1.75"
-    />
-    <mask
-      id=${`mask${id}`}
-      width="14"
-      height="15"
-      x="0"
-      y="0"
-      maskUnits="userSpaceOnUse"
-      style="mask-type:luminance"
-    >
-      <rect
-        width="13.5"
-        height="13.5"
-        x=".25"
-        y=".75"
-        fill="#fff"
-        stroke="#fff"
-        stroke-width=".5"
-        rx="1.75"
-      />
-    </mask>
-    <g mask=${`url(#mask${id})`}>
-      <path fill="#F44653" d="M9.334.5h4.667v14H9.334z" />
-      <path
-        fill="#1035BB"
-        fill-rule="evenodd"
-        d="M0 14.5h4.667V.5H0v14Z"
-        clip-rule="evenodd"
-      />
-    </g>
-  </g>
-</svg>`;
-
-export {
-  frenchNumberPrefix,
-  phonePrefixOptions,
-  frenchFlagSelect,
-  frenchFlagOption
-};

package/cdn/chunks/chunk.DIF52FDQ.js

@@ -1,183 +0,0 @@
-import {
-  header_search_styles_default
-} from "./chunk.GVVML3JJ.js";
-import {
-  l
-} from "./chunk.7PPSHHT2.js";
-import {
-  LocalizeController
-} from "./chunk.ZLWLHLBC.js";
-import {
-  e as e2
-} from "./chunk.IKHG7XGO.js";
-import {
-  ShoelaceElement,
-  e,
-  n,
-  r,
-  t
-} from "./chunk.DZB6XUZ7.js";
-import {
-  x
-} from "./chunk.7HUC6BF3.js";
-import {
-  __decorateClass
-} from "./chunk.4ZGVANML.js";
-
-// src/components/header-search/header-search.ts
-var DSAHeaderSearch = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.hasFocus = false;
-    this.value = "";
-    this.expanded = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "search");
-  }
-  async handleExpandClick() {
-    this.emit("dsa-expand");
-    this.expanded = true;
-    await this.updateComplete;
-    this.input.focus();
-  }
-  handleChange() {
-    this.value = this.input.value;
-    this.emit("dsa-change");
-  }
-  handleInput() {
-    this.value = this.input.value;
-    this.emit("dsa-input");
-  }
-  handleInputFocus() {
-    this.hasFocus = true;
-    this.emit("dsa-focus");
-  }
-  handleInputBlur() {
-    this.hasFocus = false;
-    this.emit("dsa-blur");
-  }
-  handleClearClick(event) {
-    this.value = "";
-    this.emit("dsa-clear");
-    this.emit("dsa-input");
-    this.emit("dsa-change");
-    this.input.focus();
-    event.stopPropagation();
-  }
-  handleKeyDown(event) {
-    event.stopPropagation();
-    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      setTimeout(() => {
-        if (!event.defaultPrevented && !event.isComposing) {
-          this.handleSubmitClick();
-        }
-      });
-    }
-  }
-  handleSubmitClick() {
-    this.emit("dsa-submit");
-  }
-  async handleCancelClick() {
-    this.emit("dsa-collapse");
-    this.expanded = false;
-    await this.updateComplete;
-    this.expandButton.focus();
-  }
-  render() {
-    if (!this.expanded) {
-      return x`
-        <button
-          aria-label=${this.localize.term("search")}
-          id="expand-button"
-          class="button button--navigation"
-          @click=${this.handleExpandClick}
-        >
-          <dsa-icon name="search" library="system"></dsa-icon>
-          <span class="expand-button__label"
-            >${this.localize.term("search")}</span
-          >
-        </button>
-      `;
-    }
-    return x`
-      <div class=${e2({ input: true, "input--focused": this.hasFocus })}>
-        <input
-          class="input__control"
-          type="search"
-          placeholder=${this.localize.term("search")}
-          aria-label=${this.localize.term("search")}
-          title=${this.localize.term("search")}
-          .value=${l(this.value)}
-          @change=${this.handleChange}
-          @input=${this.handleInput}
-          @focus=${this.handleInputFocus}
-          @blur=${this.handleInputBlur}
-          @keydown=${this.handleKeyDown}
-        />
-        ${this.value.length > 0 ? x`
-              <dsa-icon-button
-                id="clear-button"
-                part="clear-button"
-                name="cancel"
-                label=${this.localize.term("clearEntry")}
-                @click=${this.handleClearClick}
-                library="system"
-              ></dsa-icon-button>
-            ` : ""}
-      </div>
-
-      <button
-        class="icon-button icon-button--primary"
-        id="submit-button"
-        @click=${this.handleSubmitClick}
-        aria-label=${this.localize.term("search")}
-      >
-        <dsa-icon name="search" library="system"></dsa-icon>
-      </button>
-
-      <button
-        class="button button--tertiary"
-        id="cancel-button"
-        @click=${this.handleCancelClick}
-      >
-        ${this.localize.term("cancel")}
-      </button>
-    `;
-  }
-};
-DSAHeaderSearch.styles = header_search_styles_default;
-__decorateClass([
-  e(".input__control")
-], DSAHeaderSearch.prototype, "input", 2);
-__decorateClass([
-  e("#expand-button")
-], DSAHeaderSearch.prototype, "expandButton", 2);
-__decorateClass([
-  e("#submit-button")
-], DSAHeaderSearch.prototype, "submitButton", 2);
-__decorateClass([
-  e("#cancel-button")
-], DSAHeaderSearch.prototype, "cancelButton", 2);
-__decorateClass([
-  e("#clear-button")
-], DSAHeaderSearch.prototype, "clearButton", 2);
-__decorateClass([
-  r()
-], DSAHeaderSearch.prototype, "hasFocus", 2);
-__decorateClass([
-  n()
-], DSAHeaderSearch.prototype, "value", 2);
-__decorateClass([
-  n({ reflect: true, type: Boolean })
-], DSAHeaderSearch.prototype, "expanded", 2);
-DSAHeaderSearch = __decorateClass([
-  t("dsa-header-search")
-], DSAHeaderSearch);
-
-export {
-  DSAHeaderSearch
-};

package/cdn/chunks/chunk.GVVML3JJ.js

@@ -1,272 +0,0 @@
-import {
-  component_styles_default
-} from "./chunk.PSQJDSB2.js";
-import {
-  i
-} from "./chunk.4KHZQZ3M.js";
-
-// src/components/header-search/header-search.styles.ts
-var header_search_styles_default = i`
-  ${component_styles_default}
-
-  :host {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--dsa-spacing-8);
-    flex: 1;
-    width: 100%;
-  }
-
-  .mobile {
-    display: block;
-  }
-  .desktop {
-    display: none;
-  }
-
-  /* Input */
-  .input {
-    position: relative;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    vertical-align: middle;
-    width: 100%;
-    min-width: 0;
-    font: var(--dsa-wc-input-text-field-font);
-    border-bottom: 1px solid var(--dsa-wc-header-search-input-color);
-  }
-
-  .input--focused {
-    outline: var(--dsa-wc-focus-ring);
-    outline-offset: var(--dsa-wc-focus-ring-offset);
-  }
-
-  .input__control {
-    display: inline-flex;
-    flex-direction: row;
-    flex: 1 1 auto;
-    font-family: inherit;
-    font-weight: inherit;
-    min-width: 0;
-    height: 100%;
-    border: none;
-    background: none;
-    box-shadow: none;
-    margin: 0;
-    cursor: inherit;
-    -webkit-appearance: none;
-    color: var(--dsa-wc-header-search-input-color);
-
-    font-size: 14px;
-    padding: 8px 0 8px 8px;
-    height: 34px;
-  }
-
-  .input__control::placeholder {
-    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
-    opacity: 1;
-  }
-
-  .input__control::-webkit-search-decoration,
-  .input__control::-webkit-search-cancel-button,
-  .input__control::-webkit-search-results-button,
-  .input__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-  .input__control:focus {
-    outline: none;
-  }
-
-  /* Buttons */
-  .button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-style: solid;
-    border-width: var(--dsa-wc-button-border-width);
-    border-radius: var(--dsa-wc-button-border-radius);
-    text-decoration: none;
-    user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
-    padding: 0 var(--dsa-wc-button-padding-horizontal);
-    transition: var(--dsa-wc-transition-x-fast) background-color,
-      var(--dsa-wc-transition-x-fast) color,
-      var(--dsa-wc-transition-x-fast) border,
-      var(--dsa-wc-transition-x-fast) box-shadow;
-    cursor: pointer;
-  }
-  .button::-moz-focus-inner {
-    border: 0;
-  }
-  .button:focus {
-    outline: none;
-  }
-  .button:focus-visible {
-    outline: var(--dsa-wc-focus-ring);
-    outline-offset: var(--dsa-wc-focus-ring-offset);
-  }
-
-  .button--tertiary {
-    padding: 0;
-  }
-  .button--tertiary {
-    background-color: var(--dsa-wc-button-tertiary-on-base-color);
-    border: none;
-    color: var(--dsa-wc-button-tertiary-on-base-font-color);
-  }
-  .button--tertiary:hover {
-    background-color: var(--dsa-wc-button-tertiary-on-base-hover-color);
-    color: var(--dsa-wc-button-tertiary-on-base-hover-font-color);
-  }
-  .button--tertiary:active {
-    background-color: var(--dsa-wc-button-tertiary-on-base-active-color);
-    color: var(--dsa-wc-button-tertiary-on-base-active-font-color);
-  }
-  .button--navigation {
-    padding: 0;
-  }
-  .button--navigation {
-    background-color: var(--dsa-wc-button-navigation-on-base-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-base-font-color);
-  }
-  .button--navigation:hover {
-    background-color: var(--dsa-wc-button-navigation-on-base-hover-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-base-hover-font-color);
-  }
-  .button--navigation:active {
-    background-color: var(--dsa-wc-button-navigation-on-base-active-color);
-    border-color: transparent;
-    color: var(--dsa-wc-button-navigation-on-base-active-font-color);
-  }
-
-  .icon-button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    border: none;
-    border-radius: var(--dsa-wc-icon-button-border-radius);
-    font-size: inherit;
-    padding: var(
-      --dsa-wc-internal-icon-button-padding,
-      var(--dsa-wc-icon-button-padding)
-    );
-    cursor: pointer;
-    transition: var(--dsa-wc-transition-x-fast) color;
-    -webkit-appearance: none;
-  }
-  .icon-button:focus {
-    outline: none;
-  }
-  .icon-button:focus-visible {
-    outline: var(--dsa-wc-focus-ring);
-    outline-offset: var(--dsa-wc-focus-ring-offset);
-    border-radius: var(--dsa-wc-focus-ring-radius);
-  }
-
-  .icon-button--primary {
-    background-color: var(--dsa-wc-button-primary-on-base-color);
-    border-color: var(--dsa-wc-button-primary-on-base-color);
-    color: var(--dsa-wc-button-primary-on-base-font-color);
-  }
-  .icon-button--primary:hover:not(.icon-button--disabled) {
-    background-color: var(--dsa-wc-button-primary-on-base-hover-color);
-    border-color: var(--dsa-wc-button-primary-on-base-hover-color);
-    color: var(--dsa-wc-button-primary-on-base-hover-font-color);
-  }
-  .icon-button--primary:active:not(.icon-button--disabled) {
-    background-color: var(--dsa-wc-button-primary-on-base-active-color);
-    border-color: var(--dsa-wc-button-primary-on-base-active-color);
-    color: var(--dsa-wc-button-primary-on-base-active-font-color);
-  }
-
-  #expand-button {
-    font: var(--dsa-wc-button-font);
-    height: var(--dsa-wc-form-input-height);
-    line-height: calc(
-      var(--dsa-wc-form-input-height) - var(--dsa-wc-button-border-width) * 2
-    );
-    padding: var(
-      --dsa-wc-internal-icon-button-padding,
-      var(--dsa-wc-icon-button-padding)
-    );
-  }
-  #expand-button dsa-icon {
-    width: 20px;
-    height: 20px;
-    pointer-events: none;
-  }
-  .expand-button__label {
-    display: none;
-  }
-
-  #submit-button dsa-icon {
-    width: 20px;
-    height: 20px;
-    pointer-events: none;
-  }
-
-  #cancel-button {
-    font: var(--dsa-wc-button-font-small);
-    height: var(--dsa-wc-form-input-height-small);
-    line-height: calc(
-      var(--dsa-wc-form-input-height-small) - var(--dsa-wc-button-border-width) *
-        2
-    );
-    border-radius: var(--dsa-wc-button-border-radius);
-    margin-inline-start: var(--dsa-spacing-8);
-  }
-
-  @media screen and (min-width: 720px) {
-    :host {
-      gap: var(--dsa-spacing-16);
-    }
-
-    .mobile {
-      display: none;
-    }
-    .desktop {
-      display: block;
-    }
-
-    .input__control {
-      font: var(--dsa-wc-header-search-input-font);
-      height: 40px;
-    }
-
-    #expand-button {
-      padding: unset;
-    }
-    #expand-button dsa-icon {
-      width: 1em;
-      height: 1em;
-      margin-inline-end: var(--dsa-wc-button-icon-spacing);
-    }
-    .expand-button__label {
-      display: unset;
-    }
-
-    #submit-button dsa-icon {
-      width: 24px;
-      height: 24px;
-    }
-
-    #cancel-button {
-      font: var(--dsa-wc-button-font);
-      height: var(--dsa-wc-form-input-height);
-      line-height: calc(
-        var(--dsa-wc-form-input-height) - var(--dsa-wc-button-border-width) * 2
-      );
-      border-radius: var(--dsa-wc-button-border-radius);
-      margin-inline-start: 0;
-    }
-  }
-`;
-
-export {
-  header_search_styles_default
-};