@cruglobal/cornerstone-components 0.1.0 → 0.1.1

package/dist/unbundled/chunks/chunk.NQWCQ5KI.js

@@ -0,0 +1,21 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsProgressBar
+} from "./chunk.CIRB6NKP.js";
+
+// src/react/progress-bar/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "cs-progress-bar";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsProgressBar,
+  react: React,
+  events: {},
+  displayName: "CsProgressBar"
+});
+var progress_bar_default = reactWrapper;
+
+export {
+  progress_bar_default
+};

package/dist/unbundled/chunks/chunk.NULHEC64.js

@@ -0,0 +1,136 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/components/scroller/scroller.styles.ts
+import { css } from "lit";
+var scroller_styles_default = css`
+  :host {
+    --shadow-color: var(--cs-color-surface-default);
+    --shadow-size: 2rem;
+
+    /* private (defined dynamically) */
+    --start-shadow-opacity: 0;
+    --end-shadow-opacity: 0;
+
+    display: block;
+    position: relative;
+    max-width: 100%;
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  :host([orientation='vertical']) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  #content {
+    z-index: 1; /* below shadows */
+    border-radius: inherit;
+    scroll-behavior: smooth;
+    scrollbar-width: thin;
+
+    /* Prevent text in mobile Safari from being larger when the container width larger than the viewport */
+    -webkit-text-size-adjust: 100%;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--cs-focus-ring);
+      outline-offset: var(--cs-focus-ring-offset);
+    }
+  }
+
+  :host([without-scrollbar]) #content {
+    scrollbar-width: none;
+  }
+
+  :host([orientation='horizontal']) #content {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  :host([orientation='vertical']) #content {
+    flex: 1 1 auto;
+    min-height: 0; /* This is crucial for flex children to respect overflow */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  #start-shadow,
+  #end-shadow {
+    z-index: 2;
+  }
+
+  #start-shadow {
+    opacity: var(--start-shadow-opacity);
+  }
+
+  #end-shadow {
+    opacity: var(--end-shadow-opacity);
+  }
+
+  /* Horizontal shadows */
+  :host([orientation='horizontal']) {
+    #start-shadow,
+    #end-shadow {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: var(--shadow-size);
+      pointer-events: none;
+    }
+
+    #start-shadow {
+      &:dir(ltr) {
+        left: 0;
+        background: linear-gradient(to right, var(--shadow-color), transparent 100%);
+      }
+
+      &:dir(rtl) {
+        right: 0;
+        background: linear-gradient(to left, var(--shadow-color), transparent 100%);
+      }
+    }
+
+    #end-shadow {
+      &:dir(ltr) {
+        right: 0;
+        background: linear-gradient(to left, var(--shadow-color), transparent 100%);
+      }
+
+      &:dir(rtl) {
+        left: 0;
+        background: linear-gradient(to right, var(--shadow-color), transparent 100%);
+      }
+    }
+  }
+
+  /* Vertical shadows */
+  :host([orientation='vertical']) {
+    #start-shadow,
+    #end-shadow {
+      position: absolute;
+      right: 0;
+      left: 0;
+      height: var(--shadow-size);
+      pointer-events: none;
+    }
+
+    #start-shadow {
+      top: 0;
+      background: linear-gradient(to bottom, var(--shadow-color), transparent 100%);
+    }
+
+    #end-shadow {
+      bottom: 0;
+      background: linear-gradient(to top, var(--shadow-color), transparent 100%);
+    }
+  }
+`;
+
+export {
+  scroller_styles_default
+};

package/dist/unbundled/chunks/chunk.NUW5IPU2.js

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsTextarea
+} from "./chunk.CI52QGSK.js";
+
+// src/react/textarea/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-textarea";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsTextarea,
+  react: React,
+  events: {
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsTextarea"
+});
+var textarea_default = reactWrapper;
+
+export {
+  textarea_default
+};

package/dist/unbundled/chunks/chunk.O4I76QXR.js

@@ -0,0 +1,83 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsRemoveEvent
+} from "./chunk.LBNOJ3K7.js";
+import {
+  tag_styles_default
+} from "./chunk.V4M4J4H7.js";
+import {
+  size_styles_default
+} from "./chunk.XZ27OU5O.js";
+import {
+  variants_styles_default
+} from "./chunk.5II4KGEW.js";
+import {
+  CornerstoneElement,
+  customElement
+} from "./chunk.LIUE7EB7.js";
+import {
+  LocalizeController
+} from "./chunk.P4N57CDG.js";
+import {
+  __decorateClass
+} from "./chunk.2VAPLWBF.js";
+
+// src/components/tag/tag.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var CsTag = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.variant = "neutral";
+    this.appearance = "filled-outlined";
+    this.size = "m";
+    this.pill = false;
+    this.withRemove = false;
+  }
+  handleRemoveClick() {
+    this.dispatchEvent(new CsRemoveEvent());
+  }
+  render() {
+    return html`
+      <slot part="content" class="content"></slot>
+
+      ${this.withRemove ? html`
+              <cs-button
+                part="remove-button"
+                exportparts="button:remove-button__button"
+                class="remove"
+                appearance="plain"
+                size=${this.size}
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+              >
+                <cs-icon name="close" library="system" label=${this.localize.term("remove")}></cs-icon>
+              </cs-button>
+            ` : ""}
+    `;
+  }
+};
+CsTag.css = [tag_styles_default, variants_styles_default, size_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], CsTag.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsTag.prototype, "appearance", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsTag.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsTag.prototype, "pill", 2);
+__decorateClass([
+  property({ attribute: "with-remove", type: Boolean })
+], CsTag.prototype, "withRemove", 2);
+CsTag = __decorateClass([
+  customElement("cs-tag")
+], CsTag);
+
+export {
+  CsTag
+};

package/dist/unbundled/chunks/chunk.O5WAVEZR.js

@@ -0,0 +1,292 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  MirrorValidator
+} from "./chunk.6RXPEKZ4.js";
+import {
+  CornerstoneFormAssociatedElement
+} from "./chunk.SEZADOQH.js";
+import {
+  CsInvalidEvent
+} from "./chunk.SAGES37E.js";
+import {
+  size_styles_default
+} from "./chunk.XZ27OU5O.js";
+import {
+  button_styles_default
+} from "./chunk.4BH4TJ2E.js";
+import {
+  variants_styles_default
+} from "./chunk.5II4KGEW.js";
+import {
+  watch
+} from "./chunk.P4DNU2MI.js";
+import {
+  customElement
+} from "./chunk.LIUE7EB7.js";
+import {
+  LocalizeController
+} from "./chunk.P4N57CDG.js";
+import {
+  __decorateClass
+} from "./chunk.2VAPLWBF.js";
+
+// src/components/button/button.ts
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { html, literal } from "lit/static-html.js";
+var CsButton = class extends CornerstoneFormAssociatedElement {
+  constructor() {
+    super(...arguments);
+    this.assumeInteractionOn = ["click"];
+    this.localize = new LocalizeController(this);
+    this.invalid = false;
+    this.isIconButton = false;
+    this.title = "";
+    this.variant = "neutral";
+    this.appearance = "accent";
+    this.size = "m";
+    this.withCaret = false;
+    this.disabled = false;
+    this.loading = false;
+    this.pill = false;
+    this.type = "button";
+  }
+  static get validators() {
+    return [...super.validators, MirrorValidator()];
+  }
+  constructLightDOMButton() {
+    const button = document.createElement("button");
+    for (const attribute of this.attributes) {
+      if (attribute.name === "style") {
+        continue;
+      }
+      button.setAttribute(attribute.name, attribute.value);
+    }
+    button.type = this.type;
+    button.style.position = "absolute !important";
+    button.style.width = "0 !important";
+    button.style.height = "0 !important";
+    button.style.clipPath = "inset(50%) !important";
+    button.style.overflow = "hidden !important";
+    button.style.whiteSpace = "nowrap !important";
+    if (this.name) {
+      button.name = this.name;
+    }
+    button.value = this.value || "";
+    return button;
+  }
+  handleClick(event) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+    if (this.type !== "submit" && this.type !== "reset") {
+      return;
+    }
+    const form = this.getForm();
+    if (!form) {
+      return;
+    }
+    const lightDOMButton = this.constructLightDOMButton();
+    this.parentElement?.append(lightDOMButton);
+    lightDOMButton.click();
+    lightDOMButton.remove();
+  }
+  handleInvalid() {
+    this.dispatchEvent(new CsInvalidEvent());
+  }
+  handleLabelSlotChange() {
+    const nodes = this.labelSlot.assignedNodes({ flatten: true });
+    let hasIconLabel = false;
+    let hasIcon = false;
+    let hasText = false;
+    let hasOtherElements = false;
+    [...nodes].forEach((node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node;
+        if (element.localName === "cs-icon") {
+          hasIcon = true;
+          if (!hasIconLabel) {
+            const iconLabel = element.label;
+            hasIconLabel = typeof iconLabel === "string" && iconLabel.length > 0;
+          }
+        } else {
+          hasOtherElements = true;
+        }
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        const text = node.textContent?.trim() || "";
+        if (text.length > 0) {
+          hasText = true;
+        }
+      }
+    });
+    this.isIconButton = hasIcon && !hasText && !hasOtherElements;
+    this.customStates.set("icon-button", this.isIconButton);
+    if (this.isIconButton && !hasIconLabel) {
+      console.warn(
+        'Icon buttons must have a label for screen readers. Add <cs-icon label="..."> to remove this warning.',
+        this
+      );
+    }
+  }
+  isButton() {
+    return this.href ? false : true;
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleDisabledChange() {
+    this.customStates.set("disabled", this.disabled);
+    this.updateValidity();
+  }
+  handleHrefChange() {
+    this.customStates.set("link", this.isLink());
+  }
+  handleLoadingChange() {
+    this.customStates.set("loading", this.loading);
+  }
+  setValue(..._args) {
+  }
+  /** 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();
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`
+      <${tag}
+        part="button"
+        class=${classMap({
+      button: true,
+      caret: this.withCaret,
+      disabled: this.disabled,
+      loading: this.loading,
+      rtl: this.localize.dir() === "rtl",
+      "is-icon-button": this.isIconButton
+    })}
+        ?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.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink && this.rel ? this.rel : void 0)}
+        role=${ifDefined(isLink ? void 0 : "button")}
+        aria-disabled=${ifDefined(isLink && this.disabled ? "true" : void 0)}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @invalid=${this.isButton() ? this.handleInvalid : null}
+        @click=${this.handleClick}
+      >
+        <slot name="start" part="start" class="start"></slot>
+        <slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
+        <slot name="end" part="end" class="end"></slot>
+        ${this.withCaret ? html` <cs-icon part="caret" class="caret" library="system" name="keyboard_arrow_down"></cs-icon> ` : ""}
+        ${this.loading ? html`<cs-spinner part="spinner"></cs-spinner>` : ""}
+      </${tag}>
+    `;
+  }
+};
+CsButton.shadowRootOptions = { ...CornerstoneFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
+CsButton.css = [button_styles_default, variants_styles_default, size_styles_default];
+__decorateClass([
+  query(".button")
+], CsButton.prototype, "button", 2);
+__decorateClass([
+  query("slot:not([name])")
+], CsButton.prototype, "labelSlot", 2);
+__decorateClass([
+  state()
+], CsButton.prototype, "invalid", 2);
+__decorateClass([
+  state()
+], CsButton.prototype, "isIconButton", 2);
+__decorateClass([
+  property()
+], CsButton.prototype, "title", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsButton.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsButton.prototype, "appearance", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsButton.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "with-caret", type: Boolean, reflect: true })
+], CsButton.prototype, "withCaret", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CsButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsButton.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CsButton.prototype, "pill", 2);
+__decorateClass([
+  property()
+], CsButton.prototype, "type", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsButton.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsButton.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], CsButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], CsButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], CsButton.prototype, "rel", 2);
+__decorateClass([
+  property()
+], CsButton.prototype, "download", 2);
+__decorateClass([
+  property({ attribute: "formaction" })
+], CsButton.prototype, "formAction", 2);
+__decorateClass([
+  property({ attribute: "formenctype" })
+], CsButton.prototype, "formEnctype", 2);
+__decorateClass([
+  property({ attribute: "formmethod" })
+], CsButton.prototype, "formMethod", 2);
+__decorateClass([
+  property({ attribute: "formnovalidate", type: Boolean })
+], CsButton.prototype, "formNoValidate", 2);
+__decorateClass([
+  property({ attribute: "formtarget" })
+], CsButton.prototype, "formTarget", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], CsButton.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("href")
+], CsButton.prototype, "handleHrefChange", 1);
+__decorateClass([
+  watch("loading", { waitUntilFirstUpdate: true })
+], CsButton.prototype, "handleLoadingChange", 1);
+CsButton = __decorateClass([
+  customElement("cs-button")
+], CsButton);
+CsButton.disableWarning?.("change-in-update");
+
+export {
+  CsButton
+};

package/dist/unbundled/chunks/chunk.O6SSUEWM.js

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsSplitPanel
+} from "./chunk.23E5G7OV.js";
+
+// src/react/split-panel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "cs-split-panel";
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: CsSplitPanel,
+  react: React,
+  events: {
+    onCsReposition: "cs-reposition"
+  },
+  displayName: "CsSplitPanel"
+});
+var split_panel_default = reactWrapper;
+
+export {
+  split_panel_default
+};