261 lines
10 KiB
JavaScript
261 lines
10 KiB
JavaScript
import { jsx as h } from "react/jsx-runtime";
|
|
import g from "react";
|
|
import { o as u } from "./create-component-CVXl33PD.mjs";
|
|
import { _ as e, r as c, x as l, a as y, b as v, n, E as s, c as I } from "./class-map-CwiboTfb.mjs";
|
|
import { o as w } from "./query-assigned-elements-DUhez03i.mjs";
|
|
import { N as $, L as C, a as L } from "./item-CpL4zUlE.mjs";
|
|
import "./ripple-pQcEjR05.mjs";
|
|
import { a as R } from "./animation-DjClVFum.mjs";
|
|
import { i as p, u as k } from "./static-DdXEOlS4.mjs";
|
|
import { m as z } from "./delegate-BXi1gVeU.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const E = new Set(Object.values($));
|
|
let f = class extends c {
|
|
/** @export */
|
|
get items() {
|
|
return this.listController.items;
|
|
}
|
|
constructor() {
|
|
super(), this.listController = new C({
|
|
isItem: (t) => t.hasAttribute("md-list-item"),
|
|
getPossibleItems: () => this.slotItems,
|
|
isRtl: () => getComputedStyle(this).direction === "rtl",
|
|
deactivateItem: (t) => {
|
|
t.tabIndex = -1;
|
|
},
|
|
activateItem: (t) => {
|
|
t.tabIndex = 0;
|
|
},
|
|
isNavigableKey: (t) => E.has(t),
|
|
isActivatable: (t) => !t.disabled && t.type !== "text"
|
|
}), this.internals = // Cast needed for closure
|
|
this.attachInternals(), this.internals.role = "list", this.addEventListener("keydown", this.listController.handleKeydown);
|
|
}
|
|
render() {
|
|
return l`
|
|
<slot
|
|
@deactivate-items=${this.listController.onDeactivateItems}
|
|
@request-activation=${this.listController.onRequestActivation}
|
|
@slotchange=${this.listController.onSlotchange}>
|
|
</slot>
|
|
`;
|
|
}
|
|
/**
|
|
* Activates the next item in the list. If at the end of the list, the first
|
|
* item will be activated.
|
|
*
|
|
* @return The activated list item or `null` if there are no items.
|
|
*/
|
|
activateNextItem() {
|
|
return this.listController.activateNextItem();
|
|
}
|
|
/**
|
|
* Activates the previous item in the list. If at the start of the list, the
|
|
* last item will be activated.
|
|
*
|
|
* @return The activated list item or `null` if there are no items.
|
|
*/
|
|
activatePreviousItem() {
|
|
return this.listController.activatePreviousItem();
|
|
}
|
|
};
|
|
e([
|
|
w({ flatten: !0 })
|
|
], f.prototype, "slotItems", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const A = y`:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let d = class extends f {
|
|
};
|
|
d.styles = [A];
|
|
d = e([
|
|
v("md-list")
|
|
], d);
|
|
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const N = z(c);
|
|
class r extends N {
|
|
constructor() {
|
|
super(...arguments), this.disabled = !1, this.type = "text", this.isListItem = !0, this.href = "", this.target = "";
|
|
}
|
|
get isDisabled() {
|
|
return this.disabled && this.type !== "link";
|
|
}
|
|
willUpdate(t) {
|
|
this.href && (this.type = "link"), super.willUpdate(t);
|
|
}
|
|
render() {
|
|
return this.renderListItem(l`
|
|
<md-item>
|
|
<div slot="container">
|
|
${this.renderRipple()} ${this.renderFocusRing()}
|
|
</div>
|
|
<slot name="start" slot="start"></slot>
|
|
<slot name="end" slot="end"></slot>
|
|
${this.renderBody()}
|
|
</md-item>
|
|
`);
|
|
}
|
|
/**
|
|
* Renders the root list item.
|
|
*
|
|
* @param content the child content of the list item.
|
|
*/
|
|
renderListItem(t) {
|
|
const a = this.type === "link";
|
|
let o;
|
|
switch (this.type) {
|
|
case "link":
|
|
o = p`a`;
|
|
break;
|
|
case "button":
|
|
o = p`button`;
|
|
break;
|
|
default:
|
|
case "text":
|
|
o = p`li`;
|
|
break;
|
|
}
|
|
const b = this.type !== "text", x = a && this.target ? this.target : s;
|
|
return k`
|
|
<${o}
|
|
id="item"
|
|
tabindex="${this.isDisabled || !b ? -1 : 0}"
|
|
?disabled=${this.isDisabled}
|
|
role="listitem"
|
|
aria-selected=${this.ariaSelected || s}
|
|
aria-checked=${this.ariaChecked || s}
|
|
aria-expanded=${this.ariaExpanded || s}
|
|
aria-haspopup=${this.ariaHasPopup || s}
|
|
class="list-item ${I(this.getRenderClasses())}"
|
|
href=${this.href || s}
|
|
target=${x}
|
|
@focus=${this.onFocus}
|
|
>${t}</${o}>
|
|
`;
|
|
}
|
|
/**
|
|
* Handles rendering of the ripple element.
|
|
*/
|
|
renderRipple() {
|
|
return this.type === "text" ? s : l` <md-ripple
|
|
part="ripple"
|
|
for="item"
|
|
?disabled=${this.isDisabled}></md-ripple>`;
|
|
}
|
|
/**
|
|
* Handles rendering of the focus ring.
|
|
*/
|
|
renderFocusRing() {
|
|
return this.type === "text" ? s : l` <md-focus-ring
|
|
@visibility-changed=${this.onFocusRingVisibilityChanged}
|
|
part="focus-ring"
|
|
for="item"
|
|
inward></md-focus-ring>`;
|
|
}
|
|
onFocusRingVisibilityChanged(t) {
|
|
}
|
|
/**
|
|
* Classes applied to the list item root.
|
|
*/
|
|
getRenderClasses() {
|
|
return { disabled: this.isDisabled };
|
|
}
|
|
/**
|
|
* Handles rendering the headline and supporting text.
|
|
*/
|
|
renderBody() {
|
|
return l`
|
|
<slot></slot>
|
|
<slot name="overline" slot="overline"></slot>
|
|
<slot name="headline" slot="headline"></slot>
|
|
<slot name="supporting-text" slot="supporting-text"></slot>
|
|
<slot
|
|
name="trailing-supporting-text"
|
|
slot="trailing-supporting-text"></slot>
|
|
`;
|
|
}
|
|
onFocus() {
|
|
this.tabIndex === -1 && this.dispatchEvent(L());
|
|
}
|
|
focus() {
|
|
var t;
|
|
(t = this.listItemRoot) == null || t.focus();
|
|
}
|
|
}
|
|
r.shadowRootOptions = {
|
|
...c.shadowRootOptions,
|
|
delegatesFocus: !0
|
|
};
|
|
e([
|
|
n({ type: Boolean, reflect: !0 })
|
|
], r.prototype, "disabled", void 0);
|
|
e([
|
|
n({ reflect: !0 })
|
|
], r.prototype, "type", void 0);
|
|
e([
|
|
n({ type: Boolean, attribute: "md-list-item", reflect: !0 })
|
|
], r.prototype, "isListItem", void 0);
|
|
e([
|
|
n()
|
|
], r.prototype, "href", void 0);
|
|
e([
|
|
n()
|
|
], r.prototype, "target", void 0);
|
|
e([
|
|
R(".list-item")
|
|
], r.prototype, "listItemRoot", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const D = y`:host{display:flex;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let m = class extends r {
|
|
};
|
|
m.styles = [D];
|
|
m = e([
|
|
v("md-list-item")
|
|
], m);
|
|
const F = u({
|
|
react: g,
|
|
tagName: "md-list",
|
|
elementClass: d
|
|
}), Y = (i) => {
|
|
const { children: t, ...a } = i;
|
|
return /* @__PURE__ */ h(F, { ...a, children: t });
|
|
}, _ = u({
|
|
react: g,
|
|
tagName: "md-list-item",
|
|
elementClass: m
|
|
}), J = (i) => {
|
|
const { children: t, ...a } = i, o = i.type || "text";
|
|
return /* @__PURE__ */ h(_, { ...a, type: o, children: t });
|
|
};
|
|
export {
|
|
Y as List,
|
|
J as ListItem
|
|
};
|