@cordwainer/cw-elements 1.3.0-alpha.0 → 1.3.0-alpha.2

package/dist/chunks/chunk.QZC7L7EX.js

@@ -1,90 +0,0 @@
-import {
-  breadcrumb_styles_default
-} from "./chunk.P4NYDBZP.js";
-import {
-  LocalizeController
-} from "./chunk.DVGAJ3DA.js";
-import {
-  CwIcon
-} from "./chunk.3AFGTKZX.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  CwElement
-} from "./chunk.NB4MG53P.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.RMKLMD4K.js

@@ -1,26 +0,0 @@
-import {
-  CwDataTable
-} from "./chunk.7UB7VKAC.js";
-
-// src/react/data-table/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cw-data-table";
-CwDataTable.define("cw-data-table");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CwDataTable,
-  react: React,
-  events: {
-    onCwSortChange: "cw-sort-change",
-    onCwRowSelectionChange: "cw-row-selection-change",
-    onCwRowClick: "cw-row-click"
-  },
-  displayName: "CwDataTable"
-});
-var data_table_default = reactWrapper;
-
-export {
-  data_table_default
-};

package/dist/chunks/chunk.RN7BZPQ4.js

@@ -1,44 +0,0 @@
-import {
-  library_default_default
-} from "./chunk.CJFFVBAI.js";
-import {
-  library_system_default
-} from "./chunk.V7PVKTVW.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
-};

package/dist/chunks/chunk.RZRNGKJL.js

@@ -1,11 +0,0 @@
-import {
-  CwSkeleton
-} from "./chunk.QNCK2GAI.js";
-
-// src/components/skeleton/skeleton.ts
-var skeleton_default = CwSkeleton;
-CwSkeleton.define("cw-skeleton");
-
-export {
-  skeleton_default
-};

package/dist/chunks/chunk.SA56QYLF.js

@@ -1,28 +0,0 @@
-import {
-  CwCheckbox
-} from "./chunk.3AHTUBOG.js";
-
-// src/react/checkbox/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cw-checkbox";
-CwCheckbox.define("cw-checkbox");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CwCheckbox,
-  react: React,
-  events: {
-    onCwBlur: "cw-blur",
-    onCwChange: "cw-change",
-    onCwFocus: "cw-focus",
-    onCwInput: "cw-input",
-    onCwInvalid: "cw-invalid"
-  },
-  displayName: "CwCheckbox"
-});
-var checkbox_default = reactWrapper;
-
-export {
-  checkbox_default
-};

package/dist/chunks/chunk.STFWRH6P.js

@@ -1,11 +0,0 @@
-import {
-  CwCheckbox
-} from "./chunk.3AHTUBOG.js";
-
-// src/components/checkbox/checkbox.ts
-var checkbox_default = CwCheckbox;
-CwCheckbox.define("cw-checkbox");
-
-export {
-  checkbox_default
-};

package/dist/chunks/chunk.T62XVO2T.js

@@ -1,11 +0,0 @@
-import {
-  CwCombobox
-} from "./chunk.NZKCYY52.js";
-
-// src/components/combobox/combobox.ts
-var combobox_default = CwCombobox;
-CwCombobox.define("cw-combobox");
-
-export {
-  combobox_default
-};

package/dist/chunks/chunk.TDV4IRGW.js

@@ -1,11 +0,0 @@
-import {
-  CwTree
-} from "./chunk.Z4TUXG7F.js";
-
-// src/components/tree/tree.ts
-var tree_default = CwTree;
-CwTree.define("cw-tree");
-
-export {
-  tree_default
-};

package/dist/chunks/chunk.THF2CNPG.js

@@ -1,21 +0,0 @@
-import {
-  CwCarouselItem
-} from "./chunk.ZWDVOAET.js";
-
-// src/react/carousel-item/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "cw-carousel-item";
-CwCarouselItem.define("cw-carousel-item");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CwCarouselItem,
-  react: React,
-  events: {},
-  displayName: "CwCarouselItem"
-});
-var carousel_item_default = reactWrapper;
-
-export {
-  carousel_item_default
-};

package/dist/chunks/chunk.TJ5VIVAX.js

@@ -1,286 +0,0 @@
-import {
-  blurActiveElement
-} from "./chunk.LD4M4QGE.js";
-import {
-  CwIconButton
-} from "./chunk.CBOW7HNP.js";
-import {
-  getAnimation,
-  setDefaultAnimation
-} from "./chunk.SPWJX47D.js";
-import {
-  waitForEvent
-} from "./chunk.B4BZKR24.js";
-import {
-  animateTo,
-  stopAnimations
-} from "./chunk.TJQYJP53.js";
-import {
-  LocalizeController
-} from "./chunk.DVGAJ3DA.js";
-import {
-  HasSlotController
-} from "./chunk.BVGZUUCX.js";
-import {
-  alert_styles_default
-} from "./chunk.FKQZ3XF5.js";
-import {
-  watch
-} from "./chunk.GQZ7EGMM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  CwElement
-} from "./chunk.NB4MG53P.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/alert/alert.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-var _CwAlert = class _CwAlert extends CwElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "icon", "suffix");
-    this.localize = new LocalizeController(this);
-    this.open = false;
-    this.closable = false;
-    this.variant = "primary";
-    this.duration = Infinity;
-    this.remainingTime = this.duration;
-  }
-  static get toastStack() {
-    if (!this.currentToastStack) {
-      this.currentToastStack = Object.assign(document.createElement("div"), {
-        className: "cw-toast-stack"
-      });
-    }
-    return this.currentToastStack;
-  }
-  firstUpdated() {
-    this.base.hidden = !this.open;
-  }
-  restartAutoHide() {
-    this.handleCountdownChange();
-    clearTimeout(this.autoHideTimeout);
-    clearInterval(this.remainingTimeInterval);
-    if (this.open && this.duration < Infinity) {
-      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);
-      this.remainingTime = this.duration;
-      this.remainingTimeInterval = window.setInterval(() => {
-        this.remainingTime -= 100;
-      }, 100);
-    }
-  }
-  pauseAutoHide() {
-    var _a;
-    (_a = this.countdownAnimation) == null ? void 0 : _a.pause();
-    clearTimeout(this.autoHideTimeout);
-    clearInterval(this.remainingTimeInterval);
-  }
-  resumeAutoHide() {
-    var _a;
-    if (this.duration < Infinity) {
-      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);
-      this.remainingTimeInterval = window.setInterval(() => {
-        this.remainingTime -= 100;
-      }, 100);
-      (_a = this.countdownAnimation) == null ? void 0 : _a.play();
-    }
-  }
-  handleCountdownChange() {
-    if (this.open && this.duration < Infinity && this.countdown) {
-      const { countdownElement } = this;
-      const start = "100%";
-      const end = "0";
-      this.countdownAnimation = countdownElement.animate([{ width: start }, { width: end }], {
-        duration: this.duration,
-        easing: "linear"
-      });
-    }
-  }
-  handleCloseClick() {
-    this.hide();
-  }
-  async handleOpenChange() {
-    if (this.open) {
-      this.emit("cw-show");
-      if (this.duration < Infinity) {
-        this.restartAutoHide();
-      }
-      await stopAnimations(this.base);
-      this.base.hidden = false;
-      const { keyframes, options } = getAnimation(this, "alert.show", { dir: this.localize.dir() });
-      await animateTo(this.base, keyframes, options);
-      this.emit("cw-after-show");
-    } else {
-      blurActiveElement(this);
-      this.emit("cw-hide");
-      clearTimeout(this.autoHideTimeout);
-      clearInterval(this.remainingTimeInterval);
-      await stopAnimations(this.base);
-      const { keyframes, options } = getAnimation(this, "alert.hide", { dir: this.localize.dir() });
-      await animateTo(this.base, keyframes, options);
-      this.base.hidden = true;
-      this.emit("cw-after-hide");
-    }
-  }
-  handleDurationChange() {
-    this.restartAutoHide();
-  }
-  /** Shows the alert. */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.open = true;
-    return waitForEvent(this, "cw-after-show");
-  }
-  /** Hides the alert */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.open = false;
-    return waitForEvent(this, "cw-after-hide");
-  }
-  /**
-   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   */
-  async toast() {
-    return new Promise((resolve) => {
-      this.handleCountdownChange();
-      if (_CwAlert.toastStack.parentElement === null) {
-        document.body.append(_CwAlert.toastStack);
-      }
-      _CwAlert.toastStack.appendChild(this);
-      requestAnimationFrame(() => {
-        this.clientWidth;
-        this.show();
-      });
-      this.addEventListener(
-        "cw-after-hide",
-        () => {
-          _CwAlert.toastStack.removeChild(this);
-          resolve();
-          if (_CwAlert.toastStack.querySelector("cw-alert") === null) {
-            _CwAlert.toastStack.remove();
-          }
-        },
-        { once: true }
-      );
-    });
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      alert: true,
-      "alert--open": this.open,
-      "alert--closable": this.closable,
-      "alert--has-countdown": !!this.countdown,
-      "alert--has-icon": this.hasSlotController.test("icon"),
-      "alert--primary": this.variant === "primary",
-      "alert--success": this.variant === "success",
-      "alert--neutral": this.variant === "neutral",
-      "alert--warning": this.variant === "warning",
-      "alert--danger": this.variant === "danger"
-    })}
-        role="alert"
-        aria-hidden=${this.open ? "false" : "true"}
-        @mouseenter=${this.pauseAutoHide}
-        @mouseleave=${this.resumeAutoHide}
-      >
-        <div part="icon" class="alert__icon">
-          <slot name="icon"></slot>
-        </div>
-
-        <div part="message" class="alert__message" aria-live="polite">
-          <slot></slot>
-        </div>
-
-        ${this.closable ? html`
-                <cw-icon-button
-                  part="close-button"
-                  exportparts="base:close-button__base"
-                  class="alert__close-button"
-                  name="x-lg"
-                  library="system"
-                  label=${this.localize.term("close")}
-                  @click=${this.handleCloseClick}
-                ></cw-icon-button>
-              ` : ""}
-
-        <div role="timer" class="alert__timer">${this.remainingTime}</div>
-
-        ${this.countdown ? html`
-                <div
-                  class=${classMap({
-      alert__countdown: true,
-      "alert__countdown--ltr": this.countdown === "ltr"
-    })}
-                >
-                  <div class="alert__countdown-elapsed"></div>
-                </div>
-              ` : ""}
-      </div>
-    `;
-  }
-};
-_CwAlert.styles = [component_styles_default, alert_styles_default];
-_CwAlert.dependencies = { "cw-icon-button": CwIconButton };
-__decorateClass([
-  query('[part~="base"]')
-], _CwAlert.prototype, "base", 2);
-__decorateClass([
-  query(".alert__countdown-elapsed")
-], _CwAlert.prototype, "countdownElement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], _CwAlert.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], _CwAlert.prototype, "closable", 2);
-__decorateClass([
-  property({ reflect: true })
-], _CwAlert.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Number })
-], _CwAlert.prototype, "duration", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], _CwAlert.prototype, "countdown", 2);
-__decorateClass([
-  state()
-], _CwAlert.prototype, "remainingTime", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], _CwAlert.prototype, "handleOpenChange", 1);
-__decorateClass([
-  watch("duration")
-], _CwAlert.prototype, "handleDurationChange", 1);
-var CwAlert = _CwAlert;
-setDefaultAnimation("alert.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.8 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 250, easing: "ease" }
-});
-setDefaultAnimation("alert.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.8 }
-  ],
-  options: { duration: 250, easing: "ease" }
-});
-
-export {
-  CwAlert
-};

package/dist/chunks/chunk.TO5JY7TD.js

@@ -1,21 +0,0 @@
-import {
-  CwCard
-} from "./chunk.7VV2QIUG.js";
-
-// src/react/card/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "cw-card";
-CwCard.define("cw-card");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CwCard,
-  react: React,
-  events: {},
-  displayName: "CwCard"
-});
-var card_default = reactWrapper;
-
-export {
-  card_default
-};

package/dist/chunks/chunk.TVNB4JXG.js

@@ -1,50 +0,0 @@
-// src/translations/en.ts
-import { registerTranslation } from "@cordwainer/cw-localize";
-var translation = {
-  $code: "en",
-  $name: "English",
-  $dir: "ltr",
-  carousel: "Carousel",
-  clearEntry: "Clear entry",
-  close: "Close",
-  copied: "Copied",
-  copy: "Copy",
-  currentValue: "Current value",
-  error: "Error",
-  goToPage: (page) => `Go to page ${page}`,
-  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,
-  hidePassword: "Hide password",
-  home: "Home",
-  hour: "Hour",
-  loading: "Loading",
-  meridiem: "AM/PM",
-  minute: "Minute",
-  nextMonth: "Next month",
-  nextPage: "Next page",
-  nextSlide: "Next slide",
-  numOptionsSelected: (num) => {
-    if (num === 0) return "No options selected";
-    if (num === 1) return "1 option selected";
-    return `${num} options selected`;
-  },
-  pagination: "Pagination",
-  previousMonth: "Previous month",
-  previousPage: "Previous page",
-  previousSlide: "Previous slide",
-  progress: "Progress",
-  second: "Second",
-  remove: "Remove",
-  resize: "Resize",
-  scrollToEnd: "Scroll to end",
-  scrollToStart: "Scroll to start",
-  selectAColorFromTheScreen: "Select a color from the screen",
-  showPassword: "Show password",
-  slideNum: (slide) => `Slide ${slide}`,
-  toggleColorFormat: "Toggle color format"
-};
-registerTranslation(translation);
-var en_default = translation;
-
-export {
-  en_default
-};

package/dist/chunks/chunk.UENUKMVE.js

@@ -1,24 +0,0 @@
-import {
-  CwTag
-} from "./chunk.H7JBYTAA.js";
-
-// src/react/tag/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "cw-tag";
-CwTag.define("cw-tag");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: CwTag,
-  react: React,
-  events: {
-    onCwRemove: "cw-remove"
-  },
-  displayName: "CwTag"
-});
-var tag_default = reactWrapper;
-
-export {
-  tag_default
-};