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

package/fesm2020/pepperi-addons-ngx-lib-dialog.mjs

@@ -28,9 +28,9 @@ class PepDialogComponent {
         this.close.emit(null);
     }
 }
-PepDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepDialogComponent, selector: "pep-dialog", inputs: { title: "title", showClose: "showClose", showHeader: "showHeader", showFooter: "showFooter" }, outputs: { close: "close" }, ngImport: i0, template: "<div mat-dialog-title *ngIf=\"showHeader\" class=\"dialog-header-container\">\n    <span class=\"dialog-title\" *ngIf=\"title?.length\">\n        {{ title }}\n    </span>\n    <button mat-button *ngIf=\"showClose\" (click)=\"closeDialog()\" class=\"pep-button icon-button md weak dialog-close\">\n        <mat-icon>\n            <pep-icon name=\"system_close\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</div>\n<div mat-dialog-content>\n    <ng-content select=\"[pep-dialog-content]\"></ng-content>\n</div>\n<div mat-dialog-actions *ngIf=\"showFooter\" class=\"pep-border-top\">\n    <ng-content select=\"[pep-dialog-actions]\"></ng-content>\n</div>", styles: ["", ".pepperi-dialog,.pep-dialog{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDialogComponent, decorators: [{
+PepDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDialogComponent, selector: "pep-dialog", inputs: { title: "title", showClose: "showClose", showHeader: "showHeader", showFooter: "showFooter" }, outputs: { close: "close" }, ngImport: i0, template: "<div mat-dialog-title *ngIf=\"showHeader\" class=\"dialog-header-container\">\n    <span class=\"dialog-title\" *ngIf=\"title?.length\">\n        {{ title }}\n    </span>\n    <button mat-button *ngIf=\"showClose\" (click)=\"closeDialog()\" class=\"pep-button icon-button md weak dialog-close\">\n        <mat-icon>\n            <pep-icon name=\"system_close\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</div>\n<div mat-dialog-content>\n    <ng-content select=\"[pep-dialog-content]\"></ng-content>\n</div>\n<div mat-dialog-actions *ngIf=\"showFooter\" class=\"pep-border-top\">\n    <ng-content select=\"[pep-dialog-actions]\"></ng-content>\n</div>", styles: ["", ".pepperi-dialog,.pep-dialog{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-dialog', template: "<div mat-dialog-title *ngIf=\"showHeader\" class=\"dialog-header-container\">\n    <span class=\"dialog-title\" *ngIf=\"title?.length\">\n        {{ title }}\n    </span>\n    <button mat-button *ngIf=\"showClose\" (click)=\"closeDialog()\" class=\"pep-button icon-button md weak dialog-close\">\n        <mat-icon>\n            <pep-icon name=\"system_close\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</div>\n<div mat-dialog-content>\n    <ng-content select=\"[pep-dialog-content]\"></ng-content>\n</div>\n<div mat-dialog-actions *ngIf=\"showFooter\" class=\"pep-border-top\">\n    <ng-content select=\"[pep-dialog-actions]\"></ng-content>\n</div>", styles: [".pepperi-dialog,.pep-dialog{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
@@ -95,9 +95,9 @@ class PepDefaultDialogComponent {
         this.dialogRef.close(res);
     }
 }
-PepDefaultDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDefaultDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-PepDefaultDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepDefaultDialogComponent, selector: "ng-component", ngImport: i0, template: "<pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\"\n    [title]=\"data?.title\" (close)=\"closeDialog($event)\">\n    <div pep-dialog-content [innerHtml]=\"data?.content | pepSafeHtml\"></div>\n    <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n        <ng-container [ngSwitch]=\"data?.actionsType\">\n            <ng-container *ngSwitchCase=\"'close'\">\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-continue'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.CONTINUE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-ok'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.OK' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-delete'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong caution\">\n                    {{ 'ACTIONS.DELETE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'custom'\">\n                <ng-container *ngFor=\"let btn of data?.actionButtons\">\n                    <!-- [mat-dialog-close]=\"btn?.callback ? btn.callback : null\" -->\n                    <button mat-button (click)=\"onActionButtonClicked(btn)\" class=\"pep-spacing-element pep-button md\"\n                        [ngClass]=\"btn?.className != '' ? btn?.className : 'weak'\">\n                        {{ btn?.title }}\n                    </button>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</pep-dialog>", styles: [""], 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.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: PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "pipe", type: i2$2.PepSafeHtmlPipe, name: "pepSafeHtml" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDefaultDialogComponent, decorators: [{
+PepDefaultDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDefaultDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+PepDefaultDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDefaultDialogComponent, selector: "ng-component", ngImport: i0, template: "<pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\"\n    [title]=\"data?.title\" (close)=\"closeDialog($event)\">\n    <div pep-dialog-content [innerHtml]=\"data?.content | pepSafeHtml\"></div>\n    <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n        <ng-container [ngSwitch]=\"data?.actionsType\">\n            <ng-container *ngSwitchCase=\"'close'\">\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-continue'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.CONTINUE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-ok'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.OK' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-delete'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong caution\">\n                    {{ 'ACTIONS.DELETE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'custom'\">\n                <ng-container *ngFor=\"let btn of data?.actionButtons\">\n                    <!-- [mat-dialog-close]=\"btn?.callback ? btn.callback : null\" -->\n                    <button mat-button (click)=\"onActionButtonClicked(btn)\" class=\"pep-spacing-element pep-button md\"\n                        [ngClass]=\"btn?.className != '' ? btn?.className : 'weak'\">\n                        {{ btn?.title }}\n                    </button>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</pep-dialog>", styles: [""], 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.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: PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "pipe", type: i2$2.PepSafeHtmlPipe, name: "pepSafeHtml" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDefaultDialogComponent, decorators: [{
             type: Component,
             args: [{ encapsulation: ViewEncapsulation.None, template: "<pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\"\n    [title]=\"data?.title\" (close)=\"closeDialog($event)\">\n    <div pep-dialog-content [innerHtml]=\"data?.content | pepSafeHtml\"></div>\n    <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n        <ng-container [ngSwitch]=\"data?.actionsType\">\n            <ng-container *ngSwitchCase=\"'close'\">\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-continue'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.CONTINUE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-ok'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong\">\n                    {{ 'ACTIONS.OK' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'cancel-delete'\">\n                <button mat-button (click)=\"closeDialog(false)\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button (click)=\"closeDialog(true)\" class=\"pep-spacing-element pep-button md strong caution\">\n                    {{ 'ACTIONS.DELETE' | translate }}\n                </button>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'custom'\">\n                <ng-container *ngFor=\"let btn of data?.actionButtons\">\n                    <!-- [mat-dialog-close]=\"btn?.callback ? btn.callback : null\" -->\n                    <button mat-button (click)=\"onActionButtonClicked(btn)\" class=\"pep-spacing-element pep-button md\"\n                        [ngClass]=\"btn?.className != '' ? btn?.className : 'weak'\">\n                        {{ btn?.title }}\n                    </button>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</pep-dialog>" }]
         }], ctorParameters: function () { return [{ type: PepDialogData, decorators: [{
@@ -170,9 +170,9 @@ class PepDialogService {
         return dialogRef;
     }
 }
-PepDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDialogService, deps: [{ token: i1.MatDialog }, { token: i2$2.PepLayoutService }, { token: i3$1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-PepDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDialogService, decorators: [{
+PepDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogService, deps: [{ token: i1.MatDialog }, { token: i2$2.PepLayoutService }, { token: i3$1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+PepDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -185,8 +185,8 @@ class PepDialogModule {
         this.pepIconRegistry.registerIcons([pepIconSystemClose]);
     }
 }
-PepDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDialogModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepDialogModule, declarations: [PepDefaultDialogComponent, PepDialogComponent], imports: [CommonModule,
+PepDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDialogModule, declarations: [PepDefaultDialogComponent, PepDialogComponent], imports: [CommonModule,
         // Material modules,
         MatCommonModule,
         MatButtonModule,
@@ -195,7 +195,7 @@ PepDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         // ngx-lib modules
         PepNgxLibModule,
         PepIconModule], exports: [PepDialogComponent] });
-PepDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDialogModule, providers: [PepDialogService], imports: [CommonModule,
+PepDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogModule, providers: [PepDialogService], imports: [CommonModule,
         // Material modules,
         MatCommonModule,
         MatButtonModule,
@@ -204,7 +204,7 @@ PepDialogModule.ɵ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: PepDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2020/pepperi-addons-ngx-lib-draggable-items.mjs

@@ -25,9 +25,9 @@ class DraggableItemComponent {
         //
     }
 }
-DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DraggableItemComponent, decorators: [{
+DraggableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DraggableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: { title: "title", data: "data", disabled: "disabled" }, ngImport: i0, template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-draggable-item', template: "<div class=\"pep-draggable-item-container\" [ngClass]=\"{ 'disable': disabled }\">\n    <div class=\"\">\n        <pep-button classNames=\"lock-events\" sizeType=\"xs\" iconName=\"system_move\"></pep-button>\n    </div>\n    <div *ngIf=\"title !== ''\" class=\"title-container\">\n        <span class=\"body-sm bold ellipsis title\" title=\"{{title}}\">{{title}}</span>\n    </div>\n    <div class=\"actions\">\n        <ng-content select=\"[pep-actions]\"></ng-content>\n    </div>\n</div>", styles: [":host{display:block}.pep-draggable-item-container{height:2.5rem;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);padding-inline:var(--pep-spacing-sm, .5rem);background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-draggable-item-container.disable{opacity:.35;pointer-events:none}.pep-draggable-item-container .title-container{overflow-x:hidden;margin-inline:var(--pep-spacing-sm, .5rem)}.pep-draggable-item-container .title-container .title{display:block}.pep-draggable-item-container .actions{display:inline-flex;gap:var(--pep-spacing-xs, .25rem)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
@@ -104,9 +104,9 @@ class DraggableItemsComponent {
         this.itemDragEnded.emit(event);
     }
 }
-DraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DraggableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DraggableItemsComponent, selector: "pep-draggable-items", inputs: { containerId: "containerId", showSearch: "showSearch", title: "title", titleType: "titleType", titleSizeType: "titleSizeType", itemPlaceholderType: "itemPlaceholderType", dropAreaIds: "dropAreaIds", items: "items" }, outputs: { itemDragStarted: "itemDragStarted", itemDragEnded: "itemDragEnded" }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\">\r\n        <div class=\"draggable-items-wrapper\">\r\n            <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n                [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n                [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n        \r\n                <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                    <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n                </ng-container>\r\n            </pep-draggable-item>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.draggable-items-overflow{overflow:auto;padding:var(--pep-spacing-lg, 1rem) 0}.draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.draggable-items-wrapper .draggble-item{cursor:grab}.draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container .search-button{display:flex;align-self:center}.placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DraggableItemsComponent, decorators: [{
+DraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DraggableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemsComponent, selector: "pep-draggable-items", inputs: { containerId: "containerId", showSearch: "showSearch", title: "title", titleType: "titleType", titleSizeType: "titleSizeType", itemPlaceholderType: "itemPlaceholderType", dropAreaIds: "dropAreaIds", items: "items" }, outputs: { itemDragStarted: "itemDragStarted", itemDragEnded: "itemDragEnded" }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\">\r\n        <div class=\"draggable-items-wrapper\">\r\n            <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n                [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n                [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n        \r\n                <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                    <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n                </ng-container>\r\n            </pep-draggable-item>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.draggable-items-overflow{overflow:auto;padding:var(--pep-spacing-lg, 1rem) 0}.draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.draggable-items-wrapper .draggble-item{cursor:grab}.draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container .search-button{display:flex;align-self:center}.placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-draggable-items', template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\">\r\n        <div class=\"draggable-items-wrapper\">\r\n            <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n                [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n                [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n        \r\n                <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                    <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n                </ng-container>\r\n            </pep-draggable-item>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.draggable-items-overflow{overflow:auto;padding:var(--pep-spacing-lg, 1rem) 0}.draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.draggable-items-wrapper .draggble-item{cursor:grab}.draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container .search-button{display:flex;align-self:center}.placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { containerId: [{
@@ -139,8 +139,8 @@ class PepDraggableItemsModule {
         ]);
     }
 }
-PepDraggableItemsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDraggableItemsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepDraggableItemsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepDraggableItemsModule, declarations: [DraggableItemsComponent,
+PepDraggableItemsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepDraggableItemsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, declarations: [DraggableItemsComponent,
         DraggableItemComponent], imports: [CommonModule,
         ReactiveFormsModule,
         PepNgxLibModule,
@@ -149,14 +149,14 @@ PepDraggableItemsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0",
         PepSearchModule,
         DragDropModule], exports: [DraggableItemsComponent,
         DraggableItemComponent] });
-PepDraggableItemsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDraggableItemsModule, imports: [CommonModule,
+PepDraggableItemsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, imports: [CommonModule,
         ReactiveFormsModule,
         PepNgxLibModule,
         PepButtonModule,
         PepIconModule,
         PepSearchModule,
         DragDropModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepDraggableItemsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDraggableItemsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/fesm2020/pepperi-addons-ngx-lib-field-title.mjs

@@ -23,9 +23,9 @@ class PepFieldTitleComponent {
         this.inputLength = 0;
     }
 }
-PepFieldTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepFieldTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepFieldTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: PepFieldTitleComponent, selector: "pep-field-title", inputs: { label: "label", mandatory: "mandatory", disabled: "disabled", maxFieldCharacters: "maxFieldCharacters", hint: "hint", xAlignment: "xAlignment", showTitle: "showTitle", inputLength: "inputLength" }, ngImport: i0, template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled}\" [ngStyle]=\"{'text-align': xAlignment }\">\n    <ng-container *ngIf=\"xAlignment == 'right' then rightTemplate else leftTemplate\">\n    </ng-container>\n    <ng-template #rightTemplate>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n    </ng-template>\n    <ng-template #leftTemplate>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n    </ng-template>\n\n    <ng-template #requiredTemplate>\n        <mat-icon *ngIf=\"mandatory\" class=\"pep-spacing-element\">\n            <pep-icon name=\"system_must\"></pep-icon>\n        </mat-icon>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!mandatory\"></span>\n    </ng-template>\n    <ng-template #titleTemplate>\n        <mat-label *ngIf=\"showTitle\" [title]=\"label\" class=\"body-xs\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <span class=\"body-xs color-dimmed\">\n            <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n            <ng-template #hintTextTemplate>\n                &nbsp;{{ hint }}\n            </ng-template>\n            <ng-template #maxCharactersTemplate>\n                <ng-container *ngIf=\"maxFieldCharacters > 0\">\n                    &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n                </ng-container>\n            </ng-template>\n        </span>\n    </ng-template>\n</div>", styles: [":host{display:grid;width:inherit}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepFieldTitleComponent, decorators: [{
+PepFieldTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepFieldTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepFieldTitleComponent, selector: "pep-field-title", inputs: { label: "label", mandatory: "mandatory", disabled: "disabled", maxFieldCharacters: "maxFieldCharacters", hint: "hint", xAlignment: "xAlignment", showTitle: "showTitle", inputLength: "inputLength" }, ngImport: i0, template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled}\" [ngStyle]=\"{'text-align': xAlignment }\">\n    <ng-container *ngIf=\"xAlignment == 'right' then rightTemplate else leftTemplate\">\n    </ng-container>\n    <ng-template #rightTemplate>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n    </ng-template>\n    <ng-template #leftTemplate>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n    </ng-template>\n\n    <ng-template #requiredTemplate>\n        <mat-icon *ngIf=\"mandatory\" class=\"pep-spacing-element\">\n            <pep-icon name=\"system_must\"></pep-icon>\n        </mat-icon>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!mandatory\"></span>\n    </ng-template>\n    <ng-template #titleTemplate>\n        <mat-label *ngIf=\"showTitle\" [title]=\"label\" class=\"body-xs\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <span class=\"body-xs color-dimmed\">\n            <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n            <ng-template #hintTextTemplate>\n                &nbsp;{{ hint }}\n            </ng-template>\n            <ng-template #maxCharactersTemplate>\n                <ng-container *ngIf=\"maxFieldCharacters > 0\">\n                    &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n                </ng-container>\n            </ng-template>\n        </span>\n    </ng-template>\n</div>", styles: [":host{display:grid;width:inherit}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-field-title', template: "<div class=\"mat-form-title\" [ngClass]=\"{disable: disabled}\" [ngStyle]=\"{'text-align': xAlignment }\">\n    <ng-container *ngIf=\"xAlignment == 'right' then rightTemplate else leftTemplate\">\n    </ng-container>\n    <ng-template #rightTemplate>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n    </ng-template>\n    <ng-template #leftTemplate>\n        <ng-container *ngTemplateOutlet=\"requiredTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"hintTemplate\"></ng-container>\n    </ng-template>\n\n    <ng-template #requiredTemplate>\n        <mat-icon *ngIf=\"mandatory\" class=\"pep-spacing-element\">\n            <pep-icon name=\"system_must\"></pep-icon>\n        </mat-icon>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!mandatory\"></span>\n    </ng-template>\n    <ng-template #titleTemplate>\n        <mat-label *ngIf=\"showTitle\" [title]=\"label\" class=\"body-xs\">\n            {{ label }}\n        </mat-label>\n        <!-- For the grid template () -->\n        <span *ngIf=\"!showTitle\"></span>\n    </ng-template>\n    <ng-template #hintTemplate>\n        <span class=\"body-xs color-dimmed\">\n            <ng-container *ngIf=\"hint?.length > 0 then hintTextTemplate else maxCharactersTemplate\"></ng-container>\n            <ng-template #hintTextTemplate>\n                &nbsp;{{ hint }}\n            </ng-template>\n            <ng-template #maxCharactersTemplate>\n                <ng-container *ngIf=\"maxFieldCharacters > 0\">\n                    &nbsp;{{ inputLength || 0 }}/{{ maxFieldCharacters }}\n                </ng-container>\n            </ng-template>\n        </span>\n    </ng-template>\n</div>", styles: [":host{display:grid;width:inherit}\n"] }]
         }], propDecorators: { label: [{
@@ -52,22 +52,22 @@ class PepFieldTitleModule {
         this.pepIconRegistry.registerIcons([pepIconSystemMust]);
     }
 }
-PepFieldTitleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepFieldTitleModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepFieldTitleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: PepFieldTitleModule, declarations: [PepFieldTitleComponent], imports: [CommonModule,
+PepFieldTitleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepFieldTitleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleModule, declarations: [PepFieldTitleComponent], imports: [CommonModule,
         // Material modules,
         MatCommonModule,
         MatIconModule,
         MatFormFieldModule,
         // ngx-lib modules
         PepIconModule], exports: [PepFieldTitleComponent] });
-PepFieldTitleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepFieldTitleModule, imports: [CommonModule,
+PepFieldTitleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleModule, imports: [CommonModule,
         // Material modules,
         MatCommonModule,
         MatIconModule,
         MatFormFieldModule,
         // ngx-lib modules
         PepIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: PepFieldTitleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldTitleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [