lc-svg/lc-svg.metadata.json

lc-svg _{*by LakeCodes*} === SVG is a powerful markup language for creating interactive web graphics but the process of converting a beautiful graphic into a clickable floor plan, a map with hovered states, or another UI element, can be burdenso

{"__symbolic":"module","version":3,"metadata":{"LcSvgModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵd"}],"providers":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"lc-svg","template":"\n      <svg *ngIf=\"svg\" [attr.id]=\"svg.svg['@id']\" [attr.xmlns]=\"svg.svg['@xmlns']\" [attr.xmlns:xlink]=\"svg.svg['@xmlns:xlink']\" [attr.viewBox]=\"svg.svg['@viewBox']\"><!-- SVG -->\n          <svg:defs *ngIf=\"svg.svg.defs\"><!-- SVG Defs -->\n              <svg:style type=\"text/css\" *ngIf=\"svg.svg.defs.style\">{{svg.svg.defs.style}}</svg:style>\n              <svg:clipPath *ngIf=\"svg.svg.defs.clipPath\" [attr.id]=\"svg.svg.defs.clipPath['@id']\" [attr.g]=\"svg.svg.defs.clipPath\" lc-svg-g></svg:clipPath>\n          </svg:defs>\n          <title *ngIf=\"svg.svg.title\">{{svg.svg.title}}</title>\n          <ng-container *ngIf=\"!config || !config.layerscope\">\n              <svg:g *ngFor=\"let g of svg.svg.g; let i = index;\"\n                     [g]=\"g\"\n                     [config]=\"config\"\n                     [clickenable]=\"config && config.click ? config.click.indexOf(i) > -1 : false\"\n                     [mouseenable]=\"config && config.mouseover ? config.mouseover.indexOf(i) > -1 : false\"\n                     [cssenable]=\"config && config.classscope.length > -1 ? config.classscope.indexOf(i) > -1 : false\"\n                     [attr.id]=\"g['@id']\"\n                     [attr.class]=\"g['@class']\"\n                     [attr.style]=\"g['@style']\"\n                     [attr.transform]=\"g['@transform']\"\n                     (shapeClick)=\"onShapeClick($event)\"\n                     (shapeMouse)=\"onShapeMouse($event)\"\n                     lc-svg-g></svg:g><!-- SVG Shape Data -->\n          </ng-container>\n          <ng-container *ngIf=\"config && config.layerscope ? config.layerscope.length > 0 : false\">\n              <svg:g *ngFor=\"let i of config.layerscope\"\n                     [g]=\"svg.svg.g[i]\"\n                     [config]=\"config\"\n                     [clickenable]=\"config.click ? config.click.indexOf(i) > -1 : false\"\n                     [mouseenable]=\"config.mouseover ? config.mouseover.indexOf(i) > -1 : false\"\n                     [cssenable]=\"config.classscope.length > -1 ? config.classscope.indexOf(i) > -1 : false\"\n                     [attr.id]=\"svg.svg.g[i]['@id']\"\n                     [attr.class]=\"svg.svg.g[i]['@class']\"\n                     [attr.style]=\"svg.svg.g[i]['@style']\"\n                     [attr.transform]=\"svg.svg.g[i]['@transform']\"\n                     (shapeClick)=\"onShapeClick($event)\"\n                     (shapeMouse)=\"onShapeMouse($event)\"\n                     lc-svg-g></svg:g><!-- SVG Shape Data -->\n          </ng-container>\n      </svg>\n    ","providers":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{"url":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"svgclick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"mouse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"onShapeClick":[{"__symbolic":"method"}],"onShapeMouse":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/http","name":"Http"}]}],"getSvg":[{"__symbolic":"method"}],"xml2Json":[{"__symbolic":"method"}],"handleError":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe"},"arguments":[{"name":"returnKeys"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"g[lc-svg-g]","template":"\n    <ng-container *ngFor=\"let grp of (g?.length > 0 ? g : [g])\">\n      <ng-container *ngFor=\"let gkey of grp | returnKeys\">\n          <ng-container [ngSwitch]=\"gkey\">\n\n              <ng-container *ngSwitchCase=\"'circle'\"><!-- SVG Circle -->\n                  <svg:circle *ngFor=\"let c of (grp.circle?.length > 0 ? grp.circle : [grp.circle])\" [attr.id]=\"c['@id']\" [attr.data-name]=\"c['@data-name']\" [attr.class]=\"c['@class']\" [attr.cx]=\"c['@cx']\" [attr.cy]=\"c['@cy']\" [attr.r]=\"c['@r']\" [attr.transform]=\"c['@transform']\" [attr.style]=\"c['@style']\" />\n              </ng-container>\n\n              <ng-container *ngSwitchCase=\"'ellipse'\"><!-- SVG Ellipse -->\n                  <svg:ellipse *ngFor=\"let e of (grp.ellipse?.length > 0 ? grp.ellipse : [grp.ellipse])\" [attr.id]=\"e['@id']\" [attr.data-name]=\"e['@data-name']\" [attr.class]=\"e['@class']\" [attr.cx]=\"e['@cx']\" [attr.cy]=\"e['@cy']\" [attr.rx]=\"e['@rx']\" [attr.ry]=\"e['@ry']\" [attr.transform]=\"e['@transform']\" [attr.style]=\"e['@style']\" />\n              </ng-container>\n\n              <ng-container *ngSwitchCase=\"'line'\"><!-- SVG Line -->\n                  <svg:line *ngFor=\"let l of (grp.line?.length > 0 ? grp.line: [grp.line])\" [attr.id]=\"l['@id']\" [attr.class]=\"l['@class']\" [attr.x1]=\"l['@x1']\" [attr.x2]=\"l['@x2']\" [attr.y1]=\"l['@y1']\" [attr.y2]=\"l['@y2']\" [attr.stroke]=\"l['@stroke']\" [attr.stroke-width]=\"l['@stroke-width']\" [attr.transform]=\"l['@transform']\" [attr.style]=\"l['@style']\"></svg:line>\n              </ng-container>\n\n              <ng-container *ngSwitchCase=\"'path'\"><!-- SVG Path -->\n                  <svg:path *ngFor=\"let p of (grp.path?.length > 0 ? grp.path : [grp.path])\" [attr.id]=\"p['@id']\" [attr.data-name]=\"p['@data-name']\" [attr.class]=\"p['@class']\" [attr.d]=\"p['@d']\" [attr.stroke]=\"p['@stroke']\" [attr.stroke-width]=\"p['@stroke-width']\" [attr.fill]=\"p['@fill']\" [attr.style]=\"p['@style']\" />\n              </ng-container>\n\n              <ng-container *ngSwitchCase=\"'polygon'\"><!-- SVG Polygon -->\n                  <svg:polygon *ngFor=\"let p of (grp.polygon?.length > 0 ? grp.polygon: [grp.polygon])\" [attr.id]=\"p['@id']\" [attr.class]=\"p['@class']\" [attr.points]=\"p['@points']\" [attr.stroke]=\"p['@stroke']\" [attr.stroke-width]=\"p['@stroke-width']\" [attr.fill]=\"p['@fill']\" [attr.transform]=\"p['@transform']\" [attr.style]=\"p['@style']\"></svg:polygon>\n              </ng-container>\n\n              <ng-container *ngSwitchCase=\"'polyline'\"><!-- SVG Line -->\n                  <svg:polyline *ngFor=\"let p of (grp.polyline?.length > 0 ? grp.polyline: [grp.polyline])\"\n                          [attr.id]=\"p['@id']\" [attr.class]=\"p['@class']\"\n                          [attr.points]=\"p['@points']\"\n                          [attr.stroke]=\"p['@stroke']\"\n                          [attr.stroke-width]=\"p['@stroke-width']\"\n                          [attr.fill]=\"p['@fill']\"\n                          [attr.transform]=\"p['@transform']\"\n                          [attr.style]=\"p['@style']\"></svg:polyline>\n              </ng-container>\n\n              <ng-container *ngSwitchCase=\"'rect'\"><!-- SVG Rect -->\n                  <svg:rect *ngFor=\"let r of (grp.rect?.length > 0 ? grp.rect : [grp.rect])\"\n                          [attr.id]=\"r['@id']\"\n                          [attr.data-name]=\"r['@data-name']\"\n                          [attr.class]=\"r['@class']\" [attr.x]=\"r['@x']\"\n                          [attr.y]=\"r['@y']\"\n                          [attr.rx]=\"r['@rx']\"\n                          [attr.ry]=\"r['@ry']\"\n                          [attr.width]=\"r['@width']\"\n                          [attr.height]=\"r['@height']\"\n                          [attr.style]=\"r['@style']\">\n                  </svg:rect>\n              </ng-container>\n\n              <ng-container *ngSwitchCase=\"'text'\"><!-- SVG Text -->\n                  <svg:text *ngFor=\"let t of (grp.text?.length > 0 ? grp.text : [grp.text])\"\n                          [attr.id]=\"t['@id']\"\n                          [attr.class]=\"t['@class']\"\n                          [attr.data-name]=\"t['@data-name']\"\n                          [attr.x]=\"t['@x']\"\n                          [attr.y]=\"t['@y']\"\n                          [attr.dx]=\"t['@dx']\"\n                          [attr.dy]=\"t['@dy']\"\n                          [attr.text-anchor]=\"t['@text-anchor']\"\n                          [attr.transform]=\"t['@transform']\"\n                          [attr.style]=\"t['@style']\">{{t['#text'] ? t['#text'] : t['_']}}\n                      <ng-container *ngIf=\"t.tspan\"><!-- SVG Tspan -->\n                          <svg:tspan *ngFor=\"let sp of (t.tspan?.length > 0 ? t.tspan : [t.tspan])\"\n                              [attr.id]=\"sp['@id']\"\n                              [attr.class]=\"sp['@class']\"\n                              [attr.x]=\"sp['@x']\"\n                              [attr.y]=\"sp['@y']\"\n                              [attr.dx]=\"sp['@dx']\"\n                              [attr.dy]=\"sp['@dy']\"\n                              [attr.rotate]=\"sp['@rotate']\"\n                              [attr.style]=\"sp['@style']\"\n                              [attr.xml:space]=\"sp['@xml:space']\">{{sp['#text'] ? sp['#text'] : sp['_']}}</svg:tspan>\n                      </ng-container>\n                  </svg:text>\n              </ng-container>\n\n              <ng-container *ngSwitchCase=\"'g'\"><!-- SVG Group -->\n                  <svg:g *ngFor=\"let g of (grp.g?.length > 0 ? grp.g : [grp.g]); let i = index;\"\n                         (click)=\"clickenable ? click($event) : null\"\n                         (mouseenter)=\"mouseenable ? mouse($event) : null\"\n                         [attr.id]=\"g['@id']\"\n                         [attr.class]=\"(config && cssenable) ? (g['@class'] ? config.classes.push(g['@class']) : config.classes) : g['@class']\"\n                         [attr.data-v]=\"i\"\n                         [g]=\"g\"\n                         lc-svg-g></svg:g>\n              </ng-container>\n\n          </ng-container>\n      </ng-container>\n    </ng-container>\n  "}]}],"members":{"g":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clickenable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"mouseenable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cssenable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"shapeClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"shapeMouse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"click":[{"__symbolic":"method"}],"mouse":[{"__symbolic":"method"}]}}},"origins":{"LcSvgModule":"./src/app/modules/lcsvg/lcsvg.module","ɵa":"./src/app/modules/lcsvg/lcsvg.component","ɵb":"./src/app/modules/services/lc-svg.service","ɵc":"./src/app/modules/lcsvg/pipes/return-keys.pipe","ɵd":"./src/app/modules/lcsvg/svg-g.component"},"importAs":"lc-svg"}