@limetech/lime-elements
Version:
157 lines (156 loc) • 6.86 kB
JavaScript
import { h, Host } from "@stencil/core";
/**
* @private
*/
export class ActionBarOverflowMenu {
constructor() {
/**
* Defines the location that the content of the overflow menu
* appears, in relation to its trigger.
* It defaults to `bottom-end`, since in normal scenarios
* (for example when the action bar is not floating at the bottom of the screen)
* this menu is the right-most item in the user interface of the component.
*/
this.openDirection = 'bottom-end';
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);
};
}
render() {
return (h(Host, { key: '5a993a11b77a6b9c268444ea6903df602ae832ea' }, h("limel-menu", { key: 'bb6c54b88d20dc54ad86099e67facbd2656d6a9f', openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, h("button", { key: '618587121d8dfd16b5e495ab53b251be42d98f01', type: "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",
"id": "global::Array"
},
"MenuItem": {
"location": "import",
"path": "../../menu/menu.types",
"id": "src/components/menu/menu.types.ts::MenuItem",
"referenceLocation": "MenuItem"
},
"ListSeparator": {
"location": "import",
"path": "../../list-item/list-item.types",
"id": "src/components/list-item/list-item.types.ts::ListSeparator",
"referenceLocation": "ListSeparator"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "List of the items that should be rendered in the overflow menu."
},
"getter": false,
"setter": false
},
"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",
"id": "src/components/menu/menu.types.ts::OpenDirection",
"referenceLocation": "OpenDirection"
}
}
},
"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."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "open-direction",
"defaultValue": "'bottom-end'"
},
"overFlowIcon": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Icon",
"resolved": "Icon",
"references": {
"Icon": {
"location": "import",
"path": "../../../global/shared-types/icon.types",
"id": "src/global/shared-types/icon.types.ts::Icon",
"referenceLocation": "Icon"
}
}
},
"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."
},
"getter": false,
"setter": false
}
};
}
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",
"id": "src/components/action-bar/action-bar.types.ts::ActionBarItem",
"referenceLocation": "ActionBarItem"
}
}
}
}];
}
}