@universal-material/web 3.0.11 → 3.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/button/button.styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n --_common-button-height: var(--u-common-button-height, 2.5rem);\n --_common-button-padding: var(--u-common-button-padding, 24px);\n --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n font-family: var(--u-font-family-base, system-ui);\n height: var(--u-common-button-height, 40px);\n font-size: var(--u-common-button-font-size);\n font-weight: var(--u-common-button-font-weight);\n padding-inline: var(--_common-button-padding);\n box-sizing: border-box;\n }\n\n :host([variant=filled]),\n :host([variant=filled][color=primary]) {\n background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=secondary]) {\n background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=tertiary]) {\n background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=error]) {\n background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=elevated]) {\n background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:hover:not(:focus-within):not(:active)),\n :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n }\n }\n :host([variant=outlined]),\n :host([variant=text]),\n :host([variant=elevated]) {\n color: var(--_color-primary);\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline
|
|
1
|
+
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n --_common-button-height: var(--u-common-button-height, 2.5rem);\n --_common-button-padding: var(--u-common-button-padding, 24px);\n --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n font-family: var(--u-font-family-base, system-ui);\n height: var(--u-common-button-height, 40px);\n font-size: var(--u-common-button-font-size);\n font-weight: var(--u-common-button-font-weight);\n padding-inline: var(--_common-button-padding);\n box-sizing: border-box;\n }\n\n :host([variant=filled]),\n :host([variant=filled][color=primary]) {\n background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=secondary]) {\n background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=tertiary]) {\n background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=error]) {\n background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=elevated]) {\n background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:hover:not(:focus-within):not(:active)),\n :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n }\n }\n :host([variant=outlined]),\n :host([variant=text]),\n :host([variant=elevated]) {\n color: var(--_color-primary);\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n }\n\n :host([variant=elevated]) {\n --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host([variant=elevated]:hover) {\n --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n }\n }\n :host([has-icon]) {\n padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n }\n\n :host([has-icon][trailing-icon]) {\n padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n }\n\n ::slotted([slot=icon]) {\n display: inline-block;\n width: var(--u-common-button-icon-size, 1.125rem);\n height: var(--u-common-button-icon-size, 1.125rem);\n margin-inline-end: 8px;\n font-size: var(--u-common-button-icon-size, 1.125rem);\n line-height: var(--u-common-button-icon-size, 1.125rem);\n }\n\n :host([trailing-icon]) ::slotted([slot=icon]) {\n margin-inline: 8px 0;\n }\n`;\n"]}
|
package/package.json
CHANGED
package/ripple/ripple.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,qBACa,QAAS,SAAQ,UAAU;IAEtC,OAAgB,MAAM,0BAAU;IAEhC,OAAO,CAAC,UAAU,CAAS;IAE3B;;OAEG;IACuC,QAAQ,UAAS;IAE/B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAe;;IASlE,MAAM,IAAI,kBAAkB;IAIrC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,eAAe;
|
|
1
|
+
{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,qBACa,QAAS,SAAQ,UAAU;IAEtC,OAAgB,MAAM,0BAAU;IAEhC,OAAO,CAAC,UAAU,CAAS;IAE3B;;OAEG;IACuC,QAAQ,UAAS;IAE/B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAe;;IASlE,MAAM,IAAI,kBAAkB;IAIrC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,eAAe;IAIvB,YAAY,CAAC,OAAO,GAAE,MAAM,GAAG,IAAW,EAAE,OAAO,GAAE,MAAM,GAAG,IAAW,EAAE,gBAAgB,GAAE,MAAM,GAAG,IAAW,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI;IA+CvI,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,MAAM,CAAC,8BAA8B;CAQ9C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
|
package/ripple/ripple.js
CHANGED
|
@@ -41,13 +41,7 @@ let UmRipple = UmRipple_1 = class UmRipple extends LitElement {
|
|
|
41
41
|
this.addEventListener("touchmove", dismiss);
|
|
42
42
|
}
|
|
43
43
|
canCreateRipple() {
|
|
44
|
-
|
|
45
|
-
return false;
|
|
46
|
-
const parent = this.parentElement;
|
|
47
|
-
if (!parent || window.getComputedStyle(parent).position !== "relative" && window.getComputedStyle(parent).position !== "absolute" && window.getComputedStyle(parent).position !== "fixed") {
|
|
48
|
-
return false;
|
|
49
|
-
}
|
|
50
|
-
return true;
|
|
44
|
+
return !this.disabled;
|
|
51
45
|
}
|
|
52
46
|
createRipple(targetX = null, targetY = null, releaseEventName = null) {
|
|
53
47
|
const preClientRect = this.rippleContainer.getBoundingClientRect();
|
package/ripple/ripple.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGlC,IAAM,QAAQ,gBAAd,MAAM,QAAS,SAAQ,UAAU;IAatC;QACE,KAAK,EAAE,CAAC;QAVF,eAAU,GAAG,KAAK,CAAC;QAE3B;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAOzD,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;QACzB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,mDAAmD,CAAA;IAChE,CAAC;IAEO,YAAY;QAElB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACzD,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC7D,CAAC;IAEO,eAAe,CAAC,CAAa;QAEnC,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;YAC/C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACrD,CAAC;IAEO,gBAAgB,CAAC,CAAa;QAEpC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QAEvB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,UAAU,CAAE,CAAC;QAE3F,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAEO,eAAe;QACrB,
|
|
1
|
+
{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles } from './ripple.styles';\n\n@customElement('u-ripple')\nexport class UmRipple extends LitElement {\n\n static override styles = styles;\n\n private isTouching = false;\n\n /**\n * Disables the ripple.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @query('.ripple-container') private readonly rippleContainer!: HTMLElement;\n\n constructor() {\n super();\n\n this.ariaHidden = \"true\";\n this.attachEvents();\n }\n\n override render(): HTMLTemplateResult {\n return html`<div class=\"ripple-container\"></div><slot></slot>`\n }\n\n private attachEvents(): void {\n\n this.addEventListener('mousedown', this.handleMouseDown);\n this.addEventListener('touchstart', this.handleTouchStart);\n }\n\n private handleMouseDown(e: MouseEvent): void {\n\n if (this.isTouching || !this.canCreateRipple()) {\n return;\n }\n\n this.createRipple(e.clientX, e.clientY, 'mouseup');\n }\n\n private handleTouchStart(e: TouchEvent): void {\n\n if (!this.canCreateRipple()) {\n return;\n }\n\n this.isTouching = true;\n\n const dismiss = this.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend')!;\n\n this.addEventListener(\"touchmove\", dismiss);\n }\n\n private canCreateRipple(): boolean {\n return !this.disabled;\n }\n\n createRipple(targetX: number | null = null, targetY: number | null = null, releaseEventName: string | null = null): (() => void) | null {\n const preClientRect = this.rippleContainer.getBoundingClientRect();\n targetX ??= preClientRect.x + this.rippleContainer.clientWidth / 2;\n targetY ??= preClientRect.y + this.rippleContainer.clientHeight / 2;\n\n const ripple = document.createElement('DIV');\n ripple.classList.add('ripple');\n this.rippleContainer!.appendChild(ripple);\n\n requestAnimationFrame(() => {\n const clientRect = this.getBoundingClientRect();\n const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);\n const rippleSize = largestDimensionSize * 2;\n\n UmRipple._setElementSquareSizeAndCenter(ripple, rippleSize);\n ripple.style.setProperty('--_ripple-transition-duration', `${1080 * Math.pow(rippleSize, 0.3)}ms`);\n\n const x = (targetX! - clientRect.left) + ((rippleSize - this.rippleContainer.clientWidth) / 2);\n const y = (targetY! - clientRect.top) + ((rippleSize - this.rippleContainer.clientHeight) / 2);\n\n ripple.style.transformOrigin = `${x}px ${y}px`;\n ripple.classList.add(releaseEventName ? 'show' : 'show-forced');\n });\n\n const interval = setInterval(() => {\n\n if (!ripple.classList.contains('dismiss') && !ripple.classList.contains('show-forced')) {\n return;\n }\n\n const animations = ripple.getAnimations();\n\n if (animations.length) {\n return;\n }\n\n clearInterval(interval);\n ripple.remove();\n }, 1000);\n\n if (!releaseEventName) {\n return null;\n }\n\n return this.createDismissEvent(ripple, releaseEventName);\n }\n\n private createDismissEvent(ripple: HTMLElement, releaseEventName: string): () => void {\n const dismiss = () => {\n ripple.classList.add('dismiss');\n\n this.isTouching = false;\n\n this.removeEventListener('dragover', dismiss);\n this.removeEventListener('mouseleave', dismiss);\n window.removeEventListener(releaseEventName, dismiss);\n }\n\n this.addEventListener(\"dragover\", dismiss);\n this.addEventListener(\"mouseleave\", dismiss);\n window.addEventListener(releaseEventName, dismiss);\n\n return dismiss;\n }\n\n private static _setElementSquareSizeAndCenter(element: HTMLElement, size: number) {\n element.style.top = \"50%\";\n element.style.left = \"50%\";\n element.style.width = `${size}px`;\n element.style.height = `${size}px`;\n element.style.marginLeft = `${-size / 2}px`;\n element.style.marginTop = `${-size / 2}px`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-ripple': UmRipple;\n }\n}\n"]}
|