@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.G7AELPSO.js

@@ -0,0 +1,131 @@
+import {
+  icon_styles_default
+} from "./chunk.LMJPQPQT.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.7J7CS3BK.js";
+import {
+  requestIcon
+} from "./chunk.23TOS4ZE.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/icon/icon.ts
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+var parser;
+var DSAIcon = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.svg = "";
+    this.label = "";
+    this.library = "default";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    watchIcon(this);
+  }
+  firstUpdated() {
+    this.setIcon();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unwatchIcon(this);
+  }
+  getUrl() {
+    const library = getIconLibrary(this.library);
+    if (this.name && library) {
+      return library.resolver(this.name);
+    }
+    return this.src;
+  }
+  handleLabelChange() {
+    const hasLabel = typeof this.label === "string" && this.label.length > 0;
+    if (hasLabel) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", this.label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+  }
+  async setIcon() {
+    var _a;
+    const library = getIconLibrary(this.library);
+    const url = this.getUrl();
+    if (!parser) {
+      parser = new DOMParser();
+    }
+    if (url) {
+      try {
+        const file = await requestIcon(url);
+        if (url !== this.getUrl()) {
+          return;
+        } else if (file.ok) {
+          const doc = parser.parseFromString(file.svg, "text/html");
+          const svgEl = doc.body.querySelector("svg");
+          if (svgEl !== null) {
+            svgEl.part.add("svg");
+            (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, svgEl);
+            this.svg = svgEl.outerHTML;
+            this.emit("dsa-load");
+          } else {
+            this.svg = "";
+            this.emit("dsa-error");
+          }
+        } else {
+          this.svg = "";
+          this.emit("dsa-error");
+        }
+      } catch (e) {
+        this.emit("dsa-error");
+      }
+    } else if (this.svg.length > 0) {
+      this.svg = "";
+    }
+  }
+  render() {
+    return html` ${unsafeSVG(this.svg)} `;
+  }
+};
+DSAIcon.styles = icon_styles_default;
+__decorateClass([
+  state()
+], DSAIcon.prototype, "svg", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAIcon.prototype, "name", 2);
+__decorateClass([
+  property()
+], DSAIcon.prototype, "src", 2);
+__decorateClass([
+  property()
+], DSAIcon.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAIcon.prototype, "library", 2);
+__decorateClass([
+  watch("label")
+], DSAIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["name", "src", "library"])
+], DSAIcon.prototype, "setIcon", 1);
+DSAIcon = __decorateClass([
+  customElement("dsa-icon")
+], DSAIcon);
+
+export {
+  DSAIcon
+};

package/dist/chunks/chunk.GI7VDIWX.js

@@ -0,0 +1,24 @@
+// src/internal/default-value.ts
+import { defaultConverter } from "lit";
+var defaultValue = (propertyName = "value") => (proto, key) => {
+  const ctor = proto.constructor;
+  const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+  ctor.prototype.attributeChangedCallback = function(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.GYTA2LJC.js

@@ -0,0 +1,145 @@
+import {
+  checkbox_button_styles_default
+} from "./chunk.UPYCV66H.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/checkbox-button/checkbox-button.ts
+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 { html } from "lit/static-html.js";
+var DSACheckboxButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "medium";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleClick(event) {
+    if (this.disabled || this.readonly) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    this.checked = !this.checked;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleReadonlyChange() {
+    this.disabled = this.readonly;
+  }
+  /** Sets focus on the checbox button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the checkbox button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    return html`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? " button--checked" : ""}`}"
+          role="checkbox"
+          aria-checked="${this.checked}"
+          class=${classMap({
+      button: true,
+      "button--on-base": true,
+      "button--toggle": true,
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--checked": this.checked,
+      "button--readonly": this.readonly,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      // TODO: remove ?
+      "button--has-label": this.hasSlotController.test("[default]")
+    })}
+          ?disabled=${this.disabled}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${ifDefined(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          ${this.readonly ? html`<dsa-icon
+                name="lock"
+                class="button__icon-readonly"
+              ></dsa-icon>` : ""}
+          <slot part="label" class="button__label"></slot>
+          ${this.checked ? html`<dsa-icon
+                name="check"
+                class="button__icon-check"
+              ></dsa-icon>` : ""}
+        </button>
+      </div>
+    `;
+  }
+};
+DSACheckboxButton.styles = checkbox_button_styles_default;
+__decorateClass([
+  query(".button")
+], DSACheckboxButton.prototype, "input", 2);
+__decorateClass([
+  query(".hidden-input")
+], DSACheckboxButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], DSACheckboxButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSACheckboxButton.prototype, "checked", 2);
+__decorateClass([
+  property()
+], DSACheckboxButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSACheckboxButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSACheckboxButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSACheckboxButton.prototype, "readonly", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSACheckboxButton.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("readonly")
+], DSACheckboxButton.prototype, "handleReadonlyChange", 1);
+DSACheckboxButton = __decorateClass([
+  customElement("dsa-checkbox-button")
+], DSACheckboxButton);
+
+export {
+  DSACheckboxButton
+};

package/dist/chunks/chunk.HC5BO5YV.js

@@ -0,0 +1,405 @@
+import {
+  form_control_styles_default
+} from "./chunk.3RBCYA4F.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/input-phone/input-phone.styles.ts
+import { css } from "lit";
+var input_phone_styles_default = css`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  .input-phone {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--dsa-wc-input-padding);
+    vertical-align: middle;
+    font: var(--dsa-wc-input-text-field-font);
+    letter-spacing: var(--dsa-wc-input-mask-placeholder-letter-spacing);
+    font-size: inherit;
+    overflow: hidden;
+    cursor: text;
+    width: 100%;
+    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-phone-border-radius);
+    border-left-width: 0.5px;
+    height: auto;
+  }
+
+  .input-phone--focused:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  /* On Layer inputs */
+  .input-phone--on-layer {
+    background-color: var(--dsa-wc-input-on-layer-background-color);
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-wc-input-on-layer-border-color);
+  }
+
+  .input-phone--on-layer:hover:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-hover);
+  }
+
+  .input-phone--on-layer.input-phone--focused:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    )
+    .input-phone__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color);
+  }
+
+  .input-phone--on-layer.input-phone--disabled {
+    background-color: var(--dsa-wc-input-on-layer-background-color-disabled);
+    border-color: var(--dsa-wc-input-on-layer-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-phone--on-layer.input-phone--readonly {
+    background-color: var(--dsa-wc-input-on-layer-locked-background-color);
+    border-color: var(--dsa-wc-input-on-layer-locked-border-color);
+  }
+
+  .input-phone__control::placeholder {
+    visibility: hidden;
+  }
+
+  .input-phone--on-layer .input-phone__placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
+  }
+
+  .input-phone--on-layer.input-phone--disabled .input-phone__control {
+    color: var(--dsa-wc-input-on-layer-text-field-input-color-disabled);
+  }
+
+  .input-phone--on-layer.input-phone--disabled
+    .input-phone__control::placeholder {
+    color: var(--dsa-wc-input-on-layer-text-field-placeholder-color-disabled);
+  }
+
+  .input-phone--error.input-phone--on-layer:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    background-color: var(--dsa-wc-input-on-layer-background-color-error);
+    border-color: var(--dsa-wc-input-on-layer-border-color-error);
+  }
+  .input-phone--error.input-phone--on-layer:hover:not(
+      .input-phone--disabled
+    ):not(.input-phone--readonly) {
+    border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
+  }
+
+  /* On Base inputs */
+  .input-phone--on-base {
+    border: solid var(--dsa-wc-input-border-width)
+      var(--dsa-color-input-border-on-base-enabled);
+    background-color: var(--dsa-color-input-background-on-base-enabled);
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input-phone--on-base:hover:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    border-color: var(--dsa-wc-input-on-base-border-color-hover);
+  }
+
+  .input-phone--on-base.input-phone--disabled {
+    border-color: var(--dsa-wc-input-on-base-border-color-disabled);
+    background-color: var(--dsa-wc-input-on-base-background-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .input-phone--on-base.input-phone--readonly {
+    background-color: var(--dsa-wc-input-on-base-locked-background-color);
+    border-color: var(--dsa-wc-input-on-base-locked-border-color);
+  }
+
+  .input-phone--on-base .input-phone__placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+  }
+
+  .input-phone__placeholder {
+    user-select: none;
+    pointer-events: none;
+    width: 100%;
+  }
+
+  .input-phone--error.input-phone--on-base:not(.input-phone--disabled):not(
+      .input-phone--readonly
+    ) {
+    background-color: var(--dsa-wc-input-on-base-background-color-error);
+    border-color: var(--dsa-wc-input-on-base-border-color-error);
+  }
+  .input-phone--error.input-phone--on-base:hover:not(
+      .input-phone--disabled
+    ):not(.input-phone--readonly) {
+    border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
+  }
+
+  .input-phone__control {
+    position: absolute;
+    padding: var(--dsa-wc-input-padding);
+    display: inline-flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: var(--dsa-wc-input-mask-placeholder-letter-spacing);
+    min-width: 0;
+    height: 100%;
+    border: none;
+    background: none;
+    box-shadow: none;
+    margin: 0;
+    right: 0;
+    left: 0;
+    cursor: inherit;
+    -webkit-appearance: none;
+  }
+
+  .input-phone__control.input-phone__control-with-prefix {
+    margin-inline-start: calc(
+      var(--dsa-wc-input-mask-control-margin-inline-start) -
+        var(--dsa-wc-input-phone-prefix-margin-inline-end)
+    );
+  }
+  .input-phone__control::-webkit-search-decoration,
+  .input-phone__control::-webkit-search-cancel-button,
+  .input-phone__control::-webkit-search-results-button,
+  .input-phone__control::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  .input-phone__control:-webkit-autofill,
+  .input-phone__control:-webkit-autofill:hover,
+  .input-phone__control:-webkit-autofill:focus,
+  .input-phone__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--dsa-wc-form-input-height-large)
+      var(--dsa-wc-input-on-base-border-color-hover) inset !important;
+    -webkit-text-fill-color: var(--dsa-wc-input-on-base-text-field-input-color);
+    caret-color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input-phone:hover:not(.input-phone--disabled):not(.input-phone--readonly)
+    .input-phone__control {
+    color: var(--dsa-wc-input-on-base-text-field-input-color);
+  }
+
+  .input-phone__control:focus {
+    outline: none;
+  }
+
+  .input-phone__suffix {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    cursor: default;
+  }
+
+  .input-phone__input {
+    display: flex;
+    width: 100%;
+  }
+
+  /* Select  */
+  .input-phone__select {
+    flex-shrink: 0;
+  }
+
+  .input-phone__select::part(combobox) {
+    border-radius: var(--dsa-wc-input-phone-select-border-radius);
+    border-right: none;
+    height: auto;
+    font-size: inherit;
+  }
+
+  .input-phone__select::part(popup) {
+    display: unset;
+  }
+
+  :not(.form-control--readonly):not(form-control--disabled)
+    > dsa-select:not(.input-phone__select-error) {
+    --dsa-wc-internal-select-on-base-active-background-color: var(
+      --dsa-wc-input-phone-select-on-base-active-background
+    );
+    --dsa-wc-internal-select-on-base-hover-background-color: var(
+      --dsa-wc-input-phone-select-on-base-hover-background
+    );
+
+    --dsa-wc-internal-select-on-layer-active-background-color: var(
+      --dsa-wc-input-phone-select-on-layer-active-background
+    );
+    --dsa-wc-internal-select-on-layer-hover-background-color: var(
+      --dsa-wc-input-phone-select-on-layer-hover-background
+    );
+  }
+  dsa-select.input-phone__select-error {
+    --dsa-wc-internal-select-on-base-background-color: var(
+      --dsa-wc-input-on-base-background-color-error
+    );
+    --dsa-wc-internal-select-on-base-border-color: var(
+      --dsa-wc-input-on-base-border-color-error
+    );
+    --dsa-wc-internal-select-on-base-active-background-color: var(
+      --dsa-wc-input-on-base-background-color-error
+    );
+    --dsa-wc-internal-select-on-base-hover-border-color: var(
+      --dsa-wc-input-on-base-border-color-error-hover
+    );
+    --dsa-wc-internal-select-on-base-hover-background-color: var(
+      --dsa-wc-input-on-base-background-color-error
+    );
+    --dsa-wc-internal-select-on-layer-active-box-shadow: none;
+
+    --dsa-wc-internal-select-on-layer-background-color: var(
+      --dsa-wc-input-on-layer-background-color-error
+    );
+    --dsa-wc-internal-select-on-layer-border-color: var(
+      --dsa-wc-input-on-layer-border-color-error
+    );
+    --dsa-wc-internal-select-on-layer-active-background-color: var(
+      --dsa-wc-input-on-layer-background-color-error
+    );
+
+    --dsa-wc-internal-select-on-layer-hover-border-color: var(
+      --dsa-wc-input-on-layer-border-color-error-hover
+    );
+    --dsa-wc-internal-select-on-layer-hover-background-color: var(
+      --dsa-wc-input-on-layer-background-color-error
+    );
+  }
+
+  .form-control--readonly:not(form-control--disabled) dsa-select {
+    --dsa-wc-internal-select-on-base-disabled-background-color: var(
+      --dsa-wc-input-on-base-locked-background-color
+    );
+    --dsa-wc-internal-select-on-base-disabled-border-color: var(
+      --dsa-wc-input-on-base-locked-border-color
+    );
+
+    --dsa-wc-internal-select-on-layer-disabled-background-color: var(
+      --dsa-wc-input-on-layer-locked-background-color
+    );
+
+    --dsa-wc-internal-select-on-layer-disabled-border-color: var(
+      --dsa-wc-input-on-layer-locked-border-color
+    );
+
+    --dsa-wc-internal-select-disabled-cursor: text;
+    pointer-event: none;
+    --dsa-wc-internal-select-disabled-opacity: 1;
+  }
+
+  .input > button + button,
+  .input > .input-phone__control + button {
+    margin-left: var(--dsa-wc-input-margin-left);
+  }
+
+  /*
+   * Size modifiers
+   */
+
+  .form-control--small .input-phone__input,
+  .form-control--small dsa-select::part(combobox) {
+    font: var(--dsa-wc-input-text-field-font-small);
+    height: var(--dsa-wc-input-phone-small-height);
+  }
+
+  .form-control--small .input-phone__control {
+    height: calc(
+      var(--dsa-wc-input-phone-small-height) - var(--dsa-wc-input-border-width) *
+        2
+    );
+  }
+
+  .form-control--medium dsa-select::part(combobox) {
+    height: var(--dsa-wc-input-phone-height);
+  }
+
+  .form-control--medium .input-phone__control {
+    height: calc(
+      var(--dsa-wc-input-phone-height) - var(--dsa-wc-input-border-width) * 2
+    );
+  }
+
+  .form-control--large
+    .input-phone___input.form-control--large
+    dsa-select::part(combobox) {
+    font: var(--dsa-wc-input-text-field-font-large);
+    height: var(--dsa-wc-input-phone-large-height);
+  }
+
+  .form-control--large .input-phone__control {
+    height: calc(
+      var(--dsa-wc-input-phone-large-height) - var(--dsa-wc-input-border-width) *
+        2
+    );
+  }
+
+  /*
+   *  Clearable
+   */
+
+  .input-phone__clear {
+    font-size: 1.25rem;
+  }
+
+  .input-phone__clear::part(base) {
+    padding: 0;
+  }
+
+  .input-phone__clear:hover {
+    color: var(--dsa-wc-input-icon-color-hover);
+  }
+
+  .input-phone--empty .input-phone__clear {
+    visibility: hidden;
+  }
+
+  /* Don't show the browser's password toggle in Edge */
+  ::-ms-reveal {
+    display: none;
+  }
+  /* Prefix */
+  .input-phone__prefix-icon,
+  .input-phone__prefix {
+    color: var(--dsa-wc-input-icon-color);
+    cursor: none;
+    font-size: 1.25rem;
+  }
+
+  .input-phone__prefix::slotted(*) {
+    margin-inline-end: var(--dsa-wc-input-phone-prefix-margin-inline-end);
+  }
+
+  /* Mask */
+
+  .input-phone__value {
+    visibility: hidden;
+  }
+
+  .input-phone__mask {
+    position: absolute;
+  }
+`;
+
+export {
+  input_phone_styles_default
+};