@universal-material/web 3.0.69 → 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.
- package/app-bar/top-app-bar.js +3 -2
- package/app-bar/top-app-bar.js.map +1 -1
- package/button/button-base.d.ts +1 -0
- package/button/button-base.d.ts.map +1 -1
- package/button/button-base.js +7 -18
- package/button/button-base.js.map +1 -1
- package/button/button-base.styles.d.ts +2 -0
- package/button/button-base.styles.d.ts.map +1 -0
- package/button/button-base.styles.js +16 -0
- package/button/button-base.styles.js.map +1 -0
- package/button/button-set.d.ts +1 -1
- package/button/button-set.d.ts.map +1 -1
- package/button/button-set.js +1 -1
- package/button/button-set.js.map +1 -1
- package/button/button-set.styles.d.ts.map +1 -1
- package/button/button-set.styles.js +0 -19
- package/button/button-set.styles.js.map +1 -1
- package/button/button.d.ts +2 -2
- package/button/button.d.ts.map +1 -1
- package/button/button.js +1 -1
- package/button/button.js.map +1 -1
- package/button/button.styles.d.ts.map +1 -1
- package/button/button.styles.js +0 -100
- package/button/button.styles.js.map +1 -1
- package/button/fab.d.ts +2 -2
- package/button/fab.d.ts.map +1 -1
- package/button/fab.js +1 -1
- package/button/fab.js.map +1 -1
- package/button/fab.styles.d.ts.map +1 -1
- package/button/fab.styles.js +0 -100
- package/button/fab.styles.js.map +1 -1
- package/button/icon-button.d.ts +2 -2
- package/button/icon-button.d.ts.map +1 -1
- package/button/icon-button.js +1 -1
- package/button/icon-button.js.map +1 -1
- package/button/icon-button.styles.d.ts.map +1 -1
- package/button/icon-button.styles.js +0 -100
- package/button/icon-button.styles.js.map +1 -1
- package/card/card-content.js +1 -1
- package/card/card-content.js.map +1 -1
- package/card/card-media.js +1 -1
- package/card/card-media.js.map +1 -1
- package/card/card.js +1 -1
- package/card/card.js.map +1 -1
- package/checkbox/checkbox.js +8 -20
- package/checkbox/checkbox.js.map +1 -1
- package/chip/chip-set.d.ts +1 -1
- package/chip/chip-set.d.ts.map +1 -1
- package/chip/chip-set.js +1 -1
- package/chip/chip-set.js.map +1 -1
- package/chip/chip-set.styles.d.ts.map +1 -1
- package/chip/chip-set.styles.js +0 -19
- package/chip/chip-set.styles.js.map +1 -1
- package/chip/chip.d.ts +1 -1
- package/chip/chip.d.ts.map +1 -1
- package/chip/chip.js +39 -54
- package/chip/chip.js.map +1 -1
- package/chip/chip.styles.d.ts.map +1 -1
- package/chip/chip.styles.js +0 -87
- package/chip/chip.styles.js.map +1 -1
- package/chip-field/chip-field.js +72 -86
- package/chip-field/chip-field.js.map +1 -1
- package/custom-elements.json +2854 -2185
- package/dialog/confirm-dialog-builder.js +6 -22
- package/dialog/confirm-dialog-builder.js.map +1 -1
- package/dialog/dialog-builder.js +4 -17
- package/dialog/dialog-builder.js.map +1 -1
- package/dialog/dialog.js +65 -80
- package/dialog/dialog.js.map +1 -1
- package/dialog/message-dialog-builder.js +3 -19
- package/dialog/message-dialog-builder.js.map +1 -1
- package/elevation/elevation.js +1 -1
- package/elevation/elevation.js.map +1 -1
- package/field/field-base.d.ts +2 -2
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js +13 -16
- package/field/field-base.js.map +1 -1
- package/field/field-base.styles.js +1 -1
- package/field/field-base.styles.js.map +1 -1
- package/list/list-item.js +1 -1
- package/list/list-item.js.map +1 -1
- package/list/list.js +1 -1
- package/list/list.js.map +1 -1
- package/menu/menu-item.d.ts +12 -6
- package/menu/menu-item.d.ts.map +1 -1
- package/menu/menu-item.js +49 -31
- package/menu/menu-item.js.map +1 -1
- package/menu/menu-item.styles.d.ts.map +1 -1
- package/menu/menu-item.styles.js +15 -90
- package/menu/menu-item.styles.js.map +1 -1
- package/menu/menu.d.ts.map +1 -1
- package/menu/menu.js +129 -134
- package/menu/menu.js.map +1 -1
- package/navigation/drawer-item.d.ts +1 -1
- package/navigation/drawer-item.d.ts.map +1 -1
- package/navigation/drawer-item.js +4 -5
- package/navigation/drawer-item.js.map +1 -1
- package/navigation/drawer-item.styles.d.ts.map +1 -1
- package/navigation/drawer-item.styles.js +0 -87
- package/navigation/drawer-item.styles.js.map +1 -1
- package/navigation/drawer.js +4 -4
- package/navigation/drawer.js.map +1 -1
- package/navigation/side-navigation.js +8 -20
- package/navigation/side-navigation.js.map +1 -1
- package/package.json +18 -18
- package/progress/circular-progress.d.ts +1 -2
- package/progress/circular-progress.d.ts.map +1 -1
- package/progress/circular-progress.js +19 -27
- package/progress/circular-progress.js.map +1 -1
- package/progress/progress-bar.d.ts +1 -2
- package/progress/progress-bar.d.ts.map +1 -1
- package/progress/progress-bar.js +12 -20
- package/progress/progress-bar.js.map +1 -1
- package/radio/radio.js +53 -61
- package/radio/radio.js.map +1 -1
- package/ripple/ripple.js +3 -2
- package/ripple/ripple.js.map +1 -1
- package/select/extended-option.d.ts +5 -0
- package/select/extended-option.d.ts.map +1 -0
- package/select/extended-option.js +2 -0
- package/select/extended-option.js.map +1 -0
- package/select/extended-select.d.ts +6 -0
- package/select/extended-select.d.ts.map +1 -0
- package/select/extended-select.js +2 -0
- package/select/extended-select.js.map +1 -0
- package/select/option.d.ts +10 -0
- package/select/option.d.ts.map +1 -1
- package/select/option.js +84 -74
- package/select/option.js.map +1 -1
- package/select/option.styles.d.ts.map +1 -1
- package/select/option.styles.js +10 -0
- package/select/option.styles.js.map +1 -1
- package/select/select-navigation-controller.d.ts +10 -2
- package/select/select-navigation-controller.d.ts.map +1 -1
- package/select/select-navigation-controller.js +66 -3
- package/select/select-navigation-controller.js.map +1 -1
- package/select/select.d.ts +10 -4
- package/select/select.d.ts.map +1 -1
- package/select/select.js +179 -68
- package/select/select.js.map +1 -1
- package/select/select.styles.d.ts.map +1 -1
- package/select/select.styles.js +15 -6
- package/select/select.styles.js.map +1 -1
- package/shared/button-wrapper.d.ts +2 -0
- package/shared/button-wrapper.d.ts.map +1 -1
- package/shared/button-wrapper.js +18 -22
- package/shared/button-wrapper.js.map +1 -1
- package/shared/button-wrapper.styles.d.ts +2 -0
- package/shared/button-wrapper.styles.d.ts.map +1 -0
- package/shared/button-wrapper.styles.js +63 -0
- package/shared/button-wrapper.styles.js.map +1 -0
- package/shared/compare-text.d.ts +2 -0
- package/shared/compare-text.d.ts.map +1 -0
- package/shared/compare-text.js +5 -0
- package/shared/compare-text.js.map +1 -0
- package/shared/menu-field/menu-field-navigation-controller.d.ts +11 -4
- package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.js +56 -31
- package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
- package/shared/mixin-attribute-properties.d.ts.map +1 -1
- package/shared/normalize-text.d.ts +1 -1
- package/shared/normalize-text.d.ts.map +1 -1
- package/shared/normalize-text.js +1 -1
- package/shared/normalize-text.js.map +1 -1
- package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
- package/shared/selection-control/selection-control-list-item.js +7 -7
- package/shared/selection-control/selection-control-list-item.js.map +1 -1
- package/shared/selection-control/selection-control.js +16 -28
- package/shared/selection-control/selection-control.js.map +1 -1
- package/shared/sets/set-base.d.ts +2 -0
- package/shared/sets/set-base.d.ts.map +1 -1
- package/shared/sets/set-base.js +2 -0
- package/shared/sets/set-base.js.map +1 -1
- package/shared/sets/set-base.styles.d.ts +2 -0
- package/shared/sets/set-base.styles.d.ts.map +1 -0
- package/shared/sets/set-base.styles.js +22 -0
- package/shared/sets/set-base.styles.js.map +1 -0
- package/shared/text-field-base/text-field-base.js +6 -6
- package/shared/text-field-base/text-field-base.js.map +1 -1
- package/snackbar/snackbar.d.ts.map +1 -1
- package/snackbar/snackbar.js +13 -7
- package/snackbar/snackbar.js.map +1 -1
- package/switch/switch.js +4 -4
- package/switch/switch.js.map +1 -1
- package/text-field/text-field.d.ts +2 -0
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +22 -30
- package/text-field/text-field.js.map +1 -1
- package/typeahead/highlight.js +7 -24
- package/typeahead/highlight.js.map +1 -1
- package/typeahead/typeahead.d.ts +3 -0
- package/typeahead/typeahead.d.ts.map +1 -1
- package/typeahead/typeahead.js +184 -180
- package/typeahead/typeahead.js.map +1 -1
package/ripple/ripple.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../src/ripple/ripple.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,QAAQ,
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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"]}
|
package/select/option.d.ts
CHANGED
|
@@ -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 {
|
package/select/option.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"
|
|
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
|
-
|
|
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
|
-
|
|
24
|
-
|
|
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
|
|
16
|
+
return this._nativeOption.value;
|
|
32
17
|
}
|
|
33
18
|
set value(value) {
|
|
34
|
-
|
|
19
|
+
this._nativeOption.value = value;
|
|
35
20
|
}
|
|
36
21
|
get selected() {
|
|
37
|
-
return
|
|
22
|
+
return this._nativeOption.selected;
|
|
38
23
|
}
|
|
39
24
|
set selected(selected) {
|
|
40
25
|
if (this.selected === selected) {
|
|
41
26
|
return;
|
|
42
27
|
}
|
|
43
|
-
|
|
44
|
-
if (
|
|
45
|
-
|
|
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
|
|
48
|
+
return this._nativeOption.hasAttribute('selected');
|
|
50
49
|
}
|
|
51
50
|
// @ts-ignore
|
|
52
51
|
set _selectedAttribute(selected) {
|
|
53
52
|
if (selected) {
|
|
54
|
-
|
|
53
|
+
this._nativeOption.setAttribute('selected', '');
|
|
55
54
|
return;
|
|
56
55
|
}
|
|
57
|
-
|
|
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',
|
|
80
|
+
this.addEventListener('click', this.#handleClick);
|
|
62
81
|
this.setAttribute('tabindex', '-1');
|
|
63
|
-
|
|
82
|
+
this.#attach();
|
|
64
83
|
}
|
|
65
84
|
disconnectedCallback() {
|
|
66
85
|
super.disconnectedCallback();
|
|
67
|
-
this.removeEventListener('click',
|
|
68
|
-
|
|
69
|
-
|
|
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
|
-
|
|
76
|
-
|
|
92
|
+
this._select.value = this._select.value;
|
|
93
|
+
this._select = null;
|
|
77
94
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
return;
|
|
101
|
+
#handleClick(e) {
|
|
102
|
+
if (!this._select) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
e.stopPropagation();
|
|
106
|
+
this.setSelectedByUser();
|
|
97
107
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
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
|
-
|
|
114
|
-
|
|
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 })
|
package/select/option.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"
|
|
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,
|
|
1
|
+
{"version":3,"file":"option.styles.d.ts","sourceRoot":"","sources":["../../src/select/option.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAYlB,CAAC"}
|
package/select/option.styles.js
CHANGED
|
@@ -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
|
|
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"]}
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { MenuFieldNavigationController } from '../shared/menu-field/menu-field-navigation-controller.js';
|
|
2
|
+
import { UmOption } from './option.js';
|
|
2
3
|
import { UmSelect } from './select.js';
|
|
3
|
-
export declare class SelectNavigationController extends MenuFieldNavigationController<UmSelect> {
|
|
4
|
-
|
|
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;
|
|
5
13
|
}
|
|
6
14
|
//# sourceMappingURL=select-navigation-controller.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-navigation-controller.d.ts","sourceRoot":"","sources":["../../src/select/select-navigation-controller.ts"],"names":[],"mappings":"
|
|
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"}
|
|
@@ -1,17 +1,80 @@
|
|
|
1
|
+
import { normalizedStartsWith } from '../shared/compare-text.js';
|
|
1
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
|
+
});
|
|
2
9
|
export class SelectNavigationController extends MenuFieldNavigationController {
|
|
10
|
+
#typeaheadStatus = getCleanTypeaheadStatus();
|
|
3
11
|
handleKeyDown(event) {
|
|
4
12
|
if (this.host.menu.open) {
|
|
5
|
-
super.handleKeyDown(event);
|
|
6
|
-
return;
|
|
13
|
+
const handled = super.handleKeyDown(event);
|
|
14
|
+
return handled || this.handleType(event);
|
|
7
15
|
}
|
|
8
16
|
const isDown = event.key === 'ArrowDown';
|
|
9
17
|
const isUp = event.key === 'ArrowUp';
|
|
10
18
|
if (!isDown && !isUp) {
|
|
11
|
-
return;
|
|
19
|
+
return this.handleType(event);
|
|
12
20
|
}
|
|
13
21
|
event.preventDefault();
|
|
14
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();
|
|
15
78
|
}
|
|
16
79
|
}
|
|
17
80
|
//# sourceMappingURL=select-navigation-controller.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select-navigation-controller.js","sourceRoot":"","sources":["../../src/select/select-navigation-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,0DAA0D,CAAC;
|
|
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"]}
|
package/select/select.d.ts
CHANGED
|
@@ -1,26 +1,32 @@
|
|
|
1
1
|
import { PropertyValues } from '@lit/reactive-element';
|
|
2
|
-
import { TemplateResult } from 'lit
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
3
|
import { UmMenu } from '../menu/menu.js';
|
|
4
4
|
import { UmMenuField } from '../shared/menu-field/menu-field.js';
|
|
5
5
|
import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
|
|
6
|
+
import { ExtendedSelect } from './extended-select.js';
|
|
6
7
|
import { UmOption } from './option.js';
|
|
7
8
|
import './option.js';
|
|
8
9
|
export declare class UmSelect extends UmTextFieldBase implements UmMenuField {
|
|
9
10
|
#private;
|
|
11
|
+
currentOptionIndex: number;
|
|
10
12
|
static styles: import("lit").CSSResultGroup[];
|
|
11
|
-
nativeSelect:
|
|
13
|
+
nativeSelect: ExtendedSelect;
|
|
12
14
|
get value(): string;
|
|
13
15
|
set value(value: string);
|
|
14
16
|
menu: UmMenu;
|
|
17
|
+
button: HTMLButtonElement;
|
|
15
18
|
input: HTMLElement;
|
|
16
19
|
get selectedIndex(): number;
|
|
17
20
|
set selectedIndex(index: number);
|
|
18
|
-
get
|
|
19
|
-
private _options;
|
|
21
|
+
get selectedOptions(): UmOption[];
|
|
20
22
|
get options(): UmOption[];
|
|
23
|
+
constructor();
|
|
24
|
+
_updateOptions(): void;
|
|
21
25
|
protected renderControl(): TemplateResult;
|
|
22
26
|
protected renderAfterContent(): TemplateResult;
|
|
27
|
+
protected renderDefaultTrailingIcon(): TemplateResult;
|
|
23
28
|
protected updated(changedProperties: PropertyValues): void;
|
|
29
|
+
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
24
30
|
connectedCallback(): void;
|
|
25
31
|
disconnectedCallback(): void;
|
|
26
32
|
get menuItems(): UmOption[];
|
package/select/select.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,eAAgB,YAAW,WAAW;;IAClE,kBAAkB,SAAK;IAEvB,OAAgB,MAAM,iCAAoC;IAE1D,YAAY,EAAE,cAAc,CAMvB;IAeL,IACI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAEgB,IAAI,EAAG,MAAM,CAAC;IACb,MAAM,EAAG,iBAAiB,CAAC;IAC5B,KAAK,EAAG,WAAW,CAAC;IAErC,IACI,aAAa,IAAI,MAAM,CAE1B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAE9B;IAED,IAAI,eAAe,IAAI,QAAQ,EAAE,CAIhC;IAED,IAAI,OAAO,IAAI,QAAQ,EAAE,CAKxB;;IASD,cAAc;cA+FK,aAAa,IAAI,cAAc;cAW/B,kBAAkB,IAAI,cAAc;cAQpC,yBAAyB,IAAI,cAAc;cAO3C,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAMnD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhF,iBAAiB;IAOjB,oBAAoB;IAiE7B,IAAI,SAAS,IAAI,QAAQ,EAAE,CAE1B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
|