@sd-angular/core 19.0.0-beta.24 → 19.0.0-beta.26

package/components/index.d.ts

@@ -15,3 +15,4 @@ export * from '@sd-angular/core/components/query-builder';
 export * from '@sd-angular/core/components/import-excel';
 export * from '@sd-angular/core/components/document-builder';
 export * from '@sd-angular/core/components/mini-editor';
+export * from '@sd-angular/core/components/view';

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

@@ -1,14 +1,16 @@
-import { OnInit } from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class SdAvatar implements OnInit {
-    #private;
-    src: string | undefined | null;
-    size: number;
-    isUrl: boolean;
-    initials: string;
-    bgColor: string;
-    ngOnInit(): void;
-    handleError(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdAvatar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdAvatar, "sd-view", never, { "src": { "alias": "src"; "required": true; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+export declare class SdView {
+    label?: string | null;
+    value?: string | null;
+    display?: string | null;
+    hyperlink?: string | null;
+    labelTemplate?: TemplateRef<any>;
+    valueTemplate?: TemplateRef<any>;
+    contentLabelTemplate?: TemplateRef<any>;
+    contentValueTemplate?: TemplateRef<any>;
+    get activeLabelTemplate(): TemplateRef<any> | undefined;
+    get activeValueTemplate(): TemplateRef<any> | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdView, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdView, "sd-view", never, { "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "display": { "alias": "display"; "required": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; }; "labelTemplate": { "alias": "labelTemplate"; "required": false; }; "valueTemplate": { "alias": "valueTemplate"; "required": false; }; }, {}, ["contentLabelTemplate", "contentValueTemplate"], never, true, never>;
 }

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

@@ -1,88 +1,57 @@
-import { CommonModule } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ContentChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SdHrefDirective } from '@sd-angular/core/directives';
+import { SdEmptyPipe } from '@sd-angular/core/pipes';
 
-class SdAvatar {
-    src;
-    size = 32;
-    isUrl = false;
-    initials = '';
-    bgColor = '#ccc';
-    ngOnInit() {
-        this.#init();
+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;
     }
-    #init = () => {
-        if (!this.src) {
-            this.isUrl = false;
-            this.initials = '?';
-            this.bgColor = '#bdc3c7';
-            return;
-        }
-        // Kiểm tra xem src có phải là URL (http, https, data:image, hoặc path /)
-        const urlPattern = /^(http|https|data:image|\/)/;
-        this.isUrl = urlPattern.test(this.src);
-        if (!this.isUrl) {
-            this.initials = this.#getInitials(this.src);
-            this.bgColor = this.#generateColor(this.src);
-        }
-    };
-    handleError() {
-        this.src = undefined; // Nếu ảnh lỗi, chuyển sang hiển thị initials
-        this.#init();
+    get activeValueTemplate() {
+        return this.valueTemplate || this.contentValueTemplate;
     }
-    #getInitials = (name) => {
-        return name
-            .trim()
-            .split(' ')
-            .map(n => n[0])
-            .join('')
-            .toUpperCase()
-            .substring(0, 2);
-    };
-    #generateColor = (name) => {
-        const colors = [
-            '#1abc9c',
-            '#2ecc71',
-            '#3498db',
-            '#9b59b6',
-            '#34495e',
-            '#16a085',
-            '#27ae60',
-            '#2980b9',
-            '#8e44ad',
-            '#2c3e50',
-            '#f1c40f',
-            '#e67e22',
-            '#e74c3c',
-            '#95a5a6',
-            '#f39c12',
-            '#d35400',
-            '#c0392b',
-            '#bdc3c7',
-            '#7f8c8d',
-        ];
-        let hash = 0;
-        for (let i = 0; i < name.length; i++) {
-            hash = name.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        return colors[Math.abs(hash) % colors.length];
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAvatar, isStandalone: true, selector: "sd-view", inputs: { src: "src", size: "size" }, ngImport: i0, template: "<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdView, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-view', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"] }]
-        }], propDecorators: { src: [{
+            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 }]
-            }], size: [{
+            }], hyperlink: [{
+                type: Input
+            }], labelTemplate: [{
+                type: Input
+            }], valueTemplate: [{
                 type: Input
+            }], contentLabelTemplate: [{
+                type: ContentChild,
+                args: ['sdLabel']
+            }], contentValueTemplate: [{
+                type: ContentChild,
+                args: ['sdValue']
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SdAvatar };
+export { SdView };
 //# sourceMappingURL=sd-angular-core-components-view.mjs.map

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 { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'sd-view',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './view.component.html',\r\n  styleUrls: ['./view.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class SdAvatar implements OnInit {\r\n  @Input({ required: true }) src: string | undefined | null;\r\n  @Input() size: number = 32;\r\n\r\n  isUrl: boolean = false;\r\n  initials: string = '';\r\n  bgColor: string = '#ccc';\r\n\r\n  ngOnInit(): void {\r\n    this.#init();\r\n  }\r\n\r\n  #init = () => {\r\n    if (!this.src) {\r\n      this.isUrl = false;\r\n      this.initials = '?';\r\n      this.bgColor = '#bdc3c7';\r\n      return;\r\n    }\r\n    // Kiểm tra xem src có phải là URL (http, https, data:image, hoặc path /)\r\n    const urlPattern = /^(http|https|data:image|\\/)/;\r\n    this.isUrl = urlPattern.test(this.src);\r\n    if (!this.isUrl) {\r\n      this.initials = this.#getInitials(this.src);\r\n      this.bgColor = this.#generateColor(this.src);\r\n    }\r\n  };\r\n\r\n  handleError() {\r\n    this.src = undefined; // Nếu ảnh lỗi, chuyển sang hiển thị initials\r\n    this.#init();\r\n  }\r\n\r\n  #getInitials = (name: string): string => {\r\n    return name\r\n      .trim()\r\n      .split(' ')\r\n      .map(n => n[0])\r\n      .join('')\r\n      .toUpperCase()\r\n      .substring(0, 2);\r\n  };\r\n\r\n  #generateColor = (name: string): string => {\r\n    const colors = [\r\n      '#1abc9c',\r\n      '#2ecc71',\r\n      '#3498db',\r\n      '#9b59b6',\r\n      '#34495e',\r\n      '#16a085',\r\n      '#27ae60',\r\n      '#2980b9',\r\n      '#8e44ad',\r\n      '#2c3e50',\r\n      '#f1c40f',\r\n      '#e67e22',\r\n      '#e74c3c',\r\n      '#95a5a6',\r\n      '#f39c12',\r\n      '#d35400',\r\n      '#c0392b',\r\n      '#bdc3c7',\r\n      '#7f8c8d',\r\n    ];\r\n    let hash = 0;\r\n    for (let i = 0; i < name.length; i++) {\r\n      hash = name.charCodeAt(i) + ((hash << 5) - hash);\r\n    }\r\n    return colors[Math.abs(hash) % colors.length];\r\n  };\r\n}\r\n","<div class=\"sd-avatar\" [style.width.px]=\"size\" [style.height.px]=\"size\" [style.line-height.px]=\"size\" [style.backgroundColor]=\"bgColor\">\r\n  @if (isUrl) {\r\n    <img [src]=\"src\" (error)=\"handleError()\" alt=\"avatar\" />\r\n  } @else {\r\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size / 2.5\">\r\n      {{ initials }}\r\n    </span>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,QAAQ,CAAA;AACQ,IAAA,GAAG;IACrB,IAAI,GAAW,EAAE;IAE1B,KAAK,GAAY,KAAK;IACtB,QAAQ,GAAW,EAAE;IACrB,OAAO,GAAW,MAAM;IAExB,QAAQ,GAAA;QACN,IAAI,CAAC,KAAK,EAAE;IACd;IAEA,KAAK,GAAG,MAAK;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;AACb,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,QAAQ,GAAG,GAAG;AACnB,YAAA,IAAI,CAAC,OAAO,GAAG,SAAS;YACxB;QACF;;QAEA,MAAM,UAAU,GAAG,6BAA6B;QAChD,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AACtC,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;QAC9C;AACF,IAAA,CAAC;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;QACrB,IAAI,CAAC,KAAK,EAAE;IACd;AAEA,IAAA,YAAY,GAAG,CAAC,IAAY,KAAY;AACtC,QAAA,OAAO;AACJ,aAAA,IAAI;aACJ,KAAK,CAAC,GAAG;aACT,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aACb,IAAI,CAAC,EAAE;AACP,aAAA,WAAW;AACX,aAAA,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;AACpB,IAAA,CAAC;AAED,IAAA,cAAc,GAAG,CAAC,IAAY,KAAY;AACxC,QAAA,MAAM,MAAM,GAAG;YACb,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;YACT,SAAS;SACV;QACD,IAAI,IAAI,GAAG,CAAC;AACZ,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACpC,YAAA,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC;QAClD;AACA,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;AAC/C,IAAA,CAAC;wGAtEU,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrB,kYASA,EAAA,MAAA,EAAA,CAAA,iQAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDHY,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAKX,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;+BACE,SAAS,EAAA,UAAA,EACP,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,eAAA,EAGN,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,kYAAA,EAAA,MAAA,EAAA,CAAA,iQAAA,CAAA,EAAA;8BAGpB,GAAG,EAAA,CAAA;sBAA7B,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAChB,IAAI,EAAA,CAAA;sBAAZ;;;AEbH;;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 { 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;;;;"}

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

@@ -15,6 +15,7 @@ export * from '@sd-angular/core/components/query-builder';
 export * from '@sd-angular/core/components/import-excel';
 export * from '@sd-angular/core/components/document-builder';
 export * from '@sd-angular/core/components/mini-editor';
+export * from '@sd-angular/core/components/view';
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-components.mjs","sources":["../../../projects/sd-angular/components/sd-angular-core-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AAEG"}
+{"version":3,"file":"sd-angular-core-components.mjs","sources":["../../../projects/sd-angular/components/sd-angular-core-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}

package/fesm2022/sd-angular-core-forms-autocomplete.mjs

@@ -16,13 +16,13 @@ import * as i7 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { SdItemDefDefDirective, SdLabelDefDirective, SdViewDefDirective } from '@sd-angular/core/forms/directives';
+import { SdItemDefDefDirective, SdViewDefDirective } from '@sd-angular/core/forms/directives';
 import { SdFormControl, HandleSdCustomValidator, SD_FORM_CONFIGURATION } from '@sd-angular/core/forms/models';
 import { ArrayUtilities, SdUtilities } from '@sd-angular/core/utilities/extensions';
+import { SdView } from '@sd-angular/core/components/view';
+import { SdLabel } from '@sd-angular/core/forms/label';
 import { BehaviorSubject, Subscription, combineLatest, of, defer, from } from 'rxjs';
 import * as uuid from 'uuid';
-import { SdLabel } from '@sd-angular/core/forms/label';
-import { SdEmptyPipe } from '@sd-angular/core/pipes';
 
 /* eslint-disable @angular-eslint/component-class-suffix */
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -40,6 +40,8 @@ class SdAutocompleteErrotStateMatcher {
 class SdAutocomplete {
     ref;
     formConfig;
+    sdLabelTemplate;
+    sdValueTemplate;
     id = `I${uuid.v4()}`;
     autoId;
     set _autoId(val) {
@@ -124,7 +126,6 @@ class SdAutocomplete {
         this.addable = addable === '' || !!addable;
     }
     itemDef;
-    sdLabelDef;
     modelChange = new EventEmitter();
     sdChange = new EventEmitter();
     sdSelection = new EventEmitter();
@@ -404,7 +405,7 @@ class SdAutocomplete {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAutocomplete, deps: [{ token: i0.ChangeDetectorRef }, { token: SD_FORM_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAutocomplete, isStandalone: true, selector: "sd-autocomplete", inputs: { _autoId: ["autoId", "_autoId"], name: "name", appearance: "appearance", size: "size", form: "form", _label: ["label", "_label"], _helperText: ["helperText", "_helperText"], valueField: "valueField", displayField: "displayField", disabledField: "disabledField", placeholder: "placeholder", items: "items", limit: "limit", cacheChecksum: "cacheChecksum", model: "model", _addable: ["addable", "_addable"], disabled: "disabled", _viewed: ["viewed", "_viewed"], hyperlink: "hyperlink", _required: ["required", "_required"], _validator: ["validator", "_validator"], _inlineError: ["inlineError", "_inlineError"], _hideInlineError: ["hideInlineError", "_hideInlineError"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange", sdSelection: "sdSelection", sdAdd: "sdAdd" }, queries: [{ propertyName: "itemDef", first: true, predicate: SdItemDefDefDirective, descendants: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, read: MatAutocompleteTrigger }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (viewed) {\r\n  @if (sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef!.templateRef\"> </ng-container>\r\n  } @else if (label) {\r\n    <div class=\"T14R text-black400\">{{ label }}</div>\r\n  }\r\n  @if (hyperlink) {\r\n    <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n    <a [href]=\"hyperlink\">{{ display | async }}</a>\r\n  } @else {\r\n    <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n    <div class=\"T14M\">{{ display | async | sdEmpty }}</div>\r\n  }\r\n} @else {\r\n  @if (!appearance && sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef?.templateRef!\"> </ng-container>\r\n  }\r\n  @if (!appearance && label && !sdLabelDef?.templateRef) {\r\n    <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n  }\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"sdViewDef?.templateRef\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\"\r\n    (click)=\"onClick()\"\r\n    aria-hidden=\"true\">\r\n    @if (sdViewDef?.templateRef && !autocompleteTrigger?.panelOpen && !isFocused) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          sdViewDef!.templateRef;\r\n          context: {\r\n            value: formControl.value,\r\n            selectedItem: selected | async,\r\n          }\r\n        \">\r\n      </ng-container>\r\n    } @else {\r\n      <mat-form-field\r\n        [class.sd-md]=\"size === 'md'\"\r\n        [class.sd-sm]=\"size === 'sm'\"\r\n        [class.hide-inline-error]=\"hideInlineError\"\r\n        [floatLabel]=\"formControl.value ? 'always' : 'auto'\"\r\n        [appearance]=\"appearance || 'outline'\">\r\n        @if (appearance && label) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ label }}</span>\r\n              @if (helperText) {\r\n                <mat-icon [matTooltip]=\"helperText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n        <input\r\n          [id]=\"id\"\r\n          [formControl]=\"inputControl\"\r\n          [placeholder]=\"(controlPlaceHolder | async) || ''\"\r\n          [class.c-selected]=\"formControl.value\"\r\n          [matAutocomplete]=\"auto\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          matInput\r\n          [autocomplete]=\"id\"\r\n          autocorrect=\"off\"\r\n          [errorStateMatcher]=\"matcher\"\r\n          [required]=\"required\"\r\n          #input\r\n          #autocompleteTrigger\r\n          [attr.data-autoId]=\"autoId\"\r\n          aria-hidden=\"true\" />\r\n        @if (!loading && formControl.value && !inputControl.disabled) {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel</mat-icon>\r\n        } @else if (loading) {\r\n          <mat-spinner [diameter]=\"20\" matSuffix></mat-spinner>\r\n        } @else {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" matSuffix>search</mat-icon>\r\n        }\r\n        <!-- <i [class.d-none]=\"!loading\" class=\"fa fa-spinner fa-pulse c-loading-icon\"></i> -->\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\" class=\"sd-autocomplete-panel\">\r\n          @let items = filteredItems | async;\r\n          @if (items?.length) {\r\n            <mat-option\r\n              *ngFor=\"let item of items\"\r\n              [value]=\"item\"\r\n              matTooltipPosition=\"above\"\r\n              [matTooltip]=\"displayField ? item[displayField] : item\"\r\n              [disabled]=\"item[disabledField]\">\r\n              <ng-container *ngIf=\"itemDef?.templateRef\">\r\n                <ng-container *ngTemplateOutlet=\"itemDef?.templateRef ?? null; context: { item: item }\"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!itemDef?.templateRef\">\r\n                {{ displayField ? item[displayField] : item }}\r\n              </ng-container>\r\n            </mat-option>\r\n          } @else if (!items?.length && inputControl.value && !isTyping && !loading) {}\r\n          @if (addable && sdAdd.observers.length) {\r\n            <mat-option class=\"sd__option--add\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n              <div (click)=\"onAdd($event)\">\r\n                <mat-icon class=\"mr-1\">add</mat-icon>\r\n                {{ 'New item' }}\r\n              </div>\r\n            </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n        @if (formControl.errors?.['required']) {\r\n          <mat-error>\r\n            @if (!hideInlineError) {\r\n              Vui l\u00F2ng nh\u1EADp th\u00F4ng tin\r\n            }\r\n          </mat-error>\r\n        }\r\n        @if (formControl.errors?.['customValidator']) {\r\n          <mat-error>\r\n            @if (!hideInlineError) {\r\n              {{ formControl.errors?.['customValidator'] }}\r\n            }\r\n          </mat-error>\r\n        }\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{padding-top:5px;display:block}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-black100)}:host ::ng-deep .mat-mdc-form-field input.c-selected::placeholder{color:#000;opacity:1}:host ::ng-deep .mat-mdc-form-field input.c-selected:-ms-input-placeholder{color:#000}:host ::ng-deep .mat-mdc-form-field input.c-selected::-ms-input-placeholder{color:#000}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected::placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected:-ms-input-placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected::-ms-input-placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field:hover .icon-copy{opacity:1}:host ::ng-deep .mat-mdc-form-field .icon-copy{cursor:pointer;width:.9em;height:.9em;fill:#00000080;transition:opacity .2s linear;opacity:0}::ng-deep .sd-autocomplete-panel .mat-mdc-option{min-height:36px!important;height:36px!important;padding-left:12px!important;padding-right:12px!important}::ng-deep .sd-autocomplete-panel .mdc-list-item__primary-text{font-size:14px!important;line-height:normal}::ng-deep .sd-autocomplete-panel .mat-pseudo-checkbox{transform:scale(.75);margin-right:8px!important}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.sd__option--add{position:sticky;bottom:0;background-color:#fff;z-index:10;color:#000000de;cursor:pointer!important}.c-loading-icon{position:absolute;right:5px;top:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "pipe", type: SdEmptyPipe, name: "sdEmpty" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAutocomplete, isStandalone: true, selector: "sd-autocomplete", inputs: { _autoId: ["autoId", "_autoId"], name: "name", appearance: "appearance", size: "size", form: "form", _label: ["label", "_label"], _helperText: ["helperText", "_helperText"], valueField: "valueField", displayField: "displayField", disabledField: "disabledField", placeholder: "placeholder", items: "items", limit: "limit", cacheChecksum: "cacheChecksum", model: "model", _addable: ["addable", "_addable"], disabled: "disabled", _viewed: ["viewed", "_viewed"], hyperlink: "hyperlink", _required: ["required", "_required"], _validator: ["validator", "_validator"], _inlineError: ["inlineError", "_inlineError"], _hideInlineError: ["hideInlineError", "_hideInlineError"] }, outputs: { modelChange: "modelChange", sdChange: "sdChange", sdSelection: "sdSelection", sdAdd: "sdAdd" }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true }, { propertyName: "itemDef", first: true, predicate: SdItemDefDefDirective, descendants: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, read: MatAutocompleteTrigger }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (viewed) {\r\n  <sd-view\r\n    [label]=\"label\"\r\n    [labelTemplate]=\"sdLabelTemplate\"\r\n    [value]=\"formControl.value\"\r\n    [display]=\"display | async\"\r\n    [hyperlink]=\"hyperlink\"\r\n    [valueTemplate]=\"sdValueTemplate\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!appearance) {\r\n    <ng-content select=\"[sdLabel]\">\r\n      @if (label) {\r\n        <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n      }\r\n    </ng-content>\r\n  }\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"sdViewDef?.templateRef\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\"\r\n    (click)=\"onClick()\"\r\n    aria-hidden=\"true\">\r\n    @if (sdViewDef?.templateRef && !autocompleteTrigger?.panelOpen && !isFocused) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          sdViewDef!.templateRef;\r\n          context: {\r\n            value: formControl.value,\r\n            selectedItem: selected | async,\r\n          }\r\n        \">\r\n      </ng-container>\r\n    } @else {\r\n      <mat-form-field\r\n        [class.sd-md]=\"size === 'md'\"\r\n        [class.sd-sm]=\"size === 'sm'\"\r\n        [class.hide-inline-error]=\"hideInlineError\"\r\n        [floatLabel]=\"formControl.value ? 'always' : 'auto'\"\r\n        [appearance]=\"appearance || 'outline'\">\r\n        @if (appearance && label) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ label }}</span>\r\n              @if (helperText) {\r\n                <mat-icon [matTooltip]=\"helperText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n        <input\r\n          [id]=\"id\"\r\n          [formControl]=\"inputControl\"\r\n          [placeholder]=\"(controlPlaceHolder | async) || ''\"\r\n          [class.c-selected]=\"formControl.value\"\r\n          [matAutocomplete]=\"auto\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          matInput\r\n          [autocomplete]=\"id\"\r\n          autocorrect=\"off\"\r\n          [errorStateMatcher]=\"matcher\"\r\n          [required]=\"required\"\r\n          #input\r\n          #autocompleteTrigger\r\n          [attr.data-autoId]=\"autoId\"\r\n          aria-hidden=\"true\" />\r\n        @if (!loading && formControl.value && !inputControl.disabled) {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel</mat-icon>\r\n        } @else if (loading) {\r\n          <mat-spinner [diameter]=\"20\" matSuffix></mat-spinner>\r\n        } @else {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" matSuffix>search</mat-icon>\r\n        }\r\n        <!-- <i [class.d-none]=\"!loading\" class=\"fa fa-spinner fa-pulse c-loading-icon\"></i> -->\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\" class=\"sd-autocomplete-panel\">\r\n          @let items = filteredItems | async;\r\n          @if (items?.length) {\r\n            <mat-option\r\n              *ngFor=\"let item of items\"\r\n              [value]=\"item\"\r\n              matTooltipPosition=\"above\"\r\n              [matTooltip]=\"displayField ? item[displayField] : item\"\r\n              [disabled]=\"item[disabledField]\">\r\n              <ng-container *ngIf=\"itemDef?.templateRef\">\r\n                <ng-container *ngTemplateOutlet=\"itemDef?.templateRef ?? null; context: { item: item }\"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!itemDef?.templateRef\">\r\n                {{ displayField ? item[displayField] : item }}\r\n              </ng-container>\r\n            </mat-option>\r\n          } @else if (!items?.length && inputControl.value && !isTyping && !loading) {}\r\n          @if (addable && sdAdd.observers.length) {\r\n            <mat-option class=\"sd__option--add\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n              <div (click)=\"onAdd($event)\">\r\n                <mat-icon class=\"mr-1\">add</mat-icon>\r\n                {{ 'New item' }}\r\n              </div>\r\n            </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n        @if (formControl.errors?.['required']) {\r\n          <mat-error>\r\n            @if (!hideInlineError) {\r\n              Vui l\u00F2ng nh\u1EADp th\u00F4ng tin\r\n            }\r\n          </mat-error>\r\n        }\r\n        @if (formControl.errors?.['customValidator']) {\r\n          <mat-error>\r\n            @if (!hideInlineError) {\r\n              {{ formControl.errors?.['customValidator'] }}\r\n            }\r\n          </mat-error>\r\n        }\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{padding-top:5px;display:block}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-black100)}:host ::ng-deep .mat-mdc-form-field input.c-selected::placeholder{color:#000;opacity:1}:host ::ng-deep .mat-mdc-form-field input.c-selected:-ms-input-placeholder{color:#000}:host ::ng-deep .mat-mdc-form-field input.c-selected::-ms-input-placeholder{color:#000}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected::placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected:-ms-input-placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected::-ms-input-placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field:hover .icon-copy{opacity:1}:host ::ng-deep .mat-mdc-form-field .icon-copy{cursor:pointer;width:.9em;height:.9em;fill:#00000080;transition:opacity .2s linear;opacity:0}::ng-deep .sd-autocomplete-panel .mat-mdc-option{min-height:36px!important;height:36px!important;padding-left:12px!important;padding-right:12px!important}::ng-deep .sd-autocomplete-panel .mdc-list-item__primary-text{font-size:14px!important;line-height:normal}::ng-deep .sd-autocomplete-panel .mat-pseudo-checkbox{transform:scale(.75);margin-right:8px!important}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.sd__option--add{position:sticky;bottom:0;background-color:#fff;z-index:10;color:#000000de;cursor:pointer!important}.c-loading-icon{position:absolute;right:5px;top:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAutocomplete, decorators: [{
             type: Component,
@@ -419,14 +420,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         MatIconModule,
                         MatProgressSpinnerModule,
                         SdLabel,
-                        SdEmptyPipe
-                    ], template: "@if (viewed) {\r\n  @if (sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef!.templateRef\"> </ng-container>\r\n  } @else if (label) {\r\n    <div class=\"T14R text-black400\">{{ label }}</div>\r\n  }\r\n  @if (hyperlink) {\r\n    <!-- N\u1EBFu c\u00F3 hyperlink th\u00EC d\u00F9ng th\u1EBB a -->\r\n    <a [href]=\"hyperlink\">{{ display | async }}</a>\r\n  } @else {\r\n    <!-- Ngo\u00E0i ra d\u00F9ng th\u1EBB m\u1EB7c \u0111\u1ECBnh -->\r\n    <div class=\"T14M\">{{ display | async | sdEmpty }}</div>\r\n  }\r\n} @else {\r\n  @if (!appearance && sdLabelDef?.templateRef) {\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef?.templateRef!\"> </ng-container>\r\n  }\r\n  @if (!appearance && label && !sdLabelDef?.templateRef) {\r\n    <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n  }\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"sdViewDef?.templateRef\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\"\r\n    (click)=\"onClick()\"\r\n    aria-hidden=\"true\">\r\n    @if (sdViewDef?.templateRef && !autocompleteTrigger?.panelOpen && !isFocused) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          sdViewDef!.templateRef;\r\n          context: {\r\n            value: formControl.value,\r\n            selectedItem: selected | async,\r\n          }\r\n        \">\r\n      </ng-container>\r\n    } @else {\r\n      <mat-form-field\r\n        [class.sd-md]=\"size === 'md'\"\r\n        [class.sd-sm]=\"size === 'sm'\"\r\n        [class.hide-inline-error]=\"hideInlineError\"\r\n        [floatLabel]=\"formControl.value ? 'always' : 'auto'\"\r\n        [appearance]=\"appearance || 'outline'\">\r\n        @if (appearance && label) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ label }}</span>\r\n              @if (helperText) {\r\n                <mat-icon [matTooltip]=\"helperText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n        <input\r\n          [id]=\"id\"\r\n          [formControl]=\"inputControl\"\r\n          [placeholder]=\"(controlPlaceHolder | async) || ''\"\r\n          [class.c-selected]=\"formControl.value\"\r\n          [matAutocomplete]=\"auto\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          matInput\r\n          [autocomplete]=\"id\"\r\n          autocorrect=\"off\"\r\n          [errorStateMatcher]=\"matcher\"\r\n          [required]=\"required\"\r\n          #input\r\n          #autocompleteTrigger\r\n          [attr.data-autoId]=\"autoId\"\r\n          aria-hidden=\"true\" />\r\n        @if (!loading && formControl.value && !inputControl.disabled) {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel</mat-icon>\r\n        } @else if (loading) {\r\n          <mat-spinner [diameter]=\"20\" matSuffix></mat-spinner>\r\n        } @else {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" matSuffix>search</mat-icon>\r\n        }\r\n        <!-- <i [class.d-none]=\"!loading\" class=\"fa fa-spinner fa-pulse c-loading-icon\"></i> -->\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\" class=\"sd-autocomplete-panel\">\r\n          @let items = filteredItems | async;\r\n          @if (items?.length) {\r\n            <mat-option\r\n              *ngFor=\"let item of items\"\r\n              [value]=\"item\"\r\n              matTooltipPosition=\"above\"\r\n              [matTooltip]=\"displayField ? item[displayField] : item\"\r\n              [disabled]=\"item[disabledField]\">\r\n              <ng-container *ngIf=\"itemDef?.templateRef\">\r\n                <ng-container *ngTemplateOutlet=\"itemDef?.templateRef ?? null; context: { item: item }\"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!itemDef?.templateRef\">\r\n                {{ displayField ? item[displayField] : item }}\r\n              </ng-container>\r\n            </mat-option>\r\n          } @else if (!items?.length && inputControl.value && !isTyping && !loading) {}\r\n          @if (addable && sdAdd.observers.length) {\r\n            <mat-option class=\"sd__option--add\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n              <div (click)=\"onAdd($event)\">\r\n                <mat-icon class=\"mr-1\">add</mat-icon>\r\n                {{ 'New item' }}\r\n              </div>\r\n            </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n        @if (formControl.errors?.['required']) {\r\n          <mat-error>\r\n            @if (!hideInlineError) {\r\n              Vui l\u00F2ng nh\u1EADp th\u00F4ng tin\r\n            }\r\n          </mat-error>\r\n        }\r\n        @if (formControl.errors?.['customValidator']) {\r\n          <mat-error>\r\n            @if (!hideInlineError) {\r\n              {{ formControl.errors?.['customValidator'] }}\r\n            }\r\n          </mat-error>\r\n        }\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{padding-top:5px;display:block}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-black100)}:host ::ng-deep .mat-mdc-form-field input.c-selected::placeholder{color:#000;opacity:1}:host ::ng-deep .mat-mdc-form-field input.c-selected:-ms-input-placeholder{color:#000}:host ::ng-deep .mat-mdc-form-field input.c-selected::-ms-input-placeholder{color:#000}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected::placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected:-ms-input-placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected::-ms-input-placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field:hover .icon-copy{opacity:1}:host ::ng-deep .mat-mdc-form-field .icon-copy{cursor:pointer;width:.9em;height:.9em;fill:#00000080;transition:opacity .2s linear;opacity:0}::ng-deep .sd-autocomplete-panel .mat-mdc-option{min-height:36px!important;height:36px!important;padding-left:12px!important;padding-right:12px!important}::ng-deep .sd-autocomplete-panel .mdc-list-item__primary-text{font-size:14px!important;line-height:normal}::ng-deep .sd-autocomplete-panel .mat-pseudo-checkbox{transform:scale(.75);margin-right:8px!important}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.sd__option--add{position:sticky;bottom:0;background-color:#fff;z-index:10;color:#000000de;cursor:pointer!important}.c-loading-icon{position:absolute;right:5px;top:5px}\n"] }]
+                        SdView
+                    ], template: "@if (viewed) {\r\n  <sd-view\r\n    [label]=\"label\"\r\n    [labelTemplate]=\"sdLabelTemplate\"\r\n    [value]=\"formControl.value\"\r\n    [display]=\"display | async\"\r\n    [hyperlink]=\"hyperlink\"\r\n    [valueTemplate]=\"sdValueTemplate\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!appearance) {\r\n    <ng-content select=\"[sdLabel]\">\r\n      @if (label) {\r\n        <sd-label [label]=\"label\" [required]=\"required\"></sd-label>\r\n      }\r\n    </ng-content>\r\n  }\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"sdViewDef?.templateRef\"\r\n    [class.c-focused]=\"isFocused\"\r\n    [class.c-disabled]=\"formControl.disabled\"\r\n    (click)=\"onClick()\"\r\n    aria-hidden=\"true\">\r\n    @if (sdViewDef?.templateRef && !autocompleteTrigger?.panelOpen && !isFocused) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          sdViewDef!.templateRef;\r\n          context: {\r\n            value: formControl.value,\r\n            selectedItem: selected | async,\r\n          }\r\n        \">\r\n      </ng-container>\r\n    } @else {\r\n      <mat-form-field\r\n        [class.sd-md]=\"size === 'md'\"\r\n        [class.sd-sm]=\"size === 'sm'\"\r\n        [class.hide-inline-error]=\"hideInlineError\"\r\n        [floatLabel]=\"formControl.value ? 'always' : 'auto'\"\r\n        [appearance]=\"appearance || 'outline'\">\r\n        @if (appearance && label) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ label }}</span>\r\n              @if (helperText) {\r\n                <mat-icon [matTooltip]=\"helperText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n        <input\r\n          [id]=\"id\"\r\n          [formControl]=\"inputControl\"\r\n          [placeholder]=\"(controlPlaceHolder | async) || ''\"\r\n          [class.c-selected]=\"formControl.value\"\r\n          [matAutocomplete]=\"auto\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur()\"\r\n          matInput\r\n          [autocomplete]=\"id\"\r\n          autocorrect=\"off\"\r\n          [errorStateMatcher]=\"matcher\"\r\n          [required]=\"required\"\r\n          #input\r\n          #autocompleteTrigger\r\n          [attr.data-autoId]=\"autoId\"\r\n          aria-hidden=\"true\" />\r\n        @if (!loading && formControl.value && !inputControl.disabled) {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel</mat-icon>\r\n        } @else if (loading) {\r\n          <mat-spinner [diameter]=\"20\" matSuffix></mat-spinner>\r\n        } @else {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" matSuffix>search</mat-icon>\r\n        }\r\n        <!-- <i [class.d-none]=\"!loading\" class=\"fa fa-spinner fa-pulse c-loading-icon\"></i> -->\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\" class=\"sd-autocomplete-panel\">\r\n          @let items = filteredItems | async;\r\n          @if (items?.length) {\r\n            <mat-option\r\n              *ngFor=\"let item of items\"\r\n              [value]=\"item\"\r\n              matTooltipPosition=\"above\"\r\n              [matTooltip]=\"displayField ? item[displayField] : item\"\r\n              [disabled]=\"item[disabledField]\">\r\n              <ng-container *ngIf=\"itemDef?.templateRef\">\r\n                <ng-container *ngTemplateOutlet=\"itemDef?.templateRef ?? null; context: { item: item }\"> </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!itemDef?.templateRef\">\r\n                {{ displayField ? item[displayField] : item }}\r\n              </ng-container>\r\n            </mat-option>\r\n          } @else if (!items?.length && inputControl.value && !isTyping && !loading) {}\r\n          @if (addable && sdAdd.observers.length) {\r\n            <mat-option class=\"sd__option--add\" (keyup.Space)=\"$event.stopPropagation()\" disabled=\"true\">\r\n              <div (click)=\"onAdd($event)\">\r\n                <mat-icon class=\"mr-1\">add</mat-icon>\r\n                {{ 'New item' }}\r\n              </div>\r\n            </mat-option>\r\n          }\r\n        </mat-autocomplete>\r\n        @if (formControl.errors?.['required']) {\r\n          <mat-error>\r\n            @if (!hideInlineError) {\r\n              Vui l\u00F2ng nh\u1EADp th\u00F4ng tin\r\n            }\r\n          </mat-error>\r\n        }\r\n        @if (formControl.errors?.['customValidator']) {\r\n          <mat-error>\r\n            @if (!hideInlineError) {\r\n              {{ formControl.errors?.['customValidator'] }}\r\n            }\r\n          </mat-error>\r\n        }\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{padding-top:5px;display:block}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-black100)}:host ::ng-deep .mat-mdc-form-field input.c-selected::placeholder{color:#000;opacity:1}:host ::ng-deep .mat-mdc-form-field input.c-selected:-ms-input-placeholder{color:#000}:host ::ng-deep .mat-mdc-form-field input.c-selected::-ms-input-placeholder{color:#000}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected::placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected:-ms-input-placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled.c-selected::-ms-input-placeholder{color:var(--sd-black400)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}:host ::ng-deep .mat-mdc-form-field:hover .icon-copy{opacity:1}:host ::ng-deep .mat-mdc-form-field .icon-copy{cursor:pointer;width:.9em;height:.9em;fill:#00000080;transition:opacity .2s linear;opacity:0}::ng-deep .sd-autocomplete-panel .mat-mdc-option{min-height:36px!important;height:36px!important;padding-left:12px!important;padding-right:12px!important}::ng-deep .sd-autocomplete-panel .mdc-list-item__primary-text{font-size:14px!important;line-height:normal}::ng-deep .sd-autocomplete-panel .mat-pseudo-checkbox{transform:scale(.75);margin-right:8px!important}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.sd__option--add{position:sticky;bottom:0;background-color:#fff;z-index:10;color:#000000de;cursor:pointer!important}.c-loading-icon{position:absolute;right:5px;top:5px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SD_FORM_CONFIGURATION]
                 }, {
                     type: Optional
-                }] }], propDecorators: { _autoId: [{
+                }] }], propDecorators: { sdLabelTemplate: [{
+                type: ContentChild,
+                args: ['sdLabel']
+            }], sdValueTemplate: [{
+                type: ContentChild,
+                args: ['sdValue']
+            }], _autoId: [{
                 type: Input,
                 args: ['autoId']
             }], autocompleteTrigger: [{
@@ -468,9 +475,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }], itemDef: [{
                 type: ContentChild,
                 args: [SdItemDefDefDirective]
-            }], sdLabelDef: [{
-                type: ContentChild,
-                args: [SdLabelDefDirective]
             }], modelChange: [{
                 type: Output
             }], sdChange: [{