@limetech/lime-elements
Version:
129 lines (128 loc) • 4.22 kB
JavaScript
import { h } from "@stencil/core";
/**
* @exampleComponent limel-example-banner-basic
* @slot buttons - Buttons to show in the banner
*/
export class Banner {
constructor() {
this.isOpen = false;
}
/**
* Open the banner
*/
async open() {
this.isOpen = true;
}
/**
* Close the banner
*/
async close() {
this.isOpen = false;
}
render() {
return (h("div", { key: '4c52de06b1d1710e79d2fbe729c76b49c7a4dae9', class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { key: '2085a6a5d07c036642646f6cb9cab56e7f86f48a', class: "lime-banner__surface" }, h("div", { key: '0b021548bdee32661d458a88e0472a6a1ef0f195', class: "lime-banner__content" }, h("div", { key: '65db98d6d60fdf856871e68c6c3bdaa55fb87526', class: "icon-message" }, this.renderIcon(), h("div", { key: '94eb50955800bc6a18c49bed8d6fd949909cf5bd' }, this.message)), h("div", { key: '8331420f88b294bb1a21682ca1446704e9dc0ffb', class: "lime-banner__actions" }, h("slot", { key: 'b784df0968fa19c093c3c0db6de980d6472154d4', name: "buttons" }))))));
}
renderIcon() {
if (!this.icon) {
return;
}
return (h("div", { class: "lime-banner__icon" }, h("limel-icon", { name: this.icon, badge: true, size: "large" })));
}
static get is() { return "limel-banner"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["banner.scss"]
};
}
static get styleUrls() {
return {
"$": ["banner.css"]
};
}
static get properties() {
return {
"message": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The text to show on the banner."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "message"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set icon for the banner"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "icon"
}
};
}
static get states() {
return {
"isOpen": {}
};
}
static get methods() {
return {
"open": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Open the banner",
"tags": []
}
},
"close": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Close the banner",
"tags": []
}
}
};
}
}