@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.5XUV3SRW.js

@@ -0,0 +1,420 @@
+import {
+  drawer_styles_default
+} from "./chunk.DXVNWE2M.js";
+import {
+  Modal
+} from "./chunk.ISAFRNR2.js";
+import {
+  lockBodyScrolling,
+  unlockBodyScrolling
+} from "./chunk.EMIT7S33.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.2FK6USFR.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.V7RJROLH.js";
+import {
+  LocalizeController
+} from "./chunk.5XL2LZLC.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/drawer/drawer.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// src/internal/string.ts
+function uppercaseFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+// src/components/drawer/drawer.ts
+var DSADrawer = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "footer");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.label = "";
+    this.placement = "end";
+    this.contained = false;
+    this.noHeader = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.modal = new Modal(this);
+  }
+  firstUpdated() {
+    this.drawer.hidden = !this.open;
+    if (this.open) {
+      this.addOpenListeners();
+      if (!this.contained) {
+        this.modal.activate();
+        lockBodyScrolling(this);
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    unlockBodyScrolling(this);
+  }
+  requestClose(source) {
+    const dsaRequestClose = this.emit("dsa-request-close", {
+      cancelable: true,
+      detail: { source }
+    });
+    if (dsaRequestClose.defaultPrevented) {
+      const animation = getAnimation(this, "drawer.denyClose", {
+        dir: this.localize.dir()
+      });
+      animateTo(this.panel, animation.keyframes, animation.options);
+      return;
+    }
+    this.hide();
+  }
+  addOpenListeners() {
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  removeOpenListeners() {
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+  }
+  handleDocumentKeyDown(event) {
+    if (this.open && !this.contained && event.key === "Escape") {
+      event.stopPropagation();
+      this.requestClose("keyboard");
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("dsa-show");
+      this.addOpenListeners();
+      this.originalTrigger = document.activeElement;
+      if (!this.contained) {
+        this.modal.activate();
+        lockBodyScrolling(this);
+      }
+      const autoFocusTarget = this.querySelector("[autofocus]");
+      if (autoFocusTarget) {
+        autoFocusTarget.removeAttribute("autofocus");
+      }
+      await Promise.all([
+        stopAnimations(this.drawer),
+        stopAnimations(this.overlay)
+      ]);
+      this.drawer.hidden = false;
+      requestAnimationFrame(() => {
+        const dsaInitialFocus = this.emit("dsa-initial-focus", {
+          cancelable: true
+        });
+        if (!dsaInitialFocus.defaultPrevented) {
+          if (autoFocusTarget) {
+            autoFocusTarget.focus({
+              preventScroll: true
+            });
+          } else {
+            this.panel.focus({ preventScroll: true });
+          }
+        }
+        if (autoFocusTarget) {
+          autoFocusTarget.setAttribute("autofocus", "");
+        }
+      });
+      const panelAnimation = getAnimation(
+        this,
+        `drawer.show${uppercaseFirstLetter(this.placement)}`,
+        {
+          dir: this.localize.dir()
+        }
+      );
+      const overlayAnimation = getAnimation(this, "drawer.overlay.show", {
+        dir: this.localize.dir()
+      });
+      await Promise.all([
+        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+        animateTo(
+          this.overlay,
+          overlayAnimation.keyframes,
+          overlayAnimation.options
+        )
+      ]);
+      this.emit("dsa-after-show");
+    } else {
+      this.emit("dsa-hide");
+      this.removeOpenListeners();
+      if (!this.contained) {
+        this.modal.deactivate();
+        unlockBodyScrolling(this);
+      }
+      await Promise.all([
+        stopAnimations(this.drawer),
+        stopAnimations(this.overlay)
+      ]);
+      const panelAnimation = getAnimation(
+        this,
+        `drawer.hide${uppercaseFirstLetter(this.placement)}`,
+        {
+          dir: this.localize.dir()
+        }
+      );
+      const overlayAnimation = getAnimation(this, "drawer.overlay.hide", {
+        dir: this.localize.dir()
+      });
+      await Promise.all([
+        animateTo(
+          this.overlay,
+          overlayAnimation.keyframes,
+          overlayAnimation.options
+        ).then(() => {
+          this.overlay.hidden = true;
+        }),
+        animateTo(
+          this.panel,
+          panelAnimation.keyframes,
+          panelAnimation.options
+        ).then(() => {
+          this.panel.hidden = true;
+        })
+      ]);
+      this.drawer.hidden = true;
+      this.overlay.hidden = false;
+      this.panel.hidden = false;
+      const trigger = this.originalTrigger;
+      if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
+        setTimeout(() => trigger.focus());
+      }
+      this.emit("dsa-after-hide");
+    }
+  }
+  handleNoModalChange() {
+    if (this.open && !this.contained) {
+      this.modal.activate();
+      lockBodyScrolling(this);
+    }
+    if (this.open && this.contained) {
+      this.modal.deactivate();
+      unlockBodyScrolling(this);
+    }
+  }
+  /** Shows the drawer. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return await waitForEvent(this, "dsa-after-show");
+  }
+  /** Hides the drawer */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return await waitForEvent(this, "dsa-after-hide");
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      drawer: true,
+      "drawer--open": this.open,
+      "drawer--top": this.placement === "top",
+      "drawer--end": this.placement === "end",
+      "drawer--bottom": this.placement === "bottom",
+      "drawer--start": this.placement === "start",
+      "drawer--contained": this.contained,
+      "drawer--fixed": !this.contained,
+      "drawer--rtl": this.localize.dir() === "rtl",
+      "drawer--has-footer": this.hasSlotController.test("footer")
+    })}
+      >
+        <div
+          part="overlay"
+          class="drawer__overlay"
+          @click=${() => this.requestClose("overlay")}
+          tabindex="-1"
+        ></div>
+
+        <div
+          part="panel"
+          class="drawer__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-hidden=${this.open ? "false" : "true"}
+          aria-label=${ifDefined(this.noHeader ? this.label : void 0)}
+          aria-labelledby=${ifDefined(!this.noHeader ? "title" : void 0)}
+          tabindex="0"
+        >
+          ${!this.noHeader ? html`
+                <header part="header" class="drawer__header">
+                  <h1 part="title" class="drawer__title" id="title">
+                    <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
+                    <slot name="label">
+                      ${this.label.length > 0 ? this.label : String.fromCharCode(65279)}
+                    </slot>
+                  </h1>
+                  <div part="header-actions" class="drawer__header-actions">
+                    <slot name="header-actions"></slot>
+                    <dsa-icon-button
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      class="drawer__close"
+                      name="close"
+                      label=${this.localize.term("close")}
+                      @click=${() => this.requestClose("close-button")}
+                    ></dsa-icon-button>
+                  </div>
+                </header>
+              ` : ""}
+
+          <slot part="body" class="drawer__body"></slot>
+
+          <footer part="footer" class="drawer__footer">
+            <slot name="footer"></slot>
+          </footer>
+        </div>
+      </div>
+    `;
+  }
+};
+DSADrawer.styles = drawer_styles_default;
+__decorateClass([
+  query(".drawer")
+], DSADrawer.prototype, "drawer", 2);
+__decorateClass([
+  query(".drawer__panel")
+], DSADrawer.prototype, "panel", 2);
+__decorateClass([
+  query(".drawer__overlay")
+], DSADrawer.prototype, "overlay", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSADrawer.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSADrawer.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSADrawer.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSADrawer.prototype, "contained", 2);
+__decorateClass([
+  property({ attribute: "no-header", type: Boolean, reflect: true })
+], DSADrawer.prototype, "noHeader", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSADrawer.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("contained", { waitUntilFirstUpdate: true })
+], DSADrawer.prototype, "handleNoModalChange", 1);
+DSADrawer = __decorateClass([
+  customElement("dsa-drawer")
+], DSADrawer);
+setDefaultAnimation("drawer.showTop", {
+  keyframes: [
+    { opacity: 0, translate: "0 -100%" },
+    { opacity: 1, translate: "0 0" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hideTop", {
+  keyframes: [
+    { opacity: 1, translate: "0 0" },
+    { opacity: 0, translate: "0 -100%" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.showEnd", {
+  keyframes: [
+    { opacity: 0, translate: "100%" },
+    { opacity: 1, translate: "0" }
+  ],
+  rtlKeyframes: [
+    { opacity: 0, translate: "-100%" },
+    { opacity: 1, translate: "0" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hideEnd", {
+  keyframes: [
+    { opacity: 1, translate: "0" },
+    { opacity: 0, translate: "100%" }
+  ],
+  rtlKeyframes: [
+    { opacity: 1, translate: "0" },
+    { opacity: 0, translate: "-100%" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.showBottom", {
+  keyframes: [
+    { opacity: 0, translate: "0 100%" },
+    { opacity: 1, translate: "0 0" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hideBottom", {
+  keyframes: [
+    { opacity: 1, translate: "0 0" },
+    { opacity: 0, translate: "0 100%" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.showStart", {
+  keyframes: [
+    { opacity: 0, translate: "-100%" },
+    { opacity: 1, translate: "0" }
+  ],
+  rtlKeyframes: [
+    { opacity: 0, translate: "100%" },
+    { opacity: 1, translate: "0" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.hideStart", {
+  keyframes: [
+    { opacity: 1, translate: "0" },
+    { opacity: 0, translate: "-100%" }
+  ],
+  rtlKeyframes: [
+    { opacity: 1, translate: "0" },
+    { opacity: 0, translate: "100%" }
+  ],
+  options: { duration: 250, easing: "ease" }
+});
+setDefaultAnimation("drawer.denyClose", {
+  keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("drawer.overlay.show", {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  options: { duration: 250 }
+});
+setDefaultAnimation("drawer.overlay.hide", {
+  keyframes: [{ opacity: 1 }, { opacity: 0 }],
+  options: { duration: 250 }
+});
+
+export {
+  DSADrawer
+};

package/dist/chunks/chunk.6FAUBLR3.js

@@ -0,0 +1,84 @@
+import {
+  resize_observer_styles_default
+} from "./chunk.RMCOWJOW.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/resize-observer/resize-observer.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSAResizeObserver = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(
+      (entries) => {
+        this.emit("dsa-resize", { detail: { entries } });
+      }
+    );
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({
+        flatten: true
+      });
+      this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.resizeObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+DSAResizeObserver.styles = resize_observer_styles_default;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAResizeObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], DSAResizeObserver.prototype, "handleDisabledChange", 1);
+DSAResizeObserver = __decorateClass([
+  customElement("dsa-resize-observer")
+], DSAResizeObserver);
+
+export {
+  DSAResizeObserver
+};

package/dist/chunks/chunk.6M63UXML.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __decorateClass
+};

package/dist/chunks/chunk.6PS5KB3O.js

@@ -0,0 +1,53 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/popup/popup.styles.ts
+import { css } from "lit";
+var popup_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    --arrow-color: var(--dsa-color-primitives-neutral-900);
+    --arrow-size: 6px;
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
+     */
+    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+    --arrow-padding-offset: calc(
+      var(--arrow-size-diagonal) - var(--arrow-size)
+    );
+
+    display: contents;
+  }
+
+  .popup {
+    position: absolute;
+    isolation: isolate;
+    max-width: var(--auto-size-available-width, none);
+    max-height: var(--auto-size-available-height, none);
+  }
+
+  .popup--fixed {
+    position: fixed;
+  }
+
+  .popup:not(.popup--active) {
+    display: none;
+  }
+
+  .popup__arrow {
+    position: absolute;
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
+    rotate: 45deg;
+    background: var(--arrow-color);
+    z-index: -1;
+  }
+`;
+
+export {
+  popup_styles_default
+};

package/dist/chunks/chunk.6ZQ4OQ2C.js

@@ -0,0 +1,51 @@
+// src/components/input-phone/input-phone.utils.ts
+import { html } from "lit";
+var frenchNumberPrefix = [
+  "+33",
+  "+590",
+  "+594",
+  "+596",
+  "+262"
+];
+var phoneInputValidityRegex = /^((\+)33|(\+)590|(\+)594|(\+)596|(\+)262)([a-zA-Z0-9_.]{0,})$/;
+var phonePrefixOptions = [
+  { value: "+33", label: "fr_FR" },
+  { value: "+590", label: "fr_GP" },
+  { value: "+594", label: "fr_GF" },
+  { value: "+596", label: "fr_MQ" },
+  { value: "+262", label: "fr_RE" }
+];
+var frenchFlag = html`<svg
+  slot="prefix"
+  width="20"
+  height="20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <rect
+    x=".25"
+    y=".25"
+    width="19.5"
+    height="19.5"
+    rx="1.75"
+    fill="#fff"
+    stroke="#F5F5F5"
+    stroke-width=".5"
+  />
+  <g mask="url(#mask0_3871_53356)">
+    <path fill="#F44653" d="M13.334 0h6.667v20h-6.667z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0 20h6.667V0H0v20Z"
+      fill="#1035BB"
+    />
+  </g>
+</svg>`;
+
+export {
+  frenchNumberPrefix,
+  phoneInputValidityRegex,
+  phonePrefixOptions,
+  frenchFlag
+};

package/dist/chunks/chunk.73T7TU6S.js

@@ -0,0 +1,24 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/tree/tree.styles.ts
+import { css } from "lit";
+var tree_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    isolation: isolate;
+
+    /*
+     * Tree item indentation uses the "em" unit to increment its width on each level, so setting the font size to zero
+     * here removes the indentation for all the nodes on the first level.
+     */
+    font-size: 0;
+  }
+`;
+
+export {
+  tree_styles_default
+};

package/dist/chunks/chunk.7J7CS3BK.js

@@ -0,0 +1,43 @@
+import {
+  library_default_default
+} from "./chunk.RDGMZ5XB.js";
+import {
+  library_system_default
+} from "./chunk.I33L3NO6.js";
+
+// src/components/icon/library.ts
+var registry = [library_default_default, library_system_default];
+var watchedIcons = [];
+function watchIcon(icon) {
+  watchedIcons.push(icon);
+}
+function unwatchIcon(icon) {
+  watchedIcons = watchedIcons.filter((el) => el !== icon);
+}
+function getIconLibrary(name) {
+  return registry.find((lib) => lib.name === name);
+}
+function registerIconLibrary(name, options) {
+  unregisterIconLibrary(name);
+  registry.push({
+    name,
+    resolver: options.resolver,
+    mutator: options.mutator
+  });
+  watchedIcons.forEach((icon) => {
+    if (icon.library === name) {
+      icon.setIcon();
+    }
+  });
+}
+function unregisterIconLibrary(name) {
+  registry = registry.filter((lib) => lib.name !== name);
+}
+
+export {
+  watchIcon,
+  unwatchIcon,
+  getIconLibrary,
+  registerIconLibrary,
+  unregisterIconLibrary
+};