@web-atoms/web-controls 2.1.265 → 2.1.268

package/dist/basic/Form.sys.js

@@ -0,0 +1,405 @@
+System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS", "./ToggleButtonBar"], function (_export, _context) {
+  "use strict";
+
+  var XNode, StyleRule, CSS, ToggleButtonBar, __rest, FormButtonBar, css, submitFormHandler, checkValidity, moveNext, formId, formGroupSymbol, elementType;
+
+  function FormAction(_a, node) {
+    var _b;
+
+    var {
+      action = "submit",
+      eventClick,
+      "event-click": eventClick2
+    } = _a,
+        a = __rest(_a, ["action", "eventClick", "event-click"]);
+
+    const attributes = (_b = node.attributes) !== null && _b !== void 0 ? _b : node.attributes = {};
+    attributes["data-wa-form-action"] = action;
+    const e = attributes["event-click"] || attributes.eventClick;
+
+    if (e) {
+      attributes["event-submit"] = e;
+      delete attributes["event-click"];
+      delete attributes.eventClick;
+    }
+
+    eventClick !== null && eventClick !== void 0 ? eventClick : eventClick = eventClick2;
+
+    if (action === "submit" && eventClick) {
+      attributes.eventSubmit = eventClick;
+    }
+
+    node.attributes = Object.assign(Object.assign({}, a), attributes);
+    return node;
+  }
+
+  function SubmitAction(a, node) {
+    a.action = "submit";
+    return FormAction(a, node);
+  }
+
+  function CancelAction(a, node) {
+    a.action = "cancel";
+    return FormAction(a, node);
+  }
+
+  function SubmitButton(_a, ...nodes) {
+    var {
+      eventClick
+    } = _a,
+        others = __rest(_a, ["eventClick"]);
+
+    return XNode.create("button", Object.assign({
+      "data-wa-form-action": "submit",
+      eventSubmit: eventClick
+    }, others), ...nodes);
+  }
+
+  function findSubmitAction(e) {
+    var _a;
+
+    let button = e.target;
+
+    if (e.type === "submit") {
+      e.preventDefault();
+      button = e.submitter;
+    }
+
+    while (button) {
+      const action = (_a = button.dataset.waFormAction) !== null && _a !== void 0 ? _a : button.dataset.event;
+
+      if (/submit|cancel/i.test(action)) {
+        return {
+          button,
+          action
+        };
+      }
+
+      button = button.parentElement;
+    }
+
+    return {
+      button
+    };
+  }
+
+  function FormGroup(fg, ...nodes) {
+    fg[formGroupSymbol] = true;
+    return XNode.create("div", Object.assign({}, fg), ...nodes);
+  }
+
+  function Form(_a, ...nodes) {
+    var _b;
+
+    var {
+      id = formId++,
+      focusNextOnEnter = true,
+      scrollable,
+      eventSubmit
+    } = _a,
+        a = __rest(_a, ["id", "focusNextOnEnter", "scrollable", "eventSubmit"]);
+
+    if (focusNextOnEnter) {
+      a.eventKeypress = moveNext(eventSubmit);
+    }
+
+    a["data-form-id"] = id;
+    a["data-scrollable"] = !!scrollable;
+
+    if (!eventSubmit) {
+      a["data-wa-show-errors"] = "yes";
+    }
+
+    const fields = [];
+
+    for (const iterator of nodes) {
+      if (!iterator) {
+        continue;
+      }
+
+      const ca = iterator.attributes;
+
+      if (ca === null || ca === void 0 ? void 0 : ca[formGroupSymbol]) {
+        for (const child of iterator.children) {
+          const cha = (_b = child.attributes) !== null && _b !== void 0 ? _b : child.attributes = {};
+          cha["data-group"] = ca.group;
+          fields.push(child);
+        }
+
+        continue;
+      }
+
+      fields.push(iterator);
+    }
+
+    return XNode.create("div", Object.assign({
+      "data-wa-form": "wa-form"
+    }, a, {
+      eventSubmitForm: eventSubmit,
+      eventClick: checkValidity(eventSubmit)
+    }), ...fields);
+  }
+
+  function FormLayout(_a, ...nodes) {
+    var _b, _c, _d;
+
+    var {
+      id = formId++,
+      focusNextOnEnter = true,
+      scrollable,
+      eventSubmit,
+      header,
+      footer
+    } = _a,
+        a = __rest(_a, ["id", "focusNextOnEnter", "scrollable", "eventSubmit", "header", "footer"]);
+
+    if (focusNextOnEnter) {
+      a.eventKeypress = moveNext(eventSubmit);
+    }
+
+    a["data-form-id"] = id;
+    a["data-scrollable"] = !!scrollable;
+
+    if (!eventSubmit) {
+      a["data-wa-show-errors"] = "yes";
+    }
+
+    const fields = [];
+
+    for (const iterator of nodes) {
+      if (!iterator) {
+        continue;
+      }
+
+      const et = iterator[elementType];
+
+      if (et !== void 0) {
+        if (et === "header") {
+          header = iterator;
+          delete iterator[elementType];
+          continue;
+        }
+
+        if (et === "footer") {
+          footer = iterator;
+          delete iterator[elementType];
+          continue;
+        }
+      }
+
+      const ca = iterator.attributes;
+
+      if (ca === null || ca === void 0 ? void 0 : ca[formGroupSymbol]) {
+        for (const child of iterator.children) {
+          const cha = (_b = child.attributes) !== null && _b !== void 0 ? _b : child.attributes = {};
+          cha["data-group"] = ca.group;
+          fields.push(child);
+        }
+
+        continue;
+      }
+
+      fields.push(iterator);
+    }
+
+    if (header) {
+      const ha = (_c = header.attributes) !== null && _c !== void 0 ? _c : header.attributes = {};
+      ha["data-element"] = "header";
+    }
+
+    if (footer) {
+      const ha = (_d = footer.attributes) !== null && _d !== void 0 ? _d : footer.attributes = {};
+      ha["data-element"] = "footer";
+    }
+
+    return XNode.create("div", Object.assign({
+      "data-wa-form": "wa-form",
+      "data-form-layout": "form-layout"
+    }, a, {
+      eventSubmitForm: eventSubmit,
+      eventClick: checkValidity(eventSubmit)
+    }), header, XNode.create("div", {
+      "data-element": "content"
+    }, XNode.create("div", null, ...fields)), footer);
+  }
+
+  _export({
+    FormAction: FormAction,
+    SubmitAction: SubmitAction,
+    CancelAction: CancelAction,
+    SubmitButton: SubmitButton,
+    FormGroup: FormGroup,
+    default: Form,
+    FormLayout: FormLayout
+  });
+
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }, function (_ToggleButtonBar) {
+      ToggleButtonBar = _ToggleButtonBar.default;
+    }],
+    execute: function () {
+      __rest = void 0 && (void 0).__rest || function (s, e) {
+        var t = {};
+
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+        if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+        }
+        return t;
+      };
+
+      _export("FormButtonBar", FormButtonBar = ToggleButtonBar);
+
+      css = CSS(StyleRule().verticalFlexLayout({
+        alignItems: "stretch"
+      }).displayNone(" .field-error:empty").displayNone(":not([data-wa-show-errors=yes]) .field-error:not(:empty)").child(StyleRule("button").alignSelf("flex-start")).and(StyleRule("[data-scrollable=true]").justifyContent("flex-start").overflow("auto")), "*[data-wa-form=wa-form]");
+
+      submitFormHandler = form => {
+        if (!form.dataset.waShowErrors) {
+          form.dataset.waShowErrors = "yes";
+        }
+
+        setTimeout(() => {
+          var _a, _b;
+
+          const all = Array.from(form.getElementsByClassName("field-error"));
+
+          for (const iterator of all) {
+            if (iterator.textContent) {
+              alert((_b = (_a = form.dataset) === null || _a === void 0 ? void 0 : _a.errorMessage) !== null && _b !== void 0 ? _b : "Please fix all validations");
+              return;
+            }
+          }
+
+          form.dispatchEvent(new CustomEvent("submitForm"));
+        }, 100);
+      };
+
+      checkValidity = handler => e => {
+        const form = e.currentTarget;
+        const {
+          button,
+          action
+        } = findSubmitAction(e);
+
+        if (!button) {
+          return;
+        }
+
+        if (handler) {
+          submitFormHandler(form);
+          return;
+        }
+
+        if (action === "cancel") {
+          form.dataset.waShowErrors = "";
+          return;
+        }
+
+        if (!form.dataset.waShowErrors) {
+          form.dataset.waShowErrors = "yes";
+        }
+
+        setTimeout(() => {
+          var _a, _b;
+
+          const all = Array.from(form.getElementsByClassName("field-error"));
+
+          for (const iterator of all) {
+            if (iterator.textContent) {
+              alert((_b = (_a = form.dataset) === null || _a === void 0 ? void 0 : _a.errorMessage) !== null && _b !== void 0 ? _b : "Please fix all validations");
+              return;
+            }
+          }
+
+          button.dispatchEvent(new CustomEvent("submit"));
+        }, 100);
+      };
+
+      moveNext = handler => e => {
+        if (!/enter|submit|return/i.test(e.key)) {
+          return;
+        }
+
+        const element = e.target;
+
+        if (!element.tagName) {
+          return;
+        }
+
+        if (handler) {
+          if (element.tagName !== "TEXTAREA") {
+            submitFormHandler(e.currentTarget);
+          }
+
+          return;
+        }
+
+        if (element.dataset.waFormAction === "submit") {
+          element.dispatchEvent(new MouseEvent("click"));
+          return;
+        }
+
+        if (/input/i.test(element.tagName)) {
+          e.preventDefault();
+          element.dispatchEvent(new KeyboardEvent("keypress", {
+            key: "tab"
+          }));
+        }
+      };
+
+      document.body.addEventListener("click", e => {
+        let start = e.target;
+        let id;
+
+        while (start) {
+          id = start.dataset.submitFormId;
+
+          if (id) {
+            break;
+          }
+
+          start = start.parentElement;
+        }
+
+        if (!start) {
+          return;
+        }
+
+        const form = document.body.querySelector(`[data-form-id="${id}"]`);
+        submitFormHandler(form);
+      });
+      formId = 0;
+      formGroupSymbol = Symbol("formGroup");
+      CSS(StyleRule().display("grid").alignSelf("stretch").justifyContent("stretch").flex("1 1 100%").gridTemplateRows("auto 1fr auto").gridTemplateColumns("1fr").child(StyleRule("[data-element=header]").gridRowStart("1")).child(StyleRule("[data-element=content]").gridRowStart("2").overflow("auto").child(StyleRule("div").verticalFlexLayout({
+        alignItems: "stretch",
+        gap: 10
+      }))).child(StyleRule("[data-element=footer]").gridRowStart("3")), "*[data-form-layout=form-layout]");
+      elementType = Symbol.for("elementType");
+
+      FormLayout.Footer = ({}, child) => {
+        child[elementType] = "footer";
+        return child;
+      };
+
+      FormLayout.Header = ({}, child) => {
+        child[elementType] = "header";
+        return child;
+      };
+
+      Form.newId = () => formId++;
+
+      Form.submitId = id => ({
+        "data-submit-form-id": id.toString()
+      });
+    }
+  };
+});
+//# sourceMappingURL=Form.sys.js.map

package/dist/basic/Form.sys.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":["FormAction","_a","node","action","eventClick","eventClick2","a","attributes","_b","e","eventSubmit","Object","SubmitAction","CancelAction","SubmitButton","nodes","others","XNode","findSubmitAction","button","target","type","preventDefault","submitter","dataset","waFormAction","event","test","parentElement","FormGroup","fg","formGroupSymbol","Form","id","formId","focusNextOnEnter","scrollable","eventKeypress","moveNext","fields","iterator","ca","child","children","cha","group","push","eventSubmitForm","checkValidity","FormLayout","header","footer","et","elementType","ha","_c","_d","StyleRule","CSS","ToggleButtonBar","FormButtonBar","css","verticalFlexLayout","alignItems","displayNone","alignSelf","and","justifyContent","overflow","submitFormHandler","form","waShowErrors","setTimeout","all","Array","from","getElementsByClassName","textContent","alert","errorMessage","dispatchEvent","CustomEvent","handler","currentTarget","key","element","tagName","MouseEvent","KeyboardEvent","document","body","addEventListener","start","submitFormId","querySelector","Symbol","display","flex","gridTemplateRows","gridTemplateColumns","gridRowStart","gap","for","Footer","Header","newId","submitId","toString"],"sourceRoot":"","sources":["../../src/basic/Form.tsx"],"sourcesContent":[null]}

package/dist/basic/FormDialog.sys.js

@@ -0,0 +1,35 @@
+System.register(["@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS", "./Form"], function (_export, _context) {
+  "use strict";
+
+  var XNode, StyleRule, CSS, Form;
+
+  function FormDialog(a, ...nodes) {
+    return XNode.create("div", {
+      "data-form-dialog": "true"
+    }, XNode.create(Form, Object.assign({
+      scrollable: true
+    }, a), ...nodes));
+  }
+
+  _export("default", FormDialog);
+
+  return {
+    setters: [function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }, function (_Form) {
+      Form = _Form.default;
+    }],
+    execute: function () {
+      CSS(StyleRule().display("flex").overflow("auto").position("relative").child(StyleRule("[data-wa-form]").marginBottom(70).child(StyleRule("[data-command-row]").absolutePosition({
+        left: 0,
+        right: 0,
+        bottom: 0
+      }))), "div[data-form-dialog=true]");
+    }
+  };
+});
+//# sourceMappingURL=FormDialog.sys.js.map

package/dist/basic/FormDialog.sys.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;EAqBc,SAAUA,UAAV,CAAqBC,CAArB,EAA+B,GAAIC,KAAnC,EAAiD;IAC3D,OAAOC;MAAA,oBAAsB;IAAtB,GACHA,aAACC,IAAD,EAAKC;MAACC,UAAU,EAAE;IAAb,GAAwBL,CAAxB,CAAL,EAA8B,GACpBC,KADV,CADG,CAAP;EAKH;;qBANuBF,U;;;;MArBjBG,K;;MACAI,S;;MACAC,G;;MACAJ,I;;;MAEPI,GAAG,CAACD,SAAS,GACRE,OADD,CACS,MADT,EAECC,QAFD,CAEU,MAFV,EAGCC,QAHD,CAGU,UAHV,EAICC,KAJD,CAIOL,SAAS,CAAC,gBAAD,CAAT,CACFM,YADE,CACW,EADX,EAEFD,KAFE,CAEIL,SAAS,CAAC,oBAAD,CAAT,CACFO,gBADE,CACe;QACdC,IAAI,EAAE,CADQ;QAEdC,KAAK,EAAE,CAFO;QAGdC,MAAM,EAAE;MAHM,CADf,CAFJ,CAJP,CAAD,EAcD,4BAdC,CAAH","names":["FormDialog","a","nodes","XNode","Form","Object","scrollable","StyleRule","CSS","display","overflow","position","child","marginBottom","absolutePosition","left","right","bottom"],"sourceRoot":"","sources":["../../src/basic/FormDialog.tsx"],"sourcesContent":[null]}

package/dist/basic/FormField.sys.js

@@ -0,0 +1,214 @@
+System.register(["@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/FormattedString", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/services/NavigationService", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/core/dist/web/styles/CSS"], function (_export, _context) {
+  "use strict";
+
+  var Bind, Colors, FormattedString, XNode, NavigationService, StyleRule, PopupWindow, CSS, __rest, css;
+
+  function FormField(_a, node) {
+    var _b;
+
+    var {
+      label,
+      required,
+      error,
+      helpIcon = "fas fa-question-circle",
+      help,
+      helpEventClick,
+      helpTitle,
+      border = false
+    } = _a,
+        others = __rest(_a, ["label", "required", "error", "helpIcon", "help", "helpEventClick", "helpTitle", "border"]);
+
+    if (node) {
+      const na = (_b = node.attributes) !== null && _b !== void 0 ? _b : node.attributes = {};
+      na["data-content"] = "content";
+    }
+
+    if (!helpEventClick && help) {
+      helpEventClick = Bind.event((s, e) => {
+        const app = s.app;
+
+        if (typeof help === "string" || help instanceof FormattedString) {
+          const ns = app.resolve(NavigationService);
+          ns.notify(help);
+          return;
+        }
+
+        class HelpPopup extends PopupWindow {
+          create() {
+            this.render(XNode.create("div", {
+              "data-form-field-help": "help-window"
+            }, help));
+          }
+
+        }
+
+        HelpPopup.showWindow({
+          title: helpTitle !== null && helpTitle !== void 0 ? helpTitle : "Help"
+        });
+      });
+    }
+
+    return XNode.create("div", Object.assign({
+      "data-wa-form-field": "wa-form-field",
+      "data-border": border
+    }, others), label && XNode.create("label", {
+      class: "label",
+      text: label
+    }), required && XNode.create("span", {
+      "data-required": "required",
+      class: required,
+      text: "*"
+    }), border && XNode.create("i", {
+      "data-border": "border"
+    }), node, help && XNode.create("i", {
+      "data-help": "help",
+      class: helpIcon,
+      title: helpTitle,
+      eventClick: helpEventClick
+    }), XNode.create("div", {
+      class: "field-error",
+      text: error
+    }));
+  }
+
+  function HorizontalFormField(_a, node) {
+    var _b;
+
+    var {
+      label,
+      required,
+      error,
+      helpIcon = "fas fa-question-circle",
+      help,
+      helpEventClick,
+      helpTitle,
+      border = false
+    } = _a,
+        others = __rest(_a, ["label", "required", "error", "helpIcon", "help", "helpEventClick", "helpTitle", "border"]);
+
+    if (node) {
+      const na = (_b = node.attributes) !== null && _b !== void 0 ? _b : node.attributes = {};
+      na["data-content"] = "content";
+    }
+
+    if (!helpEventClick && help) {
+      helpEventClick = Bind.event((s, e) => {
+        const app = s.app;
+
+        if (typeof help === "string" || help instanceof FormattedString) {
+          const ns = app.resolve(NavigationService);
+          ns.notify(help);
+          return;
+        }
+
+        class HelpPopup extends PopupWindow {
+          create() {
+            this.render(XNode.create("div", {
+              "data-form-field-help": "help-window"
+            }, help));
+          }
+
+        }
+
+        HelpPopup.showWindow({
+          title: helpTitle !== null && helpTitle !== void 0 ? helpTitle : "Help"
+        });
+      });
+    }
+
+    return XNode.create("div", Object.assign({
+      "data-wa-form-field": "wa-form-field",
+      "data-layout": "horizontal",
+      "data-border": border
+    }, others), label && XNode.create("label", {
+      class: "label",
+      text: label
+    }), required && XNode.create("span", {
+      "data-required": "required",
+      class: required,
+      text: "*"
+    }), border && XNode.create("i", {
+      "data-border": "border"
+    }), node, help && XNode.create("i", {
+      "data-help": "help",
+      class: helpIcon,
+      title: helpTitle,
+      eventClick: helpEventClick
+    }), XNode.create("div", {
+      class: "field-error",
+      text: error
+    }));
+  }
+
+  _export({
+    default: FormField,
+    HorizontalFormField: HorizontalFormField
+  });
+
+  return {
+    setters: [function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreFormattedString) {
+      FormattedString = _webAtomsCoreDistCoreFormattedString.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistServicesNavigationService) {
+      NavigationService = _webAtomsCoreDistServicesNavigationService.NavigationService;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebServicesPopupService) {
+      PopupWindow = _webAtomsCoreDistWebServicesPopupService.PopupWindow;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }],
+    execute: function () {
+      __rest = void 0 && (void 0).__rest || function (s, e) {
+        var t = {};
+
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+        if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+        }
+        return t;
+      };
+
+      css = CSS(StyleRule().display("grid").alignItems("center").gridTemplateColumns("auto 1fr auto auto").gridTemplateRows("auto auto auto").child(StyleRule("[data-content=content]").gridRowStart("2").gridColumnStart("1").gridColumnEnd("span 2").marginTop(5).marginBottom(5)).and(StyleRule("[data-border=true]").nested(StyleRule("input").border("none").outline("none")).nested(StyleRule("textarea").border("none").outline("none")).nested(StyleRule("select").border("none"))).child(StyleRule("i[data-border=border]").gridColumnStart("1").gridColumnEnd("span 3").gridRowStart("3").alignSelf("flex-end").borderBottomStyle("solid").borderBottomWidth("1px").borderBottomColor(Colors.lightGray)).and(StyleRule("[data-focused=true]").child(StyleRule("i[data-border=border]").borderBottomColor(Colors.black))).child(StyleRule("i[data-help=help]").gridRowStart("2").gridColumnStart("3").padding(5).fontSize("x-large").cursor("pointer").marginLeft("auto").color(Colors.lightGreen)).child(StyleRule(".field-error").gridRowStart("4").gridColumnStart("1").gridColumnEnd("span 3").padding(5).margin(5).borderRadius(9999).backgroundColor(Colors.red).color(Colors.white).fontSize("smaller").and(StyleRule(":empty").display("none"))).child(StyleRule("span[data-required=required]").gridColumnStart("2").visibility("hidden").color(Colors.red).and(StyleRule(".true").visibility("visible"))).and(StyleRule("[data-layout=horizontal]").gridTemplateColumns("auto auto 1fr auto").gridTemplateRows("auto auto").child(StyleRule("label.label").gridRowStart("2").marginRight(5).marginBottom(5)).child(StyleRule("[data-content=content]").gridRowStart("2").gridColumnStart("3").marginTop(0).marginBottom(5)).child(StyleRule("i[data-help=help]").gridRowStart("2").gridColumnStart("4")).child(StyleRule(".field-error").gridRowStart("4").gridColumnStart("1").gridColumnEnd("span 3")).child(StyleRule("span[data-required=required]").gridRowStart("2").gridColumnStart("2").marginRight(5).display("none").color(Colors.red).and(StyleRule(".true").display("inline")))), "div[data-wa-form-field=wa-form-field]");
+      CSS(StyleRule().width(300).maxHeight(500).overflow("auto").padding(10).verticalFlexLayout({
+        alignItems: "center",
+        justifyContent: "flex-start"
+      }), "div[data-form-field-help=help-window]");
+      document.addEventListener("focusin", e => {
+        let {
+          target
+        } = e;
+
+        while (target) {
+          if (target.dataset.waFormField === "wa-form-field") {
+            target.dataset.focused = "true";
+            break;
+          }
+
+          target = target.parentElement;
+        }
+      });
+      document.addEventListener("focusout", e => {
+        let {
+          target
+        } = e;
+
+        while (target) {
+          if (target.dataset.waFormField === "wa-form-field") {
+            delete target.dataset.focused;
+            break;
+          }
+
+          target = target.parentElement;
+        }
+      });
+    }
+  };
+});
+//# sourceMappingURL=FormField.sys.js.map