import * as plugins from './plugins.js';
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
cssManager,
css,
unsafeCSS,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-contextmenu': DeesContextmenu;
}
}
@customElement('dees-contextmenu')
export class DeesContextmenu extends DeesElement {
public static demo = () => html`
Hello
{}
},
{
name: 'edit',
action: async () => {}
}
] as plugins.tsclass.website.IMenuItem[]}>
`;
@property({
type: Array,
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
box-sizing: border-box;
}
.mainbox {
}
`,
];
public render(): TemplateResult {
return html`
`;
}
public async firstUpdated() {
if (!this.textContent) {
this.textContent = 'Button';
this.performUpdate();
}
}
public async selectChip(chipArg: string) {
if (this.selectionMode === 'single') {
if (this.selectedChip === chipArg) {
this.selectedChip = null;
this.selectedChips = [];
} else {
this.selectedChip = chipArg;
this.selectedChips = [chipArg];
}
} else if (this.selectionMode === 'multiple') {
if (this.selectedChips.includes(chipArg)) {
this.selectedChips = this.selectedChips.filter((chipArg2) => chipArg !== chipArg2);
} else {
this.selectedChips.push(chipArg);
}
this.requestUpdate();
}
console.log(this.selectedChips);
}
}