@orangelogic/design-system 2.113.0 → 2.114.0

package/library/components/faceted-filter.js

@@ -1,295 +0,0 @@
-import P from "./badge.js";
-import { C as $ } from "../chunks/button.DIvU_uFU.js";
-import C from "./details.js";
-import A from "./dropdown.js";
-import { C as w } from "../chunks/icon.DnBh6-56.js";
-import { C as E } from "../chunks/icon-button.DxkJ-cp-.js";
-import F from "./space.js";
-import S from "./spinner.js";
-import I from "./tag.js";
-import V from "./tooltip.js";
-import { n as d, C as D } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as N } from "../chunks/component.styles.CRO4Odto.js";
-import { c as O } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as z } from "../chunks/i18n.C21qyGi6.js";
-import { w as _ } from "../chunks/watch.CThbualB.js";
-import { i as j, E as f, x as c } from "../chunks/lit-element.jLBm65_O.js";
-import { r as u } from "../chunks/state.CSDxrqLd.js";
-import { e as B } from "../chunks/class-map.BiVq-cVR.js";
-import { c as y } from "../chunks/repeat.DbF2p5ae.js";
-import { n as h } from "../chunks/when.Dr1es41R.js";
-import { C as M, a as T } from "../chunks/tree.YxFs3Tke.js";
-var v = /* @__PURE__ */ ((e) => (e.Multiple = "multiple", e.Single = "single", e))(v || {});
-const L = j`.facet{--content-padding:var(--cx-spacing-x-small);--expand-icon-size:24px}.facet::part(summary){padding-right:var(--cx-spacing-3x-small);flex:none}.facet::part(base){border-top-width:0;border-left-width:0;border-right-width:0}.facet__title{font-weight:var(--cx-font-weight-medium);color:var(--cx-color-neutral-900)}:host([loading]) cx-tree{pointer-events:none;opacity:.5}cx-tree-item::part(label){flex:1;min-width:0}.facet__item-label{justify-content:space-between;align-items:center;gap:var(--cx-spacing-x-small);width:100%;color:var(--cx-color-neutral-900);font-weight:var(--cx-font-weight-regular);display:flex}.facet__item-label__count{font-size:var(--cx-font-size-x-small);white-space:nowrap;flex-shrink:0}`;
-var R = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (e, t, i, l) => {
-  for (var a = l > 1 ? void 0 : l ? U(t, i) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (a = (l ? n(t, i, a) : n(a)) || a);
-  return l && a && R(t, i, a), a;
-};
-let r = class extends D {
-  constructor() {
-    super(...arguments), this.localize = new z(this), this.loading = !1, this.displayName = "", this.type = "", this.values = [], this.collections = [], this.selection = v.Single, this.mappedSubtypes = {}, this.mappedDisplayNames = {}, this.page = 1;
-  }
-  static parseFacetValue(e) {
-    const t = e.indexOf(">>");
-    return t === -1 ? { parent: e, subtype: "" } : {
-      parent: e.slice(0, t),
-      subtype: e.slice(t + 2)
-    };
-  }
-  handleValuesChange() {
-    this.mappedSubtypes = this.values.reduce(
-      (t, { count: i, value: l }) => {
-        const { parent: a, subtype: s } = r.parseFacetValue(l);
-        return (!t[a] || typeof t[a] != "object") && (t[a] = {}), s && (t[a][s] = i), t[a].all = (t[a].all || 0) + i, t;
-      },
-      {}
-    );
-    const e = {};
-    this.values.forEach((t) => {
-      e[t.value] = t.displayValue;
-    }), this.values.forEach((t) => {
-      const { parent: i, subtype: l } = r.parseFacetValue(t.value);
-      l && !e[i] && (e[i] = i.split(" ").map((a) => a.charAt(0).toUpperCase() + a.slice(1)).join(" "));
-    }), this.mappedDisplayNames = e;
-  }
-  loadMore() {
-    this.page++;
-  }
-  render() {
-    return c`<cx-details open class="facet"><cx-space slot="summary" align-items="center" spacing="x-small" wrap="nowrap"><span class="facet__title">${this.displayName}</span>${h(this.loading, () => c`<cx-spinner></cx-spinner>`, () => f)}</cx-space><cx-space direction="vertical"><cx-tree selection="multiple" data-facet=${this.type}>${y(
-      Object.entries(this.mappedSubtypes).slice(
-        0,
-        this.page * r.itemsPerPage
-      ),
-      ([e]) => e,
-      ([e, t]) => {
-        const { all: i, ...l } = t, a = Object.values(l).reduce((s, n) => s + n, 0);
-        return c`<cx-tree-item data-value=${e} data-type=${this.type} ?readonly=${this.loading} ?partial-sync-checkboxes=${a < i} ?selected=${this.collections.includes(e)}><div class="facet__item-label"><span>${this.mappedDisplayNames[e]}</span>${h(!!i, () => c`<span class="facet__item-label__count">${i}</span>`)}</div>${y(
-          Object.entries(l),
-          ([s]) => s,
-          ([s, n]) => c`<cx-tree-item data-value=${`${e}>>${s}`} data-type=${this.type} ?readonly=${this.loading} ?selected=${this.collections.includes(`${e}>>${s}`)}><div class="facet__item-label"><span>${this.mappedDisplayNames[`${e}>>${s}`]}</span><span class="facet__item-label__count">${n}</span></div></cx-tree-item>`
-        )}</cx-tree-item>`;
-      }
-    )}
-            ${h(
-      Object.keys(this.mappedSubtypes).length > this.page * r.itemsPerPage,
-      () => c`<cx-space><cx-button variant="text" @click=${this.loadMore}><cx-icon slot="prefix" name="add"></cx-icon>${this.localize.term("more")}</cx-button></cx-space>`,
-      () => f
-    )}</cx-tree></cx-space></cx-details>`;
-  }
-};
-r.styles = [N, L];
-r.dependencies = {
-  "cx-button": $,
-  "cx-details": C,
-  "cx-icon": w,
-  "cx-space": F,
-  "cx-spinner": S,
-  "cx-tree": T,
-  "cx-tree-item": M
-};
-r.itemsPerPage = 10;
-m([
-  d({ reflect: !0, type: Boolean })
-], r.prototype, "loading", 2);
-m([
-  d({ attribute: "display-name", type: String })
-], r.prototype, "displayName", 2);
-m([
-  d({ reflect: !0, type: String })
-], r.prototype, "type", 2);
-m([
-  d({ type: Array })
-], r.prototype, "values", 2);
-m([
-  d({ type: Array })
-], r.prototype, "collections", 2);
-m([
-  d({ reflect: !0, type: String })
-], r.prototype, "selection", 2);
-m([
-  u()
-], r.prototype, "mappedSubtypes", 2);
-m([
-  u()
-], r.prototype, "mappedDisplayNames", 2);
-m([
-  u()
-], r.prototype, "page", 2);
-m([
-  _("values")
-], r.prototype, "handleValuesChange", 1);
-r = m([
-  O("cx-faceted-filter-facet")
-], r);
-const q = j`:host{--panel-width:min(280px, 90dvw);display:contents}cx-dropdown{--panel-overflow:hidden}cx-details{--expand-icon-size:24px}.panel{width:var(--panel-width);max-height:480px;position:relative}.panel__content{flex-direction:column;max-height:480px;display:flex}.panel__header{flex-shrink:0}.panel__body{flex:1;min-height:0;overflow-y:auto}.panel__footer{padding:var(--cx-spacing-x-small) var(--cx-spacing-medium);border-top:1px solid var(--cx-color-neutral-200);flex-shrink:0;display:flex}.applied-filters__summary{align-items:center;gap:var(--cx-spacing-2x-small);display:inline-flex}.applied-filters__title{font-weight:var(--cx-font-weight-medium);color:var(--cx-color-neutral-900)}.applied-filters__loading{align-items:center;display:inline-flex}.applied-filters{--content-padding:0 var(--cx-spacing-medium);min-width:100%;width:var(--panel-width)}.applied-filters::part(summary){flex:none}.applied-filters::part(base),cx-faceted-filter-facet::part(base){border-top-width:0;border-left-width:0;border-right-width:0}.applied-filters--empty::part(content){display:none}.faceted-filter__trigger-wrapper{display:inline-block;position:relative}.faceted-filter__trigger::part(base){background-color:var(--cx-color-neutral-100)}.faceted-filter__trigger-badge{position:absolute;top:-15px;right:-15px}.applied-filters__tags{max-width:var(--panel-width);padding-bottom:var(--cx-spacing-x-small)}.panel__clear-all-button{--cx-button-text-transform:none;padding-top:var(--cx-spacing-2x-small);padding-bottom:var(--cx-spacing-2x-small)}.panel__clear-all-button::part(label){text-decoration:underline}.panel__clear-all-button:not([disabled])::part(base):hover{color:var(--cx-color-neutral-800);background-color:#0000;border-color:#0000}cx-tag::part(remove-button){font-size:var(--cx-font-size-x-small)}cx-tag::part(remove-button__base){min-height:unset;min-width:unset;padding:var(--cx-spacing-3x-small)}`;
-var G = Object.defineProperty, H = Object.getOwnPropertyDescriptor, p = (e, t, i, l) => {
-  for (var a = l > 1 ? void 0 : l ? H(t, i) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (a = (l ? n(t, i, a) : n(a)) || a);
-  return l && a && G(t, i, a), a;
-};
-let o = class extends D {
-  constructor() {
-    super(...arguments), this.localize = new z(this), this.facets = [], this.availableFacets = [], this.selectedFacets = {}, this.selection = v.Single, this.loading = !1, this.appliedFiltersCount = 0, this.internalSelection = {}, this.mappedDisplayNames = {};
-  }
-  handleFacetsChange() {
-    this.mappedDisplayNames = this.facets.reduce(
-      (e, t) => {
-        const i = t.values.reduce(
-          (l, { displayValue: a, value: s }) => (l[s] = a, l),
-          {}
-        );
-        return { ...e, [t.facetDetails.facetFieldName]: i };
-      },
-      {}
-    ), this.updateAppliedFiltersCount();
-  }
-  handleSelectedFacetsChange() {
-    this.internalSelection = Object.fromEntries(
-      Object.entries(this.selectedFacets).map(([e, t]) => [e, [...t]])
-    );
-  }
-  handleInternalSelectionChange() {
-    this.updateAppliedFiltersCount();
-  }
-  updateAppliedFiltersCount() {
-    this.appliedFiltersCount = Object.entries(this.internalSelection).reduce(
-      (e, [t, i]) => e + i.filter((l) => this.mappedDisplayNames[t]?.[l]).length,
-      0
-    );
-  }
-  getFacetSelectionMode(e) {
-    return this.facets.find((t) => t.facetDetails.facetFieldName === e)?.facetDetails.selection ?? this.selection;
-  }
-  handleSelectionChange(e) {
-    const i = e.target.type;
-    if (!i)
-      return;
-    const l = this.getFacetSelectionMode(i) === v.Single;
-    let a = e.detail.selection;
-    if (l && a.length > 1) {
-      const n = new Set(this.internalSelection[i] ?? []), g = a.find(
-        (x) => !n.has(x.dataset.value ?? "")
-      );
-      a = g ? [g] : [a[a.length - 1]];
-    }
-    const s = a.reduce(
-      (n, g) => {
-        const x = g.dataset.type, b = g.dataset.value;
-        return !b || !x || (n[x] || (n[x] = []), n[x].push(b)), n;
-      },
-      {
-        ...this.internalSelection,
-        [i]: []
-      }
-    );
-    this.internalSelection = s, this.emit("cx-faceted-filter-change", { detail: { selection: s } });
-  }
-  handleRemove(e) {
-    const t = e.target, i = t.dataset.type, l = t.dataset.value;
-    if (!l || !i)
-      return;
-    const a = { ...this.internalSelection };
-    a[i] && (a[i] = a[i].filter((s) => s !== l)), this.internalSelection = a, this.emit("cx-faceted-filter-change", { detail: { selection: a } });
-  }
-  handleClearAllClick() {
-    this.internalSelection = {}, this.emit("cx-faceted-filter-change", { detail: { selection: {} } });
-  }
-  renderAppliedFilters() {
-    return c`<cx-details open aria-busy=${this.loading ? "true" : "false"} class=${B({
-      "applied-filters": !0,
-      "applied-filters--empty": this.appliedFiltersCount === 0
-    })}><span slot="summary" class="applied-filters__summary"><span class="applied-filters__title">${this.localize.term("appliedFilters")}${this.appliedFiltersCount > 0 ? ` (${this.appliedFiltersCount})` : f}</span>${h(
-      this.loading,
-      () => c`<span class="applied-filters__loading" role="status" aria-label=${this.localize.term("loading")}><cx-spinner></cx-spinner></span>`,
-      () => f
-    )}</span><cx-space direction="horizontal" spacing="small" class="applied-filters__tags">${y(
-      Object.entries(this.internalSelection),
-      ([e]) => e,
-      ([e, t]) => t.filter((i) => this.mappedDisplayNames[e]?.[i]).map(
-        (i) => c`<cx-tag removable data-value=${i} data-type=${e}>${this.mappedDisplayNames[e][i]}</cx-tag>`
-      )
-    )}</cx-space></cx-details>`;
-  }
-  renderFooter() {
-    return h(
-      this.appliedFiltersCount > 0,
-      () => c`<div class="panel__footer"><cx-button variant="text" @click=${this.handleClearAllClick} size="small" class="panel__clear-all-button">${this.localize.term("clear")}</cx-button></div>`,
-      () => f
-    );
-  }
-  render() {
-    return c`<cx-dropdown stay-open-on-select placement="bottom-start" distance="4" hoist @cx-selection-change=${this.handleSelectionChange} @cx-remove=${this.handleRemove}><div slot="trigger" class="faceted-filter__trigger-wrapper"><cx-icon-button name="filter_alt" label=${this.localize.term("filter")} class="faceted-filter__trigger"></cx-icon-button>${h(
-      this.appliedFiltersCount > 0,
-      () => c`<cx-badge class="faceted-filter__trigger-badge" pill size="small">${this.appliedFiltersCount}</cx-badge>`,
-      () => f
-    )}</div><div class="panel"><div class="panel__content"><div class="panel__header">${this.renderAppliedFilters()}</div><div class="panel__body">${h(
-      this.availableFacets.length > 0,
-      () => c`<div>${y(
-        this.availableFacets,
-        (e) => e.facetFieldName,
-        (e) => {
-          const t = this.facets.find(
-            (i) => i.facetDetails.facetFieldName === e.facetFieldName
-          );
-          return t ? c`<cx-faceted-filter-facet display-name=${t.facetDetails.displayName} type=${t.facetDetails.facetFieldName} selection=${e.selection ?? this.selection} .collections=${this.internalSelection[t.facetDetails.facetFieldName] ?? []} .values=${t.values}></cx-faceted-filter-facet>` : f;
-        }
-      )}</div>`,
-      () => f
-    )}</div>${this.renderFooter()}</div></div></cx-dropdown>`;
-  }
-};
-o.styles = [N, q];
-o.dependencies = {
-  "cx-badge": P,
-  "cx-button": $,
-  "cx-details": C,
-  "cx-dropdown": A,
-  "cx-faceted-filter-facet": r,
-  "cx-icon": w,
-  "cx-icon-button": E,
-  "cx-space": F,
-  "cx-spinner": S,
-  "cx-tag": I,
-  "cx-tooltip": V
-};
-p([
-  d({ type: Array })
-], o.prototype, "facets", 2);
-p([
-  d({ attribute: "available-facets", type: Array })
-], o.prototype, "availableFacets", 2);
-p([
-  d({ attribute: "selected-facets", type: Object })
-], o.prototype, "selectedFacets", 2);
-p([
-  d({ type: String })
-], o.prototype, "selection", 2);
-p([
-  d({ type: Boolean })
-], o.prototype, "loading", 2);
-p([
-  u()
-], o.prototype, "appliedFiltersCount", 2);
-p([
-  u()
-], o.prototype, "internalSelection", 2);
-p([
-  u()
-], o.prototype, "mappedDisplayNames", 2);
-p([
-  _("facets")
-], o.prototype, "handleFacetsChange", 1);
-p([
-  _("selectedFacets")
-], o.prototype, "handleSelectedFacetsChange", 1);
-p([
-  _("internalSelection")
-], o.prototype, "handleInternalSelectionChange", 1);
-o = p([
-  O("cx-faceted-filter")
-], o);
-export {
-  o as default
-};