ngx-pluto/esm2015/lib/title/title.js

ngx-pluto组件库

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component, ViewEncapsulation, Input } from '@angular/core';
/**
 * 标题组件 - 常用于展示panel标题、数据分组标题及公告标题等。
 *
 * <example-url>https://stackblitz.com/edit/np-title-sample?embed=1&file=src/app/app.component.html</example-url>
 */
export class NpTitle {
    constructor() {
        /**
         * 默认标题 - 默认此标题带有下划线及左侧Pluto色加粗border
         */
        this.text = '';
        /**
         * 当标题类型为text或notice时的描述 - 以小字展示与标题右侧
         */
        this.description = '';
        /**
         * 是否显示标题类型为text的左侧Pluto色加粗border
         */
        this.vBar = true;
        /**
         * 是否加粗标题类型为text的标题
         */
        this.bold = false;
        /**
         * 标题类型
         *
         * title - 常用于panel的标题，默认带有左侧加粗border和下划线
         *
         * caption - 常用于分组展示数据标题，默认带有左侧加粗border
         *
         * notice - 类似小喇叭公告，默认左侧有小喇叭图标，接着标题及描述
         */
        this.type = 'title';
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
}
NpTitle.decorators = [
    { type: Component, args: [{
                selector: `np-title`,
                template: "<div class=\"np-title-wrapper flex-wrap row-flex\" [ngClass]=\"{'np-title-underline': type === 'title'}\">\r\n  <ng-container *ngIf=\"type === 'title'\">\r\n    <span class=\"title-text\" [ngClass]=\"{ vBar: vBar, bold: bold }\">{{ text }}</span>\r\n    <span *ngIf=\"description\" class=\"title-description\">{{ description }}</span>\r\n    <ng-container *ngIf=\"!description\">\r\n      <ng-content select=\"title-template\"></ng-content>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"type === 'caption'\">\r\n    <span class=\"caption-text\">{{ text }}</span>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"type === 'notice'\">\r\n    <i class=\"fas fa-volume-up notice-icon\"></i>\r\n    <span class=\"notice-text\">{{ text ? text : '\u6700\u65B0\u516C\u544A | &nbsp;' }}</span>\r\n    <span class=\"notice-description\">{{ description }}</span>\r\n  </ng-container>\r\n</div>\r\n",
                encapsulation: ViewEncapsulation.None,
                styles: [".np-title-wrapper{min-height:45px;width:96%;margin:0 auto;position:relative;padding:0;align-items:baseline}.np-title-wrapper .title-text{position:relative;margin:0 15px 0 0;font-size:18px;line-height:45px;font-weight:500}.np-title-wrapper .vBar{padding-left:10px}.np-title-wrapper .vBar:before{content:'';display:block;width:5px;height:15px;position:absolute;left:0;top:15px}.np-title-wrapper .bold{font-weight:700}.np-title-wrapper .title-description{font-size:14px;font-weight:400;line-height:45px}.np-title-wrapper .caption-text{position:relative;margin:0;font-size:16px;line-height:45px;font-weight:600;padding-left:10px}.np-title-wrapper .caption-text:before{content:'';display:block;width:5px;height:15px;position:absolute;left:0;top:15px}.np-title-wrapper .notice-icon{font-size:16px;margin-right:10px}.np-title-wrapper .notice-text{font-size:16px}.np-title-wrapper .notice-description{cursor:pointer;font-size:14px;font-weight:400}"]
            }] }
];
/** @nocollapse */
NpTitle.ctorParameters = () => [];
NpTitle.propDecorators = {
    text: [{ type: Input }],
    description: [{ type: Input }],
    vBar: [{ type: Input }],
    bold: [{ type: Input }],
    type: [{ type: Input }]
};
if (false) {
    /**
     * 默认标题 - 默认此标题带有下划线及左侧Pluto色加粗border
     * @type {?}
     */
    NpTitle.prototype.text;
    /**
     * 当标题类型为text或notice时的描述 - 以小字展示与标题右侧
     * @type {?}
     */
    NpTitle.prototype.description;
    /**
     * 是否显示标题类型为text的左侧Pluto色加粗border
     * @type {?}
     */
    NpTitle.prototype.vBar;
    /**
     * 是否加粗标题类型为text的标题
     * @type {?}
     */
    NpTitle.prototype.bold;
    /**
     * 标题类型
     *
     * title - 常用于panel的标题，默认带有左侧加粗border和下划线
     *
     * caption - 常用于分组展示数据标题，默认带有左侧加粗border
     *
     * notice - 类似小喇叭公告，默认左侧有小喇叭图标，接着标题及描述
     * @type {?}
     */
    NpTitle.prototype.type;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGl0bGUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtcGx1dG8vIiwic291cmNlcyI6WyJsaWIvdGl0bGUvdGl0bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQVUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFlNUUsTUFBTSxPQUFPLE9BQU87SUF5QmxCOzs7O1FBdEJTLFNBQUksR0FBVyxFQUFFLENBQUM7Ozs7UUFHbEIsZ0JBQVcsR0FBVyxFQUFFLENBQUM7Ozs7UUFHekIsU0FBSSxHQUFZLElBQUksQ0FBQzs7OztRQUdyQixTQUFJLEdBQVksS0FBSyxDQUFDOzs7Ozs7Ozs7O1FBV3RCLFNBQUksR0FBbUMsT0FBTyxDQUFDO0lBRXhDLENBQUM7Ozs7SUFFakIsUUFBUTtJQUVSLENBQUM7OztZQXBDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFVBQVU7Z0JBQ3BCLDA1QkFBeUI7Z0JBRXpCLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJOzthQUN0Qzs7Ozs7bUJBS0UsS0FBSzswQkFHTCxLQUFLO21CQUdMLEtBQUs7bUJBR0wsS0FBSzttQkFXTCxLQUFLOzs7Ozs7O0lBcEJOLHVCQUEyQjs7Ozs7SUFHM0IsOEJBQWtDOzs7OztJQUdsQyx1QkFBOEI7Ozs7O0lBRzlCLHVCQUErQjs7Ozs7Ozs7Ozs7SUFXL0IsdUJBQXdEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgT25Jbml0LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIOagh+mimOe7hOS7tiAtIOW4uOeUqOS6juWxleekunBhbmVs5qCH6aKY44CB5pWw5o2u5YiG57uE5qCH6aKY5Y+K5YWs5ZGK5qCH6aKY562J44CCXHJcbiAqIFxyXG4gKiA8ZXhhbXBsZS11cmw+aHR0cHM6Ly9zdGFja2JsaXR6LmNvbS9lZGl0L25wLXRpdGxlLXNhbXBsZT9lbWJlZD0xJmZpbGU9c3JjL2FwcC9hcHAuY29tcG9uZW50Lmh0bWw8L2V4YW1wbGUtdXJsPlxyXG4gKi9cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBgbnAtdGl0bGVgLFxyXG4gIHRlbXBsYXRlVXJsOiAndGl0bGUuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJ3RpdGxlLnNjc3MnXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgTnBUaXRsZSBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIC8qKum7mOiupOagh+mimCAtIOm7mOiupOatpOagh+mimOW4puacieS4i+WIkue6v+WPiuW3puS+p1BsdXRv6Imy5Yqg57KXYm9yZGVyICovXHJcbiAgQElucHV0KCkgdGV4dDogc3RyaW5nID0gJyc7XHJcblxyXG4gIC8qKuW9k+agh+mimOexu+Wei+S4unRleHTmiJZub3RpY2Xml7bnmoTmj4/ov7AgLSDku6XlsI/lrZflsZXnpLrkuI7moIfpopjlj7PkvqcgKi9cclxuICBASW5wdXQoKSBkZXNjcmlwdGlvbjogc3RyaW5nID0gJyc7XHJcblxyXG4gIC8qKuaYr+WQpuaYvuekuuagh+mimOexu+Wei+S4unRleHTnmoTlt6bkvqdQbHV0b+iJsuWKoOeyl2JvcmRlciAqL1xyXG4gIEBJbnB1dCgpIHZCYXI6IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICAvKirmmK/lkKbliqDnspfmoIfpopjnsbvlnovkuLp0ZXh055qE5qCH6aKYICovXHJcbiAgQElucHV0KCkgYm9sZDogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICAvKipcclxuICAgKiDmoIfpopjnsbvlnotcclxuICAgKiBcclxuICAgKiB0aXRsZSAtIOW4uOeUqOS6jnBhbmVs55qE5qCH6aKY77yM6buY6K6k5bim5pyJ5bem5L6n5Yqg57KXYm9yZGVy5ZKM5LiL5YiS57q/XHJcbiAgICogXHJcbiAgICogY2FwdGlvbiAtIOW4uOeUqOS6juWIhue7hOWxleekuuaVsOaNruagh+mimO+8jOm7mOiupOW4puacieW3puS+p+WKoOeyl2JvcmRlclxyXG4gICAqIFxyXG4gICAqIG5vdGljZSAtIOexu+S8vOWwj+WWh+WPreWFrOWRiu+8jOm7mOiupOW3puS+p+acieWwj+WWh+WPreWbvuagh++8jOaOpeedgOagh+mimOWPiuaPj+i/sFxyXG4gICAqL1xyXG4gIEBJbnB1dCgpIHR5cGU6ICd0aXRsZScgfCAnY2FwdGlvbicgfCAnbm90aWNlJyA9ICd0aXRsZSc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG5cclxuICB9XHJcbn1cclxuXHJcblxyXG4iXX0=