@haiilo/catalyst 14.3.0 → 14.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/index.cdn.js +1 -0
- package/dist/catalyst/{p-0df8aaa1.entry.js → p-76436f4e.entry.js} +4 -4
- package/dist/catalyst/{p-0df8aaa1.entry.js.map → p-76436f4e.entry.js.map} +1 -1
- package/dist/cjs/cat-alert_30.cjs.entry.js +2 -2
- package/dist/collection/components/cat-pagination/cat-pagination.js +2 -2
- package/dist/collection/components/cat-pagination/cat-pagination.js.map +1 -1
- package/dist/collection/index.cdn.js +1 -0
- package/dist/components/cat-pagination.js +2 -2
- package/dist/components/cat-pagination.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +2 -2
- package/package.json +2 -2
|
@@ -8270,9 +8270,9 @@ const CatPagination = class {
|
|
|
8270
8270
|
}
|
|
8271
8271
|
render() {
|
|
8272
8272
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
8273
|
-
return (index.h("nav", { key: '
|
|
8273
|
+
return (index.h("nav", { key: '4410f21a10719ef11bfe049f02812efa5a5aedb5', "aria-label": index$1.catI18nRegistry.t('pagination.ariaLabel') }, index.h("ol", { key: 'c4c0074f823ac1c71e9e2f665fcecc5d0c4dc296', class: {
|
|
8274
8274
|
[`cat-pagination-${this.size}`]: Boolean(this.size)
|
|
8275
|
-
} }, index.h("li", { key: '
|
|
8275
|
+
} }, index.h("li", { key: '0c64e83850c9cf111d37bf7df6cd41b7d892ef95' }, index.h("cat-button", { key: 'f24fd006684a4e067a054c685d10a42620ca3723', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: index$1.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: 'fd9db7231f5d720da01c78eca64a46251896a0f2' }, index.h("cat-button", { key: '909bc30138261010bc6cf2a23b8b804dade0db66', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: index$1.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
|
|
8276
8276
|
}
|
|
8277
8277
|
get isFirst() {
|
|
8278
8278
|
return this.page === 0;
|
|
@@ -52,9 +52,9 @@ export class CatPagination {
|
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
54
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
55
|
-
return (h("nav", { key: '
|
|
55
|
+
return (h("nav", { key: '4410f21a10719ef11bfe049f02812efa5a5aedb5', "aria-label": i18n.t('pagination.ariaLabel') }, h("ol", { key: 'c4c0074f823ac1c71e9e2f665fcecc5d0c4dc296', class: {
|
|
56
56
|
[`cat-pagination-${this.size}`]: Boolean(this.size)
|
|
57
|
-
} }, h("li", { key: '
|
|
57
|
+
} }, h("li", { key: '0c64e83850c9cf111d37bf7df6cd41b7d892ef95' }, h("cat-button", { key: 'f24fd006684a4e067a054c685d10a42620ca3723', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: 'fd9db7231f5d720da01c78eca64a46251896a0f2' }, h("cat-button", { key: '909bc30138261010bc6cf2a23b8b804dade0db66', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
|
|
58
58
|
}
|
|
59
59
|
get isFirst() {
|
|
60
60
|
return this.page === 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-pagination.js","sourceRoot":"","sources":["../../../src/components/cat-pagination/cat-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;;;;;GAMG;AAQH,MAAM,OAAO,aAAa;IAP1B;QASE;;WAEG;QACsB,SAAI,GAAG,CAAC,CAAC;QAElC;;WAEG;QACK,cAAS,GAAG,CAAC,CAAC;QAEtB;;WAEG;QACK,kBAAa,GAAG,CAAC,CAAC;QAE1B;;WAEG;QACK,gBAAW,GAAG,CAAC,CAAC;QAExB;;WAEG;QACK,SAAI,GAAkC,GAAG,CAAC;QAElD;;WAEG;QACK,YAAO,GAAmC,MAAM,CAAC;QAEzD;;WAEG;QACK,UAAK,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;WAEG;QACK,aAAQ,GAAG,sBAAsB,CAAC;QAE1C;;WAEG;QACK,aAAQ,GAAG,uBAAuB,CAAC;KAwH5C;IAjHC,MAAM;QACJ,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;QACnF,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"cat-pagination.js","sourceRoot":"","sources":["../../../src/components/cat-pagination/cat-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n tag: 'cat-pagination',\n styleUrl: 'cat-pagination.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatPagination {\n @Element() hostElement!: HTMLElement;\n /**\n * The current page.\n */\n @Prop({ mutable: true }) page = 0;\n\n /**\n * The total number of pages.\n */\n @Prop() pageCount = 1;\n\n /**\n * The number of pages to be shown around the current page.\n */\n @Prop() activePadding = 1;\n\n /**\n * The number of pages to be shown at the edges.\n */\n @Prop() sidePadding = 1;\n\n /**\n * The size of the buttons.\n */\n @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The rendering style of the buttons.\n */\n @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * Use round button edges.\n */\n @Prop() round = false;\n\n /**\n * Use compact pagination mode.\n */\n @Prop() compact = false;\n\n /**\n * The icon of the \"previous\" button.\n */\n @Prop() iconPrev = '$cat:pagination-left';\n\n /**\n * The icon of the \"next\" button.\n */\n @Prop() iconNext = '$cat:pagination-right';\n\n /**\n * Emitted when the page of the pagination has changed.\n */\n @Event() catChange!: EventEmitter<number>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <nav aria-label={i18n.t('pagination.ariaLabel')}>\n <ol\n class={{\n [`cat-pagination-${this.size}`]: Boolean(this.size)\n }}\n >\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isFirst}\n a11yLabel={i18n.t('pagination.prev')}\n icon={this.iconPrev}\n iconOnly\n onClick={() => this.setPage(this.page - 1)}\n ></cat-button>\n </li>\n {this.content}\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isLast}\n a11yLabel={i18n.t('pagination.next')}\n icon={this.iconNext}\n iconOnly\n onClick={() => this.setPage(this.page + 1)}\n ></cat-button>\n </li>\n </ol>\n </nav>\n );\n }\n\n get isFirst() {\n return this.page === 0;\n }\n\n get isLast() {\n return this.page === this.pageCount - 1;\n }\n\n private setPage(value: number) {\n this.page = value;\n this.catChange.emit(this.page);\n }\n\n get pages() {\n if (!this.sidePadding && !this.activePadding) {\n return [this.page];\n }\n\n const result = new Set<number>();\n const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n const maxActivepage = maxPage\n ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n : this.pageCount - this.sidePadding;\n\n this.addSeq(result, 0, minActivepage);\n if (!minPage && !maxPage) {\n this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n }\n this.addSeq(result, maxActivepage, this.pageCount);\n\n return [...result];\n }\n\n private addSeq(set: Set<number>, start: number, end: number) {\n const _start = this.clamp(start, 0, this.pageCount);\n const _end = this.clamp(end, 0, this.pageCount);\n Array(_end - _start)\n .fill(0)\n .forEach((_, i) => set.add(_start + i));\n }\n\n private clamp(num: number, min: number, max: number) {\n return Math.min(Math.max(num, min), max);\n }\n\n private get content() {\n if (this.compact) {\n return (\n <li class=\"text\">\n {this.page + 1}/{this.pageCount}\n </li>\n );\n }\n\n return this.pages.map((page, i) => [\n i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n color={this.page === page ? 'primary' : undefined}\n active={this.page === page}\n a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n a11yCurrent={this.page === page ? 'step' : undefined}\n onClick={() => this.setPage(page)}\n >\n {page + 1}\n </cat-button>\n </li>\n ]);\n }\n}\n"]}
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
'input.showPassword': 'Show password',
|
|
37
37
|
'input.hidePassword': 'Hide password',
|
|
38
38
|
'notification.dismiss': 'Dismiss',
|
|
39
|
+
'pagination.ariaLabel': 'Pagination',
|
|
39
40
|
'pagination.prev': 'Previous',
|
|
40
41
|
'pagination.page': 'Go to page {{page}}',
|
|
41
42
|
'pagination.next': 'Next',
|
|
@@ -57,9 +57,9 @@ const CatPagination$1 = /*@__PURE__*/ proxyCustomElement(class CatPagination ext
|
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
59
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
60
|
-
return (h("nav", { key: '
|
|
60
|
+
return (h("nav", { key: '4410f21a10719ef11bfe049f02812efa5a5aedb5', "aria-label": catI18nRegistry.t('pagination.ariaLabel') }, h("ol", { key: 'c4c0074f823ac1c71e9e2f665fcecc5d0c4dc296', class: {
|
|
61
61
|
[`cat-pagination-${this.size}`]: Boolean(this.size)
|
|
62
|
-
} }, h("li", { key: '
|
|
62
|
+
} }, h("li", { key: '0c64e83850c9cf111d37bf7df6cd41b7d892ef95' }, h("cat-button", { key: 'f24fd006684a4e067a054c685d10a42620ca3723', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: 'fd9db7231f5d720da01c78eca64a46251896a0f2' }, h("cat-button", { key: '909bc30138261010bc6cf2a23b8b804dade0db66', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
|
|
63
63
|
}
|
|
64
64
|
get isFirst() {
|
|
65
65
|
return this.page === 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-pagination.js","mappings":"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","names":["CatPagination","__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-pagination/cat-pagination.scss?tag=cat-pagination&encapsulation=shadow","src/components/cat-pagination/cat-pagination.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nol {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nli {\n display: inline-flex;\n justify-content: center;\n\n &.dots {\n @include cat-select(none);\n }\n}\n\n// ----- variant\n\n:host([variant='outlined']) {\n ol {\n gap: 0.75rem;\n }\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n .cat-pagination-#{$size} {\n li.dots,\n li.text {\n height: map.get($button-sizes, $size);\n line-height: map.get($button-sizes, $size);\n font-size: cat-body-font-size($fontSize);\n }\n\n li.dots {\n width: map.get($button-sizes, $size);\n }\n }\n\n :host([variant='outlined']) {\n .cat-pagination-#{$size} {\n gap: map.get($button-sizes, $size) * 0.25;\n }\n }\n}\n\n@include size('xs', 's');\n@include size('s', 'm');\n@include size('m', 'm');\n@include size('l', 'm');\n@include size('xl', 'l');\n","import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n tag: 'cat-pagination',\n styleUrl: 'cat-pagination.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatPagination {\n @Element() hostElement!: HTMLElement;\n /**\n * The current page.\n */\n @Prop({ mutable: true }) page = 0;\n\n /**\n * The total number of pages.\n */\n @Prop() pageCount = 1;\n\n /**\n * The number of pages to be shown around the current page.\n */\n @Prop() activePadding = 1;\n\n /**\n * The number of pages to be shown at the edges.\n */\n @Prop() sidePadding = 1;\n\n /**\n * The size of the buttons.\n */\n @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The rendering style of the buttons.\n */\n @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * Use round button edges.\n */\n @Prop() round = false;\n\n /**\n * Use compact pagination mode.\n */\n @Prop() compact = false;\n\n /**\n * The icon of the \"previous\" button.\n */\n @Prop() iconPrev = '$cat:pagination-left';\n\n /**\n * The icon of the \"next\" button.\n */\n @Prop() iconNext = '$cat:pagination-right';\n\n /**\n * Emitted when the page of the pagination has changed.\n */\n @Event() catChange!: EventEmitter<number>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <nav role=\"navigation\">\n <ol\n class={{\n [`cat-pagination-${this.size}`]: Boolean(this.size)\n }}\n >\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isFirst}\n a11yLabel={i18n.t('pagination.prev')}\n icon={this.iconPrev}\n iconOnly\n onClick={() => this.setPage(this.page - 1)}\n ></cat-button>\n </li>\n {this.content}\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isLast}\n a11yLabel={i18n.t('pagination.next')}\n icon={this.iconNext}\n iconOnly\n onClick={() => this.setPage(this.page + 1)}\n ></cat-button>\n </li>\n </ol>\n </nav>\n );\n }\n\n get isFirst() {\n return this.page === 0;\n }\n\n get isLast() {\n return this.page === this.pageCount - 1;\n }\n\n private setPage(value: number) {\n this.page = value;\n this.catChange.emit(this.page);\n }\n\n get pages() {\n if (!this.sidePadding && !this.activePadding) {\n return [this.page];\n }\n\n const result = new Set<number>();\n const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n const maxActivepage = maxPage\n ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n : this.pageCount - this.sidePadding;\n\n this.addSeq(result, 0, minActivepage);\n if (!minPage && !maxPage) {\n this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n }\n this.addSeq(result, maxActivepage, this.pageCount);\n\n return [...result];\n }\n\n private addSeq(set: Set<number>, start: number, end: number) {\n const _start = this.clamp(start, 0, this.pageCount);\n const _end = this.clamp(end, 0, this.pageCount);\n Array(_end - _start)\n .fill(0)\n .forEach((_, i) => set.add(_start + i));\n }\n\n private clamp(num: number, min: number, max: number) {\n return Math.min(Math.max(num, min), max);\n }\n\n private get content() {\n if (this.compact) {\n return (\n <li class=\"text\">\n {this.page + 1}/{this.pageCount}\n </li>\n );\n }\n\n return this.pages.map((page, i) => [\n i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n color={this.page === page ? 'primary' : undefined}\n active={this.page === page}\n a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n a11yCurrent={this.page === page ? 'step' : undefined}\n onClick={() => this.setPage(page)}\n >\n {page + 1}\n </cat-button>\n </li>\n ]);\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cat-pagination.js","mappings":"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","names":["CatPagination","__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-pagination/cat-pagination.scss?tag=cat-pagination&encapsulation=shadow","src/components/cat-pagination/cat-pagination.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nol {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nli {\n display: inline-flex;\n justify-content: center;\n\n &.dots {\n @include cat-select(none);\n }\n}\n\n// ----- variant\n\n:host([variant='outlined']) {\n ol {\n gap: 0.75rem;\n }\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n .cat-pagination-#{$size} {\n li.dots,\n li.text {\n height: map.get($button-sizes, $size);\n line-height: map.get($button-sizes, $size);\n font-size: cat-body-font-size($fontSize);\n }\n\n li.dots {\n width: map.get($button-sizes, $size);\n }\n }\n\n :host([variant='outlined']) {\n .cat-pagination-#{$size} {\n gap: map.get($button-sizes, $size) * 0.25;\n }\n }\n}\n\n@include size('xs', 's');\n@include size('s', 'm');\n@include size('m', 'm');\n@include size('l', 'm');\n@include size('xl', 'l');\n","import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n tag: 'cat-pagination',\n styleUrl: 'cat-pagination.scss',\n shadow: {\n delegatesFocus: true\n }\n})\nexport class CatPagination {\n @Element() hostElement!: HTMLElement;\n /**\n * The current page.\n */\n @Prop({ mutable: true }) page = 0;\n\n /**\n * The total number of pages.\n */\n @Prop() pageCount = 1;\n\n /**\n * The number of pages to be shown around the current page.\n */\n @Prop() activePadding = 1;\n\n /**\n * The number of pages to be shown at the edges.\n */\n @Prop() sidePadding = 1;\n\n /**\n * The size of the buttons.\n */\n @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The rendering style of the buttons.\n */\n @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * Use round button edges.\n */\n @Prop() round = false;\n\n /**\n * Use compact pagination mode.\n */\n @Prop() compact = false;\n\n /**\n * The icon of the \"previous\" button.\n */\n @Prop() iconPrev = '$cat:pagination-left';\n\n /**\n * The icon of the \"next\" button.\n */\n @Prop() iconNext = '$cat:pagination-right';\n\n /**\n * Emitted when the page of the pagination has changed.\n */\n @Event() catChange!: EventEmitter<number>;\n\n render() {\n this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n return (\n <nav aria-label={i18n.t('pagination.ariaLabel')}>\n <ol\n class={{\n [`cat-pagination-${this.size}`]: Boolean(this.size)\n }}\n >\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isFirst}\n a11yLabel={i18n.t('pagination.prev')}\n icon={this.iconPrev}\n iconOnly\n onClick={() => this.setPage(this.page - 1)}\n ></cat-button>\n </li>\n {this.content}\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n disabled={this.isLast}\n a11yLabel={i18n.t('pagination.next')}\n icon={this.iconNext}\n iconOnly\n onClick={() => this.setPage(this.page + 1)}\n ></cat-button>\n </li>\n </ol>\n </nav>\n );\n }\n\n get isFirst() {\n return this.page === 0;\n }\n\n get isLast() {\n return this.page === this.pageCount - 1;\n }\n\n private setPage(value: number) {\n this.page = value;\n this.catChange.emit(this.page);\n }\n\n get pages() {\n if (!this.sidePadding && !this.activePadding) {\n return [this.page];\n }\n\n const result = new Set<number>();\n const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n const maxActivepage = maxPage\n ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n : this.pageCount - this.sidePadding;\n\n this.addSeq(result, 0, minActivepage);\n if (!minPage && !maxPage) {\n this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n }\n this.addSeq(result, maxActivepage, this.pageCount);\n\n return [...result];\n }\n\n private addSeq(set: Set<number>, start: number, end: number) {\n const _start = this.clamp(start, 0, this.pageCount);\n const _end = this.clamp(end, 0, this.pageCount);\n Array(_end - _start)\n .fill(0)\n .forEach((_, i) => set.add(_start + i));\n }\n\n private clamp(num: number, min: number, max: number) {\n return Math.min(Math.max(num, min), max);\n }\n\n private get content() {\n if (this.compact) {\n return (\n <li class=\"text\">\n {this.page + 1}/{this.pageCount}\n </li>\n );\n }\n\n return this.pages.map((page, i) => [\n i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n <li>\n <cat-button\n variant={this.variant}\n size={this.size}\n round={this.round}\n color={this.page === page ? 'primary' : undefined}\n active={this.page === page}\n a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n a11yCurrent={this.page === page ? 'step' : undefined}\n onClick={() => this.setPage(page)}\n >\n {page + 1}\n </cat-button>\n </li>\n ]);\n }\n}\n"],"version":3}
|
|
@@ -8268,9 +8268,9 @@ const CatPagination = class {
|
|
|
8268
8268
|
}
|
|
8269
8269
|
render() {
|
|
8270
8270
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
8271
|
-
return (h("nav", { key: '
|
|
8271
|
+
return (h("nav", { key: '4410f21a10719ef11bfe049f02812efa5a5aedb5', "aria-label": catI18nRegistry.t('pagination.ariaLabel') }, h("ol", { key: 'c4c0074f823ac1c71e9e2f665fcecc5d0c4dc296', class: {
|
|
8272
8272
|
[`cat-pagination-${this.size}`]: Boolean(this.size)
|
|
8273
|
-
} }, h("li", { key: '
|
|
8273
|
+
} }, h("li", { key: '0c64e83850c9cf111d37bf7df6cd41b7d892ef95' }, h("cat-button", { key: 'f24fd006684a4e067a054c685d10a42620ca3723', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: 'fd9db7231f5d720da01c78eca64a46251896a0f2' }, h("cat-button", { key: '909bc30138261010bc6cf2a23b8b804dade0db66', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
|
|
8274
8274
|
}
|
|
8275
8275
|
get isFirst() {
|
|
8276
8276
|
return this.page === 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haiilo/catalyst",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.4.0",
|
|
4
4
|
"description": "Catalyst Design System",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"sanitize.css": "13.0.0",
|
|
40
40
|
"tabbable": "6.2.0",
|
|
41
41
|
"toastify-js": "1.12.0",
|
|
42
|
-
"@haiilo/catalyst-tokens": "14.
|
|
42
|
+
"@haiilo/catalyst-tokens": "14.4.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@babel/core": "7.28.5",
|