@uplynk/lynk-design 1.11.2 → 1.11.3

package/dist/chunks/chunk.FOZKOPK2.js

@@ -0,0 +1,396 @@
+import {
+  time_picker_styles_default
+} from "./chunk.JGBDVJ2N.js";
+import {
+  LynkDropdown
+} from "./chunk.4V5IXUSY.js";
+import {
+  LynkFormField
+} from "./chunk.6JXU2MG7.js";
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  LynkClock
+} from "./chunk.I24MNDIL.js";
+import {
+  FormControlController
+} from "./chunk.HGPZOHO6.js";
+import {
+  LynkIconButton
+} from "./chunk.OE2HMZ5Y.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  LynkIcon
+} from "./chunk.HZ6GAOLV.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.DEGSHN2L.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/time-picker/time-picker.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { live } from "lit/directives/live.js";
+import { property, query, state } from "lit/decorators.js";
+var LynkTimePicker = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this);
+    this.hasSlotController = new HasSlotController(this, "help-text", "help-tip", "label");
+    this.localize = new LocalizeController(this);
+    this.isOpen = false;
+    this.name = "";
+    this.value = "";
+    this.defaultValue = "";
+    this.label = "";
+    this.placeholder = "";
+    this.helpText = "";
+    this.helpTip = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.dirty = false;
+    this.inline = false;
+    this.size = "medium";
+    this.seconds = false;
+    this.format = "locale";
+    this.minuteInterval = 1;
+    this.clearable = false;
+    this.handleDocumentClick = (event) => {
+      if (!this.contains(event.target)) {
+        this.hide();
+      }
+    };
+    this.handleKeyDown = (event) => {
+      const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (event.key === "Enter" && !event.isComposing && !hasModifier) {
+        if (this.isOpen && this.clock.value) {
+          event.preventDefault();
+          this.value = this.clock.value;
+          this.updateInputFromValue();
+          this.emit("ev-change");
+          this.hide();
+        } else if (!this.isOpen) {
+          setTimeout(() => {
+            if (!event.defaultPrevented) {
+              this.emit("ev-change");
+            }
+          });
+        }
+      }
+      if (event.key === "Escape" && this.isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.hide();
+      }
+    };
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.timeInput.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    return this.timeInput.validationMessage;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentClick = this.handleDocumentClick.bind(this);
+    this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+    this.updateInputFromValue();
+  }
+  handleTimeInput() {
+    this.value = this.timeInput.value;
+    this.updatePickerFromInput();
+    this.emit("ev-input");
+  }
+  handleTimeChange() {
+    this.value = this.timeInput.value;
+    this.updatePickerFromInput();
+    this.emit("ev-change");
+  }
+  handleClockChange() {
+    if (this.clock.value) {
+      this.value = this.clock.value;
+      this.updateInputFromValue();
+      this.emit("ev-change");
+    }
+  }
+  handleClearClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.value !== "") {
+      this.value = "";
+      this.updateInputFromValue();
+      this.updatePickerFromValue();
+      this.emit("ev-clear");
+      this.emit("ev-input");
+      this.emit("ev-change");
+    }
+    void this.timeInput.focus();
+  }
+  handleTriggerClick(event) {
+    event.stopPropagation();
+    if (this.disabled || this.readonly) return;
+    if (this.isOpen) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  updateInputFromValue() {
+    if (this.timeInput) this.timeInput.value = this.value;
+  }
+  updatePickerFromValue() {
+    if (this.clock) this.clock.value = this.value;
+  }
+  updatePickerFromInput() {
+    var _a;
+    if (this.clock) this.clock.value = ((_a = this.timeInput) == null ? void 0 : _a.value) || "";
+  }
+  /** Shows the dropdown. */
+  show() {
+    if (this.isOpen || this.disabled || this.readonly) return;
+    this.isOpen = true;
+    this.updatePickerFromValue();
+    this.dropdown.show();
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+  /** Hides the dropdown. */
+  hide() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.dropdown.hide();
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+  /** Sets focus on the time input. */
+  focus(options) {
+    this.timeInput.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.timeInput.blur();
+  }
+  /** Checks for validity but does not show a validation message. */
+  checkValidity() {
+    return this.timeInput.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if invalid. */
+  reportValidity() {
+    return this.timeInput.reportValidity();
+  }
+  /** Sets a custom validation message. */
+  setCustomValidity(message) {
+    this.timeInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  handleValueChange() {
+    this.updateInputFromValue();
+  }
+  handleDisabledChange() {
+    this.formControlController.setValidity(this.disabled ? true : this.checkValidity());
+  }
+  render() {
+    return html`
+      <lynk-form-field
+        .size=${this.size}
+        .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}
+        .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>` : ""}
+        <lynk-dropdown
+          class="time-picker__dropdown"
+          part="dropdown"
+          ?disabled=${this.disabled || this.readonly}
+          .open=${this.isOpen}
+          placement="bottom-start"
+          distance="2"
+        >
+          <div
+            slot="trigger"
+            part="input-group"
+            role="group"
+            class=${classMap({
+      "time-picker__input-group": true,
+      "time-picker__input-group--small": this.size === "small",
+      "time-picker__input-group--medium": this.size === "medium",
+      "time-picker__input-group--large": this.size === "large",
+      "time-picker__input-group--disabled": this.disabled,
+      "time-picker__input-group--readonly": this.readonly
+    })}
+          >
+            ${this.placeholder && !this.value ? html`<div part="placeholder" class="time-picker__placeholder">${this.placeholder}</div>` : ""}
+            <input
+              part="time-input"
+              class="time-picker__time-input"
+              type="time"
+              role="combobox"
+              step=${this.seconds ? "1" : "any"}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              ?required=${this.required}
+              ?hidden=${this.placeholder && !this.value}
+              .value=${live(this.value)}
+              aria-label=${this.label || "Time"}
+              aria-haspopup="dialog"
+              aria-expanded=${this.isOpen ? "true" : "false"}
+              @input=${this.handleTimeInput}
+              @change=${this.handleTimeChange}
+            />
+            ${this.clearable && !this.disabled && !this.readonly && this.value ? html`
+                  <button
+                    part="clear-button"
+                    class="time-picker__clear"
+                    type="button"
+                    aria-label=${this.localize.term("clearEntry") || "Clear entry"}
+                    @click=${this.handleClearClick}
+                    tabindex="-1"
+                  >
+                    <slot name="clear-icon">
+                      <lynk-icon name="x-circle-fill" library="system"></lynk-icon>
+                    </slot>
+                  </button>
+                ` : ""}
+
+            <lynk-icon-button
+              part="trigger"
+              class="time-picker__trigger"
+              name="clock"
+              library="system"
+              label="Open clock"
+              ?disabled=${this.disabled}
+              @click=${this.handleTriggerClick}
+            ></lynk-icon-button>
+          </div>
+
+          <div class="time-picker__panel" id="clock-panel">
+            <lynk-clock
+              part="clock"
+              class="time-picker__clock"
+              .format=${this.format}
+              ?seconds=${this.seconds}
+              .minuteInterval=${this.minuteInterval}
+              @ev-change=${this.handleClockChange}
+            ></lynk-clock>
+          </div>
+        </lynk-dropdown>
+      </lynk-form-field>
+    `;
+  }
+};
+LynkTimePicker.styles = [component_styles_default, time_picker_styles_default];
+LynkTimePicker.dependencies = {
+  "lynk-clock": LynkClock,
+  "lynk-dropdown": LynkDropdown,
+  "lynk-form-field": LynkFormField,
+  "lynk-icon": LynkIcon,
+  "lynk-icon-button": LynkIconButton
+};
+__decorateClass([
+  query(".time-picker__dropdown")
+], LynkTimePicker.prototype, "dropdown", 2);
+__decorateClass([
+  query(".time-picker__clock")
+], LynkTimePicker.prototype, "clock", 2);
+__decorateClass([
+  query(".time-picker__time-input")
+], LynkTimePicker.prototype, "timeInput", 2);
+__decorateClass([
+  state()
+], LynkTimePicker.prototype, "isOpen", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "name", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], LynkTimePicker.prototype, "defaultValue", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "label", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], LynkTimePicker.prototype, "helpText", 2);
+__decorateClass([
+  property({ attribute: "help-tip" })
+], LynkTimePicker.prototype, "helpTip", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "dirty", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkTimePicker.prototype, "inline", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkTimePicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkTimePicker.prototype, "seconds", 2);
+__decorateClass([
+  property()
+], LynkTimePicker.prototype, "format", 2);
+__decorateClass([
+  property({ type: Number, attribute: "minute-interval" })
+], LynkTimePicker.prototype, "minuteInterval", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkTimePicker.prototype, "clearable", 2);
+__decorateClass([
+  watch("value")
+], LynkTimePicker.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], LynkTimePicker.prototype, "handleDisabledChange", 1);
+
+export {
+  LynkTimePicker
+};

package/dist/chunks/chunk.FZLIIQGF.js

@@ -0,0 +1,11 @@
+import {
+  LynkRadioGroup
+} from "./chunk.METUFMZV.js";
+
+// src/components/radio-group/radio-group.ts
+var radio_group_default = LynkRadioGroup;
+LynkRadioGroup.define("lynk-radio-group");
+
+export {
+  radio_group_default
+};

package/dist/chunks/chunk.G2RJMCVD.js

@@ -0,0 +1,25 @@
+import {
+  LynkInclude
+} from "./chunk.ABDIN64K.js";
+
+// src/react/include/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-include";
+LynkInclude.define("lynk-include");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkInclude,
+  react: React,
+  events: {
+    EvLoad: "ev-load",
+    EvError: "ev-error"
+  },
+  displayName: "LynkInclude"
+});
+var include_default = reactWrapper;
+
+export {
+  include_default
+};

package/dist/chunks/chunk.G3DLTPQK.js

@@ -0,0 +1,24 @@
+import {
+  LynkAvatar
+} from "./chunk.WNVX5G5P.js";
+
+// src/react/avatar/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-avatar";
+LynkAvatar.define("lynk-avatar");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkAvatar,
+  react: React,
+  events: {
+    EvError: "ev-error"
+  },
+  displayName: "LynkAvatar"
+});
+var avatar_default = reactWrapper;
+
+export {
+  avatar_default
+};

package/dist/chunks/chunk.GA7FQZYZ.js

@@ -0,0 +1,44 @@
+import {
+  split_styles_default
+} from "./chunk.LGD72AB6.js";
+import {
+  LynkElement
+} from "./chunk.DEGSHN2L.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/split/split.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkSplit = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.column = false;
+    this.reverse = false;
+    this.gap = "var(--lynk-spacing-small)";
+  }
+  render() {
+    return html` <slot part="base" class="split" style="--gap: ${this.gap};"></slot> `;
+  }
+};
+LynkSplit.styles = [component_styles_default, split_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkSplit.prototype, "column", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkSplit.prototype, "reverse", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkSplit.prototype, "align", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LynkSplit.prototype, "gap", 2);
+
+export {
+  LynkSplit
+};

package/dist/chunks/chunk.GCDC3SCU.js

@@ -0,0 +1,122 @@
+import {
+  card_styles_default
+} from "./chunk.CGCCBBAZ.js";
+import {
+  HasSlotController
+} from "./chunk.OW5NIGGX.js";
+import {
+  LynkElement
+} from "./chunk.DEGSHN2L.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/card/card.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkCard = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(
+      this,
+      "[default]",
+      "footer",
+      "header",
+      "image",
+      "image-top-start",
+      "image-top-end",
+      "image-bottom-start",
+      "image-bottom-end"
+    );
+    this.appearance = "outlined";
+    this.stealth = false;
+    this.size = "inherit";
+    this.interactive = false;
+    this.active = false;
+    this.pulse = false;
+    this.aspectRatio = "16:9";
+  }
+  render() {
+    const hasAnyImageSlot = this.hasSlotController.test("image") || this.hasSlotController.test("image-top-start") || this.hasSlotController.test("image-top-end") || this.hasSlotController.test("image-bottom-start") || this.hasSlotController.test("image-bottom-end");
+    const hasAnyContentSlot = this.hasSlotController.test("header") || this.hasSlotController.test("[default]") || this.hasSlotController.test("footer");
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      card: true,
+      // Modifiers
+      "card--interactive": this.interactive,
+      "card--active": this.active,
+      "card--stealth": this.stealth,
+      "card--pulse": this.pulse,
+      // States
+      "card--primary": this.state === "primary",
+      "card--accent": this.state === "accent",
+      "card--danger": this.state === "danger",
+      "card--success": this.state === "success",
+      "card--neutral": this.state === "neutral",
+      "card--warning": this.state === "warning",
+      "card--info": this.state === "info",
+      // Sizes
+      "card--small": this.size === "small",
+      "card--medium": this.size === "medium",
+      "card--large": this.size === "large",
+      // Slots
+      "card--has-footer": this.hasSlotController.test("footer"),
+      "card--has-image": this.hasSlotController.test("image"),
+      "card--has-header": this.hasSlotController.test("header"),
+      "card--image-only": hasAnyImageSlot && !hasAnyContentSlot
+    })}
+      >
+        ${hasAnyImageSlot ? html`
+              <div part="image-block" class="card__image-block ${`aspect--${this.aspectRatio.replace(/[:.]/g, "-")}`}">
+                <div part="image" class="card__image">
+                  <slot name="image"></slot>
+                </div>
+
+                <slot name="image-top-start" part="image-top-start" class="card__image-top-start"></slot>
+                <slot name="image-top-end" part="image-top-end" class="card__image-top-end"></slot>
+                <slot name="image-bottom-start" part="image-bottom-start" class="card__image-bottom-start"></slot>
+                <slot name="image-bottom-end" part="image-bottom-end" class="card__image-bottom-end"></slot>
+              </div>
+            ` : ""}
+        ${this.hasSlotController.test("header") ? html`<slot name="header" part="header" class="card__header"></slot>` : ""}
+        ${this.hasSlotController.test("[default]") ? html`<slot part="body" class="card__body"></slot>` : ""}
+        ${this.hasSlotController.test("footer") ? html`<slot name="footer" part="footer" class="card__footer"></slot>` : ""}
+      </div>
+    `;
+  }
+};
+LynkCard.styles = [component_styles_default, card_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], LynkCard.prototype, "appearance", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkCard.prototype, "stealth", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkCard.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkCard.prototype, "state", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkCard.prototype, "interactive", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkCard.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkCard.prototype, "pulse", 2);
+__decorateClass([
+  property({ reflect: true, attribute: "aspect-ratio" })
+], LynkCard.prototype, "aspectRatio", 2);
+
+export {
+  LynkCard
+};

package/dist/chunks/chunk.GEK2FKDF.js

@@ -0,0 +1,33 @@
+import {
+  LynkSelect
+} from "./chunk.EJY6CXGG.js";
+
+// src/react/select/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-select";
+LynkSelect.define("lynk-select");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkSelect,
+  react: React,
+  events: {
+    EvChange: "ev-change",
+    EvClear: "ev-clear",
+    EvInput: "ev-input",
+    EvFocus: "ev-focus",
+    EvBlur: "ev-blur",
+    EvShow: "ev-show",
+    EvAfterShow: "ev-after-show",
+    EvHide: "ev-hide",
+    EvAfterHide: "ev-after-hide",
+    EvInvalid: "ev-invalid"
+  },
+  displayName: "LynkSelect"
+});
+var select_default = reactWrapper;
+
+export {
+  select_default
+};

package/dist/chunks/chunk.GGLUMECQ.js

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