@telia-ace/widget-site 1.1.82-rc.9 → 1.1.83
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 -5
- package/index.mjs +155 -98
- package/index.umd.js +4 -5
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class C{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(e,i){window.ace._w.push([e,i])},configure:function(e){window.ace._c.push(e)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([e,i])=>{this.widget(e,i)}),((t==null?void 0:t._c)||[]).forEach(e=>{this.configure(e)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(i=>{i()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,e){const i=Object.values(this._api.getWidgets()).find(s=>{var
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class C{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(e,i){window.ace._w.push([e,i])},configure:function(e){window.ace._c.push(e)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([e,i])=>{this.widget(e,i)}),((t==null?void 0:t._c)||[]).forEach(e=>{this.configure(e)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(i=>{i()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,e){const i=Object.values(this._api.getWidgets()).find(s=>{var r;return((r=s.widget)==null?void 0:r.name)===t});if(!i){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const r=Object.values(this._api.getWidgets()).find(a=>{var o;return((o=a.widget)==null?void 0:o.name)===t});e(r==null?void 0:r.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}const L="##__SITES_VERSION__##";class k{constructor(t){this._site=t}storagePolicy(t){Object.entries(this._site._widgets).forEach(([e,i])=>{i.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([e,i])=>{i.dispatch("disallow-storage-key",{storageKey:t})})}getWidgets(){return this._site._widgets}version(){const t=L;return{widgets:this._site.getWidgetsVersions(),sites:t}}}class I{constructor(t,e){this.triggerType=t,this.condition=e,this.triggerType=t,this.condition=e}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const e=[];return this.condition.outputs.filter(i=>i.action.type==="render_widget"&&A(i.value,t)).forEach(i=>{let s={widgetId:""};try{s=JSON.parse(i.action.data)}catch{s={widgetId:""}}e.push(s.widgetId)}),e}}const A=(n,t)=>{if(n==="*"||n==="/*"||n===t)return!0;if(n.endsWith("/*")){const s=n.slice(0,-2);return t.startsWith(s)}return!1},S=(n,t)=>{const e=s=>`ace_${n.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[r,a])=>{const[o,l]=r.split("-");if(e(l)!=r)return s;try{const d=JSON.parse(a);s[l]=d.value}catch{return s}return s},{})},u="https://widgets.ace.teliacompany.net",T="https://embed.webprovisions.io",z=()=>{if(typeof window<"u"){const n=history.pushState,t=history.replaceState;history.pushState=function(...e){n.apply(history,e),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...e){t.apply(history,e),window.dispatchEvent(new Event("locationchange"))}}};class p 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 k(this),this._environment=new C(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||u}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||T}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){z(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s;const{type:e,data:i}=t.data;if(e==="widget-minimize")this._widgets[i.widgetId].toggleExpand();else if(e==="widget-activated"){this._widgets[i.widgetId].executeMessageQueue();const r=this._widgets[i.widgetId];r&&(this._loadedVersions[i.widgetId]=i.version,this._environment.executePreloadedHandlers(((s=r.widget)==null?void 0:s.name)||""));try{const a=JSON.parse(i.storage),o=S(i.widgetId,a);typeof o.open=="boolean"&&(r.disableAnimations(),r.toggleExpand(o.open),setTimeout(()=>{r.enableAnimations()},600))}catch{console.warn("unable to parse widget storage")}}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,e,i){this.render()}async _loadSite(){var s;const e=await(await fetch(`${this.apiUrl}/api/site/${this.siteId}`)).json(),i=location.hostname;if(!((e==null?void 0:e.hosts)||[]).includes(i)){console.warn(`the host "${i}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=e,this._site&&(this._site.triggers=this._site.triggers.map(r=>new I(r.triggerType,r.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async r=>{this.addWidgetEl(r.id)})}addWidgetEl(t){const e=`ace-widget_${t}`;let i=document.getElementById(e);i||(i=document.createElement("ace-widget"),i.id=e,i.widgetId=t,this.apiUrl!==u&&(i.apiUrl=this.apiUrl),document.body.appendChild(i)),this._widgets={...this._widgets,[t]:i}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=M(this._site);for(const[e,i]of Object.entries(this._widgets)){const s=t.find(r=>r.id===e);s&&!i.isActivated()?i.activate():!s&&i.isActivated()&&i.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",p);const M=n=>{const t=window.location.pathname;return n.triggers.reduce((i,s)=>(s.shouldActivate(t).forEach(a=>{const o=i.find(d=>d.id===a),l=((n==null?void 0:n.widgets)||[]).find(d=>d.id===a);!o&&l&&i.push({id:a})}),i),[])},g=(n,t,e)=>{n&&e.style.setProperty(t,n)},$=(n,t)=>{var e,i,s,r,a,o,l,d,c;g((e=n.colors)==null?void 0:e.primaryBackground,"--primary-background",t),g((i=n.colors)==null?void 0:i.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((o=n.colors)==null?void 0:o.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),g((l=n.colors)==null?void 0:l.interactivePrimaryBackground,"--interactive-primary-background",t),g((d=n.colors)==null?void 0:d.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),g((c=n.colors)==null?void 0:c.focusColor,"--focus-color",t)},B=(n={})=>{const{content:t="",title:e,attributes:i=[]}=n;let s="";const r=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...i];return e&&(s=`<title>${e}</title>`),`<svg ${r.map(o=>`${o.name}="${o.value}"`).join(" ")}>${s}${t}</svg>`},m=document.createElement("template");m.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
3
|
></span>`;const w=document.createElement("template");w.innerHTML=`<style>
|
|
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 f 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(w.content.cloneNode(!0)),this.shadow.appendChild(m.content.cloneNode(!0))}attributeChangedCallback(t,e,i){this.render()}render(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector(".ace-icon__container");if(t){const i=
|
|
37
|
+
</style>`;class f 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(w.content.cloneNode(!0)),this.shadow.appendChild(m.content.cloneNode(!0))}attributeChangedCallback(t,e,i){this.render()}render(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector(".ace-icon__container");if(t){const i=B({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=i}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",f);const U={name:"question",svg:'<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C59.9827 16.5432 47.4568 4.01731 32 4ZM32 55.6923C18.9151 55.6923 8.30769 45.0849 8.30769 32C8.30769 18.9151 18.9151 8.30769 32 8.30769C45.0849 8.30769 55.6923 18.9151 55.6923 32C55.6775 45.0788 45.0788 55.6775 32 55.6923Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.9423 37.5723L36.311 32.9068L36.7354 32.4448C39.7555 29.1161 40.7645 27.0647 40.7645 24.5087C40.7645 23.1091 40.4251 21.7942 39.7041 20.6491C38.3044 18.3587 35.6323 16.9166 32.2816 16.9166C28.7565 16.9166 25.3125 18.7414 23.2581 21.6772L23.1201 21.8791C22.8232 22.3032 22.696 22.6849 22.696 22.9818C22.696 23.7029 23.926 25.9932 25.2833 25.9932C25.5378 25.9932 25.7922 25.9084 26.0467 25.7388C26.2588 25.5691 26.5981 25.2298 27.0647 24.7208C28.8885 22.6849 30.1185 21.9215 31.7726 21.9215C33.6813 21.9215 35.081 23.1939 35.081 24.8905C35.081 26.375 34.2751 27.7746 32.3664 29.8529L28.2523 34.2216C27.9554 34.6033 27.7857 34.9426 27.7857 35.282C27.7857 35.6213 27.9978 36.1726 28.4219 36.8937C29.0581 37.8692 29.7368 38.3782 30.4578 38.3782C30.9244 38.3782 31.3909 38.1237 31.9423 37.5723ZM30.882 47.4972C29.2278 47.4972 27.6585 44.7403 27.6585 43.6799C27.6585 42.1954 30.0761 40.6261 32.4089 40.6261C33.6389 40.6261 34.2751 41.1775 34.2751 42.3227C34.2751 44.0616 33.4692 45.843 32.4513 46.7761C31.9423 47.2427 31.4334 47.4972 30.882 47.4972Z"/></svg>'},b=document.createElement("template");b.innerHTML=`<style>
|
|
38
38
|
:host {
|
|
39
39
|
position: fixed;
|
|
40
40
|
display: flex;
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class y extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(b.content.cloneNode(!0)),this.shadow.appendChild(v.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,e,i){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,e;(e=(t=this.widget)==null?void 0:t.configuration)!=null&&e.branding
|
|
212
|
+
</div>`;class y extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(b.content.cloneNode(!0)),this.shadow.appendChild(v.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,e,i){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,e;(e=(t=this.widget)==null?void 0:t.configuration)!=null&&e.branding&&$(this.widget.configuration.branding,this)}async _loadWidget(t){const i=await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json(),s=JSON.parse(i.configuration);return{...i,configuration:s}}async _renderSymbol(){var o,l,d;const t=(l=(o=this.widget)==null?void 0:o.configuration)==null?void 0:l.branding,e=(d=t==null?void 0:t.graphics)==null?void 0:d.trigger;if(e){const c=document.createElement("img");return c.src=e,c.classList.add("trigger-icon"),c.alt="",c}const i={type:"Telia",content:"question"},s=async c=>U,{type:r,content:a}=i;switch(r){case"Telia":{const c=await s();if(c){const h=document.createElement("ace-icon");return h.classList.add("trigger-icon"),h.svg=c.svg,h.size="lg",h}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,r,a,o,l,d,c,h;if(!(((o=(a=(r=(s=this.widget)==null?void 0:s.configuration)==null?void 0:r.branding)==null?void 0:a.other)==null?void 0:o.showButtonLabel)||!1))return null;const e=((h=(c=(d=(l=this.widget)==null?void 0:l.configuration)==null?void 0:d.branding)==null?void 0:c.other)==null?void 0:h.buttonLabelText)||"",i=document.createElement("button");return i.setAttribute("label",e),i.classList.add("trigger-label"),i.addEventListener("click",this._onClicked),i.innerHTML=e,i}render(){var s,r,a;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),e=this._renderButtonLabel();(r=t==null?void 0:t.querySelector(".trigger-label"))==null||r.remove(),t&&e&&t.prepend(e);const i=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");i&&(i.classList.toggle("active",this.active),i.classList.toggle("rendered",this.loaded),i.addEventListener("click",this._onClicked),this.icon&&i.prepend(this.icon))}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",y);window.customElements.get("ace-icon")||window.customElements.define("ace-icon",f);class H{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 W="https://widgets.ace.teliacompany.net",_=document.createElement("template");_.innerHTML=`<style>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -281,5 +281,4 @@ svg {
|
|
|
281
281
|
:host(.hidden) .widget-frame-container {
|
|
282
282
|
animation: slideDown 0.3s linear;
|
|
283
283
|
}
|
|
284
|
-
}
|
|
285
|
-
</style>`;const x=document.createElement("template");x.innerHTML='<div class="widget-frame-container"></div>';class E extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new $(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(_.content.cloneNode(!0)),this.shadow.appendChild(x.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl","expanded"]}get expanded(){return this.getAttribute("expanded")||"false"}set expanded(t){this.setAttribute("expanded",t),t==="false"&&this.classList.toggle("hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||B}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,e,i){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var e,i;((e=t.data)==null?void 0:e.type)==="widget-set-active"&&typeof((i=t.data.data)==null?void 0:i.active)=="boolean"&&(this.active=t.data.data.active)}),this.render()}isActivated(){return this.activated}async activate(){var e;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((e=window.ace)==null?void 0:e.applications)||[]).find(i=>i.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json()}dispatch(t,e={}){var s;const i={type:t,data:e};if(e.widgetId||(e.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(i);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(i,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var s;if(!((s=this.widget)!=null&&s.distributionName)||this.iframeEl)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},e=document.createElement("iframe");Object.entries(t).forEach(([n,o])=>{e.style.setProperty(n,o)});const i=!0;e.src=`${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&mobile=${i}`,this.iframeEl=e}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){typeof t=="boolean"?this.expanded=t?"true":"false":this.expanded=this.isExpanded()?"false":"true",this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var i,s,n;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("expanded"),this.classList.remove("hidden")):this.classList.remove("expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const e=(i=this.shadowRoot)==null?void 0:i.querySelector(".widget-frame-container");e&&e.childNodes.length===0&&e.appendChild(this.iframeEl),e&&this.zIndex!==-1&&(e.style.zIndex=this.zIndex.toString()),this.trigger&&((s=this.shadowRoot)==null?void 0:s.querySelectorAll("ace-trigger").length)===0&&((n=this.shadowRoot)==null||n.appendChild(this.trigger))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",E);window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",y);exports.SiteComponent=u;exports.WidgetComponent=E;
|
|
284
|
+
</style>`;const x=document.createElement("template");x.innerHTML='<div class="widget-frame-container"></div>';class E extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new H(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(_.content.cloneNode(!0)),this.shadow.appendChild(x.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")||W}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,e,i){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var e,i;((e=t.data)==null?void 0:e.type)==="widget-set-active"&&typeof((i=t.data.data)==null?void 0:i.active)=="boolean"&&(this.active=t.data.data.active)}),this.render()}isActivated(){return this.activated}disableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="0ms")}enableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="300ms")}_getContainerEl(){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(".widget-frame-container"))||null}async activate(){var e;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((e=window.ace)==null?void 0:e.applications)||[]).find(i=>i.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json()}dispatch(t,e={}){var s;const i={type:t,data:e};if(e.widgetId||(e.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(i);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(i,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var i;if(!((i=this.widget)!=null&&i.distributionName)||this.iframeEl||!this.widget.linked)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},e=document.createElement("iframe");Object.entries(t).forEach(([s,r])=>{e.style.setProperty(s,r)}),e.src=`${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,this.iframeEl=e}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){typeof t!="boolean"?this.expanded=this.isExpanded()?"false":"true":this.isExpanded()!==t&&(this.expanded=t?"true":"false"),this.dispatch("set-open",{value:this.isExpanded()}),this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var i,s;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("expanded"),this.classList.remove("hidden")):this.classList.remove("expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const e=this._getContainerEl();e&&e.childNodes.length===0&&e.appendChild(this.iframeEl),e&&this.zIndex!==-1&&(e.style.zIndex=this.zIndex.toString()),this.trigger&&((i=this.shadowRoot)==null?void 0:i.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.appendChild(this.trigger))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",E);window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",y);exports.SiteComponent=p;exports.WidgetComponent=E;
|
package/index.mjs
CHANGED
|
@@ -46,9 +46,9 @@ class x {
|
|
|
46
46
|
const s = this._widgetAPIHandlers.get(t) || [];
|
|
47
47
|
s.push(() => {
|
|
48
48
|
const r = Object.values(this._api.getWidgets()).find(
|
|
49
|
-
(
|
|
50
|
-
var
|
|
51
|
-
return ((
|
|
49
|
+
(a) => {
|
|
50
|
+
var o;
|
|
51
|
+
return ((o = a.widget) == null ? void 0 : o.name) === t;
|
|
52
52
|
}
|
|
53
53
|
);
|
|
54
54
|
e(r == null ? void 0 : r.api);
|
|
@@ -58,7 +58,7 @@ class x {
|
|
|
58
58
|
e(i.api);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
const E = "
|
|
61
|
+
const E = "##__SITES_VERSION__##";
|
|
62
62
|
class C {
|
|
63
63
|
constructor(t) {
|
|
64
64
|
this._site = t;
|
|
@@ -88,7 +88,53 @@ class C {
|
|
|
88
88
|
};
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
|
|
91
|
+
class L {
|
|
92
|
+
constructor(t, e) {
|
|
93
|
+
this.triggerType = t, this.condition = e, this.triggerType = t, this.condition = e;
|
|
94
|
+
}
|
|
95
|
+
shouldActivate(t) {
|
|
96
|
+
if (this.triggerType !== "visit" || this.condition.type !== "url")
|
|
97
|
+
return [];
|
|
98
|
+
const e = [];
|
|
99
|
+
return this.condition.outputs.filter((i) => i.action.type === "render_widget" && k(i.value, t)).forEach((i) => {
|
|
100
|
+
let s = { widgetId: "" };
|
|
101
|
+
try {
|
|
102
|
+
s = JSON.parse(i.action.data);
|
|
103
|
+
} catch {
|
|
104
|
+
s = {
|
|
105
|
+
widgetId: ""
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
e.push(s.widgetId);
|
|
109
|
+
}), e;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
const k = (n, t) => {
|
|
113
|
+
if (n === "*" || n === "/*" || n === t)
|
|
114
|
+
return !0;
|
|
115
|
+
if (n.endsWith("/*")) {
|
|
116
|
+
const s = n.slice(0, -2);
|
|
117
|
+
return t.startsWith(s);
|
|
118
|
+
}
|
|
119
|
+
return !1;
|
|
120
|
+
}, I = (n, t) => {
|
|
121
|
+
const e = (s) => `ace_${n.substring(0, 7)}-${s}`;
|
|
122
|
+
return Object.entries(t).reduce(
|
|
123
|
+
(s, [r, a]) => {
|
|
124
|
+
const [o, l] = r.split("-");
|
|
125
|
+
if (e(l) != r)
|
|
126
|
+
return s;
|
|
127
|
+
try {
|
|
128
|
+
const d = JSON.parse(a);
|
|
129
|
+
s[l] = d.value;
|
|
130
|
+
} catch {
|
|
131
|
+
return s;
|
|
132
|
+
}
|
|
133
|
+
return s;
|
|
134
|
+
},
|
|
135
|
+
{}
|
|
136
|
+
);
|
|
137
|
+
}, u = "https://widgets.ace.teliacompany.net", A = "https://embed.webprovisions.io", S = () => {
|
|
92
138
|
if (typeof window < "u") {
|
|
93
139
|
const n = history.pushState, t = history.replaceState;
|
|
94
140
|
history.pushState = function(...e) {
|
|
@@ -98,7 +144,7 @@ const p = "https://widgets.ace.teliacompany.net", L = "https://embed.webprovisio
|
|
|
98
144
|
};
|
|
99
145
|
}
|
|
100
146
|
};
|
|
101
|
-
class
|
|
147
|
+
class T extends HTMLElement {
|
|
102
148
|
constructor() {
|
|
103
149
|
var t;
|
|
104
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 C(this), this._environment = new x(this._api), this.routeChangeListener = () => {
|
|
@@ -115,19 +161,19 @@ class k extends HTMLElement {
|
|
|
115
161
|
this.setAttribute("siteid", t);
|
|
116
162
|
}
|
|
117
163
|
get apiUrl() {
|
|
118
|
-
return this.getAttribute("apiurl") ||
|
|
164
|
+
return this.getAttribute("apiurl") || u;
|
|
119
165
|
}
|
|
120
166
|
set apiUrl(t) {
|
|
121
167
|
this.setAttribute("apiurl", t);
|
|
122
168
|
}
|
|
123
169
|
get embedUrl() {
|
|
124
|
-
return this.getAttribute("embedurl") ||
|
|
170
|
+
return this.getAttribute("embedurl") || A;
|
|
125
171
|
}
|
|
126
172
|
set embedUrl(t) {
|
|
127
173
|
this.setAttribute("embedurl", t);
|
|
128
174
|
}
|
|
129
175
|
async connectedCallback() {
|
|
130
|
-
|
|
176
|
+
S(), await this._loadSite(), this.render(), this._environment.bootstrap(), window.addEventListener("locationchange", this.routeChangeListener), window.addEventListener("message", (t) => {
|
|
131
177
|
var s;
|
|
132
178
|
const { type: e, data: i } = t.data;
|
|
133
179
|
if (e === "widget-minimize")
|
|
@@ -138,6 +184,14 @@ class k extends HTMLElement {
|
|
|
138
184
|
r && (this._loadedVersions[i.widgetId] = i.version, this._environment.executePreloadedHandlers(
|
|
139
185
|
((s = r.widget) == null ? void 0 : s.name) || ""
|
|
140
186
|
));
|
|
187
|
+
try {
|
|
188
|
+
const a = JSON.parse(i.storage), o = I(i.widgetId, a);
|
|
189
|
+
typeof o.open == "boolean" && (r.disableAnimations(), r.toggleExpand(o.open), setTimeout(() => {
|
|
190
|
+
r.enableAnimations();
|
|
191
|
+
}, 600));
|
|
192
|
+
} catch {
|
|
193
|
+
console.warn("unable to parse widget storage");
|
|
194
|
+
}
|
|
141
195
|
}
|
|
142
196
|
});
|
|
143
197
|
}
|
|
@@ -156,7 +210,9 @@ class k extends HTMLElement {
|
|
|
156
210
|
);
|
|
157
211
|
return;
|
|
158
212
|
}
|
|
159
|
-
this._site = e,
|
|
213
|
+
this._site = e, this._site && (this._site.triggers = this._site.triggers.map(
|
|
214
|
+
(r) => new L(r.triggerType, r.condition)
|
|
215
|
+
)), (((s = this._site) == null ? void 0 : s.widgets) || []).forEach(async (r) => {
|
|
160
216
|
this.addWidgetEl(r.id);
|
|
161
217
|
});
|
|
162
218
|
}
|
|
@@ -165,7 +221,7 @@ class k extends HTMLElement {
|
|
|
165
221
|
let i = document.getElementById(
|
|
166
222
|
e
|
|
167
223
|
);
|
|
168
|
-
i || (i = document.createElement("ace-widget"), i.id = e, i.widgetId = t, this.apiUrl !==
|
|
224
|
+
i || (i = document.createElement("ace-widget"), i.id = e, i.widgetId = t, this.apiUrl !== u && (i.apiUrl = this.apiUrl), document.body.appendChild(i)), this._widgets = {
|
|
169
225
|
...this._widgets,
|
|
170
226
|
[t]: i
|
|
171
227
|
};
|
|
@@ -178,7 +234,7 @@ class k extends HTMLElement {
|
|
|
178
234
|
this.shadow.innerHTML = "";
|
|
179
235
|
return;
|
|
180
236
|
}
|
|
181
|
-
const t =
|
|
237
|
+
const t = z(this._site);
|
|
182
238
|
for (const [e, i] of Object.entries(this._widgets)) {
|
|
183
239
|
const s = t.find(
|
|
184
240
|
(r) => r.id === e
|
|
@@ -188,63 +244,51 @@ class k extends HTMLElement {
|
|
|
188
244
|
this.shadow.innerHTML = "";
|
|
189
245
|
}
|
|
190
246
|
}
|
|
191
|
-
window.customElements.get("ace-site") || window.customElements.define("ace-site",
|
|
192
|
-
const
|
|
193
|
-
const t =
|
|
194
|
-
return
|
|
195
|
-
const
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
try {
|
|
201
|
-
c = JSON.parse(r.action.data);
|
|
202
|
-
} catch {
|
|
203
|
-
c = {
|
|
204
|
-
widgetId: ""
|
|
205
|
-
};
|
|
206
|
-
}
|
|
207
|
-
const g = t.findIndex((l) => l.id === c.widgetId) > -1, a = ((n == null ? void 0 : n.widgets) || []).find(
|
|
208
|
-
(l) => l.id === c.widgetId
|
|
209
|
-
);
|
|
210
|
-
a && !g && t.push(a);
|
|
211
|
-
}
|
|
247
|
+
window.customElements.get("ace-site") || window.customElements.define("ace-site", T);
|
|
248
|
+
const z = (n) => {
|
|
249
|
+
const t = window.location.pathname;
|
|
250
|
+
return n.triggers.reduce((i, s) => (s.shouldActivate(t).forEach((a) => {
|
|
251
|
+
const o = i.find((d) => d.id === a), l = ((n == null ? void 0 : n.widgets) || []).find(
|
|
252
|
+
(d) => d.id === a
|
|
253
|
+
);
|
|
254
|
+
!o && l && i.push({
|
|
255
|
+
id: a
|
|
212
256
|
});
|
|
213
|
-
}),
|
|
214
|
-
},
|
|
257
|
+
}), i), []);
|
|
258
|
+
}, g = (n, t, e) => {
|
|
215
259
|
n && e.style.setProperty(t, n);
|
|
216
|
-
},
|
|
217
|
-
var e, i, s, r,
|
|
218
|
-
|
|
260
|
+
}, M = (n, t) => {
|
|
261
|
+
var e, i, s, r, a, o, l, d, c;
|
|
262
|
+
g((e = n.colors) == null ? void 0 : e.primaryBackground, "--primary-background", t), g(
|
|
219
263
|
(i = n.colors) == null ? void 0 : i.textOnPrimaryBackground,
|
|
220
264
|
"--text-on-primary-background",
|
|
221
265
|
t
|
|
222
|
-
),
|
|
266
|
+
), g(
|
|
223
267
|
(s = n.colors) == null ? void 0 : s.secondaryBackground,
|
|
224
268
|
"--secondary-background",
|
|
225
269
|
t
|
|
226
|
-
),
|
|
270
|
+
), g(
|
|
227
271
|
(r = n.colors) == null ? void 0 : r.textOnSecondaryBackground,
|
|
228
272
|
"--text-on-secondary-background",
|
|
229
273
|
t
|
|
230
|
-
),
|
|
231
|
-
(
|
|
274
|
+
), g(
|
|
275
|
+
(a = n.colors) == null ? void 0 : a.interactiveDestructiveBackground,
|
|
232
276
|
"--destructive-color",
|
|
233
277
|
t
|
|
234
|
-
),
|
|
235
|
-
(
|
|
278
|
+
), g(
|
|
279
|
+
(o = n.colors) == null ? void 0 : o.interactiveTextOnDestructiveBackground,
|
|
236
280
|
"--text-on-destructive-color",
|
|
237
281
|
t
|
|
238
|
-
),
|
|
239
|
-
(
|
|
282
|
+
), g(
|
|
283
|
+
(l = n.colors) == null ? void 0 : l.interactivePrimaryBackground,
|
|
240
284
|
"--interactive-primary-background",
|
|
241
285
|
t
|
|
242
|
-
),
|
|
243
|
-
(
|
|
286
|
+
), g(
|
|
287
|
+
(d = n.colors) == null ? void 0 : d.interactiveTextOnPrimaryBackground,
|
|
244
288
|
"--interactive-text-on-primary-background",
|
|
245
289
|
t
|
|
246
|
-
),
|
|
247
|
-
},
|
|
290
|
+
), g((c = n.colors) == null ? void 0 : c.focusColor, "--focus-color", t);
|
|
291
|
+
}, $ = (n = {}) => {
|
|
248
292
|
const { content: t = "", title: e, attributes: i = [] } = n;
|
|
249
293
|
let s = "";
|
|
250
294
|
const r = [
|
|
@@ -252,13 +296,13 @@ const A = (n) => {
|
|
|
252
296
|
{ name: "fill", value: "currentColor" },
|
|
253
297
|
...i
|
|
254
298
|
];
|
|
255
|
-
return e && (s = `<title>${e}</title>`), `<svg ${r.map((
|
|
256
|
-
},
|
|
257
|
-
|
|
299
|
+
return e && (s = `<title>${e}</title>`), `<svg ${r.map((o) => `${o.name}="${o.value}"`).join(" ")}>${s}${t}</svg>`;
|
|
300
|
+
}, p = document.createElement("template");
|
|
301
|
+
p.innerHTML = `<span
|
|
258
302
|
class="ace-icon__container"
|
|
259
303
|
></span>`;
|
|
260
|
-
const
|
|
261
|
-
|
|
304
|
+
const m = document.createElement("template");
|
|
305
|
+
m.innerHTML = `<style>
|
|
262
306
|
:host {
|
|
263
307
|
display: inline-block;
|
|
264
308
|
--size-sm: 1rem;
|
|
@@ -293,7 +337,7 @@ svg {
|
|
|
293
337
|
width: var(--size-lg);
|
|
294
338
|
}
|
|
295
339
|
</style>`;
|
|
296
|
-
class
|
|
340
|
+
class w extends HTMLElement {
|
|
297
341
|
get svg() {
|
|
298
342
|
return this.getAttribute("svg") || "";
|
|
299
343
|
}
|
|
@@ -310,7 +354,7 @@ class m extends HTMLElement {
|
|
|
310
354
|
return ["svg", "size"];
|
|
311
355
|
}
|
|
312
356
|
constructor() {
|
|
313
|
-
super(), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(
|
|
357
|
+
super(), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(m.content.cloneNode(!0)), this.shadow.appendChild(p.content.cloneNode(!0));
|
|
314
358
|
}
|
|
315
359
|
attributeChangedCallback(t, e, i) {
|
|
316
360
|
this.render();
|
|
@@ -319,7 +363,7 @@ class m extends HTMLElement {
|
|
|
319
363
|
var e;
|
|
320
364
|
const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".ace-icon__container");
|
|
321
365
|
if (t) {
|
|
322
|
-
const i =
|
|
366
|
+
const i = $({
|
|
323
367
|
content: this.svg,
|
|
324
368
|
attributes: [
|
|
325
369
|
{
|
|
@@ -333,8 +377,8 @@ class m extends HTMLElement {
|
|
|
333
377
|
}
|
|
334
378
|
}
|
|
335
379
|
}
|
|
336
|
-
window.customElements.get("ace-icon") || window.customElements.define("ace-icon",
|
|
337
|
-
const
|
|
380
|
+
window.customElements.get("ace-icon") || window.customElements.define("ace-icon", w);
|
|
381
|
+
const B = {
|
|
338
382
|
name: "question",
|
|
339
383
|
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>'
|
|
340
384
|
}, f = document.createElement("template");
|
|
@@ -556,7 +600,7 @@ class v extends HTMLElement {
|
|
|
556
600
|
}
|
|
557
601
|
_applyBranding() {
|
|
558
602
|
var t, e;
|
|
559
|
-
(e = (t = this.widget) == null ? void 0 : t.configuration) != null && e.branding &&
|
|
603
|
+
(e = (t = this.widget) == null ? void 0 : t.configuration) != null && e.branding && M(this.widget.configuration.branding, this);
|
|
560
604
|
}
|
|
561
605
|
async _loadWidget(t) {
|
|
562
606
|
const i = await (await fetch(`${this.apiUrl}/api/widget/${t}`)).json(), s = JSON.parse(i.configuration);
|
|
@@ -566,22 +610,22 @@ class v extends HTMLElement {
|
|
|
566
610
|
};
|
|
567
611
|
}
|
|
568
612
|
async _renderSymbol() {
|
|
569
|
-
var
|
|
570
|
-
const t = (
|
|
613
|
+
var o, l, d;
|
|
614
|
+
const t = (l = (o = this.widget) == null ? void 0 : o.configuration) == null ? void 0 : l.branding, e = (d = t == null ? void 0 : t.graphics) == null ? void 0 : d.trigger;
|
|
571
615
|
if (e) {
|
|
572
|
-
const
|
|
573
|
-
return
|
|
616
|
+
const c = document.createElement("img");
|
|
617
|
+
return c.src = e, c.classList.add("trigger-icon"), c.alt = "", c;
|
|
574
618
|
}
|
|
575
619
|
const i = {
|
|
576
620
|
type: "Telia",
|
|
577
621
|
content: "question"
|
|
578
|
-
}, s = async (
|
|
622
|
+
}, s = async (c) => B, { type: r, content: a } = i;
|
|
579
623
|
switch (r) {
|
|
580
624
|
case "Telia": {
|
|
581
|
-
const
|
|
582
|
-
if (
|
|
583
|
-
const
|
|
584
|
-
return
|
|
625
|
+
const c = await s();
|
|
626
|
+
if (c) {
|
|
627
|
+
const h = document.createElement("ace-icon");
|
|
628
|
+
return h.classList.add("trigger-icon"), h.svg = c.svg, h.size = "lg", h;
|
|
585
629
|
}
|
|
586
630
|
return null;
|
|
587
631
|
}
|
|
@@ -599,24 +643,24 @@ class v extends HTMLElement {
|
|
|
599
643
|
this.classList.remove("hidden");
|
|
600
644
|
}
|
|
601
645
|
_renderButtonLabel() {
|
|
602
|
-
var s, r,
|
|
603
|
-
if (!(((
|
|
646
|
+
var s, r, a, o, l, d, c, h;
|
|
647
|
+
if (!(((o = (a = (r = (s = this.widget) == null ? void 0 : s.configuration) == null ? void 0 : r.branding) == null ? void 0 : a.other) == null ? void 0 : o.showButtonLabel) || !1))
|
|
604
648
|
return null;
|
|
605
|
-
const e = ((
|
|
649
|
+
const e = ((h = (c = (d = (l = this.widget) == null ? void 0 : l.configuration) == null ? void 0 : d.branding) == null ? void 0 : c.other) == null ? void 0 : h.buttonLabelText) || "", i = document.createElement("button");
|
|
606
650
|
return i.setAttribute("label", e), i.classList.add("trigger-label"), i.addEventListener("click", this._onClicked), i.innerHTML = e, i;
|
|
607
651
|
}
|
|
608
652
|
render() {
|
|
609
|
-
var s, r,
|
|
653
|
+
var s, r, a;
|
|
610
654
|
this._applyBranding(), this.classList.add("bottom-right"), this.classList.toggle("active", this.active);
|
|
611
655
|
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".trigger-container"), e = this._renderButtonLabel();
|
|
612
656
|
(r = t == null ? void 0 : t.querySelector(".trigger-label")) == null || r.remove(), t && e && t.prepend(e);
|
|
613
|
-
const i = (
|
|
657
|
+
const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#trigger-btn");
|
|
614
658
|
i && (i.classList.toggle("active", this.active), i.classList.toggle("rendered", this.loaded), i.addEventListener("click", this._onClicked), this.icon && i.prepend(this.icon));
|
|
615
659
|
}
|
|
616
660
|
}
|
|
617
661
|
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", v);
|
|
618
|
-
window.customElements.get("ace-icon") || window.customElements.define("ace-icon",
|
|
619
|
-
class
|
|
662
|
+
window.customElements.get("ace-icon") || window.customElements.define("ace-icon", w);
|
|
663
|
+
class U {
|
|
620
664
|
constructor(t) {
|
|
621
665
|
this.widgetEl = t;
|
|
622
666
|
}
|
|
@@ -629,11 +673,11 @@ class M {
|
|
|
629
673
|
setZIndex(t) {
|
|
630
674
|
this.widgetEl.setZIndex(t);
|
|
631
675
|
}
|
|
632
|
-
|
|
633
|
-
this.widgetEl.dispatch("set-
|
|
676
|
+
setFullscreenMode(t) {
|
|
677
|
+
this.widgetEl.dispatch("set-fullscreen-mode", { value: t });
|
|
634
678
|
}
|
|
635
679
|
}
|
|
636
|
-
const
|
|
680
|
+
const H = "https://widgets.ace.teliacompany.net", y = document.createElement("template");
|
|
637
681
|
y.innerHTML = `<style>
|
|
638
682
|
@keyframes slideDown {
|
|
639
683
|
from {
|
|
@@ -706,13 +750,12 @@ y.innerHTML = `<style>
|
|
|
706
750
|
:host(.hidden) .widget-frame-container {
|
|
707
751
|
animation: slideDown 0.3s linear;
|
|
708
752
|
}
|
|
709
|
-
}
|
|
710
753
|
</style>`;
|
|
711
754
|
const _ = document.createElement("template");
|
|
712
755
|
_.innerHTML = '<div class="widget-frame-container"></div>';
|
|
713
|
-
class
|
|
756
|
+
class W extends HTMLElement {
|
|
714
757
|
constructor() {
|
|
715
|
-
super(), this.widget = null, this.activated = !1, this.active = !1, this.iframeEl = null, this.trigger = null, this._messageQueue = [], this.api = new
|
|
758
|
+
super(), this.widget = null, this.activated = !1, this.active = !1, this.iframeEl = null, this.trigger = null, this._messageQueue = [], this.api = new U(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) => {
|
|
716
759
|
this.toggleExpand();
|
|
717
760
|
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(y.content.cloneNode(!0)), this.shadow.appendChild(_.content.cloneNode(!0));
|
|
718
761
|
}
|
|
@@ -732,7 +775,7 @@ class B extends HTMLElement {
|
|
|
732
775
|
this.trigger && (this.trigger.widgetId = t, this.trigger.id = `ace-trigger_${t}`), this.setAttribute("widgetid", t);
|
|
733
776
|
}
|
|
734
777
|
get apiUrl() {
|
|
735
|
-
return this.getAttribute("apiurl") ||
|
|
778
|
+
return this.getAttribute("apiurl") || H;
|
|
736
779
|
}
|
|
737
780
|
set apiUrl(t) {
|
|
738
781
|
this.trigger && (this.trigger.apiUrl = t), this.setAttribute("apiurl", t);
|
|
@@ -749,6 +792,20 @@ class B extends HTMLElement {
|
|
|
749
792
|
isActivated() {
|
|
750
793
|
return this.activated;
|
|
751
794
|
}
|
|
795
|
+
disableAnimations() {
|
|
796
|
+
const t = this._getContainerEl();
|
|
797
|
+
t && (t.style.animationDuration = "0ms");
|
|
798
|
+
}
|
|
799
|
+
enableAnimations() {
|
|
800
|
+
const t = this._getContainerEl();
|
|
801
|
+
t && (t.style.animationDuration = "300ms");
|
|
802
|
+
}
|
|
803
|
+
_getContainerEl() {
|
|
804
|
+
var t;
|
|
805
|
+
return ((t = this.shadowRoot) == null ? void 0 : t.querySelector(
|
|
806
|
+
".widget-frame-container"
|
|
807
|
+
)) || null;
|
|
808
|
+
}
|
|
752
809
|
async activate() {
|
|
753
810
|
var e;
|
|
754
811
|
this.widget || (this.widget = await this._loadWidget(this.widgetId)), this._createIFrame(), this.activated = !0;
|
|
@@ -776,8 +833,8 @@ class B extends HTMLElement {
|
|
|
776
833
|
this.activated = !1, this.render();
|
|
777
834
|
}
|
|
778
835
|
_createIFrame() {
|
|
779
|
-
var
|
|
780
|
-
if (!((
|
|
836
|
+
var i;
|
|
837
|
+
if (!((i = this.widget) != null && i.distributionName) || this.iframeEl || !this.widget.linked)
|
|
781
838
|
return;
|
|
782
839
|
const t = {
|
|
783
840
|
display: "block",
|
|
@@ -796,11 +853,9 @@ class B extends HTMLElement {
|
|
|
796
853
|
height: "100%",
|
|
797
854
|
"border-radius": "0.7rem"
|
|
798
855
|
}, e = document.createElement("iframe");
|
|
799
|
-
Object.entries(t).forEach(([
|
|
800
|
-
e.style.setProperty(
|
|
801
|
-
});
|
|
802
|
-
const i = !0;
|
|
803
|
-
e.src = `${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&mobile=${i}`, this.iframeEl = e;
|
|
856
|
+
Object.entries(t).forEach(([s, r]) => {
|
|
857
|
+
e.style.setProperty(s, r);
|
|
858
|
+
}), e.src = `${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`, this.iframeEl = e;
|
|
804
859
|
}
|
|
805
860
|
executeMessageQueue() {
|
|
806
861
|
this._messageQueue.forEach((t) => {
|
|
@@ -811,25 +866,27 @@ class B extends HTMLElement {
|
|
|
811
866
|
return this.expanded === "true";
|
|
812
867
|
}
|
|
813
868
|
toggleExpand(t) {
|
|
814
|
-
typeof t
|
|
869
|
+
typeof t != "boolean" ? this.expanded = this.isExpanded() ? "false" : "true" : this.isExpanded() !== t && (this.expanded = t ? "true" : "false"), this.dispatch("set-open", {
|
|
870
|
+
value: this.isExpanded()
|
|
871
|
+
}), this.trigger && this.trigger.setActive(this.isExpanded());
|
|
815
872
|
}
|
|
816
873
|
setZIndex(t) {
|
|
817
874
|
this.zIndex = t, this.render();
|
|
818
875
|
}
|
|
819
876
|
render() {
|
|
820
|
-
var i, s
|
|
877
|
+
var i, s;
|
|
821
878
|
if (!this.iframeEl)
|
|
822
879
|
return;
|
|
823
880
|
this.isExpanded() ? (this.classList.add("expanded"), this.classList.remove("hidden")) : this.classList.remove("expanded");
|
|
824
881
|
const t = this.activated ? "block" : "none";
|
|
825
882
|
this.iframeEl.style.setProperty("display", t), this.activated ? this.classList.add("activated") : this.classList.remove("activated");
|
|
826
|
-
const e =
|
|
827
|
-
e && e.childNodes.length === 0 && e.appendChild(this.iframeEl), e && this.zIndex !== -1 && (e.style.zIndex = this.zIndex.toString()), this.trigger && ((
|
|
883
|
+
const e = this._getContainerEl();
|
|
884
|
+
e && e.childNodes.length === 0 && e.appendChild(this.iframeEl), e && this.zIndex !== -1 && (e.style.zIndex = this.zIndex.toString()), this.trigger && ((i = this.shadowRoot) == null ? void 0 : i.querySelectorAll("ace-trigger").length) === 0 && ((s = this.shadowRoot) == null || s.appendChild(this.trigger));
|
|
828
885
|
}
|
|
829
886
|
}
|
|
830
|
-
window.customElements.get("ace-widget") || window.customElements.define("ace-widget",
|
|
887
|
+
window.customElements.get("ace-widget") || window.customElements.define("ace-widget", W);
|
|
831
888
|
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", v);
|
|
832
889
|
export {
|
|
833
|
-
|
|
834
|
-
|
|
890
|
+
T as SiteComponent,
|
|
891
|
+
W as WidgetComponent
|
|
835
892
|
};
|
package/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(p
|
|
1
|
+
(function(h,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(h=typeof globalThis<"u"?globalThis:h||self,p(h["@telia-ace/widget-site"]={}))})(this,function(h){"use strict";class p{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(e,i){window.ace._w.push([e,i])},configure:function(e){window.ace._c.push(e)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([e,i])=>{this.widget(e,i)}),((t==null?void 0:t._c)||[]).forEach(e=>{this.configure(e)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(i=>{i()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,e){const i=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t});if(!i){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const n=Object.values(this._api.getWidgets()).find(a=>{var o;return((o=a.widget)==null?void 0:o.name)===t});e(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}const k="##__SITES_VERSION__##";class I{constructor(t){this._site=t}storagePolicy(t){Object.entries(this._site._widgets).forEach(([e,i])=>{i.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([e,i])=>{i.dispatch("disallow-storage-key",{storageKey:t})})}getWidgets(){return this._site._widgets}version(){const t=k;return{widgets:this._site.getWidgetsVersions(),sites:t}}}class A{constructor(t,e){this.triggerType=t,this.condition=e,this.triggerType=t,this.condition=e}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const e=[];return this.condition.outputs.filter(i=>i.action.type==="render_widget"&&S(i.value,t)).forEach(i=>{let s={widgetId:""};try{s=JSON.parse(i.action.data)}catch{s={widgetId:""}}e.push(s.widgetId)}),e}}const S=(r,t)=>{if(r==="*"||r==="/*"||r===t)return!0;if(r.endsWith("/*")){const s=r.slice(0,-2);return t.startsWith(s)}return!1},T=(r,t)=>{const e=s=>`ace_${r.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[n,a])=>{const[o,l]=n.split("-");if(e(l)!=n)return s;try{const d=JSON.parse(a);s[l]=d.value}catch{return s}return s},{})},m="https://widgets.ace.teliacompany.net",z="https://embed.webprovisions.io",M=()=>{if(typeof window<"u"){const r=history.pushState,t=history.replaceState;history.pushState=function(...e){r.apply(history,e),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...e){t.apply(history,e),window.dispatchEvent(new Event("locationchange"))}}};class 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 I(this),this._environment=new p(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")||z}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){M(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s;const{type:e,data:i}=t.data;if(e==="widget-minimize")this._widgets[i.widgetId].toggleExpand();else if(e==="widget-activated"){this._widgets[i.widgetId].executeMessageQueue();const n=this._widgets[i.widgetId];n&&(this._loadedVersions[i.widgetId]=i.version,this._environment.executePreloadedHandlers(((s=n.widget)==null?void 0:s.name)||""));try{const a=JSON.parse(i.storage),o=T(i.widgetId,a);typeof o.open=="boolean"&&(n.disableAnimations(),n.toggleExpand(o.open),setTimeout(()=>{n.enableAnimations()},600))}catch{console.warn("unable to parse widget storage")}}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,e,i){this.render()}async _loadSite(){var s;const e=await(await fetch(`${this.apiUrl}/api/site/${this.siteId}`)).json(),i=location.hostname;if(!((e==null?void 0:e.hosts)||[]).includes(i)){console.warn(`the host "${i}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=e,this._site&&(this._site.triggers=this._site.triggers.map(n=>new A(n.triggerType,n.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.id)})}addWidgetEl(t){const e=`ace-widget_${t}`;let i=document.getElementById(e);i||(i=document.createElement("ace-widget"),i.id=e,i.widgetId=t,this.apiUrl!==m&&(i.apiUrl=this.apiUrl),document.body.appendChild(i)),this._widgets={...this._widgets,[t]:i}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=$(this._site);for(const[e,i]of Object.entries(this._widgets)){const s=t.find(n=>n.id===e);s&&!i.isActivated()?i.activate():!s&&i.isActivated()&&i.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",w);const $=r=>{const t=window.location.pathname;return r.triggers.reduce((i,s)=>(s.shouldActivate(t).forEach(a=>{const o=i.find(d=>d.id===a),l=((r==null?void 0:r.widgets)||[]).find(d=>d.id===a);!o&&l&&i.push({id:a})}),i),[])},g=(r,t,e)=>{r&&e.style.setProperty(t,r)},B=(r,t)=>{var e,i,s,n,a,o,l,d,c;g((e=r.colors)==null?void 0:e.primaryBackground,"--primary-background",t),g((i=r.colors)==null?void 0:i.textOnPrimaryBackground,"--text-on-primary-background",t),g((s=r.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),g((n=r.colors)==null?void 0:n.textOnSecondaryBackground,"--text-on-secondary-background",t),g((a=r.colors)==null?void 0:a.interactiveDestructiveBackground,"--destructive-color",t),g((o=r.colors)==null?void 0:o.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),g((l=r.colors)==null?void 0:l.interactivePrimaryBackground,"--interactive-primary-background",t),g((d=r.colors)==null?void 0:d.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),g((c=r.colors)==null?void 0:c.focusColor,"--focus-color",t)},U=(r={})=>{const{content:t="",title:e,attributes:i=[]}=r;let s="";const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...i];return e&&(s=`<title>${e}</title>`),`<svg ${n.map(o=>`${o.name}="${o.value}"`).join(" ")}>${s}${t}</svg>`},f=document.createElement("template");f.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
3
|
></span>`;const b=document.createElement("template");b.innerHTML=`<style>
|
|
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 v 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,e,i){this.render()}render(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector(".ace-icon__container");if(t){const i=
|
|
37
|
+
</style>`;class v 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,e,i){this.render()}render(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector(".ace-icon__container");if(t){const i=U({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=i}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",v);const H={name:"question",svg:'<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C59.9827 16.5432 47.4568 4.01731 32 4ZM32 55.6923C18.9151 55.6923 8.30769 45.0849 8.30769 32C8.30769 18.9151 18.9151 8.30769 32 8.30769C45.0849 8.30769 55.6923 18.9151 55.6923 32C55.6775 45.0788 45.0788 55.6775 32 55.6923Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.9423 37.5723L36.311 32.9068L36.7354 32.4448C39.7555 29.1161 40.7645 27.0647 40.7645 24.5087C40.7645 23.1091 40.4251 21.7942 39.7041 20.6491C38.3044 18.3587 35.6323 16.9166 32.2816 16.9166C28.7565 16.9166 25.3125 18.7414 23.2581 21.6772L23.1201 21.8791C22.8232 22.3032 22.696 22.6849 22.696 22.9818C22.696 23.7029 23.926 25.9932 25.2833 25.9932C25.5378 25.9932 25.7922 25.9084 26.0467 25.7388C26.2588 25.5691 26.5981 25.2298 27.0647 24.7208C28.8885 22.6849 30.1185 21.9215 31.7726 21.9215C33.6813 21.9215 35.081 23.1939 35.081 24.8905C35.081 26.375 34.2751 27.7746 32.3664 29.8529L28.2523 34.2216C27.9554 34.6033 27.7857 34.9426 27.7857 35.282C27.7857 35.6213 27.9978 36.1726 28.4219 36.8937C29.0581 37.8692 29.7368 38.3782 30.4578 38.3782C30.9244 38.3782 31.3909 38.1237 31.9423 37.5723ZM30.882 47.4972C29.2278 47.4972 27.6585 44.7403 27.6585 43.6799C27.6585 42.1954 30.0761 40.6261 32.4089 40.6261C33.6389 40.6261 34.2751 41.1775 34.2751 42.3227C34.2751 44.0616 33.4692 45.843 32.4513 46.7761C31.9423 47.2427 31.4334 47.4972 30.882 47.4972Z"/></svg>'},y=document.createElement("template");y.innerHTML=`<style>
|
|
38
38
|
:host {
|
|
39
39
|
position: fixed;
|
|
40
40
|
display: flex;
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class x extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(y.content.cloneNode(!0)),this.shadow.appendChild(_.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,e,i){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,e;(e=(t=this.widget)==null?void 0:t.configuration)!=null&&e.branding&&
|
|
212
|
+
</div>`;class x extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(y.content.cloneNode(!0)),this.shadow.appendChild(_.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,e,i){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,e;(e=(t=this.widget)==null?void 0:t.configuration)!=null&&e.branding&&B(this.widget.configuration.branding,this)}async _loadWidget(t){const i=await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json(),s=JSON.parse(i.configuration);return{...i,configuration:s}}async _renderSymbol(){var o,l,d;const t=(l=(o=this.widget)==null?void 0:o.configuration)==null?void 0:l.branding,e=(d=t==null?void 0:t.graphics)==null?void 0:d.trigger;if(e){const c=document.createElement("img");return c.src=e,c.classList.add("trigger-icon"),c.alt="",c}const i={type:"Telia",content:"question"},s=async c=>H,{type:n,content:a}=i;switch(n){case"Telia":{const c=await s();if(c){const u=document.createElement("ace-icon");return u.classList.add("trigger-icon"),u.svg=c.svg,u.size="lg",u}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,n,a,o,l,d,c,u;if(!(((o=(a=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:a.other)==null?void 0:o.showButtonLabel)||!1))return null;const e=((u=(c=(d=(l=this.widget)==null?void 0:l.configuration)==null?void 0:d.branding)==null?void 0:c.other)==null?void 0:u.buttonLabelText)||"",i=document.createElement("button");return i.setAttribute("label",e),i.classList.add("trigger-label"),i.addEventListener("click",this._onClicked),i.innerHTML=e,i}render(){var s,n,a;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),e=this._renderButtonLabel();(n=t==null?void 0:t.querySelector(".trigger-label"))==null||n.remove(),t&&e&&t.prepend(e);const i=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");i&&(i.classList.toggle("active",this.active),i.classList.toggle("rendered",this.loaded),i.addEventListener("click",this._onClicked),this.icon&&i.prepend(this.icon))}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",x),window.customElements.get("ace-icon")||window.customElements.define("ace-icon",v);class W{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 O="https://widgets.ace.teliacompany.net",E=document.createElement("template");E.innerHTML=`<style>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -281,5 +281,4 @@ svg {
|
|
|
281
281
|
:host(.hidden) .widget-frame-container {
|
|
282
282
|
animation: slideDown 0.3s linear;
|
|
283
283
|
}
|
|
284
|
-
}
|
|
285
|
-
</style>`;const C=document.createElement("template");C.innerHTML='<div class="widget-frame-container"></div>';class L extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new B(this),this.zIndex=-1,this.trigger=document.createElement("ace-trigger"),this.trigger.widgetId=this.widgetId,this.trigger.apiUrl=this.apiUrl,this.trigger.id=`ace-trigger_${this.widgetId}`,this.trigger.addEventListener("toggle",t=>{this.toggleExpand()}),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(E.content.cloneNode(!0)),this.shadow.appendChild(C.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl","expanded"]}get expanded(){return this.getAttribute("expanded")||"false"}set expanded(t){this.setAttribute("expanded",t),t==="false"&&this.classList.toggle("hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||U}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,e,i){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var e,i;((e=t.data)==null?void 0:e.type)==="widget-set-active"&&typeof((i=t.data.data)==null?void 0:i.active)=="boolean"&&(this.active=t.data.data.active)}),this.render()}isActivated(){return this.activated}async activate(){var e;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((e=window.ace)==null?void 0:e.applications)||[]).find(i=>i.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json()}dispatch(t,e={}){var s;const i={type:t,data:e};if(e.widgetId||(e.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(i);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(i,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var s;if(!((s=this.widget)!=null&&s.distributionName)||this.iframeEl)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},e=document.createElement("iframe");Object.entries(t).forEach(([n,o])=>{e.style.setProperty(n,o)});const i=!0;e.src=`${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&mobile=${i}`,this.iframeEl=e}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){typeof t=="boolean"?this.expanded=t?"true":"false":this.expanded=this.isExpanded()?"false":"true",this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var i,s,n;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("expanded"),this.classList.remove("hidden")):this.classList.remove("expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const e=(i=this.shadowRoot)==null?void 0:i.querySelector(".widget-frame-container");e&&e.childNodes.length===0&&e.appendChild(this.iframeEl),e&&this.zIndex!==-1&&(e.style.zIndex=this.zIndex.toString()),this.trigger&&((s=this.shadowRoot)==null?void 0:s.querySelectorAll("ace-trigger").length)===0&&((n=this.shadowRoot)==null||n.appendChild(this.trigger))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",L),window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",x),p.SiteComponent=w,p.WidgetComponent=L,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
|
284
|
+
</style>`;const C=document.createElement("template");C.innerHTML='<div class="widget-frame-container"></div>';class L extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new W(this),this.zIndex=-1,this.trigger=document.createElement("ace-trigger"),this.trigger.widgetId=this.widgetId,this.trigger.apiUrl=this.apiUrl,this.trigger.id=`ace-trigger_${this.widgetId}`,this.trigger.addEventListener("toggle",t=>{this.toggleExpand()}),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(E.content.cloneNode(!0)),this.shadow.appendChild(C.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl","expanded"]}get expanded(){return this.getAttribute("expanded")||"false"}set expanded(t){this.setAttribute("expanded",t),t==="false"&&this.classList.toggle("hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||O}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,e,i){this.render()}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),window.addEventListener("message",t=>{var e,i;((e=t.data)==null?void 0:e.type)==="widget-set-active"&&typeof((i=t.data.data)==null?void 0:i.active)=="boolean"&&(this.active=t.data.data.active)}),this.render()}isActivated(){return this.activated}disableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="0ms")}enableAnimations(){const t=this._getContainerEl();t&&(t.style.animationDuration="300ms")}_getContainerEl(){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(".widget-frame-container"))||null}async activate(){var e;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((e=window.ace)==null?void 0:e.applications)||[]).find(i=>i.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json()}dispatch(t,e={}){var s;const i={type:t,data:e};if(e.widgetId||(e.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(i);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(i,"*")}async deactivate(){this.activated=!1,this.render()}_createIFrame(){var i;if(!((i=this.widget)!=null&&i.distributionName)||this.iframeEl||!this.widget.linked)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},e=document.createElement("iframe");Object.entries(t).forEach(([s,n])=>{e.style.setProperty(s,n)}),e.src=`${this.apiUrl}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,this.iframeEl=e}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){typeof t!="boolean"?this.expanded=this.isExpanded()?"false":"true":this.isExpanded()!==t&&(this.expanded=t?"true":"false"),this.dispatch("set-open",{value:this.isExpanded()}),this.trigger&&this.trigger.setActive(this.isExpanded())}setZIndex(t){this.zIndex=t,this.render()}render(){var i,s;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("expanded"),this.classList.remove("hidden")):this.classList.remove("expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const e=this._getContainerEl();e&&e.childNodes.length===0&&e.appendChild(this.iframeEl),e&&this.zIndex!==-1&&(e.style.zIndex=this.zIndex.toString()),this.trigger&&((i=this.shadowRoot)==null?void 0:i.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.appendChild(this.trigger))}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",L),window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",x),h.SiteComponent=w,h.WidgetComponent=L,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|