JezK

Edit File: sc-dropdown_3.entry.js.map

{"file":"sc-dropdown.sc-menu.sc-menu-item.entry.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,6mCAA6mC,CAAC;AACloC,yBAAe,WAAW;;ACK1B;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwIU,UAAE;;;;;;;;;;;;cAaF,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5JZ,MAAM,SAAS,GAAG,6MAA6M,CAAC;AAChO,qBAAe,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;kBCoCZ,eAAO,CAAC,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrCtB,MAAM,aAAa,GAAG,6pDAA6pD,CAAC;AACprD,yBAAe,aAAa;;MCOf,UAAU;;;wBAKO,KAAK;;;uBASW,KAAK;qBAGR,EAAE;wBAGE,KAAK;;;IAIlD,MAAM,QAAQ,CAAC,OAAsB;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC9B;;IAID,MAAM,OAAO;QACX,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB;IAED,UAAU;QACR,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;IAED,WAAW;QACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC;QACpC,QACE,EAAC,GAAG,qDACF,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,EAC9C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,mBAAmB,EAAE,KAAK,EAAE;aAC7B,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,SAAS,EAC1C,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,MAAM,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAC/B,YAAY,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACtC,YAAY,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EACrC,SAAS,EAAE,CAAC;gBACV,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBAC9D,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;iBACvB;aACF,gBACW,IAAI,CAAC,EAAE,CAAC,SAAS,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,6DAAM,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,kBAAkB,IAChD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,WAAW,IACxH,6DAAM,CAAC,EAAC,wJAAwJ,GAAQ,CACpK,CACD,EACP,6DAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,IAC3C,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACP,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,kBAAkB,IACzC,8DAAa,CACR,EACP,6DAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,IAC3C,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACH,EACN;KACH;;;;;;;","names":[],"sources":["src/components/ui/dropdown/dropdown.scss?tag=sc-dropdown&encapsulation=shadow","src/components/ui/dropdown/dropdown.tsx","src/components/ui/menu/sc-menu.scss?tag=sc-menu&encapsulation=shadow","src/components/ui/menu/sc-menu.tsx","src/components/ui/menu-item/sc-menu-item.scss?tag=sc-menu-item&encapsulation=shadow","src/components/ui/menu-item/sc-menu-item.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --panel-height: 75vh;\n --panel-width: 11rem;\n}\n\n.dropdown {\n position: relative;\n\n &.dropdown--open {\n .dropdown__positioner {\n visibility: visible;\n opacity: 1;\n transform: scale(1);\n }\n }\n\n &__trigger {\n display: block;\n cursor: pointer;\n border-width: 0;\n outline: none;\n background-color: unset;\n }\n\n &--disabled,\n &--disabled .dropdown__trigger {\n cursor: not-allowed;\n }\n}\n\n.dropdown__positioner {\n position: absolute;\n right: 0;\n width: 100%;\n z-index: var(--sc-z-index-dropdown);\n opacity: 0;\n visibility: hidden;\n transform: scale(0.9);\n min-width: var(--panel-width);\n}\n.dropdown__panel {\n transform-origin: top left;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n max-height: var(--panel-height);\n font-family: var(--sc-font-sans);\n font-size: var(--sc-font-size-medium);\n font-weight: var(--sc-font-weight-normal);\n color: var(--color);\n background-color: var(--sc-panel-background-color);\n border: solid 1px var(--sc-panel-border-color);\n border-radius: var(--sc-border-radius-medium);\n box-shadow: var(--sc-shadow-large);\n overflow: auto;\n overscroll-behavior: none;\n // pointer-events: none;\n transition: var(--sc-transition-fast) opacity, var(--sc-transition-fast) transform;\n z-index: 5;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Positions\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n// .dropdown__panel {\n// &.position--top-left {\n// transform-origin: bottom left;\n// bottom: 100%;\n// }\n\n// &.position--top-right {\n// transform-origin: bottom right;\n// bottom: 100%;\n// left: auto;\n// right: 0;\n// }\n\n// &.position--bottom-right {\n// transform-origin: top right;\n// left: auto;\n// right: 0;\n// }\n// }\n","import { Component, Element, Prop, Event, EventEmitter, Watch, State, h, Listen } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';\nimport { ScMenu } from '../menu/sc-menu';\nimport { speak } from '@wordpress/a11y';\nimport { __ } from '@wordpress/i18n';\n\nlet itemIndex = 0;\nlet arrowFlag = '';\n\n/**\n * @part base - The elements base wrapper.\n * @part trigger - The trigger.\n * @part panel - The panel.\n */\n@Component({\n tag: 'sc-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class ScDropdown {\n @Element() el: HTMLDivElement;\n private panel?: HTMLElement;\n private trigger?: HTMLElement;\n private positioner?: HTMLDivElement;\n\n private positionerCleanup: ReturnType<typeof autoUpdate> | undefined;\n\n @Prop() clickEl?: HTMLElement;\n\n /** Is this disabled. */\n @Prop() disabled: boolean;\n\n /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /** The placement of the dropdown panel */\n @Prop() position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\n /** The placement of the dropdown. */\n @Prop({ reflect: true }) placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'bottom-start';\n\n /** The distance in pixels from which to offset the panel away from its trigger. */\n @Prop() distance: number = 10;\n\n /** The distance in pixels from which to offset the panel along its trigger. */\n @Prop() skidding: number = 0;\n\n /**\n * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto|scroll`.\n */\n @Prop() hoist: boolean = false;\n\n /** Determines whether the dropdown should hide when a menu item is selected */\n @Prop({ attribute: 'close-on-select', reflect: true }) closeOnSelect: boolean = true;\n\n /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event() scShow: EventEmitter<void>;\n\n /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event() scHide: EventEmitter<void>;\n\n /* Internal visible state */\n @State() isVisible: boolean;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n handleOutsideClick(evt) {\n const path = evt.composedPath();\n if (\n !path.some(item => {\n return item === this.el;\n })\n ) {\n this.open = false;\n }\n }\n\n startPositioner() {\n this.stopPositioner();\n this.updatePositioner();\n this.positionerCleanup = autoUpdate(this.trigger, this.positioner, this.updatePositioner.bind(this));\n }\n\n updatePositioner() {\n if (!this.open || !this.trigger || !this.positioner) {\n return;\n }\n\n computePosition(this.trigger, this.positioner, {\n placement: this.placement,\n middleware: [\n offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n flip(),\n shift(),\n size({\n apply: ({ availableWidth: width, availableHeight: height }) => {\n // Ensure the panel stays within the viewport when we have lots of menu items\n Object.assign(this.panel.style, {\n maxWidth: `${width}px`,\n maxHeight: `${height}px`,\n });\n },\n padding: 8,\n }),\n ],\n strategy: this.hoist ? 'fixed' : 'absolute',\n }).then(({ x, y, placement }) => {\n this.positioner.setAttribute('data-placement', placement);\n\n Object.assign(this.positioner.style, {\n position: this.hoist ? 'fixed' : 'absolute',\n left: `${x}px`,\n top: `${y}px`,\n right: 'auto',\n });\n });\n }\n\n stopPositioner() {\n if (this.positionerCleanup) {\n this.positionerCleanup();\n this.positionerCleanup = undefined;\n this.positioner.removeAttribute('data-placement');\n }\n }\n\n show() {\n speak(__('Menu Selection Dropdown opened. Press Up/Down arrow to toggle between menu items.', 'surecart'), 'assertive');\n this.scShow.emit();\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n this.isVisible = true;\n this.open = true;\n this.startPositioner();\n this.panel.focus();\n }\n\n hide() {\n speak(__('Menu Selection Dropdown closed.', 'surecart'), 'assertive');\n this.scHide.emit();\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n this.stopPositioner();\n this.isVisible = false;\n this.open = false;\n const slotted = this.el.shadowRoot.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n const trigger = slotted.assignedElements({ flatten: true })[0] as HTMLElement;\n trigger.focus();\n }\n\n handleClick(e) {\n if (this.closeOnSelect) {\n const path = e.composedPath();\n if (\n path.some(item => {\n return item.classList && item.classList.contains('menu-item');\n })\n ) {\n this.open = false;\n }\n }\n }\n\n componentWillLoad() {\n document.addEventListener('mousedown', evt => this.handleOutsideClick(evt));\n }\n\n /* Get the slotted menu */\n getMenu() {\n let slotted = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n return slotted.assignedNodes().find(node => {\n return node.nodeName === 'sc-menu';\n }) as unknown as ScMenu;\n }\n\n getItems() {\n return [...this.el.querySelectorAll<HTMLScMenuItemElement>('sc-menu-item')];\n }\n\n handleHide() {\n this.open = false;\n itemIndex = 0;\n this.trigger.focus();\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n const items = this.getItems();\n\n // Tabbing out of the control closes it\n if (event.key === 'Tab') {\n if (this.open) {\n this.handleHide();\n }\n\n return;\n }\n\n // Up/down opens the menu\n if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n event.preventDefault();\n event.stopImmediatePropagation();\n\n // Show the menu if it's not already open\n if (!this.open) {\n this.open = true;\n }\n\n // Focus on a menu item\n // Focus on a menu item\n if (event.key === 'ArrowDown') {\n if (arrowFlag == 'up') {\n itemIndex = itemIndex + 2;\n }\n if (itemIndex > items.length - 1) {\n itemIndex = 0;\n }\n items[itemIndex].setFocus();\n arrowFlag = 'down';\n itemIndex++;\n return;\n }\n\n if (event.key === 'ArrowUp') {\n if (arrowFlag == 'down') {\n itemIndex = itemIndex - 2;\n }\n if (itemIndex < 0) {\n itemIndex = items.length - 1;\n }\n\n items[itemIndex].setFocus();\n\n arrowFlag = 'up';\n itemIndex--;\n\n return;\n }\n }\n\n // Close select dropdown on Esc/Escape key\n if (event.key === 'Escape') {\n if (this.open) {\n this.handleHide();\n }\n return;\n }\n\n // Open select dropdown with Enter\n if (event.key === 'Enter') {\n if (this.open) {\n this.handleHide();\n } else {\n event.stopImmediatePropagation();\n event.preventDefault();\n this.open = true;\n }\n }\n\n // don't open the menu when a CTRL/Command key is pressed\n if (event.ctrlKey || event.metaKey) {\n return;\n }\n }\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'dropdown': true,\n 'dropdown--open': this.open,\n 'dropdown--disabled': this.disabled,\n }}\n >\n <span\n part=\"trigger\"\n class=\"dropdown__trigger\"\n ref={el => (this.trigger = el as HTMLElement)}\n onClick={() => {\n if (this.disabled) return;\n if (this.open) {\n this.hide();\n } else {\n setTimeout(() => {\n this.show();\n }, 0);\n }\n }}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-haspopup=\"true\"\n >\n <slot name=\"trigger\"></slot>\n </span>\n\n {/* Position the panel with a wrapper since the popover makes use of translate. This let's us add animations\n on the panel without interfering with the position. */}\n <div class=\"dropdown__positioner\" ref={el => (this.positioner = el as HTMLDivElement)}>\n <div\n part=\"panel\"\n class={{\n 'dropdown__panel': true,\n 'position--top-left': this.position === 'top-left',\n 'position--top-right': this.position === 'top-right',\n 'position--bottom-left': this.position === 'bottom-left',\n 'position--bottom-right': this.position === 'bottom-right',\n }}\n aria-orientation=\"vertical\"\n tabindex=\"-1\"\n onClick={e => this.handleClick(e)}\n ref={el => (this.panel = el as HTMLElement)}\n >\n <slot></slot>\n </div>\n </div>\n </div>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.menu {\n padding: var(--sc-spacing-x-small) 0;\n\n &:focus {\n outline: none;\n }\n}\n\n::slotted(sc-input) {\n margin-top: -var(--sc-spacing-x-small);\n}\n::slotted(sc-divider) {\n --spacing: var(--sc-spacing-x-small);\n}\n","import { Component, h, Event, EventEmitter, Element, Method, Prop } from '@stencil/core';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\n\n@Component({\n tag: 'sc-menu',\n styleUrl: 'sc-menu.scss',\n shadow: true,\n})\nexport class ScMenu {\n @Element() el: HTMLElement;\n @Event() scSelect: EventEmitter<{ item: HTMLScMenuItemElement }>;\n private items: HTMLScMenuItemElement[] = [];\n\n @Prop({ reflect: false }) ariaLabel: string;\n\n /** TODO: Click test */\n handleClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n const item = target.closest('sc-menu-item') as HTMLScMenuItemElement;\n\n if (item && !item.disabled) {\n this.scSelect.emit({ item });\n }\n }\n\n /** TODO: Keydown Test */\n handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter\n if (event.key === 'Enter') {\n const item = this.getCurrentItem();\n event.preventDefault();\n\n if (item) {\n this.scSelect.emit({ item });\n }\n\n speak(sprintf(__('Menu %s selected', 'surecart'), item.textContent), 'assertive');\n }\n\n // Prevent scrolling when space is pressed\n if (event.key === ' ') {\n event.preventDefault();\n }\n\n // Move the selection when pressing down or up\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const selectedItem = this.getCurrentItem();\n let index = selectedItem ? this.items.indexOf(selectedItem) : 0;\n\n if (this.items.length) {\n event.preventDefault();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = this.items.length - 1;\n }\n\n if (index < 0) index = 0;\n if (index > this.items.length - 1) index = this.items.length - 1;\n\n this.setCurrentItem(this.items[index]);\n\n return;\n }\n }\n }\n\n /** Get the active item */\n getCurrentItem() {\n return this.items.find(i => i.getAttribute('tabindex') === '0');\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n @Method()\n async setCurrentItem(item: HTMLScMenuItemElement) {\n const activeItem = item.disabled ? this.items[0] : item;\n // Update tab indexes\n this.items.forEach(i => {\n i.setAttribute('tabindex', i === activeItem ? '0' : '-1');\n });\n }\n\n /** Sync slotted items with internal state */\n syncItems() {\n const slottedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements({ flatten: true });\n this.items = slottedElements.filter(node => {\n return node.nodeName === 'sc-menu-item';\n }) as HTMLScMenuItemElement[];\n }\n\n /** Handle items change in slot */\n handleSlotChange() {\n this.syncItems();\n }\n\n render() {\n return (\n <div part=\"base\" class=\"menu\" tabindex=\"0\" onKeyDown={e => this.handleKeyDown(e)}>\n <slot onSlotchange={() => this.handleSlotChange()}></slot>\n </div>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.menu-item {\n position: relative;\n display: flex;\n align-items: stretch;\n font-family: var(--sc-font-sans);\n font-size: var(--sc-font-size-medium);\n font-weight: var(--sc-font-weight-normal);\n line-height: var(--sc-menu-item-line-height, var(--sc-line-height-normal));\n letter-spacing: var(--sc-letter-spacing-normal);\n text-align: left;\n color: var(--sc-menu-item-color, var(--sc-color-gray-700));\n padding: var(--sc-spacing-xx-small) var(--sc-spacing-x-large);\n transition: var(--sc-input-transition, var(--sc-transition-medium)) fill, var(--sc-input-transition, var(--sc-transition-medium)) background-color;\n user-select: none;\n white-space: var(--sc-menu-item-white-space, nowrap);\n text-wrap: auto;\n cursor: pointer;\n text-decoration: none;\n\n &.menu-item--focused:not(.menu-item--disabled) {\n outline: none;\n background-color: var(--sc-menu-item-background-focused, var(--sc-color-primary-500));\n color: var(--sc-color-white);\n }\n\n &.menu-item--disabled {\n outline: none;\n color: var(--sc-color-gray-400);\n cursor: not-allowed;\n }\n\n .menu-item__label {\n flex: 1 1 auto;\n }\n\n .menu-item__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(*) {\n display: inline-flex;\n margin-right: var(--sc-spacing-small);\n }\n }\n\n .menu-item__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n\n ::slotted(*) {\n margin-left: var(--sc-spacing-x-small);\n text-align: right;\n }\n }\n}\n\n.menu-item .menu-item__check {\n display: flex;\n position: absolute;\n left: 0.5em;\n top: 0.6em;\n visibility: hidden;\n align-items: center;\n font-size: inherit;\n}\n\n.menu-item--checked .menu-item__check {\n visibility: visible;\n}\n\n.menu-item--is-rtl {\n &.menu-item {\n text-align: right;\n\n .menu-item__check {\n left: auto;\n right: 0.5em;\n }\n }\n}\n","import { Component, Prop, State, h, Method, Element } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\n\n@Component({\n tag: 'sc-menu-item',\n styleUrl: 'sc-menu-item.scss',\n shadow: true,\n})\nexport class ScMenuItem {\n @Element() el: HTMLScMenuItemElement;\n\n private menuItem: HTMLElement;\n\n @State() private hasFocus = false;\n\n /** Optional link to follow. */\n @Prop() href: string;\n\n /** The target of the link. */\n @Prop() target: string;\n\n /** Draws the item in a checked state. */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n @Prop({ reflect: true }) value: string = '';\n\n /** Draws the menu item in a disabled state. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Sets focus on the button. */\n @Method('setFocus')\n async setFocus(options?: FocusOptions) {\n this.menuItem.focus(options);\n }\n\n /** Removes focus from the button. */\n @Method('setBlur')\n async setBlur() {\n this.menuItem.blur();\n }\n\n handleBlur() {\n this.hasFocus = false;\n }\n\n handleFocus() {\n this.hasFocus = true;\n }\n\n render() {\n const Tag = this.href ? 'a' : 'div';\n return (\n <Tag\n ref={el => (this.menuItem = el as HTMLElement)}\n part=\"base\"\n class={{\n 'menu-item': true,\n 'menu-item--checked': this.checked,\n 'menu-item--disabled': this.disabled,\n 'menu-item--focused': this.hasFocus,\n 'menu-item--is-rtl': isRtl(),\n }}\n href={this.href}\n role=\"menuitem\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-checked={this.checked ? 'true' : 'false'}\n tabindex={!this.disabled ? '0' : undefined}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n onMouseEnter={() => this.handleFocus()}\n onMouseLeave={() => this.handleBlur()}\n onKeyDown={e => {\n if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n this.menuItem.click();\n }\n }}\n aria-label={this.el.innerText}\n target={this.target}\n >\n <span part=\"checked-icon\" class=\"menu-item__check\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-check\" viewBox=\"0 0 16 16\">\n <path d=\"M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z\"></path>\n </svg>\n </span>\n <span part=\"prefix\" class=\"menu-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span part=\"label\" class=\"menu-item__label\">\n <slot></slot>\n </span>\n <span part=\"suffix\" class=\"menu-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n </Tag>\n );\n }\n}\n"],"version":3}