@universal-material/web 3.0.125 → 3.0.127

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.
@@ -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;AAiCnC,qBACa,MAAO,SAAQ,UAAU;;IACpC,OAAgB,MAAM,4BAAwB;IAI9C;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EA8CrB;IAE4B,WAAW,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/C,WAAW,UAAS;IAEjD;;;OAGG;IAEH,YAAY,EAAE,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAAe;IAE9G;;;;;OAKG;IAC0B,SAAS,EAAE,UAAU,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,CAAc;IAEvG;;OAEG;IACsE,aAAa,UAAS;IAE/E,IAAI,EAAG,WAAW,CAAC;IACpB,GAAG,EAAG,WAAW,CAAC;IAEjC,IAAI,eAAe,IAAI,WAAW,CAEjC;IAID,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS,CAElD;IACD,IAAI,aAAa,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EAE9D;cAEkB,MAAM,IAAI,kBAAkB;IAYtC,iBAAiB;IAO1B,MAAM,aAOJ;IAEF,IAAI,IAAI,IAAI;IAMZ,KAAK,aAIH;IAEF,OAAO,CAAC,uBAAuB;IA0I/B,OAAO,CAAC,eAAe;IAqDvB,OAAO,CAAC,WAAW;CAWpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
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;AAmCnC,qBACa,MAAO,SAAQ,UAAU;;IACpC,OAAgB,MAAM,4BAAwB;IAI9C;;OAEG;IACH,IACI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EA+BrB;IA+B4B,WAAW,EAAE,UAAU,GAAG,OAAO,CAAc;IAE/C,WAAW,UAAS;IAEjD;;;OAGG;IAEH,YAAY,EAAE,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CAAe;IAE9G;;;;;OAKG;IAC0B,SAAS,EAAE,UAAU,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,CAAc;IAEvG;;OAEG;IACsE,aAAa,UAAS;IAE/E,IAAI,EAAG,WAAW,CAAC;IACpB,GAAG,EAAG,WAAW,CAAC;IAEjC,IAAI,eAAe,IAAI,WAAW,CAEjC;IAWD,IAAI,aAAa,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS,CAElD;IACD,IAAI,aAAa,CAAC,aAAa,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EAE9D;cAEkB,MAAM,IAAI,kBAAkB;IActC,iBAAiB;IAO1B,MAAM,aAOJ;IAEF,IAAI,IAAI,IAAI;IAMZ,KAAK,aAIH;IAEF,OAAO,CAAC,uBAAuB;IA0I/B,OAAO,CAAC,eAAe;IAqDvB,OAAO,CAAC,WAAW;CAWpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
package/menu/menu.js CHANGED
@@ -9,6 +9,7 @@ import { customElement, property, query } from 'lit/decorators.js';
9
9
  import { styles as baseStyles } from '../shared/base.styles.js';
10
10
  import { styles } from './menu.styles.js';
11
11
  import '../elevation/elevation.js';
12
+ import { classMap } from 'lit/directives/class-map.js';
12
13
  let UmMenu = class UmMenu extends LitElement {
13
14
  constructor() {
14
15
  super(...arguments);
@@ -31,6 +32,11 @@ let UmMenu = class UmMenu extends LitElement {
31
32
  * Don't limit the height of the menu
32
33
  */
33
34
  this.allowOverflow = false;
35
+ this.#onOpened = () => this.dispatchEvent(new Event('opened'));
36
+ this.#onClosed = () => {
37
+ this.menu.style.display = 'none';
38
+ this.dispatchEvent(new Event('closed'));
39
+ };
34
40
  this.toggle = () => {
35
41
  if (this.open) {
36
42
  this.close();
@@ -53,30 +59,31 @@ let UmMenu = class UmMenu extends LitElement {
53
59
  return this.#open;
54
60
  }
55
61
  set open(open) {
62
+ if (!this.menu) {
63
+ return;
64
+ }
65
+ this.menu.removeEventListener('transitionend', this.#onClosed, true);
66
+ this.menu.removeEventListener('transitionend', this.#onOpened, true);
56
67
  if (!open) {
57
68
  const closePrevented = !this.dispatchEvent(new Event('close', { cancelable: true }));
58
69
  if (closePrevented) {
59
70
  return;
60
71
  }
61
72
  this.#open = open;
62
- this.menu?.addEventListener('transitionend', () => {
63
- this.menu.style.display = 'none';
64
- return this.dispatchEvent(new Event('closed'));
65
- }, {
66
- capture: true,
67
- once: true,
68
- });
69
- document.removeEventListener('click', this.close);
73
+ this.#hide();
70
74
  return;
71
75
  }
72
76
  const openPrevented = !this.dispatchEvent(new Event('open', { cancelable: true }));
73
77
  if (openPrevented) {
74
78
  return;
75
79
  }
76
- this.calcDropdownPositioning();
77
- this.menu.style.display = '';
78
80
  this.#open = open;
79
- this.menu?.addEventListener('animationend', () => this.dispatchEvent(new Event('opened')), {
81
+ this.#show();
82
+ }
83
+ #show() {
84
+ this.menu.style.display = '';
85
+ this.calcDropdownPositioning();
86
+ this.menu.addEventListener('transitionend', this.#onOpened, {
80
87
  capture: true,
81
88
  once: true,
82
89
  });
@@ -86,9 +93,19 @@ let UmMenu = class UmMenu extends LitElement {
86
93
  }
87
94
  setTimeout(() => this.querySelector('u-menu-item:not([disabled])')?.focus());
88
95
  }
96
+ #hide() {
97
+ this.menu.classList.remove('open');
98
+ document.removeEventListener('click', this.close);
99
+ this.menu.addEventListener('transitionend', this.#onClosed, {
100
+ capture: true,
101
+ once: true,
102
+ });
103
+ }
89
104
  get scrollContainer() {
90
105
  return this.menu;
91
106
  }
107
+ #onOpened;
108
+ #onClosed;
92
109
  #anchorElement;
93
110
  get anchorElement() {
94
111
  return this.#anchorElement ?? this.parentElement ?? this.getRootNode().host;
@@ -97,9 +114,10 @@ let UmMenu = class UmMenu extends LitElement {
97
114
  this.#anchorElement = anchorElement;
98
115
  }
99
116
  render() {
117
+ const menuClasses = { open: this.open };
100
118
  return html `
101
119
  <div class="ref"></div>
102
- <div class="menu" part="menu" style="display: none" ?inert=${!this.open}>
120
+ <div class="menu ${classMap(menuClasses)}" part="menu" style="display: none" ?inert=${!this.open}>
103
121
  <u-elevation></u-elevation>
104
122
  <div role="menu" class="content" part="content">
105
123
  <slot></slot>
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 AnchorCornerBlockSide {\n top: number;\n bottom: number;\n relativeY: number;\n}\n\ninterface AnchorCornerInlineSide {\n left: number;\n right: number;\n relativeX: number;\n}\n\ninterface AnchorBounds {\n top: AnchorCornerBlockSide;\n bottom: AnchorCornerBlockSide;\n start: AnchorCornerInlineSide;\n end: AnchorCornerInlineSide;\n width: number;\n height: number;\n}\n\ninterface MenuPosition {\n bounds: AnchorBounds;\n isRtl: boolean;\n}\n\ninterface MenuSize {\n width: number;\n height: number;\n}\n\n@customElement('u-menu')\nexport class UmMenu extends LitElement {\n static override styles = [baseStyles, styles];\n\n #open = 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 {\n return this.#open;\n }\n set open(open: boolean) {\n if (!open) {\n const closePrevented = !this.dispatchEvent(new Event('close', { cancelable: true }));\n\n if (closePrevented) {\n return;\n }\n\n this.#open = open;\n this.menu?.addEventListener(\n 'transitionend',\n () => {\n this.menu.style.display = 'none';\n return this.dispatchEvent(new Event('closed'));\n },\n {\n capture: true,\n once: true,\n },\n );\n\n document.removeEventListener('click', this.close);\n return;\n }\n\n const openPrevented = !this.dispatchEvent(new Event('open', { cancelable: true }));\n\n if (openPrevented) {\n return;\n }\n\n this.calcDropdownPositioning();\n this.menu.style.display = '';\n this.#open = open;\n\n this.menu?.addEventListener('animationend', () => this.dispatchEvent(new Event('opened')), {\n capture: true,\n once: true,\n });\n setTimeout(() => document.addEventListener('click', this.close));\n\n if (this.manualFocus) {\n return;\n }\n\n setTimeout(() => this.querySelector<HTMLElement>('u-menu-item:not([disabled])')?.focus());\n }\n\n @property({ reflect: true }) positioning: 'relative' | 'fixed' = 'relative';\n\n @property({ type: Boolean }) manualFocus = false;\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 })\n anchorCorner: 'auto-start' | 'auto-end' | 'start-start' | 'start-end' | 'end-start' | 'end-end' = 'end-start';\n\n /**\n * The direction of the menu. e.g. `'down-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: 'up-start' | 'up-end' | 'down-start' | 'down-end' = 'down-end';\n\n /**\n * Don't limit the height of the menu\n */\n @property({ type: Boolean, attribute: 'allow-overflow', reflect: true }) allowOverflow = false;\n\n @query('.menu') menu!: HTMLElement;\n @query('.ref') ref!: HTMLElement;\n\n get scrollContainer(): HTMLElement {\n return this.menu;\n }\n\n #anchorElement: HTMLElement | null | undefined;\n\n get anchorElement(): HTMLElement | null | undefined {\n return this.#anchorElement ?? this.parentElement! ?? (<ShadowRoot>this.getRootNode()).host;\n }\n set anchorElement(anchorElement: HTMLElement | null | undefined) {\n this.#anchorElement = anchorElement;\n }\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"ref\"></div>\n <div class=\"menu\" part=\"menu\" style=\"display: none\" ?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 this.role = 'listbox';\n // eslint-disable-next-line no-self-assign\n this.open = this.open;\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 this.open = true;\n }\n }\n\n close = () => {\n if (this.open) {\n this.open = false;\n }\n };\n\n private calcDropdownPositioning() {\n if (!this.anchorElement) {\n return;\n }\n\n const menuPosition = this.getMenuPosition();\n const menuSize = this.getMenuSize();\n\n this.#resetMenu();\n this.#setToOpenUpOrDown(menuPosition, menuSize);\n this.#setToOpenToStartOrEnd(menuPosition, menuSize);\n }\n\n #resetMenu() {\n this.menu.className = 'menu';\n this.menu.style.top = '';\n this.menu.style.bottom = '';\n this.menu.style.left = '';\n this.menu.style.right = '';\n this.menu.style.maxHeight = '';\n }\n\n #setToOpenUpOrDown(menuPosition: MenuPosition, menuSize: MenuSize): void {\n if (this.anchorCorner.startsWith('auto-')) {\n this.#openBlockAuto(menuPosition, menuSize);\n return;\n }\n\n const side = this.anchorCorner.startsWith('start-') ? menuPosition.bounds.top : menuPosition.bounds.bottom;\n\n if (this.direction.startsWith('up-')) {\n this.#tryOpenUp(side, menuSize);\n return;\n }\n\n this.#tryOpenDown(side, menuSize);\n }\n\n #openBlockAuto(menuPosition: MenuPosition, menuSize: MenuSize): void {\n const topSide = menuPosition.bounds.top;\n const bottomSide = menuPosition.bounds.bottom;\n\n const viewPortHeight = window.innerHeight;\n\n if (bottomSide.bottom >= topSide.top || viewPortHeight - (bottomSide.top + menuSize.height) >= 0) {\n this.#openDown(bottomSide);\n return;\n }\n\n this.#openUp(topSide);\n }\n\n #tryOpenUp(side: AnchorCornerBlockSide, menuSize: MenuSize): void {\n if (side.top === side.bottom || side.top - menuSize.height >= 0) {\n this.#openUp(side);\n return;\n }\n\n this.#openToLargestBlockSide(side);\n }\n\n #tryOpenDown(side: AnchorCornerBlockSide, menuSize: MenuSize): void {\n const viewPortHeight = window.innerHeight;\n\n if (side.top === side.bottom || viewPortHeight - (side.top + menuSize.height) >= 0) {\n this.#openDown(side);\n return;\n }\n\n this.#openToLargestBlockSide(side);\n }\n\n #openToLargestBlockSide(side: AnchorCornerBlockSide) {\n if (side.top > side.bottom) {\n this.#openUp(side);\n return;\n }\n\n this.#openDown(side);\n }\n\n #setToOpenToStartOrEnd(menuPosition: MenuPosition, menuSize: MenuSize): void {\n const openStart = menuPosition.isRtl ? this.#tryOpenRight.bind(this) : this.#tryOpenLeft.bind(this);\n const openEnd = menuPosition.isRtl ? this.#tryOpenLeft.bind(this) : this.#tryOpenRight.bind(this);\n\n const side = this.anchorCorner.endsWith('-start') ? menuPosition.bounds.start : menuPosition.bounds.end;\n\n if (this.direction.endsWith('-start')) {\n openStart(side, menuSize);\n return;\n }\n\n openEnd(side, menuSize);\n }\n\n #tryOpenLeft(side: AnchorCornerInlineSide, menuSize: MenuSize): void {\n if (side.left === side.right || side.left - menuSize.width >= 0) {\n this.menu.style.right = `${side.relativeX * -1}px`;\n return;\n }\n\n this.#openToLargestInlineSide(side);\n }\n\n #tryOpenRight(side: AnchorCornerInlineSide, menuSize: MenuSize): void {\n const viewPortWidth = window.innerWidth;\n\n if (side.left === side.right || viewPortWidth - (side.left + menuSize.width) >= 0) {\n this.menu.style.left = `${side.relativeX}px`;\n return;\n }\n\n this.#openToLargestInlineSide(side);\n }\n\n #openToLargestInlineSide(side: AnchorCornerInlineSide) {\n if (side.left > side.right) {\n this.menu.style.right = `${side.relativeX * -1}px`;\n return;\n }\n\n this.menu.style.left = `${side.relativeX}px`;\n }\n\n #openUp(side: AnchorCornerBlockSide) {\n const viewPortHeight = window.innerHeight;\n\n this.menu.style.bottom = `${side.relativeY * -1}px`;\n this.menu.classList.add('up');\n this.menu.style.maxHeight = this.allowOverflow ? '' : `${viewPortHeight - side.bottom}px`;\n }\n\n #openDown(side: AnchorCornerBlockSide) {\n const viewPortHeight = window.innerHeight;\n this.menu.style.top = `${side.relativeY}px`;\n this.menu.style.maxHeight = this.allowOverflow ? '' : `${viewPortHeight - side.top}px`;\n }\n\n private getMenuPosition(): MenuPosition {\n const viewPortWidth = window.innerWidth;\n const viewPortHeight = window.innerHeight;\n\n const anchorElement = this.anchorElement!;\n const anchorRect = anchorElement.getBoundingClientRect() as DOMRect;\n const refRect = this.ref.getBoundingClientRect() as DOMRect;\n const anchorStyles = getComputedStyle(anchorElement);\n const isRtl = anchorStyles.direction === 'rtl';\n\n const width = parseInt(anchorStyles.width, 10);\n const height = parseInt(anchorStyles.height, 10);\n\n const rectX = refRect.left;\n const rectY = refRect.top;\n\n const leftPoint: AnchorCornerInlineSide = {\n left: anchorRect.left,\n right: viewPortWidth - anchorRect.left,\n relativeX: anchorRect.left - rectX,\n };\n\n const rightPoint: AnchorCornerInlineSide = {\n left: anchorRect.right,\n right: viewPortWidth - anchorRect.right,\n relativeX: leftPoint.relativeX + width,\n };\n\n const topPoint: AnchorCornerBlockSide = {\n top: anchorRect.top,\n relativeY: anchorRect.top - rectY,\n bottom: viewPortHeight - anchorRect.top,\n };\n\n const anchorBounds: AnchorBounds = {\n top: topPoint,\n bottom: {\n top: anchorRect.bottom,\n relativeY: topPoint.relativeY + height,\n bottom: viewPortHeight - anchorRect.bottom,\n },\n start: isRtl ? rightPoint : leftPoint,\n end: isRtl ? leftPoint : rightPoint,\n width,\n height,\n };\n\n return {\n isRtl: isRtl,\n bounds: anchorBounds,\n };\n }\n\n private getMenuSize(): MenuSize {\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\nimport { classMap } from 'lit/directives/class-map.js';\n\ninterface AnchorCornerBlockSide {\n top: number;\n bottom: number;\n relativeY: number;\n}\n\ninterface AnchorCornerInlineSide {\n left: number;\n right: number;\n relativeX: number;\n}\n\ninterface AnchorBounds {\n top: AnchorCornerBlockSide;\n bottom: AnchorCornerBlockSide;\n start: AnchorCornerInlineSide;\n end: AnchorCornerInlineSide;\n width: number;\n height: number;\n}\n\ninterface MenuPosition {\n bounds: AnchorBounds;\n isRtl: boolean;\n}\n\ninterface MenuSize {\n width: number;\n height: number;\n}\n\n@customElement('u-menu')\nexport class UmMenu extends LitElement {\n static override styles = [baseStyles, styles];\n\n #open = 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 {\n return this.#open;\n }\n set open(open: boolean) {\n if (!this.menu) {\n return;\n }\n\n this.menu.removeEventListener('transitionend', this.#onClosed, true);\n this.menu.removeEventListener('transitionend', this.#onOpened, true);\n\n if (!open) {\n const closePrevented = !this.dispatchEvent(new Event('close', { cancelable: true }));\n\n if (closePrevented) {\n return;\n }\n\n this.#open = open;\n\n this.#hide();\n\n return;\n }\n\n const openPrevented = !this.dispatchEvent(new Event('open', { cancelable: true }));\n\n if (openPrevented) {\n return;\n }\n\n this.#open = open;\n\n this.#show();\n }\n\n #show() {\n this.menu.style.display = '';\n this.calcDropdownPositioning();\n\n this.menu.addEventListener('transitionend', this.#onOpened, {\n capture: true,\n once: true,\n });\n\n setTimeout(() => document.addEventListener('click', this.close));\n\n if (this.manualFocus) {\n return;\n }\n\n setTimeout(() => this.querySelector<HTMLElement>('u-menu-item:not([disabled])')?.focus());\n }\n\n #hide() {\n this.menu.classList.remove('open');\n\n document.removeEventListener('click', this.close);\n\n this.menu.addEventListener('transitionend', this.#onClosed, {\n capture: true,\n once: true,\n });\n }\n\n @property({ reflect: true }) positioning: 'relative' | 'fixed' = 'relative';\n\n @property({ type: Boolean }) manualFocus = false;\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 })\n anchorCorner: 'auto-start' | 'auto-end' | 'start-start' | 'start-end' | 'end-start' | 'end-end' = 'end-start';\n\n /**\n * The direction of the menu. e.g. `'down-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: 'up-start' | 'up-end' | 'down-start' | 'down-end' = 'down-end';\n\n /**\n * Don't limit the height of the menu\n */\n @property({ type: Boolean, attribute: 'allow-overflow', reflect: true }) allowOverflow = false;\n\n @query('.menu') menu!: HTMLElement;\n @query('.ref') ref!: HTMLElement;\n\n get scrollContainer(): HTMLElement {\n return this.menu;\n }\n\n #onOpened = () => this.dispatchEvent(new Event('opened'));\n\n #onClosed = () => {\n this.menu.style.display = 'none';\n this.dispatchEvent(new Event('closed'));\n };\n\n #anchorElement: HTMLElement | null | undefined;\n\n get anchorElement(): HTMLElement | null | undefined {\n return this.#anchorElement ?? this.parentElement! ?? (<ShadowRoot>this.getRootNode()).host;\n }\n set anchorElement(anchorElement: HTMLElement | null | undefined) {\n this.#anchorElement = anchorElement;\n }\n\n protected override render(): HTMLTemplateResult {\n const menuClasses = { open: this.open };\n\n return html`\n <div class=\"ref\"></div>\n <div class=\"menu ${classMap(menuClasses)}\" part=\"menu\" style=\"display: none\" ?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 this.role = 'listbox';\n // eslint-disable-next-line no-self-assign\n this.open = this.open;\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 this.open = true;\n }\n }\n\n close = () => {\n if (this.open) {\n this.open = false;\n }\n };\n\n private calcDropdownPositioning() {\n if (!this.anchorElement) {\n return;\n }\n\n const menuPosition = this.getMenuPosition();\n const menuSize = this.getMenuSize();\n\n this.#resetMenu();\n this.#setToOpenUpOrDown(menuPosition, menuSize);\n this.#setToOpenToStartOrEnd(menuPosition, menuSize);\n }\n\n #resetMenu() {\n this.menu.className = 'menu';\n this.menu.style.top = '';\n this.menu.style.bottom = '';\n this.menu.style.left = '';\n this.menu.style.right = '';\n this.menu.style.maxHeight = '';\n }\n\n #setToOpenUpOrDown(menuPosition: MenuPosition, menuSize: MenuSize): void {\n if (this.anchorCorner.startsWith('auto-')) {\n this.#openBlockAuto(menuPosition, menuSize);\n return;\n }\n\n const side = this.anchorCorner.startsWith('start-') ? menuPosition.bounds.top : menuPosition.bounds.bottom;\n\n if (this.direction.startsWith('up-')) {\n this.#tryOpenUp(side, menuSize);\n return;\n }\n\n this.#tryOpenDown(side, menuSize);\n }\n\n #openBlockAuto(menuPosition: MenuPosition, menuSize: MenuSize): void {\n const topSide = menuPosition.bounds.top;\n const bottomSide = menuPosition.bounds.bottom;\n\n const viewPortHeight = window.innerHeight;\n\n if (bottomSide.bottom >= topSide.top || viewPortHeight - (bottomSide.top + menuSize.height) >= 0) {\n this.#openDown(bottomSide);\n return;\n }\n\n this.#openUp(topSide);\n }\n\n #tryOpenUp(side: AnchorCornerBlockSide, menuSize: MenuSize): void {\n if (side.top === side.bottom || side.top - menuSize.height >= 0) {\n this.#openUp(side);\n return;\n }\n\n this.#openToLargestBlockSide(side);\n }\n\n #tryOpenDown(side: AnchorCornerBlockSide, menuSize: MenuSize): void {\n const viewPortHeight = window.innerHeight;\n\n if (side.top === side.bottom || viewPortHeight - (side.top + menuSize.height) >= 0) {\n this.#openDown(side);\n return;\n }\n\n this.#openToLargestBlockSide(side);\n }\n\n #openToLargestBlockSide(side: AnchorCornerBlockSide) {\n if (side.top > side.bottom) {\n this.#openUp(side);\n return;\n }\n\n this.#openDown(side);\n }\n\n #setToOpenToStartOrEnd(menuPosition: MenuPosition, menuSize: MenuSize): void {\n const openStart = menuPosition.isRtl ? this.#tryOpenRight.bind(this) : this.#tryOpenLeft.bind(this);\n const openEnd = menuPosition.isRtl ? this.#tryOpenLeft.bind(this) : this.#tryOpenRight.bind(this);\n\n const side = this.anchorCorner.endsWith('-start') ? menuPosition.bounds.start : menuPosition.bounds.end;\n\n if (this.direction.endsWith('-start')) {\n openStart(side, menuSize);\n return;\n }\n\n openEnd(side, menuSize);\n }\n\n #tryOpenLeft(side: AnchorCornerInlineSide, menuSize: MenuSize): void {\n if (side.left === side.right || side.left - menuSize.width >= 0) {\n this.menu.style.right = `${side.relativeX * -1}px`;\n return;\n }\n\n this.#openToLargestInlineSide(side);\n }\n\n #tryOpenRight(side: AnchorCornerInlineSide, menuSize: MenuSize): void {\n const viewPortWidth = window.innerWidth;\n\n if (side.left === side.right || viewPortWidth - (side.left + menuSize.width) >= 0) {\n this.menu.style.left = `${side.relativeX}px`;\n return;\n }\n\n this.#openToLargestInlineSide(side);\n }\n\n #openToLargestInlineSide(side: AnchorCornerInlineSide) {\n if (side.left > side.right) {\n this.menu.style.right = `${side.relativeX * -1}px`;\n return;\n }\n\n this.menu.style.left = `${side.relativeX}px`;\n }\n\n #openUp(side: AnchorCornerBlockSide) {\n const viewPortHeight = window.innerHeight;\n\n this.menu.style.bottom = `${side.relativeY * -1}px`;\n this.menu.classList.add('up');\n this.menu.style.maxHeight = this.allowOverflow ? '' : `${viewPortHeight - side.bottom}px`;\n }\n\n #openDown(side: AnchorCornerBlockSide) {\n const viewPortHeight = window.innerHeight;\n this.menu.style.top = `${side.relativeY}px`;\n this.menu.style.maxHeight = this.allowOverflow ? '' : `${viewPortHeight - side.top}px`;\n }\n\n private getMenuPosition(): MenuPosition {\n const viewPortWidth = window.innerWidth;\n const viewPortHeight = window.innerHeight;\n\n const anchorElement = this.anchorElement!;\n const anchorRect = anchorElement.getBoundingClientRect() as DOMRect;\n const refRect = this.ref.getBoundingClientRect() as DOMRect;\n const anchorStyles = getComputedStyle(anchorElement);\n const isRtl = anchorStyles.direction === 'rtl';\n\n const width = parseInt(anchorStyles.width, 10);\n const height = parseInt(anchorStyles.height, 10);\n\n const rectX = refRect.left;\n const rectY = refRect.top;\n\n const leftPoint: AnchorCornerInlineSide = {\n left: anchorRect.left,\n right: viewPortWidth - anchorRect.left,\n relativeX: anchorRect.left - rectX,\n };\n\n const rightPoint: AnchorCornerInlineSide = {\n left: anchorRect.right,\n right: viewPortWidth - anchorRect.right,\n relativeX: leftPoint.relativeX + width,\n };\n\n const topPoint: AnchorCornerBlockSide = {\n top: anchorRect.top,\n relativeY: anchorRect.top - rectY,\n bottom: viewPortHeight - anchorRect.top,\n };\n\n const anchorBounds: AnchorBounds = {\n top: topPoint,\n bottom: {\n top: anchorRect.bottom,\n relativeY: topPoint.relativeY + height,\n bottom: viewPortHeight - anchorRect.bottom,\n },\n start: isRtl ? rightPoint : leftPoint,\n end: isRtl ? leftPoint : rightPoint,\n width,\n height,\n };\n\n return {\n isRtl: isRtl,\n bounds: anchorBounds,\n };\n }\n\n private getMenuSize(): MenuSize {\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 +1 @@
1
- {"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqElB,CAAC"}
1
+ {"version":3,"file":"menu.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkElB,CAAC"}
@@ -20,6 +20,15 @@ export const styles = css `
20
20
  pointer-events: none;
21
21
  }
22
22
 
23
+ .content {
24
+ width: 100%;
25
+ padding-block: var(--u-menu-padding, 8px);
26
+ opacity: 0;
27
+ transition: opacity 1ms 400ms;
28
+ scroll-padding-block: 32px;
29
+ overflow: auto;
30
+ }
31
+
23
32
  .menu {
24
33
  position: absolute;
25
34
  display: flex;
@@ -36,24 +45,12 @@ export const styles = css `
36
45
  .menu.up {
37
46
  transform-origin: bottom;
38
47
  }
39
-
40
- .content {
41
- width: 100%;
42
- padding-block: var(--u-menu-padding, 8px);
43
- opacity: 0;
44
- transition: opacity 1ms 400ms;
45
- scroll-padding-block: 32px;
46
- overflow: auto;
47
- }
48
-
49
- :host([open]) .menu {
48
+ .menu.open {
50
49
  opacity: 1;
51
- animation-fill-mode: forwards;
52
- animation-direction: normal;
53
- animation: menu-open 350ms cubic-bezier(0.19, 1, 0.22, 1);
50
+ transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms;
54
51
  transform: scale3d(1, 1, 1);
55
52
  }
56
- :host([open]) .content {
53
+ .menu.open .content {
57
54
  opacity: 1;
58
55
  transition: opacity 300ms 150ms;
59
56
  }
@@ -1 +1 @@
1
- {"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-elevation-level: var(--u-menu-elevation-level, 2);\n display: block;\n width: 0;\n }\n\n :host([positioning=relative]) {\n position: relative;\n }\n\n :host([positioning=fixed]) {\n position: fixed;\n }\n\n .ref {\n position: absolute;\n inset-inline-start: 0;\n pointer-events: none;\n }\n\n .menu {\n position: absolute;\n display: flex;\n min-width: var(--u-menu-min-width, 112px);\n max-width: var(--u-menu-max-width, 280px);\n background: var(--u-menu-bg-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n border-radius: var(--u-menu-shape-corner, var(--u-shape-corner-extra-small, 4px));\n opacity: 0;\n transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 350ms, opacity 350ms;\n transform: scale3d(1, 0, 0);\n transform-origin: top;\n z-index: var(--u-menu-z-index, 1020);\n }\n .menu.up {\n transform-origin: bottom;\n }\n\n .content {\n width: 100%;\n padding-block: var(--u-menu-padding, 8px);\n opacity: 0;\n transition: opacity 1ms 400ms;\n scroll-padding-block: 32px;\n overflow: auto;\n }\n\n :host([open]) .menu {\n opacity: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n animation: menu-open 350ms cubic-bezier(0.19, 1, 0.22, 1);\n transform: scale3d(1, 1, 1);\n }\n :host([open]) .content {\n opacity: 1;\n transition: opacity 300ms 150ms;\n }\n\n @keyframes menu-open {\n from {\n opacity: 0;\n transform: scale3d(1, 0, 0);\n }\n to {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../src/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --u-elevation-level: var(--u-menu-elevation-level, 2);\n display: block;\n width: 0;\n }\n\n :host([positioning=relative]) {\n position: relative;\n }\n\n :host([positioning=fixed]) {\n position: fixed;\n }\n\n .ref {\n position: absolute;\n inset-inline-start: 0;\n pointer-events: none;\n }\n\n .content {\n width: 100%;\n padding-block: var(--u-menu-padding, 8px);\n opacity: 0;\n transition: opacity 1ms 400ms;\n scroll-padding-block: 32px;\n overflow: auto;\n }\n\n .menu {\n position: absolute;\n display: flex;\n min-width: var(--u-menu-min-width, 112px);\n max-width: var(--u-menu-max-width, 280px);\n background: var(--u-menu-bg-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n border-radius: var(--u-menu-shape-corner, var(--u-shape-corner-extra-small, 4px));\n opacity: 0;\n transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1) 350ms, opacity 350ms;\n transform: scale3d(1, 0, 0);\n transform-origin: top;\n z-index: var(--u-menu-z-index, 1020);\n }\n .menu.up {\n transform-origin: bottom;\n }\n .menu.open {\n opacity: 1;\n transition: transform 350ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms;\n transform: scale3d(1, 1, 1);\n }\n .menu.open .content {\n opacity: 1;\n transition: opacity 300ms 150ms;\n }\n\n @keyframes menu-open {\n from {\n opacity: 0;\n transform: scale3d(1, 0, 0);\n }\n to {\n opacity: 1;\n transform: scale3d(1, 1, 1);\n }\n }\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-material/web",
3
- "version": "3.0.125",
3
+ "version": "3.0.127",
4
4
  "description": "Material web components",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -69,7 +69,6 @@
69
69
  "@angular/router": "^17.3.4",
70
70
  "@custom-elements-manifest/analyzer": "^0.6.3",
71
71
  "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
72
- "@material/web": "^1.5.0",
73
72
  "@open-wc/testing": "^3.1.5",
74
73
  "@rollup/plugin-node-resolve": "^15.2.3",
75
74
  "@rollup/plugin-replace": "^5.0.5",
@@ -1 +1 @@
1
- {"version":3,"file":"selection-control-list-item.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,kDAAmD,CAAC,KAAG,YAAY,CAAC,CA6B7G,CAAC"}
1
+ {"version":3,"file":"selection-control-list-item.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,kDAAmD,CAAC,KAAG,YAAY,CAAC,CA+B7G,CAAC"}
@@ -1,8 +1,19 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
1
7
  import { css, html } from 'lit';
8
+ import { property } from 'lit/decorators.js';
2
9
  // @ts-ignore
3
10
  export const mixinSelectionControlListItem = (base) => {
4
11
  // @ts-ignore
5
12
  class SelectionControlListItem extends base {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.leading = false;
16
+ }
6
17
  static { this.styles = [
7
18
  base.styles ?? [],
8
19
  css `
@@ -19,13 +30,16 @@ export const mixinSelectionControlListItem = (base) => {
19
30
  render() {
20
31
  return html `
21
32
  <u-list-item ?selectable=${!this.disabled}>
22
- <div slot="trailing">${super.render()}</div>
33
+ <div slot="${this.leading ? 'leading' : 'trailing'}">${super.render()}</div>
23
34
  <label for="input"><slot></slot></label>
24
35
  <slot name="supporting-text" slot="supporting-text"></slot>
25
36
  </u-list-item>
26
37
  `;
27
38
  }
28
39
  }
40
+ __decorate([
41
+ property({ type: Boolean })
42
+ ], SelectionControlListItem.prototype, "leading", void 0);
29
43
  return SelectionControlListItem;
30
44
  };
31
45
  //# sourceMappingURL=selection-control-list-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAKhE,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;iBAC3C,WAAM,GAAG;YACb,IAAqC,CAAC,MAAM,IAAI,EAAE;YACnD,GAAG,CAAA;;;;;;;;;OASF;SACF,CAAC;QAEO,MAAM;YACb,OAAO,IAAI,CAAA;mCACkB,CAAC,IAAI,CAAC,QAAQ;iCAChB,KAAK,CAAC,MAAM,EAAE;;;;OAIxC,CAAC;QACJ,CAAC;;IAGH,OAAO,wBAAwB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\n\nimport { MixinBase, MixinReturn } from '../mixin.js';\nimport { UmSelectionControl } from './selection-control.js';\n\n// @ts-ignore\nexport const mixinSelectionControlListItem = <T extends MixinBase<UmSelectionControl>>(base: T): MixinReturn<T> => {\n // @ts-ignore\n abstract class SelectionControlListItem extends base {\n static styles = [\n (base as unknown as typeof LitElement).styles ?? [],\n css`\n :host {\n --u-list-item-block-padding: 0;\n display: block;\n }\n\n :host(:not([disabled])) {\n cursor: pointer;\n }\n `,\n ];\n\n override render(): HTMLTemplateResult {\n return html`\n <u-list-item ?selectable=${!this.disabled}>\n <div slot=\"trailing\">${super.render()}</div>\n <label for=\"input\"><slot></slot></label>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n </u-list-item>\n `;\n }\n }\n\n return SelectionControlListItem;\n};\n"]}
1
+ {"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;QAApD;;YAe+B,YAAO,GAAG,KAAK,CAAC;QAW/C,CAAC;iBAzBQ,WAAM,GAAG;YACb,IAAqC,CAAC,MAAM,IAAI,EAAE;YACnD,GAAG,CAAA;;;;;;;;;OASF;SACF,AAZY,CAYX;QAIO,MAAM;YACb,OAAO,IAAI,CAAA;mCACkB,CAAC,IAAI,CAAC,QAAQ;uBAC1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,KAAK,KAAK,CAAC,MAAM,EAAE;;;;OAIxE,CAAC;QACJ,CAAC;;IAV4B;QAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DAAiB;IAa/C,OAAO,wBAAwB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { MixinBase, MixinReturn } from '../mixin.js';\nimport { UmSelectionControl } from './selection-control.js';\n\n// @ts-ignore\nexport const mixinSelectionControlListItem = <T extends MixinBase<UmSelectionControl>>(base: T): MixinReturn<T> => {\n // @ts-ignore\n abstract class SelectionControlListItem extends base {\n static styles = [\n (base as unknown as typeof LitElement).styles ?? [],\n css`\n :host {\n --u-list-item-block-padding: 0;\n display: block;\n }\n\n :host(:not([disabled])) {\n cursor: pointer;\n }\n `,\n ];\n\n @property({ type: Boolean }) leading = false;\n\n override render(): HTMLTemplateResult {\n return html`\n <u-list-item ?selectable=${!this.disabled}>\n <div slot=\"${this.leading ? 'leading' : 'trailing'}\">${super.render()}</div>\n <label for=\"input\"><slot></slot></label>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n </u-list-item>\n `;\n }\n }\n\n return SelectionControlListItem;\n};\n"]}