@3mo/button 0.3.0 → 0.3.2

package/README.md

@@ -1,3 +1,3 @@
-# Button
-
+# Button
+
 A button web-component based on Material Web Components (MWC).

package/dist/Button.d.ts

@@ -1,6 +1,7 @@
 import { Component } from '@a11d/lit';
 import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
 import { type MaterialIcon } from '@3mo/icon';
+import '@3mo/theme';
 export declare const enum ButtonType {
     Normal = "normal",
     Outlined = "outlined",

package/dist/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAwB,MAAM,WAAW,CAAA;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAI7C,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;CACzB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,MAAO,SAAQ,SAAS;IACP,IAAI,aAAoB;IACjC,QAAQ,UAAQ;IAExB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAA;IAEvC,WAAoB,MAAM,kCAwCzB;IAED,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAE1F,cAAuB,QAAQ,yCAW9B;IAED,SAAS,KAAK,UAAU,YAEvB;IAED,SAAS,KAAK,eAAe,yCAM5B;IAED,SAAS,KAAK,mBAAmB,yCAMhC;IAED,SAAS,KAAK,mBAAmB,0CAEhC;IAED,SAAS,KAAK,YAAY,yCAEzB;IAED,SAAS,KAAK,oBAAoB,yCAMjC;IAED,SAAS,KAAK,oBAAoB,0CAEjC;CACD;AAqDD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,MAAM,CAAA;KACnB;CACD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../Button.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,SAAS,EAAwB,MAAM,WAAW,CAAA;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAA;AACpF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAG7C,OAAO,YAAY,CAAA;AAEnB,0BAAkB,UAAU;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,UAAU,eAAe;CACzB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,MAAO,SAAQ,SAAS;IACP,IAAI,aAAoB;IACjC,QAAQ,UAAQ;IAExB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAA;IAEvC,WAAoB,MAAM,kCAwCzB;IAED,SAAS,CAAC,QAAQ,CAAC,6BAA6B,gCAA0C;IAE1F,cAAuB,QAAQ,yCAW9B;IAED,SAAS,KAAK,UAAU,YAEvB;IAED,SAAS,KAAK,eAAe,yCAM5B;IAED,SAAS,KAAK,mBAAmB,yCAMhC;IAED,SAAS,KAAK,mBAAmB,0CAEhC;IAED,SAAS,KAAK,YAAY,yCAEzB;IAED,SAAS,KAAK,oBAAoB,yCAMjC;IAED,SAAS,KAAK,oBAAoB,0CAEjC;CACD;AAqDD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,MAAM,CAAA;KACnB;CACD"}

package/dist/Button.js

@@ -3,6 +3,7 @@ import { component, property, css, Component, html, nothing, style } from '@a11d
 import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
 import { Button as MwcButton } from '@material/mwc-button';
 import { disabledProperty } from '@3mo/disabled-property';
+import '@3mo/theme';
 /**
  * @attr type
  * @attr disabled
@@ -29,73 +30,73 @@ let Button = class Button extends Component {
         this.instanceofAttributeController = new InstanceofAttributeController(this);
     }
     static get styles() {
-        return css `
-			:host {
-				display: inline-block;
-				text-transform: uppercase;
-				text-align: center;
-				border-radius: var(--mo-border-radius, 4px);
-				min-height: 36px;
-			}
-
-			:host([type=normal]) mwc-button {
-				--mo-button-default-horizontal-padding: 12px;
-			}
-
-			:host(:not([type=normal])) mwc-button {
-				--mo-button-default-horizontal-padding: 16px;
-			}
-
-			slot[name=leading] *, slot[name=leading]::slotted(*) {
-				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
-				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
-			}
-
-			slot[name=trailing] *, slot[name=trailing]::slotted(*) {
-				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
-				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
-			}
-
-			mwc-button {
-				min-height: inherit;
-				text-align: inherit;
-				--mdc-button-horizontal-padding: var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding));
-				--mdc-theme-primary: var(--mo-button-accent-color, var(--mo-color-accent, #0077c8));
-				--mdc-button-outline-color: var(--mo-button-accent-color, var(--mo-color-accent, #0077c8));
-				--mdc-button-disabled-fill-color: var(--mo-button-disabled-background-color);
-				--mdc-button-disabled-ink-color: var(--mo-button-disabled-color, var(--mo-color-gray-transparent));
-				--mdc-button-disabled-outline-color: var(--mo-button-disabled-color, var(--mo-color-gray-transparent));
-				--mdc-shape-small: inherit;
-			}
+        return css `
+			:host {
+				display: inline-block;
+				text-transform: uppercase;
+				text-align: center;
+				border-radius: var(--mo-border-radius);
+				min-height: 36px;
+			}
+
+			:host([type=normal]) mwc-button {
+				--mo-button-default-horizontal-padding: 12px;
+			}
+
+			:host(:not([type=normal])) mwc-button {
+				--mo-button-default-horizontal-padding: 16px;
+			}
+
+			slot[name=leading] *, slot[name=leading]::slotted(*) {
+				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
+				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
+			}
+
+			slot[name=trailing] *, slot[name=trailing]::slotted(*) {
+				margin-inline-start: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * 0.5);
+				margin-inline-end: calc(var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding)) * -0.5);
+			}
+
+			mwc-button {
+				min-height: inherit;
+				text-align: inherit;
+				--mdc-button-horizontal-padding: var(--mo-button-horizontal-padding, var(--mo-button-default-horizontal-padding));
+				--mdc-theme-primary: var(--mo-button-accent-color, var(--mo-color-accent));
+				--mdc-button-outline-color: var(--mo-button-accent-color, var(--mo-color-accent));
+				--mdc-button-disabled-fill-color: var(--mo-button-disabled-background-color);
+				--mdc-button-disabled-ink-color: var(--mo-button-disabled-color, var(--mo-color-gray-transparent));
+				--mdc-button-disabled-outline-color: var(--mo-button-disabled-color, var(--mo-color-gray-transparent));
+				--mdc-shape-small: inherit;
+			}
 		`;
     }
     get template() {
-        return html `
-			<mwc-button exportparts='button,ripple' expandContent
-				?raised=${this.type === "raised" /* ButtonType.Raised */}
-				?outlined=${this.type === "outlined" /* ButtonType.Outlined */}
-				?unelevated=${this.type === "unelevated" /* ButtonType.Unelevated */}
-				?disabled=${this.isDisabled}
-			>
-				${this.contentTemplate}
-			</mwc-button>
+        return html `
+			<mwc-button exportparts='button,ripple' expandContent
+				?raised=${this.type === "raised" /* ButtonType.Raised */}
+				?outlined=${this.type === "outlined" /* ButtonType.Outlined */}
+				?unelevated=${this.type === "unelevated" /* ButtonType.Unelevated */}
+				?disabled=${this.isDisabled}
+			>
+				${this.contentTemplate}
+			</mwc-button>
 		`;
     }
     get isDisabled() {
         return this.disabled;
     }
     get contentTemplate() {
-        return html `
-			${this.leadingSlotTemplate}
-			${this.slotTemplate}
-			${this.trailingSlotTemplate}
+        return html `
+			${this.leadingSlotTemplate}
+			${this.slotTemplate}
+			${this.trailingSlotTemplate}
 		`;
     }
     get leadingSlotTemplate() {
-        return html `
-			<slot name='leading' slot='icon'>
-				${this.leadingIconTemplate}
-			</slot>
+        return html `
+			<slot name='leading' slot='icon'>
+				${this.leadingIconTemplate}
+			</slot>
 		`;
     }
     get leadingIconTemplate() {
@@ -105,10 +106,10 @@ let Button = class Button extends Component {
         return html `<slot ${style({ width: '*' })}></slot>`;
     }
     get trailingSlotTemplate() {
-        return html `
-			<slot name='trailing' slot='trailingIcon'>
-				${this.trailingIconTemplate}
-			</slot>
+        return html `
+			<slot name='trailing' slot='trailingIcon'>
+				${this.trailingIconTemplate}
+			</slot>
 		`;
     }
     get trailingIconTemplate() {
@@ -140,43 +141,43 @@ MwcButton.addInitializer(element => {
         }
     });
 });
-MwcButton.elementStyles.push(css `
-	:host {
-		display: inline-grid !important;
-		width: 100% !important;
-		height: 100% !important;
-		border-radius: inherit !important;
-	}
-
-	button {
-		width: 100% !important;
-		height: 100% !important;
-		min-width: unset !important;
-		line-height: unset !important;
-		padding-top: 4px !important;
-		padding-bottom: 4px !important;
-		text-transform: unset !important;
-		border-radius: inherit !important;
-		text-align: inherit !important;
-	}
-
-	.mdc-button__label {
-		display: none;
-	}
-
-	.trailing-icon, .leading-icon {
-		display: inline-flex;
-		align-items: center;
-	}
-
-	.trailing-icon ::slotted(*), .leading-icon ::slotted(*) {
-		margin-inline-start: unset;
-		margin-inline-end: unset;
-		display: unset;
-		position: unset;
-		vertical-align: unset;
-		font-size: unset;
-		height: unset;
-		width: unset;
-	}
+MwcButton.elementStyles.push(css `
+	:host {
+		display: inline-grid !important;
+		width: 100% !important;
+		height: 100% !important;
+		border-radius: inherit !important;
+	}
+
+	button {
+		width: 100% !important;
+		height: 100% !important;
+		min-width: unset !important;
+		line-height: unset !important;
+		padding-top: 4px !important;
+		padding-bottom: 4px !important;
+		text-transform: unset !important;
+		border-radius: inherit !important;
+		text-align: inherit !important;
+	}
+
+	.mdc-button__label {
+		display: none;
+	}
+
+	.trailing-icon, .leading-icon {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.trailing-icon ::slotted(*), .leading-icon ::slotted(*) {
+		margin-inline-start: unset;
+		margin-inline-end: unset;
+		display: unset;
+		position: unset;
+		vertical-align: unset;
+		font-size: unset;
+		height: unset;
+		width: unset;
+	}
 `);