npm - @getflip/swirl-components - Versions diffs - 0.2.0 → 0.3.0 - Mend

@getflip/swirl-components 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1766) hide show

package/dist/components/flip-popover2.js ADDED Viewed

@@ -0,0 +1,190 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as computePosition, a as autoUpdate, s as shift, f as flip } from './floating-ui.dom.esm.js';
+import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.esm.js';
+import { c as classnames } from './index2.js';
+import { i as isMobileViewport, q as querySelectorAllDeep } from './utils.js';
+const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-xl);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}";
+const FlipPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.placement = "bottom-start";
+    this.active = false;
+    this.closing = false;
+    this.onFocusOut = (event) => {
+      if (!this.active) {
+        return;
+      }
+      const target = event.relatedTarget || event.target;
+      const popoverLostFocus = !this.el.contains(target);
+      if (popoverLostFocus) {
+        this.close();
+      }
+    };
+    this.toggle = (event) => {
+      event.stopPropagation();
+      if (this.active) {
+        this.close();
+      }
+      else {
+        this.open();
+      }
+    };
+    this.onKeydown = (event) => {
+      if (event.code === "Escape" && this.active) {
+        this.close();
+      }
+    };
+    this.reposition = async () => {
+      const mobile = isMobileViewport();
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
+        return;
+      }
+      if (mobile) {
+        this.position = undefined;
+        return;
+      }
+      this.position = await computePosition(this.triggerEl, this.contentContainer, {
+        middleware: [shift(), flip()],
+        placement: this.placement,
+        strategy: "fixed",
+      });
+    };
+  }
+  componentDidLoad() {
+    this.connectTrigger();
+    this.updateChildMenuItems();
+    this.updateTriggerAttributes();
+  }
+  disconnectedCallback() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  onWindowClick(event) {
+    const target = event.target;
+    if (!this.el.contains(target)) {
+      this.close();
+    }
+  }
+  /**
+   * Close the popover.
+   * @returns
+   */
+  async close() {
+    var _a;
+    if (this.closing) {
+      return;
+    }
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    this.closing = true;
+    setTimeout(() => {
+      this.active = false;
+      this.closing = false;
+      this.updateTriggerAttributes();
+    }, 150);
+    this.unlockBodyScroll();
+    (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * Open the popover.
+   * @returns
+   */
+  async open() {
+    this.active = true;
+    this.updateChildMenuItems();
+    this.updateTriggerAttributes();
+    requestAnimationFrame(async () => {
+      await this.reposition();
+      if (this.childMenuItems.length > 0) {
+        this.childMenuItems[0].focus();
+      }
+      else {
+        this.contentContainer.focus();
+      }
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+      this.scrollContainer.scrollTop = 0;
+      this.lockBodyScroll();
+    });
+  }
+  connectTrigger() {
+    var _a;
+    const triggerComponent = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
+    this.triggerEl = ((triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.children[0]) ||
+      ((_a = triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0]) ||
+      triggerComponent);
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    this.triggerEl.addEventListener("click", this.toggle);
+  }
+  updateTriggerAttributes() {
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    this.triggerEl.setAttribute("aria-controls", this.popoverId);
+    this.triggerEl.setAttribute("aria-expanded", String(this.active));
+    this.triggerEl.setAttribute("aria-haspopup", "dialog");
+  }
+  updateChildMenuItems() {
+    this.childMenuItems = querySelectorAllDeep(this.el, '[role="menuitem"]');
+  }
+  lockBodyScroll() {
+    const mobile = isMobileViewport();
+    if (!mobile) {
+      return;
+    }
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    var _a, _b;
+    const className = classnames("popover", {
+      "popover--closing": this.closing,
+      "popover--active": this.active,
+      "popover--inactive": !this.active,
+    });
+    return (h(Host, { id: this.popoverId, onFocusout: this.onFocusOut }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
+        top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
+        left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+      } }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.close })))));
+  }
+  get el() { return this; }
+  static get style() { return flipPopoverCss; }
+}, [1, "flip-popover", {
+    "label": [1],
+    "placement": [1],
+    "popoverId": [1, "popover-id"],
+    "trigger": [1],
+    "active": [32],
+    "closing": [32],
+    "position": [32],
+    "close": [64],
+    "open": [64]
+  }, [[8, "click", "onWindowClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipPopover);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+export { FlipPopover as F, defineCustomElement as d };
+//# sourceMappingURL=flip-popover2.js.map

package/dist/components/flip-popover2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-popover2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,ypHAAypH;;MC8BnqH,WAAW;EALxB;;;;IASU,cAAS,GAAe,cAAc,CAAC;IAItC,WAAM,GAAG,KAAK,CAAC;IACf,YAAO,GAAG,KAAK,CAAC;IA4BzB,eAAU,GAAG,CAAC,KAAiB;MAC7B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;QAChB,OAAO;OACR;MAED,MAAM,MAAM,GACT,KAAK,CAAC,aAA6B,IAAK,KAAK,CAAC,MAAsB,CAAC;MAExE,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;MAEnD,IAAI,gBAAgB,EAAE;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAiEF,WAAM,GAAG,CAAC,KAAY;MACpB,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,MAAM,EAAE;QACf,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;WAAM;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAmBM,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;QAC1C,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAgBM,eAAU,GAAG;MACnB,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAC;MAElC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE;QAC/D,OAAO;OACR;MAED,IAAI,MAAM,EAAE;QACV,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,OAAO;OACR;MAED,IAAI,CAAC,QAAQ,GAAG,MAAM,eAAe,CACnC,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,gBAAgB,EACrB;QACE,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC;QAC7B,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,OAAO;OAClB,CACF,CAAC;KACH,CAAC;GAqDH;EA1NC,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EAED,oBAAoB;IAClB,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;GACxC;EAGD,aAAa,CAAC,KAAiB;IAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;IAE3C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;MAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;GACF;;;;;EAsBM,MAAM,KAAK;;IAChB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,OAAO;KACR;IAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,UAAU,CAAC;MACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC,EAAE,GAAG,CAAC,CAAC;IAER,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAExB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;GACzB;;;;;EAOM,MAAM,IAAI;IACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IAEnB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAE/B,qBAAqB,CAAC;MACpB,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;QACjC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAiB,CAAC,KAAK,EAAE,CAAC;OACjD;WAAM;QACL,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;OAC/B;MAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;QAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;MAED,IAAI,CAAC,iBAAiB,GAAG,UAAU,CACjC,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,UAAU,CAChB,CAAC;MAEF,IAAI,CAAC,eAAe,CAAC,SAAS,GAAG,CAAC,CAAC;MAEnC,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB,CAAC,CAAC;GACJ;EAYO,cAAc;;IACpB,MAAM,gBAAgB,GAAG,oBAAoB,CAC3C,QAAQ,CAAC,IAAI,EACb,IAAI,IAAI,CAAC,OAAO,EAAE,CACnB,CAAC,CAAC,CAAC,CAAC;IAEL,IAAI,CAAC,SAAS,IAAI,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,QAAQ,CAAC,CAAC,CAAC;OAC7C,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,UAAU,0CAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;MACzC,gBAAgB,CAAgB,CAAC;IAEnC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;MAC5B,OAAO;KACR;IAED,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;GACvD;EAQO,uBAAuB;IAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;MAC5B,OAAO;KACR;IAED,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAC7D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;GACxD;EAEO,oBAAoB;IAC1B,IAAI,CAAC,cAAc,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;GAC1E;EAyBO,cAAc;IACpB,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAC;IAElC,IAAI,CAAC,MAAM,EAAE;MACX,OAAO;KACR;IAED,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;GACzC;EAEO,gBAAgB;IACtB,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;GACxC;EAED,MAAM;;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE;MACtC,kBAAkB,EAAE,IAAI,CAAC,OAAO;MAChC,iBAAiB,EAAE,IAAI,CAAC,MAAM;MAC9B,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM;KAClC,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,IACnD,WAAK,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,IAC9C,0BACe,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,gBAChC,IAAI,CAAC,KAAK,EACtB,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,IAAI,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,KAAK,EAAE;QACL,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,CAAC,IAAI,GAAG,EAAE;QAC1D,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,CAAC,IAAI,GAAG,EAAE;OAC5D,IAED,YAAM,KAAK,EAAC,iBAAiB,GAAQ,EACrC,WACE,KAAK,EAAC,2BAA2B,EACjC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,IAExC,eAAa,CACT,CACF,EACL,IAAI,CAAC,MAAM,KACV,WAAK,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,GAAQ,CAC3D,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-popover/flip-popover.css?tag=flip-popover&encapsulation=shadow","./src/components/flip-popover/flip-popover.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n position: relative;\n z-index: var(--s-z-40);\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.popover--active:not(.popover--closing) {\n & .popover__backdrop {\n animation: 0.15s popover-fade-in;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n\n & .popover__content {\n animation: 0.15s popover-slide-in;\n\n @media (--from-tablet) {\n transform-origin: top left;\n animation: 0.15s popover-fade-scale-in;\n }\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n}\n\n.popover--closing {\n & .popover__backdrop {\n animation: 0.15s popover-fade-out;\n animation-fill-mode: forwards;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n\n & .popover__content {\n animation: 0.15s popover-slide-out;\n animation-fill-mode: forwards;\n\n @media (--from-tablet) {\n animation: 0.15s popover-fade-out;\n }\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n }\n}\n\n.popover--inactive {\n & .popover__content {\n display: none;\n }\n}\n\n.popover__backdrop {\n position: fixed;\n z-index: 0;\n background-color: rgba(0, 0, 0, 0.2);\n animation: 0.15s popover-backdrop-fade-in;\n inset: 0;\n\n @media (prefers-reduced-motion) {\n animation: none;\n }\n\n @media (--from-tablet) {\n display: none;\n }\n}\n\n.popover__content {\n position: fixed;\n z-index: 2;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: hidden;\n border-top-left-radius: var(--s-border-radius-xl);\n border-top-right-radius: var(--s-border-radius-xl);\n background-color: var(--s-surface-overlay-default);\n\n @media (--from-tablet) {\n right: unset;\n bottom: unset;\n left: unset;\n max-width: 22.5rem;\n border-radius: var(--s-border-radius-xl);\n animation: none;\n box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);\n }\n}\n\n.popover__scroll-container {\n overflow-x: hidden;\n overflow-y: auto;\n width: 100%;\n max-height: 90vh;\n padding-top: var(--s-space-24);\n padding-bottom: var(--s-space-24);\n overscroll-behavior: contain;\n\n @media (--from-tablet) {\n max-height: 22rem;\n padding-top: var(--s-space-8);\n padding-bottom: var(--s-space-8);\n }\n}\n\n.popover__handle {\n position: absolute;\n top: var(--s-space-8);\n left: 50%;\n width: 2.5rem;\n height: 0.375rem;\n border-radius: 0.1875rem;\n background-color: var(--s-border-default);\n transform: translatex(-50%);\n\n @media (--from-tablet) {\n display: none;\n }\n}\n\n@keyframes popover-slide-in {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes popover-slide-out {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n}\n\n@keyframes popover-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes popover-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n@keyframes popover-fade-scale-in {\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n","import {\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n Placement,\n shift,\n} from \"@floating-ui/dom\";\nimport {\n Component,\n Element,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { isMobileViewport, querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The popover content.\n */\n@Component({\n shadow: true,\n styleUrl: \"flip-popover.css\",\n tag: \"flip-popover\",\n})\nexport class FlipPopover {\n @Element() el: HTMLElement;\n\n @Prop() label!: string;\n @Prop() placement?: Placement = \"bottom-start\";\n @Prop() popoverId!: string;\n @Prop() trigger!: string;\n\n @State() active = false;\n @State() closing = false;\n @State() position: ComputePositionReturn;\n\n private childMenuItems: HTMLElement[];\n private disableAutoUpdate: any;\n private contentContainer: HTMLDivElement;\n private scrollContainer: HTMLDivElement;\n private triggerEl: HTMLElement;\n\n componentDidLoad() {\n this.connectTrigger();\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n }\n\n disconnectedCallback() {\n enableBodyScroll(this.scrollContainer);\n }\n\n @Listen(\"click\", { target: \"window\" })\n onWindowClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (!this.el.contains(target)) {\n this.close();\n }\n }\n\n onFocusOut = (event: FocusEvent) => {\n if (!this.active) {\n return;\n }\n\n const target =\n (event.relatedTarget as HTMLElement) || (event.target as HTMLElement);\n\n const popoverLostFocus = !this.el.contains(target);\n\n if (popoverLostFocus) {\n this.close();\n }\n };\n\n /**\n * Close the popover.\n * @returns\n */\n @Method()\n public async close() {\n if (this.closing) {\n return;\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.closing = true;\n\n setTimeout(() => {\n this.active = false;\n this.closing = false;\n this.updateTriggerAttributes();\n }, 150);\n\n this.unlockBodyScroll();\n\n this.triggerEl?.focus();\n }\n\n /**\n * Open the popover.\n * @returns\n */\n @Method()\n public async open() {\n this.active = true;\n\n this.updateChildMenuItems();\n this.updateTriggerAttributes();\n\n requestAnimationFrame(async () => {\n await this.reposition();\n\n if (this.childMenuItems.length > 0) {\n (this.childMenuItems[0] as HTMLElement).focus();\n } else {\n this.contentContainer.focus();\n }\n\n if (this.disableAutoUpdate) {\n this.disableAutoUpdate();\n }\n\n this.disableAutoUpdate = autoUpdate(\n this.triggerEl,\n this.contentContainer,\n this.reposition\n );\n\n this.scrollContainer.scrollTop = 0;\n\n this.lockBodyScroll();\n });\n }\n\n toggle = (event: Event) => {\n event.stopPropagation();\n\n if (this.active) {\n this.close();\n } else {\n this.open();\n }\n };\n\n private connectTrigger() {\n const triggerComponent = querySelectorAllDeep(\n document.body,\n `#${this.trigger}`\n )[0];\n\n this.triggerEl = (triggerComponent?.children[0] ||\n triggerComponent?.shadowRoot?.children[0] ||\n triggerComponent) as HTMLElement;\n\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.addEventListener(\"click\", this.toggle);\n }\n\n private onKeydown = (event: KeyboardEvent) => {\n if (event.code === \"Escape\" && this.active) {\n this.close();\n }\n };\n\n private updateTriggerAttributes() {\n if (!Boolean(this.triggerEl)) {\n return;\n }\n\n this.triggerEl.setAttribute(\"aria-controls\", this.popoverId);\n this.triggerEl.setAttribute(\"aria-expanded\", String(this.active));\n this.triggerEl.setAttribute(\"aria-haspopup\", \"dialog\");\n }\n\n private updateChildMenuItems() {\n this.childMenuItems = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n }\n\n private reposition = async () => {\n const mobile = isMobileViewport();\n\n if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {\n return;\n }\n\n if (mobile) {\n this.position = undefined;\n return;\n }\n\n this.position = await computePosition(\n this.triggerEl,\n this.contentContainer,\n {\n middleware: [shift(), flip()],\n placement: this.placement,\n strategy: \"fixed\",\n }\n );\n };\n\n private lockBodyScroll() {\n const mobile = isMobileViewport();\n\n if (!mobile) {\n return;\n }\n\n disableBodyScroll(this.scrollContainer);\n }\n\n private unlockBodyScroll() {\n enableBodyScroll(this.scrollContainer);\n }\n\n render() {\n const className = classnames(\"popover\", {\n \"popover--closing\": this.closing,\n \"popover--active\": this.active,\n \"popover--inactive\": !this.active,\n });\n\n return (\n <Host id={this.popoverId} onFocusout={this.onFocusOut}>\n <div class={className} onKeyDown={this.onKeydown}>\n <div\n aria-hidden={!this.active ? \"true\" : \"false\"}\n aria-label={this.label}\n class=\"popover__content\"\n role=\"dialog\"\n tabindex=\"-1\"\n ref={(el) => (this.contentContainer = el)}\n style={{\n top: Boolean(this.position) ? `${this.position?.y}px` : \"\",\n left: Boolean(this.position) ? `${this.position?.x}px` : \"\",\n }}\n >\n <span class=\"popover__handle\"></span>\n <div\n class=\"popover__scroll-container\"\n ref={(el) => (this.scrollContainer = el)}\n >\n <slot></slot>\n </div>\n </div>\n {this.active && (\n <div class=\"popover__backdrop\" onClick={this.close}></div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-progress-indicator.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface FlipProgressIndicator extends Components.FlipProgressIndicator, HTMLElement {}
+export const FlipProgressIndicator: {
+  prototype: FlipProgressIndicator;
+  new (): FlipProgressIndicator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-progress-indicator.js ADDED Viewed

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+const flipProgressIndicatorCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";
+const FlipProgressIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = "m";
+    this.value = 0;
+    this.variant = "bar";
+  }
+  render() {
+    const className = classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
+    const strokeWidth = this.size === "m" ? 4 : 2;
+    const radius = this.size === "m" ? 20 : 10;
+    const circumference = Math.round(radius * 2 * Math.PI);
+    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
+    return (h(Host, { class: this.variant }, this.variant === "bar" && (h("progress", { "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+  }
+  static get style() { return flipProgressIndicatorCss; }
+}, [1, "flip-progress-indicator", {
+    "label": [1],
+    "size": [1],
+    "value": [2],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-progress-indicator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-progress-indicator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipProgressIndicator$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+const FlipProgressIndicator = FlipProgressIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+export { FlipProgressIndicator, defineCustomElement };
+//# sourceMappingURL=flip-progress-indicator.js.map

package/dist/components/flip-progress-indicator.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-progress-indicator.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,i3DAAi3D;;MCYr4DA,uBAAqB;EALlC;;;;IAOU,SAAI,GAA+B,GAAG,CAAC;IACvC,UAAK,GAAY,CAAC,CAAC;IACnB,YAAO,GAAkC,KAAK,CAAC;GAmExD;EAjEC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAC1B,oBAAoB,EACpB,4BAA4B,IAAI,CAAC,IAAI,EAAE,EACvC,+BAA+B,IAAI,CAAC,OAAO,EAAE,CAC9C,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC;IAE1E,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IACtB,IAAI,CAAC,OAAO,KAAK,KAAK,KACrB,8BACc,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,CAAC,KAAK,GACP,CACb,EACA,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,YACE,IAAI,EAAC,aAAa,gBACN,IAAI,CAAC,KAAK,mBACP,GAAG,mBACH,CAAC,mBACD,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,SAAS,IAEhB,WACE,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,CAAC,MAAM,GAAG,WAAW,IAAI,CAAC,IACxC,CAAC,MAAM,GAAG,WAAW,IAAI,CAC3B,EAAE,IAEF,cACE,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBACG,WAAW,GACzB,EACF,cACE,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,EAAE,EAAE,MAAM,GAAG,WAAW,EACxB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBACG,WAAW,sBACP,aAAa,uBACZ,UAAU,GAC7B,CACE,CACD,CACR,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipProgressIndicator"],"sources":["./src/components/flip-progress-indicator/flip-progress-indicator.css?tag=flip-progress-indicator&encapsulation=shadow","./src/components/flip-progress-indicator/flip-progress-indicator.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n:host(.circle) {\n display: inline-flex;\n width: auto;\n}\n\n.progress-indicator {\n}\n\n.progress-indicator--variant-bar {\n display: block;\n width: 100%;\n height: 0.25rem;\n border: none;\n appearance: none;\n\n &::-webkit-progress-bar {\n border-radius: 0.125rem;\n background-color: var(--s-surface-raised-default);\n }\n\n &::-webkit-progress-value {\n border-radius: 0.125rem;\n background-color: var(--s-surface-highlight-default);\n transition: width 0.25s;\n }\n\n &::-moz-progress-bar {\n height: 0.25rem;\n border-radius: 0.125rem;\n background-color: var(--s-surface-highlight-default);\n transition: width 0.25s;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n &.progress-indicator--size-s {\n height: 0.125rem;\n\n &::-webkit-progress-bar {\n border-radius: 0.0625rem;\n }\n\n &::-webkit-progress-value {\n border-radius: 0.0625rem;\n }\n\n &::-moz-progress-bar {\n height: 0.125rem;\n border-radius: 0.0625rem;\n }\n }\n}\n\n.progress-indicator--variant-circle {\n position: relative;\n display: inline-flex;\n overflow: hidden;\n width: 3rem;\n height: 3rem;\n\n &.progress-indicator--size-s {\n width: 1.5rem;\n height: 1.5rem;\n }\n}\n\n.progress-indicator__circle {\n position: absolute;\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n inset: 0;\n}\n\n.progress-indicator__circle-background {\n stroke: var(--s-border-default);\n stroke-linecap: round;\n}\n\n.progress-indicator__circle-value {\n transition: stroke-dashoffset 0.25s;\n stroke: var(--s-interactive-primary-default);\n stroke-linecap: round;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipProgressIndicatorSize = \"s\" | \"m\";\n\nexport type FlipProgressIndicatorVariant = \"bar\" | \"circle\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-progress-indicator.css\",\n tag: \"flip-progress-indicator\",\n})\nexport class FlipProgressIndicator {\n @Prop() label!: string;\n @Prop() size?: FlipProgressIndicatorSize = \"m\";\n @Prop() value?: number = 0;\n @Prop() variant?: FlipProgressIndicatorVariant = \"bar\";\n\n render() {\n const className = classnames(\n \"progress-indicator\",\n `progress-indicator--size-${this.size}`,\n `progress-indicator--variant-${this.variant}`\n );\n\n const strokeWidth = this.size === \"m\" ? 4 : 2;\n const radius = this.size === \"m\" ? 20 : 10;\n const circumference = Math.round(radius * 2 * Math.PI);\n const dashOffset = Math.round(circumference * ((100 - this.value) / 100));\n\n return (\n <Host class={this.variant}>\n {this.variant === \"bar\" && (\n <progress\n aria-label={this.label}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={this.value}\n class={className}\n max={100}\n value={this.value}\n ></progress>\n )}\n {this.variant === \"circle\" && (\n <span\n role=\"progressbar\"\n aria-label={this.label}\n aria-valuemax={100}\n aria-valuemin={0}\n aria-valuenow={this.value}\n class={className}\n >\n <svg\n class=\"progress-indicator__circle\"\n focusable=\"false\"\n viewBox={`0 0 ${(radius + strokeWidth) * 2} ${\n (radius + strokeWidth) * 2\n }`}\n >\n <circle\n class=\"progress-indicator__circle-background\"\n cx={radius + strokeWidth}\n cy={radius + strokeWidth}\n r={radius}\n fill=\"none\"\n stroke-width={strokeWidth}\n />\n <circle\n class=\"progress-indicator__circle-value\"\n cx={radius + strokeWidth}\n cy={radius + strokeWidth}\n r={radius}\n fill=\"none\"\n stroke-width={strokeWidth}\n stroke-dasharray={circumference}\n stroke-dashoffset={dashOffset}\n />\n </svg>\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-radio-group.js CHANGED Viewed

@@ -28,6 +28,7 @@ const FlipRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       radio.addEventListener("valueChange", () => {
         if (radio.checked === true || radio.checked === "true") {
           this.valueChange.emit(radio.value);
+          this.value = radio.value;
           this.radioButtons.forEach((r, k) => {
             if (String(k) === key) {
               return;
@@ -39,12 +40,13 @@ const FlipRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
   }
   render() {
-    return (h(Host, { role: "radiogroup" }, h("div", { class: "radio-group" }, h("slot", null))));
+    return (h(Host, { "aria-describedby": this.flipAriaDescribedby, role: "radiogroup" }, h("div", { class: "radio-group" }, h("slot", null))));
   }
   get el() { return this; }
   static get style() { return flipRadioGroupCss; }
 }, [6, "flip-radio-group", {
-    "value": [1025]
+    "flipAriaDescribedby": [1, "flip-aria-describedby"],
+    "value": [1537]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -65,3 +67,5 @@ const FlipRadioGroup = FlipRadioGroup$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipRadioGroup, defineCustomElement };
+//# sourceMappingURL=flip-radio-group.js.map

package/dist/components/flip-radio-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-radio-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,mMAAmM;;MCsBhNA,gBAAc;;;;;;EAUzB,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IACvE,IAAI,CAAC,SAAS,EAAE,CAAC;IACjB,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAEO,SAAS;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,OAAO;KACR;IAED,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAC3C,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CACtC,CAAC;IAEF,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;MAC5B,OAAO;KACR;IAED,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;GAC/B;EAEO,kBAAkB;IACxB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;MAC5D,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE;QACpC,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;UACtD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;UACnC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;UAEzB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;cACrB,OAAO;aACR;YAED,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC;WACnB,CAAC,CAAC;SACJ;OACF,CAAC,CAAC;KACJ;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,wBAAmB,IAAI,CAAC,mBAAmB,EAAE,IAAI,EAAC,YAAY,IACjE,WAAK,KAAK,EAAC,aAAa,IACtB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipRadioGroup"],"sources":["./src/components/flip-radio-group/flip-radio-group.css?tag=flip-radio-group&encapsulation=scoped","./src/components/flip-radio-group/flip-radio-group.tsx"],"sourcesContent":[":host {\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: var(--s-space-4);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from \"@stencil/core\";\n\n@Component({\n /**\n * Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n */\n scoped: true,\n shadow: false,\n styleUrl: \"flip-radio-group.css\",\n tag: \"flip-radio-group\",\n})\nexport class FlipRadioGroup {\n @Element() el: HTMLElement;\n\n @Prop() flipAriaDescribedby?: string;\n @Prop({ mutable: true, reflect: true }) value?: string;\n\n @Event() valueChange: EventEmitter<string>;\n\n private radioButtons: HTMLFlipRadioElement[];\n\n componentDidLoad() {\n this.radioButtons = Array.from(this.el.querySelectorAll(\"flip-radio\"));\n this.initValue();\n this.handleValueChanges();\n }\n\n private initValue() {\n if (this.value === undefined) {\n return;\n }\n\n const radioWithValue = this.radioButtons.find(\n (radio) => radio.value === this.value\n );\n\n if (!Boolean(radioWithValue)) {\n return;\n }\n\n radioWithValue.checked = true;\n }\n\n private handleValueChanges() {\n for (const [key, radio] of Object.entries(this.radioButtons)) {\n radio.addEventListener(\"valueChange\", () => {\n if (radio.checked === true || radio.checked === \"true\") {\n this.valueChange.emit(radio.value);\n this.value = radio.value;\n\n this.radioButtons.forEach((r, k) => {\n if (String(k) === key) {\n return;\n }\n\n r.checked = false;\n });\n }\n });\n }\n }\n\n render() {\n return (\n <Host aria-describedby={this.flipAriaDescribedby} role=\"radiogroup\">\n <div class=\"radio-group\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-radio.js CHANGED Viewed

@@ -64,3 +64,5 @@ const FlipRadio = FlipRadio$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipRadio, defineCustomElement };
+//# sourceMappingURL=flip-radio.js.map

package/dist/components/flip-radio.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-radio.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,0vFAA0vF;;MCiBlwFA,WAAS;EAZtB;;;;IAa2B,YAAO,GAAoB,KAAK,CAAC;IAElD,aAAQ,GAAa,KAAK,CAAC;IAS3B,aAAQ,GAAG;MACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC,CAAC;GA8CH;EA5CC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IAEjE,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IAEjC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE;MACpC,gBAAgB,EAAE,OAAO;MACzB,iBAAiB,EAAE,IAAI,CAAC,QAAQ;MAChC,gBAAgB,EAAE,IAAI,CAAC,OAAO;MAC9B,kBAAkB,EAAE,SAAS;KAC9B,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,aAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5C,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gCACE,6BACgB,gBAAgB,kBAChB,WAAW,EACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACmB,EACvB,2BAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,GAAQ,CAC9C,EACP,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,CACI,CACD,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipRadio"],"sources":["./src/components/flip-radio/flip-radio.css?tag=flip-radio&encapsulation=scoped","./src/components/flip-radio/flip-radio.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.radio {\n display: inline-flex;\n cursor: pointer;\n line-height: var(--s-line-height-base);\n\n &:focus-within .radio__box {\n box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n 0 0 0 0.1875rem var(--s-focus-default);\n }\n}\n\n.radio--checked {\n & .radio__control {\n &:hover {\n & .radio__box {\n border-color: var(--s-interactive-primary-hovered);\n background-color: var(--s-interactive-primary-hovered);\n }\n }\n }\n\n & .radio__box {\n position: relative;\n border-color: var(--s-icon-highlight);\n background-color: var(--s-icon-highlight);\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: var(--s-background-default);\n content: \"\";\n transform: translate3d(-50%, -50%, 0);\n }\n }\n}\n\n.radio--invalid {\n &.radio--checked,\n &.radio--indeterminate {\n & .radio__box {\n background-color: var(--s-icon-critical);\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-critical);\n }\n}\n\n.radio--disabled {\n cursor: default;\n\n &.radio--checked {\n & .radio__control {\n &:hover {\n & .radio__box {\n border-color: var(--s-icon-disabled);\n background-color: transparent;\n }\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-disabled);\n background-color: var(--s-background-default);\n\n &:after {\n background-color: var(--s-icon-disabled);\n }\n }\n }\n\n & .radio__control {\n &:hover {\n & .radio__box {\n background-color: transparent;\n }\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-disabled);\n backround-color: var(--s-icon-disabled);\n }\n\n & .radio__description,\n & .radio__label {\n color: var(--s-text-disabled);\n }\n}\n\n.radio__control {\n position: relative;\n display: inline-flex;\n width: 1.5rem;\n height: 1.5rem;\n padding: var(--s-space-2);\n flex-shrink: 0;\n\n &:hover {\n & .radio__box {\n background-color: var(--s-action-neutral-hovered);\n }\n }\n}\n\n.radio__box {\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n border: 0.125rem solid var(--s-icon-default);\n border-radius: 50%;\n}\n\n.radio__label-container {\n display: inline-flex;\n margin-left: var(--s-space-12);\n padding-top: var(--s-space-2);\n flex-direction: column;\n}\n\n.radio__label {\n font-weight: var(--s-font-weight-medium);\n}\n\n.radio__description {\n color: var(--s-text-subdued);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipRadioState = boolean | \"true\" | \"false\";\n\n@Component({\n /**\n * Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n */\n scoped: true,\n shadow: false,\n styleUrl: \"flip-radio.css\",\n tag: \"flip-radio\",\n})\nexport class FlipRadio {\n @Prop({ mutable: true }) checked?: FlipRadioState = false;\n @Prop() description?: string;\n @Prop() disabled?: boolean = false;\n @Prop() inputId!: string;\n @Prop() inputName!: string;\n @Prop() invalid?: boolean;\n @Prop() label?: string;\n @Prop() value!: string;\n\n @Event() valueChange: EventEmitter<string>;\n\n private onChange = () => {\n this.checked = true;\n this.valueChange.emit(this.value);\n };\n\n render() {\n const unchecked = this.checked === false || this.checked === \"false\";\n const checked = this.checked === true || this.checked === \"true\";\n\n const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n const ariaInvalid = this.invalid;\n\n const className = classnames(\"radio\", {\n \"radio--checked\": checked,\n \"radio--disabled\": this.disabled,\n \"radio--invalid\": this.invalid,\n \"radio--unchecked\": unchecked,\n });\n\n return (\n <Host>\n <label class={className} htmlFor={this.inputId}>\n <span class=\"radio__control\">\n <flip-visually-hidden>\n <input\n aria-checked={ariaCheckedLabel}\n aria-invalid={ariaInvalid}\n checked={checked}\n class=\"radio__input\"\n disabled={this.disabled}\n id={this.inputId}\n name={this.inputName}\n onChange={this.onChange}\n type=\"radio\"\n value={this.value}\n />\n </flip-visually-hidden>\n <span aria-hidden=\"true\" class=\"radio__box\"></span>\n </span>\n <span class=\"radio__label-container\">\n {this.label && <span class=\"radio__label\">{this.label}</span>}\n {this.description && (\n <span class=\"radio__description\">{this.description}</span>\n )}\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-resource-list-file-item.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './flip-inline-error2.js';
 import { d as defineCustomElement$3 } from './flip-spinner2.js';
 import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
-const flipResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12) + 0.0625rem);left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
+const flipResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
 const FlipResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -81,3 +81,5 @@ const FlipResourceListFileItem = FlipResourceListFileItem$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipResourceListFileItem, defineCustomElement };
+//# sourceMappingURL=flip-resource-list-file-item.js.map

package/dist/components/flip-resource-list-file-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-resource-list-file-item.js","mappings":";;;;;;;;AAAA,MAAM,2BAA2B,GAAG,2kDAA2kD;;MCQlmDA,0BAAwB;EALrC;;;;;IAQU,SAAI,GAAY,mCAAmC,CAAC;IAIpD,sBAAiB,GAAY,aAAa,CAAC;GA6DpD;EAzDC,MAAM;IACJ,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;IAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC;IAExD,MAAM,SAAS,GAAG,UAAU,CAAC,yBAAyB,EAAE;MACtD,sCAAsC,EAAE,WAAW,IAAI,gBAAgB;KACxE,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,KAAK,IACd,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU,IACpC,YACE,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,IAAI,CAAC,IAAI,GACd,EACR,YAAM,KAAK,EAAC,0CAA0C,IACpD,YAAM,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,OAAO,IACpD,IAAI,CAAC,KAAK,CACN,EACN,eAAe,KACd,YAAM,KAAK,EAAC,sCAAsC,IAC/C,IAAI,CAAC,WAAW,CACZ,CACR,EACA,SAAS,KACR,yBACY,QAAQ,EAClB,KAAK,EAAC,wCAAwC,IAE9C,yBACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,GAAG,GACW,CAChB,CACR,CACI,EACN,WAAW,KACV,YAAM,KAAK,EAAC,kCAAkC,IAC5C,oBAAc,IAAI,EAAC,GAAG,GAAgB,CACjC,CACR,EACA,gBAAgB,KACf,YAAM,KAAK,EAAC,wCAAwC,IAClD,mBACE,SAAS,QACT,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,GACZ,CACV,CACR,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipResourceListFileItem"],"sources":["./src/components/flip-resource-list-file-item/flip-resource-list-file-item.css?tag=flip-resource-list-file-item&encapsulation=shadow","./src/components/flip-resource-list-file-item/flip-resource-list-file-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.resource-list-file-item {\n position: relative;\n display: flex;\n width: 100%;\n padding: var(--s-space-12) var(--s-space-16);\n align-items: center;\n background-color: var(--s-background-default);\n line-height: var(--s-line-height-base);\n gap: var(--s-space-12);\n\n &:focus {\n background-color: var(--s-background-hovered);\n outline: none;\n }\n}\n\n.resource-list-file-item--has-control {\n & .resource-list-file-item__label-container {\n padding-right: calc(var(--s-space-12) + 2.5rem);\n }\n}\n\n.resource-list-file-item__icon {\n color: var(--s-icon-highlight);\n}\n\n.resource-list-file-item__label-container {\n position: relative;\n display: flex;\n min-width: 0;\n min-height: 2.875rem;\n flex-grow: 1;\n justify-content: center;\n flex-direction: column;\n\n &:after {\n position: absolute;\n right: 0;\n bottom: calc(-1 * var(--s-space-12));\n left: 0;\n height: 0.0625rem;\n background-color: var(--s-border-default);\n content: \"\";\n }\n}\n\n.resource-list-file-item__label {\n overflow: hidden;\n font-weight: var(--s-font-weight-medium);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-file-item__description {\n overflow: hidden;\n margin-top: var(--s-space-2);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-sm);\n line-height: var(--s-line-height-sm);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-file-item__error-message {\n margin-top: var(--s-space-2);\n}\n\n.resource-list-file-item__remove-button {\n position: absolute;\n top: 50%;\n right: var(--s-space-16);\n display: inline-flex;\n transform: translateY(-50%);\n}\n\n.resource-list-file-item__spinner {\n position: absolute;\n top: 50%;\n right: var(--s-space-24);\n display: inline-flex;\n transform: translateY(-50%);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list-file-item.css\",\n tag: \"flip-resource-list-file-item\",\n})\nexport class FlipResourceListFileItem {\n @Prop() description?: string;\n @Prop() errorMessage?: string;\n @Prop() icon?: string = \"<flip-icon-file></flip-icon-file>\";\n @Prop() label!: string;\n @Prop() loading: boolean;\n @Prop() removable?: boolean;\n @Prop() removeButtonLabel?: string = \"Remove file\";\n\n @Event() remove: EventEmitter<MouseEvent>;\n\n render() {\n const showError = Boolean(this.errorMessage);\n const showDescription = !showError && Boolean(this.description);\n const showSpinner = !showError && this.loading;\n const showRemoveButton = this.removable && !showSpinner;\n\n const className = classnames(\"resource-list-file-item\", {\n \"resource-list-file-item--has-control\": showSpinner || showRemoveButton,\n });\n\n return (\n <Host role=\"row\">\n <div class={className} role=\"gridcell\">\n <span\n class=\"resource-list-file-item__icon\"\n innerHTML={this.icon}\n ></span>\n <span class=\"resource-list-file-item__label-container\">\n <span class=\"resource-list-file-item__label\" id=\"label\">\n {this.label}\n </span>\n {showDescription && (\n <span class=\"resource-list-file-item__description\">\n {this.description}\n </span>\n )}\n {showError && (\n <span\n aria-live=\"polite\"\n class=\"resource-list-file-item__error-message\"\n >\n <flip-inline-error\n message={this.errorMessage}\n size=\"s\"\n ></flip-inline-error>\n </span>\n )}\n </span>\n {showSpinner && (\n <span class=\"resource-list-file-item__spinner\">\n <flip-spinner size=\"s\"></flip-spinner>\n </span>\n )}\n {showRemoveButton && (\n <span class=\"resource-list-file-item__remove-button\">\n <flip-button\n hideLabel\n icon=\"<flip-icon-close></flip-icon-close>\"\n label={this.removeButtonLabel}\n onClick={this.remove.emit}\n ></flip-button>\n </span>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-resource-list-item.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { c as classnames } from './index2.js';
 import { d as defineCustomElement$3 } from './flip-button2.js';
 import { d as defineCustomElement$2 } from './flip-icon-check-strong2.js';
-const flipResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12) + 0.0625rem);left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
+const flipResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
 const FlipResourceListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -111,3 +111,5 @@ const FlipResourceListItem = FlipResourceListItem$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipResourceListItem, defineCustomElement };
+//# sourceMappingURL=flip-resource-list-item.js.map

package/dist/components/flip-resource-list-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-resource-list-item.js","mappings":"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","names":["FlipResourceListItem"],"sources":["./src/components/flip-resource-list-item/flip-resource-list-item.css?tag=flip-resource-list-item&encapsulation=shadow","./src/components/flip-resource-list-item/flip-resource-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.resource-list-item {\n position: relative;\n width: 100%;\n}\n\n.resource-list-item--checked {\n & .resource-list-item__checkbox {\n border-color: var(--s-icon-highlight);\n color: var(--s-text-on-status);\n background-color: var(--s-icon-highlight);\n }\n}\n\n.resource-list-item--has-menu {\n & .resource-list-item__label-container {\n padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-12));\n }\n}\n\n.resource-list-item--selectable {\n & .resource-list-item__content {\n @media (--from-tablet) {\n padding-left: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));\n }\n }\n\n & .resource-list-item__label-container {\n padding-right: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));\n\n @media (--from-tablet) {\n padding-right: var(--s-space-16);\n }\n }\n}\n\n.resource-list-item--hide-divider {\n & .resource-list-item__label-container:after {\n display: none;\n }\n}\n\n.resource-list-item__content {\n --flip-avatar-group-border-color: var(--s-background-default);\n --flip-badge-border-color: var(--s-background-default);\n\n display: flex;\n width: 100%;\n padding-top: var(--s-space-12);\n padding-right: 0;\n padding-bottom: var(--s-space-12);\n padding-left: var(--s-space-16);\n align-items: center;\n border: none;\n color: var(--s-text-default);\n background-color: var(--s-background-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n gap: var(--s-space-12);\n\n &:hover:not(:disabled) {\n background-color: var(--s-background-hovered);\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-hovered);\n --flip-badge-border-color: var(--s-background-hovered);\n }\n }\n\n &:active:not(:disabled) {\n background-color: var(--s-background-pressed);\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-pressed);\n --flip-badge-border-color: var(--s-background-pressed);\n }\n }\n\n &:focus {\n background-color: var(--s-background-hovered);\n outline: none;\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-hovered);\n --flip-badge-border-color: var(--s-background-hovered);\n }\n }\n\n &:disabled {\n color: var(--s-text-disabled);\n background-color: var(--s-background-default);\n cursor: default;\n\n & .resource-list-item__description {\n color: var(--s-text-disabled);\n }\n }\n}\n\n.resource-list-item__media {\n display: inline-flex;\n}\n\n.resource-list-item__label-container {\n position: relative;\n display: flex;\n min-width: 0;\n min-height: 2.875rem;\n padding-right: var(--s-space-16);\n flex-grow: 1;\n justify-content: center;\n flex-direction: column;\n\n &:after {\n position: absolute;\n right: 0;\n bottom: calc(-1 * var(--s-space-12));\n left: 0;\n height: 0.0625rem;\n background-color: var(--s-border-default);\n content: \"\";\n }\n}\n\n.resource-list-item__label {\n overflow: hidden;\n font-weight: var(--s-font-weight-medium);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-item__description {\n overflow: hidden;\n margin-top: var(--s-space-2);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-sm);\n line-height: var(--s-line-height-sm);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-item__menu-trigger {\n position: absolute;\n top: 50%;\n right: var(--s-space-16);\n transform: translateY(-50%);\n}\n\n.resource-list-item__checkbox {\n position: absolute;\n top: 50%;\n right: var(--s-space-16);\n display: flex;\n width: 1.25rem;\n height: 1.25rem;\n justify-content: center;\n align-items: center;\n border: 0.125rem solid var(--s-icon-default);\n border-radius: var(--s-border-radius-s);\n transform: translateY(-50%);\n\n @media (--from-tablet) {\n right: auto;\n left: var(--s-space-16);\n }\n}\n\n.resource-list-item__checkbox-icon {\n display: inline-flex;\n width: 1.0625rem;\n height: 1.0625rem;\n\n & > *::part(icon) {\n width: 1.0625rem;\n height: 1.0625rem;\n }\n}\n\n.resource-list-item__meta {\n position: absolute;\n top: calc(var(--s-space-12) + var(--s-space-4));\n right: var(--s-space-16);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-sm);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list-item.css\",\n tag: \"flip-resource-list-item\",\n})\nexport class FlipResourceListItem {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) checked?: boolean = false;\n @Prop() description?: string;\n @Prop() disabled?: boolean;\n @Prop() hideDivider?: boolean;\n @Prop() href?: string;\n @Prop() label!: string;\n @Prop() media?: string;\n @Prop() menuTriggerId?: string;\n @Prop() menuTriggerLabel?: string = \"Options\";\n @Prop() meta?: string;\n @Prop() selectable?: boolean;\n @Prop() value?: string;\n\n @Event() valueChange: EventEmitter<boolean>;\n\n componentDidLoad() {\n this.forceAvatarProps();\n this.forceThumbnailProps();\n }\n\n private forceAvatarProps() {\n const avatarEl = this.el.querySelector(\"flip-avatar\");\n\n if (!Boolean(avatarEl)) {\n return;\n }\n\n avatarEl.removeAttribute(\"interactive\");\n avatarEl.removeAttribute(\"show-label\");\n avatarEl.removeAttribute(\"variant\");\n\n avatarEl.setAttribute(\"size\", \"l\");\n }\n\n private forceThumbnailProps() {\n const thumbnailEl = this.el.querySelector(\"flip-thumbnail\");\n\n if (!Boolean(thumbnailEl)) {\n return;\n }\n\n thumbnailEl.setAttribute(\"format\", \"landscape\");\n\n if (![\"s\", \"m\"].includes(thumbnailEl.getAttribute(\"size\"))) {\n thumbnailEl.setAttribute(\"size\", \"m\");\n }\n }\n\n private onClick = () => {\n if (!this.selectable) {\n return;\n }\n\n this.checked = !this.checked;\n this.valueChange.emit(this.checked);\n };\n\n private onMenuTriggerClick = (event: MouseEvent) => {\n if (this.disabled && !Boolean(this.href)) {\n event.stopPropagation();\n }\n };\n\n render() {\n const Tag = Boolean(this.href) && !this.selectable ? \"a\" : \"button\";\n\n const disabled = this.disabled && !Boolean(this.href);\n const hasMenu = Boolean(this.menuTriggerId);\n const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;\n const showMeta = Boolean(this.meta) && !this.selectable;\n\n const ariaChecked = this.selectable ? String(this.checked) : undefined;\n const role = this.selectable ? \"checkbox\" : undefined;\n\n const className = classnames(\"resource-list-item\", {\n \"resource-list-item--checked\": this.checked,\n \"resource-list-item--has-menu\": hasMenu,\n \"resource-list-item--hide-divider\": this.hideDivider,\n \"resource-list-item--selectable\": this.selectable,\n });\n\n return (\n <Host role=\"row\">\n <div class={className} role=\"gridcell\">\n <Tag\n aria-checked={ariaChecked}\n aria-disabled={disabled ? \"true\" : undefined}\n aria-labelledby=\"label\"\n class=\"resource-list-item__content\"\n href={this.href}\n disabled={disabled}\n onClick={this.onClick}\n role={role}\n tabIndex={0}\n >\n {Boolean(this.media) && (\n <span\n class=\"resource-list-item__media\"\n innerHTML={this.media}\n ></span>\n )}\n <span class=\"resource-list-item__label-container\">\n <span class=\"resource-list-item__label\" id=\"label\">\n {this.label}\n </span>\n {this.description && (\n <span class=\"resource-list-item__description\">\n {this.description}\n </span>\n )}\n </span>\n </Tag>\n {this.selectable && (\n <span aria-hidden=\"true\" class=\"resource-list-item__checkbox\">\n <span class=\"resource-list-item__checkbox-icon\">\n {this.checked && (\n <flip-icon-check-strong></flip-icon-check-strong>\n )}\n </span>\n </span>\n )}\n {showMeta && (\n <span class=\"resource-list-item__meta\">{this.meta}</span>\n )}\n {showMenu && (\n <flip-button\n aria-disabled={disabled ? \"true\" : undefined}\n class=\"resource-list-item__menu-trigger\"\n disabled={disabled}\n hideLabel\n icon=\"<flip-icon-more-horizontal></flip-icon-more-horizontal>\"\n id={this.menuTriggerId}\n intent=\"primary\"\n label={this.menuTriggerLabel}\n onClick={this.onMenuTriggerClick}\n ></flip-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-resource-list.js CHANGED Viewed

@@ -88,3 +88,5 @@ const FlipResourceList = FlipResourceList$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipResourceList, defineCustomElement };
+//# sourceMappingURL=flip-resource-list.js.map

package/dist/components/flip-resource-list.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-resource-list.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,+DAA+D;;MCO9EA,kBAAgB;EAL7B;;;;IAUU,iBAAY,GAAG,CAAC,CAAC;IA6CjB,YAAO,GAAG;MAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC1C,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OACpE;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;QAClC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,SAAS,GACb,IAAI,CAAC,YAAY,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAE1E,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;OAClC;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;OAC1B;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;OAC9C;KACF,CAAC;GAgBH;EAlFC,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,uDAAuD,CACxD,CACF,CAAC;GACH;EAEO,uBAAuB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;;MACtB,OAAA,MAAA,MAAA,IAAI,CAAC,UAAU,0CACX,aAAa,CACb,wDAAwD,CACzD,0CACC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;KAAA,CACnC,CAAC;GACH;EAEO,gBAAgB,CAAC,KAAa;IACpC,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO;KACR;IAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACtD,wDAAwD,CACzD,CAAC;IAEF,kBAAkB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACjD,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAE3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC3B;EA4BD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7B,gCACc,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC,IAEX,eAAa,CACF,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipResourceList"],"sources":["./src/components/flip-resource-list/flip-resource-list.css?tag=flip-resource-list&encapsulation=shadow","./src/components/flip-resource-list/flip-resource-list.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list.css\",\n tag: \"flip-resource-list\",\n})\nexport class FlipResourceList {\n @Element() el: HTMLElement;\n\n @Prop() label?: string;\n\n private focusedIndex = 0;\n private items: HTMLFlipResourceListItemElement[];\n\n componentDidLoad() {\n this.collectItems();\n this.removeItemsFromTabOrder();\n }\n\n private collectItems() {\n this.items = Array.from(\n this.el.querySelectorAll(\n \"flip-resource-list-item, flip-resource-list-file-item\"\n )\n );\n }\n\n private removeItemsFromTabOrder() {\n this.items.forEach((item) =>\n item.shadowRoot\n ?.querySelector(\n \".resource-list-item__content, .resource-list-file-item\"\n )\n ?.setAttribute(\"tabIndex\", \"-1\")\n );\n }\n\n private focusItemAtIndex(index: number) {\n this.removeItemsFromTabOrder();\n\n const item = this.items[index];\n\n if (!Boolean(item)) {\n return;\n }\n\n const interactiveElement = item.shadowRoot.querySelector<HTMLElement>(\n \".resource-list-item__content, .resource-list-file-item\"\n );\n\n interactiveElement.setAttribute(\"tabIndex\", \"0\");\n interactiveElement.focus();\n\n this.focusedIndex = index;\n }\n\n private onFocus = () => {\n this.focusItemAtIndex(this.focusedIndex);\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n\n const prevIndex =\n this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;\n\n this.focusItemAtIndex(prevIndex);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n\n this.focusItemAtIndex(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n\n this.focusItemAtIndex(this.items.length - 1);\n }\n };\n\n render() {\n return (\n <Host onKeyDown={this.onKeyDown}>\n <flip-stack\n aria-label={this.label}\n onFocus={this.onFocus}\n role=\"grid\"\n tabIndex={0}\n >\n <slot></slot>\n </flip-stack>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-search.js CHANGED Viewed

@@ -80,3 +80,5 @@ const FlipSearch = FlipSearch$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipSearch, defineCustomElement };
+//# sourceMappingURL=flip-search.js.map

package/dist/components/flip-search.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-search.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,ulEAAulE;;MCuBhmEA,YAAU;EAZvB;;;;;;IAcU,qBAAgB,GAAY,mBAAmB,CAAC;IAKhD,gBAAW,GAAY,UAAU,CAAC;IAmBlC,UAAK,GAAG;MACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MACtB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;KACjE,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B,CAAC;GA2CH;EAnEC,SAAS,CAAC,KAAoB;IAC5B,IACE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;OAC/C,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,EAChC;MACA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;GACF;EAmBD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE;MACrC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;KAClC,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,SAAS,IACpB,wBAAkB,KAAK,EAAC,cAAc,GAAoB,EAC1D,8BACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,gBACrC,IAAI,CAAC,KAAK,EACtB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,eAAe,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,CAAC,IAAI,CAAC,QAAQ,KACb,4BACc,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAC,QAAQ,IAEb,2BAAqC,CAC9B,CACV,CACI,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipSearch"],"sources":["./src/components/flip-search/flip-search.css?tag=flip-search&encapsulation=scoped","./src/components/flip-search/flip-search.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.search {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n.search--disabled {\n & .search__icon {\n color: var(--s-icon-disabled);\n }\n\n & .search__input {\n color: var(--s-text-disabled);\n\n &::placeholder {\n color: var(--s-text-disabled);\n }\n }\n}\n\n.search__icon {\n position: absolute;\n top: 50%;\n left: var(--s-space-12);\n display: inline-flex;\n color: var(--s-icon-default);\n transform: translateY(-50%);\n}\n\n.search__input {\n width: 100%;\n height: 2.5rem;\n padding-top: var(--s-space-8);\n padding-right: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n padding-bottom: var(--s-space-8);\n padding-left: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n border: none;\n border-radius: var(--s-border-radius-base);\n color: var(--s-text-default);\n background-color: var(--s-surface-raised-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n caret-color: var(--s-border-highlight);\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n\n &::placeholder {\n color: var(--s-text-subdued);\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &:not(:placeholder-shown) {\n & + .search__clear-button {\n display: inline-flex;\n }\n }\n}\n\n.search__clear-button {\n position: absolute;\n top: 50%;\n right: var(--s-space-12);\n display: none;\n padding: 0;\n border: none;\n color: var(--s-icon-default);\n background-color: transparent;\n cursor: pointer;\n transform: translateY(-50%);\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n /**\n * Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n */\n scoped: true,\n shadow: false,\n styleUrl: \"flip-search.css\",\n tag: \"flip-search\",\n})\nexport class FlipSearch {\n @Prop() autoFocus?: boolean;\n @Prop() clearButtonLabel?: string = \"Clear search term\";\n @Prop() disabled?: boolean;\n @Prop() inputName?: string;\n @Prop() inputId?: string;\n @Prop() label?: string;\n @Prop() placeholder?: string = \"Search …\";\n @Prop({ mutable: true }) value?: string;\n\n @Event() inputBlur: EventEmitter<FocusEvent>;\n @Event() inputFocus: EventEmitter<FocusEvent>;\n @Event() valueChange: EventEmitter<string>;\n\n private input: HTMLInputElement;\n\n @Listen(\"keydown\", { target: \"window\" })\n onKeyDown(event: KeyboardEvent) {\n if (\n (event.code === \"KeyK\" || event.code === \"Slash\") &&\n (event.ctrlKey || event.metaKey)\n ) {\n this.input.focus();\n }\n }\n\n private clear = () => {\n this.input.value = \"\";\n this.input.focus();\n };\n\n private onBlur = (event: FocusEvent) => {\n this.inputBlur.emit(event);\n };\n\n private onChange = (event: Event) => {\n this.valueChange.emit((event.target as HTMLInputElement).value);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.inputFocus.emit(event);\n };\n\n render() {\n const className = classnames(\"search\", {\n \"search--disabled\": this.disabled,\n });\n\n return (\n <Host>\n <span class={className}>\n <flip-icon-search class=\"search__icon\"></flip-icon-search>\n <input\n aria-disabled={this.disabled ? \"true\" : undefined}\n aria-label={this.label}\n autoComplete=\"off\"\n autoFocus={this.autoFocus}\n class=\"search__input\"\n disabled={this.disabled}\n id={this.inputId}\n inputMode=\"search\"\n name={this.inputName}\n onBlur={this.onBlur}\n onChange={this.onChange}\n onFocus={this.onFocus}\n placeholder={this.placeholder}\n ref={(el) => (this.input = el)}\n type=\"search\"\n value={this.value}\n />\n {!this.disabled && (\n <button\n aria-label={this.clearButtonLabel}\n class=\"search__clear-button\"\n onClick={this.clear}\n type=\"button\"\n >\n <flip-icon-cancel></flip-icon-cancel>\n </button>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-spinner.js CHANGED Viewed

@@ -4,3 +4,5 @@ const FlipSpinner = FlipSpinner$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipSpinner, defineCustomElement };
+//# sourceMappingURL=flip-spinner.js.map

package/dist/components/flip-spinner.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"flip-spinner.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/flip-spinner2.js CHANGED Viewed

@@ -41,3 +41,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { FlipSpinner as F, defineCustomElement as d };
+//# sourceMappingURL=flip-spinner2.js.map

package/dist/components/flip-spinner2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-spinner2.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,ktCAAktC;;MCU5tC,WAAW;EALxB;;;;IAOU,SAAI,GAAqB,GAAG,CAAC;GA2CtC;EAzCC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,QACH,YACE,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,QAAQ,GAAG,SAAS,IAEhD,0BACc,MAAM,EAClB,KAAK,EAAC,oBAAoB,EAC1B,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,IAEnB,cACE,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,kBACE,GAAG,GAChB,EACF,cACE,KAAK,EAAC,iBAAiB,EACvB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,kBACE,GAAG,GAChB,CACE,EACL,IAAI,CAAC,KAAK,KACT,gCACE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3B,CACxB,CACI,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-spinner/flip-spinner.css?tag=flip-spinner&encapsulation=shadow","./src/components/flip-spinner/flip-spinner.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.spinner {\n position: relative;\n display: inline-flex;\n overflow: hidden;\n width: 2.25rem;\n height: 2.25rem;\n}\n\n.spinner--size-s {\n width: 1.5rem;\n height: 1.5rem;\n\n & .spinner__circle {\n stroke-width: 0.1875rem;\n }\n}\n\n.spinner__indicator {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n transform-origin: center center;\n animation: spinner-rotate 2s linear infinite;\n}\n\n.spinner__background {\n stroke: var(--s-border-default);\n stroke-linecap: round;\n}\n\n.spinner__circle {\n animation: spinner-dash 1.5s ease-in-out infinite;\n stroke: var(--s-interactive-primary-default);\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n stroke-linecap: round;\n}\n\n@keyframes spinner-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124;\n }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipSpinnerSize = \"s\" | \"m\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-spinner.css\",\n tag: \"flip-spinner\",\n})\nexport class FlipSpinner {\n @Prop() label?: string;\n @Prop() size?: FlipSpinnerSize = \"m\";\n\n render() {\n const className = classnames(\"spinner\", `spinner--size-${this.size}`);\n\n return (\n <Host>\n <span\n class={className}\n role={Boolean(this.label) ? \"status\" : undefined}\n >\n <svg\n aria-hidden=\"true\"\n class=\"spinner__indicator\"\n focusable=\"false\"\n viewBox=\"0 0 50 50\"\n >\n <circle\n class=\"spinner__background\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"4\"\n />\n <circle\n class=\"spinner__circle\"\n cx=\"25\"\n cy=\"25\"\n r=\"20\"\n fill=\"none\"\n stroke-width=\"4\"\n />\n </svg>\n {this.label && (\n <flip-visually-hidden>\n <span class=\"spinner__label\">{this.label}</span>\n </flip-visually-hidden>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-stack.js CHANGED Viewed

@@ -4,3 +4,5 @@ const FlipStack = FlipStack$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipStack, defineCustomElement };
+//# sourceMappingURL=flip-stack.js.map

package/dist/components/flip-stack.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"flip-stack.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/flip-stack2.js CHANGED Viewed

@@ -45,3 +45,5 @@ function defineCustomElement() {
 defineCustomElement();
 export { FlipStack as F, defineCustomElement as d };
+//# sourceMappingURL=flip-stack2.js.map

package/dist/components/flip-stack2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-stack2.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,w4BAAw4B;;MC+Bh5B,SAAS;EALtB;;;;IAMU,UAAK,GAAoB,OAAO,CAAC;IACjC,OAAE,GAAY,KAAK,CAAC;IACpB,YAAO,GAAsB,OAAO,CAAC;IACrC,gBAAW,GAA0B,UAAU,CAAC;IAChD,YAAO,GAAsB,GAAG,CAAC;IACjC,SAAI,GAAa,KAAK,CAAC;GAwBhC;EAtBC,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,UAAU,CAC1B,OAAO,EACP,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAC5B,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAChC,sBAAsB,IAAI,CAAC,WAAW,EAAE,EACxC,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAC7B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,EAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAE,GAAG,EAAE,iBAAiB,IAAI,CAAC,OAAO,GAAG,EAAE,IAEhD,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-stack/flip-stack.css?tag=flip-stack&encapsulation=shadow","./src/components/flip-stack/flip-stack.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.stack {\n display: flex;\n width: 100%;\n max-width: 100%;\n\n & ::slotted(*) {\n min-width: 0;\n max-width: 100%;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n }\n}\n\n.stack--align-start {\n align-items: flex-start;\n}\n\n.stack--align-center {\n align-items: center;\n}\n\n.stack--align-end {\n align-items: flex-end;\n}\n\n.stack--align-stretch {\n align-items: stretch;\n}\n\n.stack--justify-start {\n justify-content: flex-start;\n}\n\n.stack--justify-center {\n justify-content: center;\n}\n\n.stack--justify-end {\n justify-content: flex-end;\n}\n\n.stack--justify-space-between {\n justify-content: space-between;\n}\n\n.stack--justify-space-around {\n justify-content: space-around;\n}\n\n.stack--justify-space-evenly {\n justify-content: space-evenly;\n}\n\n.stack--justify-stretch {\n justify-content: stretch;\n\n & ::slotted(*) {\n flex-grow: 1;\n }\n}\n\n.stack--orientation-vertical {\n flex-direction: column;\n}\n\n.stack--orientation-horizontal {\n flex-direction: row;\n}\n\n.stack--wrap {\n flex-wrap: wrap;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipStackAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport type FlipStackJustify =\n | \"start\"\n | \"center\"\n | \"end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\"\n | \"stretch\";\n\nexport type FlipStackOrientation = \"horizontal\" | \"vertical\";\n\nexport type FlipStackSpacing =\n | \"0\"\n | \"2\"\n | \"4\"\n | \"8\"\n | \"12\"\n | \"16\"\n | \"24\"\n | \"32\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-stack.css\",\n tag: \"flip-stack\",\n})\nexport class FlipStack {\n @Prop() align?: FlipStackAlign = \"start\";\n @Prop() as?: string = \"div\";\n @Prop() justify?: FlipStackJustify = \"start\";\n @Prop() orientation?: FlipStackOrientation = \"vertical\";\n @Prop() spacing?: FlipStackSpacing = \"0\";\n @Prop() wrap?: boolean = false;\n\n render() {\n const Tag = this.as;\n\n const className = classnames(\n \"stack\",\n `stack--align-${this.align}`,\n `stack--justify-${this.justify}`,\n `stack--orientation-${this.orientation}`,\n { \"stack--wrap\": this.wrap }\n );\n\n return (\n <Host>\n <Tag\n class={className}\n style={{ gap: `var(--s-space-${this.spacing})` }}\n >\n <slot></slot>\n </Tag>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-switch.js CHANGED Viewed

@@ -118,3 +118,5 @@ const FlipSwitch = FlipSwitch$1;
 const defineCustomElement = defineCustomElement$1;
 export { FlipSwitch, defineCustomElement };
+//# sourceMappingURL=flip-switch.js.map