icon-label-d3 0.0.2 → 0.3.0

package/bundles/icon-label-d3.umd.js

@@ -29,6 +29,7 @@
     var IconLabelD3Component = /** @class */ (function () {
         function IconLabelD3Component() {
             var _this = this;
+            this.debug = false;
             this.title = 'Etiquetas';
             setTimeout((/**
              * @return {?}
@@ -68,6 +69,9 @@
          */
         function () {
             var _this = this;
+            if (this.debug) {
+                console.log({ iconsElements: this.iconsElements });
+            }
             this.iconsElements.map((/**
              * @param {?} element
              * @return {?}
@@ -88,10 +92,17 @@
                  * @return {?}
                  */
                 function () { return document.createElementNS(d3.namespaces.svg, 'polygon'); }));
+                if (_this.debug) {
+                    console.log({ collection: _this.collection, identifier: identifier, dataElement: dataElement });
+                }
                 point.attr('width', dataElement.style.width)
                     .attr('heigth', dataElement.style.heigth)
                     .attr('points', dataElement.draw)
                     .style('fill', dataElement.fill);
+                if (_this.debug) {
+                    var style = dataElement.style, draw = dataElement.draw, fill = dataElement.fill, identifier_1 = dataElement.identifier;
+                    console.log({ style: style, draw: draw, fill: fill, identifier: identifier_1 });
+                }
             }));
         };
         IconLabelD3Component.decorators = [
@@ -104,6 +115,7 @@
         /** @nocollapse */
         IconLabelD3Component.ctorParameters = function () { return []; };
         IconLabelD3Component.propDecorators = {
+            debug: [{ type: core.Input }],
             title: [{ type: core.Input }],
             collection: [{ type: core.Input }],
             iconsElements: [{ type: core.ViewChildren, args: ['cmp',] }]
@@ -111,6 +123,8 @@
         return IconLabelD3Component;
     }());
     if (false) {
+        /** @type {?} */
+        IconLabelD3Component.prototype.debug;
         /** @type {?} */
         IconLabelD3Component.prototype.title;
         /** @type {?} */
@@ -138,6 +152,42 @@
         return IconLabelD3Module;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     */
+    function StructLabelItemInterface() { }
+    if (false) {
+        /** @type {?} */
+        StructLabelItemInterface.prototype.identifier;
+        /** @type {?} */
+        StructLabelItemInterface.prototype.name;
+        /** @type {?} */
+        StructLabelItemInterface.prototype.fill;
+        /** @type {?} */
+        StructLabelItemInterface.prototype.draw;
+        /** @type {?} */
+        StructLabelItemInterface.prototype.style;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /**
+     * @record
+     */
+    function StructStyleLibelItemInterface() { }
+    if (false) {
+        /** @type {?} */
+        StructStyleLibelItemInterface.prototype.width;
+        /** @type {?} */
+        StructStyleLibelItemInterface.prototype.heigth;
+    }
+
     exports.IconLabelD3Component = IconLabelD3Component;
     exports.IconLabelD3Module = IconLabelD3Module;
     exports.IconLabelD3Service = IconLabelD3Service;

package/bundles/icon-label-d3.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-label-d3.umd.js","sources":["ng://icon-label-d3/lib/icon-label-d3.service.ts","ng://icon-label-d3/lib/icon-label-d3.component.ts","ng://icon-label-d3/lib/icon-label-d3.module.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class IconLabelD3Service {\n\n  constructor() { }\n}\n","import {Component, ElementRef, Input, QueryList, ViewChildren} from '@angular/core';\nimport * as d3 from 'd3';\n\nimport {StructLabelItemInterface} from './interfaces/struct-label-item-interface';\n\n@Component({\n  selector: 'ngx-icon-label-d3',\n  template: `\n    <div class=\"row\">\n      <div class=\"col-xs-12\">\n        <div class=\"text-center\">\n          <label>{{title}}: </label>\n          <label\n            *ngFor=\"let item of collection; let indx = index;\">\n            <span *ngIf=\"indx!==0\">,</span>\n            <span style=\"width: 10px; height: 10px; position: absolute;\"\n                  #cmp\n                  title=\"icon_{{item.identifier}}\"></span>\n            <strong style=\"margin-left: 10px;\">\n              {{item.name}}\n            </strong>\n          </label>\n        </div>\n      </div>\n    </div>\n  `,\n  styleUrls: ['../../node_modules/bootstrap/dist/css/bootstrap.css']\n})\nexport class IconLabelD3Component {\n\n  constructor() {\n    setTimeout(() => {\n      this.applayIconCanvas();\n    }, 50);\n  }\n\n  @Input() title = 'Etiquetas';\n  @Input() collection: Array<StructLabelItemInterface>;\n  @ViewChildren('cmp') iconsElements: QueryList<ElementRef>;\n\n  private static makeSvg(element: ElementRef<any>) {\n    return d3.select(element.nativeElement)\n      .append('svg')\n      .attr('width', '100%')\n      .attr('height', '100%')\n      .append('g')\n      .attr('clip-path', 'url(#chart-content)')\n      .selectAll('svg')\n      .data([0])\n      .enter();\n  }\n\n  private applayIconCanvas() {\n    this.iconsElements.map((element) => {\n      const identifier = element.nativeElement.title.replace('icon_', '');\n      const svg = IconLabelD3Component.makeSvg(element);\n      const dataElement = this.collection.find(item => item.identifier === +identifier);\n      const point = svg.append(() => document.createElementNS(d3.namespaces.svg, 'polygon'));\n\n      point.attr('width', dataElement.style.width)\n        .attr('heigth', dataElement.style.heigth)\n        .attr('points', dataElement.draw)\n        .style('fill', dataElement.fill);\n    });\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { IconLabelD3Component } from './icon-label-d3.component';\nimport {CommonModule} from '@angular/common';\n\n\n\n@NgModule({\n  declarations: [IconLabelD3Component],\n  imports: [\n    CommonModule\n  ],\n  exports: [IconLabelD3Component]\n})\nexport class IconLabelD3Module { }\n"],"names":["Injectable","d3.select","d3.namespaces","Component","Input","ViewChildren","NgModule","CommonModule"],"mappings":";;;;;;;;;;AAAA;QAOE;SAAiB;;oBALlBA,eAAU,SAAC;wBACV,UAAU,EAAE,MAAM;qBACnB;;;;;iCAJD;KAEA;;;;;;ACFA;QA8BE;YAAA,iBAIC;YAEQ,UAAK,GAAG,WAAW,CAAC;YAL3B,UAAU;;;YAAC;gBACT,KAAI,CAAC,gBAAgB,EAAE,CAAC;aACzB,GAAE,EAAE,CAAC,CAAC;SACR;;;;;;QAMc,4BAAO;;;;;QAAtB,UAAuB,OAAwB;YAC7C,OAAOC,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC;iBACpC,MAAM,CAAC,KAAK,CAAC;iBACb,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;iBACrB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;iBACtB,MAAM,CAAC,GAAG,CAAC;iBACX,IAAI,CAAC,WAAW,EAAE,qBAAqB,CAAC;iBACxC,SAAS,CAAC,KAAK,CAAC;iBAChB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;iBACT,KAAK,EAAE,CAAC;SACZ;;;;;QAEO,+CAAgB;;;;QAAxB;YAAA,iBAYC;YAXC,IAAI,CAAC,aAAa,CAAC,GAAG;;;;YAAC,UAAC,OAAO;;oBACvB,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;;oBAC7D,GAAG,GAAG,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC;;oBAC3C,WAAW,GAAG,KAAI,CAAC,UAAU,CAAC,IAAI;;;;gBAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,UAAU,KAAK,CAAC,UAAU,GAAA,EAAC;;oBAC3E,KAAK,GAAG,GAAG,CAAC,MAAM;;;gBAAC,cAAM,OAAA,QAAQ,CAAC,eAAe,CAACC,aAAa,CAAC,GAAG,EAAE,SAAS,CAAC,GAAA,EAAC;gBAEtF,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;qBACzC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC;qBACxC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC;qBAChC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;aACpC,EAAC,CAAC;SACJ;;oBA3DFC,cAAS,SAAC;wBACT,QAAQ,EAAE,mBAAmB;wBAC7B,QAAQ,EAAE,slBAkBT;;qBAEF;;;;;4BASEC,UAAK;iCACLA,UAAK;oCACLC,iBAAY,SAAC,KAAK;;QA2BrB,2BAAC;KA5DD,IA4DC;;;QA7BC,qCAA6B;;QAC7B,0CAAqD;;QACrD,6CAA0D;;;;;;;ACtC5D;QAMA;SAOkC;;oBAPjCC,aAAQ,SAAC;wBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;wBACpC,OAAO,EAAE;4BACPC,mBAAY;yBACb;wBACD,OAAO,EAAE,CAAC,oBAAoB,CAAC;qBAChC;;QACgC,wBAAC;KAPlC;;;;;;;;;;;;;;"}
+{"version":3,"file":"icon-label-d3.umd.js","sources":["ng://icon-label-d3/lib/icon-label-d3.service.ts","ng://icon-label-d3/lib/icon-label-d3.component.ts","ng://icon-label-d3/lib/icon-label-d3.module.ts","ng://icon-label-d3/lib/interfaces/struct-label-item-interface.ts","ng://icon-label-d3/lib/interfaces/struct-style-libel-item-interface.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class IconLabelD3Service {\n\n  constructor() { }\n}\n","import {Component, ElementRef, Input, QueryList, ViewChildren} from '@angular/core';\nimport * as d3 from 'd3';\n\nimport {StructLabelItemInterface} from './interfaces/struct-label-item-interface';\n\n@Component({\n  selector: 'ngx-icon-label-d3',\n  template: `\n    <div class=\"row\">\n      <div class=\"col-xs-12\">\n        <div class=\"text-center\">\n          <label>{{title}}: </label>\n          <label\n            *ngFor=\"let item of collection; let indx = index;\">\n            <span *ngIf=\"indx!==0\">,</span>\n            <span style=\"width: 10px; height: 10px; position: absolute;\"\n                  #cmp\n                  title=\"icon_{{item.identifier}}\"></span>\n            <strong style=\"margin-left: 10px;\">\n              {{item.name}}\n            </strong>\n          </label>\n        </div>\n      </div>\n    </div>\n  `,\n  styleUrls: ['../../node_modules/bootstrap/dist/css/bootstrap.css']\n})\nexport class IconLabelD3Component {\n\n  constructor() {\n    setTimeout(() => {\n      this.applayIconCanvas();\n    }, 50);\n  }\n\n  @Input() debug = false;\n  @Input() title = 'Etiquetas';\n  @Input() collection: Array<StructLabelItemInterface>;\n  @ViewChildren('cmp') iconsElements: QueryList<ElementRef>;\n\n  private static makeSvg(element: ElementRef<any>) {\n    return d3.select(element.nativeElement)\n      .append('svg')\n      .attr('width', '100%')\n      .attr('height', '100%')\n      .append('g')\n      .attr('clip-path', 'url(#chart-content)')\n      .selectAll('svg')\n      .data([0])\n      .enter();\n  }\n\n  private applayIconCanvas() {\n    if (this.debug) {\n      console.log({iconsElements: this.iconsElements});\n    }\n    this.iconsElements.map((element) => {\n      const identifier = element.nativeElement.title.replace('icon_', '');\n      const svg = IconLabelD3Component.makeSvg(element);\n      const dataElement = this.collection.find(item => item.identifier === +identifier);\n      const point = svg.append(() => document.createElementNS(d3.namespaces.svg, 'polygon'));\n\n      if (this.debug) {\n        console.log({collection: this.collection, identifier, dataElement});\n      }\n\n      point.attr('width', dataElement.style.width)\n        .attr('heigth', dataElement.style.heigth)\n        .attr('points', dataElement.draw)\n        .style('fill', dataElement.fill);\n\n      if (this.debug) {\n        const {style, draw, fill, identifier} = dataElement;\n        console.log({style, draw, fill, identifier});\n      }\n    });\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { IconLabelD3Component } from './icon-label-d3.component';\nimport {CommonModule} from '@angular/common';\n\n\n\n@NgModule({\n  declarations: [IconLabelD3Component],\n  imports: [\n    CommonModule\n  ],\n  exports: [IconLabelD3Component]\n})\nexport class IconLabelD3Module { }\n","import {StructStyleLibelItemInterface} from './struct-style-libel-item-interface';\n\nexport interface StructLabelItemInterface {\n  identifier: number | string;\n  name: string;\n  fill: string;\n  draw: string;\n  style: StructStyleLibelItemInterface;\n}\n","export interface StructStyleLibelItemInterface {\n  width: string;\n  heigth: string;\n}\n"],"names":["Injectable","d3.select","d3.namespaces","Component","Input","ViewChildren","NgModule","CommonModule"],"mappings":";;;;;;;;;;AAAA;QAOE;SAAiB;;oBALlBA,eAAU,SAAC;wBACV,UAAU,EAAE,MAAM;qBACnB;;;;;iCAJD;KAEA;;;;;;ACFA;QA8BE;YAAA,iBAIC;YAEQ,UAAK,GAAG,KAAK,CAAC;YACd,UAAK,GAAG,WAAW,CAAC;YAN3B,UAAU;;;YAAC;gBACT,KAAI,CAAC,gBAAgB,EAAE,CAAC;aACzB,GAAE,EAAE,CAAC,CAAC;SACR;;;;;;QAOc,4BAAO;;;;;QAAtB,UAAuB,OAAwB;YAC7C,OAAOC,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC;iBACpC,MAAM,CAAC,KAAK,CAAC;iBACb,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;iBACrB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;iBACtB,MAAM,CAAC,GAAG,CAAC;iBACX,IAAI,CAAC,WAAW,EAAE,qBAAqB,CAAC;iBACxC,SAAS,CAAC,KAAK,CAAC;iBAChB,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;iBACT,KAAK,EAAE,CAAC;SACZ;;;;;QAEO,+CAAgB;;;;QAAxB;YAAA,iBAwBC;YAvBC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,OAAO,CAAC,GAAG,CAAC,EAAC,aAAa,EAAE,IAAI,CAAC,aAAa,EAAC,CAAC,CAAC;aAClD;YACD,IAAI,CAAC,aAAa,CAAC,GAAG;;;;YAAC,UAAC,OAAO;;oBACvB,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;;oBAC7D,GAAG,GAAG,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC;;oBAC3C,WAAW,GAAG,KAAI,CAAC,UAAU,CAAC,IAAI;;;;gBAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,UAAU,KAAK,CAAC,UAAU,GAAA,EAAC;;oBAC3E,KAAK,GAAG,GAAG,CAAC,MAAM;;;gBAAC,cAAM,OAAA,QAAQ,CAAC,eAAe,CAACC,aAAa,CAAC,GAAG,EAAE,SAAS,CAAC,GAAA,EAAC;gBAEtF,IAAI,KAAI,CAAC,KAAK,EAAE;oBACd,OAAO,CAAC,GAAG,CAAC,EAAC,UAAU,EAAE,KAAI,CAAC,UAAU,EAAE,UAAU,YAAA,EAAE,WAAW,aAAA,EAAC,CAAC,CAAC;iBACrE;gBAED,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;qBACzC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC;qBACxC,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC;qBAChC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;gBAEnC,IAAI,KAAI,CAAC,KAAK,EAAE;oBACP,IAAA,yBAAK,EAAE,uBAAI,EAAE,uBAAI,EAAE,qCAAU;oBACpC,OAAO,CAAC,GAAG,CAAC,EAAC,KAAK,OAAA,EAAE,IAAI,MAAA,EAAE,IAAI,MAAA,EAAE,UAAU,cAAA,EAAC,CAAC,CAAC;iBAC9C;aACF,EAAC,CAAC;SACJ;;oBAxEFC,cAAS,SAAC;wBACT,QAAQ,EAAE,mBAAmB;wBAC7B,QAAQ,EAAE,slBAkBT;;qBAEF;;;;;4BASEC,UAAK;4BACLA,UAAK;iCACLA,UAAK;oCACLC,iBAAY,SAAC,KAAK;;QAuCrB,2BAAC;KAzED,IAyEC;;;QA1CC,qCAAuB;;QACvB,qCAA6B;;QAC7B,0CAAqD;;QACrD,6CAA0D;;;;;;;ACvC5D;QAMA;SAOkC;;oBAPjCC,aAAQ,SAAC;wBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;wBACpC,OAAO,EAAE;4BACPC,mBAAY;yBACb;wBACD,OAAO,EAAE,CAAC,oBAAoB,CAAC;qBAChC;;QACgC,wBAAC;KAPlC;;;;;;;;;ICJA,uCAMC;;;QALC,8CAA4B;;QAC5B,wCAAa;;QACb,wCAAa;;QACb,wCAAa;;QACb,yCAAqC;;;;;;;;;;ICPvC,4CAGC;;;QAFC,8CAAc;;QACd,+CAAe;;;;;;;;;;;;;;;"}