@kdcloudjs/shoelace 1.0.0 → 1.0.1

package/dist/chunks/chunk.HRAFWQWD.js

@@ -1,113 +0,0 @@
-// src/components/table/features/row-selection.ts
-import "@tanstack/lit-table";
-import { html } from "lit";
-var getSelectionColumn = (rowSelection) => {
-  const { type = "checkbox", width = 50, className, disabled } = rowSelection;
-  return {
-    id: "select",
-    size: width,
-    meta: {
-      align: "center",
-      className
-    },
-    header: ({ table }) => {
-      const isCheckbox = type === "checkbox";
-      const fnCallBack = () => {
-        window == null ? void 0 : window.requestAnimationFrame(() => {
-          if (rowSelection == null ? void 0 : rowSelection.onSelectAll) {
-            rowSelection.onSelectAll(
-              table.getIsAllRowsSelected(),
-              table.getFilteredRowModel().rows.map((r) => r.original)
-            );
-          }
-          if (rowSelection == null ? void 0 : rowSelection.onChange) {
-            rowSelection.onChange(
-              table.getSelectedRowModel().rows.map((r) => r.id),
-              table.getSelectedRowModel().rows.map((r) => r.original)
-            );
-          }
-        });
-      };
-      return isCheckbox ? html`<sl-checkbox
-            size="small"
-            part="row-all-select"
-            .checked="${table.getIsAllRowsSelected()}"
-            .indeterminate="${table.getIsSomeRowsSelected()}"
-            ?disabled="${disabled}"
-            @sl-change="${() => {
-        table.toggleAllRowsSelected();
-        fnCallBack();
-      }}"
-          ></sl-checkbox>` : html``;
-    },
-    cell: ({ row, table }) => {
-      var _a;
-      const fnCallback = (e) => {
-        window == null ? void 0 : window.requestAnimationFrame(() => {
-          if (rowSelection == null ? void 0 : rowSelection.onSelect) {
-            rowSelection.onSelect(
-              row.original,
-              row.getIsSelected(),
-              table.getSelectedRowModel().rows.map((r) => r.original),
-              e
-            );
-          }
-          if (rowSelection == null ? void 0 : rowSelection.onChange) {
-            rowSelection.onChange(
-              table.getSelectedRowModel().rows.map((r) => r.id),
-              table.getSelectedRowModel().rows.map((r) => r.original)
-            );
-          }
-        });
-      };
-      const cellProps = ((_a = rowSelection == null ? void 0 : rowSelection.getCheckboxProps) == null ? void 0 : _a.call(rowSelection, row.original)) || {};
-      const { style, classNames } = cellProps;
-      const isDisabled = !row.getCanSelect();
-      return html`
-        ${type === "radio" ? html`<sl-radio
-              part="row-radio-select"
-              size="small"
-              @click="${(e) => {
-        table.resetRowSelection(true);
-        row.toggleSelected(true);
-        fnCallback(e);
-      }}"
-              .checked="${row.getIsSelected()}"
-              ?disabled="${isDisabled}"
-              style="${style}"
-              class="${classNames}"
-            ></sl-radio>` : html`<sl-checkbox
-              part="row-check-select"
-              size="small"
-              @sl-change="${(e) => {
-        row.toggleSelected();
-        fnCallback(e);
-      }}"
-              .checked="${row.getIsSelected()}"
-              ?disabled="${isDisabled}"
-              style="${style}"
-              class="${classNames}"
-            ></sl-checkbox>`}
-      `;
-    }
-  };
-};
-var getRowSelectionOptions = ({
-  rowSelection
-}) => {
-  const rowSelectionOptions = {};
-  if (rowSelection) {
-    const { getCheckboxProps } = rowSelection;
-    rowSelectionOptions.enableRowSelection = (record) => {
-      var _a;
-      return ((_a = getCheckboxProps == null ? void 0 : getCheckboxProps(record.original)) == null ? void 0 : _a.disabled) !== true;
-    };
-    rowSelectionOptions.enableMultiRowSelection = rowSelection.type !== "radio";
-  }
-  return rowSelectionOptions;
-};
-
-export {
-  getSelectionColumn,
-  getRowSelectionOptions
-};

package/dist/chunks/chunk.HUI4WJKN.js

@@ -1,105 +0,0 @@
-// src/components/details/details.styles.ts
-import { css } from "lit";
-var details_styles_default = css`
-  :host {
-    display: block;
-  }
-
-  .details {
-    border: solid 1px var(--sl-color-neutral-200);
-    border-radius: var(--sl-border-radius-medium);
-    background-color: var(--sl-color-neutral-0);
-    overflow-anchor: none;
-    box-shadow: var(--sl-shadow-x-small);
-  }
-
-  .details--disabled {
-    opacity: 0.5;
-  }
-
-  .details__header {
-    display: flex;
-    align-items: center;
-    border-radius: inherit;
-    padding: 0 var(--sl-spacing-medium);
-    height: 40px;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: pointer;
-  }
-
-  .details__header::-webkit-details-marker {
-    display: none;
-  }
-
-  .details__header:focus {
-    outline: none;
-  }
-
-  .details__header:focus-visible {
-    outline: var(--sl-focus-ring);
-    outline-offset: calc(1px + var(--sl-focus-ring-offset));
-  }
-
-  .details--disabled .details__header {
-    cursor: not-allowed;
-  }
-
-  .details--disabled .details__header:focus-visible {
-    outline: none;
-    box-shadow: none;
-  }
-
-  .details__summary {
-    flex: 1 1 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .details__summary-icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    transition: var(--sl-transition-medium) rotate ease;
-    margin-right: var(--sl-spacing-2x-small);
-  }
-
-  .details--rtl .details__summary-icon {
-    margin-right: 0;
-    margin-left: var(--sl-spacing-2x-small);
-  }
-
-  .details__summary {
-    font-weight: var(--sl-font-weight-bold);
-  }
-
-  .details__summary-icon sl-icon {
-    color: var(--sl-color-neutral-600);
-  }
-
-  .details--open .details__summary-icon {
-    rotate: 90deg;
-  }
-
-  .details--open.details--rtl .details__summary-icon {
-    rotate: -90deg;
-  }
-
-  .details--open slot[name='expand-icon'],
-  .details:not(.details--open) slot[name='collapse-icon'] {
-    display: none;
-  }
-
-  .details__body {
-    overflow: hidden;
-  }
-
-  .details__content {
-    display: block;
-    padding: var(--sl-spacing-x-small) var(--sl-spacing-medium);
-  }
-`;
-
-export {
-  details_styles_default
-};

package/dist/chunks/chunk.HV7LH2XE.js

@@ -1,73 +0,0 @@
-import {
-  LocalizeController
-} from "./chunk.6CTB5ZDJ.js";
-import {
-  ShoelaceElement
-} from "./chunk.YFUR5BLL.js";
-import {
-  __decorateClass
-} from "./chunk.KAW7D32O.js";
-
-// src/components/format-number/format-number.component.ts
-import { property } from "lit/decorators.js";
-var SlFormatNumber = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.value = 0;
-    this.type = "decimal";
-    this.noGrouping = false;
-    this.currency = "USD";
-    this.currencyDisplay = "symbol";
-  }
-  render() {
-    if (isNaN(this.value)) {
-      return "";
-    }
-    return this.localize.number(this.value, {
-      style: this.type,
-      currency: this.currency,
-      currencyDisplay: this.currencyDisplay,
-      useGrouping: !this.noGrouping,
-      minimumIntegerDigits: this.minimumIntegerDigits,
-      minimumFractionDigits: this.minimumFractionDigits,
-      maximumFractionDigits: this.maximumFractionDigits,
-      minimumSignificantDigits: this.minimumSignificantDigits,
-      maximumSignificantDigits: this.maximumSignificantDigits
-    });
-  }
-};
-__decorateClass([
-  property({ type: Number })
-], SlFormatNumber.prototype, "value", 2);
-__decorateClass([
-  property()
-], SlFormatNumber.prototype, "type", 2);
-__decorateClass([
-  property({ attribute: "no-grouping", type: Boolean })
-], SlFormatNumber.prototype, "noGrouping", 2);
-__decorateClass([
-  property()
-], SlFormatNumber.prototype, "currency", 2);
-__decorateClass([
-  property({ attribute: "currency-display" })
-], SlFormatNumber.prototype, "currencyDisplay", 2);
-__decorateClass([
-  property({ attribute: "minimum-integer-digits", type: Number })
-], SlFormatNumber.prototype, "minimumIntegerDigits", 2);
-__decorateClass([
-  property({ attribute: "minimum-fraction-digits", type: Number })
-], SlFormatNumber.prototype, "minimumFractionDigits", 2);
-__decorateClass([
-  property({ attribute: "maximum-fraction-digits", type: Number })
-], SlFormatNumber.prototype, "maximumFractionDigits", 2);
-__decorateClass([
-  property({ attribute: "minimum-significant-digits", type: Number })
-], SlFormatNumber.prototype, "minimumSignificantDigits", 2);
-__decorateClass([
-  property({ attribute: "maximum-significant-digits", type: Number })
-], SlFormatNumber.prototype, "maximumSignificantDigits", 2);
-
-export {
-  SlFormatNumber
-};

package/dist/chunks/chunk.HZY36HHO.js

@@ -1,181 +0,0 @@
-import {
-  icon_styles_default
-} from "./chunk.QLXRCYS4.js";
-import {
-  getIconLibrary,
-  unwatchIcon,
-  watchIcon
-} from "./chunk.ZL53POKZ.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/icon/icon.component.ts
-import { html } from "lit";
-import { isTemplateResult } from "lit/directive-helpers.js";
-import { property, state } from "lit/decorators.js";
-var CACHEABLE_ERROR = Symbol();
-var RETRYABLE_ERROR = Symbol();
-var parser;
-var iconCache = /* @__PURE__ */ new Map();
-var SlIcon = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.initialRender = false;
-    this.svg = null;
-    this.label = "";
-    this.library = "default";
-  }
-  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
-  async resolveIcon(url, library) {
-    var _a;
-    let fileData;
-    if (library == null ? void 0 : library.spriteSheet) {
-      this.svg = html`<svg part="svg">
-        <use part="use" href="${url}"></use>
-      </svg>`;
-      return this.svg;
-    }
-    try {
-      fileData = await fetch(url, { mode: "cors" });
-      if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
-    } catch (e) {
-      return RETRYABLE_ERROR;
-    }
-    try {
-      const div = document.createElement("div");
-      div.innerHTML = await fileData.text();
-      const svg = div.firstElementChild;
-      if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg") return CACHEABLE_ERROR;
-      if (!parser) parser = new DOMParser();
-      const doc = parser.parseFromString(svg.outerHTML, "text/html");
-      const svgEl = doc.body.querySelector("svg");
-      if (!svgEl) return CACHEABLE_ERROR;
-      svgEl.part.add("svg");
-      return document.adoptNode(svgEl);
-    } catch (e) {
-      return CACHEABLE_ERROR;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    watchIcon(this);
-  }
-  firstUpdated() {
-    this.initialRender = true;
-    this.setIcon();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unwatchIcon(this);
-  }
-  getIconSource() {
-    const library = getIconLibrary(this.library);
-    if (this.name && library) {
-      return {
-        url: library.resolver(this.name),
-        fromLibrary: true
-      };
-    }
-    return {
-      url: this.src,
-      fromLibrary: false
-    };
-  }
-  handleLabelChange() {
-    const hasLabel = typeof this.label === "string" && this.label.length > 0;
-    if (hasLabel) {
-      this.setAttribute("role", "img");
-      this.setAttribute("aria-label", this.label);
-      this.removeAttribute("aria-hidden");
-    } else {
-      this.removeAttribute("role");
-      this.removeAttribute("aria-label");
-      this.setAttribute("aria-hidden", "true");
-    }
-  }
-  async setIcon() {
-    var _a;
-    const { url, fromLibrary } = this.getIconSource();
-    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
-    if (!url) {
-      this.svg = null;
-      return;
-    }
-    let iconResolver = iconCache.get(url);
-    if (!iconResolver) {
-      iconResolver = this.resolveIcon(url, library);
-      iconCache.set(url, iconResolver);
-    }
-    if (!this.initialRender) {
-      return;
-    }
-    const svg = await iconResolver;
-    if (svg === RETRYABLE_ERROR) {
-      iconCache.delete(url);
-    }
-    if (url !== this.getIconSource().url) {
-      return;
-    }
-    if (isTemplateResult(svg)) {
-      this.svg = svg;
-      if (library) {
-        await this.updateComplete;
-        const shadowSVG = this.shadowRoot.querySelector("[part='svg']");
-        if (typeof library.mutator === "function" && shadowSVG) {
-          library.mutator(shadowSVG);
-        }
-      }
-      return;
-    }
-    switch (svg) {
-      case RETRYABLE_ERROR:
-      case CACHEABLE_ERROR:
-        this.svg = null;
-        this.emit("sl-error");
-        break;
-      default:
-        this.svg = svg.cloneNode(true);
-        (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
-        this.emit("sl-load");
-    }
-  }
-  render() {
-    return this.svg;
-  }
-};
-SlIcon.styles = [component_styles_default, icon_styles_default];
-__decorateClass([
-  state()
-], SlIcon.prototype, "svg", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlIcon.prototype, "name", 2);
-__decorateClass([
-  property()
-], SlIcon.prototype, "src", 2);
-__decorateClass([
-  property()
-], SlIcon.prototype, "label", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlIcon.prototype, "library", 2);
-__decorateClass([
-  watch("label")
-], SlIcon.prototype, "handleLabelChange", 1);
-__decorateClass([
-  watch(["name", "src", "library"])
-], SlIcon.prototype, "setIcon", 1);
-
-export {
-  SlIcon
-};

package/dist/chunks/chunk.I56YA2FE.js

@@ -1,109 +0,0 @@
-import {
-  avatar_styles_default
-} from "./chunk.K35GSB4N.js";
-import {
-  SlIcon
-} from "./chunk.HZY36HHO.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/avatar/avatar.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-var SlAvatar = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.hasError = false;
-    this.image = "";
-    this.label = "";
-    this.initials = "";
-    this.loading = "eager";
-    this.shape = "circle";
-  }
-  handleImageChange() {
-    this.hasError = false;
-  }
-  handleImageLoadError() {
-    this.hasError = true;
-    this.emit("sl-error");
-  }
-  render() {
-    const avatarWithImage = html`
-      <img
-        part="image"
-        class="avatar__image"
-        src="${this.image}"
-        loading="${this.loading}"
-        alt=""
-        @error="${this.handleImageLoadError}"
-      />
-    `;
-    let avatarWithoutImage = html``;
-    if (this.initials) {
-      avatarWithoutImage = html`<div part="initials" class="avatar__initials">${this.initials}</div>`;
-    } else {
-      avatarWithoutImage = html`
-        <div part="icon" class="avatar__icon" aria-hidden="true">
-          <slot name="icon">
-            <sl-icon name="person-fill" library="system"></sl-icon>
-          </slot>
-        </div>
-      `;
-    }
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      avatar: true,
-      "avatar--circle": this.shape === "circle",
-      "avatar--rounded": this.shape === "rounded",
-      "avatar--square": this.shape === "square"
-    })}
-        role="img"
-        aria-label=${this.label}
-      >
-        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
-      </div>
-    `;
-  }
-};
-SlAvatar.styles = [component_styles_default, avatar_styles_default];
-SlAvatar.dependencies = {
-  "sl-icon": SlIcon
-};
-__decorateClass([
-  state()
-], SlAvatar.prototype, "hasError", 2);
-__decorateClass([
-  property()
-], SlAvatar.prototype, "image", 2);
-__decorateClass([
-  property()
-], SlAvatar.prototype, "label", 2);
-__decorateClass([
-  property()
-], SlAvatar.prototype, "initials", 2);
-__decorateClass([
-  property()
-], SlAvatar.prototype, "loading", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlAvatar.prototype, "shape", 2);
-__decorateClass([
-  watch("image")
-], SlAvatar.prototype, "handleImageChange", 1);
-
-export {
-  SlAvatar
-};

package/dist/chunks/chunk.I5WFQYZE.js

@@ -1,11 +0,0 @@
-import {
-  SlRelativeTime
-} from "./chunk.C2TY2O26.js";
-
-// src/components/relative-time/relative-time.ts
-var relative_time_default = SlRelativeTime;
-SlRelativeTime.define("sl-relative-time");
-
-export {
-  relative_time_default
-};

package/dist/chunks/chunk.ICQBJXN3.js

@@ -1,11 +0,0 @@
-import {
-  SlProgressRing
-} from "./chunk.BZ2VS2FQ.js";
-
-// src/components/progress-ring/progress-ring.ts
-var progress_ring_default = SlProgressRing;
-SlProgressRing.define("sl-progress-ring");
-
-export {
-  progress_ring_default
-};

package/dist/chunks/chunk.IE4TYRVL.js

@@ -1,11 +0,0 @@
-import {
-  SlAvatar
-} from "./chunk.I56YA2FE.js";
-
-// src/components/avatar/avatar.ts
-var avatar_default = SlAvatar;
-SlAvatar.define("sl-avatar");
-
-export {
-  avatar_default
-};

package/dist/chunks/chunk.IFNZ32RQ.js

@@ -1,25 +0,0 @@
-import {
-  SlInclude
-} from "./chunk.URUWFFVY.js";
-
-// src/react/include/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-include";
-SlInclude.define("sl-include");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlInclude,
-  react: React,
-  events: {
-    onSlLoad: "sl-load",
-    onSlError: "sl-error"
-  },
-  displayName: "SlInclude"
-});
-var include_default = reactWrapper;
-
-export {
-  include_default
-};

package/dist/chunks/chunk.IGTQGR6B.js

@@ -1,63 +0,0 @@
-import {
-  tab_panel_styles_default
-} from "./chunk.BQSEJD7X.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/tab-panel/tab-panel.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-var id = 0;
-var SlTabPanel = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.attrId = ++id;
-    this.componentId = `sl-tab-panel-${this.attrId}`;
-    this.name = "";
-    this.active = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.id = this.id.length > 0 ? this.id : this.componentId;
-    this.setAttribute("role", "tabpanel");
-  }
-  handleActiveChange() {
-    this.setAttribute("aria-hidden", this.active ? "false" : "true");
-  }
-  render() {
-    return html`
-      <slot
-        part="base"
-        class=${classMap({
-      "tab-panel": true,
-      "tab-panel--active": this.active
-    })}
-      ></slot>
-    `;
-  }
-};
-SlTabPanel.styles = [component_styles_default, tab_panel_styles_default];
-__decorateClass([
-  property({ reflect: true })
-], SlTabPanel.prototype, "name", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlTabPanel.prototype, "active", 2);
-__decorateClass([
-  watch("active")
-], SlTabPanel.prototype, "handleActiveChange", 1);
-
-export {
-  SlTabPanel
-};