@ieeesa-npm/presentation 0.13.4 → 0.13.5

package/lib/components/chips/chips.component.d.ts

@@ -183,6 +183,14 @@ export declare class ChipsComponent implements OnInit, OnDestroy {
         timePicker: {
             defaultTimeFormat: number;
         };
+        colorPicker: {
+            selectLabel: string;
+            cancelLabel: string;
+            defaultColor: string;
+            ariaLabel: string;
+            ariaDescription: string;
+            ariaDescribedById: string;
+        };
     };
     chipsType: typeof ChipsType;
     orientations: typeof ChipOrientation;

package/lib/components/color-picker/color-picker.component.d.ts

@@ -0,0 +1,64 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { NgxColorsTriggerDirective } from 'ngx-colors';
+import { FormGroup } from '@angular/forms';
+import { ColorFormat, ColorsAnimation } from '../../models/color-format.model';
+import { FieldConfig } from '../../models/field-config.model';
+import { FormUtilityService } from '../../services/form-utility.service';
+import * as i0 from "@angular/core";
+export declare class ColorPickerComponent implements OnInit {
+    private formUtilityService;
+    colorPickerDirective: NgxColorsTriggerDirective;
+    colorPickerTexts: any;
+    group: FormGroup;
+    config: FieldConfig;
+    colorPickerChange: EventEmitter<string>;
+    colorPickerSliderChange: EventEmitter<string>;
+    defaultColor: string;
+    canShowPalette: boolean;
+    palette: string[];
+    overlayClassName: string;
+    colorFormat: ColorFormat;
+    colorAnimation: ColorsAnimation;
+    formControlName: string;
+    paletteSelectLabel: any;
+    paletteCancelLabel: any;
+    colorPickerLabel: string;
+    isColorCodeLabelNeeded: boolean;
+    isArrowIconNeeded: boolean;
+    canHideTextInput: boolean;
+    canHideColorPicker: boolean;
+    constructor(formUtilityService: FormUtilityService);
+    ngOnInit(): void;
+    /**
+     * Sets the color to form group control.
+     * @memberof ColorPickerComponent
+     * @param {string} color
+     * @returns {void}
+     */
+    inputChange(color: string): void;
+    /**
+     * Sets canShowPalette to true when the palette is opened.
+     * @memberof ColorPickerComponent
+     * @returns {void}
+     */
+    onOpenPalette(): void;
+    /**
+     * Sets canShowPalette to false when the palette is closed.
+     * @memberof ColorPickerComponent
+     * @returns {void}
+     */
+    onClosePalette(): void;
+    /**
+     * Gets triggered when the the alpha, hue or Lightness sliders are changed
+     * @param {string} color
+     */
+    onSliderChange(color: string): void;
+    /**
+     * Toggles the palette panel.
+     * @memberof ColorPickerComponent
+     * @returns {void}
+     */
+    togglePalette(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "ieeesa-color-picker", never, { "defaultColor": { "alias": "defaultColor"; "required": false; }; "palette": { "alias": "palette"; "required": false; }; "overlayClassName": { "alias": "overlayClassName"; "required": false; }; "colorFormat": { "alias": "colorFormat"; "required": false; }; "colorAnimation": { "alias": "colorAnimation"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "paletteSelectLabel": { "alias": "paletteSelectLabel"; "required": false; }; "paletteCancelLabel": { "alias": "paletteCancelLabel"; "required": false; }; "colorPickerLabel": { "alias": "colorPickerLabel"; "required": false; }; "isColorCodeLabelNeeded": { "alias": "isColorCodeLabelNeeded"; "required": false; }; "isArrowIconNeeded": { "alias": "isArrowIconNeeded"; "required": false; }; "canHideTextInput": { "alias": "canHideTextInput"; "required": false; }; "canHideColorPicker": { "alias": "canHideColorPicker"; "required": false; }; }, { "colorPickerChange": "colorPickerChange"; "colorPickerSliderChange": "colorPickerSliderChange"; }, never, never, true, never>;
+}

package/lib/models/color-format.model.d.ts

@@ -0,0 +1,9 @@
+export declare enum ColorFormat {
+    hex = "hex",
+    rgba = "rgba",
+    hsla = "hsla"
+}
+export declare enum ColorsAnimation {
+    popup = "popup",
+    slidein = "slide-in"
+}

package/lib/models/field-config.model.d.ts

@@ -7,6 +7,7 @@ import { SelectOption } from '../models/select-option.model';
 import { AutoCompleteOption } from '../models/autocomplete-option.model';
 import { LinkType } from './link-type.model';
 import { SlideToggleOption } from './slide-toggle-options.model';
+import { ColorFormat, ColorsAnimation } from './color-format.model';
 export interface FieldConfig {
     isSortNeeded?: boolean;
     disabled?: boolean;
@@ -60,4 +61,15 @@ export interface FieldConfig {
     linkType?: LinkType;
     slideToggleOption?: SlideToggleOption;
     invalidDateRangeErrorMessage?: string;
+    palette?: string[];
+    defaultColor?: string;
+    colorFormat?: ColorFormat;
+    overlayClassName?: string;
+    colorAnimation?: ColorsAnimation;
+    paletteSelectLabel?: string;
+    paletteCancelLabel?: string;
+    isColorCodeLabelNeeded?: boolean;
+    isArrowIconNeeded?: boolean;
+    canHideColorPicker?: boolean;
+    canHideTextInput?: boolean;
 }

package/lib/models/form-control-types.model.d.ts

@@ -9,5 +9,6 @@ export declare enum FormControlType {
     AUTO_COMPLETE = "AUTO_COMPLETE",
     ADD_FORM_GROUP = "ADD_FORM_GROUP",
     TIME_PICKER = "TIME_PICKER",
-    SLIDE_TOGGLE = "SLIDE_TOGGLE"
+    SLIDE_TOGGLE = "SLIDE_TOGGLE",
+    COLOR_PICKER = "COLOR_PICKER"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/presentation",
-  "version": "0.13.4",
+  "version": "0.13.5",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",
@@ -18,7 +18,8 @@
     "moment": "^2.29.4",
     "rxjs": "~7.8.0",
     "zone.js": "~0.13.0",
-    "ngx-material-timepicker": "^13.1.1"
+    "ngx-material-timepicker": "^13.1.1",
+    "ngx-colors": "^3.5.3"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -31,6 +31,7 @@ export * from './lib/components/time-picker/time-picker.component';
 export * from './lib/components/tabs/tabs.component';
 export * from './lib/components/slide-toggle/slide-toggle.component';
 export * from './lib/components/card/card.component';
+export * from './lib/components/color-picker/color-picker.component';
 export * from './lib/directives/dynamic-form-field/dynamic-form-field.directive';
 export * from './lib/directives/focus-invalid-form-field/focus-invalid-form-field.directive';
 export * from './lib/directives/set-background/set-background.directive';
@@ -75,6 +76,7 @@ export * from './lib/models/slide-toggle-options.model';
 export * from './lib/models/button-type.model';
 export * from './lib/models/card-button.model';
 export * from './lib/models/card-info.model';
+export * from './lib/models/color-format.model';
 export * from './lib/services/datepicker.service';
 export * from './lib/services/form-utility.service';
 export * from './lib/presentation.module';

package/src/lib/assets/constants.json

@@ -244,5 +244,13 @@
   "defaultWelcomeBgColor": "#C0DCED",
   "timePicker": {
     "defaultTimeFormat": 12
+  },
+  "colorPicker": {
+    "selectLabel": "Select",
+    "cancelLabel": "Cancel",
+    "defaultColor": "#F4F3F3",
+    "ariaLabel": "Color Picker",
+    "ariaDescription": "Choose background color.",
+    "ariaDescribedById": "ariaColorPicker"
   }
 }