@telia-ace/widget-site 1.1.82-rc.8 → 1.1.82
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 +7 -6
- package/index.mjs +176 -117
- package/index.umd.js +6 -5
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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
|
-
></span>`;const
|
|
3
|
+
></span>`;const w=document.createElement("template");w.innerHTML=`<style>
|
|
4
4
|
:host {
|
|
5
5
|
display: inline-block;
|
|
6
6
|
--size-sm: 1rem;
|
|
@@ -34,7 +34,7 @@ svg {
|
|
|
34
34
|
min-width: var(--size-lg);
|
|
35
35
|
width: var(--size-lg);
|
|
36
36
|
}
|
|
37
|
-
</style>`;class f extends HTMLElement{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(
|
|
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);
|
|
@@ -241,6 +241,7 @@ svg {
|
|
|
241
241
|
z-index: 6;
|
|
242
242
|
width: 400px;
|
|
243
243
|
height: 775px;
|
|
244
|
+
max-height: calc(100% - 100px);
|
|
244
245
|
inset: auto 20px 20px auto;
|
|
245
246
|
border-radius: 0.7rem;
|
|
246
247
|
pointer-events: none;
|
|
@@ -267,6 +268,7 @@ svg {
|
|
|
267
268
|
.widget-frame-container {
|
|
268
269
|
width: 100%;
|
|
269
270
|
height: 100%;
|
|
271
|
+
max-height: 100%;
|
|
270
272
|
inset: 0;
|
|
271
273
|
}
|
|
272
274
|
}
|
|
@@ -279,5 +281,4 @@ svg {
|
|
|
279
281
|
:host(.hidden) .widget-frame-container {
|
|
280
282
|
animation: slideDown 0.3s linear;
|
|
281
283
|
}
|
|
282
|
-
}
|
|
283
|
-
</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=window.innerWidth<=800;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
|
@@ -38,27 +38,27 @@ class x {
|
|
|
38
38
|
widget(t, e) {
|
|
39
39
|
const i = Object.values(this._api.getWidgets()).find(
|
|
40
40
|
(s) => {
|
|
41
|
-
var
|
|
42
|
-
return ((
|
|
41
|
+
var r;
|
|
42
|
+
return ((r = s.widget) == null ? void 0 : r.name) === t;
|
|
43
43
|
}
|
|
44
44
|
);
|
|
45
45
|
if (!i) {
|
|
46
46
|
const s = this._widgetAPIHandlers.get(t) || [];
|
|
47
47
|
s.push(() => {
|
|
48
|
-
const
|
|
49
|
-
(
|
|
50
|
-
var
|
|
51
|
-
return ((
|
|
48
|
+
const r = Object.values(this._api.getWidgets()).find(
|
|
49
|
+
(a) => {
|
|
50
|
+
var o;
|
|
51
|
+
return ((o = a.widget) == null ? void 0 : o.name) === t;
|
|
52
52
|
}
|
|
53
53
|
);
|
|
54
|
-
e(
|
|
54
|
+
e(r == null ? void 0 : r.api);
|
|
55
55
|
}), this._widgetAPIHandlers.set(t, s);
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
58
|
e(i.api);
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
const E = "
|
|
61
|
+
const E = "##__SITES_VERSION__##";
|
|
62
62
|
class C {
|
|
63
63
|
constructor(t) {
|
|
64
64
|
this._site = t;
|
|
@@ -88,17 +88,63 @@ 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
|
-
const
|
|
139
|
+
const n = history.pushState, t = history.replaceState;
|
|
94
140
|
history.pushState = function(...e) {
|
|
95
|
-
|
|
141
|
+
n.apply(history, e), window.dispatchEvent(new Event("locationchange"));
|
|
96
142
|
}, history.replaceState = function(...e) {
|
|
97
143
|
t.apply(history, e), window.dispatchEvent(new Event("locationchange"));
|
|
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,29 +161,37 @@ 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")
|
|
134
180
|
this._widgets[i.widgetId].toggleExpand();
|
|
135
181
|
else if (e === "widget-activated") {
|
|
136
182
|
this._widgets[i.widgetId].executeMessageQueue();
|
|
137
|
-
const
|
|
138
|
-
|
|
139
|
-
((s =
|
|
183
|
+
const r = this._widgets[i.widgetId];
|
|
184
|
+
r && (this._loadedVersions[i.widgetId] = i.version, this._environment.executePreloadedHandlers(
|
|
185
|
+
((s = r.widget) == null ? void 0 : s.name) || ""
|
|
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,8 +210,10 @@ class k extends HTMLElement {
|
|
|
156
210
|
);
|
|
157
211
|
return;
|
|
158
212
|
}
|
|
159
|
-
this._site = e,
|
|
160
|
-
|
|
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) => {
|
|
216
|
+
this.addWidgetEl(r.id);
|
|
161
217
|
});
|
|
162
218
|
}
|
|
163
219
|
addWidgetEl(t) {
|
|
@@ -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,87 +234,75 @@ 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
|
|
185
241
|
);
|
|
186
242
|
s && !i.isActivated() ? i.activate() : !s && i.isActivated() && i.deactivate();
|
|
187
243
|
}
|
|
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(n.action.data);
|
|
202
|
-
} catch {
|
|
203
|
-
c = {
|
|
204
|
-
widgetId: ""
|
|
205
|
-
};
|
|
206
|
-
}
|
|
207
|
-
const g = t.findIndex((l) => l.id === c.widgetId) > -1, a = ((r == null ? void 0 : r.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
|
-
},
|
|
215
|
-
|
|
216
|
-
},
|
|
217
|
-
var e, i, s,
|
|
218
|
-
|
|
219
|
-
(i =
|
|
257
|
+
}), i), []);
|
|
258
|
+
}, g = (n, t, e) => {
|
|
259
|
+
n && e.style.setProperty(t, n);
|
|
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(
|
|
263
|
+
(i = n.colors) == null ? void 0 : i.textOnPrimaryBackground,
|
|
220
264
|
"--text-on-primary-background",
|
|
221
265
|
t
|
|
222
|
-
),
|
|
223
|
-
(s =
|
|
266
|
+
), g(
|
|
267
|
+
(s = n.colors) == null ? void 0 : s.secondaryBackground,
|
|
224
268
|
"--secondary-background",
|
|
225
269
|
t
|
|
226
|
-
),
|
|
227
|
-
(
|
|
270
|
+
), g(
|
|
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
|
-
},
|
|
248
|
-
const { content: t = "", title: e, attributes: i = [] } =
|
|
290
|
+
), g((c = n.colors) == null ? void 0 : c.focusColor, "--focus-color", t);
|
|
291
|
+
}, $ = (n = {}) => {
|
|
292
|
+
const { content: t = "", title: e, attributes: i = [] } = n;
|
|
249
293
|
let s = "";
|
|
250
|
-
const
|
|
294
|
+
const r = [
|
|
251
295
|
{ name: "xmlns", value: "http://www.w3.org/2000/svg" },
|
|
252
296
|
{ name: "fill", value: "currentColor" },
|
|
253
297
|
...i
|
|
254
298
|
];
|
|
255
|
-
return e && (s = `<title>${e}</title>`), `<svg ${
|
|
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 (
|
|
579
|
-
switch (
|
|
622
|
+
}, s = async (c) => B, { type: r, content: a } = i;
|
|
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,
|
|
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,
|
|
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
|
-
(
|
|
613
|
-
const i = (
|
|
656
|
+
(r = t == null ? void 0 : t.querySelector(".trigger-label")) == null || r.remove(), t && e && t.prepend(e);
|
|
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 {
|
|
@@ -666,6 +710,7 @@ y.innerHTML = `<style>
|
|
|
666
710
|
z-index: 6;
|
|
667
711
|
width: 400px;
|
|
668
712
|
height: 775px;
|
|
713
|
+
max-height: calc(100% - 100px);
|
|
669
714
|
inset: auto 20px 20px auto;
|
|
670
715
|
border-radius: 0.7rem;
|
|
671
716
|
pointer-events: none;
|
|
@@ -692,6 +737,7 @@ y.innerHTML = `<style>
|
|
|
692
737
|
.widget-frame-container {
|
|
693
738
|
width: 100%;
|
|
694
739
|
height: 100%;
|
|
740
|
+
max-height: 100%;
|
|
695
741
|
inset: 0;
|
|
696
742
|
}
|
|
697
743
|
}
|
|
@@ -704,13 +750,12 @@ y.innerHTML = `<style>
|
|
|
704
750
|
:host(.hidden) .widget-frame-container {
|
|
705
751
|
animation: slideDown 0.3s linear;
|
|
706
752
|
}
|
|
707
|
-
}
|
|
708
753
|
</style>`;
|
|
709
754
|
const _ = document.createElement("template");
|
|
710
755
|
_.innerHTML = '<div class="widget-frame-container"></div>';
|
|
711
|
-
class
|
|
756
|
+
class W extends HTMLElement {
|
|
712
757
|
constructor() {
|
|
713
|
-
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) => {
|
|
714
759
|
this.toggleExpand();
|
|
715
760
|
}), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(y.content.cloneNode(!0)), this.shadow.appendChild(_.content.cloneNode(!0));
|
|
716
761
|
}
|
|
@@ -730,7 +775,7 @@ class B extends HTMLElement {
|
|
|
730
775
|
this.trigger && (this.trigger.widgetId = t, this.trigger.id = `ace-trigger_${t}`), this.setAttribute("widgetid", t);
|
|
731
776
|
}
|
|
732
777
|
get apiUrl() {
|
|
733
|
-
return this.getAttribute("apiurl") ||
|
|
778
|
+
return this.getAttribute("apiurl") || H;
|
|
734
779
|
}
|
|
735
780
|
set apiUrl(t) {
|
|
736
781
|
this.trigger && (this.trigger.apiUrl = t), this.setAttribute("apiurl", t);
|
|
@@ -747,6 +792,20 @@ class B extends HTMLElement {
|
|
|
747
792
|
isActivated() {
|
|
748
793
|
return this.activated;
|
|
749
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
|
+
}
|
|
750
809
|
async activate() {
|
|
751
810
|
var e;
|
|
752
811
|
this.widget || (this.widget = await this._loadWidget(this.widgetId)), this._createIFrame(), this.activated = !0;
|
|
@@ -774,8 +833,8 @@ class B extends HTMLElement {
|
|
|
774
833
|
this.activated = !1, this.render();
|
|
775
834
|
}
|
|
776
835
|
_createIFrame() {
|
|
777
|
-
var
|
|
778
|
-
if (!((
|
|
836
|
+
var i;
|
|
837
|
+
if (!((i = this.widget) != null && i.distributionName) || this.iframeEl || !this.widget.linked)
|
|
779
838
|
return;
|
|
780
839
|
const t = {
|
|
781
840
|
display: "block",
|
|
@@ -794,11 +853,9 @@ class B extends HTMLElement {
|
|
|
794
853
|
height: "100%",
|
|
795
854
|
"border-radius": "0.7rem"
|
|
796
855
|
}, e = document.createElement("iframe");
|
|
797
|
-
Object.entries(t).forEach(([
|
|
798
|
-
e.style.setProperty(
|
|
799
|
-
});
|
|
800
|
-
const i = window.innerWidth <= 800;
|
|
801
|
-
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;
|
|
802
859
|
}
|
|
803
860
|
executeMessageQueue() {
|
|
804
861
|
this._messageQueue.forEach((t) => {
|
|
@@ -809,25 +866,27 @@ class B extends HTMLElement {
|
|
|
809
866
|
return this.expanded === "true";
|
|
810
867
|
}
|
|
811
868
|
toggleExpand(t) {
|
|
812
|
-
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());
|
|
813
872
|
}
|
|
814
873
|
setZIndex(t) {
|
|
815
874
|
this.zIndex = t, this.render();
|
|
816
875
|
}
|
|
817
876
|
render() {
|
|
818
|
-
var i, s
|
|
877
|
+
var i, s;
|
|
819
878
|
if (!this.iframeEl)
|
|
820
879
|
return;
|
|
821
880
|
this.isExpanded() ? (this.classList.add("expanded"), this.classList.remove("hidden")) : this.classList.remove("expanded");
|
|
822
881
|
const t = this.activated ? "block" : "none";
|
|
823
882
|
this.iframeEl.style.setProperty("display", t), this.activated ? this.classList.add("activated") : this.classList.remove("activated");
|
|
824
|
-
const e =
|
|
825
|
-
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));
|
|
826
885
|
}
|
|
827
886
|
}
|
|
828
|
-
window.customElements.get("ace-widget") || window.customElements.define("ace-widget",
|
|
887
|
+
window.customElements.get("ace-widget") || window.customElements.define("ace-widget", W);
|
|
829
888
|
window.customElements.get("ace-trigger") || window.customElements.define("ace-trigger", v);
|
|
830
889
|
export {
|
|
831
|
-
|
|
832
|
-
|
|
890
|
+
T as SiteComponent,
|
|
891
|
+
W as WidgetComponent
|
|
833
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);
|
|
@@ -241,6 +241,7 @@ svg {
|
|
|
241
241
|
z-index: 6;
|
|
242
242
|
width: 400px;
|
|
243
243
|
height: 775px;
|
|
244
|
+
max-height: calc(100% - 100px);
|
|
244
245
|
inset: auto 20px 20px auto;
|
|
245
246
|
border-radius: 0.7rem;
|
|
246
247
|
pointer-events: none;
|
|
@@ -267,6 +268,7 @@ svg {
|
|
|
267
268
|
.widget-frame-container {
|
|
268
269
|
width: 100%;
|
|
269
270
|
height: 100%;
|
|
271
|
+
max-height: 100%;
|
|
270
272
|
inset: 0;
|
|
271
273
|
}
|
|
272
274
|
}
|
|
@@ -279,5 +281,4 @@ svg {
|
|
|
279
281
|
:host(.hidden) .widget-frame-container {
|
|
280
282
|
animation: slideDown 0.3s linear;
|
|
281
283
|
}
|
|
282
|
-
}
|
|
283
|
-
</style>`;const C=document.createElement("template");C.innerHTML='<div class="widget-frame-container"></div>';class L extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this.api=new 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=window.innerWidth<=800;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=m,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"})});
|