@telia-ace/widget-site 1.1.123-rc.2 → 1.1.123-rc.20
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/index.js +5 -3
- package/index.mjs +12 -10
- package/index.umd.js +5 -3
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class T{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var r;return((r=s.widget)==null?void 0:r.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const r=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t});i(r==null?void 0:r.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const $="1.1.123-rc.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class T{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var r;return((r=s.widget)==null?void 0:r.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const r=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t});i(r==null?void 0:r.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const $="1.1.123-rc.20";class z{constructor(t){this._site=t}storagePolicy(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("disallow-storage-key",{storageKey:t})})}getWidgets(){return this._site._widgets}version(){const t=$;return{widgets:this._site.getWidgetsVersions(),sites:t}}}class M{constructor(t,i){this.triggerType=t,this.condition=i,this.triggerType=t,this.condition=i}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const i=[];return this.condition.outputs.filter(e=>e.action.type==="render_widget"&&B(e.value,t)).forEach(e=>{let s={widgetId:""};try{s=JSON.parse(e.action.data)}catch{s={widgetId:""}}i.push(s.widgetId)}),i}}const B=(n,t)=>{if(n==="*"||n==="/*"||n===t)return!0;if(n.endsWith("/*")){const s=n.slice(0,-2);return t.startsWith(s)}return!1},W=(n,t)=>{const i=s=>`ace_${n.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[r,a])=>{const[d,c]=r.split("-");if(i(c)!=r)return s;try{const o=JSON.parse(a);s[c]=o.value}catch{return s}return s},{})},u="https://widgets.ace.teliacompany.net/v1",U="https://embed.webprovisions.io",H=()=>{if(typeof window<"u"){const n=history.pushState,t=history.replaceState;history.pushState=function(...i){n.apply(history,i),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...i){t.apply(history,i),window.dispatchEvent(new Event("locationchange"))}}};class y extends HTMLElement{constructor(){var t;super(),this._site=null,this._widgets={},this._loadedVersions={},this._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new z(this),this._environment=new T(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||u}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||U}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){H(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s;const{type:i,data:e}=t.data;if(i==="widget-minimize")this._widgets[e.widgetId].toggleExpand();else if(i==="widget-activated"){this._widgets[e.widgetId].executeMessageQueue();const r=this._widgets[e.widgetId];r&&(this._loadedVersions[e.widgetId]=e.version,this._environment.executePreloadedHandlers(((s=r.widget)==null?void 0:s.name)||""));try{const a=JSON.parse(e.storage),d=W(e.widgetId,a);typeof d.open=="boolean"&&(r.disableAnimations(),r.toggleExpand(d.open),setTimeout(()=>{r.enableAnimations()},600))}catch{console.warn("unable to parse widget storage")}}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,i,e){this.render()}async _loadSite(){var s;const i=await(await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(),e=location.hostname;if(!((i==null?void 0:i.hosts)||[]).includes(e)){console.warn(`the host "${e}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=i,this._site&&(this._site.triggers=this._site.triggers.map(r=>new M(r.triggerType,r.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async r=>{this.addWidgetEl(r.id)})}addWidgetEl(t){const i=`ace-widget_${t}`;let e=document.getElementById(i);e||(e=document.createElement("ace-widget"),e.id=i,e.widgetId=t,this.apiUrl!==u&&(e.apiUrl=this.apiUrl),document.body.appendChild(e)),this._widgets={...this._widgets,[t]:e}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=O(this._site);for(const[i,e]of Object.entries(this._widgets)){const s=t.find(r=>r.id===i);s&&!e.isActivated()?e.activate():!s&&e.isActivated()&&e.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",y);const O=n=>{const t=window.location.pathname;return n.triggers.reduce((e,s)=>(s.shouldActivate(t).forEach(a=>{const d=e.find(o=>o.id===a),c=((n==null?void 0:n.widgets)||[]).find(o=>o.id===a);!d&&c&&e.push({id:a})}),e),[])},g=(n,t,i)=>{n&&i.style.setProperty(t,n)},P=(n,t)=>{var i,e,s,r,a,d,c,o,l;g((i=n.colors)==null?void 0:i.primaryBackground,"--primary-background",t),g((e=n.colors)==null?void 0:e.textOnPrimaryBackground,"--text-on-primary-background",t),g((s=n.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),g((r=n.colors)==null?void 0:r.textOnSecondaryBackground,"--text-on-secondary-background",t),g((a=n.colors)==null?void 0:a.interactiveDestructiveBackground,"--destructive-color",t),g((d=n.colors)==null?void 0:d.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),g((c=n.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),g((o=n.colors)==null?void 0:o.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),g((l=n.colors)==null?void 0:l.focusColor,"--focus-color",t)},j=(n={})=>{const{content:t="",title:i,attributes:e=[]}=n;let s="";const r=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...e];return i&&(s=`<title>${i}</title>`),`<svg ${r.map(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},_=document.createElement("template");_.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
3
|
></span>`;const x=document.createElement("template");var f;const p=(f=document.querySelector("script[nonce]"))==null?void 0:f.getAttribute("nonce");x.innerHTML=`<style ${p?`nonce="${p}"`:""}>
|
|
4
4
|
:host {
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class A extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(C.content.cloneNode(!0)),this.shadow.appendChild(L.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&P(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,i=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(i){const o=document.createElement("img");return o.src=i,o.classList.add("trigger-icon"),o.alt="",o}const e={type:"Telia"},s=async o=>V,{type:r}=e;switch(r){case"Telia":{const o=await s();if(o){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=o.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,r,a,d,c,o,l,h;if(!(((d=(a=(r=(s=this.widget)==null?void 0:s.configuration)==null?void 0:r.branding)==null?void 0:a.other)==null?void 0:d.showButtonLabel)||!1))return null;const i=((h=(l=(o=(c=this.widget)==null?void 0:c.configuration)==null?void 0:o.branding)==null?void 0:l.other)==null?void 0:h.buttonLabelText)||"Widget trigger",e=document.createElement("button");return e.setAttribute("type","button"),e.setAttribute("aria-label",i),e.classList.add("trigger-label"),e.addEventListener("click",this._onClicked),e.innerHTML=i,e}render(){var s,r,a,d,c,o,l;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),i=this._renderButtonLabel();(r=t==null?void 0:t.querySelector(".trigger-label"))==null||r.remove(),t&&i&&t.prepend(i);const e=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");if(e){const h=((l=(o=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding)==null?void 0:o.other)==null?void 0:l.buttonLabelText)||"Widget trigger";e.classList.toggle("active",this.active),e.classList.toggle("rendered",this.loaded),e.addEventListener("click",this._onClicked),e.setAttribute("type","button"),e.setAttribute("aria-label",h),this.icon&&e.prepend(this.icon)}}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",A);window.customElements.get("ace-icon")||window.customElements.define("ace-icon",E);class N{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}setFullscreenMode(t){this.widgetEl.dispatch("set-fullscreen-mode",{value:t})}}const
|
|
212
|
+
</div>`;class A extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(C.content.cloneNode(!0)),this.shadow.appendChild(L.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&P(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,i=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(i){const o=document.createElement("img");return o.src=i,o.classList.add("trigger-icon"),o.alt="",o}const e={type:"Telia"},s=async o=>V,{type:r}=e;switch(r){case"Telia":{const o=await s();if(o){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=o.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,r,a,d,c,o,l,h;if(!(((d=(a=(r=(s=this.widget)==null?void 0:s.configuration)==null?void 0:r.branding)==null?void 0:a.other)==null?void 0:d.showButtonLabel)||!1))return null;const i=((h=(l=(o=(c=this.widget)==null?void 0:c.configuration)==null?void 0:o.branding)==null?void 0:l.other)==null?void 0:h.buttonLabelText)||"Widget trigger",e=document.createElement("button");return e.setAttribute("type","button"),e.setAttribute("aria-label",i),e.classList.add("trigger-label"),e.addEventListener("click",this._onClicked),e.innerHTML=i,e}render(){var s,r,a,d,c,o,l;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),i=this._renderButtonLabel();(r=t==null?void 0:t.querySelector(".trigger-label"))==null||r.remove(),t&&i&&t.prepend(i);const e=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");if(e){const h=((l=(o=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding)==null?void 0:o.other)==null?void 0:l.buttonLabelText)||"Widget trigger";e.classList.toggle("active",this.active),e.classList.toggle("rendered",this.loaded),e.addEventListener("click",this._onClicked),e.setAttribute("type","button"),e.setAttribute("aria-label",h),this.icon&&e.prepend(this.icon)}}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",A);window.customElements.get("ace-icon")||window.customElements.define("ace-icon",E);class N{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}setFullscreenMode(t){this.widgetEl.dispatch("set-fullscreen-mode",{value:t})}}const R="https://widgets.ace.teliacompany.net/v1",k=document.createElement("template");var v;const w=(v=document.querySelector("script[nonce]"))==null?void 0:v.getAttribute("nonce");k.innerHTML=`<style ${w?`nonce="${w}"`:""}>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -276,9 +276,11 @@ svg {
|
|
|
276
276
|
:host(.expanded) .widget-frame-container {
|
|
277
277
|
opacity: 1;
|
|
278
278
|
animation: slideUp 0.3s linear;
|
|
279
|
+
display: block;
|
|
279
280
|
}
|
|
280
281
|
|
|
281
282
|
:host(.hidden) .widget-frame-container {
|
|
282
283
|
animation: slideDown 0.3s linear;
|
|
284
|
+
display: none;
|
|
283
285
|
}
|
|
284
|
-
</style>`;const
|
|
286
|
+
</style>`;const I=document.createElement("template");I.innerHTML='<div class="widget-frame-container"></div>';class S extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new N(this),this.zIndex=-1,this.trigger=document.createElement("ace-trigger"),this.trigger.widgetId=this.widgetId,this.trigger.apiUrl=this.apiUrl,this.trigger.id=`ace-trigger_${this.widgetId}`,this.trigger.addEventListener("toggle",t=>{this.toggleExpand()}),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(k.content.cloneNode(!0)),this.shadow.appendChild(I.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl","expanded"]}get expanded(){return this.getAttribute("expanded")||"false"}set expanded(t){this.setAttribute("expanded",t),t==="false"&&this.classList.toggle("hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||R}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,i,e){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var i,e;((i=t.data)==null?void 0:i.type)==="widget-set-active"&&typeof((e=t.data.data)==null?void 0:e.active)=="boolean"&&(this.active=t.data.data.active)}),this.render()}isActivated(){return this.activated}disableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="0ms")}enableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="300ms")}_getContainerEl(){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(".widget-frame-container"))||null}async activate(){var i;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((i=window.ace)==null?void 0:i.applications)||[]).find(e=>e.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/widget/${t}`)).json()}dispatch(t,i={}){var s;const e={type:t,data:i};if(i.widgetId||(i.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(e);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(e,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var s;if(!((s=this.widget)!=null&&s.distributionName)||this.iframeEl||!this.widget.linked)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},i=document.createElement("iframe");Object.entries(t).forEach(([r,a])=>{i.style.setProperty(r,a)});const e=this.apiUrl.replace("/v1","").replace("/api","");i.src=`${e}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,i.title=this.getIFrameTitle(),this.iframeEl=i}getIFrameTitle(){var i,e;let t=(i=this.widget)==null?void 0:i.configuration;if(typeof t=="string")try{t=JSON.parse(t)}catch{t={}}return((e=t==null?void 0:t.texts)==null?void 0:e["iframe.title"])||"ACE Widget"}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){typeof t!="boolean"?this.expanded=this.isExpanded()?"false":"true":this.isExpanded()!==t&&(this.expanded=t?"true":"false"),this.dispatch("set-open",{value:this.isExpanded()}),this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var e,s;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("expanded"),this.classList.remove("hidden")):this.classList.remove("expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const i=this._getContainerEl();i&&i.childNodes.length===0&&i.appendChild(this.iframeEl),i&&this.zIndex!==-1&&(i.style.zIndex=this.zIndex.toString()),this.trigger&&((e=this.shadowRoot)==null?void 0:e.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.insertBefore(this.trigger,this.shadowRoot.firstChild))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",S);window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",A);exports.SiteComponent=y;exports.WidgetComponent=S;
|
package/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
class
|
|
1
|
+
class I {
|
|
2
2
|
constructor(t) {
|
|
3
3
|
this._api = t, this._bootstrapped = !1, this._widgetAPIHandlers = /* @__PURE__ */ new Map(), window.ace = window.ace || {
|
|
4
4
|
_c: [],
|
|
@@ -58,7 +58,7 @@ class k {
|
|
|
58
58
|
i(e.api);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
const S = "1.1.123-rc.
|
|
61
|
+
const S = "1.1.123-rc.20";
|
|
62
62
|
class T {
|
|
63
63
|
constructor(t) {
|
|
64
64
|
this._site = t;
|
|
@@ -147,7 +147,7 @@ const z = (n, t) => {
|
|
|
147
147
|
class W extends HTMLElement {
|
|
148
148
|
constructor() {
|
|
149
149
|
var t;
|
|
150
|
-
super(), this._site = null, this._widgets = {}, this._loadedVersions = {}, this._path = ((t = window == null ? void 0 : window.location) == null ? void 0 : t.pathname) || "", this._api = new T(this), this._environment = new
|
|
150
|
+
super(), this._site = null, this._widgets = {}, this._loadedVersions = {}, this._path = ((t = window == null ? void 0 : window.location) == null ? void 0 : t.pathname) || "", this._api = new T(this), this._environment = new I(this._api), this.routeChangeListener = () => {
|
|
151
151
|
this._path = window.location.pathname, this.render();
|
|
152
152
|
}, this.shadow = this.attachShadow({ mode: "open" });
|
|
153
153
|
}
|
|
@@ -753,19 +753,21 @@ A.innerHTML = `<style ${w ? `nonce="${w}"` : ""}>
|
|
|
753
753
|
:host(.expanded) .widget-frame-container {
|
|
754
754
|
opacity: 1;
|
|
755
755
|
animation: slideUp 0.3s linear;
|
|
756
|
+
display: block;
|
|
756
757
|
}
|
|
757
758
|
|
|
758
759
|
:host(.hidden) .widget-frame-container {
|
|
759
760
|
animation: slideDown 0.3s linear;
|
|
761
|
+
display: none;
|
|
760
762
|
}
|
|
761
763
|
</style>`;
|
|
762
|
-
const
|
|
763
|
-
|
|
764
|
-
class
|
|
764
|
+
const k = document.createElement("template");
|
|
765
|
+
k.innerHTML = '<div class="widget-frame-container"></div>';
|
|
766
|
+
class R extends HTMLElement {
|
|
765
767
|
constructor() {
|
|
766
768
|
super(), this.widget = null, this.activated = !1, this.active = !1, this.iframeEl = null, this.trigger = null, this._messageQueue = [], this.api = new j(this), this.zIndex = -1, this.trigger = document.createElement("ace-trigger"), this.trigger.widgetId = this.widgetId, this.trigger.apiUrl = this.apiUrl, this.trigger.id = `ace-trigger_${this.widgetId}`, this.trigger.addEventListener("toggle", (t) => {
|
|
767
769
|
this.toggleExpand();
|
|
768
|
-
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(A.content.cloneNode(!0)), this.shadow.appendChild(
|
|
770
|
+
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(A.content.cloneNode(!0)), this.shadow.appendChild(k.content.cloneNode(!0));
|
|
769
771
|
}
|
|
770
772
|
static get observedAttributes() {
|
|
771
773
|
return ["widgetid", "apiurl", "expanded"];
|
|
@@ -902,12 +904,12 @@ class q extends HTMLElement {
|
|
|
902
904
|
const t = this.activated ? "block" : "none";
|
|
903
905
|
this.iframeEl.style.setProperty("display", t), this.activated ? this.classList.add("activated") : this.classList.remove("activated");
|
|
904
906
|
const i = this._getContainerEl();
|
|
905
|
-
i && i.childNodes.length === 0 && i.appendChild(this.iframeEl), i && this.zIndex !== -1 && (i.style.zIndex = this.zIndex.toString()), this.trigger && ((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("ace-trigger").length) === 0 && ((s = this.shadowRoot) == null || s.
|
|
907
|
+
i && i.childNodes.length === 0 && i.appendChild(this.iframeEl), i && this.zIndex !== -1 && (i.style.zIndex = this.zIndex.toString()), this.trigger && ((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("ace-trigger").length) === 0 && ((s = this.shadowRoot) == null || s.insertBefore(this.trigger, this.shadowRoot.firstChild));
|
|
906
908
|
}
|
|
907
909
|
}
|
|
908
|
-
window.customElements.get("ace-widget") || window.customElements.define("ace-widget",
|
|
910
|
+
window.customElements.get("ace-widget") || window.customElements.define("ace-widget", R);
|
|
909
911
|
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", L);
|
|
910
912
|
export {
|
|
911
913
|
W as SiteComponent,
|
|
912
|
-
|
|
914
|
+
R as WidgetComponent
|
|
913
915
|
};
|
package/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(h,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(h=typeof globalThis<"u"?globalThis:h||self,u(h["@telia-ace/widget-site"]={}))})(this,(function(h){"use strict";var S,T,$;class u{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const n=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t});i(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const z="1.1.123-rc.
|
|
1
|
+
(function(h,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(h=typeof globalThis<"u"?globalThis:h||self,u(h["@telia-ace/widget-site"]={}))})(this,(function(h){"use strict";var S,T,$;class u{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const n=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t});i(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const z="1.1.123-rc.20";class M{constructor(t){this._site=t}storagePolicy(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("disallow-storage-key",{storageKey:t})})}getWidgets(){return this._site._widgets}version(){const t=z;return{widgets:this._site.getWidgetsVersions(),sites:t}}}class B{constructor(t,i){this.triggerType=t,this.condition=i,this.triggerType=t,this.condition=i}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const i=[];return this.condition.outputs.filter(e=>e.action.type==="render_widget"&&W(e.value,t)).forEach(e=>{let s={widgetId:""};try{s=JSON.parse(e.action.data)}catch{s={widgetId:""}}i.push(s.widgetId)}),i}}const W=(r,t)=>{if(r==="*"||r==="/*"||r===t)return!0;if(r.endsWith("/*")){const s=r.slice(0,-2);return t.startsWith(s)}return!1},U=(r,t)=>{const i=s=>`ace_${r.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[n,a])=>{const[d,c]=n.split("-");if(i(c)!=n)return s;try{const o=JSON.parse(a);s[c]=o.value}catch{return s}return s},{})},m="https://widgets.ace.teliacompany.net/v1",H="https://embed.webprovisions.io",O=()=>{if(typeof window<"u"){const r=history.pushState,t=history.replaceState;history.pushState=function(...i){r.apply(history,i),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...i){t.apply(history,i),window.dispatchEvent(new Event("locationchange"))}}};class w extends HTMLElement{constructor(){var t;super(),this._site=null,this._widgets={},this._loadedVersions={},this._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new M(this),this._environment=new u(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||m}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||H}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){O(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s;const{type:i,data:e}=t.data;if(i==="widget-minimize")this._widgets[e.widgetId].toggleExpand();else if(i==="widget-activated"){this._widgets[e.widgetId].executeMessageQueue();const n=this._widgets[e.widgetId];n&&(this._loadedVersions[e.widgetId]=e.version,this._environment.executePreloadedHandlers(((s=n.widget)==null?void 0:s.name)||""));try{const a=JSON.parse(e.storage),d=U(e.widgetId,a);typeof d.open=="boolean"&&(n.disableAnimations(),n.toggleExpand(d.open),setTimeout(()=>{n.enableAnimations()},600))}catch{console.warn("unable to parse widget storage")}}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,i,e){this.render()}async _loadSite(){var s;const i=await(await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(),e=location.hostname;if(!((i==null?void 0:i.hosts)||[]).includes(e)){console.warn(`the host "${e}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=i,this._site&&(this._site.triggers=this._site.triggers.map(n=>new B(n.triggerType,n.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.id)})}addWidgetEl(t){const i=`ace-widget_${t}`;let e=document.getElementById(i);e||(e=document.createElement("ace-widget"),e.id=i,e.widgetId=t,this.apiUrl!==m&&(e.apiUrl=this.apiUrl),document.body.appendChild(e)),this._widgets={...this._widgets,[t]:e}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=P(this._site);for(const[i,e]of Object.entries(this._widgets)){const s=t.find(n=>n.id===i);s&&!e.isActivated()?e.activate():!s&&e.isActivated()&&e.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",w);const P=r=>{const t=window.location.pathname;return r.triggers.reduce((e,s)=>(s.shouldActivate(t).forEach(a=>{const d=e.find(o=>o.id===a),c=((r==null?void 0:r.widgets)||[]).find(o=>o.id===a);!d&&c&&e.push({id:a})}),e),[])},g=(r,t,i)=>{r&&i.style.setProperty(t,r)},j=(r,t)=>{var i,e,s,n,a,d,c,o,l;g((i=r.colors)==null?void 0:i.primaryBackground,"--primary-background",t),g((e=r.colors)==null?void 0:e.textOnPrimaryBackground,"--text-on-primary-background",t),g((s=r.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),g((n=r.colors)==null?void 0:n.textOnSecondaryBackground,"--text-on-secondary-background",t),g((a=r.colors)==null?void 0:a.interactiveDestructiveBackground,"--destructive-color",t),g((d=r.colors)==null?void 0:d.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),g((c=r.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),g((o=r.colors)==null?void 0:o.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),g((l=r.colors)==null?void 0:l.focusColor,"--focus-color",t)},V=(r={})=>{const{content:t="",title:i,attributes:e=[]}=r;let s="";const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...e];return i&&(s=`<title>${i}</title>`),`<svg ${n.map(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},f=document.createElement("template");f.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
3
|
></span>`;const b=document.createElement("template"),v=(S=document.querySelector("script[nonce]"))==null?void 0:S.getAttribute("nonce");b.innerHTML=`<style ${v?`nonce="${v}"`:""}>
|
|
4
4
|
:host {
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class C extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(_.content.cloneNode(!0)),this.shadow.appendChild(E.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&j(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,i=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(i){const o=document.createElement("img");return o.src=i,o.classList.add("trigger-icon"),o.alt="",o}const e={type:"Telia"},s=async o=>N,{type:n}=e;switch(n){case"Telia":{const o=await s();if(o){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=o.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,n,a,d,c,o,l,p;if(!(((d=(a=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:a.other)==null?void 0:d.showButtonLabel)||!1))return null;const i=((p=(l=(o=(c=this.widget)==null?void 0:c.configuration)==null?void 0:o.branding)==null?void 0:l.other)==null?void 0:p.buttonLabelText)||"Widget trigger",e=document.createElement("button");return e.setAttribute("type","button"),e.setAttribute("aria-label",i),e.classList.add("trigger-label"),e.addEventListener("click",this._onClicked),e.innerHTML=i,e}render(){var s,n,a,d,c,o,l;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),i=this._renderButtonLabel();(n=t==null?void 0:t.querySelector(".trigger-label"))==null||n.remove(),t&&i&&t.prepend(i);const e=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");if(e){const p=((l=(o=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding)==null?void 0:o.other)==null?void 0:l.buttonLabelText)||"Widget trigger";e.classList.toggle("active",this.active),e.classList.toggle("rendered",this.loaded),e.addEventListener("click",this._onClicked),e.setAttribute("type","button"),e.setAttribute("aria-label",p),this.icon&&e.prepend(this.icon)}}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",C),window.customElements.get("ace-icon")||window.customElements.define("ace-icon",y);class
|
|
212
|
+
</div>`;class C extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(_.content.cloneNode(!0)),this.shadow.appendChild(E.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&j(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,i=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(i){const o=document.createElement("img");return o.src=i,o.classList.add("trigger-icon"),o.alt="",o}const e={type:"Telia"},s=async o=>N,{type:n}=e;switch(n){case"Telia":{const o=await s();if(o){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=o.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,n,a,d,c,o,l,p;if(!(((d=(a=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:a.other)==null?void 0:d.showButtonLabel)||!1))return null;const i=((p=(l=(o=(c=this.widget)==null?void 0:c.configuration)==null?void 0:o.branding)==null?void 0:l.other)==null?void 0:p.buttonLabelText)||"Widget trigger",e=document.createElement("button");return e.setAttribute("type","button"),e.setAttribute("aria-label",i),e.classList.add("trigger-label"),e.addEventListener("click",this._onClicked),e.innerHTML=i,e}render(){var s,n,a,d,c,o,l;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),i=this._renderButtonLabel();(n=t==null?void 0:t.querySelector(".trigger-label"))==null||n.remove(),t&&i&&t.prepend(i);const e=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");if(e){const p=((l=(o=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding)==null?void 0:o.other)==null?void 0:l.buttonLabelText)||"Widget trigger";e.classList.toggle("active",this.active),e.classList.toggle("rendered",this.loaded),e.addEventListener("click",this._onClicked),e.setAttribute("type","button"),e.setAttribute("aria-label",p),this.icon&&e.prepend(this.icon)}}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",C),window.customElements.get("ace-icon")||window.customElements.define("ace-icon",y);class R{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}setFullscreenMode(t){this.widgetEl.dispatch("set-fullscreen-mode",{value:t})}}const q="https://widgets.ace.teliacompany.net/v1",L=document.createElement("template"),A=($=document.querySelector("script[nonce]"))==null?void 0:$.getAttribute("nonce");L.innerHTML=`<style ${A?`nonce="${A}"`:""}>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -276,9 +276,11 @@ svg {
|
|
|
276
276
|
:host(.expanded) .widget-frame-container {
|
|
277
277
|
opacity: 1;
|
|
278
278
|
animation: slideUp 0.3s linear;
|
|
279
|
+
display: block;
|
|
279
280
|
}
|
|
280
281
|
|
|
281
282
|
:host(.hidden) .widget-frame-container {
|
|
282
283
|
animation: slideDown 0.3s linear;
|
|
284
|
+
display: none;
|
|
283
285
|
}
|
|
284
|
-
</style>`;const
|
|
286
|
+
</style>`;const k=document.createElement("template");k.innerHTML='<div class="widget-frame-container"></div>';class I extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new R(this),this.zIndex=-1,this.trigger=document.createElement("ace-trigger"),this.trigger.widgetId=this.widgetId,this.trigger.apiUrl=this.apiUrl,this.trigger.id=`ace-trigger_${this.widgetId}`,this.trigger.addEventListener("toggle",t=>{this.toggleExpand()}),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(L.content.cloneNode(!0)),this.shadow.appendChild(k.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl","expanded"]}get expanded(){return this.getAttribute("expanded")||"false"}set expanded(t){this.setAttribute("expanded",t),t==="false"&&this.classList.toggle("hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||q}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,i,e){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var i,e;((i=t.data)==null?void 0:i.type)==="widget-set-active"&&typeof((e=t.data.data)==null?void 0:e.active)=="boolean"&&(this.active=t.data.data.active)}),this.render()}isActivated(){return this.activated}disableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="0ms")}enableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="300ms")}_getContainerEl(){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(".widget-frame-container"))||null}async activate(){var i;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((i=window.ace)==null?void 0:i.applications)||[]).find(e=>e.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/widget/${t}`)).json()}dispatch(t,i={}){var s;const e={type:t,data:i};if(i.widgetId||(i.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(e);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(e,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var s;if(!((s=this.widget)!=null&&s.distributionName)||this.iframeEl||!this.widget.linked)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},i=document.createElement("iframe");Object.entries(t).forEach(([n,a])=>{i.style.setProperty(n,a)});const e=this.apiUrl.replace("/v1","").replace("/api","");i.src=`${e}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,i.title=this.getIFrameTitle(),this.iframeEl=i}getIFrameTitle(){var i,e;let t=(i=this.widget)==null?void 0:i.configuration;if(typeof t=="string")try{t=JSON.parse(t)}catch{t={}}return((e=t==null?void 0:t.texts)==null?void 0:e["iframe.title"])||"ACE Widget"}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){typeof t!="boolean"?this.expanded=this.isExpanded()?"false":"true":this.isExpanded()!==t&&(this.expanded=t?"true":"false"),this.dispatch("set-open",{value:this.isExpanded()}),this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var e,s;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("expanded"),this.classList.remove("hidden")):this.classList.remove("expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const i=this._getContainerEl();i&&i.childNodes.length===0&&i.appendChild(this.iframeEl),i&&this.zIndex!==-1&&(i.style.zIndex=this.zIndex.toString()),this.trigger&&((e=this.shadowRoot)==null?void 0:e.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.insertBefore(this.trigger,this.shadowRoot.firstChild))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",I),window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",C),h.SiteComponent=w,h.WidgetComponent=I,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
|