@arcgis/portal-components 5.2.0-next.25 → 5.2.0-next.26

package/dist/components/arcgis-portal-browser-filter-date/customElement.js

@@ -0,0 +1,117 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as u } from "../../chunks/runtime.js";
+import { watch as m } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as g, createEvent as p, nothing as f } from "@arcgis/lumina";
+import { debounce as v } from "@arcgis/toolkit/function";
+import { css as D, html as o } from "lit";
+import { createRef as y, ref as w } from "lit/directives/ref.js";
+import { u as b } from "../../chunks/useT9n.js";
+import "../arcgis-portal-browser-filter/customElement.js";
+const n = 1440 * 60 * 1e3;
+function i(a) {
+  const e = typeof a == "string" ? Number.parseInt(a, 10) : typeof a == "number" ? a : (a ?? /* @__PURE__ */ new Date()).valueOf(), t = new Date(e);
+  return t.setHours(0, 0, 0, 0), t.valueOf();
+}
+function h(a) {
+  return i(a) + n - 1;
+}
+const k = 7 * n, $ = D`:host{display:block}.custom-date-picker{margin-top:.5rem;margin-bottom:.5rem;margin-inline-start:1.75rem;width:12.75rem}`, d = ["custom", "last30", "last7", "never", "today", "yesterday"];
+class P extends g {
+  constructor() {
+    super(...arguments), this._messages = b({ name: "portal-browser", blocking: !0 }), this._datePicker = y(), this.today = "", this.debouncedRangeChangeHandler = v(() => this.rangeChangeHandler(), 200), this.property = "created", this.range = null, this.expanded = !1, this.includeNever = !1, this.arcgisBrowserFilter = p();
+  }
+  static {
+    this.properties = { property: 1, serverProperty: 1, range: 1, start: 1, end: 1, store: 0, expanded: 5, includeNever: 5 };
+  }
+  static {
+    this.styles = $;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = /* @__PURE__ */ new Date();
+    this.today = `${e.getFullYear()}-${e.getMonth() + 1}-${e.getDate()}`, this.attachStoreWatcher(), this.range && (this.range !== "custom" || this.start && this.end) && this.arcgisBrowserFilter.emit(this.getEventDetail());
+  }
+  willUpdate(e) {
+    (e.has("store") || e.has("property")) && this.attachStoreWatcher(), (e.has("range") || e.has("start") || e.has("end")) && this.range === "custom" && this.setDatePickerValue();
+  }
+  disconnectedCallback() {
+    this.removeStoreWatcher?.(), super.disconnectedCallback();
+  }
+  attachStoreWatcher() {
+    if (this.removeStoreWatcher?.(), !this.store)
+      return;
+    const e = m(() => {
+      const t = this.store?.filters?.[this.property];
+      return {
+        value: t?.value,
+        additionalParams: t?.additionalParams
+      };
+    }, () => {
+      const t = this.store?.filters?.[this.property];
+      !(t?.value || t?.additionalParams) && this.isActive() && this.resetDatePicker();
+    });
+    this.removeStoreWatcher = () => e.remove();
+  }
+  resetDatePicker() {
+    this.range = null, this.start = null, this.end = null, this._datePicker.value && (this._datePicker.value.valueAsDate = []);
+  }
+  getValue() {
+    const e = i(), t = h();
+    switch (this.range) {
+      case "yesterday":
+        return [e - n, e - 1];
+      case "today":
+        return [e, t];
+      case "last7":
+        return [e - k, t];
+      case "last30":
+        return [e - n * 30, t];
+      case "never":
+        return [-1, -1];
+      case "custom": {
+        const s = i(this.start), r = h(this.end);
+        return [s, r];
+      }
+      default:
+        return null;
+    }
+  }
+  getEventDetail() {
+    const e = this._messages?.filterDate, t = this.getValue(), s = this.serverProperty ?? (this.property === "modified" ? "modified" : "uploaded"), r = this.range ? e?.[this.range] ?? "" : "", c = e?.[this.property] ?? "";
+    return {
+      id: this.property,
+      value: t ? `(${s}:[${t[0]} TO ${t[1]}])` : "",
+      range: this.range,
+      start: t ? new Date(t[0]) : void 0,
+      end: t ? new Date(t[1]) : void 0,
+      label: this.range ? c.replace("${date}", r) : ""
+    };
+  }
+  isActive() {
+    return !!(this.range && (this.range !== "custom" || this.start && this.end));
+  }
+  setDatePickerValue() {
+    !this._datePicker.value || this.range !== "custom" || !this.start || !this.end || (this._datePicker.value.valueAsDate = [new Date(i(this.start)), new Date(i(this.end))]);
+  }
+  rangeChangeHandler() {
+    const e = this._datePicker.value?.valueAsDate, [t, s] = Array.isArray(e) ? e : [];
+    t && s && (this.start = t, this.end = s, this.arcgisBrowserFilter.emit(this.getEventDetail()));
+  }
+  renderRange(e) {
+    const s = this._messages?.filterDate;
+    return o`<calcite-tree-item data-range=${e ?? f} .selected=${e === this.range}>${s?.[e] ?? ""}</calcite-tree-item>`;
+  }
+  render() {
+    const t = this._messages?.filterDate, s = this.includeNever ? d : d.filter((r) => r !== "never");
+    return o`<arcgis-portal-browser-filter .heading=${t?.title?.[this.property] ?? ""} .expanded=${this.expanded} .active=${this.isActive()} .clearLabel=${t?.clear ?? ""} .filterId=${this.property} @arcgisBrowserFilterRemove=${() => {
+      this.resetDatePicker(), this.arcgisBrowserFilter.emit(this.getEventDetail());
+    }}><calcite-tree selection-mode=children scale=m @calciteTreeSelect=${(r) => {
+      const l = r.target.selectedItems?.[0]?.dataset.range;
+      this.range = this.range === l ? null : l, !(this.range === "custom" && !(this.start && this.end)) && this.arcgisBrowserFilter.emit(this.getEventDetail());
+    }}>${s.map((r) => this.renderRange(r))}</calcite-tree>${this.range === "custom" && o`<calcite-input-date-picker class="custom-date-picker" @calciteInputDatePickerChange=${() => this.debouncedRangeChangeHandler()} scale=s .max=${this.today} calendars=1 layout=vertical month-style=abbreviated proximity-selection-disabled range ${w(this._datePicker)}></calcite-input-date-picker>` || ""}</arcgis-portal-browser-filter>`;
+  }
+}
+u("arcgis-portal-browser-filter-date", P);
+export {
+  P as ArcgisPortalBrowserFilterDate
+};

package/dist/components/arcgis-portal-browser-filter-date/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-portal-browser-filter-date/index.js

@@ -0,0 +1,5 @@
+import "@esri/calcite-components/components/calcite-tree-item";
+import "../arcgis-portal-browser-filter/index.js";
+import "@esri/calcite-components/components/calcite-tree";
+import "@esri/calcite-components/components/calcite-input-date-picker";
+export * from "./customElement.js";

package/dist/components/arcgis-portal-browser-filter-status/customElement.d.ts

@@ -1,25 +1,81 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { PortalBrowserFilterDetail } from "../arcgis-portal-browser/utils/store.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 export abstract class ArcgisPortalBrowserFilterStatus extends LitElement {
+  /** @internal */
+  protected _messages: {
+      browser: {
+          refineContent: string;
+          close: string;
+          loading: string;
+      };
+      range: {
+          summary: string;
+          announcement: string;
+      };
+      filterStatus: {
+          filters: string;
+          additional: string;
+          clearAllFilters: string;
+      };
+      filterDate: {
+          title: {
+              created: string;
+              modified: string;
+          };
+          clear: string;
+          created: string;
+          modified: string;
+          today: string;
+          yesterday: string;
+          last7: string;
+          last30: string;
+          never: string;
+          custom: string;
+      };
+  } & T9nMeta<{
+      browser: {
+          refineContent: string;
+          close: string;
+          loading: string;
+      };
+      range: {
+          summary: string;
+          announcement: string;
+      };
+      filterStatus: {
+          filters: string;
+          additional: string;
+          clearAllFilters: string;
+      };
+      filterDate: {
+          title: {
+              created: string;
+              modified: string;
+          };
+          clear: string;
+          created: string;
+          modified: string;
+          today: string;
+          yesterday: string;
+          last7: string;
+          last30: string;
+          never: string;
+          custom: string;
+      };
+  }>;
   /** Pass the width of the browser from state */
   accessor browserWidth: number | undefined;
   /** Pass the width of the component container */
   accessor componentWidth: number | undefined;
   accessor filters: Record<string, PortalBrowserFilterDetail>;
   accessor hiddenFilterIds: string[];
-  accessor t9n: FilterStatusT9n;
   readonly arcgisBrowserFilterClear: import("@arcgis/lumina").TargetedEvent<this, null>;
   readonly arcgisBrowserFilterRemove: import("@arcgis/lumina").TargetedEvent<this, string>;
   readonly "@eventTypes": {
     arcgisBrowserFilterClear: ArcgisPortalBrowserFilterStatus["arcgisBrowserFilterClear"]["detail"];
     arcgisBrowserFilterRemove: ArcgisPortalBrowserFilterStatus["arcgisBrowserFilterRemove"]["detail"];
   };
-}
-
-export type FilterStatusT9n = {
-  filters: string;
-  additional: string;
-  clearAllFilters: string;
-};
+}

package/dist/components/arcgis-portal-browser-filter-status/customElement.js

@@ -1,20 +1,21 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as h } from "../../chunks/runtime.js";
-import { keyed as u } from "lit/directives/keyed.js";
-import { LitElement as p, createEvent as c } from "@arcgis/lumina";
-import { css as m, html as s } from "lit";
-import { b } from "../../chunks/ui.js";
-import { g as f } from "../../chunks/dom.js";
-const w = m`:host{display:flex;align-items:center}.status-list{display:flex;align-items:center;max-width:100%}.status-chip{max-width:100%;--calcite-color-foreground-2: var(--calcite-color-foreground-1)}.chip-group{max-width:100%;min-width:0}.status-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover-content{max-width:28rem;padding:.75rem}.clear-button{margin-inline-start:.25rem}`;
-class B extends p {
+import { c as u } from "../../chunks/runtime.js";
+import { keyed as p } from "lit/directives/keyed.js";
+import { LitElement as m, createEvent as d } from "@arcgis/lumina";
+import { css as b, html as e } from "lit";
+import { b as f } from "../../chunks/ui.js";
+import { g } from "../../chunks/dom.js";
+import { u as w } from "../../chunks/useT9n.js";
+const B = b`:host{display:flex;align-items:center}.status-list{display:flex;align-items:center;max-width:100%}.status-chip{max-width:100%;--calcite-color-foreground-2: var(--calcite-color-foreground-1)}.chip-group{max-width:100%;min-width:0}.status-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover-content{max-width:28rem;padding:.75rem}.clear-button{margin-inline-start:.25rem}`;
+class v extends m {
   constructor() {
-    super(...arguments), this.inBounds = [], this.outOfBounds = [], this.filters = {}, this.hiddenFilterIds = [], this.arcgisBrowserFilterClear = c(), this.arcgisBrowserFilterRemove = c();
+    super(...arguments), this._messages = w({ name: "portal-browser", blocking: !0 }), this.inBounds = [], this.outOfBounds = [], this.filters = {}, this.hiddenFilterIds = [], this.arcgisBrowserFilterClear = d(), this.arcgisBrowserFilterRemove = d();
   }
   static {
-    this.properties = { inBounds: 16, outOfBounds: 16, filters: 0, hiddenFilterIds: 0, t9n: 0, componentWidth: 9, browserWidth: 9 };
+    this.properties = { inBounds: 16, outOfBounds: 16, filters: 0, hiddenFilterIds: 0, componentWidth: 9, browserWidth: 9 };
   }
   static {
-    this.styles = w;
+    this.styles = B;
   }
   connectedCallback() {
     super.connectedCallback(), this.processValidFilters();
@@ -26,30 +27,30 @@ class B extends p {
     return this.hiddenFilterIds.includes(t.id) ? !1 : t.id === "collaborations" && "additionalParams" in t ? !!(t.additionalParams && t.label) : !!(t.value && t.label);
   }
   processValidFilters() {
-    const t = Object.values(this.filters).filter(this.isFilterValid.bind(this)), i = this.componentWidth ?? 0;
-    if ((this.browserWidth ?? window.innerWidth) < b.sm) {
+    const t = Object.values(this.filters).filter(this.isFilterValid.bind(this)), s = this.componentWidth ?? 0;
+    if ((this.browserWidth ?? window.innerWidth) < f.sm) {
       this.inBounds = t, this.outOfBounds = [];
       return;
     }
-    const d = Math.max(i - 460, 0);
-    let r = 0;
-    const a = [], l = [];
-    t.forEach((o) => {
-      const n = f({ text: o.label ?? "" });
-      !i || r + n <= d ? (a.push(o), r += n) : l.push(o);
-    }), this.inBounds = a, this.outOfBounds = l;
+    const h = Math.max(s - 460, 0);
+    let a = 0;
+    const l = [], n = [];
+    t.forEach((r) => {
+      const c = g({ text: r.label });
+      !s || a + c <= h ? (l.push(r), a += c) : n.push(r);
+    }), this.inBounds = l, this.outOfBounds = n;
   }
   renderChip(t) {
-    return u(t.id, s`<calcite-chip class="status-chip" scale=s .label=${t.label} .value=${t.id} closable appearance=outline @calciteChipClose=${() => {
+    return p(t.id, e`<calcite-chip class="status-chip" scale=s .label=${t.label} .value=${t.id} closable appearance=outline @calciteChipClose=${() => {
       this.arcgisBrowserFilterRemove.emit(t.id);
     }}><span class="status-chip__label">${t.label}</span></calcite-chip>`);
   }
   render() {
-    const t = this.outOfBounds.length > 0, i = this.inBounds.length + this.outOfBounds.length;
-    return i ? s`<div class="status-list"><calcite-chip-group class="chip-group" .label=${this.t9n.filters} scale=s>${this.inBounds.map((e) => this.renderChip(e))}${t && s`<calcite-button id=popover-button round kind=neutral appearance=outline scale=s>+ ${this.outOfBounds.length}</calcite-button>` || ""}</calcite-chip-group>${t && s`<calcite-popover .label=${this.t9n.additional} reference-element=popover-button placement=bottom-end><div class="popover-content"><calcite-chip-group .label=${this.t9n.additional} scale=s>${this.outOfBounds.map((e) => this.renderChip(e))}</calcite-chip-group></div></calcite-popover>` || ""}${i > 1 && s`<calcite-button class="clear-button" scale=s appearance=transparent kind=brand @click=${() => this.arcgisBrowserFilterClear.emit(null)}>${this.t9n.clearAllFilters}</calcite-button>` || ""}</div>` : null;
+    const t = this._messages.filterStatus, s = this.outOfBounds.length > 0, o = this.inBounds.length + this.outOfBounds.length;
+    return o ? e`<div class="status-list"><calcite-chip-group class="chip-group" .label=${t.filters} scale=s>${this.inBounds.map((i) => this.renderChip(i))}${s && e`<calcite-button id=popover-button round kind=neutral appearance=outline scale=s>+ ${this.outOfBounds.length}</calcite-button>` || ""}</calcite-chip-group>${s && e`<calcite-popover .label=${t.additional} reference-element=popover-button placement=bottom-end><div class="popover-content"><calcite-chip-group .label=${t.additional} scale=s>${this.outOfBounds.map((i) => this.renderChip(i))}</calcite-chip-group></div></calcite-popover>` || ""}${o > 1 && e`<calcite-button class="clear-button" scale=s appearance=transparent kind=brand @click=${() => this.arcgisBrowserFilterClear.emit(null)}>${t.clearAllFilters}</calcite-button>` || ""}</div>` : null;
   }
 }
-h("arcgis-portal-browser-filter-status", B);
+u("arcgis-portal-browser-filter-status", v);
 export {
-  B as ArcgisPortalBrowserFilterStatus
+  v as ArcgisPortalBrowserFilterStatus
 };

package/dist/components/arcgis-portal-browser-filters/customElement.d.ts

@@ -0,0 +1,7 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { PortalBrowserStore } from "../arcgis-portal-browser/utils/store.js";
+
+export abstract class ArcgisPortalBrowserFilters extends LitElement {
+  accessor store: PortalBrowserStore | undefined;
+}

package/dist/components/arcgis-portal-browser-filters/customElement.js

@@ -0,0 +1,29 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as e } from "../../chunks/runtime.js";
+import { css as o, html as r } from "lit";
+import { LitElement as i, safeClassMap as l } from "@arcgis/lumina";
+import { createRef as a, ref as c } from "lit/directives/ref.js";
+import { b as n } from "../../chunks/ui.js";
+const p = o`:host{display:block}.filters-shell{display:block}.filters-shell__top{padding:0}.filters-shell__top--padded{padding:0 1rem 1rem}`;
+class d extends i {
+  constructor() {
+    super(...arguments), this._accordionRef = a();
+  }
+  static {
+    this.properties = { store: 0 };
+  }
+  static {
+    this.styles = p;
+  }
+  updated() {
+    this.store && this._accordionRef.value && (this.store.filterElement = this._accordionRef.value);
+  }
+  render() {
+    const t = this.store, s = !!t?.panel || (t?.width ?? 0) < n.sm;
+    return r`<div class="filters-shell" .inert=${!!t?.preview}><div class=${l({ "filters-shell__top": !0, "filters-shell__top--padded": s })}><slot name=top></slot></div><slot name=primary></slot><slot name=title></slot><calcite-accordion appearance=transparent icon-type=chevron icon-position=start scale=m ${c(this._accordionRef)}><slot></slot></calcite-accordion><slot name=bottom></slot></div>`;
+  }
+}
+e("arcgis-portal-browser-filters", d);
+export {
+  d as ArcgisPortalBrowserFilters
+};

package/dist/components/arcgis-portal-browser-filters/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-portal-browser-filters/index.js

@@ -0,0 +1,2 @@
+import "@esri/calcite-components/components/calcite-accordion";
+export * from "./customElement.js";