fix: rename component inputs named 'class' to 'cssClass' (#975)

BREAKING CHANGE: The input parameter `class` was changed to `cssClass` for the following components: `ish-basket-create-order-template`,`ish-lazy-basket-create-order-template`, `ish-lazy-product-add-to-order-template`,`ish-lazy-product-add-to-quote`, `ish-lazy-product-add-to-wishlist`, `ish-product-add-to-basket`, `ish-product-add-to-compare`, `ish-product-add-to-order-template`, `ish-product-add-to-quote`, `ish-product-add-to-wishlist`. All uses of these components need to be adapted in custom code.

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-page.component.html

@@ -45,7 +45,7 @@ <h1>
   </div>
   <ish-product-add-to-basket
     *ngIf="orderTemplate.itemsCount"
-    [class]="'btn btn-primary float-right'"
+    [cssClass]="'btn btn-primary float-right'"
   ></ish-product-add-to-basket>
 
   <ng-template #noItems>

src/app/extensions/order-templates/pages/account-order-template/account-order-template-list/account-order-template-list.component.html

@@ -58,7 +58,7 @@
             ishProductContext
             [parts]="getParts(orderTemplate)"
             displayType="icon"
-            class="text-primary p-0"
+            cssClass="text-primary p-0"
           ></ish-product-add-to-basket>
         </a>
         <a

src/app/extensions/order-templates/shared/basket-create-order-template/basket-create-order-template.component.html

@@ -1,7 +1,7 @@
 <button
   type="submit"
   name="addProduct"
-  [ngClass]="class"
+  [ngClass]="cssClass"
   (click)="openModal(modal)"
   data-testing-id="addBasketToOrderTemplateButton"
 >

src/app/extensions/order-templates/shared/basket-create-order-template/basket-create-order-template.component.ts

@@ -23,7 +23,7 @@ import { OrderTemplatePreferencesDialogComponent } from '../order-template-prefe
 @GenerateLazyComponent()
 export class BasketCreateOrderTemplateComponent implements OnDestroy {
   @Input() products: LineItemView[];
-  @Input() class?: string;
+  @Input() cssClass?: string;
   private destroy$ = new Subject();
 
   constructor(

src/app/extensions/order-templates/shared/order-template-widget/order-template-widget.component.html

@@ -16,7 +16,7 @@
                 ishProductContext
                 [parts]="getParts(orderTemplate)"
                 displayType="icon"
-                class="p-0 mb-0"
+                cssClass="p-0 mb-0"
               ></ish-product-add-to-basket>
             </a>
           </div>

src/app/extensions/order-templates/shared/product-add-to-order-template/product-add-to-order-template.component.html

@@ -5,7 +5,7 @@
   name="addProduct"
   class="btn"
   [disabled]="disabled$ | async"
-  [ngClass]="class"
+  [ngClass]="cssClass"
   (click)="openModal(modal)"
   data-testing-id="addToOrderTemplateButton"
 >

src/app/extensions/order-templates/shared/product-add-to-order-template/product-add-to-order-template.component.ts

@@ -26,7 +26,7 @@ import { SelectOrderTemplateModalComponent } from '../select-order-template-moda
 @GenerateLazyComponent()
 export class ProductAddToOrderTemplateComponent implements OnDestroy, OnInit {
   @Input() displayType?: 'icon' | 'link' | 'animated' = 'link';
-  @Input() class?: string;
+  @Input() cssClass?: string;
 
   disabled$: Observable<boolean>;
   visible$: Observable<boolean>;

src/app/extensions/quoting/shared/product-add-to-quote/product-add-to-quote.component.html

@@ -2,7 +2,7 @@
   *ngIf="visible$ | async"
   type="submit"
   class="btn"
-  [ngClass]="class"
+  [ngClass]="cssClass"
   [class.btn-secondary]="displayType !== 'icon'"
   [disabled]="disabled$ | async"
   [attr.title]="'quote.add_product_to_quote.button.add_to_quote.label' | translate"

src/app/extensions/quoting/shared/product-add-to-quote/product-add-to-quote.component.ts

@@ -17,7 +17,7 @@ import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-laz
 @GenerateLazyComponent()
 export class ProductAddToQuoteComponent implements OnInit {
   @Input() displayType?: 'icon' | 'link' = 'link';
-  @Input() class?: string;
+  @Input() cssClass?: string;
 
   disabled$: Observable<boolean>;
   visible$: Observable<boolean>;

src/app/extensions/quoting/shared/quote-line-item-list-element/quote-line-item-list-element.component.html

@@ -20,11 +20,11 @@
       <ish-product-inventory></ish-product-inventory>
       <div *ngIf="editable$ | async" class="d-flex align-items-center">
         <ish-lazy-product-add-to-order-template
-          [class]="'btn btn-link btn-tool add-to-order-template'"
+          [cssClass]="'btn btn-link btn-tool add-to-order-template'"
           displayType="icon"
         ></ish-lazy-product-add-to-order-template>
         <ish-lazy-product-add-to-wishlist
-          [class]="'btn-link btn-tool ml-0'"
+          [cssClass]="'btn-link btn-tool ml-0'"
           displayType="icon"
         ></ish-lazy-product-add-to-wishlist>
         <a

src/app/extensions/wishlists/shared/product-add-to-wishlist/product-add-to-wishlist.component.html

@@ -4,7 +4,7 @@
   type="button"
   name="addProduct"
   class="btn add-to-wishlist"
-  [ngClass]="class"
+  [ngClass]="cssClass"
   (click)="openModal(modal)"
   data-testing-id="addToWishlistButton"
 >

src/app/extensions/wishlists/shared/product-add-to-wishlist/product-add-to-wishlist.component.ts

@@ -20,14 +20,13 @@ import { SelectWishlistModalComponent } from '../select-wishlist-modal/select-wi
  *
  * @example
  * <ish-product-add-to-wishlist
- *               [product]=product
  *               displayType="icon"
  * ></ish-product-add-to-wishlist>
  */
 @GenerateLazyComponent()
 export class ProductAddToWishlistComponent implements OnDestroy, OnInit {
   @Input() displayType?: 'icon' | 'link' | 'animated' = 'link';
-  @Input() class?: string;
+  @Input() cssClass?: string;
 
   visible$: Observable<boolean>;
 

src/app/pages/basket/shopping-basket/shopping-basket.component.html

@@ -38,7 +38,7 @@ <h1 class="d-flex flex-wrap align-items-baseline">
             <ish-lazy-basket-add-to-quote></ish-lazy-basket-add-to-quote>
             <ish-lazy-basket-create-order-template
               *ngIf="basket"
-              [class]="'btn btn-secondary'"
+              [cssClass]="'btn btn-secondary'"
               [products]="basket.lineItems"
             ></ish-lazy-basket-create-order-template>
           </div>

src/app/pages/product/product-detail/product-detail.component.html

@@ -37,13 +37,13 @@ <h1>
         </div>
       </div>
 
-      <ish-product-add-to-basket [class]="'btn-lg btn-block'"></ish-product-add-to-basket>
+      <ish-product-add-to-basket [cssClass]="'btn-lg btn-block'"></ish-product-add-to-basket>
 
       <ish-lazy-product-add-to-order-template
-        [class]="'btn btn-secondary btn-block'"
+        [cssClass]="'btn btn-secondary btn-block'"
       ></ish-lazy-product-add-to-order-template>
 
-      <ish-lazy-product-add-to-quote [class]="'btn-block'"></ish-lazy-product-add-to-quote>
+      <ish-lazy-product-add-to-quote [cssClass]="'btn-block'"></ish-lazy-product-add-to-quote>
     </div>
 
     <ish-product-detail-info-accordion></ish-product-detail-info-accordion>

src/app/shared/components/line-item/line-item-list-element/line-item-list-element.component.html

@@ -82,12 +82,12 @@
       <div class="d-flex align-items-end">
         <ish-lazy-product-add-to-order-template
           *ngIf="editable"
-          [class]="'btn-link btn-tool pl-0 add-to-order-template'"
+          [cssClass]="'btn-link btn-tool pl-0 add-to-order-template'"
           displayType="icon"
         ></ish-lazy-product-add-to-order-template>
         <ish-lazy-product-add-to-wishlist
           *ngIf="editable"
-          [class]="'btn-link btn-tool pl-0'"
+          [cssClass]="'btn-link btn-tool pl-0'"
           displayType="icon"
         ></ish-lazy-product-add-to-wishlist>
         <a

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.html

@@ -3,7 +3,7 @@
     type="submit"
     name="addProduct"
     class="btn"
-    [ngClass]="class"
+    [ngClass]="cssClass"
     [class.btn-primary]="!displayIcon"
     [disabled]="(hasQuantityError$ | async) || (displaySpinner$ | async)"
     [attr.title]="translationKey$ | async | translate"

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.ts

@@ -12,8 +12,7 @@ import { whenFalsy } from 'ish-core/utils/operators';
  *
  * @example
  * <ish-product-add-to-basket
-    [class]="'btn-lg btn-block'"
-    [translationKey]="isRetailSet(product) ? 'product.add_to_cart.retailset.link' : 'product.add_to_cart.link'"
+    [cssClass]="'btn-lg btn-block'"
   ></ish-product-add-to-basket>
  */
 @Component({
@@ -29,7 +28,7 @@ export class ProductAddToBasketComponent implements OnInit, OnDestroy {
   /**
    * additional css styling
    */
-  @Input() class?: string;
+  @Input() cssClass?: string;
 
   basketLoading$: Observable<boolean>;
   hasQuantityError$: Observable<boolean>;

src/app/shared/components/product/product-add-to-compare/product-add-to-compare.component.html

@@ -1,7 +1,7 @@
 <button
   *ngIf="(visible$ | async) && ('compare' | ishFeature)"
   class="btn add-to-compare"
-  [ngClass]="class"
+  [ngClass]="cssClass"
   [class.is-selected]="isInCompareList$ | async"
   title="{{ 'product.compare.link' | translate }}"
   (click)="toggleCompare()"

src/app/shared/components/product/product-add-to-compare/product-add-to-compare.component.ts

@@ -9,7 +9,7 @@ import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
  * @example
  * <ish-product-add-to-compare
  *   displayType="icon"
- *   class="btn-link"
+ *   cssClass="btn-link"
  * ></ish-product-add-to-compare>
  */
 @Component({
@@ -19,7 +19,7 @@ import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 })
 export class ProductAddToCompareComponent implements OnInit {
   @Input() displayType?: string;
-  @Input() class?: string;
+  @Input() cssClass?: string;
 
   isInCompareList$: Observable<boolean>;
   visible$: Observable<boolean>;

src/app/shared/components/product/product-row/product-row.component.html

@@ -22,12 +22,12 @@
         <ish-product-promotion displayType="simpleWithDetail"></ish-product-promotion>
 
         <div class="product-tile-actions btn-group">
-          <ish-lazy-product-add-to-quote displayType="icon" class="btn-link"></ish-lazy-product-add-to-quote>
-          <ish-product-add-to-compare displayType="icon" class="btn-link"></ish-product-add-to-compare>
-          <ish-lazy-product-add-to-wishlist displayType="icon" class="btn-link"></ish-lazy-product-add-to-wishlist>
+          <ish-lazy-product-add-to-quote displayType="icon" cssClass="btn-link"></ish-lazy-product-add-to-quote>
+          <ish-product-add-to-compare displayType="icon" cssClass="btn-link"></ish-product-add-to-compare>
+          <ish-lazy-product-add-to-wishlist displayType="icon" cssClass="btn-link"></ish-lazy-product-add-to-wishlist>
           <ish-lazy-product-add-to-order-template
             displayType="icon"
-            class="btn-link"
+            cssClass="btn-link"
           ></ish-lazy-product-add-to-order-template>
         </div>
       </div>

src/app/shared/components/product/product-tile/product-tile.component.html

@@ -18,13 +18,13 @@
 
   <div class="product-tile-actions btn-group">
     <ish-lazy-tacton-configure-product displayType="icon"></ish-lazy-tacton-configure-product>
-    <ish-lazy-product-add-to-quote displayType="icon" class="btn-link"></ish-lazy-product-add-to-quote>
-    <ish-product-add-to-compare displayType="icon" class="btn-link"></ish-product-add-to-compare>
+    <ish-lazy-product-add-to-quote displayType="icon" cssClass="btn-link"></ish-lazy-product-add-to-quote>
+    <ish-product-add-to-compare displayType="icon" cssClass="btn-link"></ish-product-add-to-compare>
     <ish-lazy-product-add-to-order-template
-      [class]="'btn btn-link mr-0'"
+      [cssClass]="'btn btn-link mr-0'"
       displayType="icon"
     ></ish-lazy-product-add-to-order-template>
-    <ish-lazy-product-add-to-wishlist class="btn-link" displayType="icon"></ish-lazy-product-add-to-wishlist>
-    <ish-product-add-to-basket displayType="icon" class="btn-link"></ish-product-add-to-basket>
+    <ish-lazy-product-add-to-wishlist cssClass="btn-link" displayType="icon"></ish-lazy-product-add-to-wishlist>
+    <ish-product-add-to-basket displayType="icon" cssClass="btn-link"></ish-product-add-to-basket>
   </div>
 </div>