@arcgis/portal-components 5.2.0-next.9 → 5.2.0-next.90

package/dist/cdn/JMPVXCF5.js

@@ -0,0 +1,2 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import{b as z}from"./PJLV3EQS.js";import{a as P}from"./ILDTKRON.js";import{b as U}from"./QS3GXAIH.js";import{a as S}from"./2GBRZSEC.js";import{a as B}from"./QLHCXOVQ.js";import"./I2KQQXOO.js";import"./W7O7ZYZ4.js";import{K as w,L as b,M as A,N as l,P as d,S as C,h as T,j as t,w as _}from"./BTSXQQKZ.js";import"./UZLQALHY.js";export default $arcgis.t(([{formatDate:D,substitute:$}])=>{var H=T`: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-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}}`,x=class extends A{constructor(){super(...arguments),this.messages=B({blocking:!0}),this.sectionEl=w(),this.linkEl=w(),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);return}if(this.selection==="single"){this.selected=!0,this.arcgisItemCardSelect.emit({item:this.item,selected:!0});return}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=_(),this.arcgisItemCardActionsOpen=_(),this.arcgisItemCardInternalUIAction=_(),this.arcgisItemCardSelect=_()}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}}static{this.styles=H}get sourceJSON(){return P(this.item)}async restoreFocus(){if(this.link&&this.linkEl.value){this.linkEl.value.focus();return}this.preview==="top"&&this.sectionEl.value&&this.sectionEl.value.focus()}firstUpdated(){requestAnimationFrame(()=>{this.isLoaded=!0})}getThumbnailUri(e){return e.thumbnailUrl??z(this.portal,e)}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,s=""){let r=this.messages[e];return typeof r=="string"?r:s}getResolvedBaseUrl(){return this.portal?`${U({portal:this.portal,usePortalHostname:!this.portal.user})}/home`:""}renderUpdatedDetails(e){return t`<span class="item-card__detail item-card__detail--updated-short item-card__divider">${D(e,{dateStyle:"medium"})}</span><span class="item-card__detail item-card__detail--updated-full item-card__divider">${$(this.messages.lastUpdated??"",{date:D(e,{dateStyle:"medium"})})}</span>`}renderSelectionInput(e,s=!1){let{selection:r,disableSelection:g,name:v,messages:f,item:c}=this,m={"item-card__input":!0,"item-card__input--compact":s};switch(r){case"single":return t`<calcite-radio-button class=${l(m)} .checked=${e} .disabled=${g} .value=${c.title??""} .name=${v} @click=${i=>{i.stopPropagation()}} @calciteRadioButtonChange=${()=>{this.selected=!0,this.arcgisItemCardSelect.emit({item:c,selected:!0})}}><span class="screen-readers-only">${$(f.select??"",{title:c.title??""})}</span></calcite-radio-button>`;case"multiple":return t`<calcite-checkbox class=${l(m)} .checked=${e} .disabled=${g} @click=${i=>{i.stopPropagation(),i.preventDefault()}} @calciteCheckboxChange=${()=>{this.selected=!e,this.arcgisItemCardSelect.emit({item:c,selected:!e})}}><span class="screen-readers-only">${c.title??""}</span></calcite-checkbox>`;case"none":return null;default:return S(r)}}renderThumbnail(e,s){if(!this.showThumbnail)return null;let r=this.getThumbnailUri(e);return s?t`<figure class="item-card__thumbnail item-card__thumbnail--grid">${r?t`<img class="item-card__thumbnail-image" src=${r??d} alt>`:t`<div class="item-card__thumbnail-fallback" aria-hidden=true><calcite-icon icon=file scale=m></calcite-icon></div>`}${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">${r?t`<img class="item-card__thumbnail-image" src=${r??d} alt>`:t`<div class="item-card__thumbnail-fallback" aria-hidden=true><calcite-icon icon=file scale=m></calcite-icon></div>`}</figure>`}renderAccess(e){return this.showAccess?t`<div class="item-card__access-wrap" @click=${s=>{s.preventDefault(),s.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}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>`}render(){let{item:e,portal:s,user:r,selection:g,isLoaded:v,disabled:f,link:c,newTab:m}=this;if(!e||!s||!this.messages._lang)return;let i=this.sourceJSON,u=i.modified||e.modified,F=this.getAccessInfo(i.access),o=this.view==="grid",p=this.selected,y=this.preview==="action"&&!this.recycleBin,k=this.actions.length>0||this.showFavoriteInActionsMenu,I=this.showFavorite&&!this.showFavoriteInActionsMenu&&!!r,E=k||I||y,O=(this.showAccess||o&&this.showOwner)&&E,h=this.preview==="top"&&!c;return t`<section class=${l({"item-card":!0,"item-card--grid":o,"item-card--hoverable":g!=="none","item-card--selected":p,"item-card--disabled":f,"item-card--loaded":v,"item-card--previewed":this.previewed&&h})} @click=${c?void 0:this.handleCardClick} tabindex=${(h?0:void 0)??d} .role=${h?"button":void 0} aria-haspopup=${(h?"dialog":void 0)??d} @keydown=${a=>{h&&(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),this.handleCardClick())}} ${b(this.sectionEl)}><slot name=content-top></slot>${c?t`<a class="item-card__upper item-card__upper--link" href=${c??d} target=${(m?"_blank":void 0)??d} rel=${(m?"noopener noreferrer":void 0)??d} @click=${a=>{if(this.linkHandler&&!a.ctrlKey&&!a.metaKey){a.preventDefault(),this.linkHandler(this.item);return}let n=a.target;n instanceof HTMLElement&&n.closest(".item-card__footer")&&a.preventDefault()}} ${b(this.linkEl)}>${t`${o&&this.renderThumbnail(e,!0)||""}<div class="item-card-flex item-card__top">${!o&&this.renderSelectionInput(p,!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({"item-card__title":!0,"item-card__title--grid":o,"item-card__title--padded":this.showItemType||this.showSummary&&!!i.snippet,"item-card-flex-1":!0})}><span class="item-card__title__span">${i.title??e.title??""}</span></h3>${o&&this.renderSelectionInput(p)||""}</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=${r} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${s}></arcgis-portal-item-type>`||""}${this.showDateUpdated&&!!u&&this.renderUpdatedDetails(u)||""}${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(p,!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({"item-card__title":!0,"item-card__title--grid":o,"item-card__title--padded":this.showItemType||this.showSummary&&!!i.snippet,"item-card-flex-1":!0})}><span class="item-card__title__span">${i.title??e.title??""}</span></h3>${o&&this.renderSelectionInput(p)||""}</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=${r} .showHosted=${this.showItemTypeHosted} scale=s .item=${e} .portal=${s}></arcgis-portal-item-type>`||""}${this.showDateUpdated&&!!u&&this.renderUpdatedDetails(u)||""}${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=${s} .username=${i.owner} .baseUrl=${this.getResolvedBaseUrl()} underline .zIndex=${this.userPopupZIndex} @arcgisUserPopupInternalUIAction=${({detail:a,stopPropagation:n})=>{n(),this.arcgisItemCardInternalUIAction.emit(a)}}></arcgis-portal-user-popup></div>`||""}</div>${this.renderAccess(F)}${O&&t`<span class="item-card__footer-divider"></span>`||""}${I&&t`<slot name=favorite-action><arcgis-portal-item-favorite .item=${e} .portal=${s} .user=${r} icon-only scale=s show-tooltip @arcgisItemFavoriteUpdate=${()=>{this.arcgisItemCardInternalUIAction.emit({category:"card action",action:"favorite"})}}></arcgis-portal-item-favorite></slot>`||""}${y&&t`<calcite-button scale=s class="item-card__preview-button" .appearance=${this.previewed?"solid":"outline"} kind=neutral @click=${a=>{a.preventDefault(),a.stopPropagation(),this.arcgisItemBrowserCardPreview.emit(this.item)}}>${this.messages.preview}</calcite-button>`||""}${k&&t`<arcgis-portal-item-actions .item=${e} .portal=${s} .user=${r} .actions=${this.actions} .label=${$(this.getMessage("itemActions","Item actions for {title}"),{title:i.title??e.title??""})} .showFavorite=${this.showFavoriteInActionsMenu&&!!r} @arcgisItemActionsOpen=${({detail:a,stopPropagation:n})=>{n(),this.arcgisItemCardActionsOpen.emit({actions:this.actions,el:a.el})}} @arcgisItemActionClick=${({detail:a,stopPropagation:n})=>{n(),this.arcgisItemCardInternalUIAction.emit({category:"card action",action:"more options",attribute:a})}} @arcgisItemFavoriteUpdate=${({stopPropagation:a})=>{a(),this.arcgisItemCardInternalUIAction.emit({category:"card action",action:"favorite"})}}></arcgis-portal-item-actions>`||""}<div @click=${a=>{a.stopPropagation()}}><slot name=actions-end></slot></div></div></section>`}};C("arcgis-portal-item-card",x);return x},"intl")