@libs-ui/components-badge 0.1.1-1

package/README.md

@@ -0,0 +1,141 @@
+# Badge
+
+## Giới thiệu
+
+`@libs-ui/components-badge` là một component Angular linh hoạt để hiển thị các chỉ số số học như thông báo, trạng thái và số liệu quan trọng. Component hỗ trợ nhiều chế độ hiển thị, trạng thái active và tooltip tùy chỉnh.
+
+## Tính năng
+
+- Định dạng số: hiển thị số nguyên, với dấu cộng, viết tắt K (nghìn) và M (triệu)
+- Hỗ trợ trạng thái `active`
+- Tooltip thông tin với cấu hình linh hoạt (`IPopoverOverlay`)
+- Tùy chỉnh giao diện bằng CSS class và điều khiển margin
+
+## Cài đặt
+
+### Yêu cầu
+
+- Angular 18.0.0 trở lên
+- Tailwind CSS 3.3.0 trở lên
+
+Để cài đặt component `badge`, sử dụng npm hoặc yarn:
+
+```bash
+npm install @libs-ui/components-badge
+```
+
+hoặc
+
+```bash
+yarn add @libs-ui/components-badge
+```
+
+## Sử dụng
+
+### Inline Template
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsBadgeComponent],
+  template: `
+    <libs_ui-components-badge
+      [count]="newMessages"
+      [mode]="'k'"
+      [active]="true"
+      [popoverConfig]="{ content: newMessages + ' tin nhắn mới' }"></libs_ui-components-badge>
+  `,
+})
+export class ExampleComponent {
+  newMessages = 12;
+}
+```
+
+### File HTML riêng
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
+
+@Component({
+  selector: 'app-tooltip-example',
+  standalone: true,
+  imports: [LibsUiComponentsBadgeComponent],
+  templateUrl: './tooltip-example.component.html',
+})
+export class TooltipExampleComponent {
+  newMessages = 12;
+}
+```
+
+```html
+<libs_ui-components-badge
+  [count]="newMessages"
+  [popoverConfig]="{ content: newMessages + ' tin nhắn mới' }"
+  [active]="true"></libs_ui-components-badge>
+```
+
+## Công nghệ sử dụng
+
+- **Angular 18**: standalone components, Signals
+- **Tailwind CSS**: cho styling
+
+## API Reference
+
+### Inputs
+
+| Tên                        | Kiểu              | Mặc định                  | Mô tả                                                                         |
+| -------------------------- | ----------------- | ------------------------- | ----------------------------------------------------------------------------- |
+| count                      | `number`          | `0`                       | Số cần hiển thị trong badge                                                   |
+| mode                       | `TYPE_BADGE_MODE` | `undefined`               | Chế độ hiển thị: `'x'` &#124; `'x+'` &#124; `'+x'` &#124; `'k'` &#124; `'0x'` |
+| active                     | `boolean`         | `undefined`               | Xác định badge có đang ở trạng thái active hay không                          |
+| maxCount                   | `number`          | `Number.MAX_SAFE_INTEGER` | Số tối đa để hiển thị trước khi áp dụng định dạng                             |
+| popoverConfig              | `IPopoverOverlay` | `undefined`               | Cấu hình popover khi di chuột qua badge                                       |
+| ignoreMarginDefault        | `boolean`         | `undefined`               | Bỏ qua margin mặc định bên trái của badge                                     |
+| classCircle                | `string`          | `libs-ui-font-h6r`        | CSS class cho vòng tròn badge                                                 |
+| ignoreStopPropagationEvent | `boolean`         | `true`                    | Bỏ qua việc lan truyền sự kiện khi nhấp vào badge                             |
+
+### Outputs
+
+Thư viện không có Outputs.
+
+### Interfaces
+
+#### `IBadge`
+
+```typescript
+export interface IBadge {
+  mode?: TYPE_BADGE_MODE;
+  count?: number;
+  maxCount?: number;
+  classCircle?: string;
+}
+```
+
+Định nghĩa cấu hình badge (inputs).
+
+#### `TYPE_BADGE_MODE`
+
+```typescript
+export type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';
+```
+
+Định nghĩa các chế độ hiển thị badge.
+
+#### `IPopoverOverlay`
+
+```typescript
+interface IPopoverOverlay {
+  content: string | TemplateRef<any>;
+  width?: string;
+  position?: string;
+  zIndex?: number;
+  offset?: { x?: number; y?: number };
+}
+```
+
+Định nghĩa cấu hình cho popover hiển thị khi di chuột qua badge.

package/badge.component.d.ts

@@ -0,0 +1,20 @@
+import { OnDestroy } from '@angular/core';
+import { IPopoverOverlay } from '@libs-ui/components-popover';
+import { TYPE_BADGE_MODE } from './interfaces/mode.type';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsBadgeComponent implements OnDestroy {
+    protected countDisplay: import("@angular/core").Signal<string>;
+    private onDestroy;
+    readonly popoverConfig: import("@angular/core").InputSignal<IPopoverOverlay | undefined>;
+    readonly active: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly count: import("@angular/core").InputSignalWithTransform<number, number>;
+    readonly mode: import("@angular/core").InputSignal<TYPE_BADGE_MODE | undefined>;
+    readonly maxCount: import("@angular/core").InputSignalWithTransform<number, number>;
+    readonly ignoreMarginDefault: import("@angular/core").InputSignal<boolean | undefined>;
+    readonly classCircle: import("@angular/core").InputSignalWithTransform<string, string>;
+    readonly ignoreStopPropagationEvent: import("@angular/core").InputSignalWithTransform<boolean, boolean>;
+    private countDisplayComputed;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsBadgeComponent, "libs_ui-components-badge", never, { "popoverConfig": { "alias": "popoverConfig"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "maxCount": { "alias": "maxCount"; "required": false; "isSignal": true; }; "ignoreMarginDefault": { "alias": "ignoreMarginDefault"; "required": false; "isSignal": true; }; "classCircle": { "alias": "classCircle"; "required": false; "isSignal": true; }; "ignoreStopPropagationEvent": { "alias": "ignoreStopPropagationEvent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/esm2022/badge.component.mjs

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { viewDataNumberByLanguage } from '@libs-ui/utils';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsBadgeComponent {
+    // #region PROPERTY
+    countDisplay = computed(this.countDisplayComputed.bind(this));
+    onDestroy = new Subject();
+    // #region INPUT
+    popoverConfig = input();
+    active = input();
+    count = input(0, { transform: (value) => value ?? 0 });
+    mode = input(); // không truyền mặc định các giá trị < 10 sẽ có số 0 ở đầu
+    maxCount = input(Number.MAX_SAFE_INTEGER, { transform: (value) => value ?? Number.MAX_SAFE_INTEGER }); // nếu count > maxCount sẽ xem xét mode để hiển thị.
+    ignoreMarginDefault = input();
+    classCircle = input('libs-ui-font-h6r', { transform: (value) => value ?? 'libs-ui-font-h6r' });
+    ignoreStopPropagationEvent = input(true, { transform: (value) => value ?? true });
+    /* COMPUTED PROPERTIES FUNCTION */
+    countDisplayComputed() {
+        if (this.mode() === 'k' && this.count() > 999) {
+            const count = this.count() / 1000;
+            if (count > 1000) {
+                return `${viewDataNumberByLanguage(count / 1000, true, 1, false, true)}M`;
+            }
+            return `${viewDataNumberByLanguage(count, true, 1, false, true)}K`;
+        }
+        if (this.mode() === 'x+' && this.count() > this.maxCount()) {
+            const countFormat = viewDataNumberByLanguage(this.maxCount(), true);
+            return `${countFormat}+`;
+        }
+        if (!this.count()) {
+            switch (this.mode()) {
+                case '+x':
+                    return '+00';
+                case 'x+':
+                    return '00';
+                case 'x':
+                    return '0';
+                case '0x':
+                    return '00';
+            }
+        }
+        if (this.count() < 10) {
+            switch (this.mode()) {
+                case '+x':
+                    return `+0${this.count()}`;
+                case 'x+':
+                    return `0${this.count()}`;
+                case 'x':
+                    return `${this.count()}`;
+                case '0x':
+                    return `0${this.count()}`;
+            }
+        }
+        const countFormat = viewDataNumberByLanguage(this.count(), true);
+        return this.mode() === '+x' ? `+${countFormat}` : `${countFormat}`;
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsBadgeComponent, isStandalone: true, selector: "libs_ui-components-badge", inputs: { popoverConfig: { classPropertyName: "popoverConfig", publicName: "popoverConfig", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, ignoreMarginDefault: { classPropertyName: "ignoreMarginDefault", publicName: "ignoreMarginDefault", isSignal: true, isRequired: false, transformFunction: null }, classCircle: { classPropertyName: "classCircle", publicName: "classCircle", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"libs-ui-badge {{ classCircle() }}\"\n  [class.libs-ui-badge-active]=\"active()\"\n  [class.ml-0]=\"ignoreMarginDefault()\"\n  LibsUiComponentsPopoverDirective\n  [type]=\"popoverConfig() ? 'other' : 'text'\"\n  [config]=\"popoverConfig() ?? { content: countDisplay() }\"\n  [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\">\n  {{ countDisplay() }}\n</span>\n", styles: [".libs-ui-badge{width:fit-content;height:20px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#6a7383;background:#e6e7ea;margin-left:8px;padding:2px 6px}.libs-ui-badge-active{color:var(--libs-ui-color-default, #226ff5);background:var(--libs-ui-color-light-3, #f4f8ff)}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsPopoverComponent], template: "<span\n  class=\"libs-ui-badge {{ classCircle() }}\"\n  [class.libs-ui-badge-active]=\"active()\"\n  [class.ml-0]=\"ignoreMarginDefault()\"\n  LibsUiComponentsPopoverDirective\n  [type]=\"popoverConfig() ? 'other' : 'text'\"\n  [config]=\"popoverConfig() ?? { content: countDisplay() }\"\n  [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\">\n  {{ countDisplay() }}\n</span>\n", styles: [".libs-ui-badge{width:fit-content;height:20px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#6a7383;background:#e6e7ea;margin-left:8px;padding:2px 6px}.libs-ui-badge-active{color:var(--libs-ui-color-default, #226ff5);background:var(--libs-ui-color-light-3, #f4f8ff)}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2JhZGdlL3NyYy9iYWRnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2JhZGdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQWEsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRixPQUFPLEVBQW1CLGdDQUFnQyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFZL0IsTUFBTSxPQUFPLDhCQUE4QjtJQUN6QyxtQkFBbUI7SUFDVCxZQUFZLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUVoRSxTQUFTLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztJQUV4QyxnQkFBZ0I7SUFDUCxhQUFhLEdBQUcsS0FBSyxFQUFtQixDQUFDO0lBQ3pDLE1BQU0sR0FBRyxLQUFLLEVBQVcsQ0FBQztJQUMxQixLQUFLLEdBQUcsS0FBSyxDQUFpQixDQUFDLEVBQUUsRUFBRSxTQUFTLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEtBQUssSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3ZFLElBQUksR0FBRyxLQUFLLEVBQW1CLENBQUMsQ0FBQywwREFBMEQ7SUFDM0YsUUFBUSxHQUFHLEtBQUssQ0FBaUIsTUFBTSxDQUFDLGdCQUFnQixFQUFFLEVBQUUsU0FBUyxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxLQUFLLElB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QyxTQUFTLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDNUIsQ0FBQzt3R0F6RVUsOEJBQThCOzRGQUE5Qiw4QkFBOEIsNHJDQ2YzQyxzWUFVQSx1V0RHWSxnQ0FBZ0M7OzRGQUUvQiw4QkFBOEI7a0JBVDFDLFNBQVM7K0JBRUUsMEJBQTBCLGNBR3hCLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLGdDQUFnQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgT25EZXN0cm95LCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IElQb3BvdmVyT3ZlcmxheSwgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnQgfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLXBvcG92ZXInO1xuaW1wb3J0IHsgdmlld0RhdGFOdW1iZXJCeUxhbmd1YWdlIH0gZnJvbSAnQGxpYnMtdWkvdXRpbHMnO1xuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgVFlQRV9CQURHRV9NT0RFIH0gZnJvbSAnLi9pbnRlcmZhY2VzL21vZGUudHlwZSc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1iYWRnZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9iYWRnZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2JhZGdlLmNvbXBvbmVudC5zY3NzJ10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzQmFkZ2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByb3RlY3RlZCBjb3VudERpc3BsYXkgPSBjb21wdXRlZCh0aGlzLmNvdW50RGlzcGxheUNvbXB1dGVkLmJpbmQodGhpcykpO1xuXG4gIHByaXZhdGUgb25EZXN0cm95ID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcblxuICAvLyAjcmVnaW9uIElOUFVUXG4gIHJlYWRvbmx5IHBvcG92ZXJDb25maWcgPSBpbnB1dDxJUG9wb3Zlck92ZXJsYXk+KCk7XG4gIHJlYWRvbmx5IGFjdGl2ZSA9IGlucHV0PGJvb2xlYW4+KCk7XG4gIHJlYWRvbmx5IGNvdW50ID0gaW5wdXQ8bnVtYmVyLCBudW1iZXI+KDAsIHsgdHJhbnNmb3JtOiAodmFsdWUpID0+IHZhbHVlID8/IDAgfSk7XG4gIHJlYWRvbmx5IG1vZGUgPSBpbnB1dDxUWVBFX0JBREdFX01PREU+KCk7IC8vIGtow7RuZyB0cnV54buBbiBt4bq3YyDEkeG7i25oIGPDoWMgZ2nDoSB0cuG7iyA8IDEwIHPhur0gY8OzIHPhu5EgMCDhu58gxJHhuqd1XG4gIHJlYWRvbmx5IG1heENvdW50ID0gaW5wdXQ8bnVtYmVyLCBudW1iZXI+KE51bWJlci5NQVhfU0FGRV9JTlRFR0VSLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyBOdW1iZXIuTUFYX1NBRkVfSU5URUdFUiB9KTsgLy8gbuG6v3UgY291bnQgPiBtYXhDb3VudCBz4bq9IHhlbSB4w6l0IG1vZGUgxJHhu4MgaGnhu4NuIHRo4buLLlxuICByZWFkb25seSBpZ25vcmVNYXJnaW5EZWZhdWx0ID0gaW5wdXQ8Ym9vbGVhbj4oKTtcbiAgcmVhZG9ubHkgY2xhc3NDaXJjbGUgPSBpbnB1dDxzdHJpbmcsIHN0cmluZz4oJ2xpYnMtdWktZm9udC1oNnInLCB7IHRyYW5zZm9ybTogKHZhbHVlKSA9PiB2YWx1ZSA/PyAnbGlicy11aS1mb250LWg2cicgfSk7XG4gIHJlYWRvbmx5IGlnbm9yZVN0b3BQcm9wYWdhdGlvbkV2ZW50ID0gaW5wdXQ8Ym9vbGVhbiwgYm9vbGVhbj4odHJ1ZSwgeyB0cmFuc2Zvcm06ICh2YWx1ZSkgPT4gdmFsdWUgPz8gdHJ1ZSB9KTtcblxuICAvKiBDT01QVVRFRCBQUk9QRVJUSUVTIEZVTkNUSU9OICovXG4gIHByaXZhdGUgY291bnREaXNwbGF5Q29tcHV0ZWQoKSB7XG4gICAgaWYgKHRoaXMubW9kZSgpID09PSAnaycgJiYgdGhpcy5jb3VudCgpID4gOTk5KSB7XG4gICAgICBjb25zdCBjb3VudCA9IHRoaXMuY291bnQoKSAvIDEwMDA7XG5cbiAgICAgIGlmIChjb3VudCA+IDEwMDApIHtcbiAgICAgICAgcmV0dXJuIGAke3ZpZXdEYXRhTnVtYmVyQnlMYW5ndWFnZShjb3VudCAvIDEwMDAsIHRydWUsIDEsIGZhbHNlLCB0cnVlKX1NYDtcbiAgICAgIH1cblxuICAgICAgcmV0dXJuIGAke3ZpZXdEYXRhTnVtYmVyQnlMYW5ndWFnZShjb3VudCwgdHJ1ZSwgMSwgZmFsc2UsIHRydWUpfUtgO1xuICAgIH1cblxuICAgIGlmICh0aGlzLm1vZGUoKSA9PT0gJ3grJyAmJiB0aGlzLmNvdW50KCkgPiB0aGlzLm1heENvdW50KCkpIHtcbiAgICAgIGNvbnN0IGNvdW50Rm9ybWF0ID0gdmlld0RhdGFOdW1iZXJCeUxhbmd1YWdlKHRoaXMubWF4Q291bnQoKSwgdHJ1ZSk7XG5cbiAgICAgIHJldHVybiBgJHtjb3VudEZvcm1hdH0rYDtcbiAgICB9XG5cbiAgICBpZiAoIXRoaXMuY291bnQoKSkge1xuICAgICAgc3dpdGNoICh0aGlzLm1vZGUoKSkge1xuICAgICAgICBjYXNlICcreCc6XG4gICAgICAgICAgcmV0dXJuICcrMDAnO1xuXG4gICAgICAgIGNhc2UgJ3grJzpcbiAgICAgICAgICByZXR1cm4gJzAwJztcblxuICAgICAgICBjYXNlICd4JzpcbiAgICAgICAgICByZXR1cm4gJzAnO1xuXG4gICAgICAgIGNhc2UgJzB4JzpcbiAgICAgICAgICByZXR1cm4gJzAwJztcbiAgICAgIH1cbiAgICB9XG5cbiAgICBpZiAodGhpcy5jb3VudCgpIDwgMTApIHtcbiAgICAgIHN3aXRjaCAodGhpcy5tb2RlKCkpIHtcbiAgICAgICAgY2FzZSAnK3gnOlxuICAgICAgICAgIHJldHVybiBgKzAke3RoaXMuY291bnQoKX1gO1xuXG4gICAgICAgIGNhc2UgJ3grJzpcbiAgICAgICAgICByZXR1cm4gYDAke3RoaXMuY291bnQoKX1gO1xuXG4gICAgICAgIGNhc2UgJ3gnOlxuICAgICAgICAgIHJldHVybiBgJHt0aGlzLmNvdW50KCl9YDtcblxuICAgICAgICBjYXNlICcweCc6XG4gICAgICAgICAgcmV0dXJuIGAwJHt0aGlzLmNvdW50KCl9YDtcbiAgICAgIH1cbiAgICB9XG4gICAgY29uc3QgY291bnRGb3JtYXQgPSB2aWV3RGF0YU51bWJlckJ5TGFuZ3VhZ2UodGhpcy5jb3VudCgpLCB0cnVlKTtcblxuICAgIHJldHVybiB0aGlzLm1vZGUoKSA9PT0gJyt4JyA/IGArJHtjb3VudEZvcm1hdH1gIDogYCR7Y291bnRGb3JtYXR9YDtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMub25EZXN0cm95Lm5leHQoKTtcbiAgICB0aGlzLm9uRGVzdHJveS5jb21wbGV0ZSgpO1xuICB9XG59XG4iLCI8c3BhblxuICBjbGFzcz1cImxpYnMtdWktYmFkZ2Uge3sgY2xhc3NDaXJjbGUoKSB9fVwiXG4gIFtjbGFzcy5saWJzLXVpLWJhZGdlLWFjdGl2ZV09XCJhY3RpdmUoKVwiXG4gIFtjbGFzcy5tbC0wXT1cImlnbm9yZU1hcmdpbkRlZmF1bHQoKVwiXG4gIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyRGlyZWN0aXZlXG4gIFt0eXBlXT1cInBvcG92ZXJDb25maWcoKSA/ICdvdGhlcicgOiAndGV4dCdcIlxuICBbY29uZmlnXT1cInBvcG92ZXJDb25maWcoKSA/PyB7IGNvbnRlbnQ6IGNvdW50RGlzcGxheSgpIH1cIlxuICBbaWdub3JlU3RvcFByb3BhZ2F0aW9uRXZlbnRdPVwiaWdub3JlU3RvcFByb3BhZ2F0aW9uRXZlbnQoKVwiPlxuICB7eyBjb3VudERpc3BsYXkoKSB9fVxuPC9zcGFuPlxuIl19

package/esm2022/index.mjs

@@ -0,0 +1,3 @@
+export * from './badge.component';
+export * from './interfaces';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2JhZGdlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMnO1xuIl19

package/esm2022/interfaces/badge.interface.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2JhZGdlL3NyYy9pbnRlcmZhY2VzL2JhZGdlLmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVFlQRV9CQURHRV9NT0RFIH0gZnJvbSAnLi9tb2RlLnR5cGUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIElCYWRnZSB7XG4gIG1vZGU/OiBUWVBFX0JBREdFX01PREU7XG4gIGNvdW50PzogbnVtYmVyO1xuICBtYXhDb3VudD86IG51bWJlcjtcbiAgY2xhc3NDaXJjbGU/OiBzdHJpbmc7XG59XG4iXX0=

package/esm2022/interfaces/index.mjs

@@ -0,0 +1,3 @@
+export * from './mode.type';
+export * from './badge.interface';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2ludGVyZmFjZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbW9kZS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vYmFkZ2UuaW50ZXJmYWNlJztcbiJdfQ==

package/esm2022/interfaces/mode.type.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kZS50eXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2JhZGdlL3NyYy9pbnRlcmZhY2VzL21vZGUudHlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgVFlQRV9CQURHRV9NT0RFID0gJ3gnIHwgJ3grJyB8ICcreCcgfCAnaycgfCAnMHgnO1xuIl19

package/esm2022/libs-ui-components-badge.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWJhZGdlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2JhZGdlL3NyYy9saWJzLXVpLWNvbXBvbmVudHMtYmFkZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/fesm2022/libs-ui-components-badge.mjs

@@ -0,0 +1,77 @@
+import * as i0 from '@angular/core';
+import { computed, input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { viewDataNumberByLanguage } from '@libs-ui/utils';
+import { Subject } from 'rxjs';
+
+class LibsUiComponentsBadgeComponent {
+    // #region PROPERTY
+    countDisplay = computed(this.countDisplayComputed.bind(this));
+    onDestroy = new Subject();
+    // #region INPUT
+    popoverConfig = input();
+    active = input();
+    count = input(0, { transform: (value) => value ?? 0 });
+    mode = input(); // không truyền mặc định các giá trị < 10 sẽ có số 0 ở đầu
+    maxCount = input(Number.MAX_SAFE_INTEGER, { transform: (value) => value ?? Number.MAX_SAFE_INTEGER }); // nếu count > maxCount sẽ xem xét mode để hiển thị.
+    ignoreMarginDefault = input();
+    classCircle = input('libs-ui-font-h6r', { transform: (value) => value ?? 'libs-ui-font-h6r' });
+    ignoreStopPropagationEvent = input(true, { transform: (value) => value ?? true });
+    /* COMPUTED PROPERTIES FUNCTION */
+    countDisplayComputed() {
+        if (this.mode() === 'k' && this.count() > 999) {
+            const count = this.count() / 1000;
+            if (count > 1000) {
+                return `${viewDataNumberByLanguage(count / 1000, true, 1, false, true)}M`;
+            }
+            return `${viewDataNumberByLanguage(count, true, 1, false, true)}K`;
+        }
+        if (this.mode() === 'x+' && this.count() > this.maxCount()) {
+            const countFormat = viewDataNumberByLanguage(this.maxCount(), true);
+            return `${countFormat}+`;
+        }
+        if (!this.count()) {
+            switch (this.mode()) {
+                case '+x':
+                    return '+00';
+                case 'x+':
+                    return '00';
+                case 'x':
+                    return '0';
+                case '0x':
+                    return '00';
+            }
+        }
+        if (this.count() < 10) {
+            switch (this.mode()) {
+                case '+x':
+                    return `+0${this.count()}`;
+                case 'x+':
+                    return `0${this.count()}`;
+                case 'x':
+                    return `${this.count()}`;
+                case '0x':
+                    return `0${this.count()}`;
+            }
+        }
+        const countFormat = viewDataNumberByLanguage(this.count(), true);
+        return this.mode() === '+x' ? `+${countFormat}` : `${countFormat}`;
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsBadgeComponent, isStandalone: true, selector: "libs_ui-components-badge", inputs: { popoverConfig: { classPropertyName: "popoverConfig", publicName: "popoverConfig", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, ignoreMarginDefault: { classPropertyName: "ignoreMarginDefault", publicName: "ignoreMarginDefault", isSignal: true, isRequired: false, transformFunction: null }, classCircle: { classPropertyName: "classCircle", publicName: "classCircle", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"libs-ui-badge {{ classCircle() }}\"\n  [class.libs-ui-badge-active]=\"active()\"\n  [class.ml-0]=\"ignoreMarginDefault()\"\n  LibsUiComponentsPopoverDirective\n  [type]=\"popoverConfig() ? 'other' : 'text'\"\n  [config]=\"popoverConfig() ?? { content: countDisplay() }\"\n  [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\">\n  {{ countDisplay() }}\n</span>\n", styles: [".libs-ui-badge{width:fit-content;height:20px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#6a7383;background:#e6e7ea;margin-left:8px;padding:2px 6px}.libs-ui-badge-active{color:var(--libs-ui-color-default, #226ff5);background:var(--libs-ui-color-light-3, #f4f8ff)}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsPopoverComponent], template: "<span\n  class=\"libs-ui-badge {{ classCircle() }}\"\n  [class.libs-ui-badge-active]=\"active()\"\n  [class.ml-0]=\"ignoreMarginDefault()\"\n  LibsUiComponentsPopoverDirective\n  [type]=\"popoverConfig() ? 'other' : 'text'\"\n  [config]=\"popoverConfig() ?? { content: countDisplay() }\"\n  [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\">\n  {{ countDisplay() }}\n</span>\n", styles: [".libs-ui-badge{width:fit-content;height:20px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#6a7383;background:#e6e7ea;margin-left:8px;padding:2px 6px}.libs-ui-badge-active{color:var(--libs-ui-color-default, #226ff5);background:var(--libs-ui-color-light-3, #f4f8ff)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsBadgeComponent };
+//# sourceMappingURL=libs-ui-components-badge.mjs.map

package/fesm2022/libs-ui-components-badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"libs-ui-components-badge.mjs","sources":["../../../../../libs-ui/components/badge/src/badge.component.ts","../../../../../libs-ui/components/badge/src/badge.component.html","../../../../../libs-ui/components/badge/src/libs-ui-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, OnDestroy, computed, input } from '@angular/core';\nimport { IPopoverOverlay, LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\nimport { Subject } from 'rxjs';\nimport { TYPE_BADGE_MODE } from './interfaces/mode.type';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-badge',\n  templateUrl: './badge.component.html',\n  styleUrls: ['./badge.component.scss'],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LibsUiComponentsPopoverComponent],\n})\nexport class LibsUiComponentsBadgeComponent implements OnDestroy {\n  // #region PROPERTY\n  protected countDisplay = computed(this.countDisplayComputed.bind(this));\n\n  private onDestroy = new Subject<void>();\n\n  // #region INPUT\n  readonly popoverConfig = input<IPopoverOverlay>();\n  readonly active = input<boolean>();\n  readonly count = input<number, number>(0, { transform: (value) => value ?? 0 });\n  readonly mode = input<TYPE_BADGE_MODE>(); // không truyền mặc định các giá trị < 10 sẽ có số 0 ở đầu\n  readonly maxCount = input<number, number>(Number.MAX_SAFE_INTEGER, { transform: (value) => value ?? Number.MAX_SAFE_INTEGER }); // nếu count > maxCount sẽ xem xét mode để hiển thị.\n  readonly ignoreMarginDefault = input<boolean>();\n  readonly classCircle = input<string, string>('libs-ui-font-h6r', { transform: (value) => value ?? 'libs-ui-font-h6r' });\n  readonly ignoreStopPropagationEvent = input<boolean, boolean>(true, { transform: (value) => value ?? true });\n\n  /* COMPUTED PROPERTIES FUNCTION */\n  private countDisplayComputed() {\n    if (this.mode() === 'k' && this.count() > 999) {\n      const count = this.count() / 1000;\n\n      if (count > 1000) {\n        return `${viewDataNumberByLanguage(count / 1000, true, 1, false, true)}M`;\n      }\n\n      return `${viewDataNumberByLanguage(count, true, 1, false, true)}K`;\n    }\n\n    if (this.mode() === 'x+' && this.count() > this.maxCount()) {\n      const countFormat = viewDataNumberByLanguage(this.maxCount(), true);\n\n      return `${countFormat}+`;\n    }\n\n    if (!this.count()) {\n      switch (this.mode()) {\n        case '+x':\n          return '+00';\n\n        case 'x+':\n          return '00';\n\n        case 'x':\n          return '0';\n\n        case '0x':\n          return '00';\n      }\n    }\n\n    if (this.count() < 10) {\n      switch (this.mode()) {\n        case '+x':\n          return `+0${this.count()}`;\n\n        case 'x+':\n          return `0${this.count()}`;\n\n        case 'x':\n          return `${this.count()}`;\n\n        case '0x':\n          return `0${this.count()}`;\n      }\n    }\n    const countFormat = viewDataNumberByLanguage(this.count(), true);\n\n    return this.mode() === '+x' ? `+${countFormat}` : `${countFormat}`;\n  }\n\n  ngOnDestroy(): void {\n    this.onDestroy.next();\n    this.onDestroy.complete();\n  }\n}\n","<span\n  class=\"libs-ui-badge {{ classCircle() }}\"\n  [class.libs-ui-badge-active]=\"active()\"\n  [class.ml-0]=\"ignoreMarginDefault()\"\n  LibsUiComponentsPopoverDirective\n  [type]=\"popoverConfig() ? 'other' : 'text'\"\n  [config]=\"popoverConfig() ?? { content: countDisplay() }\"\n  [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\">\n  {{ countDisplay() }}\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './badge.component';
+export * from './interfaces';

package/interfaces/badge.interface.d.ts

@@ -0,0 +1,7 @@
+import { TYPE_BADGE_MODE } from './mode.type';
+export interface IBadge {
+    mode?: TYPE_BADGE_MODE;
+    count?: number;
+    maxCount?: number;
+    classCircle?: string;
+}

package/interfaces/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mode.type';
+export * from './badge.interface';

package/interfaces/mode.type.d.ts

@@ -0,0 +1 @@
+export type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@libs-ui/components-badge",
+  "version": "0.1.1-1",
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@libs-ui/components-popover": "0.1.1-1",
+    "@libs-ui/utils": "0.1.1-1",
+    "rxjs": "~7.8.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-badge.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-badge.mjs",
+      "esm": "./esm2022/libs-ui-components-badge.mjs",
+      "default": "./fesm2022/libs-ui-components-badge.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}