@momentum-design/components 0.16.4 → 0.16.6

package/dist/browser/index.js

@@ -85,13 +85,17 @@
     `]};var mo=[_,p`
     :host {
       --mdc-icon-fill-color: currentColor;
+      --mdc-icon-computed-size: var(--computed-icon-size);
+
+      height: var(--mdc-icon-computed-size);
+      width: var(--mdc-icon-computed-size);
     }
     :host::part(icon) {
       height: 100%;
       width: 100%;
       fill: var(--mdc-icon-fill-color);
     }
-  `],dr=mo;var po=i=>{let{host:e,context:t,subscribe:r}=i;return new rt(e,{context:t,subscribe:r!=null?r:!0})},ho={consume:po},cr=ho;var Xt=u.constructTagName("iconprovider"),lr=["svg"],mr=["em","rem","px"],uo={px:16,em:1,rem:1},V={FILE_EXTENSION:"svg",LENGTH_UNIT:"em",SIZE:uo.em};var qt=class{};qt.context=Xt;var jt=qt;var W=class extends it{constructor(){super({context:jt.context,initialValue:new jt});this.fileExtension=V.FILE_EXTENSION;this.lengthUnit=V.LENGTH_UNIT;this.size=V.SIZE}static get Context(){return jt.context}updateValuesInContext(){this.fileExtension&&lr.includes(this.fileExtension)?this.context.value.fileExtension=this.fileExtension:(this.fileExtension=V.FILE_EXTENSION,this.context.value.fileExtension=V.FILE_EXTENSION),this.context.value.url=this.url,this.context.value.size=this.size,this.lengthUnit&&mr.includes(this.lengthUnit)?this.context.value.lengthUnit=this.lengthUnit:(this.lengthUnit=V.LENGTH_UNIT,this.context.value.lengthUnit=V.LENGTH_UNIT)}updateContext(){(this.context.value.fileExtension!==this.fileExtension||this.context.value.url!==this.url||this.context.value.lengthUnit!==this.lengthUnit||this.context.value.size!==this.size)&&(this.updateValuesInContext(),this.context.updateObservers())}};a([d({type:String})],W.prototype,"url",2),a([d({type:String,attribute:"file-extension",reflect:!0})],W.prototype,"fileExtension",2),a([d({type:String,attribute:"length-unit",reflect:!0})],W.prototype,"lengthUnit",2),a([d({type:Number,reflect:!0})],W.prototype,"size",2);var Et=W;var pr=async(i,e,t,r)=>{let o=await fetch(`${i}/${e}.${t}`,{signal:r});if(!o.ok)throw new Error("There was a problem while fetching the icon!");let n=await o.text(),s=new DOMParser().parseFromString(n,"text/html").body.children[0];return s.setAttribute("data-name",e),s.setAttribute("part","icon"),s};var hr=u.constructTagName("icon"),ye={NAME:void 0,SIZE:1};var N=class extends h{constructor(){super();this.name=ye.NAME;this.ariaLabel=null;this.iconProviderContext=cr.consume({host:this,context:Et.Context});this.abortController=new AbortController}triggerIconLoaded(){let t=new Event("load",{bubbles:!0,cancelable:!0});this.dispatchEvent(t)}async getIconData(){if(this.iconProviderContext.value){let{fileExtension:t,url:r}=this.iconProviderContext.value;if(r&&t&&this.name){this.abortController.abort(),this.abortController=new AbortController;try{let o=await pr(r,this.name,t,this.abortController.signal);this.handleIconLoadedSuccess(o)}catch(o){this.handleIconLoadedFailure(o)}}}}handleIconLoadedSuccess(t){this.iconData=t,this.setRoleOnIcon(),this.setAriaLabelOnIcon(),this.setAriaHiddenOnIcon(),this.triggerIconLoaded()}handleIconLoadedFailure(t){let r=new CustomEvent("error",{bubbles:!0,cancelable:!0,detail:{error:t}});this.dispatchEvent(r)}updateSize(){var t;if(this.computedIconSize&&(this.lengthUnit||this.lengthUnitFromContext)){let r=`${this.computedIconSize}${(t=this.lengthUnit)!=null?t:this.lengthUnitFromContext}`;this.style.width=r,this.style.height=r}}setRoleOnIcon(){this.role=this.ariaLabel?"img":null}setAriaHiddenOnIcon(){var t;(t=this.iconData)==null||t.setAttribute("aria-hidden","true")}setAriaLabelOnIcon(){var t,r;this.ariaLabel?(t=this.iconData)==null||t.setAttribute("aria-label",this.ariaLabel):(r=this.iconData)==null||r.removeAttribute("aria-label")}get computedIconSize(){var t,r;return(r=(t=this.size)!=null?t:this.sizeFromContext)!=null?r:ye.SIZE}updated(t){var r,o,n,s;super.updated(t),t.has("name")&&this.getIconData().catch(c=>{c.name!=="AbortError"&&this.onerror&&this.onerror(c)}),t.has("ariaLabel")&&(this.setRoleOnIcon(),this.setAriaLabelOnIcon()),(t.has("size")||t.has("lengthUnit"))&&this.updateSize(),this.lengthUnitFromContext!==((r=this.iconProviderContext.value)==null?void 0:r.lengthUnit)&&(this.lengthUnitFromContext=(o=this.iconProviderContext.value)==null?void 0:o.lengthUnit,this.updateSize()),this.sizeFromContext!==((n=this.iconProviderContext.value)==null?void 0:n.size)&&(this.sizeFromContext=(s=this.iconProviderContext.value)==null?void 0:s.size,this.updateSize())}render(){return m` ${this.iconData} `}};N.styles=[...h.styles,...dr],a([T()],N.prototype,"iconData",2),a([T()],N.prototype,"lengthUnitFromContext",2),a([T()],N.prototype,"sizeFromContext",2),a([d({type:String,reflect:!0})],N.prototype,"name",2),a([d({type:Number})],N.prototype,"size",2),a([d({type:String,attribute:"length-unit"})],N.prototype,"lengthUnit",2),a([d({type:String,attribute:"aria-label"})],N.prototype,"ariaLabel",2),a([T()],N.prototype,"abortController",2);var xe=N;xe.register(hr);var go=xe;Et.register(Xt);var fo=Et;var C=i=>i!=null?i:g;var ur=u.constructTagName("avatar"),A={COUNTER:"counter",ICON:"icon",PHOTO:"photo",TEXT:"text"},Ee=99,bo="user-regular",f={24:24,32:32,48:48,64:64,72:72,88:88,124:124},nt={TYPE:A.PHOTO,SIZE:f[32],ICON_NAME:bo};var Zt=i=>{class e extends i{constructor(){super(...arguments);this.size=nt.SIZE;this.isTyping=!1}}return a([d({type:String})],e.prototype,"src",2),a([d({type:String})],e.prototype,"initials",2),a([d({type:String})],e.prototype,"presence",2),a([d({type:Number,reflect:!0,attribute:"size"})],e.prototype,"size",2),a([d({type:String,attribute:"icon-name"})],e.prototype,"iconName",2),a([d({type:Number})],e.prototype,"counter",2),a([d({type:Boolean,attribute:"is-typing"})],e.prototype,"isTyping",2),e};var vo=[_,p`
+  `],dr=mo;var po=i=>{let{host:e,context:t,subscribe:r}=i;return new rt(e,{context:t,subscribe:r!=null?r:!0})},ho={consume:po},cr=ho;var Xt=u.constructTagName("iconprovider"),lr=["svg"],mr=["em","rem","px"],uo={px:16,em:1,rem:1},V={FILE_EXTENSION:"svg",LENGTH_UNIT:"em",SIZE:uo.em};var qt=class{};qt.context=Xt;var jt=qt;var W=class extends it{constructor(){super({context:jt.context,initialValue:new jt});this.fileExtension=V.FILE_EXTENSION;this.lengthUnit=V.LENGTH_UNIT;this.size=V.SIZE}static get Context(){return jt.context}updateValuesInContext(){this.fileExtension&&lr.includes(this.fileExtension)?this.context.value.fileExtension=this.fileExtension:(this.fileExtension=V.FILE_EXTENSION,this.context.value.fileExtension=V.FILE_EXTENSION),this.context.value.url=this.url,this.context.value.size=this.size,this.lengthUnit&&mr.includes(this.lengthUnit)?this.context.value.lengthUnit=this.lengthUnit:(this.lengthUnit=V.LENGTH_UNIT,this.context.value.lengthUnit=V.LENGTH_UNIT)}updateContext(){(this.context.value.fileExtension!==this.fileExtension||this.context.value.url!==this.url||this.context.value.lengthUnit!==this.lengthUnit||this.context.value.size!==this.size)&&(this.updateValuesInContext(),this.context.updateObservers())}};a([d({type:String})],W.prototype,"url",2),a([d({type:String,attribute:"file-extension",reflect:!0})],W.prototype,"fileExtension",2),a([d({type:String,attribute:"length-unit",reflect:!0})],W.prototype,"lengthUnit",2),a([d({type:Number,reflect:!0})],W.prototype,"size",2);var Et=W;var pr=async(i,e,t,r)=>{let o=await fetch(`${i}/${e}.${t}`,{signal:r});if(!o.ok)throw new Error("There was a problem while fetching the icon!");let n=await o.text(),s=new DOMParser().parseFromString(n,"text/html").body.children[0];return s.setAttribute("data-name",e),s.setAttribute("part","icon"),s};var hr=u.constructTagName("icon"),ye={NAME:void 0,SIZE:1};var N=class extends h{constructor(){super();this.name=ye.NAME;this.ariaLabel=null;this.iconProviderContext=cr.consume({host:this,context:Et.Context});this.abortController=new AbortController}triggerIconLoaded(){let t=new Event("load",{bubbles:!0,cancelable:!0});this.dispatchEvent(t)}async getIconData(){if(this.iconProviderContext.value){let{fileExtension:t,url:r}=this.iconProviderContext.value;if(r&&t&&this.name){this.abortController.abort(),this.abortController=new AbortController;try{let o=await pr(r,this.name,t,this.abortController.signal);this.handleIconLoadedSuccess(o)}catch(o){this.handleIconLoadedFailure(o)}}}}handleIconLoadedSuccess(t){this.iconData=t,this.setRoleOnIcon(),this.setAriaLabelOnIcon(),this.setAriaHiddenOnIcon(),this.triggerIconLoaded()}handleIconLoadedFailure(t){let r=new CustomEvent("error",{bubbles:!0,cancelable:!0,detail:{error:t}});this.dispatchEvent(r)}updateSize(){var t;if(this.computedIconSize&&(this.lengthUnit||this.lengthUnitFromContext)){let r=`${this.computedIconSize}${(t=this.lengthUnit)!=null?t:this.lengthUnitFromContext}`;this.style.setProperty("--computed-icon-size",r)}}setRoleOnIcon(){this.role=this.ariaLabel?"img":null}setAriaHiddenOnIcon(){var t;(t=this.iconData)==null||t.setAttribute("aria-hidden","true")}setAriaLabelOnIcon(){var t,r;this.ariaLabel?(t=this.iconData)==null||t.setAttribute("aria-label",this.ariaLabel):(r=this.iconData)==null||r.removeAttribute("aria-label")}get computedIconSize(){var t,r;return(r=(t=this.size)!=null?t:this.sizeFromContext)!=null?r:ye.SIZE}updated(t){var r,o,n,s;super.updated(t),t.has("name")&&this.getIconData().catch(c=>{c.name!=="AbortError"&&this.onerror&&this.onerror(c)}),t.has("ariaLabel")&&(this.setRoleOnIcon(),this.setAriaLabelOnIcon()),(t.has("size")||t.has("lengthUnit"))&&this.updateSize(),this.lengthUnitFromContext!==((r=this.iconProviderContext.value)==null?void 0:r.lengthUnit)&&(this.lengthUnitFromContext=(o=this.iconProviderContext.value)==null?void 0:o.lengthUnit,this.updateSize()),this.sizeFromContext!==((n=this.iconProviderContext.value)==null?void 0:n.size)&&(this.sizeFromContext=(s=this.iconProviderContext.value)==null?void 0:s.size,this.updateSize())}render(){return m` ${this.iconData} `}};N.styles=[...h.styles,...dr],a([T()],N.prototype,"iconData",2),a([T()],N.prototype,"lengthUnitFromContext",2),a([T()],N.prototype,"sizeFromContext",2),a([d({type:String,reflect:!0})],N.prototype,"name",2),a([d({type:Number})],N.prototype,"size",2),a([d({type:String,attribute:"length-unit"})],N.prototype,"lengthUnit",2),a([d({type:String,attribute:"aria-label"})],N.prototype,"ariaLabel",2),a([T()],N.prototype,"abortController",2);var xe=N;xe.register(hr);var go=xe;Et.register(Xt);var fo=Et;var C=i=>i!=null?i:g;var ur=u.constructTagName("avatar"),A={COUNTER:"counter",ICON:"icon",PHOTO:"photo",TEXT:"text"},Ee=99,bo="user-regular",f={24:24,32:32,48:48,64:64,72:72,88:88,124:124},nt={TYPE:A.PHOTO,SIZE:f[32],ICON_NAME:bo};var Zt=i=>{class e extends i{constructor(){super(...arguments);this.size=nt.SIZE;this.isTyping=!1}}return a([d({type:String})],e.prototype,"src",2),a([d({type:String})],e.prototype,"initials",2),a([d({type:String})],e.prototype,"presence",2),a([d({type:Number,reflect:!0,attribute:"size"})],e.prototype,"size",2),a([d({type:String,attribute:"icon-name"})],e.prototype,"iconName",2),a([d({type:Number})],e.prototype,"counter",2),a([d({type:Boolean,attribute:"is-typing"})],e.prototype,"isTyping",2),e};var vo=[_,p`
   :host {
     --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-default);
     --mdc-avatar-default-foreground-color: var(--mds-color-theme-common-text-primary-normal);