@libs-ui/components-badge 0.2.227 → 0.2.229

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/esm2022/demo/badge-demo.component.mjs +3 -3
  2. package/fesm2022/libs-ui-components-badge.mjs +2 -2
  3. package/fesm2022/libs-ui-components-badge.mjs.map +1 -1
  4. package/package.json +3 -3
package/esm2022/demo/badge-demo.component.mjs CHANGED
@@ -152,7 +152,7 @@ export class LibsUiComponentsBadgeDemoComponent {
152
152
  });
153
153
  }
154
154
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBadgeDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
155
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsBadgeDemoComponent, isStandalone: true, selector: "lib-badge-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500 mr-4\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }] });
155
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsBadgeDemoComponent, isStandalone: true, selector: "lib-badge-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }] });
156
156
  }
157
157
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBadgeDemoComponent, decorators: [{
158
158
  type: Component,
@@ -160,6 +160,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
160
160
  FormsModule,
161
161
  LibsUiComponentsBadgeComponent,
162
162
  LibsUiComponentsButtonsButtonComponent
163
- ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500 mr-4\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n" }]
163
+ ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n" }]
164
164
  }] });
165
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UtZGVtby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2RlbW8vYmFkZ2UtZGVtby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2RlbW8vYmFkZ2UtZGVtby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsc0NBQXNDLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUU1RixPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7O0FBYXBFLE1BQU0sT0FBTyxrQ0FBa0M7SUFDN0MsU0FBUyxHQUFHO1FBQ1Y7WUFDRSxJQUFJLEVBQUUsT0FBTztZQUNiLElBQUksRUFBRSxRQUFRO1lBQ2QsT0FBTyxFQUFFLEdBQUc7WUFDWixXQUFXLEVBQUUsNkJBQTZCO1NBQzNDO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsTUFBTTtZQUNaLElBQUksRUFBRSxpQkFBaUI7WUFDdkIsT0FBTyxFQUFFLFdBQVc7WUFDcEIsV0FBVyxFQUFFLHVEQUF1RDtTQUNyRTtRQUNEO1lBQ0UsSUFBSSxFQUFFLFFBQVE7WUFDZCxJQUFJLEVBQUUsU0FBUztZQUNmLE9BQU8sRUFBRSxXQUFXO1lBQ3BCLFdBQVcsRUFBRSxzREFBc0Q7U0FDcEU7UUFDRDtZQUNFLElBQUksRUFBRSxVQUFVO1lBQ2hCLElBQUksRUFBRSxRQUFRO1lBQ2QsT0FBTyxFQUFFLHlCQUF5QjtZQUNsQyxXQUFXLEVBQUUsbURBQW1EO1NBQ2pFO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsZUFBZTtZQUNyQixJQUFJLEVBQUUsaUJBQWlCO1lB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cG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtYnV0dG9ucy1idXR0b24nO1xuaW1wb3J0IHsgSVBvcG92ZXJPdmVybGF5IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCYWRnZUNvbXBvbmVudCB9IGZyb20gJy4uL2JhZGdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUWVBFX0JBREdFX01PREUgfSBmcm9tICcuLi9pbnRlcmZhY2VzL21vZGUudHlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1iYWRnZS1kZW1vJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JhZGdlLWRlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50LFxuICAgIExpYnNVaUNvbXBvbmVudHNCdXR0b25zQnV0dG9uQ29tcG9uZW50XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0JhZGdlRGVtb0NvbXBvbmVudCB7XG4gIGlucHV0c0RvYyA9IFtcbiAgICB7XG4gICAgICBuYW1lOiAnY291bnQnLFxuICAgICAgdHlwZTogJ251bWJlcicsXG4gICAgICBkZWZhdWx0OiAnMCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ1Phu5EgY+G6p24gaGnhu4NuIHRo4buLIHRyb25nIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ21vZGUnLFxuICAgICAgdHlwZTogJ1RZUEVfQkFER0VfTU9ERScsXG4gICAgICBkZWZhdWx0OiAndW5kZWZpbmVkJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGNobyBiYWRnZS4gVMO5eSBjaOG7jW46IHgsIHgrLCAreCwgaywgMHgnXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnYWN0aXZlJyxcbiAgICAgIHR5cGU6ICdib29sZWFuJyxcbiAgICAgIGRlZmF1bHQ6ICd1bmRlZmluZWQnLFxuICAgICAgZGVzY3JpcHRpb246ICdYw6FjIMSR4buLbmggYmFkZ2UgY8OzIMSRYW5nIOG7nyB0cuG6oW5nIHRow6FpIGFjdGl2ZSBoYXkga2jDtG5nJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ21heENvdW50JyxcbiAgICAgIHR5cGU6ICdudW1iZXInLFxuICAgICAgZGVmYXVsdDogJ051bWJlci5NQVhfU0FGRV9JTlRFR0VSJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnU+G7kSB04buRaSDEkWEgxJHhu4MgaGnhu4NuIHRo4buLIHRyxrDhu5tjIGtoaSDDoXAgZOG7pW5nIMSR4buLbmggZOG6oW5nJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ3BvcG92ZXJDb25maWcnLFxuICAgICAgdHlwZTogJ0lQb3BvdmVyT3ZlcmxheScsXG4gICAgICBkZWZhdWx0OiAndW5kZWZpbmVkJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ+G6pXUgaMOsbmggY2hvIHBvcG92ZXIga2hpIGRpIGNodeG7mXQgcXVhIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ2lnbm9yZU1hcmdpbkRlZmF1bHQnLFxuICAgICAgdHlwZTogJ2Jvb2xlYW4nLFxuICAgICAgZGVmYXVsdDogJ3VuZGVmaW5lZCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ0PDsyBi4buPIHF1YSBtYXJnaW4gbeG6t2MgxJHhu4tuaCBiw6puIHRyw6FpIGPhu6dhIGJhZGdlIGhheSBraMO0bmcnXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnY2xhc3NDaXJjbGUnLFxuICAgICAgdHlwZTogJ3N0cmluZycsXG4gICAgICBkZWZhdWx0OiAnbGlicy11aS1mb250LWg2cicsXG4gICAgICBkZXNjcmlwdGlvbjogJ0zhu5twIENTUyDEkeG7gyB04bqhbyBraeG7g3UgY2hvIHbDsm5nIHRyw7JuIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ2lnbm9yZVN0b3BQcm9wYWdhdGlvbkV2ZW50JyxcbiAgICAgIHR5cGU6ICdib29sZWFuJyxcbiAgICAgIGRlZmF1bHQ6ICd0cnVlJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ8OzIGLhu48gcXVhIHZp4buHYyBsYW4gdHJ1eeG7gW4gc+G7sSBraeG7h24ga2hpIG5o4bqlcCB2w6BvIGJhZGdlIGhheSBraMO0bmcnXG4gICAgfVxuICBdO1xuXG4gIGludGVyZmFjZXNEb2MgPSBbXG4gICAge1xuICAgICAgbmFtZTogJ1RZUEVfQkFER0VfTU9ERScsXG4gICAgICBjb2RlOiBcInR5cGUgVFlQRV9CQURHRV9NT0RFID0gJ3gnIHwgJ3grJyB8ICcreCcgfCAnaycgfCAnMHgnO1wiLFxuICAgICAgZGVzY3JpcHRpb246ICfEkOG7i25oIG5naMSpYSBraeG7g3UgY2hvIGPDoWMgY2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGJhZGdlLiBN4buXaSBjaOG6vyDEkeG7mSB0aGF5IMSR4buVaSBjw6FjaCBoaeG7g24gdGjhu4sgc+G7kS4nXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnSVBvcG92ZXJPdmVybGF5JyxcbiAgICAgIGNvZGU6IFwiaW50ZXJmYWNlIElQb3BvdmVyT3ZlcmxheSB7XFxuICBjb250ZW50OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xcbiAgd2lkdGg/OiBzdHJpbmc7XFxuICBwb3NpdGlvbj86IHN0cmluZztcXG4gIHpJbmRleD86IG51bWJlcjtcXG4gIG9mZnNldD86IHsgeD86IG51bWJlcjsgeT86IG51bWJlcjsgfTtcXG59XCIsXG4gICAgICBkZXNjcmlwdGlvbjogJ0ludGVyZmFjZSDEkeG7gyBj4bqldSBow6xuaCBwb3BvdmVyIHh14bqldCBoaeG7h24ga2hpIGRpIGNodeG7mXQgcXVhIGJhZGdlLidcbiAgICB9XG4gIF07XG5cbiAgZmVhdHVyZXMgPSBbXG4gICAge1xuICAgICAgaWQ6IDEsXG4gICAgICBpY29uOiAn8J+UoicsXG4gICAgICB0aXRsZTogJ8SQ4buLbmggZOG6oW5nIHPhu5EnLFxuICAgICAgZGVzY3JpcHRpb246ICdIaeG7g24gdGjhu4sgc+G7kSB0aGVvIG5oaeG7gXUgxJHhu4tuaCBk4bqhbmc6IHRow7RuZyB0aMaw4budbmcsIHbhu5tpIHRp4buBbiB04buRL2jhuq11IHThu5EsIGhv4bq3YyB2aeG6v3QgdOG6r3QgKEsgY2hvIGjDoG5nIG5naMOsbikuJ1xuICAgIH0sXG4gICAge1xuICAgICAgaWQ6IDIsXG4gICAgICBpY29uOiAn8J+OqCcsXG4gICAgICB0aXRsZTogJ1Ry4bqhbmcgdGjDoWkgaGnhu4NuIHRo4buLJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ2h1eeG7g24gxJHhu5VpIGdp4buvYSB0cuG6oW5nIHRow6FpIGFjdGl2ZSB2w6AgbeG6t2MgxJHhu4tuaCBk4buxYSB0csOqbiBuaHUgY+G6p3UgY+G7p2Eg4bupbmcgZOG7pW5nLidcbiAgICB9LFxuICAgIHtcbiAgICAgIGlkOiAzLFxuICAgICAgaWNvbjogJ/CfkqwnLFxuICAgICAgdGl0bGU6ICdI4buXIHRy4bujIFRvb2x0aXAnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaMOqbSB0b29sdGlwIHRow7RuZyB0aW4gY2hvIGPDoWMgYmFkZ2UgduG7m2kgbuG7mWkgZHVuZyB2w6AgduG7iyB0csOtIHTDuXkgY2jhu4luaC4nXG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogNCxcbiAgICAgIGljb246ICfwn5OPJyxcbiAgICAgIHRpdGxlOiAnVMO5eSBiaeG6v24gbGluaCBob+G6oXQnLFxuICAgICAgZGVzY3JpcHRpb246ICdUw7l5IGNo4buJbmggZ2lhbyBkaeG7h24gduG7m2kgY8OhYyBs4bubcCBDU1MgdsOgIMSRaeG7gXUga2hp4buDbiBtYXJnaW4uJ1xuICAgIH1cbiAgXTtcblxuICAvLyBEZW1vIHByb3BlcnRpZXNcbiAgZGVtb0NvdW50ID0gMjU7XG4gIGRlbW9NYXhDb3VudCA9IDk5O1xuICBkZW1vQWN0aXZlID0gdHJ1ZTtcbiAgZGVtb01vZGU6IFRZUEVfQkFER0VfTU9ERSA9ICd4JztcbiAgZGVtb01vZGVzOiBUWVBFX0JBREdFX01PREVbXSA9IFsneCcsICd4KycsICcreCcsICdrJywgJzB4J107XG4gIGRlbW9Qb3BvdmVyQ29uZmlnOiBJUG9wb3Zlck92ZXJsYXkgPSB7IGNvbnRlbnQ6ICdCYWRnZSBUb29sdGlwJyB9O1xuICBkZW1vVXNlTWF4Q291bnQgPSB0cnVlO1xuXG4gIC8vIE1ldGhvZHMgZm9yIGRlbW8gaW50ZXJhY3Rpb25cbiAgaW5jcmVtZW50Q291bnQoKSB7XG4gICAgdGhpcy5kZW1vQ291bnQgKz0gNTtcbiAgfVxuXG4gIGRlY3JlbWVudENvdW50KCkge1xuICAgIGlmICh0aGlzLmRlbW9Db3VudCA+IDApIHtcbiAgICAgIHRoaXMuZGVtb0NvdW50IC09IDU7XG4gICAgfVxuICB9XG5cbiAgdmFsaWRhdGVDb3VudCgpIHtcbiAgICBpZiAoaXNOYU4odGhpcy5kZW1vQ291bnQpIHx8IHRoaXMuZGVtb0NvdW50IDwgMCkge1xuICAgICAgdGhpcy5kZW1vQ291bnQgPSAwO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmRlbW9Db3VudCA9IE1hdGguZmxvb3IodGhpcy5kZW1vQ291bnQpO1xuICAgIH1cbiAgfVxuXG4gIHZhbGlkYXRlTWF4Q291bnQoKSB7XG4gICAgaWYgKGlzTmFOKHRoaXMuZGVtb01heENvdW50KSB8fCB0aGlzLmRlbW9NYXhDb3VudCA8IDEpIHtcbiAgICAgIHRoaXMuZGVtb01heENvdW50ID0gOTk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZGVtb01heENvdW50ID0gTWF0aC5mbG9vcih0aGlzLmRlbW9NYXhDb3VudCk7XG4gICAgfVxuICB9XG5cbiAgc2V0TGFyZ2VDb3VudCgpIHtcbiAgICB0aGlzLmRlbW9Db3VudCA9IDEyNTA7XG4gIH1cblxuICByZXNldENvdW50KCkge1xuICAgIHRoaXMuZGVtb0NvdW50ID0gMjU7XG4gICAgdGhpcy5kZW1vTWF4Q291bnQgPSA5OTtcbiAgfVxuXG4gIHRvZ2dsZUFjdGl2ZSgpIHtcbiAgICB0aGlzLmRlbW9BY3RpdmUgPSAhdGhpcy5kZW1vQWN0aXZlO1xuICB9XG5cbiAgdG9nZ2xlVXNlTWF4Q291bnQoKSB7XG4gICAgdGhpcy5kZW1vVXNlTWF4Q291bnQgPSAhdGhpcy5kZW1vVXNlTWF4Q291bnQ7XG4gIH1cblxuICBjaGFuZ2VNb2RlKG1vZGU6IFRZUEVfQkFER0VfTU9ERSkge1xuICAgIHRoaXMuZGVtb01vZGUgPSBtb2RlO1xuICB9XG5cbiAgY29weVRvQ2xpcGJvYXJkKHRleHQ6IHN0cmluZykge1xuICAgIG5hdmlnYXRvci5jbGlwYm9hcmQud3JpdGVUZXh0KHRleHQpXG4gICAgICAudGhlbigoKSA9PiB7XG4gICAgICAgIGNvbnNvbGUubG9nKCdUZXh0IGNvcGllZCB0byBjbGlwYm9hcmQnKTtcbiAgICAgIH0pXG4gICAgICAuY2F0Y2goKGVycikgPT4ge1xuICAgICAgICBjb25zb2xlLmVycm9yKCdDb3VsZCBub3QgY29weSB0ZXh0OiAnLCBlcnIpO1xuICAgICAgfSk7XG4gIH1cbn0gIiwiPGRpdiBjbGFzcz1cIm1heC13LTZ4bCBteC1hdXRvIHAtNSBmb250LXNhbnMgdGV4dC1ncmF5LTgwMFwiPlxuICA8aGVhZGVyIGNsYXNzPVwidGV4dC1jZW50ZXIgcHktMTAgYmctd2hpdGUgcm91bmRlZC1sZyBtYi04IHNoYWRvdy1zbVwiPlxuICAgIDxoMSBjbGFzcz1cInRleHQtNHhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTJcIj5EZW1vIEJhZGdlIENvbXBvbmVudDwvaDE+XG4gICAgPHAgY2xhc3M9XCJ0ZXh0LXhsIHRleHQtZ3JheS01MDBcIj5Db21wb25lbnQgQW5ndWxhciBsaW5oIGhv4bqhdCDEkeG7gyBoaeG7g24gdGjhu4sgY8OhYyBjaOG7iSBz4buRIHPhu5EgaOG7jWM8L3A+XG4gIDwvaGVhZGVyPlxuXG4gIDxtYWluPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5HaeG7m2kgdGhp4buHdTwvaDI+XG4gICAgICA8cD5cbiAgICAgICAgPGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPiYjNjQ7bGlicy11aS9jb21wb25lbnRzLWJhZGdlPC9jb2RlPiBsw6AgbeG7mXQgY29tcG9uZW50XG4gICAgICAgIEFuZ3VsYXIgbGluaCBob+G6oXQgxJHhu4MgaGnhu4NuIHRo4buLIGPDoWMgY2jhu4kgc+G7kSBz4buRIGjhu41jIHRoZW8gbmhp4buBdSDEkeG7i25oIGThuqFuZyBraMOhYyBuaGF1LiBOw7MgaG/DoG4gaOG6o28gY2hvIHZp4buHYyBoaeG7g24gdGjhu4sgc+G7kVxuICAgICAgICBsxrDhu6NuZyB0aMO0bmcgYsOhbywgY2jhu4kgYsOhbyB0cuG6oW5nIHRow6FpIHbDoCBi4bqldCBr4buzIG5n4buvIGPhuqNuaCBuw6BvIG3DoCBi4bqhbiBj4bqnbiBoaeG7g24gdGjhu4sgbeG7mXQgZ2nDoSB0cuG7iyBz4buRIGjhu41jIG7hu5VpIGLhuq10IHRy4buxY1xuICAgICAgICBxdWFuLlxuICAgICAgPC9wPlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6BpIMSR4bq3dDwvaDI+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi02XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTNcIj5Zw6p1IGPhuqd1PC9oMz5cbiAgICAgICAgPHVsIGNsYXNzPVwibGlzdC1kaXNjIHBsLTUgc3BhY2UteS0yIHRleHQtZ3JheS02MDBcIj5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+QW5ndWxhcjwvc3Bhbj46IDE4LjAuMCB0cuG7nyBsw6puPC9saT5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+VGFpbHdpbmQgQ1NTPC9zcGFuPjogMy4zLjAgdHLhu58gbMOqbjwvbGk+XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPHAgY2xhc3M9XCJtYi00XCI+xJDhu4MgY8OgaSDEkeG6t3QgdGjGsCB2aeG7h24sIHPhu60gZOG7pW5nIG5wbSBob+G6t2MgeWFybjo8L3A+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBtYi02XCI+XG4gICAgICAgIDxwcmUgY2xhc3M9XCJmbGV4LTEgdGV4dC1zbSBvdmVyZmxvdy14LWF1dG9cIj48Y29kZT5ucG0gaW5zdGFsbCAmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1iYWRnZTwvY29kZT48L3ByZT5cbiAgICAgICAgPGJ1dHRvbiBjbGFzcz1cIm1sLTQgcHgtMyBweS0xIGJnLWJsdWUtNTAwIHRleHQtd2hpdGUgcm91bmRlZCBob3ZlcjpiZy1ibHVlLTYwMCB0cmFuc2l0aW9uLWNvbG9yc1wiXG4gICAgICAgICAgKGNsaWNrKT1cImNvcHlUb0NsaXBib2FyZCgnbnBtIGluc3RhbGwgQGxpYnMtdWkvY29tcG9uZW50cy1iYWRnZScpXCI+XG4gICAgICAgICAgU2FvIGNow6lwXG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxwIGNsYXNzPVwibWItNFwiPkhv4bq3YyB24bubaSB5YXJuOjwvcD5cblxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG1iLTZcIj5cbiAgICAgICAgPHByZSBjbGFzcz1cImZsZXgtMSB0ZXh0LXNtIG92ZXJmbG93LXgtYXV0b1wiPjxjb2RlPnlhcm4gYWRkICYjNjQ7bGlicy11aS9jb21wb25lbnRzLWJhZGdlPC9jb2RlPjwvcHJlPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwibWwtNCBweC0zIHB5LTEgYmctYmx1ZS01MDAgdGV4dC13aGl0ZSByb3VuZGVkIGhvdmVyOmJnLWJsdWUtNjAwIHRyYW5zaXRpb24tY29sb3JzXCJcbiAgICAgICAgICAoY2xpY2spPVwiY29weVRvQ2xpcGJvYXJkKCd5YXJuIGFkZCBAbGlicy11aS9jb21wb25lbnRzLWJhZGdlJylcIj5cbiAgICAgICAgICBTYW8gY2jDqXBcbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+RGVtbyBUcuG7sWMgdGnhur9wPC9oMj5cblxuICAgICAgPGRpdiBjbGFzcz1cIm1iLTZcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkJhZGdlIFTGsMahbmcgdMOhYzwvaDM+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtd3JhcCBpdGVtcy1jZW50ZXIgZ2FwLTQgbWItNlwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtci0yXCI+U+G7kSBsxrDhu6NuZzo8L3NwYW4+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgYmctZ3JheS0xMDAgIG92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgICAgICAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJ3LVsxMDBweF0gcHgtMiBweS0xIHRleHQtY2VudGVyIGJvcmRlci1zb2xpZCBib3JkZXItZ3JheS0zMDAgcm91bmRlZC1bNHB4XSBib3JkZXItWzFweF0gZm9jdXM6b3V0bGluZS1ub25lXCJcbiAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cImRlbW9Db3VudFwiXG4gICAgICAgICAgICAgICAgKGJsdXIpPVwidmFsaWRhdGVDb3VudCgpXCI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgIGlkPVwidXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwibXItMVwiXG4gICAgICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJkZW1vVXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIChjaGFuZ2UpPVwidG9nZ2xlVXNlTWF4Q291bnQoKVwiPlxuICAgICAgICAgICAgICA8bGFiZWwgZm9yPVwidXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwibXItMlwiPkdp4bubaSBo4bqhbiB04buRaSDEkWE6PC9sYWJlbD5cbiAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJudW1iZXJcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwidy1bMTAwcHhdIHB4LTIgcHktMSB0ZXh0LWNlbnRlciByb3VuZGVkLVs0cHhdIGJvcmRlci1bMXB4XSBmb2N1czpvdXRsaW5lLW5vbmVcIlxuICAgICAgICAgICAgICAgIFsobmdNb2RlbCldPVwiZGVtb01heENvdW50XCJcbiAgICAgICAgICAgICAgICAoYmx1cik9XCJ2YWxpZGF0ZU1heENvdW50KClcIlxuICAgICAgICAgICAgICAgIFtkaXNhYmxlZF09XCIhZGVtb1VzZU1heENvdW50XCI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b24gbGFiZWw9XCJDaHV54buDbiDEkeG7lWkgQWN0aXZlXCJcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVBY3RpdmUoKVwiPlxuICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uPlxuXG4gICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbiBsYWJlbD1cIsSQ4bq3dCBz4buRIGzhu5tuICgxMjUwKVwiXG4gICAgICAgICAgICAoY2xpY2spPVwic2V0TGFyZ2VDb3VudCgpXCI+XG4gICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b24+XG5cbiAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uIGxhYmVsPVwixJDhurd0IGzhuqFpXCJcbiAgICAgICAgICAgIChjbGljayk9XCJyZXNldENvdW50KClcIj5cbiAgICAgICAgICA8L2xpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1iLTZcIj5cbiAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTJcIj5DaOG6vyDEkeG7mSBoaeG7g24gdGjhu4s6PC9oND5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXdyYXAgZ2FwLTJcIj5cbiAgICAgICAgICAgIEBmb3IgKG1vZGUgb2YgZGVtb01vZGVzOyB0cmFjayAkaW5kZXgpIHtcbiAgICAgICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cInB4LTMgcHktMSBib3JkZXIgcm91bmRlZC1tZFwiXG4gICAgICAgICAgICAgICAgW2NsYXNzLmJnLWJsdWUtMTAwXT1cImRlbW9Nb2RlID09PSBtb2RlXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwiY2hhbmdlTW9kZShtb2RlKVwiPlxuICAgICAgICAgICAgICAgIHt7IG1vZGUgfX1cbiAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwLTggYmctZ3JheS01MCByb3VuZGVkLWxnIG1iLTZcIj5cbiAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTYgdGV4dC1jZW50ZXJcIj5L4bq/dCBxdeG6ozwvaDQ+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGdhcC02XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtci0yXCI+TeG6t2MgxJHhu4tuaDo8L3NwYW4+XG4gICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cImRlbW9Db3VudFwiXG4gICAgICAgICAgICAgICAgW21vZGVdPVwiZGVtb01vZGVcIlxuICAgICAgICAgICAgICAgIFthY3RpdmVdPVwiZGVtb0FjdGl2ZVwiXG4gICAgICAgICAgICAgICAgW21heENvdW50XT1cImRlbW9Vc2VNYXhDb3VudCA/IGRlbW9NYXhDb3VudCA6IDk5XCI+XG4gICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1yLTJcIj5W4bubaSBUb29sdGlwOjwvc3Bhbj5cbiAgICAgICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1iYWRnZSBbY291bnRdPVwiZGVtb0NvdW50XCJcbiAgICAgICAgICAgICAgICBbbW9kZV09XCJkZW1vTW9kZVwiXG4gICAgICAgICAgICAgICAgW2FjdGl2ZV09XCJkZW1vQWN0aXZlXCJcbiAgICAgICAgICAgICAgICBbbWF4Q291bnRdPVwiZGVtb1VzZU1heENvdW50ID8gZGVtb01heENvdW50IDogOTlcIlxuICAgICAgICAgICAgICAgIFtwb3BvdmVyQ29uZmlnXT1cImRlbW9Qb3BvdmVyQ29uZmlnXCI+XG4gICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1yLTJcIj5T4buRIGzGsOG7o25nIHLhuqV0IGzhu5tuICg5OTk5KTo8L3NwYW4+XG4gICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cImRlbW9Db3VudCoxMDAwXCJcbiAgICAgICAgICAgICAgICBbbW9kZV09XCJkZW1vTW9kZVwiXG4gICAgICAgICAgICAgICAgW2FjdGl2ZV09XCJkZW1vQWN0aXZlXCJcbiAgICAgICAgICAgICAgICBbbWF4Q291bnRdPVwiZGVtb1VzZU1heENvdW50ID8gZGVtb01heENvdW50IDogOTlcIj5cbiAgICAgICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2U+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+Q8OhY2ggc+G7rSBk4bulbmc8L2gyPlxuXG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+U+G7rSBk4bulbmcgY8ahIGLhuqNuPC9oMz5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtMSBtZDpncmlkLWNvbHMtMiBnYXAtNiBtYi00XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+SFRNTCAoZXhhbXBsZS5jb21wb25lbnQuaHRtbCk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+Jmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICBbY291bnRdPVwiNVwiJmd0O1xuJmx0Oy9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UmZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+VHlwZVNjcmlwdCAoZXhhbXBsZS5jb21wb25lbnQudHMpPC9oND5cbiAgICAgICAgICAgIDxwcmUgY2xhc3M9XCJiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBvdmVyZmxvdy14LWF1dG8gdGV4dC1zbVwiPjxjb2RlPmltcG9ydCAmIzEyMzsgQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2FuZ3VsYXIvY29yZSc7XG5pbXBvcnQgJiMxMjM7IExpYnNVaUNvbXBvbmVudHNCYWRnZUNvbXBvbmVudCAmIzEyNTsgZnJvbSAnJiM2NDtsaWJzLXVpL2NvbXBvbmVudHMtYmFkZ2UnO1xuXG4mIzY0O0NvbXBvbmVudCgmIzEyMztcbiAgc2VsZWN0b3I6ICdhcHAtZXhhbXBsZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtMaWJzVWlDb21wb25lbnRzQmFkZ2VDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vZXhhbXBsZS5jb21wb25lbnQuaHRtbCdcbiYjMTI1OylcbmV4cG9ydCBjbGFzcyBFeGFtcGxlQ29tcG9uZW50ICYjMTIzOyYjMTI1OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPlbhu5tpIGPDoWMgY2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGtow6FjIG5oYXU8L2gzPlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJncmlkIGdyaWQtY29scy0xIG1kOmdyaWQtY29scy0yIGdhcC02IG1iLTRcIj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwiZm9udC1zZW1pYm9sZCBtYi0yIHRleHQtZ3JheS03MDBcIj5IVE1MIChtb2Rlcy1leGFtcGxlLmNvbXBvbmVudC5odG1sKTwvaDQ+XG4gICAgICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc21cIj48Y29kZT4mbHQ7ZGl2IGNsYXNzPVwiZmxleCBnYXAtNCBpdGVtcy1jZW50ZXJcIiZndDtcbiAgJmx0O2RpdiZndDtcbiAgICBUacOqdSBjaHXhuqluOiAmbHQ7bGlic191aS1jb21wb25lbnRzLWJhZGdlXG4gICAgICBbY291bnRdPVwiMjVcIlxuICAgICAgbW9kZT1cInhcIiZndDtcbiAgICAmbHQ7L2xpYnNfdWktY29tcG9uZW50cy1iYWRnZSZndDtcbiAgJmx0Oy9kaXYmZ3Q7XG4gIFxuICAmbHQ7ZGl2Jmd0O1xuICAgIFbhu5tpIGThuqV1IGPhu5luZzogJmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICAgICAgW2NvdW50XT1cIjI1XCJcbiAgICAgIG1vZGU9XCJ4K1wiJmd0O1xuICAgICZsdDsvbGlic191aS1jb21wb25lbnRzLWJhZGdlJmd0O1xuICAmbHQ7L2RpdiZndDtcbiAgXG4gICZsdDtkaXYmZ3Q7XG4gICAgxJDhu4tuaCBk4bqhbmcgSzogJmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICAgICAgW2NvdW50XT1cIjE1MDBcIlxuICAgICAgbW9kZT1cImtcIiZndDtcbiAgICAmbHQ7L2xpYnNfdWktY29tcG9uZW50cy1iYWRnZSZndDtcbiAgJmx0Oy9kaXYmZ3Q7XG4mbHQ7L2RpdiZndDs8L2NvZGU+PC9wcmU+XG4gICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwiZm9udC1zZW1pYm9sZCBtYi0yIHRleHQtZ3JheS03MDBcIj5L4bq/dCBxdeG6ozwvaDQ+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicC00IGJnLWdyYXktNTAgcm91bmRlZC1sZyBmbGV4IGZsZXgtY29sIGdhcC00XCI+XG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC00IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgICAgICAgVGnDqnUgY2h14bqpbjpcbiAgICAgICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cIjI1XCJcbiAgICAgICAgICAgICAgICAgICAgbW9kZT1cInhcIj5cbiAgICAgICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgICBW4bubaSBk4bqldSBj4buZbmc6XG4gICAgICAgICAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJhZGdlIFtjb3VudF09XCIyNVwiXG4gICAgICAgICAgICAgICAgICAgIG1vZGU9XCJ4K1wiPlxuICAgICAgICAgICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2U+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgICAgIMSQ4buLbmggZOG6oW5nIEs6XG4gICAgICAgICAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJhZGdlIFtjb3VudF09XCIxNTAwXCJcbiAgICAgICAgICAgICAgICAgICAgbW9kZT1cImtcIj5cbiAgICAgICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+VuG7m2kgVG9vbHRpcDwvaDM+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQgZ3JpZC1jb2xzLTEgbWQ6Z3JpZC1jb2xzLTIgZ2FwLTYgbWItNFwiPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTIgdGV4dC1ncmF5LTcwMFwiPkhUTUwgKHRvb2x0aXAtZXhhbXBsZS5jb21wb25lbnQuaHRtbCk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+Jmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICBbY291bnRdPVwibmV3TWVzc2FnZXNcIlxuICBbcG9wb3ZlckNvbmZpZ109XCImIzEyMzsgY29udGVudDogbmV3TWVzc2FnZXMgKyAnIHRpbiBuaOG6r24gbeG7m2knICYjMTI1O1wiXG4gIFthY3RpdmVdPVwidHJ1ZVwiJmd0O1xuJmx0Oy9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UmZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+VHlwZVNjcmlwdCAodG9vbHRpcC1leGFtcGxlLmNvbXBvbmVudC50cyk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+aW1wb3J0ICYjMTIzOyBDb21wb25lbnQgJiMxMjU7IGZyb20gJyYjNjQ7YW5ndWxhci9jb3JlJztcbmltcG9ydCAmIzEyMzsgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1iYWRnZSc7XG5cbiYjNjQ7Q29tcG9uZW50KCYjMTIzO1xuICBzZWxlY3RvcjogJ2FwcC10b29sdGlwLWV4YW1wbGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3Rvb2x0aXAtZXhhbXBsZS5jb21wb25lbnQuaHRtbCdcbiYjMTI1OylcbmV4cG9ydCBjbGFzcyBUb29sdGlwRXhhbXBsZUNvbXBvbmVudCAmIzEyMztcbiAgbmV3TWVzc2FnZXMgPSAxMjtcbiYjMTI1OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+VMOgaSBsaeG7h3UgQVBJPC9oMj5cblxuICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPsSQ4bqndSB2w6BvIChJbnB1dHMpPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJvdmVyZmxvdy14LWF1dG8gbWItOFwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJtaW4tdy1mdWxsIGJnLXdoaXRlIGJvcmRlciBib3JkZXItZ3JheS0yMDBcIj5cbiAgICAgICAgICA8dGhlYWQ+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPlTDqm48L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5LaeG7g3U8L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5N4bq3YyDEkeG7i25oXG4gICAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPk3DtCB04bqjXG4gICAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGhlYWQ+XG4gICAgICAgICAgPHRib2R5PlxuICAgICAgICAgICAgQGZvciAoaW5wdXQgb2YgaW5wdXRzRG9jOyB0cmFjayBpbnB1dC5uYW1lKSB7XG4gICAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnt7IGlucHV0Lm5hbWUgfX08L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnt7IGlucHV0LnR5cGUgfX08L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+e3sgaW5wdXQuZGVmYXVsdCB9fTwvdGQ+XG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPnt7IGlucHV0LmRlc2NyaXB0aW9uIH19PC90ZD5cbiAgICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L3Rib2R5PlxuICAgICAgICA8L3RhYmxlPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5JbnRlcmZhY2VzPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJzcGFjZS15LTZcIj5cbiAgICAgICAgQGZvciAoaW50ZXJmYWNlSXRlbSBvZiBpbnRlcmZhY2VzRG9jOyB0cmFjayBpbnRlcmZhY2VJdGVtLm5hbWUpIHtcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiYmctZ3JheS01MCBwLTYgcm91bmRlZC1sZ1wiPlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwidGV4dC1sZyBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItM1wiPnt7IGludGVyZmFjZUl0ZW0ubmFtZSB9fTwvaDQ+XG4gICAgICAgICAgICA8cHJlXG4gICAgICAgICAgICAgIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc20gbWItM1wiPjxjb2RlPnt7IGludGVyZmFjZUl0ZW0uY29kZSB9fTwvY29kZT48L3ByZT5cbiAgICAgICAgICAgIDxwIGNsYXNzPVwidGV4dC1ncmF5LTYwMFwiPnt7IGludGVyZmFjZUl0ZW0uZGVzY3JpcHRpb24gfX08L3A+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Uw61uaCBuxINuZzwvaDI+XG4gICAgICA8dWwgY2xhc3M9XCJzcGFjZS15LTZcIj5cbiAgICAgICAgQGZvciAoZmVhdHVyZSBvZiBmZWF0dXJlczsgdHJhY2sgZmVhdHVyZS5pZCkge1xuICAgICAgICAgIDxsaSBjbGFzcz1cImZsZXggaXRlbXMtc3RhcnRcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC0yeGwgdGV4dC1ibHVlLTUwMCBtci00XCI+e3sgZmVhdHVyZS5pY29uIH19PC9zcGFuPlxuICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgPGgzIGNsYXNzPVwidGV4dC1sZyBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItMVwiPnt7IGZlYXR1cmUudGl0bGUgfX08L2gzPlxuICAgICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtZ3JheS02MDBcIj57eyBmZWF0dXJlLmRlc2NyaXB0aW9uIH19PC9wPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPC9saT5cbiAgICAgICAgfVxuICAgICAgPC91bD5cbiAgICA8L3NlY3Rpb24+XG4gIDwvbWFpbj5cbjwvZGl2PlxuIl19
165
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UtZGVtby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2RlbW8vYmFkZ2UtZGVtby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2RlbW8vYmFkZ2UtZGVtby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsc0NBQXNDLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUU1RixPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7O0FBYXBFLE1BQU0sT0FBTyxrQ0FBa0M7SUFDN0MsU0FBUyxHQUFHO1FBQ1Y7WUFDRSxJQUFJLEVBQUUsT0FBTztZQUNiLElBQUksRUFBRSxRQUFRO1lBQ2QsT0FBTyxFQUFFLEdBQUc7WUFDWixXQUFXLEVBQUUsNkJBQTZCO1NBQzNDO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsTUFBTTtZQUNaLElBQUksRUFBRSxpQkFBaUI7WUFDdkIsT0FBTyxFQUFFLFdBQVc7WUFDcEIsV0FBVyxFQUFFLHVEQUF1RDtTQUNyRTtRQUNEO1lBQ0UsSUFBSSxFQUFFLFFBQVE7WUFDZCxJQUFJLEVBQUUsU0FBUztZQUNmLE9BQU8sRUFBRSxXQUFXO1lBQ3BCLFdBQVcsRUFBRSxzREFBc0Q7U0FDcEU7UUFDRDtZQUNFLElBQUksRUFBRSxVQUFVO1lBQ2hCLElBQUksRUFBRSxRQUFRO1lBQ2QsT0FBTyxFQUFFLHlCQUF5QjtZQUNsQyxXQUFXLEVBQUUsbURBQW1EO1NBQ2pFO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsZUFBZTtZQUNyQixJQUFJLEVBQUUsaUJBQWlCO1lB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cG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtYnV0dG9ucy1idXR0b24nO1xuaW1wb3J0IHsgSVBvcG92ZXJPdmVybGF5IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCYWRnZUNvbXBvbmVudCB9IGZyb20gJy4uL2JhZGdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUWVBFX0JBREdFX01PREUgfSBmcm9tICcuLi9pbnRlcmZhY2VzL21vZGUudHlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1iYWRnZS1kZW1vJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JhZGdlLWRlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50LFxuICAgIExpYnNVaUNvbXBvbmVudHNCdXR0b25zQnV0dG9uQ29tcG9uZW50XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0JhZGdlRGVtb0NvbXBvbmVudCB7XG4gIGlucHV0c0RvYyA9IFtcbiAgICB7XG4gICAgICBuYW1lOiAnY291bnQnLFxuICAgICAgdHlwZTogJ251bWJlcicsXG4gICAgICBkZWZhdWx0OiAnMCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ1Phu5EgY+G6p24gaGnhu4NuIHRo4buLIHRyb25nIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ21vZGUnLFxuICAgICAgdHlwZTogJ1RZUEVfQkFER0VfTU9ERScsXG4gICAgICBkZWZhdWx0OiAndW5kZWZpbmVkJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGNobyBiYWRnZS4gVMO5eSBjaOG7jW46IHgsIHgrLCAreCwgaywgMHgnXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnYWN0aXZlJyxcbiAgICAgIHR5cGU6ICdib29sZWFuJyxcbiAgICAgIGRlZmF1bHQ6ICd1bmRlZmluZWQnLFxuICAgICAgZGVzY3JpcHRpb246ICdYw6FjIMSR4buLbmggYmFkZ2UgY8OzIMSRYW5nIOG7nyB0cuG6oW5nIHRow6FpIGFjdGl2ZSBoYXkga2jDtG5nJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ21heENvdW50JyxcbiAgICAgIHR5cGU6ICdudW1iZXInLFxuICAgICAgZGVmYXVsdDogJ051bWJlci5NQVhfU0FGRV9JTlRFR0VSJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnU+G7kSB04buRaSDEkWEgxJHhu4MgaGnhu4NuIHRo4buLIHRyxrDhu5tjIGtoaSDDoXAgZOG7pW5nIMSR4buLbmggZOG6oW5nJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ3BvcG92ZXJDb25maWcnLFxuICAgICAgdHlwZTogJ0lQb3BvdmVyT3ZlcmxheScsXG4gICAgICBkZWZhdWx0OiAndW5kZWZpbmVkJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ+G6pXUgaMOsbmggY2hvIHBvcG92ZXIga2hpIGRpIGNodeG7mXQgcXVhIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ2lnbm9yZU1hcmdpbkRlZmF1bHQnLFxuICAgICAgdHlwZTogJ2Jvb2xlYW4nLFxuICAgICAgZGVmYXVsdDogJ3VuZGVmaW5lZCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ0PDsyBi4buPIHF1YSBtYXJnaW4gbeG6t2MgxJHhu4tuaCBiw6puIHRyw6FpIGPhu6dhIGJhZGdlIGhheSBraMO0bmcnXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnY2xhc3NDaXJjbGUnLFxuICAgICAgdHlwZTogJ3N0cmluZycsXG4gICAgICBkZWZhdWx0OiAnbGlicy11aS1mb250LWg2cicsXG4gICAgICBkZXNjcmlwdGlvbjogJ0zhu5twIENTUyDEkeG7gyB04bqhbyBraeG7g3UgY2hvIHbDsm5nIHRyw7JuIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ2lnbm9yZVN0b3BQcm9wYWdhdGlvbkV2ZW50JyxcbiAgICAgIHR5cGU6ICdib29sZWFuJyxcbiAgICAgIGRlZmF1bHQ6ICd0cnVlJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ8OzIGLhu48gcXVhIHZp4buHYyBsYW4gdHJ1eeG7gW4gc+G7sSBraeG7h24ga2hpIG5o4bqlcCB2w6BvIGJhZGdlIGhheSBraMO0bmcnXG4gICAgfVxuICBdO1xuXG4gIGludGVyZmFjZXNEb2MgPSBbXG4gICAge1xuICAgICAgbmFtZTogJ1RZUEVfQkFER0VfTU9ERScsXG4gICAgICBjb2RlOiBcInR5cGUgVFlQRV9CQURHRV9NT0RFID0gJ3gnIHwgJ3grJyB8ICcreCcgfCAnaycgfCAnMHgnO1wiLFxuICAgICAgZGVzY3JpcHRpb246ICfEkOG7i25oIG5naMSpYSBraeG7g3UgY2hvIGPDoWMgY2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGJhZGdlLiBN4buXaSBjaOG6vyDEkeG7mSB0aGF5IMSR4buVaSBjw6FjaCBoaeG7g24gdGjhu4sgc+G7kS4nXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnSVBvcG92ZXJPdmVybGF5JyxcbiAgICAgIGNvZGU6IFwiaW50ZXJmYWNlIElQb3BvdmVyT3ZlcmxheSB7XFxuICBjb250ZW50OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xcbiAgd2lkdGg/OiBzdHJpbmc7XFxuICBwb3NpdGlvbj86IHN0cmluZztcXG4gIHpJbmRleD86IG51bWJlcjtcXG4gIG9mZnNldD86IHsgeD86IG51bWJlcjsgeT86IG51bWJlcjsgfTtcXG59XCIsXG4gICAgICBkZXNjcmlwdGlvbjogJ0ludGVyZmFjZSDEkeG7gyBj4bqldSBow6xuaCBwb3BvdmVyIHh14bqldCBoaeG7h24ga2hpIGRpIGNodeG7mXQgcXVhIGJhZGdlLidcbiAgICB9XG4gIF07XG5cbiAgZmVhdHVyZXMgPSBbXG4gICAge1xuICAgICAgaWQ6IDEsXG4gICAgICBpY29uOiAn8J+UoicsXG4gICAgICB0aXRsZTogJ8SQ4buLbmggZOG6oW5nIHPhu5EnLFxuICAgICAgZGVzY3JpcHRpb246ICdIaeG7g24gdGjhu4sgc+G7kSB0aGVvIG5oaeG7gXUgxJHhu4tuaCBk4bqhbmc6IHRow7RuZyB0aMaw4budbmcsIHbhu5tpIHRp4buBbiB04buRL2jhuq11IHThu5EsIGhv4bq3YyB2aeG6v3QgdOG6r3QgKEsgY2hvIGjDoG5nIG5naMOsbikuJ1xuICAgIH0sXG4gICAge1xuICAgICAgaWQ6IDIsXG4gICAgICBpY29uOiAn8J+OqCcsXG4gICAgICB0aXRsZTogJ1Ry4bqhbmcgdGjDoWkgaGnhu4NuIHRo4buLJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ2h1eeG7g24gxJHhu5VpIGdp4buvYSB0cuG6oW5nIHRow6FpIGFjdGl2ZSB2w6AgbeG6t2MgxJHhu4tuaCBk4buxYSB0csOqbiBuaHUgY+G6p3UgY+G7p2Eg4bupbmcgZOG7pW5nLidcbiAgICB9LFxuICAgIHtcbiAgICAgIGlkOiAzLFxuICAgICAgaWNvbjogJ/CfkqwnLFxuICAgICAgdGl0bGU6ICdI4buXIHRy4bujIFRvb2x0aXAnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaMOqbSB0b29sdGlwIHRow7RuZyB0aW4gY2hvIGPDoWMgYmFkZ2UgduG7m2kgbuG7mWkgZHVuZyB2w6AgduG7iyB0csOtIHTDuXkgY2jhu4luaC4nXG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogNCxcbiAgICAgIGljb246ICfwn5OPJyxcbiAgICAgIHRpdGxlOiAnVMO5eSBiaeG6v24gbGluaCBob+G6oXQnLFxuICAgICAgZGVzY3JpcHRpb246ICdUw7l5IGNo4buJbmggZ2lhbyBkaeG7h24gduG7m2kgY8OhYyBs4bubcCBDU1MgdsOgIMSRaeG7gXUga2hp4buDbiBtYXJnaW4uJ1xuICAgIH1cbiAgXTtcblxuICAvLyBEZW1vIHByb3BlcnRpZXNcbiAgZGVtb0NvdW50ID0gMjU7XG4gIGRlbW9NYXhDb3VudCA9IDk5O1xuICBkZW1vQWN0aXZlID0gdHJ1ZTtcbiAgZGVtb01vZGU6IFRZUEVfQkFER0VfTU9ERSA9ICd4JztcbiAgZGVtb01vZGVzOiBUWVBFX0JBREdFX01PREVbXSA9IFsneCcsICd4KycsICcreCcsICdrJywgJzB4J107XG4gIGRlbW9Qb3BvdmVyQ29uZmlnOiBJUG9wb3Zlck92ZXJsYXkgPSB7IGNvbnRlbnQ6ICdCYWRnZSBUb29sdGlwJyB9O1xuICBkZW1vVXNlTWF4Q291bnQgPSB0cnVlO1xuXG4gIC8vIE1ldGhvZHMgZm9yIGRlbW8gaW50ZXJhY3Rpb25cbiAgaW5jcmVtZW50Q291bnQoKSB7XG4gICAgdGhpcy5kZW1vQ291bnQgKz0gNTtcbiAgfVxuXG4gIGRlY3JlbWVudENvdW50KCkge1xuICAgIGlmICh0aGlzLmRlbW9Db3VudCA+IDApIHtcbiAgICAgIHRoaXMuZGVtb0NvdW50IC09IDU7XG4gICAgfVxuICB9XG5cbiAgdmFsaWRhdGVDb3VudCgpIHtcbiAgICBpZiAoaXNOYU4odGhpcy5kZW1vQ291bnQpIHx8IHRoaXMuZGVtb0NvdW50IDwgMCkge1xuICAgICAgdGhpcy5kZW1vQ291bnQgPSAwO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmRlbW9Db3VudCA9IE1hdGguZmxvb3IodGhpcy5kZW1vQ291bnQpO1xuICAgIH1cbiAgfVxuXG4gIHZhbGlkYXRlTWF4Q291bnQoKSB7XG4gICAgaWYgKGlzTmFOKHRoaXMuZGVtb01heENvdW50KSB8fCB0aGlzLmRlbW9NYXhDb3VudCA8IDEpIHtcbiAgICAgIHRoaXMuZGVtb01heENvdW50ID0gOTk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZGVtb01heENvdW50ID0gTWF0aC5mbG9vcih0aGlzLmRlbW9NYXhDb3VudCk7XG4gICAgfVxuICB9XG5cbiAgc2V0TGFyZ2VDb3VudCgpIHtcbiAgICB0aGlzLmRlbW9Db3VudCA9IDEyNTA7XG4gIH1cblxuICByZXNldENvdW50KCkge1xuICAgIHRoaXMuZGVtb0NvdW50ID0gMjU7XG4gICAgdGhpcy5kZW1vTWF4Q291bnQgPSA5OTtcbiAgfVxuXG4gIHRvZ2dsZUFjdGl2ZSgpIHtcbiAgICB0aGlzLmRlbW9BY3RpdmUgPSAhdGhpcy5kZW1vQWN0aXZlO1xuICB9XG5cbiAgdG9nZ2xlVXNlTWF4Q291bnQoKSB7XG4gICAgdGhpcy5kZW1vVXNlTWF4Q291bnQgPSAhdGhpcy5kZW1vVXNlTWF4Q291bnQ7XG4gIH1cblxuICBjaGFuZ2VNb2RlKG1vZGU6IFRZUEVfQkFER0VfTU9ERSkge1xuICAgIHRoaXMuZGVtb01vZGUgPSBtb2RlO1xuICB9XG5cbiAgY29weVRvQ2xpcGJvYXJkKHRleHQ6IHN0cmluZykge1xuICAgIG5hdmlnYXRvci5jbGlwYm9hcmQud3JpdGVUZXh0KHRleHQpXG4gICAgICAudGhlbigoKSA9PiB7XG4gICAgICAgIGNvbnNvbGUubG9nKCdUZXh0IGNvcGllZCB0byBjbGlwYm9hcmQnKTtcbiAgICAgIH0pXG4gICAgICAuY2F0Y2goKGVycikgPT4ge1xuICAgICAgICBjb25zb2xlLmVycm9yKCdDb3VsZCBub3QgY29weSB0ZXh0OiAnLCBlcnIpO1xuICAgICAgfSk7XG4gIH1cbn0gIiwiPGRpdiBjbGFzcz1cIm1heC13LTZ4bCBteC1hdXRvIHAtNSBmb250LXNhbnMgdGV4dC1ncmF5LTgwMFwiPlxuICA8aGVhZGVyIGNsYXNzPVwidGV4dC1jZW50ZXIgcHktMTAgYmctd2hpdGUgcm91bmRlZC1sZyBtYi04IHNoYWRvdy1zbVwiPlxuICAgIDxoMSBjbGFzcz1cInRleHQtNHhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTJcIj5EZW1vIEJhZGdlIENvbXBvbmVudDwvaDE+XG4gICAgPHAgY2xhc3M9XCJ0ZXh0LXhsIHRleHQtZ3JheS01MDBcIj5Db21wb25lbnQgQW5ndWxhciBsaW5oIGhv4bqhdCDEkeG7gyBoaeG7g24gdGjhu4sgY8OhYyBjaOG7iSBz4buRIHPhu5EgaOG7jWM8L3A+XG4gIDwvaGVhZGVyPlxuXG4gIDxtYWluPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5HaeG7m2kgdGhp4buHdTwvaDI+XG4gICAgICA8cD5cbiAgICAgICAgPGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPiYjNjQ7bGlicy11aS9jb21wb25lbnRzLWJhZGdlPC9jb2RlPiBsw6AgbeG7mXQgY29tcG9uZW50XG4gICAgICAgIEFuZ3VsYXIgbGluaCBob+G6oXQgxJHhu4MgaGnhu4NuIHRo4buLIGPDoWMgY2jhu4kgc+G7kSBz4buRIGjhu41jIHRoZW8gbmhp4buBdSDEkeG7i25oIGThuqFuZyBraMOhYyBuaGF1LiBOw7MgaG/DoG4gaOG6o28gY2hvIHZp4buHYyBoaeG7g24gdGjhu4sgc+G7kVxuICAgICAgICBsxrDhu6NuZyB0aMO0bmcgYsOhbywgY2jhu4kgYsOhbyB0cuG6oW5nIHRow6FpIHbDoCBi4bqldCBr4buzIG5n4buvIGPhuqNuaCBuw6BvIG3DoCBi4bqhbiBj4bqnbiBoaeG7g24gdGjhu4sgbeG7mXQgZ2nDoSB0cuG7iyBz4buRIGjhu41jIG7hu5VpIGLhuq10IHRy4buxY1xuICAgICAgICBxdWFuLlxuICAgICAgPC9wPlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6BpIMSR4bq3dDwvaDI+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi02XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTNcIj5Zw6p1IGPhuqd1PC9oMz5cbiAgICAgICAgPHVsIGNsYXNzPVwibGlzdC1kaXNjIHBsLTUgc3BhY2UteS0yIHRleHQtZ3JheS02MDBcIj5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+QW5ndWxhcjwvc3Bhbj46IDE4LjAuMCB0cuG7nyBsw6puPC9saT5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+VGFpbHdpbmQgQ1NTPC9zcGFuPjogMy4zLjAgdHLhu58gbMOqbjwvbGk+XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPHAgY2xhc3M9XCJtYi00XCI+xJDhu4MgY8OgaSDEkeG6t3QgdGjGsCB2aeG7h24sIHPhu60gZOG7pW5nIG5wbSBob+G6t2MgeWFybjo8L3A+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBtYi02XCI+XG4gICAgICAgIDxwcmUgY2xhc3M9XCJmbGV4LTEgdGV4dC1zbSBvdmVyZmxvdy14LWF1dG9cIj48Y29kZT5ucG0gaW5zdGFsbCAmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1iYWRnZTwvY29kZT48L3ByZT5cbiAgICAgICAgPGJ1dHRvbiBjbGFzcz1cIm1sLTQgcHgtMyBweS0xIGJnLWJsdWUtNTAwIHRleHQtd2hpdGUgcm91bmRlZCBob3ZlcjpiZy1ibHVlLTYwMCB0cmFuc2l0aW9uLWNvbG9yc1wiXG4gICAgICAgICAgKGNsaWNrKT1cImNvcHlUb0NsaXBib2FyZCgnbnBtIGluc3RhbGwgQGxpYnMtdWkvY29tcG9uZW50cy1iYWRnZScpXCI+XG4gICAgICAgICAgU2FvIGNow6lwXG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxwIGNsYXNzPVwibWItNFwiPkhv4bq3YyB24bubaSB5YXJuOjwvcD5cblxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG1iLTZcIj5cbiAgICAgICAgPHByZSBjbGFzcz1cImZsZXgtMSB0ZXh0LXNtIG92ZXJmbG93LXgtYXV0b1wiPjxjb2RlPnlhcm4gYWRkICYjNjQ7bGlicy11aS9jb21wb25lbnRzLWJhZGdlPC9jb2RlPjwvcHJlPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwibWwtNCBweC0zIHB5LTEgYmctYmx1ZS01MDAgdGV4dC13aGl0ZSByb3VuZGVkIGhvdmVyOmJnLWJsdWUtNjAwIHRyYW5zaXRpb24tY29sb3JzXCJcbiAgICAgICAgICAoY2xpY2spPVwiY29weVRvQ2xpcGJvYXJkKCd5YXJuIGFkZCBAbGlicy11aS9jb21wb25lbnRzLWJhZGdlJylcIj5cbiAgICAgICAgICBTYW8gY2jDqXBcbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+RGVtbyBUcuG7sWMgdGnhur9wPC9oMj5cblxuICAgICAgPGRpdiBjbGFzcz1cIm1iLTZcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkJhZGdlIFTGsMahbmcgdMOhYzwvaDM+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtd3JhcCBpdGVtcy1jZW50ZXIgZ2FwLTQgbWItNlwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtci0yXCI+U+G7kSBsxrDhu6NuZzo8L3NwYW4+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgYmctZ3JheS0xMDAgIG92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgICAgICAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJ3LVsxMDBweF0gcHgtMiBweS0xIHRleHQtY2VudGVyIGJvcmRlci1zb2xpZCBib3JkZXItZ3JheS0zMDAgcm91bmRlZC1bNHB4XSBib3JkZXItWzFweF0gZm9jdXM6b3V0bGluZS1ub25lXCJcbiAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cImRlbW9Db3VudFwiXG4gICAgICAgICAgICAgICAgKGJsdXIpPVwidmFsaWRhdGVDb3VudCgpXCI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgIGlkPVwidXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwibXItMVwiXG4gICAgICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJkZW1vVXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIChjaGFuZ2UpPVwidG9nZ2xlVXNlTWF4Q291bnQoKVwiPlxuICAgICAgICAgICAgICA8bGFiZWwgZm9yPVwidXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwibXItMlwiPkdp4bubaSBo4bqhbiB04buRaSDEkWE6PC9sYWJlbD5cbiAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJudW1iZXJcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwidy1bMTAwcHhdIHB4LTIgcHktMSB0ZXh0LWNlbnRlciByb3VuZGVkLVs0cHhdIGJvcmRlci1bMXB4XSBmb2N1czpvdXRsaW5lLW5vbmVcIlxuICAgICAgICAgICAgICAgIFsobmdNb2RlbCldPVwiZGVtb01heENvdW50XCJcbiAgICAgICAgICAgICAgICAoYmx1cik9XCJ2YWxpZGF0ZU1heENvdW50KClcIlxuICAgICAgICAgICAgICAgIFtkaXNhYmxlZF09XCIhZGVtb1VzZU1heENvdW50XCI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b24gbGFiZWw9XCJDaHV54buDbiDEkeG7lWkgQWN0aXZlXCJcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVBY3RpdmUoKVwiPlxuICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uPlxuXG4gICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbiBsYWJlbD1cIsSQ4bq3dCBz4buRIGzhu5tuICgxMjUwKVwiXG4gICAgICAgICAgICAoY2xpY2spPVwic2V0TGFyZ2VDb3VudCgpXCI+XG4gICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b24+XG5cbiAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uIGxhYmVsPVwixJDhurd0IGzhuqFpXCJcbiAgICAgICAgICAgIChjbGljayk9XCJyZXNldENvdW50KClcIj5cbiAgICAgICAgICA8L2xpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1iLTZcIj5cbiAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTJcIj5DaOG6vyDEkeG7mSBoaeG7g24gdGjhu4s6PC9oND5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXdyYXAgZ2FwLTJcIj5cbiAgICAgICAgICAgIEBmb3IgKG1vZGUgb2YgZGVtb01vZGVzOyB0cmFjayAkaW5kZXgpIHtcbiAgICAgICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cInB4LTMgcHktMSBib3JkZXIgcm91bmRlZC1tZFwiXG4gICAgICAgICAgICAgICAgW2NsYXNzLmJnLWJsdWUtMTAwXT1cImRlbW9Nb2RlID09PSBtb2RlXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwiY2hhbmdlTW9kZShtb2RlKVwiPlxuICAgICAgICAgICAgICAgIHt7IG1vZGUgfX1cbiAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwLTggYmctZ3JheS01MCByb3VuZGVkLWxnIG1iLTZcIj5cbiAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTYgdGV4dC1jZW50ZXJcIj5L4bq/dCBxdeG6ozwvaDQ+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGdhcC02XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtci0yXCI+TeG6t2MgxJHhu4tuaDo8L3NwYW4+XG4gICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cImRlbW9Db3VudFwiXG4gICAgICAgICAgICAgICAgW21vZGVdPVwiZGVtb01vZGVcIlxuICAgICAgICAgICAgICAgIFthY3RpdmVdPVwiZGVtb0FjdGl2ZVwiXG4gICAgICAgICAgICAgICAgW21heENvdW50XT1cImRlbW9Vc2VNYXhDb3VudCA/IGRlbW9NYXhDb3VudCA6IDk5XCI+XG4gICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1yLTJcIj5W4bubaSBUb29sdGlwOjwvc3Bhbj5cbiAgICAgICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1iYWRnZSBbY291bnRdPVwiZGVtb0NvdW50XCJcbiAgICAgICAgICAgICAgICBbbW9kZV09XCJkZW1vTW9kZVwiXG4gICAgICAgICAgICAgICAgW2FjdGl2ZV09XCJkZW1vQWN0aXZlXCJcbiAgICAgICAgICAgICAgICBbbWF4Q291bnRdPVwiZGVtb1VzZU1heENvdW50ID8gZGVtb01heENvdW50IDogOTlcIlxuICAgICAgICAgICAgICAgIFtwb3BvdmVyQ29uZmlnXT1cImRlbW9Qb3BvdmVyQ29uZmlnXCI+XG4gICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1yLTJcIj5T4buRIGzGsOG7o25nIHLhuqV0IGzhu5tuICg5OTk5KTo8L3NwYW4+XG4gICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cImRlbW9Db3VudCoxMDAwXCJcbiAgICAgICAgICAgICAgICBbbW9kZV09XCJkZW1vTW9kZVwiXG4gICAgICAgICAgICAgICAgW2FjdGl2ZV09XCJkZW1vQWN0aXZlXCJcbiAgICAgICAgICAgICAgICBbbWF4Q291bnRdPVwiZGVtb1VzZU1heENvdW50ID8gZGVtb01heENvdW50IDogOTlcIj5cbiAgICAgICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2U+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+Q8OhY2ggc+G7rSBk4bulbmc8L2gyPlxuXG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+U+G7rSBk4bulbmcgY8ahIGLhuqNuPC9oMz5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtMSBtZDpncmlkLWNvbHMtMiBnYXAtNiBtYi00XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+SFRNTCAoZXhhbXBsZS5jb21wb25lbnQuaHRtbCk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+Jmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICBbY291bnRdPVwiNVwiJmd0O1xuJmx0Oy9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UmZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+VHlwZVNjcmlwdCAoZXhhbXBsZS5jb21wb25lbnQudHMpPC9oND5cbiAgICAgICAgICAgIDxwcmUgY2xhc3M9XCJiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBvdmVyZmxvdy14LWF1dG8gdGV4dC1zbVwiPjxjb2RlPmltcG9ydCAmIzEyMzsgQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2FuZ3VsYXIvY29yZSc7XG5pbXBvcnQgJiMxMjM7IExpYnNVaUNvbXBvbmVudHNCYWRnZUNvbXBvbmVudCAmIzEyNTsgZnJvbSAnJiM2NDtsaWJzLXVpL2NvbXBvbmVudHMtYmFkZ2UnO1xuXG4mIzY0O0NvbXBvbmVudCgmIzEyMztcbiAgc2VsZWN0b3I6ICdhcHAtZXhhbXBsZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtMaWJzVWlDb21wb25lbnRzQmFkZ2VDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vZXhhbXBsZS5jb21wb25lbnQuaHRtbCdcbiYjMTI1OylcbmV4cG9ydCBjbGFzcyBFeGFtcGxlQ29tcG9uZW50ICYjMTIzOyYjMTI1OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPlbhu5tpIGPDoWMgY2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGtow6FjIG5oYXU8L2gzPlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJncmlkIGdyaWQtY29scy0xIG1kOmdyaWQtY29scy0yIGdhcC02IG1iLTRcIj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwiZm9udC1zZW1pYm9sZCBtYi0yIHRleHQtZ3JheS03MDBcIj5IVE1MIChtb2Rlcy1leGFtcGxlLmNvbXBvbmVudC5odG1sKTwvaDQ+XG4gICAgICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc21cIj48Y29kZT4mbHQ7ZGl2IGNsYXNzPVwiZmxleCBnYXAtNCBpdGVtcy1jZW50ZXJcIiZndDtcbiAgJmx0O2RpdiZndDtcbiAgICBUacOqdSBjaHXhuqluOiAmbHQ7bGlic191aS1jb21wb25lbnRzLWJhZGdlXG4gICAgICBbY291bnRdPVwiMjVcIlxuICAgICAgbW9kZT1cInhcIiZndDtcbiAgICAmbHQ7L2xpYnNfdWktY29tcG9uZW50cy1iYWRnZSZndDtcbiAgJmx0Oy9kaXYmZ3Q7XG4gIFxuICAmbHQ7ZGl2Jmd0O1xuICAgIFbhu5tpIGThuqV1IGPhu5luZzogJmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICAgICAgW2NvdW50XT1cIjI1XCJcbiAgICAgIG1vZGU9XCJ4K1wiJmd0O1xuICAgICZsdDsvbGlic191aS1jb21wb25lbnRzLWJhZGdlJmd0O1xuICAmbHQ7L2RpdiZndDtcbiAgXG4gICZsdDtkaXYmZ3Q7XG4gICAgxJDhu4tuaCBk4bqhbmcgSzogJmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICAgICAgW2NvdW50XT1cIjE1MDBcIlxuICAgICAgbW9kZT1cImtcIiZndDtcbiAgICAmbHQ7L2xpYnNfdWktY29tcG9uZW50cy1iYWRnZSZndDtcbiAgJmx0Oy9kaXYmZ3Q7XG4mbHQ7L2RpdiZndDs8L2NvZGU+PC9wcmU+XG4gICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwiZm9udC1zZW1pYm9sZCBtYi0yIHRleHQtZ3JheS03MDBcIj5L4bq/dCBxdeG6ozwvaDQ+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicC00IGJnLWdyYXktNTAgcm91bmRlZC1sZyBmbGV4IGZsZXgtY29sIGdhcC00XCI+XG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC00IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgICAgICAgVGnDqnUgY2h14bqpbjpcbiAgICAgICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cIjI1XCJcbiAgICAgICAgICAgICAgICAgICAgbW9kZT1cInhcIj5cbiAgICAgICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgICBW4bubaSBk4bqldSBj4buZbmc6XG4gICAgICAgICAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJhZGdlIFtjb3VudF09XCIyNVwiXG4gICAgICAgICAgICAgICAgICAgIG1vZGU9XCJ4K1wiPlxuICAgICAgICAgICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2U+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgICAgIMSQ4buLbmggZOG6oW5nIEs6XG4gICAgICAgICAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJhZGdlIFtjb3VudF09XCIxNTAwXCJcbiAgICAgICAgICAgICAgICAgICAgbW9kZT1cImtcIj5cbiAgICAgICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+VuG7m2kgVG9vbHRpcDwvaDM+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQgZ3JpZC1jb2xzLTEgbWQ6Z3JpZC1jb2xzLTIgZ2FwLTYgbWItNFwiPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTIgdGV4dC1ncmF5LTcwMFwiPkhUTUwgKHRvb2x0aXAtZXhhbXBsZS5jb21wb25lbnQuaHRtbCk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+Jmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICBbY291bnRdPVwibmV3TWVzc2FnZXNcIlxuICBbcG9wb3ZlckNvbmZpZ109XCImIzEyMzsgY29udGVudDogbmV3TWVzc2FnZXMgKyAnIHRpbiBuaOG6r24gbeG7m2knICYjMTI1O1wiXG4gIFthY3RpdmVdPVwidHJ1ZVwiJmd0O1xuJmx0Oy9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UmZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+VHlwZVNjcmlwdCAodG9vbHRpcC1leGFtcGxlLmNvbXBvbmVudC50cyk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+aW1wb3J0ICYjMTIzOyBDb21wb25lbnQgJiMxMjU7IGZyb20gJyYjNjQ7YW5ndWxhci9jb3JlJztcbmltcG9ydCAmIzEyMzsgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1iYWRnZSc7XG5cbiYjNjQ7Q29tcG9uZW50KCYjMTIzO1xuICBzZWxlY3RvcjogJ2FwcC10b29sdGlwLWV4YW1wbGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3Rvb2x0aXAtZXhhbXBsZS5jb21wb25lbnQuaHRtbCdcbiYjMTI1OylcbmV4cG9ydCBjbGFzcyBUb29sdGlwRXhhbXBsZUNvbXBvbmVudCAmIzEyMztcbiAgbmV3TWVzc2FnZXMgPSAxMjtcbiYjMTI1OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+VMOgaSBsaeG7h3UgQVBJPC9oMj5cblxuICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPsSQ4bqndSB2w6BvIChJbnB1dHMpPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJvdmVyZmxvdy14LWF1dG8gbWItOFwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJtaW4tdy1mdWxsIGJnLXdoaXRlIGJvcmRlciBib3JkZXItZ3JheS0yMDBcIj5cbiAgICAgICAgICA8dGhlYWQ+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPlTDqm48L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5LaeG7g3U8L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5N4bq3YyDEkeG7i25oXG4gICAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPk3DtCB04bqjXG4gICAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGhlYWQ+XG4gICAgICAgICAgPHRib2R5PlxuICAgICAgICAgICAgQGZvciAoaW5wdXQgb2YgaW5wdXRzRG9jOyB0cmFjayBpbnB1dC5uYW1lKSB7XG4gICAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnt7IGlucHV0Lm5hbWUgfX08L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnt7IGlucHV0LnR5cGUgfX08L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+e3sgaW5wdXQuZGVmYXVsdCB9fTwvdGQ+XG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPnt7IGlucHV0LmRlc2NyaXB0aW9uIH19PC90ZD5cbiAgICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L3Rib2R5PlxuICAgICAgICA8L3RhYmxlPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5JbnRlcmZhY2VzPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJzcGFjZS15LTZcIj5cbiAgICAgICAgQGZvciAoaW50ZXJmYWNlSXRlbSBvZiBpbnRlcmZhY2VzRG9jOyB0cmFjayBpbnRlcmZhY2VJdGVtLm5hbWUpIHtcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiYmctZ3JheS01MCBwLTYgcm91bmRlZC1sZ1wiPlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwidGV4dC1sZyBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItM1wiPnt7IGludGVyZmFjZUl0ZW0ubmFtZSB9fTwvaDQ+XG4gICAgICAgICAgICA8cHJlXG4gICAgICAgICAgICAgIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc20gbWItM1wiPjxjb2RlPnt7IGludGVyZmFjZUl0ZW0uY29kZSB9fTwvY29kZT48L3ByZT5cbiAgICAgICAgICAgIDxwIGNsYXNzPVwidGV4dC1ncmF5LTYwMFwiPnt7IGludGVyZmFjZUl0ZW0uZGVzY3JpcHRpb24gfX08L3A+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Uw61uaCBuxINuZzwvaDI+XG4gICAgICA8dWwgY2xhc3M9XCJzcGFjZS15LTZcIj5cbiAgICAgICAgQGZvciAoZmVhdHVyZSBvZiBmZWF0dXJlczsgdHJhY2sgZmVhdHVyZS5pZCkge1xuICAgICAgICAgIDxsaSBjbGFzcz1cImZsZXggaXRlbXMtc3RhcnRcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC0yeGwgdGV4dC1ibHVlLTUwMFwiPnt7IGZlYXR1cmUuaWNvbiB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgIDxoMyBjbGFzcz1cInRleHQtbGcgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTFcIj57eyBmZWF0dXJlLnRpdGxlIH19PC9oMz5cbiAgICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LWdyYXktNjAwXCI+e3sgZmVhdHVyZS5kZXNjcmlwdGlvbiB9fTwvcD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvbGk+XG4gICAgICAgIH1cbiAgICAgIDwvdWw+XG4gICAgPC9zZWN0aW9uPlxuICA8L21haW4+XG48L2Rpdj5cbiJdfQ==
package/fesm2022/libs-ui-components-badge.mjs CHANGED
@@ -220,7 +220,7 @@ class LibsUiComponentsBadgeDemoComponent {
220
220
  });
221
221
  }
222
222
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBadgeDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
223
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsBadgeDemoComponent, isStandalone: true, selector: "lib-badge-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500 mr-4\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }] });
223
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsBadgeDemoComponent, isStandalone: true, selector: "lib-badge-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }] });
224
224
  }
225
225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBadgeDemoComponent, decorators: [{
226
226
  type: Component,
@@ -228,7 +228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
228
228
  FormsModule,
229
229
  LibsUiComponentsBadgeComponent,
230
230
  LibsUiComponentsButtonsButtonComponent
231
- ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500 mr-4\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n" }]
231
+ ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n" }]
232
232
  }] });
233
233
 
234
234
  /**
package/fesm2022/libs-ui-components-badge.mjs.map CHANGED
@@ -1 +1 @@
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/demo/badge-demo.component.ts","../../../../../libs-ui/components/badge/src/demo/badge-demo.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 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","import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPopoverOverlay } from '@libs-ui/components-popover';\nimport { LibsUiComponentsBadgeComponent } from '../badge.component';\nimport { TYPE_BADGE_MODE } from '../interfaces/mode.type';\n\n@Component({\n selector: 'lib-badge-demo',\n templateUrl: './badge-demo.component.html',\n standalone: true,\n imports: [\n FormsModule,\n LibsUiComponentsBadgeComponent,\n LibsUiComponentsButtonsButtonComponent\n ]\n})\nexport class LibsUiComponentsBadgeDemoComponent {\n inputsDoc = [\n {\n name: 'count',\n type: 'number',\n default: '0',\n description: 'Số cần hiển thị trong badge'\n },\n {\n name: 'mode',\n type: 'TYPE_BADGE_MODE',\n default: 'undefined',\n description: 'Chế độ hiển thị cho badge. Tùy chọn: x, x+, +x, k, 0x'\n },\n {\n name: 'active',\n type: 'boolean',\n default: 'undefined',\n description: 'Xác định badge có đang ở trạng thái active hay không'\n },\n {\n name: 'maxCount',\n type: 'number',\n default: 'Number.MAX_SAFE_INTEGER',\n description: 'Số tối đa để hiển thị trước khi áp dụng định dạng'\n },\n {\n name: 'popoverConfig',\n type: 'IPopoverOverlay',\n default: 'undefined',\n description: 'Cấu hình cho popover khi di chuột qua badge'\n },\n {\n name: 'ignoreMarginDefault',\n type: 'boolean',\n default: 'undefined',\n description: 'Có bỏ qua margin mặc định bên trái của badge hay không'\n },\n {\n name: 'classCircle',\n type: 'string',\n default: 'libs-ui-font-h6r',\n description: 'Lớp CSS để tạo kiểu cho vòng tròn badge'\n },\n {\n name: 'ignoreStopPropagationEvent',\n type: 'boolean',\n default: 'true',\n description: 'Có bỏ qua việc lan truyền sự kiện khi nhấp vào badge hay không'\n }\n ];\n\n interfacesDoc = [\n {\n name: 'TYPE_BADGE_MODE',\n code: \"type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';\",\n description: 'Định nghĩa kiểu cho các chế độ hiển thị badge. Mỗi chế độ thay đổi cách hiển thị số.'\n },\n {\n name: 'IPopoverOverlay',\n code: \"interface IPopoverOverlay {\\n content: string | TemplateRef<any>;\\n width?: string;\\n position?: string;\\n zIndex?: number;\\n offset?: { x?: number; y?: number; };\\n}\",\n description: 'Interface để cấu hình popover xuất hiện khi di chuột qua badge.'\n }\n ];\n\n features = [\n {\n id: 1,\n icon: '🔢',\n title: 'Định dạng số',\n description: 'Hiển thị số theo nhiều định dạng: thông thường, với tiền tố/hậu tố, hoặc viết tắt (K cho hàng nghìn).'\n },\n {\n id: 2,\n icon: '🎨',\n title: 'Trạng thái hiển thị',\n description: 'Chuyển đổi giữa trạng thái active và mặc định dựa trên nhu cầu của ứng dụng.'\n },\n {\n id: 3,\n icon: '💬',\n title: 'Hỗ trợ Tooltip',\n description: 'Thêm tooltip thông tin cho các badge với nội dung và vị trí tùy chỉnh.'\n },\n {\n id: 4,\n icon: '📏',\n title: 'Tùy biến linh hoạt',\n description: 'Tùy chỉnh giao diện với các lớp CSS và điều khiển margin.'\n }\n ];\n\n // Demo properties\n demoCount = 25;\n demoMaxCount = 99;\n demoActive = true;\n demoMode: TYPE_BADGE_MODE = 'x';\n demoModes: TYPE_BADGE_MODE[] = ['x', 'x+', '+x', 'k', '0x'];\n demoPopoverConfig: IPopoverOverlay = { content: 'Badge Tooltip' };\n demoUseMaxCount = true;\n\n // Methods for demo interaction\n incrementCount() {\n this.demoCount += 5;\n }\n\n decrementCount() {\n if (this.demoCount > 0) {\n this.demoCount -= 5;\n }\n }\n\n validateCount() {\n if (isNaN(this.demoCount) || this.demoCount < 0) {\n this.demoCount = 0;\n } else {\n this.demoCount = Math.floor(this.demoCount);\n }\n }\n\n validateMaxCount() {\n if (isNaN(this.demoMaxCount) || this.demoMaxCount < 1) {\n this.demoMaxCount = 99;\n } else {\n this.demoMaxCount = Math.floor(this.demoMaxCount);\n }\n }\n\n setLargeCount() {\n this.demoCount = 1250;\n }\n\n resetCount() {\n this.demoCount = 25;\n this.demoMaxCount = 99;\n }\n\n toggleActive() {\n this.demoActive = !this.demoActive;\n }\n\n toggleUseMaxCount() {\n this.demoUseMaxCount = !this.demoUseMaxCount;\n }\n\n changeMode(mode: TYPE_BADGE_MODE) {\n this.demoMode = mode;\n }\n\n copyToClipboard(text: string) {\n navigator.clipboard.writeText(text)\n .then(() => {\n console.log('Text copied to clipboard');\n })\n .catch((err) => {\n console.error('Could not copy text: ', err);\n });\n }\n} ","<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh hoạt để hiển thị các chỉ số số học</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Giới thiệu</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> là một component\n Angular linh hoạt để hiển thị các chỉ số số học theo nhiều định dạng khác nhau. Nó hoàn hảo cho việc hiển thị số\n lượng thông báo, chỉ báo trạng thái và bất kỳ ngữ cảnh nào mà bạn cần hiển thị một giá trị số học nổi bật trực\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cài đặt</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Yêu cầu</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 trở lên</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 trở lên</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">Để cài đặt thư viện, sử dụng npm hoặc yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao chép\n </button>\n </div>\n\n <p class=\"mb-4\">Hoặc với yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao chép\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Trực tiếp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge Tương tác</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">Số lượng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Giới hạn tối đa:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuyển đổi Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"Đặt số lớn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"Đặt lại\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Chế độ hiển thị:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">Kết quả</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Mặc định:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Với Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Số lượng rất lớn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cách sử dụng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Sử dụng cơ bản</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Với các chế độ hiển thị khác nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Tiêu chuẩn: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n Với dấu cộng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n Định dạng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">Kết quả</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Tiêu chuẩn:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n Với dấu cộng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n Định dạng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Với Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nhắn mới' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tài liệu API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Đầu vào (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mặc định\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tính năng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500 mr-4\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
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/demo/badge-demo.component.ts","../../../../../libs-ui/components/badge/src/demo/badge-demo.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 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","import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPopoverOverlay } from '@libs-ui/components-popover';\nimport { LibsUiComponentsBadgeComponent } from '../badge.component';\nimport { TYPE_BADGE_MODE } from '../interfaces/mode.type';\n\n@Component({\n selector: 'lib-badge-demo',\n templateUrl: './badge-demo.component.html',\n standalone: true,\n imports: [\n FormsModule,\n LibsUiComponentsBadgeComponent,\n LibsUiComponentsButtonsButtonComponent\n ]\n})\nexport class LibsUiComponentsBadgeDemoComponent {\n inputsDoc = [\n {\n name: 'count',\n type: 'number',\n default: '0',\n description: 'Số cần hiển thị trong badge'\n },\n {\n name: 'mode',\n type: 'TYPE_BADGE_MODE',\n default: 'undefined',\n description: 'Chế độ hiển thị cho badge. Tùy chọn: x, x+, +x, k, 0x'\n },\n {\n name: 'active',\n type: 'boolean',\n default: 'undefined',\n description: 'Xác định badge có đang ở trạng thái active hay không'\n },\n {\n name: 'maxCount',\n type: 'number',\n default: 'Number.MAX_SAFE_INTEGER',\n description: 'Số tối đa để hiển thị trước khi áp dụng định dạng'\n },\n {\n name: 'popoverConfig',\n type: 'IPopoverOverlay',\n default: 'undefined',\n description: 'Cấu hình cho popover khi di chuột qua badge'\n },\n {\n name: 'ignoreMarginDefault',\n type: 'boolean',\n default: 'undefined',\n description: 'Có bỏ qua margin mặc định bên trái của badge hay không'\n },\n {\n name: 'classCircle',\n type: 'string',\n default: 'libs-ui-font-h6r',\n description: 'Lớp CSS để tạo kiểu cho vòng tròn badge'\n },\n {\n name: 'ignoreStopPropagationEvent',\n type: 'boolean',\n default: 'true',\n description: 'Có bỏ qua việc lan truyền sự kiện khi nhấp vào badge hay không'\n }\n ];\n\n interfacesDoc = [\n {\n name: 'TYPE_BADGE_MODE',\n code: \"type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';\",\n description: 'Định nghĩa kiểu cho các chế độ hiển thị badge. Mỗi chế độ thay đổi cách hiển thị số.'\n },\n {\n name: 'IPopoverOverlay',\n code: \"interface IPopoverOverlay {\\n content: string | TemplateRef<any>;\\n width?: string;\\n position?: string;\\n zIndex?: number;\\n offset?: { x?: number; y?: number; };\\n}\",\n description: 'Interface để cấu hình popover xuất hiện khi di chuột qua badge.'\n }\n ];\n\n features = [\n {\n id: 1,\n icon: '🔢',\n title: 'Định dạng số',\n description: 'Hiển thị số theo nhiều định dạng: thông thường, với tiền tố/hậu tố, hoặc viết tắt (K cho hàng nghìn).'\n },\n {\n id: 2,\n icon: '🎨',\n title: 'Trạng thái hiển thị',\n description: 'Chuyển đổi giữa trạng thái active và mặc định dựa trên nhu cầu của ứng dụng.'\n },\n {\n id: 3,\n icon: '💬',\n title: 'Hỗ trợ Tooltip',\n description: 'Thêm tooltip thông tin cho các badge với nội dung và vị trí tùy chỉnh.'\n },\n {\n id: 4,\n icon: '📏',\n title: 'Tùy biến linh hoạt',\n description: 'Tùy chỉnh giao diện với các lớp CSS và điều khiển margin.'\n }\n ];\n\n // Demo properties\n demoCount = 25;\n demoMaxCount = 99;\n demoActive = true;\n demoMode: TYPE_BADGE_MODE = 'x';\n demoModes: TYPE_BADGE_MODE[] = ['x', 'x+', '+x', 'k', '0x'];\n demoPopoverConfig: IPopoverOverlay = { content: 'Badge Tooltip' };\n demoUseMaxCount = true;\n\n // Methods for demo interaction\n incrementCount() {\n this.demoCount += 5;\n }\n\n decrementCount() {\n if (this.demoCount > 0) {\n this.demoCount -= 5;\n }\n }\n\n validateCount() {\n if (isNaN(this.demoCount) || this.demoCount < 0) {\n this.demoCount = 0;\n } else {\n this.demoCount = Math.floor(this.demoCount);\n }\n }\n\n validateMaxCount() {\n if (isNaN(this.demoMaxCount) || this.demoMaxCount < 1) {\n this.demoMaxCount = 99;\n } else {\n this.demoMaxCount = Math.floor(this.demoMaxCount);\n }\n }\n\n setLargeCount() {\n this.demoCount = 1250;\n }\n\n resetCount() {\n this.demoCount = 25;\n this.demoMaxCount = 99;\n }\n\n toggleActive() {\n this.demoActive = !this.demoActive;\n }\n\n toggleUseMaxCount() {\n this.demoUseMaxCount = !this.demoUseMaxCount;\n }\n\n changeMode(mode: TYPE_BADGE_MODE) {\n this.demoMode = mode;\n }\n\n copyToClipboard(text: string) {\n navigator.clipboard.writeText(text)\n .then(() => {\n console.log('Text copied to clipboard');\n })\n .catch((err) => {\n console.error('Could not copy text: ', err);\n });\n }\n} ","<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh hoạt để hiển thị các chỉ số số học</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Giới thiệu</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> là một component\n Angular linh hoạt để hiển thị các chỉ số số học theo nhiều định dạng khác nhau. Nó hoàn hảo cho việc hiển thị số\n lượng thông báo, chỉ báo trạng thái và bất kỳ ngữ cảnh nào mà bạn cần hiển thị một giá trị số học nổi bật trực\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cài đặt</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Yêu cầu</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 trở lên</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 trở lên</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">Để cài đặt thư viện, sử dụng npm hoặc yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao chép\n </button>\n </div>\n\n <p class=\"mb-4\">Hoặc với yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao chép\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Trực tiếp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge Tương tác</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">Số lượng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Giới hạn tối đa:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuyển đổi Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"Đặt số lớn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"Đặt lại\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Chế độ hiển thị:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">Kết quả</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Mặc định:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Với Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Số lượng rất lớn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cách sử dụng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Sử dụng cơ bản</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Với các chế độ hiển thị khác nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Tiêu chuẩn: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n Với dấu cộng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n Định dạng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">Kết quả</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Tiêu chuẩn:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n Với dấu cộng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n Định dạng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Với Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nhắn mới' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tài liệu API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Đầu vào (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mặc định\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tính năng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@libs-ui/components-badge",
3
- "version": "0.2.227",
3
+ "version": "0.2.229",
4
4
  "peerDependencies": {
5
5
  "@angular/core": "^18.2.0",
6
- "@libs-ui/components-popover": "^0.2.227",
7
- "@libs-ui/utils": "^0.2.227",
6
+ "@libs-ui/components-popover": "^0.2.229",
7
+ "@libs-ui/utils": "^0.2.229",
8
8
  "rxjs": "~7.8.0"
9
9
  },
10
10
  "sideEffects": false,