@arcgis/portal-components 5.2.0-next.141 → 5.2.0-next.142
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/{OKUI3HQ4.js → 2A4BYZOS.js} +1 -1
- package/dist/cdn/{LCO2BWDK.js → 47PU5HDG.js} +1 -1
- package/dist/cdn/{AWCYG2JJ.js → 6EE4B3MI.js} +1 -1
- package/dist/cdn/{LYOR4B2O.js → ADSPENPN.js} +1 -1
- package/dist/cdn/{XROCYFKH.js → AXNTYD46.js} +1 -1
- package/dist/cdn/{X4G32AIG.js → EJN2JQOX.js} +1 -1
- package/dist/cdn/{J537SBGI.js → IXSEMBHA.js} +1 -1
- package/dist/cdn/{CJHR4UK5.js → M6BRGNH3.js} +1 -1
- package/dist/cdn/{YG5VQATB.js → R57DISOR.js} +1 -1
- package/dist/cdn/{BEAUY47J.js → XNEYNX5G.js} +1 -1
- package/dist/cdn/index.js +1 -1
- package/dist/components/arcgis-portal-group-card/customElement.js +16 -16
- package/dist/components/arcgis-portal-item-card/customElement.js +58 -58
- package/dist/components/arcgis-portal-navigation/index.js +1 -1
- package/dist/docs/api.json +1 -1
- package/dist/docs/docs.json +1 -1
- package/dist/docs/web-types.json +1 -1
- package/package.json +7 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
|
|
2
2
|
import { c as b } from "../../chunks/runtime.js";
|
|
3
3
|
import { substitute as h, formatDate as _ } from "@arcgis/core/intl.js";
|
|
4
|
-
import { LitElement as v, createEvent as m, safeClassMap as g, nothing as
|
|
4
|
+
import { LitElement as v, createEvent as m, safeClassMap as g, nothing as c } from "@arcgis/lumina";
|
|
5
5
|
import { css as w, html as t } from "lit";
|
|
6
6
|
import { createRef as $, ref as f } from "lit/directives/ref.js";
|
|
7
7
|
import { u as x } from "../../chunks/useT9n.js";
|
|
@@ -67,7 +67,7 @@ class S extends v {
|
|
|
67
67
|
const d = Array.from(e.children), o = d.indexOf(r);
|
|
68
68
|
if (o < 0)
|
|
69
69
|
return e.clientWidth;
|
|
70
|
-
const n = Number.parseFloat(i.columnGap || i.gap || "0") || 0, l = d.slice(0, o).reduce((s,
|
|
70
|
+
const n = Number.parseFloat(i.columnGap || i.gap || "0") || 0, l = d.slice(0, o).reduce((s, p) => s + p.getBoundingClientRect().width, 0);
|
|
71
71
|
return e.clientWidth - l - n * o;
|
|
72
72
|
}
|
|
73
73
|
getAccessInfo(e) {
|
|
@@ -136,19 +136,19 @@ class S extends v {
|
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
renderCompactView() {
|
|
139
|
-
const { group: e, selection: r, isLoaded: i, disabled: d, link: o, newTab: n, linkHandler: l, handleCardClick: s, selected:
|
|
139
|
+
const { group: e, selection: r, isLoaded: i, disabled: d, link: o, newTab: n, linkHandler: l, handleCardClick: s, selected: p } = this, a = this.getThumbnailGroup(e);
|
|
140
140
|
return t`<section class=${g({
|
|
141
141
|
"group-card": !0,
|
|
142
142
|
"group-card--hoverable": r !== "none",
|
|
143
|
-
"group-card--selected":
|
|
143
|
+
"group-card--selected": p,
|
|
144
144
|
"group-card--disabled": d,
|
|
145
145
|
"group-card--loaded": i
|
|
146
146
|
})} tabindex=-1 @click=${o ? void 0 : s} @mouseover=${() => {
|
|
147
147
|
this.hover = !0;
|
|
148
148
|
}} @mouseout=${() => {
|
|
149
149
|
this.hover = !1;
|
|
150
|
-
}} ${f(this.sectionEl)}>${o ? t`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${o ??
|
|
151
|
-
l && !
|
|
150
|
+
}} ${f(this.sectionEl)}>${o ? t`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${o ?? c} target=${(n ? "_blank" : void 0) ?? c} rel=${(n ? "noopener noreferrer" : void 0) ?? c} @click=${(u) => {
|
|
151
|
+
l && !u.ctrlKey && !u.metaKey && (u.preventDefault(), l(this.group));
|
|
152
152
|
}}>${t`${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${a} .portal=${this.portal} scale=l></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><h3 class="group-card__title group-card__title--compact"><span class="group-card__title__span">${e.title}</span></h3>${this.renderCompactBadges(e)}</div><slot name=content-end></slot>`}</a>` : t`<div class="group-card__upper group-card__upper--compact">${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${a} .portal=${this.portal} scale=l></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><h3 class="group-card__title group-card__title--compact"><span class="group-card__title__span">${e.title}</span></h3>${this.renderCompactBadges(e)}</div><slot name=content-end></slot></div>`}</section>`;
|
|
153
153
|
}
|
|
154
154
|
render() {
|
|
@@ -157,17 +157,17 @@ class S extends v {
|
|
|
157
157
|
return;
|
|
158
158
|
if (this.view === "compact")
|
|
159
159
|
return this.renderCompactView();
|
|
160
|
-
const n = this.getAccessInfo(e.access ?? "private"), l = this.getThumbnailGroup(e), s = this.preview === "top" && !o,
|
|
160
|
+
const n = this.getAccessInfo(e.access ?? "private"), l = this.getThumbnailGroup(e), s = this.preview === "top" && !o, p = this.previewed;
|
|
161
161
|
return t`<section class=${g({
|
|
162
162
|
"group-card": !0,
|
|
163
163
|
"group-card--hoverable": r !== "none",
|
|
164
164
|
"group-card--selected": this.selected,
|
|
165
165
|
"group-card--disabled": d,
|
|
166
166
|
"group-card--loaded": i,
|
|
167
|
-
"group-card--previewed":
|
|
168
|
-
})} @click=${o ? void 0 : this.handleCardClick} tabindex=${(s ? 0 : void 0) ??
|
|
167
|
+
"group-card--previewed": p
|
|
168
|
+
})} @click=${o ? void 0 : this.handleCardClick} tabindex=${(s ? 0 : void 0) ?? c} .role=${s ? "button" : void 0} aria-haspopup=${(s ? "dialog" : void 0) ?? c} @keydown=${(a) => {
|
|
169
169
|
s && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this.handleCardClick());
|
|
170
|
-
}} ${f(this.sectionEl)}><slot name=content-top></slot>${o ? t`<a class="group-card__upper group-card__upper--link" href=${this.link ??
|
|
170
|
+
}} ${f(this.sectionEl)}><slot name=content-top></slot>${o ? t`<a class="group-card__upper group-card__upper--link" href=${this.link ?? c} target=${(this.newTab ? "_blank" : void 0) ?? c} rel=${(this.newTab ? "noopener noreferrer" : void 0) ?? c} @mouseover=${() => {
|
|
171
171
|
this.hover = !0;
|
|
172
172
|
}} @mouseout=${() => {
|
|
173
173
|
this.hover = !1;
|
|
@@ -176,17 +176,17 @@ class S extends v {
|
|
|
176
176
|
a.preventDefault(), this.linkHandler(this.group);
|
|
177
177
|
return;
|
|
178
178
|
}
|
|
179
|
-
const
|
|
180
|
-
|
|
179
|
+
const u = a.target;
|
|
180
|
+
u instanceof HTMLElement && u.closest(".group-card__footer") && a.preventDefault();
|
|
181
181
|
}}>${this.renderListContent(e, l, n)}</a>` : t`<div class="group-card__upper" @mouseover=${() => {
|
|
182
182
|
this.hover = !0;
|
|
183
183
|
}} @mouseout=${() => {
|
|
184
184
|
this.hover = !1;
|
|
185
|
-
}}>${this.renderListContent(e, l, n)}</div>`}<div class="group-card__footer"><div class="group-card__footer__start"><slot name=actions-start></slot>${!this.hideOwner && t`<div class="group-card__profile-wrap"><arcgis-portal-user-popup .baseUrl=${this.getResolvedBaseUrl()} class="group-card__owner" .portal=${this.portal} .username=${e.owner ?? void 0} underline @arcgisUserPopupInternalUIAction=${(
|
|
186
|
-
|
|
187
|
-
}}></arcgis-portal-user-popup></div>` || ""}</div><div class="group-card__footer__end">${this.preview === "action" && t`<calcite-button scale=s .appearance=${
|
|
185
|
+
}}>${this.renderListContent(e, l, n)}</div>`}<div class="group-card__footer"><div class="group-card__footer__start"><slot name=actions-start></slot>${!this.hideOwner && t`<div class="group-card__profile-wrap"><arcgis-portal-user-popup .baseUrl=${this.getResolvedBaseUrl()} class="group-card__owner" .portal=${this.portal} .username=${e.owner ?? void 0} underline @arcgisUserPopupInternalUIAction=${(a) => {
|
|
186
|
+
a.stopPropagation(), this.arcgisGroupBrowserInternalUIAction.emit(a.detail);
|
|
187
|
+
}}></arcgis-portal-user-popup></div>` || ""}</div><div class="group-card__footer__end">${this.preview === "action" && t`<calcite-button scale=s .appearance=${p ? "solid" : "outline-fill"} kind=neutral @click=${() => {
|
|
188
188
|
this.arcgisGroupBrowserCardPreview.emit(this.group);
|
|
189
|
-
}}>${
|
|
189
|
+
}}>${p ? this.messages.hidePreview : this.messages.preview}</calcite-button>` || ""}<div @click=${(a) => {
|
|
190
190
|
a.stopPropagation();
|
|
191
191
|
}}><slot name=actions-end></slot></div></div></div></section>`;
|
|
192
192
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
|
|
2
2
|
import { c as S } from "../../chunks/runtime.js";
|
|
3
|
-
import { css as B, html as
|
|
4
|
-
import { formatDate as y, substitute as
|
|
5
|
-
import { LitElement as U, createEvent as
|
|
3
|
+
import { css as B, html as i } from "lit";
|
|
4
|
+
import { formatDate as y, substitute as v } from "@arcgis/core/intl.js";
|
|
5
|
+
import { LitElement as U, createEvent as _, safeClassMap as n, nothing as u } from "@arcgis/lumina";
|
|
6
6
|
import { createRef as k, ref as I } from "lit/directives/ref.js";
|
|
7
|
-
import { u as
|
|
8
|
-
import { a as
|
|
9
|
-
import { g as
|
|
10
|
-
import { g as
|
|
7
|
+
import { u as P } from "../../chunks/useT9n.js";
|
|
8
|
+
import { a as F } from "../../chunks/functionalities.js";
|
|
9
|
+
import { g as z } from "../../chunks/items.js";
|
|
10
|
+
import { g as D } from "../../chunks/url.js";
|
|
11
11
|
const E = B`:host{display:block;min-width:0;container-type:inline-size;container-name:portal-item-card}.item-card{position:relative;display:flex;min-height:100%;flex-direction:column;color:var(--calcite-color-text-1);opacity:0;box-shadow:none;transition-duration:.15s;outline-color:transparent;background-color:var(--calcite-color-foreground-1);transition-property:background-color,outline,outline-offset,opacity;border:1px solid var(--calcite-color-border-3);&:focus{z-index:10;outline:2px solid var(--calcite-color-brand);outline-offset:-2px}}.item-card--loaded{opacity:1}.item-card--selected{border-color:var(--calcite-color-brand)}.item-card--previewed{outline:1px solid var(--calcite-color-brand);outline-offset:-2px}.item-card--hoverable{cursor:pointer}.item-card--disabled{opacity:.5;pointer-events:none}.item-card__upper{flex:1 1 0%;background-color:var(--calcite-color-foreground-1);transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s}.item-card__upper:hover{background-color:var(--calcite-color-background)}.item-card__upper--link{color:var(--calcite-color-text-1);text-decoration-line:none;outline-color:transparent;&:focus{z-index:10;outline:2px solid var(--calcite-color-brand);outline-offset:2px}}.item-card__upper:hover .item-card__hover-text,.item-card:focus .item-card__hover-text{opacity:1}.item-card__top{padding:.75rem}.item-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column}.item-card__content-end{min-width:0;margin-block-start:.25rem}.item-card__title{margin:0;overflow-wrap:break-word;padding:0;font-size:.875rem;font-weight:500;line-height:1.375}.item-card__title--grid{font-size:.875rem}.item-card__title--padded{margin-bottom:.25rem}.item-card__title__span{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;transition:all var(--calcite-animation-timing) ease-in-out 0s,outline 0s,outline-offset 0s;background-image:linear-gradient(transparent,transparent);background-position-x:0%,100%;background-position-y:min(1.25em,100%);background-repeat:no-repeat,no-repeat;background-size:100% 1px,100% 1px}.item-card--previewed .item-card__title__span,.item-card__upper--link:hover .item-card__title__span{background-image:linear-gradient(var(--calcite-color-text-3),var(--calcite-color-text-3))}.item-card__summary{margin:0;flex:1 1 0%;color:var(--calcite-color-text-2);display:none;overflow-wrap:break-word;padding:0;font-size:.875rem;line-height:1.25}.item-card__detail--updated-full.item-card__divider{display:none}.item-card__details{margin-block-start:.25rem;display:flex;flex-direction:row}.item-card__detail{font-size:.75rem;line-height:1.35;color:var(--calcite-color-text-2)}.item-card__divider{display:flex;align-items:center;flex:0 0 auto}.item-card__divider:not([empty]):before{content:"";height:1.25rem;width:1px;background-color:var(--calcite-color-border-1);margin-inline:.75rem}.item-card__divider:first-child:before{display:none}.item-card__thumbnail{margin:0;width:5rem;height:3.5rem;margin-inline-start:.5rem;flex:0 0 auto;overflow:hidden;border-radius:.125rem}.item-card__thumbnail--grid{position:relative;width:100%;height:auto;aspect-ratio:16 / 9;margin:0;margin-inline-start:0;border-radius:0;border-bottom:1px solid var(--calcite-color-foreground-2)}.item-card__thumbnail-image{width:100%;height:100%;object-fit:cover;display:block}.item-card__thumbnail-media{display:block;width:100%;height:100%}.item-card__thumbnail-fallback{width:100%;height:100%;background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-3);display:flex;align-items:center;justify-content:center}.item-card__hover-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;color:var(--calcite-color-foreground-1);background-color:var(--calcite-color-transparent-scrim);font-size:.75rem;font-weight:500;text-align:center;transition:opacity var(--calcite-animation-timing) ease-in-out}.item-card__badges{display:flex;flex-wrap:wrap}.item-card__badges--compact{max-width:100%}.item-card__badges--responsive{display:none}.item-card__footer{margin-top:auto;display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:.25rem .75rem;border-top:1px solid var(--calcite-color-border-3)}.item-card__footer__start{display:flex;min-width:0;flex:1 1 0%;align-items:center;overflow:hidden;width:100%;margin-inline-end:.75rem}.item-card__footer__start--owner{margin-inline-start:-.25rem}.item-card__profile-wrap{max-width:100%;padding:.25rem}.item-card__owner{min-width:0}.item-card__footer-divider{height:1.25rem;width:1px;margin-inline:.75rem;background-color:var(--calcite-color-border-input)}.item-card__preview-button{margin-inline-end:.5rem}.item-card__footer arcgis-portal-item-favorite,.item-card__footer arcgis-portal-item-actions{display:inline-flex;align-items:center}.item-card__access-wrap{display:flex;align-items:center}.item-card__access{display:flex;align-items:center;color:var(--calcite-color-text-2);font-size:.75rem}.item-card__detail__icon{margin-inline-end:.375rem}.item-card-flex{display:flex}.item-card-flex-1{min-width:0;flex:1 1 0%}.item-card__input{margin-inline-end:1rem;margin-top:.125rem}.item-card__title+.item-card__input{margin-inline-start:1rem;margin-inline-end:0}.item-card__input--compact{height:100%;display:flex;align-items:center}.item-card-item-type{min-width:0}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@container portal-item-card (max-width: 320px){.item-card__title,.item-card__title--grid{font-size:.75rem}.item-card:not(.item-card--grid) .item-card__thumbnail{width:3.4375rem;margin-inline-start:.75rem}.item-card__footer__start{margin-inline-end:.5rem}.item-card__detail--updated-short{display:none}}@container portal-item-card (min-width: 321px) and (max-width: 480px){.item-card__title{font-size:.875rem}}@container portal-item-card (min-width: 481px){.item-card__top{padding:1rem}.item-card__title{font-size:1.125rem}.item-card__title--padded{margin-bottom:.5rem}.item-card__detail{font-size:.875rem}.item-card__footer{padding:.5rem 1rem}.item-card:not(.item-card--grid) .item-card__thumbnail{width:8rem;margin-inline-start:2rem}.item-card__summary{display:block}}@container portal-item-card (min-width: 641px){.item-card__badges--compact{display:none}.item-card__badges--responsive{display:flex}.item-card__summary{display:block}.item-card__footer{flex-wrap:nowrap;gap:0}.item-card__footer__start{width:auto;margin-inline-end:.75rem}.item-card__detail--updated-short{display:none}.item-card__detail--updated-full.item-card__divider{display:flex}.item-card:not(.item-card--grid) .item-card__thumbnail{height:4rem}}`;
|
|
12
12
|
class O extends U {
|
|
13
13
|
constructor() {
|
|
14
|
-
super(...arguments), this.messages =
|
|
14
|
+
super(...arguments), this.messages = P({ blocking: !0 }), this.sectionEl = k(), this.linkEl = k(), this.handleCardClick = (e) => {
|
|
15
15
|
if (!(this.link || this.disabled || e?.target?.closest(".item-card__footer"))) {
|
|
16
16
|
if (this.preview === "top" && !this.recycleBin) {
|
|
17
17
|
this.arcgisItemBrowserCardPreview.emit(this.item);
|
|
@@ -23,7 +23,7 @@ class O extends U {
|
|
|
23
23
|
}
|
|
24
24
|
this.selection === "multiple" && (this.selected = !this.selected, this.arcgisItemCardSelect.emit({ item: this.item, selected: this.selected }));
|
|
25
25
|
}
|
|
26
|
-
}, this.isLoaded = !1, this.selected = !1, this.selection = "none", this.view = "list", this.previewed = !1, this.showOwner = !0, this.showDateUpdated = !0, this.showItemType = !0, this.showItemTypeHosted = !1, this.showSummary = !1, this.showBadges = !0, this.showBadgeTooltips = !0, this.showFavorite = !1, this.showFavoriteInActionsMenu = !1, this.showAccess = !1, this.showThumbnail = !0, this.newTab = !1, this.disableSelection = !1, this.disabled = !1, this.actions = [], this.recycleBin = !1, this.arcgisItemBrowserCardPreview =
|
|
26
|
+
}, this.isLoaded = !1, this.selected = !1, this.selection = "none", this.view = "list", this.previewed = !1, this.showOwner = !0, this.showDateUpdated = !0, this.showItemType = !0, this.showItemTypeHosted = !1, this.showSummary = !1, this.showBadges = !0, this.showBadgeTooltips = !0, this.showFavorite = !1, this.showFavoriteInActionsMenu = !1, this.showAccess = !1, this.showThumbnail = !0, this.newTab = !1, this.disableSelection = !1, this.disabled = !1, this.actions = [], this.recycleBin = !1, this.arcgisItemBrowserCardPreview = _(), this.arcgisItemCardActionsOpen = _(), this.arcgisItemCardInternalUIAction = _(), this.arcgisItemCardSelect = _();
|
|
27
27
|
}
|
|
28
28
|
static {
|
|
29
29
|
this.properties = { isLoaded: 16, item: 0, user: 0, portal: 0, selected: 7, selection: 1, view: 1, preview: 1, previewed: 5, name: 1, showOwner: 5, showDateUpdated: 5, showItemType: 5, showItemTypeHosted: 5, showSummary: 5, showBadges: 5, showBadgeTooltips: 5, showFavorite: 5, showFavoriteInActionsMenu: 5, showAccess: 5, showThumbnail: 5, link: 1, linkHandler: 0, newTab: 5, disableSelection: 5, disabled: 7, userPopupZIndex: 9, actions: 0, recycleBin: 5, hideActionsStart: 5 };
|
|
@@ -32,7 +32,7 @@ class O extends U {
|
|
|
32
32
|
this.styles = E;
|
|
33
33
|
}
|
|
34
34
|
get sourceJSON() {
|
|
35
|
-
return
|
|
35
|
+
return z(this.item);
|
|
36
36
|
}
|
|
37
37
|
async restoreFocus() {
|
|
38
38
|
if (await this.updateComplete, this.link && this.linkEl.value) {
|
|
@@ -71,109 +71,109 @@ class O extends U {
|
|
|
71
71
|
return typeof s == "string" ? s : a;
|
|
72
72
|
}
|
|
73
73
|
getResolvedBaseUrl() {
|
|
74
|
-
return this.portal ? `${
|
|
74
|
+
return this.portal ? `${D({ portal: this.portal, usePortalHostname: !this.portal.user })}/home` : "";
|
|
75
75
|
}
|
|
76
76
|
renderUpdatedDetails(e) {
|
|
77
|
-
return
|
|
77
|
+
return i`<span class="item-card__detail item-card__detail--updated-short item-card__divider">${y(e, { dateStyle: "medium" })}</span><span class="item-card__detail item-card__detail--updated-full item-card__divider">${v(this.messages.lastUpdated ?? "", {
|
|
78
78
|
date: y(e, { dateStyle: "medium" })
|
|
79
79
|
})}</span>`;
|
|
80
80
|
}
|
|
81
81
|
renderSelectionInput(e, a = !1) {
|
|
82
|
-
const { selection: s, disableSelection:
|
|
82
|
+
const { selection: s, disableSelection: p, name: g, messages: f, item: c } = this, l = {
|
|
83
83
|
"item-card__input": !0,
|
|
84
84
|
"item-card__input--compact": a
|
|
85
85
|
};
|
|
86
86
|
switch (s) {
|
|
87
87
|
case "single":
|
|
88
|
-
return
|
|
89
|
-
|
|
88
|
+
return i`<calcite-radio-button class=${n(l)} .checked=${e} .disabled=${p} .value=${c.title ?? ""} .name=${g} @click=${(r) => {
|
|
89
|
+
r.stopPropagation();
|
|
90
90
|
}} @calciteRadioButtonChange=${() => {
|
|
91
91
|
this.selected = !0, this.arcgisItemCardSelect.emit({ item: c, selected: !0 });
|
|
92
|
-
}}><span class="screen-readers-only">${
|
|
92
|
+
}}><span class="screen-readers-only">${v(f.select ?? "", { title: c.title ?? "" })}</span></calcite-radio-button>`;
|
|
93
93
|
case "multiple":
|
|
94
|
-
return
|
|
95
|
-
|
|
94
|
+
return i`<calcite-checkbox class=${n(l)} .checked=${e} .disabled=${p} @click=${(r) => {
|
|
95
|
+
r.stopPropagation(), r.preventDefault();
|
|
96
96
|
}} @calciteCheckboxChange=${() => {
|
|
97
97
|
this.selected = !e, this.arcgisItemCardSelect.emit({ item: c, selected: !e });
|
|
98
98
|
}}><span class="screen-readers-only">${c.title ?? ""}</span></calcite-checkbox>`;
|
|
99
99
|
case "none":
|
|
100
100
|
return null;
|
|
101
101
|
default:
|
|
102
|
-
return
|
|
102
|
+
return F(s);
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
renderThumbnail(e, a) {
|
|
106
|
-
return this.showThumbnail ? a ?
|
|
106
|
+
return this.showThumbnail ? a ? i`<figure class="item-card__thumbnail item-card__thumbnail--grid"><arcgis-portal-item-thumbnail class="item-card__thumbnail-media" .item=${e} .portal=${this.portal}></arcgis-portal-item-thumbnail>${this.preview === "top" && !this.link && i`<div class="item-card__hover-text">${this.previewed ? this.messages.closePreview : this.messages.preview}</div>` || ""}${this.link?.includes(`item.html?id=${e.id}`) && i`<div class="item-card__hover-text">${this.messages.viewItemDetails}</div>` || ""}</figure>` : i`<figure class="item-card__thumbnail"><arcgis-portal-item-thumbnail class="item-card__thumbnail-media" .item=${e} .portal=${this.portal}></arcgis-portal-item-thumbnail></figure>` : null;
|
|
107
107
|
}
|
|
108
108
|
renderAccess(e) {
|
|
109
|
-
return this.showAccess ?
|
|
109
|
+
return this.showAccess ? i`<div class="item-card__access-wrap" @click=${(a) => {
|
|
110
110
|
a.preventDefault(), a.stopPropagation();
|
|
111
111
|
}}><slot name=sharing-summary><slot name=share-summary><span class="item-card__access"><calcite-icon .icon=${e.icon} scale=s class="item-card__detail__icon"></calcite-icon>${e.text}</span></slot></slot></div>` : null;
|
|
112
112
|
}
|
|
113
113
|
renderBadges() {
|
|
114
|
-
return !this.showBadges || !this.item || !this.portal ? null : this.view === "grid" ?
|
|
114
|
+
return !this.showBadges || !this.item || !this.portal ? null : this.view === "grid" ? i`<arcgis-portal-item-badges class="item-card__badges item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=narrow></arcgis-portal-item-badges>` : i`<arcgis-portal-item-badges class="item-card__badges item-card__badges--compact item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=narrow></arcgis-portal-item-badges><arcgis-portal-item-badges class="item-card__badges item-card__badges--responsive item-card__divider" .item=${this.item} .portal=${this.portal} .user=${this.user} scale=s appearance=outline-fill .showTooltips=${this.showBadgeTooltips} width=full></arcgis-portal-item-badges>`;
|
|
115
115
|
}
|
|
116
116
|
render() {
|
|
117
|
-
const { item: e, portal: a, user: s, selection:
|
|
117
|
+
const { item: e, portal: a, user: s, selection: p, isLoaded: g, disabled: f, link: c, newTab: l } = this;
|
|
118
118
|
if (!e || !a || !this.messages._lang)
|
|
119
119
|
return;
|
|
120
|
-
const
|
|
121
|
-
return
|
|
120
|
+
const r = this.sourceJSON, h = r.modified || e.modified, C = this.getAccessInfo(r.access), o = this.view === "grid", d = this.selected, w = this.preview === "action" && !this.recycleBin, b = this.actions.length > 0 || this.showFavoriteInActionsMenu, $ = this.showFavorite && !this.showFavoriteInActionsMenu && !!s, T = b || $ || w, A = (this.showAccess || o && this.showOwner) && T, m = this.preview === "top" && !c;
|
|
121
|
+
return i`<section class=${n({
|
|
122
122
|
"item-card": !0,
|
|
123
123
|
"item-card--grid": o,
|
|
124
|
-
"item-card--hoverable":
|
|
125
|
-
"item-card--selected":
|
|
126
|
-
"item-card--disabled":
|
|
127
|
-
"item-card--loaded":
|
|
128
|
-
"item-card--previewed": this.previewed &&
|
|
129
|
-
})} @click=${c ? void 0 : this.handleCardClick} .tabIndex=${
|
|
130
|
-
|
|
131
|
-
}} ${I(this.sectionEl)}><slot name=content-top></slot>${c ?
|
|
132
|
-
if (this.linkHandler && !
|
|
133
|
-
|
|
124
|
+
"item-card--hoverable": p !== "none",
|
|
125
|
+
"item-card--selected": d,
|
|
126
|
+
"item-card--disabled": f,
|
|
127
|
+
"item-card--loaded": g,
|
|
128
|
+
"item-card--previewed": this.previewed && m
|
|
129
|
+
})} @click=${c ? void 0 : this.handleCardClick} .tabIndex=${m ? 0 : -1} .role=${m ? "button" : void 0} aria-haspopup=${(m ? "dialog" : void 0) ?? u} @keydown=${(t) => {
|
|
130
|
+
m && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.handleCardClick());
|
|
131
|
+
}} ${I(this.sectionEl)}><slot name=content-top></slot>${c ? i`<a class="item-card__upper item-card__upper--link" href=${c ?? u} target=${(l ? "_blank" : void 0) ?? u} rel=${(l ? "noopener noreferrer" : void 0) ?? u} @click=${(t) => {
|
|
132
|
+
if (this.linkHandler && !t.ctrlKey && !t.metaKey) {
|
|
133
|
+
t.preventDefault(), this.linkHandler(this.item);
|
|
134
134
|
return;
|
|
135
135
|
}
|
|
136
|
-
const
|
|
137
|
-
|
|
138
|
-
}} ${I(this.linkEl)}>${
|
|
136
|
+
const x = t.target;
|
|
137
|
+
x instanceof HTMLElement && x.closest(".item-card__footer") && t.preventDefault();
|
|
138
|
+
}} ${I(this.linkEl)}>${i`${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(d, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${n({
|
|
139
139
|
"item-card__title": !0,
|
|
140
140
|
"item-card__title--grid": o,
|
|
141
|
-
"item-card__title--padded": this.showItemType || this.showSummary && !!
|
|
141
|
+
"item-card__title--padded": this.showItemType || this.showSummary && !!r.snippet,
|
|
142
142
|
"item-card-flex-1": !0
|
|
143
|
-
})}><span class="item-card__title__span">${
|
|
143
|
+
})}><span class="item-card__title__span">${r.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(d) || ""}</div>${this.showSummary && !!r.snippet && i`<p class="item-card__summary">${r.snippet.length > 250 ? `${r.snippet.substring(0, 250)}...` : r.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && i`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!h && this.renderUpdatedDetails(h) || ""}${this.renderBadges()}</div></div>${!o && this.renderThumbnail(e, !1) || ""}</div><div class="item-card__content-end"><slot name=content-end></slot></div></div></div>`}</a>` : i`<div class="item-card__upper">${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(d, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${n({
|
|
144
144
|
"item-card__title": !0,
|
|
145
145
|
"item-card__title--grid": o,
|
|
146
|
-
"item-card__title--padded": this.showItemType || this.showSummary && !!
|
|
146
|
+
"item-card__title--padded": this.showItemType || this.showSummary && !!r.snippet,
|
|
147
147
|
"item-card-flex-1": !0
|
|
148
|
-
})}><span class="item-card__title__span">${
|
|
149
|
-
|
|
150
|
-
}}></arcgis-portal-user-popup></div>` || ""}</div>${this.renderAccess(C)}${A &&
|
|
148
|
+
})}><span class="item-card__title__span">${r.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(d) || ""}</div>${this.showSummary && !!r.snippet && i`<p class="item-card__summary">${r.snippet.length > 250 ? `${r.snippet.substring(0, 250)}...` : r.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && i`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${a}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!h && this.renderUpdatedDetails(h) || ""}${this.renderBadges()}</div></div>${!o && this.renderThumbnail(e, !1) || ""}</div><div class="item-card__content-end"><slot name=content-end></slot></div></div></div></div>`}<div class="item-card__footer"><div class=${n({ "item-card__footer__start": !0, "item-card__footer__start--owner": this.showOwner })}>${!this.hideActionsStart && i`<slot name=actions-start></slot>` || ""}${this.showOwner && !!r.owner && i`<div class="item-card__profile-wrap"><arcgis-portal-user-popup class="item-card__owner" .portal=${a} .username=${r.owner} .baseUrl=${this.getResolvedBaseUrl()} underline .zIndex=${this.userPopupZIndex} @arcgisUserPopupInternalUIAction=${(t) => {
|
|
149
|
+
t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit(t.detail);
|
|
150
|
+
}}></arcgis-portal-user-popup></div>` || ""}</div>${this.renderAccess(C)}${A && i`<span class="item-card__footer-divider"></span>` || ""}${$ && i`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${a} .user=${s} icon-only scale=s show-tooltip @arcgisItemFavoriteUpdate=${() => {
|
|
151
151
|
this.arcgisItemCardInternalUIAction.emit({
|
|
152
152
|
category: "card action",
|
|
153
153
|
action: "favorite"
|
|
154
154
|
});
|
|
155
|
-
}}></arcgis-portal-item-favorite></slot>` || ""}${
|
|
156
|
-
|
|
157
|
-
}}>${this.messages.preview}</calcite-button>` || ""}${
|
|
158
|
-
title:
|
|
159
|
-
})} .showFavorite=${this.showFavoriteInActionsMenu && !!s} @arcgisItemActionsOpen=${(
|
|
160
|
-
|
|
155
|
+
}}></arcgis-portal-item-favorite></slot>` || ""}${w && i`<calcite-button scale=s class="item-card__preview-button" .appearance=${this.previewed ? "solid" : "outline"} kind=neutral @click=${(t) => {
|
|
156
|
+
t.preventDefault(), t.stopPropagation(), this.arcgisItemBrowserCardPreview.emit(this.item);
|
|
157
|
+
}}>${this.messages.preview}</calcite-button>` || ""}${b && i`<arcgis-portal-item-actions .item=${e} .portal=${a} .user=${s} .actions=${this.actions} .label=${v(this.getMessage("itemActions", "Item actions for {title}"), {
|
|
158
|
+
title: r.title ?? e.title ?? ""
|
|
159
|
+
})} .showFavorite=${this.showFavoriteInActionsMenu && !!s} @arcgisItemActionsOpen=${(t) => {
|
|
160
|
+
t.stopPropagation(), this.arcgisItemCardActionsOpen.emit({
|
|
161
161
|
actions: this.actions,
|
|
162
|
-
el:
|
|
162
|
+
el: t.detail.el
|
|
163
163
|
});
|
|
164
|
-
}} @arcgisItemActionClick=${(
|
|
165
|
-
|
|
164
|
+
}} @arcgisItemActionClick=${(t) => {
|
|
165
|
+
t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit({
|
|
166
166
|
category: "card action",
|
|
167
167
|
action: "more options",
|
|
168
|
-
attribute:
|
|
168
|
+
attribute: t.detail
|
|
169
169
|
});
|
|
170
|
-
}} @arcgisItemFavoriteUpdate=${(
|
|
171
|
-
|
|
170
|
+
}} @arcgisItemFavoriteUpdate=${(t) => {
|
|
171
|
+
t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit({
|
|
172
172
|
category: "card action",
|
|
173
173
|
action: "favorite"
|
|
174
174
|
});
|
|
175
|
-
}}></arcgis-portal-item-actions>` || ""}<div @click=${(
|
|
176
|
-
|
|
175
|
+
}}></arcgis-portal-item-actions>` || ""}<div @click=${(t) => {
|
|
176
|
+
t.stopPropagation();
|
|
177
177
|
}}><slot name=actions-end></slot></div></div></section>`;
|
|
178
178
|
}
|
|
179
179
|
}
|
|
@@ -8,8 +8,8 @@ import "@esri/calcite-components/components/calcite-list";
|
|
|
8
8
|
import "../arcgis-portal-item-type/index.js";
|
|
9
9
|
import "@esri/calcite-components/components/calcite-loader";
|
|
10
10
|
import "@esri/calcite-components/components/calcite-button";
|
|
11
|
-
import "@esri/calcite-components/components/calcite-dropdown-item";
|
|
12
11
|
import "@esri/calcite-components/components/calcite-input";
|
|
12
|
+
import "@esri/calcite-components/components/calcite-dropdown-item";
|
|
13
13
|
import "@esri/calcite-components/components/calcite-dropdown";
|
|
14
14
|
import "../arcgis-portal-user-avatar/index.js";
|
|
15
15
|
import "@esri/calcite-components/components/calcite-dropdown-group";
|