@mmlogic/components 0.3.5 → 0.3.6

package/dist/mosterdcomponents/mrd-relation-field.entry.js

@@ -0,0 +1,267 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-B_tPFIvS.js';
+import { t } from './i18n-hoGGKbKU.js';
+import { v as validateRequired } from './validation-ixb43cqU.js';
+import './index-I5SuYv7a.js';
+import { c as ClientLayoutItemRelationDisplayType, d as ClientLayoutItemRelationEditBehavior } from './client-layout-D88nn5zf.js';
+
+const mrdRelationFieldScss = () => `.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)}`;
+
+const MrdRelationField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mrdChange = createEvent(this, "mrdChange", 7);
+        this.mrdBlur = createEvent(this, "mrdBlur", 7);
+        this.mrdSearch = createEvent(this, "mrdSearch", 7);
+        this.mrdFetchAll = createEvent(this, "mrdFetchAll", 7);
+        this.name = '';
+        this.label = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.relatedClass = '';
+        /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */
+        this.mostSignificantClass = '';
+        this.displayType = ClientLayoutItemRelationDisplayType.SEARCH;
+        this.multiple = false;
+        this.dropdownValues = [];
+        /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */
+        this.value = null;
+        this.searchQuery = '';
+        this.searchResults = [];
+        this.allRecords = [];
+        this.isLoading = false;
+        this.selectedItems = [];
+        this.showResults = false;
+        this.error = '';
+        this.highlightedIndex = -1;
+        this.searchDebounce = null;
+        this.handleKeyDown = (e) => {
+            if (!this.showResults || this.searchResults.length === 0) {
+                if (e.key === 'Escape') {
+                    this.showResults = false;
+                    this.highlightedIndex = -1;
+                }
+                return;
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.searchResults.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (this.highlightedIndex >= 0) {
+                    this.handleResultSelect(this.searchResults[this.highlightedIndex]);
+                }
+            }
+            else if (e.key === 'Escape') {
+                this.showResults = false;
+                this.highlightedIndex = -1;
+            }
+        };
+        this.clearSelection = () => {
+            this.selectedItems = [];
+            this.searchQuery = '';
+            this.searchResults = [];
+            this.showResults = false;
+            this.highlightedIndex = -1;
+            this.mrdChange.emit({ name: this.name, value: this.multiple ? [] : null });
+        };
+        this.handleSearchInput = (e) => {
+            const query = e.target.value;
+            this.searchQuery = query;
+            if (this.searchDebounce)
+                clearTimeout(this.searchDebounce);
+            if (query.trim().length >= 2) {
+                this.isLoading = true;
+                this.showResults = true;
+                this.searchDebounce = setTimeout(() => {
+                    this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });
+                }, 300);
+            }
+            else {
+                this.searchResults = [];
+                this.showResults = false;
+                this.isLoading = false;
+            }
+        };
+        this.handleResultSelect = (result) => {
+            if (this.multiple) {
+                if (!this.selectedItems.find(i => i.id === result.id)) {
+                    this.selectedItems = [...this.selectedItems, result];
+                }
+                this.searchQuery = '';
+                this.searchResults = [];
+                this.showResults = false;
+                const ids = this.selectedItems.map(i => i.id);
+                this.mrdChange.emit({ name: this.name, value: ids });
+            }
+            else {
+                this.selectedItems = [result];
+                this.searchQuery = result.label;
+                this.showResults = false;
+                this.mrdChange.emit({ name: this.name, value: result.id });
+            }
+            if (this.required && !validateRequired(this.selectedItems)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+        };
+        this.handleRemoveSelected = (id) => {
+            this.selectedItems = this.selectedItems.filter(i => i.id !== id);
+            const ids = this.selectedItems.map(i => i.id);
+            this.mrdChange.emit({ name: this.name, value: this.multiple ? ids : null });
+        };
+        this.handleDropdownChange = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = () => {
+            var _a, _b;
+            setTimeout(() => {
+                this.showResults = false;
+                this.highlightedIndex = -1;
+            }, 200);
+            const val = this.multiple ? this.selectedItems.map(i => i.id) : ((_b = (_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    async setAllRecords(records) {
+        this.allRecords = records;
+    }
+    getValueHref() {
+        var _a, _b, _c;
+        const v = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+        if (!v)
+            return '';
+        if (typeof v === 'object')
+            return (_c = v.id) !== null && _c !== void 0 ? _c : '';
+        return v;
+    }
+    allRecordsChanged() {
+        if (this.editBehavior !== ClientLayoutItemRelationEditBehavior.DROPDOWN)
+            return;
+        const current = this.getValueHref();
+        if (!current)
+            return;
+        // Defer past Stencil's async render cycle: options must exist in the DOM before
+        // select.value can be set. setAttribute('selected') alone is ignored by browsers
+        // when the select already has an established value.
+        setTimeout(() => {
+            var _a;
+            const select = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('select');
+            if (select)
+                select.value = current;
+        }, 0);
+    }
+    async setSearchResults(results) {
+        this.searchResults = results;
+        this.isLoading = false;
+        this.showResults = true;
+        this.highlightedIndex = -1;
+    }
+    async setLoading(loading) {
+        this.isLoading = loading;
+    }
+    toSearchResult(v) {
+        var _a, _b, _c, _d;
+        return {
+            id: (_b = (_a = v.id) !== null && _a !== void 0 ? _a : v.href) !== null && _b !== void 0 ? _b : '',
+            label: (_d = (_c = v.label) !== null && _c !== void 0 ? _c : v.name) !== null && _d !== void 0 ? _d : '',
+            description: v.description,
+        };
+    }
+    applyValuePrefill(v) {
+        if (!v)
+            return;
+        if (Array.isArray(v)) {
+            if (v.length > 0 && typeof v[0] === 'object') {
+                this.selectedItems = v.map(item => this.toSearchResult(item));
+                this.searchQuery = '';
+            }
+            // array of strings → user interaction, ignore
+        }
+        else if (typeof v === 'object') {
+            const obj = v;
+            if (Array.isArray(obj.values)) {
+                // Multiple relation: API embeds selected items in values[]
+                this.selectedItems = obj.values.map((item) => this.toSearchResult(item));
+                this.searchQuery = '';
+            }
+            else if (!this.multiple && (obj.id || obj.name || obj.label)) {
+                // Single relation: { href, name } or already { id, label }
+                const result = this.toSearchResult(obj);
+                this.selectedItems = [result];
+                this.searchQuery = result.label;
+            }
+            // else: collection href (multiple without values) or unrecognised — skip
+        }
+    }
+    componentWillLoad() {
+        this.applyValuePrefill(this.value);
+    }
+    // Handles edit-mode: values prop on mrd-form is often set async after mount.
+    // Only updates selectedItems when the new value contains { id, label } objects
+    // (host pre-fill). Plain href strings from user interaction are ignored.
+    valueChanged(newValue) {
+        this.applyValuePrefill(newValue);
+    }
+    componentDidLoad() {
+        // Only emit when there is no commonRelation dependency — the form orchestrates those.
+        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {
+            // Defer to next tick so parent event listeners are registered after DOM patching
+            setTimeout(() => {
+                this.mrdFetchAll.emit({
+                    name: this.name,
+                    relatedClass: this.relatedClass,
+                    mostSignificantClass: this.mostSignificantClass || undefined,
+                });
+            }, 0);
+        }
+    }
+    render() {
+        var _a, _b;
+        const hasError = !!this.error;
+        if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN) {
+            const currentValue = this.getValueHref();
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.allRecords.map(record => (h("option", { key: record.id, value: record.id, selected: record.id === currentValue }, record.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        if (this.displayType === ClientLayoutItemRelationDisplayType.DROPDOWN) {
+            const currentValue = Array.isArray(this.value) ? ((_a = this.value[0]) !== null && _a !== void 0 ? _a : '') : ((_b = this.value) !== null && _b !== void 0 ? _b : '');
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label)), h("select", { class: `mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`, name: this.name, required: this.required, disabled: this.disabled, onChange: this.handleDropdownChange }, h("option", { value: "" }, t('select_placeholder', this.locale)), this.dropdownValues.map(dv => (h("option", { key: dv.key, value: dv.key, selected: dv.key === currentValue }, dv.label)))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        // SEARCH mode
+        const labelEl = this.label && (h("label", { class: `mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}` }, this.label));
+        // Single selection: show selected value as a badge, hide the search input
+        if (!this.multiple && this.selectedItems.length > 0) {
+            return (h(Host, null, h("div", { class: "mrd-relation-field" }, labelEl, h("div", { class: `mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}` }, h("span", { class: "mrd-relation-field__selected-name" }, this.selectedItems[0].label), h("button", { type: "button", class: "mrd-relation-field__selected-clear", onClick: this.clearSelection, "aria-label": t('remove', this.locale) }, "\u2715")), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+        }
+        return (h(Host, null, h("div", { class: "mrd-relation-field" }, labelEl, this.multiple && this.selectedItems.length > 0 && (h("div", { class: "mrd-relation-field__tags" }, this.selectedItems.map(item => (h("span", { key: item.id, class: "mrd-relation-field__tag" }, item.label, h("button", { type: "button", class: "mrd-relation-field__tag-remove", onClick: () => this.handleRemoveSelected(item.id), "aria-label": t('remove', this.locale) }, "\u2715")))))), h("div", { class: "mrd-relation-field__search-wrapper" }, h("input", { class: `mrd-relation-field__search${hasError ? ' mrd-relation-field__search--error' : ''}`, type: "text", value: this.searchQuery, placeholder: t('search_placeholder', this.locale), disabled: this.disabled, onInput: this.handleSearchInput, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur }), this.isLoading && (h("span", { class: "mrd-relation-field__spinner", "aria-label": t('loading', this.locale) }))), this.showResults && (h("div", { class: "mrd-relation-field__results" }, this.searchResults.length === 0 && !this.isLoading ? (h("div", { class: "mrd-relation-field__no-results" }, t('no_results', this.locale))) : (this.searchResults.map((result, i) => (h("div", { key: result.id, class: `mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`, onMouseDown: () => this.handleResultSelect(result) }, h("span", { class: "mrd-relation-field__result-label" }, result.label), result.description && (h("span", { class: "mrd-relation-field__result-desc" }, result.description)))))))), hasError && h("span", { class: "mrd-relation-field__error" }, this.error))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "allRecords": [{
+                "allRecordsChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+MrdRelationField.style = mrdRelationFieldScss();
+
+export { MrdRelationField as mrd_relation_field };
+//# sourceMappingURL=mrd-relation-field.entry.esm.js.map
+
+//# sourceMappingURL=mrd-relation-field.entry.js.map

package/dist/mosterdcomponents/mrd-relation-field.entry.js.map

@@ -0,0 +1 @@
+{"file":"mrd-relation-field.entry.js","mappings":"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","names":[],"sources":["src/components/mrd-relation-field/mrd-relation-field.scss?tag=mrd-relation-field&encapsulation=scoped","src/components/mrd-relation-field/mrd-relation-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.mrd-relation-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-1);\n  width: 100%;\n  position: relative;\n}\n\n.mrd-relation-field__label {\n  display: block;\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-label-font-size);\n  font-weight: var(--mrd-label-font-weight);\n  color: var(--mrd-label-color);\n}\n\n.mrd-relation-field__label--required::after {\n  content: ' *';\n  color: var(--mrd-color-danger);\n}\n\n.mrd-relation-field__select {\n  display: block;\n  width: 100%;\n  height: var(--mrd-input-height);\n  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);\n  padding-right: calc(var(--mrd-input-padding-x) + 1.5rem);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  color: var(--mrd-input-color);\n  background-color: var(--mrd-input-bg);\n  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\");\n  background-repeat: no-repeat;\n  background-position: right var(--mrd-space-3) center;\n  border: var(--mrd-border-width) solid var(--mrd-border-color);\n  border-radius: var(--mrd-border-radius);\n  outline: none;\n  appearance: none;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n\n.mrd-relation-field__select:focus {\n  border-color: var(--mrd-border-color-focus);\n  box-shadow: var(--mrd-shadow-focus);\n}\n\n.mrd-relation-field__select:disabled {\n  background-color: var(--mrd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.mrd-relation-field__select--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-relation-field__select--error:focus {\n  box-shadow: var(--mrd-shadow-focus-error);\n}\n\n.mrd-relation-field__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mrd-space-1);\n  margin-bottom: var(--mrd-space-1);\n}\n\n.mrd-relation-field__tag {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mrd-space-1);\n  padding: var(--mrd-space-1) var(--mrd-space-2);\n  background-color: var(--mrd-color-primary-light);\n  color: var(--mrd-color-primary-dark);\n  border-radius: var(--mrd-border-radius-full);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-sm);\n  font-weight: var(--mrd-font-weight-medium);\n}\n\n.mrd-relation-field__tag-remove {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mrd-color-primary-dark);\n  font-size: var(--mrd-font-size-xs);\n  padding: 0;\n  line-height: 1;\n  opacity: 0.7;\n}\n\n.mrd-relation-field__tag-remove:hover {\n  opacity: 1;\n}\n\n.mrd-relation-field__search-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.mrd-relation-field__search {\n  display: block;\n  width: 100%;\n  height: var(--mrd-input-height);\n  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  color: var(--mrd-input-color);\n  background-color: var(--mrd-input-bg);\n  border: var(--mrd-border-width) solid var(--mrd-border-color);\n  border-radius: var(--mrd-border-radius);\n  outline: none;\n  appearance: none;\n  box-sizing: border-box;\n}\n\n.mrd-relation-field__search::placeholder {\n  color: var(--mrd-input-placeholder-color);\n}\n\n.mrd-relation-field__search:focus {\n  border-color: var(--mrd-border-color-focus);\n  box-shadow: var(--mrd-shadow-focus);\n}\n\n.mrd-relation-field__search:disabled {\n  background-color: var(--mrd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.mrd-relation-field__search--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-relation-field__search--error:focus {\n  box-shadow: var(--mrd-shadow-focus-error);\n}\n\n.mrd-relation-field__spinner {\n  position: absolute;\n  right: var(--mrd-space-3);\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--mrd-color-neutral-200);\n  border-top-color: var(--mrd-color-primary);\n  border-radius: 50%;\n  animation: mrd-spin 0.7s linear infinite;\n}\n\n@keyframes mrd-spin {\n  to { transform: rotate(360deg); }\n}\n\n.mrd-relation-field__results {\n  position: absolute;\n  top: calc(100% + var(--mrd-space-1));\n  left: 0;\n  right: 0;\n  background-color: var(--mrd-color-white);\n  border: var(--mrd-border-width) solid var(--mrd-border-color);\n  border-radius: var(--mrd-border-radius);\n  box-shadow: var(--mrd-shadow-md);\n  z-index: var(--mrd-z-dropdown);\n  max-height: 240px;\n  overflow-y: auto;\n}\n\n.mrd-relation-field__result-item {\n  display: flex;\n  flex-direction: column;\n  padding: var(--mrd-space-2) var(--mrd-space-3);\n  cursor: pointer;\n  transition: background-color var(--mrd-transition-fast);\n}\n\n.mrd-relation-field__result-item:hover {\n  background-color: var(--mrd-color-neutral-50);\n}\n\n.mrd-relation-field__result-item:not(:last-child) {\n  border-bottom: var(--mrd-border-width) solid var(--mrd-color-neutral-100);\n}\n\n.mrd-relation-field__result-label {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  color: var(--mrd-color-neutral-800);\n  font-weight: var(--mrd-font-weight-medium);\n}\n\n.mrd-relation-field__result-desc {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-xs);\n  color: var(--mrd-color-neutral-500);\n  margin-top: var(--mrd-space-1);\n}\n\n.mrd-relation-field__result-item--highlighted {\n  background-color: var(--mrd-color-primary-light);\n}\n\n.mrd-relation-field__selected-value {\n  display: flex;\n  align-items: center;\n  gap: var(--mrd-space-2);\n  height: var(--mrd-input-height);\n  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);\n  background-color: var(--mrd-color-primary-light);\n  border: var(--mrd-border-width) solid var(--mrd-color-primary);\n  border-radius: var(--mrd-border-radius);\n  box-sizing: border-box;\n}\n\n.mrd-relation-field__selected-value--error {\n  border-color: var(--mrd-border-color-error);\n  background-color: var(--mrd-color-danger-light);\n}\n\n.mrd-relation-field__selected-name {\n  flex: 1;\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  font-weight: var(--mrd-font-weight-medium);\n  color: var(--mrd-color-primary-dark);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.mrd-relation-field__selected-clear {\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mrd-color-primary-dark);\n  font-size: var(--mrd-font-size-sm);\n  padding: 0;\n  line-height: 1;\n  opacity: 0.6;\n  transition: opacity var(--mrd-transition-fast);\n}\n\n.mrd-relation-field__selected-clear:hover {\n  opacity: 1;\n}\n\n.mrd-relation-field__no-results {\n  padding: var(--mrd-space-4);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-sm);\n  color: var(--mrd-color-neutral-500);\n  text-align: center;\n}\n\n.mrd-relation-field__error {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-error-font-size);\n  color: var(--mrd-error-color);\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Method, Watch, Element } from '@stencil/core';\nimport { t } from '../../utils/i18n';\nimport { validateRequired } from '../../utils/validation';\nimport { ClientLayoutItemRelationDisplayType, ClientLayoutItemRelationEditBehavior, ClientListValue, RelationSearchResult } from '../../types';\n\n@Component({\n  tag: 'mrd-relation-field',\n  styleUrl: 'mrd-relation-field.scss',\n  scoped: true,\n})\nexport class MrdRelationField {\n  @Element() el!: HTMLElement;\n\n  @Prop() name: string = '';\n  @Prop() label: string = '';\n  @Prop() required: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() locale: string = navigator.language;\n  @Prop() relatedClass: string = '';\n  /** When set, used instead of relatedClass for search queries (mostSignificantClass from API). */\n  @Prop() mostSignificantClass: string = '';\n  @Prop() displayType: ClientLayoutItemRelationDisplayType = ClientLayoutItemRelationDisplayType.SEARCH;\n  @Prop() editBehavior?: ClientLayoutItemRelationEditBehavior | null;\n  @Prop() commonRelation?: string;\n  @Prop() multiple: boolean = false;\n  @Prop() dropdownValues: ClientListValue[] = [];\n  /** Plain href string/array for normal use; pass { id, label } objects to pre-fill a loaded record. */\n  @Prop() value: string | string[] | RelationSearchResult | RelationSearchResult[] | null = null;\n\n  @State() searchQuery: string = '';\n  @State() searchResults: RelationSearchResult[] = [];\n  @State() allRecords: RelationSearchResult[] = [];\n  @State() isLoading: boolean = false;\n  @State() selectedItems: RelationSearchResult[] = [];\n  @State() showResults: boolean = false;\n  @State() error: string = '';\n  @State() highlightedIndex: number = -1;\n\n  @Event() mrdChange!: EventEmitter<{ name: string; value: string | string[] | null }>;\n  @Event() mrdBlur!: EventEmitter<{ name: string; value: string | string[] | null }>;\n  @Event() mrdSearch!: EventEmitter<{ name: string; query: string; relatedClass: string }>;\n  @Event() mrdFetchAll!: EventEmitter<{ name: string; relatedClass: string; mostSignificantClass?: string; commonRelation?: string; filter?: string; filterValue?: string }>;\n\n  @Method()\n  async setAllRecords(records: RelationSearchResult[]): Promise<void> {\n    this.allRecords = records;\n  }\n\n  private getValueHref(): string {\n    const v = Array.isArray(this.value) ? (this.value[0] ?? '') : (this.value ?? '');\n    if (!v) return '';\n    if (typeof v === 'object') return (v as RelationSearchResult).id ?? '';\n    return v as string;\n  }\n\n  @Watch('allRecords')\n  allRecordsChanged() {\n    if (this.editBehavior !== ClientLayoutItemRelationEditBehavior.DROPDOWN) return;\n    const current = this.getValueHref();\n    if (!current) return;\n    // Defer past Stencil's async render cycle: options must exist in the DOM before\n    // select.value can be set. setAttribute('selected') alone is ignored by browsers\n    // when the select already has an established value.\n    setTimeout(() => {\n      const select = this.el?.querySelector('select');\n      if (select) select.value = current;\n    }, 0);\n  }\n\n  @Method()\n  async setSearchResults(results: RelationSearchResult[]) {\n    this.searchResults = results;\n    this.isLoading = false;\n    this.showResults = true;\n    this.highlightedIndex = -1;\n  }\n\n  @Method()\n  async setLoading(loading: boolean) {\n    this.isLoading = loading;\n  }\n\n  private searchDebounce: ReturnType<typeof setTimeout> | null = null;\n\n  private toSearchResult(v: any): RelationSearchResult {\n    return {\n      id:          v.id    ?? v.href  ?? '',\n      label:       v.label ?? v.name  ?? '',\n      description: v.description,\n    };\n  }\n\n  private applyValuePrefill(v: typeof this.value) {\n    if (!v) return;\n    if (Array.isArray(v)) {\n      if (v.length > 0 && typeof v[0] === 'object') {\n        this.selectedItems = (v as any[]).map(item => this.toSearchResult(item));\n        this.searchQuery   = '';\n      }\n      // array of strings → user interaction, ignore\n    } else if (typeof v === 'object') {\n      const obj = v as any;\n      if (Array.isArray(obj.values)) {\n        // Multiple relation: API embeds selected items in values[]\n        this.selectedItems = obj.values.map((item: any) => this.toSearchResult(item));\n        this.searchQuery   = '';\n      } else if (!this.multiple && (obj.id || obj.name || obj.label)) {\n        // Single relation: { href, name } or already { id, label }\n        const result = this.toSearchResult(obj);\n        this.selectedItems = [result];\n        this.searchQuery   = result.label;\n      }\n      // else: collection href (multiple without values) or unrecognised — skip\n    }\n  }\n\n  componentWillLoad() {\n    this.applyValuePrefill(this.value);\n  }\n\n  // Handles edit-mode: values prop on mrd-form is often set async after mount.\n  // Only updates selectedItems when the new value contains { id, label } objects\n  // (host pre-fill). Plain href strings from user interaction are ignored.\n  @Watch('value')\n  valueChanged(newValue: typeof this.value) {\n    this.applyValuePrefill(newValue);\n  }\n\n  componentDidLoad() {\n    // Only emit when there is no commonRelation dependency — the form orchestrates those.\n    if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN && !this.commonRelation) {\n      // Defer to next tick so parent event listeners are registered after DOM patching\n      setTimeout(() => {\n        this.mrdFetchAll.emit({\n          name: this.name,\n          relatedClass: this.relatedClass,\n          mostSignificantClass: this.mostSignificantClass || undefined,\n        });\n      }, 0);\n    }\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (!this.showResults || this.searchResults.length === 0) {\n      if (e.key === 'Escape') { this.showResults = false; this.highlightedIndex = -1; }\n      return;\n    }\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.searchResults.length - 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.highlightedIndex >= 0) {\n        this.handleResultSelect(this.searchResults[this.highlightedIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      this.showResults = false;\n      this.highlightedIndex = -1;\n    }\n  };\n\n  private clearSelection = () => {\n    this.selectedItems = [];\n    this.searchQuery = '';\n    this.searchResults = [];\n    this.showResults = false;\n    this.highlightedIndex = -1;\n    this.mrdChange.emit({ name: this.name, value: this.multiple ? [] : null });\n  };\n\n  private handleSearchInput = (e: Event) => {\n    const query = (e.target as HTMLInputElement).value;\n    this.searchQuery = query;\n    if (this.searchDebounce) clearTimeout(this.searchDebounce);\n    if (query.trim().length >= 2) {\n      this.isLoading = true;\n      this.showResults = true;\n      this.searchDebounce = setTimeout(() => {\n        this.mrdSearch.emit({ name: this.name, query, relatedClass: this.mostSignificantClass });\n      }, 300);\n    } else {\n      this.searchResults = [];\n      this.showResults = false;\n      this.isLoading = false;\n    }\n  };\n\n  private handleResultSelect = (result: RelationSearchResult) => {\n    if (this.multiple) {\n      if (!this.selectedItems.find(i => i.id === result.id)) {\n        this.selectedItems = [...this.selectedItems, result];\n      }\n      this.searchQuery = '';\n      this.searchResults = [];\n      this.showResults = false;\n      const ids = this.selectedItems.map(i => i.id);\n      this.mrdChange.emit({ name: this.name, value: ids });\n    } else {\n      this.selectedItems = [result];\n      this.searchQuery = result.label;\n      this.showResults = false;\n      this.mrdChange.emit({ name: this.name, value: result.id });\n    }\n    if (this.required && !validateRequired(this.selectedItems)) {\n      this.error = t('required', this.locale);\n    } else {\n      this.error = '';\n    }\n  };\n\n  private handleRemoveSelected = (id: string) => {\n    this.selectedItems = this.selectedItems.filter(i => i.id !== id);\n    const ids = this.selectedItems.map(i => i.id);\n    this.mrdChange.emit({ name: this.name, value: this.multiple ? ids : null });\n  };\n\n  private handleDropdownChange = (e: Event) => {\n    const val = (e.target as HTMLSelectElement).value;\n    if (this.required && !validateRequired(val)) {\n      this.error = t('required', this.locale);\n    } else {\n      this.error = '';\n    }\n    this.mrdChange.emit({ name: this.name, value: val });\n  };\n\n  private handleBlur = () => {\n    setTimeout(() => {\n      this.showResults = false;\n      this.highlightedIndex = -1;\n    }, 200);\n    const val = this.multiple ? this.selectedItems.map(i => i.id) : (this.selectedItems[0]?.id ?? null);\n    this.mrdBlur.emit({ name: this.name, value: val });\n  };\n\n  render() {\n    const hasError = !!this.error;\n\n    if (this.editBehavior === ClientLayoutItemRelationEditBehavior.DROPDOWN) {\n      const currentValue = this.getValueHref();\n      return (\n        <Host>\n          <div class=\"mrd-relation-field\">\n            {this.label && (\n              <label class={`mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}`}>\n                {this.label}\n              </label>\n            )}\n            <select\n              class={`mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`}\n              name={this.name}\n              required={this.required}\n              disabled={this.disabled}\n              onChange={this.handleDropdownChange}\n            >\n              <option value=\"\">{t('select_placeholder', this.locale)}</option>\n              {this.allRecords.map(record => (\n                <option key={record.id} value={record.id} selected={record.id === currentValue}>\n                  {record.label}\n                </option>\n              ))}\n            </select>\n            {hasError && <span class=\"mrd-relation-field__error\">{this.error}</span>}\n          </div>\n        </Host>\n      );\n    }\n\n    if (this.displayType === ClientLayoutItemRelationDisplayType.DROPDOWN) {\n      const currentValue = Array.isArray(this.value) ? (this.value[0] ?? '') : (this.value ?? '');\n      return (\n        <Host>\n          <div class=\"mrd-relation-field\">\n            {this.label && (\n              <label class={`mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}`}>\n                {this.label}\n              </label>\n            )}\n            <select\n              class={`mrd-relation-field__select${hasError ? ' mrd-relation-field__select--error' : ''}`}\n              name={this.name}\n              required={this.required}\n              disabled={this.disabled}\n              onChange={this.handleDropdownChange}\n            >\n              <option value=\"\">{t('select_placeholder', this.locale)}</option>\n              {this.dropdownValues.map(dv => (\n                <option key={dv.key} value={dv.key} selected={dv.key === currentValue}>\n                  {dv.label}\n                </option>\n              ))}\n            </select>\n            {hasError && <span class=\"mrd-relation-field__error\">{this.error}</span>}\n          </div>\n        </Host>\n      );\n    }\n\n    // SEARCH mode\n    const labelEl = this.label && (\n      <label class={`mrd-relation-field__label${this.required ? ' mrd-relation-field__label--required' : ''}`}>\n        {this.label}\n      </label>\n    );\n\n    // Single selection: show selected value as a badge, hide the search input\n    if (!this.multiple && this.selectedItems.length > 0) {\n      return (\n        <Host>\n          <div class=\"mrd-relation-field\">\n            {labelEl}\n            <div class={`mrd-relation-field__selected-value${hasError ? ' mrd-relation-field__selected-value--error' : ''}`}>\n              <span class=\"mrd-relation-field__selected-name\">{this.selectedItems[0].label}</span>\n              <button\n                type=\"button\"\n                class=\"mrd-relation-field__selected-clear\"\n                onClick={this.clearSelection}\n                aria-label={t('remove', this.locale)}\n              >\n                ✕\n              </button>\n            </div>\n            {hasError && <span class=\"mrd-relation-field__error\">{this.error}</span>}\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"mrd-relation-field\">\n          {labelEl}\n          {this.multiple && this.selectedItems.length > 0 && (\n            <div class=\"mrd-relation-field__tags\">\n              {this.selectedItems.map(item => (\n                <span key={item.id} class=\"mrd-relation-field__tag\">\n                  {item.label}\n                  <button\n                    type=\"button\"\n                    class=\"mrd-relation-field__tag-remove\"\n                    onClick={() => this.handleRemoveSelected(item.id)}\n                    aria-label={t('remove', this.locale)}\n                  >\n                    ✕\n                  </button>\n                </span>\n              ))}\n            </div>\n          )}\n          <div class=\"mrd-relation-field__search-wrapper\">\n            <input\n              class={`mrd-relation-field__search${hasError ? ' mrd-relation-field__search--error' : ''}`}\n              type=\"text\"\n              value={this.searchQuery}\n              placeholder={t('search_placeholder', this.locale)}\n              disabled={this.disabled}\n              onInput={this.handleSearchInput}\n              onKeyDown={this.handleKeyDown}\n              onBlur={this.handleBlur}\n            />\n            {this.isLoading && (\n              <span class=\"mrd-relation-field__spinner\" aria-label={t('loading', this.locale)}></span>\n            )}\n          </div>\n          {this.showResults && (\n            <div class=\"mrd-relation-field__results\">\n              {this.searchResults.length === 0 && !this.isLoading ? (\n                <div class=\"mrd-relation-field__no-results\">{t('no_results', this.locale)}</div>\n              ) : (\n                this.searchResults.map((result, i) => (\n                  <div\n                    key={result.id}\n                    class={`mrd-relation-field__result-item${i === this.highlightedIndex ? ' mrd-relation-field__result-item--highlighted' : ''}`}\n                    onMouseDown={() => this.handleResultSelect(result)}\n                  >\n                    <span class=\"mrd-relation-field__result-label\">{result.label}</span>\n                    {result.description && (\n                      <span class=\"mrd-relation-field__result-desc\">{result.description}</span>\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n          )}\n          {hasError && <span class=\"mrd-relation-field__error\">{this.error}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/mosterdcomponents/mrd-secret-field.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, a as createEvent, h, d as Host } from './index-B_tPFIvS.js';
+import { t } from './i18n-hoGGKbKU.js';
+import { v as validateRequired } from './validation-ixb43cqU.js';
+import './index-I5SuYv7a.js';
+import './client-layout-D88nn5zf.js';
+
+const mrdSecretFieldScss = () => `.sc-mrd-secret-field-h{display:block}.mrd-secret-field.sc-mrd-secret-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-secret-field__label.sc-mrd-secret-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-secret-field__label--required.sc-mrd-secret-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-secret-field__input.sc-mrd-secret-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}.mrd-secret-field__input.sc-mrd-secret-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-secret-field__input.sc-mrd-secret-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-secret-field__input--error.sc-mrd-secret-field{border-color:var(--mrd-border-color-error)}.mrd-secret-field__input--error.sc-mrd-secret-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-secret-field__error.sc-mrd-secret-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-secret-field__masked.sc-mrd-secret-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-label-color);letter-spacing:0.15em;user-select:none;pointer-events:none}`;
+
+const MrdSecretField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mrdChange = createEvent(this, "mrdChange", 7);
+        this.mrdBlur = createEvent(this, "mrdBlur", 7);
+        this.name = '';
+        this.label = '';
+        this.value = '';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.error = '';
+        this.handleInput = (e) => {
+            const val = e.target.value;
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: '08f1aa9d8ab9f4e41abb6d3286e5e383427a5409' }, h("div", { key: 'fabe38aa130e211cea81f2c2f227bc15ad3ebf7d', class: "mrd-secret-field" }, this.label && (h("label", { key: '69af8844eff8ce84daa622635c79130fb491eb0b', class: `mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}` }, this.label)), this.disabled
+            ? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
+            : (h("input", { class: `mrd-secret-field__input${hasError ? ' mrd-secret-field__input--error' : ''}`, type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), hasError && h("span", { key: 'e602004f0bb10916d1015e3c2b003523a292997c', class: "mrd-secret-field__error" }, this.error))));
+    }
+};
+MrdSecretField.style = mrdSecretFieldScss();
+
+export { MrdSecretField as mrd_secret_field };
+//# sourceMappingURL=mrd-secret-field.entry.esm.js.map
+
+//# sourceMappingURL=mrd-secret-field.entry.js.map

package/dist/mosterdcomponents/mrd-secret-field.entry.js.map

@@ -0,0 +1 @@
+{"file":"mrd-secret-field.entry.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,wuDAAwuD,CAAC;;MCS9vD,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMU,QAAA,IAAA,CAAA,IAAI,GAAW,EAAE;AACjB,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE;AAClB,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE;AAClB,QAAA,IAAA,CAAA,WAAW,GAAW,EAAE;AACxB,QAAA,IAAA,CAAA,QAAQ,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,QAAQ,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,MAAM,GAAW,SAAS,CAAC,QAAQ;AAElC,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE;AAKnB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,CAAQ,KAAI;AACjC,YAAA,MAAM,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;AAChD,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AACtD,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,CAAQ,KAAI;AAChC,YAAA,MAAM,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;YAChD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE;gBAC3C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC;;iBAClC;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;AAEjB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AACpD,SAAC;AAqCF;IAnCC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAC7B,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,QAAQ,GAAG,oCAAoC,GAAG,EAAE,CAAA,CAAE,EAAA,EAChG,IAAI,CAAC,KAAK,CACL,CACT,EACA,IAAI,CAAC;AACJ,eACE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,0BAA0B,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAA,EAC1D,IAAI,CAAC,KAAK,GAAG,UAAU,GAAG,EAAE,CACxB;AAET,eACE,CAAA,CAAA,OAAA,EAAA,EACE,KAAK,EAAE,0BAA0B,QAAQ,GAAG,iCAAiC,GAAG,EAAE,CAAA,CAAE,EACpF,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAC,cAAc,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,GACvB,CACH,EAEF,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,yBAAyB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClE,CACD;;;;;;;","names":[],"sources":["src/components/mrd-secret-field/mrd-secret-field.scss?tag=mrd-secret-field&encapsulation=scoped","src/components/mrd-secret-field/mrd-secret-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.mrd-secret-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-1);\n  width: 100%;\n}\n\n.mrd-secret-field__label {\n  display: block;\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-label-font-size);\n  font-weight: var(--mrd-label-font-weight);\n  color: var(--mrd-label-color);\n}\n\n.mrd-secret-field__label--required::after {\n  content: ' *';\n  color: var(--mrd-color-danger);\n}\n\n.mrd-secret-field__input {\n  display: block;\n  width: 100%;\n  height: var(--mrd-input-height);\n  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  color: var(--mrd-input-color);\n  background-color: var(--mrd-input-bg);\n  border: var(--mrd-border-width) solid var(--mrd-border-color);\n  border-radius: var(--mrd-border-radius);\n  transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);\n  outline: none;\n  appearance: none;\n  box-sizing: border-box;\n}\n\n.mrd-secret-field__input::placeholder {\n  color: var(--mrd-input-placeholder-color);\n}\n\n.mrd-secret-field__input:focus {\n  border-color: var(--mrd-border-color-focus);\n  box-shadow: var(--mrd-shadow-focus);\n}\n\n.mrd-secret-field__input--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-secret-field__input--error:focus {\n  box-shadow: var(--mrd-shadow-focus-error);\n}\n\n.mrd-secret-field__error {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-error-font-size);\n  color: var(--mrd-error-color);\n}\n\n.mrd-secret-field__masked {\n  display: block;\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  color: var(--mrd-label-color);\n  letter-spacing: 0.15em;\n  user-select: none;\n  pointer-events: none;\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { t } from '../../utils/i18n';\nimport { validateRequired } from '../../utils/validation';\n\n@Component({\n  tag: 'mrd-secret-field',\n  styleUrl: 'mrd-secret-field.scss',\n  scoped: true,\n})\nexport class MrdSecretField {\n  @Prop() name: string = '';\n  @Prop() label: string = '';\n  @Prop() value: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() required: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() locale: string = navigator.language;\n\n  @State() error: string = '';\n\n  @Event() mrdChange!: EventEmitter<{ name: string; value: string }>;\n  @Event() mrdBlur!: EventEmitter<{ name: string; value: string }>;\n\n  private handleInput = (e: Event) => {\n    const val = (e.target as HTMLInputElement).value;\n    this.mrdChange.emit({ name: this.name, value: val });\n  };\n\n  private handleBlur = (e: Event) => {\n    const val = (e.target as HTMLInputElement).value;\n    if (this.required && !validateRequired(val)) {\n      this.error = t('required', this.locale);\n    } else {\n      this.error = '';\n    }\n    this.mrdBlur.emit({ name: this.name, value: val });\n  };\n\n  render() {\n    const hasError = !!this.error;\n    return (\n      <Host>\n        <div class=\"mrd-secret-field\">\n          {this.label && (\n            <label class={`mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}`}>\n              {this.label}\n            </label>\n          )}\n          {this.disabled\n            ? (\n              <span class=\"mrd-secret-field__masked\" aria-label={this.label}>\n                {this.value ? '••••••••' : ''}\n              </span>\n            )\n            : (\n              <input\n                class={`mrd-secret-field__input${hasError ? ' mrd-secret-field__input--error' : ''}`}\n                type=\"password\"\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                required={this.required}\n                autocomplete=\"new-password\"\n                onInput={this.handleInput}\n                onBlur={this.handleBlur}\n              />\n            )\n          }\n          {hasError && <span class=\"mrd-secret-field__error\">{this.error}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}