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

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

@@ -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\">\r\n    <ng-template #pepTemplate>\r\n        <ng-container *ngIf=\"type == 'multi'; then multiSelectBlock; else regularSelectBlock\"></ng-container>\r\n        <ng-template #regularSelectBlock>\r\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\r\n                <mat-select #select [required]=\"mandatory ? mandatory : undefined\" matInput disableOptionCentering\r\n                    class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\r\n                    [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\r\n                    [placeholder]=\"disabled || readonly ? '' : ('SELECT.HINT' | translate)\"\r\n                    [(ngModel)]=\"selectedValueModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\r\n                    (selectionChange)=\"selectionChange($event)\" (openedChange)=\"openedChange($event)\"\r\n                    title=\"{{ fieldFormattedValue }}\">\r\n                    <mat-option *ngIf=\"emptyOption\" value=\"\" [title]=\"'LIST.NONE' | translate\">{{ 'LIST.NONE' |\r\n                        translate }}</mat-option>\r\n                    <mat-option *ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\r\n                        option.value }}</mat-option>\r\n                </mat-select>\r\n                <mat-error>\r\n                    <span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"\r\n                        [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"></span>\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </ng-template>\r\n        <ng-template #multiSelectBlock>\r\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\r\n                <mat-select #select multiple [required]=\"mandatory ? mandatory : undefined\" matInput\r\n                    disableOptionCentering class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\r\n                    [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\r\n                    [placeholder]=\"disabled || readonly ? '' : ('SELECT.HINT' | translate)\"\r\n                    [(ngModel)]=\"selectedValuesModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\r\n                    (openedChange)=\"openedChange($event)\" title=\"{{ fieldFormattedValue }}\">\r\n                    <mat-option *ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\r\n                        option.value }}</mat-option>\r\n                </mat-select>\r\n                <mat-error><span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"\r\n                        [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"> </span>\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </ng-template>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <pep-field-title *ngIf=\"!parentFieldKey && renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\"\r\n            [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n        </pep-field-title>\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <ng-container *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\"></ng-container>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #readOnlyBlock>\r\n            <div class=\"pep-card-input card-flex-container\"\r\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\r\n                [class]=\"'text-align-' + xAlignment\" (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=\"{{ fieldFormattedValue }}\" class=\"body-sm value\">{{ fieldFormattedValue\r\n                    }}</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    </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\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #notSelectedBlock>\r\n            <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{readonly: disabled}\"\r\n                title=\"{{ fieldFormattedValue }}\">{{ fieldFormattedValue }}</span>\r\n        </ng-template>\r\n    </ng-container>\r\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"}
+{"__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\">\r\n    <ng-template #pepTemplate>\r\n        <ng-container *ngIf=\"type == 'multi'; then multiSelectBlock; else regularSelectBlock\"></ng-container>\r\n        <ng-template #regularSelectBlock>\r\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\r\n                <mat-select #select [required]=\"mandatory ? mandatory : undefined\" matInput disableOptionCentering\r\n                    class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\r\n                    [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\r\n                    [placeholder]=\"disabled || readonly ? '' : ('SELECT.HINT' | translate)\"\r\n                    [(ngModel)]=\"selectedValueModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\r\n                    (selectionChange)=\"selectionChange($event)\" (openedChange)=\"openedChange($event)\"\r\n                    title=\"{{ fieldFormattedValue }}\">\r\n                    <mat-option *ngIf=\"emptyOption\" value=\"\" [title]=\"'LIST.NONE' | translate\">{{ 'LIST.NONE' |\r\n                        translate }}</mat-option>\r\n                    <mat-option *ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\r\n                        option.value }}</mat-option>\r\n                </mat-select>\r\n                <mat-error>\r\n                    <span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"\r\n                        [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"></span>\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </ng-template>\r\n        <ng-template #multiSelectBlock>\r\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\r\n                <mat-select #select multiple [required]=\"mandatory ? mandatory : undefined\" matInput\r\n                    disableOptionCentering class=\"body-sm text-align-{{ xAlignment }}\" [id]=\"key\"\r\n                    [ngClass]=\"{'right-alignment': xAlignment === 'right'}\"\r\n                    [placeholder]=\"disabled || readonly ? '' : ('SELECT.HINT' | translate)\"\r\n                    [(ngModel)]=\"selectedValuesModel\" [ngModelOptions]=\"{standalone: true}\" [disabled]=\"disabled\"\r\n                    (openedChange)=\"openedChange($event)\" title=\"{{ fieldFormattedValue }}\">\r\n                    <mat-option *ngFor=\"let option of options\" [value]=\"option.key\" [title]=\"option.value\">{{\r\n                        option.value }}</mat-option>\r\n                </mat-select>\r\n                <mat-error><span class=\"body-xs\" [title]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"\r\n                        [innerText]=\"'MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}\"> </span>\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </ng-template>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <pep-field-title *ngIf=\"!parentFieldKey && renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\"\r\n            [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n        </pep-field-title>\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <ng-container *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\"></ng-container>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #readOnlyBlock>\r\n            <div class=\"pep-card-input card-flex-container\"\r\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\r\n                [class]=\"'text-align-' + xAlignment\" (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=\"{{ fieldFormattedValue }}\" class=\"body-sm value\">{{ fieldFormattedValue\r\n                    }}</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    </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\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #notSelectedBlock>\r\n            <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{readonly: disabled}\"\r\n                title=\"{{ fieldFormattedValue }}\">{{ fieldFormattedValue }}</span>\r\n        </ng-template>\r\n    </ng-container>\r\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.theme.scss

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

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

@@ -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'\">\r\n    <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\r\n        <span class=\"block-with-text body-md\">{{ label }}</span>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"layoutType === 'card'\">\r\n    <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\r\n        dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\r\n        <span class=\"small-block-with-text body-sm\">{{ label }}</span>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"layoutType === 'table'\">\r\n    <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\r\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"}
+{"__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'\">\r\n    <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\r\n        <span class=\"block-with-text body-md\">{{ label }}</span>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"layoutType === 'card'\">\r\n    <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\r\n        dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\r\n        <span class=\"small-block-with-text body-sm\">{{ label }}</span>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"layoutType === 'table'\">\r\n    <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\r\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/separator/separator.component.theme.scss

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

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepSideBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSideBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSideBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":31,"character":41}]}]}},"PepSideBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"pep-side-bar","template":"<div class=\"pep-side-bar-container\">\r\n    <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\r\n    </ng-container>\r\n    <ng-template #largeScreensBlock>\r\n        <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'is-open-state': state === 'open'}\">\r\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\r\n            <div class=\"toggle-button-border\"></div>\r\n            <button mat-button class=\"toggle-button pep-button xs regular icon-button \" (click)=\"toggleSideWrapper()\">\r\n                <mat-icon>\r\n                    <pep-icon [name]=\"toggleButtonArrowName\">\r\n                    </pep-icon>\r\n                </mat-icon>\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template #notLargeScreensBlock>\r\n        <mat-sidenav-container [hasBackdrop]=\"true\">\r\n            <mat-sidenav #sidenav mode=\"over\" autoFocus=\"false\" fixedInViewport=\"false\"\r\n                (openedChange)=\"toggleSidenav($event)\">\r\n                <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\r\n            </mat-sidenav>\r\n        </mat-sidenav-container>\r\n    </ng-template>\r\n</div>\r\n\r\n<ng-template #sideLayoutTemplate>\r\n    <div class=\"side-layout\">\r\n        <div *ngIf=\"showHeader\" class=\"header-content\">\r\n            <div class=\"content pep-border-bottom body-lg ellipsis\">\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"main-content\">\r\n            <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"showFooter\" class=\"footer-content\">\r\n            <div class=\"content pep-border-top body-lg ellipsis\">\r\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #headerTemplate>\r\n    <ng-content select=\"[header-content]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #startContentTemplate>\r\n    <ng-content select=\"[start-content]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #contentTemplate>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #endContentTemplate>\r\n    <ng-content select=\"[end-content]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #filtersTemplate>\r\n\r\n</ng-template>\r\n\r\n<ng-template #smartFiltersTemplate>\r\n    <ng-content select=\"pep-smart-filters\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n    <ng-content select=\"[footer-content]\"></ng-content>\r\n</ng-template>","styles":[".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline .35s ease-out;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(1.5rem + .5rem + 2.5rem) - .75rem);margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - 4rem);height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;padding-inline:var(--pep-spacing-lg,1rem)}@media (max-width:599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{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));padding-top:1.5rem;padding-top:var(--pep-top-bar-spacing-top,1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{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))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":32,"character":1}}],"members":{"ignoreResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"showFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":5}}]}],"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["sidenav"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":69,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":70,"character":26},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":71,"character":30}]}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"toggleState":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setSideBarHeight":[{"__symbolic":"method"}],"mouseLeaveSideBar":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"toggleSideWrapper":[{"__symbolic":"method"}],"toggleSidenav":[{"__symbolic":"method"}]},"statics":{"ONE_MULTI_BY_DIR_KEY":"--pep-one-multi-by-dir"}},"PepSideBarStateType":{"__symbolic":"interface"},"IPepSideBarStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepSideBarModule":"./side-bar.module","PepSideBarComponent":"./side-bar.component","PepSideBarStateType":"./side-bar.model","IPepSideBarStateChangeEvent":"./side-bar.model"},"importAs":"@pepperi-addons/ngx-lib/side-bar"}
+{"__symbolic":"module","version":4,"metadata":{"PepSideBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSideBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSideBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":31,"character":41}]}]}},"PepSideBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"pep-side-bar","template":"<div class=\"pep-side-bar-container\">\r\n    <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\r\n    </ng-container>\r\n    <ng-template #largeScreensBlock>\r\n        <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'is-open-state': state === 'open'}\">\r\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\r\n            <div class=\"toggle-button-border\"></div>\r\n            <button mat-button class=\"toggle-button pep-button xs regular icon-button \" (click)=\"toggleSideWrapper()\">\r\n                <mat-icon>\r\n                    <pep-icon [name]=\"toggleButtonArrowName\">\r\n                    </pep-icon>\r\n                </mat-icon>\r\n            </button>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template #notLargeScreensBlock>\r\n        <mat-sidenav-container [hasBackdrop]=\"true\">\r\n            <mat-sidenav #sidenav mode=\"over\" autoFocus=\"false\" fixedInViewport=\"false\"\r\n                (openedChange)=\"toggleSidenav($event)\">\r\n                <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\r\n            </mat-sidenav>\r\n        </mat-sidenav-container>\r\n    </ng-template>\r\n</div>\r\n\r\n<ng-template #sideLayoutTemplate>\r\n    <div class=\"side-layout\">\r\n        <div *ngIf=\"showHeader\" class=\"header-content\">\r\n            <div class=\"content pep-border-bottom body-lg ellipsis\">\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"main-content\">\r\n            <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n                <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"showFooter\" class=\"footer-content\">\r\n            <div class=\"content pep-border-top body-lg ellipsis\">\r\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #headerTemplate>\r\n    <ng-content select=\"[header-content]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #startContentTemplate>\r\n    <ng-content select=\"[start-content]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #contentTemplate>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #endContentTemplate>\r\n    <ng-content select=\"[end-content]\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #filtersTemplate>\r\n\r\n</ng-template>\r\n\r\n<ng-template #smartFiltersTemplate>\r\n    <ng-content select=\"pep-smart-filters\"></ng-content>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n    <ng-content select=\"[footer-content]\"></ng-content>\r\n</ng-template>","styles":[".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline .35s ease-out;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(1.5rem + .5rem + 2.5rem) - .75rem);margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - 4rem);height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;padding-inline:var(--pep-spacing-lg,1rem)}@media (max-width:599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{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));padding-top:1.5rem;padding-top:var(--pep-top-bar-spacing-top,1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{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))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}",".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{-webkit-border-end:1px solid rgba(26,26,26,.24);border-inline-end:1px solid rgba(26,26,26,.24);-webkit-border-end:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24);border-inline-end:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}.pep-side-bar-container .mat-sidenav-container .mat-drawer-backdrop.mat-drawer-shown{background-color:rgba(26,26,26,.24);background-color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{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%))}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":32,"character":1}}],"members":{"ignoreResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"showFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":5}}]}],"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["sidenav"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":69,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":70,"character":26},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":71,"character":30}]}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"toggleState":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setSideBarHeight":[{"__symbolic":"method"}],"mouseLeaveSideBar":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"toggleSideWrapper":[{"__symbolic":"method"}],"toggleSidenav":[{"__symbolic":"method"}]},"statics":{"ONE_MULTI_BY_DIR_KEY":"--pep-one-multi-by-dir"}},"PepSideBarStateType":{"__symbolic":"interface"},"IPepSideBarStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepSideBarModule":"./side-bar.module","PepSideBarComponent":"./side-bar.component","PepSideBarStateType":"./side-bar.model","IPepSideBarStateChangeEvent":"./side-bar.model"},"importAs":"@pepperi-addons/ngx-lib/side-bar"}

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

@@ -1,25 +1,26 @@
-@mixin pep-side-bar-component-theme($pepperi-theme) {
-    .pep-side-bar-container {
-        .toggle-side-bar-container {
-            .toggle-button-border {
-                @include pep-border(border-inline-end, $pepperi-theme);
-            }
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
+
+.pep-side-bar-container {
+    .toggle-side-bar-container {
+        .toggle-button-border {
+            @include mixins.pep-border(border-inline-end);
         }
+    }
 
-        .mat-sidenav-container {
-            // background-color: transparent;
+    .mat-sidenav-container {
+        // background-color: transparent;
 
-            .mat-drawer-backdrop.mat-drawer-shown {
-                background-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-50);
-            }
+        .mat-drawer-backdrop.mat-drawer-shown {
+            background-color: functions.get-pep-color(color-system-primary, color-tran-50);
         }
+    }
 
-        .side-layout {
-            background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
+    .side-layout {
+        background: functions.get-pep-color(color-system-primary-invert, color-base);
 
-            .header-content {
-                background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-            }
+        .header-content {
+            background: functions.get-pep-color(color-system-primary-invert, color-base);
         }
     }
 }

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

@@ -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\">\r\n    <ng-container>\r\n        <ng-template #pepTemplate>\r\n            <mat-form-field [formGroup]=\"form\" appearance=\"outline\">\r\n                <div class=\"pep-file-wrapper\">\r\n                    <div class=\"pep-file body-sm\" [ngClass]=\"{ disable: disabled }\" [style.height]=\"fieldHeight\">\r\n                        <ng-container *ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\r\n                        <ng-template #withImg>\r\n                            <button *ngIf=\"!disabled\" mat-button (click)=\"deleteSignature($event)\"\r\n                                class=\"pep-button icon-button weak md delete\" tabindex=\"-1\"\r\n                                [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\r\n                                <mat-icon>\r\n                                    <pep-icon name=\"system_bin\"></pep-icon>\r\n                                </mat-icon>\r\n                            </button>\r\n                            <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\r\n                                <img [src]=\"src\" [style.max-height]=\"fieldHeight\" class=\"pep-file-preview-img\"\r\n                                    (error)=\"errorHandler($event)\" [alt]=\"label\"\r\n                                    [ngClass]=\"['text-align-' + xAlignment]\" />\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #noImg>\r\n                            <div class=\"ellipsis pep-file-message\">\r\n                                <mat-icon class=\"pep-spacing-element\">\r\n                                    <pep-icon name=\"system_signature\"></pep-icon>\r\n                                </mat-icon>\r\n                                <span class=\"body-sm ellipsis\">\r\n                                    {{ (disabled ? 'MESSAGES.INFO_MISSING_SIGNATURE' : 'SIGNATURE.HINT') | translate }}\r\n                                </span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <input [id]=\"key\" matInput [formControlName]=\"key\" class=\"hidden-input signature\" type=\"text\"\r\n                        [value]=\"src\" (click)=\"openSignModal()\" (keypress)=\"onKeyPress_OpenSignModal($event)\"\r\n                        autocomplete=\"off\" readonly />\r\n                </div>\r\n\r\n                <mat-error><span class=\"body-xs\"\r\n                        [title]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\r\n                        [innerText]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </ng-template>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'form'\">\r\n            <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\r\n                <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\r\n                    [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n                </pep-field-title>\r\n                <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'card'\">\r\n            <ng-container *ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\r\n            </ng-container>\r\n            <ng-template #selectedBlock>\r\n                <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\r\n                    <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #notSelectedBlock>\r\n                <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1 }\">\r\n                    <ng-container *ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: false}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'table'\">\r\n            <ng-container *ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\r\n            </ng-container>\r\n            <ng-template #selectedBlock>\r\n                <div class=\"pep-file-container one-row\">\r\n                    <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #notSelectedBlock>\r\n                <div class=\"pep-file-container one-row\">\r\n                    <ng-container *ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: true}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- <ng-container *ngIf=\"inDialog === true\">\r\n        <ng-container *ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\r\n    </ng-container> -->\r\n\r\n    <!-- <div *ngIf=\"inDialog === false\" class=\"signature-backdrop modal\" [ngClass]=\"{ fade: !isVisibleModal }\" tabindex=\"-1\"\r\n        role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\"\r\n        [ngStyle]=\"{ display: isVisibleModal ? 'block' : 'none' }\">\r\n        <div class=\"signature-modal modal-dialog\" role=\"document\">\r\n            <div class=\"modal-content\">\r\n                <ng-container *ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <ng-template #pepReadonlyTemplate let-isTableView=\"isTableView\">\r\n        <div class=\"pep-file-container\">\r\n            <div class=\"pep-file-wrapper\">\r\n                <div class=\"pep-file body-sm disable\">\r\n                    <ng-container *ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\r\n                    <ng-template #withImg>\r\n                        <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\r\n                            <img *ngIf=\"!isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\r\n                                class=\"pep-file-preview-img\" (error)=\"errorHandler($event)\" [alt]=\"label\"\r\n                                [ngClass]=\"['text-align-' + xAlignment]\" />\r\n                            <img *ngIf=\"isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\r\n                                class=\"pep-report-file pep-file-preview-img\" (error)=\"errorHandler($event)\"\r\n                                [alt]=\"label\" [ngClass]=\"['text-align-' + xAlignment]\" />\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noImg></ng-template>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template #signaturePopupPad>\r\n        <pep-dialog [title]=\"'SIGNATURE.DIALOG_TITLE' | translate\" [showFooter]=\"showActionBtn\">\r\n            <ng-container pep-dialog-content>\r\n                <signature-pad #signaturePad [options]=\"signaturePadOptions\" (onBeginEvent)=\"drawStart()\"\r\n                    (onEndEvent)=\"drawComplete()\">\r\n                </signature-pad>\r\n            </ng-container>\r\n            <div pep-dialog-actions class=\"pep-spacing-element-negative\">\r\n                <button mat-button class=\"pep-spacing-element pep-button md weak\" [disabled]=\"readonly || disabled\"\r\n                    (click)=\"clearSignModal()\">\r\n                    {{ 'ACTIONS.CLEAR' | translate }}\r\n                </button>\r\n                <button mat-button class=\"pep-spacing-element pep-button md strong\" [disabled]=\"readonly || disabled\"\r\n                    (click)=\"saveSignModal($event)\">\r\n                    {{ 'ACTIONS.DONE' | translate }}\r\n                </button>\r\n            </div>\r\n        </pep-dialog>\r\n    </ng-template>\r\n\r\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"}
+{"__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\">\r\n    <ng-container>\r\n        <ng-template #pepTemplate>\r\n            <mat-form-field [formGroup]=\"form\" appearance=\"outline\">\r\n                <div class=\"pep-file-wrapper\">\r\n                    <div class=\"pep-file body-sm\" [ngClass]=\"{ disable: disabled }\" [style.height]=\"fieldHeight\">\r\n                        <ng-container *ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\r\n                        <ng-template #withImg>\r\n                            <button *ngIf=\"!disabled\" mat-button (click)=\"deleteSignature($event)\"\r\n                                class=\"pep-button icon-button weak md delete\" tabindex=\"-1\"\r\n                                [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\r\n                                <mat-icon>\r\n                                    <pep-icon name=\"system_bin\"></pep-icon>\r\n                                </mat-icon>\r\n                            </button>\r\n                            <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\r\n                                <img [src]=\"src\" [style.max-height]=\"fieldHeight\" class=\"pep-file-preview-img\"\r\n                                    (error)=\"errorHandler($event)\" [alt]=\"label\"\r\n                                    [ngClass]=\"['text-align-' + xAlignment]\" />\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template #noImg>\r\n                            <div class=\"ellipsis pep-file-message\">\r\n                                <mat-icon class=\"pep-spacing-element\">\r\n                                    <pep-icon name=\"system_signature\"></pep-icon>\r\n                                </mat-icon>\r\n                                <span class=\"body-sm ellipsis\">\r\n                                    {{ (disabled ? 'MESSAGES.INFO_MISSING_SIGNATURE' : 'SIGNATURE.HINT') | translate }}\r\n                                </span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                    <input [id]=\"key\" matInput [formControlName]=\"key\" class=\"hidden-input signature\" type=\"text\"\r\n                        [value]=\"src\" (click)=\"openSignModal()\" (keypress)=\"onKeyPress_OpenSignModal($event)\"\r\n                        autocomplete=\"off\" readonly />\r\n                </div>\r\n\r\n                <mat-error><span class=\"body-xs\"\r\n                        [title]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\r\n                        [innerText]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\r\n                </mat-error>\r\n            </mat-form-field>\r\n        </ng-template>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'form'\">\r\n            <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\r\n                <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\r\n                    [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n                </pep-field-title>\r\n                <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'card'\">\r\n            <ng-container *ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\r\n            </ng-container>\r\n            <ng-template #selectedBlock>\r\n                <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\r\n                    <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #notSelectedBlock>\r\n                <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1 }\">\r\n                    <ng-container *ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: false}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'table'\">\r\n            <ng-container *ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\r\n            </ng-container>\r\n            <ng-template #selectedBlock>\r\n                <div class=\"pep-file-container one-row\">\r\n                    <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #notSelectedBlock>\r\n                <div class=\"pep-file-container one-row\">\r\n                    <ng-container *ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: true}\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- <ng-container *ngIf=\"inDialog === true\">\r\n        <ng-container *ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\r\n    </ng-container> -->\r\n\r\n    <!-- <div *ngIf=\"inDialog === false\" class=\"signature-backdrop modal\" [ngClass]=\"{ fade: !isVisibleModal }\" tabindex=\"-1\"\r\n        role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\"\r\n        [ngStyle]=\"{ display: isVisibleModal ? 'block' : 'none' }\">\r\n        <div class=\"signature-modal modal-dialog\" role=\"document\">\r\n            <div class=\"modal-content\">\r\n                <ng-container *ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n\r\n    <ng-template #pepReadonlyTemplate let-isTableView=\"isTableView\">\r\n        <div class=\"pep-file-container\">\r\n            <div class=\"pep-file-wrapper\">\r\n                <div class=\"pep-file body-sm disable\">\r\n                    <ng-container *ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\r\n                    <ng-template #withImg>\r\n                        <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\r\n                            <img *ngIf=\"!isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\r\n                                class=\"pep-file-preview-img\" (error)=\"errorHandler($event)\" [alt]=\"label\"\r\n                                [ngClass]=\"['text-align-' + xAlignment]\" />\r\n                            <img *ngIf=\"isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\r\n                                class=\"pep-report-file pep-file-preview-img\" (error)=\"errorHandler($event)\"\r\n                                [alt]=\"label\" [ngClass]=\"['text-align-' + xAlignment]\" />\r\n                        </div>\r\n                    </ng-template>\r\n                    <ng-template #noImg></ng-template>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template #signaturePopupPad>\r\n        <pep-dialog [title]=\"'SIGNATURE.DIALOG_TITLE' | translate\" [showFooter]=\"showActionBtn\">\r\n            <ng-container pep-dialog-content>\r\n                <signature-pad #signaturePad [options]=\"signaturePadOptions\" (onBeginEvent)=\"drawStart()\"\r\n                    (onEndEvent)=\"drawComplete()\">\r\n                </signature-pad>\r\n            </ng-container>\r\n            <div pep-dialog-actions class=\"pep-spacing-element-negative\">\r\n                <button mat-button class=\"pep-spacing-element pep-button md weak\" [disabled]=\"readonly || disabled\"\r\n                    (click)=\"clearSignModal()\">\r\n                    {{ 'ACTIONS.CLEAR' | translate }}\r\n                </button>\r\n                <button mat-button class=\"pep-spacing-element pep-button md strong\" [disabled]=\"readonly || disabled\"\r\n                    (click)=\"saveSignModal($event)\">\r\n                    {{ 'ACTIONS.DONE' | translate }}\r\n                </button>\r\n            </div>\r\n        </pep-dialog>\r\n    </ng-template>\r\n\r\n</ng-container>","styles":[":host{display:block}signature-pad{display:grid;width:inherit;height:inherit}",".pep-signature-container .mat-form-field-flex,.pepperi-signature-container .mat-form-field-flex{padding:0!important}"]}]}],"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.theme.scss

@@ -5,24 +5,4 @@
     .mat-form-field-flex {
         padding: 0 !important;
     }
-}
-
-@mixin pep-signature-component-theme($pepperi-theme) {
-    // .signature-backdrop {
-    //     background-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-60);
-    // }
-
-    // .signature-modal {
-    //     &.modal-dialog {
-    //         .modal-content {
-    //             box-shadow: get-pep-shadow($pepperi-theme, shadow-md, regular);
-
-    //             .modal-header {
-    //                 h3 {
-    //                     color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-    //                 }
-    //             }
-    //         }
-    //     }
-    // }
-}
+}

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":14,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":15,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":17,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":18,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSliderComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSliderComponent"}]}]}],"members":{}},"PepSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"pep-slider","template":"<div class=\"pep-slider-container\">\r\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\r\n    </pep-field-title>\r\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\r\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\r\n    </mat-slider>\r\n</div>","styles":[""]}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":5}}]}],"inputChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":67,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":67,"character":62},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":67,"character":100}]}],"setBackground":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}]}}},"origins":{"PepSliderModule":"./slider.module","PepSliderComponent":"./slider.component"},"importAs":"@pepperi-addons/ngx-lib/slider"}
+{"__symbolic":"module","version":4,"metadata":{"PepSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":14,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":15,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":17,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":18,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSliderComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSliderComponent"}]}]}],"members":{}},"PepSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"pep-slider","template":"<div class=\"pep-slider-container\">\r\n    <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\r\n    </pep-field-title>\r\n    <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\r\n        (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\r\n    </mat-slider>\r\n</div>","styles":["",".pep-slider-container ::ng-deep.mat-slider{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.12)}.pep-slider-container ::ng-deep.mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:calc(.375rem / 2 * -1);left:unset;right:unset;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:calc($sliderSize / 2 * -1);bottom:calc($sliderSize / 2 * -1);transform:scale(.7)!important;border-color:#fff;border-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%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 .125rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-2xs,.125rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}"]}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":5}}]}],"inputChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":67,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":67,"character":62},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":67,"character":100}]}],"setBackground":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}]}}},"origins":{"PepSliderModule":"./slider.module","PepSliderComponent":"./slider.component"},"importAs":"@pepperi-addons/ngx-lib/slider"}

package/slider/slider.component.theme.scss

@@ -1,63 +1,64 @@
-@mixin pep-slider-component-theme($pepperi-theme) {
-    .pep-slider-container {
-        // .mat-slider {
-        //     .mat-slider-wrapper {
-        //         background: linear-gradient(to right,
-        //             hsl(0, 100%, 50%) 0%,
-        //             hsl(60, 100%, 50%) 17%,
-        //             hsl(120, 100%, 50%) 33%,
-        //             hsl(180, 100%, 50%) 50%,
-        //             hsl(240, 100%, 50%) 67%,
-        //             hsl(300, 100%, 50%) 83%,
-        //             hsl(360, 100%, 50%) 100%);
-        //     }
-        // }
+@use '../src/core/style/abstracts/variables';
+@use '../src/core/style/abstracts/functions';
 
-        .mat-slider {
-            background: get-pep-color($pepperi-theme, color-system-primary, color-tran-30);
+.pep-slider-container {
+    // .mat-slider {
+    //     .mat-slider-wrapper {
+    //         background: linear-gradient(to right,
+    //             hsl(0, 100%, 50%) 0%,
+    //             hsl(60, 100%, 50%) 17%,
+    //             hsl(120, 100%, 50%) 33%,
+    //             hsl(180, 100%, 50%) 50%,
+    //             hsl(240, 100%, 50%) 67%,
+    //             hsl(300, 100%, 50%) 83%,
+    //             hsl(360, 100%, 50%) 100%);
+    //     }
+    // }
 
-            &.mat-slider-horizontal {
-                height: 1rem;
-                width: 100%;
-                padding: 0.5rem 0.25rem;
-                border-radius: $border-radius-lg;
-            }
+    ::ng-deep.mat-slider {
+        background: functions.get-pep-color(color-system-primary, color-tran-30);
 
-            .mat-slider-wrapper {
-                $wrapperHeight: 0.375rem;
-                height: $wrapperHeight;
-                position: relative;
-                top: $wrapperHeight / 2 * -1;
-                left: unset;
-                right: unset;
-                border-radius: $border-radius-md;
+        &.mat-slider-horizontal {
+            height: 1rem;
+            width: 100%;
+            padding: 0.5rem 0.25rem;
+            border-radius: variables.$border-radius-lg;
+        }
 
-                .mat-slider-track-wrapper {
-                    display: none;
-                }
+        .mat-slider-wrapper {
+            $wrapperHeight: 0.375rem;
+            height: $wrapperHeight;
+            position: relative;
+            top: calc(#{$wrapperHeight} / 2 * -1);
+            left: unset;
+            right: unset;
+            border-radius: variables.$border-radius-md;
+
+            .mat-slider-track-wrapper {
+                display: none;
+            }
 
-                // .mat-slider-ticks-container {
-                //     // Not in use.
-                // }
+            // .mat-slider-ticks-container {
+            //     // Not in use.
+            // }
 
-                .mat-slider-thumb-container {
-                    width: 94%;
-                    left: 3%;
+            .mat-slider-thumb-container {
+                width: 94%;
+                left: 3%;
 
-                    .mat-slider-thumb {
-                        // position: absolute;
-                        $sliderSize: 18px;
-                        width: $sliderSize;
-                        height: $sliderSize;
-                        right: $sliderSize / 2 * -1;
-                        bottom: $sliderSize / 2 * -1;
-                        transform: scale(.7) !important;
-                        border-color: get-pep-color($pepperi-theme, color-system-primary-invert, color-base); //get-pep-color($pepperi-theme, color-system-primary, color-tran-50);
-                        border-width: 5px;
-                        background-color: transparent !important;
-                        box-shadow: 0 0 0 $spacing-2xs get-pep-color($pepperi-theme, color-text, color-link-focus);
-                        // .default-theme .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb
-                    }
+                .mat-slider-thumb {
+                    // position: absolute;
+                    $sliderSize: 18px;
+                    width: $sliderSize;
+                    height: $sliderSize;
+                    right: calc($sliderSize / 2 * -1);
+                    bottom: calc($sliderSize / 2 * -1);
+                    transform: scale(.7) !important;
+                    border-color: functions.get-pep-color(color-system-primary-invert, color-base); //functions.get-pep-color(color-system-primary, color-tran-50);
+                    border-width: 5px;
+                    background-color: transparent !important;
+                    box-shadow: 0 0 0 variables.$spacing-2xs functions.get-pep-color(color-text, color-link-focus);
+                    // .default-theme .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb
                 }
             }
         }