@mmlogic/components 0.3.6 → 0.3.8

package/dist/collection/components/mrd-relation-field/mrd-relation-field.js

@@ -0,0 +1,707 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+import { ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior } from "../../types";
+export class MrdRelationField {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.relatedClass = '';
+        /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */
+        this.mostSignificantClass = '';
+        this.displayType = ClientLayoutItemRelationDisplayType.SEARCH;
+        this.multiple = false;
+        this.dropdownValues = [];
+        /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
+        this.value = null;
+        this.searchQuery = '';
+        this.searchResults = [];
+        this.allRecords = [];
+        this.isLoading = false;
+        this.selectedItems = [];
+        this.showResults = false;
+        this.error = '';
+        this.highlightedIndex = -1;
+        this.searchDebounce = null;
+        this.handleKeyDown = (e) => {
+            if (!this.showResults || this.searchResults.length === 0) {
+                if (e.key === 'Escape') {
+                    this.showResults = false;
+                    this.highlightedIndex = -1;
+                }
+                return;
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.searchResults.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (this.highlightedIndex >= 0) {
+                    this.handleResultSelect(this.searchResults[this.highlightedIndex]);
+                }
+            }
+            else if (e.key === 'Escape') {
+                this.showResults = false;
+                this.highlightedIndex = -1;
+            }
+        };
+        this.clearSelection = () => {
+            this.selectedItems = [];
+            this.searchQuery = '';
+            this.searchResults = [];
+            this.showResults = false;
+            this.highlightedIndex = -1;
+            this.mrdChange.emit({ name: this.name, value: this.multiple ? [] : null });
+        };
+        this.handleSearchInput = (e) => {
+            const query = e.target.value;
+            this.searchQuery = query;
+            if (this.searchDebounce)
+                clearTimeout(this.searchDebounce);
+            if (query.trim().length >= 2) {
+                this.isLoading = true;
+                this.showResults = true;
+                this.searchDebounce = setTimeout(() => {
+                    this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });
+                }, 300);
+            }
+            else {
+                this.searchResults = [];
+                this.showResults = false;
+                this.isLoading = false;
+            }
+        };
+        this.handleResultSelect = (result) => {
+            if (this.multiple) {
+                if (!this.selectedItems.find(i => i.id === result.id)) {
+                    this.selectedItems = [...this.selectedItems, result];
+                }
+                this.searchQuery = '';
+                this.searchResults = [];
+                this.showResults = false;
+                const ids = this.selectedItems.map(i => i.id);
+                this.mrdChange.emit({ name: this.name, value: ids });
+            }
+            else {
+                this.selectedItems = [result];
+                this.searchQuery = result.label;
+                this.showResults = false;
+                this.mrdChange.emit({ name: this.name, value: result.id });
+            }
+            if (this.required && !validateRequired(this.selectedItems)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+        };
+        this.handleRemoveSelected = (id) => {
+            this.selectedItems = this.selectedItems.filter(i => i.id !== id);
+            const ids = this.selectedItems.map(i => i.id);
+            this.mrdChange.emit({ name: this.name, value: this.multiple ? ids : null });
+        };
+        this.handleDropdownChange = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = () => {
+            var _a, _b;
+            setTimeout(() => {
+                this.showResults = false;
+                this.highlightedIndex = -1;
+            }, 200);
+            const val = this.multiple ? this.selectedItems.map(i => i.id) : ((_b = (_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    async setAllRecords(records) {
+        this.allRecords = records;
+    }
+    getValueHref() {
+        var _a, _b, _c;
+        const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+        if (!v)
+            return '';
+        if (typeof v === 'object')
+            return (_c = v.id) !== null && _c !== void 0 ? _c : '';
+        return v;
+    }
+    allRecordsChanged() {
+        if (this.editBehavior !== ClientLayoutItemRelationEditBehavior.DROPDOWN)
+            return;
+        const current = this.getValueHref();
+        if (!current)
+            return;
+        // Defer past Stencil's async render cycle: options must exist in the DOM before
+        // select.value can be set. setAttribute('selected') alone is ignored by browsers
+        // when the select already has an established value.
+        setTimeout(() => {
+            var _a;
+            const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
+            if (select)
+                select.value = current;
+        }, 0);
+    }
+    async setSearchResults(results) {
+        this.searchResults = results;
+        this.isLoading = false;
+        this.showResults = true;
+        this.highlightedIndex = -1;
+    }
+    async setLoading(loading) {
+        this.isLoading = loading;
+    }
+    toSearchResult(v) {
+        var _a, _b, _c, _d;
+        return {
+            id: (_b = (_a = v.id) !== null && _a !== void 0 ? _a : v.href) !== null && _b !== void 0 ? _b : '',
+            label: (_d = (_c = v.label) !== null && _c !== void 0 ? _c : v.name) !== null && _d !== void 0 ? _d : '',
+            description: v.description,
+        };
+    }
+    applyValuePrefill(v) {
+        if (!v)
+            return;
+        if (Array.isArray(v)) {
+            if (v.length > 0 && typeof v[0] === 'object') {
+                this.selectedItems = v.map(item => this.toSearchResult(item));
+                this.searchQuery = '';
+            }
+            // array of strings → user interaction, ignore
+        }
+        else if (typeof v === 'object') {
+            const obj = v;
+            if (Array.isArray(obj.values)) {
+                // Multiple relation: API embeds selected items in values[]
+                this.selectedItems = obj.values.map((item) => this.toSearchResult(item));
+                this.searchQuery = '';
+            }
+            else if (!this.multiple && (obj.id || obj.name || obj.label)) {
+                // Single relation: { href, name } or already { id, label }
+                const result = this.toSearchResult(obj);
+                this.selectedItems = [result];
+                this.searchQuery = result.label;
+            }
+            // else: collection href (multiple without values) or unrecognised — skip
+        }
+    }
+    componentWillLoad() {
+        this.applyValuePrefill(this.value);
+    }
+    // Handles edit-mode: values prop on mrd-form is often set async after mount.
+    // Only updates selectedItems when the new value contains { id, label } objects
+    // (host pre-fill). Plain href strings from user interaction are ignored.
+    valueChanged(newValue) {
+        this.applyValuePrefill(newValue);
+    }
+    componentDidLoad() {
+        // Only emit when there is no commonRelation dependency — the form orchestrates those.
+        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
+            // Defer to next tick so parent event listeners are registered after DOM patching
+            setTimeout(() => {
+                this.mrdFetchAll.emit({
+                    name: this.name,
+                    relatedClass: this.relatedClass,
+                    mostSignificantClass: this.mostSignificantClass || undefined,
+                });
+            }, 0);
+        }
+    }
+    render() {
+        var _a, _b;
+        const hasError = !!this.error;
+        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN) {
+            const currentValue = this.getValueHref();
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        if (this.displayType === ClientLayoutItemRelationDisplayType.DROPDOWN) {
+            const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        // SEARCH mode
+        const labelEl = this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
+        // Single selection: show selected value as a badge, hide the search input
+        if (!this.multiple && this.selectedItems.length > 0) {
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, labelEl, h("div", { class: `mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}` }, h("span", { class: "mrd-relation-field__selected-name" }, this.selectedItems[0].label), h("button", { type: "button", class: "mrd-relation-field__selected-clear", onClick: this.clearSelection, "aria-label": t('remove', this.locale) }, "\u2715")), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        return (h(Host, null, h("div", { class: "mrd-relation-field" }, labelEl, this.multiple && this.selectedItems.length > 0 && (h("div", { class: "mrd-relation-field__tags" }, this.selectedItems.map(item => (h("span", { key: item.id, class: "mrd-relation-field__tag" }, item.label, h("button", { type: "button", class: "mrd-relation-field__tag-remove", onClick: () => this.handleRemoveSelected(item.id), "aria-label": t('remove', this.locale) }, "\u2715")))))), h("div", { class: "mrd-relation-field__search-wrapper" }, h("input", { class: `mrd-relation-field__search${hasError ? ' mrd-relation-field__search--error' : ''}`, type: "text", value: this.searchQuery, placeholder: t('search_placeholder', this.locale), disabled: this.disabled, onInput: this.handleSearchInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }), this.isLoading && (h("span", { class: "mrd-relation-field__spinner", "aria-label": t('loading', this.locale) }))), this.showResults && (h("div", { class: "mrd-relation-field__results" }, this.searchResults.length === 0 && !this.isLoading ? (h("div", { class: "mrd-relation-field__no-results" }, t('no_results', this.locale))) : (this.searchResults.map((result, i) => (h("div", { key: result.id, class: `mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`, onMouseDown: () => this.handleResultSelect(result) }, h("span", { class: "mrd-relation-field__result-label" }, result.label), result.description && (h("span", { class: "mrd-relation-field__result-desc" }, result.description)))))))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+    }
+    static get is() { return "mrd-relation-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-relation-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-relation-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            },
+            "relatedClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "related-class",
+                "defaultValue": "''"
+            },
+            "mostSignificantClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, used instead of relatedClass for search queries (mostSignificantClass from API)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "most-significant-class",
+                "defaultValue": "''"
+            },
+            "displayType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItemRelationDisplayType",
+                    "resolved": "ClientLayoutItemRelationDisplayType.CHECKBOX | ClientLayoutItemRelationDisplayType.DROPDOWN | ClientLayoutItemRelationDisplayType.SEARCH",
+                    "references": {
+                        "ClientLayoutItemRelationDisplayType": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ClientLayoutItemRelationDisplayType",
+                            "referenceLocation": "ClientLayoutItemRelationDisplayType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-type",
+                "defaultValue": "ClientLayoutItemRelationDisplayType.SEARCH"
+            },
+            "editBehavior": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItemRelationEditBehavior | null",
+                    "resolved": "ClientLayoutItemRelationEditBehavior.CHECKBOX | ClientLayoutItemRelationEditBehavior.DROPDOWN | ClientLayoutItemRelationEditBehavior.SEARCH | null | undefined",
+                    "references": {
+                        "ClientLayoutItemRelationEditBehavior": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ClientLayoutItemRelationEditBehavior",
+                            "referenceLocation": "ClientLayoutItemRelationEditBehavior"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "edit-behavior"
+            },
+            "commonRelation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "common-relation"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "dropdownValues": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientListValue[]",
+                    "resolved": "ClientListValue[]",
+                    "references": {
+                        "ClientListValue": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ClientListValue",
+                            "referenceLocation": "ClientListValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[] | RelationSearchResult | RelationSearchResult[] | null",
+                    "resolved": "RelationSearchResult | RelationSearchResult[] | null | string | string[]",
+                    "references": {
+                        "RelationSearchResult": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::RelationSearchResult",
+                            "referenceLocation": "RelationSearchResult"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchQuery": {},
+            "searchResults": {},
+            "allRecords": {},
+            "isLoading": {},
+            "selectedItems": {},
+            "showResults": {},
+            "error": {},
+            "highlightedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdChange",
+                "name": "mrdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string | string[] | null }",
+                    "resolved": "{ name: string; value: string | string[] | null; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdBlur",
+                "name": "mrdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string | string[] | null }",
+                    "resolved": "{ name: string; value: string | string[] | null; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdSearch",
+                "name": "mrdSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; query: string; relatedClass: string }",
+                    "resolved": "{ name: string; query: string; relatedClass: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdFetchAll",
+                "name": "mrdFetchAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; relatedClass: string; mostSignificantClass?: string; commonRelation?: string; filter?: string; filterValue?: string }",
+                    "resolved": "{ name: string; relatedClass: string; mostSignificantClass?: string | undefined; commonRelation?: string | undefined; filter?: string | undefined; filterValue?: string | undefined; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setAllRecords": {
+                "complexType": {
+                    "signature": "(records: RelationSearchResult[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "records",
+                            "type": "RelationSearchResult[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RelationSearchResult": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::RelationSearchResult",
+                            "referenceLocation": "RelationSearchResult"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setSearchResults": {
+                "complexType": {
+                    "signature": "(results: RelationSearchResult[]) => Promise<void>",
+                    "parameters": [{
+                            "name": "results",
+                            "type": "RelationSearchResult[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "RelationSearchResult": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::RelationSearchResult",
+                            "referenceLocation": "RelationSearchResult"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setLoading": {
+                "complexType": {
+                    "signature": "(loading: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "loading",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "allRecords",
+                "methodName": "allRecordsChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}