refactor(*): replace mkenum with const assertion (#15882)

* refactor(*): replace mkenum with const assertion

* fix(chip): correct broken variant type and restrict to union, reword

Author: damyanpetev

CHANGELOG.md

@@ -8,6 +8,8 @@ All notable changes for each version of this project will be documented in this
 - **Angular 20 Compatibility** - Ignite UI for Angular now plays nice with Angular 20! Upgrade your apps and enjoy the latest features.
 - `IgxActionStrip`
     - **Behavioral Changes** - When using the Action Strip standalone, outside of Grid, scenarios the component is no longer initially visible and the `hidden` property now defaults to `true`.
+- `IgxChip`
+    - **Behavioral Change** The `variant` is now strictly typed with the union of supported options and no longer accepts invalid values for the default state, provide no value (nullish) instead is needed.
 
 ## 19.2.0
 

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

@@ -9,23 +9,23 @@ import {
     ViewChild
 } from '@angular/core';
 
-import { mkenum, normalizeURI } from '../core/utils';
+import { normalizeURI } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
 let NEXT_ID = 0;
-export const IgxAvatarSize = /*@__PURE__*/mkenum({
+export const IgxAvatarSize = {
     SMALL: 'small',
     MEDIUM: 'medium',
     LARGE: 'large'
-});
+} as const;
 export type IgxAvatarSize = (typeof IgxAvatarSize)[keyof typeof IgxAvatarSize];
 
-export const IgxAvatarType = /*@__PURE__*/mkenum({
+export const IgxAvatarType = {
     INITIALS: 'initials',
     IMAGE: 'image',
     ICON: 'icon',
     CUSTOM: 'custom'
-});
+} as const;
 export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
 
 /**

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

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

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

@@ -20,16 +20,15 @@ import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
 
 import { takeUntil } from 'rxjs/operators';
 import { IBaseEventArgs } from '../core/utils';
-import { mkenum } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
 /**
  * Determines the Button Group alignment
  */
-export const ButtonGroupAlignment = mkenum({
+export const ButtonGroupAlignment = {
     horizontal: 'horizontal',
     vertical: 'vertical'
-});
+} as const;
 export type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment];
 
 let NEXT_ID = 0;

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

@@ -1,13 +1,12 @@
-import { mkenum } from '../core/utils';
 
 /**
  * Sets the selection type - single, multi or range.
  */
-export const CalendarSelection = /*@__PURE__*/mkenum({
+export const CalendarSelection = {
     SINGLE: 'single',
     MULTI: 'multi',
     RANGE: 'range'
-});
+} as const;
 export type CalendarSelection = (typeof CalendarSelection)[keyof typeof CalendarSelection];
 
 export const enum ScrollDirection {
@@ -21,11 +20,11 @@ export interface IViewDateChangeEventArgs {
     currentValue: Date;
 }
 
-export const IgxCalendarView = /*@__PURE__*/mkenum({
+export const IgxCalendarView = {
     Month: 'month',
     Year: 'year',
     Decade: 'decade'
-});
+} as const;
 
 /**
  * Determines the Calendar active view - days, months or years.

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

@@ -11,8 +11,6 @@ import {
     booleanAttribute
 } from '@angular/core';
 
-import { mkenum } from '../core/utils';
-
 let NEXT_ID = 0;
 
 /**
@@ -269,10 +267,10 @@ export class IgxCardComponent {
     public horizontal = false;
 }
 
-export const IgxCardActionsLayout = /*@__PURE__*/mkenum({
+export const IgxCardActionsLayout = {
     START: 'start',
     JUSTIFY: 'justify'
-});
+} as const;
 export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
 
 /**

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

@@ -1,13 +1,12 @@
-import { mkenum } from '../core/utils';
 
-export const CarouselAnimationType = /*@__PURE__*/mkenum({
+export const CarouselAnimationType = {
     none: 'none',
     slide: 'slide',
     fade: 'fade'
-});
+} as const;
 export type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType];
 
-export const CarouselIndicatorsOrientation = /*@__PURE__*/mkenum({
+export const CarouselIndicatorsOrientation = {
     /**
      * @deprecated in version 19.1.0. Use `end` instead.
      */
@@ -18,5 +17,5 @@ export const CarouselIndicatorsOrientation = /*@__PURE__*/mkenum({
     top: 'top',
     start: 'start',
     end: 'end'
-});
+} as const;
 export type CarouselIndicatorsOrientation = (typeof CarouselIndicatorsOrientation)[keyof typeof CarouselIndicatorsOrientation];

projects/igniteui-angular/src/lib/checkbox/checkbox-base.directive.ts

@@ -17,7 +17,7 @@ import {
     AfterViewInit,
 } from '@angular/core';
 import { NgControl, Validators } from '@angular/forms';
-import { IBaseEventArgs, getComponentTheme, mkenum } from '../core/utils';
+import { IBaseEventArgs, getComponentTheme } from '../core/utils';
 import { noop, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import {
@@ -26,10 +26,10 @@ import {
     ThemeToken,
 } from '../services/theme/theme.token';
 
-export const LabelPosition = /*@__PURE__*/ mkenum({
+export const LabelPosition = {
     BEFORE: 'before',
     AFTER: 'after'
-});
+} as const;
 export type LabelPosition = typeof LabelPosition[keyof typeof LabelPosition];
 
 export interface IChangeCheckboxEventArgs extends IBaseEventArgs {

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -17,21 +17,22 @@ import {
     DOCUMENT
 } from '@angular/core';
 import { IgxDragDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective } from '../directives/drag-drop/drag-drop.directive';
-import { IBaseEventArgs, mkenum } from '../core/utils';
+import { IBaseEventArgs } from '../core/utils';
 import { ChipResourceStringsEN, IChipResourceStrings } from '../core/i18n/chip-resources';
 import { Subject } from 'rxjs';
 import { IgxIconComponent } from '../icon/icon.component';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { Size } from '../grids/common/enums';
 
-export const IgxChipTypeVariant = /*@__PURE__*/mkenum({
+export const IgxChipTypeVariant = {
     PRIMARY: 'primary',
     INFO: 'info',
     SUCCESS: 'success',
     WARNING: 'warning',
     DANGER: 'danger'
-});
+} as const;
+export type IgxChipTypeVariant = (typeof IgxChipTypeVariant)[keyof typeof IgxChipTypeVariant];
 
 export interface IBaseChipEventArgs extends IBaseEventArgs {
     originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
@@ -93,15 +94,15 @@ export class IgxChipComponent implements OnInit, OnDestroy {
      *
      * @remarks
      * Allowed values are `primary`, `info`, `success`, `warning`, `danger`.
-     * Providing an invalid value won't change the chip.
+     * Providing no/nullish value leaves the chip in its default state.
      *
      * @example
      * ```html
-     * <igx-chip [variant]="success"></igx-chip>
+     * <igx-chip variant="success"></igx-chip>
      * ```
      */
     @Input()
-    public variant: string | typeof IgxChipTypeVariant;
+    public variant?: IgxChipTypeVariant | null;
     /**
      * Sets the value of `id` attribute. If not provided it will be automatically generated.
      *

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

@@ -20,8 +20,6 @@ export const showMessage = (message: string, isMessageShown: boolean): boolean =
     return true;
 };
 
-export const mkenum = <T extends { [index: string]: U }, U extends string>(x: T) => x;
-
 /**
  *
  * @hidden @internal
@@ -247,7 +245,7 @@ export class PlatformUtil {
     /** @hidden @internal */
     public isElements = inject(ELEMENTS_TOKEN, { optional: true });
 
-    public KEYMAP = mkenum({
+    public KEYMAP = {
         ENTER: 'Enter',
         SPACE: ' ',
         ESCAPE: 'Escape',
@@ -269,7 +267,7 @@ export class PlatformUtil {
         X: 'x',
         Y: 'y',
         Z: 'z'
-    });
+    } as const;
 
     constructor(@Inject(PLATFORM_ID) private platformId: any) { }