@mmlogic/components 0.5.7 → 0.5.9

package/dist/cjs/mrd-boolean-field_25.cjs.entry.js

@@ -114,7 +114,10 @@ const MrdCurrencyField = class {
         this.mrdBlur = index.createEvent(this, "mrdBlur");
         this.name = '';
         this.label = '';
-        this.value = { amount: null, currency: 'EUR' };
+        /** Accepts a partial object on the way in (hosts pre-fill the currency from the layout's
+         *  currencyCode before an amount exists); on the way out only null or a complete object
+         *  is ever emitted — see handleAmountBlur. */
+        this.value = null;
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
@@ -141,14 +144,15 @@ const MrdCurrencyField = class {
             const parsed = cellRenderer.parseLocalizedNumber(raw, this.locale);
             this.error = requiredError(raw, this.required, this.locale);
             this.amountDisplay = parsed !== null ? this.formatAmount(parsed) : '';
-            const val = { amount: parsed, currency: this.currency };
+            const val = this.currentValue(parsed);
             this.mrdChange.emit({ name: this.name, value: val });
             this.mrdBlur.emit({ name: this.name, value: val });
         };
         this.handleCurrencyChange = (e) => {
             this.currency = e.target.value;
             const parsed = cellRenderer.parseLocalizedNumber(this.amountDisplay, this.locale);
-            this.mrdChange.emit({ name: this.name, value: { amount: parsed, currency: this.currency } });
+            // Picking a currency for an empty amount does not make the field filled in.
+            this.mrdChange.emit({ name: this.name, value: this.currentValue(parsed) });
         };
     }
     componentWillLoad() {
@@ -186,9 +190,16 @@ const MrdCurrencyField = class {
     formatAmount(amount) {
         return cellRenderer.formatNumber(amount, this.locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
     }
+    /** Emit either a complete value or nothing at all. A half-filled
+     *  { amount: null, currency } reaches the API as a currency object without an amount,
+     *  which it cannot store — and it makes clearing an optional amount impossible, because
+     *  the field would never report itself as empty (FINDING-0141 / TASK-0234). */
+    currentValue(amount) {
+        return amount === null ? null : { amount, currency: this.currency };
+    }
     render() {
         const hasError = !!this.error;
-        return (index.h(index.Host, { key: '43ef1fe660c4eaef025203544916b077975b6aa3' }, index.h("div", { key: '00b8e79182c8e2a353d57ad5c341024caf00d4ea', class: "mrd-currency-field" }, index.h(FieldLabel, { key: '96835c311e0d490864c484b818f1dcc623f488b2', base: "mrd-currency-field", label: this.label, required: this.required }), index.h("div", { key: '80317cfe562af00cc4cbf9aabf4bac2126cf6fe5', class: "mrd-currency-field__row" }, index.h("input", { key: '1983ef1e4d19e0fc529cf5e8be7d287fea36620a', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: this.formatAmount(0), required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onFocus: this.handleAmountFocus, onBlur: this.handleAmountBlur }), index.h("select", { key: 'b5fe3f03590bebaa564d76bc5fcb47c327eacece', class: "mrd-currency-field__currency", ref: el => (this.selectEl = el), disabled: this.disabled, onChange: this.handleCurrencyChange }, this.currencyOptions().map(c => (index.h("option", { key: c, value: c, selected: c === this.currency }, c))))), index.h(FieldError, { key: '1a128b26293170d4137f787622d4e89a23e62c0b', base: "mrd-currency-field", error: this.error }))));
+        return (index.h(index.Host, { key: '9529c8ff013107056ea549f70f10016dec00cff6' }, index.h("div", { key: 'eef1f1400cc9b1f87353413f3f476b028bf3ecbf', class: "mrd-currency-field" }, index.h(FieldLabel, { key: '76004f615bda7669814d4b5f55c4ec54ae078e12', base: "mrd-currency-field", label: this.label, required: this.required }), index.h("div", { key: '03a2ec6ada9b2e185e247a228225aed3b67a5bec', class: "mrd-currency-field__row" }, index.h("input", { key: 'ee9004f4cc306c8a9f417812b573e000c055c09c', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: this.formatAmount(0), required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onFocus: this.handleAmountFocus, onBlur: this.handleAmountBlur }), index.h("select", { key: '06547e3716881b3c574c6355eef56a92983470bb', class: "mrd-currency-field__currency", ref: el => (this.selectEl = el), disabled: this.disabled, onChange: this.handleCurrencyChange }, this.currencyOptions().map(c => (index.h("option", { key: c, value: c, selected: c === this.currency }, c))))), index.h(FieldError, { key: '4cbab3a887fece60ae31baccb24e3b68ecf1b947', base: "mrd-currency-field", error: this.error }))));
     }
     static get watchers() { return {
         "value": [{
@@ -4165,7 +4176,12 @@ const MrdField = class {
             case clientLayout.ClientLayoutItemFieldDataType.PERCENTAGE:
                 return (index.h("mrd-number-field", Object.assign({}, commonProps, { value: (_f = displayValue) !== null && _f !== void 0 ? _f : null, dataType: item.dataType, decimalPrecision: (_g = item.decimalPrecision) !== null && _g !== void 0 ? _g : 2, placeholder: (_h = item.placeholder) !== null && _h !== void 0 ? _h : '' })));
             case clientLayout.ClientLayoutItemFieldDataType.CURRENCY:
-                return (index.h("mrd-currency-field", Object.assign({}, commonProps, { value: (_j = displayValue) !== null && _j !== void 0 ? _j : { amount: null, currency: (_k = item.currencyCode) !== null && _k !== void 0 ? _k : 'EUR' } })));
+                return (index.h("mrd-currency-field", Object.assign({}, commonProps, {
+                    // Input-only fallback: it preselects the layout's currencyCode in the dropdown
+                    // before an amount exists. The field never emits this shape back — an empty
+                    // amount emits null (FINDING-0141).
+                    value: (_j = displayValue) !== null && _j !== void 0 ? _j : { amount: null, currency: (_k = item.currencyCode) !== null && _k !== void 0 ? _k : 'EUR' }
+                })));
             case clientLayout.ClientLayoutItemFieldDataType.BOOLEAN:
                 return (index.h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_l = displayValue) !== null && _l !== void 0 ? _l : false })));
             case clientLayout.ClientLayoutItemFieldDataType.DATE:
@@ -6885,15 +6901,20 @@ const MrdTable = class {
             return null;
         return Array.from(ths).map(th => Math.round(th.getBoundingClientRect().width));
     }
-    /** Locks the columns at their current rendered widths if they aren't locked yet. */
-    ensureColWidths() {
-        if (this.colWidths.length === this.columns.length)
-            return true;
+    /** Re-reads the rendered header widths into colWidths so a drag starts from what is
+     *  actually on screen — and locks the columns if they weren't locked yet.
+     *
+     *  A table narrower than its container is stretched by `minWidth: 100%`, so the rendered
+     *  columns are wider than the auto-measured values held in colWidths. Dragging from those
+     *  stale values moved the grabbed column to the wrong width, and dropping the stretch (which
+     *  a hand-set width does) then re-laid out every other column at once. */
+    syncColWidths() {
         const measured = this.measureColWidths();
-        if (!measured)
-            return false;
-        this.colWidths = measured;
-        return true;
+        if (measured) {
+            this.colWidths = measured;
+            return true;
+        }
+        return this.colWidths.length === this.columns.length;
     }
     setColWidth(idx, width) {
         const next = [...this.colWidths];
@@ -6906,7 +6927,7 @@ const MrdTable = class {
         // Stop the header's own click/sort handling; the drag owns this gesture.
         e.preventDefault();
         e.stopPropagation();
-        if (!this.ensureColWidths())
+        if (!this.syncColWidths())
             return;
         this.resizeOrigin = { idx, startX: e.clientX, startWidth: this.colWidths[idx] };
         this.resizingCol = idx;
@@ -6934,7 +6955,7 @@ const MrdTable = class {
     handleResizeAutoFit(e, idx) {
         e.preventDefault();
         e.stopPropagation();
-        if (!this.ensureColWidths())
+        if (!this.syncColWidths())
             return;
         // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
         // colSpan cell (without that class) which would otherwise measure as the full table width.

package/dist/collection/components/fields/mrd-currency-field/mrd-currency-field.js

@@ -10,7 +10,10 @@ export class MrdCurrencyField {
     constructor() {
         this.name = '';
         this.label = '';
-        this.value = { amount: null, currency: 'EUR' };
+        /** Accepts a partial object on the way in (hosts pre-fill the currency from the layout's
+         *  currencyCode before an amount exists); on the way out only null or a complete object
+         *  is ever emitted — see handleAmountBlur. */
+        this.value = null;
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
@@ -37,14 +40,15 @@ export class MrdCurrencyField {
             const parsed = parseLocalizedNumber(raw, this.locale);
             this.error = requiredError(raw, this.required, this.locale);
             this.amountDisplay = parsed !== null ? this.formatAmount(parsed) : '';
-            const val = { amount: parsed, currency: this.currency };
+            const val = this.currentValue(parsed);
             this.mrdChange.emit({ name: this.name, value: val });
             this.mrdBlur.emit({ name: this.name, value: val });
         };
         this.handleCurrencyChange = (e) => {
             this.currency = e.target.value;
             const parsed = parseLocalizedNumber(this.amountDisplay, this.locale);
-            this.mrdChange.emit({ name: this.name, value: { amount: parsed, currency: this.currency } });
+            // Picking a currency for an empty amount does not make the field filled in.
+            this.mrdChange.emit({ name: this.name, value: this.currentValue(parsed) });
         };
     }
     componentWillLoad() {
@@ -82,9 +86,16 @@ export class MrdCurrencyField {
     formatAmount(amount) {
         return formatNumber(amount, this.locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
     }
+    /** Emit either a complete value or nothing at all. A half-filled
+     *  { amount: null, currency } reaches the API as a currency object without an amount,
+     *  which it cannot store — and it makes clearing an optional amount impossible, because
+     *  the field would never report itself as empty (FINDING-0141 / TASK-0234). */
+    currentValue(amount) {
+        return amount === null ? null : { amount, currency: this.currency };
+    }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '43ef1fe660c4eaef025203544916b077975b6aa3' }, h("div", { key: '00b8e79182c8e2a353d57ad5c341024caf00d4ea', class: "mrd-currency-field" }, h(FieldLabel, { key: '96835c311e0d490864c484b818f1dcc623f488b2', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '80317cfe562af00cc4cbf9aabf4bac2126cf6fe5', class: "mrd-currency-field__row" }, h("input", { key: '1983ef1e4d19e0fc529cf5e8be7d287fea36620a', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: this.formatAmount(0), required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onFocus: this.handleAmountFocus, onBlur: this.handleAmountBlur }), h("select", { key: 'b5fe3f03590bebaa564d76bc5fcb47c327eacece', class: "mrd-currency-field__currency", ref: el => (this.selectEl = el), disabled: this.disabled, onChange: this.handleCurrencyChange }, this.currencyOptions().map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: '1a128b26293170d4137f787622d4e89a23e62c0b', base: "mrd-currency-field", error: this.error }))));
+        return (h(Host, { key: '9529c8ff013107056ea549f70f10016dec00cff6' }, h("div", { key: 'eef1f1400cc9b1f87353413f3f476b028bf3ecbf', class: "mrd-currency-field" }, h(FieldLabel, { key: '76004f615bda7669814d4b5f55c4ec54ae078e12', base: "mrd-currency-field", label: this.label, required: this.required }), h("div", { key: '03a2ec6ada9b2e185e247a228225aed3b67a5bec', class: "mrd-currency-field__row" }, h("input", { key: 'ee9004f4cc306c8a9f417812b573e000c055c09c', class: controlClass('mrd-currency-field', hasError, 'amount'), type: "text", inputMode: "decimal", name: `${this.name}_amount`, value: this.amountDisplay, placeholder: this.formatAmount(0), required: this.required, disabled: this.disabled, onInput: this.handleAmountInput, onFocus: this.handleAmountFocus, onBlur: this.handleAmountBlur }), h("select", { key: '06547e3716881b3c574c6355eef56a92983470bb', class: "mrd-currency-field__currency", ref: el => (this.selectEl = el), disabled: this.disabled, onChange: this.handleCurrencyChange }, this.currencyOptions().map(c => (h("option", { key: c, value: c, selected: c === this.currency }, c))))), h(FieldError, { key: '4cbab3a887fece60ae31baccb24e3b68ecf1b947', base: "mrd-currency-field", error: this.error }))));
     }
     static get is() { return "mrd-currency-field"; }
     static get encapsulation() { return "scoped"; }
@@ -144,8 +155,8 @@ export class MrdCurrencyField {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "CurrencyValue",
-                    "resolved": "CurrencyValue",
+                    "original": "CurrencyValue | null",
+                    "resolved": "CurrencyValue | null",
                     "references": {
                         "CurrencyValue": {
                             "location": "import",
@@ -159,11 +170,11 @@ export class MrdCurrencyField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accepts a partial object on the way in (hosts pre-fill the currency from the layout's\ncurrencyCode before an amount exists); on the way out only null or a complete object\nis ever emitted \u2014 see handleAmountBlur."
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{ amount: null, currency: 'EUR' }"
+                "defaultValue": "null"
             },
             "required": {
                 "type": "boolean",
@@ -246,8 +257,8 @@ export class MrdCurrencyField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ name: string; value: CurrencyValue }",
-                    "resolved": "{ name: string; value: CurrencyValue; }",
+                    "original": "{ name: string; value: CurrencyValue | null }",
+                    "resolved": "{ name: string; value: CurrencyValue | null; }",
                     "references": {
                         "CurrencyValue": {
                             "location": "import",
@@ -268,8 +279,8 @@ export class MrdCurrencyField {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ name: string; value: CurrencyValue }",
-                    "resolved": "{ name: string; value: CurrencyValue; }",
+                    "original": "{ name: string; value: CurrencyValue | null }",
+                    "resolved": "{ name: string; value: CurrencyValue | null; }",
                     "references": {
                         "CurrencyValue": {
                             "location": "import",

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

@@ -132,7 +132,12 @@ export class MrdField {
             case ClientLayoutItemFieldDataType.PERCENTAGE:
                 return (h("mrd-number-field", Object.assign({}, commonProps, { value: (_f = displayValue) !== null && _f !== void 0 ? _f : null, dataType: item.dataType, decimalPrecision: (_g = item.decimalPrecision) !== null && _g !== void 0 ? _g : 2, placeholder: (_h = item.placeholder) !== null && _h !== void 0 ? _h : '' })));
             case ClientLayoutItemFieldDataType.CURRENCY:
-                return (h("mrd-currency-field", Object.assign({}, commonProps, { value: (_j = displayValue) !== null && _j !== void 0 ? _j : { amount: null, currency: (_k = item.currencyCode) !== null && _k !== void 0 ? _k : 'EUR' } })));
+                return (h("mrd-currency-field", Object.assign({}, commonProps, {
+                    // Input-only fallback: it preselects the layout's currencyCode in the dropdown
+                    // before an amount exists. The field never emits this shape back — an empty
+                    // amount emits null (FINDING-0141).
+                    value: (_j = displayValue) !== null && _j !== void 0 ? _j : { amount: null, currency: (_k = item.currencyCode) !== null && _k !== void 0 ? _k : 'EUR' }
+                })));
             case ClientLayoutItemFieldDataType.BOOLEAN:
                 return (h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_l = displayValue) !== null && _l !== void 0 ? _l : false })));
             case ClientLayoutItemFieldDataType.DATE:

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

@@ -287,15 +287,20 @@ export class MrdTable {
             return null;
         return Array.from(ths).map(th => Math.round(th.getBoundingClientRect().width));
     }
-    /** Locks the columns at their current rendered widths if they aren't locked yet. */
-    ensureColWidths() {
-        if (this.colWidths.length === this.columns.length)
-            return true;
+    /** Re-reads the rendered header widths into colWidths so a drag starts from what is
+     *  actually on screen — and locks the columns if they weren't locked yet.
+     *
+     *  A table narrower than its container is stretched by `minWidth: 100%`, so the rendered
+     *  columns are wider than the auto-measured values held in colWidths. Dragging from those
+     *  stale values moved the grabbed column to the wrong width, and dropping the stretch (which
+     *  a hand-set width does) then re-laid out every other column at once. */
+    syncColWidths() {
         const measured = this.measureColWidths();
-        if (!measured)
-            return false;
-        this.colWidths = measured;
-        return true;
+        if (measured) {
+            this.colWidths = measured;
+            return true;
+        }
+        return this.colWidths.length === this.columns.length;
     }
     setColWidth(idx, width) {
         const next = [...this.colWidths];
@@ -308,7 +313,7 @@ export class MrdTable {
         // Stop the header's own click/sort handling; the drag owns this gesture.
         e.preventDefault();
         e.stopPropagation();
-        if (!this.ensureColWidths())
+        if (!this.syncColWidths())
             return;
         this.resizeOrigin = { idx, startX: e.clientX, startWidth: this.colWidths[idx] };
         this.resizingCol = idx;
@@ -336,7 +341,7 @@ export class MrdTable {
     handleResizeAutoFit(e, idx) {
         e.preventDefault();
         e.stopPropagation();
-        if (!this.ensureColWidths())
+        if (!this.syncColWidths())
             return;
         // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
         // colSpan cell (without that class) which would otherwise measure as the full table width.

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

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as d,Host as c,transformTag as o}from"@stencil/core/internal/client";import{p as t,f as a}from"./format.js";import{r as s,F as n,c as l,a as m}from"./field-helpers.js";const u=["EUR","USD","GBP","CHF","JPY","CNY","AUD","CAD","SEK","NOK","DKK","NZD","SGD","HKD","PLN","CZK","HUF","MXN","BRL","INR","TRY","ZAR","AED","SAR"],h=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.name="",this.label="",this.value={amount:null,currency:"EUR"},this.required=!1,this.disabled=!1,this.locale=navigator.language,this.amountDisplay="",this.currency="EUR",this.error="",this.focused=!1,this.handleAmountInput=r=>{this.amountDisplay=r.target.value},this.handleAmountFocus=()=>{this.focused=!0;const r=t(this.amountDisplay,this.locale);null!==r&&(this.amountDisplay=a(r,this.locale,{useGrouping:!1,maximumFractionDigits:20}))},this.handleAmountBlur=r=>{this.focused=!1;const e=r.target.value,i=t(e,this.locale);this.error=s(e,this.required,this.locale),this.amountDisplay=null!==i?this.formatAmount(i):"";const d={amount:i,currency:this.currency};this.mrdChange.emit({name:this.name,value:d}),this.mrdBlur.emit({name:this.name,value:d})},this.handleCurrencyChange=r=>{this.currency=r.target.value;const e=t(this.amountDisplay,this.locale);this.mrdChange.emit({name:this.name,value:{amount:e,currency:this.currency}})}}componentWillLoad(){this.syncFromValue()}componentDidRender(){this.selectEl&&this.selectEl.value!==this.currency&&(this.selectEl.value=this.currency)}currencyOptions(){return u.includes(this.currency)?u:[this.currency,...u]}valueChanged(){this.focused||this.syncFromValue()}localeChanged(){this.focused||this.syncFromValue()}syncFromValue(){const r=this.value;this.currency=(null==r?void 0:r.currency)||"EUR",this.amountDisplay=null!=(null==r?void 0:r.amount)?this.formatAmount(r.amount):""}formatAmount(r){return a(r,this.locale,{minimumFractionDigits:2,maximumFractionDigits:2})}render(){const r=!!this.error;return d(c,{key:"43ef1fe660c4eaef025203544916b077975b6aa3"},d("div",{key:"00b8e79182c8e2a353d57ad5c341024caf00d4ea",class:"mrd-currency-field"},d(n,{key:"96835c311e0d490864c484b818f1dcc623f488b2",base:"mrd-currency-field",label:this.label,required:this.required}),d("div",{key:"80317cfe562af00cc4cbf9aabf4bac2126cf6fe5",class:"mrd-currency-field__row"},d("input",{key:"1983ef1e4d19e0fc529cf5e8be7d287fea36620a",class:l("mrd-currency-field",r,"amount"),type:"text",inputMode:"decimal",name:`${this.name}_amount`,value:this.amountDisplay,placeholder:this.formatAmount(0),required:this.required,disabled:this.disabled,onInput:this.handleAmountInput,onFocus:this.handleAmountFocus,onBlur:this.handleAmountBlur}),d("select",{key:"b5fe3f03590bebaa564d76bc5fcb47c327eacece",class:"mrd-currency-field__currency",ref:r=>this.selectEl=r,disabled:this.disabled,onChange:this.handleCurrencyChange},this.currencyOptions().map((r=>d("option",{key:r,value:r,selected:r===this.currency},r))))),d(m,{key:"1a128b26293170d4137f787622d4e89a23e62c0b",base:"mrd-currency-field",error:this.error})))}static get watchers(){return{value:[{valueChanged:0}],locale:[{localeChanged:0}]}}static get style(){return'.sc-mrd-currency-field-h{display:block}.mrd-currency-field.sc-mrd-currency-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-currency-field__label.sc-mrd-currency-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-currency-field__label--required.sc-mrd-currency-field::after{content:" *";color:var(--mrd-color-danger)}.mrd-currency-field__row.sc-mrd-currency-field{display:flex;gap:var(--mrd-space-2);align-items:stretch}.mrd-currency-field__amount.sc-mrd-currency-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-currency-field__amount.sc-mrd-currency-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-currency-field__amount.sc-mrd-currency-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-currency-field__amount.sc-mrd-currency-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-currency-field__amount--error.sc-mrd-currency-field{border-color:var(--mrd-border-color-error)}.mrd-currency-field__amount--error.sc-mrd-currency-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-currency-field__amount.sc-mrd-currency-field{flex:1;text-align:right}.mrd-currency-field__currency.sc-mrd-currency-field{width:90px;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-input-color);background-color:var(--mrd-color-neutral-50);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;cursor:pointer;box-sizing:border-box;appearance:none;text-align:center}.mrd-currency-field__currency.sc-mrd-currency-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-currency-field__currency.sc-mrd-currency-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-currency-field__error.sc-mrd-currency-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}'}},[2,"mrd-currency-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],amountDisplay:[32],currency:[32],error:[32]},void 0,{value:[{valueChanged:0}],locale:[{localeChanged:0}]}]);function f(){"undefined"!=typeof customElements&&["mrd-currency-field"].forEach((r=>{"mrd-currency-field"===r&&(customElements.get(o(r))||customElements.define(o(r),h))}))}export{h as M,f as d}
+import{proxyCustomElement as r,HTMLElement as e,createEvent as i,h as c,Host as d,transformTag as o}from"@stencil/core/internal/client";import{p as t,f as a}from"./format.js";import{r as s,F as n,c as l,a as u}from"./field-helpers.js";const m=["EUR","USD","GBP","CHF","JPY","CNY","AUD","CAD","SEK","NOK","DKK","NZD","SGD","HKD","PLN","CZK","HUF","MXN","BRL","INR","TRY","ZAR","AED","SAR"],h=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.mrdChange=i(this,"mrdChange",7),this.mrdBlur=i(this,"mrdBlur",7),this.name="",this.label="",this.value=null,this.required=!1,this.disabled=!1,this.locale=navigator.language,this.amountDisplay="",this.currency="EUR",this.error="",this.focused=!1,this.handleAmountInput=r=>{this.amountDisplay=r.target.value},this.handleAmountFocus=()=>{this.focused=!0;const r=t(this.amountDisplay,this.locale);null!==r&&(this.amountDisplay=a(r,this.locale,{useGrouping:!1,maximumFractionDigits:20}))},this.handleAmountBlur=r=>{this.focused=!1;const e=r.target.value,i=t(e,this.locale);this.error=s(e,this.required,this.locale),this.amountDisplay=null!==i?this.formatAmount(i):"";const c=this.currentValue(i);this.mrdChange.emit({name:this.name,value:c}),this.mrdBlur.emit({name:this.name,value:c})},this.handleCurrencyChange=r=>{this.currency=r.target.value;const e=t(this.amountDisplay,this.locale);this.mrdChange.emit({name:this.name,value:this.currentValue(e)})}}componentWillLoad(){this.syncFromValue()}componentDidRender(){this.selectEl&&this.selectEl.value!==this.currency&&(this.selectEl.value=this.currency)}currencyOptions(){return m.includes(this.currency)?m:[this.currency,...m]}valueChanged(){this.focused||this.syncFromValue()}localeChanged(){this.focused||this.syncFromValue()}syncFromValue(){const r=this.value;this.currency=(null==r?void 0:r.currency)||"EUR",this.amountDisplay=null!=(null==r?void 0:r.amount)?this.formatAmount(r.amount):""}formatAmount(r){return a(r,this.locale,{minimumFractionDigits:2,maximumFractionDigits:2})}currentValue(r){return null===r?null:{amount:r,currency:this.currency}}render(){const r=!!this.error;return c(d,{key:"9529c8ff013107056ea549f70f10016dec00cff6"},c("div",{key:"eef1f1400cc9b1f87353413f3f476b028bf3ecbf",class:"mrd-currency-field"},c(n,{key:"76004f615bda7669814d4b5f55c4ec54ae078e12",base:"mrd-currency-field",label:this.label,required:this.required}),c("div",{key:"03a2ec6ada9b2e185e247a228225aed3b67a5bec",class:"mrd-currency-field__row"},c("input",{key:"ee9004f4cc306c8a9f417812b573e000c055c09c",class:l("mrd-currency-field",r,"amount"),type:"text",inputMode:"decimal",name:`${this.name}_amount`,value:this.amountDisplay,placeholder:this.formatAmount(0),required:this.required,disabled:this.disabled,onInput:this.handleAmountInput,onFocus:this.handleAmountFocus,onBlur:this.handleAmountBlur}),c("select",{key:"06547e3716881b3c574c6355eef56a92983470bb",class:"mrd-currency-field__currency",ref:r=>this.selectEl=r,disabled:this.disabled,onChange:this.handleCurrencyChange},this.currencyOptions().map((r=>c("option",{key:r,value:r,selected:r===this.currency},r))))),c(u,{key:"4cbab3a887fece60ae31baccb24e3b68ecf1b947",base:"mrd-currency-field",error:this.error})))}static get watchers(){return{value:[{valueChanged:0}],locale:[{localeChanged:0}]}}static get style(){return'.sc-mrd-currency-field-h{display:block}.mrd-currency-field.sc-mrd-currency-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-currency-field__label.sc-mrd-currency-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-currency-field__label--required.sc-mrd-currency-field::after{content:" *";color:var(--mrd-color-danger)}.mrd-currency-field__row.sc-mrd-currency-field{display:flex;gap:var(--mrd-space-2);align-items:stretch}.mrd-currency-field__amount.sc-mrd-currency-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-currency-field__amount.sc-mrd-currency-field::placeholder{color:var(--mrd-input-placeholder-color)}.mrd-currency-field__amount.sc-mrd-currency-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-currency-field__amount.sc-mrd-currency-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-currency-field__amount--error.sc-mrd-currency-field{border-color:var(--mrd-border-color-error)}.mrd-currency-field__amount--error.sc-mrd-currency-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-currency-field__amount.sc-mrd-currency-field{flex:1;text-align:right}.mrd-currency-field__currency.sc-mrd-currency-field{width:90px;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-space-2);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-medium);color:var(--mrd-input-color);background-color:var(--mrd-color-neutral-50);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);outline:none;cursor:pointer;box-sizing:border-box;appearance:none;text-align:center}.mrd-currency-field__currency.sc-mrd-currency-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-currency-field__currency.sc-mrd-currency-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-currency-field__error.sc-mrd-currency-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}'}},[2,"mrd-currency-field",{name:[1],label:[1],value:[16],required:[4],disabled:[4],locale:[1],amountDisplay:[32],currency:[32],error:[32]},void 0,{value:[{valueChanged:0}],locale:[{localeChanged:0}]}]);function f(){"undefined"!=typeof customElements&&["mrd-currency-field"].forEach((r=>{"mrd-currency-field"===r&&(customElements.get(o(r))||customElements.define(o(r),h))}))}export{h as M,f as d}