simple-icon-toggle/simple-icon-toggle.metadata.json

An Angular.io compatible slide toggle with an icon inside ;)

{"__symbolic":"module","version":3,"metadata":{"SimpleIconToggleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"providers":[],"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"simple-icon-toggle","template":"\n      <div class=\"switch_container\" [ngStyle]=\"{'width':options.width + 'px'}\">\n        <div class=\"aspect-ratio-space-external\"></div>\n        <div class=\"switch\" (click)=\"toggle()\" [ngClass]=\"{'checked': checked}\">\n          <div class=\"spot-container\">\n            <div class=\"aspect-ratio-space\"></div>\n            <div class=\"spot\" [ngStyle]=\"{'background-color': options.spotColor}\">\n              <i [ngStyle]=\"{'font-size': ((42 * options.width) / 100) + 'px',\n                              'line-height': ((58 * options.width) / 100) + 'px',\n                              'color': options.iconColor != null ? options.iconColor : 'inherit'}\" class=\"material-icons icon\">{{ icon }}</i>\n            </div>\n          </div>\n          <div class=\"slider\" [ngStyle]=\"{'background-color': checked ? options.barColor: '#ccc', 'border-radius': ((58 * options.width) / 100) + 'px' }\"></div>\n        </div>\n      </div>\n    ","styles":["\n      .switch_container {\n          display: inline-block;\n          position: relative;\n          width: 60px;\n          margin: 2px;\n        }\n  \n        .switch {\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            position: absolute;\n            display: inline-block;\n            width: 100%;\n            height: 100%;\n            cursor: pointer;\n            -webkit-tap-highlight-color: transparent;\n            /*text-align: center;*/\n          }\n    \n          .icon {\n            display: block;\n          }\n\n          .slider {\n            margin: 5%;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            -webkit-transition: .4s;\n            transition: .4s;\n            border-radius: 35px;\n            background-color: #FFEBEE;\n          }\n    \n          .spot-container {\n            display: inline-block;\n            position: absolute;\n            width: 58%;\n            text-align: center;\n          }\n\n          .aspect-ratio-space-external {\n            margin-top: 60%;\n          }\n\n          .aspect-ratio-space {\n            margin-top: 100%;\n          }\n          .spot {\n            top:0;\n            bottom: 0;\n            right: 0;\n            left: 0;\n            background-color: red;\n            -webkit-transition: .4s;\n            transition: .4s;\n            position: absolute;\n            vertical-align: middle;\n            -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.5);\n                    box-shadow: -1px 0 2px rgba(0,0,0,0.5);\n            border-radius: 50%;\n            z-index: 2;\n          }\n  \n          .vertically-centered {\n            vertical-align: middle;\n          }\n    \n          .checked .slider {\n            background-color: green;\n          }\n    \n          .checked .spot {\n            -webkit-transform: translateX(78%);\n            transform: translateX(78%);\n          }\n    "]}]}],"members":{"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["mat-icon"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["options"]}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["checked"]}]}],"checkedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"toggle":[{"__symbolic":"method"}],"mergeObjects":[{"__symbolic":"method"}]}}},"origins":{"SimpleIconToggleModule":"./src/app/modules/simple-icon-toggle/simple-icon-toggle.module","ɵa":"./src/app/modules/simple-icon-toggle/simple-icon-toggle.component"},"importAs":"simple-icon-toggle"}