From 56f4c10f9cc217ddf2841a97781c6dd8fc934c00 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 28 Sep 2021 13:12:55 +0530 Subject: [PATCH 1/9] feat: content functionality for select option --- projects/components/src/select/select-option.component.ts | 5 +++-- projects/components/src/select/select.component.ts | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/projects/components/src/select/select-option.component.ts b/projects/components/src/select/select-option.component.ts index a7df89585..707689e86 100644 --- a/projects/components/src/select/select-option.component.ts +++ b/projects/components/src/select/select-option.component.ts @@ -1,15 +1,16 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; import { Observable, Subject } from 'rxjs'; +import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '../content/content-holder'; import { IconBorder } from '../icon/icon-border'; import { SelectOption } from './select-option'; @Component({ selector: 'ht-select-option', changeDetection: ChangeDetectionStrategy.OnPush, - template: '' // No template, just gathering data + template: CONTENT_HOLDER_TEMPLATE }) -export class SelectOptionComponent implements OnChanges, SelectOption { +export class SelectOptionComponent extends ContentHolder implements OnChanges, SelectOption { @Input() public value!: V; diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index a015067f1..0d5a9ac5b 100644 --- a/projects/components/src/select/select.component.ts +++ b/projects/components/src/select/select.component.ts @@ -68,6 +68,7 @@ import { SelectSize } from './select-size'; +
+
@@ -132,6 +134,7 @@ import { SelectSize } from './select-size'; > {{ item.label }} + Date: Mon, 4 Oct 2021 19:05:24 +0530 Subject: [PATCH 2/9] fix: fixing content in popover trigger --- projects/components/src/select/select.component.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index 0d5a9ac5b..3c5e9b7aa 100644 --- a/projects/components/src/select/select.component.ts +++ b/projects/components/src/select/select.component.ts @@ -1,5 +1,5 @@ import { - AfterContentInit, + AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -68,7 +68,7 @@ import { SelectSize } from './select-size'; - +
- +
@@ -149,7 +149,7 @@ import { SelectSize } from './select-size'; ` }) -export class SelectComponent implements AfterContentInit, OnChanges { +export class SelectComponent implements AfterViewInit, OnChanges { @Input() public size: SelectSize = SelectSize.Medium; @@ -210,7 +210,7 @@ export class SelectComponent implements AfterContentInit, OnChanges { private readonly changeDetector: ChangeDetectorRef ) {} - public ngAfterContentInit(): void { + public ngAfterViewInit(): void { this.selected$ = this.buildObservableOfSelected(); if (this.controlItems !== undefined) { this.topControlItems$ = queryListAndChanges$(this.controlItems).pipe( From f8c87b3996f953f3df61f6c3345a58e8470f786c Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 5 Oct 2021 18:16:49 +0530 Subject: [PATCH 3/9] feat: select option renderer directive --- .../select-option-renderer.directive.ts | 12 +++ .../src/select/select-option.component.ts | 11 ++- .../components/src/select/select-option.ts | 2 +- .../components/src/select/select.component.ts | 97 +++++++++++-------- .../components/src/select/select.module.ts | 17 +++- 5 files changed, 94 insertions(+), 45 deletions(-) create mode 100644 projects/components/src/select/directive/select-option-renderer.directive.ts diff --git a/projects/components/src/select/directive/select-option-renderer.directive.ts b/projects/components/src/select/directive/select-option-renderer.directive.ts new file mode 100644 index 000000000..0287699b8 --- /dev/null +++ b/projects/components/src/select/directive/select-option-renderer.directive.ts @@ -0,0 +1,12 @@ +import { Directive, TemplateRef } from '@angular/core'; + +@Directive({ + selector: '[htSelectOptionRenderer]' +}) +export class SelectOptionRendererDirective { + public constructor(private readonly templateRef: TemplateRef) {} + + public getTemplateRef(): TemplateRef { + return this.templateRef; + } +} diff --git a/projects/components/src/select/select-option.component.ts b/projects/components/src/select/select-option.component.ts index 707689e86..01e9e9cab 100644 --- a/projects/components/src/select/select-option.component.ts +++ b/projects/components/src/select/select-option.component.ts @@ -1,16 +1,16 @@ -import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ContentChild, Input, OnChanges } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; import { Observable, Subject } from 'rxjs'; -import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '../content/content-holder'; import { IconBorder } from '../icon/icon-border'; +import { SelectOptionRendererDirective } from './directive/select-option-renderer.directive'; import { SelectOption } from './select-option'; @Component({ selector: 'ht-select-option', changeDetection: ChangeDetectionStrategy.OnPush, - template: CONTENT_HOLDER_TEMPLATE + template: `` }) -export class SelectOptionComponent extends ContentHolder implements OnChanges, SelectOption { +export class SelectOptionComponent implements OnChanges, SelectOption { @Input() public value!: V; @@ -41,6 +41,9 @@ export class SelectOptionComponent extends ContentHolder implements OnChanges @Input() public disabled?: boolean; + @ContentChild(SelectOptionRendererDirective) + public selectOptionRenderer?: SelectOptionRendererDirective; + private readonly optionChangeSubject$: Subject = new Subject(); public readonly optionChange$: Observable = this.optionChangeSubject$.asObservable(); diff --git a/projects/components/src/select/select-option.ts b/projects/components/src/select/select-option.ts index 054a3b17b..b12538796 100644 --- a/projects/components/src/select/select-option.ts +++ b/projects/components/src/select/select-option.ts @@ -1,6 +1,6 @@ export interface SelectOption { value: V; - label: string; + label?: string; selectedLabel?: string; icon?: string; iconColor?: string; diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index 3c5e9b7aa..be1f655a4 100644 --- a/projects/components/src/select/select.component.ts +++ b/projects/components/src/select/select.component.ts @@ -55,21 +55,28 @@ import { SelectSize } from './select-size'; class="trigger-content menu-with-border" [ngClass]="[this.justifyClass]" > - - - - - + + + + + +
- - - + + < +
+
- - +
+ +
- -
- - +
-
+ + +
+ +
{{ item.label }} -
- -
- + + diff --git a/projects/components/src/select/select.module.ts b/projects/components/src/select/select.module.ts index 7a49b5802..90bea359c 100644 --- a/projects/components/src/select/select.module.ts +++ b/projects/components/src/select/select.module.ts @@ -8,6 +8,7 @@ import { LabelModule } from '../label/label.module'; import { LetAsyncModule } from '../let-async/let-async.module'; import { PopoverModule } from '../popover/popover.module'; import { TooltipModule } from '../tooltip/tooltip.module'; +import { SelectOptionRendererDirective } from './directive/select-option-renderer.directive'; import { SelectControlOptionComponent } from './select-control-option.component'; import { SelectGroupComponent } from './select-group.component'; import { SelectOptionComponent } from './select-option.component'; @@ -25,7 +26,19 @@ import { SelectComponent } from './select.component'; DividerModule, MemoizeModule ], - declarations: [SelectComponent, SelectOptionComponent, SelectGroupComponent, SelectControlOptionComponent], - exports: [SelectComponent, SelectOptionComponent, SelectGroupComponent, SelectControlOptionComponent] + declarations: [ + SelectComponent, + SelectOptionComponent, + SelectGroupComponent, + SelectControlOptionComponent, + SelectOptionRendererDirective + ], + exports: [ + SelectComponent, + SelectOptionComponent, + SelectGroupComponent, + SelectControlOptionComponent, + SelectOptionRendererDirective + ] }) export class SelectModule {} From 29b5f6671d0e8e19d0640df9b2aba0e74d6a2b60 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 5 Oct 2021 19:04:13 +0530 Subject: [PATCH 4/9] fix: removing unwanted change --- projects/components/src/select/select.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index be1f655a4..c50f72c47 100644 --- a/projects/components/src/select/select.component.ts +++ b/projects/components/src/select/select.component.ts @@ -1,5 +1,5 @@ import { - AfterViewInit, + AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -170,7 +170,7 @@ import { SelectSize } from './select-size'; ` }) -export class SelectComponent implements AfterViewInit, OnChanges { +export class SelectComponent implements AfterContentInit, OnChanges { @Input() public size: SelectSize = SelectSize.Medium; @@ -231,7 +231,7 @@ export class SelectComponent implements AfterViewInit, OnChanges { private readonly changeDetector: ChangeDetectorRef ) {} - public ngAfterViewInit(): void { + public ngAfterContentInit(): void { this.selected$ = this.buildObservableOfSelected(); if (this.controlItems !== undefined) { this.topControlItems$ = queryListAndChanges$(this.controlItems).pipe( From a2fd764050725f21d6fede5ee6dc7adfff652cab Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 5 Oct 2021 19:12:50 +0530 Subject: [PATCH 5/9] fix: lint errors and test cases --- .../google-analytics-provider.ts | 2 +- .../select-option-renderer.directive.test.ts | 21 +++++++++++++++++++ .../src/select/select.component.test.ts | 21 +++++++++++++++++++ 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 projects/components/src/select/directive/select-option-renderer.directive.test.ts diff --git a/projects/common/src/telemetry/providers/google-analytics/google-analytics-provider.ts b/projects/common/src/telemetry/providers/google-analytics/google-analytics-provider.ts index 9c005dbb1..c78608278 100644 --- a/projects/common/src/telemetry/providers/google-analytics/google-analytics-provider.ts +++ b/projects/common/src/telemetry/providers/google-analytics/google-analytics-provider.ts @@ -1,5 +1,5 @@ -import { Dictionary } from './../../../utilities/types/types'; import { TelemetryProviderConfig, UserTelemetryProvider, UserTraits } from '../../telemetry'; +import { Dictionary } from './../../../utilities/types/types'; import { loadGA } from './load-snippet'; export class GoogleAnalyticsTelemetry diff --git a/projects/components/src/select/directive/select-option-renderer.directive.test.ts b/projects/components/src/select/directive/select-option-renderer.directive.test.ts new file mode 100644 index 000000000..555ce562f --- /dev/null +++ b/projects/components/src/select/directive/select-option-renderer.directive.test.ts @@ -0,0 +1,21 @@ +import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; +import { SelectOptionRendererDirective } from './select-option-renderer.directive'; + +describe('Let async directive', () => { + let spectator: SpectatorDirective; + + const createDirective = createDirectiveFactory({ + directive: SelectOptionRendererDirective + }); + + beforeEach(() => { + spectator = createDirective(` +
content
+ `); + }); + + test('should render content', () => { + const content = spectator.directive.getTemplateRef(); + expect(content).toExist(); + }); +}); diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts index 5ee890849..7fbfe4804 100644 --- a/projects/components/src/select/select.component.test.ts +++ b/projects/components/src/select/select.component.test.ts @@ -11,6 +11,7 @@ import { SelectControlOptionPosition } from './select-control-option.component'; import { SelectJustify } from './select-justify'; import { SelectComponent, SelectTriggerDisplayMode } from './select.component'; import { SelectModule } from './select.module'; +// describe('Select Component', () => { const hostFactory = createHostFactory>({ @@ -60,6 +61,26 @@ describe('Select Component', () => { expect(spectator.element).toHaveText(selectionOptions[2].label); })); + test('should display initial selection for new select renderer', fakeAsync(() => { + spectator = hostFactory( + ` + + +
new-label
+ + `, + { + hostProps: { + options: selectionOptions, + selected: selectionOptions[1].value + } + } + ); + spectator.tick(); + + expect(spectator.element).toHaveText('new-label'); + })); + test('should display provided options when clicked', fakeAsync(() => { spectator = hostFactory( ` From aaad2adef010d7d5fee15e4cccd4c337282431cb Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 5 Oct 2021 19:18:14 +0530 Subject: [PATCH 6/9] fix: remove unwanted code --- projects/components/src/select/select.component.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts index 7fbfe4804..42e24a49f 100644 --- a/projects/components/src/select/select.component.test.ts +++ b/projects/components/src/select/select.component.test.ts @@ -11,7 +11,6 @@ import { SelectControlOptionPosition } from './select-control-option.component'; import { SelectJustify } from './select-justify'; import { SelectComponent, SelectTriggerDisplayMode } from './select.component'; import { SelectModule } from './select.module'; -// describe('Select Component', () => { const hostFactory = createHostFactory>({ From 664b6baf780f275cf865979aa9bcf4015dda7de1 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 5 Oct 2021 19:59:41 +0530 Subject: [PATCH 7/9] fix: addressing review comments --- .../components/src/select/select.component.ts | 59 +++++++++---------- 1 file changed, 28 insertions(+), 31 deletions(-) diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index c50f72c47..494af48e4 100644 --- a/projects/components/src/select/select.component.ts +++ b/projects/components/src/select/select.component.ts @@ -113,26 +113,23 @@ import { SelectSize } from './select-size';
-
-
- -
+ +
- + +
+
+ -
- - - {{ item.label }} -
- - +
+ + + {{ item.label }} +
+ From 0e8863c0409f7b7d910737d242abc7d469a3553f Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 5 Oct 2021 20:01:44 +0530 Subject: [PATCH 8/9] fix: addressing review comments --- .../select/directive/select-option-renderer.directive.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/components/src/select/directive/select-option-renderer.directive.test.ts b/projects/components/src/select/directive/select-option-renderer.directive.test.ts index 555ce562f..e94b999df 100644 --- a/projects/components/src/select/directive/select-option-renderer.directive.test.ts +++ b/projects/components/src/select/directive/select-option-renderer.directive.test.ts @@ -1,7 +1,7 @@ import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; import { SelectOptionRendererDirective } from './select-option-renderer.directive'; -describe('Let async directive', () => { +describe('Select Option Renderer directive', () => { let spectator: SpectatorDirective; const createDirective = createDirectiveFactory({ From 24738c3a7e4a97a0a8b5a007255df8c3ad7cb5a8 Mon Sep 17 00:00:00 2001 From: Sandeep Kumar Sharma Date: Tue, 5 Oct 2021 20:01:44 +0530 Subject: [PATCH 9/9] fix: address review comments --- .../select/directive/select-option-renderer.directive.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/components/src/select/directive/select-option-renderer.directive.test.ts b/projects/components/src/select/directive/select-option-renderer.directive.test.ts index 555ce562f..e94b999df 100644 --- a/projects/components/src/select/directive/select-option-renderer.directive.test.ts +++ b/projects/components/src/select/directive/select-option-renderer.directive.test.ts @@ -1,7 +1,7 @@ import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; import { SelectOptionRendererDirective } from './select-option-renderer.directive'; -describe('Let async directive', () => { +describe('Select Option Renderer directive', () => { let spectator: SpectatorDirective; const createDirective = createDirectiveFactory({