@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/button-group-CNqvJx1n.js

@@ -1,143 +0,0 @@
-import { n as h, t as n } from "./decorate-DXuynaiA.js";
-import { css as c, html as u } from "lit";
-import { customElement as p, property as a, queryAssignedElements as f } from "lit/decorators.js";
-var y = c`
-  :host {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--md-button-group-gap, 8px);
-    box-sizing: border-box;
-    vertical-align: middle;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  :host([orientation='vertical']) {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  :host([full-width]) {
-    display: flex;
-    width: 100%;
-  }
-
-  :host([full-width]:not([orientation='vertical'])) ::slotted(*) {
-    flex: 1 1 0;
-    width: 100%;
-  }
-
-  :host([full-width][orientation='vertical']) ::slotted(*) {
-    width: 100%;
-  }
-
-  /* --- Connected Button Group --- */
-  :host([connected]) {
-    gap: 0;
-  }
-
-  :host([connected]:not([orientation='vertical'])) ::slotted(*:not(:first-child)) {
-    margin-inline-start: -1px;
-  }
-
-  :host([connected][orientation='vertical']) ::slotted(*:not(:first-child)) {
-    margin-top: -1px;
-  }
-
-  ::slotted(*) {
-    position: relative;
-    z-index: 0;
-  }
-
-  ::slotted(*:hover),
-  ::slotted(*:focus-within),
-  ::slotted(*:active) {
-    z-index: 1;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-`, r = class extends h {
-  constructor(...i) {
-    super(...i), this.orientation = "horizontal", this.connected = !1, this.shape = "pill", this.variant = "", this.fullWidth = !1, this.disabled = !1, this.handleSlotChange = () => {
-      this.syncChildren();
-    }, this.handleKeyDown = (t) => {
-      const e = this.getInteractiveChildren().filter((l) => !l.disabled && !l.hasAttribute("disabled"));
-      if (e.length === 0) return;
-      const d = document.activeElement, s = e.findIndex((l) => l === d || l.shadowRoot && l.shadowRoot.activeElement === d);
-      let o = -1;
-      t.key === "ArrowRight" || t.key === "ArrowDown" ? (t.preventDefault(), o = s >= 0 && s < e.length - 1 ? s + 1 : 0) : t.key === "ArrowLeft" || t.key === "ArrowUp" ? (t.preventDefault(), o = s > 0 ? s - 1 : e.length - 1) : t.key === "Home" ? (t.preventDefault(), o = 0) : t.key === "End" && (t.preventDefault(), o = e.length - 1), o !== -1 && e[o] && e[o]?.focus();
-    };
-  }
-  static {
-    this.styles = [h.styles, y];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group"), this.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updated(i) {
-    super.updated(i), (i.has("connected") || i.has("orientation") || i.has("shape") || i.has("variant") || i.has("disabled")) && this.syncChildren();
-  }
-  getInteractiveChildren() {
-    return this.slottedElements ? this.slottedElements.filter((i) => i.nodeType === Node.ELEMENT_NODE && !i.hasAttribute("slot")) : [];
-  }
-  syncChildren() {
-    const i = this.getInteractiveChildren();
-    if (i.length !== 0)
-      if (this.disabled && i.forEach((t) => {
-        "disabled" in t ? t.disabled = !0 : t.setAttribute("disabled", "");
-      }), this.variant && i.forEach((t) => {
-        "variant" in t && (t.variant = this.variant);
-      }), this.connected) {
-        let t = "var(--md-sys-shape-corner-full, 9999px)", e = "var(--md-sys-shape-corner-extra-small, 4px)";
-        this.shape === "rounded" ? (t = "var(--md-sys-shape-corner-medium, 12px)", e = "var(--md-sys-shape-corner-extra-small, 4px)") : this.shape === "square" && (t = "var(--md-sys-shape-corner-extra-small, 4px)", e = "0px"), i.length === 1 ? (i[0].style.setProperty("--md-button-border-radius", t), i[0].style.borderRadius = t) : i.forEach((d, s) => {
-          let o = "";
-          this.orientation === "vertical" ? s === 0 ? o = `${t} ${t} ${e} ${e}` : s === i.length - 1 ? o = `${e} ${e} ${t} ${t}` : o = `${e} ${e} ${e} ${e}` : s === 0 ? o = `${t} ${e} ${e} ${t}` : s === i.length - 1 ? o = `${e} ${t} ${t} ${e}` : o = `${e} ${e} ${e} ${e}`, d.style.setProperty("--md-button-border-radius", o), d.style.borderRadius = o;
-        });
-      } else i.forEach((t) => {
-        t.style.removeProperty("--md-button-border-radius"), t.style.borderRadius = "";
-      });
-  }
-  render() {
-    return u`<slot @slotchange=${this.handleSlotChange}></slot>`;
-  }
-};
-n([a({
-  type: String,
-  reflect: !0
-})], r.prototype, "orientation", void 0);
-n([a({
-  type: Boolean,
-  reflect: !0
-})], r.prototype, "connected", void 0);
-n([a({
-  type: String,
-  reflect: !0
-})], r.prototype, "shape", void 0);
-n([a({
-  type: String,
-  reflect: !0
-})], r.prototype, "variant", void 0);
-n([a({
-  type: Boolean,
-  attribute: "full-width",
-  reflect: !0
-})], r.prototype, "fullWidth", void 0);
-n([a({
-  type: Boolean,
-  reflect: !0
-})], r.prototype, "disabled", void 0);
-n([f({ flatten: !0 })], r.prototype, "slottedElements", void 0);
-r = n([p("md-button-group")], r);
-export {
-  r as t
-};
-
-//# sourceMappingURL=button-group-CNqvJx1n.js.map