@mmlogic/components 0.1.0

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

@@ -0,0 +1,490 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+import { ClientLayoutItemRelationDisplayType } from "../../types";
+export class MrdRelationField {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.relatedClass = '';
+        this.displayType = ClientLayoutItemRelationDisplayType.SEARCH;
+        this.multiple = false;
+        this.dropdownValues = [];
+        this.value = null;
+        this.searchQuery = '';
+        this.searchResults = [];
+        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({ query, relatedClass: this.relatedClass });
+                }, 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 setSearchResults(results) {
+        this.searchResults = results;
+        this.isLoading = false;
+        this.showResults = true;
+        this.highlightedIndex = -1;
+    }
+    async setLoading(loading) {
+        this.isLoading = loading;
+    }
+    render() {
+        var _a, _b;
+        const hasError = !!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.value, value: dv.value, selected: dv.value === 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": "''"
+            },
+            "displayType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItemRelationDisplayType",
+                    "resolved": "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"
+            },
+            "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[] | null",
+                    "resolved": "null | string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchQuery": {},
+            "searchResults": {},
+            "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": "{ query: string; relatedClass: string }",
+                    "resolved": "{ query: string; relatedClass: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "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": []
+                }
+            }
+        };
+    }
+}