@morjs/runtime-web/lib/components/src/base/tabbar-item.js

mor runtime for web

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const lit_element_1 = require("lit-element");
const class_map_1 = require("lit-html/directives/class-map");
const style_map_1 = require("lit-html/directives/style-map");
const baseElement_1 = require("../baseElement");
const utils_1 = require("../utils");
class TabbarItem extends baseElement_1.BaseElement {
    constructor() {
        super();
        this.badgeStyle = null;
        this.dotStyle = null;
        this.key = null;
        this.isSelected = false;
        this.text = '';
        this.icon = '';
        this.badgeText = '';
        this.showRedDot = '';
        this.textColor = '';
        this.disableSafeAreaPadding = false;
        this.badgeStyle = {
            position: 'absolute',
            top: '-2px',
            right: '-13px'
        };
        this.dotStyle = {
            position: 'absolute',
            top: '0',
            right: '-6px'
        };
    }
    static get styles() {
        return (0, lit_element_1.css) `
      :host {
        display: block;
        flex: 1;
        padding-top: 8px;
        padding-left: 0;
        padding-right: 0;
        font-size: 0;
        color: rgba(0, 0, 0, 0.5);
        text-align: center;
      }

      :host:first-child {
        padding-left: env(safe-area-inset-left);
      }

      .tiga-tabbar__item__active .tiga-tabbar__label {
        color: #49a9ee;
      }

      .tiga-tabbar__icon {
        display: inline-block;
        width: 28px;
        height: 28px;
        margin-bottom: 2px;
      }

      .tiga-badge {
        display: inline-block;
        padding: 0.15em 0.4em;
        min-width: 8px;
        border-radius: 18px;
        background-color: #fa5151;
        color: #fff;
        line-height: 1.2;
        text-align: center;
        font-size: 12px;
        vertical-align: middle;
      }

      .tiga-badge_dot {
        padding: 0.4em;
        min-width: 0;
      }

      .tiga-tabbar__label {
        color: rgba(0, 0, 0, 0.9);
        font-size: 10px;
        line-height: 1.4;
      }

      p {
        padding: 0;
        margin: 0;
      }
    `;
    }
    handleClick() {
        const event = new CustomEvent('onSelect', {
            detail: {
                value: this.key
            },
            bubbles: true
        });
        this.dispatchEvent(event);
    }
    render() {
        const tigaTabbarCls = {
            'tiga-tabbar__item': true,
            'tiga-tabbar__item__active': this.isSelected
        };
        const hostStyles = this.disableSafeAreaPadding
            ? `padding-bottom: 8px;`
            : `padding-bottom: calc(8px + constant(safe-area-inset-bottom));
      padding-bottom: calc(8px + env(safe-area-inset-bottom));`;
        return (0, lit_element_1.html) `
      <style>
        :host{
          ${hostStyles};
        }
      </style>
      <div
        key="${this.key}"
        class=${(0, class_map_1.classMap)(tigaTabbarCls)}
        @touchstart="${this.handleClick}"
      >
        <div
          style=${(0, style_map_1.styleMap)({ display: 'inline-block', position: 'relative' })}
        >
          ${this.icon
            ? (0, lit_element_1.html) `<img src="${this.icon}" alt="" class="tiga-tabbar__icon" />`
            : ''}
          ${this.badgeText
            ? (0, lit_element_1.html) ` <span class="tiga-badge" style=${(0, style_map_1.styleMap)(this.badgeStyle)}>
                ${this.badgeText}
              </span>`
            : null}
          ${this.showRedDot
            ? (0, lit_element_1.html) ` <span
                class="tiga-badge tiga-badge_dot"
                style=${(0, style_map_1.styleMap)(this.dotStyle)}
              />`
            : null}
        </div>
        <p
          class="tiga-tabbar__label"
          style=${(0, style_map_1.styleMap)({ color: this.textColor || '' })}
        >
          ${this.text}
        </p>
      </div>
    `;
    }
}
tslib_1.__decorate([
    (0, lit_element_1.property)()
], TabbarItem.prototype, "key", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)({ type: Boolean })
], TabbarItem.prototype, "isSelected", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)()
], TabbarItem.prototype, "text", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)()
], TabbarItem.prototype, "icon", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)()
], TabbarItem.prototype, "badgeText", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)()
], TabbarItem.prototype, "showRedDot", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)()
], TabbarItem.prototype, "textColor", void 0);
tslib_1.__decorate([
    (0, lit_element_1.property)()
], TabbarItem.prototype, "disableSafeAreaPadding", void 0);
exports.default = TabbarItem;
(0, utils_1.defineElement)('tiga-tabbar-item', TabbarItem);
//# sourceMappingURL=tabbar-item.js.map