@telia-ace/widget-site 1.1.120-rc.20 → 1.1.120-rc.21
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 +3 -3
- package/index.mjs +70 -59
- package/index.umd.js +3 -3
- package/package.json +1 -1
- package/widget.component.d.ts +1 -0
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(e,i){window.ace._w.push([e,i])},configure:function(e){window.ace._c.push(e)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([e,i])=>{this.widget(e,i)}),((t==null?void 0:t._c)||[]).forEach(e=>{this.configure(e)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(i=>{i()}),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,e){const i=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!i){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});e(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}const $="1.1.120-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(e,i){window.ace._w.push([e,i])},configure:function(e){window.ace._c.push(e)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([e,i])=>{this.widget(e,i)}),((t==null?void 0:t._c)||[]).forEach(e=>{this.configure(e)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(i=>{i()}),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,e){const i=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!i){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});e(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}const $="1.1.120-rc.21";class z{constructor(t){this._site=t}storagePolicy(t){Object.entries(this._site._widgets).forEach(([e,i])=>{i.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([e,i])=>{i.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,e){this.triggerType=t,this.condition=e,this.triggerType=t,this.condition=e}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const e=[];return this.condition.outputs.filter(i=>i.action.type==="render_widget"&&B(i.value,t)).forEach(i=>{let s={widgetId:""};try{s=JSON.parse(i.action.data)}catch{s={widgetId:""}}e.push(s.widgetId)}),e}}const B=(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 e=s=>`ace_${r.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[n,a])=>{const[d,c]=n.split("-");if(e(c)!=n)return s;try{const o=JSON.parse(a);s[c]=o.value}catch{return s}return s},{})},u="https://widgets.ace.teliacompany.net",W="https://embed.webprovisions.io",H=()=>{if(typeof window<"u"){const r=history.pushState,t=history.replaceState;history.pushState=function(...e){r.apply(history,e),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...e){t.apply(history,e),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")||W}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:e,data:i}=t.data;if(e==="widget-minimize")this._widgets[i.widgetId].toggleExpand();else if(e==="widget-activated"){this._widgets[i.widgetId].executeMessageQueue();const n=this._widgets[i.widgetId];n&&(this._loadedVersions[i.widgetId]=i.version,this._environment.executePreloadedHandlers(((s=n.widget)==null?void 0:s.name)||""));try{const a=JSON.parse(i.storage),d=U(i.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,e,i){this.render()}async _loadSite(){var s;const e=await(await fetch(`${this.apiUrl}/api/site/${this.siteId}`)).json(),i=location.hostname;if(!((e==null?void 0:e.hosts)||[]).includes(i)){console.warn(`the host "${i}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=e,this._site&&(this._site.triggers=this._site.triggers.map(n=>new M(n.triggerType,n.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.id)})}addWidgetEl(t){const e=`ace-widget_${t}`;let i=document.getElementById(e);i||(i=document.createElement("ace-widget"),i.id=e,i.widgetId=t,this.apiUrl!==u&&(i.apiUrl=this.apiUrl),document.body.appendChild(i)),this._widgets={...this._widgets,[t]:i}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=O(this._site);for(const[e,i]of Object.entries(this._widgets)){const s=t.find(n=>n.id===e);s&&!i.isActivated()?i.activate():!s&&i.isActivated()&&i.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",y);const O=r=>{const t=window.location.pathname;return r.triggers.reduce((i,s)=>(s.shouldActivate(t).forEach(a=>{const d=i.find(o=>o.id===a),c=((r==null?void 0:r.widgets)||[]).find(o=>o.id===a);!d&&c&&i.push({id:a})}),i),[])},g=(r,t,e)=>{r&&e.style.setProperty(t,r)},P=(r,t)=>{var e,i,s,n,a,d,c,o,l;g((e=r.colors)==null?void 0:e.primaryBackground,"--primary-background",t),g((i=r.colors)==null?void 0:i.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)},j=(r={})=>{const{content:t="",title:e,attributes:i=[]}=r;let s="";const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...i];return e&&(s=`<title>${e}</title>`),`<svg ${n.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,e,i){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,e;(e=(t=this.widget)==null?void 0:t.configuration)!=null&&e.branding&&P(this.widget.configuration.branding,this)}async _loadWidget(t){const i=await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json(),s=JSON.parse(i.configuration);return{...i,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,e=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(e){const o=document.createElement("img");return o.src=e,o.classList.add("trigger-icon"),o.alt="",o}const i={type:"Telia"},s=async o=>V,{type:n}=i;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,h;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 e=((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)||"",i=document.createElement("button");return i.setAttribute("label",e),i.classList.add("trigger-label"),i.addEventListener("click",this._onClicked),i.innerHTML=e,i}render(){var s,n,a;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"),e=this._renderButtonLabel();(n=t==null?void 0:t.querySelector(".trigger-label"))==null||n.remove(),t&&e&&t.prepend(e);const i=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");i&&(i.classList.toggle("active",this.active),i.classList.toggle("rendered",this.loaded),i.addEventListener("click",this._onClicked),this.icon&&i.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 q="https://widgets.ace.teliacompany.net",
|
|
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,e,i){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,e;(e=(t=this.widget)==null?void 0:t.configuration)!=null&&e.branding&&P(this.widget.configuration.branding,this)}async _loadWidget(t){const i=await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json(),s=JSON.parse(i.configuration);return{...i,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,e=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(e){const o=document.createElement("img");return o.src=e,o.classList.add("trigger-icon"),o.alt="",o}const i={type:"Telia"},s=async o=>V,{type:n}=i;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,h;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 e=((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)||"",i=document.createElement("button");return i.setAttribute("label",e),i.classList.add("trigger-label"),i.addEventListener("click",this._onClicked),i.innerHTML=e,i}render(){var s,n,a;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"),e=this._renderButtonLabel();(n=t==null?void 0:t.querySelector(".trigger-label"))==null||n.remove(),t&&e&&t.prepend(e);const i=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");i&&(i.classList.toggle("active",this.active),i.classList.toggle("rendered",this.loaded),i.addEventListener("click",this._onClicked),this.icon&&i.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 q="https://widgets.ace.teliacompany.net",I=document.createElement("template");var v;const w=(v=document.querySelector("script[nonce]"))==null?void 0:v.getAttribute("nonce");I.innerHTML=`<style ${w?`nonce="${w}"`:""}>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -281,4 +281,4 @@ svg {
|
|
|
281
281
|
:host(.hidden) .widget-frame-container {
|
|
282
282
|
animation: slideDown 0.3s linear;
|
|
283
283
|
}
|
|
284
|
-
</style>`;const
|
|
284
|
+
</style>`;const k=document.createElement("template");k.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(I.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,e,i){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var e,i;((e=t.data)==null?void 0:e.type)==="widget-set-active"&&typeof((i=t.data.data)==null?void 0:i.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 e;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((e=window.ace)==null?void 0:e.applications)||[]).find(i=>i.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json()}dispatch(t,e={}){var s;const i={type:t,data:e};if(e.widgetId||(e.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(i);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(i,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var i;if(!((i=this.widget)!=null&&i.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"},e=document.createElement("iframe");Object.entries(t).forEach(([s,n])=>{e.style.setProperty(s,n)}),e.src=`${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,e.title=this.getIFrameTitle(),this.iframeEl=e}getIFrameTitle(){var e,i;let t=(e=this.widget)==null?void 0:e.configuration;if(typeof t=="string")try{t=JSON.parse(t)}catch{t={}}return((i=t==null?void 0:t.texts)==null?void 0:i["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 i,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 e=this._getContainerEl();e&&e.childNodes.length===0&&e.appendChild(this.iframeEl),e&&this.zIndex!==-1&&(e.style.zIndex=this.zIndex.toString()),this.trigger&&((i=this.shadowRoot)==null?void 0:i.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.appendChild(this.trigger))}}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 k {
|
|
2
2
|
constructor(t) {
|
|
3
3
|
this._api = t, this._bootstrapped = !1, this._widgetAPIHandlers = /* @__PURE__ */ new Map(), window.ace = window.ace || {
|
|
4
4
|
_c: [],
|
|
@@ -38,27 +38,27 @@ class I {
|
|
|
38
38
|
widget(t, e) {
|
|
39
39
|
const i = Object.values(this._api.getWidgets()).find(
|
|
40
40
|
(s) => {
|
|
41
|
-
var
|
|
42
|
-
return ((
|
|
41
|
+
var r;
|
|
42
|
+
return ((r = s.widget) == null ? void 0 : r.name) === t;
|
|
43
43
|
}
|
|
44
44
|
);
|
|
45
45
|
if (!i) {
|
|
46
46
|
const s = this._widgetAPIHandlers.get(t) || [];
|
|
47
47
|
s.push(() => {
|
|
48
|
-
const
|
|
48
|
+
const r = Object.values(this._api.getWidgets()).find(
|
|
49
49
|
(a) => {
|
|
50
50
|
var d;
|
|
51
51
|
return ((d = a.widget) == null ? void 0 : d.name) === t;
|
|
52
52
|
}
|
|
53
53
|
);
|
|
54
|
-
e(
|
|
54
|
+
e(r == null ? void 0 : r.api);
|
|
55
55
|
}), this._widgetAPIHandlers.set(t, s);
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
58
|
e(i.api);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
const S = "1.1.120-rc.
|
|
61
|
+
const S = "1.1.120-rc.21";
|
|
62
62
|
class T {
|
|
63
63
|
constructor(t) {
|
|
64
64
|
this._site = t;
|
|
@@ -109,20 +109,20 @@ class $ {
|
|
|
109
109
|
}), e;
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
|
-
const z = (
|
|
113
|
-
if (
|
|
112
|
+
const z = (n, t) => {
|
|
113
|
+
if (n === "*" || n === "/*" || n === t)
|
|
114
114
|
return !0;
|
|
115
|
-
if (
|
|
116
|
-
const s =
|
|
115
|
+
if (n.endsWith("/*")) {
|
|
116
|
+
const s = n.slice(0, -2);
|
|
117
117
|
return t.startsWith(s);
|
|
118
118
|
}
|
|
119
119
|
return !1;
|
|
120
|
-
}, M = (
|
|
121
|
-
const e = (s) => `ace_${
|
|
120
|
+
}, M = (n, t) => {
|
|
121
|
+
const e = (s) => `ace_${n.substring(0, 7)}-${s}`;
|
|
122
122
|
return Object.entries(t).reduce(
|
|
123
|
-
(s, [
|
|
124
|
-
const [d, c] =
|
|
125
|
-
if (e(c) !=
|
|
123
|
+
(s, [r, a]) => {
|
|
124
|
+
const [d, c] = r.split("-");
|
|
125
|
+
if (e(c) != r)
|
|
126
126
|
return s;
|
|
127
127
|
try {
|
|
128
128
|
const o = JSON.parse(a);
|
|
@@ -136,9 +136,9 @@ const z = (r, t) => {
|
|
|
136
136
|
);
|
|
137
137
|
}, u = "https://widgets.ace.teliacompany.net", B = "https://embed.webprovisions.io", U = () => {
|
|
138
138
|
if (typeof window < "u") {
|
|
139
|
-
const
|
|
139
|
+
const n = history.pushState, t = history.replaceState;
|
|
140
140
|
history.pushState = function(...e) {
|
|
141
|
-
|
|
141
|
+
n.apply(history, e), window.dispatchEvent(new Event("locationchange"));
|
|
142
142
|
}, history.replaceState = function(...e) {
|
|
143
143
|
t.apply(history, e), window.dispatchEvent(new Event("locationchange"));
|
|
144
144
|
};
|
|
@@ -147,7 +147,7 @@ const z = (r, t) => {
|
|
|
147
147
|
class H 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 k(this._api), this.routeChangeListener = () => {
|
|
151
151
|
this._path = window.location.pathname, this.render();
|
|
152
152
|
}, this.shadow = this.attachShadow({ mode: "open" });
|
|
153
153
|
}
|
|
@@ -180,14 +180,14 @@ class H extends HTMLElement {
|
|
|
180
180
|
this._widgets[i.widgetId].toggleExpand();
|
|
181
181
|
else if (e === "widget-activated") {
|
|
182
182
|
this._widgets[i.widgetId].executeMessageQueue();
|
|
183
|
-
const
|
|
184
|
-
|
|
185
|
-
((s =
|
|
183
|
+
const r = this._widgets[i.widgetId];
|
|
184
|
+
r && (this._loadedVersions[i.widgetId] = i.version, this._environment.executePreloadedHandlers(
|
|
185
|
+
((s = r.widget) == null ? void 0 : s.name) || ""
|
|
186
186
|
));
|
|
187
187
|
try {
|
|
188
188
|
const a = JSON.parse(i.storage), d = M(i.widgetId, a);
|
|
189
|
-
typeof d.open == "boolean" && (
|
|
190
|
-
|
|
189
|
+
typeof d.open == "boolean" && (r.disableAnimations(), r.toggleExpand(d.open), setTimeout(() => {
|
|
190
|
+
r.enableAnimations();
|
|
191
191
|
}, 600));
|
|
192
192
|
} catch {
|
|
193
193
|
console.warn("unable to parse widget storage");
|
|
@@ -211,9 +211,9 @@ class H extends HTMLElement {
|
|
|
211
211
|
return;
|
|
212
212
|
}
|
|
213
213
|
this._site = e, this._site && (this._site.triggers = this._site.triggers.map(
|
|
214
|
-
(
|
|
215
|
-
)), (((s = this._site) == null ? void 0 : s.widgets) || []).forEach(async (
|
|
216
|
-
this.addWidgetEl(
|
|
214
|
+
(r) => new $(r.triggerType, r.condition)
|
|
215
|
+
)), (((s = this._site) == null ? void 0 : s.widgets) || []).forEach(async (r) => {
|
|
216
|
+
this.addWidgetEl(r.id);
|
|
217
217
|
});
|
|
218
218
|
}
|
|
219
219
|
addWidgetEl(t) {
|
|
@@ -237,7 +237,7 @@ class H extends HTMLElement {
|
|
|
237
237
|
const t = W(this._site);
|
|
238
238
|
for (const [e, i] of Object.entries(this._widgets)) {
|
|
239
239
|
const s = t.find(
|
|
240
|
-
(
|
|
240
|
+
(r) => r.id === e
|
|
241
241
|
);
|
|
242
242
|
s && !i.isActivated() ? i.activate() : !s && i.isActivated() && i.deactivate();
|
|
243
243
|
}
|
|
@@ -245,58 +245,58 @@ class H extends HTMLElement {
|
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
247
|
window.customElements.get("ace-site") || window.customElements.define("ace-site", H);
|
|
248
|
-
const W = (
|
|
248
|
+
const W = (n) => {
|
|
249
249
|
const t = window.location.pathname;
|
|
250
|
-
return
|
|
251
|
-
const d = i.find((o) => o.id === a), c = ((
|
|
250
|
+
return n.triggers.reduce((i, s) => (s.shouldActivate(t).forEach((a) => {
|
|
251
|
+
const d = i.find((o) => o.id === a), c = ((n == null ? void 0 : n.widgets) || []).find(
|
|
252
252
|
(o) => o.id === a
|
|
253
253
|
);
|
|
254
254
|
!d && c && i.push({
|
|
255
255
|
id: a
|
|
256
256
|
});
|
|
257
257
|
}), i), []);
|
|
258
|
-
}, g = (
|
|
259
|
-
|
|
260
|
-
}, O = (
|
|
261
|
-
var e, i, s,
|
|
262
|
-
g((e =
|
|
263
|
-
(i =
|
|
258
|
+
}, g = (n, t, e) => {
|
|
259
|
+
n && e.style.setProperty(t, n);
|
|
260
|
+
}, O = (n, t) => {
|
|
261
|
+
var e, i, s, r, a, d, c, o, l;
|
|
262
|
+
g((e = n.colors) == null ? void 0 : e.primaryBackground, "--primary-background", t), g(
|
|
263
|
+
(i = n.colors) == null ? void 0 : i.textOnPrimaryBackground,
|
|
264
264
|
"--text-on-primary-background",
|
|
265
265
|
t
|
|
266
266
|
), g(
|
|
267
|
-
(s =
|
|
267
|
+
(s = n.colors) == null ? void 0 : s.secondaryBackground,
|
|
268
268
|
"--secondary-background",
|
|
269
269
|
t
|
|
270
270
|
), g(
|
|
271
|
-
(
|
|
271
|
+
(r = n.colors) == null ? void 0 : r.textOnSecondaryBackground,
|
|
272
272
|
"--text-on-secondary-background",
|
|
273
273
|
t
|
|
274
274
|
), g(
|
|
275
|
-
(a =
|
|
275
|
+
(a = n.colors) == null ? void 0 : a.interactiveDestructiveBackground,
|
|
276
276
|
"--destructive-color",
|
|
277
277
|
t
|
|
278
278
|
), g(
|
|
279
|
-
(d =
|
|
279
|
+
(d = n.colors) == null ? void 0 : d.interactiveTextOnDestructiveBackground,
|
|
280
280
|
"--text-on-destructive-color",
|
|
281
281
|
t
|
|
282
282
|
), g(
|
|
283
|
-
(c =
|
|
283
|
+
(c = n.colors) == null ? void 0 : c.interactivePrimaryBackground,
|
|
284
284
|
"--interactive-primary-background",
|
|
285
285
|
t
|
|
286
286
|
), g(
|
|
287
|
-
(o =
|
|
287
|
+
(o = n.colors) == null ? void 0 : o.interactiveTextOnPrimaryBackground,
|
|
288
288
|
"--interactive-text-on-primary-background",
|
|
289
289
|
t
|
|
290
|
-
), g((l =
|
|
291
|
-
}, P = (
|
|
292
|
-
const { content: t = "", title: e, attributes: i = [] } =
|
|
290
|
+
), g((l = n.colors) == null ? void 0 : l.focusColor, "--focus-color", t);
|
|
291
|
+
}, P = (n = {}) => {
|
|
292
|
+
const { content: t = "", title: e, attributes: i = [] } = n;
|
|
293
293
|
let s = "";
|
|
294
|
-
const
|
|
294
|
+
const r = [
|
|
295
295
|
{ name: "xmlns", value: "http://www.w3.org/2000/svg" },
|
|
296
296
|
{ name: "fill", value: "currentColor" },
|
|
297
297
|
...i
|
|
298
298
|
];
|
|
299
|
-
return e && (s = `<title>${e}</title>`), `<svg ${
|
|
299
|
+
return e && (s = `<title>${e}</title>`), `<svg ${r.map((d) => `${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`;
|
|
300
300
|
}, y = document.createElement("template");
|
|
301
301
|
y.innerHTML = `<span
|
|
302
302
|
class="ace-icon__container"
|
|
@@ -622,8 +622,8 @@ class L extends HTMLElement {
|
|
|
622
622
|
}
|
|
623
623
|
const i = {
|
|
624
624
|
type: "Telia"
|
|
625
|
-
}, s = async (o) => V, { type:
|
|
626
|
-
switch (
|
|
625
|
+
}, s = async (o) => V, { type: r } = i;
|
|
626
|
+
switch (r) {
|
|
627
627
|
case "Telia": {
|
|
628
628
|
const o = await s();
|
|
629
629
|
if (o) {
|
|
@@ -646,17 +646,17 @@ class L extends HTMLElement {
|
|
|
646
646
|
this.classList.remove("hidden");
|
|
647
647
|
}
|
|
648
648
|
_renderButtonLabel() {
|
|
649
|
-
var s,
|
|
650
|
-
if (!(((d = (a = (
|
|
649
|
+
var s, r, a, d, c, o, l, h;
|
|
650
|
+
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))
|
|
651
651
|
return null;
|
|
652
652
|
const e = ((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) || "", i = document.createElement("button");
|
|
653
653
|
return i.setAttribute("label", e), i.classList.add("trigger-label"), i.addEventListener("click", this._onClicked), i.innerHTML = e, i;
|
|
654
654
|
}
|
|
655
655
|
render() {
|
|
656
|
-
var s,
|
|
656
|
+
var s, r, a;
|
|
657
657
|
this._applyBranding(), this.classList.add("bottom-right"), this.classList.toggle("active", this.active);
|
|
658
658
|
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".trigger-container"), e = this._renderButtonLabel();
|
|
659
|
-
(
|
|
659
|
+
(r = t == null ? void 0 : t.querySelector(".trigger-label")) == null || r.remove(), t && e && t.prepend(e);
|
|
660
660
|
const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#trigger-btn");
|
|
661
661
|
i && (i.classList.toggle("active", this.active), i.classList.toggle("rendered", this.loaded), i.addEventListener("click", this._onClicked), this.icon && i.prepend(this.icon));
|
|
662
662
|
}
|
|
@@ -756,13 +756,13 @@ A.innerHTML = `<style ${w ? `nonce="${w}"` : ""}>
|
|
|
756
756
|
animation: slideDown 0.3s linear;
|
|
757
757
|
}
|
|
758
758
|
</style>`;
|
|
759
|
-
const
|
|
760
|
-
|
|
759
|
+
const I = document.createElement("template");
|
|
760
|
+
I.innerHTML = '<div class="widget-frame-container"></div>';
|
|
761
761
|
class q extends HTMLElement {
|
|
762
762
|
constructor() {
|
|
763
763
|
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) => {
|
|
764
764
|
this.toggleExpand();
|
|
765
|
-
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(A.content.cloneNode(!0)), this.shadow.appendChild(
|
|
765
|
+
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(A.content.cloneNode(!0)), this.shadow.appendChild(I.content.cloneNode(!0));
|
|
766
766
|
}
|
|
767
767
|
static get observedAttributes() {
|
|
768
768
|
return ["widgetid", "apiurl", "expanded"];
|
|
@@ -858,9 +858,20 @@ class q extends HTMLElement {
|
|
|
858
858
|
height: "100%",
|
|
859
859
|
"border-radius": "0.7rem"
|
|
860
860
|
}, e = document.createElement("iframe");
|
|
861
|
-
Object.entries(t).forEach(([s,
|
|
862
|
-
e.style.setProperty(s,
|
|
863
|
-
}), e.src = `${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`, this.iframeEl = e;
|
|
861
|
+
Object.entries(t).forEach(([s, r]) => {
|
|
862
|
+
e.style.setProperty(s, r);
|
|
863
|
+
}), e.src = `${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`, e.title = this.getIFrameTitle(), this.iframeEl = e;
|
|
864
|
+
}
|
|
865
|
+
getIFrameTitle() {
|
|
866
|
+
var e, i;
|
|
867
|
+
let t = (e = this.widget) == null ? void 0 : e.configuration;
|
|
868
|
+
if (typeof t == "string")
|
|
869
|
+
try {
|
|
870
|
+
t = JSON.parse(t);
|
|
871
|
+
} catch {
|
|
872
|
+
t = {};
|
|
873
|
+
}
|
|
874
|
+
return ((i = t == null ? void 0 : t.texts) == null ? void 0 : i["iframe.title"]) || "ACE Widget";
|
|
864
875
|
}
|
|
865
876
|
executeMessageQueue() {
|
|
866
877
|
this._messageQueue.forEach((t) => {
|
package/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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
|
|
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 k,S,T;class u{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(e,i){window.ace._w.push([e,i])},configure:function(e){window.ace._c.push(e)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([e,i])=>{this.widget(e,i)}),((t==null?void 0:t._c)||[]).forEach(e=>{this.configure(e)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(i=>{i()}),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,e){const i=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!i){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});e(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}const z="1.1.120-rc.21";class M{constructor(t){this._site=t}storagePolicy(t){Object.entries(this._site._widgets).forEach(([e,i])=>{i.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([e,i])=>{i.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,e){this.triggerType=t,this.condition=e,this.triggerType=t,this.condition=e}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const e=[];return this.condition.outputs.filter(i=>i.action.type==="render_widget"&&U(i.value,t)).forEach(i=>{let s={widgetId:""};try{s=JSON.parse(i.action.data)}catch{s={widgetId:""}}e.push(s.widgetId)}),e}}const U=(r,t)=>{if(r==="*"||r==="/*"||r===t)return!0;if(r.endsWith("/*")){const s=r.slice(0,-2);return t.startsWith(s)}return!1},W=(r,t)=>{const e=s=>`ace_${r.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[n,a])=>{const[d,c]=n.split("-");if(e(c)!=n)return s;try{const o=JSON.parse(a);s[c]=o.value}catch{return s}return s},{})},p="https://widgets.ace.teliacompany.net",H="https://embed.webprovisions.io",O=()=>{if(typeof window<"u"){const r=history.pushState,t=history.replaceState;history.pushState=function(...e){r.apply(history,e),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...e){t.apply(history,e),window.dispatchEvent(new Event("locationchange"))}}};class m 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")||p}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:e,data:i}=t.data;if(e==="widget-minimize")this._widgets[i.widgetId].toggleExpand();else if(e==="widget-activated"){this._widgets[i.widgetId].executeMessageQueue();const n=this._widgets[i.widgetId];n&&(this._loadedVersions[i.widgetId]=i.version,this._environment.executePreloadedHandlers(((s=n.widget)==null?void 0:s.name)||""));try{const a=JSON.parse(i.storage),d=W(i.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,e,i){this.render()}async _loadSite(){var s;const e=await(await fetch(`${this.apiUrl}/api/site/${this.siteId}`)).json(),i=location.hostname;if(!((e==null?void 0:e.hosts)||[]).includes(i)){console.warn(`the host "${i}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=e,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 e=`ace-widget_${t}`;let i=document.getElementById(e);i||(i=document.createElement("ace-widget"),i.id=e,i.widgetId=t,this.apiUrl!==p&&(i.apiUrl=this.apiUrl),document.body.appendChild(i)),this._widgets={...this._widgets,[t]:i}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=P(this._site);for(const[e,i]of Object.entries(this._widgets)){const s=t.find(n=>n.id===e);s&&!i.isActivated()?i.activate():!s&&i.isActivated()&&i.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",m);const P=r=>{const t=window.location.pathname;return r.triggers.reduce((i,s)=>(s.shouldActivate(t).forEach(a=>{const d=i.find(o=>o.id===a),c=((r==null?void 0:r.widgets)||[]).find(o=>o.id===a);!d&&c&&i.push({id:a})}),i),[])},g=(r,t,e)=>{r&&e.style.setProperty(t,r)},j=(r,t)=>{var e,i,s,n,a,d,c,o,l;g((e=r.colors)==null?void 0:e.primaryBackground,"--primary-background",t),g((i=r.colors)==null?void 0:i.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:e,attributes:i=[]}=r;let s="";const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...i];return e&&(s=`<title>${e}</title>`),`<svg ${n.map(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},w=document.createElement("template");w.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
|
-
></span>`;const f=document.createElement("template"),b=(
|
|
3
|
+
></span>`;const f=document.createElement("template"),b=(k=document.querySelector("script[nonce]"))==null?void 0:k.getAttribute("nonce");f.innerHTML=`<style ${b?`nonce="${b}"`:""}>
|
|
4
4
|
:host {
|
|
5
5
|
display: inline-block;
|
|
6
6
|
--size-sm: 1rem;
|
|
@@ -281,4 +281,4 @@ svg {
|
|
|
281
281
|
:host(.hidden) .widget-frame-container {
|
|
282
282
|
animation: slideDown 0.3s linear;
|
|
283
283
|
}
|
|
284
|
-
</style>`;const A=document.createElement("template");A.innerHTML='<div class="widget-frame-container"></div>';class
|
|
284
|
+
</style>`;const A=document.createElement("template");A.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 q(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(C.content.cloneNode(!0)),this.shadow.appendChild(A.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,e,i){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var e,i;((e=t.data)==null?void 0:e.type)==="widget-set-active"&&typeof((i=t.data.data)==null?void 0:i.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 e;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((e=window.ace)==null?void 0:e.applications)||[]).find(i=>i.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json()}dispatch(t,e={}){var s;const i={type:t,data:e};if(e.widgetId||(e.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(i);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(i,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var i;if(!((i=this.widget)!=null&&i.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"},e=document.createElement("iframe");Object.entries(t).forEach(([s,n])=>{e.style.setProperty(s,n)}),e.src=`${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,e.title=this.getIFrameTitle(),this.iframeEl=e}getIFrameTitle(){var e,i;let t=(e=this.widget)==null?void 0:e.configuration;if(typeof t=="string")try{t=JSON.parse(t)}catch{t={}}return((i=t==null?void 0:t.texts)==null?void 0:i["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 i,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 e=this._getContainerEl();e&&e.childNodes.length===0&&e.appendChild(this.iframeEl),e&&this.zIndex!==-1&&(e.style.zIndex=this.zIndex.toString()),this.trigger&&((i=this.shadowRoot)==null?void 0:i.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.appendChild(this.trigger))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",I),window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",E),h.SiteComponent=m,h.WidgetComponent=I,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
package/widget.component.d.ts
CHANGED
|
@@ -33,6 +33,7 @@ export declare class WidgetComponent extends HTMLElement {
|
|
|
33
33
|
dispatch(type: string, data?: Record<string, any>): void;
|
|
34
34
|
deactivate(): Promise<void>;
|
|
35
35
|
private _createIFrame;
|
|
36
|
+
private getIFrameTitle;
|
|
36
37
|
executeMessageQueue(): void;
|
|
37
38
|
isExpanded(): boolean;
|
|
38
39
|
toggleExpand(value?: boolean): void;
|