@sd-angular/core 19.0.0-beta.99 → 19.0.3

package/fesm2022/sd-angular-core-components-autoid-inspector.mjs

@@ -8,6 +8,7 @@ import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
 
 /** Selector mặc định coi là phải có data-autoid. */
 const SD_AUTOID_DEFAULT_REQUIRE_SELECTORS = [
@@ -28,8 +29,14 @@ const SD_AUTOID_DEFAULT_REQUIRE_SELECTORS = [
 ];
 
 class SdAutoidScannerService {
-    /** Quét toàn bộ element có [data-autoid] trong root, gắn thông tin name/tag/value/xpath. */
-    scan(root = document.body) {
+    /**
+     * Quét element có [data-autoid] trong root, gắn name/tag/value/xpath.
+     * Khi truyền `requireSelectors` (vd các sd-* form/button), những node khớp selector
+     * mà KHÔNG có data-autoid (self lẫn con) sẽ được thêm vào dưới dạng phần tử fallback
+     * (`autoid: ''`, xpath theo vị trí thẻ + cờ `missingAutoid` + warning) — để JSON xuất ra
+     * vẫn dùng được và dev biết chỗ cần bổ sung autoid.
+     */
+    scan(root = document.body, requireSelectors = []) {
         const nodes = root.querySelectorAll('[data-autoid]');
         const dupCount = {};
         nodes.forEach(n => {
@@ -44,18 +51,61 @@ class SdAutoidScannerService {
             const autoid = node.getAttribute('data-autoid');
             if (!autoid)
                 return;
+            const state = this.readState(node);
+            const tableScope = this.resolveTableScope(node);
             result.push({
                 stt: stt++,
                 name: this.resolveName(node),
                 autoid,
                 tag: this.resolveSdTag(node),
-                value: this.resolveValue(node),
+                text: this.resolveText(node),
                 xpath: `//*[@data-autoid="${autoid}"]`,
                 duplicate: dupCount[autoid] > 1,
+                state,
+                tableScope,
             });
         });
+        if (requireSelectors.length) {
+            stt = this.appendMissing(root, requireSelectors, result, stt);
+        }
         return result;
     }
+    /**
+     * Tìm các node khớp `requireSelectors` nhưng thiếu data-autoid (self + mọi descendant),
+     * thêm vào `result` dưới dạng phần tử fallback. Trả về `stt` kế tiếp.
+     */
+    appendMissing(root, requireSelectors, result, startStt) {
+        let stt = startStt;
+        const joined = requireSelectors.join(',');
+        root.querySelectorAll(joined).forEach(node => {
+            // Cùng quy ước với audit: bỏ qua khi self hoặc con đã có data-autoid.
+            if (node.hasAttribute('data-autoid'))
+                return;
+            if (node.querySelector('[data-autoid]'))
+                return;
+            const tag = node.tagName.toLowerCase();
+            result.push({
+                stt: stt++,
+                name: this.resolveName(node),
+                autoid: '',
+                tag,
+                text: this.resolveText(node),
+                xpath: this.fallbackXpath(node, tag),
+                duplicate: false,
+                state: this.readState(node),
+                tableScope: this.resolveTableScope(node),
+                missingAutoid: true,
+                warning: 'Thiếu data-autoid — dùng xpath fallback theo tag (dev nên bổ sung autoid)',
+            });
+        });
+        return stt;
+    }
+    /** XPath theo vị trí thẻ trong document, vd `(//sd-button)[2]`, khi không có autoid. */
+    fallbackXpath(node, tag) {
+        const all = Array.from(document.querySelectorAll(tag));
+        const idx = all.indexOf(node);
+        return `(//${tag})[${idx >= 0 ? idx + 1 : 1}]`;
+    }
     /** Group element theo autoid để consumer lấy duplicate map. */
     groupByAutoid(elements) {
         const map = {};
@@ -64,6 +114,46 @@ class SdAutoidScannerService {
         }
         return map;
     }
+    /**
+     * Read the optional `data-*` E2E state attributes off the same node.
+     * Only includes fields actually present on the DOM (skipped fields stay undefined).
+     */
+    readState(node) {
+        const get = (n) => {
+            const v = node.getAttribute(n);
+            return v === null ? undefined : v;
+        };
+        return {
+            disabled: get('data-disabled'),
+            loading: get('data-loading'),
+            empty: get('data-empty'),
+            invalid: get('data-invalid'),
+            opened: get('data-opened'),
+            count: get('data-count'),
+            dataValue: get('data-value'),
+            required: get('data-required'),
+            maxlength: get('data-maxlength'),
+            minlength: get('data-minlength'),
+            pattern: get('data-pattern'),
+            errorMessage: get('data-error-message'),
+            type: get('data-type'),
+            title: get('data-title'),
+            message: get('data-message'),
+        };
+    }
+    /**
+     * If the node is inside an `<sd-table>` element, return that table's `data-autoid`.
+     * Walks up via closest('sd-table') — skips the node itself if it IS the table.
+     */
+    resolveTableScope(node) {
+        // Skip self if the node itself is the sd-table host.
+        const start = node.tagName.toLowerCase() === 'sd-table' ? node.parentElement : node;
+        const table = start?.closest('sd-table');
+        if (!table || table === node)
+            return undefined;
+        const id = table.getAttribute('data-autoid');
+        return id ?? undefined;
+    }
     resolveName(node) {
         if (node.id) {
             // CSS.escape phòng id chứa ký tự đặc biệt làm vỡ selector.
@@ -88,7 +178,7 @@ class SdAutoidScannerService {
         }
         return node.tagName.toLowerCase();
     }
-    resolveValue(node) {
+    resolveText(node) {
         const input = node;
         if (typeof input.value === 'string' && input.value)
             return input.value;
@@ -293,12 +383,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 
 class SdAutoidExportService {
-    toJson(elements) {
+    /**
+     * Có `meta` → bọc `{ meta, elements }` (kèm url/queryParams) để consumer biết trang/route.
+     * Không `meta` → giữ mảng thuần (back-compat cho caller cũ chỉ cần elements).
+     */
+    toJson(elements, meta) {
+        if (meta)
+            return JSON.stringify({ meta, elements }, null, 2);
         return JSON.stringify(elements, null, 2);
     }
+    /** Parse a `location.search` string into a flat key/value map (last value wins). */
+    parseQueryParams(search) {
+        const out = {};
+        new URLSearchParams(search || '').forEach((v, k) => {
+            out[k] = v;
+        });
+        return out;
+    }
     toCsv(elements) {
-        const header = 'STT,name,autoid,tag,value,xpath';
-        const rows = elements.map(el => [el.stt, this.q(el.name), this.q(el.autoid), this.q(el.tag), this.q(el.value), this.q(el.xpath)].join(','));
+        const header = 'STT,name,autoid,tag,table-scope,disabled,loading,empty,invalid,opened,count,data-value,text,xpath';
+        const rows = elements.map(el => [
+            el.stt,
+            this.q(el.name),
+            this.q(el.autoid),
+            this.q(el.tag),
+            this.q(el.tableScope ?? ''),
+            this.q(el.state.disabled ?? ''),
+            this.q(el.state.loading ?? ''),
+            this.q(el.state.empty ?? ''),
+            this.q(el.state.invalid ?? ''),
+            this.q(el.state.opened ?? ''),
+            this.q(el.state.count ?? ''),
+            this.q(el.state.dataValue ?? ''),
+            this.q(el.text),
+            this.q(el.xpath),
+        ].join(','));
         return [header, ...rows].join('\n') + '\n';
     }
     /** POM TypeScript skeleton — copy ngay vào file Playwright/Cypress. */
@@ -313,9 +432,12 @@ class SdAutoidExportService {
         lines.push('```ts');
         lines.push(`export class ${className} {`);
         for (const el of elements) {
-            const propName = this.toCamel(el.autoid);
+            // autoid rỗng (phần tử fallback thiếu autoid) → đặt tên prop theo tag + stt.
+            const propName = el.autoid ? this.toCamel(el.autoid) : this.toCamel(`${el.tag}-${el.stt}`);
             const nameHint = el.name ? ` ${el.name} —` : '';
-            lines.push(`  /** ${el.tag}${nameHint} */`);
+            const stateSummary = this.buildStateSummary(el.state);
+            const stateStr = stateSummary ? ` — ${stateSummary}` : '';
+            lines.push(`  /** ${el.tag}${nameHint}${stateStr} */`);
             lines.push(`  readonly ${propName} = '${el.xpath}';`);
         }
         lines.push('}');
@@ -323,7 +445,7 @@ class SdAutoidExportService {
         lines.push('');
         return lines.join('\n');
     }
-    /** Markdown reference table, group theo tag sd-*. */
+    /** Markdown reference table, group FIRST by tableScope (top-level first, then per table), then by tag. */
     toMarkdownTable(elements, meta) {
         const lines = [];
         lines.push('# AutoId Reference');
@@ -331,24 +453,54 @@ class SdAutoidExportService {
         lines.push(`- Page: \`${meta.pageUrl}\``);
         lines.push(`- Generated: \`${meta.timestamp}\``);
         lines.push('');
-        const groups = new Map();
+        // Partition into top-level and per-table buckets.
+        const topLevel = elements.filter(el => !el.tableScope);
+        // Collect unique table scopes in insertion order (preserves DOM order).
+        const tableScopes = [];
         for (const el of elements) {
-            const key = el.tag || '(no-tag)';
-            if (!groups.has(key))
-                groups.set(key, []);
-            groups.get(key).push(el);
+            if (el.tableScope && !tableScopes.includes(el.tableScope)) {
+                tableScopes.push(el.tableScope);
+            }
         }
-        const sortedTags = [...groups.keys()].sort();
-        for (const tag of sortedTags) {
-            lines.push(`## ${tag}`);
-            lines.push('');
-            lines.push('| name | autoid | xpath | duplicate |');
-            lines.push('|------|--------|-------|-----------|');
-            for (const el of groups.get(tag)) {
-                lines.push(`| ${this.mdCell(el.name)} | \`${el.autoid}\` | \`${el.xpath}\` | ${el.duplicate ? '⚠️' : ''} |`);
+        tableScopes.sort();
+        const renderTagGroup = (items) => {
+            const groups = new Map();
+            for (const el of items) {
+                const key = el.tag || '(no-tag)';
+                if (!groups.has(key))
+                    groups.set(key, []);
+                groups.get(key).push(el);
+            }
+            const sortedTags = [...groups.keys()].sort();
+            for (const tag of sortedTags) {
+                lines.push(`### ${tag}`);
+                lines.push('');
+                lines.push('| name | autoid | xpath | state | duplicate |');
+                lines.push('|------|--------|-------|-------|-----------|');
+                for (const el of groups.get(tag)) {
+                    const stateSummary = this.buildStateSummary(el.state);
+                    lines.push(`| ${this.mdCell(el.name)} | \`${el.autoid}\` | \`${el.xpath}\` | ${this.mdCell(stateSummary)} | ${el.duplicate ? '⚠️' : ''} |`);
+                }
+                lines.push('');
             }
+        };
+        // Top-level section.
+        lines.push('## Top-level');
+        lines.push('');
+        if (topLevel.length > 0) {
+            renderTagGroup(topLevel);
+        }
+        else {
+            lines.push('_(no top-level elements)_');
             lines.push('');
         }
+        // Per-table sections.
+        for (const scope of tableScopes) {
+            lines.push(`## Inside table \`${scope}\``);
+            lines.push('');
+            const scopeItems = elements.filter(el => el.tableScope === scope);
+            renderTagGroup(scopeItems);
+        }
         return lines.join('\n');
     }
     download(content, filename, mime) {
@@ -377,6 +529,25 @@ class SdAutoidExportService {
         document.execCommand('copy');
         document.body.removeChild(ta);
     }
+    /** Build a compact state summary string from defined state keys, e.g. "disabled=false; empty=true". */
+    buildStateSummary(state) {
+        const parts = [];
+        if (state.disabled !== undefined)
+            parts.push(`disabled=${state.disabled}`);
+        if (state.loading !== undefined)
+            parts.push(`loading=${state.loading}`);
+        if (state.empty !== undefined)
+            parts.push(`empty=${state.empty}`);
+        if (state.invalid !== undefined)
+            parts.push(`invalid=${state.invalid}`);
+        if (state.opened !== undefined)
+            parts.push(`opened=${state.opened}`);
+        if (state.count !== undefined)
+            parts.push(`count=${state.count}`);
+        if (state.dataValue !== undefined)
+            parts.push(`data-value=${state.dataValue}`);
+        return parts.join('; ');
+    }
     q(v) {
         const s = String(v ?? '').replace(/"/g, '""');
         return `"${s}"`;
@@ -431,6 +602,37 @@ class SdAutoidInspector {
             el.name.toLowerCase().includes(q) ||
             el.tag.toLowerCase().includes(q));
     });
+    /**
+     * Elements not inside any sd-table — rendered in the main "Top-level" section.
+     */
+    topLevelElements = computed(() => this.filteredElements().filter(el => !el.tableScope));
+    /**
+     * Map of `sd-table` autoid → its inner autoid elements. Tables themselves
+     * stay in `topLevelElements` (the table's own autoid is top-level).
+     */
+    tableGroups = computed(() => {
+        const groups = new Map();
+        for (const el of this.filteredElements()) {
+            if (!el.tableScope)
+                continue;
+            if (!groups.has(el.tableScope))
+                groups.set(el.tableScope, []);
+            groups.get(el.tableScope).push(el);
+        }
+        // Return a sorted array for stable rendering.
+        return [...groups.entries()]
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([scope, items]) => ({ scope, items }));
+    });
+    // ==========================================
+    // DATA-* ATTRIBUTE COMPUTEDS (for E2E selectors)
+    // ==========================================
+    dataOpened = computed(() => (this.open() ? 'true' : 'false'));
+    dataHighlightOn = computed(() => (this.highlightOn() ? 'true' : 'false'));
+    dataSegment = computed(() => this.segment());
+    dataElementCount = computed(() => String(this.elements().length));
+    dataMissingCount = computed(() => String(this.audit()?.missingCount ?? 0));
+    dataDuplicateCount = computed(() => String(this.audit()?.duplicateCount ?? 0));
     // ==========================================
     // SERVICES
     // ==========================================
@@ -438,6 +640,8 @@ class SdAutoidInspector {
     #auditSvc = inject(SdAutoidAuditService);
     #highlight = inject(SdAutoidHighlightService);
     #export = inject(SdAutoidExportService);
+    // Optional — chỉ có khi app dùng RouterModule; dùng để lấy route params cho meta.
+    #router = inject(Router, { optional: true });
     // ==========================================
     // LIFECYCLE
     // ==========================================
@@ -468,7 +672,7 @@ class SdAutoidInspector {
     };
     refresh = () => {
         const root = this.#root();
-        const elements = this.#scanner.scan(root);
+        const elements = this.#scanner.scan(root, this.#requireSelectors());
         const result = this.#auditSvc.audit(elements, {
             root,
             requireSelectors: this.#requireSelectors(),
@@ -495,7 +699,7 @@ class SdAutoidInspector {
     };
     setSegment = (seg) => this.segment.set(seg);
     copyJson = async () => {
-        await this.#export.copyToClipboard(this.#export.toJson(this.elements()));
+        await this.#export.copyToClipboard(this.#export.toJson(this.elements(), this.#meta()));
         this.#flashCopyOk();
     };
     copyXpath = async (autoid) => {
@@ -506,7 +710,7 @@ class SdAutoidInspector {
         this.#export.download(this.#export.toCsv(this.elements()), this.#filename('csv'), 'text/csv;charset=utf-8');
     };
     exportJson = () => {
-        this.#export.download(this.#export.toJson(this.elements()), this.#filename('json'), 'application/json');
+        this.#export.download(this.#export.toJson(this.elements(), this.#meta()), this.#filename('json'), 'application/json');
     };
     exportMdPom = () => {
         this.#export.download(this.#export.toMarkdownPom(this.elements(), this.#meta()), this.#filename('pom.md'), 'text/markdown');
@@ -549,12 +753,33 @@ class SdAutoidInspector {
             this.#highlightMissing(result);
     }
     #meta() {
+        const loc = window.location;
         return {
-            pageUrl: window.location.pathname + window.location.search,
+            pageUrl: loc.pathname + loc.search,
             pageTitle: document.title || 'Page',
             timestamp: new Date().toISOString(),
+            url: loc.href,
+            pathname: loc.pathname,
+            search: loc.search,
+            queryParams: this.#export.parseQueryParams(loc.search),
+            params: this.#routeParams(),
         };
     }
+    /**
+     * Route path params gộp dọc cây ActivatedRoute (nếu có Router). Trả về undefined khi
+     * không có Router hoặc không có param nào — để `meta.params` được bỏ qua khỏi JSON.
+     */
+    #routeParams() {
+        if (!this.#router)
+            return undefined;
+        const params = {};
+        let route = this.#router.routerState.snapshot.root;
+        while (route) {
+            Object.assign(params, route.params);
+            route = route.firstChild;
+        }
+        return Object.keys(params).length ? params : undefined;
+    }
     #filename(ext) {
         const slug = (document.title || 'autoid')
             .toLowerCase()
@@ -567,11 +792,11 @@ class SdAutoidInspector {
         setTimeout(() => this.copyOk.set(false), 1200);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidInspector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdAutoidInspector, isStandalone: true, selector: "sd-autoid-inspector", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (enabled() && !dismissed()) {\r\n  <div class=\"sd-autoid-inspector__fab-wrap\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"sd-autoid-inspector__fab\"\r\n      data-autoid=\"sd-autoid-inspector-fab\"\r\n      [matTooltip]=\"open() ? '\u0110\u00F3ng AutoId Inspector' : 'M\u1EDF AutoId Inspector'\"\r\n      matTooltipPosition=\"left\"\r\n      (click)=\"togglePanel()\">\r\n      <mat-icon>{{ open() ? 'close' : 'tag' }}</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"sd-autoid-inspector__fab-dismiss\"\r\n      matTooltip=\"\u1EA8n t\u1EA1m \u2014 reload trang \u0111\u1EC3 hi\u1EC7n l\u1EA1i\"\r\n      matTooltipPosition=\"left\"\r\n      aria-label=\"\u1EA8n t\u1EA1m FAB\"\r\n      (click)=\"dismissFab($event)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n}\r\n\r\n@if (enabled() && open()) {\r\n    <div class=\"sd-autoid-inspector__backdrop\" (click)=\"closePanel()\"></div>\r\n    <section class=\"sd-autoid-inspector__panel\" role=\"dialog\" aria-label=\"AutoId Inspector\">\r\n      <header class=\"sd-autoid-inspector__header\">\r\n        <div class=\"sd-autoid-inspector__segments\">\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"segment() === 'audit'\"\r\n            (click)=\"setSegment('audit')\">\r\n            Audit\r\n            @if (audit(); as a) {\r\n              <span class=\"sd-autoid-inspector__badge\" [class.is-warn]=\"a.missingCount + a.duplicateCount > 0\">\r\n                {{ a.missingCount + a.duplicateCount }}\r\n              </span>\r\n            }\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"segment() === 'elements'\"\r\n            (click)=\"setSegment('elements')\">\r\n            Elements\r\n            <span class=\"sd-autoid-inspector__badge\">{{ elements().length }}</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"segment() === 'export'\"\r\n            (click)=\"setSegment('export')\">\r\n            Export\r\n          </button>\r\n        </div>\r\n        <div class=\"sd-autoid-inspector__actions\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__icon-btn\"\r\n            matTooltip=\"Qu\u00E9t l\u1EA1i\"\r\n            (click)=\"refresh()\">\r\n            <mat-icon>refresh</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__close-btn\"\r\n            matTooltip=\"\u0110\u00F3ng\"\r\n            aria-label=\"\u0110\u00F3ng panel\"\r\n            (click)=\"closePanel()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </header>\r\n\r\n      @if (copyOk()) {\r\n        <div class=\"sd-autoid-inspector__toast\">\u0110\u00E3 copy \u2713</div>\r\n      }\r\n\r\n      <div class=\"sd-autoid-inspector__body\">\r\n        @switch (segment()) {\r\n          @case ('audit') {\r\n            <ng-container *ngTemplateOutlet=\"auditTpl\"></ng-container>\r\n          }\r\n          @case ('elements') {\r\n            <ng-container *ngTemplateOutlet=\"elementsTpl\"></ng-container>\r\n          }\r\n          @case ('export') {\r\n            <ng-container *ngTemplateOutlet=\"exportTpl\"></ng-container>\r\n          }\r\n        }\r\n      </div>\r\n    </section>\r\n\r\n    <ng-template #auditTpl>\r\n      @if (audit(); as a) {\r\n        <div class=\"sd-autoid-inspector__audit-toolbar\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__toggle\"\r\n            [class.is-on]=\"highlightOn()\"\r\n            (click)=\"toggleHighlight()\">\r\n            <mat-icon>{{ highlightOn() ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n            <span>Highlight DOM</span>\r\n            <span class=\"sd-autoid-inspector__toggle-state\">{{ highlightOn() ? 'ON' : 'OFF' }}</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"sd-autoid-inspector__summary\">\r\n          <div class=\"sd-autoid-inspector__stat is-info\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.total }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">T\u1ED5ng autoid</div>\r\n          </div>\r\n          <div class=\"sd-autoid-inspector__stat\" [class.is-error]=\"a.duplicateCount > 0\" [class.is-success]=\"a.duplicateCount === 0\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.duplicateCount }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">Tr\u00F9ng</div>\r\n          </div>\r\n          <div class=\"sd-autoid-inspector__stat\" [class.is-warning]=\"a.missingCount > 0\" [class.is-success]=\"a.missingCount === 0\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.missingCount }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">Thi\u1EBFu</div>\r\n          </div>\r\n        </div>\r\n\r\n        @if (a.duplicateCount > 0) {\r\n          <h4 class=\"sd-autoid-inspector__section-title\">\r\n            <mat-icon class=\"is-error\">error_outline</mat-icon>\r\n            Autoid b\u1ECB tr\u00F9ng\r\n          </h4>\r\n          <div class=\"sd-autoid-inspector__table-wrap\">\r\n            <table class=\"sd-autoid-inspector__table\">\r\n              <thead>\r\n                <tr><th>Autoid</th><th>S\u1ED1 l\u1EA7n</th></tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (entry of a.duplicates | keyvalue; track entry.key) {\r\n                  <tr class=\"is-error\">\r\n                    <td><code>{{ entry.key }}</code></td>\r\n                    <td>{{ entry.value }}</td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        }\r\n\r\n        @if (a.missingCount > 0) {\r\n          <h4 class=\"sd-autoid-inspector__section-title\">\r\n            <mat-icon class=\"is-warning\">warning_amber</mat-icon>\r\n            Element thi\u1EBFu autoid\r\n          </h4>\r\n          <div class=\"sd-autoid-inspector__table-wrap\">\r\n            <table class=\"sd-autoid-inspector__table\">\r\n              <thead>\r\n                <tr><th>Tag</th><th>Name hint</th><th>Selector</th></tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (m of a.missing; track $index) {\r\n                  <tr class=\"is-warning\">\r\n                    <td><code>{{ m.tag }}</code></td>\r\n                    <td>{{ m.nameHint }}</td>\r\n                    <td><code>{{ m.selector }}</code></td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        }\r\n\r\n        @if (a.duplicateCount === 0 && a.missingCount === 0) {\r\n          <div class=\"sd-autoid-inspector__success-card\">\r\n            <mat-icon>check_circle</mat-icon>\r\n            <div>\r\n              <strong>Kh\u00F4ng c\u00F3 element thi\u1EBFu ho\u1EB7c tr\u00F9ng autoid.</strong>\r\n              <small>Trang \u0111\u00E3 \u0111\u1EA1t chu\u1EA9n convention autoid.</small>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #elementsTpl>\r\n      <div class=\"sd-autoid-inspector__filter\">\r\n        <mat-icon>search</mat-icon>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"L\u1ECDc theo autoid / name / tag\"\r\n          [ngModel]=\"filter()\"\r\n          (ngModelChange)=\"filter.set($event)\"/>\r\n        @if (filter()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__icon-btn\"\r\n            matTooltip=\"Xo\u00E1 filter\"\r\n            (click)=\"filter.set('')\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n      <div class=\"sd-autoid-inspector__table-wrap\">\r\n        <table class=\"sd-autoid-inspector__table\">\r\n          <thead>\r\n            <tr>\r\n              <th class=\"is-num\">STT</th>\r\n              <th>Name</th>\r\n              <th>Autoid</th>\r\n              <th>Tag</th>\r\n              <th>Value</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            @for (el of filteredElements(); track el.autoid + $index) {\r\n              <tr [class.is-error]=\"el.duplicate\">\r\n                <td class=\"is-num\">{{ el.stt }}</td>\r\n                <td>{{ el.name || '\u2014' }}</td>\r\n                <td>\r\n                  <div class=\"sd-autoid-inspector__autoid-cell\">\r\n                    <code>{{ el.autoid }}</code>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"sd-autoid-inspector__icon-btn is-primary\"\r\n                      matTooltip=\"Copy xpath\"\r\n                      (click)=\"copyXpath(el.autoid)\">\r\n                      <mat-icon>content_copy</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </td>\r\n                <td><span class=\"sd-autoid-inspector__tag-chip\">{{ el.tag }}</span></td>\r\n                <td class=\"sd-autoid-inspector__value\" [matTooltip]=\"el.value || ''\">\r\n                  {{ el.value || '\u2014' }}\r\n                </td>\r\n              </tr>\r\n            } @empty {\r\n              <tr><td colspan=\"5\" class=\"sd-autoid-inspector__empty\">Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3.</td></tr>\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #exportTpl>\r\n      <div class=\"sd-autoid-inspector__export-grid\">\r\n        <button type=\"button\" matTooltip=\"Copy JSON v\u00E0o clipboard\" (click)=\"copyJson()\">\r\n          <mat-icon>content_copy</mat-icon>\r\n          <span>Copy JSON</span>\r\n          <small>clipboard</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i file JSON\" (click)=\"exportJson()\">\r\n          <mat-icon>download</mat-icon>\r\n          <span>JSON</span>\r\n          <small>.json</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i file CSV\" (click)=\"exportCsv()\">\r\n          <mat-icon>table_view</mat-icon>\r\n          <span>CSV</span>\r\n          <small>.csv</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i MD POM skeleton \u2014 cho AI vi\u1EBFt auto-test\" (click)=\"exportMdPom()\">\r\n          <mat-icon>code</mat-icon>\r\n          <span>MD POM</span>\r\n          <small>AI test</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i MD reference table \u2014 group theo tag sd-*\" (click)=\"exportMdTable()\">\r\n          <mat-icon>view_list</mat-icon>\r\n          <span>MD Table</span>\r\n          <small>reference</small>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n}\r\n", styles: [":host{position:fixed;inset:auto 0 0 auto;z-index:100000;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--sd-black500, #212121)}.sd-autoid-inspector__fab-wrap{position:fixed;right:16px;bottom:16px;z-index:100000}.sd-autoid-inspector__fab-wrap:hover .sd-autoid-inspector__fab-dismiss{opacity:1;transform:scale(1);pointer-events:auto}.sd-autoid-inspector__fab{width:36px;height:36px;border-radius:50%;border:none;background:var(--sd-primary, #2A66F4);color:#fff;cursor:pointer;box-shadow:0 3px 10px #00000038;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}.sd-autoid-inspector__fab:hover{background:var(--sd-primary-dark, #1C4AD9);transform:scale(1.08);box-shadow:0 5px 14px #00000047}.sd-autoid-inspector__fab mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__fab-dismiss{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--sd-black200, #E6E6E6);background:#fff;color:var(--sd-black400, #757575);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .12s ease,transform .12s ease,color .12s ease,background .12s ease;box-shadow:0 1px 4px #00000026}.sd-autoid-inspector__fab-dismiss:hover{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__fab-dismiss mat-icon{font-size:12px;width:12px;height:12px;line-height:12px}.sd-autoid-inspector__backdrop{position:fixed;inset:0;background:#00000052;z-index:100001;backdrop-filter:blur(2px)}.sd-autoid-inspector__panel{position:fixed;right:20px;bottom:80px;width:min(860px,100vw - 40px);max-height:calc(100vh - 110px);background:#fff;border-radius:12px;box-shadow:0 16px 48px #00000038;display:flex;flex-direction:column;z-index:100002;overflow:hidden;border:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--sd-black200, #E6E6E6);background:var(--sd-black100, #F2F2F2);flex-shrink:0}.sd-autoid-inspector__segments{display:inline-flex;border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;background:#fff;overflow:hidden}.sd-autoid-inspector__segments button{border:none;background:transparent;padding:5px 12px;cursor:pointer;font-size:12px;font-weight:500;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;gap:6px;border-right:1px solid var(--sd-black200, #E6E6E6);transition:background .12s ease,color .12s ease}.sd-autoid-inspector__segments button:last-child{border-right:none}.sd-autoid-inspector__segments button:hover:not(.is-active){background:var(--sd-black100, #F2F2F2);color:var(--sd-black500, #212121)}.sd-autoid-inspector__segments button.is-active{background:var(--sd-primary, #2A66F4);color:#fff}.sd-autoid-inspector__badge{background:var(--sd-black200, #E6E6E6);color:var(--sd-black500, #212121);border-radius:10px;padding:0 7px;font-size:11px;font-weight:600;line-height:16px}.is-active .sd-autoid-inspector__badge{background:#ffffff40;color:#fff}.sd-autoid-inspector__badge.is-warn{background:var(--sd-error, #F82C13);color:#fff}.sd-autoid-inspector__actions{display:inline-flex;gap:4px;margin-left:auto}.sd-autoid-inspector__icon-btn{border:none;background:transparent;cursor:pointer;padding:4px;border-radius:6px;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.sd-autoid-inspector__icon-btn:hover{background:var(--sd-black100, #F2F2F2);color:var(--sd-black500, #212121)}.sd-autoid-inspector__icon-btn.is-primary{color:var(--sd-primary, #2A66F4)}.sd-autoid-inspector__icon-btn.is-primary:hover{background:var(--sd-primary-light, #EAF1FF);color:var(--sd-primary-dark, #1C4AD9)}.sd-autoid-inspector__icon-btn mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__close-btn{border:none;cursor:pointer;padding:4px;border-radius:50%;width:28px;height:28px;background:transparent;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.sd-autoid-inspector__close-btn:hover{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E)}.sd-autoid-inspector__close-btn mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__body{padding:14px;overflow:auto;flex:1;background:#fff}.sd-autoid-inspector__toast{position:absolute;top:56px;right:14px;background:var(--sd-success, #4CAF50);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;z-index:2;box-shadow:0 4px 12px #0000002e}.sd-autoid-inspector__audit-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.sd-autoid-inspector__toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sd-black200, #E6E6E6);background:#fff;border-radius:999px;padding:5px 12px 5px 10px;cursor:pointer;font-size:12px;font-weight:500;color:var(--sd-black400, #757575);transition:all .15s ease}.sd-autoid-inspector__toggle:hover{border-color:var(--sd-primary, #2A66F4);color:var(--sd-primary, #2A66F4)}.sd-autoid-inspector__toggle.is-on{border-color:var(--sd-primary, #2A66F4);color:var(--sd-primary, #2A66F4);background:var(--sd-primary-light, #EAF1FF)}.sd-autoid-inspector__toggle mat-icon{font-size:16px;width:16px;height:16px}.sd-autoid-inspector__toggle-state{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--sd-black200, #E6E6E6);color:var(--sd-black400, #757575)}.is-on .sd-autoid-inspector__toggle-state{background:var(--sd-primary, #2A66F4);color:#fff}.sd-autoid-inspector__summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.sd-autoid-inspector__stat{background:var(--sd-black100, #F2F2F2);border-radius:10px;padding:12px;text-align:center;border:1px solid transparent}.sd-autoid-inspector__stat.is-info{background:var(--sd-info-light, #E7E9FF);border-color:var(--sd-info, #2962FF)}.sd-autoid-inspector__stat.is-info .sd-autoid-inspector__stat-value{color:var(--sd-info, #2962FF)}.sd-autoid-inspector__stat.is-success{background:var(--sd-success-light, #DBEFDC);border-color:var(--sd-success, #4CAF50)}.sd-autoid-inspector__stat.is-success .sd-autoid-inspector__stat-value{color:var(--sd-success-dark, #39833C)}.sd-autoid-inspector__stat.is-warning{background:var(--sd-warning-light, #FFEACC);border-color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__stat.is-warning .sd-autoid-inspector__stat-value{color:var(--sd-warning-dark, #BF7000)}.sd-autoid-inspector__stat.is-error{background:var(--sd-error-light, #FED5D0);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__stat.is-error .sd-autoid-inspector__stat-value{color:var(--sd-error-dark, #BA200E)}.sd-autoid-inspector__stat-value{font-size:22px;font-weight:700;line-height:1;margin-bottom:4px}.sd-autoid-inspector__stat-label{font-size:11px;color:var(--sd-black400, #757575);text-transform:uppercase;letter-spacing:.4px;font-weight:600}.sd-autoid-inspector__section-title{display:flex;align-items:center;gap:6px;margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--sd-black500, #212121)}.sd-autoid-inspector__section-title mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__section-title mat-icon.is-error{color:var(--sd-error, #F82C13)}.sd-autoid-inspector__section-title mat-icon.is-warning{color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__success-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--sd-success-light, #DBEFDC);border:1px solid var(--sd-success, #4CAF50);border-radius:10px;color:var(--sd-success-dark, #39833C)}.sd-autoid-inspector__success-card mat-icon{font-size:28px;width:28px;height:28px;color:var(--sd-success, #4CAF50)}.sd-autoid-inspector__success-card strong{display:block;font-size:13px;margin-bottom:2px}.sd-autoid-inspector__success-card small{font-size:11px;opacity:.85}.sd-autoid-inspector__table-wrap{border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;overflow:auto;max-height:60vh;background:#fff}.sd-autoid-inspector__table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.sd-autoid-inspector__table th,.sd-autoid-inspector__table td{padding:8px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__table thead th{position:sticky;top:0;z-index:1;background:var(--sd-black100, #F2F2F2);font-weight:600;color:var(--sd-black500, #212121);text-transform:none;font-size:11px;letter-spacing:.3px;border-bottom:none;box-shadow:inset 0 -1px 0 var(--sd-black200, #E6E6E6),0 2px 4px #0000000a;white-space:nowrap}.sd-autoid-inspector__table thead th.is-num{text-align:right;width:50px}.sd-autoid-inspector__table tbody tr{transition:background .1s ease}.sd-autoid-inspector__table tbody tr:hover{background:var(--sd-primary-light, #EAF1FF)}.sd-autoid-inspector__table tbody tr:last-child td{border-bottom:none}.sd-autoid-inspector__table tbody tr.is-error{background:var(--sd-error-light, #FED5D0)}.sd-autoid-inspector__table tbody tr.is-error:hover{background:var(--sd-error-light, #FED5D0);filter:brightness(.98)}.sd-autoid-inspector__table tbody tr.is-warning{background:var(--sd-warning-light, #FFEACC)}.sd-autoid-inspector__table tbody tr.is-warning:hover{background:var(--sd-warning-light, #FFEACC);filter:brightness(.98)}.sd-autoid-inspector__table td.is-num{text-align:right;color:var(--sd-black400, #757575);font-variant-numeric:tabular-nums}.sd-autoid-inspector__table code{font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:11px;background:var(--sd-black100, #F2F2F2);padding:2px 6px;border-radius:4px;color:var(--sd-primary-dark, #1C4AD9);border:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__autoid-cell{display:inline-flex;align-items:center;gap:6px}.sd-autoid-inspector__tag-chip{display:inline-block;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:11px;background:var(--sd-info-light, #E7E9FF);color:var(--sd-info, #2962FF);border:1px solid var(--sd-info, #2962FF);padding:1px 8px;border-radius:999px;font-weight:500}.sd-autoid-inspector__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sd-black400, #757575);font-style:italic}.sd-autoid-inspector__empty{text-align:center;color:var(--sd-black400, #757575);padding:24px;font-style:italic}.sd-autoid-inspector__filter{display:flex;align-items:center;gap:6px;background:var(--sd-black100, #F2F2F2);border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;padding:6px 10px;margin-bottom:12px;transition:border-color .15s ease}.sd-autoid-inspector__filter:focus-within{border-color:var(--sd-primary, #2A66F4);background:#fff}.sd-autoid-inspector__filter input{flex:1;border:none;background:transparent;outline:none;font-size:13px;color:var(--sd-black500, #212121)}.sd-autoid-inspector__filter input::placeholder{color:var(--sd-black300, #BFBFBF)}.sd-autoid-inspector__filter>mat-icon{font-size:18px;width:18px;height:18px;color:var(--sd-black400, #757575)}.sd-autoid-inspector__export-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sd-autoid-inspector__export-grid button{border:1px solid var(--sd-black200, #E6E6E6);background:#fff;border-radius:10px;padding:12px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;transition:border-color .15s ease,background .15s ease,transform .12s ease;text-align:center}.sd-autoid-inspector__export-grid button:hover{border-color:var(--sd-primary, #2A66F4);background:var(--sd-primary-light, #EAF1FF);transform:translateY(-1px)}.sd-autoid-inspector__export-grid button span{font-size:12px;font-weight:600;color:var(--sd-black500, #212121);line-height:1.25}.sd-autoid-inspector__export-grid button small{font-size:10px;color:var(--sd-black400, #757575);line-height:1.2}.sd-autoid-inspector__export-grid button mat-icon{font-size:22px;width:22px;height:22px;color:var(--sd-primary, #2A66F4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdAutoidInspector, isStandalone: true, selector: "sd-autoid-inspector", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@let _enabled = enabled();\r\n@let _open = open();\r\n@if (_enabled && !dismissed()) {\r\n  <div class=\"sd-autoid-inspector__fab-wrap\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"sd-autoid-inspector__fab\"\r\n      data-autoid=\"sd-autoid-inspector-fab\"\r\n      [attr.data-opened]=\"dataOpened()\"\r\n      [matTooltip]=\"_open ? '\u0110\u00F3ng AutoId Inspector' : 'M\u1EDF AutoId Inspector'\"\r\n      matTooltipPosition=\"left\"\r\n      (click)=\"togglePanel()\">\r\n      <mat-icon>{{ _open ? 'close' : 'tag' }}</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"sd-autoid-inspector__fab-dismiss\"\r\n      matTooltip=\"\u1EA8n t\u1EA1m \u2014 reload trang \u0111\u1EC3 hi\u1EC7n l\u1EA1i\"\r\n      matTooltipPosition=\"left\"\r\n      aria-label=\"\u1EA8n t\u1EA1m FAB\"\r\n      (click)=\"dismissFab($event)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n}\r\n\r\n@if (_enabled && _open) {\r\n    @let _segment = segment();\r\n    <div class=\"sd-autoid-inspector__backdrop\" (click)=\"closePanel()\"></div>\r\n    <section class=\"sd-autoid-inspector__panel\"\r\n             role=\"dialog\"\r\n             aria-label=\"AutoId Inspector\"\r\n             data-autoid=\"sd-autoid-inspector-panel\"\r\n             [attr.data-segment]=\"dataSegment()\"\r\n             [attr.data-highlight-on]=\"dataHighlightOn()\"\r\n             [attr.data-element-count]=\"dataElementCount()\"\r\n             [attr.data-missing-count]=\"dataMissingCount()\"\r\n             [attr.data-duplicate-count]=\"dataDuplicateCount()\">\r\n      <header class=\"sd-autoid-inspector__header\">\r\n        <div class=\"sd-autoid-inspector__segments\">\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"_segment === 'audit'\"\r\n            (click)=\"setSegment('audit')\">\r\n            Audit\r\n            @if (audit(); as a) {\r\n              <span class=\"sd-autoid-inspector__badge\" [class.is-warn]=\"a.missingCount + a.duplicateCount > 0\">\r\n                {{ a.missingCount + a.duplicateCount }}\r\n              </span>\r\n            }\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"_segment === 'elements'\"\r\n            (click)=\"setSegment('elements')\">\r\n            Elements\r\n            <span class=\"sd-autoid-inspector__badge\">{{ elements().length }}</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"_segment === 'export'\"\r\n            (click)=\"setSegment('export')\">\r\n            Export\r\n          </button>\r\n        </div>\r\n        <div class=\"sd-autoid-inspector__actions\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__icon-btn\"\r\n            matTooltip=\"Qu\u00E9t l\u1EA1i\"\r\n            (click)=\"refresh()\">\r\n            <mat-icon>refresh</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__close-btn\"\r\n            matTooltip=\"\u0110\u00F3ng\"\r\n            aria-label=\"\u0110\u00F3ng panel\"\r\n            (click)=\"closePanel()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </header>\r\n\r\n      @if (copyOk()) {\r\n        <div class=\"sd-autoid-inspector__toast\">\u0110\u00E3 copy \u2713</div>\r\n      }\r\n\r\n      <div class=\"sd-autoid-inspector__body\">\r\n        @switch (_segment) {\r\n          @case ('audit') {\r\n            <ng-container *ngTemplateOutlet=\"auditTpl\"></ng-container>\r\n          }\r\n          @case ('elements') {\r\n            <ng-container *ngTemplateOutlet=\"elementsTpl\"></ng-container>\r\n          }\r\n          @case ('export') {\r\n            <ng-container *ngTemplateOutlet=\"exportTpl\"></ng-container>\r\n          }\r\n        }\r\n      </div>\r\n    </section>\r\n\r\n    <ng-template #auditTpl>\r\n      @if (audit(); as a) {\r\n        @let _highlightOn = highlightOn();\r\n        <div class=\"sd-autoid-inspector__audit-toolbar\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__toggle\"\r\n            [class.is-on]=\"_highlightOn\"\r\n            (click)=\"toggleHighlight()\">\r\n            <mat-icon>{{ _highlightOn ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n            <span>Highlight DOM</span>\r\n            <span class=\"sd-autoid-inspector__toggle-state\">{{ _highlightOn ? 'ON' : 'OFF' }}</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"sd-autoid-inspector__summary\">\r\n          <div class=\"sd-autoid-inspector__stat is-info\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.total }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">T\u1ED5ng autoid</div>\r\n          </div>\r\n          <div class=\"sd-autoid-inspector__stat\" [class.is-error]=\"a.duplicateCount > 0\" [class.is-success]=\"a.duplicateCount === 0\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.duplicateCount }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">Tr\u00F9ng</div>\r\n          </div>\r\n          <div class=\"sd-autoid-inspector__stat\" [class.is-warning]=\"a.missingCount > 0\" [class.is-success]=\"a.missingCount === 0\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.missingCount }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">Thi\u1EBFu</div>\r\n          </div>\r\n        </div>\r\n\r\n        @if (a.duplicateCount > 0) {\r\n          <h4 class=\"sd-autoid-inspector__section-title\">\r\n            <mat-icon class=\"is-error\">error_outline</mat-icon>\r\n            Autoid b\u1ECB tr\u00F9ng\r\n          </h4>\r\n          <div class=\"sd-autoid-inspector__table-wrap\">\r\n            <table class=\"sd-autoid-inspector__table\">\r\n              <thead>\r\n                <tr><th>Autoid</th><th>S\u1ED1 l\u1EA7n</th></tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (entry of a.duplicates | keyvalue; track entry.key) {\r\n                  <tr class=\"is-error\">\r\n                    <td><code>{{ entry.key }}</code></td>\r\n                    <td>{{ entry.value }}</td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        }\r\n\r\n        @if (a.missingCount > 0) {\r\n          <h4 class=\"sd-autoid-inspector__section-title\">\r\n            <mat-icon class=\"is-warning\">warning_amber</mat-icon>\r\n            Element thi\u1EBFu autoid\r\n          </h4>\r\n          <div class=\"sd-autoid-inspector__table-wrap\">\r\n            <table class=\"sd-autoid-inspector__table\">\r\n              <thead>\r\n                <tr><th>Tag</th><th>Name hint</th><th>Selector</th></tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (m of a.missing; track $index) {\r\n                  <tr class=\"is-warning\">\r\n                    <td><code>{{ m.tag }}</code></td>\r\n                    <td>{{ m.nameHint }}</td>\r\n                    <td><code>{{ m.selector }}</code></td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        }\r\n\r\n        @if (a.duplicateCount === 0 && a.missingCount === 0) {\r\n          <div class=\"sd-autoid-inspector__success-card\">\r\n            <mat-icon>check_circle</mat-icon>\r\n            <div>\r\n              <strong>Kh\u00F4ng c\u00F3 element thi\u1EBFu ho\u1EB7c tr\u00F9ng autoid.</strong>\r\n              <small>Trang \u0111\u00E3 \u0111\u1EA1t chu\u1EA9n convention autoid.</small>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #elementsTpl>\r\n      @let _filter = filter();\r\n      <div class=\"sd-autoid-inspector__filter\">\r\n        <mat-icon>search</mat-icon>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"L\u1ECDc theo autoid / name / tag\"\r\n          [ngModel]=\"_filter\"\r\n          (ngModelChange)=\"filter.set($event)\"/>\r\n        @if (_filter) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__icon-btn\"\r\n            matTooltip=\"Xo\u00E1 filter\"\r\n            (click)=\"filter.set('')\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- Top-level elements (not inside any sd-table) -->\r\n      <h4 class=\"sd-autoid-inspector__section-title\">\r\n        Top-level elements\r\n        <span class=\"sd-autoid-inspector__badge\">{{ topLevelElements().length }}</span>\r\n      </h4>\r\n      <div class=\"sd-autoid-inspector__table-wrap\">\r\n        <table class=\"sd-autoid-inspector__table\">\r\n          <thead>\r\n            <tr>\r\n              <th class=\"is-num\">STT</th>\r\n              <th>Name</th>\r\n              <th>Autoid</th>\r\n              <th>Tag</th>\r\n              <th>State</th>\r\n              <th>Value</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            @for (el of topLevelElements(); track el.autoid + $index) {\r\n              <tr [class.is-error]=\"el.duplicate\">\r\n                <td class=\"is-num\">{{ el.stt }}</td>\r\n                <td>{{ el.name || '\u2014' }}</td>\r\n                <td>\r\n                  <div class=\"sd-autoid-inspector__autoid-cell\">\r\n                    <code>{{ el.autoid }}</code>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"sd-autoid-inspector__icon-btn is-primary\"\r\n                      matTooltip=\"Copy xpath\"\r\n                      (click)=\"copyXpath(el.autoid)\">\r\n                      <mat-icon>content_copy</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </td>\r\n                <td><span class=\"sd-autoid-inspector__tag-chip\">{{ el.tag }}</span></td>\r\n                <td class=\"sd-autoid-inspector__state-cell\">\r\n                  @if (el.state.disabled !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-error]=\"el.state.disabled === 'true'\">\r\n                      disabled={{ el.state.disabled }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.loading !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-warning]=\"el.state.loading === 'true'\">\r\n                      loading={{ el.state.loading }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.empty !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-info]=\"el.state.empty === 'true'\">\r\n                      empty={{ el.state.empty }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.invalid !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-error]=\"el.state.invalid === 'true'\">\r\n                      invalid={{ el.state.invalid }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.opened !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-info]=\"el.state.opened === 'true'\">\r\n                      opened={{ el.state.opened }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.count !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                      count={{ el.state.count }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.required !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-warning]=\"el.state.required === 'true'\">\r\n                      required={{ el.state.required }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.maxlength !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                      maxlength={{ el.state.maxlength }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.minlength !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                      minlength={{ el.state.minlength }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.pattern !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                      pattern={{ el.state.pattern }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.errorMessage !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-error\">\r\n                      error: {{ el.state.errorMessage }}\r\n                    </span>\r\n                  }\r\n                </td>\r\n                <td class=\"sd-autoid-inspector__value\" [matTooltip]=\"el.state.dataValue || el.text || ''\">\r\n                  {{ el.state.dataValue || el.text || '\u2014' }}\r\n                </td>\r\n              </tr>\r\n            } @empty {\r\n              <tr><td colspan=\"6\" class=\"sd-autoid-inspector__empty\">Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3.</td></tr>\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <!-- One section per sd-table group -->\r\n      @for (group of tableGroups(); track group.scope) {\r\n        <h4 class=\"sd-autoid-inspector__section-title\">\r\n          <mat-icon class=\"is-info\">table_chart</mat-icon>\r\n          Inside <code>{{ group.scope }}</code>\r\n          <span class=\"sd-autoid-inspector__badge\">{{ group.items.length }}</span>\r\n        </h4>\r\n        <div class=\"sd-autoid-inspector__table-wrap\">\r\n          <table class=\"sd-autoid-inspector__table\">\r\n            <thead>\r\n              <tr>\r\n                <th class=\"is-num\">STT</th>\r\n                <th>Name</th>\r\n                <th>Autoid</th>\r\n                <th>Tag</th>\r\n                <th>State</th>\r\n                <th>Value</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (el of group.items; track el.autoid + $index) {\r\n                <tr [class.is-error]=\"el.duplicate\">\r\n                  <td class=\"is-num\">{{ el.stt }}</td>\r\n                  <td>{{ el.name || '\u2014' }}</td>\r\n                  <td>\r\n                    <div class=\"sd-autoid-inspector__autoid-cell\">\r\n                      <code>{{ el.autoid }}</code>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"sd-autoid-inspector__icon-btn is-primary\"\r\n                        matTooltip=\"Copy xpath\"\r\n                        (click)=\"copyXpath(el.autoid)\">\r\n                        <mat-icon>content_copy</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </td>\r\n                  <td><span class=\"sd-autoid-inspector__tag-chip\">{{ el.tag }}</span></td>\r\n                  <td class=\"sd-autoid-inspector__state-cell\">\r\n                    @if (el.state.disabled !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-error]=\"el.state.disabled === 'true'\">\r\n                        disabled={{ el.state.disabled }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.loading !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-warning]=\"el.state.loading === 'true'\">\r\n                        loading={{ el.state.loading }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.empty !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-info]=\"el.state.empty === 'true'\">\r\n                        empty={{ el.state.empty }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.invalid !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-error]=\"el.state.invalid === 'true'\">\r\n                        invalid={{ el.state.invalid }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.opened !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-info]=\"el.state.opened === 'true'\">\r\n                        opened={{ el.state.opened }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.count !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                        count={{ el.state.count }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.required !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-warning]=\"el.state.required === 'true'\">\r\n                        required={{ el.state.required }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.maxlength !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                        maxlength={{ el.state.maxlength }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.minlength !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                        minlength={{ el.state.minlength }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.pattern !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                        pattern={{ el.state.pattern }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.errorMessage !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-error\">\r\n                        error: {{ el.state.errorMessage }}\r\n                      </span>\r\n                    }\r\n                  </td>\r\n                  <td class=\"sd-autoid-inspector__value\" [matTooltip]=\"el.state.dataValue || el.text || ''\">\r\n                    {{ el.state.dataValue || el.text || '\u2014' }}\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #exportTpl>\r\n      <div class=\"sd-autoid-inspector__export-grid\">\r\n        <button type=\"button\" matTooltip=\"Copy JSON v\u00E0o clipboard\" (click)=\"copyJson()\">\r\n          <mat-icon>content_copy</mat-icon>\r\n          <span>Copy JSON</span>\r\n          <small>clipboard</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i file JSON\" (click)=\"exportJson()\">\r\n          <mat-icon>download</mat-icon>\r\n          <span>JSON</span>\r\n          <small>.json</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i file CSV\" (click)=\"exportCsv()\">\r\n          <mat-icon>table_view</mat-icon>\r\n          <span>CSV</span>\r\n          <small>.csv</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i MD POM skeleton \u2014 cho AI vi\u1EBFt auto-test\" (click)=\"exportMdPom()\">\r\n          <mat-icon>code</mat-icon>\r\n          <span>MD POM</span>\r\n          <small>AI test</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i MD reference table \u2014 group theo tag sd-*\" (click)=\"exportMdTable()\">\r\n          <mat-icon>view_list</mat-icon>\r\n          <span>MD Table</span>\r\n          <small>reference</small>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n}\r\n", styles: [":host{position:fixed;inset:auto 0 0 auto;z-index:100000;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--sd-black500, #212121)}.sd-autoid-inspector__fab-wrap{position:fixed;right:16px;bottom:16px;z-index:100000}.sd-autoid-inspector__fab-wrap:hover .sd-autoid-inspector__fab-dismiss{opacity:1;transform:scale(1);pointer-events:auto}.sd-autoid-inspector__fab{width:36px;height:36px;border-radius:50%;border:none;background:var(--sd-primary, #2A66F4);color:#fff;cursor:pointer;box-shadow:0 3px 10px #00000038;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}.sd-autoid-inspector__fab:hover{background:var(--sd-primary-dark, #1C4AD9);transform:scale(1.08);box-shadow:0 5px 14px #00000047}.sd-autoid-inspector__fab mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__fab-dismiss{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--sd-black200, #E6E6E6);background:#fff;color:var(--sd-black400, #757575);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .12s ease,transform .12s ease,color .12s ease,background .12s ease;box-shadow:0 1px 4px #00000026}.sd-autoid-inspector__fab-dismiss:hover{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__fab-dismiss mat-icon{font-size:12px;width:12px;height:12px;line-height:12px}.sd-autoid-inspector__backdrop{position:fixed;inset:0;background:#00000052;z-index:100001;backdrop-filter:blur(2px)}.sd-autoid-inspector__panel{position:fixed;right:20px;bottom:80px;width:min(860px,100vw - 40px);max-height:calc(100vh - 110px);background:#fff;border-radius:12px;box-shadow:0 16px 48px #00000038;display:flex;flex-direction:column;z-index:100002;overflow:hidden;border:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--sd-black200, #E6E6E6);background:var(--sd-black100, #F2F2F2);flex-shrink:0}.sd-autoid-inspector__segments{display:inline-flex;border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;background:#fff;overflow:hidden}.sd-autoid-inspector__segments button{border:none;background:transparent;padding:5px 12px;cursor:pointer;font-size:12px;font-weight:500;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;gap:6px;border-right:1px solid var(--sd-black200, #E6E6E6);transition:background .12s ease,color .12s ease}.sd-autoid-inspector__segments button:last-child{border-right:none}.sd-autoid-inspector__segments button:hover:not(.is-active){background:var(--sd-black100, #F2F2F2);color:var(--sd-black500, #212121)}.sd-autoid-inspector__segments button.is-active{background:var(--sd-primary, #2A66F4);color:#fff}.sd-autoid-inspector__badge{background:var(--sd-black200, #E6E6E6);color:var(--sd-black500, #212121);border-radius:10px;padding:0 7px;font-size:11px;font-weight:600;line-height:16px}.is-active .sd-autoid-inspector__badge{background:#ffffff40;color:#fff}.sd-autoid-inspector__badge.is-warn{background:var(--sd-error, #F82C13);color:#fff}.sd-autoid-inspector__actions{display:inline-flex;gap:4px;margin-left:auto}.sd-autoid-inspector__icon-btn{border:none;background:transparent;cursor:pointer;padding:4px;border-radius:6px;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.sd-autoid-inspector__icon-btn:hover{background:var(--sd-black100, #F2F2F2);color:var(--sd-black500, #212121)}.sd-autoid-inspector__icon-btn.is-primary{color:var(--sd-primary, #2A66F4)}.sd-autoid-inspector__icon-btn.is-primary:hover{background:var(--sd-primary-light, #EAF1FF);color:var(--sd-primary-dark, #1C4AD9)}.sd-autoid-inspector__icon-btn mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__close-btn{border:none;cursor:pointer;padding:4px;border-radius:50%;width:28px;height:28px;background:transparent;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.sd-autoid-inspector__close-btn:hover{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E)}.sd-autoid-inspector__close-btn mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__body{padding:14px;overflow:auto;flex:1;background:#fff}.sd-autoid-inspector__toast{position:absolute;top:56px;right:14px;background:var(--sd-success, #4CAF50);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;z-index:2;box-shadow:0 4px 12px #0000002e}.sd-autoid-inspector__audit-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.sd-autoid-inspector__toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sd-black200, #E6E6E6);background:#fff;border-radius:999px;padding:5px 12px 5px 10px;cursor:pointer;font-size:12px;font-weight:500;color:var(--sd-black400, #757575);transition:all .15s ease}.sd-autoid-inspector__toggle:hover{border-color:var(--sd-primary, #2A66F4);color:var(--sd-primary, #2A66F4)}.sd-autoid-inspector__toggle.is-on{border-color:var(--sd-primary, #2A66F4);color:var(--sd-primary, #2A66F4);background:var(--sd-primary-light, #EAF1FF)}.sd-autoid-inspector__toggle mat-icon{font-size:16px;width:16px;height:16px}.sd-autoid-inspector__toggle-state{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--sd-black200, #E6E6E6);color:var(--sd-black400, #757575)}.is-on .sd-autoid-inspector__toggle-state{background:var(--sd-primary, #2A66F4);color:#fff}.sd-autoid-inspector__summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.sd-autoid-inspector__stat{background:var(--sd-black100, #F2F2F2);border-radius:10px;padding:12px;text-align:center;border:1px solid transparent}.sd-autoid-inspector__stat.is-info{background:var(--sd-info-light, #E7E9FF);border-color:var(--sd-info, #2962FF)}.sd-autoid-inspector__stat.is-info .sd-autoid-inspector__stat-value{color:var(--sd-info, #2962FF)}.sd-autoid-inspector__stat.is-success{background:var(--sd-success-light, #DBEFDC);border-color:var(--sd-success, #4CAF50)}.sd-autoid-inspector__stat.is-success .sd-autoid-inspector__stat-value{color:var(--sd-success-dark, #39833C)}.sd-autoid-inspector__stat.is-warning{background:var(--sd-warning-light, #FFEACC);border-color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__stat.is-warning .sd-autoid-inspector__stat-value{color:var(--sd-warning-dark, #BF7000)}.sd-autoid-inspector__stat.is-error{background:var(--sd-error-light, #FED5D0);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__stat.is-error .sd-autoid-inspector__stat-value{color:var(--sd-error-dark, #BA200E)}.sd-autoid-inspector__stat-value{font-size:22px;font-weight:700;line-height:1;margin-bottom:4px}.sd-autoid-inspector__stat-label{font-size:11px;color:var(--sd-black400, #757575);text-transform:uppercase;letter-spacing:.4px;font-weight:600}.sd-autoid-inspector__section-title{display:flex;align-items:center;gap:6px;margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--sd-black500, #212121)}.sd-autoid-inspector__section-title mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__section-title mat-icon.is-error{color:var(--sd-error, #F82C13)}.sd-autoid-inspector__section-title mat-icon.is-warning{color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__section-title mat-icon.is-info{color:var(--sd-info, #2962FF)}.sd-autoid-inspector__success-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--sd-success-light, #DBEFDC);border:1px solid var(--sd-success, #4CAF50);border-radius:10px;color:var(--sd-success-dark, #39833C)}.sd-autoid-inspector__success-card mat-icon{font-size:28px;width:28px;height:28px;color:var(--sd-success, #4CAF50)}.sd-autoid-inspector__success-card strong{display:block;font-size:13px;margin-bottom:2px}.sd-autoid-inspector__success-card small{font-size:11px;opacity:.85}.sd-autoid-inspector__table-wrap{border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;overflow:auto;max-height:60vh;background:#fff}.sd-autoid-inspector__table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.sd-autoid-inspector__table th,.sd-autoid-inspector__table td{padding:8px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__table thead th{position:sticky;top:0;z-index:1;background:var(--sd-black100, #F2F2F2);font-weight:600;color:var(--sd-black500, #212121);text-transform:none;font-size:11px;letter-spacing:.3px;border-bottom:none;box-shadow:inset 0 -1px 0 var(--sd-black200, #E6E6E6),0 2px 4px #0000000a;white-space:nowrap}.sd-autoid-inspector__table thead th.is-num{text-align:right;width:50px}.sd-autoid-inspector__table tbody tr{transition:background .1s ease}.sd-autoid-inspector__table tbody tr:hover{background:var(--sd-primary-light, #EAF1FF)}.sd-autoid-inspector__table tbody tr:last-child td{border-bottom:none}.sd-autoid-inspector__table tbody tr.is-error{background:var(--sd-error-light, #FED5D0)}.sd-autoid-inspector__table tbody tr.is-error:hover{background:var(--sd-error-light, #FED5D0);filter:brightness(.98)}.sd-autoid-inspector__table tbody tr.is-warning{background:var(--sd-warning-light, #FFEACC)}.sd-autoid-inspector__table tbody tr.is-warning:hover{background:var(--sd-warning-light, #FFEACC);filter:brightness(.98)}.sd-autoid-inspector__table td.is-num{text-align:right;color:var(--sd-black400, #757575);font-variant-numeric:tabular-nums}.sd-autoid-inspector__table code{font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:11px;background:var(--sd-black100, #F2F2F2);padding:2px 6px;border-radius:4px;color:var(--sd-primary-dark, #1C4AD9);border:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__autoid-cell{display:inline-flex;align-items:center;gap:6px}.sd-autoid-inspector__tag-chip{display:inline-block;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:11px;background:var(--sd-info-light, #E7E9FF);color:var(--sd-info, #2962FF);border:1px solid var(--sd-info, #2962FF);padding:1px 8px;border-radius:999px;font-weight:500}.sd-autoid-inspector__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sd-black400, #757575);font-style:italic}.sd-autoid-inspector__state-cell{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}.sd-autoid-inspector__state-chip{display:inline-block;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:10px;background:var(--sd-black100, #F2F2F2);color:var(--sd-black400, #757575);border:1px solid var(--sd-black200, #E6E6E6);padding:1px 6px;border-radius:999px;font-weight:500;white-space:nowrap}.sd-autoid-inspector__state-chip.is-error{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__state-chip.is-warning{background:var(--sd-warning-light, #FFEACC);color:var(--sd-warning-dark, #BF7000);border-color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__state-chip.is-info{background:var(--sd-info-light, #E7E9FF);color:var(--sd-info, #2962FF);border-color:var(--sd-info, #2962FF)}.sd-autoid-inspector__empty{text-align:center;color:var(--sd-black400, #757575);padding:24px;font-style:italic}.sd-autoid-inspector__filter{display:flex;align-items:center;gap:6px;background:var(--sd-black100, #F2F2F2);border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;padding:6px 10px;margin-bottom:12px;transition:border-color .15s ease}.sd-autoid-inspector__filter:focus-within{border-color:var(--sd-primary, #2A66F4);background:#fff}.sd-autoid-inspector__filter input{flex:1;border:none;background:transparent;outline:none;font-size:13px;color:var(--sd-black500, #212121)}.sd-autoid-inspector__filter input::placeholder{color:var(--sd-black300, #BFBFBF)}.sd-autoid-inspector__filter>mat-icon{font-size:18px;width:18px;height:18px;color:var(--sd-black400, #757575)}.sd-autoid-inspector__export-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sd-autoid-inspector__export-grid button{border:1px solid var(--sd-black200, #E6E6E6);background:#fff;border-radius:10px;padding:12px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;transition:border-color .15s ease,background .15s ease,transform .12s ease;text-align:center}.sd-autoid-inspector__export-grid button:hover{border-color:var(--sd-primary, #2A66F4);background:var(--sd-primary-light, #EAF1FF);transform:translateY(-1px)}.sd-autoid-inspector__export-grid button span{font-size:12px;font-weight:600;color:var(--sd-black500, #212121);line-height:1.25}.sd-autoid-inspector__export-grid button small{font-size:10px;color:var(--sd-black400, #757575);line-height:1.2}.sd-autoid-inspector__export-grid button mat-icon{font-size:22px;width:22px;height:22px;color:var(--sd-primary, #2A66F4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidInspector, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-autoid-inspector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule], template: "@if (enabled() && !dismissed()) {\r\n  <div class=\"sd-autoid-inspector__fab-wrap\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"sd-autoid-inspector__fab\"\r\n      data-autoid=\"sd-autoid-inspector-fab\"\r\n      [matTooltip]=\"open() ? '\u0110\u00F3ng AutoId Inspector' : 'M\u1EDF AutoId Inspector'\"\r\n      matTooltipPosition=\"left\"\r\n      (click)=\"togglePanel()\">\r\n      <mat-icon>{{ open() ? 'close' : 'tag' }}</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"sd-autoid-inspector__fab-dismiss\"\r\n      matTooltip=\"\u1EA8n t\u1EA1m \u2014 reload trang \u0111\u1EC3 hi\u1EC7n l\u1EA1i\"\r\n      matTooltipPosition=\"left\"\r\n      aria-label=\"\u1EA8n t\u1EA1m FAB\"\r\n      (click)=\"dismissFab($event)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n}\r\n\r\n@if (enabled() && open()) {\r\n    <div class=\"sd-autoid-inspector__backdrop\" (click)=\"closePanel()\"></div>\r\n    <section class=\"sd-autoid-inspector__panel\" role=\"dialog\" aria-label=\"AutoId Inspector\">\r\n      <header class=\"sd-autoid-inspector__header\">\r\n        <div class=\"sd-autoid-inspector__segments\">\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"segment() === 'audit'\"\r\n            (click)=\"setSegment('audit')\">\r\n            Audit\r\n            @if (audit(); as a) {\r\n              <span class=\"sd-autoid-inspector__badge\" [class.is-warn]=\"a.missingCount + a.duplicateCount > 0\">\r\n                {{ a.missingCount + a.duplicateCount }}\r\n              </span>\r\n            }\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"segment() === 'elements'\"\r\n            (click)=\"setSegment('elements')\">\r\n            Elements\r\n            <span class=\"sd-autoid-inspector__badge\">{{ elements().length }}</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"segment() === 'export'\"\r\n            (click)=\"setSegment('export')\">\r\n            Export\r\n          </button>\r\n        </div>\r\n        <div class=\"sd-autoid-inspector__actions\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__icon-btn\"\r\n            matTooltip=\"Qu\u00E9t l\u1EA1i\"\r\n            (click)=\"refresh()\">\r\n            <mat-icon>refresh</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__close-btn\"\r\n            matTooltip=\"\u0110\u00F3ng\"\r\n            aria-label=\"\u0110\u00F3ng panel\"\r\n            (click)=\"closePanel()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </header>\r\n\r\n      @if (copyOk()) {\r\n        <div class=\"sd-autoid-inspector__toast\">\u0110\u00E3 copy \u2713</div>\r\n      }\r\n\r\n      <div class=\"sd-autoid-inspector__body\">\r\n        @switch (segment()) {\r\n          @case ('audit') {\r\n            <ng-container *ngTemplateOutlet=\"auditTpl\"></ng-container>\r\n          }\r\n          @case ('elements') {\r\n            <ng-container *ngTemplateOutlet=\"elementsTpl\"></ng-container>\r\n          }\r\n          @case ('export') {\r\n            <ng-container *ngTemplateOutlet=\"exportTpl\"></ng-container>\r\n          }\r\n        }\r\n      </div>\r\n    </section>\r\n\r\n    <ng-template #auditTpl>\r\n      @if (audit(); as a) {\r\n        <div class=\"sd-autoid-inspector__audit-toolbar\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__toggle\"\r\n            [class.is-on]=\"highlightOn()\"\r\n            (click)=\"toggleHighlight()\">\r\n            <mat-icon>{{ highlightOn() ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n            <span>Highlight DOM</span>\r\n            <span class=\"sd-autoid-inspector__toggle-state\">{{ highlightOn() ? 'ON' : 'OFF' }}</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"sd-autoid-inspector__summary\">\r\n          <div class=\"sd-autoid-inspector__stat is-info\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.total }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">T\u1ED5ng autoid</div>\r\n          </div>\r\n          <div class=\"sd-autoid-inspector__stat\" [class.is-error]=\"a.duplicateCount > 0\" [class.is-success]=\"a.duplicateCount === 0\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.duplicateCount }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">Tr\u00F9ng</div>\r\n          </div>\r\n          <div class=\"sd-autoid-inspector__stat\" [class.is-warning]=\"a.missingCount > 0\" [class.is-success]=\"a.missingCount === 0\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.missingCount }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">Thi\u1EBFu</div>\r\n          </div>\r\n        </div>\r\n\r\n        @if (a.duplicateCount > 0) {\r\n          <h4 class=\"sd-autoid-inspector__section-title\">\r\n            <mat-icon class=\"is-error\">error_outline</mat-icon>\r\n            Autoid b\u1ECB tr\u00F9ng\r\n          </h4>\r\n          <div class=\"sd-autoid-inspector__table-wrap\">\r\n            <table class=\"sd-autoid-inspector__table\">\r\n              <thead>\r\n                <tr><th>Autoid</th><th>S\u1ED1 l\u1EA7n</th></tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (entry of a.duplicates | keyvalue; track entry.key) {\r\n                  <tr class=\"is-error\">\r\n                    <td><code>{{ entry.key }}</code></td>\r\n                    <td>{{ entry.value }}</td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        }\r\n\r\n        @if (a.missingCount > 0) {\r\n          <h4 class=\"sd-autoid-inspector__section-title\">\r\n            <mat-icon class=\"is-warning\">warning_amber</mat-icon>\r\n            Element thi\u1EBFu autoid\r\n          </h4>\r\n          <div class=\"sd-autoid-inspector__table-wrap\">\r\n            <table class=\"sd-autoid-inspector__table\">\r\n              <thead>\r\n                <tr><th>Tag</th><th>Name hint</th><th>Selector</th></tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (m of a.missing; track $index) {\r\n                  <tr class=\"is-warning\">\r\n                    <td><code>{{ m.tag }}</code></td>\r\n                    <td>{{ m.nameHint }}</td>\r\n                    <td><code>{{ m.selector }}</code></td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        }\r\n\r\n        @if (a.duplicateCount === 0 && a.missingCount === 0) {\r\n          <div class=\"sd-autoid-inspector__success-card\">\r\n            <mat-icon>check_circle</mat-icon>\r\n            <div>\r\n              <strong>Kh\u00F4ng c\u00F3 element thi\u1EBFu ho\u1EB7c tr\u00F9ng autoid.</strong>\r\n              <small>Trang \u0111\u00E3 \u0111\u1EA1t chu\u1EA9n convention autoid.</small>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #elementsTpl>\r\n      <div class=\"sd-autoid-inspector__filter\">\r\n        <mat-icon>search</mat-icon>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"L\u1ECDc theo autoid / name / tag\"\r\n          [ngModel]=\"filter()\"\r\n          (ngModelChange)=\"filter.set($event)\"/>\r\n        @if (filter()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__icon-btn\"\r\n            matTooltip=\"Xo\u00E1 filter\"\r\n            (click)=\"filter.set('')\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n      <div class=\"sd-autoid-inspector__table-wrap\">\r\n        <table class=\"sd-autoid-inspector__table\">\r\n          <thead>\r\n            <tr>\r\n              <th class=\"is-num\">STT</th>\r\n              <th>Name</th>\r\n              <th>Autoid</th>\r\n              <th>Tag</th>\r\n              <th>Value</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            @for (el of filteredElements(); track el.autoid + $index) {\r\n              <tr [class.is-error]=\"el.duplicate\">\r\n                <td class=\"is-num\">{{ el.stt }}</td>\r\n                <td>{{ el.name || '\u2014' }}</td>\r\n                <td>\r\n                  <div class=\"sd-autoid-inspector__autoid-cell\">\r\n                    <code>{{ el.autoid }}</code>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"sd-autoid-inspector__icon-btn is-primary\"\r\n                      matTooltip=\"Copy xpath\"\r\n                      (click)=\"copyXpath(el.autoid)\">\r\n                      <mat-icon>content_copy</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </td>\r\n                <td><span class=\"sd-autoid-inspector__tag-chip\">{{ el.tag }}</span></td>\r\n                <td class=\"sd-autoid-inspector__value\" [matTooltip]=\"el.value || ''\">\r\n                  {{ el.value || '\u2014' }}\r\n                </td>\r\n              </tr>\r\n            } @empty {\r\n              <tr><td colspan=\"5\" class=\"sd-autoid-inspector__empty\">Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3.</td></tr>\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template #exportTpl>\r\n      <div class=\"sd-autoid-inspector__export-grid\">\r\n        <button type=\"button\" matTooltip=\"Copy JSON v\u00E0o clipboard\" (click)=\"copyJson()\">\r\n          <mat-icon>content_copy</mat-icon>\r\n          <span>Copy JSON</span>\r\n          <small>clipboard</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i file JSON\" (click)=\"exportJson()\">\r\n          <mat-icon>download</mat-icon>\r\n          <span>JSON</span>\r\n          <small>.json</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i file CSV\" (click)=\"exportCsv()\">\r\n          <mat-icon>table_view</mat-icon>\r\n          <span>CSV</span>\r\n          <small>.csv</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i MD POM skeleton \u2014 cho AI vi\u1EBFt auto-test\" (click)=\"exportMdPom()\">\r\n          <mat-icon>code</mat-icon>\r\n          <span>MD POM</span>\r\n          <small>AI test</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i MD reference table \u2014 group theo tag sd-*\" (click)=\"exportMdTable()\">\r\n          <mat-icon>view_list</mat-icon>\r\n          <span>MD Table</span>\r\n          <small>reference</small>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n}\r\n", styles: [":host{position:fixed;inset:auto 0 0 auto;z-index:100000;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--sd-black500, #212121)}.sd-autoid-inspector__fab-wrap{position:fixed;right:16px;bottom:16px;z-index:100000}.sd-autoid-inspector__fab-wrap:hover .sd-autoid-inspector__fab-dismiss{opacity:1;transform:scale(1);pointer-events:auto}.sd-autoid-inspector__fab{width:36px;height:36px;border-radius:50%;border:none;background:var(--sd-primary, #2A66F4);color:#fff;cursor:pointer;box-shadow:0 3px 10px #00000038;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}.sd-autoid-inspector__fab:hover{background:var(--sd-primary-dark, #1C4AD9);transform:scale(1.08);box-shadow:0 5px 14px #00000047}.sd-autoid-inspector__fab mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__fab-dismiss{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--sd-black200, #E6E6E6);background:#fff;color:var(--sd-black400, #757575);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .12s ease,transform .12s ease,color .12s ease,background .12s ease;box-shadow:0 1px 4px #00000026}.sd-autoid-inspector__fab-dismiss:hover{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__fab-dismiss mat-icon{font-size:12px;width:12px;height:12px;line-height:12px}.sd-autoid-inspector__backdrop{position:fixed;inset:0;background:#00000052;z-index:100001;backdrop-filter:blur(2px)}.sd-autoid-inspector__panel{position:fixed;right:20px;bottom:80px;width:min(860px,100vw - 40px);max-height:calc(100vh - 110px);background:#fff;border-radius:12px;box-shadow:0 16px 48px #00000038;display:flex;flex-direction:column;z-index:100002;overflow:hidden;border:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--sd-black200, #E6E6E6);background:var(--sd-black100, #F2F2F2);flex-shrink:0}.sd-autoid-inspector__segments{display:inline-flex;border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;background:#fff;overflow:hidden}.sd-autoid-inspector__segments button{border:none;background:transparent;padding:5px 12px;cursor:pointer;font-size:12px;font-weight:500;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;gap:6px;border-right:1px solid var(--sd-black200, #E6E6E6);transition:background .12s ease,color .12s ease}.sd-autoid-inspector__segments button:last-child{border-right:none}.sd-autoid-inspector__segments button:hover:not(.is-active){background:var(--sd-black100, #F2F2F2);color:var(--sd-black500, #212121)}.sd-autoid-inspector__segments button.is-active{background:var(--sd-primary, #2A66F4);color:#fff}.sd-autoid-inspector__badge{background:var(--sd-black200, #E6E6E6);color:var(--sd-black500, #212121);border-radius:10px;padding:0 7px;font-size:11px;font-weight:600;line-height:16px}.is-active .sd-autoid-inspector__badge{background:#ffffff40;color:#fff}.sd-autoid-inspector__badge.is-warn{background:var(--sd-error, #F82C13);color:#fff}.sd-autoid-inspector__actions{display:inline-flex;gap:4px;margin-left:auto}.sd-autoid-inspector__icon-btn{border:none;background:transparent;cursor:pointer;padding:4px;border-radius:6px;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.sd-autoid-inspector__icon-btn:hover{background:var(--sd-black100, #F2F2F2);color:var(--sd-black500, #212121)}.sd-autoid-inspector__icon-btn.is-primary{color:var(--sd-primary, #2A66F4)}.sd-autoid-inspector__icon-btn.is-primary:hover{background:var(--sd-primary-light, #EAF1FF);color:var(--sd-primary-dark, #1C4AD9)}.sd-autoid-inspector__icon-btn mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__close-btn{border:none;cursor:pointer;padding:4px;border-radius:50%;width:28px;height:28px;background:transparent;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.sd-autoid-inspector__close-btn:hover{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E)}.sd-autoid-inspector__close-btn mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__body{padding:14px;overflow:auto;flex:1;background:#fff}.sd-autoid-inspector__toast{position:absolute;top:56px;right:14px;background:var(--sd-success, #4CAF50);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;z-index:2;box-shadow:0 4px 12px #0000002e}.sd-autoid-inspector__audit-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.sd-autoid-inspector__toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sd-black200, #E6E6E6);background:#fff;border-radius:999px;padding:5px 12px 5px 10px;cursor:pointer;font-size:12px;font-weight:500;color:var(--sd-black400, #757575);transition:all .15s ease}.sd-autoid-inspector__toggle:hover{border-color:var(--sd-primary, #2A66F4);color:var(--sd-primary, #2A66F4)}.sd-autoid-inspector__toggle.is-on{border-color:var(--sd-primary, #2A66F4);color:var(--sd-primary, #2A66F4);background:var(--sd-primary-light, #EAF1FF)}.sd-autoid-inspector__toggle mat-icon{font-size:16px;width:16px;height:16px}.sd-autoid-inspector__toggle-state{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--sd-black200, #E6E6E6);color:var(--sd-black400, #757575)}.is-on .sd-autoid-inspector__toggle-state{background:var(--sd-primary, #2A66F4);color:#fff}.sd-autoid-inspector__summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.sd-autoid-inspector__stat{background:var(--sd-black100, #F2F2F2);border-radius:10px;padding:12px;text-align:center;border:1px solid transparent}.sd-autoid-inspector__stat.is-info{background:var(--sd-info-light, #E7E9FF);border-color:var(--sd-info, #2962FF)}.sd-autoid-inspector__stat.is-info .sd-autoid-inspector__stat-value{color:var(--sd-info, #2962FF)}.sd-autoid-inspector__stat.is-success{background:var(--sd-success-light, #DBEFDC);border-color:var(--sd-success, #4CAF50)}.sd-autoid-inspector__stat.is-success .sd-autoid-inspector__stat-value{color:var(--sd-success-dark, #39833C)}.sd-autoid-inspector__stat.is-warning{background:var(--sd-warning-light, #FFEACC);border-color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__stat.is-warning .sd-autoid-inspector__stat-value{color:var(--sd-warning-dark, #BF7000)}.sd-autoid-inspector__stat.is-error{background:var(--sd-error-light, #FED5D0);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__stat.is-error .sd-autoid-inspector__stat-value{color:var(--sd-error-dark, #BA200E)}.sd-autoid-inspector__stat-value{font-size:22px;font-weight:700;line-height:1;margin-bottom:4px}.sd-autoid-inspector__stat-label{font-size:11px;color:var(--sd-black400, #757575);text-transform:uppercase;letter-spacing:.4px;font-weight:600}.sd-autoid-inspector__section-title{display:flex;align-items:center;gap:6px;margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--sd-black500, #212121)}.sd-autoid-inspector__section-title mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__section-title mat-icon.is-error{color:var(--sd-error, #F82C13)}.sd-autoid-inspector__section-title mat-icon.is-warning{color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__success-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--sd-success-light, #DBEFDC);border:1px solid var(--sd-success, #4CAF50);border-radius:10px;color:var(--sd-success-dark, #39833C)}.sd-autoid-inspector__success-card mat-icon{font-size:28px;width:28px;height:28px;color:var(--sd-success, #4CAF50)}.sd-autoid-inspector__success-card strong{display:block;font-size:13px;margin-bottom:2px}.sd-autoid-inspector__success-card small{font-size:11px;opacity:.85}.sd-autoid-inspector__table-wrap{border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;overflow:auto;max-height:60vh;background:#fff}.sd-autoid-inspector__table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.sd-autoid-inspector__table th,.sd-autoid-inspector__table td{padding:8px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__table thead th{position:sticky;top:0;z-index:1;background:var(--sd-black100, #F2F2F2);font-weight:600;color:var(--sd-black500, #212121);text-transform:none;font-size:11px;letter-spacing:.3px;border-bottom:none;box-shadow:inset 0 -1px 0 var(--sd-black200, #E6E6E6),0 2px 4px #0000000a;white-space:nowrap}.sd-autoid-inspector__table thead th.is-num{text-align:right;width:50px}.sd-autoid-inspector__table tbody tr{transition:background .1s ease}.sd-autoid-inspector__table tbody tr:hover{background:var(--sd-primary-light, #EAF1FF)}.sd-autoid-inspector__table tbody tr:last-child td{border-bottom:none}.sd-autoid-inspector__table tbody tr.is-error{background:var(--sd-error-light, #FED5D0)}.sd-autoid-inspector__table tbody tr.is-error:hover{background:var(--sd-error-light, #FED5D0);filter:brightness(.98)}.sd-autoid-inspector__table tbody tr.is-warning{background:var(--sd-warning-light, #FFEACC)}.sd-autoid-inspector__table tbody tr.is-warning:hover{background:var(--sd-warning-light, #FFEACC);filter:brightness(.98)}.sd-autoid-inspector__table td.is-num{text-align:right;color:var(--sd-black400, #757575);font-variant-numeric:tabular-nums}.sd-autoid-inspector__table code{font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:11px;background:var(--sd-black100, #F2F2F2);padding:2px 6px;border-radius:4px;color:var(--sd-primary-dark, #1C4AD9);border:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__autoid-cell{display:inline-flex;align-items:center;gap:6px}.sd-autoid-inspector__tag-chip{display:inline-block;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:11px;background:var(--sd-info-light, #E7E9FF);color:var(--sd-info, #2962FF);border:1px solid var(--sd-info, #2962FF);padding:1px 8px;border-radius:999px;font-weight:500}.sd-autoid-inspector__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sd-black400, #757575);font-style:italic}.sd-autoid-inspector__empty{text-align:center;color:var(--sd-black400, #757575);padding:24px;font-style:italic}.sd-autoid-inspector__filter{display:flex;align-items:center;gap:6px;background:var(--sd-black100, #F2F2F2);border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;padding:6px 10px;margin-bottom:12px;transition:border-color .15s ease}.sd-autoid-inspector__filter:focus-within{border-color:var(--sd-primary, #2A66F4);background:#fff}.sd-autoid-inspector__filter input{flex:1;border:none;background:transparent;outline:none;font-size:13px;color:var(--sd-black500, #212121)}.sd-autoid-inspector__filter input::placeholder{color:var(--sd-black300, #BFBFBF)}.sd-autoid-inspector__filter>mat-icon{font-size:18px;width:18px;height:18px;color:var(--sd-black400, #757575)}.sd-autoid-inspector__export-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sd-autoid-inspector__export-grid button{border:1px solid var(--sd-black200, #E6E6E6);background:#fff;border-radius:10px;padding:12px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;transition:border-color .15s ease,background .15s ease,transform .12s ease;text-align:center}.sd-autoid-inspector__export-grid button:hover{border-color:var(--sd-primary, #2A66F4);background:var(--sd-primary-light, #EAF1FF);transform:translateY(-1px)}.sd-autoid-inspector__export-grid button span{font-size:12px;font-weight:600;color:var(--sd-black500, #212121);line-height:1.25}.sd-autoid-inspector__export-grid button small{font-size:10px;color:var(--sd-black400, #757575);line-height:1.2}.sd-autoid-inspector__export-grid button mat-icon{font-size:22px;width:22px;height:22px;color:var(--sd-primary, #2A66F4)}\n"] }]
+            args: [{ selector: 'sd-autoid-inspector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatTooltipModule], template: "@let _enabled = enabled();\r\n@let _open = open();\r\n@if (_enabled && !dismissed()) {\r\n  <div class=\"sd-autoid-inspector__fab-wrap\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"sd-autoid-inspector__fab\"\r\n      data-autoid=\"sd-autoid-inspector-fab\"\r\n      [attr.data-opened]=\"dataOpened()\"\r\n      [matTooltip]=\"_open ? '\u0110\u00F3ng AutoId Inspector' : 'M\u1EDF AutoId Inspector'\"\r\n      matTooltipPosition=\"left\"\r\n      (click)=\"togglePanel()\">\r\n      <mat-icon>{{ _open ? 'close' : 'tag' }}</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"button\"\r\n      class=\"sd-autoid-inspector__fab-dismiss\"\r\n      matTooltip=\"\u1EA8n t\u1EA1m \u2014 reload trang \u0111\u1EC3 hi\u1EC7n l\u1EA1i\"\r\n      matTooltipPosition=\"left\"\r\n      aria-label=\"\u1EA8n t\u1EA1m FAB\"\r\n      (click)=\"dismissFab($event)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n}\r\n\r\n@if (_enabled && _open) {\r\n    @let _segment = segment();\r\n    <div class=\"sd-autoid-inspector__backdrop\" (click)=\"closePanel()\"></div>\r\n    <section class=\"sd-autoid-inspector__panel\"\r\n             role=\"dialog\"\r\n             aria-label=\"AutoId Inspector\"\r\n             data-autoid=\"sd-autoid-inspector-panel\"\r\n             [attr.data-segment]=\"dataSegment()\"\r\n             [attr.data-highlight-on]=\"dataHighlightOn()\"\r\n             [attr.data-element-count]=\"dataElementCount()\"\r\n             [attr.data-missing-count]=\"dataMissingCount()\"\r\n             [attr.data-duplicate-count]=\"dataDuplicateCount()\">\r\n      <header class=\"sd-autoid-inspector__header\">\r\n        <div class=\"sd-autoid-inspector__segments\">\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"_segment === 'audit'\"\r\n            (click)=\"setSegment('audit')\">\r\n            Audit\r\n            @if (audit(); as a) {\r\n              <span class=\"sd-autoid-inspector__badge\" [class.is-warn]=\"a.missingCount + a.duplicateCount > 0\">\r\n                {{ a.missingCount + a.duplicateCount }}\r\n              </span>\r\n            }\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"_segment === 'elements'\"\r\n            (click)=\"setSegment('elements')\">\r\n            Elements\r\n            <span class=\"sd-autoid-inspector__badge\">{{ elements().length }}</span>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            [class.is-active]=\"_segment === 'export'\"\r\n            (click)=\"setSegment('export')\">\r\n            Export\r\n          </button>\r\n        </div>\r\n        <div class=\"sd-autoid-inspector__actions\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__icon-btn\"\r\n            matTooltip=\"Qu\u00E9t l\u1EA1i\"\r\n            (click)=\"refresh()\">\r\n            <mat-icon>refresh</mat-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__close-btn\"\r\n            matTooltip=\"\u0110\u00F3ng\"\r\n            aria-label=\"\u0110\u00F3ng panel\"\r\n            (click)=\"closePanel()\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        </div>\r\n      </header>\r\n\r\n      @if (copyOk()) {\r\n        <div class=\"sd-autoid-inspector__toast\">\u0110\u00E3 copy \u2713</div>\r\n      }\r\n\r\n      <div class=\"sd-autoid-inspector__body\">\r\n        @switch (_segment) {\r\n          @case ('audit') {\r\n            <ng-container *ngTemplateOutlet=\"auditTpl\"></ng-container>\r\n          }\r\n          @case ('elements') {\r\n            <ng-container *ngTemplateOutlet=\"elementsTpl\"></ng-container>\r\n          }\r\n          @case ('export') {\r\n            <ng-container *ngTemplateOutlet=\"exportTpl\"></ng-container>\r\n          }\r\n        }\r\n      </div>\r\n    </section>\r\n\r\n    <ng-template #auditTpl>\r\n      @if (audit(); as a) {\r\n        @let _highlightOn = highlightOn();\r\n        <div class=\"sd-autoid-inspector__audit-toolbar\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__toggle\"\r\n            [class.is-on]=\"_highlightOn\"\r\n            (click)=\"toggleHighlight()\">\r\n            <mat-icon>{{ _highlightOn ? 'visibility' : 'visibility_off' }}</mat-icon>\r\n            <span>Highlight DOM</span>\r\n            <span class=\"sd-autoid-inspector__toggle-state\">{{ _highlightOn ? 'ON' : 'OFF' }}</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"sd-autoid-inspector__summary\">\r\n          <div class=\"sd-autoid-inspector__stat is-info\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.total }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">T\u1ED5ng autoid</div>\r\n          </div>\r\n          <div class=\"sd-autoid-inspector__stat\" [class.is-error]=\"a.duplicateCount > 0\" [class.is-success]=\"a.duplicateCount === 0\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.duplicateCount }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">Tr\u00F9ng</div>\r\n          </div>\r\n          <div class=\"sd-autoid-inspector__stat\" [class.is-warning]=\"a.missingCount > 0\" [class.is-success]=\"a.missingCount === 0\">\r\n            <div class=\"sd-autoid-inspector__stat-value\">{{ a.missingCount }}</div>\r\n            <div class=\"sd-autoid-inspector__stat-label\">Thi\u1EBFu</div>\r\n          </div>\r\n        </div>\r\n\r\n        @if (a.duplicateCount > 0) {\r\n          <h4 class=\"sd-autoid-inspector__section-title\">\r\n            <mat-icon class=\"is-error\">error_outline</mat-icon>\r\n            Autoid b\u1ECB tr\u00F9ng\r\n          </h4>\r\n          <div class=\"sd-autoid-inspector__table-wrap\">\r\n            <table class=\"sd-autoid-inspector__table\">\r\n              <thead>\r\n                <tr><th>Autoid</th><th>S\u1ED1 l\u1EA7n</th></tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (entry of a.duplicates | keyvalue; track entry.key) {\r\n                  <tr class=\"is-error\">\r\n                    <td><code>{{ entry.key }}</code></td>\r\n                    <td>{{ entry.value }}</td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        }\r\n\r\n        @if (a.missingCount > 0) {\r\n          <h4 class=\"sd-autoid-inspector__section-title\">\r\n            <mat-icon class=\"is-warning\">warning_amber</mat-icon>\r\n            Element thi\u1EBFu autoid\r\n          </h4>\r\n          <div class=\"sd-autoid-inspector__table-wrap\">\r\n            <table class=\"sd-autoid-inspector__table\">\r\n              <thead>\r\n                <tr><th>Tag</th><th>Name hint</th><th>Selector</th></tr>\r\n              </thead>\r\n              <tbody>\r\n                @for (m of a.missing; track $index) {\r\n                  <tr class=\"is-warning\">\r\n                    <td><code>{{ m.tag }}</code></td>\r\n                    <td>{{ m.nameHint }}</td>\r\n                    <td><code>{{ m.selector }}</code></td>\r\n                  </tr>\r\n                }\r\n              </tbody>\r\n            </table>\r\n          </div>\r\n        }\r\n\r\n        @if (a.duplicateCount === 0 && a.missingCount === 0) {\r\n          <div class=\"sd-autoid-inspector__success-card\">\r\n            <mat-icon>check_circle</mat-icon>\r\n            <div>\r\n              <strong>Kh\u00F4ng c\u00F3 element thi\u1EBFu ho\u1EB7c tr\u00F9ng autoid.</strong>\r\n              <small>Trang \u0111\u00E3 \u0111\u1EA1t chu\u1EA9n convention autoid.</small>\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #elementsTpl>\r\n      @let _filter = filter();\r\n      <div class=\"sd-autoid-inspector__filter\">\r\n        <mat-icon>search</mat-icon>\r\n        <input\r\n          type=\"text\"\r\n          placeholder=\"L\u1ECDc theo autoid / name / tag\"\r\n          [ngModel]=\"_filter\"\r\n          (ngModelChange)=\"filter.set($event)\"/>\r\n        @if (_filter) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"sd-autoid-inspector__icon-btn\"\r\n            matTooltip=\"Xo\u00E1 filter\"\r\n            (click)=\"filter.set('')\">\r\n            <mat-icon>close</mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n      <!-- Top-level elements (not inside any sd-table) -->\r\n      <h4 class=\"sd-autoid-inspector__section-title\">\r\n        Top-level elements\r\n        <span class=\"sd-autoid-inspector__badge\">{{ topLevelElements().length }}</span>\r\n      </h4>\r\n      <div class=\"sd-autoid-inspector__table-wrap\">\r\n        <table class=\"sd-autoid-inspector__table\">\r\n          <thead>\r\n            <tr>\r\n              <th class=\"is-num\">STT</th>\r\n              <th>Name</th>\r\n              <th>Autoid</th>\r\n              <th>Tag</th>\r\n              <th>State</th>\r\n              <th>Value</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            @for (el of topLevelElements(); track el.autoid + $index) {\r\n              <tr [class.is-error]=\"el.duplicate\">\r\n                <td class=\"is-num\">{{ el.stt }}</td>\r\n                <td>{{ el.name || '\u2014' }}</td>\r\n                <td>\r\n                  <div class=\"sd-autoid-inspector__autoid-cell\">\r\n                    <code>{{ el.autoid }}</code>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"sd-autoid-inspector__icon-btn is-primary\"\r\n                      matTooltip=\"Copy xpath\"\r\n                      (click)=\"copyXpath(el.autoid)\">\r\n                      <mat-icon>content_copy</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                </td>\r\n                <td><span class=\"sd-autoid-inspector__tag-chip\">{{ el.tag }}</span></td>\r\n                <td class=\"sd-autoid-inspector__state-cell\">\r\n                  @if (el.state.disabled !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-error]=\"el.state.disabled === 'true'\">\r\n                      disabled={{ el.state.disabled }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.loading !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-warning]=\"el.state.loading === 'true'\">\r\n                      loading={{ el.state.loading }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.empty !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-info]=\"el.state.empty === 'true'\">\r\n                      empty={{ el.state.empty }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.invalid !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-error]=\"el.state.invalid === 'true'\">\r\n                      invalid={{ el.state.invalid }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.opened !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-info]=\"el.state.opened === 'true'\">\r\n                      opened={{ el.state.opened }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.count !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                      count={{ el.state.count }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.required !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip\"\r\n                          [class.is-warning]=\"el.state.required === 'true'\">\r\n                      required={{ el.state.required }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.maxlength !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                      maxlength={{ el.state.maxlength }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.minlength !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                      minlength={{ el.state.minlength }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.pattern !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                      pattern={{ el.state.pattern }}\r\n                    </span>\r\n                  }\r\n                  @if (el.state.errorMessage !== undefined) {\r\n                    <span class=\"sd-autoid-inspector__state-chip is-error\">\r\n                      error: {{ el.state.errorMessage }}\r\n                    </span>\r\n                  }\r\n                </td>\r\n                <td class=\"sd-autoid-inspector__value\" [matTooltip]=\"el.state.dataValue || el.text || ''\">\r\n                  {{ el.state.dataValue || el.text || '\u2014' }}\r\n                </td>\r\n              </tr>\r\n            } @empty {\r\n              <tr><td colspan=\"6\" class=\"sd-autoid-inspector__empty\">Kh\u00F4ng c\u00F3 k\u1EBFt qu\u1EA3.</td></tr>\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <!-- One section per sd-table group -->\r\n      @for (group of tableGroups(); track group.scope) {\r\n        <h4 class=\"sd-autoid-inspector__section-title\">\r\n          <mat-icon class=\"is-info\">table_chart</mat-icon>\r\n          Inside <code>{{ group.scope }}</code>\r\n          <span class=\"sd-autoid-inspector__badge\">{{ group.items.length }}</span>\r\n        </h4>\r\n        <div class=\"sd-autoid-inspector__table-wrap\">\r\n          <table class=\"sd-autoid-inspector__table\">\r\n            <thead>\r\n              <tr>\r\n                <th class=\"is-num\">STT</th>\r\n                <th>Name</th>\r\n                <th>Autoid</th>\r\n                <th>Tag</th>\r\n                <th>State</th>\r\n                <th>Value</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              @for (el of group.items; track el.autoid + $index) {\r\n                <tr [class.is-error]=\"el.duplicate\">\r\n                  <td class=\"is-num\">{{ el.stt }}</td>\r\n                  <td>{{ el.name || '\u2014' }}</td>\r\n                  <td>\r\n                    <div class=\"sd-autoid-inspector__autoid-cell\">\r\n                      <code>{{ el.autoid }}</code>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"sd-autoid-inspector__icon-btn is-primary\"\r\n                        matTooltip=\"Copy xpath\"\r\n                        (click)=\"copyXpath(el.autoid)\">\r\n                        <mat-icon>content_copy</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </td>\r\n                  <td><span class=\"sd-autoid-inspector__tag-chip\">{{ el.tag }}</span></td>\r\n                  <td class=\"sd-autoid-inspector__state-cell\">\r\n                    @if (el.state.disabled !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-error]=\"el.state.disabled === 'true'\">\r\n                        disabled={{ el.state.disabled }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.loading !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-warning]=\"el.state.loading === 'true'\">\r\n                        loading={{ el.state.loading }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.empty !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-info]=\"el.state.empty === 'true'\">\r\n                        empty={{ el.state.empty }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.invalid !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-error]=\"el.state.invalid === 'true'\">\r\n                        invalid={{ el.state.invalid }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.opened !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-info]=\"el.state.opened === 'true'\">\r\n                        opened={{ el.state.opened }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.count !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                        count={{ el.state.count }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.required !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip\"\r\n                            [class.is-warning]=\"el.state.required === 'true'\">\r\n                        required={{ el.state.required }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.maxlength !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                        maxlength={{ el.state.maxlength }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.minlength !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                        minlength={{ el.state.minlength }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.pattern !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-info\">\r\n                        pattern={{ el.state.pattern }}\r\n                      </span>\r\n                    }\r\n                    @if (el.state.errorMessage !== undefined) {\r\n                      <span class=\"sd-autoid-inspector__state-chip is-error\">\r\n                        error: {{ el.state.errorMessage }}\r\n                      </span>\r\n                    }\r\n                  </td>\r\n                  <td class=\"sd-autoid-inspector__value\" [matTooltip]=\"el.state.dataValue || el.text || ''\">\r\n                    {{ el.state.dataValue || el.text || '\u2014' }}\r\n                  </td>\r\n                </tr>\r\n              }\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #exportTpl>\r\n      <div class=\"sd-autoid-inspector__export-grid\">\r\n        <button type=\"button\" matTooltip=\"Copy JSON v\u00E0o clipboard\" (click)=\"copyJson()\">\r\n          <mat-icon>content_copy</mat-icon>\r\n          <span>Copy JSON</span>\r\n          <small>clipboard</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i file JSON\" (click)=\"exportJson()\">\r\n          <mat-icon>download</mat-icon>\r\n          <span>JSON</span>\r\n          <small>.json</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i file CSV\" (click)=\"exportCsv()\">\r\n          <mat-icon>table_view</mat-icon>\r\n          <span>CSV</span>\r\n          <small>.csv</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i MD POM skeleton \u2014 cho AI vi\u1EBFt auto-test\" (click)=\"exportMdPom()\">\r\n          <mat-icon>code</mat-icon>\r\n          <span>MD POM</span>\r\n          <small>AI test</small>\r\n        </button>\r\n        <button type=\"button\" matTooltip=\"T\u1EA3i MD reference table \u2014 group theo tag sd-*\" (click)=\"exportMdTable()\">\r\n          <mat-icon>view_list</mat-icon>\r\n          <span>MD Table</span>\r\n          <small>reference</small>\r\n        </button>\r\n      </div>\r\n    </ng-template>\r\n}\r\n", styles: [":host{position:fixed;inset:auto 0 0 auto;z-index:100000;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px;color:var(--sd-black500, #212121)}.sd-autoid-inspector__fab-wrap{position:fixed;right:16px;bottom:16px;z-index:100000}.sd-autoid-inspector__fab-wrap:hover .sd-autoid-inspector__fab-dismiss{opacity:1;transform:scale(1);pointer-events:auto}.sd-autoid-inspector__fab{width:36px;height:36px;border-radius:50%;border:none;background:var(--sd-primary, #2A66F4);color:#fff;cursor:pointer;box-shadow:0 3px 10px #00000038;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}.sd-autoid-inspector__fab:hover{background:var(--sd-primary-dark, #1C4AD9);transform:scale(1.08);box-shadow:0 5px 14px #00000047}.sd-autoid-inspector__fab mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__fab-dismiss{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--sd-black200, #E6E6E6);background:#fff;color:var(--sd-black400, #757575);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;opacity:0;transform:scale(.7);pointer-events:none;transition:opacity .12s ease,transform .12s ease,color .12s ease,background .12s ease;box-shadow:0 1px 4px #00000026}.sd-autoid-inspector__fab-dismiss:hover{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__fab-dismiss mat-icon{font-size:12px;width:12px;height:12px;line-height:12px}.sd-autoid-inspector__backdrop{position:fixed;inset:0;background:#00000052;z-index:100001;backdrop-filter:blur(2px)}.sd-autoid-inspector__panel{position:fixed;right:20px;bottom:80px;width:min(860px,100vw - 40px);max-height:calc(100vh - 110px);background:#fff;border-radius:12px;box-shadow:0 16px 48px #00000038;display:flex;flex-direction:column;z-index:100002;overflow:hidden;border:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--sd-black200, #E6E6E6);background:var(--sd-black100, #F2F2F2);flex-shrink:0}.sd-autoid-inspector__segments{display:inline-flex;border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;background:#fff;overflow:hidden}.sd-autoid-inspector__segments button{border:none;background:transparent;padding:5px 12px;cursor:pointer;font-size:12px;font-weight:500;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;gap:6px;border-right:1px solid var(--sd-black200, #E6E6E6);transition:background .12s ease,color .12s ease}.sd-autoid-inspector__segments button:last-child{border-right:none}.sd-autoid-inspector__segments button:hover:not(.is-active){background:var(--sd-black100, #F2F2F2);color:var(--sd-black500, #212121)}.sd-autoid-inspector__segments button.is-active{background:var(--sd-primary, #2A66F4);color:#fff}.sd-autoid-inspector__badge{background:var(--sd-black200, #E6E6E6);color:var(--sd-black500, #212121);border-radius:10px;padding:0 7px;font-size:11px;font-weight:600;line-height:16px}.is-active .sd-autoid-inspector__badge{background:#ffffff40;color:#fff}.sd-autoid-inspector__badge.is-warn{background:var(--sd-error, #F82C13);color:#fff}.sd-autoid-inspector__actions{display:inline-flex;gap:4px;margin-left:auto}.sd-autoid-inspector__icon-btn{border:none;background:transparent;cursor:pointer;padding:4px;border-radius:6px;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.sd-autoid-inspector__icon-btn:hover{background:var(--sd-black100, #F2F2F2);color:var(--sd-black500, #212121)}.sd-autoid-inspector__icon-btn.is-primary{color:var(--sd-primary, #2A66F4)}.sd-autoid-inspector__icon-btn.is-primary:hover{background:var(--sd-primary-light, #EAF1FF);color:var(--sd-primary-dark, #1C4AD9)}.sd-autoid-inspector__icon-btn mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__close-btn{border:none;cursor:pointer;padding:4px;border-radius:50%;width:28px;height:28px;background:transparent;color:var(--sd-black400, #757575);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}.sd-autoid-inspector__close-btn:hover{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E)}.sd-autoid-inspector__close-btn mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__body{padding:14px;overflow:auto;flex:1;background:#fff}.sd-autoid-inspector__toast{position:absolute;top:56px;right:14px;background:var(--sd-success, #4CAF50);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;z-index:2;box-shadow:0 4px 12px #0000002e}.sd-autoid-inspector__audit-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.sd-autoid-inspector__toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sd-black200, #E6E6E6);background:#fff;border-radius:999px;padding:5px 12px 5px 10px;cursor:pointer;font-size:12px;font-weight:500;color:var(--sd-black400, #757575);transition:all .15s ease}.sd-autoid-inspector__toggle:hover{border-color:var(--sd-primary, #2A66F4);color:var(--sd-primary, #2A66F4)}.sd-autoid-inspector__toggle.is-on{border-color:var(--sd-primary, #2A66F4);color:var(--sd-primary, #2A66F4);background:var(--sd-primary-light, #EAF1FF)}.sd-autoid-inspector__toggle mat-icon{font-size:16px;width:16px;height:16px}.sd-autoid-inspector__toggle-state{font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--sd-black200, #E6E6E6);color:var(--sd-black400, #757575)}.is-on .sd-autoid-inspector__toggle-state{background:var(--sd-primary, #2A66F4);color:#fff}.sd-autoid-inspector__summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.sd-autoid-inspector__stat{background:var(--sd-black100, #F2F2F2);border-radius:10px;padding:12px;text-align:center;border:1px solid transparent}.sd-autoid-inspector__stat.is-info{background:var(--sd-info-light, #E7E9FF);border-color:var(--sd-info, #2962FF)}.sd-autoid-inspector__stat.is-info .sd-autoid-inspector__stat-value{color:var(--sd-info, #2962FF)}.sd-autoid-inspector__stat.is-success{background:var(--sd-success-light, #DBEFDC);border-color:var(--sd-success, #4CAF50)}.sd-autoid-inspector__stat.is-success .sd-autoid-inspector__stat-value{color:var(--sd-success-dark, #39833C)}.sd-autoid-inspector__stat.is-warning{background:var(--sd-warning-light, #FFEACC);border-color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__stat.is-warning .sd-autoid-inspector__stat-value{color:var(--sd-warning-dark, #BF7000)}.sd-autoid-inspector__stat.is-error{background:var(--sd-error-light, #FED5D0);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__stat.is-error .sd-autoid-inspector__stat-value{color:var(--sd-error-dark, #BA200E)}.sd-autoid-inspector__stat-value{font-size:22px;font-weight:700;line-height:1;margin-bottom:4px}.sd-autoid-inspector__stat-label{font-size:11px;color:var(--sd-black400, #757575);text-transform:uppercase;letter-spacing:.4px;font-weight:600}.sd-autoid-inspector__section-title{display:flex;align-items:center;gap:6px;margin:14px 0 8px;font-size:13px;font-weight:600;color:var(--sd-black500, #212121)}.sd-autoid-inspector__section-title mat-icon{font-size:18px;width:18px;height:18px}.sd-autoid-inspector__section-title mat-icon.is-error{color:var(--sd-error, #F82C13)}.sd-autoid-inspector__section-title mat-icon.is-warning{color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__section-title mat-icon.is-info{color:var(--sd-info, #2962FF)}.sd-autoid-inspector__success-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--sd-success-light, #DBEFDC);border:1px solid var(--sd-success, #4CAF50);border-radius:10px;color:var(--sd-success-dark, #39833C)}.sd-autoid-inspector__success-card mat-icon{font-size:28px;width:28px;height:28px;color:var(--sd-success, #4CAF50)}.sd-autoid-inspector__success-card strong{display:block;font-size:13px;margin-bottom:2px}.sd-autoid-inspector__success-card small{font-size:11px;opacity:.85}.sd-autoid-inspector__table-wrap{border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;overflow:auto;max-height:60vh;background:#fff}.sd-autoid-inspector__table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.sd-autoid-inspector__table th,.sd-autoid-inspector__table td{padding:8px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__table thead th{position:sticky;top:0;z-index:1;background:var(--sd-black100, #F2F2F2);font-weight:600;color:var(--sd-black500, #212121);text-transform:none;font-size:11px;letter-spacing:.3px;border-bottom:none;box-shadow:inset 0 -1px 0 var(--sd-black200, #E6E6E6),0 2px 4px #0000000a;white-space:nowrap}.sd-autoid-inspector__table thead th.is-num{text-align:right;width:50px}.sd-autoid-inspector__table tbody tr{transition:background .1s ease}.sd-autoid-inspector__table tbody tr:hover{background:var(--sd-primary-light, #EAF1FF)}.sd-autoid-inspector__table tbody tr:last-child td{border-bottom:none}.sd-autoid-inspector__table tbody tr.is-error{background:var(--sd-error-light, #FED5D0)}.sd-autoid-inspector__table tbody tr.is-error:hover{background:var(--sd-error-light, #FED5D0);filter:brightness(.98)}.sd-autoid-inspector__table tbody tr.is-warning{background:var(--sd-warning-light, #FFEACC)}.sd-autoid-inspector__table tbody tr.is-warning:hover{background:var(--sd-warning-light, #FFEACC);filter:brightness(.98)}.sd-autoid-inspector__table td.is-num{text-align:right;color:var(--sd-black400, #757575);font-variant-numeric:tabular-nums}.sd-autoid-inspector__table code{font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:11px;background:var(--sd-black100, #F2F2F2);padding:2px 6px;border-radius:4px;color:var(--sd-primary-dark, #1C4AD9);border:1px solid var(--sd-black200, #E6E6E6)}.sd-autoid-inspector__autoid-cell{display:inline-flex;align-items:center;gap:6px}.sd-autoid-inspector__tag-chip{display:inline-block;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:11px;background:var(--sd-info-light, #E7E9FF);color:var(--sd-info, #2962FF);border:1px solid var(--sd-info, #2962FF);padding:1px 8px;border-radius:999px;font-weight:500}.sd-autoid-inspector__value{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sd-black400, #757575);font-style:italic}.sd-autoid-inspector__state-cell{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}.sd-autoid-inspector__state-chip{display:inline-block;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:10px;background:var(--sd-black100, #F2F2F2);color:var(--sd-black400, #757575);border:1px solid var(--sd-black200, #E6E6E6);padding:1px 6px;border-radius:999px;font-weight:500;white-space:nowrap}.sd-autoid-inspector__state-chip.is-error{background:var(--sd-error-light, #FED5D0);color:var(--sd-error-dark, #BA200E);border-color:var(--sd-error, #F82C13)}.sd-autoid-inspector__state-chip.is-warning{background:var(--sd-warning-light, #FFEACC);color:var(--sd-warning-dark, #BF7000);border-color:var(--sd-warning, #FF9600)}.sd-autoid-inspector__state-chip.is-info{background:var(--sd-info-light, #E7E9FF);color:var(--sd-info, #2962FF);border-color:var(--sd-info, #2962FF)}.sd-autoid-inspector__empty{text-align:center;color:var(--sd-black400, #757575);padding:24px;font-style:italic}.sd-autoid-inspector__filter{display:flex;align-items:center;gap:6px;background:var(--sd-black100, #F2F2F2);border:1px solid var(--sd-black200, #E6E6E6);border-radius:8px;padding:6px 10px;margin-bottom:12px;transition:border-color .15s ease}.sd-autoid-inspector__filter:focus-within{border-color:var(--sd-primary, #2A66F4);background:#fff}.sd-autoid-inspector__filter input{flex:1;border:none;background:transparent;outline:none;font-size:13px;color:var(--sd-black500, #212121)}.sd-autoid-inspector__filter input::placeholder{color:var(--sd-black300, #BFBFBF)}.sd-autoid-inspector__filter>mat-icon{font-size:18px;width:18px;height:18px;color:var(--sd-black400, #757575)}.sd-autoid-inspector__export-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.sd-autoid-inspector__export-grid button{border:1px solid var(--sd-black200, #E6E6E6);background:#fff;border-radius:10px;padding:12px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;transition:border-color .15s ease,background .15s ease,transform .12s ease;text-align:center}.sd-autoid-inspector__export-grid button:hover{border-color:var(--sd-primary, #2A66F4);background:var(--sd-primary-light, #EAF1FF);transform:translateY(-1px)}.sd-autoid-inspector__export-grid button span{font-size:12px;font-weight:600;color:var(--sd-black500, #212121);line-height:1.25}.sd-autoid-inspector__export-grid button small{font-size:10px;color:var(--sd-black400, #757575);line-height:1.2}.sd-autoid-inspector__export-grid button mat-icon{font-size:22px;width:22px;height:22px;color:var(--sd-primary, #2A66F4)}\n"] }]
         }], propDecorators: { onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']