@cruglobal/cornerstone-components 0.1.2 → 0.6.1

package/dist/bundled/chunks/chunk.YQ5BCSQT.js

@@ -0,0 +1,354 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsHoverEvent
+} from "./chunk.CD3RLNCA.js";
+import {
+  rating_styles_default
+} from "./chunk.UTBF3PBO.js";
+import {
+  o as o2
+} from "./chunk.LJXZXDTT.js";
+import {
+  RequiredValidator
+} from "./chunk.AO2KX6XF.js";
+import {
+  clamp
+} from "./chunk.OZVYIFZB.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.3H3NDXU3.js";
+import {
+  size_styles_default
+} from "./chunk.FOA6WLNB.js";
+import {
+  o
+} from "./chunk.ZCBTYIFC.js";
+import {
+  e
+} from "./chunk.YL2SORTA.js";
+import {
+  watch
+} from "./chunk.PGRLJT6U.js";
+import {
+  customElement,
+  n,
+  r
+} from "./chunk.AWCR23QG.js";
+import {
+  LocalizeController
+} from "./chunk.DFT6CMNV.js";
+import {
+  b
+} from "./chunk.FQUMEV4X.js";
+import {
+  __decorateClass
+} from "./chunk.WA5AGEMP.js";
+
+// src/components/rating/rating.ts
+var CsRating = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super(...arguments);
+    this.assumeInteractionOn = ["change"];
+    this.localize = new LocalizeController(this);
+    this.role = "slider";
+    this.hoverValue = 0;
+    this.isHovering = false;
+    this.name = null;
+    this.label = "";
+    this.value = 0;
+    this.defaultValue = 0;
+    this.max = 5;
+    this.precision = 1;
+    this.readonly = false;
+    this.required = false;
+    this.getSymbol = (_value, isSelected) => {
+      return isSelected ? '<cs-icon name="star" library="system" variant="fill"></cs-icon>' : '<cs-icon name="star" library="system"></cs-icon>';
+    };
+    this.size = "m";
+    this.handleClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      this.setRatingValue(this.getValueFromXCoordinate(event.clientX));
+      this.updateComplete.then(() => {
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+      });
+    };
+    this.handleKeyDown = (event) => {
+      const isLtr = this.matches(":dir(ltr)");
+      const isRtl = this.localize.dir() === "rtl";
+      const oldValue = this.value;
+      if (this.disabled || this.readonly) {
+        return;
+      }
+      if (event.key === "ArrowDown" || isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
+        const decrement = event.shiftKey ? 1 : this.precision;
+        this.value = Math.max(0, this.value - decrement);
+        event.preventDefault();
+      }
+      if (event.key === "ArrowUp" || isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
+        const increment = event.shiftKey ? 1 : this.precision;
+        this.value = Math.min(this.max, this.value + increment);
+        event.preventDefault();
+      }
+      if (event.key === "Home") {
+        this.value = 0;
+        event.preventDefault();
+      }
+      if (event.key === "End") {
+        this.value = this.max;
+        event.preventDefault();
+      }
+      if (this.value !== oldValue) {
+        this.updateComplete.then(() => {
+          this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        });
+      }
+    };
+    this.handlePointerEnter = (event) => {
+      this.isHovering = true;
+      this.hoverValue = this.getValueFromPointerPosition(event);
+    };
+    this.handlePointerMove = (event) => {
+      this.hoverValue = this.getValueFromPointerPosition(event);
+    };
+    this.handlePointerLeave = () => {
+      this.isHovering = false;
+    };
+    this.handlePointerDown = (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      this.isHovering = true;
+      this.hoverValue = this.getValueFromPointerPosition(event);
+      this.setPointerCapture(event.pointerId);
+      event.preventDefault();
+    };
+    this.handlePointerUp = (event) => {
+      this.releasePointerCapture(event.pointerId);
+      this.isHovering = false;
+    };
+  }
+  static get validators() {
+    return [...super.validators, RequiredValidator()];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-valuenow", String(this.value));
+    this.setAttribute("aria-valuemin", "0");
+    this.setAttribute("aria-valuemax", String(this.max));
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    this.setAttribute("aria-readonly", this.readonly ? "true" : "false");
+    if (this.label) {
+      this.setAttribute("aria-label", this.label);
+    }
+    if (!this.disabled && !this.readonly) {
+      this.tabIndex = 0;
+    } else {
+      this.tabIndex = -1;
+    }
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("keydown", this.handleKeyDown);
+    this.addEventListener("pointerenter", this.handlePointerEnter);
+    this.addEventListener("pointermove", this.handlePointerMove);
+    this.addEventListener("pointerleave", this.handlePointerLeave);
+    this.addEventListener("pointerdown", this.handlePointerDown);
+    this.addEventListener("pointerup", this.handlePointerUp);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("keydown", this.handleKeyDown);
+    this.removeEventListener("pointerenter", this.handlePointerEnter);
+    this.removeEventListener("pointermove", this.handlePointerMove);
+    this.removeEventListener("pointerleave", this.handlePointerLeave);
+    this.removeEventListener("pointerdown", this.handlePointerDown);
+    this.removeEventListener("pointerup", this.handlePointerUp);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value")) {
+      this.setAttribute("aria-valuenow", String(this.value));
+    }
+    if (changedProperties.has("max")) {
+      this.setAttribute("aria-valuemax", String(this.max));
+    }
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+      this.tabIndex = this.disabled || this.readonly ? -1 : 0;
+    }
+    if (changedProperties.has("readonly")) {
+      this.setAttribute("aria-readonly", this.readonly ? "true" : "false");
+      this.tabIndex = this.disabled || this.readonly ? -1 : 0;
+    }
+    if (changedProperties.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
+  getValueFromPointerPosition(event) {
+    return this.getValueFromXCoordinate(event.clientX);
+  }
+  getValueFromXCoordinate(coordinate) {
+    const isRtl = this.localize.dir() === "rtl";
+    const { left, right, width } = this.getBoundingClientRect();
+    const value = isRtl ? this.roundToPrecision((right - coordinate) / width * this.max, this.precision) : this.roundToPrecision((coordinate - left) / width * this.max, this.precision);
+    return clamp(value, 0, this.max);
+  }
+  setRatingValue(newValue) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    this.value = newValue === this.value ? 0 : newValue;
+    this.isHovering = false;
+  }
+  roundToPrecision(numberToRound, precision = 0.5) {
+    const multiplier = 1 / precision;
+    return Math.ceil(numberToRound * multiplier) / multiplier;
+  }
+  handleHoverValueChange() {
+    this.dispatchEvent(
+      new CsHoverEvent({
+        phase: "move",
+        value: this.hoverValue
+      })
+    );
+  }
+  handleIsHoveringChange() {
+    this.dispatchEvent(
+      new CsHoverEvent({
+        phase: this.isHovering ? "start" : "end",
+        value: this.hoverValue
+      })
+    );
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+    super.formResetCallback();
+  }
+  render() {
+    const isRtl = this.didSSR && !this.hasUpdated ? this.dir : this.localize.dir() === "rtl";
+    const counter = Array.from(Array(this.max).keys());
+    let displayValue = 0;
+    if (this.disabled || this.readonly) {
+      displayValue = this.value;
+    } else {
+      displayValue = this.isHovering ? this.hoverValue : this.value;
+    }
+    return b`
+      <div
+        part="rating"
+        class=${e({
+      rating: true,
+      "rating-readonly": this.readonly,
+      "rating-disabled": this.disabled
+    })}
+      >
+        <span class="symbols">
+          ${counter.map((index) => {
+      const isSelected = displayValue >= index + 1;
+      if (displayValue > index && displayValue < index + 1) {
+        return b`
+                <span
+                  class=${e({
+          symbol: true,
+          "partial-symbol-container": true,
+          "symbol-hover": this.isHovering && Math.ceil(displayValue) === index + 1
+        })}
+                  role="presentation"
+                >
+                  <div
+                    style=${o({
+          clipPath: isRtl ? `inset(0 ${(displayValue - index) * 100}% 0 0)` : `inset(0 0 0 ${(displayValue - index) * 100}%)`
+        })}
+                  >
+                    ${o2(this.getSymbol(index + 1, false))}
+                  </div>
+                  <div
+                    class="partial-filled"
+                    style=${o({
+          clipPath: isRtl ? `inset(0 0 0 ${100 - (displayValue - index) * 100}%)` : `inset(0 ${100 - (displayValue - index) * 100}% 0 0)`
+        })}
+                  >
+                    ${o2(this.getSymbol(index + 1, true))}
+                  </div>
+                </span>
+              `;
+      }
+      return b`
+              <span
+                class=${e({
+        symbol: true,
+        "symbol-hover": this.isHovering && Math.ceil(displayValue) === index + 1,
+        "symbol-active": displayValue >= index + 1
+      })}
+                role="presentation"
+              >
+                ${o2(this.getSymbol(index + 1, isSelected))}
+              </span>
+            `;
+    })}
+        </span>
+      </div>
+    `;
+  }
+};
+CsRating.css = [size_styles_default, rating_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], CsRating.prototype, "role", 2);
+__decorateClass([
+  r()
+], CsRating.prototype, "hoverValue", 2);
+__decorateClass([
+  r()
+], CsRating.prototype, "isHovering", 2);
+__decorateClass([
+  n()
+], CsRating.prototype, "name", 2);
+__decorateClass([
+  n()
+], CsRating.prototype, "label", 2);
+__decorateClass([
+  n({ type: Number })
+], CsRating.prototype, "value", 2);
+__decorateClass([
+  n({ type: Number, attribute: "default-value" })
+], CsRating.prototype, "defaultValue", 2);
+__decorateClass([
+  n({ type: Number })
+], CsRating.prototype, "max", 2);
+__decorateClass([
+  n({ type: Number })
+], CsRating.prototype, "precision", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsRating.prototype, "readonly", 2);
+__decorateClass([
+  n({ type: Boolean })
+], CsRating.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], CsRating.prototype, "required", 2);
+__decorateClass([
+  n()
+], CsRating.prototype, "getSymbol", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsRating.prototype, "size", 2);
+__decorateClass([
+  watch("hoverValue")
+], CsRating.prototype, "handleHoverValueChange", 1);
+__decorateClass([
+  watch("isHovering")
+], CsRating.prototype, "handleIsHoveringChange", 1);
+CsRating = __decorateClass([
+  customElement("cs-rating")
+], CsRating);
+
+export {
+  CsRating
+};

package/dist/bundled/chunks/chunk.YYEWPB5S.js

@@ -0,0 +1,37 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  skeleton_styles_default
+} from "./chunk.YJJWL4U6.js";
+import {
+  CornerstoneElement,
+  customElement,
+  n
+} from "./chunk.AWCR23QG.js";
+import {
+  b
+} from "./chunk.FQUMEV4X.js";
+import {
+  __decorateClass
+} from "./chunk.WA5AGEMP.js";
+
+// src/components/skeleton/skeleton.ts
+var CsSkeleton = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.effect = "none";
+  }
+  render() {
+    return b` <div part="indicator" class="indicator"></div> `;
+  }
+};
+CsSkeleton.css = skeleton_styles_default;
+__decorateClass([
+  n({ reflect: true })
+], CsSkeleton.prototype, "effect", 2);
+CsSkeleton = __decorateClass([
+  customElement("cs-skeleton")
+], CsSkeleton);
+
+export {
+  CsSkeleton
+};

package/dist/bundled/chunks/chunk.ZCBTYIFC.js

@@ -0,0 +1,51 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  e,
+  i,
+  t
+} from "./chunk.POCWVCJW.js";
+import {
+  E
+} from "./chunk.FQUMEV4X.js";
+
+// ../../node_modules/lit-html/directives/style-map.js
+var n = "important";
+var i2 = " !" + n;
+var o = e(class extends i {
+  constructor(t2) {
+    if (super(t2), t2.type !== t.ATTRIBUTE || "style" !== t2.name || t2.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+  }
+  render(t2) {
+    return Object.keys(t2).reduce((e2, r) => {
+      const s = t2[r];
+      return null == s ? e2 : e2 + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+    }, "");
+  }
+  update(e2, [r]) {
+    const { style: s } = e2.element;
+    if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
+    for (const t2 of this.ft) null == r[t2] && (this.ft.delete(t2), t2.includes("-") ? s.removeProperty(t2) : s[t2] = null);
+    for (const t2 in r) {
+      const e3 = r[t2];
+      if (null != e3) {
+        this.ft.add(t2);
+        const r2 = "string" == typeof e3 && e3.endsWith(i2);
+        t2.includes("-") || r2 ? s.setProperty(t2, r2 ? e3.slice(0, -11) : e3, r2 ? n : "") : s[t2] = e3;
+      }
+    }
+    return E;
+  }
+});
+
+export {
+  o
+};
+/*! Bundled license information:
+
+lit-html/directives/style-map.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/dist/bundled/chunks/chunk.ZEIJVTKO.js

@@ -0,0 +1,173 @@
+/*! Cornerstone Components 0.6.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.G7UCSRIQ.js";
+
+// src/components/textarea/textarea.styles.ts
+var textarea_styles_default = i`
+  :host {
+    border-width: 0;
+  }
+
+  .textarea {
+    display: grid;
+    align-items: center;
+    margin: 0;
+    border: none;
+    outline: none;
+    cursor: inherit;
+    font: inherit;
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+    border-radius: var(--cs-form-control-border-radius);
+    border-style: var(--cs-form-control-border-style);
+    border-width: var(--cs-form-control-border-width);
+    -webkit-appearance: none;
+    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) transparent;
+    outline-offset: var(--cs-focus-ring-offset);
+
+    &:focus-within {
+      outline-color: var(--cs-color-focus);
+    }
+
+    /* Style disabled textareas */
+    &:has(:disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  /* Appearance modifiers */
+  :host([appearance='outlined']) .textarea {
+    background-color: var(--cs-form-control-background-color);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  :host([appearance='filled']) .textarea {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-color-neutral-fill-quiet);
+  }
+
+  :host([appearance='filled-outlined']) .textarea {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border-color: var(--cs-form-control-border-color);
+  }
+
+  textarea {
+    display: block;
+    width: 100%;
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    cursor: inherit;
+    scroll-padding-block: var(--cs-form-control-padding-block);
+    padding: calc(var(--cs-form-control-padding-block) - ((1lh - 1em) / 2)) var(--cs-form-control-padding-inline); /* accounts for the larger line height of textarea content */
+    min-height: calc(var(--cs-form-control-height) - var(--border-width) * 2);
+    box-shadow: none;
+    margin: 0;
+
+    &::placeholder {
+      color: var(--cs-form-control-placeholder-color);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    &:autofill {
+      &,
+      &:hover,
+      &:focus,
+      &:active {
+        box-shadow: none;
+        caret-color: var(--cs-form-control-value-color);
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  /* Shared textarea and size-adjuster positioning */
+  .control,
+  .size-adjuster {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  .size-adjuster {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    padding: 0;
+  }
+
+  textarea::-webkit-search-decoration,
+  textarea::-webkit-search-cancel-button,
+  textarea::-webkit-search-results-button,
+  textarea::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+   * Resize types
+   */
+
+  :host([resize='none']) textarea {
+    resize: none;
+  }
+
+  textarea,
+  :host([resize='vertical']) textarea {
+    resize: vertical;
+  }
+
+  :host([resize='horizontal']) textarea {
+    resize: horizontal;
+  }
+
+  :host([resize='both']) textarea {
+    resize: both;
+  }
+
+  :host([resize='auto']) textarea {
+    height: auto;
+    resize: none;
+    overflow-y: hidden;
+  }
+
+  /*
+   * Footer (hint + character count)
+   */
+
+  /*
+   * This element carries the hint part, so the shared form control styles apply to it. Those styles set display:block
+   * and hide the element when it has no hint, both of which have to be undone when a character count is present.
+   */
+  .footer.has-slotted,
+  .footer.has-count {
+    display: flex;
+    align-items: baseline;
+    gap: 1em;
+  }
+
+  /* Slots default to display:contents, which would leave the hint unable to shrink below its content */
+  .footer.has-count .hint {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .count {
+    flex: 0 0 auto;
+    color: var(--cs-form-control-hint-color);
+    font-weight: var(--cs-form-control-hint-font-weight);
+    line-height: var(--cs-form-control-hint-line-height);
+    margin-block-start: 0.5em;
+    font-size: var(--cs-font-size-smaller);
+    margin-inline-start: auto;
+  }
+`;
+
+export {
+  textarea_styles_default
+};