@momentum-design/components 0.16.3 → 0.16.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.js +55 -34
- package/dist/browser/index.js.map +3 -3
- package/dist/components/avatarbutton/avatarbutton.styles.js +1 -1
- package/dist/components/buttonsimple/buttonsimple.styles.js +1 -1
- package/dist/components/icon/icon.component.js +2 -2
- package/dist/components/icon/icon.styles.js +4 -0
- package/dist/custom-elements.json +240 -240
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/utils/styles/index.d.ts +1 -1
- package/dist/utils/styles/index.js +58 -28
- package/package.json +1 -1
package/dist/browser/index.js
CHANGED
@@ -35,46 +35,67 @@
|
|
35
35
|
justify-content: center;
|
36
36
|
width: fit-content;
|
37
37
|
}
|
38
|
-
`,Yt=p`
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
38
|
+
`,Yt=(i=!1)=>{let e=p`
|
39
|
+
:host {
|
40
|
+
--mdc-focus-ring-inner-color: var(--mds-color-theme-focus-default-0);
|
41
|
+
--mdc-focus-ring-middle-color: var(--mds-color-theme-focus-default-1);
|
42
|
+
--mdc-focus-ring-outer-color: var(--mds-color-theme-focus-default-2);
|
43
|
+
|
44
|
+
--mdc-focus-ring-inner-width: 0.125rem;
|
45
|
+
--mdc-focus-ring-middle-width: calc(2 * var(--mdc-focus-ring-inner-width));
|
46
|
+
--mdc-focus-ring-outer-width: calc(0.0625rem + var(--mdc-focus-ring-middle-width));
|
47
|
+
|
48
|
+
--mdc-focus-ring-middle-offset: var(--mdc-focus-ring-inner-width);
|
49
|
+
--mdc-focus-ring-outer-offset: calc(var(--mdc-focus-ring-inner-width) + var(--mdc-focus-ring-middle-width));
|
50
|
+
}
|
51
|
+
`,t=p`0 0 0 var(--mdc-focus-ring-inner-width) var(--mdc-focus-ring-inner-color),
|
52
|
+
0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
|
53
|
+
0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color)
|
54
|
+
`;return i?[e,p`
|
55
|
+
.mdc-focus-ring:focus-visible {
|
56
|
+
outline: none;
|
57
|
+
}
|
58
|
+
:host([disabled]) .mdc-focus-ring:focus {
|
59
|
+
box-shadow: none;
|
60
|
+
}
|
61
|
+
.mdc-focus-ring:focus-within {
|
62
|
+
position: relative;
|
63
|
+
box-shadow: ${t};
|
64
|
+
}
|
65
|
+
/* High Contrast Mode */
|
66
|
+
@media (forced-colors: active) {
|
67
|
+
.mdc-focus-ring:focus-within {
|
68
|
+
outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
|
69
|
+
}
|
70
|
+
}
|
71
|
+
`]:[e,p`
|
72
|
+
:host([disabled]:focus) {
|
73
|
+
box-shadow: none;
|
74
|
+
}
|
75
|
+
:host(:focus) {
|
76
|
+
position: relative;
|
77
|
+
box-shadow: ${t};
|
78
|
+
}
|
79
|
+
/* High Contrast Mode */
|
80
|
+
@media (forced-colors: active) {
|
81
|
+
:host(:focus) {
|
82
|
+
outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
|
83
|
+
}
|
84
|
+
}
|
85
|
+
`]};var mo=[_,p`
|
69
86
|
:host {
|
70
87
|
--mdc-icon-fill-color: currentColor;
|
88
|
+
--mdc-icon-computed-size: var(--computed-icon-size);
|
89
|
+
|
90
|
+
height: var(--mdc-icon-computed-size);
|
91
|
+
width: var(--mdc-icon-computed-size);
|
71
92
|
}
|
72
93
|
:host::part(icon) {
|
73
94
|
height: 100%;
|
74
95
|
width: 100%;
|
75
96
|
fill: var(--mdc-icon-fill-color);
|
76
97
|
}
|
77
|
-
`],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.
|
98
|
+
`],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`
|
78
99
|
:host {
|
79
100
|
--mdc-avatar-default-background-color: var(--mds-color-theme-avatar-default);
|
80
101
|
--mdc-avatar-default-foreground-color: var(--mds-color-theme-common-text-primary-normal);
|
@@ -903,7 +924,7 @@
|
|
903
924
|
:host([size="20"]){
|
904
925
|
height: var(--mdc-button-height-size-20);
|
905
926
|
}
|
906
|
-
|
927
|
+
`,...Yt()],Lr=Co;var Or=i=>{class e extends i{constructor(){super(...arguments);this.disabled=!1}}return a([d({reflect:!0,type:Boolean})],e.prototype,"disabled",2),e};var wr=i=>{class e extends i{constructor(){super(...arguments);this.tabIndex=0}}return a([d({reflect:!0,type:Number})],e.prototype,"tabIndex",2),e};var w=class extends wr(Or(h)){constructor(){super();this.active=!1;this.softDisabled=!1;this.size=te.SIZE;this.role=te.ROLE;this.type=te.TYPE;this.prevTabindex=0;this.addEventListener("click",this.executeAction.bind(this)),this.addEventListener("keydown",this.handleKeyDown.bind(this)),this.addEventListener("keyup",this.handleKeyUp.bind(this)),this.internals=this.attachInternals()}get form(){return this.internals.form}update(t){super.update(t),t.has("disabled")&&this.setDisabled(this,this.disabled),t.has("softDisabled")&&this.setSoftDisabled(this,this.softDisabled),t.has("active")&&this.setAriaPressed(this,this.active)}executeAction(){this.type===ct.SUBMIT&&this.internals.form&&this.internals.form.requestSubmit(),this.type===ct.RESET&&this.internals.form&&this.internals.form.reset()}setAriaPressed(t,r){r?t.setAttribute("aria-pressed","true"):t.setAttribute("aria-pressed","false")}setSoftDisabled(t,r){r?t.setAttribute("aria-disabled","true"):t.setAttribute("aria-disabled","false")}setDisabled(t,r){r?(t.setAttribute("aria-disabled","true"),this.prevTabindex=this.tabIndex,this.tabIndex=-1):(this.tabIndex=this.prevTabindex,t.removeAttribute("aria-disabled"))}triggerClickEvent(){let t=new MouseEvent("click",{bubbles:!0,cancelable:!0,view:window});this.dispatchEvent(t),this.executeAction()}handleKeyDown(t){["Enter"," "].includes(t.key)&&(this.classList.add("pressed"),t.key==="Enter"&&this.triggerClickEvent())}handleKeyUp(t){["Enter"," "].includes(t.key)&&(this.classList.remove("pressed"),t.key===" "&&this.triggerClickEvent())}render(){return m`
|
907
928
|
<slot></slot>
|
908
929
|
`}};w.formAssociated=!0,w.styles=[...h.styles,...Lr],a([d({type:Boolean})],w.prototype,"active",2),a([d({type:Boolean,attribute:"soft-disabled"})],w.prototype,"softDisabled",2),a([d({type:Number,reflect:!0})],w.prototype,"size",2),a([d({type:String,reflect:!0})],w.prototype,"role",2),a([d({reflect:!0})],w.prototype,"type",2);var Ce=w;Ce.register(zr);var mt=Ce;var R=class extends mt{constructor(){super(...arguments);this.variant=O.VARIANT;this.size=O.SIZE;this.color=O.COLOR;this.role="button";this.typeInternal=O.TYPE_INTERNAL;this.iconSize=1}update(t){super.update(t),t.has("active")&&this.modifyIconName(this.active),t.has("size")&&this.setSize(this.size),t.has("variant")&&(this.setVariant(this.variant),this.setSize(this.size)),t.has("color")&&this.setColor(this.color),t.has("typeInternal")&&this.setSize(this.size),(t.has("prefixIcon")||t.has("postfixIcon"))&&this.inferButtonType()}modifyIconName(t){t?(this.prefixIcon&&(this.prevPrefixIcon=this.prefixIcon,this.prefixIcon=`${Ne(this.prefixIcon)}-filled`),this.postfixIcon&&(this.prevPostfixIcon=this.postfixIcon,this.postfixIcon=`${Ne(this.postfixIcon)}-filled`)):(this.prevPrefixIcon&&(this.prefixIcon=this.prevPrefixIcon),this.prevPostfixIcon&&(this.postfixIcon=this.prevPostfixIcon))}setVariant(t){this.setAttribute("variant",Object.values(It).includes(t)?t:O.VARIANT)}setSize(t){let o=this.typeInternal===lt.ICON?Object.values(Q).includes(t)&&!(t===Q[20]&&this.variant!==It.TERTIARY):Object.values(ee).includes(t);this.setAttribute("size",o?`${t}`:`${O.SIZE}`),this.iconSize=Rr(t)}setColor(t){!Object.values(Ie).includes(t)||this.variant===It.TERTIARY?this.setAttribute("color",`${O.COLOR}`):this.setAttribute("color",t)}inferButtonType(){var r,o;let t=(o=(r=this.shadowRoot)==null?void 0:r.querySelector("slot"))==null?void 0:o.assignedNodes().length;t&&(this.prefixIcon||this.postfixIcon)?(this.typeInternal=lt.PILL_WITH_ICON,this.setAttribute("data-btn-type","pill-with-icon")):!t&&(this.prefixIcon||this.postfixIcon)?(this.typeInternal=lt.ICON,this.setAttribute("data-btn-type","icon")):(this.typeInternal=lt.PILL,this.setAttribute("data-btn-type","pill"))}render(){return m`
|
909
930
|
${this.prefixIcon?m`
|
@@ -1122,7 +1143,7 @@
|
|
1122
1143
|
outline: none;
|
1123
1144
|
border-radius: 0.25rem;
|
1124
1145
|
}
|
1125
|
-
|
1146
|
+
`,...Yt()],Br=ko;var Lt=class extends Zt(mt){constructor(){super();this.ariaLabel=null;this.active=void 0,this.disabled=void 0,this.softDisabled=void 0,this.role="button",this.type=O.TYPE}update(t){super.update(t),t.has("size")&&this.setSize(this.size)}setSize(t){this.setAttribute("size",Object.values(f).includes(t)?`${t}`:nt.SIZE.toString())}render(){return m`
|
1126
1147
|
<mdc-avatar
|
1127
1148
|
slot="prefixIcon"
|
1128
1149
|
?is-typing="${this.isTyping}"
|