ngx-pluto/esm5/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>
 */
var NpTitle = /** @class */ (function () {
    function NpTitle() {
        /**
         * 默认标题 - 默认此标题带有下划线及左侧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 {?}
     */
    NpTitle.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
    };
    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 = function () { return []; };
    NpTitle.propDecorators = {
        text: [{ type: Input }],
        description: [{ type: Input }],
        vBar: [{ type: Input }],
        bold: [{ type: Input }],
        type: [{ type: Input }]
    };
    return NpTitle;
}());
export { NpTitle };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGl0bGUuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtcGx1dG8vIiwic291cmNlcyI6WyJsaWIvdGl0bGUvdGl0bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQVUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFRNUU7SUFnQ0U7Ozs7UUF0QlMsU0FBSSxHQUFXLEVBQUUsQ0FBQzs7OztRQUdsQixnQkFBVyxHQUFXLEVBQUUsQ0FBQzs7OztRQUd6QixTQUFJLEdBQVksSUFBSSxDQUFDOzs7O1FBR3JCLFNBQUksR0FBWSxLQUFLLENBQUM7Ozs7Ozs7Ozs7UUFXdEIsU0FBSSxHQUFtQyxPQUFPLENBQUM7SUFFeEMsQ0FBQzs7OztJQUVqQiwwQkFBUTs7O0lBQVI7SUFFQSxDQUFDOztnQkFwQ0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxVQUFVO29CQUNwQiwwNUJBQXlCO29CQUV6QixhQUFhLEVBQUUsaUJBQWlCLENBQUMsSUFBSTs7aUJBQ3RDOzs7Ozt1QkFLRSxLQUFLOzhCQUdMLEtBQUs7dUJBR0wsS0FBSzt1QkFHTCxLQUFLO3VCQVdMLEtBQUs7O0lBT1IsY0FBQztDQUFBLEFBckNELElBcUNDO1NBOUJZLE9BQU87Ozs7OztJQUdsQix1QkFBMkI7Ozs7O0lBRzNCLDhCQUFrQzs7Ozs7SUFHbEMsdUJBQThCOzs7OztJQUc5Qix1QkFBK0I7Ozs7Ozs7Ozs7O0lBVy9CLHVCQUF3RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24sIE9uSW5pdCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbi8qKlxyXG4gKiDmoIfpopjnu4Tku7YgLSDluLjnlKjkuo7lsZXnpLpwYW5lbOagh+mimOOAgeaVsOaNruWIhue7hOagh+mimOWPiuWFrOWRiuagh+mimOetieOAglxyXG4gKiBcclxuICogPGV4YW1wbGUtdXJsPmh0dHBzOi8vc3RhY2tibGl0ei5jb20vZWRpdC9ucC10aXRsZS1zYW1wbGU/ZW1iZWQ9MSZmaWxlPXNyYy9hcHAvYXBwLmNvbXBvbmVudC5odG1sPC9leGFtcGxlLXVybD5cclxuICovXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogYG5wLXRpdGxlYCxcclxuICB0ZW1wbGF0ZVVybDogJ3RpdGxlLmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWyd0aXRsZS5zY3NzJ10sXHJcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIE5wVGl0bGUgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICAvKirpu5jorqTmoIfpopggLSDpu5jorqTmraTmoIfpopjluKbmnInkuIvliJLnur/lj4rlt6bkvqdQbHV0b+iJsuWKoOeyl2JvcmRlciAqL1xyXG4gIEBJbnB1dCgpIHRleHQ6IHN0cmluZyA9ICcnO1xyXG5cclxuICAvKirlvZPmoIfpopjnsbvlnovkuLp0ZXh05oiWbm90aWNl5pe255qE5o+P6L+wIC0g5Lul5bCP5a2X5bGV56S65LiO5qCH6aKY5Y+z5L6nICovXHJcbiAgQElucHV0KCkgZGVzY3JpcHRpb246IHN0cmluZyA9ICcnO1xyXG5cclxuICAvKirmmK/lkKbmmL7npLrmoIfpopjnsbvlnovkuLp0ZXh055qE5bem5L6nUGx1dG/oibLliqDnspdib3JkZXIgKi9cclxuICBASW5wdXQoKSB2QmFyOiBib29sZWFuID0gdHJ1ZTtcclxuXHJcbiAgLyoq5piv5ZCm5Yqg57KX5qCH6aKY57G75Z6L5Li6dGV4dOeahOagh+mimCAqL1xyXG4gIEBJbnB1dCgpIGJvbGQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgLyoqXHJcbiAgICog5qCH6aKY57G75Z6LXHJcbiAgICogXHJcbiAgICogdGl0bGUgLSDluLjnlKjkuo5wYW5lbOeahOagh+mimO+8jOm7mOiupOW4puacieW3puS+p+WKoOeyl2JvcmRlcuWSjOS4i+WIkue6v1xyXG4gICAqIFxyXG4gICAqIGNhcHRpb24gLSDluLjnlKjkuo7liIbnu4TlsZXnpLrmlbDmja7moIfpopjvvIzpu5jorqTluKbmnInlt6bkvqfliqDnspdib3JkZXJcclxuICAgKiBcclxuICAgKiBub3RpY2UgLSDnsbvkvLzlsI/lloflj63lhazlkYrvvIzpu5jorqTlt6bkvqfmnInlsI/lloflj63lm77moIfvvIzmjqXnnYDmoIfpopjlj4rmj4/ov7BcclxuICAgKi9cclxuICBASW5wdXQoKSB0eXBlOiAndGl0bGUnIHwgJ2NhcHRpb24nIHwgJ25vdGljZScgPSAndGl0bGUnO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuXHJcbiAgfVxyXG59XHJcblxyXG5cclxuIl19