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

package/cdn/chunks/chunk.MNR3RGM6.js

@@ -0,0 +1,302 @@
+import {
+  CwSpinner
+} from "./chunk.H56Q4VV7.js";
+import {
+  FormControlController,
+  validValidityState
+} from "./chunk.FIVNGT4O.js";
+import {
+  button_styles_default
+} from "./chunk.LOS4N2WC.js";
+import {
+  i,
+  u
+} from "./chunk.FYKGNQO2.js";
+import {
+  LocalizeController
+} from "./chunk.3ITR3YMH.js";
+import {
+  o
+} from "./chunk.LRAERZML.js";
+import {
+  HasSlotController
+} from "./chunk.BVGZUUCX.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  CwIcon
+} from "./chunk.I6KB4VW7.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.5GHHWGQ4.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/button/button.component.ts
+var CwButton = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["click"]
+    });
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.invalid = false;
+    this.title = "";
+    this.variant = "default";
+    this.size = "medium";
+    this.caret = false;
+    this.disabled = false;
+    this.loading = false;
+    this.outline = false;
+    this.pill = false;
+    this.circle = false;
+    this.type = "button";
+    this.name = "";
+    this.value = "";
+    this.href = "";
+    this.rel = "noreferrer noopener";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    if (this.isButton()) {
+      return this.button.validity;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    if (this.isButton()) {
+      return this.button.validationMessage;
+    }
+    return "";
+  }
+  firstUpdated() {
+    if (this.isButton()) {
+      this.formControlController.updateValidity();
+    }
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("cw-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("cw-focus");
+  }
+  handleClick() {
+    if (this.type === "submit") {
+      this.formControlController.submit(this);
+    }
+    if (this.type === "reset") {
+      this.formControlController.reset(this);
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  isButton() {
+    return this.href ? false : true;
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleDisabledChange() {
+    if (this.isButton()) {
+      this.formControlController.setValidity(this.disabled);
+    }
+  }
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.isButton()) {
+      return this.button.checkValidity();
+    }
+    return true;
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.isButton()) {
+      return this.button.reportValidity();
+    }
+    return true;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    if (this.isButton()) {
+      this.button.setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? i`a` : i`button`;
+    return u`
+      <${tag}
+        part="base"
+        class=${e({
+      button: true,
+      "button--default": this.variant === "default",
+      "button--primary": this.variant === "primary",
+      "button--success": this.variant === "success",
+      "button--neutral": this.variant === "neutral",
+      "button--warning": this.variant === "warning",
+      "button--danger": this.variant === "danger",
+      "button--text": this.variant === "text",
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--caret": this.caret,
+      "button--circle": this.circle,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--loading": this.loading,
+      "button--standard": !this.outline,
+      "button--outline": this.outline,
+      "button--pill": this.pill,
+      "button--rtl": this.localize.dir() === "rtl",
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+        ?disabled=${o(isLink ? void 0 : this.disabled)}
+        type=${o(isLink ? void 0 : this.type)}
+        title=${this.title}
+        name=${o(isLink ? void 0 : this.name)}
+        value=${o(isLink ? void 0 : this.value)}
+        href=${o(isLink && !this.disabled ? this.href : void 0)}
+        target=${o(isLink ? this.target : void 0)}
+        download=${o(isLink ? this.download : void 0)}
+        rel=${o(isLink ? this.rel : void 0)}
+        role=${o(isLink ? void 0 : "button")}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @invalid=${this.isButton() ? this.handleInvalid : null}
+        @click=${this.handleClick}
+      >
+        <slot name="prefix" part="prefix" class="button__prefix"></slot>
+        <slot part="label" class="button__label"></slot>
+        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        ${this.caret ? u` <cw-icon part="caret" class="button__caret" library="system" name="caret"></cw-icon> ` : ""}
+        ${this.loading ? u`<cw-spinner part="spinner"></cw-spinner>` : ""}
+      </${tag}>
+    `;
+  }
+};
+CwButton.styles = [component_styles_default, button_styles_default];
+CwButton.dependencies = {
+  "cw-icon": CwIcon,
+  "cw-spinner": CwSpinner
+};
+__decorateClass([
+  e2(".button")
+], CwButton.prototype, "button", 2);
+__decorateClass([
+  r()
+], CwButton.prototype, "hasFocus", 2);
+__decorateClass([
+  r()
+], CwButton.prototype, "invalid", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "title", 2);
+__decorateClass([
+  n({ reflect: true })
+], CwButton.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], CwButton.prototype, "size", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwButton.prototype, "caret", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwButton.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwButton.prototype, "loading", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwButton.prototype, "outline", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwButton.prototype, "pill", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CwButton.prototype, "circle", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "type", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "name", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "value", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "href", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "target", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "rel", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "download", 2);
+__decorateClass([
+  n()
+], CwButton.prototype, "form", 2);
+__decorateClass([
+  n({ attribute: "formaction" })
+], CwButton.prototype, "formAction", 2);
+__decorateClass([
+  n({ attribute: "formenctype" })
+], CwButton.prototype, "formEnctype", 2);
+__decorateClass([
+  n({ attribute: "formmethod" })
+], CwButton.prototype, "formMethod", 2);
+__decorateClass([
+  n({ attribute: "formnovalidate", type: Boolean })
+], CwButton.prototype, "formNoValidate", 2);
+__decorateClass([
+  n({ attribute: "formtarget" })
+], CwButton.prototype, "formTarget", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], CwButton.prototype, "handleDisabledChange", 1);
+
+export {
+  CwButton
+};

package/cdn/chunks/chunk.MNRAN3EO.js

@@ -0,0 +1,87 @@
+import {
+  LocalizeController
+} from "./chunk.3ITR3YMH.js";
+import {
+  CwElement,
+  n
+} from "./chunk.5GHHWGQ4.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/format-date/format-date.component.ts
+var CwFormatDate = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.date = /* @__PURE__ */ new Date();
+    this.hourFormat = "auto";
+  }
+  render() {
+    const date = new Date(this.date);
+    const hour12 = this.hourFormat === "auto" ? void 0 : this.hourFormat === "12";
+    if (isNaN(date.getMilliseconds())) {
+      return void 0;
+    }
+    return b`
+      <time datetime=${date.toISOString()}>
+        ${this.localize.date(date, {
+      weekday: this.weekday,
+      era: this.era,
+      year: this.year,
+      month: this.month,
+      day: this.day,
+      hour: this.hour,
+      minute: this.minute,
+      second: this.second,
+      timeZoneName: this.timeZoneName,
+      timeZone: this.timeZone,
+      hour12
+    })}
+      </time>
+    `;
+  }
+};
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "date", 2);
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "weekday", 2);
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "era", 2);
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "year", 2);
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "month", 2);
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "day", 2);
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "hour", 2);
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "minute", 2);
+__decorateClass([
+  n()
+], CwFormatDate.prototype, "second", 2);
+__decorateClass([
+  n({ attribute: "time-zone-name" })
+], CwFormatDate.prototype, "timeZoneName", 2);
+__decorateClass([
+  n({ attribute: "time-zone" })
+], CwFormatDate.prototype, "timeZone", 2);
+__decorateClass([
+  n({ attribute: "hour-format" })
+], CwFormatDate.prototype, "hourFormat", 2);
+
+export {
+  CwFormatDate
+};

package/cdn/chunks/chunk.MQ5LM4MB.js

@@ -0,0 +1,49 @@
+import {
+  card_styles_default
+} from "./chunk.AMAEDGJV.js";
+import {
+  HasSlotController
+} from "./chunk.BVGZUUCX.js";
+import {
+  e
+} from "./chunk.VBR4VS53.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement
+} from "./chunk.5GHHWGQ4.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+
+// src/components/card/card.component.ts
+var CwCard = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "footer", "header", "image");
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${e({
+      card: true,
+      "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-image": this.hasSlotController.test("image"),
+      "card--has-header": this.hasSlotController.test("header")
+    })}
+      >
+        <slot name="image" part="image" class="card__image"></slot>
+        <slot name="header" part="header" class="card__header"></slot>
+        <slot part="body" class="card__body"></slot>
+        <slot name="footer" part="footer" class="card__footer"></slot>
+      </div>
+    `;
+  }
+};
+CwCard.styles = [component_styles_default, card_styles_default];
+
+export {
+  CwCard
+};

package/cdn/chunks/chunk.MWLJHRL6.js

@@ -0,0 +1,11 @@
+import {
+  CwSelect
+} from "./chunk.3KY6HRPX.js";
+
+// src/components/select/select.ts
+var select_default = CwSelect;
+CwSelect.define("cw-select");
+
+export {
+  select_default
+};

package/cdn/chunks/chunk.N4H6U4PP.js

@@ -0,0 +1,24 @@
+import {
+  CwMenu
+} from "./chunk.2NINSW7F.js";
+
+// src/react/menu/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-menu";
+CwMenu.define("cw-menu");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwMenu,
+  react: React,
+  events: {
+    onCwSelect: "cw-select"
+  },
+  displayName: "CwMenu"
+});
+var menu_default = reactWrapper;
+
+export {
+  menu_default
+};

package/cdn/chunks/chunk.NGOXT5I6.js

@@ -0,0 +1,25 @@
+import {
+  CwIconButton
+} from "./chunk.J2XCU3C2.js";
+
+// src/react/icon-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-icon-button";
+CwIconButton.define("cw-icon-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwIconButton,
+  react: React,
+  events: {
+    onCwBlur: "cw-blur",
+    onCwFocus: "cw-focus"
+  },
+  displayName: "CwIconButton"
+});
+var icon_button_default = reactWrapper;
+
+export {
+  icon_button_default
+};

package/cdn/chunks/chunk.O6J67H5P.js

@@ -0,0 +1,79 @@
+import {
+  progress_ring_styles_default
+} from "./chunk.23EJTVQH.js";
+import {
+  LocalizeController
+} from "./chunk.3ITR3YMH.js";
+import {
+  component_styles_default
+} from "./chunk.NJIHXHXI.js";
+import {
+  CwElement,
+  e,
+  n,
+  r
+} from "./chunk.5GHHWGQ4.js";
+import {
+  b
+} from "./chunk.6A2LG33L.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/progress-ring/progress-ring.component.ts
+var CwProgressRing = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <slot id="label" part="label" class="progress-ring__label"></slot>
+      </div>
+    `;
+  }
+};
+CwProgressRing.styles = [component_styles_default, progress_ring_styles_default];
+__decorateClass([
+  e(".progress-ring__indicator")
+], CwProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  r()
+], CwProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  n({ type: Number, reflect: true })
+], CwProgressRing.prototype, "value", 2);
+__decorateClass([
+  n()
+], CwProgressRing.prototype, "label", 2);
+
+export {
+  CwProgressRing
+};

package/cdn/chunks/chunk.OCZYVBJ3.js

@@ -0,0 +1,26 @@
+import {
+  CwAnimation
+} from "./chunk.LTKRWRX4.js";
+
+// src/react/animation/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-animation";
+CwAnimation.define("cw-animation");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwAnimation,
+  react: React,
+  events: {
+    onCwCancel: "cw-cancel",
+    onCwFinish: "cw-finish",
+    onCwStart: "cw-start"
+  },
+  displayName: "CwAnimation"
+});
+var animation_default = reactWrapper;
+
+export {
+  animation_default
+};

package/cdn/chunks/chunk.OS3P3XZT.js

@@ -0,0 +1,11 @@
+import {
+  CwCarouselItem
+} from "./chunk.D444MCOQ.js";
+
+// src/components/carousel-item/carousel-item.ts
+var carousel_item_default = CwCarouselItem;
+CwCarouselItem.define("cw-carousel-item");
+
+export {
+  carousel_item_default
+};