@telia-ace/widget-core-flamingo 1.1.31-rc.0 → 1.1.31-rc.1

package/index.js

@@ -202,7 +202,7 @@
       .trigger-label:hover {
         opacity: 0.8;
       }
-    `];F([v({attribute:!1})],y.prototype,"application",2);F([k()],y.prototype,"active",2);F([k()],y.prototype,"loaded",2);F([k()],y.prototype,"icon",2);F([k()],y.prototype,"offset",2);var ui=Object.defineProperty,fi=Object.getOwnPropertyDescriptor,x=(s,t,e,i)=>{for(var r=i>1?void 0:i?fi(t,e):t,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=(i?o(t,e,r):o(r))||r);return i&&r&&ui(t,e,r),r};const ue=s=>{class t extends s{constructor(){super(...arguments),this.properties={},this.context={},this.layout={},this.nodes=[]}writeProperties(i){this.properties=i}writeLayout(i){this.layout=i}writeContext(i){this.context=i}addChild(i){i.parent=this,this.nodes.push(i)}connectedCallback(){super.connectedCallback(),this.renderRoot.host.style.setProperty("--width",this.layout.size==="full"?"var(--columns, 1)":`min(${this.layout.size||"var(--columns)"}, var(--columns))`)}}return t.styles=[z`
+    `];F([v({attribute:!1})],y.prototype,"application",2);F([k()],y.prototype,"active",2);F([k()],y.prototype,"loaded",2);F([k()],y.prototype,"icon",2);F([k()],y.prototype,"offset",2);var ui=Object.defineProperty,fi=Object.getOwnPropertyDescriptor,x=(s,t,e,i)=>{for(var r=i>1?void 0:i?fi(t,e):t,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=(i?o(t,e,r):o(r))||r);return i&&r&&ui(t,e,r),r};const ue=s=>{class t extends s{constructor(){super(...arguments),this.properties={},this.context={},this.layout={},this.nodes=[]}writeProperties(i){this.properties=i}writeLayout(i){this.layout=i}writeContext(i){this.context=i}addChild(i){i.parent=this,this.nodes.push(i)}connectedCallback(){super.connectedCallback(),this.renderRoot.host.style.setProperty("--width",this.layout.size==="full"?"var(--columns, 1)":`min(${this.layout.size||"var(--columns)"}, var(--columns))`),this.application.mountComponent(this)}}return t.styles=[z`
         :host {
           font-family: var(--font-family);
           grid-column: span var(--width);
@@ -315,7 +315,7 @@
       opacity: 0;
       animation: slideDown 0.3s linear;
     }
-  `;yi([v({attribute:!1})],st.prototype,"application",2);class bi{constructor(){this.root=this.createRoot()}createComponentModel(t,e){this.root.application=e;const i=a=>{if(Array.isArray(a)){const[c,...l]=a;return{definitionId:c,overrides:l}}return{definitionId:a,overrides:[]}},r=(a,c,l,h)=>{l.forEach(p=>{const d=i(p),u=h[d.definitionId];if(!u){console.error(`No definition found for component type '${d.definitionId}'.`);return}const g=a.createNode(u.type,u.type);g&&(g.name=d.definitionId,g.application=e,u.properties&&g.writeProperties(u.properties),u.context&&g.writeContext(u.context),u.layout&&g.writeLayout(u.layout),c.addChild(g),u.children&&r(a,g,u.children,h))})},{entry:n,components:o}=t;return r(this,this.root,[n],o),this.root}createRoot(){return new st}createNode(t,e){const i=this.resolveComponent(e);if(!i)return console.warn(`Unable to resolve component: ${e}`),new St;const r=new i;return r.type=e,r.name=t,r}resolveComponent(t){return customElements.get(`ace-${t}`)}getRoot(){return this.root}}const fe=class{constructor(){this.components=new Map}getComponent(s){const t=this.components.get(s);return t||console.warn(`Unable to resolve component: ${s}. You most likely forgot to register the required plugin.`),t}registerComponent(s,t){this.components.set(s,t)}async loadComponents(){const s=[...this.components.entries()].map(([t,e])=>e.then(i=>{this.defineAsWebComponent(t,i.default)}));await Promise.all(s)}defineAsWebComponent(s,t){const e=fe.ResolveWebComponentName(s);customElements.get(e)||customElements.define(e,t)}};let ge=fe;ge.ResolveWebComponentName=s=>`ace-${s}`;class $i{constructor(){this.texts=new Map}loadTexts(t){this.texts=new Map(Object.entries(t))}get(t,e){const i=this.texts.get(t);return i||e||null}}class me{constructor(t,e,i,r){this.name=t,this.container=e,this.settings=i,this.options=r,this.platform=new bi,this.texts=new $i,this.renderStrategy=A.Inline,this.autoActivate=!1,this.plugins=[],this.componentResolver=new ge,this.renderStrategy=this.options.renderStrategy||A.Inline,this.triggerIcon=this.options.triggerIcon,typeof r.autoActivate=="boolean"&&(this.autoActivate=r.autoActivate),this.container.register("$settings",i),this.texts.loadTexts(i.texts||{})}async activate(){if(await this.loadPlugins(),await this.componentResolver.loadComponents(),this.root=this.platform.createComponentModel(this.settings,this),this.container.setState(te.Ready),this.autoActivate){const t=this.render();t&&document.body.appendChild(t)}}async loadPlugins(){for await(const t of this.plugins)await t(this)}styles(){return this.settings.styles||{}}branding(){return this.settings.branding||{}}plugin(t){return this.plugins.push(t),this}appendToDOM(){this.root&&(this.root.classList.add("expanded"),this.root.classList.remove("hidden"),document.body.appendChild(this.root))}hide(){this.root&&(this.root.classList.add("hidden"),this.root.classList.remove("expanded"))}registerComponent(t,e){this.componentResolver.registerComponent(t,e)}resolveComponent(t){return this.componentResolver.getComponent(t)}render(){if(this.renderStrategy===A.Trigger){const t=[...Array.from(document.querySelectorAll("ace-trigger"))].length,e=new y;return e.application=this,e.setOffset(t*80),e}return this.root}}const ve=class{async getSite(s){const e=await(await fetch(s)).json();return e?{id:e.id,apps:e.widgets.map(i=>{let r=A.Inline;return i.renderStrategy==="Trigger"&&(r=A.Trigger),{id:i.id,widgetId:i.widgetId,renderStrategy:r,autoActivate:i.autoActivate,triggerIcon:{type:"Telia",content:i.triggerIcon}}})}:null}async getWidget(s){const e=await(await fetch(`${ve.endpoint}/widget/${s}`)).json();return e?{name:e.name,config:JSON.parse(e.configuration)}:null}};let tt=ve;tt.endpoint="https://widgets.ace.teliacompany.net/api";class ye{constructor(){this.applications=[],this.container=new yt("environment",this),setTimeout(()=>{this.notifyWidgetsOfCreation()},1e3)}async bootstrap(){await this.activate()}async activate(){const t=this.applications.filter(e=>e.autoActivate);for await(const e of t)await e.activate()}notifyWidgetsOfCreation(){document.querySelectorAll("ace-widget").forEach(e=>{const i=this.applications.find(r=>r.name===e.name);i&&e.dispatchEvent(new CustomEvent("environment-created",{detail:{widget:i}}))})}registerApp(t,e,i){const r=new yt(t,this),n=new me(t,r,e,i);this.applications.push(n)}plugin(t){return this.applications.forEach(e=>{e.plugin(t)}),this}}class be{constructor(t){this.configurations=[],this.httpClient=new tt,this.httpClient=new tt,typeof t=="string"?this.url=t:(t.httpClient&&(this.httpClient=t.httpClient),this.loadFromConfig(t))}async load(t){const e=await this.httpClient.getSite(t);if(!e){console.warn(`Unable to load site from the url provided: ${t}`);return}this.configurations=e.apps}loadFromConfig(t){this.configurations=t.apps.map(e=>({id:"",renderStrategy:e.renderStrategy,widgetId:e.widgetId,autoActivate:e.autoActivate,triggerIcon:{type:"Telia",content:e.triggerIcon||"question"}}))}async bootstrap(t){var e;this.url&&await this.load(this.url),this.environment=new ye,this.addGlobal(this.environment);for await(const i of this.configurations){const r=await this.httpClient.getWidget(i.widgetId);r&&((e=this.environment)==null||e.registerApp(r.name,r.config,{renderStrategy:i.renderStrategy,triggerIcon:i.triggerIcon,autoActivate:i.autoActivate}))}t(this.environment),await this.environment.bootstrap()}addGlobal(t){globalThis.widgets=t}}var _i=Object.defineProperty,wi=Object.getOwnPropertyDescriptor,xt=(s,t,e,i)=>{for(var r=i>1?void 0:i?wi(t,e):t,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=(i?o(t,e,r):o(r))||r);return i&&r&&_i(t,e,r),r};class R extends w{constructor(){super(),this.status="deactivated",this.addEventListener("environment-created",this.onEnvironmentCreated)}async connectedCallback(){super.connectedCallback(),await this.getGlobalEnvironment()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("environment-created",this.onEnvironmentCreated)}async onEnvironmentCreated(t){this.widget=t.detail.widget,await this.activate(),this.requestUpdate()}async activate(){this.widget&&(await this.widget.activate(),this.status="activated")}async getGlobalEnvironment(){const t=globalThis.widgets;t&&(this.widget=t.applications.find(e=>e.name===this.name),await this.activate())}render(){if(!this.widget||this.status!=="activated")return f;if(this.widget.renderStrategy===A.Trigger){const t=new y;return t.application=this.widget,t}return this.widget.render()}}R.styles=[z`
+  `;yi([v({attribute:!1})],st.prototype,"application",2);class bi{constructor(){this.root=this.createRoot()}createComponentModel(t,e){this.root.application=e;const i=a=>{if(Array.isArray(a)){const[c,...l]=a;return{definitionId:c,overrides:l}}return{definitionId:a,overrides:[]}},r=(a,c,l,h)=>{l.forEach(p=>{const d=i(p),u=h[d.definitionId];if(!u){console.error(`No definition found for component type '${d.definitionId}'.`);return}const g=a.createNode(u.type,u.type);g&&(g.name=d.definitionId,g.application=e,u.properties&&g.writeProperties(u.properties),u.context&&g.writeContext(u.context),u.layout&&g.writeLayout(u.layout),c.addChild(g),u.children&&r(a,g,u.children,h))})},{entry:n,components:o}=t;return r(this,this.root,[n],o),this.root}createRoot(){return new st}createNode(t,e){const i=this.resolveComponent(e);if(!i)return console.warn(`Unable to resolve component: ${e}`),new St;const r=new i;return r.type=e,r.name=t,r}resolveComponent(t){return customElements.get(`ace-${t}`)}getRoot(){return this.root}}const fe=class{constructor(){this.components=new Map}getComponent(s){const t=this.components.get(s);return t||console.warn(`Unable to resolve component: ${s}. You most likely forgot to register the required plugin.`),t}registerComponent(s,t){this.components.set(s,t)}async loadComponents(){const s=[...this.components.entries()].map(([t,e])=>e.then(i=>{this.defineAsWebComponent(t,i.default)}));await Promise.all(s)}defineAsWebComponent(s,t){const e=fe.ResolveWebComponentName(s);customElements.get(e)||customElements.define(e,t)}};let ge=fe;ge.ResolveWebComponentName=s=>`ace-${s}`;class $i{constructor(){this.texts=new Map}loadTexts(t){this.texts=new Map(Object.entries(t))}get(t,e){const i=this.texts.get(t);return i||e||null}}class me{constructor(t,e,i,r){this.name=t,this.container=e,this.settings=i,this.options=r,this.platform=new bi,this.texts=new $i,this.renderStrategy=A.Inline,this.autoActivate=!1,this.plugins=[],this.componentResolver=new ge,this.components=[],this.renderStrategy=this.options.renderStrategy||A.Inline,this.triggerIcon=this.options.triggerIcon,typeof r.autoActivate=="boolean"&&(this.autoActivate=r.autoActivate),this.container.register("$settings",i),this.texts.loadTexts(i.texts||{})}async activate(){if(await this.loadPlugins(),await this.componentResolver.loadComponents(),this.root=this.platform.createComponentModel(this.settings,this),this.container.setState(te.Ready),this.autoActivate){const t=this.render();t&&document.body.appendChild(t)}}async loadPlugins(){for await(const t of this.plugins)await t(this)}styles(){return this.settings.styles||{}}branding(){return this.settings.branding||{}}plugin(t){return this.plugins.push(t),this}appendToDOM(){this.root&&(this.root.classList.add("expanded"),this.root.classList.remove("hidden"),document.body.appendChild(this.root))}hide(){this.root&&(this.root.classList.add("hidden"),this.root.classList.remove("expanded"))}registerComponent(t,e){this.componentResolver.registerComponent(t,e)}resolveComponent(t){return this.componentResolver.getComponent(t)}mountComponent(t){this.components.push(t)}getComponent(t){const e=this.components.find(i=>i.type===t);return e||null}render(){if(this.renderStrategy===A.Trigger){const t=[...Array.from(document.querySelectorAll("ace-trigger"))].length,e=new y;return e.application=this,e.setOffset(t*80),e}return this.root}}const ve=class{async getSite(s){const e=await(await fetch(s)).json();return e?{id:e.id,apps:e.widgets.map(i=>{let r=A.Inline;return i.renderStrategy==="Trigger"&&(r=A.Trigger),{id:i.id,widgetId:i.widgetId,renderStrategy:r,autoActivate:i.autoActivate,triggerIcon:{type:"Telia",content:i.triggerIcon}}})}:null}async getWidget(s){const e=await(await fetch(`${ve.endpoint}/widget/${s}`)).json();return e?{name:e.name,config:JSON.parse(e.configuration)}:null}};let tt=ve;tt.endpoint="https://widgets.ace.teliacompany.net/api";class ye{constructor(){this.applications=[],this.container=new yt("environment",this),setTimeout(()=>{this.notifyWidgetsOfCreation()},1e3)}async bootstrap(){await this.activate()}async activate(){const t=this.applications.filter(e=>e.autoActivate);for await(const e of t)await e.activate()}notifyWidgetsOfCreation(){document.querySelectorAll("ace-widget").forEach(e=>{const i=this.applications.find(r=>r.name===e.name);i&&e.dispatchEvent(new CustomEvent("environment-created",{detail:{widget:i}}))})}registerApp(t,e,i){const r=new yt(t,this),n=new me(t,r,e,i);this.applications.push(n)}plugin(t){return this.applications.forEach(e=>{e.plugin(t)}),this}}class be{constructor(t){this.configurations=[],this.httpClient=new tt,this.httpClient=new tt,typeof t=="string"?this.url=t:(t.httpClient&&(this.httpClient=t.httpClient),this.loadFromConfig(t))}async load(t){const e=await this.httpClient.getSite(t);if(!e){console.warn(`Unable to load site from the url provided: ${t}`);return}this.configurations=e.apps}loadFromConfig(t){this.configurations=t.apps.map(e=>({id:"",renderStrategy:e.renderStrategy,widgetId:e.widgetId,autoActivate:e.autoActivate,triggerIcon:{type:"Telia",content:e.triggerIcon||"question"}}))}async bootstrap(t){var e;this.url&&await this.load(this.url),this.environment=new ye,this.addGlobal(this.environment);for await(const i of this.configurations){const r=await this.httpClient.getWidget(i.widgetId);r&&((e=this.environment)==null||e.registerApp(r.name,r.config,{renderStrategy:i.renderStrategy,triggerIcon:i.triggerIcon,autoActivate:i.autoActivate}))}t(this.environment),await this.environment.bootstrap()}addGlobal(t){globalThis.widgets=t}}var _i=Object.defineProperty,wi=Object.getOwnPropertyDescriptor,xt=(s,t,e,i)=>{for(var r=i>1?void 0:i?wi(t,e):t,n=s.length-1,o;n>=0;n--)(o=s[n])&&(r=(i?o(t,e,r):o(r))||r);return i&&r&&_i(t,e,r),r};class R extends w{constructor(){super(),this.status="deactivated",this.addEventListener("environment-created",this.onEnvironmentCreated)}async connectedCallback(){super.connectedCallback(),await this.getGlobalEnvironment()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("environment-created",this.onEnvironmentCreated)}async onEnvironmentCreated(t){this.widget=t.detail.widget,await this.activate(),this.requestUpdate()}async activate(){this.widget&&(await this.widget.activate(),this.status="activated")}async getGlobalEnvironment(){const t=globalThis.widgets;t&&(this.widget=t.applications.find(e=>e.name===this.name),await this.activate())}render(){if(!this.widget||this.status!=="activated")return f;if(this.widget.renderStrategy===A.Trigger){const t=new y;return t.application=this.widget,t}return this.widget.render()}}R.styles=[z`
       :host {
         display: block;
       }

package/index.mjs

@@ -1809,7 +1809,7 @@ const pi = (s) => {
       super.connectedCallback(), this.renderRoot.host.style.setProperty(
         "--width",
         this.layout.size === "full" ? "var(--columns, 1)" : `min(${this.layout.size || "var(--columns)"}, var(--columns))`
-      );
+      ), this.application.mountComponent(this);
     }
   }
   return t.styles = [
@@ -2093,7 +2093,7 @@ class vi {
 }
 class yi {
   constructor(t, e, i, r) {
-    this.name = t, this.container = e, this.settings = i, this.options = r, this.platform = new mi(), this.texts = new vi(), this.renderStrategy = A.Inline, this.autoActivate = !1, this.plugins = [], this.componentResolver = new fe(), this.renderStrategy = this.options.renderStrategy || A.Inline, this.triggerIcon = this.options.triggerIcon, typeof r.autoActivate == "boolean" && (this.autoActivate = r.autoActivate), this.container.register("$settings", i), this.texts.loadTexts(i.texts || {});
+    this.name = t, this.container = e, this.settings = i, this.options = r, this.platform = new mi(), this.texts = new vi(), this.renderStrategy = A.Inline, this.autoActivate = !1, this.plugins = [], this.componentResolver = new fe(), this.components = [], this.renderStrategy = this.options.renderStrategy || A.Inline, this.triggerIcon = this.options.triggerIcon, typeof r.autoActivate == "boolean" && (this.autoActivate = r.autoActivate), this.container.register("$settings", i), this.texts.loadTexts(i.texts || {});
   }
   async activate() {
     if (await this.loadPlugins(), await this.componentResolver.loadComponents(), this.root = this.platform.createComponentModel(this.settings, this), this.container.setState(te.Ready), this.autoActivate) {
@@ -2126,6 +2126,13 @@ class yi {
   resolveComponent(t) {
     return this.componentResolver.getComponent(t);
   }
+  mountComponent(t) {
+    this.components.push(t);
+  }
+  getComponent(t) {
+    const e = this.components.find((i) => i.type === t);
+    return e || null;
+  }
   render() {
     if (this.renderStrategy === A.Trigger) {
       const t = [...Array.from(document.querySelectorAll("ace-trigger"))].length, e = new b();

package/models/application.d.ts

@@ -1,4 +1,5 @@
 import { Trigger } from '../components/trigger.component';
+import { WidgetComponentType } from '../components/widget.component';
 import { Wrapper } from '../components/wrapper.component';
 import { ComponentPlatform } from '../services/component-platform';
 import { TextsService } from '../services/texts.service';
@@ -17,6 +18,7 @@ export declare class Application {
     autoActivate: boolean;
     private plugins;
     private componentResolver;
+    private components;
     constructor(name: string, container: Container, settings: WidgetConfig, options: ApplicationOptions);
     activate(): Promise<void>;
     private loadPlugins;
@@ -27,5 +29,7 @@ export declare class Application {
     hide(): void;
     registerComponent(type: string, component: any): void;
     resolveComponent(type: string): any;
+    mountComponent(component: WidgetComponentType): void;
+    getComponent<T extends WidgetComponentType>(type: string): T | null;
     render(): Trigger | Wrapper | undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-core-flamingo",
-  "version": "1.1.31-rc.0",
+  "version": "1.1.31-rc.1",
   "dependencies": {
     "lit": "^3.0.2",
     "@teliads/icons": "^8.4.0",