@cordwainer/cw-elements 1.5.0-alpha.1 → 1.5.0-alpha.2

package/cdn/chunks/chunk.27UY4KUS.js

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

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

@@ -0,0 +1,236 @@
+import {
+  details_styles_default
+} from "./chunk.DT2PUVBX.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.JSLXCIMZ.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.3CTNMS55.js";
+import {
+  LocalizeController
+} from "./chunk.4HKHDE3H.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  CwIcon
+} from "./chunk.BNMY7WDB.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n
+} from "./chunk.KT3BEM7K.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/details/details.component.ts
+var CwDetails = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.disabled = false;
+  }
+  firstUpdated() {
+    this.body.style.height = this.open ? "auto" : "0";
+    if (this.open) {
+      this.details.open = true;
+    }
+    this.detailsObserver = new MutationObserver((changes) => {
+      for (const change of changes) {
+        if (change.type === "attributes" && change.attributeName === "open") {
+          if (this.details.open) {
+            this.show();
+          } else {
+            this.hide();
+          }
+        }
+      }
+    });
+    this.detailsObserver.observe(this.details, { attributes: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.detailsObserver) == null ? void 0 : _a.disconnect();
+  }
+  handleSummaryClick(event) {
+    event.preventDefault();
+    if (!this.disabled) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.details.open = true;
+      const cwShow = this.emit("cw-show", { cancelable: true });
+      if (cwShow.defaultPrevented) {
+        this.open = false;
+        this.details.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.show", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.emit("cw-after-show");
+    } else {
+      const cwHide = this.emit("cw-hide", { cancelable: true });
+      if (cwHide.defaultPrevented) {
+        this.details.open = true;
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.hide", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.details.open = false;
+      this.emit("cw-after-hide");
+    }
+  }
+  /** Shows the details. */
+  async show() {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "cw-after-show");
+  }
+  /** Hides the details */
+  async hide() {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "cw-after-hide");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return b`
+      <details
+        part="base"
+        class=${e({
+      details: true,
+      "details--open": this.open,
+      "details--disabled": this.disabled,
+      "details--rtl": isRtl
+    })}
+      >
+        <summary
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <cw-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></cw-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <cw-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></cw-icon>
+            </slot>
+          </span>
+        </summary>
+
+        <div class="details__body" role="region" aria-labelledby="header">
+          <slot part="content" id="content" class="details__content"></slot>
+        </div>
+      </details>
+    `;
+  }
+};
+CwDetails.styles = [component_styles_default, details_styles_default];
+CwDetails.dependencies = {
+  "cw-icon": CwIcon
+};
+__decorateClass([
+  e2(".details")
+], CwDetails.prototype, "details", 2);
+__decorateClass([
+  e2(".details__header")
+], CwDetails.prototype, "header", 2);
+__decorateClass([
+  e2(".details__body")
+], CwDetails.prototype, "body", 2);
+__decorateClass([
+  e2(".details__expand-icon-slot")
+], CwDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwDetails.prototype, "open", 2);
+__decorateClass([
+  n()
+], CwDetails.prototype, "summary", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwDetails.prototype, "disabled", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], CwDetails.prototype, "handleOpenChange", 1);
+setDefaultAnimation("details.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("details.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  CwDetails
+};

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

@@ -0,0 +1,77 @@
+import {
+  include_styles_default
+} from "./chunk.4D2OGC2H.js";
+import {
+  requestInclude
+} from "./chunk.XNEONNEJ.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  n
+} from "./chunk.KT3BEM7K.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/include/include.component.ts
+var CwInclude = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "cors";
+    this.allowScripts = false;
+  }
+  executeScript(script) {
+    const newScript = document.createElement("script");
+    [...script.attributes].forEach((attr) => newScript.setAttribute(attr.name, attr.value));
+    newScript.textContent = script.textContent;
+    script.parentNode.replaceChild(newScript, script);
+  }
+  async handleSrcChange() {
+    try {
+      const src = this.src;
+      const file = await requestInclude(src, this.mode);
+      if (src !== this.src) {
+        return;
+      }
+      if (!file.ok) {
+        this.emit("cw-error", { detail: { status: file.status } });
+        return;
+      }
+      this.innerHTML = file.html;
+      if (this.allowScripts) {
+        [...this.querySelectorAll("script")].forEach((script) => this.executeScript(script));
+      }
+      this.emit("cw-load");
+    } catch (e) {
+      this.emit("cw-error", { detail: { status: -1 } });
+    }
+  }
+  render() {
+    return b`<slot></slot>`;
+  }
+};
+CwInclude.styles = [component_styles_default, include_styles_default];
+__decorateClass([
+  n()
+], CwInclude.prototype, "src", 2);
+__decorateClass([
+  n()
+], CwInclude.prototype, "mode", 2);
+__decorateClass([
+  n({ attribute: "allow-scripts", type: Boolean })
+], CwInclude.prototype, "allowScripts", 2);
+__decorateClass([
+  watch("src")
+], CwInclude.prototype, "handleSrcChange", 1);
+
+export {
+  CwInclude
+};

package/cdn/chunks/chunk.2P33HCGB.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.KT3BEM7K.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.2RO5K2XF.js

@@ -0,0 +1,27 @@
+import {
+  carousel_item_styles_default
+} from "./chunk.B2OVHSTD.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement
+} from "./chunk.KT3BEM7K.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+
+// src/components/carousel-item/carousel-item.component.ts
+var CwCarouselItem = class extends CwElement {
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  render() {
+    return b` <slot></slot> `;
+  }
+};
+CwCarouselItem.styles = [component_styles_default, carousel_item_styles_default];
+
+export {
+  CwCarouselItem
+};

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

@@ -0,0 +1,11 @@
+import {
+  CwMutationObserver
+} from "./chunk.FXJULIU5.js";
+
+// src/components/mutation-observer/mutation-observer.ts
+var mutation_observer_default = CwMutationObserver;
+CwMutationObserver.define("cw-mutation-observer");
+
+export {
+  mutation_observer_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  CwButtonGroup
+} from "./chunk.U4ZHL7VU.js";
+
+// src/components/button-group/button-group.ts
+var button_group_default = CwButtonGroup;
+CwButtonGroup.define("cw-button-group");
+
+export {
+  button_group_default
+};

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

@@ -0,0 +1,33 @@
+import {
+  CwSelect
+} from "./chunk.UTVIAM62.js";
+
+// src/react/select/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-select";
+CwSelect.define("cw-select");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwSelect,
+  react: React,
+  events: {
+    onCwChange: "cw-change",
+    onCwClear: "cw-clear",
+    onCwInput: "cw-input",
+    onCwFocus: "cw-focus",
+    onCwBlur: "cw-blur",
+    onCwShow: "cw-show",
+    onCwAfterShow: "cw-after-show",
+    onCwHide: "cw-hide",
+    onCwAfterHide: "cw-after-hide",
+    onCwInvalid: "cw-invalid"
+  },
+  displayName: "CwSelect"
+});
+var select_default = reactWrapper;
+
+export {
+  select_default
+};

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

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

package/cdn/chunks/chunk.32TXK7LZ.js

@@ -0,0 +1,11 @@
+import {
+  CwSocialLink
+} from "./chunk.KM4PUUJR.js";
+
+// src/components/social-link/social-link.ts
+var social_link_default = CwSocialLink;
+CwSocialLink.define("cw-social-link");
+
+export {
+  social_link_default
+};

package/cdn/chunks/chunk.3DLRESGE.js

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

package/cdn/chunks/chunk.3JS2Q4RT.js

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

package/cdn/chunks/chunk.3KDQKPYB.js

@@ -0,0 +1,11 @@
+import {
+  CwResizeObserver
+} from "./chunk.BT3BUDHN.js";
+
+// src/components/resize-observer/resize-observer.ts
+var resize_observer_default = CwResizeObserver;
+CwResizeObserver.define("cw-resize-observer");
+
+export {
+  resize_observer_default
+};