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

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

@@ -0,0 +1,585 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, input, booleanAttribute, signal, computed, inject, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+/** Selector mặc định coi là phải có data-autoid. */
+const SD_AUTOID_DEFAULT_REQUIRE_SELECTORS = [
+    'sd-input',
+    'sd-input-number',
+    'sd-textarea',
+    'sd-select',
+    'sd-autocomplete',
+    'sd-checkbox',
+    'sd-radio',
+    'sd-switch',
+    'sd-date',
+    'sd-datetime',
+    'sd-date-range',
+    'sd-chip',
+    'sd-chip-calendar',
+    'sd-button',
+];
+
+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) {
+        const nodes = root.querySelectorAll('[data-autoid]');
+        const dupCount = {};
+        nodes.forEach(n => {
+            const id = n.getAttribute('data-autoid');
+            if (!id)
+                return;
+            dupCount[id] = (dupCount[id] ?? 0) + 1;
+        });
+        const result = [];
+        let stt = 1;
+        nodes.forEach(node => {
+            const autoid = node.getAttribute('data-autoid');
+            if (!autoid)
+                return;
+            result.push({
+                stt: stt++,
+                name: this.resolveName(node),
+                autoid,
+                tag: this.resolveSdTag(node),
+                value: this.resolveValue(node),
+                xpath: `//*[@data-autoid="${autoid}"]`,
+                duplicate: dupCount[autoid] > 1,
+            });
+        });
+        return result;
+    }
+    /** Group element theo autoid để consumer lấy duplicate map. */
+    groupByAutoid(elements) {
+        const map = {};
+        for (const el of elements) {
+            (map[el.autoid] ??= []).push(el);
+        }
+        return map;
+    }
+    resolveName(node) {
+        if (node.id) {
+            // CSS.escape phòng id chứa ký tự đặc biệt làm vỡ selector.
+            const sel = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(node.id) : node.id;
+            const label = document.querySelector(`label[for="${sel}"]`);
+            const text = label?.textContent?.trim();
+            if (text)
+                return text;
+        }
+        return node.getAttribute('aria-label')?.trim()
+            ?? node.getAttribute('placeholder')?.trim()
+            ?? node.getAttribute('title')?.trim()
+            ?? '';
+    }
+    resolveSdTag(node) {
+        let cur = node;
+        while (cur) {
+            const tag = cur.tagName.toLowerCase();
+            if (tag.startsWith('sd-'))
+                return tag;
+            cur = cur.parentElement;
+        }
+        return node.tagName.toLowerCase();
+    }
+    resolveValue(node) {
+        const input = node;
+        if (typeof input.value === 'string' && input.value)
+            return input.value;
+        return (node.textContent ?? '').trim().slice(0, 80);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidScannerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidScannerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidScannerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SdAutoidAuditService {
+    /**
+     * Audit kết quả scan + DOM:
+     * - duplicates: map autoid → count khi count > 1
+     * - missing: element khớp selector yêu cầu nhưng KHÔNG có [data-autoid]
+     */
+    audit(elements, options = {}) {
+        const requireSelectors = options.requireSelectors ?? SD_AUTOID_DEFAULT_REQUIRE_SELECTORS;
+        const root = options.root ?? document.body;
+        const duplicates = {};
+        for (const el of elements) {
+            if (el.duplicate) {
+                duplicates[el.autoid] = (duplicates[el.autoid] ?? 0) + 1;
+            }
+        }
+        const missing = this.findMissing(root, requireSelectors);
+        return {
+            total: elements.length,
+            duplicates,
+            duplicateCount: Object.keys(duplicates).length,
+            missing,
+            missingCount: missing.length,
+        };
+    }
+    findMissing(root, selectors) {
+        if (!selectors.length)
+            return [];
+        const joined = selectors.join(',');
+        const nodes = root.querySelectorAll(joined);
+        const missing = [];
+        nodes.forEach(node => {
+            // Coi là missing khi element + mọi descendant đều không có data-autoid.
+            // Lý do: sd-button render thành <button data-autoid="..."> bên trong host
+            // <sd-button>. Nếu chỉ check chính host sẽ false-positive cho mọi sd-button.
+            if (node.hasAttribute('data-autoid'))
+                return;
+            if (node.querySelector('[data-autoid]'))
+                return;
+            missing.push({
+                tag: node.tagName.toLowerCase(),
+                selector: this.buildSelectorPath(node),
+                outerHtmlPreview: this.shortHtml(node),
+                nameHint: this.resolveNameHint(node),
+            });
+        });
+        return missing;
+    }
+    buildSelectorPath(node) {
+        const parts = [];
+        let cur = node;
+        let depth = 0;
+        while (cur && depth < 4) {
+            let part = cur.tagName.toLowerCase();
+            if (cur.id) {
+                part += `#${cur.id}`;
+                parts.unshift(part);
+                break;
+            }
+            const cls = (cur.getAttribute('class') ?? '').trim().split(/\s+/).filter(Boolean).slice(0, 2);
+            if (cls.length)
+                part += `.${cls.join('.')}`;
+            parts.unshift(part);
+            cur = cur.parentElement;
+            depth++;
+        }
+        return parts.join(' > ');
+    }
+    shortHtml(node) {
+        const html = node.outerHTML.replace(/\s+/g, ' ');
+        return html.length > 160 ? html.slice(0, 157) + '...' : html;
+    }
+    resolveNameHint(node) {
+        return node.getAttribute('label')
+            ?? node.getAttribute('placeholder')
+            ?? node.getAttribute('aria-label')
+            ?? node.getAttribute('title')
+            ?? '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidAuditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidAuditService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidAuditService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const ATTR = 'data-sd-autoid-highlight';
+const SAVED_OUTLINE = 'data-sd-autoid-prev-outline';
+const SAVED_OUTLINE_OFFSET = 'data-sd-autoid-prev-outline-offset';
+const SAVED_BG = 'data-sd-autoid-prev-bg';
+const SAVED_BORDER_RADIUS = 'data-sd-autoid-prev-radius';
+// Token màu lấy từ @sd-angular/core theme (--sd-*). Fallback hex áp dụng khi
+// consumer chưa import sd-core.scss. Dùng cùng bộ var với scss component để
+// nhất quán visual giữa highlight ok / duplicate / missing.
+const COLOR_OK = 'var(--sd-success, #4CAF50)';
+const COLOR_OK_BG = 'var(--sd-success-light, rgba(76, 175, 80, 0.12))';
+const COLOR_DUP = 'var(--sd-error, #F82C13)';
+const COLOR_DUP_BG = 'var(--sd-error-light, rgba(248, 44, 19, 0.12))';
+const COLOR_MISSING = 'var(--sd-warning, #FF9600)';
+const COLOR_MISSING_BG = 'var(--sd-warning-light, rgba(255, 150, 0, 0.12))';
+class SdAutoidHighlightService {
+    /** Apply outline cho mọi [data-autoid]: xanh nếu unique, đỏ nếu duplicate. Idempotent. */
+    apply(root = document.body) {
+        this.clear(root);
+        const nodes = root.querySelectorAll('[data-autoid]');
+        const count = {};
+        nodes.forEach(n => {
+            const id = n.getAttribute('data-autoid');
+            if (!id)
+                return;
+            count[id] = (count[id] ?? 0) + 1;
+        });
+        // Để tránh apply 2 lần lên cùng 1 target khi nhiều [data-autoid] cùng
+        // chia sẻ 1 sd-* host (vd 2 input lồng trong 1 sd-date-range).
+        const visited = new Set();
+        nodes.forEach(node => {
+            const id = node.getAttribute('data-autoid');
+            if (!id)
+                return;
+            // Highlight HOST sd-* (giống applyMissing) — outline ôm trọn card,
+            // không hiển thị lệch trên input con / label fragment. Fallback về
+            // chính node khi không tìm thấy sd-* ancestor (vd native button).
+            const target = this.#resolveTarget(node);
+            if (visited.has(target))
+                return;
+            visited.add(target);
+            const isDup = count[id] > 1;
+            this.#paint(target, isDup ? COLOR_DUP : COLOR_OK, isDup ? COLOR_DUP_BG : COLOR_OK_BG, 'solid', isDup ? 'duplicate' : 'ok');
+        });
+    }
+    /** Highlight tập element không có autoid (missing) bằng outline cam dashed. */
+    applyMissing(nodes) {
+        nodes.forEach(node => {
+            if (node.hasAttribute(ATTR))
+                return;
+            this.#paint(node, COLOR_MISSING, COLOR_MISSING_BG, 'dashed', 'missing');
+        });
+    }
+    /** Restore inline style như trước khi apply. */
+    clear(root = document.body) {
+        const nodes = root.querySelectorAll(`[${ATTR}]`);
+        nodes.forEach(node => {
+            node.style.outline = node.getAttribute(SAVED_OUTLINE) ?? '';
+            node.style.outlineOffset = node.getAttribute(SAVED_OUTLINE_OFFSET) ?? '';
+            node.style.backgroundColor = node.getAttribute(SAVED_BG) ?? '';
+            node.style.borderRadius = node.getAttribute(SAVED_BORDER_RADIUS) ?? '';
+            node.removeAttribute(SAVED_OUTLINE);
+            node.removeAttribute(SAVED_OUTLINE_OFFSET);
+            node.removeAttribute(SAVED_BG);
+            node.removeAttribute(SAVED_BORDER_RADIUS);
+            node.removeAttribute(ATTR);
+        });
+    }
+    // ==========================================
+    // HELPERS
+    // ==========================================
+    #resolveTarget(node) {
+        let cur = node;
+        while (cur) {
+            if (cur.tagName.toLowerCase().startsWith('sd-'))
+                return cur;
+            cur = cur.parentElement;
+        }
+        return node;
+    }
+    #paint(node, color, bg, style, marker) {
+        // Backup full style cần restore để clear() đưa về nguyên trạng.
+        node.setAttribute(SAVED_OUTLINE, node.style.outline ?? '');
+        node.setAttribute(SAVED_OUTLINE_OFFSET, node.style.outlineOffset ?? '');
+        node.setAttribute(SAVED_BG, node.style.backgroundColor ?? '');
+        node.setAttribute(SAVED_BORDER_RADIUS, node.style.borderRadius ?? '');
+        node.style.outline = `2px ${style} ${color}`;
+        // outline-offset 2px tránh đè lên border của host (mat-form-field, button)
+        // → highlight nằm gọn ngoài card thay vì cắt vào nội dung.
+        node.style.outlineOffset = '2px';
+        node.style.backgroundColor = bg;
+        // Bo nhẹ để outline trông sạch trên host bo góc sẵn.
+        if (!node.style.borderRadius) {
+            node.style.borderRadius = '6px';
+        }
+        node.setAttribute(ATTR, marker);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidHighlightService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidHighlightService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SdAutoidExportService {
+    toJson(elements) {
+        return JSON.stringify(elements, null, 2);
+    }
+    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(','));
+        return [header, ...rows].join('\n') + '\n';
+    }
+    /** POM TypeScript skeleton — copy ngay vào file Playwright/Cypress. */
+    toMarkdownPom(elements, meta) {
+        const className = this.toPascal(meta.pageTitle || 'AutoGenerated') + 'Page';
+        const lines = [];
+        lines.push(`# ${className}`);
+        lines.push('');
+        lines.push(`- Page: \`${meta.pageUrl}\``);
+        lines.push(`- Generated: \`${meta.timestamp}\``);
+        lines.push('');
+        lines.push('```ts');
+        lines.push(`export class ${className} {`);
+        for (const el of elements) {
+            const propName = this.toCamel(el.autoid);
+            const nameHint = el.name ? ` ${el.name} —` : '';
+            lines.push(`  /** ${el.tag}${nameHint} */`);
+            lines.push(`  readonly ${propName} = '${el.xpath}';`);
+        }
+        lines.push('}');
+        lines.push('```');
+        lines.push('');
+        return lines.join('\n');
+    }
+    /** Markdown reference table, group theo tag sd-*. */
+    toMarkdownTable(elements, meta) {
+        const lines = [];
+        lines.push('# AutoId Reference');
+        lines.push('');
+        lines.push(`- Page: \`${meta.pageUrl}\``);
+        lines.push(`- Generated: \`${meta.timestamp}\``);
+        lines.push('');
+        const groups = new Map();
+        for (const el of elements) {
+            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 | duplicate |');
+            lines.push('|------|--------|-------|-----------|');
+            for (const el of groups.get(tag)) {
+                lines.push(`| ${this.mdCell(el.name)} | \`${el.autoid}\` | \`${el.xpath}\` | ${el.duplicate ? '⚠️' : ''} |`);
+            }
+            lines.push('');
+        }
+        return lines.join('\n');
+    }
+    download(content, filename, mime) {
+        const blob = new Blob([content], { type: mime });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    }
+    async copyToClipboard(content) {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(content);
+            return;
+        }
+        // Fallback cho browser cũ / context không có clipboard API.
+        const ta = document.createElement('textarea');
+        ta.value = content;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+    }
+    q(v) {
+        const s = String(v ?? '').replace(/"/g, '""');
+        return `"${s}"`;
+    }
+    mdCell(s) {
+        return (s || '').replace(/\|/g, '\\|').replace(/\n/g, ' ');
+    }
+    toCamel(autoid) {
+        const parts = autoid.split(/[-_]/).filter(Boolean);
+        return parts.map((p, i) => (i === 0 ? p : p[0].toUpperCase() + p.slice(1))).join('');
+    }
+    toPascal(title) {
+        return title
+            .split(/[^a-zA-Z0-9]+/)
+            .filter(Boolean)
+            .map(p => p[0].toUpperCase() + p.slice(1))
+            .join('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidExportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdAutoidExportService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SdAutoidInspector {
+    // ==========================================
+    // INPUTS
+    // ==========================================
+    enabled = input(true, { transform: booleanAttribute });
+    config = input(undefined);
+    // ==========================================
+    // STATE
+    // ==========================================
+    open = signal(false);
+    segment = signal('audit');
+    filter = signal('');
+    elements = signal([]);
+    audit = signal(null);
+    copyOk = signal(false);
+    // Default true để mở panel lần đầu là có highlight ngay. Đóng panel KHÔNG
+    // tự tắt — user toggle qua nút trong tab Audit khi muốn nhìn DOM gốc.
+    highlightOn = signal(true);
+    // Ẩn tạm FAB — chỉ in-memory, reload trang sẽ hiện lại (theo thiết kế).
+    dismissed = signal(false);
+    filteredElements = computed(() => {
+        const q = this.filter().trim().toLowerCase();
+        if (!q)
+            return this.elements();
+        return this.elements().filter(el => el.autoid.toLowerCase().includes(q) ||
+            el.name.toLowerCase().includes(q) ||
+            el.tag.toLowerCase().includes(q));
+    });
+    // ==========================================
+    // SERVICES
+    // ==========================================
+    #scanner = inject(SdAutoidScannerService);
+    #auditSvc = inject(SdAutoidAuditService);
+    #highlight = inject(SdAutoidHighlightService);
+    #export = inject(SdAutoidExportService);
+    // ==========================================
+    // LIFECYCLE
+    // ==========================================
+    ngOnDestroy() {
+        this.#highlight.clear(this.#root());
+    }
+    // ==========================================
+    // ACTIONS
+    // ==========================================
+    togglePanel = () => {
+        if (this.open()) {
+            this.closePanel();
+        }
+        else {
+            this.openPanel();
+        }
+    };
+    openPanel = () => {
+        if (!this.enabled())
+            return;
+        this.refresh();
+        this.open.set(true);
+    };
+    closePanel = () => {
+        this.open.set(false);
+        // Highlight được giữ lại để user vẫn thấy outline khi panel ẩn —
+        // toggleHighlight trong tab Audit là cách duy nhất để clear.
+    };
+    refresh = () => {
+        const root = this.#root();
+        const elements = this.#scanner.scan(root);
+        const result = this.#auditSvc.audit(elements, {
+            root,
+            requireSelectors: this.#requireSelectors(),
+        });
+        this.elements.set(elements);
+        this.audit.set(result);
+        this.#applyHighlightIfOn(result);
+    };
+    dismissFab = (event) => {
+        event.stopPropagation();
+        this.dismissed.set(true);
+        if (this.open())
+            this.closePanel();
+    };
+    toggleHighlight = () => {
+        const next = !this.highlightOn();
+        this.highlightOn.set(next);
+        if (next) {
+            this.#applyHighlightIfOn(this.audit());
+        }
+        else {
+            this.#highlight.clear(this.#root());
+        }
+    };
+    setSegment = (seg) => this.segment.set(seg);
+    copyJson = async () => {
+        await this.#export.copyToClipboard(this.#export.toJson(this.elements()));
+        this.#flashCopyOk();
+    };
+    copyXpath = async (autoid) => {
+        await this.#export.copyToClipboard(`//*[@data-autoid="${autoid}"]`);
+        this.#flashCopyOk();
+    };
+    exportCsv = () => {
+        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');
+    };
+    exportMdPom = () => {
+        this.#export.download(this.#export.toMarkdownPom(this.elements(), this.#meta()), this.#filename('pom.md'), 'text/markdown');
+    };
+    exportMdTable = () => {
+        this.#export.download(this.#export.toMarkdownTable(this.elements(), this.#meta()), this.#filename('reference.md'), 'text/markdown');
+    };
+    // ==========================================
+    // KEYBOARD: Esc đóng panel
+    // ==========================================
+    onEscape() {
+        if (this.open())
+            this.closePanel();
+    }
+    // ==========================================
+    // HELPERS
+    // ==========================================
+    #root() {
+        return this.config()?.root ?? document.body;
+    }
+    #requireSelectors() {
+        const extra = this.config()?.extraRequireSelectors ?? [];
+        return [...SD_AUTOID_DEFAULT_REQUIRE_SELECTORS, ...extra];
+    }
+    #highlightMissing(result) {
+        if (!result.missing.length)
+            return;
+        const root = this.#root();
+        const selector = this.#requireSelectors().join(',');
+        const all = Array.from(root.querySelectorAll(selector));
+        const missingNodes = all.filter(n => !n.hasAttribute('data-autoid') && !n.querySelector('[data-autoid]'));
+        this.#highlight.applyMissing(missingNodes);
+    }
+    #applyHighlightIfOn(result) {
+        if (!this.highlightOn())
+            return;
+        const root = this.#root();
+        this.#highlight.apply(root);
+        if (result)
+            this.#highlightMissing(result);
+    }
+    #meta() {
+        return {
+            pageUrl: window.location.pathname + window.location.search,
+            pageTitle: document.title || 'Page',
+            timestamp: new Date().toISOString(),
+        };
+    }
+    #filename(ext) {
+        const slug = (document.title || 'autoid')
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-|-$/g, '');
+        return `${slug || 'autoid'}-${Date.now()}.${ext}`;
+    }
+    #flashCopyOk() {
+        this.copyOk.set(true);
+        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 });
+}
+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"] }]
+        }], propDecorators: { onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SD_AUTOID_DEFAULT_REQUIRE_SELECTORS, SdAutoidAuditService, SdAutoidExportService, SdAutoidHighlightService, SdAutoidInspector, SdAutoidScannerService };
+//# sourceMappingURL=sd-angular-core-components-autoid-inspector.mjs.map