npm - @pepperi-addons/ngx-lib - Versions diffs - 0.2.55 → 0.2.58-beta.1 - Mend

@pepperi-addons/ngx-lib 0.2.55 → 0.2.58-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

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

	@@ -1 +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\">\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 }} ({{ formattedValue }})\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"}
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\">\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=\"renderTitle && 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 }} ({{ formattedValue }})\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}}]}],"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"}

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

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

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

	@@ -1 +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\">\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 }}: </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> </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"}
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\">\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=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n [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 }}: </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> </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}}]}],"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"}

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

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

package/select/pepperi-addons-ngx-lib-select.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":20,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":22,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":30,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":32,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":34,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSelectComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSelectComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":40,"character":41}]}]}},"PepSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-select","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-template #pepTemplate>\n <ng-container ngIf=\"type == 'multi'; then multiSelectBlock; else regularSelectBlock\"></ng-container>\n <ng-template #regularSelectBlock>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n <mat-select #select [required]=\"mandatory ? mandatory : undefined\" matInput disableOptionCentering\n class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\n [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\n [placeholder]=\"disabled \|\| readonly ? '' : ('SELECT.HINT' \| translate)\"\n [(ngModel)]=\"selectedValueModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\n (selectionChange)=\"selectionChange($event)\" (openedChange)=\"openedChange($event)\"\n title=\"{{ fieldFormattedValue }}\">\n <mat-option ngIf=\"emptyOption\" value=\"\" [title]=\"'LIST.NONE' \| translate\">{{ 'LIST.NONE' \|\n translate }}</mat-option>\n <mat-option ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\n option.value }}</mat-option>\n </mat-select>\n <mat-error>\n <span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' \| translate: {field: label}\"\n [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' \| translate: {field: label}\"></span>\n </mat-error>\n </mat-form-field>\n </ng-template>\n <ng-template #multiSelectBlock>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n <mat-select #select multiple [required]=\"mandatory ? mandatory : undefined\" matInput\n disableOptionCentering class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\n [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\n [placeholder]=\"disabled \|\| readonly ? '' : ('SELECT.HINT' \| translate)\"\n [(ngModel)]=\"selectedValuesModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\n (openedChange)=\"openedChange($event)\" title=\"{{ fieldFormattedValue }}\">\n <mat-option ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\n option.value }}</mat-option>\n </mat-select>\n <mat-error><span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' \| translate: {field: label}\"\n [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' \| translate: {field: label}\"> </span>\n </mat-error>\n </mat-form-field>\n </ng-template>\n </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <pep-field-title ngIf=\"!parentFieldKey\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n <ng-template #editBlock>\n <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #readOnlyBlock>\n <div class=\"pep-card-input card-flex-container\"\n [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n [class]=\"'text-align-' + xAlignment\" (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n <span ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n }} </span>\n <span [id]=\"key\" title=\"{{ fieldFormattedValue }}\" class=\"body-sm value\">{{ fieldFormattedValue\n }}</span>\n <button ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n <mat-icon>\n <pep-icon name=\"system_edit\">\n </pep-icon>\n </mat-icon>\n </button>\n </div>\n </ng-template>\n </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\"></ng-container>\n </ng-template>\n <ng-template #notSelectedBlock>\n <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{readonly: disabled}\"\n title=\"{{ fieldFormattedValue }}\">{{ fieldFormattedValue }}</span>\n </ng-template>\n </ng-container>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>{align-self:center}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"parentFieldKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"emptyOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":73,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":75,"character":5}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":78,"character":5},"arguments":["select"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":88,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":89,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":90,"character":25}]}],"addOptionsIfNeeded":[{"__symbolic":"method"}],"setFieldFormattedValue":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectionChange":[{"__symbolic":"method"}],"openedChange":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}]}}},"origins":{"PepSelectModule":"./select.module","PepSelectComponent":"./select.component"},"importAs":"@pepperi-addons/ngx-lib/select"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepSelectModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":20,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":22,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":30,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":32,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":34,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSelectComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSelectComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":40,"character":41}]}]}},"PepSelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-select","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-template #pepTemplate>\n <ng-container ngIf=\"type == 'multi'; then multiSelectBlock; else regularSelectBlock\"></ng-container>\n <ng-template #regularSelectBlock>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n <mat-select #select [required]=\"mandatory ? mandatory : undefined\" matInput disableOptionCentering\n class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\n [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\n [placeholder]=\"disabled \|\| readonly ? '' : ('SELECT.HINT' \| translate)\"\n [(ngModel)]=\"selectedValueModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\n (selectionChange)=\"selectionChange($event)\" (openedChange)=\"openedChange($event)\"\n title=\"{{ fieldFormattedValue }}\">\n <mat-option ngIf=\"emptyOption\" value=\"\" [title]=\"'LIST.NONE' \| translate\">{{ 'LIST.NONE' \|\n translate }}</mat-option>\n <mat-option ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\n option.value }}</mat-option>\n </mat-select>\n <mat-error>\n <span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' \| translate: {field: label}\"\n [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' \| translate: {field: label}\"></span>\n </mat-error>\n </mat-form-field>\n </ng-template>\n <ng-template #multiSelectBlock>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n <mat-select #select multiple [required]=\"mandatory ? mandatory : undefined\" matInput\n disableOptionCentering class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\n [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\n [placeholder]=\"disabled \|\| readonly ? '' : ('SELECT.HINT' \| translate)\"\n [(ngModel)]=\"selectedValuesModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\n (openedChange)=\"openedChange($event)\" title=\"{{ fieldFormattedValue }}\">\n <mat-option ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\n option.value }}</mat-option>\n </mat-select>\n <mat-error><span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' \| translate: {field: label}\"\n [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' \| translate: {field: label}\"> </span>\n </mat-error>\n </mat-form-field>\n </ng-template>\n </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <pep-field-title ngIf=\"!parentFieldKey && renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\"\n [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n <ng-template #editBlock>\n <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #readOnlyBlock>\n <div class=\"pep-card-input card-flex-container\"\n [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n [class]=\"'text-align-' + xAlignment\" (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n <span ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n }} </span>\n <span [id]=\"key\" title=\"{{ fieldFormattedValue }}\" class=\"body-sm value\">{{ fieldFormattedValue\n }}</span>\n <button ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n <mat-icon>\n <pep-icon name=\"system_edit\">\n </pep-icon>\n </mat-icon>\n </button>\n </div>\n </ng-template>\n </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\"></ng-container>\n </ng-template>\n <ng-template #notSelectedBlock>\n <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{readonly: disabled}\"\n title=\"{{ fieldFormattedValue }}\">{{ fieldFormattedValue }}</span>\n </ng-template>\n </ng-container>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>{align-self:center}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"parentFieldKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":5}}]}],"emptyOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":5}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":79,"character":5},"arguments":["select"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":89,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":90,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":91,"character":25}]}],"addOptionsIfNeeded":[{"__symbolic":"method"}],"setFieldFormattedValue":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"selectionChange":[{"__symbolic":"method"}],"openedChange":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}]}}},"origins":{"PepSelectModule":"./select.module","PepSelectComponent":"./select.component"},"importAs":"@pepperi-addons/ngx-lib/select"}

package/select/select.component.d.ts CHANGED Viewed

@@ -26,6 +26,7 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     isActive: boolean;
     showTitle: boolean;
     emptyOption: boolean;
+    renderTitle: boolean;
     valueChange: EventEmitter<string>;
     formValidationChange: EventEmitter<boolean>;
     select: MatSelect;

package/separator/pepperi-addons-ngx-lib-separator.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepSeparatorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14}],"exports":[{"__symbolic":"reference","name":"PepSeparatorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSeparatorComponent"}]}]}],"members":{}},"PepSeparatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"pep-separator","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":20,"character":21},"member":"OnPush"},"template":"<ng-container ngIf=\"layoutType === 'form'\">\n <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\n <span class=\"block-with-text body-md\">{{ label }}</span>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"layoutType === 'card'\">\n <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\n dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\n <span class=\"small-block-with-text body-sm\">{{ label }}</span>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"layoutType === 'table'\">\n <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>{align-self:center}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":54,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":54,"character":62}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"PepSeparatorModule":"./separator.module","PepSeparatorComponent":"./separator.component"},"importAs":"@pepperi-addons/ngx-lib/separator"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepSeparatorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14}],"exports":[{"__symbolic":"reference","name":"PepSeparatorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSeparatorComponent"}]}]}],"members":{}},"PepSeparatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"pep-separator","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":20,"character":21},"member":"OnPush"},"template":"<ng-container ngIf=\"layoutType === 'form'\">\n <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\n <span class=\"block-with-text body-md\">{{ label }}</span>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"layoutType === 'card'\">\n <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\n dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\n <span class=\"small-block-with-text body-sm\">{{ label }}</span>\n </div>\n</ng-container>\n\n<ng-container ngIf=\"layoutType === 'table'\">\n <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>{align-self:center}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":55,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":55,"character":62}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"PepSeparatorModule":"./separator.module","PepSeparatorComponent":"./separator.component"},"importAs":"@pepperi-addons/ngx-lib/separator"}

package/signature/pepperi-addons-ngx-lib-signature.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepSignatureModule":{"__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/material/core","name":"MatCommonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":37,"character":8},{"__symbolic":"reference","module":"ngx-signaturepad","name":"SignaturePadModule","line":39,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":41,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":42,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":45,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSignatureComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSignatureComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":51,"character":41}]}]}},"PepSignatureComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-signature","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-container>\n <ng-template #pepTemplate>\n <mat-form-field [formGroup]=\"form\" appearance=\"outline\">\n <div class=\"pep-file-wrapper\">\n <div class=\"pep-file body-sm\" [ngClass]=\"{ disable: disabled }\" [style.height]=\"fieldHeight\">\n <ng-container ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\n <ng-template #withImg>\n <button ngIf=\"!disabled\" mat-button (click)=\"deleteSignature($event)\"\n class=\"pep-button icon-button weak md delete\" tabindex=\"-1\"\n [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n <mat-icon>\n <pep-icon name=\"system_bin\"></pep-icon>\n </mat-icon>\n </button>\n <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\n <img [src]=\"src\" [style.max-height]=\"fieldHeight\" class=\"pep-file-preview-img\"\n (error)=\"errorHandler($event)\" [alt]=\"label\"\n [ngClass]=\"['text-align-' + xAlignment]\" />\n </div>\n </ng-template>\n <ng-template #noImg>\n <div class=\"ellipsis pep-file-message\">\n <mat-icon class=\"pep-spacing-element\">\n <pep-icon name=\"system_signature\"></pep-icon>\n </mat-icon>\n <span class=\"body-sm ellipsis\">\n {{ (disabled ? 'MESSAGES.INFO_MISSING_SIGNATURE' : 'SIGNATURE.HINT') \| translate }}\n </span>\n </div>\n </ng-template>\n </div>\n <input [id]=\"key\" matInput [formControlName]=\"key\" class=\"hidden-input signature\" type=\"text\"\n [value]=\"src\" (click)=\"openSignModal()\" (keypress)=\"onKeyPress_OpenSignModal($event)\"\n autocomplete=\"off\" readonly />\n </div>\n\n <mat-error><span class=\"body-xs\"\n [title]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"\n [innerText]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"></span>\n </mat-error>\n </mat-form-field>\n </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\n <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n [showTitle]=\"showTitle\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\n </ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1 }\">\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: false}\">\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'table'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\n </ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container one-row\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <div class=\"pep-file-container one-row\">\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: true}\">\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container ngIf=\"inDialog === true\">\n <ng-container ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\n </ng-container> -->\n\n <!-- <div ngIf=\"inDialog === false\" class=\"signature-backdrop modal\" [ngClass]=\"{ fade: !isVisibleModal }\" tabindex=\"-1\"\n role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\"\n [ngStyle]=\"{ display: isVisibleModal ? 'block' : 'none' }\">\n <div class=\"signature-modal modal-dialog\" role=\"document\">\n <div class=\"modal-content\">\n <ng-container ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\n </div>\n </div>\n </div> -->\n\n <ng-template #pepReadonlyTemplate let-isTableView=\"isTableView\">\n <div class=\"pep-file-container\">\n <div class=\"pep-file-wrapper\">\n <div class=\"pep-file body-sm disable\">\n <ng-container ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\n <ng-template #withImg>\n <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\n <img ngIf=\"!isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\n class=\"pep-file-preview-img\" (error)=\"errorHandler($event)\" [alt]=\"label\"\n [ngClass]=\"['text-align-' + xAlignment]\" />\n <img *ngIf=\"isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\n class=\"pep-report-file pep-file-preview-img\" (error)=\"errorHandler($event)\"\n [alt]=\"label\" [ngClass]=\"['text-align-' + xAlignment]\" />\n </div>\n </ng-template>\n <ng-template #noImg></ng-template>\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #signaturePopupPad>\n <pep-dialog [title]=\"'SIGNATURE.DIALOG_TITLE' \| translate\" [showFooter]=\"showActionBtn\">\n <ng-container pep-dialog-content>\n <signature-pad #signaturePad [options]=\"signaturePadOptions\" (onBeginEvent)=\"drawStart()\"\n (onEndEvent)=\"drawComplete()\">\n </signature-pad>\n </ng-container>\n <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" [disabled]=\"readonly \|\| disabled\"\n (click)=\"clearSignModal()\">\n {{ 'ACTIONS.CLEAR' \| translate }}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" [disabled]=\"readonly \|\| disabled\"\n (click)=\"saveSignModal($event)\">\n {{ 'ACTIONS.DONE' \| translate }}\n </button>\n </div>\n </pep-dialog>\n </ng-template>\n\n</ng-container>","styles":[":host{display:block}signature-pad{display:grid;width:inherit;height:inherit}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"signatureURL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"signaturePad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":96,"character":5},"arguments":["signaturePad"]}]}],"signaturePopupPad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":97,"character":5},"arguments":["signaturePopupPad",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":97,"character":44}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":118,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":119,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":120,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":121,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":122,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":123,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"drawComplete":[{"__symbolic":"method"}],"drawStart":[{"__symbolic":"method"}],"openSignModal":[{"__symbolic":"method"}],"openSignatoreDlg":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"clearSignModal":[{"__symbolic":"method"}],"deleteSignature":[{"__symbolic":"method"}],"saveSignModal":[{"__symbolic":"method"}],"errorHandler":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"onKeyPress_OpenSignModal":[{"__symbolic":"method"}]}}},"origins":{"PepSignatureModule":"./signature.module","PepSignatureComponent":"./signature.component"},"importAs":"@pepperi-addons/ngx-lib/signature"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepSignatureModule":{"__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/material/core","name":"MatCommonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":37,"character":8},{"__symbolic":"reference","module":"ngx-signaturepad","name":"SignaturePadModule","line":39,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":41,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":42,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":45,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSignatureComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSignatureComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":51,"character":41}]}]}},"PepSignatureComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-signature","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-container>\n <ng-template #pepTemplate>\n <mat-form-field [formGroup]=\"form\" appearance=\"outline\">\n <div class=\"pep-file-wrapper\">\n <div class=\"pep-file body-sm\" [ngClass]=\"{ disable: disabled }\" [style.height]=\"fieldHeight\">\n <ng-container ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\n <ng-template #withImg>\n <button ngIf=\"!disabled\" mat-button (click)=\"deleteSignature($event)\"\n class=\"pep-button icon-button weak md delete\" tabindex=\"-1\"\n [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n <mat-icon>\n <pep-icon name=\"system_bin\"></pep-icon>\n </mat-icon>\n </button>\n <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\n <img [src]=\"src\" [style.max-height]=\"fieldHeight\" class=\"pep-file-preview-img\"\n (error)=\"errorHandler($event)\" [alt]=\"label\"\n [ngClass]=\"['text-align-' + xAlignment]\" />\n </div>\n </ng-template>\n <ng-template #noImg>\n <div class=\"ellipsis pep-file-message\">\n <mat-icon class=\"pep-spacing-element\">\n <pep-icon name=\"system_signature\"></pep-icon>\n </mat-icon>\n <span class=\"body-sm ellipsis\">\n {{ (disabled ? 'MESSAGES.INFO_MISSING_SIGNATURE' : 'SIGNATURE.HINT') \| translate }}\n </span>\n </div>\n </ng-template>\n </div>\n <input [id]=\"key\" matInput [formControlName]=\"key\" class=\"hidden-input signature\" type=\"text\"\n [value]=\"src\" (click)=\"openSignModal()\" (keypress)=\"onKeyPress_OpenSignModal($event)\"\n autocomplete=\"off\" readonly />\n </div>\n\n <mat-error><span class=\"body-xs\"\n [title]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"\n [innerText]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"></span>\n </mat-error>\n </mat-form-field>\n </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\n <pep-field-title ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\n </ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1 }\">\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: false}\">\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'table'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\n </ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container one-row\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <div class=\"pep-file-container one-row\">\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: true}\">\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container ngIf=\"inDialog === true\">\n <ng-container ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\n </ng-container> -->\n\n <!-- <div ngIf=\"inDialog === false\" class=\"signature-backdrop modal\" [ngClass]=\"{ fade: !isVisibleModal }\" tabindex=\"-1\"\n role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\"\n [ngStyle]=\"{ display: isVisibleModal ? 'block' : 'none' }\">\n <div class=\"signature-modal modal-dialog\" role=\"document\">\n <div class=\"modal-content\">\n <ng-container ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\n </div>\n </div>\n </div> -->\n\n <ng-template #pepReadonlyTemplate let-isTableView=\"isTableView\">\n <div class=\"pep-file-container\">\n <div class=\"pep-file-wrapper\">\n <div class=\"pep-file body-sm disable\">\n <ng-container ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\n <ng-template #withImg>\n <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\n <img ngIf=\"!isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\n class=\"pep-file-preview-img\" (error)=\"errorHandler($event)\" [alt]=\"label\"\n [ngClass]=\"['text-align-' + xAlignment]\" />\n <img ngIf=\"isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\n class=\"pep-report-file pep-file-preview-img\" (error)=\"errorHandler($event)\"\n [alt]=\"label\" [ngClass]=\"['text-align-' + xAlignment]\" />\n </div>\n </ng-template>\n <ng-template #noImg></ng-template>\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #signaturePopupPad>\n <pep-dialog [title]=\"'SIGNATURE.DIALOG_TITLE' \| translate\" [showFooter]=\"showActionBtn\">\n <ng-container pep-dialog-content>\n <signature-pad #signaturePad [options]=\"signaturePadOptions\" (onBeginEvent)=\"drawStart()\"\n (onEndEvent)=\"drawComplete()\">\n </signature-pad>\n </ng-container>\n <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" [disabled]=\"readonly \|\| disabled\"\n (click)=\"clearSignModal()\">\n {{ 'ACTIONS.CLEAR' \| translate }}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" [disabled]=\"readonly \|\| disabled\"\n (click)=\"saveSignModal($event)\">\n {{ 'ACTIONS.DONE' \| translate }}\n </button>\n </div>\n </pep-dialog>\n </ng-template>\n\n</ng-container>","styles":[":host{display:block}signature-pad{display:grid;width:inherit;height:inherit}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"signatureURL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"signaturePad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":97,"character":5},"arguments":["signaturePad"]}]}],"signaturePopupPad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":98,"character":5},"arguments":["signaturePopupPad",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":98,"character":44}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":119,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":120,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":121,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":122,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":123,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":124,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"drawComplete":[{"__symbolic":"method"}],"drawStart":[{"__symbolic":"method"}],"openSignModal":[{"__symbolic":"method"}],"openSignatoreDlg":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"clearSignModal":[{"__symbolic":"method"}],"deleteSignature":[{"__symbolic":"method"}],"saveSignModal":[{"__symbolic":"method"}],"errorHandler":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"onKeyPress_OpenSignModal":[{"__symbolic":"method"}]}}},"origins":{"PepSignatureModule":"./signature.module","PepSignatureComponent":"./signature.component"},"importAs":"@pepperi-addons/ngx-lib/signature"}

package/signature/signature.component.d.ts CHANGED Viewed

@@ -28,6 +28,7 @@ export declare class PepSignatureComponent implements OnInit, OnChanges, OnDestr
     controlType: string;
     form: FormGroup;
     showTitle: boolean;
+    renderTitle: boolean;
     private _layoutType;
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;