@api-client/ui 0.5.27 → 0.5.29
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/build/src/elements/app-bar/internals/AppBar.d.ts +1 -1
- package/build/src/elements/app-bar/internals/AppBar.d.ts.map +1 -1
- package/build/src/elements/app-bar/internals/AppBar.js +5 -5
- package/build/src/elements/app-bar/internals/AppBar.js.map +1 -1
- package/build/src/elements/currency/internals/Picker.d.ts +2 -2
- package/build/src/elements/currency/internals/Picker.d.ts.map +1 -1
- package/build/src/elements/currency/internals/Picker.js +13 -12
- package/build/src/elements/currency/internals/Picker.js.map +1 -1
- package/build/src/elements/data-table/DataTable.d.ts +1 -3
- package/build/src/elements/data-table/DataTable.d.ts.map +1 -1
- package/build/src/elements/data-table/DataTable.js +2 -4
- package/build/src/elements/data-table/DataTable.js.map +1 -1
- package/build/src/elements/file-system/internals/Breadcrumbs.d.ts +1 -2
- package/build/src/elements/file-system/internals/Breadcrumbs.d.ts.map +1 -1
- package/build/src/elements/file-system/internals/Breadcrumbs.js +2 -3
- package/build/src/elements/file-system/internals/Breadcrumbs.js.map +1 -1
- package/build/src/md/list/internals/List.d.ts +4 -2
- package/build/src/md/list/internals/List.d.ts.map +1 -1
- package/build/src/md/list/internals/List.js +16 -6
- package/build/src/md/list/internals/List.js.map +1 -1
- package/build/src/md/list/internals/ListItem.d.ts +10 -1
- package/build/src/md/list/internals/ListItem.d.ts.map +1 -1
- package/build/src/md/list/internals/ListItem.js +74 -8
- package/build/src/md/list/internals/ListItem.js.map +1 -1
- package/build/src/md/list/internals/ListItem.styles.d.ts.map +1 -1
- package/build/src/md/list/internals/ListItem.styles.js +38 -28
- package/build/src/md/list/internals/ListItem.styles.js.map +1 -1
- package/build/src/md/menu/internal/MenuItem.js +4 -4
- package/build/src/md/menu/internal/MenuItem.js.map +1 -1
- package/build/src/md/progress/internals/CircularProgress.d.ts +93 -0
- package/build/src/md/progress/internals/CircularProgress.d.ts.map +1 -0
- package/build/src/md/progress/internals/CircularProgress.js +156 -0
- package/build/src/md/progress/internals/CircularProgress.js.map +1 -0
- package/build/src/md/progress/internals/CircularProgress.styles.d.ts +3 -0
- package/build/src/md/progress/internals/CircularProgress.styles.d.ts.map +1 -0
- package/build/src/md/progress/internals/CircularProgress.styles.js +220 -0
- package/build/src/md/progress/internals/CircularProgress.styles.js.map +1 -0
- package/build/src/md/progress/internals/Range.d.ts +6 -0
- package/build/src/md/progress/internals/Range.d.ts.map +1 -1
- package/build/src/md/progress/internals/Range.js +41 -3
- package/build/src/md/progress/internals/Range.js.map +1 -1
- package/build/src/md/progress/internals/UiProgress.d.ts +0 -7
- package/build/src/md/progress/internals/UiProgress.d.ts.map +1 -1
- package/build/src/md/progress/internals/UiProgress.js +2 -36
- package/build/src/md/progress/internals/UiProgress.js.map +1 -1
- package/build/src/md/progress/ui-circular-progress.d.ts +11 -0
- package/build/src/md/progress/ui-circular-progress.d.ts.map +1 -0
- package/build/src/md/progress/ui-circular-progress.js +27 -0
- package/build/src/md/progress/ui-circular-progress.js.map +1 -0
- package/build/src/md/select/internals/Option.js +2 -2
- package/build/src/md/select/internals/Option.js.map +1 -1
- package/build/src/md/select/internals/Option.styles.d.ts.map +1 -1
- package/build/src/md/select/internals/Option.styles.js +0 -127
- package/build/src/md/select/internals/Option.styles.js.map +1 -1
- package/build/src/md/select/internals/Select.d.ts +12 -1
- package/build/src/md/select/internals/Select.d.ts.map +1 -1
- package/build/src/md/select/internals/Select.js +26 -2
- package/build/src/md/select/internals/Select.js.map +1 -1
- package/demo/elements/currency/index.html +2 -2
- package/demo/md/list/list.ts +9 -3
- package/demo/md/progress/progress.ts +24 -1
- package/demo/md/select/index.ts +5 -0
- package/demo/md/tabs/tabs.ts +0 -4
- package/package.json +1 -1
- package/src/elements/app-bar/internals/AppBar.ts +5 -5
- package/src/elements/currency/internals/Picker.ts +17 -16
- package/src/elements/data-table/DataTable.ts +2 -4
- package/src/elements/file-system/internals/Breadcrumbs.ts +2 -3
- package/src/md/list/internals/List.ts +19 -8
- package/src/md/list/internals/ListItem.styles.ts +38 -28
- package/src/md/list/internals/ListItem.ts +55 -8
- package/src/md/menu/internal/MenuItem.ts +4 -4
- package/src/md/progress/internals/CircularProgress.styles.ts +220 -0
- package/src/md/progress/internals/CircularProgress.ts +129 -0
- package/src/md/progress/internals/Range.ts +29 -1
- package/src/md/progress/internals/UiProgress.ts +1 -30
- package/src/md/progress/ui-circular-progress.ts +15 -0
- package/src/md/select/internals/Option.styles.ts +0 -127
- package/src/md/select/internals/Option.ts +2 -2
- package/src/md/select/internals/Select.ts +19 -1
- package/test/elements/currency/CurrencyPicker.accessibility.test.ts +14 -14
- package/test/elements/currency/CurrencyPicker.core.test.ts +6 -6
- package/test/elements/currency/CurrencyPicker.integration.test.ts +2 -2
- package/test/elements/currency/CurrencyPicker.test.ts +10 -10
- package/test/elements/data-table/DataTable.browser.test.ts +2 -2
- package/test/md/menu/MenuItem.test.ts +2 -3
- package/test/md/progress/UiCircularProgressElement.test.ts +481 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { property, query } from 'lit/decorators.js';
|
|
3
|
+
import { property, state, query } from 'lit/decorators.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { UiElement } from '../../UiElement.js';
|
|
6
6
|
import { setDisabled } from '../../../lib/disabled.js';
|
|
@@ -40,6 +40,15 @@ let UiListItem = (() => {
|
|
|
40
40
|
let _tabIndex_decorators;
|
|
41
41
|
let _tabIndex_initializers = [];
|
|
42
42
|
let _tabIndex_extraInitializers = [];
|
|
43
|
+
let _hasStartItem_decorators;
|
|
44
|
+
let _hasStartItem_initializers = [];
|
|
45
|
+
let _hasStartItem_extraInitializers = [];
|
|
46
|
+
let _hasEndItem_decorators;
|
|
47
|
+
let _hasEndItem_initializers = [];
|
|
48
|
+
let _hasEndItem_extraInitializers = [];
|
|
49
|
+
let _hasEndTextItem_decorators;
|
|
50
|
+
let _hasEndTextItem_initializers = [];
|
|
51
|
+
let _hasEndTextItem_extraInitializers = [];
|
|
43
52
|
return class UiListItem extends _classSuper {
|
|
44
53
|
static {
|
|
45
54
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
@@ -49,12 +58,18 @@ let UiListItem = (() => {
|
|
|
49
58
|
_image_decorators = [property({ type: String, reflect: true })];
|
|
50
59
|
_static_decorators = [property({ type: Boolean, reflect: true })];
|
|
51
60
|
_tabIndex_decorators = [property({ type: Number, reflect: true })];
|
|
61
|
+
_hasStartItem_decorators = [state()];
|
|
62
|
+
_hasEndItem_decorators = [state()];
|
|
63
|
+
_hasEndTextItem_decorators = [state()];
|
|
52
64
|
__esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
|
|
53
65
|
__esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
54
66
|
__esDecorate(this, null, _lines_decorators, { kind: "accessor", name: "lines", static: false, private: false, access: { has: obj => "lines" in obj, get: obj => obj.lines, set: (obj, value) => { obj.lines = value; } }, metadata: _metadata }, _lines_initializers, _lines_extraInitializers);
|
|
55
67
|
__esDecorate(this, null, _image_decorators, { kind: "accessor", name: "image", static: false, private: false, access: { has: obj => "image" in obj, get: obj => obj.image, set: (obj, value) => { obj.image = value; } }, metadata: _metadata }, _image_initializers, _image_extraInitializers);
|
|
56
68
|
__esDecorate(this, null, _static_decorators, { kind: "accessor", name: "static", static: false, private: false, access: { has: obj => "static" in obj, get: obj => obj.static, set: (obj, value) => { obj.static = value; } }, metadata: _metadata }, _static_initializers, _static_extraInitializers);
|
|
57
69
|
__esDecorate(this, null, _tabIndex_decorators, { kind: "accessor", name: "tabIndex", static: false, private: false, access: { has: obj => "tabIndex" in obj, get: obj => obj.tabIndex, set: (obj, value) => { obj.tabIndex = value; } }, metadata: _metadata }, _tabIndex_initializers, _tabIndex_extraInitializers);
|
|
70
|
+
__esDecorate(this, null, _hasStartItem_decorators, { kind: "accessor", name: "hasStartItem", static: false, private: false, access: { has: obj => "hasStartItem" in obj, get: obj => obj.hasStartItem, set: (obj, value) => { obj.hasStartItem = value; } }, metadata: _metadata }, _hasStartItem_initializers, _hasStartItem_extraInitializers);
|
|
71
|
+
__esDecorate(this, null, _hasEndItem_decorators, { kind: "accessor", name: "hasEndItem", static: false, private: false, access: { has: obj => "hasEndItem" in obj, get: obj => obj.hasEndItem, set: (obj, value) => { obj.hasEndItem = value; } }, metadata: _metadata }, _hasEndItem_initializers, _hasEndItem_extraInitializers);
|
|
72
|
+
__esDecorate(this, null, _hasEndTextItem_decorators, { kind: "accessor", name: "hasEndTextItem", static: false, private: false, access: { has: obj => "hasEndTextItem" in obj, get: obj => obj.hasEndTextItem, set: (obj, value) => { obj.hasEndTextItem = value; } }, metadata: _metadata }, _hasEndTextItem_initializers, _hasEndTextItem_extraInitializers);
|
|
58
73
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
59
74
|
}
|
|
60
75
|
#ripple_accessor_storage = __runInitializers(this, _ripple_initializers, void 0);
|
|
@@ -101,6 +116,15 @@ let UiListItem = (() => {
|
|
|
101
116
|
#tabIndex_accessor_storage = (__runInitializers(this, _static_extraInitializers), __runInitializers(this, _tabIndex_initializers, -1));
|
|
102
117
|
get tabIndex() { return this.#tabIndex_accessor_storage; }
|
|
103
118
|
set tabIndex(value) { this.#tabIndex_accessor_storage = value; }
|
|
119
|
+
#hasStartItem_accessor_storage = (__runInitializers(this, _tabIndex_extraInitializers), __runInitializers(this, _hasStartItem_initializers, false));
|
|
120
|
+
get hasStartItem() { return this.#hasStartItem_accessor_storage; }
|
|
121
|
+
set hasStartItem(value) { this.#hasStartItem_accessor_storage = value; }
|
|
122
|
+
#hasEndItem_accessor_storage = (__runInitializers(this, _hasStartItem_extraInitializers), __runInitializers(this, _hasEndItem_initializers, false));
|
|
123
|
+
get hasEndItem() { return this.#hasEndItem_accessor_storage; }
|
|
124
|
+
set hasEndItem(value) { this.#hasEndItem_accessor_storage = value; }
|
|
125
|
+
#hasEndTextItem_accessor_storage = (__runInitializers(this, _hasEndItem_extraInitializers), __runInitializers(this, _hasEndTextItem_initializers, false));
|
|
126
|
+
get hasEndTextItem() { return this.#hasEndTextItem_accessor_storage; }
|
|
127
|
+
set hasEndTextItem(value) { this.#hasEndTextItem_accessor_storage = value; }
|
|
104
128
|
constructor() {
|
|
105
129
|
super();
|
|
106
130
|
this.lines = ListItemLines.one;
|
|
@@ -213,7 +237,34 @@ let UiListItem = (() => {
|
|
|
213
237
|
}
|
|
214
238
|
this.removeAttribute('tabindex');
|
|
215
239
|
}
|
|
216
|
-
|
|
240
|
+
handleStartSlotChange() {
|
|
241
|
+
const slot = this.shadowRoot?.querySelector('slot[name="start"]');
|
|
242
|
+
if (slot) {
|
|
243
|
+
this.hasStartItem = slot.assignedNodes({ flatten: true }).length > 0;
|
|
244
|
+
}
|
|
245
|
+
else {
|
|
246
|
+
this.hasStartItem = false;
|
|
247
|
+
}
|
|
248
|
+
this.requestUpdate();
|
|
249
|
+
}
|
|
250
|
+
handleEndSlotChange() {
|
|
251
|
+
const slot = this.shadowRoot?.querySelector('slot[name="end"]');
|
|
252
|
+
if (slot) {
|
|
253
|
+
this.hasEndItem = slot.assignedNodes({ flatten: true }).length > 0;
|
|
254
|
+
}
|
|
255
|
+
else {
|
|
256
|
+
this.hasEndItem = false;
|
|
257
|
+
}
|
|
258
|
+
this.requestUpdate();
|
|
259
|
+
}
|
|
260
|
+
handleEndTextSlotChange() {
|
|
261
|
+
const slot = this.shadowRoot?.querySelector('slot[name="end-text"]');
|
|
262
|
+
if (slot) {
|
|
263
|
+
this.hasEndTextItem = slot.assignedNodes({ flatten: true }).length > 0;
|
|
264
|
+
}
|
|
265
|
+
else {
|
|
266
|
+
this.hasEndTextItem = false;
|
|
267
|
+
}
|
|
217
268
|
this.requestUpdate();
|
|
218
269
|
}
|
|
219
270
|
render() {
|
|
@@ -225,7 +276,7 @@ let UiListItem = (() => {
|
|
|
225
276
|
<div class="${surfaceClasses}">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
|
|
226
277
|
`;
|
|
227
278
|
}
|
|
228
|
-
renderRipple = (__runInitializers(this,
|
|
279
|
+
renderRipple = (__runInitializers(this, _hasEndTextItem_extraInitializers), () => {
|
|
229
280
|
const { disabled, static: isStatic } = this;
|
|
230
281
|
return html `<ui-ripple class="ripple" ?disabled="${disabled || isStatic}"></ui-ripple>`;
|
|
231
282
|
});
|
|
@@ -237,15 +288,28 @@ let UiListItem = (() => {
|
|
|
237
288
|
inward
|
|
238
289
|
></md-focus-ring>`;
|
|
239
290
|
}
|
|
291
|
+
getStartClasses() {
|
|
292
|
+
return {
|
|
293
|
+
'start': true,
|
|
294
|
+
'has-start': this.hasStartItem,
|
|
295
|
+
};
|
|
296
|
+
}
|
|
240
297
|
renderStart() {
|
|
241
|
-
return html `<div class="
|
|
242
|
-
<slot name="start" @slotchange=${this.
|
|
298
|
+
return html `<div class="${classMap(this.getStartClasses())}">
|
|
299
|
+
<slot name="start" @slotchange=${this.handleStartSlotChange}></slot>
|
|
243
300
|
</div>`;
|
|
244
301
|
}
|
|
302
|
+
getEndClasses() {
|
|
303
|
+
return {
|
|
304
|
+
'end': true,
|
|
305
|
+
'has-end': this.hasEndItem,
|
|
306
|
+
'has-end-text': this.hasEndTextItem,
|
|
307
|
+
};
|
|
308
|
+
}
|
|
245
309
|
renderEnd() {
|
|
246
|
-
return html `<div class="
|
|
247
|
-
<slot name="end" @slotchange=${this.
|
|
248
|
-
<
|
|
310
|
+
return html `<div class="${classMap(this.getEndClasses())}">
|
|
311
|
+
<slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
|
|
312
|
+
<slot name="end-text" class="trailing-supporting-text" @slotchange=${this.handleEndTextSlotChange}></slot>
|
|
249
313
|
</div>`;
|
|
250
314
|
}
|
|
251
315
|
renderBody() {
|
|
@@ -253,6 +317,7 @@ let UiListItem = (() => {
|
|
|
253
317
|
const hasSupportingText = lines !== ListItemLines.one;
|
|
254
318
|
return html `
|
|
255
319
|
<div class="body">
|
|
320
|
+
<slot name="overline"></slot>
|
|
256
321
|
<span class="headline"><slot></slot></span>
|
|
257
322
|
${hasSupportingText ? html `<span class="supporting-text"><slot name="supporting-text"></slot></span>` : ''}
|
|
258
323
|
</div>
|
|
@@ -262,6 +327,7 @@ let UiListItem = (() => {
|
|
|
262
327
|
})();
|
|
263
328
|
/**
|
|
264
329
|
* @slot
|
|
330
|
+
* @slot overline
|
|
265
331
|
* @slot start
|
|
266
332
|
* @slot end
|
|
267
333
|
* @slot end-text
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { setDisabled } from '../../../lib/disabled.js'\n\nimport '@material/web/focus/md-focus-ring.js'\nimport '../../ripple/ui-ripple.js'\n\nexport enum ListItemLines {\n one = 'one',\n two = 'two',\n three = 'three',\n}\n\nexport enum ListItemImage {\n icon = 'icon',\n avatar = 'avatar',\n image = 'image',\n video = 'video',\n auto = 'auto',\n}\n\n/**\n * @slot\n * @slot start\n * @slot end\n * @slot end-text\n * @slot supporting-text\n */\nexport default class UiListItem extends UiElement {\n @query('ui-ripple') accessor ripple!: UiRipple\n\n /**\n * Whether the chip is disabled. The user can't interact with the chip when `true`.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n /**\n * The number of lines to render the list template for.\n * @default ListItemLines.one\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor lines: ListItemLines\n\n /**\n * The type of the list image.\n * @default ListItemImage.icon\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor image: ListItemImage\n\n /**\n * Whether the list item is static and should not be focusable.\n * The ripple effect will not be applied when `true`.\n * @default false\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor static = false\n\n @property({ type: Number, reflect: true }) override accessor tabIndex = -1\n\n constructor() {\n super()\n\n this.lines = ListItemLines.one\n this.image = ListItemImage.icon\n\n this.addEventListener('click', this.handleClick.bind(this))\n this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n this.addEventListener('keydown', this.handleKeyDown.bind(this))\n this.addEventListener('keyup', this.handleKeyUp.bind(this))\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties)\n if (changedProperties.has('tabIndex') && (this.tabIndex === -1 || this.tabIndex === null)) {\n this.ripple?.endPress()\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem')\n }\n }\n\n protected override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('disabled')) {\n setDisabled(this, cp.get('disabled'))\n }\n }\n\n override handleKeyDown(e: KeyboardEvent): void {\n if (this.disabled || this.static) {\n e.stopPropagation()\n e.preventDefault()\n return\n }\n if (e.key !== ' ' && e.key !== 'Enter') return\n // do not prevent default, so that parent elements can handle the key event\n this.beginPress({ positionEvent: e })\n }\n\n override handleKeyUp(e: KeyboardEvent): void {\n if (this.disabled || this.static) {\n e.stopPropagation()\n e.preventDefault()\n return\n }\n if (e.key !== ' ' && e.key !== 'Enter') return\n\n // do not prevent default, so that parent elements can handle the key event\n this.endPress({ cancelled: false, actionData: { item: this } })\n }\n\n override beginPress(options: BeginPressConfig): void {\n if (this.disabled || this.static) {\n return\n }\n super.beginPress(options)\n this.ripple.beginPress(options.positionEvent)\n }\n\n override endPress(options: EndPressConfig): void {\n if (this.disabled || this.static) {\n return\n }\n super.endPress(options)\n this.ripple.endPress()\n }\n\n override handlePointerEnter(e: PointerEvent): void {\n if (this.disabled || this.static) {\n e.stopPropagation()\n e.preventDefault()\n return\n }\n this.ripple.beginHover(e)\n }\n\n override handlePointerLeave(e: PointerEvent): void {\n if (this.disabled || this.static) {\n e.stopPropagation()\n e.preventDefault()\n return\n }\n super.handlePointerLeave(e)\n\n this.ripple.endHover()\n }\n\n /**\n * Focuses list item and makes list item focusable via keyboard.\n */\n activate(): void {\n if (this.disabled || this.static) {\n return\n }\n this.setAttribute('tabindex', '0')\n this.focus()\n }\n\n /**\n * Returns true if list item is currently focused and is focusable.\n */\n isActive(): boolean {\n if (this.disabled || this.static) {\n return false\n }\n return this.getAttribute('tabindex') === '0'\n }\n\n /**\n * Removes list item from sequential keyboard navigation.\n */\n deactivate(): void {\n if (this.disabled || this.static) {\n return\n }\n this.removeAttribute('tabindex')\n }\n\n protected handleSlotChange(): void {\n this.requestUpdate()\n }\n\n protected override render(): TemplateResult {\n const surfaceClasses = classMap({\n surface: true,\n })\n return html`\n ${this.renderFocusRing()} ${this.renderRipple()}\n <div class=\"${surfaceClasses}\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n `\n }\n\n protected renderRipple = (): TemplateResult => {\n const { disabled, static: isStatic } = this\n return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled || isStatic}\"></ui-ripple>`\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring\n part=\"focus-ring\"\n class=\"focus-ring\"\n .control=\"${this as HTMLElement}\"\n inward\n ></md-focus-ring>`\n }\n\n protected renderStart(): TemplateResult {\n return html`<div class=\"start\">\n <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n </div>`\n }\n\n protected renderEnd(): TemplateResult {\n return html`<div class=\"end\">\n <slot name=\"end\" @slotchange=${this.handleSlotChange}></slot>\n <span class=\"trailing-supporting-text\"><slot name=\"end-text\"></slot></span>\n </div>`\n }\n\n protected renderBody(): TemplateResult {\n const { lines = ListItemLines.one } = this\n const hasSupportingText = lines !== ListItemLines.one\n return html`\n <div class=\"body\">\n <span class=\"headline\"><slot></slot></span>\n ${hasSupportingText ? html`<span class=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>` : ''}\n </div>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state, query } from 'lit/decorators.js'\nimport { classMap, ClassInfo } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { setDisabled } from '../../../lib/disabled.js'\n\nimport '@material/web/focus/md-focus-ring.js'\nimport '../../ripple/ui-ripple.js'\n\nexport enum ListItemLines {\n one = 'one',\n two = 'two',\n three = 'three',\n}\n\nexport enum ListItemImage {\n icon = 'icon',\n avatar = 'avatar',\n image = 'image',\n video = 'video',\n auto = 'auto',\n}\n\n/**\n * @slot\n * @slot overline\n * @slot start\n * @slot end\n * @slot end-text\n * @slot supporting-text\n */\nexport default class UiListItem extends UiElement {\n @query('ui-ripple') accessor ripple!: UiRipple\n\n /**\n * Whether the chip is disabled. The user can't interact with the chip when `true`.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n /**\n * The number of lines to render the list template for.\n * @default ListItemLines.one\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor lines: ListItemLines\n\n /**\n * The type of the list image.\n * @default ListItemImage.icon\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor image: ListItemImage\n\n /**\n * Whether the list item is static and should not be focusable.\n * The ripple effect will not be applied when `true`.\n * @default false\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor static = false\n\n @property({ type: Number, reflect: true }) override accessor tabIndex = -1\n\n @state() accessor hasStartItem = false\n @state() accessor hasEndItem = false\n @state() accessor hasEndTextItem = false\n\n constructor() {\n super()\n\n this.lines = ListItemLines.one\n this.image = ListItemImage.icon\n\n this.addEventListener('click', this.handleClick.bind(this))\n this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n this.addEventListener('keydown', this.handleKeyDown.bind(this))\n this.addEventListener('keyup', this.handleKeyUp.bind(this))\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties)\n if (changedProperties.has('tabIndex') && (this.tabIndex === -1 || this.tabIndex === null)) {\n this.ripple?.endPress()\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem')\n }\n }\n\n protected override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('disabled')) {\n setDisabled(this, cp.get('disabled'))\n }\n }\n\n override handleKeyDown(e: KeyboardEvent): void {\n if (this.disabled || this.static) {\n e.stopPropagation()\n e.preventDefault()\n return\n }\n if (e.key !== ' ' && e.key !== 'Enter') return\n // do not prevent default, so that parent elements can handle the key event\n this.beginPress({ positionEvent: e })\n }\n\n override handleKeyUp(e: KeyboardEvent): void {\n if (this.disabled || this.static) {\n e.stopPropagation()\n e.preventDefault()\n return\n }\n if (e.key !== ' ' && e.key !== 'Enter') return\n\n // do not prevent default, so that parent elements can handle the key event\n this.endPress({ cancelled: false, actionData: { item: this } })\n }\n\n override beginPress(options: BeginPressConfig): void {\n if (this.disabled || this.static) {\n return\n }\n super.beginPress(options)\n this.ripple.beginPress(options.positionEvent)\n }\n\n override endPress(options: EndPressConfig): void {\n if (this.disabled || this.static) {\n return\n }\n super.endPress(options)\n this.ripple.endPress()\n }\n\n override handlePointerEnter(e: PointerEvent): void {\n if (this.disabled || this.static) {\n e.stopPropagation()\n e.preventDefault()\n return\n }\n this.ripple.beginHover(e)\n }\n\n override handlePointerLeave(e: PointerEvent): void {\n if (this.disabled || this.static) {\n e.stopPropagation()\n e.preventDefault()\n return\n }\n super.handlePointerLeave(e)\n\n this.ripple.endHover()\n }\n\n /**\n * Focuses list item and makes list item focusable via keyboard.\n */\n activate(): void {\n if (this.disabled || this.static) {\n return\n }\n this.setAttribute('tabindex', '0')\n this.focus()\n }\n\n /**\n * Returns true if list item is currently focused and is focusable.\n */\n isActive(): boolean {\n if (this.disabled || this.static) {\n return false\n }\n return this.getAttribute('tabindex') === '0'\n }\n\n /**\n * Removes list item from sequential keyboard navigation.\n */\n deactivate(): void {\n if (this.disabled || this.static) {\n return\n }\n this.removeAttribute('tabindex')\n }\n\n protected handleStartSlotChange(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"start\"]')\n if (slot) {\n this.hasStartItem = slot.assignedNodes({ flatten: true }).length > 0\n } else {\n this.hasStartItem = false\n }\n this.requestUpdate()\n }\n\n protected handleEndSlotChange(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"end\"]')\n if (slot) {\n this.hasEndItem = slot.assignedNodes({ flatten: true }).length > 0\n } else {\n this.hasEndItem = false\n }\n this.requestUpdate()\n }\n\n protected handleEndTextSlotChange(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"end-text\"]')\n if (slot) {\n this.hasEndTextItem = slot.assignedNodes({ flatten: true }).length > 0\n } else {\n this.hasEndTextItem = false\n }\n this.requestUpdate()\n }\n\n protected override render(): TemplateResult {\n const surfaceClasses = classMap({\n surface: true,\n })\n return html`\n ${this.renderFocusRing()} ${this.renderRipple()}\n <div class=\"${surfaceClasses}\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n `\n }\n\n protected renderRipple = (): TemplateResult => {\n const { disabled, static: isStatic } = this\n return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled || isStatic}\"></ui-ripple>`\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring\n part=\"focus-ring\"\n class=\"focus-ring\"\n .control=\"${this as HTMLElement}\"\n inward\n ></md-focus-ring>`\n }\n\n protected getStartClasses(): ClassInfo {\n return {\n 'start': true,\n 'has-start': this.hasStartItem,\n }\n }\n\n protected renderStart(): TemplateResult {\n return html`<div class=\"${classMap(this.getStartClasses())}\">\n <slot name=\"start\" @slotchange=${this.handleStartSlotChange}></slot>\n </div>`\n }\n\n protected getEndClasses(): ClassInfo {\n return {\n 'end': true,\n 'has-end': this.hasEndItem,\n 'has-end-text': this.hasEndTextItem,\n }\n }\n\n protected renderEnd(): TemplateResult {\n return html`<div class=\"${classMap(this.getEndClasses())}\">\n <slot name=\"end\" @slotchange=${this.handleEndSlotChange}></slot>\n <slot name=\"end-text\" class=\"trailing-supporting-text\" @slotchange=${this.handleEndTextSlotChange}></slot>\n </div>`\n }\n\n protected renderBody(): TemplateResult {\n const { lines = ListItemLines.one } = this\n const hasSupportingText = lines !== ListItemLines.one\n return html`\n <div class=\"body\">\n <slot name=\"overline\"></slot>\n <span class=\"headline\"><slot></slot></span>\n ${hasSupportingText ? html`<span class=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>` : ''}\n </div>\n `\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":";AAEA,wBA0MC"}
|
|
@@ -7,10 +7,12 @@ export default css `
|
|
|
7
7
|
cursor: default;
|
|
8
8
|
position: relative;
|
|
9
9
|
|
|
10
|
-
--md-
|
|
11
|
-
|
|
12
|
-
--md-focus-ring-shape-
|
|
13
|
-
--md-focus-ring-shape-
|
|
10
|
+
color: var(--md-sys-color-on-surface);
|
|
11
|
+
|
|
12
|
+
--md-focus-ring-shape-end-end: 8px;
|
|
13
|
+
--md-focus-ring-shape-end-start: 8px;
|
|
14
|
+
--md-focus-ring-shape-start-end: 8px;
|
|
15
|
+
--md-focus-ring-shape-start-start: 8px;
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
:host([disabled]) {
|
|
@@ -39,6 +41,8 @@ export default css `
|
|
|
39
41
|
align-items: center;
|
|
40
42
|
overflow: hidden;
|
|
41
43
|
padding: 8px 16px 8px 16px;
|
|
44
|
+
|
|
45
|
+
gap: 16px;
|
|
42
46
|
}
|
|
43
47
|
|
|
44
48
|
.ripple {
|
|
@@ -53,8 +57,6 @@ export default css `
|
|
|
53
57
|
}
|
|
54
58
|
|
|
55
59
|
.headline {
|
|
56
|
-
color: var(--md-sys-color-on-surface);
|
|
57
|
-
|
|
58
60
|
font-family: var(--md-sys-typescale-body-large-font);
|
|
59
61
|
font-weight: var(--md-sys-typescale-body-large-weight);
|
|
60
62
|
font-size: var(--md-sys-typescale-body-large-size);
|
|
@@ -91,7 +93,6 @@ export default css `
|
|
|
91
93
|
slot[name='end-text']::slotted(*) {
|
|
92
94
|
/* this is to make up to the 24px right padding defined in the spec. */
|
|
93
95
|
margin-right: 8px;
|
|
94
|
-
margin-left: 16px;
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
:host([lines='three']) .supporting-text {
|
|
@@ -123,21 +124,34 @@ export default css `
|
|
|
123
124
|
}
|
|
124
125
|
|
|
125
126
|
.start {
|
|
127
|
+
display: contents;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.start.has-start {
|
|
126
131
|
align-self: stretch;
|
|
127
132
|
display: flex;
|
|
128
133
|
justify-content: center;
|
|
129
134
|
align-items: center;
|
|
130
135
|
}
|
|
131
136
|
|
|
137
|
+
.end {
|
|
138
|
+
display: contents;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.end.has-end,
|
|
142
|
+
.end.has-end-text {
|
|
143
|
+
display: flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
gap: 8px;
|
|
146
|
+
}
|
|
147
|
+
|
|
132
148
|
:host slot[name='end']::slotted(*) {
|
|
133
149
|
color: var(--md-sys-color-on-surface-variant);
|
|
134
150
|
fill: var(--md-sys-color-on-surface-variant);
|
|
135
|
-
margin-left: 16px;
|
|
136
151
|
}
|
|
137
152
|
|
|
138
153
|
:host slot[name='start']::slotted(*) {
|
|
139
154
|
display: block;
|
|
140
|
-
margin-right: 16px;
|
|
141
155
|
}
|
|
142
156
|
|
|
143
157
|
:host([image='icon']) slot[name='start']::slotted(*) {
|
|
@@ -167,29 +181,25 @@ export default css `
|
|
|
167
181
|
flex-direction: column;
|
|
168
182
|
}
|
|
169
183
|
|
|
170
|
-
:host(.highlight) .
|
|
171
|
-
background-color: var(--md-sys-color-
|
|
172
|
-
|
|
173
|
-
position: absolute;
|
|
174
|
-
inset: 0;
|
|
175
|
-
z-index: 1;
|
|
184
|
+
:host(.highlight) .surface {
|
|
185
|
+
background-color: var(--md-sys-color-tertiary-container);
|
|
186
|
+
color: var(--md-sys-color-on-tertiary-container);
|
|
176
187
|
}
|
|
177
188
|
|
|
178
|
-
:host(.select) .
|
|
189
|
+
:host(.select) .surface {
|
|
179
190
|
background-color: var(--md-sys-color-secondary-container);
|
|
180
191
|
color: var(--md-sys-color-on-secondary-container);
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
z-index: 1;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
[name='overline'] {
|
|
195
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
196
|
+
font-family: var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));
|
|
197
|
+
font-size: var(--md-sys-typescale-label-small-size, 0.6875rem);
|
|
198
|
+
font-weight: var(
|
|
199
|
+
--md-sys-typescale-label-small-weight,
|
|
200
|
+
var(--md-ref-typeface-weight-medium, 500) --md-ref-typeface-weight-medium is not defined
|
|
201
|
+
);
|
|
202
|
+
line-height: var(--md-sys-typescale-label-small-line-height, 1rem);
|
|
193
203
|
}
|
|
194
204
|
`;
|
|
195
205
|
//# sourceMappingURL=ListItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0MjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: block;\n height: 56px;\n outline: none;\n cursor: default;\n position: relative;\n\n color: var(--md-sys-color-on-surface);\n\n --md-focus-ring-shape-end-end: 8px;\n --md-focus-ring-shape-end-start: 8px;\n --md-focus-ring-shape-start-end: 8px;\n --md-focus-ring-shape-start-start: 8px;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([lines='two']),\n :host([lines='one'][image='image']) {\n height: 72px;\n }\n\n :host([lines='three']),\n :host([lines='one'][image='video']) {\n height: 88px;\n }\n\n .surface {\n height: inherit;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n overflow: hidden;\n padding: 8px 16px 8px 16px;\n\n gap: 16px;\n }\n\n .ripple {\n z-index: 3;\n }\n\n :host([image='video']) .surface {\n /* The spec says the right padding is 24px but counting from the checkbox check border.\n This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n */\n padding: 12px 16px 12px 0px;\n }\n\n .headline {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n }\n\n .supporting-text {\n color: var(--md-sys-color-on-surface-variant);\n\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n\n overflow: hidden;\n }\n\n .supporting-text ::slotted(*),\n slot[name='end-text']::slotted(*) {\n margin: 0;\n padding: 0;\n overflow: hidden;\n }\n\n slot[name='end-text']::slotted(*) {\n /* this is to make up to the 24px right padding defined in the spec. */\n margin-right: 8px;\n }\n\n :host([lines='three']) .supporting-text {\n height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));\n }\n\n :host([lines='three']) .supporting-text ::slotted(*) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host([lines='two']) .supporting-text ::slotted(*) {\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .trailing-supporting-text {\n color: var(--md-sys-color-on-surface-variant);\n\n font-family: var(--md-sys-typescale-body-small-font);\n font-weight: var(--md-sys-typescale-body-small-weight);\n font-size: var(--md-sys-typescale-body-small-size);\n letter-spacing: var(--md-sys-typescale-body-small-tracking);\n line-height: var(--md-sys-typescale-body-small-height);\n }\n\n .start {\n display: contents;\n }\n\n .start.has-start {\n align-self: stretch;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .end {\n display: contents;\n }\n\n .end.has-end,\n .end.has-end-text {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n :host slot[name='end']::slotted(*) {\n color: var(--md-sys-color-on-surface-variant);\n fill: var(--md-sys-color-on-surface-variant);\n }\n\n :host slot[name='start']::slotted(*) {\n display: block;\n }\n\n :host([image='icon']) slot[name='start']::slotted(*) {\n width: 24px;\n height: 24px;\n }\n\n :host([image='avatar']) slot[name='start']::slotted(*) {\n width: 40px;\n height: 40px;\n }\n\n :host([image='image']) slot[name='start']::slotted(*) {\n width: 56px;\n height: 56px;\n }\n\n :host([image='video']) slot[name='start']::slotted(*) {\n width: 114px;\n height: 64px;\n }\n\n .body {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n :host(.highlight) .surface {\n background-color: var(--md-sys-color-tertiary-container);\n color: var(--md-sys-color-on-tertiary-container);\n }\n\n :host(.select) .surface {\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n [name='overline'] {\n color: var(--md-sys-color-on-surface-variant);\n font-family: var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));\n font-size: var(--md-sys-typescale-label-small-size, 0.6875rem);\n font-weight: var(\n --md-sys-typescale-label-small-weight,\n var(--md-ref-typeface-weight-medium, 500) --md-ref-typeface-weight-medium is not defined\n );\n line-height: var(--md-sys-typescale-label-small-line-height, 1rem);\n }\n`\n"]}
|
|
@@ -214,7 +214,7 @@ let UiMenuItem = (() => {
|
|
|
214
214
|
this.subMenuElement?.show();
|
|
215
215
|
this.dispatchEvent(new CustomEvent('submenu-open', {
|
|
216
216
|
detail: { subMenu: this.subMenuElement },
|
|
217
|
-
bubbles:
|
|
217
|
+
bubbles: false,
|
|
218
218
|
composed: true,
|
|
219
219
|
}));
|
|
220
220
|
}
|
|
@@ -246,7 +246,7 @@ let UiMenuItem = (() => {
|
|
|
246
246
|
// Bubble up the selection event
|
|
247
247
|
this.dispatchEvent(new CustomEvent('select', {
|
|
248
248
|
detail: e.detail,
|
|
249
|
-
bubbles:
|
|
249
|
+
bubbles: false,
|
|
250
250
|
composed: true,
|
|
251
251
|
}));
|
|
252
252
|
}
|
|
@@ -264,7 +264,7 @@ let UiMenuItem = (() => {
|
|
|
264
264
|
}
|
|
265
265
|
renderEnd() {
|
|
266
266
|
return html `<div class="end">
|
|
267
|
-
<slot name="end" @slotchange=${this.
|
|
267
|
+
<slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
|
|
268
268
|
<span class="trailing-supporting-text"><slot name="end-text"></slot></span>
|
|
269
269
|
${this.hasSubMenu ? html `<ui-icon class="menu-item-arrow">arrow_right</ui-icon>` : ''}
|
|
270
270
|
</div>`;
|
|
@@ -273,7 +273,7 @@ let UiMenuItem = (() => {
|
|
|
273
273
|
const showCheckIcon = this.showSelectionIcon && this.selected;
|
|
274
274
|
return html `<div class="start">
|
|
275
275
|
${showCheckIcon ? html `<ui-icon class="selection-check">check</ui-icon>` : ''}
|
|
276
|
-
<slot name="start" @slotchange=${this.
|
|
276
|
+
<slot name="start" @slotchange=${this.handleEndSlotChange}></slot>
|
|
277
277
|
</div>`;
|
|
278
278
|
}
|
|
279
279
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/MenuItem.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,UAAU,MAAM,kCAAkC,CAAA;AAEzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE/B,OAAO,sCAAsC,CAAA;AAC7C,OAAO,2BAA2B,CAAA;AAClC,OAAO,wBAAwB,CAAA;;sBASS,UAAU;;;;;;;;;;;;;;;;iBAA7B,UAAW,SAAQ,WAAU;;;mCAK/C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAM1B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iCAO1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAMzC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAoB3B,KAAK,EAAE;YAvCoB,0KAAS,OAAO,6BAAP,OAAO,yFAAoB;YAMpB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAO1B,oKAAS,KAAK,6BAAL,KAAK,qFAAoB;YAMhD,wMAAS,iBAAiB,6BAAjB,iBAAiB,6GAAQ;YAoBtD,sLAAmB,WAAW,6BAAX,WAAW,iGAAQ;;;QAvCnB,mFAAoC;QAJhE;;;WAGG;QACyB,IAAS,OAAO,6CAAoB;QAApC,IAAS,OAAO,mDAAoB;QAMpB,mIAAoB,KAAK;QAErE;;;;WAIG;WANkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAO1B,uIAAkC;QAL7E;;;;WAIG;QACwC,IAAS,KAAK,2CAAoB;QAAlC,IAAS,KAAK,iDAAoB;QAMhD,mJAA6B,KAAK;QAE/D;;WAEG;WAJ4D;QAJ/D;;;WAGG;QAC0B,IAAS,iBAAiB,uDAAQ;QAAlC,IAAS,iBAAiB,6DAAQ;QAE/D;;WAEG;QACH,IAAI,UAAU;YACZ,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAA;QAChD,CAAC;QAED;;WAEG;QACH,IAAI,cAAc;YAChB,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAA;YAC9B,OAAO,wBAAwB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAqB,CAAA;QACzE,CAAC;QAKQ,mJAAiC,KAAK,GAAA;QAH/C;;WAEG;QACM,IAAmB,WAAW,iDAAQ;QAAtC,IAAmB,WAAW,uDAAQ;QAE/C;YACE,KAAK,EAAE,CAAA;;YACP,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACrE,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACrE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;SACpE;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;YAErC,4DAA4D;YAC5D,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;gBACb,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACrB,CAAC;YAED,6BAA6B;YAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC7B,CAAC;QAEkB,OAAO,CAAC,iBAAuC;YAChE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAA;YAEhC,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;gBACrC,IAAI,CAAC,mBAAmB,EAAE,CAAA;gBAC1B,IAAI,CAAC,sBAAsB,EAAE,CAAA;YAC/B,CAAC;YAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC,oBAAoB,EAAE,CAAA;YAC7B,CAAC;QACH,CAAC;QAED;;WAEG;QACO,sBAAsB;YAC9B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;gBAEpC,6CAA6C;gBAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAc,CAAA;gBACpE,IAAI,UAAU,EAAE,CAAC;oBACf,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;gBAC/C,CAAC;YACH,CAAC;QACH,CAAC;QAED;;WAEG;QACO,mBAAmB;YAC3B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;gBAC1C,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAA;YAC9D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;gBACrC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAA;YACvC,CAAC;QACH,CAAC;QAED;;WAEG;QACO,oBAAoB;YAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;gBAC5B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YAC5C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;gBAC/B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;YAC7C,CAAC;QACH,CAAC;QAED;;WAEG;QACO,gBAAgB;YACxB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACzC,IAAI,CAAC,WAAW,EAAE,CAAA;YACpB,CAAC;QACH,CAAC;QAED;;WAEG;QACO,gBAAgB;YACxB,2DAA2D;YAC3D,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC3F,IAAI,CAAC,YAAY,EAAE,CAAA;gBACrB,CAAC;YACH,CAAC,EAAE,GAAG,CAAC,CAAA;QACT,CAAC;QAED;;WAEG;QACa,WAAW,CAAC,CAAa;YACvC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;YACtB,CAAC;QACH,CAAC;QAED;;WAEG;QACO,mBAAmB,CAAC,CAAa;YACzC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QACrB,CAAC;QAED;;WAEG;QACH,WAAW;YACT,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW;gBAAE,OAAM;YAEhD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;YACvB,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAA;YAE3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE;gBACxC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAED;;WAEG;QACH,YAAY;YACV,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAM;YAE7B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;YACxB,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAA;QAC7B,CAAC;QAED;;WAEG;QACH,aAAa;YACX,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,IAAI,CAAC,YAAY,EAAE,CAAA;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,EAAE,CAAA;YACpB,CAAC;QACH,CAAC;QAED;;WAEG;QACO,mBAAmB,CAAC,CAAc;YAC1C,gCAAgC;YAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE,CAAC,CAAC,MAAM;gBAChB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAEQ,MAAM;YACb,MAAM,OAAO,GAAG,QAAQ,CAAC;gBACvB,SAAS,EAAE,IAAI;gBACf,WAAW,EAAE,IAAI;gBACjB,wBAAwB,EAAE,IAAI,CAAC,UAAU;gBACzC,cAAc,EAAE,IAAI,CAAC,WAAW;aACjC,CAAC,CAAA;YAEF,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE;mBAClC,OAAO,oBAAoB,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE;KACpG,CAAA;QACH,CAAC;QAEkB,SAAS;YAC1B,OAAO,IAAI,CAAA;qCACsB,IAAI,CAAC,gBAAgB;;QAElD,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,wDAAwD,CAAC,CAAC,CAAC,EAAE;WAChF,CAAA;QACT,CAAC;QAEkB,WAAW;YAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAA;YAE7D,OAAO,IAAI,CAAA;QACP,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,kDAAkD,CAAC,CAAC,CAAC,EAAE;uCAC5C,IAAI,CAAC,gBAAgB;WACjD,CAAA;QACT,CAAC;;;AA5PH;;;;;;GAMG;AACH,0BAsPC","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport UiSubMenu from './SubMenu.js'\nimport { findElementInShadowRoots } from '../../../lib/Dom.js'\nimport { nanoid } from 'nanoid'\n\nimport '@material/web/focus/md-focus-ring.js'\nimport '../../ripple/ui-ripple.js'\nimport '../../icons/ui-icon.js'\n\n/**\n * Material Design 3 Menu Item component.\n *\n * @slot - The menu item content (label, icon, etc.)\n * @fires select - Dispatched when the menu item is selected\n * @fires submenu-open - Dispatched when a sub-menu is opened\n */\nexport default class UiMenuItem extends UiListItem {\n /**\n * The ID of the associated submenu\n * @attribute\n */\n @property({ type: String }) accessor submenu: string | undefined\n\n /**\n * Whether this menu item is selected\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor selected = false\n\n /**\n * The value associated with this menu item. Use it to identify value associated with the menu item,\n * when selected.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor value: string | undefined\n\n /**\n * Whether to automatically show a check icon when selected\n * @attribute\n */\n @property({ type: Boolean }) accessor showSelectionIcon = false\n\n /**\n * Whether the menu item has a sub-menu\n */\n get hasSubMenu(): boolean {\n return !!this.submenu && !!this.subMenuElement\n }\n\n /**\n * Reference to the sub-menu element\n */\n get subMenuElement(): UiSubMenu | null {\n if (!this.submenu) return null\n return findElementInShadowRoots(this.submenu, this) as UiSubMenu | null\n }\n\n /**\n * Whether the sub-menu is open\n */\n @state() protected accessor subMenuOpen = false\n\n constructor() {\n super()\n this.addEventListener('mouseenter', this.handleMouseEnter.bind(this))\n this.addEventListener('mouseleave', this.handleMouseLeave.bind(this))\n this.addEventListener('click', this.handleMenuItemClick.bind(this))\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.setAttribute('role', 'menuitem')\n\n // Generate ID if not present (needed for submenu anchoring)\n if (!this.id) {\n this.id = nanoid(6)\n }\n\n // Initialize selection state\n this.updateSelectionState()\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties)\n\n if (changedProperties.has('submenu')) {\n this.updateAccessibility()\n this.setupSubmenuConnection()\n }\n\n if (changedProperties.has('selected')) {\n this.updateSelectionState()\n }\n }\n\n /**\n * Sets up the connection between this menu item and its submenu\n */\n protected setupSubmenuConnection(): void {\n if (this.subMenuElement) {\n this.subMenuElement.anchor = this.id\n\n // Find parent menu and set it on the submenu\n const parentMenu = this.closest('ui-menu, ui-sub-menu') as UiSubMenu\n if (parentMenu) {\n this.subMenuElement.setParentMenu(parentMenu)\n }\n }\n }\n\n /**\n * Updates accessibility attributes\n */\n protected updateAccessibility(): void {\n if (this.hasSubMenu) {\n this.setAttribute('aria-haspopup', 'true')\n this.setAttribute('aria-expanded', String(this.subMenuOpen))\n } else {\n this.removeAttribute('aria-haspopup')\n this.removeAttribute('aria-expanded')\n }\n }\n\n /**\n * Updates the selection state styling\n */\n protected updateSelectionState(): void {\n if (this.selected) {\n this.classList.add('select')\n this.setAttribute('aria-selected', 'true')\n } else {\n this.classList.remove('select')\n this.setAttribute('aria-selected', 'false')\n }\n }\n\n /**\n * Handles mouse enter events\n */\n protected handleMouseEnter(): void {\n if (this.hasSubMenu && !this.subMenuOpen) {\n this.openSubMenu()\n }\n }\n\n /**\n * Handles mouse leave events\n */\n protected handleMouseLeave(): void {\n // Close sub-menu after a delay to allow moving to sub-menu\n setTimeout(() => {\n if (this.subMenuOpen && !this.matches(':hover') && !this.subMenuElement?.matches(':hover')) {\n this.closeSubMenu()\n }\n }, 100)\n }\n\n /**\n * Handles click events\n */\n public override handleClick(e: MouseEvent): void {\n if (this.hasSubMenu) {\n e.preventDefault()\n e.stopPropagation()\n this.toggleSubMenu()\n } else {\n super.handleClick(e)\n }\n }\n\n /**\n * Handles menu item click events\n */\n protected handleMenuItemClick(e: MouseEvent): void {\n this.handleClick(e)\n }\n\n /**\n * Opens the sub-menu\n */\n openSubMenu(): void {\n if (!this.hasSubMenu || this.subMenuOpen) return\n\n this.subMenuOpen = true\n this.updateAccessibility()\n this.subMenuElement?.show()\n\n this.dispatchEvent(\n new CustomEvent('submenu-open', {\n detail: { subMenu: this.subMenuElement },\n bubbles: true,\n composed: true,\n })\n )\n }\n\n /**\n * Closes the sub-menu\n */\n closeSubMenu(): void {\n if (!this.subMenuOpen) return\n\n this.subMenuOpen = false\n this.updateAccessibility()\n this.subMenuElement?.hide()\n }\n\n /**\n * Toggles the sub-menu\n */\n toggleSubMenu(): void {\n if (this.subMenuOpen) {\n this.closeSubMenu()\n } else {\n this.openSubMenu()\n }\n }\n\n /**\n * Handles sub-menu item selection\n */\n protected handleSubMenuSelect(e: CustomEvent): void {\n // Bubble up the selection event\n this.dispatchEvent(\n new CustomEvent('select', {\n detail: e.detail,\n bubbles: true,\n composed: true,\n })\n )\n }\n\n override render(): TemplateResult {\n const classes = classMap({\n 'surface': true,\n 'menu-item': true,\n 'menu-item-with-submenu': this.hasSubMenu,\n 'submenu-open': this.subMenuOpen,\n })\n\n return html`\n ${this.renderFocusRing()} ${this.renderRipple()}\n <div class=${classes} role=\"menuitem\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n `\n }\n\n protected override renderEnd(): TemplateResult {\n return html`<div class=\"end\">\n <slot name=\"end\" @slotchange=${this.handleSlotChange}></slot>\n <span class=\"trailing-supporting-text\"><slot name=\"end-text\"></slot></span>\n ${this.hasSubMenu ? html`<ui-icon class=\"menu-item-arrow\">arrow_right</ui-icon>` : ''}\n </div>`\n }\n\n protected override renderStart(): TemplateResult {\n const showCheckIcon = this.showSelectionIcon && this.selected\n\n return html`<div class=\"start\">\n ${showCheckIcon ? html`<ui-icon class=\"selection-check\">check</ui-icon>` : ''}\n <slot name=\"start\" @slotchange=${this.handleSlotChange}></slot>\n </div>`\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/MenuItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport UiSubMenu from './SubMenu.js'\nimport { findElementInShadowRoots } from '../../../lib/Dom.js'\nimport { nanoid } from 'nanoid'\n\nimport '@material/web/focus/md-focus-ring.js'\nimport '../../ripple/ui-ripple.js'\nimport '../../icons/ui-icon.js'\n\n/**\n * Material Design 3 Menu Item component.\n *\n * @slot - The menu item content (label, icon, etc.)\n * @fires select - Dispatched when the menu item is selected\n * @fires submenu-open - Dispatched when a sub-menu is opened\n */\nexport default class UiMenuItem extends UiListItem {\n /**\n * The ID of the associated submenu\n * @attribute\n */\n @property({ type: String }) accessor submenu: string | undefined\n\n /**\n * Whether this menu item is selected\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor selected = false\n\n /**\n * The value associated with this menu item. Use it to identify value associated with the menu item,\n * when selected.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor value: string | undefined\n\n /**\n * Whether to automatically show a check icon when selected\n * @attribute\n */\n @property({ type: Boolean }) accessor showSelectionIcon = false\n\n /**\n * Whether the menu item has a sub-menu\n */\n get hasSubMenu(): boolean {\n return !!this.submenu && !!this.subMenuElement\n }\n\n /**\n * Reference to the sub-menu element\n */\n get subMenuElement(): UiSubMenu | null {\n if (!this.submenu) return null\n return findElementInShadowRoots(this.submenu, this) as UiSubMenu | null\n }\n\n /**\n * Whether the sub-menu is open\n */\n @state() protected accessor subMenuOpen = false\n\n constructor() {\n super()\n this.addEventListener('mouseenter', this.handleMouseEnter.bind(this))\n this.addEventListener('mouseleave', this.handleMouseLeave.bind(this))\n this.addEventListener('click', this.handleMenuItemClick.bind(this))\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.setAttribute('role', 'menuitem')\n\n // Generate ID if not present (needed for submenu anchoring)\n if (!this.id) {\n this.id = nanoid(6)\n }\n\n // Initialize selection state\n this.updateSelectionState()\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties)\n\n if (changedProperties.has('submenu')) {\n this.updateAccessibility()\n this.setupSubmenuConnection()\n }\n\n if (changedProperties.has('selected')) {\n this.updateSelectionState()\n }\n }\n\n /**\n * Sets up the connection between this menu item and its submenu\n */\n protected setupSubmenuConnection(): void {\n if (this.subMenuElement) {\n this.subMenuElement.anchor = this.id\n\n // Find parent menu and set it on the submenu\n const parentMenu = this.closest('ui-menu, ui-sub-menu') as UiSubMenu\n if (parentMenu) {\n this.subMenuElement.setParentMenu(parentMenu)\n }\n }\n }\n\n /**\n * Updates accessibility attributes\n */\n protected updateAccessibility(): void {\n if (this.hasSubMenu) {\n this.setAttribute('aria-haspopup', 'true')\n this.setAttribute('aria-expanded', String(this.subMenuOpen))\n } else {\n this.removeAttribute('aria-haspopup')\n this.removeAttribute('aria-expanded')\n }\n }\n\n /**\n * Updates the selection state styling\n */\n protected updateSelectionState(): void {\n if (this.selected) {\n this.classList.add('select')\n this.setAttribute('aria-selected', 'true')\n } else {\n this.classList.remove('select')\n this.setAttribute('aria-selected', 'false')\n }\n }\n\n /**\n * Handles mouse enter events\n */\n protected handleMouseEnter(): void {\n if (this.hasSubMenu && !this.subMenuOpen) {\n this.openSubMenu()\n }\n }\n\n /**\n * Handles mouse leave events\n */\n protected handleMouseLeave(): void {\n // Close sub-menu after a delay to allow moving to sub-menu\n setTimeout(() => {\n if (this.subMenuOpen && !this.matches(':hover') && !this.subMenuElement?.matches(':hover')) {\n this.closeSubMenu()\n }\n }, 100)\n }\n\n /**\n * Handles click events\n */\n public override handleClick(e: MouseEvent): void {\n if (this.hasSubMenu) {\n e.preventDefault()\n e.stopPropagation()\n this.toggleSubMenu()\n } else {\n super.handleClick(e)\n }\n }\n\n /**\n * Handles menu item click events\n */\n protected handleMenuItemClick(e: MouseEvent): void {\n this.handleClick(e)\n }\n\n /**\n * Opens the sub-menu\n */\n openSubMenu(): void {\n if (!this.hasSubMenu || this.subMenuOpen) return\n\n this.subMenuOpen = true\n this.updateAccessibility()\n this.subMenuElement?.show()\n\n this.dispatchEvent(\n new CustomEvent('submenu-open', {\n detail: { subMenu: this.subMenuElement },\n bubbles: false,\n composed: true,\n })\n )\n }\n\n /**\n * Closes the sub-menu\n */\n closeSubMenu(): void {\n if (!this.subMenuOpen) return\n\n this.subMenuOpen = false\n this.updateAccessibility()\n this.subMenuElement?.hide()\n }\n\n /**\n * Toggles the sub-menu\n */\n toggleSubMenu(): void {\n if (this.subMenuOpen) {\n this.closeSubMenu()\n } else {\n this.openSubMenu()\n }\n }\n\n /**\n * Handles sub-menu item selection\n */\n protected handleSubMenuSelect(e: CustomEvent): void {\n // Bubble up the selection event\n this.dispatchEvent(\n new CustomEvent('select', {\n detail: e.detail,\n bubbles: false,\n composed: true,\n })\n )\n }\n\n override render(): TemplateResult {\n const classes = classMap({\n 'surface': true,\n 'menu-item': true,\n 'menu-item-with-submenu': this.hasSubMenu,\n 'submenu-open': this.subMenuOpen,\n })\n\n return html`\n ${this.renderFocusRing()} ${this.renderRipple()}\n <div class=${classes} role=\"menuitem\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n `\n }\n\n protected override renderEnd(): TemplateResult {\n return html`<div class=\"end\">\n <slot name=\"end\" @slotchange=${this.handleEndSlotChange}></slot>\n <span class=\"trailing-supporting-text\"><slot name=\"end-text\"></slot></span>\n ${this.hasSubMenu ? html`<ui-icon class=\"menu-item-arrow\">arrow_right</ui-icon>` : ''}\n </div>`\n }\n\n protected override renderStart(): TemplateResult {\n const showCheckIcon = this.showSelectionIcon && this.selected\n\n return html`<div class=\"start\">\n ${showCheckIcon ? html`<ui-icon class=\"selection-check\">check</ui-icon>` : ''}\n <slot name=\"start\" @slotchange=${this.handleEndSlotChange}></slot>\n </div>`\n }\n}\n"]}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { UiRange } from './Range.js';
|
|
2
|
+
import { type TemplateResult } from 'lit';
|
|
3
|
+
/**
|
|
4
|
+
* A circular progress indicator component that displays progress in a circular format.
|
|
5
|
+
*
|
|
6
|
+
* This component supports both determinate and indeterminate progress states:
|
|
7
|
+
* - **Determinate**: Shows a specific progress value with a filled arc
|
|
8
|
+
* - **Indeterminate**: Shows continuous animation without a specific value
|
|
9
|
+
*
|
|
10
|
+
* The component inherits from UiRange and provides additional features like:
|
|
11
|
+
* - Four-color animation for indeterminate state
|
|
12
|
+
* - Material Design 3 styling
|
|
13
|
+
* - Accessibility support with proper ARIA attributes
|
|
14
|
+
* - Customizable size and colors via CSS custom properties
|
|
15
|
+
*
|
|
16
|
+
* ## Accessibility
|
|
17
|
+
*
|
|
18
|
+
* For accessibility compliance, you must provide an accessible name for the progress indicator.
|
|
19
|
+
* Use the `aria-label` attribute to describe what the progress represents:
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```html
|
|
23
|
+
* <!-- Basic determinate progress -->
|
|
24
|
+
* <ui-circular-progress value="50" max="100" aria-label="Upload progress"></ui-circular-progress>
|
|
25
|
+
*
|
|
26
|
+
* <!-- Indeterminate progress -->
|
|
27
|
+
* <ui-circular-progress indeterminate aria-label="Loading content"></ui-circular-progress>
|
|
28
|
+
*
|
|
29
|
+
* <!-- Four-color indeterminate progress -->
|
|
30
|
+
* <ui-circular-progress indeterminate fourcolor aria-label="Processing data"></ui-circular-progress>
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @fires ratiochange - Inherited from UiRange. Dispatched when the ratio computation changes.
|
|
34
|
+
*/
|
|
35
|
+
export default class CircularProgress extends UiRange {
|
|
36
|
+
/**
|
|
37
|
+
* Gets the disabled state of the progress indicator.
|
|
38
|
+
* @returns True if the component is disabled, false otherwise.
|
|
39
|
+
*/
|
|
40
|
+
get disabled(): boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Sets the disabled state of the progress indicator.
|
|
43
|
+
* When disabled, the component may have reduced visual emphasis
|
|
44
|
+
* and should not respond to user interactions.
|
|
45
|
+
* @attribute
|
|
46
|
+
*/
|
|
47
|
+
set disabled(value: boolean);
|
|
48
|
+
/**
|
|
49
|
+
* Enables four-color animation for indeterminate progress indicators.
|
|
50
|
+
*
|
|
51
|
+
* When enabled, the indeterminate progress indicator cycles between four colors:
|
|
52
|
+
* - Primary color (--ui-circular-progress-four-color-active-indicator-one-color)
|
|
53
|
+
* - Primary container (--ui-circular-progress-four-color-active-indicator-two-color)
|
|
54
|
+
* - Tertiary color (--ui-circular-progress-four-color-active-indicator-three-color)
|
|
55
|
+
* - Tertiary container (--ui-circular-progress-four-color-active-indicator-four-color)
|
|
56
|
+
*
|
|
57
|
+
* This property only affects the appearance when `indeterminate` is true.
|
|
58
|
+
*
|
|
59
|
+
* @default false
|
|
60
|
+
* @attribute fourcolor
|
|
61
|
+
*/
|
|
62
|
+
accessor fourColor: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Renders the circular progress indicator.
|
|
65
|
+
*
|
|
66
|
+
* Chooses between determinate and indeterminate rendering based on the
|
|
67
|
+
* `indeterminate` property inherited from UiRange.
|
|
68
|
+
*
|
|
69
|
+
* @returns The template result for the progress indicator.
|
|
70
|
+
*/
|
|
71
|
+
protected render(): TemplateResult;
|
|
72
|
+
/**
|
|
73
|
+
* Renders the determinate progress indicator using SVG.
|
|
74
|
+
*
|
|
75
|
+
* Creates a circular progress bar that shows a specific progress value
|
|
76
|
+
* using stroke-dashoffset to control the visible portion of the circle.
|
|
77
|
+
* The progress is calculated based on the current value, min, and max properties.
|
|
78
|
+
*
|
|
79
|
+
* @returns SVG template with track and active track circles.
|
|
80
|
+
*/
|
|
81
|
+
private renderDeterminateContainer;
|
|
82
|
+
/**
|
|
83
|
+
* Renders the indeterminate progress indicator using CSS animations.
|
|
84
|
+
*
|
|
85
|
+
* Creates a spinning animation with two half-circles that expand and contract
|
|
86
|
+
* to create a continuous loading animation. The animation can cycle through
|
|
87
|
+
* multiple colors when the `fourColor` property is enabled.
|
|
88
|
+
*
|
|
89
|
+
* @returns HTML template with animated spinner elements.
|
|
90
|
+
*/
|
|
91
|
+
private renderIndeterminateContainer;
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=CircularProgress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../../../src/md/progress/internals/CircularProgress.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAA;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,OAAO;IACnD;;;OAGG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;;;OAKG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;;;;;;;;;;;OAaG;IACyC,QAAQ,CAAC,SAAS,UAAQ;IAEtE;;;;;;;OAOG;cACgB,MAAM,IAAI,cAAc;IAO3C;;;;;;;;OAQG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;;;;;;;OAQG;IACH,OAAO,CAAC,4BAA4B;CAUrC"}
|