@pepperi-addons/ngx-lib 0.4.2-storybook.1 → 0.5.0-ng15.2

package/profile-data-views-list/profile-data-views-card/profile-data-views-card.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter, OnInit } from '@angular/core';
-import { IPepProfileDataView, IPepProfileDataViewClickEvent } from '../profile-data-views-list.model';
+import { IPepDataViewClickEvent, IPepProfileDataView, IPepProfileDataViewClickEvent } from '../profile-data-views-list.model';
 import { IPepMenuItemClickEvent, PepMenuItem } from '@pepperi-addons/ngx-lib/menu';
 import { TranslateService } from '@ngx-translate/core';
 import * as i0 from "@angular/core";
@@ -12,13 +12,14 @@ export declare class ProfileDataViewsCardComponent implements OnInit {
     isDefault: boolean;
     dataViewEditClick: EventEmitter<IPepProfileDataViewClickEvent>;
     dataViewDeleteClick: EventEmitter<IPepProfileDataViewClickEvent>;
+    dataViewImportClick: EventEmitter<IPepProfileDataViewClickEvent>;
     menuItems: Array<PepMenuItem>;
     constructor(translate: TranslateService);
     private loadMenuItems;
     ngOnInit(): void;
     onMenuItemClicked(action: IPepMenuItemClickEvent): void;
-    onDataViewEditClicked(event: IPepProfileDataViewClickEvent): void;
-    onDataViewDeleteClicked(event: IPepProfileDataViewClickEvent): void;
+    onDataViewEditClicked(event: IPepDataViewClickEvent): void;
+    onDataViewDeleteClicked(event: IPepDataViewClickEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ProfileDataViewsCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ProfileDataViewsCardComponent, "pep-profile-data-views-card", never, { "profileId": "profileId"; "title": "title"; "dataViews": "dataViews"; "configurationPerScreenSize": "configurationPerScreenSize"; "isDefault": "isDefault"; }, { "dataViewEditClick": "dataViewEditClick"; "dataViewDeleteClick": "dataViewDeleteClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProfileDataViewsCardComponent, "pep-profile-data-views-card", never, { "profileId": "profileId"; "title": "title"; "dataViews": "dataViews"; "configurationPerScreenSize": "configurationPerScreenSize"; "isDefault": "isDefault"; }, { "dataViewEditClick": "dataViewEditClick"; "dataViewDeleteClick": "dataViewDeleteClick"; "dataViewImportClick": "dataViewImportClick"; }, never, never, false, never>;
 }

package/profile-data-views-list/profile-data-views-list.component.d.ts

@@ -1,8 +1,7 @@
 import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { IPepButtonClickEvent } from '@pepperi-addons/ngx-lib/button';
 import { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';
-import { IPepProfile, IPepProfileDataViewClickEvent, IPepProfileDataViewsCard } from './profile-data-views-list.model';
+import { IPepProfile, IPepProfileDataViewClickEvent, IPepProfileDataViewSaveClickEvent, IPepProfileDataViewsCard } from './profile-data-views-list.model';
 import * as i0 from "@angular/core";
 export declare class ProfileDataViewsListComponent implements OnInit {
     private dialogService;
@@ -14,22 +13,26 @@ export declare class ProfileDataViewsListComponent implements OnInit {
     set profileDataViewsList(value: Array<IPepProfileDataViewsCard>);
     get profileDataViewsList(): Array<IPepProfileDataViewsCard>;
     configurationPerScreenSize: boolean;
-    saveNewProfileClick: EventEmitter<string>;
+    saveProfileClick: EventEmitter<IPepProfileDataViewSaveClickEvent>;
     dataViewEditClick: EventEmitter<IPepProfileDataViewClickEvent>;
     dataViewDeleteClick: EventEmitter<IPepProfileDataViewClickEvent>;
-    selectProfileTemplate: TemplateRef<any>;
+    addNewProfileTemplate: TemplateRef<any>;
+    importProfileTemplate: TemplateRef<any>;
     dialogRef: MatDialogRef<any>;
-    selectedNewProfileId: string;
+    selectedProfileId: string;
     nonExistingProfiles: Array<IPepProfile>;
-    private setNonExistingProfiles;
+    selectedCopyFromProfileId: string;
+    private setProfilesOptions;
     constructor(dialogService: PepDialogService);
     ngOnInit(): void;
-    setSelectedNewProfileId(value: string): void;
+    setSelectedProfileId(value: string): void;
+    setCopyFromProfileId(value: string): void;
     closeDialog(): void;
-    saveNewProfile(): void;
-    onAddProfileClicked(event: IPepButtonClickEvent): void;
+    saveProfile(): void;
+    onAddProfileClicked(): void;
     onDataViewEditClicked(event: IPepProfileDataViewClickEvent): void;
     onDataViewDeleteClicked(event: IPepProfileDataViewClickEvent): void;
+    onDataViewImportClicked(event: IPepProfileDataViewClickEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ProfileDataViewsListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ProfileDataViewsListComponent, "pep-profile-data-views-list", never, { "defaultProfileId": "defaultProfileId"; "availableProfiles": "availableProfiles"; "profileDataViewsList": "profileDataViewsList"; "configurationPerScreenSize": "configurationPerScreenSize"; }, { "saveNewProfileClick": "saveNewProfileClick"; "dataViewEditClick": "dataViewEditClick"; "dataViewDeleteClick": "dataViewDeleteClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProfileDataViewsListComponent, "pep-profile-data-views-list", never, { "defaultProfileId": "defaultProfileId"; "availableProfiles": "availableProfiles"; "profileDataViewsList": "profileDataViewsList"; "configurationPerScreenSize": "configurationPerScreenSize"; }, { "saveProfileClick": "saveProfileClick"; "dataViewEditClick": "dataViewEditClick"; "dataViewDeleteClick": "dataViewDeleteClick"; }, never, never, false, never>;
 }

package/profile-data-views-list/profile-data-views-list.model.d.ts

@@ -3,9 +3,17 @@ export interface IPepProfile {
     id: string;
     name: string;
 }
+export interface IPepDataViewClickEvent {
+    dataViewId: string;
+}
 export interface IPepProfileDataViewClickEvent {
+    profileId: string;
     dataViewId: string;
 }
+export interface IPepProfileDataViewSaveClickEvent {
+    profileId: string;
+    copyFromProfileId: string;
+}
 export interface IPepProfileDataView {
     dataViewId: string;
     fields?: string[];

package/quantity-selector/quantity-selector-validation.directive.d.ts

@@ -13,5 +13,5 @@ export declare class PepQuantitySelectorValidationDirective implements OnInit {
     onKeyDown(e: KeyboardEvent): void;
     validateValue(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepQuantitySelectorValidationDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PepQuantitySelectorValidationDirective, "[pepQsValidation]", never, { "allowDecimal": "allowDecimal"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PepQuantitySelectorValidationDirective, "[pepQsValidation]", never, { "allowDecimal": "allowDecimal"; }, {}, never, never, false, never>;
 }

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

@@ -1,6 +1,7 @@
 import { KeyValuePair } from '@pepperi-addons/ngx-lib';
 import { PepOperatorTypes } from './type';
 import { PepSmartFilterBaseField } from '@pepperi-addons/ngx-lib/smart-filters';
+import { IpepQueryBuilderValueType } from './operator';
 export interface IPepQueryBuilderFieldContainer {
     smart: PepSmartFilterBaseField;
     query: IPepQueryBuilderFieldType;
@@ -25,5 +26,6 @@ export interface IPepQueryItem {
     ApiName: string;
     FieldType: string;
     Operation: string;
+    ValueType: IpepQueryBuilderValueType;
     Values: any[];
 }

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

@@ -1,9 +1,12 @@
 import { IPepSmartFilterOperator } from '@pepperi-addons/ngx-lib/smart-filters';
 import { PepSmartFilterType } from '@pepperi-addons/ngx-lib/smart-filters';
+export type IpepQueryBuilderValueType = 'Static' | 'Dynamic';
 export interface IPepQueryBuilderOperator {
     legacy: string;
+    valueType: IpepQueryBuilderValueType;
     smartFilter: IPepSmartFilterOperator;
     type: PepSmartFilterType[] | null;
+    fieldType?: Array<string> | null;
 }
 /**
  * gets a smart filter operator item
@@ -11,7 +14,7 @@ export interface IPepQueryBuilderOperator {
  * @param type smart filter's type
  * @returns smart filter operator item
  */
-export declare function getSmartFilterOperator(operator: string, type: PepSmartFilterType): IPepSmartFilterOperator | null;
+export declare function getSmartFilterOperator(operator: string, type: PepSmartFilterType, valueType: IpepQueryBuilderValueType, fieldType?: any): IPepSmartFilterOperator | null;
 /**
  * gets a legacy operator value
  * @param operator smart filter operator item
@@ -19,3 +22,10 @@ export declare function getSmartFilterOperator(operator: string, type: PepSmartF
  * @returns legacy operator value
  */
 export declare function getLegacyOperator(operator: IPepSmartFilterOperator, type: PepSmartFilterType): string | null;
+/**
+ * gets a value type of the operator value
+ * @param operator smart filter operator item
+ * @param type smart filter's type
+ * @returns value type operator value
+ */
+export declare function getValueTypeOperator(operator: IPepSmartFilterOperator, type: PepSmartFilterType): IpepQueryBuilderValueType;

package/query-builder/common/services/query-structure.service.d.ts

@@ -14,6 +14,7 @@ export declare class PepQueryStructureService {
     private _variableFields;
     private _form;
     private _maxStructureDepth;
+    private _cmpRefMap;
     outputQuery$: import("rxjs").Observable<IPepQuerySection | IPepQueryItem>;
     constructor(_resolver: ComponentFactoryResolver, _outputQueryService: PepOutputQueryService, _queryBuilderService: PepQueryBuilderService);
     set maxDepth(value: number);

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/query-builder/query-builder.module.d.ts

@@ -1,3 +1,4 @@
+import { PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 import * as i0 from "@angular/core";
 import * as i1 from "./query-builder.component";
 import * as i2 from "./query-builder-section/query-builder-section.component";
@@ -7,10 +8,13 @@ import * as i5 from "@angular/forms";
 import * as i6 from "@angular/flex-layout";
 import * as i7 from "@pepperi-addons/ngx-lib/select";
 import * as i8 from "@pepperi-addons/ngx-lib/button";
-import * as i9 from "@pepperi-addons/ngx-lib/group-buttons";
-import * as i10 from "@pepperi-addons/ngx-lib/smart-filters";
+import * as i9 from "@pepperi-addons/ngx-lib/icon";
+import * as i10 from "@pepperi-addons/ngx-lib/group-buttons";
+import * as i11 from "@pepperi-addons/ngx-lib/smart-filters";
 export declare class PepQueryBuilderModule {
+    private pepIconRegistry;
+    constructor(pepIconRegistry: PepIconRegistry);
     static ɵfac: i0.ɵɵFactoryDeclaration<PepQueryBuilderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PepQueryBuilderModule, [typeof i1.PepQueryBuilderComponent, typeof i2.PepQueryBuilderSectionComponent, typeof i3.PepQueryBuilderItemComponent], [typeof i4.CommonModule, typeof i5.ReactiveFormsModule, typeof i6.FlexLayoutModule, typeof i7.PepSelectModule, typeof i8.PepButtonModule, typeof i9.PepGroupButtonsModule, typeof i10.PepSmartFiltersModule], [typeof i1.PepQueryBuilderComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepQueryBuilderModule, [typeof i1.PepQueryBuilderComponent, typeof i2.PepQueryBuilderSectionComponent, typeof i3.PepQueryBuilderItemComponent], [typeof i4.CommonModule, typeof i5.ReactiveFormsModule, typeof i6.FlexLayoutModule, typeof i7.PepSelectModule, typeof i8.PepButtonModule, typeof i9.PepIconModule, typeof i10.PepGroupButtonsModule, typeof i11.PepSmartFiltersModule], [typeof i1.PepQueryBuilderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PepQueryBuilderModule>;
 }

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

@@ -34,6 +34,7 @@ export declare class PepRichHtmlTextareaComponent implements OnInit, OnChanges,
     readonly: boolean;
     maxFieldCharacters: number;
     xAlignment: PepHorizontalAlignment;
+    sanitize: boolean;
     private _rowSpan;
     set rowSpan(value: number);
     get rowSpan(): number;
@@ -54,6 +55,8 @@ export declare class PepRichHtmlTextareaComponent implements OnInit, OnChanges,
     get toolbarOptions(): IPepRichHtmlTextareaToolbarOptions;
     set toolbarOptions(options: IPepRichHtmlTextareaToolbarOptions);
     valueChange: EventEmitter<string>;
+    editorCreated: EventEmitter<string>;
+    validationChange: EventEmitter<boolean>;
     richTextEditorDialogTemplate: TemplateRef<any>;
     quillContent: string;
     quillContentDialog: string;
@@ -75,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"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderEnlargeButton": "renderEnlargeButton"; "layoutType": "layoutType"; "inlineMode": "inlineMode"; "toolbarOptions": "toolbarOptions"; }, { "valueChange": "valueChange"; }, 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);
         }
     }
@@ -78,10 +81,10 @@ quill-editor {
                 }
                 
                 .ql-stroke {
-                    stroke: functions.get-pep-color(color-weak, color-tran-80);
+                    stroke: functions.get-pep-color(color-system-primary-base, color-tran-80);
                 }
                 .ql-fill {
-                    fill: functions.get-pep-color(color-weak, color-tran-80);
+                    fill: functions.get-pep-color(color-system-primary-base, color-tran-80);
                 }
     
                 .ql-picker:not(.ql-color-picker) {

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;
         }
     }