@telia-ace/widget-site 1.1.77 → 1.1.78
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/environment.d.ts +13 -0
- package/index.js +5 -5
- package/index.mjs +205 -115
- package/index.umd.js +6 -6
- package/package.json +1 -1
- package/site-api.d.ts +9 -0
- package/site.component.d.ts +4 -1
- package/types/widget.d.ts +1 -0
- package/types.d.ts +4 -0
- package/widget-api.d.ts +8 -0
- package/widget.component.d.ts +11 -1
package/environment.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { SiteAPI } from './site-api';
|
|
2
|
+
import { SiteConfigurationHandler, WidgetAPIHandler } from './types';
|
|
3
|
+
export declare class Environment {
|
|
4
|
+
private _api;
|
|
5
|
+
private _bootstrapped;
|
|
6
|
+
private _widgetAPIHandlers;
|
|
7
|
+
constructor(_api: SiteAPI);
|
|
8
|
+
bootstrap(): void;
|
|
9
|
+
private _bootstrap;
|
|
10
|
+
executePreloadedHandlers(widgetName: string): void;
|
|
11
|
+
configure(delegate: SiteConfigurationHandler): void;
|
|
12
|
+
widget(name: string, delegate: WidgetAPIHandler): void;
|
|
13
|
+
}
|
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p="https://widgets.ace.teliacompany.net",
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class C{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)}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(d=>{var o;return((o=d.widget)==null?void 0:o.name)===t});e(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}class L{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}}const p="https://widgets.ace.teliacompany.net",k="https://embed.webprovisions.io",I=()=>{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 u extends HTMLElement{constructor(){var t;super(),this._site=null,this._widgets={},this._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new L(this),this._environment=new C(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")||k}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){I(),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._environment.executePreloadedHandlers(((s=n.widget)==null?void 0:s.name)||"")}})}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,(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.widgetId)})}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}}render(){if(!this._site){this.shadow.innerHTML="";return}const t=A(this._site);for(const[e,i]of Object.entries(this._widgets)){const s=t.find(n=>n.widgetId===e);s&&!i.isActivated()?i.activate():!s&&i.isActivated()&&i.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",u);const A=r=>{const t=[];return(r.triggers||[]).filter(e=>e.triggerType==="visit").forEach(e=>{const i=window.location.pathname,s=e.condition.outputs||[];e.condition.type==="url"&&s.forEach(n=>{const d=n.action.type==="render_widget";if((n.value===i||n.value==="*")&&d){let c={widgetId:""};try{c=JSON.parse(n.action.data)}catch{c={widgetId:""}}const g=t.findIndex(l=>l.widgetId===c.widgetId)>-1,a=((r==null?void 0:r.widgets)||[]).find(l=>l.widgetId===c.widgetId);a&&!g&&t.push(a)}})}),t},h=(r,t,e)=>{r&&e.style.setProperty(t,r)},S=(r,t)=>{var e,i,s,n,d,o,c,g,a;h((e=r.colors)==null?void 0:e.primaryBackground,"--primary-background",t),h((i=r.colors)==null?void 0:i.textOnPrimaryBackground,"--text-on-primary-background",t),h((s=r.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),h((n=r.colors)==null?void 0:n.textOnSecondaryBackground,"--text-on-secondary-background",t),h((d=r.colors)==null?void 0:d.interactiveDestructiveBackground,"--destructive-color",t),h((o=r.colors)==null?void 0:o.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),h((c=r.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),h((g=r.colors)==null?void 0:g.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),h((a=r.colors)==null?void 0:a.focusColor,"--focus-color",t)},z=(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(o=>`${o.name}="${o.value}"`).join(" ")}>${s}${t}</svg>`},w=document.createElement("template");w.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
|
-
></span>`;const
|
|
3
|
+
></span>`;const m=document.createElement("template");m.innerHTML=`<style>
|
|
4
4
|
:host {
|
|
5
5
|
display: inline-block;
|
|
6
6
|
--size-sm: 1rem;
|
|
@@ -34,7 +34,7 @@ svg {
|
|
|
34
34
|
min-width: var(--size-lg);
|
|
35
35
|
width: var(--size-lg);
|
|
36
36
|
}
|
|
37
|
-
</style>`;class f extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(
|
|
37
|
+
</style>`;class f extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(m.content.cloneNode(!0)),this.shadow.appendChild(w.content.cloneNode(!0))}get svg(){return this.getAttribute("svg")||""}set svg(t){this.setAttribute("svg",t)}get size(){return this.getAttribute("size")||""}set size(t){this.setAttribute("size",t),this.classList.remove("ace-icon--sm","ace-icon--md","ace--icon-lg"),this.classList.add(`ace-icon--${t}`)}static get observedAttributes(){return["svg","size"]}attributeChangedCallback(t,e,i){this.render()}render(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector(".ace-icon__container");if(t){const i=z({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=i}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",f);const T={name:"question",svg:'<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C59.9827 16.5432 47.4568 4.01731 32 4ZM32 55.6923C18.9151 55.6923 8.30769 45.0849 8.30769 32C8.30769 18.9151 18.9151 8.30769 32 8.30769C45.0849 8.30769 55.6923 18.9151 55.6923 32C55.6775 45.0788 45.0788 55.6775 32 55.6923Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.9423 37.5723L36.311 32.9068L36.7354 32.4448C39.7555 29.1161 40.7645 27.0647 40.7645 24.5087C40.7645 23.1091 40.4251 21.7942 39.7041 20.6491C38.3044 18.3587 35.6323 16.9166 32.2816 16.9166C28.7565 16.9166 25.3125 18.7414 23.2581 21.6772L23.1201 21.8791C22.8232 22.3032 22.696 22.6849 22.696 22.9818C22.696 23.7029 23.926 25.9932 25.2833 25.9932C25.5378 25.9932 25.7922 25.9084 26.0467 25.7388C26.2588 25.5691 26.5981 25.2298 27.0647 24.7208C28.8885 22.6849 30.1185 21.9215 31.7726 21.9215C33.6813 21.9215 35.081 23.1939 35.081 24.8905C35.081 26.375 34.2751 27.7746 32.3664 29.8529L28.2523 34.2216C27.9554 34.6033 27.7857 34.9426 27.7857 35.282C27.7857 35.6213 27.9978 36.1726 28.4219 36.8937C29.0581 37.8692 29.7368 38.3782 30.4578 38.3782C30.9244 38.3782 31.3909 38.1237 31.9423 37.5723ZM30.882 47.4972C29.2278 47.4972 27.6585 44.7403 27.6585 43.6799C27.6585 42.1954 30.0761 40.6261 32.4089 40.6261C33.6389 40.6261 34.2751 41.1775 34.2751 42.3227C34.2751 44.0616 33.4692 45.843 32.4513 46.7761C31.9423 47.2427 31.4334 47.4972 30.882 47.4972Z"/></svg>'},b=document.createElement("template");b.innerHTML=`<style>
|
|
38
38
|
:host {
|
|
39
39
|
position: fixed;
|
|
40
40
|
display: flex;
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class y 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(b.content.cloneNode(!0)),this.shadow.appendChild(v.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&&
|
|
212
|
+
</div>`;class y 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(b.content.cloneNode(!0)),this.shadow.appendChild(v.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&&S(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 o,c,g;const t=(c=(o=this.widget)==null?void 0:o.configuration)==null?void 0:c.branding,e=(g=t==null?void 0:t.graphics)==null?void 0:g.trigger;if(e){const a=document.createElement("img");return a.src=e,a.classList.add("trigger-icon"),a.alt="",a}const i={type:"Telia",content:"question"},s=async a=>T,{type:n,content:d}=i;switch(n){case"Telia":{const a=await s();if(a){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=a.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,d,o,c,g,a,l;if(!(((o=(d=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:d.other)==null?void 0:o.showButtonLabel)||!1))return null;const e=((l=(a=(g=(c=this.widget)==null?void 0:c.configuration)==null?void 0:g.branding)==null?void 0:a.other)==null?void 0:l.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,d;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=(d=this.shadowRoot)==null?void 0:d.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",y);window.customElements.get("ace-icon")||window.customElements.define("ace-icon",f);class M{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}}const $="https://widgets.ace.teliacompany.net",x=document.createElement("template");x.innerHTML=`<style>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -280,4 +280,4 @@ svg {
|
|
|
280
280
|
animation: slideDown 0.3s linear;
|
|
281
281
|
}
|
|
282
282
|
}
|
|
283
|
-
</style>`;const
|
|
283
|
+
</style>`;const _=document.createElement("template");_.innerHTML='<div class="widget-frame-container"></div>';class E extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new M(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(x.content.cloneNode(!0)),this.shadow.appendChild(_.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")||$}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}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)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`,this.iframeEl=e}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=t?"true":"false":this.expanded=this.isExpanded()?"false":"true",this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var i,s,n;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=(i=this.shadowRoot)==null?void 0:i.querySelector(".widget-frame-container");e&&e.childNodes.length===0&&e.appendChild(this.iframeEl),e&&this.zIndex!==-1&&(e.style.zIndex=this.zIndex.toString()),this.trigger&&((s=this.shadowRoot)==null?void 0:s.querySelectorAll("ace-trigger").length)===0&&((n=this.shadowRoot)==null||n.appendChild(this.trigger))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",E);window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",y);exports.SiteComponent=u;exports.WidgetComponent=E;
|
package/index.mjs
CHANGED
|
@@ -1,17 +1,96 @@
|
|
|
1
|
-
|
|
1
|
+
class _ {
|
|
2
|
+
constructor(t) {
|
|
3
|
+
this._api = t, this._bootstrapped = !1, this._widgetAPIHandlers = /* @__PURE__ */ new Map(), window.ace = window.ace || {
|
|
4
|
+
_c: [],
|
|
5
|
+
_w: [],
|
|
6
|
+
widget: function(e, i) {
|
|
7
|
+
window.ace._w.push([e, i]);
|
|
8
|
+
},
|
|
9
|
+
configure: function(e) {
|
|
10
|
+
window.ace._c.push(e);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
bootstrap() {
|
|
15
|
+
this._bootstrap();
|
|
16
|
+
}
|
|
17
|
+
_bootstrap() {
|
|
18
|
+
const t = globalThis.ace;
|
|
19
|
+
globalThis.ace = this, this._bootstrapped = !0, ((t == null ? void 0 : t._w) || []).forEach(([e, i]) => {
|
|
20
|
+
this.widget(e, i);
|
|
21
|
+
}), ((t == null ? void 0 : t._c) || []).forEach((e) => {
|
|
22
|
+
this.configure(e);
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
executePreloadedHandlers(t) {
|
|
26
|
+
(this._widgetAPIHandlers.get(t) || []).forEach((i) => {
|
|
27
|
+
i();
|
|
28
|
+
}), this._widgetAPIHandlers.set(t, []);
|
|
29
|
+
}
|
|
30
|
+
configure(t) {
|
|
31
|
+
if (!this._bootstrapped)
|
|
32
|
+
throw new Error("ace environment not bootstrapped");
|
|
33
|
+
t(this._api);
|
|
34
|
+
}
|
|
35
|
+
widget(t, e) {
|
|
36
|
+
const i = Object.values(this._api.getWidgets()).find(
|
|
37
|
+
(s) => {
|
|
38
|
+
var r;
|
|
39
|
+
return ((r = s.widget) == null ? void 0 : r.name) === t;
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
if (!i) {
|
|
43
|
+
const s = this._widgetAPIHandlers.get(t) || [];
|
|
44
|
+
s.push(() => {
|
|
45
|
+
const r = Object.values(this._api.getWidgets()).find(
|
|
46
|
+
(d) => {
|
|
47
|
+
var o;
|
|
48
|
+
return ((o = d.widget) == null ? void 0 : o.name) === t;
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
e(r == null ? void 0 : r.api);
|
|
52
|
+
}), this._widgetAPIHandlers.set(t, s);
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
e(i.api);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
class E {
|
|
59
|
+
constructor(t) {
|
|
60
|
+
this._site = t;
|
|
61
|
+
}
|
|
62
|
+
storagePolicy(t) {
|
|
63
|
+
Object.entries(this._site._widgets).forEach(([e, i]) => {
|
|
64
|
+
i.dispatch("set-storage-policies", {
|
|
65
|
+
policies: t
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
disallowStorageKey(t) {
|
|
70
|
+
Object.entries(this._site._widgets).forEach(([e, i]) => {
|
|
71
|
+
i.dispatch("disallow-storage-key", {
|
|
72
|
+
storageKey: t
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
getWidgets() {
|
|
77
|
+
return this._site._widgets;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
const p = "https://widgets.ace.teliacompany.net", C = "https://embed.webprovisions.io", L = () => {
|
|
2
81
|
if (typeof window < "u") {
|
|
3
|
-
const
|
|
82
|
+
const n = history.pushState, t = history.replaceState;
|
|
4
83
|
history.pushState = function(...e) {
|
|
5
|
-
|
|
84
|
+
n.apply(history, e), window.dispatchEvent(new Event("locationchange"));
|
|
6
85
|
}, history.replaceState = function(...e) {
|
|
7
86
|
t.apply(history, e), window.dispatchEvent(new Event("locationchange"));
|
|
8
87
|
};
|
|
9
88
|
}
|
|
10
89
|
};
|
|
11
|
-
class
|
|
90
|
+
class k extends HTMLElement {
|
|
12
91
|
constructor() {
|
|
13
92
|
var t;
|
|
14
|
-
super(), this._site = null, this._widgets = {}, this._path = ((t = window == null ? void 0 : window.location) == null ? void 0 : t.pathname) || "", this.routeChangeListener = () => {
|
|
93
|
+
super(), this._site = null, this._widgets = {}, this._path = ((t = window == null ? void 0 : window.location) == null ? void 0 : t.pathname) || "", this._api = new E(this), this._environment = new _(this._api), this.routeChangeListener = () => {
|
|
15
94
|
this._path = window.location.pathname, this.render();
|
|
16
95
|
}, this.shadow = this.attachShadow({ mode: "open" });
|
|
17
96
|
}
|
|
@@ -37,9 +116,18 @@ class L extends HTMLElement {
|
|
|
37
116
|
this.setAttribute("embedurl", t);
|
|
38
117
|
}
|
|
39
118
|
async connectedCallback() {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
i
|
|
119
|
+
L(), await this._loadSite(), this.render(), this._environment.bootstrap(), window.addEventListener("locationchange", this.routeChangeListener), window.addEventListener("message", (t) => {
|
|
120
|
+
var s;
|
|
121
|
+
const { type: e, data: i } = t.data;
|
|
122
|
+
if (e === "widget-minimize")
|
|
123
|
+
this._widgets[i.widgetId].toggleExpand();
|
|
124
|
+
else if (e === "widget-activated") {
|
|
125
|
+
this._widgets[i.widgetId].executeMessageQueue();
|
|
126
|
+
const r = this._widgets[i.widgetId];
|
|
127
|
+
r && this._environment.executePreloadedHandlers(
|
|
128
|
+
((s = r.widget) == null ? void 0 : s.name) || ""
|
|
129
|
+
);
|
|
130
|
+
}
|
|
43
131
|
});
|
|
44
132
|
}
|
|
45
133
|
disconnectedCallback() {
|
|
@@ -48,17 +136,6 @@ class L extends HTMLElement {
|
|
|
48
136
|
attributeChangedCallback(t, e, i) {
|
|
49
137
|
this.render();
|
|
50
138
|
}
|
|
51
|
-
async _verifyInstallation() {
|
|
52
|
-
await fetch(`${this.apiUrl}/api/site/${this.siteId}/verification`, {
|
|
53
|
-
method: "PUT",
|
|
54
|
-
body: JSON.stringify({
|
|
55
|
-
verified: !0
|
|
56
|
-
}),
|
|
57
|
-
headers: {
|
|
58
|
-
"Content-Type": "application/json"
|
|
59
|
-
}
|
|
60
|
-
}), window.close();
|
|
61
|
-
}
|
|
62
139
|
async _loadSite() {
|
|
63
140
|
var s;
|
|
64
141
|
const e = await (await fetch(`${this.apiUrl}/api/site/${this.siteId}`)).json(), i = location.hostname;
|
|
@@ -68,8 +145,8 @@ class L extends HTMLElement {
|
|
|
68
145
|
);
|
|
69
146
|
return;
|
|
70
147
|
}
|
|
71
|
-
this._site = e, (((s = this._site) == null ? void 0 : s.widgets) || []).forEach(async (
|
|
72
|
-
this.addWidgetEl(
|
|
148
|
+
this._site = e, (((s = this._site) == null ? void 0 : s.widgets) || []).forEach(async (r) => {
|
|
149
|
+
this.addWidgetEl(r.widgetId);
|
|
73
150
|
});
|
|
74
151
|
}
|
|
75
152
|
addWidgetEl(t) {
|
|
@@ -80,15 +157,6 @@ class L extends HTMLElement {
|
|
|
80
157
|
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 = {
|
|
81
158
|
...this._widgets,
|
|
82
159
|
[t]: i
|
|
83
|
-
}, window.ace = window.ace || {
|
|
84
|
-
_c: [],
|
|
85
|
-
_w: [],
|
|
86
|
-
widget: function(s, n) {
|
|
87
|
-
window.ace._w.push([s, n]);
|
|
88
|
-
},
|
|
89
|
-
configure: function(s) {
|
|
90
|
-
window.ace._c.push(s);
|
|
91
|
-
}
|
|
92
160
|
};
|
|
93
161
|
}
|
|
94
162
|
render() {
|
|
@@ -96,87 +164,87 @@ class L extends HTMLElement {
|
|
|
96
164
|
this.shadow.innerHTML = "";
|
|
97
165
|
return;
|
|
98
166
|
}
|
|
99
|
-
const t =
|
|
167
|
+
const t = I(this._site);
|
|
100
168
|
for (const [e, i] of Object.entries(this._widgets)) {
|
|
101
169
|
const s = t.find(
|
|
102
|
-
(
|
|
170
|
+
(r) => r.widgetId === e
|
|
103
171
|
);
|
|
104
172
|
s && !i.isActivated() ? i.activate() : !s && i.isActivated() && i.deactivate();
|
|
105
173
|
}
|
|
106
174
|
this.shadow.innerHTML = "";
|
|
107
175
|
}
|
|
108
176
|
}
|
|
109
|
-
window.customElements.get("ace-site") || window.customElements.define("ace-site",
|
|
110
|
-
const
|
|
177
|
+
window.customElements.get("ace-site") || window.customElements.define("ace-site", k);
|
|
178
|
+
const I = (n) => {
|
|
111
179
|
const t = [];
|
|
112
|
-
return (
|
|
180
|
+
return (n.triggers || []).filter((e) => e.triggerType === "visit").forEach((e) => {
|
|
113
181
|
const i = window.location.pathname, s = e.condition.outputs || [];
|
|
114
|
-
e.condition.type === "url" && s.forEach((
|
|
115
|
-
const d =
|
|
116
|
-
if ((
|
|
117
|
-
let
|
|
182
|
+
e.condition.type === "url" && s.forEach((r) => {
|
|
183
|
+
const d = r.action.type === "render_widget";
|
|
184
|
+
if ((r.value === i || r.value === "*") && d) {
|
|
185
|
+
let c = { widgetId: "" };
|
|
118
186
|
try {
|
|
119
|
-
|
|
187
|
+
c = JSON.parse(r.action.data);
|
|
120
188
|
} catch {
|
|
121
|
-
|
|
189
|
+
c = {
|
|
122
190
|
widgetId: ""
|
|
123
191
|
};
|
|
124
192
|
}
|
|
125
|
-
const g = t.findIndex((l) => l.widgetId ===
|
|
126
|
-
(l) => l.widgetId ===
|
|
193
|
+
const g = t.findIndex((l) => l.widgetId === c.widgetId) > -1, a = ((n == null ? void 0 : n.widgets) || []).find(
|
|
194
|
+
(l) => l.widgetId === c.widgetId
|
|
127
195
|
);
|
|
128
|
-
|
|
196
|
+
a && !g && t.push(a);
|
|
129
197
|
}
|
|
130
198
|
});
|
|
131
199
|
}), t;
|
|
132
|
-
}, h = (
|
|
133
|
-
|
|
134
|
-
},
|
|
135
|
-
var e, i, s,
|
|
136
|
-
h((e =
|
|
137
|
-
(i =
|
|
200
|
+
}, h = (n, t, e) => {
|
|
201
|
+
n && e.style.setProperty(t, n);
|
|
202
|
+
}, A = (n, t) => {
|
|
203
|
+
var e, i, s, r, d, o, c, g, a;
|
|
204
|
+
h((e = n.colors) == null ? void 0 : e.primaryBackground, "--primary-background", t), h(
|
|
205
|
+
(i = n.colors) == null ? void 0 : i.textOnPrimaryBackground,
|
|
138
206
|
"--text-on-primary-background",
|
|
139
207
|
t
|
|
140
208
|
), h(
|
|
141
|
-
(s =
|
|
209
|
+
(s = n.colors) == null ? void 0 : s.secondaryBackground,
|
|
142
210
|
"--secondary-background",
|
|
143
211
|
t
|
|
144
212
|
), h(
|
|
145
|
-
(
|
|
213
|
+
(r = n.colors) == null ? void 0 : r.textOnSecondaryBackground,
|
|
146
214
|
"--text-on-secondary-background",
|
|
147
215
|
t
|
|
148
216
|
), h(
|
|
149
|
-
(d =
|
|
217
|
+
(d = n.colors) == null ? void 0 : d.interactiveDestructiveBackground,
|
|
150
218
|
"--destructive-color",
|
|
151
219
|
t
|
|
152
220
|
), h(
|
|
153
|
-
(
|
|
221
|
+
(o = n.colors) == null ? void 0 : o.interactiveTextOnDestructiveBackground,
|
|
154
222
|
"--text-on-destructive-color",
|
|
155
223
|
t
|
|
156
224
|
), h(
|
|
157
|
-
(
|
|
225
|
+
(c = n.colors) == null ? void 0 : c.interactivePrimaryBackground,
|
|
158
226
|
"--interactive-primary-background",
|
|
159
227
|
t
|
|
160
228
|
), h(
|
|
161
|
-
(g =
|
|
229
|
+
(g = n.colors) == null ? void 0 : g.interactiveTextOnPrimaryBackground,
|
|
162
230
|
"--interactive-text-on-primary-background",
|
|
163
231
|
t
|
|
164
|
-
), h((
|
|
165
|
-
},
|
|
166
|
-
const { content: t = "", title: e, attributes: i = [] } =
|
|
232
|
+
), h((a = n.colors) == null ? void 0 : a.focusColor, "--focus-color", t);
|
|
233
|
+
}, S = (n = {}) => {
|
|
234
|
+
const { content: t = "", title: e, attributes: i = [] } = n;
|
|
167
235
|
let s = "";
|
|
168
|
-
const
|
|
236
|
+
const r = [
|
|
169
237
|
{ name: "xmlns", value: "http://www.w3.org/2000/svg" },
|
|
170
238
|
{ name: "fill", value: "currentColor" },
|
|
171
239
|
...i
|
|
172
240
|
];
|
|
173
|
-
return e && (s = `<title>${e}</title>`), `<svg ${
|
|
241
|
+
return e && (s = `<title>${e}</title>`), `<svg ${r.map((o) => `${o.name}="${o.value}"`).join(" ")}>${s}${t}</svg>`;
|
|
174
242
|
}, u = document.createElement("template");
|
|
175
243
|
u.innerHTML = `<span
|
|
176
244
|
class="ace-icon__container"
|
|
177
245
|
></span>`;
|
|
178
|
-
const
|
|
179
|
-
|
|
246
|
+
const w = document.createElement("template");
|
|
247
|
+
w.innerHTML = `<style>
|
|
180
248
|
:host {
|
|
181
249
|
display: inline-block;
|
|
182
250
|
--size-sm: 1rem;
|
|
@@ -211,9 +279,9 @@ svg {
|
|
|
211
279
|
width: var(--size-lg);
|
|
212
280
|
}
|
|
213
281
|
</style>`;
|
|
214
|
-
class
|
|
282
|
+
class m extends HTMLElement {
|
|
215
283
|
constructor() {
|
|
216
|
-
super(), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(
|
|
284
|
+
super(), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(w.content.cloneNode(!0)), this.shadow.appendChild(u.content.cloneNode(!0));
|
|
217
285
|
}
|
|
218
286
|
get svg() {
|
|
219
287
|
return this.getAttribute("svg") || "";
|
|
@@ -237,7 +305,7 @@ class w extends HTMLElement {
|
|
|
237
305
|
var e;
|
|
238
306
|
const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".ace-icon__container");
|
|
239
307
|
if (t) {
|
|
240
|
-
const i =
|
|
308
|
+
const i = S({
|
|
241
309
|
content: this.svg,
|
|
242
310
|
attributes: [
|
|
243
311
|
{
|
|
@@ -251,8 +319,8 @@ class w extends HTMLElement {
|
|
|
251
319
|
}
|
|
252
320
|
}
|
|
253
321
|
}
|
|
254
|
-
window.customElements.get("ace-icon") || window.customElements.define("ace-icon",
|
|
255
|
-
const
|
|
322
|
+
window.customElements.get("ace-icon") || window.customElements.define("ace-icon", m);
|
|
323
|
+
const z = {
|
|
256
324
|
name: "question",
|
|
257
325
|
svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C59.9827 16.5432 47.4568 4.01731 32 4ZM32 55.6923C18.9151 55.6923 8.30769 45.0849 8.30769 32C8.30769 18.9151 18.9151 8.30769 32 8.30769C45.0849 8.30769 55.6923 18.9151 55.6923 32C55.6775 45.0788 45.0788 55.6775 32 55.6923Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.9423 37.5723L36.311 32.9068L36.7354 32.4448C39.7555 29.1161 40.7645 27.0647 40.7645 24.5087C40.7645 23.1091 40.4251 21.7942 39.7041 20.6491C38.3044 18.3587 35.6323 16.9166 32.2816 16.9166C28.7565 16.9166 25.3125 18.7414 23.2581 21.6772L23.1201 21.8791C22.8232 22.3032 22.696 22.6849 22.696 22.9818C22.696 23.7029 23.926 25.9932 25.2833 25.9932C25.5378 25.9932 25.7922 25.9084 26.0467 25.7388C26.2588 25.5691 26.5981 25.2298 27.0647 24.7208C28.8885 22.6849 30.1185 21.9215 31.7726 21.9215C33.6813 21.9215 35.081 23.1939 35.081 24.8905C35.081 26.375 34.2751 27.7746 32.3664 29.8529L28.2523 34.2216C27.9554 34.6033 27.7857 34.9426 27.7857 35.282C27.7857 35.6213 27.9978 36.1726 28.4219 36.8937C29.0581 37.8692 29.7368 38.3782 30.4578 38.3782C30.9244 38.3782 31.3909 38.1237 31.9423 37.5723ZM30.882 47.4972C29.2278 47.4972 27.6585 44.7403 27.6585 43.6799C27.6585 42.1954 30.0761 40.6261 32.4089 40.6261C33.6389 40.6261 34.2751 41.1775 34.2751 42.3227C34.2751 44.0616 33.4692 45.843 32.4513 46.7761C31.9423 47.2427 31.4334 47.4972 30.882 47.4972Z"/></svg>'
|
|
258
326
|
}, f = document.createElement("template");
|
|
@@ -402,8 +470,8 @@ f.innerHTML = `<style>
|
|
|
402
470
|
transition: transform 200ms ease-out;
|
|
403
471
|
}
|
|
404
472
|
</style>`;
|
|
405
|
-
const
|
|
406
|
-
|
|
473
|
+
const b = document.createElement("template");
|
|
474
|
+
b.innerHTML = `<div class="trigger-container">
|
|
407
475
|
<button id="trigger-btn" class="trigger">
|
|
408
476
|
<span class="trigger-close">
|
|
409
477
|
<svg
|
|
@@ -434,7 +502,7 @@ v.innerHTML = `<div class="trigger-container">
|
|
|
434
502
|
</span>
|
|
435
503
|
</button>
|
|
436
504
|
</div>`;
|
|
437
|
-
class
|
|
505
|
+
class v extends HTMLElement {
|
|
438
506
|
constructor() {
|
|
439
507
|
super(), this.widget = null, this.loaded = !1, this.active = !1, this._onClicked = () => {
|
|
440
508
|
this.active = !this.active;
|
|
@@ -446,7 +514,7 @@ class b extends HTMLElement {
|
|
|
446
514
|
composed: !0
|
|
447
515
|
};
|
|
448
516
|
this.dispatchEvent(new CustomEvent("toggle", t)), this.render();
|
|
449
|
-
}, this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(f.content.cloneNode(!0)), this.shadow.appendChild(
|
|
517
|
+
}, this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(f.content.cloneNode(!0)), this.shadow.appendChild(b.content.cloneNode(!0));
|
|
450
518
|
}
|
|
451
519
|
static get observedAttributes() {
|
|
452
520
|
return ["widgetid", "apiurl"];
|
|
@@ -474,7 +542,7 @@ class b extends HTMLElement {
|
|
|
474
542
|
}
|
|
475
543
|
_applyBranding() {
|
|
476
544
|
var t, e;
|
|
477
|
-
(e = (t = this.widget) == null ? void 0 : t.configuration) != null && e.branding &&
|
|
545
|
+
(e = (t = this.widget) == null ? void 0 : t.configuration) != null && e.branding && A(this.widget.configuration.branding, this);
|
|
478
546
|
}
|
|
479
547
|
async _loadWidget(t) {
|
|
480
548
|
const i = await (await fetch(`${this.apiUrl}/api/widget/${t}`)).json(), s = JSON.parse(i.configuration);
|
|
@@ -484,22 +552,22 @@ class b extends HTMLElement {
|
|
|
484
552
|
};
|
|
485
553
|
}
|
|
486
554
|
async _renderSymbol() {
|
|
487
|
-
var
|
|
488
|
-
const t = (
|
|
555
|
+
var o, c, g;
|
|
556
|
+
const t = (c = (o = this.widget) == null ? void 0 : o.configuration) == null ? void 0 : c.branding, e = (g = t == null ? void 0 : t.graphics) == null ? void 0 : g.trigger;
|
|
489
557
|
if (e) {
|
|
490
|
-
const
|
|
491
|
-
return
|
|
558
|
+
const a = document.createElement("img");
|
|
559
|
+
return a.src = e, a.classList.add("trigger-icon"), a.alt = "", a;
|
|
492
560
|
}
|
|
493
561
|
const i = {
|
|
494
562
|
type: "Telia",
|
|
495
563
|
content: "question"
|
|
496
|
-
}, s = async (
|
|
497
|
-
switch (
|
|
564
|
+
}, s = async (a) => z, { type: r, content: d } = i;
|
|
565
|
+
switch (r) {
|
|
498
566
|
case "Telia": {
|
|
499
|
-
const
|
|
500
|
-
if (
|
|
567
|
+
const a = await s();
|
|
568
|
+
if (a) {
|
|
501
569
|
const l = document.createElement("ace-icon");
|
|
502
|
-
return l.classList.add("trigger-icon"), l.svg =
|
|
570
|
+
return l.classList.add("trigger-icon"), l.svg = a.svg, l.size = "lg", l;
|
|
503
571
|
}
|
|
504
572
|
return null;
|
|
505
573
|
}
|
|
@@ -517,24 +585,38 @@ class b extends HTMLElement {
|
|
|
517
585
|
this.classList.remove("hidden");
|
|
518
586
|
}
|
|
519
587
|
_renderButtonLabel() {
|
|
520
|
-
var s,
|
|
521
|
-
if (!(((
|
|
588
|
+
var s, r, d, o, c, g, a, l;
|
|
589
|
+
if (!(((o = (d = (r = (s = this.widget) == null ? void 0 : s.configuration) == null ? void 0 : r.branding) == null ? void 0 : d.other) == null ? void 0 : o.showButtonLabel) || !1))
|
|
522
590
|
return null;
|
|
523
|
-
const e = ((l = (
|
|
591
|
+
const e = ((l = (a = (g = (c = this.widget) == null ? void 0 : c.configuration) == null ? void 0 : g.branding) == null ? void 0 : a.other) == null ? void 0 : l.buttonLabelText) || "", i = document.createElement("button");
|
|
524
592
|
return i.setAttribute("label", e), i.classList.add("trigger-label"), i.addEventListener("click", this._onClicked), i.innerHTML = e, i;
|
|
525
593
|
}
|
|
526
594
|
render() {
|
|
527
|
-
var s,
|
|
595
|
+
var s, r, d;
|
|
528
596
|
this._applyBranding(), this.classList.add("bottom-right"), this.classList.toggle("active", this.active);
|
|
529
597
|
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".trigger-container"), e = this._renderButtonLabel();
|
|
530
|
-
(
|
|
598
|
+
(r = t == null ? void 0 : t.querySelector(".trigger-label")) == null || r.remove(), t && e && t.prepend(e);
|
|
531
599
|
const i = (d = this.shadowRoot) == null ? void 0 : d.querySelector("#trigger-btn");
|
|
532
600
|
i && (i.classList.toggle("active", this.active), i.classList.toggle("rendered", this.loaded), i.addEventListener("click", this._onClicked), this.icon && i.prepend(this.icon));
|
|
533
601
|
}
|
|
534
602
|
}
|
|
535
|
-
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger",
|
|
536
|
-
window.customElements.get("ace-icon") || window.customElements.define("ace-icon",
|
|
537
|
-
|
|
603
|
+
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", v);
|
|
604
|
+
window.customElements.get("ace-icon") || window.customElements.define("ace-icon", m);
|
|
605
|
+
class T {
|
|
606
|
+
constructor(t) {
|
|
607
|
+
this.widgetEl = t;
|
|
608
|
+
}
|
|
609
|
+
open() {
|
|
610
|
+
this.widgetEl.toggleExpand(!0);
|
|
611
|
+
}
|
|
612
|
+
close() {
|
|
613
|
+
this.widgetEl.toggleExpand(!1);
|
|
614
|
+
}
|
|
615
|
+
setZIndex(t) {
|
|
616
|
+
this.widgetEl.setZIndex(t);
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
const M = "https://widgets.ace.teliacompany.net", y = document.createElement("template");
|
|
538
620
|
y.innerHTML = `<style>
|
|
539
621
|
@keyframes slideDown {
|
|
540
622
|
from {
|
|
@@ -609,9 +691,9 @@ y.innerHTML = `<style>
|
|
|
609
691
|
</style>`;
|
|
610
692
|
const x = document.createElement("template");
|
|
611
693
|
x.innerHTML = '<div class="widget-frame-container"></div>';
|
|
612
|
-
class
|
|
694
|
+
class $ extends HTMLElement {
|
|
613
695
|
constructor() {
|
|
614
|
-
super(), this.widget = null, this.activated = !1, this.active = !1, this.iframeEl = null, this.trigger = null, 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) => {
|
|
696
|
+
super(), this.widget = null, this.activated = !1, this.active = !1, this.iframeEl = null, this.trigger = null, this._messageQueue = [], this.api = new T(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) => {
|
|
615
697
|
this.toggleExpand();
|
|
616
698
|
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(y.content.cloneNode(!0)), this.shadow.appendChild(x.content.cloneNode(!0));
|
|
617
699
|
}
|
|
@@ -631,7 +713,7 @@ class T extends HTMLElement {
|
|
|
631
713
|
this.trigger && (this.trigger.widgetId = t, this.trigger.id = `ace-trigger_${t}`), this.setAttribute("widgetid", t);
|
|
632
714
|
}
|
|
633
715
|
get apiUrl() {
|
|
634
|
-
return this.getAttribute("apiurl") ||
|
|
716
|
+
return this.getAttribute("apiurl") || M;
|
|
635
717
|
}
|
|
636
718
|
set apiUrl(t) {
|
|
637
719
|
this.trigger && (this.trigger.apiUrl = t), this.setAttribute("apiurl", t);
|
|
@@ -659,18 +741,18 @@ class T extends HTMLElement {
|
|
|
659
741
|
async _loadWidget(t) {
|
|
660
742
|
return await (await fetch(`${this.apiUrl}/api/widget/${t}`)).json();
|
|
661
743
|
}
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
744
|
+
dispatch(t, e = {}) {
|
|
745
|
+
var s;
|
|
746
|
+
const i = {
|
|
747
|
+
type: t,
|
|
748
|
+
data: e
|
|
749
|
+
};
|
|
750
|
+
if (e.widgetId || (e.widgetId = this.widgetId), !this.iframeEl) {
|
|
751
|
+
this._messageQueue.push(i);
|
|
752
|
+
return;
|
|
753
|
+
}
|
|
754
|
+
(s = this.iframeEl.contentWindow) == null || s.postMessage(i, "*");
|
|
755
|
+
}
|
|
674
756
|
async deactivate() {
|
|
675
757
|
this.activated = !1, this.render();
|
|
676
758
|
}
|
|
@@ -695,30 +777,38 @@ class T extends HTMLElement {
|
|
|
695
777
|
height: "100%",
|
|
696
778
|
"border-radius": "0.7rem"
|
|
697
779
|
}, e = document.createElement("iframe");
|
|
698
|
-
Object.entries(t).forEach(([s,
|
|
699
|
-
e.style.setProperty(s,
|
|
780
|
+
Object.entries(t).forEach(([s, r]) => {
|
|
781
|
+
e.style.setProperty(s, r);
|
|
700
782
|
}), e.src = `${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true`, this.iframeEl = e;
|
|
701
783
|
}
|
|
784
|
+
executeMessageQueue() {
|
|
785
|
+
this._messageQueue.forEach((t) => {
|
|
786
|
+
this.dispatch(t.type, t.data);
|
|
787
|
+
}), this._messageQueue = [];
|
|
788
|
+
}
|
|
702
789
|
isExpanded() {
|
|
703
790
|
return this.expanded === "true";
|
|
704
791
|
}
|
|
705
|
-
toggleExpand() {
|
|
706
|
-
this.expanded = this.isExpanded() ? "false" : "true", this.trigger && this.trigger.setActive(this.isExpanded());
|
|
792
|
+
toggleExpand(t) {
|
|
793
|
+
typeof t == "boolean" ? this.expanded = t ? "true" : "false" : this.expanded = this.isExpanded() ? "false" : "true", this.trigger && this.trigger.setActive(this.isExpanded());
|
|
794
|
+
}
|
|
795
|
+
setZIndex(t) {
|
|
796
|
+
this.zIndex = t, this.render();
|
|
707
797
|
}
|
|
708
798
|
render() {
|
|
709
|
-
var i, s,
|
|
799
|
+
var i, s, r;
|
|
710
800
|
if (!this.iframeEl)
|
|
711
801
|
return;
|
|
712
802
|
this.isExpanded() ? (this.classList.add("expanded"), this.classList.remove("hidden")) : this.classList.remove("expanded");
|
|
713
803
|
const t = this.activated ? "block" : "none";
|
|
714
804
|
this.iframeEl.style.setProperty("display", t), this.activated ? this.classList.add("activated") : this.classList.remove("activated");
|
|
715
805
|
const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".widget-frame-container");
|
|
716
|
-
e && e.childNodes.length === 0 && e.appendChild(this.iframeEl), this.trigger && ((s = this.shadowRoot) == null ? void 0 : s.querySelectorAll("ace-trigger").length) === 0 && ((
|
|
806
|
+
e && e.childNodes.length === 0 && e.appendChild(this.iframeEl), e && this.zIndex !== -1 && (e.style.zIndex = this.zIndex.toString()), this.trigger && ((s = this.shadowRoot) == null ? void 0 : s.querySelectorAll("ace-trigger").length) === 0 && ((r = this.shadowRoot) == null || r.appendChild(this.trigger));
|
|
717
807
|
}
|
|
718
808
|
}
|
|
719
|
-
window.customElements.get("ace-widget") || window.customElements.define("ace-widget",
|
|
720
|
-
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger",
|
|
809
|
+
window.customElements.get("ace-widget") || window.customElements.define("ace-widget", $);
|
|
810
|
+
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", v);
|
|
721
811
|
export {
|
|
722
|
-
|
|
723
|
-
|
|
812
|
+
k as SiteComponent,
|
|
813
|
+
$ as WidgetComponent
|
|
724
814
|
};
|
package/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(p,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(p=typeof globalThis<"u"?globalThis:p||self,u(p["@telia-ace/widget-site"]={}))})(this,function(p){"use strict";
|
|
1
|
+
(function(p,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(p=typeof globalThis<"u"?globalThis:p||self,u(p["@telia-ace/widget-site"]={}))})(this,function(p){"use strict";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)}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(d=>{var o;return((o=d.widget)==null?void 0:o.name)===t});e(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}class k{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}}const w="https://widgets.ace.teliacompany.net",I="https://embed.webprovisions.io",A=()=>{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._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new k(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")||w}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||I}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){A(),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._environment.executePreloadedHandlers(((s=n.widget)==null?void 0:s.name)||"")}})}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,(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.widgetId)})}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!==w&&(i.apiUrl=this.apiUrl),document.body.appendChild(i)),this._widgets={...this._widgets,[t]:i}}render(){if(!this._site){this.shadow.innerHTML="";return}const t=S(this._site);for(const[e,i]of Object.entries(this._widgets)){const s=t.find(n=>n.widgetId===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 S=r=>{const t=[];return(r.triggers||[]).filter(e=>e.triggerType==="visit").forEach(e=>{const i=window.location.pathname,s=e.condition.outputs||[];e.condition.type==="url"&&s.forEach(n=>{const d=n.action.type==="render_widget";if((n.value===i||n.value==="*")&&d){let c={widgetId:""};try{c=JSON.parse(n.action.data)}catch{c={widgetId:""}}const g=t.findIndex(l=>l.widgetId===c.widgetId)>-1,a=((r==null?void 0:r.widgets)||[]).find(l=>l.widgetId===c.widgetId);a&&!g&&t.push(a)}})}),t},h=(r,t,e)=>{r&&e.style.setProperty(t,r)},T=(r,t)=>{var e,i,s,n,d,o,c,g,a;h((e=r.colors)==null?void 0:e.primaryBackground,"--primary-background",t),h((i=r.colors)==null?void 0:i.textOnPrimaryBackground,"--text-on-primary-background",t),h((s=r.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),h((n=r.colors)==null?void 0:n.textOnSecondaryBackground,"--text-on-secondary-background",t),h((d=r.colors)==null?void 0:d.interactiveDestructiveBackground,"--destructive-color",t),h((o=r.colors)==null?void 0:o.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),h((c=r.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),h((g=r.colors)==null?void 0:g.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),h((a=r.colors)==null?void 0:a.focusColor,"--focus-color",t)},z=(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(o=>`${o.name}="${o.value}"`).join(" ")}>${s}${t}</svg>`},f=document.createElement("template");f.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
|
-
></span>`;const
|
|
3
|
+
></span>`;const b=document.createElement("template");b.innerHTML=`<style>
|
|
4
4
|
:host {
|
|
5
5
|
display: inline-block;
|
|
6
6
|
--size-sm: 1rem;
|
|
@@ -34,7 +34,7 @@ svg {
|
|
|
34
34
|
min-width: var(--size-lg);
|
|
35
35
|
width: var(--size-lg);
|
|
36
36
|
}
|
|
37
|
-
</style>`;class
|
|
37
|
+
</style>`;class v extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(b.content.cloneNode(!0)),this.shadow.appendChild(f.content.cloneNode(!0))}get svg(){return this.getAttribute("svg")||""}set svg(t){this.setAttribute("svg",t)}get size(){return this.getAttribute("size")||""}set size(t){this.setAttribute("size",t),this.classList.remove("ace-icon--sm","ace-icon--md","ace--icon-lg"),this.classList.add(`ace-icon--${t}`)}static get observedAttributes(){return["svg","size"]}attributeChangedCallback(t,e,i){this.render()}render(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector(".ace-icon__container");if(t){const i=z({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=i}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",v);const M={name:"question",svg:'<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C59.9827 16.5432 47.4568 4.01731 32 4ZM32 55.6923C18.9151 55.6923 8.30769 45.0849 8.30769 32C8.30769 18.9151 18.9151 8.30769 32 8.30769C45.0849 8.30769 55.6923 18.9151 55.6923 32C55.6775 45.0788 45.0788 55.6775 32 55.6923Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.9423 37.5723L36.311 32.9068L36.7354 32.4448C39.7555 29.1161 40.7645 27.0647 40.7645 24.5087C40.7645 23.1091 40.4251 21.7942 39.7041 20.6491C38.3044 18.3587 35.6323 16.9166 32.2816 16.9166C28.7565 16.9166 25.3125 18.7414 23.2581 21.6772L23.1201 21.8791C22.8232 22.3032 22.696 22.6849 22.696 22.9818C22.696 23.7029 23.926 25.9932 25.2833 25.9932C25.5378 25.9932 25.7922 25.9084 26.0467 25.7388C26.2588 25.5691 26.5981 25.2298 27.0647 24.7208C28.8885 22.6849 30.1185 21.9215 31.7726 21.9215C33.6813 21.9215 35.081 23.1939 35.081 24.8905C35.081 26.375 34.2751 27.7746 32.3664 29.8529L28.2523 34.2216C27.9554 34.6033 27.7857 34.9426 27.7857 35.282C27.7857 35.6213 27.9978 36.1726 28.4219 36.8937C29.0581 37.8692 29.7368 38.3782 30.4578 38.3782C30.9244 38.3782 31.3909 38.1237 31.9423 37.5723ZM30.882 47.4972C29.2278 47.4972 27.6585 44.7403 27.6585 43.6799C27.6585 42.1954 30.0761 40.6261 32.4089 40.6261C33.6389 40.6261 34.2751 41.1775 34.2751 42.3227C34.2751 44.0616 33.4692 45.843 32.4513 46.7761C31.9423 47.2427 31.4334 47.4972 30.882 47.4972Z"/></svg>'},y=document.createElement("template");y.innerHTML=`<style>
|
|
38
38
|
:host {
|
|
39
39
|
position: fixed;
|
|
40
40
|
display: flex;
|
|
@@ -179,7 +179,7 @@ svg {
|
|
|
179
179
|
box-sizing: border-box;
|
|
180
180
|
transition: transform 200ms ease-out;
|
|
181
181
|
}
|
|
182
|
-
</style>`;const
|
|
182
|
+
</style>`;const x=document.createElement("template");x.innerHTML=`<div class="trigger-container">
|
|
183
183
|
<button id="trigger-btn" class="trigger">
|
|
184
184
|
<span class="trigger-close">
|
|
185
185
|
<svg
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class
|
|
212
|
+
</div>`;class _ 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(y.content.cloneNode(!0)),this.shadow.appendChild(x.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&&T(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 o,c,g;const t=(c=(o=this.widget)==null?void 0:o.configuration)==null?void 0:c.branding,e=(g=t==null?void 0:t.graphics)==null?void 0:g.trigger;if(e){const a=document.createElement("img");return a.src=e,a.classList.add("trigger-icon"),a.alt="",a}const i={type:"Telia",content:"question"},s=async a=>M,{type:n,content:d}=i;switch(n){case"Telia":{const a=await s();if(a){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=a.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,d,o,c,g,a,l;if(!(((o=(d=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:d.other)==null?void 0:o.showButtonLabel)||!1))return null;const e=((l=(a=(g=(c=this.widget)==null?void 0:c.configuration)==null?void 0:g.branding)==null?void 0:a.other)==null?void 0:l.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,d;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=(d=this.shadowRoot)==null?void 0:d.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",_),window.customElements.get("ace-icon")||window.customElements.define("ace-icon",v);class ${constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}}const B="https://widgets.ace.teliacompany.net",E=document.createElement("template");E.innerHTML=`<style>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -280,4 +280,4 @@ svg {
|
|
|
280
280
|
animation: slideDown 0.3s linear;
|
|
281
281
|
}
|
|
282
282
|
}
|
|
283
|
-
</style>`;const
|
|
283
|
+
</style>`;const C=document.createElement("template");C.innerHTML='<div class="widget-frame-container"></div>';class L extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new $(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(E.content.cloneNode(!0)),this.shadow.appendChild(C.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")||B}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}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)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`,this.iframeEl=e}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=t?"true":"false":this.expanded=this.isExpanded()?"false":"true",this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var i,s,n;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=(i=this.shadowRoot)==null?void 0:i.querySelector(".widget-frame-container");e&&e.childNodes.length===0&&e.appendChild(this.iframeEl),e&&this.zIndex!==-1&&(e.style.zIndex=this.zIndex.toString()),this.trigger&&((s=this.shadowRoot)==null?void 0:s.querySelectorAll("ace-trigger").length)===0&&((n=this.shadowRoot)==null||n.appendChild(this.trigger))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",L),window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",_),p.SiteComponent=m,p.WidgetComponent=L,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
package/site-api.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { SiteComponent } from './site.component';
|
|
2
|
+
import { WidgetComponent } from './widget.component';
|
|
3
|
+
export declare class SiteAPI {
|
|
4
|
+
private _site;
|
|
5
|
+
constructor(_site: SiteComponent);
|
|
6
|
+
storagePolicy(policies: string[]): void;
|
|
7
|
+
disallowStorageKey(key: string): void;
|
|
8
|
+
getWidgets(): Record<string, WidgetComponent>;
|
|
9
|
+
}
|
package/site.component.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { Environment } from './environment';
|
|
2
|
+
import { SiteAPI } from './site-api';
|
|
1
3
|
import { WidgetComponent } from './widget.component';
|
|
2
4
|
type Site = {
|
|
3
5
|
id: string;
|
|
@@ -33,13 +35,14 @@ export declare class SiteComponent extends HTMLElement {
|
|
|
33
35
|
_site: Site | null;
|
|
34
36
|
_widgets: Record<string, WidgetComponent>;
|
|
35
37
|
_path: string;
|
|
38
|
+
_api: SiteAPI;
|
|
39
|
+
_environment: Environment;
|
|
36
40
|
shadow: ShadowRoot;
|
|
37
41
|
constructor();
|
|
38
42
|
connectedCallback(): Promise<void>;
|
|
39
43
|
disconnectedCallback(): void;
|
|
40
44
|
attributeChangedCallback(_name: string, _oldVal: string, _newVal: string): void;
|
|
41
45
|
routeChangeListener: () => void;
|
|
42
|
-
_verifyInstallation(): Promise<void>;
|
|
43
46
|
_loadSite(): Promise<void>;
|
|
44
47
|
addWidgetEl(widgetId: string): void;
|
|
45
48
|
render(): void;
|
package/types/widget.d.ts
CHANGED
package/types.d.ts
ADDED
package/widget-api.d.ts
ADDED
package/widget.component.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { TriggerComponent } from './trigger.component';
|
|
2
2
|
import { Widget } from './types/widget';
|
|
3
|
+
import { WidgetAPI } from './widget-api';
|
|
3
4
|
export declare class WidgetComponent extends HTMLElement {
|
|
4
5
|
static get observedAttributes(): string[];
|
|
5
6
|
shadow: ShadowRoot;
|
|
@@ -8,6 +9,12 @@ export declare class WidgetComponent extends HTMLElement {
|
|
|
8
9
|
active: boolean;
|
|
9
10
|
iframeEl: HTMLIFrameElement | null;
|
|
10
11
|
trigger: TriggerComponent | null;
|
|
12
|
+
_messageQueue: {
|
|
13
|
+
type: string;
|
|
14
|
+
data: Record<string, any>;
|
|
15
|
+
}[];
|
|
16
|
+
api: WidgetAPI;
|
|
17
|
+
zIndex: number;
|
|
11
18
|
get expanded(): string;
|
|
12
19
|
set expanded(value: string);
|
|
13
20
|
get widgetId(): string;
|
|
@@ -20,9 +27,12 @@ export declare class WidgetComponent extends HTMLElement {
|
|
|
20
27
|
isActivated(): boolean;
|
|
21
28
|
activate(): Promise<void>;
|
|
22
29
|
private _loadWidget;
|
|
30
|
+
dispatch(type: string, data?: Record<string, any>): void;
|
|
23
31
|
deactivate(): Promise<void>;
|
|
24
32
|
private _createIFrame;
|
|
33
|
+
executeMessageQueue(): void;
|
|
25
34
|
isExpanded(): boolean;
|
|
26
|
-
toggleExpand(): void;
|
|
35
|
+
toggleExpand(value?: boolean): void;
|
|
36
|
+
setZIndex(value: number): void;
|
|
27
37
|
render(): void;
|
|
28
38
|
}
|