@viur/shoelace 0.6.2-v2.9.0 → 0.7.0-v2.11.2

package/README.md

@@ -85,16 +85,6 @@ Shoelace is an open source project and contributions are encouraged! If you're i
 
 ## License
 
-Shoelace is designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). It’s available under the terms of the MIT license.
-
-Designing, developing, and supporting this library requires a lot of time, effort, and skill. I’d like to keep it open source so everyone can use it, but that doesn’t provide me with any income.
-
-**Therefore, if you’re using my software to make a profit,** I respectfully ask that you help [fund its development](https://github.com/sponsors/claviska) by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.
-
-👇 Your support is very much appreciated! 👇
-
-- [Become a sponsor](https://github.com/sponsors/claviska)
-- [Star on GitHub](https://github.com/shoelace-style/shoelace/stargazers)
-- [Follow on Twitter](https://twitter.com/shoelace_style)
+Shoelace was created by [Cory LaViska](https://twitter.com/claviska) and is available under the terms of the MIT license.
 
 Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾

package/cdn/chunks/chunk.22CQCVND.js

@@ -0,0 +1,29 @@
+import {
+  RawBone
+} from "./chunk.4I4BZIWF.js";
+
+// src/components/bone/bones/stringBone.ts
+var StringBone = class extends RawBone {
+  getEditor(value, boneName, lang = null) {
+    const stringBone = super.getEditor(value, boneName, lang);
+    stringBone.addEventListener("keypress", (keypress_event) => {
+      if (keypress_event.key !== "Enter")
+        return;
+      const name = lang === null ? `${this.boneName}` : `${this.boneName}.${lang}`;
+      const multipleWrapper = this.mainInstance.bone.querySelector(`[data-multiplebone='${name}']`);
+      const childs = multipleWrapper.querySelectorAll("sl-input");
+      if (stringBone === childs[childs.length - 1]) {
+        const elem = this.addInput(null, lang);
+        multipleWrapper.appendChild(elem);
+        elem.getElementsByTagName("sl-input")[0].updateComplete.then(() => {
+          elem.getElementsByTagName("sl-input")[0].focus();
+        });
+      }
+    });
+    return stringBone;
+  }
+};
+
+export {
+  StringBone
+};

package/cdn/chunks/chunk.2CQ2LXZD.js

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

package/cdn/chunks/chunk.2CUAVJ7T.js

@@ -0,0 +1,23 @@
+import {
+  SlImageComparer
+} from "./chunk.RXCNU72T.js";
+
+// src/react/image-comparer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-image-comparer";
+SlImageComparer.define("sl-image-comparer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlImageComparer,
+  react: React,
+  events: {
+    onSlChange: "sl-change"
+  },
+  displayName: "SlImageComparer"
+});
+var image_comparer_default = reactWrapper;
+
+export {
+  image_comparer_default
+};

package/cdn/chunks/chunk.2CYJOARV.js

@@ -0,0 +1,50 @@
+import {
+  e,
+  i,
+  t
+} from "./chunk.JJNPZ52S.js";
+import {
+  w
+} from "./chunk.K6MEZQO6.js";
+
+// node_modules/lit/node_modules/lit-html/directives/class-map.js
+var e2 = e(class extends i {
+  constructor(t2) {
+    var _a;
+    if (super(t2), t2.type !== t.ATTRIBUTE || "class" !== t2.name || ((_a = t2.strings) == null ? void 0 : _a.length) > 2)
+      throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(t2) {
+    return " " + Object.keys(t2).filter((s) => t2[s]).join(" ") + " ";
+  }
+  update(s, [i2]) {
+    var _a, _b;
+    if (void 0 === this.it) {
+      this.it = /* @__PURE__ */ new Set(), void 0 !== s.strings && (this.st = new Set(s.strings.join(" ").split(/\s/).filter((t2) => "" !== t2)));
+      for (const t2 in i2)
+        i2[t2] && !((_a = this.st) == null ? void 0 : _a.has(t2)) && this.it.add(t2);
+      return this.render(i2);
+    }
+    const r = s.element.classList;
+    for (const t2 of this.it)
+      t2 in i2 || (r.remove(t2), this.it.delete(t2));
+    for (const t2 in i2) {
+      const s2 = !!i2[t2];
+      s2 === this.it.has(t2) || ((_b = this.st) == null ? void 0 : _b.has(t2)) || (s2 ? (r.add(t2), this.it.add(t2)) : (r.remove(t2), this.it.delete(t2)));
+    }
+    return w;
+  }
+});
+
+export {
+  e2 as e
+};
+/*! Bundled license information:
+
+lit-html/directives/class-map.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/

package/cdn/chunks/chunk.2MNYUFQC.js

@@ -0,0 +1,28 @@
+import {
+  component_styles_default
+} from "./chunk.IPXZTT5M.js";
+import {
+  i
+} from "./chunk.K6MEZQO6.js";
+
+// src/components/icon/icon.styles.ts
+var icon_styles_default = i`
+  ${component_styles_default}
+
+  :host {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    box-sizing: content-box !important;
+  }
+
+  svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+`;
+
+export {
+  icon_styles_default
+};

package/cdn/chunks/chunk.2OP362GE.js

@@ -0,0 +1,23 @@
+import {
+  SlSplitPanel
+} from "./chunk.WMN6YAJP.js";
+
+// src/react/split-panel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-split-panel";
+SlSplitPanel.define("sl-split-panel");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlSplitPanel,
+  react: React,
+  events: {
+    onSlReposition: "sl-reposition"
+  },
+  displayName: "SlSplitPanel"
+});
+var split_panel_default = reactWrapper;
+
+export {
+  split_panel_default
+};

package/cdn/chunks/chunk.2YNZWVRE.js

@@ -0,0 +1,290 @@
+import {
+  rating_styles_default
+} from "./chunk.6RCSP5HH.js";
+import {
+  o as o2
+} from "./chunk.LL3ECD2Q.js";
+import {
+  o
+} from "./chunk.JQO2OESN.js";
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  LocalizeController
+} from "./chunk.5F6KWJDE.js";
+import {
+  e
+} from "./chunk.2CYJOARV.js";
+import {
+  SlIcon
+} from "./chunk.XHFHTCOF.js";
+import {
+  watch
+} from "./chunk.D5WGC2A2.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n,
+  r,
+  t2 as t
+} from "./chunk.H2PUQDPU.js";
+import {
+  x2 as x
+} from "./chunk.K6MEZQO6.js";
+import {
+  __decorateClass
+} from "./chunk.WBPCYWDE.js";
+
+// src/components/rating/rating.component.ts
+var SlRating = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hoverValue = 0;
+    this.isHovering = false;
+    this.label = "";
+    this.value = 0;
+    this.max = 5;
+    this.precision = 1;
+    this.readonly = false;
+    this.disabled = false;
+    this.getSymbol = () => '<sl-icon name="star-fill" library="system"></sl-icon>';
+  }
+  getValueFromMousePosition(event) {
+    return this.getValueFromXCoordinate(event.clientX);
+  }
+  getValueFromTouchPosition(event) {
+    return this.getValueFromXCoordinate(event.touches[0].clientX);
+  }
+  getValueFromXCoordinate(coordinate) {
+    const isRtl = this.localize.dir() === "rtl";
+    const { left, right, width } = this.rating.getBoundingClientRect();
+    const value = isRtl ? this.roundToPrecision((right - coordinate) / width * this.max, this.precision) : this.roundToPrecision((coordinate - left) / width * this.max, this.precision);
+    return clamp(value, 0, this.max);
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      return;
+    }
+    this.setValue(this.getValueFromMousePosition(event));
+    this.emit("sl-change");
+  }
+  setValue(newValue) {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    this.value = newValue === this.value ? 0 : newValue;
+    this.isHovering = false;
+  }
+  handleKeyDown(event) {
+    const isLtr = this.localize.dir() === "ltr";
+    const isRtl = this.localize.dir() === "rtl";
+    const oldValue = this.value;
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    if (event.key === "ArrowDown" || isLtr && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight") {
+      const decrement = event.shiftKey ? 1 : this.precision;
+      this.value = Math.max(0, this.value - decrement);
+      event.preventDefault();
+    }
+    if (event.key === "ArrowUp" || isLtr && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft") {
+      const increment = event.shiftKey ? 1 : this.precision;
+      this.value = Math.min(this.max, this.value + increment);
+      event.preventDefault();
+    }
+    if (event.key === "Home") {
+      this.value = 0;
+      event.preventDefault();
+    }
+    if (event.key === "End") {
+      this.value = this.max;
+      event.preventDefault();
+    }
+    if (this.value !== oldValue) {
+      this.emit("sl-change");
+    }
+  }
+  handleMouseEnter(event) {
+    this.isHovering = true;
+    this.hoverValue = this.getValueFromMousePosition(event);
+  }
+  handleMouseMove(event) {
+    this.hoverValue = this.getValueFromMousePosition(event);
+  }
+  handleMouseLeave() {
+    this.isHovering = false;
+  }
+  handleTouchStart(event) {
+    this.isHovering = true;
+    this.hoverValue = this.getValueFromTouchPosition(event);
+    event.preventDefault();
+  }
+  handleTouchMove(event) {
+    this.hoverValue = this.getValueFromTouchPosition(event);
+  }
+  handleTouchEnd(event) {
+    this.isHovering = false;
+    this.setValue(this.hoverValue);
+    this.emit("sl-change");
+    event.preventDefault();
+  }
+  roundToPrecision(numberToRound, precision = 0.5) {
+    const multiplier = 1 / precision;
+    return Math.ceil(numberToRound * multiplier) / multiplier;
+  }
+  handleHoverValueChange() {
+    this.emit("sl-hover", {
+      detail: {
+        phase: "move",
+        value: this.hoverValue
+      }
+    });
+  }
+  handleIsHoveringChange() {
+    this.emit("sl-hover", {
+      detail: {
+        phase: this.isHovering ? "start" : "end",
+        value: this.hoverValue
+      }
+    });
+  }
+  /** Sets focus on the rating. */
+  focus(options) {
+    this.rating.focus(options);
+  }
+  /** Removes focus from the rating. */
+  blur() {
+    this.rating.blur();
+  }
+  render() {
+    const isRtl = this.localize.dir() === "rtl";
+    const counter = Array.from(Array(this.max).keys());
+    let displayValue = 0;
+    if (this.disabled || this.readonly) {
+      displayValue = this.value;
+    } else {
+      displayValue = this.isHovering ? this.hoverValue : this.value;
+    }
+    return x`
+      <div
+        part="base"
+        class=${e({
+      rating: true,
+      "rating--readonly": this.readonly,
+      "rating--disabled": this.disabled,
+      "rating--rtl": isRtl
+    })}
+        role="slider"
+        aria-label=${this.label}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        aria-readonly=${this.readonly ? "true" : "false"}
+        aria-valuenow=${this.value}
+        aria-valuemin=${0}
+        aria-valuemax=${this.max}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mouseenter=${this.handleMouseEnter}
+        @touchstart=${this.handleTouchStart}
+        @mouseleave=${this.handleMouseLeave}
+        @touchend=${this.handleTouchEnd}
+        @mousemove=${this.handleMouseMove}
+        @touchmove=${this.handleTouchMove}
+      >
+        <span class="rating__symbols">
+          ${counter.map((index) => {
+      if (displayValue > index && displayValue < index + 1) {
+        return x`
+                <span
+                  class=${e({
+          rating__symbol: true,
+          "rating__partial-symbol-container": true,
+          "rating__symbol--hover": this.isHovering && Math.ceil(displayValue) === index + 1
+        })}
+                  role="presentation"
+                  @mouseenter=${this.handleMouseEnter}
+                >
+                  <div
+                    style=${o2({
+          clipPath: isRtl ? `inset(0 ${(displayValue - index) * 100}% 0 0)` : `inset(0 0 0 ${(displayValue - index) * 100}%)`
+        })}
+                  >
+                    ${o(this.getSymbol(index + 1))}
+                  </div>
+                  <div
+                    class="rating__partial--filled"
+                    style=${o2({
+          clipPath: isRtl ? `inset(0 0 0 ${100 - (displayValue - index) * 100}%)` : `inset(0 ${100 - (displayValue - index) * 100}% 0 0)`
+        })}
+                  >
+                    ${o(this.getSymbol(index + 1))}
+                  </div>
+                </span>
+              `;
+      }
+      return x`
+              <span
+                class=${e({
+        rating__symbol: true,
+        "rating__symbol--hover": this.isHovering && Math.ceil(displayValue) === index + 1,
+        "rating__symbol--active": displayValue >= index + 1
+      })}
+                role="presentation"
+                @mouseenter=${this.handleMouseEnter}
+              >
+                ${o(this.getSymbol(index + 1))}
+              </span>
+            `;
+    })}
+        </span>
+      </div>
+    `;
+  }
+};
+SlRating.styles = rating_styles_default;
+SlRating.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  e2(".rating")
+], SlRating.prototype, "rating", 2);
+__decorateClass([
+  r()
+], SlRating.prototype, "hoverValue", 2);
+__decorateClass([
+  r()
+], SlRating.prototype, "isHovering", 2);
+__decorateClass([
+  n()
+], SlRating.prototype, "label", 2);
+__decorateClass([
+  n({ type: Number })
+], SlRating.prototype, "value", 2);
+__decorateClass([
+  n({ type: Number })
+], SlRating.prototype, "max", 2);
+__decorateClass([
+  n({ type: Number })
+], SlRating.prototype, "precision", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRating.prototype, "readonly", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlRating.prototype, "disabled", 2);
+__decorateClass([
+  n()
+], SlRating.prototype, "getSymbol", 2);
+__decorateClass([
+  t({ passive: true })
+], SlRating.prototype, "handleTouchMove", 1);
+__decorateClass([
+  watch("hoverValue")
+], SlRating.prototype, "handleHoverValueChange", 1);
+__decorateClass([
+  watch("isHovering")
+], SlRating.prototype, "handleIsHoveringChange", 1);
+
+export {
+  SlRating
+};

package/cdn/chunks/chunk.335GOAHX.js

@@ -0,0 +1,198 @@
+import {
+  emit
+} from "./chunk.LPDDR7BK.js";
+
+// src/resources/resource.zh.ts
+var resouce = {
+  pageBtn: {
+    total: (total) => {
+      return `\u5171${total}\u6761\u8BB0\u5F55`;
+    },
+    first: "\u7B2C\u4E00\u9875",
+    last: "\u6700\u540E\u4E00\u9875",
+    prev: "\u4E0A\u4E00\u9875",
+    next: "\u4E0B\u4E00\u9875"
+  },
+  transferSelectedFun: (selected, filterSize, _total) => {
+    return selected > 0 ? selected + "/" + filterSize + " \u9879" : filterSize + " \u9879";
+  },
+  seachTransfer: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9",
+  noData: "\u6CA1\u6709\u4EFB\u4F55\u6570\u636E",
+  date: {
+    showHeaderStr: function(date, mode) {
+      if (mode === "date") {
+        return date.getFullYear() + "\u5E74" + String(date.getMonth() + 1).padStart(2, "0") + "\u6708";
+      }
+      if (mode === "month") {
+        return date.getFullYear() + "\u5E74";
+      } else {
+        const nv = date.getFullYear();
+        const n = parseInt(String(nv / 20));
+        const year = n * 20;
+        return year.toString().padStart(4, "0") + "\u5E74-" + (year + 19).toString().padStart(4, "0") + "\u5E74";
+      }
+    },
+    months: ["\u4E00\u6708", "\u4E8C\u6708", "\u4E09\u6708", "\u56DB\u6708", "\u4E94\u6708", "\u516D\u6708", "\u4E03\u6708", "\u516B\u6708", "\u4E5D\u6708", "\u5341\u6708", "\u5341\u4E00\u6708", "\u5341\u4E8C\u6708"],
+    weekDays: ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"]
+  }
+};
+var resource_zh_default = resouce;
+
+// src/resources/resource.de.ts
+var resouce2 = {
+  pageBtn: {
+    total: (total) => {
+      return `${total} Entr\xE4ge`;
+    },
+    first: "Erster",
+    last: "Lezter",
+    prev: "vorheriger",
+    next: "n\xE4chster"
+  },
+  transferSelectedFun: (selected, filterSize, _total) => {
+    let temp = filterSize > 0 ? " Eintr\xE4ge" : " Eintrag";
+    return selected > 0 ? selected + "/" + filterSize + temp : filterSize + "" + temp;
+  },
+  transferSourceTitle: "Quelle",
+  transferTargetTitle: "Ziel",
+  seachTransfer: "suche....",
+  noData: "keine Daten!",
+  date: {
+    showHeaderStr: function(date, mode) {
+      if (mode === "date") {
+        return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0");
+      }
+      if (mode === "month") {
+        return date.getFullYear() + "";
+      } else {
+        const nv = date.getFullYear();
+        const n = parseInt(String(nv / 20));
+        const year = n * 20;
+        return year.toString().padStart(4, "0") + " - " + (year + 19).toString().padStart(4, "0");
+      }
+    },
+    months: ["Januar", "Februar", "M\xE4rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober ", "November", "Dezember"],
+    weekDays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
+  }
+};
+var resource_de_default = resouce2;
+
+// src/resources/resource.en.ts
+var resouce3 = {
+  pageBtn: {
+    total: (total) => {
+      return `${total} items`;
+    },
+    first: "First",
+    last: "Last",
+    prev: "Prev",
+    next: "Next"
+  },
+  transferSelectedFun: (selected, filterSize, _total) => {
+    let temp = filterSize > 0 ? " items" : " item";
+    return selected > 0 ? selected + "/" + filterSize + temp : filterSize + "" + temp;
+  },
+  transferSourceTitle: "source",
+  transferTargetTitle: "target",
+  seachTransfer: "search....",
+  noData: "No Data!",
+  date: {
+    showHeaderStr: function(date, mode) {
+      if (mode === "date") {
+        return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0");
+      }
+      if (mode === "month") {
+        return date.getFullYear() + "";
+      } else {
+        const nv = date.getFullYear();
+        const n = parseInt(String(nv / 20));
+        const year = n * 20;
+        return year.toString().padStart(4, "0") + " - " + (year + 19).toString().padStart(4, "0");
+      }
+    },
+    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October ", "November", "December"],
+    weekDays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sta"]
+  }
+};
+var resource_en_default = resouce3;
+
+// src/utilities/getResouce.ts
+var currentLocal = "en";
+var resouce_changeEvent = `window-resouce-change-event`;
+async function setLocal(locale, loadOtherResouce) {
+  if (!getSupportLocals().includes(locale)) {
+    throw new Error(`\u4E0D\u652F\u6301\u7684\u7EC4\u4EF6\u8BED\u8A00!\u652F\u6301\u7684\u8BED\u8A00\u6709${getSupportLocals().join(",")}`);
+  }
+  const localData = await loaderLocal(locale);
+  if (loadOtherResouce) {
+    loadOtherResouce(localData);
+  }
+  if (locale != currentLocal) {
+    currentLocal = locale;
+    emit(window, resouce_changeEvent, {
+      detail: {
+        local: locale,
+        data: localData
+      }
+    });
+  }
+  return localData;
+}
+var resourceMap = { zh: resource_zh_default };
+async function loaderLocal(locale) {
+  if (resourceMap[locale]) {
+    return resourceMap[locale];
+  }
+  if (locale === "de") {
+    resourceMap["de"] = resource_de_default;
+    return resource_de_default;
+  } else if (locale === "en") {
+    resourceMap["en"] = resource_en_default;
+    return resource_en_default;
+  }
+  return resourceMap["zh"];
+}
+function getLocal() {
+  return currentLocal;
+}
+var supportLocals = ["zh", "en", "de"];
+function getSupportLocals() {
+  return supportLocals;
+}
+function setSupportLocals(...locale) {
+  supportLocals.push(...locale);
+}
+var resultCache = {};
+function getResouceValue(keys) {
+  let resultMap = resultCache[getLocal()];
+  if (resultMap && resultMap.has(keys)) {
+    return resultMap.get(keys);
+  }
+  let array = keys.split(".");
+  let obj = resourceMap[getLocal()];
+  if (!obj) {
+    obj = resource_en_default;
+  }
+  let result = obj;
+  for (let k of array) {
+    result = result[k];
+  }
+  if (!resultMap) {
+    resultMap = /* @__PURE__ */ new Map();
+    resultCache[getLocal()] = resultMap;
+  }
+  if (result != void 0) {
+    resultMap.set(keys, result);
+  }
+  return result;
+}
+window.setLocal = setLocal;
+
+export {
+  resouce_changeEvent,
+  setLocal,
+  getLocal,
+  getSupportLocals,
+  setSupportLocals,
+  getResouceValue
+};

package/cdn/chunks/chunk.35OWUPLY.js

@@ -0,0 +1,11 @@
+import {
+  SlTab
+} from "./chunk.DQAK4EX4.js";
+
+// src/components/tab/tab.ts
+var tab_default = SlTab;
+SlTab.define("sl-tab");
+
+export {
+  tab_default
+};