@sdcorejs/angular 21.0.4 → 21.0.6

package/assets/{scss/README.md → STYLE-GUIDE.md}

@@ -46,6 +46,7 @@
 
 ```
 projects/sdcorejs-angular/assets/
+├── STYLE-GUIDE.md                     # Tài liệu này (assets + SCSS reference cho người + AI agent)
 ├── fonts/
 │   ├── fonts.scss                     # @font-face khai báo cho Roboto + Material Icons + Material Symbols
 │   ├── material-icons/                # 2 file .woff2 (icons-v145 + outlined-v110)
@@ -321,6 +322,8 @@ p-{n}   pt-{n}   pr-{n}   pb-{n}   pl-{n}   px-{n}   py-{n}
 
 Ví dụ: `m-0`, `mt-8`, `px-16`, `py-24`, `mb-4`.
 
+**Spacing scale rule:** với spacing dùng cho layout element, chỉ dùng giá trị là **bội số của 4px**: `m-4`, `m-8`, `m-12`, `m-16`, `p-4`, `p-8`, `px-16`, `py-24`, `gap-8`, `gap-16`... Tránh sinh các class lẻ như `m-3`, `p-5`, `gap-7` trừ khi đang xử lý pixel-perfect exception đã được review rõ ràng.
+
 **Auto margin:** `m-auto`, `mt-auto`, `mr-auto`, `mb-auto`, `ml-auto`, `mx-auto`, `my-auto`.
 
 ### 7.2 Gap (px-based, 0–200)

package/fesm2022/sdcorejs-angular-components-form-generic.mjs

@@ -3063,7 +3063,7 @@ class SdFormRender {
         return messages;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdFormRender, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_FORM_GENERIC_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SdFormRender, isStandalone: true, selector: "sd-form-render", inputs: { form: "form", _configuration: ["configuration", "_configuration"], _default: ["defaultEntity", "_default"], _entity: ["entity", "_entity"], _properties: ["properties", "_properties"], _viewed: ["viewed", "_viewed"] }, viewQueries: [{ propertyName: "formRenderItems", predicate: LibItemComponent, descendants: true }], ngImport: i0, template: "@if (form && loadCompleted && hashedValues) {\n  <div class=\"row mx-0\">\n    @for (component of configuration.components; track component.id) {\n      @let expression = hashedValues | whenExpression: component : formValue;\n      @if (!expression.hidden) {\n        @if (component.type === 'group') {\n          @if (!!component.components.length) {\n            <div class=\"col-12 mt-16\">\n              <sd-section [title]=\"component.label\" [icon]=\"component.properties.icon\">\n                <div class=\"row mx-0\">\n                  @for (childComponent of component.components; track childComponent.id) {\n                    @let childExpression = hashedValues | whenExpression: childComponent : formValue;\n                    @if (!childExpression.hidden) {\n                      <lib-item\n                        [setVariables]=\"setVariables\"\n                        [form]=\"form\"\n                        [entity]=\"entity\"\n                        [component]=\"childComponent\"\n                        [required]=\"childExpression.required\"\n                        [disabled]=\"childExpression.disabled\"\n                        [viewed]=\"viewed\"></lib-item>\n                    }\n                  }\n                </div>\n              </sd-section>\n            </div>\n          }\n        } @else {\n          <lib-item\n            [setVariables]=\"setVariables\"\n            [form]=\"form\"\n            [entity]=\"entity\"\n            [component]=\"component\"\n            [required]=\"expression.required\"\n            [disabled]=\"expression.disabled\"\n            [viewed]=\"viewed\"></lib-item>\n        }\n      }\n    }\n    <variable [variables]=\"configuration.variables\" [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" ></variable>\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: LibItemComponent, selector: "lib-item", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "component", type: VariableComponent, selector: "variable", inputs: ["variables", "setVariables", "form", "entity"] }, { kind: "pipe", type: WhenExpressionPipe, name: "whenExpression" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SdFormRender, isStandalone: true, selector: "sd-form-render", inputs: { form: "form", _configuration: ["configuration", "_configuration"], _default: ["defaultEntity", "_default"], _entity: ["entity", "_entity"], _properties: ["properties", "_properties"], _viewed: ["viewed", "_viewed"] }, viewQueries: [{ propertyName: "formRenderItems", predicate: LibItemComponent, descendants: true }], ngImport: i0, template: "@if (form && loadCompleted && hashedValues) {\n  <div class=\"row mx-0\">\n    @for (component of configuration.components; track component.id) {\n      @let expression = hashedValues | whenExpression: component : formValue;\n      @if (!expression.hidden) {\n        @if (component.type === 'group') {\n          @if (!!component.components.length) {\n            <div class=\"col-12 mt-16\">\n              <sd-section [title]=\"component.label\" [icon]=\"component.properties.icon\">\n                <div class=\"row mx-0\">\n                  @for (childComponent of component.components; track childComponent.id) {\n                    @let childExpression = hashedValues | whenExpression: childComponent : formValue;\n                    @if (!childExpression.hidden) {\n                      <lib-item\n                        [setVariables]=\"setVariables\"\n                        [form]=\"form\"\n                        [entity]=\"entity\"\n                        [component]=\"childComponent\"\n                        [required]=\"childExpression.required\"\n                        [disabled]=\"childExpression.disabled\"\n                        [viewed]=\"viewed\"></lib-item>\n                    }\n                  }\n                </div>\n              </sd-section>\n            </div>\n          }\n        } @else {\n          <lib-item\n            [setVariables]=\"setVariables\"\n            [form]=\"form\"\n            [entity]=\"entity\"\n            [component]=\"component\"\n            [required]=\"expression.required\"\n            [disabled]=\"expression.disabled\"\n            [viewed]=\"viewed\"></lib-item>\n        }\n      }\n    }\n    <variable [variables]=\"configuration.variables\" [setVariables]=\"setVariables\" [form]=\"form\" [entity]=\"entity\" ></variable>\n  </div>\n}\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsible", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: LibItemComponent, selector: "lib-item", inputs: ["setVariables", "form", "entity", "component", "disabled", "required", "viewed", "validator"] }, { kind: "component", type: VariableComponent, selector: "variable", inputs: ["variables", "setVariables", "form", "entity"] }, { kind: "pipe", type: WhenExpressionPipe, name: "whenExpression" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdFormRender, decorators: [{
             type: Component,
@@ -4590,7 +4590,7 @@ class AttributeSelection {
         this.ref.markForCheck();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AttributeSelection, deps: [{ token: i0.ChangeDetectorRef }, { token: FormGenericService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AttributeSelection, isStandalone: true, selector: "attribute-selection", inputs: { components: "components", variables: "variables", component: "component", _valuesKey: ["valuesKey", "_valuesKey"], _values: ["values", "_values"] }, outputs: { valuesKeyChange: "valuesKeyChange", valuesChange: "valuesChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-section class=\"mt-8\" [title]=\"'core.component.form-builder.data' | translate\" icon=\"format_list_bulleted\">\n  @if (selections.length) {\n    <div class=\"d-flex align-items-center py-4\">\n      <div class=\"T14M\" style=\"flex: 1\">{{ 'core.component.form-builder.data-api' | translate }}</div>\n      <sd-autocomplete\n        style=\"width: 200px\"\n        size=\"sm\"\n        [(model)]=\"valuesKey\"\n        [items]=\"selections\"\n        valueField=\"value\"\n        displayField=\"display\"\n        (sdChange)=\"onChangeValuesKey($event)\"\n        hideInlineError></sd-autocomplete>\n    </div>\n    <!-- N\u1EBFu l\u00E0 select t\u1EEB API th\u00EC cho ph\u00E9p truy\u1EC1n th\u00EAm Query -->\n\n    @if (component.type === 'select' && !!valuesKey) {\n      <build-queries\n        [label]=\"'core.component.form-builder.query-condition' | translate\"\n        [selections]=\"selections\"\n        [valuesKey]=\"valuesKey\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.query\"></build-queries>\n      <build-variables\n        [label]=\"'core.component.form-builder.assign-value' | translate\"\n        [selections]=\"selections\"\n        [valuesKey]=\"valuesKey\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.setVariables\"></build-variables>\n      <!-- <div class=\"d-flex align-items-center py-4\">\n        <div class=\"T14M\" style=\"flex: 1\">\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n</div>\n        <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"component.properties!.query\" hideInlineError></sd-input>\n      </div> -->\n    }\n  }\n  @if (!valuesKey) {\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\n      <div class=\"T14M\">{{ 'core.component.form-builder.data-static' | translate }}</div>\n      @for (item of values; track item.value; let idx = $index) {\n        <div class=\"d-flex align-items-end py-4\" style=\"gap: 4px\">\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.value\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.label\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\n          <sd-button prefixIcon=\"delete\" (click)=\"removeItem(idx)\" color=\"error\"></sd-button>\n        </div>\n      }\n      <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.add-data' | translate\" (click)=\"addItem()\" color=\"primary\"></sd-button>\n    </div>\n  }\n</sd-section>\n", dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "clearable", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: BuildQueries$1, selector: "build-queries", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "component", type: BuildVariables, selector: "build-variables", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AttributeSelection, isStandalone: true, selector: "attribute-selection", inputs: { components: "components", variables: "variables", component: "component", _valuesKey: ["valuesKey", "_valuesKey"], _values: ["values", "_values"] }, outputs: { valuesKeyChange: "valuesKeyChange", valuesChange: "valuesChange", sdChange: "sdChange" }, ngImport: i0, template: "<sd-section class=\"mt-8\" [title]=\"'core.component.form-builder.data' | translate\" icon=\"format_list_bulleted\">\n  @if (selections.length) {\n    <div class=\"d-flex align-items-center py-4\">\n      <div class=\"T14M\" style=\"flex: 1\">{{ 'core.component.form-builder.data-api' | translate }}</div>\n      <sd-autocomplete\n        style=\"width: 200px\"\n        size=\"sm\"\n        [(model)]=\"valuesKey\"\n        [items]=\"selections\"\n        valueField=\"value\"\n        displayField=\"display\"\n        (sdChange)=\"onChangeValuesKey($event)\"\n        hideInlineError></sd-autocomplete>\n    </div>\n    <!-- N\u1EBFu l\u00E0 select t\u1EEB API th\u00EC cho ph\u00E9p truy\u1EC1n th\u00EAm Query -->\n\n    @if (component.type === 'select' && !!valuesKey) {\n      <build-queries\n        [label]=\"'core.component.form-builder.query-condition' | translate\"\n        [selections]=\"selections\"\n        [valuesKey]=\"valuesKey\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.query\"></build-queries>\n      <build-variables\n        [label]=\"'core.component.form-builder.assign-value' | translate\"\n        [selections]=\"selections\"\n        [valuesKey]=\"valuesKey\"\n        [components]=\"components\"\n        [variables]=\"variables\"\n        [(model)]=\"component.properties!.setVariables\"></build-variables>\n      <!-- <div class=\"d-flex align-items-center py-4\">\n        <div class=\"T14M\" style=\"flex: 1\">\u0110i\u1EC1u ki\u1EC7n truy v\u1EA5n</div>\n        <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"component.properties!.query\" hideInlineError></sd-input>\n      </div> -->\n    }\n  }\n  @if (!valuesKey) {\n    <div class=\"d-flex flex-column\" style=\"gap: 4px\">\n      <div class=\"T14M\">{{ 'core.component.form-builder.data-static' | translate }}</div>\n      @for (item of values; track item.value; let idx = $index) {\n        <div class=\"d-flex align-items-end py-4\" style=\"gap: 4px\">\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.value\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\n          <sd-input style=\"width: 200px\" size=\"sm\" [(model)]=\"item.label\" (sdChange)=\"onChangeValues()\" hideInlineError></sd-input>\n          <sd-button prefixIcon=\"delete\" (click)=\"removeItem(idx)\" color=\"error\"></sd-button>\n        </div>\n      }\n      <sd-button prefixIcon=\"add\" [title]=\"'core.component.form-builder.add-data' | translate\" (click)=\"addItem()\" color=\"primary\"></sd-button>\n    </div>\n  }\n</sd-section>\n", dependencies: [{ kind: "component", type: SdInput$1, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "component", type: SdAutocomplete$1, selector: "sd-autocomplete", inputs: ["autoId", "name", "size", "form", "label", "helperText", "placeholder", "valueField", "displayField", "disabledField", "limit", "cacheChecksum", "hyperlink", "items", "hideInlineError", "addable", "required", "disabled", "viewed", "clearable", "validator", "inlineError", "appearance", "model"], outputs: ["modelChange", "sdChange", "sdSelection", "sdAdd"] }, { kind: "component", type: SdButton, selector: "sd-button", inputs: ["autoId", "type", "color", "size", "fontSet", "title", "width", "tooltip", "prefixIcon", "suffixIcon", "disabled", "loading", "block", "htmlType"], outputs: ["click"] }, { kind: "component", type: SdSection, selector: "sd-section", inputs: ["title", "subTitle", "icon", "iconColor", "collapsed", "collapsible", "collapsable", "hideHeader", "noPaddingBody"], outputs: ["collapsedChange"] }, { kind: "component", type: BuildQueries$1, selector: "build-queries", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "component", type: BuildVariables, selector: "build-variables", inputs: ["components", "variables", "label", "selections", "valuesKey", "model"], outputs: ["modelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AttributeSelection, decorators: [{
             type: Component,