@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.4

package/es/components/pagination/pagination.js

@@ -1,7 +1,11 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _decorate from "@babel/runtime/helpers/esm/decorate";
 let _ = t => t,
-  _t;
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5;
 /**
  * @license
  *
@@ -11,18 +15,16 @@ let _ = t => t,
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property, customElement, query } from 'lit/decorators.js';
 import CaretLeft16 from "../../icons/caret--left/16";
 import CaretRight16 from "../../icons/caret--right/16";
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
-import { forEach } from '../../globals/internal/collection-helpers';
 import styles from "././pagination.css.js";
-
+import { PAGINATION_SIZE } from './defs';
 /**
  * Pagination UI.
  *
@@ -31,49 +33,58 @@ import styles from "././pagination.css.js";
  * @fires cds-pages-select-changed - The custom event fired after the current page is changed from `<cds-pages-select>`.
  * @fires cds-page-sizes-select-changed
  *   The custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
- */ /**
-     * Pagination UI.
-     *
-     * @element cds-pagination
-     * @slot page-sizes-select - Where to put in the `<page-sizes-select>`.
-     * @fires cds-pages-select-changed - The custom event fired after the current page is changed from `<cds-pages-select>`.
-     * @fires cds-page-sizes-select-changed
-     *   The custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
-     */
-let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (_initialize, _FocusMixin) {
-  class BXPagination extends _FocusMixin {
+ */
+let CDSPagination = _decorate([customElement(`${prefix}-pagination`)], function (_initialize, _FocusMixin) {
+  class CDSPagination extends _FocusMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXPagination,
+    F: CDSPagination,
     d: [{
+      kind: "field",
+      decorators: [query(`${prefix}-select`)],
+      key: "_pageSizeSelect",
+      value: void 0
+    }, {
       kind: "method",
-      key: "_renderStatusText",
-      value:
+      key: "_handleSlotChange",
+      value: function _handleSlotChange({
+        target
+      }) {
+        const content = target.assignedNodes().filter(node => node.nodeType !== Node.TEXT_NODE || node.textContent.trim());
+        content.forEach(item => {
+          this._pageSizeSelect.appendChild(item);
+        });
+      }
+
       /**
        * @returns Page status text.
        */
-      function _renderStatusText() {
+    }, {
+      kind: "method",
+      key: "_renderStatusText",
+      value: function _renderStatusText() {
         const {
-          atLastPage,
           start,
           pageSize,
-          total,
+          totalItems,
+          pagesUnknown,
           formatStatusWithDeterminateTotal,
           formatStatusWithIndeterminateTotal
         } = this;
         // * Regular: `1-10 of 100 items`
         // * Indeterminate total: `Item 1-10` (`Item 11-` at the last page)
-        const end = atLastPage ? undefined : Math.min(start + pageSize, total == null ? Infinity : total);
-        const format = total == null ? formatStatusWithIndeterminateTotal : formatStatusWithDeterminateTotal;
+        const end = Math.min(start + pageSize, totalItems == null ? Infinity : totalItems);
+        const format = totalItems == null || pagesUnknown ? formatStatusWithIndeterminateTotal : formatStatusWithDeterminateTotal;
+
         // `start`/`end` properties starts with zero, whereas we want to show number starting with 1
         return format({
           start: start + 1,
           end,
-          count: total
+          count: totalItems
         });
       }
 
@@ -91,7 +102,8 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
           bubbles: true,
           composed: true,
           detail: {
-            start
+            page: this.page,
+            pageSize: this.pageSize
           }
         }));
       }
@@ -107,6 +119,7 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
           start: oldStart,
           pageSize
         } = this;
+        this.page--;
         const newStart = Math.max(oldStart - pageSize, 0);
         if (newStart !== oldStart) {
           this._handleUserInitiatedChangeStart(newStart);
@@ -123,46 +136,75 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
         const {
           start: oldStart,
           pageSize,
-          total
+          totalItems
         } = this;
+        this.page++;
         const newStart = oldStart + pageSize;
-        if (newStart < (total == null ? Infinity : total)) {
+        if (newStart < (totalItems == null ? Infinity : totalItems)) {
           this._handleUserInitiatedChangeStart(newStart);
         }
       }
 
       /**
-       * Handles user-initiated change in current page.
+       * Handles user-initiated change in number of rows per page.
        *
        * @param event The event.
        */
+    }, {
+      kind: "method",
+      decorators: [HostListener('eventChangeSelect')],
+      key: "_handleChangeSelector",
+      value: function _handleChangeSelector(event) {
+        const {
+          value
+        } = event.detail;
+        const {
+          totalItems,
+          pageSize
+        } = this;
+        if (event.composedPath()[0] === this._pageSizeSelect) {
+          this.pageSize = parseInt(value);
+          this.totalPages = Math.ceil(totalItems / pageSize);
+          this.page = 1;
+          this.start = 0;
+        } else {
+          this.page = value;
+          this._handleUserInitiatedChangeStart((value - 1) * pageSize);
+        }
+      }
+
+      /**
+       * The assistive text for the button to go to previous page.
+       */
     }, {
       kind: "field",
-      decorators: [HostListener('eventChangePage')],
-      key: "_handleChangePage",
+      decorators: [property({
+        attribute: 'backward-text'
+      })],
+      key: "backwardText",
       value() {
-        return ({
-          detail
-        }) => {
-          const {
-            value
-          } = detail;
-          const {
-            pageSize
-          } = this;
-          this._handleUserInitiatedChangeStart(value * pageSize);
-        };
+        return 'Previous page';
       }
     }, {
       kind: "field",
-      decorators: [HostListener('eventChangePageSize')],
-      key: "_handleChangePageSize",
+      decorators: [property({
+        type: Number,
+        reflect: true
+      })],
+      key: "page",
+      value() {
+        return 1;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "formatLabelText",
       value() {
         return ({
-          detail
-        }) => {
-          this.pageSize = detail.value;
-        };
+          count
+        }) => `Page number, of ${count} page${count <= 1 ? '' : 's'}`;
       }
     }, {
       kind: "field",
@@ -186,17 +228,38 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
       value() {
         return ({
           start,
-          end
-        }) => end == null ? `Item ${start}–` : `Item ${start}–${end}`;
+          end,
+          count
+        }) => end == null ? `Item ${start}–` : `${start}–${end} item${count <= 1 ? '' : 's'}`;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "formatSupplementalText",
+      value() {
+        return ({
+          count
+        }) => this.pagesUnknown || !this.totalItems ? `page` : `of ${count} page${count <= 1 ? '' : 's'}`;
       }
     }, {
       kind: "field",
       decorators: [property({
         type: Boolean,
-        attribute: 'at-last-page'
+        attribute: 'is-last-page'
       })],
-      key: "atLastPage",
+      key: "isLastPage",
       value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'items-per-page-text'
+      })],
+      key: "itemsPerPageText",
+      value() {
+        return 'Items per page:';
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -210,22 +273,38 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'next-button-text'
+        attribute: 'forward-text'
       })],
-      key: "nextButtonText",
+      key: "forwardText",
       value() {
         return 'Next page';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'page-input-disabled'
+      })],
+      key: "pageInputDisabled",
+      value: void 0
     }, {
       kind: "field",
       decorators: [property({
         type: Number,
-        attribute: 'page-size'
+        attribute: 'page-size',
+        reflect: true
       })],
       key: "pageSize",
       value() {
         return 10;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'page-size-input-disabled'
+      })],
+      key: "pageSizeInputDisabled",
+      value: void 0
     }, {
       kind: "field",
       decorators: [property({
@@ -236,11 +315,22 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'prev-button-text'
+        type: Boolean,
+        reflect: true,
+        attribute: 'pages-unknown'
       })],
-      key: "prevButtonText",
+      key: "pagesUnknown",
       value() {
-        return 'Previous page';
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true
+      })],
+      key: "size",
+      value() {
+        return PAGINATION_SIZE.MEDIUM;
       }
     }, {
       kind: "field",
@@ -254,18 +344,30 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
     }, {
       kind: "field",
       decorators: [property({
-        type: Number
+        type: Number,
+        attribute: 'total-items'
       })],
-      key: "total",
+      key: "totalItems",
       value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number
+      })],
+      key: "totalPages",
+      value() {
+        return 1;
+      }
     }, {
       kind: "method",
       key: "updated",
       value:
       /**
-       * Handles user-initiated change in number of rows per page.
-       *
-       * @param event The event.
+       * The current page
+       */
+      /**
+       * The formatter for the assistive text for screen readers to announce.
+       * Should be changed upon the locale the UI is rendered with.
        */
       /**
        * The formatter, used with determinate the total pages. Should be changed upon the locale the UI is rendered with.
@@ -273,23 +375,38 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
       /**
        * The formatter, used with indeterminate the total pages. Should be changed upon the locale the UI is rendered with.
        */
+      /**
+       * The formatter for the text next to the select box. Should be changed upon the locale the UI is rendered with.
+       */
       /**
        * `true` to explicitly state that user is at the last page.
        */
+      /**
+       * The translatable text indicating the number of items per page.
+       */
       /**
        * `true` if the pagination UI should be disabled.
        */
       /**
        * The assistive text for the button to go to next page.
        */
+      /**
+       * true if the select box to change the page should be disabled.
+       */
       /**
        * Number of items per page.
        */
+      /**
+       * true if the select box to change the items per page should be disabled.
+       */
       /**
        * The label text for the UI to select page size.
        */
       /**
-       * The assistive text for the button to go to previous page.
+       * true if the total number of items is unknown.
+       */
+      /**
+       * Specify the size of the Pagination.
        */
       /**
        * The row number where current page start with, index that starts with zero.
@@ -297,34 +414,28 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
       /**
        * The number of total items.
        */
+      /**
+       * The number of total pages.
+       */
       function updated(changedProperties) {
         const {
-          pageSize
+          page,
+          pageSize,
+          totalItems
         } = this;
         const {
           selectorPageSizesSelect,
           selectorPagesSelect
         } = this.constructor;
         if (changedProperties.has('pageSize')) {
-          forEach(this.querySelectorAll(selectorPageSizesSelect), elem => {
-            elem.value = pageSize;
-          });
+          this.shadowRoot.querySelector(selectorPageSizesSelect).value = pageSize;
         }
         if (changedProperties.has('pageSize') || changedProperties.has('start')) {
-          const {
-            start
-          } = this;
-          forEach(this.querySelectorAll(selectorPagesSelect), elem => {
-            elem.value = Math.floor(start / pageSize);
-          });
+          this.totalPages = Math.ceil(totalItems / pageSize);
+          this.shadowRoot.querySelector(selectorPagesSelect).value = this.page.toString();
         }
-        if (changedProperties.has('pageSize') || changedProperties.has('total')) {
-          const {
-            total
-          } = this;
-          forEach(this.querySelectorAll(selectorPagesSelect), elem => {
-            elem.total = Math.ceil(total / pageSize);
-          });
+        if (changedProperties.has('page')) {
+          this._handleUserInitiatedChangeStart((page - 1) * pageSize);
         }
       }
     }, {
@@ -332,60 +443,140 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
       key: "render",
       value: function render() {
         const {
+          page,
           disabled,
-          nextButtonText,
-          prevButtonText,
+          forwardText,
+          backwardText,
+          itemsPerPageText,
+          pageInputDisabled,
           pageSize,
+          pageSizeInputDisabled,
+          pagesUnknown,
+          size,
           start,
-          total,
+          totalItems,
+          totalPages,
           _handleClickPrevButton: handleClickPrevButton,
-          _handleClickNextButton: handleClickNextButton
+          _handleClickNextButton: handleClickNextButton,
+          _handleSlotChange: handleSlotChange,
+          formatLabelText,
+          formatSupplementalText
         } = this;
         const {
-          atLastPage = start + pageSize >= total
+          isLastPage = start + pageSize >= totalItems
         } = this;
         const prevButtonDisabled = disabled || start === 0;
-        const nextButtonDisabled = disabled || atLastPage;
-        const prevButtonClasses = classMap({
+        const nextButtonDisabled = disabled || isLastPage;
+        const prevButtonClassMap = {
+          [`${prefix}--btn`]: true,
+          [`${prefix}--btn--icon-only`]: true,
           [`${prefix}--pagination__button`]: true,
           [`${prefix}--pagination__button--backward`]: true,
-          [`${prefix}--pagination__button--no-index`]: prevButtonDisabled
-        });
-        const nextButtonClasses = classMap({
+          [`${prefix}--pagination__button--no-index`]: prevButtonDisabled,
+          [`${prefix}--btn--${size}`]: true,
+          [`${prefix}--btn--ghost`]: true
+        };
+        const nextButtonClassMap = {
+          [`${prefix}--btn`]: true,
+          [`${prefix}--btn--icon-only`]: true,
           [`${prefix}--pagination__button`]: true,
           [`${prefix}--pagination__button--forward`]: true,
-          [`${prefix}--pagination__button--no-index`]: nextButtonDisabled
-        });
+          [`${prefix}--pagination__button--no-index`]: nextButtonDisabled,
+          [`${prefix}--btn--${size}`]: true,
+          [`${prefix}--btn--ghost`]: true
+        };
+        const prevButtonClasses = Object.entries(prevButtonClassMap).filter(([, value]) => value === true).map(([key]) => key).join(' ');
+        const nextButtonClasses = Object.entries(nextButtonClassMap).filter(([, value]) => value === true).map(([key]) => key).join(' ');
         return html(_t || (_t = _`
       <div class="${0}--pagination__left">
-        <slot name="page-sizes-select"></slot>
-        <div class="${0}-ce--pagination__divider"></div>
+        <label for="select" class="${0}--pagination__text"
+          ><slot name="label-text">${0}</slot></label
+        >
+        <cds-select
+          ?disabled=${0}
+          id="page-size-select"
+          left-select
+          pagination
+          inline
+          value="${0}">
+          <slot @slotchange=${0}></slot>
+        </cds-select>
         <span
           class="${0}--pagination__text ${0}--pagination__items-count"
           >${0}</span
         >
       </div>
-      <div class="${0}-ce--pagination__divider"></div>
       <div class="${0}--pagination__right">
-        <slot></slot>
+        <label for="select" class="${0}--label ${0}--visually-hidden">
+          ${0}
+        </label>
+        ${0}
+
         <div class="${0}--pagination__control-buttons">
-          <button
+          <cds-button
+            pagination
             ?disabled="${0}"
-            class="${0}"
-            title="${0}"
+            class-name="${0}"
+            tooltip-text="${0}"
             @click="${0}">
             ${0}
-          </button>
-          <button
+          </cds-button>
+          <cds-button
+            tooltip-position="top-right"
+            pagination
             ?disabled="${0}"
-            class="${0}"
-            title="${0}"
+            class-name="${0}"
+            tooltip-text="${0}"
             @click="${0}">
             ${0}
-          </button>
+          </cds-button>
         </div>
       </div>
-    `), prefix, prefix, prefix, prefix, this._renderStatusText(), prefix, prefix, prefix, prevButtonDisabled, prevButtonClasses, prevButtonText, handleClickPrevButton, CaretLeft16(), nextButtonDisabled, nextButtonClasses, nextButtonText, handleClickNextButton, CaretRight16());
+    `), prefix, prefix, itemsPerPageText, disabled || pageSizeInputDisabled, pageSize, handleSlotChange, prefix, prefix, this._renderStatusText(), prefix, prefix, prefix, formatLabelText({
+          count: totalPages
+        }), pagesUnknown || !totalItems ? html(_t2 || (_t2 = _`
+              <span
+                class="${0}--pagination__text ${0}--pagination__page-text"
+                >${0}</span
+              >
+
+              <cds-select
+                ?disabled=${0}
+                id="pages-select"
+                pagination
+                inline
+                value="${0}">
+                ${0}
+              </cds-select>
+            `), prefix, prefix, formatSupplementalText({
+          count: totalPages
+        }), disabled || pageInputDisabled, page, Array.from(new Array(totalPages)).map((_item, index) => html(_t3 || (_t3 = _`
+                      <cds-select-item value="${0}">
+                        ${0}
+                      </cds-select-item>
+                    `), index + 1, index + 1))) : html(_t4 || (_t4 = _`
+              <cds-select
+                ?disabled=${0}
+                id="pages-select"
+                pagination
+                inline
+                value="${0}">
+                ${0}
+              </cds-select>
+              <span class="${0}--pagination__text"
+                >${0}</span
+              >
+            `), disabled || pageInputDisabled, page, Array.from(new Array(totalPages)).map((_item, index) => html(_t5 || (_t5 = _`
+                      <cds-select-item value="${0}">
+                        ${0}
+                      </cds-select-item>
+                    `), index + 1, index + 1)), prefix, formatSupplementalText({
+          count: totalPages
+        })), prefix, prevButtonDisabled, prevButtonClasses, backwardText, handleClickPrevButton, CaretLeft16({
+          slot: 'icon'
+        }), nextButtonDisabled, nextButtonClasses, forwardText, handleClickNextButton, CaretRight16({
+          slot: 'icon'
+        }));
       }
 
       /**
@@ -396,7 +587,7 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
       static: true,
       key: "selectorPagesSelect",
       value: function selectorPagesSelect() {
-        return `${prefix}-pages-select`;
+        return `${prefix}-select#pages-select`;
       }
 
       /**
@@ -407,7 +598,7 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
       static: true,
       key: "selectorPageSizesSelect",
       value: function selectorPageSizesSelect() {
-        return `${prefix}-page-sizes-select`;
+        return `${prefix}-select`;
       }
 
       /**
@@ -421,26 +612,15 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
         return `${prefix}-pagination-changed-current`;
       }
 
-      /**
-       * The name of the custom event fired after the current page is changed from `<cds-pages-select>`.
-       */
-    }, {
-      kind: "get",
-      static: true,
-      key: "eventChangePage",
-      value: function eventChangePage() {
-        return `${prefix}-pages-select-changed`;
-      }
-
       /**
        * The name of the custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
        */
     }, {
       kind: "get",
       static: true,
-      key: "eventChangePageSize",
-      value: function eventChangePageSize() {
-        return `${prefix}-page-sizes-select-changed`;
+      key: "eventChangeSelect",
+      value: function eventChangeSelect() {
+        return `${prefix}-select-selected`;
       }
     }, {
       kind: "field",
@@ -461,5 +641,5 @@ let BXPagination = _decorate([customElement(`${prefix}-pagination`)], function (
     }]
   };
 }, FocusMixin(HostListenerMixin(LitElement)));
-export default BXPagination;
+export default CDSPagination;
 //# sourceMappingURL=pagination.js.map