smoothly 1.0.0-alpha.21 → 1.0.0-alpha.211

package/dist/collection/components/filter/input/index.js

@@ -1,67 +1,50 @@
 import { h } from "@stencil/core";
-import * as selectively from "selectively";
+import { selectively } from "selectively";
 export class SmoothlyFilterInput {
   constructor() {
-    this.name = undefined;
-    this.value = "";
     this.type = "text";
-    this.required = false;
-    this.minLength = 0;
-    this.showLabel = true;
-    this.maxLength = Number.POSITIVE_INFINITY;
-    this.autocomplete = true;
-    this.pattern = undefined;
+    this.needle = "";
+    this.property = undefined;
     this.placeholder = undefined;
-    this.disabled = false;
-    this.readonly = false;
-    this.currency = undefined;
-    this.comparison = "includes";
-    this.criteria = undefined;
   }
-  onFilter() {
-    this.value = this.smoothlyInput.value;
-    let result = "";
-    let criteria;
-    switch (this.comparison) {
-      case "equals":
-        criteria = this.value;
-        break;
-      case "less":
-        criteria = selectively.lesserThan(this.value);
-        break;
-      case "greater":
-        criteria = selectively.greaterThan(this.value);
-        break;
-      case "starts":
-        criteria = selectively.startsWith(this.value);
-        break;
-      case "ends":
-        criteria = selectively.endsWith(this.value);
-        break;
-      default:
-      case "includes":
-        criteria = selectively.includes(this.value);
-        break;
-    }
-    result = this.name
-      .split(".")
-      .reverse()
-      .reduce((previousValue, currentValue) => ({ [currentValue]: previousValue }), criteria);
-    this.filter.emit(result);
+  componentDidLoad() {
+    this.smoothlyFilterUpdate.emit(this.update.bind(this));
   }
-  async clear() {
-    this.value = "";
+  update(expression) {
+    var _a, _b;
+    if (expression instanceof selectively.And && expression.rules.length > 0)
+      this.needle =
+        (_b = (_a = expression.rules.find(r => r instanceof selectively.Property && r.name == this.property && r.criteria instanceof selectively.Includes)) === null || _a === void 0 ? void 0 : _a.criteria.needle) !== null && _b !== void 0 ? _b : "";
+    else
+      this.needle = "";
+  }
+  inputHandler(event) {
+    event.stopPropagation();
+    const needle = event.detail[this.property];
+    const manipulate = (criteria) => {
+      let result = criteria;
+      const newCriteria = needle ? selectively.property(this.property, selectively.includes(needle)) : undefined;
+      if (result instanceof selectively.And) {
+        const index = result.rules.findIndex(r => this.findInstanceOf(r, this.property));
+        !newCriteria
+          ? index != -1 && result.rules.splice(index, 1)
+          : index == -1
+            ? result.rules.push(newCriteria)
+            : (result.rules[index] = newCriteria);
+        result = selectively.and(...result.rules);
+      }
+      return result;
+    };
+    this.smoothlyFilterManipulate.emit(manipulate.bind(this));
+  }
+  findInstanceOf(criteria, property) {
+    return criteria instanceof selectively.Property && criteria.name == property;
   }
   render() {
-    return [
-      h("smoothly-input", { name: this.name, ref: (element) => (this.smoothlyInput = element), value: this.value, onKeyDown: () => this.onFilter(), onSmoothlyInput: e => {
-          var _a;
-          this.value = (_a = e.detail.value) !== null && _a !== void 0 ? _a : "";
-        }, placeholder: this.placeholder }, h("div", { slot: "start" }, h("slot", { name: "start" })), h("slot", null)),
-    ];
+    return (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) }, h("slot", null)));
   }
   static get is() { return "smoothly-filter-input"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["style.css"]
@@ -74,7 +57,7 @@ export class SmoothlyFilterInput {
   }
   static get properties() {
     return {
-      "name": {
+      "property": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -88,28 +71,10 @@ export class SmoothlyFilterInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
-        "reflect": true
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "\"\""
+        "attribute": "property",
+        "reflect": false
       },
-      "type": {
+      "placeholder": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -123,223 +88,20 @@ export class SmoothlyFilterInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "\"text\""
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "minLength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "min-length",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "showLabel": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-label",
-        "reflect": true,
-        "defaultValue": "true"
-      },
-      "maxLength": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "max-length",
-        "reflect": false,
-        "defaultValue": "Number.POSITIVE_INFINITY"
-      },
-      "autocomplete": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "autocomplete",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "pattern": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "RegExp",
-          "resolved": "RegExp | undefined",
-          "references": {
-            "RegExp": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
         "attribute": "placeholder",
         "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "currency": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Currency",
-          "resolved": "\"BTN\" | \"MKD\" | \"CHE\" | \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\" | undefined",
-          "references": {
-            "Currency": {
-              "location": "import",
-              "path": "isoly"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "currency",
-        "reflect": true
-      },
-      "comparison": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"equals\" | \"less\" | \"greater\" | \"starts\" | \"ends\" | \"includes\"",
-          "resolved": "\"ends\" | \"equals\" | \"greater\" | \"includes\" | \"less\" | \"starts\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "comparison",
-        "reflect": false,
-        "defaultValue": "\"includes\""
       }
     };
   }
   static get states() {
     return {
-      "criteria": {}
+      "needle": {}
     };
   }
   static get events() {
     return [{
-        "method": "filter",
-        "name": "filter",
+        "method": "smoothlyFilterUpdate",
+        "name": "smoothlyFilterUpdate",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -348,36 +110,36 @@ export class SmoothlyFilterInput {
           "text": ""
         },
         "complexType": {
-          "original": "Criteria",
-          "resolved": "Helper[] | Rule | number | string | { [property: string]: Helper | Helper[]; }",
+          "original": "Filter.Update",
+          "resolved": "(expression: Criteria) => void",
           "references": {
-            "Criteria": {
+            "Filter": {
               "location": "import",
-              "path": "selectively"
+              "path": "../Filter"
             }
           }
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "clear": {
+      }, {
+        "method": "smoothlyFilterManipulate",
+        "name": "smoothlyFilterManipulate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "original": "Filter.Manipulate",
+          "resolved": "(criteria: Criteria) => Criteria",
           "references": {
-            "Promise": {
-              "location": "global"
+            "Filter": {
+              "location": "import",
+              "path": "../Filter"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
+          }
         }
-      }
-    };
+      }];
   }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/filter/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/filter/input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State } from \"@stencil/core\"\nimport { Currency } from \"isoly\"\nimport * as selectively from \"selectively\"\nimport { Criteria } from \"selectively\"\n\n@Component({\n\ttag: \"smoothly-filter-input\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyFilterInput {\n\tsmoothlyInput: HTMLSmoothlyInputElement\n\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value = \"\"\n\t@Prop({ reflect: true }) type = \"text\"\n\t@Prop({ mutable: true, reflect: true }) required = false\n\t@Prop() minLength = 0\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() maxLength: number = Number.POSITIVE_INFINITY\n\t@Prop() autocomplete = true\n\t@Prop() pattern?: RegExp\n\t@Prop() placeholder?: string\n\t@Prop() disabled = false\n\t@Prop() readonly = false\n\t@Prop({ reflect: true }) currency?: Currency\n\t@Prop() comparison: \"equals\" | \"less\" | \"greater\" | \"starts\" | \"ends\" | \"includes\" = \"includes\"\n\t@State() criteria: Criteria\n\n\t@Event() filter: EventEmitter<Criteria>\n\tprivate onFilter() {\n\t\tthis.value = this.smoothlyInput.value\n\t\tlet result: Criteria = \"\"\n\t\tlet criteria: Criteria\n\n\t\tswitch (this.comparison) {\n\t\t\tcase \"equals\":\n\t\t\t\tcriteria = this.value\n\t\t\t\tbreak\n\t\t\tcase \"less\":\n\t\t\t\tcriteria = selectively.lesserThan(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"greater\":\n\t\t\t\tcriteria = selectively.greaterThan(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"starts\":\n\t\t\t\tcriteria = selectively.startsWith(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"ends\":\n\t\t\t\tcriteria = selectively.endsWith(this.value)\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\tcase \"includes\":\n\t\t\t\tcriteria = selectively.includes(this.value)\n\t\t\t\tbreak\n\t\t}\n\n\t\tresult = this.name\n\t\t\t.split(\".\")\n\t\t\t.reverse()\n\t\t\t.reduce<Criteria>((previousValue, currentValue) => ({ [currentValue]: previousValue }), criteria)\n\t\tthis.filter.emit(result)\n\t}\n\n\t@Method()\n\tasync clear() {\n\t\tthis.value = \"\"\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tname={this.name}\n\t\t\t\tref={(element: HTMLSmoothlyInputElement) => (this.smoothlyInput = element)}\n\t\t\t\tvalue={this.value}\n\t\t\t\tonKeyDown={() => this.onFilter()}\n\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\tthis.value = e.detail.value ?? \"\"\n\t\t\t\t}}\n\t\t\t\tplaceholder={this.placeholder}>\n\t\t\t\t<div slot=\"start\">\n\t\t\t\t\t<slot name=\"start\" />\n\t\t\t\t</div>\n\t\t\t\t<slot />\n\t\t\t</smoothly-input>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/filter/input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State } from \"@stencil/core\"\nimport { selectively } from \"selectively\"\nimport { tidily } from \"tidily\"\nimport { Filter } from \"../Filter\"\n\n@Component({\n\ttag: \"smoothly-filter-input\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFilterInput implements Filter {\n\ttype: tidily.Type = \"text\"\n\t@State() needle: selectively.Criteria = \"\"\n\t@Prop() property: string\n\t@Prop() placeholder: string\n\t@Event() smoothlyFilterUpdate: EventEmitter<Filter.Update>\n\t@Event() smoothlyFilterManipulate: EventEmitter<Filter.Manipulate>\n\tcomponentDidLoad() {\n\t\tthis.smoothlyFilterUpdate.emit(this.update.bind(this))\n\t}\n\tupdate(expression: selectively.Criteria): void {\n\t\tif (expression instanceof selectively.And && expression.rules.length > 0)\n\t\t\tthis.needle =\n\t\t\t\t(\n\t\t\t\t\texpression.rules.find(\n\t\t\t\t\t\tr =>\n\t\t\t\t\t\t\tr instanceof selectively.Property && r.name == this.property && r.criteria instanceof selectively.Includes\n\t\t\t\t\t) as any\n\t\t\t\t)?.criteria.needle ?? \"\"\n\t\telse\n\t\t\tthis.needle = \"\"\n\t}\n\tinputHandler(event: CustomEvent<Record<string, string>>) {\n\t\tevent.stopPropagation()\n\t\tconst needle = event.detail[this.property]\n\t\tconst manipulate: Filter.Manipulate = (criteria: selectively.Criteria): selectively.Criteria => {\n\t\t\tlet result: selectively.Criteria = criteria\n\t\t\tconst newCriteria = needle ? selectively.property(this.property, selectively.includes(needle)) : undefined\n\t\t\tif (result instanceof selectively.And) {\n\t\t\t\tconst index = result.rules.findIndex(r => this.findInstanceOf(r, this.property))\n\t\t\t\t!newCriteria\n\t\t\t\t\t? index != -1 && result.rules.splice(index, 1)\n\t\t\t\t\t: index == -1\n\t\t\t\t\t? result.rules.push(newCriteria)\n\t\t\t\t\t: (result.rules[index] = newCriteria)\n\t\t\t\tresult = selectively.and(...result.rules)\n\t\t\t}\n\t\t\treturn result\n\t\t}\n\t\tthis.smoothlyFilterManipulate.emit(manipulate.bind(this))\n\t}\n\tfindInstanceOf(criteria: selectively.Criteria, property: string): boolean {\n\t\treturn criteria instanceof selectively.Property && criteria.name == property\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-input\n\t\t\t\tname={this.property}\n\t\t\t\tvalue={this.needle}\n\t\t\t\ttype={this.type}\n\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\tonSmoothlyInputLooks={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyBlur={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyFormDisable={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyInputLoad={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyChange={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyInput={e => this.inputHandler(e)}>\n\t\t\t\t<slot />\n\t\t\t</smoothly-input>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/filter/picker/index.js

@@ -0,0 +1,209 @@
+import { h } from "@stencil/core";
+import { selectively } from "selectively";
+import { isly } from "isly";
+export class SmoothlyFilterPicker {
+  constructor() {
+    this.updating = false;
+    this.options = new Map();
+    this.label = undefined;
+    this.property = undefined;
+    this.multiple = false;
+  }
+  componentDidLoad() {
+    this.smoothlyFilterUpdate.emit(this.update.bind(this));
+  }
+  optionChangeHandler(event) {
+    event.stopPropagation();
+    this.options.set(event.detail.value, {
+      state: this.property.split(".").reduceRight((r, e) => ({ [e]: r }), event.detail.value),
+      selected: event.detail.set.selected,
+    });
+  }
+  update(expression) {
+    this.updating = true;
+    if (expression instanceof selectively.And && expression.rules.length > 0)
+      for (const option of this.options.values()) {
+        option.selected(expression.rules.some(r => r.is(option.state) && this.isCriteria(r, this.property, option.state)));
+      }
+    else
+      this.options.forEach(o => o.selected(false));
+    this.updating = false;
+  }
+  isCriteria(criteria, key, value) {
+    const [property, ...rest] = key.split(".");
+    return (criteria instanceof selectively.Property &&
+      criteria.name == property &&
+      ((!this.multiple && criteria.criteria instanceof selectively.Is && criteria.criteria.value == value[property]) ||
+        (this.multiple &&
+          criteria.criteria instanceof selectively.Within &&
+          criteria.criteria.value.some(e => e == value[property])) ||
+        (criteria.criteria instanceof selectively.Property &&
+          this.isCriteria(criteria.criteria, rest.join("."), value[property]))));
+  }
+  pickerHandler(event) {
+    event.stopPropagation();
+    if (!this.updating) {
+      const argument = event.detail[this.property];
+      const manipulate = (criteria) => {
+        let result = criteria;
+        const newCriteria = this.getCriteria(argument);
+        if (!(result instanceof selectively.Rule)) {
+          result = newCriteria ? selectively.and(result, newCriteria) : result;
+        }
+        else if (result instanceof selectively.And) {
+          const index = result.rules.findIndex(r => this.findInstanceOf(r, this.property));
+          !newCriteria
+            ? result.rules.splice(index, 1)
+            : index == -1
+              ? result.rules.push(newCriteria)
+              : (result.rules[index] = newCriteria);
+          result = selectively.and(...result.rules);
+        }
+        return result;
+      };
+      this.smoothlyFilterManipulate.emit(manipulate.bind(this));
+    }
+  }
+  findInstanceOf(criteria, key) {
+    const [property, ...rest] = key.split(".");
+    return (criteria instanceof selectively.Property &&
+      criteria.name == property &&
+      (criteria.criteria instanceof selectively.Within ||
+        criteria.criteria instanceof selectively.Is ||
+        (criteria.criteria instanceof selectively.Property && this.findInstanceOf(criteria.criteria, rest.join(".")))));
+  }
+  getCriteria(detail) {
+    let result;
+    if (this.multiple && isly.string().array({ criteria: "minLength", value: 1 }).is(detail))
+      result = selectively.within(detail);
+    else if (typeof detail == "string")
+      result = selectively.is(detail);
+    else
+      result = undefined;
+    return result && this.property.split(".").reduceRight((r, e) => selectively.property(e, r), result);
+  }
+  render() {
+    return (h("smoothly-picker", { name: this.property, looks: "border", multiple: this.multiple, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyPickerLoaded: e => e.stopPropagation(), onSmoothlyInput: e => this.pickerHandler(e) }, this.label && (h("span", { slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), h("span", { slot: "search" }, "Search"), h("slot", null)));
+  }
+  static get is() { return "smoothly-filter-picker"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "property": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "property",
+        "reflect": false
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyFilterUpdate",
+        "name": "smoothlyFilterUpdate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Filter.Update",
+          "resolved": "(expression: Criteria) => void",
+          "references": {
+            "Filter": {
+              "location": "import",
+              "path": "../Filter"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyFilterManipulate",
+        "name": "smoothlyFilterManipulate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Filter.Manipulate",
+          "resolved": "(criteria: Criteria) => Criteria",
+          "references": {
+            "Filter": {
+              "location": "import",
+              "path": "../Filter"
+            }
+          }
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "smoothlyPickerOptionChange",
+        "method": "optionChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map