@pepperi-addons/ngx-lib 0.4.2-beta.18 → 0.4.2-beta.181

package/attachment/attachment.component.d.ts

@@ -2,6 +2,11 @@ import { OnInit, OnChanges, EventEmitter, ElementRef, Renderer2, OnDestroy } fro
 import { FormGroup } from '@angular/forms';
 import { PepFileService, PepCustomizationService, PepLayoutType, PepHorizontalAlignment, IPepFieldClickEvent } from '@pepperi-addons/ngx-lib';
 import * as i0 from "@angular/core";
+/**
+ * This is the attachment component that is used to upload
+ * files and media
+ *
+ */
 export declare class PepAttachmentComponent implements OnInit, OnChanges, OnDestroy {
     private customizationService;
     private renderer;
@@ -40,7 +45,7 @@ export declare class PepAttachmentComponent implements OnInit, OnChanges, OnDest
      */
     disabled: boolean;
     /**
-     * If the attachment is readonly
+     * If the attachment is readonly. It could be with or without `src`
      *
      * @memberof PepAttachmentComponent
      */
@@ -66,6 +71,9 @@ export declare class PepAttachmentComponent implements OnInit, OnChanges, OnDest
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;
     isActive: boolean;
+    handleActions: boolean;
+    hint: string;
+    chooseFile: EventEmitter<void>;
     fileChange: EventEmitter<any>;
     elementClick: EventEmitter<IPepFieldClickEvent>;
     fieldHeight: string;
@@ -80,6 +88,7 @@ export declare class PepAttachmentComponent implements OnInit, OnChanges, OnDest
     ngOnChanges(changes: any): void;
     onFileChanged(fileData: any): void;
     onFileClicked(event: IPepFieldClickEvent): void;
+    onChooseFile(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepAttachmentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepAttachmentComponent, "pep-attachment", never, { "key": "key"; "src": "src"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "isActive": "isActive"; }, { "fileChange": "fileChange"; "elementClick": "elementClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepAttachmentComponent, "pep-attachment", never, { "key": "key"; "src": "src"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "isActive": "isActive"; "handleActions": "handleActions"; "hint": "hint"; }, { "chooseFile": "chooseFile"; "fileChange": "fileChange"; "elementClick": "elementClick"; }, never, never, false>;
 }

package/button/button.component.d.ts

@@ -22,28 +22,28 @@ export declare class PepButtonComponent implements OnDestroy {
      */
     key: string;
     /**
-     * The text on the button.
+     * The button text
      *
      * @type {string}
      * @memberof PepButtonComponent
      */
     value: string;
     /**
-     * The style of the button.
+     * The style of the button
      *
      * @type {PepStyleType}
      * @memberof PepButtonComponent
      */
     styleType: PepStyleType;
     /**
-     * The style state of the button.
+     * The color style used by the button
      *
      * @type {PepStyleStateType}
      * @memberof PepButtonComponent
      */
     styleStateType: PepStyleStateType;
     /**
-     * The size of the button.
+     * The size of the button
      *
      * @type {PepSizeType}
      * @memberof PepButtonComponent
@@ -56,21 +56,21 @@ export declare class PepButtonComponent implements OnDestroy {
      */
     classNames: string;
     /**
-     * If the button is disable or not.
+     * If the button is disable or not
      *
      * @type {boolean}
      * @memberof PepButtonComponent
      */
     disabled: boolean;
     /**
-     * The icon name to show on the button. look in (@link icon -> All icons)
+     * If you want to show an icon in the button then select an icon form the provided icon list
      *
      * @type {PepIconType} See {@link PepIconType}
      * @memberof PepButtonComponent
      */
     iconName: PepIconType;
     /**
-     * The icon position.
+     * The icon position, on the left `start` or right `end` of the text (flipped in RTL languages). Applicable only if `iconName` was selected
      *
      * @type {('start' | 'end')}
      * @memberof PepButtonComponent
@@ -78,7 +78,7 @@ export declare class PepButtonComponent implements OnDestroy {
     iconPosition: 'start' | 'end';
     private _visible;
     /**
-     * If the button is visible or not.
+     * If the button is visible or not
      *
      * @memberof PepButtonComponent
      */

package/chips/chips.component.d.ts

@@ -1,5 +1,4 @@
 import { OnInit, EventEmitter, OnDestroy } from '@angular/core';
-import { FormGroup } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { TranslateService } from '@ngx-translate/core';
 import { PepHorizontalAlignment, PepLayoutType, PepStyleType } from '@pepperi-addons/ngx-lib';
@@ -14,7 +13,6 @@ export declare class PepChipsComponent implements OnInit, OnDestroy {
     *
     * @memberof PepChipsComponent
     */
-    form: FormGroup;
     layoutType: PepLayoutType;
     inline: boolean;
     xAlignment: PepHorizontalAlignment;
@@ -100,5 +98,5 @@ export declare class PepChipsComponent implements OnInit, OnDestroy {
     onChipsSelectClicked(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepChipsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepChipsComponent, "pep-chips", never, { "form": "form"; "layoutType": "layoutType"; "inline": "inline"; "xAlignment": "xAlignment"; "renderTitle": "renderTitle"; "showTitle": "showTitle"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "classNames": "classNames"; "chips": "chips"; "type": "type"; "orientation": "orientation"; "styleType": "styleType"; "multiSelect": "multiSelect"; "placeholder": "placeholder"; }, { "fieldClick": "fieldClick"; "selectionChange": "selectionChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepChipsComponent, "pep-chips", never, { "layoutType": "layoutType"; "inline": "inline"; "xAlignment": "xAlignment"; "renderTitle": "renderTitle"; "showTitle": "showTitle"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "classNames": "classNames"; "chips": "chips"; "type": "type"; "orientation": "orientation"; "styleType": "styleType"; "multiSelect": "multiSelect"; "placeholder": "placeholder"; }, { "fieldClick": "fieldClick"; "selectionChange": "selectionChange"; }, never, never, false>;
 }

package/core/common/pipes/common-pipes.d.ts

@@ -1,5 +1,6 @@
 import { PipeTransform } from '@angular/core';
 import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';
+import { PepUtilitiesService } from '../services/utilities.service';
 import * as i0 from "@angular/core";
 export declare class PepCapitalizePipe implements PipeTransform {
     transform(value: any): any;
@@ -51,6 +52,8 @@ export declare class PepSplitUppercasePipe implements PipeTransform {
     static ɵpipe: i0.ɵɵPipeDeclaration<PepSplitUppercasePipe, "pepSplitUppercase", false>;
 }
 export declare class PepToNumberPipe implements PipeTransform {
+    private utilitiesService;
+    constructor(utilitiesService: PepUtilitiesService);
     transform(value: string): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepToNumberPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<PepToNumberPipe, "pepToNumber", false>;

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

@@ -14,9 +14,14 @@ export declare class PepFileService {
     loadStyle(path: string): Promise<any>;
     loadFontStyle(styleId: string, href: string): void;
     getFileName(filePath: string, withExtenstion?: boolean): string;
-    getFileExtension(filePath: string): string;
+    getFileExtension(filename: string): string;
     isValidUrl(url: string): boolean;
-    convertFromb64toBlob(b64Data: any, contentType?: string, sliceSize?: number): Blob;
+    convertFromb64toArrayBuffer(base64String: string): ArrayBuffer;
+    convertFromb64toBlob(base64String: any): Blob;
+    getBase64FileSize(base64String: string): number;
+    fileToBase64(file: File): Promise<unknown>;
+    isValidFileExtension(fileExtension: any, acceptedExtensions: any): boolean;
+    isValidFileSize(fileStr: any, sizeLimitMB?: number): boolean;
     getAssetsPath(assetsDomain?: string, libName?: string): string;
     getAssetsTranslationsSuffix(libName?: string): string;
     getAssetsTranslationsPath(assetsDomain?: string, libName?: string): string;

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

@@ -2,7 +2,7 @@ import { ValidatorFn } from '@angular/forms';
 /** Allowed layout options */
 export declare type PepLayoutType = 'form' | 'card' | 'table';
 /** Allowed style options */
-export declare type PepStyleType = 'weak' | 'weak-invert' | 'regular' | 'strong';
+export declare type PepStyleType = 'weak' | 'weak-invert' | 'weak-special' | 'regular' | 'strong';
 /** Allowed style state options */
 export declare type PepStyleStateType = 'system' | 'caution' | 'success';
 /** Allowed size options */

package/dialog/dialog.service.d.ts

@@ -22,6 +22,7 @@ export declare class PepDialogService {
     }, size?: PepDialogSizeType): MatDialogConfig;
     openDefaultDialog(data: PepDialogData, config?: MatDialogConfig): MatDialogRef<PepDefaultDialogComponent>;
     openDialog<T, D = any, R = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>, data?: any, config?: MatDialogConfig<D>): MatDialogRef<T, R>;
+    fixMultiDialogsPos(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepDialogService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepDialogService>;
 }

package/draggable-items/draggable-item/draggable-item.component.d.ts

@@ -1,11 +1,25 @@
-import { OnInit } from '@angular/core';
+import { EventEmitter, OnInit } from '@angular/core';
+import { PepStyleType } from '@pepperi-addons/ngx-lib';
+import { IPepMenuItemClickEvent, PepMenuItem } from '@pepperi-addons/ngx-lib/menu';
 import * as i0 from "@angular/core";
 export declare class DraggableItemComponent implements OnInit {
     title: string;
+    titlePrefix: string;
+    titleClassNames: string;
     data: any;
     disabled: boolean;
+    shadow: boolean;
+    styleType: PepStyleType;
+    toggleContent: boolean;
+    isToggleContentOpen: boolean;
+    actionsMenu: Array<PepMenuItem>;
+    menuStyleType: PepStyleType;
+    contentToggle: EventEmitter<boolean>;
+    actionsMenuItemClick: EventEmitter<IPepMenuItemClickEvent>;
     constructor();
     ngOnInit(): void;
+    onToggleContent(): void;
+    onActionsMenuItemClick(item: IPepMenuItemClickEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DraggableItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DraggableItemComponent, "pep-draggable-item", never, { "title": "title"; "data": "data"; "disabled": "disabled"; }, {}, never, ["[pep-actions]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DraggableItemComponent, "pep-draggable-item", never, { "title": "title"; "titlePrefix": "titlePrefix"; "titleClassNames": "titleClassNames"; "data": "data"; "disabled": "disabled"; "shadow": "shadow"; "styleType": "styleType"; "toggleContent": "toggleContent"; "isToggleContentOpen": "isToggleContentOpen"; "actionsMenu": "actionsMenu"; "menuStyleType": "menuStyleType"; }, { "contentToggle": "contentToggle"; "actionsMenuItemClick": "actionsMenuItemClick"; }, never, ["[pep-actions]", "[pep-toggle-content]"], false>;
 }

package/draggable-items/draggable-items.component.d.ts

@@ -5,7 +5,7 @@ import { Observable } from 'rxjs';
 import { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';
 import { PepSizeType } from '@pepperi-addons/ngx-lib';
 import * as i0 from "@angular/core";
-export declare class DraggableItemsComponent implements OnInit, OnDestroy {
+export declare class PepDraggableItemsComponent implements OnInit, OnDestroy {
     containerId: string;
     showSearch: boolean;
     title: string;
@@ -31,6 +31,6 @@ export declare class DraggableItemsComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     onDragStart(event: CdkDragStart): void;
     onDragEnd(event: CdkDragEnd): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DraggableItemsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DraggableItemsComponent, "pep-draggable-items", never, { "containerId": "containerId"; "showSearch": "showSearch"; "title": "title"; "titleType": "titleType"; "titleSizeType": "titleSizeType"; "itemPlaceholderType": "itemPlaceholderType"; "dropAreaIds": "dropAreaIds"; "items": "items"; }, { "itemDragStarted": "itemDragStarted"; "itemDragEnded": "itemDragEnded"; }, never, never, false>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepDraggableItemsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepDraggableItemsComponent, "pep-draggable-items", never, { "containerId": "containerId"; "showSearch": "showSearch"; "title": "title"; "titleType": "titleType"; "titleSizeType": "titleSizeType"; "itemPlaceholderType": "itemPlaceholderType"; "dropAreaIds": "dropAreaIds"; "items": "items"; }, { "itemDragStarted": "itemDragStarted"; "itemDragEnded": "itemDragEnded"; }, never, never, false>;
 }

package/draggable-items/draggable-items.module.d.ts

@@ -7,12 +7,13 @@ import * as i4 from "@angular/forms";
 import * as i5 from "@pepperi-addons/ngx-lib";
 import * as i6 from "@pepperi-addons/ngx-lib/button";
 import * as i7 from "@pepperi-addons/ngx-lib/icon";
-import * as i8 from "@pepperi-addons/ngx-lib/search";
-import * as i9 from "@angular/cdk/drag-drop";
+import * as i8 from "@pepperi-addons/ngx-lib/menu";
+import * as i9 from "@pepperi-addons/ngx-lib/search";
+import * as i10 from "@angular/cdk/drag-drop";
 export declare class PepDraggableItemsModule {
     private pepIconRegistry;
     constructor(pepIconRegistry: PepIconRegistry);
     static ɵfac: i0.ɵɵFactoryDeclaration<PepDraggableItemsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PepDraggableItemsModule, [typeof i1.DraggableItemsComponent, typeof i2.DraggableItemComponent], [typeof i3.CommonModule, typeof i4.ReactiveFormsModule, typeof i5.PepNgxLibModule, typeof i6.PepButtonModule, typeof i7.PepIconModule, typeof i8.PepSearchModule, typeof i9.DragDropModule], [typeof i1.DraggableItemsComponent, typeof i2.DraggableItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepDraggableItemsModule, [typeof i1.PepDraggableItemsComponent, typeof i2.DraggableItemComponent], [typeof i3.CommonModule, typeof i4.ReactiveFormsModule, typeof i5.PepNgxLibModule, typeof i6.PepButtonModule, typeof i7.PepIconModule, typeof i8.PepMenuModule, typeof i9.PepSearchModule, typeof i10.DragDropModule], [typeof i1.PepDraggableItemsComponent, typeof i2.DraggableItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PepDraggableItemsModule>;
 }

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\" [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", "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", "isInFocus"], outputs: ["valueChange", "keyup"] }, { 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", "typeaheadDebounceInterval"], outputs: ["valueChange"] }, { kind: "component", type: i6.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }], 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\" [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", "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", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i5.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange"] }, { 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\" [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"] }]