@mmlogic/components 0.1.0 → 0.1.2

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

@@ -10,7 +10,8 @@ export class MrdListField {
         this.disabled = false;
         this.multiple = false;
         this.locale = navigator.language;
-        this.listValues = [];
+        /** List items from the API. Each item has a `key` (stored value) and `label`. */
+        this.listItems = [];
         this.error = '';
         this.selected = [];
         this.handleSelectChange = (e) => {
@@ -41,12 +42,12 @@ export class MrdListField {
             const val = this.multiple ? this.selected : this.value;
             this.mrdBlur.emit({ name: this.name, value: val });
         };
-        this.toggleCheckbox = (val) => {
-            if (this.selected.includes(val)) {
-                this.selected = this.selected.filter(v => v !== val);
+        this.toggleCheckbox = (key) => {
+            if (this.selected.includes(key)) {
+                this.selected = this.selected.filter(v => v !== key);
             }
             else {
-                this.selected = [...this.selected, val];
+                this.selected = [...this.selected, key];
             }
             if (this.required && !validateRequired(this.selected)) {
                 this.error = t('required', this.locale);
@@ -77,15 +78,16 @@ export class MrdListField {
         const hasError = !!this.error;
         const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
         if (this.multiple) {
-            // Render checkbox list for multi-select
-            return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listValues.map(lv => (h("label", { key: lv.value, class: "mrd-list-field__checkbox-item" }, h("input", { type: "checkbox", checked: this.selected.includes(lv.value), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.value) }), lv.color && (h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: lv.color } })), h("span", null, lv.label))))), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
+            return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("div", { class: `mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}` }, this.listItems.map(lv => {
+                var _a, _b;
+                return (h("label", { key: lv.key, class: "mrd-list-field__checkbox-item" }, h("input", { type: "checkbox", checked: this.selected.includes(lv.key), disabled: this.disabled, onChange: () => this.toggleCheckbox(lv.key) }), (lv.color || lv.backgroundColor) && (h("span", { class: "mrd-list-field__color-dot", style: { backgroundColor: (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : '' } })), h("span", null, lv.label)));
+            })), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
         }
-        // Single select dropdown
-        return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.listValues.map(lv => {
-            const style = lv.color
-                ? { backgroundColor: lv.color, color: this.getContrastColor(lv.color) }
-                : {};
-            return (h("option", { key: lv.value, value: lv.value, selected: lv.value === currentValue, style: style }, lv.label));
+        return (h(Host, null, h("div", { class: "mrd-list-field" }, this.label && (h("label", { class: `mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleSelectChange, onBlur: this.handleBlur }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.listItems.map(lv => {
+            var _a, _b;
+            const bg = (_b = (_a = lv.backgroundColor) !== null && _a !== void 0 ? _a : lv.color) !== null && _b !== void 0 ? _b : null;
+            const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};
+            return (h("option", { key: lv.key, value: lv.key, selected: lv.key === currentValue, style: style }, lv.label));
         })), hasError && h("span", { class: "mrd-list-field__error" }, this.error))));
     }
     static get is() { return "mrd-list-field"; }
@@ -242,7 +244,7 @@ export class MrdListField {
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
             },
-            "listValues": {
+            "listItems": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -261,7 +263,7 @@ export class MrdListField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "List items from the API. Each item has a `key` (stored value) and `label`."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -13,6 +13,7 @@ export class MrdRelationField {
         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 = [];
@@ -133,12 +134,29 @@ export class MrdRelationField {
     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)
+            return;
+        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 : '';
+        }
+    }
     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))));
+            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));
@@ -287,7 +305,7 @@ export class MrdRelationField {
                 "mutable": false,
                 "complexType": {
                     "original": "ClientLayoutItemRelationDisplayType",
-                    "resolved": "ClientLayoutItemRelationDisplayType.DROPDOWN | ClientLayoutItemRelationDisplayType.SEARCH",
+                    "resolved": "ClientLayoutItemRelationDisplayType.CHECKBOX | ClientLayoutItemRelationDisplayType.DROPDOWN | ClientLayoutItemRelationDisplayType.SEARCH",
                     "references": {
                         "ClientLayoutItemRelationDisplayType": {
                             "location": "import",
@@ -358,15 +376,22 @@ export class MrdRelationField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | string[] | null",
-                    "resolved": "null | string | string[]",
-                    "references": {}
+                    "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": ""
+                    "text": "Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/mrd-table/mrd-table.js

@@ -107,12 +107,17 @@ export class MrdTable {
         return this.sortDir === 'desc' ? `${this.sortField},desc` : this.sortField;
     }
     /** Called when a header cell is clicked. Toggles direction or sets a new column. */
+    colName(col) {
+        var _a, _b, _c, _d;
+        return (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '';
+    }
     handleSortClick(col) {
-        if (this.sortField === col.name) {
+        const name = this.colName(col);
+        if (this.sortField === name) {
             this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
         }
         else {
-            this.sortField = col.name;
+            this.sortField = name;
             this.sortDir = 'asc';
         }
         // Cancel any pending scroll debounce.
@@ -215,10 +220,13 @@ export class MrdTable {
         const numericTypes = new Set(['INTEGER', 'DECIMAL', 'PERCENTAGE', 'CURRENCY']);
         // ── Non-paginated mode ──────────────────────────────────────────────────
         if (this.totalElements === 0) {
-            return (h(Host, null, h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => (h("th", { class: "mrd-table__header" }, col.label))))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
-                var _a;
+            return (h(Host, null, h("div", { class: "mrd-table" }, h("table", { class: "mrd-table__table" }, h("thead", null, h("tr", null, this.columns.map(col => {
+                var _a, _b, _c, _d;
+                return (h("th", { class: "mrd-table__header" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''));
+            }))), h("tbody", null, (_b = this.rows) === null || _b === void 0 ? void 0 : _b.map((row, i) => (h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => {
+                var _a, _b;
                 const value = CellRenderer.render(col, row, this.locale);
-                const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
+                const isNumeric = col.type === 'FIELD' && numericTypes.has((_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '');
                 return (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
             })))))), (!this.rows || this.rows.length === 0) && (h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden.")))));
         }
@@ -234,10 +242,10 @@ export class MrdTable {
                 renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--loading" }, h("td", { class: "mrd-table__cell--placeholder", colSpan: colCount }, h("span", { class: "mrd-table__placeholder-bar" }))));
             }
             else {
-                renderedRows.push(h("tr", { class: "mrd-table__row", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' } }, this.columns.map(col => {
-                    var _a;
+                renderedRows.push(h("tr", { class: "mrd-table__row mrd-table__row--clickable", style: { background: i % 2 === 0 ? '' : 'var(--mrd-color-neutral-100)' }, onClick: () => this.mrdRowClick.emit(row) }, this.columns.map(col => {
+                    var _a, _b;
                     const value = CellRenderer.render(col, row, this.locale);
-                    const isNumeric = col.type === 'FIELD' && numericTypes.has((_a = col.dataType) !== null && _a !== void 0 ? _a : '');
+                    const isNumeric = col.type === 'FIELD' && numericTypes.has((_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.dataType) !== null && _b !== void 0 ? _b : '');
                     return (h("td", { class: `mrd-table__cell${isNumeric ? ' mrd-table__cell--numeric' : ''}` }, value));
                 })));
             }
@@ -246,9 +254,10 @@ export class MrdTable {
             ? { tableLayout: 'fixed' }
             : undefined;
         return (h(Host, null, h("div", { class: "mrd-table__scroll", style: { height: `${this.tableHeight}px` }, onScroll: this.handleScroll }, h("table", { class: "mrd-table__table", style: tableStyle }, h("thead", null, h("tr", null, this.columns.map((col, idx) => {
-            const isActive = this.sortField === col.name;
+            var _a, _b, _c, _d;
+            const isActive = this.sortField === this.colName(col);
             const cls = `mrd-table__header mrd-table__header--sortable${isActive ? ` mrd-table__header--sorted-${this.sortDir}` : ''}`;
-            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, h("span", { class: "mrd-table__header-label" }, col.label), h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
+            return (h("th", { class: cls, style: this.colWidths[idx] ? { width: `${this.colWidths[idx]}px` } : undefined, onClick: () => this.handleSortClick(col) }, h("span", { class: "mrd-table__header-label" }, (_d = (_b = (_a = col.field) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = col.relation) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ''), h("span", { class: "mrd-table__sort-icon", "aria-hidden": "true" }, isActive ? (this.sortDir === 'asc' ? '▲' : '▼') : '⇅')));
         }))), h("tbody", null, topSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${topSpacerHeight}px` } }, h("td", { colSpan: colCount }))), renderedRows, bottomSpacerHeight > 0 && (h("tr", { class: "mrd-table__spacer", style: { height: `${bottomSpacerHeight}px` } }, h("td", { colSpan: colCount })))))), total === 0 && (h("p", { class: "mrd-table__empty" }, "Geen resultaten gevonden."))));
     }
     static get is() { return "mrd-table"; }
@@ -270,7 +279,7 @@ export class MrdTable {
                 "mutable": false,
                 "complexType": {
                     "original": "TableColumn[]",
-                    "resolved": "TableColumn[]",
+                    "resolved": "ClientLayoutItem[]",
                     "references": {
                         "TableColumn": {
                             "location": "import",
@@ -462,6 +471,26 @@ export class MrdTable {
                     "resolved": "{ page: number; sort: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "mrdRowClick",
+                "name": "mrdRowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a data row is clicked. Detail is the full row object including _links."
+                },
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "any | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/mrd-table/mrd-table.scss

@@ -96,6 +96,10 @@
   background: var(--mrd-color-neutral-200) !important;
 }
 
+.mrd-table__row--clickable {
+  cursor: pointer;
+}
+
 /* ── Spacer rows (virtual scroll padding above/below render window) ─────── */
 .mrd-table__spacer {
   border: none;

package/dist/collection/types/client-layout.js

@@ -1,10 +1,33 @@
+// ─── Layout type ──────────────────────────────────────────────────────────────
+export var ClientLayoutType;
+(function (ClientLayoutType) {
+    ClientLayoutType["OBJECT_FORM_DASHBOARD"] = "OBJECT_FORM_DASHBOARD";
+    ClientLayoutType["CLASS_DASHBOARD"] = "CLASS_DASHBOARD";
+    ClientLayoutType["GENERAL_DASHBOARD"] = "GENERAL_DASHBOARD";
+    ClientLayoutType["NAVIGATION_PANE"] = "NAVIGATION_PANE";
+})(ClientLayoutType || (ClientLayoutType = {}));
+// ─── Item types ───────────────────────────────────────────────────────────────
 export var ClientLayoutItemType;
 (function (ClientLayoutItemType) {
+    // Form / data input
     ClientLayoutItemType["FIELD"] = "FIELD";
     ClientLayoutItemType["RELATION"] = "RELATION";
+    // Layout structure
     ClientLayoutItemType["SECTION"] = "SECTION";
     ClientLayoutItemType["GROUP"] = "GROUP";
+    // Read-only / display
+    ClientLayoutItemType["HEADER"] = "HEADER";
+    ClientLayoutItemType["TEXT"] = "TEXT";
+    // Navigation / actions
+    ClientLayoutItemType["NAVIGATE"] = "NAVIGATE";
+    ClientLayoutItemType["ACTION"] = "ACTION";
+    ClientLayoutItemType["SEARCH"] = "SEARCH";
+    // Dashboard views
+    ClientLayoutItemType["VIEW"] = "VIEW";
+    ClientLayoutItemType["RELATED_VIEW"] = "RELATED_VIEW";
+    ClientLayoutItemType["RELATED_OBJECT"] = "RELATED_OBJECT";
 })(ClientLayoutItemType || (ClientLayoutItemType = {}));
+// ─── Field data types ─────────────────────────────────────────────────────────
 export var ClientLayoutItemFieldDataType;
 (function (ClientLayoutItemFieldDataType) {
     ClientLayoutItemFieldDataType["TEXT"] = "TEXT";
@@ -23,8 +46,16 @@ export var ClientLayoutItemFieldDataType;
     ClientLayoutItemFieldDataType["FILE"] = "FILE";
     ClientLayoutItemFieldDataType["IMAGE"] = "IMAGE";
 })(ClientLayoutItemFieldDataType || (ClientLayoutItemFieldDataType = {}));
+// ─── Relation display / edit behaviour ───────────────────────────────────────
 export var ClientLayoutItemRelationDisplayType;
 (function (ClientLayoutItemRelationDisplayType) {
     ClientLayoutItemRelationDisplayType["SEARCH"] = "SEARCH";
     ClientLayoutItemRelationDisplayType["DROPDOWN"] = "DROPDOWN";
+    ClientLayoutItemRelationDisplayType["CHECKBOX"] = "CHECKBOX";
 })(ClientLayoutItemRelationDisplayType || (ClientLayoutItemRelationDisplayType = {}));
+export var ClientLayoutItemRelationEditBehavior;
+(function (ClientLayoutItemRelationEditBehavior) {
+    ClientLayoutItemRelationEditBehavior["SEARCH"] = "SEARCH";
+    ClientLayoutItemRelationEditBehavior["DROPDOWN"] = "DROPDOWN";
+    ClientLayoutItemRelationEditBehavior["CHECKBOX"] = "CHECKBOX";
+})(ClientLayoutItemRelationEditBehavior || (ClientLayoutItemRelationEditBehavior = {}));

package/dist/collection/utils/cell-renderer.js

@@ -1,26 +1,31 @@
 import { formatNumber, formatPercentage, formatCurrency, formatDate, formatDateTime, formatTime } from "./format";
+import { ClientLayoutItemType } from "../types/client-layout";
 export class CellRenderer {
     static render(column, row, locale) {
-        var _a, _b;
-        if (column.type === 'RELATION') {
-            const link = (_a = row === null || row === void 0 ? void 0 : row._links) === null || _a === void 0 ? void 0 : _a[column.name];
+        var _a, _b, _c, _d;
+        if (column.type === ClientLayoutItemType.RELATION) {
+            const name = (_b = (_a = column.relation) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '';
+            const link = (_c = row === null || row === void 0 ? void 0 : row._links) === null || _c === void 0 ? void 0 : _c[name];
             if (!link)
                 return '';
             if (Array.isArray(link))
                 return link.map((l) => { var _a; return (_a = l.name) !== null && _a !== void 0 ? _a : ''; }).filter(Boolean).join(', ');
-            return (_b = link.name) !== null && _b !== void 0 ? _b : '';
+            return (_d = link.name) !== null && _d !== void 0 ? _d : '';
         }
-        const raw = row === null || row === void 0 ? void 0 : row[column.name];
+        if (column.type !== ClientLayoutItemType.FIELD || !column.field)
+            return '';
+        const { name, dataType, listItems } = column.field;
+        const raw = row === null || row === void 0 ? void 0 : row[name];
         if (raw == null || raw === '')
             return '';
         const values = Array.isArray(raw) ? raw : [raw];
         return values
-            .map(v => { var _a; return CellRenderer.renderValue((_a = column.dataType) !== null && _a !== void 0 ? _a : 'TEXT', v, column, locale); })
+            .map(v => CellRenderer.renderValue(dataType !== null && dataType !== void 0 ? dataType : 'TEXT', v, listItems !== null && listItems !== void 0 ? listItems : [], locale))
             .filter(s => s !== '')
             .join(', ');
     }
-    static renderValue(dataType, value, column, locale) {
-        var _a, _b;
+    static renderValue(dataType, value, listItems, locale) {
+        var _a;
         switch (dataType) {
             case 'INTEGER':
                 return formatNumber(Number(value), locale, { maximumFractionDigits: 0 });
@@ -45,8 +50,8 @@ export class CellRenderer {
             case 'BOOLEAN':
                 return value ? '✓' : '';
             case 'LIST': {
-                const item = (_a = column.listItems) === null || _a === void 0 ? void 0 : _a.find(li => li.key === String(value));
-                return (_b = item === null || item === void 0 ? void 0 : item.label) !== null && _b !== void 0 ? _b : String(value);
+                const item = listItems.find(li => li.key === String(value));
+                return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : String(value);
             }
             case 'TEXTBLOCK':
                 return String(value).replace(/<[^>]*>/g, '').trim();

package/dist/components/client-layout.js

@@ -1 +1 @@
-var E,T,I;!function(E){E.FIELD="FIELD",E.RELATION="RELATION",E.SECTION="SECTION",E.GROUP="GROUP"}(E||(E={})),function(E){E.TEXT="TEXT",E.TEXTBLOCK="TEXTBLOCK",E.INTEGER="INTEGER",E.DECIMAL="DECIMAL",E.PERCENTAGE="PERCENTAGE",E.CURRENCY="CURRENCY",E.BOOLEAN="BOOLEAN",E.DATE="DATE",E.DATETIME="DATETIME",E.TIME="TIME",E.EMAIL="EMAIL",E.HYPERLINK="HYPERLINK",E.LIST="LIST",E.FILE="FILE",E.IMAGE="IMAGE"}(T||(T={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN"}(I||(I={}));export{E as C,T as a,I as b}
+var E,A,T,O,R;!function(E){E.OBJECT_FORM_DASHBOARD="OBJECT_FORM_DASHBOARD",E.CLASS_DASHBOARD="CLASS_DASHBOARD",E.GENERAL_DASHBOARD="GENERAL_DASHBOARD",E.NAVIGATION_PANE="NAVIGATION_PANE"}(E||(E={})),function(E){E.FIELD="FIELD",E.RELATION="RELATION",E.SECTION="SECTION",E.GROUP="GROUP",E.HEADER="HEADER",E.TEXT="TEXT",E.NAVIGATE="NAVIGATE",E.ACTION="ACTION",E.SEARCH="SEARCH",E.VIEW="VIEW",E.RELATED_VIEW="RELATED_VIEW",E.RELATED_OBJECT="RELATED_OBJECT"}(A||(A={})),function(E){E.TEXT="TEXT",E.TEXTBLOCK="TEXTBLOCK",E.INTEGER="INTEGER",E.DECIMAL="DECIMAL",E.PERCENTAGE="PERCENTAGE",E.CURRENCY="CURRENCY",E.BOOLEAN="BOOLEAN",E.DATE="DATE",E.DATETIME="DATETIME",E.TIME="TIME",E.EMAIL="EMAIL",E.HYPERLINK="HYPERLINK",E.LIST="LIST",E.FILE="FILE",E.IMAGE="IMAGE"}(T||(T={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN",E.CHECKBOX="CHECKBOX"}(O||(O={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN",E.CHECKBOX="CHECKBOX"}(R||(R={}));export{E as C,A as a,T as b,O as c,R as d}

package/dist/components/index.js

@@ -1 +1 @@
-export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";export{a as ClientLayoutItemFieldDataType,b as ClientLayoutItemRelationDisplayType,C as ClientLayoutItemType}from"./client-layout.js";
+export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";export{b as ClientLayoutItemFieldDataType,c as ClientLayoutItemRelationDisplayType,d as ClientLayoutItemRelationEditBehavior,a as ClientLayoutItemType,C as ClientLayoutType}from"./client-layout.js";

package/dist/components/mrd-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as l,createEvent as d,h as r,Host as i,transformTag as t}from"@stencil/core/internal/client";import{C as m,b as a,a as s}from"./client-layout.js";import{d as n}from"./mrd-boolean-field2.js";import{d as o}from"./mrd-currency-field2.js";import{d as u}from"./mrd-date-field2.js";import{d as c}from"./mrd-datetime-field2.js";import{d as f}from"./mrd-email-field2.js";import{d as v}from"./mrd-file-field2.js";import{d as b}from"./mrd-hyperlink-field2.js";import{d as h}from"./mrd-image-field2.js";import{d as p}from"./mrd-list-field2.js";import{d as j}from"./mrd-number-field2.js";import{d as k}from"./mrd-relation-field2.js";import{d as E}from"./mrd-text-field2.js";import{d as y}from"./mrd-textarea-field2.js";import{d as O}from"./mrd-time-field2.js";const x=e(class extends l{constructor(e){super(),!1!==e&&this.__registerHost(),this.mrdChange=d(this,"mrdChange",7),this.mrdBlur=d(this,"mrdBlur",7),this.mrdSearch=d(this,"mrdSearch",7),this.locale=navigator.language,this.handleChange=e=>{e.stopPropagation(),this.mrdChange.emit(e.detail)},this.handleBlur=e=>{e.stopPropagation(),this.mrdBlur.emit(e.detail)},this.handleSearch=e=>{e.stopPropagation(),this.mrdSearch.emit(e.detail)}}render(){var e,l,d,t,n,o,u,c,f,v,b,h,p,j,k,E,y,O,x,g,M,C,S,w,B,q,z,T,V;const{item:P,locale:R,value:U}=this;if(P.type===m.RELATION&&P.relation){const m=P.relation;return r(i,null,r("mrd-relation-field",{name:m.name,label:m.label,required:m.required,disabled:null!==(e=m.disabled)&&void 0!==e&&e,locale:R,relatedClass:m.relatedClass,displayType:null!==(l=m.displayType)&&void 0!==l?l:a.SEARCH,multiple:null!==(d=m.multiple)&&void 0!==d&&d,dropdownValues:null!==(t=m.dropdownValues)&&void 0!==t?t:[],value:U,onMrdChange:this.handleChange,onMrdBlur:this.handleBlur,onMrdSearch:this.handleSearch}))}if(P.type!==m.FIELD||!P.field)return r(i,null);const A=P.field,D={name:A.name,label:A.label,required:A.required,disabled:null!==(n=A.disabled)&&void 0!==n&&n,locale:R,onMrdChange:this.handleChange,onMrdBlur:this.handleBlur};switch(A.dataType){case s.TEXT:return r(i,null,r("mrd-text-field",Object.assign({},D,{value:null!==(o=U)&&void 0!==o?o:"",placeholder:null!==(u=A.placeholder)&&void 0!==u?u:""})));case s.TEXTBLOCK:return r(i,null,r("mrd-textarea-field",Object.assign({},D,{value:null!==(c=U)&&void 0!==c?c:"",placeholder:null!==(f=A.placeholder)&&void 0!==f?f:""})));case s.INTEGER:case s.DECIMAL:case s.PERCENTAGE:return r(i,null,r("mrd-number-field",Object.assign({},D,{value:null!==(v=U)&&void 0!==v?v:null,dataType:A.dataType,decimalPrecision:null!==(b=A.decimalPrecision)&&void 0!==b?b:2,placeholder:null!==(h=A.placeholder)&&void 0!==h?h:""})));case s.CURRENCY:return r(i,null,r("mrd-currency-field",Object.assign({},D,{value:null!==(p=U)&&void 0!==p?p:{amount:null,currency:null!==(j=A.currencyCode)&&void 0!==j?j:"EUR"}})));case s.BOOLEAN:return r(i,null,r("mrd-boolean-field",Object.assign({},D,{value:null!==(k=U)&&void 0!==k&&k})));case s.DATE:return r(i,null,r("mrd-date-field",Object.assign({},D,{value:null!==(E=U)&&void 0!==E?E:""})));case s.DATETIME:return r(i,null,r("mrd-datetime-field",Object.assign({},D,{value:null!==(y=U)&&void 0!==y?y:""})));case s.TIME:return r(i,null,r("mrd-time-field",Object.assign({},D,{value:null!==(O=U)&&void 0!==O?O:""})));case s.EMAIL:return r(i,null,r("mrd-email-field",Object.assign({},D,{value:null!==(x=U)&&void 0!==x?x:"",placeholder:null!==(g=A.placeholder)&&void 0!==g?g:""})));case s.HYPERLINK:return r(i,null,r("mrd-hyperlink-field",Object.assign({},D,{value:null!==(M=U)&&void 0!==M?M:"",placeholder:null!==(C=A.placeholder)&&void 0!==C?C:""})));case s.LIST:return r(i,null,r("mrd-list-field",Object.assign({},D,{value:null!==(S=U)&&void 0!==S?S:"",multiple:null!==(w=A.multiple)&&void 0!==w&&w,listValues:null!==(B=A.listValues)&&void 0!==B?B:[]})));case s.FILE:return r(i,null,r("mrd-file-field",Object.assign({},D,{accept:null!==(q=A.accept)&&void 0!==q?q:"",maxSize:null!==(z=A.maxSize)&&void 0!==z?z:0})));case s.IMAGE:return r(i,null,r("mrd-image-field",Object.assign({},D,{accept:null!==(T=A.accept)&&void 0!==T?T:"image/*",maxSize:null!==(V=A.maxSize)&&void 0!==V?V:0})));default:return r(i,null)}}},[2,"mrd-field",{item:[16],locale:[1],value:[16]}]);function g(){"undefined"!=typeof customElements&&["mrd-field","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((e=>{switch(e){case"mrd-field":customElements.get(t(e))||customElements.define(t(e),x);break;case"mrd-boolean-field":customElements.get(t(e))||n();break;case"mrd-currency-field":customElements.get(t(e))||o();break;case"mrd-date-field":customElements.get(t(e))||u();break;case"mrd-datetime-field":customElements.get(t(e))||c();break;case"mrd-email-field":customElements.get(t(e))||f();break;case"mrd-file-field":customElements.get(t(e))||v();break;case"mrd-hyperlink-field":customElements.get(t(e))||b();break;case"mrd-image-field":customElements.get(t(e))||h();break;case"mrd-list-field":customElements.get(t(e))||p();break;case"mrd-number-field":customElements.get(t(e))||j();break;case"mrd-relation-field":customElements.get(t(e))||k();break;case"mrd-text-field":customElements.get(t(e))||E();break;case"mrd-textarea-field":customElements.get(t(e))||y();break;case"mrd-time-field":customElements.get(t(e))||O()}}))}export{x as M,g as d}
+import{proxyCustomElement as e,HTMLElement as l,createEvent as d,h as r,Host as i,transformTag as t}from"@stencil/core/internal/client";import{a as m,c as a,b as s}from"./client-layout.js";import{d as n}from"./mrd-boolean-field2.js";import{d as o}from"./mrd-currency-field2.js";import{d as u}from"./mrd-date-field2.js";import{d as c}from"./mrd-datetime-field2.js";import{d as f}from"./mrd-email-field2.js";import{d as v}from"./mrd-file-field2.js";import{d as b}from"./mrd-hyperlink-field2.js";import{d as h}from"./mrd-image-field2.js";import{d as p}from"./mrd-list-field2.js";import{d as j}from"./mrd-number-field2.js";import{d as k}from"./mrd-relation-field2.js";import{d as E}from"./mrd-text-field2.js";import{d as y}from"./mrd-textarea-field2.js";import{d as O}from"./mrd-time-field2.js";const x=e(class extends l{constructor(e){super(),!1!==e&&this.__registerHost(),this.mrdChange=d(this,"mrdChange",7),this.mrdBlur=d(this,"mrdBlur",7),this.mrdSearch=d(this,"mrdSearch",7),this.locale=navigator.language,this.handleChange=e=>{e.stopPropagation(),this.mrdChange.emit(e.detail)},this.handleBlur=e=>{e.stopPropagation(),this.mrdBlur.emit(e.detail)},this.handleSearch=e=>{e.stopPropagation(),this.mrdSearch.emit(e.detail)}}render(){var e,l,d,t,n,o,u,c,f,v,b,h,p,j,k,E,y,O,x,g,M,C,S,w,B,q,z,T,I;const{item:P,locale:R,value:U}=this;if(P.type===m.RELATION&&P.relation){const m=P.relation;return r(i,null,r("mrd-relation-field",{name:m.name,label:m.label,required:m.required,disabled:null!==(e=m.disabled)&&void 0!==e&&e,locale:R,relatedClass:m.relatedClass,displayType:null!==(l=m.displayType)&&void 0!==l?l:a.SEARCH,multiple:null!==(d=m.multiple)&&void 0!==d&&d,dropdownValues:null!==(t=m.dropdownValues)&&void 0!==t?t:[],value:U,onMrdChange:this.handleChange,onMrdBlur:this.handleBlur,onMrdSearch:this.handleSearch}))}if(P.type!==m.FIELD||!P.field)return r(i,null);const V=P.field,A={name:V.name,label:V.label,required:V.required,disabled:null!==(n=V.disabled)&&void 0!==n&&n,locale:R,onMrdChange:this.handleChange,onMrdBlur:this.handleBlur};switch(V.dataType){case s.TEXT:return r(i,null,r("mrd-text-field",Object.assign({},A,{value:null!==(o=U)&&void 0!==o?o:"",placeholder:null!==(u=V.placeholder)&&void 0!==u?u:""})));case s.TEXTBLOCK:return r(i,null,r("mrd-textarea-field",Object.assign({},A,{value:null!==(c=U)&&void 0!==c?c:"",placeholder:null!==(f=V.placeholder)&&void 0!==f?f:""})));case s.INTEGER:case s.DECIMAL:case s.PERCENTAGE:return r(i,null,r("mrd-number-field",Object.assign({},A,{value:null!==(v=U)&&void 0!==v?v:null,dataType:V.dataType,decimalPrecision:null!==(b=V.decimalPrecision)&&void 0!==b?b:2,placeholder:null!==(h=V.placeholder)&&void 0!==h?h:""})));case s.CURRENCY:return r(i,null,r("mrd-currency-field",Object.assign({},A,{value:null!==(p=U)&&void 0!==p?p:{amount:null,currency:null!==(j=V.currencyCode)&&void 0!==j?j:"EUR"}})));case s.BOOLEAN:return r(i,null,r("mrd-boolean-field",Object.assign({},A,{value:null!==(k=U)&&void 0!==k&&k})));case s.DATE:return r(i,null,r("mrd-date-field",Object.assign({},A,{value:null!==(E=U)&&void 0!==E?E:""})));case s.DATETIME:return r(i,null,r("mrd-datetime-field",Object.assign({},A,{value:null!==(y=U)&&void 0!==y?y:""})));case s.TIME:return r(i,null,r("mrd-time-field",Object.assign({},A,{value:null!==(O=U)&&void 0!==O?O:""})));case s.EMAIL:return r(i,null,r("mrd-email-field",Object.assign({},A,{value:null!==(x=U)&&void 0!==x?x:"",placeholder:null!==(g=V.placeholder)&&void 0!==g?g:""})));case s.HYPERLINK:return r(i,null,r("mrd-hyperlink-field",Object.assign({},A,{value:null!==(M=U)&&void 0!==M?M:"",placeholder:null!==(C=V.placeholder)&&void 0!==C?C:""})));case s.LIST:return r(i,null,r("mrd-list-field",Object.assign({},A,{value:null!==(S=U)&&void 0!==S?S:"",multiple:null!==(w=V.multiple)&&void 0!==w&&w,listItems:null!==(B=V.listItems)&&void 0!==B?B:[]})));case s.FILE:return r(i,null,r("mrd-file-field",Object.assign({},A,{accept:null!==(q=V.accept)&&void 0!==q?q:"",maxSize:null!==(z=V.maxSize)&&void 0!==z?z:0})));case s.IMAGE:return r(i,null,r("mrd-image-field",Object.assign({},A,{accept:null!==(T=V.accept)&&void 0!==T?T:"image/*",maxSize:null!==(I=V.maxSize)&&void 0!==I?I:0})));default:return r(i,null)}}},[2,"mrd-field",{item:[16],locale:[1],value:[16]}]);function g(){"undefined"!=typeof customElements&&["mrd-field","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((e=>{switch(e){case"mrd-field":customElements.get(t(e))||customElements.define(t(e),x);break;case"mrd-boolean-field":customElements.get(t(e))||n();break;case"mrd-currency-field":customElements.get(t(e))||o();break;case"mrd-date-field":customElements.get(t(e))||u();break;case"mrd-datetime-field":customElements.get(t(e))||c();break;case"mrd-email-field":customElements.get(t(e))||f();break;case"mrd-file-field":customElements.get(t(e))||v();break;case"mrd-hyperlink-field":customElements.get(t(e))||b();break;case"mrd-image-field":customElements.get(t(e))||h();break;case"mrd-list-field":customElements.get(t(e))||p();break;case"mrd-number-field":customElements.get(t(e))||j();break;case"mrd-relation-field":customElements.get(t(e))||k();break;case"mrd-text-field":customElements.get(t(e))||E();break;case"mrd-textarea-field":customElements.get(t(e))||y();break;case"mrd-time-field":customElements.get(t(e))||O()}}))}export{x as M,g as d}

package/dist/components/mrd-form.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as m,h as d,Host as o,transformTag as t}from"@stencil/core/internal/client";import{C as i}from"./client-layout.js";import{t as s}from"./i18n.js";import{v as a}from"./validation.js";import{d as l}from"./mrd-boolean-field2.js";import{d as f}from"./mrd-currency-field2.js";import{d as n}from"./mrd-date-field2.js";import{d as c}from"./mrd-datetime-field2.js";import{d as u}from"./mrd-email-field2.js";import{d as h}from"./mrd-field2.js";import{d as p}from"./mrd-file-field2.js";import{d as v}from"./mrd-hyperlink-field2.js";import{d as b}from"./mrd-image-field2.js";import{d as _}from"./mrd-list-field2.js";import{d as g}from"./mrd-number-field2.js";import{d as y}from"./mrd-relation-field2.js";import{d as j}from"./mrd-text-field2.js";import{d as x}from"./mrd-textarea-field2.js";import{d as k}from"./mrd-time-field2.js";const E=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdSubmit=m(this,"mrdSubmit",7),this.mrdSearch=m(this,"mrdSearch",7),this.locale=navigator.language,this.values={},this.formValues={},this.errors={},this.submitted=!1,this.handleFieldChange=r=>{const{name:e,value:m}=r.detail;this.formValues=Object.assign(Object.assign({},this.formValues),{[e]:m}),this.errors[e]&&(this.errors=Object.assign(Object.assign({},this.errors),{[e]:""}))},this.handleSearch=r=>{this.mrdSearch.emit(r.detail)},this.handleSubmit=r=>{r.preventDefault(),this.submitted=!0,this.validate()&&this.mrdSubmit.emit(Object.assign({},this.formValues))}}componentWillLoad(){var r;this.formValues=Object.assign({},null!==(r=this.values)&&void 0!==r?r:{})}async setFieldValue(r,e){this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:e}),this.errors[r]&&(this.errors=Object.assign(Object.assign({},this.errors),{[r]:""}))}collectFields(r){const e=[];for(const m of r)m.type!==i.FIELD&&m.type!==i.RELATION||e.push(m),m.items&&e.push(...this.collectFields(m.items));return e}validate(){var r,e,m;const d={},o=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of o){const e=null!==(m=r.field)&&void 0!==m?m:r.relation;e&&e.required&&!a(this.formValues[e.name])&&(d[e.name]=s("required",this.locale))}return this.errors=d,0===Object.keys(d).length}renderItems(r){return r.map((r=>{var e,m,o,t;if(r.type===i.SECTION)return d("fieldset",{class:"mrd-form__section"},r.label&&d("legend",{class:"mrd-form__section-legend"},r.label),d("div",{class:"mrd-form__section-body"},r.items&&this.renderItems(r.items)));if(r.type===i.GROUP)return d("div",{class:"mrd-form__group"},r.label&&d("div",{class:"mrd-form__group-label"},r.label),d("div",{class:"mrd-form__group-body"},r.items&&this.renderItems(r.items)));const s=null!==(t=null!==(m=null===(e=r.field)||void 0===e?void 0:e.name)&&void 0!==m?m:null===(o=r.relation)||void 0===o?void 0:o.name)&&void 0!==t?t:"";return d("div",{class:"mrd-form__field"},d("mrd-field",{item:r,locale:this.locale,value:this.formValues[s],onMrdChange:this.handleFieldChange,onMrdBlur:this.handleFieldChange,onMrdSearch:this.handleSearch}),this.errors[s]&&d("span",{class:"mrd-form__field-error"},this.errors[s]))}))}render(){if(!this.layout)return d(o,null);const r=this.locale.startsWith("ar")?"rtl":"ltr";return d(o,null,d("form",{class:"mrd-form",dir:r,onSubmit:this.handleSubmit,noValidate:!0},this.layout.title&&d("h2",{class:"mrd-form__title"},this.layout.title),d("div",{class:"mrd-form__body"},this.renderItems(this.layout.items)),d("div",{class:"mrd-form__footer"},d("button",{type:"submit",class:"mrd-form__submit"},s("submit",this.locale)))))}static get style(){return".sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end}.mrd-form__submit.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:var(--mrd-color-primary);color:var(--mrd-color-white);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:none;border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition)}.mrd-form__submit.sc-mrd-form:hover{background-color:var(--mrd-color-primary-hover)}.mrd-form__submit.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__submit.sc-mrd-form:active{background-color:var(--mrd-color-primary-dark)}"}},[2,"mrd-form",{layout:[16],locale:[1],values:[16],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]}]),w=E,O=function(){"undefined"!=typeof customElements&&["mrd-form","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((r=>{switch(r){case"mrd-form":customElements.get(t(r))||customElements.define(t(r),E);break;case"mrd-boolean-field":customElements.get(t(r))||l();break;case"mrd-currency-field":customElements.get(t(r))||f();break;case"mrd-date-field":customElements.get(t(r))||n();break;case"mrd-datetime-field":customElements.get(t(r))||c();break;case"mrd-email-field":customElements.get(t(r))||u();break;case"mrd-field":customElements.get(t(r))||h();break;case"mrd-file-field":customElements.get(t(r))||p();break;case"mrd-hyperlink-field":customElements.get(t(r))||v();break;case"mrd-image-field":customElements.get(t(r))||b();break;case"mrd-list-field":customElements.get(t(r))||_();break;case"mrd-number-field":customElements.get(t(r))||g();break;case"mrd-relation-field":customElements.get(t(r))||y();break;case"mrd-text-field":customElements.get(t(r))||j();break;case"mrd-textarea-field":customElements.get(t(r))||x();break;case"mrd-time-field":customElements.get(t(r))||k()}}))};export{w as MrdForm,O as defineCustomElement}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as m,h as d,Host as o,transformTag as t}from"@stencil/core/internal/client";import{a as i}from"./client-layout.js";import{t as s}from"./i18n.js";import{v as a}from"./validation.js";import{d as l}from"./mrd-boolean-field2.js";import{d as f}from"./mrd-currency-field2.js";import{d as n}from"./mrd-date-field2.js";import{d as c}from"./mrd-datetime-field2.js";import{d as u}from"./mrd-email-field2.js";import{d as h}from"./mrd-field2.js";import{d as v}from"./mrd-file-field2.js";import{d as p}from"./mrd-hyperlink-field2.js";import{d as b}from"./mrd-image-field2.js";import{d as _}from"./mrd-list-field2.js";import{d as g}from"./mrd-number-field2.js";import{d as y}from"./mrd-relation-field2.js";import{d as j}from"./mrd-text-field2.js";import{d as x}from"./mrd-textarea-field2.js";import{d as k}from"./mrd-time-field2.js";const E=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdSubmit=m(this,"mrdSubmit",7),this.mrdSearch=m(this,"mrdSearch",7),this.locale=navigator.language,this.values={},this.formValues={},this.errors={},this.submitted=!1,this.handleFieldChange=r=>{const{name:e,value:m}=r.detail;this.formValues=Object.assign(Object.assign({},this.formValues),{[e]:m}),this.errors[e]&&(this.errors=Object.assign(Object.assign({},this.errors),{[e]:""}))},this.handleSearch=r=>{this.mrdSearch.emit(r.detail)},this.handleSubmit=r=>{r.preventDefault(),this.submitted=!0,this.validate()&&this.mrdSubmit.emit(Object.assign({},this.formValues))}}componentWillLoad(){var r;this.formValues=Object.assign({},null!==(r=this.values)&&void 0!==r?r:{})}valuesChanged(r){this.formValues=Object.assign({},null!=r?r:{}),this.errors={},this.submitted=!1}async setFieldValue(r,e){this.formValues=Object.assign(Object.assign({},this.formValues),{[r]:e}),this.errors[r]&&(this.errors=Object.assign(Object.assign({},this.errors),{[r]:""}))}collectFields(r){const e=[];for(const m of r)m.type!==i.FIELD&&m.type!==i.RELATION||e.push(m),m.items&&e.push(...this.collectFields(m.items));return e}validate(){var r,e,m;const d={},o=this.collectFields(null!==(e=null===(r=this.layout)||void 0===r?void 0:r.items)&&void 0!==e?e:[]);for(const r of o){const e=null!==(m=r.field)&&void 0!==m?m:r.relation;e&&e.required&&!a(this.formValues[e.name])&&(d[e.name]=s("required",this.locale))}return this.errors=d,0===Object.keys(d).length}renderItems(r){return r.map((r=>{var e,m,o,t;if(r.type===i.SECTION)return d("fieldset",{class:"mrd-form__section"},r.label&&d("legend",{class:"mrd-form__section-legend"},r.label),d("div",{class:"mrd-form__section-body"},r.items&&this.renderItems(r.items)));if(r.type===i.GROUP)return d("div",{class:"mrd-form__group"},r.label&&d("div",{class:"mrd-form__group-label"},r.label),d("div",{class:"mrd-form__group-body"},r.items&&this.renderItems(r.items)));const s=null!==(t=null!==(m=null===(e=r.field)||void 0===e?void 0:e.name)&&void 0!==m?m:null===(o=r.relation)||void 0===o?void 0:o.name)&&void 0!==t?t:"";return d("div",{class:"mrd-form__field"},d("mrd-field",{item:r,locale:this.locale,value:this.formValues[s],onMrdChange:this.handleFieldChange,onMrdBlur:this.handleFieldChange,onMrdSearch:this.handleSearch}),this.errors[s]&&d("span",{class:"mrd-form__field-error"},this.errors[s]))}))}render(){if(!this.layout)return d(o,null);const r=this.locale.startsWith("ar")?"rtl":"ltr";return d(o,null,d("form",{class:"mrd-form",dir:r,onSubmit:this.handleSubmit,noValidate:!0},this.layout.title&&d("h2",{class:"mrd-form__title"},this.layout.title),d("div",{class:"mrd-form__body"},this.renderItems(this.layout.items)),d("div",{class:"mrd-form__footer"},d("button",{type:"submit",class:"mrd-form__submit"},s("submit",this.locale)))))}static get watchers(){return{values:[{valuesChanged:0}]}}static get style(){return".sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end}.mrd-form__submit.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:var(--mrd-color-primary);color:var(--mrd-color-white);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:none;border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition)}.mrd-form__submit.sc-mrd-form:hover{background-color:var(--mrd-color-primary-hover)}.mrd-form__submit.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__submit.sc-mrd-form:active{background-color:var(--mrd-color-primary-dark)}"}},[2,"mrd-form",{layout:[16],locale:[1],values:[16],formValues:[32],errors:[32],submitted:[32],setFieldValue:[64]},void 0,{values:[{valuesChanged:0}]}]),w=E,O=function(){"undefined"!=typeof customElements&&["mrd-form","mrd-boolean-field","mrd-currency-field","mrd-date-field","mrd-datetime-field","mrd-email-field","mrd-field","mrd-file-field","mrd-hyperlink-field","mrd-image-field","mrd-list-field","mrd-number-field","mrd-relation-field","mrd-text-field","mrd-textarea-field","mrd-time-field"].forEach((r=>{switch(r){case"mrd-form":customElements.get(t(r))||customElements.define(t(r),E);break;case"mrd-boolean-field":customElements.get(t(r))||l();break;case"mrd-currency-field":customElements.get(t(r))||f();break;case"mrd-date-field":customElements.get(t(r))||n();break;case"mrd-datetime-field":customElements.get(t(r))||c();break;case"mrd-email-field":customElements.get(t(r))||u();break;case"mrd-field":customElements.get(t(r))||h();break;case"mrd-file-field":customElements.get(t(r))||v();break;case"mrd-hyperlink-field":customElements.get(t(r))||p();break;case"mrd-image-field":customElements.get(t(r))||b();break;case"mrd-list-field":customElements.get(t(r))||_();break;case"mrd-number-field":customElements.get(t(r))||g();break;case"mrd-relation-field":customElements.get(t(r))||y();break;case"mrd-text-field":customElements.get(t(r))||j();break;case"mrd-textarea-field":customElements.get(t(r))||x();break;case"mrd-time-field":customElements.get(t(r))||k()}}))};export{w as MrdForm,O as defineCustomElement}

package/dist/components/mrd-list-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as i,createEvent as e,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{t as d}from"./i18n.js";import{v as o}from"./validation.js";const a=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=e(this,"mrdChange",7),this.mrdBlur=e(this,"mrdBlur",7),this.name="",this.label="",this.value="",this.required=!1,this.disabled=!1,this.multiple=!1,this.locale=navigator.language,this.listValues=[],this.error="",this.selected=[],this.handleSelectChange=r=>{const i=r.target;if(this.multiple){const r=Array.from(i.selectedOptions).map((r=>r.value));this.selected=r,this.error=this.required&&!o(r)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:r})}else{const r=i.value;this.error=this.required&&!o(r)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:r})}},this.handleBlur=()=>{this.mrdBlur.emit({name:this.name,value:this.multiple?this.selected:this.value})},this.toggleCheckbox=r=>{this.selected=this.selected.includes(r)?this.selected.filter((i=>i!==r)):[...this.selected,r],this.error=this.required&&!o(this.selected)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:this.selected})}}componentWillLoad(){this.multiple&&(this.selected=Array.isArray(this.value)?this.value:this.value?[this.value]:[])}getContrastColor(r){if(!r)return"#000000";const i=r.replace("#","");return(.299*parseInt(i.substr(0,2),16)+.587*parseInt(i.substr(2,2),16)+.114*parseInt(i.substr(4,2),16))/255>.5?"#000000":"#ffffff"}render(){var r,i;const e=!!this.error,l=Array.isArray(this.value)?null!==(r=this.value[0])&&void 0!==r?r:"":null!==(i=this.value)&&void 0!==i?i:"";return t(s,null,t("div",{class:"mrd-list-field"},this.label&&t("label",{class:"mrd-list-field__label"+(this.required?" mrd-list-field__label--required":"")},this.label),this.multiple?t("div",{class:"mrd-list-field__checkbox-list"+(e?" mrd-list-field__checkbox-list--error":"")},this.listValues.map((r=>t("label",{key:r.value,class:"mrd-list-field__checkbox-item"},t("input",{type:"checkbox",checked:this.selected.includes(r.value),disabled:this.disabled,onChange:()=>this.toggleCheckbox(r.value)}),r.color&&t("span",{class:"mrd-list-field__color-dot",style:{backgroundColor:r.color}}),t("span",null,r.label))))):t("select",{class:"mrd-list-field__select"+(e?" mrd-list-field__select--error":""),name:this.name,required:this.required,disabled:this.disabled,onChange:this.handleSelectChange,onBlur:this.handleBlur},t("option",{value:""},d("select_placeholder",this.locale)),this.listValues.map((r=>{const i=r.color?{backgroundColor:r.color,color:this.getContrastColor(r.color)}:{};return t("option",{key:r.value,value:r.value,selected:r.value===l,style:i},r.label)}))),e&&t("span",{class:"mrd-list-field__error"},this.error)))}static get style(){return".sc-mrd-list-field-h{display:block}.mrd-list-field.sc-mrd-list-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-list-field__label.sc-mrd-list-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-list-field__label--required.sc-mrd-list-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-list-field__select.sc-mrd-list-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);padding-right:calc(var(--mrd-input-padding-x) + 1.5rem);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right var(--mrd-space-3) center;border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-list-field__select.sc-mrd-list-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-list-field__select.sc-mrd-list-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-list-field__select--error.sc-mrd-list-field{border-color:var(--mrd-border-color-error)}.mrd-list-field__select--error.sc-mrd-list-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-list-field__checkbox-list.sc-mrd-list-field{display:flex;flex-direction:column;gap:var(--mrd-space-2);padding:var(--mrd-space-3);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);background-color:var(--mrd-input-bg)}.mrd-list-field__checkbox-list--error.sc-mrd-list-field{border-color:var(--mrd-border-color-error)}.mrd-list-field__checkbox-item.sc-mrd-list-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);cursor:pointer}.mrd-list-field__checkbox-item.sc-mrd-list-field input[type='checkbox'].sc-mrd-list-field{width:1rem;height:1rem;cursor:pointer;accent-color:var(--mrd-color-primary)}.mrd-list-field__color-dot.sc-mrd-list-field{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0}.mrd-list-field__error.sc-mrd-list-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-list-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],multiple:[4],locale:[1],listValues:[16],error:[32],selected:[32]}]);function c(){"undefined"!=typeof customElements&&["mrd-list-field"].forEach((r=>{"mrd-list-field"===r&&(customElements.get(l(r))||customElements.define(l(r),a))}))}export{a as M,c as d}
+import{proxyCustomElement as r,HTMLElement as i,createEvent as e,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{t as d}from"./i18n.js";import{v as o}from"./validation.js";const a=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=e(this,"mrdChange",7),this.mrdBlur=e(this,"mrdBlur",7),this.name="",this.label="",this.value="",this.required=!1,this.disabled=!1,this.multiple=!1,this.locale=navigator.language,this.listItems=[],this.error="",this.selected=[],this.handleSelectChange=r=>{const i=r.target;if(this.multiple){const r=Array.from(i.selectedOptions).map((r=>r.value));this.selected=r,this.error=this.required&&!o(r)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:r})}else{const r=i.value;this.error=this.required&&!o(r)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:r})}},this.handleBlur=()=>{this.mrdBlur.emit({name:this.name,value:this.multiple?this.selected:this.value})},this.toggleCheckbox=r=>{this.selected=this.selected.includes(r)?this.selected.filter((i=>i!==r)):[...this.selected,r],this.error=this.required&&!o(this.selected)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:this.selected})}}componentWillLoad(){this.multiple&&(this.selected=Array.isArray(this.value)?this.value:this.value?[this.value]:[])}getContrastColor(r){if(!r)return"#000000";const i=r.replace("#","");return(.299*parseInt(i.substr(0,2),16)+.587*parseInt(i.substr(2,2),16)+.114*parseInt(i.substr(4,2),16))/255>.5?"#000000":"#ffffff"}render(){var r,i;const e=!!this.error,l=Array.isArray(this.value)?null!==(r=this.value[0])&&void 0!==r?r:"":null!==(i=this.value)&&void 0!==i?i:"";return t(s,null,t("div",{class:"mrd-list-field"},this.label&&t("label",{class:"mrd-list-field__label"+(this.required?" mrd-list-field__label--required":"")},this.label),this.multiple?t("div",{class:"mrd-list-field__checkbox-list"+(e?" mrd-list-field__checkbox-list--error":"")},this.listItems.map((r=>{var i,e;return t("label",{key:r.key,class:"mrd-list-field__checkbox-item"},t("input",{type:"checkbox",checked:this.selected.includes(r.key),disabled:this.disabled,onChange:()=>this.toggleCheckbox(r.key)}),(r.color||r.backgroundColor)&&t("span",{class:"mrd-list-field__color-dot",style:{backgroundColor:null!==(e=null!==(i=r.backgroundColor)&&void 0!==i?i:r.color)&&void 0!==e?e:""}}),t("span",null,r.label))}))):t("select",{class:"mrd-list-field__select"+(e?" mrd-list-field__select--error":""),name:this.name,required:this.required,disabled:this.disabled,onChange:this.handleSelectChange,onBlur:this.handleBlur},t("option",{value:""},d("select_placeholder",this.locale)),this.listItems.map((r=>{var i,e;const s=null!==(e=null!==(i=r.backgroundColor)&&void 0!==i?i:r.color)&&void 0!==e?e:null,d=s?{backgroundColor:s,color:this.getContrastColor(s)}:{};return t("option",{key:r.key,value:r.key,selected:r.key===l,style:d},r.label)}))),e&&t("span",{class:"mrd-list-field__error"},this.error)))}static get style(){return".sc-mrd-list-field-h{display:block}.mrd-list-field.sc-mrd-list-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-list-field__label.sc-mrd-list-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-list-field__label--required.sc-mrd-list-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-list-field__select.sc-mrd-list-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);padding-right:calc(var(--mrd-input-padding-x) + 1.5rem);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right var(--mrd-space-3) center;border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-list-field__select.sc-mrd-list-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-list-field__select.sc-mrd-list-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-list-field__select--error.sc-mrd-list-field{border-color:var(--mrd-border-color-error)}.mrd-list-field__select--error.sc-mrd-list-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-list-field__checkbox-list.sc-mrd-list-field{display:flex;flex-direction:column;gap:var(--mrd-space-2);padding:var(--mrd-space-3);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);background-color:var(--mrd-input-bg)}.mrd-list-field__checkbox-list--error.sc-mrd-list-field{border-color:var(--mrd-border-color-error)}.mrd-list-field__checkbox-item.sc-mrd-list-field{display:flex;align-items:center;gap:var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);cursor:pointer}.mrd-list-field__checkbox-item.sc-mrd-list-field input[type='checkbox'].sc-mrd-list-field{width:1rem;height:1rem;cursor:pointer;accent-color:var(--mrd-color-primary)}.mrd-list-field__color-dot.sc-mrd-list-field{display:inline-block;width:12px;height:12px;border-radius:50%;flex-shrink:0}.mrd-list-field__error.sc-mrd-list-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-list-field",{name:[1],label:[1],value:[1],required:[4],disabled:[4],multiple:[4],locale:[1],listItems:[16],error:[32],selected:[32]}]);function c(){"undefined"!=typeof customElements&&["mrd-list-field"].forEach((r=>{"mrd-list-field"===r&&(customElements.get(l(r))||customElements.define(l(r),a))}))}export{a as M,c as d}

package/dist/components/mrd-number-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as i,createEvent as e,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{t as o}from"./i18n.js";import{c as a,v as l}from"./validation.js";import{p as n,f as m}from"./format.js";import{a as c}from"./client-layout.js";const u=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=e(this,"mrdChange",7),this.mrdBlur=e(this,"mrdBlur",7),this.name="",this.label="",this.value=null,this.placeholder="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.dataType=c.INTEGER,this.decimalPrecision=2,this.displayValue="",this.error="",this.handleInput=r=>{this.displayValue=r.target.value},this.handleBlur=r=>{const i=r.target.value,e=n(i,this.locale);this.error=!this.required||null!==e&&""!==i?""===i||a(e,this.dataType)?"":o("invalid_number",this.locale):o("required",this.locale),null!==e&&l(i)&&(this.displayValue=this.formatForDisplay(e)),this.mrdChange.emit({name:this.name,value:e}),this.mrdBlur.emit({name:this.name,value:e})},this.handleFocus=()=>{if(null!=this.value){const r=String(this.value);this.displayValue=r}}}componentWillLoad(){null!=this.value&&(this.displayValue=this.formatForDisplay(this.value))}formatForDisplay(r){return this.dataType===c.PERCENTAGE?m(r,this.locale,{minimumFractionDigits:0,maximumFractionDigits:this.decimalPrecision})+"%":m(r,this.locale,this.dataType===c.DECIMAL?{minimumFractionDigits:this.decimalPrecision,maximumFractionDigits:this.decimalPrecision}:{maximumFractionDigits:0})}render(){const r=!!this.error,i=this.dataType===c.PERCENTAGE?"%":"";return d(t,{key:"68d81012d9180dde4160a507121b83f04698834a"},d("div",{key:"b8e46f6d23527b2c95ad2738fc63a07adfce4fda",class:"mrd-number-field"},this.label&&d("label",{key:"c3271c7a8adfd8bcb3b4f51e580239f928a354a5",class:"mrd-number-field__label"+(this.required?" mrd-number-field__label--required":"")},this.label),d("div",{key:"c46b69affd1e22c539511f6743b6d23fe73fb079",class:"mrd-number-field__input-wrapper"},d("input",{key:"e68188829c2e03c947c5605332a2681de550a0d5",class:"mrd-number-field__input"+(r?" mrd-number-field__input--error":""),type:"text",inputMode:"decimal",name:this.name,value:this.displayValue,placeholder:this.placeholder||(i?`0${i}`:"0"),required:this.required,disabled:this.disabled,onInput:this.handleInput,onBlur:this.handleBlur,onFocus:this.handleFocus})),r&&d("span",{key:"bdc2723e2547517765bd64ad70c5103c7a2b363c",class:"mrd-number-field__error"},this.error)))}static get style(){return".sc-mrd-number-field-h{display:block}.mrd-number-field.sc-mrd-number-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-number-field__label.sc-mrd-number-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-number-field__label--required.sc-mrd-number-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-number-field__input-wrapper.sc-mrd-number-field{position:relative;display:flex;align-items:center}.mrd-number-field__input.sc-mrd-number-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;text-align:right}.mrd-number-field__input.sc-mrd-number-field::placeholder{color:var(--mrd-input-placeholder-color);text-align:left}.mrd-number-field__input.sc-mrd-number-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-number-field__input.sc-mrd-number-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-number-field__input--error.sc-mrd-number-field{border-color:var(--mrd-border-color-error)}.mrd-number-field__input--error.sc-mrd-number-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-number-field__error.sc-mrd-number-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-number-field",{name:[1],label:[1],value:[2],placeholder:[1],required:[4],disabled:[4],locale:[1],dataType:[1,"data-type"],decimalPrecision:[2,"decimal-precision"],displayValue:[32],error:[32]}]);function f(){"undefined"!=typeof customElements&&["mrd-number-field"].forEach((r=>{"mrd-number-field"===r&&(customElements.get(s(r))||customElements.define(s(r),u))}))}export{u as M,f as d}
+import{proxyCustomElement as r,HTMLElement as i,createEvent as e,h as d,Host as t,transformTag as s}from"@stencil/core/internal/client";import{t as o}from"./i18n.js";import{c as a,v as l}from"./validation.js";import{p as n,f as m}from"./format.js";import{b as c}from"./client-layout.js";const u=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=e(this,"mrdChange",7),this.mrdBlur=e(this,"mrdBlur",7),this.name="",this.label="",this.value=null,this.placeholder="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.dataType=c.INTEGER,this.decimalPrecision=2,this.displayValue="",this.error="",this.handleInput=r=>{this.displayValue=r.target.value},this.handleBlur=r=>{const i=r.target.value,e=n(i,this.locale);this.error=!this.required||null!==e&&""!==i?""===i||a(e,this.dataType)?"":o("invalid_number",this.locale):o("required",this.locale),null!==e&&l(i)&&(this.displayValue=this.formatForDisplay(e)),this.mrdChange.emit({name:this.name,value:e}),this.mrdBlur.emit({name:this.name,value:e})},this.handleFocus=()=>{if(null!=this.value){const r=String(this.value);this.displayValue=r}}}componentWillLoad(){null!=this.value&&(this.displayValue=this.formatForDisplay(this.value))}formatForDisplay(r){return this.dataType===c.PERCENTAGE?m(r,this.locale,{minimumFractionDigits:0,maximumFractionDigits:this.decimalPrecision})+"%":m(r,this.locale,this.dataType===c.DECIMAL?{minimumFractionDigits:this.decimalPrecision,maximumFractionDigits:this.decimalPrecision}:{maximumFractionDigits:0})}render(){const r=!!this.error,i=this.dataType===c.PERCENTAGE?"%":"";return d(t,{key:"68d81012d9180dde4160a507121b83f04698834a"},d("div",{key:"b8e46f6d23527b2c95ad2738fc63a07adfce4fda",class:"mrd-number-field"},this.label&&d("label",{key:"c3271c7a8adfd8bcb3b4f51e580239f928a354a5",class:"mrd-number-field__label"+(this.required?" mrd-number-field__label--required":"")},this.label),d("div",{key:"c46b69affd1e22c539511f6743b6d23fe73fb079",class:"mrd-number-field__input-wrapper"},d("input",{key:"e68188829c2e03c947c5605332a2681de550a0d5",class:"mrd-number-field__input"+(r?" mrd-number-field__input--error":""),type:"text",inputMode:"decimal",name:this.name,value:this.displayValue,placeholder:this.placeholder||(i?`0${i}`:"0"),required:this.required,disabled:this.disabled,onInput:this.handleInput,onBlur:this.handleBlur,onFocus:this.handleFocus})),r&&d("span",{key:"bdc2723e2547517765bd64ad70c5103c7a2b363c",class:"mrd-number-field__error"},this.error)))}static get style(){return".sc-mrd-number-field-h{display:block}.mrd-number-field.sc-mrd-number-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-number-field__label.sc-mrd-number-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-number-field__label--required.sc-mrd-number-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-number-field__input-wrapper.sc-mrd-number-field{position:relative;display:flex;align-items:center}.mrd-number-field__input.sc-mrd-number-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;text-align:right}.mrd-number-field__input.sc-mrd-number-field::placeholder{color:var(--mrd-input-placeholder-color);text-align:left}.mrd-number-field__input.sc-mrd-number-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-number-field__input.sc-mrd-number-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-number-field__input--error.sc-mrd-number-field{border-color:var(--mrd-border-color-error)}.mrd-number-field__input--error.sc-mrd-number-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-number-field__error.sc-mrd-number-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-number-field",{name:[1],label:[1],value:[2],placeholder:[1],required:[4],disabled:[4],locale:[1],dataType:[1,"data-type"],decimalPrecision:[2,"decimal-precision"],displayValue:[32],error:[32]}]);function f(){"undefined"!=typeof customElements&&["mrd-number-field"].forEach((r=>{"mrd-number-field"===r&&(customElements.get(s(r))||customElements.define(s(r),u))}))}export{u as M,f as d}

package/dist/components/mrd-relation-field2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as t,Host as o,transformTag as l}from"@stencil/core/internal/client";import{t as d}from"./i18n.js";import{v as a}from"./validation.js";import{b as s}from"./client-layout.js";const n=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.mrdSearch=i(this,"mrdSearch",7),this.name="",this.label="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.relatedClass="",this.displayType=s.SEARCH,this.multiple=!1,this.dropdownValues=[],this.value=null,this.searchQuery="",this.searchResults=[],this.isLoading=!1,this.selectedItems=[],this.showResults=!1,this.error="",this.highlightedIndex=-1,this.searchDebounce=null,this.handleKeyDown=r=>{this.showResults&&0!==this.searchResults.length?"ArrowDown"===r.key?(r.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.searchResults.length-1)):"ArrowUp"===r.key?(r.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0)):"Enter"===r.key?(r.preventDefault(),this.highlightedIndex>=0&&this.handleResultSelect(this.searchResults[this.highlightedIndex])):"Escape"===r.key&&(this.showResults=!1,this.highlightedIndex=-1):"Escape"===r.key&&(this.showResults=!1,this.highlightedIndex=-1)},this.clearSelection=()=>{this.selectedItems=[],this.searchQuery="",this.searchResults=[],this.showResults=!1,this.highlightedIndex=-1,this.mrdChange.emit({name:this.name,value:this.multiple?[]:null})},this.handleSearchInput=r=>{const e=r.target.value;this.searchQuery=e,this.searchDebounce&&clearTimeout(this.searchDebounce),e.trim().length>=2?(this.isLoading=!0,this.showResults=!0,this.searchDebounce=setTimeout((()=>{this.mrdSearch.emit({query:e,relatedClass:this.relatedClass})}),300)):(this.searchResults=[],this.showResults=!1,this.isLoading=!1)},this.handleResultSelect=r=>{if(this.multiple){this.selectedItems.find((e=>e.id===r.id))||(this.selectedItems=[...this.selectedItems,r]),this.searchQuery="",this.searchResults=[],this.showResults=!1;const e=this.selectedItems.map((r=>r.id));this.mrdChange.emit({name:this.name,value:e})}else this.selectedItems=[r],this.searchQuery=r.label,this.showResults=!1,this.mrdChange.emit({name:this.name,value:r.id});this.error=this.required&&!a(this.selectedItems)?d("required",this.locale):""},this.handleRemoveSelected=r=>{this.selectedItems=this.selectedItems.filter((e=>e.id!==r));const e=this.selectedItems.map((r=>r.id));this.mrdChange.emit({name:this.name,value:this.multiple?e:null})},this.handleDropdownChange=r=>{const e=r.target.value;this.error=this.required&&!a(e)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:e})},this.handleBlur=()=>{var r,e;setTimeout((()=>{this.showResults=!1,this.highlightedIndex=-1}),200);const i=this.multiple?this.selectedItems.map((r=>r.id)):null!==(e=null===(r=this.selectedItems[0])||void 0===r?void 0:r.id)&&void 0!==e?e:null;this.mrdBlur.emit({name:this.name,value:i})}}async setSearchResults(r){this.searchResults=r,this.isLoading=!1,this.showResults=!0,this.highlightedIndex=-1}async setLoading(r){this.isLoading=r}render(){var r,e;const i=!!this.error;if(this.displayType===s.DROPDOWN){const l=Array.isArray(this.value)?null!==(r=this.value[0])&&void 0!==r?r:"":null!==(e=this.value)&&void 0!==e?e:"";return t(o,null,t("div",{class:"mrd-relation-field"},this.label&&t("label",{class:"mrd-relation-field__label"+(this.required?" mrd-relation-field__label--required":"")},this.label),t("select",{class:"mrd-relation-field__select"+(i?" mrd-relation-field__select--error":""),name:this.name,required:this.required,disabled:this.disabled,onChange:this.handleDropdownChange},t("option",{value:""},d("select_placeholder",this.locale)),this.dropdownValues.map((r=>t("option",{key:r.value,value:r.value,selected:r.value===l},r.label)))),i&&t("span",{class:"mrd-relation-field__error"},this.error)))}const l=this.label&&t("label",{class:"mrd-relation-field__label"+(this.required?" mrd-relation-field__label--required":"")},this.label);return t(o,null,!this.multiple&&this.selectedItems.length>0?t("div",{class:"mrd-relation-field"},l,t("div",{class:"mrd-relation-field__selected-value"+(i?" mrd-relation-field__selected-value--error":"")},t("span",{class:"mrd-relation-field__selected-name"},this.selectedItems[0].label),t("button",{type:"button",class:"mrd-relation-field__selected-clear",onClick:this.clearSelection,"aria-label":d("remove",this.locale)},"✕")),i&&t("span",{class:"mrd-relation-field__error"},this.error)):t("div",{class:"mrd-relation-field"},l,this.multiple&&this.selectedItems.length>0&&t("div",{class:"mrd-relation-field__tags"},this.selectedItems.map((r=>t("span",{key:r.id,class:"mrd-relation-field__tag"},r.label,t("button",{type:"button",class:"mrd-relation-field__tag-remove",onClick:()=>this.handleRemoveSelected(r.id),"aria-label":d("remove",this.locale)},"✕"))))),t("div",{class:"mrd-relation-field__search-wrapper"},t("input",{class:"mrd-relation-field__search"+(i?" mrd-relation-field__search--error":""),type:"text",value:this.searchQuery,placeholder:d("search_placeholder",this.locale),disabled:this.disabled,onInput:this.handleSearchInput,onKeyDown:this.handleKeyDown,onBlur:this.handleBlur}),this.isLoading&&t("span",{class:"mrd-relation-field__spinner","aria-label":d("loading",this.locale)})),this.showResults&&t("div",{class:"mrd-relation-field__results"},0!==this.searchResults.length||this.isLoading?this.searchResults.map(((r,e)=>t("div",{key:r.id,class:"mrd-relation-field__result-item"+(e===this.highlightedIndex?" mrd-relation-field__result-item--highlighted":""),onMouseDown:()=>this.handleResultSelect(r)},t("span",{class:"mrd-relation-field__result-label"},r.label),r.description&&t("span",{class:"mrd-relation-field__result-desc"},r.description)))):t("div",{class:"mrd-relation-field__no-results"},d("no_results",this.locale))),i&&t("span",{class:"mrd-relation-field__error"},this.error)))}static get style(){return".sc-mrd-relation-field-h{display:block}.mrd-relation-field.sc-mrd-relation-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%;position:relative}.mrd-relation-field__label.sc-mrd-relation-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-relation-field__label--required.sc-mrd-relation-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-relation-field__select.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);padding-right:calc(var(--mrd-input-padding-x) + 1.5rem);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right var(--mrd-space-3) center;border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-relation-field__select.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__select.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__select--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__select--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__tags.sc-mrd-relation-field{display:flex;flex-wrap:wrap;gap:var(--mrd-space-1);margin-bottom:var(--mrd-space-1)}.mrd-relation-field__tag.sc-mrd-relation-field{display:inline-flex;align-items:center;gap:var(--mrd-space-1);padding:var(--mrd-space-1) var(--mrd-space-2);background-color:var(--mrd-color-primary-light);color:var(--mrd-color-primary-dark);border-radius:var(--mrd-border-radius-full);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__tag-remove.sc-mrd-relation-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-xs);padding:0;line-height:1;opacity:0.7}.mrd-relation-field__tag-remove.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__search-wrapper.sc-mrd-relation-field{position:relative;display:flex;align-items:center}.mrd-relation-field__search.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-relation-field__search.sc-mrd-relation-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-relation-field__search.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__search.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__search--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__search--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__spinner.sc-mrd-relation-field{position:absolute;right:var(--mrd-space-3);width:16px;height:16px;border:2px solid var(--mrd-color-neutral-200);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-spin 0.7s linear infinite}@keyframes mrd-spin{to{transform:rotate(360deg)}}.mrd-relation-field__results.sc-mrd-relation-field{position:absolute;top:calc(100% + var(--mrd-space-1));left:0;right:0;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md);z-index:var(--mrd-z-dropdown);max-height:240px;overflow-y:auto}.mrd-relation-field__result-item.sc-mrd-relation-field{display:flex;flex-direction:column;padding:var(--mrd-space-2) var(--mrd-space-3);cursor:pointer;transition:background-color var(--mrd-transition-fast)}.mrd-relation-field__result-item.sc-mrd-relation-field:hover{background-color:var(--mrd-color-neutral-50)}.mrd-relation-field__result-item.sc-mrd-relation-field:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-relation-field__result-label.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__result-desc.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-relation-field__result-item--highlighted.sc-mrd-relation-field{background-color:var(--mrd-color-primary-light)}.mrd-relation-field__selected-value.sc-mrd-relation-field{display:flex;align-items:center;gap:var(--mrd-space-2);height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-color-primary-light);border:var(--mrd-border-width) solid var(--mrd-color-primary);border-radius:var(--mrd-border-radius);box-sizing:border-box}.mrd-relation-field__selected-value--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error);background-color:var(--mrd-color-danger-light)}.mrd-relation-field__selected-name.sc-mrd-relation-field{flex:1;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-primary-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-relation-field__selected-clear.sc-mrd-relation-field{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-sm);padding:0;line-height:1;opacity:0.6;transition:opacity var(--mrd-transition-fast)}.mrd-relation-field__selected-clear.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__no-results.sc-mrd-relation-field{padding:var(--mrd-space-4);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-relation-field__error.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-relation-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],relatedClass:[1,"related-class"],displayType:[1,"display-type"],multiple:[4],dropdownValues:[16],value:[1],searchQuery:[32],searchResults:[32],isLoading:[32],selectedItems:[32],showResults:[32],error:[32],highlightedIndex:[32],setSearchResults:[64],setLoading:[64]}]);function m(){"undefined"!=typeof customElements&&["mrd-relation-field"].forEach((r=>{"mrd-relation-field"===r&&(customElements.get(l(r))||customElements.define(l(r),n))}))}export{n as M,m as d}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as t,Host as o,transformTag as l}from"@stencil/core/internal/client";import{t as d}from"./i18n.js";import{v as a}from"./validation.js";import{c as s}from"./client-layout.js";const n=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.mrdSearch=i(this,"mrdSearch",7),this.name="",this.label="",this.required=!1,this.disabled=!1,this.locale=navigator.language,this.relatedClass="",this.displayType=s.SEARCH,this.multiple=!1,this.dropdownValues=[],this.value=null,this.searchQuery="",this.searchResults=[],this.isLoading=!1,this.selectedItems=[],this.showResults=!1,this.error="",this.highlightedIndex=-1,this.searchDebounce=null,this.handleKeyDown=r=>{this.showResults&&0!==this.searchResults.length?"ArrowDown"===r.key?(r.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.searchResults.length-1)):"ArrowUp"===r.key?(r.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0)):"Enter"===r.key?(r.preventDefault(),this.highlightedIndex>=0&&this.handleResultSelect(this.searchResults[this.highlightedIndex])):"Escape"===r.key&&(this.showResults=!1,this.highlightedIndex=-1):"Escape"===r.key&&(this.showResults=!1,this.highlightedIndex=-1)},this.clearSelection=()=>{this.selectedItems=[],this.searchQuery="",this.searchResults=[],this.showResults=!1,this.highlightedIndex=-1,this.mrdChange.emit({name:this.name,value:this.multiple?[]:null})},this.handleSearchInput=r=>{const e=r.target.value;this.searchQuery=e,this.searchDebounce&&clearTimeout(this.searchDebounce),e.trim().length>=2?(this.isLoading=!0,this.showResults=!0,this.searchDebounce=setTimeout((()=>{this.mrdSearch.emit({query:e,relatedClass:this.relatedClass})}),300)):(this.searchResults=[],this.showResults=!1,this.isLoading=!1)},this.handleResultSelect=r=>{if(this.multiple){this.selectedItems.find((e=>e.id===r.id))||(this.selectedItems=[...this.selectedItems,r]),this.searchQuery="",this.searchResults=[],this.showResults=!1;const e=this.selectedItems.map((r=>r.id));this.mrdChange.emit({name:this.name,value:e})}else this.selectedItems=[r],this.searchQuery=r.label,this.showResults=!1,this.mrdChange.emit({name:this.name,value:r.id});this.error=this.required&&!a(this.selectedItems)?d("required",this.locale):""},this.handleRemoveSelected=r=>{this.selectedItems=this.selectedItems.filter((e=>e.id!==r));const e=this.selectedItems.map((r=>r.id));this.mrdChange.emit({name:this.name,value:this.multiple?e:null})},this.handleDropdownChange=r=>{const e=r.target.value;this.error=this.required&&!a(e)?d("required",this.locale):"",this.mrdChange.emit({name:this.name,value:e})},this.handleBlur=()=>{var r,e;setTimeout((()=>{this.showResults=!1,this.highlightedIndex=-1}),200);const i=this.multiple?this.selectedItems.map((r=>r.id)):null!==(e=null===(r=this.selectedItems[0])||void 0===r?void 0:r.id)&&void 0!==e?e:null;this.mrdBlur.emit({name:this.name,value:i})}}async setSearchResults(r){this.searchResults=r,this.isLoading=!1,this.showResults=!0,this.highlightedIndex=-1}async setLoading(r){this.isLoading=r}componentWillLoad(){var r;this.value&&(Array.isArray(this.value)?this.value.length>0&&"object"==typeof this.value[0]&&(this.selectedItems=this.value,this.searchQuery=""):"object"==typeof this.value&&(this.selectedItems=[this.value],this.searchQuery=null!==(r=this.value.label)&&void 0!==r?r:""))}render(){var r,e;const i=!!this.error;if(this.displayType===s.DROPDOWN){const l=Array.isArray(this.value)?null!==(r=this.value[0])&&void 0!==r?r:"":null!==(e=this.value)&&void 0!==e?e:"";return t(o,null,t("div",{class:"mrd-relation-field"},this.label&&t("label",{class:"mrd-relation-field__label"+(this.required?" mrd-relation-field__label--required":"")},this.label),t("select",{class:"mrd-relation-field__select"+(i?" mrd-relation-field__select--error":""),name:this.name,required:this.required,disabled:this.disabled,onChange:this.handleDropdownChange},t("option",{value:""},d("select_placeholder",this.locale)),this.dropdownValues.map((r=>t("option",{key:r.key,value:r.key,selected:r.key===l},r.label)))),i&&t("span",{class:"mrd-relation-field__error"},this.error)))}const l=this.label&&t("label",{class:"mrd-relation-field__label"+(this.required?" mrd-relation-field__label--required":"")},this.label);return t(o,null,!this.multiple&&this.selectedItems.length>0?t("div",{class:"mrd-relation-field"},l,t("div",{class:"mrd-relation-field__selected-value"+(i?" mrd-relation-field__selected-value--error":"")},t("span",{class:"mrd-relation-field__selected-name"},this.selectedItems[0].label),t("button",{type:"button",class:"mrd-relation-field__selected-clear",onClick:this.clearSelection,"aria-label":d("remove",this.locale)},"✕")),i&&t("span",{class:"mrd-relation-field__error"},this.error)):t("div",{class:"mrd-relation-field"},l,this.multiple&&this.selectedItems.length>0&&t("div",{class:"mrd-relation-field__tags"},this.selectedItems.map((r=>t("span",{key:r.id,class:"mrd-relation-field__tag"},r.label,t("button",{type:"button",class:"mrd-relation-field__tag-remove",onClick:()=>this.handleRemoveSelected(r.id),"aria-label":d("remove",this.locale)},"✕"))))),t("div",{class:"mrd-relation-field__search-wrapper"},t("input",{class:"mrd-relation-field__search"+(i?" mrd-relation-field__search--error":""),type:"text",value:this.searchQuery,placeholder:d("search_placeholder",this.locale),disabled:this.disabled,onInput:this.handleSearchInput,onKeyDown:this.handleKeyDown,onBlur:this.handleBlur}),this.isLoading&&t("span",{class:"mrd-relation-field__spinner","aria-label":d("loading",this.locale)})),this.showResults&&t("div",{class:"mrd-relation-field__results"},0!==this.searchResults.length||this.isLoading?this.searchResults.map(((r,e)=>t("div",{key:r.id,class:"mrd-relation-field__result-item"+(e===this.highlightedIndex?" mrd-relation-field__result-item--highlighted":""),onMouseDown:()=>this.handleResultSelect(r)},t("span",{class:"mrd-relation-field__result-label"},r.label),r.description&&t("span",{class:"mrd-relation-field__result-desc"},r.description)))):t("div",{class:"mrd-relation-field__no-results"},d("no_results",this.locale))),i&&t("span",{class:"mrd-relation-field__error"},this.error)))}static get style(){return".sc-mrd-relation-field-h{display:block}.mrd-relation-field.sc-mrd-relation-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%;position:relative}.mrd-relation-field__label.sc-mrd-relation-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-relation-field__label--required.sc-mrd-relation-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-relation-field__select.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);padding-right:calc(var(--mrd-input-padding-x) + 1.5rem);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right var(--mrd-space-3) center;border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;cursor:pointer;box-sizing:border-box}.mrd-relation-field__select.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__select.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__select--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__select--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__tags.sc-mrd-relation-field{display:flex;flex-wrap:wrap;gap:var(--mrd-space-1);margin-bottom:var(--mrd-space-1)}.mrd-relation-field__tag.sc-mrd-relation-field{display:inline-flex;align-items:center;gap:var(--mrd-space-1);padding:var(--mrd-space-1) var(--mrd-space-2);background-color:var(--mrd-color-primary-light);color:var(--mrd-color-primary-dark);border-radius:var(--mrd-border-radius-full);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__tag-remove.sc-mrd-relation-field{background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-xs);padding:0;line-height:1;opacity:0.7}.mrd-relation-field__tag-remove.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__search-wrapper.sc-mrd-relation-field{position:relative;display:flex;align-items:center}.mrd-relation-field__search.sc-mrd-relation-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;appearance:none;box-sizing:border-box}.mrd-relation-field__search.sc-mrd-relation-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-relation-field__search.sc-mrd-relation-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-relation-field__search.sc-mrd-relation-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-relation-field__search--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error)}.mrd-relation-field__search--error.sc-mrd-relation-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-relation-field__spinner.sc-mrd-relation-field{position:absolute;right:var(--mrd-space-3);width:16px;height:16px;border:2px solid var(--mrd-color-neutral-200);border-top-color:var(--mrd-color-primary);border-radius:50%;animation:mrd-spin 0.7s linear infinite}@keyframes mrd-spin{to{transform:rotate(360deg)}}.mrd-relation-field__results.sc-mrd-relation-field{position:absolute;top:calc(100% + var(--mrd-space-1));left:0;right:0;background-color:var(--mrd-color-white);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);box-shadow:var(--mrd-shadow-md);z-index:var(--mrd-z-dropdown);max-height:240px;overflow-y:auto}.mrd-relation-field__result-item.sc-mrd-relation-field{display:flex;flex-direction:column;padding:var(--mrd-space-2) var(--mrd-space-3);cursor:pointer;transition:background-color var(--mrd-transition-fast)}.mrd-relation-field__result-item.sc-mrd-relation-field:hover{background-color:var(--mrd-color-neutral-50)}.mrd-relation-field__result-item.sc-mrd-relation-field:not(:last-child){border-bottom:var(--mrd-border-width) solid var(--mrd-color-neutral-100)}.mrd-relation-field__result-label.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-color-neutral-800);font-weight:var(--mrd-font-weight-medium)}.mrd-relation-field__result-desc.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-xs);color:var(--mrd-color-neutral-500);margin-top:var(--mrd-space-1)}.mrd-relation-field__result-item--highlighted.sc-mrd-relation-field{background-color:var(--mrd-color-primary-light)}.mrd-relation-field__selected-value.sc-mrd-relation-field{display:flex;align-items:center;gap:var(--mrd-space-2);height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-color-primary-light);border:var(--mrd-border-width) solid var(--mrd-color-primary);border-radius:var(--mrd-border-radius);box-sizing:border-box}.mrd-relation-field__selected-value--error.sc-mrd-relation-field{border-color:var(--mrd-border-color-error);background-color:var(--mrd-color-danger-light)}.mrd-relation-field__selected-name.sc-mrd-relation-field{flex:1;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-color-primary-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrd-relation-field__selected-clear.sc-mrd-relation-field{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--mrd-color-primary-dark);font-size:var(--mrd-font-size-sm);padding:0;line-height:1;opacity:0.6;transition:opacity var(--mrd-transition-fast)}.mrd-relation-field__selected-clear.sc-mrd-relation-field:hover{opacity:1}.mrd-relation-field__no-results.sc-mrd-relation-field{padding:var(--mrd-space-4);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);color:var(--mrd-color-neutral-500);text-align:center}.mrd-relation-field__error.sc-mrd-relation-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}"}},[2,"mrd-relation-field",{name:[1],label:[1],required:[4],disabled:[4],locale:[1],relatedClass:[1,"related-class"],displayType:[1,"display-type"],multiple:[4],dropdownValues:[16],value:[1],searchQuery:[32],searchResults:[32],isLoading:[32],selectedItems:[32],showResults:[32],error:[32],highlightedIndex:[32],setSearchResults:[64],setLoading:[64]}]);function m(){"undefined"!=typeof customElements&&["mrd-relation-field"].forEach((r=>{"mrd-relation-field"===r&&(customElements.get(l(r))||customElements.define(l(r),n))}))}export{n as M,m as d}