@cordwainer/cw-elements 1.1.1 → 1.2.0-alpha.1

package/dist/chunks/chunk.NHOKAXB2.js

@@ -1,274 +0,0 @@
-import {
-  tooltip_styles_default
-} from "./chunk.3WW7HIYN.js";
-import {
-  CwPopup
-} from "./chunk.VS25IUL7.js";
-import {
-  getAnimation,
-  setDefaultAnimation
-} from "./chunk.SPWJX47D.js";
-import {
-  waitForEvent
-} from "./chunk.B4BZKR24.js";
-import {
-  animateTo,
-  parseDuration,
-  stopAnimations
-} from "./chunk.TJQYJP53.js";
-import {
-  LocalizeController
-} from "./chunk.2H4HZOD6.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  CwElement
-} from "./chunk.75LMNY6V.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/tooltip/tooltip.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-var CwTooltip = class extends CwElement {
-  constructor() {
-    super();
-    this.localize = new LocalizeController(this);
-    this.content = "";
-    this.placement = "top";
-    this.disabled = false;
-    this.distance = 8;
-    this.open = false;
-    this.skidding = 0;
-    this.trigger = "hover focus";
-    this.hoist = false;
-    this.handleBlur = () => {
-      if (this.hasTrigger("focus")) {
-        this.hide();
-      }
-    };
-    this.handleClick = () => {
-      if (this.hasTrigger("click")) {
-        if (this.open) {
-          this.hide();
-        } else {
-          this.show();
-        }
-      }
-    };
-    this.handleFocus = () => {
-      if (this.hasTrigger("focus")) {
-        this.show();
-      }
-    };
-    this.handleDocumentKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        this.hide();
-      }
-    };
-    this.handleMouseOver = () => {
-      if (this.hasTrigger("hover")) {
-        const delay = parseDuration(getComputedStyle(this).getPropertyValue("--show-delay"));
-        clearTimeout(this.hoverTimeout);
-        this.hoverTimeout = window.setTimeout(() => this.show(), delay);
-      }
-    };
-    this.handleMouseOut = () => {
-      if (this.hasTrigger("hover")) {
-        const delay = parseDuration(getComputedStyle(this).getPropertyValue("--hide-delay"));
-        clearTimeout(this.hoverTimeout);
-        this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
-      }
-    };
-    this.addEventListener("blur", this.handleBlur, true);
-    this.addEventListener("focus", this.handleFocus, true);
-    this.addEventListener("click", this.handleClick);
-    this.addEventListener("mouseover", this.handleMouseOver);
-    this.addEventListener("mouseout", this.handleMouseOut);
-  }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-  }
-  firstUpdated() {
-    this.body.hidden = !this.open;
-    if (this.open) {
-      this.popup.active = true;
-      this.popup.reposition();
-    }
-  }
-  hasTrigger(triggerType) {
-    const triggers = this.trigger.split(" ");
-    return triggers.includes(triggerType);
-  }
-  async handleOpenChange() {
-    var _a, _b;
-    if (this.open) {
-      if (this.disabled) {
-        return;
-      }
-      this.emit("cw-show");
-      if ("CloseWatcher" in window) {
-        (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
-        this.closeWatcher = new CloseWatcher();
-        this.closeWatcher.onclose = () => {
-          this.hide();
-        };
-      } else {
-        document.addEventListener("keydown", this.handleDocumentKeyDown);
-      }
-      await stopAnimations(this.body);
-      this.body.hidden = false;
-      this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, "tooltip.show", { dir: this.localize.dir() });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.popup.reposition();
-      this.emit("cw-after-show");
-    } else {
-      this.emit("cw-hide");
-      (_b = this.closeWatcher) == null ? void 0 : _b.destroy();
-      document.removeEventListener("keydown", this.handleDocumentKeyDown);
-      await stopAnimations(this.body);
-      const { keyframes, options } = getAnimation(this, "tooltip.hide", { dir: this.localize.dir() });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.popup.active = false;
-      this.body.hidden = true;
-      this.emit("cw-after-hide");
-    }
-  }
-  async handleOptionsChange() {
-    if (this.hasUpdated) {
-      await this.updateComplete;
-      this.popup.reposition();
-    }
-  }
-  handleDisabledChange() {
-    if (this.disabled && this.open) {
-      this.hide();
-    }
-  }
-  /** Shows the tooltip. */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.open = true;
-    return waitForEvent(this, "cw-after-show");
-  }
-  /** Hides the tooltip */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.open = false;
-    return waitForEvent(this, "cw-after-hide");
-  }
-  //
-  // NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into
-  // announcing the content. It works really well, but it violates an accessibility rule. We're also adding the
-  // aria-describedby attribute to a slot, which is required by <cw-popup> to correctly locate the first assigned
-  // element, otherwise positioning is incorrect.
-  //
-  render() {
-    return html`
-      <cw-popup
-        part="base"
-        exportparts="
-          popup:base__popup,
-          arrow:base__arrow
-        "
-        class=${classMap({
-      tooltip: true,
-      "tooltip--open": this.open
-    })}
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist ? "fixed" : "absolute"}
-        flip
-        shift
-        arrow
-        hover-bridge
-      >
-        ${""}
-        <slot slot="anchor" aria-describedby="tooltip"></slot>
-
-        ${""}
-        <div part="body" id="tooltip" class="tooltip__body" role="tooltip" aria-live=${this.open ? "polite" : "off"}>
-          <slot name="content">${this.content}</slot>
-        </div>
-      </cw-popup>
-    `;
-  }
-};
-CwTooltip.styles = [component_styles_default, tooltip_styles_default];
-CwTooltip.dependencies = { "cw-popup": CwPopup };
-__decorateClass([
-  query("slot:not([name])")
-], CwTooltip.prototype, "defaultSlot", 2);
-__decorateClass([
-  query(".tooltip__body")
-], CwTooltip.prototype, "body", 2);
-__decorateClass([
-  query("cw-popup")
-], CwTooltip.prototype, "popup", 2);
-__decorateClass([
-  property()
-], CwTooltip.prototype, "content", 2);
-__decorateClass([
-  property()
-], CwTooltip.prototype, "placement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CwTooltip.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Number })
-], CwTooltip.prototype, "distance", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CwTooltip.prototype, "open", 2);
-__decorateClass([
-  property({ type: Number })
-], CwTooltip.prototype, "skidding", 2);
-__decorateClass([
-  property()
-], CwTooltip.prototype, "trigger", 2);
-__decorateClass([
-  property({ type: Boolean })
-], CwTooltip.prototype, "hoist", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], CwTooltip.prototype, "handleOpenChange", 1);
-__decorateClass([
-  watch(["content", "distance", "hoist", "placement", "skidding"])
-], CwTooltip.prototype, "handleOptionsChange", 1);
-__decorateClass([
-  watch("disabled")
-], CwTooltip.prototype, "handleDisabledChange", 1);
-setDefaultAnimation("tooltip.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 150, easing: "ease" }
-});
-setDefaultAnimation("tooltip.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
-  ],
-  options: { duration: 150, easing: "ease" }
-});
-
-export {
-  CwTooltip
-};

package/dist/chunks/chunk.NU6KOXR6.js

@@ -1,73 +0,0 @@
-import {
-  LocalizeController
-} from "./chunk.2H4HZOD6.js";
-import {
-  CwElement
-} from "./chunk.75LMNY6V.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/format-number/format-number.component.ts
-import { property } from "lit/decorators.js";
-var CwFormatNumber = class extends CwElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.value = 0;
-    this.type = "decimal";
-    this.noGrouping = false;
-    this.currency = "USD";
-    this.currencyDisplay = "symbol";
-  }
-  render() {
-    if (isNaN(this.value)) {
-      return "";
-    }
-    return this.localize.number(this.value, {
-      style: this.type,
-      currency: this.currency,
-      currencyDisplay: this.currencyDisplay,
-      useGrouping: !this.noGrouping,
-      minimumIntegerDigits: this.minimumIntegerDigits,
-      minimumFractionDigits: this.minimumFractionDigits,
-      maximumFractionDigits: this.maximumFractionDigits,
-      minimumSignificantDigits: this.minimumSignificantDigits,
-      maximumSignificantDigits: this.maximumSignificantDigits
-    });
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], CwFormatNumber.prototype, "value", 2);
-__decorateClass([
-  property()
-], CwFormatNumber.prototype, "type", 2);
-__decorateClass([
-  property({ attribute: "no-grouping", type: Boolean })
-], CwFormatNumber.prototype, "noGrouping", 2);
-__decorateClass([
-  property()
-], CwFormatNumber.prototype, "currency", 2);
-__decorateClass([
-  property({ attribute: "currency-display" })
-], CwFormatNumber.prototype, "currencyDisplay", 2);
-__decorateClass([
-  property({ attribute: "minimum-integer-digits", type: Number })
-], CwFormatNumber.prototype, "minimumIntegerDigits", 2);
-__decorateClass([
-  property({ attribute: "minimum-fraction-digits", type: Number })
-], CwFormatNumber.prototype, "minimumFractionDigits", 2);
-__decorateClass([
-  property({ attribute: "maximum-fraction-digits", type: Number })
-], CwFormatNumber.prototype, "maximumFractionDigits", 2);
-__decorateClass([
-  property({ attribute: "minimum-significant-digits", type: Number })
-], CwFormatNumber.prototype, "minimumSignificantDigits", 2);
-__decorateClass([
-  property({ attribute: "maximum-significant-digits", type: Number })
-], CwFormatNumber.prototype, "maximumSignificantDigits", 2);
-
-export {
-  CwFormatNumber
-};

package/dist/chunks/chunk.NZ5OAKJX.js

@@ -1,11 +0,0 @@
-import {
-  CwCard
-} from "./chunk.JV3L55WQ.js";
-
-// src/components/card/card.ts
-var card_default = CwCard;
-CwCard.define("cw-card");
-
-export {
-  card_default
-};

package/dist/chunks/chunk.O3KODY3G.js

@@ -1,90 +0,0 @@
-import {
-  breadcrumb_styles_default
-} from "./chunk.P4NYDBZP.js";
-import {
-  LocalizeController
-} from "./chunk.2H4HZOD6.js";
-import {
-  CwIcon
-} from "./chunk.ZAEC4FHM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  CwElement
-} from "./chunk.75LMNY6V.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/breadcrumb/breadcrumb.component.ts
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-var CwBreadcrumb = class extends CwElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.separatorDir = this.localize.dir();
-    this.label = "";
-  }
-  // Generates a clone of the separator element to use for each breadcrumb item
-  getSeparator() {
-    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
-    const clone = separator.cloneNode(true);
-    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
-    clone.setAttribute("data-default", "");
-    clone.slot = "separator";
-    return clone;
-  }
-  handleSlotChange() {
-    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
-      (item) => item.tagName.toLowerCase() === "cw-breadcrumb-item"
-    );
-    items.forEach((item, index) => {
-      const separator = item.querySelector('[slot="separator"]');
-      if (separator === null) {
-        item.append(this.getSeparator());
-      } else if (separator.hasAttribute("data-default")) {
-        separator.replaceWith(this.getSeparator());
-      } else {
-      }
-      if (index === items.length - 1) {
-        item.setAttribute("aria-current", "page");
-      } else {
-        item.removeAttribute("aria-current");
-      }
-    });
-  }
-  render() {
-    if (this.separatorDir !== this.localize.dir()) {
-      this.separatorDir = this.localize.dir();
-      this.updateComplete.then(() => this.handleSlotChange());
-    }
-    return html`
-      <nav part="base" class="breadcrumb" aria-label=${this.label}>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </nav>
-
-      <span hidden aria-hidden="true">
-        <slot name="separator">
-          <cw-icon name=${this.localize.dir() === "rtl" ? "chevron-left" : "chevron-right"} library="system"></cw-icon>
-        </slot>
-      </span>
-    `;
-  }
-};
-CwBreadcrumb.styles = [component_styles_default, breadcrumb_styles_default];
-CwBreadcrumb.dependencies = { "cw-icon": CwIcon };
-__decorateClass([
-  query("slot")
-], CwBreadcrumb.prototype, "defaultSlot", 2);
-__decorateClass([
-  query('slot[name="separator"]')
-], CwBreadcrumb.prototype, "separatorSlot", 2);
-__decorateClass([
-  property()
-], CwBreadcrumb.prototype, "label", 2);
-
-export {
-  CwBreadcrumb
-};

package/dist/chunks/chunk.OFUVD4SX.js

@@ -1,116 +0,0 @@
-import {
-  CwIcon
-} from "./chunk.ZAEC4FHM.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  CwElement
-} from "./chunk.75LMNY6V.js";
-import {
-  animated_image_styles_default
-} from "./chunk.K2ALRHER.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/animated-image/animated-image.component.ts
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-var CwAnimatedImage = class extends CwElement {
-  constructor() {
-    super(...arguments);
-    this.isLoaded = false;
-  }
-  handleClick() {
-    this.play = !this.play;
-  }
-  handleLoad() {
-    const canvas = document.createElement("canvas");
-    const { width, height } = this.animatedImage;
-    canvas.width = width;
-    canvas.height = height;
-    canvas.getContext("2d").drawImage(this.animatedImage, 0, 0, width, height);
-    this.frozenFrame = canvas.toDataURL("image/gif");
-    if (!this.isLoaded) {
-      this.emit("cw-load");
-      this.isLoaded = true;
-    }
-  }
-  handleError() {
-    this.emit("cw-error");
-  }
-  handlePlayChange() {
-    if (this.play) {
-      this.animatedImage.src = "";
-      this.animatedImage.src = this.src;
-    }
-  }
-  handleSrcChange() {
-    this.isLoaded = false;
-  }
-  render() {
-    return html`
-      <div class="animated-image">
-        <img
-          class="animated-image__animated"
-          src=${this.src}
-          alt=${this.alt}
-          crossorigin="anonymous"
-          aria-hidden=${this.play ? "false" : "true"}
-          @click=${this.handleClick}
-          @load=${this.handleLoad}
-          @error=${this.handleError}
-        />
-
-        ${this.isLoaded ? html`
-              <img
-                class="animated-image__frozen"
-                src=${this.frozenFrame}
-                alt=${this.alt}
-                aria-hidden=${this.play ? "true" : "false"}
-                @click=${this.handleClick}
-              />
-
-              <div part="control-box" class="animated-image__control-box">
-                <slot name="play-icon"><cw-icon name="play-fill" library="system"></cw-icon></slot>
-                <slot name="pause-icon"><cw-icon name="pause-fill" library="system"></cw-icon></slot>
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-CwAnimatedImage.styles = [component_styles_default, animated_image_styles_default];
-CwAnimatedImage.dependencies = { "cw-icon": CwIcon };
-__decorateClass([
-  query(".animated-image__animated")
-], CwAnimatedImage.prototype, "animatedImage", 2);
-__decorateClass([
-  state()
-], CwAnimatedImage.prototype, "frozenFrame", 2);
-__decorateClass([
-  state()
-], CwAnimatedImage.prototype, "isLoaded", 2);
-__decorateClass([
-  property()
-], CwAnimatedImage.prototype, "src", 2);
-__decorateClass([
-  property()
-], CwAnimatedImage.prototype, "alt", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CwAnimatedImage.prototype, "play", 2);
-__decorateClass([
-  watch("play", { waitUntilFirstUpdate: true })
-], CwAnimatedImage.prototype, "handlePlayChange", 1);
-__decorateClass([
-  watch("src")
-], CwAnimatedImage.prototype, "handleSrcChange", 1);
-
-export {
-  CwAnimatedImage
-};

package/dist/chunks/chunk.OIWEM33H.js

@@ -1,11 +0,0 @@
-import {
-  CwSplitPanel
-} from "./chunk.R3FFKANO.js";
-
-// src/components/split-panel/split-panel.ts
-var split_panel_default = CwSplitPanel;
-CwSplitPanel.define("cw-split-panel");
-
-export {
-  split_panel_default
-};

package/dist/chunks/chunk.OLCO6RWF.js

@@ -1,11 +0,0 @@
-import {
-  CwDropdown
-} from "./chunk.T6BEJ5CM.js";
-
-// src/components/dropdown/dropdown.ts
-var dropdown_default = CwDropdown;
-CwDropdown.define("cw-dropdown");
-
-export {
-  dropdown_default
-};

package/dist/chunks/chunk.OOAK7TAG.js

@@ -1,44 +0,0 @@
-import {
-  library_system_default
-} from "./chunk.3TFKS637.js";
-import {
-  library_default_default
-} from "./chunk.CJFFVBAI.js";
-
-// src/components/icon/library.ts
-var registry = [library_default_default, library_system_default];
-var watchedIcons = [];
-function watchIcon(icon) {
-  watchedIcons.push(icon);
-}
-function unwatchIcon(icon) {
-  watchedIcons = watchedIcons.filter((el) => el !== icon);
-}
-function getIconLibrary(name) {
-  return registry.find((lib) => lib.name === name);
-}
-function registerIconLibrary(name, options) {
-  unregisterIconLibrary(name);
-  registry.push({
-    name,
-    resolver: options.resolver,
-    mutator: options.mutator,
-    spriteSheet: options.spriteSheet
-  });
-  watchedIcons.forEach((icon) => {
-    if (icon.library === name) {
-      icon.setIcon();
-    }
-  });
-}
-function unregisterIconLibrary(name) {
-  registry = registry.filter((lib) => lib.name !== name);
-}
-
-export {
-  watchIcon,
-  unwatchIcon,
-  getIconLibrary,
-  registerIconLibrary,
-  unregisterIconLibrary
-};