@universal-material/web 3.0.38 → 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 +18 -1
- package/chip/chip.js.map +1 -1
- package/chip/chip.styles.d.ts.map +1 -1
- package/chip/chip.styles.js +4 -0
- package/chip/chip.styles.js.map +1 -1
- package/custom-elements.json +2387 -2306
- 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/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) {
|
|
@@ -99,6 +112,7 @@ let UmChip = class UmChip extends UmButtonWrapper {
|
|
|
99
112
|
</div>`;
|
|
100
113
|
}
|
|
101
114
|
};
|
|
115
|
+
_UmChip_clickable = new WeakMap();
|
|
102
116
|
_UmChip_instances = new WeakSet();
|
|
103
117
|
_UmChip_handleActionClick = function _UmChip_handleActionClick(e) {
|
|
104
118
|
e.stopPropagation();
|
|
@@ -123,6 +137,9 @@ UmChip.styles = [
|
|
|
123
137
|
__decorate([
|
|
124
138
|
property({ type: Boolean, reflect: true })
|
|
125
139
|
], UmChip.prototype, "selected", void 0);
|
|
140
|
+
__decorate([
|
|
141
|
+
property({ type: Boolean, reflect: true })
|
|
142
|
+
], UmChip.prototype, "clickable", null);
|
|
126
143
|
__decorate([
|
|
127
144
|
property({ type: Boolean, reflect: true })
|
|
128
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
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"]}
|