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

package/dist/cdn/{PZJAY7AM.js → 32CZ4VLI.js}

@@ -1,2 +1,2 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import{a as B}from"./I234NUZ5.js";import{a as t}from"./NWIIOJEG.js";import{a as F}from"./5VHBNEN3.js";import"./EKO6SVAF.js";import{I as y,J as $,K as C,L as p,N as l,Q as z,h as k,j as r,v as b}from"./WJ2NMHDE.js";import"./YIMNOUTF.js";var S=k`:host{display:block;min-width:0}.group-card{position:relative;display:flex;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}}.group-card--loaded{opacity:1}.group-card--selected{border-color:var(--calcite-color-brand)}.group-card--hoverable{cursor:pointer}.group-card--disabled{opacity:.5}.group-card__top{padding:1rem}.group-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}.group-card__upper:hover{background-color:var(--calcite-color-background)}.group-card__upper--compact{display:flex;align-items:center;padding:.5rem .75rem}.group-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}}.group-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}.group-card--previewed .group-card__title__span{background-image:linear-gradient(var(--calcite-color-text-3),var(--calcite-color-text-3))}.group-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column}.group-card__details{display:flex;flex-direction:row;flex-wrap:wrap}.group-card__details--stacked{flex-direction:column}.group-card__detail{font-size:.875rem;color:var(--calcite-color-text-2)}.group-card__detail__icon{margin-inline-end:.5rem}.group-card__footer{margin-top:auto;display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:.5rem 1rem;border-top:1px solid var(--calcite-color-border-3)}.group-card__footer__start{display:flex;min-width:0;flex:1 1 0%;flex-direction:row;align-items:center;overflow:hidden;margin-inline-end:.75rem}.group-card__profile-wrap{max-width:100%;padding:.25rem}.group-card__divider{display:flex;align-items:center;flex:0 0 auto}.group-card__divider:not([empty]):before{content:"";height:1.25rem;width:1px;background-color:var(--calcite-color-border-1);margin-inline:.75rem}.group-card__details--stacked .group-card__divider:before{display:none}.group-card__divider:first-child:before{display:none}.group-card-flex{display:flex}.group-card-flex-1{min-width:0;flex:1 1 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}.group-card__input{margin-inline-end:1rem;margin-top:.125rem}.group-card__title{margin:0;overflow-wrap:break-word;padding:0;font-size:1rem;font-weight:500;line-height:1.375}.group-card__title--compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-end:1rem}.group-card__summary{margin:.25rem 0;flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-size:.875rem;line-height:1.25}.group-card__thumbnail{margin-inline-end:1rem}.group-card__thumbnail--compact{width:2.75rem;height:2.75rem}.group-card__badges{margin-top:.25rem}.group-card__owner{min-width:0}.group-card--xs,.group-card--xxs{.group-card__top{padding:.75rem}.group-card__title--padded{margin-bottom:.25rem}.group-card__footer{padding:.25rem .75rem}.group-card__detail{margin:.25rem 0;font-size:.75rem;line-height:1.35}.group-card__title{font-size:.875rem}}.group-card--xxs{.group-card__thumbnail{padding-inline-start:.75rem;width:4.25rem}}.group-card--xs{.group-card__thumbnail{padding-inline-start:.5rem;width:5rem}}`,x=class extends C{constructor(){super(...arguments),this.messages=F({blocking:!0}),this.sectionEl=y(),this.resizeObserver=null,this.handleCardClick=e=>{if(!(this.link||this.disabled||e?.target?.closest(".group-card__footer"))){if(this.preview==="top"){this.arcgisGroupBrowserCardPreview.emit(this.group);return}if(this.selection==="single"){this.selected=!0,this.arcgisGroupCardSelect.emit({group:this.group,selected:!0});return}this.selection==="multiple"&&(this.selected=!this.selected,this.arcgisGroupCardSelect.emit({group:this.group,selected:this.selected}))}},this.formFactor="lg",this.width=0,this.hover=!1,this.selected=!1,this.indeterminate=!1,this.view="list",this.selection="none",this.previewed=!1,this.showOwner=!0,this.showDateUpdated=!0,this.showDateCreated=!1,this.showViewableBy=!0,this.showSummary=!1,this.showBadges=!0,this.newTab=!1,this.disabled=!1,this.arcgisGroupBrowserCardPreview=b(),this.arcgisGroupCardSelect=b(),this.arcgisGroupBrowserInternalUIAction=b(),this.loaded=!1}static{this.properties={formFactor:16,width:16,hover:16,group:0,user:0,portal:0,selected:7,indeterminate:7,view:1,selection:1,preview:1,previewed:5,name:1,showOwner:5,showDateUpdated:5,showDateCreated:5,showViewableBy:5,showSummary:5,showBadges:5,link:1,linkHandler:0,newTab:5,disabled:7,loaded:16}}static{this.styles=S}async restoreFocus(){if(this.link){this.renderRoot.querySelector(".group-card__upper")?.focus();return}this.preview==="top"&&this.sectionEl.value&&this.sectionEl.value.focus()}connectedCallback(){super.connectedCallback(),!(typeof ResizeObserver>"u")&&(this.resizeObserver=new ResizeObserver(e=>{let a=e[0]?.contentRect.width??0;this.updateFormFactor(a)}))}firstUpdated(){if(this.sectionEl.value&&this.resizeObserver){this.resizeObserver.observe(this.sectionEl.value);let e=this.sectionEl.value.getBoundingClientRect().width;this.updateFormFactor(e)}requestAnimationFrame(()=>{this.loaded=!0})}disconnectedCallback(){this.resizeObserver?.disconnect(),this.resizeObserver=null,super.disconnectedCallback()}updateFormFactor(e){if(this.width=e,e>t.md){this.formFactor="lg";return}if(e>t.sm){this.formFactor="md";return}if(e>t.xs){this.formFactor="sm";return}if(e>t.xxs){this.formFactor="xs";return}this.formFactor="xxs"}getAccessInfo(e){let{messages:a}=this,c={public:{icon:"globe",text:a.everyone},private:{icon:"lock",text:a.groupMembers},org:{icon:"organization",text:a.organization}};return c[e]??c.private}formatDate(e){return e?new Intl.DateTimeFormat(void 0,{dateStyle:"medium"}).format(e):""}getThumbnailGroup(e){return{id:e.id??void 0,thumbnailUrl:e.thumbnailUrl??void 0,title:e.title??void 0}}renderSelectionInput(){let{selection:e,selected:a,disabled:c,name:h,messages:_,group:i}=this;switch(e){case"single":return r`<calcite-radio-button class="group-card__input" .checked=${a} .disabled=${c} .value=${i.title??""} .name=${h} @click=${s=>s.stopPropagation()} @calciteRadioButtonChange=${()=>{this.arcgisGroupCardSelect.emit({group:i,selected:!a})}}><span class="screen-readers-only">${(_.select??"").replace("${title}",i.title??"")}</span></calcite-radio-button>`;case"multiple":return r`<calcite-checkbox class="group-card__input" .checked=${a} .disabled=${c} .indeterminate=${this.indeterminate} @click=${s=>s.stopPropagation()} @calciteCheckboxChange=${()=>{let s=!this.selected;this.selected=s,this.arcgisGroupCardSelect.emit({group:i,selected:s})}}><span class="screen-readers-only">${i.title}</span></calcite-checkbox>`;case"none":return null;default:return B(e)}}renderCompactView(){let{group:e,selection:a,formFactor:c,loaded:h,disabled:_,link:i,showBadges:s,newTab:m,linkHandler:d,handleCardClick:n,selected:u}=this,v=this.getThumbnailGroup(e);return r`<section class=${p({"group-card":!0,"group-card--hoverable":a!=="none","group-card--selected":u,"group-card--disabled":_,"group-card--loaded":h,[`group-card--${c}`]:!0})} @click=${i?void 0:n} @mouseover=${()=>{this.hover=!0}} @mouseout=${()=>{this.hover=!1}} ${$(this.sectionEl)}>${i?r`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${i??l} target=${(m?"_blank":void 0)??l} rel=${(m?"noopener noreferrer":void 0)??l} @click=${g=>{d&&!g.ctrlKey&&!g.metaKey&&(g.preventDefault(),d(this.group))}}>${r`${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${v} .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>${s&&r`<arcgis-portal-group-badges .group=${e} .portal=${this.portal} class="group-card__badges--compact" scale=s show-tooltips width=narrow></arcgis-portal-group-badges>`||""}</div><slot name=content-end></slot>`}</a>`:r`<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=${v} .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>${s&&r`<arcgis-portal-group-badges .group=${e} .portal=${this.portal} class="group-card__badges--compact" scale=s show-tooltips width=narrow></arcgis-portal-group-badges>`||""}</div><slot name=content-end></slot></div>`}</section>`}render(){let{group:e,selection:a,formFactor:c,loaded:h,disabled:_,link:i,showDateCreated:s,showDateUpdated:m,showSummary:d,showBadges:n}=this;if(!e||!this.messages._lang)return;if(this.view==="compact")return this.renderCompactView();let u=this.getAccessInfo(e.access??"private"),v=this.getThumbnailGroup(e),g=this.width<t.sm,f=this.preview==="top"&&!i,{previewed:D}=this;return r`<section class=${p({"group-card":!0,"group-card--hoverable":a!=="none","group-card--selected":this.selected,"group-card--disabled":_,"group-card--loaded":h,[`group-card--${c}`]:!0,"group-card--previewed":D})} @click=${i?void 0:this.handleCardClick} tabindex=${(f?0:void 0)??l} .role=${f?"button":void 0} aria-haspopup=${(f?"dialog":void 0)??l} @keydown=${o=>{f&&(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this.handleCardClick())}} ${$(this.sectionEl)}><slot name=content-top></slot>${i?r`<a class="group-card__upper group-card__upper--link" href=${this.link??l} target=${(this.newTab?"_blank":void 0)??l} rel=${(this.newTab?"noopener noreferrer":void 0)??l} @mouseover=${()=>{this.hover=!0}} @mouseout=${()=>{this.hover=!1}} @click=${o=>{if(this.linkHandler&&!o.ctrlKey&&!o.metaKey){o.preventDefault(),this.linkHandler(this.group);return}let w=o.target;w instanceof HTMLElement&&w.closest(".group-card__footer")&&o.preventDefault()}}>${r`<div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${v} .portal=${this.portal} scale=xl></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><div class="group-card-flex"><div class="group-card__content"><h3 class=${p({"group-card__title":!0,"group-card__title--padded":d&&!!e.snippet})}><span class="group-card__title__span">${e.title}</span></h3>${d&&!!e.snippet&&r`<p class="group-card__summary">${e.snippet.length>250?`${e.snippet.substring(0,250)}...`:e.snippet}</p>`||""}<div class=${p({"group-card__details":!0,"group-card__details--stacked":g})}>${s&&!!e.created&&r`<span class="group-card__detail group-card__divider">${(this.messages.created??"").replace("${date}",this.formatDate(e.created))}</span>`||""}${m&&!!e.modified&&r`<span class="group-card__detail group-card__divider">${(this.messages.lastUpdated??"").replace("${date}",this.formatDate(e.modified))}</span>`||""}${this.showViewableBy&&r`<span class="group-card__detail group-card__divider"><calcite-icon class="group-card__detail__icon" .icon=${u.icon} scale=s></calcite-icon>${(this.messages.viewableBy??"").replace("${level}",u.text)}</span>`||""}${n&&this.width>=t.sm&&r`<arcgis-portal-group-badges .appearance=${this.hover?"outline-fill":"solid"} .group=${e} .portal=${this.portal} .width=${this.width<t.md?"narrow":"full"} class="group-card__badges group-card__detail group-card__divider" scale=s show-tooltips></arcgis-portal-group-badges>`||""}</div>${n&&this.width<t.sm&&r`<arcgis-portal-group-badges .appearance=${this.hover?"outline-fill":"solid"} .group=${e} .portal=${this.portal} .width=${this.width<t.xxs?"narrow":"full"} class="group-card__badges" scale=s show-tooltips></arcgis-portal-group-badges>`||""}<slot name=content-end></slot></div></div></div></div>`}</a>`:r`<div class="group-card__upper" @mouseover=${()=>{this.hover=!0}} @mouseout=${()=>{this.hover=!1}}><div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${v} .portal=${this.portal} scale=xl></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><div class="group-card-flex"><div class="group-card__content"><h3 class=${p({"group-card__title":!0,"group-card__title--padded":d&&!!e.snippet})}><span class="group-card__title__span">${e.title}</span></h3>${d&&!!e.snippet&&r`<p class="group-card__summary">${e.snippet.length>250?`${e.snippet.substring(0,250)}...`:e.snippet}</p>`||""}<div class=${p({"group-card__details":!0,"group-card__details--stacked":g})}>${s&&!!e.created&&r`<span class="group-card__detail group-card__divider">${(this.messages.created??"").replace("${date}",this.formatDate(e.created))}</span>`||""}${m&&!!e.modified&&r`<span class="group-card__detail group-card__divider">${(this.messages.lastUpdated??"").replace("${date}",this.formatDate(e.modified))}</span>`||""}${this.showViewableBy&&r`<span class="group-card__detail group-card__divider"><calcite-icon class="group-card__detail__icon" .icon=${u.icon} scale=s></calcite-icon>${(this.messages.viewableBy??"").replace("${level}",u.text)}</span>`||""}${n&&this.width>=t.sm&&r`<arcgis-portal-group-badges .appearance=${this.hover?"outline-fill":"solid"} .group=${e} .portal=${this.portal} .width=${this.width<t.md?"narrow":"full"} class="group-card__badges group-card__detail group-card__divider" scale=s show-tooltips></arcgis-portal-group-badges>`||""}</div>${n&&this.width<t.sm&&r`<arcgis-portal-group-badges .appearance=${this.hover?"outline-fill":"solid"} .group=${e} .portal=${this.portal} .width=${this.width<t.xxs?"narrow":"full"} class="group-card__badges" scale=s show-tooltips></arcgis-portal-group-badges>`||""}<slot name=content-end></slot></div></div></div></div></div>`}<div class="group-card__footer"><div class="group-card__footer__start"><slot name=actions-start></slot>${this.showOwner&&r`<div class="group-card__profile-wrap"><arcgis-portal-user-popup class="group-card__owner" .portal=${this.portal} .username=${e.owner??void 0} underline @arcgisUserPopupInternalUIAction=${({detail:o,stopPropagation:w})=>{w(),this.arcgisGroupBrowserInternalUIAction.emit(o)}}></arcgis-portal-user-popup></div>`||""}</div><div>${this.preview==="action"&&r`<calcite-button scale=s appearance=outline-fill kind=neutral @click=${()=>{this.arcgisGroupBrowserCardPreview.emit(this.group)}}>${this.previewed?this.messages.hidePreview:this.messages.preview}</calcite-button>`||""}<div @click=${o=>{o.stopPropagation()}}><slot name=actions-end></slot></div></div></div></section>`}};z("arcgis-portal-group-card",x);export{x as ArcgisPortalGroupCard};
+import{a as B}from"./I234NUZ5.js";import{a as F}from"./5VHBNEN3.js";import"./EKO6SVAF.js";import{a as t}from"./NWIIOJEG.js";import{I as y,J as $,K as C,L as p,N as l,Q as z,h as k,j as r,v as b}from"./WJ2NMHDE.js";import"./YIMNOUTF.js";var S=k`:host{display:block;min-width:0}.group-card{position:relative;display:flex;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}}.group-card--loaded{opacity:1}.group-card--selected{border-color:var(--calcite-color-brand)}.group-card--hoverable{cursor:pointer}.group-card--disabled{opacity:.5}.group-card__top{padding:1rem}.group-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}.group-card__upper:hover{background-color:var(--calcite-color-background)}.group-card__upper--compact{display:flex;align-items:center;padding:.5rem .75rem}.group-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}}.group-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}.group-card--previewed .group-card__title__span{background-image:linear-gradient(var(--calcite-color-text-3),var(--calcite-color-text-3))}.group-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column}.group-card__details{display:flex;flex-direction:row;flex-wrap:wrap}.group-card__details--stacked{flex-direction:column}.group-card__detail{font-size:.875rem;color:var(--calcite-color-text-2)}.group-card__detail__icon{margin-inline-end:.5rem}.group-card__footer{margin-top:auto;display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);padding:.5rem 1rem;border-top:1px solid var(--calcite-color-border-3)}.group-card__footer__start{display:flex;min-width:0;flex:1 1 0%;flex-direction:row;align-items:center;overflow:hidden;margin-inline-end:.75rem}.group-card__profile-wrap{max-width:100%;padding:.25rem}.group-card__divider{display:flex;align-items:center;flex:0 0 auto}.group-card__divider:not([empty]):before{content:"";height:1.25rem;width:1px;background-color:var(--calcite-color-border-1);margin-inline:.75rem}.group-card__details--stacked .group-card__divider:before{display:none}.group-card__divider:first-child:before{display:none}.group-card-flex{display:flex}.group-card-flex-1{min-width:0;flex:1 1 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}.group-card__input{margin-inline-end:1rem;margin-top:.125rem}.group-card__title{margin:0;overflow-wrap:break-word;padding:0;font-size:1rem;font-weight:500;line-height:1.375}.group-card__title--compact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-end:1rem}.group-card__summary{margin:.25rem 0;flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-size:.875rem;line-height:1.25}.group-card__thumbnail{margin-inline-end:1rem}.group-card__thumbnail--compact{width:2.75rem;height:2.75rem}.group-card__badges{margin-top:.25rem}.group-card__owner{min-width:0}.group-card--xs,.group-card--xxs{.group-card__top{padding:.75rem}.group-card__title--padded{margin-bottom:.25rem}.group-card__footer{padding:.25rem .75rem}.group-card__detail{margin:.25rem 0;font-size:.75rem;line-height:1.35}.group-card__title{font-size:.875rem}}.group-card--xxs{.group-card__thumbnail{padding-inline-start:.75rem;width:4.25rem}}.group-card--xs{.group-card__thumbnail{padding-inline-start:.5rem;width:5rem}}`,x=class extends C{constructor(){super(...arguments),this.messages=F({blocking:!0}),this.sectionEl=y(),this.resizeObserver=null,this.handleCardClick=e=>{if(!(this.link||this.disabled||e?.target?.closest(".group-card__footer"))){if(this.preview==="top"){this.arcgisGroupBrowserCardPreview.emit(this.group);return}if(this.selection==="single"){this.selected=!0,this.arcgisGroupCardSelect.emit({group:this.group,selected:!0});return}this.selection==="multiple"&&(this.selected=!this.selected,this.arcgisGroupCardSelect.emit({group:this.group,selected:this.selected}))}},this.formFactor="lg",this.width=0,this.hover=!1,this.selected=!1,this.indeterminate=!1,this.view="list",this.selection="none",this.previewed=!1,this.showOwner=!0,this.showDateUpdated=!0,this.showDateCreated=!1,this.showViewableBy=!0,this.showSummary=!1,this.showBadges=!0,this.newTab=!1,this.disabled=!1,this.arcgisGroupBrowserCardPreview=b(),this.arcgisGroupCardSelect=b(),this.arcgisGroupBrowserInternalUIAction=b(),this.loaded=!1}static{this.properties={formFactor:16,width:16,hover:16,group:0,user:0,portal:0,selected:7,indeterminate:7,view:1,selection:1,preview:1,previewed:5,name:1,showOwner:5,showDateUpdated:5,showDateCreated:5,showViewableBy:5,showSummary:5,showBadges:5,link:1,linkHandler:0,newTab:5,disabled:7,loaded:16}}static{this.styles=S}async restoreFocus(){if(this.link){this.renderRoot.querySelector(".group-card__upper")?.focus();return}this.preview==="top"&&this.sectionEl.value&&this.sectionEl.value.focus()}connectedCallback(){super.connectedCallback(),!(typeof ResizeObserver>"u")&&(this.resizeObserver=new ResizeObserver(e=>{let a=e[0]?.contentRect.width??0;this.updateFormFactor(a)}))}firstUpdated(){if(this.sectionEl.value&&this.resizeObserver){this.resizeObserver.observe(this.sectionEl.value);let e=this.sectionEl.value.getBoundingClientRect().width;this.updateFormFactor(e)}requestAnimationFrame(()=>{this.loaded=!0})}disconnectedCallback(){this.resizeObserver?.disconnect(),this.resizeObserver=null,super.disconnectedCallback()}updateFormFactor(e){if(this.width=e,e>t.md){this.formFactor="lg";return}if(e>t.sm){this.formFactor="md";return}if(e>t.xs){this.formFactor="sm";return}if(e>t.xxs){this.formFactor="xs";return}this.formFactor="xxs"}getAccessInfo(e){let{messages:a}=this,c={public:{icon:"globe",text:a.everyone},private:{icon:"lock",text:a.groupMembers},org:{icon:"organization",text:a.organization}};return c[e]??c.private}formatDate(e){return e?new Intl.DateTimeFormat(void 0,{dateStyle:"medium"}).format(e):""}getThumbnailGroup(e){return{id:e.id??void 0,thumbnailUrl:e.thumbnailUrl??void 0,title:e.title??void 0}}renderSelectionInput(){let{selection:e,selected:a,disabled:c,name:h,messages:_,group:i}=this;switch(e){case"single":return r`<calcite-radio-button class="group-card__input" .checked=${a} .disabled=${c} .value=${i.title??""} .name=${h} @click=${s=>s.stopPropagation()} @calciteRadioButtonChange=${()=>{this.arcgisGroupCardSelect.emit({group:i,selected:!a})}}><span class="screen-readers-only">${(_.select??"").replace("${title}",i.title??"")}</span></calcite-radio-button>`;case"multiple":return r`<calcite-checkbox class="group-card__input" .checked=${a} .disabled=${c} .indeterminate=${this.indeterminate} @click=${s=>s.stopPropagation()} @calciteCheckboxChange=${()=>{let s=!this.selected;this.selected=s,this.arcgisGroupCardSelect.emit({group:i,selected:s})}}><span class="screen-readers-only">${i.title}</span></calcite-checkbox>`;case"none":return null;default:return B(e)}}renderCompactView(){let{group:e,selection:a,formFactor:c,loaded:h,disabled:_,link:i,showBadges:s,newTab:m,linkHandler:d,handleCardClick:n,selected:u}=this,v=this.getThumbnailGroup(e);return r`<section class=${p({"group-card":!0,"group-card--hoverable":a!=="none","group-card--selected":u,"group-card--disabled":_,"group-card--loaded":h,[`group-card--${c}`]:!0})} @click=${i?void 0:n} @mouseover=${()=>{this.hover=!0}} @mouseout=${()=>{this.hover=!1}} ${$(this.sectionEl)}>${i?r`<a class="group-card__upper group-card__upper--compact group-card__upper--link" href=${i??l} target=${(m?"_blank":void 0)??l} rel=${(m?"noopener noreferrer":void 0)??l} @click=${g=>{d&&!g.ctrlKey&&!g.metaKey&&(g.preventDefault(),d(this.group))}}>${r`${this.renderSelectionInput()}<div class="group-card__thumbnail group-card__thumbnail--compact"><arcgis-portal-group-thumbnail .group=${v} .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>${s&&r`<arcgis-portal-group-badges .group=${e} .portal=${this.portal} class="group-card__badges--compact" scale=s show-tooltips width=narrow></arcgis-portal-group-badges>`||""}</div><slot name=content-end></slot>`}</a>`:r`<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=${v} .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>${s&&r`<arcgis-portal-group-badges .group=${e} .portal=${this.portal} class="group-card__badges--compact" scale=s show-tooltips width=narrow></arcgis-portal-group-badges>`||""}</div><slot name=content-end></slot></div>`}</section>`}render(){let{group:e,selection:a,formFactor:c,loaded:h,disabled:_,link:i,showDateCreated:s,showDateUpdated:m,showSummary:d,showBadges:n}=this;if(!e||!this.messages._lang)return;if(this.view==="compact")return this.renderCompactView();let u=this.getAccessInfo(e.access??"private"),v=this.getThumbnailGroup(e),g=this.width<t.sm,f=this.preview==="top"&&!i,{previewed:D}=this;return r`<section class=${p({"group-card":!0,"group-card--hoverable":a!=="none","group-card--selected":this.selected,"group-card--disabled":_,"group-card--loaded":h,[`group-card--${c}`]:!0,"group-card--previewed":D})} @click=${i?void 0:this.handleCardClick} tabindex=${(f?0:void 0)??l} .role=${f?"button":void 0} aria-haspopup=${(f?"dialog":void 0)??l} @keydown=${o=>{f&&(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),this.handleCardClick())}} ${$(this.sectionEl)}><slot name=content-top></slot>${i?r`<a class="group-card__upper group-card__upper--link" href=${this.link??l} target=${(this.newTab?"_blank":void 0)??l} rel=${(this.newTab?"noopener noreferrer":void 0)??l} @mouseover=${()=>{this.hover=!0}} @mouseout=${()=>{this.hover=!1}} @click=${o=>{if(this.linkHandler&&!o.ctrlKey&&!o.metaKey){o.preventDefault(),this.linkHandler(this.group);return}let w=o.target;w instanceof HTMLElement&&w.closest(".group-card__footer")&&o.preventDefault()}}>${r`<div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${v} .portal=${this.portal} scale=xl></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><div class="group-card-flex"><div class="group-card__content"><h3 class=${p({"group-card__title":!0,"group-card__title--padded":d&&!!e.snippet})}><span class="group-card__title__span">${e.title}</span></h3>${d&&!!e.snippet&&r`<p class="group-card__summary">${e.snippet.length>250?`${e.snippet.substring(0,250)}...`:e.snippet}</p>`||""}<div class=${p({"group-card__details":!0,"group-card__details--stacked":g})}>${s&&!!e.created&&r`<span class="group-card__detail group-card__divider">${(this.messages.created??"").replace("${date}",this.formatDate(e.created))}</span>`||""}${m&&!!e.modified&&r`<span class="group-card__detail group-card__divider">${(this.messages.lastUpdated??"").replace("${date}",this.formatDate(e.modified))}</span>`||""}${this.showViewableBy&&r`<span class="group-card__detail group-card__divider"><calcite-icon class="group-card__detail__icon" .icon=${u.icon} scale=s></calcite-icon>${(this.messages.viewableBy??"").replace("${level}",u.text)}</span>`||""}${n&&this.width>=t.sm&&r`<arcgis-portal-group-badges .appearance=${this.hover?"outline-fill":"solid"} .group=${e} .portal=${this.portal} .width=${this.width<t.md?"narrow":"full"} class="group-card__badges group-card__detail group-card__divider" scale=s show-tooltips></arcgis-portal-group-badges>`||""}</div>${n&&this.width<t.sm&&r`<arcgis-portal-group-badges .appearance=${this.hover?"outline-fill":"solid"} .group=${e} .portal=${this.portal} .width=${this.width<t.xxs?"narrow":"full"} class="group-card__badges" scale=s show-tooltips></arcgis-portal-group-badges>`||""}<slot name=content-end></slot></div></div></div></div>`}</a>`:r`<div class="group-card__upper" @mouseover=${()=>{this.hover=!0}} @mouseout=${()=>{this.hover=!1}}><div class="group-card-flex group-card__top">${this.renderSelectionInput()}<div class="group-card__thumbnail"><arcgis-portal-group-thumbnail .group=${v} .portal=${this.portal} scale=xl></arcgis-portal-group-thumbnail></div><div class="group-card-flex-1"><div class="group-card-flex"><div class="group-card__content"><h3 class=${p({"group-card__title":!0,"group-card__title--padded":d&&!!e.snippet})}><span class="group-card__title__span">${e.title}</span></h3>${d&&!!e.snippet&&r`<p class="group-card__summary">${e.snippet.length>250?`${e.snippet.substring(0,250)}...`:e.snippet}</p>`||""}<div class=${p({"group-card__details":!0,"group-card__details--stacked":g})}>${s&&!!e.created&&r`<span class="group-card__detail group-card__divider">${(this.messages.created??"").replace("${date}",this.formatDate(e.created))}</span>`||""}${m&&!!e.modified&&r`<span class="group-card__detail group-card__divider">${(this.messages.lastUpdated??"").replace("${date}",this.formatDate(e.modified))}</span>`||""}${this.showViewableBy&&r`<span class="group-card__detail group-card__divider"><calcite-icon class="group-card__detail__icon" .icon=${u.icon} scale=s></calcite-icon>${(this.messages.viewableBy??"").replace("${level}",u.text)}</span>`||""}${n&&this.width>=t.sm&&r`<arcgis-portal-group-badges .appearance=${this.hover?"outline-fill":"solid"} .group=${e} .portal=${this.portal} .width=${this.width<t.md?"narrow":"full"} class="group-card__badges group-card__detail group-card__divider" scale=s show-tooltips></arcgis-portal-group-badges>`||""}</div>${n&&this.width<t.sm&&r`<arcgis-portal-group-badges .appearance=${this.hover?"outline-fill":"solid"} .group=${e} .portal=${this.portal} .width=${this.width<t.xxs?"narrow":"full"} class="group-card__badges" scale=s show-tooltips></arcgis-portal-group-badges>`||""}<slot name=content-end></slot></div></div></div></div></div>`}<div class="group-card__footer"><div class="group-card__footer__start"><slot name=actions-start></slot>${this.showOwner&&r`<div class="group-card__profile-wrap"><arcgis-portal-user-popup class="group-card__owner" .portal=${this.portal} .username=${e.owner??void 0} underline @arcgisUserPopupInternalUIAction=${({detail:o,stopPropagation:w})=>{w(),this.arcgisGroupBrowserInternalUIAction.emit(o)}}></arcgis-portal-user-popup></div>`||""}</div><div>${this.preview==="action"&&r`<calcite-button scale=s appearance=outline-fill kind=neutral @click=${()=>{this.arcgisGroupBrowserCardPreview.emit(this.group)}}>${this.previewed?this.messages.hidePreview:this.messages.preview}</calcite-button>`||""}<div @click=${o=>{o.stopPropagation()}}><slot name=actions-end></slot></div></div></div></section>`}};z("arcgis-portal-group-card",x);export{x as ArcgisPortalGroupCard};