@ds-autonomie/web-components 1.0.1

package/dist/chunks/chunk.EFQHAGXP.js

@@ -0,0 +1,26 @@
+import {
+  menu_label_styles_default
+} from "./chunk.3XRQRY25.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/menu-label/menu-label.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+var DSAMenuLabel = class extends ShoelaceElement {
+  render() {
+    return html` <slot part="base" class="menu-label"></slot> `;
+  }
+};
+DSAMenuLabel.styles = menu_label_styles_default;
+DSAMenuLabel = __decorateClass([
+  customElement("dsa-menu-label")
+], DSAMenuLabel);
+
+export {
+  DSAMenuLabel
+};

package/dist/chunks/chunk.EHVJT7BH.js

@@ -0,0 +1,215 @@
+import {
+  animations
+} from "./chunk.TJOP7HQP.js";
+import {
+  watch
+} from "./chunk.D7CATJYB.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  animation_styles_default
+} from "./chunk.YL3TSWVM.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/animation/animation.ts
+import { html } from "lit";
+import { customElement, property, queryAsync } from "lit/decorators.js";
+var DSAAnimation = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasStarted = false;
+    this.name = "none";
+    this.play = false;
+    this.delay = 0;
+    this.direction = "normal";
+    this.duration = 1e3;
+    this.easing = "linear";
+    this.endDelay = 0;
+    this.fill = "auto";
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.playbackRate = 1;
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    var _a, _b;
+    return (_b = (_a = this.animation) == null ? void 0 : _a.currentTime) != null ? _b : 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.createAnimation();
+    this.handleAnimationCancel = this.handleAnimationCancel.bind(this);
+    this.handleAnimationFinish = this.handleAnimationFinish.bind(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.destroyAnimation();
+  }
+  handleAnimationFinish() {
+    this.play = false;
+    this.hasStarted = false;
+    this.emit("dsa-finish");
+  }
+  handleAnimationCancel() {
+    this.play = false;
+    this.hasStarted = false;
+    this.emit("dsa-cancel");
+  }
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+  async createAnimation() {
+    var _a, _b;
+    const easing = (_a = animations.easings[this.easing]) != null ? _a : this.easing;
+    const keyframes = (_b = this.keyframes) != null ? _b : animations[this.name];
+    const slot = await this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener("cancel", this.handleAnimationCancel);
+    this.animation.addEventListener("finish", this.handleAnimationFinish);
+    if (this.play) {
+      this.hasStarted = true;
+      this.emit("dsa-start");
+    } else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
+      this.animation.removeEventListener("finish", this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        this.emit("dsa-start");
+      }
+      if (this.play) {
+        this.animation.play();
+      } else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all keyframe effects caused by this animation and aborts its playback. */
+  cancel() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  finish() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.finish();
+  }
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+DSAAnimation.styles = animation_styles_default;
+__decorateClass([
+  queryAsync("slot")
+], DSAAnimation.prototype, "defaultSlot", 2);
+__decorateClass([
+  property()
+], DSAAnimation.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAAnimation.prototype, "play", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAAnimation.prototype, "delay", 2);
+__decorateClass([
+  property()
+], DSAAnimation.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAAnimation.prototype, "duration", 2);
+__decorateClass([
+  property()
+], DSAAnimation.prototype, "easing", 2);
+__decorateClass([
+  property({ attribute: "end-delay", type: Number })
+], DSAAnimation.prototype, "endDelay", 2);
+__decorateClass([
+  property()
+], DSAAnimation.prototype, "fill", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAAnimation.prototype, "iterations", 2);
+__decorateClass([
+  property({ attribute: "iteration-start", type: Number })
+], DSAAnimation.prototype, "iterationStart", 2);
+__decorateClass([
+  property({ attribute: false })
+], DSAAnimation.prototype, "keyframes", 2);
+__decorateClass([
+  property({ attribute: "playback-rate", type: Number })
+], DSAAnimation.prototype, "playbackRate", 2);
+__decorateClass([
+  watch([
+    "name",
+    "delay",
+    "direction",
+    "duration",
+    "easing",
+    "endDelay",
+    "fill",
+    "iterations",
+    "iterationsStart",
+    "keyframes"
+  ])
+], DSAAnimation.prototype, "handleAnimationChange", 1);
+__decorateClass([
+  watch("play")
+], DSAAnimation.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("playbackRate")
+], DSAAnimation.prototype, "handlePlaybackRateChange", 1);
+DSAAnimation = __decorateClass([
+  customElement("dsa-animation")
+], DSAAnimation);
+
+export {
+  DSAAnimation
+};

package/dist/chunks/chunk.EKWYMXQO.js

@@ -0,0 +1,166 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/tree-item/tree-item.styles.ts
+import { css } from "lit";
+var tree_item_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    outline: 0;
+    z-index: 0;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  slot:not([name])::slotted(dsa-icon) {
+    margin-inline-end: var(--dsa-wc-tree-item-icon-margin-end);
+  }
+
+  .tree-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    color: var(--dsa-wc-tree-item-color);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .tree-item__checkbox {
+    pointer-events: none;
+  }
+
+  .tree-item__expand-button,
+  .tree-item__checkbox,
+  .tree-item__label {
+    font: var(--dsa-wc-tree-item-font);
+  }
+
+  .tree-item__checkbox::part(base) {
+    display: flex;
+    align-items: center;
+  }
+
+  .tree-item__indentation {
+    display: block;
+    width: 1em;
+    flex-shrink: 0;
+  }
+
+  .tree-item__expand-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    padding: var(--dsa-wc-tree-item-icon-padding);
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .tree-item__expand-button {
+    transition: var(--dsa-wc-transition-medium) rotate ease;
+  }
+
+  .tree-item--expanded .tree-item__expand-button {
+    rotate: 90deg;
+  }
+
+  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {
+    rotate: -90deg;
+  }
+
+  .tree-item--expanded .tree-item__expand-icon,
+  .tree-item:not(.tree-item--expanded) .tree-item__collapse-icon {
+    display: none;
+  }
+
+  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon,
+  .tree-item:not(.tree-item--has-expand-button) .tree-item__collapse-icon {
+    display: none;
+  }
+
+  .tree-item__expand-button--visible {
+    cursor: pointer;
+  }
+
+  .tree-item__item {
+    display: flex;
+    align-items: center;
+    border-inline-start: solid 3px transparent;
+  }
+
+  .tree-item--disabled .tree-item__item {
+    opacity: 0.5;
+    outline: none;
+    cursor: not-allowed;
+  }
+
+  :host(:focus-visible) .tree-item__item {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+    border-radius: var(--dsa-wc-focus-ring-radius);
+    z-index: 2;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+    background-color: var(--dsa-wc-tree-item-selected-background-color);
+    border-inline-start-color: var(--dsa-wc-tree-item-selected-border-color);
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__expand-button {
+    color: var(--cnds-ds-tree-item-color);
+  }
+
+  .tree-item__label {
+    display: flex;
+    align-items: center;
+    transition: var(--dsa-wc-transition-fast) color;
+  }
+
+  .tree-item__children {
+    display: block;
+    font-size: calc(1em + var(--dsa-wc-tree-indent-size));
+  }
+
+  /* Indentation lines */
+  .tree-item__children {
+    position: relative;
+  }
+
+  .tree-item__children::before {
+    content: '';
+    position: absolute;
+    top: var(--dsa-wc-tree-indent-guide-offset);
+    bottom: var(--dsa-wc-tree-indent-guide-offset);
+    left: calc(
+      1em + var(--dsa-wc-tree-indent-size-offset, 0) -
+        (var(--dsa-wc-tree-indent-guide-width) / 2) - 1px
+    );
+    border-inline-end: var(--dsa-wc-tree-indent-guide-width)
+      var(--dsa-wc-tree-indent-guide-style)
+      var(--dsa-wc-tree-indent-guide-color);
+    z-index: 1;
+  }
+
+  .tree-item--rtl .tree-item__children::before {
+    left: auto;
+    right: 1em;
+  }
+
+  @media (forced-colors: active) {
+    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+      outline: dashed 1px SelectedItem;
+    }
+  }
+`;
+
+export {
+  tree_item_styles_default
+};

package/dist/chunks/chunk.EMIT7S33.js

@@ -0,0 +1,71 @@
+// src/internal/offset.ts
+function getOffset(element, parent) {
+  return {
+    top: Math.round(
+      element.getBoundingClientRect().top - parent.getBoundingClientRect().top
+    ),
+    left: Math.round(
+      element.getBoundingClientRect().left - parent.getBoundingClientRect().left
+    )
+  };
+}
+
+// src/internal/scroll.ts
+var locks = /* @__PURE__ */ new Set();
+function getScrollbarWidth() {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+}
+function lockBodyScrolling(lockingEl) {
+  locks.add(lockingEl);
+  if (!document.body.classList.contains("dsa-scroll-lock")) {
+    const scrollbarWidth = getScrollbarWidth();
+    document.body.classList.add("dsa-scroll-lock");
+    document.body.style.setProperty(
+      "--dsa-wc-scroll-lock-size",
+      `${scrollbarWidth}px`
+    );
+  }
+}
+function unlockBodyScrolling(lockingEl) {
+  locks.delete(lockingEl);
+  if (locks.size === 0) {
+    document.body.classList.remove("dsa-scroll-lock");
+    document.body.style.removeProperty("--dsa-wc-scroll-lock-size");
+  }
+}
+function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+  if (direction === "horizontal" || direction === "both") {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({
+        left: offsetLeft - container.offsetWidth + element.clientWidth,
+        behavior
+      });
+    }
+  }
+  if (direction === "vertical" || direction === "both") {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({
+        top: offsetTop - container.offsetHeight + element.clientHeight,
+        behavior
+      });
+    }
+  }
+}
+
+export {
+  lockBodyScrolling,
+  unlockBodyScrolling,
+  scrollIntoView
+};

package/dist/chunks/chunk.EMJZLQCL.js

@@ -0,0 +1,60 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/tooltip/tooltip.styles.ts
+import { css } from "lit";
+var tooltip_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    --max-width: 20rem;
+    --hide-delay: 0ms;
+    --show-delay: 150ms;
+
+    display: contents;
+  }
+
+  .tooltip {
+    --arrow-size: var(--dsa-wc-tooltip-arrow-size);
+    --arrow-color: var(--dsa-wc-tooltip-background-color);
+  }
+
+  .tooltip::part(popup) {
+    pointer-events: none;
+    z-index: var(--dsa-wc-z-index-tooltip);
+  }
+
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width);
+    border-radius: var(--dsa-wc-tooltip-border-radius);
+    background-color: var(--dsa-wc-tooltip-background-color);
+    font: var(--dsa-wc-tooltip-font);
+    color: var(--dsa-wc-tooltip-color);
+    padding: var(--dsa-wc-tooltip-padding);
+    pointer-events: none;
+    white-space: normal;
+  }
+`;
+
+export {
+  tooltip_styles_default
+};