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

package/field-title/field-title.component.d.ts

@@ -9,6 +9,7 @@ export declare class PepFieldTitleComponent {
     xAlignment: PepHorizontalAlignment;
     showTitle: boolean;
     inputLength: number;
+    fontBodyType: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     static ɵfac: i0.ɵɵFactoryDeclaration<PepFieldTitleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepFieldTitleComponent, "pep-field-title", never, { "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "maxFieldCharacters": "maxFieldCharacters"; "hint": "hint"; "xAlignment": "xAlignment"; "showTitle": "showTitle"; "inputLength": "inputLength"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepFieldTitleComponent, "pep-field-title", never, { "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "maxFieldCharacters": "maxFieldCharacters"; "hint": "hint"; "xAlignment": "xAlignment"; "showTitle": "showTitle"; "inputLength": "inputLength"; "fontBodyType": "fontBodyType"; }, {}, never, never, false>;
 }

package/form/field-generator.component.d.ts

@@ -23,7 +23,6 @@ export declare class PepFieldGeneratorComponent implements OnChanges, OnDestroy
     get isValid(): boolean;
     get isTouched(): boolean;
     get isDirty(): boolean;
-    ngOnDestroy(): void;
     onFileChanged(fileData: any, field: PepFieldBase): void;
     onAddressValueChanged(valueChange: IPepFieldValueChangeEvent, field: PepFieldBase): void;
     onValueChanged(value: any, field: PepFieldBase): void;
@@ -34,6 +33,7 @@ export declare class PepFieldGeneratorComponent implements OnChanges, OnDestroy
     onFormValueChanged(event: IPepFormFieldValueChangeEvent): void;
     onFormFieldClick(event: IPepFormFieldClickEvent): void;
     ngOnChanges(changes: any): void;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepFieldGeneratorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PepFieldGeneratorComponent, "pep-field-generator", never, { "field": "field"; "isActive": "isActive"; "uid": "uid"; "form": "form"; "layoutType": "layoutType"; "showTitle": "showTitle"; "checkForChanges": "checkForChanges"; }, { "valueChange": "valueChange"; "formValidationChange": "formValidationChange"; "elementClick": "elementClick"; "internalFormFieldChange": "internalFormFieldChange"; "internalFormFieldClick": "internalFormFieldClick"; "formValueChange": "formValueChange"; "formFieldClick": "formFieldClick"; }, never, never, false>;
 }

package/group-buttons/group-buttons.component.d.ts

@@ -12,6 +12,7 @@ export declare class PepGroupButtonsComponent implements OnDestroy {
     sizeType: PepSizeType;
     buttons: Array<PepButton>;
     buttonsDisabled: boolean;
+    supportUnselect: boolean;
     selectedButtonKey: string;
     stretch: boolean;
     buttonClick: EventEmitter<IPepButtonClickEvent>;
@@ -19,5 +20,5 @@ export declare class PepGroupButtonsComponent implements OnDestroy {
     ngOnDestroy(): void;
     onButtonClicked(event: Event, button: PepButton): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepGroupButtonsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepGroupButtonsComponent, "pep-group-buttons", never, { "viewType": "viewType"; "styleType": "styleType"; "sizeType": "sizeType"; "buttons": "buttons"; "buttonsDisabled": "buttonsDisabled"; "selectedButtonKey": "selectedButtonKey"; "stretch": "stretch"; }, { "buttonClick": "buttonClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepGroupButtonsComponent, "pep-group-buttons", never, { "viewType": "viewType"; "styleType": "styleType"; "sizeType": "sizeType"; "buttons": "buttons"; "buttonsDisabled": "buttonsDisabled"; "supportUnselect": "supportUnselect"; "selectedButtonKey": "selectedButtonKey"; "stretch": "stretch"; }, { "buttonClick": "buttonClick"; }, never, never, false>;
 }

package/icon/icon-generated-all.model.d.ts

@@ -37,11 +37,15 @@ export declare const allIcons: {
     shopping_paper: string;
     system_attach: string;
     system_avatar: string;
+    system_bell_on: string;
+    system_bell: string;
     system_bin: string;
     system_bolt: string;
+    system_boolean: string;
     system_chat: string;
     system_circle: string;
     system_close: string;
+    system_copy: string;
     system_doc: string;
     system_door: string;
     system_dot_ellipsis: string;
@@ -73,6 +77,7 @@ export declare const allIcons: {
     system_print: string;
     system_processing: string;
     system_question: string;
+    system_radio_btn: string;
     system_rotate_device: string;
     system_search: string;
     system_select: string;
@@ -86,6 +91,8 @@ export declare const allIcons: {
     text_align_center: string;
     text_align_left: string;
     text_align_right: string;
+    text_long_text: string;
+    text_short_text: string;
     time_cal: string;
     time_datetime: string;
     time_duration: string;

package/icon/icon-generated.model.d.ts

@@ -150,6 +150,14 @@ export declare const pepIconSystemAvatar: {
     name: 'system_avatar';
     data: string;
 };
+export declare const pepIconSystemBellOn: {
+    name: 'system_bell_on';
+    data: string;
+};
+export declare const pepIconSystemBell: {
+    name: 'system_bell';
+    data: string;
+};
 export declare const pepIconSystemBin: {
     name: 'system_bin';
     data: string;
@@ -158,6 +166,10 @@ export declare const pepIconSystemBolt: {
     name: 'system_bolt';
     data: string;
 };
+export declare const pepIconSystemBoolean: {
+    name: 'system_boolean';
+    data: string;
+};
 export declare const pepIconSystemChat: {
     name: 'system_chat';
     data: string;
@@ -170,6 +182,10 @@ export declare const pepIconSystemClose: {
     name: 'system_close';
     data: string;
 };
+export declare const pepIconSystemCopy: {
+    name: 'system_copy';
+    data: string;
+};
 export declare const pepIconSystemDoc: {
     name: 'system_doc';
     data: string;
@@ -294,6 +310,10 @@ export declare const pepIconSystemQuestion: {
     name: 'system_question';
     data: string;
 };
+export declare const pepIconSystemRadioBtn: {
+    name: 'system_radio_btn';
+    data: string;
+};
 export declare const pepIconSystemRotateDevice: {
     name: 'system_rotate_device';
     data: string;
@@ -346,6 +366,14 @@ export declare const pepIconTextAlignRight: {
     name: 'text_align_right';
     data: string;
 };
+export declare const pepIconTextLongText: {
+    name: 'text_long_text';
+    data: string;
+};
+export declare const pepIconTextShortText: {
+    name: 'text_short_text';
+    data: string;
+};
 export declare const pepIconTimeCal: {
     name: 'time_cal';
     data: string;
@@ -386,7 +414,7 @@ export declare const pepIconViewTable: {
     name: 'view_table';
     data: string;
 };
-export declare type PepIconType = 'arrow_back_left' | 'arrow_back_right' | 'arrow_back' | 'arrow_down_alt' | 'arrow_down' | 'arrow_either' | 'arrow_left_alt' | 'arrow_left' | 'arrow_right_alt' | 'arrow_right' | 'arrow_two_ways_hor_l' | 'arrow_two_ways_hor_r' | 'arrow_two_ways_ver_b' | 'arrow_two_ways_ver_t' | 'arrow_up_alt' | 'arrow_up' | 'barnd_pepperi' | 'device_desktop' | 'device_mobile' | 'device_responsive' | 'device_tablet' | 'indicator_dot_placeholder' | 'misc_excel' | 'no_image_2' | 'no_image' | 'number_coins' | 'number_decimal' | 'number_dollar' | 'number_euro' | 'number_minus' | 'number_number' | 'number_percent' | 'number_plus' | 'ripples_transparent' | 'shopping_cart' | 'shopping_paper' | 'system_attach' | 'system_avatar' | 'system_bin' | 'system_bolt' | 'system_chat' | 'system_circle' | 'system_close' | 'system_doc' | 'system_door' | 'system_dot_ellipsis' | 'system_edit' | 'system_education' | 'system_email' | 'system_file_download' | 'system_file_upload_cloud' | 'system_file_upload' | 'system_filter_2' | 'system_filter' | 'system_folder' | 'system_full_screen' | 'system_heart' | 'system_home' | 'system_info' | 'system_inventory' | 'system_link' | 'system_map' | 'system_menu_dots' | 'system_menu' | 'system_move' | 'system_must' | 'system_off_line' | 'system_ok' | 'system_pause' | 'system_phone' | 'system_play' | 'system_print' | 'system_processing' | 'system_question' | 'system_rotate_device' | 'system_search' | 'system_select' | 'system_settings' | 'system_signature' | 'system_spinner' | 'system_support' | 'system_texterea' | 'system_tool' | 'system_view' | 'text_align_center' | 'text_align_left' | 'text_align_right' | 'time_cal' | 'time_datetime' | 'time_duration' | 'time_time' | 'view_card_lg' | 'view_card_md' | 'view_card_sm' | 'view_line' | 'view_matrix' | 'view_table';
+export declare type PepIconType = 'arrow_back_left' | 'arrow_back_right' | 'arrow_back' | 'arrow_down_alt' | 'arrow_down' | 'arrow_either' | 'arrow_left_alt' | 'arrow_left' | 'arrow_right_alt' | 'arrow_right' | 'arrow_two_ways_hor_l' | 'arrow_two_ways_hor_r' | 'arrow_two_ways_ver_b' | 'arrow_two_ways_ver_t' | 'arrow_up_alt' | 'arrow_up' | 'barnd_pepperi' | 'device_desktop' | 'device_mobile' | 'device_responsive' | 'device_tablet' | 'indicator_dot_placeholder' | 'misc_excel' | 'no_image_2' | 'no_image' | 'number_coins' | 'number_decimal' | 'number_dollar' | 'number_euro' | 'number_minus' | 'number_number' | 'number_percent' | 'number_plus' | 'ripples_transparent' | 'shopping_cart' | 'shopping_paper' | 'system_attach' | 'system_avatar' | 'system_bell_on' | 'system_bell' | 'system_bin' | 'system_bolt' | 'system_boolean' | 'system_chat' | 'system_circle' | 'system_close' | 'system_copy' | 'system_doc' | 'system_door' | 'system_dot_ellipsis' | 'system_edit' | 'system_education' | 'system_email' | 'system_file_download' | 'system_file_upload_cloud' | 'system_file_upload' | 'system_filter_2' | 'system_filter' | 'system_folder' | 'system_full_screen' | 'system_heart' | 'system_home' | 'system_info' | 'system_inventory' | 'system_link' | 'system_map' | 'system_menu_dots' | 'system_menu' | 'system_move' | 'system_must' | 'system_off_line' | 'system_ok' | 'system_pause' | 'system_phone' | 'system_play' | 'system_print' | 'system_processing' | 'system_question' | 'system_radio_btn' | 'system_rotate_device' | 'system_search' | 'system_select' | 'system_settings' | 'system_signature' | 'system_spinner' | 'system_support' | 'system_texterea' | 'system_tool' | 'system_view' | 'text_align_center' | 'text_align_left' | 'text_align_right' | 'text_long_text' | 'text_short_text' | 'time_cal' | 'time_datetime' | 'time_duration' | 'time_time' | 'view_card_lg' | 'view_card_md' | 'view_card_sm' | 'view_line' | 'view_matrix' | 'view_table';
 export interface IPepIconData {
     name: PepIconType;
     data: string;

package/menu/menu.component.d.ts

@@ -41,6 +41,8 @@ export declare class PepMenuComponent implements OnChanges, OnDestroy {
     onMenuItemClicked(click: IPepMenuItemClickEvent): void;
     animationDone(): void;
     animationStart(): void;
+    onMenuOpened(): void;
+    onMenuClosed(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepMenuComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PepMenuComponent, "pep-menu", never, { "text": "text"; "iconName": "iconName"; "type": "type"; "styleType": "styleType"; "sizeType": "sizeType"; "classNames": "classNames"; "xPosition": "xPosition"; "hideOnEmptyItems": "hideOnEmptyItems"; "items": "items"; "selectedItem": "selectedItem"; "disabled": "disabled"; }, { "stateChange": "stateChange"; "menuItemClick": "menuItemClick"; "menuClick": "menuClick"; }, never, never, false>;
 }

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@pepperi-addons/ngx-lib",
-  "version": "0.4.0-angular14.9",
+  "version": "0.4.0-beta.3",
   "peerDependencies": {
     "@angular/animations": ">= 14.0.2",
     "@angular/cdk": ">= 14.0.2",
     "@angular/common": ">= 14.0.2",
     "@angular/compiler": ">= 14.0.2",
     "@angular/core": ">= 14.0.2",
+    "@angular/elements": ">= 14.0.2",
     "@angular/forms": ">= 14.0.2",
-    "@angular/material": "^14.0.2",
+    "@angular/material": ">= 14.0.2",
     "@angular/platform-browser": ">= 14.0.2",
     "@angular/platform-browser-dynamic": ">= 14.0.2",
-    "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
-    "ngx-translate-multi-http-loader": "^3.0.0",
+    "@ngx-translate/core": ">= 14.0.0",
+    "@ngx-translate/http-loader": ">= 7.0.0",
+    "ngx-translate-multi-http-loader": ">= 3.0.0",
     "rxjs": ">= 6.5.5"
   },
   "description": "This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.",
@@ -98,6 +99,14 @@
       "node": "./fesm2015/pepperi-addons-ngx-lib-checkbox.mjs",
       "default": "./fesm2020/pepperi-addons-ngx-lib-checkbox.mjs"
     },
+    "./chips": {
+      "types": "./chips/index.d.ts",
+      "esm2020": "./esm2020/chips/pepperi-addons-ngx-lib-chips.mjs",
+      "es2020": "./fesm2020/pepperi-addons-ngx-lib-chips.mjs",
+      "es2015": "./fesm2015/pepperi-addons-ngx-lib-chips.mjs",
+      "node": "./fesm2015/pepperi-addons-ngx-lib-chips.mjs",
+      "default": "./fesm2020/pepperi-addons-ngx-lib-chips.mjs"
+    },
     "./color": {
       "types": "./color/index.d.ts",
       "esm2020": "./esm2020/color/pepperi-addons-ngx-lib-color.mjs",
@@ -218,14 +227,6 @@
       "node": "./fesm2015/pepperi-addons-ngx-lib-page-layout.mjs",
       "default": "./fesm2020/pepperi-addons-ngx-lib-page-layout.mjs"
     },
-    "./plugin": {
-      "types": "./plugin/index.d.ts",
-      "esm2020": "./esm2020/plugin/pepperi-addons-ngx-lib-plugin.mjs",
-      "es2020": "./fesm2020/pepperi-addons-ngx-lib-plugin.mjs",
-      "es2015": "./fesm2015/pepperi-addons-ngx-lib-plugin.mjs",
-      "node": "./fesm2015/pepperi-addons-ngx-lib-plugin.mjs",
-      "default": "./fesm2020/pepperi-addons-ngx-lib-plugin.mjs"
-    },
     "./profile-data-views-list": {
       "types": "./profile-data-views-list/index.d.ts",
       "esm2020": "./esm2020/profile-data-views-list/pepperi-addons-ngx-lib-profile-data-views-list.mjs",

package/page-layout/page-layout.component.d.ts

@@ -15,5 +15,5 @@ export declare class PepPageLayoutComponent implements AfterViewInit, AfterConte
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepPageLayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepPageLayoutComponent, "pep-page-layout", never, { "addPadding": "addPadding"; "showShadow": "showShadow"; }, {}, never, ["[pep-header-area]", "pep-side-bar", "[pep-side-area]", "[pep-top-area]", "[pep-main-area]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepPageLayoutComponent, "pep-page-layout", never, { "addPadding": "addPadding"; "showShadow": "showShadow"; }, {}, never, ["[pep-header-area]", "pep-side-bar", "[pep-side-area]", "pep-side-bar[position='end']", "[pep-side-area-end]", "[pep-top-area]", "[pep-main-area]"], false>;
 }

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

@@ -21,6 +21,12 @@ export declare class PepQuantitySelectorComponent implements OnChanges, OnInit,
     private _formattedValue;
     set formattedValue(value: string);
     get formattedValue(): string;
+    private _minFractionDigits;
+    set minFractionDigits(value: number);
+    get minFractionDigits(): number;
+    private _maxFractionDigits;
+    set maxFractionDigits(value: number);
+    get maxFractionDigits(): number;
     label: string;
     type: PepQuantitySelectorFieldType;
     mandatory: boolean;
@@ -97,5 +103,5 @@ export declare class PepQuantitySelectorComponent implements OnChanges, OnInit,
     setupQsButtons(qsWidth: number): void;
     setQsView(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepQuantitySelectorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepQuantitySelectorComponent, "pep-quantity-selector", never, { "key": "key"; "value": "value"; "formattedValue": "formattedValue"; "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"; }, { "valueChange": "valueChange"; "elementClick": "elementClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepQuantitySelectorComponent, "pep-quantity-selector", never, { "key": "key"; "value": "value"; "formattedValue": "formattedValue"; "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"; }, { "valueChange": "valueChange"; "elementClick": "elementClick"; }, never, never, false>;
 }

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

@@ -1,15 +1,17 @@
 import { OnInit, EventEmitter, TemplateRef, OnDestroy } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { PepBlockDataType, PepRemoteLoaderOptions } from './remote-loader.model';
+import { PepRemoteLoaderOptions } from './remote-loader.model';
 import { PepRemoteLoaderService } from './remote-loader.service';
 import * as i0 from "@angular/core";
 export declare class PepAddonBlockLoaderComponent implements OnInit, OnDestroy {
     private remoteLoaderService;
     dialogTemplate: TemplateRef<any>;
+    addonId: string;
     remoteEntry: string;
+    slugName: string;
     private _blockType;
-    set blockType(value: PepBlockDataType);
-    get blockType(): PepBlockDataType;
+    set blockType(value: string);
+    get blockType(): string;
     private _name;
     set name(value: string);
     get name(): string;
@@ -19,8 +21,10 @@ export declare class PepAddonBlockLoaderComponent implements OnInit, OnDestroy {
     get dialogRef(): MatDialogRef<any>;
     hostEvents: EventEmitter<any>;
     blockLoad: EventEmitter<void>;
-    inDialog: boolean;
-    remotePathOptions: PepRemoteLoaderOptions;
+    protected inDialog: boolean;
+    protected remotePathOptions: PepRemoteLoaderOptions;
+    protected loadElement: boolean;
+    protected onHostEventsCallback: (event: CustomEvent) => void;
     constructor(remoteLoaderService: PepRemoteLoaderService);
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -28,5 +32,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, { "remoteEntry": "remoteEntry"; "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"; }, { "hostEvents": "hostEvents"; "blockLoad": "blockLoad"; }, never, never, false>;
 }

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

@@ -1,13 +1,12 @@
-import { ComponentFactoryResolver, ComponentRef } from '@angular/core';
+import { ComponentRef } from '@angular/core';
 import { IAddonBlockLoaderDialogOptions, IAddonBlockLoaderOptions } from './remote-loader.model';
 import { PepAddonBlockLoaderComponent } from './addon-block-loader.component';
 import { MatDialogRef } from '@angular/material/dialog';
 import { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';
 import * as i0 from "@angular/core";
 export declare class PepAddonBlockLoaderService {
-    private resolver;
     private dialogService;
-    constructor(resolver: ComponentFactoryResolver, dialogService: PepDialogService);
+    constructor(dialogService: PepDialogService);
     private loadAddonBlockInternal;
     loadAddonBlockInContainer(options: IAddonBlockLoaderOptions): ComponentRef<PepAddonBlockLoaderComponent> | null;
     loadAddonBlockInDialog(options: IAddonBlockLoaderDialogOptions): MatDialogRef<any> | null;

package/remote-loader/public-api.d.ts

@@ -1,6 +1,7 @@
 export * from './addon-block-loader.component';
 export * from './addon-block-loader.service';
 export * from './remote-loader.component';
+export * from './remote-loader-element.component';
 export * from './remote-loader.module';
 export * from './remote-loader.model';
 export * from './remote-loader.service';

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

@@ -0,0 +1,30 @@
+import { AfterContentInit, ElementRef, EventEmitter, OnChanges, Renderer2 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { PepAddonService } from '@pepperi-addons/ngx-lib';
+import { PepRemoteLoaderOptions } from './remote-loader.model';
+import { PepRemoteLoaderService } from './remote-loader.service';
+import * as i0 from "@angular/core";
+export declare class PepRemoteLoaderElementComponent implements AfterContentInit, OnChanges {
+    private renderer;
+    private el;
+    private pepAddonService;
+    private remoteLoaderService;
+    private route;
+    options: PepRemoteLoaderOptions;
+    props: {
+        [prop: string]: unknown;
+    };
+    events: {
+        [event: string]: (event: Event) => void;
+    };
+    load: EventEmitter<any>;
+    element: HTMLElement;
+    constructor(renderer: Renderer2, el: ElementRef, pepAddonService: PepAddonService, remoteLoaderService: PepRemoteLoaderService, route: ActivatedRoute);
+    ngOnChanges(): void;
+    private populateProps;
+    private setupEvents;
+    private loadOptionsFromRoute;
+    ngAfterContentInit(): Promise<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>;
+}

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

@@ -1,11 +1,9 @@
+import { OnChanges, ViewContainerRef, Injector, EventEmitter, SimpleChanges } from '@angular/core';
 import { PepAddonService } from '@pepperi-addons/ngx-lib';
-import { OnChanges, ViewContainerRef, ComponentFactoryResolver, Injector, Compiler, EventEmitter, SimpleChanges } from '@angular/core';
 import { PepRemoteLoaderOptions } from './remote-loader.model';
 import * as i0 from "@angular/core";
 export declare class PepRemoteLoaderComponent implements OnChanges {
     private injector;
-    private cfr;
-    private compiler;
     private pepAddonService;
     viewContainer: ViewContainerRef;
     private _options;
@@ -17,9 +15,9 @@ export declare class PepRemoteLoaderComponent implements OnChanges {
     hostEvents: EventEmitter<any>;
     load: EventEmitter<any>;
     private compRef;
-    constructor(injector: Injector, cfr: ComponentFactoryResolver, compiler: Compiler, pepAddonService: PepAddonService);
+    constructor(injector: Injector, pepAddonService: PepAddonService);
     private setHostComponentIntoComponentRef;
-    ngOnChanges(changes: SimpleChanges): Promise<void>;
+    ngOnChanges(changes: SimpleChanges): void;
     private loadModule;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepRemoteLoaderComponent, never>;

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

@@ -1,24 +1,29 @@
-import { LoadRemoteModuleScriptOptions } from "@angular-architects/module-federation";
+import { LoadRemoteModuleOptions } from "@angular-architects/module-federation";
 import { ViewContainerRef } from "@angular/core";
 import { MatDialogConfig } from "@angular/material/dialog";
 import { PepDialogSizeType } from "@pepperi-addons/ngx-lib/dialog";
-import { NgComponentRelation } from "@pepperi-addons/papi-sdk";
+import { InstalledAddon, NgComponentRelation } from "@pepperi-addons/papi-sdk";
 declare type PepRemoteLoaderData = {
-    componentName: string;
-    addonId: string;
-    update?: boolean;
-    noModule?: boolean;
+    addonId?: string;
+    componentName?: string;
+    elementName?: string;
 };
-export declare type PepRemoteLoaderOptions = LoadRemoteModuleScriptOptions & PepRemoteLoaderData;
-export declare type PepBlockDataType = 'SettingsBlock' | 'AddonBlock' | 'PageBlock';
+export declare type PepRemoteLoaderOptions = PepRemoteLoaderData & LoadRemoteModuleOptions;
+export interface IPepRemoteLoaderParamsOptions {
+    name?: string;
+    slugName?: string;
+    blockType?: string;
+    addonUUID?: string;
+    blockRemoteEntry?: string;
+    pagesDevServer?: string;
+}
 export interface IBlockLoaderData {
     relation: NgComponentRelation;
+    addon: InstalledAddon;
     addonPublicBaseURL: string;
 }
-export interface IAddonBlockLoaderOptions {
+export interface IAddonBlockLoaderOptions extends IPepRemoteLoaderParamsOptions {
     container: ViewContainerRef;
-    blockType?: PepBlockDataType;
-    name: string;
     hostObject?: any;
     hostEventsCallback?: (event: any) => void;
 }

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

@@ -1,13 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./addon-block-loader.component";
 import * as i2 from "./remote-loader.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/common/http";
-import * as i5 from "@angular/material/dialog";
-import * as i6 from "@pepperi-addons/ngx-lib";
-import * as i7 from "@pepperi-addons/ngx-lib/dialog";
+import * as i3 from "./remote-loader-element.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/common/http";
+import * as i6 from "@angular-architects/module-federation-tools";
+import * as i7 from "@angular/material/dialog";
+import * as i8 from "@pepperi-addons/ngx-lib";
+import * as i9 from "@pepperi-addons/ngx-lib/dialog";
 export declare class PepRemoteLoaderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PepRemoteLoaderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PepRemoteLoaderModule, [typeof i1.PepAddonBlockLoaderComponent, typeof i2.PepRemoteLoaderComponent], [typeof i3.CommonModule, typeof i4.HttpClientModule, typeof i5.MatDialogModule, typeof i6.PepNgxLibModule, typeof i7.PepDialogModule], [typeof i1.PepAddonBlockLoaderComponent, typeof i2.PepRemoteLoaderComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepRemoteLoaderModule, [typeof i1.PepAddonBlockLoaderComponent, typeof i2.PepRemoteLoaderComponent, typeof i3.PepRemoteLoaderElementComponent], [typeof i4.CommonModule, typeof i5.HttpClientModule, typeof i6.ModuleFederationToolsModule, typeof i7.MatDialogModule, typeof i8.PepNgxLibModule, typeof i9.PepDialogModule], [typeof i1.PepAddonBlockLoaderComponent, typeof i2.PepRemoteLoaderComponent, typeof i3.PepRemoteLoaderElementComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PepRemoteLoaderModule>;
 }

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

@@ -1,17 +1,15 @@
 import { PepAddonService, PepHttpService, PepSessionService } from '@pepperi-addons/ngx-lib';
-import { PepBlockDataType, PepRemoteLoaderOptions } from './remote-loader.model';
+import { IPepRemoteLoaderParamsOptions, PepRemoteLoaderOptions } from './remote-loader.model';
 import { IBlockLoaderData } from './remote-loader.model';
-import { ActivatedRoute } from '@angular/router';
 import * as i0 from "@angular/core";
 export declare class PepRemoteLoaderService {
     private httpService;
     private sessionService;
     private addonService;
-    private route;
-    constructor(httpService: PepHttpService, sessionService: PepSessionService, addonService: PepAddonService, route: ActivatedRoute);
-    getRemoteLoaderOptions(blockLoaderData: IBlockLoaderData, remoteEntry?: string): PepRemoteLoaderOptions;
-    private getAddonBaseUrl;
-    getBlockRemoteLoaderOptions(name: string, blockType?: PepBlockDataType, remoteEntry?: string): Promise<PepRemoteLoaderOptions>;
+    constructor(httpService: PepHttpService, sessionService: PepSessionService, addonService: PepAddonService);
+    getRemoteLoaderOptions(blockLoaderData: IBlockLoaderData, blockRemoteEntry?: string, type?: 'script' | 'module' | 'manifest'): PepRemoteLoaderOptions;
+    private getBlockLoaderDataUrl;
+    getBlockRemoteLoaderOptions(options: IPepRemoteLoaderParamsOptions): Promise<PepRemoteLoaderOptions>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepRemoteLoaderService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepRemoteLoaderService>;
 }

package/select/select.component.d.ts

@@ -8,7 +8,9 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     private renderer;
     private element;
     key: string;
-    value: string;
+    private _value;
+    set value(value: string);
+    get value(): string;
     label: string;
     type: PepSelectFieldType;
     mandatory: boolean;
@@ -16,17 +18,21 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     readonly: boolean;
     xAlignment: PepHorizontalAlignment;
     rowSpan: number;
-    options: Array<IPepOption>;
+    private _options;
+    set options(value: Array<IPepOption>);
+    get options(): Array<IPepOption>;
     private _visible;
     set visible(visible: boolean);
     get visible(): boolean;
+    private _emptyOption;
+    set emptyOption(val: boolean);
+    get emptyOption(): boolean;
     controlType: string;
     form: FormGroup;
     layoutType: PepLayoutType;
     parentFieldKey: string;
     isActive: boolean;
     showTitle: boolean;
-    emptyOption: boolean;
     renderTitle: boolean;
     valueChange: EventEmitter<string>;
     formValidationChange: EventEmitter<boolean>;
@@ -49,5 +55,5 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     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"; "options": "options"; "visible": "visible"; "form": "form"; "layoutType": "layoutType"; "parentFieldKey": "parentFieldKey"; "isActive": "isActive"; "showTitle": "showTitle"; "emptyOption": "emptyOption"; "renderTitle": "renderTitle"; }, { "valueChange": "valueChange"; "formValidationChange": "formValidationChange"; }, 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"; "options": "options"; "visible": "visible"; "emptyOption": "emptyOption"; "form": "form"; "layoutType": "layoutType"; "parentFieldKey": "parentFieldKey"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; }, { "valueChange": "valueChange"; "formValidationChange": "formValidationChange"; }, never, never, false>;
 }

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

@@ -8,9 +8,11 @@ export declare class PepSideBarComponent implements OnInit {
     private renderer;
     layoutService: PepLayoutService;
     static ONE_MULTI_BY_DIR_KEY: string;
+    position: 'start' | 'end';
     ignoreResize: boolean;
     showHeader: boolean;
     showFooter: boolean;
+    showToggle: boolean;
     private _useAsWebComponent;
     private readonly _animationTime;
     state: PepSideBarStateType;
@@ -29,14 +31,12 @@ export declare class PepSideBarComponent implements OnInit {
     private setState;
     private toggleState;
     ngOnInit(): void;
-    setSideBarHeight(event: any): void;
-    mouseLeaveSideBar(event: any): void;
     open(): void;
     close(): void;
     toggle(): void;
     toggleSideWrapper(): void;
     toggleSidenav(isOpen: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSideBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepSideBarComponent, "pep-side-bar", never, { "ignoreResize": "ignoreResize"; "showHeader": "showHeader"; "showFooter": "showFooter"; "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"; "useAsWebComponent": "useAsWebComponent"; }, { "stateChange": "stateChange"; }, never, ["[header-content]", "[start-content]", "*", "[end-content]", "pep-smart-filters", "[footer-content]"], false>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepSideBarComponent>;
 }

package/src/assets/i18n/en.ngx-lib.json

@@ -11,6 +11,9 @@
         "TRUE": "True",
         "FALSE": "False"
     },
+    "CHIPS": {
+        "ADD_CHIP": "Add Chip"
+    },
     "IMAGE": {
         "NO_IMAGE": "No image",
         "CLICK_TO_ENLARGE": "Click to enlarge"
@@ -151,6 +154,7 @@
         "ERROR_MAX_QUANTITY_LIMIT": "Max quantity",
         "ERROR_MIN_QUANTITY_LIMIT": "Min quantity",
         "ERROR_RANGE_IS_NOT_VALID": "Value should be between {{min}} and {{max}}",
+        "ERROR_INVALID_PATTERN": "Invalid Character",
         "INFO_LOADING_FILE": "Loading",
         "INFO_MISSING_FILE": "Missing file",
         "INFO_MISSING_IMAGE": "Missing image",

package/src/core/style/components/checkbox.scss

@@ -45,7 +45,7 @@
         }
 
         .mat-checkbox-layout {
-            @include mixins.font-body(variables.$fs-xl, variables.$lh-xl);
+            @include mixins.font-body(variables.$fs-lg, variables.$lh-lg);
             font-weight: variables.$font-weight-bold !important;
 
             .mat-checkbox-label span {
@@ -68,6 +68,25 @@
     // }
 }
 
+.checkbox-no-background {
+    .pep-checkbox-container {
+        background: unset !important;
+        padding-left: unset !important;
+        padding-right: unset !important;
+
+        .mat-checkbox-inner-container {
+            margin-left: 0 !important;
+            margin-right: 0 !important;
+        }
+
+        .mat-checkbox-layout {
+            .mat-checkbox-label span {
+                margin: 0 0.5rem;
+            }
+        }
+    }
+}
+
 // -----------------------------------------------------
 //  Override material style
 // -----------------------------------------------------

package/src/core/style/components/general.scss

@@ -18,12 +18,13 @@
 // -----------------------------------------------------
 .mat-form-title {
     margin: 0;
-    padding: variables.$spacing-2xs 0;
-    height: variables.$form-field-title-height;
-    line-height: 1rem;
-    // display: block;
     display: grid;
     grid-template-columns: auto 1fr auto;
+    height: variables.$form-field-title-height;
+    align-content: center;
+    // padding: variables.$spacing-2xs 0;
+    // line-height: 1rem;
+    // display: block;
 
     .mat-icon {
         // line-height: 0.875rem;