From eb443ccbb3febfdd79a2e28f78163b86c9997e43 Mon Sep 17 00:00:00 2001 From: stewones Date: Wed, 16 Oct 2024 19:23:58 -0300 Subject: [PATCH 1/2] feat(command): allow items to be dynamically selected --- .../lib/hlm-command-item.directive.ts.template | 14 +++++++++++++- .../helm/src/lib/hlm-command-item.directive.ts | 14 +++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/libs/cli/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template b/libs/cli/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template index 0718504f4..dec42f48a 100644 --- a/libs/cli/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template +++ b/libs/cli/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template @@ -1,4 +1,4 @@ -import { Directive, computed, input } from '@angular/core'; +import { Directive, ElementRef, Renderer2, computed, inject, input } from '@angular/core'; import { hlm } from '@spartan-ng/ui-core'; import type { ClassValue } from 'clsx'; @@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx'; standalone: true, host: { '[class]': '_computedClass()', + '[attr.aria-selected]': 'selected()', // This is needed after changes to the underlying CMDK library used for the BrnCommand primitive // Ideally we would remove the dependency on this outside module. If you are open to that please // reach out and if you are feeling super ambitious you can implement it yourself and open a PR! @@ -14,7 +15,11 @@ import type { ClassValue } from 'clsx'; }, }) export class HlmCommandItemDirective { + private readonly el = inject(ElementRef); + private readonly renderer = inject(Renderer2); + public readonly userClass = input('', { alias: 'class' }); + public readonly selected = input(false); protected _computedClass = computed(() => hlm( @@ -25,4 +30,11 @@ export class HlmCommandItemDirective { this.userClass(), ), ); + + ngAfterViewChecked() { + const ariaSelected = this.el.nativeElement.hasAttribute('aria-selected'); + if (ariaSelected && !this.selected()) { + this.renderer.removeAttribute(this.el.nativeElement, 'aria-selected'); + } + } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts index 0718504f4..dec42f48a 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts @@ -1,4 +1,4 @@ -import { Directive, computed, input } from '@angular/core'; +import { Directive, ElementRef, Renderer2, computed, inject, input } from '@angular/core'; import { hlm } from '@spartan-ng/ui-core'; import type { ClassValue } from 'clsx'; @@ -7,6 +7,7 @@ import type { ClassValue } from 'clsx'; standalone: true, host: { '[class]': '_computedClass()', + '[attr.aria-selected]': 'selected()', // This is needed after changes to the underlying CMDK library used for the BrnCommand primitive // Ideally we would remove the dependency on this outside module. If you are open to that please // reach out and if you are feeling super ambitious you can implement it yourself and open a PR! @@ -14,7 +15,11 @@ import type { ClassValue } from 'clsx'; }, }) export class HlmCommandItemDirective { + private readonly el = inject(ElementRef); + private readonly renderer = inject(Renderer2); + public readonly userClass = input('', { alias: 'class' }); + public readonly selected = input(false); protected _computedClass = computed(() => hlm( @@ -25,4 +30,11 @@ export class HlmCommandItemDirective { this.userClass(), ), ); + + ngAfterViewChecked() { + const ariaSelected = this.el.nativeElement.hasAttribute('aria-selected'); + if (ariaSelected && !this.selected()) { + this.renderer.removeAttribute(this.el.nativeElement, 'aria-selected'); + } + } } From f7b8930bda70d91deb558c7aa4b3707f9839a6a2 Mon Sep 17 00:00:00 2001 From: stewones Date: Wed, 16 Oct 2024 20:49:32 -0300 Subject: [PATCH 2/2] fix: make it dependent on aria-selected only --- .../files/lib/hlm-command-item.directive.ts.template | 12 +----------- .../helm/src/lib/hlm-command-item.directive.ts | 12 +----------- 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/libs/cli/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template b/libs/cli/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template index dec42f48a..5e631f561 100644 --- a/libs/cli/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template +++ b/libs/cli/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-item.directive.ts.template @@ -1,4 +1,4 @@ -import { Directive, ElementRef, Renderer2, computed, inject, input } from '@angular/core'; +import { Directive, computed, inject, input } from '@angular/core'; import { hlm } from '@spartan-ng/ui-core'; import type { ClassValue } from 'clsx'; @@ -15,9 +15,6 @@ import type { ClassValue } from 'clsx'; }, }) export class HlmCommandItemDirective { - private readonly el = inject(ElementRef); - private readonly renderer = inject(Renderer2); - public readonly userClass = input('', { alias: 'class' }); public readonly selected = input(false); @@ -30,11 +27,4 @@ export class HlmCommandItemDirective { this.userClass(), ), ); - - ngAfterViewChecked() { - const ariaSelected = this.el.nativeElement.hasAttribute('aria-selected'); - if (ariaSelected && !this.selected()) { - this.renderer.removeAttribute(this.el.nativeElement, 'aria-selected'); - } - } } diff --git a/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts b/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts index dec42f48a..5e631f561 100644 --- a/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts +++ b/libs/ui/command/helm/src/lib/hlm-command-item.directive.ts @@ -1,4 +1,4 @@ -import { Directive, ElementRef, Renderer2, computed, inject, input } from '@angular/core'; +import { Directive, computed, inject, input } from '@angular/core'; import { hlm } from '@spartan-ng/ui-core'; import type { ClassValue } from 'clsx'; @@ -15,9 +15,6 @@ import type { ClassValue } from 'clsx'; }, }) export class HlmCommandItemDirective { - private readonly el = inject(ElementRef); - private readonly renderer = inject(Renderer2); - public readonly userClass = input('', { alias: 'class' }); public readonly selected = input(false); @@ -30,11 +27,4 @@ export class HlmCommandItemDirective { this.userClass(), ), ); - - ngAfterViewChecked() { - const ariaSelected = this.el.nativeElement.hasAttribute('aria-selected'); - if (ariaSelected && !this.selected()) { - this.renderer.removeAttribute(this.el.nativeElement, 'aria-selected'); - } - } }