@social-mail/social-mail-client 1.2.488 → 1.2.490

package/dist/public/contact-us/ContactUsApp.d.ts

@@ -11,6 +11,7 @@ export default class ContactUsApp extends AtomControl {
     };
     constructor(app: any, e?: HTMLElement);
     init(): Promise<void>;
+    selectInput(target: HTMLElement): void;
     sendEmail(): Promise<void>;
 }
 //# sourceMappingURL=ContactUsApp.d.ts.map

package/dist/public/contact-us/ContactUsApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactUsApp.d.ts","sourceRoot":"","sources":["../../../src/public/contact-us/ContactUsApp.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAmC5E,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,WAAW;IAEjD,KAAK;;;;;;;;MAQH;gBAEU,GAAG,KAAA,EAAE,CAAC,cAAuC;IAKnD,IAAI;IAmDJ,SAAS;CAWlB"}
+{"version":3,"file":"ContactUsApp.d.ts","sourceRoot":"","sources":["../../../src/public/contact-us/ContactUsApp.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAuG5E,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,WAAW;IAEjD,KAAK;;;;;;;;MAQH;gBAEU,GAAG,KAAA,EAAE,CAAC,cAAuC;IAKnD,IAAI;IAsDV,WAAW,CAAC,MAAM,EAAE,WAAW;IAczB,SAAS;CAWlB"}

package/dist/public/contact-us/ContactUsApp.js

@@ -30,29 +30,97 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
     }],
     execute: function () {
       styled.css`
-    display: flex;
-    justify-content: center;
+    display: grid;
     align-items: center;
+    justify-items: stretch;
+
+    padding: 20px;
+
+    & [data-form] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto auto auto auto auto;
+
+        background-color: transparent;
+
+        & .field-error, & .error-message {
+            background-color: transparent;
+            color: red;
+        }
+
+        & > * {
+            background-color: #80808015;
+            padding: 5px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border-radius: 10px;
+        }
+
+    }
+
+    & .error-message {
+        grid-column: 1 / span 2;
+        grid-row: 1;
+    }
+
+    & .name {
+        grid-column: 1;
+        grid-row: 2;
+    }
+
+    & .contact {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    & .questions {
+        grid-column: 1 / span 2;
+        grid-row: 3;
+    }
+
+    & .verify {
+        grid-column: 1 / span 2;
+        grid-row: 4;
+        & img {
+            max-width: 250px;
+        }
+    }
+
+    & .email {
+        grid-column: 1 / span 2;
+        grid-row: 5;
+        background-color: transparent;
+        place-self: center;
+        & button {
+            display: flex;
+            gap: 10px;
+            background-color: lightgreen;
+            font-size: larger;
+            border: none;
+            outline: none;
+            padding: 10px;
+            padding-left: 20px;
+            padding-right: 20px;
+            border-radius: 20px;
+            margin-bottom: 20px;
+            &:hover {
+                box-shadow: 0 0 5px 5px #0000FF50;
+            }
+        }
+    }
+
     & .captcha {
         display: flex;
         flex-direction: column;
         gap: 10px;
     }
+
+
+
     & input, &,textarea {
         border: none;
         outline: none;
         background-color: transparent;
-        border-bottom: solid 1px lightgray;
-    }
-    & button {
-        display: flex;
-        gap: 10px;
-        background-color: lightgreen;
-        padding: 2px;
-        padding-left: 10px;
-        padding-right: 10px;
-        border-radius: 10px;
-        margin-bottom: 10px;
     }
     `.installGlobal("contact-us");
       ContactUsApp = class ContactUsApp extends AtomControl {
@@ -73,23 +141,29 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           return __awaiter(this, void 0, void 0, function* () {
             const captcha = this.model.captcha = yield FetchBuilder.put("/api/users/captcha").responseAsJson();
             captcha.code = "";
-            this.renderer = XNode.create("div", null, XNode.create(Form, null, XNode.create(FormField, {
+            this.renderer = XNode.create("div", {
+              "event-click": e => this.selectInput(e.target)
+            }, XNode.create(Form, null, XNode.create(FormField, {
+              class: "name",
               label: "Your Name",
               error: Bind.oneWay(() => this.model.name ? "" : "Name is required")
             }, XNode.create("input", {
               autofocus: true,
               value: Bind.twoWaysImmediate(() => this.model.name)
             })), XNode.create(FormField, {
+              class: "contact",
               label: "Your Phone/Email",
               error: Bind.oneWay(() => this.model.email || this.model.phone ? "" : "Email or Phone is required")
             }, XNode.create("input", {
               value: Bind.twoWaysImmediate(() => this.model.email)
             })), XNode.create(FormField, {
+              class: "questions",
               label: "Questions"
             }, XNode.create("textarea", {
               rows: "8",
               value: Bind.twoWaysImmediate(() => this.model.description)
             })), XNode.create(FormField, {
+              class: "verify",
               label: "Verify Code",
               error: Bind.oneWay(() => this.model.captcha.code ? "" : "Code is required")
             }, XNode.create("div", null, XNode.create("div", {
@@ -100,6 +174,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
               type: "tel",
               value: Bind.twoWaysImmediate(() => this.model.captcha.code)
             })))), XNode.create(FormField, {
+              class: "email",
               label: ""
             }, XNode.create("div", null, XNode.create(EmailIconTextButton, {
               "data-submit-event": "send-email",
@@ -107,6 +182,17 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
             })))));
           });
         }
+        selectInput(target) {
+          var _a;
+          while (target) {
+            const input = (_a = target.querySelector("input")) !== null && _a !== void 0 ? _a : target.querySelector("textarea");
+            if (input) {
+              input.focus();
+              return;
+            }
+            target = target.parentElement;
+          }
+        }
         sendEmail() {
           return __awaiter(this, void 0, void 0, function* () {
             yield FetchBuilder.post("/api/site/contact").jsonBody(this.model).responseAsJson();

package/dist/public/contact-us/ContactUsApp.js.map

@@ -1 +1 @@
-{"version":3,"names":["Bind","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreXNode","XNode","_webAtomsCoreDistServicesFetchBuilder","FetchBuilder","_webAtomsCoreDistStyleStyled","styled","_webAtomsCoreDistWebControlsAtomControl","AtomControl","_webAtomsWebControlsDistBasicForm","Form","_webAtomsWebControlsDistBasicFormField","FormField","_commonControlsButtonsIconButton","EmailIconTextButton","_webAtomsCoreDistPack","Pack","_webAtomsCoreDistViewModelAction","Action","execute","css","installGlobal","ContactUsApp","constructor","app","e","document","createElement","model","captcha","name","email","phone","subject","countryCode","description","runAfterInit","runAsync","init","put","responseAsJson","code","renderer","create","label","error","oneWay","autofocus","value","twoWaysImmediate","rows","class","src","id","accessCode","type","text","sendEmail","post","jsonBody","__decorate","onEvent","_export"],"sources":["../../../src/public/contact-us/ContactUsApp.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Bind","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreXNode","XNode","_webAtomsCoreDistServicesFetchBuilder","FetchBuilder","_webAtomsCoreDistStyleStyled","styled","_webAtomsCoreDistWebControlsAtomControl","AtomControl","_webAtomsWebControlsDistBasicForm","Form","_webAtomsWebControlsDistBasicFormField","FormField","_commonControlsButtonsIconButton","EmailIconTextButton","_webAtomsCoreDistPack","Pack","_webAtomsCoreDistViewModelAction","Action","execute","css","installGlobal","ContactUsApp","constructor","app","e","document","createElement","model","captcha","name","email","phone","subject","countryCode","description","runAfterInit","runAsync","init","put","responseAsJson","code","renderer","create","selectInput","target","class","label","error","oneWay","autofocus","value","twoWaysImmediate","rows","src","id","accessCode","type","text","input","_a","querySelector","focus","parentElement","sendEmail","post","jsonBody","__decorate","onEvent","_export"],"sources":["../../../src/public/contact-us/ContactUsApp.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/public/contact-us/ContactUsApp.pack.js

@@ -11058,29 +11058,97 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
     }],
     execute: function () {
       styled.css`
-    display: flex;
-    justify-content: center;
+    display: grid;
     align-items: center;
+    justify-items: stretch;
+
+    padding: 20px;
+
+    & [data-form] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto auto auto auto auto;
+
+        background-color: transparent;
+
+        & .field-error, & .error-message {
+            background-color: transparent;
+            color: red;
+        }
+
+        & > * {
+            background-color: #80808015;
+            padding: 5px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border-radius: 10px;
+        }
+
+    }
+
+    & .error-message {
+        grid-column: 1 / span 2;
+        grid-row: 1;
+    }
+
+    & .name {
+        grid-column: 1;
+        grid-row: 2;
+    }
+
+    & .contact {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    & .questions {
+        grid-column: 1 / span 2;
+        grid-row: 3;
+    }
+
+    & .verify {
+        grid-column: 1 / span 2;
+        grid-row: 4;
+        & img {
+            max-width: 250px;
+        }
+    }
+
+    & .email {
+        grid-column: 1 / span 2;
+        grid-row: 5;
+        background-color: transparent;
+        place-self: center;
+        & button {
+            display: flex;
+            gap: 10px;
+            background-color: lightgreen;
+            font-size: larger;
+            border: none;
+            outline: none;
+            padding: 10px;
+            padding-left: 20px;
+            padding-right: 20px;
+            border-radius: 20px;
+            margin-bottom: 20px;
+            &:hover {
+                box-shadow: 0 0 5px 5px #0000FF50;
+            }
+        }
+    }
+
     & .captcha {
         display: flex;
         flex-direction: column;
         gap: 10px;
     }
+
+
+
     & input, &,textarea {
         border: none;
         outline: none;
         background-color: transparent;
-        border-bottom: solid 1px lightgray;
-    }
-    & button {
-        display: flex;
-        gap: 10px;
-        background-color: lightgreen;
-        padding: 2px;
-        padding-left: 10px;
-        padding-right: 10px;
-        border-radius: 10px;
-        margin-bottom: 10px;
     }
     `.installGlobal("contact-us");
       ContactUsApp = class ContactUsApp extends AtomControl {
@@ -11101,23 +11169,29 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
           return __awaiter(this, void 0, void 0, function* () {
             const captcha = this.model.captcha = yield FetchBuilder.put("/api/users/captcha").responseAsJson();
             captcha.code = "";
-            this.renderer = XNode.create("div", null, XNode.create(Form, null, XNode.create(FormField, {
+            this.renderer = XNode.create("div", {
+              "event-click": e => this.selectInput(e.target)
+            }, XNode.create(Form, null, XNode.create(FormField, {
+              class: "name",
               label: "Your Name",
               error: Bind.oneWay(() => this.model.name ? "" : "Name is required")
             }, XNode.create("input", {
               autofocus: true,
               value: Bind.twoWaysImmediate(() => this.model.name)
             })), XNode.create(FormField, {
+              class: "contact",
               label: "Your Phone/Email",
               error: Bind.oneWay(() => this.model.email || this.model.phone ? "" : "Email or Phone is required")
             }, XNode.create("input", {
               value: Bind.twoWaysImmediate(() => this.model.email)
             })), XNode.create(FormField, {
+              class: "questions",
               label: "Questions"
             }, XNode.create("textarea", {
               rows: "8",
               value: Bind.twoWaysImmediate(() => this.model.description)
             })), XNode.create(FormField, {
+              class: "verify",
               label: "Verify Code",
               error: Bind.oneWay(() => this.model.captcha.code ? "" : "Code is required")
             }, XNode.create("div", null, XNode.create("div", {
@@ -11128,6 +11202,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
               type: "tel",
               value: Bind.twoWaysImmediate(() => this.model.captcha.code)
             })))), XNode.create(FormField, {
+              class: "email",
               label: ""
             }, XNode.create("div", null, XNode.create(EmailIconTextButton, {
               "data-submit-event": "send-email",
@@ -11135,6 +11210,17 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
             })))));
           });
         }
+        selectInput(target) {
+          var _a;
+          while (target) {
+            const input = (_a = target.querySelector("input")) !== null && _a !== void 0 ? _a : target.querySelector("textarea");
+            if (input) {
+              input.focus();
+              return;
+            }
+            target = target.parentElement;
+          }
+        }
         sendEmail() {
           return __awaiter(this, void 0, void 0, function* () {
             yield FetchBuilder.post("/api/site/contact").jsonBody(this.model).responseAsJson();