@libs-ui/components-device-support 0.2.357-3 → 0.2.357-30

package/README.md

@@ -50,22 +50,21 @@ import { Component } from '@angular/core';
 import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';
 
 @Component({
-  selector: 'app-basic-example',
+  selector: 'app-example',
   standalone: true,
   imports: [LibsUiComponentsDeviceSupportHandleClickDirective],
   template: `
     <button
       libsUiComponentsDeviceSupportHandleClickDirective
-      (outClick)="handlerButtonClick($event)"
+      (outClick)="onButtonClick($event)"
       class="px-4 py-2 bg-blue-500 text-white rounded">
       Click me
     </button>
   `
 })
-export class BasicExampleComponent {
-  handlerButtonClick(event: Event): void {
-    event.stopPropagation();
-    console.log('Clicked! Event type:', event.type);
+export class ExampleComponent {
+  onButtonClick(event: Event): void {
+    console.log('Clicked!', event.type);
   }
 }
 ```
@@ -79,28 +78,27 @@ import { Component } from '@angular/core';
 import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';
 
 @Component({
-  selector: 'app-custom-target-example',
+  selector: 'app-example',
   standalone: true,
   imports: [LibsUiComponentsDeviceSupportHandleClickDirective],
   template: `
     <!-- Element sẽ được lắng nghe click -->
-    <div #targetEl class="p-4 border rounded cursor-pointer">
-      Click vào đây để trigger event
+    <div #targetElement class="p-4 border rounded bg-gray-50">
+      Target Element - Click vào đây
     </div>
 
-    <!-- Directive host — lắng nghe trên targetEl, không phải div này -->
+    <!-- Directive host — lắng nghe trên targetElement, không phải div này -->
     <div
       libsUiComponentsDeviceSupportHandleClickDirective
-      [elementHandleClick]="targetEl"
-      (outClick)="handlerTargetClick($event)"
-      class="hidden">
+      [elementHandleClick]="targetElement"
+      (outClick)="onTargetClick($event)">
+      Directive host (không click vào đây)
     </div>
   `
 })
-export class CustomTargetExampleComponent {
-  handlerTargetClick(event: Event): void {
-    event.stopPropagation();
-    console.log('Target element clicked, event type:', event.type);
+export class ExampleComponent {
+  onTargetClick(event: Event): void {
+    console.log('Target clicked!', event.type);
   }
 }
 ```
@@ -112,39 +110,36 @@ import { Component } from '@angular/core';
 import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';
 
 @Component({
-  selector: 'app-propagation-example',
+  selector: 'app-example',
   standalone: true,
   imports: [LibsUiComponentsDeviceSupportHandleClickDirective],
   template: `
-    <div (click)="handlerParentClick()">
-      <span class="text-xs text-gray-500">Parent container</span>
-
-      <!-- stopPropagation BẬT (mặc định) — parent sẽ KHÔNG nhận được click -->
+    <!-- Với stopPropagation (mặc định) -->
+    <div (click)="onParentClick()">
       <button
         libsUiComponentsDeviceSupportHandleClickDirective
-        (outClick)="handlerChildClick($event)"
-        class="px-3 py-2 bg-green-500 text-white rounded">
-        stopPropagation: ON (parent không nhận click)
+        (outClick)="onChildClick($event)">
+        stopPropagation: ON (parent sẽ KHÔNG nhận click)
       </button>
+    </div>
 
-      <!-- stopPropagation TẮT — event bubble lên parent bình thường -->
+    <!-- Không stopPropagation -->
+    <div (click)="onParentClick()">
       <button
         libsUiComponentsDeviceSupportHandleClickDirective
         [ignoreStopPropagation]="true"
-        (outClick)="handlerChildClick($event)"
-        class="px-3 py-2 bg-orange-500 text-white rounded">
-        stopPropagation: OFF (parent cũng nhận click)
+        (outClick)="onChildClick($event)">
+        stopPropagation: OFF (parent SẼ nhận click)
       </button>
     </div>
   `
 })
-export class PropagationExampleComponent {
-  handlerChildClick(event: Event): void {
-    event.stopPropagation();
+export class ExampleComponent {
+  onChildClick(event: Event): void {
     console.log('Child clicked');
   }
 
-  handlerParentClick(): void {
+  onParentClick(): void {
     console.log('Parent clicked');
   }
 }
@@ -157,41 +152,47 @@ import { Component, signal } from '@angular/core';
 import { LibsUiComponentsDeviceSupportHandleClickDirective } from '@libs-ui/components-device-support';
 
 @Component({
-  selector: 'app-interactive-example',
+  selector: 'app-example',
   standalone: true,
   imports: [LibsUiComponentsDeviceSupportHandleClickDirective],
   template: `
     <div>
-      <button
-        libsUiComponentsDeviceSupportHandleClickDirective
-        [ignoreStopPropagation]="ignoreStop()"
-        (outClick)="handlerClick($event)"
-        class="px-4 py-2 bg-blue-500 text-white rounded">
-        Click me
+      <button (click)="toggleStopPropagation()">
+        Toggle stopPropagation
       </button>
 
-      <p>Số lần click: {{ clickCount() }}</p>
-      <p>Loại event: {{ lastEventType() }}</p>
-
-      <button (click)="toggleStop()">
-        Toggle stopPropagation (hiện tại: {{ ignoreStop() ? 'OFF' : 'ON' }})
-      </button>
+      <div (click)="onParentClick()">
+        <button
+          libsUiComponentsDeviceSupportHandleClickDirective
+          [ignoreStopPropagation]="ignoreStopPropagation()"
+          (outClick)="onInteractiveClick($event)"
+          class="px-4 py-2 bg-blue-500 text-white rounded">
+          Click me
+        </button>
+      </div>
+
+      <p>Click count: {{ clickCount() }}</p>
+      <p>Last event type: {{ lastEventType() }}</p>
+      <p>ignoreStopPropagation: {{ ignoreStopPropagation() }}</p>
     </div>
   `
 })
-export class InteractiveExampleComponent {
-  protected clickCount = signal<number>(0);
-  protected lastEventType = signal<string>('');
-  protected ignoreStop = signal<boolean>(false);
-
-  handlerClick(event: Event): void {
-    event.stopPropagation();
-    this.clickCount.update(count => count + 1);
+export class ExampleComponent {
+  readonly ignoreStopPropagation = signal<boolean>(false);
+  readonly clickCount = signal<number>(0);
+  readonly lastEventType = signal<string>('');
+
+  toggleStopPropagation(): void {
+    this.ignoreStopPropagation.update((v) => !v);
+  }
+
+  onInteractiveClick(event: Event): void {
+    this.clickCount.update((count) => count + 1);
     this.lastEventType.set(event.type);
   }
 
-  toggleStop(): void {
-    this.ignoreStop.update(v => !v);
+  onParentClick(): void {
+    console.log('Parent clicked');
   }
 }
 ```
@@ -244,11 +245,3 @@ Directive sử dụng `fromEvent()` từ RxJS kết hợp với `takeUntilDestro
 ⚠️ **Selector dạng attribute**: Đây là attribute directive, selector là `[libsUiComponentsDeviceSupportHandleClickDirective]`. Phải dùng dạng attribute trên element, không dùng dạng tag.
 
 ⚠️ **window / document làm target**: Khi truyền `window` hoặc `document` vào `[elementHandleClick]`, directive sẽ lắng nghe click toàn trang. Hãy đảm bảo chỉ có một instance directive làm điều này tại một thời điểm, và component chứa directive phải được destroy đúng cách khi không còn dùng nữa.
-
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: http://localhost:4500/device-support

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@libs-ui/components-device-support",
-  "version": "0.2.357-3",
+  "version": "0.2.357-30",
   "peerDependencies": {
     "@angular/core": ">=18.0.0",
-    "@libs-ui/utils": "0.2.357-3",
+    "@libs-ui/utils": "0.2.357-30",
     "rxjs": "~7.8.0"
   },
   "sideEffects": false,