@junte/ui
Version:
Quality Angular UI components kit
80 lines • 7.37 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { Component, ContentChildren, HostBinding, Input, QueryList } from '@angular/core';
import { PropertyApi } from '../../../core/decorators/api';
import { Size } from '../../../core/enums/size';
import { UI } from '../../../core/enums/ui';
import { AvatarComponent } from '../avatar.component';
const MAX_CAPACITY = 4;
let AvatarsGroupComponent = class AvatarsGroupComponent {
constructor() {
this.host = 'jnt-avatars-group-host';
this._size = Size.normal;
this._total = 0;
this.ui = UI;
this.max = MAX_CAPACITY;
}
set size(size) {
this._size = size || Size.normal;
}
get size() {
return this._size;
}
set total(total) {
this._total = total || 0;
}
get total() {
return this._total;
}
get capacity() {
return Math.min(this.avatars.length, MAX_CAPACITY);
}
get overflow() {
return Math.max(this.total - MAX_CAPACITY, 0);
}
};
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], AvatarsGroupComponent.prototype, "host", void 0);
__decorate([
HostBinding('attr.data-size'),
__metadata("design:type", String)
], AvatarsGroupComponent.prototype, "_size", void 0);
__decorate([
PropertyApi({
description: 'Group size',
path: 'ui.size',
default: Size.normal,
options: [Size.tiny, Size.small, Size.normal, Size.large]
}),
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], AvatarsGroupComponent.prototype, "size", null);
__decorate([
PropertyApi({
description: 'Total avatars (users)',
type: 'number',
default: 0
}),
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], AvatarsGroupComponent.prototype, "total", null);
__decorate([
ContentChildren(AvatarComponent),
__metadata("design:type", QueryList)
], AvatarsGroupComponent.prototype, "avatars", void 0);
__decorate([
HostBinding('attr.data-capacity'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], AvatarsGroupComponent.prototype, "capacity", null);
AvatarsGroupComponent = __decorate([
Component({
selector: 'jnt-avatars-group',
template: "<ng-container *ngFor=\"let avatar of avatars; let i = index;\">\n <jnt-avatar child-of=\"jnt-avatars-group-host\" *ngIf=\"i < max \" data-avatar\n [shape]=\"ui.shape.square\"\n [image]=\"avatar.image\"\n [icon]=\"avatar.icon\"\n [name]=\"avatar.name\"\n [surname]=\"avatar.surname\"\n [size]=\"size\">\n </jnt-avatar>\n</ng-container>\n\n<div child-of=\"jnt-avatars-group-host\" *ngIf=\"overflow\" data-overflow>+{{overflow}}</div>"
})
], AvatarsGroupComponent);
export { AvatarsGroupComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFycy1ncm91cC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AanVudGUvdWkvIiwic291cmNlcyI6WyJsaWIvZWxlbWVudHMvYXZhdGFyL2F2YXRhcnMtZ3JvdXAvYXZhdGFycy1ncm91cC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsZUFBZSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFGLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDaEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQzVDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUV0RCxNQUFNLFlBQVksR0FBRyxDQUFDLENBQUM7QUFNdkIsSUFBYSxxQkFBcUIsR0FBbEMsTUFBYSxxQkFBcUI7SUFBbEM7UUFFcUMsU0FBSSxHQUFHLHdCQUF3QixDQUFDO1FBR25FLFVBQUssR0FBUyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBRTFCLFdBQU0sR0FBRyxDQUFDLENBQUM7UUFFWCxPQUFFLEdBQUcsRUFBRSxDQUFDO1FBQ1IsUUFBRyxHQUFHLFlBQVksQ0FBQztJQXdDckIsQ0FBQztJQWhDVSxJQUFJLElBQUksQ0FBQyxJQUFVO1FBQzFCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxJQUFJLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDbkMsQ0FBQztJQUVELElBQUksSUFBSTtRQUNOLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztJQUNwQixDQUFDO0lBT1EsSUFBSSxLQUFLLENBQUMsS0FBYTtRQUM5QixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBTUQsSUFBSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLFlBQVksQ0FBQyxDQUFDO0lBQ3JELENBQUM7SUFFRCxJQUFJLFFBQVE7UUFDVixPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxZQUFZLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDaEQsQ0FBQztDQUNGLENBQUE7QUFoRDJCO0lBQXpCLFdBQVcsQ0FBQyxXQUFXLENBQUM7O21EQUEwQztBQUduRTtJQURDLFdBQVcsQ0FBQyxnQkFBZ0IsQ0FBQzs7b0RBQ0o7QUFhakI7SUFOUixXQUFXLENBQUM7UUFDWCxXQUFXLEVBQUUsWUFBWTtRQUN6QixJQUFJLEVBQUUsU0FBUztRQUNmLE9BQU8sRUFBRSxJQUFJLENBQUMsTUFBTTtRQUNwQixPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDO0tBQzFELENBQUM7SUFDRCxLQUFLLEVBQUU7OztpREFFUDtBQVdRO0lBTFIsV0FBVyxDQUFDO1FBQ1gsV0FBVyxFQUFFLHVCQUF1QjtRQUNwQyxJQUFJLEVBQUUsUUFBUTtRQUNkLE9BQU8sRUFBRSxDQUFDO0tBQ1gsQ0FBQztJQUNELEtBQUssRUFBRTs7O2tEQUVQO0FBT0Q7SUFEQyxlQUFlLENBQUMsZUFBZSxDQUFDOzhCQUN4QixTQUFTO3NEQUFrQjtBQUdwQztJQURDLFdBQVcsQ0FBQyxvQkFBb0IsQ0FBQzs7O3FEQUdqQztBQTdDVSxxQkFBcUI7SUFKakMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLG1CQUFtQjtRQUM3QiwyZ0JBQWdEO0tBQ2pELENBQUM7R0FDVyxxQkFBcUIsQ0FrRGpDO1NBbERZLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkcmVuLCBIb3N0QmluZGluZywgSW5wdXQsIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUHJvcGVydHlBcGkgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2RlY29yYXRvcnMvYXBpJztcbmltcG9ydCB7IFNpemUgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2VudW1zL3NpemUnO1xuaW1wb3J0IHsgVUkgfSBmcm9tICcuLi8uLi8uLi9jb3JlL2VudW1zL3VpJztcbmltcG9ydCB7IEF2YXRhckNvbXBvbmVudCB9IGZyb20gJy4uL2F2YXRhci5jb21wb25lbnQnO1xuXG5jb25zdCBNQVhfQ0FQQUNJVFkgPSA0O1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdqbnQtYXZhdGFycy1ncm91cCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXJzLWdyb3VwLmVuY2Fwc3VsYXRlZC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBBdmF0YXJzR3JvdXBDb21wb25lbnQge1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5ob3N0JykgcmVhZG9ubHkgaG9zdCA9ICdqbnQtYXZhdGFycy1ncm91cC1ob3N0JztcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1zaXplJylcbiAgX3NpemU6IFNpemUgPSBTaXplLm5vcm1hbDtcblxuICBfdG90YWwgPSAwO1xuXG4gIHVpID0gVUk7XG4gIG1heCA9IE1BWF9DQVBBQ0lUWTtcblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAnR3JvdXAgc2l6ZScsXG4gICAgcGF0aDogJ3VpLnNpemUnLFxuICAgIGRlZmF1bHQ6IFNpemUubm9ybWFsLFxuICAgIG9wdGlvbnM6IFtTaXplLnRpbnksIFNpemUuc21hbGwsIFNpemUubm9ybWFsLCBTaXplLmxhcmdlXVxuICB9KVxuICBASW5wdXQoKSBzZXQgc2l6ZShzaXplOiBTaXplKSB7XG4gICAgdGhpcy5fc2l6ZSA9IHNpemUgfHwgU2l6ZS5ub3JtYWw7XG4gIH1cblxuICBnZXQgc2l6ZSgpIHtcbiAgICByZXR1cm4gdGhpcy5fc2l6ZTtcbiAgfVxuXG4gIEBQcm9wZXJ0eUFwaSh7XG4gICAgZGVzY3JpcHRpb246ICdUb3RhbCBhdmF0YXJzICh1c2VycyknLFxuICAgIHR5cGU6ICdudW1iZXInLFxuICAgIGRlZmF1bHQ6IDBcbiAgfSlcbiAgQElucHV0KCkgc2V0IHRvdGFsKHRvdGFsOiBudW1iZXIpIHtcbiAgICB0aGlzLl90b3RhbCA9IHRvdGFsIHx8IDA7XG4gIH1cblxuICBnZXQgdG90YWwoKSB7XG4gICAgcmV0dXJuIHRoaXMuX3RvdGFsO1xuICB9XG5cbiAgQENvbnRlbnRDaGlsZHJlbihBdmF0YXJDb21wb25lbnQpXG4gIGF2YXRhcnM6IFF1ZXJ5TGlzdDxBdmF0YXJDb21wb25lbnQ+O1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5kYXRhLWNhcGFjaXR5JylcbiAgZ2V0IGNhcGFjaXR5KCkge1xuICAgIHJldHVybiBNYXRoLm1pbih0aGlzLmF2YXRhcnMubGVuZ3RoLCBNQVhfQ0FQQUNJVFkpO1xuICB9XG5cbiAgZ2V0IG92ZXJmbG93KCkge1xuICAgIHJldHVybiBNYXRoLm1heCh0aGlzLnRvdGFsIC0gTUFYX0NBUEFDSVRZLCAwKTtcbiAgfVxufVxuIl19