@ds-autonomie/web-components 2.18.0 → 2.20.0

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

@@ -0,0 +1,412 @@
+import {
+  table_row_styles_default
+} from "./chunk.FOZRSNGL.js";
+import {
+  DSATableCell
+} from "./chunk.4UFNEXOD.js";
+import {
+  DSACheckbox
+} from "./chunk.IJLBJ37U.js";
+import {
+  DSAIconButton
+} from "./chunk.MWPOWC6N.js";
+import {
+  LocalizeController
+} from "./chunk.34HS7ICN.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
+import {
+  watch
+} from "./chunk.QB2NJE2Y.js";
+import {
+  ShoelaceElement
+} from "./chunk.SVWU6JW4.js";
+import {
+  __decorateClass
+} from "./chunk.N3L4GIUO.js";
+
+// src/components/table-row/table-row.ts
+import { html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DSATableRow = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.showExpandButton = false;
+    this.ignoreReorderClick = false;
+    this.dragImageCloneContainer = null;
+    this.role = "row";
+    this.size = "medium";
+    this.selected = false;
+    this.expandable = false;
+    this.reorderable = false;
+    this.rearranging = false;
+    this.expanded = false;
+    this.showExpandedLabel = "";
+    this.hideExpandedLabel = "";
+    this.selectionLabel = "";
+    this.selectionName = "";
+    this.selectionValue = "";
+    this.reorderLabel = "";
+    this.loading = false;
+  }
+  get isFirefox() {
+    return navigator.userAgent.includes("Firefox");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleRowClick = this.handleRowClick.bind(this);
+    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
+    this.handleReorderDragStart = this.handleReorderDragStart.bind(this);
+    this.handleReorderDragEnd = this.handleReorderDragEnd.bind(this);
+    this.addEventListener("click", this.handleRowClick);
+    this.addEventListener("dragstart", this.handleReorderDragStart);
+    this.addEventListener("dragend", this.handleReorderDragEnd);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleRowClick);
+    this.removeEventListener("dragstart", this.handleReorderDragStart);
+    this.removeEventListener("dragend", this.handleReorderDragEnd);
+    removeAttributeIfPresent(this, "drag-preview");
+    this.cleanupDragImageClone();
+  }
+  handleRowClick() {
+    this.emit("dsa-table-row-click");
+  }
+  handleCheckboxChange(e) {
+    e.stopPropagation();
+    this.selected = this.checkbox.checked;
+  }
+  emitReorderToggle() {
+    this.dispatchEvent(
+      new CustomEvent("dsa-table-row-reorder-toggle", {
+        bubbles: true,
+        composed: true,
+        detail: { row: this }
+      })
+    );
+  }
+  emitReorderMove(direction) {
+    this.dispatchEvent(
+      new CustomEvent("dsa-table-row-reorder-move", {
+        bubbles: true,
+        composed: true,
+        detail: { row: this, direction }
+      })
+    );
+  }
+  handleReorderKeyDown(event) {
+    const { key } = event;
+    if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.ignoreReorderClick = true;
+      this.emitReorderToggle();
+      return;
+    }
+    if (!this.rearranging) {
+      return;
+    }
+    if (key === "Tab") {
+      this.emitReorderToggle();
+      return;
+    }
+    if (key === "ArrowUp") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.emitReorderMove("up");
+    }
+    if (key === "ArrowDown") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.emitReorderMove("down");
+    }
+    if (key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.emitReorderToggle();
+    }
+  }
+  handleReorderClick(event) {
+    event.stopPropagation();
+    if (this.ignoreReorderClick || this.loading) {
+      this.ignoreReorderClick = false;
+      return;
+    }
+    this.emitReorderToggle();
+  }
+  handleReorderBlur() {
+    if (!this.rearranging) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      if (!this.rearranging) {
+        return;
+      }
+      const activeElement = document.activeElement;
+      if (activeElement === this.reorderButton || activeElement instanceof Node && this.contains(activeElement)) {
+        return;
+      }
+      this.emitReorderToggle();
+    });
+  }
+  handleReorderDragStart(event) {
+    var _a;
+    if (!this.reorderable) {
+      return;
+    }
+    this.ignoreReorderClick = true;
+    event.stopPropagation();
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData(
+        "text/plain",
+        this.selectionValue || ((_a = this.textContent) == null ? void 0 : _a.trim()) || "dsa-table-row"
+      );
+      const rowRect = this.getBoundingClientRect();
+      const offsetX = Math.max(0, event.clientX - rowRect.left);
+      const offsetY = Math.max(0, event.clientY - rowRect.top);
+      setAttributeIfDifferent(this, "drag-preview", "true");
+      requestAnimationFrame(() => {
+        removeAttributeIfPresent(this, "drag-preview");
+      });
+      if (this.isFirefox) {
+        this.cleanupDragImageClone();
+        const dragRowClone = this.createDragImageClone();
+        event.dataTransfer.setDragImage(dragRowClone, offsetX, offsetY);
+      }
+    }
+    this.dispatchEvent(
+      new CustomEvent("dsa-table-row-reorder-drag-start", {
+        bubbles: true,
+        composed: true,
+        detail: { row: this }
+      })
+    );
+  }
+  handleReorderDragEnd(event) {
+    if (!this.reorderable) {
+      return;
+    }
+    event.stopPropagation();
+    setTimeout(() => {
+      this.ignoreReorderClick = false;
+    });
+    removeAttributeIfPresent(this, "drag-preview");
+    this.cleanupDragImageClone();
+    this.dispatchEvent(
+      new CustomEvent("dsa-table-row-reorder-drag-end", {
+        bubbles: true,
+        composed: true,
+        detail: { row: this }
+      })
+    );
+  }
+  createDragImageClone() {
+    const rowRect = this.getBoundingClientRect();
+    const dragTable = document.createElement("table");
+    const dragBody = document.createElement("tbody");
+    const dragRow = this.cloneNode(true);
+    dragTable.style.position = "fixed";
+    dragTable.style.inset = "0 auto auto 0";
+    dragTable.style.transform = "translate(-9999px, -9999px)";
+    dragTable.style.pointerEvents = "none";
+    dragTable.style.borderCollapse = "collapse";
+    dragTable.style.tableLayout = "fixed";
+    dragTable.style.width = `${rowRect.width}px`;
+    dragTable.style.zIndex = "2147483647";
+    dragBody.appendChild(dragRow);
+    dragTable.appendChild(dragBody);
+    document.body.appendChild(dragTable);
+    this.dragImageCloneContainer = dragTable;
+    return dragRow;
+  }
+  cleanupDragImageClone() {
+    var _a;
+    (_a = this.dragImageCloneContainer) == null ? void 0 : _a.remove();
+    this.dragImageCloneContainer = null;
+  }
+  renderReorderButton() {
+    if (!this.reorderable) {
+      return html``;
+    }
+    return html`
+      <dsa-table-cell class="column-reorder-button" aria-hidden=${this.loading}>
+        <dsa-icon-button
+          class="reorder-button"
+          variant=${this.rearranging ? "primary" : "default"}
+          name=${this.rearranging ? "unfold_more" : "drag_indicator"}
+          size="medium"
+          label=${this.reorderLabel !== "" ? this.reorderLabel : this.localize.term("startReorderTableRow")}
+          library=${this.rearranging ? "default" : "system"}
+          @click=${this.handleReorderClick}
+          @keydown=${this.handleReorderKeyDown}
+          @dsa-blur=${this.handleReorderBlur}
+          ?disabled=${this.loading}
+          ?toggle=${true}
+          ?pressed=${this.rearranging}
+        ></dsa-icon-button>
+      </dsa-table-cell>
+    `;
+  }
+  renderFirstCell() {
+    if (!this.selectionName) {
+      return html``;
+    }
+    return html`
+      <dsa-table-cell class="column-checkbox" aria-hidden=${this.loading}>
+        <div class="column-checkbox--content">
+          <dsa-checkbox
+            class="checkbox"
+            size="small"
+            name=${this.selectionName}
+            accessible-name=${this.selectionLabel !== "" ? this.selectionLabel : this.localize.term("selectRow")}
+            value=${this.selectionValue}
+            ?checked=${this.selected}
+            @click=${(e) => e.stopPropagation()}
+            @dsa-change=${this.handleCheckboxChange}
+            ?disabled=${this.loading}
+          ></dsa-checkbox>
+        </div>
+      </dsa-table-cell>
+    `;
+  }
+  handleExpandClick(e) {
+    e.stopPropagation();
+    this.expanded = !this.expanded;
+    this.emit("dsa-table-row-expand-change");
+  }
+  renderExpandButton() {
+    const showExpandedLabel = this.showExpandedLabel !== "" ? this.showExpandedLabel : this.localize.term("showExpandedTableRow");
+    const hideExpandedLabel = this.hideExpandedLabel !== "" ? this.hideExpandedLabel : this.localize.term("hideExpandedTableRow");
+    return html`
+      <dsa-table-cell
+        class=${classMap({
+      "column-expand-button": true,
+      "column-expand-button--has-icon": this.showExpandButton
+    })}
+        aria-hidden=${this.loading}
+      >
+        <dsa-icon-button
+          variant="default"
+          name="expand_more"
+          size="xlarge"
+          class=${classMap({
+      "expand-button": true,
+      "expand-button--expand-less": this.expanded
+    })}
+          label=${this.expanded ? hideExpandedLabel : showExpandedLabel}
+          @click=${this.handleExpandClick}
+          ?disabled=${this.loading}
+          library="system"
+        ></dsa-icon-button>
+      </dsa-table-cell>
+    `;
+  }
+  handleExpandableChange() {
+    var _a;
+    const shouldShowExpandButton = this.expandable && Boolean((_a = this.nextElementSibling) == null ? void 0 : _a.matches(this.selectorExpandedRow));
+    if (this.showExpandButton !== shouldShowExpandButton) {
+      this.showExpandButton = shouldShowExpandButton;
+    }
+  }
+  handleExpandedChange() {
+    var _a;
+    if ((_a = this.nextElementSibling) == null ? void 0 : _a.matches(this.selectorExpandedRow)) {
+      this.nextElementSibling.expanded = this.expanded;
+    }
+  }
+  handleSelectedChange() {
+    this.emit("dsa-table-row-change-selection");
+  }
+  render() {
+    return html`
+      ${this.renderReorderButton()}${this.renderFirstCell()}
+      <slot></slot>
+      ${this.expandable ? this.renderExpandButton() : html``}
+    `;
+  }
+  get selectorExpandedRow() {
+    return "dsa-table-expanded-row";
+  }
+};
+DSATableRow.styles = table_row_styles_default;
+DSATableRow.dependencies = {
+  "dsa-table-cell": DSATableCell,
+  "dsa-checkbox": DSACheckbox,
+  "dsa-icon-button": DSAIconButton
+};
+__decorateClass([
+  query(".checkbox")
+], DSATableRow.prototype, "checkbox", 2);
+__decorateClass([
+  query(".expand-button")
+], DSATableRow.prototype, "expandedButton", 2);
+__decorateClass([
+  query(".reorder-button")
+], DSATableRow.prototype, "reorderButton", 2);
+__decorateClass([
+  state()
+], DSATableRow.prototype, "showExpandButton", 2);
+__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);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "expandable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "reorderable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "rearranging", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "expanded", 2);
+__decorateClass([
+  property({ attribute: "show-expanded-label" })
+], DSATableRow.prototype, "showExpandedLabel", 2);
+__decorateClass([
+  property({ attribute: "hide-expanded-label" })
+], DSATableRow.prototype, "hideExpandedLabel", 2);
+__decorateClass([
+  property({ attribute: "selection-label" })
+], DSATableRow.prototype, "selectionLabel", 2);
+__decorateClass([
+  property({ attribute: "selection-name", reflect: true })
+], DSATableRow.prototype, "selectionName", 2);
+__decorateClass([
+  property({ attribute: "selection-value" })
+], DSATableRow.prototype, "selectionValue", 2);
+__decorateClass([
+  property({ attribute: "reorder-label" })
+], DSATableRow.prototype, "reorderLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSATableRow.prototype, "loading", 2);
+__decorateClass([
+  watch("expandable")
+], DSATableRow.prototype, "handleExpandableChange", 1);
+__decorateClass([
+  watch("expanded")
+], DSATableRow.prototype, "handleExpandedChange", 1);
+__decorateClass([
+  watch("selected", { waitUntilFirstUpdate: true })
+], DSATableRow.prototype, "handleSelectedChange", 1);
+DSATableRow = __decorateClass([
+  customElement("dsa-table-row")
+], DSATableRow);
+
+export {
+  DSATableRow
+};

package/dist/chunks/{chunk.XJCHW2GZ.js → chunk.6DUG6A52.js}

@@ -10,7 +10,11 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
+import {
+  removeAttributeIfPresent,
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -34,7 +38,8 @@ var DSAHeader = class extends ShoelaceElement {
       "second-logo",
       "site-name",
       "baseline",
-      "search"
+      "search",
+      "navbar"
     );
     this.localize = new LocalizeController(this);
     this.firstLogo = "public";
@@ -67,26 +72,32 @@ var DSAHeader = class extends ShoelaceElement {
     }
     return cnsaLogoSvg(this.localize.term("cnsaGoToHomepage"));
   }
+  getHeaderSearch() {
+    if (!this.hasSlotController.test("search")) {
+      return null;
+    }
+    return this.querySelector("dsa-header-search");
+  }
   handleSearchExpanded() {
-    if (this.hasSlotController.test("search")) {
-      const search = this.querySelector("dsa-header-search");
-      if (!search) return;
-      if (this.searchExpanded) {
-        search.setAttribute("expanded", "true");
-      } else {
-        search.removeAttribute("expanded");
-      }
+    const search = this.getHeaderSearch();
+    if (!search) {
+      return;
+    }
+    if (this.searchExpanded) {
+      setAttributeIfDifferent(search, "expanded", "true");
+    } else {
+      removeAttributeIfPresent(search, "expanded");
     }
   }
   handleMobile() {
-    if (this.hasSlotController.test("search")) {
-      const search = this.querySelector("dsa-header-search");
-      if (!search) return;
-      if (this.mobile) {
-        search.setAttribute("mobile", "true");
-      } else {
-        search.removeAttribute("mobile");
-      }
+    const search = this.getHeaderSearch();
+    if (!search) {
+      return;
+    }
+    if (this.mobile) {
+      setAttributeIfDifferent(search, "mobile", "true");
+    } else {
+      removeAttributeIfPresent(search, "mobile");
     }
   }
   render() {