@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 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 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(o=>{var d;return((d=o.widget)==null?void 0:d.name)===t});e(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}const L="1.1.82-rc.8";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=L;return{widgets:this._site.getWidgetsVersions(),sites:t}}}const p="https://widgets.ace.teliacompany.net",k="https://embed.webprovisions.io",A=()=>{if(typeof window<"u"){const r=history.pushState,t=history.replaceState;history.pushState=function(...e){r.apply(history,e),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...e){t.apply(history,e),window.dispatchEvent(new Event("locationchange"))}}};class u 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 C(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||p}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||k}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){A(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s;const{type:e,data:i}=t.data;if(e==="widget-minimize")this._widgets[i.widgetId].toggleExpand();else if(e==="widget-activated"){this._widgets[i.widgetId].executeMessageQueue();const n=this._widgets[i.widgetId];n&&(this._loadedVersions[i.widgetId]=i.version,this._environment.executePreloadedHandlers(((s=n.widget)==null?void 0:s.name)||""))}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,e,i){this.render()}async _loadSite(){var s;const e=await(await fetch(`${this.apiUrl}/api/site/${this.siteId}`)).json(),i=location.hostname;if(!((e==null?void 0:e.hosts)||[]).includes(i)){console.warn(`the host "${i}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=e,(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.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!==p&&(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=S(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",u);const S=r=>{const t=[];return(r.triggers||[]).filter(e=>e.triggerType==="visit").forEach(e=>{const i=window.location.pathname,s=e.condition.outputs||[];e.condition.type==="url"&&s.forEach(n=>{const o=n.action.type==="render_widget";if((n.value===i||n.value==="*"||n.value==="/*")&&o){let c={widgetId:""};try{c=JSON.parse(n.action.data)}catch{c={widgetId:""}}const g=t.findIndex(l=>l.id===c.widgetId)>-1,a=((r==null?void 0:r.widgets)||[]).find(l=>l.id===c.widgetId);a&&!g&&t.push(a)}})}),t},h=(r,t,e)=>{r&&e.style.setProperty(t,r)},T=(r,t)=>{var e,i,s,n,o,d,c,g,a;h((e=r.colors)==null?void 0:e.primaryBackground,"--primary-background",t),h((i=r.colors)==null?void 0:i.textOnPrimaryBackground,"--text-on-primary-background",t),h((s=r.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),h((n=r.colors)==null?void 0:n.textOnSecondaryBackground,"--text-on-secondary-background",t),h((o=r.colors)==null?void 0:o.interactiveDestructiveBackground,"--destructive-color",t),h((d=r.colors)==null?void 0:d.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),h((c=r.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),h((g=r.colors)==null?void 0:g.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),h((a=r.colors)==null?void 0:a.focusColor,"--focus-color",t)},z=(r={})=>{const{content:t="",title:e,attributes:i=[]}=r;let s="";const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...i];return e&&(s=`<title>${e}</title>`),`<svg ${n.map(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},w=document.createElement("template");w.innerHTML=`<span
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 m=document.createElement("template");m.innerHTML=`<style>
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(m.content.cloneNode(!0)),this.shadow.appendChild(w.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=z({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=i}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",f);const M={name:"question",svg:'<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C59.9827 16.5432 47.4568 4.01731 32 4ZM32 55.6923C18.9151 55.6923 8.30769 45.0849 8.30769 32C8.30769 18.9151 18.9151 8.30769 32 8.30769C45.0849 8.30769 55.6923 18.9151 55.6923 32C55.6775 45.0788 45.0788 55.6775 32 55.6923Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.9423 37.5723L36.311 32.9068L36.7354 32.4448C39.7555 29.1161 40.7645 27.0647 40.7645 24.5087C40.7645 23.1091 40.4251 21.7942 39.7041 20.6491C38.3044 18.3587 35.6323 16.9166 32.2816 16.9166C28.7565 16.9166 25.3125 18.7414 23.2581 21.6772L23.1201 21.8791C22.8232 22.3032 22.696 22.6849 22.696 22.9818C22.696 23.7029 23.926 25.9932 25.2833 25.9932C25.5378 25.9932 25.7922 25.9084 26.0467 25.7388C26.2588 25.5691 26.5981 25.2298 27.0647 24.7208C28.8885 22.6849 30.1185 21.9215 31.7726 21.9215C33.6813 21.9215 35.081 23.1939 35.081 24.8905C35.081 26.375 34.2751 27.7746 32.3664 29.8529L28.2523 34.2216C27.9554 34.6033 27.7857 34.9426 27.7857 35.282C27.7857 35.6213 27.9978 36.1726 28.4219 36.8937C29.0581 37.8692 29.7368 38.3782 30.4578 38.3782C30.9244 38.3782 31.3909 38.1237 31.9423 37.5723ZM30.882 47.4972C29.2278 47.4972 27.6585 44.7403 27.6585 43.6799C27.6585 42.1954 30.0761 40.6261 32.4089 40.6261C33.6389 40.6261 34.2751 41.1775 34.2751 42.3227C34.2751 44.0616 33.4692 45.843 32.4513 46.7761C31.9423 47.2427 31.4334 47.4972 30.882 47.4972Z"/></svg>'},b=document.createElement("template");b.innerHTML=`<style>
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&&T(this.widget.configuration.branding,this)}async _loadWidget(t){const i=await(await fetch(`${this.apiUrl}/api/widget/${t}`)).json(),s=JSON.parse(i.configuration);return{...i,configuration:s}}async _renderSymbol(){var d,c,g;const t=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding,e=(g=t==null?void 0:t.graphics)==null?void 0:g.trigger;if(e){const a=document.createElement("img");return a.src=e,a.classList.add("trigger-icon"),a.alt="",a}const i={type:"Telia",content:"question"},s=async a=>M,{type:n,content:o}=i;switch(n){case"Telia":{const a=await s();if(a){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=a.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,n,o,d,c,g,a,l;if(!(((d=(o=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:o.other)==null?void 0:d.showButtonLabel)||!1))return null;const e=((l=(a=(g=(c=this.widget)==null?void 0:c.configuration)==null?void 0:g.branding)==null?void 0:a.other)==null?void 0:l.buttonLabelText)||"",i=document.createElement("button");return i.setAttribute("label",e),i.classList.add("trigger-label"),i.addEventListener("click",this._onClicked),i.innerHTML=e,i}render(){var s,n,o;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=(o=this.shadowRoot)==null?void 0:o.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 ${constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}setMobileMode(t){this.widgetEl.dispatch("set-mobile-mode",{value:t})}}const B="https://widgets.ace.teliacompany.net",_=document.createElement("template");_.innerHTML=`<style>
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 n;
42
- return ((n = s.widget) == null ? void 0 : n.name) === t;
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 n = Object.values(this._api.getWidgets()).find(
49
- (o) => {
50
- var d;
51
- return ((d = o.widget) == null ? void 0 : d.name) === t;
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(n == null ? void 0 : n.api);
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 = "1.1.82-rc.8";
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
- const p = "https://widgets.ace.teliacompany.net", L = "https://embed.webprovisions.io", I = () => {
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 r = history.pushState, t = history.replaceState;
139
+ const n = history.pushState, t = history.replaceState;
94
140
  history.pushState = function(...e) {
95
- r.apply(history, e), window.dispatchEvent(new Event("locationchange"));
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 k extends HTMLElement {
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") || p;
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") || L;
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
- I(), await this._loadSite(), this.render(), this._environment.bootstrap(), window.addEventListener("locationchange", this.routeChangeListener), window.addEventListener("message", (t) => {
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 n = this._widgets[i.widgetId];
138
- n && (this._loadedVersions[i.widgetId] = i.version, this._environment.executePreloadedHandlers(
139
- ((s = n.widget) == null ? void 0 : s.name) || ""
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, (((s = this._site) == null ? void 0 : s.widgets) || []).forEach(async (n) => {
160
- this.addWidgetEl(n.id);
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 !== p && (i.apiUrl = this.apiUrl), document.body.appendChild(i)), this._widgets = {
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 = A(this._site);
237
+ const t = z(this._site);
182
238
  for (const [e, i] of Object.entries(this._widgets)) {
183
239
  const s = t.find(
184
- (n) => n.id === e
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", k);
192
- const A = (r) => {
193
- const t = [];
194
- return (r.triggers || []).filter((e) => e.triggerType === "visit").forEach((e) => {
195
- const i = window.location.pathname, s = e.condition.outputs || [];
196
- e.condition.type === "url" && s.forEach((n) => {
197
- const o = n.action.type === "render_widget";
198
- if ((n.value === i || n.value === "*" || n.value === "/*") && o) {
199
- let c = { widgetId: "" };
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
- }), t;
214
- }, h = (r, t, e) => {
215
- r && e.style.setProperty(t, r);
216
- }, S = (r, t) => {
217
- var e, i, s, n, o, d, c, g, a;
218
- h((e = r.colors) == null ? void 0 : e.primaryBackground, "--primary-background", t), h(
219
- (i = r.colors) == null ? void 0 : i.textOnPrimaryBackground,
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
- ), h(
223
- (s = r.colors) == null ? void 0 : s.secondaryBackground,
266
+ ), g(
267
+ (s = n.colors) == null ? void 0 : s.secondaryBackground,
224
268
  "--secondary-background",
225
269
  t
226
- ), h(
227
- (n = r.colors) == null ? void 0 : n.textOnSecondaryBackground,
270
+ ), g(
271
+ (r = n.colors) == null ? void 0 : r.textOnSecondaryBackground,
228
272
  "--text-on-secondary-background",
229
273
  t
230
- ), h(
231
- (o = r.colors) == null ? void 0 : o.interactiveDestructiveBackground,
274
+ ), g(
275
+ (a = n.colors) == null ? void 0 : a.interactiveDestructiveBackground,
232
276
  "--destructive-color",
233
277
  t
234
- ), h(
235
- (d = r.colors) == null ? void 0 : d.interactiveTextOnDestructiveBackground,
278
+ ), g(
279
+ (o = n.colors) == null ? void 0 : o.interactiveTextOnDestructiveBackground,
236
280
  "--text-on-destructive-color",
237
281
  t
238
- ), h(
239
- (c = r.colors) == null ? void 0 : c.interactivePrimaryBackground,
282
+ ), g(
283
+ (l = n.colors) == null ? void 0 : l.interactivePrimaryBackground,
240
284
  "--interactive-primary-background",
241
285
  t
242
- ), h(
243
- (g = r.colors) == null ? void 0 : g.interactiveTextOnPrimaryBackground,
286
+ ), g(
287
+ (d = n.colors) == null ? void 0 : d.interactiveTextOnPrimaryBackground,
244
288
  "--interactive-text-on-primary-background",
245
289
  t
246
- ), h((a = r.colors) == null ? void 0 : a.focusColor, "--focus-color", t);
247
- }, z = (r = {}) => {
248
- const { content: t = "", title: e, attributes: i = [] } = r;
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 n = [
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 ${n.map((d) => `${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`;
256
- }, u = document.createElement("template");
257
- u.innerHTML = `<span
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 w = document.createElement("template");
261
- w.innerHTML = `<style>
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 m extends HTMLElement {
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(w.content.cloneNode(!0)), this.shadow.appendChild(u.content.cloneNode(!0));
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 = z({
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", m);
337
- const T = {
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 && S(this.widget.configuration.branding, this);
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 d, c, g;
570
- const t = (c = (d = this.widget) == null ? void 0 : d.configuration) == null ? void 0 : c.branding, e = (g = t == null ? void 0 : t.graphics) == null ? void 0 : g.trigger;
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 a = document.createElement("img");
573
- return a.src = e, a.classList.add("trigger-icon"), a.alt = "", a;
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 (a) => T, { type: n, content: o } = i;
579
- switch (n) {
622
+ }, s = async (c) => B, { type: r, content: a } = i;
623
+ switch (r) {
580
624
  case "Telia": {
581
- const a = await s();
582
- if (a) {
583
- const l = document.createElement("ace-icon");
584
- return l.classList.add("trigger-icon"), l.svg = a.svg, l.size = "lg", l;
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, n, o, d, c, g, a, l;
603
- if (!(((d = (o = (n = (s = this.widget) == null ? void 0 : s.configuration) == null ? void 0 : n.branding) == null ? void 0 : o.other) == null ? void 0 : d.showButtonLabel) || !1))
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 = ((l = (a = (g = (c = this.widget) == null ? void 0 : c.configuration) == null ? void 0 : g.branding) == null ? void 0 : a.other) == null ? void 0 : l.buttonLabelText) || "", i = document.createElement("button");
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, n, o;
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
- (n = t == null ? void 0 : t.querySelector(".trigger-label")) == null || n.remove(), t && e && t.prepend(e);
613
- const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("#trigger-btn");
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", m);
619
- class M {
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
- setMobileMode(t) {
633
- this.widgetEl.dispatch("set-mobile-mode", { value: t });
676
+ setFullscreenMode(t) {
677
+ this.widgetEl.dispatch("set-fullscreen-mode", { value: t });
634
678
  }
635
679
  }
636
- const $ = "https://widgets.ace.teliacompany.net", y = document.createElement("template");
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 B extends HTMLElement {
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 M(this), this.zIndex = -1, this.trigger = document.createElement("ace-trigger"), this.trigger.widgetId = this.widgetId, this.trigger.apiUrl = this.apiUrl, this.trigger.id = `ace-trigger_${this.widgetId}`, this.trigger.addEventListener("toggle", (t) => {
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 s;
778
- if (!((s = this.widget) != null && s.distributionName) || this.iframeEl)
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(([n, o]) => {
798
- e.style.setProperty(n, o);
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 == "boolean" ? this.expanded = t ? "true" : "false" : this.expanded = this.isExpanded() ? "false" : "true", this.trigger && this.trigger.setActive(this.isExpanded());
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, n;
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 = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".widget-frame-container");
825
- 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));
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", B);
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
- k as SiteComponent,
832
- B as WidgetComponent
890
+ T as SiteComponent,
891
+ W as WidgetComponent
833
892
  };
package/index.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(p,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(p=typeof globalThis<"u"?globalThis:p||self,u(p["@telia-ace/widget-site"]={}))})(this,function(p){"use strict";class u{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(e,i){window.ace._w.push([e,i])},configure:function(e){window.ace._c.push(e)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([e,i])=>{this.widget(e,i)}),((t==null?void 0:t._c)||[]).forEach(e=>{this.configure(e)})}executePreloadedHandlers(t){(this._widgetAPIHandlers.get(t)||[]).forEach(i=>{i()}),this._widgetAPIHandlers.set(t,[])}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}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(o=>{var d;return((d=o.widget)==null?void 0:d.name)===t});e(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}e(i.api)}}const I="1.1.82-rc.8";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=I;return{widgets:this._site.getWidgetsVersions(),sites:t}}}const w="https://widgets.ace.teliacompany.net",A="https://embed.webprovisions.io",S=()=>{if(typeof window<"u"){const r=history.pushState,t=history.replaceState;history.pushState=function(...e){r.apply(history,e),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...e){t.apply(history,e),window.dispatchEvent(new Event("locationchange"))}}};class m extends HTMLElement{constructor(){var t;super(),this._site=null,this._widgets={},this._loadedVersions={},this._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new k(this),this._environment=new u(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||w}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||A}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){S(),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)||""))}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,e,i){this.render()}async _loadSite(){var s;const e=await(await fetch(`${this.apiUrl}/api/site/${this.siteId}`)).json(),i=location.hostname;if(!((e==null?void 0:e.hosts)||[]).includes(i)){console.warn(`the host "${i}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=e,(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.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!==w&&(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=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",m);const T=r=>{const t=[];return(r.triggers||[]).filter(e=>e.triggerType==="visit").forEach(e=>{const i=window.location.pathname,s=e.condition.outputs||[];e.condition.type==="url"&&s.forEach(n=>{const o=n.action.type==="render_widget";if((n.value===i||n.value==="*"||n.value==="/*")&&o){let c={widgetId:""};try{c=JSON.parse(n.action.data)}catch{c={widgetId:""}}const g=t.findIndex(l=>l.id===c.widgetId)>-1,a=((r==null?void 0:r.widgets)||[]).find(l=>l.id===c.widgetId);a&&!g&&t.push(a)}})}),t},h=(r,t,e)=>{r&&e.style.setProperty(t,r)},z=(r,t)=>{var e,i,s,n,o,d,c,g,a;h((e=r.colors)==null?void 0:e.primaryBackground,"--primary-background",t),h((i=r.colors)==null?void 0:i.textOnPrimaryBackground,"--text-on-primary-background",t),h((s=r.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),h((n=r.colors)==null?void 0:n.textOnSecondaryBackground,"--text-on-secondary-background",t),h((o=r.colors)==null?void 0:o.interactiveDestructiveBackground,"--destructive-color",t),h((d=r.colors)==null?void 0:d.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),h((c=r.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),h((g=r.colors)==null?void 0:g.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),h((a=r.colors)==null?void 0:a.focusColor,"--focus-color",t)},M=(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(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},f=document.createElement("template");f.innerHTML=`<span
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=M({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 $={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>
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&&z(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 d,c,g;const t=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding,e=(g=t==null?void 0:t.graphics)==null?void 0:g.trigger;if(e){const a=document.createElement("img");return a.src=e,a.classList.add("trigger-icon"),a.alt="",a}const i={type:"Telia",content:"question"},s=async a=>$,{type:n,content:o}=i;switch(n){case"Telia":{const a=await s();if(a){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=a.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("hidden")}show(){this.classList.remove("hidden")}_renderButtonLabel(){var s,n,o,d,c,g,a,l;if(!(((d=(o=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:o.other)==null?void 0:d.showButtonLabel)||!1))return null;const e=((l=(a=(g=(c=this.widget)==null?void 0:c.configuration)==null?void 0:g.branding)==null?void 0:a.other)==null?void 0:l.buttonLabelText)||"",i=document.createElement("button");return i.setAttribute("label",e),i.classList.add("trigger-label"),i.addEventListener("click",this._onClicked),i.innerHTML=e,i}render(){var s,n,o;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=(o=this.shadowRoot)==null?void 0:o.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 B{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}setZIndex(t){this.widgetEl.setZIndex(t)}setMobileMode(t){this.widgetEl.dispatch("set-mobile-mode",{value:t})}}const U="https://widgets.ace.teliacompany.net",E=document.createElement("template");E.innerHTML=`<style>
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"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telia-ace/widget-site",
3
- "version": "1.1.82-rc.8",
3
+ "version": "1.1.82",
4
4
  "dependencies": {},
5
5
  "main": "./index.js",
6
6
  "module": "./index.mjs",