@francofantomius/material-components 1.1.2 → 1.2.0

package/dist/chunks/ripple-squbKHhj.js

@@ -1,135 +0,0 @@
-import { n as l, t as n } from "./decorate-DXuynaiA.js";
-import { css as m, html as y } from "lit";
-import { customElement as v, property as p, state as b } from "lit/decorators.js";
-var w = m`
-  :host {
-    display: inline-flex;
-    position: absolute;
-    inset: 0;
-    overflow: hidden;
-    border-radius: inherit;
-    pointer-events: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :host([unbounded]) {
-    overflow: hidden;
-    border-radius: inherit;
-  }
-
-  :host([disabled]) {
-    opacity: 0;
-  }
-
-  .surface-container {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    overflow: hidden;
-  }
-
-  .surface {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background-color: currentColor;
-    opacity: 0;
-  }
-
-  :host(:focus-visible) .surface,
-  .surface.focused {
-    opacity: var(--md-sys-state-focus-opacity, 0.12);
-  }
-
-  .ripple {
-    position: absolute;
-    border-radius: 50%;
-    background-color: currentColor;
-    opacity: var(--md-sys-state-pressed-opacity, 0.12);
-    transform: scale(0);
-    pointer-events: none;
-    animation: md-ripple-expand 300ms cubic-bezier(0.2, 0, 0, 1) forwards;
-  }
-
-  .ripple.fading {
-    animation: md-ripple-fade-out 250ms linear forwards;
-  }
-
-  @keyframes md-ripple-expand {
-    from {
-      transform: scale(0);
-      opacity: var(--md-sys-state-pressed-opacity, 0.12);
-    }
-    to {
-      transform: scale(1);
-      opacity: var(--md-sys-state-pressed-opacity, 0.12);
-    }
-  }
-
-  @keyframes md-ripple-fade-out {
-    from {
-      opacity: var(--md-sys-state-pressed-opacity, 0.12);
-    }
-    to {
-      opacity: 0;
-    }
-  }
-`, o = class extends l {
-  constructor(...r) {
-    super(...r), this.unbounded = !1, this.disabled = !1, this.isFocused = !1, this.ripples = [], this.control = null, this.handleFocusIn = () => {
-      this.disabled || (this.isFocused = !0);
-    }, this.handleFocusOut = () => {
-      this.isFocused = !1;
-    }, this.handlePointerDown = (t) => {
-      if (this.disabled || t.button !== 0) return;
-      const s = this.getBoundingClientRect(), a = Math.max(s.width, s.height) * 2, d = a / 2, u = this.unbounded || !t.clientX ? s.width / 2 : t.clientX - s.left, h = this.unbounded || !t.clientY ? s.height / 2 : t.clientY - s.top, e = document.createElement("div");
-      e.className = "ripple", e.style.width = `${a}px`, e.style.height = `${a}px`, e.style.left = `${u - d}px`, e.style.top = `${h - d}px`;
-      const c = this.shadowRoot?.querySelector(".surface-container");
-      c && (c.appendChild(e), this.ripples.push(e));
-      const i = () => {
-        e.classList.add("fading"), setTimeout(() => {
-          e.remove(), this.ripples = this.ripples.filter((f) => f !== e);
-        }, 250), window.removeEventListener("pointerup", i), window.removeEventListener("pointercancel", i);
-      };
-      window.addEventListener("pointerup", i), window.addEventListener("pointercancel", i);
-    };
-  }
-  static {
-    this.styles = [l.styles, w];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setupControl();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.cleanupControl();
-  }
-  setupControl() {
-    const r = this.parentElement, t = this.getRootNode()?.host;
-    this.control = r || t, this.control && (this.control.addEventListener("pointerdown", this.handlePointerDown), this.control.addEventListener("focusin", this.handleFocusIn), this.control.addEventListener("focusout", this.handleFocusOut));
-  }
-  cleanupControl() {
-    this.control && (this.control.removeEventListener("pointerdown", this.handlePointerDown), this.control.removeEventListener("focusin", this.handleFocusIn), this.control.removeEventListener("focusout", this.handleFocusOut));
-  }
-  render() {
-    return y`
-      <div class="surface-container">
-        <div class="surface ${this.isFocused ? "focused" : ""}"></div>
-      </div>
-    `;
-  }
-};
-n([p({
-  type: Boolean,
-  reflect: !0
-})], o.prototype, "unbounded", void 0);
-n([p({
-  type: Boolean,
-  reflect: !0
-})], o.prototype, "disabled", void 0);
-n([b()], o.prototype, "isFocused", void 0);
-o = n([v("md-ripple")], o);
-export {
-  o as t
-};
-
-//# sourceMappingURL=ripple-squbKHhj.js.map

package/dist/chunks/segmented-button-B0BvGSQ7.js

@@ -1,265 +0,0 @@
-import { n as u, t as o } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as m, html as c, nothing as g } from "lit";
-import { customElement as b, property as r, queryAssignedElements as f } from "lit/decorators.js";
-var k = m`
-  :host {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    box-sizing: border-box;
-    height: 40px;
-    min-height: 40px;
-    padding: 0 16px;
-    background-color: transparent;
-    color: var(--md-sys-color-on-surface, #1D1B20);
-    font-family: var(--md-sys-typescale-font-family, inherit);
-    font-size: var(--md-sys-typescale-label-large-size, 14px);
-    font-weight: 500;
-    line-height: 20px;
-    letter-spacing: 0.1px;
-    cursor: pointer;
-    user-select: none;
-    outline: none;
-    text-decoration: none;
-    -webkit-tap-highlight-color: transparent;
-    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
-                color 150ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  :host([selected]) {
-    background-color: var(--md-sys-color-secondary-container, #E8DEF8);
-    color: var(--md-sys-color-on-secondary-container, #1D192B);
-  }
-
-  :host(:hover:not([disabled])) {
-    background-color: rgba(29, 27, 32, 0.08);
-  }
-
-  :host([selected]:hover:not([disabled])) {
-    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container, #E8DEF8) 90%, #1D192B 10%);
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: 0.38;
-    cursor: not-allowed;
-  }
-
-  .button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    gap: 8px;
-    position: relative;
-  }
-
-  .icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    --md-icon-size: 18px;
-  }
-
-  .checkmark-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    animation: checkmark-pop 150ms cubic-bezier(0.2, 0, 0, 1);
-  }
-
-  @keyframes checkmark-pop {
-    0% {
-      transform: scale(0.6);
-      opacity: 0;
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  .label {
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-`, v = m`
-  :host {
-    display: inline-flex;
-    align-items: stretch;
-    position: relative;
-    border-radius: var(--md-sys-shape-corner-full, 9999px);
-    border: 1px solid var(--md-sys-color-outline, #79747E);
-    background-color: transparent;
-    overflow: hidden;
-    box-sizing: border-box;
-    vertical-align: middle;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-    opacity: 0.38;
-  }
-
-  ::slotted(md-segmented-button:not(:first-child)) {
-    border-left: 1px solid var(--md-sys-color-outline, #79747E);
-  }
-`, a = class extends u {
-  constructor(...i) {
-    super(...i), this.selected = !1, this.disabled = !1, this.value = "", this.label = "", this.icon = "", this.noCheckmark = !1, this.handleClick = (e) => {
-      if (this.disabled) {
-        e.preventDefault(), e.stopImmediatePropagation();
-        return;
-      }
-      this.closest("md-segmented-button-set") || (this.selected = !this.selected, this.emitEvent("change", {
-        selected: this.selected,
-        value: this.value || this.label || this.textContent?.trim() || ""
-      }));
-    }, this.handleKeyDown = (e) => {
-      this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.click());
-    };
-  }
-  static {
-    this.styles = [u.styles, k];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "button"), this.updateAriaAttributes(), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updated(i) {
-    super.updated(i), (i.has("selected") || i.has("disabled")) && this.updateAriaAttributes();
-  }
-  updateAriaAttributes() {
-    this.setAttribute("aria-pressed", this.selected ? "true" : "false"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  render() {
-    const i = this.selected && !this.noCheckmark, e = !!(this.icon || this.assignedIcons && this.assignedIcons.length > 0);
-    return c`
-      <div class="button">
-        <md-ripple ?disabled=${this.disabled}></md-ripple>
-        <md-focus-ring></md-focus-ring>
-
-        ${i ? c`
-              <span class="icon checkmark-icon" aria-hidden="true">
-                <md-icon name="check" size="18"></md-icon>
-              </span>
-            ` : e ? c`
-              <span class="icon">
-                <slot name="icon">
-                  ${this.icon ? c`<md-icon name=${this.icon} size="18"></md-icon>` : g}
-                </slot>
-              </span>
-            ` : c`<slot name="icon"></slot>`}
-
-        <span class="label">
-          <slot>${this.label}</slot>
-        </span>
-      </div>
-    `;
-  }
-};
-o([r({
-  type: Boolean,
-  reflect: !0
-})], a.prototype, "selected", void 0);
-o([r({
-  type: Boolean,
-  reflect: !0
-})], a.prototype, "disabled", void 0);
-o([r({ type: String })], a.prototype, "value", void 0);
-o([r({ type: String })], a.prototype, "label", void 0);
-o([r({ type: String })], a.prototype, "icon", void 0);
-o([r({
-  type: Boolean,
-  attribute: "no-checkmark",
-  reflect: !0
-})], a.prototype, "noCheckmark", void 0);
-o([f({ slot: "icon" })], a.prototype, "assignedIcons", void 0);
-a = o([b("md-segmented-button")], a);
-var h = class extends u {
-  constructor(...i) {
-    super(...i), this.multiselect = !1, this.disabled = !1, this.handleSlotChange = () => {
-      this.syncRovingTabIndex(), this.disabled && this.syncDisabled();
-    }, this.handleClick = (e) => {
-      if (this.disabled) return;
-      const t = e.target.closest("md-segmented-button");
-      if (!t || t.disabled || !this.buttons.includes(t)) return;
-      const n = this.buttons.indexOf(t);
-      this.multiselect ? t.selected = !t.selected : this.buttons.forEach((s) => {
-        s.selected = s === t;
-      }), this.syncRovingTabIndex();
-      const d = this.buttons.filter((s) => s.selected).map((s) => s.value || s.label || s.textContent?.trim() || ""), l = t.value || t.label || t.textContent?.trim() || "";
-      this.emitEvent("change", {
-        target: t,
-        index: n,
-        selected: t.selected,
-        value: l,
-        values: d
-      });
-    }, this.handleKeyDown = (e) => {
-      const t = this.buttons.filter((s) => !s.disabled);
-      if (t.length === 0) return;
-      const n = document.activeElement, d = t.findIndex((s) => s === n || s.shadowRoot && s.shadowRoot.activeElement === n);
-      let l = -1;
-      if (e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), l = d >= 0 && d < t.length - 1 ? d + 1 : 0) : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), l = d > 0 ? d - 1 : t.length - 1) : e.key === "Home" ? (e.preventDefault(), l = 0) : e.key === "End" && (e.preventDefault(), l = t.length - 1), l !== -1 && t[l]) {
-        const s = t[l];
-        this.buttons.forEach((p) => {
-          p.tabIndex = p === s ? 0 : -1;
-        }), s.focus();
-      }
-    };
-  }
-  static {
-    this.styles = [u.styles, v];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "group"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updated(i) {
-    super.updated(i), i.has("disabled") && this.syncDisabled();
-  }
-  syncDisabled() {
-    this.buttons && this.buttons.forEach((i) => {
-      i.disabled = this.disabled;
-    });
-  }
-  syncRovingTabIndex() {
-    if (!this.buttons || this.buttons.length === 0) return;
-    const i = this.buttons.find((n) => n.selected && !n.disabled), e = this.buttons.find((n) => !n.disabled), t = i || e;
-    this.buttons.forEach((n) => {
-      n.tabIndex = n === t ? 0 : -1;
-    });
-  }
-  render() {
-    return c`<slot @slotchange=${this.handleSlotChange}></slot>`;
-  }
-};
-o([r({
-  type: Boolean,
-  reflect: !0
-})], h.prototype, "multiselect", void 0);
-o([r({
-  type: Boolean,
-  reflect: !0
-})], h.prototype, "disabled", void 0);
-o([f({ selector: "md-segmented-button" })], h.prototype, "buttons", void 0);
-h = o([b("md-segmented-button-set")], h);
-export {
-  h as n,
-  a as t
-};
-
-//# sourceMappingURL=segmented-button-B0BvGSQ7.js.map