635 lines
45 KiB
JavaScript
635 lines
45 KiB
JavaScript
import { jsx as k } from "react/jsx-runtime";
|
|
import I from "react";
|
|
import { r as L, _ as t, n as l, x as s, c as K, E as n, a as u, b as F } from "./class-map-CwiboTfb.mjs";
|
|
import "./elevation-Dg8ssDJC.mjs";
|
|
import "./ripple-pQcEjR05.mjs";
|
|
import { m as N } from "./delegate-BXi1gVeU.mjs";
|
|
import { o as G } from "./query-assigned-elements-DUhez03i.mjs";
|
|
import { a as R } from "./animation-DjClVFum.mjs";
|
|
import { r as U } from "./redispatch-event-taWUbWUt.mjs";
|
|
import { o as z } from "./create-component-CVXl33PD.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const j = N(L);
|
|
class p extends j {
|
|
/**
|
|
* Whether or not the primary ripple is disabled (defaults to `disabled`).
|
|
* Some chip actions such as links cannot be disabled.
|
|
*/
|
|
get rippleDisabled() {
|
|
return this.disabled || this.softDisabled;
|
|
}
|
|
constructor() {
|
|
super(), this.disabled = !1, this.softDisabled = !1, this.alwaysFocusable = !1, this.label = "", this.hasIcon = !1, this.addEventListener("click", this.handleClick.bind(this));
|
|
}
|
|
focus(e) {
|
|
this.disabled && !this.alwaysFocusable || super.focus(e);
|
|
}
|
|
render() {
|
|
return s`
|
|
<div class="container ${K(this.getContainerClasses())}">
|
|
${this.renderContainerContent()}
|
|
</div>
|
|
`;
|
|
}
|
|
updated(e) {
|
|
e.has("disabled") && e.get("disabled") !== void 0 && this.dispatchEvent(new Event("update-focus", { bubbles: !0 }));
|
|
}
|
|
getContainerClasses() {
|
|
return {
|
|
disabled: this.disabled || this.softDisabled,
|
|
"has-icon": this.hasIcon
|
|
};
|
|
}
|
|
renderContainerContent() {
|
|
return s`
|
|
${this.renderOutline()}
|
|
<md-focus-ring part="focus-ring" for=${this.primaryId}></md-focus-ring>
|
|
<md-ripple
|
|
for=${this.primaryId}
|
|
?disabled=${this.rippleDisabled}></md-ripple>
|
|
${this.renderPrimaryAction(this.renderPrimaryContent())}
|
|
`;
|
|
}
|
|
renderOutline() {
|
|
return s`<span class="outline"></span>`;
|
|
}
|
|
renderLeadingIcon() {
|
|
return s`<slot name="icon" @slotchange=${this.handleIconChange}></slot>`;
|
|
}
|
|
renderPrimaryContent() {
|
|
return s`
|
|
<span class="leading icon" aria-hidden="true">
|
|
${this.renderLeadingIcon()}
|
|
</span>
|
|
<span class="label">
|
|
<span class="label-text" id="label">
|
|
${this.label ? this.label : s`<slot></slot>`}
|
|
</span>
|
|
</span>
|
|
<span class="touch"></span>
|
|
`;
|
|
}
|
|
handleIconChange(e) {
|
|
const a = e.target;
|
|
this.hasIcon = a.assignedElements({ flatten: !0 }).length > 0;
|
|
}
|
|
handleClick(e) {
|
|
if (this.softDisabled || this.disabled && this.alwaysFocusable) {
|
|
e.stopImmediatePropagation(), e.preventDefault();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
p.shadowRootOptions = {
|
|
...L.shadowRootOptions,
|
|
delegatesFocus: !0
|
|
};
|
|
t([
|
|
l({ type: Boolean, reflect: !0 })
|
|
], p.prototype, "disabled", void 0);
|
|
t([
|
|
l({ type: Boolean, attribute: "soft-disabled", reflect: !0 })
|
|
], p.prototype, "softDisabled", void 0);
|
|
t([
|
|
l({ type: Boolean, attribute: "always-focusable" })
|
|
], p.prototype, "alwaysFocusable", void 0);
|
|
t([
|
|
l()
|
|
], p.prototype, "label", void 0);
|
|
t([
|
|
l({ type: Boolean, reflect: !0, attribute: "has-icon" })
|
|
], p.prototype, "hasIcon", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let D = class extends p {
|
|
constructor() {
|
|
super(...arguments), this.elevated = !1, this.href = "", this.target = "";
|
|
}
|
|
get primaryId() {
|
|
return this.href ? "link" : "button";
|
|
}
|
|
get rippleDisabled() {
|
|
return !this.href && (this.disabled || this.softDisabled);
|
|
}
|
|
getContainerClasses() {
|
|
return {
|
|
...super.getContainerClasses(),
|
|
// Link chips cannot be disabled
|
|
disabled: !this.href && (this.disabled || this.softDisabled),
|
|
elevated: this.elevated,
|
|
link: !!this.href
|
|
};
|
|
}
|
|
renderPrimaryAction(e) {
|
|
const { ariaLabel: a } = this;
|
|
return this.href ? s`
|
|
<a
|
|
class="primary action"
|
|
id="link"
|
|
aria-label=${a || n}
|
|
href=${this.href}
|
|
target=${this.target || n}
|
|
>${e}</a
|
|
>
|
|
` : s`
|
|
<button
|
|
class="primary action"
|
|
id="button"
|
|
aria-label=${a || n}
|
|
aria-disabled=${this.softDisabled || n}
|
|
?disabled=${this.disabled && !this.alwaysFocusable}
|
|
type="button"
|
|
>${e}</button
|
|
>
|
|
`;
|
|
}
|
|
renderOutline() {
|
|
return this.elevated ? s`<md-elevation part="elevation"></md-elevation>` : super.renderOutline();
|
|
}
|
|
};
|
|
t([
|
|
l({ type: Boolean })
|
|
], D.prototype, "elevated", void 0);
|
|
t([
|
|
l()
|
|
], D.prototype, "href", void 0);
|
|
t([
|
|
l()
|
|
], D.prototype, "target", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const q = u`:host{--_container-height: var(--md-assist-chip-container-height, 32px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-assist-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-assist-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-assist-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-assist-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-assist-chip-leading-space, 16px);--_trailing-space: var(--md-assist-chip-trailing-space, 16px);--_icon-label-space: var(--md-assist-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-assist-chip-with-leading-icon-leading-space, 8px)}@media(forced-colors: active){.link .outline{border-color:ActiveText}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const E = u`.elevated{--md-elevation-level: var(--_elevated-container-elevation);--md-elevation-shadow-color: var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level: var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level: var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level: var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level: var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}@media(forced-colors: active){.elevated md-elevation{border:1px solid CanvasText}.elevated.disabled md-elevation{border-color:GrayText}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const T = u`:host{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end);display:inline-flex;height:var(--_container-height);cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host(:is([disabled],[soft-disabled])){pointer-events:none}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.container{border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.cell{display:flex}.action{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;display:flex;outline:none;padding:0;position:relative;text-decoration:none}.primary.action{min-width:0;padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space)}.has-icon .primary.action{padding-inline-start:var(--_with-leading-icon-leading-space)}.touch{height:48px;inset:50% 0 0;position:absolute;transform:translateY(-50%);width:100%}:host([touch-target=none]) .touch{display:none}.outline{border:var(--_outline-width) solid var(--_outline-color);border-radius:inherit;inset:0;pointer-events:none;position:absolute}:where(:focus) .outline{border-color:var(--_focus-outline-color)}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);opacity:var(--_disabled-outline-opacity)}md-ripple{border-radius:inherit}.label,.icon,.touch{z-index:1}.label{align-items:center;color:var(--_label-text-color);display:flex;font-family:var(--_label-text-font);font-size:var(--_label-text-size);font-weight:var(--_label-text-weight);height:100%;line-height:var(--_label-text-line-height);overflow:hidden;user-select:none}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(:hover) .label{color:var(--_hover-label-text-color)}:where(:focus) .label{color:var(--_focus-label-text-color)}:where(:active) .label{color:var(--_pressed-label-text-color)}:where(.disabled) .label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.icon{align-self:center;display:flex;fill:currentColor;position:relative}.icon ::slotted(:first-child){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size)}.leading.icon{color:var(--_leading-icon-color)}.leading.icon ::slotted(*),.leading.icon svg{margin-inline-end:var(--_icon-label-space)}:where(:hover) .leading.icon{color:var(--_hover-leading-icon-color)}:where(:focus) .leading.icon{color:var(--_focus-leading-icon-color)}:where(:active) .leading.icon{color:var(--_pressed-leading-icon-color)}:where(.disabled) .leading.icon{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){:where(.disabled) :is(.label,.outline,.leading.icon){color:GrayText;opacity:1}}a,button{text-transform:inherit}a,button:not(:disabled,[aria-disabled=true]){cursor:inherit}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let w = class extends D {
|
|
};
|
|
w.styles = [T, E, q];
|
|
w = t([
|
|
F("md-assist-chip")
|
|
], w);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let B = class extends L {
|
|
get chips() {
|
|
return this.childElements.filter((e) => e instanceof p);
|
|
}
|
|
constructor() {
|
|
super(), this.internals = // Cast needed for closure
|
|
this.attachInternals(), this.addEventListener("focusin", this.updateTabIndices.bind(this)), this.addEventListener("update-focus", this.updateTabIndices.bind(this)), this.addEventListener("keydown", this.handleKeyDown.bind(this)), this.internals.role = "toolbar";
|
|
}
|
|
render() {
|
|
return s`<slot @slotchange=${this.updateTabIndices}></slot>`;
|
|
}
|
|
handleKeyDown(e) {
|
|
const a = e.key === "ArrowLeft", r = e.key === "ArrowRight", d = e.key === "Home", c = e.key === "End";
|
|
if (!a && !r && !d && !c)
|
|
return;
|
|
const { chips: o } = this;
|
|
if (o.length < 2)
|
|
return;
|
|
if (e.preventDefault(), d || c) {
|
|
const m = d ? 0 : o.length - 1;
|
|
o[m].focus({ trailing: c }), this.updateTabIndices();
|
|
return;
|
|
}
|
|
const h = getComputedStyle(this).direction === "rtl" ? a : r, _ = o.find((m) => m.matches(":focus-within"));
|
|
if (!_) {
|
|
(h ? o[0] : o[o.length - 1]).focus({ trailing: !h }), this.updateTabIndices();
|
|
return;
|
|
}
|
|
const g = o.indexOf(_);
|
|
let v = h ? g + 1 : g - 1;
|
|
for (; v !== g; ) {
|
|
v >= o.length ? v = 0 : v < 0 && (v = o.length - 1);
|
|
const m = o[v];
|
|
if (m.disabled && !m.alwaysFocusable) {
|
|
h ? v++ : v--;
|
|
continue;
|
|
}
|
|
m.focus({ trailing: !h }), this.updateTabIndices();
|
|
break;
|
|
}
|
|
}
|
|
updateTabIndices() {
|
|
const { chips: e } = this;
|
|
let a;
|
|
for (const r of e) {
|
|
const d = r.alwaysFocusable || !r.disabled;
|
|
if (r.matches(":focus-within") && d) {
|
|
a = r;
|
|
continue;
|
|
}
|
|
d && !a && (a = r), r.tabIndex = -1;
|
|
}
|
|
a && (a.tabIndex = 0);
|
|
}
|
|
};
|
|
t([
|
|
G()
|
|
], B.prototype, "childElements", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const H = u`:host{display:flex;flex-wrap:wrap;gap:8px}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let C = class extends B {
|
|
};
|
|
C.styles = [H];
|
|
C = t([
|
|
F("md-chip-set")
|
|
], C);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const x = "aria-label-remove";
|
|
class O extends p {
|
|
get ariaLabelRemove() {
|
|
if (this.hasAttribute(x))
|
|
return this.getAttribute(x);
|
|
const { ariaLabel: e } = this;
|
|
return e || this.label ? `Remove ${e || this.label}` : null;
|
|
}
|
|
set ariaLabelRemove(e) {
|
|
const a = this.ariaLabelRemove;
|
|
e !== a && (e === null ? this.removeAttribute(x) : this.setAttribute(x, e), this.requestUpdate());
|
|
}
|
|
constructor() {
|
|
super(), this.handleTrailingActionFocus = this.handleTrailingActionFocus.bind(this), this.addEventListener("keydown", this.handleKeyDown.bind(this));
|
|
}
|
|
focus(e) {
|
|
if ((this.alwaysFocusable || !this.disabled) && (e != null && e.trailing) && this.trailingAction) {
|
|
this.trailingAction.focus(e);
|
|
return;
|
|
}
|
|
super.focus(e);
|
|
}
|
|
renderContainerContent() {
|
|
return s`
|
|
${super.renderContainerContent()}
|
|
${this.renderTrailingAction(this.handleTrailingActionFocus)}
|
|
`;
|
|
}
|
|
handleKeyDown(e) {
|
|
var _, g;
|
|
const a = e.key === "ArrowLeft", r = e.key === "ArrowRight";
|
|
if (!a && !r || !this.primaryAction || !this.trailingAction)
|
|
return;
|
|
const c = getComputedStyle(this).direction === "rtl" ? a : r, o = (_ = this.primaryAction) == null ? void 0 : _.matches(":focus-within"), f = (g = this.trailingAction) == null ? void 0 : g.matches(":focus-within");
|
|
if (c && f || !c && o)
|
|
return;
|
|
e.preventDefault(), e.stopPropagation(), (c ? this.trailingAction : this.primaryAction).focus();
|
|
}
|
|
handleTrailingActionFocus() {
|
|
const { primaryAction: e, trailingAction: a } = this;
|
|
!e || !a || (e.tabIndex = -1, a.addEventListener("focusout", () => {
|
|
e.tabIndex = 0;
|
|
}, { once: !0 }));
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
function M({ ariaLabel: i, disabled: e, focusListener: a, tabbable: r = !1 }) {
|
|
return s`
|
|
<span id="remove-label" hidden aria-hidden="true">Remove</span>
|
|
<button
|
|
class="trailing action"
|
|
aria-label=${i || n}
|
|
aria-labelledby=${i ? n : "remove-label label"}
|
|
tabindex=${r ? n : -1}
|
|
@click=${V}
|
|
@focus=${a}>
|
|
<md-focus-ring part="trailing-focus-ring"></md-focus-ring>
|
|
<md-ripple ?disabled=${e}></md-ripple>
|
|
<span class="trailing icon" aria-hidden="true">
|
|
<slot name="remove-trailing-icon">
|
|
<svg viewBox="0 96 960 960">
|
|
<path
|
|
d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
|
|
</svg>
|
|
</slot>
|
|
</span>
|
|
<span class="touch"></span>
|
|
</button>
|
|
`;
|
|
}
|
|
function V(i) {
|
|
this.disabled || this.softDisabled || (i.stopPropagation(), !this.dispatchEvent(new Event("remove", { cancelable: !0 }))) || this.remove();
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let b = class extends O {
|
|
constructor() {
|
|
super(...arguments), this.elevated = !1, this.removable = !1, this.selected = !1, this.hasSelectedIcon = !1;
|
|
}
|
|
get primaryId() {
|
|
return "button";
|
|
}
|
|
getContainerClasses() {
|
|
return {
|
|
...super.getContainerClasses(),
|
|
elevated: this.elevated,
|
|
selected: this.selected,
|
|
"has-trailing": this.removable,
|
|
"has-icon": this.hasIcon || this.selected
|
|
};
|
|
}
|
|
renderPrimaryAction(e) {
|
|
const { ariaLabel: a } = this;
|
|
return s`
|
|
<button
|
|
class="primary action"
|
|
id="button"
|
|
aria-label=${a || n}
|
|
aria-pressed=${this.selected}
|
|
aria-disabled=${this.softDisabled || n}
|
|
?disabled=${this.disabled && !this.alwaysFocusable}
|
|
@click=${this.handleClickOnChild}
|
|
>${e}</button
|
|
>
|
|
`;
|
|
}
|
|
renderLeadingIcon() {
|
|
return this.selected ? s`
|
|
<slot name="selected-icon">
|
|
<svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
|
|
<path
|
|
d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
|
|
</svg>
|
|
</slot>
|
|
` : super.renderLeadingIcon();
|
|
}
|
|
renderTrailingAction(e) {
|
|
return this.removable ? M({
|
|
focusListener: e,
|
|
ariaLabel: this.ariaLabelRemove,
|
|
disabled: this.disabled || this.softDisabled
|
|
}) : n;
|
|
}
|
|
renderOutline() {
|
|
return this.elevated ? s`<md-elevation part="elevation"></md-elevation>` : super.renderOutline();
|
|
}
|
|
handleClickOnChild(e) {
|
|
if (this.disabled || this.softDisabled)
|
|
return;
|
|
const a = this.selected;
|
|
if (this.selected = !this.selected, !U(this, e)) {
|
|
this.selected = a;
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
t([
|
|
l({ type: Boolean })
|
|
], b.prototype, "elevated", void 0);
|
|
t([
|
|
l({ type: Boolean })
|
|
], b.prototype, "removable", void 0);
|
|
t([
|
|
l({ type: Boolean, reflect: !0 })
|
|
], b.prototype, "selected", void 0);
|
|
t([
|
|
l({ type: Boolean, reflect: !0, attribute: "has-selected-icon" })
|
|
], b.prototype, "hasSelectedIcon", void 0);
|
|
t([
|
|
R(".primary.action")
|
|
], b.prototype, "primaryAction", void 0);
|
|
t([
|
|
R(".trailing.action")
|
|
], b.prototype, "trailingAction", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const Z = u`:host{--_container-height: var(--md-filter-chip-container-height, 32px);--_disabled-label-text-color: var(--md-filter-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filter-chip-disabled-label-text-opacity, 0.38);--_elevated-container-elevation: var(--md-filter-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-filter-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-filter-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-filter-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-filter-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-filter-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-filter-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-filter-chip-elevated-pressed-container-elevation, 1);--_elevated-selected-container-color: var(--md-filter-chip-elevated-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_label-text-font: var(--md-filter-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-filter-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-filter-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-filter-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-focus-label-text-color: var(--md-filter-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-filter-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-filter-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-filter-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-filter-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-filter-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_selected-pressed-state-layer-opacity: var(--md-filter-chip-selected-pressed-state-layer-opacity, 0.12);--_elevated-container-color: var(--md-filter-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_disabled-outline-color: var(--md-filter-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-filter-chip-disabled-outline-opacity, 0.12);--_disabled-selected-container-color: var(--md-filter-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-filter-chip-disabled-selected-container-opacity, 0.12);--_focus-outline-color: var(--md-filter-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-filter-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-filter-chip-outline-width, 1px);--_selected-container-color: var(--md-filter-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-outline-width: var(--md-filter-chip-selected-outline-width, 0px);--_focus-label-text-color: var(--md-filter-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-filter-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filter-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-filter-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-filter-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-filter-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-filter-chip-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filter-chip-pressed-state-layer-opacity, 0.12);--_icon-size: var(--md-filter-chip-icon-size, 18px);--_disabled-leading-icon-color: var(--md-filter-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filter-chip-disabled-leading-icon-opacity, 0.38);--_selected-focus-leading-icon-color: var(--md-filter-chip-selected-focus-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-leading-icon-color: var(--md-filter-chip-selected-hover-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-leading-icon-color: var(--md-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-leading-icon-color: var(--md-filter-chip-selected-pressed-leading-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-leading-icon-color: var(--md-filter-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-filter-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-filter-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-filter-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-filter-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filter-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-filter-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-filter-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-filter-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-filter-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-filter-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filter-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-filter-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-filter-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filter-chip-container-shape-start-start, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-filter-chip-container-shape-start-end, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-filter-chip-container-shape-end-end, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-filter-chip-container-shape-end-start, var(--md-filter-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-filter-chip-leading-space, 16px);--_trailing-space: var(--md-filter-chip-trailing-space, 16px);--_icon-label-space: var(--md-filter-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-filter-chip-with-leading-icon-leading-space, 8px);--_with-trailing-icon-trailing-space: var(--md-filter-chip-with-trailing-icon-trailing-space, 8px)}.selected.elevated::before{background:var(--_elevated-selected-container-color)}.checkmark{height:var(--_icon-size);width:var(--_icon-size)}.disabled .checkmark{opacity:var(--_disabled-leading-icon-opacity)}@media(forced-colors: active){.disabled .checkmark{opacity:1}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const S = u`.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}:where(.selected)::before{background:var(--_selected-container-color)}:where(.selected) .outline{border-width:var(--_selected-outline-width)}:where(.selected.disabled)::before{background:var(--_disabled-selected-container-color);opacity:var(--_disabled-selected-container-opacity)}:where(.selected) .label{color:var(--_selected-label-text-color)}:where(.selected:hover) .label{color:var(--_selected-hover-label-text-color)}:where(.selected:focus) .label{color:var(--_selected-focus-label-text-color)}:where(.selected:active) .label{color:var(--_selected-pressed-label-text-color)}:where(.selected) .leading.icon{color:var(--_selected-leading-icon-color)}:where(.selected:hover) .leading.icon{color:var(--_selected-hover-leading-icon-color)}:where(.selected:focus) .leading.icon{color:var(--_selected-focus-leading-icon-color)}:where(.selected:active) .leading.icon{color:var(--_selected-pressed-leading-icon-color)}@media(forced-colors: active){:where(.selected:not(.elevated))::before{border:1px solid CanvasText}:where(.selected) .outline{border-width:1px}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const P = u`.trailing.action{align-items:center;justify-content:center;padding-inline-start:var(--_icon-label-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.trailing.action :is(md-ripple,md-focus-ring){border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}.trailing.action md-focus-ring{inset:unset}.has-trailing .primary.action{padding-inline-end:0}.trailing.icon{color:var(--_trailing-icon-color);height:var(--_icon-size);width:var(--_icon-size)}:where(:hover) .trailing.icon{color:var(--_hover-trailing-icon-color)}:where(:focus) .trailing.icon{color:var(--_focus-trailing-icon-color)}:where(:active) .trailing.icon{color:var(--_pressed-trailing-icon-color)}:where(.disabled) .trailing.icon{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}:where(.selected) .trailing.icon{color:var(--_selected-trailing-icon-color)}:where(.selected:hover) .trailing.icon{color:var(--_selected-hover-trailing-icon-color)}:where(.selected:focus) .trailing.icon{color:var(--_selected-focus-trailing-icon-color)}:where(.selected:active) .trailing.icon{color:var(--_selected-pressed-trailing-icon-color)}@media(forced-colors: active){.trailing.icon{color:ButtonText}:where(.disabled) .trailing.icon{color:GrayText;opacity:1}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let $ = class extends b {
|
|
};
|
|
$.styles = [
|
|
T,
|
|
E,
|
|
P,
|
|
S,
|
|
Z
|
|
];
|
|
$ = t([
|
|
F("md-filter-chip")
|
|
], $);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let y = class extends O {
|
|
constructor() {
|
|
super(...arguments), this.avatar = !1, this.href = "", this.target = "", this.removeOnly = !1, this.selected = !1;
|
|
}
|
|
get primaryId() {
|
|
return this.href ? "link" : this.removeOnly ? "" : "button";
|
|
}
|
|
get rippleDisabled() {
|
|
return !this.href && (this.disabled || this.softDisabled);
|
|
}
|
|
get primaryAction() {
|
|
return this.removeOnly ? null : this.renderRoot.querySelector(".primary.action");
|
|
}
|
|
getContainerClasses() {
|
|
return {
|
|
...super.getContainerClasses(),
|
|
avatar: this.avatar,
|
|
// Link chips cannot be disabled
|
|
disabled: !this.href && (this.disabled || this.softDisabled),
|
|
link: !!this.href,
|
|
selected: this.selected,
|
|
"has-trailing": !0
|
|
};
|
|
}
|
|
renderPrimaryAction(e) {
|
|
const { ariaLabel: a } = this;
|
|
return this.href ? s`
|
|
<a
|
|
class="primary action"
|
|
id="link"
|
|
aria-label=${a || n}
|
|
href=${this.href}
|
|
target=${this.target || n}
|
|
>${e}</a
|
|
>
|
|
` : this.removeOnly ? s`
|
|
<span class="primary action" aria-label=${a || n}>
|
|
${e}
|
|
</span>
|
|
` : s`
|
|
<button
|
|
class="primary action"
|
|
id="button"
|
|
aria-label=${a || n}
|
|
aria-disabled=${this.softDisabled || n}
|
|
?disabled=${this.disabled && !this.alwaysFocusable}
|
|
type="button"
|
|
>${e}</button
|
|
>
|
|
`;
|
|
}
|
|
renderTrailingAction(e) {
|
|
return M({
|
|
focusListener: e,
|
|
ariaLabel: this.ariaLabelRemove,
|
|
disabled: !this.href && (this.disabled || this.softDisabled),
|
|
tabbable: this.removeOnly
|
|
});
|
|
}
|
|
};
|
|
t([
|
|
l({ type: Boolean })
|
|
], y.prototype, "avatar", void 0);
|
|
t([
|
|
l()
|
|
], y.prototype, "href", void 0);
|
|
t([
|
|
l()
|
|
], y.prototype, "target", void 0);
|
|
t([
|
|
l({ type: Boolean, attribute: "remove-only" })
|
|
], y.prototype, "removeOnly", void 0);
|
|
t([
|
|
l({ type: Boolean, reflect: !0 })
|
|
], y.prototype, "selected", void 0);
|
|
t([
|
|
R(".trailing.action")
|
|
], y.prototype, "trailingAction", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const Y = u`:host{--_container-height: var(--md-input-chip-container-height, 32px);--_disabled-label-text-color: var(--md-input-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-input-chip-disabled-label-text-opacity, 0.38);--_disabled-selected-container-color: var(--md-input-chip-disabled-selected-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-container-opacity: var(--md-input-chip-disabled-selected-container-opacity, 0.12);--_label-text-font: var(--md-input-chip-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-input-chip-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-input-chip-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-input-chip-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_selected-container-color: var(--md-input-chip-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-label-text-color: var(--md-input-chip-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-input-chip-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-input-chip-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-opacity: var(--md-input-chip-selected-hover-state-layer-opacity, 0.08);--_selected-label-text-color: var(--md-input-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-outline-width: var(--md-input-chip-selected-outline-width, 0px);--_selected-pressed-label-text-color: var(--md-input-chip-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-input-chip-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-opacity: var(--md-input-chip-selected-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-input-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-input-chip-disabled-outline-opacity, 0.12);--_focus-label-text-color: var(--md-input-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-input-chip-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-input-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-input-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-input-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-input-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-color: var(--md-input-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-input-chip-outline-width, 1px);--_pressed-label-text-color: var(--md-input-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-input-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-input-chip-pressed-state-layer-opacity, 0.12);--_avatar-shape: var(--md-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 9999px));--_avatar-size: var(--md-input-chip-avatar-size, 24px);--_disabled-avatar-opacity: var(--md-input-chip-disabled-avatar-opacity, 0.38);--_disabled-leading-icon-color: var(--md-input-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-input-chip-disabled-leading-icon-opacity, 0.38);--_icon-size: var(--md-input-chip-icon-size, 18px);--_selected-focus-leading-icon-color: var(--md-input-chip-selected-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-leading-icon-color: var(--md-input-chip-selected-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-leading-icon-color: var(--md-input-chip-selected-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-leading-icon-color: var(--md-input-chip-selected-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-input-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-input-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-input-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-input-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_disabled-trailing-icon-color: var(--md-input-chip-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-input-chip-disabled-trailing-icon-opacity, 0.38);--_selected-focus-trailing-icon-color: var(--md-input-chip-selected-focus-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-trailing-icon-color: var(--md-input-chip-selected-hover-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-trailing-icon-color: var(--md-input-chip-selected-pressed-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-trailing-icon-color: var(--md-input-chip-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_focus-trailing-icon-color: var(--md-input-chip-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-input-chip-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-trailing-icon-color: var(--md-input-chip-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-color: var(--md-input-chip-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-start-end: var(--md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-end: var(--md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_container-shape-end-start: var(--md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, var(--md-sys-shape-corner-small, 8px)));--_leading-space: var(--md-input-chip-leading-space, 16px);--_trailing-space: var(--md-input-chip-trailing-space, 16px);--_icon-label-space: var(--md-input-chip-icon-label-space, 8px);--_with-leading-icon-leading-space: var(--md-input-chip-with-leading-icon-leading-space, 8px);--_with-trailing-icon-trailing-space: var(--md-input-chip-with-trailing-icon-trailing-space, 8px)}:host([avatar]){--_container-shape-start-start: var( --md-input-chip-container-shape-start-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-start-end: var( --md-input-chip-container-shape-start-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-end: var( --md-input-chip-container-shape-end-end, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) );--_container-shape-end-start: var( --md-input-chip-container-shape-end-start, var(--md-input-chip-container-shape, calc(var(--_container-height) / 2)) )}.avatar .primary.action{padding-inline-start:4px}.avatar .leading.icon ::slotted(:first-child){border-radius:var(--_avatar-shape);height:var(--_avatar-size);width:var(--_avatar-size)}.disabled.avatar .leading.icon{opacity:var(--_disabled-avatar-opacity)}@media(forced-colors: active){.link .outline{border-color:ActiveText}.disabled.avatar .leading.icon{opacity:1}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let A = class extends y {
|
|
};
|
|
A.styles = [
|
|
T,
|
|
P,
|
|
S,
|
|
Y
|
|
];
|
|
A = t([
|
|
F("md-input-chip")
|
|
], A);
|
|
const J = z({
|
|
react: I,
|
|
tagName: "md-chip-set",
|
|
elementClass: C
|
|
}), fe = (i) => /* @__PURE__ */ k(J, { children: i.children }), Q = z({
|
|
react: I,
|
|
tagName: "md-assist-chip",
|
|
elementClass: w,
|
|
events: {
|
|
onClick: "click",
|
|
onKeyDown: "keydown",
|
|
onFocus: "focus",
|
|
onBlur: "blur"
|
|
}
|
|
}), ge = (i) => {
|
|
const { label: e, elevated: a, href: r, target: d, disabled: c, alwaysFocusable: o } = i;
|
|
return /* @__PURE__ */ k(Q, { label: e, elevated: a, href: r, target: d, disabled: c, alwaysFocusable: o });
|
|
}, W = z({
|
|
react: I,
|
|
tagName: "md-filter-chip",
|
|
elementClass: $,
|
|
events: {
|
|
onRemove: "remove",
|
|
onUpdateFocus: "update-focus"
|
|
}
|
|
}), _e = (i) => {
|
|
const { label: e, elevated: a, removable: r, selected: d, hasSelectedIcon: c, disabled: o, alwaysFocusable: f } = i;
|
|
return /* @__PURE__ */ k(W, { label: e, elevated: a, removable: r, selected: d, hasSelectedIcon: c, disabled: o, alwaysFocusable: f });
|
|
}, X = z({
|
|
react: I,
|
|
tagName: "md-input-chip",
|
|
elementClass: A,
|
|
events: {
|
|
onRemove: "remove",
|
|
onUpdateFocus: "update-focus"
|
|
}
|
|
}), xe = (i) => {
|
|
const { label: e, avatar: a, href: r, target: d, removeOnly: c, selected: o, disabled: f, alwaysFocusable: h } = i;
|
|
return /* @__PURE__ */ k(X, { label: e, avatar: a, href: r, target: d, removeOnly: c, selected: o, disabled: f, alwaysFocusable: h });
|
|
};
|
|
export {
|
|
ge as AssistChip,
|
|
fe as ChipSet,
|
|
_e as FilterChip,
|
|
xe as InputChip
|
|
};
|