@universal-material/web 3.0.68 → 3.0.70

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.
Files changed (202) hide show
  1. package/app-bar/top-app-bar.js +3 -2
  2. package/app-bar/top-app-bar.js.map +1 -1
  3. package/button/button-base.d.ts +1 -0
  4. package/button/button-base.d.ts.map +1 -1
  5. package/button/button-base.js +7 -18
  6. package/button/button-base.js.map +1 -1
  7. package/button/button-base.styles.d.ts +2 -0
  8. package/button/button-base.styles.d.ts.map +1 -0
  9. package/button/button-base.styles.js +16 -0
  10. package/button/button-base.styles.js.map +1 -0
  11. package/button/button-set.d.ts +1 -1
  12. package/button/button-set.d.ts.map +1 -1
  13. package/button/button-set.js +1 -1
  14. package/button/button-set.js.map +1 -1
  15. package/button/button-set.styles.d.ts.map +1 -1
  16. package/button/button-set.styles.js +0 -19
  17. package/button/button-set.styles.js.map +1 -1
  18. package/button/button.d.ts +2 -2
  19. package/button/button.d.ts.map +1 -1
  20. package/button/button.js +1 -1
  21. package/button/button.js.map +1 -1
  22. package/button/button.styles.d.ts.map +1 -1
  23. package/button/button.styles.js +0 -100
  24. package/button/button.styles.js.map +1 -1
  25. package/button/fab.d.ts +2 -2
  26. package/button/fab.d.ts.map +1 -1
  27. package/button/fab.js +1 -1
  28. package/button/fab.js.map +1 -1
  29. package/button/fab.styles.d.ts.map +1 -1
  30. package/button/fab.styles.js +0 -100
  31. package/button/fab.styles.js.map +1 -1
  32. package/button/icon-button.d.ts +2 -2
  33. package/button/icon-button.d.ts.map +1 -1
  34. package/button/icon-button.js +1 -1
  35. package/button/icon-button.js.map +1 -1
  36. package/button/icon-button.styles.d.ts.map +1 -1
  37. package/button/icon-button.styles.js +0 -100
  38. package/button/icon-button.styles.js.map +1 -1
  39. package/card/card-content.js +1 -1
  40. package/card/card-content.js.map +1 -1
  41. package/card/card-media.js +1 -1
  42. package/card/card-media.js.map +1 -1
  43. package/card/card.js +1 -1
  44. package/card/card.js.map +1 -1
  45. package/checkbox/checkbox.js +8 -20
  46. package/checkbox/checkbox.js.map +1 -1
  47. package/chip/chip-set.d.ts +1 -1
  48. package/chip/chip-set.d.ts.map +1 -1
  49. package/chip/chip-set.js +1 -1
  50. package/chip/chip-set.js.map +1 -1
  51. package/chip/chip-set.styles.d.ts.map +1 -1
  52. package/chip/chip-set.styles.js +0 -19
  53. package/chip/chip-set.styles.js.map +1 -1
  54. package/chip/chip.d.ts +1 -1
  55. package/chip/chip.d.ts.map +1 -1
  56. package/chip/chip.js +39 -54
  57. package/chip/chip.js.map +1 -1
  58. package/chip/chip.styles.d.ts.map +1 -1
  59. package/chip/chip.styles.js +0 -87
  60. package/chip/chip.styles.js.map +1 -1
  61. package/chip-field/chip-field.js +72 -86
  62. package/chip-field/chip-field.js.map +1 -1
  63. package/custom-elements.json +2109 -1186
  64. package/dialog/confirm-dialog-builder.js +6 -22
  65. package/dialog/confirm-dialog-builder.js.map +1 -1
  66. package/dialog/dialog-builder.js +4 -17
  67. package/dialog/dialog-builder.js.map +1 -1
  68. package/dialog/dialog.js +65 -80
  69. package/dialog/dialog.js.map +1 -1
  70. package/dialog/message-dialog-builder.js +3 -19
  71. package/dialog/message-dialog-builder.js.map +1 -1
  72. package/elevation/elevation.js +1 -1
  73. package/elevation/elevation.js.map +1 -1
  74. package/field/field-base.d.ts +2 -2
  75. package/field/field-base.d.ts.map +1 -1
  76. package/field/field-base.js +13 -16
  77. package/field/field-base.js.map +1 -1
  78. package/field/field-base.styles.js +1 -1
  79. package/field/field-base.styles.js.map +1 -1
  80. package/list/list-item.js +1 -1
  81. package/list/list-item.js.map +1 -1
  82. package/list/list.js +1 -1
  83. package/list/list.js.map +1 -1
  84. package/menu/menu-item.d.ts +12 -6
  85. package/menu/menu-item.d.ts.map +1 -1
  86. package/menu/menu-item.js +49 -31
  87. package/menu/menu-item.js.map +1 -1
  88. package/menu/menu-item.styles.d.ts.map +1 -1
  89. package/menu/menu-item.styles.js +15 -90
  90. package/menu/menu-item.styles.js.map +1 -1
  91. package/menu/menu.d.ts +1 -1
  92. package/menu/menu.d.ts.map +1 -1
  93. package/menu/menu.js +142 -150
  94. package/menu/menu.js.map +1 -1
  95. package/menu/menu.styles.d.ts.map +1 -1
  96. package/menu/menu.styles.js +1 -0
  97. package/menu/menu.styles.js.map +1 -1
  98. package/navigation/drawer-item.d.ts +1 -1
  99. package/navigation/drawer-item.d.ts.map +1 -1
  100. package/navigation/drawer-item.js +4 -5
  101. package/navigation/drawer-item.js.map +1 -1
  102. package/navigation/drawer-item.styles.d.ts.map +1 -1
  103. package/navigation/drawer-item.styles.js +0 -87
  104. package/navigation/drawer-item.styles.js.map +1 -1
  105. package/navigation/drawer.js +4 -4
  106. package/navigation/drawer.js.map +1 -1
  107. package/navigation/side-navigation.js +8 -20
  108. package/navigation/side-navigation.js.map +1 -1
  109. package/package.json +18 -18
  110. package/progress/circular-progress.d.ts +1 -2
  111. package/progress/circular-progress.d.ts.map +1 -1
  112. package/progress/circular-progress.js +19 -30
  113. package/progress/circular-progress.js.map +1 -1
  114. package/progress/progress-bar.d.ts +1 -2
  115. package/progress/progress-bar.d.ts.map +1 -1
  116. package/progress/progress-bar.js +12 -20
  117. package/progress/progress-bar.js.map +1 -1
  118. package/radio/radio.js +53 -61
  119. package/radio/radio.js.map +1 -1
  120. package/ripple/ripple.js +3 -2
  121. package/ripple/ripple.js.map +1 -1
  122. package/select/extended-option.d.ts +5 -0
  123. package/select/extended-option.d.ts.map +1 -0
  124. package/select/extended-option.js +2 -0
  125. package/select/extended-option.js.map +1 -0
  126. package/select/extended-select.d.ts +6 -0
  127. package/select/extended-select.d.ts.map +1 -0
  128. package/select/extended-select.js +2 -0
  129. package/select/extended-select.js.map +1 -0
  130. package/select/option.d.ts +10 -0
  131. package/select/option.d.ts.map +1 -1
  132. package/select/option.js +84 -74
  133. package/select/option.js.map +1 -1
  134. package/select/option.styles.d.ts.map +1 -1
  135. package/select/option.styles.js +10 -0
  136. package/select/option.styles.js.map +1 -1
  137. package/select/select-navigation-controller.d.ts +14 -0
  138. package/select/select-navigation-controller.d.ts.map +1 -0
  139. package/select/select-navigation-controller.js +80 -0
  140. package/select/select-navigation-controller.js.map +1 -0
  141. package/select/select.d.ts +13 -5
  142. package/select/select.d.ts.map +1 -1
  143. package/select/select.js +186 -66
  144. package/select/select.js.map +1 -1
  145. package/select/select.styles.d.ts.map +1 -1
  146. package/select/select.styles.js +25 -6
  147. package/select/select.styles.js.map +1 -1
  148. package/shared/button-wrapper.d.ts +2 -0
  149. package/shared/button-wrapper.d.ts.map +1 -1
  150. package/shared/button-wrapper.js +18 -22
  151. package/shared/button-wrapper.js.map +1 -1
  152. package/shared/button-wrapper.styles.d.ts +2 -0
  153. package/shared/button-wrapper.styles.d.ts.map +1 -0
  154. package/shared/button-wrapper.styles.js +63 -0
  155. package/shared/button-wrapper.styles.js.map +1 -0
  156. package/shared/compare-text.d.ts +2 -0
  157. package/shared/compare-text.d.ts.map +1 -0
  158. package/shared/compare-text.js +5 -0
  159. package/shared/compare-text.js.map +1 -0
  160. package/shared/menu-field/menu-field-navigation-controller.d.ts +20 -0
  161. package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -0
  162. package/shared/menu-field/menu-field-navigation-controller.js +103 -0
  163. package/shared/menu-field/menu-field-navigation-controller.js.map +1 -0
  164. package/shared/menu-field/menu-field.d.ts +7 -0
  165. package/shared/menu-field/menu-field.d.ts.map +1 -0
  166. package/shared/menu-field/menu-field.js +2 -0
  167. package/shared/menu-field/menu-field.js.map +1 -0
  168. package/shared/mixin-attribute-properties.d.ts.map +1 -1
  169. package/shared/normalize-text.d.ts +1 -1
  170. package/shared/normalize-text.d.ts.map +1 -1
  171. package/shared/normalize-text.js +1 -1
  172. package/shared/normalize-text.js.map +1 -1
  173. package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
  174. package/shared/selection-control/selection-control-list-item.js +7 -7
  175. package/shared/selection-control/selection-control-list-item.js.map +1 -1
  176. package/shared/selection-control/selection-control.js +16 -28
  177. package/shared/selection-control/selection-control.js.map +1 -1
  178. package/shared/sets/set-base.d.ts +2 -0
  179. package/shared/sets/set-base.d.ts.map +1 -1
  180. package/shared/sets/set-base.js +2 -0
  181. package/shared/sets/set-base.js.map +1 -1
  182. package/shared/sets/set-base.styles.d.ts +2 -0
  183. package/shared/sets/set-base.styles.d.ts.map +1 -0
  184. package/shared/sets/set-base.styles.js +22 -0
  185. package/shared/sets/set-base.styles.js.map +1 -0
  186. package/shared/text-field-base/text-field-base.js +6 -6
  187. package/shared/text-field-base/text-field-base.js.map +1 -1
  188. package/snackbar/snackbar.d.ts.map +1 -1
  189. package/snackbar/snackbar.js +13 -7
  190. package/snackbar/snackbar.js.map +1 -1
  191. package/switch/switch.js +4 -4
  192. package/switch/switch.js.map +1 -1
  193. package/text-field/text-field.d.ts +2 -0
  194. package/text-field/text-field.d.ts.map +1 -1
  195. package/text-field/text-field.js +22 -30
  196. package/text-field/text-field.js.map +1 -1
  197. package/typeahead/highlight.js +7 -24
  198. package/typeahead/highlight.js.map +1 -1
  199. package/typeahead/typeahead.d.ts +3 -3
  200. package/typeahead/typeahead.d.ts.map +1 -1
  201. package/typeahead/typeahead.js +178 -204
  202. package/typeahead/typeahead.js.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './radio.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-radio')\nexport class UmRadio extends UmSelectionControl {\n static override styles = [\n baseStyles,\n styles\n ];\n\n @property({type: Boolean, attribute: 'hide-state-layer', reflect: true}) hideStateLayer = false;\n\n protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n protected override renderIndicator(): HTMLTemplateResult {\n return html`<div class=\"indicator\"></div>`;\n }\n\n override get checked() {\n return super.checked;\n }\n override set checked(value: boolean) {\n super.checked = value;\n\n if (!value) {\n return;\n }\n\n this.uncheckSiblings();\n\n if (this.input) {\n this.input.tabIndex = 0\n }\n }\n\n get #siblings(): UmRadio[] {\n if (!this.name) {\n return [this];\n }\n\n return Array\n .from((<Element>this.getRootNode()).querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n }\n\n constructor() {\n super();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.ensureOnlyOneChecked();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this.#handleKeyDown);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.#handleKeyDown);\n }\n\n #handleKeyDown(event: KeyboardEvent) {\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n\n if (!isLeft && !isRight && !isDown && !isUp) {\n return;\n }\n\n // Don't try to select another sibling if there aren't any.\n const siblings = this.#siblings;\n\n if (!siblings.length) {\n return;\n }\n\n event.preventDefault();\n\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n const factor = forwards ? 1 : -1;\n\n const thisIndex = siblings.indexOf(this);\n let nextIndex = thisIndex + factor;\n\n while (nextIndex !== thisIndex) {\n if (nextIndex >= siblings.length) {\n // Return to start if moving past the last item.\n nextIndex = 0;\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = siblings.length - 1;\n }\n\n const nextSibling = siblings[nextIndex];\n\n if (nextSibling.disabled) {\n nextIndex += factor;\n\n continue;\n }\n\n nextSibling.checked = true;\n nextSibling.input.focus();\n nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n break;\n }\n }\n\n private ensureOnlyOneChecked() {\n if (!this.name) {\n return;\n }\n\n const radios = Array.from(document.querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n const lastChecked = radios\n .reverse()\n .find(r => r.checked);\n\n if (!lastChecked) {\n return;\n }\n\n lastChecked.checked = true;\n }\n\n private uncheckSiblings() {\n for (const radio of this.#siblings) {\n if (radio === this) {\n continue;\n }\n\n if (radio.input) {\n radio.input.tabIndex = -1;\n }\n\n radio.checked = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-radio': UmRadio;\n }\n}\n"]}
1
+ {"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './radio.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-radio')\nexport class UmRadio extends UmSelectionControl {\n static override styles = [\n baseStyles,\n styles\n ];\n\n @property({type: Boolean, attribute: 'hide-state-layer', reflect: true}) hideStateLayer = false;\n\n protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n protected override renderIndicator(): HTMLTemplateResult {\n return html`<div class=\"indicator\"></div>`;\n }\n\n override get checked() {\n return super.checked;\n }\n override set checked(value: boolean) {\n super.checked = value;\n\n if (!value) {\n return;\n }\n\n this.uncheckSiblings();\n\n if (this.input) {\n this.input.tabIndex = 0\n }\n }\n\n get #siblings(): UmRadio[] {\n if (!this.name) {\n return [this];\n }\n\n return Array\n .from((<Element>this.getRootNode()).querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n }\n\n constructor() {\n super();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.ensureOnlyOneChecked();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this.#handleKeyDown);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.#handleKeyDown);\n }\n\n #handleKeyDown(event: KeyboardEvent) {\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n\n if (!isLeft && !isRight && !isDown && !isUp) {\n return;\n }\n\n // Don't try to select another sibling if there aren't any.\n const siblings = this.#siblings;\n\n if (!siblings.length) {\n return;\n }\n\n event.preventDefault();\n\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n const factor = forwards ? 1 : -1;\n\n const thisIndex = siblings.indexOf(this);\n let nextIndex = thisIndex + factor;\n\n while (nextIndex !== thisIndex) {\n if (nextIndex >= siblings.length) {\n // Return to start if moving past the last item.\n nextIndex = 0;\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = siblings.length - 1;\n }\n\n const nextSibling = siblings[nextIndex];\n\n if (nextSibling.disabled) {\n nextIndex += factor;\n\n continue;\n }\n\n nextSibling.checked = true;\n nextSibling.input.focus();\n nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n break;\n }\n }\n\n private ensureOnlyOneChecked() {\n if (!this.name) {\n return;\n }\n\n const radios = Array.from(document.querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n const lastChecked = radios\n .reverse()\n .find(r => r.checked);\n\n if (!lastChecked) {\n return;\n }\n\n lastChecked.checked = true;\n }\n\n private uncheckSiblings() {\n for (const radio of this.#siblings) {\n if (radio === this) {\n continue;\n }\n\n if (radio.input) {\n radio.input.tabIndex = -1;\n }\n\n radio.checked = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-radio': UmRadio;\n }\n}\n"]}
package/ripple/ripple.js CHANGED
@@ -8,7 +8,9 @@ var UmRipple_1;
8
8
  import { html, LitElement } from 'lit';
9
9
  import { customElement, property, query } from 'lit/decorators.js';
10
10
  import { styles } from './ripple.styles.js';
11
- let UmRipple = UmRipple_1 = class UmRipple extends LitElement {
11
+ let UmRipple = class UmRipple extends LitElement {
12
+ static { UmRipple_1 = this; }
13
+ static { this.styles = styles; }
12
14
  constructor() {
13
15
  super();
14
16
  this.isTouching = false;
@@ -110,7 +112,6 @@ let UmRipple = UmRipple_1 = class UmRipple extends LitElement {
110
112
  element.style.marginTop = `${-size / 2}px`;
111
113
  }
112
114
  };
113
- UmRipple.styles = styles;
114
115
  __decorate([
115
116
  property({ type: Boolean, reflect: true })
116
117
  ], UmRipple.prototype, "disabled", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../src/ripple/ripple.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 } from './ripple.styles.js';\n\n@customElement('u-ripple')\nexport class UmRipple extends LitElement {\n\n static override styles = styles;\n\n private isTouching = false;\n\n /**\n * Disables the ripple.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @query('.ripple-container') private readonly rippleContainer!: HTMLElement;\n\n constructor() {\n super();\n }\n\n override render(): HTMLTemplateResult {\n return html`<div class=\"ripple-container\"></div><slot></slot>`\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.attachEvents();\n this.ariaHidden = \"true\";\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.dettachEvents();\n }\n\n private attachEvents(): void {\n\n this.addEventListener('mousedown', this.handleMouseDown);\n this.addEventListener('touchstart', this.handleTouchStart);\n }\n\n private dettachEvents(): void {\n\n this.removeEventListener('mousedown', this.handleMouseDown);\n this.removeEventListener('touchstart', this.handleTouchStart);\n }\n\n private handleMouseDown(e: MouseEvent): void {\n\n if (this.isTouching || !this.canCreateRipple()) {\n return;\n }\n\n this.createRipple(e.clientX, e.clientY, 'mouseup');\n }\n\n private handleTouchStart(e: TouchEvent): void {\n\n if (!this.canCreateRipple()) {\n return;\n }\n\n this.isTouching = true;\n\n const dismiss = this.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend')!;\n\n this.addEventListener(\"touchmove\", dismiss);\n }\n\n private canCreateRipple(): boolean {\n return !this.disabled;\n }\n\n createRipple(targetX: number | null = null, targetY: number | null = null, releaseEventName: string | null = null): (() => void) | null {\n const preClientRect = this.rippleContainer.getBoundingClientRect();\n targetX ??= preClientRect.x + this.rippleContainer.clientWidth / 2;\n targetY ??= preClientRect.y + this.rippleContainer.clientHeight / 2;\n\n const ripple = document.createElement('DIV');\n ripple.classList.add('ripple');\n this.rippleContainer!.appendChild(ripple);\n\n requestAnimationFrame(() => {\n const clientRect = this.getBoundingClientRect();\n const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);\n const rippleSize = largestDimensionSize * 2;\n\n UmRipple._setElementSquareSizeAndCenter(ripple, rippleSize);\n ripple.style.setProperty('--_ripple-transition-duration', `${1080 * Math.pow(rippleSize, 0.3)}ms`);\n\n const x = (targetX! - clientRect.left) + ((rippleSize - this.rippleContainer.clientWidth) / 2);\n const y = (targetY! - clientRect.top) + ((rippleSize - this.rippleContainer.clientHeight) / 2);\n\n ripple.style.transformOrigin = `${x}px ${y}px`;\n ripple.classList.add(releaseEventName ? 'show' : 'show-forced');\n });\n\n const interval = setInterval(() => {\n\n if (!ripple.classList.contains('dismiss') && !ripple.classList.contains('show-forced')) {\n return;\n }\n\n const animations = ripple.getAnimations();\n\n if (animations.length) {\n return;\n }\n\n clearInterval(interval);\n ripple.remove();\n }, 1000);\n\n if (!releaseEventName) {\n return null;\n }\n\n return this.createDismissEvent(ripple, releaseEventName);\n }\n\n private createDismissEvent(ripple: HTMLElement, releaseEventName: string): () => void {\n const dismiss = () => {\n ripple.classList.add('dismiss');\n\n this.isTouching = false;\n\n this.removeEventListener('dragover', dismiss);\n this.removeEventListener('mouseleave', dismiss);\n window.removeEventListener(releaseEventName, dismiss);\n }\n\n this.addEventListener(\"dragover\", dismiss);\n this.addEventListener(\"mouseleave\", dismiss);\n window.addEventListener(releaseEventName, dismiss);\n\n return dismiss;\n }\n\n private static _setElementSquareSizeAndCenter(element: HTMLElement, size: number) {\n element.style.top = \"50%\";\n element.style.left = \"50%\";\n element.style.width = `${size}px`;\n element.style.height = `${size}px`;\n element.style.marginLeft = `${-size / 2}px`;\n element.style.marginTop = `${-size / 2}px`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-ripple': UmRipple;\n }\n}\n"]}
1
+ {"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../src/ripple/ripple.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 } from './ripple.styles.js';\n\n@customElement('u-ripple')\nexport class UmRipple extends LitElement {\n\n static override styles = styles;\n\n private isTouching = false;\n\n /**\n * Disables the ripple.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @query('.ripple-container') private readonly rippleContainer!: HTMLElement;\n\n constructor() {\n super();\n }\n\n override render(): HTMLTemplateResult {\n return html`<div class=\"ripple-container\"></div><slot></slot>`\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.attachEvents();\n this.ariaHidden = \"true\";\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.dettachEvents();\n }\n\n private attachEvents(): void {\n\n this.addEventListener('mousedown', this.handleMouseDown);\n this.addEventListener('touchstart', this.handleTouchStart);\n }\n\n private dettachEvents(): void {\n\n this.removeEventListener('mousedown', this.handleMouseDown);\n this.removeEventListener('touchstart', this.handleTouchStart);\n }\n\n private handleMouseDown(e: MouseEvent): void {\n\n if (this.isTouching || !this.canCreateRipple()) {\n return;\n }\n\n this.createRipple(e.clientX, e.clientY, 'mouseup');\n }\n\n private handleTouchStart(e: TouchEvent): void {\n\n if (!this.canCreateRipple()) {\n return;\n }\n\n this.isTouching = true;\n\n const dismiss = this.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend')!;\n\n this.addEventListener(\"touchmove\", dismiss);\n }\n\n private canCreateRipple(): boolean {\n return !this.disabled;\n }\n\n createRipple(targetX: number | null = null, targetY: number | null = null, releaseEventName: string | null = null): (() => void) | null {\n const preClientRect = this.rippleContainer.getBoundingClientRect();\n targetX ??= preClientRect.x + this.rippleContainer.clientWidth / 2;\n targetY ??= preClientRect.y + this.rippleContainer.clientHeight / 2;\n\n const ripple = document.createElement('DIV');\n ripple.classList.add('ripple');\n this.rippleContainer!.appendChild(ripple);\n\n requestAnimationFrame(() => {\n const clientRect = this.getBoundingClientRect();\n const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);\n const rippleSize = largestDimensionSize * 2;\n\n UmRipple._setElementSquareSizeAndCenter(ripple, rippleSize);\n ripple.style.setProperty('--_ripple-transition-duration', `${1080 * Math.pow(rippleSize, 0.3)}ms`);\n\n const x = (targetX! - clientRect.left) + ((rippleSize - this.rippleContainer.clientWidth) / 2);\n const y = (targetY! - clientRect.top) + ((rippleSize - this.rippleContainer.clientHeight) / 2);\n\n ripple.style.transformOrigin = `${x}px ${y}px`;\n ripple.classList.add(releaseEventName ? 'show' : 'show-forced');\n });\n\n const interval = setInterval(() => {\n\n if (!ripple.classList.contains('dismiss') && !ripple.classList.contains('show-forced')) {\n return;\n }\n\n const animations = ripple.getAnimations();\n\n if (animations.length) {\n return;\n }\n\n clearInterval(interval);\n ripple.remove();\n }, 1000);\n\n if (!releaseEventName) {\n return null;\n }\n\n return this.createDismissEvent(ripple, releaseEventName);\n }\n\n private createDismissEvent(ripple: HTMLElement, releaseEventName: string): () => void {\n const dismiss = () => {\n ripple.classList.add('dismiss');\n\n this.isTouching = false;\n\n this.removeEventListener('dragover', dismiss);\n this.removeEventListener('mouseleave', dismiss);\n window.removeEventListener(releaseEventName, dismiss);\n }\n\n this.addEventListener(\"dragover\", dismiss);\n this.addEventListener(\"mouseleave\", dismiss);\n window.addEventListener(releaseEventName, dismiss);\n\n return dismiss;\n }\n\n private static _setElementSquareSizeAndCenter(element: HTMLElement, size: number) {\n element.style.top = \"50%\";\n element.style.left = \"50%\";\n element.style.width = `${size}px`;\n element.style.height = `${size}px`;\n element.style.marginLeft = `${-size / 2}px`;\n element.style.marginTop = `${-size / 2}px`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-ripple': UmRipple;\n }\n}\n"]}
@@ -0,0 +1,5 @@
1
+ import { UmOption } from './option.js';
2
+ export type ExtendedOption = HTMLOptionElement & {
3
+ _parent: UmOption;
4
+ };
5
+ //# sourceMappingURL=extended-option.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"extended-option.d.ts","sourceRoot":"","sources":["../../src/select/extended-option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=extended-option.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"extended-option.js","sourceRoot":"","sources":["../../src/select/extended-option.ts"],"names":[],"mappings":"","sourcesContent":["import { UmOption } from './option.js';\n\nexport type ExtendedOption = HTMLOptionElement & {_parent: UmOption};\n"]}
@@ -0,0 +1,6 @@
1
+ import { ExtendedOption } from './extended-option.js';
2
+ export type ExtendedSelect = HTMLSelectElement & {
3
+ options: ExtendedOption[];
4
+ selectedOptions: ExtendedOption[];
5
+ };
6
+ //# sourceMappingURL=extended-select.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"extended-select.d.ts","sourceRoot":"","sources":["../../src/select/extended-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG;IAC/C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,eAAe,EAAE,cAAc,EAAE,CAAC;CACnC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=extended-select.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"extended-select.js","sourceRoot":"","sources":["../../src/select/extended-select.ts"],"names":[],"mappings":"","sourcesContent":["import { ExtendedOption } from './extended-option.js';\n\nexport type ExtendedSelect = HTMLSelectElement & {\n options: ExtendedOption[];\n selectedOptions: ExtendedOption[];\n};\n"]}
@@ -1,15 +1,25 @@
1
+ import { TemplateResult } from 'lit';
1
2
  import { UmMenuItem } from '../menu/menu-item.js';
3
+ import { ExtendedOption } from './extended-option.js';
4
+ import { UmSelect } from './select.js';
2
5
  import './select.js';
3
6
  export declare class UmOption extends UmMenuItem {
4
7
  #private;
8
+ static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
9
+ _nativeOption: ExtendedOption;
10
+ _listItem: HTMLDivElement;
5
11
  get value(): string;
6
12
  set value(value: string);
7
13
  get selected(): boolean;
8
14
  set selected(selected: boolean);
15
+ protected renderDefaultTrailingIcon(): TemplateResult;
9
16
  private get _selectedAttribute();
10
17
  private set _selectedAttribute(value);
18
+ _select: UmSelect | null;
19
+ constructor();
11
20
  connectedCallback(): void;
12
21
  disconnectedCallback(): void;
22
+ setSelectedByUser(): void;
13
23
  }
14
24
  declare global {
15
25
  interface HTMLElementTagNameMap {
@@ -1 +1 @@
1
- {"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGlD,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,UAAU;;IAKtC,IACI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IACI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAU7B;IAID,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,kBAAkB,QAO7B;IAIQ,iBAAiB;IAQjB,oBAAoB;CAiE9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
1
+ {"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,UAAU;;IAEtC,OAAgB,MAAM,+DAA+B;IAErD,aAAa,EAAE,cAAc,CAWxB;IAEL,SAAS,iBAOJ;IAIL,IACI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IACI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAmB7B;cAEkB,yBAAyB,IAAI,cAAc;IAS9D,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,kBAAkB,QAO7B;IAED,OAAO,EAAG,QAAQ,GAAG,IAAI,CAAC;;IAQjB,iBAAiB;IAQjB,oBAAoB;IAkC7B,iBAAiB;CA2BlB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
package/select/option.js CHANGED
@@ -4,118 +4,128 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
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
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
- var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
- };
12
- var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
13
- if (kind === "m") throw new TypeError("Private method is not writable");
14
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
15
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
16
- return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
17
- };
18
- var _UmOption_instances, _UmOption_nativeOption, _UmOption_mutationObserver, _UmOption_select, _UmOption_attach, _UmOption_handleClick, _UmOption_updateContent, _UmOption_setNativeOption;
7
+ import { svg } from 'lit';
19
8
  import { customElement, property, state } from 'lit/decorators.js';
9
+ import { styles } from './option.styles.js';
20
10
  import { UmMenuItem } from '../menu/menu-item.js';
21
11
  import './select.js';
22
12
  let UmOption = class UmOption extends UmMenuItem {
23
- constructor() {
24
- super(...arguments);
25
- _UmOption_instances.add(this);
26
- _UmOption_nativeOption.set(this, document.createElement('option'));
27
- _UmOption_mutationObserver.set(this, null);
28
- _UmOption_select.set(this, void 0);
29
- }
13
+ static { this.styles = [UmMenuItem.styles, styles]; }
14
+ #mutationObserver;
30
15
  get value() {
31
- return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").value;
16
+ return this._nativeOption.value;
32
17
  }
33
18
  set value(value) {
34
- __classPrivateFieldGet(this, _UmOption_nativeOption, "f").value = value;
19
+ this._nativeOption.value = value;
35
20
  }
36
21
  get selected() {
37
- return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").selected;
22
+ return this._nativeOption.selected;
38
23
  }
39
24
  set selected(selected) {
40
25
  if (this.selected === selected) {
41
26
  return;
42
27
  }
43
- __classPrivateFieldGet(this, _UmOption_nativeOption, "f").selected = selected;
44
- if (__classPrivateFieldGet(this, _UmOption_select, "f")) {
45
- __classPrivateFieldGet(this, _UmOption_select, "f").empty = !__classPrivateFieldGet(this, _UmOption_nativeOption, "f").textContent?.trim();
28
+ this._nativeOption.selected = selected;
29
+ if (selected) {
30
+ this.classList.add('selected');
31
+ }
32
+ else {
33
+ this.classList.remove('selected');
46
34
  }
35
+ if (!this._select) {
36
+ return;
37
+ }
38
+ this._select.button.setAttribute('aria-labelledby', this._listItem.id);
39
+ this._select.empty = !this._nativeOption.textContent?.trim();
40
+ }
41
+ renderDefaultTrailingIcon() {
42
+ return svg `
43
+ <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
44
+ <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
45
+ </svg>`;
47
46
  }
48
47
  get _selectedAttribute() {
49
- return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").hasAttribute('selected');
48
+ return this._nativeOption.hasAttribute('selected');
50
49
  }
51
50
  // @ts-ignore
52
51
  set _selectedAttribute(selected) {
53
52
  if (selected) {
54
- __classPrivateFieldGet(this, _UmOption_nativeOption, "f").setAttribute('selected', '');
53
+ this._nativeOption.setAttribute('selected', '');
55
54
  return;
56
55
  }
57
- __classPrivateFieldGet(this, _UmOption_nativeOption, "f").removeAttribute('selected');
56
+ this._nativeOption.removeAttribute('selected');
57
+ }
58
+ constructor() {
59
+ super();
60
+ this._nativeOption = (() => {
61
+ const option = document.createElement('option');
62
+ option._parent = this;
63
+ if (this.hasAttribute('selected')) {
64
+ option.setAttribute('selected', '');
65
+ }
66
+ option.textContent = this.textContent;
67
+ return option;
68
+ })();
69
+ this._listItem = (() => {
70
+ const listItem = document.createElement('div');
71
+ listItem.role = 'option';
72
+ listItem.textContent = this.textContent;
73
+ return listItem;
74
+ })();
75
+ this.#mutationObserver = new MutationObserver(() => this.#updateContent());
76
+ this.#mutationObserver.observe(this, { characterData: true, childList: true, subtree: true });
58
77
  }
59
78
  connectedCallback() {
60
79
  super.connectedCallback();
61
- this.addEventListener('click', __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_handleClick));
80
+ this.addEventListener('click', this.#handleClick);
62
81
  this.setAttribute('tabindex', '-1');
63
- __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_attach).call(this);
82
+ this.#attach();
64
83
  }
65
84
  disconnectedCallback() {
66
85
  super.disconnectedCallback();
67
- this.removeEventListener('click', __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_handleClick));
68
- __classPrivateFieldGet(this, _UmOption_mutationObserver, "f").disconnect();
69
- __classPrivateFieldSet(this, _UmOption_mutationObserver, null, "f");
70
- __classPrivateFieldGet(this, _UmOption_nativeOption, "f").remove();
71
- if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
86
+ this.removeEventListener('click', this.#handleClick);
87
+ this._nativeOption.remove();
88
+ if (!this._select) {
72
89
  return;
73
90
  }
74
91
  // eslint-disable-next-line no-self-assign
75
- __classPrivateFieldGet(this, _UmOption_select, "f").value = __classPrivateFieldGet(this, _UmOption_select, "f").value;
76
- __classPrivateFieldSet(this, _UmOption_select, null, "f");
92
+ this._select.value = this._select.value;
93
+ this._select = null;
77
94
  }
78
- };
79
- _UmOption_nativeOption = new WeakMap();
80
- _UmOption_mutationObserver = new WeakMap();
81
- _UmOption_select = new WeakMap();
82
- _UmOption_instances = new WeakSet();
83
- _UmOption_attach = async function _UmOption_attach() {
84
- __classPrivateFieldSet(this, _UmOption_select, this.parentElement.tagName === 'U-SELECT'
85
- ? this.parentElement
86
- : null, "f");
87
- if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
88
- return;
95
+ async #attach() {
96
+ this._select = this.parentElement.constructor.name === 'UmSelect'
97
+ ? this.parentElement
98
+ : null;
99
+ await this.#setNativeOption();
89
100
  }
90
- __classPrivateFieldSet(this, _UmOption_mutationObserver, new MutationObserver(() => __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_updateContent).call(this)), "f");
91
- __classPrivateFieldGet(this, _UmOption_mutationObserver, "f").observe(this, { characterData: true, childList: true, subtree: true });
92
- await __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_setNativeOption).call(this);
93
- };
94
- _UmOption_handleClick = function _UmOption_handleClick(e) {
95
- if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
96
- return;
101
+ #handleClick(e) {
102
+ if (!this._select) {
103
+ return;
104
+ }
105
+ e.stopPropagation();
106
+ this.setSelectedByUser();
97
107
  }
98
- e.stopPropagation();
99
- this.selected = true;
100
- // eslint-disable-next-line no-self-assign
101
- __classPrivateFieldGet(this, _UmOption_select, "f").value = __classPrivateFieldGet(this, _UmOption_select, "f").value;
102
- __classPrivateFieldGet(this, _UmOption_select, "f").dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
103
- __classPrivateFieldGet(this, _UmOption_select, "f").dispatchEvent(new Event('change', { bubbles: true }));
104
- __classPrivateFieldGet(this, _UmOption_select, "f").menu?.close();
105
- };
106
- _UmOption_updateContent = function _UmOption_updateContent() {
107
- __classPrivateFieldGet(this, _UmOption_nativeOption, "f").textContent = this.textContent;
108
- };
109
- _UmOption_setNativeOption = async function _UmOption_setNativeOption() {
110
- if (this.hasAttribute('selected')) {
111
- __classPrivateFieldGet(this, _UmOption_nativeOption, "f").setAttribute('selected', '');
108
+ setSelectedByUser() {
109
+ if (!this._select) {
110
+ return;
111
+ }
112
+ this._select.selectedOptions[0]?.classList.remove('selected');
113
+ this.selected = true;
114
+ // eslint-disable-next-line no-self-assign
115
+ this._select.value = this._select.value;
116
+ this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
117
+ this._select.dispatchEvent(new Event('change', { bubbles: true }));
118
+ this._select.menu?.close();
119
+ }
120
+ #updateContent() {
121
+ this._nativeOption.textContent = this.textContent;
122
+ this._listItem.textContent = this.textContent;
112
123
  }
113
- else {
114
- __classPrivateFieldGet(this, _UmOption_nativeOption, "f").removeAttribute('selected');
124
+ async #setNativeOption() {
125
+ await this.updateComplete;
126
+ this.#updateContent();
127
+ this._select?._updateOptions();
115
128
  }
116
- __classPrivateFieldGet(this, _UmOption_select, "f").nativeSelect.appendChild(__classPrivateFieldGet(this, _UmOption_nativeOption, "f"));
117
- await this.updateComplete;
118
- __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_updateContent).call(this);
119
129
  };
120
130
  __decorate([
121
131
  property({ reflect: true })
@@ -1 +1 @@
1
- {"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { UmSelect } from './select.js';\n\nimport './select.js';\n\n@customElement('u-option')\nexport class UmOption extends UmMenuItem {\n\n #nativeOption: HTMLOptionElement = document.createElement('option');\n #mutationObserver: MutationObserver | null = null;\n\n @property({reflect: true})\n get value(): string {\n return this.#nativeOption.value;\n }\n set value(value: string) {\n this.#nativeOption.value = value;\n }\n\n @state()\n get selected(): boolean {\n return this.#nativeOption.selected;\n }\n set selected(selected: boolean) {\n if (this.selected === selected) {\n return;\n }\n\n this.#nativeOption.selected = selected;\n\n if (this.#select) {\n this.#select.empty = !this.#nativeOption.textContent?.trim();\n }\n }\n\n @property({type: Boolean, attribute: 'selected'})\n // @ts-ignore\n private get _selectedAttribute(): boolean {\n return this.#nativeOption.hasAttribute('selected');\n }\n // @ts-ignore\n private set _selectedAttribute(selected: boolean) {\n if (selected) {\n this.#nativeOption.setAttribute('selected', '');\n return;\n }\n\n this.#nativeOption.removeAttribute('selected');\n }\n\n #select!: UmSelect | null;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.#handleClick);\n this.setAttribute('tabindex', '-1');\n\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick);\n\n this.#mutationObserver!.disconnect();\n this.#mutationObserver = null;\n this.#nativeOption.remove();\n\n if (!this.#select) {\n return;\n }\n\n // eslint-disable-next-line no-self-assign\n this.#select.value = this.#select.value;\n this.#select = null;\n }\n\n async #attach(): Promise<void> {\n\n this.#select = this.parentElement!.tagName === 'U-SELECT'\n ? this.parentElement as UmSelect\n : null;\n\n if (!this.#select) {\n return;\n }\n\n this.#mutationObserver = new MutationObserver(() => this.#updateContent())\n this.#mutationObserver.observe(this, {characterData: true, childList: true, subtree: true});\n\n await this.#setNativeOption();\n }\n\n #handleClick(e: Event) {\n if (!this.#select) {\n return;\n }\n\n e.stopPropagation();\n\n this.selected = true;\n // eslint-disable-next-line no-self-assign\n this.#select.value = this.#select.value;\n this.#select.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n this.#select.dispatchEvent(new Event('change', {bubbles: true}));\n\n this.#select.menu?.close();\n }\n\n #updateContent() {\n this.#nativeOption.textContent = this.textContent;\n }\n\n async #setNativeOption(): Promise<void> {\n if (this.hasAttribute('selected')) {\n this.#nativeOption.setAttribute('selected', '');\n } else {\n this.#nativeOption.removeAttribute('selected');\n }\n\n this.#select!.nativeSelect.appendChild(this.#nativeOption);\n\n await this.updateComplete;\n this.#updateContent();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-option': UmOption;\n }\n}\n"]}
1
+ {"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"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","sourcesContent":["import { svg, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { styles } from './option.styles.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { ExtendedOption } from './extended-option.js';\nimport { UmSelect } from './select.js';\n\nimport './select.js';\n\n@customElement('u-option')\nexport class UmOption extends UmMenuItem {\n\n static override styles = [UmMenuItem.styles, styles];\n\n _nativeOption: ExtendedOption = (() => {\n const option = <ExtendedOption>document.createElement('option');\n option._parent = this;\n\n if (this.hasAttribute('selected')) {\n option.setAttribute('selected', '');\n }\n\n option.textContent = this.textContent;\n\n return option;\n })();\n\n _listItem = (() => {\n const listItem = document.createElement('div');\n listItem.role = 'option';\n\n listItem.textContent = this.textContent;\n\n return listItem;\n })();\n\n readonly #mutationObserver: MutationObserver;\n\n @property({reflect: true})\n get value(): string {\n return this._nativeOption.value;\n }\n set value(value: string) {\n this._nativeOption.value = value;\n }\n\n @state()\n get selected(): boolean {\n return this._nativeOption.selected;\n }\n set selected(selected: boolean) {\n if (this.selected === selected) {\n return;\n }\n\n this._nativeOption.selected = selected;\n\n if (selected) {\n this.classList.add('selected');\n } else {\n this.classList.remove('selected');\n }\n\n if (!this._select) {\n return;\n }\n\n this._select.button.setAttribute('aria-labelledby', this._listItem.id);\n this._select.empty = !this._nativeOption.textContent?.trim();\n }\n\n protected override renderDefaultTrailingIcon(): TemplateResult {\n return svg`\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\"/>\n </svg>`;\n }\n\n @property({type: Boolean, attribute: 'selected'})\n // @ts-ignore\n private get _selectedAttribute(): boolean {\n return this._nativeOption.hasAttribute('selected');\n }\n // @ts-ignore\n private set _selectedAttribute(selected: boolean) {\n if (selected) {\n this._nativeOption.setAttribute('selected', '');\n return;\n }\n\n this._nativeOption.removeAttribute('selected');\n }\n\n _select!: UmSelect | null;\n\n constructor() {\n super();\n this.#mutationObserver = new MutationObserver(() => this.#updateContent())\n this.#mutationObserver.observe(this, {characterData: true, childList: true, subtree: true});\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.#handleClick);\n this.setAttribute('tabindex', '-1');\n\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick);\n\n this._nativeOption.remove();\n\n if (!this._select) {\n return;\n }\n\n // eslint-disable-next-line no-self-assign\n this._select.value = this._select.value;\n this._select = null;\n }\n\n async #attach(): Promise<void> {\n\n this._select = this.parentElement!.constructor.name === 'UmSelect'\n ? this.parentElement as UmSelect\n : null;\n\n await this.#setNativeOption();\n }\n\n #handleClick(e: Event) {\n if (!this._select) {\n return;\n }\n\n e.stopPropagation();\n\n this.setSelectedByUser();\n }\n\n setSelectedByUser() {\n if (!this._select) {\n return;\n }\n\n this._select.selectedOptions[0]?.classList.remove('selected');\n this.selected = true;\n // eslint-disable-next-line no-self-assign\n this._select.value = this._select.value;\n this._select.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n this._select.dispatchEvent(new Event('change', {bubbles: true}));\n\n this._select.menu?.close();\n }\n\n #updateContent() {\n this._nativeOption.textContent = this.textContent;\n this._listItem.textContent = this.textContent;\n }\n\n async #setNativeOption(): Promise<void> {\n\n await this.updateComplete;\n this.#updateContent();\n\n this._select?._updateOptions();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-option': UmOption;\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"option.styles.d.ts","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAElB,CAAC"}
1
+ {"version":3,"file":"option.styles.d.ts","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAYlB,CAAC"}
@@ -1,5 +1,15 @@
1
1
  import { css } from 'lit';
2
2
  export const styles = css `
3
+ :host(.selected) {
4
+ background-color: var(--u-select-option-selected-background-color, var(--u-color-primary-container, rgb(234, 221, 255)));
5
+ }
6
+ :host(.selected) .icon,
7
+ :host(.selected) .content {
8
+ color: var(--u-select-option-selected-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));
9
+ }
3
10
 
11
+ :host(:not(.selected):not([has-trailing-icon])) .trailing {
12
+ display: none;
13
+ }
4
14
  `;
5
15
  //# sourceMappingURL=option.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;CAEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n\n`;\n"]}
1
+ {"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;CAYzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host(.selected) {\n background-color: var(--u-select-option-selected-background-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n }\n :host(.selected) .icon,\n :host(.selected) .content {\n color: var(--u-select-option-selected-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n }\n\n :host(:not(.selected):not([has-trailing-icon])) .trailing {\n display: none;\n }\n`;\n"]}
@@ -0,0 +1,14 @@
1
+ import { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';
2
+ import { UmOption } from './option.js';
3
+ import { UmSelect } from './select.js';
4
+ export declare class SelectNavigationController extends MenuFieldNavigationController<UmSelect, UmOption> {
5
+ #private;
6
+ protected handleKeyDown(event: KeyboardEvent): boolean;
7
+ attach(element: HTMLElement): void;
8
+ detach(): void;
9
+ protected afterFocus(option: UmOption): void;
10
+ protected afterBlur(): void;
11
+ private handleType;
12
+ private findNextElementByTerm;
13
+ }
14
+ //# sourceMappingURL=select-navigation-controller.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select-navigation-controller.d.ts","sourceRoot":"","sources":["../../src/select/select-navigation-controller.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,0DAA0D,CAAC;AACzG,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AASvC,qBAAa,0BAA2B,SAAQ,6BAA6B,CAAC,QAAQ,EAAE,QAAQ,CAAC;;cAI5E,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA0BtD,MAAM,CAAC,OAAO,EAAE,WAAW;IAK3B,MAAM;cAUI,UAAU,CAAC,MAAM,EAAE,QAAQ;cAI3B,SAAS;IAI5B,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,qBAAqB;CAmB9B"}
@@ -0,0 +1,80 @@
1
+ import { normalizedStartsWith } from '../shared/compare-text.js';
2
+ import { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';
3
+ const getCleanTypeaheadStatus = () => ({
4
+ typing: false,
5
+ repeating: false,
6
+ buffer: '',
7
+ timeoutId: 0
8
+ });
9
+ export class SelectNavigationController extends MenuFieldNavigationController {
10
+ #typeaheadStatus = getCleanTypeaheadStatus();
11
+ handleKeyDown(event) {
12
+ if (this.host.menu.open) {
13
+ const handled = super.handleKeyDown(event);
14
+ return handled || this.handleType(event);
15
+ }
16
+ const isDown = event.key === 'ArrowDown';
17
+ const isUp = event.key === 'ArrowUp';
18
+ if (!isDown && !isUp) {
19
+ return this.handleType(event);
20
+ }
21
+ event.preventDefault();
22
+ this.host.menu.show();
23
+ if (!this.host.selectedOptions.length) {
24
+ return true;
25
+ }
26
+ const option = this.host.selectedOptions[0];
27
+ this.navigateTo(event, option);
28
+ return true;
29
+ }
30
+ attach(element) {
31
+ super.attach(element);
32
+ this.host.menu.addEventListener('menu-item-mouseenter', this.#handleMouseFocus);
33
+ }
34
+ detach() {
35
+ super.detach();
36
+ this.host.menu.removeEventListener('menu-item-mouseenter', this.#handleMouseFocus);
37
+ }
38
+ #handleMouseFocus = (e) => {
39
+ this.blurMenu();
40
+ this.focusMenu(e.target, false, false);
41
+ };
42
+ afterFocus(option) {
43
+ this.host.button.setAttribute('aria-activedescendant', option._listItem.id);
44
+ }
45
+ afterBlur() {
46
+ this.host.button.removeAttribute('aria-activedescendant');
47
+ }
48
+ handleType(event) {
49
+ if (event.key.length > 1) {
50
+ return false;
51
+ }
52
+ if (this.#typeaheadStatus.timeoutId) {
53
+ clearTimeout(this.#typeaheadStatus.timeoutId);
54
+ }
55
+ const lastFocusedMenu = this.focusedMenu;
56
+ this.#typeaheadStatus.buffer += event.key;
57
+ this.#typeaheadStatus.timeoutId = setTimeout(() => this.#typeaheadStatus = getCleanTypeaheadStatus(), 1000);
58
+ const term = this.#typeaheadStatus.buffer.replaceAll(event.key, '') === ''
59
+ ? event.key
60
+ : this.#typeaheadStatus.buffer;
61
+ this.findNextElementByTerm(term, lastFocusedMenu);
62
+ return true;
63
+ }
64
+ findNextElementByTerm(term, lastFocusedMenu) {
65
+ let nextMenu = lastFocusedMenu?.nextElementSibling;
66
+ if (!nextMenu || !normalizedStartsWith(nextMenu.textContent, term)) {
67
+ nextMenu = this.host.options.find(o => normalizedStartsWith(o.textContent, term));
68
+ }
69
+ if (!nextMenu) {
70
+ return;
71
+ }
72
+ if (this.host.menu.open) {
73
+ this.blurMenu();
74
+ this.focusMenu(nextMenu);
75
+ return;
76
+ }
77
+ nextMenu.setSelectedByUser();
78
+ }
79
+ }
80
+ //# sourceMappingURL=select-navigation-controller.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select-navigation-controller.js","sourceRoot":"","sources":["../../src/select/select-navigation-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { normalizedStartsWith } from '../shared/compare-text.js';\nimport { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';\nimport { UmOption } from './option.js';\nimport { UmSelect } from './select.js';\n\nconst getCleanTypeaheadStatus = () => ({\n typing: false,\n repeating: false,\n buffer: '',\n timeoutId: 0\n});\n\nexport class SelectNavigationController extends MenuFieldNavigationController<UmSelect, UmOption> {\n\n #typeaheadStatus = getCleanTypeaheadStatus();\n\n protected override handleKeyDown(event: KeyboardEvent): boolean {\n if (this.host.menu.open) {\n const handled = super.handleKeyDown(event);\n\n return handled || this.handleType(event);\n }\n\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n\n if (!isDown && !isUp) {\n return this.handleType(event);\n }\n\n event.preventDefault();\n this.host.menu.show();\n\n if (!this.host.selectedOptions.length) {\n return true;\n }\n\n const option = this.host.selectedOptions[0];\n this.navigateTo(event, option);\n return true;\n }\n\n override attach(element: HTMLElement) {\n super.attach(element);\n this.host.menu.addEventListener('menu-item-mouseenter', this.#handleMouseFocus);\n }\n\n override detach() {\n super.detach();\n this.host.menu.removeEventListener('menu-item-mouseenter', this.#handleMouseFocus);\n }\n\n #handleMouseFocus = (e: Event) => {\n this.blurMenu();\n this.focusMenu(<UmOption>e.target, false, false);\n };\n\n protected override afterFocus(option: UmOption) {\n this.host.button.setAttribute('aria-activedescendant', option._listItem.id);\n }\n\n protected override afterBlur() {\n this.host.button.removeAttribute('aria-activedescendant');\n }\n\n private handleType(event: KeyboardEvent) {\n\n if (event.key.length > 1) {\n return false;\n }\n\n if (this.#typeaheadStatus.timeoutId) {\n clearTimeout(this.#typeaheadStatus.timeoutId);\n }\n\n const lastFocusedMenu = this.focusedMenu;\n\n this.#typeaheadStatus.buffer += event.key;\n\n this.#typeaheadStatus.timeoutId = setTimeout(() => this.#typeaheadStatus = getCleanTypeaheadStatus(), 1000);\n\n const term = this.#typeaheadStatus.buffer.replaceAll(event.key, '') === ''\n ? event.key\n : this.#typeaheadStatus.buffer;\n this.findNextElementByTerm(term, lastFocusedMenu);\n\n return true;\n }\n\n private findNextElementByTerm(term: string, lastFocusedMenu: UmOption | null): void {\n let nextMenu = <UmOption | undefined>lastFocusedMenu?.nextElementSibling\n\n if (!nextMenu || !normalizedStartsWith(nextMenu.textContent, term)) {\n nextMenu = this.host.options.find(o => normalizedStartsWith(o.textContent, term));\n }\n\n if (!nextMenu) {\n return;\n }\n\n if (this.host.menu.open) {\n this.blurMenu();\n this.focusMenu(nextMenu);\n return;\n }\n\n nextMenu.setSelectedByUser();\n }\n}\n"]}