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

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

@@ -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\"\r\n    class=\"pep-button {{ sizeType }} {{ styleType }} {{ styleStateType }} {{ classNames }}\"\r\n    [ngClass]=\"{ 'icon-button': iconName && !value }\" [disabled]=\"disabled\" (click)=\"onButtonClicked($event)\">\r\n    <ng-container *ngTemplateOutlet=\"contentTemplate\">\r\n    </ng-container>\r\n</button>\r\n\r\n<ng-template #contentTemplate>\r\n    <mat-icon *ngIf=\"iconName && iconPosition === 'start'\" [ngClass]=\"{ 'pull-left flip': value }\">\r\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\r\n    </mat-icon>\r\n    <span *ngIf=\"value\" class=\"ellipsis pull-left flip\"\r\n        [ngClass]=\"{ 'button-title-with-icon': iconName, 'icon-before': iconPosition === 'start' }\" [title]=\"value\">\r\n        {{value}}\r\n    </span>\r\n    <mat-icon *ngIf=\"iconName && iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': value }\">\r\n        <pep-icon name=\"{{iconName}}\"></pep-icon>\r\n    </mat-icon>\r\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"}
+{"__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/pepperi-addons-ngx-lib-checkbox.metadata.json

@@ -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\">\r\n    <ng-template #pepTemplate>\r\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\r\n                'disable': disabled,\r\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\r\n                'pep-card-checkbox': layoutType === 'card',\r\n                'one-row': rowSpan === 1,\r\n                'no-title': label.length == 0,\r\n                'right-alignment pull-right flip': xAlignment == 'right',\r\n                'center-alignment': xAlignment == 'center'\r\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\r\n            <!--\r\n                This is cause a bug that when click on the pep-input area and after on the checkbox\r\n                the value is updated only for the second time.\r\n                (click)=\"toggleChecked($event)\" \r\n            -->\r\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\r\n            <ng-template #booleanTextTemplate>\r\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\r\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\r\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\r\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\r\n                    </button>\r\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\r\n                        label }}</span>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #regularTemplate>\r\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\r\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\r\n                    [checked]=\"value\" [disabled]=\"disabled\">\r\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\r\n                </mat-checkbox>\r\n            </ng-template>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\r\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\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 *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'table'\">\r\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\r\n        </ng-container>\r\n        <ng-template #itemCampaignBlock>\r\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\r\n            </ng-container>\r\n            <ng-template #trueTemplate>\r\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\r\n                    <pep-icon name=\"system_bolt\">\r\n                    </pep-icon>\r\n                </mat-icon>\r\n            </ng-template>\r\n            <ng-template #falseTemplate>\r\n                <span>&nbsp;</span>\r\n            </ng-template>\r\n        </ng-template>\r\n        <ng-template #checkboxBlock>\r\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\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":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"}
+{"__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>&nbsp;</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

@@ -1,169 +1,170 @@
-@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 {
-            // }
-            &.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%);
-                    }
-                }
-            }
-        }
-
-        .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%);
-                }
-            }
-
-            // &.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%);
-                    }
-                }
-            }
-        }
-
-        .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%);
-                }
-            }
-
-            // &.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%);
-                    }
-                }
-            }
-            &.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: functions.get-pep-color(color-text, color-invert);
-                    }
-                }
-            }
-        }
-    }
-
-    .mat-slider {
-        background: functions.get-pep-color(color-system-primary, color-tran-30);
-
-        &.mat-slider-horizontal {
-            height: 1rem;
-            width: 100%;
-            padding: 0.5rem 0.25rem;
-            border-radius: variables.$border-radius-lg;
-        }
-
-        .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-thumb-container {
-                width: 94%;
-                left: 3%;
-
-                .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
-                }
-            }
-        }
-    }
-}
+@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 {
+            // }
+            &.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%);
+                    }
+                }
+            }
+        }
+
+        .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%);
+                }
+            }
+
+            // &.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%);
+                    }
+                }
+            }
+        }
+
+        .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%);
+                }
+            }
+
+            // &.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%);
+                    }
+                }
+            }
+            &.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: functions.get-pep-color(color-text, color-invert);
+                    }
+                }
+            }
+        }
+    }
+
+    .mat-slider {
+        background: functions.get-pep-color(color-system-primary, color-tran-30);
+
+        &.mat-slider-horizontal {
+            height: 1rem;
+            width: 100%;
+            padding: 0.5rem 0.25rem;
+            border-radius: variables.$border-radius-lg;
+        }
+
+        .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-ticks-container {
+            //     // Not in use.
+            // }
+
+            .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/pepperi-addons-ngx-lib-color.metadata.json

@@ -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 *ngIf=\"renderTitle\" [label]=\"label\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\r\n    [showTitle]=\"showTitle\">\r\n</pep-field-title>\r\n<div [id]=\"key\" class=\"pep-color-container\" [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\r\n    <div pepRtlDirection (click)=\"!disabled ? chooseColor() : ''\" class=\"pep-color pep-input\"\r\n        [ngClass]=\"{disable: disabled, 'one-row': rowSpan === 1}\"\r\n        style=\"background: {{ value ? value + '!important' : 'transparent' }}; opacity: {{ disabled && value ? 0.12 : 1}};\">\r\n        <button *ngIf=\"!disabled\" class=\"pep-button icon-button xs weak invert mat-button btn-edit\" tabindex=\"-1\"\r\n            pepButtonBlur mat-button>\r\n            <mat-icon>\r\n                <pep-icon name=\"system_edit\"></pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n    </div>\r\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\">\r\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\">\r\n        <ng-container pep-dialog-content>\r\n            <div class=\"color-chooser-content\">\r\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\r\n\r\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\r\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\r\n                    (valueChange)=\"onHueChange($event)\">\r\n                </pep-slider>\r\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\r\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\r\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\r\n                </pep-slider>\r\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\r\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\r\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\r\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\r\n                </pep-slider>\r\n                <!-- <div class=\"slider-box current-hue\">\r\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_HUE' | translate}}</mat-label>\r\n                    <div [class]=\"data?.type\">\r\n                        <mat-slider [min]=\"currentHueMin\" [max]=\"currentHueMax\" step=\"1\" [value]=\"currentHue\"\r\n                            (change)=\"onHueChange($event)\"></mat-slider>\r\n                    </div>\r\n                </div> \r\n                <div class=\"slider-box current-saturation\">\r\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_SATURATION' | translate}}</mat-label>\r\n                    <div [class]=\"data?.type\">\r\n                        <mat-slider [min]=\"currentSaturationMin\" [max]=\"currentSaturationMax\" step=\"1\"\r\n                            [value]=\"currentSaturation\" (change)=\"onSaturationChange($event)\"></mat-slider>\r\n                    </div>\r\n                </div>\r\n                <div class=\"slider-box current-lightness\">\r\n                    <mat-label class=\"body-xs \">{{ 'COLOR.CHANGE_LIGHTNESS' | translate}}</mat-label>\r\n                    <div [class]=\"data?.type\">\r\n                        <mat-slider [min]=\"currentLightnessMin\" [max]=\"currentLightnessMax\" step=\"1\"\r\n                            [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\r\n                            (change)=\"onLightnessChange($event)\"></mat-slider>\r\n                    </div>\r\n                </div>-->\r\n            </div>\r\n            <div class=\"color-value-content\">\r\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\r\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\r\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\r\n                    </pep-textbox>\r\n                </div>\r\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\r\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\r\n                    </pep-field-title>\r\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\r\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\r\n                            <pep-icon name=\"system_ok\">\r\n                            </pep-icon>\r\n                        </mat-icon>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n        <ng-container pep-dialog-actions>\r\n            <div class=\"color-actions pep-spacing-element-negative\">\r\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\r\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\r\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\r\n                </mat-checkbox>\r\n                <div>\r\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\r\n                        {{'ACTIONS.CANCEL' | translate}}\r\n                    </button>\r\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\r\n                        {{'ACTIONS.OK' | translate}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </pep-dialog>\r\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($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($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":{"__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"}
+{"__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

@@ -24,8 +24,9 @@ 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): ITranslationResource;
+    getNgxLibTranslationResource(subAddonUUID?: string, libName?: 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;
 }