@telia-ace/widget-site 1.1.120-rc.8 → 1.1.120
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 +4 -4
- package/index.mjs +168 -152
- package/index.umd.js +6 -6
- 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
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class T{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var r;return((r=s.widget)==null?void 0:r.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const r=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t});i(r==null?void 0:r.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const $="##__SITES_VERSION__##";class z{constructor(t){this._site=t}storagePolicy(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("disallow-storage-key",{storageKey:t})})}getWidgets(){return this._site._widgets}version(){const t=$;return{widgets:this._site.getWidgetsVersions(),sites:t}}}class M{constructor(t,i){this.triggerType=t,this.condition=i,this.triggerType=t,this.condition=i}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const i=[];return this.condition.outputs.filter(e=>e.action.type==="render_widget"&&W(e.value,t)).forEach(e=>{let s={widgetId:""};try{s=JSON.parse(e.action.data)}catch{s={widgetId:""}}i.push(s.widgetId)}),i}}const W=(n,t)=>{if(n==="*"||n==="/*"||n===t)return!0;if(n.endsWith("/*")){const s=n.slice(0,-2);return t.startsWith(s)}return!1},B=(n,t)=>{const i=s=>`ace_${n.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[r,a])=>{const[d,c]=r.split("-");if(i(c)!=r)return s;try{const o=JSON.parse(a);s[c]=o.value}catch{return s}return s},{})},u="https://widgets.ace.teliacompany.net/v1",U="https://embed.webprovisions.io",H=()=>{if(typeof window<"u"){const n=history.pushState,t=history.replaceState;history.pushState=function(...i){n.apply(history,i),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...i){t.apply(history,i),window.dispatchEvent(new Event("locationchange"))}}};class y extends HTMLElement{constructor(){var t;super(),this._site=null,this._widgets={},this._loadedVersions={},this._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new z(this),this._environment=new T(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||u}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||U}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){H(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s;const{type:i,data:e}=t.data;if(i==="widget-minimize")this._widgets[e.widgetId].toggleExpand();else if(i==="widget-activated"){this._widgets[e.widgetId].executeMessageQueue();const r=this._widgets[e.widgetId];r&&(this._loadedVersions[e.widgetId]=e.version,this._environment.executePreloadedHandlers(((s=r.widget)==null?void 0:s.name)||""));try{const a=JSON.parse(e.storage),d=B(e.widgetId,a);typeof d.open=="boolean"&&(r.disableAnimations(),r.toggleExpand(d.open),setTimeout(()=>{r.enableAnimations()},600))}catch{console.warn("unable to parse widget storage")}}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,i,e){this.render()}async _loadSite(){var s;const i=await(await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(),e=location.hostname;if(!((i==null?void 0:i.hosts)||[]).includes(e)){console.warn(`the host "${e}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=i,this._site&&(this._site.triggers=this._site.triggers.map(r=>new M(r.triggerType,r.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async r=>{this.addWidgetEl(r.id)})}addWidgetEl(t){const i=`ace-widget_${t}`;let e=document.getElementById(i);e||(e=document.createElement("ace-widget"),e.id=i,e.widgetId=t,this.apiUrl!==u&&(e.apiUrl=this.apiUrl),document.body.appendChild(e)),this._widgets={...this._widgets,[t]:e}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=O(this._site);for(const[i,e]of Object.entries(this._widgets)){const s=t.find(r=>r.id===i);s&&!e.isActivated()?e.activate():!s&&e.isActivated()&&e.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",y);const O=n=>{const t=window.location.pathname;return n.triggers.reduce((e,s)=>(s.shouldActivate(t).forEach(a=>{const d=e.find(o=>o.id===a),c=((n==null?void 0:n.widgets)||[]).find(o=>o.id===a);!d&&c&&e.push({id:a})}),e),[])},g=(n,t,i)=>{n&&i.style.setProperty(t,n)},P=(n,t)=>{var i,e,s,r,a,d,c,o,l;g((i=n.colors)==null?void 0:i.primaryBackground,"--primary-background",t),g((e=n.colors)==null?void 0:e.textOnPrimaryBackground,"--text-on-primary-background",t),g((s=n.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),g((r=n.colors)==null?void 0:r.textOnSecondaryBackground,"--text-on-secondary-background",t),g((a=n.colors)==null?void 0:a.interactiveDestructiveBackground,"--destructive-color",t),g((d=n.colors)==null?void 0:d.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),g((c=n.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),g((o=n.colors)==null?void 0:o.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),g((l=n.colors)==null?void 0:l.focusColor,"--focus-color",t)},j=(n={})=>{const{content:t="",title:i,attributes:e=[]}=n;let s="";const r=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...e];return i&&(s=`<title>${i}</title>`),`<svg ${r.map(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},_=document.createElement("template");_.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
3
|
></span>`;const x=document.createElement("template");var f;const p=(f=document.querySelector("script[nonce]"))==null?void 0:f.getAttribute("nonce");x.innerHTML=`<style ${p?`nonce="${p}"`:""}>
|
|
4
4
|
:host {
|
|
@@ -34,7 +34,7 @@ svg {
|
|
|
34
34
|
min-width: var(--size-lg);
|
|
35
35
|
width: var(--size-lg);
|
|
36
36
|
}
|
|
37
|
-
</style>`;class E extends HTMLElement{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"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(x.content.cloneNode(!0)),this.shadow.appendChild(_.content.cloneNode(!0))}attributeChangedCallback(t,e
|
|
37
|
+
</style>`;class E extends HTMLElement{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"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(x.content.cloneNode(!0)),this.shadow.appendChild(_.content.cloneNode(!0))}attributeChangedCallback(t,i,e){this.render()}render(){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".ace-icon__container");if(t){const e=j({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=e}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",E);const V={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>'},C=document.createElement("template");var b;const m=(b=document.querySelector("script[nonce]"))==null?void 0:b.getAttribute("nonce");C.innerHTML=`<style ${m?`nonce="${m}"`:""}>
|
|
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 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
|
|
212
|
+
</div>`;class A extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(C.content.cloneNode(!0)),this.shadow.appendChild(L.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&P(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,i=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(i){const o=document.createElement("img");return o.src=i,o.classList.add("trigger-icon"),o.alt="",o}const e={type:"Telia"},s=async o=>V,{type:r}=e;switch(r){case"Telia":{const o=await s();if(o){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=o.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,r,a,d,c,o,l,h;if(!(((d=(a=(r=(s=this.widget)==null?void 0:s.configuration)==null?void 0:r.branding)==null?void 0:a.other)==null?void 0:d.showButtonLabel)||!1))return null;const i=((h=(l=(o=(c=this.widget)==null?void 0:c.configuration)==null?void 0:o.branding)==null?void 0:l.other)==null?void 0:h.buttonLabelText)||"Widget trigger",e=document.createElement("button");return e.setAttribute("type","button"),e.setAttribute("aria-label",i),e.classList.add("trigger-label"),e.addEventListener("click",this._onClicked),e.innerHTML=i,e}render(){var s,r,a,d,c,o,l;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),i=this._renderButtonLabel();(r=t==null?void 0:t.querySelector(".trigger-label"))==null||r.remove(),t&&i&&t.prepend(i);const e=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");if(e){const h=((l=(o=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding)==null?void 0:o.other)==null?void 0:l.buttonLabelText)||"Widget trigger";e.classList.toggle("active",this.active),e.classList.toggle("rendered",this.loaded),e.addEventListener("click",this._onClicked),e.setAttribute("type","button"),e.setAttribute("aria-label",h),this.icon&&e.prepend(this.icon)}}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",A);window.customElements.get("ace-icon")||window.customElements.define("ace-icon",E);class N{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}setFullscreenMode(t){this.widgetEl.dispatch("set-fullscreen-mode",{value:t})}}const q="https://widgets.ace.teliacompany.net/v1",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,i,e){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var i,e;((i=t.data)==null?void 0:i.type)==="widget-set-active"&&typeof((e=t.data.data)==null?void 0:e.active)=="boolean"&&(this.active=t.data.data.active)}),this.render()}isActivated(){return this.activated}disableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="0ms")}enableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="300ms")}_getContainerEl(){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(".widget-frame-container"))||null}async activate(){var i;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((i=window.ace)==null?void 0:i.applications)||[]).find(e=>e.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/widget/${t}`)).json()}dispatch(t,i={}){var s;const e={type:t,data:i};if(i.widgetId||(i.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(e);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(e,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var s;if(!((s=this.widget)!=null&&s.distributionName)||this.iframeEl||!this.widget.linked)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},i=document.createElement("iframe");Object.entries(t).forEach(([r,a])=>{i.style.setProperty(r,a)});const e=this.apiUrl.replace("/v1","").replace("/api","");i.src=`${e}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,i.title=this.getIFrameTitle(),this.iframeEl=i}getIFrameTitle(){var i,e;let t=(i=this.widget)==null?void 0:i.configuration;if(typeof t=="string")try{t=JSON.parse(t)}catch{t={}}return((e=t==null?void 0:t.texts)==null?void 0:e["iframe.title"])||"ACE Widget"}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){typeof t!="boolean"?this.expanded=this.isExpanded()?"false":"true":this.isExpanded()!==t&&(this.expanded=t?"true":"false"),this.dispatch("set-open",{value:this.isExpanded()}),this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var e,s;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("expanded"),this.classList.remove("hidden")):this.classList.remove("expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const i=this._getContainerEl();i&&i.childNodes.length===0&&i.appendChild(this.iframeEl),i&&this.zIndex!==-1&&(i.style.zIndex=this.zIndex.toString()),this.trigger&&((e=this.shadowRoot)==null?void 0:e.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.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,13 +1,13 @@
|
|
|
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: [],
|
|
5
5
|
_w: [],
|
|
6
|
-
widget: function(
|
|
7
|
-
window.ace._w.push([
|
|
6
|
+
widget: function(i, e) {
|
|
7
|
+
window.ace._w.push([i, e]);
|
|
8
8
|
},
|
|
9
|
-
configure: function(
|
|
10
|
-
window.ace._c.push(
|
|
9
|
+
configure: function(i) {
|
|
10
|
+
window.ace._c.push(i);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
}
|
|
@@ -16,15 +16,15 @@ class I {
|
|
|
16
16
|
}
|
|
17
17
|
_bootstrap() {
|
|
18
18
|
const t = globalThis.ace;
|
|
19
|
-
globalThis.ace = this, this._bootstrapped = !0, ((t == null ? void 0 : t._w) || []).forEach(([
|
|
20
|
-
this.widget(
|
|
21
|
-
}), ((t == null ? void 0 : t._c) || []).forEach((
|
|
22
|
-
this.configure(
|
|
19
|
+
globalThis.ace = this, this._bootstrapped = !0, ((t == null ? void 0 : t._w) || []).forEach(([i, e]) => {
|
|
20
|
+
this.widget(i, e);
|
|
21
|
+
}), ((t == null ? void 0 : t._c) || []).forEach((i) => {
|
|
22
|
+
this.configure(i);
|
|
23
23
|
});
|
|
24
24
|
}
|
|
25
25
|
executePreloadedHandlers(t) {
|
|
26
|
-
(this._widgetAPIHandlers.get(t) || []).forEach((
|
|
27
|
-
|
|
26
|
+
(this._widgetAPIHandlers.get(t) || []).forEach((e) => {
|
|
27
|
+
e();
|
|
28
28
|
}), this._widgetAPIHandlers.set(t, []);
|
|
29
29
|
}
|
|
30
30
|
configure(t) {
|
|
@@ -35,44 +35,44 @@ class I {
|
|
|
35
35
|
version() {
|
|
36
36
|
return this._api.version();
|
|
37
37
|
}
|
|
38
|
-
widget(t,
|
|
39
|
-
const
|
|
38
|
+
widget(t, i) {
|
|
39
|
+
const e = 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
|
-
if (!
|
|
45
|
+
if (!e) {
|
|
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
|
-
|
|
54
|
+
i(r == null ? void 0 : r.api);
|
|
55
55
|
}), this._widgetAPIHandlers.set(t, s);
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
|
-
e
|
|
58
|
+
i(e.api);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
const S = "
|
|
61
|
+
const S = "##__SITES_VERSION__##";
|
|
62
62
|
class T {
|
|
63
63
|
constructor(t) {
|
|
64
64
|
this._site = t;
|
|
65
65
|
}
|
|
66
66
|
storagePolicy(t) {
|
|
67
|
-
Object.entries(this._site._widgets).forEach(([
|
|
68
|
-
|
|
67
|
+
Object.entries(this._site._widgets).forEach(([i, e]) => {
|
|
68
|
+
e.dispatch("set-storage-policies", {
|
|
69
69
|
policies: t
|
|
70
70
|
});
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
disallowStorageKey(t) {
|
|
74
|
-
Object.entries(this._site._widgets).forEach(([
|
|
75
|
-
|
|
74
|
+
Object.entries(this._site._widgets).forEach(([i, e]) => {
|
|
75
|
+
e.dispatch("disallow-storage-key", {
|
|
76
76
|
storageKey: t
|
|
77
77
|
});
|
|
78
78
|
});
|
|
@@ -89,40 +89,40 @@ class T {
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
class $ {
|
|
92
|
-
constructor(t,
|
|
93
|
-
this.triggerType = t, this.condition =
|
|
92
|
+
constructor(t, i) {
|
|
93
|
+
this.triggerType = t, this.condition = i, this.triggerType = t, this.condition = i;
|
|
94
94
|
}
|
|
95
95
|
shouldActivate(t) {
|
|
96
96
|
if (this.triggerType !== "visit" || this.condition.type !== "url")
|
|
97
97
|
return [];
|
|
98
|
-
const
|
|
99
|
-
return this.condition.outputs.filter((
|
|
98
|
+
const i = [];
|
|
99
|
+
return this.condition.outputs.filter((e) => e.action.type === "render_widget" && z(e.value, t)).forEach((e) => {
|
|
100
100
|
let s = { widgetId: "" };
|
|
101
101
|
try {
|
|
102
|
-
s = JSON.parse(
|
|
102
|
+
s = JSON.parse(e.action.data);
|
|
103
103
|
} catch {
|
|
104
104
|
s = {
|
|
105
105
|
widgetId: ""
|
|
106
106
|
};
|
|
107
107
|
}
|
|
108
|
-
|
|
109
|
-
}),
|
|
108
|
+
i.push(s.widgetId);
|
|
109
|
+
}), i;
|
|
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
|
|
120
|
+
}, M = (n, t) => {
|
|
121
|
+
const i = (s) => `ace_${n.substring(0, 7)}-${s}`;
|
|
122
122
|
return Object.entries(t).reduce(
|
|
123
|
-
(s, [
|
|
124
|
-
const [d, c] =
|
|
125
|
-
if (
|
|
123
|
+
(s, [r, a]) => {
|
|
124
|
+
const [d, c] = r.split("-");
|
|
125
|
+
if (i(c) != r)
|
|
126
126
|
return s;
|
|
127
127
|
try {
|
|
128
128
|
const o = JSON.parse(a);
|
|
@@ -134,20 +134,20 @@ const z = (r, t) => {
|
|
|
134
134
|
},
|
|
135
135
|
{}
|
|
136
136
|
);
|
|
137
|
-
}, u = "https://widgets.ace.teliacompany.net", B = "https://embed.webprovisions.io", U = () => {
|
|
137
|
+
}, u = "https://widgets.ace.teliacompany.net/v1", B = "https://embed.webprovisions.io", U = () => {
|
|
138
138
|
if (typeof window < "u") {
|
|
139
|
-
const
|
|
140
|
-
history.pushState = function(...
|
|
141
|
-
|
|
142
|
-
}, history.replaceState = function(...
|
|
143
|
-
t.apply(history,
|
|
139
|
+
const n = history.pushState, t = history.replaceState;
|
|
140
|
+
history.pushState = function(...i) {
|
|
141
|
+
n.apply(history, i), window.dispatchEvent(new Event("locationchange"));
|
|
142
|
+
}, history.replaceState = function(...i) {
|
|
143
|
+
t.apply(history, i), window.dispatchEvent(new Event("locationchange"));
|
|
144
144
|
};
|
|
145
145
|
}
|
|
146
146
|
};
|
|
147
|
-
class
|
|
147
|
+
class W extends HTMLElement {
|
|
148
148
|
constructor() {
|
|
149
149
|
var t;
|
|
150
|
-
super(), this._site = null, this._widgets = {}, this._loadedVersions = {}, this._path = ((t = window == null ? void 0 : window.location) == null ? void 0 : t.pathname) || "", this._api = new T(this), this._environment = new
|
|
150
|
+
super(), this._site = null, this._widgets = {}, this._loadedVersions = {}, this._path = ((t = window == null ? void 0 : window.location) == null ? void 0 : t.pathname) || "", this._api = new T(this), this._environment = new k(this._api), this.routeChangeListener = () => {
|
|
151
151
|
this._path = window.location.pathname, this.render();
|
|
152
152
|
}, this.shadow = this.attachShadow({ mode: "open" });
|
|
153
153
|
}
|
|
@@ -175,19 +175,19 @@ class H extends HTMLElement {
|
|
|
175
175
|
async connectedCallback() {
|
|
176
176
|
U(), await this._loadSite(), this.render(), this._environment.bootstrap(), window.addEventListener("locationchange", this.routeChangeListener), window.addEventListener("message", (t) => {
|
|
177
177
|
var s;
|
|
178
|
-
const { type:
|
|
179
|
-
if (
|
|
180
|
-
this._widgets[
|
|
181
|
-
else if (
|
|
182
|
-
this._widgets[
|
|
183
|
-
const
|
|
184
|
-
|
|
185
|
-
((s =
|
|
178
|
+
const { type: i, data: e } = t.data;
|
|
179
|
+
if (i === "widget-minimize")
|
|
180
|
+
this._widgets[e.widgetId].toggleExpand();
|
|
181
|
+
else if (i === "widget-activated") {
|
|
182
|
+
this._widgets[e.widgetId].executeMessageQueue();
|
|
183
|
+
const r = this._widgets[e.widgetId];
|
|
184
|
+
r && (this._loadedVersions[e.widgetId] = e.version, this._environment.executePreloadedHandlers(
|
|
185
|
+
((s = r.widget) == null ? void 0 : s.name) || ""
|
|
186
186
|
));
|
|
187
187
|
try {
|
|
188
|
-
const a = JSON.parse(
|
|
189
|
-
typeof d.open == "boolean" && (
|
|
190
|
-
|
|
188
|
+
const a = JSON.parse(e.storage), d = M(e.widgetId, a);
|
|
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");
|
|
@@ -198,32 +198,32 @@ class H extends HTMLElement {
|
|
|
198
198
|
disconnectedCallback() {
|
|
199
199
|
window.removeEventListener("locationchange", this.routeChangeListener);
|
|
200
200
|
}
|
|
201
|
-
attributeChangedCallback(t,
|
|
201
|
+
attributeChangedCallback(t, i, e) {
|
|
202
202
|
this.render();
|
|
203
203
|
}
|
|
204
204
|
async _loadSite() {
|
|
205
205
|
var s;
|
|
206
|
-
const
|
|
207
|
-
if (!((
|
|
206
|
+
const i = await (await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(), e = location.hostname;
|
|
207
|
+
if (!((i == null ? void 0 : i.hosts) || []).includes(e)) {
|
|
208
208
|
console.warn(
|
|
209
|
-
`the host "${
|
|
209
|
+
`the host "${e}" needs to be configured as an allowed host in order to install widgets.`
|
|
210
210
|
);
|
|
211
211
|
return;
|
|
212
212
|
}
|
|
213
|
-
this._site =
|
|
214
|
-
(
|
|
215
|
-
)), (((s = this._site) == null ? void 0 : s.widgets) || []).forEach(async (
|
|
216
|
-
this.addWidgetEl(
|
|
213
|
+
this._site = i, this._site && (this._site.triggers = this._site.triggers.map(
|
|
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) {
|
|
220
|
-
const
|
|
221
|
-
let
|
|
222
|
-
|
|
220
|
+
const i = `ace-widget_${t}`;
|
|
221
|
+
let e = document.getElementById(
|
|
222
|
+
i
|
|
223
223
|
);
|
|
224
|
-
|
|
224
|
+
e || (e = document.createElement("ace-widget"), e.id = i, e.widgetId = t, this.apiUrl !== u && (e.apiUrl = this.apiUrl), document.body.appendChild(e)), this._widgets = {
|
|
225
225
|
...this._widgets,
|
|
226
|
-
[t]:
|
|
226
|
+
[t]: e
|
|
227
227
|
};
|
|
228
228
|
}
|
|
229
229
|
getWidgetsVersions() {
|
|
@@ -234,69 +234,69 @@ class H extends HTMLElement {
|
|
|
234
234
|
this.shadow.innerHTML = "";
|
|
235
235
|
return;
|
|
236
236
|
}
|
|
237
|
-
const t =
|
|
238
|
-
for (const [
|
|
237
|
+
const t = H(this._site);
|
|
238
|
+
for (const [i, e] of Object.entries(this._widgets)) {
|
|
239
239
|
const s = t.find(
|
|
240
|
-
(
|
|
240
|
+
(r) => r.id === i
|
|
241
241
|
);
|
|
242
|
-
s && !
|
|
242
|
+
s && !e.isActivated() ? e.activate() : !s && e.isActivated() && e.deactivate();
|
|
243
243
|
}
|
|
244
244
|
this.shadow.innerHTML = "";
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
|
-
window.customElements.get("ace-site") || window.customElements.define("ace-site",
|
|
248
|
-
const
|
|
247
|
+
window.customElements.get("ace-site") || window.customElements.define("ace-site", W);
|
|
248
|
+
const H = (n) => {
|
|
249
249
|
const t = window.location.pathname;
|
|
250
|
-
return
|
|
251
|
-
const d =
|
|
250
|
+
return n.triggers.reduce((e, s) => (s.shouldActivate(t).forEach((a) => {
|
|
251
|
+
const d = e.find((o) => o.id === a), c = ((n == null ? void 0 : n.widgets) || []).find(
|
|
252
252
|
(o) => o.id === a
|
|
253
253
|
);
|
|
254
|
-
!d && c &&
|
|
254
|
+
!d && c && e.push({
|
|
255
255
|
id: a
|
|
256
256
|
});
|
|
257
|
-
}),
|
|
258
|
-
}, g = (
|
|
259
|
-
|
|
260
|
-
}, O = (
|
|
261
|
-
var
|
|
262
|
-
g((
|
|
263
|
-
(
|
|
257
|
+
}), e), []);
|
|
258
|
+
}, g = (n, t, i) => {
|
|
259
|
+
n && i.style.setProperty(t, n);
|
|
260
|
+
}, O = (n, t) => {
|
|
261
|
+
var i, e, s, r, a, d, c, o, l;
|
|
262
|
+
g((i = n.colors) == null ? void 0 : i.primaryBackground, "--primary-background", t), g(
|
|
263
|
+
(e = n.colors) == null ? void 0 : e.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:
|
|
290
|
+
), g((l = n.colors) == null ? void 0 : l.focusColor, "--focus-color", t);
|
|
291
|
+
}, P = (n = {}) => {
|
|
292
|
+
const { content: t = "", title: i, attributes: e = [] } = 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
|
+
...e
|
|
298
298
|
];
|
|
299
|
-
return
|
|
299
|
+
return i && (s = `<title>${i}</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"
|
|
@@ -358,14 +358,14 @@ class x extends HTMLElement {
|
|
|
358
358
|
constructor() {
|
|
359
359
|
super(), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(_.content.cloneNode(!0)), this.shadow.appendChild(y.content.cloneNode(!0));
|
|
360
360
|
}
|
|
361
|
-
attributeChangedCallback(t,
|
|
361
|
+
attributeChangedCallback(t, i, e) {
|
|
362
362
|
this.render();
|
|
363
363
|
}
|
|
364
364
|
render() {
|
|
365
|
-
var
|
|
366
|
-
const t = (
|
|
365
|
+
var i;
|
|
366
|
+
const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".ace-icon__container");
|
|
367
367
|
if (t) {
|
|
368
|
-
const
|
|
368
|
+
const e = P({
|
|
369
369
|
content: this.svg,
|
|
370
370
|
attributes: [
|
|
371
371
|
{
|
|
@@ -375,7 +375,7 @@ class x extends HTMLElement {
|
|
|
375
375
|
],
|
|
376
376
|
title: void 0
|
|
377
377
|
});
|
|
378
|
-
t.innerHTML =
|
|
378
|
+
t.innerHTML = e;
|
|
379
379
|
}
|
|
380
380
|
}
|
|
381
381
|
}
|
|
@@ -596,34 +596,34 @@ class L extends HTMLElement {
|
|
|
596
596
|
async connectedCallback() {
|
|
597
597
|
this.widget = await this._loadWidget(this.widgetId), this.icon = await this._renderSymbol(), this.loaded = !0, this.render();
|
|
598
598
|
}
|
|
599
|
-
attributeChangedCallback(t,
|
|
599
|
+
attributeChangedCallback(t, i, e) {
|
|
600
600
|
this.render();
|
|
601
601
|
}
|
|
602
602
|
setActive(t) {
|
|
603
603
|
this.active = t, this.render();
|
|
604
604
|
}
|
|
605
605
|
_applyBranding() {
|
|
606
|
-
var t,
|
|
607
|
-
(
|
|
606
|
+
var t, i;
|
|
607
|
+
(i = (t = this.widget) == null ? void 0 : t.configuration) != null && i.branding && O(this.widget.configuration.branding, this);
|
|
608
608
|
}
|
|
609
609
|
async _loadWidget(t) {
|
|
610
|
-
const
|
|
610
|
+
const e = await (await fetch(`${this.apiUrl}/widget/${t}`)).json(), s = JSON.parse(e.configuration);
|
|
611
611
|
return {
|
|
612
|
-
...
|
|
612
|
+
...e,
|
|
613
613
|
configuration: s
|
|
614
614
|
};
|
|
615
615
|
}
|
|
616
616
|
async _renderSymbol() {
|
|
617
617
|
var a, d, c;
|
|
618
|
-
const t = (d = (a = this.widget) == null ? void 0 : a.configuration) == null ? void 0 : d.branding,
|
|
619
|
-
if (
|
|
618
|
+
const t = (d = (a = this.widget) == null ? void 0 : a.configuration) == null ? void 0 : d.branding, i = (c = t == null ? void 0 : t.graphics) == null ? void 0 : c.trigger;
|
|
619
|
+
if (i) {
|
|
620
620
|
const o = document.createElement("img");
|
|
621
|
-
return o.src =
|
|
621
|
+
return o.src = i, o.classList.add("trigger-icon"), o.alt = "", o;
|
|
622
622
|
}
|
|
623
|
-
const
|
|
623
|
+
const e = {
|
|
624
624
|
type: "Telia"
|
|
625
|
-
}, s = async (o) => V, { type:
|
|
626
|
-
switch (
|
|
625
|
+
}, s = async (o) => V, { type: r } = e;
|
|
626
|
+
switch (r) {
|
|
627
627
|
case "Telia": {
|
|
628
628
|
const o = await s();
|
|
629
629
|
if (o) {
|
|
@@ -646,19 +646,22 @@ 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
|
-
const
|
|
653
|
-
return
|
|
652
|
+
const i = ((h = (l = (o = (c = this.widget) == null ? void 0 : c.configuration) == null ? void 0 : o.branding) == null ? void 0 : l.other) == null ? void 0 : h.buttonLabelText) || "Widget trigger", e = document.createElement("button");
|
|
653
|
+
return e.setAttribute("type", "button"), e.setAttribute("aria-label", i), e.classList.add("trigger-label"), e.addEventListener("click", this._onClicked), e.innerHTML = i, e;
|
|
654
654
|
}
|
|
655
655
|
render() {
|
|
656
|
-
var s,
|
|
656
|
+
var s, r, a, d, c, o, l;
|
|
657
657
|
this._applyBranding(), this.classList.add("bottom-right"), this.classList.toggle("active", this.active);
|
|
658
|
-
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".trigger-container"),
|
|
659
|
-
(
|
|
660
|
-
const
|
|
661
|
-
|
|
658
|
+
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".trigger-container"), i = this._renderButtonLabel();
|
|
659
|
+
(r = t == null ? void 0 : t.querySelector(".trigger-label")) == null || r.remove(), t && i && t.prepend(i);
|
|
660
|
+
const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#trigger-btn");
|
|
661
|
+
if (e) {
|
|
662
|
+
const h = ((l = (o = (c = (d = this.widget) == null ? void 0 : d.configuration) == null ? void 0 : c.branding) == null ? void 0 : o.other) == null ? void 0 : l.buttonLabelText) || "Widget trigger";
|
|
663
|
+
e.classList.toggle("active", this.active), e.classList.toggle("rendered", this.loaded), e.addEventListener("click", this._onClicked), e.setAttribute("type", "button"), e.setAttribute("aria-label", h), this.icon && e.prepend(this.icon);
|
|
664
|
+
}
|
|
662
665
|
}
|
|
663
666
|
}
|
|
664
667
|
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", L);
|
|
@@ -680,7 +683,7 @@ class j {
|
|
|
680
683
|
this.widgetEl.dispatch("set-fullscreen-mode", { value: t });
|
|
681
684
|
}
|
|
682
685
|
}
|
|
683
|
-
const N = "https://widgets.ace.teliacompany.net", A = document.createElement("template");
|
|
686
|
+
const N = "https://widgets.ace.teliacompany.net/v1", A = document.createElement("template");
|
|
684
687
|
var v;
|
|
685
688
|
const w = (v = document.querySelector("script[nonce]")) == null ? void 0 : v.getAttribute("nonce");
|
|
686
689
|
A.innerHTML = `<style ${w ? `nonce="${w}"` : ""}>
|
|
@@ -756,13 +759,13 @@ A.innerHTML = `<style ${w ? `nonce="${w}"` : ""}>
|
|
|
756
759
|
animation: slideDown 0.3s linear;
|
|
757
760
|
}
|
|
758
761
|
</style>`;
|
|
759
|
-
const
|
|
760
|
-
|
|
762
|
+
const I = document.createElement("template");
|
|
763
|
+
I.innerHTML = '<div class="widget-frame-container"></div>';
|
|
761
764
|
class q extends HTMLElement {
|
|
762
765
|
constructor() {
|
|
763
766
|
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
767
|
this.toggleExpand();
|
|
765
|
-
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(A.content.cloneNode(!0)), this.shadow.appendChild(
|
|
768
|
+
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(A.content.cloneNode(!0)), this.shadow.appendChild(I.content.cloneNode(!0));
|
|
766
769
|
}
|
|
767
770
|
static get observedAttributes() {
|
|
768
771
|
return ["widgetid", "apiurl", "expanded"];
|
|
@@ -785,13 +788,13 @@ class q extends HTMLElement {
|
|
|
785
788
|
set apiUrl(t) {
|
|
786
789
|
this.trigger && (this.trigger.apiUrl = t), this.setAttribute("apiurl", t);
|
|
787
790
|
}
|
|
788
|
-
attributeChangedCallback(t,
|
|
791
|
+
attributeChangedCallback(t, i, e) {
|
|
789
792
|
this.render();
|
|
790
793
|
}
|
|
791
794
|
async connectedCallback() {
|
|
792
795
|
this.widget = await this._loadWidget(this.widgetId), window.addEventListener("message", (t) => {
|
|
793
|
-
var
|
|
794
|
-
((
|
|
796
|
+
var i, e;
|
|
797
|
+
((i = t.data) == null ? void 0 : i.type) === "widget-set-active" && typeof ((e = t.data.data) == null ? void 0 : e.active) == "boolean" && (this.active = t.data.data.active);
|
|
795
798
|
}), this.render();
|
|
796
799
|
}
|
|
797
800
|
isActivated() {
|
|
@@ -812,34 +815,34 @@ class q extends HTMLElement {
|
|
|
812
815
|
)) || null;
|
|
813
816
|
}
|
|
814
817
|
async activate() {
|
|
815
|
-
var
|
|
818
|
+
var i;
|
|
816
819
|
this.widget || (this.widget = await this._loadWidget(this.widgetId)), this._createIFrame(), this.activated = !0;
|
|
817
|
-
const t = (((
|
|
818
|
-
(
|
|
820
|
+
const t = (((i = window.ace) == null ? void 0 : i.applications) || []).find(
|
|
821
|
+
(e) => e.id === this.widgetId
|
|
819
822
|
);
|
|
820
823
|
t && (t.storage.get("open") && t.appendToDOM(), t.trigger.showTrigger()), this.render();
|
|
821
824
|
}
|
|
822
825
|
async _loadWidget(t) {
|
|
823
|
-
return await (await fetch(`${this.apiUrl}/
|
|
826
|
+
return await (await fetch(`${this.apiUrl}/widget/${t}`)).json();
|
|
824
827
|
}
|
|
825
|
-
dispatch(t,
|
|
828
|
+
dispatch(t, i = {}) {
|
|
826
829
|
var s;
|
|
827
|
-
const
|
|
830
|
+
const e = {
|
|
828
831
|
type: t,
|
|
829
|
-
data:
|
|
832
|
+
data: i
|
|
830
833
|
};
|
|
831
|
-
if (
|
|
832
|
-
this._messageQueue.push(
|
|
834
|
+
if (i.widgetId || (i.widgetId = this.widgetId), !this.iframeEl) {
|
|
835
|
+
this._messageQueue.push(e);
|
|
833
836
|
return;
|
|
834
837
|
}
|
|
835
|
-
(s = this.iframeEl.contentWindow) == null || s.postMessage(
|
|
838
|
+
(s = this.iframeEl.contentWindow) == null || s.postMessage(e, "*");
|
|
836
839
|
}
|
|
837
840
|
async deactivate() {
|
|
838
841
|
this.activated = !1, this.render();
|
|
839
842
|
}
|
|
840
843
|
_createIFrame() {
|
|
841
|
-
var
|
|
842
|
-
if (!((
|
|
844
|
+
var s;
|
|
845
|
+
if (!((s = this.widget) != null && s.distributionName) || this.iframeEl || !this.widget.linked)
|
|
843
846
|
return;
|
|
844
847
|
const t = {
|
|
845
848
|
display: "block",
|
|
@@ -857,10 +860,23 @@ class q extends HTMLElement {
|
|
|
857
860
|
width: "100%",
|
|
858
861
|
height: "100%",
|
|
859
862
|
"border-radius": "0.7rem"
|
|
860
|
-
},
|
|
861
|
-
Object.entries(t).forEach(([
|
|
862
|
-
|
|
863
|
-
})
|
|
863
|
+
}, i = document.createElement("iframe");
|
|
864
|
+
Object.entries(t).forEach(([r, a]) => {
|
|
865
|
+
i.style.setProperty(r, a);
|
|
866
|
+
});
|
|
867
|
+
const e = this.apiUrl.replace("/v1", "").replace("/api", "");
|
|
868
|
+
i.src = `${e}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`, i.title = this.getIFrameTitle(), this.iframeEl = i;
|
|
869
|
+
}
|
|
870
|
+
getIFrameTitle() {
|
|
871
|
+
var i, e;
|
|
872
|
+
let t = (i = this.widget) == null ? void 0 : i.configuration;
|
|
873
|
+
if (typeof t == "string")
|
|
874
|
+
try {
|
|
875
|
+
t = JSON.parse(t);
|
|
876
|
+
} catch {
|
|
877
|
+
t = {};
|
|
878
|
+
}
|
|
879
|
+
return ((e = t == null ? void 0 : t.texts) == null ? void 0 : e["iframe.title"]) || "ACE Widget";
|
|
864
880
|
}
|
|
865
881
|
executeMessageQueue() {
|
|
866
882
|
this._messageQueue.forEach((t) => {
|
|
@@ -879,19 +895,19 @@ class q extends HTMLElement {
|
|
|
879
895
|
this.zIndex = t, this.render();
|
|
880
896
|
}
|
|
881
897
|
render() {
|
|
882
|
-
var
|
|
898
|
+
var e, s;
|
|
883
899
|
if (!this.iframeEl)
|
|
884
900
|
return;
|
|
885
901
|
this.isExpanded() ? (this.classList.add("expanded"), this.classList.remove("hidden")) : this.classList.remove("expanded");
|
|
886
902
|
const t = this.activated ? "block" : "none";
|
|
887
903
|
this.iframeEl.style.setProperty("display", t), this.activated ? this.classList.add("activated") : this.classList.remove("activated");
|
|
888
|
-
const
|
|
889
|
-
|
|
904
|
+
const i = this._getContainerEl();
|
|
905
|
+
i && i.childNodes.length === 0 && i.appendChild(this.iframeEl), i && this.zIndex !== -1 && (i.style.zIndex = this.zIndex.toString()), this.trigger && ((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("ace-trigger").length) === 0 && ((s = this.shadowRoot) == null || s.appendChild(this.trigger));
|
|
890
906
|
}
|
|
891
907
|
}
|
|
892
908
|
window.customElements.get("ace-widget") || window.customElements.define("ace-widget", q);
|
|
893
909
|
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", L);
|
|
894
910
|
export {
|
|
895
|
-
|
|
911
|
+
W as SiteComponent,
|
|
896
912
|
q as WidgetComponent
|
|
897
913
|
};
|
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 S,T,$;class u{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const n=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t});i(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const z="##__SITES_VERSION__##";class M{constructor(t){this._site=t}storagePolicy(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("disallow-storage-key",{storageKey:t})})}getWidgets(){return this._site._widgets}version(){const t=z;return{widgets:this._site.getWidgetsVersions(),sites:t}}}class W{constructor(t,i){this.triggerType=t,this.condition=i,this.triggerType=t,this.condition=i}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const i=[];return this.condition.outputs.filter(e=>e.action.type==="render_widget"&&B(e.value,t)).forEach(e=>{let s={widgetId:""};try{s=JSON.parse(e.action.data)}catch{s={widgetId:""}}i.push(s.widgetId)}),i}}const B=(r,t)=>{if(r==="*"||r==="/*"||r===t)return!0;if(r.endsWith("/*")){const s=r.slice(0,-2);return t.startsWith(s)}return!1},U=(r,t)=>{const i=s=>`ace_${r.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[n,a])=>{const[d,c]=n.split("-");if(i(c)!=n)return s;try{const o=JSON.parse(a);s[c]=o.value}catch{return s}return s},{})},m="https://widgets.ace.teliacompany.net/v1",H="https://embed.webprovisions.io",O=()=>{if(typeof window<"u"){const r=history.pushState,t=history.replaceState;history.pushState=function(...i){r.apply(history,i),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...i){t.apply(history,i),window.dispatchEvent(new Event("locationchange"))}}};class w extends HTMLElement{constructor(){var t;super(),this._site=null,this._widgets={},this._loadedVersions={},this._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new M(this),this._environment=new u(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||m}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||H}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){O(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s;const{type:i,data:e}=t.data;if(i==="widget-minimize")this._widgets[e.widgetId].toggleExpand();else if(i==="widget-activated"){this._widgets[e.widgetId].executeMessageQueue();const n=this._widgets[e.widgetId];n&&(this._loadedVersions[e.widgetId]=e.version,this._environment.executePreloadedHandlers(((s=n.widget)==null?void 0:s.name)||""));try{const a=JSON.parse(e.storage),d=U(e.widgetId,a);typeof d.open=="boolean"&&(n.disableAnimations(),n.toggleExpand(d.open),setTimeout(()=>{n.enableAnimations()},600))}catch{console.warn("unable to parse widget storage")}}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,i,e){this.render()}async _loadSite(){var s;const i=await(await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(),e=location.hostname;if(!((i==null?void 0:i.hosts)||[]).includes(e)){console.warn(`the host "${e}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=i,this._site&&(this._site.triggers=this._site.triggers.map(n=>new W(n.triggerType,n.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.id)})}addWidgetEl(t){const i=`ace-widget_${t}`;let e=document.getElementById(i);e||(e=document.createElement("ace-widget"),e.id=i,e.widgetId=t,this.apiUrl!==m&&(e.apiUrl=this.apiUrl),document.body.appendChild(e)),this._widgets={...this._widgets,[t]:e}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=P(this._site);for(const[i,e]of Object.entries(this._widgets)){const s=t.find(n=>n.id===i);s&&!e.isActivated()?e.activate():!s&&e.isActivated()&&e.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",w);const P=r=>{const t=window.location.pathname;return r.triggers.reduce((e,s)=>(s.shouldActivate(t).forEach(a=>{const d=e.find(o=>o.id===a),c=((r==null?void 0:r.widgets)||[]).find(o=>o.id===a);!d&&c&&e.push({id:a})}),e),[])},g=(r,t,i)=>{r&&i.style.setProperty(t,r)},j=(r,t)=>{var i,e,s,n,a,d,c,o,l;g((i=r.colors)==null?void 0:i.primaryBackground,"--primary-background",t),g((e=r.colors)==null?void 0:e.textOnPrimaryBackground,"--text-on-primary-background",t),g((s=r.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),g((n=r.colors)==null?void 0:n.textOnSecondaryBackground,"--text-on-secondary-background",t),g((a=r.colors)==null?void 0:a.interactiveDestructiveBackground,"--destructive-color",t),g((d=r.colors)==null?void 0:d.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),g((c=r.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),g((o=r.colors)==null?void 0:o.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),g((l=r.colors)==null?void 0:l.focusColor,"--focus-color",t)},V=(r={})=>{const{content:t="",title:i,attributes:e=[]}=r;let s="";const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...e];return i&&(s=`<title>${i}</title>`),`<svg ${n.map(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},f=document.createElement("template");f.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
|
-
></span>`;const
|
|
3
|
+
></span>`;const b=document.createElement("template"),v=(S=document.querySelector("script[nonce]"))==null?void 0:S.getAttribute("nonce");b.innerHTML=`<style ${v?`nonce="${v}"`:""}>
|
|
4
4
|
:host {
|
|
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 y extends HTMLElement{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"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(b.content.cloneNode(!0)),this.shadow.appendChild(f.content.cloneNode(!0))}attributeChangedCallback(t,i,e){this.render()}render(){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".ace-icon__container");if(t){const e=V({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=e}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",y);const N={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>'},_=document.createElement("template"),x=(T=document.querySelector("script[nonce]"))==null?void 0:T.getAttribute("nonce");_.innerHTML=`<style ${x?`nonce="${x}"`:""}>
|
|
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 E=document.createElement("template");E.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 C extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(_.content.cloneNode(!0)),this.shadow.appendChild(E.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&j(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,i=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(i){const o=document.createElement("img");return o.src=i,o.classList.add("trigger-icon"),o.alt="",o}const e={type:"Telia"},s=async o=>N,{type:n}=e;switch(n){case"Telia":{const o=await s();if(o){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=o.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,n,a,d,c,o,l,p;if(!(((d=(a=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:a.other)==null?void 0:d.showButtonLabel)||!1))return null;const i=((p=(l=(o=(c=this.widget)==null?void 0:c.configuration)==null?void 0:o.branding)==null?void 0:l.other)==null?void 0:p.buttonLabelText)||"Widget trigger",e=document.createElement("button");return e.setAttribute("type","button"),e.setAttribute("aria-label",i),e.classList.add("trigger-label"),e.addEventListener("click",this._onClicked),e.innerHTML=i,e}render(){var s,n,a,d,c,o,l;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),i=this._renderButtonLabel();(n=t==null?void 0:t.querySelector(".trigger-label"))==null||n.remove(),t&&i&&t.prepend(i);const e=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");if(e){const p=((l=(o=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding)==null?void 0:o.other)==null?void 0:l.buttonLabelText)||"Widget trigger";e.classList.toggle("active",this.active),e.classList.toggle("rendered",this.loaded),e.addEventListener("click",this._onClicked),e.setAttribute("type","button"),e.setAttribute("aria-label",p),this.icon&&e.prepend(this.icon)}}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",C),window.customElements.get("ace-icon")||window.customElements.define("ace-icon",y);class q{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}setFullscreenMode(t){this.widgetEl.dispatch("set-fullscreen-mode",{value:t})}}const R="https://widgets.ace.teliacompany.net/v1",L=document.createElement("template"),A=($=document.querySelector("script[nonce]"))==null?void 0:$.getAttribute("nonce");L.innerHTML=`<style ${A?`nonce="${A}"`:""}>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -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 I=document.createElement("template");I.innerHTML='<div class="widget-frame-container"></div>';class k 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(L.content.cloneNode(!0)),this.shadow.appendChild(I.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl","expanded"]}get expanded(){return this.getAttribute("expanded")||"false"}set expanded(t){this.setAttribute("expanded",t),t==="false"&&this.classList.toggle("hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||R}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,i,e){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var i,e;((i=t.data)==null?void 0:i.type)==="widget-set-active"&&typeof((e=t.data.data)==null?void 0:e.active)=="boolean"&&(this.active=t.data.data.active)}),this.render()}isActivated(){return this.activated}disableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="0ms")}enableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="300ms")}_getContainerEl(){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(".widget-frame-container"))||null}async activate(){var i;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((i=window.ace)==null?void 0:i.applications)||[]).find(e=>e.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/widget/${t}`)).json()}dispatch(t,i={}){var s;const e={type:t,data:i};if(i.widgetId||(i.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(e);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(e,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var s;if(!((s=this.widget)!=null&&s.distributionName)||this.iframeEl||!this.widget.linked)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},i=document.createElement("iframe");Object.entries(t).forEach(([n,a])=>{i.style.setProperty(n,a)});const e=this.apiUrl.replace("/v1","").replace("/api","");i.src=`${e}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,i.title=this.getIFrameTitle(),this.iframeEl=i}getIFrameTitle(){var i,e;let t=(i=this.widget)==null?void 0:i.configuration;if(typeof t=="string")try{t=JSON.parse(t)}catch{t={}}return((e=t==null?void 0:t.texts)==null?void 0:e["iframe.title"])||"ACE Widget"}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){typeof t!="boolean"?this.expanded=this.isExpanded()?"false":"true":this.isExpanded()!==t&&(this.expanded=t?"true":"false"),this.dispatch("set-open",{value:this.isExpanded()}),this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var e,s;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("expanded"),this.classList.remove("hidden")):this.classList.remove("expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const i=this._getContainerEl();i&&i.childNodes.length===0&&i.appendChild(this.iframeEl),i&&this.zIndex!==-1&&(i.style.zIndex=this.zIndex.toString()),this.trigger&&((e=this.shadowRoot)==null?void 0:e.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.appendChild(this.trigger))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",k),window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",C),h.SiteComponent=w,h.WidgetComponent=k,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;
|