@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

package/esm/paginator/paginator-foundation.js

@@ -5,206 +5,40 @@
  */
 import { coerceNumber, isArray, isDefined } from '@tylertech/forge-core';
 import { PAGINATOR_CONSTANTS } from './paginator-constants';
-/**
- * The foundation class behind the `<forge-paginator>` component.
- */
 export class PaginatorFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        // Backing models
         this._pageIndex = PAGINATOR_CONSTANTS.numbers.DEFAULT_PAGE_INDEX;
         this._pageSize = PAGINATOR_CONSTANTS.numbers.DEFAULT_PAGE_SIZE;
+        this._offset = 0;
         this._total = PAGINATOR_CONSTANTS.numbers.DEFAULT_TOTAL;
-        this._pageSizeOptions = [];
+        this._pageSizeOptions = PAGINATOR_CONSTANTS.numbers.DEFAULT_PAGE_SIZE_OPTIONS.map(o => ({ label: `${o}`, value: `${o}` }));
         this._label = PAGINATOR_CONSTANTS.strings.DEFAULT_LABEL;
         this._firstLast = false;
         this._first = false;
         this._disabled = false;
         this._alignment = 'space-between';
-        // Create listeners
         this._pageSizeListener = (evt) => this._onPageSizeChanged(evt);
         this._firstPageListener = (evt) => this._onFirstPage(evt);
         this._previousPageListener = (evt) => this._onPreviousPage(evt);
         this._nextPageListener = (evt) => this._onNextPage(evt);
         this._lastPageListener = (evt) => this._onLastPage(evt);
-        this._pageSizeOptions = PAGINATOR_CONSTANTS.numbers.DEFAULT_PAGE_SIZE_OPTIONS.map(o => ({ label: o.toString(), value: o.toString() }));
-    }
-    /** The zero-based page index. Default is 0. */
-    set pageIndex(value) {
-        if (this._pageIndex !== value) {
-            if (isDefined(value)) {
-                this._pageIndex = value;
-                this._update();
-                this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX, this._pageIndex.toString());
-            }
-            else {
-                this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX);
-            }
-        }
-    }
-    get pageIndex() {
-        return this._pageIndex;
-    }
-    /** Number of items to display on a page. By default set to 25. */
-    set pageSize(value) {
-        if (this._pageSize !== value) {
-            this._pageSize = value;
-            this._adapter.setPageSize(this._pageSize);
-            this._update();
-            this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_SIZE, this._pageSize.toString());
-        }
-    }
-    get pageSize() {
-        return this._pageSize;
-    }
-    /** Sets page index by providing the number of items to skip. */
-    set offset(value) {
-        if (value >= this._total) {
-            if (this._total >= this._pageSize) {
-                value = this._total - this._pageSize;
-            }
-            else {
-                value = 0;
-            }
-        }
-        const clampedValue = Math.min(Math.max(value, 0), this._total);
-        this.pageIndex = Math.floor(clampedValue / this._pageSize);
-    }
-    get offset() {
-        return this._pageIndex * this._pageSize;
-    }
-    /** The total number of items to be paginated. Default is 0. */
-    set total(value) {
-        if (this._total !== value) {
-            this._total = value;
-            this._update();
-            this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.TOTAL, this._total.toString());
-        }
-    }
-    get total() {
-        return this._total;
-    }
-    /** The set of provided page size options to display to the user. */
-    set pageSizeOptions(options) {
-        if (isArray(options)) {
-            this._pageSizeOptions = options
-                .map(o => ({ label: o.toString(), value: o.toString() }))
-                .sort((a, b) => coerceNumber(a.value) - coerceNumber(b.value));
-            this._adapter.setPageSizeOptions(this._pageSizeOptions);
-            this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
-            this._adapter.setPageSizeVisibility(true);
-            if (isDefined(this._pageSize) && this._pageSizeOptions.length && !this._pageSizeOptions.find(o => coerceNumber(o.value) === this._pageSize)) {
-                this.pageSize = coerceNumber(this._pageSizeOptions[0].value);
-            }
-        }
-        else if (options.toString().toLowerCase() === 'false') {
-            this._adapter.detachPageSizeChangeListener(this._pageSizeListener);
-            this._adapter.setPageSizeVisibility(false);
-        }
-    }
-    get pageSizeOptions() {
-        return this._pageSizeOptions.map(o => Number(o.value));
-    }
-    /** A label for the paginator. Default is "Rows per page:". */
-    set label(value) {
-        if (this._label !== value) {
-            this._label = value;
-            this._adapter.setLabel(this._label);
-            this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.LABEL, isDefined(this._label) ? this._label.toString() : '');
-        }
     }
-    get label() {
-        return this._label;
-    }
-    /** Whether to show the first page and last page buttons. Default is false. */
-    set firstLast(value) {
-        if (this._firstLast !== value) {
-            this._firstLast = value;
-            this._toggleFirstLastButtons();
-            if (this._firstLast) {
-                this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST_LAST);
-            }
-            else {
-                this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST_LAST);
-            }
-        }
-    }
-    get firstLast() {
-        return this._firstLast;
-    }
-    /** Whether to show the first page button. Default is false. */
-    set first(value) {
-        if (this._first !== value) {
-            this._first = value;
-            this._toggleFirstButton();
-            if (this._first) {
-                this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST);
-            }
-            else {
-                this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST);
-            }
-        }
-    }
-    get first() {
-        return this._first;
-    }
-    /** Whether the paginator is disabled. Default is false. */
-    set disabled(value) {
-        if (this._disabled !== value) {
-            this._disabled = value;
-            this._update();
-            if (this._disabled) {
-                this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.DISABLED);
-            }
-            else {
-                this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.DISABLED);
-            }
-        }
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    get alternative() {
-        return this._alternative;
-    }
-    set alternative(value) {
-        if (value !== this._alternative) {
-            this._alternative = value;
-            this._applyAlternative();
-        }
-    }
-    get alignment() {
-        return this._alignment;
-    }
-    set alignment(value) {
-        if (value !== this._alignment) {
-            this._alignment = value;
-            this._applyAlternativeAlignment();
-        }
-    }
-    _applyAlternativeAlignment() {
-        this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.ALIGNMENT, this._alignment);
-        this._adapter.setAlignment(this._alignment);
-    }
-    _applyAlternative() {
-        this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.ALTERNATIVE, this._alternative);
-        this._adapter.setAlternative(this._alternative);
-        this._applyAlternativeAlignment();
-    }
-    /**
-     * Intializes the internal state when the component loads.
-     */
     initialize() {
-        this._update();
+        this._updateRangeLabel();
         this._adapter.setLabel(this._label);
         this._adapter.setPageSizeOptions(this._pageSizeOptions);
         this._adapter.setPageSize(this._pageSize);
         this._attachListeners();
         this._toggleFirstLastButtons();
+        this._syncInteractionState();
     }
     disconnect() {
         this._detachListeners();
     }
+    focus(options) {
+        this._adapter.handleFocusMove(null, options);
+    }
     _attachListeners() {
         this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
         this._adapter.attachFirstPageListener(this._firstPageListener);
@@ -219,10 +53,6 @@ export class PaginatorFoundation {
         this._adapter.detachNextPageListener(this._nextPageListener);
         this._adapter.detachLastPageListener(this._lastPageListener);
     }
-    /**
-     * Handles clicking the first page button.
-     * @param evt The click event.
-     */
     _onFirstPage(evt) {
         evt.stopPropagation();
         if (!this._hasFirstPage()) {
@@ -231,13 +61,9 @@ export class PaginatorFoundation {
         const firstPage = 0;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.FIRST_PAGE, { pageIndex: firstPage });
         if (canPage) {
-            this.pageIndex = firstPage;
+            this._applyPageIndex(firstPage);
         }
     }
-    /**
-     * Handles clicking the previous page button.
-     * @param evt The click event.
-     */
     _onPreviousPage(evt) {
         evt.stopPropagation();
         if (!this._hasPreviousPage()) {
@@ -246,13 +72,9 @@ export class PaginatorFoundation {
         const prevPage = this._pageIndex - 1;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PREVIOUS_PAGE, { pageIndex: prevPage });
         if (canPage) {
-            this.pageIndex = prevPage;
+            this._applyPageIndex(prevPage);
         }
     }
-    /**
-     * Handles clicking the next page button.
-     * @param evt The click event.
-     */
     _onNextPage(evt) {
         evt.stopPropagation();
         if (!this._hasNextPage()) {
@@ -261,13 +83,9 @@ export class PaginatorFoundation {
         const nextPage = this._pageIndex + 1;
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.NEXT_PAGE, { pageIndex: nextPage });
         if (canPage) {
-            this.pageIndex = nextPage;
+            this._applyPageIndex(nextPage);
         }
     }
-    /**
-     * Handles clicking the last page button.
-     * @param evt The click event.
-     */
     _onLastPage(evt) {
         evt.stopPropagation();
         if (!this._hasLastPage()) {
@@ -276,20 +94,16 @@ export class PaginatorFoundation {
         const lastPage = this._getMaxPages();
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.LAST_PAGE, { pageIndex: lastPage });
         if (canPage) {
-            this.pageIndex = lastPage;
+            this._applyPageIndex(lastPage);
         }
     }
-    /**
-     * Handles selecting a new item in the page size options.
-     * @param evt The select custom event.
-     */
     _onPageSizeChanged(evt) {
         evt.stopPropagation();
         const pageSize = Number(evt.detail);
         const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PAGE_SIZE, { pageIndex: 0, pageSize });
         if (canPage) {
-            this.pageIndex = 0;
-            this.pageSize = pageSize;
+            this._applyPageIndex(0);
+            this._applyPageSize(pageSize);
         }
         else {
             evt.preventDefault();
@@ -300,17 +114,10 @@ export class PaginatorFoundation {
         const detail = { type, pageSize, pageIndex, offset };
         return this._adapter.emitHostEvent(PAGINATOR_CONSTANTS.events.CHANGE, detail, true, true);
     }
-    /**
-     * Returns the max number of pages based on our current parameters.
-     */
     _getMaxPages() {
         return Math.ceil(this._total / this._pageSize) - 1;
     }
-    /**
-     * Updates our internal state as well as updating the UI.
-     */
-    _update() {
-        // Create and update the range label
+    _updateRangeLabel() {
         if (this.pageSize > 1) {
             const startIndex = this._pageIndex * this._pageSize;
             const indexStart = Math.floor(startIndex / this._pageSize) || 0;
@@ -322,48 +129,37 @@ export class PaginatorFoundation {
             this._rangeLabel = `${this._pageIndex + 1} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
         }
         this._adapter.setRangeLabel(this._rangeLabel);
-        if (this.disabled) {
-            this._adapter.disablePageSizeSelect();
+    }
+    _syncInteractionState() {
+        this._adapter.enableFirstPageButton();
+        this._adapter.enablePreviousPageButton();
+        this._adapter.enableNextPageButton();
+        this._adapter.enableLastPageButton();
+        if (!this._hasFirstPage()) {
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('first');
+            }
             this._adapter.disableFirstPageButton();
-            this._adapter.disablePreviousPageButton();
-            this._adapter.disableNextPageButton();
-            this._adapter.disableLastPageButton();
         }
-        else {
-            this._adapter.enablePageSizeSelect();
-            // Check if first page button needs to be enabled/disabled
-            if (this._hasFirstPage()) {
-                this._adapter.enableFirstPageButton();
-            }
-            else {
-                this._adapter.disableFirstPageButton();
-            }
-            // Check if previous page button needs to be enabled/disabled
-            if (this._hasPreviousPage()) {
-                this._adapter.enablePreviousPageButton();
-            }
-            else {
-                this._adapter.disablePreviousPageButton();
-            }
-            // Check if next page button needs to be enabled/disabled
-            if (this._hasNextPage()) {
-                this._adapter.enableNextPageButton();
-            }
-            else {
-                this._adapter.disableNextPageButton();
+        if (!this._hasPreviousPage()) {
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('previous');
             }
-            // Check if last page button needs to be enabled/disabled
-            if (this._hasLastPage()) {
-                this._adapter.enableLastPageButton();
+            this._adapter.disablePreviousPageButton();
+        }
+        if (!this._hasNextPage()) {
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('next');
             }
-            else {
-                this._adapter.disableLastPageButton();
+            this._adapter.disableNextPageButton();
+        }
+        if (!this._hasLastPage()) {
+            if (this._adapter.hasFocus()) {
+                this._adapter.handleFocusMove('last');
             }
+            this._adapter.disableLastPageButton();
         }
     }
-    /**
-     * Toggle showing/hiding first and last buttons based on the show first/last buttons flag.
-     */
     _toggleFirstLastButtons() {
         this._toggleFirstButton();
         if (this._firstLast) {
@@ -377,9 +173,6 @@ export class PaginatorFoundation {
             }
         }
     }
-    /**
-     * Toggle showing/hiding first button based on the show first or first/last buttons flags.
-     */
     _toggleFirstButton() {
         if (this._first || this._firstLast) {
             if (!this._adapter.hasFirstPageButton()) {
@@ -392,25 +185,198 @@ export class PaginatorFoundation {
             }
         }
     }
-    /** Checks if a first page exists. */
     _hasFirstPage() {
-        // same as has previous page
         return this._hasPreviousPage();
     }
-    /**
-     * Checks if a previous page exists.
-     */
     _hasPreviousPage() {
-        return this._pageIndex >= 1 && this._pageSize !== 0;
+        return this._pageIndex > 0 && this._pageSize > 0;
     }
-    /** Checks if a next page exists */
     _hasNextPage() {
         const maxPages = this._getMaxPages();
-        return this._pageIndex < maxPages && this._pageSize !== 0;
+        return this._pageIndex < maxPages && this._pageSize > 0;
     }
-    /** Checks if a last page exists. */
     _hasLastPage() {
-        // same as has next page
         return this._hasNextPage();
     }
+    _computePageIndexFromOffset(value) {
+        if (value >= this._total) {
+            if (this._total >= this._pageSize) {
+                value = this._total - this._pageSize;
+            }
+            else {
+                value = 0;
+            }
+        }
+        const clampedValue = Math.min(Math.max(value, 0), this._total);
+        const pageIndex = Math.floor(clampedValue / this._pageSize);
+        this._applyPageIndex(pageIndex);
+    }
+    _computeOffset() {
+        if (this._total > 0) {
+            this._offset = this._pageIndex * this._pageSize;
+        }
+    }
+    _applyPageIndex(value) {
+        this._pageIndex = value;
+        this._computeOffset();
+        this._updateRangeLabel();
+        this._syncInteractionState();
+        this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX, this._pageIndex != null, this._pageIndex.toString());
+    }
+    _applyPageSize(value) {
+        this._pageSize = value;
+        this._adapter.setPageSize(this._pageSize);
+        this._computeOffset();
+        this._updateRangeLabel();
+        this._syncInteractionState();
+    }
+    _applyTotal(value) {
+        this._total = value;
+        this._updateRangeLabel();
+        if (this._offset > 0 && this._total > 0) {
+            this._computePageIndexFromOffset(this._offset);
+        }
+        this._syncInteractionState();
+    }
+    _applyAlternativeAlignment() {
+        this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.ALIGNMENT, this._alignment);
+        this._adapter.setAlignment(this._alignment);
+    }
+    _applyDisabled(disabled) {
+        this._disabled = disabled;
+        if (disabled) {
+            this._adapter.disablePageSizeSelect();
+            this._adapter.disableFirstPageButton();
+            this._adapter.disablePreviousPageButton();
+            this._adapter.disableNextPageButton();
+            this._adapter.disableLastPageButton();
+        }
+        else {
+            this._adapter.enablePageSizeSelect();
+            this._syncInteractionState();
+        }
+    }
+    get pageIndex() {
+        return this._pageIndex;
+    }
+    set pageIndex(value) {
+        if (this._pageIndex !== value) {
+            if (isDefined(value)) {
+                this._applyPageIndex(value);
+            }
+            else {
+                this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX);
+            }
+        }
+    }
+    get pageSize() {
+        return this._pageSize;
+    }
+    set pageSize(value) {
+        if (this._pageSize !== value) {
+            this._applyPageSize(value);
+            this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_SIZE, `${this._pageSize}`);
+        }
+    }
+    get offset() {
+        return this._offset;
+    }
+    set offset(value) {
+        if (this._offset !== value) {
+            this._offset = value;
+            this._computePageIndexFromOffset(value);
+        }
+    }
+    get total() {
+        return this._total;
+    }
+    set total(value) {
+        if (this._total !== value) {
+            this._applyTotal(value);
+            this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.TOTAL, `${this._total}`);
+        }
+    }
+    get pageSizeOptions() {
+        return this._pageSizeOptions.map(o => Number(o.value));
+    }
+    set pageSizeOptions(options) {
+        if (isArray(options)) {
+            this._pageSizeOptions = options
+                .map(o => ({ label: o.toString(), value: o.toString() }))
+                .sort((a, b) => coerceNumber(a.value) - coerceNumber(b.value));
+            this._adapter.setPageSizeOptions(this._pageSizeOptions);
+            this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
+            this._adapter.setPageSizeVisibility(true);
+            if (isDefined(this._pageSize) && this._pageSizeOptions.length && !this._pageSizeOptions.find(o => coerceNumber(o.value) === this._pageSize)) {
+                const pageSize = coerceNumber(this._pageSizeOptions[0].value);
+                this._applyPageSize(pageSize);
+            }
+        }
+        else if (options.toString().toLowerCase() === 'false') {
+            this._adapter.detachPageSizeChangeListener(this._pageSizeListener);
+            this._adapter.setPageSizeVisibility(false);
+        }
+    }
+    get label() {
+        return this._label;
+    }
+    set label(value) {
+        if (this._label !== value) {
+            this._label = value;
+            this._adapter.setLabel(this._label);
+            this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.LABEL, isDefined(this._label) ? this._label.toString() : '');
+        }
+    }
+    get firstLast() {
+        return this._firstLast;
+    }
+    set firstLast(value) {
+        value = Boolean(value);
+        if (this._firstLast !== value) {
+            this._firstLast = value;
+            this._toggleFirstLastButtons();
+            this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST_LAST, this._firstLast);
+        }
+    }
+    get first() {
+        return this._first;
+    }
+    set first(value) {
+        value = Boolean(value);
+        if (this._first !== value) {
+            this._first = value;
+            this._toggleFirstButton();
+            this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST, this._first);
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        value = Boolean(value);
+        if (this._disabled !== value) {
+            this._applyDisabled(value);
+            this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.DISABLED, this._disabled);
+        }
+    }
+    get alternative() {
+        return this._alternative;
+    }
+    set alternative(value) {
+        if (value !== this._alternative) {
+            this._alternative = value;
+            this._adapter.setAlternative(this._alternative);
+            this._applyAlternativeAlignment();
+            this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.ALTERNATIVE, this._alternative);
+        }
+    }
+    get alignment() {
+        return this._alignment;
+    }
+    set alignment(value) {
+        if (value !== this._alignment) {
+            this._alignment = value;
+            this._applyAlternativeAlignment();
+        }
+    }
 }

package/esm/paginator/paginator.d.ts

@@ -27,8 +27,6 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-paginator>` component.
- *
  * @tag forge-paginator
  */
 export declare class PaginatorComponent extends BaseComponent implements IPaginatorComponent {
@@ -58,4 +56,5 @@ export declare class PaginatorComponent extends BaseComponent implements IPagina
     disabled: boolean;
     alternative: boolean;
     alignment: PaginatorAlternativeAlignment;
+    focus(options?: FocusOptions): void;
 }

package/esm/paginator/paginator.js

@@ -14,11 +14,9 @@ import { SelectComponent } from '../select';
 import { IconComponent, IconRegistry } from '../icon';
 import { BaseComponent } from '../core/base/base-component';
 import { TooltipComponent } from '../tooltip';
-const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\"><button aria-label=\"First Page\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the first page</forge-tooltip></forge-icon-button><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\"><button aria-label=\"Previous Page\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the previous page</forge-tooltip></forge-icon-button><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\"><button aria-label=\"Next Page\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the next page</forge-tooltip></forge-icon-button><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\"><button aria-label=\"Last Page\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></button><forge-tooltip position=\"top\">Go to the last page</forge-tooltip></forge-icon-button></div></div></template>';
-const styles = '.forge-icon-button{display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.forge-icon-button forge-icon,.forge-icon-button img,.forge-icon-button svg{width:24px;height:24px}.forge-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))}.forge-icon-button:disabled{cursor:default;pointer-events:none}.forge-icon-button__icon{display:inline-block}.forge-icon-button__icon.forge-icon-button__icon--on{display:none}.forge-icon-button--on .forge-icon-button__icon{display:none}.forge-icon-button--on .forge-icon-button__icon.forge-icon-button__icon--on{display:inline-block}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity}.forge-icon-button::after,.forge-icon-button::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-icon-button::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-icon-button::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-icon-button.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-icon-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-icon-button.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-icon-button.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-icon-button::after,.forge-icon-button::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.forge-icon-button.mdc-ripple-upgraded::after,.forge-icon-button.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-icon-button::after,.forge-icon-button::before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.forge-icon-button.mdc-ripple-surface--hover::before,.forge-icon-button:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button.mdc-ripple-upgraded--background-focused::before,.forge-icon-button:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}forge-icon-button{position:relative;display:inline-block;overflow:visible}.forge-icon-button--on{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.forge-icon-button--on::after,.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-icon-button--on.mdc-ripple-surface--hover::before,.forge-icon-button--on:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-icon-button--on.mdc-ripple-upgraded--background-focused::before,.forge-icon-button--on:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-icon-button--on:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-icon-button--on:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-icon-button--on.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-icon-button--on::before{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.08}.forge-icon-button--dense{width:28px;height:28px;padding:2px;padding:0}.forge-icon-button--dense-1{width:44px;height:44px;padding:10px}.forge-icon-button--dense-2{width:40px;height:40px;padding:8px}.forge-icon-button--dense-3{width:36px;height:36px;padding:6px}.forge-icon-button--dense-4{width:32px;height:32px;padding:4px}.forge-icon-button--dense-5{width:28px;height:28px;padding:2px}.forge-icon-button--dense-6{width:24px;height:24px;padding:0}.forge-icon-button--with-badge forge-badge{z-index:1;z-index:var(--forge-z-index-surface,1);pointer-events:none;--forge-badge-max-width:32px;--forge-badge-border:1px solid transparent}.forge-icon-button--with-badge forge-badge[app-bar-context]{--forge-badge-border:2px solid var(--forge-app-bar-theme-background)}.forge-paginator{display:inline-block}.forge-paginator--alternative{display:-webkit-box;display:flex}.forge-paginator--alternative .forge-paginator__label,.forge-paginator--alternative .forge-paginator__page-size-options,.forge-paginator--alternative .forge-paginator__range-label{display:none}.forge-paginator--alternative .forge-paginator__range-label--alternative{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);margin:0 12px}.forge-paginator__range-label--alternative{display:none}.forge-paginator__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-paginator__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:16px}.forge-paginator__page-size-options{margin-right:16px}.forge-paginator__range-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:8px}.forge-paginator__first-page,.forge-paginator__last-page,.forge-paginator__next-page,.forge-paginator__previous-page{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}:host{display:inline-block}:host([hidden]){display:none}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__container{-webkit-box-pack:center;justify-content:center}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__range-label--alternative{margin:0 auto}:host([alternative]) .forge-paginator--alignment-start .forge-paginator__container{-webkit-box-pack:start;justify-content:flex-start}:host([alternative]) .forge-paginator--alignment-end .forge-paginator__container{-webkit-box-pack:end;justify-content:flex-end}:host([alternative]) .forge-paginator .forge-paginator__container{-webkit-box-flex:1;flex:1}';
+const template = '<template><div class=\"forge-paginator\" part=\"root\"><div class=\"forge-paginator__container\" part=\"container\"><div class=\"forge-paginator__label\" part=\"label\"></div><forge-select class=\"forge-paginator__page-size-options\" aria-label=\"Choose page size\" density=\"dense\" part=\"page-size-options\"></forge-select><div class=\"forge-paginator__range-label\" part=\"range-label\"></div><forge-icon-button class=\"forge-paginator__first-page\" part=\"first-page-button\" aria-label=\"First Page\" part=\"first-page-button-element\"><forge-icon name=\"first_page\" part=\"first-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the first page</forge-tooltip><forge-icon-button class=\"forge-paginator__previous-page\" part=\"previous-page-button\" aria-label=\"Previous Page\" part=\"previous-page-button-element\"><forge-icon name=\"keyboard_arrow_left\" part=\"previous-page-button-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the previous page</forge-tooltip><div class=\"forge-paginator__range-label--alternative\" part=\"range-label-alternative\"></div><forge-icon-button class=\"forge-paginator__next-page\" part=\"next-page-button\" aria-label=\"Next Page\" part=\"next-page-button-element\"><forge-icon name=\"keyboard_arrow_right\" part=\"next-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the next page</forge-tooltip><forge-icon-button class=\"forge-paginator__last-page\" part=\"last-page-button\" aria-label=\"Last Page\" part=\"last-page-button-element\"><forge-icon name=\"last_page\" part=\"last-page-icon\"></forge-icon></forge-icon-button><forge-tooltip position=\"top\">Go to the last page</forge-tooltip></div></div></template>';
+const styles = '.forge-paginator{display:inline-block}.forge-paginator--alternative{display:-webkit-box;display:flex}.forge-paginator--alternative .forge-paginator__label,.forge-paginator--alternative .forge-paginator__page-size-options,.forge-paginator--alternative .forge-paginator__range-label{display:none}.forge-paginator--alternative .forge-paginator__range-label--alternative{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, .875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, .0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);margin:0 12px}.forge-paginator__range-label--alternative{display:none}.forge-paginator__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.forge-paginator__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:16px}.forge-paginator__page-size-options{margin-right:16px}.forge-paginator__range-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);margin-right:8px}.forge-paginator__first-page,.forge-paginator__last-page,.forge-paginator__next-page,.forge-paginator__previous-page{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}:host{display:inline-block}:host([hidden]){display:none}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__container{-webkit-box-pack:center;justify-content:center}:host([alternative]) .forge-paginator--alignment-center .forge-paginator__range-label--alternative{margin:0 auto}:host([alternative]) .forge-paginator--alignment-start .forge-paginator__container{-webkit-box-pack:start;justify-content:flex-start}:host([alternative]) .forge-paginator--alignment-end .forge-paginator__container{-webkit-box-pack:end;justify-content:flex-end}:host([alternative]) .forge-paginator .forge-paginator__container{-webkit-box-flex:1;flex:1}';
 /**
- * The custom element class behind the `<forge-paginator>` component.
- *
  * @tag forge-paginator
  */
 let PaginatorComponent = class PaginatorComponent extends BaseComponent {
@@ -91,6 +89,9 @@ let PaginatorComponent = class PaginatorComponent extends BaseComponent {
                 break;
         }
     }
+    focus(options) {
+        this._foundation.focus(options);
+    }
 };
 __decorate([
     FoundationProperty()