npm - @pepperi-addons/ngx-lib - Versions diffs - 0.2.38 → 0.2.42 - Mend

@pepperi-addons/ngx-lib 0.2.38 → 0.2.42

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 (80) 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 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-checkbox.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-checkbox.umd.js","sources":["../../../projects/ngx-lib/checkbox/checkbox.component.ts","../../../projects/ngx-lib/checkbox/checkbox.module.ts","../../../projects/ngx-lib/checkbox/public-api.ts","../../../projects/ngx-lib/checkbox/pepperi-addons-ngx-lib-checkbox.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n OnDestroy,\n Renderer2,\n ElementRef,\n Optional,\n OnChanges,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatCheckboxChange } from '@angular/material/checkbox';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n PepCustomizationService,\n PepLayoutType,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepCheckboxFieldType,\n PepCheckboxField,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepCheckboxComponent implements OnInit, OnChanges, OnDestroy {\n @Input() key = '';\n @Input() value: boolean = false;\n @Input() label = '';\n\n private _type: PepCheckboxFieldType = 'checkbox'; // \|\| 'booleanText'\n @Input()\n set type(value: PepCheckboxFieldType) {\n this._type = value;\n this.setAdditionalValueObject();\n }\n get type(): PepCheckboxFieldType {\n return this._type;\n }\n\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n @Input() rowSpan = 1;\n\n private _additionalValue: any = undefined;\n @Input()\n set additionalValue(value: any) {\n this._additionalValue = value;\n this.setAdditionalValueObject();\n }\n get additionalValue(): any {\n return this._additionalValue;\n }\n\n controlType = 'checkbox';\n\n @Input() form: FormGroup = null;\n @Input() isActive = false;\n @Input() showTitle = true;\n @Input() renderTitle = true;\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 valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n standAlone = false;\n\n additionalValueObject: any;\n public jsonLib = JSON;\n\n constructor(\n private renderer: Renderer2,\n private customizationService: PepCustomizationService,\n private element: ElementRef,\n private translate: TranslateService\n ) { }\n\n private setAdditionalValueObject() {\n if (this.additionalValue && this.type === 'booleanText') {\n try {\n if (typeof this.additionalValue === 'string') {\n this.additionalValueObject = JSON.parse(\n this.additionalValue\n );\n } else {\n this.additionalValueObject = this.additionalValue;\n }\n } catch {\n this.additionalValueObject = {\n CheckedText: this.translate.instant('CHECKBOX.TRUE'),\n UncheckedText: this.translate.instant('CHECKBOX.FALSE'),\n };\n }\n }\n }\n\n private setDefaultForm(): void {\n const pepField = new PepCheckboxField({\n key: this.key,\n value: this.value,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\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 }\n\n ngOnDestroy(): void {\n //\n }\n\n onMaterialChange(e: MatCheckboxChange): void {\n this.changeValue(e.checked);\n }\n\n toggleChecked(event: Event): void {\n if (!this.disabled) {\n const isChecked: boolean =\n this.value ? true : false;\n const newValue = !isChecked;\n this.value = newValue;\n this.changeValue(newValue);\n }\n }\n\n changeValue(value: any): void {\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n value\n );\n this.valueChange.emit(value);\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';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemBolt,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepCheckboxComponent } from './checkbox.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules\n MatCommonModule,\n MatFormFieldModule,\n MatCheckboxModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n ],\n exports: [PepCheckboxComponent],\n declarations: [PepCheckboxComponent],\n})\nexport class PepCheckboxModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemBolt]);\n }\n}\n","/\n Public API Surface of ngx-lib/checkbox\n /\nexport from './checkbox.module';\nexport * from './checkbox.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepCheckboxField","PepCustomizationService","Component","ChangeDetectionStrategy","Renderer2","ElementRef","TranslateService","Input","Output","pepIconSystemBolt","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatFormFieldModule","MatCheckboxModule","MatIconModule","PepNgxLibModule","PepIconModule","PepFieldTitleModule","PepIconRegistry"],"mappings":"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"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-checkbox.umd.js","sources":["../../../projects/ngx-lib/checkbox/checkbox.component.ts","../../../projects/ngx-lib/checkbox/checkbox.module.ts","../../../projects/ngx-lib/checkbox/public-api.ts","../../../projects/ngx-lib/checkbox/pepperi-addons-ngx-lib-checkbox.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n OnDestroy,\n Renderer2,\n ElementRef,\n Optional,\n OnChanges,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatCheckboxChange } from '@angular/material/checkbox';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n PepCustomizationService,\n PepLayoutType,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepCheckboxFieldType,\n PepCheckboxField,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepCheckboxComponent implements OnInit, OnChanges, OnDestroy {\n @Input() key = '';\n @Input() value: boolean = false;\n @Input() label = '';\n\n private _type: PepCheckboxFieldType = 'checkbox'; // \|\| 'booleanText'\n @Input()\n set type(value: PepCheckboxFieldType) {\n this._type = value;\n this.setAdditionalValueObject();\n }\n get type(): PepCheckboxFieldType {\n return this._type;\n }\n\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n @Input() rowSpan = 1;\n\n private _additionalValue: any = undefined;\n @Input()\n set additionalValue(value: any) {\n this._additionalValue = value;\n this.setAdditionalValueObject();\n }\n get additionalValue(): any {\n return this._additionalValue;\n }\n\n controlType = 'checkbox';\n\n @Input() form: FormGroup = null;\n @Input() isActive = false;\n @Input() showTitle = true;\n @Input() renderTitle = true;\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 valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n standAlone = false;\n\n additionalValueObject: any;\n public jsonLib = JSON;\n\n constructor(\n private renderer: Renderer2,\n private customizationService: PepCustomizationService,\n private element: ElementRef,\n private translate: TranslateService\n ) { }\n\n private setAdditionalValueObject() {\n if (this.additionalValue && this.type === 'booleanText') {\n try {\n if (typeof this.additionalValue === 'string') {\n this.additionalValueObject = JSON.parse(\n this.additionalValue\n );\n } else {\n this.additionalValueObject = this.additionalValue;\n }\n } catch {\n this.additionalValueObject = {\n CheckedText: this.translate.instant('CHECKBOX.TRUE'),\n UncheckedText: this.translate.instant('CHECKBOX.FALSE'),\n };\n }\n }\n }\n\n private setDefaultForm(): void {\n const pepField = new PepCheckboxField({\n key: this.key,\n value: this.value,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\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 }\n\n ngOnDestroy(): void {\n //\n }\n\n onMaterialChange(e: MatCheckboxChange): void {\n this.changeValue(e.checked);\n }\n\n toggleChecked(event: Event): void {\n if (!this.disabled) {\n const isChecked: boolean =\n this.value ? true : false;\n const newValue = !isChecked;\n this.value = newValue;\n this.changeValue(newValue);\n }\n }\n\n changeValue(value: any): void {\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n value\n );\n this.valueChange.emit(value);\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';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemBolt,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepCheckboxComponent } from './checkbox.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules\n MatCommonModule,\n MatFormFieldModule,\n MatCheckboxModule,\n MatIconModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n ],\n exports: [PepCheckboxComponent],\n declarations: [PepCheckboxComponent],\n})\nexport class PepCheckboxModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemBolt]);\n }\n}\n","/\n Public API Surface of ngx-lib/checkbox\n /\nexport from './checkbox.module';\nexport * from './checkbox.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepCheckboxField","PepCustomizationService","Component","ChangeDetectionStrategy","Renderer2","ElementRef","TranslateService","Input","Output","pepIconSystemBolt","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatFormFieldModule","MatCheckboxModule","MatIconModule","PepNgxLibModule","PepIconModule","PepFieldTitleModule","PepIconRegistry"],"mappings":"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"}

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

@@ -10,6 +10,7 @@
             this.mandatory = false;
             this.disabled = false;
             this.maxFieldCharacters = 0;
+            this.hint = '';
             this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
             this.showTitle = true;
             this.inputLength = 0;
@@ -19,7 +20,7 @@
     PepFieldTitleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-field-title',
-                    template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled}\" [ngStyle]=\"{'text-align': xAlignment }\">\n    <ng-container *ngIf=\"xAlignment == 'right' then rightTemplate else leftTemplate\">\n    </ng-container>\n    <ng-template #rightTemplate>\n        <ng-container *ngTemplateOutlet=\"maxFieldCharactersTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n    </ng-template>\n    <ng-template #leftTemplate>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"maxFieldCharactersTemplate\"></ng-container>\n    </ng-template>\n\n    <ng-template #requiredTemplate>\n        <mat-icon *ngIf=\"mandatory\" class=\"pep-spacing-element\">\n            <pep-icon name=\"system_must\"></pep-icon>\n        </mat-icon>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!mandatory\"></span>\n    </ng-template>\n    <ng-template #titleTemplate>\n        <mat-label *ngIf=\"showTitle\" [title]=\"label\" class=\"body-xs\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #maxFieldCharactersTemplate>\n        <span *ngIf=\"maxFieldCharacters > 0\" class=\"body-xs\">\n            &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n        </span>\n        <!-- For the grid template () -->\n        <span *ngIf=\"maxFieldCharacters === 0\"></span>\n    </ng-template>\n</div>",
+                    template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled}\" [ngStyle]=\"{'text-align': xAlignment }\">\n    <ng-container *ngIf=\"xAlignment == 'right' then rightTemplate else leftTemplate\">\n    </ng-container>\n    <ng-template #rightTemplate>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n    </ng-template>\n    <ng-template #leftTemplate>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n    </ng-template>\n\n    <ng-template #requiredTemplate>\n        <mat-icon *ngIf=\"mandatory\" class=\"pep-spacing-element\">\n            <pep-icon name=\"system_must\"></pep-icon>\n        </mat-icon>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!mandatory\"></span>\n    </ng-template>\n    <ng-template #titleTemplate>\n        <mat-label *ngIf=\"showTitle\" [title]=\"label\" class=\"body-xs\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\">\n        </ng-container>\n        <ng-template #hintTextTemplate>\n            <span class=\"body-xs\">\n                &nbsp;{{ hint }}\n            </span>\n        </ng-template>\n        <ng-template #maxCharactersTemplate>\n            <span *ngIf=\"maxFieldCharacters > 0\" class=\"body-xs\">\n                &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n            </span>\n            <!-- For the grid template () -->\n            <span *ngIf=\"maxFieldCharacters === 0\"></span>\n        </ng-template>\n    </ng-template>\n</div>",
                     styles: [":host{display:grid;width:inherit}"]
                 },] }
     ];
@@ -28,6 +29,7 @@
         mandatory: [{ type: core.Input }],
         disabled: [{ type: core.Input }],
         maxFieldCharacters: [{ type: core.Input }],
+        hint: [{ type: core.Input }],
         xAlignment: [{ type: core.Input }],
         showTitle: [{ type: core.Input }],
         inputLength: [{ type: core.Input }]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-field-title.umd.js","sources":["../../../projects/ngx-lib/field-title/field-title.component.ts","../../../projects/ngx-lib/field-title/field-title.module.ts","../../../projects/ngx-lib/field-title/public-api.ts","../../../projects/ngx-lib/field-title/pepperi-addons-ngx-lib-field-title.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport {\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-field-title',\n templateUrl: './field-title.component.html',\n styleUrls: ['./field-title.component.scss'],\n})\nexport class PepFieldTitleComponent {\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() maxFieldCharacters = 0;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n @Input() showTitle = true;\n @Input() inputLength = 0;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMust,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepFieldTitleComponent } from './field-title.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatIconModule,\n MatFormFieldModule,\n // ngx-lib modules\n PepIconModule,\n ],\n exports: [PepFieldTitleComponent],\n declarations: [PepFieldTitleComponent],\n})\nexport class PepFieldTitleModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemMust]);\n }\n}\n","/\n Public API Surface of ngx-lib/field-title\n /\nexport from './field-title.module';\nexport * from './field-title.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","Component","Input","pepIconSystemMust","NgModule","CommonModule","MatCommonModule","MatIconModule","MatFormFieldModule","PepIconModule","PepIconRegistry"],"mappings":";;;;;;;QAMA;YAMa,UAAK,GAAG,EAAE,CAAC;YACX,cAAS,GAAG,KAAK,CAAC;YAClB,aAAQ,GAAG,KAAK,CAAC;YACjB,uBAAkB,GAAG,CAAC,CAAC;YACvB,eAAU,GAA2BA,mCAA4B,CAAC;YAElE,cAAS,GAAG,IAAI,CAAC;YACjB,gBAAW,GAAG,CAAC,CAAC;SAC5B;;;;~~gBAdAC~~,cAAS,SAAC;oBACP,QAAQ,EAAE,iBAAiB;oBAC3B,~~sqDAA2C~~;;iBAE9C;;;wBAEIC,UAAK;4BACLA,UAAK;2BACLA,UAAK;qCACLA,UAAK;6BACLA,UAAK;4BAELA,UAAK;8BACLA,UAAK;;;;~~QCUN~~,6BAAoB,eAAgC;YAAhC,oBAAe,GAAf,eAAe,CAAiB;YAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAACC,sBAAiB,CAAC,CAAC,CAAC;SAC3D;;;;gBAhBJC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;;wBAEZC,sBAAe;wBACfC,oBAAa;wBACbC,4BAAkB;;wBAElBC,kBAAa;qBAChB;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;oBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;iBACzC;;;gBAlBGC,oBAAe;;;ICTnB;;;;ICAA;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-field-title.umd.js","sources":["../../../projects/ngx-lib/field-title/field-title.component.ts","../../../projects/ngx-lib/field-title/field-title.module.ts","../../../projects/ngx-lib/field-title/public-api.ts","../../../projects/ngx-lib/field-title/pepperi-addons-ngx-lib-field-title.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport {\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n selector: 'pep-field-title',\n templateUrl: './field-title.component.html',\n styleUrls: ['./field-title.component.scss'],\n})\nexport class PepFieldTitleComponent {\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() maxFieldCharacters = 0;\n @Input() hint = '';\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n @Input() showTitle = true;\n @Input() inputLength = 0;\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemMust,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepFieldTitleComponent } from './field-title.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatIconModule,\n MatFormFieldModule,\n // ngx-lib modules\n PepIconModule,\n ],\n exports: [PepFieldTitleComponent],\n declarations: [PepFieldTitleComponent],\n})\nexport class PepFieldTitleModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemMust]);\n }\n}\n","/\n Public API Surface of ngx-lib/field-title\n /\nexport from './field-title.module';\nexport * from './field-title.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","Component","Input","pepIconSystemMust","NgModule","CommonModule","MatCommonModule","MatIconModule","MatFormFieldModule","PepIconModule","PepIconRegistry"],"mappings":";;;;;;;QAMA;YAMa,UAAK,GAAG,EAAE,CAAC;YACX,cAAS,GAAG,KAAK,CAAC;YAClB,aAAQ,GAAG,KAAK,CAAC;YACjB,uBAAkB,GAAG,CAAC,CAAC;YACvB,SAAI,GAAG,EAAE,CAAC;YACV,eAAU,GAA2BA,mCAA4B,CAAC;YAElE,cAAS,GAAG,IAAI,CAAC;YACjB,gBAAW,GAAG,CAAC,CAAC;SAC5B;;;;gBAfAC,cAAS,SAAC;oBACP,QAAQ,EAAE,iBAAiB;oBAC3B,i/DAA2C;;iBAE9C;;;wBAEIC,UAAK;4BACLA,UAAK;2BACLA,UAAK;qCACLA,UAAK;uBACLA,UAAK;6BACLA,UAAK;4BAELA,UAAK;8BACLA,UAAK;;;;QCSN,6BAAoB,eAAgC;YAAhC,oBAAe,GAAf,eAAe,CAAiB;YAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAACC,sBAAiB,CAAC,CAAC,CAAC;SAC3D;;;;gBAhBJC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;;wBAEZC,sBAAe;wBACfC,oBAAa;wBACbC,4BAAkB;;wBAElBC,kBAAa;qBAChB;oBACD,OAAO,EAAE,CAAC,sBAAsB,CAAC;oBACjC,YAAY,EAAE,CAAC,sBAAsB,CAAC;iBACzC;;;gBAlBGC,oBAAe;;;ICTnB;;;;ICAA;;;;;;;;;;;;;"}

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

@@ -1737,7 +1737,7 @@
     PepFieldGeneratorComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-field-generator',
-                    template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n\n    <pep-address *ngSwitchCase=\"'address'\" [form]=\"form\" [key]=\"field.key\" [formattedValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [groupFields]=\"field.groupFields\"\n        [layoutType]=\"layoutType\" (addressValueChange)=\"onAddressValueChanged($event, field)\">\n    </pep-address>\n\n    <pep-attachment *ngSwitchCase=\"'attachment'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-attachment>\n\n    <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n        [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-checkbox>\n\n    <!-- <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date> -->\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-indicators *ngSwitchCase=\"'indicators'\" [key]=\"field.key\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-indicators>\n    <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\"\n        [referenceObjectInternalType]=\"field.referenceObjectInternalType\" [type]=\"field.type\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (valueChange)=\"onValueChanged($event, field)\">\n    </pep-internal-button>\n    <pep-internal-menu *ngSwitchCase=\"'menu'\" [key]=\"field.key\" [label]=\"field.label\" [disabled]=\"field.disabled\"\n        [xAlignment]=\"field.xAlignment\" [options]=\"field.options\" [layoutType]=\"layoutType\"\n        (elementClick)=\"onClick($event)\">\n    </pep-internal-menu>\n    <pep-internal-page *ngSwitchCase=\"'internalPage'\" [field]=\"field\" [layoutType]=\"layoutType\"\n        (childClick)=\"onChildClick($event)\" (childChange)=\"onChildChanged($event)\">\n    </pep-internal-page>\n\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>",
+                    template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n\n    <pep-address *ngSwitchCase=\"'address'\" [form]=\"form\" [key]=\"field.key\" [formattedValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [groupFields]=\"field.groupFields\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (addressValueChange)=\"onAddressValueChanged($event, field)\">\n    </pep-address>\n\n    <pep-attachment *ngSwitchCase=\"'attachment'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-attachment>\n\n    <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n        [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-checkbox>\n\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-indicators *ngSwitchCase=\"'indicators'\" [key]=\"field.key\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-indicators>\n    <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\"\n        [referenceObjectInternalType]=\"field.referenceObjectInternalType\" [type]=\"field.type\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (valueChange)=\"onValueChanged($event, field)\">\n    </pep-internal-button>\n    <pep-internal-menu *ngSwitchCase=\"'menu'\" [key]=\"field.key\" [label]=\"field.label\" [disabled]=\"field.disabled\"\n        [xAlignment]=\"field.xAlignment\" [options]=\"field.options\" [layoutType]=\"layoutType\"\n        (elementClick)=\"onClick($event)\">\n    </pep-internal-menu>\n    <pep-internal-page *ngSwitchCase=\"'internalPage'\" [field]=\"field\" [layoutType]=\"layoutType\"\n        (childClick)=\"onChildClick($event)\" (childChange)=\"onChildChanged($event)\">\n    </pep-internal-page>\n\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>",
                     encapsulation: core.ViewEncapsulation.Emulated,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{width:100%;height:100%}"]