@ngneers/controls 0.0.1-pre1

package/fesm2022/ngneers-controls-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-dialog.mjs","sources":["../../../packages/controls/src/dialog/dialog-templates.ts","../../../packages/controls/src/dialog/dialog.ts","../../../packages/controls/src/dialog/dialog.html","../../../packages/controls/src/dialog/ngneers-controls-dialog.ts"],"sourcesContent":["import { Component, computed, contentChild, input, TemplateRef, viewChild } from '@angular/core';\r\nimport { templateTypesFn } from '@ngneers/controls/api';\r\n\r\n@Component({\r\n  template: '',\r\n})\r\nexport abstract class DialogTemplates {\r\n  private readonly _defaultHeaderTemplate =\r\n    viewChild.required<TemplateRef<unknown>>('defaultHeaderTemplate');\r\n  private readonly _userHeaderTemplate = contentChild<TemplateRef<unknown>>('header');\r\n  public readonly templateHeader = input<TemplateRef<unknown> | null>(null);\r\n  protected readonly headerTemplate = computed(\r\n    () => this._userHeaderTemplate() ?? this.templateHeader() ?? this._defaultHeaderTemplate()\r\n  );\r\n\r\n  private readonly _defaultFooterTemplate =\r\n    viewChild.required<TemplateRef<unknown>>('defaultFooterTemplate');\r\n  private readonly _userFooterTemplate = contentChild<TemplateRef<unknown>>('footer');\r\n  public readonly templateFooter = input<TemplateRef<unknown> | null>(null);\r\n  protected readonly footerTemplate = computed(\r\n    () => this._userFooterTemplate() ?? this.templateFooter() ?? this._defaultFooterTemplate()\r\n  );\r\n\r\n  /**\r\n   * Types for the dialog templates.\r\n   */\r\n  public readonly templateTypes = templateTypesFn<{\r\n    header: {\r\n      headerId: string;\r\n      title: string | null;\r\n    };\r\n  }>();\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  ElementRef,\n  input,\n  output,\n  TemplateRef,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { NgnTemplate } from '@ngneers/controls/api';\nimport { LazyCacher } from '@ngneers/controls/lazy-cacher';\nimport { generateElementId } from '@ngneers/controls/utils';\n\nimport { DialogTemplates } from './dialog-templates';\n\n@Component({\n  selector: 'ngn-dialog',\n  imports: [NgTemplateOutlet, NgnTemplate, LazyCacher],\n  templateUrl: './dialog.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Dialog extends DialogTemplates {\n  protected readonly headerId = generateElementId();\n\n  private readonly _dialogElement = viewChild.required<ElementRef<HTMLDialogElement>>('dialog');\n  protected readonly lazyContent = contentChild<TemplateRef<unknown>>('lazy');\n\n  public readonly open = input(true);\n  public readonly cache = input(false);\n  public readonly modal = input(false);\n  public readonly autofocus = input(this.modal());\n  public readonly title = input<string | null>(null);\n  public readonly closeOnEscape = input(true);\n\n  public readonly closed = output<void>();\n\n  constructor() {\n    super();\n    afterRenderEffect(() => {\n      if (this.open()) {\n        if (untracked(this.modal)) {\n          this._dialogElement().nativeElement.showModal();\n        } else {\n          this._dialogElement().nativeElement.show();\n        }\n      } else {\n        this._dialogElement().nativeElement.close();\n      }\n    });\n  }\n\n  protected onCancel() {\n    this.closed.emit();\n  }\n}\n","<!-- eslint-disable @angular-eslint/template/no-autofocus -->\n<dialog\n  #dialog\n  [attr.closedby]=\"closeOnEscape() ? 'closerequest' : 'none'\"\n  [autofocus]=\"autofocus()\"\n  [attr.aria-labelledby]=\"headerId\"\n  (cancel)=\"onCancel()\"\n>\n  <header>\n    <ng-template\n      [ngTemplateOutlet]=\"headerTemplate()\"\n      [ngTemplateOutletContext]=\"{ headerId, title: title() }\"\n    ></ng-template>\n  </header>\n\n  <ngn-lazy-cacher [lazyContent]=\"lazyContent()\" [open]=\"open()\" [cache]=\"cache()\">\n    <ng-content />\n  </ngn-lazy-cacher>\n\n  <footer>\n    <ng-template [ngTemplateOutlet]=\"footerTemplate()\"></ng-template>\n  </footer>\n</dialog>\n\n<ng-template\n  #defaultHeaderTemplate\n  [ngnTemplate]=\"templateTypes.header\"\n  let-headerId=\"headerId\"\n  let-title=\"title\"\n>\n  @if (title) {\n    <h2 [id]=\"headerId\">{{ title }}</h2>\n  }\n</ng-template>\n\n<ng-template #defaultFooterTemplate></ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-form-field.mjs

@@ -0,0 +1,33 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, forwardRef, Component } from '@angular/core';
+
+const FORM_FIELD = new InjectionToken('FormField');
+class FormField {
+    _parentFormField = inject(FORM_FIELD, { optional: true, skipSelf: true });
+    hasParentFormField = !!this._parentFormField;
+    label = input(null);
+    inputId = input(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: FormField, isStandalone: true, selector: "ngn-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: FORM_FIELD,
+                useExisting: forwardRef(() => FormField),
+            },
+        ], ngImport: i0, template: "<div [class.ngn-form-field]=\"!hasParentFormField\">\r\n  @if (label(); as label) {\r\n    <label [for]=\"inputId()\">{{ label }}</label>\r\n  }\r\n  <ng-content />\r\n</div>\r\n", styles: [".ngn-form-field{border:2px solid black}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: FormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-form-field', providers: [
+                        {
+                            provide: FORM_FIELD,
+                            useExisting: forwardRef(() => FormField),
+                        },
+                    ], template: "<div [class.ngn-form-field]=\"!hasParentFormField\">\r\n  @if (label(); as label) {\r\n    <label [for]=\"inputId()\">{{ label }}</label>\r\n  }\r\n  <ng-content />\r\n</div>\r\n", styles: [".ngn-form-field{border:2px solid black}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormField };
+//# sourceMappingURL=ngneers-controls-form-field.mjs.map

package/fesm2022/ngneers-controls-form-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-form-field.mjs","sources":["../../../packages/controls/src/form-field/form-field.ts","../../../packages/controls/src/form-field/form-field.html","../../../packages/controls/src/form-field/ngneers-controls-form-field.ts"],"sourcesContent":["import { Component, forwardRef, inject, InjectionToken, input } from '@angular/core';\r\n\r\nimport { FormFieldBase } from './form-field-base';\r\n\r\nconst FORM_FIELD = new InjectionToken<FormField>('FormField');\r\n\r\n@Component({\r\n  selector: 'ngn-form-field',\r\n  templateUrl: './form-field.html',\r\n  styles: `\r\n    .ngn-form-field {\r\n      border: 2px solid black;\r\n    }\r\n  `,\r\n  providers: [\r\n    {\r\n      provide: FORM_FIELD,\r\n      useExisting: forwardRef(() => FormField),\r\n    },\r\n  ],\r\n})\r\nexport class FormField implements FormFieldBase {\r\n  private readonly _parentFormField = inject(FORM_FIELD, { optional: true, skipSelf: true });\r\n  protected readonly hasParentFormField = !!this._parentFormField;\r\n\r\n  public readonly label = input<string | null>(null);\r\n  public readonly inputId = input<string | null>(null);\r\n}\r\n","<div [class.ngn-form-field]=\"!hasParentFormField\">\r\n  @if (label(); as label) {\r\n    <label [for]=\"inputId()\">{{ label }}</label>\r\n  }\r\n  <ng-content />\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAIA,MAAM,UAAU,GAAG,IAAI,cAAc,CAAY,WAAW,CAAC;MAiBhD,SAAS,CAAA;AACH,IAAA,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACvE,IAAA,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,gBAAgB;AAE/C,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,CAAC;AAClC,IAAA,OAAO,GAAG,KAAK,CAAgB,IAAI,CAAC;uGALzC,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAPT;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,UAAU;AACnB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,SAAS,CAAC;AACzC,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBH,oLAMA,EAAA,MAAA,EAAA,CAAA,2CAAA,CAAA,EAAA,CAAA;;2FDea,SAAS,EAAA,UAAA,EAAA,CAAA;kBAfrB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,SAAA,EAOf;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,UAAU;AACnB,4BAAA,WAAW,EAAE,UAAU,CAAC,eAAe,CAAC;AACzC,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,oLAAA,EAAA,MAAA,EAAA,CAAA,2CAAA,CAAA,EAAA;;;AEnBH;;AAEG;;;;"}

package/fesm2022/ngneers-controls-icon.mjs

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, input, viewChild, computed, afterRenderEffect, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+class GlobalIconTemplate {
+    _globalIconTemplate = signal(null);
+    globalIconTemplate = this._globalIconTemplate.asReadonly();
+    setGlobalIconTemplate(template) {
+        this._globalIconTemplate.set(template);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: GlobalIconTemplate, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: GlobalIconTemplate, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: GlobalIconTemplate, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class Icon {
+    _globalIconTemplate = inject(GlobalIconTemplate).globalIconTemplate;
+    defaultIcon = input();
+    icon = input();
+    _defaultIconTemplate = viewChild.required('defaultIconTemplate');
+    usedIconTemplate = computed(() => {
+        const globalTemplate = this._globalIconTemplate();
+        if (globalTemplate) {
+            return globalTemplate;
+        }
+        return this._defaultIconTemplate();
+    });
+    constructor() {
+        afterRenderEffect(() => {
+            if (!this.icon() && !this.defaultIcon()) {
+                throw new Error('Icon component requires either an icon or a default icon to be set.');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: Icon, isStandalone: true, selector: "ngn-icon", inputs: { defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.ngSkipHydration": "true" } }, viewQueries: [{ propertyName: "_defaultIconTemplate", first: true, predicate: ["defaultIconTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (icon()) {\r\n  <ng-container *ngTemplateOutlet=\"usedIconTemplate(); context: { $implicit: icon() }\">\r\n  </ng-container>\r\n\r\n  <ng-template #defaultIconTemplate let-icon><i class=\"{{ icon }}\"></i></ng-template>\r\n} @else {\r\n  <i class=\"{{ defaultIcon() }}\"></i>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Icon, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-icon', imports: [NgTemplateOutlet], host: {
+                        '[attr.ngSkipHydration]': 'true',
+                    }, template: "@if (icon()) {\r\n  <ng-container *ngTemplateOutlet=\"usedIconTemplate(); context: { $implicit: icon() }\">\r\n  </ng-container>\r\n\r\n  <ng-template #defaultIconTemplate let-icon><i class=\"{{ icon }}\"></i></ng-template>\r\n} @else {\r\n  <i class=\"{{ defaultIcon() }}\"></i>\r\n}\r\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GlobalIconTemplate, Icon };
+//# sourceMappingURL=ngneers-controls-icon.mjs.map

package/fesm2022/ngneers-controls-icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-icon.mjs","sources":["../../../packages/controls/src/icon/global-icon-template.ts","../../../packages/controls/src/icon/icon.ts","../../../packages/controls/src/icon/icon.html","../../../packages/controls/src/icon/ngneers-controls-icon.ts"],"sourcesContent":["import { Injectable, signal, TemplateRef } from '@angular/core';\r\nimport { IconType } from '@ngneers/controls/custom-types';\r\n\r\nexport type IconTemplateData = { $implicit: IconType };\r\nexport type IconTemplateType = TemplateRef<IconTemplateData>;\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class GlobalIconTemplate {\r\n  private readonly _globalIconTemplate = signal<IconTemplateType | null>(null);\r\n\r\n  public readonly globalIconTemplate = this._globalIconTemplate.asReadonly();\r\n\r\n  public setGlobalIconTemplate(template: IconTemplateType) {\r\n    this._globalIconTemplate.set(template);\r\n  }\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n  afterRenderEffect,\r\n  Component,\r\n  computed,\r\n  inject,\r\n  input,\r\n  TemplateRef,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { IconType } from '@ngneers/controls/custom-types';\r\n\r\nimport { GlobalIconTemplate } from './global-icon-template';\r\n\r\n@Component({\r\n  selector: 'ngn-icon',\r\n  templateUrl: './icon.html',\r\n  imports: [NgTemplateOutlet],\r\n  host: {\r\n    '[attr.ngSkipHydration]': 'true',\r\n  },\r\n})\r\nexport class Icon {\r\n  private readonly _globalIconTemplate = inject(GlobalIconTemplate).globalIconTemplate;\r\n\r\n  public readonly defaultIcon = input<string>();\r\n  public readonly icon = input<IconType>();\r\n\r\n  private readonly _defaultIconTemplate =\r\n    viewChild.required<TemplateRef<{ $implicit: IconType }>>('defaultIconTemplate');\r\n\r\n  protected readonly usedIconTemplate = computed(() => {\r\n    const globalTemplate = this._globalIconTemplate();\r\n    if (globalTemplate) {\r\n      return globalTemplate;\r\n    }\r\n    return this._defaultIconTemplate();\r\n  });\r\n\r\n  constructor() {\r\n    afterRenderEffect(() => {\r\n      if (!this.icon() && !this.defaultIcon()) {\r\n        throw new Error('Icon component requires either an icon or a default icon to be set.');\r\n      }\r\n    });\r\n  }\r\n}\r\n","@if (icon()) {\r\n  <ng-container *ngTemplateOutlet=\"usedIconTemplate(); context: { $implicit: icon() }\">\r\n  </ng-container>\r\n\r\n  <ng-template #defaultIconTemplate let-icon><i class=\"{{ icon }}\"></i></ng-template>\r\n} @else {\r\n  <i class=\"{{ defaultIcon() }}\"></i>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-lazy-cacher.mjs

@@ -0,0 +1,30 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, signal, effect, Component } from '@angular/core';
+
+class LazyCacher {
+    lazyContent = input(undefined);
+    open = input(false);
+    cache = input(false);
+    hasBeenOpened = signal(false);
+    constructor() {
+        effect(() => {
+            if (this.open()) {
+                this.hasBeenOpened.set(true);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LazyCacher, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: LazyCacher, isStandalone: true, selector: "ngn-lazy-cacher", inputs: { lazyContent: { classPropertyName: "lazyContent", publicName: "lazyContent", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "cache", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (lazyContent()) {\r\n  @if (open() || (cache() && hasBeenOpened())) {\r\n    <ng-container *ngTemplateOutlet=\"lazyContent()\"></ng-container>\r\n  }\r\n} @else {\r\n  <ng-content></ng-content>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: LazyCacher, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-lazy-cacher', imports: [NgTemplateOutlet], template: "@if (lazyContent()) {\r\n  @if (open() || (cache() && hasBeenOpened())) {\r\n    <ng-container *ngTemplateOutlet=\"lazyContent()\"></ng-container>\r\n  }\r\n} @else {\r\n  <ng-content></ng-content>\r\n}\r\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LazyCacher };
+//# sourceMappingURL=ngneers-controls-lazy-cacher.mjs.map

package/fesm2022/ngneers-controls-lazy-cacher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-lazy-cacher.mjs","sources":["../../../packages/controls/src/lazy-cacher/lazy-cacher.ts","../../../packages/controls/src/lazy-cacher/lazy-cacher.html","../../../packages/controls/src/lazy-cacher/ngneers-controls-lazy-cacher.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, effect, input, signal, TemplateRef } from '@angular/core';\r\n\r\n@Component({\r\n  selector: 'ngn-lazy-cacher',\r\n  templateUrl: './lazy-cacher.html',\r\n  imports: [NgTemplateOutlet],\r\n})\r\nexport class LazyCacher {\r\n  public readonly lazyContent = input<TemplateRef<unknown> | undefined | null>(undefined);\r\n  public readonly open = input<boolean>(false);\r\n  public readonly cache = input<boolean>(false);\r\n\r\n  protected readonly hasBeenOpened = signal(false);\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      if (this.open()) {\r\n        this.hasBeenOpened.set(true);\r\n      }\r\n    });\r\n  }\r\n}\r\n","@if (lazyContent()) {\r\n  @if (open() || (cache() && hasBeenOpened())) {\r\n    <ng-container *ngTemplateOutlet=\"lazyContent()\"></ng-container>\r\n  }\r\n} @else {\r\n  <ng-content></ng-content>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,UAAU,CAAA;AACL,IAAA,WAAW,GAAG,KAAK,CAA0C,SAAS,CAAC;AACvE,IAAA,IAAI,GAAG,KAAK,CAAU,KAAK,CAAC;AAC5B,IAAA,KAAK,GAAG,KAAK,CAAU,KAAK,CAAC;AAE1B,IAAA,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC;AAEhD,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;AACf,gBAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;;AAEhC,SAAC,CAAC;;uGAZO,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECRvB,gNAOA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDDY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAEf,UAAU,EAAA,UAAA,EAAA,CAAA;kBALtB,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAElB,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,gNAAA,EAAA;;;AEN7B;;AAEG;;;;"}

package/fesm2022/ngneers-controls-list-box.mjs

@@ -0,0 +1,119 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { viewChild, contentChild, input, computed, Component, signal, effect } from '@angular/core';
+import { ValueControlBase, templateTypesFn, transformToNgnItems, flatItems, mapToItems, NgnTemplate, valueControlBaseProvider } from '@ngneers/controls/api';
+import { Scroller } from '@ngneers/controls/scroller';
+
+class ListBoxTemplates extends ValueControlBase {
+    // Item template
+    _defaultItemTemplate = viewChild.required('defaultItemTemplate');
+    _userItemTemplate = contentChild('item');
+    templateItem = input(null);
+    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem() ?? this._defaultItemTemplate());
+    // Group template
+    _defaultGroupTemplate = viewChild.required('defaultGroupTemplate');
+    _userGroupTemplate = contentChild('group');
+    templateGroup = input(null);
+    groupTemplate = computed(() => this._userGroupTemplate() ?? this.templateGroup() ?? this._defaultGroupTemplate());
+    /**
+     * Types for the dialog templates.
+     */
+    templateTypes = templateTypesFn();
+    templateTypesInternal = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListBoxTemplates, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: ListBoxTemplates, isStandalone: true, selector: "ng-component", inputs: { templateItem: { classPropertyName: "templateItem", publicName: "templateItem", isSignal: true, isRequired: false, transformFunction: null }, templateGroup: { classPropertyName: "templateGroup", publicName: "templateGroup", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userItemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "_userGroupTemplate", first: true, predicate: ["group"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultItemTemplate", first: true, predicate: ["defaultItemTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultGroupTemplate", first: true, predicate: ["defaultGroupTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListBoxTemplates, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [],
+                    template: '',
+                }]
+        }] });
+
+class ListBox extends ListBoxTemplates {
+    items = input([]);
+    fields = input();
+    selectable = input(false);
+    highlightable = input(true);
+    virtual = input();
+    itemHeight = input();
+    _scroller = viewChild.required(Scroller);
+    formattedItems = computed(() => {
+        const fields = this.fields();
+        const items = this.items();
+        if (!fields) {
+            return items;
+        }
+        return transformToNgnItems(items, fields);
+    });
+    flatItems = computed(() => flatItems(this.formattedItems()));
+    currentHighlightedValue = signal(null);
+    constructor() {
+        super();
+        effect(() => {
+            const currentHighlightedValue = this.currentHighlightedValue();
+            if (!currentHighlightedValue) {
+                return;
+            }
+            const index = flatItems(this.formattedItems()).findIndex(option => option.value === currentHighlightedValue);
+            this._scroller().scrollToIndex(index);
+        });
+    }
+    onKeyDown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.stopPropagation();
+            event.preventDefault();
+            const flattenedItems = mapToItems(this.formattedItems());
+            this.currentHighlightedValue.update(currentValue => {
+                const currentHighlightIndex = flattenedItems.findIndex(option => option.value === currentValue);
+                if (flattenedItems.length === 0) {
+                    return null;
+                }
+                const currentIndex = currentHighlightIndex >= 0
+                    ? currentHighlightIndex
+                    : flattenedItems.findIndex(option => option.value === this.value());
+                if (currentIndex === -1) {
+                    return event.key === 'ArrowDown'
+                        ? flattenedItems[0].value
+                        : flattenedItems[flattenedItems.length - 1].value;
+                }
+                const nextIndex = event.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+                if (nextIndex < 0) {
+                    return flattenedItems[flattenedItems.length - 1].value;
+                }
+                if (nextIndex >= flattenedItems.length) {
+                    return flattenedItems[0].value;
+                }
+                return flattenedItems[nextIndex].value;
+            });
+        }
+        else if (this.selectable() && (event.key === 'Enter' || event.key === ' ')) {
+            const currentHighlightedValue = this.currentHighlightedValue();
+            if (currentHighlightedValue !== null) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                this.onSelect(currentHighlightedValue);
+            }
+        }
+    }
+    onSelect(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.onTouched();
+        this.currentHighlightedValue.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: ListBox, isStandalone: true, selector: "ngn-list-box", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, highlightable: { classPropertyName: "highlightable", publicName: "highlightable", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null } }, providers: [valueControlBaseProvider(ListBox)], viewQueries: [{ propertyName: "_scroller", first: true, predicate: Scroller, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n<ul\r\n  class=\"ngn-list-box\"\r\n  style=\"height: 100%; width: 100%\"\r\n  [attr.tabIndex]=\"highlightable() ? 0 : null\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n>\r\n  <ngn-scroller\r\n    [virtual]=\"virtual()\"\r\n    [itemHeight]=\"itemHeight() ?? 0\"\r\n    [items]=\"flatItems()\"\r\n    [templateItem]=\"usedItemTemplate\"\r\n    [fieldSticky]=\"'items'\"\r\n    #scroller\r\n  />\r\n</ul>\r\n\r\n<ng-template #usedItemTemplate [ngnTemplate]=\"scroller.templateTypes.item\" let-itemOrGroup>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n  <li\r\n    [class.highlighted]=\"itemOrGroup.value === currentHighlightedValue()\"\r\n    [class.selected]=\"itemOrGroup.value === value()\"\r\n    (click)=\"!itemOrGroup.items && selectable() && onSelect(itemOrGroup.value)\"\r\n    [style.position]=\"itemOrGroup.items ? 'sticky' : 'initial'\"\r\n    [style.top]=\"itemOrGroup.items ? '0' : 'unset'\"\r\n    [style.backgroundColor]=\"itemOrGroup.items ? 'white' : 'unset'\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        itemOrGroup.items ? groupTemplate() : itemTemplate();\r\n        context: { $implicit: itemOrGroup }\r\n      \"\r\n    ></ng-container>\r\n  </li>\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">{{ item?.label }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate [ngnTemplate]=\"templateTypes.item\" let-group>\r\n  <span [attr.data-testid]=\"group?.testId\">{{ group?.label }}</span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Scroller, selector: "ngn-scroller", inputs: ["items", "virtual", "itemHeight", "padding", "focusable", "fieldSticky", "templateItem"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ListBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-list-box', imports: [NgTemplateOutlet, Scroller, NgnTemplate], providers: [valueControlBaseProvider(ListBox)], template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n<ul\r\n  class=\"ngn-list-box\"\r\n  style=\"height: 100%; width: 100%\"\r\n  [attr.tabIndex]=\"highlightable() ? 0 : null\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n>\r\n  <ngn-scroller\r\n    [virtual]=\"virtual()\"\r\n    [itemHeight]=\"itemHeight() ?? 0\"\r\n    [items]=\"flatItems()\"\r\n    [templateItem]=\"usedItemTemplate\"\r\n    [fieldSticky]=\"'items'\"\r\n    #scroller\r\n  />\r\n</ul>\r\n\r\n<ng-template #usedItemTemplate [ngnTemplate]=\"scroller.templateTypes.item\" let-itemOrGroup>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n  <li\r\n    [class.highlighted]=\"itemOrGroup.value === currentHighlightedValue()\"\r\n    [class.selected]=\"itemOrGroup.value === value()\"\r\n    (click)=\"!itemOrGroup.items && selectable() && onSelect(itemOrGroup.value)\"\r\n    [style.position]=\"itemOrGroup.items ? 'sticky' : 'initial'\"\r\n    [style.top]=\"itemOrGroup.items ? '0' : 'unset'\"\r\n    [style.backgroundColor]=\"itemOrGroup.items ? 'white' : 'unset'\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        itemOrGroup.items ? groupTemplate() : itemTemplate();\r\n        context: { $implicit: itemOrGroup }\r\n      \"\r\n    ></ng-container>\r\n  </li>\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">{{ item?.label }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate [ngnTemplate]=\"templateTypes.item\" let-group>\r\n  <span [attr.data-testid]=\"group?.testId\">{{ group?.label }}</span>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListBox };
+//# sourceMappingURL=ngneers-controls-list-box.mjs.map

package/fesm2022/ngneers-controls-list-box.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-list-box.mjs","sources":["../../../packages/controls/src/list-box/list-box-templates.ts","../../../packages/controls/src/list-box/list-box.ts","../../../packages/controls/src/list-box/list-box.html","../../../packages/controls/src/list-box/ngneers-controls-list-box.ts"],"sourcesContent":["import { Component, computed, contentChild, input, TemplateRef, viewChild } from '@angular/core';\r\nimport { NgnItem, templateTypesFn, ValueControlBase } from '@ngneers/controls/api';\r\n\r\n@Component({\r\n  imports: [],\r\n  template: '',\r\n})\r\nexport abstract class ListBoxTemplates<T, K extends keyof T> extends ValueControlBase<T[K]> {\r\n  // Item template\r\n  private readonly _defaultItemTemplate =\r\n    viewChild.required<TemplateRef<typeof this.templateTypes.item>>('defaultItemTemplate');\r\n  private readonly _userItemTemplate =\r\n    contentChild<TemplateRef<typeof this.templateTypes.item>>('item');\r\n  public readonly templateItem = input<TemplateRef<typeof this.templateTypes.item> | null>(null);\r\n  protected readonly itemTemplate = computed(\r\n    () => this._userItemTemplate() ?? this.templateItem() ?? this._defaultItemTemplate()\r\n  );\r\n  // Group template\r\n  private readonly _defaultGroupTemplate =\r\n    viewChild.required<TemplateRef<typeof this.templateTypes.item>>('defaultGroupTemplate');\r\n  private readonly _userGroupTemplate =\r\n    contentChild<TemplateRef<typeof this.templateTypes.item>>('group');\r\n  public readonly templateGroup = input<TemplateRef<typeof this.templateTypes.item> | null>(null);\r\n  protected readonly groupTemplate = computed(\r\n    () => this._userGroupTemplate() ?? this.templateGroup() ?? this._defaultGroupTemplate()\r\n  );\r\n\r\n  /**\r\n   * Types for the dialog templates.\r\n   */\r\n  public readonly templateTypes = templateTypesFn<{\r\n    item: {\r\n      $implicit: NgnItem<T, K> | undefined;\r\n    };\r\n  }>();\r\n\r\n  protected readonly templateTypesInternal = templateTypesFn<{\r\n    item: {\r\n      $implicit: NgnItem<T, K> | undefined;\r\n      index: number;\r\n    };\r\n  }>();\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport { Component, computed, effect, input, signal, viewChild } from '@angular/core';\r\nimport {\r\n  flatItems,\r\n  mapToItems,\r\n  NgnItem,\r\n  NgnItemFields,\r\n  NgnTemplate,\r\n  transformToNgnItems,\r\n  valueControlBaseProvider,\r\n} from '@ngneers/controls/api';\r\nimport { Scroller } from '@ngneers/controls/scroller';\r\n\r\nimport { ListBoxTemplates } from './list-box-templates';\r\n\r\n@Component({\r\n  selector: 'ngn-list-box',\r\n  templateUrl: './list-box.html',\r\n  imports: [NgTemplateOutlet, Scroller, NgnTemplate],\r\n  providers: [valueControlBaseProvider(ListBox)],\r\n})\r\nexport class ListBox<T extends object, K extends keyof T> extends ListBoxTemplates<T, K> {\r\n  public readonly items = input<readonly NgnItem<T, K>[] | readonly T[]>([]);\r\n  public readonly fields = input<NgnItemFields<T, K>>();\r\n\r\n  public readonly selectable = input<boolean>(false);\r\n  public readonly highlightable = input<boolean>(true);\r\n  public readonly virtual = input<boolean>();\r\n  public readonly itemHeight = input<number>();\r\n  private readonly _scroller = viewChild.required<Scroller<T>>(Scroller);\r\n\r\n  protected readonly formattedItems = computed(() => {\r\n    const fields = this.fields();\r\n    const items = this.items();\r\n    if (!fields) {\r\n      return items as NgnItem<T, K>[];\r\n    }\r\n    return transformToNgnItems(items as readonly T[], fields);\r\n  });\r\n\r\n  protected readonly flatItems = computed(() => flatItems(this.formattedItems()));\r\n\r\n  protected readonly currentHighlightedValue = signal<T[K] | null>(null);\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    effect(() => {\r\n      const currentHighlightedValue = this.currentHighlightedValue();\r\n      if (!currentHighlightedValue) {\r\n        return;\r\n      }\r\n      const index = flatItems(this.formattedItems()).findIndex(\r\n        option => option.value === currentHighlightedValue\r\n      );\r\n      this._scroller().scrollToIndex(index);\r\n    });\r\n  }\r\n\r\n  public onKeyDown(event: KeyboardEvent) {\r\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\r\n      event.stopPropagation();\r\n      event.preventDefault();\r\n      const flattenedItems = mapToItems(this.formattedItems());\r\n      this.currentHighlightedValue.update(currentValue => {\r\n        const currentHighlightIndex = flattenedItems.findIndex(\r\n          option => option.value === currentValue\r\n        );\r\n        if (flattenedItems.length === 0) {\r\n          return null;\r\n        }\r\n        const currentIndex =\r\n          currentHighlightIndex >= 0\r\n            ? currentHighlightIndex\r\n            : flattenedItems.findIndex(option => option.value === this.value());\r\n\r\n        if (currentIndex === -1) {\r\n          return event.key === 'ArrowDown'\r\n            ? flattenedItems[0].value\r\n            : flattenedItems[flattenedItems.length - 1].value;\r\n        }\r\n\r\n        const nextIndex = event.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;\r\n        if (nextIndex < 0) {\r\n          return flattenedItems[flattenedItems.length - 1].value;\r\n        }\r\n        if (nextIndex >= flattenedItems.length) {\r\n          return flattenedItems[0].value;\r\n        }\r\n        return flattenedItems[nextIndex].value;\r\n      });\r\n    } else if (this.selectable() && (event.key === 'Enter' || event.key === ' ')) {\r\n      const currentHighlightedValue = this.currentHighlightedValue();\r\n      if (currentHighlightedValue !== null) {\r\n        event.stopImmediatePropagation();\r\n        event.preventDefault();\r\n        this.onSelect(currentHighlightedValue);\r\n      }\r\n    }\r\n  }\r\n\r\n  protected onSelect(value: T[K]) {\r\n    this.value.set(value);\r\n    this.onChange(value);\r\n    this.onTouched();\r\n    this.currentHighlightedValue.set(null);\r\n  }\r\n}\r\n","<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n<ul\r\n  class=\"ngn-list-box\"\r\n  style=\"height: 100%; width: 100%\"\r\n  [attr.tabIndex]=\"highlightable() ? 0 : null\"\r\n  (keydown)=\"onKeyDown($event)\"\r\n>\r\n  <ngn-scroller\r\n    [virtual]=\"virtual()\"\r\n    [itemHeight]=\"itemHeight() ?? 0\"\r\n    [items]=\"flatItems()\"\r\n    [templateItem]=\"usedItemTemplate\"\r\n    [fieldSticky]=\"'items'\"\r\n    #scroller\r\n  />\r\n</ul>\r\n\r\n<ng-template #usedItemTemplate [ngnTemplate]=\"scroller.templateTypes.item\" let-itemOrGroup>\r\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\r\n  <li\r\n    [class.highlighted]=\"itemOrGroup.value === currentHighlightedValue()\"\r\n    [class.selected]=\"itemOrGroup.value === value()\"\r\n    (click)=\"!itemOrGroup.items && selectable() && onSelect(itemOrGroup.value)\"\r\n    [style.position]=\"itemOrGroup.items ? 'sticky' : 'initial'\"\r\n    [style.top]=\"itemOrGroup.items ? '0' : 'unset'\"\r\n    [style.backgroundColor]=\"itemOrGroup.items ? 'white' : 'unset'\"\r\n  >\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        itemOrGroup.items ? groupTemplate() : itemTemplate();\r\n        context: { $implicit: itemOrGroup }\r\n      \"\r\n    ></ng-container>\r\n  </li>\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  <span [attr.data-testid]=\"item?.testId\">{{ item?.label }}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate [ngnTemplate]=\"templateTypes.item\" let-group>\r\n  <span [attr.data-testid]=\"group?.testId\">{{ group?.label }}</span>\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-popover.mjs

@@ -0,0 +1,80 @@
+import * as i0 from '@angular/core';
+import { input, contentChild, computed, output, signal, inject, Injector, viewChild, Component } from '@angular/core';
+import { autoPositionElement } from '@ngneers/controls/api';
+import { LazyCacher } from '@ngneers/controls/lazy-cacher';
+import { computedWithPrevious } from '@ngneers/controls/utils';
+
+class Popover {
+    anchor = input.required();
+    options = input();
+    lazyContent = contentChild('lazy');
+    appliedOptions = computed(() => ({
+        cache: false,
+        ...this.options(),
+    }));
+    opened = output();
+    closed = output();
+    _isOpen = signal(false);
+    isOpen = this._isOpen.asReadonly();
+    _injector = inject(Injector);
+    _popoverRef = viewChild('popover');
+    _popover = computed(() => this._popoverRef()?.nativeElement);
+    _autoPos = computedWithPrevious(prev => {
+        prev?.stop();
+        const popoverEl = this._popover();
+        if (!popoverEl) {
+            return undefined;
+        }
+        return autoPositionElement(this.anchor(), popoverEl, {
+            injector: this._injector,
+            stopped: true,
+            sizeConstraints: this.appliedOptions()?.sizeConstraints,
+        });
+    });
+    open() {
+        if (this.isOpen()) {
+            return;
+        }
+        this._autoPos()?.start();
+        this._popover()?.togglePopover();
+    }
+    toggle() {
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    close() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this._popover()?.togglePopover();
+    }
+    onToggle(event) {
+        const evt = event;
+        if (evt.newState === 'closed') {
+            this._isOpen.set(false);
+            this.closed.emit();
+            this._autoPos()?.stop();
+        }
+        else {
+            this._isOpen.set(true);
+            this.opened.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Popover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: Popover, isStandalone: true, selector: "ngn-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: ["lazy"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<div popover (toggle)=\"onToggle($event)\" #popover id=\"dropdown\">\r\n  <ngn-lazy-cacher [lazyContent]=\"lazyContent()\" [open]=\"isOpen()\" [cache]=\"appliedOptions().cache\">\r\n    <ng-content></ng-content>\r\n  </ngn-lazy-cacher>\r\n</div>\r\n", dependencies: [{ kind: "component", type: LazyCacher, selector: "ngn-lazy-cacher", inputs: ["lazyContent", "open", "cache"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Popover, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-popover', imports: [LazyCacher], template: "<div popover (toggle)=\"onToggle($event)\" #popover id=\"dropdown\">\r\n  <ngn-lazy-cacher [lazyContent]=\"lazyContent()\" [open]=\"isOpen()\" [cache]=\"appliedOptions().cache\">\r\n    <ng-content></ng-content>\r\n  </ngn-lazy-cacher>\r\n</div>\r\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Popover };
+//# sourceMappingURL=ngneers-controls-popover.mjs.map

package/fesm2022/ngneers-controls-popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-popover.mjs","sources":["../../../packages/controls/src/popover/popover.ts","../../../packages/controls/src/popover/popover.html","../../../packages/controls/src/popover/ngneers-controls-popover.ts"],"sourcesContent":["import {\r\n  Component,\r\n  computed,\r\n  contentChild,\r\n  ElementRef,\r\n  inject,\r\n  Injector,\r\n  input,\r\n  output,\r\n  signal,\r\n  TemplateRef,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport {\r\n  autoPositionElement,\r\n  AutoPositioningHandle,\r\n  PositioningSizeConstraints,\r\n} from '@ngneers/controls/api';\r\nimport { LazyCacher } from '@ngneers/controls/lazy-cacher';\r\nimport { computedWithPrevious } from '@ngneers/controls/utils';\r\n\r\nexport type PopoverOptions = {\r\n  /**\r\n   * Constraints for the size of the popover.\r\n   */\r\n  sizeConstraints?: PositioningSizeConstraints;\r\n  /**\r\n   * If true, the content of the popover will be cached and not recreated on each open.\r\n   * This is useful for performance when the content is expensive to create.\r\n   */\r\n  cache?: boolean;\r\n};\r\n@Component({\r\n  selector: 'ngn-popover',\r\n  templateUrl: './popover.html',\r\n  imports: [LazyCacher],\r\n})\r\nexport class Popover {\r\n  public readonly anchor = input.required<HTMLElement>();\r\n  public readonly options = input<PopoverOptions>();\r\n\r\n  protected readonly lazyContent = contentChild<TemplateRef<unknown>>('lazy');\r\n\r\n  protected readonly appliedOptions = computed(() => ({\r\n    cache: false,\r\n    ...this.options(),\r\n  }));\r\n\r\n  public readonly opened = output();\r\n  public readonly closed = output();\r\n\r\n  private readonly _isOpen = signal(false);\r\n  public readonly isOpen = this._isOpen.asReadonly();\r\n\r\n  private readonly _injector = inject(Injector);\r\n  private readonly _popoverRef = viewChild<ElementRef<HTMLElement>>('popover');\r\n  private readonly _popover = computed(() => this._popoverRef()?.nativeElement);\r\n  private readonly _autoPos = computedWithPrevious<AutoPositioningHandle | undefined>(prev => {\r\n    prev?.stop();\r\n    const popoverEl = this._popover();\r\n    if (!popoverEl) {\r\n      return undefined;\r\n    }\r\n    return autoPositionElement(this.anchor(), popoverEl, {\r\n      injector: this._injector,\r\n      stopped: true,\r\n      sizeConstraints: this.appliedOptions()?.sizeConstraints,\r\n    });\r\n  });\r\n\r\n  public open() {\r\n    if (this.isOpen()) {\r\n      return;\r\n    }\r\n    this._autoPos()?.start();\r\n    this._popover()?.togglePopover();\r\n  }\r\n\r\n  public toggle() {\r\n    if (this.isOpen()) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  }\r\n\r\n  public close() {\r\n    if (!this.isOpen()) {\r\n      return;\r\n    }\r\n    this._popover()?.togglePopover();\r\n  }\r\n\r\n  protected onToggle(event: Event) {\r\n    const evt = event as ToggleEvent;\r\n    if (evt.newState === 'closed') {\r\n      this._isOpen.set(false);\r\n      this.closed.emit();\r\n      this._autoPos()?.stop();\r\n    } else {\r\n      this._isOpen.set(true);\r\n      this.opened.emit();\r\n    }\r\n  }\r\n}\r\n","<div popover (toggle)=\"onToggle($event)\" #popover id=\"dropdown\">\r\n  <ngn-lazy-cacher [lazyContent]=\"lazyContent()\" [open]=\"isOpen()\" [cache]=\"appliedOptions().cache\">\r\n    <ng-content></ng-content>\r\n  </ngn-lazy-cacher>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-scroller.mjs

@@ -0,0 +1,163 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, viewChild, contentChild, computed, inject, ElementRef, effect, untracked, Component } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { elementSizeSignal, templateTypesFn } from '@ngneers/controls/api';
+import { fromEvent, map } from 'rxjs';
+
+class Scroller {
+    /**
+     * The items to be displayed in the scroller.
+     * This is a required input and should be an array of items of type T.
+     */
+    items = input.required();
+    /**
+     * Whether the scroller should use virtual scrolling.
+     * When set to true, the scroller will only render the items that are currently visible
+     * on the screen, improving performance for large lists.
+     *
+     * When virtual scrolling is enabled, {@link itemHeight} must be set to a non-zero value.
+     * @defaultValue `false`
+     */
+    virtual = input(false);
+    /**
+     * When {@link virtual} scrolling is enabled, this input is required to define the height of each item in pixels.
+     */
+    itemHeight = input(0);
+    /**
+     * When {@link virtual} scrolling is enabled, this input defines the number of items to be rendered above and below the visible area.
+     * This can help to reduce flickering when scrolling.
+     * @defaultValue `2`
+     */
+    padding = input(2);
+    /**
+     * Determines whether the scroller should have a tab index and be focusable.
+     * @defaultValue `false`
+     */
+    focusable = input(false);
+    /**
+     * Determines whether an item is sticky or not.
+     * If set, the scroller will stick the items with a truthy value for the specified field to the top of the scroller.
+     */
+    fieldSticky = input(null);
+    _itemList = viewChild.required('itemList');
+    /**
+     * The template to be used for rendering each item in the scroller.
+     * Can also be set using the `item` content child.
+     */
+    templateItem = input(null);
+    _userItemTemplate = contentChild('item');
+    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem());
+    _el = inject((ElementRef));
+    _scrollElement = this._el.nativeElement;
+    _elementSize = elementSizeSignal(this._scrollElement);
+    _visibleItemCount = computed(() => this.virtual()
+        ? Math.ceil(this._elementSize().height / this.itemHeight() + this.padding() * 2)
+        : 0);
+    _scrollTop = toSignal(fromEvent(this._scrollElement, 'scroll').pipe(map(e => e.target.scrollTop)), { initialValue: 0 });
+    _itemStartIndex = computed(() => this.virtual()
+        ? Math.max(0, Math.ceil(this._scrollTop() / this.itemHeight()) - this.padding())
+        : 0);
+    _itemEndIndex = computed(() => this.virtual()
+        ? Math.min(this.items().length, this._itemStartIndex() + this._visibleItemCount())
+        : 0);
+    visibleItems = computed(() => {
+        if (!this.virtual()) {
+            return this.items().map((item, index) => ({ item, index }));
+        }
+        return this.items()
+            .slice(this._itemStartIndex(), this._itemEndIndex())
+            .map((item, index) => {
+            return {
+                item,
+                index: this._itemStartIndex() + index,
+            };
+        });
+    });
+    /**
+     * Returns the last sticky item that is not rendered regularly in the list.
+     * Required because sticky items might need to be rendered longer than they would.
+     * Only applicable when virtual scrolling is enabled.
+     */
+    latestStickyItem = computed(() => {
+        if (!this.virtual()) {
+            return null;
+        }
+        const stickyField = this.fieldSticky();
+        if (!stickyField) {
+            return null;
+        }
+        const unrenderedItemsAtTop = this.items()
+            .slice(0, this._itemStartIndex())
+            .map((item, index) => ({
+            item,
+            index,
+        }));
+        const stickyItems = unrenderedItemsAtTop.filter(item => item.item[stickyField]);
+        return stickyItems[stickyItems.length - 1] ?? null;
+    });
+    itemsTop = computed(() => {
+        return (this._itemStartIndex() - (this.latestStickyItem() ? 1 : 0)) * this.itemHeight();
+    });
+    dummyHeight = computed(() => {
+        return this.items().length * this.itemHeight();
+    });
+    constructor() {
+        effect(() => {
+            if (this.virtual() && !this.itemHeight()) {
+                throw new Error('Item height must be set when virtual is true');
+            }
+        });
+    }
+    /**
+     * Scrolls the item with the given index into view.
+     * @param index The index of the item to scroll to.
+     */
+    scrollToIndex(index) {
+        untracked(() => {
+            if (this.virtual()) {
+                const scrollTop = this._scrollTop();
+                const visibleHeight = this._elementSize().height;
+                const itemTop = index * this.itemHeight();
+                const itemBottom = itemTop + this.itemHeight();
+                if (itemTop < scrollTop) {
+                    this._scrollElement.scrollTo({
+                        top: itemTop - 10,
+                    });
+                }
+                else if (itemBottom > scrollTop + visibleHeight) {
+                    this._scrollElement.scrollTo({
+                        top: itemBottom - visibleHeight + 10,
+                    });
+                }
+            }
+            else {
+                const itemElement = this._itemList().nativeElement.querySelector(`:nth-child(${index + 1})`);
+                if (itemElement) {
+                    itemElement.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        });
+    }
+    /**
+     * Template types for the scroller.
+     * Can be used with the {@link @ngneers/controls/api#NgnTemplate | NgnTemplate} directive for type safe ng-templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Scroller, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: Scroller, isStandalone: true, selector: "ngn-scroller", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, fieldSticky: { classPropertyName: "fieldSticky", publicName: "fieldSticky", isSignal: true, isRequired: false, transformFunction: null }, templateItem: { classPropertyName: "templateItem", publicName: "templateItem", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "tabIndex": "focusable() ? 0 : -1" }, styleAttribute: "position: relative; overflow: auto; display: block; height: 100%; width: 100%;" }, queries: [{ propertyName: "_userItemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_itemList", first: true, predicate: ["itemList"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (virtual()) {\r\n  <div [style.height.px]=\"dummyHeight()\"></div>\r\n}\r\n<div #itemList [style.top.px]=\"itemsTop()\" [style.position]=\"virtual() ? 'absolute' : 'unset'\">\r\n  @if (latestStickyItem(); as latestStickyItem) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        itemTemplate();\r\n        context: { $implicit: latestStickyItem.item, index: latestStickyItem.index }\r\n      \"\r\n    ></ng-container>\r\n  }\r\n  @for (item of visibleItems(); track item.index) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item.item, index: item.index }\"\r\n    ></ng-container>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: Scroller, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-scroller', imports: [NgTemplateOutlet], host: {
+                        style: 'position: relative; overflow: auto; display: block; height: 100%; width: 100%;',
+                        '[tabIndex]': 'focusable() ? 0 : -1',
+                    }, template: "@if (virtual()) {\r\n  <div [style.height.px]=\"dummyHeight()\"></div>\r\n}\r\n<div #itemList [style.top.px]=\"itemsTop()\" [style.position]=\"virtual() ? 'absolute' : 'unset'\">\r\n  @if (latestStickyItem(); as latestStickyItem) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"\r\n        itemTemplate();\r\n        context: { $implicit: latestStickyItem.item, index: latestStickyItem.index }\r\n      \"\r\n    ></ng-container>\r\n  }\r\n  @for (item of visibleItems(); track item.index) {\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item.item, index: item.index }\"\r\n    ></ng-container>\r\n  }\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Scroller };
+//# sourceMappingURL=ngneers-controls-scroller.mjs.map