@limetech/lime-elements
Version:
138 lines (137 loc) • 4.37 kB
JavaScript
import { h } from '@stencil/core';
/**
* @private
*/
export class ActionBarOverflowMenu {
constructor() {
this.getOverflowTriggerContent = () => {
if (this.overFlowIcon) {
const { color, name, title } = this.overFlowIcon;
return (h("limel-icon", { style: {
color: color,
}, name: name, "aria-label": title }));
}
return `+${this.numberOfMenuItems}`;
};
this.handleSelect = (event) => {
event.stopPropagation();
this.select.emit(event.detail);
};
this.items = undefined;
this.openDirection = 'bottom-end';
this.overFlowIcon = undefined;
}
render() {
return [
h("limel-menu", { openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, h("button", { slot: "trigger" }, this.getOverflowTriggerContent())),
];
}
get numberOfMenuItems() {
return this.items.filter((item) => this.isMenuItem(item)).length;
}
isMenuItem(item) {
return !('separator' in item);
}
static get is() { return "limel-action-bar-overflow-menu"; }
static get properties() {
return {
"items": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<MenuItem | ListSeparator>",
"resolved": "(ListSeparator | MenuItem<any>)[]",
"references": {
"Array": {
"location": "global"
},
"MenuItem": {
"location": "import",
"path": "../../menu/menu.types"
},
"ListSeparator": {
"location": "import",
"path": "../../list/list-item.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "List of the items that should be rendered in the overflow menu."
}
},
"openDirection": {
"type": "string",
"mutable": false,
"complexType": {
"original": "OpenDirection",
"resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
"references": {
"OpenDirection": {
"location": "import",
"path": "../../menu/menu.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the location that the content of the overflow menu\nappears, in relation to its trigger.\nIt defaults to `bottom-end`, since in normal scenarios\n(for example when the action bar is not floating at the bottom of the screen)\nthis menu is the right-most item in the user interface of the component."
},
"attribute": "open-direction",
"reflect": true,
"defaultValue": "'bottom-end'"
},
"overFlowIcon": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Icon",
"resolved": "Icon",
"references": {
"Icon": {
"location": "import",
"path": "../../../global/shared-types/icon.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Icon to display in the overflow menu trigger.\nIf not provided, the number of items in the overflow menu will be displayed."
}
}
};
}
static get events() {
return [{
"method": "select",
"name": "select",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "public",
"text": undefined
}],
"text": "Fired when an item in the action bar overflow menu has been clicked."
},
"complexType": {
"original": "ActionBarItem",
"resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any>",
"references": {
"ActionBarItem": {
"location": "import",
"path": "../../action-bar/action-bar.types"
}
}
}
}];
}
}
//# sourceMappingURL=action-bar-overflow-menu.js.map