@paperless/core 0.1.0-alpha.281 → 0.1.0-alpha.282

package/dist/collection/components/molecules/select/select.component.js

@@ -1,46 +1,29 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { childOf } from '../../../utils';
 export class Select {
   constructor() {
-    /**
-     * The key of the object to display
-     */
+    this._isAutoCompleting = false;
+    this.items = undefined;
+    this.query = undefined;
+    this.placeholder = undefined;
+    this.autocompletePlaceholder = undefined;
+    this.value = undefined;
     this.displayKey = 'text';
-    /**
-     * The key of the object to return
-     */
     this.valueKey = 'value';
-    /**
-     * Wether to automatically select the first item
-     */
+    this.queryKey = undefined;
     this.autoSelectFirst = true;
-    /**
-     * The maximum amount of items to display
-     */
     this.maxDisplayedItems = 10;
-    /**
-     * Wether to enable autocomplete
-     */
     this.enableAutocomplete = true;
-    /**
-     * Wether the input uses async filtering
-     */
     this.asyncFilter = false;
-    /**
-     * Wether to show loading items
-     */
     this.loading = false;
-    /**
-     * The size of the input group used by the select
-     */
     this.size = 'medium';
-    /**
-     * Wether the input group is disabled used by the select
-     */
+    this.prefix = undefined;
+    this.label = undefined;
+    this.helper = undefined;
+    this.error = undefined;
     this.disabled = false;
     this._showDropdown = false;
     this._selectedItem = null;
-    this._isAutoCompleting = false;
   }
   get _items() {
     var _a;
@@ -93,13 +76,9 @@ export class Select {
     }
   }
   render() {
-    return (h(Host, { class: "p-select" },
-      h("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, show: this._showDropdown },
-        h("p-input-group", { slot: "trigger", icon: "chevron", iconPosition: "end", size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, error: this.error, disabled: this.disabled, focused: this._showDropdown },
-          h("input", { slot: "input", type: "text", placeholder: this._placeholder, value: this._displayValue, class: `p-input cursor-pointer ${!this._isAutoCompleting && 'read-only'}`, onFocus: () => this._onFocus(), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), onInput: (ev) => this._onChange(ev), ref: (ref) => (this._inputRef = ref) })),
-        h("div", { slot: "items" }, this.loading
-          ? this._getLoadingItems()
-          : this._getItems()))));
+    return (h(Host, { class: "p-select" }, h("p-dropdown", { disableTriggerClick: true, calculateWidth: true, insideClick: true, show: this._showDropdown }, h("p-input-group", { slot: "trigger", icon: "chevron", iconPosition: "end", size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, error: this.error, disabled: this.disabled, focused: this._showDropdown }, h("input", { slot: "input", type: "text", placeholder: this._placeholder, value: this._displayValue, class: `p-input cursor-pointer ${!this._isAutoCompleting && 'read-only'}`, onFocus: () => this._onFocus(), onMouseDown: (ev) => this._onMouseDown(ev), onClick: () => this._onClick(), onInput: (ev) => this._onChange(ev), ref: (ref) => (this._inputRef = ref) })), h("div", { slot: "items" }, this.loading
+      ? this._getLoadingItems()
+      : this._getItems()))));
   }
   documentClickHandler({ target }) {
     if (!this._showDropdown || childOf(target, this._el)) {
@@ -181,398 +160,411 @@ export class Select {
     });
   }
   _getLoadingItems() {
-    return [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false },
-      h("p-loader", { variant: "ghost", class: "w-full h-6 rounded" }))));
+    return [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false }, h("p-loader", { variant: "ghost", class: "w-full h-6 rounded" }))));
   }
   static get is() { return "p-select"; }
-  static get originalStyleUrls() { return {
-    "$": ["select.component.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["select.component.css"]
-  }; }
-  static get properties() { return {
-    "items": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | any[]",
-        "resolved": "any[] | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The items to show in the dropdown"
-      },
-      "attribute": "items",
-      "reflect": false
-    },
-    "query": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The current query"
-      },
-      "attribute": "query",
-      "reflect": false
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The placeholder of the input"
-      },
-      "attribute": "placeholder",
-      "reflect": false
-    },
-    "autocompletePlaceholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The placeholder of the input when auto completing"
-      },
-      "attribute": "autocomplete-placeholder",
-      "reflect": false
-    },
-    "value": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The current value"
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "displayKey": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The key of the object to display"
-      },
-      "attribute": "display-key",
-      "reflect": false,
-      "defaultValue": "'text'"
-    },
-    "valueKey": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The key of the object to return"
-      },
-      "attribute": "value-key",
-      "reflect": false,
-      "defaultValue": "'value'"
-    },
-    "queryKey": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The key of the object to display"
-      },
-      "attribute": "query-key",
-      "reflect": false
-    },
-    "autoSelectFirst": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to automatically select the first item"
-      },
-      "attribute": "auto-select-first",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "maxDisplayedItems": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The maximum amount of items to display"
-      },
-      "attribute": "max-displayed-items",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "enableAutocomplete": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to enable autocomplete"
-      },
-      "attribute": "enable-autocomplete",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "asyncFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether the input uses async filtering"
-      },
-      "attribute": "async-filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show loading items"
-      },
-      "attribute": "loading",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium'",
-        "resolved": "\"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the input group used by the select"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "prefix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The prefix of the input group used by the select"
-      },
-      "attribute": "prefix",
-      "reflect": false
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The label of the input group used by the select"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "helper": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The helper of the input group used by the select"
-      },
-      "attribute": "helper",
-      "reflect": false
-    },
-    "error": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The helper of the input group used by the select"
-      },
-      "attribute": "error",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether the input group is disabled used by the select"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "_showDropdown": {},
-    "_selectedItem": {}
-  }; }
-  static get events() { return [{
-      "method": "queryChange",
-      "name": "queryChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event when the query of the autocomplete changes"
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "valueChange",
-      "name": "valueChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event when the value changes"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["select.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["select.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "items": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | any[]",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The items to show in the dropdown"
+        },
+        "attribute": "items",
+        "reflect": false
+      },
+      "query": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current query"
+        },
+        "attribute": "query",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder of the input"
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "autocompletePlaceholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder of the input when auto completing"
+        },
+        "attribute": "autocomplete-placeholder",
+        "reflect": false
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current value"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "displayKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The key of the object to display"
+        },
+        "attribute": "display-key",
+        "reflect": false,
+        "defaultValue": "'text'"
+      },
+      "valueKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The key of the object to return"
+        },
+        "attribute": "value-key",
+        "reflect": false,
+        "defaultValue": "'value'"
+      },
+      "queryKey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The key of the object to display"
+        },
+        "attribute": "query-key",
+        "reflect": false
+      },
+      "autoSelectFirst": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to automatically select the first item"
+        },
+        "attribute": "auto-select-first",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "maxDisplayedItems": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum amount of items to display"
+        },
+        "attribute": "max-displayed-items",
+        "reflect": false,
+        "defaultValue": "10"
+      },
+      "enableAutocomplete": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to enable autocomplete"
+        },
+        "attribute": "enable-autocomplete",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "asyncFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the input uses async filtering"
+        },
+        "attribute": "async-filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show loading items"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium'",
+          "resolved": "\"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the input group used by the select"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "prefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The prefix of the input group used by the select"
+        },
+        "attribute": "prefix",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label of the input group used by the select"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "helper": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The helper of the input group used by the select"
+        },
+        "attribute": "helper",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The helper of the input group used by the select"
+        },
+        "attribute": "error",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the input group is disabled used by the select"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "_showDropdown": {},
+      "_selectedItem": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "queryChange",
+        "name": "queryChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the query of the autocomplete changes"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the value changes"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "_el"; }
-  static get watchers() { return [{
-      "propName": "value",
-      "methodName": "_valueChange"
-    }, {
-      "propName": "items",
-      "methodName": "itemChanges"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "documentClickHandler",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "_valueChange"
+      }, {
+        "propName": "items",
+        "methodName": "itemChanges"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "documentClickHandler",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }];
+  }
 }