@pepperi/components

<ng-container [formGroup]="form">  <ng-template #pepperiTemplate> <div #QSCont class="pepperi-quantity-selector-container {{ styleClass }}" [ngClass]="{ 'pepperi-table-quantity-selector': layoutType === LAYOUT_TYPE.PepperiTable, 'one-row': rowSpan === 1, caution: isCaution, 'matrix-qs': type === 'qsForMatrix', 'zero-quantity': formattedValue === '0' }"> <pepperi-field-title *ngIf="layoutType !== LAYOUT_TYPE.PepperiTable && layoutType !== LAYOUT_TYPE.PepperiCard" [label]="label" [required]="required" [disabled]="disabled" [showTitle]="showTitle" [xAlignment]="xAlignment"> </pepperi-field-title> <ng-container *ngIf="type == 'qs'"> <ng-container *ngIf="readonly; then readonlyBlock; else editableQSBlock"></ng-container> <ng-template #readonlyBlock> <button [id]="key" mat-button class="pepperi-button {{ styleClass }} ellipsis" [ngClass]="{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}" title="{{ formattedValue }}" disabled="true"> {{ formattedValue }} </button> </ng-template> <ng-template #editableQSBlock> <mat-form-field appearance="outline"> <input type="decimalNumber" inputmode="decimal" matInput #QSInput name="{{ key }}" class="body-lg ellipsis" title="{{ formattedValue }}" autocomplete="off" [id]="key" [formControlName]="key" [value]="isFocus ? (value | quantitySelectorNumber: alowDecimal) : formattedValue" [disabled]="disabled" (keypress)="onKeyPress($event)" (click)="$event.target.setSelectionRange(0, 999)" (blur)="onBlur($event)" (focus)="onFocus($event)" /> <button *ngIf="showQSButtons && showQsBtn" button-blur mat-button matPrefix (click)="decrement($event)" class="pepperi-button sm weak qs-action" [ngClass]="{caution: isCaution && styleClass !== STYLE_TYPE.Strong, 'keep-background-on-focus': styleClass === STYLE_TYPE.Strong}"> <mat-icon><svg class="svg-icon"> <use attr.xlink:href="{{ sessionService.svgIcons }}number-minus"></use> </svg></mat-icon> </button> <button *ngIf="showQSButtons && showQsBtn" button-blur mat-button matSuffix (click)="increment($event)" class="pepperi-button sm weak qs-action" [ngClass]="{caution: isCaution && styleClass !== STYLE_TYPE.Strong, 'keep-background-on-focus': styleClass === STYLE_TYPE.Strong}"> <mat-icon><svg class="svg-icon"> <use attr.xlink:href="{{ sessionService.svgIcons }}number-plus"></use> </svg></mat-icon> </button> <mat-error *ngIf="messages?.length > 0"> <span class="qs-error body-xs" *ngFor="let msg of messages"> {{ msg.Key | translate }} : {{ msg.Value }} </span> </mat-error> </mat-form-field> </ng-template> </ng-container> <ng-container *ngIf="type == 'qsForMatrix'"> <ng-container *ngIf="readonly; then readonlyBlock; else editableQSBlock"></ng-container> <ng-template #readonlyBlock> <button [id]="key" mat-button class="pepperi-button {{ styleClass }} disabled" disabled="true" [ngClass]="{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}">  X </button> </ng-template> <ng-template #editableQSBlock>  <span *ngIf="xAlignment == '2'" class="body-sm additional-value prefix" matBadge="{{ additionalValue }}" matBadgePosition="before" matBadgeSize="rowSpan === 1 ? small : medium" [@showHide]="getAdditionalValue"></span> <mat-form-field appearance="outline" (mouseleave)="!isFocus ? onMatrixMouseleave($event) : null"> <input type="decimalNumber" inputmode="decimal" matInput #QSInput name="{{ key }}" title="{{ formattedValue }}" class="body-sm ellipsis" autocomplete="off" [id]="key" [formControlName]="key" [value]="isFocus ? (value | quantitySelectorNumber: alowDecimal) : formattedValue" [disabled]="disabled" (keypress)="onKeyPress($event)" (click)="onMatrixClick($event); $event.target.setSelectionRange(0, 999)" (blur)="onMatrixBlur($event)" (focus)="onMatrixMouseEnter($event); onFocus($event)" (mouseenter)="onMatrixMouseEnter($event)" />  <mat-error *ngIf="messages?.length > 0"> <span class="qs-error body-xs" *ngFor="let msg of messages"> {{ msg.Key | translate }} : {{ msg.Value }} </span> </mat-error> </mat-form-field> <span *ngIf="xAlignment != '2'" class="body-sm additional-value suffix" matBadge="{{ additionalValue }}" matBadgePosition="before" matBadgeSize="rowSpan === 1 ? small : medium" [@showHide]="getAdditionalValue"></span> </ng-template> </ng-container> <ng-container *ngIf="type == 'button'"> <ng-container *ngIf="value == '0'; then regularBlock; else withBadgeBlock"></ng-container> <ng-template #regularBlock> <button mat-button name="{{ key }}" class="pepperi-button {{ styleClass }} ellipsis" [id]="key" [ngClass]="{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}" [title]="'FormBuilder_Order' | translate" (click)="enterChildren($event)"> {{ 'FormBuilder_Order' | translate }} </button> </ng-template> <ng-template #withBadgeBlock> <ng-container *ngIf="xAlignment == '2'; then leftBadgeBlock; else rightBadgeBlock"></ng-container> <ng-template #leftBadgeBlock> <button mat-button matBadge="{{ formattedValue }}" matBadgePosition="before" [matBadgeSize]="layoutType === LAYOUT_TYPE.PepperiCard && rowSpan === 1 ? 'small' : 'medium'" name="{{ key }}" class="pepperi-button {{ styleClass }} ellipsis right-alignment" [id]="key" [ngClass]="{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}" [title]="'FormBuilder_Order' | translate" (click)="enterChildren($event)"> {{ 'FormBuilder_Order' | translate }} </button> </ng-template> <ng-template #rightBadgeBlock> <button mat-button matBadge="{{ formattedValue }}" matBadgePosition="after" [matBadgeSize]="layoutType === LAYOUT_TYPE.PepperiCard && rowSpan === 1 ? 'small' : 'medium'" name="{{ key }}" class="pepperi-button {{ styleClass }} ellipsis left-alignment" [id]="key" [ngClass]="{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}" [title]="'FormBuilder_Order' | translate" (click)="enterChildren($event)"> {{ 'FormBuilder_Order' | translate }} </button> </ng-template> </ng-template> </ng-container> <ng-container *ngIf="type == 'packageButton'"> <button mat-button name="{{ key }}" title="{{ 'FormBuilder_Order' | translate }}" class="pepperi-button {{ styleClass }} ellipsis" [id]="key" [ngClass]="{caution: isCaution, md: rowSpan !== 1, xs: rowSpan === 1}" (click)="enterPackage($event)"> {{ 'FormBuilder_Order' | translate }} ({{ formattedValue }}) </button> </ng-container> </div> </ng-template> <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiForm"> <ng-container *ngTemplateOutlet="pepperiTemplate"></ng-container> </ng-container> <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiCard"> <ng-container *ngTemplateOutlet="pepperiTemplate"></ng-container> </ng-container> <ng-container *ngIf="layoutType === LAYOUT_TYPE.PepperiTable"> <ng-container *ngTemplateOutlet="pepperiTemplate"></ng-container> </ng-container> <ng-container *ngIf="layoutType === LAYOUT_TYPE.Editmodal"> <ng-container *ngTemplateOutlet="pepperiTemplate"></ng-container> </ng-container> </ng-container>