@kdcloudjs/shoelace 1.0.14 → 1.0.15

package/dist/chunks/chunk.OYAHRNWM.js

@@ -0,0 +1,134 @@
+import {
+  radio_button_styles_default
+} from "./chunk.BEKUM4BO.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.E2NGL5EB.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/radio-button/radio-button.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var SlRadioButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "medium";
+    this.pill = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+  }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    this.checked = true;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    return html`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? " button--checked" : ""}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${classMap({
+      button: true,
+      "button--default": true,
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--checked": this.checked,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--outline": true,
+      "button--pill": this.pill,
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${ifDefined(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+  }
+};
+SlRadioButton.styles = [component_styles_default, radio_button_styles_default];
+__decorateClass([
+  query(".button")
+], SlRadioButton.prototype, "input", 2);
+__decorateClass([
+  query(".hidden-input")
+], SlRadioButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], SlRadioButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "checked", 2);
+__decorateClass([
+  property()
+], SlRadioButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlRadioButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "pill", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlRadioButton.prototype, "handleDisabledChange", 1);
+
+export {
+  SlRadioButton
+};

package/dist/chunks/chunk.P7D33HVC.js

@@ -0,0 +1,24 @@
+import {
+  SlNavItem
+} from "./chunk.XI5JNAEA.js";
+
+// src/react/nav-item/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-nav-item";
+SlNavItem.define("sl-nav-item");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlNavItem,
+  react: React,
+  events: {
+    onSlNavSelect: "sl-nav-select"
+  },
+  displayName: "SlNavItem"
+});
+var nav_item_default = reactWrapper;
+
+export {
+  nav_item_default
+};

package/dist/chunks/chunk.PHD6AXZP.js

@@ -0,0 +1,11 @@
+import {
+  SlSelect
+} from "./chunk.VBMSBV3R.js";
+
+// src/components/select/select.ts
+var select_default = SlSelect;
+SlSelect.define("sl-select");
+
+export {
+  select_default
+};

package/dist/chunks/chunk.PKC5YR4N.js

@@ -0,0 +1,338 @@
+import {
+  PickerBase
+} from "./chunk.O76HMJ6J.js";
+import {
+  SlDatePanel
+} from "./chunk.22P3FPSW.js";
+import {
+  SlCalendar,
+  formatDatetime,
+  parseDatetime
+} from "./chunk.XSLEJNEA.js";
+import {
+  SlDrawer
+} from "./chunk.XLICAH5B.js";
+import {
+  SlInput
+} from "./chunk.3KG635UU.js";
+import {
+  SlPopup
+} from "./chunk.3OWNXDDB.js";
+import {
+  SlButton
+} from "./chunk.CU3TNPSN.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/datepicker/datepicker.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+
+// src/components/datepicker/datepicker.style.ts
+import { css } from "lit";
+var datepicker_style_default = css`
+  :host {
+    display: inline-block;
+  }
+
+  .datepicker__popup::part(popup) {
+    z-index: var(--sl-z-index-dropdown);
+  }
+
+  .datepicker__calendar {
+    display: block;
+  }
+`;
+
+// src/components/datepicker/datepicker.component.ts
+var SlDatepicker = class extends PickerBase {
+  constructor() {
+    super(...arguments);
+    this.type = "date";
+    this.min = "0001-01-01";
+    this.max = "9999-12-31";
+  }
+  handleOpenChange() {
+    if (this.open) {
+      if (this.calendar) {
+        this.calendar.resetView();
+      }
+    }
+    if (!this.open) {
+      this.handleValueChange();
+    }
+  }
+  parseValue(value) {
+    return parseDatetime(value);
+  }
+  formatValue(date) {
+    return formatDatetime(date, this.type);
+  }
+  isValidFormat(value) {
+    if (this.type === "date") {
+      return /^\d{4}[-./]\d{2}[-./]\d{2}$/.test(value);
+    }
+    if (this.type === "datetime") {
+      return /^\d{4}[-./]\d{2}[-./]\d{2}\s+\d{2}:\d{2}:\d{2}$/.test(value);
+    }
+    return true;
+  }
+  isValidValue(date) {
+    let isValid = !!date;
+    if (date) {
+      const minDate = this.parseValue(String(this.min));
+      const maxDate = this.parseValue(String(this.max));
+      if (minDate && date < minDate) {
+        isValid = false;
+      }
+      if (maxDate && date > maxDate) {
+        isValid = false;
+      }
+    }
+    return isValid;
+  }
+  getInputPattern() {
+    return this.pattern;
+  }
+  getInputSuffixIconName() {
+    return "calendar4";
+  }
+  shouldRevertOnBlur() {
+    return this.type === "datetime";
+  }
+  async handleInputInput(event) {
+    event.stopPropagation();
+    const target = event.target;
+    const value = target.value;
+    const isValidFormat = this.isValidFormat(value);
+    if (isValidFormat && this.parseValue(value) || !this.open && value === "") {
+      this.updateValue(value, { emitInput: true });
+    }
+    await this.updateComplete;
+    if (!this.open && value !== "") {
+      this.open = true;
+    }
+  }
+  handleDateSelect(event) {
+    const selectedDate = event.detail.date;
+    const formattedDate = formatDatetime(selectedDate, this.type);
+    this.updateValue(formattedDate, { emitInput: true, emitChange: true });
+    if (this.input) {
+      this.input.focus();
+    }
+    if (!this.isMobile) {
+      this.open = false;
+    }
+  }
+  handleDateChange(event) {
+    const selectedDate = event.detail.date;
+    const formattedDate = formatDatetime(selectedDate, this.type);
+    this.updateValue(formattedDate, { emitInput: true, emitChange: false });
+  }
+  blur() {
+    if (this.isMobile && this.open) {
+      return;
+    }
+    super.blur();
+  }
+  handleInputKeyDown(event) {
+    super.handleInputKeyDown(event);
+    if (event.key === "Enter") {
+      const parsedDate = this.parseValue(this.value);
+      const isValid = this.isValidValue(parsedDate);
+      if (!isValid) {
+        return;
+      }
+      if (this.open && this.calendar) {
+        event.stopPropagation();
+        this.calendar.handleKeyDown(event);
+        return;
+      }
+      if (parsedDate) {
+        const formattedDate = this.formatValue(parsedDate);
+        this.updateValue(formattedDate, { emitChange: true });
+        this.open = false;
+      }
+    }
+  }
+  handleValueChange() {
+    const validDate = this.parseValue(this.value);
+    const isValid = this.isValidValue(validDate);
+    if (!this.open || this.type === "date" && !this.isMobile) {
+      if (validDate && isValid) {
+        const formattedDate = this.formatValue(validDate);
+        this.lastValidValue = formattedDate;
+      } else if (this.value === "") {
+        this.lastValidValue = "";
+      }
+    }
+    if (!this.value || !this.calendar || !isValid || !this.input) {
+      return;
+    }
+    this.formControlController.updateValidity();
+    if (this.valueChangeDebounceTimer) {
+      window.clearTimeout(this.valueChangeDebounceTimer);
+    }
+    this.valueChangeDebounceTimer = window.setTimeout(() => {
+      const parsedDate = this.parseValue(this.value);
+      if (parsedDate) {
+        this.calendar.value = this.value;
+      }
+      this.valueChangeDebounceTimer = void 0;
+    }, 300);
+  }
+  renderCalendar() {
+    return html`
+      <sl-calendar
+        part="calendar"
+        exportparts="
+          base:calendar-base,
+          header:calendar-header,
+          nav-button:calendar-nav-button,
+          title:calendar-title,
+          title-year:calendar-title-year,
+          title-month:calendar-title-month,
+          body:calendar-body,
+          date-panel:calendar-date-panel,
+          day-header:calendar-day-header,
+          day:calendar-day,
+          day-footer:calendar-day-footer,
+          month-grid:calendar-month-grid,
+          month-item:calendar-month-item,
+          year-grid:calendar-year-grid,
+          year-item:calendar-year-item,
+          time-footer:calendar-time-footer,
+          time-panel-base,
+          time-panel-header,
+          time-panel-margin-cell-first,
+          time-panel-margin-cell,
+          time-panel-columns,
+          time-panel-column,
+          time-panel-hour,
+          time-panel-minute,
+          time-panel-second,
+          time-panel-item,
+          time-panel-footer
+        "
+        class="datepicker__calendar"
+        .value=${this.parseValue(this.value) ? this.value : this.lastValidValue}
+        type=${this.type}
+        min=${this.min}
+        max=${this.max}
+        @sl-date-select=${this.handleDateSelect}
+        @sl-date-change=${this.handleDateChange}
+        @click=${(event) => event.stopPropagation()}
+      ></sl-calendar>
+    `;
+  }
+  renderPopup() {
+    return html`
+      <sl-popup
+        part="popup"
+        class="datepicker__popup"
+        ?active=${this.open}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        placement="bottom-start"
+        auto-size="vertical"
+        auto-size-padding="10"
+      >
+        ${this.renderInput("anchor")} ${this.renderCalendar()}
+      </sl-popup>
+    `;
+  }
+  render() {
+    if (this.isMobile) {
+      return html`
+        ${this.renderInput()}
+        <sl-date-panel
+          exportparts="
+            calendar-base,
+            calendar-header,
+            calendar-nav-button,
+            calendar-title,
+            calendar-title-year,
+            calendar-title-month,
+            calendar-body,
+            calendar-date-panel,
+            calendar-day-header,
+            calendar-day,
+            calendar-day-footer,
+            calendar-month-grid,
+            calendar-month-item,
+            calendar-year-grid,
+            calendar-year-item,
+            calendar-time-footer,
+            time-panel-base,
+            time-panel-header,
+            time-panel-margin-cell-first,
+            time-panel-margin-cell,
+            time-panel-columns,
+            time-panel-column,
+            time-panel-hour,
+            time-panel-minute,
+            time-panel-second,
+            time-panel-item,
+            time-panel-footer
+          "
+          .value=${this.value}
+          .open=${this.open}
+          .min=${this.min}
+          .max=${this.max}
+          .type=${this.type}
+          @sl-date-select=${this.handleDateSelect}
+          @sl-date-change=${this.handleDateChange}
+          @sl-confirm=${this.handleMobileConfirm}
+          @sl-cancel=${this.handleMobileCancel}
+          @sl-clear=${this.handleMobileClear}
+        ></sl-date-panel>
+      `;
+    }
+    return this.renderPopup();
+  }
+};
+SlDatepicker.styles = [component_styles_default, datepicker_style_default];
+SlDatepicker.dependencies = {
+  "sl-button": SlButton,
+  "sl-calendar": SlCalendar,
+  "sl-date-panel": SlDatePanel,
+  "sl-drawer": SlDrawer,
+  "sl-popup": SlPopup,
+  "sl-input": SlInput
+};
+__decorateClass([
+  query("sl-calendar")
+], SlDatepicker.prototype, "calendar", 2);
+__decorateClass([
+  state()
+], SlDatepicker.prototype, "valueChangeDebounceTimer", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlDatepicker.prototype, "type", 2);
+__decorateClass([
+  property()
+], SlDatepicker.prototype, "pattern", 2);
+__decorateClass([
+  property()
+], SlDatepicker.prototype, "min", 2);
+__decorateClass([
+  property()
+], SlDatepicker.prototype, "max", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDatepicker.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("value")
+], SlDatepicker.prototype, "handleValueChange", 1);
+
+export {
+  SlDatepicker
+};