@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-scroller.mjs

@@ -0,0 +1,308 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, contentChild, computed, Directive, inject, ElementRef, booleanAttribute, effect, untracked, Component, signal } from '@angular/core';
+import { templateTypesFn, elementSizeSignal } from '@ngneers/controls/api/ng';
+import { NgnBase, provideSelf, getNearestNgnInstance } from '@ngneers/controls/base';
+import * as i1 from '@ngneers/controls/directives';
+import { NgnScrollAmount } from '@ngneers/controls/directives';
+import { NgnError, getScrollTop, toggleClass } from '@ngneers/controls/utils';
+import { scrollerControlTemplate } from '@ngneers/controls-themes/templates/scroller';
+
+class ScrollerTemplates extends NgnBase {
+    /**
+     * The template to be used for rendering each item in the scroller.
+     * Can also be set using the `item` content child.
+     */
+    templateItem = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateItem" }] : /* istanbul ignore next */ []));
+    _userItemTemplate = contentChild('item', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_userItemTemplate" }] : /* istanbul ignore next */ []));
+    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Template types for the scroller.
+     * Can be used with the {@link NgnTemplate} directive for type safe ng-templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollerTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: ScrollerTemplates, isStandalone: true, inputs: { templateItem: { classPropertyName: "templateItem", publicName: "templateItem", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userItemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ScrollerTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { templateItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateItem", required: false }] }], _userItemTemplate: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }] } });
+
+/**
+ * @category control
+ */
+class NgnScroller extends ScrollerTemplates {
+    theme = this.injectThemeTemplate(scrollerControlTemplate, {
+        root: true,
+        virtual: () => !!this.virtual(),
+    });
+    _el = inject(ElementRef);
+    _scrollAmount = inject(NgnScrollAmount);
+    /**
+     * The items to be displayed in the scroller.
+     * This is a required input and should be an array of items of type {@link T}.
+     */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * The field of the item that uniquely identifies it.
+     */
+    fieldId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldId" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     * @default `false`
+     */
+    virtual = input(false, { ...(ngDevMode ? { debugName: "virtual" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When {@link virtual} scrolling is enabled, this input is required to define the height of each item in pixels.
+     */
+    itemHeight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     * @default `2`
+     */
+    virtualPadding = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualPadding" }] : /* istanbul ignore next */ []));
+    /**
+     * Determines whether the scroller should have a tab index and be focusable.
+     * @default `false`
+     */
+    focusable = input(false, { ...(ngDevMode ? { debugName: "focusable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldSticky" }] : /* istanbul ignore next */ []));
+    /**
+     * Viewport size — tracks the scroll ancestor's dimensions so that virtual
+     * scrolling works when an outer element handles overflow (e.g. table wrapper).
+     */
+    _viewportSize = elementSizeSignal(computed(() => this._scrollAmount.scrollTarget()));
+    _itemHeightPx = computed(() => this.itemHeight() ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_itemHeightPx" }] : /* istanbul ignore next */ []));
+    /**
+     * Vertical offset between the scroll container's top and the scroller element.
+     * Non-zero when a parent (e.g. table wrapper) owns the scroll and the scroller
+     * is positioned below other content (e.g. a sticky header row).
+     */
+    _scrollOffset = computed(() => {
+        const target = this._scrollAmount.scrollTarget();
+        if (target === this._el.nativeElement)
+            return 0;
+        return this._el.nativeElement.offsetTop;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollOffset" }] : /* istanbul ignore next */ []));
+    _visibleItemCount = computed(() => {
+        if (!this.virtual() || this._itemHeightPx() === 0) {
+            return 0;
+        }
+        return Math.ceil(this._viewportSize().height / this._itemHeightPx() + this.virtualPadding() * 2);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visibleItemCount" }] : /* istanbul ignore next */ []));
+    _scrollTop = computed(() => {
+        const raw = this._scrollAmount.scrollTop();
+        return Math.max(0, raw - this._scrollOffset());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scrollTop" }] : /* istanbul ignore next */ []));
+    /**
+     * The index of the first item that is rendered in the (virtual) scroller.
+     */
+    itemStartIndex = computed(() => {
+        if (!this.virtual() || this._itemHeightPx() === 0) {
+            return 0;
+        }
+        return Math.max(0, Math.ceil(this._scrollTop() / this._itemHeightPx()) - this.virtualPadding());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemStartIndex" }] : /* istanbul ignore next */ []));
+    _itemEndIndex = computed(() => this.virtual()
+        ? Math.min(this.items().length, this.itemStartIndex() + this._visibleItemCount())
+        : 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_itemEndIndex" }] : /* istanbul ignore next */ []));
+    paddingTop = computed(() => {
+        if (!this.virtual()) {
+            return 0;
+        }
+        return (this.itemStartIndex() - (this.latestStickyItem() ? 1 : 0)) * this._itemHeightPx();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paddingTop" }] : /* istanbul ignore next */ []));
+    paddingBottom = computed(() => {
+        if (!this.virtual()) {
+            return 0;
+        }
+        return (this.items().length - this._itemEndIndex()) * this._itemHeightPx();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paddingBottom" }] : /* istanbul ignore next */ []));
+    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,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    /**
+     * 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;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "latestStickyItem" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            if (this.virtual() && !this.itemHeight()) {
+                throw new NgnError('scroller', 'itemHeight 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, position = 'nearest') {
+        untracked(() => {
+            const scrollEl = this._scrollAmount.scrollTarget();
+            const offset = this._scrollOffset();
+            const getItemSize = () => {
+                if (this.virtual()) {
+                    const itemHeight = this._itemHeightPx();
+                    const itemTop = index * itemHeight + offset;
+                    return { itemHeight, itemTop };
+                }
+                else {
+                    let itemElement = this._el.nativeElement.children[index];
+                    while (!itemElement?.clientHeight && itemElement?.children.length) {
+                        itemElement = itemElement?.children[0];
+                    }
+                    if (itemElement) {
+                        const itemTop = itemElement.offsetTop;
+                        const itemHeight = itemElement.clientHeight;
+                        return { itemTop, itemHeight };
+                    }
+                    return null;
+                }
+            };
+            const size = getItemSize();
+            if (!size) {
+                return;
+            }
+            const { itemTop, itemHeight } = size;
+            scrollEl.scrollTo({
+                top: getScrollTop(itemTop, itemHeight, scrollEl.clientHeight, scrollEl.scrollTop, position),
+            });
+        });
+    }
+    track(item) {
+        const fieldId = this.fieldId();
+        if (fieldId) {
+            return item.item[fieldId];
+        }
+        return item.index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnScroller, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnScroller, isStandalone: true, selector: "ngn-scroller, [ngn-scroller]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", 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 }, virtualPadding: { classPropertyName: "virtualPadding", publicName: "virtualPadding", 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 } }, host: { properties: { "tabIndex": "focusable() ? 0 : -1", "style.--ngn-scroller-item-height.px": "itemHeight() ?? \"auto\"", "style.--ngn-scroller-padding-top.px": "paddingTop()", "style.--ngn-scroller-padding-bottom.px": "paddingBottom()" } }, providers: [provideSelf(NgnScroller)], usesInheritance: true, hostDirectives: [{ directive: i1.NgnScrollAmount, inputs: ["ngnScrollAmountContainer", "scrollContainer"] }], ngImport: i0, template: "@if (latestStickyItem(); as latestStickyItem) {\n  <ng-container\n    *ngTemplateOutlet=\"\n      itemTemplate();\n      context: { $implicit: latestStickyItem.item, index: latestStickyItem.index }\n    \"\n  ></ng-container>\n}\n\n@for (item of visibleItems(); track track(item)) {\n  <ng-container\n    *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item.item, index: item.index }\"\n  ></ng-container>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnScroller, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-scroller, [ngn-scroller]', imports: [NgTemplateOutlet], providers: [provideSelf(NgnScroller)], hostDirectives: [
+                        { directive: NgnScrollAmount, inputs: ['ngnScrollAmountContainer: scrollContainer'] },
+                    ], host: {
+                        '[tabIndex]': 'focusable() ? 0 : -1',
+                        '[style.--ngn-scroller-item-height.px]': 'itemHeight() ?? "auto"',
+                        '[style.--ngn-scroller-padding-top.px]': 'paddingTop()',
+                        '[style.--ngn-scroller-padding-bottom.px]': 'paddingBottom()',
+                    }, template: "@if (latestStickyItem(); as latestStickyItem) {\n  <ng-container\n    *ngTemplateOutlet=\"\n      itemTemplate();\n      context: { $implicit: latestStickyItem.item, index: latestStickyItem.index }\n    \"\n  ></ng-container>\n}\n\n@for (item of visibleItems(); track track(item)) {\n  <ng-container\n    *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item.item, index: item.index }\"\n  ></ng-container>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: false }] }], virtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtual", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], virtualPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualPadding", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], fieldSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldSticky", required: false }] }] } });
+
+class NgnScrollerItem {
+    _el = inject((ElementRef));
+    /**
+     * The item bound to this element. Used to resolve its sticky state and apply
+     * the scroller's item classes from the enclosing {@link NgnScroller}.
+     */
+    ngnScrollerItem = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ngnScrollerItem" }] : /* istanbul ignore next */ []));
+    _scroller = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_scroller" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        if (!this._el.nativeElement.isConnected) {
+            return;
+        }
+        const parentInstance = getNearestNgnInstance(this._el.nativeElement, NgnScroller);
+        if (!parentInstance) {
+            throw new NgnError('scroller', 'ngnScrollerItem must be used within an NgnScroller component');
+        }
+        this._scroller.set(parentInstance);
+    }
+    constructor() {
+        let prevItemClass = '';
+        let prevStickyClass = '';
+        effect(() => {
+            const item = this.ngnScrollerItem();
+            const scroller = this._scroller();
+            if (!item || !scroller) {
+                return;
+            }
+            const stickyField = scroller.fieldSticky();
+            const isSticky = !!stickyField && stickyField in item ? !!item[stickyField] : false;
+            const stickyClass = scroller['theme'].class('item-sticky');
+            if (prevStickyClass && prevStickyClass !== stickyClass) {
+                toggleClass(this._el.nativeElement, prevStickyClass, false);
+            }
+            toggleClass(this._el.nativeElement, stickyClass, isSticky);
+            prevStickyClass = stickyClass;
+            const itemClass = scroller['theme'].class('item');
+            if (prevItemClass && prevItemClass !== itemClass) {
+                toggleClass(this._el.nativeElement, prevItemClass, false);
+            }
+            toggleClass(this._el.nativeElement, itemClass, true);
+            prevItemClass = itemClass;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnScrollerItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnScrollerItem, isStandalone: true, selector: "[ngnScrollerItem]", inputs: { ngnScrollerItem: { classPropertyName: "ngnScrollerItem", publicName: "ngnScrollerItem", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnScrollerItem, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngnScrollerItem]' }]
+        }], ctorParameters: () => [], propDecorators: { ngnScrollerItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnScrollerItem", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnScroller, NgnScrollerItem };
+//# sourceMappingURL=ngneers-controls-scroller.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-scroller.mjs","sources":["../../src/scroller/scroller-templates.ts","../../src/scroller/scroller.ts","../../src/scroller/scroller.html","../../src/scroller/scroller-item.ts","../../src/scroller/ngneers-controls-scroller.ts"],"sourcesContent":["import { computed, contentChild, Directive, input, TemplateRef } from '@angular/core';\nimport { templateTypesFn } from '@ngneers/controls/api/ng';\nimport { NgnBase } from '@ngneers/controls/base';\n\n@Directive()\nexport abstract class ScrollerTemplates<T> extends NgnBase<'scroller'> {\n  /**\n   * The template to be used for rendering each item in the scroller.\n   * Can also be set using the `item` content child.\n   */\n  public readonly templateItem = input<TemplateRef<typeof this.templateTypes.item> | null>(null);\n  private readonly _userItemTemplate =\n    contentChild<TemplateRef<typeof this.templateTypes.item>>('item');\n  protected readonly itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem());\n\n  /**\n   * Template types for the scroller.\n   * Can be used with the {@link NgnTemplate} directive for type safe ng-templates.\n   */\n  public readonly templateTypes = templateTypesFn<{\n    item: {\n      $implicit: T;\n      index: number;\n    };\n  }>();\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  untracked,\n} from '@angular/core';\nimport { elementSizeSignal } from '@ngneers/controls/api/ng';\nimport { provideSelf } from '@ngneers/controls/base';\nimport { NgnScrollAmount } from '@ngneers/controls/directives';\nimport { type AllKeysOfUnion, getScrollTop, NgnError } from '@ngneers/controls/utils';\nimport { scrollerControlTemplate } from '@ngneers/controls-themes/templates/scroller';\n\nimport { ScrollerTemplates } from './scroller-templates';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-scroller, [ngn-scroller]',\n  templateUrl: './scroller.html',\n  imports: [NgTemplateOutlet],\n  providers: [provideSelf(NgnScroller)],\n  hostDirectives: [\n    { directive: NgnScrollAmount, inputs: ['ngnScrollAmountContainer: scrollContainer'] },\n  ],\n  host: {\n    '[tabIndex]': 'focusable() ? 0 : -1',\n    '[style.--ngn-scroller-item-height.px]': 'itemHeight() ?? \"auto\"',\n    '[style.--ngn-scroller-padding-top.px]': 'paddingTop()',\n    '[style.--ngn-scroller-padding-bottom.px]': 'paddingBottom()',\n  },\n})\nexport class NgnScroller<T> extends ScrollerTemplates<T> {\n  protected readonly theme = this.injectThemeTemplate(scrollerControlTemplate, {\n    root: true,\n    virtual: () => !!this.virtual(),\n  });\n  private readonly _el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly _scrollAmount = inject(NgnScrollAmount);\n\n  /**\n   * The items to be displayed in the scroller.\n   * This is a required input and should be an array of items of type {@link T}.\n   */\n  public readonly items = input.required<readonly T[]>();\n  /**\n   * The field of the item that uniquely identifies it.\n   */\n  public readonly fieldId = input<keyof T>();\n  /**\n   * Whether the scroller should use virtual scrolling.\n   * When set to true, the scroller will only render the items that are currently visible\n   * on the screen, improving performance for large lists.\n   *\n   * When virtual scrolling is enabled, {@link itemHeight} must be set to a non-zero value.\n   * @default `false`\n   */\n  public readonly virtual = input(false, { transform: booleanAttribute });\n  /**\n   * When {@link virtual} scrolling is enabled, this input is required to define the height of each item in pixels.\n   */\n  public readonly itemHeight = input<number | undefined>(undefined);\n  /**\n   * When {@link virtual} scrolling is enabled, this input defines the number of items to be rendered above and below the visible area.\n   * This can help to reduce flickering when scrolling.\n   * @default `2`\n   */\n  public readonly virtualPadding = input<number>(2);\n  /**\n   * Determines whether the scroller should have a tab index and be focusable.\n   * @default `false`\n   */\n  public readonly focusable = input(false, { transform: booleanAttribute });\n  /**\n   * Determines whether an item is sticky or not.\n   * If set, the scroller will stick the items with a truthy value for the specified field to the top of the scroller.\n   */\n  public readonly fieldSticky = input<AllKeysOfUnion<T> | null>(null);\n\n  /**\n   * Viewport size — tracks the scroll ancestor's dimensions so that virtual\n   * scrolling works when an outer element handles overflow (e.g. table wrapper).\n   */\n  private readonly _viewportSize = elementSizeSignal(\n    computed(() => this._scrollAmount.scrollTarget())\n  );\n\n  private readonly _itemHeightPx = computed(() => this.itemHeight() ?? 0);\n\n  /**\n   * Vertical offset between the scroll container's top and the scroller element.\n   * Non-zero when a parent (e.g. table wrapper) owns the scroll and the scroller\n   * is positioned below other content (e.g. a sticky header row).\n   */\n  private readonly _scrollOffset = computed(() => {\n    const target = this._scrollAmount.scrollTarget();\n    if (target === this._el.nativeElement) return 0;\n    return this._el.nativeElement.offsetTop;\n  });\n\n  private readonly _visibleItemCount = computed(() => {\n    if (!this.virtual() || this._itemHeightPx() === 0) {\n      return 0;\n    }\n    return Math.ceil(\n      this._viewportSize().height / this._itemHeightPx() + this.virtualPadding() * 2\n    );\n  });\n  private readonly _scrollTop = computed(() => {\n    const raw = this._scrollAmount.scrollTop();\n    return Math.max(0, raw - this._scrollOffset());\n  });\n  /**\n   * The index of the first item that is rendered in the (virtual) scroller.\n   */\n  public readonly itemStartIndex = computed(() => {\n    if (!this.virtual() || this._itemHeightPx() === 0) {\n      return 0;\n    }\n    return Math.max(0, Math.ceil(this._scrollTop() / this._itemHeightPx()) - this.virtualPadding());\n  });\n  private readonly _itemEndIndex = computed(() =>\n    this.virtual()\n      ? Math.min(this.items().length, this.itemStartIndex() + this._visibleItemCount())\n      : 0\n  );\n\n  protected readonly paddingTop = computed(() => {\n    if (!this.virtual()) {\n      return 0;\n    }\n    return (this.itemStartIndex() - (this.latestStickyItem() ? 1 : 0)) * this._itemHeightPx();\n  });\n\n  protected readonly paddingBottom = computed(() => {\n    if (!this.virtual()) {\n      return 0;\n    }\n    return (this.items().length - this._itemEndIndex()) * this._itemHeightPx();\n  });\n\n  protected readonly visibleItems = computed(() => {\n    if (!this.virtual()) {\n      return this.items().map((item, index) => ({ item, index }));\n    }\n    return this.items()\n      .slice(this.itemStartIndex(), this._itemEndIndex())\n      .map((item, index) => {\n        return {\n          item,\n          index: this.itemStartIndex() + index,\n        };\n      });\n  });\n\n  /**\n   * Returns the last sticky item that is not rendered regularly in the list.\n   * Required because sticky items might need to be rendered longer than they would.\n   * Only applicable when virtual scrolling is enabled.\n   */\n  protected readonly latestStickyItem = computed(() => {\n    if (!this.virtual()) {\n      return null;\n    }\n    const stickyField = this.fieldSticky();\n    if (!stickyField) {\n      return null;\n    }\n    const unrenderedItemsAtTop = this.items()\n      .slice(0, this.itemStartIndex())\n      .map((item, index) => ({\n        item,\n        index,\n      }));\n    const stickyItems = unrenderedItemsAtTop.filter(item => item.item[stickyField]);\n    return stickyItems[stickyItems.length - 1] ?? null;\n  });\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.virtual() && !this.itemHeight()) {\n        throw new NgnError('scroller', 'itemHeight must be set when virtual is true');\n      }\n    });\n  }\n\n  /**\n   * Scrolls the item with the given index into view.\n   * @param index The index of the item to scroll to.\n   */\n  public scrollToIndex(index: number, position: ScrollLogicalPosition = 'nearest') {\n    untracked(() => {\n      const scrollEl = this._scrollAmount.scrollTarget();\n      const offset = this._scrollOffset();\n\n      const getItemSize = () => {\n        if (this.virtual()) {\n          const itemHeight = this._itemHeightPx();\n          const itemTop = index * itemHeight + offset;\n          return { itemHeight, itemTop };\n        } else {\n          let itemElement = this._el.nativeElement.children[index] as HTMLElement | null;\n          while (!itemElement?.clientHeight && itemElement?.children.length) {\n            itemElement = itemElement?.children[0] as HTMLElement | null;\n          }\n          if (itemElement) {\n            const itemTop = itemElement.offsetTop;\n            const itemHeight = itemElement.clientHeight;\n            return { itemTop, itemHeight };\n          }\n          return null;\n        }\n      };\n      const size = getItemSize();\n      if (!size) {\n        return;\n      }\n      const { itemTop, itemHeight } = size;\n      scrollEl.scrollTo({\n        top: getScrollTop(itemTop, itemHeight, scrollEl.clientHeight, scrollEl.scrollTop, position),\n      });\n    });\n  }\n\n  protected track(item: { item: T; index: number }): unknown {\n    const fieldId = this.fieldId();\n    if (fieldId) {\n      return item.item[fieldId];\n    }\n    return item.index;\n  }\n}\n","@if (latestStickyItem(); as latestStickyItem) {\n  <ng-container\n    *ngTemplateOutlet=\"\n      itemTemplate();\n      context: { $implicit: latestStickyItem.item, index: latestStickyItem.index }\n    \"\n  ></ng-container>\n}\n\n@for (item of visibleItems(); track track(item)) {\n  <ng-container\n    *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item.item, index: item.index }\"\n  ></ng-container>\n}\n","import {\n  type AfterViewInit,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { getNearestNgnInstance } from '@ngneers/controls/base';\nimport { NgnError, toggleClass } from '@ngneers/controls/utils';\n\nimport { NgnScroller } from './scroller';\n\n@Directive({ selector: '[ngnScrollerItem]' })\nexport class NgnScrollerItem implements AfterViewInit {\n  private readonly _el = inject(ElementRef<HTMLElement>);\n  /**\n   * The item bound to this element. Used to resolve its sticky state and apply\n   * the scroller's item classes from the enclosing {@link NgnScroller}.\n   */\n  public readonly ngnScrollerItem = input.required<object>();\n  private readonly _scroller = signal<NgnScroller<unknown> | null>(null);\n\n  public ngAfterViewInit() {\n    if (!this._el.nativeElement.isConnected) {\n      return;\n    }\n    const parentInstance = getNearestNgnInstance(this._el.nativeElement, NgnScroller);\n    if (!parentInstance) {\n      throw new NgnError(\n        'scroller',\n        'ngnScrollerItem must be used within an NgnScroller component'\n      );\n    }\n    this._scroller.set(parentInstance);\n  }\n\n  constructor() {\n    let prevItemClass = '';\n    let prevStickyClass = '';\n    effect(() => {\n      const item = this.ngnScrollerItem() as Record<string, unknown> | null;\n      const scroller = this._scroller();\n      if (!item || !scroller) {\n        return;\n      }\n      const stickyField = scroller.fieldSticky() as unknown as string | null;\n      const isSticky = !!stickyField && stickyField in item ? !!item[stickyField] : false;\n\n      const stickyClass = scroller['theme'].class('item-sticky');\n      if (prevStickyClass && prevStickyClass !== stickyClass) {\n        toggleClass(this._el.nativeElement, prevStickyClass, false);\n      }\n      toggleClass(this._el.nativeElement, stickyClass, isSticky);\n      prevStickyClass = stickyClass;\n\n      const itemClass = scroller['theme'].class('item');\n      if (prevItemClass && prevItemClass !== itemClass) {\n        toggleClass(this._el.nativeElement, prevItemClass, false);\n      }\n      toggleClass(this._el.nativeElement, itemClass, true);\n      prevItemClass = itemClass;\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-select-button.mjs

@@ -0,0 +1,58 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnButtonGroup } from '@ngneers/controls/button-group';
+import { NgnToggleButton } from '@ngneers/controls/toggle-button';
+import { maybeCallback } from '@ngneers/controls/utils';
+import { selectButtonControlTemplate } from '@ngneers/controls-themes/templates/select-button';
+
+/**
+ * @category control
+ */
+class NgnSelectButton extends ValueControlBase {
+    theme = this.injectThemeTemplate(selectButtonControlTemplate, {
+        root: true,
+        invalid: () => this.invalid(),
+    });
+    /**
+     * Defines the orientation of the select buttons.
+     * - 'auto' - The orientation is determined based on the available space.
+     * - 'horizontal' - The buttons are arranged horizontally. (Default for `auto` if enough space)
+     * - 'vertical' - The buttons are arranged vertically.
+     * @default 'auto'
+     */
+    orientation = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines the options for the select button.
+     */
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, allows unselecting the currently selected option by clicking on it again.
+     * If `false`, clicking on the selected option will not change the selection.
+     * @default false
+     */
+    allowUnselect = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allowUnselect" }] : /* istanbul ignore next */ []));
+    maybeCallback = maybeCallback;
+    valueChange(value) {
+        if (this.value() === value && !this.allowUnselect()) {
+            return;
+        }
+        this.value.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSelectButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnSelectButton, isStandalone: true, selector: "ngn-select-button", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, allowUnselect: { classPropertyName: "allowUnselect", publicName: "allowUnselect", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnSelectButton)], usesInheritance: true, ngImport: i0, template: "<ngn-button-group\n  [orientation]=\"orientation()\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [ptInt]=\"this\"\n  [ptDep]=\"'group'\"\n>\n  @for (item of options(); track item.value) {\n    <ngn-toggle-button\n      [label]=\"maybeCallback(item.label)\"\n      [icon]=\"item.icon\"\n      [fixedWidth]=\"true\"\n      (valueChange)=\"valueChange(item.value)\"\n      [value]=\"value() === item.value\"\n      [readonly]=\"readonly() || (value() === item.value && !allowUnselect())\"\n      [attr.data-testid]=\"item.testId\"\n      [disabled]=\"disabled()\"\n      [ptInt]=\"this\"\n      [ptDep]=\"'button'\"\n    />\n  }\n</ngn-button-group>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnButtonGroup, selector: "ngn-button-group", inputs: ["orientation"] }, { kind: "component", type: NgnToggleButton, selector: "ngn-toggle-button", inputs: ["labelOn", "labelOff", "icon", "iconOn", "iconOff", "fixedWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSelectButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-select-button', imports: [NgnPt, NgnButtonGroup, NgnToggleButton], providers: [provideSelf(NgnSelectButton)], template: "<ngn-button-group\n  [orientation]=\"orientation()\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [ptInt]=\"this\"\n  [ptDep]=\"'group'\"\n>\n  @for (item of options(); track item.value) {\n    <ngn-toggle-button\n      [label]=\"maybeCallback(item.label)\"\n      [icon]=\"item.icon\"\n      [fixedWidth]=\"true\"\n      (valueChange)=\"valueChange(item.value)\"\n      [value]=\"value() === item.value\"\n      [readonly]=\"readonly() || (value() === item.value && !allowUnselect())\"\n      [attr.data-testid]=\"item.testId\"\n      [disabled]=\"disabled()\"\n      [ptInt]=\"this\"\n      [ptDep]=\"'button'\"\n    />\n  }\n</ngn-button-group>\n" }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], allowUnselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowUnselect", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnSelectButton };
+//# sourceMappingURL=ngneers-controls-select-button.mjs.map

package/fesm2022/ngneers-controls-select-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-select-button.mjs","sources":["../../src/select-button/select-button.ts","../../src/select-button/select-button.html","../../src/select-button/ngneers-controls-select-button.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\nimport { NgnPt, provideSelf, ValueControlBase } from '@ngneers/controls/base';\nimport { NgnButtonGroup } from '@ngneers/controls/button-group';\nimport { NgnToggleButton } from '@ngneers/controls/toggle-button';\nimport { maybeCallback } from '@ngneers/controls/utils';\nimport { selectButtonControlTemplate } from '@ngneers/controls-themes/templates/select-button';\n\nimport type { NgnActionItemFlat, NgnItem } from '@ngneers/controls/api';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-select-button',\n  templateUrl: './select-button.html',\n  imports: [NgnPt, NgnButtonGroup, NgnToggleButton],\n  providers: [provideSelf(NgnSelectButton)],\n})\nexport class NgnSelectButton<V> extends ValueControlBase<'selectButton', V> {\n  protected readonly theme = this.injectThemeTemplate(selectButtonControlTemplate, {\n    root: true,\n    invalid: () => this.invalid(),\n  });\n\n  /**\n   * Defines the orientation of the select buttons.\n   * - 'auto' - The orientation is determined based on the available space.\n   * - 'horizontal' - The buttons are arranged horizontally. (Default for `auto` if enough space)\n   * - 'vertical' - The buttons are arranged vertically.\n   * @default 'auto'\n   */\n  public readonly orientation = input<'auto' | 'horizontal' | 'vertical'>('auto');\n  /**\n   * Defines the options for the select button.\n   */\n  public readonly options = input.required<readonly NgnActionItemFlat<NgnItem<unknown, V>>[]>();\n  /**\n   * When `true`, allows unselecting the currently selected option by clicking on it again.\n   * If `false`, clicking on the selected option will not change the selection.\n   * @default false\n   */\n  public readonly allowUnselect = input<boolean>(false);\n\n  protected readonly maybeCallback = maybeCallback;\n\n  protected valueChange(value: V) {\n    if (this.value() === value && !this.allowUnselect()) {\n      return;\n    }\n    this.value.set(value);\n  }\n}\n","<ngn-button-group\n  [orientation]=\"orientation()\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [ptInt]=\"this\"\n  [ptDep]=\"'group'\"\n>\n  @for (item of options(); track item.value) {\n    <ngn-toggle-button\n      [label]=\"maybeCallback(item.label)\"\n      [icon]=\"item.icon\"\n      [fixedWidth]=\"true\"\n      (valueChange)=\"valueChange(item.value)\"\n      [value]=\"value() === item.value\"\n      [readonly]=\"readonly() || (value() === item.value && !allowUnselect())\"\n      [attr.data-testid]=\"item.testId\"\n      [disabled]=\"disabled()\"\n      [ptInt]=\"this\"\n      [ptDep]=\"'button'\"\n    />\n  }\n</ngn-button-group>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEG;AAOG,MAAO,eAAmB,SAAQ,gBAAmC,CAAA;AACtD,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,2BAA2B,EAAE;AAC/E,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE;AAC9B,KAAA,CAAC;AAEF;;;;;;AAMG;IACa,WAAW,GAAG,KAAK,CAAqC,MAAM;oFAAC;AAC/E;;AAEG;IACa,OAAO,GAAG,KAAK,CAAC,QAAQ;gFAAqD;AAC7F;;;;AAIG;IACa,aAAa,GAAG,KAAK,CAAU,KAAK;sFAAC;IAElC,aAAa,GAAG,aAAa;AAEtC,IAAA,WAAW,CAAC,KAAQ,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACnD;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;uGAhCW,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAFf,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChB3C,6qBAsBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDPY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,sFAAE,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGrC,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,OAAA,EAEpB,CAAC,KAAK,EAAE,cAAc,EAAE,eAAe,CAAC,EAAA,SAAA,EACtC,CAAC,WAAW,CAAA,eAAA,CAAiB,CAAC,EAAA,QAAA,EAAA,6qBAAA,EAAA;;;AEhB3C;;AAEG;;;;"}