@universal-material/web 3.0.37 → 3.0.39
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/chip/chip.d.ts +2 -0
- package/chip/chip.d.ts.map +1 -1
- package/chip/chip.js +21 -2
- package/chip/chip.js.map +1 -1
- package/chip/chip.styles.d.ts.map +1 -1
- package/chip/chip.styles.js +12 -0
- package/chip/chip.styles.js.map +1 -1
- package/custom-elements.json +3016 -2935
- package/package.json +1 -1
- package/shared/button-wrapper.d.ts +1 -0
- package/shared/button-wrapper.d.ts.map +1 -1
- package/shared/button-wrapper.js +7 -3
- package/shared/button-wrapper.js.map +1 -1
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +2 -2
- package/text-field/text-field.js.map +1 -1
package/chip/chip.d.ts
CHANGED
package/chip/chip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAM/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AAEnC,qBACa,MAAO,SAAQ,eAAe;;IAEzC,OAAgB,MAAM,4BAGpB;
|
|
1
|
+
{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAM/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AAEnC,qBACa,MAAO,SAAQ,eAAe;;IAEzC,OAAgB,MAAM,4BAGpB;IAIF;;OAEG;IACyC,QAAQ,UAAS;IAE7D,IACa,SAAS,IAAI,OAAO,CAEhC;IACD,IAAa,SAAS,CAAC,KAAK,EAAE,OAAO,EAEpC;IAED;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;OAEG;IACyC,MAAM,UAAS;IAE3D;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACuE,eAAe,UAAS;IAGlG,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAE9B,YAAY,EAAG,QAAQ,CAAC;cAwB9B,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;cAWjC,aAAa,IAAI,kBAAkB;CAmCvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
|
package/chip/chip.js
CHANGED
|
@@ -9,7 +9,13 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
9
9
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
10
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
11
|
};
|
|
12
|
-
var
|
|
12
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
13
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
14
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
15
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
16
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
|
+
};
|
|
18
|
+
var _UmChip_instances, _UmChip_clickable, _UmChip_handleActionClick, _UmChip_handleTrailingIconSlotChange, _UmChip_handleLeadingIconSlotChange, _UmChip_handleSelectedIconSlotChange;
|
|
13
19
|
import { html } from 'lit';
|
|
14
20
|
import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
|
|
15
21
|
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
@@ -21,6 +27,7 @@ let UmChip = class UmChip extends UmButtonWrapper {
|
|
|
21
27
|
constructor() {
|
|
22
28
|
super(...arguments);
|
|
23
29
|
_UmChip_instances.add(this);
|
|
30
|
+
_UmChip_clickable.set(this, false);
|
|
24
31
|
/**
|
|
25
32
|
* Whether the chip is selected or not
|
|
26
33
|
*/
|
|
@@ -57,6 +64,12 @@ let UmChip = class UmChip extends UmButtonWrapper {
|
|
|
57
64
|
*/
|
|
58
65
|
this.hasTrailingIcon = false;
|
|
59
66
|
}
|
|
67
|
+
get clickable() {
|
|
68
|
+
return __classPrivateFieldGet(this, _UmChip_clickable, "f") || this.toggle;
|
|
69
|
+
}
|
|
70
|
+
set clickable(value) {
|
|
71
|
+
__classPrivateFieldSet(this, _UmChip_clickable, value, "f");
|
|
72
|
+
}
|
|
60
73
|
handleClick(event) {
|
|
61
74
|
super.handleClick(event);
|
|
62
75
|
if (!this.toggle) {
|
|
@@ -92,11 +105,14 @@ let UmChip = class UmChip extends UmButtonWrapper {
|
|
|
92
105
|
name="selected-icon"
|
|
93
106
|
@slotchange="${__classPrivateFieldGet(this, _UmChip_instances, "m", _UmChip_handleSelectedIconSlotChange)}">
|
|
94
107
|
</slot>
|
|
95
|
-
<
|
|
108
|
+
<div class="label">
|
|
109
|
+
<slot></slot>
|
|
110
|
+
</div>
|
|
96
111
|
${trailing}
|
|
97
112
|
</div>`;
|
|
98
113
|
}
|
|
99
114
|
};
|
|
115
|
+
_UmChip_clickable = new WeakMap();
|
|
100
116
|
_UmChip_instances = new WeakSet();
|
|
101
117
|
_UmChip_handleActionClick = function _UmChip_handleActionClick(e) {
|
|
102
118
|
e.stopPropagation();
|
|
@@ -121,6 +137,9 @@ UmChip.styles = [
|
|
|
121
137
|
__decorate([
|
|
122
138
|
property({ type: Boolean, reflect: true })
|
|
123
139
|
], UmChip.prototype, "selected", void 0);
|
|
140
|
+
__decorate([
|
|
141
|
+
property({ type: Boolean, reflect: true })
|
|
142
|
+
], UmChip.prototype, "clickable", null);
|
|
124
143
|
__decorate([
|
|
125
144
|
property({ type: Boolean, reflect: true })
|
|
126
145
|
], UmChip.prototype, "elevated", void 0);
|
package/chip/chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './chip.styles.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\n\nimport '../ripple/ripple.js';\nimport '../elevation/elevation.js';\n\n@customElement('u-chip')\nexport class UmChip extends UmButtonWrapper {\n\n static override styles = [\n baseStyles,\n styles\n ];\n\n #clickable = false;\n\n /**\n * Whether the chip is selected or not\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n @property({ type: Boolean, reflect: true })\n override get clickable(): boolean {\n return this.#clickable || this.toggle;\n }\n override set clickable(value: boolean) {\n this.#clickable = value;\n }\n\n /**\n * Adds elevation to the chip\n */\n @property({ type: Boolean, reflect: true }) elevated = false;\n\n /**\n * When true, the chip will toggle between selected and unselected\n * states\n */\n @property({ type: Boolean, reflect: true }) toggle = false;\n\n /**\n * Set the trailing icon as an action\n */\n @property({ type: Boolean, reflect: true }) action = false;\n\n /**\n * Whether the chip has a leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-leading-icon', reflect: true}) hasLeadingIcon = false;\n\n /**\n * Whether the chip has a selected icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-selected-icon', reflect: true}) hasSelectedIcon = false;\n\n /**\n * Whether the chip has a trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-trailing-icon', reflect: true}) hasTrailingIcon = false;\n\n @queryAssignedElements({slot: 'leading-icon', flatten: true})\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'selected-icon', flatten: true})\n private readonly assignedSelectedIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'trailing-icon', flatten: true})\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @query('#action-ripple') actionRipple!: UmRipple;\n\n #handleActionClick(e: Event) {\n e.stopPropagation();\n\n if (!(<PointerEvent>e).pointerType) {\n this.actionRipple.createRipple();\n }\n\n this.dispatchEvent(new Event('action'));\n }\n\n #handleTrailingIconSlotChange() {\n this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n #handleLeadingIconSlotChange() {\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n }\n\n #handleSelectedIconSlotChange() {\n this.hasSelectedIcon = this.assignedSelectedIcons.length > 0;\n }\n\n protected override handleClick(event: UIEvent): void {\n super.handleClick(event);\n\n if (!this.toggle) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(new Event('change', {bubbles: true}));\n }\n\n protected override renderContent(): HTMLTemplateResult {\n let trailing = html`<slot\n class=\"icon trailing\"\n name=\"trailing-icon\"\n @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>`;\n\n if (this.action) {\n trailing = html`\n <button \n class=\"action focus-ring\"\n @click=${this.#handleActionClick}>\n <u-ripple id=\"action-ripple\"></u-ripple>\n ${trailing}\n </button>`\n }\n\n return html`\n <div class=\"container\">\n <div class=\"outline\"></div>\n <slot\n class=\"icon leading\"\n name=\"leading-icon\"\n @slotchange=\"${this.#handleLeadingIconSlotChange}\">\n </slot>\n <slot\n class=\"icon leading\"\n name=\"selected-icon\"\n @slotchange=\"${this.#handleSelectedIconSlotChange}\">\n </slot>\n <div class=\"label\">\n <slot></slot>\n </div>\n ${trailing}\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-chip': UmChip;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiOlB,CAAC"}
|
package/chip/chip.styles.js
CHANGED
|
@@ -149,6 +149,14 @@ export const styles = css `
|
|
|
149
149
|
color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
150
150
|
}
|
|
151
151
|
|
|
152
|
+
.label {
|
|
153
|
+
font-family: var(--u-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"));
|
|
154
|
+
line-height: var(--u-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));
|
|
155
|
+
font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));
|
|
156
|
+
letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));
|
|
157
|
+
font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));
|
|
158
|
+
}
|
|
159
|
+
|
|
152
160
|
.action {
|
|
153
161
|
display: flex;
|
|
154
162
|
align-items: center;
|
|
@@ -179,6 +187,10 @@ export const styles = css `
|
|
|
179
187
|
display: none;
|
|
180
188
|
}
|
|
181
189
|
|
|
190
|
+
:host(:not([clickable])) .button {
|
|
191
|
+
cursor: auto;
|
|
192
|
+
}
|
|
193
|
+
|
|
182
194
|
:host([selected][has-selected-icon]) slot[name=leading-icon] {
|
|
183
195
|
display: none;
|
|
184
196
|
}
|
package/chip/chip.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiOzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host,\n * {\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 box-sizing: border-box;\n outline: 0;\n }\n\n .focus-ring:focus-visible {\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n animation: u-focus-pulse 500ms ease;\n animation-fill-mode: forwards;\n outline-offset: 2px;\n }\n\n @keyframes u-focus-pulse {\n 0% {\n outline: 0 solid var(--_color-primary);\n }\n 50% {\n outline: 6px solid var(--_color-primary);\n }\n 100% {\n outline: 4px solid var(--_color-primary);\n }\n }\n :host {\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n -webkit-tap-highlight-color: transparent;\n --u-elevation-level: 0;\n position: relative;\n display: inline-block;\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 appearance: none !important;\n }\n\n :host([disabled]) {\n --u-elevation-level: 0 !important;\n background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n }\n\n :host([disabled]) .button {\n cursor: default;\n }\n\n * {\n color: inherit;\n }\n\n u-elevation {\n z-index: -1;\n }\n\n .button {\n cursor: pointer;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n width: 100%;\n height: 100%;\n font-family: inherit;\n border-radius: inherit;\n color: inherit;\n border: none;\n margin: 0;\n padding: 0;\n text-align: center;\n white-space: nowrap;\n background: transparent;\n user-select: none;\n text-decoration: none;\n outline: 0;\n z-index: 0;\n }\n\n .content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n border-radius: inherit;\n width: 100%;\n height: 100%;\n }\n\n :host {\n --_height: var(--u-chip-height, 32px);\n --_outline-width: var(--u-chip-outline-width, 1px);\n --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n --_gap: var(--u-chip-gap, 8px);\n --_icon-size: var(--u-chip-icon-size, 1.125rem);\n --_action-margin: var(--u-chip-action-margin, 2px);\n --_action-size: calc(var(--_height) - var(--_action-margin) * 2);\n display: inline-block;\n height: var(--_height);\n border-radius: var(--_shape);\n }\n\n :host(:not([disabled])) {\n cursor: pointer;\n }\n\n :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n border: var(--_outline-width) solid var(--_outline-color);\n }\n\n :host([elevated]:not([disabled])) {\n --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host([elevated]:not([disabled]):hover) {\n --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n }\n }\n .outline {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n }\n\n .container {\n display: flex;\n align-items: center;\n border-radius: inherit;\n height: 100%;\n padding-inline: var(--u-chip-padding, 16px);\n gap: var(--_gap);\n }\n\n .icon {\n width: var(--_icon-size);\n height: var(--_icon-size);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_icon-size);\n }\n\n .leading {\n color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .trailing {\n color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .label {\n font-family: var(--u-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 line-height: var(--u-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));\n font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));\n letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n }\n\n .action {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--_action-size);\n height: var(--_action-size);\n cursor: pointer;\n padding: 0;\n margin: 0;\n margin-inline: calc((var(--_action-size) - var(--_icon-size)) * -0.5);\n background: gray;\n border: none;\n border-radius: var(--u-chip-action-border-radius, var(--u-shape-corner-full, 9999px));\n background: none;\n appearance: none;\n outline: 0;\n outline-offset: 0;\n z-index: 1;\n }\n\n ::slotted([slot=leading-icon]),\n ::slotted([slot=trailing-icon]) {\n font-size: inherit !important;\n }\n\n slot[name=selected-icon] {\n display: none;\n }\n\n :host(:not([clickable])) .button {\n cursor: auto;\n }\n\n :host([selected][has-selected-icon]) slot[name=leading-icon] {\n display: none;\n }\n :host([selected][has-selected-icon]) slot[name=selected-icon] {\n display: flex;\n }\n\n :host([selected]:not([disabled])) {\n background-color: var(--u-chip-selected-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n }\n :host([selected]:not([disabled])) .leading {\n color: var(--u-chip-selected-leading-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n :host([selected]:not([disabled])) .trailing {\n color: var(--u-chip-selected-trailing-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([has-leading-icon]) .container {\n padding-inline-start: var(--_gap);\n }\n\n :host([has-trailing-icon]) .container {\n padding-inline-end: var(--_gap);\n }\n\n :host(:not([has-leading-icon])) .leading {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing,\n :host(:not([has-trailing-icon])) .action {\n display: none;\n }\n`;\n"]}
|