").css({
width: "100%",
height: "200px"
});
const $outer = $$1("
").css({
position: "absolute",
top: "0",
left: "0",
pointerEvents: "none",
visibility: "hidden",
width: "200px",
height: "150px",
overflow: "hidden"
}).append($inner).appendTo(document.body);
const widthContained = $inner[0].offsetWidth;
$outer.css("overflow", "scroll");
let widthScroll = $inner[0].offsetWidth;
if (widthContained === widthScroll) {
widthScroll = $outer[0].clientWidth;
}
$outer.remove();
scrollBarSizeCached = widthContained - widthScroll;
}
return scrollBarSizeCached;
};
const hasScrollbar = (target) => {
return target.scrollHeight > target.clientHeight;
};
const lockMap = /* @__PURE__ */ new WeakMap();
const className = "mdui-lock-screen";
const lockScreen = (source2, target) => {
const document2 = getDocument();
target ?? (target = document2.documentElement);
if (!lockMap.has(target)) {
lockMap.set(target, /* @__PURE__ */ new Set());
}
const lock = lockMap.get(target);
lock.add(source2);
const $target = $$1(target);
if (hasScrollbar(target)) {
$target.css("width", `calc(100% - ${getScrollBarSize()}px)`);
}
$target.addClass(className);
};
const unlockScreen = (source2, target) => {
const document2 = getDocument();
target ?? (target = document2.documentElement);
const lock = lockMap.get(target);
if (!lock) {
return;
}
lock.delete(source2);
if (lock.size === 0) {
lockMap.delete(target);
$$1(target).removeClass(className).width("");
}
};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const LOCALE_STATUS_EVENT = "lit-localize-status";
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const isStrTagged = (val) => typeof val !== "string" && "strTag" in val;
const joinStringsAndValues = (strings, values, valueOrder) => {
let concat = strings[0];
for (let i3 = 1; i3 < strings.length; i3++) {
concat += values[i3 - 1];
concat += strings[i3];
}
return concat;
};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const defaultMsg = (template) => isStrTagged(template) ? joinStringsAndValues(template.strings, template.values) : template;
let msg = defaultMsg;
/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
class Deferred {
constructor() {
this.settled = false;
this.promise = new Promise((resolve, reject) => {
this._resolve = resolve;
this._reject = reject;
});
}
resolve(value) {
this.settled = true;
this._resolve(value);
}
reject(error) {
this.settled = true;
this._reject(error);
}
}
/**
* @license
* Copyright 2014 Travis Webb
* SPDX-License-Identifier: MIT
*/
for (let i3 = 0; i3 < 256; i3++) {
(i3 >> 4 & 15).toString(16) + (i3 & 15).toString(16);
}
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
let loading = new Deferred();
loading.resolve();
let listeningLitLocalizeStatus = false;
const localeReadyCallbacksMap = /* @__PURE__ */ new Map();
const onLocaleReady = (target, callback) => {
if (!listeningLitLocalizeStatus) {
listeningLitLocalizeStatus = true;
const window2 = getWindow$1();
window2.addEventListener(LOCALE_STATUS_EVENT, (event) => {
if (event.detail.status === "ready") {
localeReadyCallbacksMap.forEach((callbacks2) => {
callbacks2.forEach((cb) => cb());
});
}
});
}
const callbacks = localeReadyCallbacksMap.get(target) || [];
callbacks.push(callback);
localeReadyCallbacksMap.set(target, callbacks);
};
const offLocaleReady = (target) => {
localeReadyCallbacksMap.delete(target);
};
const style$b = i$3`:host{--shape-corner:var(--mdui-shape-corner-extra-large);--z-index:2300;position:fixed;z-index:var(--z-index);display:none;align-items:center;justify-content:center;inset:0;padding:3rem}::slotted(mdui-top-app-bar[slot=header]){position:absolute;border-top-left-radius:var(--mdui-shape-corner-extra-large);border-top-right-radius:var(--mdui-shape-corner-extra-large);background-color:rgb(var(--mdui-color-surface-container-high))}:host([fullscreen]){--shape-corner:var(--mdui-shape-corner-none);padding:0}:host([fullscreen]) ::slotted(mdui-top-app-bar[slot=header]){border-top-left-radius:var(--mdui-shape-corner-none);border-top-right-radius:var(--mdui-shape-corner-none)}.overlay{position:fixed;inset:0;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{--mdui-color-background:var(--mdui-color-surface-container-high);position:relative;display:flex;flex-direction:column;max-height:100%;border-radius:var(--shape-corner);outline:0;transform-origin:top;min-width:17.5rem;max-width:35rem;padding:1.5rem;background-color:rgb(var(--mdui-color-surface-container-high));box-shadow:var(--mdui-elevation-level3)}:host([fullscreen]) .panel{width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:var(--mdui-elevation-level0)}.header{display:flex;flex-direction:column}.has-icon .header{align-items:center}.icon{display:flex;color:rgb(var(--mdui-color-secondary));font-size:1.5rem}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}.headline{display:flex;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}.icon+.headline{padding-top:1rem}.body{overflow:auto}.header+.body{margin-top:1rem}.description{display:flex;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([fullscreen]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description.has-default .description{margin-bottom:1rem}.action{display:flex;justify-content:flex-end;padding-top:1.5rem}.action::slotted(:not(:first-child)){margin-left:.5rem}:host([stacked-actions]) .action{flex-direction:column;align-items:end}:host([stacked-actions]) .action::slotted(:not(:first-child)){margin-left:0;margin-top:.5rem}`;
let Dialog = class Dialog2 extends MduiElement {
constructor() {
super(...arguments);
this.open = false;
this.fullscreen = false;
this.closeOnEsc = false;
this.closeOnOverlayClick = false;
this.stackedActions = false;
this.overlayRef = ii();
this.panelRef = ii();
this.bodyRef = ii();
this.hasSlotController = new HasSlotController(this, "header", "icon", "headline", "description", "action", "[default]");
this.definedController = new DefinedController(this, {
relatedElements: ["mdui-top-app-bar"]
});
}
async onOpenChange() {
const hasUpdated = this.hasUpdated;
if (!this.open && !hasUpdated) {
return;
}
await this.definedController.whenDefined();
if (!hasUpdated) {
await this.updateComplete;
}
const children = Array.from(this.panelRef.value.querySelectorAll(".header, .body, .actions"));
const easingLinear = getEasing(this, "linear");
const easingEmphasizedDecelerate = getEasing(this, "emphasized-decelerate");
const easingEmphasizedAccelerate = getEasing(this, "emphasized-accelerate");
const stopAnimation = () => Promise.all([
stopAnimations(this.overlayRef.value),
stopAnimations(this.panelRef.value),
...children.map((child) => stopAnimations(child))
]);
if (this.open) {
if (hasUpdated) {
const eventProceeded = this.emit("open", { cancelable: true });
if (!eventProceeded) {
return;
}
}
this.style.display = "flex";
const topAppBarElements = this.topAppBarElements ?? [];
if (topAppBarElements.length) {
const topAppBarElement = topAppBarElements[0];
if (!topAppBarElement.scrollTarget) {
topAppBarElement.scrollTarget = this.bodyRef.value;
}
this.bodyRef.value.style.marginTop = "0";
}
this.originalTrigger = document.activeElement;
this.modalHelper.activate();
lockScreen(this);
await stopAnimation();
requestAnimationFrame(() => {
const autoFocusTarget = this.querySelector("[autofocus]");
if (autoFocusTarget) {
autoFocusTarget.focus({ preventScroll: true });
} else {
this.panelRef.value.focus({ preventScroll: true });
}
});
const duration = getDuration(this, "medium4");
await Promise.all([
animateTo(this.overlayRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], {
duration: hasUpdated ? duration : 0,
easing: easingLinear
}),
animateTo(this.panelRef.value, [
{ transform: "translateY(-1.875rem) scaleY(0)" },
{ transform: "translateY(0) scaleY(1)" }
], {
duration: hasUpdated ? duration : 0,
easing: easingEmphasizedDecelerate
}),
animateTo(this.panelRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.1 }, { opacity: 1 }], {
duration: hasUpdated ? duration : 0,
easing: easingLinear
}),
...children.map((child) => animateTo(child, [
{ opacity: 0 },
{ opacity: 0, offset: 0.2 },
{ opacity: 1, offset: 0.8 },
{ opacity: 1 }
], {
duration: hasUpdated ? duration : 0,
easing: easingLinear
}))
]);
if (hasUpdated) {
this.emit("opened");
}
} else {
const eventProceeded = this.emit("close", { cancelable: true });
if (!eventProceeded) {
return;
}
this.modalHelper.deactivate();
await stopAnimation();
const duration = getDuration(this, "short4");
await Promise.all([
animateTo(this.overlayRef.value, [{ opacity: 1 }, { opacity: 0 }], {
duration,
easing: easingLinear
}),
animateTo(this.panelRef.value, [
{ transform: "translateY(0) scaleY(1)" },
{ transform: "translateY(-1.875rem) scaleY(0.6)" }
], { duration, easing: easingEmphasizedAccelerate }),
animateTo(this.panelRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear }),
...children.map((child) => animateTo(child, [{ opacity: 1 }, { opacity: 0, offset: 0.75 }, { opacity: 0 }], { duration, easing: easingLinear }))
]);
this.style.display = "none";
unlockScreen(this);
const trigger = this.originalTrigger;
if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
setTimeout(() => trigger.focus());
}
this.emit("closed");
}
}
disconnectedCallback() {
super.disconnectedCallback();
unlockScreen(this);
offLocaleReady(this);
}
firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
this.modalHelper = new Modal(this);
this.addEventListener("keydown", (event) => {
if (this.open && this.closeOnEsc && event.key === "Escape") {
event.stopPropagation();
this.open = false;
}
});
}
render() {
const hasActionSlot = this.hasSlotController.test("action");
const hasDefaultSlot = this.hasSlotController.test("[default]");
const hasIcon = !!this.icon || this.hasSlotController.test("icon");
const hasHeadline = !!this.headline || this.hasSlotController.test("headline");
const hasDescription = !!this.description || this.hasSlotController.test("description");
const hasHeader = hasIcon || hasHeadline || this.hasSlotController.test("header");
const hasBody = hasDescription || hasDefaultSlot;
return ke`
${nn(hasHeader, () => ke``)} ${nn(hasBody, () => ke`
${nn(hasDescription, () => this.renderDescription())}
`)} ${nn(hasActionSlot, () => ke`
`)}
`;
}
onOverlayClick() {
this.emit("overlay-click");
if (!this.closeOnOverlayClick) {
return;
}
this.open = false;
}
renderIcon() {
return ke`
${this.icon ? ke`` : nothingTemplate}`;
}
renderHeadline() {
return ke`
${this.headline}`;
}
renderDescription() {
return ke`
${this.description}`;
}
};
Dialog.styles = [componentStyle, style$b];
__decorate([
n$2({ reflect: true })
], Dialog.prototype, "icon", void 0);
__decorate([
n$2({ reflect: true })
], Dialog.prototype, "headline", void 0);
__decorate([
n$2({ reflect: true })
], Dialog.prototype, "description", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Dialog.prototype, "open", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Dialog.prototype, "fullscreen", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "close-on-esc"
})
], Dialog.prototype, "closeOnEsc", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "close-on-overlay-click"
})
], Dialog.prototype, "closeOnOverlayClick", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "stacked-actions"
})
], Dialog.prototype, "stackedActions", void 0);
__decorate([
o$1({
slot: "header",
selector: "mdui-top-app-bar",
flatten: true
})
], Dialog.prototype, "topAppBarElements", void 0);
__decorate([
watch("open")
], Dialog.prototype, "onOpenChange", null);
Dialog = __decorate([
t$2("mdui-dialog")
], Dialog);
const style$a = i$3`:host{display:block;height:.0625rem;background-color:rgb(var(--mdui-color-surface-variant))}:host([inset]){margin-left:1rem}:host([middle]){margin-left:1rem;margin-right:1rem}:host([vertical]){height:100%;width:.0625rem}`;
let Divider = class Divider2 extends MduiElement {
constructor() {
super(...arguments);
this.vertical = false;
this.inset = false;
this.middle = false;
}
render() {
return ke``;
}
};
Divider.styles = [componentStyle, style$a];
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Divider.prototype, "vertical", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Divider.prototype, "inset", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Divider.prototype, "middle", void 0);
Divider = __decorate([
t$2("mdui-divider")
], Divider);
function hasWindow() {
return typeof window !== "undefined";
}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || "").toLowerCase();
}
return "#document";
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === "undefined") {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle$1(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
}
function isLastTraversableNode(node) {
return ["html", "body", "#document"].includes(getNodeName(node));
}
function getComputedStyle$1(element) {
return getWindow(element).getComputedStyle(element);
}
function getParentNode(node) {
if (getNodeName(node) === "html") {
return node;
}
const result = (
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot || // DOM Element detected.
node.parentNode || // ShadowRoot detected.
isShadowRoot(node) && node.host || // Fallback.
getDocumentElement(node)
);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow(scrollableAncestor);
if (isBody) {
const frameElement = getFrameElement(win);
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
const style$9 = i$3`:host{--z-index:2100;display:contents}.panel{display:block;position:fixed;z-index:var(--z-index)}`;
let Dropdown = class Dropdown2 extends MduiElement {
constructor() {
super();
this.open = false;
this.disabled = false;
this.trigger = "click";
this.placement = "auto";
this.stayOpenOnClick = false;
this.openDelay = 150;
this.closeDelay = 150;
this.openOnPointer = false;
this.panelRef = ii();
this.definedController = new DefinedController(this, {
relatedElements: [""]
});
this.onDocumentClick = this.onDocumentClick.bind(this);
this.onDocumentKeydown = this.onDocumentKeydown.bind(this);
this.onWindowScroll = this.onWindowScroll.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onClick = this.onClick.bind(this);
this.onContextMenu = this.onContextMenu.bind(this);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onPanelClick = this.onPanelClick.bind(this);
}
get triggerElement() {
return this.triggerElements[0];
}
// 这些属性变更时，需要更新样式
async onPositionChange() {
if (this.open) {
await this.definedController.whenDefined();
this.updatePositioner();
}
}
async onOpenChange() {
var _a2, _b;
const hasUpdated = this.hasUpdated;
if (!this.open && !hasUpdated) {
return;
}
await this.definedController.whenDefined();
if (!hasUpdated) {
await this.updateComplete;
}
const easingLinear = getEasing(this, "linear");
const easingEmphasizedDecelerate = getEasing(this, "emphasized-decelerate");
const easingEmphasizedAccelerate = getEasing(this, "emphasized-accelerate");
if (this.open) {
if (hasUpdated) {
const eventProceeded = this.emit("open", { cancelable: true });
if (!eventProceeded) {
return;
}
}
const focusablePanel = this.panelElements.find((panel) => isFunction(panel.focus));
setTimeout(() => {
focusablePanel == null ? void 0 : focusablePanel.focus();
});
const duration = getDuration(this, "medium4");
await stopAnimations(this.panelRef.value);
this.panelRef.value.hidden = false;
this.updatePositioner();
await Promise.all([
animateTo(this.panelRef.value, [
{ transform: `${this.getCssScaleName()}(0.45)` },
{ transform: `${this.getCssScaleName()}(1)` }
], {
duration: hasUpdated ? duration : 0,
easing: easingEmphasizedDecelerate
}),
animateTo(this.panelRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.125 }, { opacity: 1 }], {
duration: hasUpdated ? duration : 0,
easing: easingLinear
})
]);
if (hasUpdated) {
this.emit("opened");
}
} else {
const eventProceeded = this.emit("close", { cancelable: true });
if (!eventProceeded) {
return;
}
if (!this.hasTrigger("focus") && isFunction((_a2 = this.triggerElement) == null ? void 0 : _a2.focus) && (this.contains(document.activeElement) || this.contains(((_b = document.activeElement) == null ? void 0 : _b.assignedSlot) ?? null))) {
this.triggerElement.focus();
}
const duration = getDuration(this, "short4");
await stopAnimations(this.panelRef.value);
await Promise.all([
animateTo(this.panelRef.value, [
{ transform: `${this.getCssScaleName()}(1)` },
{ transform: `${this.getCssScaleName()}(0.45)` }
], { duration, easing: easingEmphasizedAccelerate }),
animateTo(this.panelRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.875 }, { opacity: 0 }], { duration, easing: easingLinear })
]);
if (this.panelRef.value) {
this.panelRef.value.hidden = true;
}
this.emit("closed");
}
}
connectedCallback() {
super.connectedCallback();
this.definedController.whenDefined().then(() => {
document.addEventListener("pointerdown", this.onDocumentClick);
document.addEventListener("keydown", this.onDocumentKeydown);
this.overflowAncestors = getOverflowAncestors(this.triggerElement);
this.overflowAncestors.forEach((ancestor) => {
ancestor.addEventListener("scroll", this.onWindowScroll);
});
});
}
disconnectedCallback() {
var _a2, _b;
super.disconnectedCallback();
document.removeEventListener("pointerdown", this.onDocumentClick);
document.removeEventListener("keydown", this.onDocumentKeydown);
(_a2 = this.overflowAncestors) == null ? void 0 : _a2.forEach((ancestor) => {
ancestor.removeEventListener("scroll", this.onWindowScroll);
});
(_b = this.observeResize) == null ? void 0 : _b.unobserve();
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
this.addEventListener("mouseleave", this.onMouseLeave);
this.definedController.whenDefined().then(() => {
this.triggerElement.addEventListener("focus", this.onFocus);
this.triggerElement.addEventListener("click", this.onClick);
this.triggerElement.addEventListener("contextmenu", this.onContextMenu);
this.triggerElement.addEventListener("mouseenter", this.onMouseEnter);
this.observeResize = observeResize(this.triggerElement, () => {
this.updatePositioner();
});
});
}
render() {
return ke`
`;
}
/**
* 获取 dropdown 打开、关闭动画的 CSS scaleX 或 scaleY
*/
getCssScaleName() {
return this.animateDirection === "horizontal" ? "scaleX" : "scaleY";
}
/**
* 在 document 上点击时，根据条件判断是否要关闭 dropdown
*/
onDocumentClick(e2) {
if (this.disabled || !this.open) {
return;
}
const path = e2.composedPath();
if (!path.includes(this)) {
this.open = false;
}
if (this.hasTrigger("contextmenu") && !this.hasTrigger("click") && path.includes(this.triggerElement)) {
this.open = false;
}
}
/**
* 在 document 上按下按键时，根据条件判断是否要关闭 dropdown
*/
onDocumentKeydown(event) {
var _a2;
if (this.disabled || !this.open) {
return;
}
if (event.key === "Escape") {
this.open = false;
return;
}
if (event.key === "Tab") {
if (!this.hasTrigger("focus") && isFunction((_a2 = this.triggerElement) == null ? void 0 : _a2.focus)) {
event.preventDefault();
}
this.open = false;
}
}
onWindowScroll() {
window.requestAnimationFrame(() => this.onPositionChange());
}
hasTrigger(trigger) {
const triggers = this.trigger.split(" ");
return triggers.includes(trigger);
}
onFocus() {
if (this.disabled || this.open || !this.hasTrigger("focus")) {
return;
}
this.open = true;
}
onClick(e2) {
if (this.disabled || e2.button || !this.hasTrigger("click")) {
return;
}
if (this.open && (this.hasTrigger("hover") || this.hasTrigger("focus"))) {
return;
}
this.pointerOffsetX = e2.offsetX;
this.pointerOffsetY = e2.offsetY;
this.open = !this.open;
}
onPanelClick(e2) {
if (!this.disabled && !this.stayOpenOnClick && $$1(e2.target).is("mdui-menu-item")) {
this.open = false;
}
}
onContextMenu(e2) {
if (this.disabled || !this.hasTrigger("contextmenu")) {
return;
}
e2.preventDefault();
this.pointerOffsetX = e2.offsetX;
this.pointerOffsetY = e2.offsetY;
this.open = true;
}
onMouseEnter() {
if (this.disabled || !this.hasTrigger("hover")) {
return;
}
window.clearTimeout(this.closeTimeout);
if (this.openDelay) {
this.openTimeout = window.setTimeout(() => {
this.open = true;
}, this.openDelay);
} else {
this.open = true;
}
}
onMouseLeave() {
if (this.disabled || !this.hasTrigger("hover")) {
return;
}
window.clearTimeout(this.openTimeout);
this.closeTimeout = window.setTimeout(() => {
this.open = false;
}, this.closeDelay || 50);
}
// 更新 panel 的位置
updatePositioner() {
const $panel = $$1(this.panelRef.value);
const $window = $$1(window);
const panelElements = this.panelElements;
const panelRect = {
width: Math.max(...(panelElements == null ? void 0 : panelElements.map((panel) => panel.offsetWidth)) ?? []),
height: panelElements == null ? void 0 : panelElements.map((panel) => panel.offsetHeight).reduce((total, height) => total + height, 0)
};
const triggerClientRect = this.triggerElement.getBoundingClientRect();
const triggerRect = this.openOnPointer ? {
top: this.pointerOffsetY + triggerClientRect.top,
left: this.pointerOffsetX + triggerClientRect.left,
width: 0,
height: 0
} : triggerClientRect;
const screenMargin = 8;
let transformOriginX;
let transformOriginY;
let top2;
let left;
let placement = this.placement;
if (placement === "auto") {
const windowWidth = $window.width();
const windowHeight = $window.height();
let position2;
let alignment2;
if (windowHeight - triggerRect.top - triggerRect.height > panelRect.height + screenMargin) {
position2 = "bottom";
} else if (triggerRect.top > panelRect.height + screenMargin) {
position2 = "top";
} else if (windowWidth - triggerRect.left - triggerRect.width > panelRect.width + screenMargin) {
position2 = "right";
} else if (triggerRect.left > panelRect.width + screenMargin) {
position2 = "left";
} else {
position2 = "bottom";
}
if (["top", "bottom"].includes(position2)) {
if (windowWidth - triggerRect.left > panelRect.width + screenMargin) {
alignment2 = "start";
} else if (triggerRect.left + triggerRect.width / 2 > panelRect.width / 2 + screenMargin && windowWidth - triggerRect.left - triggerRect.width / 2 > panelRect.width / 2 + screenMargin) {
alignment2 = void 0;
} else if (triggerRect.left + triggerRect.width > panelRect.width + screenMargin) {
alignment2 = "end";
} else {
alignment2 = "start";
}
} else {
if (windowHeight - triggerRect.top > panelRect.height + screenMargin) {
alignment2 = "start";
} else if (triggerRect.top + triggerRect.height / 2 > panelRect.height / 2 + screenMargin && windowHeight - triggerRect.top - triggerRect.height / 2 > panelRect.height / 2 + screenMargin) {
alignment2 = void 0;
} else if (triggerRect.top + triggerRect.height > panelRect.height + screenMargin) {
alignment2 = "end";
} else {
alignment2 = "start";
}
}
placement = alignment2 ? [position2, alignment2].join("-") : position2;
}
const [position, alignment] = placement.split("-");
this.animateDirection = ["top", "bottom"].includes(position) ? "vertical" : "horizontal";
switch (position) {
case "top":
transformOriginY = "bottom";
top2 = triggerRect.top - panelRect.height;
break;
case "bottom":
transformOriginY = "top";
top2 = triggerRect.top + triggerRect.height;
break;
default:
transformOriginY = "center";
switch (alignment) {
case "start":
top2 = triggerRect.top;
break;
case "end":
top2 = triggerRect.top + triggerRect.height - panelRect.height;
break;
default:
top2 = triggerRect.top + triggerRect.height / 2 - panelRect.height / 2;
break;
}
break;
}
switch (position) {
case "left":
transformOriginX = "right";
left = triggerRect.left - panelRect.width;
break;
case "right":
transformOriginX = "left";
left = triggerRect.left + triggerRect.width;
break;
default:
transformOriginX = "center";
switch (alignment) {
case "start":
left = triggerRect.left;
break;
case "end":
left = triggerRect.left + triggerRect.width - panelRect.width;
break;
default:
left = triggerRect.left + triggerRect.width / 2 - panelRect.width / 2;
break;
}
break;
}
$panel.css({
top: top2,
left,
transformOrigin: [transformOriginX, transformOriginY].join(" ")
});
}
};
Dropdown.styles = [componentStyle, style$9];
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Dropdown.prototype, "open", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Dropdown.prototype, "disabled", void 0);
__decorate([
n$2({ reflect: true })
], Dropdown.prototype, "trigger", void 0);
__decorate([
n$2({ reflect: true })
], Dropdown.prototype, "placement", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "stay-open-on-click"
})
], Dropdown.prototype, "stayOpenOnClick", void 0);
__decorate([
n$2({ type: Number, reflect: true, attribute: "open-delay" })
], Dropdown.prototype, "openDelay", void 0);
__decorate([
n$2({ type: Number, reflect: true, attribute: "close-delay" })
], Dropdown.prototype, "closeDelay", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "open-on-pointer"
})
], Dropdown.prototype, "openOnPointer", void 0);
__decorate([
o$1({ slot: "trigger", flatten: true })
], Dropdown.prototype, "triggerElements", void 0);
__decorate([
o$1({ flatten: true })
], Dropdown.prototype, "panelElements", void 0);
__decorate([
watch("placement", true),
watch("openOnPointer", true)
], Dropdown.prototype, "onPositionChange", null);
__decorate([
watch("open")
], Dropdown.prototype, "onOpenChange", null);
Dropdown = __decorate([
t$2("mdui-dropdown")
], Dropdown);
const delay = (duration = 0) => {
return new Promise((resolve) => setTimeout(resolve, duration));
};
const style$8 = i$3`:host{--shape-corner-small:var(--mdui-shape-corner-small);--shape-corner-normal:var(--mdui-shape-corner-large);--shape-corner-large:var(--mdui-shape-corner-extra-large);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;text-align:center;border-radius:var(--shape-corner-normal);cursor:pointer;-webkit-tap-highlight-color:transparent;transition-property:box-shadow;transition-timing-function:var(--mdui-motion-easing-emphasized);transition-duration:var(--mdui-motion-duration-medium4);width:3.5rem;height:3.5rem;box-shadow:var(--mdui-elevation-level3);font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.button{padding:0 1rem}:host([size=small]) .button{padding:0 .5rem}:host([size=large]) .button{padding:0 1.875rem}:host([lowered]){box-shadow:var(--mdui-elevation-level1)}:host([focus-visible]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][focus-visible]){box-shadow:var(--mdui-elevation-level1)}:host([pressed]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][pressed]){box-shadow:var(--mdui-elevation-level1)}:host([hover]){box-shadow:var(--mdui-elevation-level4)}:host([lowered][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=primary]){color:rgb(var(--mdui-color-on-primary-container));background-color:rgb(var(--mdui-color-primary-container));--mdui-comp-ripple-state-layer-color:var(
--mdui-color-on-primary-container
)}:host([variant=surface]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-high));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=surface][lowered]){background-color:rgb(var(--mdui-color-surface-container-low))}:host([variant=secondary]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
--mdui-color-on-secondary-container
)}:host([variant=tertiary]){color:rgb(var(--mdui-color-on-tertiary-container));background-color:rgb(var(--mdui-color-tertiary-container));--mdui-comp-ripple-state-layer-color:var(
--mdui-color-on-tertiary-container
)}:host([size=small]){border-radius:var(--shape-corner-small);width:2.5rem;height:2.5rem}:host([size=large]){border-radius:var(--shape-corner-large);width:6rem;height:6rem}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),12%);box-shadow:var(--mdui-elevation-level0)}:host([extended]){width:auto}.label{display:inline-flex;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear) var(--mdui-motion-duration-short2);padding-left:.25rem;padding-right:.25rem}.has-icon .label{margin-left:.5rem}:host([size=small]) .has-icon .label{margin-left:.25rem}:host([size=large]) .has-icon .label{margin-left:1rem}:host(:not([extended])) .label{opacity:0;transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([size=large]) .label{font-size:1.5em}.icon{display:inline-flex;font-size:1.71428571em}:host([size=large]) .icon{font-size:2.57142857em}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.5rem;height:1.5rem}:host([size=large]) mdui-circular-progress{width:2.25rem;height:2.25rem}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;
let Fab = class Fab2 extends ButtonBase {
constructor() {
super(...arguments);
this.variant = "primary";
this.size = "normal";
this.extended = false;
this.rippleRef = ii();
this.hasSlotController = new HasSlotController(this, "icon");
this.definedController = new DefinedController(this, {
relatedElements: [""]
});
}
get rippleElement() {
return this.rippleRef.value;
}
/**
* extended 变更时，设置动画
*/
async onExtendedChange() {
const hasUpdated = this.hasUpdated;
if (this.extended) {
this.style.width = `${this.scrollWidth}px`;
} else {
this.style.width = "";
}
await this.definedController.whenDefined();
await this.updateComplete;
if (this.extended && !hasUpdated) {
this.style.width = `${this.scrollWidth}px`;
}
if (!hasUpdated) {
await delay();
this.style.transitionProperty = "box-shadow, width, bottom, transform";
}
}
render() {
const className2 = cc({
button: true,
"has-icon": this.icon || this.hasSlotController.test("icon")
});
return ke`
${this.isButton() ? this.renderButton({
className: className2,
part: "button",
content: this.renderInner()
}) : this.disabled || this.loading ? ke`
${this.renderInner()}` : this.renderAnchor({
className: className2,
part: "button",
content: this.renderInner()
})}`;
}
renderLabel() {
return ke`
`;
}
renderIcon() {
if (this.loading) {
return this.renderLoading();
}
return ke`
${this.icon ? ke`` : nothingTemplate}`;
}
renderInner() {
return [this.renderIcon(), this.renderLabel()];
}
};
Fab.styles = [ButtonBase.styles, style$8];
__decorate([
n$2({ reflect: true })
], Fab.prototype, "variant", void 0);
__decorate([
n$2({ reflect: true })
], Fab.prototype, "size", void 0);
__decorate([
n$2({ reflect: true })
], Fab.prototype, "icon", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Fab.prototype, "extended", void 0);
__decorate([
watch("extended")
], Fab.prototype, "onExtendedChange", null);
Fab = __decorate([
t$2("mdui-fab")
], Fab);
const layoutStyle = i$3`:host{position:relative;display:flex;flex:1 1 auto;overflow:hidden}:host([full-height]){height:100%}`;
let Layout = class Layout2 extends MduiElement {
constructor() {
super(...arguments);
this.fullHeight = false;
}
render() {
return ke`
`;
}
};
Layout.styles = [componentStyle, layoutStyle];
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "full-height"
})
], Layout.prototype, "fullHeight", void 0);
Layout = __decorate([
t$2("mdui-layout")
], Layout);
const layoutItemStyle = i$3`:host{display:flex;z-index:1}`;
let LayoutItem = class LayoutItem2 extends LayoutItemBase {
constructor() {
super(...arguments);
this.placement = "top";
}
get layoutPlacement() {
return this.placement;
}
// placement 变更时，需要重新调整布局
onPlacementChange() {
var _a2;
(_a2 = this.layoutManager) == null ? void 0 : _a2.updateLayout(this);
}
render() {
return ke`
`;
}
};
LayoutItem.styles = [
componentStyle,
layoutItemStyle
];
__decorate([
n$2({ reflect: true })
], LayoutItem.prototype, "placement", void 0);
__decorate([
watch("placement", true)
], LayoutItem.prototype, "onPlacementChange", null);
LayoutItem = __decorate([
t$2("mdui-layout-item")
], LayoutItem);
const layoutMainStyle = i$3`:host{flex:1 0 auto;max-width:100%;overflow:auto}`;
let LayoutMain = class LayoutMain2 extends MduiElement {
connectedCallback() {
super.connectedCallback();
const parentElement = this.parentElement;
if (isNodeName(parentElement, "mdui-layout")) {
this.layoutManager = getLayout(parentElement);
this.layoutManager.registerMain(this);
}
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.layoutManager) {
this.layoutManager.unregisterMain();
}
}
render() {
return ke`
`;
}
};
LayoutMain.styles = [
componentStyle,
layoutMainStyle
];
LayoutMain = __decorate([
t$2("mdui-layout-main")
], LayoutMain);
const style$7 = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);position:relative;display:inline-block;width:100%;overflow:hidden;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container-highest));height:.25rem}.determinate,.indeterminate{background-color:rgb(var(--mdui-color-primary))}.determinate{height:100%;transition:width var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}.indeterminate::before{position:absolute;top:0;bottom:0;left:0;background-color:inherit;animation:mdui-comp-progress-indeterminate 2s var(--mdui-motion-easing-linear) infinite;content:' '}.indeterminate::after{position:absolute;top:0;bottom:0;left:0;background-color:inherit;animation:mdui-comp-progress-indeterminate-short 2s var(--mdui-motion-easing-linear) infinite;content:' '}@keyframes mdui-comp-progress-indeterminate{0%{left:0;width:0}50%{left:30%;width:70%}75%{left:100%;width:0}}@keyframes mdui-comp-progress-indeterminate-short{0%{left:0;width:0}50%{left:0;width:0}75%{left:0;width:25%}100%{left:100%;width:0}}`;
let LinearProgress = class LinearProgress2 extends MduiElement {
constructor() {
super(...arguments);
this.max = 1;
}
render() {
const isDeterminate = !isUndefined(this.value);
if (isDeterminate) {
const value = this.value;
return ke`
`;
}
return ke`
`;
}
};
LinearProgress.styles = [componentStyle, style$7];
__decorate([
n$2({ type: Number, reflect: true })
], LinearProgress.prototype, "max", void 0);
__decorate([
n$2({ type: Number })
], LinearProgress.prototype, "value", void 0);
LinearProgress = __decorate([
t$2("mdui-linear-progress")
], LinearProgress);
const listItemStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);--shape-corner-rounded:var(--mdui-shape-corner-extra-large);position:relative;display:block;border-radius:var(--shape-corner);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([rounded]),:host([rounded]) mdui-ripple{border-radius:var(--shape-corner-rounded)}:host([active]){background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
--mdui-color-on-secondary-container
)}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}:host([nonclickable]:not([href])) .container{cursor:auto;-webkit-user-select:auto;user-select:auto}.preset{display:flex;align-items:center;padding:.5rem 1.5rem .5rem 1rem;min-height:3.5rem}:host([alignment=start]) .preset{align-items:flex-start}:host([alignment=end]) .preset{align-items:flex-end}.body{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;min-width:0}.headline{display:block;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([active]) .headline{color:rgb(var(--mdui-color-on-secondary-container))}.description{display:none;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([disabled]) .description,:host([focused]) .description,:host([hover]) .description,:host([pressed]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description .description{display:block}:host([description-line='1']) .description,:host([headline-line='1']) .headline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([description-line='2']) .description,:host([description-line='3']) .description,:host([headline-line='2']) .headline,:host([headline-line='3']) .headline{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}:host([description-line='2']) .description,:host([headline-line='2']) .headline{-webkit-line-clamp:2}:host([description-line='3']) .description,:host([headline-line='3']) .headline{-webkit-line-clamp:3}.end-icon,.icon{display:flex;flex:0 0 auto;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([focused]) .end-icon,:host([focused]) .icon,:host([hover]) .end-icon,:host([hover]) .icon,:host([pressed]) .end-icon,:host([pressed]) .icon{color:rgb(var(--mdui-color-on-surface))}:host([active]) .end-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}.end-icon mdui-icon,.icon mdui-icon,.is-end-icon ::slotted([slot=end-icon]),.is-icon ::slotted([slot=icon]){font-size:1.5rem}.has-icon .icon{margin-right:1rem}.has-icon ::slotted(mdui-checkbox[slot=icon]),.has-icon ::slotted(mdui-radio[slot=icon]){margin-left:-.5rem}.has-end-icon .end-icon{margin-left:1rem}.has-end-icon ::slotted(mdui-checkbox[slot=end-icon]),.has-end-icon ::slotted(mdui-radio[slot=end-icon]){margin-right:-.5rem}`;
let ListItem = class ListItem2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
constructor() {
super(...arguments);
this.disabled = false;
this.active = false;
this.nonclickable = false;
this.rounded = false;
this.alignment = "center";
this.rippleRef = ii();
this.itemRef = ii();
this.hasSlotController = new HasSlotController(this, "[default]", "description", "icon", "end-icon", "custom");
}
get rippleElement() {
return this.rippleRef.value;
}
get rippleDisabled() {
return this.focusDisabled;
}
get focusElement() {
return this.href && !this.disabled ? this.itemRef.value : this;
}
get focusDisabled() {
return this.href ? this.disabled : this.disabled || this.nonclickable;
}
render() {
const preset = !this.hasSlotController.test("custom");
const hasIcon = this.icon || this.hasSlotController.test("icon");
const hasEndIcon = this.endIcon || this.hasSlotController.test("end-icon");
const hasDescription = this.description || this.hasSlotController.test("description");
const className2 = cc({
container: true,
preset,
"has-icon": hasIcon,
"has-end-icon": hasEndIcon,
"has-description": hasDescription,
// icon slot 中的元素是否为 mdui-icon 或 mdui-icon-* 组件
"is-icon": isNodeName(this.iconElements[0], "mdui-icon"),
// end-icon slot 中的元素是否为 mdui-icon 或 mdui-icon-* 组件
"is-end-icon": getNodeName$1(this.endIconElements[0]).startsWith("mdui-icon-")
});
return ke`
${this.href && !this.disabled ? this.renderAnchor({
className: className2,
content: this.renderInner(),
part: "container",
refDirective: Kt(this.itemRef)
}) : ke`
${this.renderInner()}
`}`;
}
renderInner() {
const hasDefaultSlot = this.hasSlotController.test("[default]");
return ke`
${this.icon ? ke`` : nothingTemplate}${hasDefaultSlot ? ke`
` : ke`
${this.headline}
`}
${this.description}`;
}
};
ListItem.styles = [
componentStyle,
listItemStyle
];
__decorate([
n$2({ reflect: true })
], ListItem.prototype, "headline", void 0);
__decorate([
n$2({ type: Number, reflect: true, attribute: "headline-line" })
], ListItem.prototype, "headlineLine", void 0);
__decorate([
n$2({ reflect: true })
], ListItem.prototype, "description", void 0);
__decorate([
n$2({ type: Number, reflect: true, attribute: "description-line" })
], ListItem.prototype, "descriptionLine", void 0);
__decorate([
n$2({ reflect: true })
], ListItem.prototype, "icon", void 0);
__decorate([
n$2({ reflect: true, attribute: "end-icon" })
], ListItem.prototype, "endIcon", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], ListItem.prototype, "disabled", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], ListItem.prototype, "active", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], ListItem.prototype, "nonclickable", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], ListItem.prototype, "rounded", void 0);
__decorate([
n$2({ reflect: true })
], ListItem.prototype, "alignment", void 0);
__decorate([
o$1({ slot: "icon", flatten: true })
], ListItem.prototype, "iconElements", void 0);
__decorate([
o$1({ slot: "end-icon", flatten: true })
], ListItem.prototype, "endIconElements", void 0);
ListItem = __decorate([
t$2("mdui-list-item")
], ListItem);
const listSubheaderStyle = i$3`:host{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height);padding-left:1rem;padding-right:1.5rem;height:3.5rem;line-height:3.5rem}`;
let ListSubheader = class ListSubheader2 extends MduiElement {
render() {
return ke`
`;
}
};
ListSubheader.styles = [
componentStyle,
listSubheaderStyle
];
ListSubheader = __decorate([
t$2("mdui-list-subheader")
], ListSubheader);
const listStyle = i$3`:host{display:block;padding:.5rem 0}::slotted(mdui-divider[middle]){margin-left:1rem;margin-right:1.5rem}`;
let List = class List2 extends MduiElement {
render() {
return ke`
`;
}
};
List.styles = [componentStyle, listStyle];
List = __decorate([
t$2("mdui-list")
], List);
let IconArrowRight = class IconArrowRight2 extends h$1 {
render() {
return svgTag('
');
}
};
IconArrowRight.styles = style$e;
IconArrowRight = __decorate([
t$2("mdui-icon-arrow-right")
], IconArrowRight);
const menuItemStyle = i$3`:host{position:relative;display:block}:host([selected]){background-color:rgba(var(--mdui-color-primary),12%)}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}.preset{display:flex;align-items:center;text-decoration:none;height:3rem;padding:0 .75rem}.preset.dense{height:2rem}.label-container{flex:1 1 100%;min-width:0}.label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking)}.end-icon,.end-text,.icon,.selected-icon{display:none;flex:0 0 auto;color:rgb(var(--mdui-color-on-surface-variant))}.has-end-icon .end-icon,.has-end-text .end-text,.has-icon .icon,.has-icon .selected-icon{display:flex}.end-icon,.icon,.selected-icon{font-size:1.5rem}.end-icon::slotted(mdui-avatar),.icon::slotted(mdui-avatar),.selected-icon::slotted(mdui-avatar){width:1.5rem;height:1.5rem}.dense .end-icon,.dense .icon,.dense .selected-icon{font-size:1.125rem}.dense .end-icon::slotted(mdui-avatar),.dense .icon::slotted(mdui-avatar),.dense .selected-icon::slotted(mdui-avatar){width:1.125rem;height:1.125rem}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}.end-text{font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.icon,.selected-icon{margin-right:.75rem}.end-icon,.end-text{margin-left:.75rem}.arrow-right{color:rgb(var(--mdui-color-on-surface))}.submenu{--shape-corner:var(--mdui-shape-corner-extra-small);display:block;position:absolute;z-index:1;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);min-width:7rem;max-width:17.5rem;padding-top:.5rem;padding-bottom:.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.submenu::slotted(mdui-divider){margin-top:.5rem;margin-bottom:.5rem}`;
let MenuItem = class MenuItem2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
constructor() {
super();
this.disabled = false;
this.submenuOpen = false;
this.selected = false;
this.dense = false;
this.focusable = false;
this.key = uniqueId();
this.rippleRef = ii();
this.containerRef = ii();
this.submenuRef = ii();
this.hasSlotController = new HasSlotController(this, "[default]", "icon", "end-icon", "end-text", "submenu", "custom");
this.definedController = new DefinedController(this, {
relatedElements: [""]
});
this.onOuterClick = this.onOuterClick.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onBlur = this.onBlur.bind(this);
this.onClick = this.onClick.bind(this);
this.onKeydown = this.onKeydown.bind(this);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
}
get focusDisabled() {
return this.disabled || !this.focusable;
}
get focusElement() {
return this.href && !this.disabled ? this.containerRef.value : this;
}
get rippleDisabled() {
return this.disabled;
}
get rippleElement() {
return this.rippleRef.value;
}
get hasSubmenu() {
return this.hasSlotController.test("submenu");
}
async onOpenChange() {
const hasUpdated = this.hasUpdated;
if (!this.submenuOpen && !hasUpdated) {
return;
}
await this.definedController.whenDefined();
if (!hasUpdated) {
await this.updateComplete;
}
const easingLinear = getEasing(this, "linear");
const easingEmphasizedDecelerate = getEasing(this, "emphasized-decelerate");
const easingEmphasizedAccelerate = getEasing(this, "emphasized-accelerate");
if (this.submenuOpen) {
if (hasUpdated) {
const eventProceeded = this.emit("submenu-open", { cancelable: true });
if (!eventProceeded) {
return;
}
}
const duration = getDuration(this, "medium4");
await stopAnimations(this.submenuRef.value);
this.submenuRef.value.hidden = false;
this.updateSubmenuPositioner();
await Promise.all([
animateTo(this.submenuRef.value, [{ transform: "scaleY(0.45)" }, { transform: "scaleY(1)" }], {
duration: hasUpdated ? duration : 0,
easing: easingEmphasizedDecelerate
}),
animateTo(this.submenuRef.value, [{ opacity: 0 }, { opacity: 1, offset: 0.125 }, { opacity: 1 }], {
duration: hasUpdated ? duration : 0,
easing: easingLinear
})
]);
if (hasUpdated) {
this.emit("submenu-opened");
}
} else {
const eventProceeded = this.emit("submenu-close", { cancelable: true });
if (!eventProceeded) {
return;
}
const duration = getDuration(this, "short4");
await stopAnimations(this.submenuRef.value);
await Promise.all([
animateTo(this.submenuRef.value, [{ transform: "scaleY(1)" }, { transform: "scaleY(0.45)" }], { duration, easing: easingEmphasizedAccelerate }),
animateTo(this.submenuRef.value, [{ opacity: 1 }, { opacity: 1, offset: 0.875 }, { opacity: 0 }], { duration, easing: easingLinear })
]);
if (this.submenuRef.value) {
this.submenuRef.value.hidden = true;
}
this.emit("submenu-closed");
}
}
connectedCallback() {
super.connectedCallback();
this.definedController.whenDefined().then(() => {
document.addEventListener("pointerdown", this.onOuterClick);
});
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener("pointerdown", this.onOuterClick);
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
this.definedController.whenDefined().then(() => {
this.addEventListener("focus", this.onFocus);
this.addEventListener("blur", this.onBlur);
this.addEventListener("click", this.onClick);
this.addEventListener("keydown", this.onKeydown);
this.addEventListener("mouseenter", this.onMouseEnter);
this.addEventListener("mouseleave", this.onMouseLeave);
});
}
render() {
const hasSubmenu = this.hasSubmenu;
const hasCustomSlot = this.hasSlotController.test("custom");
const hasEndIconSlot = this.hasSlotController.test("end-icon");
const useDefaultEndIcon = !this.endIcon && hasSubmenu && !hasEndIconSlot;
const hasEndIcon = this.endIcon || hasSubmenu || hasEndIconSlot;
const hasIcon = !isUndefined(this.icon) || this.selects === "single" || this.selects === "multiple" || this.hasSlotController.test("icon");
const hasEndText = !!this.endText || this.hasSlotController.test("end-text");
const className2 = cc({
container: true,
dense: this.dense,
preset: !hasCustomSlot,
"has-icon": hasIcon,
"has-end-text": hasEndText,
"has-end-icon": hasEndIcon
});
return ke`
${this.href && !this.disabled ? this.renderAnchor({
part: "container",
className: className2,
content: this.renderInner(useDefaultEndIcon, hasIcon),
refDirective: Kt(this.containerRef),
tabIndex: this.focusable ? 0 : -1
}) : ke`
${this.renderInner(useDefaultEndIcon, hasIcon)}
`} ${nn(hasSubmenu, () => ke``)}`;
}
/**
* 点击子菜单外面的区域，关闭子菜单
*/
onOuterClick(event) {
if (!this.disabled && this.submenuOpen && this !== event.target && !$$1.contains(this, event.target)) {
this.submenuOpen = false;
}
}
hasTrigger(trigger) {
return this.submenuTrigger ? this.submenuTrigger.split(" ").includes(trigger) : false;
}
onFocus() {
if (this.disabled || this.submenuOpen || !this.hasTrigger("focus") || !this.hasSubmenu) {
return;
}
this.submenuOpen = true;
}
onBlur() {
if (this.disabled || !this.submenuOpen || !this.hasTrigger("focus") || !this.hasSubmenu) {
return;
}
this.submenuOpen = false;
}
onClick(event) {
if (this.disabled || event.button) {
return;
}
if (!this.hasTrigger("click") || event.target !== this || !this.hasSubmenu) {
return;
}
if (this.submenuOpen && (this.hasTrigger("hover") || this.hasTrigger("focus"))) {
return;
}
this.submenuOpen = !this.submenuOpen;
}
onKeydown(event) {
if (this.disabled || !this.hasSubmenu) {
return;
}
if (!this.submenuOpen && event.key === "Enter") {
event.stopPropagation();
this.submenuOpen = true;
}
if (this.submenuOpen && event.key === "Escape") {
event.stopPropagation();
this.submenuOpen = false;
}
}
onMouseEnter() {
if (this.disabled || !this.hasTrigger("hover") || !this.hasSubmenu) {
return;
}
window.clearTimeout(this.submenuCloseTimeout);
if (this.submenuOpenDelay) {
this.submenuOpenTimeout = window.setTimeout(() => {
this.submenuOpen = true;
}, this.submenuOpenDelay);
} else {
this.submenuOpen = true;
}
}
onMouseLeave() {
if (this.disabled || !this.hasTrigger("hover") || !this.hasSubmenu) {
return;
}
window.clearTimeout(this.submenuOpenTimeout);
this.submenuCloseTimeout = window.setTimeout(() => {
this.submenuOpen = false;
}, this.submenuCloseDelay || 50);
}
// 更新子菜单的位置
updateSubmenuPositioner() {
const $window = $$1(window);
const $submenu = $$1(this.submenuRef.value);
const itemRect = this.getBoundingClientRect();
const submenuWidth = $submenu.innerWidth();
const submenuHeight = $submenu.innerHeight();
const screenMargin = 8;
let placementX = "bottom";
let placementY = "right";
if ($window.height() - itemRect.top > submenuHeight + screenMargin) {
placementX = "bottom";
} else if (itemRect.top + itemRect.height > submenuHeight + screenMargin) {
placementX = "top";
}
if ($window.width() - itemRect.left - itemRect.width > submenuWidth + screenMargin) {
placementY = "right";
} else if (itemRect.left > submenuWidth + screenMargin) {
placementY = "left";
}
$$1(this.submenuRef.value).css({
top: placementX === "bottom" ? 0 : itemRect.height - submenuHeight,
left: placementY === "right" ? itemRect.width : -submenuWidth,
transformOrigin: [
placementY === "right" ? 0 : "100%",
placementX === "bottom" ? 0 : "100%"
].join(" ")
});
}
renderInner(useDefaultEndIcon, hasIcon) {
return ke`
${this.selected ? ke`${this.selectedIcon ? ke`` : ke``}` : ke`${hasIcon ? ke`` : nothingTemplate}`}
${this.endText}${useDefaultEndIcon ? ke`` : ke`${this.endIcon ? ke`` : nothingTemplate}`}`;
}
};
MenuItem.styles = [
componentStyle,
menuItemStyle
];
__decorate([
n$2({ reflect: true })
], MenuItem.prototype, "value", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], MenuItem.prototype, "disabled", void 0);
__decorate([
n$2({ reflect: true })
], MenuItem.prototype, "icon", void 0);
__decorate([
n$2({ reflect: true, attribute: "end-icon" })
], MenuItem.prototype, "endIcon", void 0);
__decorate([
n$2({ reflect: true, attribute: "end-text" })
], MenuItem.prototype, "endText", void 0);
__decorate([
n$2({ reflect: true, attribute: "selected-icon" })
], MenuItem.prototype, "selectedIcon", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "submenu-open"
})
], MenuItem.prototype, "submenuOpen", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], MenuItem.prototype, "selected", void 0);
__decorate([
r$1()
], MenuItem.prototype, "dense", void 0);
__decorate([
r$1()
], MenuItem.prototype, "selects", void 0);
__decorate([
r$1()
], MenuItem.prototype, "submenuTrigger", void 0);
__decorate([
r$1()
], MenuItem.prototype, "submenuOpenDelay", void 0);
__decorate([
r$1()
], MenuItem.prototype, "submenuCloseDelay", void 0);
__decorate([
r$1()
], MenuItem.prototype, "focusable", void 0);
__decorate([
watch("submenuOpen")
], MenuItem.prototype, "onOpenChange", null);
MenuItem = __decorate([
t$2("mdui-menu-item")
], MenuItem);
const menuStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-extra-small);position:relative;display:block;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);min-width:7rem;max-width:17.5rem;padding-top:.5rem;padding-bottom:.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}::slotted(mdui-divider){margin-top:.5rem;margin-bottom:.5rem}`;
let Menu = class Menu2 extends MduiElement {
constructor() {
super(...arguments);
this.dense = false;
this.submenuTrigger = "click hover";
this.submenuOpenDelay = 200;
this.submenuCloseDelay = 200;
this.selectedKeys = [];
this.isInitial = true;
this.lastActiveItems = [];
this.definedController = new DefinedController(this, {
relatedElements: ["mdui-menu-item"]
});
}
// 菜单项元素（包含子菜单中的菜单项）
get items() {
return $$1(this.childrenItems).find("mdui-menu-item").add(this.childrenItems).get();
}
// 菜单项元素（不包含已禁用的，包含子菜单中的菜单项）
get itemsEnabled() {
return this.items.filter((item) => !item.disabled);
}
// 当前菜单是否为单选
get isSingle() {
return this.selects === "single";
}
// 当前菜单是否为多选
get isMultiple() {
return this.selects === "multiple";
}
// 当前菜单是否可选择
get isSelectable() {
return this.isSingle || this.isMultiple;
}
// 当前菜单是否为子菜单
get isSubmenu() {
return !$$1(this).parent().length;
}
// 最深层级的子菜单中，最后交互过的 menu-item
get lastActiveItem() {
const index = this.lastActiveItems.length ? this.lastActiveItems.length - 1 : 0;
return this.lastActiveItems[index];
}
set lastActiveItem(item) {
const index = this.lastActiveItems.length ? this.lastActiveItems.length - 1 : 0;
this.lastActiveItems[index] = item;
}
async onSlotChange() {
await this.definedController.whenDefined();
this.items.forEach((item) => {
item.dense = this.dense;
item.selects = this.selects;
item.submenuTrigger = this.submenuTrigger;
item.submenuOpenDelay = this.submenuOpenDelay;
item.submenuCloseDelay = this.submenuCloseDelay;
});
}
async onSelectsChange() {
if (!this.isSelectable) {
this.setSelectedKeys([]);
} else if (this.isSingle) {
this.setSelectedKeys(this.selectedKeys.slice(0, 1));
}
await this.onSelectedKeysChange();
}
async onSelectedKeysChange() {
await this.definedController.whenDefined();
const values = this.itemsEnabled.filter((item) => this.selectedKeys.includes(item.key)).map((item) => item.value);
const value = this.isMultiple ? values : values[0] || void 0;
this.setValue(value);
if (!this.isInitial) {
this.emit("change");
}
}
async onValueChange() {
this.isInitial = !this.hasUpdated;
await this.definedController.whenDefined();
if (!this.isSelectable) {
this.updateSelected();
return;
}
const values = (this.isSingle ? [this.value] : (
// 多选时，传入的值可能是字符串（通过 attribute 属性设置）；或字符串数组（通过 property 属性设置）
isString(this.value) ? [this.value] : this.value
)).filter((i3) => i3);
if (!values.length) {
this.setSelectedKeys([]);
} else if (this.isSingle) {
const firstItem = this.itemsEnabled.find((item) => item.value === values[0]);
this.setSelectedKeys(firstItem ? [firstItem.key] : []);
} else if (this.isMultiple) {
this.setSelectedKeys(this.itemsEnabled.filter((item) => values.includes(item.value)).map((item) => item.key));
}
this.updateSelected();
this.updateFocusable();
}
/**
* 将焦点设置在当前元素上
*/
focus(options) {
if (this.lastActiveItem) {
this.focusOne(this.lastActiveItem, options);
}
}
/**
* 从当前元素中移除焦点
*/
blur() {
if (this.lastActiveItem) {
this.lastActiveItem.blur();
}
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
this.definedController.whenDefined().then(() => {
this.updateFocusable();
this.lastActiveItem = this.items.find((item) => item.focusable);
});
this.addEventListener("submenu-open", (e2) => {
const $parentItem = $$1(e2.target);
const submenuItemsEnabled = $parentItem.children("mdui-menu-item:not([disabled])").get();
const submenuLevel = $parentItem.parents("mdui-menu-item").length + 1;
if (submenuItemsEnabled.length) {
this.lastActiveItems[submenuLevel] = submenuItemsEnabled[0];
this.updateFocusable();
this.focusOne(this.lastActiveItems[submenuLevel]);
}
});
this.addEventListener("submenu-close", (e2) => {
const $parentItem = $$1(e2.target);
const submenuLevel = $parentItem.parents("mdui-menu-item").length + 1;
if (this.lastActiveItems.length - 1 === submenuLevel) {
this.lastActiveItems.pop();
this.updateFocusable();
if (this.lastActiveItems[submenuLevel - 1]) {
this.focusOne(this.lastActiveItems[submenuLevel - 1]);
}
}
});
}
render() {
return ke`
`;
}
setSelectedKeys(selectedKeys) {
if (!arraysEqualIgnoreOrder(this.selectedKeys, selectedKeys)) {
this.selectedKeys = selectedKeys;
}
}
setValue(value) {
if (this.isSingle || isUndefined(this.value) || isUndefined(value)) {
this.value = value;
} else if (!arraysEqualIgnoreOrder(this.value, value)) {
this.value = value;
}
}
// 获取和指定菜单项同级的所有菜单项
getSiblingsItems(item, onlyEnabled = false) {
return $$1(item).parent().children(`mdui-menu-item${onlyEnabled ? ":not([disabled])" : ""}`).get();
}
// 更新 menu-item 的可聚焦状态
updateFocusable() {
if (this.lastActiveItem) {
this.items.forEach((item) => {
item.focusable = item.key === this.lastActiveItem.key;
});
return;
}
if (!this.selectedKeys.length) {
this.itemsEnabled.forEach((item, index) => {
item.focusable = !index;
});
return;
}
if (this.isSingle) {
this.items.forEach((item) => {
item.focusable = this.selectedKeys.includes(item.key);
});
return;
}
if (this.isMultiple) {
const focusableItem = this.items.find((item) => item.focusable);
if (!(focusableItem == null ? void 0 : focusableItem.key) || !this.selectedKeys.includes(focusableItem.key)) {
this.itemsEnabled.filter((item) => this.selectedKeys.includes(item.key)).forEach((item, index) => item.focusable = !index);
}
}
}
updateSelected() {
this.items.forEach((item) => {
item.selected = this.selectedKeys.includes(item.key);
});
}
// 切换一个菜单项的选中状态
selectOne(item) {
if (this.isMultiple) {
const selectedKeys = [...this.selectedKeys];
if (selectedKeys.includes(item.key)) {
selectedKeys.splice(selectedKeys.indexOf(item.key), 1);
} else {
selectedKeys.push(item.key);
}
this.setSelectedKeys(selectedKeys);
}
if (this.isSingle) {
if (this.selectedKeys.includes(item.key)) {
this.setSelectedKeys([]);
} else {
this.setSelectedKeys([item.key]);
}
}
this.isInitial = false;
this.updateSelected();
}
// 使一个 menu-item 可聚焦
async focusableOne(item) {
this.items.forEach((_item) => _item.focusable = _item.key === item.key);
await delay();
}
// 聚焦一个 menu-item
focusOne(item, options) {
item.focus(options);
}
async onClick(event) {
if (!this.definedController.isDefined()) {
return;
}
if (this.isSubmenu) {
return;
}
if (event.button) {
return;
}
const target = event.target;
const item = target.closest("mdui-menu-item");
if (!item || item.disabled) {
return;
}
this.lastActiveItem = item;
if (this.isSelectable && item.value) {
this.selectOne(item);
}
await this.focusableOne(item);
this.focusOne(item);
}
async onKeyDown(event) {
if (!this.definedController.isDefined()) {
return;
}
if (this.isSubmenu) {
return;
}
const item = event.target;
if (event.key === "Enter") {
event.preventDefault();
item.click();
}
if (event.key === " ") {
event.preventDefault();
if (this.isSelectable && item.value) {
this.selectOne(item);
await this.focusableOne(item);
this.focusOne(item);
}
}
if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
const items = this.getSiblingsItems(item, true);
const activeItem = items.find((item2) => item2.focusable);
let index = activeItem ? items.indexOf(activeItem) : 0;
if (items.length > 0) {
event.preventDefault();
if (event.key === "ArrowDown") {
index++;
} else if (event.key === "ArrowUp") {
index--;
} else if (event.key === "Home") {
index = 0;
} else if (event.key === "End") {
index = items.length - 1;
}
if (index < 0) {
index = items.length - 1;
}
if (index > items.length - 1) {
index = 0;
}
this.lastActiveItem = items[index];
await this.focusableOne(items[index]);
this.focusOne(items[index]);
return;
}
}
}
};
Menu.styles = [componentStyle, menuStyle];
__decorate([
n$2({ reflect: true })
// eslint-disable-next-line prettier/prettier
], Menu.prototype, "selects", void 0);
__decorate([
n$2()
], Menu.prototype, "value", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Menu.prototype, "dense", void 0);
__decorate([
n$2({ reflect: true, attribute: "submenu-trigger" })
], Menu.prototype, "submenuTrigger", void 0);
__decorate([
n$2({ type: Number, reflect: true, attribute: "submenu-open-delay" })
], Menu.prototype, "submenuOpenDelay", void 0);
__decorate([
n$2({ type: Number, reflect: true, attribute: "submenu-close-delay" })
], Menu.prototype, "submenuCloseDelay", void 0);
__decorate([
r$1()
], Menu.prototype, "selectedKeys", void 0);
__decorate([
o$1({ flatten: true, selector: "mdui-menu-item" })
], Menu.prototype, "childrenItems", void 0);
__decorate([
watch("dense"),
watch("selects"),
watch("submenuTrigger"),
watch("submenuOpenDelay"),
watch("submenuCloseDelay")
], Menu.prototype, "onSlotChange", null);
__decorate([
watch("selects", true)
], Menu.prototype, "onSelectsChange", null);
__decorate([
watch("selectedKeys", true)
], Menu.prototype, "onSelectedKeysChange", null);
__decorate([
watch("value")
], Menu.prototype, "onValueChange", null);
Menu = __decorate([
t$2("mdui-menu")
], Menu);
const navigationBarItemStyle = i$3`:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;flex:1;overflow:hidden;min-width:3rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding-top:.75rem;padding-bottom:.75rem}.container:not(.initial){transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}mdui-ripple{z-index:1;left:50%;transform:translateX(-50%);width:4rem;height:2rem;margin-top:.75rem;border-radius:var(--mdui-shape-corner-full)}mdui-ripple:not(.initial){transition:margin-top var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);height:2rem;width:2rem}:not(.initial) .indicator{transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:not(.initial) .label{transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear)}:host(:not([active])) mdui-ripple.label-visibility-selected,mdui-ripple.label-visibility-unlabeled{margin-top:1.5rem}.container.label-visibility-unlabeled,:host(:not([active])) .container.label-visibility-selected{padding-top:1.5rem;padding-bottom:0}.container.label-visibility-unlabeled .label,:host(:not([active])) .container.label-visibility-selected .label{opacity:0}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:4rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`;
let NavigationBarItem = class NavigationBarItem2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
constructor() {
super(...arguments);
this.isInitial = true;
this.active = false;
this.disabled = false;
this.key = uniqueId();
this.rippleRef = ii();
this.hasSlotController = new HasSlotController(this, "active-icon");
}
get rippleElement() {
return this.rippleRef.value;
}
get rippleDisabled() {
return this.disabled;
}
get focusElement() {
var _a2;
return this.href ? (_a2 = this.renderRoot) == null ? void 0 : _a2.querySelector("._a") : this;
}
get focusDisabled() {
return this.disabled;
}
render() {
const labelVisibilityClassName = cc({
"label-visibility-selected": this.labelVisibility === "selected",
"label-visibility-labeled": this.labelVisibility === "labeled",
"label-visibility-unlabeled": this.labelVisibility === "unlabeled",
initial: this.isInitial
});
const className2 = cc([
{
container: true,
"has-active-icon": this.activeIcon || this.hasSlotController.test("active-icon")
},
labelVisibilityClassName
]);
return ke`
${this.href ? this.renderAnchor({
part: "container",
className: className2,
content: this.renderInner()
}) : ke`
${this.renderInner()}
`}`;
}
renderInner() {
return ke`
${this.activeIcon ? ke`` : nothingTemplate}${this.icon ? ke`` : nothingTemplate}
`;
}
};
NavigationBarItem.styles = [
componentStyle,
navigationBarItemStyle
];
__decorate([
n$2({ reflect: true })
], NavigationBarItem.prototype, "icon", void 0);
__decorate([
n$2({ reflect: true, attribute: "active-icon" })
], NavigationBarItem.prototype, "activeIcon", void 0);
__decorate([
n$2({ reflect: true })
], NavigationBarItem.prototype, "value", void 0);
__decorate([
r$1()
], NavigationBarItem.prototype, "labelVisibility", void 0);
__decorate([
r$1()
], NavigationBarItem.prototype, "isInitial", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationBarItem.prototype, "active", void 0);
__decorate([
r$1()
], NavigationBarItem.prototype, "disabled", void 0);
NavigationBarItem = __decorate([
t$2("mdui-navigation-bar-item")
], NavigationBarItem);
const navigationBarStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;overflow:hidden;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition-property:transform;transition-duration:var(--mdui-motion-duration-long2);transition-timing-function:var(--mdui-motion-easing-emphasized);height:5rem;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]){transform:translateY(5.625rem);transition-duration:var(--mdui-motion-duration-short4)}`;
let NavigationBar = class NavigationBar2 extends ScrollBehaviorMixin(LayoutItemBase) {
constructor() {
super(...arguments);
this.hide = false;
this.labelVisibility = "auto";
this.activeKey = 0;
this.isInitial = true;
this.definedController = new DefinedController(this, {
relatedElements: ["mdui-navigation-bar-item"]
});
}
get scrollPaddingPosition() {
return "bottom";
}
get layoutPlacement() {
return "bottom";
}
async onActiveKeyChange() {
await this.definedController.whenDefined();
const item = this.items.find((item2) => item2.key === this.activeKey);
this.value = item == null ? void 0 : item.value;
if (!this.isInitial) {
this.emit("change");
}
}
async onValueChange() {
this.isInitial = !this.hasUpdated;
await this.definedController.whenDefined();
const item = this.items.find((item2) => item2.value === this.value);
this.activeKey = (item == null ? void 0 : item.key) ?? 0;
this.updateItems();
}
async onLabelVisibilityChange() {
await this.definedController.whenDefined();
this.updateItems();
}
firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
this.addEventListener("transitionend", (event) => {
if (event.target === this) {
this.emit(this.hide ? "hidden" : "shown");
}
});
}
render() {
return ke`
`;
}
/**
* 滚动行为
* 当前仅支持 hide 这一个行为，所以不做行为类型判断
*/
runScrollThreshold(isScrollingUp) {
if (!isScrollingUp && !this.hide) {
const eventProceeded = this.emit("hide", { cancelable: true });
if (eventProceeded) {
this.hide = true;
}
}
if (isScrollingUp && this.hide) {
const eventProceeded = this.emit("show", { cancelable: true });
if (eventProceeded) {
this.hide = false;
}
}
}
onClick(event) {
if (event.button) {
return;
}
const target = event.target;
const item = target.closest("mdui-navigation-bar-item");
if (!item) {
return;
}
this.activeKey = item.key;
this.isInitial = false;
this.updateItems();
}
// 更新
的状态
updateItems() {
const items = this.items;
const labelVisibility = this.labelVisibility === "auto" ? items.length <= 3 ? "labeled" : "selected" : this.labelVisibility;
items.forEach((item) => {
item.active = this.activeKey === item.key;
item.labelVisibility = labelVisibility;
item.isInitial = this.isInitial;
});
}
async onSlotChange() {
await this.definedController.whenDefined();
this.updateItems();
}
};
NavigationBar.styles = [
componentStyle,
navigationBarStyle
];
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationBar.prototype, "hide", void 0);
__decorate([
n$2({ reflect: true, attribute: "label-visibility" })
], NavigationBar.prototype, "labelVisibility", void 0);
__decorate([
n$2({ reflect: true })
], NavigationBar.prototype, "value", void 0);
__decorate([
n$2({ reflect: true, attribute: "scroll-behavior" })
], NavigationBar.prototype, "scrollBehavior", void 0);
__decorate([
r$1()
], NavigationBar.prototype, "activeKey", void 0);
__decorate([
o$1({
selector: "mdui-navigation-bar-item",
flatten: true
})
], NavigationBar.prototype, "items", void 0);
__decorate([
watch("activeKey", true)
], NavigationBar.prototype, "onActiveKeyChange", null);
__decorate([
watch("value")
], NavigationBar.prototype, "onValueChange", null);
__decorate([
watch("labelVisibility", true)
], NavigationBar.prototype, "onLabelVisibilityChange", null);
NavigationBar = __decorate([
t$2("mdui-navigation-bar")
], NavigationBar);
const breakpoint = (width) => {
const window2 = getWindow$1();
const document2 = getDocument();
const computedStyle = window2.getComputedStyle(document2.documentElement);
const containerWidth = isElement(width) ? $$1(width).innerWidth() : isNumber(width) ? width : $$1(window2).innerWidth();
const getBreakpointValue = (breakpoint2) => {
const width2 = computedStyle.getPropertyValue(`--mdui-breakpoint-${breakpoint2}`).toLowerCase();
return parseFloat(width2);
};
const getNextBreakpoint = (breakpoint2) => {
switch (breakpoint2) {
case "xs":
return "sm";
case "sm":
return "md";
case "md":
return "lg";
case "lg":
return "xl";
case "xl":
return "xxl";
}
};
return {
/**
* 当前宽度是否大于指定断点值
* @param breakpoint
*/
up(breakpoint2) {
return containerWidth >= getBreakpointValue(breakpoint2);
},
/**
* 当前宽度是否小于指定断点值
* @param breakpoint
*/
down(breakpoint2) {
return containerWidth < getBreakpointValue(breakpoint2);
},
/**
* 当前宽度是否在指定断点值内
* @param breakpoint
*/
only(breakpoint2) {
if (breakpoint2 === "xxl") {
return this.up(breakpoint2);
} else {
return this.up(breakpoint2) && this.down(getNextBreakpoint(breakpoint2));
}
},
/**
* 当前宽度是否不在指定断点值内
* @param breakpoint
*/
not(breakpoint2) {
return !this.only(breakpoint2);
},
/**
* 当前宽度是否在指定断点值之间
* @param startBreakpoint
* @param endBreakpoint
* @returns
*/
between(startBreakpoint, endBreakpoint) {
return this.up(startBreakpoint) && this.down(endBreakpoint);
}
};
};
const style$6 = i$3`:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]){left:0}:host([contained]){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;max-width:80%;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`;
let NavigationDrawer = class NavigationDrawer2 extends LayoutItemBase {
constructor() {
super(...arguments);
this.open = false;
this.modal = false;
this.closeOnEsc = false;
this.closeOnOverlayClick = false;
this.placement = "left";
this.contained = false;
this.mobile = false;
this.overlayRef = ii();
this.panelRef = ii();
this.definedController = new DefinedController(this, {
needDomReady: true
});
}
get layoutPlacement() {
return this.placement;
}
get lockTarget() {
return this.contained || this.isParentLayout ? this.parentElement : document.documentElement;
}
get isModal() {
return this.mobile || this.modal;
}
// contained 变更后，修改监听尺寸变化的元素。为 true 时，监听父元素；为 false 时，监听 body
async onContainedChange() {
var _a2;
await this.definedController.whenDefined();
(_a2 = this.observeResize) == null ? void 0 : _a2.unobserve();
this.observeResize = observeResize(this.contained ? this.parentElement : document.documentElement, () => {
const target = this.contained ? this.parentElement : void 0;
this.mobile = breakpoint(target).down("md");
if (this.isParentLayout) {
this.layoutManager.updateLayout(this, {
width: this.isModal ? 0 : void 0
});
}
});
}
onPlacementChange() {
if (this.isParentLayout) {
this.layoutManager.updateLayout(this);
}
}
async onMobileChange() {
if (!this.open || this.isParentLayout || this.contained) {
return;
}
await this.definedController.whenDefined();
if (this.isModal) {
lockScreen(this, this.lockTarget);
await this.getLockTargetAnimate(false, 0);
} else {
unlockScreen(this, this.lockTarget);
await this.getLockTargetAnimate(true, 0);
}
}
async onOpenChange() {
let panel = this.panelRef.value;
let overlay = this.overlayRef.value;
const isRight = this.placement === "right";
const easingLinear = getEasing(this, "linear");
const easingEmphasized = getEasing(this, "emphasized");
const setLayoutTransition = (duration, easing) => {
$$1(this.layoutManager.getItemsAndMain()).css("transition", isNull(duration) ? null : `all ${duration}ms ${easing}`);
};
const stopOldAnimations = async () => {
const elements = [];
if (this.isModal) {
elements.push(overlay, panel);
} else if (!this.isParentLayout) {
elements.push(this.lockTarget);
}
if (this.isParentLayout) {
const layoutItems = this.layoutManager.getItemsAndMain();
const layoutIndex = layoutItems.indexOf(this);
elements.push(...layoutItems.slice(layoutIndex));
}
if (!this.isModal && !elements.includes(this)) {
elements.push(this);
}
await Promise.all(elements.map((element) => stopAnimations(element)));
};
if (this.open) {
const hasUpdated = this.hasUpdated;
if (!hasUpdated) {
await this.updateComplete;
panel = this.panelRef.value;
overlay = this.overlayRef.value;
}
if (hasUpdated) {
const eventProceeded = this.emit("open", { cancelable: true });
if (!eventProceeded) {
return;
}
}
await this.definedController.whenDefined();
this.style.display = "block";
this.originalTrigger = document.activeElement;
if (this.isModal) {
this.modalHelper.activate();
if (!this.contained) {
lockScreen(this, this.lockTarget);
}
}
await stopOldAnimations();
requestAnimationFrame(() => {
const autoFocusTarget = this.querySelector("[autofocus]");
if (autoFocusTarget) {
autoFocusTarget.focus({ preventScroll: true });
} else {
panel.focus({ preventScroll: true });
}
});
const duration = getDuration(this, "long2");
const animations = [];
if (this.isModal) {
animations.push(animateTo(overlay, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], {
duration: hasUpdated ? duration : 0,
easing: easingLinear
}));
} else if (!this.isParentLayout) {
animations.push(this.getLockTargetAnimate(true, hasUpdated ? duration : 0));
}
if (this.isParentLayout && hasUpdated) {
setLayoutTransition(duration, easingEmphasized);
this.layoutManager.updateLayout(this);
}
animations.push(animateTo(this.isModal ? panel : this, [
{ transform: `translateX(${isRight ? "" : "-"}100%)` },
{ transform: "translateX(0)" }
], {
duration: hasUpdated ? duration : 0,
easing: easingEmphasized
}));
await Promise.all(animations);
if (!this.open) {
return;
}
if (this.isParentLayout && hasUpdated) {
setLayoutTransition(null);
}
if (hasUpdated) {
this.emit("opened");
}
} else if (this.hasUpdated) {
const eventProceeded = this.emit("close", { cancelable: true });
if (!eventProceeded) {
return;
}
await this.definedController.whenDefined();
if (this.isModal) {
this.modalHelper.deactivate();
}
await stopOldAnimations();
const duration = getDuration(this, "short4");
const animations = [];
if (this.isModal) {
animations.push(animateTo(overlay, [{ opacity: 1 }, { opacity: 0 }], {
duration,
easing: easingLinear
}));
} else if (!this.isParentLayout) {
animations.push(this.getLockTargetAnimate(false, duration));
}
if (this.isParentLayout) {
setLayoutTransition(duration, easingEmphasized);
this.layoutManager.updateLayout(this, { width: 0 });
}
animations.push(animateTo(this.isModal ? panel : this, [
{ transform: "translateX(0)" },
{ transform: `translateX(${isRight ? "" : "-"}100%)` }
], { duration, easing: easingEmphasized }));
await Promise.all(animations);
if (this.open) {
return;
}
if (this.isParentLayout) {
setLayoutTransition(null);
}
this.style.display = "none";
if (this.isModal && !this.contained) {
unlockScreen(this, this.lockTarget);
}
const trigger = this.originalTrigger;
if (isFunction(trigger == null ? void 0 : trigger.focus)) {
setTimeout(() => trigger.focus());
}
this.emit("closed");
}
}
connectedCallback() {
super.connectedCallback();
this.modalHelper = new Modal(this);
}
disconnectedCallback() {
var _a2;
super.disconnectedCallback();
unlockScreen(this, this.lockTarget);
(_a2 = this.observeResize) == null ? void 0 : _a2.unobserve();
}
firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
this.addEventListener("keydown", (event) => {
if (this.open && this.closeOnEsc && event.key === "Escape" && this.isModal) {
event.stopPropagation();
this.open = false;
}
});
}
render() {
return ke`${nn(this.isModal, () => ke``)}`;
}
onOverlayClick() {
this.emit("overlay-click");
if (this.closeOnOverlayClick) {
this.open = false;
}
}
getLockTargetAnimate(open2, duration) {
const paddingName = this.placement === "right" ? "paddingRight" : "paddingLeft";
const panelWidth = $$1(this.panelRef.value).innerWidth() + "px";
return animateTo(this.lockTarget, [
{ [paddingName]: open2 ? 0 : panelWidth },
{ [paddingName]: open2 ? panelWidth : 0 }
], {
duration,
easing: getEasing(this, "emphasized"),
fill: "forwards"
});
}
};
NavigationDrawer.styles = [componentStyle, style$6];
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationDrawer.prototype, "open", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationDrawer.prototype, "modal", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "close-on-esc"
})
], NavigationDrawer.prototype, "closeOnEsc", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "close-on-overlay-click"
})
], NavigationDrawer.prototype, "closeOnOverlayClick", void 0);
__decorate([
n$2({ reflect: true })
// eslint-disable-next-line prettier/prettier
], NavigationDrawer.prototype, "placement", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationDrawer.prototype, "contained", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationDrawer.prototype, "mobile", void 0);
__decorate([
watch("contained")
], NavigationDrawer.prototype, "onContainedChange", null);
__decorate([
watch("placement", true)
], NavigationDrawer.prototype, "onPlacementChange", null);
__decorate([
watch("mobile", true),
watch("modal", true)
], NavigationDrawer.prototype, "onMobileChange", null);
__decorate([
watch("open")
], NavigationDrawer.prototype, "onOpenChange", null);
NavigationDrawer = __decorate([
t$2("mdui-navigation-drawer")
], NavigationDrawer);
const navigationRailStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;border-radius:0 var(--shape-corner) var(--shape-corner) 0;z-index:var(--z-index);width:5rem;background-color:rgb(var(--mdui-color-surface));padding:.375rem .75rem}:host([contained]){position:absolute}:host([divider]){border-right:.0625rem solid rgb(var(--mdui-color-surface-variant));width:5.0625rem}:host([placement=right]){left:initial;right:0;border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host([placement=right][divider]){border-right:none;border-left:.0625rem solid rgb(var(--mdui-color-surface-variant))}.bottom,.items,.top{display:flex;flex-direction:column;align-items:center;width:100%}.top{margin-bottom:1.75rem}.bottom{margin-top:1.75rem}::slotted([slot=bottom]),::slotted([slot=top]),::slotted(mdui-navigation-rail-item){margin-top:.375rem;margin-bottom:.375rem}:host([alignment=start]) .top-spacer{flex-grow:0}:host([alignment=start]) .bottom-spacer{flex-grow:1}:host([alignment=end]) .top-spacer{flex-grow:1}:host([alignment=end]) .bottom-spacer{flex-grow:0}:host([alignment=center]){justify-content:center}:host([alignment=center]) .bottom,:host([alignment=center]) .top{position:absolute}:host([alignment=center]) .top{top:.375rem}:host([alignment=center]) .bottom{bottom:.375rem}`;
let NavigationRail = class NavigationRail2 extends LayoutItemBase {
constructor() {
super(...arguments);
this.placement = "left";
this.alignment = "start";
this.contained = false;
this.divider = false;
this.activeKey = 0;
this.hasSlotController = new HasSlotController(this, "top", "bottom");
this.definedController = new DefinedController(this, {
relatedElements: ["mdui-navigation-rail-item"]
});
this.isInitial = true;
}
get layoutPlacement() {
return this.placement;
}
get parentTarget() {
return this.contained || this.isParentLayout ? this.parentElement : document.body;
}
get isRight() {
return this.placement === "right";
}
get paddingValue() {
return ["fixed", "absolute"].includes($$1(this).css("position")) ? this.offsetWidth : void 0;
}
async onActiveKeyChange() {
await this.definedController.whenDefined();
const item = this.items.find((item2) => item2.key === this.activeKey);
this.value = item == null ? void 0 : item.value;
if (!this.isInitial) {
this.emit("change");
}
}
async onValueChange() {
this.isInitial = !this.hasUpdated;
await this.definedController.whenDefined();
const item = this.items.find((item2) => item2.value === this.value);
this.activeKey = (item == null ? void 0 : item.key) ?? 0;
this.updateItems();
}
async onContainedChange() {
if (this.isParentLayout) {
return;
}
await this.definedController.whenDefined();
$$1(document.body).css({
paddingLeft: this.contained || this.isRight ? null : this.paddingValue,
paddingRight: this.contained || !this.isRight ? null : this.paddingValue
});
$$1(this.parentElement).css({
paddingLeft: this.contained && !this.isRight ? this.paddingValue : null,
paddingRight: this.contained && this.isRight ? this.paddingValue : null
});
}
async onPlacementChange() {
var _a2;
await this.definedController.whenDefined();
(_a2 = this.layoutManager) == null ? void 0 : _a2.updateLayout(this);
this.items.forEach((item) => {
item.placement = this.placement;
});
if (!this.isParentLayout) {
$$1(this.parentTarget).css({
paddingLeft: this.isRight ? null : this.paddingValue,
paddingRight: this.isRight ? this.paddingValue : null
});
}
}
connectedCallback() {
super.connectedCallback();
if (!this.isParentLayout) {
this.definedController.whenDefined().then(() => {
$$1(this.parentTarget).css({
paddingLeft: this.isRight ? null : this.paddingValue,
paddingRight: this.isRight ? this.paddingValue : null
});
});
}
}
disconnectedCallback() {
super.disconnectedCallback();
if (!this.isParentLayout && this.definedController.isDefined()) {
$$1(this.parentTarget).css({
paddingLeft: this.isRight ? void 0 : null,
paddingRight: this.isRight ? null : void 0
});
}
}
render() {
const hasTopSlot = this.hasSlotController.test("top");
const hasBottomSlot = this.hasSlotController.test("bottom");
return ke`${nn(hasTopSlot, () => ke``)} ${nn(hasBottomSlot, () => ke``)}`;
}
onClick(event) {
if (event.button) {
return;
}
const target = event.target;
const item = target.closest("mdui-navigation-rail-item");
if (!item) {
return;
}
this.activeKey = item.key;
this.isInitial = false;
this.updateItems();
}
updateItems() {
this.items.forEach((item) => {
item.active = this.activeKey === item.key;
item.placement = this.placement;
item.isInitial = this.isInitial;
});
}
async onSlotChange() {
await this.definedController.whenDefined();
this.updateItems();
}
};
NavigationRail.styles = [
componentStyle,
navigationRailStyle
];
__decorate([
n$2({ reflect: true })
], NavigationRail.prototype, "value", void 0);
__decorate([
n$2({ reflect: true })
// eslint-disable-next-line prettier/prettier
], NavigationRail.prototype, "placement", void 0);
__decorate([
n$2({ reflect: true })
], NavigationRail.prototype, "alignment", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationRail.prototype, "contained", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationRail.prototype, "divider", void 0);
__decorate([
r$1()
], NavigationRail.prototype, "activeKey", void 0);
__decorate([
o$1({
selector: "mdui-navigation-rail-item",
flatten: true
})
], NavigationRail.prototype, "items", void 0);
__decorate([
watch("activeKey", true)
], NavigationRail.prototype, "onActiveKeyChange", null);
__decorate([
watch("value")
], NavigationRail.prototype, "onValueChange", null);
__decorate([
watch("contained", true)
], NavigationRail.prototype, "onContainedChange", null);
__decorate([
watch("placement", true)
], NavigationRail.prototype, "onPlacementChange", null);
NavigationRail = __decorate([
t$2("mdui-navigation-rail")
], NavigationRail);
const navigationRailItemStyle = i$3`:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;width:100%;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:3.5rem}.container:not(.initial){transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}mdui-ripple{z-index:1;width:3.5rem;height:2rem;border-radius:var(--mdui-shape-corner-full)}.container:not(.has-label)+mdui-ripple{height:3.5rem}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);height:2rem;width:2rem}:not(.initial) .indicator{transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.placement-right::slotted([slot=badge]){transform:translate(-50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.placement-right::slotted([slot=badge][variant=small]){transform:translate(-.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active-icon]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:not(.initial) .label{transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:3.5rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) :not(.has-label) .indicator{height:3.5rem}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`;
let NavigationRailItem = class NavigationRailItem2 extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
constructor() {
super(...arguments);
this.active = false;
this.isInitial = true;
this.placement = "left";
this.disabled = false;
this.key = uniqueId();
this.rippleRef = ii();
this.hasSlotController = new HasSlotController(this, "[default]", "active-icon");
}
get rippleElement() {
return this.rippleRef.value;
}
get rippleDisabled() {
return this.disabled;
}
get focusElement() {
var _a2;
return this.href ? (_a2 = this.renderRoot) == null ? void 0 : _a2.querySelector("._a") : this;
}
get focusDisabled() {
return this.disabled;
}
render() {
const hasDefaultSlot = this.hasSlotController.test("[default]");
const className2 = cc({
container: true,
"has-label": hasDefaultSlot,
"has-active-icon": this.activeIcon || this.hasSlotController.test("active-icon"),
initial: this.isInitial
});
return ke`${this.href ? this.renderAnchor({
part: "container",
className: className2,
content: this.renderInner(hasDefaultSlot)
}) : ke`${this.renderInner(hasDefaultSlot)}
`}`;
}
renderInner(hasDefaultSlot) {
return ke`${this.activeIcon ? ke`` : nothingTemplate}${this.icon ? ke`` : nothingTemplate}
${hasDefaultSlot ? ke`` : D}`;
}
};
NavigationRailItem.styles = [
componentStyle,
navigationRailItemStyle
];
__decorate([
n$2({ reflect: true })
], NavigationRailItem.prototype, "icon", void 0);
__decorate([
n$2({ reflect: true, attribute: "active-icon" })
], NavigationRailItem.prototype, "activeIcon", void 0);
__decorate([
n$2({ reflect: true })
], NavigationRailItem.prototype, "value", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], NavigationRailItem.prototype, "active", void 0);
__decorate([
r$1()
], NavigationRailItem.prototype, "isInitial", void 0);
__decorate([
r$1()
], NavigationRailItem.prototype, "placement", void 0);
__decorate([
r$1()
], NavigationRailItem.prototype, "disabled", void 0);
NavigationRailItem = __decorate([
t$2("mdui-navigation-rail-item")
], NavigationRailItem);
let IconCircle = class IconCircle2 extends h$1 {
render() {
return svgTag('');
}
};
IconCircle.styles = style$e;
IconCircle = __decorate([
t$2("mdui-icon-circle")
], IconCircle);
let IconRadioButtonUnchecked = class IconRadioButtonUnchecked2 extends h$1 {
render() {
return svgTag('');
}
};
IconRadioButtonUnchecked.styles = style$e;
IconRadioButtonUnchecked = __decorate([
t$2("mdui-icon-radio-button-unchecked")
], IconRadioButtonUnchecked);
const radioStyle = i$3`:host{position:relative;display:inline-flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none;border-radius:.125rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.icon{display:flex;position:absolute;font-size:1.5rem}:not(.initial) .icon{transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.unchecked-icon{transition-property:color;color:rgb(var(--mdui-color-on-surface-variant))}:host([focused]) .unchecked-icon,:host([hover]) .unchecked-icon,:host([pressed]) .unchecked-icon{color:rgb(var(--mdui-color-on-surface))}.checked-icon{opacity:0;transform:scale(.2);transition-property:color,opacity,transform;color:rgb(var(--mdui-color-primary))}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border-radius:50%;width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface))}.label:not(.initial){transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]) .checked-icon{opacity:1;transform:scale(.5)}i.invalid{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}i.invalid .icon{color:rgb(var(--mdui-color-error))}.label.invalid{color:rgb(var(--mdui-color-error))}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon,:host([group-disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label,:host([group-disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}`;
let Radio = class Radio2 extends RippleMixin(FocusableMixin(MduiElement)) {
constructor() {
super(...arguments);
this.value = "";
this.disabled = false;
this.checked = false;
this.invalid = false;
this.groupDisabled = false;
this.focusable = true;
this.isInitial = true;
this.rippleRef = ii();
}
get rippleElement() {
return this.rippleRef.value;
}
get rippleDisabled() {
return this.isDisabled();
}
get focusElement() {
return this;
}
get focusDisabled() {
return this.isDisabled() || !this.focusable;
}
onCheckedChange() {
this.emit("change");
}
firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
this.addEventListener("click", () => {
if (!this.isDisabled()) {
this.checked = true;
}
});
}
render() {
const className2 = Rt({
invalid: this.invalid,
initial: this.isInitial
});
return ke`${this.uncheckedIcon ? ke`` : ke``}${this.checkedIcon ? ke`` : ke``}`;
}
isDisabled() {
return this.disabled || this.groupDisabled;
}
};
Radio.styles = [componentStyle, radioStyle];
__decorate([
n$2({ reflect: true })
], Radio.prototype, "value", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Radio.prototype, "disabled", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], Radio.prototype, "checked", void 0);
__decorate([
n$2({ reflect: true, attribute: "unchecked-icon" })
], Radio.prototype, "uncheckedIcon", void 0);
__decorate([
n$2({ reflect: true, attribute: "checked-icon" })
], Radio.prototype, "checkedIcon", void 0);
__decorate([
r$1()
], Radio.prototype, "invalid", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "group-disabled"
})
], Radio.prototype, "groupDisabled", void 0);
__decorate([
r$1()
], Radio.prototype, "focusable", void 0);
__decorate([
r$1()
], Radio.prototype, "isInitial", void 0);
__decorate([
watch("checked", true)
], Radio.prototype, "onCheckedChange", null);
Radio = __decorate([
t$2("mdui-radio")
], Radio);
const radioGroupStyle = i$3`:host{display:inline-block}fieldset{border:none;padding:0;margin:0;min-width:0}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}`;
let RadioGroup = class RadioGroup2 extends MduiElement {
constructor() {
super(...arguments);
this.disabled = false;
this.name = "";
this.value = "";
this.defaultValue = "";
this.required = false;
this.invalid = false;
this.isInitial = true;
this.inputRef = ii();
this.formController = new FormController(this);
this.definedController = new DefinedController(this, {
relatedElements: ["mdui-radio"]
});
}
/**
* 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
*/
get validity() {
return this.inputRef.value.validity;
}
/**
* 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
*/
get validationMessage() {
return this.inputRef.value.validationMessage;
}
// 为了使 可以不是该组件的直接子元素，这里不用 @queryAssignedElements()
get items() {
return $$1(this).find("mdui-radio").get();
}
get itemsEnabled() {
return $$1(this).find("mdui-radio:not([disabled])").get();
}
async onValueChange() {
var _a2;
this.isInitial = false;
await this.definedController.whenDefined();
this.emit("input");
this.emit("change");
this.updateItems();
this.updateRadioFocusable();
await this.updateComplete;
const form = this.formController.getForm();
if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) {
this.invalid = false;
formResets.get(form).delete(this);
} else {
this.invalid = !this.inputRef.value.checkValidity();
}
}
async onInvalidChange() {
await this.definedController.whenDefined();
this.updateItems();
}
/**
* 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
*/
checkValidity() {
const valid = this.inputRef.value.checkValidity();
if (!valid) {
this.emit("invalid", {
bubbles: false,
cancelable: true,
composed: false
});
}
return valid;
}
/**
* 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
*
* 如果验证未通过，还会在组件上显示验证失败的提示。
*/
reportValidity() {
this.invalid = !this.inputRef.value.reportValidity();
if (this.invalid) {
const eventProceeded = this.emit("invalid", {
bubbles: false,
cancelable: true,
composed: false
});
if (!eventProceeded) {
this.inputRef.value.blur();
this.inputRef.value.focus();
}
}
return !this.invalid;
}
/**
* 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
*
* @param message 自定义的错误提示文本
*/
setCustomValidity(message) {
this.inputRef.value.setCustomValidity(message);
this.invalid = !this.inputRef.value.checkValidity();
}
render() {
return ke``;
}
// 更新 mdui-radio 的 checked 后，需要更新可聚焦状态
// 同一个 mdui-radio-group 中的多个 mdui-radio，仅有一个可聚焦
// 若有已选中的，则已选中的可聚焦；若没有已选中的，则第一个可聚焦
updateRadioFocusable() {
const items = this.items;
const itemChecked = items.find((item) => item.checked);
if (itemChecked) {
items.forEach((item) => {
item.focusable = item === itemChecked;
});
} else {
this.itemsEnabled.forEach((item, index) => {
item.focusable = !index;
});
}
}
async onClick(event) {
await this.definedController.whenDefined();
const target = event.target;
const item = target.closest("mdui-radio");
if (!item || item.disabled) {
return;
}
this.value = item.value;
await this.updateComplete;
item.focus();
}
/**
* 在内部的 `` 上按下按键时，在 `` 之间切换焦点
*/
async onKeyDown(event) {
if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
return;
}
event.preventDefault();
await this.definedController.whenDefined();
const items = this.itemsEnabled;
const itemChecked = items.find((item) => item.checked) ?? items[0];
const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
let index = items.indexOf(itemChecked) + incr;
if (index < 0) {
index = items.length - 1;
}
if (index > items.length - 1) {
index = 0;
}
this.value = items[index].value;
await this.updateComplete;
items[index].focus();
}
async onSlotChange() {
await this.definedController.whenDefined();
this.updateItems();
this.updateRadioFocusable();
}
/**
* slot 中的 mdui-radio 的 checked 变更时触发的事件
*/
onCheckedChange(event) {
event.stopPropagation();
}
// 更新 的状态
updateItems() {
this.items.forEach((item) => {
item.checked = item.value === this.value;
item.invalid = this.invalid;
item.groupDisabled = this.disabled;
item.isInitial = this.isInitial;
});
}
};
RadioGroup.styles = [
componentStyle,
radioGroupStyle
];
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], RadioGroup.prototype, "disabled", void 0);
__decorate([
n$2({ reflect: true })
], RadioGroup.prototype, "form", void 0);
__decorate([
n$2({ reflect: true })
], RadioGroup.prototype, "name", void 0);
__decorate([
n$2({ reflect: true })
], RadioGroup.prototype, "value", void 0);
__decorate([
defaultValue()
], RadioGroup.prototype, "defaultValue", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], RadioGroup.prototype, "required", void 0);
__decorate([
r$1()
], RadioGroup.prototype, "invalid", void 0);
__decorate([
watch("value", true)
], RadioGroup.prototype, "onValueChange", null);
__decorate([
watch("invalid", true),
watch("disabled")
], RadioGroup.prototype, "onInvalidChange", null);
RadioGroup = __decorate([
t$2("mdui-radio-group")
], RadioGroup);
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function* oo(o2, f2) {
if (void 0 !== o2) {
let i3 = 0;
for (const t2 of o2) yield f2(t2, i3++);
}
}
const sliderBaseStyle = i$3`:host{position:relative;display:block;width:100%;-webkit-tap-highlight-color:transparent;height:2.5rem;padding:0 1.25rem}label{position:relative;display:block;width:100%;height:100%}input[type=range]{position:absolute;inset:0;z-index:4;height:100%;cursor:pointer;opacity:0;appearance:none;width:calc(100% + 20rem * 2 / 16);margin:0 -1.25rem;padding:0 .75rem}:host([disabled]) input[type=range]{cursor:not-allowed}.track-active,.track-inactive{position:absolute;top:50%;height:.25rem;margin-top:-.125rem}.track-inactive{left:-.125rem;right:-.125rem;border-radius:var(--mdui-shape-corner-full);background-color:rgb(var(--mdui-color-surface-container-highest))}.invalid .track-inactive{background-color:rgba(var(--mdui-color-error),.12)}:host([disabled]) .track-inactive{background-color:rgba(var(--mdui-color-on-surface),.12)}.track-active{background-color:rgb(var(--mdui-color-primary))}.invalid .track-active{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .track-active{background-color:rgba(var(--mdui-color-on-surface),.38)}.handle{position:absolute;top:50%;transform:translate(-50%);cursor:pointer;z-index:2;width:2.5rem;height:2.5rem;margin-top:-1.25rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}.invalid .handle{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.handle .elevation,.handle::before{position:absolute;display:block;content:' ';left:.625rem;top:.625rem;width:1.25rem;height:1.25rem;border-radius:var(--mdui-shape-corner-full)}.handle .elevation{background-color:rgb(var(--mdui-color-primary));box-shadow:var(--mdui-elevation-level1)}.invalid .handle .elevation{background-color:rgb(var(--mdui-color-error))}:host([disabled]) .handle .elevation{background-color:rgba(var(--mdui-color-on-surface),.38);box-shadow:var(--mdui-elevation-level0)}.handle::before{background-color:rgb(var(--mdui-color-background))}.handle mdui-ripple{border-radius:var(--mdui-shape-corner-full)}.label{position:absolute;left:50%;transform:translateX(-50%) scale(0);transform-origin:center bottom;display:flex;align-items:center;justify-content:center;cursor:default;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none;transition:transform var(--mdui-motion-duration-short2) var(--mdui-motion-easing-standard);bottom:2.5rem;min-width:1.75rem;height:1.75rem;padding:.375rem .5rem;border-radius:var(--mdui-shape-corner-full);color:rgb(var(--mdui-color-on-primary));font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height);background-color:rgb(var(--mdui-color-primary))}.invalid .label{color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error))}.label::after{content:' ';position:absolute;z-index:-1;transform:rotate(45deg);width:.875rem;height:.875rem;bottom:-.125rem;background-color:rgb(var(--mdui-color-primary))}.invalid .label::after{background-color:rgb(var(--mdui-color-error))}.label-visible{transform:translateX(-50%) scale(1);transition:transform var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.tickmark{position:absolute;top:50%;transform:translate(-50%);width:.125rem;height:.125rem;margin-top:-.0625rem;border-radius:var(--mdui-shape-corner-full);background-color:rgba(var(--mdui-color-on-surface-variant),.38)}.invalid .tickmark{background-color:rgba(var(--mdui-color-error),.38)}.tickmark.active{background-color:rgba(var(--mdui-color-on-primary),.38)}.invalid .tickmark.active{background-color:rgba(var(--mdui-color-on-error),.38)}:host([disabled]) .tickmark{background-color:rgba(var(--mdui-color-on-surface),.38)}`;
class SliderBase extends RippleMixin(FocusableMixin(MduiElement)) {
constructor() {
super(...arguments);
this.min = 0;
this.max = 100;
this.step = 1;
this.tickmarks = false;
this.nolabel = false;
this.disabled = false;
this.name = "";
this.invalid = false;
this.labelVisible = false;
this.inputRef = ii();
this.trackActiveRef = ii();
this.labelFormatter = (value) => value.toString();
}
/**
* 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
*/
get validity() {
return this.inputRef.value.validity;
}
/**
* 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
*/
get validationMessage() {
return this.inputRef.value.validationMessage;
}
get rippleDisabled() {
return this.disabled;
}
get focusElement() {
return this.inputRef.value;
}
get focusDisabled() {
return this.disabled;
}
onDisabledChange() {
this.invalid = !this.inputRef.value.checkValidity();
}
/**
* 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
*/
checkValidity() {
const valid = this.inputRef.value.checkValidity();
if (!valid) {
this.emit("invalid", {
bubbles: false,
cancelable: true,
composed: false
});
}
return valid;
}
/**
* 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
*
* 如果验证未通过，还会在组件上显示验证失败的提示。
*/
reportValidity() {
this.invalid = !this.inputRef.value.reportValidity();
if (this.invalid) {
const eventProceeded = this.emit("invalid", {
bubbles: false,
cancelable: true,
composed: false
});
if (!eventProceeded) {
this.blur();
this.focus();
}
}
return !this.invalid;
}
/**
* 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
*
* @param message 自定义的错误提示文本
*/
setCustomValidity(message) {
this.inputRef.value.setCustomValidity(message);
this.invalid = !this.inputRef.value.checkValidity();
}
/**
* value 不在 min、max 或 step 的限制范围内时，修正 value 的值
*/
fixValue(value) {
const { min, max, step } = this;
value = Math.min(Math.max(value, min), max);
const steps = Math.round((value - min) / step);
let fixedValue = min + steps * step;
if (fixedValue > max) {
fixedValue -= step;
}
return fixedValue;
}
/**
* 获取候选值组成的数组
*/
getCandidateValues() {
return Array.from({ length: this.max - this.min + 1 }, (_2, index) => index + this.min).filter((value) => !((value - this.min) % this.step));
}
/**
* 渲染浮动标签
*/
renderLabel(value) {
return nn(!this.nolabel, () => ke`${this.labelFormatter(value)}
`);
}
onChange() {
this.emit("change");
}
}
SliderBase.styles = [
componentStyle,
sliderBaseStyle
];
__decorate([
n$2({ type: Number, reflect: true })
], SliderBase.prototype, "min", void 0);
__decorate([
n$2({ type: Number, reflect: true })
], SliderBase.prototype, "max", void 0);
__decorate([
n$2({ type: Number, reflect: true })
], SliderBase.prototype, "step", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], SliderBase.prototype, "tickmarks", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], SliderBase.prototype, "nolabel", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], SliderBase.prototype, "disabled", void 0);
__decorate([
n$2({ reflect: true })
], SliderBase.prototype, "form", void 0);
__decorate([
n$2({ reflect: true })
], SliderBase.prototype, "name", void 0);
__decorate([
r$1()
], SliderBase.prototype, "invalid", void 0);
__decorate([
r$1()
], SliderBase.prototype, "labelVisible", void 0);
__decorate([
n$2({ attribute: false })
], SliderBase.prototype, "labelFormatter", void 0);
__decorate([
watch("disabled", true)
], SliderBase.prototype, "onDisabledChange", null);
let RangeSlider = class RangeSlider2 extends SliderBase {
constructor() {
super(...arguments);
this.defaultValue = [];
this.currentHandle = "start";
this.rippleStartRef = ii();
this.rippleEndRef = ii();
this.handleStartRef = ii();
this.handleEndRef = ii();
this.formController = new FormController(this);
this._value = [];
this.getRippleIndex = () => {
if (this.hoverHandle) {
return this.hoverHandle === "start" ? 0 : 1;
}
return this.currentHandle === "start" ? 0 : 1;
};
}
/**
* 滑块的值，为数组格式，将于表单数据一起提交。
*
* **NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
*/
get value() {
return this._value;
}
set value(_value) {
const oldValue = [...this._value];
this._value = [this.fixValue(_value[0]), this.fixValue(_value[1])];
this.requestUpdate("value", oldValue);
this.updateComplete.then(() => {
var _a2;
this.updateStyle();
const form = this.formController.getForm();
if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) {
this.invalid = false;
formResets.get(form).delete(this);
} else {
this.invalid = !this.inputRef.value.checkValidity();
}
});
}
get rippleElement() {
return [this.rippleStartRef.value, this.rippleEndRef.value];
}
connectedCallback() {
super.connectedCallback();
if (!this.value.length) {
this.value = [this.min, this.max];
}
this.value[0] = this.fixValue(this.value[0]);
this.value[1] = this.fixValue(this.value[1]);
if (!this.defaultValue.length) {
this.defaultValue = [...this.value];
}
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
const getCurrentHandle = (event) => {
const $this = $$1(this);
const paddingLeft = parseFloat($this.css("padding-left"));
const paddingRight = parseFloat($this.css("padding-right"));
const percent = (event.offsetX - paddingLeft) / (this.clientWidth - paddingLeft - paddingRight);
const pointerValue = (this.max - this.min) * percent + this.min;
const middleValue = (this.value[1] - this.value[0]) / 2 + this.value[0];
return pointerValue > middleValue ? "end" : "start";
};
const onTouchStart = () => {
if (!this.disabled) {
this.labelVisible = true;
}
};
const onTouchEnd = () => {
if (!this.disabled) {
this.labelVisible = false;
}
};
this.addEventListener("touchstart", onTouchStart);
this.addEventListener("mousedown", onTouchStart);
this.addEventListener("touchend", onTouchEnd);
this.addEventListener("mouseup", onTouchEnd);
this.addEventListener("pointerdown", (event) => {
this.currentHandle = getCurrentHandle(event);
});
this.addEventListener("pointermove", (event) => {
const currentHandle = getCurrentHandle(event);
if (this.hoverHandle !== currentHandle) {
this.endHover(event);
this.hoverHandle = currentHandle;
this.startHover(event);
}
});
this.updateStyle();
}
/**
* 用于提供拖拽操作
* 用于提供 html5 自带的表单错误提示
*/
render() {
return ke``;
}
updateStyle() {
const getPercent = (value) => (value - this.min) / (this.max - this.min) * 100;
const startPercent = getPercent(this.value[0]);
const endPercent = getPercent(this.value[1]);
this.trackActiveRef.value.style.width = `${endPercent - startPercent}%`;
this.trackActiveRef.value.style.left = `${startPercent}%`;
this.handleStartRef.value.style.left = `${startPercent}%`;
this.handleEndRef.value.style.left = `${endPercent}%`;
}
onInput() {
const isStart = this.currentHandle === "start";
const value = parseFloat(this.inputRef.value.value);
const startValue = this.value[0];
const endValue = this.value[1];
const doInput = () => {
this.updateStyle();
};
if (isStart) {
if (value <= endValue) {
this.value = [value, endValue];
doInput();
} else if (startValue !== endValue) {
this.value = [endValue, endValue];
doInput();
}
} else {
if (value >= startValue) {
this.value = [startValue, value];
doInput();
} else if (startValue !== endValue) {
this.value = [startValue, startValue];
doInput();
}
}
}
};
RangeSlider.styles = [SliderBase.styles];
__decorate([
defaultValue()
], RangeSlider.prototype, "defaultValue", void 0);
__decorate([
r$1()
], RangeSlider.prototype, "currentHandle", void 0);
__decorate([
n$2({ type: Array, attribute: false })
], RangeSlider.prototype, "value", null);
RangeSlider = __decorate([
t$2("mdui-range-slider")
], RangeSlider);
const segmentedButtonStyle = i$3`:host{position:relative;display:inline-flex;flex-grow:1;flex-shrink:0;float:left;height:100%;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;border:.0625rem solid rgb(var(--mdui-color-outline))}.button{width:100%;padding:0 .75rem}:host([invalid]){color:rgb(var(--mdui-color-error));border-color:rgb(var(--mdui-color-error))}:host([invalid]) .button{background-color:rgb(var(--mdui-color-error-container))}:host([selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
--mdui-color-on-secondary-container
)}:host([disabled]),:host([group-disabled]){cursor:default;pointer-events:none;color:rgba(var(--mdui-color-on-surface),38%);border-color:rgba(var(--mdui-color-on-surface),12%)}:host([loading]){cursor:default;pointer-events:none}:host(:not(.mdui-segmented-button-first)){margin-left:-.0625rem}:host(.mdui-segmented-button-first){border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host(.mdui-segmented-button-last){border-radius:0 var(--shape-corner) var(--shape-corner) 0}.end-icon,.icon,.selected-icon{display:inline-flex;font-size:1.28571429em}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}mdui-circular-progress{width:1.125rem;height:1.125rem}:host([disabled]) mdui-circular-progress{opacity:.38}.label{display:inline-flex}.has-icon .label{padding-left:.5rem}.has-end-icon .label{padding-right:.5rem}`;
let SegmentedButton = class SegmentedButton2 extends ButtonBase {
constructor() {
super(...arguments);
this.selected = false;
this.invalid = false;
this.groupDisabled = false;
this.key = uniqueId();
this.rippleRef = ii();
this.hasSlotController = new HasSlotController(this, "[default]", "icon", "end-icon");
}
get rippleElement() {
return this.rippleRef.value;
}
get rippleDisabled() {
return this.isDisabled() || this.loading;
}
get focusDisabled() {
return this.isDisabled() || this.loading;
}
render() {
const className2 = cc({
button: true,
"has-icon": this.icon || this.selected || this.loading || this.hasSlotController.test("icon"),
"has-end-icon": this.endIcon || this.hasSlotController.test("end-icon")
});
return ke`${this.isButton() ? this.renderButton({
className: className2,
part: "button",
content: this.renderInner()
}) : this.isDisabled() || this.loading ? ke`${this.renderInner()}` : this.renderAnchor({
className: className2,
part: "button",
content: this.renderInner()
})}`;
}
isDisabled() {
return this.disabled || this.groupDisabled;
}
renderIcon() {
if (this.loading) {
return this.renderLoading();
}
if (this.selected) {
return ke`${this.selectedIcon ? ke`` : ke``}`;
}
return ke`${this.icon ? ke`` : nothingTemplate}`;
}
renderLabel() {
const hasLabel = this.hasSlotController.test("[default]");
if (!hasLabel) {
return nothingTemplate;
}
return ke``;
}
renderEndIcon() {
return ke`${this.endIcon ? ke`` : nothingTemplate}`;
}
renderInner() {
return [this.renderIcon(), this.renderLabel(), this.renderEndIcon()];
}
};
SegmentedButton.styles = [
ButtonBase.styles,
segmentedButtonStyle
];
__decorate([
n$2({ reflect: true })
], SegmentedButton.prototype, "icon", void 0);
__decorate([
n$2({ reflect: true, attribute: "end-icon" })
], SegmentedButton.prototype, "endIcon", void 0);
__decorate([
n$2({ reflect: true, attribute: "selected-icon" })
], SegmentedButton.prototype, "selectedIcon", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], SegmentedButton.prototype, "selected", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter
})
], SegmentedButton.prototype, "invalid", void 0);
__decorate([
n$2({
type: Boolean,
reflect: true,
converter: booleanConverter,
attribute: "group-disabled"
})
], SegmentedButton.prototype, "groupDisabled", void 0);
SegmentedButton = __decorate([
t$2("mdui-segmented-button")
], SegmentedButton);
const segmentedButtonGroupStyle = i$3`:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;vertical-align:middle;height:2.5rem;font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height);color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([full-width]){display:flex;flex-wrap:nowrap}input,select{position:absolute;width:100%;height:100%;padding:0;opacity:0;pointer-events:none}`;
let SegmentedButtonGroup = class SegmentedButtonGroup2 extends MduiElement {
constructor() {
super(...arguments);
this.fullWidth = false;
this.disabled = false;
this.required = false;
this.name = "";
this.value = "";
this.defaultValue = "";
this.selectedKeys = [];
this.invalid = false;
this.isInitial = true;
this.inputRef = ii();
this.formController = new FormController(this);
this.definedController = new DefinedController(this, {
relatedElements: ["mdui-segmented-button"]
});
}
/**
* 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
*/
get validity() {
return this.inputRef.value.validity;
}
/**
* 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
*/
get validationMessage() {
return this.inputRef.value.validationMessage;
}
// 为了使 可以不是该组件的直接子元素，这里不用 @queryAssignedElements()
get items() {
return $$1(this).find("mdui-segmented-button").get();
}
// 所有的子项元素（不包含已禁用的）
get itemsEnabled() {
return $$1(this).find("mdui-segmented-button:not([disabled])").get();
}
// 是否为单选
get isSingle() {
return this.selects === "single";
}
// 是否为多选
get isMultiple() {
return this.selects === "multiple";
}
// 是否可选择
get isSelectable() {
return this.isSingle || this.isMultiple;
}
async onSelectsChange() {
if (!this.isSelectable) {
this.setSelectedKeys([]);
} else if (this.isSingle) {
this.setSelectedKeys(this.selectedKeys.slice(0, 1));
}
await this.onSelectedKeysChange();
}
async onSelectedKeysChange() {
await this.definedController.whenDefined();
const values = this.itemsEnabled.filter((item) => this.selectedKeys.includes(item.key)).map((item) => item.value);
const value = this.isMultiple ? values : values[0] || "";
this.setValue(value);
if (!this.isInitial) {
this.emit("change");
}
}
async onValueChange() {
var _a2;
this.isInitial = !this.hasUpdated;
await this.definedController.whenDefined();
if (!this.isSelectable) {
this.updateItems();
return;
}
const values = (this.isSingle ? [this.value] : (
// 多选时，传入的值可能是字符串（通过 attribute 属性设置）；或字符串数组（通过 property 属性设置）
isString(this.value) ? [this.value] : this.value
)).filter((i3) => i3);
if (!values.length) {
this.setSelectedKeys([]);
} else if (this.isSingle) {
const firstItem = this.itemsEnabled.find((item) => item.value === values[0]);
this.setSelectedKeys(firstItem ? [firstItem.key] : []);
} else if (this.isMultiple) {
this.setSelectedKeys(this.itemsEnabled.filter((item) => values.includes(item.value)).map((item) => item.key));
}
this.updateItems();
if (!this.isInitial) {
const form = this.formController.getForm();
if (form && ((_a2 = formResets.get(form)) == null ? void 0 : _a2.has(this))) {
this.invalid = false;
formResets.get(form).delete(this);
} else {
this.invalid = !this.inputRef.value.checkValidity();
}
}
}
async onInvalidChange() {
await this.definedController.whenDefined();
this.updateItems();
}
connectedCallback() {
super.connectedCallback();
this.value = this.isMultiple && isString(this.value) ? this.value ? [this.value] : [] : this.value;
this.defaultValue = this.selects === "multiple" ? [] : "";
}
/**
* 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
*/
checkValidity() {
const valid = this.inputRef.value.checkValidity();
if (!valid) {
this.emit("invalid", {
bubbles: false,
cancelable: true,
composed: false
});
}
return valid;
}
/**
* 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
*
* 如果验证未通过，还会在组件上显示验证失败的提示。
*/
reportValidity() {
this.invalid = !this.inputRef.value.reportValidity();
if (this.invalid) {
const eventProceeded = this.emit("invalid", {
bubbles: false,
cancelable: true,
composed: false
});
if (!eventProceeded) {
this.inputRef.value.blur();
this.inputRef.value.focus();
}
}
return !this.invalid;
}
/**
* 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
*
* @param message 自定义的错误提示文本
*/
setCustomValidity(message) {
this.inputRef.value.setCustomValidity(message);
this.invalid = !this.inputRef.value.checkValidity();
}
render() {
return ke`${nn(this.isSelectable && this.isSingle, () => ke``)}${nn(this.isSelectable && this.isMultiple, () => ke``)}`;
}
// 切换一个元素的选中状态
selectOne(item) {
if (this.isMultiple) {
const selectedKeys = [...this.selectedKeys];
if (selectedKeys.includes(item.key)) {
selectedKeys.splice(selectedKeys.indexOf(item.key), 1);
} else {
selectedKeys.push(item.key);
}
this.setSelectedKeys(selectedKeys);
}
if (this.isSingle) {
if (this.selectedKeys.includes(item.key)) {
this.setSelectedKeys([]);
} else {
this.setSelectedKeys([item.key]);
}
}
this.isInitial = false;
this.updateItems();
}
async onClick(event) {
if (event.button) {
return;
}
await this.definedController.whenDefined();
const target = event.target;
const item = target.closest("mdui-segmented-button");
if (!item || item.disabled) {
return;
}
if (this.isSelectable && item.value) {
this.selectOne(item);
}
}
/**
* 在隐藏的 `` 或 `