yoyo-ng-modulewindy/src/abc/desc-list/desc-list.component.js

服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容

import { Component, Input, ElementRef, Renderer2, TemplateRef, ContentChildren, QueryList, } from '@angular/core';
import { toNumber } from 'yoyo-ng-module/util';
import { DescListItemComponent } from './desc-list-item.component';
import { AdDescListConfig } from './desc-list.config';
var DescListComponent = /** @class */ (function () {
    // endregion
    function DescListComponent(cog, el, renderer) {
        this.el = el;
        this.renderer = renderer;
        // region fields
        this._title = '';
        this._gutter = 32;
        this.layout = 'horizontal';
        this._xs = 24;
        this._sm = 12;
        this._md = 8;
        this._col = 3;
        this._classMap = [];
        Object.assign(this, cog);
    }
    Object.defineProperty(DescListComponent.prototype, "title", {
        set: function (value) {
            if (value instanceof TemplateRef) {
                this._title = null;
                this._titleTpl = value;
            }
            else
                this._title = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DescListComponent.prototype, "gutter", {
        /** 列表项间距，单位为 `px` */
        get: function () {
            return this._gutter;
        },
        set: function (value) {
            this._gutter = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DescListComponent.prototype, "col", {
        /** 指定信息最多分几列展示，最终一行几列由 col 配置结合响应式规则决定 */
        get: function () {
            return this._col;
        },
        set: function (value) {
            this._col = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    DescListComponent.prototype.setClass = function () {
        var _this = this;
        this._classMap.forEach(function (cls) {
            return _this.renderer.removeClass(_this.el.nativeElement, cls);
        });
        this._classMap = ['ad-desc-list', 'clearfix', this.layout];
        if (this.size)
            this._classMap.push(this.size);
        this._classMap.forEach(function (cls) {
            return _this.renderer.addClass(_this.el.nativeElement, cls);
        });
    };
    DescListComponent.prototype.setResponsive = function () {
        var responsive = {
            1: { xs: 24 },
            2: { xs: 24, sm: 12 },
            3: { xs: 24, sm: 12, md: 8 },
            4: { xs: 24, sm: 12, md: 6 },
        }[this.col > 4 ? 4 : this.col];
        this._xs = responsive.xs;
        this._sm = responsive.sm;
        this._md = responsive.md;
    };
    DescListComponent.prototype.ngOnInit = function () {
        this.setClass();
    };
    DescListComponent.prototype.ngOnChanges = function (changes) {
        this.setClass();
        if (changes.col)
            this.setResponsive();
    };
    DescListComponent.decorators = [
        { type: Component, args: [{
                    selector: 'desc-list',
                    template: "\n  <div *ngIf=\"_title || _titleTpl\" class=\"ad-desc-list__title\">\n    <ng-container *ngIf=\"_title; else _titleTpl\">{{_title}}</ng-container>\n  </div>\n  <div nz-row [nzGutter]=\"gutter\">\n    <div nz-col [nzXs]=\"_xs\" [nzSm]=\"_sm\" [nzMd]=\"_md\" *ngFor=\"let i of _items\">\n      <ng-template [ngTemplateOutlet]=\"i.tpl\"></ng-template>\n    </div>\n  </div>\n  ",
                    preserveWhitespaces: false,
                },] },
    ];
    /** @nocollapse */
    DescListComponent.ctorParameters = function () { return [
        { type: AdDescListConfig },
        { type: ElementRef },
        { type: Renderer2 }
    ]; };
    DescListComponent.propDecorators = {
        title: [{ type: Input }],
        size: [{ type: Input }],
        gutter: [{ type: Input }],
        layout: [{ type: Input }],
        col: [{ type: Input }],
        _items: [{ type: ContentChildren, args: [DescListItemComponent,] }]
    };
    return DescListComponent;
}());
export { DescListComponent };
//# sourceMappingURL=desc-list.component.js.map