@kdcloudjs/shoelace 1.0.45 → 1.0.47

package/dist/chunks/chunk.KFDYZGU4.js

@@ -0,0 +1,231 @@
+import {
+  details_styles_default
+} from "./chunk.ARV7TBVG.js";
+import {
+  getAnimation,
+  setDefaultAnimation
+} from "./chunk.WO7ALQNH.js";
+import {
+  waitForEvent
+} from "./chunk.B4BZKR24.js";
+import {
+  animateTo,
+  shimKeyframesHeightAuto,
+  stopAnimations
+} from "./chunk.VHWATTYS.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  SlIcon
+} from "./chunk.76XQGDRG.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.KEQQGSOY.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/details/details.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var SlDetails = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.open = false;
+    this.disabled = false;
+  }
+  firstUpdated() {
+    this.body.style.height = this.open ? "auto" : "0";
+    if (this.open) {
+      this.details.open = true;
+    }
+    this.detailsObserver = new MutationObserver((changes) => {
+      for (const change of changes) {
+        if (change.type === "attributes" && change.attributeName === "open") {
+          if (this.details.open) {
+            this.show();
+          } else {
+            this.hide();
+          }
+        }
+      }
+    });
+    this.detailsObserver.observe(this.details, { attributes: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.detailsObserver) == null ? void 0 : _a.disconnect();
+  }
+  handleSummaryClick(event) {
+    event.preventDefault();
+    if (!this.disabled) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
+    }
+    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      this.details.open = true;
+      const slShow = this.emit("sl-show", { cancelable: true });
+      if (slShow.defaultPrevented) {
+        this.open = false;
+        this.details.open = false;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.show", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.emit("sl-after-show");
+    } else {
+      const slHide = this.emit("sl-hide", { cancelable: true });
+      if (slHide.defaultPrevented) {
+        this.details.open = true;
+        this.open = true;
+        return;
+      }
+      await stopAnimations(this.body);
+      const { keyframes, options } = getAnimation(this, "details.hide", { dir: this.localize.dir() });
+      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+      this.body.style.height = "auto";
+      this.details.open = false;
+      this.emit("sl-after-hide");
+    }
+  }
+  /** Shows the details. */
+  async show() {
+    if (this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = true;
+    return waitForEvent(this, "sl-after-show");
+  }
+  /** Hides the details */
+  async hide() {
+    if (!this.open || this.disabled) {
+      return void 0;
+    }
+    this.open = false;
+    return waitForEvent(this, "sl-after-hide");
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    return html`
+      <details
+        part="base"
+        class=${classMap({
+      details: true,
+      "details--open": this.open,
+      "details--disabled": this.disabled,
+      "details--rtl": isRtl
+    })}
+      >
+        <summary
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <sl-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></sl-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <sl-icon library="system" name=${isRtl ? "chevron-left" : "chevron-right"}></sl-icon>
+            </slot>
+          </span>
+
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+        </summary>
+
+        <div class="details__body" role="region" aria-labelledby="header">
+          <slot part="content" id="content" class="details__content"></slot>
+        </div>
+      </details>
+    `;
+  }
+};
+SlDetails.styles = [component_styles_default, details_styles_default];
+SlDetails.dependencies = {
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  query(".details")
+], SlDetails.prototype, "details", 2);
+__decorateClass([
+  query(".details__header")
+], SlDetails.prototype, "header", 2);
+__decorateClass([
+  query(".details__body")
+], SlDetails.prototype, "body", 2);
+__decorateClass([
+  query(".details__expand-icon-slot")
+], SlDetails.prototype, "expandIconSlot", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDetails.prototype, "open", 2);
+__decorateClass([
+  property()
+], SlDetails.prototype, "summary", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDetails.prototype, "disabled", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDetails.prototype, "handleOpenChange", 1);
+setDefaultAnimation("details.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+setDefaultAnimation("details.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+
+export {
+  SlDetails
+};

package/dist/chunks/chunk.KGDLXYWL.js

@@ -0,0 +1,212 @@
+import {
+  col_styles_default
+} from "./chunk.DCUBK6Y2.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.KEQQGSOY.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/col/col.component.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600
+};
+var responsiveArray = ["xxl", "xl", "lg", "md", "sm", "xs"];
+var SlCol = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.mediaQueryLists = /* @__PURE__ */ new Map();
+    this.currentBreakpoint = "xs";
+    this.rowContext = { gutter: [0, 0], wrap: true };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setupResponsiveObserver();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanupResponsiveObserver();
+  }
+  setupResponsiveObserver() {
+    Object.entries(breakpoints).forEach(([key, minWidth]) => {
+      const breakpoint = key;
+      const mediaQuery = minWidth === 0 ? "(min-width: 0px)" : `(min-width: ${minWidth}px)`;
+      const mql = window.matchMedia(mediaQuery);
+      const handler = (e) => {
+        if (e.matches) {
+          this.currentBreakpoint = breakpoint;
+          this.requestUpdate();
+        }
+      };
+      mql.addEventListener("change", handler);
+      this.mediaQueryLists.set(breakpoint, mql);
+      if (mql.matches) {
+        this.currentBreakpoint = breakpoint;
+      }
+    });
+  }
+  cleanupResponsiveObserver() {
+    this.mediaQueryLists.forEach((mql) => {
+      mql.removeEventListener("change", () => {
+      });
+    });
+    this.mediaQueryLists.clear();
+  }
+  getResponsiveProps() {
+    for (const bp of responsiveArray) {
+      const bpIndex = responsiveArray.indexOf(bp);
+      const currentIndex = responsiveArray.indexOf(this.currentBreakpoint);
+      if (bpIndex >= currentIndex) {
+        const config = this[bp];
+        if (config !== void 0) {
+          if (typeof config === "number" || typeof config === "string") {
+            return { span: config };
+          }
+          return config;
+        }
+      }
+    }
+    return {};
+  }
+  parseFlex(flex) {
+    if (flex === "auto") {
+      return "1 1 auto";
+    }
+    if (typeof flex === "number") {
+      return `${flex} ${flex} auto`;
+    }
+    if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(String(flex))) {
+      return `0 0 ${flex}`;
+    }
+    return String(flex);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateHostStyles();
+  }
+  updateHostStyles() {
+    var _a, _b, _c, _d, _e, _f;
+    const responsiveProps = this.getResponsiveProps();
+    const mergedSpan = (_a = this.span) != null ? _a : responsiveProps.span;
+    const mergedOffset = (_b = this.offset) != null ? _b : responsiveProps.offset;
+    const mergedOrder = (_c = this.order) != null ? _c : responsiveProps.order;
+    const mergedPush = (_d = this.push) != null ? _d : responsiveProps.push;
+    const mergedPull = (_e = this.pull) != null ? _e : responsiveProps.pull;
+    const mergedFlex = (_f = this.flex) != null ? _f : responsiveProps.flex;
+    const hostStyle = this.style;
+    hostStyle.flex = "";
+    hostStyle.maxWidth = "";
+    hostStyle.marginLeft = "";
+    hostStyle.order = "";
+    hostStyle.left = "";
+    hostStyle.right = "";
+    hostStyle.paddingLeft = "";
+    hostStyle.paddingRight = "";
+    hostStyle.display = "";
+    hostStyle.minWidth = "";
+    if (mergedSpan !== void 0) {
+      const spanNum = Number(mergedSpan);
+      if (spanNum === 0) {
+        hostStyle.display = "none";
+      } else {
+        const percentage = spanNum / 24 * 100;
+        hostStyle.flex = `0 0 ${percentage}%`;
+        hostStyle.maxWidth = `${percentage}%`;
+      }
+    }
+    if (mergedOffset !== void 0 && mergedOffset !== 0) {
+      const offsetNum = Number(mergedOffset);
+      const percentage = offsetNum / 24 * 100;
+      hostStyle.marginLeft = `${percentage}%`;
+    }
+    if (mergedOrder !== void 0) {
+      hostStyle.order = String(mergedOrder);
+    }
+    if (mergedPush !== void 0 && mergedPush !== 0) {
+      const pushNum = Number(mergedPush);
+      const percentage = pushNum / 24 * 100;
+      hostStyle.left = `${percentage}%`;
+    }
+    if (mergedPull !== void 0 && mergedPull !== 0) {
+      const pullNum = Number(mergedPull);
+      const percentage = pullNum / 24 * 100;
+      hostStyle.right = `${percentage}%`;
+    }
+    if (mergedFlex !== void 0) {
+      hostStyle.flex = this.parseFlex(mergedFlex);
+      if (!this.rowContext.wrap) {
+        hostStyle.minWidth = "0";
+      }
+    }
+    const [gutterH] = this.rowContext.gutter;
+    if (gutterH) {
+      hostStyle.paddingLeft = `${gutterH / 2}px`;
+      hostStyle.paddingRight = `${gutterH / 2}px`;
+    }
+  }
+  render() {
+    return html`
+      <div part="base" class="col">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+SlCol.styles = [component_styles_default, col_styles_default];
+__decorateClass([
+  state()
+], SlCol.prototype, "currentBreakpoint", 2);
+__decorateClass([
+  state()
+], SlCol.prototype, "rowContext", 2);
+__decorateClass([
+  property({ type: Number })
+], SlCol.prototype, "span", 2);
+__decorateClass([
+  property({ type: Number })
+], SlCol.prototype, "offset", 2);
+__decorateClass([
+  property({ type: Number })
+], SlCol.prototype, "order", 2);
+__decorateClass([
+  property({ type: Number })
+], SlCol.prototype, "push", 2);
+__decorateClass([
+  property({ type: Number })
+], SlCol.prototype, "pull", 2);
+__decorateClass([
+  property()
+], SlCol.prototype, "flex", 2);
+__decorateClass([
+  property({ type: Object })
+], SlCol.prototype, "xs", 2);
+__decorateClass([
+  property({ type: Object })
+], SlCol.prototype, "sm", 2);
+__decorateClass([
+  property({ type: Object })
+], SlCol.prototype, "md", 2);
+__decorateClass([
+  property({ type: Object })
+], SlCol.prototype, "lg", 2);
+__decorateClass([
+  property({ type: Object })
+], SlCol.prototype, "xl", 2);
+__decorateClass([
+  property({ type: Object })
+], SlCol.prototype, "xxl", 2);
+
+export {
+  SlCol
+};