@uplynk/lynk-design 1.12.0 → 1.12.1

package/cdn/chunks/chunk.2CQEDLZD.js

@@ -0,0 +1,384 @@
+import {
+  radio_group_styles_default
+} from "./chunk.LGMSDTSG.js";
+import {
+  LynkFormField
+} from "./chunk.CKLE3HC5.js";
+import {
+  LynkButtonGroup
+} from "./chunk.6G4VZ6B5.js";
+import {
+  FormControlController,
+  customErrorValidityState,
+  validValidityState,
+  valueMissingValidityState
+} from "./chunk.2LNQMRJE.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  LynkElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.RWJTJO4F.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.2FXS4SA6.js

@@ -0,0 +1,98 @@
+import {
+  optgroup_styles_default
+} from "./chunk.ES2MVS7O.js";
+import {
+  LynkDivider
+} from "./chunk.F35IE34R.js";
+import {
+  u
+} from "./chunk.6HHAFBRE.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.RB5L7E7Z.js";
+import {
+  e
+} from "./chunk.BB43Q4ZV.js";
+import {
+  LynkElement,
+  e as e2,
+  n
+} from "./chunk.RWJTJO4F.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/optgroup/optgroup.component.ts
+var LynkOptgroup = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix", "label");
+    this.disabled = false;
+    this.label = "";
+  }
+  /**
+   * Syncs the disabled prop for all slotted lynk-options when it is triggered
+   */
+  handleDisableOptions() {
+    const { disabled } = this;
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "lynk-option").forEach((opt) => {
+      opt.disabled = disabled;
+    });
+  }
+  handleDisabledChange() {
+    this.handleDisableOptions();
+  }
+  render() {
+    const { disabled } = this;
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    return u`
+      <div
+        class=${e({
+      optgroup: true,
+      "optgroup--has-label": hasLabel,
+      "optgroup--has-prefix": this.hasSlotController.test("prefix"),
+      "optgroup--has-suffix": this.hasSlotController.test("suffix"),
+      "optgroup--is-disabled": this.disabled
+    })}
+        role="${disabled ? "presentation" : "group"}"
+        part="base"
+      >
+        <lynk-divider class="optgroup__divider" part="divider"></lynk-divider>
+        <div class="optgroup__label-container" part="label-container">
+          <slot name="prefix" part="prefix" class="optgroup__prefix"></slot>
+          <slot name="label" part="label" class="optgroup__label">
+            <span class="optgroup__label-content"> ${this.label} </span>
+          </slot>
+          <slot name="suffix" part="suffix" class="optgroup__suffix"></slot>
+        </div>
+        <div class="optgroup__options" role="group" part="options">
+          <slot @slotchange=${this.handleDisableOptions}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+LynkOptgroup.styles = optgroup_styles_default;
+LynkOptgroup.dependencies = {
+  "lynk-divider": LynkDivider
+};
+__decorateClass([
+  e2("slot:not([name])")
+], LynkOptgroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  n({ reflect: true, type: Boolean })
+], LynkOptgroup.prototype, "disabled", 2);
+__decorateClass([
+  n()
+], LynkOptgroup.prototype, "label", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkOptgroup.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkOptgroup
+};

package/cdn/chunks/chunk.2HM4QIQU.js

@@ -0,0 +1,128 @@
+import {
+  TableSortDirection
+} from "./chunk.WGKOAZH2.js";
+import {
+  table_styles_default
+} from "./chunk.FBCSEZEX.js";
+import {
+  c
+} from "./chunk.DDXNVUQI.js";
+import {
+  o as o2
+} from "./chunk.XQGSWNOO.js";
+import {
+  LynkElement,
+  n,
+  o
+} from "./chunk.RWJTJO4F.js";
+import {
+  component_styles_default
+} from "./chunk.ADWNFIQR.js";
+import {
+  x
+} from "./chunk.BW3AXSF6.js";
+import {
+  __decorateClass
+} from "./chunk.QIOX6AG5.js";
+
+// src/components/table/table.component.ts
+var LynkTable = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.cols = [];
+    this.rows = [];
+    this.custom = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("ev-table-sort", this.handleSort);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("ev-table-sort", this.handleSort);
+  }
+  handleSort(event) {
+    let direction;
+    this.assignedHead.forEach((head) => {
+      head.querySelectorAll("lynk-tr").forEach((row) => {
+        row.querySelectorAll("lynk-th").forEach((th) => {
+          if (th.key === event.detail.key) {
+            switch (TableSortDirection[th.sortDirection]) {
+              case TableSortDirection[1 /* DESC */]:
+                th.sortDirection = -1 /* ASC */;
+                break;
+              case TableSortDirection[-1 /* ASC */]:
+              case TableSortDirection[0 /* NONE */]:
+                th.sortDirection = 1 /* DESC */;
+                break;
+            }
+            direction = th.sortDirection;
+          } else {
+            th.sortDirection = 0 /* NONE */;
+          }
+        });
+      });
+    });
+    this.rows.sort((rowA, rowB) => {
+      let val1 = rowA[event.detail.key];
+      let val2 = rowB[event.detail.key];
+      if (val1 === null || val1 === void 0) val1 = "";
+      if (val2 === null || val2 === void 0) val2 = "";
+      if (!isNaN(parseFloat(val1)) && !isNaN(parseFloat(val2))) {
+        return (Number(val1) - Number(val2)) * direction;
+      }
+      const str1 = val1.toString();
+      const str2 = val2.toString();
+      return str1.localeCompare(str2) * direction;
+    });
+    this.requestUpdate();
+  }
+  render() {
+    return x`
+      <slot part="base">
+        <lynk-colgroup> ${c(this.cols, (col) => x`<lynk-col class="${col.key}"></lynk-col>`)} </lynk-colgroup>
+        <lynk-thead>
+          <lynk-tr>
+            ${c(
+      this.cols,
+      (col) => x`
+                <lynk-th
+                  key="${col.key}"
+                  sort-direction=${o2(col.sortDirection ? col.sortDirection : void 0)}
+                  ?sortable=${o2(col.sortable ? col.sortable : void 0)}
+                  >${col.title}</lynk-th
+                >
+              `
+    )}
+          </lynk-tr>
+        </lynk-thead>
+        <lynk-tbody>
+          ${c(
+      this.rows,
+      (row) => x` <lynk-tr> ${c(this.cols, (col) => x`<lynk-td>${row[col.key]}</lynk-td>`)} </lynk-tr>`
+    )}
+        </lynk-tbody>
+      </slot>
+    `;
+  }
+};
+LynkTable.styles = [component_styles_default, table_styles_default];
+__decorateClass([
+  n()
+], LynkTable.prototype, "cols", 2);
+__decorateClass([
+  n()
+], LynkTable.prototype, "rows", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkTable.prototype, "custom", 2);
+__decorateClass([
+  o({ selector: "lynk-thead", flatten: true })
+], LynkTable.prototype, "assignedHead", 2);
+__decorateClass([
+  o({ selector: "lynk-tbody", flatten: true })
+], LynkTable.prototype, "assignedBody", 2);
+
+export {
+  LynkTable
+};

package/cdn/chunks/chunk.2JY5UA2E.js

@@ -0,0 +1,11 @@
+import {
+  LynkButtonGroup
+} from "./chunk.6G4VZ6B5.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.2NSOLK77.js

@@ -0,0 +1,11 @@
+import {
+  LynkColGroup
+} from "./chunk.O2BDULMJ.js";
+
+// src/components/colgroup/colgroup.ts
+var colgroup_default = LynkColGroup;
+LynkColGroup.define("lynk-colgroup");
+
+export {
+  colgroup_default
+};