@obliczeniowo/elementary
Version:
Library made in Angular version 20
308 lines (302 loc) • 31.3 kB
JavaScript
import { ElementaryMath } from '@obliczeniowo/elementary/math';
import * as i0 from '@angular/core';
import { input, EventEmitter, Input, Output, Component, ViewChild, NgModule } from '@angular/core';
import { ColorRGB } from '@obliczeniowo/elementary/classes';
import * as i1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i2 from '@obliczeniowo/elementary/input';
import { InputModule } from '@obliczeniowo/elementary/input';
import * as i1$1 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
import * as i2$1 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import { CommonModule } from '@angular/common';
class ColorComponent {
elementRef;
colorsCanvas;
colorBlue;
colorAlpha;
colorsCtx;
colorBlueCtx;
colorAlphaCtx;
colorsBitmap;
chosenColor = new ColorRGB(255, 150, 0, 255);
inputBorder = input('outlined');
changed = new EventEmitter();
transparentImage;
pointer;
translations = {
red: 'Red',
green: 'Green',
blue: 'Blue',
alpha: 'Alpha'
};
constructor(elementRef) {
this.elementRef = elementRef;
}
ngOnInit() { }
ngAfterViewInit() {
this.colorsCanvas = this.elementRef.nativeElement.querySelector('#colors');
this.colorsCanvas.setAttribute('width', '255px');
this.colorsCanvas.setAttribute('height', '255px');
this.colorBlue = this.elementRef.nativeElement.querySelector('#blue_color_gradient');
this.colorBlue.setAttribute('width', '28px');
this.colorBlue.setAttribute('height', '255px');
this.colorAlpha = this.elementRef.nativeElement.querySelector('#alpha_color_gradient');
this.colorAlpha.setAttribute('width', '28px');
this.colorAlpha.setAttribute('height', '255px');
this.transparentImage = this.elementRef.nativeElement.querySelector('.transparent-image');
this.transparentImage.onload = () => {
this.redrawAll();
};
setTimeout(() => {
this.pointer = this.elementRef.nativeElement.querySelector('#map-colors-pointer');
this.colorsCtx = this.colorsCanvas.getContext('2d');
this.colorBlueCtx = this.colorBlue.getContext('2d');
this.colorAlphaCtx = this.colorAlpha.getContext('2d');
this.colorsBitmap = this.colorsCtx.getImageData(0, 0, 255, 255);
this.redrawAll();
});
}
valueChanged(event, value, emit = true) {
if (event.target.value !== ElementaryMath.minmax(event.target.value, 0, 255)) {
event.target.value = ElementaryMath.minmax(event.target.value, 0, 255);
}
this.chosenColor[value] = event.target.value;
this.redrawAll();
if (emit) {
this.changed.emit(this.chosenColor);
}
}
redrawAll() {
if (this.colorsCtx && this.colorBlueCtx && this.colorAlphaCtx) {
this.redrawBlueGradientMap();
this.redrawColorsMap();
this.refreshAlphaGradient();
}
}
redrawColorsMap() {
const b = this.chosenColor.blue;
for (let x = 0; x < 255; x++) {
for (let y = 0; y < 255; y++) {
this.colorsBitmap.data[x * 4 + 255 * 4 * y] = x;
this.colorsBitmap.data[x * 4 + 1 + 255 * 4 * y] = y;
this.colorsBitmap.data[x * 4 + 2 + 255 * 4 * y] = b;
this.colorsBitmap.data[x * 4 + 3 + 255 * 4 * y] = 255;
}
}
this.colorsCtx.putImageData(this.colorsBitmap, 0, 0);
}
redrawBlueGradientMap() {
const grd = this.colorBlueCtx.createLinearGradient(0, 0, 0, this.colorBlue.height);
grd.addColorStop(0, `rgb(${this.chosenColor.red}, ${this.chosenColor.green}, 255)`);
grd.addColorStop(1, `rgb(${this.chosenColor.red}, ${this.chosenColor.green}, 0)`);
this.colorBlueCtx.fillStyle = grd;
this.colorBlueCtx.fillRect(0, 0, this.colorBlue.width, this.colorBlue.height);
this.colorBlueCtx.beginPath();
this.colorBlueCtx.strokeStyle =
this.chosenColor.red + this.chosenColor.green + this.chosenColor.blue <
450
? '#ffffff'
: '#000000';
this.colorBlueCtx.moveTo(0, 255 - this.chosenColor.blue);
this.colorBlueCtx.lineTo(this.colorBlue.width, 255 - this.chosenColor.blue);
this.colorBlueCtx.stroke();
}
refreshAlphaGradient() {
if (this.transparentImage.width) {
this.colorAlphaCtx.drawImage(this.transparentImage, 0, 0, this.colorAlpha.width, this.colorAlpha.height);
}
const grd = this.colorAlphaCtx.createLinearGradient(0, 0, 0, this.colorAlpha.height);
grd.addColorStop(0, 'rgba(' +
this.chosenColor.red +
', ' +
this.chosenColor.green +
', ' +
this.chosenColor.blue +
', 1)');
grd.addColorStop(1, 'rgba(' +
this.chosenColor.red +
', ' +
this.chosenColor.green +
', ' +
this.chosenColor.blue +
', 0)');
this.colorAlphaCtx.fillStyle = grd;
this.colorAlphaCtx.fillRect(0, 0, this.colorAlpha.height, this.colorAlpha.height);
this.colorAlphaCtx.beginPath();
this.colorAlphaCtx.fillStyle = '#ffffff';
this.colorAlphaCtx.fillRect(0, 255 - this.chosenColor.alpha - 2, this.colorAlpha.width, 4);
this.colorAlphaCtx.beginPath();
this.colorAlphaCtx.strokeStyle = 'black';
this.colorAlphaCtx.moveTo(0, 255 - this.chosenColor.alpha);
this.colorAlphaCtx.lineTo(this.colorAlpha.width, 255 - this.chosenColor.alpha);
this.colorAlphaCtx.stroke();
}
// events:
colorsMapClicked(event) {
const rect = event.target.getBoundingClientRect();
event.stopPropagation();
this.chosenColor.green = event.clientY - rect.top;
this.chosenColor.red = event.clientX - rect.left;
this.redrawAll();
this.changed.emit(this.chosenColor);
}
blueMapClicked(event) {
const rect = event.target.getBoundingClientRect();
event.stopPropagation();
this.chosenColor.blue = 255 - event.clientY + rect.top;
this.redrawAll();
this.changed.emit(this.chosenColor);
}
alphaMapClicked(event) {
const rect = event.target.getBoundingClientRect();
event.stopPropagation();
this.chosenColor.alpha = 255 - event.clientY + rect.top;
this.redrawAll();
this.changed.emit(this.chosenColor);
}
input(event, field) {
event.target.value = ElementaryMath.minmax(event.target.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1'), 0, 255);
this.valueChanged(event, field, false);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ColorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ColorComponent, isStandalone: false, selector: "obl-color", inputs: { chosenColor: { classPropertyName: "chosenColor", publicName: "chosenColor", isSignal: false, isRequired: false, transformFunction: null }, inputBorder: { classPropertyName: "inputBorder", publicName: "inputBorder", isSignal: true, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, ngImport: i0, template: "<div class=\"color-component\" (click)=\"$event.stopPropagation()\">\n <div class=\"color-area\">\n <img\n class=\"transparent-image\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAD+CAYAAAApgWUdAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QEeCwMx6szXgwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAyklEQVR42u3VsQ2AMAxFQYPYyNN6qMwUBgCMoEAUlxahK36it1TVjIszxojuZGb7/ez/NT4+QODjs3VX/821v/vfhkDg8R12b02egEA9tCFQD/UQCNRDGwL1UA+BQD20IVAP9RAI1EMbAvVQD4FAPbQhUA/1EAjUQxsC9VAPgUA9tCFQD/UQCNRDGwL1UA+BQD20IVAP9RAI1EMbAvVQD4FAPbQhUA/1EAjUQxsC9VAPgUA9tCFQD/UQCNRDGwK9Qz0EAvXQhsD/gTvlBcRrM7n5twAAAABJRU5ErkJggg==\"\n (load)=\"redrawAll()\"\n />\n\n <div class=\"color-map-frame\">\n <div class=\"color-canvas-area\">\n <canvas\n id=\"colors\"\n #colorsC\n (click)=\"colorsMapClicked($event)\"\n ></canvas>\n <div\n class=\"map-colors-pointer map-background\"\n [style.left.px]=\"chosenColor.red - 6\"\n [style.top.px]=\"chosenColor.green - 6\"\n ></div>\n <div\n class=\"map-colors-pointer\"\n [style.left.px]=\"chosenColor.red - 5\"\n [style.top.px]=\"chosenColor.green - 5\"\n ></div>\n </div>\n </div>\n\n <div class=\"gradient-frame\" (click)=\"blueMapClicked($event)\">\n <canvas id=\"blue_color_gradient\"></canvas>\n </div>\n\n <div class=\"gradient-frame\" (click)=\"alphaMapClicked($event)\">\n <canvas id=\"alpha_color_gradient\"></canvas>\n </div>\n\n <div class=\"controls\">\n <obl-input-wrapper [label]=\"translations.red\" [display]=\"inputBorder()\">\n <input\n oblInput\n type=\"number\"\n name=\"red\"\n [(ngModel)]=\"chosenColor.red\"\n min=\"0\"\n max=\"255\"\n (change)=\"valueChanged($event, 'red')\"\n (input)=\"input($event, 'red')\"\n />\n </obl-input-wrapper>\n\n <obl-input-wrapper [label]=\"translations.green\" [display]=\"inputBorder()\">\n <input\n oblInput\n type=\"number\"\n name=\"green\"\n [(ngModel)]=\"chosenColor.green\"\n min=\"0\"\n max=\"255\"\n (change)=\"valueChanged($event, 'green')\"\n (input)=\"input($event, 'green')\"\n />\n </obl-input-wrapper>\n\n <obl-input-wrapper [label]=\"translations.blue\" [display]=\"inputBorder()\">\n <input\n oblInput\n type=\"number\"\n name=\"blue\"\n min=\"0\"\n max=\"255\"\n [(ngModel)]=\"chosenColor.blue\"\n (change)=\"valueChanged($event, 'blue')\"\n (input)=\"input($event, 'blue')\"\n />\n </obl-input-wrapper>\n\n <obl-input-wrapper [label]=\"translations.alpha\" [display]=\"inputBorder()\">\n <input\n oblInput\n type=\"number\"\n name=\"transparent\"\n max=\"255\"\n min=\"0\"\n [(ngModel)]=\"chosenColor.alpha\"\n (change)=\"valueChanged($event, 'alpha')\"\n (input)=\"input($event, 'alpha')\"\n />\n </obl-input-wrapper>\n </div>\n </div>\n\n <ng-content></ng-content>\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}#colors{width:255px;height:255px}#alpha_color_gradient,#blue_color_gradient{width:28px;height:255px}.controls{margin-top:20px;margin-left:10px;max-width:130px;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:10px}.controls obl-input-wrapper{display:block}.map-colors-pointer{width:10px;height:10px;border-radius:50%;background-color:none;border:1px solid red;position:absolute}.map-colors-pointer.map-background{border:3px solid white;width:8px;height:8px}.color-canvas-area{display:inline-block}.transparent-image{display:none}.color-map-frame{border-radius:10px;padding:10px;display:inline-block}.gradient-frame{padding:10px 10px 10px 0;display:inline-block}.color-component{border-radius:5px;border:1px solid var(--default-border-color);background-color:var(--default-background-color);max-width:500px}.color-component .color-area{display:flex}:host{max-width:500px;width:500px;height:280px;display:block}.color-canvas-area{position:relative}.color-canvas-area .map-color-picker{position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.InputDirective, selector: "input[oblInput]", inputs: ["outlined"], exportAs: ["oblInput"] }, { kind: "component", type: i2.InputWrapperComponent, selector: "obl-input-wrapper", inputs: ["label", "display", "cancellable", "step", "errors", "translations", "labelAnimation", "small"], outputs: ["loaded"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ColorComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-color', standalone: false, template: "<div class=\"color-component\" (click)=\"$event.stopPropagation()\">\n <div class=\"color-area\">\n <img\n class=\"transparent-image\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAD+CAYAAAApgWUdAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QEeCwMx6szXgwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAyklEQVR42u3VsQ2AMAxFQYPYyNN6qMwUBgCMoEAUlxahK36it1TVjIszxojuZGb7/ez/NT4+QODjs3VX/821v/vfhkDg8R12b02egEA9tCFQD/UQCNRDGwL1UA+BQD20IVAP9RAI1EMbAvVQD4FAPbQhUA/1EAjUQxsC9VAPgUA9tCFQD/UQCNRDGwL1UA+BQD20IVAP9RAI1EMbAvVQD4FAPbQhUA/1EAjUQxsC9VAPgUA9tCFQD/UQCNRDGwK9Qz0EAvXQhsD/gTvlBcRrM7n5twAAAABJRU5ErkJggg==\"\n (load)=\"redrawAll()\"\n />\n\n <div class=\"color-map-frame\">\n <div class=\"color-canvas-area\">\n <canvas\n id=\"colors\"\n #colorsC\n (click)=\"colorsMapClicked($event)\"\n ></canvas>\n <div\n class=\"map-colors-pointer map-background\"\n [style.left.px]=\"chosenColor.red - 6\"\n [style.top.px]=\"chosenColor.green - 6\"\n ></div>\n <div\n class=\"map-colors-pointer\"\n [style.left.px]=\"chosenColor.red - 5\"\n [style.top.px]=\"chosenColor.green - 5\"\n ></div>\n </div>\n </div>\n\n <div class=\"gradient-frame\" (click)=\"blueMapClicked($event)\">\n <canvas id=\"blue_color_gradient\"></canvas>\n </div>\n\n <div class=\"gradient-frame\" (click)=\"alphaMapClicked($event)\">\n <canvas id=\"alpha_color_gradient\"></canvas>\n </div>\n\n <div class=\"controls\">\n <obl-input-wrapper [label]=\"translations.red\" [display]=\"inputBorder()\">\n <input\n oblInput\n type=\"number\"\n name=\"red\"\n [(ngModel)]=\"chosenColor.red\"\n min=\"0\"\n max=\"255\"\n (change)=\"valueChanged($event, 'red')\"\n (input)=\"input($event, 'red')\"\n />\n </obl-input-wrapper>\n\n <obl-input-wrapper [label]=\"translations.green\" [display]=\"inputBorder()\">\n <input\n oblInput\n type=\"number\"\n name=\"green\"\n [(ngModel)]=\"chosenColor.green\"\n min=\"0\"\n max=\"255\"\n (change)=\"valueChanged($event, 'green')\"\n (input)=\"input($event, 'green')\"\n />\n </obl-input-wrapper>\n\n <obl-input-wrapper [label]=\"translations.blue\" [display]=\"inputBorder()\">\n <input\n oblInput\n type=\"number\"\n name=\"blue\"\n min=\"0\"\n max=\"255\"\n [(ngModel)]=\"chosenColor.blue\"\n (change)=\"valueChanged($event, 'blue')\"\n (input)=\"input($event, 'blue')\"\n />\n </obl-input-wrapper>\n\n <obl-input-wrapper [label]=\"translations.alpha\" [display]=\"inputBorder()\">\n <input\n oblInput\n type=\"number\"\n name=\"transparent\"\n max=\"255\"\n min=\"0\"\n [(ngModel)]=\"chosenColor.alpha\"\n (change)=\"valueChanged($event, 'alpha')\"\n (input)=\"input($event, 'alpha')\"\n />\n </obl-input-wrapper>\n </div>\n </div>\n\n <ng-content></ng-content>\n</div>\n", styles: [":root{--obl-primary: #00afaf;--obl-secondary: #008caf;--default-border-color: gray;--default-focus-color: gray;--default-border-outline-color: #080808;--default-disabled-color: gray;--default-background-color: white;--default-hover-color: #eeeeee;--obl-default-error-color: red;--obl-dialog-background: #d3d3d3;--default-radio-color: black;--disabled-color: gray;--default-hex-button-border-color: #008caf;--default-hex-button-hover-border-color: #00afaf;--select-item-background-color: #e4e4e4;--select-item-text-color: #5a5a5a;--default-text-color: black;--obl-default-button-text-color: black;--obl-default-icon-color: black;--equalizer-background-bar-color: #575656;--equalizer-value-bar-color: #e6e6e6;--diagram-3d-background-color: black;--slider-value-container-color: gray;--slider-value-color: #d1d1d1;--slider-hover-value-color: white;--digit-fill-color: #cccccc;--digit-lighted-color: black;--horizontal-progress-bar-value-color: #504f4f;--horizontal-progress-bar-background-pattern-color: #dddddd;--horizontal-progress-bar-value-pattern-color: #b3b3b3;--horizontal-progress-bar-border-rect-color: #cccccc;--temperature-text-color: black;--temperature-path-stroke-color: black;--post-diagram-scale-line-color: #c8c8c8;--volume-channel-secondary-color: gray;--volume-channel-primary-color: #f2f2f2;--arch-progress-secondary-color: #eeeeee;--obl-linear-diagram-greed-color: gray;--obl-rating-selected-color: gold;--obl-rating-color: #cccccc}:root{--obl-spinner-width: 30px;--obl-font-size: 14px}#colors{width:255px;height:255px}#alpha_color_gradient,#blue_color_gradient{width:28px;height:255px}.controls{margin-top:20px;margin-left:10px;max-width:130px;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:10px}.controls obl-input-wrapper{display:block}.map-colors-pointer{width:10px;height:10px;border-radius:50%;background-color:none;border:1px solid red;position:absolute}.map-colors-pointer.map-background{border:3px solid white;width:8px;height:8px}.color-canvas-area{display:inline-block}.transparent-image{display:none}.color-map-frame{border-radius:10px;padding:10px;display:inline-block}.gradient-frame{padding:10px 10px 10px 0;display:inline-block}.color-component{border-radius:5px;border:1px solid var(--default-border-color);background-color:var(--default-background-color);max-width:500px}.color-component .color-area{display:flex}:host{max-width:500px;width:500px;height:280px;display:block}.color-canvas-area{position:relative}.color-canvas-area .map-color-picker{position:absolute}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { chosenColor: [{
type: Input
}], changed: [{
type: Output
}], translations: [{
type: Input
}] } });
class ColorPickerControlComponent {
pChosenColor = new ColorRGB(0, 0, 0, 255);
isOpen = false;
translations = input({
set: 'Ustaw',
cancel: 'Anuluj',
red: 'Czerwony',
green: 'Zielony',
blue: 'Niebieski',
alpha: 'Przezroczystość'
});
set chosenColor(chosenColor) {
if (!(chosenColor instanceof ColorRGB)) {
chosenColor = new ColorRGB(chosenColor.r, chosenColor.g, chosenColor.b, chosenColor.a);
}
this.pChosenColor = chosenColor;
if (this.colorComponent) {
this.colorComponent.chosenColor = this.pChosenColor;
this.colorComponent.redrawAll();
}
}
inputBorder = input('outlined');
buttonPos;
colorComponent;
changed = new EventEmitter();
onChange = (value) => {
};
onTouched = () => { };
registerOnValidatorChange(fn) { this.onChange = fn; }
writeValue(set) {
this.chosenColor = set || new ColorRGB(0, 0, 0, 255);
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
save() {
if (this.colorComponent) {
this.writeValue(this.colorComponent.chosenColor.copy());
this.onChange(this.colorComponent.chosenColor.copy());
this.changed.emit(this.pChosenColor);
}
this.isOpen = !this.isOpen;
}
toggle() {
this.isOpen = !this.isOpen;
setTimeout(() => {
if (this.colorComponent) {
this.colorComponent.chosenColor = this.pChosenColor.copy();
this.colorComponent.redrawAll();
}
}, 0);
}
color() {
return this.pChosenColor.getRGBAColor();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ColorPickerControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ColorPickerControlComponent, isStandalone: false, selector: "obl-color-picker-control", inputs: { translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null }, chosenColor: { classPropertyName: "chosenColor", publicName: "chosenColor", isSignal: false, isRequired: false, transformFunction: null }, inputBorder: { classPropertyName: "inputBorder", publicName: "inputBorder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: ColorPickerControlComponent
},
], viewQueries: [{ propertyName: "buttonPos", first: true, predicate: ["buttonPos"], descendants: true }, { propertyName: "colorComponent", first: true, predicate: ["colorComponent"], descendants: true }], ngImport: i0, template: "<div>\n <button\n oblButton\n class=\"color-button\"\n (click)=\"toggle()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n >\n <div class=\"color-key\" [style.backgroundColor]=\"color()\"></div>\n </button>\n</div>\n\n<ng-template\n #picker\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (overlayOutsideClick)=\"toggle()\"\n>\n <obl-color [translations]=\"translations()\" [inputBorder]=\"inputBorder()\" #colorComponent>\n <div class=\"controls\">\n <button oblButton (click)=\"save()\">{{ translations().set }}</button>\n <button oblButton (click)=\"toggle()\">{{ translations().cancel }}</button>\n </div>\n </obl-color>\n</ng-template>\n", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}app-color-component{width:470px;max-width:470px;height:300px;max-height:300px}.color-key{height:20px;width:20px}.mat-raised-button.color-button{padding:5px;min-width:30px}.controls{padding:0 10px 10px;display:flex;justify-content:flex-end}.controls button{--obl-button-background-color: transparent;--obl-button-text-color: var(--default-text-color);--obl-button-background-hover-color: var(--default-hover-color)}.color-button{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "component", type: ColorComponent, selector: "obl-color", inputs: ["chosenColor", "inputBorder", "translations"], outputs: ["changed"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ColorPickerControlComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-color-picker-control', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: ColorPickerControlComponent
},
], standalone: false, template: "<div>\n <button\n oblButton\n class=\"color-button\"\n (click)=\"toggle()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n >\n <div class=\"color-key\" [style.backgroundColor]=\"color()\"></div>\n </button>\n</div>\n\n<ng-template\n #picker\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (overlayOutsideClick)=\"toggle()\"\n>\n <obl-color [translations]=\"translations()\" [inputBorder]=\"inputBorder()\" #colorComponent>\n <div class=\"controls\">\n <button oblButton (click)=\"save()\">{{ translations().set }}</button>\n <button oblButton (click)=\"toggle()\">{{ translations().cancel }}</button>\n </div>\n </obl-color>\n</ng-template>\n", styles: [":root{--obl-spinner-width: 30px;--obl-font-size: 14px}app-color-component{width:470px;max-width:470px;height:300px;max-height:300px}.color-key{height:20px;width:20px}.mat-raised-button.color-button{padding:5px;min-width:30px}.controls{padding:0 10px 10px;display:flex;justify-content:flex-end}.controls button{--obl-button-background-color: transparent;--obl-button-text-color: var(--default-text-color);--obl-button-background-hover-color: var(--default-hover-color)}.color-button{padding:5px}\n"] }]
}], propDecorators: { chosenColor: [{
type: Input
}], buttonPos: [{
type: ViewChild,
args: ['buttonPos', { static: false }]
}], colorComponent: [{
type: ViewChild,
args: ['colorComponent', { static: false }]
}], changed: [{
type: Output
}] } });
class ColorPickerModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: ColorPickerModule, declarations: [ColorComponent,
ColorPickerControlComponent], imports: [CommonModule,
FormsModule,
OverlayModule,
InputModule,
ButtonsModule], exports: [ColorComponent,
ColorPickerControlComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ColorPickerModule, imports: [CommonModule,
FormsModule,
OverlayModule,
InputModule,
ButtonsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ColorPickerModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ColorComponent,
ColorPickerControlComponent,
],
imports: [
CommonModule,
FormsModule,
OverlayModule,
InputModule,
ButtonsModule
],
exports: [
ColorComponent,
ColorPickerControlComponent
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ColorComponent, ColorPickerControlComponent, ColorPickerModule };
//# sourceMappingURL=obliczeniowo-elementary-color-picker.mjs.map