@uplynk/lynk-design 1.17.0 → 1.17.1

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

@@ -0,0 +1,396 @@
+import {
+  radio_group_styles_default
+} from "./chunk.7KUJYOUY.js";
+import {
+  LynkFormField
+} from "./chunk.HFZ6E2DH.js";
+import {
+  LynkButtonGroup
+} from "./chunk.2PTVE2QM.js";
+import {
+  FormControlController,
+  customErrorValidityState,
+  validValidityState,
+  valueMissingValidityState
+} from "./chunk.HGPZOHO6.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/radio-group/radio-group.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var LynkRadioGroup = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(this, "help-text", "help-tip", "label");
+    this.customValidityMessage = "";
+    this.hasButtonGroup = false;
+    this.errorMessage = "";
+    this.hasFocus = false;
+    this.defaultValue = "";
+    this.label = "";
+    this.helpText = "";
+    this.helpTip = "";
+    this.name = "option";
+    this.value = "";
+    this.form = "";
+    this.required = false;
+    this.optional = false;
+    this.readonly = false;
+    this.dirty = false;
+    this.gapped = false;
+    this.state = "default";
+    this.inline = false;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      return customErrorValidityState;
+    } else if (isRequiredAndEmpty) {
+      return valueMissingValidityState;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (hasCustomValidityMessage) {
+      return this.customValidityMessage;
+    } else if (isRequiredAndEmpty) {
+      return this.validationInput.validationMessage;
+    }
+    return "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = this.value;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  getAllRadios() {
+    return [...this.querySelectorAll("lynk-radio, lynk-radio-button")];
+  }
+  handleRadioClick(event) {
+    const target = event.target.closest("lynk-radio, lynk-radio-button");
+    const radios = this.getAllRadios();
+    const oldValue = this.value;
+    if (!target || target.disabled || this.readonly) {
+      return;
+    }
+    this.value = target.value;
+    radios.forEach((radio) => radio.checked = radio === target);
+    if (this.value !== oldValue) {
+      this.emit("ev-change");
+      this.emit("ev-input");
+    }
+  }
+  handleKeyDown(event) {
+    var _a;
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
+      return;
+    }
+    if (this.readonly) {
+      return;
+    }
+    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
+    const checkedRadio = (_a = radios.find((radio) => radio.checked)) != null ? _a : radios[0];
+    const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
+    const oldValue = this.value;
+    let index = radios.indexOf(checkedRadio) + incr;
+    if (index < 0) {
+      index = radios.length - 1;
+    }
+    if (index > radios.length - 1) {
+      index = 0;
+    }
+    this.getAllRadios().forEach((radio) => {
+      radio.checked = false;
+      if (!this.hasButtonGroup) {
+        radio.setAttribute("tabindex", "-1");
+      }
+    });
+    this.value = radios[index].value;
+    radios[index].checked = true;
+    if (!this.hasButtonGroup) {
+      radios[index].setAttribute("tabindex", "0");
+      radios[index].focus();
+    } else {
+      radios[index].shadowRoot.querySelector("button").focus();
+    }
+    if (this.value !== oldValue) {
+      this.emit("ev-change");
+      this.emit("ev-input");
+    }
+    event.preventDefault();
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("ev-focus");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("ev-blur");
+  }
+  async syncRadioElements() {
+    var _a, _b;
+    const radios = this.getAllRadios();
+    await Promise.all(
+      // Sync the checked state and size
+      radios.map(async (radio) => {
+        await radio.updateComplete;
+        radio.checked = radio.value === this.value;
+        radio.size = this.size;
+      })
+    );
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "lynk-radio-button");
+    if (radios.length > 0 && !radios.some((radio) => radio.checked)) {
+      if (this.hasButtonGroup) {
+        const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
+        if (buttonRadio) {
+          buttonRadio.setAttribute("tabindex", "0");
+        }
+      } else {
+        radios[0].setAttribute("tabindex", "0");
+      }
+    }
+    if (this.hasButtonGroup) {
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("lynk-button-group");
+      if (buttonGroup) {
+        buttonGroup.disableRole = true;
+      }
+    }
+  }
+  syncRadios() {
+    if (customElements.get("lynk-radio") && customElements.get("lynk-radio-button")) {
+      this.syncRadioElements();
+      return;
+    }
+    if (customElements.get("lynk-radio")) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined("lynk-radio").then(() => this.syncRadios());
+    }
+    if (customElements.get("lynk-radio-button")) {
+      this.syncRadioElements();
+    } else {
+      customElements.whenDefined("lynk-radio-button").then(() => this.syncRadios());
+    }
+  }
+  updateCheckedRadio() {
+    const radios = this.getAllRadios();
+    radios.forEach((radio) => radio.checked = radio.value === this.value);
+    this.formControlController.setValidity(this.validity.valid);
+  }
+  handleSizeChange() {
+    this.syncRadios();
+  }
+  handleValueChange() {
+    if (this.hasUpdated) {
+      this.updateCheckedRadio();
+    }
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    const isRequiredAndEmpty = this.required && !this.value;
+    const hasCustomValidityMessage = this.customValidityMessage !== "";
+    if (isRequiredAndEmpty || hasCustomValidityMessage) {
+      this.formControlController.emitInvalidEvent();
+      return false;
+    }
+    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() {
+    const isValid = this.validity.valid;
+    this.errorMessage = this.customValidityMessage || isValid ? "" : this.validationInput.validationMessage;
+    this.formControlController.setValidity(isValid);
+    this.validationInput.hidden = true;
+    clearTimeout(this.validationTimeout);
+    if (!isValid) {
+      this.validationInput.hidden = false;
+      this.validationInput.reportValidity();
+      this.validationTimeout = setTimeout(() => this.validationInput.hidden = true, 1e4);
+    }
+    return isValid;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message = "") {
+    this.customValidityMessage = message;
+    this.errorMessage = message;
+    this.validationInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  /** Sets focus on the radio-group. */
+  focus(options) {
+    const radios = this.getAllRadios();
+    const checked = radios.find((radio) => radio.checked);
+    const firstEnabledRadio = radios.find((radio) => !radio.disabled);
+    const radioToFocus = checked || firstEnabledRadio;
+    if (radioToFocus) {
+      radioToFocus.focus(options);
+    }
+  }
+  render() {
+    const defaultSlot = html`
+      <slot
+        class=${classMap({
+      "radio-group__control": true,
+      "radio-group__control--has-button-group": this.hasButtonGroup
+    })}
+        @slotchange=${this.syncRadios}
+        @click=${this.handleRadioClick}
+        @keydown=${this.handleKeyDown}
+        @focusin=${this.handleFocus}
+        @focusout=${this.handleBlur}
+      ></slot>
+    `;
+    return html`
+      <lynk-form-field
+        .size=${this.size}
+        .state=${this.state}
+        .label=${this.hasSlotController.test("label") ? "" : this.label}
+        .helpText=${this.hasSlotController.test("help-text") ? "" : this.helpText}
+        .helpTip=${this.hasSlotController.test("help-tip") ? "" : this.helpTip}
+        .required=${this.required}
+        .optional=${this.optional}
+        .readonly=${this.readonly}
+        .dirty=${this.dirty}
+        .focused=${this.hasFocus}
+        .inline=${this.inline}
+        ?data-user-invalid=${this.hasAttribute("data-user-invalid")}
+        ?data-user-valid=${this.hasAttribute("data-user-valid")}
+        ?data-invalid=${this.hasAttribute("data-invalid")}
+        ?data-valid=${this.hasAttribute("data-valid")}
+      >
+        ${this.hasSlotController.test("label") ? html`<slot name="label" slot="label"></slot>` : ""}
+        ${this.hasSlotController.test("help-text") ? html`<slot name="help-text" slot="help-text"></slot>` : ""}
+        ${this.hasSlotController.test("help-tip") ? html`<slot name="help-tip" slot="help-tip"></slot>` : ""}
+        <fieldset
+          role="radiogroup"
+          aria-label=${this.label || "Radio group"}
+          aria-readonly=${this.readonly ? "true" : "false"}
+          class="radio-group"
+        >
+          <div class="visually-hidden">
+            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
+            <label class="radio-group__validation">
+              <input
+                type="text"
+                class="radio-group__validation-input"
+                ?required=${this.required}
+                tabindex="-1"
+                hidden
+                @invalid=${this.handleInvalid}
+              />
+            </label>
+          </div>
+
+          ${this.hasButtonGroup ? html`
+                <lynk-button-group part="button-group" exportparts="base:button-group__base" .gapped=${this.gapped}>
+                  ${defaultSlot}
+                </lynk-button-group>
+              ` : defaultSlot}
+        </fieldset>
+      </lynk-form-field>
+    `;
+  }
+};
+LynkRadioGroup.styles = [component_styles_default, radio_group_styles_default];
+LynkRadioGroup.dependencies = { "lynk-button-group": LynkButtonGroup, "lynk-form-field": LynkFormField };
+__decorateClass([
+  query("slot:not([name])")
+], LynkRadioGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".radio-group__validation-input")
+], LynkRadioGroup.prototype, "validationInput", 2);
+__decorateClass([
+  state()
+], LynkRadioGroup.prototype, "hasButtonGroup", 2);
+__decorateClass([
+  state()
+], LynkRadioGroup.prototype, "errorMessage", 2);
+__decorateClass([
+  state()
+], LynkRadioGroup.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], LynkRadioGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], LynkRadioGroup.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], LynkRadioGroup.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "help-tip" })
+], LynkRadioGroup.prototype, "helpTip", 2);
+__decorateClass([
+  property()
+], LynkRadioGroup.prototype, "name", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRadioGroup.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRadioGroup.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRadioGroup.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "optional", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "dirty", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "gapped", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkRadioGroup.prototype, "state", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "inline", 2);
+__decorateClass([
+  watch("size", { waitUntilFirstUpdate: true })
+], LynkRadioGroup.prototype, "handleSizeChange", 1);
+__decorateClass([
+  watch("value")
+], LynkRadioGroup.prototype, "handleValueChange", 1);
+
+export {
+  LynkRadioGroup
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkBreadcrumb
+} from "./chunk.GI7JRBVI.js";
+
+// src/components/breadcrumb/breadcrumb.ts
+var breadcrumb_default = LynkBreadcrumb;
+LynkBreadcrumb.define("lynk-breadcrumb");
+
+export {
+  breadcrumb_default
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkIcon
+} from "./chunk.FBFDH3EB.js";
+
+// src/components/icon/icon.ts
+var icon_default = LynkIcon;
+LynkIcon.define("lynk-icon");
+
+export {
+  icon_default
+};

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

@@ -0,0 +1,44 @@
+import {
+  tr_styles_default
+} from "./chunk.MMUNA5AM.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/tr/tr.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkTr = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.interactive = false;
+    this.active = false;
+    this.pulse = false;
+  }
+  render() {
+    return html` <slot part="base"></slot> `;
+  }
+};
+LynkTr.styles = [component_styles_default, tr_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], LynkTr.prototype, "state", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTr.prototype, "interactive", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTr.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTr.prototype, "pulse", 2);
+
+export {
+  LynkTr
+};

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

@@ -0,0 +1,24 @@
+import {
+  LynkTree
+} from "./chunk.TCSIHOSF.js";
+
+// src/react/tree/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-tree";
+LynkTree.define("lynk-tree");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTree,
+  react: React,
+  events: {
+    EvSelectionChange: "ev-selection-change"
+  },
+  displayName: "LynkTree"
+});
+var tree_default = reactWrapper;
+
+export {
+  tree_default
+};

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

@@ -0,0 +1,100 @@
+import {
+  button_group_styles_default
+} from "./chunk.RDGCTPIY.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.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 LynkButtonGroup = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+    this.gapped = false;
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--focus", true);
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--focus", false);
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-button-group__button--hover", true);
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.toggleAttribute("data-lynk-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) {
+        if (!this.gapped) {
+          button.toggleAttribute("data-lynk-button-group__button", true);
+          button.toggleAttribute("data-lynk-button-group__button--first", index === 0);
+          button.toggleAttribute(
+            "data-lynk-button-group__button--inner",
+            index > 0 && index < slottedElements.length - 1
+          );
+          button.toggleAttribute("data-lynk-button-group__button--last", index === slottedElements.length - 1);
+        }
+        button.toggleAttribute(
+          "data-lynk-button-group__button--radio",
+          button.tagName.toLowerCase() === "lynk-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>
+    `;
+  }
+};
+LynkButtonGroup.styles = [component_styles_default, button_group_styles_default];
+__decorateClass([
+  query("slot")
+], LynkButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], LynkButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], LynkButtonGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkButtonGroup.prototype, "gapped", 2);
+function findButton(el) {
+  var _a;
+  const selector = "lynk-button, lynk-radio-button";
+  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
+}
+
+export {
+  LynkButtonGroup
+};

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

@@ -0,0 +1,52 @@
+import {
+  auto_grid_styles_default
+} from "./chunk.KAQ6IGEE.js";
+import {
+  LynkElement
+} from "./chunk.TIGM5LWI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/auto-grid/auto-grid.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkAutoGrid = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.autoSize = "fit";
+    this.minSize = "20rem";
+    this.gap = "var(--lynk-spacing-base)";
+  }
+  render() {
+    return html`
+      <slot
+        part="base"
+        class=${classMap({
+      "auto-grid": true,
+      "auto-grid--fit": this.autoSize === "fit",
+      "auto-grid--fill": this.autoSize === "fill"
+    })}
+        style="--gap: ${this.gap}; --min-size: ${this.minSize};"
+      ></slot>
+    `;
+  }
+};
+LynkAutoGrid.styles = [component_styles_default, auto_grid_styles_default];
+__decorateClass([
+  property({ reflect: true, attribute: "auto-size" })
+], LynkAutoGrid.prototype, "autoSize", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "min-size" })
+], LynkAutoGrid.prototype, "minSize", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LynkAutoGrid.prototype, "gap", 2);
+
+export {
+  LynkAutoGrid
+};

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

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

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

@@ -0,0 +1,11 @@
+import {
+  LynkTextarea
+} from "./chunk.E2L3L72Q.js";
+
+// src/components/textarea/textarea.ts
+var textarea_default = LynkTextarea;
+LynkTextarea.define("lynk-textarea");
+
+export {
+  textarea_default
+};

package/dist/chunks/chunk.35KRP4K6.js

@@ -0,0 +1,21 @@
+import {
+  LynkCard
+} from "./chunk.UIYQ2OQE.js";
+
+// src/react/card/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "lynk-card";
+LynkCard.define("lynk-card");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkCard,
+  react: React,
+  events: {},
+  displayName: "LynkCard"
+});
+var card_default = reactWrapper;
+
+export {
+  card_default
+};