@cordwainer/cw-elements 1.3.0-alpha.4 → 1.3.0-beta.1

package/cdn/chunks/chunk.223M7KCR.js

@@ -0,0 +1,137 @@
+import {
+  menu_styles_default
+} from "./chunk.JDVOLIP5.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e
+} from "./chunk.VR25AW4B.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/menu/menu.component.ts
+var CwMenu = class extends CwElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+  }
+  handleClick(event) {
+    const menuItemTypes = ["menuitem", "menuitemcheckbox"];
+    const composedPath = event.composedPath();
+    const target = composedPath.find((el) => {
+      var _a;
+      return menuItemTypes.includes(((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) || "");
+    });
+    if (!target) return;
+    const closestMenu = composedPath.find((el) => {
+      var _a;
+      return ((_a = el == null ? void 0 : el.getAttribute) == null ? void 0 : _a.call(el, "role")) === "menu";
+    });
+    const clickHasSubmenu = closestMenu !== this;
+    if (clickHasSubmenu) return;
+    const item = target;
+    if (item.type === "checkbox") {
+      item.checked = !item.checked;
+    }
+    this.emit("cw-select", { detail: { item } });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+      item == null ? void 0 : item.click();
+    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.key === "ArrowDown") {
+          index++;
+        } else if (event.key === "ArrowUp") {
+          index--;
+        } else if (event.key === "Home") {
+          index = 0;
+        } else if (event.key === "End") {
+          index = items.length - 1;
+        }
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+  handleMouseDown(event) {
+    const target = event.target;
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target);
+    }
+  }
+  handleSlotChange() {
+    const items = this.getAllItems();
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+  isMenuItem(item) {
+    var _a;
+    return item.tagName.toLowerCase() === "cw-menu-item" || ["menuitem", "menuitemcheckbox", "menuitemradio"].includes((_a = item.getAttribute("role")) != null ? _a : "");
+  }
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+      if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    });
+  }
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find((i) => i.getAttribute("tabindex") === "0");
+  }
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item) {
+    const items = this.getAllItems();
+    items.forEach((i) => {
+      i.setAttribute("tabindex", i === item ? "0" : "-1");
+    });
+  }
+  render() {
+    return b`
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+};
+CwMenu.styles = [component_styles_default, menu_styles_default];
+__decorateClass([
+  e("slot")
+], CwMenu.prototype, "defaultSlot", 2);
+
+export {
+  CwMenu
+};

package/cdn/chunks/chunk.2H665U5N.js

@@ -0,0 +1,64 @@
+import {
+  footer_styles_default
+} from "./chunk.LMZOENUX.js";
+import {
+  HasSlotController
+} from "./chunk.BVGZUUCX.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n
+} from "./chunk.VR25AW4B.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/footer/footer.component.ts
+var CwFooter = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "logo", "menu", "about", "social");
+    this.owner = "";
+  }
+  render() {
+    const year = (/* @__PURE__ */ new Date()).getFullYear();
+    const hasSocial = this.hasSlotController.test("social");
+    const hasBottom = Boolean(this.owner) || hasSocial;
+    return b`
+      <footer part="base" class="footer">
+        <div part="logo" class="footer__logo" ?hidden=${!this.hasSlotController.test("logo")}>
+          <slot name="logo"></slot>
+        </div>
+
+        <div part="menu" class="footer__menu" ?hidden=${!this.hasSlotController.test("menu")}>
+          <slot name="menu"></slot>
+        </div>
+
+        <div part="about" class="footer__about" ?hidden=${!this.hasSlotController.test("about")}>
+          <slot name="about"></slot>
+        </div>
+
+        <div part="bottom" class="footer__bottom" ?hidden=${!hasBottom}>
+          ${this.owner ? b`<div part="copyright" class="footer__copyright">© ${year} ${this.owner}</div>` : ""}
+
+          <div part="social" class="footer__social" ?hidden=${!hasSocial}>
+            <slot name="social"></slot>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+};
+CwFooter.styles = [component_styles_default, footer_styles_default];
+__decorateClass([
+  n()
+], CwFooter.prototype, "owner", 2);
+
+export {
+  CwFooter
+};

package/cdn/chunks/chunk.2IQJTQUV.js

@@ -0,0 +1,27 @@
+import {
+  CwPrimaryNavigation
+} from "./chunk.VPDPIB4T.js";
+
+// src/react/primary-navigation/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-primary-navigation";
+CwPrimaryNavigation.define("cw-primary-navigation");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwPrimaryNavigation,
+  react: React,
+  events: {
+    onCwShow: "cw-show",
+    onCwAfterShow: "cw-after-show",
+    onCwHide: "cw-hide",
+    onCwAfterHide: "cw-after-hide"
+  },
+  displayName: "CwPrimaryNavigation"
+});
+var primary_navigation_default = reactWrapper;
+
+export {
+  primary_navigation_default
+};

package/cdn/chunks/chunk.2LEP4IA3.js

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

package/cdn/chunks/chunk.2LTTK66R.js

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

package/cdn/chunks/chunk.2QHZHPPH.js

@@ -0,0 +1,21 @@
+import {
+  CwProgressBar
+} from "./chunk.MNSTVN63.js";
+
+// src/react/progress-bar/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-progress-bar";
+CwProgressBar.define("cw-progress-bar");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwProgressBar,
+  react: React,
+  events: {},
+  displayName: "CwProgressBar"
+});
+var progress_bar_default = reactWrapper;
+
+export {
+  progress_bar_default
+};

package/cdn/chunks/chunk.2QSCAAZI.js

@@ -0,0 +1,21 @@
+import {
+  CwRelativeTime
+} from "./chunk.2UL2QZKW.js";
+
+// src/react/relative-time/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-relative-time";
+CwRelativeTime.define("cw-relative-time");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwRelativeTime,
+  react: React,
+  events: {},
+  displayName: "CwRelativeTime"
+});
+var relative_time_default = reactWrapper;
+
+export {
+  relative_time_default
+};

package/cdn/chunks/chunk.2RCILA6Y.js

@@ -0,0 +1,42 @@
+import {
+  divider_styles_default
+} from "./chunk.H4GSBSFJ.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n
+} from "./chunk.VR25AW4B.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/divider/divider.component.ts
+var CwDivider = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "separator");
+  }
+  handleVerticalChange() {
+    this.setAttribute("aria-orientation", this.vertical ? "vertical" : "horizontal");
+  }
+};
+CwDivider.styles = [component_styles_default, divider_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwDivider.prototype, "vertical", 2);
+__decorateClass([
+  watch("vertical")
+], CwDivider.prototype, "handleVerticalChange", 1);
+
+export {
+  CwDivider
+};

package/cdn/chunks/chunk.2U2GANZ4.js

@@ -0,0 +1,127 @@
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.C2IWTXCI.js";
+import {
+  o
+} from "./chunk.LRAERZML.js";
+import {
+  HasSlotController
+} from "./chunk.BVGZUUCX.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.VR25AW4B.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.component.ts
+var CwBreadcrumbItem = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.renderType = "button";
+    this.rel = "noreferrer noopener";
+  }
+  setRenderType() {
+    const hasDropdown = this.defaultSlot.assignedElements({ flatten: true }).filter((i) => i.tagName.toLowerCase() === "cw-dropdown").length > 0;
+    if (this.href) {
+      this.renderType = "link";
+      return;
+    }
+    if (hasDropdown) {
+      this.renderType = "dropdown";
+      return;
+    }
+    this.renderType = "button";
+  }
+  hrefChanged() {
+    this.setRenderType();
+  }
+  handleSlotChange() {
+    this.setRenderType();
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${e({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${this.renderType === "link" ? b`
+                <a
+                  part="label"
+                  class="breadcrumb-item__label breadcrumb-item__label--link"
+                  href="${this.href}"
+                  target="${o(this.target ? this.target : void 0)}"
+                  rel=${o(this.target ? this.rel : void 0)}
+                >
+                  <slot @slotchange=${this.handleSlotChange}></slot>
+                </a>
+              ` : ""}
+        ${this.renderType === "button" ? b`
+                <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                  <slot @slotchange=${this.handleSlotChange}></slot>
+                </button>
+              ` : ""}
+        ${this.renderType === "dropdown" ? b`
+                <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
+                  <slot @slotchange=${this.handleSlotChange}></slot>
+                </div>
+              ` : ""}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+CwBreadcrumbItem.styles = [component_styles_default, breadcrumb_item_styles_default];
+__decorateClass([
+  e2("slot:not([name])")
+], CwBreadcrumbItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], CwBreadcrumbItem.prototype, "renderType", 2);
+__decorateClass([
+  n()
+], CwBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  n()
+], CwBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  n()
+], CwBreadcrumbItem.prototype, "rel", 2);
+__decorateClass([
+  watch("href", { waitUntilFirstUpdate: true })
+], CwBreadcrumbItem.prototype, "hrefChanged", 1);
+
+export {
+  CwBreadcrumbItem
+};

package/cdn/chunks/chunk.2UL2QZKW.js

@@ -0,0 +1,103 @@
+import {
+  LocalizeController
+} from "./chunk.75ZQOYXC.js";
+import {
+  CwElement,
+  n,
+  r
+} from "./chunk.VR25AW4B.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/relative-time/relative-time.component.ts
+var availableUnits = [
+  { max: 276e4, value: 6e4, unit: "minute" },
+  // max 46 minutes
+  { max: 72e6, value: 36e5, unit: "hour" },
+  // max 20 hours
+  { max: 5184e5, value: 864e5, unit: "day" },
+  // max 6 days
+  { max: 24192e5, value: 6048e5, unit: "week" },
+  // max 28 days
+  { max: 28512e6, value: 2592e6, unit: "month" },
+  // max 11 months
+  { max: Infinity, value: 31536e6, unit: "year" }
+];
+var CwRelativeTime = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.isoTime = "";
+    this.relativeTime = "";
+    this.date = /* @__PURE__ */ new Date();
+    this.format = "long";
+    this.numeric = "auto";
+    this.sync = false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.updateTimeout);
+  }
+  render() {
+    const now = /* @__PURE__ */ new Date();
+    const then = new Date(this.date);
+    if (isNaN(then.getMilliseconds())) {
+      this.relativeTime = "";
+      this.isoTime = "";
+      return "";
+    }
+    const diff = then.getTime() - now.getTime();
+    const { unit, value } = availableUnits.find((singleUnit) => Math.abs(diff) < singleUnit.max);
+    this.isoTime = then.toISOString();
+    this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
+      numeric: this.numeric,
+      style: this.format
+    });
+    clearTimeout(this.updateTimeout);
+    if (this.sync) {
+      let nextInterval;
+      if (unit === "minute") {
+        nextInterval = getTimeUntilNextUnit("second");
+      } else if (unit === "hour") {
+        nextInterval = getTimeUntilNextUnit("minute");
+      } else if (unit === "day") {
+        nextInterval = getTimeUntilNextUnit("hour");
+      } else {
+        nextInterval = getTimeUntilNextUnit("day");
+      }
+      this.updateTimeout = window.setTimeout(() => this.requestUpdate(), nextInterval);
+    }
+    return b` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
+  }
+};
+__decorateClass([
+  r()
+], CwRelativeTime.prototype, "isoTime", 2);
+__decorateClass([
+  r()
+], CwRelativeTime.prototype, "relativeTime", 2);
+__decorateClass([
+  n()
+], CwRelativeTime.prototype, "date", 2);
+__decorateClass([
+  n()
+], CwRelativeTime.prototype, "format", 2);
+__decorateClass([
+  n()
+], CwRelativeTime.prototype, "numeric", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CwRelativeTime.prototype, "sync", 2);
+function getTimeUntilNextUnit(unit) {
+  const units = { second: 1e3, minute: 6e4, hour: 36e5, day: 864e5 };
+  const value = units[unit];
+  return value - Date.now() % value;
+}
+
+export {
+  CwRelativeTime
+};

package/cdn/chunks/chunk.2WHLSX2F.js

@@ -0,0 +1,21 @@
+import {
+  CwBreadcrumbItem
+} from "./chunk.2U2GANZ4.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/cdn/chunks/chunk.2XGAFCH6.js

@@ -0,0 +1,11 @@
+import {
+  CwPagination
+} from "./chunk.H2UDZOL7.js";
+
+// src/components/pagination/pagination.ts
+var pagination_default = CwPagination;
+CwPagination.define("cw-pagination");
+
+export {
+  pagination_default
+};