@mmlogic/components 0.3.4 → 0.3.6

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

@@ -1,678 +0,0 @@
-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;
-    }
-    componentWillLoad() {
-        var _a;
-        // Pre-fill selectedItems when value is passed as { id, label } objects
-        // (e.g. when editing an existing record fetched from the API).
-        if (this.value) {
-            if (Array.isArray(this.value)) {
-                if (this.value.length > 0 && typeof this.value[0] === 'object') {
-                    this.selectedItems = this.value;
-                    this.searchQuery = '';
-                }
-            }
-            else if (typeof this.value === 'object') {
-                this.selectedItems = [this.value];
-                this.searchQuery = (_a = this.value.label) !== null && _a !== void 0 ? _a : '';
-            }
-        }
-    }
-    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"
-            }];
-    }
-}