@vallift/ngl 0.0.17 → 0.0.19

package/components/button/button.component.d.ts

@@ -8,7 +8,7 @@ export declare class ButtonComponent {
     type: import("@angular/core").InputSignal<"submit" | "button" | "reset">;
     disabled: import("@angular/core").InputSignal<boolean>;
     fullWidth: import("@angular/core").InputSignal<boolean>;
-    appearance: import("@angular/core").InputSignal<"textType" | "primary" | "outline" | "primaryRounded" | "outlineRounded">;
+    appearance: import("@angular/core").InputSignal<"outline" | "textType" | "primary" | "primaryRounded" | "outlineRounded">;
     loading: import("@angular/core").InputSignal<boolean>;
     iconSize: import("@angular/core").InputSignal<number>;
     iconSrc: import("@angular/core").InputSignal<string | null | undefined>;

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=\"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"] }] });
+    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"] }] });
 }
 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=\"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"] }]
+                    ], 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"] }]
         }], propDecorators: { controls: [{
                 type: Input
             }], colorChanged: [{
@@ -2746,6 +2746,13 @@ class TextInputComponent extends BaseControlValueAccessor {
     isFocused = signal(false);
     ngControl = inject(NgControl, { optional: true, self: true });
     searchSubject = new Subject();
+    get placeholderSizeClass() {
+        return {
+            'placeholder-small': this.size() === 'small',
+            'placeholder-medium': this.size() === 'medium',
+            'placeholder-large': this.size() === 'large',
+        };
+    }
     constructor() {
         super();
         if (this.ngControl) {
@@ -2816,7 +2823,7 @@ class TextInputComponent extends BaseControlValueAccessor {
         this.isFocused.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n<!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"[getClass(), {\n      'placeholder:text-xs': size() === 'small',\n      'placeholder:text-base': size() === 'medium',\n      'placeholder:text-lg': size() === 'large'\n    }]\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -2828,7 +2835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         CommonModule,
                         BaseInputComponent,
                         NgxMaskDirective
-                    ], template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n<!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n" }]
+                    ], template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n    <!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [style.height]=\"sizeMap[size()]\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"[getClass(), {\n      'placeholder:text-xs': size() === 'small',\n      'placeholder:text-base': size() === 'medium',\n      'placeholder:text-lg': size() === 'large'\n    }]\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']