feat: Expose type aliases for custom string union property types (#1656)

* Removed non-functional `blazorTypeOverride` decorator
* Marked igc-carousel-slide/igc-step `toggleAnimation` methods internal and deprecated

---------

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: damyanpetev

CHANGELOG.md

@@ -7,14 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - New File Input Component(`igc-file-input`)
+- Exposed more public API type aliases for component property types like `ButtonVariant`, `PickerMode`, `StepperOrientation`, `HorizontalTransitionAnimation` (carousel and horizontal stepper) and more.
 
 ### Deprecated
-Some event argument types have been renamed for consistency:
-- `CheckboxChangeEventArgs` deprecated, use `IgcCheckboxChangeEventArgs` instead.
-- `RadioChangeEventArgs` deprecated, use `IgcRadioChangeEventArgs` instead.
-- `IgcRangeSliderValue` deprecated, use `IgcRangeSliderValueEventArgs` instead.
-- `IgcActiveStepChangingArgs` deprecated, use `IgcActiveStepChangingEventArgs` instead.
-- `IgcActiveStepChangedArgs` deprecated, use `IgcActiveStepChangedEventArgs` instead.
+- Some event argument types have been renamed for consistency:
+  - `CheckboxChangeEventArgs` deprecated, use `IgcCheckboxChangeEventArgs` instead.
+  - `RadioChangeEventArgs` deprecated, use `IgcRadioChangeEventArgs` instead.
+  - `IgcRangeSliderValue` deprecated, use `IgcRangeSliderValueEventArgs` instead.
+  - `IgcActiveStepChangingArgs` deprecated, use `IgcActiveStepChangingEventArgs` instead.
+  - `IgcActiveStepChangedArgs` deprecated, use `IgcActiveStepChangedEventArgs` instead.
+- Carousel Slide's `toggleAnimation` is now marked internal and deprecated for use in favor of parent Carousel's `select` method.
+- Stepper Step's `toggleAnimation` is now marked internal and deprecated for use in favor of parent Stepper's `navigateTo` method.
 
 ### Fixed
 - Setting validation properties on a pristine non-dirty form associated element does not apply invalid styles [#1632](https://github.com/IgniteUI/igniteui-webcomponents/issues/1632)

src/components/avatar/avatar.ts

@@ -5,6 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { AvatarShape } from '../types.js';
 import { styles } from './themes/avatar.base.css.js';
 import { styles as shared } from './themes/shared/avatar.common.css.js';
 import { all } from './themes/themes.js';
@@ -63,7 +64,7 @@ export default class IgcAvatarComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public shape: 'circle' | 'rounded' | 'square' = 'square';
+  public shape: AvatarShape = 'square';
 
   constructor() {
     super();

src/components/badge/badge.ts

@@ -4,7 +4,7 @@ import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import type { StyleVariant } from '../types.js';
+import type { BadgeShape, StyleVariant } from '../types.js';
 import { styles } from './themes/badge.base.css.js';
 import { styles as shared } from './themes/shared/badge.common.css.js';
 import { all } from './themes/themes.js';
@@ -50,7 +50,7 @@ export default class IgcBadgeComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public shape: 'rounded' | 'square' = 'rounded';
+  public shape: BadgeShape = 'rounded';
 
   constructor() {
     super();

src/components/button-group/button-group.ts

@@ -11,6 +11,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { findElementFromEventPath, last } from '../common/util.js';
+import type { ButtonGroupSelection, ContentOrientation } from '../types.js';
 import { styles } from './themes/group.base.css.js';
 import { all } from './themes/group.js';
 import { styles as shared } from './themes/shared/group/group.common.css.js';
@@ -91,14 +92,14 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
    * @attr
    */
   @property({ reflect: true })
-  public alignment: 'horizontal' | 'vertical' = 'horizontal';
+  public alignment: ContentOrientation = 'horizontal';
 
   /**
    * Controls the mode of selection for the button group.
    * @attr
    */
   @property({ reflect: false })
-  public selection: 'single' | 'single-required' | 'multiple' = 'single';
+  public selection: ButtonGroupSelection = 'single';
 
   /**
    * Gets/Sets the currently selected buttons (their values).

src/components/button/button.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { ButtonVariant } from '../types.js';
 import { IgcButtonBaseComponent } from './button-base.js';
 import { styles } from './themes/button/button.base.css.js';
 import { styles as shared } from './themes/button/shared/button.common.css.js';
@@ -37,7 +38,7 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
    * @attr
    */
   @property({ reflect: true })
-  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';
+  public variant: ButtonVariant = 'contained';
 
   protected renderContent() {
     return html`

src/components/button/icon-button.ts

@@ -10,6 +10,7 @@ import {
   registerIconFromText as registerIconFromText_impl,
   registerIcon as registerIcon_impl,
 } from '../icon/icon.registry.js';
+import type { IconButtonVariant } from '../types.js';
 import { IgcButtonBaseComponent } from './button-base.js';
 import { styles } from './themes/icon-button/icon-button.base.css.js';
 import { styles as shared } from './themes/icon-button/shared/icon-button.common.css.js';
@@ -58,7 +59,7 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
    * @attr
    */
   @property({ reflect: true })
-  public variant: 'flat' | 'contained' | 'outlined' = 'contained';
+  public variant: IconButtonVariant = 'contained';
 
   protected renderContent() {
     return html`

src/components/calendar/base.ts

@@ -7,7 +7,11 @@ import { watch } from '../common/decorators/watch.js';
 import { first } from '../common/util.js';
 import { convertToDate, convertToDates, getWeekDayNumber } from './helpers.js';
 import { CalendarDay } from './model.js';
-import type { DateRangeDescriptor, WeekDays } from './types.js';
+import type {
+  CalendarSelection,
+  DateRangeDescriptor,
+  WeekDays,
+} from './types.js';
 
 @blazorIndirectRender
 @blazorDeepImport
@@ -105,7 +109,7 @@ export class IgcCalendarBaseComponent extends LitElement {
    * @attr selection
    */
   @property()
-  public selection: 'single' | 'multiple' | 'range' = 'single';
+  public selection: CalendarSelection = 'single';
 
   /**
    * Whether to show the week numbers.

src/components/calendar/calendar.ts

@@ -32,6 +32,7 @@ import {
   partNameMap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
+import type { ContentOrientation } from '../types.js';
 import { IgcCalendarBaseComponent } from './base.js';
 import IgcDaysViewComponent from './days-view/days-view.js';
 import {
@@ -46,7 +47,11 @@ import { CalendarDay } from './model.js';
 import IgcMonthsViewComponent from './months-view/months-view.js';
 import { styles } from './themes/calendar.base.css.js';
 import { all } from './themes/calendar.js';
-import type { IgcCalendarComponentEventMap } from './types.js';
+import type {
+  CalendarActiveView,
+  CalendarHeaderOrientation,
+  IgcCalendarComponentEventMap,
+} from './types.js';
 import IgcYearsViewComponent from './years-view/years-view.js';
 
 export const focusActiveDate = Symbol();
@@ -186,15 +191,15 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
    * @attr header-orientation
    */
   @property({ reflect: true, attribute: 'header-orientation' })
-  public headerOrientation: 'vertical' | 'horizontal' = 'horizontal';
+  public headerOrientation: CalendarHeaderOrientation = 'horizontal';
 
   /**
    * The orientation of the calendar months when more than one month
    * is being shown.
    * @attr orientation
    */
   @property()
-  public orientation: 'vertical' | 'horizontal' = 'horizontal';
+  public orientation: ContentOrientation = 'horizontal';
 
   /**
    * The number of months displayed in the days view.
@@ -208,7 +213,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
    * @attr active-view
    */
   @property({ attribute: 'active-view' })
-  public activeView: 'days' | 'months' | 'years' = 'days';
+  public activeView: CalendarActiveView = 'days';
 
   /** The options used to format the months and the weekdays in the calendar views. */
   @property({ attribute: false })

src/components/calendar/types.ts

@@ -21,6 +21,9 @@ export type WeekDays =
   | 'thursday'
   | 'friday'
   | 'saturday';
+export type CalendarActiveView = 'days' | 'months' | 'years';
+export type CalendarHeaderOrientation = 'horizontal' | 'vertical';
+export type CalendarSelection = 'single' | 'multiple' | 'range';
 
 export interface IgcCalendarComponentEventMap {
   igcChange: CustomEvent<Date | Date[]>;

src/components/card/card.actions.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { ContentOrientation } from '../types.js';
 import { all } from './themes/actions.js';
 import { styles } from './themes/card.actions.base.css.js';
 
@@ -28,7 +29,7 @@ export default class IgcCardActionsComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public orientation: 'vertical' | 'horizontal' = 'horizontal';
+  public orientation: ContentOrientation = 'horizontal';
 
   protected override render() {
     return html`