@haiilo/catalyst 14.5.0 → 14.5.2
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/p-0fec1fc5.entry.js +10 -0
- package/dist/catalyst/p-0fec1fc5.entry.js.map +1 -0
- package/dist/cjs/cat-alert_32.cjs.entry.js +123 -91
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/cat-alert/cat-alert.js +1 -1
- package/dist/collection/components/cat-badge/cat-badge.js +1 -1
- package/dist/collection/components/cat-button/cat-button.css +11 -7
- package/dist/collection/components/cat-button/cat-button.js +1 -26
- package/dist/collection/components/cat-button/cat-button.js.map +1 -1
- package/dist/collection/components/cat-button-group/cat-button-group.js +1 -1
- package/dist/collection/components/cat-card/cat-card.js +1 -1
- package/dist/collection/components/cat-checkbox/cat-checkbox.js +2 -2
- package/dist/collection/components/cat-date/cat-date.js +2 -2
- package/dist/collection/components/cat-date-inline/cat-date-inline.js +4 -4
- package/dist/collection/components/cat-datepicker/cat-datepicker.js +3 -3
- package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js +2 -2
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +43 -23
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-form-group/cat-form-group.js +1 -1
- package/dist/collection/components/cat-icon/cat-icon.js +1 -1
- package/dist/collection/components/cat-menu/cat-menu.js +5 -4
- package/dist/collection/components/cat-menu/cat-menu.js.map +1 -1
- package/dist/collection/components/cat-menu-item/cat-menu-item.js +37 -4
- package/dist/collection/components/cat-menu-item/cat-menu-item.js.map +1 -1
- package/dist/components/cat-alert.js +1 -1
- package/dist/components/cat-badge.js +1 -1
- package/dist/components/cat-button-group.js +1 -1
- package/dist/components/cat-button2.js +2 -8
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-card.js +1 -1
- package/dist/components/cat-checkbox2.js +2 -2
- package/dist/components/cat-date-inline2.js +4 -4
- package/dist/components/cat-date.js +2 -2
- package/dist/components/cat-datepicker-inline.js +2 -2
- package/dist/components/cat-datepicker.js +3 -3
- package/dist/components/cat-dropdown2.js +42 -13
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-form-group.js +1 -1
- package/dist/components/cat-icon2.js +1 -1
- package/dist/components/cat-menu-item2.js +10 -5
- package/dist/components/cat-menu-item2.js.map +1 -1
- package/dist/components/cat-menu2.js +5 -5
- package/dist/components/cat-menu2.js.map +1 -1
- package/dist/components/floating-ui.dom.js +49 -45
- package/dist/components/floating-ui.dom.js.map +1 -1
- package/dist/esm/cat-alert_32.entry.js +123 -91
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-button/cat-button.d.ts +0 -4
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +12 -2
- package/dist/types/components/cat-menu-item/cat-menu-item.d.ts +3 -1
- package/dist/types/components.d.ts +10 -14
- package/package.json +2 -4
- package/dist/catalyst/p-fb92a2f1.entry.js +0 -10
- package/dist/catalyst/p-fb92a2f1.entry.js.map +0 -1
|
@@ -59,7 +59,7 @@ export class CatDropdown {
|
|
|
59
59
|
this.noInitialFocus = false;
|
|
60
60
|
/**
|
|
61
61
|
* Trigger element will not receive focus when dropdown is closed.
|
|
62
|
-
*
|
|
62
|
+
* Please use this property carefully, consider using cat-menu over using this property
|
|
63
63
|
*/
|
|
64
64
|
this.noReturnFocus = false;
|
|
65
65
|
/**
|
|
@@ -73,6 +73,9 @@ export class CatDropdown {
|
|
|
73
73
|
* @internal
|
|
74
74
|
*/
|
|
75
75
|
this.focusTrap = true;
|
|
76
|
+
this.boundWindowClickListener = this.windowClickListener.bind(this);
|
|
77
|
+
this.boundWindowMousedownListener = this.windowMousedownListener.bind(this);
|
|
78
|
+
this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
|
|
76
79
|
}
|
|
77
80
|
/**
|
|
78
81
|
* Whether the dropdown is open.
|
|
@@ -94,6 +97,7 @@ export class CatDropdown {
|
|
|
94
97
|
path.includes(this.content) &&
|
|
95
98
|
// check if click was not on a trigger for a sub-dropdown
|
|
96
99
|
event.target?.slot !== 'trigger' &&
|
|
100
|
+
!event.target.subMenu &&
|
|
97
101
|
// check if click was not an element marked with data-dropdown-no-close
|
|
98
102
|
!path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
|
|
99
103
|
this.close();
|
|
@@ -104,15 +108,14 @@ export class CatDropdown {
|
|
|
104
108
|
this.close();
|
|
105
109
|
}
|
|
106
110
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
111
|
+
windowClickListener(event) {
|
|
112
|
+
this.handleClickOutside(event);
|
|
113
|
+
}
|
|
114
|
+
windowMousedownListener(event) {
|
|
115
|
+
this.handleClickOutside(event);
|
|
116
|
+
}
|
|
117
|
+
windowTouchStartListener(event) {
|
|
118
|
+
this.handleClickOutside(event);
|
|
116
119
|
}
|
|
117
120
|
/**
|
|
118
121
|
* Toggles the dropdown.
|
|
@@ -149,8 +152,10 @@ export class CatDropdown {
|
|
|
149
152
|
: focusTrap.createFocusTrap(this.content, {
|
|
150
153
|
tabbableOptions: this.tabbableOptions,
|
|
151
154
|
allowOutsideClick: true,
|
|
155
|
+
clickOutsideDeactivates: event => this.shouldCloseByClickEvent(event),
|
|
156
|
+
onPostDeactivate: () => this.close(),
|
|
152
157
|
onPostActivate: () => this.catOpen.emit(),
|
|
153
|
-
setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),
|
|
158
|
+
setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),
|
|
154
159
|
isKeyForward: event => {
|
|
155
160
|
if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
|
|
156
161
|
(this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
|
|
@@ -174,6 +179,7 @@ export class CatDropdown {
|
|
|
174
179
|
this.trap.activate();
|
|
175
180
|
}
|
|
176
181
|
else {
|
|
182
|
+
this.addListeners();
|
|
177
183
|
this.catOpen.emit();
|
|
178
184
|
}
|
|
179
185
|
});
|
|
@@ -192,6 +198,7 @@ export class CatDropdown {
|
|
|
192
198
|
if (shouldReturnFocus) {
|
|
193
199
|
this.trigger?.focus();
|
|
194
200
|
}
|
|
201
|
+
this.removeListeners();
|
|
195
202
|
// give CSS transition time to apply
|
|
196
203
|
setTimeout(() => {
|
|
197
204
|
this._isOpen = false;
|
|
@@ -216,7 +223,29 @@ export class CatDropdown {
|
|
|
216
223
|
this.cleanupFloatingUi = undefined;
|
|
217
224
|
}
|
|
218
225
|
render() {
|
|
219
|
-
return (h(Host, { key: '
|
|
226
|
+
return (h(Host, { key: 'bd6c2271fbd5a3f9222cb9eb8c59d7113dc72c7a' }, h("slot", { key: '26b1d2b753fffa0f91c8ee505209c46880e9233b', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'ac3b213022083bdb89edf4583cc216a5308bb1d2', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: 'c4849c420a3e248bc7192db3a059e3372b7612fb', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '1bbcaa8a86c2726e61aff6236e01b3f4ac6004e9', name: "content" }))));
|
|
227
|
+
}
|
|
228
|
+
addListeners() {
|
|
229
|
+
window.addEventListener('click', this.boundWindowClickListener);
|
|
230
|
+
window.addEventListener('mousedown', this.boundWindowMousedownListener);
|
|
231
|
+
window.addEventListener('touchstart', this.boundWindowTouchStartListener);
|
|
232
|
+
}
|
|
233
|
+
removeListeners() {
|
|
234
|
+
window.removeEventListener('click', this.boundWindowClickListener);
|
|
235
|
+
window.removeEventListener('mousedown', this.boundWindowMousedownListener);
|
|
236
|
+
window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
|
|
237
|
+
}
|
|
238
|
+
handleClickOutside(event) {
|
|
239
|
+
if (this.shouldCloseByClickEvent(event)) {
|
|
240
|
+
this.close();
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
shouldCloseByClickEvent(event) {
|
|
244
|
+
return (!this.noAutoClose &&
|
|
245
|
+
// check if click was outside of the dropdown content
|
|
246
|
+
!event.composedPath().includes(this.content) &&
|
|
247
|
+
// check if click was not on an element marked with data-dropdown-no-close
|
|
248
|
+
!event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
|
|
220
249
|
}
|
|
221
250
|
get contentId() {
|
|
222
251
|
return `cat-dropdown-${this.id}`;
|
|
@@ -518,11 +547,8 @@ export class CatDropdown {
|
|
|
518
547
|
"required": false,
|
|
519
548
|
"optional": false,
|
|
520
549
|
"docs": {
|
|
521
|
-
"tags": [
|
|
522
|
-
|
|
523
|
-
"text": "the property can be removed, focus is arranged internally"
|
|
524
|
-
}],
|
|
525
|
-
"text": "Trigger element will not receive focus when dropdown is closed."
|
|
550
|
+
"tags": [],
|
|
551
|
+
"text": "Trigger element will not receive focus when dropdown is closed.\nPlease use this property carefully, consider using cat-menu over using this property"
|
|
526
552
|
},
|
|
527
553
|
"getter": false,
|
|
528
554
|
"setter": false,
|
|
@@ -697,12 +723,6 @@ export class CatDropdown {
|
|
|
697
723
|
"target": undefined,
|
|
698
724
|
"capture": false,
|
|
699
725
|
"passive": false
|
|
700
|
-
}, {
|
|
701
|
-
"name": "click",
|
|
702
|
-
"method": "globalClickHandler",
|
|
703
|
-
"target": "window",
|
|
704
|
-
"capture": false,
|
|
705
|
-
"passive": false
|
|
706
726
|
}];
|
|
707
727
|
}
|
|
708
728
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\n\nlet nextUniqueId = 0;\nexport type DropdownPlacement = Placement;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private _isOpen: boolean | null = false;\n private cleanupFloatingUi?: () => void;\n private readonly tabbableOptions = { getShadowRoot: true };\n /**\n * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n * Currently we set it only when the origin is keyboard.\n * We might not need to track this in future when focus-visible support is improved across browsers\n */\n private isFocusVisible = false;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\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 close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Do not navigate focus inside the dropdown via vertical arrow keys.\n * @deprecated use cat-menu\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\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 * No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n * @deprecated\n * Using noInitialFocus property would be a bad practice from a11y perspective.\n * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n * hasInitialFocus should resolve the cause of the original problem instead.\n */\n @Prop() noInitialFocus = false;\n\n /**\n * Whether the dropdown is open.\n * @readonly\n */\n @Prop() get isOpen(): boolean {\n return this._isOpen ?? false;\n }\n\n /**\n * Trigger element will not receive focus when dropdown is closed.\n * @deprecated the property can be removed, focus is arranged internally\n */\n @Prop() noReturnFocus = 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 * Whether the focus should be trapped inside dropdown popup.\n * Use it only when the dropdown popup content has role dialog.\n * @internal\n */\n @Prop() focusTrap = true;\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 @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n if (!this.trigger && this.delayedTriggerInit) {\n this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n if (this.isOpen && event.key === 'Escape') {\n this.close();\n }\n }\n\n @Listen('click', { target: 'window' })\n globalClickHandler(event: MouseEvent) {\n if (\n this.isOpen &&\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n /**\n * Toggles the dropdown.\n */\n @Method()\n async toggle(): Promise<void> {\n this._isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n */\n @Method()\n async open(isFocusVisible?: boolean): Promise<void> {\n if (!this.trigger && this.delayedTriggerInit) {\n this.initTrigger();\n }\n\n if (this.isOpen === null || this.isOpen) {\n return; // busy or open\n }\n\n this._isOpen = null;\n this.content.style.display = 'block';\n this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;\n\n const trigger = this.anchor || this.trigger;\n if (trigger) {\n this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));\n }\n // give CSS transition time to apply\n requestAnimationFrame(() => {\n this._isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n\n if (this.focusTrap) {\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: this.tabbableOptions,\n allowOutsideClick: true,\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => {\n return this.isFocusVisible ? undefined : false;\n }\n });\n this.trap.activate();\n } else {\n this.catOpen.emit();\n }\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(shouldReturnFocus = this.isFocusVisible): Promise<void> {\n if (!this._isOpen) {\n return; // busy or closed\n }\n\n this._isOpen = null;\n this.trap?.deactivate();\n this.trap = undefined;\n this.content.classList.remove('show');\n if (shouldReturnFocus) {\n this.trigger?.focus();\n }\n // give CSS transition time to apply\n setTimeout(() => {\n this._isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad() {\n this.initAnchor();\n if (!this.delayedTriggerInit) {\n this.initTrigger();\n }\n }\n\n disconnectedCallback() {\n this.trap?.deactivate();\n this.trap = undefined;\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', (event: Event) => {\n this.isFocusVisible = this.isEventOriginFromKeyboard(event as UIEvent);\n this.toggle();\n });\n }\n\n private isEventOriginFromKeyboard(event: UIEvent): boolean {\n return event.detail === 0;\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n let elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : (elem?.querySelector('[data-trigger]') ?? undefined);\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n // which stencil assigns to component in prehydration state\n if (!trigger) {\n elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n }\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ rects, availableWidth, availableHeight, elements }) {\n if (justify) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxWidth: `${rects.reference.width}px`,\n maxHeight: `${availableHeight}px`\n });\n } else {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n }\n })\n ];\n const middleware = [offset(CatDropdown.OFFSET)];\n const flipMiddleware = flip({\n // Ensure we flip to the perpendicular axis if it doesn't fit\n // on narrow viewports.\n crossAxis: 'alignment',\n fallbackAxisSideDirection: 'end'\n });\n const shiftMiddleware = shift();\n\n // Prioritize flip over shift for edge-aligned placements only.\n if (this.placement.includes('-')) {\n middleware.push(flipMiddleware, shiftMiddleware);\n } else {\n middleware.push(shiftMiddleware, flipMiddleware);\n }\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [...middleware, ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\nimport { CatMenuItem } from '../cat-menu-item/cat-menu-item';\n\nlet nextUniqueId = 0;\nexport type DropdownPlacement = Placement;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private anchorSlot!: HTMLSlotElement;\n private anchor?: Element;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private _isOpen: boolean | null = false;\n private cleanupFloatingUi?: () => void;\n private readonly tabbableOptions = { getShadowRoot: true };\n /**\n * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n * Currently we set it only when the origin is keyboard.\n * We might not need to track this in future when focus-visible support is improved across browsers\n */\n private isFocusVisible = false;\n\n private readonly boundWindowClickListener: (event: MouseEvent) => void;\n private readonly boundWindowMousedownListener: (event: MouseEvent) => void;\n private readonly boundWindowTouchStartListener: (event: TouchEvent) => void;\n\n constructor() {\n this.boundWindowClickListener = this.windowClickListener.bind(this);\n this.boundWindowMousedownListener = this.windowMousedownListener.bind(this);\n this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n }\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\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 close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Do not navigate focus inside the dropdown via vertical arrow keys.\n * @deprecated use cat-menu\n */\n @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\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 * No element in dropdown will receive focus when dropdown is open.\n * By default, the first element in tab order will receive a focus.\n * @deprecated\n * Using noInitialFocus property would be a bad practice from a11y perspective.\n * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n * hasInitialFocus should resolve the cause of the original problem instead.\n */\n @Prop() noInitialFocus = false;\n\n /**\n * Whether the dropdown is open.\n * @readonly\n */\n @Prop() get isOpen(): boolean {\n return this._isOpen ?? false;\n }\n\n /**\n * Trigger element will not receive focus when dropdown is closed.\n * Please use this property carefully, consider using cat-menu over using this property\n */\n @Prop() noReturnFocus = 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 * Whether the focus should be trapped inside dropdown popup.\n * Use it only when the dropdown popup content has role dialog.\n * @internal\n */\n @Prop() focusTrap = true;\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 @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n if (!this.trigger && this.delayedTriggerInit) {\n this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);\n this.initTrigger();\n this.toggle();\n }\n\n // hide dropdown on button clicks inside the dropdown content\n const path = event.composedPath();\n if (\n !this.noAutoClose &&\n // check if click was inside of the dropdown content\n path.includes(this.content) &&\n // check if click was not on a trigger for a sub-dropdown\n (event.target as Element)?.slot !== 'trigger' &&\n !(event.target as unknown as CatMenuItem).subMenu &&\n // check if click was not an element marked with data-dropdown-no-close\n !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n ) {\n this.close();\n }\n }\n\n @Listen('keydown')\n keydownHandler(event: KeyboardEvent) {\n if (this.isOpen && event.key === 'Escape') {\n this.close();\n }\n }\n\n private windowClickListener(event: MouseEvent) {\n this.handleClickOutside(event);\n }\n\n private windowMousedownListener(event: MouseEvent) {\n this.handleClickOutside(event);\n }\n\n private windowTouchStartListener(event: TouchEvent) {\n this.handleClickOutside(event);\n }\n\n /**\n * Toggles the dropdown.\n */\n @Method()\n async toggle(): Promise<void> {\n this._isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n */\n @Method()\n async open(isFocusVisible?: boolean): Promise<void> {\n if (!this.trigger && this.delayedTriggerInit) {\n this.initTrigger();\n }\n\n if (this.isOpen === null || this.isOpen) {\n return; // busy or open\n }\n\n this._isOpen = null;\n this.content.style.display = 'block';\n this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;\n\n const trigger = this.anchor || this.trigger;\n if (trigger) {\n this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));\n }\n // give CSS transition time to apply\n requestAnimationFrame(() => {\n this._isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n\n if (this.focusTrap) {\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: this.tabbableOptions,\n allowOutsideClick: true,\n clickOutsideDeactivates: event => this.shouldCloseByClickEvent(event),\n onPostDeactivate: () => this.close(),\n onPostActivate: () => this.catOpen.emit(),\n setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),\n isKeyForward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab';\n },\n isKeyBackward: event => {\n if (\n (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n ) {\n event.preventDefault();\n return true;\n }\n return event.key === 'Tab' && event.shiftKey;\n },\n initialFocus: () => {\n return this.isFocusVisible ? undefined : false;\n }\n });\n this.trap.activate();\n } else {\n this.addListeners();\n this.catOpen.emit();\n }\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(shouldReturnFocus = this.isFocusVisible): Promise<void> {\n if (!this._isOpen) {\n return; // busy or closed\n }\n\n this._isOpen = null;\n this.trap?.deactivate();\n this.trap = undefined;\n this.content.classList.remove('show');\n if (shouldReturnFocus) {\n this.trigger?.focus();\n }\n this.removeListeners();\n // give CSS transition time to apply\n setTimeout(() => {\n this._isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad() {\n this.initAnchor();\n if (!this.delayedTriggerInit) {\n this.initTrigger();\n }\n }\n\n disconnectedCallback() {\n this.trap?.deactivate();\n this.trap = undefined;\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private addListeners() {\n window.addEventListener('click', this.boundWindowClickListener);\n window.addEventListener('mousedown', this.boundWindowMousedownListener);\n window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n }\n\n private removeListeners() {\n window.removeEventListener('click', this.boundWindowClickListener);\n window.removeEventListener('mousedown', this.boundWindowMousedownListener);\n window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n }\n\n private handleClickOutside(event: MouseEvent | TouchEvent): void {\n if (this.shouldCloseByClickEvent(event)) {\n this.close();\n }\n }\n\n private shouldCloseByClickEvent(event: MouseEvent | TouchEvent): boolean {\n return (\n !this.noAutoClose &&\n // check if click was outside of the dropdown content\n !event.composedPath().includes(this.content) &&\n // check if click was not on an element marked with data-dropdown-no-close\n !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', (event: Event) => {\n this.isFocusVisible = this.isEventOriginFromKeyboard(event as UIEvent);\n this.toggle();\n });\n }\n\n private isEventOriginFromKeyboard(event: UIEvent): boolean {\n return event.detail === 0;\n }\n\n private initAnchor() {\n this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n let elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : (elem?.querySelector('[data-trigger]') ?? undefined);\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n // which stencil assigns to component in prehydration state\n if (!trigger) {\n elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n }\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n if (anchorElement) {\n const resize = this.noResize\n ? []\n : [\n size({\n padding: CatDropdown.OFFSET,\n apply({ rects, availableWidth, availableHeight, elements }) {\n if (justify) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxWidth: `${rects.reference.width}px`,\n maxHeight: `${availableHeight}px`\n });\n } else {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n }\n })\n ];\n const middleware = [offset(CatDropdown.OFFSET)];\n const flipMiddleware = flip({\n // Ensure we flip to the perpendicular axis if it doesn't fit\n // on narrow viewports.\n crossAxis: 'alignment',\n fallbackAxisSideDirection: 'end'\n });\n const shiftMiddleware = shift();\n\n // Prioritize flip over shift for edge-aligned placements only.\n if (this.placement.includes('-')) {\n middleware.push(flipMiddleware, shiftMiddleware);\n } else {\n middleware.push(shiftMiddleware, flipMiddleware);\n }\n computePosition(anchorElement, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [...middleware, ...resize]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n\n private hasAttribute(elem: EventTarget, attr: string) {\n return elem instanceof HTMLElement && elem.hasAttribute(attr);\n }\n}\n"]}
|
|
@@ -28,7 +28,7 @@ export class CatFormGroup {
|
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: 'cb3ed29df264b00c7740a97558ef5283a018c0c4', style: { '--label-size': this.labelSize } }, h("slot", { key: 'da29f356a770a8c5abc99719353e76ea565bf483', onSlotchange: this.onSlotChange.bind(this) })));
|
|
32
32
|
}
|
|
33
33
|
onSlotChange() {
|
|
34
34
|
this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker, cat-date, cat-time'));
|
|
@@ -14,7 +14,7 @@ export class CatIcon {
|
|
|
14
14
|
this.size = 'm';
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h("span", { key: '
|
|
17
|
+
return (h("span", { key: '7d03b1a8d0443200d1daf1a77c14ed4d75a2f74e', innerHTML: this.iconSrc || (this.icon ? icons.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
|
|
18
18
|
icon: true,
|
|
19
19
|
[`icon-${this.size}`]: this.size !== 'inline'
|
|
20
20
|
} }));
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
|
+
import { findClosest } from "../../utils/find-closest";
|
|
2
3
|
/**
|
|
3
4
|
* A menu component that provides a dropdown with a built-in configurable trigger button
|
|
4
5
|
* and proper ARIA semantics and keyboard navigation for menu items.
|
|
@@ -79,10 +80,10 @@ export class CatMenu {
|
|
|
79
80
|
}
|
|
80
81
|
getDeepActiveElement() {
|
|
81
82
|
let active = document.activeElement;
|
|
82
|
-
while (active?.shadowRoot?.activeElement
|
|
83
|
+
while (active?.shadowRoot?.activeElement) {
|
|
83
84
|
active = active.shadowRoot.activeElement;
|
|
84
85
|
}
|
|
85
|
-
return active;
|
|
86
|
+
return active ? (findClosest('cat-menu-item', active) ?? active) : null;
|
|
86
87
|
}
|
|
87
88
|
onDocumentKeydown(event) {
|
|
88
89
|
const navigationKeys = this.arrowNavigation === 'horizontal'
|
|
@@ -150,10 +151,10 @@ export class CatMenu {
|
|
|
150
151
|
this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
|
|
151
152
|
}
|
|
152
153
|
render() {
|
|
153
|
-
return (h(Host, { key: '
|
|
154
|
+
return (h(Host, { key: '477d279400f05909efb6d3893ad3832383b0b1f1' }, h("cat-dropdown", { key: '39b1b867490e2f7f9a9f45bdf247785102e2fc73', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, h("cat-button", { key: '13c95fc31610cfe5eff4bd6ce9cad055c77ef454', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
|
|
154
155
|
...this.triggerNativeAttributes,
|
|
155
156
|
'aria-haspopup': 'menu'
|
|
156
|
-
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: '
|
|
157
|
+
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: 'f688c20ef06f986a2fec549e524a9293e40bb362', name: "trigger-label" }, this.triggerLabel)), h("nav", { key: 'f257a0cc30a58b63f6cc073a24fe56018d029ed8', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, h("ul", { key: '127a61cbf0958eb7bd6f7edcb4bec923e0f9491c' }, h("slot", { key: 'ec19aade8956369dc02f7f7aa08401955ed3b358' }))))));
|
|
157
158
|
}
|
|
158
159
|
static get is() { return "cat-menu"; }
|
|
159
160
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +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"]}
|
|
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';\nimport { findClosest } from '../../utils/find-closest';\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: Element | null = document.activeElement;\n while (active?.shadowRoot?.activeElement) {\n active = active.shadowRoot.activeElement;\n }\n return active ? (findClosest('cat-menu-item', active) ?? active) : null;\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"]}
|
|
@@ -26,10 +26,14 @@ export class CatMenuItem {
|
|
|
26
26
|
* Specifies that the menu item should be disabled.
|
|
27
27
|
*/
|
|
28
28
|
this.disabled = false;
|
|
29
|
+
this.subMenu = false;
|
|
29
30
|
}
|
|
30
31
|
get id() {
|
|
31
32
|
return this.identifier || this._id;
|
|
32
33
|
}
|
|
34
|
+
onClick(event) {
|
|
35
|
+
this.catClick.emit(event);
|
|
36
|
+
}
|
|
33
37
|
/**
|
|
34
38
|
* Programmatically move focus to the menu item.
|
|
35
39
|
*/
|
|
@@ -43,14 +47,14 @@ export class CatMenuItem {
|
|
|
43
47
|
this.button?.doBlur();
|
|
44
48
|
}
|
|
45
49
|
render() {
|
|
46
|
-
return (h(Host, { key: '
|
|
50
|
+
return (h(Host, { key: 'ff1abf6c6d74fc9d0bbc7491d64e0ad3373f6899' }, h("li", { key: '45089d058d664822cb67bc7bbf802b06333c351e' }, h("cat-button", { key: '47a83844fe837313f65115d95571f0e9b6f7591b', 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
51
|
...this.nativeAttributes,
|
|
48
52
|
role: 'menuitem',
|
|
49
53
|
tabindex: '-1'
|
|
50
|
-
}, onCatClick: this.
|
|
54
|
+
}, onCatClick: event => this.click(event) }, h("slot", { key: '49bc9f6cc4a5ed1293e261cefb67351342b805fb' })))));
|
|
51
55
|
}
|
|
52
|
-
|
|
53
|
-
|
|
56
|
+
click(event) {
|
|
57
|
+
event.stopPropagation();
|
|
54
58
|
}
|
|
55
59
|
static get is() { return "cat-menu-item"; }
|
|
56
60
|
static get encapsulation() { return "shadow"; }
|
|
@@ -311,6 +315,26 @@ export class CatMenuItem {
|
|
|
311
315
|
"setter": false,
|
|
312
316
|
"reflect": false,
|
|
313
317
|
"attribute": "test-id"
|
|
318
|
+
},
|
|
319
|
+
"subMenu": {
|
|
320
|
+
"type": "boolean",
|
|
321
|
+
"mutable": false,
|
|
322
|
+
"complexType": {
|
|
323
|
+
"original": "boolean",
|
|
324
|
+
"resolved": "boolean",
|
|
325
|
+
"references": {}
|
|
326
|
+
},
|
|
327
|
+
"required": false,
|
|
328
|
+
"optional": false,
|
|
329
|
+
"docs": {
|
|
330
|
+
"tags": [],
|
|
331
|
+
"text": ""
|
|
332
|
+
},
|
|
333
|
+
"getter": false,
|
|
334
|
+
"setter": false,
|
|
335
|
+
"reflect": false,
|
|
336
|
+
"attribute": "sub-menu",
|
|
337
|
+
"defaultValue": "false"
|
|
314
338
|
}
|
|
315
339
|
};
|
|
316
340
|
}
|
|
@@ -383,5 +407,14 @@ export class CatMenuItem {
|
|
|
383
407
|
}
|
|
384
408
|
};
|
|
385
409
|
}
|
|
410
|
+
static get listeners() {
|
|
411
|
+
return [{
|
|
412
|
+
"name": "click",
|
|
413
|
+
"method": "onClick",
|
|
414
|
+
"target": undefined,
|
|
415
|
+
"capture": false,
|
|
416
|
+
"passive": false
|
|
417
|
+
}];
|
|
418
|
+
}
|
|
386
419
|
}
|
|
387
420
|
//# sourceMappingURL=cat-menu-item.js.map
|
|
@@ -1 +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;
|
|
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,MAAM,eAAe,CAAC;AAG9F,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;QAajB,YAAO,GAAG,KAAK,CAAC;KAiEzB;IAvIC,IAAY,EAAE;QACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;IACrC,CAAC;IA4ED,OAAO,CAAC,KAAiB;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;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,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;oBAEtC,8DAAa,CACF,CACV,CACA,CACR,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,KAA8B;QAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Method, Event, EventEmitter, Listen } 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 @Prop() subMenu = false;\n\n /**\n * Emitted when the trigger button is clicked.\n */\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n @Listen('click')\n onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\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={event => this.click(event)}\n >\n <slot></slot>\n </cat-button>\n </li>\n </Host>\n );\n }\n\n private click(event: CustomEvent<MouseEvent>) {\n event.stopPropagation();\n }\n}\n"]}
|
|
@@ -46,7 +46,7 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLE
|
|
|
46
46
|
setAttributeDefault(this, 'role', this.mapRole.get(this.color));
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '02844ee6d6dc5d365bee542ee873280b2b7040fc' }, !this.noIcon && h("cat-icon", { key: 'e3497771224d89279b9d4d1f4d83014066504ede', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), h("div", { key: '219d03b29ec237228366c2df596c148429685483', class: "content" }, h("slot", { key: '13a11b580fe9a6ac0707e49120809e97e3b05cd5' }))));
|
|
50
50
|
}
|
|
51
51
|
get hostElement() { return this; }
|
|
52
52
|
static get style() { return catAlertCss; }
|
|
@@ -83,7 +83,7 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class CatBadge extends HTMLE
|
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
render() {
|
|
86
|
-
return (h(Host, { key: '
|
|
86
|
+
return (h(Host, { key: '5c22fb2216adbb84af5bbcbc1cdc97a4fc2e7f2a', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (h("slot", null)), this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
|
|
87
87
|
}
|
|
88
88
|
get hostElement() { return this; }
|
|
89
89
|
static get watchers() { return {
|
|
@@ -12,7 +12,7 @@ const CatButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatButtonGroup e
|
|
|
12
12
|
this.buttonElements = [];
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h(Host, { key: '
|
|
15
|
+
return (h(Host, { key: 'a34efc8e64ae1322adc48696bf2c04cc2d1e429c', role: "group", "aria-label": this.a11yLabel }, h("slot", { key: '9149f38be769cef00801abacbb03dd0c95850f12', onSlotchange: this.onSlotChange.bind(this) })));
|
|
16
16
|
}
|
|
17
17
|
onSlotChange() {
|
|
18
18
|
this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));
|