@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/tabs-BfOtoeir.js

@@ -1,191 +0,0 @@
-import { n as h, t as s } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as b, html as p, nothing as m } from "lit";
-import { customElement as v, property as c, query as u, queryAssignedElements as y } from "lit/decorators.js";
-var x = b`
-  :host {
-    display: flex;
-    position: relative;
-    box-sizing: border-box;
-    border-bottom: 1px solid var(--md-sys-color-surface-variant, #E7E0EC);
-    overflow-x: auto;
-    scrollbar-width: none; /* Firefox */
-  }
-
-  :host::-webkit-scrollbar {
-    display: none; /* Safari and Chrome */
-  }
-
-  .tabs-container {
-    display: flex;
-    position: relative;
-    width: 100%;
-  }
-
-  .indicator {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    background-color: var(--md-sys-color-primary, #6750A4);
-    border-radius: 3px 3px 0 0;
-    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),
-                width 250ms cubic-bezier(0.2, 0, 0, 1);
-    pointer-events: none;
-  }
-`, g = b`
-  :host {
-    display: inline-flex;
-    flex: 1;
-    min-width: 90px;
-    height: 48px;
-    outline: none;
-    cursor: pointer;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: 0.38;
-  }
-
-  .tab {
-    position: relative;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    padding: 0 16px;
-    gap: 8px;
-    font-family: var(--md-sys-typescale-font-family, inherit);
-    font-size: var(--md-sys-typescale-title-small-size, 14px);
-    font-weight: 500;
-    line-height: 20px;
-    letter-spacing: 0.1px;
-    color: var(--md-sys-color-on-surface-variant, #49454F);
-    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  :host([active]) .tab {
-    color: var(--md-sys-color-primary, #6750A4);
-  }
-
-  .content {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-    z-index: 1;
-  }
-`, r = class extends h {
-  constructor(...t) {
-    super(...t), this.active = !1, this.disabled = !1, this.icon = "", this.label = "";
-  }
-  static {
-    this.styles = [h.styles, g];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", this.active ? "true" : "false"), this.tabIndex = this.active ? 0 : -1;
-  }
-  updated(t) {
-    super.updated(t), t.has("active") && (this.setAttribute("aria-selected", this.active ? "true" : "false"), this.tabIndex = this.active ? 0 : -1);
-  }
-  render() {
-    return p`
-      <div class="tab">
-        <md-ripple ?disabled=${this.disabled}></md-ripple>
-        <md-focus-ring></md-focus-ring>
-        <span class="content">
-          <slot name="icon">
-            ${this.icon ? p`<md-icon name=${this.icon}></md-icon>` : m}
-          </slot>
-          <slot>${this.label}</slot>
-        </span>
-      </div>
-    `;
-  }
-};
-s([c({
-  type: Boolean,
-  reflect: !0
-})], r.prototype, "active", void 0);
-s([c({
-  type: Boolean,
-  reflect: !0
-})], r.prototype, "disabled", void 0);
-s([c({ type: String })], r.prototype, "icon", void 0);
-s([c({ type: String })], r.prototype, "label", void 0);
-r = s([v("md-tab")], r);
-var l = class extends h {
-  constructor(...t) {
-    super(...t), this.activeIndex = 0, this.handleSlotChange = () => {
-      this.syncActiveTab();
-    }, this.handleClick = (e) => {
-      const i = e.target.closest("md-tab");
-      if (i && !i.disabled) {
-        const a = this.tabs.indexOf(i);
-        a !== -1 && a !== this.activeIndex && (this.activeIndex = a, this.syncActiveTab(), this.emitEvent("change", { activeIndex: this.activeIndex }));
-      }
-    }, this.handleKeyDown = (e) => {
-      const i = this.tabs.filter((d) => !d.disabled);
-      if (i.length === 0) return;
-      const a = this.tabs[this.activeIndex], o = i.indexOf(a);
-      let n = -1;
-      if (e.key === "ArrowRight" ? (e.preventDefault(), n = o < i.length - 1 ? o + 1 : 0) : e.key === "ArrowLeft" ? (e.preventDefault(), n = o > 0 ? o - 1 : i.length - 1) : e.key === "Home" ? (e.preventDefault(), n = 0) : e.key === "End" && (e.preventDefault(), n = i.length - 1), n !== -1 && i[n]) {
-        const d = i[n];
-        this.activeIndex = this.tabs.indexOf(d), this.syncActiveTab(), d.focus(), this.emitEvent("change", { activeIndex: this.activeIndex });
-      }
-    };
-  }
-  static {
-    this.styles = [h.styles, x];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "tablist"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updated(t) {
-    super.updated(t), t.has("activeIndex") && this.syncActiveTab();
-  }
-  syncActiveTab() {
-    !this.tabs || this.tabs.length === 0 || (this.tabs.forEach((t, e) => {
-      t.active = e === this.activeIndex;
-    }), this.updateIndicator());
-  }
-  updateIndicator() {
-    if (!this.indicatorElement || !this.tabs || this.tabs.length === 0) return;
-    const t = this.tabs[this.activeIndex];
-    if (t) {
-      const e = this.getBoundingClientRect(), i = t.getBoundingClientRect(), a = i.left - e.left, o = i.width;
-      this.indicatorElement.style.transform = `translateX(${a}px)`, this.indicatorElement.style.width = `${o}px`;
-    }
-  }
-  render() {
-    return p`
-      <div class="tabs-container">
-        <slot @slotchange=${this.handleSlotChange}></slot>
-        <div class="indicator"></div>
-      </div>
-    `;
-  }
-};
-s([c({
-  type: Number,
-  reflect: !0,
-  attribute: "active-index"
-})], l.prototype, "activeIndex", void 0);
-s([y({ selector: "md-tab" })], l.prototype, "tabs", void 0);
-s([u(".indicator")], l.prototype, "indicatorElement", void 0);
-l = s([v("md-tabs")], l);
-export {
-  l as n,
-  r as t
-};
-
-//# sourceMappingURL=tabs-BfOtoeir.js.map