@inspark/inspark-components 1.0.36 → 1.0.38

package/full/bundles/inspark-inspark-components.umd.js

@@ -3705,6 +3705,7 @@
             this.cdr = cdr;
             this.isOpen = true;
             this.icon = null;
+            this.manualArrow = true;
             this.toggle = new core.EventEmitter();
         }
         ContentToggleComponent.prototype.toggleOpen = function () {
@@ -3727,6 +3728,10 @@
             core.Input(),
             __metadata("design:type", String)
         ], ContentToggleComponent.prototype, "icon", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], ContentToggleComponent.prototype, "manualArrow", void 0);
         __decorate([
             core.Output(),
             __metadata("design:type", core.EventEmitter)
@@ -3734,7 +3739,7 @@
         ContentToggleComponent = __decorate([
             core.Component({
                 selector: 'in-content-toggle',
-                template: "<div class=\"block\" (click)=\"toggleOpen()\" tabIndex=\"1\">\n    <span [ngClass]=\"{arrow: true, close: !isOpen}\">\n        <in-svg [src]=\"'arrow-down.svg'\" width=\"48px\" height=\"48px\"></in-svg>\n    </span>\n  <span class=\"label\"><in-svg *ngIf=\"icon\" class=\"label-icon\" [src]=\"icon\"></in-svg> {{label}}</span>\n  <span class=\"counter\">\n    <ng-content select=\"[header]\"></ng-content>\n    </span>\n</div>\n<div class=\"container\" *ngIf=\"isOpen\">\n  <ng-content select=\"[body]\"></ng-content>\n</div>\n",
+                template: "<div class=\"block\" (click)=\"toggleOpen()\" tabIndex=\"1\">\n    <span [ngClass]=\"{arrow: true, close: !isOpen}\">\n        <in-svg *ngIf=\"manualArrow\" [src]=\"'arrow-down.svg'\" width=\"48px\" height=\"48px\"></in-svg>\n        <ng-content select=\"[arrow]\"></ng-content>\n    </span>\n  <span class=\"label\">\n    <in-svg *ngIf=\"icon\" class=\"label-icon\" [src]=\"icon\"></in-svg>\n    {{label}}\n  </span>\n  <span class=\"counter\">\n    <ng-content select=\"[header]\"></ng-content>\n    </span>\n</div>\n<div class=\"container\" *ngIf=\"isOpen\">\n  <ng-content select=\"[body]\"></ng-content>\n</div>\n",
                 styles: ["@charset \"UTF-8\";.block{font-size:12px;text-transform:uppercase;cursor:pointer;display:flex;white-space:nowrap}.block:hover{background:var(--colorBgLevel2)}.block>span{display:inline-block;margin-right:4px}.block .label{margin-right:8px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis}.block .counter{display:flex;align-items:center;padding-right:8px}.block .arrow{margin-right:0}.block .arrow.close{transform:rotate(-90deg)}.label-icon{margin-right:4px;width:16px;height:16px}"]
             }),
             __metadata("design:paramtypes", [core.ChangeDetectorRef])
@@ -4244,6 +4249,114 @@
         return AutoCompleteComponentModule;
     }());
 
+    var PieService = /** @class */ (function () {
+        function PieService() {
+            this.colorArray = ['-1', 0, 1, 2, 3, 4]; // Цвета и последовательность в которой они будут отображены
+            this.colors = {
+                1: '#31ac51',
+                2: '#EE9946',
+                3: '#F95C5D',
+                4: '#a20000',
+                0: '#7E8087',
+                '-1': '#85B3CB'
+            };
+        }
+        PieService.prototype.create = function (statuses, size) {
+            var _this = this;
+            var data = [];
+            var allCount = 0;
+            this.colorArray.forEach(function (color) {
+                allCount += statuses[color] || 0;
+            });
+            var cumulativePercent = 0;
+            this.colorArray.forEach(function (color) {
+                var count = statuses[color];
+                if (!count) {
+                    return;
+                }
+                var percent = count / allCount;
+                var _a = __read(_this.getCoordinatesForPercent(size, cumulativePercent), 2), startX = _a[0], startY = _a[1];
+                cumulativePercent += percent;
+                var _b = __read(_this.getCoordinatesForPercent(size, cumulativePercent), 2), endX = _b[0], endY = _b[1];
+                var largeArcFlag = percent > .5 ? 1 : 0;
+                var pathData = [
+                    "M " + startX + " " + startY,
+                    "A 20 20 0 " + largeArcFlag + " 1 " + endX + " " + endY,
+                    "L 0 0",
+                ].join(' ');
+                data.push({
+                    path: pathData,
+                    color: _this.colors[color + '']
+                });
+            });
+            return data;
+        };
+        PieService.prototype.getCoordinatesForPercent = function (size, percent) {
+            var x = size / 2 * Math.cos(2 * Math.PI * percent);
+            var y = size / 2 * Math.sin(2 * Math.PI * percent);
+            return [x, y];
+        };
+        PieService = __decorate([
+            core.Injectable()
+        ], PieService);
+        return PieService;
+    }());
+
+    var ObjectPieComponent = /** @class */ (function () {
+        function ObjectPieComponent(translate, pieService, cdr) {
+            this.translate = translate;
+            this.pieService = pieService;
+            this.cdr = cdr;
+            this.count = 30;
+            this.size = 40;
+            this.statuses = {
+                '-1': 20,
+                0: 4,
+                1: 3,
+                2: 4,
+                3: 5
+            };
+        }
+        ObjectPieComponent.prototype.ngOnInit = function () {
+            this.data = this.pieService.create(this.statuses, this.size);
+        };
+        ObjectPieComponent.prototype.ngOnDestroy = function () {
+        };
+        ObjectPieComponent.prototype.ngOnChanges = function (changes) {
+        };
+        ObjectPieComponent.ctorParameters = function () { return [
+            { type: core$1.TranslateService },
+            { type: PieService },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], ObjectPieComponent.prototype, "count", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], ObjectPieComponent.prototype, "size", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], ObjectPieComponent.prototype, "statuses", void 0);
+        ObjectPieComponent = __decorate([
+            core.Component({
+                selector: 'in-pie',
+                template: "<div class=\"pie-block\">\n    <svg viewBox=\"-20 -20 40 40\">\n      <defs>\n        <clipPath id=\"cut-off-bottom\">\n          <circle cx=\"0\" cy=\"0\" r=\"12\"></circle>\n        </clipPath>\n      </defs>\n      <mask id=\"re8-clip\">\n        <circle cx=\"0\" cy=\"0\" r=\"20\" fill=\"white\"></circle>\n        <circle cx=\"0\" cy=\"0\" r=\"14\" fill=\"black\"></circle>\n      </mask>\n        <path *ngFor=\"let path of data\" [attr.d]=\"path.path\" [attr.fill]=\"path.color\"  mask=\"url(#re8-clip)\"></path>\n        <text x=\"0\" y=\"4\" text-anchor=\"middle\" fill=\"currentColor\">{{count}}</text>\n    </svg>\n</div>\n\n\n",
+                encapsulation: core.ViewEncapsulation.Emulated,
+                providers: [],
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                styles: [".pie-block{width:40px;height:40px;color:var(--text-color)}.pie-block text{width:20px;height:20px;background:var(--colorBgLevel2);font-size:11px}.pie-block svg{width:40px;height:40px}"]
+            }),
+            __metadata("design:paramtypes", [core$1.TranslateService,
+                PieService,
+                core.ChangeDetectorRef])
+        ], ObjectPieComponent);
+        return ObjectPieComponent;
+    }());
+
     var InsparkComponentsModule = /** @class */ (function () {
         function InsparkComponentsModule() {
         }
@@ -4294,7 +4407,8 @@
                     RadiobuttonComponent,
                     ObjectTreeComponent,
                     ContentToggleComponent,
-                    InputGroupComponent
+                    InputGroupComponent,
+                    ObjectPieComponent,
                 ],
                 exports: [
                     ButtonComponent,
@@ -4329,6 +4443,7 @@
                     RadiobuttonComponent,
                     ObjectTreeComponent,
                     ContentToggleComponent,
+                    ObjectPieComponent,
                     InputGroupComponent,
                     AutoCompleteComponentModule
                 ],
@@ -4446,6 +4561,8 @@
     exports.ɵp = TableMenuOverlayComponent;
     exports.ɵq = TableClickOutsideDirective;
     exports.ɵr = InputGroupComponent;
+    exports.ɵs = ObjectPieComponent;
+    exports.ɵt = PieService;
 
     Object.defineProperty(exports, '__esModule', { value: true });