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

package/dist/chunks/chunk.ZIR4PZBK.js

@@ -1,311 +0,0 @@
-import {
-  CwTreeItem
-} from "./chunk.FQAIDFSL.js";
-import {
-  tree_styles_default
-} from "./chunk.U4A4EIV4.js";
-import {
-  clamp
-} from "./chunk.HF7GESMZ.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.KC7WW3LQ.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/tree/tree.component.ts
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-function syncCheckboxes(changedTreeItem, initialSync = false) {
-  function syncParentItem(treeItem) {
-    const children = treeItem.getChildrenItems({ includeDisabled: false });
-    if (children.length) {
-      const allChecked = children.every((item) => item.selected);
-      const allUnchecked = children.every((item) => !item.selected && !item.indeterminate);
-      treeItem.selected = allChecked;
-      treeItem.indeterminate = !allChecked && !allUnchecked;
-    }
-  }
-  function syncAncestors(treeItem) {
-    const parentItem = treeItem.parentElement;
-    if (CwTreeItem.isTreeItem(parentItem)) {
-      syncParentItem(parentItem);
-      syncAncestors(parentItem);
-    }
-  }
-  function syncDescendants(treeItem) {
-    for (const childItem of treeItem.getChildrenItems()) {
-      childItem.selected = initialSync ? treeItem.selected || childItem.selected : !childItem.disabled && treeItem.selected;
-      syncDescendants(childItem);
-    }
-    if (initialSync) {
-      syncParentItem(treeItem);
-    }
-  }
-  syncDescendants(changedTreeItem);
-  syncAncestors(changedTreeItem);
-}
-var CwTree = class extends CwElement {
-  constructor() {
-    super();
-    this.selection = "single";
-    this.clickTarget = null;
-    this.localize = new LocalizeController(this);
-    // Initializes new items by setting the `selectable` property and the expanded/collapsed icons if any
-    this.initTreeItem = (item) => {
-      item.selectable = this.selection === "multiple";
-      ["expand", "collapse"].filter((status) => !!this.querySelector(`[slot="${status}-icon"]`)).forEach((status) => {
-        const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
-        const expandButtonIcon = this.getExpandButtonIcon(status);
-        if (!expandButtonIcon) return;
-        if (existingIcon === null) {
-          item.append(expandButtonIcon);
-        } else if (existingIcon.hasAttribute("data-default")) {
-          existingIcon.replaceWith(expandButtonIcon);
-        } else {
-        }
-      });
-    };
-    this.handleTreeChanged = (mutations) => {
-      for (const mutation of mutations) {
-        const addedNodes = [...mutation.addedNodes].filter(CwTreeItem.isTreeItem);
-        const removedNodes = [...mutation.removedNodes].filter(CwTreeItem.isTreeItem);
-        addedNodes.forEach(this.initTreeItem);
-        if (this.lastFocusedItem && removedNodes.includes(this.lastFocusedItem)) {
-          this.lastFocusedItem = null;
-        }
-      }
-    };
-    this.handleFocusOut = (event) => {
-      const relatedTarget = event.relatedTarget;
-      if (!relatedTarget || !this.contains(relatedTarget)) {
-        this.tabIndex = 0;
-      }
-    };
-    this.handleFocusIn = (event) => {
-      const target = event.target;
-      if (event.target === this) {
-        this.focusItem(this.lastFocusedItem || this.getAllTreeItems()[0]);
-      }
-      if (CwTreeItem.isTreeItem(target) && !target.disabled) {
-        if (this.lastFocusedItem) {
-          this.lastFocusedItem.tabIndex = -1;
-        }
-        this.lastFocusedItem = target;
-        this.tabIndex = -1;
-        target.tabIndex = 0;
-      }
-    };
-    this.addEventListener("focusin", this.handleFocusIn);
-    this.addEventListener("focusout", this.handleFocusOut);
-    this.addEventListener("cw-lazy-change", this.handleSlotChange);
-  }
-  async connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "tree");
-    this.setAttribute("tabindex", "0");
-    await this.updateComplete;
-    this.mutationObserver = new MutationObserver(this.handleTreeChanged);
-    this.mutationObserver.observe(this, { childList: true, subtree: true });
-  }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
-  }
-  // Generates a clone of the expand icon element to use for each tree item
-  getExpandButtonIcon(status) {
-    const slot = status === "expand" ? this.expandedIconSlot : this.collapsedIconSlot;
-    const icon = slot.assignedElements({ flatten: true })[0];
-    if (icon) {
-      const clone = icon.cloneNode(true);
-      [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
-      clone.setAttribute("data-default", "");
-      clone.slot = `${status}-icon`;
-      return clone;
-    }
-    return null;
-  }
-  selectItem(selectedItem) {
-    const previousSelection = [...this.selectedItems];
-    if (this.selection === "multiple") {
-      selectedItem.selected = !selectedItem.selected;
-      if (selectedItem.lazy) {
-        selectedItem.expanded = true;
-      }
-      syncCheckboxes(selectedItem);
-    } else if (this.selection === "single" || selectedItem.isLeaf) {
-      const items = this.getAllTreeItems();
-      for (const item of items) {
-        item.selected = item === selectedItem;
-      }
-    } else if (this.selection === "leaf") {
-      selectedItem.expanded = !selectedItem.expanded;
-    }
-    const nextSelection = this.selectedItems;
-    if (previousSelection.length !== nextSelection.length || nextSelection.some((item) => !previousSelection.includes(item))) {
-      Promise.all(nextSelection.map((el) => el.updateComplete)).then(() => {
-        this.emit("cw-selection-change", { detail: { selection: nextSelection } });
-      });
-    }
-  }
-  getAllTreeItems() {
-    return [...this.querySelectorAll("cw-tree-item")];
-  }
-  focusItem(item) {
-    item == null ? void 0 : item.focus();
-  }
-  handleKeyDown(event) {
-    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End", "Enter", " "].includes(event.key)) {
-      return;
-    }
-    if (event.composedPath().some((el) => {
-      var _a;
-      return ["input", "textarea"].includes((_a = el == null ? void 0 : el.tagName) == null ? void 0 : _a.toLowerCase());
-    })) {
-      return;
-    }
-    const items = this.getFocusableItems();
-    const isLtr = this.localize.dir() === "ltr";
-    const isRtl = this.localize.dir() === "rtl";
-    if (items.length > 0) {
-      event.preventDefault();
-      const activeItemIndex = items.findIndex((item) => item.matches(":focus"));
-      const activeItem = items[activeItemIndex];
-      const focusItemAt = (index) => {
-        const item = items[clamp(index, 0, items.length - 1)];
-        this.focusItem(item);
-      };
-      const toggleExpand = (expanded) => {
-        activeItem.expanded = expanded;
-      };
-      if (event.key === "ArrowDown") {
-        focusItemAt(activeItemIndex + 1);
-      } else if (event.key === "ArrowUp") {
-        focusItemAt(activeItemIndex - 1);
-      } else if (isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
-        if (!activeItem || activeItem.disabled || activeItem.expanded || activeItem.isLeaf && !activeItem.lazy) {
-          focusItemAt(activeItemIndex + 1);
-        } else {
-          toggleExpand(true);
-        }
-      } else if (isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
-        if (!activeItem || activeItem.disabled || activeItem.isLeaf || !activeItem.expanded) {
-          focusItemAt(activeItemIndex - 1);
-        } else {
-          toggleExpand(false);
-        }
-      } else if (event.key === "Home") {
-        focusItemAt(0);
-      } else if (event.key === "End") {
-        focusItemAt(items.length - 1);
-      } else if (event.key === "Enter" || event.key === " ") {
-        if (!activeItem.disabled) {
-          this.selectItem(activeItem);
-        }
-      }
-    }
-  }
-  handleClick(event) {
-    const target = event.target;
-    const treeItem = target.closest("cw-tree-item");
-    const isExpandButton = event.composedPath().some((el) => {
-      var _a;
-      return (_a = el == null ? void 0 : el.classList) == null ? void 0 : _a.contains("tree-item__expand-button");
-    });
-    if (!treeItem || treeItem.disabled || target !== this.clickTarget) {
-      return;
-    }
-    if (isExpandButton) {
-      treeItem.expanded = !treeItem.expanded;
-    } else {
-      this.selectItem(treeItem);
-    }
-  }
-  handleMouseDown(event) {
-    this.clickTarget = event.target;
-  }
-  handleSlotChange() {
-    const items = this.getAllTreeItems();
-    items.forEach(this.initTreeItem);
-  }
-  async handleSelectionChange() {
-    const isSelectionMultiple = this.selection === "multiple";
-    const items = this.getAllTreeItems();
-    this.setAttribute("aria-multiselectable", isSelectionMultiple ? "true" : "false");
-    for (const item of items) {
-      item.selectable = isSelectionMultiple;
-    }
-    if (isSelectionMultiple) {
-      await this.updateComplete;
-      [...this.querySelectorAll(":scope > cw-tree-item")].forEach(
-        (treeItem) => syncCheckboxes(treeItem, true)
-      );
-    }
-  }
-  /** @internal Returns the list of tree items that are selected in the tree. */
-  get selectedItems() {
-    const items = this.getAllTreeItems();
-    const isSelected = (item) => item.selected;
-    return items.filter(isSelected);
-  }
-  /** @internal Gets focusable tree items in the tree. */
-  getFocusableItems() {
-    const items = this.getAllTreeItems();
-    const collapsedItems = /* @__PURE__ */ new Set();
-    return items.filter((item) => {
-      var _a;
-      if (item.disabled) return false;
-      const parent = (_a = item.parentElement) == null ? void 0 : _a.closest("[role=treeitem]");
-      if (parent && (!parent.expanded || parent.loading || collapsedItems.has(parent))) {
-        collapsedItems.add(item);
-      }
-      return !collapsedItems.has(item);
-    });
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class="tree"
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-        @mousedown=${this.handleMouseDown}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-        <span hidden aria-hidden="true"><slot name="expand-icon"></slot></span>
-        <span hidden aria-hidden="true"><slot name="collapse-icon"></slot></span>
-      </div>
-    `;
-  }
-};
-CwTree.styles = [component_styles_default, tree_styles_default];
-__decorateClass([
-  query("slot:not([name])")
-], CwTree.prototype, "defaultSlot", 2);
-__decorateClass([
-  query("slot[name=expand-icon]")
-], CwTree.prototype, "expandedIconSlot", 2);
-__decorateClass([
-  query("slot[name=collapse-icon]")
-], CwTree.prototype, "collapsedIconSlot", 2);
-__decorateClass([
-  property()
-], CwTree.prototype, "selection", 2);
-__decorateClass([
-  watch("selection")
-], CwTree.prototype, "handleSelectionChange", 1);
-
-export {
-  CwTree
-};

package/dist/chunks/chunk.ZPXHU6QB.js

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

package/dist/chunks/chunk.ZRRTANJR.js

@@ -1,11 +0,0 @@
-import {
-  CwColorPicker
-} from "./chunk.BXYIVQQS.js";
-
-// src/components/color-picker/color-picker.ts
-var color_picker_default = CwColorPicker;
-CwColorPicker.define("cw-color-picker");
-
-export {
-  color_picker_default
-};

package/dist/chunks/chunk.ZT3WFCUF.js

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

package/dist/chunks/chunk.ZULEDGVO.js

@@ -1,227 +0,0 @@
-import {
-  CwTooltip
-} from "./chunk.EIM6GVYY.js";
-import {
-  copy_button_styles_default
-} from "./chunk.OUI6FGTY.js";
-import {
-  getAnimation,
-  setDefaultAnimation
-} from "./chunk.SPWJX47D.js";
-import {
-  LocalizeController
-} from "./chunk.2H4HZOD6.js";
-import {
-  CwIcon
-} from "./chunk.K4MAKWA3.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  CwElement
-} from "./chunk.KC7WW3LQ.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/copy-button/copy-button.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-var CwCopyButton = class extends CwElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.isCopying = false;
-    this.status = "rest";
-    this.value = "";
-    this.from = "";
-    this.disabled = false;
-    this.copyLabel = "";
-    this.successLabel = "";
-    this.errorLabel = "";
-    this.feedbackDuration = 1e3;
-    this.tooltipPlacement = "top";
-    this.hoist = false;
-  }
-  async handleCopy() {
-    if (this.disabled || this.isCopying) {
-      return;
-    }
-    this.isCopying = true;
-    let valueToCopy = this.value;
-    if (this.from) {
-      const root = this.getRootNode();
-      const isProperty = this.from.includes(".");
-      const isAttribute = this.from.includes("[") && this.from.includes("]");
-      let id = this.from;
-      let field = "";
-      if (isProperty) {
-        [id, field] = this.from.trim().split(".");
-      } else if (isAttribute) {
-        [id, field] = this.from.trim().replace(/\]$/, "").split("[");
-      }
-      const target = "getElementById" in root ? root.getElementById(id) : null;
-      if (target) {
-        if (isAttribute) {
-          valueToCopy = target.getAttribute(field) || "";
-        } else if (isProperty) {
-          valueToCopy = target[field] || "";
-        } else {
-          valueToCopy = target.textContent || "";
-        }
-      } else {
-        this.showStatus("error");
-        this.emit("cw-error");
-      }
-    }
-    if (!valueToCopy) {
-      this.showStatus("error");
-      this.emit("cw-error");
-    } else {
-      try {
-        await navigator.clipboard.writeText(valueToCopy);
-        this.showStatus("success");
-        this.emit("cw-copy", {
-          detail: {
-            value: valueToCopy
-          }
-        });
-      } catch (error) {
-        this.showStatus("error");
-        this.emit("cw-error");
-      }
-    }
-  }
-  async showStatus(status) {
-    const copyLabel = this.copyLabel || this.localize.term("copy");
-    const successLabel = this.successLabel || this.localize.term("copied");
-    const errorLabel = this.errorLabel || this.localize.term("error");
-    const iconToShow = status === "success" ? this.successIcon : this.errorIcon;
-    const showAnimation = getAnimation(this, "copy.in", { dir: "ltr" });
-    const hideAnimation = getAnimation(this, "copy.out", { dir: "ltr" });
-    this.tooltip.content = status === "success" ? successLabel : errorLabel;
-    await this.copyIcon.animate(hideAnimation.keyframes, hideAnimation.options).finished;
-    this.copyIcon.hidden = true;
-    this.status = status;
-    iconToShow.hidden = false;
-    await iconToShow.animate(showAnimation.keyframes, showAnimation.options).finished;
-    setTimeout(async () => {
-      await iconToShow.animate(hideAnimation.keyframes, hideAnimation.options).finished;
-      iconToShow.hidden = true;
-      this.status = "rest";
-      this.copyIcon.hidden = false;
-      await this.copyIcon.animate(showAnimation.keyframes, showAnimation.options).finished;
-      this.tooltip.content = copyLabel;
-      this.isCopying = false;
-    }, this.feedbackDuration);
-  }
-  render() {
-    const copyLabel = this.copyLabel || this.localize.term("copy");
-    return html`
-      <cw-tooltip
-        class=${classMap({
-      "copy-button": true,
-      "copy-button--success": this.status === "success",
-      "copy-button--error": this.status === "error"
-    })}
-        content=${copyLabel}
-        placement=${this.tooltipPlacement}
-        ?disabled=${this.disabled}
-        ?hoist=${this.hoist}
-        exportparts="
-          base:tooltip__base,
-          base__popup:tooltip__base__popup,
-          base__arrow:tooltip__base__arrow,
-          body:tooltip__body
-        "
-      >
-        <button
-          class="copy-button__button"
-          part="button"
-          type="button"
-          ?disabled=${this.disabled}
-          @click=${this.handleCopy}
-        >
-          <slot part="copy-icon" name="copy-icon">
-            <cw-icon library="system" name="copy"></cw-icon>
-          </slot>
-          <slot part="success-icon" name="success-icon" hidden>
-            <cw-icon library="system" name="check"></cw-icon>
-          </slot>
-          <slot part="error-icon" name="error-icon" hidden>
-            <cw-icon library="system" name="x-lg"></cw-icon>
-          </slot>
-        </button>
-      </cw-tooltip>
-    `;
-  }
-};
-CwCopyButton.styles = [component_styles_default, copy_button_styles_default];
-CwCopyButton.dependencies = {
-  "cw-icon": CwIcon,
-  "cw-tooltip": CwTooltip
-};
-__decorateClass([
-  query('slot[name="copy-icon"]')
-], CwCopyButton.prototype, "copyIcon", 2);
-__decorateClass([
-  query('slot[name="success-icon"]')
-], CwCopyButton.prototype, "successIcon", 2);
-__decorateClass([
-  query('slot[name="error-icon"]')
-], CwCopyButton.prototype, "errorIcon", 2);
-__decorateClass([
-  query("cw-tooltip")
-], CwCopyButton.prototype, "tooltip", 2);
-__decorateClass([
-  state()
-], CwCopyButton.prototype, "isCopying", 2);
-__decorateClass([
-  state()
-], CwCopyButton.prototype, "status", 2);
-__decorateClass([
-  property()
-], CwCopyButton.prototype, "value", 2);
-__decorateClass([
-  property()
-], CwCopyButton.prototype, "from", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], CwCopyButton.prototype, "disabled", 2);
-__decorateClass([
-  property({ attribute: "copy-label" })
-], CwCopyButton.prototype, "copyLabel", 2);
-__decorateClass([
-  property({ attribute: "success-label" })
-], CwCopyButton.prototype, "successLabel", 2);
-__decorateClass([
-  property({ attribute: "error-label" })
-], CwCopyButton.prototype, "errorLabel", 2);
-__decorateClass([
-  property({ attribute: "feedback-duration", type: Number })
-], CwCopyButton.prototype, "feedbackDuration", 2);
-__decorateClass([
-  property({ attribute: "tooltip-placement" })
-], CwCopyButton.prototype, "tooltipPlacement", 2);
-__decorateClass([
-  property({ type: Boolean })
-], CwCopyButton.prototype, "hoist", 2);
-setDefaultAnimation("copy.in", {
-  keyframes: [
-    { scale: ".25", opacity: ".25" },
-    { scale: "1", opacity: "1" }
-  ],
-  options: { duration: 100 }
-});
-setDefaultAnimation("copy.out", {
-  keyframes: [
-    { scale: "1", opacity: "1" },
-    { scale: ".25", opacity: "0" }
-  ],
-  options: { duration: 100 }
-});
-
-export {
-  CwCopyButton
-};

package/dist/chunks/chunk.ZY7XBI2P.js

@@ -1,50 +0,0 @@
-import {
-  LocalizeController
-} from "./chunk.2H4HZOD6.js";
-import {
-  CwElement
-} from "./chunk.KC7WW3LQ.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/format-bytes/format-bytes.component.ts
-import { property } from "lit/decorators.js";
-var CwFormatBytes = class extends CwElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.value = 0;
-    this.unit = "byte";
-    this.display = "short";
-  }
-  render() {
-    if (isNaN(this.value)) {
-      return "";
-    }
-    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
-    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
-    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
-    const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1));
-    const unit = prefix[index] + this.unit;
-    const valueToFormat = parseFloat((this.value / Math.pow(1e3, index)).toPrecision(3));
-    return this.localize.number(valueToFormat, {
-      style: "unit",
-      unit,
-      unitDisplay: this.display
-    });
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], CwFormatBytes.prototype, "value", 2);
-__decorateClass([
-  property()
-], CwFormatBytes.prototype, "unit", 2);
-__decorateClass([
-  property()
-], CwFormatBytes.prototype, "display", 2);
-
-export {
-  CwFormatBytes
-};