@web-atoms/web-controls 2.3.137 → 2.3.138

package/src/html-editor/commands/ChangeColor.tsx

@@ -1,9 +1,8 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import PopupButton from "../../basic/PopupButton";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
+import styled from "@web-atoms/core/dist/style/styled";
 
 const gray = [
     "rgb(0,0,0)",
@@ -90,27 +89,30 @@ const all = [
     ]
 ];
 
-const colorSelectorCss = CSS(StyleRule("color-selector")
-    .width(400)
-    .display("flex")
-    .justifyContent("space-evenly" as any)
-    .child(StyleRule("table")
-        .display("inline-table")
-    )
-    .nested(StyleRule(".color-button")
-        .display("inline-block")
-        .width(20)
-        .height(20)
-        .borderWidth(1)
-        .margin(1)
-        .cursor("pointer")
-        .borderStyle("solid")
-        .borderColor("transparent")
-        .hover(StyleRule()
-            .borderColor("black")
-        )
-    )
-);
+const colorSelectorCss = styled.css `
+
+    width: 400px;
+    display: flex;
+    justify-content: space-evenly;
+
+    & > table {
+        display: inline-table; 
+    }
+    
+    & .color-button {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border-width: 1px;
+        margin: 1px;
+        cursor: pointer;
+        border-style: solid;
+        border-color: transparent; 
+        &:hover {
+            border-color: black; 
+        }
+    }    
+    `.installLocal();
 
 function TextColor(color: string) {
     return <div

package/src/html-editor/commands/ChangeFont.tsx

@@ -1,25 +1,13 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import PopupButton, { MenuItem } from "../../basic/PopupButton";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
+import styled from "@web-atoms/core/dist/style/styled";
 
-const fontMenuCSS = CSS(StyleRule()
-    .padding(5)
-    .width(170)
-    // .child(StyleRule(".menu")
-    //     .padding(5)
-    //     .hoverBackgroundColor(Colors.lightGreen)
-    //     .child(StyleRule("i")
-    //         .opacity("0")
-    //         .and(StyleRule(".selected")
-    //             .opacity("1")
-    //         )
-    //     )
-    // )
-);
+const fontMenuCSS = styled.css `
+    padding: 5px;
+    width: 170px;
+`.installLocal();
 
 const fonts: Array<[string, string[]]> = [
     ["Sans Serif", ["arial", "sans-serif"]],

package/src/html-editor/commands/Separator.tsx

@@ -1,17 +1,15 @@
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import styled from "@web-atoms/core/dist/style/styled";
 
-const separatorCss = CSS(StyleRule()
-    .backgroundColor(Colors.darkGray)
-    .marginLeft(4)
-    .marginRight(4)
-    .display("inline-block")
-    .marginTop(4)
-    .height(20)
-    .width(2)
-);
+const separatorCss = styled.css `
+    background-color: #a9a9a9;
+    margin-left: 4px;
+    margin-right: 4px;
+    display: inline-block;
+    margin-top: 4px;
+    height: 20px;
+    width: 2px;
+    `.installLocal();
 
 export default function Separator() {
     return <div class={separatorCss}></div>;

package/src/html-editor/commands/Source.tsx

@@ -1,19 +1,18 @@
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
 import CommandButton from "./CommandButton";
 import HtmlCommands from "./HtmlCommands";
+import styled from "@web-atoms/core/dist/style/styled";
 
-const css = CSS(StyleRule()
-    .child(StyleRule("textarea")
-        .minHeight(500)
-        .minWidth(700)
-    )
-);
+const css = styled.css `
+    & > textarea {
+        min-height: 500px;
+        min-width: 700px;
+    }
+`.installLocal();
 
 async function showDialog(s: AtomHtmlEditor, e: Event): Promise<string> {
 

package/src/mobile-app/MobileApp.tsx

@@ -3,17 +3,14 @@ import { AtomLoader } from "@web-atoms/core/dist/core/AtomLoader";
 import { AtomUri } from "@web-atoms/core/dist/core/AtomUri";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import sleep from "@web-atoms/core/dist/core/sleep";
-import { CancelToken, IClassOf, IDisposable } from "@web-atoms/core/dist/core/types";
+import { IDisposable } from "@web-atoms/core/dist/core/types";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import { IPageOptions, NavigationService } from "@web-atoms/core/dist/services/NavigationService";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { NavigationService } from "@web-atoms/core/dist/services/NavigationService";
 import { AtomWindowViewModel } from "@web-atoms/core/dist/view-model/AtomWindowViewModel";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import { AtomUI, ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
-import PopupService, { IDialogOptions, IPopup, PopupControl, PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
+import PopupService, { IDialogOptions, PopupWindow } from "@web-atoms/core/dist/web/services/PopupService";
 import PageNavigator from "../PageNavigator";
 import { StringHelper } from "@web-atoms/core/dist/core/StringHelper";
 import styled from "@web-atoms/core/dist/style/styled";
@@ -60,26 +57,6 @@ import styled from "@web-atoms/core/dist/style/styled";
     }
 
     `.installGlobal("[data-page-app=page-app]");
-
-// CSS(StyleRule()
-//     .absolutePosition({ left: "-80%", top: 0 })
-//     .width("80%")
-//     .height("100%")
-//     .overflow("hidden")
-//     .transition("left 0.3s ease-out")
-// , "div[data-drawer-page=drawer-page]");
-
-
-// CSS(StyleRule()
-//     .paddingBottom(500)
-// , "body[data-keyboard=shown] & > [data-page-element=content]");
-
-// if (/iphone|ios/i.test(window.navigator.userAgent)) {
-//     CSS(StyleRule()
-//         .marginBottom(500)
-//     , "body[data-keyboard=shown] &");
-// }
-
     styled.css `
 
     position: absolute;

package/src/player/AtomVideoPlayer.tsx

@@ -1,12 +1,9 @@
 import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule, { PlayState } from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 import { installInputRangeStyle } from "./input-range-style";
 import styled from "@web-atoms/core/dist/style/styled";
 

package/src/player/TrackProgress.tsx

@@ -1,15 +1,14 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import styled from "@web-atoms/core/dist/style/styled";
 
-CSS(StyleRule()
-    .height(5)
-    .child(StyleRule("*")
-        .position("absolute")
-        .left(0)
-        .top(0)
-    )
-, "*[data-track-progress=track-progress]");
+    styled.css `
+        height: 5px;
+        & > * {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+    `.installGlobal("*[data-track-progress=track-progress]");
 
 export default function TrackProgress(a) {
     return <div

package/src/toggle-view/AtomToggleView.tsx

@@ -1,10 +1,6 @@
-import Bind from "@web-atoms/core/dist/core/Bind";
 import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
-import Colors from "@web-atoms/core/dist/core/Colors";
 import XNode from "@web-atoms/core/dist/core/XNode";
-import StyleRule from "@web-atoms/core/dist/style/StyleRule";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
-import CSS from "@web-atoms/core/dist/web/styles/CSS";
 
 import "../basic/styles/toggle-view-style";
 import IElement from "../basic/IElement";

package/dist/basic/OldForm.d.ts

@@ -1,79 +0,0 @@
-import Command from "@web-atoms/core/dist/core/Command";
-import XNode from "@web-atoms/core/dist/core/XNode";
-import IElement from "./IElement";
-import ToggleButtonBar from "./ToggleButtonBar";
-export declare const FormButtonBar: typeof ToggleButtonBar;
-export interface ISubmitButton {
-    eventClick: any;
-    class?: string;
-    [key: string]: any;
-}
-export interface ISubmitAction extends IElement {
-    action: "submit";
-    eventClick?: any;
-    "event-click"?: any;
-}
-export interface ICancelAction extends IElement {
-    action: "cancel";
-    eventClick?: any;
-    "event-click"?: any;
-}
-export type IFormAction = ISubmitAction | ICancelAction;
-/**
- * This is just a decorator, you must have a child button for this to work
- * @param action submit | cancel
- * @param node child node where action will be applied
- * @returns XNode
- */
-export declare function FormAction({ action, eventClick, "event-click": eventClick2, ...a }: IFormAction, node: XNode): XNode;
-/**
- * @deprecated Use Form with eventSubmit and button with data-event="submit"
- */
-export declare function SubmitAction(a: IElement, node: XNode): XNode;
-/**
- * @deprecated Use Form with eventSubmit and button with data-event="submit"
- */
-export declare function CancelAction(a: IElement, node: XNode): XNode;
-/**
- * @deprecated Use Form with eventSubmit and button with data-event="submit"
- */
-export declare function SubmitButton({ eventClick, ...others }: ISubmitButton, ...nodes: XNode[]): any;
-export interface IForm {
-    id?: number;
-    class?: any;
-    scrollable?: boolean;
-    /**
-     * If set, when an enter key is pressed on
-     * non textarea element, form will be submitted automatically
-     */
-    eventSubmit?: any;
-    /**
-     * By default it is true, when user presses enter button on an input
-     * the focus will move on to the next input element
-     */
-    focusNextOnEnter?: boolean;
-    [key: string]: any;
-    submitCommand?: Command;
-}
-export interface IFormGroup {
-    group: string;
-}
-export declare function FormGroup(fg: IFormGroup, ...nodes: XNode[]): any;
-declare function OldForm({ id, focusNextOnEnter, scrollable, eventSubmit, submitCommand, ...a }: IForm, ...nodes: XNode[]): any;
-declare namespace OldForm {
-    var newId: () => number;
-    var submitId: (id: number) => {
-        "data-submit-form-id": string;
-    };
-}
-export default OldForm;
-export interface IFormLayout extends IForm {
-    header?: XNode;
-    footer?: XNode;
-}
-export declare function FormLayout({ id, focusNextOnEnter, scrollable, eventSubmit, header, footer, ...a }: IFormLayout, ...nodes: XNode[]): any;
-export declare namespace FormLayout {
-    var Footer: ({}: {}, child: XNode) => XNode;
-    var Header: ({}: {}, child: XNode) => XNode;
-}
-//# sourceMappingURL=OldForm.d.ts.map

package/dist/basic/OldForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OldForm.d.ts","sourceRoot":"","sources":["../../src/basic/OldForm.tsx"],"names":[],"mappings":"AACA,OAAO,OAAO,MAAM,mCAAmC,CAAC;AACxD,OAAO,KAAK,MAAM,iCAAiC,CAAC;AAKpD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,eAAO,MAAM,aAAa,wBAAkB,CAAC;AAe7C,MAAM,WAAW,aAAa;IAC1B,UAAU,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC3C,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;CACvB;AAED,MAAM,WAAW,aAAc,SAAQ,QAAQ;IAC3C,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;CACvB;AAED,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,aAAa,CAAC;AAExD;;;;;GAKG;AACH,wBAAgB,UAAU,CACtB,EACI,MAAiB,EACjB,UAAU,EACV,aAAa,EAAE,WAAW,EAC1B,GAAI,CAAC,EACR,EAAE,WAAW,EACd,IAAI,EAAE,KAAK,SAed;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,SAGpD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,SAGpD;AAED;;GAEG;AACH,wBAAgB,YAAY,CACxB,EAAE,UAAU,EACR,GAAI,MAAM,EAAC,EAAE,aAAa,EAC9B,GAAI,KAAK,EAAE,KAAK,EAAE,OAIrB;AAmHD,MAAM,WAAW,KAAK;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,UAAU,CAAC,EAAE,OAAO,CAAE;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IAEnB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAMD,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAC;CAGjB;AAED,wBAAgB,SAAS,CACrB,EAAE,EAAE,UAAU,EACd,GAAI,KAAK,EAAE,KAAK,EAAE,OAOrB;AAED,iBAAwB,OAAO,CAC3B,EACI,EAAa,EACb,gBAAuB,EACvB,UAAU,EACV,WAAW,EACX,aAAa,EACb,GAAI,CAAC,EACR,EAAE,KAAK,EACR,GAAI,KAAK,EAAE,KAAK,EAAE,OAoCrB;kBA7CuB,OAAO;;;;;;eAAP,OAAO;AA+C/B,MAAM,WAAW,WAAY,SAAQ,KAAK;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;CAClB;AA0BD,wBAAgB,UAAU,CACtB,EACI,EAAa,EACb,gBAAuB,EACvB,UAAU,EACV,WAAW,EACX,MAAM,EACN,MAAM,EACN,GAAI,CAAC,EACR,EAAE,WAAW,EACd,GAAI,KAAK,EAAE,KAAK,EAAE,OAkErB;yBA5Ee,UAAU"}

package/dist/basic/OldForm.js

@@ -1,318 +0,0 @@
-System.register(["tslib", "@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 __rest, XNode, StyleRule, CSS, ToggleButtonBar, 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 OldForm(_a, ...nodes) {
-    var _b;
-    var {
-        id = formId++,
-        focusNextOnEnter = true,
-        scrollable,
-        eventSubmit,
-        submitCommand
-      } = _a,
-      a = __rest(_a, ["id", "focusNextOnEnter", "scrollable", "eventSubmit", "submitCommand"]);
-    if (focusNextOnEnter) {
-      a.eventKeypress = moveNext(eventSubmit);
-    }
-    a["data-form-id"] = id;
-    a["data-scrollable"] = !!scrollable;
-    if (!eventSubmit) {
-      a["data-wa-show-errors"] = "yes";
-    }
-    if (submitCommand) {
-      a["event-" + submitCommand.name] = checkValidity(eventSubmit);
-    }
-    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: OldForm,
-    FormLayout: FormLayout
-  });
-  return {
-    setters: [function (_tslib) {
-      __rest = _tslib.__rest;
-    }, function (_webAtomsCoreDistCoreXNode) {
-      XNode = _webAtomsCoreDistCoreXNode.default;
-    }, function (_webAtomsCoreDistStyleStyleRule) {
-      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
-    }, function (_webAtomsCoreDistWebStylesCSS) {
-      CSS = _webAtomsCoreDistWebStylesCSS.default;
-    }, function (_ToggleButtonBar) {
-      ToggleButtonBar = _ToggleButtonBar.default;
-    }],
-    execute: function () {
-      _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 (/^INPUT$/.test(element.tagName)) {
-            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;
-      };
-      OldForm.newId = () => formId++;
-      OldForm.submitId = id => ({
-        "data-submit-form-id": id.toString()
-      });
-    }
-  };
-});
-//# sourceMappingURL=OldForm.js.map