@inspark/inspark-components 1.0.36 → 1.0.38

package/full/fesm2015/inspark-inspark-components.js

@@ -3380,6 +3380,7 @@ let ContentToggleComponent = class ContentToggleComponent {
         this.cdr = cdr;
         this.isOpen = true;
         this.icon = null;
+        this.manualArrow = true;
         this.toggle = new EventEmitter();
     }
     toggleOpen() {
@@ -3403,6 +3404,10 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], ContentToggleComponent.prototype, "icon", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ContentToggleComponent.prototype, "manualArrow", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
@@ -3410,7 +3415,7 @@ __decorate([
 ContentToggleComponent = __decorate([
     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", [ChangeDetectorRef])
@@ -3908,6 +3913,111 @@ AutoCompleteComponentModule = __decorate([
     })
 ], AutoCompleteComponentModule);
 
+let PieService = class PieService {
+    constructor() {
+        this.colorArray = ['-1', 0, 1, 2, 3, 4]; // Цвета и последовательность в которой они будут отображены
+        this.colors = {
+            1: '#31ac51',
+            2: '#EE9946',
+            3: '#F95C5D',
+            4: '#a20000',
+            0: '#7E8087',
+            '-1': '#85B3CB'
+        };
+    }
+    create(statuses, size) {
+        const data = [];
+        let allCount = 0;
+        this.colorArray.forEach((color) => {
+            allCount += statuses[color] || 0;
+        });
+        let cumulativePercent = 0;
+        this.colorArray.forEach((color) => {
+            const count = statuses[color];
+            if (!count) {
+                return;
+            }
+            const percent = count / allCount;
+            const [startX, startY] = this.getCoordinatesForPercent(size, cumulativePercent);
+            cumulativePercent += percent;
+            const [endX, endY] = this.getCoordinatesForPercent(size, cumulativePercent);
+            const largeArcFlag = percent > .5 ? 1 : 0;
+            const 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;
+    }
+    getCoordinatesForPercent(size, percent) {
+        const x = size / 2 * Math.cos(2 * Math.PI * percent);
+        const y = size / 2 * Math.sin(2 * Math.PI * percent);
+        return [x, y];
+    }
+};
+PieService = __decorate([
+    Injectable()
+], PieService);
+
+let ObjectPieComponent = class ObjectPieComponent {
+    constructor(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
+        };
+    }
+    ngOnInit() {
+        this.data = this.pieService.create(this.statuses, this.size);
+    }
+    ngOnDestroy() {
+    }
+    ngOnChanges(changes) {
+    }
+};
+ObjectPieComponent.ctorParameters = () => [
+    { type: TranslateService },
+    { type: PieService },
+    { type: ChangeDetectorRef }
+];
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], ObjectPieComponent.prototype, "count", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], ObjectPieComponent.prototype, "size", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], ObjectPieComponent.prototype, "statuses", void 0);
+ObjectPieComponent = __decorate([
+    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: ViewEncapsulation.Emulated,
+        providers: [],
+        changeDetection: 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", [TranslateService,
+        PieService,
+        ChangeDetectorRef])
+], ObjectPieComponent);
+
 let InsparkComponentsModule = class InsparkComponentsModule {
 };
 InsparkComponentsModule = __decorate([
@@ -3957,7 +4067,8 @@ InsparkComponentsModule = __decorate([
             RadiobuttonComponent,
             ObjectTreeComponent,
             ContentToggleComponent,
-            InputGroupComponent
+            InputGroupComponent,
+            ObjectPieComponent,
         ],
         exports: [
             ButtonComponent,
@@ -3992,6 +4103,7 @@ InsparkComponentsModule = __decorate([
             RadiobuttonComponent,
             ObjectTreeComponent,
             ContentToggleComponent,
+            ObjectPieComponent,
             InputGroupComponent,
             AutoCompleteComponentModule
         ],
@@ -4008,5 +4120,5 @@ InsparkComponentsModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { AutoCompleteComponentModule, BreadcrumbComponent, ButtonComponent, CheckboxComponent, CommunicationService, ComponentContainerComponent, ContentToggleComponent, DropdownComponentModule, EmptyComponent, FileComponent, InlineMessageComponent, InputTextComponent, InsparkComponentsModule, InsparkDialogService, InsparkHeaderComponent, InsparkMessageService, InsparkStickyComponent, InsparkTemplate, LinkComponent, ModalInputTextComponent, ObjectTreeComponent, PanelComponent, PipesModule, PreloaderComponent, RadiobuttonComponent, SelectButtonComponent, SelectListComponent, StatusCircleComponent, SvgComponent, SwitcherComponent, TableComponentModule, TextareaComponent, ToolbarComponent, TooltipComponent, TreeTableComponentModule, DropdownItem as ɵa, DropdownComponent as ɵb, tableFactory as ɵc, TableComponent as ɵd, TreeTableComponent as ɵe, AutoCompleteComponent as ɵf, PropertyValuePipe as ɵg, ShortToFullWeekdayPipe as ɵh, NumToShortWeekdayPipe as ɵi, FormatNumToTime as ɵj, InDate as ɵk, SafeUrlPipe as ɵl, SortByPipe as ɵm, PrimengComponentsModule as ɵn, TableColumnsMultiselectComponent as ɵo, TableMenuOverlayComponent as ɵp, TableClickOutsideDirective as ɵq, InputGroupComponent as ɵr };
+export { AutoCompleteComponentModule, BreadcrumbComponent, ButtonComponent, CheckboxComponent, CommunicationService, ComponentContainerComponent, ContentToggleComponent, DropdownComponentModule, EmptyComponent, FileComponent, InlineMessageComponent, InputTextComponent, InsparkComponentsModule, InsparkDialogService, InsparkHeaderComponent, InsparkMessageService, InsparkStickyComponent, InsparkTemplate, LinkComponent, ModalInputTextComponent, ObjectTreeComponent, PanelComponent, PipesModule, PreloaderComponent, RadiobuttonComponent, SelectButtonComponent, SelectListComponent, StatusCircleComponent, SvgComponent, SwitcherComponent, TableComponentModule, TextareaComponent, ToolbarComponent, TooltipComponent, TreeTableComponentModule, DropdownItem as ɵa, DropdownComponent as ɵb, tableFactory as ɵc, TableComponent as ɵd, TreeTableComponent as ɵe, AutoCompleteComponent as ɵf, PropertyValuePipe as ɵg, ShortToFullWeekdayPipe as ɵh, NumToShortWeekdayPipe as ɵi, FormatNumToTime as ɵj, InDate as ɵk, SafeUrlPipe as ɵl, SortByPipe as ɵm, PrimengComponentsModule as ɵn, TableColumnsMultiselectComponent as ɵo, TableMenuOverlayComponent as ɵp, TableClickOutsideDirective as ɵq, InputGroupComponent as ɵr, ObjectPieComponent as ɵs, PieService as ɵt };
 //# sourceMappingURL=inspark-inspark-components.js.map