@getflip/swirl-components-react 0.27.0 → 0.29.0

package/dist/swirl-carousel.entry.c505727e.js

@@ -1,40 +0,0 @@
-import { r as n, h as l, H as r, g as a } from "./index.c72dbb36.js";
-import "react";
-import "react-dom";
-const d = ":host{position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button{pointer-events:auto;opacity:1}:host(:hover) .carousel__next-slide-button{pointer-events:auto;opacity:1}:host *{box-sizing:border-box}.carousel__slides{position:relative;display:flex;overflow-x:auto;width:100%;padding-right:var(--s-space-16);scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*){flex-basis:80%;flex-grow:0;flex-shrink:0;scroll-snap-align:start}@media (min-width: 768px){.carousel__slides ::slotted(*){flex-basis:45%}}@media (min-width: 992px){.carousel__slides ::slotted(*){flex-basis:30%}}@media (min-width: 1440px){.carousel__slides ::slotted(*){flex-basis:20%}}.carousel__previous-slide-button{position:absolute;z-index:1;top:50%;left:var(--s-space-20);transition:opacity 0.2s;transform:translateY(-50%);pointer-events:none;opacity:0}.carousel__next-slide-button{position:absolute;z-index:1;top:50%;right:var(--s-space-20);transition:opacity 0.2s;transform:translateY(-50%);pointer-events:none;opacity:0}", c = class {
-  constructor(e) {
-    n(this, e), this.onPreviousSlideButtonClick = () => {
-      this.previousSlide();
-    }, this.onNextSlideButtonClick = () => {
-      this.nextSlide();
-    }, this.label = void 0, this.nextSlideButtonLabel = "Next slide", this.previousSlideButtonLabel = "Previous slide", this.loopAround = !1;
-  }
-  previousSlide() {
-    const e = this.getSlides(), t = this.getActiveSlides(), i = t[0].previousElementSibling || (this.loopAround ? e[e.length - 1] : t[0]);
-    i == null || i.scrollIntoView({ block: "nearest", inline: "start" });
-  }
-  nextSlide() {
-    const e = this.getSlides(), t = this.getActiveSlides(), s = !Boolean(t[t.length - 1].nextElementSibling) && this.loopAround ? e[0] : t[0].nextElementSibling;
-    s == null || s.scrollIntoView({ block: "nearest", inline: "start" });
-  }
-  getSlides() {
-    return Array.from(this.el.querySelectorAll("swirl-carousel-slide"));
-  }
-  getActiveSlides() {
-    return this.getSlides().filter((t) => this.checkInView(t));
-  }
-  checkInView(e) {
-    let t = this.slidesContainer.scrollLeft, i = t + this.slidesContainer.clientWidth, s = e.offsetLeft, o = s + e.clientWidth;
-    return s >= t && o <= i;
-  }
-  render() {
-    return l(r, { "aria-label": this.label, "aria-roledescription": "carousel", class: "carousel", role: "group" }, l("swirl-button", { class: "carousel__previous-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-left></swirl-icon-arrow-left>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: !0, variant: "flat" }), l("swirl-button", { class: "carousel__next-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-right></swirl-icon-arrow-right>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: !0, variant: "flat" }), l("div", { "aria-live": "polite", class: "carousel__slides", ref: (e) => this.slidesContainer = e }, l("slot", null)));
-  }
-  get el() {
-    return a(this);
-  }
-};
-c.style = d;
-export {
-  c as swirl_carousel
-};

package/dist/swirl-chip.entry.ffe3367f.js

@@ -1,42 +0,0 @@
-import { r as o, h as r, H as c } from "./index.c72dbb36.js";
-import { c as n } from "./index-d280dafb.186cdb0e.js";
-import { a as l } from "./utils-61f188cc.4a43deab.js";
-import "react";
-import "react-dom";
-const d = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.chip{display:inline-flex;max-width:100%;height:2.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}.chip--interactive{cursor:pointer}.chip--interactive:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--intent-critical{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical .chip__icon{color:var(--s-icon-critical)}.chip--intent-success{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success .chip__icon{color:var(--s-icon-success)}.chip__avatar,.chip__icon{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}", h = class {
-  constructor(e) {
-    o(this, e), this.desktopMediaQuery = l(), this.desktopMediaQueryHandler = (i) => {
-      this.forceIconProps(i.matches);
-    }, this.avatar = void 0, this.icon = void 0, this.intent = "default", this.interactive = !1, this.label = void 0;
-  }
-  componentDidLoad() {
-    var e, i;
-    this.forceAvatarProps(), this.forceIconProps(this.desktopMediaQuery.matches), (i = (e = this.desktopMediaQuery).addEventListener) === null || i === void 0 || i.call(e, "change", this.desktopMediaQueryHandler);
-  }
-  disconnectedCallback() {
-    var e, i;
-    (i = (e = this.desktopMediaQuery).removeEventListener) === null || i === void 0 || i.call(e, "change", this.desktopMediaQueryHandler);
-  }
-  forceAvatarProps() {
-    if (!Boolean(this.avatarEl))
-      return;
-    const e = this.avatarEl.querySelector("swirl-avatar");
-    e == null || e.removeAttribute("badge"), e == null || e.removeAttribute("interactive"), e == null || e.removeAttribute("show-label"), e == null || e.removeAttribute("variant"), e == null || e.setAttribute("size", "xs");
-  }
-  forceIconProps(e) {
-    if (!Boolean(this.iconEl))
-      return;
-    const i = this.iconEl.children[0];
-    i == null || i.setAttribute("size", e ? "20" : "24");
-  }
-  render() {
-    const e = this.interactive ? "button" : "span", i = Boolean(this.avatar), a = !i && Boolean(this.icon), s = n("chip", `chip--intent-${this.intent}`, {
-      "chip--interactive": this.interactive
-    });
-    return r(c, null, r(e, { class: s, type: this.interactive ? "button" : void 0 }, i && r("span", { class: "chip__avatar", innerHTML: this.avatar, ref: (t) => this.avatarEl = t }), a && r("span", { class: "chip__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), r("span", { class: "chip__label" }, this.label)));
-  }
-};
-h.style = d;
-export {
-  h as swirl_chip
-};

package/dist/swirl-text.entry.ae8ad187.js

@@ -1,30 +0,0 @@
-import { r as l, h as e, H as r, g as n } from "./index.c72dbb36.js";
-import { c as a } from "./index-d280dafb.186cdb0e.js";
-import { b as o } from "./balancetext-fa49c64f.754e913c.js";
-import "react";
-import "react-dom";
-const x = ".sc-swirl-text-h{display:block;max-width:100%}.sc-swirl-text-h *.sc-swirl-text{box-sizing:border-box}.text.sc-swirl-text{margin:0;padding:0}.text--align-start.sc-swirl-text{text-align:start}.text--align-center.sc-swirl-text{text-align:center}.text--align-end.sc-swirl-text{text-align:end}.text--color-default.sc-swirl-text{color:var(--s-text-default)}.text--color-subdued.sc-swirl-text{color:var(--s-text-subdued)}.text--color-critical.sc-swirl-text{color:var(--s-text-critical)}.text--color-success.sc-swirl-text{color:var(--s-text-success)}.text--color-warning.sc-swirl-text{color:var(--s-text-warning)}.text--size-sm.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-base.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text--weight-normal.sc-swirl-text{font-weight:var(--s-font-weight-normal)}.text--weight-medium.sc-swirl-text{font-weight:var(--s-font-weight-medium)}.text--weight-semibold.sc-swirl-text{font-weight:var(--s-font-weight-semibold)}.text--weight-bold.sc-swirl-text{font-weight:var(--s-font-weight-bold)}.text--font-style-normal.sc-swirl-text{font-style:normal}.text--font-style-italic.sc-swirl-text{font-style:italic}.text--truncate.sc-swirl-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}", c = class {
-  constructor(t) {
-    l(this, t), this.align = "start", this.as = "p", this.balance = void 0, this.color = "default", this.fontStyle = "normal", this.size = "base", this.truncate = void 0, this.weight = "normal";
-  }
-  componentDidRender() {
-    this.rebalance();
-  }
-  onWindowResize() {
-    this.rebalance();
-  }
-  rebalance() {
-    !this.balance || !Boolean(this.textEl) || o(this.textEl);
-  }
-  render() {
-    const t = this.as, s = a("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, { "text--truncate": this.truncate });
-    return e(r, null, e(t, { class: s, ref: (i) => this.textEl = i }, e("slot", null)));
-  }
-  get el() {
-    return n(this);
-  }
-};
-c.style = x;
-export {
-  c as swirl_text
-};