@ieeesa-npm/presentation 0.0.1

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

@@ -0,0 +1,116 @@
+import { EventEmitter, OnInit, AfterViewInit, QueryList } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { SelectOption } from '@presentation/models/select-option.model';
+import { FieldConfig } from '@presentation/models/field-config.model';
+import { SearchType } from '@presentation/models/search.model';
+import { SearchComponent } from '@presentation/components/search/search.component';
+import { FormUtilityService } from '@presentation/services/form-utility.service';
+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.
+ * @export
+ * @class SelectComponent
+ * @implements {OnInit}
+ * @implements {AfterViewInit}
+ * @implements {OnDestroy}
+ */
+export declare class SelectComponent implements OnInit, AfterViewInit {
+    private formUtilityService;
+    formFields: QueryList<SearchComponent>;
+    group: FormGroup;
+    config: FieldConfig;
+    arrowDirection: boolean;
+    searchType: SearchType;
+    sortedOptions: SelectOption[];
+    dropdownInfo: any;
+    private _dropdownOptions;
+    private _selectedOptions;
+    private _isSortNeeded;
+    /**
+     * Takes isSortNeeded as input to check if the passed options are sorted or not.
+     * @memberof SelectComponent
+     */
+    set isSortNeeded(value: boolean);
+    get isSortNeeded(): boolean;
+    /**
+     * Sets the dropdown options for selection.
+     * @memberof SelectComponent
+     */
+    set dropdownOptions(value: SelectOption[]);
+    get dropdownOptions(): SelectOption[];
+    /**
+     * Sets the selected option
+     * @memberof SelectComponent
+     */
+    set selectedOptions(value: SelectOption | SelectOption[]);
+    get selectedOptions(): SelectOption | SelectOption[];
+    formControlName: string;
+    isMultiLevel: boolean;
+    isLabelAlignedLeft: boolean;
+    selectLabel: string;
+    isMultiSelect: boolean;
+    isDisabled: boolean;
+    isSearch: boolean;
+    placeholderText: any;
+    optionSelected: EventEmitter<SelectOption>;
+    optionSearched: EventEmitter<string>;
+    constructor(formUtilityService: FormUtilityService);
+    /**
+     * Initializes components instance properties from config if its defined otherwise creates form group and config.
+     * @memberof SelectComponent
+     */
+    ngOnInit(): void;
+    /**
+     * Emits selected option on changes the selected option.
+     * @param {SelectOption} event
+     * @memberof SelectComponent
+     */
+    onChange(event: SelectOption): void;
+    /**
+     * Sets the select dropdown arrow direction
+     * @param {boolean} opened
+     * @memberof SelectComponent
+     */
+    updateArrowDirection(opened: boolean): void;
+    /**
+     * Takes the index and the current option as arguments and needs to return the unique identifier for this option.
+     * @param {number} index
+     * @param {SelectOption} option
+     * @return {(number | string)}
+     * @memberof SelectComponent
+     */
+    trackByFn(index: number, option: SelectOption): number | string;
+    /**
+     * Emits searched options on filtering options in select dropdown
+     * @param {string} searchText
+     * @memberof SelectComponent
+     */
+    onOptionSearch(searchText: string): void;
+    /**
+     * Compares the two passed options
+     * @param {any} option1
+     * @param {any} option2
+     * @return {boolean}
+     * @memberof SelectComponent
+     */
+    comparer(option1: any, option2: any): boolean;
+    /**
+     * Sorts the options
+     * @memberof SelectComponent
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Sorts the options by using arraySorting method
+     * @memberof SelectComponent
+     */
+    sortOptions(): void;
+    /**
+     * Utility method to sort dropdown options in ascending order.
+     * @param {SelectOption[]} list
+     * @return {SelectOption[]}
+     * @memberof SelectComponent
+     */
+    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>;
+}

package/lib/components/text-area/text-area.component.d.ts

@@ -0,0 +1,11 @@
+import { FormGroup } from '@angular/forms';
+import { FieldConfig } from '@presentation/models/field-config.model';
+import { FormField } from '@presentation/models/form-field.model';
+import * as i0 from "@angular/core";
+export declare class TextAreaComponent implements FormField {
+    config: FieldConfig;
+    group: FormGroup;
+    constants: any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextAreaComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextAreaComponent, "ieeesa-text-area", never, {}, {}, never, never, true, never>;
+}

package/lib/date-formats.d.ts

@@ -0,0 +1,10 @@
+export declare const DateFormats: {
+    display: {
+        dateInput: string;
+        monthYearA11yLabel: string;
+        daysFormat: string;
+        monthFormat: string;
+        fullMonthLabel: string;
+        month: string;
+    };
+};

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

@@ -0,0 +1,78 @@
+import { ComponentRef, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { FieldConfig } from '@presentation/models/field-config.model';
+import { FormField } from '@presentation/models/form-field.model';
+import * as i0 from "@angular/core";
+/**
+ * Provides the implementation of DynamicFormFieldDirective which hosts and creates the form fields components dynamically.
+ * @export
+ * @class DynamicFormFieldDirective
+ * @implements {FormField}
+ * @implements {OnInit}
+ * @implements {OnDestroy}
+ */
+export declare class DynamicFormFieldDirective implements FormField, OnInit, OnDestroy {
+    container: ViewContainerRef;
+    destroy$: Subject<boolean>;
+    private _config;
+    private _group;
+    /**
+     * Sets the form field configuration
+     * @memberof DynamicFormFieldDirective
+     */
+    set config(value: FieldConfig);
+    get config(): FieldConfig;
+    /**
+     * Sets the form group
+     * @memberof DynamicFormFieldDirective
+     */
+    set group(value: FormGroup);
+    get group(): FormGroup;
+    private _submitResponse;
+    /**
+     * Sets the submit response of form submit event
+     * @memberof DynamicFormFieldDirective
+     */
+    set submitResponse(value: any);
+    get submitResponse(): any;
+    private _searchResponse;
+    /**
+     * Sets the form search response of form search apply.
+     * @memberof DynamicFormFieldDirective
+     */
+    set searchResponse(value: any);
+    get searchResponse(): any;
+    formSearchApply: EventEmitter<Event>;
+    formDropdownSelected: EventEmitter<Event>;
+    formDateSelected: EventEmitter<string>;
+    formSelectedDateRange: EventEmitter<{
+        startDate: string;
+        endDate: string;
+    }>;
+    formSelectSearch: EventEmitter<{
+        searchEvent: Event;
+        controlName: string;
+    }>;
+    formAutoCompleteSearch: EventEmitter<Event>;
+    autoCompleteOptionSelected: EventEmitter<Event>;
+    component: ComponentRef<any>;
+    constructor(container: ViewContainerRef);
+    /**
+     * Implementation of ngOnInit lifecycle hook method to call loadComponents method.
+     * @memberof DynamicFormFieldDirective
+     */
+    ngOnInit(): void;
+    /**
+     * Creates the component dynamically and initializes the instance properties of created component, also handles the created component events.
+     * @memberof DynamicFormFieldDirective
+     */
+    loadComponent(): void;
+    /**
+     * Implementation of ngOnDestroy lifecycle hook method to unsubscribe the open observable subscriptions.
+     * @memberof DynamicFormFieldDirective
+     */
+    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"; "formSelectedDateRange": "formSelectedDateRange"; "formSelectSearch": "formSelectSearch"; "formAutoCompleteSearch": "formAutoCompleteSearch"; "autoCompleteOptionSelected": "autoCompleteOptionSelected"; }, never, never, true, never>;
+}

package/lib/models/autocomplete-option.model.d.ts

@@ -0,0 +1,4 @@
+export interface AutoCompleteOption {
+    id: number | string;
+    name: string;
+}

package/lib/models/calendar.model.d.ts

@@ -0,0 +1,5 @@
+export declare enum CalendarType {
+    SINGLE_DATE_SELECTION = 1,
+    CALENDAR = 2,
+    DATE_RANGE_SELECTION = 3
+}

package/lib/models/checkbox-option.model.d.ts

@@ -0,0 +1,6 @@
+export interface CheckboxOption {
+    id: number | string;
+    name: string;
+    checked: boolean;
+    disabled: boolean;
+}

package/lib/models/date-picker.model.d.ts

@@ -0,0 +1,13 @@
+import { CalendarType } from '@presentation/models/calendar.model';
+export interface DatePicker {
+    placeholderLabel?: string;
+    selectedDates?: string[];
+    isDisabled?: number;
+    label?: string;
+    isLabelAlignedLeft?: boolean;
+    dateRange?: {
+        minDate: string;
+        maxDate: string;
+    };
+    calendarType: CalendarType;
+}

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

@@ -0,0 +1,42 @@
+import { ValidatorFn } from '@angular/forms';
+import { CheckboxOption } from '@presentation/models/checkbox-option.model';
+import { DatePicker } from '@presentation/models/date-picker.model';
+import { RadioOption } from '@presentation/models/radio-option.model';
+import { SearchType } from '@presentation/models/search.model';
+import { SelectOption } from '@presentation/models/select-option.model';
+import { AutoCompleteOption } from '@presentation/models/autocomplete-option.model';
+export interface FieldConfig {
+    isSortNeeded?: boolean;
+    disabled?: boolean;
+    label?: string;
+    controlName: string;
+    dropdownOptions?: SelectOption[];
+    checkboxOptions?: CheckboxOption[];
+    autoCompleteOptions?: AutoCompleteOption[];
+    radioOptions?: RadioOption[];
+    placeholder?: string;
+    type: string;
+    requiredErrorMessage?: string;
+    patternErrorMessage?: string;
+    invalidEmailErrorMessage?: string;
+    minErrorMessage?: string;
+    maxErrorMessage?: string;
+    validation?: ValidatorFn[];
+    isMultiSelect?: boolean;
+    value?: any;
+    isNumber?: boolean;
+    min?: number;
+    max?: number;
+    maxLength?: number;
+    minLength?: number;
+    isInteger?: boolean;
+    isResize?: boolean;
+    isReadonly?: boolean;
+    isLabelAlignedLeft?: boolean;
+    datePicker?: DatePicker;
+    searchType?: SearchType;
+    dateRangeControls?: {
+        startDate: string;
+        endDate: string;
+    };
+}

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

@@ -0,0 +1,10 @@
+export declare enum FormControlType {
+    INPUT = "INPUT",
+    TEXT_AREA = "TEXT_AREA",
+    SELECT = "SELECT",
+    SEARCH = "SEARCH",
+    DATE = "DATE",
+    CHECKBOX = "CHECKBOX",
+    RADIO = "RADIO",
+    AUTO_COMPLETE = "AUTO_COMPLETE"
+}

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

@@ -0,0 +1,6 @@
+import { FormGroup } from '@angular/forms';
+import { FieldConfig } from '@presentation/models/field-config.model';
+export interface FormField {
+    config: FieldConfig;
+    group: FormGroup;
+}

package/lib/models/form-grid.model.d.ts

@@ -0,0 +1,7 @@
+export interface FormGrid {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+}

package/lib/models/form.model.d.ts

@@ -0,0 +1,7 @@
+import { FieldConfig } from '@presentation/models/field-config.model';
+export interface FormModel {
+    formGroup: {
+        legend: string;
+        controls: FieldConfig[];
+    }[];
+}

package/lib/models/radio-option.model.d.ts

@@ -0,0 +1,5 @@
+export interface RadioOption {
+    id: number | string;
+    label: string;
+    checked?: boolean;
+}

package/lib/models/search.model.d.ts

@@ -0,0 +1,5 @@
+export declare enum SearchType {
+    EMAIL = "EMAIL",
+    AUTO = "AUTO",
+    ON_CLICK = "ON_CLICK"
+}

package/lib/models/select-option.model.d.ts

@@ -0,0 +1,5 @@
+export interface SelectOption {
+    id: number | string;
+    name: string;
+    option_groups?: SelectOption[];
+}

package/lib/presentation.module.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class PresentationModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PresentationModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PresentationModule, never, never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PresentationModule>;
+}

package/lib/services/datepicker.service.d.ts

@@ -0,0 +1,48 @@
+import { OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * DatepickerService is used in date-picker and date-picker-header component to get date range, isRangeSelection, and selected date(s).
+ * @export
+ * @class DatepickerService
+ */
+export declare class DatepickerService implements OnDestroy {
+    destroy$: Subject<boolean>;
+    range: Subject<{
+        start: Date | string;
+        end: Date | string;
+    }>;
+    range$: import("rxjs").Observable<{
+        start: Date | string;
+        end: Date | string;
+    }>;
+    selectedRange: {
+        start: Date | string;
+        end: Date | string;
+    };
+    selectedDate: Date | string;
+    isRangeSelection: boolean;
+    constructor();
+    /**
+     * Returns the calendar type.
+     * @return {boolean}
+     * @memberof DatepickerService
+     */
+    getCalendarType(): boolean;
+    /**
+     * Returns selected range
+     * @return {({ start: Date | string; end: Date | string })}
+     * @memberof DatepickerService
+     */
+    getSelectedRange(): {
+        start: Date | string;
+        end: Date | string;
+    };
+    /**
+     * Implementation of ngOnDestroy lifecycle hook method to unsubscribe the open observable subscriptions.
+     * @memberof DatePickerHeaderComponent
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DatepickerService>;
+}

package/lib/services/form-utility.service.d.ts

@@ -0,0 +1,29 @@
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FieldConfig } from '@presentation/models/field-config.model';
+import * as i0 from "@angular/core";
+/**
+ * Creates form fields configuration and form group based on passed parameters.
+ * @export
+ * @class FormUtilityService
+ */
+export declare class FormUtilityService {
+    private fb;
+    constructor(fb: FormBuilder);
+    /**
+     * Returns form fields configuration based on passed control name and type.
+     * @param {string} controlName
+     * @param {string} controlType
+     * @return {FieldConfig}
+     * @memberof FormUtilityService
+     */
+    getFormFieldConfig(controlName: string, controlType: string): FieldConfig;
+    /**
+     * Creates and returns form group with passed control name added.
+     * @param {string} controlName
+     * @return {FormGroup}
+     * @memberof FormUtilityService
+     */
+    getFormGroup(controlName: string): FormGroup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormUtilityService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FormUtilityService>;
+}

package/lib/validation-patterns.d.ts

@@ -0,0 +1,6 @@
+export declare const ValidationPatterns: {
+    alphanumeric: RegExp;
+    mixOfAlphanumeric: RegExp;
+    numeric: string;
+    email: RegExp;
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ieeesa-npm/presentation",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^16.1.0",
+    "@angular/core": "^16.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ieeesa-npm-presentation.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ieeesa-npm-presentation.mjs",
+      "esm": "./esm2022/ieeesa-npm-presentation.mjs",
+      "default": "./fesm2022/ieeesa-npm-presentation.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,16 @@
+export * from './lib/components/dynamic-form/dynamic-form.component';
+export * from './lib/directives/dynamic-form-field/dynamic-form-field.directive';
+export * from './lib/components/form-error/form-error.component';
+export * from './lib/components/notification/notification.component';
+export * from './lib/components/input/input.component';
+export * from './lib/components/text-area/text-area.component';
+export * from './lib/components/radio/radio.component';
+export * from './lib/components/checkbox/checkbox.component';
+export * from './lib/components/autocomplete/autocomplete.component';
+export * from './lib/components/search/search.component';
+export * from './lib/components/date-picker/date-picker.component';
+export * from './lib/components/date-picker-header/date-picker-header.component';
+export * from './lib/components/select/select.component';
+export * from './lib/services/form-utility.service';
+export * from './lib/services/datepicker.service';
+export * from './lib/presentation.module';

package/src/lib/assets/constants.json

@@ -0,0 +1,91 @@
+{
+  "ariaLabel": {
+    "clear": "Clear",
+    "warning": "Warning",
+    "previousMonth": "Previous month",
+    "nextMonth": "Next month"
+  },
+  "button": {
+    "cancel": "Cancel",
+    "ok": "Ok"
+  },
+  "datePicker": {
+    "selectDateLabel": "Select Date",
+    "dateFormatLabel": "DD-MMM-YYYY",
+    "startDateLabel": "Start Date",
+    "endDateLabel": "End Date"
+  },
+  "dropdown": {
+    "placeholderText": "Select your option(s)"
+  },
+  "textarea": {
+    "maxLengthDefault": 1000
+  },
+  "autocomplete": {
+    "minCharToSearch": 3,
+    "debounceTime": 1000
+  },
+  "header": {
+    "alt": {
+      "logo": "Logo"
+    },
+    "ariaLabel": {
+      "helpLink": "Help Link",
+      "userProfile": "User profile",
+      "hamburgerMenu": "Hamburger Menu"
+    },
+    "label": {
+      "signOut": "Sign Out"
+    }
+  },
+  "footer": {
+    "alt": {
+      "logo": "IEEE Logo"
+    },
+    "links": [
+      {
+        "label": "Dashboard",
+        "ariaLabel": "Dashboard",
+        "redirectUrl": "#"
+      },
+      {
+        "label": "Contact & Support",
+        "ariaLabel": "Contact & Support",
+        "redirectUrl": "https://www.ieee.org/about/contact.html"
+      },
+      {
+        "label": "Accessibility",
+        "ariaLabel": "Accessibility",
+        "redirectUrl": "https://www.ieee.org/accessibility_statement.html"
+      },
+      {
+        "label": "Nondiscrimination Policy",
+        "ariaLabel": "Nondiscrimination Policy",
+        "redirectUrl": "https://www.ieee.org/about/corporate/governance/p9-26.html"
+      },
+      {
+        "label": "IEEE Ethics Reporting",
+        "ariaLabel": "",
+        "redirectUrl": "https://secure.ethicspoint.com/domain/media/en/gui/20410/index.html"
+      },
+      {
+        "label": "IEEE Privacy Policy",
+        "ariaLabel": "IEEE Privacy Policy",
+        "redirectUrl": "https://www.ieee.org/security-privacy.html"
+      },
+      {
+        "label": "IEEE SA Copyright Policy",
+        "ariaLabel": "IEEE SA Copyright Policy",
+        "redirectUrl": "https://standards.ieee.org/ipr/"
+      }
+    ],
+    "ieeeLogo": "assets/images/ieee-logo.svg",
+    "copyright": {
+      "link": "https://www.ieee.org/about/help/site-terms-conditions.html",
+      "textPart1": "© Copyright",
+      "textPart2": "IEEE – All rights reserved. Use of this website signifies your agreement to the",
+      "hyperLinkPart3": " IEEE Terms and Conditions.",
+      "textPart4": "A not-for-profit organization, IEEE is the world's largest technical professional organization dedicated to advancing technology for the benefit of humanity."
+    }
+  }
+}