Merge pull request #8031 from IgniteUI/amarinov/stringEnumsChange_master

fix(inputs): use full union types on all string @input properties - master

Author: damyanpetev

projects/igniteui-angular/src/lib/avatar/avatar.component.ts

@@ -10,21 +10,24 @@ import {
     ViewChild
 } from '@angular/core';
 import { IgxIconModule } from '../icon/public_api';
+import { mkenum } from '../core/utils';
 
 let NEXT_ID = 0;
-
-export enum IgxAvatarSize {
-    SMALL = 'small',
-    MEDIUM = 'medium',
-    LARGE = 'large'
-}
-
-export enum IgxAvatarType {
-    INITIALS = 'initials',
-    IMAGE = 'image',
-    ICON = 'icon',
-    CUSTOM = 'custom',
-}
+export const IgxAvatarSize = mkenum({
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large'
+});
+export type IgxAvatarSize = (typeof IgxAvatarSize)[keyof typeof IgxAvatarSize];
+
+export const IgxAvatarType = mkenum({
+    INITIALS: 'initials',
+    IMAGE: 'image',
+    ICON: 'icon',
+    CUSTOM: 'custom'
+});
+
+export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
 
 /**
  * Avatar provides a way to display an image, icon or initials to the user.

projects/igniteui-angular/src/lib/badge/badge.component.ts

@@ -1,19 +1,21 @@
 import { CommonModule } from '@angular/common';
 import { Component, HostBinding, Input, NgModule } from '@angular/core';
 import { IgxIconModule } from '../icon/public_api';
+import { mkenum } from '../core/utils';
 
 let NEXT_ID = 0;
 
 /**
  * Determines the igxBadge type
  */
-export enum IgxBadgeType {
-    PRIMARY = 'primary',
-    INFO = 'info',
-    SUCCESS = 'success',
-    WARNING = 'warning',
-    ERROR = 'error'
-}
+export const IgxBadgeType = mkenum({
+    PRIMARY: 'primary',
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    ERROR: 'error'
+});
+export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
 /**
  * Badge provides visual notifications used to decorate avatars, menus, etc.
  *

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -3,17 +3,18 @@ import { WEEKDAYS, Calendar, isDateInRanges, IFormattingOptions, IFormattingView
 import { ControlValueAccessor } from '@angular/forms';
 import { DateRangeDescriptor } from '../core/dates';
 import { Subject } from 'rxjs';
-import { isDate } from '../core/utils';
+import { isDate, mkenum } from '../core/utils';
 import { CalendarView } from './month-picker-base';
 
 /**
- * Sets the selction type - single, multi or range.
+ * Sets the selection type - single, multi or range.
  */
-export enum CalendarSelection {
-    SINGLE = 'single',
-    MULTI = 'multi',
-    RANGE = 'range'
-}
+export const CalendarSelection = mkenum({
+    SINGLE: 'single',
+    MULTI: 'multi',
+    RANGE: 'range'
+});
+export type CalendarSelection = (typeof CalendarSelection)[keyof typeof CalendarSelection];
 
 export enum ScrollMonth {
     PREV = 'prev',

projects/igniteui-angular/src/lib/card/card.component.ts

@@ -12,6 +12,7 @@ import {
     SimpleChanges
 } from '@angular/core';
 import { IgxButtonModule } from '../directives/button/button.directive';
+import { mkenum } from '../core/utils';
 
 let NEXT_ID = 0;
 
@@ -200,10 +201,11 @@ export class IgxCardFooterDirective {
  * ```
  */
 
-export enum IgxCardType {
-    ELEVATED = 'elevated',
-    OUTLINED = 'outlined'
-}
+export const IgxCardType = mkenum({
+    ELEVATED: 'elevated',
+    OUTLINED: 'outlined'
+});
+export type IgxCardType = (typeof IgxCardType)[keyof typeof IgxCardType];
 
 @Component({
     selector: 'igx-card',
@@ -276,10 +278,11 @@ export class IgxCardComponent {
     public horizontal = false;
 }
 
-export enum IgxCardActionsLayout {
-    START = 'start',
-    JUSTIFY = 'justify',
-}
+export const IgxCardActionsLayout = mkenum({
+    START: 'start',
+    JUSTIFY: 'justify'
+});
+export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
 
 /**
  * IgxCardActions is container for the card actions.

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -21,7 +21,7 @@ import {
     Injectable
 } from '@angular/core';
 import { IgxIconModule } from '../icon/public_api';
-import { IBaseEventArgs, PlatformUtil } from '../core/utils';
+import { IBaseEventArgs, mkenum, PlatformUtil } from '../core/utils';
 import { Subject, merge } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
@@ -34,16 +34,18 @@ import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-br
 
 let NEXT_ID = 0;
 
-export enum CarouselIndicatorsOrientation {
-    bottom = 'bottom',
-    top = 'top'
-}
-
-export enum CarouselAnimationType {
-    none = 'none',
-    slide = 'slide',
-    fade = 'fade'
-}
+export const CarouselIndicatorsOrientation = mkenum({
+    bottom: 'bottom',
+    top: 'top'
+});
+export type CarouselIndicatorsOrientation = (typeof CarouselIndicatorsOrientation)[keyof typeof CarouselIndicatorsOrientation];
+
+export const CarouselAnimationType = mkenum({
+    none: 'none',
+    slide: 'slide',
+    fade: 'fade'
+});
+export type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType];
 
 export interface CarouselAnimationSettings {
     enterAnimation: AnimationReferenceMetadata;

projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts

@@ -13,13 +13,14 @@ import {
 } from '@angular/core';
 import { CheckboxRequiredValidator, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
-import { isIE, IBaseEventArgs } from '../core/utils';
+import { isIE, IBaseEventArgs, mkenum } from '../core/utils';
 import { EditorProvider } from '../core/edit-provider';
 
-export enum LabelPosition {
-    BEFORE = 'before',
-    AFTER = 'after'
-}
+export const LabelPosition = mkenum({
+    BEFORE: 'before',
+    AFTER: 'after'
+});
+export type LabelPosition = (typeof LabelPosition)[keyof typeof LabelPosition];
 
 export interface IChangeCheckboxEventArgs extends IBaseEventArgs {
     checked: boolean;

projects/igniteui-angular/src/lib/core/displayDensity.ts

@@ -1,15 +1,15 @@
 import { InjectionToken, Input, Output, EventEmitter, DoCheck, OnInit, Directive, NgModule, Optional, Inject } from '@angular/core';
-import { IBaseEventArgs } from './utils';
-
+import { IBaseEventArgs, mkenum } from './utils';
 
 /**
- * Defines the posible values of the components' display density.
+ * Defines the possible values of the components' display density.
  */
-export enum DisplayDensity {
-    comfortable = 'comfortable',
-    cosy = 'cosy',
-    compact = 'compact'
-}
+export const DisplayDensity = mkenum({
+    comfortable: 'comfortable',
+    cosy: 'cosy',
+    compact: 'compact'
+});
+export type DisplayDensity = (typeof DisplayDensity)[keyof typeof DisplayDensity];
 
 /**
  * Describes the object used to configure the DisplayDensity in Angular DI.

projects/igniteui-angular/src/lib/core/utils.ts

@@ -449,3 +449,5 @@ export function yieldingLoop(count: number, chunkSize: number, callback: (index:
     };
     chunk();
 }
+
+export function mkenum<T extends { [index: string]: U }, U extends string>(x: T) { return x; }

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -12,19 +12,20 @@ import { IGroupingState } from './groupby-state.interface';
 import { ISortingExpression } from './sorting-expression.interface';
 import { FilteringStrategy } from './filtering-strategy';
 import { ITreeGridRecord } from '../grids/tree-grid/public_api';
-import { cloneValue, mergeObjects } from '../core/utils';
+import { cloneValue, mergeObjects, mkenum } from '../core/utils';
 import { Transaction, TransactionType, HierarchicalTransaction } from '../services/transaction/transaction';
 import { getHierarchy, isHierarchyMatch } from './operations';
 
 /**
  * @hidden
  */
-export enum DataType {
-    String = 'string',
-    Number = 'number',
-    Boolean = 'boolean',
-    Date = 'date'
-}
+export const DataType = mkenum({
+    String: 'string',
+    Number: 'number',
+    Boolean: 'boolean',
+    Date: 'date'
+});
+export type DataType = (typeof DataType)[keyof typeof DataType];
 
 /**
  * @hidden

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -56,7 +56,7 @@ import {
 } from './date-picker.utils';
 import { DatePickerDisplayValuePipe, DatePickerInputValuePipe } from './date-picker.pipes';
 import { IDatePicker } from './date-picker.common';
-import { KEYS, CancelableBrowserEventArgs, isIE, isEqual, IBaseEventArgs } from '../core/utils';
+import { KEYS, CancelableBrowserEventArgs, isIE, isEqual, IBaseEventArgs, mkenum } from '../core/utils';
 import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives';
 import { IgxCalendarContainerComponent } from './calendar-container.component';
 import { InteractionMode } from '../core/enums';
@@ -109,12 +109,13 @@ export interface IFormatOptions {
  * 'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
  * 'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
  */
-export enum PredefinedFormatOptions {
-    ShortDate = 'shortDate',
-    MediumDate = 'mediumDate',
-    LongDate = 'longDate',
-    FullDate = 'fullDate'
-}
+export const PredefinedFormatOptions = mkenum({
+    ShortDate: 'shortDate',
+    MediumDate: 'mediumDate',
+    LongDate: 'longDate',
+    FullDate: 'fullDate'
+});
+export type PredefinedFormatOptions = (typeof PredefinedFormatOptions)[keyof typeof PredefinedFormatOptions];
 
 const noop = () => { };
 

projects/igniteui-angular/src/lib/directives/divider/divider.directive.ts

@@ -1,9 +1,11 @@
 import { Directive, HostBinding, NgModule, Input } from '@angular/core';
+import { mkenum } from '../../core/utils';
 
-export enum IgxDividerType {
-    SOLID = 'solid',
-    DASHED = 'dashed'
-}
+export const IgxDividerType = mkenum({
+    SOLID: 'solid',
+    DASHED: 'dashed'
+});
+export type IgxDividerType = (typeof IgxDividerType)[keyof typeof IgxDividerType];
 
 let NEXT_ID = 0;
 

projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts

@@ -1,4 +1,4 @@
-import { CancelableEventArgs, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
+import { CancelableEventArgs, CancelableBrowserEventArgs, IBaseEventArgs, mkenum } from '../core/utils';
 import { IgxDropDownItemBaseDirective } from './drop-down-item.base';
 import { IToggleView } from '../core/navigation/IToggleView';
 import { EventEmitter, InjectionToken } from '@angular/core';
@@ -11,11 +11,12 @@ export enum Navigate {
 }
 
 /** Key actions that have designated handlers in IgxDropDownComponent */
-export enum DropDownActionKey {
-    ESCAPE = 'escape',
-    ENTER = 'enter',
-    SPACE = 'space'
-}
+export const DropDownActionKey = mkenum({
+    ESCAPE: 'escape',
+    ENTER: 'enter',
+    SPACE: 'space'
+});
+export type DropDownActionKey = (typeof DropDownActionKey)[keyof typeof DropDownActionKey];
 
 /**
  * Interface that encapsulates onSelection event arguments - old selection, new selection and cancel selection.

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts

@@ -13,15 +13,17 @@ import {
 } from '@angular/core';
 import { IgxExpansionPanelIconDirective } from './expansion-panel.directives';
 import { IExpansionPanelEventArgs, IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase } from './expansion-panel.common';
+import { mkenum } from '../core/utils';
 
 /**
  * @hidden
  */
-export enum ICON_POSITION {
-    LEFT = 'left',
-    NONE = 'none',
-    RIGHT = 'right'
-}
+export const ICON_POSITION = mkenum({
+    LEFT: 'left',
+    NONE: 'none',
+    RIGHT: 'right'
+});
+export type ICON_POSITION = (typeof ICON_POSITION)[keyof typeof ICON_POSITION];
 
 
 @Component({

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts

@@ -167,7 +167,7 @@ export class IgxColumnActionsComponent implements DoCheck {
     /**
      * @hidden @internal
      */
-    private _columnDisplayOrder = ColumnDisplayOrder.DisplayOrder;
+    private _columnDisplayOrder: ColumnDisplayOrder = ColumnDisplayOrder.DisplayOrder;
     /**
      * Gets the display order of the columns.
      * @example

projects/igniteui-angular/src/lib/grids/column-chooser-base.ts

@@ -205,7 +205,7 @@ export abstract class ColumnChooserBaseDirective implements OnDestroy {
     /**
      * @hidden
      */
-    private _columnDisplayOrder = ColumnDisplayOrder.DisplayOrder;
+    private _columnDisplayOrder: ColumnDisplayOrder = ColumnDisplayOrder.DisplayOrder;
     /**
      * @hidden
      */