@delon/abc
Version:
Common business components of ng-alain.
133 lines (127 loc) • 8.87 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, inject, ChangeDetectorRef, DestroyRef, numberAttribute, ContentChildren, NgModule } from '@angular/core';
import { Directionality } from '@angular/cdk/bidi';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NzAvatarComponent, NzAvatarModule } from 'ng-zorro-antd/avatar';
import { NzTooltipDirective, NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { CommonModule } from '@angular/common';
class AvatarListItemComponent {
src;
text;
icon;
tips;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AvatarListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.1", type: AvatarListItemComponent, isStandalone: true, selector: "avatar-list-item, [avatar-list-item]", inputs: { src: "src", text: "text", icon: "icon", tips: "tips" }, exportAs: ["avatarListItem"], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AvatarListItemComponent, decorators: [{
type: Component,
args: [{
selector: 'avatar-list-item, [avatar-list-item]',
exportAs: 'avatarListItem',
template: `<ng-content />`,
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}], propDecorators: { src: [{
type: Input
}], text: [{
type: Input
}], icon: [{
type: Input
}], tips: [{
type: Input
}] } });
/**
* @deprecated Will be removed in v20, Please use `nz-avatar-group` instead.
*/
class AvatarListComponent {
cdr = inject(ChangeDetectorRef);
directionality = inject(Directionality);
destroy$ = inject(DestroyRef);
inited = false;
_items;
items = [];
exceedCount = 0;
dir = 'ltr';
cls = '';
avatarSize = 'default';
set size(value) {
this.cls = `avatar-list__item${value === 'default' ? '' : ` avatar-list__${value}`}`;
switch (value) {
case 'large':
case 'small':
case 'default':
this.avatarSize = value;
break;
default:
this.avatarSize = 'small';
break;
}
}
maxLength = 0;
excessItemsStyle = null;
gen() {
const { _items } = this;
const maxLength = this.maxLength > 0 ? this.maxLength : _items.length;
const numOfChildren = _items.length;
const numToShow = maxLength > 0 && maxLength >= numOfChildren ? numOfChildren : maxLength;
this.items = _items.toArray().slice(0, numToShow);
this.exceedCount = numToShow < numOfChildren ? numOfChildren - maxLength : 0;
this.cdr.detectChanges();
}
ngAfterViewInit() {
this.dir = this.directionality.value;
this.directionality.change.pipe(takeUntilDestroyed(this.destroy$)).subscribe(direction => {
this.dir = direction;
this.cdr.detectChanges();
});
this.gen();
this.inited = true;
}
ngOnChanges() {
if (this.inited) {
this.gen();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AvatarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AvatarListComponent, isStandalone: true, selector: "avatar-list", inputs: { size: "size", maxLength: ["maxLength", "maxLength", numberAttribute], excessItemsStyle: "excessItemsStyle" }, host: { properties: { "class.avatar-list": "true", "class.avatar-list-rtl": "dir === 'rtl'" } }, queries: [{ propertyName: "_items", predicate: AvatarListItemComponent }], exportAs: ["avatarList"], usesOnChanges: true, ngImport: i0, template: "<ul class=\"avatar-list__wrap\">\n @for (i of items; track $index) {\n <li [class]=\"cls\">\n @if (i.tips) {\n <nz-avatar\n nz-tooltip\n [nzTooltipTitle]=\"i.tips\"\n [nzSrc]=\"i.src\"\n [nzText]=\"i.text\"\n [nzIcon]=\"i.icon\"\n [nzSize]=\"avatarSize\"\n />\n } @else {\n <nz-avatar [nzSrc]=\"i.src\" [nzText]=\"i.text\" [nzIcon]=\"i.icon\" [nzSize]=\"avatarSize\" />\n }\n </li>\n }\n @if (exceedCount > 0) {\n <li [class]=\"cls\">\n <nz-avatar [nzSize]=\"avatarSize\" style=\"cursor: auto\" [style]=\"excessItemsStyle\" [nzText]=\"'+' + exceedCount\" />\n </li>\n }\n</ul>\n", dependencies: [{ kind: "component", type: NzAvatarComponent, selector: "nz-avatar", inputs: ["nzShape", "nzSize", "nzGap", "nzText", "nzSrc", "nzSrcSet", "nzAlt", "nzIcon"], outputs: ["nzError"], exportAs: ["nzAvatar"] }, { kind: "directive", type: NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AvatarListComponent, decorators: [{
type: Component,
args: [{ selector: 'avatar-list', exportAs: 'avatarList', host: {
'[class.avatar-list]': 'true',
'[class.avatar-list-rtl]': `dir === 'rtl'`
}, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NzAvatarComponent, NzTooltipDirective], template: "<ul class=\"avatar-list__wrap\">\n @for (i of items; track $index) {\n <li [class]=\"cls\">\n @if (i.tips) {\n <nz-avatar\n nz-tooltip\n [nzTooltipTitle]=\"i.tips\"\n [nzSrc]=\"i.src\"\n [nzText]=\"i.text\"\n [nzIcon]=\"i.icon\"\n [nzSize]=\"avatarSize\"\n />\n } @else {\n <nz-avatar [nzSrc]=\"i.src\" [nzText]=\"i.text\" [nzIcon]=\"i.icon\" [nzSize]=\"avatarSize\" />\n }\n </li>\n }\n @if (exceedCount > 0) {\n <li [class]=\"cls\">\n <nz-avatar [nzSize]=\"avatarSize\" style=\"cursor: auto\" [style]=\"excessItemsStyle\" [nzText]=\"'+' + exceedCount\" />\n </li>\n }\n</ul>\n" }]
}], propDecorators: { _items: [{
type: ContentChildren,
args: [AvatarListItemComponent, { descendants: false }]
}], size: [{
type: Input
}], maxLength: [{
type: Input,
args: [{ transform: numberAttribute }]
}], excessItemsStyle: [{
type: Input
}] } });
const COMPONENTS = [AvatarListComponent, AvatarListItemComponent];
/**
* @deprecated Will be removed in v20, Please use `nz-avatar-group` instead.
*/
class AvatarListModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AvatarListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.1", ngImport: i0, type: AvatarListModule, imports: [CommonModule, NzAvatarModule, NzToolTipModule, AvatarListComponent, AvatarListItemComponent], exports: [AvatarListComponent, AvatarListItemComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AvatarListModule, imports: [CommonModule, NzAvatarModule, NzToolTipModule, AvatarListComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AvatarListModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, NzAvatarModule, NzToolTipModule, ...COMPONENTS],
exports: COMPONENTS
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AvatarListComponent, AvatarListItemComponent, AvatarListModule };
//# sourceMappingURL=avatar-list.mjs.map