ngx-skltn
Version:
Skeleton loader for Angular
1 lines • 9.14 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgxSkltnModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SkltnComponent"},{"__symbolic":"reference","name":"SkltnBoneDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":4}],"exports":[{"__symbolic":"reference","name":"SkltnComponent"},{"__symbolic":"reference","name":"SkltnBoneDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"defaults":[{}],"value":{"ngModule":{"__symbolic":"reference","name":"NgxSkltnModule"},"providers":[{"provide":{"__symbolic":"reference","name":"SKLTN_CONFIG_TOKEN"},"useValue":{"__symbolic":"reference","name":"config"}},{"provide":{"__symbolic":"reference","name":"SkltnService"},"useClass":{"__symbolic":"reference","name":"SkltnService"},"deps":[{"__symbolic":"reference","name":"SKLTN_CONFIG_TOKEN"}]}]}}}},"SKLTN_CONFIG_TOKEN":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":3,"character":38},"arguments":["SkltnConfig"]},"SkltnService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":24,"character":5},"arguments":[{"__symbolic":"reference","name":"SKLTN_CONFIG_TOKEN"}]}]],"parameters":[{"__symbolic":"reference","name":"SkltnConfig"}]}]},"statics":{"ɵprov":{}}},"SkltnComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"skltn-root","providers":[{"provide":{"__symbolic":"reference","name":"ɵa"},"useClass":{"__symbolic":"reference","name":"ɵa"}}],"template":"<div [innerHTML]=\"animationCss\"></div>\n\n<svg class=\"svg-root\" x=\"0px\" y=\"0px\" [attr.viewBox]=\"viewBox\" *ngIf=\"shapes?.length && showSkltn\">\n\n <!-- Gradient -->\n <linearGradient [attr.id]=\"gradientId\">\n <stop class=\"stop stop--1\" [attr.stop-color]=\"flareFill\" stop-opacity=\"0\" offset=\"0\"></stop>\n <stop class=\"stop stop--2\" [attr.stop-color]=\"flareFill\" stop-opacity=\"1\" offset=\"50%\"></stop>\n <stop class=\"stop stop--3\" [attr.stop-color]=\"flareFill\" stop-opacity=\"0\" offset=\"100%\"></stop>\n </linearGradient>\n\n <defs>\n <!-- Mask -->\n <mask [attr.id]=\"maskId\">\n <!-- Shapes -->\n <ng-container *ngFor=\"let shape of shapes\">\n <!-- Rect Type -->\n <rect *ngIf=\"shape.type === 'rect'\" [attr.x]=\"shape.x\" [attr.y]=\"shape.y\" [attr.rx]=\"shape.rx\"\n [attr.ry]=\"shape.ry\" [attr.width]=\"shape.width\" [attr.height]=\"shape.height\" fill=\"#FFFFFF\" />\n <!-- Circle Type -->\n <ellipse *ngIf=\"shape.type === 'circle'\" [attr.cx]=\"shape.cx\" [attr.cy]=\"shape.cy\" [attr.rx]=\"shape.rx\" [attr.ry]=\"shape.ry\" fill=\"#FFFFFF\"></ellipse>\n <!-- Path Type -->\n <ng-container *ngIf=\"shape.type === 'path'\">\n <g fill=\"#FFFFFF\" [attr.transform]=\"shape.transform\">\n <ng-container *ngTemplateOutlet=\"shape.template\"></ng-container>\n </g>\n </ng-container>\n </ng-container>\n </mask>\n </defs>\n\n <g [attr.mask]=\"'url(' + href + '#' + maskId + ')'\">\n <!-- Background Rectangle -->\n <rect class=\"bg-fill\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" [attr.fill]=\"bgFill\"></rect>\n\n <!-- Flare -->\n <rect class=\"skltn-flare\" [attr.x]=\"'-' + flareWidth\" y=\"0\" [attr.width]=\"flareWidth\" height=\"100%\" [attr.fill]=\"'url(' + href + '#' + gradientId + ')'\"></rect>\n </g>\n\n</svg>\n\n<ng-content></ng-content>\n","styles":[":host{display:block;position:relative}.svg-root{display:block;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1}"]}]}],"members":{"rectRadius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"bgFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"flareFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"flareWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"duration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"delay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"timing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"showSkltn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"checkInterval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"SkltnService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":78,"character":21},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":79,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":80,"character":16},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":81,"character":18},{"__symbolic":"reference","name":"ɵa"}]}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":97,"character":3},"arguments":["window:resize",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getSufixWithID":[{"__symbolic":"method"}],"calcShapes":[{"__symbolic":"method"}]}},"SkltnBoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[skltn-bone]"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"rectRadius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"pathWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"pathHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":12,"character":3},"arguments":["boneTemp",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":17,"character":20},{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SkltnConfig":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"add":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"emit":[{"__symbolic":"method"}],"getList":[{"__symbolic":"method"}]}}},"origins":{"NgxSkltnModule":"./lib/ngx-skltn.module","SKLTN_CONFIG_TOKEN":"./lib/services/skltn-config.service","SkltnService":"./lib/services/skltn.service","SkltnComponent":"./lib/skltn/skltn.component","SkltnBoneDirective":"./lib/directives/skltn-bone.directive","SkltnConfig":"./lib/interfaces/skltn-config","ɵa":"./lib/classes/bones-list.class"},"importAs":"ngx-skltn"}