@pepperi-addons/ngx-lib 0.4.2-scroll.7 → 0.5.0-ng15.1

package/quantity-selector/quantity-selector.component.d.ts

@@ -1,10 +1,10 @@
-import { OnInit, OnChanges, OnDestroy, EventEmitter, ElementRef, ChangeDetectorRef, Renderer2, AfterViewInit } from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, ElementRef, ChangeDetectorRef, Renderer2, AfterViewInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { PepLayoutType, PepStyleType, PepCustomizationService, PepHorizontalAlignment, IPepFieldClickEvent, PepQuantitySelectorFieldType, PepUtilitiesService } from '@pepperi-addons/ngx-lib';
+import { PepLayoutType, PepStyleType, PepCustomizationService, PepHorizontalAlignment, IPepFieldClickEvent, PepQuantitySelectorFieldType, PepUtilitiesService, BaseDestroyerDirective } from '@pepperi-addons/ngx-lib';
 import { Observable } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
-export declare class PepQuantitySelectorComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
+export declare class PepQuantitySelectorComponent extends BaseDestroyerDirective implements OnChanges, OnInit, AfterViewInit {
     private cd;
     private customizationService;
     private renderer;
@@ -53,17 +53,18 @@ export declare class PepQuantitySelectorComponent implements OnChanges, OnInit,
     renderTitle: boolean;
     layoutType: PepLayoutType;
     isActive: boolean;
-    styleType: PepStyleType;
+    private _styleType;
+    set styleType(value: PepStyleType);
+    get styleType(): PepStyleType;
     valueChange: EventEmitter<string>;
     elementClick: EventEmitter<IPepFieldClickEvent>;
+    validationChange: EventEmitter<boolean>;
     QSCont: ElementRef;
     QSInput: ElementRef;
     private _calculateFormattedValue;
     get calculateFormattedValue(): boolean;
-    private readonly _destroyed;
     private qsWidthSubject;
     lastQsContClientWidth: number;
-    showQsBtn: boolean;
     standAlone: boolean;
     private _isInFocus;
     set isInFocus(isInFocus: boolean);
@@ -81,12 +82,10 @@ export declare class PepQuantitySelectorComponent implements OnChanges, OnInit,
     private notifyDisplayValueChange;
     private changeDisplayValue;
     private updateFormFieldValue;
-    protected getDestroyer(): import("rxjs").MonoTypeOperatorFunction<unknown>;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngAfterViewChecked(): void;
     ngOnChanges(changes: any): void;
-    ngOnDestroy(): void;
     get getAdditionalValue(): string;
     getParentByClass(el: any, parentSelector: any): any;
     getSameElementInTheWantedRowByClassName(event: any, isNext?: boolean): any;
@@ -106,5 +105,5 @@ export declare class PepQuantitySelectorComponent implements OnChanges, OnInit,
     enterChildren(event: any): void;
     enterPackage(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepQuantitySelectorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepQuantitySelectorComponent, "pep-quantity-selector", never, { "key": "key"; "value": "value"; "minFractionDigits": "minFractionDigits"; "maxFractionDigits": "maxFractionDigits"; "label": "label"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "allowDecimal": "allowDecimal"; "additionalValue": "additionalValue"; "notificationInfo": "notificationInfo"; "visible": "visible"; "form": "form"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "isActive": "isActive"; "styleType": "styleType"; "isInFocus": "isInFocus"; }, { "valueChange": "valueChange"; "elementClick": "elementClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepQuantitySelectorComponent, "pep-quantity-selector", never, { "key": "key"; "value": "value"; "minFractionDigits": "minFractionDigits"; "maxFractionDigits": "maxFractionDigits"; "label": "label"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "allowDecimal": "allowDecimal"; "additionalValue": "additionalValue"; "notificationInfo": "notificationInfo"; "visible": "visible"; "form": "form"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "isActive": "isActive"; "styleType": "styleType"; "isInFocus": "isInFocus"; }, { "valueChange": "valueChange"; "elementClick": "elementClick"; "validationChange": "validationChange"; }, never, never, false, never>;
 }

package/quantity-selector/quantity-selector.component.theme.scss

@@ -14,7 +14,8 @@
 }
 
 @mixin pep-qs-states($style) {
-    .mat-form-field {
+    .mat-form-field,
+    .mat-mdc-form-field {
         @include mixins.pep-form-field-states($style, color-qs);
     }
 
@@ -24,7 +25,8 @@
     }
 
     &.caution {
-        .mat-form-field {
+        .mat-form-field,
+        .mat-mdc-form-field {
             @include mixins.pep-form-field-states($style, color-system-caution);
         }
 
@@ -37,15 +39,19 @@
 ::ng-deep {
     .pepperi-quantity-selector-container, .pep-quantity-selector-container {
         &:not(.strong) {
-            .mat-form-field {
-                .mat-input-element {
+            .mat-form-field,
+            .mat-mdc-form-field {
+                .mat-input-element,
+                .mat-mdc-input-element {
                     color: functions.get-pep-color(color-text, color-main);
                 }
             }
 
             &.zero-quantity {
-                .mat-form-field {
-                    .mat-input-element {
+                .mat-form-field,
+                .mat-mdc-form-field {
+                    .mat-input-element,
+                    .mat-mdc-input-element {
                         color: functions.get-pep-color(color-text, color-dimmed);
                     }
                 }

package/query-builder/common/model/operator.d.ts

@@ -1,6 +1,6 @@
 import { IPepSmartFilterOperator } from '@pepperi-addons/ngx-lib/smart-filters';
 import { PepSmartFilterType } from '@pepperi-addons/ngx-lib/smart-filters';
-export declare type IpepQueryBuilderValueType = 'Static' | 'Dynamic';
+export type IpepQueryBuilderValueType = 'Static' | 'Dynamic';
 export interface IPepQueryBuilderOperator {
     legacy: string;
     valueType: IpepQueryBuilderValueType;

package/query-builder/query-builder-item/query-builder-item.component.d.ts

@@ -5,10 +5,12 @@ import { IPepSmartFilterData } from '@pepperi-addons/ngx-lib/smart-filters';
 import { IPepOption } from '@pepperi-addons/ngx-lib';
 import { PepTypeConvertorService } from '../common/services/type-convertor.service';
 import { IPepQueryBuilderFieldContainer } from '../common/model/field';
+import { PepQueryStructureService } from '../common/services/query-structure.service';
 import * as i0 from "@angular/core";
 export declare class PepQueryBuilderItemComponent {
     private _fb;
     typeConvertorService: PepTypeConvertorService;
+    private queryStructureService;
     formKey: string;
     _fields: Array<IPepQueryBuilderFieldContainer>;
     _options: IPepOption[];
@@ -23,7 +25,7 @@ export declare class PepQueryBuilderItemComponent {
     filterChange: EventEmitter<any>;
     remove: EventEmitter<any>;
     form: FormGroup;
-    constructor(_fb: FormBuilder, typeConvertorService: PepTypeConvertorService);
+    constructor(_fb: FormBuilder, typeConvertorService: PepTypeConvertorService, queryStructureService: PepQueryStructureService);
     ngOnInit(): void;
     get f(): {
         [key: string]: import("@angular/forms").AbstractControl<any, any>;
@@ -37,5 +39,5 @@ export declare class PepQueryBuilderItemComponent {
     onFilterChanged(): void;
     onDeleteItemClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepQueryBuilderItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepQueryBuilderItemComponent, "pep-query-builder-item", never, { "formKey": "formKey"; "fields": "fields"; "selected": "selected"; "filter": "filter"; "parentForm": "parentForm"; "variableFields": "variableFields"; }, { "filterChange": "filterChange"; "remove": "remove"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepQueryBuilderItemComponent, "pep-query-builder-item", never, { "formKey": "formKey"; "fields": "fields"; "selected": "selected"; "filter": "filter"; "parentForm": "parentForm"; "variableFields": "variableFields"; }, { "filterChange": "filterChange"; "remove": "remove"; }, never, never, false, never>;
 }

package/query-builder/query-builder-section/query-builder-section.component.d.ts

@@ -26,5 +26,5 @@ export declare class PepQueryBuilderSectionComponent {
     onAddRuleSetClicked(): void;
     onDeleteSectionClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepQueryBuilderSectionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepQueryBuilderSectionComponent, "pep-query-builder-section", never, { "form": "form"; "depth": "depth"; "hasFields": "hasFields"; }, { "createSection": "createSection"; "createItem": "createItem"; "remove": "remove"; "operatorChange": "operatorChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepQueryBuilderSectionComponent, "pep-query-builder-section", never, { "form": "form"; "depth": "depth"; "hasFields": "hasFields"; }, { "createSection": "createSection"; "createItem": "createItem"; "remove": "remove"; "operatorChange": "operatorChange"; }, never, never, false, never>;
 }

package/query-builder/query-builder.component.d.ts

@@ -35,5 +35,5 @@ export declare class PepQueryBuilderComponent implements OnInit, OnDestroy {
     onOperatorChange(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepQueryBuilderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepQueryBuilderComponent, "pep-query-builder", never, { "query": "query"; "fields": "fields"; "variableFields": "variableFields"; "maxDepth": "maxDepth"; }, { "queryChange": "queryChange"; "formValidationChange": "formValidationChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepQueryBuilderComponent, "pep-query-builder", never, { "query": "query"; "fields": "fields"; "variableFields": "variableFields"; "maxDepth": "maxDepth"; }, { "queryChange": "queryChange"; "formValidationChange": "formValidationChange"; }, never, never, false, never>;
 }

package/remote-loader/addon-block-loader.component.d.ts

@@ -19,10 +19,12 @@ export declare class PepAddonBlockLoaderComponent implements OnInit, OnDestroy {
     private _dialogRef;
     set dialogRef(value: MatDialogRef<any>);
     get dialogRef(): MatDialogRef<any>;
+    private _remoteLoaderOptions;
+    set remoteLoaderOptions(value: PepRemoteLoaderOptions);
+    get remoteLoaderOptions(): PepRemoteLoaderOptions;
     hostEvents: EventEmitter<any>;
     blockLoad: EventEmitter<void>;
     protected inDialog: boolean;
-    protected remotePathOptions: PepRemoteLoaderOptions;
     protected loadElement: boolean;
     protected onHostEventsCallback: (event: CustomEvent) => void;
     constructor(remoteLoaderService: PepRemoteLoaderService);
@@ -32,5 +34,5 @@ export declare class PepAddonBlockLoaderComponent implements OnInit, OnDestroy {
     onHostEvents(event: any): void;
     closeDialog(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepAddonBlockLoaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepAddonBlockLoaderComponent, "pep-addon-block-loader", never, { "addonId": "addonId"; "remoteEntry": "remoteEntry"; "slugName": "slugName"; "blockType": "blockType"; "name": "name"; "hostObject": "hostObject"; "dialogRef": "dialogRef"; }, { "hostEvents": "hostEvents"; "blockLoad": "blockLoad"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepAddonBlockLoaderComponent, "pep-addon-block-loader", never, { "addonId": "addonId"; "remoteEntry": "remoteEntry"; "slugName": "slugName"; "blockType": "blockType"; "name": "name"; "hostObject": "hostObject"; "dialogRef": "dialogRef"; "remoteLoaderOptions": "remoteLoaderOptions"; }, { "hostEvents": "hostEvents"; "blockLoad": "blockLoad"; }, never, never, false, never>;
 }

package/remote-loader/remote-loader-element.component.d.ts

@@ -20,13 +20,20 @@ export declare class PepRemoteLoaderElementComponent implements AfterContentInit
     load: EventEmitter<any>;
     element: HTMLElement;
     private _elementName;
+    private _blockType;
+    private _alreadyLoaded;
     constructor(renderer: Renderer2, el: ElementRef, pepAddonService: PepAddonService, remoteLoaderService: PepRemoteLoaderService, route: ActivatedRoute);
     private populateProps;
     private setupEvents;
     private loadOptionsFromRoute;
     ngOnChanges(): void;
     ngOnDestroy(): void;
-    ngAfterContentInit(): Promise<void>;
+    /**
+     * Loads the remote JS bundle as a script tag for web component remotes.
+     * If the script is already loaded, resolves immediately.
+     */
+    private loadElementFromModule;
+    ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepRemoteLoaderElementComponent, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepRemoteLoaderElementComponent, "pep-remote-loader-element", never, { "options": "options"; "props": "props"; "events": "events"; }, { "load": "load"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepRemoteLoaderElementComponent, "pep-remote-loader-element", never, { "options": "options"; "props": "props"; "events": "events"; }, { "load": "load"; }, never, never, false, never>;
 }

package/remote-loader/remote-loader.component.d.ts

@@ -21,5 +21,5 @@ export declare class PepRemoteLoaderComponent implements OnChanges {
     private loadModule;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepRemoteLoaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepRemoteLoaderComponent, "pep-remote-loader", never, { "options": "options"; "hostObject": "hostObject"; }, { "hostEvents": "hostEvents"; "load": "load"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepRemoteLoaderComponent, "pep-remote-loader", never, { "options": "options"; "hostObject": "hostObject"; }, { "hostEvents": "hostEvents"; "load": "load"; }, never, never, false, never>;
 }

package/remote-loader/remote-loader.model.d.ts

@@ -3,12 +3,12 @@ import { ViewContainerRef } from "@angular/core";
 import { MatDialogConfig } from "@angular/material/dialog";
 import { PepDialogSizeType } from "@pepperi-addons/ngx-lib/dialog";
 import { InstalledAddon, NgComponentRelation } from "@pepperi-addons/papi-sdk";
-declare type PepRemoteLoaderData = {
+type PepRemoteLoaderData = {
     addonId?: string;
     componentName?: string;
     elementName?: string;
 };
-export declare type PepRemoteLoaderOptions = PepRemoteLoaderData & LoadRemoteModuleOptions;
+export type PepRemoteLoaderOptions = PepRemoteLoaderData & LoadRemoteModuleOptions;
 export interface IPepRemoteLoaderParamsOptions {
     name?: string;
     slugName?: string;
@@ -23,6 +23,7 @@ export interface IBlockLoaderData {
     addonPublicBaseURL: string;
 }
 export interface IAddonBlockLoaderOptions extends IPepRemoteLoaderParamsOptions {
+    remoteLoaderOptions?: PepRemoteLoaderOptions;
     container: ViewContainerRef;
     hostObject?: any;
     hostEventsCallback?: (event: any) => void;

package/remote-loader/remote-loader.service.d.ts

@@ -9,6 +9,8 @@ export declare class PepRemoteLoaderService {
     constructor(httpService: PepHttpService, sessionService: PepSessionService, addonService: PepAddonService);
     private getBlockLoaderDataUrl;
     getRemoteLoaderOptions(blockLoaderData: IBlockLoaderData, blockRemoteEntry?: string, type?: 'script' | 'module' | 'manifest'): PepRemoteLoaderOptions;
+    private getBlockLoaderDataSuccess;
+    private getBlockLoaderDataError;
     getBlockRemoteLoaderOptions(options: IPepRemoteLoaderParamsOptions): Promise<PepRemoteLoaderOptions>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepRemoteLoaderService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepRemoteLoaderService>;

package/rich-html-textarea/rich-html-textarea.component.d.ts

@@ -56,6 +56,7 @@ export declare class PepRichHtmlTextareaComponent implements OnInit, OnChanges,
     set toolbarOptions(options: IPepRichHtmlTextareaToolbarOptions);
     valueChange: EventEmitter<string>;
     editorCreated: EventEmitter<string>;
+    validationChange: EventEmitter<boolean>;
     richTextEditorDialogTemplate: TemplateRef<any>;
     quillContent: string;
     quillContentDialog: string;
@@ -77,5 +78,5 @@ export declare class PepRichHtmlTextareaComponent implements OnInit, OnChanges,
     onBlur(obj: any, inDialog: boolean): void;
     onFocus(obj: any, inDialog: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepRichHtmlTextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepRichHtmlTextareaComponent, "pep-rich-html-textarea", never, { "key": "key"; "value": "value"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "xAlignment": "xAlignment"; "sanitize": "sanitize"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderEnlargeButton": "renderEnlargeButton"; "layoutType": "layoutType"; "inlineMode": "inlineMode"; "toolbarOptions": "toolbarOptions"; }, { "valueChange": "valueChange"; "editorCreated": "editorCreated"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepRichHtmlTextareaComponent, "pep-rich-html-textarea", never, { "key": "key"; "value": "value"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "xAlignment": "xAlignment"; "sanitize": "sanitize"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderEnlargeButton": "renderEnlargeButton"; "layoutType": "layoutType"; "inlineMode": "inlineMode"; "toolbarOptions": "toolbarOptions"; }, { "valueChange": "valueChange"; "editorCreated": "editorCreated"; "validationChange": "validationChange"; }, never, never, false, never>;
 }

package/rich-html-textarea/rich-html-textarea.component.theme.scss

@@ -5,10 +5,13 @@
 
 @include textarea.pep-textarea-theme();
 
-.mat-form-field {
+.mat-form-field,
+.mat-mdc-form-field {
     // Disabled - remove the default disabled
-    &.mat-form-field-disabled {
-        ::ng-deep.mat-form-field-flex {
+    &.mat-form-field-disabled,
+    &.mat-mdc-form-field-disabled {
+        ::ng-deep.mat-form-field-flex,
+        ::ng-deep.mat-mdc-form-field-flex {
             color: functions.get-pep-color(color-text, color-main);
         }
     }

package/search/search.component.d.ts

@@ -60,6 +60,6 @@ export declare class PepSearchComponent implements OnInit, OnDestroy {
     animateSearchDone(): void;
     emitSearchClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSearchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSearchComponent, "pep-search", never, { "triggerOn": "triggerOn"; "autoCompleteTop": "autoCompleteTop"; "autoCompleteValues": "autoCompleteValues"; "shrink": "shrink"; "value": "value"; "searchControl": "searchControl"; "useAsWebComponent": "useAsWebComponent"; "sizeType": "sizeType"; }, { "search": "search"; "autocompleteChange": "autocompleteChange"; "stateChange": "stateChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSearchComponent, "pep-search", never, { "triggerOn": "triggerOn"; "autoCompleteTop": "autoCompleteTop"; "autoCompleteValues": "autoCompleteValues"; "shrink": "shrink"; "value": "value"; "searchControl": "searchControl"; "useAsWebComponent": "useAsWebComponent"; "sizeType": "sizeType"; }, { "search": "search"; "autocompleteChange": "autocompleteChange"; "stateChange": "stateChange"; }, never, never, false, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepSearchComponent>;
 }

package/search/search.model.d.ts

@@ -1,7 +1,7 @@
-export declare type PepSearchType = 'regular' | 'auto-complete';
-export declare type PepSearchTriggerType = 'keydown' | 'click';
-export declare type PepSearchStateType = 'open' | 'close';
-export declare type PepSearchShrinkType = 'small-screen' | 'always' | 'never';
+export type PepSearchType = 'regular' | 'auto-complete';
+export type PepSearchTriggerType = 'keydown' | 'click';
+export type PepSearchStateType = 'open' | 'close';
+export type PepSearchShrinkType = 'small-screen' | 'always' | 'never';
 export interface IPepSearchClickEvent {
     value: string;
 }

package/select/select.component.d.ts

@@ -25,6 +25,10 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     set placeholder(value: string);
     get placeholder(): string;
     placeholderWhenDisabled: string;
+    private _autoSortOptions;
+    set autoSortOptions(val: boolean);
+    get autoSortOptions(): boolean;
+    private _originalOptions;
     private _options;
     set options(value: Array<IPepOption>);
     get options(): Array<IPepOption>;
@@ -44,6 +48,7 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     typeaheadDebounceInterval: number;
     addValueToOptionsIfNotExist: boolean;
     valueChange: EventEmitter<string>;
+    validationChange: EventEmitter<boolean>;
     select: MatSelect;
     standAlone: boolean;
     isInEditMode: boolean;
@@ -52,6 +57,8 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     selectedValueModel: string;
     fieldFormattedValue: string;
     constructor(translate: TranslateService, customizationService: PepCustomizationService, renderer: Renderer2, element: ElementRef);
+    private setOptions;
+    private sortOptionsByValue;
     private addOptionsIfNeeded;
     private setFieldFormattedValue;
     private setDefaultForm;
@@ -60,8 +67,9 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     ngOnDestroy(): void;
     selectionChange(event: any): void;
     openedChange(event: any): void;
+    private updateFormFieldValue;
     changeValue(value: any): void;
     cardTemplateClicked(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSelectComponent, "pep-select", never, { "key": "key"; "value": "value"; "label": "label"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "placeholder": "placeholder"; "placeholderWhenDisabled": "placeholderWhenDisabled"; "options": "options"; "visible": "visible"; "emptyOption": "emptyOption"; "form": "form"; "layoutType": "layoutType"; "parentFieldKey": "parentFieldKey"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "typeaheadDebounceInterval": "typeaheadDebounceInterval"; "addValueToOptionsIfNotExist": "addValueToOptionsIfNotExist"; }, { "valueChange": "valueChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSelectComponent, "pep-select", never, { "key": "key"; "value": "value"; "label": "label"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "placeholder": "placeholder"; "placeholderWhenDisabled": "placeholderWhenDisabled"; "autoSortOptions": "autoSortOptions"; "options": "options"; "visible": "visible"; "emptyOption": "emptyOption"; "form": "form"; "layoutType": "layoutType"; "parentFieldKey": "parentFieldKey"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "typeaheadDebounceInterval": "typeaheadDebounceInterval"; "addValueToOptionsIfNotExist": "addValueToOptionsIfNotExist"; }, { "valueChange": "valueChange"; "validationChange": "validationChange"; }, never, never, false, never>;
 }

package/select/select.component.theme.scss

@@ -4,22 +4,26 @@
 // -----------------------------------------------------
 //  Override material style
 // -----------------------------------------------------
-mat-select {
+mat-select, mat-mdc-select {
     outline: none;
 }
 
 ::ng-deep {
-    .mat-select-disabled {
-        .mat-select-value {
+    .mat-select-disabled,
+    .mat-mdc-select-disabled {
+        .mat-select-value,
+        .mat-mdc-select-value {
             color: functions.get-pep-color(color-text, color-dimmed);
         }
     }
 
-    .mat-select-arrow-wrapper {
+    .mat-select-arrow-wrapper,
+    .mat-mdc-select-arrow-wrapper {
         transform: unset !important;
         vertical-align: middle; // unset;
 
-        .mat-select-arrow {
+        .mat-select-arrow,
+        .mat-mdc-select-arrow {
             border: 0;
 
             &:after {
@@ -28,8 +32,10 @@ mat-select {
         }
     }
 
-    .mat-select-panel {
-        .mat-option {
+    .mat-select-panel,
+    .mat-mdc-select-panel {
+        .mat-option,
+        .mat-mdc-option {
             background: functions.get-pep-color(color-system-primary-invert, color-base);
 
             //&.mat-active,
@@ -44,7 +50,9 @@ mat-select {
                 @include mixins.state-weak-disable();
             }
         }
-        .mat-option.mat-selected {
+        .mat-option.mat-selected,
+        .mat-mdc-option.mat-mdc-selected,
+        .mat-mdc-option.mdc-list-item--selected {
             @include mixins.state-weak-default();
             // box-shadow: functions.get-pep-shadow(shadow-xs, soft);
 
@@ -61,7 +69,7 @@ mat-select {
             }
         }
 
-        .mat-pseudo-checkbox {
+        .mat-pseudo-checkbox, .mat-mdc-pseudo-checkbox {
             @include mixins.state-regular-default(true);
 
             &:hover {
@@ -76,7 +84,9 @@ mat-select {
         }
 
         .mat-pseudo-checkbox.mat-pseudo-checkbox-checked,
-        .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
+        .mat-mdc-pseudo-checkbox.mat-mdc-pseudo-checkbox-checked,
+        .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate,
+        .mat-mdc-pseudo-checkbox.mat-mdc-pseudo-checkbox-indeterminate {
             @include mixins.state-regular-default(true);
             @include mixins.inline(functions.get-pep-color(color-system-primary, color-flat-r-10), 1px, solid, true);
 
@@ -91,7 +101,8 @@ mat-select {
             }
         }
 
-        .mat-pseudo-checkbox::after {
+        .mat-pseudo-checkbox::after,
+        .mat-mdc-pseudo-checkbox::after {
             color: functions.get-pep-color(color-text, color-main) !important;
         }
     }

package/select-panel/select-panel.component.d.ts

@@ -46,5 +46,5 @@ export declare class PepSelectPanelComponent implements OnDestroy {
     selectionChange(option: any, event: any): void;
     isChecked(option: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSelectPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSelectPanelComponent, "pep-select-panel", never, { "form": "form"; "layoutType": "layoutType"; "xAlignment": "xAlignment"; "renderTitle": "renderTitle"; "showTitle": "showTitle"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "isMultiSelect": "isMultiSelect"; "numOfCol": "numOfCol"; "value": "value"; "options": "options"; }, { "valueChange": "valueChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSelectPanelComponent, "pep-select-panel", never, { "form": "form"; "layoutType": "layoutType"; "xAlignment": "xAlignment"; "renderTitle": "renderTitle"; "showTitle": "showTitle"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "isMultiSelect": "isMultiSelect"; "numOfCol": "numOfCol"; "value": "value"; "options": "options"; }, { "valueChange": "valueChange"; }, never, never, false, never>;
 }

package/select-panel/select-panel.component.theme.scss

@@ -7,8 +7,6 @@
     //      @include mixins.pep-state-hover();
     //  }
  
- 
- 
     // &:active {
     //      @include mixins.pep-state-active();
     //  }

package/separator/separator.component.d.ts

@@ -18,5 +18,5 @@ export declare class PepSeparatorComponent implements OnInit {
     constructor(renderer: Renderer2, element: ElementRef);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSeparatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSeparatorComponent, "pep-separator", never, { "key": "key"; "label": "label"; "xAlignment": "xAlignment"; "form": "form"; "layoutType": "layoutType"; "visible": "visible"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSeparatorComponent, "pep-separator", never, { "key": "key"; "label": "label"; "xAlignment": "xAlignment"; "form": "form"; "layoutType": "layoutType"; "visible": "visible"; }, {}, never, never, false, never>;
 }

package/side-bar/side-bar.component.d.ts

@@ -13,6 +13,9 @@ export declare class PepSideBarComponent implements OnInit {
     showHeader: boolean;
     showFooter: boolean;
     showToggle: boolean;
+    private _stateType;
+    set stateType(value: PepSideBarStateType | undefined);
+    get stateType(): PepSideBarStateType | undefined;
     private _useAsWebComponent;
     private readonly _animationTime;
     state: PepSideBarStateType;
@@ -37,6 +40,6 @@ export declare class PepSideBarComponent implements OnInit {
     toggleSideWrapper(): void;
     toggleSidenav(isOpen: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSideBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSideBarComponent, "pep-side-bar", never, { "position": "position"; "ignoreResize": "ignoreResize"; "showHeader": "showHeader"; "showFooter": "showFooter"; "showToggle": "showToggle"; "useAsWebComponent": "useAsWebComponent"; }, { "stateChange": "stateChange"; }, never, ["[header-content]", "[start-content]", "*", "[end-content]", "pep-smart-filters", "[footer-content]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSideBarComponent, "pep-side-bar", never, { "position": "position"; "ignoreResize": "ignoreResize"; "showHeader": "showHeader"; "showFooter": "showFooter"; "showToggle": "showToggle"; "stateType": "stateType"; "useAsWebComponent": "useAsWebComponent"; }, { "stateChange": "stateChange"; }, never, ["[header-content]", "[start-content]", "*", "[end-content]", "pep-smart-filters", "[footer-content]"], false, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepSideBarComponent>;
 }

package/side-bar/side-bar.model.d.ts

@@ -1,4 +1,4 @@
-export declare type PepSideBarStateType = 'open' | 'close';
+export type PepSideBarStateType = 'open' | 'close';
 export interface IPepSideBarStateChangeEvent {
     state: PepSideBarStateType;
 }

package/signature/signature-dialog.component.d.ts

@@ -24,6 +24,6 @@ export declare class PepSignatureDialogComponent implements OnInit, AfterViewIni
     saveSignModal(event: any): void;
     closeDialog(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSignatureDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSignatureDialogComponent, "ng-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSignatureDialogComponent, "ng-component", never, {}, {}, never, never, false, never>;
 }
 export {};

package/signature/signature.component.d.ts

@@ -37,6 +37,7 @@ export declare class PepSignatureComponent implements OnInit, OnChanges, OnDestr
     chooseFile: EventEmitter<void>;
     fileChange: EventEmitter<any>;
     elementClick: EventEmitter<IPepFieldClickEvent>;
+    validationChange: EventEmitter<boolean>;
     dialogRef: MatDialogRef<any>;
     fieldHeight: string;
     standAlone: boolean;
@@ -55,5 +56,5 @@ export declare class PepSignatureComponent implements OnInit, OnChanges, OnDestr
     changeValue(fileData: any): void;
     onKeyPress_OpenSignModal(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSignatureComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSignatureComponent, "pep-signature", never, { "key": "key"; "src": "src"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "signatureURL": "signatureURL"; "visible": "visible"; "form": "form"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "isActive": "isActive"; "handleActions": "handleActions"; }, { "chooseFile": "chooseFile"; "fileChange": "fileChange"; "elementClick": "elementClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSignatureComponent, "pep-signature", never, { "key": "key"; "src": "src"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "signatureURL": "signatureURL"; "visible": "visible"; "form": "form"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "isActive": "isActive"; "handleActions": "handleActions"; }, { "chooseFile": "chooseFile"; "fileChange": "fileChange"; "elementClick": "elementClick"; "validationChange": "validationChange"; }, never, never, false, never>;
 }

package/size-detector/size-detector.component.d.ts

@@ -24,6 +24,6 @@ export declare class PepSizeDetectorComponent implements AfterViewInit {
     private exportFunctionsOnHostElement;
     getCurrentSize(): IPepSizeDetectorItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSizeDetectorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSizeDetectorComponent, "pep-size-detector", never, { "showScreenSize": "showScreenSize"; "useAsWebComponent": "useAsWebComponent"; }, { "sizeChange": "sizeChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSizeDetectorComponent, "pep-size-detector", never, { "showScreenSize": "showScreenSize"; "useAsWebComponent": "useAsWebComponent"; }, { "sizeChange": "sizeChange"; }, never, never, false, never>;
 }
 export {};

package/skeleton-loader/skeleton-loader.component.d.ts

@@ -1,6 +1,6 @@
 import { MatDialogRef } from '@angular/material/dialog';
 import * as i0 from "@angular/core";
-export declare type PepSkeletonSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'max';
+export type PepSkeletonSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'max';
 interface IPepSkeletonLoaderDialogData {
     rowHeightType: PepSkeletonSizeType;
     rowsNumber: number;
@@ -15,6 +15,6 @@ export declare class PepSkeletonLoaderComponent {
     constructor(dialogRef: MatDialogRef<PepSkeletonLoaderComponent>, data: IPepSkeletonLoaderDialogData);
     counter(i: number): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSkeletonLoaderComponent, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSkeletonLoaderComponent, "pep-skeleton-loader", never, { "rowHeightType": "rowHeightType"; "rowsNumber": "rowsNumber"; "lastRowOffset": "lastRowOffset"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSkeletonLoaderComponent, "pep-skeleton-loader", never, { "rowHeightType": "rowHeightType"; "rowsNumber": "rowsNumber"; "lastRowOffset": "lastRowOffset"; }, {}, never, never, false, never>;
 }
 export {};

package/slider/slider.component.d.ts

@@ -35,5 +35,5 @@ export declare class PepSliderComponent implements OnInit {
     onValueChange(event: any): void;
     onInputChange(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSliderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSliderComponent, "pep-slider", never, { "label": "label"; "disabled": "disabled"; "hint": "hint"; "background": "background"; "step": "step"; "minValue": "minValue"; "maxValue": "maxValue"; "value": "value"; }, { "valueChange": "valueChange"; "inputChange": "inputChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepSliderComponent, "pep-slider", never, { "label": "label"; "disabled": "disabled"; "hint": "hint"; "background": "background"; "step": "step"; "minValue": "minValue"; "maxValue": "maxValue"; "value": "value"; }, { "valueChange": "valueChange"; "inputChange": "inputChange"; }, never, never, false, never>;
 }

package/slider/slider.component.theme.scss

@@ -5,14 +5,21 @@
     ::ng-deep.mat-slider {
         background: functions.get-pep-color(color-system-primary, color-tran-30);
 
-        &.mat-slider-horizontal {
+        &.mat-slider-disabled,
+        &.mdc-slider--disabled {
+            opacity: 0.5;
+        }
+
+        &.mat-slider-horizontal,
+        &.mdc-slider--horizontal {
             height: 1rem;
             width: 100%;
             padding: 0.5rem 0.25rem;
             border-radius: variables.$border-radius-lg;
         }
 
-        .mat-slider-wrapper {
+        .mat-slider-wrapper,
+        .mdc-slider {
             $wrapperHeight: 0.375rem;
             height: $wrapperHeight;
             position: relative;
@@ -21,7 +28,8 @@
             right: unset;
             border-radius: variables.$border-radius-md;
 
-            .mat-slider-track-wrapper {
+            .mat-slider-track-wrapper,
+            .mdc-slider__track {
                 display: none;
             }
 
@@ -29,11 +37,13 @@
             //     // Not in use.
             // }
 
-            .mat-slider-thumb-container {
+            .mat-slider-thumb-container,
+            .mdc-slider__thumb {
                 width: 94%;
                 left: 3%;
 
-                .mat-slider-thumb {
+                .mat-slider-thumb,
+                .mdc-slider__thumb-knob {
                     // position: absolute;
                     $sliderSize: 18px;
                     width: $sliderSize;

package/smart-filters/boolean-filter/boolean-filter.component.d.ts

@@ -13,6 +13,8 @@ export declare class PepBooleanFilterComponent extends BaseFilterComponent imple
         GreaterThanVariable: IPepSmartFilterOperator;
         DateRangeVariable: IPepSmartFilterOperator;
         InVariable: IPepSmartFilterOperator;
+        IsEmpty: IPepSmartFilterOperator;
+        IsNotEmpty: IPepSmartFilterOperator;
     };
     chooseTypeOptions: Array<IPepOption>;
     operatorWidth: string;
@@ -25,5 +27,5 @@ export declare class PepBooleanFilterComponent extends BaseFilterComponent imple
     onOperatorChanged(value: string): void;
     onValueChanged(value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepBooleanFilterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepBooleanFilterComponent, "pep-boolean-filter", never, { "options": "options"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepBooleanFilterComponent, "pep-boolean-filter", never, { "options": "options"; }, {}, never, never, false, never>;
 }