@pepperi-addons/ngx-composite-lib 0.0.10-beta.2 → 0.0.10-beta.21

package/fesm2015/pepperi-addons-ngx-composite-lib-color-settings.js

@@ -11,126 +11,127 @@ import * as i4 from '@pepperi-addons/ngx-lib/slider';
 import { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';
 import * as i5 from '@ngx-translate/core';
 
-class PepColorSettings {
-    constructor() {
-        this.use = false;
-        this.value = 'hsl(0, 0%, 57%)';
-        this.opacity = 50;
-        // useGradientOverlay?: boolean = true;
-    }
+class PepColorSettings {
+    constructor() {
+        this.use = false;
+        this.value = 'hsl(0, 0%, 57%)';
+        this.opacity = 50;
+        // useGradientOverlay?: boolean = true;
+    }
 }
 
-class ColorSettingsComponent {
-    constructor(pepColorService) {
-        this.pepColorService = pepColorService;
-        this.title = '';
-        this._color = new PepColorSettings();
-        this.colorChange = new EventEmitter();
-    }
-    set color(value) {
-        if (!value) {
-            this._color = new PepColorSettings();
-        }
-        else {
-            this._color = value;
-        }
-    }
-    get color() {
-        return this._color;
-    }
-    ngOnInit() {
-    }
-    getRGBAcolor(colorObj, opac = null) {
-        let rgba = 'rgba(255,255,255,0)';
-        if (colorObj) {
-            let color = colorObj.value;
-            let opacity = opac != null ? opac : colorObj.opacity;
-            opacity = opacity > 0 ? opacity / 100 : 0;
-            let hsl = this.pepColorService.hslString2hsl(color);
-            let rgb = this.pepColorService.hsl2rgb(hsl);
-            rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
-        }
-        return rgba;
-    }
-    raiseColorChange() {
-        this.colorChange.emit(this.color);
-    }
-    getSliderBackground() {
-        let alignTo = 'right';
-        let colorObj = new PepColorSettings();
-        colorObj.value = this.color.value;
-        colorObj.opacity = 100;
-        let gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);
-        return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';
-    }
-    onUseChanged(value) {
-        this.color.use = value;
-        this.raiseColorChange();
-    }
-    onColorChanged(value) {
-        this.color.value = value;
-        this.raiseColorChange();
-    }
-    onSliderValueChanged(value) {
-        this.color.opacity = value;
-        this.raiseColorChange();
-    }
-}
-ColorSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColorSettingsComponent, deps: [{ token: i1.PepColorService }], target: i0.ɵɵFactoryTarget.Component });
-ColorSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColorSettingsComponent, selector: "pep-color-settings", inputs: { title: "title", color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"title\" [renderTitle]=\"false\" [value]=\"color.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-color [value]=\"color.value\" [label]=\"title + ' ' + ('COLOR_SETTINGS.COLOR' | translate)\" [disabled]=\"!color.use\" (valueChange)=\"onColorChanged($event)\">\n</pep-color>\n<pep-slider [label]=\"title + ' ' + ('COLOR_SETTINGS.OPACITY' | translate)\" [hint]=\"color.opacity.toString() || ''\" [minValue]=\"0\" [maxValue]=\"100\" [disabled]=\"!color.use\" [value]=\"color.opacity\" \n    [background]=\"getSliderBackground()\" (inputChange)=\"onSliderValueChanged($event)\">\n</pep-slider>\n", styles: [":host{width:100%}\n"], components: [{ type: i2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "form", "isActive", "showTitle", "renderTitle", "layoutType", "type", "additionalValue", "visible"], outputs: ["valueChange"] }, { type: i3.PepColorComponent, selector: "pep-color", inputs: ["key", "value", "label", "disabled", "xAlignment", "rowSpan", "type", "showTitle", "showAAComplient", "layoutType"], outputs: ["valueChange"] }, { type: i4.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "step", "minValue", "maxValue", "background", "value"], outputs: ["valueChange", "inputChange"] }], pipes: { "translate": i5.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColorSettingsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'pep-color-settings',
-                    templateUrl: './color-settings.component.html',
-                    styleUrls: ['./color-settings.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i1.PepColorService }]; }, propDecorators: { title: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], colorChange: [{
-                type: Output
+class ColorSettingsComponent {
+    constructor(pepColorService) {
+        this.pepColorService = pepColorService;
+        this.title = '';
+        this._color = new PepColorSettings();
+        this.colorChange = new EventEmitter();
+    }
+    set color(value) {
+        if (!value) {
+            this._color = new PepColorSettings();
+        }
+        else {
+            this._color = value;
+        }
+    }
+    get color() {
+        return this._color;
+    }
+    ngOnInit() {
+        //
+    }
+    getRGBAcolor(colorObj, opac = null) {
+        let rgba = 'rgba(255,255,255,0)';
+        if (colorObj) {
+            const color = colorObj.value;
+            let opacity = opac != null ? opac : colorObj.opacity;
+            opacity = opacity > 0 ? opacity / 100 : 0;
+            const hsl = this.pepColorService.hslString2hsl(color);
+            const rgb = this.pepColorService.hsl2rgb(hsl);
+            rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';
+        }
+        return rgba;
+    }
+    raiseColorChange() {
+        this.colorChange.emit(this.color);
+    }
+    getSliderBackground() {
+        const alignTo = 'right';
+        const colorObj = new PepColorSettings();
+        colorObj.value = this.color.value;
+        colorObj.opacity = 100;
+        const gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);
+        return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';
+    }
+    onUseChanged(value) {
+        this.color.use = value;
+        this.raiseColorChange();
+    }
+    onColorChanged(value) {
+        this.color.value = value;
+        this.raiseColorChange();
+    }
+    onSliderValueChanged(value) {
+        this.color.opacity = value;
+        this.raiseColorChange();
+    }
+}
+ColorSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColorSettingsComponent, deps: [{ token: i1.PepColorService }], target: i0.ɵɵFactoryTarget.Component });
+ColorSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ColorSettingsComponent, selector: "pep-color-settings", inputs: { title: "title", color: "color" }, outputs: { colorChange: "colorChange" }, ngImport: i0, template: "<pep-checkbox class=\"checkbox-as-title\" [label]=\"title\" [renderTitle]=\"false\" [value]=\"color.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\r\n<pep-color [value]=\"color.value\" [label]=\"title + ' ' + ('COLOR_SETTINGS.COLOR' | translate)\" [disabled]=\"!color.use\" (valueChange)=\"onColorChanged($event)\">\r\n</pep-color>\r\n<pep-slider [label]=\"title + ' ' + ('COLOR_SETTINGS.OPACITY' | translate)\" [hint]=\"color.opacity.toString() || ''\" [minValue]=\"0\" [maxValue]=\"100\" [disabled]=\"!color.use\" [value]=\"color.opacity\" \r\n    [background]=\"getSliderBackground()\" (inputChange)=\"onSliderValueChanged($event)\">\r\n</pep-slider>\r\n", styles: [":host{width:100%}\n"], components: [{ type: i2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "form", "isActive", "showTitle", "renderTitle", "layoutType", "type", "additionalValue", "visible"], outputs: ["valueChange"] }, { type: i3.PepColorComponent, selector: "pep-color", inputs: ["key", "value", "label", "disabled", "xAlignment", "rowSpan", "type", "showTitle", "renderTitle", "showAAComplient", "layoutType"], outputs: ["valueChange"] }, { type: i4.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "step", "minValue", "maxValue", "background", "value"], outputs: ["valueChange", "inputChange"] }], pipes: { "translate": i5.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ColorSettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pep-color-settings',
+                    templateUrl: './color-settings.component.html',
+                    styleUrls: ['./color-settings.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1.PepColorService }]; }, propDecorators: { title: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
             }] } });
 
-class PepColorSettingsModule {
-}
-PepColorSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepColorSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, declarations: [ColorSettingsComponent], imports: [CommonModule,
-        PepNgxLibModule,
-        PepCheckboxModule,
-        PepColorModule,
-        PepSliderModule], exports: [ColorSettingsComponent] });
-PepColorSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, imports: [[
-            CommonModule,
-            PepNgxLibModule,
-            PepCheckboxModule,
-            PepColorModule,
-            PepSliderModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ColorSettingsComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        PepNgxLibModule,
-                        PepCheckboxModule,
-                        PepColorModule,
-                        PepSliderModule
-                    ],
-                    exports: [ColorSettingsComponent],
-                }]
+class PepColorSettingsModule {
+}
+PepColorSettingsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepColorSettingsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, declarations: [ColorSettingsComponent], imports: [CommonModule,
+        PepNgxLibModule,
+        PepCheckboxModule,
+        PepColorModule,
+        PepSliderModule], exports: [ColorSettingsComponent] });
+PepColorSettingsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, imports: [[
+            CommonModule,
+            PepNgxLibModule,
+            PepCheckboxModule,
+            PepColorModule,
+            PepSliderModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepColorSettingsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ColorSettingsComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PepNgxLibModule,
+                        PepCheckboxModule,
+                        PepColorModule,
+                        PepSliderModule
+                    ],
+                    exports: [ColorSettingsComponent],
+                }]
         }] });
 
-/*
- * Public API Surface of ngx-composite-lib/color-settings
+/*
+ * Public API Surface of ngx-composite-lib/color-settings
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ColorSettingsComponent, PepColorSettings, PepColorSettingsModule };

package/fesm2015/pepperi-addons-ngx-composite-lib-color-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-composite-lib-color-settings.js","sources":["../../../projects/ngx-composite-lib/color-settings/color-settings.model.ts","../../../projects/ngx-composite-lib/color-settings/color-settings.component.ts","../../../projects/ngx-composite-lib/color-settings/color-settings.component.html","../../../projects/ngx-composite-lib/color-settings/color-settings.module.ts","../../../projects/ngx-composite-lib/color-settings/public-api.ts","../../../projects/ngx-composite-lib/color-settings/pepperi-addons-ngx-composite-lib-color-settings.ts"],"sourcesContent":["export class PepColorSettings {\r\n    use: boolean = false;\r\n    value: string = 'hsl(0, 0%, 57%)';\r\n    opacity: number = 50;\r\n    // useGradientOverlay?: boolean = true;\r\n}","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { PepColorService } from '@pepperi-addons/ngx-lib';\nimport { PepColorSettings } from './color-settings.model';\n\n@Component({\n    selector: 'pep-color-settings',\n    templateUrl: './color-settings.component.html',\n    styleUrls: ['./color-settings.component.scss']\n})\nexport class ColorSettingsComponent implements OnInit {\n\n    @Input() title: string = '';\n\n    private _color: PepColorSettings = new PepColorSettings();\n    @Input()\n    set color(value: PepColorSettings) {\n        if (!value) {\n            this._color = new PepColorSettings();\n        } else {\n            this._color = value;\n        }\n    }\n    get color(): PepColorSettings {\n        return this._color;\n    }\n\n    @Output()\n    colorChange: EventEmitter<PepColorSettings> = new EventEmitter<PepColorSettings>();\n    \n    constructor(private pepColorService: PepColorService) { }\n\n    ngOnInit(): void {\n    }\n\n    private getRGBAcolor(colorObj: PepColorSettings, opac: number | null = null) {\n        let rgba = 'rgba(255,255,255,0)';\n\n        if (colorObj) {\n            let color = colorObj.value;\n            let opacity = opac != null ? opac : colorObj.opacity;\n\n            opacity = opacity > 0 ? opacity / 100 : 0;\n\n            let hsl = this.pepColorService.hslString2hsl(color);\n            let rgb = this.pepColorService.hsl2rgb(hsl);\n            rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';\n        }\n\n        return rgba;\n    }\n\n    private raiseColorChange() {\n        this.colorChange.emit(this.color);\n    }\n\n    getSliderBackground() {\n        let alignTo = 'right';\n    \n        let colorObj = new PepColorSettings();\n    \n        colorObj.value = this.color.value;\n        colorObj.opacity = 100;\n    \n        let gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);\n    \n        return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';\n    }\n\n    onUseChanged(value: boolean) {\n        this.color.use = value;\n        this.raiseColorChange();\n    }\n\n    onColorChanged(value: string) {\n        this.color.value = value;\n        this.raiseColorChange();\n    }\n\n    onSliderValueChanged(value: number) {\n        this.color.opacity = value;\n        this.raiseColorChange();\n    }\n}\n","<pep-checkbox class=\"checkbox-as-title\" [label]=\"title\" [renderTitle]=\"false\" [value]=\"color.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\n<pep-color [value]=\"color.value\" [label]=\"title + ' ' + ('COLOR_SETTINGS.COLOR' | translate)\" [disabled]=\"!color.use\" (valueChange)=\"onColorChanged($event)\">\n</pep-color>\n<pep-slider [label]=\"title + ' ' + ('COLOR_SETTINGS.OPACITY' | translate)\" [hint]=\"color.opacity.toString() || ''\" [minValue]=\"0\" [maxValue]=\"100\" [disabled]=\"!color.use\" [value]=\"color.opacity\" \n    [background]=\"getSliderBackground()\" (inputChange)=\"onSliderValueChanged($event)\">\n</pep-slider>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepColorModule } from '@pepperi-addons/ngx-lib/color';\nimport { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';\nimport { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';\n\nimport { ColorSettingsComponent } from './color-settings.component';\n\n@NgModule({\n    declarations: [\n        ColorSettingsComponent\n    ],\n    imports: [\n        CommonModule,\n        PepNgxLibModule,\n        PepCheckboxModule,\n        PepColorModule,\n        PepSliderModule\n    ],\n    exports: [ColorSettingsComponent],\n})\nexport class PepColorSettingsModule { }\n","/*\n * Public API Surface of ngx-composite-lib/color-settings\n */\nexport * from './color-settings.module';\nexport * from './color-settings.component';\nexport * from './color-settings.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-composite-lib-color-settings.js","sources":["../../../projects/ngx-composite-lib/color-settings/color-settings.model.ts","../../../projects/ngx-composite-lib/color-settings/color-settings.component.ts","../../../projects/ngx-composite-lib/color-settings/color-settings.component.html","../../../projects/ngx-composite-lib/color-settings/color-settings.module.ts","../../../projects/ngx-composite-lib/color-settings/public-api.ts","../../../projects/ngx-composite-lib/color-settings/pepperi-addons-ngx-composite-lib-color-settings.ts"],"sourcesContent":["export class PepColorSettings {\r\n    use = false;\r\n    value = 'hsl(0, 0%, 57%)';\r\n    opacity = 50;\r\n    // useGradientOverlay?: boolean = true;\r\n}","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\nimport { PepColorService } from '@pepperi-addons/ngx-lib';\r\nimport { PepColorSettings } from './color-settings.model';\r\n\r\n@Component({\r\n    selector: 'pep-color-settings',\r\n    templateUrl: './color-settings.component.html',\r\n    styleUrls: ['./color-settings.component.scss']\r\n})\r\nexport class ColorSettingsComponent implements OnInit {\r\n\r\n    @Input() title = '';\r\n\r\n    private _color: PepColorSettings = new PepColorSettings();\r\n    @Input()\r\n    set color(value: PepColorSettings) {\r\n        if (!value) {\r\n            this._color = new PepColorSettings();\r\n        } else {\r\n            this._color = value;\r\n        }\r\n    }\r\n    get color(): PepColorSettings {\r\n        return this._color;\r\n    }\r\n\r\n    @Output()\r\n    colorChange: EventEmitter<PepColorSettings> = new EventEmitter<PepColorSettings>();\r\n    \r\n    constructor(private pepColorService: PepColorService) { }\r\n\r\n    ngOnInit() {\r\n        //\r\n    }\r\n\r\n    private getRGBAcolor(colorObj: PepColorSettings, opac: number | null = null) {\r\n        let rgba = 'rgba(255,255,255,0)';\r\n\r\n        if (colorObj) {\r\n            const color = colorObj.value;\r\n            let opacity = opac != null ? opac : colorObj.opacity;\r\n\r\n            opacity = opacity > 0 ? opacity / 100 : 0;\r\n\r\n            const hsl = this.pepColorService.hslString2hsl(color);\r\n            const rgb = this.pepColorService.hsl2rgb(hsl);\r\n            rgba = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + opacity + ')';\r\n        }\r\n\r\n        return rgba;\r\n    }\r\n\r\n    private raiseColorChange() {\r\n        this.colorChange.emit(this.color);\r\n    }\r\n\r\n    getSliderBackground() {\r\n        const alignTo = 'right';\r\n    \r\n        const colorObj = new PepColorSettings();\r\n    \r\n        colorObj.value = this.color.value;\r\n        colorObj.opacity = 100;\r\n    \r\n        const gradStr = this.getRGBAcolor(colorObj, 0) + ' , ' + this.getRGBAcolor(colorObj);\r\n    \r\n        return 'linear-gradient(to ' + alignTo + ', ' + gradStr + ')';\r\n    }\r\n\r\n    onUseChanged(value: boolean) {\r\n        this.color.use = value;\r\n        this.raiseColorChange();\r\n    }\r\n\r\n    onColorChanged(value: string) {\r\n        this.color.value = value;\r\n        this.raiseColorChange();\r\n    }\r\n\r\n    onSliderValueChanged(value: number) {\r\n        this.color.opacity = value;\r\n        this.raiseColorChange();\r\n    }\r\n}\r\n","<pep-checkbox class=\"checkbox-as-title\" [label]=\"title\" [renderTitle]=\"false\" [value]=\"color.use\" (valueChange)=\"onUseChanged($event)\"></pep-checkbox>\r\n<pep-color [value]=\"color.value\" [label]=\"title + ' ' + ('COLOR_SETTINGS.COLOR' | translate)\" [disabled]=\"!color.use\" (valueChange)=\"onColorChanged($event)\">\r\n</pep-color>\r\n<pep-slider [label]=\"title + ' ' + ('COLOR_SETTINGS.OPACITY' | translate)\" [hint]=\"color.opacity.toString() || ''\" [minValue]=\"0\" [maxValue]=\"100\" [disabled]=\"!color.use\" [value]=\"color.opacity\" \r\n    [background]=\"getSliderBackground()\" (inputChange)=\"onSliderValueChanged($event)\">\r\n</pep-slider>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\nimport { PepColorModule } from '@pepperi-addons/ngx-lib/color';\r\nimport { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';\r\nimport { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';\r\n\r\nimport { ColorSettingsComponent } from './color-settings.component';\r\n\r\n@NgModule({\r\n    declarations: [\r\n        ColorSettingsComponent\r\n    ],\r\n    imports: [\r\n        CommonModule,\r\n        PepNgxLibModule,\r\n        PepCheckboxModule,\r\n        PepColorModule,\r\n        PepSliderModule\r\n    ],\r\n    exports: [ColorSettingsComponent],\r\n})\r\nexport class PepColorSettingsModule { }\r\n","/*\r\n * Public API Surface of ngx-composite-lib/color-settings\r\n */\r\nexport * from './color-settings.module';\r\nexport * from './color-settings.component';\r\nexport * from './color-settings.model';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/pepperi-addons-ngx-composite-lib-draggable-item.js

@@ -7,78 +7,80 @@ import * as i1 from '@pepperi-addons/ngx-lib/button';
 import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
-class DraggableItemComponent {
-    // private _isDraggable = false;
-    // @Input()
-    // set isDraggable(value: boolean) {
-    //     this._isDraggable = value;
-    //     this._cursor = value ? 'move' : 'inherit'
-    // }
-    // get isDraggable(): boolean {
-    //     return this._isDraggable;
-    // }
-    constructor() {
-        this._cursor = 'move';
-        this.title = '';
-        this.disabled = false;
-    }
-    ngOnInit() {
-    }
-}
-DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", disabled: "disabled" }, host: { properties: { "style.cursor": "this._cursor" } }, ngImport: i0, template: "<div class=\"draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>", styles: [":host{display:block}.draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.title-container .title{display:block}.actions{display:inline-flex;grid-gap:var(--pep-spacing-xs, .25rem);gap:var(--pep-spacing-xs, .25rem)}\n"], components: [{ type: i1.PepButtonComponent, selector: "pep-button", inputs: ["styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconPosition", "visible", "key", "value", "iconName"], outputs: ["buttonClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DraggableItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'pep-draggable-item',
-                    templateUrl: './draggable-item.component.html',
-                    styleUrls: ['./draggable-item.component.scss']
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _cursor: [{
-                type: HostBinding,
-                args: ['style.cursor']
-            }], title: [{
-                type: Input
-            }], disabled: [{
-                type: Input
+class DraggableItemComponent {
+    // private _isDraggable = false;
+    // @Input()
+    // set isDraggable(value: boolean) {
+    //     this._isDraggable = value;
+    //     this._cursor = value ? 'move' : 'inherit'
+    // }
+    // get isDraggable(): boolean {
+    //     return this._isDraggable;
+    // }
+    constructor() {
+        this._cursor = 'move';
+        this.title = '';
+        this.disabled = false;
+        //
+    }
+    ngOnInit() {
+        //
+    }
+}
+DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", disabled: "disabled" }, host: { properties: { "style.cursor": "this._cursor" } }, ngImport: i0, template: "<div class=\"draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\r\n    <div class=\"\">\r\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\r\n    </div>\r\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\r\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-content select=\"[pep-actions]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block;cursor:grab}.draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.draggable-item-container .title-container .title{display:block}.draggable-item-container .actions{display:inline-flex;grid-gap:var(--pep-spacing-xs, .25rem);gap:var(--pep-spacing-xs, .25rem)}\n"], components: [{ type: i1.PepButtonComponent, selector: "pep-button", inputs: ["styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconPosition", "visible", "key", "value", "iconName"], outputs: ["buttonClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DraggableItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pep-draggable-item',
+                    templateUrl: './draggable-item.component.html',
+                    styleUrls: ['./draggable-item.component.scss']
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _cursor: [{
+                type: HostBinding,
+                args: ['style.cursor']
+            }], title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
-class DraggableItemModule {
-}
-DraggableItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DraggableItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DraggableItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DraggableItemModule, declarations: [DraggableItemComponent], imports: [CommonModule,
-        PepNgxLibModule,
-        PepButtonModule,
-        DragDropModule], exports: [DraggableItemComponent] });
-DraggableItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DraggableItemModule, imports: [[
-            CommonModule,
-            PepNgxLibModule,
-            PepButtonModule,
-            DragDropModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: DraggableItemModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DraggableItemComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        PepNgxLibModule,
-                        PepButtonModule,
-                        DragDropModule
-                    ],
-                    exports: [DraggableItemComponent],
-                }]
+class PepDraggableItemModule {
+}
+PepDraggableItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepDraggableItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepDraggableItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepDraggableItemModule, declarations: [DraggableItemComponent], imports: [CommonModule,
+        PepNgxLibModule,
+        PepButtonModule,
+        DragDropModule], exports: [DraggableItemComponent] });
+PepDraggableItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepDraggableItemModule, imports: [[
+            CommonModule,
+            PepNgxLibModule,
+            PepButtonModule,
+            DragDropModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepDraggableItemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DraggableItemComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PepNgxLibModule,
+                        PepButtonModule,
+                        DragDropModule
+                    ],
+                    exports: [DraggableItemComponent],
+                }]
         }] });
 
-/*
- * Public API Surface of ngx-composite-lib/draggable-item
+/*
+ * Public API Surface of ngx-composite-lib/draggable-item
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { DraggableItemComponent, DraggableItemModule };
+export { DraggableItemComponent, PepDraggableItemModule };
 //# sourceMappingURL=pepperi-addons-ngx-composite-lib-draggable-item.js.map

package/fesm2015/pepperi-addons-ngx-composite-lib-draggable-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-composite-lib-draggable-item.js","sources":["../../../projects/ngx-composite-lib/draggable-item/draggable-item.component.ts","../../../projects/ngx-composite-lib/draggable-item/draggable-item.component.html","../../../projects/ngx-composite-lib/draggable-item/draggable-item.module.ts","../../../projects/ngx-composite-lib/draggable-item/public-api.ts","../../../projects/ngx-composite-lib/draggable-item/pepperi-addons-ngx-composite-lib-draggable-item.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n    selector: 'pep-draggable-item',\n    templateUrl: './draggable-item.component.html',\n    styleUrls: ['./draggable-item.component.scss']\n})\nexport class DraggableItemComponent implements OnInit {\n\n    @HostBinding('style.cursor') _cursor = 'move';\n\n    @Input() title = '';\n    \n    @Input() disabled = false;\n\n    // private _isDraggable = false;\n    // @Input()\n    // set isDraggable(value: boolean) {\n    //     this._isDraggable = value;\n\n    //     this._cursor = value ? 'move' : 'inherit'\n    // }\n    // get isDraggable(): boolean {\n    //     return this._isDraggable;\n    // }\n\n    constructor() { }\n\n    ngOnInit(): void {\n    }\n}\n","<div class=\"draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\n\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { DraggableItemComponent } from './draggable-item.component';\n\n@NgModule({\n    declarations: [\n        DraggableItemComponent\n    ],\n    imports: [\n        CommonModule,\n        PepNgxLibModule,\n        PepButtonModule,\n        DragDropModule\n    ],\n    exports: [DraggableItemComponent],\n})\nexport class DraggableItemModule { }\n","/*\n * Public API Surface of ngx-composite-lib/draggable-item\n */\nexport * from './draggable-item.module';\nexport * from './draggable-item.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAOa,sBAAsB;;;;;;;;;;IAmB/B;QAjB6B,YAAO,GAAG,MAAM,CAAC;QAErC,UAAK,GAAG,EAAE,CAAC;QAEX,aAAQ,GAAG,KAAK,CAAC;KAaT;IAEjB,QAAQ;KACP;;mHAtBQ,sBAAsB;uGAAtB,sBAAsB,sKCPnC,yeAUM;2FDHO,sBAAsB;kBALlC,SAAS;mBAAC;oBACP,QAAQ,EAAE,oBAAoB;oBAC9B,WAAW,EAAE,iCAAiC;oBAC9C,SAAS,EAAE,CAAC,iCAAiC,CAAC;iBACjD;0EAGgC,OAAO;sBAAnC,WAAW;uBAAC,cAAc;gBAElB,KAAK;sBAAb,KAAK;gBAEG,QAAQ;sBAAhB,KAAK;;;MEQG,mBAAmB;;gHAAnB,mBAAmB;iHAAnB,mBAAmB,iBAVxB,sBAAsB,aAGtB,YAAY;QACZ,eAAe;QACf,eAAe;QACf,cAAc,aAER,sBAAsB;iHAEvB,mBAAmB,YARnB;YACL,YAAY;YACZ,eAAe;YACf,eAAe;YACf,cAAc;SACjB;2FAGQ,mBAAmB;kBAZ/B,QAAQ;mBAAC;oBACN,YAAY,EAAE;wBACV,sBAAsB;qBACzB;oBACD,OAAO,EAAE;wBACL,YAAY;wBACZ,eAAe;wBACf,eAAe;wBACf,cAAc;qBACjB;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;iBACpC;;;ACpBD;;;;ACAA;;;;;;"}
+{"version":3,"file":"pepperi-addons-ngx-composite-lib-draggable-item.js","sources":["../../../projects/ngx-composite-lib/draggable-item/draggable-item.component.ts","../../../projects/ngx-composite-lib/draggable-item/draggable-item.component.html","../../../projects/ngx-composite-lib/draggable-item/draggable-item.module.ts","../../../projects/ngx-composite-lib/draggable-item/public-api.ts","../../../projects/ngx-composite-lib/draggable-item/pepperi-addons-ngx-composite-lib-draggable-item.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, OnInit, Output } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'pep-draggable-item',\r\n    templateUrl: './draggable-item.component.html',\r\n    styleUrls: ['./draggable-item.component.scss']\r\n})\r\nexport class DraggableItemComponent implements OnInit {\r\n\r\n    @HostBinding('style.cursor') _cursor = 'move';\r\n\r\n    @Input() title = '';\r\n    \r\n    @Input() disabled = false;\r\n\r\n    // private _isDraggable = false;\r\n    // @Input()\r\n    // set isDraggable(value: boolean) {\r\n    //     this._isDraggable = value;\r\n\r\n    //     this._cursor = value ? 'move' : 'inherit'\r\n    // }\r\n    // get isDraggable(): boolean {\r\n    //     return this._isDraggable;\r\n    // }\r\n\r\n    constructor() { \r\n        //\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        //\r\n    }\r\n}\r\n","<div class=\"draggable-item-container\" [ngClass]=\"{ 'disabled': disabled }\">\r\n    <div class=\"\">\r\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\r\n    </div>\r\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\r\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-content select=\"[pep-actions]\"></ng-content>\r\n    </div>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\r\n\r\nimport { DragDropModule } from '@angular/cdk/drag-drop';\r\n\r\nimport { DraggableItemComponent } from './draggable-item.component';\r\n\r\n@NgModule({\r\n    declarations: [\r\n        DraggableItemComponent\r\n    ],\r\n    imports: [\r\n        CommonModule,\r\n        PepNgxLibModule,\r\n        PepButtonModule,\r\n        DragDropModule\r\n    ],\r\n    exports: [DraggableItemComponent],\r\n})\r\nexport class PepDraggableItemModule { }\r\n","/*\r\n * Public API Surface of ngx-composite-lib/draggable-item\r\n */\r\nexport * from './draggable-item.module';\r\nexport * from './draggable-item.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAOa,sBAAsB;;;;;;;;;;IAmB/B;QAjB6B,YAAO,GAAG,MAAM,CAAC;QAErC,UAAK,GAAG,EAAE,CAAC;QAEX,aAAQ,GAAG,KAAK,CAAC;;KAezB;IAED,QAAQ;;KAEP;;mHAzBQ,sBAAsB;uGAAtB,sBAAsB,sKCPnC,6fAUM;2FDHO,sBAAsB;kBALlC,SAAS;mBAAC;oBACP,QAAQ,EAAE,oBAAoB;oBAC9B,WAAW,EAAE,iCAAiC;oBAC9C,SAAS,EAAE,CAAC,iCAAiC,CAAC;iBACjD;0EAGgC,OAAO;sBAAnC,WAAW;uBAAC,cAAc;gBAElB,KAAK;sBAAb,KAAK;gBAEG,QAAQ;sBAAhB,KAAK;;;MEQG,sBAAsB;;mHAAtB,sBAAsB;oHAAtB,sBAAsB,iBAV3B,sBAAsB,aAGtB,YAAY;QACZ,eAAe;QACf,eAAe;QACf,cAAc,aAER,sBAAsB;oHAEvB,sBAAsB,YARtB;YACL,YAAY;YACZ,eAAe;YACf,eAAe;YACf,cAAc;SACjB;2FAGQ,sBAAsB;kBAZlC,QAAQ;mBAAC;oBACN,YAAY,EAAE;wBACV,sBAAsB;qBACzB;oBACD,OAAO,EAAE;wBACL,YAAY;wBACZ,eAAe;wBACf,eAAe;wBACf,cAAc;qBACjB;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;iBACpC;;;ACpBD;;;;ACAA;;;;;;"}

package/fesm2015/pepperi-addons-ngx-composite-lib-file-status-panel.js

@@ -0,0 +1,90 @@
+import * as i0 from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@ngx-translate/core';
+import * as i2 from '@pepperi-addons/ngx-lib/button';
+import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
+import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
+import { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';
+import { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
+
+class FileStatusPanelComponent {
+    constructor(translate) {
+        this.translate = translate;
+        this.title = '';
+        this.filesList = [];
+        //
+    }
+    ngOnInit() {
+        //
+    }
+    closeClick(event) {
+        //
+    }
+}
+FileStatusPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: FileStatusPanelComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+FileStatusPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: FileStatusPanelComponent, selector: "pep-file-status-panel", inputs: { title: "title", filesList: "filesList" }, ngImport: i0, template: "<div *ngIf=\"filesList.length\" id=\"uploadPanelCont\">\r\n    <div class=\"panel-header pep-border-bottom\">\r\n        <label class=\"body-md ellipsis\">{{title}}</label>\r\n        <pep-button\r\n            styleType=\"weak\"\r\n            styleStateType=\"system\"\r\n            sizeType=\"xs\"\r\n            classNames=\"roundCorners\"\r\n            [disabled]=\"false\"\r\n            iconName=\"system_close\"\r\n            iconPosition=\"end\"\r\n            [visible]=\"true\"\r\n            (buttonClick)=\"closeClick($event)\">\r\n        </pep-button>\r\n    </div>\r\n    <div class=\"panel-content\">\r\n        <ul>\r\n            <ng-container *ngFor=\"let file of filesList\">\r\n            <li *ngIf=\"file?.status !== 'hidden'\">\r\n               \r\n                <span class=\"color-dimmed body-sm ellipsis\">{{file.name}}</span>\r\n                <pep-button\r\n                    styleType=\"weak-invert\"\r\n                    styleStateType=\"system\"\r\n                    classNames=\"xxs-btn\"\r\n                    [disabled]=\"false\"\r\n                    iconName=\"arrow_right_alt\">\r\n                </pep-button>\r\n                <span class=\"body-sm\">{{file.status}}</span>\r\n            \r\n            </li>\r\n        </ng-container>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: ["#uploadPanelCont{position:absolute;bottom:10px;right:2.5rem;width:22rem;padding:1rem;min-height:7rem;background:white;border:1px solid #595959;box-shadow:0 0 16px #0000003d;border-radius:.25rem;z-index:9999}#uploadPanelCont .panel-header{display:flex;flex-direction:row;justify-content:space-between;height:2.5rem}#uploadPanelCont .panel-header ::ng-deep .roundCorners{border-radius:1.5rem}.panel-content{max-height:50vh;overflow:auto}.panel-content ul{list-style-type:none;padding:0}.panel-content ul li{height:1.25rem;margin-top:.5rem;display:flex;flex-direction:row}.panel-content ul li .done{color:green!important}.panel-content ul li ::ng-deep .xxs-btn{min-width:1rem!important;height:1.3rem}.panel-content ul li ::ng-deep .xxs-btn pep-icon{width:.75rem!important}\n"], components: [{ type: i2.PepButtonComponent, selector: "pep-button", inputs: ["styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconPosition", "visible", "key", "value", "iconName"], outputs: ["buttonClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: FileStatusPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'pep-file-status-panel',
+                    templateUrl: './file-status-panel.component.html',
+                    styleUrls: ['./file-status-panel.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { title: [{
+                type: Input
+            }], filesList: [{
+                type: Input
+            }] } });
+
+class PepFileStatusPanelModule {
+}
+PepFileStatusPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepFileStatusPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepFileStatusPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepFileStatusPanelModule, declarations: [FileStatusPanelComponent], imports: [CommonModule,
+        PepTopBarModule,
+        PepTextboxModule,
+        PepButtonModule,
+        PepDialogModule], exports: [FileStatusPanelComponent] });
+PepFileStatusPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepFileStatusPanelModule, imports: [[
+            CommonModule,
+            PepTopBarModule,
+            PepTextboxModule,
+            PepButtonModule,
+            PepDialogModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: PepFileStatusPanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FileStatusPanelComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        PepTopBarModule,
+                        PepTextboxModule,
+                        PepButtonModule,
+                        PepDialogModule,
+                    ],
+                    exports: [FileStatusPanelComponent]
+                }]
+        }] });
+
+class IFile {
+    constructor() {
+        this.key = 0;
+        this.name = '';
+        this.status = 'uploading';
+    }
+}
+
+/*
+ * Public API Surface of ngx-composite-lib/file-status-panel
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FileStatusPanelComponent, IFile, PepFileStatusPanelModule };
+//# sourceMappingURL=pepperi-addons-ngx-composite-lib-file-status-panel.js.map

package/fesm2015/pepperi-addons-ngx-composite-lib-file-status-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pepperi-addons-ngx-composite-lib-file-status-panel.js","sources":["../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.component.ts","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.component.html","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.module.ts","../../../projects/ngx-composite-lib/file-status-panel/file-status-panel.model.ts","../../../projects/ngx-composite-lib/file-status-panel/public-api.ts","../../../projects/ngx-composite-lib/file-status-panel/pepperi-addons-ngx-composite-lib-file-status-panel.ts"],"sourcesContent":["import { Component, OnInit, Injectable, Input, Output, EventEmitter, Optional, Inject } from '@angular/core';\r\nimport { TranslateService } from '@ngx-translate/core';\r\nimport { IFile } from './file-status-panel.model';\r\n\r\n@Component({\r\n    selector: 'pep-file-status-panel',\r\n    templateUrl: './file-status-panel.component.html',\r\n    styleUrls: ['./file-status-panel.component.scss']\r\n})\r\n\r\nexport class FileStatusPanelComponent implements OnInit {\r\n    \r\n    @Input() title = '';\r\n    @Input() filesList: Array<IFile> = [];\r\n    \r\n    constructor( public translate: TranslateService) {\r\n       //\r\n    }\r\n\r\n    ngOnInit() {\r\n        //\r\n    }\r\n\r\n    closeClick(event: any): void {\r\n        //\r\n    }\r\n\r\n\r\n}","<div *ngIf=\"filesList.length\" id=\"uploadPanelCont\">\r\n    <div class=\"panel-header pep-border-bottom\">\r\n        <label class=\"body-md ellipsis\">{{title}}</label>\r\n        <pep-button\r\n            styleType=\"weak\"\r\n            styleStateType=\"system\"\r\n            sizeType=\"xs\"\r\n            classNames=\"roundCorners\"\r\n            [disabled]=\"false\"\r\n            iconName=\"system_close\"\r\n            iconPosition=\"end\"\r\n            [visible]=\"true\"\r\n            (buttonClick)=\"closeClick($event)\">\r\n        </pep-button>\r\n    </div>\r\n    <div class=\"panel-content\">\r\n        <ul>\r\n            <ng-container *ngFor=\"let file of filesList\">\r\n            <li *ngIf=\"file?.status !== 'hidden'\">\r\n               \r\n                <span class=\"color-dimmed body-sm ellipsis\">{{file.name}}</span>\r\n                <pep-button\r\n                    styleType=\"weak-invert\"\r\n                    styleStateType=\"system\"\r\n                    classNames=\"xxs-btn\"\r\n                    [disabled]=\"false\"\r\n                    iconName=\"arrow_right_alt\">\r\n                </pep-button>\r\n                <span class=\"body-sm\">{{file.status}}</span>\r\n            \r\n            </li>\r\n        </ng-container>\r\n        </ul>\r\n    </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { PepFileService, PepAddonService, PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\nimport { FileStatusPanelComponent } from './file-status-panel.component';\r\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\r\nimport { PepTopBarModule } from '@pepperi-addons/ngx-lib/top-bar';\r\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\r\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\r\n\r\n\r\n@NgModule({\r\n    declarations: [\r\n        FileStatusPanelComponent\r\n    ],\r\n    imports: [\r\n        CommonModule,\r\n        PepTopBarModule,\r\n        PepTextboxModule,\r\n        PepButtonModule,\r\n        PepDialogModule,\r\n    ],\r\n    exports: [FileStatusPanelComponent]\r\n})\r\n\r\nexport class PepFileStatusPanelModule { \r\n    \r\n}","export type fileStatus = 'uploading' | 'downloading' | 'done' | 'failed' | 'hidden';\r\n\r\nexport class IFile {\r\n    key = 0;\r\n    name = '';\r\n    status: fileStatus = 'uploading';\r\n}","/*\r\n * Public API Surface of ngx-composite-lib/file-status-panel\r\n */\r\nexport * from './file-status-panel.module';\r\nexport * from './file-status-panel.component';\r\nexport * from './file-status-panel.model';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAUa,wBAAwB;IAKjC,YAAoB,SAA2B;QAA3B,cAAS,GAAT,SAAS,CAAkB;QAHtC,UAAK,GAAG,EAAE,CAAC;QACX,cAAS,GAAiB,EAAE,CAAC;;KAIrC;IAED,QAAQ;;KAEP;IAED,UAAU,CAAC,KAAU;;KAEpB;;qHAfQ,wBAAwB;yGAAxB,wBAAwB,iHCVrC,8zCAmCA;2FDzBa,wBAAwB;kBANpC,SAAS;mBAAC;oBACP,QAAQ,EAAE,uBAAuB;oBACjC,WAAW,EAAE,oCAAoC;oBACjD,SAAS,EAAE,CAAC,oCAAoC,CAAC;iBACpD;uGAIY,KAAK;sBAAb,KAAK;gBACG,SAAS;sBAAjB,KAAK;;;MEWG,wBAAwB;;qHAAxB,wBAAwB;sHAAxB,wBAAwB,iBAZ7B,wBAAwB,aAGxB,YAAY;QACZ,eAAe;QACf,gBAAgB;QAChB,eAAe;QACf,eAAe,aAET,wBAAwB;sHAGzB,wBAAwB,YAVxB;YACL,YAAY;YACZ,eAAe;YACf,gBAAgB;YAChB,eAAe;YACf,eAAe;SAClB;2FAIQ,wBAAwB;kBAdpC,QAAQ;mBAAC;oBACN,YAAY,EAAE;wBACV,wBAAwB;qBAC3B;oBACD,OAAO,EAAE;wBACL,YAAY;wBACZ,eAAe;wBACf,gBAAgB;wBAChB,eAAe;wBACf,eAAe;qBAClB;oBACD,OAAO,EAAE,CAAC,wBAAwB,CAAC;iBACtC;;;MCpBY,KAAK;IAAlB;QACI,QAAG,GAAG,CAAC,CAAC;QACR,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAe,WAAW,CAAC;KACpC;;;ACND;;;;ACAA;;;;;;"}