fix(components/listing-item): disabled items should not fire mouse ev…

…ents #1947
zyfra · Aug 23, 2024 · 8e725dc · 8e725dc
1 parent be58c9c
commit 8e725dc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/libs/components/src/lib/components/listing-item/listing-item.component.less b/libs/components/src/lib/components/listing-item/listing-item.component.less
@@ -1,5 +1,10 @@
 :host {
  background-color: var(--prizm-background-fill-overlay);
+
+ &.disabled {
+ pointer-events: none;
+ }
+
  .item-container {
  display: flex;
  align-items: center;

diff --git a/libs/components/src/lib/components/listing-item/listing-item.component.ts b/libs/components/src/lib/components/listing-item/listing-item.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 import { PolymorphOutletDirective } from '../../directives';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -13,6 +13,7 @@ import { CommonModule } from '@angular/common';
  imports: [CommonModule, PolymorphOutletDirective],
 })
 export class PrizmListingItemComponent extends PrizmAbstractTestId {
+ @HostBinding('class.disabled')
  @Input()
  get disabled() {
  return this._disabled;
@@ -29,6 +30,7 @@ export class PrizmListingItemComponent extends PrizmAbstractTestId {
  set selected(value: BooleanInput) {
  this._selected = coerceBooleanProperty(value);
  }
+
  private _selected = false;
 
  override readonly testId_ = 'ui_listing_item';