smoothly 0.1.112 → 0.1.115

package/dist/esm/smoothly-input.entry.js

@@ -1,198 +0,0 @@
-import { r as registerInstance, i as createEvent, h, k as Host } from './index-02a70ac1.js';
-import { d as dist$1 } from './index-a5a08f46.js';
-import { d as dist } from './index-401c6ce3.js';
-import './_commonjsHelpers-8fe71198.js';
-
-const styleCss = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:transform 0.1s;transform-origin:top left;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
-
-let SmoothlyInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.smoothlyChanged = createEvent(this, "smoothlyChanged", 7);
-    this.keepFocusOnReRender = false;
-    this.type = "text";
-    this.required = false;
-    this.minLength = 0;
-    this.showLabel = true;
-    this.maxLength = Number.POSITIVE_INFINITY;
-    this.autocomplete = true;
-    this.disabled = false;
-  }
-  get formatter() {
-    let result;
-    switch (this.type) {
-      case "price":
-        result = dist.get("price", this.currency);
-        break;
-      default:
-        result = dist.get(this.type, getLocale());
-        break;
-    }
-    return result || dist.get("text");
-  }
-  newState(state) {
-    const formatter = this.formatter;
-    return formatter.format(dist.StateEditor.copy(formatter.unformat(dist.StateEditor.copy(state))));
-  }
-  valueWatcher(value, before) {
-    if (this.lastValue != value) {
-      this.lastValue = value;
-      this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(value), selection: this.state.selection }).value });
-    }
-    if (value != before)
-      this.smoothlyChanged.emit({ name: this.name, value });
-  }
-  onCurrency() {
-    this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).value, pattern: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).pattern });
-  }
-  componentWillLoad() {
-    const value = this.formatter.toString(this.value) || "";
-    const start = value.length;
-    this.state = this.newState({
-      value,
-      selection: { start, end: start, direction: "none" },
-    });
-  }
-  componentDidRender() {
-    if (this.keepFocusOnReRender) {
-      this.inputElement.focus();
-      this.keepFocusOnReRender = false;
-    }
-  }
-  async getFormData(name) {
-    const result = {};
-    const form = document.forms.namedItem(name);
-    if (form) {
-      const elements = form.elements;
-      for (let i = 0; i < elements.length; i++) {
-        const element = elements.item(i);
-        if (this.hasNameAndValue(element) && element.name)
-          result[element.name] = element.value;
-      }
-      const smoothlyInputs = form.getElementsByTagName("smoothly-input");
-      for (let i = 0; i < smoothlyInputs.length; i++) {
-        const element = smoothlyInputs.item(i);
-        if (this.hasNameAndValue(element) && element.name)
-          result[element.name] = element.value;
-      }
-    }
-    return result;
-  }
-  hasNameAndValue(element) {
-    return (typeof element.name == "string" && typeof element.value == "string");
-  }
-  async setKeepFocusOnReRender(keepFocus) {
-    this.keepFocusOnReRender = keepFocus;
-  }
-  async setSelectionRange(start, end, direction) {
-    this.state = this.newState(Object.assign(Object.assign({}, this.state), { selection: { start, end, direction: direction != undefined ? direction : this.state.selection.direction } }));
-    const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
-    this.updateBackend(after, this.inputElement);
-  }
-  onBlur(event) { }
-  onFocus(event) {
-    const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
-    if (event.target)
-      this.updateBackend(after, event.target);
-  }
-  onClick(event) {
-    const backend = event.target;
-    this.state = Object.assign(Object.assign({}, this.state), { value: backend.value, selection: {
-        start: backend.selectionStart != undefined ? backend.selectionStart : backend.value.length,
-        end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
-        direction: backend.selectionDirection ? backend.selectionDirection : "none",
-      } });
-    const after = this.newState(Object.assign({}, this.state));
-    this.updateBackend(after, backend);
-  }
-  onKeyDown(event) {
-    if (event.key && !(event.key == "Unidentified")) {
-      const backend = event.target;
-      this.state = Object.assign(Object.assign({}, this.state), { value: backend.value, selection: {
-          start: backend.selectionStart != undefined ? backend.selectionStart : backend.value.length,
-          end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
-          direction: backend.selectionDirection ? backend.selectionDirection : "none",
-        } });
-      if ((!((event.ctrlKey || event.metaKey) && (event.key == "v" || event.key == "c")) && event.key.length == 1) ||
-        event.key == "ArrowLeft" ||
-        event.key == "ArrowRight" ||
-        event.key == "Delete" ||
-        event.key == "Backspace" ||
-        event.key == "Home" ||
-        event.key == "End") {
-        event.preventDefault();
-        this.processKey(event, backend);
-      }
-      else if (event.key == "ArrowUp" || event.key == "ArrowDown")
-        event.preventDefault();
-    }
-  }
-  onPaste(event) {
-    event.preventDefault();
-    let pasted = event.clipboardData ? event.clipboardData.getData("text") : "";
-    const backend = event.target;
-    pasted = this.expiresAutocompleteFix(backend, pasted);
-    for (const letter of pasted)
-      this.processKey({ key: letter }, backend);
-  }
-  onInput(event) {
-    var _a;
-    if (event.inputType == "insertReplacementText") {
-      this.processKey({ key: "a", ctrlKey: true }, event.target);
-      [...((_a = event.data) !== null && _a !== void 0 ? _a : "")].forEach(c => this.processKey({ key: c }, event.target));
-    }
-    else {
-      const backend = event.target;
-      let data = backend.value;
-      if (data) {
-        event.preventDefault();
-        this.processKey({ key: "a", ctrlKey: true }, backend);
-        data = this.expiresAutocompleteFix(backend, data);
-        for (const letter of data)
-          this.processKey({ key: letter }, backend);
-      }
-    }
-  }
-  expiresAutocompleteFix(backend, value) {
-    var _a;
-    if (((_a = backend.attributes.getNamedItem("autocomplete")) === null || _a === void 0 ? void 0 : _a.value) == "cc-exp")
-      value = value.match(/^20\d\d[.\D]*\d\d$/)
-        ? value.substring(value.length - 2, value.length) + value.substring(2, 4)
-        : value.match(/^(1[3-9]|[2-9]\d)[.\D]*\d\d$/)
-          ? value.substring(value.length - 2, value.length) + value.substring(0, 2)
-          : value.match(/^\d\d[.\D]*20\d\d$/)
-            ? value.substring(0, 2) + value.substring(value.length - 2, value.length)
-            : value;
-    return value;
-  }
-  processKey(event, backend) {
-    const after = dist.Action.apply(this.formatter, this.state, event);
-    this.updateBackend(after, backend);
-  }
-  updateBackend(after, backend) {
-    if (after.value != backend.value)
-      backend.value = after.value;
-    if (backend.selectionStart != undefined && after.selection.start != backend.selectionStart)
-      backend.selectionStart = after.selection.start;
-    if (backend.selectionEnd != undefined && after.selection.end != backend.selectionEnd)
-      backend.selectionEnd = after.selection.end;
-    backend.selectionDirection = after.selection.direction ? after.selection.direction : backend.selectionDirection;
-    this.state = after;
-    this.value = this.lastValue = this.formatter.fromString(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state))).value);
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("div", null, h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), h("label", { htmlFor: this.name }, h("slot", null)), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
-  }
-  static get watchers() { return {
-    "value": ["valueWatcher"],
-    "currency": ["onCurrency"]
-  }; }
-};
-function getLocale() {
-  const result = navigator.language;
-  return dist$1.Locale.is(result) ? result : dist$1.Language.is(result) ? dist$1.Locale.toLocale(result) : undefined;
-}
-SmoothlyInput.style = styleCss;
-
-export { SmoothlyInput as smoothly_input };

package/dist/esm/smoothly-item.entry.js

@@ -1,39 +0,0 @@
-import { r as registerInstance, i as createEvent, h, j as getElement } from './index-02a70ac1.js';
-
-const styleCss = "[selected].sc-smoothly-item-h{background-color:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-item-h{padding:.5em;cursor:pointer;background-color:rgb(var(--smoothly-default-shade));color:rgb(var(--smoothly-default-contrast));border:rgb(var(--smoothly-default-shade) solid 1px)}.sc-smoothly-item-h:hover{background-color:rgb(var(--smoothly-primary-color));color:rgb(var(--smoothly-primary-contrast))}";
-
-let Item = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.itemSelected = createEvent(this, "itemSelected", 7);
-  }
-  onSelectedChanged(value, old) {
-    if (value && !old)
-      this.itemSelected.emit();
-  }
-  onClick() {
-    this.selected = true;
-    this.itemSelected.emit();
-  }
-  componentDidLoad() {
-    if (this.selected)
-      this.itemSelected.emit();
-  }
-  async filter(filter) {
-    const result = !(this.element.hidden = filter
-      ? !((typeof this.value === "string" ? this.value : JSON.stringify(this.value)).toLowerCase().includes(filter) ||
-        this.element.innerText.toLowerCase().includes(filter))
-      : false);
-    return result;
-  }
-  render() {
-    return h("slot", null);
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "selected": ["onSelectedChanged"]
-  }; }
-};
-Item.style = styleCss;
-
-export { Item as smoothly_item };

package/dist/esm/smoothly-menu-options.entry.js

@@ -1,104 +0,0 @@
-import { r as registerInstance, h, k as Host, j as getElement } from './index-02a70ac1.js';
-
-const styleCss = ":host{max-height:300px;width:85%;max-height:var(--max-menu-height);box-sizing:border-box;background-color:rgb(var(--smoothly-default-color));border-radius:0.25em;color:rgb(var(--smoothly-primary-color));stroke:rgb(var(--smoothly-primary-color));fill:rgb(var(--smoothly-primary-color));box-shadow:0px 2px 24px rgba(64, 60, 57, 0.08), inset 0px 0px 1px rgba(64, 60, 57, 0.4);overflow-y:auto;cursor:pointer}:host:first-child{margin:10em}";
-
-let SmoothlyMenuOptions = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.filteredOptions = [];
-    this.highlightIndex = 0;
-    this.emptyMenuLabel = "No Options";
-    this.order = false;
-    this.options = [];
-    this.resetHighlightOnOptionsChange = true;
-  }
-  optionsChangeHandler(newOptions) {
-    this.highlightIndex = this.resetHighlightOnOptionsChange ? 0 : this.highlightIndex;
-  }
-  optionHoverHandler(event) {
-    if (event.detail.value)
-      this.setHighlight(event.detail.value);
-    event.stopPropagation();
-  }
-  async moveHighlight(step) {
-    if (this.filteredOptions.length > 0)
-      this.setHighlight((this.highlightIndex + step + this.filteredOptions.length) % this.filteredOptions.length, true);
-  }
-  async setHighlight(newIndex, scrollToHighlight = false) {
-    if (typeof newIndex == "number") {
-      this.highlightIndex = newIndex;
-      scrollToHighlight && this.scrollTo(this.highlightIndex);
-    }
-    else {
-      const value = newIndex;
-      let isHighlightSet = false;
-      this.filteredOptions.forEach((option, index) => {
-        const highlight = option.value == value;
-        this.highlightIndex = highlight ? index : this.highlightIndex;
-        highlight && scrollToHighlight && this.scrollTo(index);
-        isHighlightSet = highlight ? true : isHighlightSet;
-      });
-      if (!isHighlightSet)
-        this.setHighlight(0, true);
-    }
-  }
-  async getHighlighted() {
-    let result = undefined;
-    if (this.highlightIndex != undefined && this.filteredOptions.length > 0)
-      result = this.filteredOptions[this.highlightIndex];
-    return result;
-  }
-  async filterOptions(keyword, excludeValues = []) {
-    const keywordLowercase = keyword.toLowerCase();
-    this.filteredOptions = [];
-    for (const option of this.options) {
-      const names = option.name + (option.aliases ? option.aliases.join(" ") : "");
-      const isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value);
-      isVisible && this.filteredOptions.push(option);
-    }
-    this.order && this.sortOptions(keyword);
-  }
-  sortOptions(keyword) {
-    const keywordLowercase = keyword.toLowerCase();
-    this.filteredOptions.sort((a, b) => {
-      return this.getPriorityScore(a, keywordLowercase) - this.getPriorityScore(b, keywordLowercase);
-    });
-  }
-  getPriorityScore(option, keywordLowercase) {
-    let result = Number.MAX_SAFE_INTEGER;
-    const name = option.name;
-    const aliases = option.aliases ? option.aliases.join(" ") : "";
-    const names = `${name ? name : ""} ${aliases ? aliases : ""}`.toLowerCase();
-    if (name) {
-      result = names.split(" ").reduce((minIndex, word) => {
-        const index = word.indexOf(keywordLowercase);
-        return index != -1 && index < minIndex ? index : minIndex;
-      }, Number.MAX_SAFE_INTEGER);
-    }
-    return result;
-  }
-  scrollTo(optionIndex) {
-    var _a;
-    const optionHeight = (_a = this.firstOptionsElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
-    if (optionHeight) {
-      const menuHeight = this.element.getBoundingClientRect().height;
-      const scrollPosition = this.element.scrollTop;
-      const optionPosition = optionIndex * optionHeight;
-      const numOptionsInMenu = Math.floor(menuHeight / optionHeight);
-      if (optionPosition - optionHeight / 2 < scrollPosition)
-        this.element.scrollTo({ top: (optionIndex - 1) * optionHeight });
-      else if (scrollPosition < optionPosition + optionHeight - menuHeight)
-        this.element.scrollTo({ top: (optionIndex + 1 - numOptionsInMenu) * optionHeight });
-    }
-  }
-  render() {
-    return (h(Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("smoothly-option", { style: this.optionStyle, ref: el => index == 0 && (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement), value: option.value, name: option.name, divider: option.divider, "data-highlight": this.highlightIndex == index }, option.left ? h("div", { slot: "left" }, option.left) : undefined, option.right ? h("div", { slot: "right" }, option.right) : undefined)))) : (h("div", null, this.emptyMenuLabel))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "options": ["optionsChangeHandler"]
-  }; }
-};
-SmoothlyMenuOptions.style = styleCss;
-
-export { SmoothlyMenuOptions as smoothly_menu_options };

package/dist/esm/smoothly-notification.entry.js

@@ -1,63 +0,0 @@
-import { r as registerInstance, i as createEvent, h, k as Host } from './index-02a70ac1.js';
-
-const styleCss = ".sc-smoothly-notification-h{display:block;min-width:32.6%;min-height:3em;border-radius:5px;margin:0.5em}[hidden].sc-smoothly-notification-h{display:none}smoothly-trigger.sc-smoothly-notification{float:right;text-align:right;margin-right:0.2em}";
-
-let Notification = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.remove = createEvent(this, "remove", 7);
-    this.tick = {};
-    this.listener = notice => {
-      console.log("changed: ", notice);
-      if (notice.state == "closed")
-        this.remove.emit(notice);
-      else
-        this.tick = {};
-    };
-  }
-  get color() {
-    let result;
-    switch (this.notice.state) {
-      case "delayed":
-      case "warning":
-        result = "warning";
-        break;
-      case "success":
-        result = "success";
-        break;
-      case "executing":
-        result = "light";
-        break;
-      case "failed":
-        result = "danger";
-        break;
-      default:
-        result = "light";
-        break;
-    }
-    return result;
-  }
-  onTrigger(event) {
-    if (event.detail.name == "close") {
-      event.stopPropagation();
-      this.notice.close();
-    }
-  }
-  onUpdatedNotice(newValue, oldValue) {
-    if (oldValue)
-      oldValue.unlisten(this.listener);
-    newValue.listen(this.listener);
-  }
-  componentDidLoad() {
-    this.onUpdatedNotice(this.notice);
-  }
-  render() {
-    return (h(Host, { color: this.color, fill: "solid" }, h("smoothly-trigger", { fill: "clear", name: "close" }, h("smoothly-icon", { name: "close-circle-outline" })), h("p", null, this.notice.message)));
-  }
-  static get watchers() { return {
-    "notice": ["onUpdatedNotice"]
-  }; }
-};
-Notification.style = styleCss;
-
-export { Notification as smoothly_notification };

package/dist/esm/smoothly-notifier.entry.js

@@ -1,25 +0,0 @@
-import { r as registerInstance, h } from './index-02a70ac1.js';
-
-const styleCss = ".sc-smoothly-notifier-h{display:block}[hidden].sc-smoothly-notifier-h{display:none}.sc-smoothly-notifier-h>aside.sc-smoothly-notifier{display:flex;flex-wrap:wrap-reverse;align-content:stretch;justify-content:flex-start;position:fixed;bottom:3em;left:0;text-align:center;width:100%;z-index:100}";
-
-let Notifier = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.notices = [];
-  }
-  onNotice(event) {
-    this.notices = [...this.notices, event.detail];
-  }
-  onRemove(event) {
-    this.notices = [...this.notices.filter(n => n != event.detail)];
-  }
-  render() {
-    return [
-      h("slot", null),
-      h("aside", null, this.notices.map(n => (h("smoothly-notification", { notice: n })))),
-    ];
-  }
-};
-Notifier.style = styleCss;
-
-export { Notifier as smoothly_notifier };

package/dist/esm/smoothly-option.entry.js

@@ -1,29 +0,0 @@
-import { r as registerInstance, i as createEvent, h, k as Host, j as getElement } from './index-02a70ac1.js';
-
-const styleCss = ":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:0.7em 1em;margin-left:1px;margin-right:1px;background-color:transparent;position:relative}:host([data-highlight]){background-color:rgb(var(--smoothly-default-shade))}:host>div.middle{padding-left:0.5em;flex-shrink:1;width:100%}:host([divider]){margin-bottom:0.5em}::slotted([slot=right]){font-style:italic;white-space:nowrap}:host([divider])::after{position:absolute;height:1px;width:100%;left:0;bottom:-0.25em;content:\"\";background-color:rgba(var(--smoothly-dark-color))}";
-
-let SmoothlyOption = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.optionHover = createEvent(this, "optionHover", 7);
-    this.optionSelect = createEvent(this, "optionSelect", 7);
-    this.dataHighlight = false;
-    this.divider = false;
-  }
-  onHover(event) {
-    this.optionHover.emit({ name: this.name, value: this.value });
-  }
-  onSelect(event) {
-    if (this.value)
-      this.optionSelect.emit({ name: this.name, value: this.value });
-    else
-      throw `smoothly-option ${this.element.innerHTML} lacks value-property and can therefore not be selected`;
-  }
-  render() {
-    return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) }, h("slot", { name: "left" }), h("div", { class: "middle" }, this.name), h("slot", { name: "right" })));
-  }
-  get element() { return getElement(this); }
-};
-SmoothlyOption.style = styleCss;
-
-export { SmoothlyOption as smoothly_option };

package/dist/esm/smoothly-picker.entry.js

@@ -1,147 +0,0 @@
-import { r as registerInstance, i as createEvent, h, k as Host, j as getElement } from './index-02a70ac1.js';
-
-const styleCss = ":host{--background-color:var(--smoothly-default-color), 1;--color:var(--smoothly-secondary-contrast);--border-color:var(--smoothly-default-shade), 1;--border-highlight-color:var(--smoothly-secondary-contrast), 1;--label-color:var(--smoothly-secondary-contrast), 0.8;--selected-item-border-radius:0.25rem;--selected-item-background-color:var(--smoothly-secondary-color), 1;--selected-item-color:255, 255, 255, 1}:host{display:block;position:relative;background-color:rgba(var(--background-color));width:100%;cursor:pointer;--intergiro-transition:border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);transition:var(--intergiro-transition);border:1px solid rgb(var(--border-color));margin:1px;height:40px;border-radius:0.25rem}:host(:focus-within){border-color:rgb(var(--smoothly-primary-shade));border-width:2px;margin:0px}:host>div{display:flex;background-color:transparent;min-height:40px;align-items:center;align-self:center;border:none;max-height:var(--max-height)}:host>div .icons>smoothly-icon{flex-shrink:0;padding-left:0.6em;stroke:rgba(var(--color), 0.4);fill:rgba(var(--color), 0.4);width:1.5em !important;height:1.5em !important}:host>div .icons>smoothly-icon:hover{fill:rgba(var(--color), 1)}:host>div input{width:100%;background-color:transparent;outline:none;border:none;cursor:pointer;color:rgb(var(--color));padding:0 0.6em;font-family:var(--smoothly-font-family);font-size:1.05em}:host>div input::placeholder{opacity:1;text-overflow:ellipsis}:host([is-open])>div input{color:rgb(var(--smoothly-medium-color))}:host(:not(:focus-within)[multiple]) ul>li:last-child{position:absolute;pointer-events:none}:host([label=\"\"]) ul,:host:not([label]) ul,:host([label-setting=hide]) ul{padding-top:0.1em;padding-bottom:0.1em}label{padding-left:0.6em;white-space:nowrap;color:rgba(var(--label-color));transition:var(--intergiro-transition);font-family:var(--smoothly-font-family);pointer-events:none;transform-origin:left}:host([has-selection]) label{display:var(--label-display)}:host([has-selection]) label,:host(:focus-within) label{display:none}:host(:hover) smoothly-icon[data-arrow],:host(:focus-within) smoothly-icon[data-arrow]{stroke:rgba(var(--color), 1)}:host smoothly-icon[data-arrow]{pointer-events:none}:host smoothly-icon{flex-shrink:0;width:1em;height:1em}:host(:not([is-open])) smoothly-icon.up,:host([is-open]) smoothly-icon.down{display:none}smoothly-icon.search{display:flex;align-self:center;padding-left:0.8em}smoothly-icon.up,smoothly-icon.down{display:flex;align-self:center;padding-right:0.8em;stroke:rgb(var(--smoothly-primary-shade))}:host smoothly-menu-options{margin-top:0.5em;padding-top:0.5em;padding-bottom:0.5em;position:absolute;z-index:1}:host(:not([is-open]))>smoothly-menu-options{display:none}";
-
-let SmoothlyPicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.menuClose = createEvent(this, "menuClose", 7);
-    this.keepFocusOnReRender = false;
-    this.emptyMenuLabel = "No Options";
-    this.multiple = false;
-    this.options = [];
-    this.selections = [];
-    this.selectNoneName = "Select None";
-    this.selectionName = "items selected";
-  }
-  isOpenChangeHander() {
-    if (this.isOpen == false) {
-      this.menuClose.emit(this.selections);
-    }
-  }
-  componentDidRender() {
-    this.filterOptions();
-    if (this.keepFocusOnReRender) {
-      this.inputElement.focus();
-      this.keepFocusOnReRender = false;
-    }
-  }
-  optionSelectHander(event) {
-    this.toggle(event.detail);
-    event.stopPropagation();
-  }
-  toggle(option) {
-    option.value == "select-none"
-      ? this.toggleAll()
-      : this.selections.map(s => s.value).includes(option.value)
-        ? this.unselect(option)
-        : this.select(option);
-  }
-  toggleAll() {
-    var _a;
-    this.selections = this.selections.length == ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) ? [] : this.options;
-    this.inputElement.focus();
-    this.keepFocusOnReRender = true;
-  }
-  unselect(selection) {
-    const index = this.selections.map(selection => selection.value).indexOf(selection.value);
-    if (index != -1) {
-      this.selections = [
-        ...this.selections.slice(0, index),
-        ...this.selections.slice(index + 1, this.selections.length),
-      ];
-      this.keepFocusOnReRender = true;
-    }
-  }
-  select(selection) {
-    const isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true);
-    if (isNewSelection)
-      this.selections = this.multiple ? [...this.selections, selection] : [selection];
-    this.inputElement.value = "";
-    this.filterOptions();
-    this.keepFocusOnReRender = true;
-    this.isOpen = this.multiple;
-  }
-  toggleHighlighted() {
-    var _a;
-    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
-      result && this.toggle(result);
-    });
-  }
-  highlightDefault() {
-    var _a;
-    this.filterOptions();
-    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.setHighlight(this.multiple || this.selections.length == 0 ? 0 : this.selections[0].value);
-  }
-  filterOptions() {
-    var _a;
-    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.filterOptions(this.inputElement.value, []);
-  }
-  onInput(event) {
-    this.isOpen = this.inputElement.value != "" ? true : this.isOpen;
-    this.highlightDefault();
-  }
-  onKeyDown(event) {
-    var _a;
-    if (event.key == "ArrowUp" || event.key == "ArrowDown") {
-      (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.moveHighlight(event.key == "ArrowUp" ? -1 : 1);
-      event.preventDefault();
-    }
-    else if (event.key == "Enter" && this.isOpen)
-      this.toggleHighlighted();
-    else if (event.key == "Escape") {
-      this.inputElement.value = "";
-      this.isOpen = false;
-      this.filterOptions();
-    }
-    else if (event.key == " " && this.inputElement.value == "") {
-      event.preventDefault();
-      this.isOpen = true;
-      this.filterOptions();
-    }
-  }
-  onClick() {
-    this.isOpen = !this.isOpen;
-    this.inputElement.focus();
-    this.highlightDefault();
-    this.filterOptions();
-  }
-  onBlur() {
-    this.inputElement.value = "";
-    this.isOpen = false;
-    this.filterOptions();
-  }
-  getCheckHtml(checked) {
-    return checked ? (h("smoothly-icon", { name: "checkbox", size: "small" })) : (h("smoothly-icon", { name: "square-outline", size: "small" }));
-  }
-  render() {
-    var _a, _b, _c, _d;
-    const cssVariables = {
-      "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
-      "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
-    };
-    (_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach(o => {
-      o.left = this.getCheckHtml(this.selections.map(s => s.value).includes(o.value));
-    });
-    const options = [
-      {
-        value: "select-none",
-        name: this.selectNoneName,
-        left: this.getCheckHtml(this.selections.length == ((_c = this.options) === null || _c === void 0 ? void 0 : _c.length)),
-        divider: true,
-      },
-      ...((_d = this.options) !== null && _d !== void 0 ? _d : []),
-    ];
-    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { class: "search", name: "search-outline", size: "tiny" }), h("label", null, this.label), h("input", { type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
-        ? this.selections.length.toString() + " " + this.selectionName
-        : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), h("smoothly-icon", { class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { class: "up", name: "chevron-up", size: "tiny" })), h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "selections": ["isOpenChangeHander"],
-    "isOpen": ["isOpenChangeHander"]
-  }; }
-};
-SmoothlyPicker.style = styleCss;
-
-export { SmoothlyPicker as smoothly_picker };

package/dist/esm/smoothly-popup.entry.js

@@ -1,34 +0,0 @@
-import { r as registerInstance, i as createEvent, h, k as Host } from './index-02a70ac1.js';
-
-const styleCss = ".sc-smoothly-popup-h{display:inline-flex;position:relative}[hidden].sc-smoothly-popup-h{display:none}.sc-smoothly-popup-h:not([visible]) aside.sc-smoothly-popup{display:none}.sc-smoothly-popup-h aside.sc-smoothly-popup{display:inline;position:absolute;padding:0.3em;left:var(--left);right:var(--right);background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);border-style:solid;border-width:0.1em;border-radius:0.6em;z-index:3}[direction=down].sc-smoothly-popup-h aside.sc-smoothly-popup{top:2.2em;box-shadow:6px 5px 9px -9px black, 5px 6px 9px -9px black}[direction=up].sc-smoothly-popup-h aside.sc-smoothly-popup{bottom:2.2em;box-shadow:-6px -5px 9px -9px black, -5px -6px 9px -9px black}.sc-smoothly-popup-h:not([visible]) .background.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .background.sc-smoothly-popup{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:2}.sc-smoothly-popup-h:not([visible]) .arrow.sc-smoothly-popup{display:none}.sc-smoothly-popup-h .arrow.sc-smoothly-popup{background-color:rgb(238, 238, 238);border-color:rgb(238, 238, 238);z-index:2;content:\"\";position:absolute;width:12px;height:12px;transform:rotate(45deg);left:calc(var(--left) + 1em);right:calc(var(--right) + 1em)}[direction=down].sc-smoothly-popup-h .arrow.sc-smoothly-popup{top:2em;border-top-style:solid;border-top-width:1px;border-left-style:solid;border-left-width:1px}[direction=up].sc-smoothly-popup-h .arrow.sc-smoothly-popup{bottom:2em;border-bottom-style:solid;border-bottom-width:1px;border-right-style:solid;border-right-width:1px}.sc-smoothly-popup-h .pointer.sc-smoothly-popup{cursor:pointer}";
-
-let SmoothlyPopup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.popup = createEvent(this, "popup", 7);
-    this.visible = false;
-    this.direction = "down";
-    this.cssVariables = { "--left": "0.1em" };
-  }
-  onClick() {
-    var _a, _b, _c, _d, _e, _f;
-    if (this.visible == false) {
-      (_a = this.aside) === null || _a === void 0 ? void 0 : _a.style.setProperty("display", "block");
-      this.cssVariables =
-        ((_c = (_b = this.aside) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) !== null && _c !== void 0 ? _c : 0) >= window.innerWidth
-          ? { "--right": "0.1em" }
-          : ((_e = (_d = this.aside) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().left) !== null && _e !== void 0 ? _e : 0) < 0
-            ? { "--left": "0.1em" }
-            : this.cssVariables;
-      (_f = this.aside) === null || _f === void 0 ? void 0 : _f.style.removeProperty("display");
-    }
-    this.visible = !this.visible;
-    this.popup.emit(this.visible);
-  }
-  render() {
-    return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("content", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("aside", { ref: el => (this.aside = el) }, h("slot", { name: "popup" }))));
-  }
-};
-SmoothlyPopup.style = styleCss;
-
-export { SmoothlyPopup as smoothly_popup };

package/dist/esm/smoothly-quiet.entry.js

@@ -1,15 +0,0 @@
-import { r as registerInstance, h, k as Host } from './index-02a70ac1.js';
-
-const styleCss = ".sc-smoothly-quiet-h{opacity:0.5}";
-
-let SmoothlyQuiet = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { color: this.color }, h("slot", null)));
-  }
-};
-SmoothlyQuiet.style = styleCss;
-
-export { SmoothlyQuiet as smoothly_quiet };