progress-button
Version:
A simple angular progress button.
478 lines (466 loc) • 33.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('progress-button', ['exports', '@angular/core', 'rxjs', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['progress-button'] = {}, global.ng.core, global.rxjs, global.ng.common));
}(this, (function (exports, i0, rxjs, common) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
/**
* Button Config used to initialize button options
*/
var ProgressButtonConfig = /** @class */ (function () {
function ProgressButtonConfig() {
this.progress = {
animation: 'fill',
direction: 'horizontal',
statusTime: 1500,
};
this.design = {
background: '#222222',
color: '#FFFFFF',
successBackground: '#00e175',
errorBackground: '#ff2948',
successIconColor: '#ffffff',
errorIconColor: '#ffffff',
progressBackground: '#000000',
progressInnerBackground: 'rgba(255, 255, 255,0.5)',
linesSize: 10,
radius: 0
};
}
return ProgressButtonConfig;
}());
/** @nocollapse */ ProgressButtonConfig.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ProgressButtonConfig_Factory() { return new ProgressButtonConfig(); }, token: ProgressButtonConfig, providedIn: "root" });
ProgressButtonConfig.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/**
* Merge an object with another
* @param data Object to merge
* @param source Original object
*/
function mergeOptions(data, source) {
if (data) {
Object.keys(source).forEach(function (k) {
if ((data[k] !== null && typeof data[k] !== 'undefined' && data[k] !== '')) {
source[k] = data[k];
}
});
// Update lateral-lines animation direction to vertical
if (typeof source !== 'undefined' && source.animation && source.animation === 'lateral-lines') {
source.direction = 'vertical';
}
}
return source;
}
// Token that makes the raw options available to the following factory function.
var FOR_ROOT_CONFIG_TOKEN = new i0.InjectionToken('forRoot() ProgressButtonService configuration.');
/**
* Return an instance of ProgressButtonConfig
* @param config The button config for the module
* @return ProgressButtonConfig;
*/
function progressButtonConfigFactory(config) {
var options = new ProgressButtonConfig();
if (config) {
options.progress = mergeOptions(config.progress, options.progress);
options.design = mergeOptions(config.design, options.design);
}
return (options);
}
var ProgressButtonService = /** @class */ (function () {
function ProgressButtonService(config) {
var _this = this;
if (config === void 0) { config = new ProgressButtonConfig(); }
/**
* Check if animation is active
* @param name ProgressButtonAnimation Animation name
*/
this.isAnimation = function (name) {
return (_this.progress.animation === name);
};
/**
* Return some progress styles
* @param progressValue The progress value
* @param statusClass The status (state-success | state-error)
*/
this.styles = function (progressValue, statusClass) {
return {
progressInner: _this.progressInnerStyle(progressValue),
button: _this.buttonStyle(statusClass),
content: _this.contentStyle(statusClass)
};
};
/**
* Get the Progress Inner Style
* @param progressValue The progress value
*/
this.progressInnerStyle = function (progressValue) {
var style = {
background: _this.design.progressInnerBackground,
borderColor: null,
borderLeftWidth: null,
borderRightWidth: null,
height: null,
width: null,
};
// Reset LinesSize
if ((_this.design.linesSize === null) || (typeof _this.design.linesSize === 'undefined')) {
_this.design.linesSize = 10;
}
// Lateral Lines
if (_this.isAnimation('lateral-lines')) {
style.background = null;
style.borderColor = _this.design.progressInnerBackground;
style.borderLeftWidth = _this.design.linesSize + 'px';
style.borderRightWidth = _this.design.linesSize + 'px';
}
// Set Size
style.height = _this.progressInnerHeight(progressValue);
style.width = _this.progressInnerWidth(progressValue);
return style;
};
/**
* Get Calculated Progress Inner Width
*/
this.progressInnerWidth = function (progressValue) {
if (_this.progress.direction === 'horizontal') {
return progressValue + '%';
}
else {
if (_this.isAnimation('shrink') && _this.design.radius) {
return progressValue + '%';
}
}
if (_this.isAnimation('top-line')) {
return _this.design.linesSize + 'px';
}
return null;
};
/**
* Get Calculated Progress Inner Height
*/
this.progressInnerHeight = function (progressValue) {
if (_this.progress.direction === 'vertical') {
if (_this.isAnimation('shrink') && _this.design.radius) {
return '100%';
}
return progressValue + '%';
}
if (_this.isAnimation('top-line')) {
return _this.design.linesSize + 'px';
}
return null;
};
/**
* Get the background color of the button according to the status
*/
this.mainBackgroundColor = function (statusClass) {
var bg = _this.design.background;
switch (statusClass) {
case 'state-success':
bg = _this.design.successBackground;
break;
case 'state-error':
bg = _this.design.errorBackground;
break;
}
return bg;
};
/**
* Get css style of the button
*/
this.buttonStyle = function (statusClass) {
return {
background: (!_this.status.isPerspective) ? _this.mainBackgroundColor(statusClass) : null,
color: _this.design.color,
borderRadius: (_this.status.isBorderRadius) ? _this.design.radius + 'px' : null,
};
};
/**
* Get the content style according to the status
*/
this.contentStyle = function (statusClass) {
return {
background: (_this.status.isContentBackground) ? _this.mainBackgroundColor(statusClass) : null,
color: _this.design.color,
borderRadius: (_this.status.isBorderRadius) ? _this.design.radius + 'px' : null,
};
};
var defConfig = new ProgressButtonConfig();
this.progressP = (config.progress) ? Object.assign({}, config.progress) : Object.assign({}, defConfig.progress);
this.designP = (config.design) ? Object.assign({}, config.design) : Object.assign({}, defConfig.design);
}
Object.defineProperty(ProgressButtonService.prototype, "status", {
/**
* Return the status of the data
*/
get: function () {
var status = {
perspective: null,
isHorizontal: true,
isPerspective: false,
isBorderRadius: false,
isRotateAnimation: false,
isFlipAnimation: false,
isSlideDownAnimation: false,
isMoveUpAnimation: false,
isContentBackground: false
};
status.isHorizontal = (this.progress.direction === 'horizontal');
status.isRotateAnimation = (this.progress.animation.includes('rotate-'));
status.isFlipAnimation = (this.progress.animation.includes('flip-'));
status.isSlideDownAnimation = (this.progress.animation.includes('slide-down'));
status.isMoveUpAnimation = (this.progress.animation.includes('move-up'));
status.perspective = (status.isRotateAnimation || status.isFlipAnimation) ? '' : null; // Have progress animation 3D perspective
status.isPerspective = (status.perspective !== null);
status.isBorderRadius = (!status.isRotateAnimation && this.design.radius !== null);
status.isContentBackground = (status.isPerspective || status.isSlideDownAnimation || status.isMoveUpAnimation);
return status;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ProgressButtonService.prototype, "design", {
get: function () {
return this.designP;
},
set: function (value) {
this.designP = mergeOptions(value, this.designP);
},
enumerable: false,
configurable: true
});
Object.defineProperty(ProgressButtonService.prototype, "progress", {
get: function () {
return this.progressP;
},
set: function (value) {
this.progressP = mergeOptions(value, this.progressP);
},
enumerable: false,
configurable: true
});
return ProgressButtonService;
}());
/** @nocollapse */ ProgressButtonService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ProgressButtonService_Factory() { return new ProgressButtonService(i0__namespace.ɵɵinject(ProgressButtonConfig)); }, token: ProgressButtonService, providedIn: "root" });
ProgressButtonService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
ProgressButtonService.ctorParameters = function () { return [
{ type: ProgressButtonConfig }
]; };
var ProgressButtonComponent = /** @class */ (function () {
function ProgressButtonComponent(service) {
var _this = this;
this.service = service;
this.progressValue = 0;
this.loading = false;
this.noTransition = false;
this.statusClass = '';
/**
* Specifies the type of button
*/
this.type = 'button';
/**
* Specifies that a button should automatically get focus when the page loads
*/
this.autofocus = null;
/**
* Specifies that a button should be disabled
*/
this.disabled = null;
/**
* Fires on a mouse click on the element
*/
this.action = new i0.EventEmitter();
/**
* Execute click action
*/
this.click = function () {
_this.action.emit(_this);
};
/**
* Init the progress component
*/
this.progressInit = function () {
_this.disabled = true;
_this.loading = true;
_this.noTransition = false;
_this.progressValue = 0;
};
/**
* Stop the progress animation
* @param status ProgressButtonStatus State of stop (error, success)
* @return Observable An observable with after-init and complete steps
*/
this.progressStop = function (status) {
return new rxjs.Observable(function (observer) {
observer.next('before-init');
var tim1 = setTimeout(function () {
_this.noTransition = true;
_this.progressValue = 0;
_this.loading = false;
_this.statusClass = ('state-' + status);
observer.next('after-init');
var tim2 = setTimeout(function () {
_this.statusClass = '';
_this.disabled = null;
observer.complete();
clearTimeout(tim1);
clearTimeout(tim2);
}, _this.progress.statusTime);
}, 300);
});
};
this.progress = this.service.progress;
this.design = this.service.design;
}
Object.defineProperty(ProgressButtonComponent.prototype, "status", {
/**
* Return the status of the progress data
*/
get: function () {
return this.service.status;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ProgressButtonComponent.prototype, "styles", {
/**
* Return styles of the button and its components
*/
get: function () {
return this.service.styles(this.progressValue, this.statusClass);
},
enumerable: false,
configurable: true
});
Object.defineProperty(ProgressButtonComponent.prototype, "progress", {
/**
* The Progress Button Data
*/
get: function () {
return this.service.progress;
},
/**
* Progress Button Data
* @param progress ProgressButtonData The Progress Button Data
*/
set: function (progress) {
this.service.progress = progress;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ProgressButtonComponent.prototype, "design", {
/**
* The Progress Button Design
*/
get: function () {
return this.service.design;
},
/**
* Progress Button Design
* @param design ProgressButtonDesign The Progress Button Design
*/
set: function (design) {
this.service.design = design;
},
enumerable: false,
configurable: true
});
return ProgressButtonComponent;
}());
ProgressButtonComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ydd-progress-button',
template: "<button class=\"progress-button\"\r\n [attr.autofocus]=\"autofocus\"\r\n [attr.disabled]=\"disabled\"\r\n\r\n [attr.form]=\"form?.id\"\r\n [attr.formaction]=\"form?.action\"\r\n [attr.formmethod]=\"form?.method\"\r\n [attr.formnovalidate]=\"form?.noValidate\"\r\n [attr.formtarget]=\"form?.target\"\r\n [attr.formenctype]=\"form?.enctype\"\r\n\r\n [attr.name]=\"name\"\r\n [attr.type]=\"type\"\r\n [attr.value]=\"value\"\r\n\r\n [attr.data-style]=\"progress.animation\"\r\n [attr.data-vertical]=\"(progress.direction === 'vertical')?'':null\"\r\n [attr.data-horizontal]=\"(progress.direction === 'horizontal')?'':null\"\r\n [attr.data-perspective]=\"status.perspective\"\r\n (click)=\"click()\"\r\n [ngClass]=\"[(loading)?'state-loading':'',statusClass,(status.isBorderRadius)?'radius':'']\"\r\n [ngStyle]=\"styles.button\">\r\n <!-- perspective -->\r\n <ng-container *ngIf=\"status.perspective === ''\">\r\n <span class=\"progress-wrap\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </span>\r\n </ng-container>\r\n <!-- not perspective -->\r\n <ng-container *ngIf=\"status.perspective === null\">\r\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n </ng-container>\r\n</button>\r\n<!-- template -->\r\n<ng-template #content>\r\n <span class=\"content\" [ngStyle]=\"styles.content\">\r\n <div class=\"success\" [style.color]=\"design.successIconColor\" [innerHTML]=\"''\"></div>\r\n <ng-content></ng-content>\r\n <div class=\"error\" [style.color]=\"design.errorIconColor\" [innerHTML]=\"''\"></div>\r\n </span>\r\n <span class=\"progress\"\r\n [style.background]=\"design.progressBackground\"\r\n [style.borderRadius]=\"(status.isBorderRadius)?design.radius+'px':null\">\r\n <span class=\"progress-inner\"\r\n [ngStyle]=\"styles.progressInner\"\r\n [ngClass]=\"{'notransition':noTransition}\"\r\n ></span>\r\n </span>\r\n</ng-template>\r\n",
providers: [ProgressButtonService],
styles: ["", "*{box-sizing:border-box}@font-face{font-weight:400;font-style:normal;font-family:icomoon;src:url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAPYAA0AAAAABbgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAcadpakEdERUYAAAFMAAAAHwAAACAAMwAGT1MvMgAAAWwAAAA8AAAAYA6xAoFjbWFwAAABqAAAAEoAAAFKy/Ug/2dhc3AAAAH0AAAACAAAAAgAAAAQZ2x5ZgAAAfwAAABaAAAAfGYDQ4loZWFkAAACWAAAAC0AAAA2Fk6lo2hoZWEAAAKIAAAAHAAAACQHwgPGaG10eAAAAqQAAAAWAAAAFgeVAABsb2NhAAACvAAAAA4AAAAOAEYAHG1heHAAAALMAAAAGAAAACAACAAObmFtZQAAAuQAAADNAAABifyQVWlwb3N0AAADtAAAACMAAAA+PkKaWnicY2BgYGQAgjO2i86D6HPnoh/AaABS9wgqAAB4nGNgZGBg4ANiCQYQYGJgZGBmYAWSLGAeAwAEmwA6AHicY2BmDmWcwMDKwMA0k+kMAwNDP4RmfM1gzMjJgAoYBdAEGBwYFJ4xMh/4D4TMB4A8VKDAwAgAYB4MOXicY2BgYGaAYBkGRgYQcAHyGMF8FgYNIM0GpBkZmBgUnjH+/w/kKzxj+P///2MpFqh6IGBkY4BzGJmABBMDKmCEWDGcAQC49wjcAAAAAQAB//8AD3icVYqxDYAwEAPtfxCKolQUTICYgS6jZacs8Dulf/EKosDFyZYPxBcBbsHcC7RiBfYt8aIZmzTzKtX8bQgvoKYNGThDSwz5SFTzwdJ9+OgsEzEn/gcekeAiHQAAeJxjYGRgYADimev2psfz23xl4GZhAIGbMwwmI9MsDMwNQIqDgQnEAwAiqwkVAAAAeJxjYGRgYD7w/wADAwsDCABJRgZUwAoATFcCkgAAAAAAAAAAAVUAAAIAAAAEAAAAAEAAAAAAAAAAAAAAAAgAHAA+AAB4nGNgZGBgYGPgYQDRDAxMDGgAAAJGABd4nHXOMQ6CMBgF4IeARk2MgzGOjE6GI7ghg4sDcRShISTQJlUS2T2Co2fwGJ7LB/kdadL264PXFMACHzjohoMJluIRvRW79F7s0Wexjzke4jHzl3iGFb5sOd6UyaK/ofOI3ohdOhR79EHsY42LeMz8KZ7xNW+UyGBQcxpooMxMbQxxgkKBBhVSWB5V0VQpMfT/UJ7wHosbv3d5wBfuOJEoeyuNDsJdONyN2NV9P8Wde87+FS3XuG8c/41IaWXTu8qDaxvEmTl29R+0pjoZAAAAeJxjYGLAD9iAmJGBiYGZkYmRmb00L9PVzMAAShsCACiABHMA) format(\"woff\")}.progress-button{position:relative;display:inline-block;padding:0;outline:none;border:none;background:\"#222222\";color:\"#FFFFFF\";letter-spacing:1px;font-size:1em;line-height:1.4;cursor:pointer;transition:background-color .2s ease}.progress-button[disabled],.progress-button[disabled].state-loading{cursor:default}.progress-button .content{position:relative;display:block;padding:20px 60px;transition:background-color .2s ease}.progress-button .content .error,.progress-button .content .success{position:absolute;right:20px;font-family:icomoon,sans-serif;opacity:0;transition:opacity .3s .3s;line-height:1;top:0;height:100%;align-items:center;display:flex}.progress-button .content .error,.progress-button .content .success{color:\"#ffffff\"}.progress-button.state-error .content .error,.progress-button.state-success .content .success{opacity:1}.progress-button .progress{background:\"#000000\"}.progress-button .progress-inner{position:absolute;left:0;background:\"#555555\"}.progress-button .progress-inner.notransition{transition:none!important}.progress-button[data-horizontal] .progress-inner{top:0;width:0;height:100%;transition:width .3s,opacity .3s}.progress-button[data-vertical] .progress-inner{bottom:0;width:100%;height:0;transition:height .3s,opacity .3s}.progress-button[data-perspective]{position:relative;display:inline-block;padding:0;background:transparent;perspective:900px}.progress-button[data-perspective] .content{padding:20px 60px;background:\"#222222\"}.progress-button[data-perspective] .progress-wrap{display:block;transition:transform .2s;transform-style:preserve-3d}.progress-button[data-perspective] .content,.progress-button[data-perspective] .progress{outline:1px solid transparent}", ".progress-button{transition:background .2s}.progress-button[data-style=fill][data-horizontal],.progress-button[data-style=fill][data-vertical]{overflow:hidden}.progress-button[data-style=fill][data-horizontal] .content,.progress-button[data-style=fill][data-vertical] .content{z-index:10;transition:transform .3s}.progress-button[data-style=fill][data-horizontal] .content .error,.progress-button[data-style=fill][data-horizontal] .content .success,.progress-button[data-style=fill][data-vertical] .content .error,.progress-button[data-style=fill][data-vertical] .content .success{top:100%;right:auto;left:50%;transition:opacity .3s;transform:translateX(-50%)}.progress-button[data-style=fill][data-horizontal].state-error .content,.progress-button[data-style=fill][data-horizontal].state-success .content,.progress-button[data-style=fill][data-vertical].state-error .content,.progress-button[data-style=fill][data-vertical].state-success .content{transform:translateY(-100%)}.progress-button[data-style=shrink]{overflow:hidden;transition:transform .2s,border-radius .2s linear}.progress-button[data-style=shrink][data-horizontal] .content,.progress-button[data-style=shrink][data-vertical] .content{transition:opacity .3s,transform .3s,border-radius .3s linear,padding .3s linear}.progress-button[data-style=shrink][data-horizontal] .content .error,.progress-button[data-style=shrink][data-horizontal] .content .success,.progress-button[data-style=shrink][data-vertical] .content .error,.progress-button[data-style=shrink][data-vertical] .content .success{top:100%;right:auto;left:50%;transition:opacity .3s,border-radius .3s linear;transform:translateX(-50%)}.progress-button[data-style=shrink][data-horizontal].state-loading,.progress-button[data-style=shrink][data-vertical].state-loading{transform:scaleY(.3)}.progress-button[data-style=shrink][data-horizontal].state-loading .content,.progress-button[data-style=shrink][data-vertical].state-loading .content{opacity:0}.progress-button[data-style=shrink][data-horizontal].state-error .content,.progress-button[data-style=shrink][data-horizontal].state-success .content,.progress-button[data-style=shrink][data-vertical].state-error .content,.progress-button[data-style=shrink][data-vertical].state-success .content{transform:translateY(-100%)}.progress-button[data-style=shrink][data-vertical].state-loading{transform:scaleX(.1)}.progress-button[data-style=shrink].radius.state-loading{transform:scale3d(.3,.3,1)}.progress-button[data-style=shrink].radius.state-loading .content{padding:20px 120px}.progress-button[data-style=shrink].radius[data-vertical].state-loading{transform:scale3d(.3,.3,1) rotate(-90deg)}.progress-button[data-style=shrink].radius[data-vertical].state-loading .content{padding:20px 60px}.progress-button[data-style=rotate-angle-bottom] .progress{position:absolute;top:100%;left:0;width:100%;height:20px;box-shadow:0 -1px 0 rgba(0,0,0,.3);transform:rotateX(-90deg);transform-origin:50% 0}.progress-button[data-style=rotate-angle-bottom].state-loading .progress-wrap{transform:rotateX(45deg)}.progress-button[data-style=rotate-angle-top] .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;box-shadow:0 -1px 0 rgba(0,0,0,.3);transform:rotateX(90deg);transform-origin:50% 100%}.progress-button[data-style=rotate-angle-top].state-loading .progress-wrap{transform:rotateX(-45deg)}.progress-button[data-style=rotate-angle-left] .progress{position:absolute;top:0;right:100%;width:20px;height:100%;box-shadow:1px 0 0 rgba(0,0,0,.3);transform:rotateY(-90deg);transform-origin:100% 50%}.progress-button[data-style=rotate-angle-left].state-loading .progress-wrap{transform:rotateY(45deg)}.progress-button[data-style=rotate-angle-right] .progress{position:absolute;top:0;left:100%;width:20px;height:100%;box-shadow:-1px 0 0 rgba(0,0,0,.3);transform:rotateY(90deg);transform-origin:0 50%}.progress-button[data-style=rotate-angle-right].state-loading .progress-wrap{transform:rotateY(-45deg)}.progress-button[data-style=rotate-side-down] .progress{position:absolute;top:100%;left:0;width:100%;height:20px;transform:rotateX(-90deg);transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button[data-style=rotate-side-down].state-loading .progress-wrap{transform:rotateX(90deg) translateZ(10px)}.progress-button[data-style=rotate-side-up] .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;transform:rotateX(90deg);transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button[data-style=rotate-side-up].state-loading .progress-wrap{transform:rotateX(-90deg) translateZ(10px)}.progress-button[data-style=rotate-side-left] .progress{position:absolute;top:0;left:0;width:20px;height:100%;transform:rotateY(90deg);transform-origin:0 50%}.progress-button[data-style=rotate-side-left] .progress-wrap{transform-origin:0 50%}.progress-button[data-style=rotate-side-left].state-loading .progress-wrap{transform:translateX(50%) rotateY(90deg) translateZ(10px)}.progress-button[data-style=rotate-side-right] .progress{position:absolute;top:0;left:100%;width:20px;height:100%;transform:rotateY(90deg);transform-origin:0 50%}.progress-button[data-style=rotate-side-right] .progress-wrap{transform-origin:100% 50%}.progress-button[data-style=rotate-side-right].state-loading .progress-wrap{transform:translateX(-50%) rotateY(-90deg) translateZ(10px)}.progress-button[data-style=rotate-back] .progress{position:absolute;top:100%;left:0;width:100%;height:100%;transform:rotateX(-180deg);transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button[data-style=rotate-back] .progress-wrap{transition-timing-function:ease-out}.progress-button[data-style=rotate-back] .content{-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button[data-style=rotate-back].state-loading .progress-wrap{transform:rotateX(180deg) scaleX(.6) scaleY(.3)}.progress-button[data-style=flip-open] .progress{position:absolute;top:auto;bottom:0;left:0;width:100%;height:30%}.progress-button[data-style=flip-open] .content{z-index:10;transition:transform .2s,background .2s;transform-origin:50% 0}.progress-button[data-style=flip-open].state-loading .content{transform:rotateX(45deg)}.progress-button[data-style=flip-open].radius .progress{height:100%;opacity:0;transition:opacity .2s ease;overflow:hidden}.progress-button[data-style=flip-open].radius.state-loading .progress{opacity:1}.progress-button[data-style=slide-down]{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button[data-style=slide-down] .progress{position:absolute;top:auto;bottom:0;left:0;width:100%;height:10px;transition:transform .2s,opacity .2s}.progress-button[data-style=slide-down] .content{z-index:10;padding:20px 60px;background:\"#222222\"}.progress-button[data-style=slide-down].state-loading .progress{transform:translateY(10px)}.progress-button[data-style=slide-down].radius .progress,.progress-button[data-style=slide-down].radius .progress-inner{height:100%;opacity:0;overflow:hidden}.progress-button[data-style=slide-down].radius.state-loading .progress{transform:translateY(5px)}.progress-button[data-style=slide-down].radius.state-loading .progress,.progress-button[data-style=slide-down].radius.state-loading .progress-inner{opacity:1}.progress-button[data-style=move-up]{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button[data-style=move-up] .progress{position:absolute;top:auto;bottom:0;left:0;width:100%;height:15px;transition:opacity .2s}.progress-button[data-style=move-up] .content{z-index:10;padding:20px 60px;background:\"#222222\";transition:transform .2s,opacity .2s}.progress-button[data-style=move-up].state-loading .content{transform:translateY(-15px)}.progress-button[data-style=move-up].radius .progress,.progress-button[data-style=move-up].radius .progress-inner{height:100%;opacity:0;overflow:hidden}.progress-button[data-style=move-up].radius.state-loading .content{transform:translateY(-5px)}.progress-button[data-style=move-up].radius.state-loading .progress,.progress-button[data-style=move-up].radius.state-loading .progress-inner{opacity:1}.progress-button[data-style=top-line]{transition:background .2s;overflow:hidden}.progress-button[data-style=top-line] .progress-inner{height:10px}.progress-button[data-style=lateral-lines]{overflow:hidden}.progress-button[data-style=lateral-lines] .progress-inner{width:100%;border-left:10px solid \"#555555\";border-bottom-color:\"#555555\";border-right:10px solid \"#555555\";border-top-color:\"#555555\";background:transparent}"]
},] }
];
/** @nocollapse */
ProgressButtonComponent.ctorParameters = function () { return [
{ type: ProgressButtonService }
]; };
ProgressButtonComponent.propDecorators = {
name: [{ type: i0.Input }],
value: [{ type: i0.Input }],
type: [{ type: i0.Input }],
autofocus: [{ type: i0.Input }],
disabled: [{ type: i0.Input }],
form: [{ type: i0.Input }],
action: [{ type: i0.Output }],
progress: [{ type: i0.Input }],
design: [{ type: i0.Input }]
};
var ProgressButtonModule = /** @class */ (function () {
function ProgressButtonModule() {
}
ProgressButtonModule.forRoot = function (config) {
return {
ngModule: ProgressButtonModule,
providers: [
{
provide: FOR_ROOT_CONFIG_TOKEN,
useValue: config
},
{
provide: ProgressButtonConfig,
useFactory: progressButtonConfigFactory,
deps: [FOR_ROOT_CONFIG_TOKEN]
}
]
};
};
return ProgressButtonModule;
}());
ProgressButtonModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [ProgressButtonComponent],
imports: [
common.CommonModule
],
exports: [ProgressButtonComponent]
},] }
];
/*
* Public API Surface of progress-button
*/
/**
* Generated bundle index. Do not edit.
*/
exports.FOR_ROOT_CONFIG_TOKEN = FOR_ROOT_CONFIG_TOKEN;
exports.ProgressButtonComponent = ProgressButtonComponent;
exports.ProgressButtonConfig = ProgressButtonConfig;
exports.ProgressButtonModule = ProgressButtonModule;
exports.ProgressButtonService = ProgressButtonService;
exports.mergeOptions = mergeOptions;
exports.progressButtonConfigFactory = progressButtonConfigFactory;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=progress-button.umd.js.map