@synergy-design-system/components 1.0.0-main.2 → 1.0.0-main.4

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, SickDesignSystem
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -3,7 +3,9 @@
 Synergy Web Component library based on [shoelace](https://shoelace.style/).
 
 ## Local setup
+
 ### Using the vendor cli
+
 The vendor cli is taking care about updating our code base according to a new version of shoelace.
 
 To change the shoelace version, that should be downloaded, change the version in the config of `./scripts/vendorism.js`.
@@ -12,3 +14,7 @@ If code in our components library should be updated to this new shoelace version
 
 All shoelace files are per default readonly and are disabled from being changed. To change this files can be ejected. This can be done via:
 `pnpm vendor.eject "src/declaration.d.ts"`.
+
+### Adding events to the output
+
+To add events to the component output, make sure to add them to `src/scripts/vendorism.js` into the `events` array that is defined there. After a new build run `via pnpm build`, you will see the new event files and the `events/events.ts` file will be regenerated.

package/dist/chunks/chunk.2FIY3TX5.js

@@ -0,0 +1,32 @@
+import {
+  spinner_styles_default
+} from "./chunk.N2I6HVX3.js";
+import {
+  LocalizeController
+} from "./chunk.R6VNLE6N.js";
+import {
+  SynergyElement
+} from "./chunk.SLLG4KJR.js";
+
+// src/components/spinner/spinner.component.ts
+import { html } from "lit";
+var SynSpinner = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+  }
+  render() {
+    return html`
+      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+};
+SynSpinner.styles = spinner_styles_default;
+
+export {
+  SynSpinner
+};
+//# sourceMappingURL=chunk.2FIY3TX5.js.map

package/dist/chunks/chunk.2FIY3TX5.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/spinner/spinner.component.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './spinner.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */\nexport default class SynSpinner extends SynergyElement {\n  static styles: CSSResultGroup = styles;\n\n  private readonly localize = new LocalizeController(this);\n\n  render() {\n    return html`\n      <svg part=\"base\" class=\"spinner\" role=\"progressbar\" aria-label=${this.localize.term('loading')}>\n        <circle class=\"spinner__track\"></circle>\n        <circle class=\"spinner__indicator\"></circle>\n      </svg>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAMA,SAAS,YAAY;AAmBrB,IAAqB,aAArB,cAAwC,eAAe;AAAA,EAAvD;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAAA;AAAA,EAEvD,SAAS;AACP,WAAO;AAAA,uEAC4D,KAAK,SAAS,KAAK,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlG;AACF;AAbqB,WACZ,SAAyB;",
+  "names": []
+}

package/dist/chunks/chunk.5OIEI73E.js

@@ -0,0 +1,45 @@
+import {
+  library_default_default
+} from "./chunk.6C4JXZZN.js";
+import {
+  library_system_default
+} from "./chunk.U7ZJ22QM.js";
+
+// src/components/icon/library.ts
+var registry = [library_default_default, library_system_default];
+var watchedIcons = [];
+function watchIcon(icon) {
+  watchedIcons.push(icon);
+}
+function unwatchIcon(icon) {
+  watchedIcons = watchedIcons.filter((el) => el !== icon);
+}
+function getIconLibrary(name) {
+  return registry.find((lib) => lib.name === name);
+}
+function registerIconLibrary(name, options) {
+  unregisterIconLibrary(name);
+  registry.push({
+    name,
+    resolver: options.resolver,
+    mutator: options.mutator,
+    spriteSheet: options.spriteSheet
+  });
+  watchedIcons.forEach((icon) => {
+    if (icon.library === name) {
+      icon.setIcon();
+    }
+  });
+}
+function unregisterIconLibrary(name) {
+  registry = registry.filter((lib) => lib.name !== name);
+}
+
+export {
+  watchIcon,
+  unwatchIcon,
+  getIconLibrary,
+  registerIconLibrary,
+  unregisterIconLibrary
+};
+//# sourceMappingURL=chunk.5OIEI73E.js.map

package/dist/chunks/chunk.5OIEI73E.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/library.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport defaultLibrary from './library.default.js';\nimport systemLibrary from './library.system.js';\nimport type SynIcon from '../icon/icon.js';\n\nexport type IconLibraryResolver = (name: string) => string;\nexport type IconLibraryMutator = (svg: SVGElement) => void;\nexport interface IconLibrary {\n  name: string;\n  resolver: IconLibraryResolver;\n  mutator?: IconLibraryMutator;\n  spriteSheet?: boolean;\n}\n\nlet registry: IconLibrary[] = [defaultLibrary, systemLibrary];\nlet watchedIcons: SynIcon[] = [];\n\n/** Adds an icon to the list of watched icons. */\nexport function watchIcon(icon: SynIcon) {\n  watchedIcons.push(icon);\n}\n\n/** Removes an icon from the list of watched icons. */\nexport function unwatchIcon(icon: SynIcon) {\n  watchedIcons = watchedIcons.filter(el => el !== icon);\n}\n\n/** Returns a library from the registry. */\nexport function getIconLibrary(name?: string) {\n  return registry.find(lib => lib.name === name);\n}\n\n/** Adds an icon library to the registry, or overrides an existing one. */\nexport function registerIconLibrary(name: string, options: Omit<IconLibrary, 'name'>) {\n  unregisterIconLibrary(name);\n  registry.push({\n    name,\n    resolver: options.resolver,\n    mutator: options.mutator,\n    spriteSheet: options.spriteSheet\n  });\n\n  // Redraw watched icons\n  watchedIcons.forEach(icon => {\n    if (icon.library === name) {\n      icon.setIcon();\n    }\n  });\n}\n\n/** Removes an icon library from the registry. */\nexport function unregisterIconLibrary(name: string) {\n  registry = registry.filter(lib => lib.name !== name);\n}\n"],
+  "mappings": ";;;;;;;;AAmBA,IAAI,WAA0B,CAAC,yBAAgB,sBAAa;AAC5D,IAAI,eAA0B,CAAC;AAGxB,SAAS,UAAU,MAAe;AACvC,eAAa,KAAK,IAAI;AACxB;AAGO,SAAS,YAAY,MAAe;AACzC,iBAAe,aAAa,OAAO,QAAM,OAAO,IAAI;AACtD;AAGO,SAAS,eAAe,MAAe;AAC5C,SAAO,SAAS,KAAK,SAAO,IAAI,SAAS,IAAI;AAC/C;AAGO,SAAS,oBAAoB,MAAc,SAAoC;AACpF,wBAAsB,IAAI;AAC1B,WAAS,KAAK;AAAA,IACZ;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,SAAS,QAAQ;AAAA,IACjB,aAAa,QAAQ;AAAA,EACvB,CAAC;AAGD,eAAa,QAAQ,UAAQ;AAC3B,QAAI,KAAK,YAAY,MAAM;AACzB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF,CAAC;AACH;AAGO,SAAS,sBAAsB,MAAc;AAClD,aAAW,SAAS,OAAO,SAAO,IAAI,SAAS,IAAI;AACrD;",
+  "names": []
+}

package/dist/chunks/chunk.5PZUAKCS.js

@@ -0,0 +1,202 @@
+import {
+  SynergyElement
+} from "./chunk.SLLG4KJR.js";
+import {
+  icon_styles_default
+} from "./chunk.BREU4ILT.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.5OIEI73E.js";
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.DJOAQ4JU.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";
+
+// src/internal/watch.ts
+function watch(propertyName, options) {
+  const resolvedOptions = __spreadValues({
+    waitUntilFirstUpdate: false
+  }, options);
+  return (proto, decoratedFnName) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property2) => {
+        const key = property2;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              this[decoratedFnName](oldValue, newValue);
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
+    };
+  };
+}
+
+// src/components/icon/icon.component.ts
+var CACHEABLE_ERROR = Symbol();
+var RETRYABLE_ERROR = Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var SynIcon = class extends SynergyElement {
+  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) {
+      return html`<svg part="svg">
+        <use part="use" href="${url}"></use>
+      </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;
+      return;
+    }
+    switch (svg) {
+      case RETRYABLE_ERROR:
+      case CACHEABLE_ERROR:
+        this.svg = null;
+        this.emit("syn-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("syn-load");
+    }
+  }
+  render() {
+    return this.svg;
+  }
+};
+SynIcon.styles = icon_styles_default;
+__decorateClass([
+  state()
+], SynIcon.prototype, "svg", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynIcon.prototype, "name", 2);
+__decorateClass([
+  property()
+], SynIcon.prototype, "src", 2);
+__decorateClass([
+  property()
+], SynIcon.prototype, "label", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynIcon.prototype, "library", 2);
+__decorateClass([
+  watch("label")
+], SynIcon.prototype, "handleLabelChange", 1);
+__decorateClass([
+  watch(["name", "src", "library"])
+], SynIcon.prototype, "setIcon", 1);
+
+export {
+  watch,
+  SynIcon
+};
+//# sourceMappingURL=chunk.5PZUAKCS.js.map

package/dist/chunks/chunk.5PZUAKCS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/icon.component.ts", "../../src/internal/watch.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';\nimport { html } from 'lit';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { property, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './icon.styles.js';\n\nimport type { CSSResultGroup, HTMLTemplateResult } from 'lit';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\ninterface IconSource {\n  url?: string;\n  fromLibrary: boolean;\n}\n\n/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://synergy.style/components/icon\n * @status stable\n * @since 2.0\n *\n * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */\nexport default class SynIcon extends SynergyElement {\n  static styles: CSSResultGroup = styles;\n\n  private initialRender = false;\n\n  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */\n  private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {\n    let fileData: Response;\n\n    if (library?.spriteSheet) {\n      return html`<svg part=\"svg\">\n        <use part=\"use\" href=\"${url}\"></use>\n      </svg>`;\n    }\n\n    try {\n      fileData = await fetch(url, { mode: 'cors' });\n      if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n    } catch {\n      return RETRYABLE_ERROR;\n    }\n\n    try {\n      const div = document.createElement('div');\n      div.innerHTML = await fileData.text();\n\n      const svg = div.firstElementChild;\n      if (svg?.tagName?.toLowerCase() !== 'svg') return CACHEABLE_ERROR;\n\n      if (!parser) parser = new DOMParser();\n      const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n      const svgEl = doc.body.querySelector('svg');\n      if (!svgEl) return CACHEABLE_ERROR;\n\n      svgEl.part.add('svg');\n      return document.adoptNode(svgEl);\n    } catch {\n      return CACHEABLE_ERROR;\n    }\n  }\n\n  @state() private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property({ reflect: true }) name?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /**\n   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n   * ignored by assistive devices.\n   */\n  @property() label = '';\n\n  /** The name of a registered custom icon library. */\n  @property({ reflect: true }) library = 'default';\n\n  connectedCallback() {\n    super.connectedCallback();\n    watchIcon(this);\n  }\n\n  firstUpdated() {\n    this.initialRender = true;\n    this.setIcon();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unwatchIcon(this);\n  }\n\n  private getIconSource(): IconSource {\n    const library = getIconLibrary(this.library);\n    if (this.name && library) {\n      return {\n        url: library.resolver(this.name),\n        fromLibrary: true\n      };\n    }\n\n    return {\n      url: this.src,\n      fromLibrary: false\n    };\n  }\n\n  @watch('label')\n  handleLabelChange() {\n    const hasLabel = typeof this.label === 'string' && this.label.length > 0;\n\n    if (hasLabel) {\n      this.setAttribute('role', 'img');\n      this.setAttribute('aria-label', this.label);\n      this.removeAttribute('aria-hidden');\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  @watch(['name', 'src', 'library'])\n  async setIcon() {\n    const { url, fromLibrary } = this.getIconSource();\n    const library = fromLibrary ? getIconLibrary(this.library) : undefined;\n\n    if (!url) {\n      this.svg = null;\n      return;\n    }\n\n    let iconResolver = iconCache.get(url);\n    if (!iconResolver) {\n      iconResolver = this.resolveIcon(url, library);\n      iconCache.set(url, iconResolver);\n    }\n\n    // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n    if (!this.initialRender) {\n      return;\n    }\n\n    const svg = await iconResolver;\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(url);\n    }\n\n    if (url !== this.getIconSource().url) {\n      // If the url has changed while fetching the icon, ignore this request\n      return;\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n      return;\n    }\n\n    switch (svg) {\n      case RETRYABLE_ERROR:\n      case CACHEABLE_ERROR:\n        this.svg = null;\n        this.emit('syn-error');\n        break;\n      default:\n        this.svg = svg.cloneNode(true) as SVGElement;\n        library?.mutator?.(this.svg);\n        this.emit('syn-load');\n    }\n  }\n\n  render() {\n    return this.svg;\n  }\n}\n", "// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport type { LitElement } from 'lit';\n\ntype UpdateHandler = (prev?: unknown, next?: unknown) => void;\n\ntype NonUndefined<A> = A extends undefined ? never : A;\n\ntype UpdateHandlerFunctionKeys<T extends object> = {\n  [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;\n}[keyof T];\n\ninterface WatchOptions {\n  /**\n   * If true, will only start watching after the initial update/render\n   */\n  waitUntilFirstUpdate?: boolean;\n}\n\n/**\n * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an\n * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the\n * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n *\n * Usage:\n *\n * @watch('propName')\n * handlePropChange(oldValue, newValue) {\n *   ...\n * }\n */\nexport function watch(propertyName: string | string[], options?: WatchOptions) {\n  const resolvedOptions: Required<WatchOptions> = {\n    waitUntilFirstUpdate: false,\n    ...options\n  };\n  return <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => {\n    // @ts-expect-error - update is a protected property\n    const { update } = proto;\n    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];\n\n    // @ts-expect-error - update is a protected property\n    proto.update = function (this: ElemClass, changedProps: Map<keyof ElemClass, ElemClass[keyof ElemClass]>) {\n      watchedProperties.forEach(property => {\n        const key = property as keyof ElemClass;\n        if (changedProps.has(key)) {\n          const oldValue = changedProps.get(key);\n          const newValue = this[key];\n\n          if (oldValue !== newValue) {\n            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {\n              (this[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);\n            }\n          }\n        }\n      });\n\n      update.call(this, changedProps);\n    };\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["property"]
+}

package/dist/chunks/chunk.6C4JXZZN.js

@@ -0,0 +1,15 @@
+import {
+  getBasePath
+} from "./chunk.C7624ITA.js";
+
+// src/components/icon/library.default.ts
+var library = {
+  name: "default",
+  resolver: (name) => getBasePath(`assets/icons/${name}.svg`)
+};
+var library_default_default = library;
+
+export {
+  library_default_default
+};
+//# sourceMappingURL=chunk.6C4JXZZN.js.map

package/dist/chunks/chunk.6C4JXZZN.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/library.default.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { getBasePath } from '../../utilities/base-path.js';\nimport type { IconLibrary } from './library.js';\n\nconst library: IconLibrary = {\n  name: 'default',\n  resolver: name => getBasePath(`assets/icons/${name}.svg`)\n};\n\nexport default library;\n"],
+  "mappings": ";;;;;AASA,IAAM,UAAuB;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU,UAAQ,YAAY,gBAAgB,IAAI,MAAM;AAC1D;AAEA,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/chunks/chunk.7EGSHKGV.js

@@ -0,0 +1,12 @@
+import {
+  SynButton
+} from "./chunk.FUYWF5Y2.js";
+
+// src/components/button/button.ts
+var button_default = SynButton;
+SynButton.define("syn-button");
+
+export {
+  button_default
+};
+//# sourceMappingURL=chunk.7EGSHKGV.js.map

package/dist/chunks/chunk.7EGSHKGV.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button/button.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport SynButton from './button.component.js';\n\nexport * from './button.component.js';\nexport default SynButton;\n\nSynButton.define('syn-button');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-button': SynButton;\n  }\n}\n"],
+  "mappings": ";;;;;AASA,IAAO,iBAAQ;AAEf,UAAU,OAAO,YAAY;",
+  "names": []
+}

package/dist/chunks/chunk.A3SKDWCT.js

@@ -0,0 +1,42 @@
+// src/translations/en.ts
+import { registerTranslation } from "@shoelace-style/localize";
+var translation = {
+  $code: "en",
+  $name: "English",
+  $dir: "ltr",
+  carousel: "Carousel",
+  clearEntry: "Clear entry",
+  close: "Close",
+  copied: "Copied",
+  copy: "Copy",
+  currentValue: "Current value",
+  error: "Error",
+  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,
+  hidePassword: "Hide password",
+  loading: "Loading",
+  nextSlide: "Next slide",
+  numOptionsSelected: (num) => {
+    if (num === 0)
+      return "No options selected";
+    if (num === 1)
+      return "1 option selected";
+    return `${num} options selected`;
+  },
+  previousSlide: "Previous slide",
+  progress: "Progress",
+  remove: "Remove",
+  resize: "Resize",
+  scrollToEnd: "Scroll to end",
+  scrollToStart: "Scroll to start",
+  selectAColorFromTheScreen: "Select a color from the screen",
+  showPassword: "Show password",
+  slideNum: (slide) => `Slide ${slide}`,
+  toggleColorFormat: "Toggle color format"
+};
+registerTranslation(translation);
+var en_default = translation;
+
+export {
+  en_default
+};
+//# sourceMappingURL=chunk.A3SKDWCT.js.map

package/dist/chunks/chunk.A3SKDWCT.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/translations/en.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'en',\n  $name: 'English',\n  $dir: 'ltr',\n\n  carousel: 'Carousel',\n  clearEntry: 'Clear entry',\n  close: 'Close',\n  copied: 'Copied',\n  copy: 'Copy',\n  currentValue: 'Current value',\n  error: 'Error',\n  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,\n  hidePassword: 'Hide password',\n  loading: 'Loading',\n  nextSlide: 'Next slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'No options selected';\n    if (num === 1) return '1 option selected';\n    return `${num} options selected`;\n  },\n  previousSlide: 'Previous slide',\n  progress: 'Progress',\n  remove: 'Remove',\n  resize: 'Resize',\n  scrollToEnd: 'Scroll to end',\n  scrollToStart: 'Scroll to start',\n  selectAColorFromTheScreen: 'Select a color from the screen',\n  showPassword: 'Show password',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Toggle color format'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"],
+  "mappings": ";AAMA,SAAS,2BAA2B;AAGpC,IAAM,cAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EAEN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW,CAAC,OAAO,UAAU,eAAe,KAAK,OAAO,KAAK;AAAA,EAC7D,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,oBAAoB,SAAO;AACzB,QAAI,QAAQ;AAAG,aAAO;AACtB,QAAI,QAAQ;AAAG,aAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,UAAU,WAAS,SAAS,KAAK;AAAA,EACjC,mBAAmB;AACrB;AAEA,oBAAoB,WAAW;AAE/B,IAAO,aAAQ;",
+  "names": []
+}