@tylertech/forge 3.0.0-next.23 → 3.0.0-next.24

package/esm/paginator/paginator-adapter.js

@@ -3,26 +3,20 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, getShadowElement, removeAllChildren, removeClass, toggleElementPlaceholder, toggleClass } from '@tylertech/forge-core';
+import { getShadowElement, removeAllChildren, toggleElementPlaceholder } from '@tylertech/forge-core';
 import { BaseAdapter } from '../core/base/base-adapter';
 import { PAGINATOR_CONSTANTS } from './paginator-constants';
-/**
- * Provides facilities for interacting with the internal DOM of `PaginatorComponent`.
- */
 export class PaginatorAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
         this._labelElement = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.LABEL);
-        this._root = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.ROOT);
         this._pageSizeSelect = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.PAGE_SIZE_SELECT);
         this._rangeLabel = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.RANGE_LABEL);
         this._rangeLabelAlternative = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.RANGE_LABEL_ALTERNATIVE);
         this._firstPageButton = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.FIRST_PAGE_BUTTON);
-        this._firstPageIconButton = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.FIRST_PAGE_ICON_BUTTON);
         this._previousPageButton = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.PREVIOUS_PAGE_BUTTON);
         this._nextPageButton = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.NEXT_PAGE_BUTTON);
         this._lastPageButton = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.LAST_PAGE_BUTTON);
-        this._lastPageIconButton = getShadowElement(component, PAGINATOR_CONSTANTS.selectors.LAST_PAGE_ICON_BUTTON);
     }
     setLabel(value) {
         this._labelElement.textContent = value;
@@ -39,26 +33,29 @@ export class PaginatorAdapter extends BaseAdapter {
         this._rangeLabelAlternative.innerText = value;
     }
     hasFirstPageButton() {
-        return !!getShadowElement(this._component, PAGINATOR_CONSTANTS.selectors.FIRST_PAGE_ICON_BUTTON);
+        return !!getShadowElement(this._component, PAGINATOR_CONSTANTS.selectors.FIRST_PAGE_BUTTON);
     }
     showFirstPageButton() {
-        this._firstPagePlaceholder = toggleElementPlaceholder(this._component, true, PAGINATOR_CONSTANTS.elementName, PAGINATOR_CONSTANTS.selectors.FIRST_PAGE_ICON_BUTTON, this._firstPageIconButton, this._firstPagePlaceholder);
+        this._firstPagePlaceholder = toggleElementPlaceholder(this._component, true, PAGINATOR_CONSTANTS.elementName, PAGINATOR_CONSTANTS.selectors.FIRST_PAGE_BUTTON, this._firstPageButton, this._firstPagePlaceholder);
     }
     hideFirstPageButton() {
-        this._firstPagePlaceholder = toggleElementPlaceholder(this._component, false, PAGINATOR_CONSTANTS.elementName, PAGINATOR_CONSTANTS.selectors.FIRST_PAGE_ICON_BUTTON, this._firstPageIconButton, this._firstPagePlaceholder);
+        this._firstPagePlaceholder = toggleElementPlaceholder(this._component, false, PAGINATOR_CONSTANTS.elementName, PAGINATOR_CONSTANTS.selectors.FIRST_PAGE_BUTTON, this._firstPageButton, this._firstPagePlaceholder);
     }
     hasLastPageButton() {
-        return !!getShadowElement(this._component, PAGINATOR_CONSTANTS.selectors.LAST_PAGE_ICON_BUTTON);
+        return !!getShadowElement(this._component, PAGINATOR_CONSTANTS.selectors.LAST_PAGE_BUTTON);
     }
     showLastPageButton() {
-        this._lastPagePlaceholder = toggleElementPlaceholder(this._component, true, PAGINATOR_CONSTANTS.elementName, PAGINATOR_CONSTANTS.selectors.LAST_PAGE_ICON_BUTTON, this._lastPageIconButton, this._lastPagePlaceholder);
+        this._lastPagePlaceholder = toggleElementPlaceholder(this._component, true, PAGINATOR_CONSTANTS.elementName, PAGINATOR_CONSTANTS.selectors.LAST_PAGE_BUTTON, this._lastPageButton, this._lastPagePlaceholder);
     }
     hideLastPageButton() {
-        this._lastPagePlaceholder = toggleElementPlaceholder(this._component, false, PAGINATOR_CONSTANTS.elementName, PAGINATOR_CONSTANTS.selectors.LAST_PAGE_ICON_BUTTON, this._lastPageIconButton, this._lastPagePlaceholder);
+        this._lastPagePlaceholder = toggleElementPlaceholder(this._component, false, PAGINATOR_CONSTANTS.elementName, PAGINATOR_CONSTANTS.selectors.LAST_PAGE_BUTTON, this._lastPageButton, this._lastPagePlaceholder);
     }
     attachPageSizeChangeListener(listener) {
         this._pageSizeSelect.addEventListener('change', listener);
     }
+    detachPageSizeChangeListener(listener) {
+        this._pageSizeSelect.removeEventListener('change', listener);
+    }
     attachFirstPageListener(listener) {
         this._firstPageButton.addEventListener('click', listener);
     }
@@ -71,83 +68,23 @@ export class PaginatorAdapter extends BaseAdapter {
     attachLastPageListener(listener) {
         this._lastPageButton.addEventListener('click', listener);
     }
-    detachPageSizeChangeListener(listener) {
-        this._pageSizeSelect.removeEventListener('change', listener);
-    }
-    detachFirstPageListener(listener) {
-        this._firstPageButton.removeEventListener('click', listener);
-    }
-    detachPreviousPageListener(listener) {
-        this._previousPageButton.removeEventListener('click', listener);
-    }
-    detachNextPageListener(listener) {
-        this._nextPageButton.removeEventListener('click', listener);
-    }
-    detachLastPageListener(listener) {
-        this._lastPageButton.removeEventListener('click', listener);
-    }
-    disableFirstPageButton() {
-        this._firstPageButton.setAttribute('disabled', 'disabled');
-    }
-    enableFirstPageButton() {
-        this._firstPageButton.removeAttribute('disabled');
+    setFirstPageButtonEnabled(enabled) {
+        this._firstPageButton.disabled = !enabled;
     }
-    disablePreviousPageButton() {
-        this._previousPageButton.setAttribute('disabled', 'disabled');
+    setPreviousPageButtonEnabled(enabled) {
+        this._previousPageButton.disabled = !enabled;
     }
-    enablePreviousPageButton() {
-        this._previousPageButton.removeAttribute('disabled');
+    setNextPageButtonEnabled(enabled) {
+        this._nextPageButton.disabled = !enabled;
     }
-    disableNextPageButton() {
-        this._nextPageButton.setAttribute('disabled', 'disabled');
+    setLastPageButtonEnabled(enabled) {
+        this._lastPageButton.disabled = !enabled;
     }
-    enableNextPageButton() {
-        this._nextPageButton.removeAttribute('disabled');
-    }
-    disablePageSizeSelect() {
-        this._pageSizeSelect.setAttribute('disabled', 'disabled');
-    }
-    enablePageSizeSelect() {
-        this._pageSizeSelect.removeAttribute('disabled');
+    setPageSizeSelectEnabled(enabled) {
+        this._pageSizeSelect.disabled = !enabled;
     }
     setPageSizeVisibility(visible) {
-        if (visible) {
-            this._pageSizeSelect.style.removeProperty('display');
-        }
-        else {
-            this._pageSizeSelect.style.display = 'none';
-        }
-    }
-    disableLastPageButton() {
-        this._lastPageButton.setAttribute('disabled', 'disabled');
-    }
-    enableLastPageButton() {
-        this._lastPageButton.removeAttribute('disabled');
-    }
-    setAlternative(alternative) {
-        toggleClass(this._root, alternative, PAGINATOR_CONSTANTS.classes.ALTERNATIVE);
-    }
-    setAlignment(alignment) {
-        removeClass([
-            PAGINATOR_CONSTANTS.classes.ALIGNMENT_SPACE_BETWEEN,
-            PAGINATOR_CONSTANTS.classes.ALIGNMENT_START,
-            PAGINATOR_CONSTANTS.classes.ALIGNMENT_END
-        ], this._root);
-        switch (alignment) {
-            case 'start':
-                addClass(PAGINATOR_CONSTANTS.classes.ALIGNMENT_START, this._root);
-                break;
-            case 'end':
-                addClass(PAGINATOR_CONSTANTS.classes.ALIGNMENT_END, this._root);
-                break;
-            case 'space-between':
-            default:
-                addClass(PAGINATOR_CONSTANTS.classes.ALIGNMENT_SPACE_BETWEEN, this._root);
-                break;
-        }
-    }
-    hasFocus() {
-        return this._component.matches(':focus');
+        this._pageSizeSelect.hidden = !visible;
     }
     setFocus(options) {
         this._tryFocus([
@@ -158,30 +95,12 @@ export class PaginatorAdapter extends BaseAdapter {
             this._lastPageButton
         ], options);
     }
-    getFocusedField() {
-        if (this._pageSizeSelect.matches(':focus-within')) {
-            return 'page-size';
-        }
-        else if (this._firstPageButton.matches(':focus-within')) {
-            return 'first';
-        }
-        else if (this._previousPageButton.matches(':focus-within')) {
-            return 'previous';
-        }
-        else if (this._nextPageButton.matches(':focus-within')) {
-            return 'next';
-        }
-        else if (this._lastPageButton.matches(':focus-within')) {
-            return 'last';
-        }
-        return null;
-    }
     tryDisableFields(fieldsToDisable) {
         const fieldDisablers = {
-            'first': () => this.disableFirstPageButton(),
-            'last': () => this.disableLastPageButton(),
-            'previous': () => this.disablePreviousPageButton(),
-            'next': () => this.disableNextPageButton()
+            'first': () => this.setFirstPageButtonEnabled(false),
+            'last': () => this.setLastPageButtonEnabled(false),
+            'previous': () => this.setPreviousPageButtonEnabled(false),
+            'next': () => this.setNextPageButtonEnabled(false)
         };
         fieldsToDisable.forEach(field => { var _a; return (_a = fieldDisablers[field]) === null || _a === void 0 ? void 0 : _a.call(fieldDisablers); });
     }

package/esm/paginator/paginator-constants.d.ts

@@ -5,46 +5,39 @@
  */
 export declare const PAGINATOR_CONSTANTS: {
     elementName: "forge-paginator";
-    classes: {
-        LABEL: string;
+    observedAttributes: {
+        PAGE_INDEX: string;
+        PAGE_SIZE: string;
+        OFFSET: string;
+        TOTAL: string;
         PAGE_SIZE_OPTIONS: string;
-        RANGE_LABEL: string;
-        RANGE_LABEL_ALTERNATIVE: string;
-        FIRST_PAGE_BUTTON: string;
-        PREVIOUS_PAGE_BUTTON: string;
-        NEXT_PAGE_BUTTON: string;
-        LAST_PAGE_BUTTON: string;
-        ROOT: string;
-        ALTERNATIVE: string;
-        ALIGNMENT_START: string;
-        ALIGNMENT_SPACE_BETWEEN: string;
-        ALIGNMENT_END: string;
-    };
-    selectors: {
         LABEL: string;
-        PAGE_SIZE_SELECT: string;
-        RANGE_LABEL: string;
-        FIRST_PAGE_BUTTON: string;
-        FIRST_PAGE_ICON_BUTTON: string;
-        PREVIOUS_PAGE_BUTTON: string;
-        NEXT_PAGE_BUTTON: string;
-        LAST_PAGE_BUTTON: string;
-        LAST_PAGE_ICON_BUTTON: string;
-        ROOT: string;
-        RANGE_LABEL_ALTERNATIVE: string;
+        FIRST_LAST: string;
+        FIRST: string;
+        DISABLED: string;
+        ALTERNATIVE: string;
     };
     attributes: {
         PAGE_INDEX: string;
         PAGE_SIZE: string;
         OFFSET: string;
-        PAGE_SIZE_OPTIONS: string;
         TOTAL: string;
+        PAGE_SIZE_OPTIONS: string;
         LABEL: string;
         FIRST_LAST: string;
         FIRST: string;
         DISABLED: string;
         ALTERNATIVE: string;
-        ALIGNMENT: string;
+    };
+    selectors: {
+        LABEL: string;
+        PAGE_SIZE_SELECT: string;
+        RANGE_LABEL: string;
+        FIRST_PAGE_BUTTON: string;
+        PREVIOUS_PAGE_BUTTON: string;
+        NEXT_PAGE_BUTTON: string;
+        LAST_PAGE_BUTTON: string;
+        RANGE_LABEL_ALTERNATIVE: string;
     };
     events: {
         readonly CHANGE: "forge-paginator-change";
@@ -58,16 +51,10 @@ export declare const PAGINATOR_CONSTANTS: {
     strings: {
         DEFAULT_LABEL: string;
         RANGE_SEPARATOR_LABEL: string;
-        FIRST_PAGE: string;
-        PREVIOUS_PAGE: string;
-        NEXT_PAGE: string;
-        LAST_PAGE: string;
-        PAGE_SIZE: string;
     };
 };
-export type PaginatorAlternativeAlignment = 'start' | 'space-between' | 'end';
-export interface IPaginatorChangeEvent {
-    type: string;
+export interface IPaginatorChangeEventData {
+    type: 'previous-page' | 'next-page' | 'first-page' | 'last-page' | 'page-size';
     pageSize: number;
     pageIndex: number;
     offset: number;

package/esm/paginator/paginator-constants.js

@@ -5,46 +5,28 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}paginator`;
-const classes = {
-    LABEL: 'forge-paginator__label',
-    PAGE_SIZE_OPTIONS: 'forge-paginator__page-size-options',
-    RANGE_LABEL: 'forge-paginator__range-label',
-    RANGE_LABEL_ALTERNATIVE: 'forge-paginator__range-label--alternative',
-    FIRST_PAGE_BUTTON: 'forge-paginator__first-page',
-    PREVIOUS_PAGE_BUTTON: 'forge-paginator__previous-page',
-    NEXT_PAGE_BUTTON: 'forge-paginator__next-page',
-    LAST_PAGE_BUTTON: 'forge-paginator__last-page',
-    ROOT: 'forge-paginator',
-    ALTERNATIVE: 'forge-paginator--alternative',
-    ALIGNMENT_START: 'forge-paginator--alignment-start',
-    ALIGNMENT_SPACE_BETWEEN: 'forge-paginator--alignment-center',
-    ALIGNMENT_END: 'forge-paginator--alignment-end'
-};
-const selectors = {
-    LABEL: `.${classes.LABEL}`,
-    PAGE_SIZE_SELECT: `.${classes.PAGE_SIZE_OPTIONS}`,
-    RANGE_LABEL: `.${classes.RANGE_LABEL}`,
-    FIRST_PAGE_BUTTON: `.${classes.FIRST_PAGE_BUTTON}`,
-    FIRST_PAGE_ICON_BUTTON: `.${classes.FIRST_PAGE_BUTTON}`,
-    PREVIOUS_PAGE_BUTTON: `.${classes.PREVIOUS_PAGE_BUTTON}`,
-    NEXT_PAGE_BUTTON: `.${classes.NEXT_PAGE_BUTTON}`,
-    LAST_PAGE_BUTTON: `.${classes.LAST_PAGE_BUTTON}`,
-    LAST_PAGE_ICON_BUTTON: `.${classes.LAST_PAGE_BUTTON}`,
-    ROOT: `.${classes.ROOT}`,
-    RANGE_LABEL_ALTERNATIVE: `.${classes.RANGE_LABEL_ALTERNATIVE}`
-};
-const attributes = {
+const observedAttributes = {
     PAGE_INDEX: 'page-index',
     PAGE_SIZE: 'page-size',
     OFFSET: 'offset',
-    PAGE_SIZE_OPTIONS: 'page-size-options',
     TOTAL: 'total',
+    PAGE_SIZE_OPTIONS: 'page-size-options',
     LABEL: 'label',
     FIRST_LAST: 'first-last',
     FIRST: 'first',
     DISABLED: 'disabled',
-    ALTERNATIVE: 'alternative',
-    ALIGNMENT: 'alignment'
+    ALTERNATIVE: 'alternative'
+};
+const attributes = Object.assign({}, observedAttributes);
+const selectors = {
+    LABEL: '.label > slot[name=label]',
+    PAGE_SIZE_SELECT: '.page-size-options',
+    RANGE_LABEL: '.range-label > slot[name=range-label]',
+    FIRST_PAGE_BUTTON: '.first-page',
+    PREVIOUS_PAGE_BUTTON: '.previous-page',
+    NEXT_PAGE_BUTTON: '.next-page',
+    LAST_PAGE_BUTTON: '.last-page',
+    RANGE_LABEL_ALTERNATIVE: '.alternative-range-label > slot[name=alternative-range-label]'
 };
 const events = {
     CHANGE: `${elementName}-change`
@@ -57,18 +39,13 @@ const numbers = {
 };
 const strings = {
     DEFAULT_LABEL: 'Rows per page:',
-    RANGE_SEPARATOR_LABEL: 'of',
-    FIRST_PAGE: 'first-page',
-    PREVIOUS_PAGE: 'previous-page',
-    NEXT_PAGE: 'next-page',
-    LAST_PAGE: 'last-page',
-    PAGE_SIZE: 'page-size'
+    RANGE_SEPARATOR_LABEL: 'of'
 };
 export const PAGINATOR_CONSTANTS = {
     elementName,
-    classes,
-    selectors,
+    observedAttributes,
     attributes,
+    selectors,
     events,
     numbers,
     strings

package/esm/paginator/paginator-foundation.d.ts

@@ -5,14 +5,18 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IPaginatorAdapter } from './paginator-adapter';
-import { PaginatorAlternativeAlignment, PaginatorRangeLabelBuilder } from './paginator-constants';
+import { PaginatorRangeLabelBuilder } from './paginator-constants';
 export interface IPaginatorFoundation extends ICustomElementFoundation {
     pageIndex: number;
     pageSize: number;
     offset: number;
     total: number;
-    pageSizeOptions: number[] | boolean;
-    pageSizeLabel: string;
+    pageSizeOptions: number[];
+    label: string;
+    firstLast: boolean;
+    first: boolean;
+    disabled: boolean;
+    alternative: boolean;
     rangeLabelCallback: PaginatorRangeLabelBuilder;
     focus(options?: FocusOptions): void;
 }
@@ -28,7 +32,6 @@ export declare class PaginatorFoundation {
     private _first;
     private _disabled;
     private _alternative;
-    private _alignment;
     private _rangeLabelCallback;
     private _firstPageListener;
     private _previousPageListener;
@@ -37,16 +40,14 @@ export declare class PaginatorFoundation {
     private _pageSizeListener;
     constructor(_adapter: IPaginatorAdapter);
     initialize(): void;
-    disconnect(): void;
     focus(options?: FocusOptions): void;
     private _attachListeners;
-    private _detachListeners;
     private _onFirstPage;
     private _onPreviousPage;
     private _onNextPage;
     private _onLastPage;
     private _onPageSizeChanged;
-    private _emitChangeEvent;
+    private _dispatchChangeEvent;
     private _getMaxPages;
     private _updateRangeLabel;
     private _syncInteractionState;
@@ -61,7 +62,6 @@ export declare class PaginatorFoundation {
     private _applyPageIndex;
     private _applyPageSize;
     private _applyTotal;
-    private _applyAlternativeAlignment;
     private _applyDisabled;
     get pageIndex(): number;
     set pageIndex(value: number);
@@ -71,8 +71,8 @@ export declare class PaginatorFoundation {
     set offset(value: number);
     get total(): number;
     set total(value: number);
-    get pageSizeOptions(): number[] | boolean;
-    set pageSizeOptions(options: number[] | boolean);
+    get pageSizeOptions(): number[];
+    set pageSizeOptions(options: number[]);
     get label(): string;
     set label(value: string);
     get firstLast(): boolean;
@@ -83,8 +83,6 @@ export declare class PaginatorFoundation {
     set disabled(value: boolean);
     get alternative(): boolean;
     set alternative(value: boolean);
-    get alignment(): PaginatorAlternativeAlignment;
-    set alignment(value: PaginatorAlternativeAlignment);
     get rangeLabelCallback(): PaginatorRangeLabelBuilder;
     set rangeLabelCallback(value: PaginatorRangeLabelBuilder);
 }

package/esm/paginator/paginator-foundation.js

@@ -17,12 +17,12 @@ export class PaginatorFoundation {
         this._firstLast = false;
         this._first = false;
         this._disabled = false;
-        this._alignment = 'space-between';
-        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._alternative = false;
+        this._firstPageListener = this._onFirstPage.bind(this);
+        this._previousPageListener = this._onPreviousPage.bind(this);
+        this._nextPageListener = this._onNextPage.bind(this);
+        this._lastPageListener = this._onLastPage.bind(this);
+        this._pageSizeListener = this._onPageSizeChanged.bind(this);
     }
     initialize() {
         this._updateRangeLabel();
@@ -33,9 +33,6 @@ export class PaginatorFoundation {
         this._toggleFirstLastButtons();
         this._syncInteractionState();
     }
-    disconnect() {
-        this._detachListeners();
-    }
     focus(options) {
         this._adapter.setFocus(options);
     }
@@ -46,53 +43,50 @@ export class PaginatorFoundation {
         this._adapter.attachNextPageListener(this._nextPageListener);
         this._adapter.attachLastPageListener(this._lastPageListener);
     }
-    _detachListeners() {
-        this._adapter.detachPageSizeChangeListener(this._pageSizeListener);
-        this._adapter.detachFirstPageListener(this._firstPageListener);
-        this._adapter.detachPreviousPageListener(this._previousPageListener);
-        this._adapter.detachNextPageListener(this._nextPageListener);
-        this._adapter.detachLastPageListener(this._lastPageListener);
-    }
     _onFirstPage(evt) {
         evt.stopPropagation();
+        /* c8 ignore next 3 */
         if (!this._hasFirstPage()) {
             return;
         }
         const firstPage = 0;
-        const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.FIRST_PAGE, { pageIndex: firstPage });
+        const canPage = this._dispatchChangeEvent('first-page', { pageIndex: firstPage });
         if (canPage) {
             this._applyPageIndex(firstPage);
         }
     }
     _onPreviousPage(evt) {
         evt.stopPropagation();
+        /* c8 ignore next 3 */
         if (!this._hasPreviousPage()) {
             return;
         }
         const prevPage = this._pageIndex - 1;
-        const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PREVIOUS_PAGE, { pageIndex: prevPage });
+        const canPage = this._dispatchChangeEvent('previous-page', { pageIndex: prevPage });
         if (canPage) {
             this._applyPageIndex(prevPage);
         }
     }
     _onNextPage(evt) {
         evt.stopPropagation();
+        /* c8 ignore next 3 */
         if (!this._hasNextPage()) {
             return;
         }
         const nextPage = this._pageIndex + 1;
-        const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.NEXT_PAGE, { pageIndex: nextPage });
+        const canPage = this._dispatchChangeEvent('next-page', { pageIndex: nextPage });
         if (canPage) {
             this._applyPageIndex(nextPage);
         }
     }
     _onLastPage(evt) {
         evt.stopPropagation();
+        /* c8 ignore next 3 */
         if (!this._hasLastPage()) {
             return;
         }
         const lastPage = this._getMaxPages();
-        const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.LAST_PAGE, { pageIndex: lastPage });
+        const canPage = this._dispatchChangeEvent('last-page', { pageIndex: lastPage });
         if (canPage) {
             this._applyPageIndex(lastPage);
         }
@@ -100,7 +94,7 @@ export class PaginatorFoundation {
     _onPageSizeChanged(evt) {
         evt.stopPropagation();
         const pageSize = Number(evt.detail);
-        const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PAGE_SIZE, { pageIndex: 0, pageSize });
+        const canPage = this._dispatchChangeEvent('page-size', { pageIndex: 0, pageSize });
         if (canPage) {
             this._applyPageIndex(0);
             this._applyPageSize(pageSize);
@@ -109,10 +103,12 @@ export class PaginatorFoundation {
             evt.preventDefault();
         }
     }
-    _emitChangeEvent(type, { pageSize = this._pageSize, pageIndex = this._pageIndex } = {}) {
+    _dispatchChangeEvent(type, { pageSize = this._pageSize, pageIndex = this._pageIndex } = {}) {
         const offset = pageIndex * pageSize;
         const detail = { type, pageSize, pageIndex, offset };
-        return this._adapter.emitHostEvent(PAGINATOR_CONSTANTS.events.CHANGE, detail, true, true);
+        const event = new CustomEvent(PAGINATOR_CONSTANTS.events.CHANGE, { detail, bubbles: true, cancelable: true });
+        this._adapter.dispatchHostEvent(event);
+        return !event.defaultPrevented;
     }
     _getMaxPages() {
         return Math.ceil(this._total / this._pageSize) - 1;
@@ -145,10 +141,10 @@ export class PaginatorFoundation {
         this._adapter.setRangeLabel(rangeLabel);
     }
     _syncInteractionState() {
-        this._adapter.enableFirstPageButton();
-        this._adapter.enablePreviousPageButton();
-        this._adapter.enableNextPageButton();
-        this._adapter.enableLastPageButton();
+        this._adapter.setFirstPageButtonEnabled(true);
+        this._adapter.setPreviousPageButtonEnabled(true);
+        this._adapter.setNextPageButtonEnabled(true);
+        this._adapter.setLastPageButtonEnabled(true);
         const fieldsToDisable = [];
         if (!this._hasFirstPage()) {
             fieldsToDisable.push('first');
@@ -242,21 +238,17 @@ export class PaginatorFoundation {
         }
         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();
+            this._adapter.setPageSizeSelectEnabled(false);
+            this._adapter.setFirstPageButtonEnabled(false);
+            this._adapter.setPreviousPageButtonEnabled(false);
+            this._adapter.setNextPageButtonEnabled(false);
+            this._adapter.setLastPageButtonEnabled(false);
         }
         else {
-            this._adapter.enablePageSizeSelect();
+            this._adapter.setPageSizeSelectEnabled(true);
             this._syncInteractionState();
         }
     }
@@ -304,7 +296,7 @@ export class PaginatorFoundation {
         return this._pageSizeOptions.map(o => Number(o.value));
     }
     set pageSizeOptions(options) {
-        if (isArray(options)) {
+        if (isArray(options) && options.length) {
             this._pageSizeOptions = options
                 .map(o => ({ label: o.toString(), value: o.toString() }))
                 .sort((a, b) => coerceNumber(a.value) - coerceNumber(b.value));
@@ -316,7 +308,7 @@ export class PaginatorFoundation {
                 this._applyPageSize(pageSize);
             }
         }
-        else if (options.toString().toLowerCase() === 'false') {
+        else if (!(options === null || options === void 0 ? void 0 : options.length)) {
             this._adapter.detachPageSizeChangeListener(this._pageSizeListener);
             this._adapter.setPageSizeVisibility(false);
         }
@@ -328,7 +320,13 @@ export class PaginatorFoundation {
         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() : '');
+            const hasLabelAttr = isDefined(this._label) && this._label.length;
+            if (hasLabelAttr) {
+                this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.LABEL, String(this._label));
+            }
+            else {
+                this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.LABEL);
+            }
         }
     }
     get firstLast() {
@@ -367,22 +365,12 @@ export class PaginatorFoundation {
         return this._alternative;
     }
     set alternative(value) {
+        value = Boolean(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();
-        }
-    }
     get rangeLabelCallback() {
         return this._rangeLabelCallback;
     }