@mmlogic/components 0.3.6 → 0.3.8

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

@@ -1,107 +0,0 @@
-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 mrdListFieldScss = () => `.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)}`;
-
-const MrdListField = 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.required = false;
-        this.disabled = false;
-        this.multiple = false;
-        this.locale = navigator.language;
-        /** List items from the API. Each item has a `key` (stored value) and `label`. */
-        this.listItems = [];
-        this.error = '';
-        this.selected = [];
-        this.handleSelectChange = (e) => {
-            const select = e.target;
-            if (this.multiple) {
-                const vals = Array.from(select.selectedOptions).map(o => o.value);
-                this.selected = vals;
-                if (this.required && !validateRequired(vals)) {
-                    this.error = t('required', this.locale);
-                }
-                else {
-                    this.error = '';
-                }
-                this.mrdChange.emit({ name: this.name, value: vals });
-            }
-            else {
-                const val = select.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 = () => {
-            const val = this.multiple ? this.selected : this.value;
-            this.mrdBlur.emit({ name: this.name, value: val });
-        };
-        this.toggleCheckbox = (key) => {
-            if (this.selected.includes(key)) {
-                this.selected = this.selected.filter(v => v !== key);
-            }
-            else {
-                this.selected = [...this.selected, key];
-            }
-            if (this.required && !validateRequired(this.selected)) {
-                this.error = t('required', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            this.mrdChange.emit({ name: this.name, value: this.selected });
-        };
-    }
-    componentWillLoad() {
-        if (this.multiple) {
-            this.selected = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
-        }
-    }
-    getContrastColor(bgColor) {
-        if (!bgColor)
-            return '#000000';
-        const hex = bgColor.replace('#', '');
-        const r = parseInt(hex.substr(0, 2), 16);
-        const g = parseInt(hex.substr(2, 2), 16);
-        const b = parseInt(hex.substr(4, 2), 16);
-        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-        return luminance > 0.5 ? '#000000' : '#ffffff';
-    }
-    render() {
-        var _a, _b;
-        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) {
-            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))));
-        }
-        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))));
-    }
-};
-MrdListField.style = mrdListFieldScss();
-
-export { MrdListField as mrd_list_field };
-//# sourceMappingURL=mrd-list-field.entry.esm.js.map
-
-//# sourceMappingURL=mrd-list-field.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"mrd-list-field.entry.js","mappings":"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","names":[],"sources":["src/components/mrd-list-field/mrd-list-field.scss?tag=mrd-list-field&encapsulation=scoped","src/components/mrd-list-field/mrd-list-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.mrd-list-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-1);\n  width: 100%;\n}\n\n.mrd-list-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-list-field__label--required::after {\n  content: ' *';\n  color: var(--mrd-color-danger);\n}\n\n.mrd-list-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  transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);\n  outline: none;\n  appearance: none;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n\n.mrd-list-field__select:focus {\n  border-color: var(--mrd-border-color-focus);\n  box-shadow: var(--mrd-shadow-focus);\n}\n\n.mrd-list-field__select:disabled {\n  background-color: var(--mrd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.mrd-list-field__select--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-list-field__select--error:focus {\n  box-shadow: var(--mrd-shadow-focus-error);\n}\n\n.mrd-list-field__checkbox-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-2);\n  padding: var(--mrd-space-3);\n  border: var(--mrd-border-width) solid var(--mrd-border-color);\n  border-radius: var(--mrd-border-radius);\n  background-color: var(--mrd-input-bg);\n}\n\n.mrd-list-field__checkbox-list--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-list-field__checkbox-item {\n  display: flex;\n  align-items: center;\n  gap: var(--mrd-space-2);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  color: var(--mrd-input-color);\n  cursor: pointer;\n}\n\n.mrd-list-field__checkbox-item input[type='checkbox'] {\n  width: 1rem;\n  height: 1rem;\n  cursor: pointer;\n  accent-color: var(--mrd-color-primary);\n}\n\n.mrd-list-field__color-dot {\n  display: inline-block;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.mrd-list-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 } from '@stencil/core';\nimport { t } from '../../utils/i18n';\nimport { validateRequired } from '../../utils/validation';\nimport { ClientListValue } from '../../types';\n\n@Component({\n  tag: 'mrd-list-field',\n  styleUrl: 'mrd-list-field.scss',\n  scoped: true,\n})\nexport class MrdListField {\n  @Prop() name: string = '';\n  @Prop() label: string = '';\n  @Prop() value: string | string[] = '';\n  @Prop() required: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() multiple: boolean = false;\n  @Prop() locale: string = navigator.language;\n  /** List items from the API. Each item has a `key` (stored value) and `label`. */\n  @Prop() listItems: ClientListValue[] = [];\n\n  @State() error: string = '';\n  @State() selected: string[] = [];\n\n  @Event() mrdChange!: EventEmitter<{ name: string; value: string | string[] }>;\n  @Event() mrdBlur!: EventEmitter<{ name: string; value: string | string[] }>;\n\n  componentWillLoad() {\n    if (this.multiple) {\n      this.selected = Array.isArray(this.value) ? this.value : this.value ? [this.value as string] : [];\n    }\n  }\n\n  private handleSelectChange = (e: Event) => {\n    const select = e.target as HTMLSelectElement;\n    if (this.multiple) {\n      const vals = Array.from(select.selectedOptions).map(o => o.value);\n      this.selected = vals;\n      if (this.required && !validateRequired(vals)) {\n        this.error = t('required', this.locale);\n      } else {\n        this.error = '';\n      }\n      this.mrdChange.emit({ name: this.name, value: vals });\n    } else {\n      const val = select.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\n  private handleBlur = () => {\n    const val = this.multiple ? this.selected : (this.value as string);\n    this.mrdBlur.emit({ name: this.name, value: val });\n  };\n\n  private toggleCheckbox = (key: string) => {\n    if (this.selected.includes(key)) {\n      this.selected = this.selected.filter(v => v !== key);\n    } else {\n      this.selected = [...this.selected, key];\n    }\n    if (this.required && !validateRequired(this.selected)) {\n      this.error = t('required', this.locale);\n    } else {\n      this.error = '';\n    }\n    this.mrdChange.emit({ name: this.name, value: this.selected });\n  };\n\n  private getContrastColor(bgColor: string): string {\n    if (!bgColor) return '#000000';\n    const hex = bgColor.replace('#', '');\n    const r = parseInt(hex.substr(0, 2), 16);\n    const g = parseInt(hex.substr(2, 2), 16);\n    const b = parseInt(hex.substr(4, 2), 16);\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n    return luminance > 0.5 ? '#000000' : '#ffffff';\n  }\n\n  render() {\n    const hasError    = !!this.error;\n    const currentValue = Array.isArray(this.value) ? (this.value[0] ?? '') : (this.value ?? '');\n\n    if (this.multiple) {\n      return (\n        <Host>\n          <div class=\"mrd-list-field\">\n            {this.label && (\n              <label class={`mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}`}>\n                {this.label}\n              </label>\n            )}\n            <div class={`mrd-list-field__checkbox-list${hasError ? ' mrd-list-field__checkbox-list--error' : ''}`}>\n              {this.listItems.map(lv => (\n                <label key={lv.key} class=\"mrd-list-field__checkbox-item\">\n                  <input\n                    type=\"checkbox\"\n                    checked={this.selected.includes(lv.key)}\n                    disabled={this.disabled}\n                    onChange={() => this.toggleCheckbox(lv.key)}\n                  />\n                  {(lv.color || lv.backgroundColor) && (\n                    <span\n                      class=\"mrd-list-field__color-dot\"\n                      style={{ backgroundColor: lv.backgroundColor ?? lv.color ?? '' }}\n                    ></span>\n                  )}\n                  <span>{lv.label}</span>\n                </label>\n              ))}\n            </div>\n            {hasError && <span class=\"mrd-list-field__error\">{this.error}</span>}\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"mrd-list-field\">\n          {this.label && (\n            <label class={`mrd-list-field__label${this.required ? ' mrd-list-field__label--required' : ''}`}>\n              {this.label}\n            </label>\n          )}\n          <select\n            class={`mrd-list-field__select${hasError ? ' mrd-list-field__select--error' : ''}`}\n            name={this.name}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleSelectChange}\n            onBlur={this.handleBlur}\n          >\n            <option value=\"\">{t('select_placeholder', this.locale)}</option>\n            {this.listItems.map(lv => {\n              const bg    = lv.backgroundColor ?? lv.color ?? null;\n              const style = bg ? { backgroundColor: bg, color: this.getContrastColor(bg) } : {};\n              return (\n                <option\n                  key={lv.key}\n                  value={lv.key}\n                  selected={lv.key === currentValue}\n                  style={style}\n                >\n                  {lv.label}\n                </option>\n              );\n            })}\n          </select>\n          {hasError && <span class=\"mrd-list-field__error\">{this.error}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,47 +0,0 @@
-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 mrdLongtextFieldScss = () => `.sc-mrd-longtext-field-h{display:block}.mrd-longtext-field.sc-mrd-longtext-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-longtext-field__label.sc-mrd-longtext-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-longtext-field__label--required.sc-mrd-longtext-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-longtext-field__input.sc-mrd-longtext-field{display:block;width:100%;min-height:calc(var(--mrd-input-height) * 5);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;resize:vertical;box-sizing:border-box;line-height:1.5}.mrd-longtext-field__input.sc-mrd-longtext-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-longtext-field__input.sc-mrd-longtext-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-longtext-field__input--error.sc-mrd-longtext-field{border-color:var(--mrd-border-color-error)}.mrd-longtext-field__input--error.sc-mrd-longtext-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-longtext-field__content.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);white-space:pre-wrap;word-break:break-word;margin:0;padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);background-color:var(--mrd-input-bg-disabled);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);line-height:1.5}.mrd-longtext-field__error.sc-mrd-longtext-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
-
-const MrdLongtextField = 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: '10d998b80f54cf7b10be26bf451d808c78579e69' }, h("div", { key: 'af45fe94a41f668bf6ddca670b42e065ee83ef23', class: "mrd-longtext-field" }, this.label && (h("label", { key: '31a08490d695ac9f4bbe5dff6a1ae3bb2a94337d', class: `mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}` }, this.label)), this.disabled ? (h("pre", { class: "mrd-longtext-field__content" }, this.value)) : (h("textarea", { class: `mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`, name: this.name, placeholder: this.placeholder, required: this.required, rows: 10, onInput: this.handleInput, onBlur: this.handleBlur }, this.value)), hasError && h("span", { key: '7f133e72a882a8aaf33245445829754da1e6377b', class: "mrd-longtext-field__error" }, this.error))));
-    }
-};
-MrdLongtextField.style = mrdLongtextFieldScss();
-
-export { MrdLongtextField as mrd_longtext_field };
-//# sourceMappingURL=mrd-longtext-field.entry.esm.js.map
-
-//# sourceMappingURL=mrd-longtext-field.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"mrd-longtext-field.entry.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,4/DAA4/D,CAAC;;MCSphE,gBAAgB,GAAA,MAAA;AAL7B,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,MAA8B,CAAC,KAAK;AACnD,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,MAA8B,CAAC,KAAK;YACnD,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;AA8BF;IA5BC,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,oBAAoB,EAAA,EAC5B,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,CAAA,yBAAA,EAA4B,IAAI,CAAC,QAAQ,GAAG,sCAAsC,GAAG,EAAE,CAAA,CAAE,EAAA,EACpG,IAAI,CAAC,KAAK,CACL,CACT,EACA,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAO,KAE3D,CAAA,CAAA,UAAA,EAAA,EACE,KAAK,EAAE,CAAA,yBAAA,EAA4B,QAAQ,GAAG,mCAAmC,GAAG,EAAE,CAAA,CAAE,EACxF,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,EACvB,IAAI,CAAC,KAAK,CAAY,CACzB,EACA,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,2BAA2B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACpE,CACD;;;;;;;","names":[],"sources":["src/components/mrd-longtext-field/mrd-longtext-field.scss?tag=mrd-longtext-field&encapsulation=scoped","src/components/mrd-longtext-field/mrd-longtext-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.mrd-longtext-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-1);\n  width: 100%;\n}\n\n.mrd-longtext-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-longtext-field__label--required::after {\n  content: ' *';\n  color: var(--mrd-color-danger);\n}\n\n.mrd-longtext-field__input {\n  display: block;\n  width: 100%;\n  min-height: calc(var(--mrd-input-height) * 5);\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  resize: vertical;\n  box-sizing: border-box;\n  line-height: 1.5;\n}\n\n.mrd-longtext-field__input::placeholder {\n  color: var(--mrd-input-placeholder-color);\n}\n\n.mrd-longtext-field__input:focus {\n  border-color: var(--mrd-border-color-focus);\n  box-shadow: var(--mrd-shadow-focus);\n}\n\n.mrd-longtext-field__input--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-longtext-field__input--error:focus {\n  box-shadow: var(--mrd-shadow-focus-error);\n}\n\n.mrd-longtext-field__content {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  color: var(--mrd-input-color);\n  white-space: pre-wrap;\n  word-break: break-word;\n  margin: 0;\n  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);\n  background-color: var(--mrd-input-bg-disabled);\n  border: var(--mrd-border-width) solid var(--mrd-border-color);\n  border-radius: var(--mrd-border-radius);\n  line-height: 1.5;\n}\n\n.mrd-longtext-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 } from '@stencil/core';\nimport { t } from '../../utils/i18n';\nimport { validateRequired } from '../../utils/validation';\n\n@Component({\n  tag: 'mrd-longtext-field',\n  styleUrl: 'mrd-longtext-field.scss',\n  scoped: true,\n})\nexport class MrdLongtextField {\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 HTMLTextAreaElement).value;\n    this.mrdChange.emit({ name: this.name, value: val });\n  };\n\n  private handleBlur = (e: Event) => {\n    const val = (e.target as HTMLTextAreaElement).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-longtext-field\">\n          {this.label && (\n            <label class={`mrd-longtext-field__label${this.required ? ' mrd-longtext-field__label--required' : ''}`}>\n              {this.label}\n            </label>\n          )}\n          {this.disabled ? (\n            <pre class=\"mrd-longtext-field__content\">{this.value}</pre>\n          ) : (\n            <textarea\n              class={`mrd-longtext-field__input${hasError ? ' mrd-longtext-field__input--error' : ''}`}\n              name={this.name}\n              placeholder={this.placeholder}\n              required={this.required}\n              rows={10}\n              onInput={this.handleInput}\n              onBlur={this.handleBlur}\n            >{this.value}</textarea>\n          )}\n          {hasError && <span class=\"mrd-longtext-field__error\">{this.error}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,87 +0,0 @@
-import { r as registerInstance, a as createEvent, h, d as Host } from './index-B_tPFIvS.js';
-import { t } from './i18n-hoGGKbKU.js';
-import { c as validateNumber, v as validateRequired } from './validation-ixb43cqU.js';
-import { p as parseLocalizedNumber, a as formatNumber } from './format-BAfsQfy1.js';
-import './index-I5SuYv7a.js';
-import { b as ClientLayoutItemFieldDataType } from './client-layout-D88nn5zf.js';
-
-const mrdNumberFieldScss = () => `.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)}`;
-
-const MrdNumberField = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdChange = createEvent(this, "mrdChange", 7);
-        this.mrdBlur = createEvent(this, "mrdBlur", 7);
-        this.name = '';
-        this.label = '';
-        this.value = null;
-        this.placeholder = '';
-        this.required = false;
-        this.disabled = false;
-        this.locale = navigator.language;
-        this.dataType = ClientLayoutItemFieldDataType.INTEGER;
-        this.decimalPrecision = 2;
-        this.displayValue = '';
-        this.error = '';
-        this.handleInput = (e) => {
-            this.displayValue = e.target.value;
-        };
-        this.handleBlur = (e) => {
-            const raw = e.target.value;
-            const parsed = parseLocalizedNumber(raw, this.locale);
-            if (this.required && (parsed === null || raw === '')) {
-                this.error = t('required', this.locale);
-            }
-            else if (raw !== '' && !validateNumber(parsed, this.dataType)) {
-                this.error = t('invalid_number', this.locale);
-            }
-            else {
-                this.error = '';
-            }
-            if (parsed !== null && validateRequired(raw)) {
-                this.displayValue = this.formatForDisplay(parsed);
-            }
-            this.mrdChange.emit({ name: this.name, value: parsed });
-            this.mrdBlur.emit({ name: this.name, value: parsed });
-        };
-        this.handleFocus = () => {
-            // Show raw number on focus
-            if (this.value !== null && this.value !== undefined) {
-                const str = String(this.value);
-                this.displayValue = str;
-            }
-        };
-    }
-    componentWillLoad() {
-        if (this.value !== null && this.value !== undefined) {
-            this.displayValue = this.formatForDisplay(this.value);
-        }
-    }
-    formatForDisplay(val) {
-        if (this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE) {
-            return formatNumber(val, this.locale, {
-                minimumFractionDigits: 0,
-                maximumFractionDigits: this.decimalPrecision,
-            }) + '%';
-        }
-        if (this.dataType === ClientLayoutItemFieldDataType.DECIMAL) {
-            return formatNumber(val, this.locale, {
-                minimumFractionDigits: this.decimalPrecision,
-                maximumFractionDigits: this.decimalPrecision,
-            });
-        }
-        return formatNumber(val, this.locale, { maximumFractionDigits: 0 });
-    }
-    render() {
-        const hasError = !!this.error;
-        const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
-            this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: '195beed4d6453597320b79654feaabe8f742eff2' }, h("div", { key: 'c641d7a4d27ba28dd34acda98d38f245945d20bb', class: "mrd-number-field" }, this.label && (h("label", { key: '2a5f6eb48889a3ab0aa76d6b2ca5d59b20625bb2', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: 'a844b89e6a278629a8aefa4ac72e5e18e5904cab', class: "mrd-number-field__input-wrapper" }, h("input", { key: '1ce9c3d67b458601a0de95b3b8478ef05df73069', class: `mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`, type: "text", inputMode: "decimal", name: this.name, value: this.displayValue, placeholder: this.placeholder || (suffix ? `0${suffix}` : '0'), required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus })), hasError && h("span", { key: '4226614a65a8d27543d1287e2c1f61f67c427e63', class: "mrd-number-field__error" }, this.error))));
-    }
-};
-MrdNumberField.style = mrdNumberFieldScss();
-
-export { MrdNumberField as mrd_number_field };
-//# sourceMappingURL=mrd-number-field.entry.esm.js.map
-
-//# sourceMappingURL=mrd-number-field.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"mrd-number-field.entry.js","mappings":"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","names":[],"sources":["src/components/mrd-number-field/mrd-number-field.scss?tag=mrd-number-field&encapsulation=scoped","src/components/mrd-number-field/mrd-number-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.mrd-number-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-1);\n  width: 100%;\n}\n\n.mrd-number-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-number-field__label--required::after {\n  content: ' *';\n  color: var(--mrd-color-danger);\n}\n\n.mrd-number-field__input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.mrd-number-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  text-align: right;\n}\n\n.mrd-number-field__input::placeholder {\n  color: var(--mrd-input-placeholder-color);\n  text-align: left;\n}\n\n.mrd-number-field__input:focus {\n  border-color: var(--mrd-border-color-focus);\n  box-shadow: var(--mrd-shadow-focus);\n}\n\n.mrd-number-field__input:disabled {\n  background-color: var(--mrd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.mrd-number-field__input--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-number-field__input--error:focus {\n  box-shadow: var(--mrd-shadow-focus-error);\n}\n\n.mrd-number-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 } from '@stencil/core';\nimport { t } from '../../utils/i18n';\nimport { validateRequired, validateNumber } from '../../utils/validation';\nimport { formatNumber, parseLocalizedNumber } from '../../utils/format';\nimport { ClientLayoutItemFieldDataType } from '../../types';\n\n@Component({\n  tag: 'mrd-number-field',\n  styleUrl: 'mrd-number-field.scss',\n  scoped: true,\n})\nexport class MrdNumberField {\n  @Prop() name: string = '';\n  @Prop() label: string = '';\n  @Prop() value: number | null = null;\n  @Prop() placeholder: string = '';\n  @Prop() required: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() locale: string = navigator.language;\n  @Prop() dataType: ClientLayoutItemFieldDataType = ClientLayoutItemFieldDataType.INTEGER;\n  @Prop() decimalPrecision: number = 2;\n\n  @State() displayValue: string = '';\n  @State() error: string = '';\n\n  @Event() mrdChange!: EventEmitter<{ name: string; value: number | null }>;\n  @Event() mrdBlur!: EventEmitter<{ name: string; value: number | null }>;\n\n  componentWillLoad() {\n    if (this.value !== null && this.value !== undefined) {\n      this.displayValue = this.formatForDisplay(this.value);\n    }\n  }\n\n  private formatForDisplay(val: number): string {\n    if (this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE) {\n      return formatNumber(val, this.locale, {\n        minimumFractionDigits: 0,\n        maximumFractionDigits: this.decimalPrecision,\n      }) + '%';\n    }\n    if (this.dataType === ClientLayoutItemFieldDataType.DECIMAL) {\n      return formatNumber(val, this.locale, {\n        minimumFractionDigits: this.decimalPrecision,\n        maximumFractionDigits: this.decimalPrecision,\n      });\n    }\n    return formatNumber(val, this.locale, { maximumFractionDigits: 0 });\n  }\n\n  private handleInput = (e: Event) => {\n    this.displayValue = (e.target as HTMLInputElement).value;\n  };\n\n  private handleBlur = (e: Event) => {\n    const raw = (e.target as HTMLInputElement).value;\n    const parsed = parseLocalizedNumber(raw, this.locale);\n\n    if (this.required && (parsed === null || raw === '')) {\n      this.error = t('required', this.locale);\n    } else if (raw !== '' && !validateNumber(parsed, this.dataType)) {\n      this.error = t('invalid_number', this.locale);\n    } else {\n      this.error = '';\n    }\n\n    if (parsed !== null && validateRequired(raw)) {\n      this.displayValue = this.formatForDisplay(parsed);\n    }\n\n    this.mrdChange.emit({ name: this.name, value: parsed });\n    this.mrdBlur.emit({ name: this.name, value: parsed });\n  };\n\n  private handleFocus = () => {\n    // Show raw number on focus\n    if (this.value !== null && this.value !== undefined) {\n      const str = String(this.value);\n      this.displayValue = str;\n    }\n  };\n\n  render() {\n    const hasError = !!this.error;\n    const suffix =\n      this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :\n      this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';\n\n    return (\n      <Host>\n        <div class=\"mrd-number-field\">\n          {this.label && (\n            <label class={`mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}`}>\n              {this.label}\n            </label>\n          )}\n          <div class=\"mrd-number-field__input-wrapper\">\n            <input\n              class={`mrd-number-field__input${hasError ? ' mrd-number-field__input--error' : ''}`}\n              type=\"text\"\n              inputMode=\"decimal\"\n              name={this.name}\n              value={this.displayValue}\n              placeholder={this.placeholder || (suffix ? `0${suffix}` : '0')}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.handleInput}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </div>\n          {hasError && <span class=\"mrd-number-field__error\">{this.error}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,267 +0,0 @@
-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