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

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

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

package/textbox/textbox.component.theme.scss

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

package/theming.scss

@@ -1,99 +1,50 @@
 @charset 'UTF-8';
 @use '~@angular/material' as mat;
 
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-
 // 1. Configuration and helpers
-@import './src/core/style/abstracts/breakpoints', 
-        './src/core/style/abstracts/functions', 
-        './src/core/style/abstracts/variables', 
-        './src/core/style/abstracts/mixins';
+@use './src/core/style/abstracts/breakpoints';
+@use './src/core/style/abstracts/functions';
+@use './src/core/style/abstracts/variables';
+@use './src/core/style/abstracts/mixins';
 
 // 2. Vendors
-@import './src/core/style/vendors/normalize';
+@use './src/core/style/vendors/normalize';
 
 // 3. Base stuff
-@import './src/core/style/base/helpers', 
-        './src/core/style/base/grids', 
-        './src/core/style/base/base', 
-        './src/core/style/base/typography';
+@use './src/core/style/base/helpers';
+@use './src/core/style/base/grids';
+@use './src/core/style/base/base';
+@use './src/core/style/base/typography';
+
+/*************************************************************************************************************/
+/* Here we add the system + component's themes (all the colors definitions that change by the theme) - Start */
+/*************************************************************************************************************/
+@use './src/core/style/components/general';
+@use './src/core/style/components/button';
+@use './src/core/style/components/checkbox';
+@use './src/core/style/components/radio-button' as radio;
+@use './src/core/style/components/datetime';
+@use './src/core/style/components/file';
+@use './src/core/style/components/input';
+@use './src/core/style/components/select';
+@use './src/core/style/components/signature';
+@use './src/core/style/components/splitter';
+@use './src/core/style/components/textarea';
+@use './src/core/style/components/quantity-selector' as qs;
 
-// 4. theme
+// Use this import in a real project instead
+// @use '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
+@use './src/core/style/themes/default-theme.scss';
+
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 // Override material font.
 $pep-typography: mat.define-typography-config(
-    $font-family: $font-family-body
+    $font-family: variables.$font-family-body
 );
 @include mat.core($pep-typography);
 
-/*************************************************************************************************************/
-/* Here we add the system + component's themes (all the colors definitions that change by the theme) - Start */
-/*************************************************************************************************************/
-// @import '../app/shared/header/header.component.theme';
-
-@import './src/core/style/components/general', 
-        './src/core/style/components/button', 
-        './src/core/style/components/checkbox', 
-        './src/core/style/components/radio-button', 
-        './src/core/style/components/datetime', 
-        './src/core/style/components/file', 
-        './src/core/style/components/input', 
-        './src/core/style/components/select',
-        './src/core/style/components/signature', 
-        './src/core/style/components/splitter', 
-        './src/core/style/components/textarea', 
-        './src/core/style/components/quantity-selector';
-
-@import './address/address.component.theme';
-@import './attachment/attachment.component.theme';
-@import './bread-crumbs/bread-crumbs.component.theme';
-@import './button/button.component.theme';
-@import './checkbox/checkbox.component.theme';
-@import './color/color.component.theme';
-@import './color/color-picker.component.theme';
-@import './date/date.component.theme';
-@import './dialog/dialog.component.theme';
-@import './field-title/field-title.component.theme';
-@import './files-uploader/files-uploader.component.theme';
-@import './group-buttons/group-buttons.component.theme';
-@import './image/image.component.theme';
-@import './images-filmstrip/images-filmstrip.component.theme';
-@import './quantity-selector/quantity-selector.component.theme';
-@import './rich-html-textarea/rich-html-textarea.component.theme';
-@import './search/search.component.theme';
-@import './select/select.component.theme';
-@import './separator/separator.component.theme';
-@import './side-bar/side-bar.component.theme';
-@import './signature/signature.component.theme';
-@import './slider/slider.component.theme';
-@import './smart-filters/smart-filters.component.theme';
-@import './textarea/textarea.component.theme';
-@import './textbox/textbox.component.theme';
-@import './textbox-icon/textbox-icon.component.theme';
-@import './top-bar/top-bar.component.theme';
-@import './page-layout/page-layout.component.theme';
-
-@import './form/indicators.component.theme';
-// @import './form/internal-button.component.theme';
-// @import './form/internal-menu.component.theme';
-// @import './form/internal-page.component.theme';
-@import './form/form.component.theme';
-
-@import './list/list-actions.component.theme';
-@import './list/list-carousel.component.theme';
-@import './list/list-chooser.component.theme';
-@import './list/list-pager.component.theme';
-@import './list/list-sorting.component.theme';
-@import './list/list-total.component.theme';
-@import './list/list-views.component.theme';
-@import './list/list.component.theme';
-
-@import './query-builder/query-builder-section/query-builder-section.component.theme';
-
-// Use this import in a real project instead
-// @import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
-@import './src/core/style/themes/default-theme.scss';
-$material-theme-for-pep: $material-default-theme;
+$material-theme-for-pep: default-theme.$material-default-theme;
 
 @mixin material-theme($material-theme) {
 
@@ -120,72 +71,22 @@ $material-theme-for-pep: $material-default-theme;
         // Add material theme.
         @include material-theme($material-theme);
 
-        // Declare the system globals.
-        $pepperi-theme: get-pepperi-theme();
-
-        @include declare-system-base-theme($pepperi-theme);
-        @include declare-system-typography-theme($pepperi-theme);
+        @include base.declare-system-base-theme();
+        @include typography.declare-system-typography-theme();
 
         // Add global components themes (from ./src/core/style).
-        @include pep-general-theme($pepperi-theme);
-        @include pep-button-theme($pepperi-theme);
-        @include pep-checkbox-theme($pepperi-theme);
-        @include pep-radio-button-theme($pepperi-theme);
-        @include pep-datetime-theme($pepperi-theme);
-        @include pep-file-theme($pepperi-theme);
-        @include pep-input-theme($pepperi-theme);
-        @include pep-select-theme($pepperi-theme);
-        @include pep-signature-theme($pepperi-theme);
-        @include pep-splitter-theme($pepperi-theme);
-        @include pep-textarea-theme($pepperi-theme);
-        
-        // Add components themes (from lib).
-        @include pep-address-component-theme($pepperi-theme);
-        @include pep-attachment-component-theme($pepperi-theme);
-        @include pep-bread-crumbs-component-theme($pepperi-theme);
-        @include pep-button-component-theme($pepperi-theme);
-        @include pep-checkbox-component-theme($pepperi-theme);
-        @include pep-color-component-theme($pepperi-theme);
-        @include pep-color-picker-component-theme($pepperi-theme);
-        @include pep-date-component-theme($pepperi-theme);
-        @include pep-dialog-component-theme($pepperi-theme);
-        @include pep-field-title-component-theme($pepperi-theme);
-        @include pep-files-uploader-component-theme($pepperi-theme);
-        @include pep-group-buttons-component-theme($pepperi-theme);
-        @include pep-image-component-theme($pepperi-theme);
-        @include pep-images-filmstrip-component-theme($pepperi-theme);
-        @include pep-quantity-selector-component-theme($pepperi-theme);
-        @include pep-rich-html-textarea-component-theme($pepperi-theme);
-        @include pep-search-component-theme($pepperi-theme);
-        @include pep-select-component-theme($pepperi-theme);
-        @include pep-separator-component-theme($pepperi-theme);
-        @include pep-side-bar-component-theme($pepperi-theme);
-        @include pep-signature-component-theme($pepperi-theme);
-        @include pep-slider-component-theme($pepperi-theme);
-
-        @include pep-smart-filters-component-theme($pepperi-theme);
-        @include pep-textarea-component-theme($pepperi-theme);
-        @include pep-textbox-component-theme($pepperi-theme);
-        @include pep-textbox-icon-component-theme($pepperi-theme);
-        @include pep-top-bar-component-theme($pepperi-theme);
-        @include pep-page-layout-component-theme($pepperi-theme);
-        
-        @include pep-indicators-component-theme($pepperi-theme);
-        // @include pep-internal-button-component-theme($pepperi-theme);
-        // @include pep-internal-menu-component-theme($pepperi-theme);
-        // @include pep-internal-page-component-theme($pepperi-theme);
-        @include pep-form-component-theme($pepperi-theme);
-        
-        @include pep-list-actions-component-theme($pepperi-theme);
-        @include pep-list-carousel-component-theme($pepperi-theme);
-        @include pep-list-chooser-component-theme($pepperi-theme);
-        @include pep-list-pager-component-theme($pepperi-theme);
-        @include pep-list-sorting-component-theme($pepperi-theme);
-        @include pep-list-total-component-theme($pepperi-theme);
-        @include pep-list-views-component-theme($pepperi-theme);
-        @include pep-list-component-theme($pepperi-theme);
-        
-        @include pep-query-builder-section-theme($pepperi-theme);
+        @include button.pep-button-theme();
+        @include checkbox.pep-checkbox-theme();
+        @include datetime.pep-datetime-theme();
+        @include file.pep-file-theme();
+        @include general.pep-general-theme();
+        @include input.pep-input-theme();
+        @include qs.pep-quantity-selector-theme();
+        @include radio.pep-radio-button-theme();
+        @include select.pep-select-theme();
+        @include signature.pep-signature-theme();
+        @include splitter.pep-splitter-theme();
+        @include textarea.pep-textarea-theme();
     }
 }
 
@@ -193,7 +94,7 @@ $material-theme-for-pep: $material-default-theme;
 /* Here we add the system + component's themes (all the colors definitions that change by the theme) - End   */
 /*************************************************************************************************************/
 
-// @import './src/core/style/themes/default-theme.scss';
+// @use './src/core/style/themes/default-theme.scss';
 // .default-theme {
 //     $material-theme: $material-default-theme;
 //     @include pepperi-theme($material-theme);
@@ -205,19 +106,19 @@ $material-theme-for-pep: $material-default-theme;
 //     }
 // }
 
-// @import './src/core/style/themes/light-theme.scss';
+// @use './src/core/style/themes/light-theme.scss';
 // .light-theme {
 //     $material-theme: $material-light-theme;
 //     @include pepperi-theme($material-theme);// , $user-light-theme-color);
 // }
 
-// @import './src/core/style/themes/black-theme.scss';
+// @use './src/core/style/themes/black-theme.scss';
 // .black-theme {
 //     $material-theme: $material-black-theme;
 //     @include pepperi-theme($material-theme);// , $user-black-theme-color);
 // }
 
-// @import './src/core/style/themes/nature-theme.scss';
+// @use './src/core/style/themes/nature-theme.scss';
 // .nature-theme {
 //     $material-theme: $material-nature-theme;
 //     @include pepperi-theme($material-theme);// , $user-nature-theme-color);

package/top-bar/pepperi-addons-ngx-lib-top-bar.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepTopBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/menu","name":"PepMenuModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTopBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTopBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":36,"character":41}]}]}},"PepTopBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"pep-top-bar","template":"<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\r\n    <div class=\"header-content\">\r\n        <div class=\"main-layout\">\r\n            <div class=\"content pep-border-bottom\">\r\n                <div class=\"left-container pep-spacing-element-negative\">\r\n                    <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\r\n                </div>\r\n                <div class=\"pep-spacing-element\"></div>\r\n                <div class=\"right-container pep-spacing-element-negative\">\r\n                    <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\r\n    <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\r\n        [style.height.rem]=\"customizationService.footerHeight\">\r\n        <div class=\"content pep-border-top\">\r\n            <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\r\n                <ng-content select=\"[footer-start-content]\"></ng-content>\r\n            </div>\r\n            <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\r\n                <ng-content select=\"[footer-end-content]\"></ng-content>\r\n            </div>\r\n        </div>\r\n        <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\r\n        </ng-container>\r\n        <ng-template #footerBlock>\r\n            {{ customizationService.showFooter() }}\r\n        </ng-template>\r\n        <ng-template #noFooterBlock>\r\n            {{ customizationService.hideFooter() }}\r\n        </ng-template> -->\r\n    </div>\r\n\r\n</div>\r\n\r\n<!-- Left side templates -->\r\n<ng-template #listActionsTemplate>\r\n    <div class=\"list-actions-wrapper\">\r\n        <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #titleTemplate>\r\n    <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\r\n        <span [title]=\"title\">{{ title }}</span>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #listChooserTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\r\n        <ng-content select=\"pep-list-chooser\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #leftContentTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\r\n        <ng-content select=\"[header-start-content]\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #listTotalTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\r\n        <ng-content select=\"pep-list-total\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Right side templates -->\r\n<ng-template #searchTemplate>\r\n    <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\r\n        <ng-content select=\"pep-search\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #sortingTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\r\n        <ng-content select=\"pep-list-sorting\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #viewsTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\r\n        <ng-content select=\"pep-list-views\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #rightContentTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\r\n        <ng-content select=\"[header-end-content]\"></ng-content>\r\n    </div>\r\n</ng-template>","styles":[".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}"]}]}],"members":{"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"footerStateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"footerStartContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":5},"arguments":["footerStartContent"]}]}],"footerEndContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":51,"character":5},"arguments":["footerEndContent"]}]}],"searchComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchComponent","line":53,"character":18}]}]}],"listActionsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":54,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListActionsComponent","line":54,"character":18}]}]}],"listChooserComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":56,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListChooserComponent","line":56,"character":18}]}]}],"listTotalComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":58,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListTotalComponent","line":58,"character":18}]}]}],"listSortingComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":59,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListSortingComponent","line":59,"character":18}]}]}],"listViewsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":61,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListViewsComponent","line":61,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":73,"character":37},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":74,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":75,"character":23}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSearchIsOpenAndSmallDevice":[{"__symbolic":"method"}],"setFooterState":[{"__symbolic":"method"}]}},"PepFooterStateType":{"__symbolic":"interface"},"IPepFooterStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepTopBarModule":"./top-bar.module","PepTopBarComponent":"./top-bar.component","PepFooterStateType":"./top-bar.model","IPepFooterStateChangeEvent":"./top-bar.model"},"importAs":"@pepperi-addons/ngx-lib/top-bar"}
+{"__symbolic":"module","version":4,"metadata":{"PepTopBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/menu","name":"PepMenuModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTopBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTopBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":36,"character":41}]}]}},"PepTopBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"pep-top-bar","template":"<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\r\n    <div class=\"header-content\">\r\n        <div class=\"main-layout\">\r\n            <div class=\"content pep-border-bottom\">\r\n                <div class=\"left-container pep-spacing-element-negative\">\r\n                    <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\r\n                </div>\r\n                <div class=\"pep-spacing-element\"></div>\r\n                <div class=\"right-container pep-spacing-element-negative\">\r\n                    <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\r\n                    <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\r\n    <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\r\n        [style.height.rem]=\"customizationService.footerHeight\">\r\n        <div class=\"content pep-border-top\">\r\n            <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\r\n                <ng-content select=\"[footer-start-content]\"></ng-content>\r\n            </div>\r\n            <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\r\n                <ng-content select=\"[footer-end-content]\"></ng-content>\r\n            </div>\r\n        </div>\r\n        <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\r\n        </ng-container>\r\n        <ng-template #footerBlock>\r\n            {{ customizationService.showFooter() }}\r\n        </ng-template>\r\n        <ng-template #noFooterBlock>\r\n            {{ customizationService.hideFooter() }}\r\n        </ng-template> -->\r\n    </div>\r\n\r\n</div>\r\n\r\n<!-- Left side templates -->\r\n<ng-template #listActionsTemplate>\r\n    <div class=\"list-actions-wrapper\">\r\n        <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #titleTemplate>\r\n    <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\r\n        <span [title]=\"title\">{{ title }}</span>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #listChooserTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\r\n        <ng-content select=\"pep-list-chooser\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #leftContentTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\r\n        <ng-content select=\"[header-start-content]\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #listTotalTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\r\n        <ng-content select=\"pep-list-total\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Right side templates -->\r\n<ng-template #searchTemplate>\r\n    <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\r\n        <ng-content select=\"pep-search\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #sortingTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\r\n        <ng-content select=\"pep-list-sorting\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #viewsTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\r\n        <ng-content select=\"pep-list-views\"></ng-content>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #rightContentTemplate>\r\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\r\n        <ng-content select=\"[header-end-content]\"></ng-content>\r\n    </div>\r\n</ng-template>","styles":[".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}",".pep-top-bar-container{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.pep-top-bar-container .footer{background-color:#fff;background-color:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}"]}]}],"members":{"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"footerStateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"footerStartContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":5},"arguments":["footerStartContent"]}]}],"footerEndContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":51,"character":5},"arguments":["footerEndContent"]}]}],"searchComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchComponent","line":53,"character":18}]}]}],"listActionsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":54,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListActionsComponent","line":54,"character":18}]}]}],"listChooserComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":56,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListChooserComponent","line":56,"character":18}]}]}],"listTotalComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":58,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListTotalComponent","line":58,"character":18}]}]}],"listSortingComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":59,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListSortingComponent","line":59,"character":18}]}]}],"listViewsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":61,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListViewsComponent","line":61,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":73,"character":37},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":74,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":75,"character":23}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSearchIsOpenAndSmallDevice":[{"__symbolic":"method"}],"setFooterState":[{"__symbolic":"method"}]}},"PepFooterStateType":{"__symbolic":"interface"},"IPepFooterStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepTopBarModule":"./top-bar.module","PepTopBarComponent":"./top-bar.component","PepFooterStateType":"./top-bar.model","IPepFooterStateChangeEvent":"./top-bar.model"},"importAs":"@pepperi-addons/ngx-lib/top-bar"}

package/top-bar/top-bar.component.theme.scss

@@ -1,9 +1,9 @@
-@mixin pep-top-bar-component-theme($pepperi-theme) {
-    .pep-top-bar-container {
-        background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
+@use '../src/core/style/abstracts/functions';
 
-        .footer {
-            background-color: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-        }
+.pep-top-bar-container {
+    background: functions.get-pep-color(color-system-primary-invert, color-base);
+
+    .footer {
+        background-color: functions.get-pep-color(color-system-primary-invert, color-base);
     }
-}
+}

package/form/form.component.theme.scss

@@ -1,2 +0,0 @@
-@mixin pep-form-component-theme($pepperi-theme) {
-}

package/form/internal-button.component.theme.scss

@@ -1,2 +0,0 @@
-@mixin pep-internal-button-component-theme($pepperi-theme) {
-}

package/form/internal-menu.component.theme.scss

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

package/list/list-actions.component.theme.scss

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

package/list/list-carousel.component.theme.scss

@@ -1,9 +0,0 @@
-@mixin pep-list-carousel-component-theme($pepperi-theme) {
-    .carousel-container {
-        .carousel-arrow {
-            .pep-button {
-                // @include inline(get-pep-color($pepperi-theme, color-weak, color-base), 1px, solid, false);
-            }
-        }
-    }
-}

package/list/list-chooser.component.theme.scss

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

package/list/list-pager.component.theme.scss

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

package/list/list-sorting.component.theme.scss

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

package/list/list-views.component.theme.scss

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

package/list/list.component.theme.scss

@@ -1,5 +0,0 @@
-// -----------------------------------------------------
-//  Custom list
-// -----------------------------------------------------
-@mixin pep-list-component-theme($pepperi-theme) {
-}

package/list/list_old.component.theme.scss

@@ -1,5 +0,0 @@
-// // -----------------------------------------------------
-// //  Custom list
-// // -----------------------------------------------------
-// @mixin pep-list-component-theme($pepperi-theme) {
-// }

package/menu/menu.component.theme.scss

@@ -1,2 +0,0 @@
-@mixin pep-menu-component-theme($pepperi-theme) {
-}

package/search/search.component.theme.scss

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

package/textbox-icon/textbox-icon.component.theme.scss

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