@arcgis/portal-components 6.0.0-next.2 → 6.0.0-next.21

package/dist/components/arcgis-portal-group-thumbnail/customElement.js

@@ -3,7 +3,7 @@ import { c as p } from "../../chunks/runtime.js";
 import { LitElement as m, nothing as f, safeStyleMap as g } from "@arcgis/lumina";
 import { css as d, html as l } from "lit";
 import { createRef as c, ref as h } from "lit/directives/ref.js";
-import { g as $, a as b } from "../../chunks/portal.js";
+import { b as $, g as b } from "../../chunks/portal.js";
 const x = /^#[0-9a-f]{3}$/iu, k = /^#[0-9a-f]{6}$/iu;
 function u(r) {
   return E(r) || I(r);

package/dist/components/arcgis-portal-item-card/customElement.d.ts

@@ -3,8 +3,11 @@ import type Portal from "@arcgis/core/portal/Portal.js";
 import type PortalItem from "@arcgis/core/portal/PortalItem.js";
 import type PortalUser from "@arcgis/core/portal/PortalUser.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { SearchResultSublayerGeometry } from "../../types/item.js";
+import type { PortalGroupSourceJSON } from "../../types/group.js";
 import type { InternalUIAction } from "../../types/tracking.js";
 import type { PortalItemAction } from "../arcgis-portal-item-actions/customElement.js";
+import type { PortalItemCardSelectedItem, PortalItemCardSelectErrorDetail, PortalItemCardSublayerSelectDetail } from "../arcgis-portal-item-card-sublayer-select/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
@@ -12,14 +15,15 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  *
  * @slot [content-top] - Inserted content appears above the card body.
  * @slot [content-end] - Inserted content appears beneath the card details.
- * @slot [sharing-summary] - Custom sharing summary content.
- * @slot [share-summary] - Legacy alias for sharing-summary.
+ * @slot [share-summary] - Custom sharing summary content.
  * @slot [actions-start] - Inserted content appears in the footer before owner information.
  * @slot [actions-end] - Inserted content appears in the footer end area.
  */
 export abstract class ArcgisPortalItemCard extends LitElement {
   /** Pass a set of actions to appear inside an ellipsis menu. */
   accessor actions: PortalItemAction[];
+  /** Allowed sublayer geometries. An empty array permits all geometries. */
+  accessor allowedGeometries: SearchResultSublayerGeometry[];
   /**
    * Disable interaction when true.
    *
@@ -32,6 +36,8 @@ export abstract class ArcgisPortalItemCard extends LitElement {
    * @default false
    */
   accessor disableSelection: boolean;
+  /** List of current user's groups the item is shared to */
+  accessor groups: string[] | undefined;
   /**
    * @default false
    * @internal
@@ -96,13 +102,15 @@ export abstract class ArcgisPortalItemCard extends LitElement {
    */
   accessor recycleBin: boolean;
   /**
-   * Set to true to mark item as selected.
+   * Set to true to mark the whole item as selected. Sublayer modes use selectedItems instead.
    *
    * @default false
    */
   accessor selected: boolean;
+  /** Parent-controlled item, sublayer, or task selections used by sublayer modes. Replace the array to accept arcgisItemCardSelect. */
+  accessor selectedItems: PortalItemCardSelectedItem[];
   /**
-   * Type of selection behavior.
+   * Type of selection behavior. Sublayer modes render a built-in footer selector rather than a checkbox or radio.
    *
    * @default "none"
    */
@@ -173,8 +181,16 @@ export abstract class ArcgisPortalItemCard extends LitElement {
    * @default true
    */
   accessor showThumbnail: boolean;
+  /**
+   * Load thumbnails from production ArcGIS Online when viewing Online content in Enterprise.
+   *
+   * @default false
+   */
+  accessor useProduction: boolean;
   /** Current signed-in portal user. */
   accessor user: PortalUser | undefined;
+  /** List of all the user's groups */
+  accessor userGroups: Pick<PortalGroupSourceJSON, "id">[] | undefined;
   /** The z-index of the owner popup. */
   accessor userPopupZIndex: number | undefined;
   /**
@@ -190,22 +206,22 @@ export abstract class ArcgisPortalItemCard extends LitElement {
   readonly arcgisItemCardActionsOpen: import("@arcgis/lumina").TargetedEvent<this, PortalItemCardActionsOpenDetail>;
   /** Fires on internal component interaction for telemetry. */
   readonly arcgisItemCardInternalUIAction: import("@arcgis/lumina").TargetedEvent<this, InternalUIAction>;
-  /** Emitted when the item is selected or deselected. */
-  readonly arcgisItemCardSelect: import("@arcgis/lumina").TargetedEvent<this, {
-      item: PortalItem;
-      selected: boolean;
-  }>;
+  /** Requests an item, sublayer, or task selection change. In sublayer modes, the parent updates selectedItems. */
+  readonly arcgisItemCardSelect: import("@arcgis/lumina").TargetedEvent<this, PortalItemCardSublayerSelectDetail>;
+  /** Reports a service failure from the built-in sublayer selector. */
+  readonly arcgisItemCardSelectError: import("@arcgis/lumina").TargetedEvent<this, PortalItemCardSelectErrorDetail>;
   readonly "@eventTypes": {
     arcgisItemBrowserCardPreview: ArcgisPortalItemCard["arcgisItemBrowserCardPreview"]["detail"];
     arcgisItemCardActionsOpen: ArcgisPortalItemCard["arcgisItemCardActionsOpen"]["detail"];
     arcgisItemCardInternalUIAction: ArcgisPortalItemCard["arcgisItemCardInternalUIAction"]["detail"];
     arcgisItemCardSelect: ArcgisPortalItemCard["arcgisItemCardSelect"]["detail"];
+    arcgisItemCardSelectError: ArcgisPortalItemCard["arcgisItemCardSelectError"]["detail"];
   };
 }
 
 export type ItemCardView = "grid" | "list";
 
-export type ItemCardSelection = "multiple" | "none" | "single";
+export type ItemCardSelection = "multiple-sublayer" | "multiple" | "none" | "single-sublayer" | "single";
 
 export type ItemCardPreview = "action" | "top";
 

package/dist/components/arcgis-portal-item-card/customElement.js

@@ -1,17 +1,18 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { c as S } from "../../chunks/runtime.js";
-import { css as B, html as t } from "lit";
-import { formatDate as y, substitute as w } from "@arcgis/core/intl.js";
-import { LitElement as U, createEvent as u, safeClassMap as l, nothing as g } from "@arcgis/lumina";
-import { createRef as k, ref as I } from "lit/directives/ref.js";
-import { u as F } from "../../chunks/useT9n.js";
-import { a as z } from "../../chunks/functionalities.js";
+import { c as P } from "../../chunks/runtime.js";
+import { css as B, html as r } from "lit";
+import { formatDate as k, substitute as v } from "@arcgis/core/intl.js";
+import { LitElement as F, createEvent as h, safeClassMap as d, nothing as g } from "@arcgis/lumina";
+import { createRef as I, ref as S } from "lit/directives/ref.js";
+import { u as U } from "../../chunks/useT9n.js";
+import { b as C } from "../../chunks/ui.js";
+import { a as E } from "../../chunks/functionalities.js";
 import { g as D } from "../../chunks/items.js";
-import { g as P } from "../../chunks/url.js";
-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}}`;
-class O extends U {
+import { b as z } from "../../chunks/url.js";
+const O = 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-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}}`;
+class H extends F {
   constructor() {
-    super(...arguments), this.messages = F({ blocking: !0 }), this.sectionEl = k(), this.linkEl = k(), this.handleCardClick = (e) => {
+    super(), this.messages = U({ blocking: !0 }), this.sectionEl = I(), this.linkEl = I(), this.handleCardClick = (e) => {
       if (!(this.link || this.disabled || e?.target?.closest(".item-card__footer"))) {
         if (this.preview === "top" && !this.recycleBin) {
           this.arcgisItemBrowserCardPreview.emit(this.item);
@@ -23,17 +24,32 @@ class O extends U {
         }
         this.selection === "multiple" && (this.selected = !this.selected, this.arcgisItemCardSelect.emit({ item: this.item, selected: this.selected }));
       }
-    }, 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 = u(), this.arcgisItemCardActionsOpen = u(), this.arcgisItemCardInternalUIAction = u(), this.arcgisItemCardSelect = u();
+    }, this.isLoaded = !1, this.cardWidth = 0, this.selected = !1, this.selection = "none", this.selectedItems = [], this.allowedGeometries = [], 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.useProduction = !1, this.newTab = !1, this.disableSelection = !1, this.disabled = !1, this.actions = [], this.recycleBin = !1, this.arcgisItemBrowserCardPreview = h(), this.arcgisItemCardActionsOpen = h(), this.arcgisItemCardInternalUIAction = h(), this.arcgisItemCardSelect = h(), this.arcgisItemCardSelectError = h(), this.manager.onLifecycle(() => {
+      let e;
+      const i = new ResizeObserver(([s]) => {
+        e !== void 0 && (cancelAnimationFrame(e), e = void 0);
+        const l = s.contentRect.width;
+        l > 0 && l !== this.cardWidth && (e = requestAnimationFrame(() => {
+          e = void 0, this.cardWidth = l;
+        }));
+      });
+      return i.observe(this.el), () => {
+        i.disconnect(), e !== void 0 && cancelAnimationFrame(e);
+      };
+    });
   }
   static {
-    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 };
+    this.properties = { isLoaded: 16, cardWidth: 16, item: 0, user: 0, portal: 0, selected: 7, selection: 1, selectedItems: 0, allowedGeometries: 0, 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, groups: 0, userGroups: 0, showThumbnail: 5, useProduction: 5, link: 1, linkHandler: 0, newTab: 5, disableSelection: 5, disabled: 7, userPopupZIndex: 9, actions: 0, recycleBin: 5, hideActionsStart: 5 };
   }
   static {
-    this.styles = E;
+    this.styles = O;
   }
   get sourceJSON() {
     return D(this.item);
   }
+  get sublayerSelection() {
+    return this.selection === "multiple-sublayer" ? "multiple" : this.selection === "single-sublayer" ? "single" : void 0;
+  }
   async restoreFocus() {
     if (await this.updateComplete, this.link && this.linkEl.value) {
       this.linkEl.value.focus();
@@ -46,138 +62,132 @@ class O extends U {
       this.isLoaded = !0;
     });
   }
-  getAccessInfo(e) {
-    return {
-      public: {
-        icon: "globe",
-        text: this.messages.everyone
-      },
-      private: {
-        icon: "lock",
-        text: this.messages.owner
-      },
-      org: {
-        icon: "organization",
-        text: this.messages.organization
-      },
-      shared: {
-        icon: "group",
-        text: this.messages.group
-      }
-    }[e];
-  }
-  getMessage(e, a = "") {
+  getMessage(e, i = "") {
     const s = this.messages[e];
-    return typeof s == "string" ? s : a;
+    return typeof s == "string" ? s : i;
   }
   getResolvedBaseUrl() {
-    return this.portal ? `${P({ portal: this.portal, usePortalHostname: !this.portal.user })}/home` : "";
+    return this.portal ? `${z({ portal: this.portal, usePortalHostname: !this.portal.user })}/home` : "";
+  }
+  handleSharingSlotChange() {
+    this.requestUpdate();
   }
   renderUpdatedDetails(e) {
-    return t`<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">${w(this.messages.lastUpdated ?? "", {
-      date: y(e, { dateStyle: "medium" })
+    return r`<span class="item-card__detail item-card__detail--updated-short item-card__divider">${k(e, { dateStyle: "medium" })}</span><span class="item-card__detail item-card__detail--updated-full item-card__divider">${v(this.messages.lastUpdated ?? "", {
+      date: k(e, { dateStyle: "medium" })
     })}</span>`;
   }
-  renderSelectionInput(e, a = !1) {
-    const { selection: s, disableSelection: h, name: f, messages: v, item: c } = this, d = {
+  renderSelectionInput(e, i = !1) {
+    const { selection: s, disableSelection: l, name: f, messages: u, item: c } = this, n = {
       "item-card__input": !0,
-      "item-card__input--compact": a
+      "item-card__input--compact": i
     };
     switch (s) {
       case "single":
-        return t`<calcite-radio-button class=${l(d)} .checked=${e} .disabled=${h} .value=${c.title ?? ""} .name=${f} @click=${(i) => {
-          i.stopPropagation();
+        return r`<calcite-radio-button class=${d(n)} .checked=${e} .disabled=${l} .value=${c.title ?? ""} .name=${f} @click=${(a) => {
+          a.stopPropagation();
         }} @calciteRadioButtonChange=${() => {
           this.selected = !0, this.arcgisItemCardSelect.emit({ item: c, selected: !0 });
-        }}><span class="screen-readers-only">${w(v.select ?? "", { title: c.title ?? "" })}</span></calcite-radio-button>`;
+        }}><span class="screen-readers-only">${v(u.select ?? "", { title: c.title ?? "" })}</span></calcite-radio-button>`;
       case "multiple":
-        return t`<calcite-checkbox class=${l(d)} .checked=${e} .disabled=${h} @click=${(i) => {
-          i.stopPropagation(), i.preventDefault();
+        return r`<calcite-checkbox class=${d(n)} .checked=${e} .disabled=${l} @click=${(a) => {
+          a.stopPropagation(), a.preventDefault();
         }} @calciteCheckboxChange=${() => {
           this.selected = !e, this.arcgisItemCardSelect.emit({ item: c, selected: !e });
         }}><span class="screen-readers-only">${c.title ?? ""}</span></calcite-checkbox>`;
       case "none":
+      case "multiple-sublayer":
+      case "single-sublayer":
         return null;
       default:
-        return z(s);
+        return E(s);
     }
   }
-  renderThumbnail(e, a) {
-    return this.showThumbnail ? a ? t`<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 && t`<div class="item-card__hover-text">${this.previewed ? this.messages.closePreview : this.messages.preview}</div>` || ""}${this.link?.includes(`item.html?id=${e.id}`) && t`<div class="item-card__hover-text">${this.messages.viewItemDetails}</div>` || ""}</figure>` : t`<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;
+  renderThumbnail(e, i) {
+    return this.showThumbnail ? i ? r`<figure class="item-card__thumbnail item-card__thumbnail--grid"><arcgis-portal-item-thumbnail class="item-card__thumbnail-media" .item=${e} .portal=${this.portal} .user=${this.user} .useProduction=${this.useProduction}></arcgis-portal-item-thumbnail>${this.preview === "top" && !this.link && r`<div class="item-card__hover-text">${this.previewed ? this.messages.closePreview : this.messages.preview}</div>` || ""}${this.link?.includes(`item.html?id=${e.id}`) && r`<div class="item-card__hover-text">${this.messages.viewItemDetails}</div>` || ""}</figure>` : r`<figure class="item-card__thumbnail"><arcgis-portal-item-thumbnail class="item-card__thumbnail-media" .item=${e} .portal=${this.portal} .user=${this.user} .useProduction=${this.useProduction}></arcgis-portal-item-thumbnail></figure>` : null;
   }
-  renderAccess(e) {
-    return this.showAccess ? t`<div class="item-card__access-wrap" @click=${(a) => {
-      a.preventDefault(), a.stopPropagation();
-    }}><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;
+  renderAccess() {
+    if (!this.showAccess)
+      return null;
+    const e = Array.from(this.el.children).some((i) => i.getAttribute("slot") === "share-summary");
+    return r`<div class="item-card__access-wrap" @click=${(i) => {
+      i.preventDefault(), i.stopPropagation();
+    }} @keydown=${(i) => {
+      (i.key === "Enter" || i.key === " ") && i.stopPropagation();
+    }}><slot name=share-summary @slotchange=${this.handleSharingSlotChange}>${!e && r`<arcgis-portal-item-share-summary .item=${this.item} .portal=${this.portal} .groups=${this.groups} .userGroups=${this.userGroups} .autoFetchGroups=${this.groups === void 0} .scale=${this.cardWidth <= C.xxs ? "s" : "m"} .showText=${this.view !== "grid" && this.cardWidth > C.md} overlay-positioning=fixed></arcgis-portal-item-share-summary>` || ""}</slot></div>`;
   }
   renderBadges() {
-    return !this.showBadges || !this.item || !this.portal ? null : this.view === "grid" ? t`<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>` : t`<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>`;
+    return !this.showBadges || !this.item || !this.portal ? null : this.view === "grid" ? r`<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>` : r`<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>`;
   }
   render() {
-    const { item: e, portal: a, user: s, selection: h, isLoaded: f, disabled: v, link: c, newTab: d } = this;
-    if (!e || !a || !this.messages._lang)
+    const { item: e, portal: i, user: s, selection: l, isLoaded: f, disabled: u, link: c, newTab: n } = this;
+    if (!e || !i || !this.messages._lang)
       return;
-    const i = this.sourceJSON, _ = i.modified || e.modified, C = this.getAccessInfo(i.access), o = this.view === "grid", m = this.selected, b = this.preview === "action" && !this.recycleBin, $ = this.actions.length > 0 || this.showFavoriteInActionsMenu, x = this.showFavorite && !this.showFavoriteInActionsMenu && !!s, T = $ || x || b, A = (this.showAccess || o && this.showOwner) && T, p = this.preview === "top" && !c;
-    return t`<section class=${l({
+    const a = this.sourceJSON, _ = a.modified || e.modified, o = this.view === "grid", w = this.sublayerSelection, m = w ? this.selectedItems.some((t) => ("item" in t ? t.item.id : t.id) === e.id) : this.selected, b = this.preview === "action" && !this.recycleBin, $ = this.actions.length > 0 || this.showFavoriteInActionsMenu, y = this.showFavorite && !this.showFavoriteInActionsMenu && !this.useProduction && !!s, A = $ || y || b, T = (this.showAccess || o && this.showOwner) && A, p = this.preview === "top" && !c;
+    return r`<section class=${d({
       "item-card": !0,
       "item-card--grid": o,
-      "item-card--hoverable": h !== "none",
+      "item-card--hoverable": l !== "none",
       "item-card--selected": m,
-      "item-card--disabled": v,
+      "item-card--disabled": u,
       "item-card--loaded": f,
       "item-card--previewed": this.previewed && p
-    })} @click=${c ? void 0 : this.handleCardClick} .tabIndex=${p ? 0 : -1} .role=${p ? "button" : void 0} aria-haspopup=${(p ? "dialog" : void 0) ?? g} @keydown=${(r) => {
-      p && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this.handleCardClick());
-    }} ${I(this.sectionEl)}><slot name=content-top></slot>${c ? t`<a class="item-card__upper item-card__upper--link" href=${c ?? g} target=${(d ? "_blank" : void 0) ?? g} rel=${(d ? "noopener noreferrer" : void 0) ?? g} @click=${(r) => {
-      if (this.linkHandler && !r.ctrlKey && !r.metaKey) {
-        r.preventDefault(), this.linkHandler(this.item);
+    })} @click=${c ? void 0 : this.handleCardClick} .tabIndex=${p ? 0 : -1} .role=${p ? "button" : void 0} aria-haspopup=${(p ? "dialog" : void 0) ?? g} @keydown=${(t) => {
+      !p || t.target !== t.currentTarget || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.handleCardClick());
+    }} ${S(this.sectionEl)}><slot name=content-top></slot>${c ? r`<a class="item-card__upper item-card__upper--link" href=${c ?? g} target=${(n ? "_blank" : void 0) ?? g} rel=${(n ? "noopener noreferrer" : void 0) ?? g} @click=${(t) => {
+      if (this.linkHandler && !t.ctrlKey && !t.metaKey) {
+        t.preventDefault(), this.linkHandler(this.item);
         return;
       }
-      const n = r.target;
-      n instanceof HTMLElement && n.closest(".item-card__footer") && r.preventDefault();
-    }} ${I(this.linkEl)}>${t`${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(m, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${l({
+      const x = t.target;
+      x instanceof HTMLElement && x.closest(".item-card__footer") && t.preventDefault();
+    }} ${S(this.linkEl)}>${r`${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(m, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${d({
       "item-card__title": !0,
       "item-card__title--grid": o,
-      "item-card__title--padded": this.showItemType || this.showSummary && !!i.snippet,
+      "item-card__title--padded": this.showItemType || this.showSummary && !!a.snippet,
       "item-card-flex-1": !0
-    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</div>${this.showSummary && !!i.snippet && t`<p class="item-card__summary">${i.snippet.length > 250 ? `${i.snippet.substring(0, 250)}...` : i.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && t`<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 && !!_ && this.renderUpdatedDetails(_) || ""}${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>` : t`<div class="item-card__upper">${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(m, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${l({
+    })}><span class="item-card__title__span">${a.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</div>${this.showSummary && !!a.snippet && r`<p class="item-card__summary">${a.snippet.length > 250 ? `${a.snippet.substring(0, 250)}...` : a.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && r`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${i}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!_ && this.renderUpdatedDetails(_) || ""}${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>` : r`<div class="item-card__upper">${o && this.renderThumbnail(e, !0) || ""}<div class="item-card-flex item-card__top">${!o && this.renderSelectionInput(m, !0) || ""}<div class="item-card-flex-1"><div class="item-card-flex"><div class="item-card__content"><div class="item-card-flex"><h3 class=${d({
       "item-card__title": !0,
       "item-card__title--grid": o,
-      "item-card__title--padded": this.showItemType || this.showSummary && !!i.snippet,
+      "item-card__title--padded": this.showItemType || this.showSummary && !!a.snippet,
       "item-card-flex-1": !0
-    })}><span class="item-card__title__span">${i.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</div>${this.showSummary && !!i.snippet && t`<p class="item-card__summary">${i.snippet.length > 250 ? `${i.snippet.substring(0, 250)}...` : i.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && t`<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 && !!_ && this.renderUpdatedDetails(_) || ""}${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=${l({ "item-card__footer__start": !0, "item-card__footer__start--owner": this.showOwner })}>${!this.hideActionsStart && t`<slot name=actions-start></slot>` || ""}${this.showOwner && !!i.owner && t`<div class="item-card__profile-wrap"><arcgis-portal-user-popup class="item-card__owner" .portal=${a} .username=${i.owner} .baseUrl=${this.getResolvedBaseUrl()} underline .zIndex=${this.userPopupZIndex} @arcgisUserPopupInternalUIAction=${({ detail: r, stopPropagation: n }) => {
-      n(), this.arcgisItemCardInternalUIAction.emit(r);
-    }}></arcgis-portal-user-popup></div>` || ""}</div>${this.renderAccess(C)}${A && t`<span class="item-card__footer-divider"></span>` || ""}${x && t`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${a} .user=${s} icon-only scale=s show-tooltip @arcgisItemFavoriteUpdate=${() => {
+    })}><span class="item-card__title__span">${a.title ?? e.title ?? ""}</span></h3>${o && this.renderSelectionInput(m) || ""}</div>${this.showSummary && !!a.snippet && r`<p class="item-card__summary">${a.snippet.length > 250 ? `${a.snippet.substring(0, 250)}...` : a.snippet}</p>` || ""}<div class="item-card__details">${this.showItemType && r`<arcgis-portal-item-type class="item-card__divider item-card-item-type" ellipsis .user=${s} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${i}></arcgis-portal-item-type>` || ""}${this.showDateUpdated && !!_ && this.renderUpdatedDetails(_) || ""}${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=${d({ "item-card__footer__start": !0, "item-card__footer__start--owner": this.showOwner })}>${!this.hideActionsStart && r`<slot name=actions-start></slot>` || ""}${this.showOwner && !!a.owner && r`<div class="item-card__profile-wrap"><arcgis-portal-user-popup class="item-card__owner" .portal=${i} .username=${a.owner} .baseUrl=${this.getResolvedBaseUrl()} underline .zIndex=${this.userPopupZIndex} @arcgisUserPopupInternalUIAction=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit(t.detail);
+    }}></arcgis-portal-user-popup></div>` || ""}</div>${this.renderAccess()}${T && r`<span class="item-card__footer-divider"></span>` || ""}${y && r`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${i} .user=${s} icon-only scale=s show-tooltip @arcgisItemFavoriteUpdate=${() => {
       this.arcgisItemCardInternalUIAction.emit({
         category: "card action",
         action: "favorite"
       });
-    }}></arcgis-portal-item-favorite></slot>` || ""}${b && t`<calcite-button scale=s class="item-card__preview-button" .appearance=${this.previewed ? "solid" : "outline"} kind=neutral @click=${(r) => {
-      r.preventDefault(), r.stopPropagation(), this.arcgisItemBrowserCardPreview.emit(this.item);
-    }}>${this.messages.preview}</calcite-button>` || ""}${$ && t`<arcgis-portal-item-actions .item=${e} .portal=${a} .user=${s} .actions=${this.actions} .label=${w(this.getMessage("itemActions", "Item actions for {title}"), {
-      title: i.title ?? e.title ?? ""
-    })} .showFavorite=${this.showFavoriteInActionsMenu && !!s} @arcgisItemActionsOpen=${({ detail: r, stopPropagation: n }) => {
-      n(), this.arcgisItemCardActionsOpen.emit({
+    }}></arcgis-portal-item-favorite></slot>` || ""}${b && r`<calcite-button scale=s class="item-card__preview-button" .appearance=${this.previewed ? "solid" : "outline"} kind=neutral @click=${(t) => {
+      t.preventDefault(), t.stopPropagation(), this.arcgisItemBrowserCardPreview.emit(this.item);
+    }}>${this.messages.preview}</calcite-button>` || ""}${w && r`<arcgis-portal-item-card-sublayer-select .item=${e} .portal=${i} .selection=${w} .selectedItems=${this.selectedItems} .allowedGeometries=${this.allowedGeometries} .disabled=${u || this.disableSelection} @arcgisItemCardSelect=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardSelect.emit(t.detail);
+    }} @arcgisItemCardSelectError=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardSelectError.emit(t.detail);
+    }}></arcgis-portal-item-card-sublayer-select>` || ""}${$ && r`<arcgis-portal-item-actions .item=${e} .portal=${i} .user=${s} .actions=${this.actions} .label=${v(this.getMessage("itemActions", "Item actions for {title}"), {
+      title: a.title ?? e.title ?? ""
+    })} .showFavorite=${this.showFavoriteInActionsMenu && !!s} @arcgisItemActionsOpen=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardActionsOpen.emit({
         actions: this.actions,
-        el: r.el
+        el: t.detail.el
       });
-    }} @arcgisItemActionClick=${({ detail: r, stopPropagation: n }) => {
-      n(), this.arcgisItemCardInternalUIAction.emit({
+    }} @arcgisItemActionClick=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit({
         category: "card action",
         action: "more options",
-        attribute: r
+        attribute: t.detail
       });
-    }} @arcgisItemFavoriteUpdate=${({ stopPropagation: r }) => {
-      r(), this.arcgisItemCardInternalUIAction.emit({
+    }} @arcgisItemFavoriteUpdate=${(t) => {
+      t.stopPropagation(), this.arcgisItemCardInternalUIAction.emit({
         category: "card action",
         action: "favorite"
       });
-    }}></arcgis-portal-item-actions>` || ""}<div @click=${(r) => {
-      r.stopPropagation();
+    }}></arcgis-portal-item-actions>` || ""}<div @click=${(t) => {
+      t.stopPropagation();
     }}><slot name=actions-end></slot></div></div></section>`;
   }
 }
-S("arcgis-portal-item-card", O);
+P("arcgis-portal-item-card", H);
 export {
-  O as ArcgisPortalItemCard
+  H as ArcgisPortalItemCard
 };

package/dist/components/arcgis-portal-item-card/index.js

@@ -1,11 +1,12 @@
 import "@esri/calcite-components/components/calcite-radio-button";
 import "@esri/calcite-components/components/calcite-checkbox";
 import "../arcgis-portal-item-thumbnail/index.js";
-import "@esri/calcite-components/components/calcite-icon";
+import "../arcgis-portal-item-share-summary/index.js";
 import "../arcgis-portal-item-badges/index.js";
 import "../arcgis-portal-item-type/index.js";
 import "../arcgis-portal-user-popup/index.js";
 import "../arcgis-portal-item-favorite/index.js";
 import "@esri/calcite-components/components/calcite-button";
+import "../arcgis-portal-item-card-sublayer-select/index.js";
 import "../arcgis-portal-item-actions/index.js";
 export * from "./customElement.js";

package/dist/components/arcgis-portal-item-card-sublayer-select/customElement.d.ts

@@ -0,0 +1,102 @@
+/// <reference path="../../index.d.ts" />
+import type Portal from "@arcgis/core/portal/Portal.js";
+import type PortalItem from "@arcgis/core/portal/PortalItem.js";
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { SearchResultSublayerGeometry } from "../../types/item.js";
+import type { PortalItemCardSelectedItem, PortalItemCardSelectErrorDetail, PortalItemCardSublayerSelectDetail } from "./types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+import type { Button as Button } from "@esri/calcite-components/components/calcite-button";
+
+/**
+ * Selects layers, tables, or tasks from a portal item.
+ * Selection is controlled by the parent through selectedItems and arcgisItemCardSelect.
+ * Parents can coordinate alerts using arcgisItemCardSelectError.
+ */
+export abstract class ArcgisPortalItemCardSublayerSelect extends LitElement {
+  /** Allowed geometries. Other geometries are disabled with an explanatory tooltip. An empty array permits all geometries. */
+  accessor allowedGeometries: SearchResultSublayerGeometry[];
+  /**
+   * Appearance of the select layers button (will always be solid if layers are selected)
+   *
+   * @default "outline"
+   */
+  accessor appearance: Button["appearance"];
+  /**
+   * Disable user selection and service requests.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Portal item to select from. Search-index sublayers are read from sourceJSON. */
+  accessor item: PortalItem;
+  /** Overrides for localized messages. */
+  accessor messageOverrides: {
+      select?: string | undefined;
+      selectLayers?: string | undefined;
+      geometryNotAllowed?: string | undefined;
+      selectedSingle?: string | undefined;
+      selectedLayers?: string | undefined;
+      selectedName?: string | undefined;
+      selectedTask?: string | undefined;
+      errorTitle?: string | undefined;
+      errorBody?: string | undefined;
+      notebookErrorBody?: string | undefined;
+      retry?: string | undefined;
+      selectTask?: string | undefined;
+      selectTaskFrom?: string | undefined;
+  };
+  /** @internal */
+  protected messages: {
+      select: string;
+      selectLayers: string;
+      geometryNotAllowed: string;
+      selectedSingle: string;
+      selectedLayers: string;
+      selectedName: string;
+      selectedTask: string;
+      errorTitle: string;
+      errorBody: string;
+      notebookErrorBody: string;
+      retry: string;
+      selectTask: string;
+      selectTaskFrom: string;
+  } & T9nMeta<{
+      select: string;
+      selectLayers: string;
+      geometryNotAllowed: string;
+      selectedSingle: string;
+      selectedLayers: string;
+      selectedName: string;
+      selectedTask: string;
+      errorTitle: string;
+      errorBody: string;
+      notebookErrorBody: string;
+      retry: string;
+      selectTask: string;
+      selectTaskFrom: string;
+  }>;
+  /** Current Portal instance */
+  accessor portal: Portal;
+  /** Current parent-controlled selection. Replace the array to accept a selection event; ignored events leave the UI unchanged. */
+  accessor selectedItems: PortalItemCardSelectedItem[];
+  /**
+   * Type of selection
+   *
+   * @default "single"
+   */
+  accessor selection: "multiple" | "single";
+  /**
+   * Width of the selection dropdown trigger
+   *
+   * @default "auto"
+   */
+  accessor width: "auto" | "full";
+  /** Requests a selection change; the parent updates selectedItems. */
+  readonly arcgisItemCardSelect: import("@arcgis/lumina").TargetedEvent<this, PortalItemCardSublayerSelectDetail>;
+  /** Reports service failures. Alert coordination, if desired, belongs to the parent. */
+  readonly arcgisItemCardSelectError: import("@arcgis/lumina").TargetedEvent<this, PortalItemCardSelectErrorDetail>;
+  readonly "@eventTypes": {
+    arcgisItemCardSelect: ArcgisPortalItemCardSublayerSelect["arcgisItemCardSelect"]["detail"];
+    arcgisItemCardSelectError: ArcgisPortalItemCardSublayerSelect["arcgisItemCardSelectError"]["detail"];
+  };
+}