@universal-material/web 3.6.16 → 3.6.18
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/custom-elements.json +5448 -5433
- package/overflow-menu/overflow-menu-item.d.ts +3 -0
- package/overflow-menu/overflow-menu-item.d.ts.map +1 -1
- package/overflow-menu/overflow-menu-item.js +18 -0
- package/overflow-menu/overflow-menu-item.js.map +1 -1
- package/overflow-menu/overflow-menu.d.ts +1 -0
- package/overflow-menu/overflow-menu.d.ts.map +1 -1
- package/overflow-menu/overflow-menu.js +2 -2
- package/overflow-menu/overflow-menu.js.map +1 -1
- package/package.json +1 -1
- package/vscode.html-custom-data.json +246 -246
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { HTMLTemplateResult, LitElement } from 'lit';
|
|
2
2
|
export declare class OverflowMenuItem extends LitElement {
|
|
3
|
+
#private;
|
|
3
4
|
static styles: import("lit").CSSResult;
|
|
4
5
|
label: string;
|
|
5
6
|
collapse: 'auto' | 'always';
|
|
6
7
|
icons: HTMLElement[];
|
|
8
|
+
connectedCallback(): void;
|
|
9
|
+
disconnectedCallback(): void;
|
|
7
10
|
protected render(): HTMLTemplateResult;
|
|
8
11
|
}
|
|
9
12
|
//# sourceMappingURL=overflow-menu-item.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflow-menu-item.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"overflow-menu-item.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKhE,qBACa,gBAAiB,SAAQ,UAAU;;IAC9C,OAAgB,MAAM,0BAIpB;IASF,KAAK,SAAM;IAEkB,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAU;IAEzC,KAAK,EAAG,WAAW,EAAE,CAAC;IAEtC,iBAAiB;IAWjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAOhD"}
|
|
@@ -4,6 +4,7 @@ import { customElement, property, queryAssignedElements } from 'lit/decorators.j
|
|
|
4
4
|
let OverflowMenuItem = class OverflowMenuItem extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
+
this.#mutationObserver = new MutationObserver(() => this.#parent?._renderMenuItems());
|
|
7
8
|
this.label = '';
|
|
8
9
|
this.collapse = 'auto';
|
|
9
10
|
}
|
|
@@ -12,6 +13,23 @@ let OverflowMenuItem = class OverflowMenuItem extends LitElement {
|
|
|
12
13
|
display: none;
|
|
13
14
|
}
|
|
14
15
|
`; }
|
|
16
|
+
#mutationObserver;
|
|
17
|
+
get #parent() {
|
|
18
|
+
return this.parentElement;
|
|
19
|
+
}
|
|
20
|
+
connectedCallback() {
|
|
21
|
+
super.connectedCallback();
|
|
22
|
+
this.#mutationObserver.observe(this, {
|
|
23
|
+
subtree: true,
|
|
24
|
+
characterData: true,
|
|
25
|
+
childList: true,
|
|
26
|
+
attributeFilter: ['label'],
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
disconnectedCallback() {
|
|
30
|
+
super.disconnectedCallback();
|
|
31
|
+
this.#mutationObserver.disconnect();
|
|
32
|
+
}
|
|
15
33
|
render() {
|
|
16
34
|
return html `
|
|
17
35
|
<u-icon-button title="${this.label}">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflow-menu-item.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"overflow-menu-item.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAK5E,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAOI,sBAAiB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,CAAC;QAO1F,UAAK,GAAG,EAAE,CAAC;QAEkB,aAAQ,GAAsB,MAAM,CAAC;IA2BpE,CAAC;aA1CiB,WAAM,GAAG,GAAG,CAAA;;;;GAI3B,AAJqB,CAIpB;IAEO,iBAAiB,CAAgE;IAE1F,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,aAAoC,CAAC;IACnD,CAAC;IASQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,eAAe,EAAE,CAAC,OAAO,CAAC;SAC3B,CAAC,CAAC;IACL,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,KAAK;;;KAGnC,CAAC;IACJ,CAAC;;AA5BD;IADC,QAAQ,EAAE;+CACA;AAEkB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAsC;AAEzC;IAAxB,qBAAqB,EAAE;+CAAuB;AAlBpC,gBAAgB;IAD5B,aAAa,CAAC,sBAAsB,CAAC;GACzB,gBAAgB,CA2C5B","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { type OverflowMenu } from './overflow-menu';\n\n@customElement('u-overflow-menu-item')\nexport class OverflowMenuItem extends LitElement {\n static override styles = css`\n :host([collapse=always]) {\n display: none;\n }\n `;\n\n readonly #mutationObserver = new MutationObserver(() => this.#parent?._renderMenuItems());\n\n get #parent(): OverflowMenu | null {\n return this.parentElement as OverflowMenu | null;\n }\n\n @property()\n label = '';\n\n @property({ reflect: true }) collapse: 'auto' | 'always' = 'auto';\n\n @queryAssignedElements() icons!: HTMLElement[];\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#mutationObserver.observe(this, {\n subtree: true,\n characterData: true,\n childList: true,\n attributeFilter: ['label'],\n });\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#mutationObserver.disconnect();\n }\n\n protected override render(): HTMLTemplateResult {\n return html`\n <u-icon-button title=\"${this.label}\">\n <slot></slot>\n </u-icon-button>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAU,MAAM,KAAK,CAAC;AAMnE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIzC,qBACa,YAAa,SAAQ,UAAU;;IAC1C,OAAgB,MAAM,0BAAU;IAMvB,WAAW,UAAS;IAEZ,IAAI,CAAC,EAAE,MAAM,CAAC;IAG/B,IACI,MAAM,CAAC,KAAK,EAQF,WAAW,GAAG,IAAI,AARhB,EAMf;IAED,IAAI,MAAM,IAAI,WAAW,GAAG,IAAI,CAE/B;;IAaQ,iBAAiB;IAMjB,oBAAoB;cA+EV,MAAM,IAAI,kBAAkB;
|
|
1
|
+
{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAU,MAAM,KAAK,CAAC;AAMnE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIzC,qBACa,YAAa,SAAQ,UAAU;;IAC1C,OAAgB,MAAM,0BAAU;IAMvB,WAAW,UAAS;IAEZ,IAAI,CAAC,EAAE,MAAM,CAAC;IAG/B,IACI,MAAM,CAAC,KAAK,EAQF,WAAW,GAAG,IAAI,AARhB,EAMf;IAED,IAAI,MAAM,IAAI,WAAW,GAAG,IAAI,CAE/B;;IAaQ,iBAAiB;IAMjB,oBAAoB;cA+EV,MAAM,IAAI,kBAAkB;IAiC/C,gBAAgB;CAoBjB"}
|
|
@@ -96,7 +96,7 @@ let OverflowMenu = class OverflowMenu extends LitElement {
|
|
|
96
96
|
this.#invalidate();
|
|
97
97
|
}
|
|
98
98
|
render() {
|
|
99
|
-
this
|
|
99
|
+
this._renderMenuItems();
|
|
100
100
|
const classes = { 'show-menu': this._renderMenu };
|
|
101
101
|
return html `
|
|
102
102
|
<div class="container ${classMap(classes)}">
|
|
@@ -125,7 +125,7 @@ let OverflowMenu = class OverflowMenu extends LitElement {
|
|
|
125
125
|
</div>
|
|
126
126
|
`;
|
|
127
127
|
}
|
|
128
|
-
|
|
128
|
+
_renderMenuItems() {
|
|
129
129
|
const menuItems = html `
|
|
130
130
|
${map(this.#collapsedItems, item => {
|
|
131
131
|
const nodes = item.childNodes.values();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, render } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { map } from 'lit/directives/map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { OverflowMenuItem } from './overflow-menu-item.js';\nimport { styles } from './overflow-menu.styles.js';\n\n@customElement('u-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = styles;\n readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => this.#invalidate());\n #items: OverflowMenuItem[] = [];\n\n readonly #collapsedItems: OverflowMenuItem[] = [];\n\n @state() _renderMenu = false;\n\n @query('u-menu') menu?: UmMenu;\n\n #anchor: HTMLElement | null = null;\n @property()\n set anchor(value) {\n this.#anchor = value;\n\n this.#invalidate();\n this.#resizeObserver.disconnect();\n this.#resizeObserver.observe(this.anchor!);\n }\n\n get anchor(): HTMLElement | null {\n return this.#anchor ?? this;\n }\n\n readonly #menuItemsContainer = document.createElement('div');\n\n #updateMenusTimeout = 0;\n\n constructor() {\n super();\n\n this.#menuItemsContainer.slot = 'menu-items';\n setTimeout(() => this.appendChild(this.#menuItemsContainer));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.anchor = this.anchor;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#resizeObserver.disconnect();\n }\n\n #invalidate(): void {\n\n this.#updateMenuToggleVisibility();\n this.#updateMenuItems();\n }\n\n #updateMenuToggleVisibility(): void {\n\n let collapsedCount = 0;\n let hasAlwaysCollapsedItems = false;\n\n for (const item of this.#items) {\n\n hasAlwaysCollapsedItems = hasAlwaysCollapsedItems || item.collapse === 'always';\n\n if (this.#isNotCollapsedMenuItem(item)) {\n continue;\n }\n\n collapsedCount++;\n }\n\n const firstItem = this.#items[0];\n const renderMenu = hasAlwaysCollapsedItems || !!firstItem && (this._renderMenu\n ? collapsedCount > 1\n : collapsedCount > 0);\n\n if (this._renderMenu !== renderMenu) {\n this._renderMenu = renderMenu;\n }\n }\n\n #updateMenuItems(): void {\n\n if (!this._renderMenu) {\n this.#collapsedItems.length = 0;\n return;\n }\n\n clearTimeout(this.#updateMenusTimeout);\n\n this.#updateMenusTimeout = setTimeout(() => {\n const previousCollapsedLength = this.#collapsedItems.length;\n this.#collapsedItems.length = 0;\n\n for (const item of this.#items) {\n\n if (this.#isNotCollapsedMenuItem(item)) {\n continue;\n }\n\n this.#collapsedItems.push(item);\n }\n\n if (previousCollapsedLength !== this.#collapsedItems.length) {\n this.requestUpdate();\n }\n }, 100);\n }\n\n #isNotCollapsedMenuItem(item: OverflowMenuItem) {\n return item.offsetTop === this.offsetTop && item.collapse !== 'always';\n }\n\n #handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.#items = slot\n .assignedElements()\n .filter(el => el.tagName === 'U-OVERFLOW-MENU-ITEM')\n .reverse() as OverflowMenuItem[];\n\n this.#invalidate();\n }\n\n protected override render(): HTMLTemplateResult {\n this
|
|
1
|
+
{"version":3,"file":"overflow-menu.js","sourceRoot":"","sources":["../../src/overflow-menu/overflow-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, render } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { map } from 'lit/directives/map.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { OverflowMenuItem } from './overflow-menu-item.js';\nimport { styles } from './overflow-menu.styles.js';\n\n@customElement('u-overflow-menu')\nexport class OverflowMenu extends LitElement {\n static override styles = styles;\n readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => this.#invalidate());\n #items: OverflowMenuItem[] = [];\n\n readonly #collapsedItems: OverflowMenuItem[] = [];\n\n @state() _renderMenu = false;\n\n @query('u-menu') menu?: UmMenu;\n\n #anchor: HTMLElement | null = null;\n @property()\n set anchor(value) {\n this.#anchor = value;\n\n this.#invalidate();\n this.#resizeObserver.disconnect();\n this.#resizeObserver.observe(this.anchor!);\n }\n\n get anchor(): HTMLElement | null {\n return this.#anchor ?? this;\n }\n\n readonly #menuItemsContainer = document.createElement('div');\n\n #updateMenusTimeout = 0;\n\n constructor() {\n super();\n\n this.#menuItemsContainer.slot = 'menu-items';\n setTimeout(() => this.appendChild(this.#menuItemsContainer));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.anchor = this.anchor;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#resizeObserver.disconnect();\n }\n\n #invalidate(): void {\n\n this.#updateMenuToggleVisibility();\n this.#updateMenuItems();\n }\n\n #updateMenuToggleVisibility(): void {\n\n let collapsedCount = 0;\n let hasAlwaysCollapsedItems = false;\n\n for (const item of this.#items) {\n\n hasAlwaysCollapsedItems = hasAlwaysCollapsedItems || item.collapse === 'always';\n\n if (this.#isNotCollapsedMenuItem(item)) {\n continue;\n }\n\n collapsedCount++;\n }\n\n const firstItem = this.#items[0];\n const renderMenu = hasAlwaysCollapsedItems || !!firstItem && (this._renderMenu\n ? collapsedCount > 1\n : collapsedCount > 0);\n\n if (this._renderMenu !== renderMenu) {\n this._renderMenu = renderMenu;\n }\n }\n\n #updateMenuItems(): void {\n\n if (!this._renderMenu) {\n this.#collapsedItems.length = 0;\n return;\n }\n\n clearTimeout(this.#updateMenusTimeout);\n\n this.#updateMenusTimeout = setTimeout(() => {\n const previousCollapsedLength = this.#collapsedItems.length;\n this.#collapsedItems.length = 0;\n\n for (const item of this.#items) {\n\n if (this.#isNotCollapsedMenuItem(item)) {\n continue;\n }\n\n this.#collapsedItems.push(item);\n }\n\n if (previousCollapsedLength !== this.#collapsedItems.length) {\n this.requestUpdate();\n }\n }, 100);\n }\n\n #isNotCollapsedMenuItem(item: OverflowMenuItem) {\n return item.offsetTop === this.offsetTop && item.collapse !== 'always';\n }\n\n #handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.#items = slot\n .assignedElements()\n .filter(el => el.tagName === 'U-OVERFLOW-MENU-ITEM')\n .reverse() as OverflowMenuItem[];\n\n this.#invalidate();\n }\n\n protected override render(): HTMLTemplateResult {\n this._renderMenuItems();\n\n const classes = { 'show-menu': this._renderMenu };\n\n return html`\n <div class=\"container ${classMap(classes)}\">\n <div class=\"items-set\">\n <div class=\"empty-space\"></div>\n <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\n </div>\n ${when(this._renderMenu, () => html`\n <div class=\"inner-menu\">\n <u-icon-button @click=${{ handleEvent: () => this.menu?.toggle() }}>\n <slot name=\"icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\"\n fill=\"currentColor\">\n <path\n d=\"M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 \n 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 \n 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z\"/>\n </svg>\n </slot>\n </u-icon-button>\n <u-menu anchor-corner=\"end-end\">\n <slot name=\"menu-items\"></slot>\n </u-menu>\n </div>\n `)}\n </div>\n `;\n }\n\n _renderMenuItems() {\n const menuItems = html`\n ${map(\n this.#collapsedItems,\n item => {\n const nodes = item.childNodes.values();\n\n return html`\n <u-menu-item @click=${{ handleEvent: () => item.click() }}>\n <div slot=\"leading-icon\">\n ${map(nodes, node => node.cloneNode(true))}\n </div>\n \n ${item.label}\n </u-menu-item>\n `;\n })}`;\n\n render(menuItems, this.#menuItemsContainer);\n }\n}\n"]}
|