@telia-ace/widget-site 1.1.120-rc.25 → 1.1.120-rc.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +3 -3
- package/index.mjs +43 -41
- package/index.umd.js +3 -3
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class T{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var r;return((r=s.widget)==null?void 0:r.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const r=Object.values(this._api.getWidgets()).find(
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class T{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var r;return((r=s.widget)==null?void 0:r.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const r=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t});i(r==null?void 0:r.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const $="1.1.120-rc.27";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 {
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class A extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(C.content.cloneNode(!0)),this.shadow.appendChild(L.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&P(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var
|
|
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}/api/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 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}/
|
|
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
|
@@ -46,9 +46,9 @@ class k {
|
|
|
46
46
|
const s = this._widgetAPIHandlers.get(t) || [];
|
|
47
47
|
s.push(() => {
|
|
48
48
|
const r = Object.values(this._api.getWidgets()).find(
|
|
49
|
-
(
|
|
49
|
+
(a) => {
|
|
50
50
|
var d;
|
|
51
|
-
return ((d =
|
|
51
|
+
return ((d = a.widget) == null ? void 0 : d.name) === t;
|
|
52
52
|
}
|
|
53
53
|
);
|
|
54
54
|
i(r == null ? void 0 : r.api);
|
|
@@ -58,7 +58,7 @@ class k {
|
|
|
58
58
|
i(e.api);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
const S = "1.1.120-rc.
|
|
61
|
+
const S = "1.1.120-rc.27";
|
|
62
62
|
class T {
|
|
63
63
|
constructor(t) {
|
|
64
64
|
this._site = t;
|
|
@@ -120,13 +120,13 @@ const z = (n, t) => {
|
|
|
120
120
|
}, M = (n, t) => {
|
|
121
121
|
const i = (s) => `ace_${n.substring(0, 7)}-${s}`;
|
|
122
122
|
return Object.entries(t).reduce(
|
|
123
|
-
(s, [r,
|
|
123
|
+
(s, [r, a]) => {
|
|
124
124
|
const [d, c] = r.split("-");
|
|
125
125
|
if (i(c) != r)
|
|
126
126
|
return s;
|
|
127
127
|
try {
|
|
128
|
-
const
|
|
129
|
-
s[c] =
|
|
128
|
+
const o = JSON.parse(a);
|
|
129
|
+
s[c] = o.value;
|
|
130
130
|
} catch {
|
|
131
131
|
return s;
|
|
132
132
|
}
|
|
@@ -134,7 +134,7 @@ const z = (n, t) => {
|
|
|
134
134
|
},
|
|
135
135
|
{}
|
|
136
136
|
);
|
|
137
|
-
}, u = "https://widgets.ace.teliacompany.net", B = "https://embed.webprovisions.io",
|
|
137
|
+
}, u = "https://widgets.ace.teliacompany.net/v1", B = "https://embed.webprovisions.io", U = () => {
|
|
138
138
|
if (typeof window < "u") {
|
|
139
139
|
const n = history.pushState, t = history.replaceState;
|
|
140
140
|
history.pushState = function(...i) {
|
|
@@ -144,7 +144,7 @@ const z = (n, t) => {
|
|
|
144
144
|
};
|
|
145
145
|
}
|
|
146
146
|
};
|
|
147
|
-
class
|
|
147
|
+
class W extends HTMLElement {
|
|
148
148
|
constructor() {
|
|
149
149
|
var t;
|
|
150
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 = () => {
|
|
@@ -173,7 +173,7 @@ class U extends HTMLElement {
|
|
|
173
173
|
this.setAttribute("embedurl", t);
|
|
174
174
|
}
|
|
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
178
|
const { type: i, data: e } = t.data;
|
|
179
179
|
if (i === "widget-minimize")
|
|
@@ -185,7 +185,7 @@ class U extends HTMLElement {
|
|
|
185
185
|
((s = r.widget) == null ? void 0 : s.name) || ""
|
|
186
186
|
));
|
|
187
187
|
try {
|
|
188
|
-
const
|
|
188
|
+
const a = JSON.parse(e.storage), d = M(e.widgetId, a);
|
|
189
189
|
typeof d.open == "boolean" && (r.disableAnimations(), r.toggleExpand(d.open), setTimeout(() => {
|
|
190
190
|
r.enableAnimations();
|
|
191
191
|
}, 600));
|
|
@@ -203,7 +203,7 @@ class U extends HTMLElement {
|
|
|
203
203
|
}
|
|
204
204
|
async _loadSite() {
|
|
205
205
|
var s;
|
|
206
|
-
const i = await (await fetch(`${this.apiUrl}/
|
|
206
|
+
const i = await (await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(), e = location.hostname;
|
|
207
207
|
if (!((i == null ? void 0 : i.hosts) || []).includes(e)) {
|
|
208
208
|
console.warn(
|
|
209
209
|
`the host "${e}" needs to be configured as an allowed host in order to install widgets.`
|
|
@@ -244,21 +244,21 @@ class U extends HTMLElement {
|
|
|
244
244
|
this.shadow.innerHTML = "";
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
|
-
window.customElements.get("ace-site") || window.customElements.define("ace-site",
|
|
247
|
+
window.customElements.get("ace-site") || window.customElements.define("ace-site", W);
|
|
248
248
|
const H = (n) => {
|
|
249
249
|
const t = window.location.pathname;
|
|
250
|
-
return n.triggers.reduce((e, s) => (s.shouldActivate(t).forEach((
|
|
251
|
-
const d = e.find((
|
|
252
|
-
(
|
|
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
|
+
(o) => o.id === a
|
|
253
253
|
);
|
|
254
254
|
!d && c && e.push({
|
|
255
|
-
id:
|
|
255
|
+
id: a
|
|
256
256
|
});
|
|
257
257
|
}), e), []);
|
|
258
258
|
}, g = (n, t, i) => {
|
|
259
259
|
n && i.style.setProperty(t, n);
|
|
260
260
|
}, O = (n, t) => {
|
|
261
|
-
var i, e, s, r,
|
|
261
|
+
var i, e, s, r, a, d, c, o, l;
|
|
262
262
|
g((i = n.colors) == null ? void 0 : i.primaryBackground, "--primary-background", t), g(
|
|
263
263
|
(e = n.colors) == null ? void 0 : e.textOnPrimaryBackground,
|
|
264
264
|
"--text-on-primary-background",
|
|
@@ -272,7 +272,7 @@ const H = (n) => {
|
|
|
272
272
|
"--text-on-secondary-background",
|
|
273
273
|
t
|
|
274
274
|
), g(
|
|
275
|
-
(
|
|
275
|
+
(a = n.colors) == null ? void 0 : a.interactiveDestructiveBackground,
|
|
276
276
|
"--destructive-color",
|
|
277
277
|
t
|
|
278
278
|
), g(
|
|
@@ -284,7 +284,7 @@ const H = (n) => {
|
|
|
284
284
|
"--interactive-primary-background",
|
|
285
285
|
t
|
|
286
286
|
), g(
|
|
287
|
-
(
|
|
287
|
+
(o = n.colors) == null ? void 0 : o.interactiveTextOnPrimaryBackground,
|
|
288
288
|
"--interactive-text-on-primary-background",
|
|
289
289
|
t
|
|
290
290
|
), g((l = n.colors) == null ? void 0 : l.focusColor, "--focus-color", t);
|
|
@@ -614,21 +614,21 @@ class L extends HTMLElement {
|
|
|
614
614
|
};
|
|
615
615
|
}
|
|
616
616
|
async _renderSymbol() {
|
|
617
|
-
var
|
|
618
|
-
const t = (d = (
|
|
617
|
+
var a, d, c;
|
|
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
619
|
if (i) {
|
|
620
|
-
const
|
|
621
|
-
return
|
|
620
|
+
const o = document.createElement("img");
|
|
621
|
+
return o.src = i, o.classList.add("trigger-icon"), o.alt = "", o;
|
|
622
622
|
}
|
|
623
623
|
const e = {
|
|
624
624
|
type: "Telia"
|
|
625
|
-
}, s = async (
|
|
625
|
+
}, s = async (o) => V, { type: r } = e;
|
|
626
626
|
switch (r) {
|
|
627
627
|
case "Telia": {
|
|
628
|
-
const
|
|
629
|
-
if (
|
|
628
|
+
const o = await s();
|
|
629
|
+
if (o) {
|
|
630
630
|
const l = document.createElement("ace-icon");
|
|
631
|
-
return l.classList.add("trigger-icon"), l.svg =
|
|
631
|
+
return l.classList.add("trigger-icon"), l.svg = o.svg, l.size = "lg", l;
|
|
632
632
|
}
|
|
633
633
|
return null;
|
|
634
634
|
}
|
|
@@ -646,20 +646,20 @@ class L extends HTMLElement {
|
|
|
646
646
|
this.classList.remove("hidden");
|
|
647
647
|
}
|
|
648
648
|
_renderButtonLabel() {
|
|
649
|
-
var s, r,
|
|
650
|
-
if (!(((d = (
|
|
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 i = ((h = (l = (
|
|
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
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, r,
|
|
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
658
|
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".trigger-container"), i = this._renderButtonLabel();
|
|
659
659
|
(r = t == null ? void 0 : t.querySelector(".trigger-label")) == null || r.remove(), t && i && t.prepend(i);
|
|
660
|
-
const e = (
|
|
660
|
+
const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#trigger-btn");
|
|
661
661
|
if (e) {
|
|
662
|
-
const h = ((l = (
|
|
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
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
664
|
}
|
|
665
665
|
}
|
|
@@ -683,7 +683,7 @@ class j {
|
|
|
683
683
|
this.widgetEl.dispatch("set-fullscreen-mode", { value: t });
|
|
684
684
|
}
|
|
685
685
|
}
|
|
686
|
-
const N = "https://widgets.ace.teliacompany.net", A = document.createElement("template");
|
|
686
|
+
const N = "https://widgets.ace.teliacompany.net/v1", A = document.createElement("template");
|
|
687
687
|
var v;
|
|
688
688
|
const w = (v = document.querySelector("script[nonce]")) == null ? void 0 : v.getAttribute("nonce");
|
|
689
689
|
A.innerHTML = `<style ${w ? `nonce="${w}"` : ""}>
|
|
@@ -823,7 +823,7 @@ class q extends HTMLElement {
|
|
|
823
823
|
t && (t.storage.get("open") && t.appendToDOM(), t.trigger.showTrigger()), this.render();
|
|
824
824
|
}
|
|
825
825
|
async _loadWidget(t) {
|
|
826
|
-
return await (await fetch(`${this.apiUrl}/
|
|
826
|
+
return await (await fetch(`${this.apiUrl}/widget/${t}`)).json();
|
|
827
827
|
}
|
|
828
828
|
dispatch(t, i = {}) {
|
|
829
829
|
var s;
|
|
@@ -841,8 +841,8 @@ class q extends HTMLElement {
|
|
|
841
841
|
this.activated = !1, this.render();
|
|
842
842
|
}
|
|
843
843
|
_createIFrame() {
|
|
844
|
-
var
|
|
845
|
-
if (!((
|
|
844
|
+
var s;
|
|
845
|
+
if (!((s = this.widget) != null && s.distributionName) || this.iframeEl || !this.widget.linked)
|
|
846
846
|
return;
|
|
847
847
|
const t = {
|
|
848
848
|
display: "block",
|
|
@@ -861,9 +861,11 @@ class q extends HTMLElement {
|
|
|
861
861
|
height: "100%",
|
|
862
862
|
"border-radius": "0.7rem"
|
|
863
863
|
}, i = document.createElement("iframe");
|
|
864
|
-
Object.entries(t).forEach(([
|
|
865
|
-
i.style.setProperty(
|
|
866
|
-
})
|
|
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;
|
|
867
869
|
}
|
|
868
870
|
getIFrameTitle() {
|
|
869
871
|
var i, e;
|
|
@@ -906,6 +908,6 @@ class q extends HTMLElement {
|
|
|
906
908
|
window.customElements.get("ace-widget") || window.customElements.define("ace-widget", q);
|
|
907
909
|
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", L);
|
|
908
910
|
export {
|
|
909
|
-
|
|
911
|
+
W as SiteComponent,
|
|
910
912
|
q as WidgetComponent
|
|
911
913
|
};
|
package/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(h,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(h=typeof globalThis<"u"?globalThis:h||self,u(h["@telia-ace/widget-site"]={}))})(this,function(h){"use strict";var S,T,$;class u{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const n=Object.values(this._api.getWidgets()).find(
|
|
1
|
+
(function(h,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(h=typeof globalThis<"u"?globalThis:h||self,u(h["@telia-ace/widget-site"]={}))})(this,function(h){"use strict";var S,T,$;class u{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(e=>{e()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const n=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t});i(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const z="1.1.120-rc.27";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
3
|
></span>`;const b=document.createElement("template"),v=(S=document.querySelector("script[nonce]"))==null?void 0:S.getAttribute("nonce");b.innerHTML=`<style ${v?`nonce="${v}"`:""}>
|
|
4
4
|
:host {
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class C extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(_.content.cloneNode(!0)),this.shadow.appendChild(E.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&j(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var
|
|
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}/api/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 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}/
|
|
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"})});
|