@sdcorejs/angular 19.0.0-rc.1

package/assets/scss/core/utilities/_overflow.scss

@@ -0,0 +1,9 @@
+// --------------------------------------------------------------------------
+// Overflow
+// --------------------------------------------------------------------------
+.overflow-auto    { overflow: auto !important; }
+.overflow-hidden  { overflow: hidden !important; }
+.overflow-visible { overflow: visible !important; }
+.overflow-scroll  { overflow: scroll !important; }
+.overflow-x-auto  { overflow-x: auto !important; }
+.overflow-y-auto  { overflow-y: auto !important; }

package/assets/scss/core/utilities/_position.scss

@@ -0,0 +1,8 @@
+// --------------------------------------------------------------------------
+// Position
+// --------------------------------------------------------------------------
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed    { position: fixed !important; }
+.position-sticky   { position: sticky !important; }
+.position-static   { position: static !important; }

package/assets/scss/core/utilities/_sizing.scss

@@ -0,0 +1,28 @@
+// --------------------------------------------------------------------------
+// Sizing – Width & Height  (px-based, 0–200)
+//   w-0 … w-200 | h-0 … h-200
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .w-#{$i} { width: #{$i}px !important; }
+  .h-#{$i} { height: #{$i}px !important; }
+}
+
+// Percentage / keyword shorthands
+.w-full   { width: 100% !important; }
+.w-100    { width: 100% !important; } // alias of w-full
+.w-auto   { width: auto !important; }
+.w-screen { width: 100vw !important; }
+.w-fit    { width: fit-content !important; }
+
+.h-full   { height: 100% !important; }
+.h-100    { height: 100% !important; } // alias of h-full
+.h-auto   { height: auto !important; }
+.h-screen { height: 100vh !important; }
+.h-fit    { height: fit-content !important; }
+
+.min-h-full   { min-height: 100% !important; }
+.min-h-screen { min-height: 100vh !important; }
+.min-w-full   { min-width: 100% !important; }
+
+.max-h-full   { max-height: 100% !important; }
+.max-w-full   { max-width: 100% !important; }

package/assets/scss/core/utilities/_spacing.scss

@@ -0,0 +1,31 @@
+// --------------------------------------------------------------------------
+// Spacing – Margin & Padding  (px-based, 0–200)
+//   m-0 … m-200 | mt-* | mr-* | mb-* | ml-* | mx-* | my-*
+//   p-0 … p-200 | pt-* | pr-* | pb-* | pl-* | px-* | py-*
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .m-#{$i}  { margin: #{$i}px !important; }
+  .mt-#{$i} { margin-top: #{$i}px !important; }
+  .mr-#{$i} { margin-right: #{$i}px !important; }
+  .mb-#{$i} { margin-bottom: #{$i}px !important; }
+  .ml-#{$i} { margin-left: #{$i}px !important; }
+  .mx-#{$i} { margin-left: #{$i}px !important; margin-right: #{$i}px !important; }
+  .my-#{$i} { margin-top: #{$i}px !important; margin-bottom: #{$i}px !important; }
+
+  .p-#{$i}  { padding: #{$i}px !important; }
+  .pt-#{$i} { padding-top: #{$i}px !important; }
+  .pr-#{$i} { padding-right: #{$i}px !important; }
+  .pb-#{$i} { padding-bottom: #{$i}px !important; }
+  .pl-#{$i} { padding-left: #{$i}px !important; }
+  .px-#{$i} { padding-left: #{$i}px !important; padding-right: #{$i}px !important; }
+  .py-#{$i} { padding-top: #{$i}px !important; padding-bottom: #{$i}px !important; }
+}
+
+// Auto margin helpers
+.m-auto  { margin: auto !important; }
+.mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

package/assets/scss/core/utilities/_typography.scss

@@ -0,0 +1,99 @@
+// --------------------------------------------------------------------------
+// SCSS variables — dùng nội bộ trong scss, không output CSS
+//   Đặt tên theo thang đọc được: fw = font-weight, fs = font-size
+// --------------------------------------------------------------------------
+$fw-lighter: 400;
+$fw-normal:  500;
+$fw-bold:    600;
+
+$fs-xs:     11.2px;
+$fs-small:  14px;
+$fs-normal: 16px;
+$fs-regular: 18px;
+$fs-medium: 21px;
+$fs-large:  24px;
+$fs-xl:     28px;
+$fs-xxl:    38px;
+$fs-xxxl:   42px;
+
+// --------------------------------------------------------------------------
+// Design token classes — hệ thống typography của SD Angular
+//   Quy ước: T{size}{weight}  |  M = Medium (500), R = Regular (400)
+//   Mỗi class bao gồm font-size + font-weight + line-height chuẩn hóa
+// --------------------------------------------------------------------------
+.T48M { font-size: 48px; font-weight: 500; line-height: 56px; }
+.T48R { font-size: 48px; font-weight: 400; line-height: 56px; }
+
+.T32M { font-size: 32px; font-weight: 500; line-height: 48px; }
+.T32R { font-size: 32px; font-weight: 400; line-height: 48px; }
+
+.T24M { font-size: 24px; font-weight: 500; line-height: 28px; }
+.T24R { font-size: 20px; font-weight: 400; line-height: 28px; }
+
+.T20M { font-size: 20px; font-weight: 500; line-height: 28px; }
+.T20R { font-size: 20px; font-weight: 400; line-height: 28px; }
+
+.T18M { font-size: 18px; font-weight: 500; line-height: 28px; }
+.T18R { font-size: 18px; font-weight: 400; line-height: 28px; }
+
+.T16M { font-size: 16px; font-weight: 500; line-height: 24px; }
+.T16R { font-size: 16px; font-weight: 400; line-height: 24px; }
+
+.T14M { font-size: 14px; font-weight: 500; line-height: 20px; }
+.T14R { font-size: 14px; font-weight: 400; line-height: 20px; }
+
+.T12M { font-size: 12px; font-weight: 500; line-height: 16px; }
+// !important vì T12R thường bị override bởi material components
+.T12R { font-size: 12px !important; font-weight: 400; line-height: 16px; }
+
+.T10M { font-size: 10px; font-weight: 500; line-height: 12px; }
+.T10R { font-size: 10px; font-weight: 400; line-height: 12px; }
+
+// --------------------------------------------------------------------------
+// Font-size utilities  (px-based, 0–200)
+//   fs-0 … fs-200 — dùng khi cần ghi đè nhanh, không dùng thay token
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .fs-#{$i} { font-size: #{$i}px !important; }
+}
+
+// --------------------------------------------------------------------------
+// Font-weight utilities
+// --------------------------------------------------------------------------
+.font-weight-light   { font-weight: 300 !important; }
+.font-weight-normal  { font-weight: 400 !important; }
+.font-weight-medium  { font-weight: 500 !important; }
+.font-weight-bold    { font-weight: 600 !important; }
+.font-weight-bolder  { font-weight: 700 !important; }
+
+// --------------------------------------------------------------------------
+// Text alignment
+// --------------------------------------------------------------------------
+.text-left    { text-align: left !important; }
+.text-center  { text-align: center !important; }
+.text-right   { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+
+// --------------------------------------------------------------------------
+// Text wrapping & overflow
+// --------------------------------------------------------------------------
+.text-wrap   { white-space: normal !important; }
+.text-nowrap { white-space: nowrap !important; }
+.text-ellipsis {
+  // Hiển thị "..." khi text tràn — cần container có width cố định
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+.text-break {
+  // Xuống dòng từng ký tự khi tràn — dùng cho URL, hash, code dài
+  overflow-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+// --------------------------------------------------------------------------
+// Text transform
+// --------------------------------------------------------------------------
+.text-uppercase  { text-transform: uppercase !important; }
+.text-lowercase  { text-transform: lowercase !important; }
+.text-capitalize { text-transform: capitalize !important; }

package/assets/scss/sd-core.scss

@@ -0,0 +1,17 @@
+@use '../fonts/fonts.scss';
+@use './core/utilities/base';  // Reset / Reboot — phải load trước tất cả
+@use './core/utilities';
+@use './core/color.scss';
+@use './core/form.scss';
+@use './core/image.scss';
+@use './core/scrollbar.scss';
+@use './themes/default.scss';
+@use './themes/material-theme.scss';
+
+html {
+  @include default.theme(default.$default-theme);
+}
+
+html, body {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}

package/assets/scss/themes/default.scss

@@ -0,0 +1,45 @@
+@use "sass:map";
+@use "../core/color";
+
+$default-theme: (
+  primary: #2A66F4,
+  primary-light: #EAF1FF,
+  primary-dark: #1C4AD9,
+  info: #2962FF,
+  info-light: #E7E9FF,
+  info-dark: #2240CC,
+  success: #4CAF50,
+  success-light: #DBEFDC,
+  success-dark: #39833C,
+  warning: #FF9600,
+  warning-light: #FFEACC,
+  warning-dark: #BF7000,
+  error: #F82C13,
+  error-light: #FED5D0,
+  error-dark: #BA200E,
+  secondary: #212121,
+  secondary-light: #E9E9E9,
+  secondary-dark: #000000,
+  light: #f8f9fa,
+  dark: #343a40,
+  black500: #212121,
+  black400: #757575,
+  black300: #BFBFBF,
+  black200: #E6E6E6,
+  black100: #F2F2F2,
+);
+
+// Can thiệp màu của Suffix/Prefix khi có lỗi
+// Chỉ áp dụng cho các component có hỗ trợ trailing icon
+:root {
+  --mat-form-field-error-trailing-icon-color: #{map.get($default-theme, 'error')};
+  --mat-form-field-error-hover-trailing-icon-color: #{map.get($default-theme, 'error-dark')};
+  --mat-form-field-error-focus-trailing-icon-color: #{map.get($default-theme, 'error-dark')};
+}
+
+@mixin theme($theme) {
+  $theme: map.merge($default-theme, $theme);
+  @each $color in color.$system-colors {
+    --sd-#{$color}: #{map.get($theme, $color)};
+  }
+}

package/assets/scss/themes/material-theme.scss

@@ -0,0 +1,101 @@
+@use '@angular/material' as mat;
+@use './default.scss' as default;
+@use 'sass:map';
+
+// --------------------------------------------------
+// Palette M2 — generated từ hex color
+// --------------------------------------------------
+$custom-primary-palette: mat.m2-define-palette(
+  (
+    50: #f0f1f5,
+    100: #d7dcea,
+    200: #abbce3,
+    300: #6e90e3,
+    400: #346aea,
+    500: #2a66f4,
+    600: #0645db,
+    700: #0131a3,
+    800: #00216d,
+    900: #001546,
+    contrast: (
+      400: white,
+      500: white,
+      600: white,
+      700: white,
+      800: white,
+      900: white,
+    ),
+  )
+);
+
+$custom-accent-palette: mat.m2-define-palette(
+  (
+    50: #f1f3f1,
+    100: #dce5dd,
+    200: #bbd3bc,
+    300: #8fc291,
+    400: #67b76a,
+    500: #4caf50,
+    600: #3a8c3d,
+    700: #29692c,
+    800: #1c471e,
+    900: #132f14,
+    contrast: (
+      700: white,
+      800: white,
+      900: white,
+    ),
+  )
+);
+
+$custom-warn-palette: mat.m2-define-palette(
+  (
+    50: #f5f0f0,
+    100: #ead9d6,
+    200: #e4b0aa,
+    300: #e6786b,
+    400: #ee4430,
+    500: #f82c13,
+    600: #d11801,
+    700: #9a1100,
+    800: #680b00,
+    900: #440700,
+    contrast: (
+      600: white,
+      700: white,
+      800: white,
+      900: white,
+    ),
+  )
+);
+
+// --------------------------------------------------
+// Theme
+// --------------------------------------------------
+$custom-theme: mat.m2-define-light-theme(
+  (
+    color: (
+      primary: $custom-primary-palette,
+      accent: $custom-accent-palette,
+      warn: $custom-warn-palette,
+    ),
+    density: -3,
+  )
+);
+
+@include mat.all-component-themes($custom-theme);
+
+// Fix paginator density riêng về 0 để không bị lệch
+html {
+  @include mat.theme(
+    (
+      color: (
+        theme-type: light,
+        primary: mat.$azure-palette,
+        tertiary: mat.$blue-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+}

package/components/anchor/index.d.ts

@@ -0,0 +1 @@
+export * from './src';

package/components/anchor/src/components/anchor/anchor.component.d.ts

@@ -0,0 +1,22 @@
+import { ElementRef, OnDestroy } from '@angular/core';
+import { Color } from '@sdcorejs/utils/models';
+import { SdAnchorItem } from '../anchor-item/anchor-item.component';
+import * as i0 from "@angular/core";
+export declare class SdAnchor implements OnDestroy {
+    #private;
+    wrapper: import("@angular/core").Signal<ElementRef<any>>;
+    sections: import("@angular/core").Signal<readonly SdAnchorItem[]>;
+    readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly autoId: import("@angular/core").Signal<string | undefined>;
+    sidebarWidth: import("@angular/core").InputSignal<string>;
+    ellipsis: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    overScroll: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    hideNav: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    color: import("@angular/core").InputSignal<Color>;
+    activeSectionId: import("@angular/core").WritableSignal<string>;
+    constructor();
+    scrollSectionByClick(idSectionTarget: string): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAnchor, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchor, "sd-anchor", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "overScroll": { "alias": "overScroll"; "required": false; "isSignal": true; }; "hideNav": { "alias": "hideNav"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, ["sections"], ["*"], true, never>;
+}

package/components/anchor/src/components/anchor-item/anchor-item.component.d.ts

@@ -0,0 +1,13 @@
+import { ElementRef } from '@angular/core';
+import { IAnchorItem } from '../../models';
+import * as i0 from "@angular/core";
+export declare class SdAnchorItem implements IAnchorItem {
+    title: import("@angular/core").InputSignal<string>;
+    icon: import("@angular/core").InputSignal<string | undefined>;
+    key: import("@angular/core").InputSignal<string | undefined>;
+    id: string;
+    elementRef: ElementRef<any>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAnchorItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAnchorItem, "sd-anchor-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "key": { "alias": "key"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/anchor/src/components/anchor-nav/anchor-nav.component.d.ts

@@ -0,0 +1,21 @@
+import { OnDestroy } from '@angular/core';
+import { Color } from '@sdcorejs/utils/models';
+import { SdAnchorItem } from '../anchor-item/anchor-item.component';
+import * as i0 from "@angular/core";
+export declare class AnchorNav implements OnDestroy {
+    #private;
+    sections: import("@angular/core").InputSignal<readonly SdAnchorItem[]>;
+    activeSectionId: import("@angular/core").InputSignal<string>;
+    ellipsis: import("@angular/core").InputSignal<boolean>;
+    sidebarWidth: import("@angular/core").InputSignal<string>;
+    parentAutoId: import("@angular/core").InputSignal<string | null | undefined>;
+    color: import("@angular/core").InputSignal<Color>;
+    cssActiveVar: import("@angular/core").Signal<string>;
+    itemAutoId(section: SdAnchorItem): string | undefined;
+    clickSection: import("@angular/core").OutputEmitterRef<string>;
+    constructor();
+    onClickSection: (id: string) => void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnchorNav, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AnchorNav, "anchor-nav", never, { "sections": { "alias": "sections"; "required": true; "isSignal": true; }; "activeSectionId": { "alias": "activeSectionId"; "required": false; "isSignal": true; }; "ellipsis": { "alias": "ellipsis"; "required": false; "isSignal": true; }; "sidebarWidth": { "alias": "sidebarWidth"; "required": false; "isSignal": true; }; "parentAutoId": { "alias": "parentAutoId"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, { "clickSection": "clickSection"; }, never, never, true, never>;
+}

package/components/anchor/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './anchor-item/anchor-item.component';
+export * from './anchor/anchor.component';

package/components/anchor/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './models';

package/components/anchor/src/models/index.d.ts

@@ -0,0 +1 @@
+export * from './sd-anchor.model';

package/components/anchor/src/models/sd-anchor.model.d.ts

@@ -0,0 +1,7 @@
+import { ElementRef, InputSignal } from "@angular/core";
+export interface IAnchorItem {
+    id: string;
+    title: InputSignal<string>;
+    icon: InputSignal<string | undefined>;
+    elementRef: ElementRef;
+}

package/components/autoid-inspector/index.d.ts

@@ -0,0 +1,8 @@
+export * from './src/autoid-inspector.component';
+export * from './src/models/autoid-element.model';
+export * from './src/models/autoid-inspector-config.model';
+export * from './src/models/autoid-export-format.model';
+export * from './src/services/autoid-scanner.service';
+export * from './src/services/autoid-audit.service';
+export * from './src/services/autoid-highlight.service';
+export * from './src/services/autoid-export.service';

package/components/autoid-inspector/src/autoid-inspector.component.d.ts

@@ -0,0 +1,55 @@
+import { OnDestroy } from '@angular/core';
+import { SdAutoidElement, SdAutoidAuditResult } from './models/autoid-element.model';
+import { SdAutoidInspectorConfig } from './models/autoid-inspector-config.model';
+import * as i0 from "@angular/core";
+type Segment = 'audit' | 'elements' | 'export';
+export declare class SdAutoidInspector implements OnDestroy {
+    #private;
+    enabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    config: import("@angular/core").InputSignal<SdAutoidInspectorConfig | undefined>;
+    open: import("@angular/core").WritableSignal<boolean>;
+    segment: import("@angular/core").WritableSignal<Segment>;
+    filter: import("@angular/core").WritableSignal<string>;
+    elements: import("@angular/core").WritableSignal<SdAutoidElement[]>;
+    audit: import("@angular/core").WritableSignal<SdAutoidAuditResult | null>;
+    copyOk: import("@angular/core").WritableSignal<boolean>;
+    highlightOn: import("@angular/core").WritableSignal<boolean>;
+    dismissed: import("@angular/core").WritableSignal<boolean>;
+    filteredElements: import("@angular/core").Signal<SdAutoidElement[]>;
+    /**
+     * Elements not inside any sd-table — rendered in the main "Top-level" section.
+     */
+    readonly topLevelElements: import("@angular/core").Signal<SdAutoidElement[]>;
+    /**
+     * Map of `sd-table` autoid → its inner autoid elements. Tables themselves
+     * stay in `topLevelElements` (the table's own autoid is top-level).
+     */
+    readonly tableGroups: import("@angular/core").Signal<{
+        scope: string;
+        items: SdAutoidElement[];
+    }[]>;
+    readonly dataOpened: import("@angular/core").Signal<"true" | "false">;
+    readonly dataHighlightOn: import("@angular/core").Signal<"true" | "false">;
+    readonly dataSegment: import("@angular/core").Signal<Segment>;
+    readonly dataElementCount: import("@angular/core").Signal<string>;
+    readonly dataMissingCount: import("@angular/core").Signal<string>;
+    readonly dataDuplicateCount: import("@angular/core").Signal<string>;
+    ngOnDestroy(): void;
+    togglePanel: () => void;
+    openPanel: () => void;
+    closePanel: () => void;
+    refresh: () => void;
+    dismissFab: (event: Event) => void;
+    toggleHighlight: () => void;
+    setSegment: (seg: Segment) => void;
+    copyJson: () => Promise<void>;
+    copyXpath: (autoid: string) => Promise<void>;
+    exportCsv: () => void;
+    exportJson: () => void;
+    exportMdPom: () => void;
+    exportMdTable: () => void;
+    onEscape(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidInspector, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAutoidInspector, "sd-autoid-inspector", never, { "enabled": { "alias": "enabled"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/components/autoid-inspector/src/models/autoid-element.model.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Runtime state attributes the component renders on the same anchor as `data-autoid`.
+ * Every field is OPTIONAL — only present when the component actually renders that attribute.
+ * All values are the raw DOM string (already "true"/"false" or stringified number/value).
+ */
+export interface SdAutoidElementState {
+    disabled?: string;
+    loading?: string;
+    empty?: string;
+    invalid?: string;
+    opened?: string;
+    count?: string;
+    /** Serialized DOM `data-value` (NOT `input.value`). Distinct from `SdAutoidElement.text` field. */
+    dataValue?: string;
+    required?: string;
+    maxlength?: string;
+    minlength?: string;
+    pattern?: string;
+    errorMessage?: string;
+}
+export interface SdAutoidElement {
+    stt: number;
+    name: string;
+    autoid: string;
+    tag: string;
+    /**
+     * Display text resolved from the DOM: `input.value` for form controls, otherwise
+     * `textContent.trim().slice(0, 80)`. Use `state.dataValue` for the serialized
+     * runtime value rendered by `@sdcorejs/angular` components.
+     */
+    text: string;
+    xpath: string;
+    duplicate: boolean;
+    /** Runtime state attributes read from the DOM. Always an object — may be empty `{}`. */
+    state: SdAutoidElementState;
+    /**
+     * `data-autoid` of the closest ancestor `<sd-table>` that contains this element,
+     * or `undefined` if this element is top-level (not inside any `sd-table`).
+     * Used by the UI to group table-scoped elements into a separate section.
+     */
+    tableScope?: string;
+}
+export interface SdAutoidMissing {
+    tag: string;
+    selector: string;
+    outerHtmlPreview: string;
+    nameHint: string;
+}
+export interface SdAutoidAuditResult {
+    total: number;
+    duplicates: Record<string, number>;
+    duplicateCount: number;
+    missing: SdAutoidMissing[];
+    missingCount: number;
+}

package/components/autoid-inspector/src/models/autoid-export-format.model.d.ts

@@ -0,0 +1,6 @@
+export type SdAutoidExportFormat = 'csv' | 'json' | 'md-pom' | 'md-table';
+export interface SdAutoidExportMeta {
+    pageUrl: string;
+    pageTitle: string;
+    timestamp: string;
+}

package/components/autoid-inspector/src/models/autoid-inspector-config.model.d.ts

@@ -0,0 +1,8 @@
+export interface SdAutoidInspectorConfig {
+    /** Selector phụ thêm cần audit (mặc định component đã cover sd-* form + sd-button). */
+    extraRequireSelectors?: string[];
+    /** Root scan, mặc định document.body. */
+    root?: HTMLElement;
+}
+/** Selector mặc định coi là phải có data-autoid. */
+export declare const SD_AUTOID_DEFAULT_REQUIRE_SELECTORS: ReadonlyArray<string>;

package/components/autoid-inspector/src/services/autoid-audit.service.d.ts

@@ -0,0 +1,19 @@
+import { SdAutoidElement, SdAutoidAuditResult } from '../models/autoid-element.model';
+import * as i0 from "@angular/core";
+export declare 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: SdAutoidElement[], options?: {
+        requireSelectors?: ReadonlyArray<string>;
+        root?: HTMLElement;
+    }): SdAutoidAuditResult;
+    private findMissing;
+    private buildSelectorPath;
+    private shortHtml;
+    private resolveNameHint;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidAuditService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidAuditService>;
+}

package/components/autoid-inspector/src/services/autoid-export.service.d.ts

@@ -0,0 +1,21 @@
+import { SdAutoidElement } from '../models/autoid-element.model';
+import { SdAutoidExportMeta } from '../models/autoid-export-format.model';
+import * as i0 from "@angular/core";
+export declare class SdAutoidExportService {
+    toJson(elements: SdAutoidElement[]): string;
+    toCsv(elements: SdAutoidElement[]): string;
+    /** POM TypeScript skeleton — copy ngay vào file Playwright/Cypress. */
+    toMarkdownPom(elements: SdAutoidElement[], meta: SdAutoidExportMeta): string;
+    /** Markdown reference table, group FIRST by tableScope (top-level first, then per table), then by tag. */
+    toMarkdownTable(elements: SdAutoidElement[], meta: SdAutoidExportMeta): string;
+    download(content: string, filename: string, mime: string): void;
+    copyToClipboard(content: string): Promise<void>;
+    /** Build a compact state summary string from defined state keys, e.g. "disabled=false; empty=true". */
+    private buildStateSummary;
+    private q;
+    private mdCell;
+    private toCamel;
+    private toPascal;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidExportService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidExportService>;
+}

package/components/autoid-inspector/src/services/autoid-highlight.service.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare class SdAutoidHighlightService {
+    #private;
+    /** Apply outline cho mọi [data-autoid]: xanh nếu unique, đỏ nếu duplicate. Idempotent. */
+    apply(root?: HTMLElement): void;
+    /** Highlight tập element không có autoid (missing) bằng outline cam dashed. */
+    applyMissing(nodes: HTMLElement[]): void;
+    /** Restore inline style như trước khi apply. */
+    clear(root?: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidHighlightService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidHighlightService>;
+}

package/components/autoid-inspector/src/services/autoid-scanner.service.d.ts

@@ -0,0 +1,23 @@
+import { SdAutoidElement } from '../models/autoid-element.model';
+import * as i0 from "@angular/core";
+export declare class SdAutoidScannerService {
+    /** Quét toàn bộ element có [data-autoid] trong root, gắn thông tin name/tag/value/xpath. */
+    scan(root?: HTMLElement): SdAutoidElement[];
+    /** Group element theo autoid để consumer lấy duplicate map. */
+    groupByAutoid(elements: SdAutoidElement[]): Record<string, SdAutoidElement[]>;
+    /**
+     * Read the optional `data-*` E2E state attributes off the same node.
+     * Only includes fields actually present on the DOM (skipped fields stay undefined).
+     */
+    private readState;
+    /**
+     * 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.
+     */
+    private resolveTableScope;
+    private resolveName;
+    private resolveSdTag;
+    private resolveText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdAutoidScannerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdAutoidScannerService>;
+}

package/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './src/avatar.component';