@pepperi-addons/ngx-lib 0.2.58 → 0.2.59
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.
- package/bundles/pepperi-addons-ngx-lib-color.umd.js.map +1 -1
- package/bundles/pepperi-addons-ngx-lib.umd.js +100 -82
- package/bundles/pepperi-addons-ngx-lib.umd.js.map +1 -1
- package/core/common/services/color.service.d.ts +3 -3
- package/esm2015/color/public-api.js +1 -2
- package/esm2015/core/common/services/color.service.js +101 -83
- package/fesm2015/pepperi-addons-ngx-lib-color.js.map +1 -1
- package/fesm2015/pepperi-addons-ngx-lib.js +100 -82
- package/fesm2015/pepperi-addons-ngx-lib.js.map +1 -1
- package/package.json +1 -1
- package/pepperi-addons-ngx-lib.metadata.json +1 -1
- package/src/core/style/abstracts/mixins.scss +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pepperi-addons-ngx-lib-color.umd.js","sources":["../../../projects/ngx-lib/color/color-picker.component.ts","../../../projects/ngx-lib/color/color.component.ts","../../../projects/ngx-lib/color/color.module.ts","../../../projects/ngx-lib/color/public-api.ts","../../../projects/ngx-lib/color/pepperi-addons-ngx-lib-color.ts"],"sourcesContent":["import { Component, OnInit, Inject } from '@angular/core';\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\n// import {\n// hex2hsl,\n// hslString2hsl,\n// rgbString2hsl,\n// IPepHslColor,\n// findClosestAccessibleColor,\n// hsl2hex,\n// convertHslToStringHsl,\n// } from './color-utils';\nimport { PepColorService, IPepHslColor } from '@pepperi-addons/ngx-lib';\n\nimport { PepColorType } from './color.model';\n\nenum PepContrastRatioType {\n AA = 4.5,\n AAA = 7,\n}\n\ninterface IPepColorPickerDialogData {\n value: string;\n type: PepColorType;\n showAAComplient: boolean;\n textColor: string;\n contrastRatio: PepContrastRatioType;\n}\n\n@Component({\n templateUrl: './color-picker.component.html',\n styleUrls: ['./color-picker.component.scss'],\n})\nexport class PepColorPickerComponent implements OnInit {\n static CURRENT_HUE = '--pep-color-picker-current-hue';\n private readonly defaultColor = '#ccc';\n\n checkAAComplient = true;\n\n constructor(\n private colorService: PepColorService,\n private dialogRef: MatDialogRef<PepColorPickerComponent>,\n @Inject(MAT_DIALOG_DATA) public data: IPepColorPickerDialogData\n ) {\n this.data.type = data ? data.type : 'any';\n this.data.showAAComplient = !data\n ? false\n : data.showAAComplient ?? true;\n this.data.textColor = data && data.textColor ? data.textColor : '#fff';\n this.data.contrastRatio =\n data && data.contrastRatio\n ? data.contrastRatio\n : PepContrastRatioType.AA;\n }\n\n private defaultHueBackground = `linear-gradient(to right,\n hsl(0, 100%, 50%) 0%,\n hsl(60, 100%, 50%) 17%,\n hsl(120, 100%, 50%) 33%,\n hsl(180, 100%, 50%) 50%,\n hsl(240, 100%, 50%) 67%,\n hsl(300, 100%, 50%) 83%,\n hsl(360, 100%, 50%) 100%)`;\n\n currentHue = 100;\n currentHueMin = 0;\n currentHueMax = 360;\n currentHueBackground = this.defaultHueBackground;\n\n private defaultSaturationBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;\n\n currentSaturation = 50;\n currentSaturationMin = 0;\n currentSaturationMax = 100;\n currentSaturationBackground = this.defaultSaturationBackground;\n\n private defaultLightnessBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 100%)`;\n\n currentLightness = 50;\n currentLightnessMin = 0;\n currentLightnessMax = 100;\n currentLightnessBackground = this.defaultLightnessBackground;\n\n complientColor: string;\n isUserChooseAAComplientColor: boolean;\n\n ngOnInit(): void {\n this.initVars();\n this.checkAAComplient = this.data.showAAComplient;\n this.convertValueStringToColor(this.data.value);\n }\n\n initVars(): void {\n if (this.data.type === 'main') {\n this.currentLightnessMax = 10;\n this.currentLightness = 5;\n this.currentHueBackground = this.defaultHueBackground;\n this.currentSaturationBackground = this.defaultSaturationBackground;\n this.currentLightnessBackground = this.defaultLightnessBackground;\n } else if (this.data.type === 'success') {\n this.currentHueMin = 70;\n this.currentHueMax = 150;\n this.currentHue = 100;\n\n this.currentSaturationMin = 50;\n this.currentSaturationMax = 100;\n this.currentSaturation = 50;\n\n this.currentLightnessMin = 10;\n this.currentLightnessMax = 65;\n this.currentLightness = 50;\n\n this.currentHueBackground = `linear-gradient(to right,\n hsl(70, 100%, 50%) 0%,\n hsl(150, 100%, 50%) 100%)`;\n this.currentSaturationBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;\n this.currentLightnessBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%,\n hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%,\n hsl(var(--pep-color-picker-current-hue), 100%, 10%) 65%)`;\n\n } else if (this.data.type === 'caution') {\n this.currentHueMin = -20;\n this.currentHueMax = 20;\n this.currentHue = 10;\n\n this.currentSaturationMin = 75;\n this.currentSaturationMax = 100;\n this.currentSaturation = 75;\n\n this.currentLightnessMin = 25;\n this.currentLightnessMax = 75;\n this.currentLightness = 50;\n\n this.currentHueBackground = `linear-gradient(to right,\n hsl(340, 100%, 50%) 0%,\n hsl(20, 100%, 50%) 100%)`;\n this.currentSaturationBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;\n this.currentLightnessBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%)`;\n }\n }\n\n setCurrentHueInCss(): void {\n document.documentElement.style.setProperty(\n PepColorPickerComponent.CURRENT_HUE,\n this.currentHue.toString()\n );\n }\n\n convertValueStringToColor(color): void {\n if (color.indexOf('hsl') === 0) {\n const hsl = this.colorService.hslString2hsl(color);\n this.convertColorToValueString(hsl);\n } else if (color.indexOf('rgb') === 0) {\n const hsl = this.colorService.rgbString2hsl(color);\n this.convertColorToValueString(hsl);\n } else if (color.indexOf('#') === 0) {\n const hsl = this.colorService.hex2hsl(color);\n this.convertColorToValueString(hsl);\n } else {\n // Handle default.\n const hsl = this.colorService.hex2hsl(this.defaultColor);\n this.convertColorToValueString(hsl);\n }\n\n this.setCurrentHueInCss();\n }\n\n convertColorToValueString(hslColor: IPepHslColor): void {\n // Regular hue\n if (\n hslColor.h >= this.currentHueMin &&\n hslColor.h <= this.currentHueMax\n ) {\n this.currentHue = hslColor.h;\n } else if (\n this.currentHueMin < 0 &&\n hslColor.h >= 0 &&\n hslColor.h <= 360\n ) {\n // For min with - (change to the other side of the circle)\n hslColor.h = hslColor.h - 360;\n\n if (\n hslColor.h >= this.currentHueMin &&\n hslColor.h <= this.currentHueMax\n ) {\n this.currentHue = hslColor.h;\n }\n }\n\n this.currentSaturation =\n hslColor.s >= this.currentSaturationMin &&\n hslColor.s <= this.currentSaturationMax\n ? hslColor.s\n : this.currentSaturation;\n\n this.currentLightness =\n hslColor.l >= this.currentLightnessMin &&\n hslColor.l <= this.currentLightnessMax\n ? hslColor.l\n : this.currentLightness;\n\n // Write the value (if hue is changed to the other side of the circle return it back).\n const hsl = {\n h: this.currentHue,\n s: this.currentSaturation,\n l: this.currentLightness,\n };\n this.data.value = this.colorService.convertHslToStringHsl(hsl);\n\n // Check the contrast ratio - set the closest accessible color to complientColor\n // and update isUserChooseAAComplientColor.\n const adjustableColor = this.colorService.hsl2hex(hsl);\n const closestHex = this.colorService.findClosestAccessibleColor(\n adjustableColor,\n this.data.textColor,\n this.data.contrastRatio\n );\n\n this.isUserChooseAAComplientColor = adjustableColor === closestHex;\n this.complientColor = this.colorService.convertHslToStringHsl(\n this.colorService.hex2hsl(closestHex)\n );\n }\n\n onHueChange(value): void {\n this.convertColorToValueString({ h: value });\n this.setCurrentHueInCss();\n }\n\n onSaturationChange(value): void {\n // this.currentSaturation = event.value;\n this.convertColorToValueString({ s: value });\n }\n\n onLightnessChange(value): void {\n // this.currentLightness = event.value;\n this.convertColorToValueString({\n l:\n this.currentLightnessMax -\n value +\n this.currentLightnessMin,\n });\n }\n\n onColorValueChange(event): void {\n this.convertValueStringToColor(event.value);\n }\n\n onSave(event): void {\n const color = this.checkAAComplient\n ? this.complientColor\n : this.data.value;\n\n // this.notify.emit({ key: this.key, value: color });\n this.dialogRef.close(color);\n }\n}\n","import {\n Component,\n OnInit,\n Input,\n Output,\n Renderer2,\n ElementRef,\n EventEmitter,\n OnChanges,\n OnDestroy,\n} from '@angular/core';\nimport {\n PepCustomizationService,\n PepLayoutType,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepColorPickerComponent } from './color-picker.component';\nimport { PepColorType } from './color.model';\n\n@Component({\n selector: 'pep-color',\n templateUrl: './color.component.html',\n styleUrls: ['./color.component.scss'],\n})\nexport class PepColorComponent implements OnInit, OnDestroy {\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\n @Input() disabled = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n @Input() rowSpan = 1;\n @Input() type: PepColorType = 'any';\n\n @Input() showTitle = true;\n @Input() showAAComplient = true;\n @Input() layoutType: PepLayoutType = 'form';\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n constructor(\n private dialogService: PepDialogService,\n private renderer: Renderer2,\n private element: ElementRef\n ) {}\n\n ngOnInit(): void {\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n }\n\n ngOnDestroy(): void {\n //\n }\n\n changeColor(value: any): void {\n this.value = value;\n this.valueChange.emit(value);\n }\n\n chooseColor(): void {\n const dialogRef = this.dialogService.openDialog(\n PepColorPickerComponent,\n {\n value: this.value,\n type: this.type,\n showAAComplient: this.showAAComplient,\n }\n );\n\n dialogRef.afterClosed().subscribe((value) => {\n if (value !== undefined && value !== null) {\n this.changeColor(value);\n }\n });\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSliderModule } from '@angular/material/slider';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';\n\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n pepIconSystemOk,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\n\nimport { PepColorComponent } from './color.component';\nimport { PepColorPickerComponent } from './color-picker.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatCheckboxModule,\n MatDialogModule,\n MatIconModule,\n MatSliderModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepDialogModule,\n PepIconModule,\n PepSliderModule,\n PepFieldTitleModule,\n PepTextboxModule,\n ],\n exports: [PepColorComponent],\n declarations: [PepColorComponent, PepColorPickerComponent],\n entryComponents: [PepColorPickerComponent],\n})\nexport class PepColorModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemEdit,\n pepIconSystemOk,\n pepIconSystemClose,\n ]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/color\n */\nexport * from './color.module';\nexport * from './color.model';\n// export * from './color-utils';\nexport * from './color.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepColorPickerComponent as ɵa} from './color-picker.component';"],"names":["Component","PepColorService","MatDialogRef","Inject","MAT_DIALOG_DATA","DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepCustomizationService","PepDialogService","Renderer2","ElementRef","Input","Output","pepIconSystemEdit","pepIconSystemOk","pepIconSystemClose","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatButtonModule","MatFormFieldModule","MatCheckboxModule","MatDialogModule","MatIconModule","MatSliderModule","PepNgxLibModule","PepDialogModule","PepIconModule","PepSliderModule","PepFieldTitleModule","PepTextboxModule","PepIconRegistry"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pepperi-addons-ngx-lib-color.umd.js","sources":["../../../projects/ngx-lib/color/color-picker.component.ts","../../../projects/ngx-lib/color/color.component.ts","../../../projects/ngx-lib/color/color.module.ts","../../../projects/ngx-lib/color/public-api.ts","../../../projects/ngx-lib/color/pepperi-addons-ngx-lib-color.ts"],"sourcesContent":["import { Component, OnInit, Inject } from '@angular/core';\nimport { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';\n// import {\n// hex2hsl,\n// hslString2hsl,\n// rgbString2hsl,\n// IPepHslColor,\n// findClosestAccessibleColor,\n// hsl2hex,\n// convertHslToStringHsl,\n// } from './color-utils';\nimport { PepColorService, IPepHslColor } from '@pepperi-addons/ngx-lib';\n\nimport { PepColorType } from './color.model';\n\nenum PepContrastRatioType {\n AA = 4.5,\n AAA = 7,\n}\n\ninterface IPepColorPickerDialogData {\n value: string;\n type: PepColorType;\n showAAComplient: boolean;\n textColor: string;\n contrastRatio: PepContrastRatioType;\n}\n\n@Component({\n templateUrl: './color-picker.component.html',\n styleUrls: ['./color-picker.component.scss'],\n})\nexport class PepColorPickerComponent implements OnInit {\n static CURRENT_HUE = '--pep-color-picker-current-hue';\n private readonly defaultColor = '#ccc';\n\n checkAAComplient = true;\n\n constructor(\n private colorService: PepColorService,\n private dialogRef: MatDialogRef<PepColorPickerComponent>,\n @Inject(MAT_DIALOG_DATA) public data: IPepColorPickerDialogData\n ) {\n this.data.type = data ? data.type : 'any';\n this.data.showAAComplient = !data\n ? false\n : data.showAAComplient ?? true;\n this.data.textColor = data && data.textColor ? data.textColor : '#fff';\n this.data.contrastRatio =\n data && data.contrastRatio\n ? data.contrastRatio\n : PepContrastRatioType.AA;\n }\n\n private defaultHueBackground = `linear-gradient(to right,\n hsl(0, 100%, 50%) 0%,\n hsl(60, 100%, 50%) 17%,\n hsl(120, 100%, 50%) 33%,\n hsl(180, 100%, 50%) 50%,\n hsl(240, 100%, 50%) 67%,\n hsl(300, 100%, 50%) 83%,\n hsl(360, 100%, 50%) 100%)`;\n\n currentHue = 100;\n currentHueMin = 0;\n currentHueMax = 360;\n currentHueBackground = this.defaultHueBackground;\n\n private defaultSaturationBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 0.01%, 50%) 0%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;\n\n currentSaturation = 50;\n currentSaturationMin = 0;\n currentSaturationMax = 100;\n currentSaturationBackground = this.defaultSaturationBackground;\n\n private defaultLightnessBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 100%, 100%) 0%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n hsl(var(--pep-color-picker-current-hue), 100%, 0.01%) 100%)`;\n\n currentLightness = 50;\n currentLightnessMin = 0;\n currentLightnessMax = 100;\n currentLightnessBackground = this.defaultLightnessBackground;\n\n complientColor: string;\n isUserChooseAAComplientColor: boolean;\n\n ngOnInit(): void {\n this.initVars();\n this.checkAAComplient = this.data.showAAComplient;\n this.convertValueStringToColor(this.data.value);\n }\n\n initVars(): void {\n if (this.data.type === 'main') {\n this.currentLightnessMax = 10;\n this.currentLightness = 5;\n this.currentHueBackground = this.defaultHueBackground;\n this.currentSaturationBackground = this.defaultSaturationBackground;\n this.currentLightnessBackground = this.defaultLightnessBackground;\n } else if (this.data.type === 'success') {\n this.currentHueMin = 70;\n this.currentHueMax = 150;\n this.currentHue = 100;\n\n this.currentSaturationMin = 50;\n this.currentSaturationMax = 100;\n this.currentSaturation = 50;\n\n this.currentLightnessMin = 10;\n this.currentLightnessMax = 65;\n this.currentLightness = 50;\n\n this.currentHueBackground = `linear-gradient(to right,\n hsl(70, 100%, 50%) 0%,\n hsl(150, 100%, 50%) 100%)`;\n this.currentSaturationBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 50%, 50%) 50%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;\n this.currentLightnessBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 100%, 65%) 10%,\n hsl(var(--pep-color-picker-current-hue), 100%, 35%) 35%,\n hsl(var(--pep-color-picker-current-hue), 100%, 10%) 65%)`;\n\n } else if (this.data.type === 'caution') {\n this.currentHueMin = -20;\n this.currentHueMax = 20;\n this.currentHue = 10;\n\n this.currentSaturationMin = 75;\n this.currentSaturationMax = 100;\n this.currentSaturation = 75;\n\n this.currentLightnessMin = 25;\n this.currentLightnessMax = 75;\n this.currentLightness = 50;\n\n this.currentHueBackground = `linear-gradient(to right,\n hsl(340, 100%, 50%) 0%,\n hsl(20, 100%, 50%) 100%)`;\n this.currentSaturationBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 75%, 50%) 75%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 100%)`;\n this.currentLightnessBackground = `linear-gradient(to right,\n hsl(var(--pep-color-picker-current-hue), 100%, 75%) 25%,\n hsl(var(--pep-color-picker-current-hue), 100%, 50%) 50%,\n hsl(var(--pep-color-picker-current-hue), 100%, 25%) 75%)`;\n }\n }\n\n setCurrentHueInCss(): void {\n document.documentElement.style.setProperty(\n PepColorPickerComponent.CURRENT_HUE,\n this.currentHue.toString()\n );\n }\n\n convertValueStringToColor(color): void {\n if (color.indexOf('hsl') === 0) {\n const hsl = this.colorService.hslString2hsl(color);\n this.convertColorToValueString(hsl);\n } else if (color.indexOf('rgb') === 0) {\n const hsl = this.colorService.rgbString2hsl(color);\n this.convertColorToValueString(hsl);\n } else if (color.indexOf('#') === 0) {\n const hsl = this.colorService.hex2hsl(color);\n this.convertColorToValueString(hsl);\n } else {\n // Handle default.\n const hsl = this.colorService.hex2hsl(this.defaultColor);\n this.convertColorToValueString(hsl);\n }\n\n this.setCurrentHueInCss();\n }\n\n convertColorToValueString(hslColor: IPepHslColor): void {\n // Regular hue\n if (\n hslColor.h >= this.currentHueMin &&\n hslColor.h <= this.currentHueMax\n ) {\n this.currentHue = hslColor.h;\n } else if (\n this.currentHueMin < 0 &&\n hslColor.h >= 0 &&\n hslColor.h <= 360\n ) {\n // For min with - (change to the other side of the circle)\n hslColor.h = hslColor.h - 360;\n\n if (\n hslColor.h >= this.currentHueMin &&\n hslColor.h <= this.currentHueMax\n ) {\n this.currentHue = hslColor.h;\n }\n }\n\n this.currentSaturation =\n hslColor.s >= this.currentSaturationMin &&\n hslColor.s <= this.currentSaturationMax\n ? hslColor.s\n : this.currentSaturation;\n\n this.currentLightness =\n hslColor.l >= this.currentLightnessMin &&\n hslColor.l <= this.currentLightnessMax\n ? hslColor.l\n : this.currentLightness;\n\n // Write the value (if hue is changed to the other side of the circle return it back).\n const hsl = {\n h: this.currentHue,\n s: this.currentSaturation,\n l: this.currentLightness,\n };\n this.data.value = this.colorService.convertHslToStringHsl(hsl);\n\n // Check the contrast ratio - set the closest accessible color to complientColor\n // and update isUserChooseAAComplientColor.\n const adjustableColor = this.colorService.hsl2hex(hsl);\n const closestHex = this.colorService.findClosestAccessibleColor(\n adjustableColor,\n this.data.textColor,\n this.data.contrastRatio\n );\n\n this.isUserChooseAAComplientColor = adjustableColor === closestHex;\n this.complientColor = this.colorService.convertHslToStringHsl(\n this.colorService.hex2hsl(closestHex)\n );\n }\n\n onHueChange(value): void {\n this.convertColorToValueString({ h: value });\n this.setCurrentHueInCss();\n }\n\n onSaturationChange(value): void {\n // this.currentSaturation = event.value;\n this.convertColorToValueString({ s: value });\n }\n\n onLightnessChange(value): void {\n // this.currentLightness = event.value;\n this.convertColorToValueString({\n l:\n this.currentLightnessMax -\n value +\n this.currentLightnessMin,\n });\n }\n\n onColorValueChange(event): void {\n this.convertValueStringToColor(event.value);\n }\n\n onSave(event): void {\n const color = this.checkAAComplient\n ? this.complientColor\n : this.data.value;\n\n // this.notify.emit({ key: this.key, value: color });\n this.dialogRef.close(color);\n }\n}\n","import {\n Component,\n OnInit,\n Input,\n Output,\n Renderer2,\n ElementRef,\n EventEmitter,\n OnChanges,\n OnDestroy,\n} from '@angular/core';\nimport {\n PepCustomizationService,\n PepLayoutType,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepColorPickerComponent } from './color-picker.component';\nimport { PepColorType } from './color.model';\n\n@Component({\n selector: 'pep-color',\n templateUrl: './color.component.html',\n styleUrls: ['./color.component.scss'],\n})\nexport class PepColorComponent implements OnInit, OnDestroy {\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\n @Input() disabled = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n @Input() rowSpan = 1;\n @Input() type: PepColorType = 'any';\n\n @Input() showTitle = true;\n @Input() showAAComplient = true;\n @Input() layoutType: PepLayoutType = 'form';\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n constructor(\n private dialogService: PepDialogService,\n private renderer: Renderer2,\n private element: ElementRef\n ) {}\n\n ngOnInit(): void {\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n }\n\n ngOnDestroy(): void {\n //\n }\n\n changeColor(value: any): void {\n this.value = value;\n this.valueChange.emit(value);\n }\n\n chooseColor(): void {\n const dialogRef = this.dialogService.openDialog(\n PepColorPickerComponent,\n {\n value: this.value,\n type: this.type,\n showAAComplient: this.showAAComplient,\n }\n );\n\n dialogRef.afterClosed().subscribe((value) => {\n if (value !== undefined && value !== null) {\n this.changeColor(value);\n }\n });\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSliderModule } from '@angular/material/slider';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\nimport { PepSliderModule } from '@pepperi-addons/ngx-lib/slider';\n\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n pepIconSystemOk,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\n\nimport { PepColorComponent } from './color.component';\nimport { PepColorPickerComponent } from './color-picker.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatCheckboxModule,\n MatDialogModule,\n MatIconModule,\n MatSliderModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepDialogModule,\n PepIconModule,\n PepSliderModule,\n PepFieldTitleModule,\n PepTextboxModule,\n ],\n exports: [PepColorComponent],\n declarations: [PepColorComponent, PepColorPickerComponent],\n entryComponents: [PepColorPickerComponent],\n})\nexport class PepColorModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemEdit,\n pepIconSystemOk,\n pepIconSystemClose,\n ]);\n }\n}\n","/*\n * Public API Surface of ngx-lib/color\n */\nexport * from './color.module';\nexport * from './color.model';\nexport * from './color.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n\nexport {PepColorPickerComponent as ɵa} from './color-picker.component';"],"names":["Component","PepColorService","MatDialogRef","Inject","MAT_DIALOG_DATA","DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","PepCustomizationService","PepDialogService","Renderer2","ElementRef","Input","Output","pepIconSystemEdit","pepIconSystemOk","pepIconSystemClose","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatButtonModule","MatFormFieldModule","MatCheckboxModule","MatDialogModule","MatIconModule","MatSliderModule","PepNgxLibModule","PepDialogModule","PepIconModule","PepSliderModule","PepFieldTitleModule","PepTextboxModule","PepIconRegistry"],"mappings":"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"}
|
|
@@ -2734,6 +2734,88 @@
|
|
|
2734
2734
|
this.SIX_DIGIT_HEX_COLOR_REGEX = /^[0-9a-fA-F]{6}$/;
|
|
2735
2735
|
this.SIX_DIGIT_HEX_COLOR_WITH_HASH_REGEX = /^#[0-9a-fA-F]{6}$/;
|
|
2736
2736
|
}
|
|
2737
|
+
PepColorService.prototype.contrast = function (str1, str2) {
|
|
2738
|
+
var L1 = this.relativeLuminance(this.hex2rgb(str1));
|
|
2739
|
+
var L2 = this.relativeLuminance(this.hex2rgb(str2));
|
|
2740
|
+
if (L1 < L2) {
|
|
2741
|
+
return (L2 + 0.05) / (L1 + 0.05);
|
|
2742
|
+
}
|
|
2743
|
+
return (L1 + 0.05) / (L2 + 0.05);
|
|
2744
|
+
};
|
|
2745
|
+
PepColorService.prototype.findClosestAccessibleDarkerColor = function (adjustableColor, otherColor, contrastRatio) {
|
|
2746
|
+
var _a = this.hex2hsl(adjustableColor), h = _a.h, s = _a.s, l = _a.l;
|
|
2747
|
+
if (this.contrast(adjustableColor, otherColor) >= contrastRatio) {
|
|
2748
|
+
return {
|
|
2749
|
+
color: adjustableColor,
|
|
2750
|
+
lightness: l,
|
|
2751
|
+
};
|
|
2752
|
+
}
|
|
2753
|
+
var minColor = this.hsl2hex({ h: h, s: s, l: 0 });
|
|
2754
|
+
if (this.contrast(minColor, otherColor) < contrastRatio) {
|
|
2755
|
+
return null;
|
|
2756
|
+
}
|
|
2757
|
+
var min = 0;
|
|
2758
|
+
var max = l;
|
|
2759
|
+
var maxColor = this.hsl2hex({ h: h, s: s, l: l });
|
|
2760
|
+
var lastMinColor;
|
|
2761
|
+
var lastMaxColor;
|
|
2762
|
+
var lTemp;
|
|
2763
|
+
while (minColor !== lastMinColor || maxColor !== lastMaxColor) {
|
|
2764
|
+
lastMinColor = minColor;
|
|
2765
|
+
lastMaxColor = maxColor;
|
|
2766
|
+
lTemp = (min + max) / 2;
|
|
2767
|
+
adjustableColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2768
|
+
if (this.contrast(adjustableColor, otherColor) < contrastRatio) {
|
|
2769
|
+
max = lTemp;
|
|
2770
|
+
maxColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2771
|
+
}
|
|
2772
|
+
else {
|
|
2773
|
+
min = lTemp;
|
|
2774
|
+
minColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2775
|
+
}
|
|
2776
|
+
}
|
|
2777
|
+
return {
|
|
2778
|
+
color: minColor,
|
|
2779
|
+
lightness: min,
|
|
2780
|
+
};
|
|
2781
|
+
};
|
|
2782
|
+
PepColorService.prototype.findClosestAccessibleLighterColor = function (adjustableColor, otherColor, contrastRatio) {
|
|
2783
|
+
var _a = this.hex2hsl(adjustableColor), h = _a.h, s = _a.s, l = _a.l;
|
|
2784
|
+
if (this.contrast(adjustableColor, otherColor) >= contrastRatio) {
|
|
2785
|
+
return {
|
|
2786
|
+
color: adjustableColor,
|
|
2787
|
+
lightness: l,
|
|
2788
|
+
};
|
|
2789
|
+
}
|
|
2790
|
+
var maxColor = this.hsl2hex({ h: h, s: s, l: 100 });
|
|
2791
|
+
if (this.contrast(maxColor, otherColor) < contrastRatio) {
|
|
2792
|
+
return null;
|
|
2793
|
+
}
|
|
2794
|
+
var min = l;
|
|
2795
|
+
var max = 100;
|
|
2796
|
+
var minColor = this.hsl2hex({ h: h, s: s, l: l });
|
|
2797
|
+
var lastMinColor;
|
|
2798
|
+
var lastMaxColor;
|
|
2799
|
+
var lTemp;
|
|
2800
|
+
while (minColor !== lastMinColor || maxColor !== lastMaxColor) {
|
|
2801
|
+
lastMinColor = minColor;
|
|
2802
|
+
lastMaxColor = maxColor;
|
|
2803
|
+
lTemp = (min + max) / 2;
|
|
2804
|
+
adjustableColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2805
|
+
if (this.contrast(adjustableColor, otherColor) < contrastRatio) {
|
|
2806
|
+
min = lTemp;
|
|
2807
|
+
minColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2808
|
+
}
|
|
2809
|
+
else {
|
|
2810
|
+
max = lTemp;
|
|
2811
|
+
maxColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2812
|
+
}
|
|
2813
|
+
}
|
|
2814
|
+
return {
|
|
2815
|
+
color: maxColor,
|
|
2816
|
+
lightness: max,
|
|
2817
|
+
};
|
|
2818
|
+
};
|
|
2737
2819
|
/**
|
|
2738
2820
|
* Convert hex string to 6 digits hex string.
|
|
2739
2821
|
* @param str The string to convert.
|
|
@@ -2762,6 +2844,9 @@
|
|
|
2762
2844
|
* @param color The rgb color to convert.
|
|
2763
2845
|
*/
|
|
2764
2846
|
PepColorService.prototype.rgb2sixDigitHex = function (color) {
|
|
2847
|
+
if (!color) {
|
|
2848
|
+
return null;
|
|
2849
|
+
}
|
|
2765
2850
|
color.r = color.r.toString(16);
|
|
2766
2851
|
color.g = color.g.toString(16);
|
|
2767
2852
|
color.b = color.b.toString(16);
|
|
@@ -2781,6 +2866,9 @@
|
|
|
2781
2866
|
* @param str The hex string to convert.
|
|
2782
2867
|
*/
|
|
2783
2868
|
PepColorService.prototype.hex2rgb = function (str) {
|
|
2869
|
+
if (!str) {
|
|
2870
|
+
return null;
|
|
2871
|
+
}
|
|
2784
2872
|
var sixDigitHex = this.hex2sixDigitHex(str);
|
|
2785
2873
|
if (sixDigitHex === null) {
|
|
2786
2874
|
return null;
|
|
@@ -2792,6 +2880,9 @@
|
|
|
2792
2880
|
};
|
|
2793
2881
|
};
|
|
2794
2882
|
PepColorService.prototype.rgbString2hsl = function (str) {
|
|
2883
|
+
if (!str) {
|
|
2884
|
+
return null;
|
|
2885
|
+
}
|
|
2795
2886
|
var sep = str.indexOf(',') > -1 ? ',' : ' ';
|
|
2796
2887
|
var rgbArr = str.substr(4).split(')')[0].split(sep);
|
|
2797
2888
|
var r = rgbArr[0];
|
|
@@ -2834,6 +2925,9 @@
|
|
|
2834
2925
|
return { h: h, s: s, l: l };
|
|
2835
2926
|
};
|
|
2836
2927
|
PepColorService.prototype.hslString2hsl = function (str) {
|
|
2928
|
+
if (!str) {
|
|
2929
|
+
return null;
|
|
2930
|
+
}
|
|
2837
2931
|
var sep = str.indexOf(',') > -1 ? ',' : ' ';
|
|
2838
2932
|
var hslArr = str.substr(4).split(')')[0].split(sep);
|
|
2839
2933
|
var h = hslArr[0];
|
|
@@ -2923,6 +3017,9 @@
|
|
|
2923
3017
|
return { r: r, g: g, b: b };
|
|
2924
3018
|
};
|
|
2925
3019
|
PepColorService.prototype.hex2hsl = function (str) {
|
|
3020
|
+
if (!str) {
|
|
3021
|
+
return null;
|
|
3022
|
+
}
|
|
2926
3023
|
var sixDigitHex = this.hex2sixDigitHex(str);
|
|
2927
3024
|
if (sixDigitHex === null) {
|
|
2928
3025
|
return null;
|
|
@@ -2934,6 +3031,9 @@
|
|
|
2934
3031
|
return this.rgb2hsl(rgb);
|
|
2935
3032
|
};
|
|
2936
3033
|
PepColorService.prototype.hsl2hex = function (hsl) {
|
|
3034
|
+
if (!hsl) {
|
|
3035
|
+
return null;
|
|
3036
|
+
}
|
|
2937
3037
|
var rgb = this.hsl2rgb(hsl);
|
|
2938
3038
|
return this.rgb2sixDigitHex(rgb);
|
|
2939
3039
|
};
|
|
@@ -2949,88 +3049,6 @@
|
|
|
2949
3049
|
}), 3), r = _b[0], g = _b[1], b = _b[2];
|
|
2950
3050
|
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
2951
3051
|
};
|
|
2952
|
-
PepColorService.prototype.contrast = function (str1, str2) {
|
|
2953
|
-
var L1 = this.relativeLuminance(this.hex2rgb(str1));
|
|
2954
|
-
var L2 = this.relativeLuminance(this.hex2rgb(str2));
|
|
2955
|
-
if (L1 < L2) {
|
|
2956
|
-
return (L2 + 0.05) / (L1 + 0.05);
|
|
2957
|
-
}
|
|
2958
|
-
return (L1 + 0.05) / (L2 + 0.05);
|
|
2959
|
-
};
|
|
2960
|
-
PepColorService.prototype.findClosestAccessibleDarkerColor = function (adjustableColor, otherColor, contrastRatio) {
|
|
2961
|
-
var _a = this.hex2hsl(adjustableColor), h = _a.h, s = _a.s, l = _a.l;
|
|
2962
|
-
if (this.contrast(adjustableColor, otherColor) >= contrastRatio) {
|
|
2963
|
-
return {
|
|
2964
|
-
color: adjustableColor,
|
|
2965
|
-
lightness: l,
|
|
2966
|
-
};
|
|
2967
|
-
}
|
|
2968
|
-
var minColor = this.hsl2hex({ h: h, s: s, l: 0 });
|
|
2969
|
-
if (this.contrast(minColor, otherColor) < contrastRatio) {
|
|
2970
|
-
return null;
|
|
2971
|
-
}
|
|
2972
|
-
var min = 0;
|
|
2973
|
-
var max = l;
|
|
2974
|
-
var maxColor = this.hsl2hex({ h: h, s: s, l: l });
|
|
2975
|
-
var lastMinColor;
|
|
2976
|
-
var lastMaxColor;
|
|
2977
|
-
var lTemp;
|
|
2978
|
-
while (minColor !== lastMinColor || maxColor !== lastMaxColor) {
|
|
2979
|
-
lastMinColor = minColor;
|
|
2980
|
-
lastMaxColor = maxColor;
|
|
2981
|
-
lTemp = (min + max) / 2;
|
|
2982
|
-
adjustableColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2983
|
-
if (this.contrast(adjustableColor, otherColor) < contrastRatio) {
|
|
2984
|
-
max = lTemp;
|
|
2985
|
-
maxColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2986
|
-
}
|
|
2987
|
-
else {
|
|
2988
|
-
min = lTemp;
|
|
2989
|
-
minColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
2990
|
-
}
|
|
2991
|
-
}
|
|
2992
|
-
return {
|
|
2993
|
-
color: minColor,
|
|
2994
|
-
lightness: min,
|
|
2995
|
-
};
|
|
2996
|
-
};
|
|
2997
|
-
PepColorService.prototype.findClosestAccessibleLighterColor = function (adjustableColor, otherColor, contrastRatio) {
|
|
2998
|
-
var _a = this.hex2hsl(adjustableColor), h = _a.h, s = _a.s, l = _a.l;
|
|
2999
|
-
if (this.contrast(adjustableColor, otherColor) >= contrastRatio) {
|
|
3000
|
-
return {
|
|
3001
|
-
color: adjustableColor,
|
|
3002
|
-
lightness: l,
|
|
3003
|
-
};
|
|
3004
|
-
}
|
|
3005
|
-
var maxColor = this.hsl2hex({ h: h, s: s, l: 100 });
|
|
3006
|
-
if (this.contrast(maxColor, otherColor) < contrastRatio) {
|
|
3007
|
-
return null;
|
|
3008
|
-
}
|
|
3009
|
-
var min = l;
|
|
3010
|
-
var max = 100;
|
|
3011
|
-
var minColor = this.hsl2hex({ h: h, s: s, l: l });
|
|
3012
|
-
var lastMinColor;
|
|
3013
|
-
var lastMaxColor;
|
|
3014
|
-
var lTemp;
|
|
3015
|
-
while (minColor !== lastMinColor || maxColor !== lastMaxColor) {
|
|
3016
|
-
lastMinColor = minColor;
|
|
3017
|
-
lastMaxColor = maxColor;
|
|
3018
|
-
lTemp = (min + max) / 2;
|
|
3019
|
-
adjustableColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
3020
|
-
if (this.contrast(adjustableColor, otherColor) < contrastRatio) {
|
|
3021
|
-
min = lTemp;
|
|
3022
|
-
minColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
3023
|
-
}
|
|
3024
|
-
else {
|
|
3025
|
-
max = lTemp;
|
|
3026
|
-
maxColor = this.hsl2hex({ h: h, s: s, l: lTemp });
|
|
3027
|
-
}
|
|
3028
|
-
}
|
|
3029
|
-
return {
|
|
3030
|
-
color: maxColor,
|
|
3031
|
-
lightness: max,
|
|
3032
|
-
};
|
|
3033
|
-
};
|
|
3034
3052
|
PepColorService.prototype.findClosestAccessibleColor = function (adjustableColor, otherColor, contrastRatio) {
|
|
3035
3053
|
var closestDarkerColor = this.findClosestAccessibleDarkerColor(adjustableColor, otherColor, contrastRatio);
|
|
3036
3054
|
var closestLighterColor = this.findClosestAccessibleLighterColor(adjustableColor, otherColor, contrastRatio);
|