@kdcloudjs/shoelace 1.0.0 → 1.0.1

package/dist/chunks/chunk.23ZAVB4X.js

@@ -1,388 +0,0 @@
-import {
-  SlCalendar,
-  formatDatetime,
-  parseDatetime
-} from "./chunk.LEQAHGT3.js";
-import {
-  SlInput
-} from "./chunk.MT7VKMYW.js";
-import {
-  SlPopup
-} from "./chunk.YHRMKFU2.js";
-import {
-  defaultValue
-} from "./chunk.GI7VDIWX.js";
-import {
-  FormControlController
-} from "./chunk.3RPBFEDE.js";
-import {
-  HasSlotController
-} from "./chunk.NYIIDP5N.js";
-import {
-  watch
-} from "./chunk.GMYPQTFK.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.YFUR5BLL.js";
-import {
-  __decorateClass
-} from "./chunk.KAW7D32O.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 ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.formControlController = new FormControlController(this);
-    this.hasSlotController = new HasSlotController(
-      this,
-      "help-text",
-      "label",
-      "prefix",
-      "suffix",
-      "clear-icon"
-    );
-    this.lastValidValue = "";
-    this.open = false;
-    this.value = "";
-    this.defaultValue = "";
-    this.name = "";
-    this.type = "date";
-    this.placeholder = "";
-    this.label = "";
-    this.disabled = false;
-    this.readonly = false;
-    this.clearable = true;
-    this.size = "medium";
-    this.hoist = false;
-    this.filled = false;
-    this.pill = false;
-    this.helpText = "";
-    this.form = "";
-    this.required = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.value && this.defaultValue) {
-      this.value = this.defaultValue;
-    }
-    if (this.parseValue(this.value)) {
-      this.lastValidValue = this.value;
-    }
-  }
-  handleOpenChange() {
-    if (this.open && this.calendar) {
-      this.calendar.resetView();
-    }
-    if (!this.open) {
-      this.handleValueChange();
-    }
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-  /** Sets a custom validation message. The value provided will be shown to the user when the form is submitted. */
-  setCustomValidity(message) {
-    this.input.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** Gets the validity state object */
-  get validity() {
-    return this.input.validity;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.input.validationMessage;
-  }
-  updateValue(value, options) {
-    const oldValue = this.value;
-    this.value = value;
-    if (value !== oldValue) {
-      if (options == null ? void 0 : options.emitInput) {
-        this.emit("sl-input");
-      }
-      if (options == null ? void 0 : options.emitChange) {
-        this.emit("sl-change");
-      }
-    }
-  }
-  parseValue(value) {
-    return parseDatetime(value);
-  }
-  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();
-    }
-    this.open = false;
-  }
-  handleDateChange(event) {
-    const selectedDate = event.detail.date;
-    const formattedDate = formatDatetime(selectedDate, this.type);
-    this.updateValue(formattedDate, { emitInput: true, emitChange: false });
-  }
-  handleTriggerMouseDown(event) {
-    const path = event.composedPath();
-    const isIconButton = path.some((el) => el instanceof Element && el.tagName.toLowerCase() === "sl-icon-button");
-    if (this.disabled || isIconButton) {
-      return;
-    }
-    if (this.input) {
-      this.input.focus({ preventScroll: true });
-    }
-    if (!this.open) {
-      this.open = !this.open;
-    }
-  }
-  handleInputChange(event) {
-    event.stopPropagation();
-    const target = event.target;
-    this.updateValue(target.value, { emitInput: true, emitChange: true });
-  }
-  handleInputInput(event) {
-    event.stopPropagation();
-    const target = event.target;
-    this.updateValue(target.value, { emitInput: true });
-  }
-  handleInputKeyDown(event) {
-    if (event.key === "Escape" && this.open) {
-      event.stopPropagation();
-      this.open = false;
-    }
-    if (event.key === "Enter") {
-      if (this.open && this.calendar) {
-        event.stopPropagation();
-        this.calendar.handleKeyDown(event);
-        return;
-      }
-      const parsedDate = this.parseValue(this.value);
-      if (parsedDate) {
-        const formattedDate = formatDatetime(parsedDate, this.type);
-        this.updateValue(formattedDate, { emitChange: true });
-        this.open = false;
-      }
-    }
-  }
-  handleInputBlur() {
-    this.open = false;
-    if (this.type === "datetime") {
-      this.updateValue(this.lastValidValue, { emitInput: true, emitChange: true });
-      return;
-    }
-    const parsedDate = this.parseValue(this.value);
-    if (parsedDate) {
-      const formattedDate = formatDatetime(parsedDate, this.type);
-      this.updateValue(formattedDate, { emitChange: true });
-    } else {
-      if (this.value === "") {
-        this.lastValidValue = "";
-      } else {
-        this.updateValue(this.lastValidValue, { emitChange: true });
-      }
-    }
-  }
-  handleValueChange() {
-    const validDate = this.parseValue(this.value);
-    if (!this.open || this.type === "date") {
-      if (validDate) {
-        const formattedDate = formatDatetime(validDate, this.type);
-        this.lastValidValue = formattedDate;
-      } else if (this.value === "") {
-        this.lastValidValue = "";
-      }
-    }
-    if (!this.value || !this.calendar) {
-      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);
-  }
-  render() {
-    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"
-      >
-        <sl-input
-          part="input"
-          slot="anchor"
-          size=${this.size}
-          .value=${this.value}
-          default-value=${this.defaultValue}
-          label=${this.label}
-          placeholder=${this.placeholder}
-          help-text=${this.helpText}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          ?clearable=${this.clearable}
-          ?filled=${this.filled}
-          ?pill=${this.pill}
-          ?required=${this.required}
-          ?autofocus=${this.autofocus}
-          pattern=${this.pattern}
-          min=${this.min}
-          max=${this.max}
-          type="text"
-          autocomplete="off"
-          @mousedown=${this.handleTriggerMouseDown}
-          @sl-change=${this.handleInputChange}
-          @sl-blur=${this.handleInputBlur}
-          @sl-input=${this.handleInputInput}
-          @keydown=${this.handleInputKeyDown}
-        >
-          ${this.hasSlotController.test("label") ? html`<slot name="label" slot="label"></slot>` : ""}
-          ${this.hasSlotController.test("prefix") ? html`<slot name="prefix" slot="prefix"></slot>` : ""}
-          ${this.hasSlotController.test("suffix") ? html`<slot name="suffix" slot="suffix"></slot>` : html`<sl-icon slot="suffix" name="calendar-date"></sl-icon>`}
-          ${this.hasSlotController.test("clear-icon") ? html`<slot name="clear-icon" slot="clear-icon"></slot>` : ""}
-          ${this.hasSlotController.test("help-text") ? html`<slot name="help-text" slot="help-text"></slot>` : ""}
-        </sl-input>
-        <sl-calendar
-          part="calendar"
-          class="datepicker__calendar"
-          .value=${this.value}
-          type=${this.type}
-          @sl-date-select=${this.handleDateSelect}
-          @sl-date-change=${this.handleDateChange}
-          @click=${(event) => event.stopPropagation()}
-        ></sl-calendar>
-      </sl-popup>
-    `;
-  }
-};
-SlDatepicker.styles = [component_styles_default, datepicker_style_default];
-SlDatepicker.dependencies = {
-  "sl-calendar": SlCalendar,
-  "sl-popup": SlPopup,
-  "sl-input": SlInput
-};
-__decorateClass([
-  query("sl-input")
-], SlDatepicker.prototype, "input", 2);
-__decorateClass([
-  query("sl-calendar")
-], SlDatepicker.prototype, "calendar", 2);
-__decorateClass([
-  state()
-], SlDatepicker.prototype, "open", 2);
-__decorateClass([
-  state()
-], SlDatepicker.prototype, "valueChangeDebounceTimer", 2);
-__decorateClass([
-  property()
-], SlDatepicker.prototype, "value", 2);
-__decorateClass([
-  defaultValue()
-], SlDatepicker.prototype, "defaultValue", 2);
-__decorateClass([
-  property()
-], SlDatepicker.prototype, "name", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlDatepicker.prototype, "type", 2);
-__decorateClass([
-  property()
-], SlDatepicker.prototype, "placeholder", 2);
-__decorateClass([
-  property()
-], SlDatepicker.prototype, "label", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlDatepicker.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlDatepicker.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlDatepicker.prototype, "clearable", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlDatepicker.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlDatepicker.prototype, "hoist", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlDatepicker.prototype, "filled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlDatepicker.prototype, "pill", 2);
-__decorateClass([
-  property({ attribute: "help-text" })
-], SlDatepicker.prototype, "helpText", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlDatepicker.prototype, "form", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlDatepicker.prototype, "required", 2);
-__decorateClass([
-  property()
-], SlDatepicker.prototype, "pattern", 2);
-__decorateClass([
-  property()
-], SlDatepicker.prototype, "min", 2);
-__decorateClass([
-  property()
-], SlDatepicker.prototype, "max", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlDatepicker.prototype, "autofocus", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], SlDatepicker.prototype, "handleOpenChange", 1);
-__decorateClass([
-  watch("value")
-], SlDatepicker.prototype, "handleValueChange", 1);
-
-export {
-  SlDatepicker
-};

package/dist/chunks/chunk.2FMGJK4E.js

@@ -1,21 +0,0 @@
-import {
-  SlTabPanel
-} from "./chunk.IGTQGR6B.js";
-
-// src/react/tab-panel/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "sl-tab-panel";
-SlTabPanel.define("sl-tab-panel");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlTabPanel,
-  react: React,
-  events: {},
-  displayName: "SlTabPanel"
-});
-var tab_panel_default = reactWrapper;
-
-export {
-  tab_panel_default
-};

package/dist/chunks/chunk.2MZ7OOZO.js

@@ -1,11 +0,0 @@
-import {
-  SlTreeItem
-} from "./chunk.IJKSR74B.js";
-
-// src/components/tree-item/tree-item.ts
-var tree_item_default = SlTreeItem;
-SlTreeItem.define("sl-tree-item");
-
-export {
-  tree_item_default
-};

package/dist/chunks/chunk.2RFPHSI5.js

@@ -1,11 +0,0 @@
-import {
-  SlInclude
-} from "./chunk.URUWFFVY.js";
-
-// src/components/include/include.ts
-var include_default = SlInclude;
-SlInclude.define("sl-include");
-
-export {
-  include_default
-};

package/dist/chunks/chunk.2ZVVWOR6.js

@@ -1,91 +0,0 @@
-import {
-  button_group_styles_default
-} from "./chunk.2OUC42YY.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.YFUR5BLL.js";
-import {
-  __decorateClass
-} from "./chunk.KAW7D32O.js";
-
-// src/components/button-group/button-group.component.ts
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-var SlButtonGroup = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.disableRole = false;
-    this.label = "";
-  }
-  handleFocus(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--focus", true);
-  }
-  handleBlur(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--focus", false);
-  }
-  handleMouseOver(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--hover", true);
-  }
-  handleMouseOut(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--hover", false);
-  }
-  handleSlotChange() {
-    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
-    slottedElements.forEach((el) => {
-      const index = slottedElements.indexOf(el);
-      const button = findButton(el);
-      if (button) {
-        button.toggleAttribute("data-sl-button-group__button", true);
-        button.toggleAttribute("data-sl-button-group__button--first", index === 0);
-        button.toggleAttribute("data-sl-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.toggleAttribute("data-sl-button-group__button--last", index === slottedElements.length - 1);
-        button.toggleAttribute(
-          "data-sl-button-group__button--radio",
-          button.tagName.toLowerCase() === "sl-radio-button"
-        );
-      }
-    });
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class="button-group"
-        role="${this.disableRole ? "presentation" : "group"}"
-        aria-label=${this.label}
-        @focusout=${this.handleBlur}
-        @focusin=${this.handleFocus}
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-  }
-};
-SlButtonGroup.styles = [component_styles_default, button_group_styles_default];
-__decorateClass([
-  query("slot")
-], SlButtonGroup.prototype, "defaultSlot", 2);
-__decorateClass([
-  state()
-], SlButtonGroup.prototype, "disableRole", 2);
-__decorateClass([
-  property()
-], SlButtonGroup.prototype, "label", 2);
-function findButton(el) {
-  var _a;
-  const selector = "sl-button, sl-radio-button";
-  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
-}
-
-export {
-  SlButtonGroup
-};

package/dist/chunks/chunk.37BW2NNU.js

@@ -1,11 +0,0 @@
-import {
-  SlResizeObserver
-} from "./chunk.6X2IWQFG.js";
-
-// src/components/resize-observer/resize-observer.ts
-var resize_observer_default = SlResizeObserver;
-SlResizeObserver.define("sl-resize-observer");
-
-export {
-  resize_observer_default
-};

package/dist/chunks/chunk.3AUHAYQF.js

@@ -1,11 +0,0 @@
-import {
-  SlVisuallyHidden
-} from "./chunk.DFNJ6YO5.js";
-
-// src/components/visually-hidden/visually-hidden.ts
-var visually_hidden_default = SlVisuallyHidden;
-SlVisuallyHidden.define("sl-visually-hidden");
-
-export {
-  visually_hidden_default
-};

package/dist/chunks/chunk.3FSCZMKR.js

@@ -1,11 +0,0 @@
-import {
-  SlAlert
-} from "./chunk.5P75LPWV.js";
-
-// src/components/alert/alert.ts
-var alert_default = SlAlert;
-SlAlert.define("sl-alert");
-
-export {
-  alert_default
-};

package/dist/chunks/chunk.3N56WNRQ.js

@@ -1,33 +0,0 @@
-import {
-  SlSelect
-} from "./chunk.5SW72M24.js";
-
-// src/react/select/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-select";
-SlSelect.define("sl-select");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlSelect,
-  react: React,
-  events: {
-    onSlChange: "sl-change",
-    onSlClear: "sl-clear",
-    onSlInput: "sl-input",
-    onSlFocus: "sl-focus",
-    onSlBlur: "sl-blur",
-    onSlShow: "sl-show",
-    onSlAfterShow: "sl-after-show",
-    onSlHide: "sl-hide",
-    onSlAfterHide: "sl-after-hide",
-    onSlInvalid: "sl-invalid"
-  },
-  displayName: "SlSelect"
-});
-var select_default = reactWrapper;
-
-export {
-  select_default
-};

package/dist/chunks/chunk.3PLRXNOC.js

@@ -1,21 +0,0 @@
-import {
-  SlDivider
-} from "./chunk.H27LJJR5.js";
-
-// src/react/divider/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "sl-divider";
-SlDivider.define("sl-divider");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlDivider,
-  react: React,
-  events: {},
-  displayName: "SlDivider"
-});
-var divider_default = reactWrapper;
-
-export {
-  divider_default
-};

package/dist/chunks/chunk.425FPMNI.js

@@ -1,21 +0,0 @@
-import {
-  SlProgressBar
-} from "./chunk.O37GRY54.js";
-
-// src/react/progress-bar/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "sl-progress-bar";
-SlProgressBar.define("sl-progress-bar");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlProgressBar,
-  react: React,
-  events: {},
-  displayName: "SlProgressBar"
-});
-var progress_bar_default = reactWrapper;
-
-export {
-  progress_bar_default
-};

package/dist/chunks/chunk.44FLCGTL.js

@@ -1,11 +0,0 @@
-import {
-  SlCheckbox
-} from "./chunk.KBYTZHEC.js";
-
-// src/components/checkbox/checkbox.ts
-var checkbox_default = SlCheckbox;
-SlCheckbox.define("sl-checkbox");
-
-export {
-  checkbox_default
-};

package/dist/chunks/chunk.4FMSGOJY.js

@@ -1,27 +0,0 @@
-import {
-  SlDropdown
-} from "./chunk.22LMB5ZP.js";
-
-// src/react/dropdown/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-dropdown";
-SlDropdown.define("sl-dropdown");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlDropdown,
-  react: React,
-  events: {
-    onSlShow: "sl-show",
-    onSlAfterShow: "sl-after-show",
-    onSlHide: "sl-hide",
-    onSlAfterHide: "sl-after-hide"
-  },
-  displayName: "SlDropdown"
-});
-var dropdown_default = reactWrapper;
-
-export {
-  dropdown_default
-};

package/dist/chunks/chunk.4IGL2EUS.js

@@ -1,11 +0,0 @@
-import {
-  SlAnimation
-} from "./chunk.BZZRVFFY.js";
-
-// src/components/animation/animation.ts
-var animation_default = SlAnimation;
-SlAnimation.define("sl-animation");
-
-export {
-  animation_default
-};