@ds-autonomie/web-components 2.7.0 → 2.8.0

package/cdn/chunks/chunk.36Y6T57J.js

@@ -0,0 +1,116 @@
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.S7UTN2VW.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.57JI3UNH.js";
+import {
+  o
+} from "./chunk.XED65RH5.js";
+import {
+  e2 as e
+} from "./chunk.JY4LUWQC.js";
+import {
+  ShoelaceElement,
+  n,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.ts
+var DSABreadcrumbItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "prefix",
+      "suffix"
+    );
+    this.rel = "noreferrer noopener";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "listitem");
+    }
+  }
+  render() {
+    const isLink = this.href ? true : false;
+    return x`
+      <div
+        part="base"
+        class=${e({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <slot
+          name="prefix"
+          part="prefix"
+          class="breadcrumb-item__prefix"
+        ></slot>
+
+        ${isLink ? x`
+              <a
+                part="label"
+                class="breadcrumb-item__label"
+                href="${this.href}"
+                target="${o(this.target ? this.target : void 0)}"
+                rel=${o(this.target ? this.rel : void 0)}
+              >
+                <slot></slot>
+              </a>
+            ` : x`
+              <button
+                role="link"
+                part="label"
+                type="button"
+                class="breadcrumb-item__label"
+              >
+                <slot></slot>
+              </button>
+            `}
+
+        <slot
+          name="suffix"
+          part="suffix"
+          class="breadcrumb-item__suffix"
+        ></slot>
+
+        <dsa-icon
+          class="breadcrumb-item__separator"
+          aria-hidden="true"
+          name=${this.localize.dir() === "rtl" ? "keyboard_arrow_left" : "keyboard_arrow_right"}
+          library="system"
+        ></dsa-icon>
+      </div>
+    `;
+  }
+};
+DSABreadcrumbItem.styles = breadcrumb_item_styles_default;
+__decorateClass([
+  n()
+], DSABreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], DSABreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], DSABreadcrumbItem.prototype, "rel", 2);
+DSABreadcrumbItem = __decorateClass([
+  t("dsa-breadcrumb-item")
+], DSABreadcrumbItem);
+
+export {
+  DSABreadcrumbItem
+};

package/cdn/chunks/chunk.3EJ54TS4.js

@@ -0,0 +1,315 @@
+import {
+  menu_accordion_styles_default
+} from "./chunk.7LPJZYXA.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.UBKKXGSV.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.2WRFDMKN.js";
+import {
+  a11yWarning
+} from "./chunk.PWL7QCVG.js";
+import {
+  LocalizeController
+} from "./chunk.57JI3UNH.js";
+import {
+  e2
+} from "./chunk.JY4LUWQC.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/menu-accordion/menu-accordion.ts
+var DSAMenuAccordion = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "prefix",
+      "summary"
+    );
+    this.open = false;
+    this.size = "medium";
+    this.level = 1;
+    this.collapsed = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const menuNavigation = this.querySelector(
+      "dsa-menu-navigation"
+    );
+    if (menuNavigation !== null) {
+      menuNavigation == null ? void 0 : menuNavigation.classList.add(this.level === 2 ? "level-2" : "level-1");
+    }
+  }
+  firstUpdated() {
+    this.body.hidden = !this.open;
+    this.body.style.height = this.open ? "auto" : "0";
+  }
+  handleSummaryClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+    this.headerButton.focus();
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  /** Returns a text label based on the contents of the summary slot. */
+  getTextSummary() {
+    var _a, _b;
+    const nodes = (_b = (_a = this.summarySlot) == null ? void 0 : _a.assignedNodes({ flatten: true })) != null ? _b : [];
+    let text = "";
+    [...nodes].forEach((node) => {
+      text += node.textContent;
+    });
+    return text;
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      const slShow = this.emit("dsa-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      this.body.hidden = false;
+      await this.updateComplete;
+      const { keyframes, options } = getAnimation(this, "accordion.show", {
+        dir: this.localize.dir()
+      });
+      await animateTo(
+        this.body,
+        shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+        options
+      );
+      this.body.style.height = "auto";
+      this.emit("dsa-after-show");
+    } else {
+      const slHide = this.emit("dsa-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "accordion.hide", {
+        dir: this.localize.dir()
+      });
+      await animateTo(
+        this.body,
+        shimKeyframesHeightAuto(keyframes, this.body.scrollHeight),
+        options
+      );
+      this.body.hidden = true;
+      this.body.style.height = "auto";
+      this.emit("dsa-after-hide");
+    }
+  }
+  handleLevelChange() {
+    const menuNavigation = this.querySelector(
+      "dsa-menu-navigation"
+    );
+    if (menuNavigation !== null) {
+      if (this.level === 2) {
+        menuNavigation.classList.add("level-2");
+      } else {
+        menuNavigation.classList.remove("level-2");
+      }
+    }
+  }
+  async handleExpandedChange() {
+    await this.updateComplete;
+    this.firstUpdated();
+  }
+  /** Shows the accordion. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    this.open = true;
+    return await waitForEvent(this, "dsa-after-show");
+  }
+  /** Hides the accordion */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return await waitForEvent(this, "dsa-after-hide");
+  }
+  focus(options) {
+    this.headerButton.focus(options);
+  }
+  blur() {
+    this.headerButton.blur();
+  }
+  click() {
+    this.headerButton.click();
+  }
+  render() {
+    var _a;
+    if (!this.summary && !this.hasSlotController.test("summary")) {
+      a11yWarning(
+        "<dsa-menu-accordion> requires a summary attribute or a summary slot for accessibility"
+      );
+    }
+    return x`
+      <div
+        part="base"
+        class=${e2({
+      "menu-accordion": true,
+      "menu-accordion--open": this.open,
+      "menu-accordion--chevron": true,
+      "menu-accordion--small": this.size === "small",
+      "menu-accordion--medium": this.size === "medium",
+      "menu-accordion--large": this.size === "large",
+      "menu-accordion--level-2": this.level === 2,
+      "menu-accordion--collapsed": this.collapsed
+    })}
+      >
+        <div part="header" id="header" class="menu-accordion__header">
+          <dsa-tooltip
+            placement="right"
+            ?disabled=${!this.collapsed}
+            content=${(_a = this.getTextSummary()) != null ? _a : this.summary}
+          >
+            <span
+              role="button"
+              aria-expanded=${this.open ? "true" : "false"}
+              aria-controls="content"
+              @click=${this.handleSummaryClick}
+              @keydown=${this.handleSummaryKeyDown}
+              class="menu-accordion__header-button"
+              tabindex="0"
+            >
+              <slot
+                name="prefix"
+                part="prefix"
+                class="menu-accordion__prefix"
+              ></slot>
+              <slot name="summary" class="menu-accordion__summary"
+                >${this.summary}</slot
+              >
+              <slot name="badge" class="menu-accordion__badge"></slot>
+
+              <span part="summary-icon" class="menu-accordion__summary-icon">
+                <dsa-icon
+                  class="menu-accordion__expand-icon"
+                  name="expand_more"
+                  library="system"
+                ></dsa-icon>
+              </span>
+            </span>
+          </dsa-tooltip>
+        </div>
+
+        <div class="menu-accordion__body">
+          <slot
+            part="content"
+            id="content"
+            class="menu-accordion__content"
+            aria-labelledby="header"
+          ></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+DSAMenuAccordion.styles = menu_accordion_styles_default;
+__decorateClass([
+  e("slot[name=summary]")
+], DSAMenuAccordion.prototype, "summarySlot", 2);
+__decorateClass([
+  e(".menu-accordion")
+], DSAMenuAccordion.prototype, "accordion", 2);
+__decorateClass([
+  e(".menu-accordion__header-button")
+], DSAMenuAccordion.prototype, "headerButton", 2);
+__decorateClass([
+  e(".menu-accordion__body")
+], DSAMenuAccordion.prototype, "body", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAMenuAccordion.prototype, "open", 2);
+__decorateClass([
+  n()
+], DSAMenuAccordion.prototype, "summary", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSAMenuAccordion.prototype, "size", 2);
+__decorateClass([
+  n({ type: Number })
+], DSAMenuAccordion.prototype, "level", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSAMenuAccordion.prototype, "collapsed", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], DSAMenuAccordion.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("level", { waitUntilFirstUpdate: true })
+], DSAMenuAccordion.prototype, "handleLevelChange", 1);
+__decorateClass([
+  watch("expanded", { waitUntilFirstUpdate: true })
+], DSAMenuAccordion.prototype, "handleExpandedChange", 1);
+DSAMenuAccordion = __decorateClass([
+  t("dsa-menu-accordion")
+], DSAMenuAccordion);
+setDefaultAnimation("accordion.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("accordion.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  DSAMenuAccordion
+};

package/cdn/chunks/chunk.3GRDVVLK.js

@@ -0,0 +1,64 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/card-nav-item/card-nav-item.styles.ts
+var card_nav_item_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+    --card-nav-item-border-width: 1px;
+    --card-nav-item-padding: 0.75rem 0.5rem 0.75rem 1rem;
+    --card-nav-item-font: var(--dsa-font-medium-bold);
+  }
+
+  .card-nav-item {
+    display: block;
+    background: var(--dsa-wc-card-nav-background-color);
+    width: 100%;
+    border: unset;
+    cursor: pointer;
+    padding: 0;
+    text-decoration: none;
+  }
+  .card-nav-item:hover,
+  .card-nav-item:focus {
+    background: var(--dsa-wc-card-nav-background-color-hover);
+  }
+  .card-nav-item:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: -1px;
+  }
+
+  .card-nav-item__body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: var(--card-nav-item-border-width) solid
+      var(--dsa-wc-card-nav-border-color);
+    color: var(--dsa-wc-card-nav-color);
+    padding: var(--card-nav-item-padding);
+    font: var(--card-nav-item-font);
+    height: 3.75rem;
+    text-align: start;
+  }
+  .card-nav-item:hover .card-nav-item__body,
+  .card-nav-item:focus .card-nav-item__body {
+    border-color: var(--dsa-wc-card-nav-border-color-hover);
+  }
+
+  .card-nav-item__icon {
+    flex-shrink: 0;
+    padding: var(--dsa-spacing-8);
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+`;
+
+export {
+  card_nav_item_styles_default
+};

package/cdn/chunks/chunk.3NEUPBWJ.js

@@ -0,0 +1,71 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/internal/components/filter-base/filter-base.styles.ts
+var filter_base_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: block;
+  }
+
+  /** The popup */
+  .filter {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .filter::part(popup) {
+    z-index: var(--dsa-wc-z-index-dropdown);
+  }
+
+  /* Panel */
+  .filter .filter__panel {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    font: var(--dsa-wc-input-text-field-font);
+    box-shadow: var(--dsa-wc-shadow-small);
+    background: var(--dsa-wc-select-listbox-background-color);
+    border: solid var(--dsa-wc-select-listbox-border-width)
+      var(--dsa-wc-select-listbox-border-color);
+    border-radius: var(--dsa-wc-select-listbox-border-radius);
+    padding-inline: 0;
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    /* stylelint-disable-next-line */
+    max-width: var(--auto-size-available-width);
+    /* stylelint-disable-next-line */
+    max-height: min(
+      var(--auto-size-available-height),
+      var(--dsa-filter-panel-max-height)
+    );
+  }
+
+  .filter--drawer .filter__panel {
+    border-bottom: 1px solid var(--dsa-color-border-default);
+    background-color: var(--dsa-color-surface-layer);
+  }
+
+  /* Error messages */
+  .form-control__error-text {
+    margin-top: var(--dsa-spacing-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-4);
+    font: var(--dsa-wc-error-text-font);
+  }
+`;
+
+export {
+  filter_base_styles_default
+};

package/cdn/chunks/chunk.3Q3N3KQA.js

@@ -0,0 +1,83 @@
+import {
+  button_styles_default
+} from "./chunk.WR237MHU.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/pagination-button/pagination-button.styles.ts
+var pagination_button_styles_default = i`
+  ${button_styles_default}
+
+  .button-pagination {
+    display: flex;
+    gap: var(--dsa-spacing-4);
+    align-items: center;
+    background-color: var(--dsa-wc-pagination-button-background-color);
+    border: var(--dsa-wc-pagination-button-border);
+    color: var(--dsa-wc-pagination-color);
+    font: var(--dsa-wc-pagination-font);
+    height: var(--dsa-wc-pagination-button-size);
+    padding: var(--dsa-wc-pagination-button-padding);
+    border-radius: 0;
+  }
+
+  :host(.pagination__navigation__button--mobile) .button-pagination {
+    border: none;
+  }
+
+  :host(.first-button) .button-pagination {
+    border-start-start-radius: var(--dsa-wc-button-border-radius);
+    border-end-start-radius: var(--dsa-wc-button-border-radius);
+  }
+  :host(.last-button) .button-pagination {
+    border-start-end-radius: var(--dsa-wc-button-border-radius);
+    border-end-end-radius: var(--dsa-wc-button-border-radius);
+  }
+  :host(:not([compact]):not(.first-button)),
+  :host(:not([compact]):not(.first-button)) .button-pagination {
+    margin-inline-start: calc(-1 * var(--dsa-wc-button-border-width));
+  }
+  :host(:focus) {
+    z-index: 2;
+  }
+
+  .button-pagination::after {
+    content: none !important;
+  }
+
+  .button-pagination:not(.button--disabled):not(.button--inactive):hover {
+    background-color: var(--dsa-wc-pagination-button-hover-background-color);
+  }
+
+  .button-pagination.button--disabled {
+    color: var(--dsa-wc-pagination-button-disabled-color);
+  }
+
+  .button-number {
+    width: var(--dsa-wc-pagination-button-size);
+  }
+
+  .button--selected {
+    background-color: var(--dsa-wc-pagination-button-selected-background-color);
+    color: var(--dsa-wc-pagination-button-selected-color);
+  }
+
+  .button--inactive {
+    cursor: default;
+  }
+
+  :host([compact]) .button-pagination {
+    width: var(--dsa-wc-pagination-compact-button-size);
+    height: var(--dsa-wc-pagination-compact-button-size);
+    font: var(--dsa-wc-pagination-compact-font);
+    border-radius: 4px;
+  }
+  :host([compact]:not(.first-button):not(.last-button)) .button-pagination {
+    border: none;
+  }
+`;
+
+export {
+  pagination_button_styles_default
+};