@kdcloudjs/shoelace 1.0.39 → 1.0.40

package/cdn/chunks/chunk.DRNYX3KS.js

@@ -0,0 +1,27 @@
+import {
+  SlDatePanel
+} from "./chunk.IWRLK7RE.js";
+
+// src/react/date-panel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-date-panel";
+SlDatePanel.define("sl-date-panel");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDatePanel,
+  react: React,
+  events: {
+    onSlCancel: "sl-cancel",
+    onSlClear: "sl-clear",
+    onSlConfirm: "sl-confirm",
+    onSlDateChange: "sl-date-change"
+  },
+  displayName: "SlDatePanel"
+});
+var date_panel_default = reactWrapper;
+
+export {
+  date_panel_default
+};

package/cdn/chunks/chunk.DUB6GFGG.js

@@ -0,0 +1,129 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/checkbox/checkbox.styles.ts
+var checkbox_styles_default = i`
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-start;
+    font-family: var(--sl-input-font-family);
+    font-weight: var(--sl-input-font-weight);
+    color: var(--sl-input-label-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .checkbox--small {
+    --toggle-size: var(--sl-toggle-size-small);
+    font-size: var(--sl-input-font-size-small);
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--sl-toggle-size-medium);
+    font-size: var(--sl-input-font-size-medium);
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--sl-toggle-size-large);
+    font-size: var(--sl-input-font-size-large);
+  }
+
+  .checkbox__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    border-radius: 2px;
+    background-color: var(--sl-input-background-color);
+    color: var(--sl-color-neutral-0);
+    transition:
+      var(--sl-transition-fast) border-color,
+      var(--sl-transition-fast) background-color,
+      var(--sl-transition-fast) color,
+      var(--sl-transition-fast) box-shadow;
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+  }
+
+  /* Hover */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--sl-input-border-color-hover);
+    background-color: var(--sl-input-background-color-hover);
+  }
+
+  /* Focus */
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+  }
+
+  /* Checked/indeterminate */
+  .checkbox--checked .checkbox__control,
+  .checkbox--indeterminate .checkbox__control {
+    border-color: var(--sl-color-primary-600);
+    background-color: var(--sl-color-primary-600);
+  }
+
+  /* Checked/indeterminate + hover */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
+    border-color: var(--sl-color-primary-500);
+    background-color: var(--sl-color-primary-500);
+  }
+
+  /* Checked/indeterminate + focus */
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .checkbox__label {
+    display: inline-block;
+    color: var(--sl-input-label-color);
+    line-height: var(--toggle-size);
+    margin-inline-start: 0.5em;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host([required]) .checkbox__label::after {
+    content: var(--sl-input-required-content);
+    color: var(--sl-input-required-content-color);
+    margin-inline-start: var(--sl-input-required-content-offset);
+    font-size: 1.2em;
+  }
+`;
+
+export {
+  checkbox_styles_default
+};

package/cdn/chunks/chunk.DUM7JP7D.js

@@ -0,0 +1,11 @@
+import {
+  SlRange
+} from "./chunk.FOX4TTUC.js";
+
+// src/components/range/range.ts
+var range_default = SlRange;
+SlRange.define("sl-range");
+
+export {
+  range_default
+};

package/cdn/chunks/chunk.E7RML74B.js

@@ -0,0 +1,500 @@
+import {
+  notification_styles_default
+} from "./chunk.XSIVGY22.js";
+import {
+  blurActiveElement
+} from "./chunk.LD4M4QGE.js";
+import {
+  SlIconButton
+} from "./chunk.MI37NL75.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.KSB7EI3T.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  stopAnimations
+} from "./chunk.RC46L6CZ.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  SlIcon
+} from "./chunk.ID73RYXW.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.GHZEUHFY.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/notification/notification.component.ts
+var _SlNotification = class _SlNotification extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon", "title", "actions");
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.closable = true;
+    this._closeIcon = void 0;
+    this.type = "info";
+    this._duration = 4500;
+    this.placement = "topRight";
+    this.showProgress = false;
+    this.pauseOnHover = true;
+    this.remainingTime = 0;
+    this.totalDuration = 0;
+  }
+  get closeIcon() {
+    return this._closeIcon;
+  }
+  set closeIcon(value) {
+    const oldValue = this._closeIcon;
+    if (value === null || value === false || value === "null" || value === "false") {
+      this._closeIcon = value === "null" ? null : value === "false" ? false : value;
+    } else {
+      this._closeIcon = value;
+    }
+    this.requestUpdate("closeIcon", oldValue);
+  }
+  get duration() {
+    return this._duration;
+  }
+  set duration(value) {
+    const oldValue = this._duration;
+    if (value === false || value === "false" || value === 0 || value === "0") {
+      this._duration = false;
+    } else {
+      this._duration = typeof value === "string" ? parseInt(value, 10) : value;
+    }
+    this.requestUpdate("duration", oldValue);
+  }
+  /** Open a notification with the given configuration. */
+  static open(config) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const notification = document.createElement("sl-notification");
+    const mergedConfig = __spreadValues(__spreadValues({}, _SlNotification.globalConfig), config);
+    notification.type = mergedConfig.type || "info";
+    notification.duration = (_b = (_a = mergedConfig.duration) != null ? _a : _SlNotification.globalConfig.duration) != null ? _b : 4500;
+    notification.closable = (_c = mergedConfig.closable) != null ? _c : true;
+    notification.placement = mergedConfig.placement || _SlNotification.globalConfig.placement || "topRight";
+    notification.showProgress = (_e = (_d = mergedConfig.showProgress) != null ? _d : _SlNotification.globalConfig.showProgress) != null ? _e : false;
+    notification.pauseOnHover = (_g = (_f = mergedConfig.pauseOnHover) != null ? _f : _SlNotification.globalConfig.pauseOnHover) != null ? _g : true;
+    notification.key = mergedConfig.key;
+    if (mergedConfig.closeIcon !== void 0) {
+      notification.closeIcon = mergedConfig.closeIcon;
+    } else if (_SlNotification.globalConfig.closeIcon !== void 0) {
+      notification.closeIcon = _SlNotification.globalConfig.closeIcon;
+    }
+    if (mergedConfig.onClose) {
+      notification.addEventListener("sl-after-hide", mergedConfig.onClose, { once: true });
+    }
+    if (mergedConfig.onClick) {
+      notification.addEventListener("click", mergedConfig.onClick);
+    }
+    if (mergedConfig.title) {
+      if (typeof mergedConfig.title === "string") {
+        const titleEl = document.createElement("span");
+        titleEl.slot = "title";
+        titleEl.textContent = mergedConfig.title;
+        notification.appendChild(titleEl);
+      }
+    }
+    if (mergedConfig.description) {
+      if (typeof mergedConfig.description === "string") {
+        const descEl = document.createElement("span");
+        descEl.textContent = mergedConfig.description;
+        notification.appendChild(descEl);
+      }
+    }
+    if (mergedConfig.icon) {
+      if (typeof mergedConfig.icon === "string") {
+        const iconEl = document.createElement("sl-icon");
+        iconEl.slot = "icon";
+        iconEl.setAttribute("name", mergedConfig.icon);
+        notification.appendChild(iconEl);
+      }
+    }
+    requestAnimationFrame(() => {
+      notification.show();
+    });
+    return notification;
+  }
+  /** Shorthand for opening a success notification. */
+  static success(config) {
+    const cfg = typeof config === "string" ? { description: config } : config;
+    return _SlNotification.open(__spreadProps(__spreadValues({}, cfg), { type: "success" }));
+  }
+  /** Shorthand for opening an info notification. */
+  static info(config) {
+    const cfg = typeof config === "string" ? { description: config } : config;
+    return _SlNotification.open(__spreadProps(__spreadValues({}, cfg), { type: "info" }));
+  }
+  /** Shorthand for opening a warning notification. */
+  static warning(config) {
+    const cfg = typeof config === "string" ? { description: config } : config;
+    return _SlNotification.open(__spreadProps(__spreadValues({}, cfg), { type: "warning" }));
+  }
+  /** Shorthand for opening an error notification. */
+  static error(config) {
+    const cfg = typeof config === "string" ? { description: config } : config;
+    return _SlNotification.open(__spreadProps(__spreadValues({}, cfg), { type: "error" }));
+  }
+  /** Destroy a notification by key. */
+  static destroy(key) {
+    if (key === void 0) {
+      _SlNotification.activeNotifications.forEach((list) => {
+        list.forEach((n2) => n2.hide());
+      });
+    } else {
+      _SlNotification.activeNotifications.forEach((list) => {
+        const notification = list.find((n2) => n2.key === key);
+        notification == null ? void 0 : notification.hide();
+      });
+    }
+  }
+  /** Update container positions when global config changes. */
+  static updateContainerPositions() {
+    const { top, bottom } = _SlNotification.globalConfig;
+    _SlNotification.containers.forEach((container, placement) => {
+      if (placement.includes("top")) {
+        container.style.top = `${top}px`;
+        container.style.bottom = "";
+      } else {
+        container.style.bottom = `${bottom}px`;
+        container.style.top = "";
+      }
+    });
+  }
+  /** Configure global notification settings. */
+  static config(config) {
+    const oldTop = _SlNotification.globalConfig.top;
+    const oldBottom = _SlNotification.globalConfig.bottom;
+    _SlNotification.globalConfig = __spreadValues(__spreadValues({}, _SlNotification.globalConfig), config);
+    if (config.top !== void 0 && config.top !== oldTop || config.bottom !== void 0 && config.bottom !== oldBottom) {
+      _SlNotification.updateContainerPositions();
+    }
+  }
+  static getContainer(placement) {
+    let container = _SlNotification.containers.get(placement);
+    if (!container) {
+      container = document.createElement("div");
+      container.className = `sl-notification-container sl-notification-container--${placement}`;
+      const { top, bottom } = _SlNotification.globalConfig;
+      const styles = {
+        position: "fixed",
+        zIndex: "9999",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        pointerEvents: "none"
+      };
+      if (placement.includes("top")) {
+        styles.top = `${top}px`;
+      } else {
+        styles.bottom = `${bottom}px`;
+        styles.flexDirection = "column-reverse";
+      }
+      if (placement.includes("Left")) {
+        styles.left = "24px";
+      } else if (placement.includes("Right")) {
+        styles.right = "24px";
+      } else {
+        styles.left = "50%";
+        styles.transform = "translateX(-50%)";
+      }
+      Object.assign(container.style, styles);
+      document.body.appendChild(container);
+      _SlNotification.containers.set(placement, container);
+      _SlNotification.activeNotifications.set(placement, []);
+    }
+    return container;
+  }
+  firstUpdated() {
+    this.base.hidden = !this.open;
+  }
+  getDefaultIcon() {
+    const icons = {
+      success: "check2-circle",
+      info: "info-circle",
+      warning: "exclamation-triangle",
+      error: "exclamation-octagon"
+    };
+    return icons[this.type] || icons.info;
+  }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+    const durationValue = this._duration;
+    if (durationValue !== false && typeof durationValue === "number" && durationValue > 0) {
+      this.totalDuration = durationValue;
+      this.remainingTime = durationValue;
+      this.autoHideTimeout = window.setTimeout(() => {
+        void this.hide();
+      }, durationValue);
+      if (this.showProgress) {
+        this.remainingTimeInterval = window.setInterval(() => {
+          this.remainingTime = Math.max(0, this.remainingTime - 100);
+        }, 100);
+      }
+    }
+  }
+  pauseAutoHide() {
+    if (!this.pauseOnHover) return;
+    clearTimeout(this.autoHideTimeout);
+    clearInterval(this.remainingTimeInterval);
+  }
+  resumeAutoHide() {
+    if (!this.pauseOnHover) return;
+    const durationValue = this._duration;
+    if (durationValue !== false && typeof durationValue === "number" && durationValue > 0 && this.remainingTime > 0) {
+      this.autoHideTimeout = window.setTimeout(() => {
+        void this.hide();
+      }, this.remainingTime);
+      if (this.showProgress) {
+        this.remainingTimeInterval = window.setInterval(() => {
+          this.remainingTime = Math.max(0, this.remainingTime - 100);
+        }, 100);
+      }
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.emit("sl-show");
+      this.restartAutoHide();
+      await stopAnimations(this.base);
+      this.base.hidden = false;
+      const { keyframes, options } = getAnimation(this, "notification.show", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.emit("sl-after-show");
+    } else {
+      blurActiveElement(this);
+      this.emit("sl-hide");
+      clearTimeout(this.autoHideTimeout);
+      clearInterval(this.remainingTimeInterval);
+      await stopAnimations(this.base);
+      const { keyframes, options } = getAnimation(this, "notification.hide", { dir: this.localize.dir() });
+      await animateTo(this.base, keyframes, options);
+      this.base.hidden = true;
+      this.emit("sl-after-hide");
+      const activeList = _SlNotification.activeNotifications.get(this.placement);
+      if (activeList) {
+        const index = activeList.indexOf(this);
+        if (index > -1) {
+          activeList.splice(index, 1);
+        }
+      }
+      this.remove();
+    }
+  }
+  /** Shows the notification. */
+  async show() {
+    if (this.open) {
+      return void 0;
+    }
+    const container = _SlNotification.getContainer(this.placement);
+    if (this.parentElement !== container) {
+      const maxCount = _SlNotification.globalConfig.maxCount;
+      if (maxCount !== void 0) {
+        const activeList2 = _SlNotification.activeNotifications.get(this.placement) || [];
+        while (activeList2.length >= maxCount && activeList2.length > 0) {
+          const oldest = activeList2.shift();
+          oldest == null ? void 0 : oldest.hide();
+        }
+      }
+      container.appendChild(this);
+      const activeList = _SlNotification.activeNotifications.get(this.placement) || [];
+      if (!activeList.includes(this)) {
+        activeList.push(this);
+        _SlNotification.activeNotifications.set(this.placement, activeList);
+      }
+    }
+    await this.updateComplete;
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the notification. */
+  async hide() {
+    if (!this.open) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  getProgressWidth() {
+    if (!this.showProgress || this.totalDuration === 0) return "100%";
+    return `${this.remainingTime / this.totalDuration * 100}%`;
+  }
+  render() {
+    const hasIcon = this.hasSlotController.test("icon") || this.type;
+    const hasTitle = this.hasSlotController.test("title");
+    const hasActions = this.hasSlotController.test("actions");
+    return b`
+      <div
+        part="base"
+        class=${e({
+      notification: true,
+      "notification--open": this.open,
+      "notification--closable": this.closable,
+      "notification--has-icon": hasIcon,
+      "notification--has-title": hasTitle,
+      "notification--has-actions": hasActions,
+      "notification--success": this.type === "success",
+      "notification--info": this.type === "info",
+      "notification--warning": this.type === "warning",
+      "notification--error": this.type === "error"
+    })}
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        style="pointer-events: auto;"
+        @mouseenter=${this.pauseAutoHide}
+        @mouseleave=${this.resumeAutoHide}
+      >
+        <div part="icon" class="notification__icon">
+          <slot name="icon">
+            <sl-icon name=${this.getDefaultIcon()}></sl-icon>
+          </slot>
+        </div>
+
+        <div part="content" class="notification__content">
+          <div part="title" class="notification__title">
+            <slot name="title"></slot>
+          </div>
+          <div part="description" class="notification__description">
+            <slot></slot>
+          </div>
+          ${hasActions ? b`
+                <div part="actions" class="notification__actions">
+                  <slot name="actions"></slot>
+                </div>
+              ` : ""}
+        </div>
+
+        ${this.closable && this._closeIcon !== null && this._closeIcon !== false ? b`
+              <sl-icon-button
+                part="close-button"
+                class="notification__close-button"
+                name=${typeof this._closeIcon === "string" && this._closeIcon ? this._closeIcon : "x-lg"}
+                library=${typeof this._closeIcon === "string" && this._closeIcon ? "default" : "system"}
+                label=${this.localize.term("close")}
+                @click=${this.handleCloseClick}
+              ></sl-icon-button>
+            ` : ""}
+
+        ${this.showProgress && this._duration !== false ? b`
+              <div part="progress" class="notification__progress">
+                <div
+                  part="progress-bar"
+                  class="notification__progress-bar"
+                  style="width: ${this.getProgressWidth()}"
+                ></div>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+_SlNotification.styles = [component_styles_default, notification_styles_default];
+_SlNotification.dependencies = { "sl-icon": SlIcon, "sl-icon-button": SlIconButton };
+// Global configuration
+_SlNotification.globalConfig = {
+  placement: "topRight",
+  duration: 4500,
+  maxCount: void 0,
+  top: 24,
+  bottom: 24,
+  showProgress: false,
+  pauseOnHover: true
+};
+// Notification containers for different placements
+_SlNotification.containers = /* @__PURE__ */ new Map();
+// Active notifications tracking
+_SlNotification.activeNotifications = /* @__PURE__ */ new Map();
+__decorateClass([
+  e2('[part~="base"]')
+], _SlNotification.prototype, "base", 2);
+__decorateClass([
+  e2(".notification__progress-bar")
+], _SlNotification.prototype, "progressBar", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], _SlNotification.prototype, "open", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], _SlNotification.prototype, "closable", 2);
+__decorateClass([
+  n({ attribute: "close-icon" })
+], _SlNotification.prototype, "closeIcon", 1);
+__decorateClass([
+  n({ reflect: true })
+], _SlNotification.prototype, "type", 2);
+__decorateClass([
+  n({ attribute: "duration" })
+], _SlNotification.prototype, "duration", 1);
+__decorateClass([
+  n({ reflect: true })
+], _SlNotification.prototype, "placement", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "show-progress" })
+], _SlNotification.prototype, "showProgress", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "pause-on-hover" })
+], _SlNotification.prototype, "pauseOnHover", 2);
+__decorateClass([
+  n()
+], _SlNotification.prototype, "key", 2);
+__decorateClass([
+  r()
+], _SlNotification.prototype, "remainingTime", 2);
+__decorateClass([
+  r()
+], _SlNotification.prototype, "totalDuration", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], _SlNotification.prototype, "handleOpenChange", 1);
+var SlNotification = _SlNotification;
+setDefaultAnimation("notification.show", {
+  keyframes: [
+    { opacity: 0, transform: "translateX(100%)" },
+    { opacity: 1, transform: "translateX(0)" }
+  ],
+  options: { duration: 250, easing: "ease-out" }
+});
+setDefaultAnimation("notification.hide", {
+  keyframes: [
+    { opacity: 1, transform: "translateX(0)" },
+    { opacity: 0, transform: "translateX(100%)" }
+  ],
+  options: { duration: 250, easing: "ease-in" }
+});
+
+export {
+  SlNotification
+};