396 lines
23 KiB
JavaScript
396 lines
23 KiB
JavaScript
import { jsx as z } from "react/jsx-runtime";
|
|
import w from "react";
|
|
import { o as C } from "./create-component-CVXl33PD.mjs";
|
|
import { _ as r, n as v, r as $, x as T, c as R, E as k, a as g, b as I } from "./class-map-CwiboTfb.mjs";
|
|
import "./divider-Diu_1O5h.mjs";
|
|
import { r as F, a as E, E as B } from "./animation-DjClVFum.mjs";
|
|
import { o as M } from "./query-assigned-elements-DUhez03i.mjs";
|
|
import "./elevation-Dg8ssDJC.mjs";
|
|
import "./ripple-pQcEjR05.mjs";
|
|
import { n as L } from "./query-assigned-nodes-MKI2zKDb.mjs";
|
|
import { m as O } from "./focusable-CDJoU7XD.mjs";
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
var N;
|
|
const m = Symbol("indicator"), S = Symbol("animateIndicator"), D = O($);
|
|
let l = class extends D {
|
|
/**
|
|
* @deprecated use `active`
|
|
*/
|
|
get selected() {
|
|
return this.active;
|
|
}
|
|
set selected(t) {
|
|
this.active = t;
|
|
}
|
|
constructor() {
|
|
super(), this.isTab = !0, this.active = !1, this.hasIcon = !1, this.iconOnly = !1, this.fullWidthIndicator = !1, this.internals = // Cast needed for closure
|
|
this.attachInternals(), this.internals.role = "tab", this.addEventListener("keydown", this.handleKeydown.bind(this));
|
|
}
|
|
render() {
|
|
const t = T`<div class="indicator"></div>`;
|
|
return T`<div
|
|
class="button"
|
|
role="presentation"
|
|
@click=${this.handleContentClick}>
|
|
<md-focus-ring part="focus-ring" inward .control=${this}></md-focus-ring>
|
|
<md-elevation part="elevation"></md-elevation>
|
|
<md-ripple .control=${this}></md-ripple>
|
|
<div
|
|
class="content ${R(this.getContentClasses())}"
|
|
role="presentation">
|
|
<slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
|
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
${this.fullWidthIndicator ? k : t}
|
|
</div>
|
|
${this.fullWidthIndicator ? t : k}
|
|
</div>`;
|
|
}
|
|
getContentClasses() {
|
|
return {
|
|
"has-icon": this.hasIcon,
|
|
"has-label": !this.iconOnly
|
|
};
|
|
}
|
|
updated() {
|
|
this.internals.ariaSelected = String(this.active);
|
|
}
|
|
async handleKeydown(t) {
|
|
await 0, !t.defaultPrevented && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
|
|
}
|
|
handleContentClick(t) {
|
|
t.stopPropagation(), this.click();
|
|
}
|
|
[(N = m, S)](t) {
|
|
if (!this[m])
|
|
return;
|
|
this[m].getAnimations().forEach((a) => {
|
|
a.cancel();
|
|
});
|
|
const e = this.getKeyframes(t);
|
|
e !== null && this[m].animate(e, {
|
|
duration: 250,
|
|
easing: B.EMPHASIZED
|
|
});
|
|
}
|
|
getKeyframes(t) {
|
|
var p;
|
|
const e = K();
|
|
if (!this.active)
|
|
return e ? [{ opacity: 1 }, { transform: "none" }] : null;
|
|
const a = {}, s = ((p = t[m]) == null ? void 0 : p.getBoundingClientRect()) ?? {}, i = s.left, c = s.width, o = this[m].getBoundingClientRect(), d = o.left, b = o.width, h = c / b;
|
|
return !e && i !== void 0 && d !== void 0 && !isNaN(h) ? a.transform = `translateX(${(i - d).toFixed(4)}px) scaleX(${h.toFixed(4)})` : a.opacity = 0, [a, { transform: "none" }];
|
|
}
|
|
handleSlotChange() {
|
|
this.iconOnly = !1;
|
|
for (const t of this.assignedDefaultNodes) {
|
|
const e = t.nodeType === Node.TEXT_NODE && !!t.wholeText.match(/\S/);
|
|
if (t.nodeType === Node.ELEMENT_NODE || e)
|
|
return;
|
|
}
|
|
this.iconOnly = !0;
|
|
}
|
|
handleIconSlotChange() {
|
|
this.hasIcon = this.assignedIcons.length > 0;
|
|
}
|
|
};
|
|
r([
|
|
v({ type: Boolean, reflect: !0, attribute: "md-tab" })
|
|
], l.prototype, "isTab", void 0);
|
|
r([
|
|
v({ type: Boolean, reflect: !0 })
|
|
], l.prototype, "active", void 0);
|
|
r([
|
|
v({ type: Boolean })
|
|
], l.prototype, "selected", null);
|
|
r([
|
|
v({ type: Boolean, attribute: "has-icon" })
|
|
], l.prototype, "hasIcon", void 0);
|
|
r([
|
|
v({ type: Boolean, attribute: "icon-only" })
|
|
], l.prototype, "iconOnly", void 0);
|
|
r([
|
|
E(".indicator")
|
|
], l.prototype, N, void 0);
|
|
r([
|
|
F()
|
|
], l.prototype, "fullWidthIndicator", void 0);
|
|
r([
|
|
L({ flatten: !0 })
|
|
], l.prototype, "assignedDefaultNodes", void 0);
|
|
r([
|
|
M({ slot: "icon", flatten: !0 })
|
|
], l.prototype, "assignedIcons", void 0);
|
|
function K() {
|
|
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let y = class extends $ {
|
|
/**
|
|
* The currently selected tab, `null` only when there are no tab children.
|
|
*
|
|
* @export
|
|
*/
|
|
get activeTab() {
|
|
return this.tabs.find((t) => t.active) ?? null;
|
|
}
|
|
set activeTab(t) {
|
|
t && this.activateTab(t);
|
|
}
|
|
/**
|
|
* The index of the currently selected tab.
|
|
*
|
|
* @export
|
|
*/
|
|
get activeTabIndex() {
|
|
return this.tabs.findIndex((t) => t.active);
|
|
}
|
|
set activeTabIndex(t) {
|
|
const e = () => {
|
|
const a = this.tabs[t];
|
|
a && this.activateTab(a);
|
|
};
|
|
if (!this.slotElement) {
|
|
this.updateComplete.then(e);
|
|
return;
|
|
}
|
|
e();
|
|
}
|
|
get focusedTab() {
|
|
return this.tabs.find((t) => t.matches(":focus-within"));
|
|
}
|
|
constructor() {
|
|
super(), this.autoActivate = !1, this.internals = // Cast needed for closure
|
|
this.attachInternals(), this.internals.role = "tablist", this.addEventListener("keydown", this.handleKeydown.bind(this)), this.addEventListener("keyup", this.handleKeyup.bind(this)), this.addEventListener("focusout", this.handleFocusout.bind(this));
|
|
}
|
|
/**
|
|
* Scrolls the toolbar, if overflowing, to the active tab, or the provided
|
|
* tab.
|
|
*
|
|
* @param tabToScrollTo The tab that should be scrolled to. Defaults to the
|
|
* active tab.
|
|
* @return A Promise that resolves after the tab has been scrolled to.
|
|
*/
|
|
async scrollToTab(t) {
|
|
await this.updateComplete;
|
|
const { tabs: e } = this;
|
|
if (t ?? (t = this.activeTab), !t || !e.includes(t) || !this.tabsScrollerElement)
|
|
return;
|
|
for (const f of this.tabs)
|
|
await f.updateComplete;
|
|
const a = t.offsetLeft, s = t.offsetWidth, i = this.scrollLeft, c = this.offsetWidth, o = 48, d = a - o, b = a + s - c + o, h = Math.min(d, Math.max(b, i)), p = this.focusedTab ? "auto" : "instant";
|
|
this.tabsScrollerElement.scrollTo({ behavior: p, top: 0, left: h });
|
|
}
|
|
render() {
|
|
return T`
|
|
<div class="tabs">
|
|
<slot
|
|
@slotchange=${this.handleSlotChange}
|
|
@click=${this.handleTabClick}></slot>
|
|
</div>
|
|
<md-divider part="divider"></md-divider>
|
|
`;
|
|
}
|
|
async handleTabClick(t) {
|
|
const e = t.target;
|
|
await 0, !(t.defaultPrevented || !W(e) || e.active) && this.activateTab(e);
|
|
}
|
|
activateTab(t) {
|
|
const { tabs: e } = this, a = this.activeTab;
|
|
if (!(!e.includes(t) || a === t)) {
|
|
for (const s of e)
|
|
s.active = s === t;
|
|
if (a) {
|
|
if (!this.dispatchEvent(new Event("change", { bubbles: !0, cancelable: !0 }))) {
|
|
for (const i of e)
|
|
i.active = i === a;
|
|
return;
|
|
}
|
|
t[S](a);
|
|
}
|
|
this.updateFocusableTab(t), this.scrollToTab(t);
|
|
}
|
|
}
|
|
updateFocusableTab(t) {
|
|
for (const e of this.tabs)
|
|
e.tabIndex = e === t ? 0 : -1;
|
|
}
|
|
// focus item on keydown and optionally select it
|
|
async handleKeydown(t) {
|
|
await 0;
|
|
const e = t.key === "ArrowLeft", a = t.key === "ArrowRight", s = t.key === "Home", i = t.key === "End";
|
|
if (t.defaultPrevented || !e && !a && !s && !i)
|
|
return;
|
|
const { tabs: c } = this;
|
|
if (c.length < 2)
|
|
return;
|
|
t.preventDefault();
|
|
let o;
|
|
if (s || i)
|
|
o = s ? 0 : c.length - 1;
|
|
else {
|
|
const h = getComputedStyle(this).direction === "rtl" ? e : a, { focusedTab: p } = this;
|
|
if (!p)
|
|
o = h ? 0 : c.length - 1;
|
|
else {
|
|
const f = this.tabs.indexOf(p);
|
|
o = h ? f + 1 : f - 1, o >= c.length ? o = 0 : o < 0 && (o = c.length - 1);
|
|
}
|
|
}
|
|
const d = c[o];
|
|
d.focus(), this.autoActivate ? this.activateTab(d) : this.updateFocusableTab(d);
|
|
}
|
|
// scroll to item on keyup.
|
|
handleKeyup() {
|
|
this.scrollToTab(this.focusedTab ?? this.activeTab);
|
|
}
|
|
handleFocusout() {
|
|
if (this.matches(":focus-within"))
|
|
return;
|
|
const { activeTab: t } = this;
|
|
t && this.updateFocusableTab(t);
|
|
}
|
|
handleSlotChange() {
|
|
const t = this.tabs[0];
|
|
!this.activeTab && t && this.activateTab(t), this.scrollToTab(this.activeTab);
|
|
}
|
|
};
|
|
r([
|
|
M({ flatten: !0, selector: "[md-tab]" })
|
|
], y.prototype, "tabs", void 0);
|
|
r([
|
|
v({ type: Number, attribute: "active-tab-index" })
|
|
], y.prototype, "activeTabIndex", null);
|
|
r([
|
|
v({ type: Boolean, attribute: "auto-activate" })
|
|
], y.prototype, "autoActivate", void 0);
|
|
r([
|
|
E(".tabs")
|
|
], y.prototype, "tabsScrollerElement", void 0);
|
|
r([
|
|
E("slot")
|
|
], y.prototype, "slotElement", void 0);
|
|
function W(n) {
|
|
return n instanceof HTMLElement && n.hasAttribute("md-tab");
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const j = g`:host{box-sizing:border-box;display:flex;flex-direction:column;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;position:relative}:host([hidden]){display:none}:host::-webkit-scrollbar{display:none}.tabs{align-items:end;display:flex;height:100%;overflow:inherit;scroll-behavior:inherit;scrollbar-width:inherit;justify-content:space-between;width:100%}::slotted(*){flex:1}::slotted([active]){z-index:1}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let u = class extends y {
|
|
};
|
|
u.styles = [j];
|
|
u = r([
|
|
I("md-tabs")
|
|
], u);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
class P extends l {
|
|
constructor() {
|
|
super(...arguments), this.inlineIcon = !1;
|
|
}
|
|
getContentClasses() {
|
|
return {
|
|
...super.getContentClasses(),
|
|
stacked: !this.inlineIcon
|
|
};
|
|
}
|
|
}
|
|
r([
|
|
v({ type: Boolean, attribute: "inline-icon" })
|
|
], P.prototype, "inlineIcon", void 0);
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const H = g`:host{--_active-indicator-color: var(--md-primary-tab-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-primary-tab-active-indicator-height, 3px);--_active-indicator-shape: var(--md-primary-tab-active-indicator-shape, 3px 3px 0px 0px);--_active-hover-state-layer-color: var(--md-primary-tab-active-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_active-hover-state-layer-opacity: var(--md-primary-tab-active-hover-state-layer-opacity, 0.08);--_active-pressed-state-layer-color: var(--md-primary-tab-active-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-state-layer-opacity: var(--md-primary-tab-active-pressed-state-layer-opacity, 0.12);--_container-color: var(--md-primary-tab-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-primary-tab-container-elevation, 0);--_container-height: var(--md-primary-tab-container-height, 48px);--_with-icon-and-label-text-container-height: var(--md-primary-tab-with-icon-and-label-text-container-height, 64px);--_hover-state-layer-color: var(--md-primary-tab-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-primary-tab-hover-state-layer-opacity, 0.08);--_pressed-state-layer-color: var(--md-primary-tab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-primary-tab-pressed-state-layer-opacity, 0.12);--_active-focus-icon-color: var(--md-primary-tab-active-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_active-hover-icon-color: var(--md-primary-tab-active-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_active-icon-color: var(--md-primary-tab-active-icon-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-icon-color: var(--md-primary-tab-active-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-primary-tab-icon-size, 24px);--_focus-icon-color: var(--md-primary-tab-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-primary-tab-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-color: var(--md-primary-tab-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-primary-tab-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-primary-tab-label-text-font, var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-primary-tab-label-text-line-height, var(--md-sys-typescale-title-small-line-height, 1.25rem));--_label-text-size: var(--md-primary-tab-label-text-size, var(--md-sys-typescale-title-small-size, 0.875rem));--_label-text-weight: var(--md-primary-tab-label-text-weight, var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_active-focus-label-text-color: var(--md-primary-tab-active-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-hover-label-text-color: var(--md-primary-tab-active-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-label-text-color: var(--md-primary-tab-active-label-text-color, var(--md-sys-color-primary, #6750a4));--_active-pressed-label-text-color: var(--md-primary-tab-active-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-label-text-color: var(--md-primary-tab-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-primary-tab-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-color: var(--md-primary-tab-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-label-text-color: var(--md-primary-tab-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var(--md-primary-tab-container-shape-start-start, var(--md-primary-tab-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-start-end: var(--md-primary-tab-container-shape-start-end, var(--md-primary-tab-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-end: var(--md-primary-tab-container-shape-end-end, var(--md-primary-tab-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-start: var(--md-primary-tab-container-shape-end-start, var(--md-primary-tab-container-shape, var(--md-sys-shape-corner-none, 0px)))}.content.stacked{flex-direction:column;gap:2px}.content.stacked.has-icon.has-label{height:var(--_with-icon-and-label-text-container-height)}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const A = g`:host{display:inline-flex;align-items:center;justify-content:center;outline:none;padding:0 16px;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;user-select:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);color:var(--_label-text-color);z-index: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);--md-elevation-level: var(--_container-elevation)}md-focus-ring{--md-focus-ring-shape: 8px}:host([active]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button::before{background:var(--_container-color);content:"";inset:0;position:absolute;z-index:-1}.button::before,md-ripple,md-elevation{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;height:var(--_container-height);gap:8px}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}:host(:hover){color:var(--_hover-label-text-color);cursor:pointer}:host(:hover) ::slotted([slot=icon]){color:var(--_hover-icon-color)}:host(:focus){color:var(--_focus-label-text-color)}:host(:focus) ::slotted([slot=icon]){color:var(--_focus-icon-color)}:host(:active){color:var(--_pressed-label-text-color)}:host(:active) ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([active]) .indicator{opacity:1}:host([active]){color:var(--_active-label-text-color);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([active]) ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([active]:hover){color:var(--_active-hover-label-text-color)}:host([active]:hover) ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([active]:focus){color:var(--_active-focus-label-text-color)}:host([active]:focus) ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([active]:active){color:var(--_active-pressed-label-text-color)}:host([active]:active) ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){.indicator{background:CanvasText}}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let x = class extends P {
|
|
};
|
|
x.styles = [A, H];
|
|
x = r([
|
|
I("md-primary-tab")
|
|
], x);
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
class X extends l {
|
|
constructor() {
|
|
super(...arguments), this.fullWidthIndicator = !0;
|
|
}
|
|
}
|
|
/**
|
|
* @license
|
|
* Copyright 2024 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
const G = g`:host{--_active-indicator-color: var(--md-secondary-tab-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-secondary-tab-active-indicator-height, 2px);--_active-label-text-color: var(--md-secondary-tab-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-secondary-tab-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-secondary-tab-container-elevation, 0);--_container-height: var(--md-secondary-tab-container-height, 48px);--_focus-label-text-color: var(--md-secondary-tab-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-secondary-tab-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-secondary-tab-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-secondary-tab-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-secondary-tab-label-text-font, var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-secondary-tab-label-text-line-height, var(--md-sys-typescale-title-small-line-height, 1.25rem));--_label-text-size: var(--md-secondary-tab-label-text-size, var(--md-sys-typescale-title-small-size, 0.875rem));--_label-text-weight: var(--md-secondary-tab-label-text-weight, var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-secondary-tab-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-secondary-tab-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-secondary-tab-pressed-state-layer-opacity, 0.12);--_active-focus-icon-color: var(--md-secondary-tab-active-focus-icon-color, );--_active-focus-label-text-color: var(--md-secondary-tab-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-secondary-tab-active-hover-icon-color, );--_active-hover-label-text-color: var(--md-secondary-tab-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-secondary-tab-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-opacity: var(--md-secondary-tab-active-hover-state-layer-opacity, 0.08);--_active-icon-color: var(--md-secondary-tab-active-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_active-indicator-shape: var(--md-secondary-tab-active-indicator-shape, 0);--_active-pressed-icon-color: var(--md-secondary-tab-active-pressed-icon-color, );--_active-pressed-label-text-color: var(--md-secondary-tab-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-secondary-tab-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-opacity: var(--md-secondary-tab-active-pressed-state-layer-opacity, 0.12);--_label-text-color: var(--md-secondary-tab-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-icon-color: var(--md-secondary-tab-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-secondary-tab-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-secondary-tab-icon-size, 24px);--_icon-color: var(--md-secondary-tab-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-secondary-tab-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_container-shape-start-start: var(--md-secondary-tab-container-shape-start-start, var(--md-secondary-tab-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-start-end: var(--md-secondary-tab-container-shape-start-end, var(--md-secondary-tab-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-end: var(--md-secondary-tab-container-shape-end-end, var(--md-secondary-tab-container-shape, var(--md-sys-shape-corner-none, 0px)));--_container-shape-end-start: var(--md-secondary-tab-container-shape-end-start, var(--md-secondary-tab-container-shape, var(--md-sys-shape-corner-none, 0px)))}
|
|
`;
|
|
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
let _ = class extends X {
|
|
};
|
|
_.styles = [A, G];
|
|
_ = r([
|
|
I("md-secondary-tab")
|
|
], _);
|
|
const Z = C({
|
|
react: w,
|
|
tagName: "md-tabs",
|
|
elementClass: u
|
|
}), q = C({
|
|
react: w,
|
|
tagName: "md-primary-tab",
|
|
elementClass: x
|
|
}), J = C({
|
|
react: w,
|
|
tagName: "md-secondary-tab",
|
|
elementClass: _
|
|
}), ht = (n) => {
|
|
const { children: t, className: e, style: a, id: s, activeTabIndex: i, onChange: c, ...o } = n;
|
|
return /* @__PURE__ */ z(Z, { className: e, style: a, id: s, activeTabIndex: i, onChange: c, ...o, children: t });
|
|
}, pt = (n) => {
|
|
const { children: t, className: e, style: a, id: s, selected: i, variant: c = "primary", onClick: o, ...d } = n;
|
|
return /* @__PURE__ */ z(c === "primary" ? q : J, { className: e, style: a, id: s, selected: i, onClick: o, ...d, children: t });
|
|
};
|
|
export {
|
|
pt as Tab,
|
|
ht as Tabs
|
|
};
|