@pepperi-addons/ngx-lib 0.4.2-beta.3 → 0.4.2-beta.300

package/README.md

@@ -29,6 +29,41 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 2. Import '~@pepperi-addons/ngx-lib/theming' on your global style file (.scss).
 3. And @include pepperi-theme() to apply pep theme on the app.
 
+---
+
+## Quickstart (external assets + tester)
+
+Run everything with one command (external server at 5173):
+
+```bash
+npm run for-react-run-all-testers
+```
+
+This will:
+
+- Build/copy wrappers and i18n into `projects/public/*`
+- Start external static server at `http://localhost:5173` (CORS enabled)
+- Start Angular tester at `http://localhost:4200`
+
+Tester index.html loads Elements from 5173 and sets webpack public path so root-level lazy chunks (e.g., `/971.js`) load from 5173:
+
+```html
+<link rel="stylesheet" href="http://localhost:5173/assets/ngx-lib-react/elements/styles.css" />
+<script>
+  window.__webpack_public_path__ = 'http://localhost:5173/';
+  // ensures /971.js loads from 5173 rather than the Angular dev server
+  // (server also serves numeric chunks from dist/ngx-lib-elements)
+</script>
+<script type="module" src="http://localhost:5173/assets/ngx-lib-react/elements/runtime.js"></script>
+<script type="module" src="http://localhost:5173/assets/ngx-lib-react/elements/polyfills.js"></script>
+<script type="module" src="http://localhost:5173/assets/ngx-lib-react/elements/main.js"></script>
+```
+
+Troubleshooting:
+
+- If lazy chunk 404s from 4200, hard-reload with cache disabled to evict cached `main.js`.
+- Ensure `.pepperi-theme` is applied at app level so Angular Material overlays are themed.
+
 ## SVG's
 1. Add the following to the angular.json file.
 "assets": [

package/address/address.component.d.ts

@@ -13,8 +13,13 @@ export declare class PepAddressComponent implements OnChanges, OnInit, OnDestroy
     readonly: boolean;
     xAlignment: PepHorizontalAlignment;
     rowSpan: number;
-    groupFields: Array<any>;
-    form: FormGroup;
+    private _groupFields;
+    set groupFields(value: Array<any>);
+    get groupFields(): Array<any>;
+    private _formProvidedExternally;
+    private _form;
+    set form(value: FormGroup);
+    get form(): FormGroup;
     layoutType: PepLayoutType;
     private _visible;
     set visible(visible: boolean);
@@ -25,6 +30,8 @@ export declare class PepAddressComponent implements OnChanges, OnInit, OnDestroy
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
     onValueChange(value: string, key: string): void;
+    private createInternalForm;
+    private updateFormControlsState;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepAddressComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PepAddressComponent, "pep-address", never, { "key": "key"; "formattedValue": "formattedValue"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "groupFields": "groupFields"; "form": "form"; "layoutType": "layoutType"; "visible": "visible"; }, { "addressValueChange": "addressValueChange"; }, never, never, false>;
 }

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,8 +71,12 @@ 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>;
+    validationChange: EventEmitter<boolean>;
     fieldHeight: string;
     standAlone: boolean;
     dataURI: any;
@@ -80,6 +89,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"; "validationChange": "validationChange"; }, 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/carousel/carousel.component.d.ts

@@ -1,10 +1,11 @@
-import { ElementRef, Renderer2, OnDestroy, AfterViewInit, OnChanges, EventEmitter, AfterViewChecked, QueryList } from '@angular/core';
+import { ElementRef, Renderer2, OnDestroy, AfterViewInit, OnChanges, EventEmitter, AfterViewChecked, QueryList, ChangeDetectorRef } from '@angular/core';
 import { PepCarouselItemDirective } from './carousel-item.directive';
 import * as i0 from "@angular/core";
 export declare class PepCarouselComponent implements OnDestroy, AfterViewInit, OnChanges, AfterViewChecked {
     private _elementRef;
     private _renderer;
     private _document;
+    private cdRef;
     private _index;
     private _scrollbarHidden;
     private _disabled;
@@ -103,7 +104,7 @@ export declare class PepCarouselComponent implements OnDestroy, AfterViewInit, O
     set snapOffset(value: number);
     get snapDuration(): number;
     set snapDuration(value: number);
-    constructor(_elementRef: ElementRef, _renderer: Renderer2, _document: any);
+    constructor(_elementRef: ElementRef, _renderer: Renderer2, _document: any, cdRef: ChangeDetectorRef);
     ngOnChanges(): void;
     ngAfterViewInit(): void;
     ngAfterViewChecked(): void;

package/checkbox/checkbox.component.d.ts

@@ -33,6 +33,7 @@ export declare class PepCheckboxComponent implements OnInit, OnChanges, OnDestro
     set visible(visible: boolean);
     get visible(): boolean;
     valueChange: EventEmitter<boolean>;
+    validationChange: EventEmitter<boolean>;
     standAlone: boolean;
     additionalValueObject: any;
     jsonLib: JSON;
@@ -46,5 +47,5 @@ export declare class PepCheckboxComponent implements OnInit, OnChanges, OnDestro
     toggleChecked(event: Event): void;
     changeValue(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepCheckboxComponent, "pep-checkbox", never, { "key": "key"; "value": "value"; "label": "label"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "additionalValue": "additionalValue"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "visible": "visible"; }, { "valueChange": "valueChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepCheckboxComponent, "pep-checkbox", never, { "key": "key"; "value": "value"; "label": "label"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "additionalValue": "additionalValue"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "visible": "visible"; }, { "valueChange": "valueChange"; "validationChange": "validationChange"; }, never, never, false>;
 }

package/chips/chips.component.d.ts

@@ -1,12 +1,11 @@
-import { OnInit, EventEmitter, OnDestroy } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { OnInit, EventEmitter } from '@angular/core';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { TranslateService } from '@ngx-translate/core';
-import { PepHorizontalAlignment, PepLayoutType, PepStyleType } from '@pepperi-addons/ngx-lib';
+import { PepHorizontalAlignment, PepLayoutType, PepStyleType, BaseDestroyerDirective } 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 {
+export declare class PepChipsComponent extends BaseDestroyerDirective implements OnInit {
     chipsService: PepChipsService;
     private _translate;
     /**
@@ -14,7 +13,6 @@ export declare class PepChipsComponent implements OnInit, OnDestroy {
     *
     * @memberof PepChipsComponent
     */
-    form: FormGroup;
     layoutType: PepLayoutType;
     inline: boolean;
     xAlignment: PepHorizontalAlignment;
@@ -98,7 +96,6 @@ export declare class PepChipsComponent implements OnInit, OnDestroy {
      * On Add new chip(s) clicked
      */
     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/chips/chips.service.d.ts

@@ -1,15 +1,12 @@
 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/core/common/directives/base-destroyer.directive.d.ts

@@ -0,0 +1,10 @@
+import { OnDestroy } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare abstract class BaseDestroyerDirective implements OnDestroy {
+    private readonly _destroyed;
+    constructor();
+    protected getDestroyer(): any;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseDestroyerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseDestroyerDirective, never, never, {}, {}, never, never, false>;
+}

package/core/common/directives/public-api.d.ts

@@ -6,3 +6,4 @@ export * from './menu-blur.directive';
 export * from './prevent-multi-click.directive';
 export * from './print.directive';
 export * from './div-loader.directive';
+export * from './base-destroyer.directive';

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;
@@ -22,12 +23,12 @@ export declare class PepReplaceLineBreaksPipe implements PipeTransform {
     static ɵpipe: i0.ɵɵPipeDeclaration<PepReplaceLineBreaksPipe, "pepReplaceLineBreaks", false>;
 }
 export declare class PepDateFormatterPipe implements PipeTransform {
-    transform(value: Date, culture: any, showTime?: boolean): string;
+    transform(value: Date, culture: any, isDateTime?: boolean): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepDateFormatterPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<PepDateFormatterPipe, "pepDateFormatter", false>;
 }
 export declare class PepDateStringFormatterPipe implements PipeTransform {
-    transform(value: string, culture: any, showTime?: boolean): string;
+    transform(value: string, culture: any, isDateTime?: boolean): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepDateStringFormatterPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<PepDateStringFormatterPipe, "pepDateStringFormatter", false>;
 }
@@ -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/addon.service.d.ts

@@ -1,5 +1,5 @@
 import { Injector, Type } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { PepSessionService } from './session.service';
 import { PepFileService } from './file.service';
 import { PepHttpService } from '../../http/services/http.service';
@@ -15,14 +15,15 @@ export declare class PepAddonService {
     private loaderService;
     translateService: PepTranslateService;
     fileService: PepFileService;
+    private router;
     private route;
     private readonly PAGES_ADDON_UUID;
     private readonly ADDONS_DICTIONARY_ASSETS_PATH_KEY;
     private readonly ADDON_API_RELATIVE_PATH;
     private readonly ADDON_API_ASYNC_RELATIVE_PATH;
     private static _customElementsMap;
-    private get devServer();
-    constructor(sessionService: PepSessionService, httpService: PepHttpService, loaderService: PepLoaderService, translateService: PepTranslateService, fileService: PepFileService, route: ActivatedRoute);
+    get devServer(): boolean;
+    constructor(sessionService: PepSessionService, httpService: PepHttpService, loaderService: PepLoaderService, translateService: PepTranslateService, fileService: PepFileService, router: Router, route: ActivatedRoute);
     private getAddonBaseRelativePath;
     getAddonStaticFolder(addonUUID: string): string;
     setAddonStaticFolder(path: string, addonUUID: string): void;
@@ -44,7 +45,8 @@ export declare class PepAddonService {
     }): void;
     defineCustomElement(elementName: string, component: Type<any>, injector: Injector): void;
     connectInternalRouter(elementName: string): void;
+    private connectRouter;
     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 ɵfac: i0.ɵɵFactoryDeclaration<PepAddonService, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepAddonService>;
 }

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

@@ -46,6 +46,7 @@ export declare class PepColorService {
     relativeLuminance({ r, g, b }: IPepRgbColor): number;
     findClosestAccessibleColor(adjustableColor: string, otherColor: string, contrastRatio: number): string;
     convertHslToStringHsl(hsl: IPepHslColor): string;
+    lightOrDark(color: any): 'light' | 'dark';
     static ɵfac: i0.ɵɵFactoryDeclaration<PepColorService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepColorService>;
 }

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/common/services/session.service.d.ts

@@ -3,6 +3,7 @@ import * as i0 from "@angular/core";
 export declare class PepSessionService {
     private jwtHelper;
     private readonly IDP_TOKEN_KEY;
+    private readonly SESSION_TOKEN;
     private readonly PAPI_BASE_URL_KEY;
     private readonly WAPI_BASE_URL_KEY;
     constructor(jwtHelper: PepJwtHelperService);
@@ -12,6 +13,7 @@ export declare class PepSessionService {
     removeObject(key: string): void;
     getWapiBaseUrl(): string;
     getIdpToken(): string;
+    getSessionToken(): string;
     getPapiBaseUrl(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSessionService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepSessionService>;

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

@@ -9,8 +9,8 @@ export declare class PepUtilitiesService {
     private addZero;
     private isCurrencyShouldBeOnRight;
     private cutValueByFractionDigits;
-    parseDate(dateStr: string, showTime?: boolean): Date;
-    stringifyDate(date: Date, showTime?: boolean): string;
+    parseDate(dateStr: string, isDateTime?: boolean): Date;
+    stringifyDate(date: Date, isDateTime?: boolean): string;
     isValueHtml(value: string): boolean;
     isJsonString(str: string): boolean;
     getSvgElementFromString(document: any, svgContent: string): SVGElement;
@@ -21,8 +21,8 @@ export declare class PepUtilitiesService {
     /**
      * Convert a number in milliseconds to a standard duration string.
      * @param {number} value - duration in milliseconds
-     * @param {object} options - formatDuration options object
-     * @param {boolean} [options.leading=false] - add leading zero
+     * @param {object} remoteLoaderOptions - formatDuration options object
+     * @param {boolean} [remoteLoaderOptions.leading=false] - add leading zero
      * @returns string - formatted duration string
     */
     formatDuration(value: any, options?: {

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 */
@@ -184,6 +184,7 @@ export declare class PepDateField extends PepFieldBase {
     controlType: string;
     type: PepDateFieldType;
     constructor(options?: IPepDateFieldOptions);
+    getValidators(): ValidatorFn[];
 }
 export declare type PepCheckboxFieldType = 'checkbox' | 'booleanText';
 interface IPepCheckboxFieldOptions extends IPepFieldBaseOptions {
@@ -199,12 +200,14 @@ export declare type PepSelectFieldType = 'select' | 'multi';
 interface IPepSelectFieldOptions extends IPepFieldBaseOptions {
     options?: IPepOption[];
     type?: PepSelectFieldType;
+    autoSortOptions?: boolean;
 }
 export declare class PepSelectField extends PepFieldBase {
     controlType: string;
     options: IPepOption[];
     type: PepSelectFieldType;
     emptyOption: boolean;
+    autoSortOptions: boolean;
     constructor(options?: IPepSelectFieldOptions);
     update(options: IPepSelectFieldOptions): void;
 }

package/core/customization/customization.service.d.ts

@@ -35,8 +35,10 @@ export declare class PepCustomizationService {
     static COLOR_STRONG_KEY: string;
     static COLOR_REGULAR_KEY: string;
     static COLOR_WEAK_KEY: string;
+    static COLOR_TOP_LEGACY_KEY: string;
     static COLOR_TOP_HEADER_KEY: string;
     static STYLE_TOP_HEADER_KEY: string;
+    static COLOR_LOADER_KEY: string;
     static COLOR_QS_KEY: string;
     static STYLE_QS_KEY: string;
     static FONT_FAMILY_TITLE_KEY: string;
@@ -135,7 +137,9 @@ export declare class PepCustomizationService {
     getDefaultThemeCardCustomizationVariables(themeVars: any): void;
     getDefaultThemeTableCustomizationVariables(themeVars: any): void;
     getDefaultThemeQSCustomizationVariables(themeVars: any): void;
+    getDefaultThemeLoaderCustomizationVariables(themeVars: any): void;
     getDefaultThemeTopHeaderCustomizationVariables(themeVars: any): void;
+    getDefaultThemeTopLegacyCustomizationVariables(themeVars: any): void;
     getDefaultThemeVariables(): any;
     getThemeVariables(): any;
     setThemeVariables(themeVariablesToSet?: any): void;

package/date/date.component.d.ts

@@ -28,6 +28,7 @@ export declare class PepDateComponent implements OnInit, OnChanges, OnDestroy {
     textColor: string;
     xAlignment: PepHorizontalAlignment;
     rowSpan: number;
+    chooseTime: boolean;
     private _visible;
     set visible(visible: boolean);
     get visible(): boolean;
@@ -44,6 +45,7 @@ export declare class PepDateComponent implements OnInit, OnChanges, OnDestroy {
     renderSymbol: boolean;
     layoutType: PepLayoutType;
     valueChange: EventEmitter<string>;
+    validationChange: EventEmitter<boolean>;
     datetimePicker: any;
     input: ElementRef;
     standAlone: boolean;
@@ -52,7 +54,7 @@ export declare class PepDateComponent implements OnInit, OnChanges, OnDestroy {
     minDate: Date;
     maxDate: Date;
     showDatepicker: boolean;
-    showTime: boolean;
+    isDateTime: boolean;
     constructor(adapter: DateAdapter<any>, element: ElementRef, layoutService: PepLayoutService, utilitiesService: PepUtilitiesService, customizationService: PepCustomizationService, renderer: Renderer2);
     private setDefaultForm;
     ngOnInit(): void;
@@ -66,5 +68,5 @@ export declare class PepDateComponent implements OnInit, OnChanges, OnDestroy {
     onDateChange(event: MatDatetimepickerInputEvent<Moment>): void;
     cardTemplateClicked(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepDateComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepDateComponent, "pep-date", never, { "key": "key"; "value": "value"; "label": "label"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "minValue": "minValue"; "maxValue": "maxValue"; "minDateValue": "minDateValue"; "maxDateValue": "maxDateValue"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderError": "renderError"; "renderSymbol": "renderSymbol"; "layoutType": "layoutType"; }, { "valueChange": "valueChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepDateComponent, "pep-date", never, { "key": "key"; "value": "value"; "label": "label"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "chooseTime": "chooseTime"; "visible": "visible"; "minValue": "minValue"; "maxValue": "maxValue"; "minDateValue": "minDateValue"; "maxDateValue": "maxDateValue"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderError": "renderError"; "renderSymbol": "renderSymbol"; "layoutType": "layoutType"; }, { "valueChange": "valueChange"; "validationChange": "validationChange"; }, never, never, false>;
 }

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

@@ -1,11 +1,11 @@
 import { CdkDragEnd, CdkDragStart } from '@angular/cdk/drag-drop';
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { EventEmitter, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { IPepDraggableItem, PepDraggableItemPlaceholderType, PepDraggableItemsTitleType } from './draggable-items.model';
-import { PepSizeType } from '@pepperi-addons/ngx-lib';
+import { PepSizeType, BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';
 import * as i0 from "@angular/core";
-export declare class DraggableItemsComponent implements OnInit, OnDestroy {
+export declare class PepDraggableItemsComponent extends BaseDestroyerDirective implements OnInit {
     containerId: string;
     showSearch: boolean;
     title: string;
@@ -21,16 +21,13 @@ export declare class DraggableItemsComponent implements OnInit, OnDestroy {
     filteredItems$: Observable<any>;
     searchControl: FormControl<any>;
     numberItemsToShowSearch: number;
-    private readonly _destroyed;
     constructor();
     private filterItems;
     private changeCursorOnDragStart;
     private changeCursorOnDragEnd;
-    protected getDestroyer(): import("rxjs").MonoTypeOperatorFunction<unknown>;
     ngOnInit(): void;
-    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>;
 }