@uplynk/lynk-design 1.20.0 → 1.20.1

package/dist/chunks/chunk.KDJVL27S.js

@@ -0,0 +1,415 @@
+import {
+  radio_group_styles_default
+} from "./chunk.7KUJYOUY.js";
+import {
+  LynkFormField
+} from "./chunk.UN7SNVBP.js";
+import {
+  LynkButtonGroup
+} from "./chunk.MCSWX3WD.js";
+import {
+  FormControlController,
+  customErrorValidityState,
+  validValidityState,
+  valueMissingValidityState
+} from "./chunk.5AIQMNFQ.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.SPANRPKG.js";
+import {
+  LynkElement
+} from "./chunk.3KMQBZOQ.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.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",
+      "label-end",
+      "help-text-end"
+    );
+    this.customValidityMessage = "";
+    this.hasButtonGroup = false;
+    this.errorMessage = "";
+    this.hasFocus = false;
+    this.defaultValue = "";
+    this.label = "";
+    this.helpText = "";
+    this.labelEnd = "";
+    this.helpTextEnd = "";
+    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}
+        .labelEnd=${this.hasSlotController.test("label-end") ? "" : this.labelEnd}
+        .helpTextEnd=${this.hasSlotController.test("help-text-end") ? "" : this.helpTextEnd}
+        .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>` : ""}
+        ${this.hasSlotController.test("label-end") ? html`<slot name="label-end" slot="label-end"></slot>` : ""}
+        ${this.hasSlotController.test("help-text-end") ? html`<slot name="help-text-end" slot="help-text-end"></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: "label-end" })
+], LynkRadioGroup.prototype, "labelEnd", 2);
+__decorateClass([
+  property({ attribute: "help-text-end" })
+], LynkRadioGroup.prototype, "helpTextEnd", 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.KI2X6BTN.js

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

package/dist/chunks/chunk.KJEC6G3P.js

@@ -0,0 +1,100 @@
+import {
+  LocalizeController
+} from "./chunk.VIBAEA26.js";
+import {
+  LynkElement
+} from "./chunk.3KMQBZOQ.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.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 LynkRelativeTime = class extends LynkElement {
+  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()
+], LynkRelativeTime.prototype, "isoTime", 2);
+__decorateClass([
+  state()
+], LynkRelativeTime.prototype, "relativeTime", 2);
+__decorateClass([
+  property()
+], LynkRelativeTime.prototype, "date", 2);
+__decorateClass([
+  property()
+], LynkRelativeTime.prototype, "format", 2);
+__decorateClass([
+  property()
+], LynkRelativeTime.prototype, "numeric", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkRelativeTime.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 {
+  LynkRelativeTime
+};

package/dist/chunks/chunk.KJQTO7LP.js

@@ -0,0 +1,25 @@
+import {
+  LynkRadioButton
+} from "./chunk.PQRGB3VN.js";
+
+// src/react/radio-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-radio-button";
+LynkRadioButton.define("lynk-radio-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkRadioButton,
+  react: React,
+  events: {
+    EvBlur: "ev-blur",
+    EvFocus: "ev-focus"
+  },
+  displayName: "LynkRadioButton"
+});
+var radio_button_default = reactWrapper;
+
+export {
+  radio_button_default
+};

package/dist/chunks/chunk.KLLPVVT7.js

@@ -0,0 +1,11 @@
+import {
+  LynkDrawer
+} from "./chunk.OLSHAKNL.js";
+
+// src/components/drawer/drawer.ts
+var drawer_default = LynkDrawer;
+LynkDrawer.define("lynk-drawer");
+
+export {
+  drawer_default
+};

package/dist/chunks/chunk.KNLGW35L.js

@@ -0,0 +1,68 @@
+import {
+  page_footer_styles_default
+} from "./chunk.2UPLKEF3.js";
+import {
+  LynkPageContent
+} from "./chunk.LJ2RHDDH.js";
+import {
+  LynkPage
+} from "./chunk.6C6TSNXV.js";
+import {
+  LynkElement
+} from "./chunk.3KMQBZOQ.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.O6LH3WX2.js";
+
+// src/components/page-footer/page-footer.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var LynkPageFooter = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.width = "fluid";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.slot && this.hasParentLayout()) {
+      this.slot = "footer";
+    }
+  }
+  // Checks whether the heading is nested into a lynk-page
+  hasParentLayout() {
+    const parent = this.parentElement;
+    return parent instanceof LynkPage;
+  }
+  render() {
+    return html`
+      <lynk-page-content
+        width="${this.width}"
+        style="--padding-top: 0; --padding-bottom: 0; --background-color: transparent; --border-radius: 0;"
+      >
+        <footer
+          part="base"
+          class=${classMap({
+      "page-footer": true
+    })}
+        >
+          <slot part="primary" class="page-footer__primary"></slot>
+          <slot part="center" name="center" class="page-footer__center"></slot>
+          <slot part="secondary" name="secondary" class="page-footer__secondary"></slot>
+        </footer>
+      </lynk-page-content>
+    `;
+  }
+};
+LynkPageFooter.styles = [component_styles_default, page_footer_styles_default];
+LynkPageFooter.dependencies = { "lynk-page-content": LynkPageContent, "lynk-page": LynkPage };
+__decorateClass([
+  property({ reflect: true })
+], LynkPageFooter.prototype, "width", 2);
+
+export {
+  LynkPageFooter
+};

package/dist/chunks/chunk.KPKG42RF.js

@@ -0,0 +1,11 @@
+import {
+  LynkTooltip
+} from "./chunk.RWUY52ZN.js";
+
+// src/components/tooltip/tooltip.ts
+var tooltip_default = LynkTooltip;
+LynkTooltip.define("lynk-tooltip");
+
+export {
+  tooltip_default
+};

package/dist/chunks/chunk.KQSSJOJX.js

@@ -0,0 +1,26 @@
+import {
+  LynkAnimation
+} from "./chunk.SK7EA2HJ.js";
+
+// src/react/animation/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-animation";
+LynkAnimation.define("lynk-animation");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkAnimation,
+  react: React,
+  events: {
+    EvCancel: "ev-cancel",
+    EvFinish: "ev-finish",
+    EvStart: "ev-start"
+  },
+  displayName: "LynkAnimation"
+});
+var animation_default = reactWrapper;
+
+export {
+  animation_default
+};