npm - @sd-angular/core - Versions diffs - 19.0.0-beta.3 → 19.0.0-beta.30 - Mend

@sd-angular/core 19.0.0-beta.3 → 19.0.0-beta.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

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

@@ -1,3 +1,4 @@
+export * from '@sd-angular/core/components/avatar';
 export * from '@sd-angular/core/components/button';
 export * from '@sd-angular/core/components/badge';
 export * from '@sd-angular/core/components/tab-router';
@@ -13,6 +14,8 @@ export * from '@sd-angular/core/components/anchor-v2';
 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 CHANGED Viewed

	@@ -1 +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"}
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"}

package/fesm2022/sd-angular-core-directives.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { HostListener, Directive, Input } from '@angular/core';
+import { HostListener, Directive, Input, inject, HostBinding } from '@angular/core';
 import { SdUtilities } from '@sd-angular/core/utilities/extensions';
+import { Router } from '@angular/router';
 class SdScrollDirective {
     elementRef;
@@ -95,36 +96,45 @@ class SdHoverCopyDirective {
     renderer;
     copyText;
     sdHoverCopyDisabled = false;
-    #copyButton;
+    #copyButton = null;
     #tooltip;
     #defaultTooltip = 'Sao chép';
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
     }
+    // https://onemount.atlassian.net/browse/SM-2287
+    // Hiện tại khi sdHoverCopyDisabled = true, directive chỉ dùng opacity: 0 và pointerEvents: 'none' để ẩn nút, nhưng điều này không hoàn toàn ngăn chặn được việc click trong một số trường hợp.
+    // Giải pháp: Remove khỏi DOM nếu column không được enable
     ngOnInit() {
-        this.#initCopyButton();
+        if (!this.sdHoverCopyDisabled) {
+            this.#createAndAppendCopyButton();
+        }
     }
     ngOnChanges(changes) {
-        if (changes['sdHoverCopyDisabled'] && !changes['sdHoverCopyDisabled'].firstChange) {
+        if (changes['sdHoverCopyDisabled']) {
             if (!this.sdHoverCopyDisabled) {
-                this.#showCopyButton();
+                // Enable - create and show button if not exists
+                if (!this.#copyButton) {
+                    this.#createAndAppendCopyButton();
+                }
             }
             else {
-                this.#hideCopyButton();
+                // Disable - remove button from DOM
+                this.#removeCopyButton();
             }
         }
     }
-    #initCopyButton() {
+    #createAndAppendCopyButton() {
         const parent = this.el.nativeElement;
         this.renderer.setStyle(parent, 'position', 'relative');
         // Create button
         this.#copyButton = this.renderer.createElement('button');
         this.renderer.setStyle(this.#copyButton, 'position', 'absolute');
-        this.renderer.setStyle(this.#copyButton, 'top', '0');
+        this.renderer.setStyle(this.#copyButton, 'top', '50%');
+        this.renderer.setStyle(this.#copyButton, 'transform', 'translateY(-50%)');
         this.renderer.setStyle(this.#copyButton, 'right', '4px');
-        this.renderer.setStyle(this.#copyButton, 'opacity', '0');
-        this.renderer.setStyle(this.#copyButton, 'transition', 'opacity 0.2s');
+        this.renderer.setStyle(this.#copyButton, 'display', 'none');
         this.renderer.setStyle(this.#copyButton, 'z-index', '10');
         this.renderer.setStyle(this.#copyButton, 'background', 'transparent');
         this.renderer.setStyle(this.#copyButton, 'border', 'none');
@@ -164,6 +174,7 @@ class SdHoverCopyDirective {
         this.renderer.setStyle(this.#tooltip, 'opacity', '0');
         this.renderer.setStyle(this.#tooltip, 'transition', 'opacity 0.2s');
         this.renderer.setStyle(this.#tooltip, 'pointerEvents', 'none');
+        this.renderer.setStyle(this.#tooltip, 'userSelect', 'none');
         this.renderer.appendChild(this.#copyButton, this.#tooltip);
         this.renderer.appendChild(parent, this.#copyButton);
         // Listen click
@@ -175,7 +186,12 @@ class SdHoverCopyDirective {
                 setTimeout(() => this.#hideTooltip(), 1000);
             }
         });
-        this.#hideCopyButton();
+    }
+    #removeCopyButton() {
+        if (this.#copyButton) {
+            this.renderer.removeChild(this.el.nativeElement, this.#copyButton);
+            this.#copyButton = null;
+        }
     }
     #showTooltip(message) {
         this.renderer.setProperty(this.#tooltip, 'innerText', message);
@@ -186,25 +202,14 @@ class SdHoverCopyDirective {
         this.renderer.setStyle(this.#tooltip, 'opacity', '0');
     }
     onMouseEnter() {
-        if (!this.sdHoverCopyDisabled) {
-            this.renderer.setStyle(this.#copyButton, 'opacity', '1');
-            this.renderer.setStyle(this.#copyButton, 'pointerEvents', 'auto');
+        if (!this.sdHoverCopyDisabled && this.#copyButton) {
+            this.renderer.setStyle(this.#copyButton, 'display', 'block');
         }
     }
     onMouseLeave() {
-        this.renderer.setStyle(this.#copyButton, 'opacity', '0');
-        this.#hideTooltip();
-    }
-    #hideCopyButton() {
-        if (this.#copyButton) {
-            this.renderer.setStyle(this.#copyButton, 'opacity', '0');
-            this.renderer.setStyle(this.#copyButton, 'pointerEvents', 'none');
-        }
-    }
-    #showCopyButton() {
         if (this.#copyButton) {
-            this.renderer.setStyle(this.#copyButton, 'opacity', '1');
-            this.renderer.setStyle(this.#copyButton, 'pointerEvents', 'auto');
+            this.renderer.setStyle(this.#copyButton, 'display', 'none');
+            this.#hideTooltip();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdHoverCopyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
@@ -228,9 +233,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['mouseleave']
             }] } });
+class SdHrefDirective {
+    #router = inject(Router);
+    // Nhận vào url đã được xử lý (từ Pipe của bạn)
+    url;
+    // Tự động bind giá trị url vào thuộc tính href của thẻ <a>
+    get href() {
+        return this.url || 'javascript:;';
+    }
+    onClick(event) {
+        if (!this.url)
+            return;
+        if (this.url.startsWith('http')) {
+            // Nếu là link ngoài -> Mở tab mới và ngăn chặn hành vi mặc định của thẻ a (để không chuyển trang hiện tại)
+            window.open(this.url, '_blank');
+            event.preventDefault();
+        }
+        else {
+            // Nếu là link nội bộ -> Ngăn chặn full-page reload, dùng Angular Router để điều hướng
+            event.preventDefault();
+            const [path, queryString] = this.url.split('?');
+            // Bạn có thể dùng hàm SdUtilities.parseQueryParams của bạn ở đây,
+            // hoặc dùng cách native URLSearchParams như sau:
+            const params = new URLSearchParams(queryString || '');
+            const queryParams = {};
+            params.forEach((value, key) => (queryParams[key] = value));
+            this.#router.navigate([path], { queryParams });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdHrefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SdHrefDirective, isStandalone: true, selector: "a[sdHref]", inputs: { url: ["sdHref", "url"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.href": "this.href" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdHrefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[sdHref]',
+                    standalone: true,
+                }]
+        }], propDecorators: { url: [{
+                type: Input,
+                args: ['sdHref']
+            }], href: [{
+                type: HostBinding,
+                args: ['attr.href']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 /**
  * Generated bundle index. Do not edit.
  */
-export { SdDesktopDirective, SdHoverCopyDirective, SdMobileDirective, SdScrollDirective };
+export { SdDesktopDirective, SdHoverCopyDirective, SdHrefDirective, SdMobileDirective, SdScrollDirective };
 //# sourceMappingURL=sd-angular-core-directives.mjs.map

package/fesm2022/sd-angular-core-directives.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-directives.mjs","sources":["../../../projects/sd-angular/directives/src/sd-scroll.directive.ts","../../../projects/sd-angular/directives/src/sd-desktop.directive.ts","../../../projects/sd-angular/directives/src/sd-mobile.directive.ts","../../../projects/sd-angular/directives/src/sd-hover-copy.directive.ts","../../../projects/sd-angular/directives/sd-angular-core-directives.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, OnInit, Renderer2 } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[sdScroll]',\r\n standalone: true,\r\n})\r\nexport class SdScrollDirective implements OnInit {\r\n #overflowX: 'hidden' \| 'auto' \| 'overlay' = 'hidden';\r\n #overflowY: 'hidden' \| 'auto' \| 'overlay' = 'auto';\r\n @HostListener('mouseover')\r\n onMouseOver() {\r\n this.#overflowX = 'auto';\r\n // this.#overflowY = 'auto';\r\n this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-x', this.#overflowX);\r\n // this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-y', this.#overflowY);\r\n }\r\n\r\n @HostListener('mouseout')\r\n onMouseOut() {\r\n this.#overflowX = 'hidden';\r\n this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-x', this.#overflowX);\r\n }\r\n constructor(\r\n private elementRef: ElementRef,\r\n private renderer: Renderer2\r\n ) {}\r\n\r\n ngOnInit(): void {\r\n this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-transform', 'translate3d(0, 0, 0)');\r\n this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-x', this.#overflowX);\r\n this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-y', this.#overflowY);\r\n }\r\n\r\n scrollTop = () => {\r\n setTimeout(() => {\r\n if (this.elementRef?.nativeElement) {\r\n this.elementRef.nativeElement.scrollTop = 0;\r\n }\r\n }, 1);\r\n };\r\n}\r\n","import { Directive, ViewContainerRef, TemplateRef } from '@angular/core';\nimport { SdUtilities } from '@sd-angular/core/utilities/extensions';\n\n@Directive({\n selector: '[sdDesktop]',\n})\nexport class SdDesktopDirective {\n constructor(\n private templateRef: TemplateRef<any>,\n private viewContainerRef: ViewContainerRef\n ) {\n if (!SdUtilities.isMobile()) {\n this.viewContainerRef.createEmbeddedView(this.templateRef);\n }\n }\n}\n","import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { SdUtilities } from '@sd-angular/core/utilities/extensions';\n\n@Directive({\n selector: '[sdMobile]',\n})\nexport class SdMobileDirective {\n constructor(\n private templateRef: TemplateRef<any>,\n private viewContainerRef: ViewContainerRef\n ) {\n if (SdUtilities.isMobile()) {\n this.viewContainerRef.createEmbeddedView(this.templateRef);\n }\n }\n}\n","import { Directive, ElementRef, Input, Renderer2, HostListener, OnInit, OnChanges, SimpleChanges } from '@angular/core';\r\nimport { SdUtilities } from '@sd-angular/core/utilities/extensions';\r\n\r\n@Directive({\r\n selector: '[sdHoverCopy]',\r\n})\r\nexport class SdHoverCopyDirective implements OnInit, OnChanges {\r\n @Input({ alias: 'sdHoverCopy', required: true }) copyText!: string;\r\n @Input() sdHoverCopyDisabled = false;\r\n\r\n #copyButton!: HTMLElement;\r\n #tooltip!: HTMLElement;\r\n #defaultTooltip = 'Sao chép';\r\n\r\n constructor(\r\n private el: ElementRef,\r\n private renderer: Renderer2\r\n ) {}\r\n\r\n ngOnInit(): void {\r\n this.#initCopyButton();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['sdHoverCopyDisabled'] && !changes['sdHoverCopyDisabled'].firstChange) {\r\n if (!this.sdHoverCopyDisabled) {\r\n this.#showCopyButton();\r\n } else {\r\n this.#hideCopyButton();\r\n }\r\n }\r\n }\r\n\r\n #initCopyButton(): void {\r\n const parent = this.el.nativeElement;\r\n this.renderer.setStyle(parent, 'position', 'relative');\r\n\r\n // Create button\r\n this.#copyButton = this.renderer.createElement('button');\r\n this.renderer.setStyle(this.#copyButton, 'position', 'absolute');\r\n this.renderer.setStyle(this.#copyButton, 'top', '0');\r\n this.renderer.setStyle(this.#copyButton, 'right', '4px');\r\n this.renderer.setStyle(this.#copyButton, 'opacity', '0');\r\n this.renderer.setStyle(this.#copyButton, 'transition', 'opacity 0.2s');\r\n this.renderer.setStyle(this.#copyButton, 'z-index', '10');\r\n this.renderer.setStyle(this.#copyButton, 'background', 'transparent');\r\n this.renderer.setStyle(this.#copyButton, 'border', 'none');\r\n this.renderer.setStyle(this.#copyButton, 'cursor', 'pointer');\r\n this.renderer.setStyle(this.#copyButton, 'padding', '1px');\r\n this.renderer.setStyle(this.#copyButton, 'border-radius', '3px');\r\n this.renderer.setStyle(this.#copyButton, 'padding', '5px');\r\n this.renderer.setStyle(this.#copyButton, 'line-height', '1');\r\n this.renderer.setStyle(this.#copyButton, 'background-color', 'var(--sd-black100)');\r\n \r\n\r\n // Add inline SVG icon\r\n const svg = this.renderer.createElement('svg', 'svg');\r\n this.renderer.addClass(svg, 'text-secondary');\r\n this.renderer.setAttribute(svg, 'width', '14');\r\n this.renderer.setAttribute(svg, 'height', '14');\r\n this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');\r\n this.renderer.setAttribute(svg, 'fill', 'none');\r\n this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');\r\n \r\n\r\n const path = this.renderer.createElement('path', 'svg');\r\n this.renderer.setAttribute(\r\n path,\r\n 'd',\r\n 'M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM20 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H20C21.1 23 22 22.1 22 21V7C22 5.9 21.1 5 20 5ZM20 21H8V7H20V21Z'\r\n );\r\n this.renderer.setAttribute(path, 'fill', 'currentColor');\r\n this.renderer.appendChild(svg, path);\r\n this.renderer.appendChild(this.#copyButton, svg);\r\n\r\n // Tooltip\r\n this.#tooltip = this.renderer.createElement('span');\r\n this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);\r\n this.renderer.setStyle(this.#tooltip, 'position', 'absolute');\r\n this.renderer.setStyle(this.#tooltip, 'bottom', '100%');\r\n this.renderer.setStyle(this.#tooltip, 'left', '50%');\r\n this.renderer.setStyle(this.#tooltip, 'transform', 'translateX(-50%)');\r\n this.renderer.setStyle(this.#tooltip, 'marginBottom', '4px');\r\n this.renderer.setStyle(this.#tooltip, 'background', '#333');\r\n this.renderer.setStyle(this.#tooltip, 'color', '#fff');\r\n this.renderer.setStyle(this.#tooltip, 'padding', '2px 6px');\r\n this.renderer.setStyle(this.#tooltip, 'borderRadius', '4px');\r\n this.renderer.setStyle(this.#tooltip, 'fontSize', '12px');\r\n this.renderer.setStyle(this.#tooltip, 'whiteSpace', 'nowrap');\r\n this.renderer.setStyle(this.#tooltip, 'opacity', '0');\r\n this.renderer.setStyle(this.#tooltip, 'transition', 'opacity 0.2s');\r\n this.renderer.setStyle(this.#tooltip, 'pointerEvents', 'none');\r\n\r\n this.renderer.appendChild(this.#copyButton, this.#tooltip);\r\n this.renderer.appendChild(parent, this.#copyButton);\r\n\r\n // Listen click\r\n this.renderer.listen(this.#copyButton, 'click', () => {\r\n console.log('click', this.copyText);\r\n if (this.copyText && !this.sdHoverCopyDisabled) {\r\n SdUtilities.copyToClipboard(String(this.copyText));\r\n this.#showTooltip('Copied');\r\n setTimeout(() => this.#hideTooltip(), 1000);\r\n }\r\n });\r\n\r\n this.#hideCopyButton();\r\n }\r\n\r\n #showTooltip(message: string) {\r\n this.renderer.setProperty(this.#tooltip, 'innerText', message);\r\n this.renderer.setStyle(this.#tooltip, 'opacity', '1');\r\n }\r\n\r\n #hideTooltip() {\r\n this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);\r\n this.renderer.setStyle(this.#tooltip, 'opacity', '0');\r\n }\r\n\r\n @HostListener('mouseenter')\r\n onMouseEnter() {\r\n if (!this.sdHoverCopyDisabled) {\r\n this.renderer.setStyle(this.#copyButton, 'opacity', '1');\r\n this.renderer.setStyle(this.#copyButton, 'pointerEvents', 'auto');\r\n }\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseLeave() {\r\n this.renderer.setStyle(this.#copyButton, 'opacity', '0');\r\n this.#hideTooltip();\r\n }\r\n\r\n #hideCopyButton(): void {\r\n if (this.#copyButton) {\r\n this.renderer.setStyle(this.#copyButton, 'opacity', '0');\r\n this.renderer.setStyle(this.#copyButton, 'pointerEvents', 'none');\r\n }\r\n }\r\n\r\n #showCopyButton(): void {\r\n if (this.#copyButton) {\r\n this.renderer.setStyle(this.#copyButton, 'opacity', '1');\r\n this.renderer.setStyle(this.#copyButton, 'pointerEvents', 'auto');\r\n }\r\n }\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-directives.mjs","sources":["../../../projects/sd-angular/directives/src/sd-scroll.directive.ts","../../../projects/sd-angular/directives/src/sd-desktop.directive.ts","../../../projects/sd-angular/directives/src/sd-mobile.directive.ts","../../../projects/sd-angular/directives/src/sd-hover-copy.directive.ts","../../../projects/sd-angular/directives/src/sd-href.directive.ts","../../../projects/sd-angular/directives/sd-angular-core-directives.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, OnInit, Renderer2 } from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[sdScroll]',\r\n standalone: true,\r\n})\r\nexport class SdScrollDirective implements OnInit {\r\n #overflowX: 'hidden' \| 'auto' \| 'overlay' = 'hidden';\r\n #overflowY: 'hidden' \| 'auto' \| 'overlay' = 'auto';\r\n @HostListener('mouseover')\r\n onMouseOver() {\r\n this.#overflowX = 'auto';\r\n // this.#overflowY = 'auto';\r\n this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-x', this.#overflowX);\r\n // this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-y', this.#overflowY);\r\n }\r\n\r\n @HostListener('mouseout')\r\n onMouseOut() {\r\n this.#overflowX = 'hidden';\r\n this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-x', this.#overflowX);\r\n }\r\n constructor(\r\n private elementRef: ElementRef,\r\n private renderer: Renderer2\r\n ) {}\r\n\r\n ngOnInit(): void {\r\n this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-transform', 'translate3d(0, 0, 0)');\r\n this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-x', this.#overflowX);\r\n this.renderer.setStyle(this.elementRef.nativeElement, 'overflow-y', this.#overflowY);\r\n }\r\n\r\n scrollTop = () => {\r\n setTimeout(() => {\r\n if (this.elementRef?.nativeElement) {\r\n this.elementRef.nativeElement.scrollTop = 0;\r\n }\r\n }, 1);\r\n };\r\n}\r\n","import { Directive, ViewContainerRef, TemplateRef } from '@angular/core';\nimport { SdUtilities } from '@sd-angular/core/utilities/extensions';\n\n@Directive({\n selector: '[sdDesktop]',\n})\nexport class SdDesktopDirective {\n constructor(\n private templateRef: TemplateRef<any>,\n private viewContainerRef: ViewContainerRef\n ) {\n if (!SdUtilities.isMobile()) {\n this.viewContainerRef.createEmbeddedView(this.templateRef);\n }\n }\n}\n","import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { SdUtilities } from '@sd-angular/core/utilities/extensions';\n\n@Directive({\n selector: '[sdMobile]',\n})\nexport class SdMobileDirective {\n constructor(\n private templateRef: TemplateRef<any>,\n private viewContainerRef: ViewContainerRef\n ) {\n if (SdUtilities.isMobile()) {\n this.viewContainerRef.createEmbeddedView(this.templateRef);\n }\n }\n}\n","import { Directive, ElementRef, Input, Renderer2, HostListener, OnInit, OnChanges, SimpleChanges } from '@angular/core';\r\nimport { SdUtilities } from '@sd-angular/core/utilities/extensions';\r\n\r\n@Directive({\r\n selector: '[sdHoverCopy]',\r\n})\r\nexport class SdHoverCopyDirective implements OnInit, OnChanges {\r\n @Input({ alias: 'sdHoverCopy', required: true }) copyText!: string;\r\n @Input() sdHoverCopyDisabled = false;\r\n\r\n #copyButton: HTMLElement \| null = null;\r\n #tooltip!: HTMLElement;\r\n #defaultTooltip = 'Sao chép';\r\n\r\n constructor(\r\n private el: ElementRef,\r\n private renderer: Renderer2\r\n ) {}\r\n\r\n // https://onemount.atlassian.net/browse/SM-2287\r\n // Hiện tại khi sdHoverCopyDisabled = true, directive chỉ dùng opacity: 0 và pointerEvents: 'none' để ẩn nút, nhưng điều này không hoàn toàn ngăn chặn được việc click trong một số trường hợp.\r\n // Giải pháp: Remove khỏi DOM nếu column không được enable\r\n ngOnInit(): void {\r\n if (!this.sdHoverCopyDisabled) {\r\n this.#createAndAppendCopyButton();\r\n }\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['sdHoverCopyDisabled']) {\r\n if (!this.sdHoverCopyDisabled) {\r\n // Enable - create and show button if not exists\r\n if (!this.#copyButton) {\r\n this.#createAndAppendCopyButton();\r\n }\r\n } else {\r\n // Disable - remove button from DOM\r\n this.#removeCopyButton();\r\n }\r\n }\r\n }\r\n\r\n #createAndAppendCopyButton(): void {\r\n const parent = this.el.nativeElement;\r\n this.renderer.setStyle(parent, 'position', 'relative');\r\n\r\n // Create button\r\n this.#copyButton = this.renderer.createElement('button');\r\n this.renderer.setStyle(this.#copyButton, 'position', 'absolute');\r\n this.renderer.setStyle(this.#copyButton, 'top', '50%');\r\n this.renderer.setStyle(this.#copyButton, 'transform', 'translateY(-50%)');\r\n this.renderer.setStyle(this.#copyButton, 'right', '4px');\r\n this.renderer.setStyle(this.#copyButton, 'display', 'none');\r\n this.renderer.setStyle(this.#copyButton, 'z-index', '10');\r\n this.renderer.setStyle(this.#copyButton, 'background', 'transparent');\r\n this.renderer.setStyle(this.#copyButton, 'border', 'none');\r\n this.renderer.setStyle(this.#copyButton, 'cursor', 'pointer');\r\n this.renderer.setStyle(this.#copyButton, 'padding', '1px');\r\n this.renderer.setStyle(this.#copyButton, 'border-radius', '3px');\r\n this.renderer.setStyle(this.#copyButton, 'padding', '5px');\r\n this.renderer.setStyle(this.#copyButton, 'line-height', '1');\r\n this.renderer.setStyle(this.#copyButton, 'background-color', 'var(--sd-black100)');\r\n\r\n // Add inline SVG icon\r\n const svg = this.renderer.createElement('svg', 'svg');\r\n this.renderer.addClass(svg, 'text-secondary');\r\n this.renderer.setAttribute(svg, 'width', '14');\r\n this.renderer.setAttribute(svg, 'height', '14');\r\n this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');\r\n this.renderer.setAttribute(svg, 'fill', 'none');\r\n this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');\r\n\r\n const path = this.renderer.createElement('path', 'svg');\r\n this.renderer.setAttribute(\r\n path,\r\n 'd',\r\n 'M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM20 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H20C21.1 23 22 22.1 22 21V7C22 5.9 21.1 5 20 5ZM20 21H8V7H20V21Z'\r\n );\r\n this.renderer.setAttribute(path, 'fill', 'currentColor');\r\n this.renderer.appendChild(svg, path);\r\n this.renderer.appendChild(this.#copyButton, svg);\r\n\r\n // Tooltip\r\n this.#tooltip = this.renderer.createElement('span');\r\n this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);\r\n this.renderer.setStyle(this.#tooltip, 'position', 'absolute');\r\n this.renderer.setStyle(this.#tooltip, 'bottom', '100%');\r\n this.renderer.setStyle(this.#tooltip, 'left', '50%');\r\n this.renderer.setStyle(this.#tooltip, 'transform', 'translateX(-50%)');\r\n this.renderer.setStyle(this.#tooltip, 'marginBottom', '4px');\r\n this.renderer.setStyle(this.#tooltip, 'background', '#333');\r\n this.renderer.setStyle(this.#tooltip, 'color', '#fff');\r\n this.renderer.setStyle(this.#tooltip, 'padding', '2px 6px');\r\n this.renderer.setStyle(this.#tooltip, 'borderRadius', '4px');\r\n this.renderer.setStyle(this.#tooltip, 'fontSize', '12px');\r\n this.renderer.setStyle(this.#tooltip, 'whiteSpace', 'nowrap');\r\n this.renderer.setStyle(this.#tooltip, 'opacity', '0');\r\n this.renderer.setStyle(this.#tooltip, 'transition', 'opacity 0.2s');\r\n this.renderer.setStyle(this.#tooltip, 'pointerEvents', 'none');\r\n this.renderer.setStyle(this.#tooltip, 'userSelect', 'none');\r\n\r\n this.renderer.appendChild(this.#copyButton, this.#tooltip);\r\n this.renderer.appendChild(parent, this.#copyButton);\r\n\r\n // Listen click\r\n this.renderer.listen(this.#copyButton, 'click', () => {\r\n console.log('click', this.copyText);\r\n if (this.copyText && !this.sdHoverCopyDisabled) {\r\n SdUtilities.copyToClipboard(String(this.copyText));\r\n this.#showTooltip('Copied');\r\n setTimeout(() => this.#hideTooltip(), 1000);\r\n }\r\n });\r\n }\r\n\r\n #removeCopyButton(): void {\r\n if (this.#copyButton) {\r\n this.renderer.removeChild(this.el.nativeElement, this.#copyButton);\r\n this.#copyButton = null;\r\n }\r\n }\r\n\r\n #showTooltip(message: string) {\r\n this.renderer.setProperty(this.#tooltip, 'innerText', message);\r\n this.renderer.setStyle(this.#tooltip, 'opacity', '1');\r\n }\r\n\r\n #hideTooltip() {\r\n this.renderer.setProperty(this.#tooltip, 'innerText', this.#defaultTooltip);\r\n this.renderer.setStyle(this.#tooltip, 'opacity', '0');\r\n }\r\n\r\n @HostListener('mouseenter')\r\n onMouseEnter() {\r\n if (!this.sdHoverCopyDisabled && this.#copyButton) {\r\n this.renderer.setStyle(this.#copyButton, 'display', 'block');\r\n }\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseLeave() {\r\n if (this.#copyButton) {\r\n this.renderer.setStyle(this.#copyButton, 'display', 'none');\r\n this.#hideTooltip();\r\n }\r\n }\r\n}\r\n","import { Directive, HostBinding, HostListener, inject, Input } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\n\r\n@Directive({\r\n selector: 'a[sdHref]',\r\n standalone: true,\r\n})\r\nexport class SdHrefDirective {\r\n readonly #router = inject(Router);\r\n // Nhận vào url đã được xử lý (từ Pipe của bạn)\r\n @Input('sdHref') url!: string;\r\n // Tự động bind giá trị url vào thuộc tính href của thẻ <a>\r\n @HostBinding('attr.href') get href() {\r\n return this.url \|\| 'javascript:;';\r\n }\r\n\r\n @HostListener('click', ['$event'])\r\n onClick(event: Event) {\r\n if (!this.url) return;\r\n if (this.url.startsWith('http')) {\r\n // Nếu là link ngoài -> Mở tab mới và ngăn chặn hành vi mặc định của thẻ a (để không chuyển trang hiện tại)\r\n window.open(this.url, '_blank');\r\n event.preventDefault();\r\n } else {\r\n // Nếu là link nội bộ -> Ngăn chặn full-page reload, dùng Angular Router để điều hướng\r\n event.preventDefault();\r\n const [path, queryString] = this.url.split('?');\r\n // Bạn có thể dùng hàm SdUtilities.parseQueryParams của bạn ở đây,\r\n // hoặc dùng cách native URLSearchParams như sau:\r\n const params = new URLSearchParams(queryString \|\| '');\r\n const queryParams: Record<string, string> = {};\r\n params.forEach((value, key) => (queryParams[key] = value));\r\n this.#router.navigate([path], { queryParams });\r\n }\r\n }\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

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

@@ -16,12 +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';
 /* eslint-disable @angular-eslint/component-class-suffix */
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -39,6 +40,8 @@ class SdAutocompleteErrotStateMatcher {
 class SdAutocomplete {
     ref;
     formConfig;
+    sdLabelTemplate;
+    sdValueTemplate;
     id = `I${uuid.v4()}`;
     autoId;
     set _autoId(val) {
@@ -123,7 +126,6 @@ class SdAutocomplete {
         this.addable = addable === '' || !!addable;
     }
     itemDef;
-    sdLabelDef;
     modelChange = new EventEmitter();
     sdChange = new EventEmitter();
     sdSelection = new EventEmitter();
@@ -140,6 +142,11 @@ class SdAutocomplete {
             this.formControl.enable();
         }
     }
+    viewed = false;
+    set _viewed(val) {
+        this.viewed = val === '' || !!val;
+    }
+    hyperlink;
     required = false;
     set _required(val) {
         this.required = val === '' || !!val;
@@ -165,6 +172,7 @@ class SdAutocomplete {
     sdViewDef;
     isFocused = false;
     selected;
+    display;
     #cache = {};
     #item = {};
     isTyping = false;
@@ -269,6 +277,15 @@ class SdAutocomplete {
         this.controlPlaceHolder = this.selected.pipe(map((item) => {
             return item?.[this.displayField] ?? item ?? this.placeholder ?? (this.appearance ? this.label : '');
         }));
+        this.display = this.selected.pipe(map((item) => {
+            if (this.disabledField && typeof item === 'object' && !!item) {
+                return item?.[this.disabledField] ?? '';
+            }
+            if (typeof item === 'string' || typeof item === 'number') {
+                return item;
+            }
+            return '';
+        }));
     }
     ngAfterViewInit() {
         this.#form?.addControl(this.#name, this.formControl);
@@ -388,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", _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 (!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      [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)\">\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\" [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<!-- <sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"Vui l\u00F2ng nh\u1EADp th\u00F4ng tin\" }}\r\n  </span>\r\n</sd-popover> -->\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}.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"] }], 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,
@@ -403,13 +420,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         MatIconModule,
                         MatProgressSpinnerModule,
                         SdLabel,
-                    ], template: "@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      [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)\">\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\" [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<!-- <sd-popover #error=\"sdPopover\" type=\"danger\" width=\"300px\">\r\n  <span *ngIf=\"formControl.errors?.required\">\r\n    {{ \"Vui l\u00F2ng nh\u1EADp th\u00F4ng tin\" }}\r\n  </span>\r\n</sd-popover> -->\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}.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: [{
@@ -451,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: [{
@@ -464,6 +485,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }], disabled: [{
                 type: Input
+            }], _viewed: [{
+                type: Input,
+                args: ['viewed']
+            }], hyperlink: [{
+                type: Input
             }], _required: [{
                 type: Input,
                 args: ['required']