@universal-material/web 3.0.105 → 3.0.107
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.d.ts +0 -1
- package/button/button.d.ts.map +1 -1
- package/button/button.js +6 -11
- package/button/button.js.map +1 -1
- package/button/button.styles.d.ts.map +1 -1
- package/button/button.styles.js +2 -4
- package/button/button.styles.js.map +1 -1
- package/custom-elements.json +1308 -1308
- package/package.json +1 -1
- package/typeahead/typeahead.d.ts.map +1 -1
- package/typeahead/typeahead.js +11 -13
- package/typeahead/typeahead.js.map +1 -1
package/button/button.d.ts
CHANGED
package/button/button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAKxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAKxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AACpF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvF,qBACa,QAAS,SAAQ,YAAY;IACxC,OAAgB,MAAM,+DAAiC;IAEvD;;OAEG;IAC0B,OAAO,EAAE,eAAe,CAAY;IAEjE;;;;OAIG;IAC0B,KAAK,EAAE,aAAa,CAAC;IAEsB,YAAY,UAAS;IAE7F;;;;OAIG;IACgE,OAAO,UAAS;cAEhE,aAAa,IAAI,kBAAkB;IActD,OAAO,CAAC,gBAAgB;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
|
package/button/button.js
CHANGED
|
@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { html, nothing } from 'lit';
|
|
8
|
-
import { customElement, property
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
9
|
import { styles } from './button.styles.js';
|
|
10
10
|
import { UmButtonBase } from './button-base.js';
|
|
11
11
|
import '../ripple/ripple.js';
|
|
@@ -28,19 +28,17 @@ let UmButton = class UmButton extends UmButtonBase {
|
|
|
28
28
|
renderContent() {
|
|
29
29
|
const icon = html `
|
|
30
30
|
<span class="icon">
|
|
31
|
-
<slot
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
@slotchange="${this.handleSlotChange}"></slot>
|
|
35
|
-
</span>`;
|
|
31
|
+
<slot name="icon" aria-hidden="true" @slotchange="${this.handleSlotChange}"></slot>
|
|
32
|
+
</span>
|
|
33
|
+
`;
|
|
36
34
|
return html `
|
|
37
35
|
${this.trailingIcon ? nothing : icon}
|
|
38
36
|
<span id="text"><slot></slot></span>
|
|
39
37
|
${this.trailingIcon ? icon : nothing}
|
|
40
38
|
`;
|
|
41
39
|
}
|
|
42
|
-
handleSlotChange() {
|
|
43
|
-
this.hasIcon =
|
|
40
|
+
handleSlotChange(e) {
|
|
41
|
+
this.hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
|
|
44
42
|
}
|
|
45
43
|
};
|
|
46
44
|
__decorate([
|
|
@@ -55,9 +53,6 @@ __decorate([
|
|
|
55
53
|
__decorate([
|
|
56
54
|
property({ type: Boolean, attribute: 'has-icon', reflect: true })
|
|
57
55
|
], UmButton.prototype, "hasIcon", void 0);
|
|
58
|
-
__decorate([
|
|
59
|
-
queryAssignedElements({ slot: 'icon', flatten: true })
|
|
60
|
-
], UmButton.prototype, "assignedIcons", void 0);
|
|
61
56
|
UmButton = __decorate([
|
|
62
57
|
customElement('u-button')
|
|
63
58
|
], UmButton);
|
package/button/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,qBAAqB,CAAC;AAMtB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAGL;;WAEG;QAC0B,YAAO,GAAoB,QAAQ,CAAC;QASO,iBAAY,GAAG,KAAK,CAAC;QAE7F;;;;WAIG;QACgE,YAAO,GAAG,KAAK,CAAC;IAmBrF,CAAC;aAxCiB,WAAM,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;IAuBpC,aAAa;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAA;;4DAEuC,IAAI,CAAC,gBAAgB;;KAE5E,CAAC;QAEF,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;QAElC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;KACrC,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,IAAI,CAAC,OAAO,GAAqB,CAAC,CAAC,MAAO,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC5F,CAAC;;AAlC4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAqC;AAOpC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAsB;AAEsB;IAAvE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAsB;AAO1B;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAtBxE,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAyCpB","sourcesContent":["import { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './button.styles.js';\n\nimport { UmButtonBase } from './button-base.js';\n\nimport '../ripple/ripple.js';\n\nexport type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';\nexport type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;\n\n@customElement('u-button')\nexport class UmButton extends UmButtonBase {\n static override styles = [UmButtonBase.styles, styles];\n\n /**\n * The Button variant to render\n */\n @property({ reflect: true }) variant: UmButtonVariant = 'filled';\n\n /**\n * The Button color\n *\n 1\n */\n @property({ reflect: true }) color: UmButtonColor;\n\n @property({ type: Boolean, attribute: 'trailing-icon', reflect: true }) trailingIcon = false;\n\n /**\n * Whether the button has icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;\n\n protected override renderContent(): HTMLTemplateResult {\n const icon = html`\n <span class=\"icon\">\n <slot name=\"icon\" aria-hidden=\"true\" @slotchange=\"${this.handleSlotChange}\"></slot>\n </span>\n `;\n\n return html`\n ${this.trailingIcon ? nothing : icon}\n <span id=\"text\"><slot></slot></span>\n ${this.trailingIcon ? icon : nothing}\n `;\n }\n\n private handleSlotChange(e: Event) {\n this.hasIcon = (<HTMLSlotElement>e.target).assignedElements({ flatten: true }).length > 0;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-button': UmButton;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAoGlB,CAAC"}
|
package/button/button.styles.js
CHANGED
|
@@ -93,13 +93,11 @@ export const styles = css `
|
|
|
93
93
|
|
|
94
94
|
.icon {
|
|
95
95
|
font-size: var(--_common-button-icon-size);
|
|
96
|
-
|
|
97
|
-
margin-inline-end: auto;
|
|
96
|
+
margin-inline-end: var(--_common-button-icon-margin);
|
|
98
97
|
}
|
|
99
98
|
|
|
100
99
|
:host([trailing-icon]) .icon {
|
|
101
|
-
|
|
102
|
-
margin-inline: auto 0;
|
|
100
|
+
margin-inline: var(--_common-button-icon-margin) 0;
|
|
103
101
|
}
|
|
104
102
|
`;
|
|
105
103
|
//# sourceMappingURL=button.styles.js.map
|
|
@@ -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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGzB,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-size: var(--u-common-button-icon-size, 1.125rem);\n --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\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-bg-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-bg-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=text]) {\n color: var(--u-text-button-text-color, var(--_color-primary));\n }\n\n :host([variant=outlined]) {\n color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n border: 1px solid var(--u-outlined-button-outline-color, 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 color: var(--u-elevated-button-text-color, var(--_color-primary));\n }\n\n :host([disabled][variant=outlined]) {\n background-color: transparent !important;\n border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;\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 :host(:not([has-icon])) .icon {\n display: none;\n }\n\n .icon {\n font-size: var(--_common-button-icon-size);\n margin-inline-end: var(--_common-button-icon-margin);\n }\n\n :host([trailing-icon]) .icon {\n margin-inline: var(--_common-button-icon-margin) 0;\n }\n`;\n"]}
|