nxt-color-picker 16.1.0 → 16.2.0
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/esm2022/lib/color-picker/color-picker.component.mjs +3 -3
- package/esm2022/lib/color-picker.directive.mjs +3 -3
- package/esm2022/lib/color-picker.module.mjs +4 -4
- package/esm2022/lib/color-picker.service.mjs +3 -3
- package/esm2022/lib/slider.directive.mjs +3 -3
- package/esm2022/lib/text.directive.mjs +3 -3
- package/fesm2022/nxt-color-picker.mjs +19 -19
- package/package.json +5 -5
|
@@ -631,10 +631,10 @@ export class ColorPickerComponent {
|
|
|
631
631
|
formatAlpha(a) {
|
|
632
632
|
return a?.toFixed(2).replace(/\.?0+$/, '');
|
|
633
633
|
}
|
|
634
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
635
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ColorPickerComponent, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)" } }, ngImport: i0, template: "<div class=\"color-picker\"\r\n (click)=\"$event.stopPropagation()\"\r\n [ngStyle]=\"{\r\n visibility: !show ? 'hidden' : 'visible',\r\n width: width || '',\r\n height: height || ''\r\n }\"\r\n *ngIf=\"show\">\r\n <div *ngIf=\"dialogDisplay == 'popup'\"\r\n class=\"color-picker__arrow\"></div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__sv\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n [rgY]=\"1\"\r\n (newValue)=\"onColorChange($event)\"\r\n (dragStart)=\"onDragStart('saturation-lightness')\"\r\n (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n [ngStyle]=\"{ \r\n backgroundColor: hueSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n [ngStyle]=\"{\r\n top: (slider?.v || 0) * 100 + '%',\r\n left: (slider?.s || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div class=\"color-picker__controls\">\r\n <div class=\"color-picker__selected\">\r\n <div class=\"color-picker__selected-color\">\r\n <div [ngStyle]=\"{ \r\n backgroundColor: selectedColor || ''\r\n }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n type=\"button\"\r\n title=\"Add color to preset\"\r\n i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n class=\"color-picker__add-selected\"\r\n [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </div>\r\n <div class=\"color-picker__hav\">\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__slider color-picker__slider--hue\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onHueChange($event)\"\r\n (dragStart)=\"onDragStart('hue')\"\r\n (dragEnd)=\"onDragEnd('hue')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.h || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n class=\"color-picker__slider color-picker__slider--value\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onValueChange($event)\"\r\n (dragStart)=\"onDragStart('value')\"\r\n (dragEnd)=\"onDragEnd('value')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (1 - (slider?.v || 0)) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__slider color-picker__slider--alpha\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onAlphaChange($event)\"\r\n (dragStart)=\"onDragStart('alpha')\"\r\n (dragEnd)=\"onDragEnd('alpha')\">\r\n <div class=\"color-picker__slider--alpha-bg\"\r\n [ngStyle]=\"{\r\n backgroundImage: alphaSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.a || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n class=\"color-picker__inputs\">\r\n <div class=\"color-picker__input-fields\">\r\n <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onValueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">V</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-template #formatSwitch>\r\n <ng-container [ngSwitch]=\"format\">\r\n <ng-container *ngSwitchCase=\"'hsla'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"360\"\r\n nxtText\r\n [rg]=\"360\"\r\n [value]=\"hslaText?.h?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">H</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.s?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onSaturationInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">S</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onLightnessInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">L</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'rgba'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.r?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onRedInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">R</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.g?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onGreenInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">G</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.b?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">B</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'cmyk'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.c?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onCyanInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">C</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.m?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onMagentaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">M</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.y?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onYellowInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Y</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.k?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlackInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">K</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(cmykText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"color-picker__input-field\">\r\n <input nxtText\r\n [value]=\"hexText\"\r\n (blur)=\"onHexInput()\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHexInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Hex</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel == 'forced'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hexAlpha)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__input-type\">\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(1)\"></span>\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(-1)\"></span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"presetColors?.length\">\r\n <div class=\"color-picker__separator\"></div>\r\n <div class=\"color-picker__preset\">\r\n <div *ngIf=\"presetLabel\"\r\n class=\"color-picker__preset-label\">\r\n <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n </div>\r\n <div *ngIf=\"presetColors?.length\"\r\n class=\"color-picker__preset-items\">\r\n <ng-container *ngFor=\"let color of presetColors\">\r\n <div *ngIf=\"stringToRgba(color) as rgba\"\r\n class=\"color-picker__preset-item\"\r\n [title]=\"color\"\r\n (click)=\"setColorFromString(color)\">\r\n <div class=\"color-picker__preset-item-fill\"\r\n [ngStyle]=\"{ \r\n backgroundColor: rgba || ''\r\n }\"><button *ngIf=\"presetColorsEditable\"\r\n type=\"button\"\r\n title=\"Remove Color\"\r\n i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n class=\"color-picker__remove-selected\"\r\n (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </ng-container>\r\n <div *ngFor=\"let i of fill(50)\"\r\n class=\"color-picker__preset-item\"></div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"okButton || cancelButton\"\r\n class=\"color-picker__buttons\">\r\n <button *ngIf=\"cancelButton\"\r\n type=\"button\"\r\n (click)=\"onCancel($event)\"\r\n i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n <button *ngIf=\"okButton\"\r\n type=\"button\"\r\n (click)=\"onAccept($event)\"\r\n i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;-webkit-appearance:none;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }, { kind: "directive", type: i4.SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }] }); }
|
|
634
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ColorPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
635
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ColorPickerComponent, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)" } }, ngImport: i0, template: "<div class=\"color-picker\"\r\n (click)=\"$event.stopPropagation()\"\r\n [ngStyle]=\"{\r\n visibility: !show ? 'hidden' : 'visible',\r\n width: width || '',\r\n height: height || ''\r\n }\"\r\n *ngIf=\"show\">\r\n <div *ngIf=\"dialogDisplay == 'popup'\"\r\n class=\"color-picker__arrow\"></div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__sv\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n [rgY]=\"1\"\r\n (newValue)=\"onColorChange($event)\"\r\n (dragStart)=\"onDragStart('saturation-lightness')\"\r\n (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n [ngStyle]=\"{ \r\n backgroundColor: hueSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n [ngStyle]=\"{\r\n top: (slider?.v || 0) * 100 + '%',\r\n left: (slider?.s || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div class=\"color-picker__controls\">\r\n <div class=\"color-picker__selected\">\r\n <div class=\"color-picker__selected-color\">\r\n <div [ngStyle]=\"{ \r\n backgroundColor: selectedColor || ''\r\n }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n type=\"button\"\r\n title=\"Add color to preset\"\r\n i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n class=\"color-picker__add-selected\"\r\n [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </div>\r\n <div class=\"color-picker__hav\">\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__slider color-picker__slider--hue\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onHueChange($event)\"\r\n (dragStart)=\"onDragStart('hue')\"\r\n (dragEnd)=\"onDragEnd('hue')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.h || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n class=\"color-picker__slider color-picker__slider--value\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onValueChange($event)\"\r\n (dragStart)=\"onDragStart('value')\"\r\n (dragEnd)=\"onDragEnd('value')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (1 - (slider?.v || 0)) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__slider color-picker__slider--alpha\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onAlphaChange($event)\"\r\n (dragStart)=\"onDragStart('alpha')\"\r\n (dragEnd)=\"onDragEnd('alpha')\">\r\n <div class=\"color-picker__slider--alpha-bg\"\r\n [ngStyle]=\"{\r\n backgroundImage: alphaSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.a || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n class=\"color-picker__inputs\">\r\n <div class=\"color-picker__input-fields\">\r\n <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onValueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">V</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-template #formatSwitch>\r\n <ng-container [ngSwitch]=\"format\">\r\n <ng-container *ngSwitchCase=\"'hsla'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"360\"\r\n nxtText\r\n [rg]=\"360\"\r\n [value]=\"hslaText?.h?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">H</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.s?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onSaturationInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">S</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onLightnessInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">L</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'rgba'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.r?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onRedInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">R</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.g?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onGreenInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">G</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.b?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">B</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'cmyk'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.c?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onCyanInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">C</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.m?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onMagentaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">M</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.y?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onYellowInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Y</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.k?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlackInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">K</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(cmykText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"color-picker__input-field\">\r\n <input nxtText\r\n [value]=\"hexText\"\r\n (blur)=\"onHexInput()\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHexInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Hex</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel == 'forced'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hexAlpha)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__input-type\">\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(1)\"></span>\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(-1)\"></span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"presetColors?.length\">\r\n <div class=\"color-picker__separator\"></div>\r\n <div class=\"color-picker__preset\">\r\n <div *ngIf=\"presetLabel\"\r\n class=\"color-picker__preset-label\">\r\n <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n </div>\r\n <div *ngIf=\"presetColors?.length\"\r\n class=\"color-picker__preset-items\">\r\n <ng-container *ngFor=\"let color of presetColors\">\r\n <div *ngIf=\"stringToRgba(color) as rgba\"\r\n class=\"color-picker__preset-item\"\r\n [title]=\"color\"\r\n (click)=\"setColorFromString(color)\">\r\n <div class=\"color-picker__preset-item-fill\"\r\n [ngStyle]=\"{ \r\n backgroundColor: rgba || ''\r\n }\"><button *ngIf=\"presetColorsEditable\"\r\n type=\"button\"\r\n title=\"Remove Color\"\r\n i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n class=\"color-picker__remove-selected\"\r\n (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </ng-container>\r\n <div *ngFor=\"let i of fill(50)\"\r\n class=\"color-picker__preset-item\"></div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"okButton || cancelButton\"\r\n class=\"color-picker__buttons\">\r\n <button *ngIf=\"cancelButton\"\r\n type=\"button\"\r\n (click)=\"onCancel($event)\"\r\n i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n <button *ngIf=\"okButton\"\r\n type=\"button\"\r\n (click)=\"onAccept($event)\"\r\n i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;-webkit-appearance:none;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }, { kind: "directive", type: i4.SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }] }); }
|
|
636
636
|
}
|
|
637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
638
638
|
type: Component,
|
|
639
639
|
args: [{ selector: 'nxt-color-picker', encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"color-picker\"\r\n (click)=\"$event.stopPropagation()\"\r\n [ngStyle]=\"{\r\n visibility: !show ? 'hidden' : 'visible',\r\n width: width || '',\r\n height: height || ''\r\n }\"\r\n *ngIf=\"show\">\r\n <div *ngIf=\"dialogDisplay == 'popup'\"\r\n class=\"color-picker__arrow\"></div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__sv\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n [rgY]=\"1\"\r\n (newValue)=\"onColorChange($event)\"\r\n (dragStart)=\"onDragStart('saturation-lightness')\"\r\n (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n [ngStyle]=\"{ \r\n backgroundColor: hueSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n [ngStyle]=\"{\r\n top: (slider?.v || 0) * 100 + '%',\r\n left: (slider?.s || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div class=\"color-picker__controls\">\r\n <div class=\"color-picker__selected\">\r\n <div class=\"color-picker__selected-color\">\r\n <div [ngStyle]=\"{ \r\n backgroundColor: selectedColor || ''\r\n }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n type=\"button\"\r\n title=\"Add color to preset\"\r\n i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n class=\"color-picker__add-selected\"\r\n [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </div>\r\n <div class=\"color-picker__hav\">\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__slider color-picker__slider--hue\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onHueChange($event)\"\r\n (dragStart)=\"onDragStart('hue')\"\r\n (dragEnd)=\"onDragEnd('hue')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.h || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n class=\"color-picker__slider color-picker__slider--value\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onValueChange($event)\"\r\n (dragStart)=\"onDragStart('value')\"\r\n (dragEnd)=\"onDragEnd('value')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (1 - (slider?.v || 0)) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__slider color-picker__slider--alpha\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onAlphaChange($event)\"\r\n (dragStart)=\"onDragStart('alpha')\"\r\n (dragEnd)=\"onDragEnd('alpha')\">\r\n <div class=\"color-picker__slider--alpha-bg\"\r\n [ngStyle]=\"{\r\n backgroundImage: alphaSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.a || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n class=\"color-picker__inputs\">\r\n <div class=\"color-picker__input-fields\">\r\n <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onValueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">V</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-template #formatSwitch>\r\n <ng-container [ngSwitch]=\"format\">\r\n <ng-container *ngSwitchCase=\"'hsla'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"360\"\r\n nxtText\r\n [rg]=\"360\"\r\n [value]=\"hslaText?.h?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">H</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.s?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onSaturationInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">S</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onLightnessInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">L</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'rgba'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.r?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onRedInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">R</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.g?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onGreenInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">G</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.b?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">B</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'cmyk'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.c?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onCyanInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">C</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.m?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onMagentaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">M</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.y?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onYellowInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Y</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.k?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlackInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">K</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(cmykText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"color-picker__input-field\">\r\n <input nxtText\r\n [value]=\"hexText\"\r\n (blur)=\"onHexInput()\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHexInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Hex</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel == 'forced'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hexAlpha)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__input-type\">\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(1)\"></span>\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(-1)\"></span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"presetColors?.length\">\r\n <div class=\"color-picker__separator\"></div>\r\n <div class=\"color-picker__preset\">\r\n <div *ngIf=\"presetLabel\"\r\n class=\"color-picker__preset-label\">\r\n <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n </div>\r\n <div *ngIf=\"presetColors?.length\"\r\n class=\"color-picker__preset-items\">\r\n <ng-container *ngFor=\"let color of presetColors\">\r\n <div *ngIf=\"stringToRgba(color) as rgba\"\r\n class=\"color-picker__preset-item\"\r\n [title]=\"color\"\r\n (click)=\"setColorFromString(color)\">\r\n <div class=\"color-picker__preset-item-fill\"\r\n [ngStyle]=\"{ \r\n backgroundColor: rgba || ''\r\n }\"><button *ngIf=\"presetColorsEditable\"\r\n type=\"button\"\r\n title=\"Remove Color\"\r\n i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n class=\"color-picker__remove-selected\"\r\n (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </ng-container>\r\n <div *ngFor=\"let i of fill(50)\"\r\n class=\"color-picker__preset-item\"></div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"okButton || cancelButton\"\r\n class=\"color-picker__buttons\">\r\n <button *ngIf=\"cancelButton\"\r\n type=\"button\"\r\n (click)=\"onCancel($event)\"\r\n i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n <button *ngIf=\"okButton\"\r\n type=\"button\"\r\n (click)=\"onAccept($event)\"\r\n i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;-webkit-appearance:none;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"] }]
|
|
640
640
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ColorPickerService }]; }, propDecorators: { onCancel: [{
|
|
@@ -330,10 +330,10 @@ export class ColorPickerDirective {
|
|
|
330
330
|
}
|
|
331
331
|
return pos;
|
|
332
332
|
}
|
|
333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
334
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.
|
|
333
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerDirective, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
334
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: ColorPickerDirective, selector: "[nxtColor]", inputs: { nxtColor: "nxtColor", width: "width", height: "height", toggle: "toggle", disabled: "disabled", mode: "mode", cmykEnabled: "cmykEnabled", outputFormat: "outputFormat", alphaChannel: "alphaChannel", fallbackColor: "fallbackColor", position: "position", positionOffset: "positionOffset", presetLabel: "presetLabel", presetColors: "presetColors", disableInput: "disableInput", dialogDisplay: "dialogDisplay", ignoredElements: "ignoredElements", saveClickOutside: "saveClickOutside", closeClickOutside: "closeClickOutside", okButton: "okButton", cancelButton: "cancelButton", presetColorsEditable: "presetColorsEditable", maxPresetColors: "maxPresetColors", useRootViewContainer: "useRootViewContainer" }, outputs: { open: "open", close: "close", inputChange: "inputChange", toggleChange: "toggleChange", sliderDragStart: "sliderDragStart", sliderChange: "sliderChange", sliderDragEnd: "sliderDragEnd", colorSelect: "colorSelect", colorSelectCancel: "colorSelectCancel", nxtColorChange: "nxtColorChange", cmykColorChange: "cmykColorChange", presetColorsChange: "presetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, exportAs: ["nxtColorPicker"], usesOnChanges: true, ngImport: i0 }); }
|
|
335
335
|
}
|
|
336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerDirective, decorators: [{
|
|
337
337
|
type: Directive,
|
|
338
338
|
args: [{
|
|
339
339
|
selector: '[nxtColor]',
|
|
@@ -7,16 +7,16 @@ import { SliderDirective } from './slider.directive';
|
|
|
7
7
|
import { TextDirective } from './text.directive';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
export class ColorPickerModule {
|
|
10
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
11
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.
|
|
10
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
11
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerModule, declarations: [TextDirective,
|
|
12
12
|
SliderDirective,
|
|
13
13
|
ColorPickerComponent,
|
|
14
14
|
ColorPickerDirective], imports: [CommonModule,
|
|
15
15
|
OverlayModule], exports: [ColorPickerDirective] }); }
|
|
16
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.
|
|
16
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerModule, imports: [CommonModule,
|
|
17
17
|
OverlayModule] }); }
|
|
18
18
|
}
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerModule, decorators: [{
|
|
20
20
|
type: NgModule,
|
|
21
21
|
args: [{
|
|
22
22
|
declarations: [
|
|
@@ -14,10 +14,10 @@ export class ColorPickerService {
|
|
|
14
14
|
this.active = active;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
18
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.
|
|
17
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
18
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerService, providedIn: 'root' }); }
|
|
19
19
|
}
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerService, decorators: [{
|
|
21
21
|
type: Injectable,
|
|
22
22
|
args: [{
|
|
23
23
|
providedIn: 'root'
|
|
@@ -58,10 +58,10 @@ export class SliderDirective {
|
|
|
58
58
|
this.newValue.emit({ v: x / width, rgX: this.rgX });
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
62
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.
|
|
61
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
62
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: SliderDirective, selector: "[nxtSlider]", inputs: { rgX: "rgX", rgY: "rgY", slider: ["nxtSlider", "slider"] }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", newValue: "newValue" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "document:mousemove": "onMove($event)", "document:touchmove": "onMove($event)", "document:mouseup": "onStop($event)", "document:touchend": "onStop($event)" } }, ngImport: i0 }); }
|
|
63
63
|
}
|
|
64
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SliderDirective, decorators: [{
|
|
65
65
|
type: Directive,
|
|
66
66
|
args: [{
|
|
67
67
|
selector: '[nxtSlider]'
|
|
@@ -17,10 +17,10 @@ export class TextDirective {
|
|
|
17
17
|
this.newValue.emit({ v: numeric, rg: this.rg });
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
21
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
21
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: TextDirective, selector: "[nxtText]", inputs: { rg: "rg", text: ["nxtText", "text"] }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TextDirective, decorators: [{
|
|
24
24
|
type: Directive,
|
|
25
25
|
args: [{
|
|
26
26
|
selector: '[nxtText]'
|
|
@@ -617,10 +617,10 @@ class ColorPickerService {
|
|
|
617
617
|
this.active = active;
|
|
618
618
|
}
|
|
619
619
|
}
|
|
620
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
621
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.
|
|
620
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
621
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerService, providedIn: 'root' }); }
|
|
622
622
|
}
|
|
623
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
623
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerService, decorators: [{
|
|
624
624
|
type: Injectable,
|
|
625
625
|
args: [{
|
|
626
626
|
providedIn: 'root'
|
|
@@ -644,10 +644,10 @@ class TextDirective {
|
|
|
644
644
|
this.newValue.emit({ v: numeric, rg: this.rg });
|
|
645
645
|
}
|
|
646
646
|
}
|
|
647
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
648
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.
|
|
647
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
648
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: TextDirective, selector: "[nxtText]", inputs: { rg: "rg", text: ["nxtText", "text"] }, outputs: { newValue: "newValue" }, host: { listeners: { "input": "inputChange($event)", "change": "inputChange($event)" } }, ngImport: i0 }); }
|
|
649
649
|
}
|
|
650
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
650
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: TextDirective, decorators: [{
|
|
651
651
|
type: Directive,
|
|
652
652
|
args: [{
|
|
653
653
|
selector: '[nxtText]'
|
|
@@ -725,10 +725,10 @@ class SliderDirective {
|
|
|
725
725
|
this.newValue.emit({ v: x / width, rgX: this.rgX });
|
|
726
726
|
}
|
|
727
727
|
}
|
|
728
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
729
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.
|
|
728
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
729
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: SliderDirective, selector: "[nxtSlider]", inputs: { rgX: "rgX", rgY: "rgY", slider: ["nxtSlider", "slider"] }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", newValue: "newValue" }, host: { listeners: { "mousedown": "onStart($event)", "touchstart": "onStart($event)", "document:mousemove": "onMove($event)", "document:touchmove": "onMove($event)", "document:mouseup": "onStop($event)", "document:touchend": "onStop($event)" } }, ngImport: i0 }); }
|
|
730
730
|
}
|
|
731
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
731
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SliderDirective, decorators: [{
|
|
732
732
|
type: Directive,
|
|
733
733
|
args: [{
|
|
734
734
|
selector: '[nxtSlider]'
|
|
@@ -1388,10 +1388,10 @@ class ColorPickerComponent {
|
|
|
1388
1388
|
formatAlpha(a) {
|
|
1389
1389
|
return a?.toFixed(2).replace(/\.?0+$/, '');
|
|
1390
1390
|
}
|
|
1391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
1392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.1", type: ColorPickerComponent, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)" } }, ngImport: i0, template: "<div class=\"color-picker\"\r\n (click)=\"$event.stopPropagation()\"\r\n [ngStyle]=\"{\r\n visibility: !show ? 'hidden' : 'visible',\r\n width: width || '',\r\n height: height || ''\r\n }\"\r\n *ngIf=\"show\">\r\n <div *ngIf=\"dialogDisplay == 'popup'\"\r\n class=\"color-picker__arrow\"></div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__sv\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n [rgY]=\"1\"\r\n (newValue)=\"onColorChange($event)\"\r\n (dragStart)=\"onDragStart('saturation-lightness')\"\r\n (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n [ngStyle]=\"{ \r\n backgroundColor: hueSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n [ngStyle]=\"{\r\n top: (slider?.v || 0) * 100 + '%',\r\n left: (slider?.s || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div class=\"color-picker__controls\">\r\n <div class=\"color-picker__selected\">\r\n <div class=\"color-picker__selected-color\">\r\n <div [ngStyle]=\"{ \r\n backgroundColor: selectedColor || ''\r\n }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n type=\"button\"\r\n title=\"Add color to preset\"\r\n i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n class=\"color-picker__add-selected\"\r\n [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </div>\r\n <div class=\"color-picker__hav\">\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__slider color-picker__slider--hue\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onHueChange($event)\"\r\n (dragStart)=\"onDragStart('hue')\"\r\n (dragEnd)=\"onDragEnd('hue')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.h || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n class=\"color-picker__slider color-picker__slider--value\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onValueChange($event)\"\r\n (dragStart)=\"onDragStart('value')\"\r\n (dragEnd)=\"onDragEnd('value')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (1 - (slider?.v || 0)) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__slider color-picker__slider--alpha\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onAlphaChange($event)\"\r\n (dragStart)=\"onDragStart('alpha')\"\r\n (dragEnd)=\"onDragEnd('alpha')\">\r\n <div class=\"color-picker__slider--alpha-bg\"\r\n [ngStyle]=\"{\r\n backgroundImage: alphaSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.a || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n class=\"color-picker__inputs\">\r\n <div class=\"color-picker__input-fields\">\r\n <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onValueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">V</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-template #formatSwitch>\r\n <ng-container [ngSwitch]=\"format\">\r\n <ng-container *ngSwitchCase=\"'hsla'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"360\"\r\n nxtText\r\n [rg]=\"360\"\r\n [value]=\"hslaText?.h?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">H</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.s?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onSaturationInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">S</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onLightnessInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">L</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'rgba'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.r?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onRedInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">R</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.g?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onGreenInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">G</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.b?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">B</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'cmyk'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.c?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onCyanInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">C</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.m?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onMagentaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">M</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.y?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onYellowInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Y</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.k?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlackInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">K</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(cmykText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"color-picker__input-field\">\r\n <input nxtText\r\n [value]=\"hexText\"\r\n (blur)=\"onHexInput()\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHexInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Hex</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel == 'forced'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hexAlpha)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__input-type\">\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(1)\"></span>\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(-1)\"></span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"presetColors?.length\">\r\n <div class=\"color-picker__separator\"></div>\r\n <div class=\"color-picker__preset\">\r\n <div *ngIf=\"presetLabel\"\r\n class=\"color-picker__preset-label\">\r\n <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n </div>\r\n <div *ngIf=\"presetColors?.length\"\r\n class=\"color-picker__preset-items\">\r\n <ng-container *ngFor=\"let color of presetColors\">\r\n <div *ngIf=\"stringToRgba(color) as rgba\"\r\n class=\"color-picker__preset-item\"\r\n [title]=\"color\"\r\n (click)=\"setColorFromString(color)\">\r\n <div class=\"color-picker__preset-item-fill\"\r\n [ngStyle]=\"{ \r\n backgroundColor: rgba || ''\r\n }\"><button *ngIf=\"presetColorsEditable\"\r\n type=\"button\"\r\n title=\"Remove Color\"\r\n i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n class=\"color-picker__remove-selected\"\r\n (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </ng-container>\r\n <div *ngFor=\"let i of fill(50)\"\r\n class=\"color-picker__preset-item\"></div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"okButton || cancelButton\"\r\n class=\"color-picker__buttons\">\r\n <button *ngIf=\"cancelButton\"\r\n type=\"button\"\r\n (click)=\"onCancel($event)\"\r\n i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n <button *ngIf=\"okButton\"\r\n type=\"button\"\r\n (click)=\"onAccept($event)\"\r\n i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;-webkit-appearance:none;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }, { kind: "directive", type: SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }] }); }
|
|
1391
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ColorPickerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1392
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ColorPickerComponent, selector: "nxt-color-picker", host: { listeners: { "document:keyup.esc": "onCancel($event)", "document:keyup.enter": "onAccept($event)", "document:mousedown": "onFocusChange($event)", "document:focusin": "onFocusChange($event)" } }, ngImport: i0, template: "<div class=\"color-picker\"\r\n (click)=\"$event.stopPropagation()\"\r\n [ngStyle]=\"{\r\n visibility: !show ? 'hidden' : 'visible',\r\n width: width || '',\r\n height: height || ''\r\n }\"\r\n *ngIf=\"show\">\r\n <div *ngIf=\"dialogDisplay == 'popup'\"\r\n class=\"color-picker__arrow\"></div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__sv\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n [rgY]=\"1\"\r\n (newValue)=\"onColorChange($event)\"\r\n (dragStart)=\"onDragStart('saturation-lightness')\"\r\n (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n [ngStyle]=\"{ \r\n backgroundColor: hueSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n [ngStyle]=\"{\r\n top: (slider?.v || 0) * 100 + '%',\r\n left: (slider?.s || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div class=\"color-picker__controls\">\r\n <div class=\"color-picker__selected\">\r\n <div class=\"color-picker__selected-color\">\r\n <div [ngStyle]=\"{ \r\n backgroundColor: selectedColor || ''\r\n }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n type=\"button\"\r\n title=\"Add color to preset\"\r\n i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n class=\"color-picker__add-selected\"\r\n [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </div>\r\n <div class=\"color-picker__hav\">\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__slider color-picker__slider--hue\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onHueChange($event)\"\r\n (dragStart)=\"onDragStart('hue')\"\r\n (dragEnd)=\"onDragEnd('hue')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.h || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n class=\"color-picker__slider color-picker__slider--value\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onValueChange($event)\"\r\n (dragStart)=\"onDragStart('value')\"\r\n (dragEnd)=\"onDragEnd('value')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (1 - (slider?.v || 0)) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__slider color-picker__slider--alpha\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onAlphaChange($event)\"\r\n (dragStart)=\"onDragStart('alpha')\"\r\n (dragEnd)=\"onDragEnd('alpha')\">\r\n <div class=\"color-picker__slider--alpha-bg\"\r\n [ngStyle]=\"{\r\n backgroundImage: alphaSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.a || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n class=\"color-picker__inputs\">\r\n <div class=\"color-picker__input-fields\">\r\n <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onValueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">V</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-template #formatSwitch>\r\n <ng-container [ngSwitch]=\"format\">\r\n <ng-container *ngSwitchCase=\"'hsla'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"360\"\r\n nxtText\r\n [rg]=\"360\"\r\n [value]=\"hslaText?.h?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">H</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.s?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onSaturationInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">S</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onLightnessInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">L</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'rgba'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.r?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onRedInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">R</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.g?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onGreenInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">G</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.b?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">B</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'cmyk'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.c?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onCyanInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">C</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.m?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onMagentaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">M</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.y?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onYellowInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Y</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.k?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlackInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">K</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(cmykText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"color-picker__input-field\">\r\n <input nxtText\r\n [value]=\"hexText\"\r\n (blur)=\"onHexInput()\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHexInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Hex</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel == 'forced'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hexAlpha)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__input-type\">\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(1)\"></span>\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(-1)\"></span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"presetColors?.length\">\r\n <div class=\"color-picker__separator\"></div>\r\n <div class=\"color-picker__preset\">\r\n <div *ngIf=\"presetLabel\"\r\n class=\"color-picker__preset-label\">\r\n <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n </div>\r\n <div *ngIf=\"presetColors?.length\"\r\n class=\"color-picker__preset-items\">\r\n <ng-container *ngFor=\"let color of presetColors\">\r\n <div *ngIf=\"stringToRgba(color) as rgba\"\r\n class=\"color-picker__preset-item\"\r\n [title]=\"color\"\r\n (click)=\"setColorFromString(color)\">\r\n <div class=\"color-picker__preset-item-fill\"\r\n [ngStyle]=\"{ \r\n backgroundColor: rgba || ''\r\n }\"><button *ngIf=\"presetColorsEditable\"\r\n type=\"button\"\r\n title=\"Remove Color\"\r\n i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n class=\"color-picker__remove-selected\"\r\n (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </ng-container>\r\n <div *ngFor=\"let i of fill(50)\"\r\n class=\"color-picker__preset-item\"></div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"okButton || cancelButton\"\r\n class=\"color-picker__buttons\">\r\n <button *ngIf=\"cancelButton\"\r\n type=\"button\"\r\n (click)=\"onCancel($event)\"\r\n i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n <button *ngIf=\"okButton\"\r\n type=\"button\"\r\n (click)=\"onAccept($event)\"\r\n i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;-webkit-appearance:none;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: TextDirective, selector: "[nxtText]", inputs: ["rg", "nxtText"], outputs: ["newValue"] }, { kind: "directive", type: SliderDirective, selector: "[nxtSlider]", inputs: ["rgX", "rgY", "nxtSlider"], outputs: ["dragEnd", "dragStart", "newValue"] }] }); }
|
|
1393
1393
|
}
|
|
1394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
1394
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
1395
1395
|
type: Component,
|
|
1396
1396
|
args: [{ selector: 'nxt-color-picker', encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"color-picker\"\r\n (click)=\"$event.stopPropagation()\"\r\n [ngStyle]=\"{\r\n visibility: !show ? 'hidden' : 'visible',\r\n width: width || '',\r\n height: height || ''\r\n }\"\r\n *ngIf=\"show\">\r\n <div *ngIf=\"dialogDisplay == 'popup'\"\r\n class=\"color-picker__arrow\"></div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__sv\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n [rgY]=\"1\"\r\n (newValue)=\"onColorChange($event)\"\r\n (dragStart)=\"onDragStart('saturation-lightness')\"\r\n (dragEnd)=\"onDragEnd('saturation-lightness')\"\r\n [ngStyle]=\"{ \r\n backgroundColor: hueSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor color-picker__cursor--sv\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': svSliderLight }\"\r\n [ngStyle]=\"{\r\n top: (slider?.v || 0) * 100 + '%',\r\n left: (slider?.s || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div class=\"color-picker__controls\">\r\n <div class=\"color-picker__selected\">\r\n <div class=\"color-picker__selected-color\">\r\n <div [ngStyle]=\"{ \r\n backgroundColor: selectedColor || ''\r\n }\"><button *ngIf=\"presetColorsEditable && !(maxPresetColors && (presetColors?.length || 0) >= maxPresetColors)\"\r\n type=\"button\"\r\n title=\"Add color to preset\"\r\n i18n-title=\"@@nxt-color-picker.button.add-color\"\r\n class=\"color-picker__add-selected\"\r\n [ngClass]=\"{ 'color-picker__add-selected--light': alphaSliderLight }\"\r\n (click)=\"onAddPresetColor(selectedColor)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </div>\r\n <div class=\"color-picker__hav\">\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__slider color-picker__slider--hue\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onHueChange($event)\"\r\n (dragStart)=\"onDragStart('hue')\"\r\n (dragEnd)=\"onDragEnd('hue')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': hueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.h || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.grayscale\"\r\n class=\"color-picker__slider color-picker__slider--value\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onValueChange($event)\"\r\n (dragStart)=\"onDragStart('value')\"\r\n (dragEnd)=\"onDragEnd('value')\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': valueSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (1 - (slider?.v || 0)) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__slider color-picker__slider--alpha\"\r\n nxtSlider\r\n [rgX]=\"1\"\r\n (newValue)=\"onAlphaChange($event)\"\r\n (dragStart)=\"onDragStart('alpha')\"\r\n (dragEnd)=\"onDragEnd('alpha')\">\r\n <div class=\"color-picker__slider--alpha-bg\"\r\n [ngStyle]=\"{\r\n backgroundImage: alphaSliderColor || ''\r\n }\">\r\n <div class=\"color-picker__cursor\"\r\n [ngClass]=\"{ 'color-picker__cursor--light': alphaSliderLight }\"\r\n [ngStyle]=\"{\r\n left: (slider?.a || 0) * 100 + '%'\r\n }\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!disableInput && (mode == colorModeInternal.color || mode == colorModeInternal.grayscale)\"\r\n class=\"color-picker__inputs\">\r\n <div class=\"color-picker__input-fields\">\r\n <ng-container *ngIf=\"mode == colorModeInternal.grayscale; else formatSwitch\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onValueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">V</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-template #formatSwitch>\r\n <ng-container [ngSwitch]=\"format\">\r\n <ng-container *ngSwitchCase=\"'hsla'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"360\"\r\n nxtText\r\n [rg]=\"360\"\r\n [value]=\"hslaText?.h?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">H</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.s?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onSaturationInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">S</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"hslaText?.l?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onLightnessInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">L</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'rgba'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.r?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onRedInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">R</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.g?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onGreenInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">G</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"255\"\r\n nxtText\r\n [rg]=\"255\"\r\n [value]=\"rgbaText?.b?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlueInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">B</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hslaText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'cmyk'\">\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.c?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onCyanInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">C</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.m?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onMagentaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">M</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.y?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onYellowInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Y</span>\r\n </div>\r\n <div class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]*\"\r\n min=\"0\"\r\n max=\"100\"\r\n nxtText\r\n [rg]=\"100\"\r\n [value]=\"cmykText?.k?.toFixed(0)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onBlackInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">K</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel != 'disabled'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(cmykText?.a)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"color-picker__input-field\">\r\n <input nxtText\r\n [value]=\"hexText\"\r\n (blur)=\"onHexInput()\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onHexInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">Hex</span>\r\n </div>\r\n <div *ngIf=\"alphaChannel == 'forced'\"\r\n class=\"color-picker__input-field\">\r\n <input type=\"number\"\r\n pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\r\n min=\"0\"\r\n max=\"1\"\r\n step=\"0.01\"\r\n nxtText\r\n [rg]=\"1\"\r\n [value]=\"formatAlpha(hexAlpha)\"\r\n (keyup.enter)=\"onAccept($event)\"\r\n (newValue)=\"onAlphaInput($event)\" />\r\n <span class=\"color-picker__input-field-label\">A</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"mode == colorModeInternal.color\"\r\n class=\"color-picker__input-type\">\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(1)\"></span>\r\n <span class=\"color-picker__input-type-arrow\"\r\n (click)=\"onFormatToggle(-1)\"></span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"presetColors?.length\">\r\n <div class=\"color-picker__separator\"></div>\r\n <div class=\"color-picker__preset\">\r\n <div *ngIf=\"presetLabel\"\r\n class=\"color-picker__preset-label\">\r\n <ng-container *ngIf=\"presetLabel === true; else stringLabel\"\r\n i18n=\"@@nxt-color-picker.preset-colors\">Preset colors</ng-container>\r\n <ng-template #stringLabel>{{ presetLabel }}</ng-template>\r\n </div>\r\n <div *ngIf=\"presetColors?.length\"\r\n class=\"color-picker__preset-items\">\r\n <ng-container *ngFor=\"let color of presetColors\">\r\n <div *ngIf=\"stringToRgba(color) as rgba\"\r\n class=\"color-picker__preset-item\"\r\n [title]=\"color\"\r\n (click)=\"setColorFromString(color)\">\r\n <div class=\"color-picker__preset-item-fill\"\r\n [ngStyle]=\"{ \r\n backgroundColor: rgba || ''\r\n }\"><button *ngIf=\"presetColorsEditable\"\r\n type=\"button\"\r\n title=\"Remove Color\"\r\n i18n-title=\"@@nxt-color-picker.button.remove-color\"\r\n class=\"color-picker__remove-selected\"\r\n (click)=\"onRemovePresetColor(color)\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\">\r\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n <path d=\"M0 0h24v24H0z\"\r\n fill=\"none\" />\r\n </svg></button></div>\r\n </div>\r\n </ng-container>\r\n <div *ngFor=\"let i of fill(50)\"\r\n class=\"color-picker__preset-item\"></div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"okButton || cancelButton\"\r\n class=\"color-picker__buttons\">\r\n <button *ngIf=\"cancelButton\"\r\n type=\"button\"\r\n (click)=\"onCancel($event)\"\r\n i18n=\"@@nxt-color-picker.button.cancel\">Cancel</button>\r\n <button *ngIf=\"okButton\"\r\n type=\"button\"\r\n (click)=\"onAccept($event)\"\r\n i18n=\"@@nxt-color-picker.button.ok\">OK</button>\r\n </div>\r\n</div>\r\n", styles: [".color-picker{position:relative;-webkit-user-select:none;user-select:none;background-color:#fff;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f,0 5px 5px -3px #0003;display:flex;flex-direction:column}.color-picker *{box-sizing:border-box;margin:0;font-size:12px}.color-picker .color-picker__arrow{height:0;width:0;border-style:solid;position:absolute;z-index:999999}.color-picker .color-picker__cursor{cursor:pointer;position:absolute;border-radius:50%;width:16px;height:16px;border:#222222 solid 2px;margin:0 -8px;transition:border .2s linear}.color-picker .color-picker__cursor.color-picker__cursor--sv{margin:-8px}.color-picker .color-picker__cursor.color-picker__cursor--light{border-color:#dadada}.color-picker .color-picker__sv{position:relative;direction:ltr;width:100%;height:130px;border:none;cursor:pointer;touch-action:manipulation;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0,0,0) 100%),linear-gradient(to right,rgb(255,255,255) 0%,rgba(255,255,255,0) 100%);background-size:100% 100%}.color-picker .color-picker__controls{display:flex;margin:8px;align-items:center}.color-picker .color-picker__controls .color-picker__selected{margin:4px;flex:48px 0 0}.color-picker .color-picker__controls .color-picker__hav{margin:-4px -4px -4px 0;flex:auto 1 1}.color-picker .color-picker__selected-color{width:48px;height:48px;display:flex;align-items:stretch;justify-content:stretch;border-radius:50%;background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat;box-shadow:0 0 8px -2px #00000080}.color-picker .color-picker__selected-color div{width:100%;height:100%;border-radius:50%}.color-picker .color-picker__add-selected{background:none;border:none;padding:0;width:100%;margin:0;color:#222;transition:color .2s linear;display:flex;align-items:center;justify-content:center;height:100%}.color-picker .color-picker__add-selected svg{fill:currentcolor;width:24px;height:auto}.color-picker .color-picker__add-selected.color-picker__add-selected--light{color:#dadada}.color-picker .color-picker__hav{display:flex;flex-wrap:wrap}.color-picker .color-picker__slider{width:100%;flex:100% 1 1;height:16px;margin:8px;position:relative}.color-picker .color-picker__slider.color-picker__slider--hue{background-size:100% 100%;background-image:linear-gradient(to right,rgb(255,0,0) 0%,rgb(255,255,0) 16.6666666667%,rgb(0,255,0) 33.3333333333%,rgb(0,255,255) 50%,rgb(0,0,255) 66.6666666667%,rgb(255,0,255) 83.3333333333%,rgb(255,0,0) 100%)}.color-picker .color-picker__slider.color-picker__slider--value{background-size:100% 100%;background-image:linear-gradient(to right,rgb(0,0,0) 0%,rgb(255,255,255) 100%)}.color-picker .color-picker__slider.color-picker__slider--alpha{background-size:16px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-repeat:repeat}.color-picker .color-picker__slider.color-picker__slider--alpha .color-picker__slider--alpha-bg{position:absolute;inset:0}.color-picker .color-picker__inputs{display:flex;margin:8px;align-items:flex-start}.color-picker .color-picker__inputs .color-picker__input-fields{flex:auto 1 1}.color-picker .color-picker__inputs .color-picker__input-type{flex:24px 0 0}.color-picker .color-picker__input-fields{display:flex}.color-picker .color-picker__input-fields .color-picker__input-field{margin:4px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;flex:20% 1 1}.color-picker .color-picker__input-fields .color-picker__input-field input{text-align:center;font-size:12px;height:24px;-webkit-appearance:none;appearance:none;flex:100% 1 1;padding:1px;border:#999 solid 1px;width:100%;background:none;min-width:0}.color-picker .color-picker__input-fields .color-picker__input-field input:invalid{box-shadow:none}.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-inner-spin-button,.color-picker .color-picker__input-fields .color-picker__input-field input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.color-picker .color-picker__input-fields .color-picker__input-field .color-picker__input-field-label{flex:100% 1 1;display:block;text-align:center;margin-top:4px}.color-picker .color-picker__input-type{width:24px;height:24px;margin-top:4px;display:flex;flex-wrap:wrap;background-size:contain;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjUwIDE2IDMwIDQ0IDcwIDQ0ICIvPjxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNTAgODQgNzAgNTYgMzAgNTYgIi8+PC9zdmc+);background-repeat:no-repeat;background-position:center}.color-picker .color-picker__input-type .color-picker__input-type-arrow{display:block;cursor:pointer;flex:100% 1 1;width:100%;height:50%}.color-picker .color-picker__separator{border-top:1px solid #999;margin-left:8px;margin-right:8px;flex:100% 1 1}.color-picker .color-picker__preset{display:flex;margin:8px;align-items:center;flex-wrap:wrap}.color-picker .color-picker__preset-label{margin:4px;flex:100% 1 1}.color-picker .color-picker__preset-items{display:flex;flex:100% 1 1;flex-wrap:wrap;align-items:flex-start}.color-picker .color-picker__preset-items .color-picker__preset-item{position:relative;flex:20px 1 1;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjQ0NDQ0NDIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgeT0iNTAiIGZpbGw9IiNDQ0NDQ0MiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIvPjxyZWN0IHk9IjUwIiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iNTAiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI1MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PC9zdmc+);background-size:100% 100%;margin:4px;border-radius:4px;border:1px solid #999;cursor:pointer}.color-picker .color-picker__preset-items .color-picker__preset-item .color-picker__preset-item-fill{position:relative;width:100%;padding-bottom:100%;border-radius:3px}.color-picker .color-picker__preset-items .color-picker__preset-item:empty{margin-top:0;margin-bottom:0;border-top:0;border-bottom:0}.color-picker .color-picker__remove-selected{border:none;padding:0;margin:0;color:#222;transition:color .2s linear;align-items:center;justify-content:center;box-shadow:0 0 8px -2px #00000080;position:absolute;width:12px;height:12px;right:-6px;top:-6px;background:#fff;border-radius:50%;display:flex}.color-picker .color-picker__remove-selected svg{fill:currentcolor;width:100%;height:auto}.color-picker .color-picker__buttons{display:flex;margin:0 8px 8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.color-picker .color-picker__buttons button{flex:auto 0 0;margin:4px;color:var(--nxt-color-picker-button-color, inherit);background:var(--nxt-color-picker-button-background, #dadada);padding:var(--nxt-color-picker-button-padding, 4px 8px);border:var(--nxt-color-picker-button-border, none);border-radius:var(--nxt-color-picker-button-border-radius, 4px);font-size:var(--nxt-color-picker-button-font-size, inherit);font-weight:var(--nxt-color-picker-button-font-weight, inherit)}:host-context(.color-picker__arrow--top) .color-picker{margin-bottom:16px}:host-context(.color-picker__arrow--top) .color-picker__arrow{border-width:12px 6px;border-color:#999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);left:12px;bottom:-24px}:host-context(.color-picker__arrow--left) .color-picker{margin-right:16px}:host-context(.color-picker__arrow--left) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #999;top:12px;left:230px}:host-context(.color-picker__arrow--right) .color-picker{margin-left:16px}:host-context(.color-picker__arrow--right) .color-picker__arrow{border-width:6px 12px;border-color:rgba(0,0,0,0) #999 rgba(0,0,0,0) rgba(0,0,0,0);top:12px;left:-24px}:host-context(.color-picker__arrow--bottom) .color-picker{margin-top:16px}:host-context(.color-picker__arrow--bottom) .color-picker__arrow{border-width:12px 6px;border-color:rgba(0,0,0,0) rgba(0,0,0,0) #999 rgba(0,0,0,0);top:-24px;left:12px}\n"] }]
|
|
1397
1397
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ColorPickerService }]; }, propDecorators: { onCancel: [{
|
|
@@ -1730,10 +1730,10 @@ class ColorPickerDirective {
|
|
|
1730
1730
|
}
|
|
1731
1731
|
return pos;
|
|
1732
1732
|
}
|
|
1733
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
1734
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.
|
|
1733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerDirective, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1734
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: ColorPickerDirective, selector: "[nxtColor]", inputs: { nxtColor: "nxtColor", width: "width", height: "height", toggle: "toggle", disabled: "disabled", mode: "mode", cmykEnabled: "cmykEnabled", outputFormat: "outputFormat", alphaChannel: "alphaChannel", fallbackColor: "fallbackColor", position: "position", positionOffset: "positionOffset", presetLabel: "presetLabel", presetColors: "presetColors", disableInput: "disableInput", dialogDisplay: "dialogDisplay", ignoredElements: "ignoredElements", saveClickOutside: "saveClickOutside", closeClickOutside: "closeClickOutside", okButton: "okButton", cancelButton: "cancelButton", presetColorsEditable: "presetColorsEditable", maxPresetColors: "maxPresetColors", useRootViewContainer: "useRootViewContainer" }, outputs: { open: "open", close: "close", inputChange: "inputChange", toggleChange: "toggleChange", sliderDragStart: "sliderDragStart", sliderChange: "sliderChange", sliderDragEnd: "sliderDragEnd", colorSelect: "colorSelect", colorSelectCancel: "colorSelectCancel", nxtColorChange: "nxtColorChange", cmykColorChange: "cmykColorChange", presetColorsChange: "presetColorsChange" }, host: { listeners: { "focus": "handleOpen($event)", "click": "handleOpen($event)", "input": "handleInput($event)", "change": "handleInput($event)" } }, exportAs: ["nxtColorPicker"], usesOnChanges: true, ngImport: i0 }); }
|
|
1735
1735
|
}
|
|
1736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
1736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerDirective, decorators: [{
|
|
1737
1737
|
type: Directive,
|
|
1738
1738
|
args: [{
|
|
1739
1739
|
selector: '[nxtColor]',
|
|
@@ -1826,16 +1826,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImpor
|
|
|
1826
1826
|
}] } });
|
|
1827
1827
|
|
|
1828
1828
|
class ColorPickerModule {
|
|
1829
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.
|
|
1830
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.
|
|
1829
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1830
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerModule, declarations: [TextDirective,
|
|
1831
1831
|
SliderDirective,
|
|
1832
1832
|
ColorPickerComponent,
|
|
1833
1833
|
ColorPickerDirective], imports: [CommonModule,
|
|
1834
1834
|
OverlayModule], exports: [ColorPickerDirective] }); }
|
|
1835
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.
|
|
1835
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerModule, imports: [CommonModule,
|
|
1836
1836
|
OverlayModule] }); }
|
|
1837
1837
|
}
|
|
1838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.
|
|
1838
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ColorPickerModule, decorators: [{
|
|
1839
1839
|
type: NgModule,
|
|
1840
1840
|
args: [{
|
|
1841
1841
|
declarations: [
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "nxt-color-picker",
|
|
3
3
|
"description": "Color picker widget for Angular",
|
|
4
4
|
"bugs": "https://github.com/Liquid-JS/nxt-components/issues",
|
|
5
|
-
"version": "16.
|
|
5
|
+
"version": "16.2.0",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": "https://github.com/Liquid-JS/nxt-components.git",
|
|
8
8
|
"homepage": "https://github.com/Liquid-JS/nxt-components/tree/master/packages/color-picker",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
"picker"
|
|
18
18
|
],
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@angular/cdk": "^16.
|
|
21
|
-
"@angular/common": "^16.
|
|
22
|
-
"@angular/core": "^16.
|
|
23
|
-
"@angular/localize": "^16.
|
|
20
|
+
"@angular/cdk": "^16.2.0",
|
|
21
|
+
"@angular/common": "^16.2.0",
|
|
22
|
+
"@angular/core": "^16.2.0",
|
|
23
|
+
"@angular/localize": "^16.2.0"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"tslib": "^2.5.0"
|