@cordwainer/cw-elements 1.3.0-alpha.0 → 1.3.0-alpha.2

package/dist/chunks/chunk.5BT644RT.js

@@ -0,0 +1,213 @@
+import {
+  animation_styles_default
+} from "./chunk.XVVDUPMB.js";
+import {
+  animations
+} from "./chunk.LSCK5HYK.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.HKMEBY7F.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/animation/animation.component.ts
+import { html } from "lit";
+import { property, queryAsync } from "lit/decorators.js";
+var CwAnimation = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.hasStarted = false;
+    this.name = "none";
+    this.play = false;
+    this.delay = 0;
+    this.direction = "normal";
+    this.duration = 1e3;
+    this.easing = "linear";
+    this.endDelay = 0;
+    this.fill = "auto";
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.playbackRate = 1;
+    this.handleAnimationFinish = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("cw-finish");
+    };
+    this.handleAnimationCancel = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.emit("cw-cancel");
+    };
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    var _a, _b;
+    return (_b = (_a = this.animation) == null ? void 0 : _a.currentTime) != null ? _b : 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.createAnimation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.destroyAnimation();
+  }
+  handleSlotChange() {
+    this.destroyAnimation();
+    this.createAnimation();
+  }
+  async createAnimation() {
+    var _a, _b;
+    const easing = (_a = animations.easings[this.easing]) != null ? _a : this.easing;
+    const keyframes = (_b = this.keyframes) != null ? _b : animations[this.name];
+    const slot = await this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener("cancel", this.handleAnimationCancel);
+    this.animation.addEventListener("finish", this.handleAnimationFinish);
+    if (this.play) {
+      this.hasStarted = true;
+      this.emit("cw-start");
+    } else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener("cancel", this.handleAnimationCancel);
+      this.animation.removeEventListener("finish", this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    if (!this.hasUpdated) {
+      return;
+    }
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        this.emit("cw-start");
+      }
+      if (this.play) {
+        this.animation.play();
+      } else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all keyframe effects caused by this animation and aborts its playback. */
+  cancel() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  finish() {
+    var _a;
+    (_a = this.animation) == null ? void 0 : _a.finish();
+  }
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+CwAnimation.styles = [component_styles_default, animation_styles_default];
+__decorateClass([
+  queryAsync("slot")
+], CwAnimation.prototype, "defaultSlot", 2);
+__decorateClass([
+  property()
+], CwAnimation.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwAnimation.prototype, "play", 2);
+__decorateClass([
+  property({ type: Number })
+], CwAnimation.prototype, "delay", 2);
+__decorateClass([
+  property()
+], CwAnimation.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Number })
+], CwAnimation.prototype, "duration", 2);
+__decorateClass([
+  property()
+], CwAnimation.prototype, "easing", 2);
+__decorateClass([
+  property({ attribute: "end-delay", type: Number })
+], CwAnimation.prototype, "endDelay", 2);
+__decorateClass([
+  property()
+], CwAnimation.prototype, "fill", 2);
+__decorateClass([
+  property({ type: Number })
+], CwAnimation.prototype, "iterations", 2);
+__decorateClass([
+  property({ attribute: "iteration-start", type: Number })
+], CwAnimation.prototype, "iterationStart", 2);
+__decorateClass([
+  property({ attribute: false })
+], CwAnimation.prototype, "keyframes", 2);
+__decorateClass([
+  property({ attribute: "playback-rate", type: Number })
+], CwAnimation.prototype, "playbackRate", 2);
+__decorateClass([
+  watch([
+    "name",
+    "delay",
+    "direction",
+    "duration",
+    "easing",
+    "endDelay",
+    "fill",
+    "iterations",
+    "iterationsStart",
+    "keyframes"
+  ])
+], CwAnimation.prototype, "handleAnimationChange", 1);
+__decorateClass([
+  watch("play")
+], CwAnimation.prototype, "handlePlayChange", 1);
+__decorateClass([
+  watch("playbackRate")
+], CwAnimation.prototype, "handlePlaybackRateChange", 1);
+
+export {
+  CwAnimation
+};

package/dist/chunks/chunk.5FHGGPOR.js

@@ -0,0 +1,293 @@
+import {
+  CwSpinner
+} from "./chunk.UFF4TD4R.js";
+import {
+  FormControlController,
+  validValidityState
+} from "./chunk.PH2VNONO.js";
+import {
+  button_styles_default
+} from "./chunk.O3FZREDD.js";
+import {
+  LocalizeController
+} from "./chunk.4WUKLYFS.js";
+import {
+  HasSlotController
+} from "./chunk.BVGZUUCX.js";
+import {
+  CwIcon
+} from "./chunk.AQQBGFYR.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.HKMEBY7F.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/button/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 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 ? literal`a` : literal`button`;
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+      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=${ifDefined(isLink ? void 0 : this.disabled)}
+        type=${ifDefined(isLink ? void 0 : this.type)}
+        title=${this.title}
+        name=${ifDefined(isLink ? void 0 : this.name)}
+        value=${ifDefined(isLink ? void 0 : this.value)}
+        href=${ifDefined(isLink && !this.disabled ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink ? this.rel : void 0)}
+        role=${ifDefined(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 ? html` <cw-icon part="caret" class="button__caret" library="system" name="caret"></cw-icon> ` : ""}
+        ${this.loading ? html`<cw-spinner part="spinner"></cw-spinner>` : ""}
+      </${tag}>
+    `;
+  }
+};
+CwButton.styles = [component_styles_default, button_styles_default];
+CwButton.dependencies = {
+  "cw-icon": CwIcon,
+  "cw-spinner": CwSpinner
+};
+__decorateClass([
+  query(".button")
+], CwButton.prototype, "button", 2);
+__decorateClass([
+  state()
+], CwButton.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], CwButton.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "title", 2);
+__decorateClass([
+  property({ reflect: true })
+], CwButton.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], CwButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwButton.prototype, "caret", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwButton.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwButton.prototype, "outline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwButton.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CwButton.prototype, "circle", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "type", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "value", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "rel", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], CwButton.prototype, "form", 2);
+__decorateClass([
+  property({ attribute: "formaction" })
+], CwButton.prototype, "formAction", 2);
+__decorateClass([
+  property({ attribute: "formenctype" })
+], CwButton.prototype, "formEnctype", 2);
+__decorateClass([
+  property({ attribute: "formmethod" })
+], CwButton.prototype, "formMethod", 2);
+__decorateClass([
+  property({ attribute: "formnovalidate", type: Boolean })
+], CwButton.prototype, "formNoValidate", 2);
+__decorateClass([
+  property({ attribute: "formtarget" })
+], CwButton.prototype, "formTarget", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], CwButton.prototype, "handleDisabledChange", 1);
+
+export {
+  CwButton
+};

package/dist/chunks/chunk.5RELZ2GS.js

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

package/dist/chunks/chunk.5SCBY5DV.js

@@ -0,0 +1,33 @@
+import {
+  CwTimePicker
+} from "./chunk.AHPTEP6U.js";
+
+// src/react/time-picker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-time-picker";
+CwTimePicker.define("cw-time-picker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwTimePicker,
+  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: "CwTimePicker"
+});
+var time_picker_default = reactWrapper;
+
+export {
+  time_picker_default
+};

package/dist/chunks/chunk.5UROAQQY.js

@@ -0,0 +1,22 @@
+import {
+  menu_label_styles_default
+} from "./chunk.5EKYGMIG.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.HKMEBY7F.js";
+
+// src/components/menu-label/menu-label.component.ts
+import { html } from "lit";
+var CwMenuLabel = class extends CwElement {
+  render() {
+    return html` <slot part="base" class="menu-label"></slot> `;
+  }
+};
+CwMenuLabel.styles = [component_styles_default, menu_label_styles_default];
+
+export {
+  CwMenuLabel
+};