@popgrids/embed 0.0.8 → 0.0.9

package/dist/index.cjs

@@ -1285,17 +1285,23 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
     height: var(--pop-comment-icon-size);
   }
 
+  /* Hidden until it loads, so the plus shows while it loads or if it fails. */
   .comment-icon__icon-image {
-    display: flex;
+    display: none;
     width: var(--pop-comment-icon-size);
     height: var(--pop-comment-icon-size);
+    object-fit: contain;
+  }
+
+  .comment-icon__icon-image--loaded {
+    display: flex;
   }
 
   .comment-icon__icon {
     display: flex;
   }
 
-  .comment-icon__icon-image + .comment-icon__icon {
+  .comment-icon__icon-image--loaded + .comment-icon__icon {
     display: none;
   }
 
@@ -1310,11 +1316,11 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
       transform: scale(var(--pop-comment-icon-scale-hover));
     }
 
-    .comment-icon:hover .comment-icon__icon-image {
+    .comment-icon:hover .comment-icon__icon-image--loaded {
       display: none;
     }
 
-    .comment-icon:hover .comment-icon__icon-image + .comment-icon__icon {
+    .comment-icon:hover .comment-icon__icon-image--loaded + .comment-icon__icon {
       display: flex;
     }
   }
@@ -1481,7 +1487,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
               stroke-linejoin="round"
             />
           </svg>
-        `)),e}getTemplate(){let e=this.disabled?`disabled`:``,t=[`comment-icon`,this.size?`comment-icon--size-${this.size}`:``,this.theme?`comment-icon--theme-${this.theme}`:``,this.variant?`comment-icon--variant-${this.variant}`:``].filter(Boolean).join(` `),n=this.iconUrl?`<img src="${this.iconUrl}" alt="" class="comment-icon__icon-image" />
+        `)),e}render(){super.render();let e=this.getElement(`.comment-icon__icon-image`);if(!e||!this.iconUrl)return;let t=()=>{e.classList.add(`comment-icon__icon-image--loaded`);let t=this.getElement(`.comment-icon`);t?.classList.remove(`comment-icon--theme-${this.theme}`),t?.classList.add(`comment-icon--theme-brand`)};e.addEventListener(`load`,t,{once:!0}),e.addEventListener(`error`,()=>e.remove(),{once:!0}),e.src=this.iconUrl,e.complete&&e.naturalWidth>0&&t()}getTemplate(){let e=this.disabled?`disabled`:``,t=[`comment-icon`,this.size?`comment-icon--size-${this.size}`:``,this.theme?`comment-icon--theme-${this.theme}`:``,this.variant?`comment-icon--variant-${this.variant}`:``].filter(Boolean).join(` `),n=this.iconUrl?`<img alt="" class="comment-icon__icon-image" />
          <slot class="comment-icon__icon" name="icon">${this.icon}</slot>`:`<slot class="comment-icon__icon" name="icon">${this.icon}</slot>`,r=this.ariaLabel?`aria-label="${this.ariaLabel}"`:``;return`
       <button
         class="${t}"
@@ -2206,7 +2212,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
   .grid--align-end {
     justify-content: flex-end;
   }
-`),_t=class extends k{constructor(...e){super(...e),this._initialized=!1}get demo(){return this._demo}set demo(e){this._demo=e,this._store?.demo&&this._store.showDemo(e)}get open(){return this._store?.open.value??!1}set open(e){this._store&&(this._store.open.value=e)}get styleSheets(){return[gt]}static get observedAttributes(){return[`data-align`,`data-layout`,`data-position`,`data-icon`,`data-preview-count`]}connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=this.getAttribute(`data-key`)??this.getAttribute(`public-key`)??``,t=this.getAttribute(`data-api-url`)??this.getAttribute(`api-url`)??ft,n=this.getAttribute(`data-page-url`)??this.getAttribute(`page-url`)??location.href,r=this.getAttribute(`data-id`),i=this.hasAttribute(`data-demo`);if(this._authStore=new y({apiUrl:t,publicKey:e,demo:i}),le(this,this._authStore),this._store=new W({apiUrl:t,publicKey:e,pageUrl:n,externalId:r,demo:i,authStore:this._authStore}),le(this,this._store),super.connectedCallback(),this._store.setOverrides(this._readOverridesFromAttributes()),this._store.demo){this._demo&&this._store.showDemo(this._demo);return}this._store.load()}_readOverridesFromAttributes(){let e={},t=this.getAttribute(`data-align`);t&&pt.has(t)&&(e.align=t);let n=this.getAttribute(`data-layout`);n&&mt.has(n)&&(e.layout=n);let r=this.getAttribute(`data-position`);r&&ht.has(r)&&(e.position=r);let i=this.getAttribute(`data-icon`);i&&(e.icon=i);let a=this.getAttribute(`data-preview-count`);if(a!==null){let t=Number(a);Number.isInteger(t)&&t>0&&(e.previewCount=t)}return e}_applyOverridesFromAttributes(){this._store&&this._store.setOverrides(this._readOverridesFromAttributes())}onDataAlignChanged(){this._applyOverridesFromAttributes()}onDataLayoutChanged(){this._applyOverridesFromAttributes()}onDataPositionChanged(){this._applyOverridesFromAttributes()}onDataIconChanged(){this._applyOverridesFromAttributes()}onDataPreviewCountChanged(){this._applyOverridesFromAttributes()}disconnectedCallback(){this._floatingCleanup?.(),this._store.destroy(),this._authStore.destroy(),ue(this),super.disconnectedCallback()}setupEffects(){this.addEffect(()=>{let e=this._store.grid.value,t=this.getElement(A(`grid`));if(!t)return;let n=Array.from(t.classList).filter(e=>e.startsWith(`grid--`));if(n.length>0&&t.classList.remove(...n),e){e.align&&t.classList.add(`grid--align-${e.align}`),e.appearance&&t.classList.add(`grid--appearance-${e.appearance}`),e.icon&&t.classList.add(`grid--icon-${e.icon}`),e.layout&&t.classList.add(`grid--layout-${e.layout}`),e.position&&t.classList.add(`grid--position-${e.position}`);let n=e.previewCount??this._store.previewCount;t.classList.add(`grid--preview-${n}`)}}),this.addEffect(()=>{let e=this._store.open.value;if(this._floatingCleanup&&=(this._floatingCleanup(),void 0),!e)return;let t=this.getElement(`pop-widget`),n=this.getElement(`pop-feed`);if(!t||!n)return;let r=this._store.grid.value;r&&(this._floatingCleanup=dt(t,n,r.position))})}getTemplate(){return`
+`),_t=class extends k{constructor(...e){super(...e),this._initialized=!1}get demo(){return this._demo}set demo(e){this._demo=e,this._store?.demo&&this._store.showDemo(e)}get open(){return this._store?.open.value??!1}set open(e){this._store&&(this._store.open.value=e)}get styleSheets(){return[gt]}static get observedAttributes(){return[`data-align`,`data-layout`,`data-position`,`data-icon`,`data-preview-count`]}connectedCallback(){if(this._initialized)return;this._initialized=!0;let e=this.getAttribute(`data-key`)??this.getAttribute(`public-key`)??``,t=this.getAttribute(`data-api-url`)??this.getAttribute(`api-url`)??ft,n=this.getAttribute(`data-page-url`)??this.getAttribute(`page-url`)??location.href,r=this.getAttribute(`data-id`),i=this.hasAttribute(`data-demo`);if(this._authStore=new y({apiUrl:t,publicKey:e,demo:i}),le(this,this._authStore),this._store=new W({apiUrl:t,publicKey:e,pageUrl:n,externalId:r,demo:i,authStore:this._authStore}),le(this,this._store),super.connectedCallback(),this._store.setOverrides(this._readOverridesFromAttributes()),this._store.demo){this._demo&&this._store.showDemo(this._demo);return}this._store.load()}_readOverridesFromAttributes(){let e={},t=this.getAttribute(`data-align`);t&&pt.has(t)&&(e.align=t);let n=this.getAttribute(`data-layout`);n&&mt.has(n)&&(e.layout=n);let r=this.getAttribute(`data-position`);r&&ht.has(r)&&(e.position=r);let i=this.getAttribute(`data-icon`);i&&(e.iconUrl=i);let a=this.getAttribute(`data-preview-count`);if(a!==null){let t=Number(a);Number.isInteger(t)&&t>0&&(e.previewCount=t)}return e}_applyOverridesFromAttributes(){this._store&&this._store.setOverrides(this._readOverridesFromAttributes())}onDataAlignChanged(){this._applyOverridesFromAttributes()}onDataLayoutChanged(){this._applyOverridesFromAttributes()}onDataPositionChanged(){this._applyOverridesFromAttributes()}onDataIconChanged(){this._applyOverridesFromAttributes()}onDataPreviewCountChanged(){this._applyOverridesFromAttributes()}disconnectedCallback(){this._floatingCleanup?.(),this._store.destroy(),this._authStore.destroy(),ue(this),super.disconnectedCallback()}setupEffects(){this.addEffect(()=>{let e=this._store.grid.value,t=this.getElement(A(`grid`));if(!t)return;let n=Array.from(t.classList).filter(e=>e.startsWith(`grid--`));if(n.length>0&&t.classList.remove(...n),e){e.align&&t.classList.add(`grid--align-${e.align}`),e.appearance&&t.classList.add(`grid--appearance-${e.appearance}`),e.layout&&t.classList.add(`grid--layout-${e.layout}`),e.position&&t.classList.add(`grid--position-${e.position}`);let n=e.previewCount??this._store.previewCount;t.classList.add(`grid--preview-${n}`)}}),this.addEffect(()=>{let e=this._store.open.value;if(this._floatingCleanup&&=(this._floatingCleanup(),void 0),!e)return;let t=this.getElement(`pop-widget`),n=this.getElement(`pop-feed`);if(!t||!n)return;let r=this._store.grid.value;r&&(this._floatingCleanup=dt(t,n,r.position))})}getTemplate(){return`
       <div class="grid" data-ref="grid">
         <pop-widget></pop-widget>
         <pop-feed></pop-feed>
@@ -2353,7 +2359,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
     z-index: 20;
     top: 1px;
   }
-`),yt=class extends k{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[vt]}onClick(){this.gridStore.error.value||(this.gridStore.open.value=!this.gridStore.open.value)}setupEffects(){this.addEffect(()=>{this.gridStore.loading.value,this.gridStore.error.value,this.gridStore.previewAvatars.value,this.gridStore.comments.value,this.gridStore.grid.value;let e=!!this.gridStore.error.value;this.toggleAttribute(`data-error`,e),e&&this.gridStore.open.value&&(this.gridStore.open.value=!1),this.render()})}getTemplate(){if(this.gridStore.loading.value)return`<div class="widget"><div class="skeleton mask mask-squircle"></div></div>`;if(this.gridStore.error.value)return`<div class="error-badge">Error: there was a problem loading the PopGrid</div>`;let e=this.gridStore.previewAvatars.value,t=this.gridStore.comments.value.length,r=this.gridStore.grid.value?.icon===`brand`?`brand`:`neutral`;return`
+`),yt=class extends k{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[vt]}onClick(){this.gridStore.error.value||(this.gridStore.open.value=!this.gridStore.open.value)}setupEffects(){this.addEffect(()=>{this.gridStore.loading.value,this.gridStore.error.value,this.gridStore.previewAvatars.value,this.gridStore.comments.value,this.gridStore.grid.value;let e=!!this.gridStore.error.value;this.toggleAttribute(`data-error`,e),e&&this.gridStore.open.value&&(this.gridStore.open.value=!1),this.render(),this.setAttr(`pop-comment-icon`,`icon-url`,this.gridStore.grid.value?.iconUrl??null)})}getTemplate(){if(this.gridStore.loading.value)return`<div class="widget"><div class="skeleton mask mask-squircle"></div></div>`;if(this.gridStore.error.value)return`<div class="error-badge">Error: there was a problem loading the PopGrid</div>`;let e=this.gridStore.previewAvatars.value,t=this.gridStore.comments.value.length;return`
       <div class="widget">
         ${e.map((t,r)=>{let i=e.length+r,a=t?.id??t?.name??``;return t?.image?`<pop-comment-avatar size="xs" style="z-index: ${i}" data-color-key="${a}">
             <img src="${t.image}" alt="${t.name??`User`}" />
@@ -2368,7 +2374,7 @@ let e=require("@floating-ui/dom"),t=require("@preact/signals-core");function n(e
             </div>
           </span>
         </div>
-        <pop-comment-icon variant="add" theme="${r}" size="xs"></pop-comment-icon>
+        <pop-comment-icon variant="add" theme="neutral" size="xs"></pop-comment-icon>
       </div>
     `}};if(j([x(W)],yt.prototype,`gridStore`,void 0),customElements.get(`pop-widget`)||customElements.define(`pop-widget`,yt),typeof document<`u`){let e=`https://rsms.me/inter/inter.css`;if(!document.querySelector(`link[href="${e}"]`)){let t=document.createElement(`link`);t.rel=`stylesheet`,t.href=e,document.head.appendChild(t)}}
 //# sourceMappingURL=index.cjs.map