Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngc-float-button

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngc-float-button - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

228

bundles/ngc-float-button.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
typeof define === 'function' && define.amd ? define(factory) :
(factory());
}(this, (function () { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material'), require('rxjs/Subject'), require('rxjs/BehaviorSubject')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/material', 'rxjs/Subject', 'rxjs/BehaviorSubject'], factory) :
(factory((global.ng = global.ng || {}, global.ng.floatbutton = {}),global.ng.core,global.common,global.material,global.Subject,global.Rx));
}(this, (function (exports,core,common,material,Subject,BehaviorSubject) { 'use strict';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ngc_float_button_module_1 = require("./components/ngc-float-button.module");
exports.NgcFloatButtonModule = ngc_float_button_module_1.NgcFloatButtonModule;
var ngc_float_button_component_1 = require("./components/ngc-float-button.component");
exports.NgcFloatButtonComponent = ngc_float_button_component_1.NgcFloatButtonComponent;
var ngc_float_item_button_component_1 = require("./components/ngc-float-item-button.component");
exports.NgcFloatItemButtonComponent = ngc_float_item_button_component_1.NgcFloatItemButtonComponent;
/* created by @GustavoCostaW https://github.com/gustavocostaw/ngc-float-button */
var NgcFloatItemButtonComponent = /** @class */ (function () {
function NgcFloatItemButtonComponent() {
this.clicked = new core.EventEmitter();
}
NgcFloatItemButtonComponent.decorators = [
{ type: core.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 .content {\n padding:5px;\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 display: none;\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n }\n\n .fab-item {\n right: 0px;\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\" (click)=\"clicked.emit($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\">\n <mat-icon> {{icon}} </mat-icon>\n </a>\n </div>\n ",
changeDetection: core.ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
NgcFloatItemButtonComponent.ctorParameters = function () { return []; };
NgcFloatItemButtonComponent.propDecorators = {
'icon': [{ type: core.Input },],
'content': [{ type: core.Input },],
'clicked': [{ type: core.Output },],
'elementref': [{ type: core.ViewChild, args: ['elementref',] },],
'contentref': [{ type: core.ViewChild, args: ['contentref',] },],
};
return NgcFloatItemButtonComponent;
}());
/* created by @GustavoCostaW https://github.com/gustavocostaw/ngc-float-button */
var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var NgcFloatButtonComponent = /** @class */ (function () {
function NgcFloatButtonComponent(element, cd) {
this.element = element;
this.cd = cd;
this.subs = [];
this.state = new BehaviorSubject.BehaviorSubject({
display: false,
direction: 'top',
event: 'start',
spaceBetweenButtons: 55
});
this.events = new Subject.Subject();
this.elementref = element.nativeElement;
}
NgcFloatButtonComponent.prototype.toggle = function () {
this.state.next(__assign({}, this.state.getValue(), { display: !this.state.getValue().display, event: !this.state.getValue().display ? 'open' : 'close' }));
};
// only top and bottom support content element
NgcFloatButtonComponent.prototype.checkDirectionType = function () {
if (this.buttons.toArray()) {
var display_1 = 'block';
if (this.direction === 'right' || this.direction === 'left') {
display_1 = 'none';
}
this.buttons.toArray().forEach(function (element) {
element.contentref.nativeElement.style.display = display_1;
});
}
};
// transition
NgcFloatButtonComponent.prototype.animateButtons = function (eventType) {
var _this = this;
this.buttons.toArray().forEach(function (btn, i) {
i += 1;
var style = btn.elementref.nativeElement.style;
if (eventType !== 'directionChanged' && _this.state.getValue().display) {
style['transform'] = 'scale(1)';
style['transition-duration'] = '0s';
if (btn.timeout) {
clearTimeout(btn.timeout);
}
}
setTimeout(function () {
style['transition-duration'] = _this.state.getValue().display ? 90 + (100 * i) + "ms" : '';
style['transform'] = _this.state.getValue().display ? _this.getTranslate(i) : '';
}, 50);
if (eventType !== 'directionChanged' && !_this.state.getValue().display) {
btn.timeout = setTimeout(function () {
style['transform'] = 'scale(0)';
}, 90 + (100 * i));
}
});
};
// get transition direction
NgcFloatButtonComponent.prototype.getTranslate = function (i) {
var animation;
switch (this.direction) {
case 'right':
animation = "translate3d(" + this.state.getValue().spaceBetweenButtons * i + "px,0,0)";
break;
case 'bottom':
animation = "translate3d(0," + this.state.getValue().spaceBetweenButtons * i + "px,0)";
break;
case 'left':
animation = "translate3d(-" + this.state.getValue().spaceBetweenButtons * i + "px,0,0)";
break;
default:
animation = "translate3d(0,-" + this.state.getValue().spaceBetweenButtons * i + "px,0)";
break;
}
return animation;
};
/* some problems here */
// @HostListener('document:click', ['$event.target']) private clickOutside(target) {
// if (this.state.getValue().display && !this.elementref.contains(target)) {
// this.state.next({
// ...this.state.getValue(),
// display: false,
// event: 'close'
// });
// }
// }
NgcFloatButtonComponent.prototype.ngAfterContentInit = function () {
var _this = this;
if (this.direction) {
// first time to check
this.checkDirectionType();
}
this.buttons.toArray().map(function (v) {
var sub = v.clicked.subscribe(function () {
_this.state.next(__assign({}, _this.state.getValue(), { display: false, event: 'close' }));
});
_this.subs.push(sub);
});
var sub = this.state.subscribe(function (v) {
_this.animateButtons(v.event);
_this.events.next({
display: v.display,
event: v.event,
direction: v.direction
});
});
this.subs.push(sub);
};
// if @Input values changes, we need check the direction type
NgcFloatButtonComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes.direction && !changes.direction.firstChange) {
this.state.next(__assign({}, this.state.getValue(), { event: 'directionChanged', direction: changes.direction.currentValue }));
// if changes happens
this.checkDirectionType();
}
if (changes.open && changes.open.currentValue) {
var sub = this.open.subscribe(function (v) {
if (v !== _this.state.getValue().display) {
_this.state.next(__assign({}, _this.state.getValue(), { event: v ? 'open' : 'close', display: v }));
// make angular happy
_this.cd.detectChanges();
}
});
this.subs.push(sub);
}
if (changes.spaceBetweenButtons && changes.spaceBetweenButtons.currentValue) {
this.state.next(__assign({}, this.state.getValue(), { event: 'spaceBetweenButtonsChanged', spaceBetweenButtons: changes.spaceBetweenButtons.currentValue }));
}
};
NgcFloatButtonComponent.prototype.ngOnDestroy = function () {
this.subs.map(function (v) {
v.unsubscribe();
});
};
NgcFloatButtonComponent.decorators = [
{ type: core.Component, args: [{
changeDetection: core.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 background: #dd0031;\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.getValue().display\">\n <a class=\"fab-toggle\" (click)=\"toggle()\">\n <mat-icon> {{icon}} </mat-icon>\n </a>\n <ng-content></ng-content>\n </nav>\n "
},] },
];
/** @nocollapse */
NgcFloatButtonComponent.ctorParameters = function () { return [
{ type: core.ElementRef, },
{ type: core.ChangeDetectorRef, },
]; };
NgcFloatButtonComponent.propDecorators = {
'icon': [{ type: core.Input },],
'direction': [{ type: core.Input },],
'spaceBetweenButtons': [{ type: core.Input },],
'open': [{ type: core.Input },],
'events': [{ type: core.Output },],
'buttons': [{ type: core.ContentChildren, args: [NgcFloatItemButtonComponent,] },],
};
return NgcFloatButtonComponent;
}());
var NgcFloatButtonModule = /** @class */ (function () {
function NgcFloatButtonModule() {
}
NgcFloatButtonModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
material.MatIconModule
],
declarations: [NgcFloatButtonComponent, NgcFloatItemButtonComponent],
exports: [NgcFloatButtonComponent, NgcFloatItemButtonComponent]
},] },
];
/** @nocollapse */
NgcFloatButtonModule.ctorParameters = function () { return []; };
return NgcFloatButtonModule;
}());
exports.NgcFloatButtonModule = NgcFloatButtonModule;
exports.NgcFloatButtonComponent = NgcFloatButtonComponent;
exports.NgcFloatItemButtonComponent = NgcFloatItemButtonComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));

2

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

@@ -1,1 +0,1 @@

!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o():"function"==typeof define&&define.amd?define(o):o()}(0,function(){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("./components/ngc-float-button.module");exports.NgcFloatButtonModule=t.NgcFloatButtonModule;var o=require("./components/ngc-float-button.component");exports.NgcFloatButtonComponent=o.NgcFloatButtonComponent;var e=require("./components/ngc-float-item-button.component");exports.NgcFloatItemButtonComponent=e.NgcFloatItemButtonComponent});
!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,a,o){"use strict";var s=function(){function t(){this.clicked=new e.EventEmitter}return 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 .content {\n padding:5px;\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 display: none;\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n }\n\n .fab-item {\n right: 0px;\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" (click)="clicked.emit($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">\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}],clicked:[{type:e.Output}],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++){e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t},c=function(){function t(t,e){this.element=t,this.cd=e,this.subs=[],this.state=new o.BehaviorSubject({display:!1,direction:"top",event:"start",spaceBetweenButtons:55}),this.events=new a.Subject,this.elementref=t.nativeElement}return t.prototype.toggle=function(){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 a=n.elementref.nativeElement.style;"directionChanged"!==t&&e.state.getValue().display&&(a.transform="scale(1)",a["transition-duration"]="0s",n.timeout&&clearTimeout(n.timeout)),setTimeout(function(){a["transition-duration"]=e.state.getValue().display?90+100*i+"ms":"",a.transform=e.state.getValue().display?e.getTranslate(i):""},50),"directionChanged"===t||e.state.getValue().display||(n.timeout=setTimeout(function(){a.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.detectChanges())});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.map(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 background: #dd0031;\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.getValue().display">\n <a class="fab-toggle" (click)="toggle()">\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}],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})});

@@ -1,9 +0,4 @@

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ngc_float_button_module_1 = require("./components/ngc-float-button.module");
exports.NgcFloatButtonModule = ngc_float_button_module_1.NgcFloatButtonModule;
var ngc_float_button_component_1 = require("./components/ngc-float-button.component");
exports.NgcFloatButtonComponent = ngc_float_button_component_1.NgcFloatButtonComponent;
var ngc_float_item_button_component_1 = require("./components/ngc-float-item-button.component");
exports.NgcFloatItemButtonComponent = ngc_float_item_button_component_1.NgcFloatItemButtonComponent;
export { NgcFloatButtonModule } from './components/ngc-float-button.module';
export { NgcFloatButtonComponent } from './components/ngc-float-button.component';
export { NgcFloatItemButtonComponent } from './components/ngc-float-item-button.component';
//# sourceMappingURL=index.js.map
{
"name": "ngc-float-button",
"version": "1.1.1",
"version": "1.1.2",
"main": "bundles/ngc-float-button.umd.min.js",

@@ -5,0 +5,0 @@ "module": "index.js",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc