@momentum-design/components 0.16.3 → 0.16.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.js +50 -33
- 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/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,37 +35,54 @@
|
|
|
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;
|
|
71
88
|
}
|
|
@@ -903,7 +920,7 @@
|
|
|
903
920
|
:host([size="20"]){
|
|
904
921
|
height: var(--mdc-button-height-size-20);
|
|
905
922
|
}
|
|
906
|
-
|
|
923
|
+
`,...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
924
|
<slot></slot>
|
|
908
925
|
`}};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
926
|
${this.prefixIcon?m`
|
|
@@ -1122,7 +1139,7 @@
|
|
|
1122
1139
|
outline: none;
|
|
1123
1140
|
border-radius: 0.25rem;
|
|
1124
1141
|
}
|
|
1125
|
-
|
|
1142
|
+
`,...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
1143
|
<mdc-avatar
|
|
1127
1144
|
slot="prefixIcon"
|
|
1128
1145
|
?is-typing="${this.isTyping}"
|