@ds-autonomie/web-components 1.7.0 → 1.8.0

package/dist/chunks/chunk.NEIICCKM.js

@@ -0,0 +1,211 @@
+import {
+  pagination_styles_default
+} from "./chunk.N6EX6BDJ.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.KZIAHLAV.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/pagination/pagination.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+var MIN_PAGES_FOR_SUSPENDED_PAGINATION = 8;
+var DSAPagination = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]");
+    this.localize = new LocalizeController(this);
+    this.totalPages = 1;
+    this.currentPage = 1;
+    this.totalItems = 1;
+    this.itemsPerPage = 10;
+  }
+  handlePageButtonClick(event) {
+    if (event.target.value !== -1 && !event.target.selected) {
+      this.emit("dsa-page-change", {
+        detail: { page: `${event.target.value}` }
+      });
+    }
+  }
+  handlePageInputChange(event) {
+    this.emit("dsa-page-change", {
+      detail: { page: event.target.value }
+    });
+  }
+  renderButtonsRange(start, end) {
+    return Array.from({ length: end - start + 1 }, (_, i) => {
+      const pageNumber = start + i;
+      return html`<dsa-pagination-button
+        value=${pageNumber}
+        ?selected=${this.currentPage === pageNumber}
+      ></dsa-pagination-button>`;
+    });
+  }
+  getPageButtons() {
+    if (this.totalPages < MIN_PAGES_FOR_SUSPENDED_PAGINATION) {
+      return this.renderButtonsRange(1, this.totalPages);
+    } else if (this.currentPage < 4 || this.currentPage > this.totalPages - 3) {
+      return html`
+        ${this.renderButtonsRange(1, 3)}
+        <dsa-pagination-button value="-1"></dsa-pagination-button>
+        ${this.renderButtonsRange(this.totalPages - 2, this.totalPages)}
+      `;
+    } else {
+      return html`
+        <dsa-pagination-button value="1"></dsa-pagination-button>
+        <dsa-pagination-button value="-1"></dsa-pagination-button>
+        ${this.renderButtonsRange(this.currentPage - 1, this.currentPage + 1)}
+        <dsa-pagination-button value="-1"></dsa-pagination-button>
+        <dsa-pagination-button
+          value="${this.totalPages}"
+        ></dsa-pagination-button>
+      `;
+    }
+  }
+  handleDefaultSlotChange() {
+    const select = this.querySelector("dsa-select");
+    select == null ? void 0 : select.setAttribute("size", "small");
+    select == null ? void 0 : select.setAttribute("title", this.localize.term("linesPerPage"));
+  }
+  updateTotalPages() {
+    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+  }
+  render() {
+    const fromItem = 1 + (this.currentPage - 1) * this.itemsPerPage;
+    const toItem = this.currentPage * this.itemsPerPage;
+    return html`
+      <div class="pagination">
+        <!-- Mobile Navigation -->
+        <nav
+          class="pagination__navigation--mobile"
+          arial-label=${this.localize.term("pagination")}
+        >
+          <dsa-pagination-button
+            value="${this.currentPage - 1}"
+            ?disabled=${this.currentPage < 2}
+            class="pagination__navigation__button--mobile"
+          >
+            <dsa-icon name="chevron_left" slot="prefix"></dsa-icon
+            >${this.localize.term("previousPage")}
+          </dsa-pagination-button>
+          <div class="pagination__navigation__page-input">
+            <dsa-input
+              title=${this.localize.term("page")}
+              variant="layer"
+              size="small"
+              type="number"
+              inputmode="numeric"
+              min="1"
+              max=${this.totalPages}
+              value=${this.currentPage}
+              @dsa-change=${this.handlePageInputChange}
+              class="pagination__input"
+            >
+            </dsa-input>
+            <p>${this.localize.term("ofTotal", this.totalPages)}</p>
+          </div>
+          <dsa-pagination-button
+            value="${this.currentPage + 1}"
+            ?disabled=${this.currentPage > this.totalPages - 1}
+            class="pagination__navigation__button--mobile"
+            >${this.localize.term("nextPage")}
+            <dsa-icon name="chevron_right" slot="suffix"></dsa-icon>
+          </dsa-pagination-button>
+        </nav>
+
+        <!-- Items displayed and items per page -->
+        <div class="pagination__items">
+          <p
+            aria-label=${this.localize.term(
+      "paginationResultsAriaLabel",
+      fromItem,
+      toItem,
+      this.totalItems
+    )}
+          >
+            ${this.localize.term(
+      "paginationResults",
+      fromItem,
+      toItem,
+      this.totalItems
+    )}
+          </p>
+
+          ${this.hasSlotController.test("[default]") ? html`<dsa-divider vertical="true" class="divider"></dsa-divider>
+
+                <div class="pagination__itemsperpage">
+                  <p>${this.localize.term("linesPerPage")}</p>
+                  <slot @slotchange=${this.handleDefaultSlotChange}></slot>
+                </div>` : ""}
+        </div>
+
+        <!-- Desktop Navigation -->
+        <nav
+          class="pagination__navigation--desktop"
+          arial-label=${this.localize.term("pagination")}
+        >
+          <dsa-internal-button-group
+            squeezed
+            horizontal
+            @click=${this.handlePageButtonClick}
+          >
+            <dsa-pagination-button
+              value="${this.currentPage - 1}"
+              ?disabled=${this.currentPage < 2}
+            >
+              <dsa-icon name="chevron_left" slot="prefix"></dsa-icon>
+              ${this.localize.term("previousPage")}</dsa-pagination-button
+            >
+            ${this.getPageButtons()}
+            <dsa-pagination-button
+              value="${this.currentPage + 1}"
+              ?disabled=${this.currentPage > this.totalPages - 1}
+              >${this.localize.term("nextPage")}
+              <dsa-icon name="chevron_right" slot="suffix"></dsa-icon>
+            </dsa-pagination-button>
+          </dsa-internal-button-group>
+        </nav>
+      </div>
+    `;
+  }
+};
+DSAPagination.styles = pagination_styles_default;
+__decorateClass([
+  query(".pagination__navigation--desktop")
+], DSAPagination.prototype, "desktopNavigation", 2);
+__decorateClass([
+  query(".pagination__navigation--mobile")
+], DSAPagination.prototype, "mobileNavigation", 2);
+__decorateClass([
+  state()
+], DSAPagination.prototype, "totalPages", 2);
+__decorateClass([
+  property({ type: Number, attribute: "current-page" })
+], DSAPagination.prototype, "currentPage", 2);
+__decorateClass([
+  property({ type: Number, attribute: "total-items" })
+], DSAPagination.prototype, "totalItems", 2);
+__decorateClass([
+  property({ type: Number, attribute: "items-per-page" })
+], DSAPagination.prototype, "itemsPerPage", 2);
+__decorateClass([
+  watch(["totalItems", "itemsPerPage"])
+], DSAPagination.prototype, "updateTotalPages", 1);
+DSAPagination = __decorateClass([
+  customElement("dsa-pagination")
+], DSAPagination);
+
+export {
+  DSAPagination
+};

package/dist/chunks/{chunk.AXG2LFB3.js → chunk.O3TGEE3I.js}

@@ -56,7 +56,8 @@ var form_control_styles_default = css`
   }
 
   .form-control--has-label .form-control__label {
-    display: inline-block;
+    display: inline-flex;
+    gap: 4px;
   }
 
   .form-control__label-required {

package/dist/chunks/chunk.OBTE6PY7.js

@@ -0,0 +1,41 @@
+import {
+  table_row_styles_default
+} from "./chunk.Z4V2DJQS.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/table/table-row/table-row.ts
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DSATableRow = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.role = "row";
+    this.size = "medium";
+    this.selected = false;
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+DSATableRow.styles = table_row_styles_default;
+__decorateClass([
+  property({ reflect: true })
+], DSATableRow.prototype, "role", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSATableRow.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "selected", 2);
+DSATableRow = __decorateClass([
+  customElement("dsa-table-row")
+], DSATableRow);
+
+export {
+  DSATableRow
+};

package/dist/chunks/chunk.OIWFTO2A.js

@@ -0,0 +1,156 @@
+import {
+  DSATableCell
+} from "./chunk.C33YMWL6.js";
+import {
+  table_header_cell_styles_default
+} from "./chunk.6OP6GCU4.js";
+import {
+  LocalizeController
+} from "./chunk.KZIAHLAV.js";
+import {
+  TABLE_SORT_CYCLE
+} from "./chunk.HB7A2UQ7.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/table/table-header-cell/table-header-cell.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSATableHeaderCell = class extends DSATableCell {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.nextSortDirection = this.getNextSortDirection();
+    this.isHovered = false;
+    this.role = "columnheader";
+    this.sortable = false;
+    this.alignment = "left";
+    this.sortDirection = "none" /* NONE */;
+  }
+  handleSort() {
+    const newSortDirection = this.getNextSortDirection();
+    this.emit("dsa-table-header-cell-sort", {
+      detail: {
+        oldSortDirection: this.sortDirection,
+        sortDirection: newSortDirection
+      }
+    });
+    this.sortDirection = newSortDirection;
+    this.isHovered = false;
+  }
+  getNextSortDirection() {
+    const currentDirectionIndex = TABLE_SORT_CYCLE.findIndex(
+      (direction) => direction === this.sortDirection
+    );
+    let nextDirectionIndex = currentDirectionIndex + 1;
+    if (TABLE_SORT_CYCLE[nextDirectionIndex] === void 0) {
+      nextDirectionIndex = 0;
+    }
+    const nextDirection = TABLE_SORT_CYCLE[nextDirectionIndex];
+    return nextDirection;
+  }
+  handleMouseOver() {
+    this.isHovered = true;
+  }
+  handleMouseOut() {
+    this.isHovered = false;
+  }
+  handleSortableChange() {
+    if (this.sortable) {
+      this.setAttribute("aria-sort", this.sortDirection);
+    } else {
+      this.removeAttribute("aria-sort");
+    }
+  }
+  handleSortDirectionChange() {
+    if (this.sortable) {
+      this.setAttribute("aria-sort", this.sortDirection);
+      this.nextSortDirection = this.getNextSortDirection();
+    }
+  }
+  /** Simulates a click on the sort button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the sort button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the sort button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    if (this.sortable) {
+      const visualSortDirection = this.isHovered ? this.nextSortDirection : this.sortDirection;
+      return html`
+        <button
+          type="button"
+          part="sort-button"
+          aria-label=${this.localize.term(
+        "nextSortDirection",
+        this.nextSortDirection
+      )}
+          class=${classMap({
+        "sort-button--align-right": this.alignment === "right",
+        "sort-button--align-left": this.alignment === "left"
+      })}
+          @click=${this.handleSort}
+          @mouseover=${this.handleMouseOver}
+          @mouseout=${this.handleMouseOut}
+        >
+          <slot></slot>
+          <dsa-icon
+            class=${classMap({
+        "sort-button-icon": true,
+        "sort-button--icon--ascending": visualSortDirection === "ascending" /* ASCENDING */,
+        "sort-button--icon--descending": visualSortDirection === "descending" /* DESCENDING */
+      })}
+            name="arrow_upward"
+          ></dsa-icon>
+        </button>
+      `;
+    }
+    return html` <slot></slot> `;
+  }
+};
+DSATableHeaderCell.styles = table_header_cell_styles_default;
+__decorateClass([
+  query('[part~="sort-button"]')
+], DSATableHeaderCell.prototype, "button", 2);
+__decorateClass([
+  state()
+], DSATableHeaderCell.prototype, "nextSortDirection", 2);
+__decorateClass([
+  state()
+], DSATableHeaderCell.prototype, "isHovered", 2);
+__decorateClass([
+  property({ reflect: true })
+], DSATableHeaderCell.prototype, "role", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableHeaderCell.prototype, "sortable", 2);
+__decorateClass([
+  property()
+], DSATableHeaderCell.prototype, "alignment", 2);
+__decorateClass([
+  property({ attribute: "sort-direction", reflect: true })
+], DSATableHeaderCell.prototype, "sortDirection", 2);
+__decorateClass([
+  watch("sortable")
+], DSATableHeaderCell.prototype, "handleSortableChange", 1);
+__decorateClass([
+  watch("sortDirection", { waitUntilFirstUpdate: true })
+], DSATableHeaderCell.prototype, "handleSortDirectionChange", 1);
+DSATableHeaderCell = __decorateClass([
+  customElement("dsa-table-header-cell")
+], DSATableHeaderCell);
+
+export {
+  DSATableHeaderCell
+};

package/dist/chunks/{chunk.YZ66DKLU.js → chunk.OQ2AY2BC.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.AXG2LFB3.js";
+} from "./chunk.O3TGEE3I.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/chunk.OSR4H2UW.js

@@ -0,0 +1,17 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table-body/table-body.styles.ts
+import { css } from "lit";
+var table_body_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table-row-group;
+  }
+`;
+
+export {
+  table_body_styles_default
+};

package/dist/chunks/chunk.PO3AZ63O.js

@@ -0,0 +1,18 @@
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+
+// src/components/table/table.styles.ts
+import { css } from "lit";
+var table_styles_default = css`
+  ${component_styles_default}
+
+  :host {
+    display: table;
+    inline-size: 100%;
+  }
+`;
+
+export {
+  table_styles_default
+};

package/dist/chunks/{chunk.XRHDURFE.js → chunk.Q255SJAB.js}

@@ -1,6 +1,6 @@
 import {
   form_control_styles_default
-} from "./chunk.AXG2LFB3.js";
+} from "./chunk.O3TGEE3I.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/dist/chunks/chunk.RB5YRDTE.js

@@ -0,0 +1,77 @@
+import {
+  pagination_button_styles_default
+} from "./chunk.CHKVYEHB.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/pagination-button/pagination-button.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 DSAPaginationButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "prefix",
+      "suffix"
+    );
+    this.value = 0;
+    this.selected = false;
+    this.disabled = false;
+  }
+  render() {
+    const isInactive = this.selected || this.value === -1;
+    return html`
+      <button
+        part="base"
+        class=${classMap({
+      button: true,
+      "button-pagination": true,
+      "button-number": !this.hasSlotController.test("[default]"),
+      "button--selected": this.selected,
+      "button--inactive": isInactive,
+      "button--disabled": this.disabled,
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+        value="${this.value}"
+        ?disabled=${this.disabled || isInactive}
+        aria-current=${ifDefined(this.selected ? "page" : void 0)}
+      >
+        <slot name="prefix" part="prefix" class="button__prefix"></slot>
+        <slot part="label">${this.value === -1 ? "\u2026" : this.value}</slot>
+        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+      </button>
+    `;
+  }
+};
+DSAPaginationButton.styles = pagination_button_styles_default;
+__decorateClass([
+  query(".button")
+], DSAPaginationButton.prototype, "button", 2);
+__decorateClass([
+  property({ type: Number })
+], DSAPaginationButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "selected" })
+], DSAPaginationButton.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean })
+], DSAPaginationButton.prototype, "disabled", 2);
+DSAPaginationButton = __decorateClass([
+  customElement("dsa-pagination-button")
+], DSAPaginationButton);
+
+export {
+  DSAPaginationButton
+};

package/dist/chunks/{chunk.EBCLOXNV.js → chunk.SEH7BBNZ.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/chunk.TB6DCJYX.js

@@ -0,0 +1,57 @@
+import {
+  table_caption_styles_default
+} from "./chunk.K55HKFUM.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  LocalizeController
+} from "./chunk.KZIAHLAV.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/table/table-caption/table-caption.ts
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSATableCaption = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "total-items"
+    );
+    this.localize = new LocalizeController(this);
+  }
+  render() {
+    const hasTotalItems = this.hasSlotController.test("total-items");
+    return html`
+      <slot part="title" name="title"></slot>
+      <slot part="subtitle" name="subtitle"></slot>
+      <p
+        part="total-items"
+        class=${classMap({
+      "has-total-items": hasTotalItems
+    })}
+        aria-hidden=${hasTotalItems ? "false" : "true"}
+      >
+        <slot name="total-items"></slot>
+        <span part="total-item--indicator"
+          >${this.localize.term("results")}</span
+        >
+      </p>
+    `;
+  }
+};
+DSATableCaption.styles = table_caption_styles_default;
+DSATableCaption = __decorateClass([
+  customElement("dsa-table-caption")
+], DSATableCaption);
+
+export {
+  DSATableCaption
+};

package/dist/chunks/{chunk.FKKOUYXE.js → chunk.TFXRULTL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.CMJ2SRTL.js";
 import {
   combobox_styles_default
-} from "./chunk.B6CXFMFM.js";
+} from "./chunk.DJDCH3MP.js";
 import {
   FormControlController
 } from "./chunk.KIFBWPW5.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.V7RJROLH.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.SL4M42DS.js → chunk.TRMEXXU2.js}

@@ -1,10 +1,10 @@
-import {
-  input_styles_default
-} from "./chunk.AQC66RY2.js";
 import {
   getOverridenIconDetails,
   isPrefixIconOverriden
 } from "./chunk.KBT2EKLF.js";
+import {
+  input_styles_default
+} from "./chunk.2AEUQXKH.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";
@@ -16,7 +16,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";

package/dist/chunks/{chunk.RC2LGXYT.js → chunk.VN7U4QIC.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.SGIGGO5M.js";
 import {
   LocalizeController
-} from "./chunk.Y5M7ZKHX.js";
+} from "./chunk.KZIAHLAV.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";