@pepperi-addons/ngx-lib 0.4.0-angular14.9 → 0.4.0

package/chips/chips.component.d.ts

@@ -0,0 +1,93 @@
+import { OnInit, EventEmitter, OnDestroy } from '@angular/core';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { TranslateService } from '@ngx-translate/core';
+import { PepStyleType } from '@pepperi-addons/ngx-lib';
+import { IPepChip, PepChipsOrientationType, PepChipsInputType, IPepChipSelection } from './chips.model';
+import { PepChipsService } from './chips.service';
+import * as i0 from "@angular/core";
+export declare class PepChipsComponent implements OnInit, OnDestroy {
+    chipsService: PepChipsService;
+    private _translate;
+    /**
+    * The chips within the chip list.
+    *
+    * @memberof PepChipsComponent
+    */
+    set chips(chips: IPepChip[]);
+    get chips(): IPepChip[];
+    /**
+    * The add chip emitter type.
+    *
+    * @type {PepChipsInputType}
+    * @memberof PepChipsComponent
+    */
+    type: PepChipsInputType;
+    /**
+    * The chip layput direction type.
+    *
+    * @type {PepChipsOrientationType}
+    * @memberof PepChipsComponent
+    */
+    orientation: PepChipsOrientationType;
+    /**
+    * The style of the button.
+    *
+    * @type {PepStyleType}
+    * @memberof PepButtonComponent
+    */
+    styleType: PepStyleType;
+    /**
+    * Whether chip multi select allowed.
+    *
+    * @memberof PepChipsComponent
+    */
+    multiSelect: boolean;
+    /**
+    * Add new chip placeholder.
+    *
+    * @memberof PepChipsComponent
+    */
+    placeholder: string;
+    /**
+     * Add new chip(s) event.
+     *
+     * @type {EventEmitter<void>}
+     * @memberof PepButtonComponent
+     */
+    fieldClick: EventEmitter<void>;
+    selectionChange: EventEmitter<IPepChipSelection>;
+    /**
+     * Selected chip(s)
+     */
+    get selected(): string | string[];
+    constructor(chipsService: PepChipsService, _translate: TranslateService);
+    ngOnInit(): void;
+    /**
+     * Adding chip(s) to current chips list
+     * @param chips Chip(s) to add
+     */
+    addChipsToList(chips: IPepChip[]): void;
+    /**
+     * On new chip added
+     * @param event Chip addition event
+     */
+    onChipAdded(event: MatChipInputEvent): void;
+    /**
+     * On chip removed
+     * @param chip Removed chip item
+     */
+    onChipRemoved(chip: IPepChip): void;
+    /**
+     * On chip selection status changed
+     * @param isSelected Whether the chip is selected
+     * @param chip Selected chip item
+     */
+    onSelectionChanged(isSelected: boolean, chip: IPepChip): void;
+    /**
+     * On Add new chip(s) clicked
+     */
+    onChipsSelectClicked(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepChipsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepChipsComponent, "pep-chips", never, { "chips": "chips"; "type": "type"; "orientation": "orientation"; "styleType": "styleType"; "multiSelect": "multiSelect"; "placeholder": "placeholder"; }, { "fieldClick": "fieldClick"; "selectionChange": "selectionChange"; }, never, never, false>;
+}

package/chips/chips.component.theme.scss

@@ -0,0 +1,58 @@
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
+
+@mixin pep-chips-states ($style: regular){       
+    @include mixins.pep-state-default($style, null, true);
+    
+    &:hover {
+        @include mixins.pep-state-hover($style, null, true);
+    }     
+    &.mat-chip-selected {                   
+        @include mixins.pep-state-active($style, null, true);
+        @if $style != strong {
+            color:functions.get-pep-color(color-text, color-main) !important;   
+        } 
+    }
+    &:focus {                
+        @include mixins.pep-state-focus($style, null, true);
+       
+    }
+    
+    @if $style == strong {
+        .pep-button {
+            @include mixins.pep-button-states(strong);
+        }
+    }
+                    
+}
+
+.pep-chips-container {
+    ::ng-deep.mat-chip-list {
+        /* override material props*/
+        .mat-chip.mat-standard-chip {
+            &::after {
+                background: unset;
+            }
+            &:focus::after {
+                opacity: unset;
+            }
+        }
+
+        .mat-chip-list-wrapper {
+            .pep-chips {               
+                &.regular {
+                    @include pep-chips-states(regular);                   
+                }
+                &.weak {
+                    @include pep-chips-states(weak);
+                }
+                &.weak-invert {
+                    @include pep-chips-states(weak-invert);
+                }
+                &.strong {
+                    @include pep-chips-states(strong);               
+                }
+            }
+        }
+    }
+}

package/chips/chips.model.d.ts

@@ -0,0 +1,13 @@
+export declare type PepChipsOrientationType = 'horizontal' | 'vertical';
+export declare type PepChipsInputType = 'input' | 'select';
+export interface IPepChip {
+    value: string;
+    disabled?: boolean;
+    selected?: boolean;
+    removable?: boolean;
+    selectable?: boolean;
+}
+export interface IPepChipSelection {
+    value: string;
+    isSelected: boolean;
+}

package/chips/chips.module.d.ts

@@ -0,0 +1,20 @@
+import { PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
+import * as i0 from "@angular/core";
+import * as i1 from "./chips.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";
+import * as i11 from "@pepperi-addons/ngx-lib/button";
+export declare class PepChipsModule {
+    private pepIconRegistry;
+    constructor(pepIconRegistry: PepIconRegistry);
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepChipsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepChipsModule, [typeof i1.PepChipsComponent], [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 i11.PepButtonModule], [typeof i1.PepChipsComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepChipsModule>;
+}

package/chips/chips.service.d.ts

@@ -0,0 +1,15 @@
+import { IPepChip } from './chips.model';
+import * as i0 from "@angular/core";
+export declare class PepChipsService {
+    private readonly _destroyer;
+    private _chips;
+    constructor();
+    get chips(): IPepChip[];
+    get selected(): string[];
+    initData(chips: IPepChip[]): void;
+    addChip(chip: IPepChip): void;
+    destroy(): void;
+    get destroyer(): import("rxjs").MonoTypeOperatorFunction<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepChipsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PepChipsService>;
+}

package/{plugin → chips}/index.d.ts

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

package/chips/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './chips.module';
+export * from './chips.component';
+export * from './chips.model';

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/model/wapi.model.d.ts

@@ -137,6 +137,7 @@ export declare class ObjectsDataRowCell {
     UIPageInfo?: any;
     Value: any;
     Visible?: boolean;
+    DigitsNumberAfterDecimalPoint?: number;
 }
 export declare class ObjectsDataRow {
     AdditionalData?: any;

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

@@ -1,10 +1,10 @@
+import { Injector, Type } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { PepSessionService } from './session.service';
 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 +17,29 @@ 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>;
+    setShellRouterData(data: {
+        addPadding?: boolean;
+        showSidebar?: boolean;
+        showHeader?: boolean;
+    }): void;
+    defineCustomElement(elementName: string, component: Type<any>, injector: Injector): void;
+    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,8 @@ interface IPepFieldBaseOptions {
     maxValue?: number;
     textColor?: string;
     visible?: boolean;
+    emptyOption?: boolean;
+    digitsNumberAfterDecimalPoint?: number;
 }
 export declare class PepFieldBase {
     value: any;
@@ -95,10 +97,13 @@ export declare class PepIndicatorsField extends PepFieldBase {
 export declare type PepTextboxFieldType = 'text' | 'link' | 'email' | 'phone' | 'duration' | 'int' | 'percentage' | 'currency' | 'real';
 interface IPepTextboxFieldOptions extends IPepFieldBaseOptions {
     type?: PepTextboxFieldType;
+    regex?: string | RegExp;
 }
 export declare class PepTextboxField extends PepFieldBase {
     controlType: string;
     type: PepTextboxFieldType;
+    regex: string | RegExp;
+    digitsNumberAfterDecimalPoint: number;
     constructor(options?: IPepTextboxFieldOptions);
     update(options: IPepTextboxFieldOptions): void;
     getValidators(): ValidatorFn[];
@@ -161,6 +166,7 @@ export declare class PepQuantitySelectorField extends PepFieldBase {
     notificationInfo: any;
     updatedDataCount: number;
     type: PepQuantitySelectorFieldType;
+    digitsNumberAfterDecimalPoint: number;
     constructor(options?: IPepQuantitySelectorFieldOptions);
     update(options: IPepQuantitySelectorFieldOptions): void;
 }
@@ -192,6 +198,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", "regex", "regexError"], 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"] }]