@web-atoms/web-controls 2.1.5 → 2.1.6

package/dist/basic/Button.d.ts

@@ -0,0 +1,19 @@
+export interface IButton {
+    id?: string;
+    icon?: string;
+    text?: string;
+    eventClick?: any;
+    href?: string;
+    target?: string;
+    title?: string;
+    styleDisplay?: string;
+    class?: string;
+    isVisible?: any;
+    subClass?: string;
+}
+declare function Button({ id, icon, text, eventClick, href, target, title, styleDisplay, class: className, subClass }: IButton): any;
+declare namespace Button {
+    var className: string;
+}
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/basic/Button.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,OAAO;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAqCD,iBAAwB,MAAM,CAAC,EAC3B,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,MAAM,EACN,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EACX,EAAE,OAAO,OA6BT;kBAxCuB,MAAM;;;eAAN,MAAM"}

package/dist/basic/Button.js

@@ -0,0 +1,63 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const Colors_1 = require("@web-atoms/core/dist/core/Colors");
+    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
+    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
+    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
+    const css = (0, CSS_1.default)((0, StyleRule_1.default)()
+        .padding(8)
+        .marginLeft(3)
+        .marginRight(3)
+        .roundBorderFull()
+        .display("inline-block")
+        .height(40)
+        .minWidth(40)
+        .defaultBoxShadow()
+        .cursor("pointer")
+        .backgroundColor(Colors_1.default.transparent)
+        .hoverBackgroundColor(Colors_1.default.lightGreen)
+        .and((0, StyleRule_1.default)(".pressed")
+        .backgroundColor(Colors_1.default.lightSteelBlue))
+        .child((0, StyleRule_1.default)("label.label")
+        .display("flex")
+        .alignItems("center")
+        .gap("5px")
+        .child((0, StyleRule_1.default)(".fad")
+        .fontSize(18)
+        .width("100%")
+        .color(Colors_1.default.purple.withAlphaPercent(0.5))
+        .cursor("pointer")
+        .and((0, StyleRule_1.default)(".red")
+        .color(Colors_1.default.red)))
+        .child((0, StyleRule_1.default)("span")
+        .whiteSpace("nowrap"))));
+    function Button({ id, icon, text, eventClick, href, target, title, styleDisplay, class: className, subClass }) {
+        const cn = className !== null && className !== void 0 ? className : (subClass
+            ? subClass + " " + css
+            : css);
+        if (href) {
+            if (text) {
+                return XNode_1.default.create("a", { id: id, class: cn, target: target, title: title, styleDisplay: styleDisplay },
+                    XNode_1.default.create("label", { class: "label" },
+                        XNode_1.default.create("i", { class: icon }),
+                        text && XNode_1.default.create("span", { text: text })));
+            }
+        }
+        return XNode_1.default.create("button", { id: id, class: cn, eventClick: eventClick, title: title, styleDisplay: styleDisplay },
+            XNode_1.default.create("label", { class: "label" },
+                XNode_1.default.create("i", { class: icon }),
+                text && XNode_1.default.create("span", { text: text })));
+    }
+    exports.default = Button;
+    Button.className = css;
+});
+//# sourceMappingURL=Button.js.map

package/dist/basic/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/basic/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;IAAA,6DAAsD;IACtD,2DAAoD;IACpD,oEAA6D;IAC7D,6DAAsD;IAgBtD,MAAM,GAAG,GAAG,IAAA,aAAG,EACX,IAAA,mBAAS,GAAE;SACV,OAAO,CAAC,CAAC,CAAC;SACV,UAAU,CAAC,CAAC,CAAC;SACb,WAAW,CAAC,CAAC,CAAC;SACd,eAAe,EAAE;SACjB,OAAO,CAAC,cAAc,CAAC;SACvB,MAAM,CAAC,EAAE,CAAC;SACV,QAAQ,CAAC,EAAE,CAAC;SACZ,gBAAgB,EAAE;SAClB,MAAM,CAAC,SAAS,CAAC;SACjB,eAAe,CAAC,gBAAM,CAAC,WAAW,CAAC;SACnC,oBAAoB,CAAC,gBAAM,CAAC,UAAU,CAAC;SACvC,GAAG,CAAC,IAAA,mBAAS,EAAC,UAAU,CAAC;SACrB,eAAe,CAAC,gBAAM,CAAC,cAAc,CAAC,CAC1C;SACA,KAAK,CAAC,IAAA,mBAAS,EAAC,aAAa,CAAC;SAC1B,OAAO,CAAC,MAAM,CAAC;SACf,UAAU,CAAC,QAAQ,CAAC;SACpB,GAAG,CAAC,KAAK,CAAC;SACV,KAAK,CAAC,IAAA,mBAAS,EAAC,MAAM,CAAC;SACnB,QAAQ,CAAC,EAAE,CAAC;SACZ,KAAK,CAAC,MAAM,CAAC;SACb,KAAK,CAAC,gBAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;SAC1C,MAAM,CAAC,SAAS,CAAC;SACjB,GAAG,CAAC,IAAA,mBAAS,EAAC,MAAM,CAAC;SACjB,KAAK,CAAC,gBAAM,CAAC,GAAG,CAAC,CACrB,CACJ;SACA,KAAK,CAAC,IAAA,mBAAS,EAAC,MAAM,CAAC;SACnB,UAAU,CAAC,QAAQ,CAAC,CACxB,CACJ,CACJ,CAAC;IAEF,SAAwB,MAAM,CAAC,EAC3B,EAAE,EACF,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,MAAM,EACN,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EACF;QAEN,MAAM,EAAE,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,CAAE,QAAQ;YAC9B,CAAC,CAAC,QAAQ,GAAG,GAAG,GAAG,GAAG;YACtB,CAAC,CAAC,GAAG,CACR,CAAC;QAEF,IAAI,IAAI,EAAE;YAEN,IAAI,IAAI,EAAE;gBACN,OAAO,8BAAG,EAAE,EAAE,EAAE,EACZ,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY;oBAE1B,kCAAO,KAAK,EAAC,OAAO;wBAChB,8BAAG,KAAK,EAAE,IAAI,GAAG;wBACf,IAAI,IAAI,iCAAM,IAAI,EAAE,IAAI,GAAG,CACzB,CACR,CAAC;aACR;SACJ;QACD,OAAO,mCAAQ,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY;YAC1F,kCAAO,KAAK,EAAC,OAAO;gBAChB,8BAAG,KAAK,EAAE,IAAI,GAAG;gBACf,IAAI,IAAI,iCAAM,IAAI,EAAE,IAAI,GAAG,CACzB,CACH,CAAC;IAClB,CAAC;IAxCD,yBAwCC;IAED,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC"}

package/dist/basic/Checkbox.d.ts

@@ -0,0 +1,5 @@
+export default function Checkbox({ checked, text }: {
+    checked: any;
+    text: string;
+}): any;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/basic/Checkbox.tsx"],"names":[],"mappings":"AA+BA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,OAAO,EACP,IAAI,EACP,EAAE;IACC,OAAO,EAAE,GAAG,CAAC;IACb,IAAI,EAAE,MAAM,CAAA;CACf,OAUA"}

package/dist/basic/Checkbox.js

@@ -0,0 +1,39 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
+    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
+    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
+    const css = (0, CSS_1.default)((0, StyleRule_1.default)("check-box")
+        .display("inline-block")
+        .child((0, StyleRule_1.default)("label")
+        .display("flex")
+        .paddingLeft(5)
+        .paddingRight(5)
+        .child((0, StyleRule_1.default)("input[type=checkbox]")
+        .borderRadius(3)
+        .margin(0)
+        .padding(0)
+        .alignSelf("center"))
+        .child((0, StyleRule_1.default)("span")
+        .alignSelf("center")
+        .whiteSpace("nowrap")
+        .marginLeft(5)
+        .flexStretch())));
+    function Checkbox({ checked, text }) {
+        return XNode_1.default.create("div", { class: css },
+            XNode_1.default.create("label", null,
+                XNode_1.default.create("input", { type: "checkbox", checked: checked }),
+                XNode_1.default.create("span", { text: text })));
+    }
+    exports.default = Checkbox;
+});
+//# sourceMappingURL=Checkbox.js.map

package/dist/basic/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/basic/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;IACA,2DAAoD;IACpD,oEAA6D;IAC7D,6DAAsD;IAEtD,MAAM,GAAG,GAAG,IAAA,aAAG,EACX,IAAA,mBAAS,EAAC,WAAW,CAAC;SACrB,OAAO,CAAC,cAAc,CAAC;SACvB,KAAK,CACF,IAAA,mBAAS,EAAC,OAAO,CAAC;SACjB,OAAO,CAAC,MAAM,CAAC;SACf,WAAW,CAAC,CAAC,CAAC;SACd,YAAY,CAAC,CAAC,CAAC;SACf,KAAK,CAEF,IAAA,mBAAS,EAAC,sBAAsB,CAAC;SAChC,YAAY,CAAC,CAAC,CAAC;SACf,MAAM,CAAC,CAAC,CAAC;SACT,OAAO,CAAC,CAAC,CAAC;SACV,SAAS,CAAC,QAAQ,CAAC,CACvB;SACA,KAAK,CACF,IAAA,mBAAS,EAAC,MAAM,CAAC;SAChB,SAAS,CAAC,QAAQ,CAAC;SACnB,UAAU,CAAC,QAAQ,CAAC;SACpB,UAAU,CAAC,CAAC,CAAC;SACb,WAAW,EAAE,CAEjB,CAAC,CACT,CAAC;IAEF,SAAwB,QAAQ,CAAC,EAC7B,OAAO,EACP,IAAI,EAIP;QACG,OAAO,gCAAK,KAAK,EAAE,GAAG;YAClB;gBACI,kCACI,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,GAAG;gBACvB,iCACI,IAAI,EAAE,IAAI,GAAS,CACnB,CACN,CAAC;IACX,CAAC;IAhBD,2BAgBC"}

package/dist/basic/IElement.d.ts

@@ -0,0 +1,11 @@
+export default interface IElement {
+    subClass?: string;
+    icon?: string;
+    class?: string;
+    title?: string;
+    eventClick?: string;
+    href?: string;
+    text?: string;
+    styleDisplay?: any;
+}
+//# sourceMappingURL=IElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IElement.d.ts","sourceRoot":"","sources":["../../src/basic/IElement.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,WAAW,QAAQ;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,GAAG,CAAC;CACtB"}

package/dist/basic/IElement.js

@@ -0,0 +1,13 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=IElement.js.map

package/dist/basic/IElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IElement.js","sourceRoot":"","sources":["../../src/basic/IElement.ts"],"names":[],"mappings":""}

package/dist/basic/Input.d.ts

@@ -0,0 +1,5 @@
+export default function Input({ value, placeholder }: {
+    value: string;
+    placeholder: string;
+}): any;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/basic/Input.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC1B,KAAK,EACL,WAAW,EACd,EAAC;IACE,KAAK,EAAC,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAA;CACtB,OAKA"}

package/dist/basic/Input.js

@@ -0,0 +1,30 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
+    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
+    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
+    const css = (0, CSS_1.default)((0, StyleRule_1.default)("input")
+        .display("inline-block")
+        .child((0, StyleRule_1.default)("input[type=input]")
+        .margin(0)
+        .padding(5)
+        .height(25)
+        .marginRight(5)
+        .outline("none")
+        .alignSelf("center")));
+    function Input({ value, placeholder }) {
+        return XNode_1.default.create("div", { class: css },
+            XNode_1.default.create("input", { type: "input", placeholder: placeholder }));
+    }
+    exports.default = Input;
+});
+//# sourceMappingURL=Input.js.map

package/dist/basic/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/basic/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;IAAA,2DAAoD;IACpD,oEAA6D;IAC7D,6DAAsD;IAEtD,MAAM,GAAG,GAAG,IAAA,aAAG,EACX,IAAA,mBAAS,EAAC,OAAO,CAAC;SACjB,OAAO,CAAC,cAAc,CAAC;SACvB,KAAK,CACF,IAAA,mBAAS,EAAC,mBAAmB,CAAC;SAC7B,MAAM,CAAC,CAAC,CAAC;SACT,OAAO,CAAC,CAAC,CAAC;SACV,MAAM,CAAC,EAAE,CAAC;SACV,WAAW,CAAC,CAAC,CAAC;SACd,OAAO,CAAC,MAAM,CAAC;SACf,SAAS,CAAC,QAAQ,CAAC,CACvB,CACJ,CAAC;IAEF,SAAwB,KAAK,CAAC,EAC1B,KAAK,EACL,WAAW,EAId;QACG,OAAO,gCAAK,KAAK,EAAE,GAAG;YACf,kCAAO,IAAI,EAAC,OAAO,EACnB,WAAW,EAAE,WAAW,GAAI,CAC7B,CAAC;IACX,CAAC;IAXD,wBAWC"}

package/dist/basic/Panel.d.ts

@@ -0,0 +1,6 @@
+export interface IPanelAttributes {
+    header?: string;
+    class?: string;
+}
+export default function Panel({ header, class: className }: IPanelAttributes, ...children: any[]): any;
+//# sourceMappingURL=Panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/basic/Panel.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAcD,MAAM,CAAC,OAAO,UAAU,KAAK,CACzB,EACI,MAAM,EACN,KAAK,EAAE,SAAS,EACnB,EAAE,gBAAgB,EACnB,GAAI,QAAQ,EAAE,GAAG,EAAE,OAetB"}

package/dist/basic/Panel.js

@@ -0,0 +1,37 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const Colors_1 = require("@web-atoms/core/dist/core/Colors");
+    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
+    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
+    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
+    const css = (0, CSS_1.default)((0, StyleRule_1.default)("panel")
+        .display("inline-block")
+        .padding(5)
+        .margin(3)
+        .borderRadius(9999)
+        .defaultBoxShadow()
+        .child((0, StyleRule_1.default)(".header")
+        .backgroundColor(Colors_1.default.lightGray)
+        .borderRadius(5)
+        .padding(5)));
+    function Panel({ header, class: className }, ...children) {
+        className = className ? css + " " + className : css;
+        if (header) {
+            return XNode_1.default.create("div", { class: className },
+                XNode_1.default.create("label", { class: "header" }, header),
+                ...children);
+        }
+        return XNode_1.default.create("div", { class: className }, ...children);
+    }
+    exports.default = Panel;
+});
+//# sourceMappingURL=Panel.js.map

package/dist/basic/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../src/basic/Panel.tsx"],"names":[],"mappings":";;;;;;;;;;;IAAA,6DAAsD;IACtD,2DAAoD;IACpD,oEAA6D;IAC7D,6DAAsD;IAOtD,MAAM,GAAG,GAAG,IAAA,aAAG,EAAC,IAAA,mBAAS,EAAC,OAAO,CAAC;SAC7B,OAAO,CAAC,cAAc,CAAC;SACvB,OAAO,CAAC,CAAC,CAAC;SACV,MAAM,CAAC,CAAC,CAAC;SACT,YAAY,CAAC,IAAI,CAAC;SAClB,gBAAgB,EAAE;SAClB,KAAK,CAAC,IAAA,mBAAS,EAAC,SAAS,CAAC;SACtB,eAAe,CAAC,gBAAM,CAAC,SAAS,CAAC;SACjC,YAAY,CAAC,CAAC,CAAC;SACf,OAAO,CAAC,CAAC,CAAC,CACd,CAAC,CAAC;IAEP,SAAwB,KAAK,CACzB,EACI,MAAM,EACN,KAAK,EAAE,SAAS,EACD,EACnB,GAAI,QAAe;QAEnB,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;QAEpD,IAAI,MAAM,EAAE;YACR,OAAO,gCAAK,KAAK,EAAE,SAAS;gBACxB,kCAAO,KAAK,EAAC,QAAQ,IAAE,MAAM,CAAS;mBAChC,QAAQ,CACZ,CAAC;SACV;QAED,OAAO,gCAAK,KAAK,EAAE,SAAS,OAClB,QAAQ,CACZ,CAAC;IAEX,CAAC;IApBD,wBAoBC"}

package/dist/basic/PopupButton.d.ts

@@ -0,0 +1,16 @@
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import IElement from "./IElement";
+export interface IMenuItem {
+    label?: string;
+    icon?: string;
+    eventClick?: any;
+    href?: string;
+    target?: string;
+}
+export declare function MenuItem(menu: IMenuItem): IMenuItem;
+export declare class MenuItemTemplate extends AtomControl {
+    data: IMenuItem;
+    create(): void;
+}
+export default function PopupButton(props: IElement, ...menus: IMenuItem[]): any;
+//# sourceMappingURL=PopupButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupButton.d.ts","sourceRoot":"","sources":["../../src/basic/PopupButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAM5E,OAAO,QAAQ,MAAM,YAAY,CAAC;AAYlC,MAAM,WAAW,SAAS;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,aAUvC;AAED,qBAAa,gBAAiB,SAAQ,WAAW;IAEtC,IAAI,EAAE,SAAS,CAAC;IAEhB,MAAM;CAahB;AAiED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,KAAK,EAAE,QAAQ,EAAG,GAAI,KAAK,EAAE,SAAS,EAAE,OAK5E"}

package/dist/basic/PopupButton.js

@@ -0,0 +1,118 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/controls/AtomItemsControl", "@web-atoms/core/dist/web/services/PopupService", "@web-atoms/core/dist/web/styles/CSS", "./combineClasses", "./Button"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.MenuItemTemplate = exports.MenuItem = void 0;
+    const Bind_1 = require("@web-atoms/core/dist/core/Bind");
+    const BindableProperty_1 = require("@web-atoms/core/dist/core/BindableProperty");
+    const Colors_1 = require("@web-atoms/core/dist/core/Colors");
+    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
+    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
+    const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
+    const AtomItemsControl_1 = require("@web-atoms/core/dist/web/controls/AtomItemsControl");
+    const PopupService_1 = require("@web-atoms/core/dist/web/services/PopupService");
+    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
+    const combineClasses_1 = require("./combineClasses");
+    const Button_1 = require("./Button");
+    const menuCss = (0, CSS_1.default)((0, StyleRule_1.default)()
+        .child((0, StyleRule_1.default)(".menu")
+        .padding(5)
+        .margin(3)
+        .borderRadius(5)
+        .cursor("pointer")
+        .hoverBackgroundColor(Colors_1.default.lightGreen)));
+    function MenuItem(menu) {
+        // removing undefined.. as binding will ignore undefined
+        var _a, _b, _c, _d, _e;
+        (_a = menu.label) !== null && _a !== void 0 ? _a : (menu.label = null);
+        (_b = menu.icon) !== null && _b !== void 0 ? _b : (menu.icon = null);
+        (_c = menu.eventClick) !== null && _c !== void 0 ? _c : (menu.eventClick = null);
+        (_d = menu.href) !== null && _d !== void 0 ? _d : (menu.href = null);
+        (_e = menu.target) !== null && _e !== void 0 ? _e : (menu.target = null);
+        return menu;
+    }
+    exports.MenuItem = MenuItem;
+    class MenuItemTemplate extends AtomControl_1.AtomControl {
+        create() {
+            this.render(XNode_1.default.create("div", { class: "menu", eventClick: Bind_1.default.event(() => this.app.runAsync(() => this.data.eventClick())) },
+                XNode_1.default.create("i", { styleDisplay: Bind_1.default.oneWay(() => this.data.icon ? "" : "none"), class: Bind_1.default.oneWay(() => this.data.icon) }),
+                XNode_1.default.create("span", { styleDisplay: Bind_1.default.oneWay(() => this.data.label ? "" : "none"), text: Bind_1.default.oneWay(() => this.data.label) })));
+        }
+    }
+    exports.MenuItemTemplate = MenuItemTemplate;
+    class PopupMenuButton extends AtomControl_1.AtomControl {
+        constructor(app, e) {
+            super(app, e !== null && e !== void 0 ? e : document.createElement("button"));
+        }
+        preCreate() {
+            super.preCreate();
+            this.popup = null;
+            this.text = null;
+            this.icon = null;
+            this.subClass = null;
+            this.render(XNode_1.default.create("button", { class: Bind_1.default.oneWay(() => (0, combineClasses_1.default)(Button_1.default.className, this.popup ? "pressed" : null, this.subClass)), eventClick: Bind_1.default.event(() => this.openPopup()) },
+                XNode_1.default.create("label", { class: "label" },
+                    XNode_1.default.create("i", { class: Bind_1.default.oneWay(() => this.icon) }),
+                    XNode_1.default.create("span", { styleDisplay: Bind_1.default.oneWay(() => this.text ? "" : "none"), text: Bind_1.default.oneWay(() => this.text) }))));
+        }
+        openPopup() {
+            if (this.popup) {
+                this.popup.dispose();
+                return;
+            }
+            const items = new AtomItemsControl_1.AtomItemsControl(this.app, document.createElement("div"));
+            items.element.classList.add(menuCss);
+            items.itemTemplate = MenuItemTemplate;
+            items.items = this.menus;
+            items.registerDisposable({
+                dispose: () => {
+                    this.popup = null;
+                }
+            });
+            items.bindEvent(items.element, "click", () => {
+                setTimeout(() => {
+                    this.openPopup();
+                }, 100);
+            });
+            const popupService = this.app.resolve(PopupService_1.default);
+            this.popup = popupService.show(this.element, items);
+        }
+    }
+    __decorate([
+        BindableProperty_1.BindableProperty,
+        __metadata("design:type", String)
+    ], PopupMenuButton.prototype, "subClass", void 0);
+    __decorate([
+        BindableProperty_1.BindableProperty,
+        __metadata("design:type", String)
+    ], PopupMenuButton.prototype, "icon", void 0);
+    __decorate([
+        BindableProperty_1.BindableProperty,
+        __metadata("design:type", String)
+    ], PopupMenuButton.prototype, "text", void 0);
+    __decorate([
+        BindableProperty_1.BindableProperty,
+        __metadata("design:type", Array)
+    ], PopupMenuButton.prototype, "menus", void 0);
+    function PopupButton(props, ...menus) {
+        return XNode_1.default.create(PopupMenuButton, Object.assign({}, props, { menus: menus }));
+    }
+    exports.default = PopupButton;
+});
+//# sourceMappingURL=PopupButton.js.map

package/dist/basic/PopupButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../src/basic/PopupButton.tsx"],"names":[],"mappings":"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"}

package/dist/basic/Switch.d.ts

@@ -0,0 +1,7 @@
+export interface ISwitch {
+    checked: any;
+    onLabel?: string;
+    offLabel?: string;
+}
+export default function Switch({ checked, onLabel, offLabel }: ISwitch): any;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/basic/Switch.tsx"],"names":[],"mappings":"AA4FA,MAAM,WAAW,OAAO;IACvB,OAAO,MAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,OAAO,EACP,OAAO,EACP,QAAQ,EACR,EAAE,OAAO,OAOT"}

package/dist/basic/Switch.js

@@ -0,0 +1,96 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/styles/CSS"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
+    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
+    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
+    /**
+     * Original source = https://www.htmllion.com/css3-toggle-switch-button.html
+     */
+    const css = (0, CSS_1.default)((0, StyleRule_1.default)()
+        .position("relative")
+        .display("inline-block")
+        .verticalAlign("top")
+        .width(70)
+        .height(30)
+        .padding(3)
+        .margin("0 10px 10px 0")
+        .background("linear-gradient(to bottom, #eeeeee, #FFFFFF 25px)")
+        .backgroundImage("-webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px)")
+        .borderRadius(18)
+        .boxShadow("inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05)")
+        .cursor("pointer")
+        .boxSizing("content-box")
+        .child((0, StyleRule_1.default)(".switch-input")
+        .absolutePosition({ top: 0, left: 0 })
+        .opacity(0)
+        .boxSizing("content-box"))
+        .child((0, StyleRule_1.default)(".switch-label")
+        .position("relative")
+        .display("block")
+        .height("inherit")
+        .fontSize(10)
+        .textTransform("uppercase")
+        .backgroundColor("#eceeef")
+        .borderRadius("inherit")
+        .boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15)")
+        .boxSizing("content-box")
+        .and((0, StyleRule_1.default)(":before, .switch-label:after")
+        .position("absolute")
+        .top("50%")
+        .marginTop("-.5em")
+        .lineHeight("1")
+        .webkitTransition("inherit")
+        .transition("inherit")
+        .boxSizing("content-box"))
+        .and((0, StyleRule_1.default)(":before")
+        .content("attr(data-off)")
+        .right(11)
+        .color("#aaaaaa")
+        .textShadow("0 1px rgba(255, 255, 255, 0.5)"))
+        .and((0, StyleRule_1.default)(":after")
+        .content("attr(data-on)")
+        .left(11)
+        .color("#FFFFFF")
+        .textShadow("0 1px rgba(0, 0, 0, 0.2)")
+        .opacity("0")))
+        .child((0, StyleRule_1.default)(".switch-input:checked ~ .switch-label")
+        .backgroundColor("#E1B42B")
+        .boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2)"))
+        .child((0, StyleRule_1.default)(".switch-input:checked ~ .switch-label:before")
+        .opacity("0"))
+        .child((0, StyleRule_1.default)(".switch-input:checked ~ .switch-label:after")
+        .opacity("1"))
+        .child((0, StyleRule_1.default)(".switch-handle")
+        .absolutePosition({ top: 4, left: 4, width: 28, height: 28 })
+        .background("linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0)")
+        .borderRadius("100%")
+        .boxShadow("1px 1px 5px rgba(0, 0, 0, 0.2)")
+        .and((0, StyleRule_1.default)(":before")
+        .content("")
+        .absolutePosition({ top: "50%", left: "50%", width: 12, height: 12 })
+        .background("linear-gradient(to bottom, #eeeeee, #FFFFFF)")
+        .borderRadius(6)
+        .boxShadow("inset 0 1px rgba(0, 0, 0, 0.02)")))
+        .child((0, StyleRule_1.default)(".switch-input:checked ~ .switch-handle")
+        .left(44)
+        .boxShadow("-1px 1px 5px rgba(0, 0, 0, 0.2)"))
+        .child((0, StyleRule_1.default)(".switch-label, .switch-handle")
+        .transition("All 0.3s ease")));
+    function Switch({ checked, onLabel, offLabel }) {
+        return XNode_1.default.create("label", { class: css },
+            XNode_1.default.create("input", { class: "switch-input", type: "checkbox", checked: checked }),
+            XNode_1.default.create("span", { class: "switch-label", "data-on": onLabel !== null && onLabel !== void 0 ? onLabel : "On", "data-off": offLabel !== null && offLabel !== void 0 ? offLabel : "Off" }),
+            XNode_1.default.create("span", { class: "switch-handle" }));
+    }
+    exports.default = Switch;
+});
+//# sourceMappingURL=Switch.js.map

package/dist/basic/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/basic/Switch.tsx"],"names":[],"mappings":"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"}

package/dist/basic/combineClasses.d.ts

@@ -0,0 +1,2 @@
+export default function combineClasses(...names: string[]): string;
+//# sourceMappingURL=combineClasses.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combineClasses.d.ts","sourceRoot":"","sources":["../../src/basic/combineClasses.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,GAAI,KAAK,EAAE,MAAM,EAAE,UAEzD"}

package/dist/basic/combineClasses.js

@@ -0,0 +1,17 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    function combineClasses(...names) {
+        return names.filter((n) => n).join(" ");
+    }
+    exports.default = combineClasses;
+});
+//# sourceMappingURL=combineClasses.js.map

package/dist/basic/combineClasses.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combineClasses.js","sourceRoot":"","sources":["../../src/basic/combineClasses.ts"],"names":[],"mappings":";;;;;;;;;;;IAAA,SAAwB,cAAc,CAAC,GAAI,KAAe;QACtD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5C,CAAC;IAFD,iCAEC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-atoms/web-controls",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "HTML controls for web atoms core",
   "main": "index.js",
   "scripts": {

package/src/basic/Button.tsx

@@ -0,0 +1,97 @@
+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";
+
+export interface IButton {
+    id?: string;
+    icon?: string;
+    text?: string;
+    eventClick?: any;
+    href?: string;
+    target?: string;
+    title?: string;
+    styleDisplay?: string;
+    class?: string;
+    isVisible?: any;
+    subClass?: string;
+}
+
+const css = CSS(
+    StyleRule()
+    .padding(8)
+    .marginLeft(3)
+    .marginRight(3)
+    .roundBorderFull()
+    .display("inline-block")
+    .height(40)
+    .minWidth(40)
+    .defaultBoxShadow()
+    .cursor("pointer")
+    .backgroundColor(Colors.transparent)
+    .hoverBackgroundColor(Colors.lightGreen)
+    .and(StyleRule(".pressed")
+        .backgroundColor(Colors.lightSteelBlue)
+    )
+    .child(StyleRule("label.label")
+        .display("flex")
+        .alignItems("center")
+        .gap("5px")
+        .child(StyleRule(".fad")
+            .fontSize(18)
+            .width("100%")
+            .color(Colors.purple.withAlphaPercent(0.5))
+            .cursor("pointer")
+            .and(StyleRule(".red")
+                .color(Colors.red)
+            )
+        )
+        .child(StyleRule("span")
+            .whiteSpace("nowrap")
+        )
+    )
+);
+
+export default function Button({
+    id,
+    icon,
+    text,
+    eventClick,
+    href,
+    target,
+    title,
+    styleDisplay,
+    class: className,
+    subClass
+}: IButton) {
+
+    const cn = className ?? ( subClass
+        ? subClass + " " + css
+        : css
+    );
+
+    if (href) {
+
+        if (text) {
+            return <a id={id}
+                class={cn}
+                target={target}
+                title={title}
+                styleDisplay={styleDisplay}
+                >
+                <label class="label">
+                    <i class={icon}/>
+                    { text && <span text={text}/> }
+                </label>
+            </a>;
+        }
+    }
+    return <button id={id} class={cn} eventClick={eventClick} title={title} styleDisplay={styleDisplay}>
+            <label class="label">
+                <i class={icon}/>
+                { text && <span text={text}/> }
+            </label>
+        </button>;
+}
+
+Button.className = css;

package/src/basic/Checkbox.tsx

@@ -0,0 +1,48 @@
+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";
+
+const css = CSS(
+    StyleRule("check-box")
+    .display("inline-block")
+    .child(
+        StyleRule("label")
+        .display("flex")
+        .paddingLeft(5)
+        .paddingRight(5)
+        .child(
+
+            StyleRule("input[type=checkbox]")
+            .borderRadius(3)
+            .margin(0)
+            .padding(0)
+            .alignSelf("center")
+        )
+        .child(
+            StyleRule("span")
+            .alignSelf("center")
+            .whiteSpace("nowrap")
+            .marginLeft(5)
+            .flexStretch()
+
+        ))
+);
+
+export default function Checkbox({
+    checked,
+    text
+}: {
+    checked: any,
+    text: string
+}) {
+    return <div class={css}>
+        <label>
+            <input
+                type="checkbox"
+                checked={checked}/>
+            <span
+                text={text}></span>
+        </label>
+    </div>;
+}

package/src/basic/IElement.ts

@@ -0,0 +1,10 @@
+export default interface IElement {
+    subClass?: string;
+    icon?: string;
+    class?: string;
+    title?: string;
+    eventClick?: string;
+    href?: string;
+    text?: string;
+    styleDisplay?: any;
+}

package/src/basic/Input.tsx

@@ -0,0 +1,30 @@
+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";
+
+const css = CSS(
+    StyleRule("input")
+    .display("inline-block")
+    .child(
+        StyleRule("input[type=input]")
+        .margin(0)
+        .padding(5)
+        .height(25)
+        .marginRight(5)
+        .outline("none")
+        .alignSelf("center")
+    )
+);
+
+export default function Input({
+    value,
+    placeholder
+}:{
+    value:string,
+    placeholder: string
+}){
+    return <div class={css}>
+           <input type="input"
+           placeholder={placeholder} />
+    </div>;
+}

package/src/basic/Panel.tsx

@@ -0,0 +1,43 @@
+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";
+
+export interface IPanelAttributes {
+    header?: string;
+    class?: string;
+}
+
+const css = CSS(StyleRule("panel")
+    .display("inline-block")
+    .padding(5)
+    .margin(3)
+    .borderRadius(9999)
+    .defaultBoxShadow()
+    .child(StyleRule(".header")
+        .backgroundColor(Colors.lightGray)
+        .borderRadius(5)
+        .padding(5)
+    ));
+
+export default function Panel(
+    {
+        header,
+        class: className
+    }: IPanelAttributes,
+    ... children: any[]) {
+
+    className = className ? css + " " + className : css;
+
+    if (header) {
+        return <div class={className}>
+            <label class="header">{header}</label>
+            { ... children }
+        </div>;
+    }
+
+    return <div class={className}>
+        { ... children }
+    </div>;
+
+}

package/src/basic/PopupButton.tsx

@@ -0,0 +1,132 @@
+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 { IDisposable } from "@web-atoms/core/dist/core/types";
+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 { AtomItemsControl } from "@web-atoms/core/dist/web/controls/AtomItemsControl";
+import PopupService from "@web-atoms/core/dist/web/services/PopupService";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import combineClasses from "./combineClasses";
+import Button from "./Button";
+import IElement from "./IElement";
+
+const menuCss = CSS(StyleRule()
+    .child(StyleRule(".menu")
+        .padding(5)
+        .margin(3)
+        .borderRadius(5)
+        .cursor("pointer")
+        .hoverBackgroundColor(Colors.lightGreen)
+    )
+);
+
+export interface IMenuItem {
+    label?: string;
+    icon?: string;
+    eventClick?: any;
+    href?: string;
+    target?: string;
+}
+
+export function MenuItem(menu: IMenuItem) {
+
+    // removing undefined.. as binding will ignore undefined
+
+    menu.label ??= null;
+    menu.icon ??= null;
+    menu.eventClick ??= null;
+    menu.href ??= null;
+    menu.target ??= null;
+    return menu;
+}
+
+export class MenuItemTemplate extends AtomControl {
+
+    public data: IMenuItem;
+
+    public create() {
+        this.render(<div
+            class="menu"
+            eventClick={Bind.event(() => this.app.runAsync(() => this.data.eventClick()))}
+            >
+            <i
+                styleDisplay={Bind.oneWay(() => this.data.icon ? "" : "none")}
+                class={Bind.oneWay(() => this.data.icon)}/>
+            <span
+                styleDisplay={Bind.oneWay(() => this.data.label ? "" : "none")}
+                text={Bind.oneWay(() => this.data.label)}></span>
+        </div>);
+    }
+}
+
+class PopupMenuButton extends AtomControl {
+
+    @BindableProperty
+    public subClass: string;
+
+    @BindableProperty
+    public icon: string;
+
+    @BindableProperty
+    public text: string;
+
+    @BindableProperty
+    public menus: IMenuItem[];
+
+    private popup: IDisposable;
+
+    constructor(app, e) {
+        super(app, e ?? document.createElement("button"));
+    }
+
+    public preCreate() {
+        super.preCreate();
+        this.popup = null;
+        this.text = null;
+        this.icon = null;
+        this.subClass = null;
+        this.render(<button
+            class={Bind.oneWay(() => combineClasses(Button.className, this.popup ? "pressed" : null, this.subClass))}
+            eventClick={Bind.event(() => this.openPopup())}>
+            <label class="label">
+                <i class={Bind.oneWay(() => this.icon)}/>
+                <span
+                    styleDisplay={Bind.oneWay(() => this.text ? "" : "none")}
+                    text={Bind.oneWay(() => this.text)}/>
+            </label>
+        </button>);
+    }
+
+    private openPopup() {
+        if (this.popup) {
+            this.popup.dispose();
+            return;
+        }
+
+        const items = new AtomItemsControl(this.app, document.createElement("div"));
+        items.element.classList.add(menuCss);
+        items.itemTemplate = MenuItemTemplate;
+        items.items = this.menus;
+        items.registerDisposable({
+            dispose: () => {
+                this.popup = null;
+            }
+        });
+        items.bindEvent(items.element, "click", () => {
+            setTimeout(() => {
+            this.openPopup();
+            }, 100);
+        });
+        const popupService = this.app.resolve(PopupService);
+        this.popup = popupService.show(this.element, items);
+    }
+}
+
+export default function PopupButton( props: IElement,  ... menus: IMenuItem[]) {
+    return <PopupMenuButton
+        { ... props }
+        menus={menus}
+        />;
+}

package/src/basic/Switch.tsx

@@ -0,0 +1,110 @@
+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";
+
+/**
+ * Original source = https://www.htmllion.com/css3-toggle-switch-button.html
+ */
+
+const css = CSS(StyleRule()
+	.position("relative")
+	.display("inline-block")
+	.verticalAlign("top")
+	.width(70)
+	.height(30)
+	.padding(3)
+	.margin("0 10px 10px 0")
+	.background("linear-gradient(to bottom, #eeeeee, #FFFFFF 25px)" as any)
+	.backgroundImage("-webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px)")
+	.borderRadius(18)
+	.boxShadow("inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05)")
+	.cursor("pointer")
+	.boxSizing("content-box")
+	.child(StyleRule(".switch-input")
+		.absolutePosition({ top: 0, left: 0})
+		.opacity(0 as any)
+		.boxSizing("content-box")
+	)
+	.child(StyleRule(".switch-label")
+		.position("relative")
+		.display("block")
+		.height("inherit")
+		.fontSize(10)
+		.textTransform("uppercase")
+		.backgroundColor("#eceeef")
+		.borderRadius("inherit")
+		.boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15)")
+		.boxSizing("content-box")
+		.and(StyleRule(":before, .switch-label:after")
+			.position("absolute")
+			.top("50%")
+			.marginTop("-.5em")
+			.lineHeight("1")
+			.webkitTransition("inherit")
+			.transition("inherit")
+			.boxSizing("content-box")
+		)
+		.and(StyleRule(":before")
+			.content("attr(data-off)" as any)
+			.right(11)
+			.color("#aaaaaa")
+			.textShadow("0 1px rgba(255, 255, 255, 0.5)")
+		)
+		.and(StyleRule(":after")
+			.content("attr(data-on)" as any)
+			.left(11)
+			.color("#FFFFFF")
+			.textShadow("0 1px rgba(0, 0, 0, 0.2)")
+			.opacity("0")
+		)
+	)
+	.child(StyleRule(".switch-input:checked ~ .switch-label")
+		.backgroundColor("#E1B42B")
+		.boxShadow("inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2)")
+	)
+	.child(StyleRule(".switch-input:checked ~ .switch-label:before")
+		.opacity("0")
+	)
+	.child(StyleRule(".switch-input:checked ~ .switch-label:after")
+		.opacity("1")
+	)
+	.child(StyleRule(".switch-handle")
+		.absolutePosition({top: 4, left: 4, width: 28, height: 28})
+		.background("linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0)" as any)
+		.borderRadius("100%")
+		.boxShadow("1px 1px 5px rgba(0, 0, 0, 0.2)")
+		.and(StyleRule(":before")
+			.content("")
+			.absolutePosition({ top: "50%", left: "50%", width: 12, height: 12 })
+			.background("linear-gradient(to bottom, #eeeeee, #FFFFFF)" as any)
+			.borderRadius(6)
+			.boxShadow("inset 0 1px rgba(0, 0, 0, 0.02)")
+		)
+	)
+	.child(StyleRule(".switch-input:checked ~ .switch-handle")
+		.left(44)
+		.boxShadow("-1px 1px 5px rgba(0, 0, 0, 0.2)")
+	)
+	.child(StyleRule(".switch-label, .switch-handle")
+		.transition("All 0.3s ease")
+	)
+);
+
+export interface ISwitch {
+	checked;
+	onLabel?: string;
+	offLabel?: string;
+}
+
+export default function Switch({
+	checked,
+	onLabel,
+	offLabel
+}: ISwitch) {
+
+    return <label class={css}>
+	    <input class="switch-input" type="checkbox" checked={checked} />
+	    <span class="switch-label" data-on={onLabel ?? "On"} data-off={offLabel ?? "Off"}></span>
+	    <span class="switch-handle"></span>
+    </label>;
+}

package/src/basic/combineClasses.ts

@@ -0,0 +1,3 @@
+export default function combineClasses(... names: string[]) {
+    return names.filter((n) => n).join(" ");
+}