@mmlogic/components 0.1.0

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

@@ -0,0 +1,230 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../utils/i18n";
+import { validateRequired, validateEmail } from "../../utils/validation";
+export class MrdEmailField {
+    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 if (val && !validateEmail(val)) {
+                this.error = t('invalid_email', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: '851ec092957ab86e811b292eaabe29d04a600fe0' }, h("div", { key: '2d8969d60378f3161656369494549d682de8ec0e', class: "mrd-email-field" }, this.label && (h("label", { key: '7a35cc60d4804097e1a54f984c7da1829f6bbd11', class: `mrd-email-field__label${this.required ? ' mrd-email-field__label--required' : ''}` }, this.label)), h("input", { key: '1fc20e860aa021886f7ed522c3a0c8dd2cb1e093', class: `mrd-email-field__input${hasError ? ' mrd-email-field__input--error' : ''}`, type: "email", name: this.name, value: this.value, placeholder: this.placeholder || 'name@example.com', required: this.required, disabled: this.disabled, onInput: this.handleInput, onBlur: this.handleBlur }), hasError && h("span", { key: 'a44b3b41b7cd6b8c643cc64e6aadd884a2ba4961', class: "mrd-email-field__error" }, this.error))));
+    }
+    static get is() { return "mrd-email-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-email-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-email-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-email-field/mrd-email-field.scss

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+}
+
+.mrd-email-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  width: 100%;
+}
+
+.mrd-email-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-email-field__label--required::after {
+  content: ' *';
+  color: var(--mrd-color-danger);
+}
+
+.mrd-email-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-email-field__input::placeholder {
+  color: var(--mrd-input-placeholder-color);
+}
+
+.mrd-email-field__input:focus {
+  border-color: var(--mrd-border-color-focus);
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-email-field__input:disabled {
+  background-color: var(--mrd-input-bg-disabled);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.mrd-email-field__input--error {
+  border-color: var(--mrd-border-color-error);
+}
+
+.mrd-email-field__input--error:focus {
+  box-shadow: var(--mrd-shadow-focus-error);
+}
+
+.mrd-email-field__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}

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

@@ -0,0 +1,187 @@
+import { Host, h } from "@stencil/core";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutItemRelationDisplayType, } from "../../types";
+export class MrdField {
+    constructor() {
+        this.locale = navigator.language;
+        this.handleChange = (e) => {
+            e.stopPropagation();
+            this.mrdChange.emit(e.detail);
+        };
+        this.handleBlur = (e) => {
+            e.stopPropagation();
+            this.mrdBlur.emit(e.detail);
+        };
+        this.handleSearch = (e) => {
+            e.stopPropagation();
+            this.mrdSearch.emit(e.detail);
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+        const { item, locale, value } = this;
+        if (item.type === ClientLayoutItemType.RELATION && item.relation) {
+            const rel = item.relation;
+            return (h(Host, null, h("mrd-relation-field", { name: rel.name, label: rel.label, required: rel.required, disabled: (_a = rel.disabled) !== null && _a !== void 0 ? _a : false, locale: locale, relatedClass: rel.relatedClass, displayType: (_b = rel.displayType) !== null && _b !== void 0 ? _b : ClientLayoutItemRelationDisplayType.SEARCH, multiple: (_c = rel.multiple) !== null && _c !== void 0 ? _c : false, dropdownValues: (_d = rel.dropdownValues) !== null && _d !== void 0 ? _d : [], value: value, onMrdChange: this.handleChange, onMrdBlur: this.handleBlur, onMrdSearch: this.handleSearch })));
+        }
+        if (item.type !== ClientLayoutItemType.FIELD || !item.field) {
+            return h(Host, null);
+        }
+        const field = item.field;
+        const commonProps = {
+            name: field.name,
+            label: field.label,
+            required: field.required,
+            disabled: (_e = field.disabled) !== null && _e !== void 0 ? _e : false,
+            locale,
+            onMrdChange: this.handleChange,
+            onMrdBlur: this.handleBlur,
+        };
+        switch (field.dataType) {
+            case ClientLayoutItemFieldDataType.TEXT:
+                return (h(Host, null, h("mrd-text-field", Object.assign({}, commonProps, { value: (_f = value) !== null && _f !== void 0 ? _f : '', placeholder: (_g = field.placeholder) !== null && _g !== void 0 ? _g : '' }))));
+            case ClientLayoutItemFieldDataType.TEXTBLOCK:
+                return (h(Host, null, h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_h = value) !== null && _h !== void 0 ? _h : '', placeholder: (_j = field.placeholder) !== null && _j !== void 0 ? _j : '' }))));
+            case ClientLayoutItemFieldDataType.INTEGER:
+            case ClientLayoutItemFieldDataType.DECIMAL:
+            case ClientLayoutItemFieldDataType.PERCENTAGE:
+                return (h(Host, null, h("mrd-number-field", Object.assign({}, commonProps, { value: (_k = value) !== null && _k !== void 0 ? _k : null, dataType: field.dataType, decimalPrecision: (_l = field.decimalPrecision) !== null && _l !== void 0 ? _l : 2, placeholder: (_m = field.placeholder) !== null && _m !== void 0 ? _m : '' }))));
+            case ClientLayoutItemFieldDataType.CURRENCY:
+                return (h(Host, null, h("mrd-currency-field", Object.assign({}, commonProps, { value: (_o = value) !== null && _o !== void 0 ? _o : { amount: null, currency: (_p = field.currencyCode) !== null && _p !== void 0 ? _p : 'EUR' } }))));
+            case ClientLayoutItemFieldDataType.BOOLEAN:
+                return (h(Host, null, h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_q = value) !== null && _q !== void 0 ? _q : false }))));
+            case ClientLayoutItemFieldDataType.DATE:
+                return (h(Host, null, h("mrd-date-field", Object.assign({}, commonProps, { value: (_r = value) !== null && _r !== void 0 ? _r : '' }))));
+            case ClientLayoutItemFieldDataType.DATETIME:
+                return (h(Host, null, h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_s = value) !== null && _s !== void 0 ? _s : '' }))));
+            case ClientLayoutItemFieldDataType.TIME:
+                return (h(Host, null, h("mrd-time-field", Object.assign({}, commonProps, { value: (_t = value) !== null && _t !== void 0 ? _t : '' }))));
+            case ClientLayoutItemFieldDataType.EMAIL:
+                return (h(Host, null, h("mrd-email-field", Object.assign({}, commonProps, { value: (_u = value) !== null && _u !== void 0 ? _u : '', placeholder: (_v = field.placeholder) !== null && _v !== void 0 ? _v : '' }))));
+            case ClientLayoutItemFieldDataType.HYPERLINK:
+                return (h(Host, null, h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_w = value) !== null && _w !== void 0 ? _w : '', placeholder: (_x = field.placeholder) !== null && _x !== void 0 ? _x : '' }))));
+            case ClientLayoutItemFieldDataType.LIST:
+                return (h(Host, null, h("mrd-list-field", Object.assign({}, commonProps, { value: (_y = value) !== null && _y !== void 0 ? _y : '', multiple: (_z = field.multiple) !== null && _z !== void 0 ? _z : false, listValues: (_0 = field.listValues) !== null && _0 !== void 0 ? _0 : [] }))));
+            case ClientLayoutItemFieldDataType.FILE:
+                return (h(Host, null, h("mrd-file-field", Object.assign({}, commonProps, { accept: (_1 = field.accept) !== null && _1 !== void 0 ? _1 : '', maxSize: (_2 = field.maxSize) !== null && _2 !== void 0 ? _2 : 0 }))));
+            case ClientLayoutItemFieldDataType.IMAGE:
+                return (h(Host, null, h("mrd-image-field", Object.assign({}, commonProps, { accept: (_3 = field.accept) !== null && _3 !== void 0 ? _3 : 'image/*', maxSize: (_4 = field.maxSize) !== null && _4 !== void 0 ? _4 : 0 }))));
+            default:
+                return h(Host, null);
+        }
+    }
+    static get is() { return "mrd-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get properties() {
+        return {
+            "item": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayoutItem",
+                    "resolved": "ClientLayoutItem",
+                    "references": {
+                        "ClientLayoutItem": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ClientLayoutItem",
+                            "referenceLocation": "ClientLayoutItem"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": 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"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "unknown",
+                    "resolved": "unknown",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdChange",
+                "name": "mrdChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: unknown }",
+                    "resolved": "{ name: string; value: unknown; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdBlur",
+                "name": "mrdBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; value: unknown }",
+                    "resolved": "{ name: string; value: unknown; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdSearch",
+                "name": "mrdSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string; relatedClass: string }",
+                    "resolved": "{ query: string; relatedClass: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}