@universal-material/web
Version:
Material web components
98 lines • 3.24 kB
JavaScript
import { __decorate } from "tslib";
import { html, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmButtonWrapper } from '../shared/button-wrapper.js';
import { styles } from './menu-item.styles.js';
let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
constructor() {
super(...arguments);
this.#active = false;
/**
* Whether the menu item has leading icon or not
*
* _Note:_ Readonly
*/
this.hasLeadingIcon = false;
/**
* Whether the menu item has trailing icon or not
*
* _Note:_ Readonly
*/
this.hasTrailingIcon = false;
/**
* Whether the drawer item has badge or not
*
* _Note:_ Readonly
*/
this.hasBadge = false;
this.innerRole = 'menuitem';
this.#handleMouseEnter = () => this.dispatchEvent(new CustomEvent('menu-item-mouseenter', { bubbles: true }));
}
static { this.styles = [UmButtonWrapper.styles, styles]; }
#active;
/**
* Force show focus ring
*/
get active() {
return this.#active;
}
set active(active) {
this.#active = active;
if (active) {
this.classList.add('force-focus-ring');
return;
}
this.classList.remove('force-focus-ring');
}
connectedCallback() {
super.connectedCallback();
this.role = 'presentation';
this.addEventListener('mouseenter', this.#handleMouseEnter);
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('mouseenter', this.#handleMouseEnter);
}
#handleMouseEnter;
renderContent() {
return html `
<div class="icon leading">
<slot name="leading-icon" aria-hidden="true" ="${this.#handleLeadingIconSlotChange}"></slot>
</div>
<span class="label" id="text">
<slot></slot>
</span>
<div class="icon trailing">
<slot name="trailing-icon" aria-hidden="true" ="${this.#handleTrailingIconSlotChange}">
<span>${this.renderDefaultTrailingIcon()}</span>
</slot>
</div>
`;
}
renderDefaultTrailingIcon() {
return nothing;
}
#handleLeadingIconSlotChange(e) {
this.hasLeadingIcon = e.target.assignedElements({ flatten: true }).length > 0;
}
#handleTrailingIconSlotChange(e) {
this.hasTrailingIcon = e.target.assignedElements({ flatten: true }).length > 0;
}
};
__decorate([
property({ type: Boolean, reflect: true })
], UmMenuItem.prototype, "active", null);
__decorate([
property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
], UmMenuItem.prototype, "hasLeadingIcon", void 0);
__decorate([
property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
], UmMenuItem.prototype, "hasTrailingIcon", void 0);
__decorate([
property({ type: Boolean, attribute: 'has-badge', reflect: true })
], UmMenuItem.prototype, "hasBadge", void 0);
UmMenuItem = __decorate([
customElement('u-menu-item')
], UmMenuItem);
export { UmMenuItem };
//# sourceMappingURL=menu-item.js.map