[{"__symbolic":"module","version":3,"metadata":{"ZrSwitchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zr-switch","template":"\n  <!-- round -->\n  <span *ngIf=\"type==='round'\" class=\"m-switch m-switch--{{state}}\" [ngClass]=\"{'m-switch--icon':icon,'m-switch--lg':size==='lg',\n    'm-switch--sm':size==='sm','m-switch--outline':outline}\">\n    <label>\n      <input type=\"checkbox\" name=\"{{name}}\" [disabled]=\"disabled\" [checked]=\"checked\" (change)=\"handle($event)\">\n      <span></span>\n    </label>\n  </span>\n  \n  <!-- button -->\n  <div *ngIf=\"type==='button'\" class=\"lz-button-switch-continer\" (click)=\"handleButton()\"\n      [ngClass]=\"{'lz-button-switch-sm':size==='sm','lz-button-switch-md':size==='md','lz-button-switch-lg':size==='lg',\n      'lz-button-switch-border':border,'lz-button-switch-border-radius-sm':radius==='sm','lz-button-switch-border-radius-lg':radius==='lg',\n      'lz-button-shadow':shadow}\">\n    <div class=\"lz-button-switch-contient clearfix\" \n      [ngClass]=\"{'lz-button-switch-animate-sm-on':size==='sm'&&checked,\n      'lz-button-switch-animate-sm-off':size==='sm'&&!checked,\n      'lz-button-switch-animate-md-on':size==='md'&&checked,\n      'lz-button-switch-animate-md-off':size==='md'&&!checked,\n      'lz-button-switch-animate-lg-on':size==='lg'&&checked,\n      'lz-button-switch-animate-lg-off':size==='lg'&&!checked,\n      'lz-button-disabled':disabled}\">\n      <span class=\"lz-button-bg-{{state}}\" [ngStyle]=\"{'color':'#fff'}\">{{text[0]}}</span>\n      <span>&ngsp;</span>\n      <span [ngStyle]=\"{'background-color':'#ebedf2','border-color':'#ebedf2','color':'#575962'}\">{{text[1]}}</span>\n    </div>\n  </div>\n  ","styles":["\n    .lz-button-switch-continer {\n      overflow: hidden;\n      cursor: pointer;\n    }\n    .lz-button-switch-continer span {\n      float: left;\n      display: block;\n    }\n    \n    .lz-button-switch-border {\n      border: 1px solid #ebedf2;\n    }\n    \n    .lz-button-switch-border-radius-sm {\n      border-radius: 4px;\n    }\n    \n    .lz-button-switch-border-radius-lg {\n      border-radius: 25.5px;\n    }\n    \n    .lz-button-bg-success {\n      background-color: #34bfa3;\n    }\n    \n    .lz-button-bg-warning {\n      background-color: #f5b22e;\n    }\n    \n    .lz-button-bg-info {\n      background-color: #38a1f6;\n    }\n    \n    .lz-button-bg-danger {\n      background-color: #f3516d;\n    }\n    \n    .lz-button-bg-primary {\n      background-color: #5967dc;\n    }\n    \n    .lz-button-bg-accent {\n      background-color: #05c1db;\n    }\n    \n    .lz-button-bg-brand {\n      background-color: #716aca;\n    }\n    \n    .lz-button-shadow {\n      box-shadow: 0 3px 20px 0 rgba(113, 106, 202, 0.17);\n    }\n    \n    .lz-button-disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n    \n    .lz-button-switch-sm {\n      width: 94px;\n      height: 26px;\n      text-align: center;\n    }\n    .lz-button-switch-sm .lz-button-switch-contient {\n      width: 141px;\n    }\n    .lz-button-switch-sm .lz-button-switch-contient span {\n      width: 47px;\n      height: 26px;\n      font-size: 0.85rem;\n      line-height: 26px;\n    }\n    \n    .lz-button-switch-md {\n      width: 122px;\n      height: 33px;\n      text-align: center;\n    }\n    .lz-button-switch-md .lz-button-switch-contient {\n      width: 183px;\n    }\n    .lz-button-switch-md .lz-button-switch-contient span {\n      width: 61px;\n      height: 33px;\n      font-size: 0.85rem;\n      line-height: 33px;\n    }\n    \n    .lz-button-switch-lg {\n      width: 162px;\n      height: 51px;\n      text-align: center;\n    }\n    .lz-button-switch-lg .lz-button-switch-contient {\n      width: 243px;\n    }\n    .lz-button-switch-lg .lz-button-switch-contient span {\n      width: 81px;\n      height: 51px;\n      font-size: 1.1rem;\n      line-height: 51px;\n    }\n    \n    @keyframes toggleAnimateSmOn {\n      from {\n        margin-left: -47px;\n      }\n      to {\n        margin-left: 0;\n      }\n    }\n    @keyframes toggleAnimateSmOff {\n      from {\n        margin-left: 0;\n      }\n      to {\n        margin-left: -47px;\n      }\n    }\n    @keyframes toggleAnimateMdOn {\n      from {\n        margin-left: -61px;\n      }\n      to {\n        margin-left: 0;\n      }\n    }\n    @keyframes toggleAnimateMdOff {\n      from {\n        margin-left: 0;\n      }\n      to {\n        margin-left: -61px;\n      }\n    }\n    @keyframes toggleAnimateLgOn {\n      from {\n        margin-left: -81px;\n      }\n      to {\n        margin-left: 0;\n      }\n    }\n    @keyframes toggleAnimateLgOff {\n      from {\n        margin-left: 0;\n      }\n      to {\n        margin-left: -81px;\n      }\n    }\n    .lz-button-switch-animate-sm-on {\n      animation: toggleAnimateSmOn 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-sm-off {\n      animation: toggleAnimateSmOff 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-md-on {\n      animation: toggleAnimateMdOn 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-md-off {\n      animation: toggleAnimateMdOff 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-lg-on {\n      animation: toggleAnimateLgOn 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-lg-off {\n      animation: toggleAnimateLgOff 0.5s forwards;\n    }\n  "]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"border":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"shadow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"checkedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"handle":[{"__symbolic":"method"}],"handleButton":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ZrSwitchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zr-switch","template":"\n  <!-- round -->\n  <span *ngIf=\"type==='round'\" class=\"m-switch m-switch--{{state}}\" [ngClass]=\"{'m-switch--icon':icon,'m-switch--lg':size==='lg',\n    'm-switch--sm':size==='sm','m-switch--outline':outline}\">\n    <label>\n      <input type=\"checkbox\" name=\"{{name}}\" [disabled]=\"disabled\" [checked]=\"checked\" (change)=\"handle($event)\">\n      <span></span>\n    </label>\n  </span>\n  \n  <!-- button -->\n  <div *ngIf=\"type==='button'\" class=\"lz-button-switch-continer\" (click)=\"handleButton()\"\n      [ngClass]=\"{'lz-button-switch-sm':size==='sm','lz-button-switch-md':size==='md','lz-button-switch-lg':size==='lg',\n      'lz-button-switch-border':border,'lz-button-switch-border-radius-sm':radius==='sm','lz-button-switch-border-radius-lg':radius==='lg',\n      'lz-button-shadow':shadow}\">\n    <div class=\"lz-button-switch-contient clearfix\" \n      [ngClass]=\"{'lz-button-switch-animate-sm-on':size==='sm'&&checked,\n      'lz-button-switch-animate-sm-off':size==='sm'&&!checked,\n      'lz-button-switch-animate-md-on':size==='md'&&checked,\n      'lz-button-switch-animate-md-off':size==='md'&&!checked,\n      'lz-button-switch-animate-lg-on':size==='lg'&&checked,\n      'lz-button-switch-animate-lg-off':size==='lg'&&!checked,\n      'lz-button-disabled':disabled}\">\n      <span class=\"lz-button-bg-{{state}}\" [ngStyle]=\"{'color':'#fff'}\">{{text[0]}}</span>\n      <span>&ngsp;</span>\n      <span [ngStyle]=\"{'background-color':'#ebedf2','border-color':'#ebedf2','color':'#575962'}\">{{text[1]}}</span>\n    </div>\n  </div>\n  ","styles":["\n    .lz-button-switch-continer {\n      overflow: hidden;\n      cursor: pointer;\n    }\n    .lz-button-switch-continer span {\n      float: left;\n      display: block;\n    }\n    \n    .lz-button-switch-border {\n      border: 1px solid #ebedf2;\n    }\n    \n    .lz-button-switch-border-radius-sm {\n      border-radius: 4px;\n    }\n    \n    .lz-button-switch-border-radius-lg {\n      border-radius: 25.5px;\n    }\n    \n    .lz-button-bg-success {\n      background-color: #34bfa3;\n    }\n    \n    .lz-button-bg-warning {\n      background-color: #f5b22e;\n    }\n    \n    .lz-button-bg-info {\n      background-color: #38a1f6;\n    }\n    \n    .lz-button-bg-danger {\n      background-color: #f3516d;\n    }\n    \n    .lz-button-bg-primary {\n      background-color: #5967dc;\n    }\n    \n    .lz-button-bg-accent {\n      background-color: #05c1db;\n    }\n    \n    .lz-button-bg-brand {\n      background-color: #716aca;\n    }\n    \n    .lz-button-shadow {\n      box-shadow: 0 3px 20px 0 rgba(113, 106, 202, 0.17);\n    }\n    \n    .lz-button-disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n    \n    .lz-button-switch-sm {\n      width: 94px;\n      height: 26px;\n      text-align: center;\n    }\n    .lz-button-switch-sm .lz-button-switch-contient {\n      width: 141px;\n    }\n    .lz-button-switch-sm .lz-button-switch-contient span {\n      width: 47px;\n      height: 26px;\n      font-size: 0.85rem;\n      line-height: 26px;\n    }\n    \n    .lz-button-switch-md {\n      width: 122px;\n      height: 33px;\n      text-align: center;\n    }\n    .lz-button-switch-md .lz-button-switch-contient {\n      width: 183px;\n    }\n    .lz-button-switch-md .lz-button-switch-contient span {\n      width: 61px;\n      height: 33px;\n      font-size: 0.85rem;\n      line-height: 33px;\n    }\n    \n    .lz-button-switch-lg {\n      width: 162px;\n      height: 51px;\n      text-align: center;\n    }\n    .lz-button-switch-lg .lz-button-switch-contient {\n      width: 243px;\n    }\n    .lz-button-switch-lg .lz-button-switch-contient span {\n      width: 81px;\n      height: 51px;\n      font-size: 1.1rem;\n      line-height: 51px;\n    }\n    \n    @keyframes toggleAnimateSmOn {\n      from {\n        margin-left: -47px;\n      }\n      to {\n        margin-left: 0;\n      }\n    }\n    @keyframes toggleAnimateSmOff {\n      from {\n        margin-left: 0;\n      }\n      to {\n        margin-left: -47px;\n      }\n    }\n    @keyframes toggleAnimateMdOn {\n      from {\n        margin-left: -61px;\n      }\n      to {\n        margin-left: 0;\n      }\n    }\n    @keyframes toggleAnimateMdOff {\n      from {\n        margin-left: 0;\n      }\n      to {\n        margin-left: -61px;\n      }\n    }\n    @keyframes toggleAnimateLgOn {\n      from {\n        margin-left: -81px;\n      }\n      to {\n        margin-left: 0;\n      }\n    }\n    @keyframes toggleAnimateLgOff {\n      from {\n        margin-left: 0;\n      }\n      to {\n        margin-left: -81px;\n      }\n    }\n    .lz-button-switch-animate-sm-on {\n      animation: toggleAnimateSmOn 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-sm-off {\n      animation: toggleAnimateSmOff 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-md-on {\n      animation: toggleAnimateMdOn 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-md-off {\n      animation: toggleAnimateMdOff 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-lg-on {\n      animation: toggleAnimateLgOn 0.5s forwards;\n    }\n    \n    .lz-button-switch-animate-lg-off {\n      animation: toggleAnimateLgOff 0.5s forwards;\n    }\n  "]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"state":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"border":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"shadow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"checkedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"handle":[{"__symbolic":"method"}],"handleButton":[{"__symbolic":"method"}]}}}}]