833 lines
60 KiB
JavaScript
833 lines
60 KiB
JavaScript
import { jsx as k } from "react/jsx-runtime";
|
|
import w from "react";
|
|
import { o as S } from "./create-component-CVXl33PD.mjs";
|
|
import { B as A, x as a, r as b, _ as l, n as r, c as z, E as f, a as T, b as E } from "./class-map-CwiboTfb.mjs";
|
|
import { m as F, o as D } from "./outlined-field-CsypDRr3.mjs";
|
|
import { u as M, i as I } from "./static-DdXEOlS4.mjs";
|
|
import { D as U, F as p, T as q, i as V, e as B, M as L, s as N } from "./menuItemController-CeB921ip.mjs";
|
|
import { r as h, a as _ } from "./animation-DjClVFum.mjs";
|
|
import { o as $ } from "./query-assigned-elements-DUhez03i.mjs";
|
|
import { o as K } from "./style-map-CdUj7GnE.mjs";
|
|
import { m as O } from "./delegate-BXi1gVeU.mjs";
|
|
import { r as P } from "./redispatch-event-taWUbWUt.mjs";
|
|
import { V as W, m as H, c as j, g as Y } from "./validator-DZt1_yHv.mjs";
|
|
import { m as G } from "./element-internals-3IY9gE4L.mjs";
|
|
import { m as J, g as Q } from "./form-associated-CyYeHPMb.mjs";
|
|
import { b as X } from "./item-CpL4zUlE.mjs";
|
|
import "./ripple-pQcEjR05.mjs";
|
|
import { n as Z } from "./query-assigned-nodes-MKI2zKDb.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
*/
|
|
const ee = !1;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
class te extends W {
|
|
computeValidity(e) {
|
|
return this.selectControl || (this.selectControl = document.createElement("select")), A(a`<option value=${e.value}></option>`, this.selectControl), this.selectControl.value = e.value, this.selectControl.required = e.required, {
|
|
validity: this.selectControl.validity,
|
|
validationMessage: this.selectControl.validationMessage
|
|
};
|
|
}
|
|
equals(e, t) {
|
|
return e.value === t.value && e.required === t.required;
|
|
}
|
|
copy({ value: e, required: t }) {
|
|
return { value: e, required: t };
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
function le(d) {
|
|
const e = [];
|
|
for (let t = 0; t < d.length; t++) {
|
|
const i = d[t];
|
|
i.selected && e.push([i, t]);
|
|
}
|
|
return e;
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
var C;
|
|
const v = Symbol("value"), ie = O(F(H(J(G(b)))));
|
|
let o = class extends ie {
|
|
/**
|
|
* The value of the currently selected option.
|
|
*
|
|
* Note: For SSR, set `[selected]` on the requested option and `displayText`
|
|
* rather than setting `value` setting `value` will incur a DOM query.
|
|
*/
|
|
get value() {
|
|
return this[v];
|
|
}
|
|
set value(e) {
|
|
this.lastUserSetValue = e, this.select(e);
|
|
}
|
|
get options() {
|
|
var e;
|
|
return ((e = this.menu) == null ? void 0 : e.items) ?? [];
|
|
}
|
|
/**
|
|
* The index of the currently selected option.
|
|
*
|
|
* Note: For SSR, set `[selected]` on the requested option and `displayText`
|
|
* rather than setting `selectedIndex` setting `selectedIndex` will incur a
|
|
* DOM query.
|
|
*/
|
|
get selectedIndex() {
|
|
const [e, t] = (this.getSelectedOptions() ?? [])[0] ?? [];
|
|
return t ?? -1;
|
|
}
|
|
set selectedIndex(e) {
|
|
this.lastUserSetSelectedIndex = e, this.selectIndex(e);
|
|
}
|
|
/**
|
|
* Returns an array of selected options.
|
|
*
|
|
* NOTE: md-select only supports single selection.
|
|
*/
|
|
get selectedOptions() {
|
|
return (this.getSelectedOptions() ?? []).map(([e]) => e);
|
|
}
|
|
get hasError() {
|
|
return this.error || this.nativeError;
|
|
}
|
|
constructor() {
|
|
super(), this.quick = !1, this.required = !1, this.errorText = "", this.label = "", this.noAsterisk = !1, this.supportingText = "", this.error = !1, this.menuPositioning = "popover", this.clampMenuWidth = !1, this.typeaheadDelay = U, this.hasLeadingIcon = !1, this.displayText = "", this.menuAlign = "start", this[C] = "", this.lastUserSetValue = null, this.lastUserSetSelectedIndex = null, this.lastSelectedOption = null, this.lastSelectedOptionRecords = [], this.nativeError = !1, this.nativeErrorText = "", this.focused = !1, this.open = !1, this.defaultFocus = p.NONE, this.prevOpen = this.open, this.selectWidth = 0, this.addEventListener("focus", this.handleFocus.bind(this)), this.addEventListener("blur", this.handleBlur.bind(this));
|
|
}
|
|
/**
|
|
* Selects an option given the value of the option, and updates MdSelect's
|
|
* value.
|
|
*/
|
|
select(e) {
|
|
const t = this.options.find((i) => i.value === e);
|
|
t && this.selectItem(t);
|
|
}
|
|
/**
|
|
* Selects an option given the index of the option, and updates MdSelect's
|
|
* value.
|
|
*/
|
|
selectIndex(e) {
|
|
const t = this.options[e];
|
|
t && this.selectItem(t);
|
|
}
|
|
/**
|
|
* Reset the select to its default value.
|
|
*/
|
|
reset() {
|
|
for (const e of this.options)
|
|
e.selected = e.hasAttribute("selected");
|
|
this.updateValueAndDisplayText(), this.nativeError = !1, this.nativeErrorText = "";
|
|
}
|
|
[(C = v, D)](e) {
|
|
var i;
|
|
e == null || e.preventDefault();
|
|
const t = this.getErrorText();
|
|
this.nativeError = !!e, this.nativeErrorText = this.validationMessage, t === this.getErrorText() && ((i = this.field) == null || i.reannounceError());
|
|
}
|
|
update(e) {
|
|
if (this.hasUpdated || this.initUserSelection(), this.prevOpen !== this.open && this.open) {
|
|
const t = this.getBoundingClientRect();
|
|
this.selectWidth = t.width;
|
|
}
|
|
this.prevOpen = this.open, super.update(e);
|
|
}
|
|
render() {
|
|
return a`
|
|
<span
|
|
class="select ${z(this.getRenderClasses())}"
|
|
@focusout=${this.handleFocusout}>
|
|
${this.renderField()} ${this.renderMenu()}
|
|
</span>
|
|
`;
|
|
}
|
|
async firstUpdated(e) {
|
|
var t;
|
|
await ((t = this.menu) == null ? void 0 : t.updateComplete), this.lastSelectedOptionRecords.length || this.initUserSelection(), !this.lastSelectedOptionRecords.length && !ee && !this.options.length && setTimeout(() => {
|
|
this.updateValueAndDisplayText();
|
|
}), super.firstUpdated(e);
|
|
}
|
|
getRenderClasses() {
|
|
return {
|
|
disabled: this.disabled,
|
|
error: this.error,
|
|
open: this.open
|
|
};
|
|
}
|
|
renderField() {
|
|
return M`
|
|
<${this.fieldTag}
|
|
aria-haspopup="listbox"
|
|
role="combobox"
|
|
part="field"
|
|
id="field"
|
|
tabindex=${this.disabled ? "-1" : "0"}
|
|
aria-label=${this.ariaLabel || f}
|
|
aria-describedby="description"
|
|
aria-expanded=${this.open ? "true" : "false"}
|
|
aria-controls="listbox"
|
|
class="field"
|
|
label=${this.label}
|
|
?no-asterisk=${this.noAsterisk}
|
|
.focused=${this.focused || this.open}
|
|
.populated=${!!this.displayText}
|
|
.disabled=${this.disabled}
|
|
.required=${this.required}
|
|
.error=${this.hasError}
|
|
?has-start=${this.hasLeadingIcon}
|
|
has-end
|
|
supporting-text=${this.supportingText}
|
|
error-text=${this.getErrorText()}
|
|
@keydown=${this.handleKeydown}
|
|
@click=${this.handleClick}>
|
|
${this.renderFieldContent()}
|
|
<div id="description" slot="aria-describedby"></div>
|
|
</${this.fieldTag}>`;
|
|
}
|
|
renderFieldContent() {
|
|
return [
|
|
this.renderLeadingIcon(),
|
|
this.renderLabel(),
|
|
this.renderTrailingIcon()
|
|
];
|
|
}
|
|
renderLeadingIcon() {
|
|
return a`
|
|
<span class="icon leading" slot="start">
|
|
<slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
|
|
</span>
|
|
`;
|
|
}
|
|
renderTrailingIcon() {
|
|
return a`
|
|
<span class="icon trailing" slot="end">
|
|
<slot name="trailing-icon" @slotchange=${this.handleIconChange}>
|
|
<svg height="5" viewBox="7 10 10 5" focusable="false">
|
|
<polygon
|
|
class="down"
|
|
stroke="none"
|
|
fill-rule="evenodd"
|
|
points="7 10 12 15 17 10"></polygon>
|
|
<polygon
|
|
class="up"
|
|
stroke="none"
|
|
fill-rule="evenodd"
|
|
points="7 15 12 10 17 15"></polygon>
|
|
</svg>
|
|
</slot>
|
|
</span>
|
|
`;
|
|
}
|
|
renderLabel() {
|
|
return a`<div id="label">${this.displayText || a` `}</div>`;
|
|
}
|
|
renderMenu() {
|
|
const e = this.label || this.ariaLabel;
|
|
return a`<div class="menu-wrapper">
|
|
<md-menu
|
|
id="listbox"
|
|
.defaultFocus=${this.defaultFocus}
|
|
role="listbox"
|
|
tabindex="-1"
|
|
aria-label=${e || f}
|
|
stay-open-on-focusout
|
|
part="menu"
|
|
exportparts="focus-ring: menu-focus-ring"
|
|
anchor="field"
|
|
style=${K({
|
|
"--__menu-min-width": `${this.selectWidth}px`,
|
|
"--__menu-max-width": this.clampMenuWidth ? `${this.selectWidth}px` : void 0
|
|
})}
|
|
no-navigation-wrap
|
|
.open=${this.open}
|
|
.quick=${this.quick}
|
|
.positioning=${this.menuPositioning}
|
|
.typeaheadDelay=${this.typeaheadDelay}
|
|
.anchorCorner=${this.menuAlign === "start" ? "end-start" : "end-end"}
|
|
.menuCorner=${this.menuAlign === "start" ? "start-start" : "start-end"}
|
|
@opening=${this.handleOpening}
|
|
@opened=${this.redispatchEvent}
|
|
@closing=${this.redispatchEvent}
|
|
@closed=${this.handleClosed}
|
|
@close-menu=${this.handleCloseMenu}
|
|
@request-selection=${this.handleRequestSelection}
|
|
@request-deselection=${this.handleRequestDeselection}>
|
|
${this.renderMenuContent()}
|
|
</md-menu>
|
|
</div>`;
|
|
}
|
|
renderMenuContent() {
|
|
return a`<slot></slot>`;
|
|
}
|
|
/**
|
|
* Handles opening the select on keydown and typahead selection when the menu
|
|
* is closed.
|
|
*/
|
|
handleKeydown(e) {
|
|
var c, x;
|
|
if (this.open || this.disabled || !this.menu)
|
|
return;
|
|
const t = this.menu.typeaheadController, i = e.code === "Space" || e.code === "ArrowDown" || e.code === "ArrowUp" || e.code === "End" || e.code === "Home" || e.code === "Enter";
|
|
if (!t.isTypingAhead && i) {
|
|
switch (e.preventDefault(), this.open = !0, e.code) {
|
|
case "Space":
|
|
case "ArrowDown":
|
|
case "Enter":
|
|
this.defaultFocus = p.NONE;
|
|
break;
|
|
case "End":
|
|
this.defaultFocus = p.LAST_ITEM;
|
|
break;
|
|
case "ArrowUp":
|
|
case "Home":
|
|
this.defaultFocus = p.FIRST_ITEM;
|
|
break;
|
|
}
|
|
return;
|
|
}
|
|
if (e.key.length === 1) {
|
|
t.onKeydown(e), e.preventDefault();
|
|
const { lastActiveRecord: u } = t;
|
|
if (!u)
|
|
return;
|
|
(x = (c = this.labelEl) == null ? void 0 : c.setAttribute) == null || x.call(c, "aria-live", "polite"), this.selectItem(u[q.ITEM]) && this.dispatchInteractionEvents();
|
|
}
|
|
}
|
|
handleClick() {
|
|
this.open = !this.open;
|
|
}
|
|
handleFocus() {
|
|
this.focused = !0;
|
|
}
|
|
handleBlur() {
|
|
this.focused = !1;
|
|
}
|
|
/**
|
|
* Handles closing the menu when the focus leaves the select's subtree.
|
|
*/
|
|
handleFocusout(e) {
|
|
e.relatedTarget && V(e.relatedTarget, this) || (this.open = !1);
|
|
}
|
|
/**
|
|
* Gets a list of all selected select options as a list item record array.
|
|
*
|
|
* @return An array of selected list option records.
|
|
*/
|
|
getSelectedOptions() {
|
|
if (!this.menu)
|
|
return this.lastSelectedOptionRecords = [], null;
|
|
const e = this.menu.items;
|
|
return this.lastSelectedOptionRecords = le(e), this.lastSelectedOptionRecords;
|
|
}
|
|
async getUpdateComplete() {
|
|
var e;
|
|
return await ((e = this.menu) == null ? void 0 : e.updateComplete), super.getUpdateComplete();
|
|
}
|
|
/**
|
|
* Gets the selected options from the DOM, and updates the value and display
|
|
* text to the first selected option's value and headline respectively.
|
|
*
|
|
* @return Whether or not the selected option has changed since last update.
|
|
*/
|
|
updateValueAndDisplayText() {
|
|
const e = this.getSelectedOptions() ?? [];
|
|
let t = !1;
|
|
if (e.length) {
|
|
const [i] = e[0];
|
|
t = this.lastSelectedOption !== i, this.lastSelectedOption = i, this[v] = i.value, this.displayText = i.displayText;
|
|
} else
|
|
t = this.lastSelectedOption !== null, this.lastSelectedOption = null, this[v] = "", this.displayText = "";
|
|
return t;
|
|
}
|
|
/**
|
|
* Focuses and activates the last selected item upon opening, and resets other
|
|
* active items.
|
|
*/
|
|
async handleOpening(e) {
|
|
var c, x, u;
|
|
if ((x = (c = this.labelEl) == null ? void 0 : c.removeAttribute) == null || x.call(c, "aria-live"), this.redispatchEvent(e), this.defaultFocus !== p.NONE)
|
|
return;
|
|
const t = this.menu.items, i = (u = X(t)) == null ? void 0 : u.item;
|
|
let [n] = this.lastSelectedOptionRecords[0] ?? [null];
|
|
i && i !== n && (i.tabIndex = -1), n = n ?? t[0], n && (n.tabIndex = 0, n.focus());
|
|
}
|
|
redispatchEvent(e) {
|
|
P(this, e);
|
|
}
|
|
handleClosed(e) {
|
|
this.open = !1, this.redispatchEvent(e);
|
|
}
|
|
/**
|
|
* Determines the reason for closing, and updates the UI accordingly.
|
|
*/
|
|
handleCloseMenu(e) {
|
|
const t = e.detail.reason, i = e.detail.itemPath[0];
|
|
this.open = !1;
|
|
let n = !1;
|
|
t.kind === "click-selection" ? n = this.selectItem(i) : t.kind === "keydown" && B(t.key) ? n = this.selectItem(i) : (i.tabIndex = -1, i.blur()), n && this.dispatchInteractionEvents();
|
|
}
|
|
/**
|
|
* Selects a given option, deselects other options, and updates the UI.
|
|
*
|
|
* @return Whether the last selected option has changed.
|
|
*/
|
|
selectItem(e) {
|
|
return (this.getSelectedOptions() ?? []).forEach(([i]) => {
|
|
e !== i && (i.selected = !1);
|
|
}), e.selected = !0, this.updateValueAndDisplayText();
|
|
}
|
|
/**
|
|
* Handles updating selection when an option element requests selection via
|
|
* property / attribute change.
|
|
*/
|
|
handleRequestSelection(e) {
|
|
const t = e.target;
|
|
this.lastSelectedOptionRecords.some(([i]) => i === t) || this.selectItem(t);
|
|
}
|
|
/**
|
|
* Handles updating selection when an option element requests deselection via
|
|
* property / attribute change.
|
|
*/
|
|
handleRequestDeselection(e) {
|
|
const t = e.target;
|
|
this.lastSelectedOptionRecords.some(([i]) => i === t) && this.updateValueAndDisplayText();
|
|
}
|
|
/**
|
|
* Attempts to initialize the selected option from user-settable values like
|
|
* SSR, setting `value`, or `selectedIndex` at startup.
|
|
*/
|
|
initUserSelection() {
|
|
this.lastUserSetValue && !this.lastSelectedOptionRecords.length ? this.select(this.lastUserSetValue) : this.lastUserSetSelectedIndex !== null && !this.lastSelectedOptionRecords.length ? this.selectIndex(this.lastUserSetSelectedIndex) : this.updateValueAndDisplayText();
|
|
}
|
|
handleIconChange() {
|
|
this.hasLeadingIcon = this.leadingIcons.length > 0;
|
|
}
|
|
/**
|
|
* Dispatches the `input` and `change` events.
|
|
*/
|
|
dispatchInteractionEvents() {
|
|
this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
}
|
|
getErrorText() {
|
|
return this.error ? this.errorText : this.nativeErrorText;
|
|
}
|
|
[Q]() {
|
|
return this.value;
|
|
}
|
|
formResetCallback() {
|
|
this.reset();
|
|
}
|
|
formStateRestoreCallback(e) {
|
|
this.value = e;
|
|
}
|
|
click() {
|
|
var e;
|
|
(e = this.field) == null || e.click();
|
|
}
|
|
[j]() {
|
|
return new te(() => this);
|
|
}
|
|
[Y]() {
|
|
return this.field;
|
|
}
|
|
};
|
|
o.shadowRootOptions = {
|
|
...b.shadowRootOptions,
|
|
delegatesFocus: !0
|
|
};
|
|
l([
|
|
r({ type: Boolean })
|
|
], o.prototype, "quick", void 0);
|
|
l([
|
|
r({ type: Boolean })
|
|
], o.prototype, "required", void 0);
|
|
l([
|
|
r({ type: String, attribute: "error-text" })
|
|
], o.prototype, "errorText", void 0);
|
|
l([
|
|
r()
|
|
], o.prototype, "label", void 0);
|
|
l([
|
|
r({ type: Boolean, attribute: "no-asterisk" })
|
|
], o.prototype, "noAsterisk", void 0);
|
|
l([
|
|
r({ type: String, attribute: "supporting-text" })
|
|
], o.prototype, "supportingText", void 0);
|
|
l([
|
|
r({ type: Boolean, reflect: !0 })
|
|
], o.prototype, "error", void 0);
|
|
l([
|
|
r({ attribute: "menu-positioning" })
|
|
], o.prototype, "menuPositioning", void 0);
|
|
l([
|
|
r({ type: Boolean, attribute: "clamp-menu-width" })
|
|
], o.prototype, "clampMenuWidth", void 0);
|
|
l([
|
|
r({ type: Number, attribute: "typeahead-delay" })
|
|
], o.prototype, "typeaheadDelay", void 0);
|
|
l([
|
|
r({ type: Boolean, attribute: "has-leading-icon" })
|
|
], o.prototype, "hasLeadingIcon", void 0);
|
|
l([
|
|
r({ attribute: "display-text" })
|
|
], o.prototype, "displayText", void 0);
|
|
l([
|
|
r({ attribute: "menu-align" })
|
|
], o.prototype, "menuAlign", void 0);
|
|
l([
|
|
r()
|
|
], o.prototype, "value", null);
|
|
l([
|
|
r({ type: Number, attribute: "selected-index" })
|
|
], o.prototype, "selectedIndex", null);
|
|
l([
|
|
h()
|
|
], o.prototype, "nativeError", void 0);
|
|
l([
|
|
h()
|
|
], o.prototype, "nativeErrorText", void 0);
|
|
l([
|
|
h()
|
|
], o.prototype, "focused", void 0);
|
|
l([
|
|
h()
|
|
], o.prototype, "open", void 0);
|
|
l([
|
|
h()
|
|
], o.prototype, "defaultFocus", void 0);
|
|
l([
|
|
_(".field")
|
|
], o.prototype, "field", void 0);
|
|
l([
|
|
_("md-menu")
|
|
], o.prototype, "menu", void 0);
|
|
l([
|
|
_("#label")
|
|
], o.prototype, "labelEl", void 0);
|
|
l([
|
|
$({ slot: "leading-icon", flatten: !0 })
|
|
], o.prototype, "leadingIcons", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
class oe extends o {
|
|
constructor() {
|
|
super(...arguments), this.fieldTag = I`md-filled-field`;
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const re = T`:host{--_text-field-active-indicator-color: var(--md-filled-select-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-active-indicator-height: var(--md-filled-select-text-field-active-indicator-height, 1px);--_text-field-container-color: var(--md-filled-select-text-field-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_text-field-disabled-active-indicator-color: var(--md-filled-select-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-active-indicator-height: var(--md-filled-select-text-field-disabled-active-indicator-height, 1px);--_text-field-disabled-active-indicator-opacity: var(--md-filled-select-text-field-disabled-active-indicator-opacity, 0.38);--_text-field-disabled-container-color: var(--md-filled-select-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-container-opacity: var(--md-filled-select-text-field-disabled-container-opacity, 0.04);--_text-field-disabled-input-text-color: var(--md-filled-select-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-input-text-opacity: var(--md-filled-select-text-field-disabled-input-text-opacity, 0.38);--_text-field-disabled-label-text-color: var(--md-filled-select-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-label-text-opacity: var(--md-filled-select-text-field-disabled-label-text-opacity, 0.38);--_text-field-disabled-leading-icon-color: var(--md-filled-select-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-leading-icon-opacity: var(--md-filled-select-text-field-disabled-leading-icon-opacity, 0.38);--_text-field-disabled-supporting-text-color: var(--md-filled-select-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-supporting-text-opacity: var(--md-filled-select-text-field-disabled-supporting-text-opacity, 0.38);--_text-field-disabled-trailing-icon-color: var(--md-filled-select-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-trailing-icon-opacity: var(--md-filled-select-text-field-disabled-trailing-icon-opacity, 0.38);--_text-field-error-active-indicator-color: var(--md-filled-select-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-active-indicator-color: var(--md-filled-select-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-input-text-color: var(--md-filled-select-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-focus-label-text-color: var(--md-filled-select-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-leading-icon-color: var(--md-filled-select-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-focus-supporting-text-color: var(--md-filled-select-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-trailing-icon-color: var(--md-filled-select-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-active-indicator-color: var(--md-filled-select-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-input-text-color: var(--md-filled-select-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-hover-label-text-color: var(--md-filled-select-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-leading-icon-color: var(--md-filled-select-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-hover-state-layer-color: var(--md-filled-select-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-hover-state-layer-opacity: var(--md-filled-select-text-field-error-hover-state-layer-opacity, 0.08);--_text-field-error-hover-supporting-text-color: var(--md-filled-select-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-trailing-icon-color: var(--md-filled-select-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-input-text-color: var(--md-filled-select-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-label-text-color: var(--md-filled-select-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-leading-icon-color: var(--md-filled-select-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-supporting-text-color: var(--md-filled-select-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-trailing-icon-color: var(--md-filled-select-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-focus-active-indicator-color: var(--md-filled-select-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-active-indicator-height: var(--md-filled-select-text-field-focus-active-indicator-height, 3px);--_text-field-focus-input-text-color: var(--md-filled-select-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-focus-label-text-color: var(--md-filled-select-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-leading-icon-color: var(--md-filled-select-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-supporting-text-color: var(--md-filled-select-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-trailing-icon-color: var(--md-filled-select-text-field-focus-trailing-icon-color, var(--md-sys-color-primary, #6750a4));--_text-field-hover-active-indicator-color: var(--md-filled-select-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-active-indicator-height: var(--md-filled-select-text-field-hover-active-indicator-height, 1px);--_text-field-hover-input-text-color: var(--md-filled-select-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-label-text-color: var(--md-filled-select-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-leading-icon-color: var(--md-filled-select-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-state-layer-color: var(--md-filled-select-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-state-layer-opacity: var(--md-filled-select-text-field-hover-state-layer-opacity, 0.08);--_text-field-hover-supporting-text-color: var(--md-filled-select-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-trailing-icon-color: var(--md-filled-select-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-input-text-color: var(--md-filled-select-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-input-text-font: var(--md-filled-select-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-input-text-line-height: var(--md-filled-select-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-input-text-size: var(--md-filled-select-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-input-text-weight: var(--md-filled-select-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-label-text-color: var(--md-filled-select-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-label-text-font: var(--md-filled-select-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-label-text-line-height: var(--md-filled-select-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-label-text-populated-line-height: var(--md-filled-select-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-label-text-populated-size: var(--md-filled-select-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-label-text-size: var(--md-filled-select-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-label-text-weight: var(--md-filled-select-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-leading-icon-color: var(--md-filled-select-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-leading-icon-size: var(--md-filled-select-text-field-leading-icon-size, 24px);--_text-field-supporting-text-color: var(--md-filled-select-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-supporting-text-font: var(--md-filled-select-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-supporting-text-line-height: var(--md-filled-select-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-supporting-text-size: var(--md-filled-select-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-supporting-text-weight: var(--md-filled-select-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-trailing-icon-color: var(--md-filled-select-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-trailing-icon-size: var(--md-filled-select-text-field-trailing-icon-size, 24px);--_text-field-container-shape-start-start: var(--md-filled-select-text-field-container-shape-start-start, var(--md-filled-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-start-end: var(--md-filled-select-text-field-container-shape-start-end, var(--md-filled-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-end: var(--md-filled-select-text-field-container-shape-end-end, var(--md-filled-select-text-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--_text-field-container-shape-end-start: var(--md-filled-select-text-field-container-shape-end-start, var(--md-filled-select-text-field-container-shape, var(--md-sys-shape-corner-none, 0px)));--md-filled-field-active-indicator-color: var(--_text-field-active-indicator-color);--md-filled-field-active-indicator-height: var(--_text-field-active-indicator-height);--md-filled-field-container-color: var(--_text-field-container-color);--md-filled-field-container-shape-end-end: var(--_text-field-container-shape-end-end);--md-filled-field-container-shape-end-start: var(--_text-field-container-shape-end-start);--md-filled-field-container-shape-start-end: var(--_text-field-container-shape-start-end);--md-filled-field-container-shape-start-start: var(--_text-field-container-shape-start-start);--md-filled-field-content-color: var(--_text-field-input-text-color);--md-filled-field-content-font: var(--_text-field-input-text-font);--md-filled-field-content-line-height: var(--_text-field-input-text-line-height);--md-filled-field-content-size: var(--_text-field-input-text-size);--md-filled-field-content-weight: var(--_text-field-input-text-weight);--md-filled-field-disabled-active-indicator-color: var(--_text-field-disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height: var(--_text-field-disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity: var(--_text-field-disabled-active-indicator-opacity);--md-filled-field-disabled-container-color: var(--_text-field-disabled-container-color);--md-filled-field-disabled-container-opacity: var(--_text-field-disabled-container-opacity);--md-filled-field-disabled-content-color: var(--_text-field-disabled-input-text-color);--md-filled-field-disabled-content-opacity: var(--_text-field-disabled-input-text-opacity);--md-filled-field-disabled-label-text-color: var(--_text-field-disabled-label-text-color);--md-filled-field-disabled-label-text-opacity: var(--_text-field-disabled-label-text-opacity);--md-filled-field-disabled-leading-content-color: var(--_text-field-disabled-leading-icon-color);--md-filled-field-disabled-leading-content-opacity: var(--_text-field-disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color: var(--_text-field-disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity: var(--_text-field-disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-content-color: var(--_text-field-disabled-trailing-icon-color);--md-filled-field-disabled-trailing-content-opacity: var(--_text-field-disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color: var(--_text-field-error-active-indicator-color);--md-filled-field-error-content-color: var(--_text-field-error-input-text-color);--md-filled-field-error-focus-active-indicator-color: var(--_text-field-error-focus-active-indicator-color);--md-filled-field-error-focus-content-color: var(--_text-field-error-focus-input-text-color);--md-filled-field-error-focus-label-text-color: var(--_text-field-error-focus-label-text-color);--md-filled-field-error-focus-leading-content-color: var(--_text-field-error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color: var(--_text-field-error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-content-color: var(--_text-field-error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color: var(--_text-field-error-hover-active-indicator-color);--md-filled-field-error-hover-content-color: var(--_text-field-error-hover-input-text-color);--md-filled-field-error-hover-label-text-color: var(--_text-field-error-hover-label-text-color);--md-filled-field-error-hover-leading-content-color: var(--_text-field-error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color: var(--_text-field-error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity: var(--_text-field-error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color: var(--_text-field-error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-content-color: var(--_text-field-error-hover-trailing-icon-color);--md-filled-field-error-label-text-color: var(--_text-field-error-label-text-color);--md-filled-field-error-leading-content-color: var(--_text-field-error-leading-icon-color);--md-filled-field-error-supporting-text-color: var(--_text-field-error-supporting-text-color);--md-filled-field-error-trailing-content-color: var(--_text-field-error-trailing-icon-color);--md-filled-field-focus-active-indicator-color: var(--_text-field-focus-active-indicator-color);--md-filled-field-focus-active-indicator-height: var(--_text-field-focus-active-indicator-height);--md-filled-field-focus-content-color: var(--_text-field-focus-input-text-color);--md-filled-field-focus-label-text-color: var(--_text-field-focus-label-text-color);--md-filled-field-focus-leading-content-color: var(--_text-field-focus-leading-icon-color);--md-filled-field-focus-supporting-text-color: var(--_text-field-focus-supporting-text-color);--md-filled-field-focus-trailing-content-color: var(--_text-field-focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color: var(--_text-field-hover-active-indicator-color);--md-filled-field-hover-active-indicator-height: var(--_text-field-hover-active-indicator-height);--md-filled-field-hover-content-color: var(--_text-field-hover-input-text-color);--md-filled-field-hover-label-text-color: var(--_text-field-hover-label-text-color);--md-filled-field-hover-leading-content-color: var(--_text-field-hover-leading-icon-color);--md-filled-field-hover-state-layer-color: var(--_text-field-hover-state-layer-color);--md-filled-field-hover-state-layer-opacity: var(--_text-field-hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color: var(--_text-field-hover-supporting-text-color);--md-filled-field-hover-trailing-content-color: var(--_text-field-hover-trailing-icon-color);--md-filled-field-label-text-color: var(--_text-field-label-text-color);--md-filled-field-label-text-font: var(--_text-field-label-text-font);--md-filled-field-label-text-line-height: var(--_text-field-label-text-line-height);--md-filled-field-label-text-populated-line-height: var(--_text-field-label-text-populated-line-height);--md-filled-field-label-text-populated-size: var(--_text-field-label-text-populated-size);--md-filled-field-label-text-size: var(--_text-field-label-text-size);--md-filled-field-label-text-weight: var(--_text-field-label-text-weight);--md-filled-field-leading-content-color: var(--_text-field-leading-icon-color);--md-filled-field-supporting-text-color: var(--_text-field-supporting-text-color);--md-filled-field-supporting-text-font: var(--_text-field-supporting-text-font);--md-filled-field-supporting-text-line-height: var(--_text-field-supporting-text-line-height);--md-filled-field-supporting-text-size: var(--_text-field-supporting-text-size);--md-filled-field-supporting-text-weight: var(--_text-field-supporting-text-weight);--md-filled-field-trailing-content-color: var(--_text-field-trailing-icon-color)}[has-start] .icon.leading{font-size:var(--_text-field-leading-icon-size);height:var(--_text-field-leading-icon-size);width:var(--_text-field-leading-icon-size)}.icon.trailing{font-size:var(--_text-field-trailing-icon-size);height:var(--_text-field-trailing-icon-size);width:var(--_text-field-trailing-icon-size)}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const R = T`:host{color:unset;min-width:210px;display:flex}.field{cursor:default;outline:none}.select{position:relative;flex-direction:column}.icon.trailing svg,.icon ::slotted(*){fill:currentColor}.icon ::slotted(*){width:inherit;height:inherit;font-size:inherit}.icon slot{display:flex;height:100%;width:100%;align-items:center;justify-content:center}.icon.trailing :is(.up,.down){opacity:0;transition:opacity 75ms linear 75ms}.select:not(.open) .down,.select.open .up{opacity:1}.field,.select,md-menu{min-width:inherit;width:inherit;max-width:inherit;display:flex}md-menu{min-width:var(--__menu-min-width);max-width:var(--__menu-max-width, inherit)}.menu-wrapper{width:0px;height:0px;max-width:inherit}md-menu ::slotted(:not[disabled]){cursor:pointer}.field,.select{width:100%}:host{display:inline-flex}:host([disabled]){pointer-events:none}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let m = class extends oe {
|
|
};
|
|
m.styles = [R, re];
|
|
m = l([
|
|
E("md-filled-select")
|
|
], m);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
class de extends o {
|
|
constructor() {
|
|
super(...arguments), this.fieldTag = I`md-outlined-field`;
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const ae = T`:host{--_text-field-disabled-input-text-color: var(--md-outlined-select-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-input-text-opacity: var(--md-outlined-select-text-field-disabled-input-text-opacity, 0.38);--_text-field-disabled-label-text-color: var(--md-outlined-select-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-label-text-opacity: var(--md-outlined-select-text-field-disabled-label-text-opacity, 0.38);--_text-field-disabled-leading-icon-color: var(--md-outlined-select-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-leading-icon-opacity: var(--md-outlined-select-text-field-disabled-leading-icon-opacity, 0.38);--_text-field-disabled-outline-color: var(--md-outlined-select-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-outline-opacity: var(--md-outlined-select-text-field-disabled-outline-opacity, 0.12);--_text-field-disabled-outline-width: var(--md-outlined-select-text-field-disabled-outline-width, 1px);--_text-field-disabled-supporting-text-color: var(--md-outlined-select-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-supporting-text-opacity: var(--md-outlined-select-text-field-disabled-supporting-text-opacity, 0.38);--_text-field-disabled-trailing-icon-color: var(--md-outlined-select-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-disabled-trailing-icon-opacity: var(--md-outlined-select-text-field-disabled-trailing-icon-opacity, 0.38);--_text-field-error-focus-input-text-color: var(--md-outlined-select-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-focus-label-text-color: var(--md-outlined-select-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-leading-icon-color: var(--md-outlined-select-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-focus-outline-color: var(--md-outlined-select-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-supporting-text-color: var(--md-outlined-select-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-focus-trailing-icon-color: var(--md-outlined-select-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-input-text-color: var(--md-outlined-select-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-hover-label-text-color: var(--md-outlined-select-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-leading-icon-color: var(--md-outlined-select-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-hover-outline-color: var(--md-outlined-select-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-hover-supporting-text-color: var(--md-outlined-select-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-hover-trailing-icon-color: var(--md-outlined-select-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_text-field-error-input-text-color: var(--md-outlined-select-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-error-label-text-color: var(--md-outlined-select-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-leading-icon-color: var(--md-outlined-select-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-error-outline-color: var(--md-outlined-select-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_text-field-error-supporting-text-color: var(--md-outlined-select-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_text-field-error-trailing-icon-color: var(--md-outlined-select-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_text-field-focus-input-text-color: var(--md-outlined-select-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-focus-label-text-color: var(--md-outlined-select-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-leading-icon-color: var(--md-outlined-select-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-outline-color: var(--md-outlined-select-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_text-field-focus-outline-width: var(--md-outlined-select-text-field-focus-outline-width, 3px);--_text-field-focus-supporting-text-color: var(--md-outlined-select-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-focus-trailing-icon-color: var(--md-outlined-select-text-field-focus-trailing-icon-color, var(--md-sys-color-primary, #6750a4));--_text-field-hover-input-text-color: var(--md-outlined-select-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-label-text-color: var(--md-outlined-select-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-leading-icon-color: var(--md-outlined-select-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-outline-color: var(--md-outlined-select-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-hover-outline-width: var(--md-outlined-select-text-field-hover-outline-width, 1px);--_text-field-hover-supporting-text-color: var(--md-outlined-select-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-hover-trailing-icon-color: var(--md-outlined-select-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-input-text-color: var(--md-outlined-select-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_text-field-input-text-font: var(--md-outlined-select-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-input-text-line-height: var(--md-outlined-select-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-input-text-size: var(--md-outlined-select-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-input-text-weight: var(--md-outlined-select-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-label-text-color: var(--md-outlined-select-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-label-text-font: var(--md-outlined-select-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-label-text-line-height: var(--md-outlined-select-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_text-field-label-text-populated-line-height: var(--md-outlined-select-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-label-text-populated-size: var(--md-outlined-select-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-label-text-size: var(--md-outlined-select-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_text-field-label-text-weight: var(--md-outlined-select-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-leading-icon-color: var(--md-outlined-select-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-leading-icon-size: var(--md-outlined-select-text-field-leading-icon-size, 24px);--_text-field-outline-color: var(--md-outlined-select-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_text-field-outline-width: var(--md-outlined-select-text-field-outline-width, 1px);--_text-field-supporting-text-color: var(--md-outlined-select-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-supporting-text-font: var(--md-outlined-select-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_text-field-supporting-text-line-height: var(--md-outlined-select-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_text-field-supporting-text-size: var(--md-outlined-select-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_text-field-supporting-text-weight: var(--md-outlined-select-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_text-field-trailing-icon-color: var(--md-outlined-select-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_text-field-trailing-icon-size: var(--md-outlined-select-text-field-trailing-icon-size, 24px);--_text-field-container-shape-start-start: var(--md-outlined-select-text-field-container-shape-start-start, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-start-end: var(--md-outlined-select-text-field-container-shape-start-end, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-end: var(--md-outlined-select-text-field-container-shape-end-end, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_text-field-container-shape-end-start: var(--md-outlined-select-text-field-container-shape-end-start, var(--md-outlined-select-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--md-outlined-field-container-shape-end-end: var(--_text-field-container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_text-field-container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_text-field-container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_text-field-container-shape-start-start);--md-outlined-field-content-color: var(--_text-field-input-text-color);--md-outlined-field-content-font: var(--_text-field-input-text-font);--md-outlined-field-content-line-height: var(--_text-field-input-text-line-height);--md-outlined-field-content-size: var(--_text-field-input-text-size);--md-outlined-field-content-weight: var(--_text-field-input-text-weight);--md-outlined-field-disabled-content-color: var(--_text-field-disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_text-field-disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_text-field-disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_text-field-disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_text-field-disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_text-field-disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_text-field-disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_text-field-disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_text-field-disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_text-field-disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_text-field-disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_text-field-disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_text-field-disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_text-field-error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_text-field-error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_text-field-error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_text-field-error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_text-field-error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_text-field-error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_text-field-error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_text-field-error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_text-field-error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_text-field-error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_text-field-error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_text-field-error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_text-field-error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_text-field-error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_text-field-error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_text-field-error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_text-field-error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_text-field-error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_text-field-focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_text-field-focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_text-field-focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_text-field-focus-outline-color);--md-outlined-field-focus-outline-width: var(--_text-field-focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_text-field-focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_text-field-focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_text-field-hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_text-field-hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_text-field-hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_text-field-hover-outline-color);--md-outlined-field-hover-outline-width: var(--_text-field-hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_text-field-hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_text-field-hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_text-field-label-text-color);--md-outlined-field-label-text-font: var(--_text-field-label-text-font);--md-outlined-field-label-text-line-height: var(--_text-field-label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_text-field-label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_text-field-label-text-populated-size);--md-outlined-field-label-text-size: var(--_text-field-label-text-size);--md-outlined-field-label-text-weight: var(--_text-field-label-text-weight);--md-outlined-field-leading-content-color: var(--_text-field-leading-icon-color);--md-outlined-field-outline-color: var(--_text-field-outline-color);--md-outlined-field-outline-width: var(--_text-field-outline-width);--md-outlined-field-supporting-text-color: var(--_text-field-supporting-text-color);--md-outlined-field-supporting-text-font: var(--_text-field-supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_text-field-supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_text-field-supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_text-field-supporting-text-weight);--md-outlined-field-trailing-content-color: var(--_text-field-trailing-icon-color)}[has-start] .icon.leading{font-size:var(--_text-field-leading-icon-size);height:var(--_text-field-leading-icon-size);width:var(--_text-field-leading-icon-size)}.icon.trailing{font-size:var(--_text-field-trailing-icon-size);height:var(--_text-field-trailing-icon-size);width:var(--_text-field-trailing-icon-size)}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let g = class extends de {
|
|
};
|
|
g.styles = [R, ae];
|
|
g = l([
|
|
E("md-outlined-select")
|
|
], g);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
function se() {
|
|
return new Event("request-selection", {
|
|
bubbles: !0,
|
|
composed: !0
|
|
});
|
|
}
|
|
function ne() {
|
|
return new Event("request-deselection", {
|
|
bubbles: !0,
|
|
composed: !0
|
|
});
|
|
}
|
|
class ce {
|
|
/**
|
|
* The recommended role of the select option.
|
|
*/
|
|
get role() {
|
|
return this.menuItemController.role;
|
|
}
|
|
/**
|
|
* The text that is selectable via typeahead. If not set, defaults to the
|
|
* innerText of the item slotted into the `"headline"` slot, and if there are
|
|
* no slotted elements into headline, then it checks the _default_ slot, and
|
|
* then the `"supporting-text"` slot if nothing is in _default_.
|
|
*/
|
|
get typeaheadText() {
|
|
return this.menuItemController.typeaheadText;
|
|
}
|
|
setTypeaheadText(e) {
|
|
this.menuItemController.setTypeaheadText(e);
|
|
}
|
|
/**
|
|
* The text that is displayed in the select field when selected. If not set,
|
|
* defaults to the textContent of the item slotted into the `"headline"` slot,
|
|
* and if there are no slotted elements into headline, then it checks the
|
|
* _default_ slot, and then the `"supporting-text"` slot if nothing is in
|
|
* _default_.
|
|
*/
|
|
get displayText() {
|
|
return this.internalDisplayText !== null ? this.internalDisplayText : this.menuItemController.typeaheadText;
|
|
}
|
|
setDisplayText(e) {
|
|
this.internalDisplayText = e;
|
|
}
|
|
/**
|
|
* @param host The SelectOption in which to attach this controller to.
|
|
* @param config The object that configures this controller's behavior.
|
|
*/
|
|
constructor(e, t) {
|
|
this.host = e, this.internalDisplayText = null, this.firstUpdate = !0, this.onClick = () => {
|
|
this.menuItemController.onClick();
|
|
}, this.onKeydown = (i) => {
|
|
this.menuItemController.onKeydown(i);
|
|
}, this.lastSelected = this.host.selected, this.menuItemController = new L(e, t), e.addController(this);
|
|
}
|
|
hostUpdate() {
|
|
this.lastSelected !== this.host.selected && (this.host.ariaSelected = this.host.selected ? "true" : "false");
|
|
}
|
|
hostUpdated() {
|
|
this.lastSelected !== this.host.selected && !this.firstUpdate && (this.host.selected ? this.host.dispatchEvent(se()) : this.host.dispatchEvent(ne())), this.lastSelected = this.host.selected, this.firstUpdate = !1;
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const fe = O(b);
|
|
class s extends fe {
|
|
constructor() {
|
|
super(...arguments), this.disabled = !1, this.isMenuItem = !0, this.selected = !1, this.value = "", this.type = "option", this.selectOptionController = new ce(this, {
|
|
getHeadlineElements: () => this.headlineElements,
|
|
getSupportingTextElements: () => this.supportingTextElements,
|
|
getDefaultElements: () => this.defaultElements,
|
|
getInteractiveElement: () => this.listItemRoot
|
|
});
|
|
}
|
|
/**
|
|
* The text that is selectable via typeahead. If not set, defaults to the
|
|
* innerText of the item slotted into the `"headline"` slot.
|
|
*/
|
|
get typeaheadText() {
|
|
return this.selectOptionController.typeaheadText;
|
|
}
|
|
set typeaheadText(e) {
|
|
this.selectOptionController.setTypeaheadText(e);
|
|
}
|
|
/**
|
|
* The text that is displayed in the select field when selected. If not set,
|
|
* defaults to the textContent of the item slotted into the `"headline"` slot.
|
|
*/
|
|
get displayText() {
|
|
return this.selectOptionController.displayText;
|
|
}
|
|
set displayText(e) {
|
|
this.selectOptionController.setDisplayText(e);
|
|
}
|
|
render() {
|
|
return this.renderListItem(a`
|
|
<md-item>
|
|
<div slot="container">
|
|
${this.renderRipple()} ${this.renderFocusRing()}
|
|
</div>
|
|
<slot name="start" slot="start"></slot>
|
|
<slot name="end" slot="end"></slot>
|
|
${this.renderBody()}
|
|
</md-item>
|
|
`);
|
|
}
|
|
/**
|
|
* Renders the root list item.
|
|
*
|
|
* @param content the child content of the list item.
|
|
*/
|
|
renderListItem(e) {
|
|
return a`
|
|
<li
|
|
id="item"
|
|
tabindex=${this.disabled ? -1 : 0}
|
|
role=${this.selectOptionController.role}
|
|
aria-label=${this.ariaLabel || f}
|
|
aria-selected=${this.ariaSelected || f}
|
|
aria-checked=${this.ariaChecked || f}
|
|
aria-expanded=${this.ariaExpanded || f}
|
|
aria-haspopup=${this.ariaHasPopup || f}
|
|
class="list-item ${z(this.getRenderClasses())}"
|
|
@click=${this.selectOptionController.onClick}
|
|
@keydown=${this.selectOptionController.onKeydown}
|
|
>${e}</li
|
|
>
|
|
`;
|
|
}
|
|
/**
|
|
* Handles rendering of the ripple element.
|
|
*/
|
|
renderRipple() {
|
|
return a` <md-ripple
|
|
part="ripple"
|
|
for="item"
|
|
?disabled=${this.disabled}></md-ripple>`;
|
|
}
|
|
/**
|
|
* Handles rendering of the focus ring.
|
|
*/
|
|
renderFocusRing() {
|
|
return a` <md-focus-ring
|
|
part="focus-ring"
|
|
for="item"
|
|
inward></md-focus-ring>`;
|
|
}
|
|
/**
|
|
* Classes applied to the list item root.
|
|
*/
|
|
getRenderClasses() {
|
|
return {
|
|
disabled: this.disabled,
|
|
selected: this.selected
|
|
};
|
|
}
|
|
/**
|
|
* Handles rendering the headline and supporting text.
|
|
*/
|
|
renderBody() {
|
|
return a`
|
|
<slot></slot>
|
|
<slot name="overline" slot="overline"></slot>
|
|
<slot name="headline" slot="headline"></slot>
|
|
<slot name="supporting-text" slot="supporting-text"></slot>
|
|
<slot
|
|
name="trailing-supporting-text"
|
|
slot="trailing-supporting-text"></slot>
|
|
`;
|
|
}
|
|
focus() {
|
|
var e;
|
|
(e = this.listItemRoot) == null || e.focus();
|
|
}
|
|
}
|
|
s.shadowRootOptions = {
|
|
...b.shadowRootOptions,
|
|
delegatesFocus: !0
|
|
};
|
|
l([
|
|
r({ type: Boolean, reflect: !0 })
|
|
], s.prototype, "disabled", void 0);
|
|
l([
|
|
r({ type: Boolean, attribute: "md-menu-item", reflect: !0 })
|
|
], s.prototype, "isMenuItem", void 0);
|
|
l([
|
|
r({ type: Boolean })
|
|
], s.prototype, "selected", void 0);
|
|
l([
|
|
r()
|
|
], s.prototype, "value", void 0);
|
|
l([
|
|
_(".list-item")
|
|
], s.prototype, "listItemRoot", void 0);
|
|
l([
|
|
$({ slot: "headline" })
|
|
], s.prototype, "headlineElements", void 0);
|
|
l([
|
|
$({ slot: "supporting-text" })
|
|
], s.prototype, "supportingTextElements", void 0);
|
|
l([
|
|
Z({ slot: "" })
|
|
], s.prototype, "defaultElements", void 0);
|
|
l([
|
|
r({ attribute: "typeahead-text" })
|
|
], s.prototype, "typeaheadText", null);
|
|
l([
|
|
r({ attribute: "display-text" })
|
|
], s.prototype, "displayText", null);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let y = class extends s {
|
|
};
|
|
y.styles = [N];
|
|
y = l([
|
|
E("md-select-option")
|
|
], y);
|
|
const xe = S({
|
|
tagName: "md-select",
|
|
react: w,
|
|
elementClass: m
|
|
}), ue = S({
|
|
tagName: "md-select",
|
|
react: w,
|
|
elementClass: g
|
|
});
|
|
S({
|
|
tagName: "md-select-option",
|
|
react: w,
|
|
elementClass: y
|
|
});
|
|
const Ue = (d) => {
|
|
const { variant: e = "filled", ...t } = d;
|
|
return /* @__PURE__ */ k(e === "filled" ? xe : ue, { ...t });
|
|
};
|
|
export {
|
|
Ue as Select
|
|
};
|