@cordwainer/cw-elements 1.4.0-alpha.1 → 1.4.0

package/dist/chunks/chunk.TZ3TRTXB.js

@@ -0,0 +1,276 @@
+import {
+  primary_navigation_item_styles_default
+} from "./chunk.HOKHQD4A.js";
+import {
+  CwDropdown
+} from "./chunk.5AMXWI2D.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.SPWJX47D.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.TJQYJP53.js";
+import {
+  LocalizeController
+} from "./chunk.OFFCHZOX.js";
+import {
+  CwIcon
+} from "./chunk.SKHX4OLU.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.QNSZUVGZ.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/primary-navigation-item/primary-navigation-item.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var id = 0;
+var CwPrimaryNavigationItem = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.componentId = `cw-primary-navigation-item-${++id}`;
+    this.localize = new LocalizeController(this);
+    this.hasMenu = false;
+    this.open = false;
+    this.rel = "noreferrer noopener";
+    this.current = false;
+    this.mobile = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.panel && this.panel !== this.lastPanel) {
+      this.panel.hidden = !this.open;
+    }
+    this.lastPanel = this.panel;
+  }
+  // Queried by light-DOM `slot` attribute rather than the currently-rendered `<slot name="menu">` node's
+  // `assignedElements()` — which branch (and therefore which slot node) is active can change independently of
+  // this, so re-deriving from the host's actual children stays correct across a mobile/desktop switch.
+  syncMenuMobileState() {
+    [...this.children].forEach((el) => {
+      if (el.slot === "menu" && el.tagName.toLowerCase() === "cw-primary-navigation-menu") {
+        el.mobile = this.mobile;
+      }
+    });
+  }
+  handleMenuSlotChange() {
+    var _a;
+    this.hasMenu = Boolean((_a = this.menuSlot) == null ? void 0 : _a.assignedElements({ flatten: true }).length);
+    this.syncMenuMobileState();
+  }
+  handleDropdownShow() {
+    this.open = true;
+  }
+  handleDropdownHide() {
+    this.open = false;
+  }
+  handleTriggerClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  handleMobileChange() {
+    var _a;
+    (_a = this.dropdown) == null ? void 0 : _a.hide();
+    this.open = false;
+    this.syncMenuMobileState();
+  }
+  async showInlineMenu() {
+    if (this.open) {
+      return void 0;
+    }
+    const cwShow = this.emit("cw-show", { cancelable: true });
+    if (cwShow.defaultPrevented) {
+      return void 0;
+    }
+    this.open = true;
+    await stopAnimations(this.panel);
+    this.panel.hidden = false;
+    const { keyframes, options } = getAnimation(this, "primary-navigation-item.show", { dir: this.localize.dir() });
+    await animateTo(this.panel, shimKeyframesHeightAuto(keyframes, this.panel.scrollHeight), options);
+    this.emit("cw-after-show");
+    return void 0;
+  }
+  async hideInlineMenu() {
+    if (!this.open) {
+      return void 0;
+    }
+    const cwHide = this.emit("cw-hide", { cancelable: true });
+    if (cwHide.defaultPrevented) {
+      return void 0;
+    }
+    await stopAnimations(this.panel);
+    const { keyframes, options } = getAnimation(this, "primary-navigation-item.hide", { dir: this.localize.dir() });
+    await animateTo(this.panel, shimKeyframesHeightAuto(keyframes, this.panel.scrollHeight), options);
+    this.panel.hidden = true;
+    this.open = false;
+    this.emit("cw-after-hide");
+    return void 0;
+  }
+  /** Opens the item's dropdown, if it has one. No-op for link/plain items. */
+  async show() {
+    var _a;
+    if (this.mobile) {
+      return this.showInlineMenu();
+    }
+    return (_a = this.dropdown) == null ? void 0 : _a.show();
+  }
+  /** Closes the item's dropdown, if it has one. No-op for link/plain items. */
+  async hide() {
+    var _a;
+    if (this.mobile) {
+      return this.hideInlineMenu();
+    }
+    return (_a = this.dropdown) == null ? void 0 : _a.hide();
+  }
+  render() {
+    const ariaCurrent = this.current ? "page" : nothing;
+    const menuSlot = html`<slot name="menu" @slotchange=${this.handleMenuSlotChange} hidden></slot>`;
+    let content;
+    if (this.href) {
+      content = html`
+        <a
+          part="link"
+          class="primary-navigation-item__link"
+          href=${this.href}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(this.rel || void 0)}
+          aria-current=${ariaCurrent}
+        >
+          <slot></slot>
+        </a>
+        ${menuSlot}
+      `;
+    } else if (this.hasMenu && this.mobile) {
+      content = html`
+        <button
+          part="trigger"
+          type="button"
+          id=${`${this.componentId}-trigger`}
+          class="primary-navigation-item__trigger"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${`${this.componentId}-panel`}
+          @click=${this.handleTriggerClick}
+        >
+          <slot></slot>
+          <cw-icon library="system" name="chevron-down"></cw-icon>
+        </button>
+
+        <div
+          part="panel"
+          id=${`${this.componentId}-panel`}
+          class="primary-navigation-item__panel"
+          role="region"
+          aria-labelledby=${`${this.componentId}-trigger`}
+        >
+          <slot name="menu" @slotchange=${this.handleMenuSlotChange}></slot>
+        </div>
+      `;
+    } else if (this.hasMenu) {
+      content = html`
+        <cw-dropdown
+          part="trigger"
+          placement="bottom-start"
+          @cw-show=${this.handleDropdownShow}
+          @cw-hide=${this.handleDropdownHide}
+        >
+          <button slot="trigger" type="button" class="primary-navigation-item__trigger">
+            <slot></slot>
+            <cw-icon library="system" name="chevron-down"></cw-icon>
+          </button>
+          <slot name="menu" @slotchange=${this.handleMenuSlotChange}></slot>
+        </cw-dropdown>
+      `;
+    } else {
+      content = html`
+        <span class="primary-navigation-item__label"><slot></slot></span>
+        ${menuSlot}
+      `;
+    }
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "primary-navigation-item": true,
+      "primary-navigation-item--current": this.current,
+      "primary-navigation-item--open": this.open,
+      "primary-navigation-item--mobile": this.mobile
+    })}
+      >
+        ${content}
+      </div>
+    `;
+  }
+};
+CwPrimaryNavigationItem.styles = [component_styles_default, primary_navigation_item_styles_default];
+CwPrimaryNavigationItem.dependencies = { "cw-dropdown": CwDropdown, "cw-icon": CwIcon };
+__decorateClass([
+  query("cw-dropdown")
+], CwPrimaryNavigationItem.prototype, "dropdown", 2);
+__decorateClass([
+  query('slot[name="menu"]')
+], CwPrimaryNavigationItem.prototype, "menuSlot", 2);
+__decorateClass([
+  query(".primary-navigation-item__panel")
+], CwPrimaryNavigationItem.prototype, "panel", 2);
+__decorateClass([
+  state()
+], CwPrimaryNavigationItem.prototype, "hasMenu", 2);
+__decorateClass([
+  state()
+], CwPrimaryNavigationItem.prototype, "open", 2);
+__decorateClass([
+  property()
+], CwPrimaryNavigationItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], CwPrimaryNavigationItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], CwPrimaryNavigationItem.prototype, "rel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwPrimaryNavigationItem.prototype, "current", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwPrimaryNavigationItem.prototype, "mobile", 2);
+__decorateClass([
+  watch("mobile", { waitUntilFirstUpdate: true })
+], CwPrimaryNavigationItem.prototype, "handleMobileChange", 1);
+setDefaultAnimation("primary-navigation-item.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 200, easing: "ease" }
+});
+setDefaultAnimation("primary-navigation-item.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 200, easing: "ease" }
+});
+
+export {
+  CwPrimaryNavigationItem
+};

package/dist/chunks/chunk.U5TJE7HP.js

@@ -0,0 +1,11 @@
+import {
+  CwProgressBar
+} from "./chunk.JU5DU6MN.js";
+
+// src/components/progress-bar/progress-bar.ts
+var progress_bar_default = CwProgressBar;
+CwProgressBar.define("cw-progress-bar");
+
+export {
+  progress_bar_default
+};

package/dist/chunks/chunk.U5V3DEUR.js

@@ -0,0 +1,21 @@
+import {
+  CwQrCode
+} from "./chunk.A6CLFXNT.js";
+
+// src/react/qr-code/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cw-qr-code";
+CwQrCode.define("cw-qr-code");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwQrCode,
+  react: React,
+  events: {},
+  displayName: "CwQrCode"
+});
+var qr_code_default = reactWrapper;
+
+export {
+  qr_code_default
+};

package/dist/chunks/chunk.UC2TRPLH.js

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

package/dist/chunks/chunk.UIM765ZJ.js

@@ -0,0 +1,11 @@
+import {
+  CwTooltip
+} from "./chunk.4Y6NX67B.js";
+
+// src/components/tooltip/tooltip.ts
+var tooltip_default = CwTooltip;
+CwTooltip.define("cw-tooltip");
+
+export {
+  tooltip_default
+};

package/dist/chunks/chunk.UVXJKQ5I.js

@@ -0,0 +1,130 @@
+import {
+  icon_button_styles_default
+} from "./chunk.IRARCVGH.js";
+import {
+  CwIcon
+} from "./chunk.SKHX4OLU.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.QNSZUVGZ.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/icon-button/icon-button.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, literal } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var CwIconButton = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasFocus = false;
+    this.label = "";
+    this.disabled = false;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("cw-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("cw-focus");
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the icon button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+  render() {
+    var _a;
+    const isLink = this.href ? true : false;
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+      "icon-button": true,
+      "icon-button--disabled": !isLink && this.disabled,
+      "icon-button--focused": this.hasFocus
+    })}
+        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        type=${ifDefined(isLink ? void 0 : "button")}
+        href=${ifDefined(isLink ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink ? (_a = this.rel) != null ? _a : this.target ? "noreferrer noopener" : void 0 : void 0)}
+        role=${ifDefined(isLink ? void 0 : "button")}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-label="${this.label}"
+        tabindex=${this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <cw-icon
+          class="icon-button__icon"
+          name=${ifDefined(this.name)}
+          library=${ifDefined(this.library)}
+          src=${ifDefined(this.src)}
+          aria-hidden="true"
+        ></cw-icon>
+      </${tag}>
+    `;
+  }
+};
+CwIconButton.styles = [component_styles_default, icon_button_styles_default];
+CwIconButton.dependencies = { "cw-icon": CwIcon };
+__decorateClass([
+  query(".icon-button")
+], CwIconButton.prototype, "button", 2);
+__decorateClass([
+  state()
+], CwIconButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "library", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "src", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "rel", 2);
+__decorateClass([
+  property()
+], CwIconButton.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwIconButton.prototype, "disabled", 2);
+
+export {
+  CwIconButton
+};

package/dist/chunks/chunk.V26GADCE.js

@@ -0,0 +1,11 @@
+import {
+  CwFormatBytes
+} from "./chunk.XRQ3IBMC.js";
+
+// src/components/format-bytes/format-bytes.ts
+var format_bytes_default = CwFormatBytes;
+CwFormatBytes.define("cw-format-bytes");
+
+export {
+  format_bytes_default
+};

package/dist/chunks/chunk.V3AME4RB.js

@@ -0,0 +1,11 @@
+import {
+  CwInput
+} from "./chunk.JPPJ3ROG.js";
+
+// src/components/input/input.ts
+var input_default = CwInput;
+CwInput.define("cw-input");
+
+export {
+  input_default
+};

package/dist/chunks/chunk.VEQM24YZ.js

@@ -0,0 +1,90 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.P4NYDBZP.js";
+import {
+  LocalizeController
+} from "./chunk.OFFCHZOX.js";
+import {
+  CwIcon
+} from "./chunk.SKHX4OLU.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.QNSZUVGZ.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
+};