npm - @pepperi-addons/ngx-lib - Versions diffs - 0.2.40 → 0.2.44 - Mend

@pepperi-addons/ngx-lib 0.2.40 → 0.2.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/address/address.component.d.ts CHANGED Viewed

@@ -15,6 +15,9 @@ export declare class PepAddressComponent implements OnChanges, OnInit, OnDestroy
     groupFields: Array<any>;
     form: FormGroup;
     layoutType: PepLayoutType;
+    private _visible;
+    set visible(visible: boolean);
+    get visible(): boolean;
     addressValueChange: EventEmitter<IPepFieldValueChangeEvent>;
     constructor(element: ElementRef, renderer: Renderer2);
     ngOnInit(): void;

package/address/pepperi-addons-ngx-lib-address.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepAddressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":17,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":20,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":23,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepAddressComponent"}],"declarations":[{"__symbolic":"reference","name":"PepAddressComponent"}]}]}],"members":{}},"PepAddressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"pep-address","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":24,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-container ngIf=\"layoutType === 'form'\">\n <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n </pep-field-title>\n <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n <div [ngSwitch]=\"groupField.controlType\" ngFor=\"let groupField of groupFields; let i = index\"\n class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n <pep-textbox ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\n [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\n [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n (valueChange)=\"onValueChange($event, groupField.key)\">\n </pep-textbox>\n\n <pep-select ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n (valueChange)=\"onValueChange($event, groupField.key)\">\n </pep-select>\n </div>\n </div>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <div class=\"pep-card-input \" title=\"{{ label }} {{ formattedValue }}\"\n [ngClass]=\"['text-align-' + xAlignment]\">\n <span ngIf=\"label != ''\" class=\"body-xs title\">{{ label }} </span>\n <ng-container ngFor=\"let groupField of groupFields; let i = index\">\n <span ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n }}, </span>\n </ng-container>\n </div>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'table'\">\n <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n <ng-container ngFor=\"let groupField of groupFields; let i = index\">\n <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n }}, </span>\n </ng-container>\n </div>\n </ng-container>\n</ng-container>","styles":[".header{grid-column:1/span 3}.pep-address-container{padding:.875rem .75rem;padding:.875rem var(--pep-spacing-md,.75rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);display:-ms-grid;display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:.75rem;grid-column-gap:var(--pep-spacing-md,.75rem);grid-row-gap:.75rem;grid-row-gap:var(--pep-spacing-md,.75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"groupFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"addressValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":44,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":44,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}]}}},"origins":{"PepAddressModule":"./address.module","PepAddressComponent":"./address.component"},"importAs":"@pepperi-addons/ngx-lib/address"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepAddressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":17,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":20,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":23,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepAddressComponent"}],"declarations":[{"__symbolic":"reference","name":"PepAddressComponent"}]}]}],"members":{}},"PepAddressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"pep-address","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":24,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-container ngIf=\"layoutType === 'form'\">\n <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n </pep-field-title>\n <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n <div [ngSwitch]=\"groupField.controlType\" ngFor=\"let groupField of groupFields; let i = index\"\n class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n <pep-textbox ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\n [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\n [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n (valueChange)=\"onValueChange($event, groupField.key)\">\n </pep-textbox>\n\n <pep-select ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n (valueChange)=\"onValueChange($event, groupField.key)\">\n </pep-select>\n </div>\n </div>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <div class=\"pep-card-input \" title=\"{{ label }} {{ formattedValue }}\"\n [ngClass]=\"['text-align-' + xAlignment]\">\n <span ngIf=\"label != ''\" class=\"body-xs title\">{{ label }} </span>\n <ng-container ngFor=\"let groupField of groupFields; let i = index\">\n <span ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n }}, </span>\n </ng-container>\n </div>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'table'\">\n <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n <ng-container ngFor=\"let groupField of groupFields; let i = index\">\n <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n }}, </span>\n </ng-container>\n </div>\n </ng-container>\n</ng-container>","styles":[".header{grid-column:1/span 3}.pep-address-container{padding:.875rem .75rem;padding:.875rem var(--pep-spacing-md,.75rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);display:-ms-grid;display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:.75rem;grid-column-gap:var(--pep-spacing-md,.75rem);grid-row-gap:.75rem;grid-row-gap:var(--pep-spacing-md,.75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"groupFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"addressValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":64,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}]}}},"origins":{"PepAddressModule":"./address.module","PepAddressComponent":"./address.component"},"importAs":"@pepperi-addons/ngx-lib/address"}

package/attachment/attachment.component.d.ts CHANGED Viewed

@@ -54,6 +54,9 @@ export declare class PepAttachmentComponent implements OnInit, OnChanges, OnDest
     private _rowSpan;
     set rowSpan(value: number);
     get rowSpan(): number;
+    private _visible;
+    set visible(visible: boolean);
+    get visible(): boolean;
     controlType: string;
     form: FormGroup;
     showTitle: boolean;

package/attachment/pepperi-addons-ngx-lib-attachment.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepAttachmentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":19,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":21,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":23,"character":8}],"exports":[{"__symbolic":"reference","name":"PepAttachmentComponent"}],"declarations":[{"__symbolic":"reference","name":"PepAttachmentComponent"}]}]}],"members":{}},"PepAttachmentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"pep-attachment","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":21},"member":"OnPush"},"template":"<ng-template #pepTemplate>\n <pep-files-uploader [key]=\"key\" [src]=\"src\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n [xAlignment]=\"xAlignment\" [rowSpan]=\"rowSpan\" [fieldHeight]=\"fieldHeight\" [controlType]=\"controlType\"\n [form]=\"form\" [layoutType]=\"layoutType\" [standAlone]=\"standAlone\" (fileChange)=\"onFileChanged($event)\"\n (elementClick)=\"onFileClicked($event)\" [acceptedExtensions]=\"acceptAttachmentType\">\n </pep-files-uploader>\n</ng-template>\n\n<ng-template #pepReadonlyTemplate>\n <ng-container ngIf=\"src?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n <ng-template #notEmptyBlock>\n <div class=\"pep-file-container\">\n <a [id]=\"key\" class=\"color-link body-sm pep-card-input \" ngIf=\"src != null\" title=\"{{ src }}\"\n target=\"_blank\" href=\"{{ src }}\">{{ src }}</a>\n </div>\n </ng-template>\n <ng-template #emptyBlock>\n <span> </span>\n </ng-template>\n</ng-template>\n\n<ng-container ngIf=\"layoutType === 'form'\">\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone }\">\n <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n [showTitle]=\"showTitle\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate\"></ng-container>\n </ng-template>\n</ng-container>\n\n\n<ng-container ngIf=\"layoutType === 'table'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container one-row\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate\"></ng-container>\n </ng-template>\n</ng-container>","styles":[":host{display:block}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~107~~,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~108~~,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~111~~,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~120~~,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~122~~,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":~~125~~,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":~~136~~,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":~~137~~,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":~~138~~,"character":24},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":~~139~~,"character":29}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"onFileClicked":[{"__symbolic":"method"}]}}},"origins":{"PepAttachmentModule":"./attachment.module","PepAttachmentComponent":"./attachment.component"},"importAs":"@pepperi-addons/ngx-lib/attachment"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepAttachmentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":19,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":21,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":23,"character":8}],"exports":[{"__symbolic":"reference","name":"PepAttachmentComponent"}],"declarations":[{"__symbolic":"reference","name":"PepAttachmentComponent"}]}]}],"members":{}},"PepAttachmentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"pep-attachment","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":21},"member":"OnPush"},"template":"<ng-template #pepTemplate>\n <pep-files-uploader [key]=\"key\" [src]=\"src\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n [xAlignment]=\"xAlignment\" [rowSpan]=\"rowSpan\" [fieldHeight]=\"fieldHeight\" [controlType]=\"controlType\"\n [form]=\"form\" [layoutType]=\"layoutType\" [standAlone]=\"standAlone\" (fileChange)=\"onFileChanged($event)\"\n (elementClick)=\"onFileClicked($event)\" [acceptedExtensions]=\"acceptAttachmentType\">\n </pep-files-uploader>\n</ng-template>\n\n<ng-template #pepReadonlyTemplate>\n <ng-container ngIf=\"src?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n <ng-template #notEmptyBlock>\n <div class=\"pep-file-container\">\n <a [id]=\"key\" class=\"color-link body-sm pep-card-input \" ngIf=\"src != null\" title=\"{{ src }}\"\n target=\"_blank\" href=\"{{ src }}\">{{ src }}</a>\n </div>\n </ng-template>\n <ng-template #emptyBlock>\n <span> </span>\n </ng-template>\n</ng-template>\n\n<ng-container ngIf=\"layoutType === 'form'\">\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone }\">\n <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n [showTitle]=\"showTitle\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate\"></ng-container>\n </ng-template>\n</ng-container>\n\n\n<ng-container ngIf=\"layoutType === 'table'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container one-row\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate\"></ng-container>\n </ng-template>\n</ng-container>","styles":[":host{display:block}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":142,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":145,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":156,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":157,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":158,"character":24},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":159,"character":29}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"onFileClicked":[{"__symbolic":"method"}]}}},"origins":{"PepAttachmentModule":"./attachment.module","PepAttachmentComponent":"./attachment.component"},"importAs":"@pepperi-addons/ngx-lib/attachment"}

package/bundles/pepperi-addons-ngx-lib-address.umd.js CHANGED Viewed

@@ -19,8 +19,25 @@
             this.rowSpan = 1;
             this.form = null;
             this.layoutType = 'form';
+            this._visible = true;
             this.addressValueChange = new core.EventEmitter();
         }
+        Object.defineProperty(PepAddressComponent.prototype, "visible", {
+            get: function () {
+                return this._visible;
+            },
+            set: function (visible) {
+                this._visible = visible;
+                if (visible) {
+                    this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+                }
+                else {
+                    this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         PepAddressComponent.prototype.ngOnInit = function () {
             this.renderer.addClass(this.element.nativeElement, 'pep-grouped-field');
         };
@@ -83,6 +100,7 @@
         groupFields: [{ type: core.Input }],
         form: [{ type: core.Input }],
         layoutType: [{ type: core.Input }],
+        visible: [{ type: core.Input }],
         addressValueChange: [{ type: core.Output }]
     };

package/bundles/pepperi-addons-ngx-lib-address.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-address.umd.js","sources":["../../../projects/ngx-lib/address/address.component.ts","../../../projects/ngx-lib/address/address.module.ts","../../../projects/ngx-lib/address/public-api.ts","../../../projects/ngx-lib/address/pepperi-addons-ngx-lib-address.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n OnDestroy,\n Renderer2,\n ElementRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n PepLayoutType,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n IPepFieldValueChangeEvent,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-address',\n templateUrl: './address.component.html',\n styleUrls: ['./address.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepAddressComponent implements OnChanges, OnInit, OnDestroy {\n @Input() key = '';\n // @Input() value = '';\n @Input() formattedValue = '';\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n @Input() rowSpan = 1;\n @Input() groupFields: Array<any>;\n\n @Input() form: FormGroup = null;\n @Input() layoutType: PepLayoutType = 'form';\n\n @Output()\n addressValueChange: EventEmitter<IPepFieldValueChangeEvent> = new EventEmitter<IPepFieldValueChangeEvent>();\n\n constructor(private element: ElementRef, private renderer: Renderer2) {}\n\n ngOnInit(): void {\n this.renderer.addClass(this.element.nativeElement, 'pep-grouped-field');\n }\n\n ngOnChanges(changes): void {\n //\n }\n\n ngOnDestroy(): void {\n //\n }\n\n // Not in use anymore comment in 16.55.\n // onBlur(e: any, key: string): void {\n // const value = e.target ? e.target.value : e;\n // this.changeValue({ key, value }, e.relatedTarget);\n // }\n\n onValueChange(value: string, key: string): void {\n // if (e.target) {\n // const input = e.target ? e.target.value : e;\n // this.changeValue({ key, value: input.value });\n // } else {\n // this.changeValue(e);\n // }\n\n const currentGroupField = this.groupFields.find((gf) => gf.key === key);\n\n if (currentGroupField && currentGroupField.value !== value) {\n // Set the value in the form controls\n if (this.form) {\n const formCtrl = this.form.get(this.key);\n\n if (formCtrl) {\n formCtrl.get(key).setValue(value);\n }\n }\n\n this.addressValueChange.emit({\n key: key,\n value: value,\n });\n }\n }\n\n // changeValue(field: any): void {\n // const currentGroupField = this.groupFields.filter(\n // (groupField) => groupField.key === field.key\n // )[0];\n\n // if (currentGroupField.value !== field.value) {\n // // Set the value in the form controls\n // if (this.form) {\n // const formCtrl = this.form.get(this.key);\n\n // if (formCtrl) {\n // formCtrl.get(field.key).setValue(field.value);\n // }\n // }\n\n // this.valueChange.emit({\n // key: field.key,\n // value: field.value,\n // });\n // }\n // }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepSelectModule } from '@pepperi-addons/ngx-lib/select';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepAddressComponent } from './address.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules\n MatCommonModule,\n MatFormFieldModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepTextboxModule,\n PepSelectModule,\n PepFieldTitleModule,\n ],\n exports: [PepAddressComponent],\n declarations: [PepAddressComponent],\n})\nexport class PepAddressModule {}\n","/\n Public API Surface of ngx-lib/address\n /\nexport from './address.module';\nexport * from './address.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","Component","ChangeDetectionStrategy","ElementRef","Renderer2","Input","Output","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatFormFieldModule","PepNgxLibModule","PepTextboxModule","PepSelectModule","PepFieldTitleModule"],"mappings":";;;;;;;~~QA4CI~~,6BAAoB,OAAmB,EAAU,QAAmB;YAAhD,YAAO,GAAP,OAAO,CAAY;YAAU,aAAQ,GAAR,QAAQ,CAAW;~~YAjB3D~~,QAAG,GAAG,EAAE,CAAC;;YAET,mBAAc,GAAG,EAAE,CAAC;YACpB,UAAK,GAAG,EAAE,CAAC;YACX,cAAS,GAAG,KAAK,CAAC;YAClB,aAAQ,GAAG,KAAK,CAAC;YACjB,aAAQ,GAAG,KAAK,CAAC;YACjB,eAAU,GAA2BA,mCAA4B,CAAC;YAClE,YAAO,GAAG,CAAC,CAAC;YAGZ,SAAI,GAAc,IAAI,CAAC;YACvB,eAAU,GAAkB,MAAM,CAAC;~~YAG5C~~,uBAAkB,GAA4C,IAAIC,iBAAY,EAA6B,CAAC;~~SAEpC~~;~~QAExE~~,sCAAQ,GAAR;YACI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;SAC3E;QAED,yCAAW,GAAX,UAAY,OAAO;;SAElB;QAED,yCAAW,GAAX;;SAEC;;;;;;QAQD,2CAAa,GAAb,UAAc,KAAa,EAAE,GAAW;;;;;;;YAQpC,IAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAC,EAAE,IAAK,OAAA,EAAE,CAAC,GAAG,KAAK,GAAG,GAAA,CAAC,CAAC;YAExE,IAAI,iBAAiB,IAAI,iBAAiB,CAAC,KAAK,KAAK,KAAK,EAAE;;gBAExD,IAAI,IAAI,CAAC,IAAI,EAAE;oBACX,IAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAEzC,IAAI,QAAQ,EAAE;wBACV,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;qBACrC;iBACJ;gBAED,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;oBACzB,GAAG,EAAE,GAAG;oBACR,KAAK,EAAE,KAAK;iBACf,CAAC,CAAC;aACN;SACJ;;;;~~gBArEJC~~,cAAS,SAAC;oBACP,QAAQ,EAAE,aAAa;oBACvB,wlGAAuC;oBAEvC,eAAe,EAAEC,4BAAuB,CAAC,MAAM;;iBAClD;;;gBAfGC,eAAU;gBADVC,cAAS;;;sBAkBRC,UAAK;iCAELA,UAAK;wBACLA,UAAK;4BACLA,UAAK;2BACLA,UAAK;2BACLA,UAAK;6BACLA,UAAK;0BACLA,UAAK;8BACLA,UAAK;uBAELA,UAAK;6BACLA,UAAK;~~qCAELC~~,WAAM;;;;~~QCXX~~;;;;;gBAhBCC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;wBACZC,yBAAmB;;wBAEnBC,sBAAe;wBACfC,4BAAkB;;wBAElBC,sBAAe;wBACfC,wBAAgB;wBAChBC,sBAAe;wBACfC,8BAAmB;qBACtB;oBACD,OAAO,EAAE,CAAC,mBAAmB,CAAC;oBAC9B,YAAY,EAAE,CAAC,mBAAmB,CAAC;iBACtC;;;IC7BD;;;;ICAA;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-address.umd.js","sources":["../../../projects/ngx-lib/address/address.component.ts","../../../projects/ngx-lib/address/address.module.ts","../../../projects/ngx-lib/address/public-api.ts","../../../projects/ngx-lib/address/pepperi-addons-ngx-lib-address.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n OnDestroy,\n Renderer2,\n ElementRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n PepLayoutType,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n IPepFieldValueChangeEvent,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-address',\n templateUrl: './address.component.html',\n styleUrls: ['./address.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepAddressComponent implements OnChanges, OnInit, OnDestroy {\n @Input() key = '';\n // @Input() value = '';\n @Input() formattedValue = '';\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n @Input() rowSpan = 1;\n @Input() groupFields: Array<any>;\n\n @Input() form: FormGroup = null;\n @Input() layoutType: PepLayoutType = 'form';\n\n private _visible = true;\n @Input()\n set visible(visible: boolean) {\n this._visible = visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n @Output()\n addressValueChange: EventEmitter<IPepFieldValueChangeEvent> = new EventEmitter<IPepFieldValueChangeEvent>();\n\n constructor(private element: ElementRef, private renderer: Renderer2) { }\n\n ngOnInit(): void {\n this.renderer.addClass(this.element.nativeElement, 'pep-grouped-field');\n }\n\n ngOnChanges(changes): void {\n //\n }\n\n ngOnDestroy(): void {\n //\n }\n\n // Not in use anymore comment in 16.55.\n // onBlur(e: any, key: string): void {\n // const value = e.target ? e.target.value : e;\n // this.changeValue({ key, value }, e.relatedTarget);\n // }\n\n onValueChange(value: string, key: string): void {\n // if (e.target) {\n // const input = e.target ? e.target.value : e;\n // this.changeValue({ key, value: input.value });\n // } else {\n // this.changeValue(e);\n // }\n\n const currentGroupField = this.groupFields.find((gf) => gf.key === key);\n\n if (currentGroupField && currentGroupField.value !== value) {\n // Set the value in the form controls\n if (this.form) {\n const formCtrl = this.form.get(this.key);\n\n if (formCtrl) {\n formCtrl.get(key).setValue(value);\n }\n }\n\n this.addressValueChange.emit({\n key: key,\n value: value,\n });\n }\n }\n\n // changeValue(field: any): void {\n // const currentGroupField = this.groupFields.filter(\n // (groupField) => groupField.key === field.key\n // )[0];\n\n // if (currentGroupField.value !== field.value) {\n // // Set the value in the form controls\n // if (this.form) {\n // const formCtrl = this.form.get(this.key);\n\n // if (formCtrl) {\n // formCtrl.get(field.key).setValue(field.value);\n // }\n // }\n\n // this.valueChange.emit({\n // key: field.key,\n // value: field.value,\n // });\n // }\n // }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepSelectModule } from '@pepperi-addons/ngx-lib/select';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepAddressComponent } from './address.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules\n MatCommonModule,\n MatFormFieldModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepTextboxModule,\n PepSelectModule,\n PepFieldTitleModule,\n ],\n exports: [PepAddressComponent],\n declarations: [PepAddressComponent],\n})\nexport class PepAddressModule {}\n","/\n Public API Surface of ngx-lib/address\n /\nexport from './address.module';\nexport * from './address.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","Component","ChangeDetectionStrategy","ElementRef","Renderer2","Input","Output","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatFormFieldModule","PepNgxLibModule","PepTextboxModule","PepSelectModule","PepFieldTitleModule"],"mappings":"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"}

package/bundles/pepperi-addons-ngx-lib-attachment.umd.js CHANGED Viewed

@@ -49,6 +49,7 @@
              */
             this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
             this._rowSpan = 1;
+            this._visible = true;
             this.controlType = 'attachment';
             this.form = null;
             this.showTitle = true;
@@ -94,6 +95,22 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PepAttachmentComponent.prototype, "visible", {
+            get: function () {
+                return this._visible;
+            },
+            set: function (visible) {
+                this._visible = visible;
+                if (visible) {
+                    this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+                }
+                else {
+                    this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(PepAttachmentComponent.prototype, "layoutType", {
             get: function () {
                 return this._layoutType;
@@ -197,6 +214,7 @@
         readonly: [{ type: core.Input }],
         xAlignment: [{ type: core.Input }],
         rowSpan: [{ type: core.Input }],
+        visible: [{ type: core.Input }],
         form: [{ type: core.Input }],
         showTitle: [{ type: core.Input }],
         layoutType: [{ type: core.Input }],

package/bundles/pepperi-addons-ngx-lib-attachment.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-attachment.umd.js","sources":["../../../projects/ngx-lib/attachment/attachment.component.ts","../../../projects/ngx-lib/attachment/attachment.module.ts","../../../projects/ngx-lib/attachment/public-api.ts","../../../projects/ngx-lib/attachment/pepperi-addons-ngx-lib-attachment.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n ElementRef,\n Renderer2,\n OnDestroy,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n PepFileService,\n PepCustomizationService,\n PepLayoutType,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n IPepFieldClickEvent,\n PepAttachmentField,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-attachment',\n templateUrl: './attachment.component.html',\n styleUrls: ['./attachment.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepAttachmentComponent implements OnInit, OnChanges, OnDestroy {\n /*\n The attachment key.\n \n @memberof PepAttachmentComponent\n /\n @Input() key = '';\n\n private _src = '';\n /\n The src of the attachment.\n \n @memberof PepAttachmentComponent\n /\n @Input()\n set src(value: string) {\n if (!value) {\n value = '';\n }\n\n this._src = value;\n if (this._src.length > 0) {\n // Empty dataURI.\n this.dataURI = null;\n }\n }\n get src(): string {\n return this._src;\n }\n\n /\n The title of the attachment.\n \n @memberof PepAttachmentComponent\n /\n @Input() label = '';\n\n /\n If the attachment is mandatory\n \n @memberof PepAttachmentComponent\n /\n @Input() mandatory = false;\n\n /\n If the attachment is disabled\n \n @memberof PepAttachmentComponent\n /\n @Input() disabled = false;\n\n /\n If the attachment is readonly\n \n @memberof PepAttachmentComponent\n /\n @Input() readonly = false;\n\n /\n The horizontal alignment of the attachment\n \n @type {PepHorizontalAlignment}\n * @memberof PepAttachmentComponent\n /\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n this.setFieldHeight();\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n controlType = 'attachment';\n\n @Input() form: FormGroup = null;\n @Input() showTitle = true;\n\n private _layoutType: PepLayoutType = 'form';\n @Input()\n set layoutType(value: PepLayoutType) {\n this._layoutType = value;\n this.setFieldHeight();\n }\n get layoutType(): PepLayoutType {\n return this._layoutType;\n }\n\n @Input() isActive = false;\n\n @Output()\n fileChange: EventEmitter<any> = new EventEmitter<any>();\n\n @Output()\n elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\n\n fieldHeight = '';\n standAlone = false;\n dataURI = null;\n\n acceptAttachmentType =\n 'application/pdf,application/json,text/csv,text/csv-schema,application/msword,application/vnd.ms-excel,text/plain,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/bmp,image/jpg, image/jpeg, image/png, image/tif, image/tiff, txt, json';\n\n constructor(\n private customizationService: PepCustomizationService,\n private renderer: Renderer2,\n public element: ElementRef,\n private fileService: PepFileService\n ) { }\n\n private setFieldHeight(): void {\n this.fieldHeight = this.customizationService.calculateFieldHeight(\n this.layoutType,\n this.rowSpan,\n this.standAlone\n );\n }\n\n private setDefaultForm(): void {\n const pepField = new PepAttachmentField({\n key: this.key,\n value: this.src,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnDestroy(): void {\n //\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setFieldHeight();\n this.setDefaultForm();\n\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n }\n }\n\n ngOnChanges(changes: any): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n // Moved to src input\n // if (changes.src && changes.src.currentValue.length > 0) {\n // // Empty dataURI if there is change in the src.\n // this.dataURI = null;\n // }\n }\n\n onFileChanged(fileData: any): void {\n // const tmp = value.length > 0 ? JSON.parse(value) : null;\n // set this.dataURI after this.src cause it initialize in the src setter.\n this.src = fileData ? fileData.fileStr : '';\n this.dataURI = fileData;\n\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n this.dataURI ? this.dataURI.fileExt : ''\n );\n // this.valueChange.emit({\n // key: this.key,\n // value,\n // });\n\n this.fileChange.emit(fileData);\n // this.fileChange.emit(value.length > 0 ? JSON.parse(value) : value);\n }\n\n onFileClicked(event: IPepFieldClickEvent): void {\n if (this.dataURI != null) {\n const fileStrArr = this.dataURI.fileStr.split(';');\n if (fileStrArr.length === 2) {\n const win = window.open('', '_blank');\n const contentType = fileStrArr[0].split(':')[1];\n const base64 = fileStrArr[1].split(',')[1];\n const blob = this.fileService.convertFromb64toBlob(\n base64,\n contentType\n );\n const url = URL.createObjectURL(blob);\n win.location.href = url;\n }\n } else {\n if (this.fileService.isValidUrl(this.src)) {\n const win = window.open('', '_blank');\n win.location.href = this.src;\n }\n }\n\n this.elementClick.emit(event);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepFilesUploaderModule } from '@pepperi-addons/ngx-lib/files-uploader';\n\nimport { PepAttachmentComponent } from './attachment.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules\n MatCommonModule,\n MatFormFieldModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepFieldTitleModule,\n PepFilesUploaderModule,\n ],\n exports: [PepAttachmentComponent],\n declarations: [PepAttachmentComponent],\n})\nexport class PepAttachmentModule {}\n","/\n * Public API Surface of ngx-lib/attachment\n /\nexport from './attachment.module';\nexport * from './attachment.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepAttachmentField","PepCustomizationService","Component","ChangeDetectionStrategy","Renderer2","ElementRef","PepFileService","Input","Output","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatFormFieldModule","PepNgxLibModule","PepFieldTitleModule","PepFilesUploaderModule"],"mappings":"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"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-attachment.umd.js","sources":["../../../projects/ngx-lib/attachment/attachment.component.ts","../../../projects/ngx-lib/attachment/attachment.module.ts","../../../projects/ngx-lib/attachment/public-api.ts","../../../projects/ngx-lib/attachment/pepperi-addons-ngx-lib-attachment.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n ElementRef,\n Renderer2,\n OnDestroy,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n PepFileService,\n PepCustomizationService,\n PepLayoutType,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n IPepFieldClickEvent,\n PepAttachmentField,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-attachment',\n templateUrl: './attachment.component.html',\n styleUrls: ['./attachment.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepAttachmentComponent implements OnInit, OnChanges, OnDestroy {\n /*\n The attachment key.\n \n @memberof PepAttachmentComponent\n /\n @Input() key = '';\n\n private _src = '';\n /\n The src of the attachment.\n \n @memberof PepAttachmentComponent\n /\n @Input()\n set src(value: string) {\n if (!value) {\n value = '';\n }\n\n this._src = value;\n if (this._src.length > 0) {\n // Empty dataURI.\n this.dataURI = null;\n }\n }\n get src(): string {\n return this._src;\n }\n\n /\n The title of the attachment.\n \n @memberof PepAttachmentComponent\n /\n @Input() label = '';\n\n /\n If the attachment is mandatory\n \n @memberof PepAttachmentComponent\n /\n @Input() mandatory = false;\n\n /\n If the attachment is disabled\n \n @memberof PepAttachmentComponent\n /\n @Input() disabled = false;\n\n /\n If the attachment is readonly\n \n @memberof PepAttachmentComponent\n /\n @Input() readonly = false;\n\n /\n The horizontal alignment of the attachment\n \n @type {PepHorizontalAlignment}\n * @memberof PepAttachmentComponent\n /\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n this.setFieldHeight();\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n private _visible = true;\n @Input()\n set visible(visible: boolean) {\n this._visible = visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n controlType = 'attachment';\n\n @Input() form: FormGroup = null;\n @Input() showTitle = true;\n\n private _layoutType: PepLayoutType = 'form';\n @Input()\n set layoutType(value: PepLayoutType) {\n this._layoutType = value;\n this.setFieldHeight();\n }\n get layoutType(): PepLayoutType {\n return this._layoutType;\n }\n\n @Input() isActive = false;\n\n @Output()\n fileChange: EventEmitter<any> = new EventEmitter<any>();\n\n @Output()\n elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\n\n fieldHeight = '';\n standAlone = false;\n dataURI = null;\n\n acceptAttachmentType =\n 'application/pdf,application/json,text/csv,text/csv-schema,application/msword,application/vnd.ms-excel,text/plain,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/bmp,image/jpg, image/jpeg, image/png, image/tif, image/tiff, txt, json';\n\n constructor(\n private customizationService: PepCustomizationService,\n private renderer: Renderer2,\n public element: ElementRef,\n private fileService: PepFileService\n ) { }\n\n private setFieldHeight(): void {\n this.fieldHeight = this.customizationService.calculateFieldHeight(\n this.layoutType,\n this.rowSpan,\n this.standAlone\n );\n }\n\n private setDefaultForm(): void {\n const pepField = new PepAttachmentField({\n key: this.key,\n value: this.src,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnDestroy(): void {\n //\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setFieldHeight();\n this.setDefaultForm();\n\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n }\n }\n\n ngOnChanges(changes: any): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n // Moved to src input\n // if (changes.src && changes.src.currentValue.length > 0) {\n // // Empty dataURI if there is change in the src.\n // this.dataURI = null;\n // }\n }\n\n onFileChanged(fileData: any): void {\n // const tmp = value.length > 0 ? JSON.parse(value) : null;\n // set this.dataURI after this.src cause it initialize in the src setter.\n this.src = fileData ? fileData.fileStr : '';\n this.dataURI = fileData;\n\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n this.dataURI ? this.dataURI.fileExt : ''\n );\n // this.valueChange.emit({\n // key: this.key,\n // value,\n // });\n\n this.fileChange.emit(fileData);\n // this.fileChange.emit(value.length > 0 ? JSON.parse(value) : value);\n }\n\n onFileClicked(event: IPepFieldClickEvent): void {\n if (this.dataURI != null) {\n const fileStrArr = this.dataURI.fileStr.split(';');\n if (fileStrArr.length === 2) {\n const win = window.open('', '_blank');\n const contentType = fileStrArr[0].split(':')[1];\n const base64 = fileStrArr[1].split(',')[1];\n const blob = this.fileService.convertFromb64toBlob(\n base64,\n contentType\n );\n const url = URL.createObjectURL(blob);\n win.location.href = url;\n }\n } else {\n if (this.fileService.isValidUrl(this.src)) {\n const win = window.open('', '_blank');\n win.location.href = this.src;\n }\n }\n\n this.elementClick.emit(event);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepFilesUploaderModule } from '@pepperi-addons/ngx-lib/files-uploader';\n\nimport { PepAttachmentComponent } from './attachment.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules\n MatCommonModule,\n MatFormFieldModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepFieldTitleModule,\n PepFilesUploaderModule,\n ],\n exports: [PepAttachmentComponent],\n declarations: [PepAttachmentComponent],\n})\nexport class PepAttachmentModule {}\n","/\n * Public API Surface of ngx-lib/attachment\n /\nexport from './attachment.module';\nexport * from './attachment.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepAttachmentField","PepCustomizationService","Component","ChangeDetectionStrategy","Renderer2","ElementRef","PepFileService","Input","Output","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatFormFieldModule","PepNgxLibModule","PepFieldTitleModule","PepFilesUploaderModule"],"mappings":"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"}

package/bundles/pepperi-addons-ngx-lib-button.umd.js CHANGED Viewed

@@ -97,9 +97,9 @@
             configurable: true
         });
         PepButtonComponent.prototype.ngOnDestroy = function () {
-            if (this.buttonClick) {
-                this.buttonClick.unsubscribe();
-            }
+            // if (this.buttonClick) {
+            //     this.buttonClick.unsubscribe();
+            // }
         };
         /**
          * The button click

package/bundles/pepperi-addons-ngx-lib-button.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-button.umd.js","sources":["../../../projects/ngx-lib/button/button.model.ts","../../../projects/ngx-lib/button/button.component.ts","../../../projects/ngx-lib/button/button.module.ts","../../../projects/ngx-lib/button/public-api.ts","../../../projects/ngx-lib/button/pepperi-addons-ngx-lib-button.ts"],"sourcesContent":["export class PepButton {\n key: string;\n value?: string;\n classNames?: string;\n disabled?: boolean;\n iconName?: string;\n iconPosition?: 'start' \| 'end';\n callback?: (action: IPepButtonClickEvent) => void;\n\n constructor(data: Partial<PepButton>) {\n Object.assign(this, data);\n }\n}\n\nexport interface IPepButtonClickEvent {\n source: PepButton;\n event?: Event;\n}\n","import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n} from '@angular/core';\nimport {\n PepStyleType,\n PepStyleStateType,\n PepSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { PepIconType } from '@pepperi-addons/ngx-lib/icon';\nimport { PepButton, IPepButtonClickEvent } from './button.model';\n\n/*\n This is a button component that support pepperi theme\n * style & state & sizes\n \n @export\n * @class PepButtonComponent\n * @implements {OnDestroy}\n /\n@Component({\n selector: 'pep-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n})\nexport class PepButtonComponent implements OnDestroy {\n /\n The button key\n \n @type {string}\n * @memberof PepButtonComponent\n /\n @Input() key: string;\n\n /\n The text on the button.\n \n @type {string}\n * @memberof PepButtonComponent\n /\n @Input() value: string;\n\n /\n The style of the button.\n \n @type {PepStyleType}\n * @memberof PepButtonComponent\n /\n @Input() styleType: PepStyleType = 'weak';\n\n /\n The style state of the button.\n \n @type {PepStyleStateType}\n * @memberof PepButtonComponent\n /\n @Input() styleStateType: PepStyleStateType = 'system';\n\n /\n The size of the button.\n \n @type {PepSizeType}\n * @memberof PepButtonComponent\n /\n @Input() sizeType: PepSizeType = 'md';\n\n /\n Class names that should be on the button element tag like classNames=\"class1 class2\"\n \n @memberof PepButtonComponent\n /\n @Input() classNames = '';\n\n /\n If the button is disable or not.\n \n @type {boolean}\n * @memberof PepButtonComponent\n /\n @Input() disabled = false;\n\n /\n The icon name to show on the button. look in (@link icon -> All icons)\n \n @type {PepIconType} See {@link PepIconType}\n * @memberof PepButtonComponent\n /\n @Input() iconName: PepIconType;\n\n /\n The icon position.\n \n @type {('start' \| 'end')}\n * @memberof PepButtonComponent\n /\n @Input() iconPosition: 'start' \| 'end' = 'end';\n\n private _visible = true;\n /\n If the button is visible or not.\n \n @memberof PepButtonComponent\n /\n @Input()\n set visible(visible: boolean) {\n if (visible !== undefined) {\n this._visible = !!visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n /\n The button click event.\n \n @type {EventEmitter<IPepButtonClickEvent>}\n * @memberof PepButtonComponent\n /\n @Output()\n buttonClick: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\n\n constructor(private renderer: Renderer2, private element: ElementRef) { }\n\n ngOnDestroy(): void {\n if (this.buttonClick) {\n this.buttonClick.unsubscribe();\n }\n }\n\n /\n The button click\n /\n onButtonClicked(event: Event): void {\n const button = new PepButton({\n key: this.key,\n value: this.value,\n });\n\n const buttonClick = {\n source: button,\n event,\n };\n\n this.buttonClick.emit(buttonClick);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { PepIconModule } from '@pepperi-addons/ngx-lib/icon';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepButtonComponent } from './button.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules\n MatCommonModule,\n MatButtonModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepButtonComponent],\n declarations: [PepButtonComponent],\n})\nexport class PepButtonModule {}\n","/\n * Public API Surface of ngx-lib/button\n /\nexport from './button.module';\nexport * from './button.component';\nexport * from './button.model';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["EventEmitter","Component","Renderer2","ElementRef","Input","Output","NgModule","CommonModule","MatCommonModule","MatButtonModule","MatIconModule","PepNgxLibModule","PepIconModule"],"mappings":";;;;;;;QASI,mBAAY,IAAwB;YAChC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;SAC7B;wBACJ;KAAA;;ICKD;;;;;;;;;QAyHI,4BAAoB,QAAmB,EAAU,OAAmB;YAAhD,aAAQ,GAAR,QAAQ,CAAW;YAAU,YAAO,GAAP,OAAO,CAAY;;;;;;;YArF3D,cAAS,GAAiB,MAAM,CAAC;;;;;;;YAQjC,mBAAc,GAAsB,QAAQ,CAAC;;;;;;;YAQ7C,aAAQ,GAAgB,IAAI,CAAC;;;;;;YAO7B,eAAU,GAAG,EAAE,CAAC;;;;;;;YAQhB,aAAQ,GAAG,KAAK,CAAC;;;;;;;YAgBjB,iBAAY,GAAoB,KAAK,CAAC;YAEvC,aAAQ,GAAG,IAAI,CAAC;;;;;;;YAkCxB,gBAAW,GAAuC,IAAIA,iBAAY,EAAwB,CAAC;SAElB;QA9BzE,sBACI,uCAAO;iBAgBX;gBACI,OAAO,IAAI,CAAC,QAAQ,CAAC;aACxB;;;;;;iBAnBD,UACY,OAAgB;gBACxB,IAAI,OAAO,KAAK,SAAS,EAAE;oBACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;oBAC1B,IAAI,OAAO,EAAE;wBACT,IAAI,CAAC,QAAQ,CAAC,WAAW,CACrB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;qBACL;yBAAM;wBACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;qBACL;iBACJ;aACJ;;;WAAA;QAgBD,wCAAW,GAAX~~;YACI,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;aAClC;SACJ~~;;;;QAKD,4CAAe,GAAf,UAAgB,KAAY;YACxB,IAAM,MAAM,GAAG,IAAI,SAAS,CAAC;gBACzB,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB,CAAC,CAAC;YAEH,IAAM,WAAW,GAAG;gBAChB,MAAM,EAAE,MAAM;gBACd,KAAK,OAAA;aACR,CAAC;YAEF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACtC;;;;gBAxIJC,cAAS,SAAC;oBACP,QAAQ,EAAE,YAAY;oBACtB,o9BAAsC;;iBAEzC;;;gBAvBGC,cAAS;gBACTC,eAAU;;;sBA8BTC,UAAK;wBAQLA,UAAK;4BAQLA,UAAK;iCAQLA,UAAK;2BAQLA,UAAK;6BAOLA,UAAK;2BAQLA,UAAK;2BAQLA,UAAK;+BAQLA,UAAK;0BAQLA,UAAK;8BA2BLC,WAAM;;;;QC9GX;;;;;gBAdCC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;;wBAEZC,sBAAe;wBACfC,sBAAe;wBACfC,kBAAa;;wBAEbC,sBAAe;wBACfC,oBAAa;qBAChB;oBACD,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,YAAY,EAAE,CAAC,kBAAkB,CAAC;iBACrC;;;ICxBD;;;;ICAA;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-button.umd.js","sources":["../../../projects/ngx-lib/button/button.model.ts","../../../projects/ngx-lib/button/button.component.ts","../../../projects/ngx-lib/button/button.module.ts","../../../projects/ngx-lib/button/public-api.ts","../../../projects/ngx-lib/button/pepperi-addons-ngx-lib-button.ts"],"sourcesContent":["export class PepButton {\n key: string;\n value?: string;\n classNames?: string;\n disabled?: boolean;\n iconName?: string;\n iconPosition?: 'start' \| 'end';\n callback?: (action: IPepButtonClickEvent) => void;\n\n constructor(data: Partial<PepButton>) {\n Object.assign(this, data);\n }\n}\n\nexport interface IPepButtonClickEvent {\n source: PepButton;\n event?: Event;\n}\n","import {\n Component,\n OnDestroy,\n Input,\n Output,\n EventEmitter,\n Renderer2,\n ElementRef,\n} from '@angular/core';\nimport {\n PepStyleType,\n PepStyleStateType,\n PepSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { PepIconType } from '@pepperi-addons/ngx-lib/icon';\nimport { PepButton, IPepButtonClickEvent } from './button.model';\n\n/*\n This is a button component that support pepperi theme\n * style & state & sizes\n \n @export\n * @class PepButtonComponent\n * @implements {OnDestroy}\n /\n@Component({\n selector: 'pep-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n})\nexport class PepButtonComponent implements OnDestroy {\n /\n The button key\n \n @type {string}\n * @memberof PepButtonComponent\n /\n @Input() key: string;\n\n /\n The text on the button.\n \n @type {string}\n * @memberof PepButtonComponent\n /\n @Input() value: string;\n\n /\n The style of the button.\n \n @type {PepStyleType}\n * @memberof PepButtonComponent\n /\n @Input() styleType: PepStyleType = 'weak';\n\n /\n The style state of the button.\n \n @type {PepStyleStateType}\n * @memberof PepButtonComponent\n /\n @Input() styleStateType: PepStyleStateType = 'system';\n\n /\n The size of the button.\n \n @type {PepSizeType}\n * @memberof PepButtonComponent\n /\n @Input() sizeType: PepSizeType = 'md';\n\n /\n Class names that should be on the button element tag like classNames=\"class1 class2\"\n \n @memberof PepButtonComponent\n /\n @Input() classNames = '';\n\n /\n If the button is disable or not.\n \n @type {boolean}\n * @memberof PepButtonComponent\n /\n @Input() disabled = false;\n\n /\n The icon name to show on the button. look in (@link icon -> All icons)\n \n @type {PepIconType} See {@link PepIconType}\n * @memberof PepButtonComponent\n /\n @Input() iconName: PepIconType;\n\n /\n The icon position.\n \n @type {('start' \| 'end')}\n * @memberof PepButtonComponent\n /\n @Input() iconPosition: 'start' \| 'end' = 'end';\n\n private _visible = true;\n /\n If the button is visible or not.\n \n @memberof PepButtonComponent\n /\n @Input()\n set visible(visible: boolean) {\n if (visible !== undefined) {\n this._visible = !!visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n /\n The button click event.\n \n @type {EventEmitter<IPepButtonClickEvent>}\n * @memberof PepButtonComponent\n /\n @Output()\n buttonClick: EventEmitter<IPepButtonClickEvent> = new EventEmitter<IPepButtonClickEvent>();\n\n constructor(private renderer: Renderer2, private element: ElementRef) { }\n\n ngOnDestroy(): void {\n // if (this.buttonClick) {\n // this.buttonClick.unsubscribe();\n // }\n }\n\n /\n The button click\n /\n onButtonClicked(event: Event): void {\n const button = new PepButton({\n key: this.key,\n value: this.value,\n });\n\n const buttonClick = {\n source: button,\n event,\n };\n\n this.buttonClick.emit(buttonClick);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { PepIconModule } from '@pepperi-addons/ngx-lib/icon';\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\n\nimport { PepButtonComponent } from './button.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules\n MatCommonModule,\n MatButtonModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n ],\n exports: [PepButtonComponent],\n declarations: [PepButtonComponent],\n})\nexport class PepButtonModule {}\n","/\n * Public API Surface of ngx-lib/button\n /\nexport from './button.module';\nexport * from './button.component';\nexport * from './button.model';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["EventEmitter","Component","Renderer2","ElementRef","Input","Output","NgModule","CommonModule","MatCommonModule","MatButtonModule","MatIconModule","PepNgxLibModule","PepIconModule"],"mappings":";;;;;;;QASI,mBAAY,IAAwB;YAChC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;SAC7B;wBACJ;KAAA;;ICKD;;;;;;;;;QAyHI,4BAAoB,QAAmB,EAAU,OAAmB;YAAhD,aAAQ,GAAR,QAAQ,CAAW;YAAU,YAAO,GAAP,OAAO,CAAY;;;;;;;YArF3D,cAAS,GAAiB,MAAM,CAAC;;;;;;;YAQjC,mBAAc,GAAsB,QAAQ,CAAC;;;;;;;YAQ7C,aAAQ,GAAgB,IAAI,CAAC;;;;;;YAO7B,eAAU,GAAG,EAAE,CAAC;;;;;;;YAQhB,aAAQ,GAAG,KAAK,CAAC;;;;;;;YAgBjB,iBAAY,GAAoB,KAAK,CAAC;YAEvC,aAAQ,GAAG,IAAI,CAAC;;;;;;;YAkCxB,gBAAW,GAAuC,IAAIA,iBAAY,EAAwB,CAAC;SAElB;QA9BzE,sBACI,uCAAO;iBAgBX;gBACI,OAAO,IAAI,CAAC,QAAQ,CAAC;aACxB;;;;;;iBAnBD,UACY,OAAgB;gBACxB,IAAI,OAAO,KAAK,SAAS,EAAE;oBACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC;oBAC1B,IAAI,OAAO,EAAE;wBACT,IAAI,CAAC,QAAQ,CAAC,WAAW,CACrB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;qBACL;yBAAM;wBACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;qBACL;iBACJ;aACJ;;;WAAA;QAgBD,wCAAW,GAAX;;;;SAIC;;;;QAKD,4CAAe,GAAf,UAAgB,KAAY;YACxB,IAAM,MAAM,GAAG,IAAI,SAAS,CAAC;gBACzB,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB,CAAC,CAAC;YAEH,IAAM,WAAW,GAAG;gBAChB,MAAM,EAAE,MAAM;gBACd,KAAK,OAAA;aACR,CAAC;YAEF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACtC;;;;gBAxIJC,cAAS,SAAC;oBACP,QAAQ,EAAE,YAAY;oBACtB,o9BAAsC;;iBAEzC;;;gBAvBGC,cAAS;gBACTC,eAAU;;;sBA8BTC,UAAK;wBAQLA,UAAK;4BAQLA,UAAK;iCAQLA,UAAK;2BAQLA,UAAK;6BAOLA,UAAK;2BAQLA,UAAK;2BAQLA,UAAK;+BAQLA,UAAK;0BAQLA,UAAK;8BA2BLC,WAAM;;;;QC9GX;;;;;gBAdCC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;;wBAEZC,sBAAe;wBACfC,sBAAe;wBACfC,kBAAa;;wBAEbC,sBAAe;wBACfC,oBAAa;qBAChB;oBACD,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,YAAY,EAAE,CAAC,kBAAkB,CAAC;iBACrC;;;ICxBD;;;;ICAA;;;;;;;;;;;;;;"}

package/bundles/pepperi-addons-ngx-lib-checkbox.umd.js CHANGED Viewed

@@ -132,7 +132,7 @@
     PepCheckboxComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-checkbox',
-                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm ellipsis\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>",
+                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:inherit;display:grid}:host>*{align-self:center}"]
                 },] }

package/bundles/pepperi-addons-ngx-lib-color.umd.js CHANGED Viewed

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/checkbox'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/slider'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/dialog'), require('@pepperi-addons/ngx-lib/icon'), require('@pepperi-addons/ngx-lib/field-title'), require('@pepperi-addons/ngx-lib/textbox')) :
-    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/color', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/core', '@angular/material/button', '@angular/material/form-field', '@angular/material/checkbox', '@angular/material/dialog', '@angular/material/icon', '@angular/material/slider', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/dialog', '@pepperi-addons/ngx-lib/icon', '@pepperi-addons/ngx-lib/field-title', '@pepperi-addons/ngx-lib/textbox'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib'].color = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.core, global.ng.material.button, global.ng.material.formField, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.icon, global.ng.material.slider, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].dialog, global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']['field-title'], global['pepperi-addons']['ngx-lib'].textbox));
-}(this, (function (exports, core, common, forms, core$1, button, formField, checkbox, dialog, icon$1, slider, ngxLib, dialog$1, icon, fieldTitle, textbox) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/checkbox'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/slider'), require('@pepperi-addons/ngx-lib'), require('@pepperi-addons/ngx-lib/dialog'), require('@pepperi-addons/ngx-lib/slider'), require('@pepperi-addons/ngx-lib/icon'), require('@pepperi-addons/ngx-lib/field-title'), require('@pepperi-addons/ngx-lib/textbox')) :
+    typeof define === 'function' && define.amd ? define('@pepperi-addons/ngx-lib/color', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/material/core', '@angular/material/button', '@angular/material/form-field', '@angular/material/checkbox', '@angular/material/dialog', '@angular/material/icon', '@angular/material/slider', '@pepperi-addons/ngx-lib', '@pepperi-addons/ngx-lib/dialog', '@pepperi-addons/ngx-lib/slider', '@pepperi-addons/ngx-lib/icon', '@pepperi-addons/ngx-lib/field-title', '@pepperi-addons/ngx-lib/textbox'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib'].color = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.core, global.ng.material.button, global.ng.material.formField, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.icon, global.ng.material.slider, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].dialog, global['pepperi-addons']['ngx-lib'].slider, global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']['field-title'], global['pepperi-addons']['ngx-lib'].textbox));
+}(this, (function (exports, core, common, forms, core$1, button, formField, checkbox, dialog, icon$1, slider, ngxLib, dialog$1, slider$1, icon, fieldTitle, textbox) { 'use strict';
     var PepContrastRatioType;
     (function (PepContrastRatioType) {
@@ -17,15 +17,21 @@
             this.data = data;
             this.defaultColor = '#ccc';
             this.checkAAComplient = true;
+            this.defaultHueBackground = "linear-gradient(to right,\n        hsl(0, 100%, 50%) 0%,\n        hsl(60, 100%, 50%) 17%,\n        hsl(120, 100%, 50%) 33%,\n        hsl(180, 100%, 50%) 50%,\n        hsl(240, 100%, 50%) 67%,\n        hsl(300, 100%, 50%) 83%,\n        hsl(360, 100%, 50%) 100%)";
             this.currentHue = 100;
             this.currentHueMin = 0;
             this.currentHueMax = 360;
+            this.currentHueBackground = this.defaultHueBackground;
+            this.defaultSaturationBackground = "linear-gradient(to right,\n        hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%,\n        hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)";
             this.currentSaturation = 50;
             this.currentSaturationMin = 0;
             this.currentSaturationMax = 100;
+            this.currentSaturationBackground = this.defaultSaturationBackground;
+            this.defaultLightnessBackground = "linear-gradient(to right,\n        hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%,\n        hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n        hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 100%)";
             this.currentLightness = 50;
             this.currentLightnessMin = 0;
             this.currentLightnessMax = 100;
+            this.currentLightnessBackground = this.defaultLightnessBackground;
             this.data.type = data ? data.type : 'any';
             this.data.showAAComplient = !data
                 ? false
@@ -45,6 +51,9 @@
             if (this.data.type === 'main') {
                 this.currentLightnessMax = 10;
                 this.currentLightness = 5;
+                this.currentHueBackground = this.defaultHueBackground;
+                this.currentSaturationBackground = this.defaultSaturationBackground;
+                this.currentLightnessBackground = this.defaultLightnessBackground;
             }
             else if (this.data.type === 'success') {
                 this.currentHueMin = 70;
@@ -56,6 +65,9 @@
                 this.currentLightnessMin = 10;
                 this.currentLightnessMax = 65;
                 this.currentLightness = 50;
+                this.currentHueBackground = "linear-gradient(to right,\n                hsl(70, 100%, 50%) 0%,\n                hsl(150, 100%, 50%) 100%)";
+                this.currentSaturationBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)";
+                this.currentLightnessBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 10%) 65%)";
             }
             else if (this.data.type === 'caution') {
                 this.currentHueMin = -20;
@@ -67,6 +79,9 @@
                 this.currentLightnessMin = 25;
                 this.currentLightnessMax = 75;
                 this.currentLightness = 50;
+                this.currentHueBackground = "linear-gradient(to right,\n                hsl(340, 100%, 50%) 0%,\n                hsl(20, 100%, 50%) 100%)";
+                this.currentSaturationBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)";
+                this.currentLightnessBackground = "linear-gradient(to right,\n                hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n                hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%)";
             }
         };
         PepColorPickerComponent.prototype.setCurrentHueInCss = function () {
@@ -132,19 +147,19 @@
             this.isUserChooseAAComplientColor = adjustableColor === closestHex;
             this.complientColor = this.colorService.convertHslToStringHsl(this.colorService.hex2hsl(closestHex));
         };
-        PepColorPickerComponent.prototype.onHueChange = function (event) {
-            this.convertColorToValueString({ h: event.value });
+        PepColorPickerComponent.prototype.onHueChange = function (value) {
+            this.convertColorToValueString({ h: value });
             this.setCurrentHueInCss();
         };
-        PepColorPickerComponent.prototype.onSaturationChange = function (event) {
+        PepColorPickerComponent.prototype.onSaturationChange = function (value) {
             // this.currentSaturation = event.value;
-            this.convertColorToValueString({ s: event.value });
+            this.convertColorToValueString({ s: value });
         };
-        PepColorPickerComponent.prototype.onLightnessChange = function (event) {
+        PepColorPickerComponent.prototype.onLightnessChange = function (value) {
             // this.currentLightness = event.value;
             this.convertColorToValueString({
                 l: this.currentLightnessMax -
-                    event.value +
+                    value +
                     this.currentLightnessMin,
             });
         };
@@ -163,7 +178,7 @@
     PepColorPickerComponent.CURRENT_HUE = '--pep-color-picker-current-hue';
     PepColorPickerComponent.decorators = [
         { type: core.Component, args: [{
-                    template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <div class=\"slider-box current-hue\">\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_HUE' | translate}}</mat-label>\n                    <div [class]=\"data?.type\">\n                        <mat-slider [min]=\"currentHueMin\" [max]=\"currentHueMax\" step=\"1\" [value]=\"currentHue\"\n                            (change)=\"onHueChange($event)\"></mat-slider>\n                    </div>\n                </div>\n                <div class=\"slider-box current-saturation\">\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_SATURATION' | translate}}</mat-label>\n                    <div [class]=\"data?.type\">\n                        <mat-slider [min]=\"currentSaturationMin\" [max]=\"currentSaturationMax\" step=\"1\"\n                            [value]=\"currentSaturation\" (change)=\"onSaturationChange($event)\"></mat-slider>\n                    </div>\n                </div>\n                <div class=\"slider-box current-lightness\">\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_LIGHTNESS' | translate}}</mat-label>\n                    <div [class]=\"data?.type\">\n                        <mat-slider [min]=\"currentLightnessMin\" [max]=\"currentLightnessMax\" step=\"1\"\n                            [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                            (change)=\"onLightnessChange($event)\"></mat-slider>\n                    </div>\n                </div>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>",
+                    template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n                <!-- <div class=\"slider-box current-hue\">\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_HUE' | translate}}</mat-label>\n                    <div [class]=\"data?.type\">\n                        <mat-slider [min]=\"currentHueMin\" [max]=\"currentHueMax\" step=\"1\" [value]=\"currentHue\"\n                            (change)=\"onHueChange($event)\"></mat-slider>\n                    </div>\n                </div> \n                <div class=\"slider-box current-saturation\">\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_SATURATION' | translate}}</mat-label>\n                    <div [class]=\"data?.type\">\n                        <mat-slider [min]=\"currentSaturationMin\" [max]=\"currentSaturationMax\" step=\"1\"\n                            [value]=\"currentSaturation\" (change)=\"onSaturationChange($event)\"></mat-slider>\n                    </div>\n                </div>\n                <div class=\"slider-box current-lightness\">\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_LIGHTNESS' | translate}}</mat-label>\n                    <div [class]=\"data?.type\">\n                        <mat-slider [min]=\"currentLightnessMin\" [max]=\"currentLightnessMax\" step=\"1\"\n                            [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                            (change)=\"onLightnessChange($event)\"></mat-slider>\n                    </div>\n                </div>-->\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>",
                     styles: [".mat-slider-horizontal .mat-slider-track-fill,.mat-slider-track-background{display:none}.pep-color-picker-container ::ng-deep.mat-dialog-content,.pepperi-color-picker-container ::ng-deep.mat-dialog-content{padding:.5rem .5rem 0;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-sm,.5rem) 0}.pep-color-picker-container .color-chooser-content,.pepperi-color-picker-container .color-chooser-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:.5rem;margin-top:var(--pep-spacing-sm,.5rem)}.pep-color-picker-container .color-chooser-content .current-color,.pepperi-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:9.25rem;height:9.25rem}.pep-color-picker-container .color-chooser-content .slider-box,.pepperi-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pep-color-picker-container .color-value-content,.pepperi-color-picker-container .color-value-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:1.5rem}.pep-color-picker-container .color-value-content .color-value,.pepperi-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pep-color-picker-container .color-value-content .color-value.with-complient,.pepperi-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pep-color-picker-container .color-value-content .color-complient-container,.pepperi-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pep-color-picker-container .color-value-content .color-complient-container .color-complient,.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);height:2.5rem;height:var(--pep-form-field-height,2.5rem);width:9.25rem}.pep-color-picker-container ::ng-deep.mat-dialog-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions{display:block}.pep-color-picker-container ::ng-deep.mat-dialog-actions .color-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}"]
                 },] }
     ];
@@ -269,6 +284,7 @@
                         ngxLib.PepNgxLibModule,
                         dialog$1.PepDialogModule,
                         icon.PepIconModule,
+                        slider$1.PepSliderModule,
                         fieldTitle.PepFieldTitleModule,
                         textbox.PepTextboxModule,
                     ],