bruno-ui
Version:
Bruno UI Kit
103 lines (102 loc) • 3.22 kB
JavaScript
import { h } from "@stencil/core";
import { AppHelper } from "../../helpers/app.helper";
export class DropdownComponent {
constructor() {
this.closeable = true;
this.active = false;
this._active = false;
this._id = AppHelper.GetIdWithPrefix("dropdown");
this._menuId = AppHelper.GetIdWithPrefix("dropdown__menu");
}
ActiveWatchHandler(newValue) {
this._active = newValue;
}
componentDidLoad() {
this._active = this.active;
}
WindowClickHandler(event) {
this._active = this.IsCloseable(event);
}
render() {
return (h("div", { class: { "brn-dropdown--active": this._active }, id: `${this._id}` },
h("div", { class: "brn-dropdown__button", onClick: () => {
this.Toggle();
} },
h("slot", { name: "button" })),
h("div", { class: "brn-dropdown__menu", id: `${this._menuId}` },
h("slot", { name: "menu" }))));
}
Toggle() {
this._active = !this._active;
}
IsCloseable(event) {
let result = false;
if (this.closeable && event.target.closest(`#${this._menuId}`)) {
result = false;
}
else if (event.target.closest(`#${this._id}`)) {
result = this._active;
}
return result;
}
static get is() { return "brn-dropdown"; }
static get originalStyleUrls() { return {
"$": ["dropdown.component.scss"]
}; }
static get styleUrls() { return {
"$": ["dropdown.component.css"]
}; }
static get properties() { return {
"closeable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "closeable",
"reflect": false,
"defaultValue": "true"
},
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "active",
"reflect": false,
"defaultValue": "false"
}
}; }
static get states() { return {
"_active": {}
}; }
static get elementRef() { return "_element"; }
static get watchers() { return [{
"propName": "active",
"methodName": "ActiveWatchHandler"
}]; }
static get listeners() { return [{
"name": "click",
"method": "WindowClickHandler",
"target": "window",
"capture": false,
"passive": false
}]; }
}