feat: expose type aliases for custom string union property types

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`

src/components/carousel/carousel-slide.ts

@@ -69,6 +69,10 @@ export default class IgcCarouselSlideComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public previous = false;
 
+  /**
+   * @hidden @internal
+   * @deprecated since 5.4.0. Use Carousel's `select` method instead.
+   */
   public async toggleAnimation(
     type: 'in' | 'out',
     direction: 'normal' | 'reverse' = 'normal'

src/components/carousel/carousel.ts

@@ -44,6 +44,10 @@ import {
   wrap,
 } from '../common/util.js';
 import IgcIconComponent from '../icon/icon.js';
+import type {
+  CarouselIndicatorsOrientation,
+  HorizontalTransitionAnimation,
+} from '../types.js';
 import IgcCarouselIndicatorContainerComponent from './carousel-indicator-container.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 import IgcCarouselSlideComponent from './carousel-slide.js';
@@ -217,7 +221,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
    * @attr indicators-orientation
    */
   @property({ reflect: false, attribute: 'indicators-orientation' })
-  public indicatorsOrientation: 'start' | 'end' = 'end';
+  public indicatorsOrientation: CarouselIndicatorsOrientation = 'end';
 
   /**
    * The format used to set the aria-label on the carousel indicators.
@@ -262,7 +266,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
    * @attr animation-type
    */
   @property({ attribute: 'animation-type' })
-  public animationType: 'slide' | 'fade' | 'none' = 'slide';
+  public animationType: HorizontalTransitionAnimation = 'slide';
 
   /* blazorSuppress */
   /**

src/components/checkbox/checkbox-base.ts

@@ -12,14 +12,15 @@ import {
   defaultBooleanTransformers,
 } from '../common/mixins/forms/form-value.js';
 import { isEmpty } from '../common/util.js';
+import type { ToggleLabelPosition } from '../types.js';
 import { checkBoxValidators } from './validators.js';
 
 export interface IgcCheckboxChangeEventArgs {
   checked: boolean;
   value?: string;
 }
 
-/** @deprecated use IgcCheckboxChangeEventArgs instead */
+/** @deprecated since 5.4.0. Use IgcCheckboxChangeEventArgs instead */
 export type CheckboxChangeEventArgs = IgcCheckboxChangeEventArgs;
 
 export interface IgcCheckboxComponentEventMap {
@@ -90,7 +91,7 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
    * @attr label-position
    */
   @property({ reflect: true, attribute: 'label-position' })
-  public labelPosition: 'before' | 'after' = 'after';
+  public labelPosition: ToggleLabelPosition = 'after';
 
   constructor() {
     super();

src/components/common/controllers/root-scroll.ts

@@ -1,4 +1,5 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { PopoverScrollStrategy } from '../../types.js';
 
 type RootScrollControllerConfig = {
   hideCallback?: () => void;
@@ -8,7 +9,7 @@ type RootScrollControllerConfig = {
 type RootScrollControllerHost = ReactiveControllerHost & {
   open: boolean;
   hide(): void;
-  scrollStrategy?: 'scroll' | 'close' | 'block';
+  scrollStrategy?: PopoverScrollStrategy;
 };
 
 type ScrollRecord = { scrollTop: number; scrollLeft: number };

src/components/common/mixins/alert.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 
 import type { addAnimationController } from '../../../animations/player.js';
 import { fadeIn, fadeOut } from '../../../animations/presets/fade/index.js';
+import type { AbsolutePosition } from '../../types.js';
 import { watch } from '../decorators/watch.js';
 
 // It'd be better to have this as a mixin rather than a base class once the analyzer
@@ -42,7 +43,7 @@ export abstract class IgcBaseAlertLikeComponent extends LitElement {
    * @attr
    */
   @property({ reflect: true })
-  public position: 'bottom' | 'middle' | 'top' = 'bottom';
+  public position: AbsolutePosition = 'bottom';
 
   @watch('displayTime', { waitUntilFirstUpdate: true })
   protected displayTimeChange() {

src/components/date-picker/date-picker.ts

@@ -7,6 +7,7 @@ import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
 import { convertToDate } from '../calendar/helpers.js';
 import {
+  type CalendarHeaderOrientation,
   type DateRangeDescriptor,
   DateRangeType,
   type WeekDays,
@@ -41,7 +42,12 @@ import IgcDialogComponent from '../dialog/dialog.js';
 import IgcFocusTrapComponent from '../focus-trap/focus-trap.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcPopoverComponent from '../popover/popover.js';
-import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
+import type {
+  ContentOrientation,
+  PickerMode,
+  RangeTextSelectMode,
+  SelectionRangeDirection,
+} from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './themes/date-picker.base.css.js';
 import { styles as shared } from './themes/shared/date-picker.common.css.js';
@@ -229,7 +235,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
    * @attr mode
    */
   @property()
-  public mode: 'dropdown' | 'dialog' = 'dropdown';
+  public mode: PickerMode = 'dropdown';
 
   /**
    * Whether to allow typing in the input.
@@ -308,14 +314,14 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
    * @attr header-orientation
    */
   @property({ attribute: 'header-orientation', reflect: true })
-  public headerOrientation: 'vertical' | 'horizontal' = 'horizontal';
+  public headerOrientation: CalendarHeaderOrientation = 'horizontal';
 
   /**
    * The orientation of the multiple months displayed in the calendar's days view.
    *  @attr
    */
   @property()
-  public orientation: 'vertical' | 'horizontal' = 'horizontal';
+  public orientation: ContentOrientation = 'horizontal';
 
   /**
    * Determines whether the calendar hides its header.

src/components/divider/divider.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import type { DividerType } from '../types.js';
 import { styles } from './themes/divider.base.css.js';
 import { styles as shared } from './themes/shared/divider.common.css.js';
 import { all } from './themes/themes.js';
@@ -60,7 +61,7 @@ export default class IgcDividerComponent extends LitElement {
    */
 
   @property({ reflect: true })
-  public type: 'solid' | 'dashed' = 'solid';
+  public type: DividerType = 'solid';
 
   constructor() {
     super();