@sd-angular/core 19.0.0-beta.66 → 19.0.0-beta.68

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

@@ -1,7 +1,11 @@
 import * as i0 from '@angular/core';
-import { HostListener, Directive, Input, inject, HostBinding } from '@angular/core';
+import { HostListener, Directive, Input, inject, HostBinding, ChangeDetectorRef, input, computed, TemplateRef, Component, ElementRef, ViewContainerRef, DestroyRef } from '@angular/core';
 import { SdUtilities } from '@sd-angular/core/utilities/extensions';
 import { Router } from '@angular/router';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { NgTemplateOutlet } from '@angular/common';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 class SdScrollDirective {
     elementRef;
@@ -281,9 +285,246 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+var _a;
+// Component dùng để instance cho overlay
+class SdTooltipComponent {
+    cdr = inject(ChangeDetectorRef);
+    content = input.required();
+    color = input('#616161');
+    isTemplate = computed(() => this.content() instanceof TemplateRef);
+    templateContent = computed(() => (this.isTemplate() ? this.content() : null));
+    textContent = computed(() => (!this.isTemplate() ? this.content() : ''));
+    animationState = 'void';
+    animationDone;
+    onMouseEnterCb;
+    onMouseLeaveCb;
+    onMouseEnter() {
+        this.onMouseEnterCb?.();
+    }
+    onMouseLeave() {
+        this.onMouseLeaveCb?.();
+    }
+    onAnimationDone(event) {
+        if (event.toState === 'hidden') {
+            this.animationDone?.();
+        }
+    }
+    triggerChangeDetection() {
+        this.cdr.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdTooltipComponent, isStandalone: true, selector: "sd-tooltip-container", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: `
+    <div
+      class="c-sd-tooltip-container"
+      [style.background-color]="color()"
+      [@tooltipAnimation]="animationState"
+      (@tooltipAnimation.done)="onAnimationDone($event)">
+      @if (isTemplate()) {
+        <ng-container [ngTemplateOutlet]="templateContent()"></ng-container>
+      } @else {
+        <span class="c-sd-tooltip-text">{{ textContent() }}</span>
+      }
+    </div>
+  `, isInline: true, styles: [".c-sd-tooltip-container{padding:6px 8px;border-radius:4px;color:#fff;font-size:12px;font-family:Roboto,Helvetica Neue,sans-serif;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;max-width:250px;word-wrap:break-word;pointer-events:auto;-webkit-user-select:text;user-select:text}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+            trigger('tooltipAnimation', [
+                state('void', style({ transform: 'scale(0.8)', opacity: 0 })),
+                state('visible', style({ transform: 'scale(1)', opacity: 1 })),
+                state('hidden', style({ transform: 'scale(0.8)', opacity: 0 })),
+                transition('void => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
+                transition('visible => hidden', animate('150ms cubic-bezier(0.4, 0, 1, 1)')),
+            ]),
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-tooltip-container', standalone: true, imports: [NgTemplateOutlet], template: `
+    <div
+      class="c-sd-tooltip-container"
+      [style.background-color]="color()"
+      [@tooltipAnimation]="animationState"
+      (@tooltipAnimation.done)="onAnimationDone($event)">
+      @if (isTemplate()) {
+        <ng-container [ngTemplateOutlet]="templateContent()"></ng-container>
+      } @else {
+        <span class="c-sd-tooltip-text">{{ textContent() }}</span>
+      }
+    </div>
+  `, animations: [
+                        trigger('tooltipAnimation', [
+                            state('void', style({ transform: 'scale(0.8)', opacity: 0 })),
+                            state('visible', style({ transform: 'scale(1)', opacity: 1 })),
+                            state('hidden', style({ transform: 'scale(0.8)', opacity: 0 })),
+                            transition('void => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),
+                            transition('visible => hidden', animate('150ms cubic-bezier(0.4, 0, 1, 1)')),
+                        ]),
+                    ], host: {
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    }, styles: [".c-sd-tooltip-container{padding:6px 8px;border-radius:4px;color:#fff;font-size:12px;font-family:Roboto,Helvetica Neue,sans-serif;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;max-width:250px;word-wrap:break-word;pointer-events:auto;-webkit-user-select:text;user-select:text}\n"] }]
+        }] });
+// End
+// Directive
+class SdTooltipDirective {
+    content = input.required({ alias: 'sdTooltip' });
+    sdTooltipPosition = input('bottom');
+    sdTooltipDelay = input(100);
+    sdTooltipColor = input('#616161');
+    static activeTooltip = null;
+    elementRef = inject(ElementRef);
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    overlayRef = null;
+    tooltipComponentRef = null;
+    tooltipInstance = null;
+    showTimeout;
+    hideTimeout;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.#cleanup();
+        });
+    }
+    onMouseEnter() {
+        if (_a.activeTooltip && _a.activeTooltip !== this) {
+            _a.activeTooltip.forceHide();
+        }
+        _a.activeTooltip = this;
+        this.#clearTimeouts();
+        this.showTimeout = setTimeout(() => {
+            this.#show();
+        }, this.sdTooltipDelay());
+    }
+    onMouseLeave() {
+        this.#clearTimeouts();
+        this.hideTimeout = setTimeout(() => {
+            this.#hide();
+        }, 300);
+    }
+    forceHide = () => {
+        this.#clearTimeouts();
+        this.#hide();
+    };
+    #show = () => {
+        const currentContent = this.content();
+        if (!currentContent)
+            return;
+        if (!this.overlayRef) {
+            this.#createOverlay();
+        }
+        if (this.overlayRef && !this.overlayRef.hasAttached()) {
+            const portal = new ComponentPortal(SdTooltipComponent, this.viewContainerRef);
+            this.tooltipComponentRef = this.overlayRef.attach(portal);
+            this.tooltipInstance = this.tooltipComponentRef.instance;
+            this.#setupTooltipInstance();
+        }
+        if (this.tooltipComponentRef && this.tooltipInstance) {
+            this.tooltipComponentRef.setInput('content', currentContent);
+            this.tooltipComponentRef.setInput('color', this.sdTooltipColor());
+            this.tooltipInstance.animationState = 'visible';
+            this.tooltipInstance.triggerChangeDetection();
+        }
+    };
+    #hide = () => {
+        if (this.tooltipInstance && this.overlayRef?.hasAttached()) {
+            this.tooltipInstance.animationState = 'hidden';
+            this.tooltipInstance.triggerChangeDetection();
+        }
+    };
+    #createOverlay = () => {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(this.#getPositions())
+            .withViewportMargin(8)
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            panelClass: 'c-sd-tooltip-panel',
+        });
+    };
+    #setupTooltipInstance = () => {
+        if (!this.tooltipInstance)
+            return;
+        this.tooltipInstance.onMouseEnterCb = () => {
+            clearTimeout(this.hideTimeout);
+        };
+        this.tooltipInstance.onMouseLeaveCb = () => {
+            this.hideTimeout = setTimeout(() => {
+                this.#hide();
+            }, 200);
+        };
+        this.tooltipInstance.animationDone = () => {
+            if (this.tooltipInstance?.animationState === 'hidden' && this.overlayRef) {
+                this.overlayRef.detach();
+                this.tooltipInstance = null;
+                this.tooltipComponentRef = null;
+            }
+        };
+    };
+    #clearTimeouts = () => {
+        clearTimeout(this.showTimeout);
+        clearTimeout(this.hideTimeout);
+    };
+    #cleanup = () => {
+        this.#clearTimeouts();
+        if (_a.activeTooltip === this) {
+            _a.activeTooltip = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        // Xóa mọi tham chiếu
+        this.tooltipInstance = null;
+        this.tooltipComponentRef = null;
+    };
+    #getPositions = () => {
+        const offset = 8;
+        const topPos = { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset };
+        const bottomPos = {
+            originX: 'center',
+            originY: 'bottom',
+            overlayX: 'center',
+            overlayY: 'top',
+            offsetY: offset,
+        };
+        const leftPos = { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset };
+        const rightPos = { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset };
+        switch (this.sdTooltipPosition()) {
+            case 'top':
+                return [topPos, bottomPos, rightPos, leftPos];
+            case 'bottom':
+                return [bottomPos, topPos, rightPos, leftPos];
+            case 'left':
+                return [leftPos, rightPos, topPos, bottomPos];
+            case 'right':
+                return [rightPos, leftPos, topPos, bottomPos];
+            default:
+                return [bottomPos, topPos];
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: SdTooltipDirective, isStandalone: true, selector: "[sdTooltip]", inputs: { content: { classPropertyName: "content", publicName: "sdTooltip", isSignal: true, isRequired: true, transformFunction: null }, sdTooltipPosition: { classPropertyName: "sdTooltipPosition", publicName: "sdTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, sdTooltipDelay: { classPropertyName: "sdTooltipDelay", publicName: "sdTooltipDelay", isSignal: true, isRequired: false, transformFunction: null }, sdTooltipColor: { classPropertyName: "sdTooltipColor", publicName: "sdTooltipColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+}
+_a = SdTooltipDirective;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdTooltip]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SdDesktopDirective, SdHoverCopyDirective, SdHrefDirective, SdMobileDirective, SdScrollDirective };
+export { SdDesktopDirective, SdHoverCopyDirective, SdHrefDirective, SdMobileDirective, SdScrollDirective, SdTooltipDirective };
 //# sourceMappingURL=sd-angular-core-directives.mjs.map

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

@@ -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/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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"}
+{"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/src/sd-tooltip.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","import { Directive, ElementRef, HostListener, TemplateRef, ViewContainerRef, inject, input, DestroyRef, ComponentRef, Component, ChangeDetectorRef, computed } from '@angular/core';\r\nimport { Overlay, OverlayRef, ConnectionPositionPair } from '@angular/cdk/overlay';\r\nimport { ComponentPortal } from '@angular/cdk/portal';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';\r\n\r\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\r\n\r\n// Component dùng để instance cho overlay\r\n@Component({\r\n  selector: 'sd-tooltip-container',\r\n  standalone: true,\r\n  imports: [NgTemplateOutlet],\r\n  template: `\r\n    <div\r\n      class=\"c-sd-tooltip-container\"\r\n      [style.background-color]=\"color()\"\r\n      [@tooltipAnimation]=\"animationState\"\r\n      (@tooltipAnimation.done)=\"onAnimationDone($event)\">\r\n      @if (isTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"templateContent()\"></ng-container>\r\n      } @else {\r\n        <span class=\"c-sd-tooltip-text\">{{ textContent() }}</span>\r\n      }\r\n    </div>\r\n  `,\r\n  styles: [\r\n    `\r\n      .c-sd-tooltip-container {\r\n        padding: 6px 8px;\r\n        border-radius: 4px;\r\n        color: white;\r\n        font-size: 12px;\r\n        font-family: Roboto, 'Helvetica Neue', sans-serif;\r\n        box-shadow:\r\n          0 2px 4px -1px #0003,\r\n          0 4px 5px #00000024,\r\n          0 1px 10px #0000001f;\r\n        max-width: 250px;\r\n        word-wrap: break-word;\r\n        pointer-events: auto;\r\n        user-select: text;\r\n      }\r\n    `,\r\n  ],\r\n  animations: [\r\n    trigger('tooltipAnimation', [\r\n      state('void', style({ transform: 'scale(0.8)', opacity: 0 })),\r\n      state('visible', style({ transform: 'scale(1)', opacity: 1 })),\r\n      state('hidden', style({ transform: 'scale(0.8)', opacity: 0 })),\r\n      transition('void => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')),\r\n      transition('visible => hidden', animate('150ms cubic-bezier(0.4, 0, 1, 1)')),\r\n    ]),\r\n  ],\r\n  host: {\r\n    '(mouseenter)': 'onMouseEnter()',\r\n    '(mouseleave)': 'onMouseLeave()',\r\n  },\r\n})\r\nclass SdTooltipComponent {\r\n  private cdr = inject(ChangeDetectorRef);\r\n\r\n  content = input.required<string | TemplateRef<any>>();\r\n  color = input<string>('#616161');\r\n\r\n  isTemplate = computed(() => this.content() instanceof TemplateRef);\r\n  templateContent = computed(() => (this.isTemplate() ? (this.content() as TemplateRef<any>) : null));\r\n  textContent = computed(() => (!this.isTemplate() ? (this.content() as string) : ''));\r\n\r\n  animationState: 'void' | 'visible' | 'hidden' = 'void';\r\n\r\n  animationDone?: () => void;\r\n  onMouseEnterCb?: () => void;\r\n  onMouseLeaveCb?: () => void;\r\n\r\n  onMouseEnter() {\r\n    this.onMouseEnterCb?.();\r\n  }\r\n\r\n  onMouseLeave() {\r\n    this.onMouseLeaveCb?.();\r\n  }\r\n\r\n  onAnimationDone(event: AnimationEvent) {\r\n    if (event.toState === 'hidden') {\r\n      this.animationDone?.();\r\n    }\r\n  }\r\n\r\n  triggerChangeDetection() {\r\n    this.cdr.detectChanges();\r\n  }\r\n}\r\n// End\r\n\r\n// Directive\r\n@Directive({\r\n  selector: '[sdTooltip]',\r\n  standalone: true,\r\n})\r\nexport class SdTooltipDirective {\r\n  content = input.required<string | TemplateRef<any>>({ alias: 'sdTooltip' });\r\n  sdTooltipPosition = input<TooltipPosition>('bottom');\r\n  sdTooltipDelay = input<number>(100);\r\n  sdTooltipColor = input<string>('#616161');\r\n\r\n  private static activeTooltip: SdTooltipDirective | null = null;\r\n\r\n  private readonly elementRef = inject(ElementRef);\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly viewContainerRef = inject(ViewContainerRef);\r\n  private readonly destroyRef = inject(DestroyRef);\r\n\r\n  private overlayRef: OverlayRef | null = null;\r\n  private tooltipComponentRef: ComponentRef<SdTooltipComponent> | null = null;\r\n  private tooltipInstance: SdTooltipComponent | null = null;\r\n\r\n  private showTimeout: ReturnType<typeof setTimeout> | undefined;\r\n  private hideTimeout: ReturnType<typeof setTimeout> | undefined;\r\n\r\n  constructor() {\r\n    this.destroyRef.onDestroy(() => {\r\n      this.#cleanup();\r\n    });\r\n  }\r\n\r\n  @HostListener('mouseenter')\r\n  onMouseEnter() {\r\n    if (SdTooltipDirective.activeTooltip && SdTooltipDirective.activeTooltip !== this) {\r\n      SdTooltipDirective.activeTooltip.forceHide();\r\n    }\r\n    SdTooltipDirective.activeTooltip = this;\r\n\r\n    this.#clearTimeouts();\r\n    this.showTimeout = setTimeout(() => {\r\n      this.#show();\r\n    }, this.sdTooltipDelay());\r\n  }\r\n\r\n  @HostListener('mouseleave')\r\n  onMouseLeave() {\r\n    this.#clearTimeouts();\r\n    this.hideTimeout = setTimeout(() => {\r\n      this.#hide();\r\n    }, 300);\r\n  }\r\n\r\n  forceHide = (): void => {\r\n    this.#clearTimeouts();\r\n    this.#hide();\r\n  };\r\n\r\n  #show = (): void => {\r\n    const currentContent = this.content();\r\n\r\n    if (!currentContent) return;\r\n\r\n    if (!this.overlayRef) {\r\n      this.#createOverlay();\r\n    }\r\n\r\n    if (this.overlayRef && !this.overlayRef.hasAttached()) {\r\n      const portal = new ComponentPortal(SdTooltipComponent, this.viewContainerRef);\r\n      this.tooltipComponentRef = this.overlayRef.attach(portal);\r\n      this.tooltipInstance = this.tooltipComponentRef.instance;\r\n\r\n      this.#setupTooltipInstance();\r\n    }\r\n\r\n    if (this.tooltipComponentRef && this.tooltipInstance) {\r\n      this.tooltipComponentRef.setInput('content', currentContent);\r\n      this.tooltipComponentRef.setInput('color', this.sdTooltipColor());\r\n\r\n      this.tooltipInstance.animationState = 'visible';\r\n      this.tooltipInstance.triggerChangeDetection();\r\n    }\r\n  };\r\n\r\n  #hide = (): void => {\r\n    if (this.tooltipInstance && this.overlayRef?.hasAttached()) {\r\n      this.tooltipInstance.animationState = 'hidden';\r\n      this.tooltipInstance.triggerChangeDetection();\r\n    }\r\n  };\r\n\r\n  #createOverlay = (): void => {\r\n    const positionStrategy = this.overlay\r\n      .position()\r\n      .flexibleConnectedTo(this.elementRef)\r\n      .withPositions(this.#getPositions())\r\n      .withViewportMargin(8)\r\n      .withPush(false);\r\n\r\n    this.overlayRef = this.overlay.create({\r\n      positionStrategy,\r\n      scrollStrategy: this.overlay.scrollStrategies.close(),\r\n      panelClass: 'c-sd-tooltip-panel',\r\n    });\r\n  };\r\n\r\n  #setupTooltipInstance = (): void => {\r\n    if (!this.tooltipInstance) return;\r\n\r\n    this.tooltipInstance.onMouseEnterCb = () => {\r\n      clearTimeout(this.hideTimeout);\r\n    };\r\n\r\n    this.tooltipInstance.onMouseLeaveCb = () => {\r\n      this.hideTimeout = setTimeout(() => {\r\n        this.#hide();\r\n      }, 200);\r\n    };\r\n\r\n    this.tooltipInstance.animationDone = () => {\r\n      if (this.tooltipInstance?.animationState === 'hidden' && this.overlayRef) {\r\n        this.overlayRef.detach();\r\n        this.tooltipInstance = null;\r\n        this.tooltipComponentRef = null;\r\n      }\r\n    };\r\n  };\r\n\r\n  #clearTimeouts = (): void => {\r\n    clearTimeout(this.showTimeout);\r\n    clearTimeout(this.hideTimeout);\r\n  };\r\n\r\n  #cleanup = (): void => {\r\n    this.#clearTimeouts();\r\n\r\n    if (SdTooltipDirective.activeTooltip === this) {\r\n      SdTooltipDirective.activeTooltip = null;\r\n    }\r\n\r\n    if (this.overlayRef) {\r\n      this.overlayRef.dispose();\r\n      this.overlayRef = null;\r\n    }\r\n\r\n    // Xóa mọi tham chiếu\r\n    this.tooltipInstance = null;\r\n    this.tooltipComponentRef = null;\r\n  };\r\n\r\n  #getPositions = (): ConnectionPositionPair[] => {\r\n    const offset = 8;\r\n    const topPos: ConnectionPositionPair = { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset };\r\n    const bottomPos: ConnectionPositionPair = {\r\n      originX: 'center',\r\n      originY: 'bottom',\r\n      overlayX: 'center',\r\n      overlayY: 'top',\r\n      offsetY: offset,\r\n    };\r\n    const leftPos: ConnectionPositionPair = { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -offset };\r\n    const rightPos: ConnectionPositionPair = { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: offset };\r\n\r\n    switch (this.sdTooltipPosition()) {\r\n      case 'top':\r\n        return [topPos, bottomPos, rightPos, leftPos];\r\n      case 'bottom':\r\n        return [bottomPos, topPos, rightPos, leftPos];\r\n      case 'left':\r\n        return [leftPos, rightPos, topPos, bottomPos];\r\n      case 'right':\r\n        return [rightPos, leftPos, topPos, bottomPos];\r\n      default:\r\n        return [bottomPos, topPos];\r\n    }\r\n  };\r\n}\r\n// End\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

@@ -95,6 +95,22 @@ class SdAutocomplete {
     viewed = input(false, { transform: booleanAttribute });
     validator = input();
     inlineError = input();
+    /**
+     * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
+     * Dùng getter (không phải computed) vì formControl.errors không phải Angular signal.
+     */
+    get errorTooltipMessage() {
+        const errors = this.formControl.errors;
+        if (!errors)
+            return undefined;
+        if (errors['required'])
+            return 'Vui lòng nhập thông tin';
+        if (errors['customValidator'])
+            return errors['customValidator'];
+        if (errors['inlineError'])
+            return this.inlineError();
+        return undefined;
+    }
     appearanceInput = input(undefined, { alias: 'appearance' });
     appearance = computed(() => this.appearanceInput() ?? this.formConfig?.appearance ?? 'outline');
     valueModel = model(undefined, { alias: 'model' });
@@ -395,7 +411,7 @@ class SdAutocomplete {
         return () => ({ inlineError: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAutocomplete, isStandalone: true, selector: "sd-autocomplete", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, cacheChecksum: { classPropertyName: "cacheChecksum", publicName: "cacheChecksum", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, addable: { classPropertyName: "addable", publicName: "addable", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdSelection: "sdSelection", sdAdd: "sdAdd" }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "itemDef", first: true, predicate: SdItemDefDefDirective, descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let lbl = label();\r\n@let app = appearance();\r\n@let hideErr = hideInlineError();\r\n@let viewDef = sdViewDef();\r\n@let hText = helperText();\r\n@let req = required();\r\n@let vField = valueField();\r\n@let dField = displayField();\r\n@let disField = disabledField();\r\n@let iDefTpl = itemDef()?.templateRef;\r\n@let isLoad = loading();\r\n@let nVal = $any(normalizedValue());\r\n\r\n@if (viewed()) {\r\n  <sd-view\r\n    [label]=\"lbl\"\r\n    [labelTemplate]=\"sdLabelTemplate()\"\r\n    [value]=\"nVal\"\r\n    [display]=\"display()\"\r\n    [hyperlink]=\"hyperlink()\"\r\n    [valueTemplate]=\"sdValueTemplate()\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!app) {\r\n    <ng-content select=\"[sdLabel]\">\r\n      @if (lbl) {\r\n        <sd-label [label]=\"lbl\" [required]=\"req\"></sd-label>\r\n      }\r\n    </ng-content>\r\n  }\r\n  \r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"viewDef?.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    \r\n    @if (viewDef?.templateRef && !autocompleteTrigger()?.panelOpen && !isFocused) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          viewDef!.templateRef;\r\n          context: {\r\n            value: nVal,\r\n            selectedItem: selected()\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]=\"hideErr\"\r\n        [floatLabel]=\"nVal ? 'always' : 'auto'\"\r\n        [appearance]=\"app || 'outline'\">\r\n        \r\n        @if (app && lbl) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ lbl }}</span>\r\n              @if (hText) {\r\n                <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n        \r\n        <input\r\n          [id]=\"id\"\r\n          [formControl]=\"inputControl\"\r\n          [placeholder]=\"controlPlaceHolder() || ''\"\r\n          [class.c-selected]=\"nVal\"\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]=\"req\"\r\n          #input\r\n          #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          aria-hidden=\"true\" />\r\n          \r\n        @if (!isLoad && nVal && !inputControl.disabled) {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel</mat-icon>\r\n        } @else if (isLoad) {\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\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\" class=\"sd-autocomplete-panel\">\r\n          @let itemsList = filteredItems();\r\n          \r\n          @if (itemsList?.length) {\r\n            @for (item of itemsList; track $index) {\r\n              <mat-option\r\n                [value]=\"item\"\r\n                matTooltipPosition=\"above\"\r\n                [matTooltip]=\"dField ? getNestedValue(item, dField) : item\"\r\n                [disabled]=\"disField ? getNestedValue(item, disField) : false\">\r\n                \r\n                @if (iDefTpl) {\r\n                  <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\r\n                } @else {\r\n                  {{ dField ? getNestedValue(item, dField) : item }}\r\n                }\r\n              </mat-option>\r\n            }\r\n          } @else if (!itemsList?.length && inputControl.value && !isTyping() && !isLoad) {\r\n              }\r\n          \r\n          @if (addable() && sdAdd.observed) {\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\r\n        @if (formControl.errors?.['required']) {\r\n          <mat-error>\r\n            @if (!hideErr) {\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 (!hideErr) {\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}", 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;padding:8px 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAutocomplete, isStandalone: true, selector: "sd-autocomplete", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, cacheChecksum: { classPropertyName: "cacheChecksum", publicName: "cacheChecksum", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, addable: { classPropertyName: "addable", publicName: "addable", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdSelection: "sdSelection", sdAdd: "sdAdd" }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "itemDef", first: true, predicate: SdItemDefDefDirective, descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let lbl = label();\r\n@let app = appearance();\r\n@let hideErr = hideInlineError();\r\n@let errMsg = errorTooltipMessage;\r\n@let viewDef = sdViewDef();\r\n@let hText = helperText();\r\n@let req = required();\r\n@let dField = displayField();\r\n@let disField = disabledField();\r\n@let iDefTpl = itemDef()?.templateRef;\r\n@let isLoad = loading();\r\n@let nVal = $any(normalizedValue());\r\n\r\n@if (viewed()) {\r\n  <sd-view\r\n    [label]=\"lbl\"\r\n    [labelTemplate]=\"sdLabelTemplate()\"\r\n    [value]=\"nVal\"\r\n    [display]=\"display()\"\r\n    [hyperlink]=\"hyperlink()\"\r\n    [valueTemplate]=\"sdValueTemplate()\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!app) {\r\n    <ng-content select=\"[sdLabel]\">\r\n      @if (lbl) {\r\n        <sd-label [label]=\"lbl\" [required]=\"req\"></sd-label>\r\n      }\r\n    </ng-content>\r\n  }\r\n\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"viewDef?.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 (viewDef?.templateRef && !autocompleteTrigger()?.panelOpen && !isFocused) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          viewDef!.templateRef;\r\n          context: {\r\n            value: nVal,\r\n            selectedItem: selected(),\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]=\"hideErr\"\r\n        [floatLabel]=\"nVal ? 'always' : 'auto'\"\r\n        [appearance]=\"app || 'outline'\">\r\n        @if (app && lbl) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ lbl }}</span>\r\n              @if (hText) {\r\n                <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n\r\n        <input\r\n          [id]=\"id\"\r\n          [formControl]=\"inputControl\"\r\n          [placeholder]=\"controlPlaceHolder() || ''\"\r\n          [class.c-selected]=\"nVal\"\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]=\"req\"\r\n          #input\r\n          #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          aria-hidden=\"true\" />\r\n\r\n        @if (!isLoad && nVal && !inputControl.disabled) {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel</mat-icon>\r\n        } @else if (isLoad) {\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\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\" class=\"sd-autocomplete-panel\">\r\n          @let itemsList = filteredItems();\r\n\r\n          @if (itemsList?.length) {\r\n            @for (item of itemsList; track $index) {\r\n              <mat-option\r\n                [value]=\"item\"\r\n                matTooltipPosition=\"above\"\r\n                [matTooltip]=\"dField ? getNestedValue(item, dField) : item\"\r\n                [disabled]=\"disField ? getNestedValue(item, disField) : false\">\r\n                @if (iDefTpl) {\r\n                  <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\r\n                } @else {\r\n                  {{ dField ? getNestedValue(item, dField) : item }}\r\n                }\r\n              </mat-option>\r\n            }\r\n          } @else if (!itemsList?.length && inputControl.value && !isTyping() && !isLoad) {}\r\n\r\n          @if (addable() && sdAdd.observed) {\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\r\n        @if (hideErr && errMsg && formControl.touched) {\r\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\r\n        }\r\n\r\n        @if (!hideErr && errMsg && formControl.touched) {\r\n          <mat-error>{{ errMsg }}</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;padding:8px 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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,
@@ -411,7 +427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         MatProgressSpinnerModule,
                         SdLabel,
                         SdView,
-                    ], template: "@let lbl = label();\r\n@let app = appearance();\r\n@let hideErr = hideInlineError();\r\n@let viewDef = sdViewDef();\r\n@let hText = helperText();\r\n@let req = required();\r\n@let vField = valueField();\r\n@let dField = displayField();\r\n@let disField = disabledField();\r\n@let iDefTpl = itemDef()?.templateRef;\r\n@let isLoad = loading();\r\n@let nVal = $any(normalizedValue());\r\n\r\n@if (viewed()) {\r\n  <sd-view\r\n    [label]=\"lbl\"\r\n    [labelTemplate]=\"sdLabelTemplate()\"\r\n    [value]=\"nVal\"\r\n    [display]=\"display()\"\r\n    [hyperlink]=\"hyperlink()\"\r\n    [valueTemplate]=\"sdValueTemplate()\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!app) {\r\n    <ng-content select=\"[sdLabel]\">\r\n      @if (lbl) {\r\n        <sd-label [label]=\"lbl\" [required]=\"req\"></sd-label>\r\n      }\r\n    </ng-content>\r\n  }\r\n  \r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"viewDef?.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    \r\n    @if (viewDef?.templateRef && !autocompleteTrigger()?.panelOpen && !isFocused) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          viewDef!.templateRef;\r\n          context: {\r\n            value: nVal,\r\n            selectedItem: selected()\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]=\"hideErr\"\r\n        [floatLabel]=\"nVal ? 'always' : 'auto'\"\r\n        [appearance]=\"app || 'outline'\">\r\n        \r\n        @if (app && lbl) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ lbl }}</span>\r\n              @if (hText) {\r\n                <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n        \r\n        <input\r\n          [id]=\"id\"\r\n          [formControl]=\"inputControl\"\r\n          [placeholder]=\"controlPlaceHolder() || ''\"\r\n          [class.c-selected]=\"nVal\"\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]=\"req\"\r\n          #input\r\n          #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          aria-hidden=\"true\" />\r\n          \r\n        @if (!isLoad && nVal && !inputControl.disabled) {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel</mat-icon>\r\n        } @else if (isLoad) {\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\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\" class=\"sd-autocomplete-panel\">\r\n          @let itemsList = filteredItems();\r\n          \r\n          @if (itemsList?.length) {\r\n            @for (item of itemsList; track $index) {\r\n              <mat-option\r\n                [value]=\"item\"\r\n                matTooltipPosition=\"above\"\r\n                [matTooltip]=\"dField ? getNestedValue(item, dField) : item\"\r\n                [disabled]=\"disField ? getNestedValue(item, disField) : false\">\r\n                \r\n                @if (iDefTpl) {\r\n                  <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\r\n                } @else {\r\n                  {{ dField ? getNestedValue(item, dField) : item }}\r\n                }\r\n              </mat-option>\r\n            }\r\n          } @else if (!itemsList?.length && inputControl.value && !isTyping() && !isLoad) {\r\n              }\r\n          \r\n          @if (addable() && sdAdd.observed) {\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\r\n        @if (formControl.errors?.['required']) {\r\n          <mat-error>\r\n            @if (!hideErr) {\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 (!hideErr) {\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}", 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;padding:8px 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"] }]
+                    ], template: "@let lbl = label();\r\n@let app = appearance();\r\n@let hideErr = hideInlineError();\r\n@let errMsg = errorTooltipMessage;\r\n@let viewDef = sdViewDef();\r\n@let hText = helperText();\r\n@let req = required();\r\n@let dField = displayField();\r\n@let disField = disabledField();\r\n@let iDefTpl = itemDef()?.templateRef;\r\n@let isLoad = loading();\r\n@let nVal = $any(normalizedValue());\r\n\r\n@if (viewed()) {\r\n  <sd-view\r\n    [label]=\"lbl\"\r\n    [labelTemplate]=\"sdLabelTemplate()\"\r\n    [value]=\"nVal\"\r\n    [display]=\"display()\"\r\n    [hyperlink]=\"hyperlink()\"\r\n    [valueTemplate]=\"sdValueTemplate()\">\r\n  </sd-view>\r\n} @else {\r\n  @if (!app) {\r\n    <ng-content select=\"[sdLabel]\">\r\n      @if (lbl) {\r\n        <sd-label [label]=\"lbl\" [required]=\"req\"></sd-label>\r\n      }\r\n    </ng-content>\r\n  }\r\n\r\n  <div\r\n    class=\"d-flex align-items-center\"\r\n    [class.sd-view]=\"viewDef?.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 (viewDef?.templateRef && !autocompleteTrigger()?.panelOpen && !isFocused) {\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          viewDef!.templateRef;\r\n          context: {\r\n            value: nVal,\r\n            selectedItem: selected(),\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]=\"hideErr\"\r\n        [floatLabel]=\"nVal ? 'always' : 'auto'\"\r\n        [appearance]=\"app || 'outline'\">\r\n        @if (app && lbl) {\r\n          <mat-label style=\"display: inline-block\">\r\n            <div style=\"display: flex; align-items: center; gap: 4px\">\r\n              <span>{{ lbl }}</span>\r\n              @if (hText) {\r\n                <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\r\n              }\r\n            </div>\r\n          </mat-label>\r\n        }\r\n\r\n        <input\r\n          [id]=\"id\"\r\n          [formControl]=\"inputControl\"\r\n          [placeholder]=\"controlPlaceHolder() || ''\"\r\n          [class.c-selected]=\"nVal\"\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]=\"req\"\r\n          #input\r\n          #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n          [attr.data-autoId]=\"autoId()\"\r\n          aria-hidden=\"true\" />\r\n\r\n        @if (!isLoad && nVal && !inputControl.disabled) {\r\n          <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"clear($event)\" matSuffix>cancel</mat-icon>\r\n        } @else if (isLoad) {\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\r\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onSelect($event.option.value)\" class=\"sd-autocomplete-panel\">\r\n          @let itemsList = filteredItems();\r\n\r\n          @if (itemsList?.length) {\r\n            @for (item of itemsList; track $index) {\r\n              <mat-option\r\n                [value]=\"item\"\r\n                matTooltipPosition=\"above\"\r\n                [matTooltip]=\"dField ? getNestedValue(item, dField) : item\"\r\n                [disabled]=\"disField ? getNestedValue(item, disField) : false\">\r\n                @if (iDefTpl) {\r\n                  <ng-container *ngTemplateOutlet=\"iDefTpl ?? null; context: { item: item }\"> </ng-container>\r\n                } @else {\r\n                  {{ dField ? getNestedValue(item, dField) : item }}\r\n                }\r\n              </mat-option>\r\n            }\r\n          } @else if (!itemsList?.length && inputControl.value && !isTyping() && !isLoad) {}\r\n\r\n          @if (addable() && sdAdd.observed) {\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\r\n        @if (hideErr && errMsg && formControl.touched) {\r\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\r\n        }\r\n\r\n        @if (!hideErr && errMsg && formControl.touched) {\r\n          <mat-error>{{ errMsg }}</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;padding:8px 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: () => [], propDecorators: { sdAdd: [{
                 type: Output
             }] } });