@kdcloudjs/shoelace 0.0.2 → 1.0.0

package/dist/chunks/{chunk.67ZQ6PMR.js → chunk.22LMB5ZP.js}

@@ -1,13 +1,13 @@
 import {
   dropdown_styles_default
 } from "./chunk.LXP7GVU3.js";
-import {
-  SlPopup
-} from "./chunk.QKJEDAAH.js";
 import {
   getDeepestActiveElement,
   getTabbableBoundary
 } from "./chunk.VESXC477.js";
+import {
+  SlPopup
+} from "./chunk.YHRMKFU2.js";
 import {
   getAnimation,
   setDefaultAnimation
@@ -30,7 +30,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
+} from "./chunk.YFUR5BLL.js";
 import {
   __decorateClass
 } from "./chunk.KAW7D32O.js";

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

@@ -0,0 +1,388 @@
+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.2DF3IW6S.js

@@ -0,0 +1,260 @@
+// src/components/switch/switch.styles.ts
+import { css } from "lit";
+var switch_styles_default = css`
+  :host {
+    display: inline-block;
+  }
+
+  :host([size='small']) {
+    /* increase base height by 2px */
+    --height: calc(var(--sl-toggle-size-small) + 2px);
+    --thumb-size: calc(var(--sl-toggle-size-small));
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--sl-input-font-size-small);
+  }
+
+  :host([size='medium']) {
+    /* increase base height by 2px */
+    --height: calc(var(--sl-toggle-size-medium) + 2px);
+    --thumb-size: calc(var(--sl-toggle-size-medium));
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--sl-input-font-size-medium);
+  }
+
+  :host([size='large']) {
+    /* increase base height by 2px */
+    --height: calc(var(--sl-toggle-size-large) + 2px);
+    --thumb-size: calc(var(--sl-toggle-size-large));
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--sl-input-font-size-large);
+  }
+
+  .switch {
+    position: relative;
+    display: inline-flex;
+    /* stack label above control and left-align */
+    flex-direction: column;
+    align-items: flex-start;
+    font-family: var(--sl-input-font-family);
+    font-size: inherit;
+    font-weight: var(--sl-input-font-weight);
+    color: var(--sl-input-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .switch__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--width);
+    height: var(--height);
+    background-color: var(--sl-color-neutral-400);
+    border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
+    border-radius: var(--height);
+    transition:
+      var(--sl-transition-fast) border-color,
+      var(--sl-transition-fast) background-color;
+  }
+
+  .switch__control .switch__thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background-color: var(--sl-color-neutral-0);
+    border-radius: 50%;
+    border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
+    translate: calc((var(--width) - var(--height)) / -2);
+    transition:
+      var(--sl-transition-fast) translate ease,
+      var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) border-color,
+      var(--sl-transition-fast) box-shadow;
+  }
+
+  .switch__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+    background-color: var(--sl-color-neutral-500);
+    border-color: var(--sl-color-neutral-500);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-neutral-500);
+  }
+
+  /* Focus */
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--sl-color-neutral-400);
+    border-color: var(--sl-color-neutral-400);
+  }
+
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+  }
+
+  /* Checked */
+  .switch--checked .switch__control {
+    background-color: var(--sl-color-primary-600);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  .switch--checked .switch__control .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+    translate: calc((var(--width) - var(--height)) / 2);
+  }
+
+  /* Checked + hover */
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
+    background-color: var(--sl-color-primary-500);
+    border-color: var(--sl-color-primary-500);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-500);
+  }
+
+  /* Checked + focus */
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+    background-color: var(--sl-color-primary-600);
+    /* Use an outline for focus visuals so it doesn't affect layout (border-box) */
+  }
+
+  /* If the browser supports color-mix, use a 30% transparent mix of the primary color for outline */
+  @supports (color: color-mix(in srgb, var(--sl-color-primary-600) 70%, transparent 30%)) {
+    .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
+      outline-color: color-mix(in srgb, var(--sl-color-primary-600) 70%, transparent 30%);
+    }
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
+    background-color: var(--sl-color-neutral-0);
+    border-color: var(--sl-color-primary-600);
+  }
+
+  /* Active state (when clicked) */
+  .switch:not(.switch--disabled) .switch__input:active ~ .switch__control {
+    /* Remove inner stroke */
+    border-style: none;
+    border-width: 0;
+    /* Add outer stroke with same color as background */
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sl-color-neutral-400) 30%, transparent 70%);
+  }
+
+  .switch:not(.switch--disabled) .switch__input:active ~ .switch__control .switch__thumb {
+    width: calc(var(--thumb-size) + 4px);
+    /* Move right by 2px to make width increase to the right */
+    translate: calc(((var(--width) - var(--height)) / -2) + 2px);
+    /* Maintain full rounded corners */
+    border-radius: calc(var(--thumb-size) / 2);
+  }
+
+  /* Active state for checked switch */
+  .switch.switch--checked:not(.switch--disabled) .switch__input:active ~ .switch__control {
+    /* Remove inner stroke */
+    border-style: none;
+    border-width: 0;
+    /* Add outer stroke with same color as background */
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sl-color-primary-600) 30%, transparent 70%);
+  }
+
+  .switch.switch--checked:not(.switch--disabled) .switch__input:active ~ .switch__control .switch__thumb {
+    width: calc(var(--thumb-size) + 4px);
+    /* Move left by 2px to make width increase to the left */
+    translate: calc(((var(--width) - var(--height)) / 2) - 2px);
+    /* Maintain full rounded corners */
+    border-radius: calc(var(--thumb-size) / 2);
+  }
+
+  /* Fallback for browsers that don't support color-mix */
+  @supports not (color: color-mix(in srgb, var(--sl-color-primary-600) 30%, transparent 70%)) {
+    .switch:not(.switch--disabled) .switch__input:active ~ .switch__control {
+      /* Remove inner stroke */
+      border-style: none;
+      border-width: 0;
+      /* Add outer stroke with same color as background */
+      box-shadow: 0 0 0 2px var(--sl-color-neutral-400);
+      opacity: 0.3;
+    }
+
+    .switch.switch--checked:not(.switch--disabled) .switch__input:active ~ .switch__control {
+      /* Remove inner stroke */
+      border-style: none;
+      border-width: 0;
+      /* Add outer stroke with same color as background */
+      box-shadow: 0 0 0 2px var(--sl-color-primary-600);
+      opacity: 0.3;
+    }
+
+    /* Maintain thumb opacity in active state */
+    .switch:not(.switch--disabled) .switch__input:active ~ .switch__control .switch__thumb {
+      width: calc(var(--thumb-size) + 4px);
+      /* Move right by 2px to make width increase to the right */
+      translate: calc(((var(--width) - var(--height)) / -2) + 2px);
+      /* Maintain full rounded corners */
+      border-radius: calc(var(--thumb-size) / 2);
+      opacity: 1;
+    }
+
+    .switch.switch--checked:not(.switch--disabled) .switch__input:active ~ .switch__control .switch__thumb {
+      width: calc(var(--thumb-size) + 4px);
+      /* Move left by 2px to make width increase to the left */
+      translate: calc(((var(--width) - var(--height)) / 2) - 2px);
+      /* Maintain full rounded corners */
+      border-radius: calc(var(--thumb-size) / 2);
+      opacity: 1;
+    }
+  }
+
+  /* Disabled */
+  .switch--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .switch__label {
+    display: block;
+    /* label sits above the control, left-aligned */
+    line-height: normal;
+    order: -1; /* render the label above the control without changing DOM */
+    margin: 0 0 4px 0; /* bottom gap before the control */
+    user-select: none;
+    -webkit-user-select: none;
+    text-align: left;
+    width: 100%;
+  }
+
+  :host([required]) .switch__label::after {
+    content: var(--sl-input-required-content);
+    color: var(--sl-input-required-content-color);
+    margin-inline-start: var(--sl-input-required-content-offset);
+  }
+
+  @media (forced-colors: active) {
+    .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
+    .switch--checked .switch__control .switch__thumb {
+      background-color: ButtonText;
+    }
+  }
+`;
+
+export {
+  switch_styles_default
+};

package/{cdn/chunks/chunk.55KCBG5V.js → dist/chunks/chunk.2FMGJK4E.js}

@@ -1,6 +1,6 @@
 import {
   SlTabPanel
-} from "./chunk.CFEPKSUO.js";
+} from "./chunk.IGTQGR6B.js";
 
 // src/react/tab-panel/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.CKGMCN6T.js → chunk.2MZ7OOZO.js}

@@ -1,6 +1,6 @@
 import {
   SlTreeItem
-} from "./chunk.ULVOY2FX.js";
+} from "./chunk.IJKSR74B.js";
 
 // src/components/tree-item/tree-item.ts
 var tree_item_default = SlTreeItem;

package/dist/chunks/{chunk.I7NX25KZ.js → chunk.2RFPHSI5.js}

@@ -1,6 +1,6 @@
 import {
   SlInclude
-} from "./chunk.2P7ZU66U.js";
+} from "./chunk.URUWFFVY.js";
 
 // src/components/include/include.ts
 var include_default = SlInclude;

package/dist/chunks/{chunk.5NLYBKUE.js → chunk.2ZVVWOR6.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.TUVJKY7S.js";
 import {
   ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
+} from "./chunk.YFUR5BLL.js";
 import {
   __decorateClass
 } from "./chunk.KAW7D32O.js";