@popgrids/embed 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1283,7 +1283,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
1283
1283
  </div>
1284
1284
  <div class="feed__footer"></div>
1285
1285
  </div>
1286
- `}};I([S(E)],q.prototype,`gridStore`,void 0),customElements.get(`pop-feed`)||customElements.define(`pop-feed`,q);function De(){return typeof window<`u`}function J(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function Oe(e){return De()?e instanceof Element||e instanceof J(e).Element:!1}var ke=/transform|translate|scale|rotate|perspective|filter/,Ae=/paint|layout|strict|content/,Y=e=>!!e&&e!==`none`,X;function je(e){let t=Oe(e)?Ne(e):e;return Y(t.transform)||Y(t.translate)||Y(t.scale)||Y(t.rotate)||Y(t.perspective)||!Me()&&(Y(t.backdropFilter)||Y(t.filter))||ke.test(t.willChange||``)||Ae.test(t.contain||``)}function Me(){return X??=typeof CSS<`u`&&CSS.supports&&CSS.supports(`-webkit-backdrop-filter`,`none`),X}function Ne(e){return J(e).getComputedStyle(e)}function Pe(e){return Fe(e)}function Z(e){return e.assignedSlot?e.assignedSlot:e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentNode}function Fe(e){for(let t=e;t;t=Z(t))if(t instanceof Element&&getComputedStyle(t).display===`none`)return null;for(let t=Z(e);t;t=Z(t)){if(!(t instanceof Element))continue;let e=getComputedStyle(t);if(e.display!==`contents`&&(e.position!==`static`||je(e)||t.tagName===`BODY`))return t}return null}var Q=P(`
1286
+ `}};I([S(E)],q.prototype,`gridStore`,void 0),customElements.get(`pop-feed`)||customElements.define(`pop-feed`,q);function De(){return typeof window<`u`}function J(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function Oe(e){return De()?e instanceof Element||e instanceof J(e).Element:!1}var ke=/transform|translate|scale|rotate|perspective|filter/,Ae=/paint|layout|strict|content/,Y=e=>!!e&&e!==`none`,X;function je(e){let t=Oe(e)?Ne(e):e;return Y(t.transform)||Y(t.translate)||Y(t.scale)||Y(t.rotate)||Y(t.perspective)||!Me()&&(Y(t.backdropFilter)||Y(t.filter))||ke.test(t.willChange||``)||Ae.test(t.contain||``)}function Me(){return X??=typeof CSS<`u`&&CSS.supports&&CSS.supports(`-webkit-backdrop-filter`,`none`),X}function Ne(e){return J(e).getComputedStyle(e)}function Pe(e){return Fe(e)}function Z(e){return e.assignedSlot?e.assignedSlot:e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentNode}function Fe(e){for(let t=e;t;t=Z(t))if(t instanceof Element&&getComputedStyle(t).display===`none`)return null;for(let t=Z(e);t;t=Z(t)){if(!(t instanceof Element))continue;let e=getComputedStyle(t);if(e.display!==`contents`&&(e.position!==`static`||je(e)||t.tagName===`BODY`))return t}return null}var Q=`https://www.popgrids.io`,Ie=P(`
1287
1287
  :host {
1288
1288
  display: block;
1289
1289
  position: relative;
@@ -1307,12 +1307,12 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
1307
1307
  .grid--align-end {
1308
1308
  justify-content: flex-end;
1309
1309
  }
1310
- `),Ie=class extends F{constructor(...e){super(...e),this._initialized=!1}get styleSheets(){return[Q]}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`)??``,n=this.getAttribute(`data-page-url`)??this.getAttribute(`page-url`)??location.href,r=this.getAttribute(`data-id`);this._store=new E({apiUrl:t,publicKey:e,pageUrl:n,externalId:r}),x(this,this._store),super.connectedCallback(),this._store.load().then(n=>{n&&v(t,e)})}disconnectedCallback(){this._floatingCleanup?.(),this._store.destroy(),ne(this),super.disconnectedCallback()}setupEffects(){this.addEffect(()=>{let e=this._store.grid.value,t=this.getElement(`.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 n=this.getElement(`pop-widget`),r=this.getElement(`pop-feed`);if(!n||!r)return;let i=this._store.grid.value;if(!i)return;let a=[];a=[(0,t.offset)({mainAxis:i.position===`down`?-16:-54,crossAxis:-18})],(!i.position||i.position===`auto`)&&a.push((0,t.flip)({fallbackPlacements:[`bottom-start`,`top-start`],fallbackStrategy:`bestFit`,padding:16}));let o=e=>t.platform.getOffsetParent(e,Pe),s=()=>{(0,t.computePosition)(n,r,{placement:i.position===`down`?`bottom-start`:`top-start`,middleware:a,strategy:`fixed`,platform:{...t.platform,getOffsetParent:o}}).then(({x:e,y:t,placement:n})=>{r.setAttribute(`data-current-placement`,n),Object.assign(r.style,{left:`${e}px`,top:`${t}px`})})};this._floatingCleanup=(0,t.autoUpdate)(n,r,s)})}getTemplate(){return`
1310
+ `),Le=class extends F{constructor(...e){super(...e),this._initialized=!1}get styleSheets(){return[Ie]}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`)??Q,n=this.getAttribute(`data-page-url`)??this.getAttribute(`page-url`)??location.href,r=this.getAttribute(`data-id`);this._store=new E({apiUrl:t,publicKey:e,pageUrl:n,externalId:r}),x(this,this._store),super.connectedCallback(),this._store.load().then(n=>{n&&v(t,e)})}disconnectedCallback(){this._floatingCleanup?.(),this._store.destroy(),ne(this),super.disconnectedCallback()}setupEffects(){this.addEffect(()=>{let e=this._store.grid.value,t=this.getElement(`.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 n=this.getElement(`pop-widget`),r=this.getElement(`pop-feed`);if(!n||!r)return;let i=this._store.grid.value;if(!i)return;let a=[];a=[(0,t.offset)({mainAxis:i.position===`down`?-16:-54,crossAxis:-18})],(!i.position||i.position===`auto`)&&a.push((0,t.flip)({fallbackPlacements:[`bottom-start`,`top-start`],fallbackStrategy:`bestFit`,padding:16}));let o=e=>t.platform.getOffsetParent(e,Pe),s=()=>{(0,t.computePosition)(n,r,{placement:i.position===`down`?`bottom-start`:`top-start`,middleware:a,strategy:`fixed`,platform:{...t.platform,getOffsetParent:o}}).then(({x:e,y:t,placement:n})=>{r.setAttribute(`data-current-placement`,n),Object.assign(r.style,{left:`${e}px`,top:`${t}px`})})};this._floatingCleanup=(0,t.autoUpdate)(n,r,s)})}getTemplate(){return`
1311
1311
  <div class="grid">
1312
1312
  <pop-widget></pop-widget>
1313
1313
  <pop-feed></pop-feed>
1314
1314
  </div>
1315
- `}};customElements.get(`pop-grid`)||customElements.define(`pop-grid`,Ie);var Le=P(`
1315
+ `}};customElements.get(`pop-grid`)||customElements.define(`pop-grid`,Le);var Re=P(`
1316
1316
  :host {
1317
1317
  --error-badge-bg: #fef2f2;
1318
1318
  --error-badge-text: #991b1b;
@@ -1445,7 +1445,7 @@ let e=require("@preact/signals-core"),t=require("@floating-ui/dom");var n=`/embe
1445
1445
  width: calc(100% - calc(var(--count-border-size) * 2));
1446
1446
  z-index: 20;
1447
1447
  }
1448
- `),$=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[Le]}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;return`
1448
+ `),$=class extends F{constructor(...e){super(...e),this.events={click:`onClick`}}get styleSheets(){return[Re]}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;return`
1449
1449
  <div class="widget">
1450
1450
  ${e.map((t,n)=>{let r=e.length+n,i=t?.id??t?.name??``;return t?.image?`<pop-comment-avatar size="xs" style="z-index: ${r}" data-color-key="${i}">
1451
1451
  <img src="${t.image}" alt="${t.name??`User`}" />