@mmlogic/components 0.3.6 → 0.3.8

package/dist/{mosterdcomponents/mrd-form.entry.js → collection/components/mrd-form/mrd-form.js}

@@ -1,19 +1,9 @@
-import { r as registerInstance, a as createEvent, h, d as Host } from './index-B_tPFIvS.js';
-import './index-I5SuYv7a.js';
-import { t } from './i18n-hoGGKbKU.js';
-import { v as validateRequired } from './validation-ixb43cqU.js';
-import { a as ClientLayoutItemType, d as ClientLayoutItemRelationEditBehavior } from './client-layout-D88nn5zf.js';
-
-const mrdFormScss = () => `.sc-mrd-form-h{display:block}.mrd-form.sc-mrd-form{font-family:var(--mrd-font-family);width:100%}.mrd-form__title.sc-mrd-form{font-size:var(--mrd-font-size-2xl);font-weight:var(--mrd-font-weight-bold);color:var(--mrd-color-neutral-900);margin:0 0 var(--mrd-space-6) 0}.mrd-form__body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-5)}.mrd-form__field.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-1)}.mrd-form__field-error.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}.mrd-form__section.sc-mrd-form{border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius-md);padding:var(--mrd-space-4) var(--mrd-space-5);margin:0}.mrd-form__section-legend.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-700);padding:0 var(--mrd-space-2)}.mrd-form__section-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);margin-top:var(--mrd-space-2)}.mrd-form__group.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-2)}.mrd-form__group-label.sc-mrd-form{font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-sm);font-weight:var(--mrd-font-weight-semibold);color:var(--mrd-color-neutral-500);text-transform:uppercase;letter-spacing:0.05em}.mrd-form__group-body.sc-mrd-form{display:flex;flex-direction:column;gap:var(--mrd-space-4);padding-left:var(--mrd-space-4);border-left:3px solid var(--mrd-color-neutral-200)}.mrd-form__footer.sc-mrd-form{margin-top:var(--mrd-space-8);padding-top:var(--mrd-space-5);border-top:var(--mrd-border-width) solid var(--mrd-border-color);display:flex;justify-content:flex-end;gap:var(--mrd-space-3)}.mrd-form__submit.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:var(--mrd-color-primary);color:var(--mrd-color-white);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:none;border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition)}.mrd-form__submit.sc-mrd-form:hover{background-color:var(--mrd-color-primary-hover)}.mrd-form__submit.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__submit.sc-mrd-form:active{background-color:var(--mrd-color-primary-dark)}.mrd-form__cancel.sc-mrd-form{display:inline-flex;align-items:center;justify-content:center;height:var(--mrd-input-height);padding:0 var(--mrd-space-6);background-color:transparent;color:var(--mrd-color-neutral-600);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);font-weight:var(--mrd-font-weight-medium);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);cursor:pointer;transition:background-color var(--mrd-transition), color var(--mrd-transition)}.mrd-form__cancel.sc-mrd-form:hover{background-color:var(--mrd-color-neutral-100);color:var(--mrd-color-neutral-800)}.mrd-form__cancel.sc-mrd-form:focus{outline:none;box-shadow:var(--mrd-shadow-focus)}.mrd-form__cancel.sc-mrd-form:active{background-color:var(--mrd-color-neutral-200)}`;
-
-const MrdForm = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.mrdSubmit = createEvent(this, "mrdSubmit", 7);
-        this.mrdCancel = createEvent(this, "mrdCancel", 7);
-        this.mrdSearch = createEvent(this, "mrdSearch", 7);
-        this.mrdFetchAll = createEvent(this, "mrdFetchAll", 7);
-        this.mrdUpload = createEvent(this, "mrdUpload", 7);
+import { Host, h } from "@stencil/core";
+import { ClientLayoutItemType, ClientLayoutItemRelationEditBehavior } from "../../types";
+import { t } from "../../utils/i18n";
+import { validateRequired } from "../../utils/validation";
+export class MrdForm {
+    constructor() {
         this.locale = navigator.language;
         this.values = {};
         /**
@@ -362,18 +352,305 @@ const MrdForm = class {
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
         return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
     }
-    static get watchers() { return {
-        "values": [{
-                "valuesChanged": 0
-            }],
-        "me": [{
-                "meChanged": 0
-            }]
-    }; }
-};
-MrdForm.style = mrdFormScss();
-
-export { MrdForm as mrd_form };
-//# sourceMappingURL=mrd-form.entry.esm.js.map
-
-//# sourceMappingURL=mrd-form.entry.js.map
+    static get is() { return "mrd-form"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientLayout",
+                    "resolved": "ClientLayout",
+                    "references": {
+                        "ClientLayout": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::ClientLayout",
+                            "referenceLocation": "ClientLayout"
+                        }
+                    }
+                },
+                "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"
+            },
+            "values": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "referenceHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Absolute href of the parent/reference object (e.g. the clientAgreement href\nwhen creating an invoice from within a client agreement).\nCombined with `referenceClass`, mrd-form will automatically pre-fill the\nmatching relation field so dependent DROPDOWN fields can be fetched on load."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference-href",
+                "defaultValue": "''"
+            },
+            "referenceClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `mostSignificantClass` of the parent/reference object\n(e.g. `'clientAgreements'`). Used to locate the matching RELATION field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reference-class",
+                "defaultValue": "''"
+            },
+            "showCancel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, a cancel button is shown next to the submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-cancel",
+                "defaultValue": "false"
+            },
+            "me": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RelationSearchResult | null",
+                    "resolved": "RelationSearchResult | null",
+                    "references": {
+                        "RelationSearchResult": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::RelationSearchResult",
+                            "referenceLocation": "RelationSearchResult"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently logged-in user, resolved by the host via /accounts/me.\nUsed to pre-fill RELATION fields whose defaultValue is \"@me\".\nMay be null when not authenticated or not yet resolved."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formValues": {},
+            "errors": {},
+            "submitted": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdSubmit",
+                "name": "mrdSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                }
+            }, {
+                "method": "mrdCancel",
+                "name": "mrdCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdSearch",
+                "name": "mrdSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; query: string; relatedClass: string }",
+                    "resolved": "{ name: string; query: string; relatedClass: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdFetchAll",
+                "name": "mrdFetchAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; relatedClass: string; mostSignificantClass?: string; commonRelation?: string; filter?: string; filterValue?: string }",
+                    "resolved": "{ name: string; relatedClass: string; mostSignificantClass?: string | undefined; commonRelation?: string | undefined; filter?: string | undefined; filterValue?: string | undefined; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdUpload",
+                "name": "mrdUpload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ name: string; file: File }",
+                    "resolved": "{ name: string; file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFieldValue": {
+                "complexType": {
+                    "signature": "(name: string, value: unknown) => Promise<void>",
+                    "parameters": [{
+                            "name": "name",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "value",
+                            "type": "unknown",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "values",
+                "methodName": "valuesChanged"
+            }, {
+                "propName": "me",
+                "methodName": "meChanged"
+            }];
+    }
+}

package/dist/collection/components/mrd-form/mrd-form.scss

@@ -0,0 +1,148 @@
+:host {
+  display: block;
+}
+
+.mrd-form {
+  font-family: var(--mrd-font-family);
+  width: 100%;
+}
+
+.mrd-form__title {
+  font-size: var(--mrd-font-size-2xl);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  margin: 0 0 var(--mrd-space-6) 0;
+}
+
+.mrd-form__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-5);
+}
+
+.mrd-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-form__field-error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
+
+.mrd-form__section {
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-md);
+  padding: var(--mrd-space-4) var(--mrd-space-5);
+  margin: 0;
+}
+
+.mrd-form__section-legend {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-neutral-700);
+  padding: 0 var(--mrd-space-2);
+}
+
+.mrd-form__section-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-4);
+  margin-top: var(--mrd-space-2);
+}
+
+.mrd-form__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-form__group-label {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-neutral-500);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.mrd-form__group-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-4);
+  padding-left: var(--mrd-space-4);
+  border-left: 3px solid var(--mrd-color-neutral-200);
+}
+
+.mrd-form__footer {
+  margin-top: var(--mrd-space-8);
+  padding-top: var(--mrd-space-5);
+  border-top: var(--mrd-border-width) solid var(--mrd-border-color);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--mrd-space-3);
+}
+
+.mrd-form__submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  background-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: none;
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition);
+}
+
+.mrd-form__submit:hover {
+  background-color: var(--mrd-color-primary-hover);
+}
+
+.mrd-form__submit:focus {
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-form__submit:active {
+  background-color: var(--mrd-color-primary-dark);
+}
+
+.mrd-form__cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  background-color: transparent;
+  color: var(--mrd-color-neutral-600);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: var(--mrd-border-width) solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition), color var(--mrd-transition);
+}
+
+.mrd-form__cancel:hover {
+  background-color: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-form__cancel:focus {
+  outline: none;
+  box-shadow: var(--mrd-shadow-focus);
+}
+
+.mrd-form__cancel:active {
+  background-color: var(--mrd-color-neutral-200);
+}