@pepperi-addons/ngx-lib 0.4.2-beta.7 → 0.4.2-beta.71

package/files-uploader/files-uploader.component.d.ts

@@ -10,6 +10,7 @@ export interface IPepFileChangeEvent {
     fileStr?: string;
     fileName?: string;
     fileExt?: string;
+    fileSize?: number;
 }
 export declare class PepFilesUploaderComponent implements OnInit {
     private dialogService;
@@ -28,23 +29,25 @@ export declare class PepFilesUploaderComponent implements OnInit {
     controlType: string;
     sizeLimitMB: number;
     form: FormGroup;
-    standAlone: boolean;
     acceptedExtensions: string;
     layoutType: PepLayoutType;
+    fieldHeight: string;
+    handleActions: boolean;
+    hint: string;
+    chooseFile: EventEmitter<void>;
     fileChange: EventEmitter<IPepFileChangeEvent>;
     elementClick: EventEmitter<IPepFieldClickEvent>;
     fileInput: any;
     imagePreview: any;
-    fieldHeight: string;
     uploader: FileUploader;
     progress: number;
     intervalID: any;
     constructor(dialogService: PepDialogService, customizationService: PepCustomizationService, fileService: PepFileService, translate: TranslateService);
     getFileName(filename: any): any;
     getFileExtension(filename: any): any;
+    private setDefaultForm;
     ngOnInit(): void;
     isValidFile(fileStr: any, fileExtension: any, acceptedExtensions: any, sizeLimitMB?: number): string;
-    getBase64FileSize(base64String: string): number;
     errorHandler(event: any): void;
     private setProgress;
     deleteFile(): void;
@@ -52,6 +55,6 @@ export declare class PepFilesUploaderComponent implements OnInit {
     onClick_ChooseFile(event: any): void;
     onKeyPress_ChooseFile(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepFilesUploaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepFilesUploaderComponent, "pep-files-uploader", never, { "key": "key"; "src": "src"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "controlType": "controlType"; "sizeLimitMB": "sizeLimitMB"; "form": "form"; "standAlone": "standAlone"; "acceptedExtensions": "acceptedExtensions"; "layoutType": "layoutType"; "fieldHeight": "fieldHeight"; }, { "fileChange": "fileChange"; "elementClick": "elementClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepFilesUploaderComponent, "pep-files-uploader", never, { "key": "key"; "src": "src"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "controlType": "controlType"; "sizeLimitMB": "sizeLimitMB"; "form": "form"; "acceptedExtensions": "acceptedExtensions"; "layoutType": "layoutType"; "fieldHeight": "fieldHeight"; "handleActions": "handleActions"; "hint": "hint"; }, { "chooseFile": "chooseFile"; "fileChange": "fileChange"; "elementClick": "elementClick"; }, never, never, false>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PepFilesUploaderComponent>;
 }

package/image/image.component.d.ts

@@ -14,8 +14,12 @@ export declare class PepImageComponent implements OnChanges, OnInit, OnDestroy {
     private translate;
     static MENU_CLICKED: string;
     key: string;
-    srcLarge: string;
-    src: string;
+    private _srcLarge;
+    set srcLarge(value: string);
+    get srcLarge(): string;
+    private _src;
+    set src(value: string);
+    get src(): string;
     options: IPepOption[];
     label: string;
     mandatory: boolean;
@@ -42,6 +46,9 @@ export declare class PepImageComponent implements OnChanges, OnInit, OnDestroy {
     isActive: boolean;
     sizeLimitMB: number;
     acceptImagesType: string;
+    handleActions: boolean;
+    hint: string;
+    chooseFile: EventEmitter<void>;
     fileChange: EventEmitter<any>;
     elementClick: EventEmitter<IPepFieldClickEvent>;
     fieldHeight: string;
@@ -61,6 +68,7 @@ export declare class PepImageComponent implements OnChanges, OnInit, OnDestroy {
     objectIdIsNotEmpty(): boolean;
     onFileClicked(event: IPepFieldClickEvent): void;
     itemImageClick(event: any): void;
+    onChooseFile(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepImageComponent, "pep-image", never, { "key": "key"; "srcLarge": "srcLarge"; "src": "src"; "options": "options"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "indicatorsField": "indicatorsField"; "menuField": "menuField"; "hasCampaignField": "hasCampaignField"; "visible": "visible"; "form": "form"; "uid": "uid"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "isActive": "isActive"; "sizeLimitMB": "sizeLimitMB"; "acceptImagesType": "acceptImagesType"; }, { "fileChange": "fileChange"; "elementClick": "elementClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepImageComponent, "pep-image", never, { "key": "key"; "srcLarge": "srcLarge"; "src": "src"; "options": "options"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "indicatorsField": "indicatorsField"; "menuField": "menuField"; "hasCampaignField": "hasCampaignField"; "visible": "visible"; "form": "form"; "uid": "uid"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; "isActive": "isActive"; "sizeLimitMB": "sizeLimitMB"; "acceptImagesType": "acceptImagesType"; "handleActions": "handleActions"; "hint": "hint"; }, { "chooseFile": "chooseFile"; "fileChange": "fileChange"; "elementClick": "elementClick"; }, never, never, false>;
 }

package/link/link.component.d.ts

@@ -1,14 +1,14 @@
 import { OnInit, OnChanges, EventEmitter, ElementRef, Renderer2, OnDestroy } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
-import { PepLayoutType, PepCustomizationService, PepHorizontalAlignment, PepTextboxFieldType, PepUtilitiesService, IPepFieldClickEvent } from '@pepperi-addons/ngx-lib';
+import { PepLayoutType, PepCustomizationService, PepHorizontalAlignment, PepUtilitiesService, IPepFieldClickEvent } from '@pepperi-addons/ngx-lib';
 import { IsUrlPipe } from './link.pipes';
 import * as i0 from "@angular/core";
 /**
  * This is a text box input component that can be use to
  *
  * @export
- * @class PepTextboxComponent
+ * @class PepLinkComponent
  * @implements {OnChanges}
  * @implements {OnInit}
  * @implements {OnDestroy}
@@ -25,7 +25,7 @@ export declare class PepLinkComponent implements OnChanges, OnInit, OnDestroy {
     /**
      * The text box key
      *
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
     set key(value: string);
     get key(): string;
@@ -33,46 +33,46 @@ export declare class PepLinkComponent implements OnChanges, OnInit, OnDestroy {
     /**
      * The value of the text box.
      *
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
     set value(value: string);
     get value(): string;
-    protected formattedValue: string;
     /**
-     * The title of the textbox.
+     * The display value of the link.
      *
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
-    label: string;
+    private _displayValue;
+    set displayValue(value: string);
+    get displayValue(): string;
     /**
-     * The placeholder (relevant only for children - if parent isn't null).
+     * The title of the link.
      *
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
-    placeholder: string;
+    label: string;
     /**
-     * The type of the textbox.
+     * The placeholder (relevant only for children - if parent isn't null).
      *
-     * @type {PepTextboxFieldType}
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
-    type: PepTextboxFieldType;
+    placeholder: string;
     /**
-     * If the textbox is mandatory
+     * If the link is mandatory
      *
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
     mandatory: boolean;
     /**
-     * If the textbox is disabled.
+     * If the link is disabled.
      *
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
     disabled: boolean;
     /**
-     * If the textbox is readonly
+     * If the link is readonly
      *
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
     readonly: boolean;
     maxFieldCharacters: number;
@@ -93,22 +93,18 @@ export declare class PepLinkComponent implements OnChanges, OnInit, OnDestroy {
      * The value change event.
      *
      * @type {EventEmitter<string>}
-     * @memberof PepTextboxComponent
+     * @memberof PepLinkComponent
      */
     valueChange: EventEmitter<string>;
     elementClick: EventEmitter<IPepFieldClickEvent>;
     input: ElementRef;
-    private _calculateFormattedValue;
-    get calculateFormattedValue(): boolean;
     controlType: string;
     standAlone: boolean;
     isInEditMode: boolean;
     isInFocus: boolean;
     isUrl: boolean;
     constructor(customizationService: PepCustomizationService, renderer: Renderer2, element: ElementRef, translate: TranslateService, utilitiesService: PepUtilitiesService, isUrlPipe: IsUrlPipe);
-    private setFormattedValue;
     private updateFormFieldValue;
-    get displayValue(): string;
     private setDefaultForm;
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
@@ -121,5 +117,5 @@ export declare class PepLinkComponent implements OnChanges, OnInit, OnDestroy {
     anchorClicked(): void;
     cardTemplateClicked(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepLinkComponent, "pep-link", never, { "key": "key"; "value": "value"; "label": "label"; "placeholder": "placeholder"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderError": "renderError"; "renderSymbol": "renderSymbol"; "layoutType": "layoutType"; }, { "valueChange": "valueChange"; "elementClick": "elementClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepLinkComponent, "pep-link", never, { "key": "key"; "value": "value"; "displayValue": "displayValue"; "label": "label"; "placeholder": "placeholder"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderError": "renderError"; "renderSymbol": "renderSymbol"; "layoutType": "layoutType"; }, { "valueChange": "valueChange"; "elementClick": "elementClick"; }, never, never, false>;
 }

package/list/list.component.d.ts

@@ -95,6 +95,7 @@ export declare class PepListComponent implements OnInit, OnChanges, OnDestroy {
     startX: number;
     startWidth: number;
     tableStartWidth: number;
+    private lastColumnsWidth;
     isAsc: boolean;
     sortBy: string;
     isUserSelected: boolean;
@@ -106,6 +107,7 @@ export declare class PepListComponent implements OnInit, OnChanges, OnDestroy {
     ngOnDestroy(): void;
     private getScrollingElement;
     private scrollToTop;
+    private getSelectionCheckBoxWidth;
     private setContainerWidth;
     private saveSortingToSession;
     private getTopItems;
@@ -115,6 +117,8 @@ export declare class PepListComponent implements OnInit, OnChanges, OnDestroy {
     private setSelectionItems;
     private getUniqItemId;
     private setLayout;
+    private setLastColumnsWidth;
+    private setColumnsWidth;
     private calcColumnsWidth;
     private calcObjectHeight;
     private initResizeData;

package/menu/menu.component.d.ts

@@ -7,7 +7,7 @@ export declare class PepMenuComponent implements OnChanges, OnDestroy {
     layoutService: PepLayoutService;
     text: string;
     /**
-     * The icon name to show on the menu. look in (@link icon -> All icons)
+     * The icon name to show on the menu, look in (@link icon -> All icons), default icon `system_menu`
      *
      * @type {PepIconType} See {@link PepIconType}
      * @memberof PepMenuComponent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib",
-  "version": "0.4.2-beta.7",
+  "version": "0.4.2-beta.71",
   "peerDependencies": {
     "@angular/animations": ">= 14.0.2",
     "@angular/cdk": ">= 14.0.2",
@@ -17,7 +17,7 @@
     "@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"
+    "rxjs": ">= 7.5.0"
   },
   "description": "This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.",
   "main": "karma.conf.js",
@@ -325,6 +325,14 @@
       "node": "./fesm2015/pepperi-addons-ngx-lib-size-detector.mjs",
       "default": "./fesm2020/pepperi-addons-ngx-lib-size-detector.mjs"
     },
+    "./skeleton-loader": {
+      "types": "./skeleton-loader/index.d.ts",
+      "esm2020": "./esm2020/skeleton-loader/pepperi-addons-ngx-lib-skeleton-loader.mjs",
+      "es2020": "./fesm2020/pepperi-addons-ngx-lib-skeleton-loader.mjs",
+      "es2015": "./fesm2015/pepperi-addons-ngx-lib-skeleton-loader.mjs",
+      "node": "./fesm2015/pepperi-addons-ngx-lib-skeleton-loader.mjs",
+      "default": "./fesm2020/pepperi-addons-ngx-lib-skeleton-loader.mjs"
+    },
     "./slider": {
       "types": "./slider/index.d.ts",
       "esm2020": "./esm2020/slider/pepperi-addons-ngx-lib-slider.mjs",

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

@@ -105,8 +105,6 @@ export declare class PepQuantitySelectorComponent implements OnChanges, OnInit,
     decrement(event: any): void;
     enterChildren(event: any): void;
     enterPackage(event: any): void;
-    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"; "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>;
 }

package/signature/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from './signature.module';
 export * from './signature.component';
+export * from './signature-dialog.component';

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

@@ -0,0 +1,29 @@
+import { OnInit, AfterViewInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { SignaturePad } from 'ngx-signaturepad';
+import * as i0 from "@angular/core";
+interface IPepSignatureDialogData {
+    title: string;
+    value: string;
+    showActionBtn: boolean;
+    disabled: boolean;
+}
+export declare class PepSignatureDialogComponent implements OnInit, AfterViewInit {
+    private dialogRef;
+    data: IPepSignatureDialogData;
+    private signatureURL;
+    private acceptSignatureType;
+    protected signaturePadOptions: any;
+    signaturePad: SignaturePad;
+    constructor(dialogRef: MatDialogRef<PepSignatureDialogComponent>, data: IPepSignatureDialogData);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    drawComplete(): void;
+    drawStart(): void;
+    clearSignModal(): void;
+    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>;
+}
+export {};

package/signature/signature.component.d.ts

@@ -1,7 +1,6 @@
-import { OnInit, OnDestroy, EventEmitter, ChangeDetectorRef, OnChanges, ElementRef, Renderer2, TemplateRef } from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter, ChangeDetectorRef, OnChanges, ElementRef, Renderer2 } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { SignaturePad } from 'ngx-signaturepad/signature-pad';
-import { PepFileService, PepLayoutType, PepCustomizationService, PepHorizontalAlignment } from '@pepperi-addons/ngx-lib';
+import { PepFileService, PepLayoutType, PepCustomizationService, PepHorizontalAlignment, IPepFieldClickEvent } from '@pepperi-addons/ngx-lib';
 import { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';
 import { MatDialogRef } from '@angular/material/dialog';
 import * as i0 from "@angular/core";
@@ -34,35 +33,27 @@ export declare class PepSignatureComponent implements OnInit, OnChanges, OnDestr
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;
     isActive: boolean;
+    handleActions: boolean;
+    chooseFile: EventEmitter<void>;
     fileChange: EventEmitter<any>;
-    signaturePad: SignaturePad;
-    signaturePopupPad: TemplateRef<any>;
+    elementClick: EventEmitter<IPepFieldClickEvent>;
     dialogRef: MatDialogRef<any>;
     fieldHeight: string;
     standAlone: boolean;
     dataURI: any;
     showActionBtn: boolean;
-    isVisibleModal: boolean;
-    acceptSignatureType: string;
-    signaturePadOptions: any;
     constructor(dialogService: PepDialogService, customizationService: PepCustomizationService, fileService: PepFileService, cd: ChangeDetectorRef, renderer: Renderer2, element: ElementRef);
     private setFieldHeight;
     private setDefaultForm;
+    private openSignatoreDlg;
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
-    drawComplete(): void;
-    drawStart(): void;
     openSignModal(): void;
-    openSignatoreDlg(src?: string): void;
-    afterDialogOpened(): void;
-    clearSignModal(): void;
     deleteSignature(event: any): void;
-    saveSignModal(event: any): void;
-    closeDialog(event: any): void;
     errorHandler(event: any): void;
     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"; }, { "fileChange": "fileChange"; }, 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"; }, never, never, false>;
 }

package/signature/signature.module.d.ts

@@ -1,24 +1,25 @@
 import { PepIconRegistry } from '@pepperi-addons/ngx-lib/icon';
 import * as i0 from "@angular/core";
 import * as i1 from "./signature.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
-import * as i4 from "@angular/material/core";
-import * as i5 from "@angular/material/button";
-import * as i6 from "@angular/material/form-field";
-import * as i7 from "@angular/material/input";
-import * as i8 from "@angular/material/icon";
-import * as i9 from "@angular/material/dialog";
-import * as i10 from "ngx-signaturepad";
-import * as i11 from "@pepperi-addons/ngx-lib";
-import * as i12 from "@pepperi-addons/ngx-lib/icon";
-import * as i13 from "@pepperi-addons/ngx-lib/field-title";
-import * as i14 from "@pepperi-addons/ngx-lib/files-uploader";
-import * as i15 from "@pepperi-addons/ngx-lib/dialog";
+import * as i2 from "./signature-dialog.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@angular/material/core";
+import * as i6 from "@angular/material/button";
+import * as i7 from "@angular/material/form-field";
+import * as i8 from "@angular/material/input";
+import * as i9 from "@angular/material/icon";
+import * as i10 from "@angular/material/dialog";
+import * as i11 from "ngx-signaturepad";
+import * as i12 from "@pepperi-addons/ngx-lib";
+import * as i13 from "@pepperi-addons/ngx-lib/icon";
+import * as i14 from "@pepperi-addons/ngx-lib/field-title";
+import * as i15 from "@pepperi-addons/ngx-lib/files-uploader";
+import * as i16 from "@pepperi-addons/ngx-lib/dialog";
 export declare class PepSignatureModule {
     private pepIconRegistry;
     constructor(pepIconRegistry: PepIconRegistry);
     static ɵfac: i0.ɵɵFactoryDeclaration<PepSignatureModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PepSignatureModule, [typeof i1.PepSignatureComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.MatCommonModule, typeof i5.MatButtonModule, typeof i6.MatFormFieldModule, typeof i7.MatInputModule, typeof i8.MatIconModule, typeof i9.MatDialogModule, typeof i10.SignaturePadModule, typeof i11.PepNgxLibModule, typeof i12.PepIconModule, typeof i13.PepFieldTitleModule, typeof i14.PepFilesUploaderModule, typeof i15.PepDialogModule], [typeof i1.PepSignatureComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepSignatureModule, [typeof i1.PepSignatureComponent, typeof i2.PepSignatureDialogComponent], [typeof i3.CommonModule, typeof i4.ReactiveFormsModule, typeof i5.MatCommonModule, typeof i6.MatButtonModule, typeof i7.MatFormFieldModule, typeof i8.MatInputModule, typeof i9.MatIconModule, typeof i10.MatDialogModule, typeof i11.SignaturePadModule, typeof i12.PepNgxLibModule, typeof i13.PepIconModule, typeof i14.PepFieldTitleModule, typeof i15.PepFilesUploaderModule, typeof i16.PepDialogModule], [typeof i1.PepSignatureComponent, typeof i2.PepSignatureDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PepSignatureModule>;
 }

package/skeleton-loader/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@pepperi-addons/ngx-lib/skeleton-loader" />
+export * from './public-api';

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

@@ -0,0 +1,2 @@
+export * from './skeleton-loader.module';
+export * from './skeleton-loader.component';

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

@@ -0,0 +1,20 @@
+import { MatDialogRef } from '@angular/material/dialog';
+import { PepSizeType } from '@pepperi-addons/ngx-lib';
+import * as i0 from "@angular/core";
+interface IPepSkeletonLoaderDialogData {
+    rowHeightType: PepSizeType;
+    rowsNumber: number;
+    lastRowOffset: boolean;
+}
+export declare class PepSkeletonLoaderComponent {
+    private dialogRef;
+    private data;
+    rowHeightType: PepSizeType;
+    rowsNumber: number;
+    lastRowOffset: boolean;
+    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>;
+}
+export {};

package/skeleton-loader/skeleton-loader.component.theme.scss

@@ -0,0 +1,15 @@
+@use '../src/core/style/abstracts/mixins';
+
+.group-buttons-container {
+    .toggle-buttons {
+        .is-selected {
+            &.weak {
+                @include mixins.pep-button-states(regular);
+            }
+
+            &.regular {
+                @include mixins.pep-button-states(weak);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./skeleton-loader.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@pepperi-addons/ngx-lib";
+export declare class PepSkeletonLoaderModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PepSkeletonLoaderModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PepSkeletonLoaderModule, [typeof i1.PepSkeletonLoaderComponent], [typeof i2.CommonModule, typeof i3.PepNgxLibModule], [typeof i1.PepSkeletonLoaderComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PepSkeletonLoaderModule>;
+}

package/src/core/style/abstracts/AbstractsIntro.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Abstracts/Intro" />
+
+# Abstracts
+
+Content TBD

package/src/core/style/abstracts/functions.scss

@@ -19,7 +19,7 @@
         color-tran-30: variables.$color-system-primary-invert-tran-30,
         color-tran-20: variables.$color-system-primary-invert-tran-20,
         color-tran-10: variables.$color-system-primary-invert-tran-10,
-        color-tran-0: variables.$color-system-primary-invert-tran-0,
+        color-tran-00: variables.$color-system-primary-invert-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-system-primary-invert-flat-l-20,
         color-flat-l-10: variables.$color-system-primary-invert-flat-l-10,
@@ -44,7 +44,7 @@
         color-tran-30: variables.$color-system-primary-tran-30,
         color-tran-20: variables.$color-system-primary-tran-20,
         color-tran-10: variables.$color-system-primary-tran-10,
-        color-tran-0: variables.$color-system-primary-tran-0,
+        color-tran-00: variables.$color-system-primary-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-system-primary-flat-l-20,
         color-flat-l-10: variables.$color-system-primary-flat-l-10,
@@ -69,7 +69,7 @@
         color-tran-30: variables.$color-system-success-tran-30,
         color-tran-20: variables.$color-system-success-tran-20,
         color-tran-10: variables.$color-system-success-tran-10,
-        color-tran-0: variables.$color-system-success-tran-0,
+        color-tran-00: variables.$color-system-success-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-system-success-flat-l-20,
         color-flat-l-10: variables.$color-system-success-flat-l-10,
@@ -94,7 +94,7 @@
         color-tran-30: variables.$color-system-caution-tran-30,
         color-tran-20: variables.$color-system-caution-tran-20,
         color-tran-10: variables.$color-system-caution-tran-10,
-        color-tran-0: variables.$color-system-caution-tran-0,
+        color-tran-00: variables.$color-system-caution-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-system-caution-flat-l-20,
         color-flat-l-10: variables.$color-system-caution-flat-l-10,
@@ -119,7 +119,7 @@
         color-tran-30: variables.$color-user-primary-tran-30,
         color-tran-20: variables.$color-user-primary-tran-20,
         color-tran-10: variables.$color-user-primary-tran-10,
-        color-tran-0: variables.$color-user-primary-tran-0,
+        color-tran-00: variables.$color-user-primary-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-user-primary-flat-l-20,
         color-flat-l-10: variables.$color-user-primary-flat-l-10,
@@ -144,7 +144,7 @@
         color-tran-30: variables.$color-user-secondary-tran-30,
         color-tran-20: variables.$color-user-secondary-tran-20,
         color-tran-10: variables.$color-user-secondary-tran-10,
-        color-tran-0: variables.$color-user-secondary-tran-0,
+        color-tran-00: variables.$color-user-secondary-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-user-secondary-flat-l-20,
         color-flat-l-10: variables.$color-user-secondary-flat-l-10,
@@ -169,7 +169,7 @@
         color-tran-30: variables.$color-weak-tran-30,
         color-tran-20: variables.$color-weak-tran-20,
         color-tran-10: variables.$color-weak-tran-10,
-        color-tran-0: variables.$color-weak-tran-0,
+        color-tran-00: variables.$color-weak-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-weak-flat-l-20,
         color-flat-l-10: variables.$color-weak-flat-l-10,
@@ -194,7 +194,7 @@
         color-tran-30: variables.$color-regular-tran-30,
         color-tran-20: variables.$color-regular-tran-20,
         color-tran-10: variables.$color-regular-tran-10,
-        color-tran-0: variables.$color-regular-tran-0,
+        color-tran-00: variables.$color-regular-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-regular-flat-l-20,
         color-flat-l-10: variables.$color-regular-flat-l-10,
@@ -219,7 +219,7 @@
         color-tran-30: variables.$color-strong-tran-30,
         color-tran-20: variables.$color-strong-tran-20,
         color-tran-10: variables.$color-strong-tran-10,
-        color-tran-0: variables.$color-strong-tran-0,
+        color-tran-00: variables.$color-strong-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-strong-flat-l-20,
         color-flat-l-10: variables.$color-strong-flat-l-10,
@@ -244,7 +244,7 @@
         color-tran-30: variables.$color-top-header-tran-30,
         color-tran-20: variables.$color-top-header-tran-20,
         color-tran-10: variables.$color-top-header-tran-10,
-        color-tran-0: variables.$color-top-header-tran-0,
+        color-tran-00: variables.$color-top-header-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-top-header-flat-l-20,
         color-flat-l-10: variables.$color-top-header-flat-l-10,
@@ -268,7 +268,7 @@
         color-tran-30: variables.$color-qs-tran-30,
         color-tran-20: variables.$color-qs-tran-20,
         color-tran-10: variables.$color-qs-tran-10,
-        color-tran-0: variables.$color-qs-tran-0,
+        color-tran-00: variables.$color-qs-tran-00,
         // Flat colors.
         color-flat-l-20: variables.$color-qs-flat-l-20,
         color-flat-l-10: variables.$color-qs-flat-l-10,

package/src/core/style/abstracts/mixins.scss

@@ -194,14 +194,17 @@
 }
 
 @mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md) {
-    font-family: variables.$font-family-title;
-    font-weight: variables.$font-weight-bold;
+    font-family: variables.$font-family-title !important;
+    font-weight: variables.$font-weight-bold !important;
 
     @include font-size($fs);
     @include line-height($lh);
 }
 
 @mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm) {
+    font-family: variables.$font-family-body !important;
+    font-weight: variables.$font-weight-normal;
+
     @include font-size($fs);
     @include line-height($lh);
 }
@@ -280,7 +283,7 @@
     $color-high-opacity: null;
 
     @if ($hex-color == null) {
-        $color-low-opacity: functions.get-pep-color(color-system-caution, color-tran-0);
+        $color-low-opacity: functions.get-pep-color(color-system-caution, color-tran-00);
         $color-high-opacity: functions.get-pep-color(color-system-caution, color-tran-60);
     } @else {
         $color-low-opacity: rgba($hex-color, 0);
@@ -485,7 +488,7 @@
     }
 
     &:not(.keep-background-on-focus) {
-        // background: functions.get-pep-color($color-map-key, color-tran-0); // TODO: In Table view is gray so what sould we do ask Yonatan.
+        // background: functions.get-pep-color($color-map-key, color-tran-00); // TODO: In Table view is gray so what sould we do ask Yonatan.
         background: functions.get-pep-color(color-system-primary-invert, color-base);
     }
 
@@ -654,11 +657,11 @@
 //  None - default
 // -----------------------------------------------------------------------------
 @mixin state-none-default() {
-    background: functions.get-pep-color(color-system-primary, color-tran-0);
+    background: functions.get-pep-color(color-system-primary, color-tran-00);
 }
 @mixin state-none-disable() {
     @include state-disabled();
-    background: functions.get-pep-color(color-system-primary, color-tran-0) !important;
+    background: functions.get-pep-color(color-system-primary, color-tran-00) !important;
 }
 @mixin state-none-hover() {
     @include state-weak-hover();