@seniorsistemas/tecnologia-webcomponents
Version:
A webcomponents library for Senior Sistemas - Suite BPM products.
121 lines (120 loc) • 3.29 kB
JavaScript
import { Component, h, Host, Prop } from '@stencil/core';
import { defaultTheme } from '../../defaultTheme';
import { ButtonPosition } from './bottom-bar.model';
export class BottomBar {
constructor() {
this.theme = defaultTheme;
this.buttonPosition = ButtonPosition.left;
this.useAnimation = true;
}
handleButtonPositionStyle(position) {
const isLeft = position === ButtonPosition.left;
return {
flexDirection: isLeft ? 'row-reverse' : 'row',
};
}
render() {
return (h(Host, null,
h("div", { class: `container ${this.useAnimation && 'use-animation'}` },
h("div", { style: this.handleButtonPositionStyle(this.buttonPosition), class: `wrapper ${!this.text && 'flex-align-center'}` },
this.text && (h("div", { class: "text", style: {
margin: this.buttonPosition === ButtonPosition.left
? '0 0 0 20px'
: '0 20px 0 0',
} },
h("span", { class: "text-sans text-base" }, this.text))),
h("div", { class: "button" },
h("slot", { name: "button" }))))));
}
static get is() { return "tec-bottom-bar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["bottom-bar.scss"]
}; }
static get styleUrls() { return {
"$": ["bottom-bar.css"]
}; }
static get properties() { return {
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TecnologiaTheme",
"resolved": "TecnologiaTheme.dark | TecnologiaTheme.light",
"references": {
"TecnologiaTheme": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "theme",
"reflect": true,
"defaultValue": "defaultTheme"
},
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "text",
"reflect": false
},
"buttonPosition": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ButtonPosition",
"resolved": "ButtonPosition.left | ButtonPosition.right",
"references": {
"ButtonPosition": {
"location": "import",
"path": "./bottom-bar.model"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "button-position",
"reflect": false,
"defaultValue": "ButtonPosition.left"
},
"useAnimation": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "use-animation",
"reflect": false,
"defaultValue": "true"
}
}; }
}