@telia-ace/widget-types-grid 1.2.9-rc.0 → 1.3.0-rc.0

package/index.js

@@ -68,4 +68,4 @@
                 stroke-miterlimit="10" />
             </svg>
           </span>
-          ${s.length?`<span>${s}</span>`:""}`,setTimeout(()=>t&&t.classList.add("humany-rendered")),De(t)}function Le(t,n){t instanceof HTMLElement?(n&&t.setAttribute("title",n),t.classList.remove("humany-active"),t.classList.remove("humany-loading")):t instanceof Array&&t.forEach(e=>{n&&e.setAttribute("title",n),e.classList.remove("humany-active"),e.classList.remove("humany-loading")})}function $e(t){t instanceof HTMLElement?(t.classList.remove("humany-active"),t.classList.add("humany-loading")):t instanceof Array&&t.forEach(n=>{n.classList.remove("humany-active"),n.classList.add("humany-loading")})}function X(t,n){t instanceof HTMLElement?(n&&t.setAttribute("title",n),t.classList.add("humany-active"),t.classList.remove("humany-loading")):t instanceof Array&&t.forEach(e=>{n&&e.setAttribute("title",n),e.classList.add("humany-active"),e.classList.remove("humany-loading")})}var $=(t=>(t.Inline="inline",t.Link="link",t.Badge="badge",t.Unsupported="unsupported",t))($||{});const Pe=(t,n)=>t&&n?"both":t?"widgetDOM":n?"triggerDOM":"none",ee=t=>t?typeof t=="boolean"&&t?"link":typeof t=="object"&&!Array.isArray(t)?"badge":"unsupported":"inline",Re=(t,n,e,i,s=!1)=>{var g,h;const o=Pe(n,e),r=ee(i),a={widgetDOMElement:n?n.cloneNode(!0):void 0,triggerDOMElement:e?e.cloneNode(!0):void 0},c={triggerType:r,cachedOriginals:a,widgetDOMElement:document.createElement("div")};switch(o){case"both":{c.widgetDOMElement=n||document.createElement("div"),r!=="inline"&&(c.triggerDOMElement=e);break}case"widgetDOM":{if(c.widgetDOMElement=n||document.createElement("div"),r!=="inline"){const u=document.body.appendChild(document.createElement("a"));r==="link"&&(u.innerText=t),c.triggerDOMElement=u}break}case"triggerDOM":{const u=document.createElement("div");c.widgetDOMElement=u,r==="inline"?(u.id=(e==null?void 0:e.id)||"",s?(u.style.display="none",(g=e==null?void 0:e.parentNode)==null||g.appendChild(u),c.callback=()=>{var m;(m=e==null?void 0:e.parentNode)==null||m.replaceChild(u,e),u.style.display=(e==null?void 0:e.style.display)||"block"}):(h=e==null?void 0:e.parentNode)==null||h.replaceChild(u,e),c.cachedOriginals.widgetDOMElement=e,c.cachedOriginals.triggerDOMElement=void 0):(c.widgetDOMElement=document.body.appendChild(u),c.triggerDOMElement=e);break}case"none":{const u=document.body.appendChild(document.createElement("div"));if(c.widgetDOMElement=u,r!=="inline"){const m=document.body.appendChild(document.createElement("a"));r==="link"&&(m.innerText=t),c.triggerDOMElement=m}break}}return c},ke="modals";class je{constructor(n,e){L(this,"container");L(this,"unsubscribe",[]);var o,r,a,c,g;this.options=e,this.container=n.createChild(this),this.container.register("widgetDOMElement",this.options.widgetDOMElement),this.container.register("triggerDOMElement",this.options.triggerDOMElement);const i=this.container.get("$widget");(o=this.options.widgetDOMElement)==null||o.classList.add("humany-widget"),(r=this.options.widgetDOMElement)==null||r.setAttribute("role","region"),(a=this.options.widgetDOMElement)==null||a.setAttribute("id",`humany_${i.name}`),(c=this.options.triggerDOMElement)==null||c.setAttribute("aria-controls",`humany_${i.name}`),(g=this.options.widgetDOMElement)==null||g.classList.add(`humany_${i.name}`);const s=n.get("widgetDOMElements")||[];n.register("widgetDOMElements",[...s,this.options.widgetDOMElement])}render(){const{widgetDOMElement:n,triggerDOMElement:e}=this.options,i=this.container.get("$widget");return n.getAttribute("data-rendered")==="true"?Promise.resolve():(e&&this.options.triggerType===$.Badge&&$e(e),Promise.resolve().then(()=>require("./render-ec465011.js")).then(s=>s.default(this.container,n)).then(()=>{if(n.setAttribute("data-rendered","true"),e&&this.options.triggerType===$.Badge){const o=this.options.triggerOptions.openTooltip;X(e,o)}M.notifyDataLoaded(this.container,n);const s=this.container.get("$environment").widgets.all();l.readStorage(this.container,ke,l.StorageMedium.Session).then(o=>{o&&o.forEach(r=>{s.find(a=>a.name===r.name&&a.state==="activated")&&i.events.dispatch("widget:modal-opened",r)})})}))}renderBadge(n){const{triggerDOMElement:e}=this.options;if(!e)return;e.getAttribute("role")||e.setAttribute("role","button");const{name:i}=this.container.get("$widget"),{label:s,symbol:o,ariaLabel:r,closedTooltip:a,openTooltip:c}=n,g={closedTooltip:a,openTooltip:c};this.options.triggerOptions=g;const h=Ne(e,{label:s,symbol:o,ariaLabel:r,widgetName:i,tooltip:a});this.unsubscribe.push(h)}dispose(){return Promise.resolve().then(()=>require("./unmount-7ebc3b77.js")).then(n=>{var s,o,r,a;const{triggerDOMElement:e,widgetDOMElement:i}=this.options;n.default(i),this.options.cachedOriginals.widgetDOMElement&&i&&((s=i.parentNode)==null||s.replaceChild(this.options.cachedOriginals.widgetDOMElement,i)),this.options.cachedOriginals.triggerDOMElement&&e&&((o=e.parentNode)==null||o.replaceChild(this.options.cachedOriginals.triggerDOMElement,e)),this.unsubscribe.forEach(c=>{c()}),(r=i.parentNode)==null||r.removeChild(i),(a=e==null?void 0:e.parentNode)==null||a.removeChild(e)})}}const I="changesets",Ve=t=>{const n={tags:t.tags};return t.context&&typeof t.context!="function"&&(n.context=t.context),t.properties&&typeof t.properties!="function"&&(n.properties=t.properties),t.layout&&typeof t.layout!="function"&&(n.layout=t.layout),n};class F{constructor(n,e){this.container=n,this.storageWriter=e}static create(n){return l.createStorageWriter(n,I,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local}).then(e=>new F(n,e))}write(n,e,i,s){return M.lock(this)(()=>l.readStorage(this.container,I,l.StorageMedium.Local).then((o={})=>{const{keys:r=[],items:a={}}=o,c=r.indexOf(n);return c>-1&&r.splice(c,1),r.push(n),a[n]={options:s,attributes:Ve(i),rules:e.rules},this.storageWriter({keys:r,items:a})}))}remove(n){return M.lock(this)(()=>l.readStorage(this.container,I,l.StorageMedium.Local).then((e={})=>{const{keys:i=[],items:s={}}=e,o=i.indexOf(n);if(o>-1)return i.splice(o,1),delete s[n],this.storageWriter(e)}))}load(n){return M.lock(this)(()=>l.readStorage(this.container,I,l.StorageMedium.Local).then((e={})=>{const{keys:i=[],items:s={}}=e;i.forEach(o=>{const r=s[o];if(r){const{rules:a,attributes:c,options:g}=r;n.write({attributes:c,options:g,target:new b.ComponentQuery(n,a)})}})}))}}const We=t=>{const{container:n}=t;return F.create(n).then(e=>{const i=n.get("$settings"),s={localStorage:e},o=new b.ComponentPlatform(t,s),r=b.createComponentModel(o,i);return t.events.subscribe("widget:state-change",(a,c)=>{c.state===Q.WidgetState.Deactivating&&r()}),o})},_e=t=>import("@telia-ace/widget-routing").then(({RoutingService:n,HistoryMode:e})=>t.get("settings").then(i=>{const{routing:{initialPath:s="/",mode:o=e.scopedHash,basePath:r},views:a}=i;return new n(t,{initialPath:s,mode:o,routes:Object.keys(a).map(g=>({name:g,path:a[g].path})),basePath:r})})),Ie=t=>import("@telia-ace/widget-services").then(({StorageProvider:n})=>new n),ze=t=>import("@telia-ace/widget-core").then(({ActionResolver:n})=>new n(t)),qe=t=>import("@telia-ace/widget-core").then(({ComponentResolver:n})=>new n(t)),Be=t=>import("@telia-ace/widget-core").then(({ComponentPlatform:n,createComponentModel:e})=>We(t.get("$widget"))),H="$settings",z="open",Y="activeStickyWidget";class te extends Q.WidgetType{constructor(e){super(e);L(this,"outlets",new Map);L(this,"activated");L(this,"subs",[]);L(this,"handleBootstrapping",e=>{const i={triggerDOMElement:e.sourceDOMElement,withRenderState:"storage"};this.container.get("settings").then(s=>{const{activate:o}=s;(typeof o>"u"||o===null||o===!0)&&(this.activated=(this.activated||this.widget.activate()).then(()=>this.attach(i)))})});this.container.registerAsync("storage",()=>Ie(this.container)),this.container.registerFactory("settings",()=>l.readStorage(this.container,H,l.StorageMedium.Local).then((i={})=>({...this.container.get("$settings"),...i}))),le.supportBootstrapping(this,"load",this.handleBootstrapping),this.container.registerAsync("componentResolver",()=>qe(this.container)),this.container.registerAsync("router",()=>_e(this.container)),this.container.registerAsync("actionResolver",()=>ze(this.container)),this.container.register("matchMedia",window.matchMedia),this.container.registerAsync("components",()=>Be(this.container))}initialize(){const e=this.container.getManyAsync("actionResolver","router","components"),i=this.container.get("csp");return i&&(window.webprovisionsEnvironmentVariables||(window.webprovisionsEnvironmentVariables={}),window.webprovisionsEnvironmentVariables.cspNonce=i.nonce),Promise.all([e,this.container.get("settings")]).then(([{actionResolver:s,router:o,components:r},a])=>{var h;s.subscribe(this.widget.name,(u,m,w)=>this.onAction(m,w));const c=u=>{r.nodes.query({type:"view"}).forEach(m=>{r.setSwitch(m,u)})},g=((h=o.getInitialRoute())==null?void 0:h.name)||"index";return c(g),this.events.subscribe("widget:data-loaded",(u,{element:m})=>{this.widget.container.get("seoConfiguration")&&this.events.dispatch("widget:preloaded-replaced",{element:m})}),this.events.subscribe("router:change",(u,{previous:m={routeData:{}},next:w={routeData:{}}})=>{const{routeData:S}=m,{routeData:p}=w,v=Object.keys(a.views).reduce((C,A)=>typeof a.views[A].path>"u"?A:C,"");!p.name&&v?c(v):c(p.name),M.removeNullAndUndefinedValues(S&&S.params),M.removeNullAndUndefinedValues(p&&p.params),this.container.getAsync("actionResolver").then(C=>{C.action(this.widget.name,"routeChange",{next:p,previous:S})})}),o.initialize()})}attach(e={}){return this.container.get("settings").then(({trigger:i})=>{var w,S;const{widgetDOMElement:s,key:o=M.uuid(),triggerDOMElement:r,withRenderState:a}=e,g=ee(i)===$.Inline&&((r==null?void 0:r.childElementCount)||0)>0,h=Re(this.widget.name,s,r,i,g);this.outlets.size<1&&!a&&this.setRenderState("unset");const u=()=>{const p=()=>v.querySelectorAll("[data-loading=true]").length===0,[v]=this.widget.container.get("widgetDOMElements"),C=(D,x)=>{p()&&(h.callback&&h.callback(),x.disconnect())},A={attributes:!0,subtree:!0,childList:!0};p()&&h.callback&&h.callback(),new MutationObserver(C).observe(v,A)};g&&this.widget.container.getAsync("dataClient").then(({events:p})=>{p.subscribe("data-client:fetched",(v,C)=>{C.unresolvedQueries===0&&u()})});const m=this.getOrCreateViewOutlet(o,h);if(this.outlets.set(o,m),this.widget.events.dispatch("widget:attached",{},{bubbles:!0}),h.triggerType===$.Badge&&i&&((w=h.triggerDOMElement)==null||w.setAttribute("aria-expanded","false"),m==null||m.renderBadge(i)),h.triggerType!==$.Inline&&((S=h.triggerDOMElement)==null||S.addEventListener("click",p=>{p.preventDefault(),this.container.get("settings").then(({trigger:v})=>{m.render().then(()=>this.renderState()).then(C=>v&&v.action&&v.action==="hide"?C===b.WidgetRenderState.open?this.hide():this.open():C===b.WidgetRenderState.open?this.close():this.open())})})),this.outlets.size>1)return this.renderState().then(p=>{this.triggerStateIfApplicable(p)});if(a)return a==="storage"?this.renderState().then(p=>{if(h.triggerType===$.Inline){this.triggerStateIfApplicable("open");return}this.triggerStateIfApplicable(p)}):this.triggerStateIfApplicable(a)})}detach(e){if(e){if(this.outlets.has(e)){const i=this.outlets.get(e);i==null||i.dispose(),this.outlets.delete(e);return}process.env.NODE_ENV!=="production"&&console.warn(`detach(): Could not find View Outlet with key ${e}`);return}this.outlets.forEach(i=>{i.dispose()}),this.outlets.clear()}triggerStateIfApplicable(e){return this.container.getAsync("router").then(i=>{switch(e){case"closed":this.close();break;case"open":this.open();break;case"hidden":this.hide(),i.start();break;default:return}})}getOrCreateViewOutlet(e,i){return this.outlets.has(e)?this.outlets.get(e):new je(this.container,i)}render(e={}){if(process.env.NODE_ENV!=="production"&&console.warn("widget.render() is deprecated. Use widget.attach() instead."),e.open){const i={...e,withRenderState:"open"};return this.attach(i)}return this.attach(e)}activate(e){e!=null&&e.override&&this.setSettings(()=>e.override),e!=null&&e.apiNotificationPriorityBy&&this.container.register("apiNotificationPriorityBy",e.apiNotificationPriorityBy)}setSettings(e){return Promise.all([this.container.get("settings"),l.createStorageWriter(this.container,H,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local})]).then(([i,s])=>Promise.resolve(e(i)).then(o=>s(o).then(()=>{const r={...i,...o};return this.widget.events.dispatch("widget:settings-updated",r),r})))}clearSettings(){return l.createStorageWriter(this.container,H,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local}).then(e=>e()).then(()=>this.container.get("settings")).then(e=>{this.widget.events.dispatch("widget:settings-updated",e)})}action({action:e,value:i}){return this.container.getAsync("actionResolver").then(s=>{s.action(this.widget.name,e,i)})}renderState(){if(ue.onWidgetUrl(this.container))return Promise.resolve(b.WidgetRenderState.open);const e=()=>l.readStorage(this.container,z,l.StorageMedium.Session).then((s=b.WidgetRenderState.closed)=>s),i=()=>l.readStorage(this.container,z,l.StorageMedium.Session).then((s=b.WidgetRenderState.closed)=>s);return this.container.getAsync("router").then(s=>s.isSticky()?i().then(o=>o===b.WidgetRenderState.open?o:e()):e())}hide(){return this.outlets.size<1?(process.env.NODE_ENV!=="production"&&console.warn("hide(): No-op as no view outlets are registered. Invoke the attach() command first."),Promise.resolve()):(this.outlets.forEach(e=>e.render()),this.action({action:"hide"}).then(()=>{this.setTriggerState(!1)}))}open(){return this.outlets.size<1?(process.env.NODE_ENV!=="production"&&console.warn("open(): No-op as no view outlets are registered. Invoke the attach() command first."),Promise.resolve()):(this.outlets.forEach(e=>e.render()),this.action({action:"open"}).then(()=>(this.widget.events.dispatch("tracking:widget-rendered",{}),this.onOpen())))}close(){return this.outlets.size<1?(process.env.NODE_ENV!=="production"&&console.warn("close(): No-op as no view outlets are registered. Invoke the attach() command first."),Promise.resolve()):this.action({action:"close"}).then(()=>{this.widget.events.dispatch("tracking:widget-minimized",{}),this.onClose()})}show(){return process.env.NODE_ENV!=="production"&&console.warn("show(): Command is deprecated and will be removed in the future. Use open() instead."),this.open()}onAction(e,i){switch(e){case"close":case"open":case"hide":const s=e==="open"?b.WidgetRenderState.open:e==="close"?b.WidgetRenderState.closed:b.WidgetRenderState.hidden;return this.setRenderState(s).then(()=>{this.setTriggerState(s===b.WidgetRenderState.open),s!==b.WidgetRenderState.hidden?s===b.WidgetRenderState.open?this.onOpen():this.onClose():this.outlets.forEach(o=>{var r;return(r=o.options.triggerDOMElement)==null?void 0:r.setAttribute("aria-expanded","false")})})}}setRenderState(e){const{invoke:i,events:s}=this.container.get("$widget");return Promise.all([l.createStorageWriter(this.container,z,l.StorageCategory.Necessary,{medium:l.StorageMedium.Session}),l.createStorageWriter(this.container,z,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local,duration:{minutes:5}}),this.container.getAsync("router"),i("renderState")]).then(([o,r,a,c])=>{e==="unset"||!e?(r(),o()):(a.isSticky()&&r(e),o(e)),s.dispatch("widget:render-state-changed",{previous:c,next:e})})}onOpen(){return this.container.getAsync("router").then(e=>(this.outlets.forEach(i=>{var s,o;i.options.triggerDOMElement&&(i.options.triggerDOMElement.setAttribute("aria-expanded","true"),(s=i.options.widgetDOMElement)==null||s.setAttribute("tabindex","-1"),(o=i.options.widgetDOMElement)==null||o.focus())}),e.start()))}onClose(){const e=this.container.getManyAsync("router","components");return(()=>this.container.get("settings").then(s=>{const{activate:o}=this.container.get("$settings");return s.activate!==o?this.setSettings(()=>Promise.resolve({activate:o})):Promise.resolve()}))().then(()=>e).then(({router:s,components:o})=>{const r=o.nodes.visible;return this.outlets.forEach(a=>{var c;return(c=a.options.triggerDOMElement)==null?void 0:c.setAttribute("aria-expanded","false")}),r.filter(a=>a.attributes.properties.animation&&a.attributes.properties.animation!=="none").length?new Promise(a=>{setTimeout(()=>{a(s)},200)}):Promise.resolve(s)}).then(s=>s.stop())}setTriggerState(e){this.outlets.forEach(i=>{const{options:{triggerDOMElement:s,triggerOptions:o}}=i,{openTooltip:r,closedTooltip:a}=o||{};s&&(e?X(s,r):Le(s,a))})}deactivate(){this.subs.forEach(i=>i());const e=[];return this.outlets.forEach(i=>e.push(i.dispose())),l.readStorage(this.container,Y,l.StorageMedium.Local).then(i=>i===this.widget.name?l.createStorageWriter(this.container,Y,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local,scope:l.StorageScope.Implementation}).then(s=>s()).then(()=>Promise.all(e)):Promise.all(e))}}exports.Component=B;exports.DetachedComponent=J;exports.GridWidget=te;exports.NotFound=Me;exports.Widget=te;exports.genericComponentStyling=W;
+          ${s.length?`<span>${s}</span>`:""}`,setTimeout(()=>t&&t.classList.add("humany-rendered")),De(t)}function Le(t,n){t instanceof HTMLElement?(n&&t.setAttribute("title",n),t.classList.remove("humany-active"),t.classList.remove("humany-loading")):t instanceof Array&&t.forEach(e=>{n&&e.setAttribute("title",n),e.classList.remove("humany-active"),e.classList.remove("humany-loading")})}function $e(t){t instanceof HTMLElement?(t.classList.remove("humany-active"),t.classList.add("humany-loading")):t instanceof Array&&t.forEach(n=>{n.classList.remove("humany-active"),n.classList.add("humany-loading")})}function X(t,n){t instanceof HTMLElement?(n&&t.setAttribute("title",n),t.classList.add("humany-active"),t.classList.remove("humany-loading")):t instanceof Array&&t.forEach(e=>{n&&e.setAttribute("title",n),e.classList.add("humany-active"),e.classList.remove("humany-loading")})}var $=(t=>(t.Inline="inline",t.Link="link",t.Badge="badge",t.Unsupported="unsupported",t))($||{});const Pe=(t,n)=>t&&n?"both":t?"widgetDOM":n?"triggerDOM":"none",ee=t=>t?typeof t=="boolean"&&t?"link":typeof t=="object"&&!Array.isArray(t)?"badge":"unsupported":"inline",Re=(t,n,e,i,s=!1)=>{var g,h;const o=Pe(n,e),r=ee(i),a={widgetDOMElement:n?n.cloneNode(!0):void 0,triggerDOMElement:e?e.cloneNode(!0):void 0},c={triggerType:r,cachedOriginals:a,widgetDOMElement:document.createElement("div")};switch(o){case"both":{c.widgetDOMElement=n||document.createElement("div"),r!=="inline"&&(c.triggerDOMElement=e);break}case"widgetDOM":{if(c.widgetDOMElement=n||document.createElement("div"),r!=="inline"){const u=document.body.appendChild(document.createElement("a"));r==="link"&&(u.innerText=t),c.triggerDOMElement=u}break}case"triggerDOM":{const u=document.createElement("div");c.widgetDOMElement=u,r==="inline"?(u.id=(e==null?void 0:e.id)||"",s?(u.style.display="none",(g=e==null?void 0:e.parentNode)==null||g.appendChild(u),c.callback=()=>{var m;(m=e==null?void 0:e.parentNode)==null||m.replaceChild(u,e),u.style.display=(e==null?void 0:e.style.display)||"block"}):(h=e==null?void 0:e.parentNode)==null||h.replaceChild(u,e),c.cachedOriginals.widgetDOMElement=e,c.cachedOriginals.triggerDOMElement=void 0):(c.widgetDOMElement=document.body.appendChild(u),c.triggerDOMElement=e);break}case"none":{const u=document.body.appendChild(document.createElement("div"));if(c.widgetDOMElement=u,r!=="inline"){const m=document.body.appendChild(document.createElement("a"));r==="link"&&(m.innerText=t),c.triggerDOMElement=m}break}}return c},ke="modals";class je{constructor(n,e){L(this,"container");L(this,"unsubscribe",[]);var o,r,a,c,g;this.options=e,this.container=n.createChild(this),this.container.register("widgetDOMElement",this.options.widgetDOMElement),this.container.register("triggerDOMElement",this.options.triggerDOMElement);const i=this.container.get("$widget");(o=this.options.widgetDOMElement)==null||o.classList.add("humany-widget"),(r=this.options.widgetDOMElement)==null||r.setAttribute("role","region"),(a=this.options.widgetDOMElement)==null||a.setAttribute("id",`humany_${i.name}`),(c=this.options.triggerDOMElement)==null||c.setAttribute("aria-controls",`humany_${i.name}`),(g=this.options.widgetDOMElement)==null||g.classList.add(`humany_${i.name}`);const s=n.get("widgetDOMElements")||[];n.register("widgetDOMElements",[...s,this.options.widgetDOMElement])}render(){const{widgetDOMElement:n,triggerDOMElement:e}=this.options,i=this.container.get("$widget");return n.getAttribute("data-rendered")==="true"?Promise.resolve():(e&&this.options.triggerType===$.Badge&&$e(e),Promise.resolve().then(()=>require("./render-ec465011.js")).then(s=>s.default(this.container,n)).then(()=>{if(n.setAttribute("data-rendered","true"),e&&this.options.triggerType===$.Badge){const o=this.options.triggerOptions.openTooltip;X(e,o)}M.notifyDataLoaded(this.container,n);const s=this.container.get("$environment").widgets.all();l.readStorage(this.container,ke,l.StorageMedium.Session).then(o=>{o&&o.forEach(r=>{s.find(a=>a.name===r.name&&a.state==="activated")&&i.events.dispatch("widget:modal-opened",r)})})}))}renderBadge(n){const{triggerDOMElement:e}=this.options;if(!e)return;e.getAttribute("role")||e.setAttribute("role","button");const{name:i}=this.container.get("$widget"),{label:s,symbol:o,ariaLabel:r,closedTooltip:a,openTooltip:c}=n,g={closedTooltip:a,openTooltip:c};this.options.triggerOptions=g;const h=Ne(e,{label:s,symbol:o,ariaLabel:r,widgetName:i,tooltip:a});this.unsubscribe.push(h)}dispose(){return Promise.resolve().then(()=>require("./unmount-7ebc3b77.js")).then(n=>{var s,o,r,a;const{triggerDOMElement:e,widgetDOMElement:i}=this.options;n.default(i),this.options.cachedOriginals.widgetDOMElement&&i&&((s=i.parentNode)==null||s.replaceChild(this.options.cachedOriginals.widgetDOMElement,i)),this.options.cachedOriginals.triggerDOMElement&&e&&((o=e.parentNode)==null||o.replaceChild(this.options.cachedOriginals.triggerDOMElement,e)),this.unsubscribe.forEach(c=>{c()}),(r=i.parentNode)==null||r.removeChild(i),(a=e==null?void 0:e.parentNode)==null||a.removeChild(e)})}}const I="changesets",Ve=t=>{const n={tags:t.tags};return t.context&&typeof t.context!="function"&&(n.context=t.context),t.properties&&typeof t.properties!="function"&&(n.properties=t.properties),t.layout&&typeof t.layout!="function"&&(n.layout=t.layout),n};class F{constructor(n,e){this.container=n,this.storageWriter=e}static create(n){return l.createStorageWriter(n,I,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local}).then(e=>new F(n,e))}write(n,e,i,s){return M.lock(this)(()=>l.readStorage(this.container,I,l.StorageMedium.Local).then((o={})=>{const{keys:r=[],items:a={}}=o,c=r.indexOf(n);return c>-1&&r.splice(c,1),r.push(n),a[n]={options:s,attributes:Ve(i),rules:e.rules},this.storageWriter({keys:r,items:a})}))}remove(n){return M.lock(this)(()=>l.readStorage(this.container,I,l.StorageMedium.Local).then((e={})=>{const{keys:i=[],items:s={}}=e,o=i.indexOf(n);if(o>-1)return i.splice(o,1),delete s[n],this.storageWriter(e)}))}load(n){return M.lock(this)(()=>l.readStorage(this.container,I,l.StorageMedium.Local).then((e={})=>{const{keys:i=[],items:s={}}=e;i.forEach(o=>{const r=s[o];if(r){const{rules:a,attributes:c,options:g}=r;n.write({attributes:c,options:g,target:new b.ComponentQuery(n,a)})}})}))}}const We=t=>{const{container:n}=t;return F.create(n).then(e=>{const i=n.get("$settings"),s={localStorage:e},o=new b.ComponentPlatform(t,s),r=b.createComponentModel(o,i);return t.events.subscribe("widget:state-change",(a,c)=>{c.state===Q.WidgetState.Deactivating&&r()}),o})},_e=t=>import("@telia-ace/widget-routing").then(({RoutingService:n,HistoryMode:e})=>t.get("settings").then(i=>{const{routing:{initialPath:s="/",mode:o=e.scopedHash,basePath:r},views:a}=i;return new n(t,{initialPath:s,mode:o,routes:Object.keys(a).map(g=>({name:g,path:a[g].path})),basePath:r})})),Ie=t=>import("@telia-ace/widget-services").then(({StorageProvider:n})=>new n),ze=t=>import("@telia-ace/widget-core").then(({ActionResolver:n})=>new n(t)),qe=t=>import("@telia-ace/widget-core").then(({ComponentResolver:n})=>new n(t)),Be=t=>import("@telia-ace/widget-core").then(({ComponentPlatform:n,createComponentModel:e})=>We(t.get("$widget"))),H="$settings",z="open",Y="activeStickyWidget";class te extends Q.WidgetType{constructor(e){super(e);L(this,"outlets",new Map);L(this,"activated");L(this,"subs",[]);L(this,"handleBootstrapping",e=>{const i={triggerDOMElement:e.sourceDOMElement,withRenderState:"storage"};this.container.get("settings").then(s=>{const{activate:o}=s;(typeof o>"u"||o===null||o===!0)&&(this.activated=(this.activated||this.widget.activate()).then(()=>this.attach(i)))})});this.container.registerAsync("storage",()=>Ie(this.container)),this.container.registerFactory("settings",()=>l.readStorage(this.container,H,l.StorageMedium.Local).then((i={})=>({...this.container.get("$settings"),...i}))),le.supportBootstrapping(this,"load",this.handleBootstrapping),this.container.registerAsync("componentResolver",()=>qe(this.container)),this.container.registerAsync("router",()=>_e(this.container)),this.container.registerAsync("actionResolver",()=>ze(this.container)),this.container.register("matchMedia",window.matchMedia),this.container.registerAsync("components",()=>Be(this.container))}initialize(){const e=this.container.getManyAsync("actionResolver","router","components"),i=this.container.get("csp");return i&&(window.webprovisionsEnvironmentVariables||(window.webprovisionsEnvironmentVariables={}),window.webprovisionsEnvironmentVariables.cspNonce=i.nonce),Promise.all([e,this.container.get("settings")]).then(([{actionResolver:s,router:o,components:r},a])=>{var h;s.subscribe(this.widget.name,(u,m,w)=>this.onAction(m,w));const c=u=>{r.nodes.query({type:"view"}).forEach(m=>{r.setSwitch(m,u)})},g=((h=o.getInitialRoute())==null?void 0:h.name)||"index";return c(g),this.events.subscribe("widget:data-loaded",(u,{element:m})=>{this.widget.container.get("seoConfiguration")&&this.events.dispatch("widget:preloaded-replaced",{element:m})}),this.events.subscribe("router:change",(u,{previous:m={routeData:{}},next:w={routeData:{}}})=>{const{routeData:S}=m,{routeData:p}=w,v=Object.keys(a.views).reduce((C,A)=>typeof a.views[A].path>"u"?A:C,"");!p.name&&v?c(v):c(p.name),M.removeNullAndUndefinedValues(S&&S.params),M.removeNullAndUndefinedValues(p&&p.params),this.container.getAsync("actionResolver").then(C=>{C.action(this.widget.name,"routeChange",{next:p,previous:S})})}),o.initialize()})}attach(e={}){return this.container.get("settings").then(({trigger:i})=>{var w,S;const{widgetDOMElement:s,key:o=M.uuid(),triggerDOMElement:r,withRenderState:a}=e,g=ee(i)===$.Inline&&((r==null?void 0:r.childElementCount)||0)>0,h=Re(this.widget.name,s,r,i,g);this.outlets.size<1&&!a&&this.setRenderState("unset");const u=()=>{const p=()=>v.querySelectorAll("[data-loading=true]").length===0,[v]=this.widget.container.get("widgetDOMElements"),C=(D,x)=>{p()&&(h.callback&&h.callback(),x.disconnect())},A={attributes:!0,subtree:!0,childList:!0};p()&&h.callback&&h.callback(),new MutationObserver(C).observe(v,A)};g&&this.widget.container.getAsync("dataClient").then(({events:p})=>{p.subscribe("data-client:fetched",(v,C)=>{C.unresolvedQueries===0&&u()})});const m=this.getOrCreateViewOutlet(o,h);if(this.outlets.set(o,m),this.widget.events.dispatch("widget:attached",{},{bubbles:!0}),h.triggerType===$.Badge&&i&&((w=h.triggerDOMElement)==null||w.setAttribute("aria-expanded","false"),m==null||m.renderBadge(i)),h.triggerType!==$.Inline&&((S=h.triggerDOMElement)==null||S.addEventListener("click",p=>{p.preventDefault(),this.container.get("settings").then(({trigger:v})=>{m.render().then(()=>this.renderState()).then(C=>v&&v.action&&v.action==="hide"?C===b.WidgetRenderState.open?this.hide():this.open():C===b.WidgetRenderState.open?this.close():this.open())})})),this.outlets.size>1)return this.renderState().then(p=>{this.triggerStateIfApplicable(p)});if(a)return a==="storage"?this.renderState().then(p=>{if(h.triggerType===$.Inline){this.triggerStateIfApplicable("open");return}this.triggerStateIfApplicable(p)}):this.triggerStateIfApplicable(a)})}detach(e){if(e){if(this.outlets.has(e)){const i=this.outlets.get(e);i==null||i.dispose(),this.outlets.delete(e);return}process.env.NODE_ENV!=="production"&&console.warn(`detach(): Could not find View Outlet with key ${e}`);return}this.outlets.forEach(i=>{i.dispose()}),this.outlets.clear()}triggerStateIfApplicable(e){return this.container.getAsync("router").then(i=>{switch(e){case"closed":this.close();break;case"open":this.open();break;case"hidden":this.hide(),i.start();break;default:return}})}getOrCreateViewOutlet(e,i){return this.outlets.has(e)?this.outlets.get(e):new je(this.container,i)}render(e={}){if(process.env.NODE_ENV!=="production"&&console.warn("widget.render() is deprecated. Use widget.attach() instead."),e.open){const i={...e,withRenderState:"open"};return this.attach(i)}return this.attach(e)}activate(e){e!=null&&e.override&&this.setSettings(()=>e.override),e!=null&&e.apiNotificationPriorityBy&&this.container.register("apiNotificationPriorityBy",e.apiNotificationPriorityBy)}setSettings(e){return Promise.all([this.container.get("settings"),l.createStorageWriter(this.container,H,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local})]).then(([i,s])=>Promise.resolve(e(i)).then(o=>s(o).then(()=>{const r={...i,...o};return this.widget.events.dispatch("widget:settings-updated",r),r})))}clearSettings(){return l.createStorageWriter(this.container,H,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local}).then(e=>e()).then(()=>this.container.get("settings")).then(e=>{this.widget.events.dispatch("widget:settings-updated",e)})}action({action:e,value:i}){return this.container.getAsync("actionResolver").then(s=>{s.action(this.widget.name,e,i)})}renderState(){if(ue.onWidgetUrl(this.container))return Promise.resolve(b.WidgetRenderState.open);const e=()=>l.readStorage(this.container,z,l.StorageMedium.Session).then((s=b.WidgetRenderState.closed)=>s),i=()=>l.readStorage(this.container,z,l.StorageMedium.Session).then((s=b.WidgetRenderState.closed)=>s);return this.container.getAsync("router").then(s=>s.isSticky()?i().then(o=>o===b.WidgetRenderState.open?o:e()):e())}hide(){return this.outlets.size<1?(process.env.NODE_ENV!=="production"&&console.warn("hide(): No-op as no view outlets are registered. Invoke the attach() command first."),Promise.resolve()):(this.outlets.forEach(e=>e.render()),this.action({action:"hide"}).then(()=>{this.setTriggerState(!1)}))}open(){return this.outlets.size<1?(process.env.NODE_ENV!=="production"&&console.warn("open(): No-op as no view outlets are registered. Invoke the attach() command first."),Promise.resolve()):(this.outlets.forEach(e=>e.render()),this.action({action:"open"}).then(()=>(this.widget.events.dispatch("tracking:widget-rendered",{}),this.onOpen())))}close(){return this.outlets.size<1?(process.env.NODE_ENV!=="production"&&console.warn("close(): No-op as no view outlets are registered. Invoke the attach() command first."),Promise.resolve()):this.action({action:"close"}).then(()=>{this.widget.events.dispatch("tracking:widget-minimized",{}),this.onClose()})}show(){return process.env.NODE_ENV!=="production"&&console.warn("show(): Command is deprecated and will be removed in the future. Use open() instead."),this.open()}onAction(e,i){switch(e){case"close":case"open":case"hide":const s=e==="open"?b.WidgetRenderState.open:e==="close"?b.WidgetRenderState.closed:b.WidgetRenderState.hidden;return this.setRenderState(s).then(()=>{this.setTriggerState(s===b.WidgetRenderState.open),s!==b.WidgetRenderState.hidden?s===b.WidgetRenderState.open?this.onOpen():this.onClose():this.outlets.forEach(o=>{var r;return(r=o.options.triggerDOMElement)==null?void 0:r.setAttribute("aria-expanded","false")})})}}setRenderState(e){const{invoke:i,events:s}=this.container.get("$widget");return Promise.all([l.createStorageWriter(this.container,z,l.StorageCategory.Necessary,{medium:l.StorageMedium.Session}),l.createStorageWriter(this.container,z,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local,duration:{minutes:5}}),this.container.getAsync("router"),i("renderState")]).then(([o,r,a,c])=>{e==="unset"||!e?(r(),o()):(a.isSticky()&&r(e),o(e)),s.dispatch("widget:render-state-changed",{previous:c,next:e})})}onOpen(){return this.container.getAsync("router").then(e=>(this.outlets.forEach(i=>{i.options.triggerDOMElement&&i.options.triggerDOMElement.setAttribute("aria-expanded","true")}),e.start()))}onClose(){const e=this.container.getManyAsync("router","components");return(()=>this.container.get("settings").then(s=>{const{activate:o}=this.container.get("$settings");return s.activate!==o?this.setSettings(()=>Promise.resolve({activate:o})):Promise.resolve()}))().then(()=>e).then(({router:s,components:o})=>{const r=o.nodes.visible;return this.outlets.forEach(a=>{var c;return(c=a.options.triggerDOMElement)==null?void 0:c.setAttribute("aria-expanded","false")}),r.filter(a=>a.attributes.properties.animation&&a.attributes.properties.animation!=="none").length?new Promise(a=>{setTimeout(()=>{a(s)},200)}):Promise.resolve(s)}).then(s=>s.stop())}setTriggerState(e){this.outlets.forEach(i=>{const{options:{triggerDOMElement:s,triggerOptions:o}}=i,{openTooltip:r,closedTooltip:a}=o||{};s&&(e?X(s,r):Le(s,a))})}deactivate(){this.subs.forEach(i=>i());const e=[];return this.outlets.forEach(i=>e.push(i.dispose())),l.readStorage(this.container,Y,l.StorageMedium.Local).then(i=>i===this.widget.name?l.createStorageWriter(this.container,Y,l.StorageCategory.Necessary,{medium:l.StorageMedium.Local,scope:l.StorageScope.Implementation}).then(s=>s()).then(()=>Promise.all(e)):Promise.all(e))}}exports.Component=B;exports.DetachedComponent=J;exports.GridWidget=te;exports.NotFound=Me;exports.Widget=te;exports.genericComponentStyling=W;

package/index.mjs

@@ -4,7 +4,7 @@ var x = (e, n, t) => (ht(e, typeof n != "symbol" ? n + "" : n, t), t);
 import { jsx as m } from "react/jsx-runtime";
 import { css as nt, ThemeProvider as pt, useTheme as mt } from "@emotion/react";
 import { asDescriptor as X, ComponentPlatform as ft, createComponentModel as gt, ComponentQuery as bt, WidgetRenderState as O } from "@telia-ace/widget-core";
-import { Grid as it, useRouteData as yt, useRouter as wt, useProperties as st, useContext as Y, useContainer as z, useComponentNode as q, useScroll as ot, transitionComposer as vt, paddedBorderTabStyle as Ot, useComponent as Ct, useComponentDescriptor as Et, filterCssPropsStyle as At, Typography as St, useComponentPlatform as rt, useIsMounted as Dt, useColumns as Mt, useLayout as xt, ComponentNodeContext as Nt, ComponentPropertyContext as Lt, filterCssProps as $t } from "@telia-ace/widget-ui";
+import { Grid as it, useRouteData as yt, useRouter as wt, useProperties as st, useContext as Y, useContainer as z, useComponentNode as q, useScroll as ot, transitionComposer as vt, paddedBorderTabStyle as Ot, useComponent as Ct, useComponentDescriptor as Et, filterCssPropsStyle as St, Typography as At, useComponentPlatform as rt, useIsMounted as Dt, useColumns as Mt, useLayout as xt, ComponentNodeContext as Nt, ComponentPropertyContext as Lt, filterCssProps as $t } from "@telia-ace/widget-ui";
 import Q, { useState as _, forwardRef as at, useMemo as Pt, Suspense as kt, useEffect as I } from "react";
 import L from "@emotion/styled";
 import { appendClassNames as j, notifyDataLoaded as Rt, lock as H, removeNullAndUndefinedValues as tt, uuid as Vt } from "@telia-ace/widget-utilities";
@@ -56,15 +56,15 @@ const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[
     animation: b = "none",
     scrollable: d = !1,
     ...g
-  } = c, [y, A] = ot(d);
+  } = c, [y, S] = ot(d);
   if (!l || !a)
     return null;
   const { location: R } = a;
   r.name !== t && r.name !== "" && b && (o(
     Ht(t, r.name, Ut)
   ), i(r.name));
-  const { views: S } = u.get("$settings");
-  if (!Object.keys(S).length)
+  const { views: A } = u.get("$settings");
+  if (!Object.keys(A).length)
     return null;
   const C = (w, M, $) => {
     const E = W(M, $), V = l.getChildren(w)[0];
@@ -74,7 +74,7 @@ const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[
         ...n,
         ...g,
         scrollableCss: y,
-        ref: A,
+        ref: S,
         columns: f,
         gap: h,
         ...E,
@@ -108,7 +108,7 @@ const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[
           children: (w, { direction: M }) => /* @__PURE__ */ m(
             ct,
             {
-              views: S,
+              views: A,
               location: R,
               render: ($) => C($, w, M)
             }
@@ -196,7 +196,7 @@ const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[
   ({ className: e = "", children: n, ...t }, i) => {
     const s = Ct(), { name: o, type: r, id: a } = Et(), c = Pt(() => s ? L(s)`
           ${G}
-          ${At}
+          ${St}
         ` : null, [s]);
     return typeof s > "u" ? null : s === null || c === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ m(
       Xt,
@@ -207,7 +207,7 @@ const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[
           e,
           "humany-non-resolved-component"
         ),
-        children: /* @__PURE__ */ m(St, { variant: "h5", children: "Non Resolved Component Type" })
+        children: /* @__PURE__ */ m(At, { variant: "h5", children: "Non Resolved Component Type" })
       }
     ) : null : /* @__PURE__ */ m(kt, { fallback: null, children: /* @__PURE__ */ m(
       c,
@@ -251,12 +251,12 @@ const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[
     context: r,
     ...a
   }, c) => {
-    const p = rt(), u = z(), [l, h] = _(), f = Mt(), b = Y(n), d = ee(n), { size: g = "none", indent: y = 0 } = xt(n), A = ne(g, i);
+    const p = rt(), u = z(), [l, h] = _(), f = Mt(), b = Y(n), d = ee(n), { size: g = "none", indent: y = 0 } = xt(n), S = ne(g, i);
     if (I(() => {
       if (p) {
         if (n && !i) {
           const E = p.nodes.get(n);
-          if (E && (h(X(E, t)), A)) {
+          if (E && (h(X(E, t)), S)) {
             const V = E.mount(u);
             return () => {
               V();
@@ -270,10 +270,10 @@ const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[
           };
         }
       }
-    }, [p, n, i, A]), !l || !A)
+    }, [p, n, i, S]), !l || !S)
       return null;
     const R = { ...b, ...r || {} }, {
-      cardinal: S,
+      cardinal: A,
       fonts: C = {},
       accessibility: W = {},
       ...w
@@ -292,12 +292,12 @@ const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[
         ...W
       }
     };
-    return typeof S == "number" && ($.sizes = {
-      cardinal: S,
-      small: `${S}px`,
-      normal: `${S * 3}px`,
-      medium: `${S * 5}px`,
-      large: `${S * 8}px`
+    return typeof A == "number" && ($.sizes = {
+      cardinal: A,
+      small: `${A}px`,
+      normal: `${A * 3}px`,
+      medium: `${A * 5}px`,
+      large: `${A * 8}px`
     }), /* @__PURE__ */ m(pt, { theme: $, children: /* @__PURE__ */ m(Nt.Provider, { value: l, children: /* @__PURE__ */ m(Lt.Provider, { value: d, children: (() => {
       const E = {
         "data-width": g === "full" ? f : Math.min(g, f),
@@ -756,7 +756,7 @@ class Ie extends Wt {
           "router:change",
           (l, { previous: h = { routeData: {} }, next: f = { routeData: {} } }) => {
             const { routeData: b } = h, { routeData: d } = f, g = Object.keys(a.views).reduce(
-              (y, A) => typeof a.views[A].path > "u" ? A : y,
+              (y, S) => typeof a.views[S].path > "u" ? S : y,
               ""
             );
             !d.name && g ? c(g) : c(d.name), tt(b && b.params), tt(d && d.params), this.container.getAsync("actionResolver").then((y) => {
@@ -787,14 +787,14 @@ class Ie extends Wt {
       );
       this.outlets.size < 1 && !a && this.setRenderState("unset");
       const l = () => {
-        const d = () => g.querySelectorAll("[data-loading=true]").length === 0, [g] = this.widget.container.get("widgetDOMElements"), y = (S, C) => {
+        const d = () => g.querySelectorAll("[data-loading=true]").length === 0, [g] = this.widget.container.get("widgetDOMElements"), y = (A, C) => {
           d() && (u.callback && u.callback(), C.disconnect());
-        }, A = {
+        }, S = {
           attributes: !0,
           subtree: !0,
           childList: !0
         };
-        d() && u.callback && u.callback(), new MutationObserver(y).observe(g, A);
+        d() && u.callback && u.callback(), new MutationObserver(y).observe(g, S);
       };
       p && this.widget.container.getAsync("dataClient").then(({ events: d }) => {
         d.subscribe(
@@ -1003,11 +1003,10 @@ class Ie extends Wt {
   }
   onOpen() {
     return this.container.getAsync("router").then((t) => (this.outlets.forEach((i) => {
-      var s, o;
-      i.options.triggerDOMElement && (i.options.triggerDOMElement.setAttribute(
+      i.options.triggerDOMElement && i.options.triggerDOMElement.setAttribute(
         "aria-expanded",
         "true"
-      ), (s = i.options.widgetDOMElement) == null || s.setAttribute("tabindex", "-1"), (o = i.options.widgetDOMElement) == null || o.focus());
+      );
     }), t.start()));
   }
   onClose() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-types-grid",
-  "version": "1.2.9-rc.0",
+  "version": "1.3.0-rc.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -10,11 +10,11 @@
     }
   },
   "dependencies": {
-    "@telia-ace/widget-core": "^1.2.9-rc.0",
-    "@telia-ace/widget-routing": "^1.2.9-rc.0",
-    "@telia-ace/widget-services": "^1.2.9-rc.0",
-    "@telia-ace/widget-ui": "^1.2.9-rc.0",
-    "@telia-ace/widget-utilities": "^1.2.9-rc.0",
+    "@telia-ace/widget-core": "^1.3.0-rc.0",
+    "@telia-ace/widget-routing": "^1.3.0-rc.0",
+    "@telia-ace/widget-services": "^1.3.0-rc.0",
+    "@telia-ace/widget-ui": "^1.3.0-rc.0",
+    "@telia-ace/widget-utilities": "^1.3.0-rc.0",
     "@webprovisions/bootstrapping": "^1.0.14",
     "@webprovisions/platform": "^1.1.4"
   },