smoothly 1.0.0-alpha.211 → 1.0.0-alpha.213

package/dist/cjs/smoothly-app_80.cjs.entry.js

@@ -6489,8 +6489,8 @@ const SmoothlyFilterField = class {
     await ((_a = this.input) === null || _a === void 0 ? void 0 : _a.clear());
   }
   filterFieldEmit() {
-    var _a;
-    this.smoothlyFilterField.emit(parse$2((_a = this.input) === null || _a === void 0 ? void 0 : _a.value));
+    var _a, _b;
+    this.smoothlyFilterField.emit(parse$2((_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ""));
   }
   render() {
     return (index.h(index.Host, { onKeyDown: (e) => e.key == "Enter" && this.filterFieldEmit() }, index.h("smoothly-input", { name: "filter", ref: e => (this.input = e), value: this.criteria.toString(), onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => {
@@ -6519,19 +6519,32 @@ const SmoothlyFilterInput = class {
     this.smoothlyFilterUpdate.emit(this.update.bind(this));
   }
   update(expression) {
-    var _a, _b;
+    var _a;
     if (expression instanceof And && expression.rules.length > 0)
-      this.needle =
-        (_b = (_a = expression.rules.find(r => r instanceof Property && r.name == this.property && r.criteria instanceof Includes)) === null || _a === void 0 ? void 0 : _a.criteria.needle) !== null && _b !== void 0 ? _b : "";
+      for (const rule of expression.rules) {
+        const criteria = this.isCriteria(rule, this.property);
+        if (criteria) {
+          this.needle = (_a = criteria.needle) !== null && _a !== void 0 ? _a : "";
+          break;
+        }
+      }
     else
       this.needle = "";
   }
+  isCriteria(criteria, key) {
+    const [property, ...rest] = key.split(".");
+    return ((criteria instanceof Property &&
+      criteria.name == property &&
+      ((criteria.criteria instanceof Includes && criteria.criteria) ||
+        (criteria.criteria instanceof Property && this.isCriteria(criteria.criteria, rest.join("."))))) ||
+      undefined);
+  }
   inputHandler(event) {
     event.stopPropagation();
     const needle = event.detail[this.property];
     const manipulate = (criteria) => {
       let result = criteria;
-      const newCriteria = needle ? property(this.property, includes(needle)) : undefined;
+      const newCriteria = needle ? this.getCriteria(needle) : undefined;
       if (result instanceof And) {
         const index = result.rules.findIndex(r => this.findInstanceOf(r, this.property));
         !newCriteria
@@ -6545,8 +6558,16 @@ const SmoothlyFilterInput = class {
     };
     this.smoothlyFilterManipulate.emit(manipulate.bind(this));
   }
+  getCriteria(needle) {
+    return this.property
+      .split(".")
+      .reduceRight((r, e) => property(e, r), includes(needle));
+  }
   findInstanceOf(criteria, property) {
-    return criteria instanceof Property && criteria.name == property;
+    const [key, ...rest] = property.split(".");
+    return (criteria instanceof Property &&
+      criteria.name == key &&
+      (rest.length == 0 || (!!criteria.criteria && this.findInstanceOf(criteria.criteria, rest.join(".")))));
   }
   render() {
     return (index.h("smoothly-input", { name: this.property, value: this.needle, type: this.type, placeholder: this.placeholder, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyFormDisable: e => e.stopPropagation(), onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyInput: e => this.inputHandler(e) }, index.h("slot", null)));
@@ -6717,9 +6738,9 @@ const SmoothlyFilterToggle = class {
   }
   findInstanceOf(criteria, property) {
     const check = !this.not ? criteria : criteria instanceof Not ? criteria.criteria : false;
-    const [current, ...rest] = property.split(".");
+    const [key, ...rest] = property.split(".");
     return (check instanceof Property &&
-      check.name == current &&
+      check.name == key &&
       (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
   }
   render() {
@@ -9536,18 +9557,6 @@ Notifier.style = styleCss$x;
 
 const styleCss$w = ".sc-smoothly-picker-h{box-sizing:border-box}.sc-smoothly-picker-h[looks=\"border\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"border\"].sc-smoothly-picker-h{border:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"border\"][readonly].sc-smoothly-picker-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-picker-h[looks=\"line\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"line\"].sc-smoothly-picker-h{border-bottom:rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px}[looks=\"line\"][readonly].sc-smoothly-picker-h{border-bottom:rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px}.sc-smoothly-picker-h[looks=\"grid\"].sc-smoothly-picker-s>smoothly-picker-menu smoothly-input,[looks=\"grid\"].sc-smoothly-picker-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px}[looks=\"grid\"][readonly].sc-smoothly-picker-h{border:rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px}[looks=\"transparent\"].sc-smoothly-picker-h{border:none}[looks=\"transparent\"].sc-smoothly-picker-h:not(:focus-within){background-color:transparent}[looks=\"transparent\"].sc-smoothly-picker-h:not(:focus-within) input.sc-smoothly-picker{background:transparent}[looks=\"transparent\"].sc-smoothly-picker-h:focus-within{outline:1px solid rgb(var(--smoothly-color-contrast))}.sc-smoothly-picker-h{display:flex;position:relative;width:max-content;padding:1.2em 0.7em 0.2em 0.8em;background-color:rgb(var(--background-color, var(--smoothly-color-shade)))}.sc-smoothly-picker-h div.element.sc-smoothly-picker{display:flex;background-color:inherit}smoothly-slot-elements.sc-smoothly-picker{white-space:nowrap}.selected.sc-smoothly-picker{position:relative;display:flex;align-items:center;gap:1rem;width:100%;overflow:hidden;text-overflow:ellipsis;margin-right:2px}.selected.sc-smoothly-picker::after{content:\"\";position:absolute;top:0;bottom:0;right:0;width:2ch}.sc-smoothly-picker-h:not([looks=transparent]) .selected.sc-smoothly-picker::after{background:linear-gradient(90deg, rgba(var(--background-color, var(--smoothly-color-shade)), 0) 0%, rgba(var(--background-color, var(--smoothly-color-shade)), 1) 100%)}.selected.sc-smoothly-picker *.sc-smoothly-picker{display:none}.label.sc-smoothly-picker{position:absolute;left:0.4rem;top:0.6rem;color:rgb(var(--text-color, var(--smoothly-color-contrast)));opacity:0.8;user-select:none;cursor:inherit;transform-origin:top left;transition:transform 100ms ease}.selected.sc-smoothly-picker:not(:empty)+.label.sc-smoothly-picker{top:0.4em;transform:scale(0.6)}";
 
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
 const SmoothlyPicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -9569,12 +9578,9 @@ const SmoothlyPicker = class {
     this.smoothlyInputLooks.emit(looks => (this.looks = looks));
   }
   selectedChanged() {
-    var _a;
     const selected = Array.from(this.selected.values(), option => option.value);
-    if ((_a = this.controls) === null || _a === void 0 ? void 0 : _a.synced()) {
-      this.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) });
-      this.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) });
-    }
+    this.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) });
+    this.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) });
     this.display = Array.from(this.selected.values(), option => {
       const span = document.createElement("span");
       option.slotted.forEach(node => span.appendChild(node.cloneNode(true)));
@@ -9583,10 +9589,7 @@ const SmoothlyPicker = class {
   }
   componentDidLoad() {
     if (this.controls)
-      this.smoothlyPickerLoaded.emit(((_a) => {
-        var controls = __rest$1(_a, ["synced"]);
-        return controls;
-      })(this.controls));
+      this.smoothlyPickerLoaded.emit(this.controls);
   }
   smoothlyInputLooksHandler(event) {
     if (event.target != this.element)
@@ -9720,7 +9723,6 @@ const SmoothlyPickerMenu = class {
     index.registerInstance(this, hostRef);
     this.notice = index.createEvent(this, "notice", 7);
     this.smoothlyPickerMenuLoaded = index.createEvent(this, "smoothlyPickerMenuLoaded", 7);
-    this.synced = false;
     this.looks = undefined;
     this.open = false;
     this.multiple = false;
@@ -9747,12 +9749,6 @@ const SmoothlyPickerMenu = class {
       }, { threshold }));
     }
   }
-  sync() {
-    if (this.backend.size != this.options.size)
-      this.synced = false;
-    else
-      this.synced = true;
-  }
   componentDidLoad() {
     this.smoothlyPickerMenuLoaded.emit({
       remember: () => {
@@ -9786,7 +9782,6 @@ const SmoothlyPickerMenu = class {
         this.options = new Map(Array.from(this.options.entries()).filter(([key]) => !this.created.has(key)));
         this.created = new Map();
       },
-      synced: () => this.synced,
     });
   }
   disconnectedCallback() {
@@ -9813,7 +9808,6 @@ const SmoothlyPickerMenu = class {
   optionLoadHandler(event) {
     if (!this.listElement || !event.composedPath().includes(this.listElement)) {
       event.stopPropagation();
-      this.sync();
       event.detail.set.readonly(this.readonly);
       const current = this.options.get(event.detail.value);
       if (current)
@@ -9831,7 +9825,6 @@ const SmoothlyPickerMenu = class {
     }
     else
       this.options.set(event.detail.value, event.detail);
-    this.sync();
   }
   optionChangeHandler(event) {
     var _a;
@@ -10458,7 +10451,7 @@ const TableDemoFiltered = class {
         var _a;
         return ((_a = cat.nested) === null || _a === void 0 ? void 0 : _a.coat) && (index.h("smoothly-picker-option", { value: cat.nested.coat }, cat.nested.coat));
       })), index.h("smoothly-filter-picker", { label: "breed", property: "breed", multiple: false }, this.cats &&
-      this.cats.map(cat => cat.breed && index.h("smoothly-picker-option", { value: cat.breed }, cat.breed))), index.h("smoothly-filter-input", { property: "coat", placeholder: "ex. Short" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, this.selector.render(cats)), index.h("smoothly-table-header", null, "Breed"), index.h("smoothly-table-header", null, "Coat"), index.h("smoothly-table-header", null, "Price")), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-footer", null, index.h("td", { colSpan: 5 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` })))))));
+      this.cats.map(cat => cat.breed && index.h("smoothly-picker-option", { value: cat.breed }, cat.breed))), index.h("smoothly-filter-input", { property: "coat", placeholder: "ex. Short" }), index.h("smoothly-filter-input", { property: "nested.coat", placeholder: "ex. Rex" })))), !cats ? ("Failed to load data.") : (index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, this.selector.render(cats)), index.h("smoothly-table-header", null, "Breed"), index.h("smoothly-table-header", null, "Coat"), index.h("smoothly-table-header", null, "Price")), cats.map(cat => (index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, this.selector.render(cat)), index.h("smoothly-table-expandable-cell", null, cat.breed, index.h("div", { slot: "detail" }, "Country: ", cat.country)), index.h("smoothly-table-expandable-cell", null, cat.coat, index.h("div", { slot: "detail" }, "Pattern: ", cat.pattern)), index.h("smoothly-table-cell", null, index.h("smoothly-display", { type: "price", value: cat.price, currency: "SEK" }))))), index.h("smoothly-table-footer", null, index.h("td", { colSpan: 5 }, index.h("smoothly-display", { type: "text", value: `Selected: ${this.selector.selected.length != 0 ? this.selector.selected.length : cats ? cats.length : "?"}` })))))));
   }
 };
 TableDemoFiltered.style = styleCss$d;