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

package/dist/chunks/chunk.NBKDLFEY.js

@@ -1,201 +0,0 @@
-import {
-  icon_styles_default
-} from "./chunk.SVIWEI6P.js";
-import {
-  getIconLibrary,
-  unwatchIcon,
-  watchIcon
-} from "./chunk.2DA7CIOQ.js";
-import {
-  SynergyElement
-} from "./chunk.HQUF2ZAX.js";
-import {
-  __decorateClass,
-  __spreadValues
-} from "./chunk.PM7NIY3M.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
-};

package/dist/chunks/chunk.O3LUPMYG.js

@@ -1,372 +0,0 @@
-import {
-  component_styles_default
-} from "./chunk.4NMNW5OM.js";
-
-// src/components/input/input.styles.ts
-import { css as css2 } from "lit";
-
-// src/styles/form-control.styles.ts
-import { css } from "lit";
-var form_control_styles_default = css`
-	/* stylelint-disable */
-  .form-control .form-control__label {
-    display: none;
-  }
-
-  .form-control .form-control__help-text {
-    display: none;
-  }
-
-  /* Label */
-  .form-control--has-label .form-control__label {
-    display: inline-block;
-    color: var(--syn-input-label-color);
-    margin-bottom: var(--syn-spacing-3x-small);
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: var(--syn-input-label-font-size-small);
-  }
-
-  .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--syn-input-label-font-size-medium);
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: var(--syn-input-label-font-size-large);
-  }
-
-  :host([required]) .form-control--has-label .form-control__label::after {
-    content: var(--syn-input-required-content);
-    margin-inline-start: var(--syn-input-required-content-offset);
-    color: var(--syn-input-required-content-color);
-  }
-
-  /* Help text */
-  .form-control--has-help-text .form-control__help-text {
-    display: block;
-    color: var(--syn-input-help-text-color);
-    margin-top: var(--syn-spacing-3x-small);
-  }
-
-  .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: var(--syn-input-help-text-font-size-small);
-  }
-
-  .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--syn-input-help-text-font-size-medium);
-  }
-
-  .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: var(--syn-input-help-text-font-size-large);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--syn-spacing-2x-small);
-  }
-`;
-
-// src/components/input/input.styles.ts
-var input_styles_default = css2`
-	/* stylelint-disable */
-  ${component_styles_default}
-  ${form_control_styles_default}
-
-  :host {
-    display: block;
-  }
-
-  .input {
-    flex: 1 1 auto;
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: start;
-    position: relative;
-    width: 100%;
-    font-family: var(--syn-input-font-family);
-    font-weight: var(--syn-input-font-weight);
-    letter-spacing: var(--syn-input-letter-spacing);
-    vertical-align: middle;
-    overflow: hidden;
-    cursor: text;
-    transition:
-      var(--syn-transition-fast) color,
-      var(--syn-transition-fast) border,
-      var(--syn-transition-fast) box-shadow,
-      var(--syn-transition-fast) background-color;
-  }
-
-  /* Standard inputs */
-  .input--standard {
-    background-color: var(--syn-input-background-color);
-    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
-  }
-
-  .input--standard:hover:not(.input--disabled) {
-    background-color: var(--syn-input-background-color-hover);
-    border-color: var(--syn-input-border-color-hover);
-  }
-
-  .input--standard.input--focused:not(.input--disabled) {
-    background-color: var(--syn-input-background-color-focus);
-    border-color: var(--syn-input-border-color-focus);
-    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);
-  }
-
-  .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--syn-input-color-focus);
-  }
-
-  .input--standard.input--disabled {
-    background-color: var(--syn-input-background-color-disabled);
-    border-color: var(--syn-input-border-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .input--standard.input--disabled .input__control {
-    color: var(--syn-input-color-disabled);
-  }
-
-  .input--standard.input--disabled .input__control::placeholder {
-    color: var(--syn-input-placeholder-color-disabled);
-  }
-
-  /* Filled inputs */
-  .input--filled {
-    border: none;
-    background-color: var(--syn-input-filled-background-color);
-    color: var(--syn-input-color);
-  }
-
-  .input--filled:hover:not(.input--disabled) {
-    background-color: var(--syn-input-filled-background-color-hover);
-  }
-
-  .input--filled.input--focused:not(.input--disabled) {
-    background-color: var(--syn-input-filled-background-color-focus);
-    outline: var(--syn-focus-ring);
-    outline-offset: var(--syn-focus-ring-offset);
-  }
-
-  .input--filled.input--disabled {
-    background-color: var(--syn-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .input__control {
-    flex: 1 1 auto;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    min-width: 0;
-    height: 100%;
-    color: var(--syn-input-color);
-    border: none;
-    background: inherit;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    cursor: inherit;
-    -webkit-appearance: none;
-  }
-
-  .input__control::-webkit-search-decoration,
-  .input__control::-webkit-search-cancel-button,
-  .input__control::-webkit-search-results-button,
-  .input__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
-  }
-
-  .input__control:-webkit-autofill,
-  .input__control:-webkit-autofill:hover,
-  .input__control:-webkit-autofill:focus,
-  .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-background-color-hover) inset !important;
-    -webkit-text-fill-color: var(--syn-color-primary-500);
-    caret-color: var(--syn-input-color);
-  }
-
-  .input--filled .input__control:-webkit-autofill,
-  .input--filled .input__control:-webkit-autofill:hover,
-  .input--filled .input__control:-webkit-autofill:focus,
-  .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-filled-background-color) inset !important;
-  }
-
-  .input__control::placeholder {
-    color: var(--syn-input-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .input:hover:not(.input--disabled) .input__control {
-    color: var(--syn-input-color-hover);
-  }
-
-  .input__control:focus {
-    outline: none;
-  }
-
-  .input__prefix,
-  .input__suffix {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    cursor: default;
-  }
-
-  .input__prefix ::slotted(syn-icon),
-  .input__suffix ::slotted(syn-icon) {
-    color: var(--syn-input-icon-color);
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .input--small {
-    border-radius: var(--syn-input-border-radius-small);
-    font-size: var(--syn-input-font-size-small);
-    height: var(--syn-input-height-small);
-  }
-
-  .input--small .input__control {
-    height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);
-    padding: 0 var(--syn-input-spacing-small);
-  }
-
-  .input--small .input__clear,
-  .input--small .input__password-toggle {
-    width: calc(1em + var(--syn-input-spacing-small) * 2);
-  }
-
-  .input--small .input__prefix ::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-small);
-  }
-
-  .input--small .input__suffix ::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-small);
-  }
-
-  .input--medium {
-    border-radius: var(--syn-input-border-radius-medium);
-    font-size: var(--syn-input-font-size-medium);
-    height: var(--syn-input-height-medium);
-  }
-
-  .input--medium .input__control {
-    height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);
-    padding: 0 var(--syn-input-spacing-medium);
-  }
-
-  .input--medium .input__clear,
-  .input--medium .input__password-toggle {
-    width: calc(1em + var(--syn-input-spacing-medium) * 2);
-  }
-
-  .input--medium .input__prefix ::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-medium);
-  }
-
-  .input--medium .input__suffix ::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-medium);
-  }
-
-  .input--large {
-    border-radius: var(--syn-input-border-radius-large);
-    font-size: var(--syn-input-font-size-large);
-    height: var(--syn-input-height-large);
-  }
-
-  .input--large .input__control {
-    height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);
-    padding: 0 var(--syn-input-spacing-large);
-  }
-
-  .input--large .input__clear,
-  .input--large .input__password-toggle {
-    width: calc(1em + var(--syn-input-spacing-large) * 2);
-  }
-
-  .input--large .input__prefix ::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-large);
-  }
-
-  .input--large .input__suffix ::slotted(*) {
-    margin-inline-end: var(--syn-input-spacing-large);
-  }
-
-  /*
-   * Pill modifier
-   */
-
-  .input--pill.input--small {
-    border-radius: var(--syn-input-height-small);
-  }
-
-  .input--pill.input--medium {
-    border-radius: var(--syn-input-height-medium);
-  }
-
-  .input--pill.input--large {
-    border-radius: var(--syn-input-height-large);
-  }
-
-  /*
-   * Clearable + Password Toggle
-   */
-
-  .input__clear:not(.input__clear--visible) {
-    visibility: hidden;
-  }
-
-  .input__clear,
-  .input__password-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: inherit;
-    color: var(--syn-input-icon-color);
-    border: none;
-    background: none;
-    padding: 0;
-    transition: var(--syn-transition-fast) color;
-    cursor: pointer;
-  }
-
-  .input__clear:hover,
-  .input__password-toggle:hover {
-    color: var(--syn-input-icon-color-hover);
-  }
-
-  .input__clear:focus,
-  .input__password-toggle:focus {
-    outline: none;
-  }
-
-  .input--empty .input__clear {
-    visibility: hidden;
-  }
-
-  /* Don't show the browser's password toggle in Edge */
-  ::-ms-reveal {
-    display: none;
-  }
-
-  /* Hide the built-in number spinner */
-  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
-  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-
-  .input--no-spin-buttons input[type='number'] {
-    -moz-appearance: textfield;
-  }
-`;
-
-export {
-  input_styles_default
-};

package/dist/chunks/chunk.PM7NIY3M.js

@@ -1,35 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
-};
-
-export {
-  __spreadValues,
-  __spreadProps,
-  __decorateClass
-};