progress-button
Version:
A simple angular progress button.
1 lines • 19.5 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"ProgressButtonType":{"__symbolic":"interface"},"ProgressButtonDirection":{"__symbolic":"interface"},"ProgressButtonStatus":{"__symbolic":"interface"},"ProgressButtonAnimation":{"__symbolic":"interface"},"ProgressButtonForm":{"__symbolic":"interface"},"ProgressButtonDesign":{"__symbolic":"interface"},"ProgressButtonData":{"__symbolic":"interface"},"ProgressButtonConfig":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":130,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{},"statics":{"ɵprov":{}}},"ProgressButtonDataStatus":{"__symbolic":"interface"},"ProgressButtonStyles":{"__symbolic":"interface"},"ProgressButtonModuleConfig":{"__symbolic":"interface"},"mergeOptions":{"__symbolic":"function"},"FOR_ROOT_CONFIG_TOKEN":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":208,"character":39},"arguments":["forRoot() ProgressButtonService configuration."]},"progressButtonConfigFactory":{"__symbolic":"function"},"ProgressButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"ydd-progress-button","providers":[{"__symbolic":"reference","name":"ProgressButtonService"}],"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","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}"]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"action":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ProgressButtonService"}]}],"progress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":3}}]}],"design":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":3}}]}]}},"ProgressButtonService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ProgressButtonConfig"}]}]},"statics":{"ɵprov":{}}},"ProgressButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ProgressButtonComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4}],"exports":[{"__symbolic":"reference","name":"ProgressButtonComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"ProgressButtonModule"},"providers":[{"provide":{"__symbolic":"reference","name":"FOR_ROOT_CONFIG_TOKEN"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","name":"ProgressButtonConfig"},"useFactory":{"__symbolic":"reference","name":"progressButtonConfigFactory"},"deps":[{"__symbolic":"reference","name":"FOR_ROOT_CONFIG_TOKEN"}]}]}}}}},"origins":{"ProgressButtonType":"./lib/progress-button.types","ProgressButtonDirection":"./lib/progress-button.types","ProgressButtonStatus":"./lib/progress-button.types","ProgressButtonAnimation":"./lib/progress-button.types","ProgressButtonForm":"./lib/progress-button.types","ProgressButtonDesign":"./lib/progress-button.types","ProgressButtonData":"./lib/progress-button.types","ProgressButtonConfig":"./lib/progress-button.types","ProgressButtonDataStatus":"./lib/progress-button.types","ProgressButtonStyles":"./lib/progress-button.types","ProgressButtonModuleConfig":"./lib/progress-button.types","mergeOptions":"./lib/progress-button.types","FOR_ROOT_CONFIG_TOKEN":"./lib/progress-button.types","progressButtonConfigFactory":"./lib/progress-button.types","ProgressButtonComponent":"./lib/progress-button.component","ProgressButtonService":"./lib/progress-button.service","ProgressButtonModule":"./lib/progress-button.module"},"importAs":"progress-button"}