smoothly 1.0.0-alpha.208 → 1.0.0-alpha.209

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

@@ -6654,15 +6654,19 @@ const SmoothlyFilterToggle = class {
         const criteria = !this.not ? r : r instanceof Not ? r.criteria : undefined;
         return value == ""
           ? !(criteria instanceof Property && criteria.name == key)
-          : (criteria === null || criteria === void 0 ? void 0 : criteria.is({ [key]: value })) &&
-            criteria instanceof Property &&
-            this.properties[criteria.name] &&
-            criteria.criteria instanceof Is;
+          : this.isCriteria(criteria, key, value);
       }));
     }
     else
       this.active = false;
   }
+  isCriteria(criteria, key, value) {
+    const [property, ...rest] = key.split(".");
+    return (criteria instanceof Property &&
+      criteria.name == property &&
+      ((criteria.criteria instanceof Is && criteria.criteria.value == value) ||
+        this.isCriteria(criteria.criteria, rest.join("."), value)));
+  }
   activeHandler(activate) {
     const manipulate = (criteria) => {
       let result = criteria;
@@ -6672,8 +6676,8 @@ const SmoothlyFilterToggle = class {
           const newCriteria = !this.active || (this.active && value == "")
             ? undefined
             : this.not
-              ? not(property(key, is(value)))
-              : create$1({ [key]: value });
+              ? not(this.createCriteria(key, value))
+              : this.createCriteria(key, value);
           const index = result.rules.findIndex(r => this.findInstanceOf(r, key));
           !newCriteria && index >= 0
             ? result.rules.splice(index, 1)
@@ -6689,9 +6693,16 @@ const SmoothlyFilterToggle = class {
     };
     this.smoothlyFilterManipulate.emit(manipulate.bind(this));
   }
+  createCriteria(key, value) {
+    const [property$1, ...rest] = key.split(".");
+    return property(property$1, rest.length == 0 ? is(value) : this.createCriteria(rest.join("."), value));
+  }
   findInstanceOf(criteria, property) {
     const check = !this.not ? criteria : criteria instanceof Not ? criteria.criteria : false;
-    return check instanceof Property && check.name == property;
+    const [current, ...rest] = property.split(".");
+    return (check instanceof Property &&
+      check.name == current &&
+      (rest.length == 0 || (!!check.criteria && this.findInstanceOf(check.criteria, rest.join(".")))));
   }
   render() {
     return (index.h("smoothly-icon", { fill: "clear", color: this.active ? "success" : "medium", name: (this.active ? `${this.icon}` : `${this.icon}-outline`), toolTip: this.toolTip, onClick: () => this.activeHandler(true) }));
@@ -10416,13 +10427,13 @@ const TableDemoFiltered = class {
     const response = await fetch("https://catfact.ninja/breeds?limit=15");
     this.cats =
       response.status == 200 &&
-        (await response.body).data.map((cat) => (Object.assign(Object.assign({}, cat), { price: [...cat.breed].reduce((r, c) => r + c.charCodeAt(0), 0) })));
+        (await response.body).data.map((cat) => (Object.assign(Object.assign({}, cat), { price: [...cat.breed].reduce((r, c) => r + c.charCodeAt(0), 0), nested: cat })));
   }
   render() {
     const cats = this.cats && filter(this.criteria, this.cats);
-    return (index.h(index.Host, null, index.h("smoothly-filter", null, index.h("smoothly-filter-toggle", { properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-picker", { property: "coat", slot: "bar", multiple: false }, this.cats &&
+    return (index.h(index.Host, null, index.h("smoothly-filter", null, index.h("smoothly-filter-toggle", { properties: { ["nested.pattern"]: "Ticked", breed: "" }, icon: "add", toolTip: "Nested Ticked", slot: "bar" }), index.h("smoothly-filter-toggle", { properties: { pattern: "Ticked", breed: "" }, icon: "paw", toolTip: "Ticked cats", slot: "bar" }), index.h("smoothly-filter-toggle", { properties: { breed: "Bombay", pattern: "Solid" }, icon: "radio-button-on", toolTip: "Solid bombay cats", slot: "bar" }), index.h("smoothly-filter-toggle", { properties: { pattern: "Colorpoint" }, not: true, active: true, icon: "alert", toolTip: "Colored cats", slot: "bar" }), index.h("smoothly-filter-picker", { property: "coat", slot: "bar", multiple: false }, this.cats &&
       this.cats.map(cat => cat.coat && index.h("smoothly-picker-option", { value: cat.coat }, cat.coat))), index.h("div", { slot: "detail" }, index.h("smoothly-form", { looks: "border" }, index.h("smoothly-filter-picker", { 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.breed].reduce((r, c) => r + c.charCodeAt(0), 0), 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" })))), !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;