@uplynk/lynk-design 1.11.3 → 1.12.0

package/cdn/chunks/chunk.4MV7AWNL.js

@@ -0,0 +1,57 @@
+import {
+  responsive_media_styles_default
+} from "./chunk.EGLRCU2T.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.2BD5ESA2.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/responsive-media/responsive-media.component.ts
+var LynkResponsiveMedia = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.aspectRatio = "16:9";
+    this.fit = "cover";
+  }
+  render() {
+    const split = this.aspectRatio.split(":");
+    const x2 = parseFloat(split[0]);
+    const y = parseFloat(split[1]);
+    const paddingBottom = !isNaN(x2) && !isNaN(y) && x2 > 0 && y > 0 ? `${y / x2 * 100}%` : "0";
+    return x`
+      <div
+        class=${e({
+      "responsive-media": true,
+      "responsive-media--cover": this.fit === "cover",
+      "responsive-media--contain": this.fit === "contain"
+    })}
+        style="padding-bottom: ${paddingBottom}"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+LynkResponsiveMedia.styles = [component_styles_default, responsive_media_styles_default];
+__decorateClass([
+  n({ attribute: "aspect-ratio" })
+], LynkResponsiveMedia.prototype, "aspectRatio", 2);
+__decorateClass([
+  n()
+], LynkResponsiveMedia.prototype, "fit", 2);
+
+export {
+  LynkResponsiveMedia
+};

package/cdn/chunks/chunk.4NPIPKIF.js

@@ -0,0 +1,11 @@
+import {
+  LynkButtonGroup
+} from "./chunk.HOO5F37O.js";
+
+// src/components/button-group/button-group.ts
+var button_group_default = LynkButtonGroup;
+LynkButtonGroup.define("lynk-button-group");
+
+export {
+  button_group_default
+};

package/cdn/chunks/chunk.4NSEKWZY.js

@@ -0,0 +1,216 @@
+import {
+  nav_item_default
+} from "./chunk.OXYT23LQ.js";
+import {
+  nav_styles_default
+} from "./chunk.XO7WQDNH.js";
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  LocalizeController
+} from "./chunk.VS2OBD6I.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  LynkElement,
+  e as e2,
+  n
+} from "./chunk.2BD5ESA2.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/nav/nav.component.ts
+var LynkNav = class extends LynkElement {
+  constructor() {
+    super();
+    this.value = void 0;
+    this.squished = false;
+    this.localize = new LocalizeController(this);
+    this.handleFocusOut = (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (!relatedTarget || !this.contains(relatedTarget)) {
+        this.tabIndex = 0;
+      }
+    };
+    this.handleFocusIn = (event) => {
+      const target = event.target;
+      if (event.target === this) {
+        this.focusItem(this.lastFocusedItem || this.getAllNavItems()[0]);
+      }
+      if (nav_item_default.isTreeItem(target) && !target.disabled) {
+        if (this.lastFocusedItem) {
+          this.lastFocusedItem.tabIndex = -1;
+        }
+        this.lastFocusedItem = target;
+        this.tabIndex = -1;
+        target.tabIndex = 0;
+      }
+    };
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    if (this.squished) {
+      this.handleSquishedChange();
+    }
+    this.setAttribute("role", "navigation");
+    this.setAttribute("tabindex", "0");
+    await this.updateComplete;
+    this.mutationObserver = new MutationObserver(this.handleNavChanged);
+    this.mutationObserver.observe(this, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.mutationObserver) == null ? void 0 : _a.disconnect();
+  }
+  handleNavChanged(mutations) {
+    for (const mutation of mutations) {
+      const removedNodes = [...mutation.removedNodes].filter(nav_item_default.isTreeItem);
+      if (removedNodes.includes(this.lastFocusedItem)) {
+        this.focusItem(this.getFocusableItems()[0]);
+      }
+    }
+  }
+  getAllNavItems() {
+    return [...this.querySelectorAll("lynk-nav-item")];
+  }
+  getNavGroups() {
+    return [...this.querySelectorAll("lynk-nav-group")];
+  }
+  getFocusableItems() {
+    const items = this.getAllNavItems();
+    const collapsedItems = /* @__PURE__ */ new Set();
+    return items.filter((item) => {
+      var _a;
+      if (item.disabled) return false;
+      const parent = (_a = item.parentElement) == null ? void 0 : _a.closest("[role=treeitem]");
+      if (parent && (!parent.expanded || collapsedItems.has(parent))) {
+        collapsedItems.add(item);
+      }
+      return !collapsedItems.has(item);
+    });
+  }
+  focusItem(item) {
+    item == null ? void 0 : item.focus();
+  }
+  handleKeyDown(event) {
+    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End", "Enter", "Tab", " "].includes(event.key)) {
+      return;
+    }
+    const items = this.getFocusableItems();
+    const isLtr = this.localize.dir() === "ltr";
+    const isRtl = this.localize.dir() === "rtl";
+    if (items.length > 0) {
+      const activeItemIndex = items.findIndex((item) => item.matches(":focus"));
+      const activeItem = items[activeItemIndex];
+      const focusItemAt = (index) => {
+        const item = items[clamp(index, 0, items.length - 1)];
+        this.focusItem(item);
+      };
+      const toggleExpand = (expanded) => {
+        activeItem.expanded = expanded;
+      };
+      if (event.key === "Tab" && !event.shiftKey && activeItemIndex === items.length - 1) {
+        this.tabIndex = 0;
+        activeItem.tabIndex = 0;
+      } else if (event.key === "Tab" && event.shiftKey && activeItemIndex === 0) {
+        this.tabIndex = -1;
+        activeItem.tabIndex = -1;
+      } else {
+        event.preventDefault();
+        if (event.key === "ArrowDown" || event.key === "Tab" && !event.shiftKey) {
+          focusItemAt(activeItemIndex + 1);
+        } else if (event.key === "ArrowUp" || event.key === "Tab" && event.shiftKey) {
+          focusItemAt(activeItemIndex - 1);
+        } else if (isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
+          if (!activeItem || activeItem.disabled || activeItem.isParent && activeItem.expanded || !activeItem.isParent) {
+            focusItemAt(activeItemIndex + 1);
+          } else {
+            toggleExpand(true);
+          }
+        } else if (isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
+          if (!activeItem || activeItem.disabled || !activeItem.isParent || activeItem.isParent && !activeItem.expanded) {
+            focusItemAt(activeItemIndex - 1);
+          } else {
+            toggleExpand(false);
+          }
+        } else if (event.key === "Home") {
+          focusItemAt(0);
+        } else if (event.key === "End") {
+          focusItemAt(items.length - 1);
+        } else if (event.key === "Enter" || event.key === " ") {
+          if (!activeItem.disabled) {
+            activeItem.click();
+          }
+        }
+      }
+    }
+  }
+  handleClick(event) {
+    const target = event.target;
+    const item = target.closest("lynk-nav-item");
+    if (!item || item.disabled || item.inert) {
+      return;
+    }
+    this.emit("ev-nav-select", { detail: { item } });
+  }
+  handleSquishedChange() {
+    const items = this.getAllNavItems();
+    const groups = this.getNavGroups();
+    items.forEach((item) => {
+      item.squished = this.squished;
+      item.expanded = false;
+      item.isParent = false;
+    });
+    groups.forEach((item) => {
+      item.squished = this.squished;
+    });
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e({
+      nav: true,
+      "nav--squished": this.squished
+    })}
+        role="tree"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot part="list"></slot>
+      </div>
+    `;
+  }
+};
+LynkNav.styles = [component_styles_default, nav_styles_default];
+__decorateClass([
+  e2("slot:not([name])")
+], LynkNav.prototype, "defaultSlot", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkNav.prototype, "value", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkNav.prototype, "squished", 2);
+__decorateClass([
+  watch("squished", { waitUntilFirstUpdate: true })
+], LynkNav.prototype, "handleSquishedChange", 1);
+
+export {
+  LynkNav
+};

package/cdn/chunks/chunk.4RDPJ34V.js

@@ -0,0 +1,384 @@
+import {
+  radio_group_styles_default
+} from "./chunk.LGMSDTSG.js";
+import {
+  LynkFormField
+} from "./chunk.A7XWJUHZ.js";
+import {
+  LynkButtonGroup
+} from "./chunk.HOO5F37O.js";
+import {
+  FormControlController,
+  customErrorValidityState,
+  validValidityState,
+  valueMissingValidityState
+} from "./chunk.2LNQMRJE.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  LynkElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.2BD5ESA2.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/radio-group/radio-group.component.ts
+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.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) {
+      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;
+    }
+    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 = x`
+      <slot
+        class=${e({
+      "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 x`
+      <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}
+        .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") ? x`<slot name="label" slot="label"></slot>` : ""}
+        ${this.hasSlotController.test("help-text") ? x`<slot name="help-text" slot="help-text"></slot>` : ""}
+        ${this.hasSlotController.test("help-tip") ? x`<slot name="help-tip" slot="help-tip"></slot>` : ""}
+        <fieldset role="radiogroup" aria-label=${this.label || "Radio group"} 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 ? x`
+                <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([
+  e2("slot:not([name])")
+], LynkRadioGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  e2(".radio-group__validation-input")
+], LynkRadioGroup.prototype, "validationInput", 2);
+__decorateClass([
+  r()
+], LynkRadioGroup.prototype, "hasButtonGroup", 2);
+__decorateClass([
+  r()
+], LynkRadioGroup.prototype, "errorMessage", 2);
+__decorateClass([
+  r()
+], LynkRadioGroup.prototype, "hasFocus", 2);
+__decorateClass([
+  r()
+], LynkRadioGroup.prototype, "defaultValue", 2);
+__decorateClass([
+  n()
+], LynkRadioGroup.prototype, "label", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], LynkRadioGroup.prototype, "helpText", 2);
+__decorateClass([
+  n({ attribute: "help-tip" })
+], LynkRadioGroup.prototype, "helpTip", 2);
+__decorateClass([
+  n()
+], LynkRadioGroup.prototype, "name", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkRadioGroup.prototype, "value", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkRadioGroup.prototype, "size", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkRadioGroup.prototype, "form", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "required", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "dirty", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkRadioGroup.prototype, "gapped", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkRadioGroup.prototype, "state", 2);
+__decorateClass([
+  n({ 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/cdn/chunks/chunk.4ZJZDLCR.js

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