- {transaction.action.name} + {transaction.action?.name || 'Unknown Action'}
{showTooltip && ( -
{transaction.interactorAsset ? (
- 
+
) : (
-
@@ -89,4 +94,3 @@ export function TransactionListItem({ transaction }: TransactionListItemPropsTyp
);
}
-
diff --git a/src/components/visual/TransactionListItem/tests/transaction-list-item.spec.tsx b/src/components/functional/notifications-feed/components/TransactionListItem/tests/TransactionListItem.spec.tsx
similarity index 98%
rename from src/components/visual/TransactionListItem/tests/transaction-list-item.spec.tsx
rename to src/components/functional/notifications-feed/components/TransactionListItem/tests/TransactionListItem.spec.tsx
index 6b9d4f38..e589ba3b 100644
--- a/src/components/visual/TransactionListItem/tests/transaction-list-item.spec.tsx
+++ b/src/components/functional/notifications-feed/components/TransactionListItem/tests/TransactionListItem.spec.tsx
@@ -8,7 +8,7 @@ import type { ITransactionListItem } from '../transactionListItem.types';
describe('transaction-list-item', () => {
const createPage = async (transaction: ITransactionListItem) => {
const page = await newSpecPage({
- components: [],
+ components: [TransactionListItem],
template: () =>
This feed is stored in your browser and will be reset when a new session is started.
@@ -109,9 +104,7 @@ export class NotificationsFeed {
{hasPending && (
+
+
setTimeout(resolve, 300));
diff --git a/src/components/visual/address-table/address-table.tsx b/src/components/visual/address-table/address-table.tsx
index 18ccd236..b89efe13 100644
--- a/src/components/visual/address-table/address-table.tsx
+++ b/src/components/visual/address-table/address-table.tsx
@@ -1,9 +1,11 @@
import type { EventEmitter } from '@stencil/core';
-import { Component, Event, h, Prop } from '@stencil/core';
+import { Component, Event, h, Prop, State } from '@stencil/core';
import classNames from 'classnames';
import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
import type { IAddressTableData, IndexedAccountType } from 'types/address-table.types';
+import { Pagination } from './components/pagination/Pagination';
+
const TOTAL_ADDRESSES_COUNT = 5000;
const addressTableClasses: Record = {
button: 'mvx:w-full',
@@ -22,6 +24,9 @@ export class AddressTable {
@Event({ bubbles: false, composed: false }) selectAccount: EventEmitter;
@Event() pageChange: EventEmitter;
+ @State() activeTooltipIndex: number | null = null;
+ @State() isTooltipOpen: boolean = false;
+
handleAccessWallet(event: MouseEvent) {
event.preventDefault();
this.accessWallet.emit();
@@ -34,16 +39,15 @@ export class AddressTable {
};
}
- private handlePageChange(event: CustomEvent) {
- event.preventDefault();
- event.stopPropagation();
- this.pageChange.emit(event.detail);
- }
-
private processLedgerAddressIndex(accountDerivation: IndexedAccountType) {
return Number(accountDerivation.index + 1).toLocaleString();
}
+ private handlePaginationTooltipStatusChange = (index: number | null, isOpen: boolean) => {
+ this.activeTooltipIndex = index;
+ this.isTooltipOpen = isOpen;
+ };
+
render() {
const isPageChanging = this.accountScreenData.isLoading;
const isAddressesLoadingInitially = this.accountScreenData.accounts.length === 0;
@@ -144,12 +148,15 @@ export class AddressTable {
;
+
+interface PaginationEllipsisPropsType {
+ isActive?: boolean;
+}
+
+export function PaginationEllipsis({ isActive = false }: PaginationEllipsisPropsType) {
+ return (
+ ;
+
+interface PaginationEllipsisFormPropsType {
+ maxPageToSearchFor: number;
+ isVisible?: boolean;
+ pageValue: string;
+ onSearch: (page: number) => void;
+ onPageValueChange: (value: string) => void;
+}
+
+export function PaginationEllipsisForm({
+ maxPageToSearchFor,
+ isVisible = false,
+ pageValue = '',
+ onSearch,
+ onPageValueChange,
+}: PaginationEllipsisFormPropsType) {
+ const handleInputRef = (el: HTMLInputElement | null) => {
+ if (el && isVisible) {
+ el.focus();
+ }
+ };
+
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.code === 'Enter') {
+ event.preventDefault();
+ handleSubmit(event);
+ }
+
+ if (['Equal', 'Minus', 'Period', 'KeyE', 'Comma'].includes(event.code)) {
+ event.preventDefault();
+ return;
+ }
+ };
+
+ const handleInput = (event: Event) => {
+ const input = event.target as HTMLInputElement;
+ const isBelowMax = parseFloat(input.value) <= maxPageToSearchFor;
+
+ if (isBelowMax) {
+ onPageValueChange(input.value);
+ } else {
+ input.value = pageValue;
+ }
+ };
+
+ const handleSubmit = (event: Event) => {
+ if (!pageValue) {
+ return;
+ }
+
+ event.preventDefault();
+ onSearch(parseInt(pageValue === '0' ? '1' : pageValue));
+ };
+
+ return (
+ ;
+ @State() activeTooltipIndex: number | null = null;
+ @State() isTooltipOpen: boolean = false;
+ @State() currentPageIndex: number;
+ @State() pageValue: string = '';
+
+ @Watch('currentPage')
+ watchCurrentPage(newValue: number) {
+ if (newValue !== this.currentPageIndex) {
+ this.currentPageIndex = newValue;
+ }
+ }
+
+ componentWillLoad() {
+ this.currentPageIndex = this.currentPage;
+ }
+
+ private handleTooltipStatus = (index: number | null, isOpen: boolean) => {
+ this.activeTooltipIndex = index;
+ this.isTooltipOpen = isOpen;
+ };
+
+ private handlePageClick = (newPageIndex: number) => {
+ this.currentPageIndex = newPageIndex;
+ this.pageChange.emit(newPageIndex);
+ };
+
+ private handlePageValueChange = (value: string) => {
+ this.pageValue = value;
+ };
+
+ render() {
+ return (
+ ;
+
+const storySettings = {
+ tags: ['autodocs'],
+ title: 'Components/Pagination',
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'Pagination is not exported as a webcomponent. Make sure to exclude the component from the tsconfig.json file.',
+ },
+ },
+ },
+ args: {
+ 'current-page': 1,
+ 'total-pages': 10,
+ 'is-disabled': false,
+ 'class': '',
+ },
+ argTypes: {
+ 'current-page': { control: { type: 'number', min: 1, max: 10 } },
+ 'total-pages': { control: { type: 'number', min: 1 } },
+ 'is-disabled': { control: 'boolean' },
+ 'class': { control: 'text' },
+ },
+ decorators: [
+ Story => (
+ = {
+ render: props => {
+ return = {
+ render: () => = {
+ render: () => = {
+ render: () => = {
+ render: () => = {
+ render: () => = {
- buttonIcon: 'mvx:p-[10px] mvx:hover:!fill-teal-400',
-};
-
-@Component({
- tag: 'mvx-pagination-ellipsis-form',
- styleUrl: 'pagination-ellipsis-form.scss',
- shadow: true,
-})
-export class PaginationEllipsisForm {
- @State() pageValue: string = '';
- @Event({ bubbles: false, composed: false }) search: EventEmitter;
-
- @Prop() maxPageToSearchFor: number;
- @Prop() isVisible: boolean = false;
-
- constructor() {
- this.handleInput = this.handleInput.bind(this);
- this.handleSubmit = this.handleSubmit.bind(this);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- this.handleInputReference = this.handleInputReference.bind(this);
- }
-
- private inputElement!: HTMLInputElement;
- private handleInputReference(inputElement: HTMLInputElement) {
- this.inputElement = inputElement;
- }
-
- private handleKeyDown(event: KeyboardEvent) {
- if (event.code === 'Enter') {
- event.preventDefault();
- this.handleSubmit(event);
- }
-
- if (['Equal', 'Minus', 'Period', 'KeyE', 'Comma'].includes(event.code)) {
- event.preventDefault();
- return;
- }
- }
-
- private handleInput(event: Event) {
- const input = event.target as HTMLInputElement;
- const isBelowMax = parseFloat(input.value) <= this.maxPageToSearchFor;
-
- if (isBelowMax) {
- this.pageValue = input.value;
- } else {
- input.value = this.pageValue;
- }
- }
-
- private handleSubmit(event: Event) {
- if (!this.pageValue) {
- return;
- }
-
- event.preventDefault();
- this.search.emit(parseInt(this.pageValue === '0' ? '1' : this.pageValue));
- }
-
- @Watch('isVisible')
- handleVisibilityChange(newValue: boolean) {
- if (newValue && this.inputElement) {
- this.inputElement.focus();
- }
- }
-
- render() {
- return (
- ;
-
-const storySettings: Meta = {
- tags: ['autodocs'],
- title: 'Components/Pagination',
- args: {
- currentPage: 1,
- totalPages: 10,
- isDisabled: false,
- class: '',
- },
- argTypes: {
- currentPage: { control: { type: 'number', min: 1, max: 10 } },
- totalPages: { control: { type: 'number', min: 1 } },
- isDisabled: { control: 'boolean' },
- class: { control: 'text' },
- },
- decorators: [
- Story => (
- = {
- render: properties => = {
- render: () => = {
- render: () => = {
- render: () => = {
- render: () => = {
- render: () => ;
- @State() activeTooltipIndex: number | null = null;
- @State() isTooltipOpen: boolean = false;
- @State() currentPageIndex: number;
-
- @Watch('currentPage')
- watchCurrentPage(newValue: number) {
- if (newValue !== this.currentPageIndex) {
- this.currentPageIndex = newValue;
- }
- }
-
- private handleTooltipStatus(isOpen: boolean) {
- this.isTooltipOpen = isOpen;
- }
-
- private handlePageClick(newPageIndex: number) {
- if (newPageIndex === this.currentPageIndex) {
- return;
- }
-
- this.currentPageIndex = newPageIndex;
- this.pageChange.emit(newPageIndex);
- }
-
- private handleEdgePageClick(pageToNavigateTo: number) {
- return (event: MouseEvent) => {
- event.preventDefault();
- this.handlePageClick(pageToNavigateTo);
- };
- }
-
- private isCurrentPageActive(paginationItem: string) {
- return parseFloat(paginationItem) === this.currentPageIndex;
- }
-
- private isInTheHundreds(paginationItem: string) {
- return parseFloat(paginationItem) && parseFloat(paginationItem) >= 100;
- }
-
- componentWillLoad() {
- this.currentPageIndex = this.currentPage;
- }
-
- /**
- * Generates CSS classes for pagination edge buttons (previous/next)
- * @param isInactive - Whether the button should be inactive
- * @returns Object with CSS class mappings
- */
-
- private getPaginationEdgeButtonClasses(isInactive: boolean) {
- return {
- [styles.paginationEdgeButton]: true,
- [styles.paginationEdgeButtonDisabled]: this.isDisabled,
- [styles.paginationEdgeButtonInactive]: isInactive,
- };
- }
-
- /**
- * Generates CSS classes for pagination angle buttons (first/last)
- * @param isInactive - Whether the button should be inactive/disabled
- * @returns Object with CSS class mappings
- */
-
- private getPaginationAngleClasses(isInactive: boolean) {
- return {
- [styles.paginationAngle]: true,
- [styles.paginationAngleDisabled]: this.isDisabled,
- [styles.paginationAngleInactive]: isInactive,
- };
- }
-
- render() {
- const isLeftToggleDisabled = this.currentPageIndex === 1;
- const isRightToggleDisabled = this.currentPageIndex === this.totalPages;
- const paginationItems = getPagination({ currentPage: this.currentPageIndex, totalPages: this.totalPages });
-
- return (
-
Processing...
- {this.pendingTransactions?.map(toast => (
-
- this.handlePageChange(event)}
+ onPageChange={(page: number) => this.pageChange.emit(page)}
currentPage={Math.floor(this.accountScreenData.startIndex / this.accountScreenData.addressesPerPage) + 1}
+ activeTooltipIndex={this.activeTooltipIndex}
+ isTooltipOpen={this.isTooltipOpen}
+ onTooltipStatusChange={this.handlePaginationTooltipStatusChange}
/>
diff --git a/src/components/visual/address-table/components/pagination/Pagination.tsx b/src/components/visual/address-table/components/pagination/Pagination.tsx
new file mode 100644
index 00000000..62efdd85
--- /dev/null
+++ b/src/components/visual/address-table/components/pagination/Pagination.tsx
@@ -0,0 +1,171 @@
+import { h } from '@stencil/core';
+import { Icon } from 'common/Icon';
+import { Tooltip } from 'common/Tooltip/Tooltip';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
+
+import { PaginationEllipsis } from './components/PaginationEllipsis/PaginationEllipsis';
+import { PaginationEllipsisForm } from './components/PaginationEllipsisForm/PaginationEllipsisForm';
+import { getPagination } from './helpers';
+import styles from './pagination.styles';
+
+export interface PaginationPropsType {
+ currentPage: number;
+ totalPages: number;
+ isDisabled?: boolean;
+ class?: string;
+ onPageChange?: (page: number) => void;
+ activeTooltipIndex?: number | null;
+ isTooltipOpen?: boolean;
+ onTooltipStatusChange?: (index: number | null, isOpen: boolean) => void;
+ pageValue?: string;
+ onPageValueChange?: (value: string) => void;
+}
+
+export function Pagination({
+ activeTooltipIndex = null,
+ isTooltipOpen = false,
+ onTooltipStatusChange,
+ currentPage = 1,
+ totalPages,
+ isDisabled = false,
+ class: className,
+ onPageChange,
+ pageValue = '',
+ onPageValueChange,
+}: PaginationPropsType) {
+ const handleTooltipStatus = (index: number | null, isOpen: boolean) => {
+ onTooltipStatusChange?.(index, isOpen);
+ };
+
+ const handlePageClick = (newPageIndex: number) => {
+ if (newPageIndex === currentPage) {
+ return;
+ }
+ onPageChange?.(newPageIndex);
+ };
+
+ const handleEdgePageClick = (pageToNavigateTo: number) => {
+ return (event: MouseEvent) => {
+ event.preventDefault();
+ handlePageClick(pageToNavigateTo);
+ };
+ };
+
+ const isCurrentPageActive = (paginationItem: string) => {
+ return parseFloat(paginationItem) === currentPage;
+ };
+
+ const isInTheHundreds = (paginationItem: string) => {
+ return parseFloat(paginationItem) && parseFloat(paginationItem) >= 100;
+ };
+
+ /**
+ * Generates CSS classes for pagination edge buttons (previous/next)
+ * @param isInactive - Whether the button should be inactive
+ * @returns Object with CSS class mappings
+ */
+
+ const getPaginationEdgeButtonClasses = (isInactive: boolean) => {
+ return {
+ [styles.paginationEdgeButton]: true,
+ [styles.paginationEdgeButtonDisabled]: isDisabled,
+ [styles.paginationEdgeButtonInactive]: isInactive,
+ };
+ };
+
+ /**
+ * Generates CSS classes for pagination angle buttons (first/last)
+ * @param isInactive - Whether the button should be inactive/disabled
+ * @returns Object with CSS class mappings
+ */
+
+ const getPaginationAngleClasses = (isInactive: boolean) => {
+ return {
+ [styles.paginationAngle]: true,
+ [styles.paginationAngleDisabled]: isDisabled,
+ [styles.paginationAngleInactive]: isInactive,
+ };
+ };
+
+ const isLeftToggleDisabled = currentPage === 1;
+ const isRightToggleDisabled = currentPage === totalPages;
+ const paginationItems = getPagination({ currentPage, totalPages });
+
+ return (
+
+
+
+ );
+}
diff --git a/src/components/visual/address-table/components/pagination/components/PaginationEllipsis/PaginationEllipsis.tsx b/src/components/visual/address-table/components/pagination/components/PaginationEllipsis/PaginationEllipsis.tsx
new file mode 100644
index 00000000..257f2de2
--- /dev/null
+++ b/src/components/visual/address-table/components/pagination/components/PaginationEllipsis/PaginationEllipsis.tsx
@@ -0,0 +1,18 @@
+import { h } from '@stencil/core';
+import { ELLIPSIS } from 'constants/htmlStrings';
+
+// prettier-ignore
+const styles = {
+ paginationEllipsis: 'pagination-ellipsis mvx:w-8 mvx:h-8 mvx:cursor-pointer mvx:flex mvx:items-center mvx:justify-center mvx:transition-all mvx:duration-200 mvx:rounded-full mvx:ease-in-out mvx:text-primary mvx:hover:bg-pagination-item-hover mvx:active:bg-pagination-item-hover',
+ paginationEllipsisActive: 'pagination-ellipsis-active mvx:active:bg-pagination-item-hover'
+} satisfies Record
+
+
+ {paginationItems.map((paginationItem, paginationItemIndex) => (
+
+
+ {parseFloat(paginationItem) ? (
+ onPageValueChange?.(value)}
+ onSearch={page => handlePageClick(page)}
+ />
+ )}
+
+ )}
+
+ ))}
+ handlePageClick(Number(paginationItem))}
+ data-testid={`${DataTestIdsEnum.paginationItem}-${paginationItem}`}
+ class={{
+ [styles.paginationItem]: true,
+ [styles.paginationItemBefore]: true,
+ [styles.paginationItemActive]: isCurrentPageActive(paginationItem),
+ [styles.paginationItemHundreds]: isInTheHundreds(paginationItem),
+ }}
+ >
+ {paginationItem}
+
+ ) : (
+
+
+
+ {ELLIPSIS}
+ );
+}
diff --git a/src/components/visual/address-table/components/pagination/components/PaginationEllipsisForm/PaginationEllipsisForm.tsx b/src/components/visual/address-table/components/pagination/components/PaginationEllipsisForm/PaginationEllipsisForm.tsx
new file mode 100644
index 00000000..ba4c9f85
--- /dev/null
+++ b/src/components/visual/address-table/components/pagination/components/PaginationEllipsisForm/PaginationEllipsisForm.tsx
@@ -0,0 +1,97 @@
+import { h } from '@stencil/core';
+import classNames from 'classnames';
+
+// prettier-ignore
+const styles = {
+ paginationEllipsisForm: 'pagination-ellipsis-form mvx:cursor-default mvx:flex mvx:flex-col mvx:text-left',
+ paginationEllipsisFormFieldLabel: 'pagination-ellipsis-form-field-label mvx:cursor-pointer mvx:mb-2 mvx:text-xs mvx:text-secondary-text',
+ paginationEllipsisFormField: 'pagination-ellipsis-form-field mvx:relative mvx:gap-2 mvx:flex',
+ paginationEllipsisFormFieldInput: 'pagination-ellipsis-form-field-input mvx:w-22 mvx:h-11 mvx:p-3 mvx:text-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:pr-10 mvx:m-0 mvx:border mvx:shadow-none mvx:text-base mvx:rounded-lg mvx:border-transparent mvx:appearance-none mvx:outline-none mvx:bg-surface mvx:text-primary mvx:focus:border-accent mvx:no-spinner',
+ paginationEllipsisFormButton: 'pagination-ellipsis-form-button mvx:group mvx:leading-none mvx:h-8 mvx:right-1 mvx:absolute mvx:cursor-pointer mvx:flex mvx:top-1/2 mvx:text-xs mvx:outline-none mvx:border-none mvx:bg-transparent mvx:transform mvx:-translate-y-1/2 mvx:translate-x-0',
+ paginationEllipsisFormButtonIconHover: 'pagination-ellipsis-form-button-icon-hover mvx:group-hover:fill-accent',
+ paginationEllipsisFormButtonIcon: 'pagination-ellipsis-form-button-icon mvx:p-[10px] mvx:hover:!fill-teal-400'
+} satisfies Record event.stopPropagation()}>
+
+
+
+ );
+}
diff --git a/src/components/visual/pagination/helpers/getPagination/getPagination.constants.ts b/src/components/visual/address-table/components/pagination/helpers/getPagination/getPagination.constants.ts
similarity index 100%
rename from src/components/visual/pagination/helpers/getPagination/getPagination.constants.ts
rename to src/components/visual/address-table/components/pagination/helpers/getPagination/getPagination.constants.ts
diff --git a/src/components/visual/pagination/helpers/getPagination/getPagination.ts b/src/components/visual/address-table/components/pagination/helpers/getPagination/getPagination.ts
similarity index 100%
rename from src/components/visual/pagination/helpers/getPagination/getPagination.ts
rename to src/components/visual/address-table/components/pagination/helpers/getPagination/getPagination.ts
diff --git a/src/components/visual/pagination/helpers/getPagination/index.ts b/src/components/visual/address-table/components/pagination/helpers/getPagination/index.ts
similarity index 100%
rename from src/components/visual/pagination/helpers/getPagination/index.ts
rename to src/components/visual/address-table/components/pagination/helpers/getPagination/index.ts
diff --git a/src/components/visual/pagination/helpers/getPagination/tests/getPagination.spec.ts b/src/components/visual/address-table/components/pagination/helpers/getPagination/tests/getPagination.spec.ts
similarity index 100%
rename from src/components/visual/pagination/helpers/getPagination/tests/getPagination.spec.ts
rename to src/components/visual/address-table/components/pagination/helpers/getPagination/tests/getPagination.spec.ts
diff --git a/src/components/visual/pagination/helpers/index.ts b/src/components/visual/address-table/components/pagination/helpers/index.ts
similarity index 100%
rename from src/components/visual/pagination/helpers/index.ts
rename to src/components/visual/address-table/components/pagination/helpers/index.ts
diff --git a/src/components/visual/address-table/components/pagination/pagination-story.tsx b/src/components/visual/address-table/components/pagination/pagination-story.tsx
new file mode 100644
index 00000000..20e25708
--- /dev/null
+++ b/src/components/visual/address-table/components/pagination/pagination-story.tsx
@@ -0,0 +1,64 @@
+import type { EventEmitter } from '@stencil/core';
+import { Component, Event, h, Prop, State, Watch } from '@stencil/core';
+
+import { Pagination } from './Pagination';
+
+@Component({
+ tag: 'mvx-pagination',
+ styleUrl: 'pagination.scss',
+ shadow: true,
+})
+export class PaginationComponent {
+ @Prop() currentPage: number = 1;
+ @Prop() totalPages: number;
+ @Prop() isDisabled?: boolean = false;
+ @Prop() class?: string;
+
+ @Event({ bubbles: false, composed: false }) pageChange: EventEmitter
+
+
+
+
+
+
+
+ ),
+ ],
+};
+
+type PaginationPropsType = typeof storySettings.args;
+
+export const Default: StoryObj event.stopPropagation()}>
-
-
-
- );
- }
-}
diff --git a/src/components/visual/pagination/components/pagination-ellipsis/pagination-ellipsis.scss b/src/components/visual/pagination/components/pagination-ellipsis/pagination-ellipsis.scss
deleted file mode 100644
index 3c18689c..00000000
--- a/src/components/visual/pagination/components/pagination-ellipsis/pagination-ellipsis.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.pagination-ellipsis {
- @apply mvx:w-8 mvx:h-8 mvx:cursor-pointer mvx:flex mvx:items-center mvx:justify-center mvx:transition-all;
- @apply mvx:duration-200 mvx:rounded-full mvx:ease-in-out;
- color: var(--mvx-text-color-primary);
-
- &:hover,
- &.active {
- background-color: var(--mvx-pagination-item-bg-hover);
- }
-}
diff --git a/src/components/visual/pagination/components/pagination-ellipsis/pagination-ellipsis.tsx b/src/components/visual/pagination/components/pagination-ellipsis/pagination-ellipsis.tsx
deleted file mode 100644
index d70ae1e5..00000000
--- a/src/components/visual/pagination/components/pagination-ellipsis/pagination-ellipsis.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, h, Prop } from '@stencil/core';
-import { ELLIPSIS } from 'constants/htmlStrings';
-
-@Component({
- tag: 'mvx-pagination-ellipsis',
- styleUrl: 'pagination-ellipsis.scss',
- shadow: true,
-})
-export class PaginationEllipsis {
- @Prop() isActive: boolean = false;
-
- render() {
- return
-
-
-
-
- {ELLIPSIS}
;
- }
-}
diff --git a/src/components/visual/pagination/pagination.scss b/src/components/visual/pagination/pagination.scss
deleted file mode 100644
index 21b0cbc1..00000000
--- a/src/components/visual/pagination/pagination.scss
+++ /dev/null
@@ -1 +0,0 @@
-// This is needed to trigger the Stecil Tailwind compilation for inline Tailwind classes.
diff --git a/src/components/visual/pagination/pagination.stories.tsx b/src/components/visual/pagination/pagination.stories.tsx
deleted file mode 100644
index 57256704..00000000
--- a/src/components/visual/pagination/pagination.stories.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import './pagination.scss';
-
-import { h } from '@stencil/core';
-import type { Meta, StoryObj } from '@stencil/storybook-plugin';
-
-import type { Pagination } from './pagination';
-
-// prettier-ignore
-const styles = {
- paginationStoriesWrapper: 'pagination-stories-wrapper mvx:justify-center mvx:flex mvx:gap-4 mvx:pt-24',
-} satisfies Record
-
- ),
- ],
-};
-
-export const Default: StoryObj
-
-
- );
- }
-}
diff --git a/src/global/tailwind.css b/src/global/tailwind.css
index a78f6c6d..cfea5f3b 100644
--- a/src/global/tailwind.css
+++ b/src/global/tailwind.css
@@ -109,4 +109,10 @@
.mvx\:animate-spinner {
animation: SpinnerAnimation 3000ms linear infinite;
}
+
+ .mvx\:no-spinner::-webkit-outer-spin-button,
+ .mvx\:no-spinner::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 4dbf3626..cd4cd292 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,7 @@
"jsxFactory": "h"
},
"include": ["src"],
- "exclude": ["node_modules"]
+ "exclude": ["node_modules",
+ "src/components/visual/address-table/components/pagination/pagination-story.tsx"
+ ]
}
-
-
-
- {paginationItems.map((paginationItem, paginationItemIndex) => (
-
-
-
- {parseFloat(paginationItem) ? (
- this.handlePageClick(event.detail)}
- />
- )}
-
- )}
-
- ))}
- this.handlePageClick(Number(paginationItem))}
- data-testid={`${DataTestIdsEnum.paginationItem}-${paginationItem}`}
- class={{
- [styles.paginationItem]: true,
- [styles.paginationItemBefore]: true,
- [styles.paginationItemActive]: this.isCurrentPageActive(paginationItem),
- [styles.paginationItemHundreds]: this.isInTheHundreds(paginationItem),
- }}
- >
- {paginationItem}
-
- ) : (
-
-
-
-
-