igniteui-angular 16.1.2 → 16.1.3

package/lib/banner/banner.component.d.ts

@@ -26,8 +26,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
  * <igx-banner #banner>
  *   Our privacy settings have changed.
  *  <igx-banner-actions>
- *      <button igxButton="raised">Read More</button>
- *      <button igxButton="raised">Accept and Continue</button>
+ *      <button type="button" igxButton="raised">Read More</button>
+ *      <button type="button" igxButton="raised">Accept and Continue</button>
  *  </igx-banner-actions>
  * </igx-banner>
  * ```
@@ -149,7 +149,7 @@ export declare class IgxBannerComponent implements IToggleView {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.open()">Open Banner</button>
+     * <button type="button" (click)="banner.open()">Open Banner</button>
      * ```
      */
     open(event?: Event): void;
@@ -164,7 +164,7 @@ export declare class IgxBannerComponent implements IToggleView {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.close()">Close Banner</button>
+     * <button type="button" (click)="banner.close()">Close Banner</button>
      * ```
      */
     close(event?: Event): void;
@@ -179,7 +179,7 @@ export declare class IgxBannerComponent implements IToggleView {
      * <igx-banner #banner>
      * ...
      * </igx-banner>
-     * <button (click)="banner.toggle()">Toggle Banner</button>
+     * <button type="button" (click)="banner.toggle()">Toggle Banner</button>
      * ```
      */
     toggle(event?: Event): void;

package/lib/card/card.component.d.ts

@@ -130,8 +130,8 @@ export declare class IgxCardFooterDirective {
  *     <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
  *   </igx-card-header>
  *   <igx-card-actions>
- *       <button igxButton igxRipple>Share</button>
- *       <button igxButton igxRipple>Play Album</button>
+ *       <button type="button" igxButton igxRipple>Share</button>
+ *       <button type="button" igxButton igxRipple>Play Album</button>
  *   </igx-card-actions>
  * </igx-card>
  * ```

package/lib/carousel/carousel.component.d.ts

@@ -199,9 +199,9 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
      *  <igx-carousel #carousel>
      *      ...
      *      <ng-template igxCarouselNextButton let-disabled>
-     *            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-     *                <igx-icon>add</igx-icon>
-     *           </button>
+     *          <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
+     *              <igx-icon>add</igx-icon>
+     *          </button>
      *      </ng-template>
      *  </igx-carousel>
      * ```
@@ -220,9 +220,9 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
      *  <igx-carousel #carousel>
      *      ...
      *      <ng-template igxCarouselPrevButton let-disabled>
-     *            <button igxButton="fab" igxRipple="white" [disabled]="disabled">
-     *                <igx-icon>remove</igx-icon>
-     *           </button>
+     *          <button type="button" igxButton="fab" igxRipple="white" [disabled]="disabled">
+     *              <igx-icon>remove</igx-icon>
+     *          </button>
      *      </ng-template>
      *  </igx-carousel>
      * ```

package/lib/combo/combo.common.d.ts

@@ -485,7 +485,7 @@ export declare abstract class IgxComboBaseDirective extends DisplayDensityBase i
      *  <igx-combo #combo>
      *      ...
      *      <ng-template igxComboAddItem>
-     *          <button class="combo__add-button">
+     *          <button type="button" igxButton="raised" class="combo__add-button">
      *              Click to add item
      *          </button>
      *      </ng-template>
@@ -718,7 +718,7 @@ export declare abstract class IgxComboBaseDirective extends DisplayDensityBase i
      * A method that opens/closes the combo.
      *
      * ```html
-     * <button (click)="combo.toggle()">Toggle Combo</button>
+     * <button type="button" (click)="combo.toggle()">Toggle Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */
@@ -727,7 +727,7 @@ export declare abstract class IgxComboBaseDirective extends DisplayDensityBase i
      * A method that opens the combo.
      *
      * ```html
-     * <button (click)="combo.open()">Open Combo</button>
+     * <button type="button" (click)="combo.open()">Open Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */
@@ -736,7 +736,7 @@ export declare abstract class IgxComboBaseDirective extends DisplayDensityBase i
      * A method that closes the combo.
      *
      * ```html
-     * <button (click)="combo.close()">Close Combo</button>
+     * <button type="button" (click)="combo.close()">Close Combo</button>
      * <igx-combo #combo></igx-combo>
      * ```
      */

package/lib/combo/combo.directives.d.ts

@@ -114,7 +114,7 @@ export declare class IgxComboHeaderItemDirective {
  * @example
  * <igx-combo #combo>
  *      <ng-template igxComboAddItem>
- *          <button class="combo__add-button">
+ *          <button type="button" class="combo__add-button">
  *              Click to add item
  *          </button>
  *      </ng-template>

package/lib/core/navigation/directives.d.ts

@@ -5,7 +5,7 @@ import * as i0 from "@angular/core";
  *
  * Usage:
  * ```
- * <button igxNavToggle="ID"> Toggle </button>
+ * <button type="button" igxNavToggle="ID">Toggle</button>
  * ```
  * Where the `ID` matches the ID of compatible `IToggleView` component.
  */
@@ -22,7 +22,7 @@ export declare class IgxNavigationToggleDirective {
  *
  * Usage:
  * ```
- * <button igxNavClose="ID"> Close </button>
+ * <button type="button" igxNavClose="ID">Close</button>
  * ```
  * Where the `ID` matches the ID of compatible `IToggleView` component.
  */

package/lib/date-picker/date-picker.component.d.ts

@@ -298,7 +298,7 @@ export declare class IgxDatePickerComponent extends PickerBaseDirective implemen
      * ```html
      * <igx-date-picker #picker></igx-date-picker>
      *
-     * <button (click)="picker.open()">Open Dialog</button>
+     * <button type="button" igxButton (click)="picker.open()">Open Dialog</button>
      * ```
      */
     open(settings?: OverlaySettings): void;
@@ -309,7 +309,7 @@ export declare class IgxDatePickerComponent extends PickerBaseDirective implemen
      * ```html
      * <igx-date-picker #picker></igx-date-picker>
      *
-     * <button (click)="picker.toggle()">Toggle Dialog</button>
+     * <button type="button" igxButton (click)="picker.toggle()">Toggle Dialog</button>
      * ```
      */
     toggle(settings?: OverlaySettings): void;
@@ -320,7 +320,7 @@ export declare class IgxDatePickerComponent extends PickerBaseDirective implemen
      * ```html
      * <igx-date-picker #picker></igx-date-picker>
      *
-     * <button (click)="picker.close()">Close Dialog</button>
+     * <button type="button" igxButton (click)="picker.close()">Close Dialog</button>
      * ```
      */
     close(): void;
@@ -343,7 +343,7 @@ export declare class IgxDatePickerComponent extends PickerBaseDirective implemen
      * ```html
      * <igx-date-picker #picker></igx-date-picker>
      *
-     * <button (click)="picker.selectToday()">Select Today</button>
+     * <button type="button" igxButton (click)="picker.selectToday()">Select Today</button>
      * ```
      * */
     selectToday(): void;

package/lib/date-range-picker/date-range-picker.component.d.ts

@@ -269,7 +269,7 @@ export declare class IgxDateRangePickerComponent extends PickerBaseDirective imp
      * ```html
      * <igx-date-range-picker #dateRange></igx-date-range-picker>
      *
-     * <button (click)="dateRange.open()">Open Dialog</button
+     * <button type="button" igxButton (click)="dateRange.open()">Open Dialog</button
      * ```
      */
     open(overlaySettings?: OverlaySettings): void;
@@ -280,7 +280,7 @@ export declare class IgxDateRangePickerComponent extends PickerBaseDirective imp
      * ```html
      * <igx-date-range-picker #dateRange></igx-date-range-picker>
      *
-     * <button (click)="dateRange.close()">Close Dialog</button>
+     * <button type="button" igxButton (click)="dateRange.close()">Close Dialog</button>
      * ```
      */
     close(): void;
@@ -291,7 +291,7 @@ export declare class IgxDateRangePickerComponent extends PickerBaseDirective imp
      * ```html
      * <igx-date-range-picker #dateRange></igx-date-range-picker>
      *
-     * <button (click)="dateRange.toggle()">Toggle Dialog</button>
+     * <button type="button" igxButton (click)="dateRange.toggle()">Toggle Dialog</button>
      * ```
      */
     toggle(overlaySettings?: OverlaySettings): void;

package/lib/dialog/dialog.component.d.ts

@@ -16,7 +16,7 @@ import * as i0 from "@angular/core";
  *
  * Example:
  * ```html
- * <button (click)="form.open()">Show Dialog</button>
+ * <button type="button" igxButton (click)="form.open()">Show Dialog</button>
  * <igx-dialog #form title="Sign In" rightButtonLabel="OK">
  *   <div>
  *     <igx-input-group>
@@ -335,7 +335,7 @@ export declare class IgxDialogComponent implements IToggleView, OnInit, OnDestro
      *
      * @memberOf {@link IgxDialogComponent}
      * ```html
-     * <button (click)="dialog.open() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
+     * <button type="button" (click)="dialog.open() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
      * <igx-dialog #dialog></igx-dialog>
      * ```
      */
@@ -345,7 +345,7 @@ export declare class IgxDialogComponent implements IToggleView, OnInit, OnDestro
      *
      *  @memberOf {@link IgxDialogComponent}
      * ```html
-     * <button (click)="dialog.close() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
+     * <button type="button" (click)="dialog.close() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
      * <igx-dialog #dialog></igx-dialog>
      * ```
      */
@@ -355,7 +355,7 @@ export declare class IgxDialogComponent implements IToggleView, OnInit, OnDestro
      *
      * @memberOf {@link IgxDialogComponent}
      * ```html
-     * <button (click)="dialog.toggle() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
+     * <button type="button" (click)="dialog.toggle() igxButton="raised" igxButtonColor="white" igxRipple="white">Trigger Dialog</button>
      * <igx-dialog #dialog></igx-dialog>
      * ```
      */

package/lib/directives/button/button.directive.d.ts

@@ -29,7 +29,7 @@ export type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType];
  *
  * @example
  * ```html
- * <button igxButton="outlined">A Button</button>
+ * <button type="button" igxButton="outlined">A Button</button>
  * ```
  */
 export declare class IgxButtonDirective extends DisplayDensityBase {
@@ -97,7 +97,7 @@ export declare class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <button igxButton="flat" [selected]="button.selected"></button>
+     * <button type="button" igxButton="flat" [selected]="button.selected"></button>
      * ```
      */
     set selected(value: boolean);
@@ -117,7 +117,7 @@ export declare class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <button igxButton="icon"></button>
+     * <button type="button" igxButton="icon"></button>
      * ```
      */
     set type(type: IgxButtonType);
@@ -126,7 +126,7 @@ export declare class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <button igxButton igxButtonColor="orange"></button>
+     * <button type="button" igxButton igxButtonColor="orange"></button>
      * ```
      */
     set color(value: string);
@@ -135,7 +135,7 @@ export declare class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      *  ```html
-     * <button igxButton igxButtonBackground="red"></button>
+     * <button type="button" igxButton igxButtonBackground="red"></button>
      * ```
      */
     set background(value: string);
@@ -144,7 +144,7 @@ export declare class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      *  ```html
-     * <button igxButton="flat" igxLabel="Label"></button>
+     * <button type="button" igxButton="flat" igxLabel="Label"></button>
      * ```
      */
     set label(value: string);
@@ -162,7 +162,7 @@ export declare class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      * ```html
-     * <button igxButton= "fab" [disabled]="true"></button>
+     * <button type="button" igxButton="fab" [disabled]="true"></button>
      * ```
      */
     set disabled(val: boolean);

package/lib/directives/ripple/ripple.directive.d.ts

@@ -18,8 +18,8 @@ export declare class IgxRippleDirective {
      * ```
      * Can set the ripple to activate on a child element inside the parent where igxRipple is defined.
      * ```html
-     * <div #rippleContainer [igxRippleTarget] = "'#child"'>
-     *  <button id="child">Click</button>
+     * <div #rippleContainer [igxRippleTarget]="'#child"'>
+     *   <button type="button" igxButton id="child">Click</button>
      * </div>
      * ```
      *
@@ -29,7 +29,7 @@ export declare class IgxRippleDirective {
     /**
      * Sets/gets the ripple color.
      * ```html
-     * <button #rippleContainer [igxRipple] = "'red'" ></button>
+     * <button type="button" #rippleContainer igxButton [igxRipple]="'red'"></button>
      * ```
      * ```typescript
      * @ViewChild('rippleContainer', {read: IgxRippleDirective})
@@ -44,7 +44,7 @@ export declare class IgxRippleDirective {
      * Sets/gets the ripple duration(in milliseconds).
      * Default value is `600`.
      * ```html
-     * <button #rippleContainer igxRipple [igxRippleDuration] = "800"></button>
+     * <button type="button" #rippleContainer igxButton igxRipple [igxRippleDuration]="800"></button>
      * ```
      * ```typescript
      * @ViewChild('rippleContainer', {read: IgxRippleDirective})
@@ -58,7 +58,7 @@ export declare class IgxRippleDirective {
     /**
      * Enables/disables the ripple to be centered.
      * ```html
-     * <button #rippleContainer igxRipple [igxRippleCentered] = "true"></button>
+     * <button type="button" #rippleContainer igxButton igxRipple [igxRippleCentered]="true"></button>
      * ```
      *
      * @memberof IgxRippleDirective
@@ -68,7 +68,7 @@ export declare class IgxRippleDirective {
      * Sets/gets whether the ripple is disabled.
      * Default value is `false`.
      * ```html
-     * <button #rippleContainer igxRipple [igxRippleDisabled] = "true"></button>
+     * <button type="button" #rippleContainer igxRipple [igxRippleDisabled]="true"></button>
      * ```
      * ```typescript
      * @ViewChild('rippleContainer', {read: IgxRippleDirective})

package/lib/directives/tooltip/tooltip-target.directive.d.ts

@@ -24,7 +24,7 @@ export interface ITooltipHideEventArgs extends IBaseEventArgs {
  *
  * Example:
  * ```html
- * <button [igxTooltipTarget]="tooltipRef">Hover me</button>
+ * <button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button>
  * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
  * ```
  */
@@ -42,7 +42,7 @@ export declare class IgxTooltipTargetDirective extends IgxToggleActionDirective
      *
      * ```html
      * <!--set-->
-     * <button [igxTooltipTarget]="tooltipRef" showDelay="1500">Hover me</button>
+     * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" [showDelay]="1500">Hover me</button>
      * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
      * ```
      */
@@ -57,7 +57,7 @@ export declare class IgxTooltipTargetDirective extends IgxToggleActionDirective
      *
      * ```html
      * <!--set-->
-     * <button [igxTooltipTarget]="tooltipRef" hideDelay="1500">Hover me</button>
+     * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" [hideDelay]="1500">Hover me</button>
      * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
      * ```
      */
@@ -74,7 +74,7 @@ export declare class IgxTooltipTargetDirective extends IgxToggleActionDirective
      *
      * ```html
      * <!--set-->
-     * <button [igxTooltipTarget]="tooltipRef" [tooltipDisabled]="true">Hover me</button>
+     * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" [tooltipDisabled]="true">Hover me</button>
      * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
      * ```
      */
@@ -118,8 +118,7 @@ export declare class IgxTooltipTargetDirective extends IgxToggleActionDirective
      * ```
      *
      * ```html
-     * <button [igxTooltipTarget]="tooltipRef"
-     *         (tooltipShow)='tooltipShowing($event)'>Hover me</button>
+     * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipShow)='tooltipShowing($event)'>Hover me</button>
      * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
      * ```
      */
@@ -135,8 +134,7 @@ export declare class IgxTooltipTargetDirective extends IgxToggleActionDirective
      * ```
      *
      * ```html
-     * <button [igxTooltipTarget]="tooltipRef"
-     *         (tooltipHide)='tooltipHiding($event)'>Hover me</button>
+     * <button type="button" igxButton [igxTooltipTarget]="tooltipRef" (tooltipHide)='tooltipHiding($event)'>Hover me</button>
      * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
      * ```
      */

package/lib/directives/tooltip/tooltip.directive.d.ts

@@ -14,7 +14,7 @@ import * as i0 from "@angular/core";
  *
  * Example:
  * ```html
- * <button [igxTooltipTarget]="tooltipRef">Hover me</button>
+ * <button type="button" igxButton [igxTooltipTarget]="tooltipRef">Hover me</button>
  * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
  * ```
  */

package/lib/expansion-panel/expansion-panel.component.d.ts

@@ -161,7 +161,7 @@ export declare class IgxExpansionPanelComponent extends ToggleAnimationPlayer im
      *  <igx-expansion-panel #myPanel>
      *      ...
      *  </igx-expansion-panel>
-     *  <button (click)="myPanel.collapse($event)">Collpase Panel</button>
+     *  <button type="button" igxButton (click)="myPanel.collapse($event)">Collpase Panel</button>
      * ```
      */
     collapse(evt?: Event): void;
@@ -172,7 +172,7 @@ export declare class IgxExpansionPanelComponent extends ToggleAnimationPlayer im
      *  <igx-expansion-panel #myPanel>
      *      ...
      *  </igx-expansion-panel>
-     *  <button (click)="myPanel.expand($event)">Expand Panel</button>
+     *  <button type="button" igxButton (click)="myPanel.expand($event)">Expand Panel</button>
      * ```
      */
     expand(evt?: Event): void;
@@ -183,7 +183,7 @@ export declare class IgxExpansionPanelComponent extends ToggleAnimationPlayer im
      *  <igx-expansion-panel #myPanel>
      *      ...
      *  </igx-expansion-panel>
-     *  <button (click)="myPanel.toggle($event)">Expand Panel</button>
+     *  <button type="button" igxButton (click)="myPanel.toggle($event)">Expand Panel</button>
      * ```
      */
     toggle(evt?: Event): void;

package/lib/grids/common/crud.service.d.ts

@@ -141,7 +141,7 @@ export declare class IgxGridCRUDService extends IgxRowAddCrudState {
      * If `commit === true`, passes them from the pending state to the data (or transaction service)
      * @example
      * ```html
-     * <button igxButton (click)="grid.endEdit(true)">Commit Row</button>
+     * <button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button>
      * ```
      * @param commit
      */

package/lib/grids/grid-base.directive.d.ts

@@ -967,8 +967,8 @@ export declare abstract class IgxGridBaseDirective extends DisplayDensityBase im
      * Sets the row edit actions template.
      *```html
      * <ng-template #template igxRowEditActions let-endRowEdit>
-     * <button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
-     * <button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
+     *     <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
+     *     <button type="button" igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
      * </ng-template>
      * ```
      *```typescript
@@ -3230,7 +3230,7 @@ export declare abstract class IgxGridBaseDirective extends DisplayDensityBase im
      * If `commit === true`, passes them from the pending state to the data (or transaction service)
      * @example
      * ```html
-     * <button igxButton (click)="grid.endEdit(true)">Commit Row</button>
+     * <button type="button" igxButton (click)="grid.endEdit(true)">Commit Row</button>
      * ```
      * @param commit
      */

package/lib/snackbar/snackbar.component.d.ts

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
  *
  * Example:
  * ```html
- * <button (click)="snackbar.show()">Send message</button>
+ * <button type="button" igxButton (click)="snackbar.show()">Send message</button>
  * <div>
  *   <igx-snackbar #snackbar>
  *      Message sent

package/lib/time-picker/time-picker.component.d.ts

@@ -332,7 +332,7 @@ export declare class IgxTimePickerComponent extends PickerBaseDirective implemen
      * @param settings OverlaySettings - the overlay settings to use for positioning the drop down or dialog container according to
      * ```html
      * <igx-time-picker #picker [value]="date"></igx-time-picker>
-     * <button (click)="picker.open()">Open Dialog</button>
+     * <button type="button" igxButton (click)="picker.open()">Open Dialog</button>
      * ```
      */
     open(settings?: OverlaySettings): void;

package/lib/toast/toast.component.d.ts

@@ -13,7 +13,7 @@ import * as i0 from "@angular/core";
  *
  * Example:
  * ```html
- * <button (click)="toast.open()">Show notification</button>
+ * <button type="button" igxButton (click)="toast.open()">Show notification</button>
  * <igx-toast #toast displayTime="1000">
  *      Notification displayed
  * </igx-toast>

package/lib/tree/tree-node/tree-node.component.d.ts

@@ -321,7 +321,7 @@ export declare class IgxTreeNodeComponent<T> extends ToggleAnimationPlayer imple
      * <igx-tree>
      *      <igx-tree-node #node>My Node</igx-tree-node>
      * </igx-tree>
-     * <button igxButton (click)="node.toggle()">Toggle Node</button>
+     * <button type="button" igxButton (click)="node.toggle()">Toggle Node</button>
      * ```
      *
      * ```typescript
@@ -344,7 +344,7 @@ export declare class IgxTreeNodeComponent<T> extends ToggleAnimationPlayer imple
      * <igx-tree>
      *      <igx-tree-node #node>My Node</igx-tree-node>
      * </igx-tree>
-     * <button igxButton (click)="node.expand()">Expand Node</button>
+     * <button type="button" igxButton (click)="node.expand()">Expand Node</button>
      * ```
      *
      * ```typescript
@@ -360,7 +360,7 @@ export declare class IgxTreeNodeComponent<T> extends ToggleAnimationPlayer imple
      * <igx-tree>
      *      <igx-tree-node #node>My Node</igx-tree-node>
      * </igx-tree>
-     * <button igxButton (click)="node.collapse()">Collapse Node</button>
+     * <button type="button" igxButton (click)="node.collapse()">Collapse Node</button>
      * ```
      *
      * ```typescript

package/migrations/common/UpdateChanges.js

@@ -400,7 +400,7 @@ class UpdateChanges {
     updateSassVariables(entryPath) {
         let fileContent = this.host.read(entryPath).toString();
         let overwrite = false;
-        const allowedStartCharacters = new RegExp('(\:|\,)\s?', 'g');
+        const allowedStartCharacters = new RegExp(/(:|,)\s?/, 'g');
         // eslint-disable-next-line no-control-regex
         const allowedEndCharacters = new RegExp('[;),: \r\n]', 'g');
         for (const change of this.themeChanges.changes) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "16.1.2",
+  "version": "16.1.3",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",