@pepperi-addons/ngx-lib 0.4.0-angular14.4 → 0.4.0-angular14.42

package/chip/chip.component.d.ts

@@ -0,0 +1,18 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { MatChipInputEvent } from '@angular/material/chips';
+import * as i0 from "@angular/core";
+export interface Fruit {
+    name: string;
+}
+export declare class PepChipComponent implements OnInit, OnDestroy {
+    addOnBlur: boolean;
+    readonly separatorKeysCodes: readonly [13, 188];
+    fruits: Fruit[];
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    add(event: MatChipInputEvent): void;
+    remove(fruit: Fruit): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepChipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepChipComponent, "pep-checkbox", never, {}, {}, never, never, false>;
+}

package/chip/chip.module.d.ts

@@ -0,0 +1,19 @@
+import { PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
+import * as i0 from "@angular/core";
+import * as i1 from "./chip.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/material/core";
+import * as i5 from "@angular/material/form-field";
+import * as i6 from "@angular/material/chips";
+import * as i7 from "@angular/material/icon";
+import * as i8 from "@pepperi-addons/ngx-lib";
+import * as i9 from "@pepperi-addons/ngx-lib/icon";
+import * as i10 from "@pepperi-addons/ngx-lib/field-title";
+export declare class PepChipModule {
+    private pepIconRegistry;
+    constructor(pepIconRegistry: PepIconRegistry);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepChipModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepChipModule, [typeof i1.PepChipComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.MatCommonModule, typeof i5.MatFormFieldModule, typeof i6.MatChipsModule, typeof i7.MatIconModule, typeof i8.PepNgxLibModule, typeof i9.PepIconModule, typeof i10.PepFieldTitleModule], [typeof i1.PepChipComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepChipModule>;
+}

package/chip/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@pepperi-addons/ngx-lib/chip" />
+export * from './public-api';

package/chip/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './chip.module';
+export * from './chip.component';

package/color/color-picker.component.d.ts

@@ -48,7 +48,7 @@ export declare class PepColorPickerComponent implements OnInit {
     onHueChange(value: any): void;
     onSaturationChange(value: any): void;
     onLightnessChange(value: any): void;
-    onColorValueChange(event: any): void;
+    onColorValueChange(color: any): void;
     onSave(event: any): void;
     closeDialog(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepColorPickerComponent, never>;

package/core/common/services/addon.service.d.ts

@@ -4,7 +4,6 @@ import { PepFileService } from './file.service';
 import { PepHttpService } from '../../http/services/http.service';
 import { PepLoaderService } from '../../http/services/loader.service';
 import { Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
 import { TranslateService } from '@ngx-translate/core';
 import { ITranslationResource } from 'ngx-translate-multi-http-loader';
 import { PepTranslateService } from './translate.service';
@@ -17,25 +16,23 @@ export declare class PepAddonService {
     fileService: PepFileService;
     private route;
     private readonly PAGES_ADDON_UUID;
-    private readonly ADDON_ASSETS_PATH_KEY;
     private readonly ADDONS_DICTIONARY_ASSETS_PATH_KEY;
     private readonly ADDON_API_RELATIVE_PATH;
     private readonly ADDON_API_ASYNC_RELATIVE_PATH;
     private get devServer();
     constructor(sessionService: PepSessionService, httpService: PepHttpService, loaderService: PepLoaderService, translateService: PepTranslateService, fileService: PepFileService, route: ActivatedRoute);
     private getAddonBaseRelativePath;
-    getAddonStaticFolder(subAddonUUID?: string): string;
-    setAddonStaticFolder(path: string, subAddonUUID?: string): void;
+    getAddonStaticFolder(addonUUID: string): string;
+    setAddonStaticFolder(path: string, addonUUID: string): void;
     getServerBaseUrl(addonUUID: string, fileName?: string, isAsync?: boolean, localhostPort?: number): string;
     getAddonApiCall(addonUUID: string, fileName: string, functionName: string, httpOptions?: {}, isAsync?: boolean): Observable<any>;
     postAddonApiCall(addonUUID: string, fileName: string, functionName: string, body?: {}, httpOptions?: {}, isAsync?: boolean): Observable<any>;
     fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;
-    getNgxLibTranslationResource(subAddonUUID?: string, libName?: string): ITranslationResource;
-    getAddonTranslationResource(subAddonUUID?: string): ITranslationResource;
+    getNgxLibTranslationResource(addonUUID: string, libName?: string): ITranslationResource;
+    getAddonTranslationResource(addonUUID: string): ITranslationResource;
     setDefaultTranslateLang(translate: TranslateService, urlLangParam?: string): void;
     getPagesAddonUUID(): string;
-    static createDefaultMultiTranslateLoader(http: HttpClient, fileService: PepFileService, addonService: PepAddonService, subAddonUUID?: string): import("ngx-translate-multi-http-loader").MultiTranslateHttpLoader;
-    static createMultiTranslateLoader(addonService: PepAddonService, libsName?: string[], subAddonUUID?: string): import("ngx-translate-multi-http-loader").MultiTranslateHttpLoader;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PepAddonService, never>;
+    static createMultiTranslateLoader(addonUUID: string, addonService: PepAddonService, libsName?: string[]): import("ngx-translate-multi-http-loader").MultiTranslateHttpLoader;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepAddonService, [null, null, null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepAddonService>;
 }

package/core/common/services/utilities.service.d.ts

@@ -8,15 +8,16 @@ export declare class PepUtilitiesService {
     private getDecimalSeparator;
     private parseMs;
     private addZero;
+    private isCurrencyShouldBeOnRight;
     parseDate(dateStr: string, showTime?: boolean): Date;
     stringifyDate(date: Date, showTime?: boolean): string;
     isValueHtml(value: string): boolean;
     isJsonString(str: string): boolean;
     getSvgElementFromString(document: any, svgContent: string): SVGElement;
-    formatPercent(value: any, digitsInfo?: string): string;
-    formatCurrency(value: any, currencySign?: string, digitsInfo?: string): string;
-    formatDecimal(value: any, digitsInfo?: string): string;
-    formatNumber(value: any, digitsInfo?: string): string;
+    formatPercent(value: any, minFractionDigits?: number, maxFractionDigits?: number): string;
+    formatCurrency(value: any, currencySign?: string, minFractionDigits?: number, maxFractionDigits?: number): string;
+    formatDecimal(value: any, minFractionDigits?: number, maxFractionDigits?: number): string;
+    formatNumber(value: any): string;
     /**
      * Convert a number in milliseconds to a standard duration string.
      * @param {number} value - duration in milliseconds

package/core/customization/customization.model.d.ts

@@ -44,6 +44,7 @@ interface IPepFieldBaseOptions {
     maxValue?: number;
     textColor?: string;
     visible?: boolean;
+    emptyOption?: boolean;
 }
 export declare class PepFieldBase {
     value: any;
@@ -192,6 +193,7 @@ export declare class PepSelectField extends PepFieldBase {
     controlType: string;
     options: IPepOption[];
     type: PepSelectFieldType;
+    emptyOption: boolean;
     constructor(options?: IPepSelectFieldOptions);
     update(options: IPepSelectFieldOptions): void;
 }

package/esm2020/address/address.component.mjs

@@ -75,7 +75,7 @@ export class PepAddressComponent {
     }
 }
 PepAddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddressComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PepAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepAddressComponent, selector: "pep-address", inputs: { key: "key", formattedValue: "formattedValue", label: "label", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", groupFields: "groupFields", form: "form", layoutType: "layoutType", visible: "visible" }, outputs: { addressValueChange: "addressValueChange" }, usesOnChanges: true, ngImport: i0, 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 }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</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                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>", styles: [".header{grid-column:1/span 3}.pep-address-container{padding:.875rem var(--pep-spacing-md, .75rem);border-radius:var(--pep-border-radius-md, .25rem);display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:var(--pep-spacing-md, .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}\n", ".pepperi-address-container,.pep-address-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i5.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "options", "visible", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "emptyOption", "renderTitle"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i6.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PepAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepAddressComponent, selector: "pep-address", inputs: { key: "key", formattedValue: "formattedValue", label: "label", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", groupFields: "groupFields", form: "form", layoutType: "layoutType", visible: "visible" }, outputs: { addressValueChange: "addressValueChange" }, usesOnChanges: true, ngImport: i0, 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 }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</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                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>", styles: [".header{grid-column:1/span 3}.pep-address-container{padding:.875rem var(--pep-spacing-md, .75rem);border-radius:var(--pep-border-radius-md, .25rem);display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:var(--pep-spacing-md, .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}\n", ".pepperi-address-container,.pep-address-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i5.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i6.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-address', changeDetection: ChangeDetectionStrategy.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 }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</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                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>", styles: [".header{grid-column:1/span 3}.pep-address-container{padding:.875rem var(--pep-spacing-md, .75rem);border-radius:var(--pep-border-radius-md, .25rem);display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:var(--pep-spacing-md, .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}\n", ".pepperi-address-container,.pep-address-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)}\n"] }]