simple-icon-toggle/simple-icon-toggle.js

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

import { Component, EventEmitter, Input, NgModule, Output } from '@angular/core';
import { CommonModule } from '@angular/common';

class SimpleIconToggleComponent {
    constructor() {
        this.isCheckedValue = false;
        this.icon = 'notifications_active';
        this.checked = false;
        this.checkedChange = new EventEmitter();
    }
    /**
     * @return {?}
     */
    get options() {
        return this.optionsValue;
    }
    /**
     * @param {?} values
     * @return {?}
     */
    set options(values) {
        this.optionsValue = this.mergeObjects({
            width: 125,
            barColor: 'lightgreen',
            spotColor: null,
            iconColor: null
        }, values);
    }
    ;
    /**
     * @return {?}
     */
    toggle() {
        this.checked = !this.checked;
        this.checkedChange.emit(this.checked);
    }
    /**
     * @param {...?} args
     * @return {?}
     */
    mergeObjects(...args) {
        var /** @type {?} */ resObj = {};
        for (var /** @type {?} */ i = 0; i < arguments.length; i += 1) {
            var /** @type {?} */ obj = arguments[i], /** @type {?} */ keys = Object.keys(obj);
            for (var /** @type {?} */ j = 0; j < keys.length; j += 1) {
                resObj[keys[j]] = obj[keys[j]];
            }
        }
        return resObj;
    }
}
SimpleIconToggleComponent.decorators = [
    { type: Component, args: [{
                selector: 'simple-icon-toggle',
                template: `
      <div class="switch_container" [ngStyle]="{'width':options.width + 'px'}">
        <div class="aspect-ratio-space-external"></div>
        <div class="switch" (click)="toggle()" [ngClass]="{'checked': checked}">
          <div class="spot-container">
            <div class="aspect-ratio-space"></div>
            <div class="spot" [ngStyle]="{'background-color': options.spotColor}">
              <i [ngStyle]="{'font-size': ((42 * options.width) / 100) + 'px',
                              'line-height': ((58 * options.width) / 100) + 'px',
                              'color': options.iconColor != null ? options.iconColor : 'inherit'}" class="material-icons icon">{{ icon }}</i>
            </div>
          </div>
          <div class="slider" [ngStyle]="{'background-color': checked ? options.barColor: '#ccc', 'border-radius': ((58 * options.width) / 100) + 'px' }"></div>
        </div>
      </div>
    `,
                styles: [`
      .switch_container {
          display: inline-block;
          position: relative;
          width: 60px;
          margin: 2px;
        }
  
        .switch {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 100%;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            /*text-align: center;*/
          }
    
          .icon {
            display: block;
          }

          .slider {
            margin: 5%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 35px;
            background-color: #FFEBEE;
          }
    
          .spot-container {
            display: inline-block;
            position: absolute;
            width: 58%;
            text-align: center;
          }

          .aspect-ratio-space-external {
            margin-top: 60%;
          }

          .aspect-ratio-space {
            margin-top: 100%;
          }
          .spot {
            top:0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: red;
            -webkit-transition: .4s;
            transition: .4s;
            position: absolute;
            vertical-align: middle;
            -webkit-box-shadow: -1px 0 2px rgba(0,0,0,0.5);
                    box-shadow: -1px 0 2px rgba(0,0,0,0.5);
            border-radius: 50%;
            z-index: 2;
          }
  
          .vertically-centered {
            vertical-align: middle;
          }
    
          .checked .slider {
            background-color: green;
          }
    
          .checked .spot {
            -webkit-transform: translateX(78%);
            transform: translateX(78%);
          }
    `]
            },] },
];
/**
 * @nocollapse
 */
SimpleIconToggleComponent.ctorParameters = () => [];
SimpleIconToggleComponent.propDecorators = {
    'icon': [{ type: Input, args: ['mat-icon',] },],
    'options': [{ type: Input, args: ['options',] },],
    'checked': [{ type: Input, args: ['checked',] },],
    'checkedChange': [{ type: Output },],
};

class SimpleIconToggleModule {
}
SimpleIconToggleModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule
                ],
                providers: [],
                declarations: [SimpleIconToggleComponent],
                exports: [SimpleIconToggleComponent]
            },] },
];
/**
 * @nocollapse
 */
SimpleIconToggleModule.ctorParameters = () => [];

/**
 * Generated bundle index. Do not edit.
 */

export { SimpleIconToggleModule, SimpleIconToggleComponent as ɵa };
//# sourceMappingURL=simple-icon-toggle.js.map