@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-beta.2

package/textarea/pepperi-addons-ngx-lib-textarea.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepTextareaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":24,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":34,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":36,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":39,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":40,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTextareaComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTextareaComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":46,"character":41}]}]}},"PepTextareaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-textarea","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\r\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\r\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\r\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\r\n            'pep-textarea-card-container': layoutType === 'card'}\">\r\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\r\n                [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\r\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\r\n            </pep-field-title>\r\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\r\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\r\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\r\n                    title=\"{{ value }}\" [value]=\"value\"\r\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\r\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\r\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\">\r\n                </textarea>\r\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\r\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\r\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\r\n                </div>\r\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\r\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\r\n                </pep-textbox-icon> -->\r\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\r\n                    [disabled]=\"disabled || readonly\"\r\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\r\n                    (iconClick)=\"openDialog()\">\r\n                </pep-textbox-icon>\r\n                <mat-error>\r\n                    <span class=\"body-xs\"\r\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\r\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\r\n        <ng-template #editBlock>\r\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #readOnlyBlock>\r\n            <div class=\"pep-textarea-card-container card-flex-container\"\r\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\r\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\r\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\r\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\r\n                    }}&nbsp;</span>\r\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\r\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\r\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\r\n                    <mat-icon>\r\n                        <pep-icon name=\"system_edit\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </button>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'table'\">\r\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\r\n        <ng-template #selectedBlock>\r\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #notSelectedBlock>\r\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\r\n            <ng-template #notEmptyBlock>\r\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\r\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\r\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\r\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\r\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\r\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\r\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\r\n                    </pep-textbox-icon>\r\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\r\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\r\n                    </pep-textbox-icon>\r\n                </mat-form-field>\r\n            </ng-template>\r\n            <ng-template #emptyBlock>\r\n                <span>&nbsp;</span>\r\n            </ng-template>\r\n        </ng-template>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #textAreaDialogTemplate>\r\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\">\r\n        <ng-container pep-dialog-content>\r\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea>\r\n        </ng-container>\r\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\r\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\r\n            </ng-container>\r\n            <ng-template #editableBlock>\r\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\r\n                    {{ 'ACTIONS.CANCEL' | translate }}\r\n                </button>\r\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\r\n                    (click)=\"closeDialog(dialogTextarea.value)\">\r\n                    {{ 'ACTIONS.SAVE' | translate }}\r\n                </button>\r\n            </ng-template>\r\n            <ng-template #notEditableBlock>\r\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\r\n                    {{ 'ACTIONS.CLOSE' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </div>\r\n    </pep-dialog>\r\n</ng-template>","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}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"maxFieldCharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"textAreaDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":95,"character":5},"arguments":["textAreaDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":95,"character":49}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":105,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":106,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":107,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":108,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"closeDialog":[{"__symbolic":"method"}]}}},"origins":{"PepTextareaModule":"./textarea.module","PepTextareaComponent":"./textarea.component"},"importAs":"@pepperi-addons/ngx-lib/textarea"}
+{"__symbolic":"module","version":4,"metadata":{"PepTextareaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":24,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":34,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":36,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":39,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":40,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTextareaComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTextareaComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":46,"character":41}]}]}},"PepTextareaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-textarea","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"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>","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}.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}.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}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"maxFieldCharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"textAreaDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":95,"character":5},"arguments":["textAreaDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":95,"character":49}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":105,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":106,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":107,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":108,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"closeDialog":[{"__symbolic":"method"}]}}},"origins":{"PepTextareaModule":"./textarea.module","PepTextareaComponent":"./textarea.component"},"importAs":"@pepperi-addons/ngx-lib/textarea"}

package/textarea/textarea.component.theme.scss

@@ -1,2 +1,3 @@
-@mixin pep-textarea-component-theme($pepperi-theme) {
-}
+@use '../src/core/style/components/textarea';
+
+@include textarea.pep-textarea-theme();

package/textbox/pepperi-addons-ngx-lib-textbox.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepTextboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":22,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":31,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":33,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":34,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":35,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":36,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTextboxComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTextboxComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":42,"character":41}]}]}},"PepTextboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"pep-textbox","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":41,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\r\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\r\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\r\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [xAlignment]=\"xAlignment\"\r\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\r\n        </pep-field-title>\r\n        <mat-form-field appearance=\"outline\">\r\n            <input #input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\r\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\r\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\r\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\r\n                title=\"{{ formattedValue }}\" [formControlName]=\"key\" [type]=\"type\" [value]=\"displayValue\"\r\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\r\n                (change)=\"onChange($event)\"\r\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\r\n\r\n            <span\r\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\r\n                class=\"dis-grid\">\r\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\r\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\r\n            </span>\r\n            <mat-error *ngIf=\"renderError\">\r\n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherError\">\r\n                </ng-container>\r\n                <ng-template #requiredError>\r\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\r\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\r\n                    </span>\r\n                </ng-template>\r\n                <ng-template #otherError>\r\n                    <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\r\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\r\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\r\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\r\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\r\n                    </span>\r\n                </ng-template>\r\n            </mat-error>\r\n\r\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\r\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\r\n            </pep-textbox-icon>\r\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\r\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\r\n            </pep-textbox-icon>\r\n        </mat-form-field>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\r\n        <ng-template #regularBlock>\r\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #groupedBlock>\r\n            <ng-container [formGroupName]=\"parentFieldKey\">\r\n                <mat-form-field appearance=\"outline\">\r\n                    <!-- (keyup)=\"onKeyUp($event)\"  -->\r\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\r\n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\r\n                        [formControlName]=\"key\" [value]=\"value\" (blur)=\"onBlur($event)\" (change)=\"onChange($event)\"\r\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\r\n                </mat-form-field>\r\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\r\n            </ng-container>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\r\n        <ng-template #editBlock>\r\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\r\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\r\n                </ng-container>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #readOnlyBlock>\r\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\r\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\r\n                            'multi-rows': rowSpan > 1,\r\n                            'pep-button weak': isActive && !disabled}\"\r\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\r\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\r\n                    }}&nbsp;</span>\r\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\r\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\r\n                    formattedValue }}</span>\r\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\r\n                    <mat-icon>\r\n                        <pep-icon name=\"system_edit\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </button>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'table'\">\r\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\r\n        <ng-template #selectedBlock>\r\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\r\n            </ng-container>\r\n        </ng-template>\r\n        <ng-template #notSelectedBlock>\r\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\r\n            <ng-template #notEmptyBlock>\r\n                <ng-container [ngSwitch]=\"type\">\r\n                    <ng-container *ngSwitchCase=\"'link'\">\r\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\r\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\r\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\r\n                            formattedValue }}</a>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\r\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-template>\r\n            <ng-template #emptyBlock>\r\n                <span [id]=\"key\">&nbsp;</span>\r\n            </ng-template>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n</ng-container>","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}"]}]}],"members":{"dataQa":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":45,"character":5},"arguments":["attr.data-qa"]}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"maxFieldCharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":177,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":178,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":5}}]}],"renderError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":181,"character":5}}]}],"renderSymbol":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":183,"character":5}}]}],"parentFieldKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":192,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":195,"character":5}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":198,"character":5},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":212,"character":19},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":213,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":214,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":215,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":216,"character":27},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepUtilitiesService","line":217,"character":34}]}],"setFormattedValue":[{"__symbolic":"method"}],"updateFormFieldValue":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"isNumberType":[{"__symbolic":"method"}],"isValueValid":[{"__symbolic":"method"}],"isDifferentValue":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"anchorClicked":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[pepTextboxValidation]"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":21,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepValidatorService","line":22,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"isNumber":[{"__symbolic":"method"}],"isInteger":[{"__symbolic":"method"}],"isDecimal":[{"__symbolic":"method"}],"isPhone":[{"__symbolic":"method"}],"isText":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":57,"character":5},"arguments":["change",["$event"]]}]}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":62,"character":5},"arguments":["keydown",["$event"]]}]}],"validateValue":[{"__symbolic":"method"}]}}},"origins":{"PepTextboxModule":"./textbox.module","PepTextboxComponent":"./textbox.component","ɵa":"./textbox-validation.directive"},"importAs":"@pepperi-addons/ngx-lib/textbox"}
+{"__symbolic":"module","version":4,"metadata":{"PepTextboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":22,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":31,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":33,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":34,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":35,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":36,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTextboxComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTextboxComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":42,"character":41}]}]}},"PepTextboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":37,"character":1},"arguments":[{"selector":"pep-textbox","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":41,"character":21},"member":"OnPush"},"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>","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}",""]}]}],"members":{"dataQa":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":45,"character":5},"arguments":["attr.data-qa"]}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"maxFieldCharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":149,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":151,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":177,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":178,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":5}}]}],"renderError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":181,"character":5}}]}],"renderSymbol":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":182,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":183,"character":5}}]}],"parentFieldKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":192,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":195,"character":5}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":198,"character":5},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":212,"character":19},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":213,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":214,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":215,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":216,"character":27},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepUtilitiesService","line":217,"character":34}]}],"setFormattedValue":[{"__symbolic":"method"}],"updateFormFieldValue":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"isNumberType":[{"__symbolic":"method"}],"isValueValid":[{"__symbolic":"method"}],"isDifferentValue":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"anchorClicked":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[pepTextboxValidation]"}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":21,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepValidatorService","line":22,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"isNumber":[{"__symbolic":"method"}],"isInteger":[{"__symbolic":"method"}],"isDecimal":[{"__symbolic":"method"}],"isPhone":[{"__symbolic":"method"}],"isText":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":57,"character":5},"arguments":["change",["$event"]]}]}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":62,"character":5},"arguments":["keydown",["$event"]]}]}],"validateValue":[{"__symbolic":"method"}]}}},"origins":{"PepTextboxModule":"./textbox.module","PepTextboxComponent":"./textbox.component","ɵa":"./textbox-validation.directive"},"importAs":"@pepperi-addons/ngx-lib/textbox"}

package/textbox/textbox.component.theme.scss

@@ -1,3 +1,3 @@
-@mixin pep-textbox-component-theme($pepperi-theme) {
-    
-}
+@mixin pep-textbox-component-theme() {
+    
+}

package/textbox-icon/pepperi-addons-ngx-lib-textbox-icon.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepTextboxIconModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":34,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":36,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTextboxIconComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTextboxIconComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":42,"character":41}]}]}},"PepTextboxIconComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"pep-textbox-icon","template":"<mat-icon *ngIf=\"type === 'currency'\" class=\"pep-text-icon\">\r\n    <pep-icon name=\"number_coins\">\r\n    </pep-icon>\r\n</mat-icon>\r\n<mat-icon *ngIf=\"type === 'percentage'\" class=\"pep-text-icon\">\r\n    <pep-icon name=\"number_percent\">\r\n    </pep-icon>\r\n</mat-icon>\r\n<mat-icon *ngIf=\"type === 'int'\" class=\"pep-text-icon\">\r\n    <pep-icon name=\"number_number\">\r\n    </pep-icon>\r\n</mat-icon>\r\n<mat-icon *ngIf=\"type === 'real'\" class=\"pep-text-icon\">\r\n    <pep-icon name=\"number_decimal\">\r\n    </pep-icon>\r\n</mat-icon>\r\n<button *ngIf=\"type === 'phone'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\r\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\r\n    <mat-icon>\r\n        <pep-icon name=\"system_phone\">\r\n        </pep-icon>\r\n    </mat-icon>\r\n</button>\r\n<button *ngIf=\"type === 'email'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\r\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\r\n    <mat-icon>\r\n        <pep-icon name=\"system_email\">\r\n        </pep-icon>\r\n    </mat-icon>\r\n</button>\r\n<button *ngIf=\"type === 'link'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\r\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\r\n    <mat-icon>\r\n        <pep-icon name=\"system_link\">\r\n        </pep-icon>\r\n    </mat-icon>\r\n</button>\r\n<button *ngIf=\"type === 'textarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\r\n    <mat-icon>\r\n        <pep-icon name=\"system_full_screen\">\r\n        </pep-icon>\r\n    </mat-icon>\r\n</button>\r\n<button *ngIf=\"type === 'richhtmltextarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\r\n    <mat-icon>\r\n        <pep-icon name=\"{{ disabled ? 'system_full_screen' : 'system_edit'}}\">\r\n        </pep-icon>\r\n    </mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"!disabled && type === 'datetime'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\r\n    <mat-icon>\r\n        <pep-icon name=\"time_datetime\">\r\n        </pep-icon>\r\n    </mat-icon>\r\n</button>\r\n\r\n<button *ngIf=\"!disabled && type === 'date'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\r\n    <mat-icon>\r\n        <pep-icon name=\"time_cal\">\r\n        </pep-icon>\r\n    </mat-icon>\r\n</button>\r\n\r\n<!-- <span class=\"pep-text-icon\" *ngIf=\"type === 'percentage'\">%</span> -->\r\n<!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\r\n<!-- <mat-icon matPrefix>sentiment_very_satisfied</mat-icon> -->\r\n<!-- <mat-hint>Hint</mat-hint> -->","styles":[":host{display:flex}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"iconClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":5}}]}],"iconButtonClicked":[{"__symbolic":"method"}]}}},"origins":{"PepTextboxIconModule":"./textbox-icon.module","PepTextboxIconComponent":"./textbox-icon.component"},"importAs":"@pepperi-addons/ngx-lib/textbox-icon"}
+{"__symbolic":"module","version":4,"metadata":{"PepTextboxIconModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":34,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":36,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTextboxIconComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTextboxIconComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":42,"character":41}]}]}},"PepTextboxIconComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"pep-textbox-icon","template":"<mat-icon *ngIf=\"type === 'currency'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_coins\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'percentage'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_percent\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'int'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_number\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'real'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_decimal\">\n    </pep-icon>\n</mat-icon>\n<button *ngIf=\"type === 'phone'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_phone\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'email'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_email\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'link'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_link\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'textarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"system_full_screen\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'richhtmltextarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"{{ disabled ? 'system_full_screen' : 'system_edit'}}\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'datetime'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_datetime\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'date'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_cal\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<!-- <span class=\"pep-text-icon\" *ngIf=\"type === 'percentage'\">%</span> -->\n<!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-icon matPrefix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-hint>Hint</mat-hint> -->","styles":[":host{display:flex}"]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"iconClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":5}}]}],"iconButtonClicked":[{"__symbolic":"method"}]}}},"origins":{"PepTextboxIconModule":"./textbox-icon.module","PepTextboxIconComponent":"./textbox-icon.component"},"importAs":"@pepperi-addons/ngx-lib/textbox-icon"}