@kdcloudjs/shoelace 1.0.13 → 1.0.15

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

@@ -1,116 +0,0 @@
-import {
-  SlIcon
-} from "./chunk.VHHBFM4E.js";
-import {
-  watch
-} from "./chunk.55S3OOTM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.M7GTV5KG.js";
-import {
-  animated_image_styles_default
-} from "./chunk.M3A4TKTU.js";
-import {
-  __decorateClass
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/animated-image/animated-image.component.ts
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-var SlAnimatedImage = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.isLoaded = false;
-  }
-  handleClick() {
-    this.play = !this.play;
-  }
-  handleLoad() {
-    const canvas = document.createElement("canvas");
-    const { width, height } = this.animatedImage;
-    canvas.width = width;
-    canvas.height = height;
-    canvas.getContext("2d").drawImage(this.animatedImage, 0, 0, width, height);
-    this.frozenFrame = canvas.toDataURL("image/gif");
-    if (!this.isLoaded) {
-      this.emit("sl-load");
-      this.isLoaded = true;
-    }
-  }
-  handleError() {
-    this.emit("sl-error");
-  }
-  handlePlayChange() {
-    if (this.play) {
-      this.animatedImage.src = "";
-      this.animatedImage.src = this.src;
-    }
-  }
-  handleSrcChange() {
-    this.isLoaded = false;
-  }
-  render() {
-    return html`
-      <div class="animated-image">
-        <img
-          class="animated-image__animated"
-          src=${this.src}
-          alt=${this.alt}
-          crossorigin="anonymous"
-          aria-hidden=${this.play ? "false" : "true"}
-          @click=${this.handleClick}
-          @load=${this.handleLoad}
-          @error=${this.handleError}
-        />
-
-        ${this.isLoaded ? html`
-              <img
-                class="animated-image__frozen"
-                src=${this.frozenFrame}
-                alt=${this.alt}
-                aria-hidden=${this.play ? "true" : "false"}
-                @click=${this.handleClick}
-              />
-
-              <div part="control-box" class="animated-image__control-box">
-                <slot name="play-icon"><sl-icon name="play-fill" library="system"></sl-icon></slot>
-                <slot name="pause-icon"><sl-icon name="pause-fill" library="system"></sl-icon></slot>
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-SlAnimatedImage.styles = [component_styles_default, animated_image_styles_default];
-SlAnimatedImage.dependencies = { "sl-icon": SlIcon };
-__decorateClass([
-  query(".animated-image__animated")
-], SlAnimatedImage.prototype, "animatedImage", 2);
-__decorateClass([
-  state()
-], SlAnimatedImage.prototype, "frozenFrame", 2);
-__decorateClass([
-  state()
-], SlAnimatedImage.prototype, "isLoaded", 2);
-__decorateClass([
-  property()
-], SlAnimatedImage.prototype, "src", 2);
-__decorateClass([
-  property()
-], SlAnimatedImage.prototype, "alt", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlAnimatedImage.prototype, "play", 2);
-__decorateClass([
-  watch("play", { waitUntilFirstUpdate: true })
-], SlAnimatedImage.prototype, "handlePlayChange", 1);
-__decorateClass([
-  watch("src")
-], SlAnimatedImage.prototype, "handleSrcChange", 1);
-
-export {
-  SlAnimatedImage
-};

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

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

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

@@ -1,11 +0,0 @@
-import {
-  SlDivider
-} from "./chunk.N2XI22GZ.js";
-
-// src/components/divider/divider.ts
-var divider_default = SlDivider;
-SlDivider.define("sl-divider");
-
-export {
-  divider_default
-};

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

@@ -1,11 +0,0 @@
-import {
-  SlColorPicker
-} from "./chunk.3AD2CXBX.js";
-
-// src/components/color-picker/color-picker.ts
-var color_picker_default = SlColorPicker;
-SlColorPicker.define("sl-color-picker");
-
-export {
-  color_picker_default
-};

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

@@ -1,24 +0,0 @@
-import {
-  SlTree
-} from "./chunk.NWST6VHG.js";
-
-// src/react/tree/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-tree";
-SlTree.define("sl-tree");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlTree,
-  react: React,
-  events: {
-    onSlSelectionChange: "sl-selection-change"
-  },
-  displayName: "SlTree"
-});
-var tree_default = reactWrapper;
-
-export {
-  tree_default
-};

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

@@ -1,11 +0,0 @@
-import {
-  SlButton
-} from "./chunk.PRERWPVU.js";
-
-// src/components/button/button.ts
-var button_default = SlButton;
-SlButton.define("sl-button");
-
-export {
-  button_default
-};

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

@@ -1,338 +0,0 @@
-import {
-  PickerBase
-} from "./chunk.JUXRG2ZU.js";
-import {
-  SlDatePanel
-} from "./chunk.UJY66GBC.js";
-import {
-  SlCalendar,
-  formatDatetime,
-  parseDatetime
-} from "./chunk.W3FASBZI.js";
-import {
-  SlDrawer
-} from "./chunk.XN35THY2.js";
-import {
-  SlInput
-} from "./chunk.FLUFA3ER.js";
-import {
-  SlPopup
-} from "./chunk.TSTXB3ED.js";
-import {
-  SlButton
-} from "./chunk.PRERWPVU.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
-};

package/dist/chunks/chunk.47QEQQJC.js

@@ -1,11 +0,0 @@
-import {
-  SlFormatBytes
-} from "./chunk.PJE5SZLI.js";
-
-// src/components/format-bytes/format-bytes.ts
-var format_bytes_default = SlFormatBytes;
-SlFormatBytes.define("sl-format-bytes");
-
-export {
-  format_bytes_default
-};

package/dist/chunks/chunk.47YOCOBU.js

@@ -1,29 +0,0 @@
-import {
-  SlInput
-} from "./chunk.FLUFA3ER.js";
-
-// src/react/input/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-input";
-SlInput.define("sl-input");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlInput,
-  react: React,
-  events: {
-    onSlBlur: "sl-blur",
-    onSlChange: "sl-change",
-    onSlClear: "sl-clear",
-    onSlFocus: "sl-focus",
-    onSlInput: "sl-input",
-    onSlInvalid: "sl-invalid"
-  },
-  displayName: "SlInput"
-});
-var input_default = reactWrapper;
-
-export {
-  input_default
-};

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

@@ -1,28 +0,0 @@
-import {
-  SlTimepicker
-} from "./chunk.ZXGRLZON.js";
-
-// src/react/timepicker/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-timepicker";
-SlTimepicker.define("sl-timepicker");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlTimepicker,
-  react: React,
-  events: {
-    onSlChange: "sl-change",
-    onSlInput: "sl-input",
-    onSlFocus: "sl-focus",
-    onSlBlur: "sl-blur",
-    onSlClear: "sl-clear"
-  },
-  displayName: "SlTimepicker"
-});
-var timepicker_default = reactWrapper;
-
-export {
-  timepicker_default
-};