@ds-autonomie/web-components 2.13.0 → 2.14.1

package/dist/chunks/chunk.PBUGRVMQ.js

@@ -0,0 +1,193 @@
+import {
+  icon_button_styles_default
+} from "./chunk.QEXDSP5Y.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/icon-button/icon-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, literal } from "lit/static-html.js";
+var DSAIconButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasFocus = false;
+    this.disableTabIndex = false;
+    this.label = "";
+    this.description = "";
+    this.disabled = false;
+    this.floating = false;
+    this.toggle = false;
+    this.pressed = false;
+    this.variant = "default";
+    this.size = "medium";
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("dsa-focus");
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (this.toggle) {
+      this.pressed = !this.pressed;
+      this.emit("dsa-change");
+    }
+  }
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the icon button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    if (!this.label) {
+      a11yWarning(
+        "<dsa-icon-button> requires a label attribute for accessibility"
+      );
+    }
+    const isLink = this.href ? true : false;
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+      "icon-button": true,
+      "icon-button--on-floating-menu": this.floating,
+      "icon-button--default": this.variant === "default",
+      "icon-button--primary": this.variant === "primary",
+      "icon-button--secondary": this.variant === "secondary",
+      "icon-button--tertiary": this.variant === "tertiary",
+      "icon-button--danger": this.variant === "danger",
+      "icon-button--disabled": !isLink && (this.disabled || this.disableTabIndex),
+      "icon-button--focused": this.hasFocus,
+      "icon-button--toggle": this.toggle,
+      "icon-button--pressed": this.toggle && this.pressed
+    })}
+        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        type=${ifDefined(isLink ? void 0 : "button")}
+        href=${ifDefined(isLink ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(
+      isLink && this.target ? "noreferrer noopener" : void 0
+    )}
+        role=${ifDefined(isLink ? void 0 : "button")}
+        aria-disabled=${ifDefined(this.disabled && isLink ? "true" : void 0)}
+        aria-pressed=${ifDefined(this.toggle ? this.pressed : void 0)}
+        aria-label=${ifDefinedAndNotEmpty(this.label)}
+        aria-describedby="description"
+        tabindex=${this.disableTabIndex || this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <dsa-icon
+          class=${classMap({
+      "icon-button__icon": true,
+      "icon-button__icon--2xsmall": this.size === "2xsmall",
+      "icon-button__icon--xsmall": this.size === "xsmall",
+      "icon-button__icon--small": this.size === "small",
+      "icon-button__icon--medium": this.size === "medium",
+      "icon-button__icon--large": this.size === "large",
+      "icon-button__icon--xlarge": this.size === "xlarge",
+      "icon-button__icon--2xlarge": this.size === "2xlarge"
+    })}
+          name=${ifDefined(this.name)}
+          src=${ifDefined(this.src)}
+          aria-hidden="true"
+          library=${ifDefined(this.library)}
+        ></dsa-icon>
+        <slot></slot>
+      </${tag}>
+            ${this.description !== "" ? html`
+                    <p id="description" class="icon-button__description">
+                      ${this.description}
+                    </p>
+                  ` : ""}
+
+    `;
+  }
+};
+DSAIconButton.styles = icon_button_styles_default;
+__decorateClass([
+  query(".icon-button")
+], DSAIconButton.prototype, "button", 2);
+__decorateClass([
+  state()
+], DSAIconButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "disable-tab-index" })
+], DSAIconButton.prototype, "disableTabIndex", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "library", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "src", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "description" })
+], DSAIconButton.prototype, "description", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAIconButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAIconButton.prototype, "floating", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAIconButton.prototype, "toggle", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSAIconButton.prototype, "pressed", 2);
+__decorateClass([
+  property()
+], DSAIconButton.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSAIconButton.prototype, "size", 2);
+DSAIconButton = __decorateClass([
+  customElement("dsa-icon-button")
+], DSAIconButton);
+
+export {
+  DSAIconButton
+};

package/dist/chunks/chunk.PDGAPVZR.js

@@ -0,0 +1,135 @@
+import {
+  tag_button_styles_default
+} from "./chunk.TZVFQDBB.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/tag-button/tag-button.ts
+import { customElement, property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html, literal } from "lit/static-html.js";
+var DSATagButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.variant = "neutral";
+    this.size = "medium";
+    this.description = "";
+    this.href = "";
+    this.rel = "noreferrer noopener";
+    this.target = "_self";
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  /** Simulates a click on the tag button. */
+  click() {
+    this.tagButton.click();
+  }
+  /** Sets focus on the tag button. */
+  focus(options) {
+    this.tagButton.focus(options);
+  }
+  /** Removes focus from the tag button. */
+  blur() {
+    this.tagButton.blur();
+  }
+  render() {
+    if (!this.label && !this.accessibleName) {
+      a11yWarning(
+        "<dsa-tag-button> requires a label or an accessible-name attribute for accessibility"
+      );
+    }
+    const isLink = this.isLink();
+    const htmlTag = isLink ? literal`a` : literal`button`;
+    return html`
+      <${htmlTag}
+        part="base"
+        class=${classMap({
+      "tag-button": true,
+      // Variant
+      [`tag-button--${this.variant}`]: true,
+      // Sizes
+      "tag-button--small": this.size === "small",
+      "tag-button--medium": this.size === "medium",
+      "tag-button--large": this.size === "large"
+    })}
+        type=${ifDefined(isLink ? void 0 : "button")}
+        href=${ifDefinedAndNotEmpty(isLink ? this.href : void 0)}
+        target=${ifDefinedAndNotEmpty(isLink ? this.target : void 0)}
+        download=${ifDefinedAndNotEmpty(isLink ? this.download : void 0)}
+        rel=${ifDefinedAndNotEmpty(isLink ? this.rel : void 0)}
+        aria-label=${ifDefinedAndNotEmpty(this.accessibleName)}
+        aria-describedby="description"
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+      >
+        <slot part="prefix" name="prefix" class="tag-button__prefix"></slot>
+
+        <span class="tag-button__content"> ${this.label} </span>
+
+        <slot part="suffix" name="suffix" class="tag-button__suffix"></slot>
+      </${htmlTag}>
+      ${this.description !== "" ? html`
+              <p id="description" class="tag-button__description">
+                ${this.description}
+              </p>
+            ` : ""}
+    `;
+  }
+};
+DSATagButton.styles = tag_button_styles_default;
+__decorateClass([
+  query(".tag-button")
+], DSATagButton.prototype, "tagButton", 2);
+__decorateClass([
+  property()
+], DSATagButton.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSATagButton.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSATagButton.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "accessible-name", reflect: true })
+], DSATagButton.prototype, "accessibleName", 2);
+__decorateClass([
+  property({ attribute: "description" })
+], DSATagButton.prototype, "description", 2);
+__decorateClass([
+  property()
+], DSATagButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSATagButton.prototype, "rel", 2);
+__decorateClass([
+  property()
+], DSATagButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], DSATagButton.prototype, "target", 2);
+DSATagButton = __decorateClass([
+  customElement("dsa-tag-button")
+], DSATagButton);
+
+export {
+  DSATagButton
+};

package/dist/chunks/chunk.PDXO7ACT.js

@@ -0,0 +1,80 @@
+import {
+  navbar_link_styles_default
+} from "./chunk.37LS7J2I.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.ZQJVCRB2.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/navbar-link/navbar-link.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";
+var DSANavbarLink = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.mobile = false;
+    this.href = "";
+    this.rel = "noreferrer noopener";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  render() {
+    return html`
+      <a
+        class=${classMap({
+      "navbar-link": true,
+      "navbar-link--mobile": this.mobile,
+      "navbar-link--desktop": !this.mobile
+    })}
+        href=${this.href}
+        target="${ifDefined(this.target)}"
+        rel=${ifDefined(this.rel)}
+        aria-current=${ifDefinedAndNotEmpty(this.current)}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        ><slot></slot
+      ></a>
+    `;
+  }
+};
+DSANavbarLink.styles = navbar_link_styles_default;
+__decorateClass([
+  query(".navbar-link")
+], DSANavbarLink.prototype, "link", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSANavbarLink.prototype, "mobile", 2);
+__decorateClass([
+  property()
+], DSANavbarLink.prototype, "href", 2);
+__decorateClass([
+  property()
+], DSANavbarLink.prototype, "target", 2);
+__decorateClass([
+  property()
+], DSANavbarLink.prototype, "rel", 2);
+__decorateClass([
+  property()
+], DSANavbarLink.prototype, "current", 2);
+DSANavbarLink = __decorateClass([
+  customElement("dsa-navbar-link")
+], DSANavbarLink);
+
+export {
+  DSANavbarLink
+};

package/dist/chunks/chunk.PQPIEGSS.js

@@ -0,0 +1,122 @@
+import {
+  navbar_styles_default
+} from "./chunk.UC5S2IUH.js";
+import {
+  watch
+} from "./chunk.QB2NJE2Y.js";
+import {
+  ShoelaceElement
+} from "./chunk.SL3DN4BD.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/navbar/navbar.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+var MENU_TAG = "dsa-navbar-menu";
+var LINK_TAG = "dsa-navbar-link";
+var DSANavbar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.currentOpenMenu = null;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  handleSlotChange() {
+    this.getAllChildren().forEach((el) => {
+      el.mobile = this.mobile;
+    });
+  }
+  handleMobileChange() {
+    this.getAllChildren().forEach((el) => {
+      if (this.mobile) {
+        el.setAttribute("mobile", "true");
+      } else {
+        el.removeAttribute("mobile");
+      }
+      this.currentOpenMenu = null;
+      el.classList.remove("hidden");
+      if (this.isNavbarMenu(el)) {
+        el.removeAttribute("open");
+      }
+    });
+  }
+  handleMenuShow(event) {
+    if (!this.mobile) return;
+    const target = event.target;
+    const menu = target.closest(MENU_TAG);
+    if (menu) {
+      this.currentOpenMenu = menu;
+    }
+  }
+  handleMenuHide() {
+    if (!this.mobile) return;
+    if (!this.getAllMenus().some((el) => el.open)) {
+      this.currentOpenMenu = null;
+    }
+  }
+  getAllChildren() {
+    return [
+      ...this.querySelectorAll(MENU_TAG),
+      ...this.querySelectorAll(LINK_TAG)
+    ];
+  }
+  getAllMenus() {
+    return [...this.querySelectorAll(MENU_TAG)];
+  }
+  isNavbarMenu(el) {
+    return el.tagName.toLowerCase() === MENU_TAG;
+  }
+  render() {
+    if (this.mobile) {
+      this.getAllChildren().forEach((el) => {
+        if (this.currentOpenMenu === null || el === this.currentOpenMenu) {
+          el.classList.remove("hidden");
+        } else {
+          el.classList.add("hidden");
+          if (this.isNavbarMenu(el)) {
+            el.removeAttribute("open");
+          }
+        }
+      });
+    }
+    return html`
+      <slot
+        role="list"
+        class="navbar__list"
+        @slotchange=${this.handleSlotChange}
+        @dsa-show=${this.handleMenuShow}
+        @dsa-hide=${this.handleMenuHide}
+      ></slot>
+    `;
+  }
+};
+DSANavbar.styles = navbar_styles_default;
+__decorateClass([
+  query("nav")
+], DSANavbar.prototype, "navbar", 2);
+__decorateClass([
+  query("slot")
+], DSANavbar.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], DSANavbar.prototype, "allMenus", 2);
+__decorateClass([
+  state()
+], DSANavbar.prototype, "currentOpenMenu", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSANavbar.prototype, "mobile", 2);
+__decorateClass([
+  watch("mobile")
+], DSANavbar.prototype, "handleMobileChange", 1);
+DSANavbar = __decorateClass([
+  customElement("dsa-navbar")
+], DSANavbar);
+
+export {
+  DSANavbar
+};