v4web-components
Version:
Stencil Component Starter
44 lines (40 loc) • 6.13 kB
JavaScript
import { r as registerInstance, h, g as getElement } from './index-0b720089.js';
const labDsContextMenuCss = ".v4-context-menu{gap:var(--lab-ds-semantic-selectable-space-gap-xs);color:var(--lab-ds-semantic-color-fg-default)}.icon-menu{display:flex;justify-content:flex-end;font-family:Material Symbols Outlined}.left .icon-menu{justify-content:flex-start}.items{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);position:relative}.hints{position:absolute;top:0;right:0;max-height:21rem;overflow-y:auto;overflow-x:hidden;border-style:solid;border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);border-color:var(--lab-ds-semantic-selectable-color-border-default);gap:var(--lab-ds-semantic-selectable-space-gap-s);box-shadow:var(--lab-ds-semantic-selectable-shadow-m);background-color:var(--lab-ds-semantic-placeholder-color-bg-default);color:var(--lab-ds-semantic-color-fg-default)}.left .hints{left:0;right:inherit}.hints-container{gap:var(--lab-ds-semantic-selectable-space-gap-s);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.hints-container .action-item{display:flex;align-items:center;border:none;z-index:20;font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);background-color:rgba(0, 0, 0, 0);padding-top:var(--lab-ds-semantic-selectable-space-padding-s);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);gap:var(--lab-ds-semantic-selectable-space-gap-s);width:100%;white-space:nowrap}.icon-item{font-family:Material Symbols Outlined}.icon{display:flex}.hints-container .action-item.last-item:not(:disabled){border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-color:var(--lab-ds-semantic-selectable-color-border-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-bottom-style:solid}.hints-container .action-item:hover{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);background-color:var(--lab-ds-semantic-selectable-color-bg-hover)}.hints-container .action-item:focus{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-style:solid;outline-offset:-1px;background-color:rgba(0, 0, 0, 0)}.hints-container .action-item:active{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border:none;background-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-color-bg-pure)}.hints-container .action-item:disabled{color:var(--lab-ds-semantic-color-fg-disabled);background-color:rgba(0, 0, 0, 0);border:none}.hints-container .action-item.destructive-item{color:var(--lab-ds-semantic-selectable-color-bg-dark-error);background-color:rgba(0, 0, 0, 0)}.hints-container .action-item.destructive-item:hover{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);background-color:var(--lab-ds-semantic-selectable-color-secondary-active)}.hints-container .action-item.destructive-item:focus{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-color:var(--lab-ds-semantic-selectable-color-bg-dark-error);outline-style:solid;outline-offset:-1px;background-color:rgba(0, 0, 0, 0)}.hints-container .action-item.destructive-item:active{border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border:none;background-color:var(--lab-ds-semantic-selectable-color-secondary-press);color:var(--lab-ds-semantic-color-bg-pure)}.hints-container .action-item.destructive-item:disabled{opacity:var(--lab-ds-core-opacity-80);color:var(--lab-ds-semantic-selectable-color-bg-dark-error);background-color:rgba(0, 0, 0, 0);border:none}";
const LabDsContextMenu = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.items = undefined;
this.destructiveItem = undefined;
this.iconMenu = 'more_vert';
this.isItemsVisible = false;
this.disabled = false;
this.listPosition = 'left';
}
handleSelect() {
if (this.disabled)
return;
this.isItemsVisible = !this.isItemsVisible;
}
checkForClickOutside(ev) {
if (this.el.contains(ev.target)) {
return;
}
this.isItemsVisible = false;
}
render() {
var _a, _b;
return (h("div", { class: `v4-context-menu ${this.listPosition === 'left' ? 'left' : 'right'}` }, h("div", { class: "icon-menu" }, h("lab-ds-icon-selectable", { onClick: () => this.handleSelect(), icon: this.iconMenu, size: "small" })), (((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0 || this.destructiveItem) && this.isItemsVisible && (h("div", { class: "items" }, h("div", { class: "hints" }, h("div", { class: "hints-container" }, (_b = this.items) === null || _b === void 0 ? void 0 :
_b.map((hint, index) => {
return (h("button", { onClick: () => {
hint.event();
this.isItemsVisible = false;
}, disabled: hint.disabled, key: hint.key, class: `action-item ${this.items.length === index + 1 && this.destructiveItem ? 'last-item' : ''}` }, hint.icon && h("lab-ds-icon-not-selectable", { class: 'icon-item', key: index, size: "small", icon: hint.icon }), h("span", { class: "hint" }, hint.label)));
}), this.destructiveItem && (h("button", { onClick: () => {
this.destructiveItem.event();
}, disabled: this.destructiveItem.disabled, key: this.destructiveItem.key, class: `action-item destructive-item` }, this.destructiveItem.icon && h("lab-ds-icon-not-selectable", { class: 'icon-item', size: "small", icon: this.destructiveItem.icon }), h("span", { class: "hint" }, this.destructiveItem.label)))))))));
}
get el() { return getElement(this); }
};
LabDsContextMenu.style = labDsContextMenuCss;
export { LabDsContextMenu as lab_ds_context_menu };
//# sourceMappingURL=lab-ds-context-menu.entry.js.map