@mmlogic/components 0.3.2 → 0.3.4

package/dist/collection/components/mrd-layout-section/mrd-layout-section.js

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { ClientLayoutItemType, ClientLayoutItemFieldDataType, } from "../../types/client-layout";
 import { CellRenderer } from "../../utils/cell-renderer";
 import { t } from "../../utils/i18n";
+import { formatDate } from "../../utils/format";
 export class MrdLayoutSection {
     constructor() {
         /** Items from one layout entry in ClientDashboardMetadata.layouts[]. */
@@ -17,6 +18,8 @@ export class MrdLayoutSection {
         this.searchResultsMap = {};
         this.imagePreviewUrl = null;
         this.imagePreviews = {};
+        this.openHistoryField = null;
+        this.historyClickOutside = null;
         this.searchTimers = {};
         this.handleViewLoadPage = (e, name) => {
             e.stopPropagation();
@@ -40,6 +43,17 @@ export class MrdLayoutSection {
             this.initEmbeddedTables();
             this.emitLoadImages();
         }, 0);
+        this.historyClickOutside = (e) => {
+            if (!this.el.contains(e.target))
+                this.openHistoryField = null;
+        };
+        document.addEventListener('mousedown', this.historyClickOutside);
+    }
+    disconnectedCallback() {
+        if (this.historyClickOutside) {
+            document.removeEventListener('mousedown', this.historyClickOutside);
+            this.historyClickOutside = null;
+        }
     }
     dataChanged(newVal) {
         if (newVal && Object.keys(newVal).length > 0) {
@@ -124,13 +138,13 @@ export class MrdLayoutSection {
         return null;
     }
     renderSingleFieldValue(item, value) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const dt = item.dataType;
         switch (dt) {
             case ClientLayoutItemFieldDataType.HYPERLINK: {
                 const v = value;
                 const href = (_a = v === null || v === void 0 ? void 0 : v.href) !== null && _a !== void 0 ? _a : String(value);
-                const label = (_c = (_b = v === null || v === void 0 ? void 0 : v.text) !== null && _b !== void 0 ? _b : v === null || v === void 0 ? void 0 : v.label) !== null && _c !== void 0 ? _c : href;
+                const label = (_d = (_c = (_b = v === null || v === void 0 ? void 0 : v.name) !== null && _b !== void 0 ? _b : v === null || v === void 0 ? void 0 : v.text) !== null && _c !== void 0 ? _c : v === null || v === void 0 ? void 0 : v.label) !== null && _d !== void 0 ? _d : href;
                 return (h("a", { class: "mrd-layout-section__link", href: href, target: "_blank", rel: "noopener noreferrer" }, label));
             }
             case ClientLayoutItemFieldDataType.TEXTBLOCK:
@@ -141,14 +155,14 @@ export class MrdLayoutSection {
                 return h("pre", { class: "mrd-layout-section__pre", innerHTML: CellRenderer.formatJson(value) });
             case ClientLayoutItemFieldDataType.FILE: {
                 const v = value;
-                const fileName = (_d = v === null || v === void 0 ? void 0 : v.fileName) !== null && _d !== void 0 ? _d : String(value);
-                const href = (_e = v === null || v === void 0 ? void 0 : v.href) !== null && _e !== void 0 ? _e : '';
+                const fileName = (_e = v === null || v === void 0 ? void 0 : v.fileName) !== null && _e !== void 0 ? _e : String(value);
+                const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
                 return (h("button", { class: "mrd-layout-section__download-link", onClick: () => href && this.mrdDownload.emit({ href, fileName }) }, h("svg", { class: "mrd-layout-section__file-icon", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 8l-3-3 1.41-1.41L10 14.17l4.59-4.58L16 11l-6 6z" })), t('download', this.locale)));
             }
             case ClientLayoutItemFieldDataType.IMAGE: {
                 const v = value;
-                const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
-                const fileName = (_g = v === null || v === void 0 ? void 0 : v.fileName) !== null && _g !== void 0 ? _g : '';
+                const href = (_g = v === null || v === void 0 ? void 0 : v.href) !== null && _g !== void 0 ? _g : '';
+                const fileName = (_h = v === null || v === void 0 ? void 0 : v.fileName) !== null && _h !== void 0 ? _h : '';
                 const previewUrl = this.imagePreviews[item.name];
                 if (previewUrl) {
                     return (h("button", { class: "mrd-layout-section__image-thumb-btn", onClick: () => { this.imagePreviewUrl = previewUrl; }, title: fileName || undefined }, h("img", { class: "mrd-layout-section__image-thumb", src: previewUrl, alt: fileName })));
@@ -158,8 +172,8 @@ export class MrdLayoutSection {
             case ClientLayoutItemFieldDataType.BOOLEAN:
                 return (h("span", { class: `mrd-layout-section__boolean mrd-layout-section__boolean--${value ? 'true' : 'false'}` }, value ? t('yes', this.locale) : t('no', this.locale)));
             case ClientLayoutItemFieldDataType.LIST: {
-                const listItem = ((_h = item.listItems) !== null && _h !== void 0 ? _h : []).find(li => li.key === String(value));
-                const label = (_j = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _j !== void 0 ? _j : String(value);
+                const listItem = ((_j = item.listItems) !== null && _j !== void 0 ? _j : []).find(li => li.key === String(value));
+                const label = (_k = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _k !== void 0 ? _k : String(value);
                 const color = listItem === null || listItem === void 0 ? void 0 : listItem.color;
                 const bg = listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor;
                 if (color && bg) {
@@ -170,8 +184,10 @@ export class MrdLayoutSection {
                 }
                 return label;
             }
+            case ClientLayoutItemFieldDataType.SECRET:
+                return value ? h("span", { class: "mrd-layout-section__secret-masked" }, '••••••••') : null;
             default: {
-                const text = CellRenderer.renderValue(dt, value, (_k = item.listItems) !== null && _k !== void 0 ? _k : [], this.locale);
+                const text = CellRenderer.renderValue(dt, value, (_l = item.listItems) !== null && _l !== void 0 ? _l : [], this.locale);
                 return text || null;
             }
         }
@@ -188,10 +204,31 @@ export class MrdLayoutSection {
         }
         return this.renderSingleFieldValue(item, rawValue);
     }
+    renderHistoryBadge(item, raw) {
+        var _a, _b, _c;
+        const hist = (_a = item.historyEnabled) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.historyEnabled;
+        if (!hist || !item.name)
+            return null;
+        const history = (_c = raw === null || raw === void 0 ? void 0 : raw.history) !== null && _c !== void 0 ? _c : [];
+        if (!history.length)
+            return null;
+        const sorted = [...history].sort((a, b) => b.until.localeCompare(a.until));
+        const isOpen = this.openHistoryField === item.name;
+        const { locale } = this;
+        return (h("span", { class: "mrd-layout-section__history-wrap" }, h("button", { type: "button", class: "mrd-layout-section__history-btn", title: t('history_badge_tooltip', locale), "aria-label": t('history_badge_tooltip', locale), onClick: (e) => {
+                e.stopPropagation();
+                this.openHistoryField = isOpen ? null : item.name;
+            } }, h("svg", { class: "mrd-layout-section__history-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .207.085.394.22.53l2.5 2.5a.75.75 0 101.06-1.06L10.75 9.69V5z", "clip-rule": "evenodd" }))), isOpen && (h("div", { class: "mrd-layout-section__history-popover", role: "listbox" }, sorted.map((entry, i) => (h("div", { key: String(i), class: "mrd-layout-section__history-entry" }, entry.value, " (", t('history_until', locale), " ", formatDate(entry.until, locale), ")")))))));
+    }
     renderField(item) {
+        var _a, _b;
         if (!item.name)
             return null;
-        const rawValue = this.data[item.name];
+        const raw = this.data[item.name];
+        const hist = (_a = item.historyEnabled) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.historyEnabled;
+        const rawValue = hist && raw !== null && typeof raw === 'object' && 'current' in raw
+            ? raw.current
+            : raw;
         const renderedValue = this.renderFieldValue(item, rawValue);
         if (item.header) {
             return (h("h1", { class: "mrd-layout-section__field-header", key: item.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
@@ -201,7 +238,7 @@ export class MrdLayoutSection {
         const isBlock = item.dataType === ClientLayoutItemFieldDataType.TEXTBLOCK
             || item.dataType === ClientLayoutItemFieldDataType.LONGTEXT
             || item.dataType === ClientLayoutItemFieldDataType.JSON;
-        return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue)));
+        return (h("div", { class: `mrd-layout-section__field${isBlock ? ' mrd-layout-section__field--block' : ''}`, key: item.name }, h("span", { class: "mrd-layout-section__field-label" }, item.label), h("span", { class: "mrd-layout-section__field-value" }, renderedValue, this.renderHistoryBadge(item, raw))));
     }
     renderRelation(item) {
         var _a, _b, _c;
@@ -262,6 +299,7 @@ export class MrdLayoutSection {
                     path: e.detail.path,
                     qs: e.detail.qs,
                     parentPath: e.detail.parentPath,
+                    basicType: e.detail.basicType,
                 });
             } })));
     }
@@ -296,7 +334,7 @@ export class MrdLayoutSection {
         return (h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
     }
     render() {
-        return (h(Host, { key: '0a3a58f5c80716bc0a7ba1b9468b721706d2ce4a' }, h("div", { key: '7cf63580c584811c1bb84b419e8d13026e432fba', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        return (h(Host, { key: '8966198eebd98570d2db2f4d2fe9ef3f8b466ec6' }, h("div", { key: '645ddbfdd829a0f9c1a4eab18105662af6c078b2', class: "mrd-layout-section" }, this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }
@@ -439,7 +477,8 @@ export class MrdLayoutSection {
             "searchQueryMap": {},
             "searchResultsMap": {},
             "imagePreviewUrl": {},
-            "imagePreviews": {}
+            "imagePreviews": {},
+            "openHistoryField": {}
         };
     }
     static get events() {
@@ -536,8 +575,8 @@ export class MrdLayoutSection {
                     "text": "Re-emitted from an embedded mrd-table's mrdAction; host builds the target URL from dataClass."
                 },
                 "complexType": {
-                    "original": "{ name: string; action: string; dataClass: string; path?: string; qs?: string; parentPath?: string | null }",
-                    "resolved": "{ name: string; action: string; dataClass: string; path?: string | undefined; qs?: string | undefined; parentPath?: string | null | undefined; }",
+                    "original": "{ name: string; action: string; dataClass: string; path?: string; qs?: string; parentPath?: string | null; basicType?: string }",
+                    "resolved": "{ name: string; action: string; dataClass: string; path?: string | undefined; qs?: string | undefined; parentPath?: string | null | undefined; basicType?: string | undefined; }",
                     "references": {}
                 }
             }, {

package/dist/collection/components/mrd-layout-section/mrd-layout-section.scss

@@ -24,6 +24,73 @@
   font-weight: var(--mrd-font-weight-medium);
   color: var(--mrd-color-neutral-800);
   word-break: break-word;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-layout-section__history-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.mrd-layout-section__history-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-400);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color var(--mrd-transition-fast), background-color var(--mrd-transition-fast);
+}
+
+.mrd-layout-section__history-btn:hover {
+  color: var(--mrd-color-neutral-700);
+  background-color: var(--mrd-color-neutral-100);
+}
+
+.mrd-layout-section__history-btn:focus {
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-layout-section__history-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mrd-layout-section__history-popover {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  min-width: 24rem;
+  max-width: 24rem;
+  background-color: var(--mrd-color-white);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  box-shadow: var(--mrd-shadow-md);
+  padding: var(--mrd-space-1) 0;
+  z-index: var(--mrd-z-dropdown);
+}
+
+.mrd-layout-section__history-entry {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-normal);
+  color: var(--mrd-color-neutral-700);
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  line-height: var(--mrd-line-height-normal);
+}
+
+.mrd-layout-section__history-entry:not(:last-child) {
+  border-bottom: var(--mrd-border-width) solid var(--mrd-color-neutral-100);
 }
 
 .mrd-layout-section__field-header {
@@ -154,6 +221,15 @@
   flex-shrink: 0;
 }
 
+.mrd-layout-section__secret-masked {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-label-color);
+  letter-spacing: 0.15em;
+  user-select: none;
+  pointer-events: none;
+}
+
 .mrd-layout-section__pre {
   font-family: var(--mrd-font-family-mono);
   font-size: var(--mrd-font-size-xs);

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

@@ -28,7 +28,7 @@ export class MrdLongtextField {
     }
     render() {
         const hasError = !!this.error;
-        return (h(Host, { key: '3142f97e26fdef5547c8dd9d236ed8bc40d5c65f' }, h("div", { key: 'b78567596d8c6459c8e9b28ea6b02d3fe65fd16c', class: "mrd-longtext-field" }, this.label && (h("label", { key: 'e85d8657fcc49fc7e15c06b8a98b34c03738ef5b', 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: '63cdcaf136e345197c42516f150752ec1d8665fa', class: "mrd-longtext-field__error" }, 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))));
     }
     static get is() { return "mrd-longtext-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -69,7 +69,7 @@ export class MrdNumberField {
         const hasError = !!this.error;
         const suffix = this.dataType === ClientLayoutItemFieldDataType.PERCENTAGE ? '%' :
             this.dataType === ClientLayoutItemFieldDataType.DECIMAL ? '' : '';
-        return (h(Host, { key: 'ba3488fb12f72bb04164e3e94c028fb8a085f1f2' }, h("div", { key: '582e30a2a256c16cc3b0cab6e64460a0a5ec1fa2', class: "mrd-number-field" }, this.label && (h("label", { key: '87fe77ce80e888406ecedaa450e8c3d2a61c790a', class: `mrd-number-field__label${this.required ? ' mrd-number-field__label--required' : ''}` }, this.label)), h("div", { key: 'e3d8cf06f585add372e385d6e6ef7d60ece8071b', class: "mrd-number-field__input-wrapper" }, h("input", { key: '04710b67ee0dcb9db327e25b2467b1b3499bc9a8', 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: '9713244d784c82213ea835a5a6d47d468ccb0bb9', class: "mrd-number-field__error" }, this.error))));
+        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))));
     }
     static get is() { return "mrd-number-field"; }
     static get encapsulation() { return "scoped"; }
@@ -230,7 +230,7 @@ export class MrdNumberField {
                 "mutable": false,
                 "complexType": {
                     "original": "ClientLayoutItemFieldDataType",
-                    "resolved": "ClientLayoutItemFieldDataType.BOOLEAN | ClientLayoutItemFieldDataType.CURRENCY | ClientLayoutItemFieldDataType.DATE | ClientLayoutItemFieldDataType.DATETIME | ClientLayoutItemFieldDataType.DECIMAL | ClientLayoutItemFieldDataType.EMAIL | ClientLayoutItemFieldDataType.FILE | ClientLayoutItemFieldDataType.HYPERLINK | ClientLayoutItemFieldDataType.IMAGE | ClientLayoutItemFieldDataType.INTEGER | ClientLayoutItemFieldDataType.JSON | ClientLayoutItemFieldDataType.LIST | ClientLayoutItemFieldDataType.LONGTEXT | ClientLayoutItemFieldDataType.PERCENTAGE | ClientLayoutItemFieldDataType.TEXT | ClientLayoutItemFieldDataType.TEXTBLOCK | ClientLayoutItemFieldDataType.TIME",
+                    "resolved": "ClientLayoutItemFieldDataType.BOOLEAN | ClientLayoutItemFieldDataType.CURRENCY | ClientLayoutItemFieldDataType.DATE | ClientLayoutItemFieldDataType.DATETIME | ClientLayoutItemFieldDataType.DECIMAL | ClientLayoutItemFieldDataType.EMAIL | ClientLayoutItemFieldDataType.FILE | ClientLayoutItemFieldDataType.HYPERLINK | ClientLayoutItemFieldDataType.IMAGE | ClientLayoutItemFieldDataType.INTEGER | ClientLayoutItemFieldDataType.JSON | ClientLayoutItemFieldDataType.LIST | ClientLayoutItemFieldDataType.LONGTEXT | ClientLayoutItemFieldDataType.PERCENTAGE | ClientLayoutItemFieldDataType.SECRET | ClientLayoutItemFieldDataType.TEXT | ClientLayoutItemFieldDataType.TEXTBLOCK | ClientLayoutItemFieldDataType.TIME",
                     "references": {
                         "ClientLayoutItemFieldDataType": {
                             "location": "import",

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

@@ -0,0 +1,229 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+export class MrdSecretField {
+    constructor() {
+        this.name = '';
+        this.label = '';
+        this.value = '';
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.error = '';
+        this.handleInput = (e) => {
+            const val = e.target.value;
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: '08f1aa9d8ab9f4e41abb6d3286e5e383427a5409' }, h("div", { key: 'fabe38aa130e211cea81f2c2f227bc15ad3ebf7d', class: "mrd-secret-field" }, this.label && (h("label", { key: '69af8844eff8ce84daa622635c79130fb491eb0b', class: `mrd-secret-field__label${this.required ? ' mrd-secret-field__label--required' : ''}` }, this.label)), this.disabled
+            ? (h("span", { class: "mrd-secret-field__masked", "aria-label": this.label }, this.value ? '••••••••' : ''))
+            : (h("input", { class: `mrd-secret-field__input${hasError ? ' mrd-secret-field__input--error' : ''}`, type: "password", name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, autocomplete: "new-password", onInput: this.handleInput, onBlur: this.handleBlur })), hasError && h("span", { key: 'e602004f0bb10916d1015e3c2b003523a292997c', class: "mrd-secret-field__error" }, this.error))));
+    }
+    static get is() { return "mrd-secret-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-secret-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-secret-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdChange",
+                "name": "mrdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdBlur",
+                "name": "mrdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/mrd-secret-field/mrd-secret-field.scss

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+}
+
+.mrd-secret-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  width: 100%;
+}
+
+.mrd-secret-field__label {
+  display: block;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-label-font-size);
+  font-weight: var(--mrd-label-font-weight);
+  color: var(--mrd-label-color);
+}
+
+.mrd-secret-field__label--required::after {
+  content: ' *';
+  color: var(--mrd-color-danger);
+}
+
+.mrd-secret-field__input {
+  display: block;
+  width: 100%;
+  height: var(--mrd-input-height);
+  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-input-color);
+  background-color: var(--mrd-input-bg);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);
+  outline: none;
+  appearance: none;
+  box-sizing: border-box;
+}
+
+.mrd-secret-field__input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
+
+.mrd-secret-field__input:focus {
+  border-color: var(--mrd-border-color-focus);
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-secret-field__input--error {
+  border-color: var(--mrd-border-color-error);
+}
+
+.mrd-secret-field__input--error:focus {
+  box-shadow: var(--mrd-shadow-focus-error);
+}
+
+.mrd-secret-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
+
+.mrd-secret-field__masked {
+  display: block;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-label-color);
+  letter-spacing: 0.15em;
+  user-select: none;
+  pointer-events: none;
+}