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

package/cdn/utilities/localize.js

@@ -1,7 +1,7 @@
 import {
   LocalizeController
-} from "../chunks/chunk.75ZQOYXC.js";
-import "../chunks/chunk.3BIGWCZ4.js";
+} from "../chunks/chunk.4HKHDE3H.js";
+import "../chunks/chunk.76EF5TSN.js";
 import {
   registerTranslation
 } from "../chunks/chunk.FFUIYPKD.js";

package/cdn/vscode.html-custom-data.json

@@ -221,6 +221,11 @@
           "name": "label",
           "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
           "values": []
+        },
+        {
+          "name": "no-collapse",
+          "description": "Disables automatic collapsing. By default, when the breadcrumb doesn't fit on one line, the first and last items\nstay visible and everything in between collapses into a single \"…\" item with a dropdown menu.",
+          "values": []
         }
       ],
       "references": [

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@cordwainer/cw-elements",
-  "version": "1.4.1",
+  "version": "1.5.0-alpha.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -491,6 +491,11 @@
               "name": "label",
               "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
               "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "no-collapse",
+              "description": "Disables automatic collapsing. By default, when the breadcrumb doesn't fit on one line, the first and last items\nstay visible and everything in between collapses into a single \"…\" item with a dropdown menu.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -506,12 +511,18 @@
           "events": [],
           "js": {
             "properties": [
+              { "name": "nav", "type": "HTMLElement" },
               { "name": "defaultSlot", "type": "HTMLSlotElement" },
               { "name": "separatorSlot", "type": "HTMLSlotElement" },
               {
                 "name": "label",
                 "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
                 "type": "string"
+              },
+              {
+                "name": "noCollapse",
+                "description": "Disables automatic collapsing. By default, when the breadcrumb doesn't fit on one line, the first and last items\nstay visible and everything in between collapses into a single \"…\" item with a dropdown menu.",
+                "type": "boolean"
               }
             ],
             "events": []

package/dist/chunks/chunk.274QNJ33.js

@@ -0,0 +1,130 @@
+import {
+  icon_button_styles_default
+} from "./chunk.IRARCVGH.js";
+import {
+  CwIcon
+} from "./chunk.5R62IR27.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.WMOTPERU.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.2B76BRTM.js

@@ -0,0 +1,11 @@
+import {
+  CwInclude
+} from "./chunk.EQO5TE2D.js";
+
+// src/components/include/include.ts
+var include_default = CwInclude;
+CwInclude.define("cw-include");
+
+export {
+  include_default
+};

package/dist/chunks/chunk.2TJQPKH6.js

@@ -0,0 +1,85 @@
+import {
+  LocalizeController
+} from "./chunk.3FPCQD76.js";
+import {
+  CwElement
+} from "./chunk.WMOTPERU.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/format-date/format-date.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+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 html`
+      <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([
+  property()
+], CwFormatDate.prototype, "date", 2);
+__decorateClass([
+  property()
+], CwFormatDate.prototype, "weekday", 2);
+__decorateClass([
+  property()
+], CwFormatDate.prototype, "era", 2);
+__decorateClass([
+  property()
+], CwFormatDate.prototype, "year", 2);
+__decorateClass([
+  property()
+], CwFormatDate.prototype, "month", 2);
+__decorateClass([
+  property()
+], CwFormatDate.prototype, "day", 2);
+__decorateClass([
+  property()
+], CwFormatDate.prototype, "hour", 2);
+__decorateClass([
+  property()
+], CwFormatDate.prototype, "minute", 2);
+__decorateClass([
+  property()
+], CwFormatDate.prototype, "second", 2);
+__decorateClass([
+  property({ attribute: "time-zone-name" })
+], CwFormatDate.prototype, "timeZoneName", 2);
+__decorateClass([
+  property({ attribute: "time-zone" })
+], CwFormatDate.prototype, "timeZone", 2);
+__decorateClass([
+  property({ attribute: "hour-format" })
+], CwFormatDate.prototype, "hourFormat", 2);
+
+export {
+  CwFormatDate
+};

package/dist/chunks/chunk.2UWMQJRG.js

@@ -0,0 +1,11 @@
+import {
+  CwPrimaryNavigationItem
+} from "./chunk.7CTYF7AD.js";
+
+// src/components/primary-navigation-item/primary-navigation-item.ts
+var primary_navigation_item_default = CwPrimaryNavigationItem;
+CwPrimaryNavigationItem.define("cw-primary-navigation-item");
+
+export {
+  primary_navigation_item_default
+};

package/dist/chunks/chunk.2YOM64NQ.js

@@ -0,0 +1,33 @@
+import {
+  CwTimePicker
+} from "./chunk.SJ6JX2DJ.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.32TDDQCW.js

@@ -0,0 +1,25 @@
+import {
+  CwRating
+} from "./chunk.NQTUURCP.js";
+
+// src/react/rating/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cw-rating";
+CwRating.define("cw-rating");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CwRating,
+  react: React,
+  events: {
+    onCwChange: "cw-change",
+    onCwHover: "cw-hover"
+  },
+  displayName: "CwRating"
+});
+var rating_default = reactWrapper;
+
+export {
+  rating_default
+};

package/dist/chunks/chunk.34PGSA3F.js

@@ -0,0 +1,100 @@
+import {
+  LocalizeController
+} from "./chunk.3FPCQD76.js";
+import {
+  CwElement
+} from "./chunk.WMOTPERU.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/relative-time/relative-time.component.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+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 html` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
+  }
+};
+__decorateClass([
+  state()
+], CwRelativeTime.prototype, "isoTime", 2);
+__decorateClass([
+  state()
+], CwRelativeTime.prototype, "relativeTime", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "date", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "format", 2);
+__decorateClass([
+  property()
+], CwRelativeTime.prototype, "numeric", 2);
+__decorateClass([
+  property({ 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/dist/chunks/chunk.35HIH67Q.js

@@ -0,0 +1,11 @@
+import {
+  CwTag
+} from "./chunk.TFG5Y7IH.js";
+
+// src/components/tag/tag.ts
+var tag_default = CwTag;
+CwTag.define("cw-tag");
+
+export {
+  tag_default
+};

package/dist/chunks/chunk.37HT6MX6.js

@@ -0,0 +1,11 @@
+import {
+  CwHeader
+} from "./chunk.7MOHPB2U.js";
+
+// src/components/header/header.ts
+var header_default = CwHeader;
+CwHeader.define("cw-header");
+
+export {
+  header_default
+};

package/dist/chunks/chunk.3C3MMRVD.js

@@ -0,0 +1,91 @@
+import {
+  button_group_styles_default
+} from "./chunk.2OUC42YY.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  CwElement
+} from "./chunk.WMOTPERU.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/button-group/button-group.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var CwButtonGroup = class extends CwElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-cw-button-group__button--focus", true);
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-cw-button-group__button--focus", false);
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-cw-button-group__button--hover", true);
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-cw-button-group__button--hover", false);
+  }
+  handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button) {
+        button.toggleAttribute("data-cw-button-group__button", true);
+        button.toggleAttribute("data-cw-button-group__button--first", index === 0);
+        button.toggleAttribute("data-cw-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.toggleAttribute("data-cw-button-group__button--last", index === slottedElements.length - 1);
+        button.toggleAttribute(
+          "data-cw-button-group__button--radio",
+          button.tagName.toLowerCase() === "cw-radio-button"
+        );
+      }
+    });
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class="button-group"
+        role="${this.disableRole ? "presentation" : "group"}"
+        aria-label=${this.label}
+        @focusout=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+CwButtonGroup.styles = [component_styles_default, button_group_styles_default];
+__decorateClass([
+  query("slot")
+], CwButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], CwButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], CwButtonGroup.prototype, "label", 2);
+function findButton(el) {
+  var _a;
+  const selector = "cw-button, cw-radio-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  CwButtonGroup
+};

package/dist/chunks/chunk.3FPCQD76.js

@@ -0,0 +1,15 @@
+import {
+  en_default
+} from "./chunk.5M6BDG2U.js";
+
+// src/utilities/localize.ts
+import { LocalizeController as DefaultLocalizationController, registerTranslation } from "@cordwainer/cw-localize";
+import { registerTranslation as registerTranslation2 } from "@cordwainer/cw-localize";
+var LocalizeController = class extends DefaultLocalizationController {
+};
+registerTranslation(en_default);
+
+export {
+  LocalizeController,
+  registerTranslation2 as registerTranslation
+};