@ieeesa-npm/presentation 0.13.2 → 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/components/dynamic-form/dynamic-form.component.d.ts

@@ -10,6 +10,7 @@ import { SelectedDate } from '../../models/selected-date.model';
 import { SelectedTime } from '../../models/selected-time.model';
 import { LinkEventEmitType } from '../../models/event-emit-type.model';
 import { SlideToggleOption } from '../../models/slide-toggle-options.model';
+import { SelectOpenedState } from '../../models/select-opened-state.model';
 import * as i0 from "@angular/core";
 /**
  * Creates a reactive form dynamically based on the passed form field configuration and handles the form events.
@@ -77,6 +78,7 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
     formTimeSelected: EventEmitter<SelectedTime>;
     supportTextLinkClick: EventEmitter<LinkEventEmitType>;
     formSlideToggleChange: EventEmitter<SlideToggleOption>;
+    dropdownOpenedChange: EventEmitter<SelectOpenedState>;
     form: FormGroup;
     formGroupArray: FormGroup[];
     formControlArray: any[];
@@ -245,6 +247,13 @@ export declare class DynamicFormComponent implements OnInit, AfterContentInit {
      * @memberof DynamicFormComponent
      */
     onSupportTextLinkClick(event: LinkEventEmitType): void;
+    /**
+     * Listens select form field dropdownOpenedChange event and emits dropdownOpenedChange event.
+     * @memberof DynamicFormComponent
+     * @param {SelectOpenedState} event
+     * @memberof DynamicFormComponent
+     */
+    onDropdownOpenedChange(event: SelectOpenedState): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "ieeesa-dynamic-form", ["dynamicForm"], { "formGroups": { "alias": "formGroups"; "required": false; }; "submitResponse": { "alias": "submitResponse"; "required": false; }; "searchResponse": { "alias": "searchResponse"; "required": false; }; "colWidth": { "alias": "colWidth"; "required": false; }; "isLegendVisible": { "alias": "isLegendVisible"; "required": false; }; "rightButtonLabel": { "alias": "rightButtonLabel"; "required": false; }; "leftButtonLabel": { "alias": "leftButtonLabel"; "required": false; }; "isSubmitButtonDisabled": { "alias": "isSubmitButtonDisabled"; "required": false; }; "isLeftButtonDisabled": { "alias": "isLeftButtonDisabled"; "required": false; }; "isLeftButtonNeeded": { "alias": "isLeftButtonNeeded"; "required": false; }; "actionButtonAlign": { "alias": "actionButtonAlign"; "required": false; }; }, { "formSubmit": "formSubmit"; "formChange": "formChange"; "formInput": "formInput"; "formLeftButtonClicked": "formLeftButtonClicked"; "formSearchApply": "formSearchApply"; "formGroupsReference": "formGroupsReference"; "dropdownChange": "dropdownChange"; "formCheckboxSelection": "formCheckboxSelection"; "formDateSelected": "formDateSelected"; "formSelectSearch": "formSelectSearch"; "formControlChange": "formControlChange"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "formAutoCompleteClearSearchValue": "formAutoCompleteClearSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; "formAfterContentInit": "formAfterContentInit"; "formSelectedDateRange": "formSelectedDateRange"; "addFormGroup": "addFormGroup"; "formTimeSelected": "formTimeSelected"; "supportTextLinkClick": "supportTextLinkClick"; "formSlideToggleChange": "formSlideToggleChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormComponent, "ieeesa-dynamic-form", ["dynamicForm"], { "formGroups": { "alias": "formGroups"; "required": false; }; "submitResponse": { "alias": "submitResponse"; "required": false; }; "searchResponse": { "alias": "searchResponse"; "required": false; }; "colWidth": { "alias": "colWidth"; "required": false; }; "isLegendVisible": { "alias": "isLegendVisible"; "required": false; }; "rightButtonLabel": { "alias": "rightButtonLabel"; "required": false; }; "leftButtonLabel": { "alias": "leftButtonLabel"; "required": false; }; "isSubmitButtonDisabled": { "alias": "isSubmitButtonDisabled"; "required": false; }; "isLeftButtonDisabled": { "alias": "isLeftButtonDisabled"; "required": false; }; "isLeftButtonNeeded": { "alias": "isLeftButtonNeeded"; "required": false; }; "actionButtonAlign": { "alias": "actionButtonAlign"; "required": false; }; }, { "formSubmit": "formSubmit"; "formChange": "formChange"; "formInput": "formInput"; "formLeftButtonClicked": "formLeftButtonClicked"; "formSearchApply": "formSearchApply"; "formGroupsReference": "formGroupsReference"; "dropdownChange": "dropdownChange"; "formCheckboxSelection": "formCheckboxSelection"; "formDateSelected": "formDateSelected"; "formSelectSearch": "formSelectSearch"; "formControlChange": "formControlChange"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "formAutoCompleteClearSearchValue": "formAutoCompleteClearSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; "formAfterContentInit": "formAfterContentInit"; "formSelectedDateRange": "formSelectedDateRange"; "addFormGroup": "addFormGroup"; "formTimeSelected": "formTimeSelected"; "supportTextLinkClick": "supportTextLinkClick"; "formSlideToggleChange": "formSlideToggleChange"; "dropdownOpenedChange": "dropdownOpenedChange"; }, never, never, true, never>;
 }

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

@@ -5,6 +5,7 @@ import { FieldConfig } from '../../models/field-config.model';
 import { SearchType } from '../../models/search.model';
 import { SearchComponent } from '../../components/search/search.component';
 import { FormUtilityService } from '../../services/form-utility.service';
+import { SelectOpenedState } from '../../models/select-opened-state.model';
 import * as i0 from "@angular/core";
 /**
  * Component implementation supports select type of form filed and select type is configurable to support single selection or multi-selection with multilevel or single level.
@@ -55,6 +56,7 @@ export declare class SelectComponent implements OnInit, AfterViewInit {
     placeholderText: any;
     optionSelected: EventEmitter<SelectOption>;
     optionSearched: EventEmitter<string>;
+    dropdownOpenedChange: EventEmitter<SelectOpenedState>;
     constructor(formUtilityService: FormUtilityService);
     /**
      * Initializes components instance properties from config if its defined otherwise creates form group and config.
@@ -113,5 +115,5 @@ export declare class SelectComponent implements OnInit, AfterViewInit {
      */
     arraySorting(list: SelectOption[]): SelectOption[];
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "ieeesa-select", never, { "isSortNeeded": { "alias": "isSortNeeded"; "required": false; }; "dropdownOptions": { "alias": "dropdownOptions"; "required": false; }; "selectedOptions": { "alias": "selectedOptions"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "isMultiLevel": { "alias": "isMultiLevel"; "required": false; }; "isLabelAlignedLeft": { "alias": "isLabelAlignedLeft"; "required": false; }; "selectLabel": { "alias": "selectLabel"; "required": false; }; "isMultiSelect": { "alias": "isMultiSelect"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "isSearch": { "alias": "isSearch"; "required": false; }; "placeholderText": { "alias": "placeholderText"; "required": false; }; }, { "optionSelected": "optionSelected"; "optionSearched": "optionSearched"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "ieeesa-select", never, { "isSortNeeded": { "alias": "isSortNeeded"; "required": false; }; "dropdownOptions": { "alias": "dropdownOptions"; "required": false; }; "selectedOptions": { "alias": "selectedOptions"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "isMultiLevel": { "alias": "isMultiLevel"; "required": false; }; "isLabelAlignedLeft": { "alias": "isLabelAlignedLeft"; "required": false; }; "selectLabel": { "alias": "selectLabel"; "required": false; }; "isMultiSelect": { "alias": "isMultiSelect"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "isSearch": { "alias": "isSearch"; "required": false; }; "placeholderText": { "alias": "placeholderText"; "required": false; }; }, { "optionSelected": "optionSelected"; "optionSearched": "optionSearched"; "dropdownOpenedChange": "dropdownOpenedChange"; }, never, never, true, never>;
 }

package/lib/directives/dynamic-form-field/dynamic-form-field.directive.d.ts

@@ -8,6 +8,7 @@ import { SelectedDate } from '../../models/selected-date.model';
 import { SelectedTime } from '../../models/selected-time.model';
 import { LinkEventEmitType } from '../../models/event-emit-type.model';
 import { SlideToggleOption } from '../../models/slide-toggle-options.model';
+import { SelectOpenedState } from '../../models/select-opened-state.model';
 import * as i0 from "@angular/core";
 /**
  * Provides the implementation of DynamicFormFieldDirective which hosts and creates the form fields components dynamically.
@@ -68,6 +69,7 @@ export declare class DynamicFormFieldDirective implements FormField, OnInit, OnD
     addFormGroup: EventEmitter<Event>;
     supportTextLinkClick: EventEmitter<LinkEventEmitType>;
     formSlideToggleChange: EventEmitter<SlideToggleOption>;
+    dropdownOpenedChange: EventEmitter<SelectOpenedState>;
     component: ComponentRef<any>;
     constructor(container: ViewContainerRef);
     /**
@@ -86,5 +88,5 @@ export declare class DynamicFormFieldDirective implements FormField, OnInit, OnD
      */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormFieldDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicFormFieldDirective, "[ieeesaDynamicFormField]", never, { "config": { "alias": "config"; "required": false; }; "group": { "alias": "group"; "required": false; }; "submitResponse": { "alias": "submitResponse"; "required": false; }; "searchResponse": { "alias": "searchResponse"; "required": false; }; }, { "formSearchApply": "formSearchApply"; "formDropdownSelected": "formDropdownSelected"; "formDateSelected": "formDateSelected"; "formTimeSelected": "formTimeSelected"; "formSelectedDateRange": "formSelectedDateRange"; "formSelectSearch": "formSelectSearch"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "autoCompleteClearSearchValue": "autoCompleteClearSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; "formCheckboxSelection": "formCheckboxSelection"; "formInputValue": "formInputValue"; "addFormGroup": "addFormGroup"; "supportTextLinkClick": "supportTextLinkClick"; "formSlideToggleChange": "formSlideToggleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicFormFieldDirective, "[ieeesaDynamicFormField]", never, { "config": { "alias": "config"; "required": false; }; "group": { "alias": "group"; "required": false; }; "submitResponse": { "alias": "submitResponse"; "required": false; }; "searchResponse": { "alias": "searchResponse"; "required": false; }; }, { "formSearchApply": "formSearchApply"; "formDropdownSelected": "formDropdownSelected"; "formDateSelected": "formDateSelected"; "formTimeSelected": "formTimeSelected"; "formSelectedDateRange": "formSelectedDateRange"; "formSelectSearch": "formSelectSearch"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "autoCompleteClearSearchValue": "autoCompleteClearSearchValue"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; "formCheckboxSelection": "formCheckboxSelection"; "formInputValue": "formInputValue"; "addFormGroup": "addFormGroup"; "supportTextLinkClick": "supportTextLinkClick"; "formSlideToggleChange": "formSlideToggleChange"; "dropdownOpenedChange": "dropdownOpenedChange"; }, 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/lib/models/select-opened-state.model.d.ts

@@ -0,0 +1,4 @@
+export interface SelectOpenedState {
+    controlName: string;
+    opened: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/presentation",
-  "version": "0.13.2",
+  "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';
@@ -57,6 +58,7 @@ export * from './lib/models/menu.model';
 export * from './lib/models/navigation-menu.model';
 export * from './lib/models/radio-option.model';
 export * from './lib/models/search.model';
+export * from './lib/models/select-opened-state.model';
 export * from './lib/models/select-option.model';
 export * from './lib/models/selected-date.model';
 export * from './lib/models/selected-time.model';
@@ -74,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"
   }
 }