@pepperi-addons/ngx-lib 0.2.59-query-builder.7 → 0.2.61

package/quantity-selector/pepperi-addons-ngx-lib-quantity-selector.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepQuantitySelectorModule":{"__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/form-field","name":"MatFormFieldModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","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}],"exports":[{"__symbolic":"reference","name":"PepQuantitySelectorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepQuantitySelectorComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":48,"character":41}]}]}},"PepQuantitySelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"pep-quantity-selector","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":42,"character":21},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":44,"character":8},"arguments":["showHide",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":45,"character":12},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":47,"character":16},"arguments":[{"opacity":1,"transform":"scale(1)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":52,"character":12},"arguments":["hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":54,"character":16},"arguments":[{"opacity":0,"transform":"scale(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":59,"character":12},"arguments":["show => hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":59,"character":39},"arguments":["250ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":60,"character":12},"arguments":["hide => show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":60,"character":39},"arguments":["250ms ease-in"]}]}]]}],"template":"<ng-container [formGroup]=\"form\">\r\n    <ng-template #pepTemplate>\r\n        <div #QSCont class=\"pep-quantity-selector-container {{ styleType }}\" [ngClass]=\"{\r\n                'hide-qs-actions' : layoutType === 'card' && rowSpan <= 1,\r\n                'pep-table-quantity-selector': layoutType === 'table',\r\n                'one-row': rowSpan === 1,\r\n                caution: isCaution,\r\n                'matrix-qs': type === 'qsForMatrix',\r\n                'zero-quantity': formattedValue === '0'\r\n            }\">\r\n            <pep-field-title *ngIf=\"renderTitle && layoutType !== 'table' && layoutType !== 'card'\" [label]=\"label\"\r\n                [mandatory]=\"mandatory\" [disabled]=\"disabled\" [showTitle]=\"showTitle\" [xAlignment]=\"xAlignment\">\r\n            </pep-field-title>\r\n\r\n            <ng-container *ngIf=\"type == 'qs'\">\r\n                <ng-container *ngIf=\"readonly; then readonlyBlock; else editableQSBlock\"></ng-container>\r\n                <ng-template #readonlyBlock>\r\n                    <button [id]=\"key\" mat-button class=\"pep-button {{ styleType }} disable \"\r\n                        [ngClass]=\"{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\r\n                        title=\"{{ formattedValue }}\" disabled=\"true\">\r\n                        <span class=\"ellipsis\">\r\n                            {{ formattedValue }}\r\n                        </span>\r\n                    </button>\r\n                </ng-template>\r\n                <ng-template #editableQSBlock>\r\n                    <mat-form-field appearance=\"outline\">\r\n                        <input pepQsValidation [allowDecimal]=\"allowDecimal\" type=\"decimalNumber\" inputmode=\"decimal\"\r\n                            matInput #QSInput name=\"{{ key }}\" class=\"body-lg ellipsis\" title=\"{{ formattedValue }}\"\r\n                            autocomplete=\"off\" [id]=\"key\" [formControlName]=\"key\" [value]=\"displayValue\"\r\n                            (click)=\"$event.target.setSelectionRange(0, 999)\" (keydown)=\"onKeydown($event)\"\r\n                            (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\r\n                        <button *ngIf=\"showQsBtn\" mat-button matPrefix (click)=\"decrement($event)\"\r\n                            class=\"pep-button icon-button sm weak qs-action\" [disabled]=\"disabled\" [ngClass]=\"{ disable: disabled, caution: isCaution && styleType !== 'strong',\r\n                                'keep-background-on-focus': styleType === 'strong'}\">\r\n                            <mat-icon>\r\n                                <pep-icon name=\"number_minus\">\r\n                                </pep-icon>\r\n                            </mat-icon>\r\n                        </button>\r\n                        <button *ngIf=\"showQsBtn\" mat-button matSuffix (click)=\"increment($event)\"\r\n                            class=\"pep-button icon-button sm weak qs-action\" [disabled]=\"disabled\" [ngClass]=\"{ disable: disabled, caution: isCaution && styleType !== 'strong',\r\n                                'keep-background-on-focus': styleType === 'strong'}\">\r\n                            <mat-icon>\r\n                                <pep-icon name=\"number_plus\">\r\n                                </pep-icon>\r\n                            </mat-icon>\r\n                        </button>\r\n                        <mat-error *ngIf=\"messages?.length > 0\">\r\n                            <span class=\"qs-error body-xs\" *ngFor=\"let msg of messages\"> {{ msg.Key | translate }} :\r\n                                {{ msg.Value }} </span>\r\n                        </mat-error>\r\n                    </mat-form-field>\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"type == 'qsForMatrix'\">\r\n                <ng-container *ngIf=\"readonly; then readonlyBlock; else editableQSBlock\"></ng-container>\r\n                <ng-template #readonlyBlock>\r\n                    <button [id]=\"key\" mat-button class=\"pep-button {{ styleType }} disable\" disabled=\"true\"\r\n                        [ngClass]=\"{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\">\r\n                        X\r\n                    </button>\r\n                </ng-template>\r\n                <ng-template #editableQSBlock>\r\n                    <span *ngIf=\" xAlignment=='right'\" class=\" body-sm additional-value prefix\"\r\n                        matBadge=\"{{ additionalValue }}\" matBadgePosition=\"before\"\r\n                        matBadgeSize=\"rowSpan === 1 ? small : medium\" [@showHide]=\"getAdditionalValue\"></span>\r\n\r\n                    <mat-form-field appearance=\"outline\" (mouseleave)=\"!isInFocus ? onMatrixMouseleave($event) : null\">\r\n                        <input pepQsValidation [allowDecimal]=\"allowDecimal\" type=\"decimalNumber\" inputmode=\"decimal\"\r\n                            matInput #QSInput name=\"{{ key }}\" title=\"{{ formattedValue }}\" class=\"body-sm ellipsis\"\r\n                            autocomplete=\"off\" [id]=\"key\" [formControlName]=\"key\" [value]=\"displayValue\"\r\n                            (click)=\"onMatrixClick($event); $event.target.setSelectionRange(0, 999)\"\r\n                            (keydown)=\"onKeydown($event)\" (blur)=\"onMatrixBlur($event)\"\r\n                            (focus)=\"onMatrixMouseEnter($event); onFocus($event)\"\r\n                            (mouseenter)=\"onMatrixMouseEnter($event)\" />\r\n\r\n                        <mat-error *ngIf=\"messages?.length > 0\">\r\n                            <span class=\"qs-error body-xs\" *ngFor=\"let msg of messages\"> {{ msg.Key | translate }} :\r\n                                {{ msg.Value }} </span>\r\n                        </mat-error>\r\n                    </mat-form-field>\r\n\r\n                    <span *ngIf=\"xAlignment != 'right'\" class=\"body-sm additional-value suffix\"\r\n                        matBadge=\"{{ additionalValue }}\" matBadgePosition=\"before\"\r\n                        matBadgeSize=\"rowSpan === 1 ? small : medium\" [@showHide]=\"getAdditionalValue\"></span>\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"type == 'button'\">\r\n                <ng-container *ngIf=\"(value | pepToNumber) == 0; then regularBlock; else withBadgeBlock\">\r\n                </ng-container>\r\n                <ng-template #regularBlock>\r\n                    <button mat-button [disabled]=\"disabled\" class=\"pep-button {{ styleType }} \" [id]=\"key\"\r\n                        name=\"{{ key }}\"\r\n                        [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\r\n                        [title]=\"'QS.ORDER' | translate\" (click)=\"enterChildren($event)\">\r\n                        <span class=\"ellipsis\">\r\n                            {{ 'QS.ORDER' | translate }}\r\n                        </span>\r\n                    </button>\r\n                </ng-template>\r\n                <ng-template #withBadgeBlock>\r\n                    <button mat-button matBadge=\"{{ formattedValue }}\"\r\n                        matBadgePosition=\"{{xAlignment == 'right' ? 'before' : 'after'}}\"\r\n                        [matBadgeSize]=\"layoutType === 'card' && rowSpan === 1 ? 'small' : 'medium'\"\r\n                        class=\"pep-button {{ styleType }} \" [id]=\"key\" name=\"{{ key }}\" [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1,\r\n                            'right-alignment': xAlignment == 'right', 'left-alignment': xAlignment != 'right'}\"\r\n                        [title]=\"'QS.ORDER' | translate\" (click)=\"enterChildren($event)\" [disabled]=\"disabled\">\r\n                        <span class=\"ellipsis\">\r\n                            {{ 'QS.ORDER' | translate }}\r\n                        </span>\r\n                    </button>\r\n                </ng-template>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"type == 'packageButton'\">\r\n                <button mat-button class=\"pep-button {{ styleType }} \" [id]=\"key\" name=\"{{ key }}\"\r\n                    [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\r\n                    [title]=\"'QS.ORDER' | translate\" (click)=\"enterPackage($event)\" [disabled]=\"disabled\">\r\n                    <span class=\"ellipsis\">\r\n                        {{ 'QS.ORDER' | translate }} &#40;{{ formattedValue }}&#41;\r\n                    </span>\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'table'\">\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n</ng-container>","styles":[":host{height:inherit;display:grid}.pep-quantity-selector-container,.pepperi-quantity-selector-container{display:flex;flex-flow:wrap;align-items:center;min-width:2rem;width:100%;height:inherit}.pep-quantity-selector-container input::-webkit-inner-spin-button,.pep-quantity-selector-container input::-webkit-outer-spin-button,.pepperi-quantity-selector-container input::-webkit-inner-spin-button,.pepperi-quantity-selector-container input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pep-quantity-selector-container input[type=number],.pepperi-quantity-selector-container input[type=number]{-moz-appearance:textfield}.pep-quantity-selector-container .mat-input-element,.pepperi-quantity-selector-container .mat-input-element{padding:0 .25rem;text-align:center;font-weight:600;font-weight:var(--pep-font-weight-bold,600);width:100%}.pep-quantity-selector-container .mat-form-field .mat-form-field-wrapper .mat-form-field-subscript-wrapper,.pepperi-quantity-selector-container .mat-form-field .mat-form-field-wrapper .mat-form-field-subscript-wrapper{height:unset}.pep-quantity-selector-container .pep-button,.pep-quantity-selector-container .pepperi-button,.pepperi-quantity-selector-container .pep-button,.pepperi-quantity-selector-container .pepperi-button{width:100%}.pep-quantity-selector-container .pep-button.qs-action,.pep-quantity-selector-container .pepperi-button.qs-action,.pepperi-quantity-selector-container .pep-button.qs-action,.pepperi-quantity-selector-container .pepperi-button.qs-action{min-width:2rem;line-height:2rem;width:2rem!important;height:2rem!important}.pep-quantity-selector-container .pep-button.qs-action .mat-icon,.pep-quantity-selector-container .pepperi-button.qs-action .mat-icon,.pepperi-quantity-selector-container .pep-button.qs-action .mat-icon,.pepperi-quantity-selector-container .pepperi-button.qs-action .mat-icon{height:inherit;width:inherit}.pep-quantity-selector-container .qs-error,.pepperi-quantity-selector-container .qs-error{display:block}.pep-quantity-selector-container.hide-qs-actions .pep-button.qs-action,.pep-quantity-selector-container.hide-qs-actions .pepperi-button.qs-action,.pepperi-quantity-selector-container.hide-qs-actions .pep-button.qs-action,.pepperi-quantity-selector-container.hide-qs-actions .pepperi-button.qs-action{display:none}.pep-quantity-selector-container.matrix-qs .additional-value,.pepperi-quantity-selector-container.matrix-qs .additional-value{height:1.25rem;top:calc(.25rem * -1);top:calc(var(--pep-spacing-xs, .25rem) * -1);transform:unset!important;display:flex;align-self:flex-start;justify-content:flex-end}.pep-quantity-selector-container.matrix-qs .additional-value.prefix,.pepperi-quantity-selector-container.matrix-qs .additional-value.prefix{left:calc(.5rem * -1)!important;left:calc(var(--pep-spacing-sm, .5rem) * -1)!important}.pep-quantity-selector-container.matrix-qs .additional-value.suffix,.pepperi-quantity-selector-container.matrix-qs .additional-value.suffix{right:calc(.5rem * -1)!important;right:calc(var(--pep-spacing-sm, .5rem) * -1)!important}.pep-quantity-selector-container.matrix-qs .additional-value .mat-badge-content,.pepperi-quantity-selector-container.matrix-qs .additional-value .mat-badge-content{z-index:97;min-width:1.5rem;width:-webkit-fit-content!important;width:-moz-fit-content!important;width:fit-content!important;border-radius:.625rem;padding:0 .5rem;top:calc(.5rem * -1)!important;top:calc(var(--pep-spacing-sm, .5rem) * -1)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:inherit}.pep-quantity-selector-container.matrix-qs .disable,.pepperi-quantity-selector-container.matrix-qs .disable{min-width:.5rem;padding:0 .25rem}.pep-quantity-selector-container.pep-table-quantity-selector .pep-button:not(.qs-action),.pep-quantity-selector-container.pep-table-quantity-selector .pepperi-button:not(.qs-action),.pep-quantity-selector-container.pepperi-table-quantity-selector .pep-button:not(.qs-action),.pep-quantity-selector-container.pepperi-table-quantity-selector .pepperi-button:not(.qs-action),.pepperi-quantity-selector-container.pep-table-quantity-selector .pep-button:not(.qs-action),.pepperi-quantity-selector-container.pep-table-quantity-selector .pepperi-button:not(.qs-action),.pepperi-quantity-selector-container.pepperi-table-quantity-selector .pep-button:not(.qs-action),.pepperi-quantity-selector-container.pepperi-table-quantity-selector .pepperi-button:not(.qs-action){height:2rem;line-height:2rem}.pep-quantity-selector-container.pep-table-quantity-selector .pep-button.qs-action,.pep-quantity-selector-container.pep-table-quantity-selector .pepperi-button.qs-action,.pep-quantity-selector-container.pepperi-table-quantity-selector .pep-button.qs-action,.pep-quantity-selector-container.pepperi-table-quantity-selector .pepperi-button.qs-action,.pepperi-quantity-selector-container.pep-table-quantity-selector .pep-button.qs-action,.pepperi-quantity-selector-container.pep-table-quantity-selector .pepperi-button.qs-action,.pepperi-quantity-selector-container.pepperi-table-quantity-selector .pep-button.qs-action,.pepperi-quantity-selector-container.pepperi-table-quantity-selector .pepperi-button.qs-action{min-width:1.5rem;line-height:1.5rem;width:1.5rem!important;height:1.5rem!important}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"allowDecimal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"additionalValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"notificationInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":168,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":189,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":190,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":191,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":193,"character":5}}]}],"styleType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":196,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":201,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":204,"character":5}}]}],"QSCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":207,"character":5},"arguments":["QSCont"]}]}],"QSInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":208,"character":5},"arguments":["QSInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":232,"character":20},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":233,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":234,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":235,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":236,"character":27},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepUtilitiesService","line":237,"character":34}]}],"setForm":[{"__symbolic":"method"}],"setFormattedValue":[{"__symbolic":"method"}],"updateFormFieldValue":[{"__symbolic":"method"}],"getDestroyer":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getParentByClass":[{"__symbolic":"method"}],"getSameElementInTheWantedRowByClassName":[{"__symbolic":"method"}],"setSameElementInTheWantedRow":[{"__symbolic":"method"}],"focusToTheSameElementInTheWantedRow":[{"__symbolic":"method"}],"cleanError":[{"__symbolic":"method"}],"onMatrixMouseEnter":[{"__symbolic":"method"}],"onMatrixMouseleave":[{"__symbolic":"method"}],"onMatrixClick":[{"__symbolic":"method"}],"onMatrixBlur":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"isDifferentValue":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"increment":[{"__symbolic":"method"}],"decrement":[{"__symbolic":"method"}],"enterChildren":[{"__symbolic":"method"}],"enterPackage":[{"__symbolic":"method"}],"setupQsButtons":[{"__symbolic":"method"}],"setQsView":[{"__symbolic":"method"}]},"statics":{"ENTER_CHILDREN":"[EnterChildren]","ENTER_PACKAGE":"[EnterPackage]","PLUS":"[+]","MINUS":"[-]"}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"pepQuantitySelectorNumber"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":10,"character":1},"arguments":[{"selector":"[pepQsValidation]"}]}],"members":{"allowDecimal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":19,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepValidatorService","line":20,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":27,"character":5},"arguments":["change",["$event"]]}]}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":32,"character":5},"arguments":["keydown",["$event"]]}]}],"validateValue":[{"__symbolic":"method"}]}}},"origins":{"PepQuantitySelectorModule":"./quantity-selector.module","PepQuantitySelectorComponent":"./quantity-selector.component","ɵa":"./quantity-selector.pipes","ɵb":"./quantity-selector-validation.directive"},"importAs":"@pepperi-addons/ngx-lib/quantity-selector"}
+{"__symbolic":"module","version":4,"metadata":{"PepQuantitySelectorModule":{"__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/form-field","name":"MatFormFieldModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","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}],"exports":[{"__symbolic":"reference","name":"PepQuantitySelectorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepQuantitySelectorComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":48,"character":41}]}]}},"PepQuantitySelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"pep-quantity-selector","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":42,"character":21},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":44,"character":8},"arguments":["showHide",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":45,"character":12},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":47,"character":16},"arguments":[{"opacity":1,"transform":"scale(1)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":52,"character":12},"arguments":["hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":54,"character":16},"arguments":[{"opacity":0,"transform":"scale(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":59,"character":12},"arguments":["show => hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":59,"character":39},"arguments":["250ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":60,"character":12},"arguments":["hide => show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":60,"character":39},"arguments":["250ms ease-in"]}]}]]}],"template":"<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div #QSCont class=\"pep-quantity-selector-container {{ styleType }}\" [ngClass]=\"{\n                'hide-qs-actions' : layoutType === 'card' && rowSpan <= 1,\n                'pep-table-quantity-selector': layoutType === 'table',\n                'one-row': rowSpan === 1,\n                caution: isCaution,\n                'matrix-qs': type === 'qsForMatrix',\n                'zero-quantity': formattedValue === '0'\n            }\">\n            <pep-field-title *ngIf=\"layoutType !== 'table' && layoutType !== 'card'\" [label]=\"label\"\n                [mandatory]=\"mandatory\" [disabled]=\"disabled\" [showTitle]=\"showTitle\" [xAlignment]=\"xAlignment\">\n            </pep-field-title>\n\n            <ng-container *ngIf=\"type == 'qs'\">\n                <ng-container *ngIf=\"readonly; then readonlyBlock; else editableQSBlock\"></ng-container>\n                <ng-template #readonlyBlock>\n                    <button [id]=\"key\" mat-button class=\"pep-button {{ styleType }} disable \"\n                        [ngClass]=\"{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\n                        title=\"{{ formattedValue }}\" disabled=\"true\">\n                        <span class=\"ellipsis\">\n                            {{ formattedValue }}\n                        </span>\n                    </button>\n                </ng-template>\n                <ng-template #editableQSBlock>\n                    <mat-form-field appearance=\"outline\">\n                        <input pepQsValidation [allowDecimal]=\"allowDecimal\" type=\"decimalNumber\" inputmode=\"decimal\"\n                            matInput #QSInput name=\"{{ key }}\" class=\"body-lg ellipsis\" title=\"{{ formattedValue }}\"\n                            autocomplete=\"off\" [id]=\"key\" [formControlName]=\"key\" [value]=\"displayValue\"\n                            (click)=\"$event.target.setSelectionRange(0, 999)\" (keydown)=\"onKeydown($event)\"\n                            (blur)=\"onBlur($event)\" (focus)=\"onFocus($event)\" />\n                        <button *ngIf=\"showQsBtn\" mat-button matPrefix (click)=\"decrement($event)\"\n                            class=\"pep-button icon-button sm weak qs-action\" [disabled]=\"disabled\" [ngClass]=\"{ disable: disabled, caution: isCaution && styleType !== 'strong',\n                                'keep-background-on-focus': styleType === 'strong'}\">\n                            <mat-icon>\n                                <pep-icon name=\"number_minus\">\n                                </pep-icon>\n                            </mat-icon>\n                        </button>\n                        <button *ngIf=\"showQsBtn\" mat-button matSuffix (click)=\"increment($event)\"\n                            class=\"pep-button icon-button sm weak qs-action\" [disabled]=\"disabled\" [ngClass]=\"{ disable: disabled, caution: isCaution && styleType !== 'strong',\n                                'keep-background-on-focus': styleType === 'strong'}\">\n                            <mat-icon>\n                                <pep-icon name=\"number_plus\">\n                                </pep-icon>\n                            </mat-icon>\n                        </button>\n                        <mat-error *ngIf=\"messages?.length > 0\">\n                            <span class=\"qs-error body-xs\" *ngFor=\"let msg of messages\"> {{ msg.Key | translate }} :\n                                {{ msg.Value }} </span>\n                        </mat-error>\n                    </mat-form-field>\n                </ng-template>\n            </ng-container>\n\n            <ng-container *ngIf=\"type == 'qsForMatrix'\">\n                <ng-container *ngIf=\"readonly; then readonlyBlock; else editableQSBlock\"></ng-container>\n                <ng-template #readonlyBlock>\n                    <button [id]=\"key\" mat-button class=\"pep-button {{ styleType }} disable\" disabled=\"true\"\n                        [ngClass]=\"{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\">\n                        X\n                    </button>\n                </ng-template>\n                <ng-template #editableQSBlock>\n                    <span *ngIf=\" xAlignment=='right'\" class=\" body-sm additional-value prefix\"\n                        matBadge=\"{{ additionalValue }}\" matBadgePosition=\"before\"\n                        matBadgeSize=\"rowSpan === 1 ? small : medium\" [@showHide]=\"getAdditionalValue\"></span>\n\n                    <mat-form-field appearance=\"outline\" (mouseleave)=\"!isInFocus ? onMatrixMouseleave($event) : null\">\n                        <input pepQsValidation [allowDecimal]=\"allowDecimal\" type=\"decimalNumber\" inputmode=\"decimal\"\n                            matInput #QSInput name=\"{{ key }}\" title=\"{{ formattedValue }}\" class=\"body-sm ellipsis\"\n                            autocomplete=\"off\" [id]=\"key\" [formControlName]=\"key\" [value]=\"displayValue\"\n                            (click)=\"onMatrixClick($event); $event.target.setSelectionRange(0, 999)\"\n                            (keydown)=\"onKeydown($event)\" (blur)=\"onMatrixBlur($event)\"\n                            (focus)=\"onMatrixMouseEnter($event); onFocus($event)\"\n                            (mouseenter)=\"onMatrixMouseEnter($event)\" />\n\n                        <mat-error *ngIf=\"messages?.length > 0\">\n                            <span class=\"qs-error body-xs\" *ngFor=\"let msg of messages\"> {{ msg.Key | translate }} :\n                                {{ msg.Value }} </span>\n                        </mat-error>\n                    </mat-form-field>\n\n                    <span *ngIf=\"xAlignment != 'right'\" class=\"body-sm additional-value suffix\"\n                        matBadge=\"{{ additionalValue }}\" matBadgePosition=\"before\"\n                        matBadgeSize=\"rowSpan === 1 ? small : medium\" [@showHide]=\"getAdditionalValue\"></span>\n                </ng-template>\n            </ng-container>\n\n            <ng-container *ngIf=\"type == 'button'\">\n                <ng-container *ngIf=\"(value | pepToNumber) == 0; then regularBlock; else withBadgeBlock\">\n                </ng-container>\n                <ng-template #regularBlock>\n                    <button mat-button [disabled]=\"disabled\" class=\"pep-button {{ styleType }} \" [id]=\"key\"\n                        name=\"{{ key }}\"\n                        [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\n                        [title]=\"'QS.ORDER' | translate\" (click)=\"enterChildren($event)\">\n                        <span class=\"ellipsis\">\n                            {{ 'QS.ORDER' | translate }}\n                        </span>\n                    </button>\n                </ng-template>\n                <ng-template #withBadgeBlock>\n                    <button mat-button matBadge=\"{{ formattedValue }}\"\n                        matBadgePosition=\"{{xAlignment == 'right' ? 'before' : 'after'}}\"\n                        [matBadgeSize]=\"layoutType === 'card' && rowSpan === 1 ? 'small' : 'medium'\"\n                        class=\"pep-button {{ styleType }} \" [id]=\"key\" name=\"{{ key }}\" [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1,\n                            'right-alignment': xAlignment == 'right', 'left-alignment': xAlignment != 'right'}\"\n                        [title]=\"'QS.ORDER' | translate\" (click)=\"enterChildren($event)\" [disabled]=\"disabled\">\n                        <span class=\"ellipsis\">\n                            {{ 'QS.ORDER' | translate }}\n                        </span>\n                    </button>\n                </ng-template>\n            </ng-container>\n            <ng-container *ngIf=\"type == 'packageButton'\">\n                <button mat-button class=\"pep-button {{ styleType }} \" [id]=\"key\" name=\"{{ key }}\"\n                    [ngClass]=\"{ disable: disabled, caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}\"\n                    [title]=\"'QS.ORDER' | translate\" (click)=\"enterPackage($event)\" [disabled]=\"disabled\">\n                    <span class=\"ellipsis\">\n                        {{ 'QS.ORDER' | translate }} &#40;{{ formattedValue }}&#41;\n                    </span>\n                </button>\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n</ng-container>","styles":[":host{height:inherit;display:grid}.pep-quantity-selector-container,.pepperi-quantity-selector-container{display:flex;flex-flow:wrap;align-items:center;min-width:2rem;width:100%;height:inherit}.pep-quantity-selector-container input::-webkit-inner-spin-button,.pep-quantity-selector-container input::-webkit-outer-spin-button,.pepperi-quantity-selector-container input::-webkit-inner-spin-button,.pepperi-quantity-selector-container input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pep-quantity-selector-container input[type=number],.pepperi-quantity-selector-container input[type=number]{-moz-appearance:textfield}.pep-quantity-selector-container .mat-input-element,.pepperi-quantity-selector-container .mat-input-element{padding:0 .25rem;text-align:center;font-weight:600;font-weight:var(--pep-font-weight-bold,600);width:100%}.pep-quantity-selector-container .mat-form-field .mat-form-field-wrapper .mat-form-field-subscript-wrapper,.pepperi-quantity-selector-container .mat-form-field .mat-form-field-wrapper .mat-form-field-subscript-wrapper{height:unset}.pep-quantity-selector-container .pep-button,.pep-quantity-selector-container .pepperi-button,.pepperi-quantity-selector-container .pep-button,.pepperi-quantity-selector-container .pepperi-button{width:100%}.pep-quantity-selector-container .pep-button.qs-action,.pep-quantity-selector-container .pepperi-button.qs-action,.pepperi-quantity-selector-container .pep-button.qs-action,.pepperi-quantity-selector-container .pepperi-button.qs-action{min-width:2rem;line-height:2rem;width:2rem!important;height:2rem!important}.pep-quantity-selector-container .pep-button.qs-action .mat-icon,.pep-quantity-selector-container .pepperi-button.qs-action .mat-icon,.pepperi-quantity-selector-container .pep-button.qs-action .mat-icon,.pepperi-quantity-selector-container .pepperi-button.qs-action .mat-icon{height:inherit;width:inherit}.pep-quantity-selector-container .qs-error,.pepperi-quantity-selector-container .qs-error{display:block}.pep-quantity-selector-container.hide-qs-actions .pep-button.qs-action,.pep-quantity-selector-container.hide-qs-actions .pepperi-button.qs-action,.pepperi-quantity-selector-container.hide-qs-actions .pep-button.qs-action,.pepperi-quantity-selector-container.hide-qs-actions .pepperi-button.qs-action{display:none}.pep-quantity-selector-container.matrix-qs .additional-value,.pepperi-quantity-selector-container.matrix-qs .additional-value{height:1.25rem;top:calc(.25rem * -1);top:calc(var(--pep-spacing-xs, .25rem) * -1);transform:unset!important;display:flex;align-self:flex-start;justify-content:flex-end}.pep-quantity-selector-container.matrix-qs .additional-value.prefix,.pepperi-quantity-selector-container.matrix-qs .additional-value.prefix{left:calc(.5rem * -1)!important;left:calc(var(--pep-spacing-sm, .5rem) * -1)!important}.pep-quantity-selector-container.matrix-qs .additional-value.suffix,.pepperi-quantity-selector-container.matrix-qs .additional-value.suffix{right:calc(.5rem * -1)!important;right:calc(var(--pep-spacing-sm, .5rem) * -1)!important}.pep-quantity-selector-container.matrix-qs .additional-value .mat-badge-content,.pepperi-quantity-selector-container.matrix-qs .additional-value .mat-badge-content{z-index:97;min-width:1.5rem;width:-webkit-fit-content!important;width:-moz-fit-content!important;width:fit-content!important;border-radius:.625rem;padding:0 .5rem;top:calc(.5rem * -1)!important;top:calc(var(--pep-spacing-sm, .5rem) * -1)!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:inherit}.pep-quantity-selector-container.matrix-qs .disable,.pepperi-quantity-selector-container.matrix-qs .disable{min-width:.5rem;padding:0 .25rem}.pep-quantity-selector-container.pep-table-quantity-selector .pep-button:not(.qs-action),.pep-quantity-selector-container.pep-table-quantity-selector .pepperi-button:not(.qs-action),.pep-quantity-selector-container.pepperi-table-quantity-selector .pep-button:not(.qs-action),.pep-quantity-selector-container.pepperi-table-quantity-selector .pepperi-button:not(.qs-action),.pepperi-quantity-selector-container.pep-table-quantity-selector .pep-button:not(.qs-action),.pepperi-quantity-selector-container.pep-table-quantity-selector .pepperi-button:not(.qs-action),.pepperi-quantity-selector-container.pepperi-table-quantity-selector .pep-button:not(.qs-action),.pepperi-quantity-selector-container.pepperi-table-quantity-selector .pepperi-button:not(.qs-action){height:2rem;line-height:2rem}.pep-quantity-selector-container.pep-table-quantity-selector .pep-button.qs-action,.pep-quantity-selector-container.pep-table-quantity-selector .pepperi-button.qs-action,.pep-quantity-selector-container.pepperi-table-quantity-selector .pep-button.qs-action,.pep-quantity-selector-container.pepperi-table-quantity-selector .pepperi-button.qs-action,.pepperi-quantity-selector-container.pep-table-quantity-selector .pep-button.qs-action,.pepperi-quantity-selector-container.pep-table-quantity-selector .pepperi-button.qs-action,.pepperi-quantity-selector-container.pepperi-table-quantity-selector .pep-button.qs-action,.pepperi-quantity-selector-container.pepperi-table-quantity-selector .pepperi-button.qs-action{min-width:1.5rem;line-height:1.5rem;width:1.5rem!important;height:1.5rem!important}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"allowDecimal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"additionalValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"notificationInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":168,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":189,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":190,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":191,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":5}}]}],"styleType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":195,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":200,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":203,"character":5}}]}],"QSCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":206,"character":5},"arguments":["QSCont"]}]}],"QSInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":207,"character":5},"arguments":["QSInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":231,"character":20},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":232,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":233,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":234,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":235,"character":27},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepUtilitiesService","line":236,"character":34}]}],"setForm":[{"__symbolic":"method"}],"setFormattedValue":[{"__symbolic":"method"}],"updateFormFieldValue":[{"__symbolic":"method"}],"getDestroyer":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getParentByClass":[{"__symbolic":"method"}],"getSameElementInTheWantedRowByClassName":[{"__symbolic":"method"}],"setSameElementInTheWantedRow":[{"__symbolic":"method"}],"focusToTheSameElementInTheWantedRow":[{"__symbolic":"method"}],"cleanError":[{"__symbolic":"method"}],"onMatrixMouseEnter":[{"__symbolic":"method"}],"onMatrixMouseleave":[{"__symbolic":"method"}],"onMatrixClick":[{"__symbolic":"method"}],"onMatrixBlur":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"isDifferentValue":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onKeydown":[{"__symbolic":"method"}],"increment":[{"__symbolic":"method"}],"decrement":[{"__symbolic":"method"}],"enterChildren":[{"__symbolic":"method"}],"enterPackage":[{"__symbolic":"method"}],"setupQsButtons":[{"__symbolic":"method"}],"setQsView":[{"__symbolic":"method"}]},"statics":{"ENTER_CHILDREN":"[EnterChildren]","ENTER_PACKAGE":"[EnterPackage]","PLUS":"[+]","MINUS":"[-]"}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"pepQuantitySelectorNumber"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":10,"character":1},"arguments":[{"selector":"[pepQsValidation]"}]}],"members":{"allowDecimal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":19,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepValidatorService","line":20,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":27,"character":5},"arguments":["change",["$event"]]}]}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":32,"character":5},"arguments":["keydown",["$event"]]}]}],"validateValue":[{"__symbolic":"method"}]}}},"origins":{"PepQuantitySelectorModule":"./quantity-selector.module","PepQuantitySelectorComponent":"./quantity-selector.component","ɵa":"./quantity-selector.pipes","ɵb":"./quantity-selector-validation.directive"},"importAs":"@pepperi-addons/ngx-lib/quantity-selector"}

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

@@ -41,7 +41,6 @@ export declare class PepQuantitySelectorComponent implements OnChanges, OnInit,
     controlType: string;
     form: FormGroup;
     showTitle: boolean;
-    renderTitle: boolean;
     layoutType: PepLayoutType;
     isActive: boolean;
     styleType: PepStyleType;

package/quantity-selector/quantity-selector.component.theme.scss

@@ -1,77 +1,77 @@
-// ******************************************************************************
-//                       QS styles declerations
-// ******************************************************************************
-@mixin pep-qs-action-state-button($pepperi-theme, $style, $color-name: color-qs) {
-    @include pep-button-states($pepperi-theme, $style, $color-name);
-
-    &.qs-action {
-        @include pep-button-states($pepperi-theme, weak, $color-name);
-        box-shadow: unset;
-        border: unset;
-        @include fix-inline-z-index();
-    }
-}
-
-@mixin pep-qs-states($pepperi-theme, $style) {
-    .mat-form-field {
-        @include pep-form-field-states($pepperi-theme, $style, color-qs);
-    }
-
-    // .pepperi-button:not(.qs-action), .pep-button:not(.qs-action) {
-    .pepperi-button, .pep-button {
-        @include pep-qs-action-state-button($pepperi-theme, $style);
-    }
-
-    &.caution {
-        .mat-form-field {
-            @include pep-form-field-states($pepperi-theme, $style, color-system-caution);
-        }
-
-        .pepperi-button, .pep-button {
-            @include pep-qs-action-state-button($pepperi-theme, $style, color-system-caution);
-        }
-    }
-}
-
-@mixin pep-quantity-selector-component-theme($pepperi-theme) {
-    .pepperi-quantity-selector-container, .pep-quantity-selector-container {
-        &:not(.strong) {
-            .mat-form-field {
-                .mat-input-element {
-                    color: get-pep-color($pepperi-theme, color-text, color-main);
-                }
-            }
-
-            &.zero-quantity {
-                .mat-form-field {
-                    .mat-input-element {
-                        color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                    }
-                }
-
-                button {
-                    color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-                }
-            }
-        }
-
-        &.weak {
-            @include pep-qs-states($pepperi-theme, weak);
-        }
-
-        &.regular {
-            @include pep-qs-states($pepperi-theme, regular);
-        }
-
-        &.strong {
-            @include pep-qs-states($pepperi-theme, strong);
-        }
-
-        &.matrix-qs {
-            .additional-value {
-                @include pep-badge($pepperi-theme);
-            }
-        }
-
-    }
-}
+// ******************************************************************************
+//                       QS styles declerations
+// ******************************************************************************
+@mixin pep-qs-action-state-button($pepperi-theme, $style, $color-name: color-qs) {
+    @include pep-button-states($pepperi-theme, $style, $color-name);
+
+    &.qs-action {
+        @include pep-button-states($pepperi-theme, weak, $color-name);
+        box-shadow: unset;
+        border: unset;
+        @include fix-inline-z-index();
+    }
+}
+
+@mixin pep-qs-states($pepperi-theme, $style) {
+    .mat-form-field {
+        @include pep-form-field-states($pepperi-theme, $style, color-qs);
+    }
+
+    // .pepperi-button:not(.qs-action), .pep-button:not(.qs-action) {
+    .pepperi-button, .pep-button {
+        @include pep-qs-action-state-button($pepperi-theme, $style);
+    }
+
+    &.caution {
+        .mat-form-field {
+            @include pep-form-field-states($pepperi-theme, $style, color-system-caution);
+        }
+
+        .pepperi-button, .pep-button {
+            @include pep-qs-action-state-button($pepperi-theme, $style, color-system-caution);
+        }
+    }
+}
+
+@mixin pep-quantity-selector-component-theme($pepperi-theme) {
+    .pepperi-quantity-selector-container, .pep-quantity-selector-container {
+        &:not(.strong) {
+            .mat-form-field {
+                .mat-input-element {
+                    color: get-pep-color($pepperi-theme, color-text, color-main);
+                }
+            }
+
+            &.zero-quantity {
+                .mat-form-field {
+                    .mat-input-element {
+                        color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+                    }
+                }
+
+                button {
+                    color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+                }
+            }
+        }
+
+        &.weak {
+            @include pep-qs-states($pepperi-theme, weak);
+        }
+
+        &.regular {
+            @include pep-qs-states($pepperi-theme, regular);
+        }
+
+        &.strong {
+            @include pep-qs-states($pepperi-theme, strong);
+        }
+
+        &.matrix-qs {
+            .additional-value {
+                @include pep-badge($pepperi-theme);
+            }
+        }
+
+    }
+}

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepRichHtmlTextareaModule":{"__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/forms","name":"ReactiveFormsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":37,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":38,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":39,"character":8},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-quill","name":"QuillModule","line":41,"character":8},"member":"forRoot"}},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":45,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":46,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":47,"character":8}],"exports":[{"__symbolic":"reference","name":"PepRichHtmlTextareaComponent"}],"declarations":[{"__symbolic":"reference","name":"PepRichHtmlTextareaComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":53,"character":41}]}]}},"IPepRichHtmlTextareaToolbarOptions":{"__symbolic":"interface"},"PepRichHtmlTextareaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":46,"character":1},"arguments":[{"selector":"pep-rich-html-textarea","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":50,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\r\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\r\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\r\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && 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\"\r\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\r\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.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', 'active': active, 'ignore-disabled': disabled }\">\r\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\r\n\r\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\r\n\r\n                <ng-template #inlineBlock>\r\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #notInlineBlock>\r\n\r\n                    <!-- We can use the quill-view-html\r\n                    <quill-view-html class=\"body-sm rich-text-cont \"\r\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\r\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \r\n                -->\r\n\r\n                    <div class=\"body-sm rich-text-cont \"\r\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\r\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\r\n                    </div>\r\n                </ng-template>\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\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        <div class=\"pep-textarea-card-container card-flex-container\"\r\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\r\n            [ngStyle]=\"{ '-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\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></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-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                <div class=\"pep-textarea-card-container card-flex-container one-row\">\r\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\r\n                </div>\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 #richTextEditorDialogTemplate>\r\n    <div class=\"rich-text-editor-container\">\r\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\r\n            <mat-icon>\r\n                <pep-icon name=\"system_close\">\r\n                </pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\r\n        <div mat-dialog-actions class=\" pep-border-top\">\r\n            <div class=\"pep-spacing-element-negative\">\r\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\r\n                    {{'ACTIONS.CANCEL' | translate}}\r\n                </button>\r\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\r\n                    class=\"pep-spacing-element pep-button md strong \">\r\n                    {{'ACTIONS.SAVE' | translate}}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\r\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\r\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\r\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\r\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\r\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\r\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\r\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\r\n            <div class=\"pep-spacing-element-negative\">\r\n                <span class=\"ql-formats\">\r\n                    <select *ngIf=\"toolbarOptions?.font\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\r\n                        <option selected></option>\r\n                        <option value=\"serif\"></option>\r\n                        <option value=\"monospace\"></option>\r\n                    </select>\r\n                    <select *ngIf=\"toolbarOptions?.size\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\r\n                        <option value=\"small\"></option>\r\n                        <option selected></option>\r\n                        <option value=\"large\"></option>\r\n                        <option value=\"huge\"></option>\r\n                    </select>\r\n                </span>\r\n                <span class=\"ql-formats\">\r\n                    <select *ngIf=\"toolbarOptions?.header\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\r\n                        <option value=\"1\"></option>\r\n                        <option value=\"2\"></option>\r\n                        <option value=\"3\"></option>\r\n                        <!-- \r\n                        <option value=\"4\"></option>\r\n                        <option value=\"5\"></option>\r\n                        <option value=\"6\"></option> \r\n                        -->\r\n                        <option value=\"false\" selected></option>\r\n                    </select>\r\n                </span>\r\n                <!-- <hr class=\"vertical-separator\" /> -->\r\n                <span class=\"ql-formats\">\r\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\r\n                </span>\r\n                <span class=\"ql-formats\">\r\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\r\n                </span>\r\n                <!-- <hr class=\"vertical-separator\" /> -->\r\n                <span class=\"ql-formats\">\r\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\r\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\r\n                </span>\r\n                <!-- <hr class=\"vertical-separator\" /> -->\r\n                <span class=\"ql-formats\">\r\n                    <select *ngIf=\"toolbarOptions?.color\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\r\n                    <select *ngIf=\"toolbarOptions?.background\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\r\n                </span>\r\n                <span class=\"ql-formats\">\r\n                    <select *ngIf=\"toolbarOptions?.align\"\r\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\r\n                        <option selected></option>\r\n                        <option value=\"center\"></option>\r\n                        <option value=\"right\"></option>\r\n                        <option value=\"justify\"></option>\r\n                    </select>\r\n                </span>\r\n            </div>\r\n        </div>\r\n    </quill-editor>\r\n</ng-template>","styles":[":host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"maxFieldCharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"inlineMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"toolbarOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":123,"character":5}}]}],"richTextEditorDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":126,"character":5},"arguments":["richTextEditorDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":126,"character":55}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":136,"character":27},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":137,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":138,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":139,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":140,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getDefaultToolbarOptions":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"onEditorCreated":[{"__symbolic":"method"}],"onContentChanged":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}]}}},"origins":{"PepRichHtmlTextareaModule":"./rich-html-textarea.module","IPepRichHtmlTextareaToolbarOptions":"./rich-html-textarea.component","PepRichHtmlTextareaComponent":"./rich-html-textarea.component"},"importAs":"@pepperi-addons/ngx-lib/rich-html-textarea"}
+{"__symbolic":"module","version":4,"metadata":{"PepRichHtmlTextareaModule":{"__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/forms","name":"ReactiveFormsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":37,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":38,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":39,"character":8},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-quill","name":"QuillModule","line":41,"character":8},"member":"forRoot"}},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":45,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":46,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":47,"character":8}],"exports":[{"__symbolic":"reference","name":"PepRichHtmlTextareaComponent"}],"declarations":[{"__symbolic":"reference","name":"PepRichHtmlTextareaComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":53,"character":41}]}]}},"IPepRichHtmlTextareaToolbarOptions":{"__symbolic":"interface"},"PepRichHtmlTextareaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":46,"character":1},"arguments":[{"selector":"pep-rich-html-textarea","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":50,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"isFormView\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'active': active, 'ignore-disabled': disabled }\">\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\n\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\n\n                <ng-template #inlineBlock>\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\n                </ng-template>\n                <ng-template #notInlineBlock>\n\n                    <!-- We can use the quill-view-html\n                    <quill-view-html class=\"body-sm rich-text-cont \"\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \n                -->\n\n                    <div class=\"body-sm rich-text-cont \"\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                    </div>\n                </ng-template>\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\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        <div class=\"pep-textarea-card-container card-flex-container\"\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n            [ngStyle]=\"{ '-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\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></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-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                <div class=\"pep-textarea-card-container card-flex-container one-row\">\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n                </div>\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 #richTextEditorDialogTemplate>\n    <div class=\"rich-text-editor-container\">\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\n            <mat-icon>\n                <pep-icon name=\"system_close\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\n        <div mat-dialog-actions class=\" pep-border-top\">\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                    {{'ACTIONS.CANCEL' | translate}}\n                </button>\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\n                    class=\"pep-spacing-element pep-button md strong \">\n                    {{'ACTIONS.SAVE' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\n            <div class=\"pep-spacing-element-negative\">\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.font\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\n                        <option selected></option>\n                        <option value=\"serif\"></option>\n                        <option value=\"monospace\"></option>\n                    </select>\n                    <select *ngIf=\"toolbarOptions?.size\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\n                        <option value=\"small\"></option>\n                        <option selected></option>\n                        <option value=\"large\"></option>\n                        <option value=\"huge\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.header\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\n                        <option value=\"1\"></option>\n                        <option value=\"2\"></option>\n                        <option value=\"3\"></option>\n                        <!-- \n                        <option value=\"4\"></option>\n                        <option value=\"5\"></option>\n                        <option value=\"6\"></option> \n                        -->\n                        <option value=\"false\" selected></option>\n                    </select>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.color\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\n                    <select *ngIf=\"toolbarOptions?.background\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.align\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\n                        <option selected></option>\n                        <option value=\"center\"></option>\n                        <option value=\"right\"></option>\n                        <option value=\"justify\"></option>\n                    </select>\n                </span>\n            </div>\n        </div>\n    </quill-editor>\n</ng-template>","styles":[":host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"maxFieldCharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":5}}]}],"inlineMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"toolbarOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":122,"character":5}}]}],"richTextEditorDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":125,"character":5},"arguments":["richTextEditorDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":125,"character":55}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":135,"character":27},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":136,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":137,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":138,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":139,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getDefaultToolbarOptions":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"onEditorCreated":[{"__symbolic":"method"}],"onContentChanged":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}]}}},"origins":{"PepRichHtmlTextareaModule":"./rich-html-textarea.module","IPepRichHtmlTextareaToolbarOptions":"./rich-html-textarea.component","PepRichHtmlTextareaComponent":"./rich-html-textarea.component"},"importAs":"@pepperi-addons/ngx-lib/rich-html-textarea"}

package/rich-html-textarea/rich-html-textarea.component.d.ts

@@ -43,7 +43,6 @@ export declare class PepRichHtmlTextareaComponent implements OnInit, OnChanges,
     form: FormGroup;
     isActive: boolean;
     showTitle: boolean;
-    renderTitle: boolean;
     private _layoutType;
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;