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

package/esm2020/attachment/attachment.module.mjs

@@ -10,8 +10,8 @@ import { PepAttachmentComponent } from './attachment.component';
 import * as i0 from "@angular/core";
 export class PepAttachmentModule {
 }
-PepAttachmentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepAttachmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepAttachmentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepAttachmentModule, declarations: [PepAttachmentComponent], imports: [CommonModule,
+PepAttachmentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAttachmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepAttachmentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepAttachmentModule, declarations: [PepAttachmentComponent], imports: [CommonModule,
         ReactiveFormsModule,
         // Material modules
         MatCommonModule,
@@ -20,7 +20,7 @@ PepAttachmentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         PepNgxLibModule,
         PepFieldTitleModule,
         PepFilesUploaderModule], exports: [PepAttachmentComponent] });
-PepAttachmentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepAttachmentModule, imports: [CommonModule,
+PepAttachmentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAttachmentModule, imports: [CommonModule,
         ReactiveFormsModule,
         // Material modules
         MatCommonModule,
@@ -29,7 +29,7 @@ PepAttachmentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         PepNgxLibModule,
         PepFieldTitleModule,
         PepFilesUploaderModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepAttachmentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAttachmentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/bread-crumbs/bread-crumbs.component.mjs

@@ -65,10 +65,10 @@ export class PepBreadCrumbsComponent {
         this.itemClick.emit({ source: item });
     }
 }
-PepBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepBreadCrumbsComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: { items: "items", displayType: "displayType", addSpacing: "addSpacing" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ng-container *ngIf=\"displayType === 'label'; then labelTemplate; else itemsTemplate\">\n</ng-container>\n<ng-template #labelTemplate>\n    <div *ngIf=\"items?.length > 0\" class=\"bread-crumbs-label color-dimmed ellipsis\" [ngClass]=\"{ 'pep-spacing-element': addSpacing }\"\n        [title]=\"getLabelTitle()\">\n        <div class=\"body-xs ellipsis\">\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <span *ngIf=\"!isFirst && !isLast\">&nbsp;{{ charSeparator }}&nbsp;</span>\n                <span *ngIf=\"!isLast\">{{ item.text }}</span>\n            </ng-container>\n        </div>\n        <div class=\" title-md ellipsis current color-main\" title=\"{{ items[items.length - 1]?.text }}\">\n            <span>{{ items[items.length - 1]?.text }}</span>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #itemsTemplate>\n    <ul *ngIf=\"items?.length > 0\" class=\"bread-crumbs-items body-sm ellipsis\">\n        <ng-container *ngIf=\"shrinkItems; then shrinkTemplate; else regularTemplate\">\n        </ng-container>\n\n        <ng-template #shrinkTemplate>\n            <li>\n                <a class=\"color-link\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\">...</a>\n                <mat-menu #menu=\"matMenu\">\n                    <ng-container *ngFor=\"let menuItem of items; let isLast = last\">\n                        <button mat-menu-item *ngIf=\"!isLast\" (click)=\"onBreadCrumbItemClick(menuItem)\"\n                            [title]=\"menuItem.title || menuItem.text\" [disabled]=\"menuItem.disabled\"\n                            [ngClass]=\"{ disabled: menuItem.disabled }\">\n                            <span>\n                                {{ menuItem.text }}\n                            </span>\n                        </button>\n                    </ng-container>\n                </mat-menu>\n            </li>\n            <li>\n                <mat-icon class=\"separator pep-spacing-element\">\n                    <pep-icon [name]=\"iconSeparator\">\n                    </pep-icon>\n                </mat-icon>\n            </li>\n            <li>\n                <span [title]=\"items[items.length - 1]?.title || items[items.length - 1]?.text\">\n                    {{ items[items.length - 1]?.text }}\n                </span>\n            </li>\n        </ng-template>\n        <ng-template #regularTemplate>\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <li>\n                    <a *ngIf=\"!item.disabled\" [title]=\"item.title || item.text\" href=\"javascript:void(0)\"\n                        class=\" color-link\" (click)=\"onBreadCrumbItemClick(item)\">{{ item.text }}</a>\n                    <span *ngIf=\"item.disabled\" [title]=\"item.title || item.text\">{{ item.text }}</span>\n                </li>\n                <li *ngIf=\"!isLast\">\n                    <mat-icon class=\"separator pep-spacing-element\">\n                        <pep-icon [name]=\"iconSeparator\">\n                        </pep-icon>\n                    </mat-icon>\n                </li>\n            </ng-container>\n        </ng-template>\n    </ul>\n</ng-template>", styles: [":host{display:grid}.bread-crumbs-label{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center}ul.bread-crumbs-items{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}ul.bread-crumbs-items li{display:inline-flex}ul.bread-crumbs-items li .separator{height:1rem;width:1rem}ul.bread-crumbs-items li a{text-decoration:unset}\n", ""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
-PepBreadCrumbsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepBreadCrumbsComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepBreadCrumbsComponent, decorators: [{
+PepBreadCrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepBreadCrumbsComponent, deps: [{ token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepBreadCrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepBreadCrumbsComponent, selector: "pep-bread-crumbs", inputs: { items: "items", displayType: "displayType", addSpacing: "addSpacing" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ng-container *ngIf=\"displayType === 'label'; then labelTemplate; else itemsTemplate\">\n</ng-container>\n<ng-template #labelTemplate>\n    <div *ngIf=\"items?.length > 0\" class=\"bread-crumbs-label color-dimmed ellipsis\" [ngClass]=\"{ 'pep-spacing-element': addSpacing }\"\n        [title]=\"getLabelTitle()\">\n        <div class=\"body-xs ellipsis\">\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <span *ngIf=\"!isFirst && !isLast\">&nbsp;{{ charSeparator }}&nbsp;</span>\n                <span *ngIf=\"!isLast\">{{ item.text }}</span>\n            </ng-container>\n        </div>\n        <div class=\" title-md ellipsis current color-main\" title=\"{{ items[items.length - 1]?.text }}\">\n            <span>{{ items[items.length - 1]?.text }}</span>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #itemsTemplate>\n    <ul *ngIf=\"items?.length > 0\" class=\"bread-crumbs-items body-sm ellipsis\">\n        <ng-container *ngIf=\"shrinkItems; then shrinkTemplate; else regularTemplate\">\n        </ng-container>\n\n        <ng-template #shrinkTemplate>\n            <li>\n                <a class=\"color-link\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\">...</a>\n                <mat-menu #menu=\"matMenu\">\n                    <ng-container *ngFor=\"let menuItem of items; let isLast = last\">\n                        <button mat-menu-item *ngIf=\"!isLast\" (click)=\"onBreadCrumbItemClick(menuItem)\"\n                            [title]=\"menuItem.title || menuItem.text\" [disabled]=\"menuItem.disabled\"\n                            [ngClass]=\"{ disabled: menuItem.disabled }\">\n                            <span>\n                                {{ menuItem.text }}\n                            </span>\n                        </button>\n                    </ng-container>\n                </mat-menu>\n            </li>\n            <li>\n                <mat-icon class=\"separator pep-spacing-element\">\n                    <pep-icon [name]=\"iconSeparator\">\n                    </pep-icon>\n                </mat-icon>\n            </li>\n            <li>\n                <span [title]=\"items[items.length - 1]?.title || items[items.length - 1]?.text\">\n                    {{ items[items.length - 1]?.text }}\n                </span>\n            </li>\n        </ng-template>\n        <ng-template #regularTemplate>\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <li>\n                    <a *ngIf=\"!item.disabled\" [title]=\"item.title || item.text\" href=\"javascript:void(0)\"\n                        class=\" color-link\" (click)=\"onBreadCrumbItemClick(item)\">{{ item.text }}</a>\n                    <span *ngIf=\"item.disabled\" [title]=\"item.title || item.text\">{{ item.text }}</span>\n                </li>\n                <li *ngIf=\"!isLast\">\n                    <mat-icon class=\"separator pep-spacing-element\">\n                        <pep-icon [name]=\"iconSeparator\">\n                        </pep-icon>\n                    </mat-icon>\n                </li>\n            </ng-container>\n        </ng-template>\n    </ul>\n</ng-template>", styles: [":host{display:grid}.bread-crumbs-label{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center}ul.bread-crumbs-items{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}ul.bread-crumbs-items li{display:inline-flex}ul.bread-crumbs-items li .separator{height:1rem;width:1rem}ul.bread-crumbs-items li a{text-decoration:unset}\n", ""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+PepBreadCrumbsComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepBreadCrumbsComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepBreadCrumbsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-bread-crumbs', template: "<ng-container *ngIf=\"displayType === 'label'; then labelTemplate; else itemsTemplate\">\n</ng-container>\n<ng-template #labelTemplate>\n    <div *ngIf=\"items?.length > 0\" class=\"bread-crumbs-label color-dimmed ellipsis\" [ngClass]=\"{ 'pep-spacing-element': addSpacing }\"\n        [title]=\"getLabelTitle()\">\n        <div class=\"body-xs ellipsis\">\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <span *ngIf=\"!isFirst && !isLast\">&nbsp;{{ charSeparator }}&nbsp;</span>\n                <span *ngIf=\"!isLast\">{{ item.text }}</span>\n            </ng-container>\n        </div>\n        <div class=\" title-md ellipsis current color-main\" title=\"{{ items[items.length - 1]?.text }}\">\n            <span>{{ items[items.length - 1]?.text }}</span>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #itemsTemplate>\n    <ul *ngIf=\"items?.length > 0\" class=\"bread-crumbs-items body-sm ellipsis\">\n        <ng-container *ngIf=\"shrinkItems; then shrinkTemplate; else regularTemplate\">\n        </ng-container>\n\n        <ng-template #shrinkTemplate>\n            <li>\n                <a class=\"color-link\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\">...</a>\n                <mat-menu #menu=\"matMenu\">\n                    <ng-container *ngFor=\"let menuItem of items; let isLast = last\">\n                        <button mat-menu-item *ngIf=\"!isLast\" (click)=\"onBreadCrumbItemClick(menuItem)\"\n                            [title]=\"menuItem.title || menuItem.text\" [disabled]=\"menuItem.disabled\"\n                            [ngClass]=\"{ disabled: menuItem.disabled }\">\n                            <span>\n                                {{ menuItem.text }}\n                            </span>\n                        </button>\n                    </ng-container>\n                </mat-menu>\n            </li>\n            <li>\n                <mat-icon class=\"separator pep-spacing-element\">\n                    <pep-icon [name]=\"iconSeparator\">\n                    </pep-icon>\n                </mat-icon>\n            </li>\n            <li>\n                <span [title]=\"items[items.length - 1]?.title || items[items.length - 1]?.text\">\n                    {{ items[items.length - 1]?.text }}\n                </span>\n            </li>\n        </ng-template>\n        <ng-template #regularTemplate>\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <li>\n                    <a *ngIf=\"!item.disabled\" [title]=\"item.title || item.text\" href=\"javascript:void(0)\"\n                        class=\" color-link\" (click)=\"onBreadCrumbItemClick(item)\">{{ item.text }}</a>\n                    <span *ngIf=\"item.disabled\" [title]=\"item.title || item.text\">{{ item.text }}</span>\n                </li>\n                <li *ngIf=\"!isLast\">\n                    <mat-icon class=\"separator pep-spacing-element\">\n                        <pep-icon [name]=\"iconSeparator\">\n                        </pep-icon>\n                    </mat-icon>\n                </li>\n            </ng-container>\n        </ng-template>\n    </ul>\n</ng-template>", styles: [":host{display:grid}.bread-crumbs-label{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center}ul.bread-crumbs-items{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}ul.bread-crumbs-items li{display:inline-flex}ul.bread-crumbs-items li .separator{height:1rem;width:1rem}ul.bread-crumbs-items li a{text-decoration:unset}\n"] }]
         }, {

package/esm2020/bread-crumbs/bread-crumbs.module.mjs

@@ -16,22 +16,22 @@ export class PepBreadCrumbsModule {
         ]);
     }
 }
-PepBreadCrumbsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepBreadCrumbsModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepBreadCrumbsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepBreadCrumbsModule, declarations: [PepBreadCrumbsComponent], imports: [CommonModule,
+PepBreadCrumbsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepBreadCrumbsModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepBreadCrumbsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepBreadCrumbsModule, declarations: [PepBreadCrumbsComponent], imports: [CommonModule,
         // Material modules
         MatIconModule,
         MatMenuModule,
         // ngx-lib modules
         PepNgxLibModule,
         PepIconModule], exports: [PepBreadCrumbsComponent] });
-PepBreadCrumbsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepBreadCrumbsModule, imports: [CommonModule,
+PepBreadCrumbsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepBreadCrumbsModule, imports: [CommonModule,
         // Material modules
         MatIconModule,
         MatMenuModule,
         // ngx-lib modules
         PepNgxLibModule,
         PepIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepBreadCrumbsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepBreadCrumbsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/button/button.component.mjs

@@ -107,9 +107,9 @@ export class PepButtonComponent {
         this.buttonClick.emit(buttonClick);
     }
 }
-PepButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PepButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepButtonComponent, selector: "pep-button", inputs: { key: "key", value: "value", styleType: "styleType", styleStateType: "styleStateType", sizeType: "sizeType", classNames: "classNames", disabled: "disabled", iconName: "iconName", iconPosition: "iconPosition", visible: "visible" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n    class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n    [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\">\n    </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n        {{value}}\n    </span>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [":host{display:grid}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonComponent, decorators: [{
+PepButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PepButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepButtonComponent, selector: "pep-button", inputs: { key: "key", value: "value", styleType: "styleType", styleStateType: "styleStateType", sizeType: "sizeType", classNames: "classNames", disabled: "disabled", iconName: "iconName", iconPosition: "iconPosition", visible: "visible" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n    class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n    [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\">\n    </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n        {{value}}\n    </span>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [":host{display:grid}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.PepDataQaDirective, selector: "[pepDataQa]", inputs: ["pepDataQa"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-button', template: "<button mat-button [pepDataQa]=\"key ? key : value\"\n    class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n    [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\">\n    </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n    <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\n        [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n        {{value}}\n    </span>\n    <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\n    </mat-icon>\n</ng-template>", styles: [":host{display:grid}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { key: [{

package/esm2020/button/button.module.mjs

@@ -9,8 +9,8 @@ import { PepButtonComponent } from './button.component';
 import * as i0 from "@angular/core";
 export class PepButtonModule {
 }
-PepButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepButtonModule, declarations: [PepButtonComponent], imports: [CommonModule,
+PepButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepButtonModule, declarations: [PepButtonComponent], imports: [CommonModule,
         // Material modules
         MatCommonModule,
         MatButtonModule,
@@ -18,7 +18,7 @@ PepButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         // ngx-lib modules
         PepNgxLibModule,
         PepIconModule], exports: [PepButtonComponent] });
-PepButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonModule, imports: [CommonModule,
+PepButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonModule, imports: [CommonModule,
         // Material modules
         MatCommonModule,
         MatButtonModule,
@@ -26,7 +26,7 @@ PepButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         // ngx-lib modules
         PepNgxLibModule,
         PepIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/carousel/carousel-item.directive.mjs

@@ -13,9 +13,9 @@ export class PepCarouselItemDirective {
         this._dragDisabled = value;
     }
 }
-PepCarouselItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCarouselItemDirective, deps: [{ token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PepCarouselItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: { dragDisabled: "dragDisabled" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCarouselItemDirective, decorators: [{
+PepCarouselItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselItemDirective, deps: [{ token: ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PepCarouselItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: { dragDisabled: "dragDisabled" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pepCarouselItem]',

package/esm2020/carousel/carousel.component.mjs

@@ -663,13 +663,13 @@ export class PepCarouselComponent {
         // }
     }
 }
-PepCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCarouselComponent, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-PepCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepCarouselComponent, selector: "pep-carousel", inputs: { scrollbarHidden: "scrollbarHidden", disabled: "disabled", xDisabled: "xDisabled", yDisabled: "yDisabled", xWheelEnabled: "xWheelEnabled", dragDisabled: "dragDisabled", snapDisabled: "snapDisabled", snapOffset: "snapOffset", snapDuration: "snapDuration" }, outputs: { dsInitialized: "dsInitialized", indexChanged: "indexChanged", reachesLeftBound: "reachesLeftBound", reachesRightBound: "reachesRightBound", snapAnimationFinished: "snapAnimationFinished", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { listeners: { "wheel": "onWheel($event)", "window:resize": "onWindowResize()" }, properties: { "style.pointer-events": "this._pointerEvents" } }, queries: [{ propertyName: "_children", predicate: PepCarouselItemDirective, descendants: true }], viewQueries: [{ propertyName: "_contentRef", first: true, predicate: ["contentRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+PepCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselComponent, deps: [{ token: ElementRef }, { token: Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+PepCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepCarouselComponent, selector: "pep-carousel", inputs: { scrollbarHidden: "scrollbarHidden", disabled: "disabled", xDisabled: "xDisabled", yDisabled: "yDisabled", xWheelEnabled: "xWheelEnabled", dragDisabled: "dragDisabled", snapDisabled: "snapDisabled", snapOffset: "snapOffset", snapDuration: "snapDuration" }, outputs: { dsInitialized: "dsInitialized", indexChanged: "indexChanged", reachesLeftBound: "reachesLeftBound", reachesRightBound: "reachesRightBound", snapAnimationFinished: "snapAnimationFinished", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { listeners: { "wheel": "onWheel($event)", "window:resize": "onWindowResize()" }, properties: { "style.pointer-events": "this._pointerEvents" } }, queries: [{ propertyName: "_children", predicate: PepCarouselItemDirective, descendants: true }], viewQueries: [{ propertyName: "_contentRef", first: true, predicate: ["contentRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="carousel-content" #contentRef>
             <ng-content></ng-content>
         </div>
     `, isInline: true, styles: [":host{overflow:hidden;display:block}.carousel-content{height:100%;overflow:auto;white-space:nowrap}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-carousel', template: `
         <div class="carousel-content" #contentRef>

package/esm2020/carousel/carousel.module.mjs

@@ -4,10 +4,10 @@ import { PepCarouselItemDirective } from './carousel-item.directive';
 import * as i0 from "@angular/core";
 export class PepCarouselModule {
 }
-PepCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PepCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepCarouselModule, declarations: [PepCarouselComponent, PepCarouselItemDirective], exports: [PepCarouselComponent, PepCarouselItemDirective] });
-PepCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCarouselModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCarouselModule, decorators: [{
+PepCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule, declarations: [PepCarouselComponent, PepCarouselItemDirective], exports: [PepCarouselComponent, PepCarouselItemDirective] });
+PepCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCarouselModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [PepCarouselComponent, PepCarouselItemDirective],

package/esm2020/checkbox/checkbox.component.mjs

@@ -125,9 +125,9 @@ export class PepCheckboxComponent {
         this.valueChange.emit(value);
     }
 }
-PepCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCheckboxComponent, deps: [{ token: i0.Renderer2 }, { token: i1.PepCustomizationService }, { token: i0.ElementRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PepCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepCheckboxComponent, selector: "pep-checkbox", inputs: { key: "key", value: "value", label: "label", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", additionalValue: "additionalValue", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", visible: "visible" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}\n", ""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCheckboxComponent, decorators: [{
+PepCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCheckboxComponent, deps: [{ token: i0.Renderer2 }, { token: i1.PepCustomizationService }, { token: i0.ElementRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+PepCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepCheckboxComponent, selector: "pep-checkbox", inputs: { key: "key", value: "value", label: "label", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", additionalValue: "additionalValue", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", visible: "visible" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}\n", ""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.PepCustomizationService }, { type: i0.ElementRef }, { type: i2.TranslateService }]; }, propDecorators: { key: [{

package/esm2020/checkbox/checkbox.module.mjs

@@ -17,8 +17,8 @@ export class PepCheckboxModule {
         this.pepIconRegistry.registerIcons([pepIconSystemBolt]);
     }
 }
-PepCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCheckboxModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepCheckboxModule, declarations: [PepCheckboxComponent], imports: [CommonModule,
+PepCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCheckboxModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepCheckboxModule, declarations: [PepCheckboxComponent], imports: [CommonModule,
         ReactiveFormsModule,
         // Material modules
         MatCommonModule,
@@ -29,7 +29,7 @@ PepCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         PepNgxLibModule,
         PepIconModule,
         PepFieldTitleModule], exports: [PepCheckboxComponent] });
-PepCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCheckboxModule, imports: [CommonModule,
+PepCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCheckboxModule, imports: [CommonModule,
         ReactiveFormsModule,
         // Material modules
         MatCommonModule,
@@ -40,7 +40,7 @@ PepCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
         PepNgxLibModule,
         PepIconModule,
         PepFieldTitleModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/color/color-picker.component.mjs

@@ -212,9 +212,9 @@ export class PepColorPickerComponent {
     }
 }
 PepColorPickerComponent.CURRENT_HUE = '--pep-color-picker-current-hue';
-PepColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepColorPickerComponent, deps: [{ token: i1.PepColorService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-PepColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepColorPickerComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: i8.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "background", "step", "minValue", "maxValue", "value"], outputs: ["valueChange", "inputChange"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i11.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepColorPickerComponent, decorators: [{
+PepColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorPickerComponent, deps: [{ token: i1.PepColorService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+PepColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepColorPickerComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: i8.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "background", "step", "minValue", "maxValue", "value"], outputs: ["valueChange", "inputChange"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }, { kind: "component", type: i11.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorPickerComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PepColorService }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{

package/esm2020/color/color.component.mjs

@@ -55,9 +55,9 @@ export class PepColorComponent {
         });
     }
 }
-PepColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepColorComponent, deps: [{ token: i1.PepDialogService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PepColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepColorComponent, selector: "pep-color", inputs: { key: "key", value: "value", label: "label", disabled: "disabled", xAlignment: "xAlignment", rowSpan: "rowSpan", type: "type", showTitle: "showTitle", renderTitle: "renderTitle", showAAComplient: "showAAComplient", checkAAComplient: "checkAAComplient", layoutType: "layoutType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n    [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n    <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n        [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n        style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n        <button *ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n            pepButtonBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"system_edit\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</div>", styles: [":host{display:grid}.pepperi-color-container .pepperi-color,.pepperi-color-container .pep-color,.pep-color-container .pepperi-color,.pep-color-container .pep-color{padding:0;display:grid}.pepperi-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pep-color-container .pep-color .btn-edit{width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 var(--pep-spacing-md, .75rem);justify-self:end;align-self:center}.pepperi-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pep-color-container.right-alignment .pep-color .btn-edit{justify-self:start}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.PepButtonBlurDirective, selector: "[pepButtonBlur]" }, { kind: "directive", type: i5.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i6.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepColorComponent, decorators: [{
+PepColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorComponent, deps: [{ token: i1.PepDialogService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PepColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepColorComponent, selector: "pep-color", inputs: { key: "key", value: "value", label: "label", disabled: "disabled", xAlignment: "xAlignment", rowSpan: "rowSpan", type: "type", showTitle: "showTitle", renderTitle: "renderTitle", showAAComplient: "showAAComplient", checkAAComplient: "checkAAComplient", layoutType: "layoutType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n    [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n    <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n        [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n        style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n        <button *ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n            pepButtonBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"system_edit\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</div>", styles: [":host{display:grid}.pepperi-color-container .pepperi-color,.pepperi-color-container .pep-color,.pep-color-container .pepperi-color,.pep-color-container .pep-color{padding:0;display:grid}.pepperi-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pep-color-container .pep-color .btn-edit{width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 var(--pep-spacing-md, .75rem);justify-self:end;align-self:center}.pepperi-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pep-color-container.right-alignment .pep-color .btn-edit{justify-self:start}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.PepButtonBlurDirective, selector: "[pepButtonBlur]" }, { kind: "directive", type: i5.PepRtlDirectionDirective, selector: "[pepRtlDirection]" }, { kind: "component", type: i6.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-color', template: "<pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n    [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n    <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n        [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n        style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n        <button *ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n            pepButtonBlur mat-button>\n            <mat-icon>\n                <pep-icon name=\"system_edit\"></pep-icon>\n            </mat-icon>\n        </button>\n    </div>\n</div>", styles: [":host{display:grid}.pepperi-color-container .pepperi-color,.pepperi-color-container .pep-color,.pep-color-container .pepperi-color,.pep-color-container .pep-color{padding:0;display:grid}.pepperi-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pep-color-container .pep-color .btn-edit{width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 var(--pep-spacing-md, .75rem);justify-self:end;align-self:center}.pepperi-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pep-color-container.right-alignment .pep-color .btn-edit{justify-self:start}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PepDialogService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { key: [{

package/esm2020/color/color.module.mjs

@@ -28,8 +28,8 @@ export class PepColorModule {
         ]);
     }
 }
-PepColorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepColorModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepColorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepColorModule, declarations: [PepColorComponent, PepColorPickerComponent], imports: [CommonModule,
+PepColorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepColorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, declarations: [PepColorComponent, PepColorPickerComponent], imports: [CommonModule,
         ReactiveFormsModule,
         // Material modules
         MatCommonModule,
@@ -46,7 +46,7 @@ PepColorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         PepSliderModule,
         PepFieldTitleModule,
         PepTextboxModule], exports: [PepColorComponent] });
-PepColorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepColorModule, imports: [CommonModule,
+PepColorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, imports: [CommonModule,
         ReactiveFormsModule,
         // Material modules
         MatCommonModule,
@@ -63,7 +63,7 @@ PepColorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         PepSliderModule,
         PepFieldTitleModule,
         PepTextboxModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepColorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/core/clipboard/clipboard.directive.mjs

@@ -8,9 +8,9 @@ import * as i0 from "@angular/core";
 // will be copied to the ClipboardService and a (clipboardCopy) event will be emitted.
 export class PepClipboardDirective {
 }
-PepClipboardDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-PepClipboardDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: PepClipboardDirective, selector: "[pepClipboard]", inputs: { value: ["clipboard", "value"] }, outputs: { copyEvent: "clipboardCopy", errorEvent: "clipboardError" }, host: { listeners: { "click": "copyToClipboard()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepClipboardDirective, decorators: [{
+PepClipboardDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+PepClipboardDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepClipboardDirective, selector: "[pepClipboard]", inputs: { value: ["clipboard", "value"] }, outputs: { copyEvent: "clipboardCopy", errorEvent: "clipboardError" }, host: { listeners: { "click": "copyToClipboard()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepClipboardDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pepClipboard]',

package/esm2020/core/clipboard/clipboard.service.mjs

@@ -3,9 +3,9 @@ import { Injectable } from '@angular/core';
 import * as i0 from "@angular/core";
 export class PepClipboardService {
 }
-PepClipboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PepClipboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepClipboardService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepClipboardService, decorators: [{
+PepClipboardService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PepClipboardService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepClipboardService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepClipboardService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2020/core/common/directives/auto-width.directive.mjs

@@ -64,9 +64,9 @@ export class PepInputAutoWidthDirective {
         return ctx ? ctx.measureText(value).width : 0;
     }
 }
-PepInputAutoWidthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepInputAutoWidthDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PepInputAutoWidthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: { includePadding: "includePadding" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepInputAutoWidthDirective, decorators: [{
+PepInputAutoWidthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInputAutoWidthDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PepInputAutoWidthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepInputAutoWidthDirective, selector: "[pepAutoWidth]", inputs: { includePadding: "includePadding" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInputAutoWidthDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pepAutoWidth]',

package/esm2020/core/common/directives/button-blur.directive.mjs

@@ -10,9 +10,9 @@ export class PepButtonBlurDirective {
         }, 0);
     }
 }
-PepButtonBlurDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonBlurDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PepButtonBlurDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: PepButtonBlurDirective, selector: "[pepButtonBlur]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonBlurDirective, decorators: [{
+PepButtonBlurDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonBlurDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PepButtonBlurDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepButtonBlurDirective, selector: "[pepButtonBlur]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonBlurDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pepButtonBlur]',

package/esm2020/core/common/directives/button-loader.directive.mjs

@@ -81,9 +81,9 @@ export class PepButtonLoaderDirective {
         }
     }
 }
-PepButtonLoaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonLoaderDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PepUtilitiesService }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PepButtonLoaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: PepButtonLoaderDirective, selector: "[pepButtonLoader]", inputs: { loaderTime: "loaderTime", loaderColor: "loaderColor", loaderWidth: "loaderWidth", loaderHeight: "loaderHeight", ignoreDisabledStyle: "ignoreDisabledStyle", finish: "finish" }, host: { listeners: { "click": "clickEvent($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepButtonLoaderDirective, decorators: [{
+PepButtonLoaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonLoaderDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PepUtilitiesService }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+PepButtonLoaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepButtonLoaderDirective, selector: "[pepButtonLoader]", inputs: { loaderTime: "loaderTime", loaderColor: "loaderColor", loaderWidth: "loaderWidth", loaderHeight: "loaderHeight", ignoreDisabledStyle: "ignoreDisabledStyle", finish: "finish" }, host: { listeners: { "click": "clickEvent($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepButtonLoaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pepButtonLoader]',

package/esm2020/core/common/directives/data-qa.directive.mjs

@@ -9,9 +9,9 @@ export class PepDataQaDirective {
         this.renderer.setAttribute(this.element.nativeElement, 'data-qa', this.dataQa);
     }
 }
-PepDataQaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDataQaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PepDataQaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: PepDataQaDirective, selector: "[pepDataQa]", inputs: { dataQa: ["pepDataQa", "dataQa"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDataQaDirective, decorators: [{
+PepDataQaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDataQaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PepDataQaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepDataQaDirective, selector: "[pepDataQa]", inputs: { dataQa: ["pepDataQa", "dataQa"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDataQaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pepDataQa]',

package/esm2020/core/common/directives/menu-blur.directive.mjs

@@ -15,9 +15,9 @@ export class PepMenuBlurDirective {
         }, 0);
     }
 }
-PepMenuBlurDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepMenuBlurDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PepMenuBlurDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: PepMenuBlurDirective, selector: "[pepMenuBlur]", host: { listeners: { "menuClosed": "menuClosedEvent()", "menuOpened": "menuOpenedEvent()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepMenuBlurDirective, decorators: [{
+PepMenuBlurDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepMenuBlurDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PepMenuBlurDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepMenuBlurDirective, selector: "[pepMenuBlur]", host: { listeners: { "menuClosed": "menuClosedEvent()", "menuOpened": "menuOpenedEvent()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepMenuBlurDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pepMenuBlur]',