@sd-angular/core 19.0.0-beta.32 → 19.0.0-beta.33

package/fesm2022/sd-angular-core-components-view.mjs

@@ -1,53 +1,41 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ContentChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, contentChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SdHrefDirective } from '@sd-angular/core/directives';
 import { SdEmptyPipe } from '@sd-angular/core/pipes';
 
 class SdView {
-    label;
-    value;
-    display;
-    hyperlink;
-    // 1. Input để hứng template từ component cha (như sd-input, sd-select) truyền xuống
-    labelTemplate;
-    valueTemplate;
-    // 2. ContentChild để bắt trực tiếp nếu Dev dùng thẻ <sd-view> và truyền #sdLabel, #sdValue
-    contentLabelTemplate;
-    contentValueTemplate; // Đổi tên một xíu cho đồng bộ với label
-    // 3. Getter gom template lại: Ưu tiên Input từ cha truyền xuống, không có thì lấy ContentChild
-    get activeLabelTemplate() {
-        return this.labelTemplate || this.contentLabelTemplate;
-    }
-    get activeValueTemplate() {
-        return this.valueTemplate || this.contentValueTemplate;
-    }
+    // ==========================================
+    // 1. SIGNAL INPUTS
+    // ==========================================
+    label = input();
+    value = input();
+    // input.required() sẽ ép dev bắt buộc phải truyền [display] vào, y hệt @Input({ required: true })
+    display = input.required();
+    hyperlink = input();
+    // Input để hứng template từ component cha (như sd-input, sd-select) truyền xuống
+    labelTemplate = input();
+    valueTemplate = input();
+    // ==========================================
+    // 2. SIGNAL QUERIES (Thay thế @ContentChild)
+    // ==========================================
+    // Trả về Signal chứa TemplateRef nếu Dev dùng thẻ <sd-view> và truyền #sdLabel, #sdValue
+    contentLabelTemplate = contentChild('sdLabel');
+    contentValueTemplate = contentChild('sdValue');
+    // ==========================================
+    // 3. COMPUTED SIGNALS (Thay thế Getters)
+    // ==========================================
+    // Ưu tiên Input từ cha truyền xuống, không có thì lấy ContentChild
+    // Lợi ích: Cache giá trị, không bị chạy lại vô tội vạ như Getter cũ!
+    activeLabelTemplate = computed(() => this.labelTemplate() ?? this.contentLabelTemplate());
+    activeValueTemplate = computed(() => this.valueTemplate() ?? this.contentValueTemplate());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdView, isStandalone: true, selector: "sd-view", inputs: { label: "label", value: "value", display: "display", hyperlink: "hyperlink", labelTemplate: "labelTemplate", valueTemplate: "valueTemplate" }, queries: [{ propertyName: "contentLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true }, { propertyName: "contentValueTemplate", first: true, predicate: ["sdValue"], descendants: true }], ngImport: i0, template: "@if (activeLabelTemplate) {\r\n  <ng-container *ngTemplateOutlet=\"activeLabelTemplate\"></ng-container>\r\n} @else {\r\n  @if (label) {\r\n    <div class=\"T14R text-black400\">{{ label }}</div>\r\n  }\r\n}\r\n\r\n@if (activeValueTemplate) {\r\n  <ng-container *ngTemplateOutlet=\"activeValueTemplate; context: { $implicit: display, value: value }\"> </ng-container>\r\n} @else {\r\n  @if (hyperlink) {\r\n    <a [sdHref]=\"hyperlink\">{{ display }}</a>\r\n  } @else {\r\n    <div class=\"T14M\">{{ display | sdEmpty }}</div>\r\n  }\r\n}", dependencies: [{ kind: "pipe", type: SdEmptyPipe, name: "sdEmpty" }, { kind: "directive", type: SdHrefDirective, selector: "a[sdHref]", inputs: ["sdHref"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdView, isStandalone: true, selector: "sd-view", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: true, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, labelTemplate: { classPropertyName: "labelTemplate", publicName: "labelTemplate", isSignal: true, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "contentValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (activeLabelTemplate()) {\r\n  <ng-container *ngTemplateOutlet=\"activeLabelTemplate()!\"></ng-container>\r\n} @else {\r\n  @if (label()) {\r\n    <div class=\"T14R text-black400\">{{ label() }}</div>\r\n  }\r\n}\r\n\r\n@if (activeValueTemplate()) {\r\n  <ng-container \r\n    *ngTemplateOutlet=\"\r\n      activeValueTemplate()!; \r\n      context: { $implicit: display(), value: value() }\r\n    \"> \r\n  </ng-container>\r\n} @else {\r\n  @if (hyperlink(); as link) {\r\n    <a [sdHref]=\"link\">{{ display() }}</a>\r\n  } @else {\r\n    <div class=\"T14M\">{{ display() | sdEmpty }}</div>\r\n  }\r\n}", dependencies: [{ kind: "pipe", type: SdEmptyPipe, name: "sdEmpty" }, { kind: "directive", type: SdHrefDirective, selector: "a[sdHref]", inputs: ["sdHref"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdView, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-view', standalone: true, imports: [SdEmptyPipe, SdHrefDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (activeLabelTemplate) {\r\n  <ng-container *ngTemplateOutlet=\"activeLabelTemplate\"></ng-container>\r\n} @else {\r\n  @if (label) {\r\n    <div class=\"T14R text-black400\">{{ label }}</div>\r\n  }\r\n}\r\n\r\n@if (activeValueTemplate) {\r\n  <ng-container *ngTemplateOutlet=\"activeValueTemplate; context: { $implicit: display, value: value }\"> </ng-container>\r\n} @else {\r\n  @if (hyperlink) {\r\n    <a [sdHref]=\"hyperlink\">{{ display }}</a>\r\n  } @else {\r\n    <div class=\"T14M\">{{ display | sdEmpty }}</div>\r\n  }\r\n}" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], display: [{
-                type: Input,
-                args: [{ required: true }]
-            }], hyperlink: [{
-                type: Input
-            }], labelTemplate: [{
-                type: Input
-            }], valueTemplate: [{
-                type: Input
-            }], contentLabelTemplate: [{
-                type: ContentChild,
-                args: ['sdLabel']
-            }], contentValueTemplate: [{
-                type: ContentChild,
-                args: ['sdValue']
-            }] } });
+            args: [{ selector: 'sd-view', standalone: true, imports: [SdEmptyPipe, SdHrefDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (activeLabelTemplate()) {\r\n  <ng-container *ngTemplateOutlet=\"activeLabelTemplate()!\"></ng-container>\r\n} @else {\r\n  @if (label()) {\r\n    <div class=\"T14R text-black400\">{{ label() }}</div>\r\n  }\r\n}\r\n\r\n@if (activeValueTemplate()) {\r\n  <ng-container \r\n    *ngTemplateOutlet=\"\r\n      activeValueTemplate()!; \r\n      context: { $implicit: display(), value: value() }\r\n    \"> \r\n  </ng-container>\r\n} @else {\r\n  @if (hyperlink(); as link) {\r\n    <a [sdHref]=\"link\">{{ display() }}</a>\r\n  } @else {\r\n    <div class=\"T14M\">{{ display() | sdEmpty }}</div>\r\n  }\r\n}" }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/sd-angular-core-components-view.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components-view.mjs","sources":["../../../projects/sd-angular/components/view/src/view.component.ts","../../../projects/sd-angular/components/view/src/view.component.html","../../../projects/sd-angular/components/view/sd-angular-core-components-view.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef } from '@angular/core';\r\nimport { SdHrefDirective } from '@sd-angular/core/directives';\r\nimport { SdEmptyPipe } from '@sd-angular/core/pipes';\r\n\r\n@Component({\r\n  selector: 'sd-view',\r\n  standalone: true,\r\n  imports: [SdEmptyPipe, SdHrefDirective, NgTemplateOutlet],\r\n  templateUrl: './view.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdView {\r\n  @Input() label?: string | null;\r\n  @Input() value?: string | null;\r\n  @Input({ required: true }) display?: string | null;\r\n  @Input() hyperlink?: string | null;\r\n\r\n  // 1. Input để hứng template từ component cha (như sd-input, sd-select) truyền xuống\r\n  @Input() labelTemplate?: TemplateRef<any>;\r\n  @Input() valueTemplate?: TemplateRef<any>; \r\n  \r\n  // 2. ContentChild để bắt trực tiếp nếu Dev dùng thẻ <sd-view> và truyền #sdLabel, #sdValue\r\n  @ContentChild('sdLabel') contentLabelTemplate?: TemplateRef<any>;\r\n  @ContentChild('sdValue') contentValueTemplate?: TemplateRef<any>; // Đổi tên một xíu cho đồng bộ với label\r\n\r\n  // 3. Getter gom template lại: Ưu tiên Input từ cha truyền xuống, không có thì lấy ContentChild\r\n  get activeLabelTemplate(): TemplateRef<any> | undefined {\r\n    return this.labelTemplate || this.contentLabelTemplate;\r\n  }\r\n\r\n  get activeValueTemplate(): TemplateRef<any> | undefined {\r\n    return this.valueTemplate || this.contentValueTemplate;\r\n  }\r\n}","@if (activeLabelTemplate) {\r\n  <ng-container *ngTemplateOutlet=\"activeLabelTemplate\"></ng-container>\r\n} @else {\r\n  @if (label) {\r\n    <div class=\"T14R text-black400\">{{ label }}</div>\r\n  }\r\n}\r\n\r\n@if (activeValueTemplate) {\r\n  <ng-container *ngTemplateOutlet=\"activeValueTemplate; context: { $implicit: display, value: value }\"> </ng-container>\r\n} @else {\r\n  @if (hyperlink) {\r\n    <a [sdHref]=\"hyperlink\">{{ display }}</a>\r\n  } @else {\r\n    <div class=\"T14M\">{{ display | sdEmpty }}</div>\r\n  }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAYa,MAAM,CAAA;AACR,IAAA,KAAK;AACL,IAAA,KAAK;AACa,IAAA,OAAO;AACzB,IAAA,SAAS;;AAGT,IAAA,aAAa;AACb,IAAA,aAAa;;AAGG,IAAA,oBAAoB;IACpB,oBAAoB,CAAoB;;AAGjE,IAAA,IAAI,mBAAmB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB;IACxD;AAEA,IAAA,IAAI,mBAAmB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB;IACxD;wGArBW,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAM,0aCZnB,4hBAgBC,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EDRW,WAAW,EAAA,IAAA,EAAA,SAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,0EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAI7C,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,UAAA,EACP,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,eAAe,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAExC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,4hBAAA,EAAA;8BAGtC,KAAK,EAAA,CAAA;sBAAb;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBAC0B,OAAO,EAAA,CAAA;sBAAjC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAChB,SAAS,EAAA,CAAA;sBAAjB;gBAGQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBAGwB,oBAAoB,EAAA,CAAA;sBAA5C,YAAY;uBAAC,SAAS;gBACE,oBAAoB,EAAA,CAAA;sBAA5C,YAAY;uBAAC,SAAS;;;AExBzB;;AAEG;;;;"}
+{"version":3,"file":"sd-angular-core-components-view.mjs","sources":["../../../projects/sd-angular/components/view/src/view.component.ts","../../../projects/sd-angular/components/view/src/view.component.html","../../../projects/sd-angular/components/view/sd-angular-core-components-view.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport { \r\n  ChangeDetectionStrategy, \r\n  Component, \r\n  TemplateRef, \r\n  input, \r\n  contentChild, \r\n  computed \r\n} from '@angular/core';\r\nimport { SdHrefDirective } from '@sd-angular/core/directives';\r\nimport { SdEmptyPipe } from '@sd-angular/core/pipes';\r\n\r\n@Component({\r\n  selector: 'sd-view',\r\n  standalone: true,\r\n  imports: [SdEmptyPipe, SdHrefDirective, NgTemplateOutlet],\r\n  templateUrl: './view.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdView {\r\n  // ==========================================\r\n  // 1. SIGNAL INPUTS\r\n  // ==========================================\r\n  label = input<string | null | undefined>();\r\n  value = input<any>(); \r\n  \r\n  // input.required() sẽ ép dev bắt buộc phải truyền [display] vào, y hệt @Input({ required: true })\r\n  display = input.required<string | null | undefined>(); \r\n  hyperlink = input<string | null | undefined>();\r\n\r\n  // Input để hứng template từ component cha (như sd-input, sd-select) truyền xuống\r\n  labelTemplate = input<TemplateRef<any> | undefined>();\r\n  valueTemplate = input<TemplateRef<any> | undefined>(); \r\n\r\n  // ==========================================\r\n  // 2. SIGNAL QUERIES (Thay thế @ContentChild)\r\n  // ==========================================\r\n  // Trả về Signal chứa TemplateRef nếu Dev dùng thẻ <sd-view> và truyền #sdLabel, #sdValue\r\n  contentLabelTemplate = contentChild<TemplateRef<any>>('sdLabel');\r\n  contentValueTemplate = contentChild<TemplateRef<any>>('sdValue');\r\n\r\n  // ==========================================\r\n  // 3. COMPUTED SIGNALS (Thay thế Getters)\r\n  // ==========================================\r\n  // Ưu tiên Input từ cha truyền xuống, không có thì lấy ContentChild\r\n  // Lợi ích: Cache giá trị, không bị chạy lại vô tội vạ như Getter cũ!\r\n  activeLabelTemplate = computed(() => this.labelTemplate() ?? this.contentLabelTemplate());\r\n  \r\n  activeValueTemplate = computed(() => this.valueTemplate() ?? this.contentValueTemplate());\r\n}","@if (activeLabelTemplate()) {\r\n  <ng-container *ngTemplateOutlet=\"activeLabelTemplate()!\"></ng-container>\r\n} @else {\r\n  @if (label()) {\r\n    <div class=\"T14R text-black400\">{{ label() }}</div>\r\n  }\r\n}\r\n\r\n@if (activeValueTemplate()) {\r\n  <ng-container \r\n    *ngTemplateOutlet=\"\r\n      activeValueTemplate()!; \r\n      context: { $implicit: display(), value: value() }\r\n    \"> \r\n  </ng-container>\r\n} @else {\r\n  @if (hyperlink(); as link) {\r\n    <a [sdHref]=\"link\">{{ display() }}</a>\r\n  } @else {\r\n    <div class=\"T14M\">{{ display() | sdEmpty }}</div>\r\n  }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAmBa,MAAM,CAAA;;;;IAIjB,KAAK,GAAG,KAAK,EAA6B;IAC1C,KAAK,GAAG,KAAK,EAAO;;AAGpB,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAA6B;IACrD,SAAS,GAAG,KAAK,EAA6B;;IAG9C,aAAa,GAAG,KAAK,EAAgC;IACrD,aAAa,GAAG,KAAK,EAAgC;;;;;AAMrD,IAAA,oBAAoB,GAAG,YAAY,CAAmB,SAAS,CAAC;AAChE,IAAA,oBAAoB,GAAG,YAAY,CAAmB,SAAS,CAAC;;;;;;AAOhE,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;AAEzF,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;wGA7B9E,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,MAAM,+kCCnBnB,kmBAqBC,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EDNW,WAAW,EAAA,IAAA,EAAA,SAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,0EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAI7C,MAAM,EAAA,UAAA,EAAA,CAAA;kBAPlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,EAAA,UAAA,EACP,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,eAAe,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAExC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kmBAAA,EAAA;;;AEjBjD;;AAEG;;;;"}