@haiilo/catalyst 14.3.0 → 14.5.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.
Files changed (116) hide show
  1. package/dist/catalyst/catalyst.css +15 -4
  2. package/dist/catalyst/catalyst.esm.js +1 -1
  3. package/dist/catalyst/index.cdn.js +1 -0
  4. package/dist/catalyst/{p-CFGROHMy.js → p-7uZgmxXB.js} +2 -2
  5. package/dist/catalyst/p-7uZgmxXB.js.map +1 -0
  6. package/dist/catalyst/p-fb92a2f1.entry.js +10 -0
  7. package/dist/catalyst/p-fb92a2f1.entry.js.map +1 -0
  8. package/dist/catalyst/scss/core/_nav.scss +2 -1
  9. package/dist/catalyst/scss/core/sanitize-overwrite.scss +3 -0
  10. package/dist/catalyst/scss/index.scss +1 -0
  11. package/dist/cjs/{cat-alert_30.cjs.entry.js → cat-alert_32.cjs.entry.js} +346 -103
  12. package/dist/cjs/catalyst.cjs.js +2 -2
  13. package/dist/cjs/{index-B8-TCsLD.js → index-Ddad39qn.js} +7 -4
  14. package/dist/cjs/index-Ddad39qn.js.map +1 -0
  15. package/dist/cjs/loader.cjs.js +2 -2
  16. package/dist/collection/collection-manifest.json +3 -1
  17. package/dist/collection/components/cat-alert/cat-alert.js +1 -1
  18. package/dist/collection/components/cat-badge/cat-badge.js +1 -1
  19. package/dist/collection/components/cat-button/cat-button.css +9 -2
  20. package/dist/collection/components/cat-button/cat-button.js +26 -1
  21. package/dist/collection/components/cat-button/cat-button.js.map +1 -1
  22. package/dist/collection/components/cat-button-group/cat-button-group.js +1 -1
  23. package/dist/collection/components/cat-card/cat-card.js +1 -1
  24. package/dist/collection/components/cat-checkbox/cat-checkbox.js +2 -2
  25. package/dist/collection/components/cat-date/cat-date.js +2 -2
  26. package/dist/collection/components/cat-date-inline/cat-date-inline.js +4 -4
  27. package/dist/collection/components/cat-datepicker/cat-datepicker.js +3 -3
  28. package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js +2 -2
  29. package/dist/collection/components/cat-dropdown/cat-dropdown.js +116 -47
  30. package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
  31. package/dist/collection/components/cat-menu/cat-menu.css +9 -0
  32. package/dist/collection/components/cat-menu/cat-menu.js +652 -0
  33. package/dist/collection/components/cat-menu/cat-menu.js.map +1 -0
  34. package/dist/collection/components/cat-menu-item/cat-menu-item.js +387 -0
  35. package/dist/collection/components/cat-menu-item/cat-menu-item.js.map +1 -0
  36. package/dist/collection/components/cat-pagination/cat-pagination.js +2 -2
  37. package/dist/collection/components/cat-pagination/cat-pagination.js.map +1 -1
  38. package/dist/collection/components/cat-radio/cat-radio.js +2 -2
  39. package/dist/collection/components/cat-radio-group/cat-radio-group.js +1 -1
  40. package/dist/collection/components/cat-scrollable/cat-scrollable.js +3 -3
  41. package/dist/collection/components/cat-select/cat-select.js +14 -18
  42. package/dist/collection/components/cat-select/cat-select.js.map +1 -1
  43. package/dist/collection/components/cat-select-demo/cat-select-demo.js +1 -1
  44. package/dist/collection/components/cat-skeleton/cat-skeleton.js +1 -1
  45. package/dist/collection/components/cat-spinner/cat-spinner.js +2 -2
  46. package/dist/collection/components/cat-tab/cat-tab.js +1 -1
  47. package/dist/collection/components/cat-tabs/cat-tabs.js +1 -1
  48. package/dist/collection/components/cat-tag/cat-tag.js +1 -1
  49. package/dist/collection/components/cat-textarea/cat-textarea.js +3 -3
  50. package/dist/collection/components/cat-time/cat-time.css +0 -9
  51. package/dist/collection/components/cat-time/cat-time.js +4 -5
  52. package/dist/collection/components/cat-time/cat-time.js.map +1 -1
  53. package/dist/collection/components/cat-toggle/cat-toggle.js +2 -2
  54. package/dist/collection/index.cdn.js +1 -0
  55. package/dist/collection/index.js.map +1 -1
  56. package/dist/collection/scss/core/_nav.scss +2 -1
  57. package/dist/collection/scss/core/sanitize-overwrite.scss +3 -0
  58. package/dist/collection/scss/index.scss +1 -0
  59. package/dist/components/cat-alert.js +1 -1
  60. package/dist/components/cat-badge.js +1 -1
  61. package/dist/components/cat-button-group.js +1 -1
  62. package/dist/components/cat-button2.js +8 -2
  63. package/dist/components/cat-button2.js.map +1 -1
  64. package/dist/components/cat-card.js +1 -1
  65. package/dist/components/cat-checkbox2.js +2 -2
  66. package/dist/components/cat-date-inline2.js +4 -4
  67. package/dist/components/cat-date.js +2 -2
  68. package/dist/components/cat-datepicker-inline.js +2 -2
  69. package/dist/components/cat-datepicker.js +3 -3
  70. package/dist/components/cat-dropdown2.js +69 -44
  71. package/dist/components/cat-dropdown2.js.map +1 -1
  72. package/dist/components/cat-menu-item.d.ts +11 -0
  73. package/dist/components/cat-menu-item.js +9 -0
  74. package/dist/components/cat-menu-item.js.map +1 -0
  75. package/dist/components/cat-menu-item2.js +111 -0
  76. package/dist/components/cat-menu-item2.js.map +1 -0
  77. package/dist/components/cat-menu.d.ts +11 -0
  78. package/dist/components/cat-menu.js +9 -0
  79. package/dist/components/cat-menu.js.map +1 -0
  80. package/dist/components/cat-menu2.js +227 -0
  81. package/dist/components/cat-menu2.js.map +1 -0
  82. package/dist/components/cat-pagination.js +2 -2
  83. package/dist/components/cat-pagination.js.map +1 -1
  84. package/dist/components/cat-radio-group.js +1 -1
  85. package/dist/components/cat-radio.js +2 -2
  86. package/dist/components/cat-scrollable2.js +3 -3
  87. package/dist/components/cat-select-demo.js +1 -1
  88. package/dist/components/cat-select2.js +5 -5
  89. package/dist/components/cat-select2.js.map +1 -1
  90. package/dist/components/cat-skeleton2.js +1 -1
  91. package/dist/components/cat-spinner2.js +2 -2
  92. package/dist/components/cat-tab.js +1 -1
  93. package/dist/components/cat-tabs.js +1 -1
  94. package/dist/components/cat-tag.js +1 -1
  95. package/dist/components/cat-textarea.js +3 -3
  96. package/dist/components/cat-time.js +25 -14
  97. package/dist/components/cat-time.js.map +1 -1
  98. package/dist/components/cat-toggle.js +2 -2
  99. package/dist/esm/{cat-alert_30.entry.js → cat-alert_32.entry.js} +345 -104
  100. package/dist/esm/catalyst.js +3 -3
  101. package/dist/esm/{index-CFGROHMy.js → index-7uZgmxXB.js} +7 -4
  102. package/dist/esm/index-7uZgmxXB.js.map +1 -0
  103. package/dist/esm/loader.js +3 -3
  104. package/dist/types/components/cat-button/cat-button.d.ts +4 -0
  105. package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +14 -2
  106. package/dist/types/components/cat-menu/cat-menu.d.ts +124 -0
  107. package/dist/types/components/cat-menu-item/cat-menu-item.d.ts +80 -0
  108. package/dist/types/components/cat-select/cat-select.d.ts +3 -2
  109. package/dist/types/components.d.ts +426 -7
  110. package/dist/types/index.d.ts +2 -1
  111. package/package.json +2 -2
  112. package/dist/catalyst/p-0df8aaa1.entry.js +0 -10
  113. package/dist/catalyst/p-0df8aaa1.entry.js.map +0 -1
  114. package/dist/catalyst/p-CFGROHMy.js.map +0 -1
  115. package/dist/cjs/index-B8-TCsLD.js.map +0 -1
  116. package/dist/esm/index-CFGROHMy.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cat-menu.js","sourceRoot":"","sources":["../../../src/components/cat-menu/cat-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\n/**\n * A menu component that provides a dropdown with a built-in configurable trigger button\n * and proper ARIA semantics and keyboard navigation for menu items.\n *\n * The trigger is always a cat-button with sensible defaults but fully configurable\n * through trigger-specific props.\n */\n@Component({\n tag: 'cat-menu',\n styleUrl: 'cat-menu.scss',\n shadow: true\n})\nexport class CatMenu {\n private dropdown?: HTMLCatDropdownElement;\n private catMenuItems: HTMLCatMenuItemElement[] = [];\n private mutationObserver?: MutationObserver;\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * The arrow key navigation direction for menu items.\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' = 'vertical';\n\n /**\n * The trigger button variant.\n */\n @Prop() triggerVariant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * The trigger button size.\n */\n @Prop() triggerSize: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n /**\n * The trigger button icon.\n */\n @Prop() triggerIcon?: string;\n\n /**\n * Show only the icon in the trigger button.\n */\n @Prop() triggerIconOnly?: boolean | Breakpoint;\n\n /**\n * The trigger button label.\n */\n @Prop() triggerLabel?: string;\n\n /**\n * The color palette of the trigger button.\n */\n @Prop() triggerColor: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n /**\n * The trigger button accessibility label. If not set, falls back to triggerLabel.\n */\n @Prop() triggerA11yLabel?: string;\n\n /**\n * Additional CSS class for the trigger button.\n */\n @Prop() triggerClass?: string;\n\n /**\n * Test ID for the trigger button.\n */\n @Prop() triggerTestId?: string;\n\n /**\n * Native attributes for the trigger button.\n */\n @Prop() triggerNativeAttributes?: { [key: string]: string };\n\n /**\n * Disable the menu.\n */\n @Prop() disabled = false;\n\n /**\n * Make the dropdown match the width of the reference regardless of its\n * contents. Note that this only applies to the minimum width of the\n * dropdown. The maximum width is still limited by the viewport.\n */\n @Prop() justify = false;\n\n /**\n * Do not change the size of the dropdown to ensure it isn’t too big to fit\n * in the viewport (or more specifically, its clipping context).\n */\n @Prop() noResize = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * Whether the dropdown trigger should be initialized only before first opening.\n * Can be useful when trigger is rendered dynamically.\n */\n @Prop() delayedTriggerInit = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the trigger button is clicked.\n */\n @Event() catTriggerClick!: EventEmitter<MouseEvent>;\n\n @Listen('focusout')\n onFocusOut(): void {\n if (!this.dropdown?.isOpen) {\n return;\n }\n\n requestAnimationFrame(() => {\n if (!this.isMenuItemInFocus()) {\n this.dropdown?.close(false);\n }\n });\n }\n\n private getDeepActiveElement(): Element | null {\n let active = document.activeElement;\n while (active?.shadowRoot?.activeElement && active.nodeName !== 'CAT-MENU-ITEM') {\n active = active.shadowRoot.activeElement;\n }\n return active;\n }\n\n @Listen('keydown', { target: 'document' })\n onDocumentKeydown(event: KeyboardEvent): void {\n const navigationKeys =\n this.arrowNavigation === 'horizontal'\n ? ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n : ['ArrowDown', 'ArrowUp', 'Home', 'End'];\n\n if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {\n return;\n }\n\n const targetElements = this.catMenuItems.filter(item => !item.disabled);\n if (!targetElements.length) {\n return;\n }\n const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);\n\n let targetIdx: number;\n if (event.key === 'Home') {\n targetIdx = 0;\n } else if (event.key === 'End') {\n targetIdx = targetElements.length - 1;\n } else {\n const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n const activeOff = event.key === forwardKey ? 1 : -1;\n targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n }\n\n targetElements[targetIdx].doFocus();\n event.preventDefault();\n }\n\n componentDidLoad(): void {\n this.syncMenuItems();\n this.mutationObserver = new MutationObserver(\n mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems()\n );\n this.mutationObserver?.observe(this.hostElement, {\n childList: true,\n attributes: true,\n subtree: true\n });\n }\n\n disconnectedCallback(): void {\n this.mutationObserver?.disconnect();\n }\n\n /**\n * Opens the menu.\n */\n @Method()\n async open(): Promise<void> {\n await this.dropdown?.open();\n }\n\n /**\n * Closes the menu.\n */\n @Method()\n async close(): Promise<void> {\n await this.dropdown?.close();\n }\n\n /**\n * Toggles the menu.\n */\n @Method()\n async toggle(): Promise<void> {\n await this.dropdown?.toggle();\n }\n\n private onTriggerClick = (event: CustomEvent<MouseEvent>) => {\n this.catTriggerClick.emit(event.detail);\n };\n\n private onMenuOpen = (event: CustomEvent<FocusEvent>) => {\n this.catOpen.emit(event.detail);\n // Set focus to first non-disabled menu item when menu opens\n requestAnimationFrame(() => {\n if (!this.isMenuItemInFocus()) {\n const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);\n firstEnabledItem?.doFocus();\n }\n });\n };\n\n private isMenuItemInFocus(): boolean {\n const activeElement = this.getDeepActiveElement();\n const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);\n\n return !!(activeElement && isInMenu);\n }\n\n private syncMenuItems() {\n this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));\n }\n\n render() {\n return (\n <Host>\n <cat-dropdown\n ref={el => (this.dropdown = el)}\n focusTrap={false}\n placement={this.placement}\n justify={this.justify}\n arrowNavigation=\"none\"\n noResize={this.noResize}\n overflow={this.overflow}\n delayedTriggerInit={this.delayedTriggerInit}\n onCatOpen={this.onMenuOpen}\n onCatClose={() => this.catClose.emit()}\n >\n <cat-button\n slot=\"trigger\"\n part=\"trigger\"\n variant={this.triggerVariant}\n size={this.triggerSize}\n icon={this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined)}\n iconOnly={this.triggerIconOnly ?? this.triggerLabel === undefined}\n color={this.triggerColor}\n a11yLabel={this.triggerA11yLabel ?? this.triggerLabel}\n class={this.triggerClass}\n testId={this.triggerTestId}\n nativeAttributes={{\n ...this.triggerNativeAttributes,\n 'aria-haspopup': 'menu'\n }}\n disabled={this.disabled}\n onCatClick={this.onTriggerClick}\n >\n {!this.triggerIconOnly && <slot name=\"trigger-label\">{this.triggerLabel}</slot>}\n </cat-button>\n <nav role=\"menu\" slot=\"content\" class=\"cat-menu-list\" aria-orientation={this.arrowNavigation}>\n <ul>\n <slot></slot>\n </ul>\n </nav>\n </cat-dropdown>\n </Host>\n );\n }\n}\n"]}
@@ -0,0 +1,387 @@
1
+ import { h, Host } from "@stencil/core";
2
+ let nextUniqueId = 0;
3
+ /**
4
+ * A menu item component that renders as a button with proper ARIA semantics.
5
+ */
6
+ export class CatMenuItem {
7
+ constructor() {
8
+ this._id = `cat-menu-item-${++nextUniqueId}`;
9
+ /**
10
+ * Whether the menu item is active.
11
+ */
12
+ this.active = false;
13
+ /**
14
+ * The variant of the menu item button.
15
+ */
16
+ this.variant = 'text';
17
+ /**
18
+ * Hide the actual button content and only display the icon.
19
+ */
20
+ this.iconOnly = false;
21
+ /**
22
+ * Display the icon on the right.
23
+ */
24
+ this.iconRight = false;
25
+ /**
26
+ * Specifies that the menu item should be disabled.
27
+ */
28
+ this.disabled = false;
29
+ }
30
+ get id() {
31
+ return this.identifier || this._id;
32
+ }
33
+ /**
34
+ * Programmatically move focus to the menu item.
35
+ */
36
+ async doFocus(options) {
37
+ this.button?.doFocus(options);
38
+ }
39
+ /**
40
+ * Programmatically remove focus from the menu item.
41
+ */
42
+ async doBlur() {
43
+ this.button?.doBlur();
44
+ }
45
+ render() {
46
+ return (h(Host, { key: '69db1c5c6d91ea31103639a5fe3cbb96da32aa40' }, h("li", { key: '88569a9541369cf5dbc7f79b562ef5b68c9905a3' }, h("cat-button", { key: '65b6e6c3ca873a07204f36b3cae69dfffbc51a0b', ref: el => (this.button = el), class: "cat-nav-item", buttonId: this.id, part: "menu-item", variant: this.variant, icon: this.icon, iconOnly: this.iconOnly, iconRight: this.iconRight, url: this.url, disabled: this.disabled, urlTarget: this.urlTarget, loading: this.loading, color: this.color, active: this.active, testId: this.testId, nativeAttributes: {
47
+ ...this.nativeAttributes,
48
+ role: 'menuitem',
49
+ tabindex: '-1'
50
+ }, onCatClick: this.onCatClick }, h("slot", { key: 'c8036dabc3f0cb762d96bee7797ac50f871ac44d' })))));
51
+ }
52
+ onCatClick(event) {
53
+ this.catClick.emit(event.detail);
54
+ }
55
+ static get is() { return "cat-menu-item"; }
56
+ static get encapsulation() { return "shadow"; }
57
+ static get properties() {
58
+ return {
59
+ "identifier": {
60
+ "type": "string",
61
+ "mutable": false,
62
+ "complexType": {
63
+ "original": "string",
64
+ "resolved": "string | undefined",
65
+ "references": {}
66
+ },
67
+ "required": false,
68
+ "optional": true,
69
+ "docs": {
70
+ "tags": [],
71
+ "text": "A unique identifier for the menu item."
72
+ },
73
+ "getter": false,
74
+ "setter": false,
75
+ "reflect": false,
76
+ "attribute": "identifier"
77
+ },
78
+ "icon": {
79
+ "type": "string",
80
+ "mutable": false,
81
+ "complexType": {
82
+ "original": "string",
83
+ "resolved": "string | undefined",
84
+ "references": {}
85
+ },
86
+ "required": false,
87
+ "optional": true,
88
+ "docs": {
89
+ "tags": [],
90
+ "text": "The name of an icon to be displayed in the menu item."
91
+ },
92
+ "getter": false,
93
+ "setter": false,
94
+ "reflect": false,
95
+ "attribute": "icon"
96
+ },
97
+ "color": {
98
+ "type": "string",
99
+ "mutable": false,
100
+ "complexType": {
101
+ "original": "'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info'",
102
+ "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | undefined",
103
+ "references": {}
104
+ },
105
+ "required": false,
106
+ "optional": true,
107
+ "docs": {
108
+ "tags": [],
109
+ "text": "The color of the menu item."
110
+ },
111
+ "getter": false,
112
+ "setter": false,
113
+ "reflect": false,
114
+ "attribute": "color"
115
+ },
116
+ "active": {
117
+ "type": "boolean",
118
+ "mutable": false,
119
+ "complexType": {
120
+ "original": "boolean",
121
+ "resolved": "boolean",
122
+ "references": {}
123
+ },
124
+ "required": false,
125
+ "optional": false,
126
+ "docs": {
127
+ "tags": [],
128
+ "text": "Whether the menu item is active."
129
+ },
130
+ "getter": false,
131
+ "setter": false,
132
+ "reflect": false,
133
+ "attribute": "active",
134
+ "defaultValue": "false"
135
+ },
136
+ "variant": {
137
+ "type": "string",
138
+ "mutable": false,
139
+ "complexType": {
140
+ "original": "'filled' | 'outlined' | 'text'",
141
+ "resolved": "\"filled\" | \"outlined\" | \"text\"",
142
+ "references": {}
143
+ },
144
+ "required": false,
145
+ "optional": false,
146
+ "docs": {
147
+ "tags": [],
148
+ "text": "The variant of the menu item button."
149
+ },
150
+ "getter": false,
151
+ "setter": false,
152
+ "reflect": false,
153
+ "attribute": "variant",
154
+ "defaultValue": "'text'"
155
+ },
156
+ "loading": {
157
+ "type": "boolean",
158
+ "mutable": false,
159
+ "complexType": {
160
+ "original": "boolean",
161
+ "resolved": "boolean | undefined",
162
+ "references": {}
163
+ },
164
+ "required": false,
165
+ "optional": true,
166
+ "docs": {
167
+ "tags": [],
168
+ "text": "The loading state of the menu item."
169
+ },
170
+ "getter": false,
171
+ "setter": false,
172
+ "reflect": false,
173
+ "attribute": "loading"
174
+ },
175
+ "iconOnly": {
176
+ "type": "any",
177
+ "mutable": false,
178
+ "complexType": {
179
+ "original": "boolean | Breakpoint",
180
+ "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\" | boolean",
181
+ "references": {
182
+ "Breakpoint": {
183
+ "location": "import",
184
+ "path": "../../utils/breakpoints",
185
+ "id": "src/utils/breakpoints.ts::Breakpoint"
186
+ }
187
+ }
188
+ },
189
+ "required": false,
190
+ "optional": false,
191
+ "docs": {
192
+ "tags": [],
193
+ "text": "Hide the actual button content and only display the icon."
194
+ },
195
+ "getter": false,
196
+ "setter": false,
197
+ "reflect": false,
198
+ "attribute": "icon-only",
199
+ "defaultValue": "false"
200
+ },
201
+ "iconRight": {
202
+ "type": "boolean",
203
+ "mutable": false,
204
+ "complexType": {
205
+ "original": "boolean",
206
+ "resolved": "boolean",
207
+ "references": {}
208
+ },
209
+ "required": false,
210
+ "optional": false,
211
+ "docs": {
212
+ "tags": [],
213
+ "text": "Display the icon on the right."
214
+ },
215
+ "getter": false,
216
+ "setter": false,
217
+ "reflect": false,
218
+ "attribute": "icon-right",
219
+ "defaultValue": "false"
220
+ },
221
+ "url": {
222
+ "type": "string",
223
+ "mutable": false,
224
+ "complexType": {
225
+ "original": "string",
226
+ "resolved": "string | undefined",
227
+ "references": {}
228
+ },
229
+ "required": false,
230
+ "optional": true,
231
+ "docs": {
232
+ "tags": [],
233
+ "text": "A destination to link to, rendered in the href attribute of a link."
234
+ },
235
+ "getter": false,
236
+ "setter": false,
237
+ "reflect": false,
238
+ "attribute": "url"
239
+ },
240
+ "urlTarget": {
241
+ "type": "string",
242
+ "mutable": false,
243
+ "complexType": {
244
+ "original": "'_blank' | '_self'",
245
+ "resolved": "\"_blank\" | \"_self\" | undefined",
246
+ "references": {}
247
+ },
248
+ "required": false,
249
+ "optional": true,
250
+ "docs": {
251
+ "tags": [],
252
+ "text": "Specifies where to open the linked document."
253
+ },
254
+ "getter": false,
255
+ "setter": false,
256
+ "reflect": false,
257
+ "attribute": "url-target"
258
+ },
259
+ "disabled": {
260
+ "type": "boolean",
261
+ "mutable": false,
262
+ "complexType": {
263
+ "original": "boolean",
264
+ "resolved": "boolean",
265
+ "references": {}
266
+ },
267
+ "required": false,
268
+ "optional": false,
269
+ "docs": {
270
+ "tags": [],
271
+ "text": "Specifies that the menu item should be disabled."
272
+ },
273
+ "getter": false,
274
+ "setter": false,
275
+ "reflect": false,
276
+ "attribute": "disabled",
277
+ "defaultValue": "false"
278
+ },
279
+ "nativeAttributes": {
280
+ "type": "unknown",
281
+ "mutable": false,
282
+ "complexType": {
283
+ "original": "{ [key: string]: string }",
284
+ "resolved": "undefined | { [key: string]: string; }",
285
+ "references": {}
286
+ },
287
+ "required": false,
288
+ "optional": true,
289
+ "docs": {
290
+ "tags": [],
291
+ "text": "Attributes that will be added to the native HTML button element"
292
+ },
293
+ "getter": false,
294
+ "setter": false
295
+ },
296
+ "testId": {
297
+ "type": "string",
298
+ "mutable": false,
299
+ "complexType": {
300
+ "original": "string",
301
+ "resolved": "string | undefined",
302
+ "references": {}
303
+ },
304
+ "required": false,
305
+ "optional": true,
306
+ "docs": {
307
+ "tags": [],
308
+ "text": "A unique identifier for the underlying native element that is used for\ntesting purposes. The attribute is added as `data-test` attribute and acts\nas a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`."
309
+ },
310
+ "getter": false,
311
+ "setter": false,
312
+ "reflect": false,
313
+ "attribute": "test-id"
314
+ }
315
+ };
316
+ }
317
+ static get events() {
318
+ return [{
319
+ "method": "catClick",
320
+ "name": "catClick",
321
+ "bubbles": true,
322
+ "cancelable": true,
323
+ "composed": true,
324
+ "docs": {
325
+ "tags": [],
326
+ "text": "Emitted when the trigger button is clicked."
327
+ },
328
+ "complexType": {
329
+ "original": "MouseEvent",
330
+ "resolved": "MouseEvent",
331
+ "references": {
332
+ "MouseEvent": {
333
+ "location": "global",
334
+ "id": "global::MouseEvent"
335
+ }
336
+ }
337
+ }
338
+ }];
339
+ }
340
+ static get methods() {
341
+ return {
342
+ "doFocus": {
343
+ "complexType": {
344
+ "signature": "(options?: FocusOptions) => Promise<void>",
345
+ "parameters": [{
346
+ "name": "options",
347
+ "type": "FocusOptions | undefined",
348
+ "docs": ""
349
+ }],
350
+ "references": {
351
+ "Promise": {
352
+ "location": "global",
353
+ "id": "global::Promise"
354
+ },
355
+ "FocusOptions": {
356
+ "location": "global",
357
+ "id": "global::FocusOptions"
358
+ }
359
+ },
360
+ "return": "Promise<void>"
361
+ },
362
+ "docs": {
363
+ "text": "Programmatically move focus to the menu item.",
364
+ "tags": []
365
+ }
366
+ },
367
+ "doBlur": {
368
+ "complexType": {
369
+ "signature": "() => Promise<void>",
370
+ "parameters": [],
371
+ "references": {
372
+ "Promise": {
373
+ "location": "global",
374
+ "id": "global::Promise"
375
+ }
376
+ },
377
+ "return": "Promise<void>"
378
+ },
379
+ "docs": {
380
+ "text": "Programmatically remove focus from the menu item.",
381
+ "tags": []
382
+ }
383
+ }
384
+ };
385
+ }
386
+ }
387
+ //# sourceMappingURL=cat-menu-item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cat-menu-item.js","sourceRoot":"","sources":["../../../src/components/cat-menu-item/cat-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAGtF,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAKH,MAAM,OAAO,WAAW;IAJxB;QAKmB,QAAG,GAAG,iBAAiB,EAAE,YAAY,EAAE,CAAC;QAoBzD;;WAEG;QACK,WAAM,GAAG,KAAK,CAAC;QAEvB;;WAEG;QACK,YAAO,GAAmC,MAAM,CAAC;QAOzD;;WAEG;QACK,aAAQ,GAAyB,KAAK,CAAC;QAE/C;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;QAY1B;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;KAwE1B;IAjIC,IAAY,EAAE;QACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;IACrC,CAAC;IA0ED;;OAEG;IAEH,KAAK,CAAC,OAAO,CAAC,OAAsB;QAClC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,mEACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC7B,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,gBAAgB,EAAE;wBAChB,GAAG,IAAI,CAAC,gBAAgB;wBACxB,IAAI,EAAE,UAAU;wBAChB,QAAQ,EAAE,IAAI;qBACf,EACD,UAAU,EAAE,IAAI,CAAC,UAAU;oBAE3B,8DAAa,CACF,CACV,CACA,CACR,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,KAA8B;QAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Method, Event, EventEmitter } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A menu item component that renders as a button with proper ARIA semantics.\n */\n@Component({\n tag: 'cat-menu-item',\n shadow: true\n})\nexport class CatMenuItem {\n private readonly _id = `cat-menu-item-${++nextUniqueId}`;\n private get id() {\n return this.identifier || this._id;\n }\n private button?: HTMLCatButtonElement;\n\n /**\n * A unique identifier for the menu item.\n */\n @Prop() identifier?: string;\n /**\n * The name of an icon to be displayed in the menu item.\n */\n @Prop() icon?: string;\n\n /**\n * The color of the menu item.\n */\n @Prop() color?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info';\n\n /**\n * Whether the menu item is active.\n */\n @Prop() active = false;\n\n /**\n * The variant of the menu item button.\n */\n @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n /**\n * The loading state of the menu item.\n */\n @Prop() loading?: boolean;\n\n /**\n * Hide the actual button content and only display the icon.\n */\n @Prop() iconOnly: boolean | Breakpoint = false;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * A destination to link to, rendered in the href attribute of a link.\n */\n @Prop() url?: string;\n\n /**\n * Specifies where to open the linked document.\n */\n @Prop() urlTarget?: '_blank' | '_self';\n\n /**\n * Specifies that the menu item should be disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Attributes that will be added to the native HTML button element\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * A unique identifier for the underlying native element that is used for\n * testing purposes. The attribute is added as `data-test` attribute and acts\n * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n */\n @Prop() testId?: string;\n\n /**\n * Emitted when the trigger button is clicked.\n */\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /**\n * Programmatically move focus to the menu item.\n */\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button?.doFocus(options);\n }\n\n /**\n * Programmatically remove focus from the menu item.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.button?.doBlur();\n }\n\n render() {\n return (\n <Host>\n <li>\n <cat-button\n ref={el => (this.button = el)}\n class=\"cat-nav-item\"\n buttonId={this.id}\n part=\"menu-item\"\n variant={this.variant}\n icon={this.icon}\n iconOnly={this.iconOnly}\n iconRight={this.iconRight}\n url={this.url}\n disabled={this.disabled}\n urlTarget={this.urlTarget}\n loading={this.loading}\n color={this.color}\n active={this.active}\n testId={this.testId}\n nativeAttributes={{\n ...this.nativeAttributes,\n role: 'menuitem',\n tabindex: '-1'\n }}\n onCatClick={this.onCatClick}\n >\n <slot></slot>\n </cat-button>\n </li>\n </Host>\n );\n }\n\n private onCatClick(event: CustomEvent<MouseEvent>) {\n this.catClick.emit(event.detail);\n }\n}\n"]}
@@ -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: '92edf5d03bcf32e751e5a477280e4df4a48fe92d', role: "navigation" }, h("ol", { key: 'd3abfee45a341bd03c1f6d1e1f275f5714817539', class: {
55
+ return (h("nav", { key: 'ad282454abdbfd0fbc50097b0d635cbb933bb752', "aria-label": i18n.t('pagination.ariaLabel') }, h("ol", { key: '8007380dc28cce2c6149e7eece49ec5f5fe0965b', class: {
56
56
  [`cat-pagination-${this.size}`]: Boolean(this.size)
57
- } }, h("li", { key: '7d9a267ca412d15e869321b331729810cc09253c' }, h("cat-button", { key: 'da1fb4fca4ce3e34eb269fbbd3003baad95fe5da', 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: '14237910fe38dbc5d829b804ee5fd9613a68c783' }, h("cat-button", { key: '9e7ad815b7708ec9c1200bd923fa61be5c6e9552', 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) })))));
57
+ } }, h("li", { key: 'fc6b7bd088fdfd80480e92201912ac38502b0a82' }, h("cat-button", { key: 'eff8810da8b950897f7f161186eb129f9817f4d9', 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: 'f974b12f22475beb32fe5a314743fd0adec08133' }, h("cat-button", { key: '08ca8508120395e559da76b04b7375c1f1cead68', 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":"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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 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"]}
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"]}
@@ -75,13 +75,13 @@ export class CatRadio {
75
75
  }
76
76
  render() {
77
77
  this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
78
- return (h(Host, { key: 'd5bdfdba836cb7f6ea32ffd9befa8e21b3681f1d' }, h("label", { key: 'a4bc5f97bc1c9313fc42ed4e6ffa4f3dcdf0b5db', htmlFor: this.id, class: {
78
+ return (h(Host, { key: '0049b858f753639137fc5f1868300be789583fc5' }, h("label", { key: 'd4a67cf145780cec29e6c8148bca5b9f2e4d862f', htmlFor: this.id, class: {
79
79
  'is-hidden': this.labelHidden,
80
80
  'is-disabled': this.disabled,
81
81
  'label-left': this.labelLeft,
82
82
  'align-center': this.alignment === 'center',
83
83
  'align-end': this.alignment === 'bottom'
84
- }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '26d8bda2a2d7eb9479762cde79ddcbf4ffa66c31', class: "radio" }, h("input", { key: '93aa9f8c9c6c80032806821d4a25d211351f5ae7', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'de64c16b1b208ee39173a479961c8a9c35398891', class: "circle" })), h("span", { key: '31aee49255f90b202fa24bd7e3454faef997403d', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '42fd54752399f0f598051e3b88df68111d6e5871', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'dd8ebf787f21f0b3ec2d4b3502f5ed55ffdc1828', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '2107fc47f09c98351657658066642380848711c6', class: "circle-placeholder" }), h(CatFormHint, { key: 'ff77ec0e74627dab0b823150681c8be5a3ad9d98', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
84
+ }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'ee81c40a3fe2e10d4fc4ed1deb1f81816936a8fd', class: "radio" }, h("input", { key: 'd5c5b924ec1cffa7c7f02d8bf4faf689876802fa', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'efa28acc6827dbc2aeeae01ead830e40d5372493', class: "circle" })), h("span", { key: 'beaaf1b38e100b636e0496dda1123dff7cf93a33', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'ada26a86266f139f09353d4275b9d4b13755ad67', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'bb3fe9a5dbefc66d6a3075cefbb64deaab153f23', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '130db3e44b1102561d69538ebac20289de598183', class: "circle-placeholder" }), h(CatFormHint, { key: 'b914b9b25c658700abcc9ea932b95861f10d966d', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
85
85
  }
86
86
  get hasHint() {
87
87
  return !!this.hint || !!this.hasSlottedHint;
@@ -70,7 +70,7 @@ export class CatRadioGroup {
70
70
  }
71
71
  }
72
72
  render() {
73
- return (h("div", { key: 'bddb6ec500cf6153286300ae20bad8925d4dcfd1', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '55c9ce43491b01ee35183b3ba880f62e49a58f0f' })));
73
+ return (h("div", { key: '092e314344de49819b981fc58295c4e6985bf03e', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '10740a5816e614c5e3f046110b84728de398cdc4' })));
74
74
  }
75
75
  init() {
76
76
  this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
@@ -69,13 +69,13 @@ export class CatScrollable {
69
69
  }
70
70
  render() {
71
71
  return [
72
- h("div", { key: 'a74da54b345c5d35e790a767112256623298fb45', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: 'c1210162912c663853d3693c1d390c11cc3fce15', class: "shadow-top" }), !this.noShadowX && h("div", { key: '7926685bbacaf7338667e507455ddb91e8fa716f', class: "shadow-left" }), !this.noShadowX && h("div", { key: '2b5c384ab9ea25f4cfc03e4fa96c494d29b220a3', class: "shadow-right" }), !this.noShadowY && h("div", { key: '9beefb53981be683f2fff1e3d199a5cc79f939b6', class: "shadow-bottom" })),
73
- h("div", { key: '84440bc3d95ec0686ecc080b70ed763e5a140851', ref: el => (this.scrollElement = el), class: {
72
+ h("div", { key: '01170df73b6535997e71f3a35cce5edcc864969f', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: '26bcf225d5416926be598ada1a533119db191fb8', class: "shadow-top" }), !this.noShadowX && h("div", { key: '2809cafcf67edf778e3508907fd4500d46da185e', class: "shadow-left" }), !this.noShadowX && h("div", { key: '78d1b9d3768be4af4af9e87c04428ec59e5ffc1e', class: "shadow-right" }), !this.noShadowY && h("div", { key: '81084c2ed0a43a136d5ec46a1a2307410036cede', class: "shadow-bottom" })),
73
+ h("div", { key: '7ec4056d8752be30c4e97f75ff3aa905dd7ac96a', ref: el => (this.scrollElement = el), class: {
74
74
  'scrollable-content': true,
75
75
  'scroll-x': !this.noOverflowX,
76
76
  'scroll-y': !this.noOverflowY,
77
77
  'no-overscroll': this.noOverscroll
78
- } }, h("slot", { key: '4f001c11db1d3c8f7d23ac8187d356abe88ef190' }))
78
+ } }, h("slot", { key: '1a4d1d317fc7e92160ff21fb743db8b3edad28a5' }))
79
79
  ];
80
80
  }
81
81
  attachEmitter(from, emitter) {