;
+ let component: TestXKeywordComponent;
+ beforeEach(async () => {
+ fixture = TestBed.createComponent(TestXKeywordComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+ it('type.', () => {
+ expect(component.contentRef().nativeElement).toHaveClass('x-keyword-primary');
-@Component({
- selector: 'test-x-keyword',
- template: `
-
-
-
- `,
- styles: [
- `
- .row:not(:last-child) {
- margin-bottom: 1rem;
- }
- .row > x-button:not(:first-child) {
- margin-left: 1rem;
- }
- `
- ]
-})
-class TestXKeywordComponent {}
+ component.type.set('success');
+ fixture.detectChanges();
+ expect(component.contentRef().nativeElement).toHaveClass('x-keyword-success');
+ });
+ it('caseSensitive.', async () => {
+ component.text.set('key');
+ fixture.detectChanges();
+ let keywords = fixture.debugElement.queryAll(By.css('.x-keyword-text'));
+ expect(keywords.length).toBe(1);
+
+ component.caseSensitive.set(false);
+ fixture.detectChanges();
+ keywords = fixture.debugElement.queryAll(By.css('.x-keyword-text'));
+ expect(keywords.length).toBe(2);
+ });
+ it('color.', () => {
+ component.text.set('key');
+ component.color.set('rgb(0, 255, 0)');
+ fixture.detectChanges();
+ const keyword = fixture.debugElement.query(By.css('.x-keyword-text'));
+ const color = XComputedStyle(keyword.nativeElement, 'color');
+ expect(color).toBe('rgb(0, 255, 0)');
+ });
+ it('text.', () => {
+ component.text.set('key');
+ fixture.detectChanges();
+ let keywords = fixture.debugElement.queryAll(By.css('.x-keyword-text'));
+ expect(keywords.length).toBe(1);
+ });
+ });
+});
diff --git a/lib/ng-nest/ui/keyword/keyword.directive.ts b/lib/ng-nest/ui/keyword/keyword.directive.ts
index b0b61994..dc929baf 100644
--- a/lib/ng-nest/ui/keyword/keyword.directive.ts
+++ b/lib/ng-nest/ui/keyword/keyword.directive.ts
@@ -30,6 +30,9 @@ export class XKeywordDirective extends XKeywordProperty {
for (let tx of texts) {
const reg = new RegExp(tx, flags);
textContent = textContent.replace(reg, (p1) => {
+ if (this.color()) {
+ return `${p1}`;
+ }
return `${p1}`;
});
}
diff --git a/lib/ng-nest/ui/list/list.component.html b/lib/ng-nest/ui/list/list.component.html
index 31b005dd..dd9e2fe9 100644
--- a/lib/ng-nest/ui/list/list.component.html
+++ b/lib/ng-nest/ui/list/list.component.html
@@ -87,8 +87,8 @@
@if (icon() && iconSpin()) {
}
- {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}
-
+ {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}
}
@if (isEmpty()) {
diff --git a/lib/ng-nest/ui/list/list.component.spec.ts b/lib/ng-nest/ui/list/list.component.spec.ts
index c045b3be..39eb7a9b 100644
--- a/lib/ng-nest/ui/list/list.component.spec.ts
+++ b/lib/ng-nest/ui/list/list.component.spec.ts
@@ -1,10 +1,19 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, ElementRef, provideExperimentalZonelessChangeDetection, signal, TemplateRef } from '@angular/core';
+import {
+ Component,
+ ElementRef,
+ provideExperimentalZonelessChangeDetection,
+ signal,
+ TemplateRef,
+ viewChild
+} from '@angular/core';
import { By } from '@angular/platform-browser';
import { XListComponent, XListDragDrop, XListNode, XListPrefix } from '@ng-nest/ui/list';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { XData, XSize, XTemplate } from '@ng-nest/ui/core';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { XData, XSize, XSleep, XTemplate } from '@ng-nest/ui/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+import { Observable } from 'rxjs';
@Component({
standalone: true,
@@ -15,43 +24,50 @@ class XTestListComponent {}
@Component({
standalone: true,
- imports: [XListComponent],
+ imports: [XListComponent, FormsModule],
template: `
-
-
+
+
+
+
+ {{ node.label }} tpl
+
`
})
class XTestListPropertyComponent {
+ value = signal('');
data = signal>([]);
multiple = signal(1);
selectAll = signal(false);
@@ -60,9 +76,11 @@ class XTestListPropertyComponent {
drag = signal(false);
objectArray = signal(false);
nodeTpl = signal | null>(null);
+ nodeTemplate = viewChild.required>('nodeTemplate');
header = signal('');
footer = signal('');
scrollElement = signal(null);
+ scrollElementRef = viewChild.required>('scrollElementRef');
loadMore = signal(false);
loadMoreText = signal('');
loadingMoreText = signal('');
@@ -114,11 +132,8 @@ describe(XListPrefix, () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [XTestListComponent, XTestListPropertyComponent],
- providers: [
- provideHttpClient(withInterceptorsFromDi()),
- provideHttpClientTesting(),
- provideExperimentalZonelessChangeDetection()
- ]
+ providers: [provideAnimations(), provideHttpClient(withFetch()), provideExperimentalZonelessChangeDetection()],
+ teardown: { destroyAfterEach: false }
}).compileComponents();
});
describe('default.', () => {
@@ -134,62 +149,199 @@ describe(XListPrefix, () => {
});
describe(`input.`, async () => {
let fixture: ComponentFixture;
- // let component: XTestListPropertyComponent;
+ let component: XTestListPropertyComponent;
beforeEach(async () => {
fixture = TestBed.createComponent(XTestListPropertyComponent);
- // component = fixture.componentInstance;
+ component = fixture.componentInstance;
fixture.detectChanges();
});
it('data.', () => {
- expect(true).toBe(true);
+ component.data.set(['aa', 'bb', 'cc']);
+ fixture.detectChanges();
+ const options = fixture.debugElement.queryAll(By.css('x-list-option'));
+ expect(options[0].nativeElement.innerText).toBe('aa');
+ expect(options[1].nativeElement.innerText).toBe('bb');
+ expect(options[2].nativeElement.innerText).toBe('cc');
});
it('multiple.', () => {
- expect(true).toBe(true);
+ component.data.set(['aa', 'bb', 'cc']);
+ component.multiple.set(2);
+ fixture.detectChanges();
+ const options = fixture.debugElement.queryAll(By.css('x-list-option'));
+ for (let option of options) {
+ option.nativeElement.click();
+ }
+ fixture.detectChanges();
+ expect((component.value() as string[]).join(',')).toBe('aa,bb');
});
it('selectAll.', () => {
- expect(true).toBe(true);
+ component.multiple.set(0);
+ component.selectAll.set(true);
+ component.data.set(['aa', 'bb', 'cc']);
+ fixture.detectChanges();
+
+ const selectAll = fixture.debugElement.query(By.css('.x-list-select-all x-list-option')).nativeElement;
+ selectAll.click();
+ fixture.detectChanges();
+ expect((component.value() as string[]).join(',')).toBe('aa,bb,cc');
});
it('selectAllText.', () => {
- expect(true).toBe(true);
+ component.multiple.set(0);
+ component.selectAll.set(true);
+ component.selectAllText.set('select all');
+ fixture.detectChanges();
+ const selectAll = fixture.debugElement.query(By.css('.x-list-select-all x-list-option')).nativeElement;
+ expect(selectAll.innerText).toBe('select all');
});
it('checked.', () => {
- expect(true).toBe(true);
- });
- it('drag.', () => {
+ component.data.set(['aa', 'bb', 'cc']);
+ component.checked.set(true);
+ fixture.detectChanges();
+ const option = fixture.debugElement.query(By.css('x-list-option:nth-child(1)')).nativeElement;
+ option.click();
+ fixture.detectChanges();
+ const checked = option.querySelector('.x-list-checked');
+ expect(checked).toBeTruthy();
+ });
+ it('drag.', async () => {
+ // cdk drag. unable to simulate the drag effect through javascript
+ //
+ // component.data.set(['aa', 'bb', 'cc']);
+ // component.drag.set(true);
+ // fixture.detectChanges();
+ // const option = fixture.debugElement.query(By.css('x-list-option:nth-child(1)')).nativeElement;
+ // option.dispatchEvent(new MouseEvent('mousedown', { view: window, bubbles: true, cancelable: true }));
+ // fixture.detectChanges();
+ // option.dispatchEvent(
+ // new MouseEvent('mousemove', { view: window, bubbles: true, cancelable: true, clientX: 0, clientY: 72 })
+ // );
+ // fixture.detectChanges();
+ // option.dispatchEvent(new MouseEvent('mouseup', { view: window, bubbles: true, cancelable: true }));
+ // fixture.detectChanges();
+
expect(true).toBe(true);
});
it('objectArray.', () => {
- expect(true).toBe(true);
+ component.data.set(['aa', 'bb', 'cc']);
+ component.multiple.set(2);
+ component.objectArray.set(true);
+ fixture.detectChanges();
+ const options = fixture.debugElement.queryAll(By.css('x-list-option'));
+ for (let option of options) {
+ option.nativeElement.click();
+ }
+ fixture.detectChanges();
+ expect((component.value() as XListNode[]).map((x) => x.id).join(',')).toBe('aa,bb');
});
it('nodeTpl.', () => {
- expect(true).toBe(true);
+ component.nodeTpl.set(component.nodeTemplate());
+ component.data.set(['aa']);
+ fixture.detectChanges();
+ const option = fixture.debugElement.query(By.css('x-list-option'));
+ expect(option.nativeElement.innerText).toBe('aa tpl');
});
it('header.', () => {
- expect(true).toBe(true);
+ component.header.set('header');
+ fixture.detectChanges();
+ const header = fixture.debugElement.query(By.css('.x-list-header')).nativeElement;
+ expect(header.innerText).toBe('header');
});
it('footer.', () => {
- expect(true).toBe(true);
+ component.footer.set('header');
+ fixture.detectChanges();
+ const footer = fixture.debugElement.query(By.css('.x-list-footer')).nativeElement;
+ expect(footer.innerText).toBe('footer');
});
it('scrollElement.', () => {
- expect(true).toBe(true);
- });
- it('loadMore.', () => {
- expect(true).toBe(true);
- });
- it('loadMoreText.', () => {
- expect(true).toBe(true);
- });
- it('loadingMoreText.', () => {
- expect(true).toBe(true);
+ component.scrollElement.set(component.scrollElementRef().nativeElement);
+ component.data.set(['aa', 'bb', 'cc', 'dd', 'ee', 'ff']);
+ fixture.detectChanges();
+ const diff =
+ component.scrollElementRef().nativeElement.scrollHeight -
+ component.scrollElementRef().nativeElement.clientHeight;
+ expect(diff > 0).toBe(true);
+ });
+ it('loadMore.', async () => {
+ const list = ['AA', 'BB', 'CC', 'DD'];
+ component.loadMore.set(true);
+ component.data.set(
+ (index: number) =>
+ new Observable((x) => {
+ setTimeout(() => {
+ x.next(list.map((x) => `${x}-${index}`));
+ x.complete();
+ }, 50);
+ })
+ );
+ fixture.detectChanges();
+ await XSleep(80);
+ const loadMore = fixture.debugElement.query(By.css('.x-list-load-more x-list-option'));
+ loadMore.nativeElement.click();
+ fixture.detectChanges();
+ await XSleep(80);
+ const options = fixture.debugElement.queryAll(By.css('.x-list-content x-list-option'));
+ expect(options.length).toBe(8);
+ });
+ it('loadMoreText.', async () => {
+ component.loadMore.set(true);
+ component.loadMoreText.set('load more');
+ const list = ['AA', 'BB', 'CC', 'DD'];
+ component.data.set(
+ (index: number) =>
+ new Observable((x) => {
+ setTimeout(() => {
+ x.next(list.map((x) => `${x}-${index}`));
+ x.complete();
+ }, 50);
+ })
+ );
+ fixture.detectChanges();
+ await XSleep(80);
+ const loadMore = fixture.debugElement.query(By.css('.x-list-load-more x-list-option'));
+ expect(loadMore.nativeElement.innerText).toBe('load more');
+ });
+ it('loadingMoreText.', async () => {
+ component.loadMore.set(true);
+ component.loadingMoreText.set('loading');
+ const list = ['AA', 'BB', 'CC', 'DD'];
+ component.data.set(
+ (index: number) =>
+ new Observable((x) => {
+ setTimeout(() => {
+ x.next(list.map((x) => `${x}-${index}`));
+ x.complete();
+ }, 50);
+ })
+ );
+ fixture.detectChanges();
+ await XSleep(80);
+ const loadMore = fixture.debugElement.query(By.css('.x-list-load-more x-list-option'));
+ loadMore.nativeElement.click();
+ fixture.detectChanges();
+ await XSleep(30);
+ expect(loadMore.nativeElement.innerText.trim()).toBe('loading');
});
it('virtualScroll.', () => {
- expect(true).toBe(true);
+ component.virtualScroll.set(true);
+ component.scrollHeight.set(100);
+ component.data.set(Array.from({ length: 100 }).map((_x, i) => `a${i + 1}`));
+ fixture.detectChanges();
+ const options = fixture.debugElement.queryAll(By.css('.x-list-content x-list-option'));
+ expect(options.length < 100).toBe(true);
});
it('scrollHeight.', () => {
- expect(true).toBe(true);
+ component.virtualScroll.set(true);
+ component.scrollHeight.set(100);
+ component.data.set(Array.from({ length: 100 }).map((_x, i) => `a${i + 1}`));
+ fixture.detectChanges();
+ const content = fixture.debugElement.query(By.css('.x-list-content'));
+ expect(content.nativeElement.clientHeight).toBe(100);
});
it('heightAdaption.', () => {
- expect(true).toBe(true);
+ component.virtualScroll.set(true);
+ component.heightAdaption.set(component.scrollElementRef().nativeElement);
+ component.data.set(Array.from({ length: 100 }).map((_x, i) => `a${i + 1}`));
+ fixture.detectChanges();
});
it('minBufferPx.', () => {
expect(true).toBe(true);
diff --git a/lib/ng-nest/ui/list/list.component.ts b/lib/ng-nest/ui/list/list.component.ts
index 35959fd1..cb0a8566 100644
--- a/lib/ng-nest/ui/list/list.component.ts
+++ b/lib/ng-nest/ui/list/list.component.ts
@@ -1,5 +1,21 @@
-import { Subject } from 'rxjs';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, SimpleChanges, OnChanges, QueryList, ElementRef, HostBinding, HostListener, ViewChildren, inject, afterRender, viewChild, signal, computed } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import {
+ Component,
+ ViewEncapsulation,
+ ChangeDetectionStrategy,
+ SimpleChanges,
+ OnChanges,
+ QueryList,
+ ElementRef,
+ HostBinding,
+ HostListener,
+ ViewChildren,
+ inject,
+ afterRender,
+ viewChild,
+ signal,
+ computed
+} from '@angular/core';
import { XListPrefix, XListNode, XListProperty } from './list.property';
import { XIsChange, XSetData, XIsEmpty, XIsUndefined, XIsNull, XResize, XResizeObserver } from '@ng-nest/ui/core';
import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
@@ -63,6 +79,7 @@ export class XListComponent extends XListProperty implements OnChanges {
classMap = computed(() => ({
[`${XListPrefix}-${this.size()}`]: this.size() ? true : false
}));
+ private sizeChange: Subscription | null = null;
private resizeObserver!: XResizeObserver;
@HostBinding('attr.role') role = 'listbox';
@@ -112,31 +129,29 @@ export class XListComponent extends XListProperty implements OnChanges {
constructor() {
super();
- afterRender(
- { mixedReadWrite: () => {
+ afterRender({
+ mixedReadWrite: () => {
if (this.virtualScroll() && this.scrollHeight()) {
- this.virtualBody()?.checkViewportSize();
+ this.virtualBody()?.checkViewportSize();
}
- } },
-
- );
+ }
+ });
}
ngOnChanges(changes: SimpleChanges): void {
- const { data } = changes;
+ const { data, scrollHeight, heightAdaption } = changes;
XIsChange(data) && this.setData();
+ XIsChange(scrollHeight) &&
+ this.virtualScroll() &&
+ !this.heightAdaption() &&
+ this.scrollHeightSignal.set(this.scrollHeight());
+ XIsChange(heightAdaption) && this.virtualScroll() && this.setHeightAdaption();
}
ngAfterViewInit() {
this.initKeyManager();
if (this.virtualScroll() && this.heightAdaption()) {
- this.setVirtualScrollHeight();
- XResize(this.heightAdaption() as HTMLElement)
- .pipe(debounceTime(30), takeUntil(this.unSubject))
- .subscribe((x) => {
- this.resizeObserver = x.resizeObserver;
- this.setVirtualScrollHeight();
- });
+ this.setHeightAdaption();
} else {
this.scrollHeightSignal.set(this.scrollHeight());
}
@@ -146,6 +161,16 @@ export class XListComponent extends XListProperty implements OnChanges {
}
}
+ setHeightAdaption() {
+ this.setVirtualScrollHeight();
+ this.sizeChange = XResize(this.heightAdaption() as HTMLElement)
+ .pipe(debounceTime(30), takeUntil(this.unSubject))
+ .subscribe((x) => {
+ this.resizeObserver = x.resizeObserver;
+ this.setVirtualScrollHeight();
+ });
+ }
+
minBufferPxSignal = computed(() => {
if (this.virtualScroll() && this.heightAdaption()) {
return this.getVirtualScrollHeight();