@telia-ace/widget-site 1.1.147-rc.1 → 1.1.147-rc.3
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 +13 -4
- package/index.mjs +151 -137
- package/index.umd.js +13 -4
- package/package.json +1 -1
- package/widget.component.d.ts +1 -0
package/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class T{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(e
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class T{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t,i){const e=i?[t,i]:[t];e.flatMap(r=>this._widgetAPIHandlers.get(r)||[]).forEach(r=>{r()}),e.forEach(r=>this._widgetAPIHandlers.set(r,[]))}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var r;return((r=s.widget)==null?void 0:r.name)===t||s.widgetId===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const r=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t||a.widgetId===t});i(r==null?void 0:r.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const z="1.1.147-rc.3";class ${constructor(t){this._site=t}async activate(t,i){let e=this._site._widgets[t];if(e||(this._site.addWidgetEl(t),e=this._site._widgets[t]),!e){console.warn(`[ACE] Widget "${t}" not found`);return}e.manuallyActivated=!0,i!=null&&i.onClose&&(e._onCloseCallback=i.onClose),i!=null&&i.hideTrigger&&e.setTriggerVisible(!1),e.isActivated()||await e.activate()}storagePolicy(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("disallow-storage-key",{storageKey:t})})}getWidgets(){return this._site._widgets}version(){const t=z;return{widgets:this._site.getWidgetsVersions(),sites:t}}}class M{constructor(t,i){this.triggerType=t,this.condition=i,this.triggerType=t,this.condition=i}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const i=[];return this.condition.outputs.filter(e=>e.action.type==="render_widget"&&W(e.value,t)).forEach(e=>{let s={widgetId:""};try{s=JSON.parse(e.action.data)}catch{s={widgetId:""}}i.push(s.widgetId)}),i}}const W=(n,t)=>{if(n==="*"||n==="/*"||n===t)return!0;if(n.endsWith("/*")){const s=n.slice(0,-2);return t===s||t.startsWith(s+"/")}return!1},U=(n,t)=>{const i=s=>`ace_${n.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[r,a])=>{const[d,c]=r.split("-");if(i(c)!=r)return s;try{const o=JSON.parse(a);s[c]=o.value}catch{return s}return s},{})},u="https://widgets.ace.teliacompany.net/v1",B="https://embed.webprovisions.io",H=()=>{if(typeof window<"u"){const n=history.pushState,t=history.replaceState;history.pushState=function(...i){n.apply(history,i),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...i){t.apply(history,i),window.dispatchEvent(new Event("locationchange"))}}};class y extends HTMLElement{constructor(){var t;super(),this._site=null,this._widgets={},this._loadedVersions={},this._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new $(this),this._environment=new T(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||u}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||B}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){H(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s,r;const{type:i,data:e}=t.data;if(i==="widget-minimize")this._widgets[e.widgetId].toggleExpand();else if(i==="widget-maximize")(s=this._widgets[e.widgetId])==null||s.setMaximized(e.value);else if(i==="widget-activated"){this._widgets[e.widgetId].executeMessageQueue();const a=this._widgets[e.widgetId];a&&(this._loadedVersions[e.widgetId]=e.version,this._environment.executePreloadedHandlers(((r=a.widget)==null?void 0:r.name)||"",e.widgetId));try{const d=JSON.parse(e.storage),c=U(e.widgetId,d);typeof c.open=="boolean"&&(a.disableAnimations(),a.toggleExpand(c.open),setTimeout(()=>{a.enableAnimations()},600))}catch{console.warn("unable to parse widget storage")}}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,i,e){this.render()}async _loadSite(){var s;const i=await(await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(),e=location.hostname;if(!((i==null?void 0:i.hosts)||[]).includes(e)){console.warn(`the host "${e}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=i,this._site&&(this._site.triggers=this._site.triggers.map(r=>new M(r.triggerType,r.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async r=>{this.addWidgetEl(r.id)})}addWidgetEl(t){const i=`ace-widget_${t}`;let e=document.getElementById(i);e||(e=document.createElement("ace-widget"),e.id=i,e.widgetId=t,this.apiUrl!==u&&(e.apiUrl=this.apiUrl),document.body.appendChild(e)),this._widgets={...this._widgets,[t]:e}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=O(this._site);for(const[i,e]of Object.entries(this._widgets)){if(e.manuallyActivated)continue;const s=t.find(r=>r.id===i);s&&!e.isActivated()?e.activate():!s&&e.isActivated()&&e.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",y);const O=n=>{const t=window.location.pathname;return n.triggers.reduce((e,s)=>(s.shouldActivate(t).forEach(a=>{const d=e.find(o=>o.id===a),c=((n==null?void 0:n.widgets)||[]).find(o=>o.id===a);!d&&c&&e.push({id:a})}),e),[])},g=(n,t,i)=>{n&&i.style.setProperty(t,n)},P=(n,t)=>{var i,e,s,r,a,d,c,o,l;g((i=n.colors)==null?void 0:i.primaryBackground,"--primary-background",t),g((e=n.colors)==null?void 0:e.textOnPrimaryBackground,"--text-on-primary-background",t),g((s=n.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),g((r=n.colors)==null?void 0:r.textOnSecondaryBackground,"--text-on-secondary-background",t),g((a=n.colors)==null?void 0:a.interactiveDestructiveBackground,"--destructive-color",t),g((d=n.colors)==null?void 0:d.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),g((c=n.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),g((o=n.colors)==null?void 0:o.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),g((l=n.colors)==null?void 0:l.focusColor,"--focus-color",t)},V=(n={})=>{const{content:t="",title:i,attributes:e=[]}=n;let s="";const r=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...e];return i&&(s=`<title>${i}</title>`),`<svg ${r.map(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},_=document.createElement("template");_.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
3
|
></span>`;const x=document.createElement("template");var f;const p=(f=document.querySelector("script[nonce]"))==null?void 0:f.getAttribute("nonce");x.innerHTML=`<style ${p?`nonce="${p}"`:""}>
|
|
4
4
|
:host {
|
|
@@ -34,7 +34,7 @@ svg {
|
|
|
34
34
|
min-width: var(--size-lg);
|
|
35
35
|
width: var(--size-lg);
|
|
36
36
|
}
|
|
37
|
-
</style>`;class E extends HTMLElement{get svg(){return this.getAttribute("svg")||""}set svg(t){this.setAttribute("svg",t)}get size(){return this.getAttribute("size")||""}set size(t){this.setAttribute("size",t),this.classList.remove("ace-icon--sm","ace-icon--md","ace--icon-lg"),this.classList.add(`ace-icon--${t}`)}static get observedAttributes(){return["svg","size"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(x.content.cloneNode(!0)),this.shadow.appendChild(_.content.cloneNode(!0))}attributeChangedCallback(t,e
|
|
37
|
+
</style>`;class E extends HTMLElement{get svg(){return this.getAttribute("svg")||""}set svg(t){this.setAttribute("svg",t)}get size(){return this.getAttribute("size")||""}set size(t){this.setAttribute("size",t),this.classList.remove("ace-icon--sm","ace-icon--md","ace--icon-lg"),this.classList.add(`ace-icon--${t}`)}static get observedAttributes(){return["svg","size"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(x.content.cloneNode(!0)),this.shadow.appendChild(_.content.cloneNode(!0))}attributeChangedCallback(t,i,e){this.render()}render(){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".ace-icon__container");if(t){const e=V({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=e}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",E);const j={name:"question",svg:'<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C59.9827 16.5432 47.4568 4.01731 32 4ZM32 55.6923C18.9151 55.6923 8.30769 45.0849 8.30769 32C8.30769 18.9151 18.9151 8.30769 32 8.30769C45.0849 8.30769 55.6923 18.9151 55.6923 32C55.6775 45.0788 45.0788 55.6775 32 55.6923Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.9423 37.5723L36.311 32.9068L36.7354 32.4448C39.7555 29.1161 40.7645 27.0647 40.7645 24.5087C40.7645 23.1091 40.4251 21.7942 39.7041 20.6491C38.3044 18.3587 35.6323 16.9166 32.2816 16.9166C28.7565 16.9166 25.3125 18.7414 23.2581 21.6772L23.1201 21.8791C22.8232 22.3032 22.696 22.6849 22.696 22.9818C22.696 23.7029 23.926 25.9932 25.2833 25.9932C25.5378 25.9932 25.7922 25.9084 26.0467 25.7388C26.2588 25.5691 26.5981 25.2298 27.0647 24.7208C28.8885 22.6849 30.1185 21.9215 31.7726 21.9215C33.6813 21.9215 35.081 23.1939 35.081 24.8905C35.081 26.375 34.2751 27.7746 32.3664 29.8529L28.2523 34.2216C27.9554 34.6033 27.7857 34.9426 27.7857 35.282C27.7857 35.6213 27.9978 36.1726 28.4219 36.8937C29.0581 37.8692 29.7368 38.3782 30.4578 38.3782C30.9244 38.3782 31.3909 38.1237 31.9423 37.5723ZM30.882 47.4972C29.2278 47.4972 27.6585 44.7403 27.6585 43.6799C27.6585 42.1954 30.0761 40.6261 32.4089 40.6261C33.6389 40.6261 34.2751 41.1775 34.2751 42.3227C34.2751 44.0616 33.4692 45.843 32.4513 46.7761C31.9423 47.2427 31.4334 47.4972 30.882 47.4972Z"/></svg>'},C=document.createElement("template");var b;const m=(b=document.querySelector("script[nonce]"))==null?void 0:b.getAttribute("nonce");C.innerHTML=`<style ${m?`nonce="${m}"`:""}>
|
|
38
38
|
:host {
|
|
39
39
|
position: fixed;
|
|
40
40
|
display: flex;
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class k extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(C.content.cloneNode(!0)),this.shadow.appendChild(A.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,e
|
|
212
|
+
</div>`;class k extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(C.content.cloneNode(!0)),this.shadow.appendChild(A.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&P(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,i=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(i){const o=document.createElement("img");return o.src=i,o.classList.add("trigger-icon"),o.alt="",o}const e={type:"Telia"},s=async o=>j,{type:r}=e;switch(r){case"Telia":{const o=await s();if(o){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=o.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("ace-hidden"),this.style.display="none"}show(){this.classList.remove("ace-hidden"),this.style.display=""}_renderButtonLabel(){var s,r,a,d,c,o,l,h;if(!(((d=(a=(r=(s=this.widget)==null?void 0:s.configuration)==null?void 0:r.branding)==null?void 0:a.other)==null?void 0:d.showButtonLabel)||!1))return null;const i=((h=(l=(o=(c=this.widget)==null?void 0:c.configuration)==null?void 0:o.branding)==null?void 0:l.other)==null?void 0:h.buttonLabelText)||"Widget trigger",e=document.createElement("button");return e.setAttribute("type","button"),e.setAttribute("aria-label",i),e.classList.add("trigger-label"),e.addEventListener("click",this._onClicked),e.innerHTML=i,e}render(){var s,r,a,d,c,o,l;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),i=this._renderButtonLabel();(r=t==null?void 0:t.querySelector(".trigger-label"))==null||r.remove(),t&&i&&t.prepend(i);const e=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");if(e){const h=((l=(o=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding)==null?void 0:o.other)==null?void 0:l.buttonLabelText)||"Widget trigger";e.classList.toggle("active",this.active),e.classList.toggle("rendered",this.loaded),e.addEventListener("click",this._onClicked),e.setAttribute("type","button"),e.setAttribute("aria-label",h),this.icon&&e.prepend(this.icon)}}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",k);window.customElements.get("ace-icon")||window.customElements.define("ace-icon",E);class N{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}onClose(t){this.widgetEl._onCloseCallback=t}setZIndex(t){this.widgetEl.setZIndex(t)}setFullscreenMode(t){this.widgetEl.dispatch("set-fullscreen-mode",{value:t})}}const R="https://widgets.ace.teliacompany.net/v1",L=document.createElement("template");var v;const w=(v=document.querySelector("script[nonce]"))==null?void 0:v.getAttribute("nonce");L.innerHTML=`<style ${w?`nonce="${w}"`:""}>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -273,6 +273,15 @@ svg {
|
|
|
273
273
|
}
|
|
274
274
|
}
|
|
275
275
|
|
|
276
|
+
@media screen and (min-width: 801px) {
|
|
277
|
+
:host(.ace-maximized) .widget-frame-container {
|
|
278
|
+
width: calc(100vw - 40px);
|
|
279
|
+
height: calc(100vh - 40px);
|
|
280
|
+
max-height: none;
|
|
281
|
+
inset: 20px;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
276
285
|
:host(.ace-expanded) .widget-frame-container {
|
|
277
286
|
opacity: 1;
|
|
278
287
|
animation: slideUp 0.3s linear;
|
|
@@ -283,4 +292,4 @@ svg {
|
|
|
283
292
|
animation: slideDown 0.3s linear;
|
|
284
293
|
display: none;
|
|
285
294
|
}
|
|
286
|
-
</style>`;const S=document.createElement("template");S.innerHTML='<div class="widget-frame-container"></div>';class I extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.manuallyActivated=!1,this.triggerHidden=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this._onCloseCallback=null,this.api=new N(this),this.zIndex=-1,this.trigger=document.createElement("ace-trigger"),this.trigger.widgetId=this.widgetId,this.trigger.apiUrl=this.apiUrl,this.trigger.id=`ace-trigger_${this.widgetId}`,this.trigger.addEventListener("toggle",t=>{this.toggleExpand()}),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(L.content.cloneNode(!0)),this.shadow.appendChild(S.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("ace-hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||R}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,e
|
|
295
|
+
</style>`;const S=document.createElement("template");S.innerHTML='<div class="widget-frame-container"></div>';class I extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.manuallyActivated=!1,this.triggerHidden=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this._onCloseCallback=null,this.api=new N(this),this.zIndex=-1,this.trigger=document.createElement("ace-trigger"),this.trigger.widgetId=this.widgetId,this.trigger.apiUrl=this.apiUrl,this.trigger.id=`ace-trigger_${this.widgetId}`,this.trigger.addEventListener("toggle",t=>{this.toggleExpand()}),this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(L.content.cloneNode(!0)),this.shadow.appendChild(S.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("ace-hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||R}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,i,e){this.render()}async connectedCallback(){var t;this.widget=await this._loadWidget(this.widgetId),console.log("[ACE] allowedOrigins:",(t=this.widget)==null?void 0:t.allowedOrigins),window.addEventListener("message",i=>{var e,s;this.iframeEl&&!this._isAllowedOrigin(i.origin)||((e=i.data)==null?void 0:e.type)==="widget-set-active"&&typeof((s=i.data.data)==null?void 0:s.active)=="boolean"&&(this.active=i.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")}_isAllowedOrigin(t){var s;const i=new URL(this.apiUrl).origin;if(t===i)return!0;const e=(s=this.widget)==null?void 0:s.allowedOrigins;return!e||e.length===0?!1:e.some(r=>t===`https://${r}`)}_getContainerEl(){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(".widget-frame-container"))||null}async activate(){var i;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((i=window.ace)==null?void 0:i.applications)||[]).find(e=>e.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/widget/${t}`)).json()}dispatch(t,i={}){var s;const e={type:t,data:i};if(i.widgetId||(i.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(e);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(e,"*")}async deactivate(){this.activated=!1,this.manuallyActivated=!1,this.render()}setTriggerVisible(t){this.triggerHidden=!t,this.trigger&&(t?this.trigger.show():this.trigger.hide())}_createIFrame(){var s;if(!((s=this.widget)!=null&&s.distributionName)||this.iframeEl||!this.widget.linked)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},i=document.createElement("iframe");Object.entries(t).forEach(([r,a])=>{i.style.setProperty(r,a)});const e=this.apiUrl.replace("/v1","").replace("/api","");i.src=`${e}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,i.title=this.getIFrameTitle(),i.setAttribute("allow","camera; microphone; display-capture; autoplay"),this.iframeEl=i}getIFrameTitle(){var i,e;let t=(i=this.widget)==null?void 0:i.configuration;if(typeof t=="string")try{t=JSON.parse(t)}catch{t={}}return((e=t==null?void 0:t.texts)==null?void 0:e["iframe.title"])||"ACE Widget"}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){const i=this.isExpanded();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()),i&&!this.isExpanded()&&this._onCloseCallback&&this._onCloseCallback()}setZIndex(t){this.zIndex=t,this.render()}setMaximized(t){this.classList.toggle("ace-maximized",t),this.dispatch("set-maximized-mode",{value:t})}render(){var e,s;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("ace-expanded"),this.classList.remove("ace-hidden")):this.classList.remove("ace-expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const i=this._getContainerEl();i&&i.childNodes.length===0&&i.appendChild(this.iframeEl),i&&this.zIndex!==-1&&(i.style.zIndex=this.zIndex.toString()),this.trigger&&((e=this.shadowRoot)==null?void 0:e.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.insertBefore(this.trigger,this.shadowRoot.firstChild)),this.trigger&&this.triggerHidden&&this.trigger.hide()}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",I);window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",k);exports.SiteComponent=y;exports.WidgetComponent=I;
|
package/index.mjs
CHANGED
|
@@ -3,11 +3,11 @@ class S {
|
|
|
3
3
|
this._api = t, this._bootstrapped = !1, this._widgetAPIHandlers = /* @__PURE__ */ new Map(), window.ace = window.ace || {
|
|
4
4
|
_c: [],
|
|
5
5
|
_w: [],
|
|
6
|
-
widget: function(
|
|
7
|
-
window.ace._w.push([
|
|
6
|
+
widget: function(i, e) {
|
|
7
|
+
window.ace._w.push([i, e]);
|
|
8
8
|
},
|
|
9
|
-
configure: function(
|
|
10
|
-
window.ace._c.push(
|
|
9
|
+
configure: function(i) {
|
|
10
|
+
window.ace._c.push(i);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
}
|
|
@@ -16,19 +16,19 @@ class S {
|
|
|
16
16
|
}
|
|
17
17
|
_bootstrap() {
|
|
18
18
|
const t = globalThis.ace;
|
|
19
|
-
globalThis.ace = this, this._bootstrapped = !0, ((t == null ? void 0 : t._w) || []).forEach(([
|
|
20
|
-
this.widget(
|
|
21
|
-
}), ((t == null ? void 0 : t._c) || []).forEach((
|
|
22
|
-
this.configure(
|
|
19
|
+
globalThis.ace = this, this._bootstrapped = !0, ((t == null ? void 0 : t._w) || []).forEach(([i, e]) => {
|
|
20
|
+
this.widget(i, e);
|
|
21
|
+
}), ((t == null ? void 0 : t._c) || []).forEach((i) => {
|
|
22
|
+
this.configure(i);
|
|
23
23
|
});
|
|
24
24
|
}
|
|
25
|
-
executePreloadedHandlers(t,
|
|
26
|
-
const
|
|
27
|
-
|
|
25
|
+
executePreloadedHandlers(t, i) {
|
|
26
|
+
const e = i ? [t, i] : [t];
|
|
27
|
+
e.flatMap(
|
|
28
28
|
(r) => this._widgetAPIHandlers.get(r) || []
|
|
29
29
|
).forEach((r) => {
|
|
30
30
|
r();
|
|
31
|
-
}),
|
|
31
|
+
}), e.forEach((r) => this._widgetAPIHandlers.set(r, []));
|
|
32
32
|
}
|
|
33
33
|
configure(t) {
|
|
34
34
|
if (!this._bootstrapped)
|
|
@@ -38,14 +38,14 @@ class S {
|
|
|
38
38
|
version() {
|
|
39
39
|
return this._api.version();
|
|
40
40
|
}
|
|
41
|
-
widget(t,
|
|
42
|
-
const
|
|
41
|
+
widget(t, i) {
|
|
42
|
+
const e = Object.values(this._api.getWidgets()).find(
|
|
43
43
|
(s) => {
|
|
44
44
|
var r;
|
|
45
45
|
return ((r = s.widget) == null ? void 0 : r.name) === t || s.widgetId === t;
|
|
46
46
|
}
|
|
47
47
|
);
|
|
48
|
-
if (!
|
|
48
|
+
if (!e) {
|
|
49
49
|
const s = this._widgetAPIHandlers.get(t) || [];
|
|
50
50
|
s.push(() => {
|
|
51
51
|
const r = Object.values(this._api.getWidgets()).find(
|
|
@@ -54,36 +54,36 @@ class S {
|
|
|
54
54
|
return ((d = a.widget) == null ? void 0 : d.name) === t || a.widgetId === t;
|
|
55
55
|
}
|
|
56
56
|
);
|
|
57
|
-
|
|
57
|
+
i(r == null ? void 0 : r.api);
|
|
58
58
|
}), this._widgetAPIHandlers.set(t, s);
|
|
59
59
|
return;
|
|
60
60
|
}
|
|
61
|
-
e
|
|
61
|
+
i(e.api);
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
-
const I = "1.1.147-rc.
|
|
64
|
+
const I = "1.1.147-rc.3";
|
|
65
65
|
class T {
|
|
66
66
|
constructor(t) {
|
|
67
67
|
this._site = t;
|
|
68
68
|
}
|
|
69
|
-
async activate(t,
|
|
70
|
-
let
|
|
71
|
-
if (
|
|
69
|
+
async activate(t, i) {
|
|
70
|
+
let e = this._site._widgets[t];
|
|
71
|
+
if (e || (this._site.addWidgetEl(t), e = this._site._widgets[t]), !e) {
|
|
72
72
|
console.warn(`[ACE] Widget "${t}" not found`);
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
|
-
|
|
75
|
+
e.manuallyActivated = !0, i != null && i.onClose && (e._onCloseCallback = i.onClose), i != null && i.hideTrigger && e.setTriggerVisible(!1), e.isActivated() || await e.activate();
|
|
76
76
|
}
|
|
77
77
|
storagePolicy(t) {
|
|
78
|
-
Object.entries(this._site._widgets).forEach(([
|
|
79
|
-
|
|
78
|
+
Object.entries(this._site._widgets).forEach(([i, e]) => {
|
|
79
|
+
e.dispatch("set-storage-policies", {
|
|
80
80
|
policies: t
|
|
81
81
|
});
|
|
82
82
|
});
|
|
83
83
|
}
|
|
84
84
|
disallowStorageKey(t) {
|
|
85
|
-
Object.entries(this._site._widgets).forEach(([
|
|
86
|
-
|
|
85
|
+
Object.entries(this._site._widgets).forEach(([i, e]) => {
|
|
86
|
+
e.dispatch("disallow-storage-key", {
|
|
87
87
|
storageKey: t
|
|
88
88
|
});
|
|
89
89
|
});
|
|
@@ -99,28 +99,28 @@ class T {
|
|
|
99
99
|
};
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
class
|
|
103
|
-
constructor(t,
|
|
104
|
-
this.triggerType = t, this.condition =
|
|
102
|
+
class z {
|
|
103
|
+
constructor(t, i) {
|
|
104
|
+
this.triggerType = t, this.condition = i, this.triggerType = t, this.condition = i;
|
|
105
105
|
}
|
|
106
106
|
shouldActivate(t) {
|
|
107
107
|
if (this.triggerType !== "visit" || this.condition.type !== "url")
|
|
108
108
|
return [];
|
|
109
|
-
const
|
|
110
|
-
return this.condition.outputs.filter((
|
|
109
|
+
const i = [];
|
|
110
|
+
return this.condition.outputs.filter((e) => e.action.type === "render_widget" && $(e.value, t)).forEach((e) => {
|
|
111
111
|
let s = { widgetId: "" };
|
|
112
112
|
try {
|
|
113
|
-
s = JSON.parse(
|
|
113
|
+
s = JSON.parse(e.action.data);
|
|
114
114
|
} catch {
|
|
115
115
|
s = {
|
|
116
116
|
widgetId: ""
|
|
117
117
|
};
|
|
118
118
|
}
|
|
119
|
-
|
|
120
|
-
}),
|
|
119
|
+
i.push(s.widgetId);
|
|
120
|
+
}), i;
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
|
-
const
|
|
123
|
+
const $ = (n, t) => {
|
|
124
124
|
if (n === "*" || n === "/*" || n === t)
|
|
125
125
|
return !0;
|
|
126
126
|
if (n.endsWith("/*")) {
|
|
@@ -129,11 +129,11 @@ const z = (n, t) => {
|
|
|
129
129
|
}
|
|
130
130
|
return !1;
|
|
131
131
|
}, M = (n, t) => {
|
|
132
|
-
const
|
|
132
|
+
const i = (s) => `ace_${n.substring(0, 7)}-${s}`;
|
|
133
133
|
return Object.entries(t).reduce(
|
|
134
134
|
(s, [r, a]) => {
|
|
135
135
|
const [d, c] = r.split("-");
|
|
136
|
-
if (
|
|
136
|
+
if (i(c) != r)
|
|
137
137
|
return s;
|
|
138
138
|
try {
|
|
139
139
|
const o = JSON.parse(a);
|
|
@@ -148,10 +148,10 @@ const z = (n, t) => {
|
|
|
148
148
|
}, u = "https://widgets.ace.teliacompany.net/v1", U = "https://embed.webprovisions.io", W = () => {
|
|
149
149
|
if (typeof window < "u") {
|
|
150
150
|
const n = history.pushState, t = history.replaceState;
|
|
151
|
-
history.pushState = function(...
|
|
152
|
-
n.apply(history,
|
|
153
|
-
}, history.replaceState = function(...
|
|
154
|
-
t.apply(history,
|
|
151
|
+
history.pushState = function(...i) {
|
|
152
|
+
n.apply(history, i), window.dispatchEvent(new Event("locationchange"));
|
|
153
|
+
}, history.replaceState = function(...i) {
|
|
154
|
+
t.apply(history, i), window.dispatchEvent(new Event("locationchange"));
|
|
155
155
|
};
|
|
156
156
|
}
|
|
157
157
|
};
|
|
@@ -185,21 +185,23 @@ class B extends HTMLElement {
|
|
|
185
185
|
}
|
|
186
186
|
async connectedCallback() {
|
|
187
187
|
W(), await this._loadSite(), this.render(), this._environment.bootstrap(), window.addEventListener("locationchange", this.routeChangeListener), window.addEventListener("message", (t) => {
|
|
188
|
-
var s;
|
|
189
|
-
const { type:
|
|
190
|
-
if (
|
|
191
|
-
this._widgets[
|
|
192
|
-
else if (
|
|
193
|
-
this._widgets[
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
188
|
+
var s, r;
|
|
189
|
+
const { type: i, data: e } = t.data;
|
|
190
|
+
if (i === "widget-minimize")
|
|
191
|
+
this._widgets[e.widgetId].toggleExpand();
|
|
192
|
+
else if (i === "widget-maximize")
|
|
193
|
+
(s = this._widgets[e.widgetId]) == null || s.setMaximized(e.value);
|
|
194
|
+
else if (i === "widget-activated") {
|
|
195
|
+
this._widgets[e.widgetId].executeMessageQueue();
|
|
196
|
+
const a = this._widgets[e.widgetId];
|
|
197
|
+
a && (this._loadedVersions[e.widgetId] = e.version, this._environment.executePreloadedHandlers(
|
|
198
|
+
((r = a.widget) == null ? void 0 : r.name) || "",
|
|
199
|
+
e.widgetId
|
|
198
200
|
));
|
|
199
201
|
try {
|
|
200
|
-
const
|
|
201
|
-
typeof
|
|
202
|
-
|
|
202
|
+
const d = JSON.parse(e.storage), c = M(e.widgetId, d);
|
|
203
|
+
typeof c.open == "boolean" && (a.disableAnimations(), a.toggleExpand(c.open), setTimeout(() => {
|
|
204
|
+
a.enableAnimations();
|
|
203
205
|
}, 600));
|
|
204
206
|
} catch {
|
|
205
207
|
console.warn("unable to parse widget storage");
|
|
@@ -210,32 +212,32 @@ class B extends HTMLElement {
|
|
|
210
212
|
disconnectedCallback() {
|
|
211
213
|
window.removeEventListener("locationchange", this.routeChangeListener);
|
|
212
214
|
}
|
|
213
|
-
attributeChangedCallback(t,
|
|
215
|
+
attributeChangedCallback(t, i, e) {
|
|
214
216
|
this.render();
|
|
215
217
|
}
|
|
216
218
|
async _loadSite() {
|
|
217
219
|
var s;
|
|
218
|
-
const
|
|
219
|
-
if (!((
|
|
220
|
+
const i = await (await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(), e = location.hostname;
|
|
221
|
+
if (!((i == null ? void 0 : i.hosts) || []).includes(e)) {
|
|
220
222
|
console.warn(
|
|
221
|
-
`the host "${
|
|
223
|
+
`the host "${e}" needs to be configured as an allowed host in order to install widgets.`
|
|
222
224
|
);
|
|
223
225
|
return;
|
|
224
226
|
}
|
|
225
|
-
this._site =
|
|
226
|
-
(r) => new
|
|
227
|
+
this._site = i, this._site && (this._site.triggers = this._site.triggers.map(
|
|
228
|
+
(r) => new z(r.triggerType, r.condition)
|
|
227
229
|
)), (((s = this._site) == null ? void 0 : s.widgets) || []).forEach(async (r) => {
|
|
228
230
|
this.addWidgetEl(r.id);
|
|
229
231
|
});
|
|
230
232
|
}
|
|
231
233
|
addWidgetEl(t) {
|
|
232
|
-
const
|
|
233
|
-
let
|
|
234
|
-
|
|
234
|
+
const i = `ace-widget_${t}`;
|
|
235
|
+
let e = document.getElementById(
|
|
236
|
+
i
|
|
235
237
|
);
|
|
236
|
-
|
|
238
|
+
e || (e = document.createElement("ace-widget"), e.id = i, e.widgetId = t, this.apiUrl !== u && (e.apiUrl = this.apiUrl), document.body.appendChild(e)), this._widgets = {
|
|
237
239
|
...this._widgets,
|
|
238
|
-
[t]:
|
|
240
|
+
[t]: e
|
|
239
241
|
};
|
|
240
242
|
}
|
|
241
243
|
getWidgetsVersions() {
|
|
@@ -247,13 +249,13 @@ class B extends HTMLElement {
|
|
|
247
249
|
return;
|
|
248
250
|
}
|
|
249
251
|
const t = H(this._site);
|
|
250
|
-
for (const [
|
|
251
|
-
if (
|
|
252
|
+
for (const [i, e] of Object.entries(this._widgets)) {
|
|
253
|
+
if (e.manuallyActivated)
|
|
252
254
|
continue;
|
|
253
255
|
const s = t.find(
|
|
254
|
-
(r) => r.id ===
|
|
256
|
+
(r) => r.id === i
|
|
255
257
|
);
|
|
256
|
-
s && !
|
|
258
|
+
s && !e.isActivated() ? e.activate() : !s && e.isActivated() && e.deactivate();
|
|
257
259
|
}
|
|
258
260
|
this.shadow.innerHTML = "";
|
|
259
261
|
}
|
|
@@ -261,20 +263,20 @@ class B extends HTMLElement {
|
|
|
261
263
|
window.customElements.get("ace-site") || window.customElements.define("ace-site", B);
|
|
262
264
|
const H = (n) => {
|
|
263
265
|
const t = window.location.pathname;
|
|
264
|
-
return n.triggers.reduce((
|
|
265
|
-
const d =
|
|
266
|
+
return n.triggers.reduce((e, s) => (s.shouldActivate(t).forEach((a) => {
|
|
267
|
+
const d = e.find((o) => o.id === a), c = ((n == null ? void 0 : n.widgets) || []).find(
|
|
266
268
|
(o) => o.id === a
|
|
267
269
|
);
|
|
268
|
-
!d && c &&
|
|
270
|
+
!d && c && e.push({
|
|
269
271
|
id: a
|
|
270
272
|
});
|
|
271
|
-
}),
|
|
272
|
-
}, g = (n, t,
|
|
273
|
-
n &&
|
|
273
|
+
}), e), []);
|
|
274
|
+
}, g = (n, t, i) => {
|
|
275
|
+
n && i.style.setProperty(t, n);
|
|
274
276
|
}, O = (n, t) => {
|
|
275
|
-
var
|
|
276
|
-
g((
|
|
277
|
-
(
|
|
277
|
+
var i, e, s, r, a, d, c, o, l;
|
|
278
|
+
g((i = n.colors) == null ? void 0 : i.primaryBackground, "--primary-background", t), g(
|
|
279
|
+
(e = n.colors) == null ? void 0 : e.textOnPrimaryBackground,
|
|
278
280
|
"--text-on-primary-background",
|
|
279
281
|
t
|
|
280
282
|
), g(
|
|
@@ -303,14 +305,14 @@ const H = (n) => {
|
|
|
303
305
|
t
|
|
304
306
|
), g((l = n.colors) == null ? void 0 : l.focusColor, "--focus-color", t);
|
|
305
307
|
}, P = (n = {}) => {
|
|
306
|
-
const { content: t = "", title:
|
|
308
|
+
const { content: t = "", title: i, attributes: e = [] } = n;
|
|
307
309
|
let s = "";
|
|
308
310
|
const r = [
|
|
309
311
|
{ name: "xmlns", value: "http://www.w3.org/2000/svg" },
|
|
310
312
|
{ name: "fill", value: "currentColor" },
|
|
311
|
-
...
|
|
313
|
+
...e
|
|
312
314
|
];
|
|
313
|
-
return
|
|
315
|
+
return i && (s = `<title>${i}</title>`), `<svg ${r.map((d) => `${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`;
|
|
314
316
|
}, y = document.createElement("template");
|
|
315
317
|
y.innerHTML = `<span
|
|
316
318
|
class="ace-icon__container"
|
|
@@ -372,14 +374,14 @@ class x extends HTMLElement {
|
|
|
372
374
|
constructor() {
|
|
373
375
|
super(), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.appendChild(_.content.cloneNode(!0)), this.shadow.appendChild(y.content.cloneNode(!0));
|
|
374
376
|
}
|
|
375
|
-
attributeChangedCallback(t,
|
|
377
|
+
attributeChangedCallback(t, i, e) {
|
|
376
378
|
this.render();
|
|
377
379
|
}
|
|
378
380
|
render() {
|
|
379
|
-
var
|
|
380
|
-
const t = (
|
|
381
|
+
var i;
|
|
382
|
+
const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".ace-icon__container");
|
|
381
383
|
if (t) {
|
|
382
|
-
const
|
|
384
|
+
const e = P({
|
|
383
385
|
content: this.svg,
|
|
384
386
|
attributes: [
|
|
385
387
|
{
|
|
@@ -389,7 +391,7 @@ class x extends HTMLElement {
|
|
|
389
391
|
],
|
|
390
392
|
title: void 0
|
|
391
393
|
});
|
|
392
|
-
t.innerHTML =
|
|
394
|
+
t.innerHTML = e;
|
|
393
395
|
}
|
|
394
396
|
}
|
|
395
397
|
}
|
|
@@ -399,8 +401,8 @@ const V = {
|
|
|
399
401
|
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>'
|
|
400
402
|
}, E = document.createElement("template");
|
|
401
403
|
var b;
|
|
402
|
-
const
|
|
403
|
-
E.innerHTML = `<style ${
|
|
404
|
+
const m = (b = document.querySelector("script[nonce]")) == null ? void 0 : b.getAttribute("nonce");
|
|
405
|
+
E.innerHTML = `<style ${m ? `nonce="${m}"` : ""}>
|
|
404
406
|
:host {
|
|
405
407
|
position: fixed;
|
|
406
408
|
display: flex;
|
|
@@ -610,33 +612,33 @@ class A extends HTMLElement {
|
|
|
610
612
|
async connectedCallback() {
|
|
611
613
|
this.widget = await this._loadWidget(this.widgetId), this.icon = await this._renderSymbol(), this.loaded = !0, this.render();
|
|
612
614
|
}
|
|
613
|
-
attributeChangedCallback(t,
|
|
615
|
+
attributeChangedCallback(t, i, e) {
|
|
614
616
|
this.render();
|
|
615
617
|
}
|
|
616
618
|
setActive(t) {
|
|
617
619
|
this.active = t, this.render();
|
|
618
620
|
}
|
|
619
621
|
_applyBranding() {
|
|
620
|
-
var t,
|
|
621
|
-
(
|
|
622
|
+
var t, i;
|
|
623
|
+
(i = (t = this.widget) == null ? void 0 : t.configuration) != null && i.branding && O(this.widget.configuration.branding, this);
|
|
622
624
|
}
|
|
623
625
|
async _loadWidget(t) {
|
|
624
|
-
const
|
|
626
|
+
const e = await (await fetch(`${this.apiUrl}/widget/${t}`)).json(), s = JSON.parse(e.configuration);
|
|
625
627
|
return {
|
|
626
|
-
...
|
|
628
|
+
...e,
|
|
627
629
|
configuration: s
|
|
628
630
|
};
|
|
629
631
|
}
|
|
630
632
|
async _renderSymbol() {
|
|
631
633
|
var a, d, c;
|
|
632
|
-
const t = (d = (a = this.widget) == null ? void 0 : a.configuration) == null ? void 0 : d.branding,
|
|
633
|
-
if (
|
|
634
|
+
const t = (d = (a = this.widget) == null ? void 0 : a.configuration) == null ? void 0 : d.branding, i = (c = t == null ? void 0 : t.graphics) == null ? void 0 : c.trigger;
|
|
635
|
+
if (i) {
|
|
634
636
|
const o = document.createElement("img");
|
|
635
|
-
return o.src =
|
|
637
|
+
return o.src = i, o.classList.add("trigger-icon"), o.alt = "", o;
|
|
636
638
|
}
|
|
637
|
-
const
|
|
639
|
+
const e = {
|
|
638
640
|
type: "Telia"
|
|
639
|
-
}, s = async (o) => V, { type: r } =
|
|
641
|
+
}, s = async (o) => V, { type: r } = e;
|
|
640
642
|
switch (r) {
|
|
641
643
|
case "Telia": {
|
|
642
644
|
const o = await s();
|
|
@@ -663,18 +665,18 @@ class A extends HTMLElement {
|
|
|
663
665
|
var s, r, a, d, c, o, l, h;
|
|
664
666
|
if (!(((d = (a = (r = (s = this.widget) == null ? void 0 : s.configuration) == null ? void 0 : r.branding) == null ? void 0 : a.other) == null ? void 0 : d.showButtonLabel) || !1))
|
|
665
667
|
return null;
|
|
666
|
-
const
|
|
667
|
-
return
|
|
668
|
+
const i = ((h = (l = (o = (c = this.widget) == null ? void 0 : c.configuration) == null ? void 0 : o.branding) == null ? void 0 : l.other) == null ? void 0 : h.buttonLabelText) || "Widget trigger", e = document.createElement("button");
|
|
669
|
+
return e.setAttribute("type", "button"), e.setAttribute("aria-label", i), e.classList.add("trigger-label"), e.addEventListener("click", this._onClicked), e.innerHTML = i, e;
|
|
668
670
|
}
|
|
669
671
|
render() {
|
|
670
672
|
var s, r, a, d, c, o, l;
|
|
671
673
|
this._applyBranding(), this.classList.add("bottom-right"), this.classList.toggle("active", this.active);
|
|
672
|
-
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".trigger-container"),
|
|
673
|
-
(r = t == null ? void 0 : t.querySelector(".trigger-label")) == null || r.remove(), t &&
|
|
674
|
-
const
|
|
675
|
-
if (
|
|
674
|
+
const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".trigger-container"), i = this._renderButtonLabel();
|
|
675
|
+
(r = t == null ? void 0 : t.querySelector(".trigger-label")) == null || r.remove(), t && i && t.prepend(i);
|
|
676
|
+
const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#trigger-btn");
|
|
677
|
+
if (e) {
|
|
676
678
|
const h = ((l = (o = (c = (d = this.widget) == null ? void 0 : d.configuration) == null ? void 0 : c.branding) == null ? void 0 : o.other) == null ? void 0 : l.buttonLabelText) || "Widget trigger";
|
|
677
|
-
|
|
679
|
+
e.classList.toggle("active", this.active), e.classList.toggle("rendered", this.loaded), e.addEventListener("click", this._onClicked), e.setAttribute("type", "button"), e.setAttribute("aria-label", h), this.icon && e.prepend(this.icon);
|
|
678
680
|
}
|
|
679
681
|
}
|
|
680
682
|
}
|
|
@@ -702,8 +704,8 @@ class j {
|
|
|
702
704
|
}
|
|
703
705
|
const N = "https://widgets.ace.teliacompany.net/v1", k = document.createElement("template");
|
|
704
706
|
var v;
|
|
705
|
-
const
|
|
706
|
-
k.innerHTML = `<style ${
|
|
707
|
+
const w = (v = document.querySelector("script[nonce]")) == null ? void 0 : v.getAttribute("nonce");
|
|
708
|
+
k.innerHTML = `<style ${w ? `nonce="${w}"` : ""}>
|
|
707
709
|
@keyframes slideDown {
|
|
708
710
|
from {
|
|
709
711
|
transform: translateY(0);
|
|
@@ -767,6 +769,15 @@ k.innerHTML = `<style ${m ? `nonce="${m}"` : ""}>
|
|
|
767
769
|
}
|
|
768
770
|
}
|
|
769
771
|
|
|
772
|
+
@media screen and (min-width: 801px) {
|
|
773
|
+
:host(.ace-maximized) .widget-frame-container {
|
|
774
|
+
width: calc(100vw - 40px);
|
|
775
|
+
height: calc(100vh - 40px);
|
|
776
|
+
max-height: none;
|
|
777
|
+
inset: 20px;
|
|
778
|
+
}
|
|
779
|
+
}
|
|
780
|
+
|
|
770
781
|
:host(.ace-expanded) .widget-frame-container {
|
|
771
782
|
opacity: 1;
|
|
772
783
|
animation: slideUp 0.3s linear;
|
|
@@ -807,14 +818,14 @@ class R extends HTMLElement {
|
|
|
807
818
|
set apiUrl(t) {
|
|
808
819
|
this.trigger && (this.trigger.apiUrl = t), this.setAttribute("apiurl", t);
|
|
809
820
|
}
|
|
810
|
-
attributeChangedCallback(t,
|
|
821
|
+
attributeChangedCallback(t, i, e) {
|
|
811
822
|
this.render();
|
|
812
823
|
}
|
|
813
824
|
async connectedCallback() {
|
|
814
825
|
var t;
|
|
815
|
-
this.widget = await this._loadWidget(this.widgetId), console.log("[ACE] allowedOrigins:", (t = this.widget) == null ? void 0 : t.allowedOrigins), window.addEventListener("message", (
|
|
816
|
-
var
|
|
817
|
-
this.iframeEl && !this._isAllowedOrigin(
|
|
826
|
+
this.widget = await this._loadWidget(this.widgetId), console.log("[ACE] allowedOrigins:", (t = this.widget) == null ? void 0 : t.allowedOrigins), window.addEventListener("message", (i) => {
|
|
827
|
+
var e, s;
|
|
828
|
+
this.iframeEl && !this._isAllowedOrigin(i.origin) || ((e = i.data) == null ? void 0 : e.type) === "widget-set-active" && typeof ((s = i.data.data) == null ? void 0 : s.active) == "boolean" && (this.active = i.data.data.active);
|
|
818
829
|
}), this.render();
|
|
819
830
|
}
|
|
820
831
|
isActivated() {
|
|
@@ -830,11 +841,11 @@ class R extends HTMLElement {
|
|
|
830
841
|
}
|
|
831
842
|
_isAllowedOrigin(t) {
|
|
832
843
|
var s;
|
|
833
|
-
const
|
|
834
|
-
if (t ===
|
|
844
|
+
const i = new URL(this.apiUrl).origin;
|
|
845
|
+
if (t === i)
|
|
835
846
|
return !0;
|
|
836
|
-
const
|
|
837
|
-
return !
|
|
847
|
+
const e = (s = this.widget) == null ? void 0 : s.allowedOrigins;
|
|
848
|
+
return !e || e.length === 0 ? !1 : e.some((r) => t === `https://${r}`);
|
|
838
849
|
}
|
|
839
850
|
_getContainerEl() {
|
|
840
851
|
var t;
|
|
@@ -843,27 +854,27 @@ class R extends HTMLElement {
|
|
|
843
854
|
)) || null;
|
|
844
855
|
}
|
|
845
856
|
async activate() {
|
|
846
|
-
var
|
|
857
|
+
var i;
|
|
847
858
|
this.widget || (this.widget = await this._loadWidget(this.widgetId)), this._createIFrame(), this.activated = !0;
|
|
848
|
-
const t = (((
|
|
849
|
-
(
|
|
859
|
+
const t = (((i = window.ace) == null ? void 0 : i.applications) || []).find(
|
|
860
|
+
(e) => e.id === this.widgetId
|
|
850
861
|
);
|
|
851
862
|
t && (t.storage.get("open") && t.appendToDOM(), t.trigger.showTrigger()), this.render();
|
|
852
863
|
}
|
|
853
864
|
async _loadWidget(t) {
|
|
854
865
|
return await (await fetch(`${this.apiUrl}/widget/${t}`)).json();
|
|
855
866
|
}
|
|
856
|
-
dispatch(t,
|
|
867
|
+
dispatch(t, i = {}) {
|
|
857
868
|
var s;
|
|
858
|
-
const
|
|
869
|
+
const e = {
|
|
859
870
|
type: t,
|
|
860
|
-
data:
|
|
871
|
+
data: i
|
|
861
872
|
};
|
|
862
|
-
if (
|
|
863
|
-
this._messageQueue.push(
|
|
873
|
+
if (i.widgetId || (i.widgetId = this.widgetId), !this.iframeEl) {
|
|
874
|
+
this._messageQueue.push(e);
|
|
864
875
|
return;
|
|
865
876
|
}
|
|
866
|
-
(s = this.iframeEl.contentWindow) == null || s.postMessage(
|
|
877
|
+
(s = this.iframeEl.contentWindow) == null || s.postMessage(e, "*");
|
|
867
878
|
}
|
|
868
879
|
async deactivate() {
|
|
869
880
|
this.activated = !1, this.manuallyActivated = !1, this.render();
|
|
@@ -891,26 +902,26 @@ class R extends HTMLElement {
|
|
|
891
902
|
width: "100%",
|
|
892
903
|
height: "100%",
|
|
893
904
|
"border-radius": "0.7rem"
|
|
894
|
-
},
|
|
905
|
+
}, i = document.createElement("iframe");
|
|
895
906
|
Object.entries(t).forEach(([r, a]) => {
|
|
896
|
-
|
|
907
|
+
i.style.setProperty(r, a);
|
|
897
908
|
});
|
|
898
|
-
const
|
|
899
|
-
|
|
909
|
+
const e = this.apiUrl.replace("/v1", "").replace("/api", "");
|
|
910
|
+
i.src = `${e}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`, i.title = this.getIFrameTitle(), i.setAttribute(
|
|
900
911
|
"allow",
|
|
901
912
|
"camera; microphone; display-capture; autoplay"
|
|
902
|
-
), this.iframeEl =
|
|
913
|
+
), this.iframeEl = i;
|
|
903
914
|
}
|
|
904
915
|
getIFrameTitle() {
|
|
905
|
-
var
|
|
906
|
-
let t = (
|
|
916
|
+
var i, e;
|
|
917
|
+
let t = (i = this.widget) == null ? void 0 : i.configuration;
|
|
907
918
|
if (typeof t == "string")
|
|
908
919
|
try {
|
|
909
920
|
t = JSON.parse(t);
|
|
910
921
|
} catch {
|
|
911
922
|
t = {};
|
|
912
923
|
}
|
|
913
|
-
return ((
|
|
924
|
+
return ((e = t == null ? void 0 : t.texts) == null ? void 0 : e["iframe.title"]) || "ACE Widget";
|
|
914
925
|
}
|
|
915
926
|
executeMessageQueue() {
|
|
916
927
|
this._messageQueue.forEach((t) => {
|
|
@@ -921,23 +932,26 @@ class R extends HTMLElement {
|
|
|
921
932
|
return this.expanded === "true";
|
|
922
933
|
}
|
|
923
934
|
toggleExpand(t) {
|
|
924
|
-
const
|
|
935
|
+
const i = this.isExpanded();
|
|
925
936
|
typeof t != "boolean" ? this.expanded = this.isExpanded() ? "false" : "true" : this.isExpanded() !== t && (this.expanded = t ? "true" : "false"), this.dispatch("set-open", {
|
|
926
937
|
value: this.isExpanded()
|
|
927
|
-
}), this.trigger && this.trigger.setActive(this.isExpanded()),
|
|
938
|
+
}), this.trigger && this.trigger.setActive(this.isExpanded()), i && !this.isExpanded() && this._onCloseCallback && this._onCloseCallback();
|
|
928
939
|
}
|
|
929
940
|
setZIndex(t) {
|
|
930
941
|
this.zIndex = t, this.render();
|
|
931
942
|
}
|
|
943
|
+
setMaximized(t) {
|
|
944
|
+
this.classList.toggle("ace-maximized", t), this.dispatch("set-maximized-mode", { value: t });
|
|
945
|
+
}
|
|
932
946
|
render() {
|
|
933
|
-
var
|
|
947
|
+
var e, s;
|
|
934
948
|
if (!this.iframeEl)
|
|
935
949
|
return;
|
|
936
950
|
this.isExpanded() ? (this.classList.add("ace-expanded"), this.classList.remove("ace-hidden")) : this.classList.remove("ace-expanded");
|
|
937
951
|
const t = this.activated ? "block" : "none";
|
|
938
952
|
this.iframeEl.style.setProperty("display", t), this.activated ? this.classList.add("activated") : this.classList.remove("activated");
|
|
939
|
-
const
|
|
940
|
-
|
|
953
|
+
const i = this._getContainerEl();
|
|
954
|
+
i && i.childNodes.length === 0 && i.appendChild(this.iframeEl), i && this.zIndex !== -1 && (i.style.zIndex = this.zIndex.toString()), this.trigger && ((e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("ace-trigger").length) === 0 && ((s = this.shadowRoot) == null || s.insertBefore(this.trigger, this.shadowRoot.firstChild)), this.trigger && this.triggerHidden && this.trigger.hide();
|
|
941
955
|
}
|
|
942
956
|
}
|
|
943
957
|
window.customElements.get("ace-widget") || window.customElements.define("ace-widget", R);
|
package/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(h,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(h=typeof globalThis<"u"?globalThis:h||self,u(h["@telia-ace/widget-site"]={}))})(this,(function(h){"use strict";var I,T
|
|
1
|
+
(function(h,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(h=typeof globalThis<"u"?globalThis:h||self,u(h["@telia-ace/widget-site"]={}))})(this,(function(h){"use strict";var I,T,z;class u{constructor(t){this._api=t,this._bootstrapped=!1,this._widgetAPIHandlers=new Map,window.ace=window.ace||{_c:[],_w:[],widget:function(i,e){window.ace._w.push([i,e])},configure:function(i){window.ace._c.push(i)}}}bootstrap(){this._bootstrap()}_bootstrap(){const t=globalThis.ace;globalThis.ace=this,this._bootstrapped=!0,((t==null?void 0:t._w)||[]).forEach(([i,e])=>{this.widget(i,e)}),((t==null?void 0:t._c)||[]).forEach(i=>{this.configure(i)})}executePreloadedHandlers(t,i){const e=i?[t,i]:[t];e.flatMap(n=>this._widgetAPIHandlers.get(n)||[]).forEach(n=>{n()}),e.forEach(n=>this._widgetAPIHandlers.set(n,[]))}configure(t){if(!this._bootstrapped)throw new Error("ace environment not bootstrapped");t(this._api)}version(){return this._api.version()}widget(t,i){const e=Object.values(this._api.getWidgets()).find(s=>{var n;return((n=s.widget)==null?void 0:n.name)===t||s.widgetId===t});if(!e){const s=this._widgetAPIHandlers.get(t)||[];s.push(()=>{const n=Object.values(this._api.getWidgets()).find(a=>{var d;return((d=a.widget)==null?void 0:d.name)===t||a.widgetId===t});i(n==null?void 0:n.api)}),this._widgetAPIHandlers.set(t,s);return}i(e.api)}}const $="1.1.147-rc.3";class M{constructor(t){this._site=t}async activate(t,i){let e=this._site._widgets[t];if(e||(this._site.addWidgetEl(t),e=this._site._widgets[t]),!e){console.warn(`[ACE] Widget "${t}" not found`);return}e.manuallyActivated=!0,i!=null&&i.onClose&&(e._onCloseCallback=i.onClose),i!=null&&i.hideTrigger&&e.setTriggerVisible(!1),e.isActivated()||await e.activate()}storagePolicy(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("set-storage-policies",{policies:t})})}disallowStorageKey(t){Object.entries(this._site._widgets).forEach(([i,e])=>{e.dispatch("disallow-storage-key",{storageKey:t})})}getWidgets(){return this._site._widgets}version(){const t=$;return{widgets:this._site.getWidgetsVersions(),sites:t}}}class W{constructor(t,i){this.triggerType=t,this.condition=i,this.triggerType=t,this.condition=i}shouldActivate(t){if(this.triggerType!=="visit"||this.condition.type!=="url")return[];const i=[];return this.condition.outputs.filter(e=>e.action.type==="render_widget"&&U(e.value,t)).forEach(e=>{let s={widgetId:""};try{s=JSON.parse(e.action.data)}catch{s={widgetId:""}}i.push(s.widgetId)}),i}}const U=(r,t)=>{if(r==="*"||r==="/*"||r===t)return!0;if(r.endsWith("/*")){const s=r.slice(0,-2);return t===s||t.startsWith(s+"/")}return!1},B=(r,t)=>{const i=s=>`ace_${r.substring(0,7)}-${s}`;return Object.entries(t).reduce((s,[n,a])=>{const[d,c]=n.split("-");if(i(c)!=n)return s;try{const o=JSON.parse(a);s[c]=o.value}catch{return s}return s},{})},m="https://widgets.ace.teliacompany.net/v1",H="https://embed.webprovisions.io",O=()=>{if(typeof window<"u"){const r=history.pushState,t=history.replaceState;history.pushState=function(...i){r.apply(history,i),window.dispatchEvent(new Event("locationchange"))},history.replaceState=function(...i){t.apply(history,i),window.dispatchEvent(new Event("locationchange"))}}};class w extends HTMLElement{constructor(){var t;super(),this._site=null,this._widgets={},this._loadedVersions={},this._path=((t=window==null?void 0:window.location)==null?void 0:t.pathname)||"",this._api=new M(this),this._environment=new u(this._api),this.routeChangeListener=()=>{this._path=window.location.pathname,this.render()},this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["siteid","apiurl","embedurl"]}get siteId(){return this.getAttribute("siteid")||""}set siteId(t){this.setAttribute("siteid",t)}get apiUrl(){return this.getAttribute("apiurl")||m}set apiUrl(t){this.setAttribute("apiurl",t)}get embedUrl(){return this.getAttribute("embedurl")||H}set embedUrl(t){this.setAttribute("embedurl",t)}async connectedCallback(){O(),await this._loadSite(),this.render(),this._environment.bootstrap(),window.addEventListener("locationchange",this.routeChangeListener),window.addEventListener("message",t=>{var s,n;const{type:i,data:e}=t.data;if(i==="widget-minimize")this._widgets[e.widgetId].toggleExpand();else if(i==="widget-maximize")(s=this._widgets[e.widgetId])==null||s.setMaximized(e.value);else if(i==="widget-activated"){this._widgets[e.widgetId].executeMessageQueue();const a=this._widgets[e.widgetId];a&&(this._loadedVersions[e.widgetId]=e.version,this._environment.executePreloadedHandlers(((n=a.widget)==null?void 0:n.name)||"",e.widgetId));try{const d=JSON.parse(e.storage),c=B(e.widgetId,d);typeof c.open=="boolean"&&(a.disableAnimations(),a.toggleExpand(c.open),setTimeout(()=>{a.enableAnimations()},600))}catch{console.warn("unable to parse widget storage")}}})}disconnectedCallback(){window.removeEventListener("locationchange",this.routeChangeListener)}attributeChangedCallback(t,i,e){this.render()}async _loadSite(){var s;const i=await(await fetch(`${this.apiUrl}/site/${this.siteId}`)).json(),e=location.hostname;if(!((i==null?void 0:i.hosts)||[]).includes(e)){console.warn(`the host "${e}" needs to be configured as an allowed host in order to install widgets.`);return}this._site=i,this._site&&(this._site.triggers=this._site.triggers.map(n=>new W(n.triggerType,n.condition))),(((s=this._site)==null?void 0:s.widgets)||[]).forEach(async n=>{this.addWidgetEl(n.id)})}addWidgetEl(t){const i=`ace-widget_${t}`;let e=document.getElementById(i);e||(e=document.createElement("ace-widget"),e.id=i,e.widgetId=t,this.apiUrl!==m&&(e.apiUrl=this.apiUrl),document.body.appendChild(e)),this._widgets={...this._widgets,[t]:e}}getWidgetsVersions(){return this._loadedVersions}render(){if(!this._site){this.shadow.innerHTML="";return}const t=P(this._site);for(const[i,e]of Object.entries(this._widgets)){if(e.manuallyActivated)continue;const s=t.find(n=>n.id===i);s&&!e.isActivated()?e.activate():!s&&e.isActivated()&&e.deactivate()}this.shadow.innerHTML=""}}window.customElements.get("ace-site")||window.customElements.define("ace-site",w);const P=r=>{const t=window.location.pathname;return r.triggers.reduce((e,s)=>(s.shouldActivate(t).forEach(a=>{const d=e.find(o=>o.id===a),c=((r==null?void 0:r.widgets)||[]).find(o=>o.id===a);!d&&c&&e.push({id:a})}),e),[])},g=(r,t,i)=>{r&&i.style.setProperty(t,r)},V=(r,t)=>{var i,e,s,n,a,d,c,o,l;g((i=r.colors)==null?void 0:i.primaryBackground,"--primary-background",t),g((e=r.colors)==null?void 0:e.textOnPrimaryBackground,"--text-on-primary-background",t),g((s=r.colors)==null?void 0:s.secondaryBackground,"--secondary-background",t),g((n=r.colors)==null?void 0:n.textOnSecondaryBackground,"--text-on-secondary-background",t),g((a=r.colors)==null?void 0:a.interactiveDestructiveBackground,"--destructive-color",t),g((d=r.colors)==null?void 0:d.interactiveTextOnDestructiveBackground,"--text-on-destructive-color",t),g((c=r.colors)==null?void 0:c.interactivePrimaryBackground,"--interactive-primary-background",t),g((o=r.colors)==null?void 0:o.interactiveTextOnPrimaryBackground,"--interactive-text-on-primary-background",t),g((l=r.colors)==null?void 0:l.focusColor,"--focus-color",t)},j=(r={})=>{const{content:t="",title:i,attributes:e=[]}=r;let s="";const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},...e];return i&&(s=`<title>${i}</title>`),`<svg ${n.map(d=>`${d.name}="${d.value}"`).join(" ")}>${s}${t}</svg>`},f=document.createElement("template");f.innerHTML=`<span
|
|
2
2
|
class="ace-icon__container"
|
|
3
3
|
></span>`;const b=document.createElement("template"),y=(I=document.querySelector("script[nonce]"))==null?void 0:I.getAttribute("nonce");b.innerHTML=`<style ${y?`nonce="${y}"`:""}>
|
|
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
|
|
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,i,e){this.render()}render(){var i;const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".ace-icon__container");if(t){const e=j({content:this.svg,attributes:[{name:"viewBox",value:"0 0 64 64"}],title:void 0});t.innerHTML=e}}}window.customElements.get("ace-icon")||window.customElements.define("ace-icon",v);const N={name:"question",svg:'<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 4C16.536 4 4 16.536 4 32C4 47.464 16.536 60 32 60C47.464 60 60 47.464 60 32C59.9827 16.5432 47.4568 4.01731 32 4ZM32 55.6923C18.9151 55.6923 8.30769 45.0849 8.30769 32C8.30769 18.9151 18.9151 8.30769 32 8.30769C45.0849 8.30769 55.6923 18.9151 55.6923 32C55.6775 45.0788 45.0788 55.6775 32 55.6923Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.9423 37.5723L36.311 32.9068L36.7354 32.4448C39.7555 29.1161 40.7645 27.0647 40.7645 24.5087C40.7645 23.1091 40.4251 21.7942 39.7041 20.6491C38.3044 18.3587 35.6323 16.9166 32.2816 16.9166C28.7565 16.9166 25.3125 18.7414 23.2581 21.6772L23.1201 21.8791C22.8232 22.3032 22.696 22.6849 22.696 22.9818C22.696 23.7029 23.926 25.9932 25.2833 25.9932C25.5378 25.9932 25.7922 25.9084 26.0467 25.7388C26.2588 25.5691 26.5981 25.2298 27.0647 24.7208C28.8885 22.6849 30.1185 21.9215 31.7726 21.9215C33.6813 21.9215 35.081 23.1939 35.081 24.8905C35.081 26.375 34.2751 27.7746 32.3664 29.8529L28.2523 34.2216C27.9554 34.6033 27.7857 34.9426 27.7857 35.282C27.7857 35.6213 27.9978 36.1726 28.4219 36.8937C29.0581 37.8692 29.7368 38.3782 30.4578 38.3782C30.9244 38.3782 31.3909 38.1237 31.9423 37.5723ZM30.882 47.4972C29.2278 47.4972 27.6585 44.7403 27.6585 43.6799C27.6585 42.1954 30.0761 40.6261 32.4089 40.6261C33.6389 40.6261 34.2751 41.1775 34.2751 42.3227C34.2751 44.0616 33.4692 45.843 32.4513 46.7761C31.9423 47.2427 31.4334 47.4972 30.882 47.4972Z"/></svg>'},_=document.createElement("template"),x=(T=document.querySelector("script[nonce]"))==null?void 0:T.getAttribute("nonce");_.innerHTML=`<style ${x?`nonce="${x}"`:""}>
|
|
38
38
|
:host {
|
|
39
39
|
position: fixed;
|
|
40
40
|
display: flex;
|
|
@@ -209,7 +209,7 @@ svg {
|
|
|
209
209
|
</svg>
|
|
210
210
|
</span>
|
|
211
211
|
</button>
|
|
212
|
-
</div>`;class C extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(_.content.cloneNode(!0)),this.shadow.appendChild(E.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,e
|
|
212
|
+
</div>`;class C extends HTMLElement{constructor(){super(),this.widget=null,this.loaded=!1,this.active=!1,this._onClicked=()=>{this.active=!this.active;const t={detail:{widgetId:this.widgetId},bubbles:!0,composed:!0};this.dispatchEvent(new CustomEvent("toggle",t)),this.render()},this.shadow=this.attachShadow({mode:"open"}),this.shadow.appendChild(_.content.cloneNode(!0)),this.shadow.appendChild(E.content.cloneNode(!0))}static get observedAttributes(){return["widgetid","apiurl"]}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||""}set apiUrl(t){this.setAttribute("apiurl",t)}async connectedCallback(){this.widget=await this._loadWidget(this.widgetId),this.icon=await this._renderSymbol(),this.loaded=!0,this.render()}attributeChangedCallback(t,i,e){this.render()}setActive(t){this.active=t,this.render()}_applyBranding(){var t,i;(i=(t=this.widget)==null?void 0:t.configuration)!=null&&i.branding&&V(this.widget.configuration.branding,this)}async _loadWidget(t){const e=await(await fetch(`${this.apiUrl}/widget/${t}`)).json(),s=JSON.parse(e.configuration);return{...e,configuration:s}}async _renderSymbol(){var a,d,c;const t=(d=(a=this.widget)==null?void 0:a.configuration)==null?void 0:d.branding,i=(c=t==null?void 0:t.graphics)==null?void 0:c.trigger;if(i){const o=document.createElement("img");return o.src=i,o.classList.add("trigger-icon"),o.alt="",o}const e={type:"Telia"},s=async o=>N,{type:n}=e;switch(n){case"Telia":{const o=await s();if(o){const l=document.createElement("ace-icon");return l.classList.add("trigger-icon"),l.svg=o.svg,l.size="lg",l}return null}default:return null}}toggle(){this._onClicked()}hide(){this.classList.add("ace-hidden"),this.style.display="none"}show(){this.classList.remove("ace-hidden"),this.style.display=""}_renderButtonLabel(){var s,n,a,d,c,o,l,p;if(!(((d=(a=(n=(s=this.widget)==null?void 0:s.configuration)==null?void 0:n.branding)==null?void 0:a.other)==null?void 0:d.showButtonLabel)||!1))return null;const i=((p=(l=(o=(c=this.widget)==null?void 0:c.configuration)==null?void 0:o.branding)==null?void 0:l.other)==null?void 0:p.buttonLabelText)||"Widget trigger",e=document.createElement("button");return e.setAttribute("type","button"),e.setAttribute("aria-label",i),e.classList.add("trigger-label"),e.addEventListener("click",this._onClicked),e.innerHTML=i,e}render(){var s,n,a,d,c,o,l;this._applyBranding(),this.classList.add("bottom-right"),this.classList.toggle("active",this.active);const t=(s=this.shadowRoot)==null?void 0:s.querySelector(".trigger-container"),i=this._renderButtonLabel();(n=t==null?void 0:t.querySelector(".trigger-label"))==null||n.remove(),t&&i&&t.prepend(i);const e=(a=this.shadowRoot)==null?void 0:a.querySelector("#trigger-btn");if(e){const p=((l=(o=(c=(d=this.widget)==null?void 0:d.configuration)==null?void 0:c.branding)==null?void 0:o.other)==null?void 0:l.buttonLabelText)||"Widget trigger";e.classList.toggle("active",this.active),e.classList.toggle("rendered",this.loaded),e.addEventListener("click",this._onClicked),e.setAttribute("type","button"),e.setAttribute("aria-label",p),this.icon&&e.prepend(this.icon)}}}window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",C),window.customElements.get("ace-icon")||window.customElements.define("ace-icon",v);class R{constructor(t){this.widgetEl=t}open(){this.widgetEl.toggleExpand(!0)}close(){this.widgetEl.toggleExpand(!1)}onClose(t){this.widgetEl._onCloseCallback=t}setZIndex(t){this.widgetEl.setZIndex(t)}setFullscreenMode(t){this.widgetEl.dispatch("set-fullscreen-mode",{value:t})}}const q="https://widgets.ace.teliacompany.net/v1",A=document.createElement("template"),k=(z=document.querySelector("script[nonce]"))==null?void 0:z.getAttribute("nonce");A.innerHTML=`<style ${k?`nonce="${k}"`:""}>
|
|
213
213
|
@keyframes slideDown {
|
|
214
214
|
from {
|
|
215
215
|
transform: translateY(0);
|
|
@@ -273,6 +273,15 @@ svg {
|
|
|
273
273
|
}
|
|
274
274
|
}
|
|
275
275
|
|
|
276
|
+
@media screen and (min-width: 801px) {
|
|
277
|
+
:host(.ace-maximized) .widget-frame-container {
|
|
278
|
+
width: calc(100vw - 40px);
|
|
279
|
+
height: calc(100vh - 40px);
|
|
280
|
+
max-height: none;
|
|
281
|
+
inset: 20px;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
276
285
|
:host(.ace-expanded) .widget-frame-container {
|
|
277
286
|
opacity: 1;
|
|
278
287
|
animation: slideUp 0.3s linear;
|
|
@@ -283,4 +292,4 @@ svg {
|
|
|
283
292
|
animation: slideDown 0.3s linear;
|
|
284
293
|
display: none;
|
|
285
294
|
}
|
|
286
|
-
</style>`;const L=document.createElement("template");L.innerHTML='<div class="widget-frame-container"></div>';class S extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.manuallyActivated=!1,this.triggerHidden=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this._onCloseCallback=null,this.api=new R(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(A.content.cloneNode(!0)),this.shadow.appendChild(L.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("ace-hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||q}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,e
|
|
295
|
+
</style>`;const L=document.createElement("template");L.innerHTML='<div class="widget-frame-container"></div>';class S extends HTMLElement{constructor(){super(),this.widget=null,this.activated=!1,this.manuallyActivated=!1,this.triggerHidden=!1,this.active=!1,this.iframeEl=null,this.trigger=null,this._messageQueue=[],this._onCloseCallback=null,this.api=new R(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(A.content.cloneNode(!0)),this.shadow.appendChild(L.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("ace-hidden",!0)}get widgetId(){return this.getAttribute("widgetid")||""}set widgetId(t){this.trigger&&(this.trigger.widgetId=t,this.trigger.id=`ace-trigger_${t}`),this.setAttribute("widgetid",t)}get apiUrl(){return this.getAttribute("apiurl")||q}set apiUrl(t){this.trigger&&(this.trigger.apiUrl=t),this.setAttribute("apiurl",t)}attributeChangedCallback(t,i,e){this.render()}async connectedCallback(){var t;this.widget=await this._loadWidget(this.widgetId),console.log("[ACE] allowedOrigins:",(t=this.widget)==null?void 0:t.allowedOrigins),window.addEventListener("message",i=>{var e,s;this.iframeEl&&!this._isAllowedOrigin(i.origin)||((e=i.data)==null?void 0:e.type)==="widget-set-active"&&typeof((s=i.data.data)==null?void 0:s.active)=="boolean"&&(this.active=i.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")}_isAllowedOrigin(t){var s;const i=new URL(this.apiUrl).origin;if(t===i)return!0;const e=(s=this.widget)==null?void 0:s.allowedOrigins;return!e||e.length===0?!1:e.some(n=>t===`https://${n}`)}_getContainerEl(){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(".widget-frame-container"))||null}async activate(){var i;this.widget||(this.widget=await this._loadWidget(this.widgetId)),this._createIFrame(),this.activated=!0;const t=(((i=window.ace)==null?void 0:i.applications)||[]).find(e=>e.id===this.widgetId);t&&(t.storage.get("open")&&t.appendToDOM(),t.trigger.showTrigger()),this.render()}async _loadWidget(t){return await(await fetch(`${this.apiUrl}/widget/${t}`)).json()}dispatch(t,i={}){var s;const e={type:t,data:i};if(i.widgetId||(i.widgetId=this.widgetId),!this.iframeEl){this._messageQueue.push(e);return}(s=this.iframeEl.contentWindow)==null||s.postMessage(e,"*")}async deactivate(){this.activated=!1,this.manuallyActivated=!1,this.render()}setTriggerVisible(t){this.triggerHidden=!t,this.trigger&&(t?this.trigger.show():this.trigger.hide())}_createIFrame(){var s;if(!((s=this.widget)!=null&&s.distributionName)||this.iframeEl||!this.widget.linked)return;const t={display:"block",border:"none",opacity:"1","color-scheme":"none",background:"none transparent !important",margin:"0px","max-height":"100%","max-width":"100vw",transform:"translateY(0px)",transition:"none 0s ease 0s !important",visibility:"visible","z-index":"999999999 !important",width:"100%",height:"100%","border-radius":"0.7rem"},i=document.createElement("iframe");Object.entries(t).forEach(([n,a])=>{i.style.setProperty(n,a)});const e=this.apiUrl.replace("/v1","").replace("/api","");i.src=`${e}/${this.widget.organization}/${this.widget.id}?inline=true&fullscreen=true`,i.title=this.getIFrameTitle(),i.setAttribute("allow","camera; microphone; display-capture; autoplay"),this.iframeEl=i}getIFrameTitle(){var i,e;let t=(i=this.widget)==null?void 0:i.configuration;if(typeof t=="string")try{t=JSON.parse(t)}catch{t={}}return((e=t==null?void 0:t.texts)==null?void 0:e["iframe.title"])||"ACE Widget"}executeMessageQueue(){this._messageQueue.forEach(t=>{this.dispatch(t.type,t.data)}),this._messageQueue=[]}isExpanded(){return this.expanded==="true"}toggleExpand(t){const i=this.isExpanded();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()),i&&!this.isExpanded()&&this._onCloseCallback&&this._onCloseCallback()}setZIndex(t){this.zIndex=t,this.render()}setMaximized(t){this.classList.toggle("ace-maximized",t),this.dispatch("set-maximized-mode",{value:t})}render(){var e,s;if(!this.iframeEl)return;this.isExpanded()?(this.classList.add("ace-expanded"),this.classList.remove("ace-hidden")):this.classList.remove("ace-expanded");const t=this.activated?"block":"none";this.iframeEl.style.setProperty("display",t),this.activated?this.classList.add("activated"):this.classList.remove("activated");const i=this._getContainerEl();i&&i.childNodes.length===0&&i.appendChild(this.iframeEl),i&&this.zIndex!==-1&&(i.style.zIndex=this.zIndex.toString()),this.trigger&&((e=this.shadowRoot)==null?void 0:e.querySelectorAll("ace-trigger").length)===0&&((s=this.shadowRoot)==null||s.insertBefore(this.trigger,this.shadowRoot.firstChild)),this.trigger&&this.triggerHidden&&this.trigger.hide()}}window.customElements.get("ace-widget")||window.customElements.define("ace-widget",S),window.customElements.get("ace-trigger")||window.customElements.define("ace-trigger",C),h.SiteComponent=w,h.WidgetComponent=S,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED