fix(pagination): mark selected option in page-sizes-select component (c…

…arbon-design-system#10884)

### Related Ticket(s)

Closes carbon-design-system/carbon-for-ibm-dotcom#10553
https://jsw.ibm.com/browse/ADCMS-3821

### Description

Fixes a bug where the initial value of the `page-size` attribute on the `<bx-pagination>` component previously did not set the correct `<option>` element within the `<bx-page-sizes-select>` component.

### Changelog

**Changed**

- Updated the `slotchange` handler for the `<bx-page-sizes-select>` component to set the `selected` attribute when applicable.

### Testing Instructions

* Navigate to Pagination > Default story
* Enter a different value for "Number of rows per page (page-size)", using one of the other values in the dropdown, eg. 20 or 30
* Click the "Open canvas in new tab" button, this will initiate the story with the set value for `page-size` to test the bug
* Should see the value you set for the items per page drop down.

web-components/packages/carbon-web-components/src/components/pagination/page-sizes-select.ts

@@ -54,14 +54,18 @@ class BXPageSizesSelect extends FocusMixin(LitElement) {
    * @param event The event.
    */
   private _handleSlotChange({ target }: Event) {
-    const { _selectNode: selectNode } = this;
+    const { _selectNode: selectNode, value } = this;
     while (selectNode.firstChild) {
       selectNode.removeChild(selectNode.firstChild);
     }
     (
       (target as HTMLSlotElement).assignedNodes() as HTMLOptionElement[]
     ).forEach((item) => {
-      selectNode?.appendChild(item.cloneNode(true));
+      const optionElement = item.cloneNode(true) as HTMLOptionElement;
+      if (value && Number(optionElement.value) === value) {
+        optionElement.selected = true;
+      }
+      selectNode?.appendChild(optionElement);
     });
   }
 

web-components/packages/carbon-web-components/src/components/pagination/pagination-story.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -52,7 +52,7 @@ export default {
     knobs: {
       'bx-pagination': () => ({
         atLastPage: boolean(
-          'Explicitly state that the user is at the last page (at-last-apge)',
+          'Explicitly state that the user is at the last page (at-last-page)',
           false
         ),
         pageSize: number('Number of rows per page (page-size)', 10),