@ieeesa-npm/presentation 0.16.9 → 0.17.0

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

@@ -185,12 +185,26 @@ export declare class ChipsComponent implements OnInit, OnDestroy {
             defaultTimeFormat: number;
         };
         colorPicker: {
-            selectLabel: string;
-            cancelLabel: string;
+            label: {
+                select: string;
+                cancel: string;
+            };
+            ariaLabel: {
+                colorPicker: string;
+                next: string;
+                back: string;
+                select: string;
+                cancel: string;
+                hexCodeInput: string;
+                palette: string;
+            };
             defaultColor: string;
-            ariaLabel: string;
             ariaDescription: string;
             ariaDescribedById: string;
+            paletteColors: {
+                name: string;
+                hexCode: string;
+            }[];
         };
         fileUpload: {
             label: {

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

@@ -1,14 +1,16 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { NgxColorsTriggerDirective } from 'ngx-colors';
 import { FormGroup } from '@angular/forms';
-import { ColorFormat, ColorsAnimation } from '../../models/color-format.model';
+import { ColorFormat, ColorsAnimation, PaletteColor } 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 {
+export declare class ColorPickerComponent implements OnInit, OnDestroy {
+    private elementRef;
     private formUtilityService;
     colorPickerDirective: NgxColorsTriggerDirective;
     colorPickerTexts: any;
+    paletteColors: PaletteColor[];
     group: FormGroup;
     config: FieldConfig;
     colorPickerChange: EventEmitter<string>;
@@ -27,7 +29,7 @@ export declare class ColorPickerComponent implements OnInit {
     isArrowIconNeeded: boolean;
     canHideTextInput: boolean;
     canHideColorPicker: boolean;
-    constructor(formUtilityService: FormUtilityService);
+    constructor(elementRef: ElementRef, formUtilityService: FormUtilityService);
     ngOnInit(): void;
     /**
      * Sets the color to form group control.
@@ -59,6 +61,27 @@ export declare class ColorPickerComponent implements OnInit {
      * @returns {void}
      */
     togglePalette(): void;
+    /**
+     * Listening the color picker events to achieve the accessibility for color palette.
+     * canAddListener false remove the event listeners which we calls in ngDestroy,
+     * canAddListener true adding the event listeners while opening the color palette.
+     * @memberof ColorPickerComponent
+     * @param {boolean} canAddListener
+     * @returns {void}
+     */
+    colorPickerEventHandlers(canAddListener: boolean): void;
+    /**
+     * Listens keydown event handles to make the palette focusable.
+     * @memberof ColorPickerComponent
+     * @param {HTMLElement[]} colorPallettesList
+     * @param {KeyboardEvent} event
+     * @returns {void}
+     */
+    colorPickerKeyDownHandler(colorPallettesList: HTMLElement[], event: KeyboardEvent): void;
+    /**
+     * Removing the active listeners while component get destroyed.
+     */
+    ngOnDestroy(): 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/file-upload/file-upload.component.d.ts

@@ -182,12 +182,26 @@ export declare class FileUploadComponent implements OnInit {
             defaultTimeFormat: number;
         };
         colorPicker: {
-            selectLabel: string;
-            cancelLabel: string;
+            label: {
+                select: string;
+                cancel: string;
+            };
+            ariaLabel: {
+                colorPicker: string;
+                next: string;
+                back: string;
+                select: string;
+                cancel: string;
+                hexCodeInput: string;
+                palette: string;
+            };
             defaultColor: string;
-            ariaLabel: string;
             ariaDescription: string;
             ariaDescribedById: string;
+            paletteColors: {
+                name: string;
+                hexCode: string;
+            }[];
         };
         fileUpload: {
             label: {
@@ -227,10 +241,7 @@ export declare class FileUploadComponent implements OnInit {
                     "2025": string;
                     "2026": string;
                 };
-            }; /**
-             * Initiates the file upload process for independent file upload component.
-             * @memberof FileUploadComponent
-             */
+            };
         };
         list: {
             defaultIndentation: number;

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

@@ -7,3 +7,7 @@ export declare enum ColorsAnimation {
     popup = "popup",
     slidein = "slide-in"
 }
+export interface PaletteColor {
+    name: string;
+    hexCode: string;
+}

package/lib/services/file-upload.service.d.ts

@@ -181,17 +181,26 @@ export declare class FileUploadService implements OnDestroy {
             defaultTimeFormat: number;
         };
         colorPicker: {
-            selectLabel: string;
-            cancelLabel: string; /**
-             * Retrieves presigned URL for downloading files to Amazon S3 bucket.
-             * @param {(File | FileList)} file
-             * @return {Observable<string>}
-             * @memberof FileUploadService
-             */
+            label: {
+                select: string;
+                cancel: string;
+            };
+            ariaLabel: {
+                colorPicker: string;
+                next: string;
+                back: string;
+                select: string;
+                cancel: string;
+                hexCodeInput: string;
+                palette: string;
+            };
             defaultColor: string;
-            ariaLabel: string;
             ariaDescription: string;
             ariaDescribedById: string;
+            paletteColors: {
+                name: string;
+                hexCode: string;
+            }[];
         };
         fileUpload: {
             label: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/presentation",
-  "version": "0.16.9",
+  "version": "0.17.0",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",

package/src/lib/assets/constants.json

@@ -252,12 +252,87 @@
     "defaultTimeFormat": 12
   },
   "colorPicker": {
-    "selectLabel": "Select",
-    "cancelLabel": "Cancel",
+    "label": {
+      "select": "Select",
+      "cancel": "Cancel"
+    },
+    "ariaLabel": {
+      "colorPicker": "Color picker.",
+      "next": "More colors.",
+      "back": "Back to color palettes.",
+      "select": "Select color.",
+      "cancel": "Closes the color picker.",
+      "hexCodeInput": "Input your color hex code.",
+      "palette": "Color palettes."
+    },
     "defaultColor": "#F4F3F3",
-    "ariaLabel": "Color Picker",
     "ariaDescription": "Choose background color.",
-    "ariaDescribedById": "ariaColorPicker"
+    "ariaDescribedById": "ariaColorPicker",
+    "paletteColors": [
+      { "name": "IEEE SA Blue", "hexCode": "#00B5E2" },
+      { "name": "IEEE Master Brand Blue", "hexCode": "#00629B" },
+      { "name": "IEEE SA Medium Blue", "hexCode": "#4AC9E3" },
+      { "name": "IEEE SA Dark Grey", "hexCode": "#63666A" },
+      { "name": "IEEE SA Medium Grey", "hexCode": "#A7A8AA" },
+      { "name": "IEEE SA Light Grey", "hexCode": "#D9D9D6" },
+      { "name": "IEEE Brand Yellow", "hexCode": "#FFD100" },
+      { "name": "IEEE Brand Orange", "hexCode": "#FFA300" },
+      { "name": "IEEE Brand Red", "hexCode": "#BA0C2F" },
+      { "name": "IEEE White", "hexCode": "#FFFFFF" },
+      { "name": "IEEE Neutral 95", "hexCode": "#F1F1F1" },
+      { "name": "IEEE Neutral Variant 95", "hexCode": "#F0F0F0" },
+      { "name": "IEEE Primary Brand 95", "hexCode": "#EAF3F9" },
+      { "name": "IEEE Primary 95", "hexCode": "#DAE9F1" },
+      { "name": "IEEE SA Medium Blue 95", "hexCode": "#F8FCFF" },
+      { "name": "IEEE Brand Yellow 95", "hexCode": "#FFFBEB" },
+      { "name": "IEEE Brand Orange 95", "hexCode": "#FFF8EB" },
+      { "name": "IEEE Error 99", "hexCode": "#FFFBF9" },
+      { "name": "IEEE SA Dark Grey 90", "hexCode": "#CCD2DA" },
+      { "name": "IEEE Neutral 90", "hexCode": "#DDDCE2" },
+      { "name": "IEEE Neutral Variant 90", "hexCode": "#E3E3E3" },
+      { "name": "IEEE Primary Brand 90", "hexCode": "#D2F0F8" },
+      { "name": "IEEE primary 90", "hexCode": "#C0DEEF" },
+      { "name": "IEEE SA Medium Blue 90", "hexCode": "#EDFAFC" },
+      { "name": "IEEE Brand Yellow 90", "hexCode": "#FFF8D6" },
+      { "name": "IEEE brand orange 90", "hexCode": "#FFEFD3" },
+      { "name": "IEEE Error 90", "hexCode": "#F9DEDC" },
+      { "name": "IEEE SA Dark Grey 80", "hexCode": "#B2B7BE" },
+      { "name": "IEEE Neutral 80", "hexCode": "#C6C5CA" },
+      { "name": "IEEE Neutral Variant 80", "hexCode": "#D1D1D1" },
+      { "name": "IEEE Primary Brand 80", "hexCode": "#9EE3F4" },
+      { "name": "IEEE Primary 80", "hexCode": "#8CBDDA" },
+      { "name": "IEEE SA Medium Blue 80", "hexCode": "#DBF4F9" },
+      { "name": "IEEE Brand Yellow 80", "hexCode": "#FFF0AA" },
+      { "name": "IEEE Brand Orange 80", "hexCode": "#FFE0AA" },
+      { "name": "IEEE Error 80", "hexCode": "#F2B8B5" },
+      { "name": "IEEE SA Dark Grey 60", "hexCode": "#878B8F" },
+      { "name": "IEEE Neutral 60", "hexCode": "#939094" },
+      { "name": "IEEE Neutral Variant 60", "hexCode": "#9B9B9B" },
+      { "name": "IEEE Primary Brand 60", "hexCode": "#52D2F1" },
+      { "name": "IEEE Primary 60", "hexCode": "#4393C1" },
+      { "name": "IEEE SA Medium Blue 60", "hexCode": "#B7E9F4" },
+      { "name": "IEEE Brand Yellow 60", "hexCode": "#FFE156" },
+      { "name": "IEEE Brand Orange 60", "hexCode": "#FFC256" },
+      { "name": "IEEE Error 60", "hexCode": "#E46962" },
+      { "name": "IEEE SA Dark Grey 30", "hexCode": "#4A4D50" },
+      { "name": "IEEE Neutral 30", "hexCode": "#484649" },
+      { "name": "IEEE Neutral Variant 30", "hexCode": "#49454F" },
+      { "name": "IEEE Primary Brand 30", "hexCode": "#0188AA" },
+      { "name": "IEEE Primary 30", "hexCode": "#004982" },
+      { "name": "IEEE SA Medium Blue", "hexCode": "#3BA1B6" },
+      { "name": "IEEE Brand Yellow 30", "hexCode": "#C2A002" },
+      { "name": "IEEE Brand Orange 30", "hexCode": "#BC7902" },
+      { "name": "IEEE Error 40", "hexCode": "#B3261E" },
+      { "name": "IEEE SA Dark Grey 20", "hexCode": "#333436" },
+      { "name": "IEEE Neutral 20", "hexCode": "#313033" },
+      { "name": "IEEE Neutral Variant 20", "hexCode": "#322F37" },
+      { "name": "IEEE Primary Brand 20", "hexCode": "#015E75" },
+      { "name": "IEEE Primary 20", "hexCode": "#00314E" },
+      { "name": "IEEE SA Medium Blue", "hexCode": "#2C7988" },
+      { "name": "IEEE Brand Yellow 20", "hexCode": "#866E02" },
+      { "name": "IEEE Brand Orange 20", "hexCode": "#825300" },
+      { "name": "IEEE Error 20", "hexCode": "#680015" }
+    ]
   },
   "fileUpload": {
     "label": {