@vallift/ngl 0.0.15 → 0.0.17
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/fesm2022/vallift-ngl.mjs
CHANGED
|
@@ -2241,6 +2241,10 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
|
2241
2241
|
this.setColor(this.outputColor);
|
|
2242
2242
|
this.hexColorValue.set(this.converterService.toFormat(this.hsva(), ColorFormats.HEX));
|
|
2243
2243
|
this.alphaValue.set(this.mapRange(this.outputColor.a));
|
|
2244
|
+
let hex = this.converterService.toFormat(this.hsva(), ColorFormats.HEX);
|
|
2245
|
+
if (type == 'saturation-lightness') {
|
|
2246
|
+
this.setHexColor(hex, true);
|
|
2247
|
+
}
|
|
2244
2248
|
}
|
|
2245
2249
|
setColor(color) {
|
|
2246
2250
|
this.color = color;
|
|
@@ -2312,7 +2316,7 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
|
2312
2316
|
this.setHexColor(color);
|
|
2313
2317
|
}
|
|
2314
2318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2315
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"
|
|
2319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n [style.left.px]=\"slider().s\"\n [style.top.px]=\"slider().v\">\n </div>\n\n </div>\n\n <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n <!--Selected Color-->\n <div class=\"flex gap-5 items-center\">\n\n <!-- <div class=\"relative\">-->\n <!-- <div class=\"selected-color-background\"></div>-->\n <!-- <div-->\n <!-- class=\"h-10 w-10 rounded-xl selected-color\"-->\n <!-- [style.background-color]=\"selectedColor()\">-->\n <!-- </div>-->\n <!-- </div>-->\n\n\n <div class=\"flex flex-col w-full gap-4\">\n <div #hueSlider\n class=\"hue\"\n colorPickerSlider\n (valueChanged)=\"onSliderChange('hue', $event)\"\n [rgX]=\"1\">\n <div class=\"hue-pointer\"\n [style.left.px]=\"slider().h\"></div>\n </div>\n\n @if(enableAlpha()) {\n <div #alphaSlider\n class=\"alpha\"\n colorPickerSlider\n [rgX]=\"1\"\n (valueChanged)=\"onSliderChange('alpha', $event)\">\n <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n <div class=\"alpha-pointer\"\n [style.left.px]=\"slider().a\"></div>\n </div>\n }\n </div>\n\n </div>\n\n <div class=\"flex items-center gap-3\">\n <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n </div>\n @if (isTooltip()) {\n <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n (click)=\"onApplyCLicked()\">Apply\n </div>\n }\n </div>\n </div>\n\n </div>\n\n <div class=\"mt-4\">\n @for (row of getColorRows(); let $isLast = $last; track $index) {\n <div class=\"grid grid-cols-8 gap-2 mb-1\">\n @for (color of row; track $index) {\n <div\n (click)=\"onColorSelected(color)\"\n class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n [style.background-color]=\"color\">\n </div>\n }\n </div>\n\n <!-- Separator line unless it's the last row -->\n @if (!$isLast) {\n <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n }\n }\n </div>\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.hue-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: ColorPickerSliderDirective, selector: "[colorPickerSlider]", inputs: ["rgX", "rgY"], outputs: ["dragEnd", "dragStart", "valueChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2316
2320
|
}
|
|
2317
2321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
2318
2322
|
type: Component,
|
|
@@ -2321,7 +2325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2321
2325
|
NgStyle,
|
|
2322
2326
|
FormsModule,
|
|
2323
2327
|
NgClass
|
|
2324
|
-
], template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"
|
|
2328
|
+
], template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n [style.left.px]=\"slider().s\"\n [style.top.px]=\"slider().v\">\n </div>\n\n </div>\n\n <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n <!--Selected Color-->\n <div class=\"flex gap-5 items-center\">\n\n <!-- <div class=\"relative\">-->\n <!-- <div class=\"selected-color-background\"></div>-->\n <!-- <div-->\n <!-- class=\"h-10 w-10 rounded-xl selected-color\"-->\n <!-- [style.background-color]=\"selectedColor()\">-->\n <!-- </div>-->\n <!-- </div>-->\n\n\n <div class=\"flex flex-col w-full gap-4\">\n <div #hueSlider\n class=\"hue\"\n colorPickerSlider\n (valueChanged)=\"onSliderChange('hue', $event)\"\n [rgX]=\"1\">\n <div class=\"hue-pointer\"\n [style.left.px]=\"slider().h\"></div>\n </div>\n\n @if(enableAlpha()) {\n <div #alphaSlider\n class=\"alpha\"\n colorPickerSlider\n [rgX]=\"1\"\n (valueChanged)=\"onSliderChange('alpha', $event)\">\n <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n <div class=\"alpha-pointer\"\n [style.left.px]=\"slider().a\"></div>\n </div>\n }\n </div>\n\n </div>\n\n <div class=\"flex items-center gap-3\">\n <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n </div>\n @if (isTooltip()) {\n <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n (click)=\"onApplyCLicked()\">Apply\n </div>\n }\n </div>\n </div>\n\n </div>\n\n <div class=\"mt-4\">\n @for (row of getColorRows(); let $isLast = $last; track $index) {\n <div class=\"grid grid-cols-8 gap-2 mb-1\">\n @for (color of row; track $index) {\n <div\n (click)=\"onColorSelected(color)\"\n class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n [style.background-color]=\"color\">\n </div>\n }\n </div>\n\n <!-- Separator line unless it's the last row -->\n @if (!$isLast) {\n <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n }\n }\n </div>\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.hue-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"] }]
|
|
2325
2329
|
}], propDecorators: { controls: [{
|
|
2326
2330
|
type: Input
|
|
2327
2331
|
}], colorChanged: [{
|