@vallift/ngl 0.0.25 → 0.0.26

package/components/context-menu-button/context-menu-button.component.d.ts

@@ -7,7 +7,7 @@ export declare class ContextMenuButtonComponent implements OnDestroy {
     overlay: Overlay;
     dialog: Dialog;
     actions: import("@angular/core").InputSignal<ContextMenuButtonAction[] | undefined>;
-    positionPreference: import("@angular/core").InputSignal<"topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight" | "leftTop" | "leftCenter" | "leftBottom" | "rightTop" | "rightCenter" | "rightBottom" | "center">;
+    positionPreference: import("@angular/core").InputSignal<"topLeft" | "topRight" | "topCenter" | "bottomLeft" | "bottomRight" | "bottomCenter" | "leftTop" | "leftCenter" | "leftBottom" | "rightTop" | "rightCenter" | "rightBottom" | "center">;
     onActionClicked: import("@angular/core").OutputEmitterRef<string>;
     private basePanelClass;
     private dialogRef?;

package/fesm2022/vallift-ngl.mjs

@@ -2316,7 +2316,7 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
         this.setHexColor(color);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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=\"sl-pointer 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 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\"\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)}.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"] }] });
+    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=\"sl-pointer 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 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\"\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  @if(enableAdditionalColor()) {\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\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)}.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -2325,7 +2325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         NgStyle,
                         FormsModule,
                         NgClass
-                    ], 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=\"sl-pointer 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 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\"\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)}.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"] }]
+                    ], 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=\"sl-pointer 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 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\"\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  @if(enableAdditionalColor()) {\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\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)}.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"] }]
         }], propDecorators: { controls: [{
                 type: Input
             }], colorChanged: [{