ngc-float-button - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

bundles/ngc-float-button.umd.js

@@ -23,3 +23,3 @@ (function (global, factory) {
                     styles: ["\n\n  .item {\n    width:250px;\n    height: 40px;\n    left:-203px;\n    transform: translate3d(0, 0, 0);\n    transition: transform, opacity ease-out 200ms;\n    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition-duration: 180ms;\n    position: absolute;\n    cursor: pointer;\n    top:5px;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  \n  .item.disabled {\n    pointer-events: none;\n  }\n  \n  .item.disabled .fab-item {\n    background-color: lightgray;\n  }\n\n  .content {\n    background: #333333;\n    margin-right: 50px;\n    line-height: 25px;\n    color: white;\n    text-transform: lowercase;\n    padding: 2px 7px;\n    border-radius: 3px;\n    display: none;\n    font-size: 12px;\n    height: 25px;\n    margin-top: 4px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-item {\n    right: 0;\n    background: white;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    position: absolute;\n    color: #797979;\n    text-align: center;\n    cursor: pointer;\n    line-height: 50px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n\n  "],
-                    template: "\n    <div #elementref class=\"item {{ isDisabled ? 'disabled' : ''}}\" \n    (click)=\"emitClickEvent($event)\">\n        <div class=\"content-wrapper\" #contentref>\n          <div class=\"content\" [style.display]=\"content ? 'block' : 'none'\">{{content}}</div>\n        </div>\n        <a class=\"fab-item\" [style.backgroundColor]=\"color\">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ",
+                    template: "\n    <div #elementref class=\"item {{ disabled ? 'disabled' : ''}}\" \n    (click)=\"emitClickEvent($event)\">\n        <div class=\"content-wrapper\" #contentref>\n          <div class=\"content\" [style.display]=\"content ? 'block' : 'none'\">{{content}}</div>\n        </div>\n        <a class=\"fab-item\" [style.backgroundColor]=\"color\">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ",
                     changeDetection: core.ChangeDetectionStrategy.OnPush
@@ -26,0 +26,0 @@ },] },

bundles/ngc-float-button.umd.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/material"),require("rxjs/Subject"),require("rxjs/BehaviorSubject")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/material","rxjs/Subject","rxjs/BehaviorSubject"],e):e((t.ng=t.ng||{},t.ng.floatbutton={}),t.ng.core,t.common,t.material,t.Subject,t.Rx)}(this,function(t,e,n,i,o,a){"use strict";var s=function(){function t(){this.color="white",this.clicked=new e.EventEmitter,this.disabled=!1}return t.prototype.emitClickEvent=function(t){if(this.disabled)return this.disabled;this.clicked.emit(t)},t.decorators=[{type:e.Component,args:[{selector:"ngc-float-item-button",styles:["\n\n  .item {\n    width:250px;\n    height: 40px;\n    left:-203px;\n    transform: translate3d(0, 0, 0);\n    transition: transform, opacity ease-out 200ms;\n    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition-duration: 180ms;\n    position: absolute;\n    cursor: pointer;\n    top:5px;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  \n  .item.disabled {\n    pointer-events: none;\n  }\n  \n  .item.disabled .fab-item {\n    background-color: lightgray;\n  }\n\n  .content {\n    background: #333333;\n    margin-right: 50px;\n    line-height: 25px;\n    color: white;\n    text-transform: lowercase;\n    padding: 2px 7px;\n    border-radius: 3px;\n    display: none;\n    font-size: 12px;\n    height: 25px;\n    margin-top: 4px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-item {\n    right: 0;\n    background: white;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    position: absolute;\n    color: #797979;\n    text-align: center;\n    cursor: pointer;\n    line-height: 50px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n\n  "],template:'\n    <div #elementref class="item {{ isDisabled ? \'disabled\' : \'\'}}" \n    (click)="emitClickEvent($event)">\n        <div class="content-wrapper" #contentref>\n          <div class="content" [style.display]="content ? \'block\' : \'none\'">{{content}}</div>\n        </div>\n        <a class="fab-item" [style.backgroundColor]="color">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ',changeDetection:e.ChangeDetectionStrategy.OnPush}]}],t.ctorParameters=function(){return[]},t.propDecorators={icon:[{type:e.Input}],content:[{type:e.Input}],color:[{type:e.Input}],clicked:[{type:e.Output}],disabled:[{type:e.Input}],elementref:[{type:e.ViewChild,args:["elementref"]}],contentref:[{type:e.ViewChild,args:["contentref"]}]},t}(),r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},c=function(){function t(t,e){this.element=t,this.cd=e,this.subs=[],this.spaceBetweenButtons=55,this.color="#dd0031",this.disabled=!1,this.events=new o.Subject,this.elementref=t.nativeElement,this.state=new a.BehaviorSubject({display:!1,direction:"top",event:"start",spaceBetweenButtons:this.spaceBetweenButtons})}return t.prototype.toggle=function(){if(this.disabled)return this.disabled;this.state.next(r({},this.state.getValue(),{display:!this.state.getValue().display,event:this.state.getValue().display?"close":"open"}))},t.prototype.checkDirectionType=function(){if(this.buttons.toArray()){var t="block";"right"!==this.direction&&"left"!==this.direction||(t="none"),this.buttons.toArray().forEach(function(e){e.contentref.nativeElement.style.display=t})}},t.prototype.animateButtons=function(t){var e=this;this.buttons.toArray().forEach(function(n,i){i+=1;var o=n.elementref.nativeElement.style;"directionChanged"!==t&&e.state.getValue().display&&(o.transform="scale(1)",o["transition-duration"]="0s",n.timeout&&clearTimeout(n.timeout)),setTimeout(function(){o["transition-duration"]=e.state.getValue().display?90+100*i+"ms":"",o.transform=e.state.getValue().display?e.getTranslate(i):""},50),"directionChanged"===t||e.state.getValue().display||(n.timeout=setTimeout(function(){o.transform="scale(0)"},90+100*i))})},t.prototype.getTranslate=function(t){var e;switch(this.direction){case"right":e="translate3d("+this.state.getValue().spaceBetweenButtons*t+"px,0,0)";break;case"bottom":e="translate3d(0,"+this.state.getValue().spaceBetweenButtons*t+"px,0)";break;case"left":e="translate3d(-"+this.state.getValue().spaceBetweenButtons*t+"px,0,0)";break;default:e="translate3d(0,-"+this.state.getValue().spaceBetweenButtons*t+"px,0)"}return e},t.prototype.ngAfterContentInit=function(){var t=this;this.direction&&this.checkDirectionType(),this.buttons.toArray().map(function(e){var n=e.clicked.subscribe(function(){t.state.next(r({},t.state.getValue(),{display:!1,event:"close"}))});t.subs.push(n)});var e=this.state.subscribe(function(e){t.animateButtons(e.event),t.events.next({display:e.display,event:e.event,direction:e.direction})});this.subs.push(e)},t.prototype.ngOnChanges=function(t){var e=this;if(t.direction&&!t.direction.firstChange&&(this.state.next(r({},this.state.getValue(),{event:"directionChanged",direction:t.direction.currentValue})),this.checkDirectionType()),t.open&&t.open.currentValue){var n=this.open.subscribe(function(t){t!==e.state.getValue().display&&(e.state.next(r({},e.state.getValue(),{event:t?"open":"close",display:t})),e.cd.markForCheck())});this.subs.push(n)}t.spaceBetweenButtons&&t.spaceBetweenButtons.currentValue&&this.state.next(r({},this.state.getValue(),{event:"spaceBetweenButtonsChanged",spaceBetweenButtons:t.spaceBetweenButtons.currentValue}))},t.prototype.ngOnDestroy=function(){this.subs.forEach(function(t){t.unsubscribe()})},t.decorators=[{type:e.Component,args:[{changeDetection:e.ChangeDetectionStrategy.OnPush,selector:"ngc-float-button",styles:["\n\n  :host {\n    position: absolute;\n  }\n\n  .fab-menu {\n      box-sizing: border-box;\n      font-size: 20px;\n      width:55px;\n      height: 55px;\n      text-align: left;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 9;\n  }\n\n  .fab-toggle {\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    color: white;\n    text-align: center;\n    line-height: 50px;\n    transform: translate3d(0, 0, 0);\n    transition: all ease-out 200ms;\n    z-index: 2;\n    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    transition-duration: 400ms;\n    transform: scale(1.1, 1.1) translate3d(0, 0, 0);\n    cursor: pointer;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-menu .fab-toggle:hover {\n    transform: scale(1.2, 1.2) translate3d(0, 0, 0);\n  }\n\n  .fab-menu /deep/ .item {\n     opacity: 0;\n  }\n\n  .fab-menu.active /deep/ .item {\n     opacity: 1;\n  }\n\n  .fab-menu.active /deep/ .content-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .fab-menu.active /deep/ .content {\n    display: block;\n  }\n\n  .fab-menu.active .fab-toggle {\n    transition-timing-function: linear;\n    transition-duration: 200ms;\n    transform: scale(0.8, 0.8) translate3d(0, 0, 0);\n  }\n\n  "],template:'\n    <nav class="fab-menu" [class.active]="(state | async).display">\n        <a class="fab-toggle" (click)="toggle()" [style.backgroundColor]="color">\n          <mat-icon> {{icon}} </mat-icon>\n        </a>\n        <ng-content></ng-content>\n    </nav>\n  '}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ChangeDetectorRef}]},t.propDecorators={icon:[{type:e.Input}],direction:[{type:e.Input}],spaceBetweenButtons:[{type:e.Input}],open:[{type:e.Input}],color:[{type:e.Input}],disabled:[{type:e.Input}],events:[{type:e.Output}],buttons:[{type:e.ContentChildren,args:[s]}]},t}(),u=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,i.MatIconModule],declarations:[c,s],exports:[c,s]}]}],t.ctorParameters=function(){return[]},t}();t.NgcFloatButtonModule=u,t.NgcFloatButtonComponent=c,t.NgcFloatItemButtonComponent=s,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/material"),require("rxjs/Subject"),require("rxjs/BehaviorSubject")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/material","rxjs/Subject","rxjs/BehaviorSubject"],e):e((t.ng=t.ng||{},t.ng.floatbutton={}),t.ng.core,t.common,t.material,t.Subject,t.Rx)}(this,function(t,e,n,i,o,a){"use strict";var s=function(){function t(){this.color="white",this.clicked=new e.EventEmitter,this.disabled=!1}return t.prototype.emitClickEvent=function(t){if(this.disabled)return this.disabled;this.clicked.emit(t)},t.decorators=[{type:e.Component,args:[{selector:"ngc-float-item-button",styles:["\n\n  .item {\n    width:250px;\n    height: 40px;\n    left:-203px;\n    transform: translate3d(0, 0, 0);\n    transition: transform, opacity ease-out 200ms;\n    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition-duration: 180ms;\n    position: absolute;\n    cursor: pointer;\n    top:5px;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  \n  .item.disabled {\n    pointer-events: none;\n  }\n  \n  .item.disabled .fab-item {\n    background-color: lightgray;\n  }\n\n  .content {\n    background: #333333;\n    margin-right: 50px;\n    line-height: 25px;\n    color: white;\n    text-transform: lowercase;\n    padding: 2px 7px;\n    border-radius: 3px;\n    display: none;\n    font-size: 12px;\n    height: 25px;\n    margin-top: 4px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-item {\n    right: 0;\n    background: white;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    position: absolute;\n    color: #797979;\n    text-align: center;\n    cursor: pointer;\n    line-height: 50px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n\n  "],template:'\n    <div #elementref class="item {{ disabled ? \'disabled\' : \'\'}}" \n    (click)="emitClickEvent($event)">\n        <div class="content-wrapper" #contentref>\n          <div class="content" [style.display]="content ? \'block\' : \'none\'">{{content}}</div>\n        </div>\n        <a class="fab-item" [style.backgroundColor]="color">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ',changeDetection:e.ChangeDetectionStrategy.OnPush}]}],t.ctorParameters=function(){return[]},t.propDecorators={icon:[{type:e.Input}],content:[{type:e.Input}],color:[{type:e.Input}],clicked:[{type:e.Output}],disabled:[{type:e.Input}],elementref:[{type:e.ViewChild,args:["elementref"]}],contentref:[{type:e.ViewChild,args:["contentref"]}]},t}(),r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},c=function(){function t(t,e){this.element=t,this.cd=e,this.subs=[],this.spaceBetweenButtons=55,this.color="#dd0031",this.disabled=!1,this.events=new o.Subject,this.elementref=t.nativeElement,this.state=new a.BehaviorSubject({display:!1,direction:"top",event:"start",spaceBetweenButtons:this.spaceBetweenButtons})}return t.prototype.toggle=function(){if(this.disabled)return this.disabled;this.state.next(r({},this.state.getValue(),{display:!this.state.getValue().display,event:this.state.getValue().display?"close":"open"}))},t.prototype.checkDirectionType=function(){if(this.buttons.toArray()){var t="block";"right"!==this.direction&&"left"!==this.direction||(t="none"),this.buttons.toArray().forEach(function(e){e.contentref.nativeElement.style.display=t})}},t.prototype.animateButtons=function(t){var e=this;this.buttons.toArray().forEach(function(n,i){i+=1;var o=n.elementref.nativeElement.style;"directionChanged"!==t&&e.state.getValue().display&&(o.transform="scale(1)",o["transition-duration"]="0s",n.timeout&&clearTimeout(n.timeout)),setTimeout(function(){o["transition-duration"]=e.state.getValue().display?90+100*i+"ms":"",o.transform=e.state.getValue().display?e.getTranslate(i):""},50),"directionChanged"===t||e.state.getValue().display||(n.timeout=setTimeout(function(){o.transform="scale(0)"},90+100*i))})},t.prototype.getTranslate=function(t){var e;switch(this.direction){case"right":e="translate3d("+this.state.getValue().spaceBetweenButtons*t+"px,0,0)";break;case"bottom":e="translate3d(0,"+this.state.getValue().spaceBetweenButtons*t+"px,0)";break;case"left":e="translate3d(-"+this.state.getValue().spaceBetweenButtons*t+"px,0,0)";break;default:e="translate3d(0,-"+this.state.getValue().spaceBetweenButtons*t+"px,0)"}return e},t.prototype.ngAfterContentInit=function(){var t=this;this.direction&&this.checkDirectionType(),this.buttons.toArray().map(function(e){var n=e.clicked.subscribe(function(){t.state.next(r({},t.state.getValue(),{display:!1,event:"close"}))});t.subs.push(n)});var e=this.state.subscribe(function(e){t.animateButtons(e.event),t.events.next({display:e.display,event:e.event,direction:e.direction})});this.subs.push(e)},t.prototype.ngOnChanges=function(t){var e=this;if(t.direction&&!t.direction.firstChange&&(this.state.next(r({},this.state.getValue(),{event:"directionChanged",direction:t.direction.currentValue})),this.checkDirectionType()),t.open&&t.open.currentValue){var n=this.open.subscribe(function(t){t!==e.state.getValue().display&&(e.state.next(r({},e.state.getValue(),{event:t?"open":"close",display:t})),e.cd.markForCheck())});this.subs.push(n)}t.spaceBetweenButtons&&t.spaceBetweenButtons.currentValue&&this.state.next(r({},this.state.getValue(),{event:"spaceBetweenButtonsChanged",spaceBetweenButtons:t.spaceBetweenButtons.currentValue}))},t.prototype.ngOnDestroy=function(){this.subs.forEach(function(t){t.unsubscribe()})},t.decorators=[{type:e.Component,args:[{changeDetection:e.ChangeDetectionStrategy.OnPush,selector:"ngc-float-button",styles:["\n\n  :host {\n    position: absolute;\n  }\n\n  .fab-menu {\n      box-sizing: border-box;\n      font-size: 20px;\n      width:55px;\n      height: 55px;\n      text-align: left;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 9;\n  }\n\n  .fab-toggle {\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    color: white;\n    text-align: center;\n    line-height: 50px;\n    transform: translate3d(0, 0, 0);\n    transition: all ease-out 200ms;\n    z-index: 2;\n    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    transition-duration: 400ms;\n    transform: scale(1.1, 1.1) translate3d(0, 0, 0);\n    cursor: pointer;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-menu .fab-toggle:hover {\n    transform: scale(1.2, 1.2) translate3d(0, 0, 0);\n  }\n\n  .fab-menu /deep/ .item {\n     opacity: 0;\n  }\n\n  .fab-menu.active /deep/ .item {\n     opacity: 1;\n  }\n\n  .fab-menu.active /deep/ .content-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .fab-menu.active /deep/ .content {\n    display: block;\n  }\n\n  .fab-menu.active .fab-toggle {\n    transition-timing-function: linear;\n    transition-duration: 200ms;\n    transform: scale(0.8, 0.8) translate3d(0, 0, 0);\n  }\n\n  "],template:'\n    <nav class="fab-menu" [class.active]="(state | async).display">\n        <a class="fab-toggle" (click)="toggle()" [style.backgroundColor]="color">\n          <mat-icon> {{icon}} </mat-icon>\n        </a>\n        <ng-content></ng-content>\n    </nav>\n  '}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ChangeDetectorRef}]},t.propDecorators={icon:[{type:e.Input}],direction:[{type:e.Input}],spaceBetweenButtons:[{type:e.Input}],open:[{type:e.Input}],color:[{type:e.Input}],disabled:[{type:e.Input}],events:[{type:e.Output}],buttons:[{type:e.ContentChildren,args:[s]}]},t}(),u=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,i.MatIconModule],declarations:[c,s],exports:[c,s]}]}],t.ctorParameters=function(){return[]},t}();t.NgcFloatButtonModule=u,t.NgcFloatButtonComponent=c,t.NgcFloatItemButtonComponent=s,Object.defineProperty(t,"__esModule",{value:!0})});

components/ngc-float-item-button.component.js

@@ -18,3 +18,3 @@ /* created by @GustavoCostaW https://github.com/gustavocostaw/ngc-float-button  */
                     styles: ["\n\n  .item {\n    width:250px;\n    height: 40px;\n    left:-203px;\n    transform: translate3d(0, 0, 0);\n    transition: transform, opacity ease-out 200ms;\n    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition-duration: 180ms;\n    position: absolute;\n    cursor: pointer;\n    top:5px;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  \n  .item.disabled {\n    pointer-events: none;\n  }\n  \n  .item.disabled .fab-item {\n    background-color: lightgray;\n  }\n\n  .content {\n    background: #333333;\n    margin-right: 50px;\n    line-height: 25px;\n    color: white;\n    text-transform: lowercase;\n    padding: 2px 7px;\n    border-radius: 3px;\n    display: none;\n    font-size: 12px;\n    height: 25px;\n    margin-top: 4px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-item {\n    right: 0;\n    background: white;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    position: absolute;\n    color: #797979;\n    text-align: center;\n    cursor: pointer;\n    line-height: 50px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n\n  "],
-                    template: "\n    <div #elementref class=\"item {{ isDisabled ? 'disabled' : ''}}\" \n    (click)=\"emitClickEvent($event)\">\n        <div class=\"content-wrapper\" #contentref>\n          <div class=\"content\" [style.display]=\"content ? 'block' : 'none'\">{{content}}</div>\n        </div>\n        <a class=\"fab-item\" [style.backgroundColor]=\"color\">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ",
+                    template: "\n    <div #elementref class=\"item {{ disabled ? 'disabled' : ''}}\" \n    (click)=\"emitClickEvent($event)\">\n        <div class=\"content-wrapper\" #contentref>\n          <div class=\"content\" [style.display]=\"content ? 'block' : 'none'\">{{content}}</div>\n        </div>\n        <a class=\"fab-item\" [style.backgroundColor]=\"color\">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ",
                     changeDetection: ChangeDetectionStrategy.OnPush
@@ -21,0 +21,0 @@ },] },

components/ngc-float-item-button.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"NgcFloatItemButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngc-float-item-button","styles":["\n\n  .item {\n    width:250px;\n    height: 40px;\n    left:-203px;\n    transform: translate3d(0, 0, 0);\n    transition: transform, opacity ease-out 200ms;\n    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition-duration: 180ms;\n    position: absolute;\n    cursor: pointer;\n    top:5px;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  \n  .item.disabled {\n    pointer-events: none;\n  }\n  \n  .item.disabled .fab-item {\n    background-color: lightgray;\n  }\n\n  .content {\n    background: #333333;\n    margin-right: 50px;\n    line-height: 25px;\n    color: white;\n    text-transform: lowercase;\n    padding: 2px 7px;\n    border-radius: 3px;\n    display: none;\n    font-size: 12px;\n    height: 25px;\n    margin-top: 4px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-item {\n    right: 0;\n    background: white;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    position: absolute;\n    color: #797979;\n    text-align: center;\n    cursor: pointer;\n    line-height: 50px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n\n  "],"template":"\n    <div #elementref class=\"item {{ isDisabled ? 'disabled' : ''}}\" \n    (click)=\"emitClickEvent($event)\">\n        <div class=\"content-wrapper\" #contentref>\n          <div class=\"content\" [style.display]=\"content ? 'block' : 'none'\">{{content}}</div>\n        </div>\n        <a class=\"fab-item\" [style.backgroundColor]=\"color\">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"elementref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["elementref"]}]}],"contentref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["contentref"]}]}],"emitClickEvent":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NgcFloatItemButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngc-float-item-button","styles":["\n\n  .item {\n    width:250px;\n    height: 40px;\n    left:-203px;\n    transform: translate3d(0, 0, 0);\n    transition: transform, opacity ease-out 200ms;\n    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition-duration: 180ms;\n    position: absolute;\n    cursor: pointer;\n    top:5px;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  \n  .item.disabled {\n    pointer-events: none;\n  }\n  \n  .item.disabled .fab-item {\n    background-color: lightgray;\n  }\n\n  .content {\n    background: #333333;\n    margin-right: 50px;\n    line-height: 25px;\n    color: white;\n    text-transform: lowercase;\n    padding: 2px 7px;\n    border-radius: 3px;\n    display: none;\n    font-size: 12px;\n    height: 25px;\n    margin-top: 4px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-item {\n    right: 0;\n    background: white;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    position: absolute;\n    color: #797979;\n    text-align: center;\n    cursor: pointer;\n    line-height: 50px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n\n  "],"template":"\n    <div #elementref class=\"item {{ isDisabled ? 'disabled' : ''}}\" \n    (click)=\"emitClickEvent($event)\">\n        <div class=\"content-wrapper\" #contentref>\n          <div class=\"content\" [style.display]=\"content ? 'block' : 'none'\">{{content}}</div>\n        </div>\n        <a class=\"fab-item\" [style.backgroundColor]=\"color\">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"elementref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["elementref"]}]}],"contentref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["contentref"]}]}],"emitClickEvent":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"NgcFloatItemButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngc-float-item-button","styles":["\n\n  .item {\n    width:250px;\n    height: 40px;\n    left:-203px;\n    transform: translate3d(0, 0, 0);\n    transition: transform, opacity ease-out 200ms;\n    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition-duration: 180ms;\n    position: absolute;\n    cursor: pointer;\n    top:5px;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  \n  .item.disabled {\n    pointer-events: none;\n  }\n  \n  .item.disabled .fab-item {\n    background-color: lightgray;\n  }\n\n  .content {\n    background: #333333;\n    margin-right: 50px;\n    line-height: 25px;\n    color: white;\n    text-transform: lowercase;\n    padding: 2px 7px;\n    border-radius: 3px;\n    display: none;\n    font-size: 12px;\n    height: 25px;\n    margin-top: 4px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-item {\n    right: 0;\n    background: white;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    position: absolute;\n    color: #797979;\n    text-align: center;\n    cursor: pointer;\n    line-height: 50px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n\n  "],"template":"\n    <div #elementref class=\"item {{ disabled ? 'disabled' : ''}}\" \n    (click)=\"emitClickEvent($event)\">\n        <div class=\"content-wrapper\" #contentref>\n          <div class=\"content\" [style.display]=\"content ? 'block' : 'none'\">{{content}}</div>\n        </div>\n        <a class=\"fab-item\" [style.backgroundColor]=\"color\">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"elementref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["elementref"]}]}],"contentref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["contentref"]}]}],"emitClickEvent":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NgcFloatItemButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngc-float-item-button","styles":["\n\n  .item {\n    width:250px;\n    height: 40px;\n    left:-203px;\n    transform: translate3d(0, 0, 0);\n    transition: transform, opacity ease-out 200ms;\n    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);\n    transition-duration: 180ms;\n    position: absolute;\n    cursor: pointer;\n    top:5px;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n  \n  .item.disabled {\n    pointer-events: none;\n  }\n  \n  .item.disabled .fab-item {\n    background-color: lightgray;\n  }\n\n  .content {\n    background: #333333;\n    margin-right: 50px;\n    line-height: 25px;\n    color: white;\n    text-transform: lowercase;\n    padding: 2px 7px;\n    border-radius: 3px;\n    display: none;\n    font-size: 12px;\n    height: 25px;\n    margin-top: 4px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n  .fab-item {\n    right: 0;\n    background: white;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    position: absolute;\n    color: #797979;\n    text-align: center;\n    cursor: pointer;\n    line-height: 50px;\n    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n  }\n\n\n  "],"template":"\n    <div #elementref class=\"item {{ disabled ? 'disabled' : ''}}\" \n    (click)=\"emitClickEvent($event)\">\n        <div class=\"content-wrapper\" #contentref>\n          <div class=\"content\" [style.display]=\"content ? 'block' : 'none'\">{{content}}</div>\n        </div>\n        <a class=\"fab-item\" [style.backgroundColor]=\"color\">\n           <mat-icon> {{ icon }} </mat-icon>\n        </a>\n    </div>\n  ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"elementref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["elementref"]}]}],"contentref":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["contentref"]}]}],"emitClickEvent":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "ngc-float-button",
   "description": "Google Material Float Button - Implementation for Angular v4+",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "bundles/ngc-float-button.umd.min.js",
@@ -6,0 +6,0 @@ "module": "index.js",

No alert changes

Worsened metrics

Total package byte prevSize

75044

decreased by-0.02%

No dependency changes