@uplynk/lynk-design 1.0.0-beta.2 → 1.0.0-beta.3

package/cdn/chunks/chunk.22VACRYF.js

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

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

@@ -0,0 +1,241 @@
+import {
+  form_field_styles_default
+} from "./chunk.QLHEZZN2.js";
+import {
+  getTabbableBoundary
+} from "./chunk.LXDTFLWU.js";
+import {
+  LynkTooltip
+} from "./chunk.3E27EHD6.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  LynkIcon
+} from "./chunk.UUI65725.js";
+import {
+  e
+} from "./chunk.3RBSSBZT.js";
+import {
+  LynkElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.TUHEHXEL.js";
+import {
+  component_styles_default
+} from "./chunk.RBCZP5WV.js";
+import {
+  x
+} from "./chunk.OOP2EFQH.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/form-field/form-field.component.ts
+var LynkFormField = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "help-text", "help-tip", "label");
+    this.hasFocus = false;
+    this.state = "default";
+    this.size = "medium";
+    this.label = "";
+    this.id = "";
+    this.helpText = "";
+    this.helpTip = "";
+    this.required = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+  }
+  firstUpdated() {
+    this.addOpenListeners();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+  }
+  addOpenListeners() {
+    document.addEventListener("keydown", this.handleDocumentKeyDown);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  removeOpenListeners() {
+    document.removeEventListener("keydown", this.handleDocumentKeyDown);
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("on:focus");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("on:blur");
+  }
+  handleLabelClick() {
+    this.focus();
+  }
+  handleDefaultSlotChange() {
+    this.manageAccessibleTarget();
+  }
+  handleDocumentKeyDown(event) {
+    if (event.key === "Tab") {
+      setTimeout(() => {
+        var _a, _b, _c;
+        const activeElement = ((_a = this.containingElement) == null ? void 0 : _a.getRootNode()) instanceof ShadowRoot ? (_c = (_b = document.activeElement) == null ? void 0 : _b.shadowRoot) == null ? void 0 : _c.activeElement : document.activeElement;
+        if (!this.containingElement || (activeElement == null ? void 0 : activeElement.closest(this.containingElement.tagName.toLowerCase())) !== this.containingElement) {
+          this.blur();
+        }
+      });
+    }
+  }
+  handleDocumentMouseDown(event) {
+    const path = event.composedPath();
+    if (this && this.containingElement && !path.includes(this.containingElement)) {
+      this.blur();
+    }
+  }
+  //
+  // Slotted elements can be arbitrary content or form elements, but we need to link them to the label with `aria-labelledby`.
+  // This must be applied to the "accessible element" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible element could be a slotted form element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the element slot is the "accessible element."
+  //
+  manageAccessibleTarget() {
+    const assignedElements = this.defaultSlot.assignedElements({ flatten: true });
+    const accessibleTarget = assignedElements.find((el) => getTabbableBoundary(el).start);
+    if (accessibleTarget) {
+      this.target = accessibleTarget;
+      this.target.setAttribute("aria-label", this.label);
+    }
+  }
+  /** Sets focus on the control. */
+  focus(options) {
+    var _a;
+    if (this.target && typeof ((_a = this.target) == null ? void 0 : _a.focus) === "function") {
+      this.target.focus(options);
+    }
+    this.handleFocus();
+  }
+  /** Removes focus from the control. */
+  blur() {
+    var _a;
+    if (this.target && typeof ((_a = this.target) == null ? void 0 : _a.blur) === "function") {
+      this.target.blur();
+    }
+    this.handleBlur();
+  }
+  render() {
+    const hasLabelSlot = this.hasSlotController.test("label");
+    const hasHelpTextSlot = this.hasSlotController.test("help-text");
+    const hasHelpTipSlot = this.hasSlotController.test("help-tip");
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+    const hasHelpTip = this.helpTip ? true : !!hasHelpTipSlot;
+    return x`
+      <fieldset
+        part="base"
+        class=${e({
+      "form-field": true,
+      "form-field--small": this.size === "small",
+      "form-field--medium": this.size === "medium",
+      "form-field--large": this.size === "large",
+      "form-field--has-label": hasLabel,
+      "form-field--has-help-text": hasHelpText,
+      "form-field--has-error": this.state === "error" || this.hasAttribute("data-user-invalid"),
+      "form-field--has-warning": this.state === "warning",
+      "form-field--has-success": this.state === "success",
+      "form-field--focused": this.hasFocus
+    })}
+      >
+        <label
+          id="label"
+          part="label"
+          class=${e({
+      "form-field__label": true
+    })}
+          aria-hidden=${hasLabel ? "false" : "true"}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+
+          ${this.required ? x`
+                <lynk-tooltip content="Required" hoist>
+                  <lynk-icon style="font-size: 9px;" name="asterisk" library="system"></lynk-icon>
+                </lynk-tooltip>
+              ` : ""}
+          ${hasHelpTip ? x`
+                <lynk-tooltip hoist>
+                  <div slot="content">
+                    <slot name="help-tip">${this.helpTip}</slot>
+                  </div>
+                  <lynk-icon style="font-size: 11px;" name="question-fill" library="system"></lynk-icon>
+                </lynk-tooltip>
+              ` : ""}
+        </label>
+
+        <slot
+          part="control"
+          class="form-field__control"
+          @click=${this.focus}
+          @slotchange=${this.handleDefaultSlotChange}
+        ></slot>
+
+        <div
+          part="help-text"
+          id="help-text"
+          class="form-field__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </fieldset>
+    `;
+  }
+};
+LynkFormField.styles = [component_styles_default, form_field_styles_default];
+LynkFormField.dependencies = {
+  "lynk-icon": LynkIcon,
+  "lynk-tooltip": LynkTooltip
+};
+__decorateClass([
+  e2("slot:not([name])")
+], LynkFormField.prototype, "defaultSlot", 2);
+__decorateClass([
+  r()
+], LynkFormField.prototype, "hasFocus", 2);
+__decorateClass([
+  n({ attribute: false })
+], LynkFormField.prototype, "containingElement", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkFormField.prototype, "state", 2);
+__decorateClass([
+  n({ reflect: true })
+], LynkFormField.prototype, "size", 2);
+__decorateClass([
+  n()
+], LynkFormField.prototype, "label", 2);
+__decorateClass([
+  n()
+], LynkFormField.prototype, "id", 2);
+__decorateClass([
+  n({ attribute: "help-text" })
+], LynkFormField.prototype, "helpText", 2);
+__decorateClass([
+  n({ attribute: "help-tip" })
+], LynkFormField.prototype, "helpTip", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkFormField.prototype, "required", 2);
+
+export {
+  LynkFormField
+};

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

@@ -0,0 +1,11 @@
+import {
+  LynkBadge
+} from "./chunk.GMITTAQ2.js";
+
+// src/components/badge/badge.ts
+var badge_default = LynkBadge;
+LynkBadge.define("lynk-badge");
+
+export {
+  badge_default
+};

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

@@ -0,0 +1,77 @@
+import {
+  page_content_styles_default
+} from "./chunk.J2BRAWGQ.js";
+import {
+  LynkPage
+} from "./chunk.4ZFA2Y6Q.js";
+import {
+  getScrollParent
+} from "./chunk.WSPFGNPB.js";
+import {
+  e
+} from "./chunk.3RBSSBZT.js";
+import {
+  LynkElement,
+  e as e2,
+  n
+} from "./chunk.TUHEHXEL.js";
+import {
+  component_styles_default
+} from "./chunk.RBCZP5WV.js";
+import {
+  x
+} from "./chunk.OOP2EFQH.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/page-content/page-content.component.ts
+var LynkPageContent = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.width = "fluid";
+  }
+  /** Scrolls the nearest scrollable parent element to the top. */
+  scrollToTop() {
+    const parent = this.hasParentLayout() ? this.parentElement.renderRoot.querySelector(".lynk-page__main") : getScrollParent(this.pageContent);
+    if (parent) {
+      parent.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }
+  // Checks whether the page content is nested into a lynk-page
+  hasParentLayout() {
+    const parent = this.parentElement;
+    return parent instanceof LynkPage;
+  }
+  render() {
+    return x`
+      <div
+        part="base"
+        class=${e({
+      "page-content": true,
+      "page-content--auto": this.width === "auto",
+      "page-content--sm": this.width === "small",
+      "page-content--md": this.width === "medium",
+      "page-content--lg": this.width === "large",
+      "page-content--xl": this.width === "x-large",
+      "page-content--xxl": this.width === "2x-large",
+      "page-content--fluid": this.width === "fluid"
+    })}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+LynkPageContent.styles = [component_styles_default, page_content_styles_default];
+LynkPageContent.dependencies = { "lynk-page": LynkPage };
+__decorateClass([
+  n({ reflect: true })
+], LynkPageContent.prototype, "width", 2);
+__decorateClass([
+  e2(".page-content")
+], LynkPageContent.prototype, "pageContent", 2);
+
+export {
+  LynkPageContent
+};

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

@@ -0,0 +1,89 @@
+import {
+  intersection_observer_styles_default
+} from "./chunk.P4E73LYZ.js";
+import {
+  watch
+} from "./chunk.JMZM2TDT.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.TUHEHXEL.js";
+import {
+  component_styles_default
+} from "./chunk.RBCZP5WV.js";
+import {
+  x
+} from "./chunk.OOP2EFQH.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.js";
+
+// src/components/intersection-observer/intersection-observer.component.ts
+var LynkIntersectionObserver = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        console.log(entry);
+        if (entry.intersectionRatio > 0) {
+          this.emit("on:enter-view", { detail: { entry } });
+        } else {
+          this.emit("on:exit-view", { detail: { entry } });
+        }
+      });
+    });
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      this.observedElements.forEach((el) => this.intersectionObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.intersectionObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.intersectionObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return x`<slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+LynkIntersectionObserver.styles = [component_styles_default, intersection_observer_styles_default];
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], LynkIntersectionObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkIntersectionObserver.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkIntersectionObserver
+};

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

@@ -0,0 +1,57 @@
+import {
+  responsive_media_styles_default
+} from "./chunk.6TIWRBEL.js";
+import {
+  e
+} from "./chunk.3RBSSBZT.js";
+import {
+  LynkElement,
+  n
+} from "./chunk.TUHEHXEL.js";
+import {
+  component_styles_default
+} from "./chunk.RBCZP5WV.js";
+import {
+  x
+} from "./chunk.OOP2EFQH.js";
+import {
+  __decorateClass
+} from "./chunk.W27M6RDR.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.2KVTQM46.js

@@ -0,0 +1,11 @@
+import {
+  LynkDialog
+} from "./chunk.SCNDG4VI.js";
+
+// src/components/dialog/dialog.ts
+var dialog_default = LynkDialog;
+LynkDialog.define("lynk-dialog");
+
+export {
+  dialog_default
+};

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

@@ -0,0 +1,27 @@
+import {
+  LynkTooltip
+} from "./chunk.3E27EHD6.js";
+
+// src/react/lynk-tooltip/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-tooltip";
+LynkTooltip.define("lynk-tooltip");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTooltip,
+  react: React,
+  events: {
+    OnShow: "on:show",
+    AfterShow: "after:show",
+    OnHide: "on:hide",
+    AfterHide: "after:hide"
+  },
+  displayName: "LynkTooltip"
+});
+var lynk_tooltip_default = reactWrapper;
+
+export {
+  lynk_tooltip_default
+};

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

@@ -0,0 +1,24 @@
+import {
+  visually_hidden_styles_default
+} from "./chunk.RXGPXZJL.js";
+import {
+  LynkElement
+} from "./chunk.TUHEHXEL.js";
+import {
+  component_styles_default
+} from "./chunk.RBCZP5WV.js";
+import {
+  x
+} from "./chunk.OOP2EFQH.js";
+
+// src/components/visually-hidden/visually-hidden.component.ts
+var LynkVisuallyHidden = class extends LynkElement {
+  render() {
+    return x` <slot></slot> `;
+  }
+};
+LynkVisuallyHidden.styles = [component_styles_default, visually_hidden_styles_default];
+
+export {
+  LynkVisuallyHidden
+};

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

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