@web-atoms/web-controls 2.3.4 → 2.3.6

package/dist/switch/AtomSwitch.js

@@ -1,2 +1,42 @@
-System.register(["tslib","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/web/controls/AtomControl","./AtomSwitchStyle"],function(_export,_context){"use strict";var __decorate,__metadata,Bind,BindableProperty,XNode,AtomControl,AtomSwitchStyle,AtomSwitch;_export("default",void 0);return{setters:[function(_tslib){__decorate=_tslib.__decorate;__metadata=_tslib.__metadata;},function(_webAtomsCoreDistCoreBind){Bind=_webAtomsCoreDistCoreBind.default;},function(_webAtomsCoreDistCoreBindableProperty){BindableProperty=_webAtomsCoreDistCoreBindableProperty.BindableProperty;},function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default;},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl;},function(_AtomSwitchStyle){AtomSwitchStyle=_AtomSwitchStyle.default;}],execute:function(){_export("default",AtomSwitch=class AtomSwitch extends AtomControl{constructor(app,e=document.createElement("label")){super(app,e);}create(){this.defaultControlStyle=AtomSwitchStyle;this.render(XNode.create("label",{class:Bind.oneTime(()=>this.controlStyle.name+" switch")},XNode.create("input",{type:"checkbox",checked:Bind.twoWays(()=>this.value)}),XNode.create("span",{class:"slider"})));}});__decorate([BindableProperty,__metadata("design:type",Boolean)],AtomSwitch.prototype,"value",void 0);}};});
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "./AtomSwitchStyle"], function (_export, _context) {
+  "use strict";
+
+  var __decorate, __metadata, Bind, BindableProperty, XNode, AtomControl, AtomSwitchStyle, AtomSwitch;
+  _export("default", void 0);
+  return {
+    setters: [function (_tslib) {
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_AtomSwitchStyle) {
+      AtomSwitchStyle = _AtomSwitchStyle.default;
+    }],
+    execute: function () {
+      _export("default", AtomSwitch = class AtomSwitch extends AtomControl {
+        constructor(app, e = document.createElement("label")) {
+          super(app, e);
+        }
+        create() {
+          this.defaultControlStyle = AtomSwitchStyle;
+          this.render(XNode.create("label", {
+            class: Bind.oneTime(() => this.controlStyle.name + " switch")
+          }, XNode.create("input", {
+            type: "checkbox",
+            checked: Bind.twoWays(() => this.value)
+          }), XNode.create("span", {
+            class: "slider"
+          })));
+        }
+      });
+      __decorate([BindableProperty, __metadata("design:type", Boolean)], AtomSwitch.prototype, "value", void 0);
+    }
+  };
+});
 //# sourceMappingURL=AtomSwitch.js.map

package/dist/switch/AtomSwitch.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"wUAMqBA,UAAW,4JANzBC,IAAI,qFACFC,gBAAgB,uCAAhBA,gBAAgB,wCAClBC,KAAK,wFACHC,WAAW,yCAAXA,WAAW,8BACbC,eAAe,kEAEDL,UAAW,CAAlB,KAAOA,WAAW,QAAQI,YAAW,CAK/CE,YAAYC,GAAG,CAAEC,CAAC,CAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,EAChD,KAAK,CAACH,GAAG,CAAEC,CAAC,CAAC,CACjB,CAEOG,MAAM,GACT,IAAI,CAACC,mBAAmB,CAAGP,eAAe,CAC1C,IAAI,CAACQ,MAAM,CAACV,sBAAOW,KAAK,CAAEb,IAAI,CAACc,OAAO,CAAC,IAAM,IAAI,CAACC,YAAY,CAACC,IAAI,CAAG,SAAS,CAAC,EAC5Ed,sBAAOe,IAAI,CAAC,UAAU,CAACC,OAAO,CAAElB,IAAI,CAACmB,OAAO,CAAC,IAAM,IAAI,CAACC,KAAK,CAAC,EAAG,CACjElB,qBAAMW,KAAK,CAAC,QAAQ,EAAQ,CACxB,CAAC,CACb,EAEH,EAfGQ,YAACpB,gBAAgB,wEACK","names":["AtomSwitch","Bind","BindableProperty","XNode","AtomControl","AtomSwitchStyle","constructor","app","e","document","createElement","create","defaultControlStyle","render","class","oneTime","controlStyle","name","type","checked","twoWays","value","__decorate"],"sourceRoot":"","sources":["../../src/switch/AtomSwitch.tsx"],"sourcesContent":[null]}
+{"version":3,"mappings":";;;2FAMqBA,UAAW;EAAA;EAAA;IAAA;;;;MANzBC,IAAI;IAAA;MACFC,gBAAgB,yCAAhBA,gBAAgB;IAAA;MAClBC,KAAK;IAAA;MACHC,WAAW,2CAAXA,WAAW;IAAA;MACbC,eAAe;IAAA;IAAA;MAAA,mBAEDL,UAAW,GAAlB,MAAOA,UAAW,SAAQI,WAAW;QAK/CE,YAAYC,GAAG,EAAEC,CAAC,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;UAChD,KAAK,CAACH,GAAG,EAAEC,CAAC,CAAC;QACjB;QAEOG,MAAM;UACT,IAAI,CAACC,mBAAmB,GAAGP,eAAe;UAC1C,IAAI,CAACQ,MAAM,CAACV;YAAOW,KAAK,EAAEb,IAAI,CAACc,OAAO,CAAC,MAAM,IAAI,CAACC,YAAY,CAACC,IAAI,GAAG,SAAS;UAAC,GAC5Ed;YAAOe,IAAI,EAAC,UAAU;YAACC,OAAO,EAAElB,IAAI,CAACmB,OAAO,CAAC,MAAM,IAAI,CAACC,KAAK;UAAC,EAAG,EACjElB;YAAMW,KAAK,EAAC;UAAQ,EAAQ,CACxB,CAAC;QACb;OAEH;MAfGQ,YAACpB,gBAAgB,6EACK;IAAA;EAAA;AAAA","names":["AtomSwitch","Bind","BindableProperty","XNode","AtomControl","AtomSwitchStyle","constructor","app","e","document","createElement","create","defaultControlStyle","render","class","oneTime","controlStyle","name","type","checked","twoWays","value","__decorate"],"sourceRoot":"","sources":["../../src/switch/AtomSwitch.tsx"],"sourcesContent":[null]}

package/dist/switch/AtomSwitchStyle.js

@@ -1,2 +1,80 @@
-System.register(["@web-atoms/core/dist/core/Colors","@web-atoms/core/dist/web/styles/AtomStyle"],function(_export,_context){"use strict";var Colors,AtomStyle,AtomSwitchStyle;_export("default",void 0);return{setters:[function(_webAtomsCoreDistCoreColors){Colors=_webAtomsCoreDistCoreColors.default;},function(_webAtomsCoreDistWebStylesAtomStyle){AtomStyle=_webAtomsCoreDistWebStylesAtomStyle.AtomStyle;}],execute:function(){_export("default",AtomSwitchStyle=class AtomSwitchStyle extends AtomStyle{get root(){return{marginLeft:"5px",marginRight:"5px",subclasses:{".switch":this.switch," .slider":this.slider}};}get switch(){return{position:"relative",display:"inline-block",width:"60px",height:"34px",subclasses:{" input":{opacity:"0",width:"0",height:"0",subclasses:{":checked + .slider":{backgroundColor:Colors.deepSkyBlue},":checked + .slider:before":{transform:"translateX(26px)"},":focus + .slider":{boxShadow:"0 0 1px "+Colors.deepSkyBlue}}}}};}get slider(){return{position:"absolute",cursor:"pointer",top:0,left:0,right:0,bottom:0,backgroundColor:Colors.silver,transition:".4s",borderRadius:"20px",subclasses:{":before":{position:"absolute",content:'""',height:"26px",width:"26px",left:"4px",bottom:"4px",backgroundColor:Colors.white,transition:".4s",borderRadius:"50%"}}};}});}};});
+System.register(["@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/web/styles/AtomStyle"], function (_export, _context) {
+  "use strict";
+
+  var Colors, AtomStyle, AtomSwitchStyle;
+  _export("default", void 0);
+  return {
+    setters: [function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistWebStylesAtomStyle) {
+      AtomStyle = _webAtomsCoreDistWebStylesAtomStyle.AtomStyle;
+    }],
+    execute: function () {
+      _export("default", AtomSwitchStyle = class AtomSwitchStyle extends AtomStyle {
+        get root() {
+          return {
+            marginLeft: "5px",
+            marginRight: "5px",
+            subclasses: {
+              ".switch": this.switch,
+              " .slider": this.slider
+            }
+          };
+        }
+        get switch() {
+          return {
+            position: "relative",
+            display: "inline-block",
+            width: "60px",
+            height: "34px",
+            subclasses: {
+              " input": {
+                opacity: "0",
+                width: "0",
+                height: "0",
+                subclasses: {
+                  ":checked + .slider": {
+                    backgroundColor: Colors.deepSkyBlue
+                  },
+                  ":checked + .slider:before": {
+                    transform: "translateX(26px)"
+                  },
+                  ":focus + .slider": {
+                    boxShadow: "0 0 1px " + Colors.deepSkyBlue
+                  }
+                }
+              }
+            }
+          };
+        }
+        get slider() {
+          return {
+            position: "absolute",
+            cursor: "pointer",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: Colors.silver,
+            transition: ".4s",
+            borderRadius: "20px",
+            subclasses: {
+              ":before": {
+                position: "absolute",
+                content: '""',
+                height: "26px",
+                width: "26px",
+                left: "4px",
+                bottom: "4px",
+                backgroundColor: Colors.white,
+                transition: ".4s",
+                borderRadius: "50%"
+              }
+            }
+          };
+        }
+      });
+    }
+  };
+});
 //# sourceMappingURL=AtomSwitchStyle.js.map

package/dist/switch/AtomSwitchStyle.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"8JAIqBA,eAAgB,iFAJ9BC,MAAM,qFACJC,SAAS,qCAATA,SAAS,yCAGGF,eAAgB,CAAvB,KAAOA,gBAAgB,QAAQE,UAAS,CAElD,GAAWC,KAAI,GACX,MAAO,CACHC,UAAU,CAAE,KAAK,CACjBC,WAAW,CAAE,KAAK,CAClBC,UAAU,CAAE,CACR,SAAS,CAAE,IAAI,CAACC,MAAM,CACtB,UAAU,CAAE,IAAI,CAACC,QAExB,CACL,CAEA,GAAWD,OAAM,GACb,MAAO,CACHE,QAAQ,CAAE,UAAU,CACpBC,OAAO,CAAE,cAAc,CACvBC,KAAK,CAAE,MAAM,CACbC,MAAM,CAAE,MAAM,CACdN,UAAU,CAAE,CACR,QAAQ,CAAE,CACNO,OAAO,CAAE,GAAG,CACZF,KAAK,CAAE,GAAG,CACVC,MAAM,CAAE,GAAG,CACXN,UAAU,CAAE,CACR,oBAAoB,CAAE,CAClBQ,eAAe,CAAEb,MAAM,CAACc,YAC3B,CACD,2BAA2B,CAAE,CACzBC,SAAS,CAAE,mBACd,CACD,kBAAkB,CAAE,CAChBC,SAAS,CAAE,UAAU,CAAGhB,MAAM,CAACc,gBAKlD,CACL,CAEA,GAAWP,OAAM,GACb,MAAO,CACHC,QAAQ,CAAE,UAAU,CACpBS,MAAM,CAAE,SAAS,CACjBC,GAAG,CAAE,CAAC,CACNC,IAAI,CAAE,CAAC,CACPC,KAAK,CAAE,CAAC,CACRC,MAAM,CAAE,CAAC,CACTR,eAAe,CAAEb,MAAM,CAACsB,MAAM,CAC9BC,UAAU,CAAE,KAAK,CACjBC,YAAY,CAAE,MAAM,CACpBnB,UAAU,CAAE,CACR,SAAS,CAAE,CACPG,QAAQ,CAAE,UAAU,CACpBiB,OAAO,CAAE,IAAI,CACbd,MAAM,CAAE,MAAM,CACdD,KAAK,CAAE,MAAM,CACbS,IAAI,CAAE,KAAK,CACXE,MAAM,CAAE,KAAK,CACbR,eAAe,CAAEb,MAAM,CAAC0B,KAAK,CAC7BH,UAAU,CAAE,KAAK,CACjBC,YAAY,CAAE,QAGzB,CACL,EACH","names":["AtomSwitchStyle","Colors","AtomStyle","root","marginLeft","marginRight","subclasses","switch","slider","position","display","width","height","opacity","backgroundColor","deepSkyBlue","transform","boxShadow","cursor","top","left","right","bottom","silver","transition","borderRadius","content","white"],"sourceRoot":"","sources":["../../src/switch/AtomSwitchStyle.ts"],"sourcesContent":[null]}
+{"version":3,"mappings":";;;yBAIqBA,eAAgB;EAAA;EAAA;IAAA;MAJ9BC,MAAM;IAAA;MACJC,SAAS,uCAATA,SAAS;IAAA;IAAA;MAAA,mBAGGF,eAAgB,GAAvB,MAAOA,eAAgB,SAAQE,SAAS;QAElD,IAAWC,IAAI;UACX,OAAO;YACHC,UAAU,EAAE,KAAK;YACjBC,WAAW,EAAE,KAAK;YAClBC,UAAU,EAAE;cACR,SAAS,EAAE,IAAI,CAACC,MAAM;cACtB,UAAU,EAAE,IAAI,CAACC;;WAExB;QACL;QAEA,IAAWD,MAAM;UACb,OAAO;YACHE,QAAQ,EAAE,UAAU;YACpBC,OAAO,EAAE,cAAc;YACvBC,KAAK,EAAE,MAAM;YACbC,MAAM,EAAE,MAAM;YACdN,UAAU,EAAE;cACR,QAAQ,EAAE;gBACNO,OAAO,EAAE,GAAG;gBACZF,KAAK,EAAE,GAAG;gBACVC,MAAM,EAAE,GAAG;gBACXN,UAAU,EAAE;kBACR,oBAAoB,EAAE;oBAClBQ,eAAe,EAAEb,MAAM,CAACc;mBAC3B;kBACD,2BAA2B,EAAE;oBACzBC,SAAS,EAAE;mBACd;kBACD,kBAAkB,EAAE;oBAChBC,SAAS,EAAE,UAAU,GAAGhB,MAAM,CAACc;;;;;WAKlD;QACL;QAEA,IAAWP,MAAM;UACb,OAAO;YACHC,QAAQ,EAAE,UAAU;YACpBS,MAAM,EAAE,SAAS;YACjBC,GAAG,EAAE,CAAC;YACNC,IAAI,EAAE,CAAC;YACPC,KAAK,EAAE,CAAC;YACRC,MAAM,EAAE,CAAC;YACTR,eAAe,EAAEb,MAAM,CAACsB,MAAM;YAC9BC,UAAU,EAAE,KAAK;YACjBC,YAAY,EAAE,MAAM;YACpBnB,UAAU,EAAE;cACR,SAAS,EAAE;gBACPG,QAAQ,EAAE,UAAU;gBACpBiB,OAAO,EAAE,IAAI;gBACbd,MAAM,EAAE,MAAM;gBACdD,KAAK,EAAE,MAAM;gBACbS,IAAI,EAAE,KAAK;gBACXE,MAAM,EAAE,KAAK;gBACbR,eAAe,EAAEb,MAAM,CAAC0B,KAAK;gBAC7BH,UAAU,EAAE,KAAK;gBACjBC,YAAY,EAAE;;;WAGzB;QACL;OACH;IAAA;EAAA;AAAA","names":["AtomSwitchStyle","Colors","AtomStyle","root","marginLeft","marginRight","subclasses","switch","slider","position","display","width","height","opacity","backgroundColor","deepSkyBlue","transform","boxShadow","cursor","top","left","right","bottom","silver","transition","borderRadius","content","white"],"sourceRoot":"","sources":["../../src/switch/AtomSwitchStyle.ts"],"sourcesContent":[null]}

package/dist/time-field/AtomTimeField.js

@@ -1,2 +1,99 @@
-System.register(["tslib","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/BindableProperty","@web-atoms/core/dist/core/PropertyBinding","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/web/controls/AtomToggleButtonBar","@web-atoms/date-time/dist/TimeSpan","./AtomTimeFieldStyle"],function(_export,_context){"use strict";var __decorate,__metadata,Bind,BindableProperty,PropertyBinding,XNode,AtomControl,AtomToggleButtonBar,TimeSpan,AtomTimeFieldStyle,AtomTimeField,zones;function toTimeString(ts){const h=ts.zone==="AM"?ts.hour:ts.hour+12;const t=new TimeSpan(0,h,ts.minutes);return t.toString(true);}function fromTimeString(t,ti){if(!t){return ti;}const ts=TimeSpan.parse(t);const isMorning=ts.totalMinutes<12*60;ti=ti||{};ti.hour=isMorning?ts.hours:ts.hours-12;ti.minutes=ts.minutes;ti.zone=isMorning?"AM":"PM";return ti;}_export("default",void 0);return{setters:[function(_tslib){__decorate=_tslib.__decorate;__metadata=_tslib.__metadata;},function(_webAtomsCoreDistCoreBind){Bind=_webAtomsCoreDistCoreBind.default;},function(_webAtomsCoreDistCoreBindableProperty){BindableProperty=_webAtomsCoreDistCoreBindableProperty.BindableProperty;},function(_webAtomsCoreDistCorePropertyBinding){PropertyBinding=_webAtomsCoreDistCorePropertyBinding.PropertyBinding;},function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default;},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl;},function(_webAtomsCoreDistWebControlsAtomToggleButtonBar){AtomToggleButtonBar=_webAtomsCoreDistWebControlsAtomToggleButtonBar.AtomToggleButtonBar;},function(_webAtomsDateTimeDistTimeSpan){TimeSpan=_webAtomsDateTimeDistTimeSpan.default;},function(_AtomTimeFieldStyle){AtomTimeFieldStyle=_AtomTimeFieldStyle.default;}],execute:function(){zones=[{label:"AM",value:"AM"},{label:"PM",value:"PM"}];_export("default",AtomTimeField=class AtomTimeField extends AtomControl{preCreate(){super.preCreate();this.defaultControlStyle=AtomTimeFieldStyle;this.registerDisposable(new PropertyBinding(this,this.element,"time",[["this","ts"]],true,{fromSource:v=>toTimeString(v),fromTarget:v=>fromTimeString(v,this.ts)},this));}create(){this.render(XNode.create("div",{class:this.controlStyle.name,time:Bind.oneWay(()=>this.changed(this.ts.hour,this.ts.minutes,this.ts.zone))},XNode.create("input",{class:"hour",type:"number",max:"12",min:"0",value:Bind.twoWaysImmediate(()=>this.ts.hour)}),XNode.create("input",{class:"minutes",type:"number",min:"0",max:"59",value:Bind.twoWaysImmediate(()=>this.ts.minutes)}),XNode.create(AtomToggleButtonBar,{items:zones,value:Bind.twoWays(()=>this.ts.zone)})));}changed(hour,minutes,zone){const n={hour,minutes,zone};return toTimeString(n);}});__decorate([BindableProperty,__metadata("design:type",String)],AtomTimeField.prototype,"time",void 0);__decorate([BindableProperty,__metadata("design:type",Number)],AtomTimeField.prototype,"hour",void 0);__decorate([BindableProperty,__metadata("design:type",Number)],AtomTimeField.prototype,"minutes",void 0);__decorate([BindableProperty,__metadata("design:type",String)],AtomTimeField.prototype,"zone",void 0);__decorate([BindableProperty,__metadata("design:type",Object)],AtomTimeField.prototype,"ts",void 0);}};});
+System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/PropertyBinding", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/controls/AtomToggleButtonBar", "@web-atoms/date-time/dist/TimeSpan", "./AtomTimeFieldStyle"], function (_export, _context) {
+  "use strict";
+
+  var __decorate, __metadata, Bind, BindableProperty, PropertyBinding, XNode, AtomControl, AtomToggleButtonBar, TimeSpan, AtomTimeFieldStyle, AtomTimeField, zones;
+  function toTimeString(ts) {
+    const h = ts.zone === "AM" ? ts.hour : ts.hour + 12;
+    const t = new TimeSpan(0, h, ts.minutes);
+    return t.toString(true);
+  }
+  function fromTimeString(t, ti) {
+    if (!t) {
+      return ti;
+    }
+    const ts = TimeSpan.parse(t);
+    const isMorning = ts.totalMinutes < 12 * 60;
+    ti = ti || {};
+    ti.hour = isMorning ? ts.hours : ts.hours - 12;
+    ti.minutes = ts.minutes;
+    ti.zone = isMorning ? "AM" : "PM";
+    return ti;
+  }
+  _export("default", void 0);
+  return {
+    setters: [function (_tslib) {
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCorePropertyBinding) {
+      PropertyBinding = _webAtomsCoreDistCorePropertyBinding.PropertyBinding;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistWebControlsAtomToggleButtonBar) {
+      AtomToggleButtonBar = _webAtomsCoreDistWebControlsAtomToggleButtonBar.AtomToggleButtonBar;
+    }, function (_webAtomsDateTimeDistTimeSpan) {
+      TimeSpan = _webAtomsDateTimeDistTimeSpan.default;
+    }, function (_AtomTimeFieldStyle) {
+      AtomTimeFieldStyle = _AtomTimeFieldStyle.default;
+    }],
+    execute: function () {
+      zones = [{
+        label: "AM",
+        value: "AM"
+      }, {
+        label: "PM",
+        value: "PM"
+      }];
+      _export("default", AtomTimeField = class AtomTimeField extends AtomControl {
+        preCreate() {
+          super.preCreate();
+          this.defaultControlStyle = AtomTimeFieldStyle;
+          this.registerDisposable(new PropertyBinding(this, this.element, "time", [["this", "ts"]], true, {
+            fromSource: v => toTimeString(v),
+            fromTarget: v => fromTimeString(v, this.ts)
+          }, this));
+        }
+        create() {
+          this.render(XNode.create("div", {
+            class: this.controlStyle.name,
+            time: Bind.oneWay(() => this.changed(this.ts.hour, this.ts.minutes, this.ts.zone))
+          }, XNode.create("input", {
+            class: "hour",
+            type: "number",
+            max: "12",
+            min: "0",
+            value: Bind.twoWaysImmediate(() => this.ts.hour)
+          }), XNode.create("input", {
+            class: "minutes",
+            type: "number",
+            min: "0",
+            max: "59",
+            value: Bind.twoWaysImmediate(() => this.ts.minutes)
+          }), XNode.create(AtomToggleButtonBar, {
+            items: zones,
+            value: Bind.twoWays(() => this.ts.zone)
+          })));
+        }
+        changed(hour, minutes, zone) {
+          const n = {
+            hour,
+            minutes,
+            zone
+          };
+          return toTimeString(n);
+        }
+      });
+      __decorate([BindableProperty, __metadata("design:type", String)], AtomTimeField.prototype, "time", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Number)], AtomTimeField.prototype, "hour", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Number)], AtomTimeField.prototype, "minutes", void 0);
+      __decorate([BindableProperty, __metadata("design:type", String)], AtomTimeField.prototype, "zone", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Object)], AtomTimeField.prototype, "ts", void 0);
+    }
+  };
+});
 //# sourceMappingURL=AtomTimeField.js.map

package/dist/time-field/AtomTimeField.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["AtomTimeField","toTimeString","ts","h","zone","hour","t","TimeSpan","minutes","toString","fromTimeString","ti","parse","isMorning","totalMinutes","hours","Bind","BindableProperty","PropertyBinding","XNode","AtomControl","AtomToggleButtonBar","AtomTimeFieldStyle","zones","label","value","preCreate","defaultControlStyle","registerDisposable","element","fromSource","v","fromTarget","create","render","class","controlStyle","name","time","oneWay","changed","type","max","min","twoWaysImmediate","items","twoWays","n","__decorate"],"sourceRoot":"","sources":["../../src/time-field/AtomTimeField.tsx"],"sourcesContent":[null]}
+{"version":3,"mappings":"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","names":["AtomTimeField","toTimeString","ts","h","zone","hour","t","TimeSpan","minutes","toString","fromTimeString","ti","parse","isMorning","totalMinutes","hours","Bind","BindableProperty","PropertyBinding","XNode","AtomControl","AtomToggleButtonBar","AtomTimeFieldStyle","zones","label","value","preCreate","defaultControlStyle","registerDisposable","element","fromSource","v","fromTarget","create","render","class","controlStyle","name","time","oneWay","changed","type","max","min","twoWaysImmediate","items","twoWays","n","__decorate"],"sourceRoot":"","sources":["../../src/time-field/AtomTimeField.tsx"],"sourcesContent":[null]}

package/dist/time-field/AtomTimeFieldStyle.js

@@ -1,2 +1,28 @@
-System.register(["@web-atoms/core/dist/web/styles/AtomStyle"],function(_export,_context){"use strict";var AtomStyle,AtomTimeFieldStyle;_export("default",void 0);return{setters:[function(_webAtomsCoreDistWebStylesAtomStyle){AtomStyle=_webAtomsCoreDistWebStylesAtomStyle.AtomStyle;}],execute:function(){_export("default",AtomTimeFieldStyle=class AtomTimeFieldStyle extends AtomStyle{get root(){return{subclasses:{" .minutes":{maxWidth:"50px"}," .hour":{maxWidth:"50px"}}};}});}};});
+System.register(["@web-atoms/core/dist/web/styles/AtomStyle"], function (_export, _context) {
+  "use strict";
+
+  var AtomStyle, AtomTimeFieldStyle;
+  _export("default", void 0);
+  return {
+    setters: [function (_webAtomsCoreDistWebStylesAtomStyle) {
+      AtomStyle = _webAtomsCoreDistWebStylesAtomStyle.AtomStyle;
+    }],
+    execute: function () {
+      _export("default", AtomTimeFieldStyle = class AtomTimeFieldStyle extends AtomStyle {
+        get root() {
+          return {
+            subclasses: {
+              " .minutes": {
+                maxWidth: "50px"
+              },
+              " .hour": {
+                maxWidth: "50px"
+              }
+            }
+          };
+        }
+      });
+    }
+  };
+});
 //# sourceMappingURL=AtomTimeFieldStyle.js.map

package/dist/time-field/AtomTimeFieldStyle.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"oHAGqBA,kBAAmB,yFAH/BC,SAAS,qCAATA,SAAS,yCAGGD,kBAAmB,CAA1B,KAAOA,mBAAmB,QAAQC,UAAS,CAErD,GAAWC,KAAI,GACX,MAAO,CACHC,UAAU,CAAE,CACR,WAAW,CAAE,CACTC,QAAQ,CAAE,OACb,CACD,QAAQ,CAAE,CACNA,QAAQ,CAAE,SAGrB,CACL,EACH","names":["AtomTimeFieldStyle","AtomStyle","root","subclasses","maxWidth"],"sourceRoot":"","sources":["../../src/time-field/AtomTimeFieldStyle.ts"],"sourcesContent":[null]}
+{"version":3,"mappings":";;;iBAGqBA,kBAAmB;EAAA;EAAA;IAAA;MAH/BC,SAAS,uCAATA,SAAS;IAAA;IAAA;MAAA,mBAGGD,kBAAmB,GAA1B,MAAOA,kBAAmB,SAAQC,SAAS;QAErD,IAAWC,IAAI;UACX,OAAO;YACHC,UAAU,EAAE;cACR,WAAW,EAAE;gBACTC,QAAQ,EAAE;eACb;cACD,QAAQ,EAAE;gBACNA,QAAQ,EAAE;;;WAGrB;QACL;OACH;IAAA;EAAA;AAAA","names":["AtomTimeFieldStyle","AtomStyle","root","subclasses","maxWidth"],"sourceRoot":"","sources":["../../src/time-field/AtomTimeFieldStyle.ts"],"sourcesContent":[null]}

package/dist/toggle-view/AtomToggleView.js

@@ -1,2 +1,95 @@
-System.register(["tslib","@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/styles/CSS"],function(_export,_context){"use strict";var __decorate,__metadata,Bind,BindableProperty,Colors,XNode,StyleRule,AtomControl,CSS,AtomToggleView,css;function ToggleView({icon,label},node){return XNode.create("div",null,XNode.create("div",null,XNode.create("i",{class:icon}),XNode.create("label",{text:label})),XNode.create("div",null,node));}_export({ToggleView:ToggleView,default:void 0});return{setters:[function(_tslib){__decorate=_tslib.__decorate;__metadata=_tslib.__metadata;},function(_webAtomsCoreDistCoreBind){Bind=_webAtomsCoreDistCoreBind.default;},function(_webAtomsCoreDistCoreBindableProperty){BindableProperty=_webAtomsCoreDistCoreBindableProperty.BindableProperty;},function(_webAtomsCoreDistCoreColors){Colors=_webAtomsCoreDistCoreColors.default;},function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default;},function(_webAtomsCoreDistStyleStyleRule){StyleRule=_webAtomsCoreDistStyleStyleRule.default;},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl;},function(_webAtomsCoreDistWebStylesCSS){CSS=_webAtomsCoreDistWebStylesCSS.default;}],execute:function(){css=CSS(StyleRule().flexStretch().verticalFlexLayout({alignItems:"stretch"}).overflow("hidden").child(StyleRule(".toolbar").flexLayout({gap:0}).alignSelf("center").child(StyleRule(".item").flexLayout({inline:true}).border("solid 1px lightgray").padding(5).child(StyleRule("label").whiteSpace("nowrap").marginBottom(0)).and(StyleRule(".selected").backgroundColor(Colors.darkBlue).color(Colors.white)).and(StyleRule(":first-child").borderTopLeftRadius(10).borderBottomLeftRadius(10)).and(StyleRule(":last-child").borderTopRightRadius(10).borderBottomRightRadius(10)))).child(StyleRule(".presenter").flexStretch().display("grid").gridTemplateColumns("1fr").gridTemplateRows("1fr").overflow("hidden").child(StyleRule("*").gridRowStart("1").gridColumnStart("1").transition("transform 0.3s").overflow("auto").padding(5)).child(StyleRule(".left").transform("translate(-100%, 0)")).child(StyleRule(".right").transform("translate(100%, 0)")).child(StyleRule(".selected").transform("translate(0, 0)"))),"div[data-wa-toggle-view=wa-toggle-view]");_export("default",AtomToggleView=class AtomToggleView extends AtomControl{preCreate(){this.selectedIndex=0;}render(node,e,creator){var _a,_b;this.render=super.render;super.render(XNode.create("div",Object.assign({"data-wa-toggle-view":"wa-toggle-view"},node.attributes),XNode.create("div",{class:"toolbar"}),XNode.create("div",{class:"presenter"})));const toolbar=this.element.getElementsByClassName("toolbar")[0];const presenter=this.element.getElementsByClassName("presenter")[0];let index=0;for(const iterator of node.children){const{0:label,1:view}=iterator.children;const i=index++;(_a=label.attributes)!==null&&_a!==void 0?_a:label.attributes={};(_b=view.attributes)!==null&&_b!==void 0?_b:view.attributes={};label.attributes.eventClick=Bind.event(()=>this.selectedIndex=i);label.attributes.styleClass=Bind.oneWay(()=>({item:1,selected:i===this.selectedIndex}));view.attributes.styleClass=Bind.oneWay(()=>({left:i<this.selectedIndex,right:i>this.selectedIndex,selected:i===this.selectedIndex}));const l=document.createElement("div");toolbar.appendChild(l);this.render(label,l,this);const p=document.createElement("div");presenter.appendChild(p);this.render(view,p,this);index++;}}});__decorate([BindableProperty,__metadata("design:type",Number)],AtomToggleView.prototype,"selectedIndex",void 0);}};});
+System.register(["tslib", "@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/styles/CSS"], function (_export, _context) {
+  "use strict";
+
+  var __decorate, __metadata, Bind, BindableProperty, Colors, XNode, StyleRule, AtomControl, CSS, AtomToggleView, css;
+  function ToggleView({
+    icon,
+    label
+  }, node) {
+    return XNode.create("div", null, XNode.create("div", null, XNode.create("i", {
+      class: icon
+    }), XNode.create("label", {
+      text: label
+    })), XNode.create("div", null, node));
+  }
+  _export({
+    ToggleView: ToggleView,
+    default: void 0
+  });
+  return {
+    setters: [function (_tslib) {
+      __decorate = _tslib.__decorate;
+      __metadata = _tslib.__metadata;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }],
+    execute: function () {
+      css = CSS(StyleRule().flexStretch().verticalFlexLayout({
+        alignItems: "stretch"
+      }).overflow("hidden").child(StyleRule(".toolbar").flexLayout({
+        gap: 0
+      }).alignSelf("center").child(StyleRule(".item").flexLayout({
+        inline: true
+      }).border("solid 1px lightgray").padding(5).child(StyleRule("label").whiteSpace("nowrap").marginBottom(0)).and(StyleRule(".selected").backgroundColor(Colors.darkBlue).color(Colors.white)).and(StyleRule(":first-child").borderTopLeftRadius(10).borderBottomLeftRadius(10)).and(StyleRule(":last-child").borderTopRightRadius(10).borderBottomRightRadius(10)))).child(StyleRule(".presenter").flexStretch().display("grid").gridTemplateColumns("1fr").gridTemplateRows("1fr").overflow("hidden").child(StyleRule("*").gridRowStart("1").gridColumnStart("1").transition("transform 0.3s").overflow("auto").padding(5)).child(StyleRule(".left").transform("translate(-100%, 0)")).child(StyleRule(".right").transform("translate(100%, 0)")).child(StyleRule(".selected").transform("translate(0, 0)"))), "div[data-wa-toggle-view=wa-toggle-view]");
+      _export("default", AtomToggleView = class AtomToggleView extends AtomControl {
+        preCreate() {
+          this.selectedIndex = 0;
+        }
+        render(node, e, creator) {
+          var _a, _b;
+          this.render = super.render;
+          super.render(XNode.create("div", Object.assign({
+            "data-wa-toggle-view": "wa-toggle-view"
+          }, node.attributes), XNode.create("div", {
+            class: "toolbar"
+          }), XNode.create("div", {
+            class: "presenter"
+          })));
+          const toolbar = this.element.getElementsByClassName("toolbar")[0];
+          const presenter = this.element.getElementsByClassName("presenter")[0];
+          let index = 0;
+          for (const iterator of node.children) {
+            const {
+              0: label,
+              1: view
+            } = iterator.children;
+            const i = index++;
+            (_a = label.attributes) !== null && _a !== void 0 ? _a : label.attributes = {};
+            (_b = view.attributes) !== null && _b !== void 0 ? _b : view.attributes = {};
+            label.attributes.eventClick = Bind.event(() => this.selectedIndex = i);
+            label.attributes.styleClass = Bind.oneWay(() => ({
+              item: 1,
+              selected: i === this.selectedIndex
+            }));
+            view.attributes.styleClass = Bind.oneWay(() => ({
+              left: i < this.selectedIndex,
+              right: i > this.selectedIndex,
+              selected: i === this.selectedIndex
+            }));
+            const l = document.createElement("div");
+            toolbar.appendChild(l);
+            this.render(label, l, this);
+            const p = document.createElement("div");
+            presenter.appendChild(p);
+            this.render(view, p, this);
+            index++;
+          }
+        }
+      });
+      __decorate([BindableProperty, __metadata("design:type", Number)], AtomToggleView.prototype, "selectedIndex", void 0);
+    }
+  };
+});
 //# sourceMappingURL=AtomToggleView.js.map

package/dist/toggle-view/AtomToggleView.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["AtomToggleView","ToggleView","icon","label","node","XNode","class","text","Bind","BindableProperty","Colors","StyleRule","AtomControl","CSS","css","flexStretch","verticalFlexLayout","alignItems","overflow","child","flexLayout","gap","alignSelf","inline","border","padding","whiteSpace","marginBottom","and","backgroundColor","darkBlue","color","white","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","display","gridTemplateColumns","gridTemplateRows","gridRowStart","gridColumnStart","transition","transform","preCreate","selectedIndex","render","e","creator","attributes","toolbar","element","getElementsByClassName","presenter","index","iterator","children","view","i","eventClick","event","styleClass","oneWay","item","selected","left","right","l","document","createElement","appendChild","p","__decorate"],"sourceRoot":"","sources":["../../src/toggle-view/AtomToggleView.tsx"],"sourcesContent":[null]}
+{"version":3,"mappings":"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","names":["AtomToggleView","ToggleView","icon","label","node","XNode","class","text","Bind","BindableProperty","Colors","StyleRule","AtomControl","CSS","css","flexStretch","verticalFlexLayout","alignItems","overflow","child","flexLayout","gap","alignSelf","inline","border","padding","whiteSpace","marginBottom","and","backgroundColor","darkBlue","color","white","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","display","gridTemplateColumns","gridTemplateRows","gridRowStart","gridColumnStart","transition","transform","preCreate","selectedIndex","render","e","creator","attributes","toolbar","element","getElementsByClassName","presenter","index","iterator","children","view","i","eventClick","event","styleClass","oneWay","item","selected","left","right","l","document","createElement","appendChild","p","__decorate"],"sourceRoot":"","sources":["../../src/toggle-view/AtomToggleView.tsx"],"sourcesContent":[null]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-atoms/web-controls",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "description": "HTML controls for web atoms core",
   "main": "index.js",
   "scripts": {
@@ -18,13 +18,13 @@
   },
   "homepage": "https://github.com/web-atoms/web-controls#readme",
   "dependencies": {
-    "@web-atoms/core": "^2.2.6",
+    "@web-atoms/core": "^2.2.9",
     "@web-atoms/date-time": "^1.0.26",
     "@web-atoms/module-loader": "^2.1.10",
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
-    "@web-atoms/ts-to-systemjs": "^1.1.6",
+    "@web-atoms/ts-to-systemjs": "^1.1.7",
     "istanbul": "^0.4.5",
     "remap-istanbul": "^0.13.0",
     "tslib": "^2.4.1"