@pepperi-addons/ngx-lib 0.2.61 → 0.3.2

package/bundles/pepperi-addons-ngx-lib-textarea.umd.js

@@ -25,6 +25,7 @@
             this.form = null;
             this.isActive = false;
             this.showTitle = true;
+            this.renderTitle = true;
             this._layoutType = 'form';
             this.valueChange = new core.EventEmitter();
             this.fieldHeight = '';
@@ -89,6 +90,9 @@
                 this.setFieldHeight();
                 this.setDefaultForm();
                 this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+                if (!this.renderTitle) {
+                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+                }
             }
         };
         PepTextareaComponent.prototype.ngOnChanges = function (changes) {
@@ -142,9 +146,9 @@
     PepTextareaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-textarea',
-                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"isFormView\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\" [xAlignment]=\"xAlignment\"\n                [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\">\n        <ng-container pep-dialog-content>\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" 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\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>",
+                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\">\n        <ng-container pep-dialog-content>\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" 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\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}"]
+                    styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button{width:1rem!important;height:1rem!important}.pep-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pep-report-textarea ::ng-deep.mat-form-field-flex,.pepperi-report-textarea ::ng-deep.mat-form-field-flex{background:transparent!important}"]
                 },] }
     ];
     PepTextareaComponent.ctorParameters = function () { return [
@@ -168,6 +172,7 @@
         form: [{ type: core.Input }],
         isActive: [{ type: core.Input }],
         showTitle: [{ type: core.Input }],
+        renderTitle: [{ type: core.Input }],
         layoutType: [{ type: core.Input }],
         valueChange: [{ type: core.Output }],
         textAreaDialogTemplate: [{ type: core.ViewChild, args: ['textAreaDialogTemplate', { read: core.TemplateRef },] }]

package/bundles/pepperi-addons-ngx-lib-textarea.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-textarea.umd.js","sources":["../../../projects/ngx-lib/textarea/textarea.component.ts","../../../projects/ngx-lib/textarea/textarea.module.ts","../../../projects/ngx-lib/textarea/public-api.ts","../../../projects/ngx-lib/textarea/pepperi-addons-ngx-lib-textarea.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    OnChanges,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    ElementRef,\n    ViewChild,\n    OnDestroy,\n    Renderer2,\n    TemplateRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport {\n    PepLayoutType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    PepTextareaField,\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\n\n@Component({\n    selector: 'pep-textarea',\n    templateUrl: './textarea.component.html',\n    styleUrls: ['./textarea.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepTextareaComponent implements OnChanges, OnInit, OnDestroy {\n    @Input() key = '';\n    @Input() value = '';\n    @Input() label = '';\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() maxFieldCharacters: number;\n    @Input() textColor = '';\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n    private _rowSpan = 1;\n    @Input()\n    set rowSpan(value) {\n        this._rowSpan = value;\n        this.setFieldHeight();\n    }\n    get rowSpan(): number {\n        return this._rowSpan;\n    }\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    // @Input() lastFocusField: any;\n\n    controlType = 'textarea';\n\n    @Input() form: FormGroup = null;\n    @Input() isActive = false;\n    @Input() showTitle = true;\n\n    private _layoutType: PepLayoutType = 'form';\n    @Input()\n    set layoutType(value: PepLayoutType) {\n        this._layoutType = value;\n        this.setFieldHeight();\n    }\n    get layoutType(): PepLayoutType {\n        return this._layoutType;\n    }\n\n    @Output()\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n    // @ViewChild('input') input: ElementRef;\n    @ViewChild('textAreaDialogTemplate', { read: TemplateRef })\n    textAreaDialogTemplate: TemplateRef<any>;\n\n    fieldHeight = '';\n    standAlone = false;\n    isInEditMode = false;\n\n    dialogRef: MatDialogRef<any>;\n\n    constructor(\n        private dialogService: PepDialogService,\n        private customizationService: PepCustomizationService,\n        private renderer: Renderer2,\n        private element: ElementRef\n    ) {}\n\n    private setFieldHeight(): void {\n        this.fieldHeight = this.customizationService.calculateFieldHeight(\n            this.layoutType,\n            this.rowSpan,\n            this.standAlone\n        );\n    }\n\n    private setDefaultForm(): void {\n        const pepField = new PepTextareaField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n            maxFieldCharacters: this.maxFieldCharacters,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(pepField);\n    }\n\n    ngOnInit(): void {\n        if (this.form === null) {\n            this.standAlone = true;\n            this.setFieldHeight();\n            this.setDefaultForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n        }\n    }\n\n    ngOnChanges(changes: any): void {\n        if (this.standAlone) {\n            this.setDefaultForm();\n        }\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    onBlur(event: any): void {\n        const value = event.target ? event.target.value : event;\n        this.changeValue(value);\n\n        setTimeout(() => {\n            if (this.isInEditMode) {\n                this.isInEditMode = false;\n            }\n        }, 0);\n    }\n\n    changeValue(value: any): void {\n        if (value !== this.value) {\n            this.value = value;\n            this.customizationService.updateFormFieldValue(\n                this.form,\n                this.key,\n                value\n            );\n            this.valueChange.emit(value);\n        }\n    }\n\n    cardTemplateClicked(event: any): void {\n        this.openDialog();\n    }\n\n    openDialog(): void {\n        const config = this.dialogService.getDialogConfig(\n            {\n                // maxWidth: '90vw',\n                // maxHeight: '90vh'\n            },\n            'regular'\n        );\n\n        this.dialogRef = this.dialogService.openDialog(\n            this.textAreaDialogTemplate,\n            {},\n            config\n        );\n\n        this.dialogRef.afterClosed().subscribe((value) => {\n            if (value !== undefined && value !== null) {\n                this.changeValue(value);\n            }\n        });\n    }\n\n    closeDialog(data: any = null): void {\n        this.dialogRef?.close(data);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatDialogModule } from '@angular/material/dialog';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemEdit,\n    pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { PepTextareaComponent } from './textarea.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules,\n        MatCommonModule,\n        MatButtonModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n        MatDialogModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n        PepTextboxIconModule,\n        PepDialogModule,\n    ],\n    exports: [PepTextareaComponent],\n    declarations: [PepTextareaComponent],\n})\nexport class PepTextareaModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemEdit,\n            pepIconSystemClose,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/textarea\n */\nexport * from './textarea.module';\nexport * from './textarea.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepTextareaField","PepCustomizationService","Component","ChangeDetectionStrategy","PepDialogService","Renderer2","ElementRef","Input","Output","ViewChild","TemplateRef","pepIconSystemEdit","pepIconSystemClose","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatButtonModule","MatFormFieldModule","MatInputModule","MatIconModule","MatDialogModule","PepNgxLibModule","PepIconModule","PepFieldTitleModule","PepTextboxIconModule","PepDialogModule","PepIconRegistry"],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-textarea.umd.js","sources":["../../../projects/ngx-lib/textarea/textarea.component.ts","../../../projects/ngx-lib/textarea/textarea.module.ts","../../../projects/ngx-lib/textarea/public-api.ts","../../../projects/ngx-lib/textarea/pepperi-addons-ngx-lib-textarea.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    OnChanges,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    ElementRef,\n    ViewChild,\n    OnDestroy,\n    Renderer2,\n    TemplateRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport {\n    PepLayoutType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    PepTextareaField,\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\n\n@Component({\n    selector: 'pep-textarea',\n    templateUrl: './textarea.component.html',\n    styleUrls: ['./textarea.component.scss', './textarea.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepTextareaComponent implements OnChanges, OnInit, OnDestroy {\n    @Input() key = '';\n    @Input() value = '';\n    @Input() label = '';\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() maxFieldCharacters: number;\n    @Input() textColor = '';\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n    private _rowSpan = 1;\n    @Input()\n    set rowSpan(value) {\n        this._rowSpan = value;\n        this.setFieldHeight();\n    }\n    get rowSpan(): number {\n        return this._rowSpan;\n    }\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    // @Input() lastFocusField: any;\n\n    controlType = 'textarea';\n\n    @Input() form: FormGroup = null;\n    @Input() isActive = false;\n    @Input() showTitle = true;\n    @Input() renderTitle = true;\n\n    private _layoutType: PepLayoutType = 'form';\n    @Input()\n    set layoutType(value: PepLayoutType) {\n        this._layoutType = value;\n        this.setFieldHeight();\n    }\n    get layoutType(): PepLayoutType {\n        return this._layoutType;\n    }\n\n    @Output()\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n    // @ViewChild('input') input: ElementRef;\n    @ViewChild('textAreaDialogTemplate', { read: TemplateRef })\n    textAreaDialogTemplate: TemplateRef<any>;\n\n    fieldHeight = '';\n    standAlone = false;\n    isInEditMode = false;\n\n    dialogRef: MatDialogRef<any>;\n\n    constructor(\n        private dialogService: PepDialogService,\n        private customizationService: PepCustomizationService,\n        private renderer: Renderer2,\n        private element: ElementRef\n    ) { }\n\n    private setFieldHeight(): void {\n        this.fieldHeight = this.customizationService.calculateFieldHeight(\n            this.layoutType,\n            this.rowSpan,\n            this.standAlone\n        );\n    }\n\n    private setDefaultForm(): void {\n        const pepField = new PepTextareaField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n            maxFieldCharacters: this.maxFieldCharacters,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(pepField);\n    }\n\n    ngOnInit(): void {\n        if (this.form === null) {\n            this.standAlone = true;\n            this.setFieldHeight();\n            this.setDefaultForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n\n            if (!this.renderTitle) {\n                this.renderer.addClass(\n                    this.element.nativeElement,\n                    PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n                );\n            }\n        }\n    }\n\n    ngOnChanges(changes: any): void {\n        if (this.standAlone) {\n            this.setDefaultForm();\n        }\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    onBlur(event: any): void {\n        const value = event.target ? event.target.value : event;\n        this.changeValue(value);\n\n        setTimeout(() => {\n            if (this.isInEditMode) {\n                this.isInEditMode = false;\n            }\n        }, 0);\n    }\n\n    changeValue(value: any): void {\n        if (value !== this.value) {\n            this.value = value;\n            this.customizationService.updateFormFieldValue(\n                this.form,\n                this.key,\n                value\n            );\n            this.valueChange.emit(value);\n        }\n    }\n\n    cardTemplateClicked(event: any): void {\n        this.openDialog();\n    }\n\n    openDialog(): void {\n        const config = this.dialogService.getDialogConfig(\n            {\n                // maxWidth: '90vw',\n                // maxHeight: '90vh'\n            },\n            'regular'\n        );\n\n        this.dialogRef = this.dialogService.openDialog(\n            this.textAreaDialogTemplate,\n            {},\n            config\n        );\n\n        this.dialogRef.afterClosed().subscribe((value) => {\n            if (value !== undefined && value !== null) {\n                this.changeValue(value);\n            }\n        });\n    }\n\n    closeDialog(data: any = null): void {\n        this.dialogRef?.close(data);\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatDialogModule } from '@angular/material/dialog';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemEdit,\n    pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { PepTextareaComponent } from './textarea.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules,\n        MatCommonModule,\n        MatButtonModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n        MatDialogModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n        PepTextboxIconModule,\n        PepDialogModule,\n    ],\n    exports: [PepTextareaComponent],\n    declarations: [PepTextareaComponent],\n})\nexport class PepTextareaModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemEdit,\n            pepIconSystemClose,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/textarea\n */\nexport * from './textarea.module';\nexport * from './textarea.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepTextareaField","PepCustomizationService","Component","ChangeDetectionStrategy","PepDialogService","Renderer2","ElementRef","Input","Output","ViewChild","TemplateRef","pepIconSystemEdit","pepIconSystemClose","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatButtonModule","MatFormFieldModule","MatInputModule","MatIconModule","MatDialogModule","PepNgxLibModule","PepIconModule","PepFieldTitleModule","PepTextboxIconModule","PepDialogModule","PepIconRegistry"],"mappings":"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"}

package/bundles/pepperi-addons-ngx-lib-textbox.umd.js

@@ -228,6 +228,9 @@
                         : this.maxValue;
                 this.setDefaultForm();
                 this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+                if (!this.renderTitle) {
+                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+                }
             }
             this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
             this.updateFormFieldValue();
@@ -295,8 +298,7 @@
         };
         PepTextboxComponent.prototype.onChange = function (e) {
             var value = e.target ? e.target.value : e;
-            // TODO: uncomment
-            // this.valueChange.emit(value);
+            this.valueChange.emit(value);
         };
         PepTextboxComponent.prototype.onBlur = function (e) {
             this.isInFocus = false;
@@ -351,7 +353,7 @@
                     selector: 'pep-textbox',
                     template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [formControlName]=\"key\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">\n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherError\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherError>\n                    <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n            </mat-error>\n\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (keyup)=\"onKeyUp($event)\"  -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" (blur)=\"onBlur($event)\" (change)=\"onChange($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}"]
+                    styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}", ""]
                 },] }
     ];
     PepTextboxComponent.ctorParameters = function () { return [

package/bundles/pepperi-addons-ngx-lib-textbox.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-textbox.umd.js","sources":["../../../projects/ngx-lib/textbox/textbox.component.ts","../../../projects/ngx-lib/textbox/textbox-validation.directive.ts","../../../projects/ngx-lib/textbox/textbox.module.ts","../../../projects/ngx-lib/textbox/public-api.ts","../../../projects/ngx-lib/textbox/pepperi-addons-ngx-lib-textbox.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    OnChanges,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    ElementRef,\n    ViewChild,\n    Renderer2,\n    OnDestroy,\n    ChangeDetectorRef,\n    HostBinding,\n} from '@angular/core';\nimport { FormGroup, FormBuilder } from '@angular/forms';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n    PepLayoutType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    PepTextboxFieldType,\n    PepTextboxField,\n    PepFieldBase,\n    PepUtilitiesService,\n} from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a text box input component that can be use to\n *\n * @export\n * @class PepTextboxComponent\n * @implements {OnChanges}\n * @implements {OnInit}\n * @implements {OnDestroy}\n */\n@Component({\n    selector: 'pep-textbox',\n    templateUrl: './textbox.component.html',\n    styleUrls: ['./textbox.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepTextboxComponent implements OnChanges, OnInit, OnDestroy {\n\n    @HostBinding('attr.data-qa') dataQa = '';\n\n    private _key = '';\n    /**\n     * The text box key\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input()\n    set key(value) {\n        this._key = value;\n        this.dataQa = value;\n    }\n    get key(): string {\n        return this._key;\n    }\n\n    private _value = '';\n    /**\n     * The value of the text box.\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input()\n    set value(value: string) {\n        if (!value) {\n            value = '';\n        }\n\n        this._value = value;\n\n        if (this._calculateFormattedValue) {\n            this.setFormattedValue(value);\n        }\n    }\n    get value(): string {\n        return this._value;\n    }\n\n    private _formattedValue = null;\n    /**\n     * The formatted value.\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input()\n    set formattedValue(value: string) {\n        if (!value) {\n            value = '';\n        }\n\n        if (this._calculateFormattedValue) {\n            this._calculateFormattedValue = false;\n        }\n\n        this.setFormattedValue(value);\n    }\n    get formattedValue(): string {\n        return this._formattedValue;\n    }\n\n    /**\n     * The title of the textbox.\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() label = '';\n\n    /**\n     * The placeholder (relevant only for children - if parent isn't null).\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() placeholder = '';\n\n    /**\n     * The type of the textbox.\n     *\n     * @type {PepTextboxFieldType}\n     * @memberof PepTextboxComponent\n     */\n    @Input() type: PepTextboxFieldType = 'text';\n\n    /**\n     * If the textbox is mandatory\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() mandatory = false;\n\n    // TODO: Check if should remove disabled and keep only readonly.\n    /**\n     * If the textbox is disabled.\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() disabled = false;\n\n    /**\n     * If the textbox is readonly\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() readonly = false;\n    @Input() maxFieldCharacters: number;\n    @Input() textColor = '';\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n    // @Input() lastFocusField: any;\n    @Input() minValue = NaN;\n    @Input() maxValue = NaN;\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    @Input() form: FormGroup = null;\n    @Input() isActive = false;\n    @Input() showTitle = true;\n    @Input() renderTitle = true;\n    @Input() renderError = true;\n    @Input() renderSymbol = true;\n    @Input() layoutType: PepLayoutType = 'form';\n    @Input() parentFieldKey: string = null;\n\n    /**\n     * The value change event.\n     *\n     * @type {EventEmitter<string>}\n     * @memberof PepTextboxComponent\n     */\n    @Output()\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n    @Output()\n    formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    @ViewChild('input') input: ElementRef;\n\n    private _calculateFormattedValue = true;\n    get calculateFormattedValue(): boolean {\n        return this._calculateFormattedValue;\n    }\n\n    controlType = 'textbox';\n\n    standAlone = false;\n    isInEditMode = false;\n    isInFocus: boolean;\n\n    constructor(\n        public fb: FormBuilder,\n        private customizationService: PepCustomizationService,\n        private renderer: Renderer2,\n        private element: ElementRef,\n        private translate: TranslateService,\n        private utilitiesService: PepUtilitiesService\n    ) {\n        this.isInFocus = false;\n    }\n\n    private setFormattedValue(value: string) {\n        if (this._calculateFormattedValue) {\n            this._formattedValue = this.isNumberType()\n                ? this.utilitiesService.formatNumber(value)\n                : value;\n        } else {\n            this._formattedValue = value;\n        }\n\n        this.updateFormFieldValue();\n    }\n\n    private updateFormFieldValue() {\n        this.customizationService.updateFormFieldValue(\n            this.form,\n            this.key,\n            this.formattedValue,\n            this.parentFieldKey\n        );\n    }\n\n    get displayValue(): string {\n        let res = '';\n\n        if (this.type == 'link') {\n            res = this.formattedValue;\n        } else {\n            res = this.isInFocus ? this.value : this.formattedValue;\n        }\n\n        return res;\n    }\n\n    private setDefaultForm(): void {\n        const pepField = new PepTextboxField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n            maxFieldCharacters: this.maxFieldCharacters,\n            type: this.type,\n            minValue: this.minValue,\n            maxValue: this.maxValue,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(\n            pepField,\n            this.renderError\n        );\n    }\n\n    ngOnInit(): void {\n        if (this.form === null) {\n            this.standAlone = true;\n\n            this.minValue =\n                isNaN(this.minValue) && !isNaN(this.maxValue)\n                    ? 0\n                    : this.minValue;\n            this.maxValue =\n                isNaN(this.maxValue) && !isNaN(this.minValue)\n                    ? 99999\n                    : this.maxValue;\n\n            this.setDefaultForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n        }\n\n        this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field\n\n        this.updateFormFieldValue();\n    }\n\n    ngOnChanges(changes: any): void {\n        if (this.standAlone) {\n            this.setDefaultForm();\n        }\n\n        this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    onFocus(event: any): void {\n        this.isInFocus = true;\n\n        // select the value in focus (DI-18246 improvement)\n        setTimeout(() => {\n            const eventTarget = event.target || event.srcElement;\n            if (eventTarget) {\n                eventTarget.select();\n            }\n        }, 0);\n    }\n\n    isNumberType(): boolean {\n        return (\n            this.type === 'percentage' ||\n            this.type === 'currency' ||\n            this.type === 'int' ||\n            this.type === 'real'\n        );\n    }\n\n    isValueValid(value: string): boolean {\n        let res = false;\n\n        if (this.isNumberType()) {\n            if (value === '') {\n                res = this.mandatory ? false : true;\n            } else {\n                const numberValue = this.utilitiesService.coerceNumberProperty(\n                    value\n                );\n                res =\n                    numberValue >= this.minValue &&\n                    numberValue <= this.maxValue;\n            }\n        } else {\n            // TODO: Maybe need to check other types.\n            res = true;\n        }\n\n        return res;\n    }\n\n    isDifferentValue(value: string): boolean {\n        let res = false;\n\n        if (this.isNumberType()) {\n            if (this.value === '' || value === '') {\n                res = true;\n            } else {\n                const currentValue = this.utilitiesService.coerceNumberProperty(\n                    this.value\n                );\n                const newValue = this.utilitiesService.coerceNumberProperty(\n                    value\n                );\n\n                res = currentValue !== newValue;\n            }\n        } else {\n            res = true;\n        }\n\n        return res;\n    }\n\n    onChange(e: any): void {\n        const value = e.target ? e.target.value : e;\n\n        // TODO: uncomment\n        // this.valueChange.emit(value);\n    }\n\n    onBlur(e: any): void {\n        this.isInFocus = false;\n        const value = e.target ? e.target.value : e;\n        if (value !== this.value && this.isDifferentValue(value)) {\n            // If renderError is false and the new value is not valid.\n            if (!this.renderError && !this.isValueValid(value)) {\n                this.renderer.setProperty(\n                    this.input.nativeElement,\n                    'value',\n                    this.value\n                );\n            } else {\n                this.value = value;\n\n                // If the user is setting the formatted value then set the value till the user format it and return it back.\n                if (!this._calculateFormattedValue) {\n                    this._formattedValue = value;\n                }\n\n                this.valueChange.emit(value);\n            }\n        }\n\n        if (this.isInEditMode) {\n            this.isInEditMode = false;\n        }\n    }\n\n    anchorClicked(): void {\n        const currentValue = this.value;\n        if (currentValue.trim().length > 0) {\n            switch (this.type) {\n                case 'email':\n                    window.open('mailto:' + currentValue, 'email');\n                    break;\n                case 'phone':\n                    window.open('tel:' + currentValue, 'tel');\n                    break;\n                case 'link':\n                    window.open(currentValue);\n                    break;\n                default:\n                    break;\n            }\n        }\n    }\n\n    cardTemplateClicked(event: any): void {\n        this.isInEditMode = true;\n\n        setTimeout(() => {\n            this.input.nativeElement.focus();\n        }, 0);\n    }\n}\n","import {\n    Directive,\n    ElementRef,\n    HostListener,\n    Input,\n    OnInit,\n} from '@angular/core';\nimport {\n    PepTextboxFieldType,\n    PepValidatorService,\n} from '@pepperi-addons/ngx-lib';\n\n@Directive({\n    selector: '[pepTextboxValidation]',\n})\nexport class PepTextboxValidationDirective implements OnInit {\n    @Input() type: PepTextboxFieldType = 'text';\n\n    previousValue = '';\n\n    constructor(\n        private hostElement: ElementRef,\n        private validatorService: PepValidatorService\n    ) {}\n\n    ngOnInit() {\n        //\n    }\n\n    private isNumber(): boolean {\n        return this.isInteger() || this.isDecimal();\n    }\n\n    private isInteger(): boolean {\n        return this.type === 'int';\n    }\n\n    private isDecimal(): boolean {\n        return (\n            this.type === 'currency' ||\n            this.type === 'percentage' ||\n            this.type === 'real'\n        );\n    }\n\n    private isPhone(): boolean {\n        return this.type === 'phone';\n    }\n\n    private isText(): boolean {\n        return (\n            this.type === 'email' ||\n            this.type === 'link' ||\n            this.type === 'text'\n        );\n    }\n\n    @HostListener('change', ['$event'])\n    onChange(e) {\n        this.validateValue(this.hostElement.nativeElement.value);\n    }\n\n    @HostListener('keydown', ['$event'])\n    onKeyDown(e: KeyboardEvent) {\n        const originalValue: string = e.target['value'];\n\n        if (this.isNumber()) {\n            // save value before keydown event\n            this.previousValue = originalValue;\n            const isNumber = this.validatorService.isNumber(\n                e,\n                this.isDecimal()\n            );\n\n            if (isNumber) return;\n            else e.preventDefault();\n        } else if (this.isPhone()) {\n            const isPhone = this.validatorService.isPhone(e);\n            if (isPhone) return;\n            else e.preventDefault();\n        }\n    }\n\n    validateValue(value: string): void {\n        if (this.isNumber()) {\n            const newValue = this.validatorService.validateNumber(\n                value,\n                this.isDecimal()\n            );\n            this.hostElement.nativeElement['value'] = newValue ? newValue : 0;\n        } else if (this.isPhone()) {\n            // test phone with regular expression, when\n            // phone is invalid, replace it with the previousValue\n            const valid = this.validatorService.validatePhone(value);\n            this.hostElement.nativeElement['value'] = valid\n                ? value\n                : this.previousValue;\n        } else if (this.isText()) {\n            this.hostElement.nativeElement['value'] = value;\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemEdit,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepTextboxComponent } from './textbox.component';\nimport { PepTextboxValidationDirective } from './textbox-validation.directive';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules,\n        MatCommonModule,\n        MatButtonModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n        PepTextboxIconModule,\n    ],\n    exports: [PepTextboxComponent],\n    declarations: [PepTextboxComponent, PepTextboxValidationDirective],\n})\nexport class PepTextboxModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconSystemEdit]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/textbox\n */\nexport * from './textbox.module';\nexport * from './textbox.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepTextboxValidationDirective as ɵa} from './textbox-validation.directive';"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepTextboxField","PepCustomizationService","Component","ChangeDetectionStrategy","FormBuilder","Renderer2","ElementRef","TranslateService","PepUtilitiesService","HostBinding","Input","Output","ViewChild","Directive","PepValidatorService","HostListener","pepIconSystemEdit","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatButtonModule","MatFormFieldModule","MatInputModule","MatIconModule","PepNgxLibModule","PepIconModule","PepFieldTitleModule","PepTextboxIconModule","PepIconRegistry"],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-textbox.umd.js","sources":["../../../projects/ngx-lib/textbox/textbox.component.ts","../../../projects/ngx-lib/textbox/textbox-validation.directive.ts","../../../projects/ngx-lib/textbox/textbox.module.ts","../../../projects/ngx-lib/textbox/public-api.ts","../../../projects/ngx-lib/textbox/pepperi-addons-ngx-lib-textbox.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    OnChanges,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    ElementRef,\n    ViewChild,\n    Renderer2,\n    OnDestroy,\n    ChangeDetectorRef,\n    HostBinding,\n} from '@angular/core';\nimport { FormGroup, FormBuilder } from '@angular/forms';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n    PepLayoutType,\n    PepCustomizationService,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    PepTextboxFieldType,\n    PepTextboxField,\n    PepFieldBase,\n    PepUtilitiesService,\n} from '@pepperi-addons/ngx-lib';\n\n/**\n * This is a text box input component that can be use to\n *\n * @export\n * @class PepTextboxComponent\n * @implements {OnChanges}\n * @implements {OnInit}\n * @implements {OnDestroy}\n */\n@Component({\n    selector: 'pep-textbox',\n    templateUrl: './textbox.component.html',\n    styleUrls: ['./textbox.component.scss', './textbox.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepTextboxComponent implements OnChanges, OnInit, OnDestroy {\n\n    @HostBinding('attr.data-qa') dataQa = '';\n\n    private _key = '';\n    /**\n     * The text box key\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input()\n    set key(value) {\n        this._key = value;\n        this.dataQa = value;\n    }\n    get key(): string {\n        return this._key;\n    }\n\n    private _value = '';\n    /**\n     * The value of the text box.\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input()\n    set value(value: string) {\n        if (!value) {\n            value = '';\n        }\n\n        this._value = value;\n\n        if (this._calculateFormattedValue) {\n            this.setFormattedValue(value);\n        }\n    }\n    get value(): string {\n        return this._value;\n    }\n\n    private _formattedValue = null;\n    /**\n     * The formatted value.\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input()\n    set formattedValue(value: string) {\n        if (!value) {\n            value = '';\n        }\n\n        if (this._calculateFormattedValue) {\n            this._calculateFormattedValue = false;\n        }\n\n        this.setFormattedValue(value);\n    }\n    get formattedValue(): string {\n        return this._formattedValue;\n    }\n\n    /**\n     * The title of the textbox.\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() label = '';\n\n    /**\n     * The placeholder (relevant only for children - if parent isn't null).\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() placeholder = '';\n\n    /**\n     * The type of the textbox.\n     *\n     * @type {PepTextboxFieldType}\n     * @memberof PepTextboxComponent\n     */\n    @Input() type: PepTextboxFieldType = 'text';\n\n    /**\n     * If the textbox is mandatory\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() mandatory = false;\n\n    // TODO: Check if should remove disabled and keep only readonly.\n    /**\n     * If the textbox is disabled.\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() disabled = false;\n\n    /**\n     * If the textbox is readonly\n     *\n     * @memberof PepTextboxComponent\n     */\n    @Input() readonly = false;\n    @Input() maxFieldCharacters: number;\n    @Input() textColor = '';\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n    // @Input() lastFocusField: any;\n    @Input() minValue = NaN;\n    @Input() maxValue = NaN;\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    @Input() form: FormGroup = null;\n    @Input() isActive = false;\n    @Input() showTitle = true;\n    @Input() renderTitle = true;\n    @Input() renderError = true;\n    @Input() renderSymbol = true;\n    @Input() layoutType: PepLayoutType = 'form';\n    @Input() parentFieldKey: string = null;\n\n    /**\n     * The value change event.\n     *\n     * @type {EventEmitter<string>}\n     * @memberof PepTextboxComponent\n     */\n    @Output()\n    valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n    @Output()\n    formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    @ViewChild('input') input: ElementRef;\n\n    private _calculateFormattedValue = true;\n    get calculateFormattedValue(): boolean {\n        return this._calculateFormattedValue;\n    }\n\n    controlType = 'textbox';\n\n    standAlone = false;\n    isInEditMode = false;\n    isInFocus: boolean;\n\n    constructor(\n        public fb: FormBuilder,\n        private customizationService: PepCustomizationService,\n        private renderer: Renderer2,\n        private element: ElementRef,\n        private translate: TranslateService,\n        private utilitiesService: PepUtilitiesService\n    ) {\n        this.isInFocus = false;\n    }\n\n    private setFormattedValue(value: string) {\n        if (this._calculateFormattedValue) {\n            this._formattedValue = this.isNumberType()\n                ? this.utilitiesService.formatNumber(value)\n                : value;\n        } else {\n            this._formattedValue = value;\n        }\n\n        this.updateFormFieldValue();\n    }\n\n    private updateFormFieldValue() {\n        this.customizationService.updateFormFieldValue(\n            this.form,\n            this.key,\n            this.formattedValue,\n            this.parentFieldKey\n        );\n    }\n\n    get displayValue(): string {\n        let res = '';\n\n        if (this.type == 'link') {\n            res = this.formattedValue;\n        } else {\n            res = this.isInFocus ? this.value : this.formattedValue;\n        }\n\n        return res;\n    }\n\n    private setDefaultForm(): void {\n        const pepField = new PepTextboxField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n            maxFieldCharacters: this.maxFieldCharacters,\n            type: this.type,\n            minValue: this.minValue,\n            maxValue: this.maxValue,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(\n            pepField,\n            this.renderError\n        );\n    }\n\n    ngOnInit(): void {\n        if (this.form === null) {\n            this.standAlone = true;\n\n            this.minValue =\n                isNaN(this.minValue) && !isNaN(this.maxValue)\n                    ? 0\n                    : this.minValue;\n            this.maxValue =\n                isNaN(this.maxValue) && !isNaN(this.minValue)\n                    ? 99999\n                    : this.maxValue;\n\n            this.setDefaultForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n\n            if (!this.renderTitle) {\n                this.renderer.addClass(\n                    this.element.nativeElement,\n                    PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n                );\n            }\n        }\n\n        this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field\n\n        this.updateFormFieldValue();\n    }\n\n    ngOnChanges(changes: any): void {\n        if (this.standAlone) {\n            this.setDefaultForm();\n        }\n\n        this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    onFocus(event: any): void {\n        this.isInFocus = true;\n\n        // select the value in focus (DI-18246 improvement)\n        setTimeout(() => {\n            const eventTarget = event.target || event.srcElement;\n            if (eventTarget) {\n                eventTarget.select();\n            }\n        }, 0);\n    }\n\n    isNumberType(): boolean {\n        return (\n            this.type === 'percentage' ||\n            this.type === 'currency' ||\n            this.type === 'int' ||\n            this.type === 'real'\n        );\n    }\n\n    isValueValid(value: string): boolean {\n        let res = false;\n\n        if (this.isNumberType()) {\n            if (value === '') {\n                res = this.mandatory ? false : true;\n            } else {\n                const numberValue = this.utilitiesService.coerceNumberProperty(\n                    value\n                );\n                res =\n                    numberValue >= this.minValue &&\n                    numberValue <= this.maxValue;\n            }\n        } else {\n            // TODO: Maybe need to check other types.\n            res = true;\n        }\n\n        return res;\n    }\n\n    isDifferentValue(value: string): boolean {\n        let res = false;\n\n        if (this.isNumberType()) {\n            if (this.value === '' || value === '') {\n                res = true;\n            } else {\n                const currentValue = this.utilitiesService.coerceNumberProperty(\n                    this.value\n                );\n                const newValue = this.utilitiesService.coerceNumberProperty(\n                    value\n                );\n\n                res = currentValue !== newValue;\n            }\n        } else {\n            res = true;\n        }\n\n        return res;\n    }\n\n    onChange(e: any): void {\n        const value = e.target ? e.target.value : e;\n\n        this.valueChange.emit(value);\n    }\n\n    onBlur(e: any): void {\n        this.isInFocus = false;\n        const value = e.target ? e.target.value : e;\n        if (value !== this.value && this.isDifferentValue(value)) {\n            // If renderError is false and the new value is not valid.\n            if (!this.renderError && !this.isValueValid(value)) {\n                this.renderer.setProperty(\n                    this.input.nativeElement,\n                    'value',\n                    this.value\n                );\n            } else {\n                this.value = value;\n\n                // If the user is setting the formatted value then set the value till the user format it and return it back.\n                if (!this._calculateFormattedValue) {\n                    this._formattedValue = value;\n                }\n\n                this.valueChange.emit(value);\n            }\n        }\n\n        if (this.isInEditMode) {\n            this.isInEditMode = false;\n        }\n    }\n\n    anchorClicked(): void {\n        const currentValue = this.value;\n        if (currentValue.trim().length > 0) {\n            switch (this.type) {\n                case 'email':\n                    window.open('mailto:' + currentValue, 'email');\n                    break;\n                case 'phone':\n                    window.open('tel:' + currentValue, 'tel');\n                    break;\n                case 'link':\n                    window.open(currentValue);\n                    break;\n                default:\n                    break;\n            }\n        }\n    }\n\n    cardTemplateClicked(event: any): void {\n        this.isInEditMode = true;\n\n        setTimeout(() => {\n            this.input.nativeElement.focus();\n        }, 0);\n    }\n}\n","import {\n    Directive,\n    ElementRef,\n    HostListener,\n    Input,\n    OnInit,\n} from '@angular/core';\nimport {\n    PepTextboxFieldType,\n    PepValidatorService,\n} from '@pepperi-addons/ngx-lib';\n\n@Directive({\n    selector: '[pepTextboxValidation]',\n})\nexport class PepTextboxValidationDirective implements OnInit {\n    @Input() type: PepTextboxFieldType = 'text';\n\n    previousValue = '';\n\n    constructor(\n        private hostElement: ElementRef,\n        private validatorService: PepValidatorService\n    ) {}\n\n    ngOnInit() {\n        //\n    }\n\n    private isNumber(): boolean {\n        return this.isInteger() || this.isDecimal();\n    }\n\n    private isInteger(): boolean {\n        return this.type === 'int';\n    }\n\n    private isDecimal(): boolean {\n        return (\n            this.type === 'currency' ||\n            this.type === 'percentage' ||\n            this.type === 'real'\n        );\n    }\n\n    private isPhone(): boolean {\n        return this.type === 'phone';\n    }\n\n    private isText(): boolean {\n        return (\n            this.type === 'email' ||\n            this.type === 'link' ||\n            this.type === 'text'\n        );\n    }\n\n    @HostListener('change', ['$event'])\n    onChange(e) {\n        this.validateValue(this.hostElement.nativeElement.value);\n    }\n\n    @HostListener('keydown', ['$event'])\n    onKeyDown(e: KeyboardEvent) {\n        const originalValue: string = e.target['value'];\n\n        if (this.isNumber()) {\n            // save value before keydown event\n            this.previousValue = originalValue;\n            const isNumber = this.validatorService.isNumber(\n                e,\n                this.isDecimal()\n            );\n\n            if (isNumber) return;\n            else e.preventDefault();\n        } else if (this.isPhone()) {\n            const isPhone = this.validatorService.isPhone(e);\n            if (isPhone) return;\n            else e.preventDefault();\n        }\n    }\n\n    validateValue(value: string): void {\n        if (this.isNumber()) {\n            const newValue = this.validatorService.validateNumber(\n                value,\n                this.isDecimal()\n            );\n            this.hostElement.nativeElement['value'] = newValue ? newValue : 0;\n        } else if (this.isPhone()) {\n            // test phone with regular expression, when\n            // phone is invalid, replace it with the previousValue\n            const valid = this.validatorService.validatePhone(value);\n            this.hostElement.nativeElement['value'] = valid\n                ? value\n                : this.previousValue;\n        } else if (this.isText()) {\n            this.hostElement.nativeElement['value'] = value;\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemEdit,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepTextboxComponent } from './textbox.component';\nimport { PepTextboxValidationDirective } from './textbox-validation.directive';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules,\n        MatCommonModule,\n        MatButtonModule,\n        MatFormFieldModule,\n        MatInputModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n        PepTextboxIconModule,\n    ],\n    exports: [PepTextboxComponent],\n    declarations: [PepTextboxComponent, PepTextboxValidationDirective],\n})\nexport class PepTextboxModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconSystemEdit]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/textbox\n */\nexport * from './textbox.module';\nexport * from './textbox.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepTextboxValidationDirective as ɵa} from './textbox-validation.directive';"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepTextboxField","PepCustomizationService","Component","ChangeDetectionStrategy","FormBuilder","Renderer2","ElementRef","TranslateService","PepUtilitiesService","HostBinding","Input","Output","ViewChild","Directive","PepValidatorService","HostListener","pepIconSystemEdit","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatButtonModule","MatFormFieldModule","MatInputModule","MatIconModule","PepNgxLibModule","PepIconModule","PepFieldTitleModule","PepTextboxIconModule","PepIconRegistry"],"mappings":";;;;;;IA4BA;;;;;;;;;;QAuLI,6BACW,EAAe,EACd,oBAA6C,EAC7C,QAAmB,EACnB,OAAmB,EACnB,SAA2B,EAC3B,gBAAqC;YALtC,OAAE,GAAF,EAAE,CAAa;YACd,yBAAoB,GAApB,oBAAoB,CAAyB;YAC7C,aAAQ,GAAR,QAAQ,CAAW;YACnB,YAAO,GAAP,OAAO,CAAY;YACnB,cAAS,GAAT,SAAS,CAAkB;YAC3B,qBAAgB,GAAhB,gBAAgB,CAAqB;YA5KpB,WAAM,GAAG,EAAE,CAAC;YAEjC,SAAI,GAAG,EAAE,CAAC;YAeV,WAAM,GAAG,EAAE,CAAC;YAsBZ,oBAAe,GAAG,IAAI,CAAC;;;;;;YA2BtB,UAAK,GAAG,EAAE,CAAC;;;;;;YAOX,gBAAW,GAAG,EAAE,CAAC;;;;;;;YAQjB,SAAI,GAAwB,MAAM,CAAC;;;;;;YAOnC,cAAS,GAAG,KAAK,CAAC;;;;;;;YAQlB,aAAQ,GAAG,KAAK,CAAC;;;;;;YAOjB,aAAQ,GAAG,KAAK,CAAC;YAEjB,cAAS,GAAG,EAAE,CAAC;YACf,eAAU,GAA2BA,mCAA4B,CAAC;YAClE,YAAO,GAAG,CAAC,CAAC;;YAEZ,aAAQ,GAAG,GAAG,CAAC;YACf,aAAQ,GAAG,GAAG,CAAC;YAEhB,aAAQ,GAAG,IAAI,CAAC;YAoBf,SAAI,GAAc,IAAI,CAAC;YACvB,aAAQ,GAAG,KAAK,CAAC;YACjB,cAAS,GAAG,IAAI,CAAC;YACjB,gBAAW,GAAG,IAAI,CAAC;YACnB,gBAAW,GAAG,IAAI,CAAC;YACnB,iBAAY,GAAG,IAAI,CAAC;YACpB,eAAU,GAAkB,MAAM,CAAC;YACnC,mBAAc,GAAW,IAAI,CAAC;;;;;;;YASvC,gBAAW,GAAyB,IAAIC,iBAAY,EAAU,CAAC;YAG/D,yBAAoB,GAA0B,IAAIA,iBAAY,EAAW,CAAC;YAIlE,6BAAwB,GAAG,IAAI,CAAC;YAKxC,gBAAW,GAAG,SAAS,CAAC;YAExB,eAAU,GAAG,KAAK,CAAC;YACnB,iBAAY,GAAG,KAAK,CAAC;YAWjB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SAC1B;QAvKD,sBACI,oCAAG;iBAIP;gBACI,OAAO,IAAI,CAAC,IAAI,CAAC;aACpB;;;;;;iBAPD,UACQ,KAAK;gBACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACvB;;;WAAA;QAWD,sBACI,sCAAK;iBAWT;gBACI,OAAO,IAAI,CAAC,MAAM,CAAC;aACtB;;;;;;iBAdD,UACU,KAAa;gBACnB,IAAI,CAAC,KAAK,EAAE;oBACR,KAAK,GAAG,EAAE,CAAC;iBACd;gBAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBAEpB,IAAI,IAAI,CAAC,wBAAwB,EAAE;oBAC/B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;iBACjC;aACJ;;;WAAA;QAWD,sBACI,+CAAc;iBAWlB;gBACI,OAAO,IAAI,CAAC,eAAe,CAAC;aAC/B;;;;;;iBAdD,UACmB,KAAa;gBAC5B,IAAI,CAAC,KAAK,EAAE;oBACR,KAAK,GAAG,EAAE,CAAC;iBACd;gBAED,IAAI,IAAI,CAAC,wBAAwB,EAAE;oBAC/B,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC;iBACzC;gBAED,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;aACjC;;;WAAA;QAyDD,sBACI,wCAAO;iBAcX;gBACI,OAAO,IAAI,CAAC,QAAQ,CAAC;aACxB;iBAjBD,UACY,OAAgB;gBACxB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;gBACxB,IAAI,OAAO,EAAE;oBACT,IAAI,CAAC,QAAQ,CAAC,WAAW,CACrB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;iBACL;qBAAM;oBACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;iBACL;aACJ;;;WAAA;QA6BD,sBAAI,wDAAuB;iBAA3B;gBACI,OAAO,IAAI,CAAC,wBAAwB,CAAC;aACxC;;;WAAA;QAmBO,+CAAiB,GAAjB,UAAkB,KAAa;YACnC,IAAI,IAAI,CAAC,wBAAwB,EAAE;gBAC/B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE;sBACpC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC;sBACzC,KAAK,CAAC;aACf;iBAAM;gBACH,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;aAChC;YAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC/B;QAEO,kDAAoB,GAApB;YACJ,IAAI,CAAC,oBAAoB,CAAC,oBAAoB,CAC1C,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,cAAc,CACtB,CAAC;SACL;QAED,sBAAI,6CAAY;iBAAhB;gBACI,IAAI,GAAG,GAAG,EAAE,CAAC;gBAEb,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,EAAE;oBACrB,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC;iBAC7B;qBAAM;oBACH,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC;iBAC3D;gBAED,OAAO,GAAG,CAAC;aACd;;;WAAA;QAEO,4CAAc,GAAd;YACJ,IAAM,QAAQ,GAAG,IAAIC,sBAAe,CAAC;gBACjC,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;gBAC3C,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aAC1B,CAAC,CAAC;YACH,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CACrD,QAAQ,EACR,IAAI,CAAC,WAAW,CACnB,CAAC;SACL;QAED,sCAAQ,GAAR;YACI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;gBACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBAEvB,IAAI,CAAC,QAAQ;oBACT,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;0BACvC,CAAC;0BACD,IAAI,CAAC,QAAQ,CAAC;gBACxB,IAAI,CAAC,QAAQ;oBACT,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;0BACvC,KAAK;0BACL,IAAI,CAAC,QAAQ,CAAC;gBAExB,IAAI,CAAC,cAAc,EAAE,CAAC;gBAEtB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1BC,8BAAuB,CAAC,4BAA4B,CACvD,CAAC;gBAEF,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;oBACnB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1BA,8BAAuB,CAAC,uCAAuC,CAClE,CAAC;iBACL;aACJ;YAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;YAEhE,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC/B;QAED,yCAAW,GAAX,UAAY,OAAY;YACpB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACjB,IAAI,CAAC,cAAc,EAAE,CAAC;aACzB;YAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;SACnE;QAED,yCAAW,GAAX;;SAEC;QAED,qCAAO,GAAP,UAAQ,KAAU;YACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;;YAGtB,UAAU,CAAC;gBACP,IAAM,WAAW,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,UAAU,CAAC;gBACrD,IAAI,WAAW,EAAE;oBACb,WAAW,CAAC,MAAM,EAAE,CAAC;iBACxB;aACJ,EAAE,CAAC,CAAC,CAAC;SACT;QAED,0CAAY,GAAZ;YACI,QACI,IAAI,CAAC,IAAI,KAAK,YAAY;gBAC1B,IAAI,CAAC,IAAI,KAAK,UAAU;gBACxB,IAAI,CAAC,IAAI,KAAK,KAAK;gBACnB,IAAI,CAAC,IAAI,KAAK,MAAM,EACtB;SACL;QAED,0CAAY,GAAZ,UAAa,KAAa;YACtB,IAAI,GAAG,GAAG,KAAK,CAAC;YAEhB,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;gBACrB,IAAI,KAAK,KAAK,EAAE,EAAE;oBACd,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;iBACvC;qBAAM;oBACH,IAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAC1D,KAAK,CACR,CAAC;oBACF,GAAG;wBACC,WAAW,IAAI,IAAI,CAAC,QAAQ;4BAC5B,WAAW,IAAI,IAAI,CAAC,QAAQ,CAAC;iBACpC;aACJ;iBAAM;;gBAEH,GAAG,GAAG,IAAI,CAAC;aACd;YAED,OAAO,GAAG,CAAC;SACd;QAED,8CAAgB,GAAhB,UAAiB,KAAa;YAC1B,IAAI,GAAG,GAAG,KAAK,CAAC;YAEhB,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;gBACrB,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,KAAK,KAAK,EAAE,EAAE;oBACnC,GAAG,GAAG,IAAI,CAAC;iBACd;qBAAM;oBACH,IAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAC3D,IAAI,CAAC,KAAK,CACb,CAAC;oBACF,IAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CACvD,KAAK,CACR,CAAC;oBAEF,GAAG,GAAG,YAAY,KAAK,QAAQ,CAAC;iBACnC;aACJ;iBAAM;gBACH,GAAG,GAAG,IAAI,CAAC;aACd;YAED,OAAO,GAAG,CAAC;SACd;QAED,sCAAQ,GAAR,UAAS,CAAM;YACX,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;YAE5C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC;QAED,oCAAM,GAAN,UAAO,CAAM;YACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;YAC5C,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;;gBAEtD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;oBAChD,IAAI,CAAC,QAAQ,CAAC,WAAW,CACrB,IAAI,CAAC,KAAK,CAAC,aAAa,EACxB,OAAO,EACP,IAAI,CAAC,KAAK,CACb,CAAC;iBACL;qBAAM;oBACH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;;oBAGnB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE;wBAChC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;qBAChC;oBAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAChC;aACJ;YAED,IAAI,IAAI,CAAC,YAAY,EAAE;gBACnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;aAC7B;SACJ;QAED,2CAAa,GAAb;YACI,IAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;YAChC,IAAI,YAAY,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;gBAChC,QAAQ,IAAI,CAAC,IAAI;oBACb,KAAK,OAAO;wBACR,MAAM,CAAC,IAAI,CAAC,SAAS,GAAG,YAAY,EAAE,OAAO,CAAC,CAAC;wBAC/C,MAAM;oBACV,KAAK,OAAO;wBACR,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,YAAY,EAAE,KAAK,CAAC,CAAC;wBAC1C,MAAM;oBACV,KAAK,MAAM;wBACP,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;wBAC1B,MAAM;oBACV;wBACI,MAAM;iBACb;aACJ;SACJ;QAED,iDAAmB,GAAnB,UAAoB,KAAU;YAA9B,iBAMC;YALG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YAEzB,UAAU,CAAC;gBACP,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aACpC,EAAE,CAAC,CAAC,CAAC;SACT;;;;gBAtZJC,cAAS,SAAC;oBACP,QAAQ,EAAE,aAAa;oBACvB,ihQAAuC;oBAEvC,eAAe,EAAEC,4BAAuB,CAAC,MAAM;;iBAClD;;;gBA3BmBC,iBAAW;gBAI3BH,8BAAuB;gBATvBI,cAAS;gBAFTC,eAAU;gBAQLC,uBAAgB;gBASrBC,0BAAmB;;;yBAoBlBC,gBAAW,SAAC,cAAc;sBAQ1BC,UAAK;wBAeLA,UAAK;iCAsBLA,UAAK;wBAqBLA,UAAK;8BAOLA,UAAK;uBAQLA,UAAK;4BAOLA,UAAK;2BAQLA,UAAK;2BAOLA,UAAK;qCACLA,UAAK;4BACLA,UAAK;6BACLA,UAAK;0BACLA,UAAK;2BAELA,UAAK;2BACLA,UAAK;0BAGLA,UAAK;uBAmBLA,UAAK;2BACLA,UAAK;4BACLA,UAAK;8BACLA,UAAK;8BACLA,UAAK;+BACLA,UAAK;6BACLA,UAAK;iCACLA,UAAK;8BAQLC,WAAM;uCAGNA,WAAM;wBAGNC,cAAS,SAAC,OAAO;;;;QClLlB,uCACY,WAAuB,EACvB,gBAAqC;YADrC,gBAAW,GAAX,WAAW,CAAY;YACvB,qBAAgB,GAAhB,gBAAgB,CAAqB;YANxC,SAAI,GAAwB,MAAM,CAAC;YAE5C,kBAAa,GAAG,EAAE,CAAC;SAKf;QAEJ,gDAAQ,GAAR;;SAEC;QAEO,gDAAQ,GAAR;YACJ,OAAO,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;SAC/C;QAEO,iDAAS,GAAT;YACJ,OAAO,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;SAC9B;QAEO,iDAAS,GAAT;YACJ,QACI,IAAI,CAAC,IAAI,KAAK,UAAU;gBACxB,IAAI,CAAC,IAAI,KAAK,YAAY;gBAC1B,IAAI,CAAC,IAAI,KAAK,MAAM,EACtB;SACL;QAEO,+CAAO,GAAP;YACJ,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;SAChC;QAEO,8CAAM,GAAN;YACJ,QACI,IAAI,CAAC,IAAI,KAAK,OAAO;gBACrB,IAAI,CAAC,IAAI,KAAK,MAAM;gBACpB,IAAI,CAAC,IAAI,KAAK,MAAM,EACtB;SACL;QAGD,gDAAQ,GAAR,UAAS,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC5D;QAGD,iDAAS,GAAT,UAAU,CAAgB;YACtB,IAAM,aAAa,GAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAEhD,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;;gBAEjB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACnC,IAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAC3C,CAAC,EACD,IAAI,CAAC,SAAS,EAAE,CACnB,CAAC;gBAEF,IAAI,QAAQ;oBAAE,OAAO;;oBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;aAC3B;iBAAM,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;gBACvB,IAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBACjD,IAAI,OAAO;oBAAE,OAAO;;oBACf,CAAC,CAAC,cAAc,EAAE,CAAC;aAC3B;SACJ;QAED,qDAAa,GAAb,UAAc,KAAa;YACvB,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;gBACjB,IAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CACjD,KAAK,EACL,IAAI,CAAC,SAAS,EAAE,CACnB,CAAC;gBACF,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC;aACrE;iBAAM,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE;;;gBAGvB,IAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACzD,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,KAAK;sBACzC,KAAK;sBACL,IAAI,CAAC,aAAa,CAAC;aAC5B;iBAAM,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;gBACtB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;aACnD;SACJ;;;;gBAxFJC,cAAS,SAAC;oBACP,QAAQ,EAAE,wBAAwB;iBACrC;;;gBAZGP,eAAU;gBAOVQ,0BAAmB;;;uBAOlBJ,UAAK;2BAyCLK,iBAAY,SAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC;4BAKjCA,iBAAY,SAAC,SAAS,EAAE,CAAC,QAAQ,CAAC;;;;QCpBnC,0BAAoB,eAAgC;YAAhC,oBAAe,GAAf,eAAe,CAAiB;YAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAACC,sBAAiB,CAAC,CAAC,CAAC;SAC3D;;;;gBAtBJC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;wBACZC,yBAAmB;;wBAEnBC,sBAAe;wBACfC,sBAAe;wBACfC,4BAAkB;wBAClBC,oBAAc;wBACdC,oBAAa;;wBAEbC,sBAAe;wBACfC,kBAAa;wBACbC,8BAAmB;wBACnBC,gCAAoB;qBACvB;oBACD,OAAO,EAAE,CAAC,mBAAmB,CAAC;oBAC9B,YAAY,EAAE,CAAC,mBAAmB,EAAE,6BAA6B,CAAC;iBACrE;;;gBA3BGC,oBAAe;;;ICbnB;;;;ICAA;;;;;;;;;;;;;;"}

package/bundles/pepperi-addons-ngx-lib-top-bar.umd.js

@@ -79,7 +79,7 @@
         { type: core.Component, args: [{
                     selector: 'pep-top-bar',
                     template: "<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\n    <div class=\"header-content\">\n        <div class=\"main-layout\">\n            <div class=\"content pep-border-bottom\">\n                <div class=\"left-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\n                </div>\n                <div class=\"pep-spacing-element\"></div>\n                <div class=\"right-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\n    <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\n        [style.height.rem]=\"customizationService.footerHeight\">\n        <div class=\"content pep-border-top\">\n            <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-start-content]\"></ng-content>\n            </div>\n            <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-end-content]\"></ng-content>\n            </div>\n        </div>\n        <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\n        </ng-container>\n        <ng-template #footerBlock>\n            {{ customizationService.showFooter() }}\n        </ng-template>\n        <ng-template #noFooterBlock>\n            {{ customizationService.hideFooter() }}\n        </ng-template> -->\n    </div>\n\n</div>\n\n<!-- Left side templates -->\n<ng-template #listActionsTemplate>\n    <div class=\"list-actions-wrapper\">\n        <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #titleTemplate>\n    <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\n        <span [title]=\"title\">{{ title }}</span>\n    </div>\n</ng-template>\n\n<ng-template #listChooserTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\n        <ng-content select=\"pep-list-chooser\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #leftContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-start-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #listTotalTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\n        <ng-content select=\"pep-list-total\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Right side templates -->\n<ng-template #searchTemplate>\n    <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\n        <ng-content select=\"pep-search\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #sortingTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\n        <ng-content select=\"pep-list-sorting\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #viewsTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\n        <ng-content select=\"pep-list-views\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #rightContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-end-content]\"></ng-content>\n    </div>\n</ng-template>",
-                    styles: [".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}"]
+                    styles: [".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}", ".pep-top-bar-container{background:#fff;background: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%))}.pep-top-bar-container .footer{background-color:#fff;background-color: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%))}"]
                 },] }
     ];
     PepTopBarComponent.ctorParameters = function () { return [

package/bundles/pepperi-addons-ngx-lib-top-bar.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-top-bar.umd.js","sources":["../../../projects/ngx-lib/top-bar/top-bar.component.ts","../../../projects/ngx-lib/top-bar/top-bar.module.ts","../../../projects/ngx-lib/top-bar/public-api.ts","../../../projects/ngx-lib/top-bar/pepperi-addons-ngx-lib-top-bar.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    ChangeDetectorRef,\n    ContentChild,\n    ElementRef,\n    OnDestroy,\n    ViewChild,\n} from '@angular/core';\nimport {\n    AfterViewInit,\n    Component,\n    EventEmitter,\n    Input,\n    Output,\n} from '@angular/core';\nimport {\n    PepCustomizationService,\n    PepLayoutService,\n    PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { PepSearchComponent } from '@pepperi-addons/ngx-lib/search';\nimport {\n    PepListActionsComponent,\n    PepListChooserComponent,\n    PepListSortingComponent,\n    PepListTotalComponent,\n    PepListViewsComponent,\n} from '@pepperi-addons/ngx-lib/list';\nimport { PepMenuStateType } from '@pepperi-addons/ngx-lib/menu';\nimport {\n    IPepSearchStateChangeEvent,\n    PepSearchStateType,\n} from '@pepperi-addons/ngx-lib/search';\nimport {\n    IPepFooterStateChangeEvent,\n    PepFooterStateType,\n} from './top-bar.model';\n\n@Component({\n    selector: 'pep-top-bar',\n    templateUrl: './top-bar.component.html',\n    styleUrls: ['./top-bar.component.scss'],\n})\nexport class PepTopBarComponent implements AfterViewInit, AfterContentInit, OnDestroy {\n    @Input() inline = false;\n    @Input() title: string = null;\n\n    @Output()\n    footerStateChange: EventEmitter<IPepFooterStateChangeEvent> = new EventEmitter<IPepFooterStateChangeEvent>();\n\n    @ViewChild('footerStartContent') footerStartContent: ElementRef;\n    @ViewChild('footerEndContent') footerEndContent: ElementRef;\n\n    @ContentChild(PepSearchComponent) searchComp: PepSearchComponent;\n    @ContentChild(PepListActionsComponent)\n    listActionsComp: PepListActionsComponent;\n    @ContentChild(PepListChooserComponent)\n    listChooserComp: PepListChooserComponent;\n    @ContentChild(PepListTotalComponent) listTotalComp: PepListTotalComponent;\n    @ContentChild(PepListSortingComponent)\n    listSortingComp: PepListSortingComponent;\n    @ContentChild(PepListViewsComponent) listViewsComp: PepListViewsComponent;\n\n    hasFooterContent = null;\n    isHidden = true;\n    screenSize: PepScreenSizeType;\n    // listActionsIsVisible = false;\n    searchState: PepSearchStateType;\n    searchIsOpenAndSmallDevice = false;\n    footerState: PepFooterStateType;\n    PepScreenSizeType = PepScreenSizeType;\n\n    constructor(\n        public customizationService: PepCustomizationService,\n        public layoutService: PepLayoutService,\n        private cdRef: ChangeDetectorRef\n    ) { }\n\n    ngAfterViewInit(): void {\n        if (!this.inline) {\n            this.hasFooterContent =\n                this.footerStartContent?.nativeElement?.children?.length > 0 ||\n                this.footerEndContent?.nativeElement?.children?.length > 0;\n        }\n\n        this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\n            this.screenSize = size;\n            this.setSearchIsOpenAndSmallDevice();\n\n            if (!this.inline) {\n                this.setFooterState();\n            }\n        });\n\n        this.isHidden = false;\n        this.cdRef.detectChanges();\n    }\n\n    ngAfterContentInit() {\n        if (this.searchComp) {\n            this.searchComp.stateChange\n                .subscribe(\n                    (searchStateChangeEvent: IPepSearchStateChangeEvent) => {\n                        this.searchState = searchStateChangeEvent.state;\n                        this.setSearchIsOpenAndSmallDevice();\n                    }\n                )\n                .unsubscribe();\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (this.customizationService) {\n            this.customizationService.hideFooter();\n        }\n    }\n\n    private setSearchIsOpenAndSmallDevice(): void {\n        // check if search is open and the device size is small or extra small\n        this.searchIsOpenAndSmallDevice =\n            this.screenSize > PepScreenSizeType.SM &&\n            this.searchState === 'open';\n    }\n\n    private setFooterState() {\n        const newFooterState: PepFooterStateType =\n            this.hasFooterContent && this.screenSize >= PepScreenSizeType.MD\n                ? 'visible'\n                : 'hidden';\n\n        if (this.footerState !== newFooterState) {\n            this.footerState = newFooterState;\n            this.cdRef.detectChanges();\n            this.footerStateChange.emit({ state: this.footerState });\n\n            if (this.footerState === 'visible') {\n                this.customizationService.showFooter()\n            } else {\n                this.customizationService.hideFooter()\n            }\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemMenu,\n    pepIconSystemEdit,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { PepTopBarComponent } from './top-bar.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules,\n        MatCommonModule,\n        MatMenuModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepMenuModule,\n        PepIconModule,\n        PepSearchModule,\n    ],\n    exports: [PepTopBarComponent],\n    declarations: [PepTopBarComponent],\n})\nexport class PepTopBarModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemMenu,\n            pepIconSystemEdit,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/top-bar\n */\nexport * from './top-bar.module';\nexport * from './top-bar.component';\nexport * from './top-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["EventEmitter","PepScreenSizeType","Component","PepCustomizationService","PepLayoutService","ChangeDetectorRef","Input","Output","ViewChild","ContentChild","PepSearchComponent","PepListActionsComponent","PepListChooserComponent","PepListTotalComponent","PepListSortingComponent","PepListViewsComponent","pepIconSystemMenu","pepIconSystemEdit","NgModule","CommonModule","MatCommonModule","MatMenuModule","MatIconModule","PepNgxLibModule","PepMenuModule","PepIconModule","PepSearchModule","PepIconRegistry"],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-top-bar.umd.js","sources":["../../../projects/ngx-lib/top-bar/top-bar.component.ts","../../../projects/ngx-lib/top-bar/top-bar.module.ts","../../../projects/ngx-lib/top-bar/public-api.ts","../../../projects/ngx-lib/top-bar/pepperi-addons-ngx-lib-top-bar.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    ChangeDetectorRef,\n    ContentChild,\n    ElementRef,\n    OnDestroy,\n    ViewChild,\n} from '@angular/core';\nimport {\n    AfterViewInit,\n    Component,\n    EventEmitter,\n    Input,\n    Output,\n} from '@angular/core';\nimport {\n    PepCustomizationService,\n    PepLayoutService,\n    PepScreenSizeType,\n} from '@pepperi-addons/ngx-lib';\nimport { PepSearchComponent } from '@pepperi-addons/ngx-lib/search';\nimport {\n    PepListActionsComponent,\n    PepListChooserComponent,\n    PepListSortingComponent,\n    PepListTotalComponent,\n    PepListViewsComponent,\n} from '@pepperi-addons/ngx-lib/list';\nimport { PepMenuStateType } from '@pepperi-addons/ngx-lib/menu';\nimport {\n    IPepSearchStateChangeEvent,\n    PepSearchStateType,\n} from '@pepperi-addons/ngx-lib/search';\nimport {\n    IPepFooterStateChangeEvent,\n    PepFooterStateType,\n} from './top-bar.model';\n\n@Component({\n    selector: 'pep-top-bar',\n    templateUrl: './top-bar.component.html',\n    styleUrls: ['./top-bar.component.scss', './top-bar.component.theme.scss'],\n})\nexport class PepTopBarComponent implements AfterViewInit, AfterContentInit, OnDestroy {\n    @Input() inline = false;\n    @Input() title: string = null;\n\n    @Output()\n    footerStateChange: EventEmitter<IPepFooterStateChangeEvent> = new EventEmitter<IPepFooterStateChangeEvent>();\n\n    @ViewChild('footerStartContent') footerStartContent: ElementRef;\n    @ViewChild('footerEndContent') footerEndContent: ElementRef;\n\n    @ContentChild(PepSearchComponent) searchComp: PepSearchComponent;\n    @ContentChild(PepListActionsComponent)\n    listActionsComp: PepListActionsComponent;\n    @ContentChild(PepListChooserComponent)\n    listChooserComp: PepListChooserComponent;\n    @ContentChild(PepListTotalComponent) listTotalComp: PepListTotalComponent;\n    @ContentChild(PepListSortingComponent)\n    listSortingComp: PepListSortingComponent;\n    @ContentChild(PepListViewsComponent) listViewsComp: PepListViewsComponent;\n\n    hasFooterContent = null;\n    isHidden = true;\n    screenSize: PepScreenSizeType;\n    // listActionsIsVisible = false;\n    searchState: PepSearchStateType;\n    searchIsOpenAndSmallDevice = false;\n    footerState: PepFooterStateType;\n    PepScreenSizeType = PepScreenSizeType;\n\n    constructor(\n        public customizationService: PepCustomizationService,\n        public layoutService: PepLayoutService,\n        private cdRef: ChangeDetectorRef\n    ) { }\n\n    ngAfterViewInit(): void {\n        if (!this.inline) {\n            this.hasFooterContent =\n                this.footerStartContent?.nativeElement?.children?.length > 0 ||\n                this.footerEndContent?.nativeElement?.children?.length > 0;\n        }\n\n        this.layoutService.onResize$.subscribe((size: PepScreenSizeType) => {\n            this.screenSize = size;\n            this.setSearchIsOpenAndSmallDevice();\n\n            if (!this.inline) {\n                this.setFooterState();\n            }\n        });\n\n        this.isHidden = false;\n        this.cdRef.detectChanges();\n    }\n\n    ngAfterContentInit() {\n        if (this.searchComp) {\n            this.searchComp.stateChange\n                .subscribe(\n                    (searchStateChangeEvent: IPepSearchStateChangeEvent) => {\n                        this.searchState = searchStateChangeEvent.state;\n                        this.setSearchIsOpenAndSmallDevice();\n                    }\n                )\n                .unsubscribe();\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (this.customizationService) {\n            this.customizationService.hideFooter();\n        }\n    }\n\n    private setSearchIsOpenAndSmallDevice(): void {\n        // check if search is open and the device size is small or extra small\n        this.searchIsOpenAndSmallDevice =\n            this.screenSize > PepScreenSizeType.SM &&\n            this.searchState === 'open';\n    }\n\n    private setFooterState() {\n        const newFooterState: PepFooterStateType =\n            this.hasFooterContent && this.screenSize >= PepScreenSizeType.MD\n                ? 'visible'\n                : 'hidden';\n\n        if (this.footerState !== newFooterState) {\n            this.footerState = newFooterState;\n            this.cdRef.detectChanges();\n            this.footerStateChange.emit({ state: this.footerState });\n\n            if (this.footerState === 'visible') {\n                this.customizationService.showFooter()\n            } else {\n                this.customizationService.hideFooter()\n            }\n        }\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepMenuModule } from '@pepperi-addons/ngx-lib/menu';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemMenu,\n    pepIconSystemEdit,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepSearchModule } from '@pepperi-addons/ngx-lib/search';\n\nimport { PepTopBarComponent } from './top-bar.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        // Material modules,\n        MatCommonModule,\n        MatMenuModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepMenuModule,\n        PepIconModule,\n        PepSearchModule,\n    ],\n    exports: [PepTopBarComponent],\n    declarations: [PepTopBarComponent],\n})\nexport class PepTopBarModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([\n            pepIconSystemMenu,\n            pepIconSystemEdit,\n        ]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/top-bar\n */\nexport * from './top-bar.module';\nexport * from './top-bar.component';\nexport * from './top-bar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["EventEmitter","PepScreenSizeType","Component","PepCustomizationService","PepLayoutService","ChangeDetectorRef","Input","Output","ViewChild","ContentChild","PepSearchComponent","PepListActionsComponent","PepListChooserComponent","PepListTotalComponent","PepListSortingComponent","PepListViewsComponent","pepIconSystemMenu","pepIconSystemEdit","NgModule","CommonModule","MatCommonModule","MatMenuModule","MatIconModule","PepNgxLibModule","PepMenuModule","PepIconModule","PepSearchModule","PepIconRegistry"],"mappings":"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"}

package/bundles/pepperi-addons-ngx-lib.umd.js

@@ -3899,13 +3899,14 @@
         };
         PepCustomizationService.prototype.getFormControl = function (form, fieldKey, parentFieldKey) {
             if (parentFieldKey === void 0) { parentFieldKey = null; }
+            var _a;
             var formControl = null;
             if (form && form.controls) {
                 if (parentFieldKey === null) {
                     formControl = form.controls[fieldKey];
                 }
                 else {
-                    formControl = form.controls[parentFieldKey].get(fieldKey);
+                    formControl = (_a = form.controls[parentFieldKey]) === null || _a === void 0 ? void 0 : _a.get(fieldKey);
                 }
             }
             return formControl;
@@ -4538,6 +4539,7 @@
         return PepCustomizationService;
     }());
     PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME = 'pep-field';
+    PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME = 'pep-field-no-spacing';
     PepCustomizationService.REM_STRING = 'rem';
     PepCustomizationService.PX_STRING = 'px';
     PepCustomizationService.USER_THEME = 'user_theme';