@i-cell/ids-angular 0.2.18 → 0.2.20

package/dialog/index.d.ts

@@ -6,6 +6,7 @@ import { Subject, Observable } from 'rxjs';
 interface IdsDialogDefaultConfig {
     size?: IdsSizeType;
     showCloseButton?: boolean;
+    isCloseButtonDisabled?: boolean;
     showBackdrop?: boolean;
 }
 declare const IDS_DIALOG_DEFAULT_CONFIG: InjectionToken<IdsDialogDefaultConfig>;
@@ -29,6 +30,7 @@ declare class IdsDialogComponent extends ComponentBaseWithDefaults<IdsDialogDefa
     mainTitle: _angular_core.InputSignal<string>;
     subTitle: _angular_core.InputSignal<string | undefined>;
     showCloseButton: _angular_core.InputSignal<boolean>;
+    isCloseButtonDisabled: _angular_core.InputSignal<boolean>;
     showBackdrop: _angular_core.InputSignal<boolean>;
     protected _customHeader: _angular_core.Signal<IdsDialogHeaderDirective | undefined>;
     protected _hostClasses: _angular_core.Signal<string>;
@@ -39,7 +41,7 @@ declare class IdsDialogComponent extends ComponentBaseWithDefaults<IdsDialogDefa
     ngOnDestroy(): void;
     private _restoreOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<IdsDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IdsDialogComponent, "dialog[idsDialog]", ["idsDialog"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "mainTitle": { "alias": "mainTitle"; "required": true; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; }, {}, ["_customHeader"], ["[idsDialogContent]", "[idsDialogActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<IdsDialogComponent, "dialog[idsDialog]", ["idsDialog"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "mainTitle": { "alias": "mainTitle"; "required": true; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "isCloseButtonDisabled": { "alias": "isCloseButtonDisabled"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; }, {}, ["_customHeader"], ["[idsDialogContent]", "[idsDialogActions]"], true, never>;
 }
 
 declare abstract class IdsCustomDialogBase<ResultType = unknown> implements AfterViewInit, OnDestroy {

package/fesm2022/i-cell-ids-angular-dialog.mjs

@@ -15,6 +15,7 @@ function IDS_DIALOG_DEFAULT_CONFIG_FACTORY() {
     return {
         size: IdsSize.COMPACT,
         showCloseButton: false,
+        isCloseButtonDisabled: false,
         showBackdrop: true,
     };
 }
@@ -46,6 +47,7 @@ class IdsDialogComponent extends ComponentBaseWithDefaults {
         this.mainTitle = input.required(...(ngDevMode ? [{ debugName: "mainTitle" }] : []));
         this.subTitle = input(...(ngDevMode ? [undefined, { debugName: "subTitle" }] : []));
         this.showCloseButton = input(this._defaultConfig.showCloseButton, ...(ngDevMode ? [{ debugName: "showCloseButton" }] : []));
+        this.isCloseButtonDisabled = input(this._defaultConfig.isCloseButtonDisabled, ...(ngDevMode ? [{ debugName: "isCloseButtonDisabled" }] : []));
         this.showBackdrop = input(this._defaultConfig.showBackdrop, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
         this._customHeader = contentChild(IdsDialogHeaderDirective, ...(ngDevMode ? [{ debugName: "_customHeader" }] : []));
         this._hostClasses = computed(() => this._getHostClasses([
@@ -89,7 +91,7 @@ class IdsDialogComponent extends ComponentBaseWithDefaults {
         this._overlayPrevParent = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsDialogComponent, isStandalone: true, selector: "dialog[idsDialog]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mainTitle: { classPropertyName: "mainTitle", publicName: "mainTitle", isSignal: true, isRequired: true, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "cancel": "_onCancel($event)", "close": "_onNativeClose()" }, properties: { "attr.aria-labelledby": "_titleId()" } }, queries: [{ propertyName: "_customHeader", first: true, predicate: IdsDialogHeaderDirective, descendants: true, isSignal: true }], exportAs: ["idsDialog"], usesInheritance: true, ngImport: i0, template: "<section class=\"ids-dialog-container\">\n  <header class=\"ids-dialog-header\">\n    @if (_customHeader()) {\n      <ng-container [ngTemplateOutlet]=\"_customHeader()!.template\" />\n    } @else {\n      <div class=\"ids-dialog-header-default-content\">\n        <h2 class=\"ids-dialog-title\" [id]=\"_titleId()\">{{ mainTitle() }}</h2>\n        @if (subTitle()) {\n          <h3 class=\"ids-dialog-subtitle\">{{ subTitle() }}</h3>\n        }\n      </div>\n    }\n\n    @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"ids-dialog-close-button\"\n        idsIconButton\n        appearance=\"standard\"\n        size=\"compact\"\n        variant=\"surface\"\n        (click)=\"close()\"\n      >\n        <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"close\" />\n      </button>\n    }\n  </header>\n  <div class=\"ids-dialog-content\" [class.ids-dialog-content-scrollable]=\"scrollDetector.isScrollable()\">\n    <div #scrollDetector=\"idsDetectScrollable\" idsDetectScrollable class=\"ids-dialog-content-overflow\">\n      <ng-content select=\"[idsDialogContent]\" />\n    </div>\n  </div>\n  <footer class=\"ids-dialog-actions\">\n    <ng-content select=\"[idsDialogActions]\" />\n  </footer>\n</section>\n", dependencies: [{ kind: "directive", type: IdsDetectScrollableDirective, selector: "[idsDetectScrollable]", exportAs: ["idsDetectScrollable"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsDialogComponent, isStandalone: true, selector: "dialog[idsDialog]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mainTitle: { classPropertyName: "mainTitle", publicName: "mainTitle", isSignal: true, isRequired: true, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, isCloseButtonDisabled: { classPropertyName: "isCloseButtonDisabled", publicName: "isCloseButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "cancel": "_onCancel($event)", "close": "_onNativeClose()" }, properties: { "attr.aria-labelledby": "_titleId()" } }, queries: [{ propertyName: "_customHeader", first: true, predicate: IdsDialogHeaderDirective, descendants: true, isSignal: true }], exportAs: ["idsDialog"], usesInheritance: true, ngImport: i0, template: "<section class=\"ids-dialog-container\">\n  <header class=\"ids-dialog-header\">\n    @if (_customHeader()) {\n      <ng-container [ngTemplateOutlet]=\"_customHeader()!.template\" />\n    } @else {\n      <div class=\"ids-dialog-header-default-content\">\n        <h2 class=\"ids-dialog-title\" [id]=\"_titleId()\">{{ mainTitle() }}</h2>\n        @if (subTitle()) {\n          <h3 class=\"ids-dialog-subtitle\">{{ subTitle() }}</h3>\n        }\n      </div>\n    }\n\n    @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"ids-dialog-close-button\"\n        idsIconButton\n        appearance=\"standard\"\n        size=\"compact\"\n        variant=\"surface\"\n        [disabled]=\"isCloseButtonDisabled()\"\n        (click)=\"close()\"\n      >\n        <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"close\" />\n      </button>\n    }\n  </header>\n  <div class=\"ids-dialog-content\" [class.ids-dialog-content-scrollable]=\"scrollDetector.isScrollable()\">\n    <div #scrollDetector=\"idsDetectScrollable\" idsDetectScrollable class=\"ids-dialog-content-overflow\">\n      <ng-content select=\"[idsDialogContent]\" />\n    </div>\n  </div>\n  <footer class=\"ids-dialog-actions\">\n    <ng-content select=\"[idsDialogActions]\" />\n  </footer>\n</section>\n", dependencies: [{ kind: "directive", type: IdsDetectScrollableDirective, selector: "[idsDetectScrollable]", exportAs: ["idsDetectScrollable"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsDialogComponent, decorators: [{
             type: Component,
@@ -102,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         '[attr.aria-labelledby]': '_titleId()',
                         '(cancel)': '_onCancel($event)',
                         '(close)': '_onNativeClose()',
-                    }, template: "<section class=\"ids-dialog-container\">\n  <header class=\"ids-dialog-header\">\n    @if (_customHeader()) {\n      <ng-container [ngTemplateOutlet]=\"_customHeader()!.template\" />\n    } @else {\n      <div class=\"ids-dialog-header-default-content\">\n        <h2 class=\"ids-dialog-title\" [id]=\"_titleId()\">{{ mainTitle() }}</h2>\n        @if (subTitle()) {\n          <h3 class=\"ids-dialog-subtitle\">{{ subTitle() }}</h3>\n        }\n      </div>\n    }\n\n    @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"ids-dialog-close-button\"\n        idsIconButton\n        appearance=\"standard\"\n        size=\"compact\"\n        variant=\"surface\"\n        (click)=\"close()\"\n      >\n        <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"close\" />\n      </button>\n    }\n  </header>\n  <div class=\"ids-dialog-content\" [class.ids-dialog-content-scrollable]=\"scrollDetector.isScrollable()\">\n    <div #scrollDetector=\"idsDetectScrollable\" idsDetectScrollable class=\"ids-dialog-content-overflow\">\n      <ng-content select=\"[idsDialogContent]\" />\n    </div>\n  </div>\n  <footer class=\"ids-dialog-actions\">\n    <ng-content select=\"[idsDialogActions]\" />\n  </footer>\n</section>\n" }]
+                    }, template: "<section class=\"ids-dialog-container\">\n  <header class=\"ids-dialog-header\">\n    @if (_customHeader()) {\n      <ng-container [ngTemplateOutlet]=\"_customHeader()!.template\" />\n    } @else {\n      <div class=\"ids-dialog-header-default-content\">\n        <h2 class=\"ids-dialog-title\" [id]=\"_titleId()\">{{ mainTitle() }}</h2>\n        @if (subTitle()) {\n          <h3 class=\"ids-dialog-subtitle\">{{ subTitle() }}</h3>\n        }\n      </div>\n    }\n\n    @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"ids-dialog-close-button\"\n        idsIconButton\n        appearance=\"standard\"\n        size=\"compact\"\n        variant=\"surface\"\n        [disabled]=\"isCloseButtonDisabled()\"\n        (click)=\"close()\"\n      >\n        <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"close\" />\n      </button>\n    }\n  </header>\n  <div class=\"ids-dialog-content\" [class.ids-dialog-content-scrollable]=\"scrollDetector.isScrollable()\">\n    <div #scrollDetector=\"idsDetectScrollable\" idsDetectScrollable class=\"ids-dialog-content-overflow\">\n      <ng-content select=\"[idsDialogContent]\" />\n    </div>\n  </div>\n  <footer class=\"ids-dialog-actions\">\n    <ng-content select=\"[idsDialogActions]\" />\n  </footer>\n</section>\n" }]
         }] });
 
 class IdsCustomDialogBase {

package/fesm2022/i-cell-ids-angular-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"i-cell-ids-angular-dialog.mjs","sources":["../../../projects/widgets/dialog/dialog-defaults.ts","../../../projects/widgets/dialog/dialog-header.directive.ts","../../../projects/widgets/dialog/dialog.component.ts","../../../projects/widgets/dialog/dialog.component.html","../../../projects/widgets/dialog/custom-dialog-base.ts","../../../projects/widgets/dialog/dialog.service.ts","../../../projects/widgets/dialog/i-cell-ids-angular-dialog.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsDialogDefaultConfig {\n  size?: IdsSizeType,\n  showCloseButton?: boolean,\n  showBackdrop?: boolean,\n}\n\nexport const IDS_DIALOG_DEFAULT_CONFIG = new InjectionToken<IdsDialogDefaultConfig>(\n  'IDS_DIALOG_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_DIALOG_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_DIALOG_DEFAULT_CONFIG_FACTORY(): Required<IdsDialogDefaultConfig> {\n  return {\n    size: IdsSize.COMPACT,\n    showCloseButton: false,\n    showBackdrop: true,\n  };\n}\n\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[idsDialogHeader]',\n  standalone: true,\n})\nexport class IdsDialogHeaderDirective {\n  public template = inject(TemplateRef);\n}\n","import { IDS_DIALOG_DEFAULT_CONFIG, IDS_DIALOG_DEFAULT_CONFIG_FACTORY, IdsDialogDefaultConfig } from './dialog-defaults';\nimport { IdsDialogHeaderDirective } from './dialog-header.directive';\n\nimport { OverlayContainer } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  contentChild,\n  inject,\n  input,\n  OnDestroy,\n} from '@angular/core';\nimport { ComponentBaseWithDefaults, IdsDetectScrollableDirective, IdsSizeType } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\nimport { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';\n\nconst defaultConfig = IDS_DIALOG_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'dialog[idsDialog]',\n  imports: [\n    IdsDetectScrollableDirective,\n    IdsIconComponent,\n    IdsIconButtonComponent,\n    NgTemplateOutlet,\n  ],\n  templateUrl: './dialog.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  exportAs: 'idsDialog',\n  host: {\n    '[attr.aria-labelledby]': '_titleId()',\n    '(cancel)': '_onCancel($event)',\n    '(close)': '_onNativeClose()',\n  },\n})\nexport class  IdsDialogComponent extends ComponentBaseWithDefaults<IdsDialogDefaultConfig> implements OnDestroy {\n  protected override get _hostName(): string {\n    return 'dialog';\n  }\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_DIALOG_DEFAULT_CONFIG);\n\n  public dialog = inject<ElementRef<HTMLDialogElement>>(ElementRef).nativeElement;\n\n  private readonly _overlay = inject(OverlayContainer);\n  private _overlayRoot?: HTMLElement | null;\n  private _overlayPrevParent?: Node | null;\n\n  protected _titleId = computed(() => `${this.id()}-title`);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public mainTitle = input.required<string>();\n  public subTitle = input<string>();\n  public showCloseButton = input<boolean>(this._defaultConfig.showCloseButton);\n  public showBackdrop = input<boolean>(this._defaultConfig.showBackdrop);\n\n  protected _customHeader = contentChild(IdsDialogHeaderDirective);\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.size(),\n    this.showBackdrop() ? 'with-backdrop' : null,\n  ]));\n\n  protected _onCancel(event: Event): void {\n    event.preventDefault();\n  }\n\n  public open(): void {\n    this.dialog.showModal();\n\n    const root = this._overlay.getContainerElement();\n    if (root && root.parentNode !== this.dialog) {\n      this._overlayRoot = root;\n      this._overlayPrevParent = root.parentNode;\n      this.dialog.appendChild(root);\n    }\n  }\n\n  public close(): void {\n    this.dialog.close();\n    this._restoreOverlay();\n  }\n\n  protected _onNativeClose(): void {\n    this._restoreOverlay();\n  }\n\n  public ngOnDestroy(): void {\n    this._restoreOverlay();\n  }\n\n  private _restoreOverlay(): void {\n    if (this._overlayRoot && this._overlayPrevParent) {\n      try {\n        this._overlayPrevParent.appendChild(this._overlayRoot);\n      } catch { /* empty */ }\n    }\n    this._overlayRoot = null;\n    this._overlayPrevParent = null;\n  }\n}\n","<section class=\"ids-dialog-container\">\n  <header class=\"ids-dialog-header\">\n    @if (_customHeader()) {\n      <ng-container [ngTemplateOutlet]=\"_customHeader()!.template\" />\n    } @else {\n      <div class=\"ids-dialog-header-default-content\">\n        <h2 class=\"ids-dialog-title\" [id]=\"_titleId()\">{{ mainTitle() }}</h2>\n        @if (subTitle()) {\n          <h3 class=\"ids-dialog-subtitle\">{{ subTitle() }}</h3>\n        }\n      </div>\n    }\n\n    @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"ids-dialog-close-button\"\n        idsIconButton\n        appearance=\"standard\"\n        size=\"compact\"\n        variant=\"surface\"\n        (click)=\"close()\"\n      >\n        <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"close\" />\n      </button>\n    }\n  </header>\n  <div class=\"ids-dialog-content\" [class.ids-dialog-content-scrollable]=\"scrollDetector.isScrollable()\">\n    <div #scrollDetector=\"idsDetectScrollable\" idsDetectScrollable class=\"ids-dialog-content-overflow\">\n      <ng-content select=\"[idsDialogContent]\" />\n    </div>\n  </div>\n  <footer class=\"ids-dialog-actions\">\n    <ng-content select=\"[idsDialogActions]\" />\n  </footer>\n</section>\n","import { IdsDialogComponent } from './dialog.component';\n\nimport { AfterViewInit, Directive, OnDestroy, viewChild } from '@angular/core';\nimport { Subject, Subscription, fromEvent } from 'rxjs';\n\n@Directive({ standalone: true })\nexport abstract class IdsCustomDialogBase<ResultType = unknown> implements AfterViewInit, OnDestroy {\n  public dialogResult = new Subject<ResultType | undefined>();\n\n  protected _dialog = viewChild.required(IdsDialogComponent);\n\n  private _closeSub?: Subscription;\n\n  public ngAfterViewInit(): void {\n    this._dialog().open();\n    this._closeSub = fromEvent(this._dialog().dialog, 'close').subscribe(() => {\n      this._setDialogResult();\n    });\n  }\n\n  public ngOnDestroy(): void {\n    this._closeSub?.unsubscribe();\n  }\n\n  public close(payload?: ResultType): void {\n    this._closeSub?.unsubscribe();\n    this._dialog().close();\n    this._setDialogResult(payload);\n  }\n\n  private _setDialogResult(payload?: ResultType): void {\n    this.dialogResult.next(payload);\n    this.dialogResult.complete();\n  }\n}\n","import { IdsCustomDialogBase } from './custom-dialog-base';\n\nimport { DOCUMENT } from '@angular/common';\nimport { ApplicationRef, EnvironmentInjector, Injectable, Injector, Provider, Signal, StaticProvider, Type, createComponent, inject } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class IdsDialogService {\n  private _appRef = inject(ApplicationRef);\n  private _document = inject(DOCUMENT) as Document;\n  private _injector = inject(EnvironmentInjector);\n\n  public open<C extends IdsCustomDialogBase<R>, R = unknown>(\n    component: Type<C>,\n    options?: { providers?: (Provider | StaticProvider)[], inputs?: { [P in keyof C]?: C[P] extends Signal<infer T> ? T : C[P] } },\n  ): Observable<R | undefined> {\n    let elementInjector = undefined;\n\n    if (options?.providers) {\n      elementInjector = Injector.create({\n        parent: this._injector,\n        providers: options.providers,\n      });\n    }\n\n    const createOptions = {\n      environmentInjector: this._injector,\n      ...(elementInjector && { elementInjector }),\n    };\n    const dialogRef = createComponent(component, createOptions);\n\n    if (options?.inputs) {\n      Object.keys(options.inputs).forEach((key) => dialogRef.setInput(key, options.inputs![key as keyof C]));\n    }\n\n    this._document.body.appendChild(dialogRef.location.nativeElement);\n\n    this._appRef.attachView(dialogRef.hostView);\n\n    const onClose = dialogRef.instance.dialogResult.asObservable();\n\n    onClose.subscribe(() => {\n      this._document.body.removeChild(dialogRef.location.nativeElement);\n      dialogRef.destroy();\n    },\n    );\n\n    return onClose;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"i-cell-ids-angular-dialog.mjs","sources":["../../../projects/widgets/dialog/dialog-defaults.ts","../../../projects/widgets/dialog/dialog-header.directive.ts","../../../projects/widgets/dialog/dialog.component.ts","../../../projects/widgets/dialog/dialog.component.html","../../../projects/widgets/dialog/custom-dialog-base.ts","../../../projects/widgets/dialog/dialog.service.ts","../../../projects/widgets/dialog/i-cell-ids-angular-dialog.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';\n\nexport interface IdsDialogDefaultConfig {\n  size?: IdsSizeType,\n  showCloseButton?: boolean,\n  isCloseButtonDisabled?: boolean,\n  showBackdrop?: boolean,\n}\n\nexport const IDS_DIALOG_DEFAULT_CONFIG = new InjectionToken<IdsDialogDefaultConfig>(\n  'IDS_DIALOG_DEFAULT_CONFIG',\n  {\n    providedIn: 'root',\n    factory: IDS_DIALOG_DEFAULT_CONFIG_FACTORY,\n  },\n);\n\nexport function IDS_DIALOG_DEFAULT_CONFIG_FACTORY(): Required<IdsDialogDefaultConfig> {\n  return {\n    size: IdsSize.COMPACT,\n    showCloseButton: false,\n    isCloseButtonDisabled: false,\n    showBackdrop: true,\n  };\n}\n\n","import { Directive, TemplateRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[idsDialogHeader]',\n  standalone: true,\n})\nexport class IdsDialogHeaderDirective {\n  public template = inject(TemplateRef);\n}\n","import { IDS_DIALOG_DEFAULT_CONFIG, IDS_DIALOG_DEFAULT_CONFIG_FACTORY, IdsDialogDefaultConfig } from './dialog-defaults';\nimport { IdsDialogHeaderDirective } from './dialog-header.directive';\n\nimport { OverlayContainer } from '@angular/cdk/overlay';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  contentChild,\n  inject,\n  input,\n  OnDestroy,\n} from '@angular/core';\nimport { ComponentBaseWithDefaults, IdsDetectScrollableDirective, IdsSizeType } from '@i-cell/ids-angular/core';\nimport { IdsIconComponent } from '@i-cell/ids-angular/icon';\nimport { IdsIconButtonComponent } from '@i-cell/ids-angular/icon-button';\n\nconst defaultConfig = IDS_DIALOG_DEFAULT_CONFIG_FACTORY();\n\n@Component({\n  selector: 'dialog[idsDialog]',\n  imports: [\n    IdsDetectScrollableDirective,\n    IdsIconComponent,\n    IdsIconButtonComponent,\n    NgTemplateOutlet,\n  ],\n  templateUrl: './dialog.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  exportAs: 'idsDialog',\n  host: {\n    '[attr.aria-labelledby]': '_titleId()',\n    '(cancel)': '_onCancel($event)',\n    '(close)': '_onNativeClose()',\n  },\n})\nexport class  IdsDialogComponent extends ComponentBaseWithDefaults<IdsDialogDefaultConfig> implements OnDestroy {\n  protected override get _hostName(): string {\n    return 'dialog';\n  }\n\n  protected readonly _defaultConfig = this._getDefaultConfig(defaultConfig, IDS_DIALOG_DEFAULT_CONFIG);\n\n  public dialog = inject<ElementRef<HTMLDialogElement>>(ElementRef).nativeElement;\n\n  private readonly _overlay = inject(OverlayContainer);\n  private _overlayRoot?: HTMLElement | null;\n  private _overlayPrevParent?: Node | null;\n\n  protected _titleId = computed(() => `${this.id()}-title`);\n  public size = input<IdsSizeType>(this._defaultConfig.size);\n  public mainTitle = input.required<string>();\n  public subTitle = input<string>();\n  public showCloseButton = input<boolean>(this._defaultConfig.showCloseButton);\n  public isCloseButtonDisabled = input<boolean>(this._defaultConfig.isCloseButtonDisabled);\n  public showBackdrop = input<boolean>(this._defaultConfig.showBackdrop);\n\n  protected _customHeader = contentChild(IdsDialogHeaderDirective);\n\n  protected _hostClasses = computed(() => this._getHostClasses([\n    this.size(),\n    this.showBackdrop() ? 'with-backdrop' : null,\n  ]));\n\n  protected _onCancel(event: Event): void {\n    event.preventDefault();\n  }\n\n  public open(): void {\n    this.dialog.showModal();\n\n    const root = this._overlay.getContainerElement();\n    if (root && root.parentNode !== this.dialog) {\n      this._overlayRoot = root;\n      this._overlayPrevParent = root.parentNode;\n      this.dialog.appendChild(root);\n    }\n  }\n\n  public close(): void {\n    this.dialog.close();\n    this._restoreOverlay();\n  }\n\n  protected _onNativeClose(): void {\n    this._restoreOverlay();\n  }\n\n  public ngOnDestroy(): void {\n    this._restoreOverlay();\n  }\n\n  private _restoreOverlay(): void {\n    if (this._overlayRoot && this._overlayPrevParent) {\n      try {\n        this._overlayPrevParent.appendChild(this._overlayRoot);\n      } catch { /* empty */ }\n    }\n    this._overlayRoot = null;\n    this._overlayPrevParent = null;\n  }\n}\n","<section class=\"ids-dialog-container\">\n  <header class=\"ids-dialog-header\">\n    @if (_customHeader()) {\n      <ng-container [ngTemplateOutlet]=\"_customHeader()!.template\" />\n    } @else {\n      <div class=\"ids-dialog-header-default-content\">\n        <h2 class=\"ids-dialog-title\" [id]=\"_titleId()\">{{ mainTitle() }}</h2>\n        @if (subTitle()) {\n          <h3 class=\"ids-dialog-subtitle\">{{ subTitle() }}</h3>\n        }\n      </div>\n    }\n\n    @if (showCloseButton()) {\n      <button\n        type=\"button\"\n        class=\"ids-dialog-close-button\"\n        idsIconButton\n        appearance=\"standard\"\n        size=\"compact\"\n        variant=\"surface\"\n        [disabled]=\"isCloseButtonDisabled()\"\n        (click)=\"close()\"\n      >\n        <ids-icon aria-hidden=\"true\" alt=\"\" fontIcon=\"close\" />\n      </button>\n    }\n  </header>\n  <div class=\"ids-dialog-content\" [class.ids-dialog-content-scrollable]=\"scrollDetector.isScrollable()\">\n    <div #scrollDetector=\"idsDetectScrollable\" idsDetectScrollable class=\"ids-dialog-content-overflow\">\n      <ng-content select=\"[idsDialogContent]\" />\n    </div>\n  </div>\n  <footer class=\"ids-dialog-actions\">\n    <ng-content select=\"[idsDialogActions]\" />\n  </footer>\n</section>\n","import { IdsDialogComponent } from './dialog.component';\n\nimport { AfterViewInit, Directive, OnDestroy, viewChild } from '@angular/core';\nimport { Subject, Subscription, fromEvent } from 'rxjs';\n\n@Directive({ standalone: true })\nexport abstract class IdsCustomDialogBase<ResultType = unknown> implements AfterViewInit, OnDestroy {\n  public dialogResult = new Subject<ResultType | undefined>();\n\n  protected _dialog = viewChild.required(IdsDialogComponent);\n\n  private _closeSub?: Subscription;\n\n  public ngAfterViewInit(): void {\n    this._dialog().open();\n    this._closeSub = fromEvent(this._dialog().dialog, 'close').subscribe(() => {\n      this._setDialogResult();\n    });\n  }\n\n  public ngOnDestroy(): void {\n    this._closeSub?.unsubscribe();\n  }\n\n  public close(payload?: ResultType): void {\n    this._closeSub?.unsubscribe();\n    this._dialog().close();\n    this._setDialogResult(payload);\n  }\n\n  private _setDialogResult(payload?: ResultType): void {\n    this.dialogResult.next(payload);\n    this.dialogResult.complete();\n  }\n}\n","import { IdsCustomDialogBase } from './custom-dialog-base';\n\nimport { DOCUMENT } from '@angular/common';\nimport { ApplicationRef, EnvironmentInjector, Injectable, Injector, Provider, Signal, StaticProvider, Type, createComponent, inject } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class IdsDialogService {\n  private _appRef = inject(ApplicationRef);\n  private _document = inject(DOCUMENT) as Document;\n  private _injector = inject(EnvironmentInjector);\n\n  public open<C extends IdsCustomDialogBase<R>, R = unknown>(\n    component: Type<C>,\n    options?: { providers?: (Provider | StaticProvider)[], inputs?: { [P in keyof C]?: C[P] extends Signal<infer T> ? T : C[P] } },\n  ): Observable<R | undefined> {\n    let elementInjector = undefined;\n\n    if (options?.providers) {\n      elementInjector = Injector.create({\n        parent: this._injector,\n        providers: options.providers,\n      });\n    }\n\n    const createOptions = {\n      environmentInjector: this._injector,\n      ...(elementInjector && { elementInjector }),\n    };\n    const dialogRef = createComponent(component, createOptions);\n\n    if (options?.inputs) {\n      Object.keys(options.inputs).forEach((key) => dialogRef.setInput(key, options.inputs![key as keyof C]));\n    }\n\n    this._document.body.appendChild(dialogRef.location.nativeElement);\n\n    this._appRef.attachView(dialogRef.hostView);\n\n    const onClose = dialogRef.instance.dialogResult.asObservable();\n\n    onClose.subscribe(() => {\n      this._document.body.removeChild(dialogRef.location.nativeElement);\n      dialogRef.destroy();\n    },\n    );\n\n    return onClose;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/i-cell-ids-angular-forms.mjs

@@ -983,12 +983,12 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         this.hintMinChars = input(this._defaultConfig.hintMinChars, ...(ngDevMode ? [{ debugName: "hintMinChars" }] : []));
         this.hintMaxLength = input(this._defaultConfig.hintMaxLength, ...(ngDevMode ? [{ debugName: "hintMaxLength" }] : []));
         this.panelClasses = input('', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
-        this.isPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPanelOpen" }] : []));
         this.parentSize = computed(() => this._parentFormField.parentOrSelfSize(), ...(ngDevMode ? [{ debugName: "parentSize" }] : []));
         this.parentVariant = computed(() => this._parentFormField.parentOrSelfVariant(), ...(ngDevMode ? [{ debugName: "parentVariant" }] : []));
         this.errorStateMatcher = signal(inject(ErrorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
         this.successStateMatcher = signal(inject(SuccessStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : []));
         this.options = viewChildren(IdsOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.overlayPanel = viewChild.required(IdsOverlayPanelComponent);
         this.onContainerClick = () => { };
         this._hostClasses = computed(() => this._getHostClasses([
             this.parentSize(),
@@ -1001,8 +1001,8 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
             this.panelClasses(),
         ].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : []));
         this._focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
-        this._canOpen = computed(() => !this.isPanelOpen() && !this.disabled() && !this.readonly() && this.options().length > 0, ...(ngDevMode ? [{ debugName: "_canOpen" }] : []));
-        this._panel = viewChild('overlayPanel', ...(ngDevMode ? [{ debugName: "_panel", read: (ElementRef) }] : [{ read: (ElementRef) }]));
+        this._canOpen = computed(() => !this.overlayPanel().open() && !this.disabled() && !this.readonly() && this.options().length > 0, ...(ngDevMode ? [{ debugName: "_canOpen" }] : []));
+        this._panel = viewChild('overlay', ...(ngDevMode ? [{ debugName: "_panel", read: (ElementRef) }] : [{ read: (ElementRef) }]));
         this._inputElemment = viewChild('fallbackOverlayOrigin', ...(ngDevMode ? [{ debugName: "_inputElemment", read: (ElementRef) }] : [{ read: (ElementRef) }]));
         this._resource = rxResource({
             defaultValue: [],
@@ -1013,7 +1013,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         this._onTouched = () => { };
         this._searchText = model('', ...(ngDevMode ? [{ debugName: "_searchText" }] : []));
         this._skipPredicate = (option) => {
-            if (this.isPanelOpen()) {
+            if (this.overlayPanel().open()) {
                 return false;
             }
             return option.disabledInput();
@@ -1086,7 +1086,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
             .withAllowedModifierKeys(['shiftKey'])
             .skipPredicate(this._skipPredicate);
         this._keyManager.change.subscribe(() => {
-            if (this.isPanelOpen() && this._panel()) {
+            if (this.overlayPanel().open() && this._panel()) {
                 this._scrollOptionIntoView(this._keyManager?.activeItemIndex || 0);
             }
         });
@@ -1107,7 +1107,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         if (isUserInput) {
             this._keyManager?.setActiveItem(source);
         }
-        if (isUserInput && !this.multiSelect() && this.isPanelOpen()) {
+        if (isUserInput && !this.multiSelect() && this.overlayPanel().open()) {
             this.close();
         }
         if (this.multiSelect()) {
@@ -1123,11 +1123,11 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         this._handleChange();
         this._onTouched();
         this._inputElemment()?.nativeElement.blur();
-        this.isPanelOpen.set(false);
+        this.overlayPanel().open.set(false);
     }
     _handleKeydown(event) {
         if (!this.disabled() && !this.readonly()) {
-            this.isPanelOpen() ? this._handleOpenedPanelKeydown(event) : this._handleClosedPanelKeydown(event);
+            this.overlayPanel().open() ? this._handleOpenedPanelKeydown(event) : this._handleClosedPanelKeydown(event);
             // announce number of options when a key is pressed
             this._liveAnnouncer.announce(this.options()
                 .filter((option) => !option.disabled)
@@ -1232,7 +1232,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         return refToMeasure.nativeElement.getBoundingClientRect().width;
     }
     toggle() {
-        this.isPanelOpen() ? this.close() : this.open();
+        this.overlayPanel().open() ? this.close() : this.open();
     }
     open() {
         if (!this._canOpen()) {
@@ -1242,14 +1242,14 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
             this._preferredOverlayOrigin = this._parentFormField?.getConnectedOverlayOrigin();
         }
         this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
-        this.isPanelOpen.set(true);
+        this.overlayPanel().open.set(true);
         this._keyManager?.withHorizontalOrientation(null);
         this._highlightCorrectOption();
         this._changeDetectorRef.markForCheck();
     }
     close() {
-        if (this.isPanelOpen()) {
-            this.isPanelOpen.set(false);
+        if (this.overlayPanel().open()) {
+            this.overlayPanel().open.set(false);
             this._changeDetectorRef.markForCheck();
             this._onTouched();
         }
@@ -1296,7 +1296,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
             if (correspondingOption) {
                 this._keyManager?.updateActiveItem(correspondingOption);
             }
-            else if (!this.isPanelOpen()) {
+            else if (!this.overlayPanel().open()) {
                 this._keyManager?.updateActiveItem(-1);
             }
         }
@@ -1379,13 +1379,13 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
     _onBlur() {
         this._focused.set(false);
         this._keyManager?.cancelTypeahead();
-        if (!this.disabled() && !this.isPanelOpen()) {
+        if (!this.disabled() && !this.overlayPanel().open()) {
             this._onTouched();
             this._changeDetectorRef.markForCheck();
         }
     }
     _getAriaActiveDescendant() {
-        if (this.isPanelOpen() && this._keyManager?.activeItem) {
+        if (this.overlayPanel().open() && this._keyManager?.activeItem) {
             return this._keyManager.activeItem.id();
         }
         return null;
@@ -1399,7 +1399,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAutocompleteComponent, isStandalone: true, selector: "ids-autocomplete[ngModel]:not([formControl]):not([formControlName]),\n              ids-autocomplete[formControl]:not([ngModel]):not([formControlName]),\n              ids-autocomplete[formControlName]:not([ngModel]):not([formControl])", inputs: { minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClearButton: { classPropertyName: "ariaLabelClearButton", publicName: "ariaLabelClearButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelToggleButton: { classPropertyName: "ariaLabelToggleButton", publicName: "ariaLabelToggleButton", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounceInterval: { classPropertyName: "typeaheadDebounceInterval", publicName: "typeaheadDebounceInterval", isSignal: true, isRequired: false, transformFunction: null }, hintLoading: { classPropertyName: "hintLoading", publicName: "hintLoading", isSignal: true, isRequired: false, transformFunction: null }, hintNoResults: { classPropertyName: "hintNoResults", publicName: "hintNoResults", isSignal: true, isRequired: false, transformFunction: null }, hintMinChars: { classPropertyName: "hintMinChars", publicName: "hintMinChars", isSignal: true, isRequired: false, transformFunction: null }, hintMaxLength: { classPropertyName: "hintMaxLength", publicName: "hintMaxLength", isSignal: true, isRequired: false, transformFunction: null }, panelClasses: { classPropertyName: "panelClasses", publicName: "panelClasses", isSignal: true, isRequired: false, transformFunction: null }, _searchText: { classPropertyName: "_searchText", publicName: "_searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _searchText: "_searchTextChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.tabindex": "disabled() ? -1 : tabIndex()", "attr.aria-controls": "isPanelOpen() ? id() + \"-panel\" : null", "attr.aria-owns": "isPanelOpen() ? id() + \"-panel\" : null", "attr.aria-expanded": "isPanelOpen()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null", "attr.aria-required": "required().toString()", "attr.aria-disabled": "disabled().toString()", "attr.aria-invalid": "hasErrorState()", "attr.aria-activedescendant": "_getAriaActiveDescendant()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAutocompleteComponent, isStandalone: true, selector: "ids-autocomplete[ngModel]:not([formControl]):not([formControlName]),\n              ids-autocomplete[formControl]:not([ngModel]):not([formControlName]),\n              ids-autocomplete[formControlName]:not([ngModel]):not([formControl])", inputs: { minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClearButton: { classPropertyName: "ariaLabelClearButton", publicName: "ariaLabelClearButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelToggleButton: { classPropertyName: "ariaLabelToggleButton", publicName: "ariaLabelToggleButton", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounceInterval: { classPropertyName: "typeaheadDebounceInterval", publicName: "typeaheadDebounceInterval", isSignal: true, isRequired: false, transformFunction: null }, hintLoading: { classPropertyName: "hintLoading", publicName: "hintLoading", isSignal: true, isRequired: false, transformFunction: null }, hintNoResults: { classPropertyName: "hintNoResults", publicName: "hintNoResults", isSignal: true, isRequired: false, transformFunction: null }, hintMinChars: { classPropertyName: "hintMinChars", publicName: "hintMinChars", isSignal: true, isRequired: false, transformFunction: null }, hintMaxLength: { classPropertyName: "hintMaxLength", publicName: "hintMaxLength", isSignal: true, isRequired: false, transformFunction: null }, panelClasses: { classPropertyName: "panelClasses", publicName: "panelClasses", isSignal: true, isRequired: false, transformFunction: null }, _searchText: { classPropertyName: "_searchText", publicName: "_searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _searchText: "_searchTextChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.tabindex": "disabled() ? -1 : tabIndex()", "attr.aria-controls": "overlayPanel().open() ? id() + \"-panel\" : null", "attr.aria-owns": "overlayPanel().open() ? id() + \"-panel\" : null", "attr.aria-expanded": "overlayPanel().open()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null", "attr.aria-required": "required().toString()", "attr.aria-disabled": "disabled().toString()", "attr.aria-invalid": "hasErrorState()", "attr.aria-activedescendant": "_getAriaActiveDescendant()" } }, providers: [
             { provide: IDS_FORM_FIELD_CONTROL, useExisting: IdsAutocompleteComponent },
             { provide: IDS_OPTION_PARENT_COMPONENT, useExisting: IdsAutocompleteComponent },
             {
@@ -1407,7 +1407,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
                 useExisting: forwardRef(() => IdsAutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "options", predicate: IdsOptionComponent, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["overlayPanel"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_inputElemment", first: true, predicate: ["fallbackOverlayOrigin"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n  #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  idsInput\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [required]=\"false\"\n  [(ngModel)]=\"_searchText\"\n  (click)=\"_onInputClick()\"\n/>\n@if (_searchText().length > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelClearButton()\"\n      [idsTooltip]=\"ariaLabelClearButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n    </button>\n  </div>\n}\n@if (!isLoading && optionsLength > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelToggleButton()\"\n      [idsTooltip]=\"ariaLabelToggleButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"isPanelOpen() ? 'chevron-up' : 'chevron-down'\" />\n    </button>\n  </div>\n}\n@if (isLoading) {\n  <div idsFormFieldAction>\n    <ids-spinner sizeCollection=\"small\" size=\"compact\" variant=\"surface\" [isTrack]=\"true\" [aria-label]=\"hintLoading()\" />\n  </div>\n}\n<ids-overlay-panel\n  #overlayPanel\n  variant=\"light\"\n  [id]=\"id() + '-panel'\"\n  [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [open]=\"isPanelOpen()\"\n  [size]=\"parentSize()\"\n  [width]=\"_overlayWidth\"\n  [panelClasses]=\"_panelClasses()\"\n  (closed)=\"isPanelOpen.set(false)\"\n>\n  @let showHintLoading = isLoading;\n  @let showHintMinChars = _searchText().length < minChars();\n  @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n  @let showHintNoResults = optionsLength === 0;\n\n  @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n    <div class=\"ids-overlay-panel__autocomplete-message\">\n      <ids-option disabled>\n        @if (showHintLoading && !showHintMinChars) {\n          {{ hintLoading() }}\n        } @else if (showHintMinChars) {\n          {{ hintMinChars() }}\n        } @else if (showHintMaxLength) {\n          {{ hintMaxLength() }}\n        } @else if (showHintNoResults) {\n          {{ hintNoResults() }}\n        }\n      </ids-option>\n    </div>\n  } @else {\n    @for (option of _resource.value(); track $index) {\n      <ids-option [value]=\"option\">{{ option }}</ids-option>\n    }\n  }\n</ids-overlay-panel>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IdsFormFieldActionDirective, selector: "[idsFormFieldAction]" }, { kind: "directive", type: IdsInputDirective, selector: "input[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             input[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             input[idsInput][formControlName]:not([ngModel]):not([formControl]),\n             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])", inputs: ["name", "type", "errorStateMatcher", "successStateMatcher"], exportAs: ["idsInput"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "component", type: IdsOverlayPanelComponent, selector: "ids-overlay-panel", inputs: ["open", "origin", "positions", "appearance", "size", "variant", "panelClasses", "width"], outputs: ["closed"] }, { kind: "component", type: IdsOptionComponent, selector: "ids-option", inputs: ["value", "viewValue", "disabled"], outputs: ["onSelectionChange"] }, { kind: "component", type: IdsSpinnerComponent, selector: "ids-spinner", inputs: ["size", "sizeCollection", "variant", "isTrack", "aria-label"] }, { kind: "directive", type: IdsTooltipDirective, selector: "[idsTooltip]", inputs: ["idsTooltip", "idsTooltipPosition", "idsTooltipSize", "idsTooltipVariant", "idsTooltipShowDelay", "idsTooltipHideDelay", "idsTooltipDisabled", "idsTooltipTouchGestures", "idsTooltipTextAlign", "idsTooltipClass", "idsTooltipShowPointer", "idsTooltipIgnoreClipped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "options", predicate: IdsOptionComponent, descendants: true, isSignal: true }, { propertyName: "overlayPanel", first: true, predicate: IdsOverlayPanelComponent, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["overlay"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_inputElemment", first: true, predicate: ["fallbackOverlayOrigin"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n  #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  idsInput\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [required]=\"false\"\n  [(ngModel)]=\"_searchText\"\n  (click)=\"_onInputClick()\"\n/>\n@if (_searchText().length > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelClearButton()\"\n      [idsTooltip]=\"ariaLabelClearButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n    </button>\n  </div>\n}\n@if (!isLoading && optionsLength > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelToggleButton()\"\n      [idsTooltip]=\"ariaLabelToggleButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"overlay.open() ? 'chevron-up' : 'chevron-down'\" />\n    </button>\n  </div>\n}\n@if (isLoading) {\n  <div idsFormFieldAction>\n    <ids-spinner sizeCollection=\"small\" size=\"compact\" variant=\"surface\" [isTrack]=\"true\" [aria-label]=\"hintLoading()\" />\n  </div>\n}\n<ids-overlay-panel\n  #overlay\n  variant=\"light\"\n  [id]=\"id() + '-panel'\"\n  [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [size]=\"parentSize()\"\n  [width]=\"_overlayWidth\"\n  [panelClasses]=\"_panelClasses()\"\n>\n  @let showHintLoading = isLoading;\n  @let showHintMinChars = _searchText().length < minChars();\n  @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n  @let showHintNoResults = optionsLength === 0;\n\n  @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n    <div class=\"ids-overlay-panel__autocomplete-message\">\n      <ids-option disabled>\n        @if (showHintLoading && !showHintMinChars) {\n          {{ hintLoading() }}\n        } @else if (showHintMinChars) {\n          {{ hintMinChars() }}\n        } @else if (showHintMaxLength) {\n          {{ hintMaxLength() }}\n        } @else if (showHintNoResults) {\n          {{ hintNoResults() }}\n        }\n      </ids-option>\n    </div>\n  } @else {\n    @for (option of _resource.value(); track $index) {\n      <ids-option [value]=\"option\">{{ option }}</ids-option>\n    }\n  }\n</ids-overlay-panel>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IdsFormFieldActionDirective, selector: "[idsFormFieldAction]" }, { kind: "directive", type: IdsInputDirective, selector: "input[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             input[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             input[idsInput][formControlName]:not([ngModel]):not([formControl]),\n             textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),\n             textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),\n             textarea[idsInput][formControlName]:not([ngModel]):not([formControl])", inputs: ["name", "type", "errorStateMatcher", "successStateMatcher"], exportAs: ["idsInput"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "component", type: IdsOverlayPanelComponent, selector: "ids-overlay-panel", inputs: ["open", "origin", "positions", "appearance", "size", "variant", "panelClasses", "width"], outputs: ["openChange"] }, { kind: "component", type: IdsOptionComponent, selector: "ids-option", inputs: ["value", "viewValue", "disabled"], outputs: ["onSelectionChange"] }, { kind: "component", type: IdsSpinnerComponent, selector: "ids-spinner", inputs: ["size", "sizeCollection", "variant", "isTrack", "aria-label"] }, { kind: "directive", type: IdsTooltipDirective, selector: "[idsTooltip]", inputs: ["idsTooltip", "idsTooltipPosition", "idsTooltipSize", "idsTooltipVariant", "idsTooltipShowDelay", "idsTooltipHideDelay", "idsTooltipDisabled", "idsTooltipTouchGestures", "idsTooltipTextAlign", "idsTooltipClass", "idsTooltipShowPointer", "idsTooltipIgnoreClipped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteComponent, decorators: [{
             type: Component,
@@ -1437,9 +1437,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         'aria-autocomplete': 'list',
                         'aria-haspopup': 'listbox',
                         '[attr.tabindex]': 'disabled() ? -1 : tabIndex()',
-                        '[attr.aria-controls]': 'isPanelOpen() ? id() + "-panel" : null',
-                        '[attr.aria-owns]': 'isPanelOpen() ? id() + "-panel" : null',
-                        '[attr.aria-expanded]': 'isPanelOpen()',
+                        '[attr.aria-controls]': 'overlayPanel().open() ? id() + "-panel" : null',
+                        '[attr.aria-owns]': 'overlayPanel().open() ? id() + "-panel" : null',
+                        '[attr.aria-expanded]': 'overlayPanel().open()',
                         '[attr.aria-label]': 'ariaLabel() || null',
                         '[attr.aria-labelledby]': 'ariaLabelledby() || null',
                         '[attr.aria-required]': 'required().toString()',
@@ -1449,7 +1449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         '(keydown)': '_handleKeydown($event)',
                         '(focus)': 'focus()',
                         '(blur)': '_onBlur()',
-                    }, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n  #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  idsInput\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [required]=\"false\"\n  [(ngModel)]=\"_searchText\"\n  (click)=\"_onInputClick()\"\n/>\n@if (_searchText().length > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelClearButton()\"\n      [idsTooltip]=\"ariaLabelClearButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n    </button>\n  </div>\n}\n@if (!isLoading && optionsLength > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelToggleButton()\"\n      [idsTooltip]=\"ariaLabelToggleButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"isPanelOpen() ? 'chevron-up' : 'chevron-down'\" />\n    </button>\n  </div>\n}\n@if (isLoading) {\n  <div idsFormFieldAction>\n    <ids-spinner sizeCollection=\"small\" size=\"compact\" variant=\"surface\" [isTrack]=\"true\" [aria-label]=\"hintLoading()\" />\n  </div>\n}\n<ids-overlay-panel\n  #overlayPanel\n  variant=\"light\"\n  [id]=\"id() + '-panel'\"\n  [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [open]=\"isPanelOpen()\"\n  [size]=\"parentSize()\"\n  [width]=\"_overlayWidth\"\n  [panelClasses]=\"_panelClasses()\"\n  (closed)=\"isPanelOpen.set(false)\"\n>\n  @let showHintLoading = isLoading;\n  @let showHintMinChars = _searchText().length < minChars();\n  @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n  @let showHintNoResults = optionsLength === 0;\n\n  @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n    <div class=\"ids-overlay-panel__autocomplete-message\">\n      <ids-option disabled>\n        @if (showHintLoading && !showHintMinChars) {\n          {{ hintLoading() }}\n        } @else if (showHintMinChars) {\n          {{ hintMinChars() }}\n        } @else if (showHintMaxLength) {\n          {{ hintMaxLength() }}\n        } @else if (showHintNoResults) {\n          {{ hintNoResults() }}\n        }\n      </ids-option>\n    </div>\n  } @else {\n    @for (option of _resource.value(); track $index) {\n      <ids-option [value]=\"option\">{{ option }}</ids-option>\n    }\n  }\n</ids-overlay-panel>\n" }]
+                    }, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n  #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  idsInput\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [required]=\"false\"\n  [(ngModel)]=\"_searchText\"\n  (click)=\"_onInputClick()\"\n/>\n@if (_searchText().length > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelClearButton()\"\n      [idsTooltip]=\"ariaLabelClearButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"clear()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n    </button>\n  </div>\n}\n@if (!isLoading && optionsLength > 0) {\n  <div idsFormFieldAction>\n    <button\n      type=\"button\"\n      idsIconButton\n      appearance=\"standard\"\n      variant=\"surface\"\n      size=\"dense\"\n      [attr.aria-label]=\"ariaLabelToggleButton()\"\n      [idsTooltip]=\"ariaLabelToggleButton()\"\n      [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n      [idsTooltipIgnoreClipped]=\"true\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\"\n    >\n      <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"overlay.open() ? 'chevron-up' : 'chevron-down'\" />\n    </button>\n  </div>\n}\n@if (isLoading) {\n  <div idsFormFieldAction>\n    <ids-spinner sizeCollection=\"small\" size=\"compact\" variant=\"surface\" [isTrack]=\"true\" [aria-label]=\"hintLoading()\" />\n  </div>\n}\n<ids-overlay-panel\n  #overlay\n  variant=\"light\"\n  [id]=\"id() + '-panel'\"\n  [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n  [size]=\"parentSize()\"\n  [width]=\"_overlayWidth\"\n  [panelClasses]=\"_panelClasses()\"\n>\n  @let showHintLoading = isLoading;\n  @let showHintMinChars = _searchText().length < minChars();\n  @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n  @let showHintNoResults = optionsLength === 0;\n\n  @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n    <div class=\"ids-overlay-panel__autocomplete-message\">\n      <ids-option disabled>\n        @if (showHintLoading && !showHintMinChars) {\n          {{ hintLoading() }}\n        } @else if (showHintMinChars) {\n          {{ hintMinChars() }}\n        } @else if (showHintMaxLength) {\n          {{ hintMaxLength() }}\n        } @else if (showHintNoResults) {\n          {{ hintNoResults() }}\n        }\n      </ids-option>\n    </div>\n  } @else {\n    @for (option of _resource.value(); track $index) {\n      <ids-option [value]=\"option\">{{ option }}</ids-option>\n    }\n  }\n</ids-overlay-panel>\n" }]
         }], ctorParameters: () => [] });
 
 class IdsFieldsetRowComponent extends ComponentBase {