Merge branch 'develop' into feature/cxspa-8760

feature-libs/asm/assets/translations/en/asm.json

@@ -135,6 +135,7 @@
         "row": {
           "id": "ID",
           "qty": "Qty",
+          "qtyFull": "Quantity",
           "total": "Total"
         },
         "actions": {

feature-libs/asm/components/asm-save-cart-dialog/asm-save-cart-dialog.component.html

@@ -53,6 +53,13 @@ <h2 id="asm-save-cart-dialog-title" class="title modal-title">
         </div>
         <div class="cx-dialog-row row">
           <div
+            *cxFeature="'a11yQTY2Quantity'"
+            class="cx-dialog-item col-sm-6 col-md-6 text-right item-left-text"
+          >
+            {{ 'asm.saveCart.dialog.row.qtyFull' | cxTranslate }}
+          </div>
+          <div
+            *cxFeature="'!a11yQTY2Quantity'"
             class="cx-dialog-item col-sm-6 col-md-6 text-right item-left-text"
           >
             {{ 'asm.saveCart.dialog.row.qty' | cxTranslate }}

feature-libs/asm/components/asm-save-cart-dialog/asm-save-cart-dialog.component.ts

@@ -7,7 +7,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Cart } from '@spartacus/cart/base/root';
 import { SavedCartFacade } from '@spartacus/cart/saved-cart/root';
-import { GlobalMessageType } from '@spartacus/core';
+import { GlobalMessageType, useFeatureStyles } from '@spartacus/core';
 import { FocusConfig, LaunchDialogService } from '@spartacus/storefront';
 import { BehaviorSubject } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -38,7 +38,9 @@ export class AsmSaveCartDialogComponent implements OnInit {
   constructor(
     protected launchDialogService: LaunchDialogService,
     protected savedCartFacade: SavedCartFacade
-  ) {}
+  ) {
+    useFeatureStyles('a11yQTY2Quantity');
+  }
 
   ngOnInit(): void {
     this.launchDialogService.data$.pipe(take(1)).subscribe((data: Cart) => {

feature-libs/cart/base/assets/translations/en/cart.json

@@ -10,6 +10,7 @@
     "item": "Item",
     "itemPrice": "Item price",
     "quantity": "Qty",
+    "quantityFull": "Quantity",
     "quantityTitle": "The quantity represents the total number of this item in your cart.",
     "total": "Total",
     "actions": "Actions",

feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html

@@ -1,6 +1,11 @@
 <form *ngIf="productCode" [formGroup]="addToCartForm" (submit)="addToCart()">
   <div class="quantity" *ngIf="showQuantity">
-    <label>{{ 'addToCart.quantity' | cxTranslate }}</label>
+    <label *cxFeature="'a11yQTY2Quantity'">{{
+      'addToCart.quantityFull' | cxTranslate
+    }}</label>
+    <label *cxFeature="'!a11yQTY2Quantity'">{{
+      'addToCart.quantity' | cxTranslate
+    }}</label>
     <div class="cx-counter-stock">
       <cx-item-counter
         *ngIf="hasStock"

feature-libs/cart/base/components/add-to-cart/add-to-cart.component.ts

@@ -31,6 +31,7 @@ import {
   FeatureConfigService,
   Product,
   isNotNullable,
+  useFeatureStyles,
 } from '@spartacus/core';
 import {
   CmsComponentData,
@@ -112,7 +113,9 @@ export class AddToCartComponent implements OnInit, OnDestroy {
     protected component: CmsComponentData<CmsAddToCartComponent>,
     protected eventService: EventService,
     @Optional() protected productListItemContext?: ProductListItemContext
-  ) {}
+  ) {
+    useFeatureStyles('a11yQTY2Quantity');
+  }
 
   ngOnInit() {
     if (this.product) {

feature-libs/cart/base/components/add-to-cart/add-to-cart.module.ts

@@ -7,7 +7,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+  CmsConfig,
+  FeaturesConfigModule,
+  I18nModule,
+  provideDefaultConfig,
+} from '@spartacus/core';
 import {
   IconModule,
   ItemCounterModule,
@@ -23,6 +28,7 @@ import { AddToCartComponent } from './add-to-cart.component';
     IconModule,
     ItemCounterModule,
     OutletModule,
+    FeaturesConfigModule,
   ],
   providers: [
     provideDefaultConfig(<CmsConfig>{

feature-libs/cart/base/components/cart-shared/cart-item-list-row/cart-item-list-row.component.html

@@ -102,6 +102,15 @@
   <!-- Item Quantity -->
   <td role="cell" class="cx-quantity">
     <div
+      *cxFeature="'a11yQTY2Quantity'"
+      class="cx-mobile-header"
+      placement="left"
+      title="{{ 'cartItems.quantityTitle' | cxTranslate }}"
+    >
+      {{ 'cartItems.quantityFull' | cxTranslate }}
+    </div>
+    <div
+      *cxFeature="'!a11yQTY2Quantity'"
       class="cx-mobile-header"
       placement="left"
       title="{{ 'cartItems.quantityTitle' | cxTranslate }}"

feature-libs/cart/base/components/cart-shared/cart-item-list-row/cart-item-list-row.component.ts

@@ -6,6 +6,7 @@
 
 import { Component, inject } from '@angular/core';
 import { CartItemContext } from '@spartacus/cart/base/root';
+import { useFeatureStyles } from '@spartacus/core';
 import { CartItemComponent } from '../cart-item/cart-item.component';
 import { CartItemContextSource } from '../cart-item/model/cart-item-context-source.model';
 import { CartItemListComponentService } from './cart-item-list-row.component.service';
@@ -23,5 +24,6 @@ export class CartItemListRowComponent extends CartItemComponent {
   isFlagQuote = this.componentService.showBasePriceWithDiscount();
   constructor(cartItemContextSource: CartItemContextSource) {
     super(cartItemContextSource);
+    useFeatureStyles('a11yQTY2Quantity');
   }
 }

feature-libs/cart/base/components/cart-shared/cart-item-list/cart-item-list.component.html

@@ -15,7 +15,18 @@
         [cxOutlet]="CartOutlets.CPQ_QUOTE_HEADING"
         [cxOutletContext]="items"
       ></ng-template>
-      <th role="columnheader" class="cx-item-list-qty">
+      <th
+        *cxFeature="'a11yQTY2Quantity'"
+        role="columnheader"
+        class="cx-item-list-qty"
+      >
+        {{ 'cartItems.quantityFull' | cxTranslate }}
+      </th>
+      <th
+        *cxFeature="'!a11yQTY2Quantity'"
+        role="columnheader"
+        class="cx-item-list-qty"
+      >
         {{ 'cartItems.quantity' | cxTranslate }}
       </th>
       <ng-container *ngIf="options.isSaveForLater; else totalHeader">

feature-libs/cart/base/components/cart-shared/cart-item-list/cart-item-list.component.ts

@@ -18,12 +18,12 @@ import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import {
   ActiveCartFacade,
   CartItemComponentOptions,
+  CartOutlets,
   ConsignmentEntry,
   MultiCartFacade,
   OrderEntry,
   PromotionLocation,
   SelectiveCartFacade,
-  CartOutlets,
 } from '@spartacus/cart/base/root';
 import {
   FeatureConfigService,
@@ -99,6 +99,7 @@ export class CartItemListComponent implements OnInit, OnDestroy {
     @Optional() protected outlet?: OutletContextData<ItemListContext>
   ) {
     useFeatureStyles('a11yPreventHorizontalScroll');
+    useFeatureStyles('a11yQTY2Quantity');
   }
 
   ngOnInit(): void {

feature-libs/cart/base/components/cart-shared/cart-item/cart-item.component.html

@@ -72,6 +72,16 @@
         <!-- Item Quantity -->
         <div class="cx-quantity" [ngClass]="compact ? '' : ' col-3'">
           <div
+            *cxFeature="'a11yQTY2Quantity'"
+            class="cx-label"
+            [ngClass]="compact ? '' : ' d-block d-md-none d-lg-none d-xl-none'"
+            placement="left"
+            title="{{ 'cartItems.quantityTitle' | cxTranslate }}"
+          >
+            {{ 'cartItems.quantityFull' | cxTranslate }}
+          </div>
+          <div
+            *cxFeature="'!a11yQTY2Quantity'"
             class="cx-label"
             [ngClass]="compact ? '' : ' d-block d-md-none d-lg-none d-xl-none'"
             placement="left"

feature-libs/cart/base/components/cart-shared/cart-item/cart-item.component.ts

@@ -13,9 +13,9 @@ import {
   OrderEntry,
   PromotionLocation,
 } from '@spartacus/cart/base/root';
+import { useFeatureStyles } from '@spartacus/core';
 import { ICON_TYPE } from '@spartacus/storefront';
 import { CartItemContextSource } from './model/cart-item-context-source.model';
-import { useFeatureStyles } from '@spartacus/core';
 
 @Component({
   selector: 'cx-cart-item',
@@ -45,6 +45,7 @@ export class CartItemComponent implements OnChanges {
 
   constructor(protected cartItemContextSource: CartItemContextSource) {
     useFeatureStyles('a11yCartItemsLinksStyles');
+    useFeatureStyles('a11yQTY2Quantity');
   }
 
   ngOnChanges(changes?: SimpleChanges) {

feature-libs/cart/base/styles/components/_cart-item-list.scss

@@ -6,6 +6,9 @@
 
     .cx-item-list-qty {
       text-transform: uppercase;
+      @include forFeature('a11yQTY2Quantity') {
+        text-transform: none;
+      }
     }
   }
 

feature-libs/cart/quick-order/assets/translations/en/quickOrder.json

@@ -13,7 +13,8 @@
     "product": "Product",
     "products": "Products",
     "productCodeLabel": "Product ID",
-    "quantityLabel": "Qty"
+    "quantityLabel": "Qty",
+    "quantityFullLabel": "Quantity"
   },
   "quickOrderForm": {
     "placeholder": "Enter Product name or SKU",
@@ -65,6 +66,7 @@
     "id": "ID",
     "price": "Price",
     "quantity": "QTY",
+    "quantityFull": "Quantity",
     "itemPrice": "Item price",
     "qty": "Qty",
     "actions": "Actions",

feature-libs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html

@@ -67,7 +67,17 @@
         </span>
 
         <span class="cx-cart-quick-order-form-qty">
-          <label class="cx-cart-quick-order-form-label">
+          <label
+            *cxFeature="'a11yQTY2Quantity'"
+            class="cx-cart-quick-order-form-label"
+          >
+            {{ 'quickOrderCartForm.quantityFullLabel' | cxTranslate }}
+          </label>
+
+          <label
+            *cxFeature="'!a11yQTY2Quantity'"
+            class="cx-cart-quick-order-form-label"
+          >
             {{ 'quickOrderCartForm.quantityLabel' | cxTranslate }}
           </label>
 
@@ -156,7 +166,7 @@
           <cx-form-errors
             *cxFeature="'formErrorsDescriptiveMessages'"
             [translationParams]="{
-              label: 'quickOrderCartForm.quantityLabel' | cxTranslate,
+              label: 'quickOrderCartForm.quantityFullLabel' | cxTranslate,
             }"
             [control]="quickOrderForm.get('quantity')"
           ></cx-form-errors>

feature-libs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.ts

@@ -27,6 +27,7 @@ import {
   FeatureConfigService,
   GlobalMessageService,
   GlobalMessageType,
+  useFeatureStyles,
 } from '@spartacus/core';
 import { Observable, Subscription } from 'rxjs';
 import { first, map } from 'rxjs/operators';
@@ -55,7 +56,9 @@ export class CartQuickOrderFormComponent implements OnInit, OnDestroy {
     protected eventService: EventService,
     protected formBuilder: UntypedFormBuilder,
     protected globalMessageService: GlobalMessageService
-  ) {}
+  ) {
+    useFeatureStyles('a11yQTY2Quantity');
+  }
 
   ngOnInit(): void {
     this.buildForm();

feature-libs/cart/quick-order/components/quick-order/table/item/quick-order-item.component.html

@@ -41,7 +41,10 @@
 </td>
 
 <td role="cell" class="cx-quantity">
-  <div class="cx-mobile-header">
+  <div *cxFeature="'a11yQTY2Quantity'" class="cx-mobile-header">
+    {{ 'quickOrderTable.quantityFull' | cxTranslate }}
+  </div>
+  <div *cxFeature="'!a11yQTY2Quantity'" class="cx-mobile-header">
     {{ 'quickOrderTable.qty' | cxTranslate }}
   </div>
   <div class="cx-value">

feature-libs/cart/quick-order/components/quick-order/table/item/quick-order-item.component.ts

@@ -51,6 +51,7 @@ export class QuickOrderItemComponent implements OnInit, OnDestroy {
     protected quickOrderService: QuickOrderFacade
   ) {
     useFeatureStyles('a11yCartItemsLinksStyles');
+    useFeatureStyles('a11yQTY2Quantity');
   }
 
   ngOnInit(): void {

feature-libs/cart/quick-order/components/quick-order/table/quick-order-table.component.html

@@ -16,7 +16,18 @@
       <th role="columnheader" class="cx-item-list-price">
         {{ 'quickOrderTable.price' | cxTranslate }}
       </th>
-      <th role="columnheader" class="cx-item-list-qty">
+      <th
+        *cxFeature="'a11yQTY2Quantity'"
+        role="columnheader"
+        class="cx-item-list-qty"
+      >
+        {{ 'quickOrderTable.quantityFull' | cxTranslate }}
+      </th>
+      <th
+        *cxFeature="'!a11yQTY2Quantity'"
+        role="columnheader"
+        class="cx-item-list-qty"
+      >
         {{ 'quickOrderTable.quantity' | cxTranslate }}
       </th>
       <th role="columnheader" class="cx-item-list-actions">

feature-libs/cart/quick-order/components/quick-order/table/quick-order-table.component.ts

@@ -6,6 +6,7 @@
 
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { OrderEntry } from '@spartacus/cart/base/root';
+import { useFeatureStyles } from '@spartacus/core';
 
 @Component({
   selector: 'cx-quick-order-table',
@@ -18,4 +19,8 @@ export class QuickOrderTableComponent {
 
   @Input()
   loading: boolean = false;
+
+  constructor() {
+    useFeatureStyles('a11yQTY2Quantity');
+  }
 }

feature-libs/cart/saved-cart/assets/translations/en/savedCart.json

@@ -19,6 +19,7 @@
     "dateSaved": "Date Saved",
     "cartDescription": "Description",
     "quantity": "Qty",
+    "quantityFull": "Quantity",
     "total": "Total",
     "actions": "Actions",
     "makeCartActive": "Make cart active",
@@ -53,6 +54,7 @@
     "id": "ID",
     "description": "Description",
     "quantity": "QTY",
+    "quantityFull": "Quantity",
     "total": "Total",
     "keepCopySavedCart": "Keep a copy of this cart in the saved carts list",
     "defaultCloneCartName": "Copy of {{name}}",