@momentum-design/components 0.8.3 → 0.9.0
Sign up to get free protection for your applications and to get access to all the features.
package/dist/browser/index.js
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
font-weight: var(--mdc-themeprovider-font-weight);
|
|
28
28
|
letter-spacing: var(--mdc-themeprovider-letter-spacing-adjustment);
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
`,Nt=[cr];var F=class extends Y{constructor(){super({context:Ee.context,initialValue:new Ee(Me.THEMECLASS)});this.themeclass=Me.THEMECLASS}static get Context(){return Ee.context}updated(t){super.updated(t),t.has("themeclass")&&(this.setThemeInClassList(),this.currentThemeClass=this.themeclass)}updateContext(){this.context.value.themeclass!==this.themeclass&&(this.context.value.themeclass=this.themeclass,this.context.updateObservers())}setThemeInClassList(){this.currentThemeClass&&this.classList.remove(...this.currentThemeClass.split(" ")),this.themeclass&&this.classList.add(...this.themeclass.split(" "))}};F.styles=[...Y.styles,...Nt],l([G()],F.prototype,"currentThemeClass",2),l([c({type:String})],F.prototype,"themeclass",2);var Ye=F;Ye.register(fe);var mr=Ye;var j=g`
|
|
31
31
|
:host {
|
|
32
32
|
align-items: center;
|
|
33
33
|
display: flex;
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
width: 100%;
|
|
66
66
|
fill: var(--mdc-icon-fill-color);
|
|
67
67
|
}
|
|
68
|
-
`]
|
|
68
|
+
`],$t=pr;var hr=s=>{let{host:e,context:t,subscribe:r}=s;return new V(e,{context:t,subscribe:r!=null?r:!0})},ur={consume:hr},Rt=ur;var Ae=y.constructTagName("iconprovider"),Lt=["svg"],wt=["em","rem","px"],gr={px:16,em:1,rem:1},M={FILE_EXTENSION:"svg",LENGTH_UNIT:"em",SIZE:gr.em};var Se=class{};Se.context=Ae;var Te=Se;var H=class extends Y{constructor(){super({context:Te.context,initialValue:new Te});this.fileExtension=M.FILE_EXTENSION;this.lengthUnit=M.LENGTH_UNIT;this.size=M.SIZE}static get Context(){return Te.context}updateValuesInContext(){this.fileExtension&&Lt.includes(this.fileExtension)?this.context.value.fileExtension=this.fileExtension:(this.fileExtension=M.FILE_EXTENSION,this.context.value.fileExtension=M.FILE_EXTENSION),this.context.value.url=this.url,this.context.value.size=this.size,this.lengthUnit&&wt.includes(this.lengthUnit)?this.context.value.lengthUnit=this.lengthUnit:(this.lengthUnit=M.LENGTH_UNIT,this.context.value.lengthUnit=M.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())}};l([c({type:String})],H.prototype,"url",2),l([c({type:String,attribute:"file-extension",reflect:!0})],H.prototype,"fileExtension",2),l([c({type:String,attribute:"length-unit",reflect:!0})],H.prototype,"lengthUnit",2),l([c({type:Number,reflect:!0})],H.prototype,"size",2);var ne=H;var It=async(s,e,t)=>{let r=await fetch(`${s}/${e}.${t}`);if(!r.ok)throw new Error("There was a problem while fetching the icon!");let o=await r.text();return new DOMParser().parseFromString(o,"text/html").body.children[0]};var zt=y.constructTagName("icon"),Fe={NAME:void 0,SIZE:1};var E=class extends b{constructor(){super(...arguments);this.name=Fe.NAME;this.ariaLabel=null;this.iconProviderContext=Rt.consume({host:this,context:ne.Context})}async getIconData(){if(this.iconProviderContext.value){let{fileExtension:t,url:r}=this.iconProviderContext.value;if(r&&t&&this.name){let o=await It(r,this.name,t);this.iconData=o,this.setRoleOnIcon(),this.setAriaLabelOnIcon(),this.setAriaHiddenOnIcon()}}}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:Fe.SIZE}updated(t){var r,o,n,i;super.updated(t),t.has("name")&&this.getIconData().catch(a=>{console.error(a)}),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=(i=this.iconProviderContext.value)==null?void 0:i.size,this.updateSize())}render(){return m` ${this.iconData} `}};E.styles=[...b.styles,...$t],l([G()],E.prototype,"iconData",2),l([G()],E.prototype,"lengthUnitFromContext",2),l([G()],E.prototype,"sizeFromContext",2),l([c({type:String,reflect:!0})],E.prototype,"name",2),l([c({type:Number})],E.prototype,"size",2),l([c({type:String,attribute:"length-unit"})],E.prototype,"lengthUnit",2),l([c({type:String,attribute:"aria-label"})],E.prototype,"ariaLabel",2);var je=E;je.register(zt);var fr=je;ne.register(Ae);var br=ne;var ae=s=>s!=null?s:f;var vr=g`
|
|
69
69
|
:host {
|
|
70
70
|
display: flex;
|
|
71
71
|
justify-content: center;
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
src="${ae(this.src)}"
|
|
86
86
|
alt="${ae(this.alt)}"
|
|
87
87
|
/>
|
|
88
|
-
`}render(){let t;return this.type==="photo"?t=this.photoTemplate():t=m``,m`${t}`}};O.styles=[...b.styles,...Mt],l([c({type:String,reflect:!0})],O.prototype,"type",2),l([c({type:String})],O.prototype,"alt",2),l([c({type:String})],O.prototype,"src",2),l([c({type:Number})],O.prototype,"size",2);var Ze=O;Ze.register(Ot);var yr=Ze;var Dt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Pt=s=>(...e)=>({_$litDirective$:s,values:e}),Ce=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,r){this.t=e,this._$AM=t,this.i=r}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}};var
|
|
88
|
+
`}render(){let t;return this.type==="photo"?t=this.photoTemplate():t=m``,m`${t}`}};O.styles=[...b.styles,...Mt],l([c({type:String,reflect:!0})],O.prototype,"type",2),l([c({type:String})],O.prototype,"alt",2),l([c({type:String})],O.prototype,"src",2),l([c({type:Number})],O.prototype,"size",2);var Ze=O;Ze.register(Ot);var yr=Ze;var Dt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},Pt=s=>(...e)=>({_$litDirective$:s,values:e}),Ce=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,r){this.t=e,this._$AM=t,this.i=r}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}};var Ne=Pt(class extends Ce{constructor(s){var e;if(super(s),s.type!==Dt.ATTRIBUTE||s.name!=="class"||((e=s.strings)==null?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(s){return" "+Object.keys(s).filter(e=>s[e]).join(" ")+" "}update(s,[e]){var r,o;if(this.st===void 0){this.st=new Set,s.strings!==void 0&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(n=>n!=="")));for(let n in e)e[n]&&!((r=this.nt)!=null&&r.has(n))&&this.st.add(n);return this.render(e)}let t=s.element.classList;for(let n of this.st)n in e||(t.remove(n),this.st.delete(n));for(let n in e){let i=!!e[n];i===this.st.has(n)||(o=this.nt)!=null&&o.has(n)||(i?(t.add(n),this.st.add(n)):(t.remove(n),this.st.delete(n)))}return C}});var kt=y.constructTagName("text"),Ke={BODY_SMALL_REGULAR:"body-small-regular",BODY_SMALL_MEDIUM:"body-small-medium",BODY_SMALL_BOLD:"body-small-bold",BODY_MIDSIZE_REGULAR:"body-midsize-regular",BODY_MIDSIZE_MEDIUM:"body-midsize-medium",BODY_MIDSIZE_BOLD:"body-midsize-bold",BODY_LARGE_REGULAR:"body-large-regular",BODY_LARGE_MEDIUM:"body-large-medium",BODY_LARGE_BOLD:"body-large-bold",BODY_SMALL_REGULAR_UNDERLINE:"body-small-regular-underline",BODY_SMALL_MEDIUM_UNDERLINE:"body-small-medium-underline",BODY_MIDSIZE_REGULAR_UNDERLINE:"body-midsize-regular-underline",BODY_MIDSIZE_MEDIUM_UNDERLINE:"body-midsize-medium-underline",BODY_LARGE_REGULAR_UNDERLINE:"body-large-regular-underline",BODY_LARGE_MEDIUM_UNDERLINE:"body-large-medium-underline",HEADING_SMALL_REGULAR:"heading-small-regular",HEADING_SMALL_MEDIUM:"heading-small-medium",HEADING_SMALL_BOLD:"heading-small-bold",HEADING_MIDSIZE_REGULAR:"heading-midsize-regular",HEADING_MIDSIZE_MEDIUM:"heading-midsize-medium",HEADING_MIDSIZE_BOLD:"heading-midsize-bold",HEADING_LARGE_REGULAR:"heading-large-regular",HEADING_LARGE_MEDIUM:"heading-large-medium",HEADING_LARGE_BOLD:"heading-large-bold",HEADING_XLARGE_REGULAR:"heading-xlarge-regular",HEADING_XLARGE_MEDIUM:"heading-xlarge-medium",HEADING_XLARGE_BOLD:"heading-xlarge-bold",HEADLINE_SMALL_LIGHT:"headline-small-light",HEADLINE_SMALL_REGULAR:"headline-small-regular"},x={H1:"h1",H2:"h2",H3:"h3",H4:"h4",H5:"h5",H6:"h6",P:"p",SMALL:"small",SPAN:"span",DIV:"div"},_={TYPE:Ke.BODY_LARGE_REGULAR,TEXT_ELEMENT_TAGNAME:x.P,CSS_PART_TEXT:"text",CHILDREN:"The quick brown fox jumps over the lazy dog"};var Ht=y.constructTagName("badge"),N={DOT:"dot",ICON:"icon",COUNTER:"counter",SUCCESS:"success",WARNING:"warning",ERROR:"error"},$e={SUCCESS_ICON_NAME:"check-circle-badge-filled",WARNING_ICON_NAME:"warning-badge-filled",ERROR_ICON_NAME:"error-legacy-badge-filled"},Re={PRIMARY:"primary",SECONDARY:"secondary"},de={SUCCESS:"success",WARNING:"warning",ERROR:"error"},Xi={...Re,...de},U={TYPE:N.DOT,MAX_COUNTER:99,MAX_COUNTER_LIMIT:999,VARIANT:Re.PRIMARY,ICON_SIZE:1};var xr=[j,g`
|
|
89
89
|
:host {
|
|
90
90
|
--mdc-badge-primary-foreground-color: var(--mds-color-theme-common-text-primary-normal);
|
|
91
91
|
--mdc-badge-primary-background-color: var(--mds-color-theme-background-accent-normal);
|
|
@@ -149,19 +149,19 @@
|
|
|
149
149
|
}
|
|
150
150
|
`],Gt=xr;var A=class extends b{constructor(){super(...arguments);this.variant=U.VARIANT;this.maxCounter=U.MAX_COUNTER;this.overlay=!1;this.ariaLabel=null}getCounterText(t,r){return r===void 0||typeof r!="number"||t===0?"":r>t?`${t}+`:t>U.MAX_COUNTER_LIMIT||r>U.MAX_COUNTER_LIMIT?`${U.MAX_COUNTER_LIMIT}+`:r.toString()}getBadgeIcon(t,r){return m`
|
|
151
151
|
<mdc-icon
|
|
152
|
-
class="mdc-badge-icon ${
|
|
152
|
+
class="mdc-badge-icon ${Ne({"mdc-badge-overlay":this.overlay,[`mdc-badge-icon__${r}`]:!0})}"
|
|
153
153
|
name="${ae(t)}"
|
|
154
154
|
size="${U.ICON_SIZE}"
|
|
155
155
|
></mdc-icon>
|
|
156
|
-
`}getBadgeDot(){return m`<div class="mdc-badge-dot ${
|
|
156
|
+
`}getBadgeDot(){return m`<div class="mdc-badge-dot ${Ne({"mdc-badge-overlay":this.overlay})}"></div>`}getBadgeCounterText(){return m`
|
|
157
157
|
<mdc-text
|
|
158
158
|
type="${Ke.BODY_SMALL_MEDIUM}"
|
|
159
159
|
tagname="${x.DIV}"
|
|
160
|
-
class="mdc-badge-text ${
|
|
160
|
+
class="mdc-badge-text ${Ne({"mdc-badge-overlay":this.overlay})}"
|
|
161
161
|
>
|
|
162
162
|
${this.getCounterText(this.maxCounter,this.counter)}
|
|
163
163
|
</mdc-text>
|
|
164
|
-
`}setRoleByAriaLabel(){this.ariaLabel?this.role="img":this.role=null}getBadgeContentBasedOnType(){this.variant&&!Object.values(Re).includes(this.variant)&&(this.variant=U.VARIANT);let{iconName:t,type:r,variant:o}=this;switch(r){case
|
|
164
|
+
`}setRoleByAriaLabel(){this.ariaLabel?this.role="img":this.role=null}getBadgeContentBasedOnType(){this.variant&&!Object.values(Re).includes(this.variant)&&(this.variant=U.VARIANT);let{iconName:t,type:r,variant:o}=this;switch(r){case N.ICON:return this.getBadgeIcon(t||"",o);case N.COUNTER:return this.getBadgeCounterText();case N.SUCCESS:return this.getBadgeIcon($e.SUCCESS_ICON_NAME,de.SUCCESS);case N.WARNING:return this.getBadgeIcon($e.WARNING_ICON_NAME,de.WARNING);case N.ERROR:return this.getBadgeIcon($e.ERROR_ICON_NAME,de.ERROR);case N.DOT:default:return this.type=N.DOT,this.getBadgeDot()}}update(t){super.update(t),t.has("ariaLabel")&&this.setRoleByAriaLabel()}render(){return this.getBadgeContentBasedOnType()}};A.styles=[...b.styles,...Gt],l([c({type:String,reflect:!0})],A.prototype,"type",2),l([c({type:String,attribute:"icon-name"})],A.prototype,"iconName",2),l([c({type:String,reflect:!0})],A.prototype,"variant",2),l([c({type:Number})],A.prototype,"counter",2),l([c({type:Number,attribute:"max-counter",reflect:!0})],A.prototype,"maxCounter",2),l([c({type:Boolean})],A.prototype,"overlay",2),l([c({type:String,attribute:"aria-label"})],A.prototype,"ariaLabel",2);var Qe=A;var Bt=g`
|
|
165
165
|
:host([tagname])::part(text) {
|
|
166
166
|
font-size: unset;
|
|
167
167
|
font-weight: unset;
|
|
@@ -408,7 +408,7 @@
|
|
|
408
408
|
display: block;
|
|
409
409
|
font-family: var(--mdc-text-font-family);
|
|
410
410
|
}
|
|
411
|
-
`,Bt],qt=_r;var W=class extends b{constructor(){super(...arguments);this.type=_.TYPE;this.tagname=_.TEXT_ELEMENT_TAGNAME}render(){switch(this.tagname){case x.H1:return m`<h1 part=${_.CSS_PART_TEXT}><slot></slot></h1>`;case x.H2:return m`<h2 part=${_.CSS_PART_TEXT}><slot></slot></h2>`;case x.H3:return m`<h3 part=${_.CSS_PART_TEXT}><slot></slot></h3>`;case x.H4:return m`<h4 part=${_.CSS_PART_TEXT}><slot></slot></h4>`;case x.H5:return m`<h5 part=${_.CSS_PART_TEXT}><slot></slot></h5>`;case x.H6:return m`<h6 part=${_.CSS_PART_TEXT}><slot></slot></h6>`;case x.DIV:return m`<div part=${_.CSS_PART_TEXT}><slot></slot></div>`;case x.SPAN:return m`<span part=${_.CSS_PART_TEXT}><slot></slot></span>`;case x.SMALL:return m`<small part=${_.CSS_PART_TEXT}><slot></slot></small>`;case x.P:default:return m`<p part=${_.CSS_PART_TEXT}><slot></slot></p>`}}};W.styles=[...b.styles,...qt],l([c({attribute:"type",reflect:!0,type:String})],W.prototype,"type",2),l([c({attribute:"tagname",reflect:!0,type:String})],W.prototype,"tagname",2);var Je=W;Je.register(kt);var Er=Je;Qe.register(Ht);var Ar=Qe;var Vt=y.constructTagName("presence"),v={ACTIVE:"active",AWAY:"away",AWAY_CALLING:"away-calling",BUSY:"busy",DND:"dnd",MEETING:"meeting",ON_CALL:"on-call",ON_DEVICE:"on-device",ON_MOBILE:"on-mobile",PAUSE:"pause",PTO:"pto",PRESENTING:"presenting",QUIET:"quiet",SCHEDULED:"scheduled"}
|
|
411
|
+
`,Bt],qt=_r;var W=class extends b{constructor(){super(...arguments);this.type=_.TYPE;this.tagname=_.TEXT_ELEMENT_TAGNAME}render(){switch(this.tagname){case x.H1:return m`<h1 part=${_.CSS_PART_TEXT}><slot></slot></h1>`;case x.H2:return m`<h2 part=${_.CSS_PART_TEXT}><slot></slot></h2>`;case x.H3:return m`<h3 part=${_.CSS_PART_TEXT}><slot></slot></h3>`;case x.H4:return m`<h4 part=${_.CSS_PART_TEXT}><slot></slot></h4>`;case x.H5:return m`<h5 part=${_.CSS_PART_TEXT}><slot></slot></h5>`;case x.H6:return m`<h6 part=${_.CSS_PART_TEXT}><slot></slot></h6>`;case x.DIV:return m`<div part=${_.CSS_PART_TEXT}><slot></slot></div>`;case x.SPAN:return m`<span part=${_.CSS_PART_TEXT}><slot></slot></span>`;case x.SMALL:return m`<small part=${_.CSS_PART_TEXT}><slot></slot></small>`;case x.P:default:return m`<p part=${_.CSS_PART_TEXT}><slot></slot></p>`}}};W.styles=[...b.styles,...qt],l([c({attribute:"type",reflect:!0,type:String})],W.prototype,"type",2),l([c({attribute:"tagname",reflect:!0,type:String})],W.prototype,"tagname",2);var Je=W;Je.register(kt);var Er=Je;Qe.register(Ht);var Ar=Qe;var Vt=y.constructTagName("presence"),v={ACTIVE:"active",AWAY:"away",AWAY_CALLING:"away-calling",BUSY:"busy",DND:"dnd",MEETING:"meeting",ON_CALL:"on-call",ON_DEVICE:"on-device",ON_MOBILE:"on-mobile",PAUSE:"pause",PTO:"pto",PRESENTING:"presenting",QUIET:"quiet",SCHEDULED:"scheduled"},$={XX_SMALL:"xx_small",X_SMALL:"x_small",SMALL:"small",MIDSIZE:"midsize",LARGE:"large",X_LARGE:"x_large",XX_LARGE:"xx_large"},le={TYPE:v.ACTIVE,SIZE:$.SMALL};var Sr=[j,g`
|
|
412
412
|
:host {
|
|
413
413
|
--mdc-presence-active-background-color: var(--mds-color-theme-indicator-stable);
|
|
414
414
|
|
|
@@ -516,7 +516,7 @@
|
|
|
516
516
|
.mdc-presence-icon__scheduled {
|
|
517
517
|
color: var(--mdc-presence-scheduled-background-color);
|
|
518
518
|
}
|
|
519
|
-
`],Xt=Sr;var Z=class extends b{constructor(){super(...arguments);this.type=le.TYPE;this.size=le.SIZE}get iconSize(){switch(this.size){case
|
|
519
|
+
`],Xt=Sr;var Z=class extends b{constructor(){super(...arguments);this.type=le.TYPE;this.size=le.SIZE}get iconSize(){switch(this.size){case $.MIDSIZE:return 1.16125;case $.LARGE:return 1.30625;case $.X_LARGE:return 1.596875;case $.XX_LARGE:return 2.25;case $.XX_SMALL:case $.X_SMALL:case $.SMALL:default:return this.size=le.SIZE,.875}}get icon(){switch(this.type){case v.AWAY:return"recents-presence-badge-filled";case v.AWAY_CALLING:return"away-calling-presence-filled";case v.BUSY:return"busy-presence-bold";case v.DND:return"dnd-presence-badge-filled";case v.MEETING:return"camera-filled";case v.ON_CALL:return"handset-filled";case v.ON_DEVICE:return"generic-device-video-badge-filled";case v.ON_MOBILE:return"phone-badge-filled";case v.PAUSE:return"pause-badge-filled";case v.PTO:return"pto-presence-filled";case v.PRESENTING:return"share-screen-badge-filled";case v.QUIET:return"quiet-hours-presence-filled";case v.SCHEDULED:return"meetings-presence-badge-filled";case v.ACTIVE:default:return this.type=le.TYPE,"active-presence-small-filled"}}render(){return m`
|
|
520
520
|
<div class="mdc-presence mdc-presence__${this.size}">
|
|
521
521
|
<mdc-icon
|
|
522
522
|
class="mdc-presence-icon mdc-presence-icon__${this.type}"
|