@ds-autonomie/web-components 2.6.0 → 2.7.1

package/cdn/chunks/chunk.WZ6RV3A6.js

@@ -0,0 +1,279 @@
+import {
+  table_styles_default
+} from "./chunk.YQ453CSR.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  n,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/table/table.ts
+var DSATable = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.role = "table";
+    this.size = "medium";
+    this.alignment = "left";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleRowSelect = this.handleRowSelect.bind(this);
+    this.handleAllRowsSelect = this.handleAllRowsSelect.bind(this);
+  }
+  async firstUpdated() {
+    if (!this.selectable) {
+      return;
+    }
+    const headerRow = this.querySelector(
+      this.selectorHeaderRow
+    );
+    if (headerRow) {
+      await headerRow.updateComplete;
+      const allRows = [
+        ...this.querySelectorAll(this.selectorAllRows)
+      ];
+      if (headerRow == null ? void 0 : headerRow.selected) {
+        allRows.forEach((row) => row.selected = headerRow.selected);
+      } else {
+        const selectedRows = allRows.filter((row) => row.selected);
+        const selectedRowsCount = selectedRows.length;
+        const allRowsSelected = selectedRowsCount === allRows.length;
+        headerRow.checkbox.checked = selectedRowsCount > 0 && allRowsSelected;
+        headerRow.checkbox.indeterminate = selectedRowsCount > 0 && !allRowsSelected;
+      }
+    }
+  }
+  // Listeners
+  addRowSelectionListeners() {
+    this.addEventListener(
+      "dsa-table-row-change-selection",
+      this.handleRowSelect
+    );
+    this.addEventListener(
+      "dsa-table-row-all-change-selection",
+      this.handleAllRowsSelect
+    );
+  }
+  removeRowSelectionListeners() {
+    this.removeEventListener(
+      "dsa-table-row-change-selection",
+      this.handleRowSelect
+    );
+    this.removeEventListener(
+      "dsa-table-row-all-change-selection",
+      this.handleAllRowsSelect
+    );
+  }
+  handleAllRowsSelect() {
+    const headerRow = this.querySelector(
+      this.selectorHeaderRow
+    );
+    if (headerRow === null) {
+      return;
+    }
+    const allRows = [
+      ...this.querySelectorAll(this.selectorAllRows)
+    ];
+    allRows.forEach((row) => row.selected = headerRow.selected);
+    const selectedRows = allRows.filter((row) => row.selected);
+    this.emit("dsa-table-row-all-selected", {
+      detail: { selectedRows }
+    });
+  }
+  handleRowSelect(event) {
+    const { target } = event;
+    const allRows = [
+      ...this.querySelectorAll(this.selectorAllRows)
+    ];
+    const selectedRows = allRows.filter((row) => row.selected);
+    const selectedRowsCount = selectedRows.length;
+    const headerRow = this.querySelector(
+      this.selectorHeaderRow
+    );
+    const allRowsSelected = selectedRowsCount === allRows.length;
+    if (headerRow !== null) {
+      headerRow.checkbox.checked = selectedRowsCount > 0 && allRowsSelected;
+      headerRow.checkbox.indeterminate = selectedRowsCount > 0 && !allRowsSelected;
+    }
+    this.emit("dsa-table-row-selected", {
+      detail: {
+        selectedRow: target,
+        selectedRows
+      }
+    });
+  }
+  handleRowExpandable() {
+    const allRows = [
+      ...this.querySelectorAll(this.selectorAllRows)
+    ];
+    allRows.forEach((row) => {
+      if (this.expandable !== void 0) {
+        row.expandable = this.expandable;
+      }
+    });
+  }
+  handleHeaderRowExpandable() {
+    const headerRow = this.querySelector(
+      this.selectorHeaderRow
+    );
+    if (headerRow === null) {
+      return;
+    }
+    if (this.expandable !== void 0) {
+      headerRow.expandable = this.expandable;
+    }
+  }
+  handleRowSelectable() {
+    const allRows = [
+      ...this.querySelectorAll(this.selectorAllRows)
+    ];
+    allRows.forEach((row, index) => {
+      if (this.selectable === true && row.selectionName === "") {
+        row.selectionName = `row-${index}`;
+      } else if (!this.selectable) {
+        row.selectionName = "";
+      }
+    });
+  }
+  handleHeaderRowSelectable() {
+    const headerRow = this.querySelector(
+      this.selectorHeaderRow
+    );
+    if (headerRow) {
+      headerRow.selectionName = this.selectable ? "header" : "";
+    }
+  }
+  handleSizeChange() {
+    const allRows = [
+      ...this.querySelectorAll(this.selectorAllRows),
+      ...this.querySelectorAll(this.selectorHeaderRow)
+    ];
+    allRows.forEach((row) => {
+      row.size = this.size;
+    });
+  }
+  handleExpandableChange() {
+    this.handleRowExpandable();
+    this.handleHeaderRowExpandable();
+  }
+  handleHeaderCellsCount() {
+    const headerCells = [
+      ...this.querySelectorAll(this.selectorHeaderCell)
+    ];
+    const headerCellsCount = headerCells.length + Number(!!this.expandable) + Number(!!this.selectable);
+    const allExpandedRows = [
+      ...this.querySelectorAll(
+        this.selectorAllExpandedRows
+      )
+    ];
+    allExpandedRows.forEach((row) => {
+      row.colSpan = headerCellsCount;
+    });
+    const allSingleCellRows = [
+      ...this.querySelectorAll(
+        this.selectorAllSingleCellRows
+      )
+    ];
+    allSingleCellRows.forEach((row) => {
+      row.colSpan = headerCellsCount;
+    });
+  }
+  handleSortableChange() {
+    const headerCells = this.querySelectorAll(
+      this.selectorHeaderCell
+    );
+    headerCells.forEach((cell) => {
+      if (this.sortable !== void 0) {
+        cell.sortable = this.sortable;
+      }
+    });
+  }
+  handleSelectableChange() {
+    if (this.selectable) {
+      this.addRowSelectionListeners();
+    } else {
+      this.removeRowSelectionListeners();
+    }
+    this.handleRowSelectable();
+    this.handleHeaderRowSelectable();
+  }
+  handleAlignmentChange() {
+    const headerCells = this.querySelectorAll(
+      this.selectorHeaderCell
+    );
+    headerCells.forEach((cell) => {
+      cell.alignment = this.alignment;
+    });
+  }
+  render() {
+    return x` <slot></slot> `;
+  }
+  get selectorHeaderCell() {
+    return "dsa-table-header-cell";
+  }
+  get selectorHeaderRow() {
+    return "dsa-table-header-row";
+  }
+  get selectorAllRows() {
+    return "dsa-table-row";
+  }
+  get selectorAllExpandedRows() {
+    return "dsa-table-expanded-row";
+  }
+  get selectorAllSingleCellRows() {
+    return "dsa-table-single-cell-row";
+  }
+};
+DSATable.styles = table_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], DSATable.prototype, "role", 2);
+__decorateClass([
+  n({ reflect: true })
+], DSATable.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSATable.prototype, "sortable", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSATable.prototype, "selectable", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], DSATable.prototype, "expandable", 2);
+__decorateClass([
+  n()
+], DSATable.prototype, "alignment", 2);
+__decorateClass([
+  watch("size")
+], DSATable.prototype, "handleSizeChange", 1);
+__decorateClass([
+  watch("expandable")
+], DSATable.prototype, "handleExpandableChange", 1);
+__decorateClass([
+  watch(["expandable", "selectable"])
+], DSATable.prototype, "handleHeaderCellsCount", 1);
+__decorateClass([
+  watch("sortable")
+], DSATable.prototype, "handleSortableChange", 1);
+__decorateClass([
+  watch("selectable")
+], DSATable.prototype, "handleSelectableChange", 1);
+__decorateClass([
+  watch("alignment")
+], DSATable.prototype, "handleAlignmentChange", 1);
+DSATable = __decorateClass([
+  t("dsa-table")
+], DSATable);
+
+export {
+  DSATable
+};

package/cdn/chunks/chunk.WZ7EIGZK.js

@@ -0,0 +1,154 @@
+import {
+  profile_button_styles_default
+} from "./chunk.3RLCSIOS.js";
+import {
+  HasSlotController
+} from "./chunk.YIY5RM53.js";
+import {
+  ifDefinedAndNotEmpty
+} from "./chunk.SUUV7E4I.js";
+import {
+  LocalizeController
+} from "./chunk.EM2CIX7W.js";
+import {
+  watch
+} from "./chunk.4FQJ3QJK.js";
+import {
+  ShoelaceElement,
+  e,
+  n,
+  r,
+  t
+} from "./chunk.EW5LC4ZI.js";
+import {
+  x
+} from "./chunk.JXF4O366.js";
+import {
+  __decorateClass
+} from "./chunk.4ZGVANML.js";
+
+// src/components/profile-button/profile-button.ts
+var DISPLAYED_NAME_MAX_LENGTH = 20;
+var DSAProfileButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon");
+    this.localize = new LocalizeController(this);
+    this.fullName = "";
+    this.displayMode = "full";
+    this.firstName = "";
+    this.familyName = "";
+    this.image = "";
+    this.initials = "";
+  }
+  handleBlur() {
+    this.emit("dsa-blur");
+  }
+  handleFocus() {
+    this.emit("dsa-focus");
+  }
+  getDisplayedName() {
+    if (this.fullName.length <= DISPLAYED_NAME_MAX_LENGTH) {
+      return this.fullName;
+    } else {
+      return `${this.firstName.charAt(0)}. ${this.familyName}`;
+    }
+  }
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+  updateFullName() {
+    this.fullName = `${this.firstName} ${this.familyName}`;
+  }
+  renderButton() {
+    var _a;
+    return x`
+      <button
+        part="base"
+        class="profile-button"
+        type="button"
+        aria-label=${ifDefinedAndNotEmpty(
+      (_a = this.accessibleLabel) != null ? _a : `${this.fullName} - ${this.localize.term("userMenu")}`
+    )}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+      >
+        <dsa-avatar
+          size="large"
+          initials=${ifDefinedAndNotEmpty(this.initials)}
+          image=${ifDefinedAndNotEmpty(this.image)}
+        >
+          ${this.hasSlotController.test("icon") ? x` <slot name="icon" slot="icon"></slot> ` : ""}
+        </dsa-avatar>
+        ${this.displayMode === "full" ? x`
+              <span aria-hidden="true" class="profile-button__label"
+                >${this.getDisplayedName()}</span
+              >
+            ` : ""}
+        ${this.displayMode !== "mobile" ? x`
+              <dsa-icon
+                part="caret"
+                class="profile-button__caret"
+                name="expand_more"
+                library="system"
+              ></dsa-icon>
+            ` : ""}
+      </button>
+    `;
+  }
+  render() {
+    if (this.displayMode === "full" && this.fullName.length <= DISPLAYED_NAME_MAX_LENGTH) {
+      return this.renderButton();
+    } else {
+      return x`
+        <dsa-tooltip content=${this.firstName + " " + this.familyName}>
+          ${this.renderButton()}
+        </dsa-tooltip>
+      `;
+    }
+  }
+};
+DSAProfileButton.styles = profile_button_styles_default;
+__decorateClass([
+  e(".profile-button")
+], DSAProfileButton.prototype, "button", 2);
+__decorateClass([
+  r()
+], DSAProfileButton.prototype, "fullName", 2);
+__decorateClass([
+  n({ attribute: "display-mode" })
+], DSAProfileButton.prototype, "displayMode", 2);
+__decorateClass([
+  n({ attribute: "first-name" })
+], DSAProfileButton.prototype, "firstName", 2);
+__decorateClass([
+  n({ attribute: "family-name" })
+], DSAProfileButton.prototype, "familyName", 2);
+__decorateClass([
+  n({ attribute: "accessible-label" })
+], DSAProfileButton.prototype, "accessibleLabel", 2);
+__decorateClass([
+  n()
+], DSAProfileButton.prototype, "image", 2);
+__decorateClass([
+  n()
+], DSAProfileButton.prototype, "initials", 2);
+__decorateClass([
+  watch(["firstName", "familyName"])
+], DSAProfileButton.prototype, "updateFullName", 1);
+DSAProfileButton = __decorateClass([
+  t("dsa-profile-button")
+], DSAProfileButton);
+
+export {
+  DSAProfileButton
+};

package/cdn/chunks/chunk.X4MXT6H7.js

@@ -0,0 +1,262 @@
+import {
+  component_styles_default
+} from "./chunk.MQAAYEM3.js";
+import {
+  i
+} from "./chunk.UKK3NS3L.js";
+
+// src/components/calendar/calendar.styles.ts
+var calendar_styles_default = i`
+  ${component_styles_default}
+
+  .calendar {
+    display: inline-block;
+  }
+
+  wc-datepicker,
+  wc-datepicker *,
+  wc-datepicker *:before,
+  wc-datepicker *:after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .wc-datepicker {
+    display: block;
+    width: var(--dsa-wc-calendar-width);
+    color: var(--dsa-wc-calendar-font-color);
+    font: var(--dsa-font-small-normal);
+    background-color: var(--dsa-wc-calendar-background-color);
+  }
+
+  .wc-datepicker--disabled *:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .wc-datepicker--disabled .wc-datepicker__date:focus-visible > * {
+    outline: none;
+  }
+
+  .wc-datepicker--disabled .wc-datepicker__date {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .wc-datepicker--disabled .wc-datepicker__date:hover > * {
+    background-color: transparent;
+  }
+
+  .wc-datepicker--disabled .wc-datepicker__date--in-range:hover > * {
+    background-color: var(--dsa-wc-calendar-cell-hover-color);
+  }
+
+  .wc-datepicker--disabled .wc-datepicker__date--selected:hover > * {
+    background-color: var(--dsa-wc-calendar-cell-selected-color);
+  }
+
+  .wc-datepicker__header {
+    display: flex;
+    margin-bottom: var(--dsa-spacing-4);
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .wc-datepicker__current-month {
+    display: flex;
+    flex-grow: 1;
+    gap: var(--dsa-spacing-4);
+  }
+
+  .wc-datepicker__month-select,
+  .wc-datepicker__year-select {
+    flex: 1;
+    display: flex;
+    height: 2rem;
+    max-width: 50%;
+    padding: var(--dsa-spacing-4);
+    align-items: center;
+    border: none;
+    color: var(--dsa-wc-calendar-month-year-color);
+    font: var(--dsa-wc-calendar-month-year-font);
+  }
+
+  .wc-datepicker__month-select:focus-visible,
+  .wc-datepicker__year-select:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .wc-datepicker__month-select {
+    cursor: pointer;
+    text-align: right;
+    direction: rtl;
+    appearance: none;
+    border-radius: 0px;
+    background-color: transparent;
+  }
+  .wc-datepicker__year-select {
+    max-width: 5rem;
+  }
+
+  .wc-datepicker__previous-month-button,
+  .wc-datepicker__next-month-button,
+  .wc-datepicker__previous-year-button,
+  .wc-datepicker__next-year-button {
+    display: inline-flex;
+    width: var(--dsa-wc-calendar-cell-size);
+    height: var(--dsa-wc-calendar-cell-size);
+    padding: var(--dsa-wc-calendar-cell-padding);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    color: var(--dsa-wc-calendar-month-year-color);
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  .wc-datepicker__previous-month-button:focus-visible,
+  .wc-datepicker__next-month-button:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .wc-datepicker__previous-month-button > svg,
+  .wc-datepicker__next-month-button > svg {
+    height: 20px;
+    width: 20px;
+  }
+
+  .wc-datepicker__calendar {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0px;
+  }
+
+  .wc-datepicker__weekday > span {
+    height: var(--dsa-wc-calendar-cell-size);
+    width: var(--dsa-wc-calendar-cell-size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font: var(--dsa-wc-calendar-header-font);
+    color: var(--dsa-wc-calendar-header-color);
+    aspect-ratio: 1;
+    text-transform: capitalize;
+  }
+
+  .wc-datepicker__date {
+    height: var(--dsa-wc-calendar-cell-size);
+    width: var(--dsa-wc-calendar-cell-size);
+    text-align: center;
+    cursor: pointer;
+    padding: 0;
+    border: none;
+  }
+
+  .wc-datepicker__date:focus-visible {
+    outline: none;
+  }
+
+  .wc-datepicker__date:focus-visible > * {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .wc-datepicker__date:not(.wc-datepicker__date--in-range):not(
+      .wc-datepicker__date--selected
+    ):hover
+    > * {
+    background-color: var(--dsa-wc-calendar-cell-hover-color);
+    border-radius: var(--dsa-wc-calendar-radius);
+  }
+
+  .wc-datepicker__date > * {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font: var(--dsa-wc-calendar-cell-font);
+    color: var(--dsa-wc-calendar-cell-color);
+    aspect-ratio: 1;
+  }
+
+  .wc-datepicker__date--overflowing > * {
+    color: var(--dsa-wc-calendar-cell-overflow-color);
+  }
+
+  .wc-datepicker__date--today > * {
+    border-radius: var(--dsa-wc-calendar-radius);
+    border: 1px solid var(--dsa-wc-calendar-cell-border-color);
+  }
+  @media (forced-colors: active) {
+    .wc-datepicker__date--today > * {
+      border-style: dotted;
+    }
+  }
+
+  .wc-datepicker__date--in-range > * {
+    background-color: var(--dsa-wc-calendar-cell-hover-color);
+  }
+  .wc-datepicker__date--in-range:not(.wc-datepicker__date--today) > * {
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  .wc-datepicker__date--in-range:not(.wc-datepicker__date--end):not(
+      .wc-datepicker__date--selected
+    ):hover
+    > * {
+    background-color: var(--dsa-wc-calendar-cell-in-range-hover-color);
+  }
+
+  .wc-datepicker__date--selected > * {
+    border-radius: var(--dsa-wc-calendar-radius);
+    border: 1px solid var(--dsa-wc-calendar-cell-selected-color);
+  }
+
+  .wc-datepicker__date--selected > * {
+    color: var(--dsa-color-text-on-contrasted-primary);
+    background-color: var(--dsa-wc-calendar-cell-selected-color);
+  }
+
+  .wc-datepicker__date--selected:hover > * {
+    color: var(--dsa-color-text-on-contrasted-primary);
+    background-color: var(--dsa-color-primitive-colors-identity-purple-800);
+  }
+
+  .wc-datepicker__date--start:not(.wc-datepicker__date--end) > * {
+    border-radius: 4px 0px 0px 4px;
+    border: 1px solid var(--dsa-wc-calendar-cell-border-color);
+  }
+
+  .wc-datepicker__date--end:not(.wc-datepicker__date--start) > * {
+    border-radius: 0px 4px 4px 0px;
+    border: 1px solid var(--dsa-wc-calendar-cell-border-color);
+  }
+
+  .wc-datepicker__date--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .wc-datepicker__date--disabled:not(.wc-datepicker__date--selected):not(
+      .wc-datepicker__date--in-range
+    ):hover
+    > * {
+    background-color: transparent;
+  }
+
+  .wc-datepicker__date--disabled.wc-datepicker__date--in-range:not(
+      .wc-datepicker__date--selected
+    ):not(.wc-datepicker__date--in-range)
+    > * {
+    background-color: transparent;
+  }
+`;
+
+export {
+  calendar_styles_default
+};