npm - @pepperi-addons/ngx-lib - Versions diffs - 0.2.60 → 0.2.61-beta.1 - Mend

@pepperi-addons/ngx-lib 0.2.60 → 0.2.61-beta.1

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

Files changed (306) hide show

package/button/button.component.theme.scss CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":15,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":17,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":19,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":20,"character":8}],"exports":[{"__symbolic":"reference","name":"PepButtonComponent"}],"declarations":[{"__symbolic":"reference","name":"PepButtonComponent"}]}]}],"members":{}},"PepButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-button","template":"<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>","styles":[":host{display:grid}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"styleType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"styleStateType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"sizeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"classNames":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"iconName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"iconPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"buttonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":138,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":138,"character":62}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onButtonClicked":[{"__symbolic":"method"}]}},"PepButton":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":9,"character":22,"context":{"typeName":"Partial"},"module":"./button.model"}]}]}},"IPepButtonClickEvent":{"__symbolic":"interface"}},"origins":{"PepButtonModule":"./button.module","PepButtonComponent":"./button.component","PepButton":"./button.model","IPepButtonClickEvent":"./button.model"},"importAs":"@pepperi-addons/ngx-lib/button"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":15,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":17,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":19,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":20,"character":8}],"exports":[{"__symbolic":"reference","name":"PepButtonComponent"}],"declarations":[{"__symbolic":"reference","name":"PepButtonComponent"}]}]}],"members":{}},"PepButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-button","template":"<button mat-button [pepDataQa]=\"key ? key : value\"\n class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\n [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\n <ng-container ngTemplateOutlet=\"contentTemplate\">\n </ng-container>\n</button>\n\n<ng-template #contentTemplate>\n <mat-icon ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n <span ngIf=\"value\" class=\"ellipsis pull-left flip\"\n [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\n {{value}}\n </span>\n <mat-icon ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\n <pep-icon name=\"{{iconName}}\"></pep-icon>\n </mat-icon>\n</ng-template>","styles":[":host{display:grid}",""]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"styleType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"styleStateType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"sizeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"classNames":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":5}}]}],"iconName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"iconPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"buttonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":138,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":138,"character":62}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onButtonClicked":[{"__symbolic":"method"}]}},"PepButton":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":9,"character":22,"context":{"typeName":"Partial"},"module":"./button.model"}]}]}},"IPepButtonClickEvent":{"__symbolic":"interface"}},"origins":{"PepButtonModule":"./button.module","PepButtonComponent":"./button.component","PepButton":"./button.model","IPepButtonClickEvent":"./button.model"},"importAs":"@pepperi-addons/ngx-lib/button"}

package/checkbox/checkbox.component.theme.scss CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepCheckboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":22,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":30,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":31,"character":8}],"exports":[{"__symbolic":"reference","name":"PepCheckboxComponent"}],"declarations":[{"__symbolic":"reference","name":"PepCheckboxComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":37,"character":41}]}]}},"PepCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-checkbox","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-template #pepTemplate>\n <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n 'disable': disabled,\n 'pep-report-checkbox': layoutType === 'table' && !isActive,\n 'pep-card-checkbox': layoutType === 'card',\n 'one-row': rowSpan === 1,\n 'no-title': label.length == 0,\n 'right-alignment pull-right flip': xAlignment == 'right',\n 'center-alignment': xAlignment == 'center'\n }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n <!--\n This is cause a bug that when click on the pep-input area and after on the checkbox\n the value is updated only for the second time.\n (click)=\"toggleChecked($event)\" \n -->\n <ng-container ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n <ng-template #booleanTextTemplate>\n <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' \| translate) : ('CHECKBOX.FALSE' \| translate))\">\n <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n </button>\n <span ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n label }}</span>\n </div>\n </ng-template>\n <ng-template #regularTemplate>\n <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' \| translate) : ('CHECKBOX.FALSE' \| translate))\"\n [checked]=\"value\" [disabled]=\"disabled\">\n <span ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n </mat-checkbox>\n </ng-template>\n </div>\n </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <pep-field-title ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'table'\">\n <ng-container ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n </ng-container>\n <ng-template #itemCampaignBlock>\n <ng-container ngIf=\"value; then trueTemplate; else falseTemplate\">\n </ng-container>\n <ng-template #trueTemplate>\n <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' \| translate }}\">\n <pep-icon name=\"system_bolt\">\n </pep-icon>\n </mat-icon>\n </ng-template>\n <ng-template #falseTemplate>\n <span> </span>\n </ng-template>\n </ng-template>\n <ng-template #checkboxBlock>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </ng-template>\n </ng-container>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"additionalValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":90,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":99,"character":26},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":100,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":101,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":102,"character":27}]}],"setAdditionalValueObject":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onMaterialChange":[{"__symbolic":"method"}],"toggleChecked":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}]}}},"origins":{"PepCheckboxModule":"./checkbox.module","PepCheckboxComponent":"./checkbox.component"},"importAs":"@pepperi-addons/ngx-lib/checkbox"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepCheckboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":22,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":30,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":31,"character":8}],"exports":[{"__symbolic":"reference","name":"PepCheckboxComponent"}],"declarations":[{"__symbolic":"reference","name":"PepCheckboxComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":37,"character":41}]}]}},"PepCheckboxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-checkbox","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-template #pepTemplate>\n <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n 'disable': disabled,\n 'pep-report-checkbox': layoutType === 'table' && !isActive,\n 'pep-card-checkbox': layoutType === 'card',\n 'one-row': rowSpan === 1,\n 'no-title': label.length == 0,\n 'right-alignment pull-right flip': xAlignment == 'right',\n 'center-alignment': xAlignment == 'center'\n }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n <!--\n This is cause a bug that when click on the pep-input area and after on the checkbox\n the value is updated only for the second time.\n (click)=\"toggleChecked($event)\" \n -->\n <ng-container ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n <ng-template #booleanTextTemplate>\n <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' \| translate) : ('CHECKBOX.FALSE' \| translate))\">\n <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n </button>\n <span ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n label }}</span>\n </div>\n </ng-template>\n <ng-template #regularTemplate>\n <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' \| translate) : ('CHECKBOX.FALSE' \| translate))\"\n [checked]=\"value\" [disabled]=\"disabled\">\n <span ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n </mat-checkbox>\n </ng-template>\n </div>\n </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <pep-field-title ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'table'\">\n <ng-container ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n </ng-container>\n <ng-template #itemCampaignBlock>\n <ng-container ngIf=\"value; then trueTemplate; else falseTemplate\">\n </ng-container>\n <ng-template #trueTemplate>\n <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' \| translate }}\">\n <pep-icon name=\"system_bolt\">\n </pep-icon>\n </mat-icon>\n </ng-template>\n <ng-template #falseTemplate>\n <span> </span>\n </ng-template>\n </ng-template>\n <ng-template #checkboxBlock>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </ng-template>\n </ng-container>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}",""]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"additionalValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":90,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":99,"character":26},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":100,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":101,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":102,"character":27}]}],"setAdditionalValueObject":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onMaterialChange":[{"__symbolic":"method"}],"toggleChecked":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}]}}},"origins":{"PepCheckboxModule":"./checkbox.module","PepCheckboxComponent":"./checkbox.component"},"importAs":"@pepperi-addons/ngx-lib/checkbox"}

package/color/color-picker.component.theme.scss CHANGED Viewed

@@ -1,173 +1,168 @@
-@import '../src/core/style/abstracts/variables';
-@mixin pep-color-picker-component-theme($pepperi-theme) {
-    .pepperi-color-picker-container, .pep-color-picker-container {
-        .color-chooser-content {
-            // .current-color {
+@use "sass:math";
+@use '../src/core/style/abstracts/variables';
+@use '../src/core/style/abstracts/functions';
+.pepperi-color-picker-container, .pep-color-picker-container {
+    .color-chooser-content {
+        .current-hue {
+            .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%);
+                }
+            }
+            // &.main {
             // }
-            .current-hue {
+            &.success {
                 .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%);
+                            hsl(70, 100%, 50%) 0%,
+                            hsl(150, 100%, 50%) 100%);
                     }
                 }
-                // &.main {
-                // }
-                &.success {
-                    .mat-slider {
-                        .mat-slider-wrapper {
-                            background: linear-gradient(to right,
-                                hsl(70, 100%, 50%) 0%,
-                                hsl(150, 100%, 50%) 100%);
-                        }
+            }
+            &.caution {
+                .mat-slider {
+                    .mat-slider-wrapper {
+                        background: linear-gradient(to right,
+                            hsl(340, 100%, 50%) 0%,
+                            hsl(20, 100%, 50%) 100%);
                     }
                 }
-                &.caution {
-                    .mat-slider {
-                        .mat-slider-wrapper {
-                            background: linear-gradient(to right,
-                                hsl(340, 100%, 50%) 0%,
-                                hsl(20, 100%, 50%) 100%);
-                        }
-                    }
+            }
+        }
+        .current-saturation {
+            .mat-slider {
+                .mat-slider-wrapper {
+                    background: linear-gradient(to right,
+                        hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%,
+                        hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%);
                 }
             }
-            .current-saturation {
+            // &.main {
+            // }
+            &.success {
                 .mat-slider {
                     .mat-slider-wrapper {
                         background: linear-gradient(to right,
-                            hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%,
+                            hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%,
                             hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%);
                     }
                 }
-                // &.main {
-                // }
-                &.success {
-                    .mat-slider {
-                        .mat-slider-wrapper {
-                            background: linear-gradient(to right,
-                                hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%,
-                                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%);
-                        }
+            }
+            &.caution {
+                .mat-slider {
+                    .mat-slider-wrapper {
+                        background: linear-gradient(to right,
+                            hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%,
+                            hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%);
                     }
                 }
-                &.caution {
-                    .mat-slider {
-                        .mat-slider-wrapper {
-                            background: linear-gradient(to right,
-                                hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%,
-                                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%);
-                        }
-                    }
+            }
+        }
+        .current-lightness {
+            .mat-slider {
+                .mat-slider-wrapper {
+                    background: linear-gradient(to right,
+                        hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%,
+                        hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,
+                        hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 100%);
                 }
             }
-            .current-lightness {
+            // &.main {
+            // }
+            &.success {
                 .mat-slider {
                     .mat-slider-wrapper {
                         background: linear-gradient(to right,
-                            hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%,
-                            hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,
-                            hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 100%);
-                    }
-                }
-                // &.main {
-                // }
-                &.success {
-                    .mat-slider {
-                        .mat-slider-wrapper {
-                            background: linear-gradient(to right,
-                                hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%,
-                                hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%,
-                                hsl(var(--pep-color-picker-current-hue), 100%, 10%) 65%);
-                        }
+                            hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%,
+                            hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%,
+                            hsl(var(--pep-color-picker-current-hue), 100%, 10%) 65%);
                     }
                 }
-                &.caution {
-                    .mat-slider {
-                        .mat-slider-wrapper {
-                            background: linear-gradient(to right,
-                                hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%,
-                                hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,
-                                hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%);
-                        }
+            }
+            &.caution {
+                .mat-slider {
+                    .mat-slider-wrapper {
+                        background: linear-gradient(to right,
+                            hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%,
+                            hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,
+                            hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%);
                     }
                 }
             }
         }
+    }
-        .color-value-content {
-            .color-complient-container {
-                .color-complient {
-                    .mat-icon {
-                        .svg-icon {
-                            fill: get-pep-color($pepperi-theme, color-text, color-invert);
-                        }
+    .color-value-content {
+        .color-complient-container {
+            .color-complient {
+                .mat-icon {
+                    .svg-icon {
+                        fill: functions.get-pep-color(color-text, color-invert);
                     }
                 }
             }
         }
+    }
-        .mat-slider {
-            background: get-pep-color($pepperi-theme, color-system-primary, color-tran-30);
-            &.mat-slider-horizontal {
-                height: 1rem;
-                width: 100%;
-                padding: 0.5rem 0.25rem;
-                border-radius: $border-radius-lg;
-            }
-            .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 {
+        background: functions.get-pep-color(color-system-primary, color-tran-30);
-                .mat-slider-track-wrapper {
-                    display: none;
-                }
+        &.mat-slider-horizontal {
+            height: 1rem;
+            width: 100%;
+            padding: 0.5rem 0.25rem;
+            border-radius: variables.$border-radius-lg;
+        }
-                // .mat-slider-ticks-container {
-                //     // Not in use.
-                // }
+        .mat-slider-wrapper {
+            $wrapperHeight: 0.375rem;
+            height: $wrapperHeight;
+            position: relative;
+            top: calc(math.div($wrapperHeight, 2) * -1);
+            left: unset;
+            right: unset;
+            border-radius: variables.$border-radius-md;
+            .mat-slider-track-wrapper {
+                display: none;
+            }
-                .mat-slider-thumb-container {
-                    width: 94%;
-                    left: 3%;
+            // .mat-slider-ticks-container {
+            //     // Not in use.
+            // }
-                    .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-container {
+                width: 94%;
+                left: 3%;
+                .mat-slider-thumb {
+                    // position: absolute;
+                    $sliderSize: 18px;
+                    width: $sliderSize;
+                    height: $sliderSize;
+                    right: calc(math.div($sliderSize, 2) * -1);
+                    bottom: calc(math.div($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
                 }
             }
         }

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

@@ -14,6 +14,7 @@ export declare class PepColorComponent implements OnInit, OnDestroy {
     rowSpan: number;
     type: PepColorType;
     showTitle: boolean;
+    renderTitle: boolean;
     showAAComplient: boolean;
     layoutType: PepLayoutType;
     valueChange: EventEmitter<string>;

package/color/color.component.theme.scss CHANGED Viewed

@@ -1,7 +0,0 @@
-@mixin pep-color-component-theme($pepperi-theme) {
-    // .pepperi-color, .pep-color {
-    //     .btn-edit {
-    //         box-shadow: unset !important; // Remove the blue focus.
-    //     }
-    // }
-}

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

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepColorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":29,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":37,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":38,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":39,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":40,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":42,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/slider","name":"PepSliderModule","line":45,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":46,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":47,"character":8}],"exports":[{"__symbolic":"reference","name":"PepColorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepColorComponent"},{"__symbolic":"reference","name":"ɵa"}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":54,"character":41}]}]}},"PepColorType":{"__symbolic":"interface"},"PepColorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"pep-color","template":"<pep-field-title [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n <button ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n pepButtonBlur mat-button>\n <mat-icon>\n <pep-icon name=\"system_edit\"></pep-icon>\n </mat-icon>\n </button>\n </div>\n</div>","styles":[":host{display:grid}.pep-color-container .pep-color,.pep-color-container .pepperi-color,.pepperi-color-container .pep-color,.pepperi-color-container .pepperi-color{padding:0;display:grid}.pep-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pepperi-color-container .pepperi-color .btn-edit{width:calc(2.5rem - 1rem);width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 .75rem;margin:0 var(--pep-spacing-md,.75rem);justify-self:end;align-self:center}.pep-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pepperi-color-container.right-alignment .pepperi-color .btn-edit{justify-self:start}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"showAAComplient":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":43,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":44,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":25}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}],"chooseColor":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"template":"<div class=\"pep-color-picker-container\">\n <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' \| translate\">\n <ng-container pep-dialog-content>\n <div class=\"color-chooser-content\">\n <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' \| translate\" [minValue]=\"currentHueMin\"\n [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n (valueChange)=\"onHueChange($event)\">\n </pep-slider>\n <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' \| translate\"\n [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n </pep-slider>\n <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' \| translate\"\n [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n </pep-slider>\n <!-- <div class=\"slider-box current-hue\">\n <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_HUE' \| translate}}</mat-label>\n <div [class]=\"data?.type\">\n <mat-slider [min]=\"currentHueMin\" [max]=\"currentHueMax\" step=\"1\" [value]=\"currentHue\"\n (change)=\"onHueChange($event)\"></mat-slider>\n </div>\n </div> \n <div class=\"slider-box current-saturation\">\n <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_SATURATION' \| translate}}</mat-label>\n <div [class]=\"data?.type\">\n <mat-slider [min]=\"currentSaturationMin\" [max]=\"currentSaturationMax\" step=\"1\"\n [value]=\"currentSaturation\" (change)=\"onSaturationChange($event)\"></mat-slider>\n </div>\n </div>\n <div class=\"slider-box current-lightness\">\n <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_LIGHTNESS' \| translate}}</mat-label>\n <div [class]=\"data?.type\">\n <mat-slider [min]=\"currentLightnessMin\" [max]=\"currentLightnessMax\" step=\"1\"\n [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n (change)=\"onLightnessChange($event)\"></mat-slider>\n </div>\n </div>-->\n </div>\n <div class=\"color-value-content\">\n <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' \| translate \"\n [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n </pep-textbox>\n </div>\n <div ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' \| translate \">\n </pep-field-title>\n <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n <mat-icon ngIf=\"isUserChooseAAComplientColor\">\n <pep-icon name=\"system_ok\">\n </pep-icon>\n </mat-icon>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container pep-dialog-actions>\n <div class=\"color-actions pep-spacing-element-negative\">\n <mat-checkbox ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' \| translate }}</span>\n </mat-checkbox>\n <div>\n <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n {{'ACTIONS.CANCEL' \| translate}}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n {{'ACTIONS.OK' \| translate}}\n </button>\n </div>\n </div>\n </ng-container>\n </pep-dialog>\n</div>","styles":[".mat-slider-horizontal .mat-slider-track-fill,.mat-slider-track-background{display:none}.pep-color-picker-container ::ng-deep.mat-dialog-content,.pepperi-color-picker-container ::ng-deep.mat-dialog-content{padding:.5rem .5rem 0;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-sm,.5rem) 0}.pep-color-picker-container .color-chooser-content,.pepperi-color-picker-container .color-chooser-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:.5rem;margin-top:var(--pep-spacing-sm,.5rem)}.pep-color-picker-container .color-chooser-content .current-color,.pepperi-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:9.25rem;height:9.25rem}.pep-color-picker-container .color-chooser-content .slider-box,.pepperi-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pep-color-picker-container .color-value-content,.pepperi-color-picker-container .color-value-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:1.5rem}.pep-color-picker-container .color-value-content .color-value,.pepperi-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pep-color-picker-container .color-value-content .color-value.with-complient,.pepperi-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pep-color-picker-container .color-value-content .color-complient-container,.pepperi-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pep-color-picker-container .color-value-content .color-complient-container .color-complient,.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);height:2.5rem;height:var(--pep-form-field-height,2.5rem);width:9.25rem}.pep-color-picker-container ::ng-deep.mat-dialog-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions{display:block}.pep-color-picker-container ::ng-deep.mat-dialog-actions .color-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":41,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":41,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepColorService","line":39,"character":30},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵa"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"initVars":[{"__symbolic":"method"}],"setCurrentHueInCss":[{"__symbolic":"method"}],"convertValueStringToColor":[{"__symbolic":"method"}],"convertColorToValueString":[{"__symbolic":"method"}],"onHueChange":[{"__symbolic":"method"}],"onSaturationChange":[{"__symbolic":"method"}],"onLightnessChange":[{"__symbolic":"method"}],"onColorValueChange":[{"__symbolic":"method"}],"onSave":[{"__symbolic":"method"}]},"statics":{"CURRENT_HUE":"--pep-color-picker-current-hue"}}},"origins":{"PepColorModule":"./color.module","PepColorType":"./color.model","PepColorComponent":"./color.component","ɵa":"./color-picker.component"},"importAs":"@pepperi-addons/ngx-lib/color"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepColorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":29,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":37,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":38,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":39,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":40,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":42,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/slider","name":"PepSliderModule","line":45,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":46,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":47,"character":8}],"exports":[{"__symbolic":"reference","name":"PepColorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepColorComponent"},{"__symbolic":"reference","name":"ɵa"}],"entryComponents":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":54,"character":41}]}]}},"PepColorType":{"__symbolic":"interface"},"PepColorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"pep-color","template":"<pep-field-title ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n [showTitle]=\"showTitle\">\n</pep-field-title>\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\n [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\n style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\n <button ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\n pepButtonBlur mat-button>\n <mat-icon>\n <pep-icon name=\"system_edit\"></pep-icon>\n </mat-icon>\n </button>\n </div>\n</div>","styles":[":host{display:grid}.pep-color-container .pep-color,.pep-color-container .pepperi-color,.pepperi-color-container .pep-color,.pepperi-color-container .pepperi-color{padding:0;display:grid}.pep-color-container .pep-color .btn-edit,.pep-color-container .pepperi-color .btn-edit,.pepperi-color-container .pep-color .btn-edit,.pepperi-color-container .pepperi-color .btn-edit{width:calc(2.5rem - 1rem);width:calc(var(--pep-form-field-height, 2.5rem) - var(--pep-spacing-lg, 1rem));min-width:unset;padding:0;margin:0 .75rem;margin:0 var(--pep-spacing-md,.75rem);justify-self:end;align-self:center}.pep-color-container.right-alignment .pep-color .btn-edit,.pep-color-container.right-alignment .pepperi-color .btn-edit,.pepperi-color-container.right-alignment .pep-color .btn-edit,.pepperi-color-container.right-alignment .pepperi-color .btn-edit{justify-self:start}",""]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showAAComplient":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":45,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":46,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":47,"character":25}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}],"chooseColor":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"template":"<div class=\"pep-color-picker-container\">\n <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' \| translate\">\n <ng-container pep-dialog-content>\n <div class=\"color-chooser-content\">\n <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' \| translate\" [minValue]=\"currentHueMin\"\n [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n (valueChange)=\"onHueChange($event)\">\n </pep-slider>\n <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' \| translate\"\n [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n </pep-slider>\n <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' \| translate\"\n [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n </pep-slider>\n <!-- <div class=\"slider-box current-hue\">\n <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_HUE' \| translate}}</mat-label>\n <div [class]=\"data?.type\">\n <mat-slider [min]=\"currentHueMin\" [max]=\"currentHueMax\" step=\"1\" [value]=\"currentHue\"\n (change)=\"onHueChange($event)\"></mat-slider>\n </div>\n </div> \n <div class=\"slider-box current-saturation\">\n <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_SATURATION' \| translate}}</mat-label>\n <div [class]=\"data?.type\">\n <mat-slider [min]=\"currentSaturationMin\" [max]=\"currentSaturationMax\" step=\"1\"\n [value]=\"currentSaturation\" (change)=\"onSaturationChange($event)\"></mat-slider>\n </div>\n </div>\n <div class=\"slider-box current-lightness\">\n <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_LIGHTNESS' \| translate}}</mat-label>\n <div [class]=\"data?.type\">\n <mat-slider [min]=\"currentLightnessMin\" [max]=\"currentLightnessMax\" step=\"1\"\n [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n (change)=\"onLightnessChange($event)\"></mat-slider>\n </div>\n </div>-->\n </div>\n <div class=\"color-value-content\">\n <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' \| translate \"\n [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n </pep-textbox>\n </div>\n <div ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' \| translate \">\n </pep-field-title>\n <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n <mat-icon ngIf=\"isUserChooseAAComplientColor\">\n <pep-icon name=\"system_ok\">\n </pep-icon>\n </mat-icon>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container pep-dialog-actions>\n <div class=\"color-actions pep-spacing-element-negative\">\n <mat-checkbox ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' \| translate }}</span>\n </mat-checkbox>\n <div>\n <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n {{'ACTIONS.CANCEL' \| translate}}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n {{'ACTIONS.OK' \| translate}}\n </button>\n </div>\n </div>\n </ng-container>\n </pep-dialog>\n</div>","styles":[".mat-slider-horizontal .mat-slider-track-fill,.mat-slider-track-background{display:none}.pep-color-picker-container ::ng-deep.mat-dialog-content,.pepperi-color-picker-container ::ng-deep.mat-dialog-content{padding:.5rem .5rem 0;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-sm,.5rem) 0}.pep-color-picker-container .color-chooser-content,.pepperi-color-picker-container .color-chooser-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:.5rem;margin-top:var(--pep-spacing-sm,.5rem)}.pep-color-picker-container .color-chooser-content .current-color,.pepperi-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);width:9.25rem;height:9.25rem}.pep-color-picker-container .color-chooser-content .slider-box,.pepperi-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pep-color-picker-container .color-value-content,.pepperi-color-picker-container .color-value-content{display:-ms-grid;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:1.5rem;grid-column-gap:var(--pep-spacing-xl,1.5rem);grid-row-gap:.5rem;grid-row-gap:var(--pep-spacing-sm,.5rem);margin-top:1.5rem}.pep-color-picker-container .color-value-content .color-value,.pepperi-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pep-color-picker-container .color-value-content .color-value.with-complient,.pepperi-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pep-color-picker-container .color-value-content .color-complient-container,.pepperi-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pep-color-picker-container .color-value-content .color-complient-container .color-complient,.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);height:2.5rem;height:var(--pep-form-field-height,2.5rem);width:9.25rem}.pep-color-picker-container ::ng-deep.mat-dialog-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions{display:block}.pep-color-picker-container ::ng-deep.mat-dialog-actions .color-actions,.pepperi-color-picker-container ::ng-deep.mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}",".pep-color-picker-container .color-chooser-content .current-hue .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-hue .mat-slider .mat-slider-wrapper{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.pep-color-picker-container .color-chooser-content .current-hue.success .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-hue.success .mat-slider .mat-slider-wrapper{background:linear-gradient(90deg,#d5ff00 0,#00ff80)}.pep-color-picker-container .color-chooser-content .current-hue.caution .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-hue.caution .mat-slider .mat-slider-wrapper{background:linear-gradient(90deg,#f05 0,#f50)}.pep-color-picker-container .color-chooser-content .current-saturation .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-saturation .mat-slider .mat-slider-wrapper{background:linear-gradient(to right,hsl(var(--pep-color-picker-current-hue),.01%,50%) 0,hsl(var(--pep-color-picker-current-hue),100%,50%) 100%)}.pep-color-picker-container .color-chooser-content .current-saturation.success .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-saturation.success .mat-slider .mat-slider-wrapper{background:linear-gradient(to right,hsl(var(--pep-color-picker-current-hue),50%,50%) 50%,hsl(var(--pep-color-picker-current-hue),100%,50%) 100%)}.pep-color-picker-container .color-chooser-content .current-saturation.caution .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-saturation.caution .mat-slider .mat-slider-wrapper{background:linear-gradient(to right,hsl(var(--pep-color-picker-current-hue),75%,50%) 75%,hsl(var(--pep-color-picker-current-hue),100%,50%) 100%)}.pep-color-picker-container .color-chooser-content .current-lightness .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-lightness .mat-slider .mat-slider-wrapper{background:linear-gradient(to right,hsl(var(--pep-color-picker-current-hue),100%,100%) 0,hsl(var(--pep-color-picker-current-hue),100%,50%) 50%,hsl(var(--pep-color-picker-current-hue),100%,.01%) 100%)}.pep-color-picker-container .color-chooser-content .current-lightness.success .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-lightness.success .mat-slider .mat-slider-wrapper{background:linear-gradient(to right,hsl(var(--pep-color-picker-current-hue),100%,65%) 10%,hsl(var(--pep-color-picker-current-hue),100%,35%) 35%,hsl(var(--pep-color-picker-current-hue),100%,10%) 65%)}.pep-color-picker-container .color-chooser-content .current-lightness.caution .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .color-chooser-content .current-lightness.caution .mat-slider .mat-slider-wrapper{background:linear-gradient(to right,hsl(var(--pep-color-picker-current-hue),100%,75%) 25%,hsl(var(--pep-color-picker-current-hue),100%,50%) 50%,hsl(var(--pep-color-picker-current-hue),100%,25%) 75%)}.pep-color-picker-container .color-value-content .color-complient-container .color-complient .mat-icon .svg-icon,.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient .mat-icon .svg-icon{fill:#fff;fill:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.pep-color-picker-container .mat-slider,.pepperi-color-picker-container .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-color-picker-container .mat-slider.mat-slider-horizontal,.pepperi-color-picker-container .mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}.pep-color-picker-container .mat-slider .mat-slider-wrapper,.pepperi-color-picker-container .mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:calc(math.div($wrapperHeight, 2) -1);left:unset;right:unset;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.pep-color-picker-container .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper,.pepperi-color-picker-container .mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-color-picker-container .mat-slider .mat-slider-wrapper .mat-slider-thumb-container,.pepperi-color-picker-container .mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-color-picker-container .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb,.pepperi-color-picker-container .mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:calc(math.div($sliderSize, 2) * -1);bottom:calc(math.div($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":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":41,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":41,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepColorService","line":39,"character":30},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵa"}]},{"__symbolic":"reference","name":"any"}]}],"ngOnInit":[{"__symbolic":"method"}],"initVars":[{"__symbolic":"method"}],"setCurrentHueInCss":[{"__symbolic":"method"}],"convertValueStringToColor":[{"__symbolic":"method"}],"convertColorToValueString":[{"__symbolic":"method"}],"onHueChange":[{"__symbolic":"method"}],"onSaturationChange":[{"__symbolic":"method"}],"onLightnessChange":[{"__symbolic":"method"}],"onColorValueChange":[{"__symbolic":"method"}],"onSave":[{"__symbolic":"method"}]},"statics":{"CURRENT_HUE":"--pep-color-picker-current-hue"}}},"origins":{"PepColorModule":"./color.module","PepColorType":"./color.model","PepColorComponent":"./color.component","ɵa":"./color-picker.component"},"importAs":"@pepperi-addons/ngx-lib/color"}

package/core/common/services/addon.service.d.ts CHANGED Viewed

@@ -24,9 +24,8 @@ export declare class PepAddonService {
     getAddonApiCall(addonUUID: string, fileName: string, functionName: string, httpOptions?: {}, isAsync?: boolean): Observable<any>;
     postAddonApiCall(addonUUID: string, fileName: string, functionName: string, body?: {}, httpOptions?: {}, isAsync?: boolean): Observable<any>;
     fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;
-    getNgxLibTranslationResource(subAddonUUID?: string, libName?: string): ITranslationResource;
+    getNgxLibTranslationResource(subAddonUUID?: string): ITranslationResource;
     getAddonTranslationResource(subAddonUUID?: string): ITranslationResource;
     setDefaultTranslateLang(translate: TranslateService, urlLangParam?: string): void;
     static createDefaultMultiTranslateLoader(http: HttpClient, fileService: PepFileService, addonService: PepAddonService, subAddonUUID?: string): import("ngx-translate-multi-http-loader").MultiTranslateHttpLoader;
-    static createMultiTranslateLoader(addonService: PepAddonService, libsName?: string[], subAddonUUID?: string): import("ngx-translate-multi-http-loader").MultiTranslateHttpLoader;
 }

package/core/common/services/file.service.d.ts CHANGED Viewed

@@ -16,9 +16,9 @@ export declare class PepFileService {
     getFileExtension(filePath: string): string;
     isValidUrl(url: string): boolean;
     convertFromb64toBlob(b64Data: any, contentType?: string, sliceSize?: number): Blob;
-    getAssetsPath(assetsDomain?: string, libName?: string): string;
-    getAssetsTranslationsSuffix(libName?: string): string;
-    getAssetsTranslationsPath(assetsDomain?: string, libName?: string): string;
-    getAssetsImagesPath(assetsDomain?: string, image?: string, libName?: string): string;
+    getAssetsPath(assetsDomain?: string): string;
+    getAssetsTranslationsSuffix(): string;
+    getAssetsTranslationsPath(assetsDomain?: string): string;
+    getAssetsImagesPath(assetsDomain?: string, image?: string): string;
     getSvgAsImageSrc(svg: string): string;
 }

package/core/customization/customization.service.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export declare class PepCustomizationService {
     private fileService;
     fb: FormBuilder;
     static STAND_ALONE_FIELD_CLASS_NAME: string;
+    static STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME: string;
     static REM_STRING: string;
     static PX_STRING: string;
     static USER_THEME: string;