@universal-material/web 3.0.29 → 3.0.30
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 +1746 -1746
- package/menu/menu.d.ts +1 -1
- package/menu/menu.d.ts.map +1 -1
- package/menu/menu.js.map +1 -1
- package/package.json +1 -1
package/menu/menu.d.ts
CHANGED
|
@@ -28,7 +28,7 @@ export declare class UmMenu extends LitElement {
|
|
|
28
28
|
* Set a selector to auto attach to a toggle element
|
|
29
29
|
*/
|
|
30
30
|
get toggleSelector(): string | undefined;
|
|
31
|
-
set toggleSelector(selector: string);
|
|
31
|
+
set toggleSelector(selector: string | undefined);
|
|
32
32
|
menu: HTMLElement;
|
|
33
33
|
get anchorElement(): HTMLElement;
|
|
34
34
|
private toggleElement;
|
package/menu/menu.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,OAAO,2BAA2B,CAAC;AASnC,qBACa,MAAO,SAAQ,UAAU;;IAEpC,OAAgB,MAAM,4BAAwB;IAK9C;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAAsB;IACzC,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EAUrB;IAED;;;OAGG;IACoD,YAAY,EAAE,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAAe;IAEzI;;;;;OAKG;IACwB,SAAS,EAAE,OAAO,GAAG,KAAK,CAAS;IAE9D;;OAEG;IACuE,eAAe,UAAQ;IAEjG;;OAEG;IACH,IACI,cAAc,IAAI,MAAM,GAAG,SAAS,CAEvC;IACD,IAAI,cAAc,CAAC,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/menu/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,OAAO,2BAA2B,CAAC;AASnC,qBACa,MAAO,SAAQ,UAAU;;IAEpC,OAAgB,MAAM,4BAAwB;IAK9C;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAAsB;IACzC,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EAUrB;IAED;;;OAGG;IACoD,YAAY,EAAE,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAAe;IAEzI;;;;;OAKG;IACwB,SAAS,EAAE,OAAO,GAAG,KAAK,CAAS;IAE9D;;OAEG;IACuE,eAAe,UAAQ;IAEjG;;OAEG;IACH,IACI,cAAc,IAAI,MAAM,GAAG,SAAS,CAEvC;IACD,IAAI,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAS9C;IAEe,IAAI,EAAG,WAAW,CAAC;IAEnC,IAAI,aAAa,IAAI,WAAW,CAE/B;IAED,OAAO,CAAC,aAAa,CAA4B;cAE9B,MAAM,IAAI,kBAAkB;IAWtC,iBAAiB;IAMjB,oBAAoB;IAK7B,MAAM,aAOJ;IAEF,IAAI,IAAI,IAAI;IASZ,KAAK,aAOJ;IAED,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,WAAW;CAWpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
|
package/menu/menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/menu/menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './menu.styles.js';\n\nimport '../elevation/elevation.js';\n\ninterface MenuRect {\n x?: number;\n y?: number;\n width: number;\n height: number;\n}\n\n@customElement('u-menu')\nexport class UmMenu extends LitElement {\n\n static override styles = [baseStyles, styles];\n\n #open = false;\n #justShow = false;\n\n /**\n * Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods\n */\n @property({type: Boolean, reflect: true})\n get open(): boolean { return this.#open }\n set open(open: boolean) {\n if (!open) {\n this.#open = open;\n return;\n }\n \n this.calcDropdownPositioning();\n this.#open = open;\n\n setTimeout(() => this.querySelector<HTMLElement>('u-menu-item:not([disabled])')?.focus());\n }\n\n /**\n * The corner of the anchor which to align the menu in the standard logical\n * property style of <block>-<inline> e.g. `'end-start'`.\n */\n @property({attribute: 'anchor-corner', reflect: true}) anchorCorner: 'start-start' | 'start-end' | 'end-start' | 'end-end' = 'end-start';\n\n /**\n * The direction of the menu. e.g. `'end'`.\n *\n * NOTE: This value may not be respected by the menu positioning algorithm\n * if the menu would render outside the viewport.\n */\n @property({reflect: true}) direction: 'start' | 'end' = 'end';\n\n /**\n * Limit the height of the menu to not overflow the viewport\n */\n @property({type: Boolean, attribute: 'auto-scroll-block', reflect: true}) autoScrollBlock = true;\n\n /**\n * Set a selector to auto attach to a toggle element\n */\n @property({attribute: 'toggle-selector', reflect: true})\n get toggleSelector(): string | undefined {\n return this.attributes.getNamedItem('toggle-selector')?.value;\n }\n set toggleSelector(selector: string) {\n this.toggleElement?.removeEventListener('click', this.toggle);\n\n if (!selector) {\n return;\n }\n\n this.toggleElement = document.querySelector(selector);\n this.toggleElement?.addEventListener('click', this.toggle);\n }\n\n @query('.menu') menu!: HTMLElement;\n\n get anchorElement(): HTMLElement {\n return this.parentElement!;\n }\n\n private toggleElement: HTMLElement | null = null;\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"menu\" part=\"menu\" ?inert=${!this.open}>\n <u-elevation></u-elevation>\n <div role=\"menu\" class=\"content\" part=\"content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('click', this.close);\n this.role = \"listbox\";\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('click', this.close);\n }\n\n toggle = () => {\n if (this.open) {\n this.close();\n return;\n }\n\n this.show();\n };\n\n show(): void {\n if (this.open) {\n return;\n }\n\n this.#justShow = true;\n this.open = true;\n }\n\n close = () => {\n if (this.open && !this.#justShow) {\n this.open = false;\n return;\n }\n\n this.#justShow = false;\n }\n\n private calcDropdownPositioning() {\n const anchorRect = this.getAnchorRect();\n const menuRect = this.getMenuRect()\n\n this.resetMenu();\n this.setToOpenUpOrDown(anchorRect, menuRect);\n this.setToOpenToStartOrEnd(anchorRect, menuRect);\n }\n\n private resetMenu() {\n this.menu.className = 'menu';\n this.menu.style.maxHeight = '';\n }\n\n private setToOpenUpOrDown(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortHeight = window.innerHeight;\n\n if (viewPortHeight - (anchorRect.y! + menuRect.height) >= 0) {\n return;\n }\n\n if (anchorRect.y! <= viewPortHeight / 2) {\n this.menu.style.maxHeight = this.autoScrollBlock\n ? `${viewPortHeight - anchorRect.y!}px`\n : '';\n return;\n }\n\n this.menu.classList.add('up');\n this.menu.style.maxHeight = this.autoScrollBlock\n ? `${anchorRect.y!}px`\n : '';\n }\n\n private setToOpenToStartOrEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n if (this.direction === 'start') {\n this.ensureMenuCanOpenToStart(anchorRect, menuRect);\n return;\n }\n\n this.ensureMenuCanOpenToEnd(anchorRect, menuRect);\n }\n\n private ensureMenuCanOpenToStart(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortWidth = window.innerWidth;\n\n if (viewPortWidth - (anchorRect.x! - menuRect.width) >= 0) {\n this.menu.classList.add('start');\n }\n }\n\n private ensureMenuCanOpenToEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortWidth = window.innerWidth;\n\n if (viewPortWidth - (anchorRect.x! + menuRect.width) >= 0) {\n return;\n }\n\n this.menu.classList.add('start');\n }\n\n private getAnchorRect(): MenuRect {\n const anchorElement = this.anchorElement;\n const rect = anchorElement.getBoundingClientRect() as DOMRect\n const styles = getComputedStyle(anchorElement);\n const width = parseInt(styles.width, 10);\n const height = parseInt(styles.height, 10);\n const xOffset = this.anchorCorner.endsWith('-end')\n ? width\n : 0;\n\n const yOffset = this.anchorCorner.startsWith('end-')\n ? height\n : 0;\n\n return {\n y: rect.y + yOffset,\n x: rect.x + xOffset,\n width: width,\n height: height\n };\n }\n\n private getMenuRect(): MenuRect {\n const menu = this.menu;\n const styles = getComputedStyle(menu);\n const width = parseInt(styles.width, 10);\n const height = parseInt(styles.height, 10);\n\n return {\n width: width,\n height: height\n };\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-menu': UmMenu;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/menu/menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './menu.styles.js';\n\nimport '../elevation/elevation.js';\n\ninterface MenuRect {\n x?: number;\n y?: number;\n width: number;\n height: number;\n}\n\n@customElement('u-menu')\nexport class UmMenu extends LitElement {\n\n static override styles = [baseStyles, styles];\n\n #open = false;\n #justShow = false;\n\n /**\n * Opens the menu and makes it visible. Alternative to the `.show()`, `.close()` and `.toggle()` methods\n */\n @property({type: Boolean, reflect: true})\n get open(): boolean { return this.#open }\n set open(open: boolean) {\n if (!open) {\n this.#open = open;\n return;\n }\n \n this.calcDropdownPositioning();\n this.#open = open;\n\n setTimeout(() => this.querySelector<HTMLElement>('u-menu-item:not([disabled])')?.focus());\n }\n\n /**\n * The corner of the anchor which to align the menu in the standard logical\n * property style of <block>-<inline> e.g. `'end-start'`.\n */\n @property({attribute: 'anchor-corner', reflect: true}) anchorCorner: 'start-start' | 'start-end' | 'end-start' | 'end-end' = 'end-start';\n\n /**\n * The direction of the menu. e.g. `'end'`.\n *\n * NOTE: This value may not be respected by the menu positioning algorithm\n * if the menu would render outside the viewport.\n */\n @property({reflect: true}) direction: 'start' | 'end' = 'end';\n\n /**\n * Limit the height of the menu to not overflow the viewport\n */\n @property({type: Boolean, attribute: 'auto-scroll-block', reflect: true}) autoScrollBlock = true;\n\n /**\n * Set a selector to auto attach to a toggle element\n */\n @property({attribute: 'toggle-selector', reflect: true})\n get toggleSelector(): string | undefined {\n return this.attributes.getNamedItem('toggle-selector')?.value;\n }\n set toggleSelector(selector: string | undefined) {\n this.toggleElement?.removeEventListener('click', this.toggle);\n\n if (!selector) {\n return;\n }\n\n this.toggleElement = document.querySelector(selector);\n this.toggleElement?.addEventListener('click', this.toggle);\n }\n\n @query('.menu') menu!: HTMLElement;\n\n get anchorElement(): HTMLElement {\n return this.parentElement!;\n }\n\n private toggleElement: HTMLElement | null = null;\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"menu\" part=\"menu\" ?inert=${!this.open}>\n <u-elevation></u-elevation>\n <div role=\"menu\" class=\"content\" part=\"content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('click', this.close);\n this.role = \"listbox\";\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('click', this.close);\n }\n\n toggle = () => {\n if (this.open) {\n this.close();\n return;\n }\n\n this.show();\n };\n\n show(): void {\n if (this.open) {\n return;\n }\n\n this.#justShow = true;\n this.open = true;\n }\n\n close = () => {\n if (this.open && !this.#justShow) {\n this.open = false;\n return;\n }\n\n this.#justShow = false;\n }\n\n private calcDropdownPositioning() {\n const anchorRect = this.getAnchorRect();\n const menuRect = this.getMenuRect()\n\n this.resetMenu();\n this.setToOpenUpOrDown(anchorRect, menuRect);\n this.setToOpenToStartOrEnd(anchorRect, menuRect);\n }\n\n private resetMenu() {\n this.menu.className = 'menu';\n this.menu.style.maxHeight = '';\n }\n\n private setToOpenUpOrDown(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortHeight = window.innerHeight;\n\n if (viewPortHeight - (anchorRect.y! + menuRect.height) >= 0) {\n return;\n }\n\n if (anchorRect.y! <= viewPortHeight / 2) {\n this.menu.style.maxHeight = this.autoScrollBlock\n ? `${viewPortHeight - anchorRect.y!}px`\n : '';\n return;\n }\n\n this.menu.classList.add('up');\n this.menu.style.maxHeight = this.autoScrollBlock\n ? `${anchorRect.y!}px`\n : '';\n }\n\n private setToOpenToStartOrEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n if (this.direction === 'start') {\n this.ensureMenuCanOpenToStart(anchorRect, menuRect);\n return;\n }\n\n this.ensureMenuCanOpenToEnd(anchorRect, menuRect);\n }\n\n private ensureMenuCanOpenToStart(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortWidth = window.innerWidth;\n\n if (viewPortWidth - (anchorRect.x! - menuRect.width) >= 0) {\n this.menu.classList.add('start');\n }\n }\n\n private ensureMenuCanOpenToEnd(anchorRect: MenuRect, menuRect: MenuRect): void {\n const viewPortWidth = window.innerWidth;\n\n if (viewPortWidth - (anchorRect.x! + menuRect.width) >= 0) {\n return;\n }\n\n this.menu.classList.add('start');\n }\n\n private getAnchorRect(): MenuRect {\n const anchorElement = this.anchorElement;\n const rect = anchorElement.getBoundingClientRect() as DOMRect\n const styles = getComputedStyle(anchorElement);\n const width = parseInt(styles.width, 10);\n const height = parseInt(styles.height, 10);\n const xOffset = this.anchorCorner.endsWith('-end')\n ? width\n : 0;\n\n const yOffset = this.anchorCorner.startsWith('end-')\n ? height\n : 0;\n\n return {\n y: rect.y + yOffset,\n x: rect.x + xOffset,\n width: width,\n height: height\n };\n }\n\n private getMenuRect(): MenuRect {\n const menu = this.menu;\n const styles = getComputedStyle(menu);\n const width = parseInt(styles.width, 10);\n const height = parseInt(styles.height, 10);\n\n return {\n width: width,\n height: height\n };\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-menu': UmMenu;\n }\n}\n"]}
|