@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
245 lines (235 loc) • 7.53 kB
JavaScript
import {
SubmenuController
} from "./chunk.V4HPWQE7.js";
import {
menu_item_custom_styles_default
} from "./chunk.OAAB4YO4.js";
import {
menu_item_styles_default
} from "./chunk.FSWTBNSI.js";
import {
SynPopup
} from "./chunk.MGWPQRJ7.js";
import {
SynSpinner
} from "./chunk.GPST4OZW.js";
import {
HasSlotController,
getTextContent
} from "./chunk.WVVQK5TE.js";
import {
SynIcon
} from "./chunk.RCBSMXQH.js";
import {
LocalizeController
} from "./chunk.OAQRCZOO.js";
import {
watch
} from "./chunk.BVZQ6QSY.js";
import {
component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
SynergyElement
} from "./chunk.3THJTCRO.js";
import {
__decorateClass,
__privateAdd,
__privateGet,
__privateSet,
__spreadValues
} from "./chunk.Z4XV3SMG.js";
// src/components/menu-item/menu-item.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit";
import { property, query } from "lit/decorators.js";
// src/internal/watchEvent.ts
function emitEventForPropertyUpdates(watchedProperties, options) {
const resolvedOptions = __spreadValues({
waitUntilFirstUpdated: false
}, options);
return (Proto) => {
var _synPrivateFirstChangeHasBeenEmitted, _a;
return _a = class extends Proto {
constructor() {
super(...arguments);
// True if the event was emitted, false otherwise
__privateAdd(this, _synPrivateFirstChangeHasBeenEmitted, !resolvedOptions.waitUntilFirstUpdated);
}
updated(changedProps) {
if (!__privateGet(this, _synPrivateFirstChangeHasBeenEmitted)) {
__privateSet(this, _synPrivateFirstChangeHasBeenEmitted, true);
return;
}
const monitoredChangedProperties = Array.from(changedProps).filter(([key]) => watchedProperties.includes(key));
if (monitoredChangedProperties.length === 0) {
super.updated(changedProps);
return;
}
const detail = monitoredChangedProperties.map(([key, value]) => ({
attribute: key,
newValue: this[key],
oldValue: value
}));
this.emit("syn-attributes-changed", {
detail
});
super.updated(changedProps);
}
}, _synPrivateFirstChangeHasBeenEmitted = new WeakMap(), _a;
};
}
// src/components/menu-item/menu-item.component.ts
var SynMenuItem = class extends SynergyElement {
constructor() {
super(...arguments);
this.localize = new LocalizeController(this);
this.type = "normal";
this.checked = false;
this.value = "";
this.loading = false;
this.disabled = false;
this.hasSlotController = new HasSlotController(this, "submenu");
this.submenuController = new SubmenuController(this, this.hasSlotController);
this.handleHostClick = (event) => {
if (this.disabled) {
event.preventDefault();
event.stopImmediatePropagation();
}
};
this.handleMouseOver = (event) => {
this.focus();
event.stopPropagation();
};
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("click", this.handleHostClick);
this.addEventListener("mouseover", this.handleMouseOver);
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener("click", this.handleHostClick);
this.removeEventListener("mouseover", this.handleMouseOver);
}
handleDefaultSlotChange() {
const textLabel = this.getTextLabel();
if (typeof this.cachedTextLabel === "undefined") {
this.cachedTextLabel = textLabel;
return;
}
if (textLabel !== this.cachedTextLabel) {
this.cachedTextLabel = textLabel;
this.emit("slotchange", { bubbles: true, composed: false, cancelable: false });
}
}
handleCheckedChange() {
if (this.checked && this.type !== "checkbox") {
this.checked = false;
console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
return;
}
if (this.type === "checkbox") {
this.setAttribute("aria-checked", this.checked ? "true" : "false");
} else {
this.removeAttribute("aria-checked");
}
}
handleDisabledChange() {
this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
}
handleTypeChange() {
if (this.type === "checkbox") {
this.setAttribute("role", "menuitemcheckbox");
this.setAttribute("aria-checked", this.checked ? "true" : "false");
} else {
this.setAttribute("role", "menuitem");
this.removeAttribute("aria-checked");
}
}
/** Returns a text label based on the contents of the menu item's default slot. */
getTextLabel() {
return getTextContent(this.defaultSlot);
}
isSubmenu() {
return this.hasSlotController.test("submenu");
}
render() {
const isRtl = this.localize.dir() === "rtl";
const isSubmenuExpanded = this.submenuController.isExpanded();
return html`
<div
id="anchor"
part="base"
class=${classMap({
"menu-item": true,
"menu-item--rtl": isRtl,
"menu-item--checked": this.checked,
"menu-item--disabled": this.disabled,
"menu-item--loading": this.loading,
"menu-item--has-submenu": this.isSubmenu(),
"menu-item--submenu-expanded": isSubmenuExpanded
})}
?aria-haspopup="${this.isSubmenu()}"
?aria-expanded="${isSubmenuExpanded ? true : false}"
>
<span part="checked-icon" class="menu-item__check">
<syn-icon name="check" library="system" aria-hidden="true"></syn-icon>
</span>
<slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
<slot part="label" class="menu-item__label" =${this.handleDefaultSlotChange}></slot>
<slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
<span part="submenu-icon" class="menu-item__chevron">
<syn-icon name="chevron-down" library="system" aria-hidden="true"></syn-icon>
</span>
${this.submenuController.renderSubmenu()}
${this.loading ? html` <syn-spinner part="spinner" exportparts="base:spinner__base"></syn-spinner> ` : ""}
</div>
`;
}
};
SynMenuItem.styles = [component_styles_default, menu_item_styles_default, menu_item_custom_styles_default];
SynMenuItem.dependencies = {
"syn-icon": SynIcon,
"syn-popup": SynPopup,
"syn-spinner": SynSpinner
};
__decorateClass([
query("slot:not([name])")
], SynMenuItem.prototype, "defaultSlot", 2);
__decorateClass([
query(".menu-item")
], SynMenuItem.prototype, "menuItem", 2);
__decorateClass([
property()
], SynMenuItem.prototype, "type", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], SynMenuItem.prototype, "checked", 2);
__decorateClass([
property()
], SynMenuItem.prototype, "value", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], SynMenuItem.prototype, "loading", 2);
__decorateClass([
property({ type: Boolean, reflect: true })
], SynMenuItem.prototype, "disabled", 2);
__decorateClass([
watch("checked")
], SynMenuItem.prototype, "handleCheckedChange", 1);
__decorateClass([
watch("disabled")
], SynMenuItem.prototype, "handleDisabledChange", 1);
__decorateClass([
watch("type")
], SynMenuItem.prototype, "handleTypeChange", 1);
SynMenuItem = __decorateClass([
emitEventForPropertyUpdates(["type", "loading"], {
waitUntilFirstUpdated: true
})
], SynMenuItem);
export {
SynMenuItem
};
//# sourceMappingURL=chunk.6YNHGMLP.js.map