@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
86 lines • 13.7 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { Utils } from '../../utils/utils.util';
import { AvatarComponent } from '../avatar/avatar.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class AvatarListComponent {
constructor() {
/**
* @ignore
*/
this.avatarListClassName = 'nj-avatar-list';
/**
* Max number of avatar displayed
**/
this.max = 4;
/**
* Avatars size
**/
this.size = 'md';
/**
* Emits event on remaining count avatar mouse click
*/
this.remainingClick = new EventEmitter();
}
ngAfterContentInit() {
this.remainingCount = this.avatars?.toArray()?.length - this.max;
this.avatarsToDisplay = this.getAvatarsToDisplay();
}
/**
* @ignore
*/
getAvatarsToDisplay() {
const avatarsArray = this.avatars?.toArray();
if (Utils.isUndefinedOrNull(avatarsArray)) {
return;
}
return avatarsArray.splice(0, this.max).map((avatar) => {
avatar.size = this.size;
return avatar;
});
}
/**
* @ignore
*/
getAvatarListDensityClass() {
if (!this.density || this.density === 'default') {
return '';
}
return `${this.avatarListClassName}--${this.density}`;
}
/**
* @ignore
*/
getRemainingCountInitials() {
return `+ ${this.remainingCount}`;
}
/**
* @ignore
*/
getRemainingCountLabel() {
return typeof this.showMoreLabel === 'function' ? this.showMoreLabel(this.remainingCount) : this.showMoreLabel;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AvatarListComponent, isStandalone: true, selector: "nj-avatar-list", inputs: { max: "max", density: "density", size: "size", remainingTooltipOptions: "remainingTooltipOptions", showMoreLabel: "showMoreLabel" }, outputs: { remainingClick: "remainingClick" }, queries: [{ propertyName: "avatars", predicate: AvatarComponent }], ngImport: i0, template: "<div class=\"nj-avatar-list\" [ngClass]=\"[getAvatarListDensityClass()]\">\n <ng-container *ngFor=\"let avatar of avatarsToDisplay\">\n <ng-container *ngTemplateOutlet=\"avatar?.avatarTemplate\"></ng-container>\n </ng-container>\n <nj-avatar *ngIf=\"remainingCount > 0\"\n (click)=\"remainingClick?.emit($event)\"\n [tooltipOptions]=\"remainingTooltipOptions\"\n [isClickable]=\"true\"\n [isRemainingCount]=\"true\"\n [initials]=\"getRemainingCountInitials()\"\n [size]=\"size\"\n [label]=\"getRemainingCountLabel()\"\n ></nj-avatar>\n</div>\n", styles: [".nj-avatar-list nj-avatar:not(:first-child){margin-left:calc(var(--nj-avatar-size) * var(--nj-avatar-list-density--default))}.nj-avatar-list--compact nj-avatar:not(:first-child){margin-left:calc(var(--nj-avatar-size) * var(--nj-avatar-list-density--compact))}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "nj-avatar", inputs: ["href", "initials", "label", "size", "hasPicture", "isClickable", "notification", "notificationCapedValue", "notificationEmphasis", "notificationVariant", "notificationUnitLabel", "isRemainingCount", "tooltipOptions"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AvatarListComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-avatar-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [AvatarComponent, CommonModule], template: "<div class=\"nj-avatar-list\" [ngClass]=\"[getAvatarListDensityClass()]\">\n <ng-container *ngFor=\"let avatar of avatarsToDisplay\">\n <ng-container *ngTemplateOutlet=\"avatar?.avatarTemplate\"></ng-container>\n </ng-container>\n <nj-avatar *ngIf=\"remainingCount > 0\"\n (click)=\"remainingClick?.emit($event)\"\n [tooltipOptions]=\"remainingTooltipOptions\"\n [isClickable]=\"true\"\n [isRemainingCount]=\"true\"\n [initials]=\"getRemainingCountInitials()\"\n [size]=\"size\"\n [label]=\"getRemainingCountLabel()\"\n ></nj-avatar>\n</div>\n", styles: [".nj-avatar-list nj-avatar:not(:first-child){margin-left:calc(var(--nj-avatar-size) * var(--nj-avatar-list-density--default))}.nj-avatar-list--compact nj-avatar:not(:first-child){margin-left:calc(var(--nj-avatar-size) * var(--nj-avatar-list-density--compact))}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { max: [{
type: Input
}], density: [{
type: Input
}], size: [{
type: Input
}], remainingTooltipOptions: [{
type: Input
}], remainingClick: [{
type: Output
}], showMoreLabel: [{
type: Input
}], avatars: [{
type: ContentChildren,
args: [AvatarComponent]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLWxpc3QuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXZhdGFyLWxpc3QvYXZhdGFyLWxpc3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYXZhdGFyLWxpc3QvYXZhdGFyLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFFTixpQkFBaUIsRUFDbEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQy9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7O0FBYTdELE1BQU0sT0FBTyxtQkFBbUI7SUFzRDlCO1FBckRBOztXQUVHO1FBQ2Msd0JBQW1CLEdBQUcsZ0JBQWdCLENBQUM7UUFZeEQ7O1lBRUk7UUFDSyxRQUFHLEdBQVksQ0FBQyxDQUFDO1FBTzFCOztZQUVJO1FBQ0ssU0FBSSxHQUFnQixJQUFJLENBQUM7UUFPbEM7O1dBRUc7UUFDTyxtQkFBYyxHQUE2QixJQUFJLFlBQVksRUFBYyxDQUFDO0lBZXJFLENBQUM7SUFFaEIsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsRUFBRSxNQUFNLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUNqRSxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7SUFDckQsQ0FBQztJQUVEOztPQUVHO0lBQ0gsbUJBQW1CO1FBQ2pCLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFDN0MsSUFBSSxLQUFLLENBQUMsaUJBQWlCLENBQUMsWUFBWSxDQUFDLEVBQUU7WUFDekMsT0FBTztTQUNSO1FBQ0QsT0FBTyxZQUFZLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDckQsTUFBTSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1lBQ3hCLE9BQU8sTUFBTSxDQUFDO1FBQ2hCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVEOztPQUVHO0lBQ0gseUJBQXlCO1FBQ3ZCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssU0FBUyxFQUFFO1lBQy9DLE9BQU8sRUFBRSxDQUFDO1NBQ1g7UUFDRCxPQUFPLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixLQUFLLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUN4RCxDQUFDO0lBRUQ7O09BRUc7SUFDSCx5QkFBeUI7UUFDdkIsT0FBTyxLQUFLLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUNwQyxDQUFDO0lBRUQ7O09BRUc7SUFDSCxzQkFBc0I7UUFDcEIsT0FBTyxPQUFPLElBQUksQ0FBQyxhQUFhLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUNqSCxDQUFDOytHQWpHVSxtQkFBbUI7bUdBQW5CLG1CQUFtQiwrUkFtRGIsZUFBZSw2QkM3RWxDLDRuQkFjQSwrVERVWSxlQUFlLHlSQUFFLFlBQVk7OzRGQUU1QixtQkFBbUI7a0JBVC9CLFNBQVM7K0JBQ0UsZ0JBQWdCLG1CQUdULHVCQUF1QixDQUFDLE1BQU0saUJBQ2hDLGlCQUFpQixDQUFDLElBQUksY0FDekIsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLFlBQVksQ0FBQzswRUFxQi9CLEdBQUc7c0JBQVgsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUs7Z0JBS0csSUFBSTtzQkFBWixLQUFLO2dCQUtHLHVCQUF1QjtzQkFBL0IsS0FBSztnQkFLSSxjQUFjO3NCQUF2QixNQUFNO2dCQU9FLGFBQWE7c0JBQXJCLEtBQUs7Z0JBTU4sT0FBTztzQkFETixlQUFlO3VCQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQWZ0ZXJDb250ZW50SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFF1ZXJ5TGlzdCxcbiAgVmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBVdGlscyB9IGZyb20gJy4uLy4uL3V0aWxzL3V0aWxzLnV0aWwnO1xuaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSAnLi4vYXZhdGFyL2F2YXRhci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQXZhdGFyU2l6ZSB9IGZyb20gJy4uL2F2YXRhci9hdmF0YXIubW9kZWwnO1xuaW1wb3J0IHsgVG9vbHRpcE9wdGlvbnMgfSBmcm9tICcuLi90b29sdGlwL3Rvb2x0aXAubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduai1hdmF0YXItbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXItbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2F2YXRhci1saXN0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQXZhdGFyQ29tcG9uZW50LCBDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIEF2YXRhckxpc3RDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHByaXZhdGUgcmVhZG9ubHkgYXZhdGFyTGlzdENsYXNzTmFtZSA9ICduai1hdmF0YXItbGlzdCc7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHJlbWFpbmluZ0NvdW50OiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGF2YXRhcnNUb0Rpc3BsYXk6IEF2YXRhckNvbXBvbmVudFtdO1xuXG4gIC8qKlxuICAgKiAgTWF4IG51bWJlciBvZiBhdmF0YXIgZGlzcGxheWVkXG4gICAqKi9cbiAgQElucHV0KCkgbWF4PzogbnVtYmVyID0gNDtcblxuICAvKipcbiAgICogIERlbnNpdHkgb2YgdGhlIGF2YXRhciBsaXN0XG4gICAqKi9cbiAgQElucHV0KCkgZGVuc2l0eT86ICdkZWZhdWx0JyB8ICdjb21wYWN0JztcblxuICAvKipcbiAgICogIEF2YXRhcnMgc2l6ZVxuICAgKiovXG4gIEBJbnB1dCgpIHNpemU/OiBBdmF0YXJTaXplID0gJ21kJztcblxuICAvKipcbiAgICogUmVtYWluaW5nIGF2YXRhciBUb29sdGlwJ3Mgb3B0aW9uc1xuICAgKiovXG4gIEBJbnB1dCgpIHJlbWFpbmluZ1Rvb2x0aXBPcHRpb25zPzogVG9vbHRpcE9wdGlvbnM7XG5cbiAgLyoqXG4gICAqIEVtaXRzIGV2ZW50IG9uIHJlbWFpbmluZyBjb3VudCBhdmF0YXIgbW91c2UgY2xpY2tcbiAgICovXG4gIEBPdXRwdXQoKSByZW1haW5pbmdDbGljazogRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuXG4gIC8qKlxuICAgKiBMYWJlbCBvZiB0aGUgXCJzaG93IG1vcmVcIiBidXR0b24uXG4gICAqXG4gICAqIEEgZnVuY3Rpb24gY2FuIGJlIHVzZWQgdG8gcHJvdmlkZSBhIGR5bmFtaWMgbGFiZWwgYmFzZWQgb24gdGhlIG51bWJlciBvZiByZW1haW5pbmcgYXZhdGFycyBpbiB0aGUgbGlzdC5cbiAgICovXG4gIEBJbnB1dCgpIHNob3dNb3JlTGFiZWw6IHN0cmluZyB8ICgoZWxlbWVudENvdW50OiBudW1iZXIpID0+IHN0cmluZyk7XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIEBDb250ZW50Q2hpbGRyZW4oQXZhdGFyQ29tcG9uZW50KVxuICBhdmF0YXJzOiBRdWVyeUxpc3Q8QXZhdGFyQ29tcG9uZW50PjtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIHRoaXMucmVtYWluaW5nQ291bnQgPSB0aGlzLmF2YXRhcnM/LnRvQXJyYXkoKT8ubGVuZ3RoIC0gdGhpcy5tYXg7XG4gICAgdGhpcy5hdmF0YXJzVG9EaXNwbGF5ID0gdGhpcy5nZXRBdmF0YXJzVG9EaXNwbGF5KCk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgZ2V0QXZhdGFyc1RvRGlzcGxheSgpOiBBdmF0YXJDb21wb25lbnRbXSB7XG4gICAgY29uc3QgYXZhdGFyc0FycmF5ID0gdGhpcy5hdmF0YXJzPy50b0FycmF5KCk7XG4gICAgaWYgKFV0aWxzLmlzVW5kZWZpbmVkT3JOdWxsKGF2YXRhcnNBcnJheSkpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgcmV0dXJuIGF2YXRhcnNBcnJheS5zcGxpY2UoMCwgdGhpcy5tYXgpLm1hcCgoYXZhdGFyKSA9PiB7XG4gICAgICBhdmF0YXIuc2l6ZSA9IHRoaXMuc2l6ZTtcbiAgICAgIHJldHVybiBhdmF0YXI7XG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgZ2V0QXZhdGFyTGlzdERlbnNpdHlDbGFzcygpOiBzdHJpbmcge1xuICAgIGlmICghdGhpcy5kZW5zaXR5IHx8IHRoaXMuZGVuc2l0eSA9PT0gJ2RlZmF1bHQnKSB7XG4gICAgICByZXR1cm4gJyc7XG4gICAgfVxuICAgIHJldHVybiBgJHt0aGlzLmF2YXRhckxpc3RDbGFzc05hbWV9LS0ke3RoaXMuZGVuc2l0eX1gO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGdldFJlbWFpbmluZ0NvdW50SW5pdGlhbHMoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYCsgJHt0aGlzLnJlbWFpbmluZ0NvdW50fWA7XG4gIH1cblxuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgZ2V0UmVtYWluaW5nQ291bnRMYWJlbCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0eXBlb2YgdGhpcy5zaG93TW9yZUxhYmVsID09PSAnZnVuY3Rpb24nID8gdGhpcy5zaG93TW9yZUxhYmVsKHRoaXMucmVtYWluaW5nQ291bnQpIDogdGhpcy5zaG93TW9yZUxhYmVsO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibmotYXZhdGFyLWxpc3RcIiBbbmdDbGFzc109XCJbZ2V0QXZhdGFyTGlzdERlbnNpdHlDbGFzcygpXVwiPlxuICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBhdmF0YXIgb2YgYXZhdGFyc1RvRGlzcGxheVwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJhdmF0YXI/LmF2YXRhclRlbXBsYXRlXCI+PC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmotYXZhdGFyICpuZ0lmPVwicmVtYWluaW5nQ291bnQgPiAwXCJcbiAgICAgICAgICAgICAoY2xpY2spPVwicmVtYWluaW5nQ2xpY2s/LmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICAgICAgW3Rvb2x0aXBPcHRpb25zXT1cInJlbWFpbmluZ1Rvb2x0aXBPcHRpb25zXCJcbiAgICAgICAgICAgICBbaXNDbGlja2FibGVdPVwidHJ1ZVwiXG4gICAgICAgICAgICAgW2lzUmVtYWluaW5nQ291bnRdPVwidHJ1ZVwiXG4gICAgICAgICAgICAgW2luaXRpYWxzXT1cImdldFJlbWFpbmluZ0NvdW50SW5pdGlhbHMoKVwiXG4gICAgICAgICAgICAgW3NpemVdPVwic2l6ZVwiXG4gICAgICAgICAgICAgW2xhYmVsXT1cImdldFJlbWFpbmluZ0NvdW50TGFiZWwoKVwiXG4gID48L25qLWF2YXRhcj5cbjwvZGl2PlxuIl19