@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/chunks/option.DnpkE8Xi.js

@@ -1,296 +0,0 @@
-import { n as s, C as x } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "./component.styles.DMSLciL5.js";
-import { c as v } from "./custom-element.L4WJXn1j.js";
-import { L as g } from "./i18n.C0iakJkV.js";
-import { w as d } from "./watch.q1sEjPWL.js";
-import { i as b, x as h } from "./lit-element.jLBm65_O.js";
-import { r as f } from "./state.CSDxrqLd.js";
-import { e as _ } from "./query.BBf1UFkC.js";
-import { e as y } from "./class-map.BiVq-cVR.js";
-import { n as u } from "./when.Dr1es41R.js";
-import k from "../components/icon.js";
-import w from "../components/space.js";
-var r = /* @__PURE__ */ ((t) => (t.Left = "left", t.Right = "right", t))(r || {});
-const C = b`
-  :host {
-    display: block;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  .option {
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-family: var(--cx-font-sans);
-    font-size: var(--cx-font-size-small);
-    font-weight: var(--option-font-weight, var(--cx-font-weight-regular));
-    line-height: var(--cx-line-height-large);
-    letter-spacing: var(--cx-letter-spacing-normal);
-    color: var(--option-color, var(--cx-color-neutral-700));
-    padding: var(--cx-spacing-x-small) var(--cx-spacing-medium)
-      var(--cx-spacing-x-small) var(--cx-spacing-x-small);
-    transition: var(--cx-transition-fast) fill;
-    cursor: pointer;
-  }
-
-  .option:not(.option--show-check) {
-    padding-inline: var(--cx-spacing-small);
-  }
-
-  .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--cx-menu-item-background-color-hover);
-  }
-
-  .option--current,
-  .option--current.option--disabled {
-    background-color: var(--cx-menu-item-background-color-hover);
-    opacity: 1;
-  }
-
-  .option--selected {
-    color: var(--option-selected-color, var(--cx-color-primary));
-    font-weight: var(
-      --option-selected-font-weight,
-      var(--cx-font-weight-regular)
-    );
-  }
-
-  .option--disabled {
-    outline: none;
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  .option__content {
-    flex: 1;
-  }
-
-  .option__label {
-    flex: 1 1 auto;
-    display: inline-block;
-    line-height: var(--cx-line-height-medium);
-  }
-
-  .option .option__check {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    visibility: hidden;
-    padding-inline-end: var(--cx-spacing-2x-small);
-    display: none;
-  }
-
-  .option--show-check .option__check {
-    display: block;
-  }
-
-  .option--show-check.option--selected .option__check {
-    visibility: visible;
-  }
-
-  .option__help-text {
-    color: var(--option-help-text-color, var(--cx-color-neutral-600));
-    font-weight: var(
-      --option-help-text-font-weight,
-      var(--cx-font-weight-regular)
-    );
-  }
-
-  .option--selected .option__content .option__help-text {
-    color: var(--option-selected-help-text-color, var(--cx-color-primary));
-    font-weight: var(
-      --option-selected-help-text-font-weight,
-      var(--cx-font-weight-regular)
-    );
-  }
-
-  .option__prefix,
-  .option__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .option__prefix::slotted(*) {
-    margin-inline-end: var(--cx-spacing-x-small);
-  }
-
-  .option__suffix::slotted(*) {
-    margin-inline-start: var(--cx-spacing-x-small);
-  }
-
-  .option__prefix {
-    align-self: var(--prefix-alignment, center);
-  }
-
-  .option__suffix {
-    align-self: var(--suffix-alignment, center);
-  }
-
-  .option__check {
-    align-self: var(--check-alignment, center);
-  }
-
-  @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) .option {
-      outline: dashed 1px SelectedItem;
-      outline-offset: -1px;
-    }
-  }
-`;
-var L = Object.defineProperty, E = Object.getOwnPropertyDescriptor, o = (t, a, i, l) => {
-  for (var n = l > 1 ? void 0 : l ? E(a, i) : a, c = t.length - 1, p; c >= 0; c--)
-    (p = t[c]) && (n = (l ? p(a, i, n) : p(n)) || n);
-  return l && n && L(a, i, n), n;
-};
-let e = class extends x {
-  constructor() {
-    super(...arguments), this.localize = new g(this), this.current = !1, this.selected = !1, this.hasHover = !1, this.value = "", this.disabled = !1, this.showCheck = !1, this.checkPlacement = r.Left;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "option"), this.setAttribute("aria-selected", "false");
-  }
-  handleDefaultSlotChange() {
-    const t = this.getTextLabel();
-    if (typeof this.cachedTextLabel > "u") {
-      this.cachedTextLabel = t;
-      return;
-    }
-    t !== this.cachedTextLabel && (this.cachedTextLabel = t, this.emit("slotchange", {
-      bubbles: !0,
-      cancelable: !1,
-      composed: !1
-    }));
-  }
-  handleMouseEnter() {
-    this.hasHover = !0;
-  }
-  handleMouseLeave() {
-    this.hasHover = !1;
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  handleSelectedChange() {
-    this.setAttribute("aria-selected", this.selected ? "true" : "false");
-  }
-  handleValueChange() {
-    typeof this.value != "string" && (this.value = String(this.value)), this.value.includes(" ") && (console.error(
-      "Option values cannot include a space. All spaces have been replaced with underscores.",
-      this
-    ), this.value = this.value.replace(/ /g, "_"));
-  }
-  /** Returns a plain text label based on the option's content. */
-  getTextLabel() {
-    const t = this.childNodes;
-    let a = "";
-    return [...t].forEach((i) => {
-      i.nodeType === Node.ELEMENT_NODE && (i.hasAttribute("slot") || (a += i.textContent)), i.nodeType === Node.TEXT_NODE && (a += i.textContent);
-    }), a.trim();
-  }
-  render() {
-    return h`
-      <div
-        part="base"
-        class=${y({
-      option: !0,
-      "option--current": this.current,
-      "option--disabled": this.disabled,
-      "option--hover": this.hasHover,
-      "option--selected": this.selected,
-      "option--show-check": this.showCheck
-    })}
-        @mouseenter=${this.handleMouseEnter}
-        @mouseleave=${this.handleMouseLeave}
-      >
-        ${u(
-      this.checkPlacement === r.Left,
-      () => h`<cx-icon
-              part="checked-icon"
-              class="option__check"
-              name="check"
-              library="system"
-              aria-hidden="true"
-            ></cx-icon> `
-    )}
-        <slot part="prefix" name="prefix" class="option__prefix"></slot>
-        <cx-space
-          part="content"
-          class="option__content"
-          direction="vertical"
-          spacing="3x-small"
-        >
-          <slot
-            part="label"
-            class="option__label"
-            @slotchange=${this.handleDefaultSlotChange}
-          ></slot>
-          <slot
-            part="help-text"
-            name="help-text"
-            class="option__help-text"
-          ></slot>
-        </cx-space>
-        <slot part="suffix" name="suffix" class="option__suffix"></slot>
-        ${u(
-      this.checkPlacement === r.Right,
-      () => h`<cx-icon
-              part="checked-icon"
-              class="option__check"
-              name="check"
-              library="system"
-              aria-hidden="true"
-            ></cx-icon> `
-    )}
-      </div>
-    `;
-  }
-};
-e.styles = [m, C];
-e.dependencies = { "cx-icon": k, "cx-space": w };
-o([
-  _(".option__label")
-], e.prototype, "defaultSlot", 2);
-o([
-  f()
-], e.prototype, "current", 2);
-o([
-  f()
-], e.prototype, "selected", 2);
-o([
-  f()
-], e.prototype, "hasHover", 2);
-o([
-  s({ reflect: !0 })
-], e.prototype, "value", 2);
-o([
-  s({ reflect: !0, type: Boolean })
-], e.prototype, "disabled", 2);
-o([
-  s({ attribute: "show-check", reflect: !0, type: Boolean })
-], e.prototype, "showCheck", 2);
-o([
-  s({ attribute: "check-placement", reflect: !0, type: String })
-], e.prototype, "checkPlacement", 2);
-o([
-  d("disabled")
-], e.prototype, "handleDisabledChange", 1);
-o([
-  d("selected")
-], e.prototype, "handleSelectedChange", 1);
-o([
-  d("value")
-], e.prototype, "handleValueChange", 1);
-e = o([
-  v("cx-option")
-], e);
-export {
-  e as C,
-  r as a
-};

package/library/chunks/pagination.C30LoTya.js

@@ -1,341 +0,0 @@
-import { n as p, C as _ } from "./lib-cortex-element.CVMmyPMC.js";
-import { c as b } from "./custom-element.L4WJXn1j.js";
-import { L as C } from "./i18n.C0iakJkV.js";
-import { c } from "./math.DqTA6ya4.js";
-import { w as d } from "./watch.q1sEjPWL.js";
-import { i as y, x as s } from "./lit-element.jLBm65_O.js";
-import { r as m } from "./state.CSDxrqLd.js";
-import { e as f } from "./class-map.BiVq-cVR.js";
-import { c as x } from "./repeat.DbF2p5ae.js";
-import { n as h } from "./when.Dr1es41R.js";
-import { C as z } from "./button.KnE3mcyM.js";
-import v from "../components/icon-button.js";
-import { C as $ } from "./option.DnpkE8Xi.js";
-import S from "../components/select.js";
-import w from "../components/tooltip.js";
-import { C as I } from "./typography.oDzoLbZS.js";
-import { c as P } from "./component.styles.DMSLciL5.js";
-var l = /* @__PURE__ */ ((t) => (t.Both = "both", t.Pages = "pages", t.Rows = "rows", t))(l || {});
-const B = y`
-  ${P}
-
-  :host {
-    --width: 100px;
-    display: block;
-    width: fit-content;
-  }
-
-  cx-typography::part(base) {
-    margin-block: 0;
-  }
-
-  .pagination {
-    display: flex;
-    align-items: center;
-    gap: var(--cx-spacing-small);
-    font-size: var(--cx-font-size-small);
-  }
-
-  .pagination .pagination__label__container {
-    display: inline-flex;
-    gap: var(--cx-spacing-small);
-    align-items: center;
-  }
-
-  .pagination .pagination__select::part(combobox) {
-    width: var(--width);
-  }
-
-  .pagination .pagination__navigation-buttons {
-    display: flex;
-    align-items: center;
-    gap: 0;
-  }
-
-  .pagination .pagination_count,
-  .pagination .pagination__pages {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .pagination__page--active::part(base) {
-    color: var(--cx-color-primary);
-  }
-`;
-var O = Object.defineProperty, F = Object.getOwnPropertyDescriptor, i = (t, a, o, r) => {
-  for (var n = r > 1 ? void 0 : r ? F(a, o) : a, g = t.length - 1, u; g >= 0; g--)
-    (u = t[g]) && (n = (r ? u(a, o, n) : u(n)) || n);
-  return r && n && O(a, o, n), n;
-};
-let e = class extends _ {
-  constructor() {
-    super(...arguments), this.localize = new C(this), this.count = 0, this.pageSizeOptions = [10, 20, 50, 100], this.pageSize = this.pageSizeOptions[0], this.label = this.localize.term("rowsPerPage"), this.showFirst = !1, this.showLast = !1, this.showPaginationButtons = !1, this.paginationButtonCount = 5, this.paginationCounter = l.Rows, this._pageIndex = 1, this._pageCount = Math.max(1, Math.ceil(this.count / this.pageSize));
-  }
-  get pageIndex() {
-    return this._pageIndex;
-  }
-  set pageIndex(t) {
-    this._pageIndex = c(t, 1, this._pageCount);
-  }
-  get pageStart() {
-    return c((this._pageIndex - 1) * this.pageSize + 1, 0, this.count);
-  }
-  get pageEnd() {
-    return c(this._pageIndex * this.pageSize, 0, this.count);
-  }
-  get prevDisabled() {
-    return this._pageIndex <= 1;
-  }
-  get nextDisabled() {
-    return this._pageIndex >= this._pageCount;
-  }
-  updatePageCount() {
-    const t = Number.isFinite(this.pageSize) && this.pageSize > 0 ? this.pageSize : 1;
-    this._pageCount = Math.max(1, Math.ceil(this.count / t)), this.pageIndex = c(this.pageIndex, 1, this._pageCount);
-  }
-  handlePageSizeSelectChange(t) {
-    const a = t.target;
-    a && (this.pageSize = Number(a.value), this.pageIndex = 1);
-  }
-  handleFirst() {
-    this._pageIndex = 1;
-  }
-  handleBack() {
-    this._pageIndex -= 1, this._pageIndex < 1 && this.handleFirst();
-  }
-  handleForward() {
-    this._pageIndex += 1, this._pageIndex > this._pageCount && this.handleLast();
-  }
-  handleLast() {
-    this._pageIndex = this._pageCount;
-  }
-  async handleCountChange() {
-    this.updatePageCount();
-  }
-  handlePageChange() {
-    this.emit("cx-page-change", {
-      detail: {
-        pageIndex: this._pageIndex
-      }
-    });
-  }
-  handlePageSizeChange() {
-    this.updatePageCount(), this.emit("cx-page-size-change", {
-      detail: {
-        pageSize: this.pageSize
-      }
-    });
-  }
-  handlePageClick(t) {
-    const a = t.target;
-    a && (this.pageIndex = Number(a.dataset.page));
-  }
-  renderPageButton(t) {
-    return s`
-      <cx-button
-        data-page=${t}
-        variant="text"
-        size="small"
-        class=${f({
-      pagination__page: !0,
-      "pagination__page--active": t === this.pageIndex
-    })}
-      >
-        ${t}
-      </cx-button>
-    `;
-  }
-  renderPageButtons() {
-    const t = Math.floor((this.paginationButtonCount - 1) / 2), a = Math.ceil((this.paginationButtonCount - 1) / 2), o = Math.max(
-      1,
-      this._pageCount - this.pageIndex + t + 1 < this.paginationButtonCount ? this._pageCount - this.paginationButtonCount + 1 : this.pageIndex - t
-    ), r = Math.min(
-      this._pageCount,
-      this.pageIndex <= a ? this.paginationButtonCount : this.pageIndex + a
-    );
-    return s`
-      <div class="pagination__pages" @click=${this.handlePageClick}>
-        ${x(
-      Array.from({ length: r - o + 1 }, (n, g) => g + o),
-      (n) => n,
-      (n) => this.renderPageButton(n)
-    )}
-      </div>
-    `;
-  }
-  renderPageCount() {
-    return s`<cx-typography variant="body3" class="pagination_count"
-      >${this.localize.term(
-      "itemOfTotal",
-      this.pageIndex,
-      this._pageCount
-    )}</cx-typography
-    >`;
-  }
-  renderRowCount() {
-    return s`<cx-typography variant="body3" class="pagination_count"
-      >${this.localize.term(
-      "itemRangeOfTotal",
-      this.pageStart,
-      this.pageEnd,
-      this.count
-    )}</cx-typography
-    >`;
-  }
-  render() {
-    return s`
-      <div class="pagination">
-        ${h(
-      this.pageSizeOptions.length > 1,
-      () => s`
-            <label class="pagination__label__container">
-              <cx-typography variant="body3" class="pagination__label">
-                ${this.label}
-              </cx-typography>
-              <cx-select
-                class="pagination__select"
-                size="small"
-                hoist
-                value=${this.pageSize.toString()}
-                @cx-change=${this.handlePageSizeSelectChange}
-              >
-                ${x(
-        this.pageSizeOptions,
-        (t) => t,
-        (t) => s`
-                    <cx-option value=${t}>${t}</cx-option>
-                  `
-      )}
-              </cx-select>
-            </label>
-          `
-    )}
-        ${h(
-      this.paginationCounter === l.Both || this.paginationCounter === l.Rows,
-      () => this.renderRowCount(),
-      () => this.renderPageCount()
-    )}
-        <div class="pagination__navigation-buttons">
-          ${h(
-      this.showFirst,
-      () => s`
-              <cx-tooltip hoist content=${this.localize.term("first")}>
-                <cx-icon-button
-                  class="pagination__first"
-                  label=${this.localize.term("first")}
-                  name="first_page"
-                  ?disabled=${this.prevDisabled}
-                  @click=${this.handleFirst}
-                ></cx-icon-button>
-              </cx-tooltip>
-            `
-    )}
-          <cx-tooltip hoist content=${this.localize.term("previous")}>
-            <cx-icon-button
-              class="pagination__back"
-              label=${this.localize.term("previous")}
-              name="chevron_left"
-              ?disabled=${this.prevDisabled}
-              @click=${this.handleBack}
-            ></cx-icon-button>
-          </cx-tooltip>
-          ${h(
-      this.paginationCounter === l.Both,
-      () => this.renderPageCount()
-    )}
-          ${h(this.showPaginationButtons, () => this.renderPageButtons())}
-          <cx-tooltip hoist content=${this.localize.term("next")}>
-            <cx-icon-button
-              class="pagination__forward"
-              label=${this.localize.term("next")}
-              name="chevron_right"
-              ?disabled=${this.nextDisabled}
-              @click=${this.handleForward}
-            ></cx-icon-button>
-          </cx-tooltip>
-          ${h(
-      this.showLast,
-      () => s`
-              <cx-tooltip hoist content=${this.localize.term("last")}>
-                <cx-icon-button
-                  class="pagination__last"
-                  label=${this.localize.term("last")}
-                  name="last_page"
-                  ?disabled=${this.nextDisabled}
-                  @click=${this.handleLast}
-                ></cx-icon-button>
-              </cx-tooltip>
-            `
-    )}
-        </div>
-      </div>
-    `;
-  }
-};
-e.styles = B;
-e.dependencies = {
-  "cx-button": z,
-  "cx-icon-button": v,
-  "cx-option": $,
-  "cx-select": S,
-  "cx-tooltip": w,
-  "cx-typography": I
-};
-i([
-  p({ type: Number })
-], e.prototype, "count", 2);
-i([
-  p({
-    attribute: "page-size-options",
-    converter: {
-      fromAttribute: (t) => {
-        const a = (t ?? "").trim().split(/\s+/).map((o) => Number.parseInt(o, 10)).filter((o) => Number.isFinite(o) && o > 0);
-        return a.length ? a : [];
-      },
-      toAttribute: (t) => t.join(" ")
-    },
-    type: String
-  })
-], e.prototype, "pageSizeOptions", 2);
-i([
-  p({ attribute: "page-size", type: Number })
-], e.prototype, "pageSize", 2);
-i([
-  p({ type: String })
-], e.prototype, "label", 2);
-i([
-  p({ attribute: "show-first", type: Boolean })
-], e.prototype, "showFirst", 2);
-i([
-  p({ attribute: "show-last", type: Boolean })
-], e.prototype, "showLast", 2);
-i([
-  p({ attribute: "show-pagination-buttons", type: Boolean })
-], e.prototype, "showPaginationButtons", 2);
-i([
-  p({ attribute: "pagination-button-count", type: Number })
-], e.prototype, "paginationButtonCount", 2);
-i([
-  p({ attribute: "pagination-counter", type: String })
-], e.prototype, "paginationCounter", 2);
-i([
-  m()
-], e.prototype, "_pageIndex", 2);
-i([
-  m()
-], e.prototype, "_pageCount", 2);
-i([
-  d("count")
-], e.prototype, "handleCountChange", 1);
-i([
-  d(["_pageIndex"])
-], e.prototype, "handlePageChange", 1);
-i([
-  d(["pageSize"])
-], e.prototype, "handlePageSizeChange", 1);
-e = i([
-  b("cx-pagination")
-], e);
-export {
-  e as C,
-  l as P
-};