@mmlogic/components 0.5.8 → 0.5.10

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:
@@ -6867,11 +6883,12 @@ const MrdTable = class {
             this.loadedPages.size > 0) {
             this.colWidthMeasureScheduled = true;
             index.writeTask(() => {
+                var _a;
                 this.colWidthMeasureScheduled = false;
                 // Re-check: state may have changed (e.g. a reset) between scheduling and running.
                 if (this.colWidths.length !== 0)
                     return;
-                const measured = this.measureColWidths();
+                const measured = (_a = this.measureContentWidths()) !== null && _a !== void 0 ? _a : this.measureColWidths();
                 if (measured)
                     this.colWidths = measured;
             });
@@ -6885,6 +6902,44 @@ const MrdTable = class {
             return null;
         return Array.from(ths).map(th => Math.round(th.getBoundingClientRect().width));
     }
+    /** Width one cell needs to show its content in full, borders included.
+     *  Read from scrollWidth rather than the laid-out box: cells clip with `overflow: hidden`,
+     *  so a squeezed cell reports the width it *was given*, not the width it needs. */
+    neededWidth(cell) {
+        // The layout metrics are absent in the mock DOM the specs run on; treat them as 0
+        // rather than letting a NaN poison the Math.max chain the callers build.
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const clientWidth = px(cell.clientWidth);
+        const scrollWidth = px(cell.scrollWidth);
+        const paddingRight = px(parseFloat(getComputedStyle(cell).paddingRight || '0'));
+        const borders = Math.max(0, px(cell.offsetWidth) - clientWidth);
+        // scrollWidth drops the right padding once the content overflows the clipped box;
+        // when it fits, clientWidth is already the full padded box.
+        const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
+        return Math.ceil(content + borders);
+    }
+    /** Width each column needs for its header and its rendered page-0 cells — what the columns
+     *  are locked to, so they never end up narrower than their content.
+     *
+     *  Deliberately not the laid-out widths: with many columns the browser squeezes them to fit
+     *  the container instead of overflowing (the cells clip, so they no longer resist), which
+     *  cost the horizontal scrollbar. Locking the needed widths makes the summed table width
+     *  exceed the container again, and `.mrd-table__scroll` scrolls. Capped per column at
+     *  MAX_AUTOFIT_WIDTH so one outlier value can't blow up the layout — same cap as auto-fit. */
+    measureContentWidths() {
+        const ths = this.el.querySelectorAll('.mrd-table__header');
+        if (ths.length === 0 || ths.length !== this.columns.length)
+            return null;
+        return Array.from(ths).map((th, idx) => {
+            let widest = this.neededWidth(th);
+            // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
+            // colSpan cell (without that class) which would measure as the full table width.
+            this.el
+                .querySelectorAll(`.mrd-table__cell:nth-child(${idx + 1})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return Math.min(Math.max(widest, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH);
+        });
+    }
     /** 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.
      *
@@ -6945,12 +7000,7 @@ const MrdTable = class {
         // colSpan cell (without that class) which would otherwise measure as the full table width.
         const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), .mrd-table__cell:nth-child(${idx + 1})`);
         let widest = 0;
-        cells.forEach(cell => {
-            // scrollWidth is the untruncated content width; cells clip with overflow: hidden.
-            const style = getComputedStyle(cell);
-            const padding = parseFloat(style.paddingLeft || '0') + parseFloat(style.paddingRight || '0');
-            widest = Math.max(widest, cell.scrollWidth + padding);
-        });
+        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_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

@@ -269,11 +269,12 @@ export class MrdTable {
             this.loadedPages.size > 0) {
             this.colWidthMeasureScheduled = true;
             writeTask(() => {
+                var _a;
                 this.colWidthMeasureScheduled = false;
                 // Re-check: state may have changed (e.g. a reset) between scheduling and running.
                 if (this.colWidths.length !== 0)
                     return;
-                const measured = this.measureColWidths();
+                const measured = (_a = this.measureContentWidths()) !== null && _a !== void 0 ? _a : this.measureColWidths();
                 if (measured)
                     this.colWidths = measured;
             });
@@ -287,6 +288,44 @@ export class MrdTable {
             return null;
         return Array.from(ths).map(th => Math.round(th.getBoundingClientRect().width));
     }
+    /** Width one cell needs to show its content in full, borders included.
+     *  Read from scrollWidth rather than the laid-out box: cells clip with `overflow: hidden`,
+     *  so a squeezed cell reports the width it *was given*, not the width it needs. */
+    neededWidth(cell) {
+        // The layout metrics are absent in the mock DOM the specs run on; treat them as 0
+        // rather than letting a NaN poison the Math.max chain the callers build.
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const clientWidth = px(cell.clientWidth);
+        const scrollWidth = px(cell.scrollWidth);
+        const paddingRight = px(parseFloat(getComputedStyle(cell).paddingRight || '0'));
+        const borders = Math.max(0, px(cell.offsetWidth) - clientWidth);
+        // scrollWidth drops the right padding once the content overflows the clipped box;
+        // when it fits, clientWidth is already the full padded box.
+        const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
+        return Math.ceil(content + borders);
+    }
+    /** Width each column needs for its header and its rendered page-0 cells — what the columns
+     *  are locked to, so they never end up narrower than their content.
+     *
+     *  Deliberately not the laid-out widths: with many columns the browser squeezes them to fit
+     *  the container instead of overflowing (the cells clip, so they no longer resist), which
+     *  cost the horizontal scrollbar. Locking the needed widths makes the summed table width
+     *  exceed the container again, and `.mrd-table__scroll` scrolls. Capped per column at
+     *  MAX_AUTOFIT_WIDTH so one outlier value can't blow up the layout — same cap as auto-fit. */
+    measureContentWidths() {
+        const ths = this.el.querySelectorAll('.mrd-table__header');
+        if (ths.length === 0 || ths.length !== this.columns.length)
+            return null;
+        return Array.from(ths).map((th, idx) => {
+            let widest = this.neededWidth(th);
+            // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
+            // colSpan cell (without that class) which would measure as the full table width.
+            this.el
+                .querySelectorAll(`.mrd-table__cell:nth-child(${idx + 1})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return Math.min(Math.max(widest, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH);
+        });
+    }
     /** 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.
      *
@@ -347,12 +386,7 @@ export class MrdTable {
         // colSpan cell (without that class) which would otherwise measure as the full table width.
         const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), .mrd-table__cell:nth-child(${idx + 1})`);
         let widest = 0;
-        cells.forEach(cell => {
-            // scrollWidth is the untruncated content width; cells clip with overflow: hidden.
-            const style = getComputedStyle(cell);
-            const padding = parseFloat(style.paddingLeft || '0') + parseFloat(style.paddingRight || '0');
-            widest = Math.max(widest, cell.scrollWidth + padding);
-        });
+        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_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}