@ngneers/controls 0.0.1-pre1 → 0.0.1-pre2

package/fesm2022/ngneers-controls-menu.mjs

@@ -0,0 +1,332 @@
+import * as i0 from '@angular/core';
+import { viewChild, contentChild, input, computed, Directive, booleanAttribute, output, model, inject, viewChildren, signal, effect, ChangeDetectionStrategy, Component, ElementRef, ViewContainerRef } from '@angular/core';
+import { templateTypesFn, Platform, NgnTemplate, domEventHandler, setComponentInput } from '@ngneers/controls/api/ng';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnAutofocus } from '@ngneers/controls/directives';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { NgnPopover } from '@ngneers/controls/popover';
+import { maybeCallback, NgnError } from '@ngneers/controls/utils';
+import { generateElementId, effectWithPrevious, explicitEffect } from '@ngneers/controls/utils-ng';
+import { menuControlTemplate } from '@ngneers/controls-themes/templates/menu';
+
+class MenuTemplates extends NgnBase {
+    // Item template
+    _defaultItemTemplate = viewChild.required('defaultItemTemplate');
+    _userItemTemplate = contentChild('item', ...(ngDevMode ? [{ debugName: "_userItemTemplate" }] : []));
+    /**
+     * Set a custom template for an item of the menu.
+     * Can also be set using an `<ng-template>` element with `#item` template reference variable.
+     */
+    templateItem = input(null, ...(ngDevMode ? [{ debugName: "templateItem" }] : []));
+    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem() ?? this._defaultItemTemplate(), ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    // Group template
+    _defaultGroupTemplate = viewChild.required('defaultGroupTemplate');
+    _userGroupTemplate = contentChild('group', ...(ngDevMode ? [{ debugName: "_userGroupTemplate" }] : []));
+    /**
+     * Set a custom template for a group of items in the menu.
+     * Can also be set using an `<ng-template>` element with `#group` template reference variable.
+     */
+    templateGroup = input(null, ...(ngDevMode ? [{ debugName: "templateGroup" }] : []));
+    groupTemplate = computed(() => this._userGroupTemplate() ?? this.templateGroup() ?? this._defaultGroupTemplate(), ...(ngDevMode ? [{ debugName: "groupTemplate" }] : []));
+    /**
+     * Types for the dialog templates.
+     */
+    templateTypes = templateTypesFn();
+    internalTemplateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: MenuTemplates, isStandalone: true, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MenuTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { _defaultItemTemplate: [{ type: i0.ViewChild, args: ['defaultItemTemplate', { isSignal: true }] }], _userItemTemplate: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], templateItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateItem", required: false }] }], _defaultGroupTemplate: [{ type: i0.ViewChild, args: ['defaultGroupTemplate', { isSignal: true }] }], _userGroupTemplate: [{ type: i0.ContentChild, args: ['group', { isSignal: true }] }], templateGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateGroup", required: false }] }] } });
+
+/**
+ * @category control
+ */
+class NgnMenu extends MenuTemplates {
+    theme = this.injectThemeTemplate(menuControlTemplate, {
+        submenu: () => this.isSubMenu(),
+    });
+    elementId = input(generateElementId(), ...(ngDevMode ? [{ debugName: "elementId" }] : []));
+    /**
+     * The element to which the menu is anchored. Required if `popover` is true.
+     */
+    anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : []));
+    /**
+     * The menu items to display.
+     */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    /**
+     * Whether to automatically set ARIA attributes on the anchor element.
+     * @default true if anchor is an HTMLButtonElement, false otherwise.
+     */
+    autoAnchorAria = input(...(ngDevMode ? [undefined, { debugName: "autoAnchorAria" }] : []));
+    /**
+     * Whether the menu is a popover. Requires `anchor` to be set.
+     */
+    popover = input(false, { ...(ngDevMode ? { debugName: "popover" } : {}), transform: booleanAttribute });
+    /**
+     * The placement of the menu relative to the anchor element. Only used if `popover` is true.
+     * @default 'bottom-start'
+     */
+    placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    /**
+     * Icon type for children indicator (submenu indicator). If not set, a default icon will be used.
+     */
+    iconSubmenuIndicator = input(...(ngDevMode ? [undefined, { debugName: "iconSubmenuIndicator" }] : []));
+    /**
+     * Whether this menu is a submenu. Used internally.
+     * @internal
+     */
+    isSubMenu = input(false, { ...(ngDevMode ? { debugName: "isSubMenu" } : {}), transform: booleanAttribute });
+    /**
+     * Whether to open submenus on hover. Defaults to true in popover mode.
+     * @default popover()
+     */
+    openSubmenuOnHover = input(false, { ...(ngDevMode ? { debugName: "openSubmenuOnHover" } : {}), transform: booleanAttribute });
+    /**
+     * Emitted when the menu is fully closed.
+     */
+    closed = output();
+    /**
+     * Emitted when the menu is about to close.
+     */
+    closing = output();
+    /**
+     * Emitted when all menus should be closed (including parent menus). Used internally.
+     * @internal
+     */
+    closeAll = output();
+    /**
+     * Shows or hides the menu.
+     *
+     * You probably want to react to openChange events from outside to update your variable accordingly.
+     */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    maybeCallback = maybeCallback;
+    _isTouchDevice = inject(Platform).isTouchDevice;
+    _popover = viewChild(NgnPopover, ...(ngDevMode ? [{ debugName: "_popover" }] : []));
+    _menuItems = viewChildren('menuItem', ...(ngDevMode ? [{ debugName: "_menuItems" }] : []));
+    _childMenus = viewChildren(NgnMenu, ...(ngDevMode ? [{ debugName: "_childMenus" }] : []));
+    _openSubmenuOnHover = computed(() => this.openSubmenuOnHover() ?? this.popover(), ...(ngDevMode ? [{ debugName: "_openSubmenuOnHover" }] : []));
+    autofocus = signal(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : []));
+    constructor() {
+        super();
+        effect(() => {
+            if (this.popover() && !this.anchor()) {
+                throw new NgnError('NgnMenu', 'When using popover mode, the anchor input must be provided.');
+            }
+        });
+        const autoAriaEnabled = computed(() => {
+            if (this.autoAnchorAria() !== undefined) {
+                return this.autoAnchorAria();
+            }
+            return this.anchor() instanceof HTMLButtonElement;
+        }, ...(ngDevMode ? [{ debugName: "autoAriaEnabled" }] : []));
+        effectWithPrevious(this.anchor, (current, previous) => {
+            if (previous instanceof HTMLElement && autoAriaEnabled()) {
+                previous.removeAttribute('aria-controls');
+                previous.removeAttribute('aria-expanded');
+                previous.removeAttribute('aria-haspopup');
+            }
+            if (current instanceof HTMLElement && autoAriaEnabled()) {
+                current.setAttribute('aria-controls', `${this.elementId()}_menu`);
+                current.setAttribute('aria-haspopup', 'menu');
+            }
+        });
+        effect(() => {
+            const anchor = this.anchor();
+            if (anchor instanceof HTMLElement && autoAriaEnabled()) {
+                anchor.setAttribute('aria-expanded', this.open() ? 'true' : 'false');
+            }
+        });
+        explicitEffect([this.open], ([open]) => {
+            if (!open) {
+                if (this._popover()?.open()) {
+                    this.hide();
+                }
+            }
+            if (open) {
+                if (!this._popover()?.open()) {
+                    this.show(this.autofocus());
+                }
+            }
+        });
+    }
+    /**
+     * Shows the menu.
+     * @param focus Whether to focus the menu after showing it. Defaults to `true`.
+     */
+    show(focus = true) {
+        if (!this.popover()) {
+            throw new NgnError('NgnMenu', 'The show() method can only be used when popover mode is enabled.');
+        }
+        this._popover()?.show();
+        this.autofocus.set(focus);
+    }
+    /**
+     * Hides the menu.
+     * @param emitCloseEvent Whether to emit the close event. Defaults to `true`.
+     */
+    hide(emitCloseEvent = true) {
+        if (!this.popover()) {
+            throw new NgnError('NgnMenu', 'The hide() method can only be used when popover mode is enabled.');
+        }
+        this._popover()?.hide(emitCloseEvent);
+    }
+    /**
+     * Toggles the menu open or closed.
+     */
+    toggle() {
+        if (!this.popover()) {
+            throw new NgnError('NgnMenu', 'The toggle() method can only be used when popover mode is enabled.');
+        }
+        const popoverEl = this._popover();
+        if (!popoverEl) {
+            throw new NgnError('NgnMenu', 'Popover element is not available.');
+        }
+        if (popoverEl.open()) {
+            popoverEl.hide();
+        }
+        else {
+            popoverEl.open();
+        }
+    }
+    handleKeydown(event, subMenu) {
+        let currentIndex = this._menuItems()
+            .map(x => x.nativeElement)
+            .indexOf(event.target);
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (event.key === 'ArrowDown') {
+                currentIndex++;
+            }
+            else if (event.key === 'ArrowUp') {
+                currentIndex--;
+            }
+            if (currentIndex < 0) {
+                currentIndex = this._menuItems().length - 1;
+            }
+            else if (currentIndex >= this._menuItems().length) {
+                currentIndex = 0;
+            }
+            this._menuItems()[currentIndex]?.nativeElement.focus();
+        }
+        else if (event.key === 'ArrowRight' && subMenu) {
+            this.openChildMenu(subMenu, null, 'arrow');
+        }
+        else if (event.key === 'ArrowLeft' && this.isSubMenu()) {
+            this._popover()?.hide();
+        }
+    }
+    doCloseAll() {
+        this.hide();
+        // Delay the closing of the parents to ensure the children close first (for animation purposes)
+        requestAnimationFrame(() => {
+            this.closeAll.emit();
+        });
+    }
+    itemClicked(item) {
+        if (this.popover()) {
+            this.doCloseAll();
+        }
+        if ('callback' in item) {
+            item.callback?.();
+        }
+    }
+    closeChildMenus(closeBy, menuItem) {
+        if (closeBy === 'hover') {
+            if (this._isTouchDevice() || !this._openSubmenuOnHover()) {
+                return;
+            }
+            if (this._openSubmenuOnHover()) {
+                menuItem?.focus();
+            }
+        }
+        this._childMenus().forEach(menu => {
+            menu.hide(false);
+        });
+    }
+    openChildMenu(childMenu, menuItem, openBy) {
+        if (openBy === 'hover') {
+            if (this._isTouchDevice() || !this._openSubmenuOnHover()) {
+                return;
+            }
+        }
+        if (childMenu.open()) {
+            menuItem?.focus();
+            return;
+        }
+        this.closeChildMenus(openBy, menuItem);
+        setTimeout(() => {
+            childMenu.show(openBy === 'arrow');
+        });
+    }
+    popoverOpenChange(newState) {
+        this.open.set(newState);
+    }
+    popoverClosed() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnMenu, isStandalone: true, selector: "ngn-menu", inputs: { elementId: { classPropertyName: "elementId", publicName: "elementId", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, autoAnchorAria: { classPropertyName: "autoAnchorAria", publicName: "autoAnchorAria", isSignal: true, isRequired: false, transformFunction: null }, popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, iconSubmenuIndicator: { classPropertyName: "iconSubmenuIndicator", publicName: "iconSubmenuIndicator", isSignal: true, isRequired: false, transformFunction: null }, isSubMenu: { classPropertyName: "isSubMenu", publicName: "isSubMenu", isSignal: true, isRequired: false, transformFunction: null }, openSubmenuOnHover: { classPropertyName: "openSubmenuOnHover", publicName: "openSubmenuOnHover", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", closing: "closing", closeAll: "closeAll", open: "openChange" }, providers: [provideSelf(NgnMenu)], viewQueries: [{ propertyName: "_popover", first: true, predicate: NgnPopover, descendants: true, isSignal: true }, { propertyName: "_menuItems", predicate: ["menuItem"], descendants: true, isSignal: true }, { propertyName: "_childMenus", predicate: NgnMenu, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (popover() && anchor(); as anchor) {\r\n  <ngn-popover\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'popover'\"\r\n    [anchor]=\"anchor\"\r\n    [options]=\"{ placement: placement(), padding: isSubMenu() ? 0 : undefined }\"\r\n    (openChange)=\"popoverOpenChange($event)\"\r\n    (closed)=\"popoverClosed()\"\r\n    (closing)=\"closing.emit()\"\r\n  >\r\n    <ng-template #lazy>\r\n      <ng-container *ngTemplateOutlet=\"menu\" />\r\n    </ng-template>\r\n  </ngn-popover>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menu\" />\r\n}\r\n\r\n<ng-template #menu>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'root'\" role=\"menu\" [tabIndex]=\"0\" [id]=\"elementId() + '_menu'\">\r\n    @for (item of items(); track 'id' in item ? item.id : item) {\r\n      @if ('separator' in item) {\r\n        <ng-container *ngTemplateOutlet=\"separatorTemplate\" />\r\n      } @else {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"regularItemTemplate; context: { $implicit: item, index: $index }\"\r\n        />\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #separatorTemplate>\r\n  <hr [ptInt]=\"this\" [ptClass]=\"'separator'\" />\r\n</ng-template>\r\n\r\n<ng-template\r\n  #regularItemTemplate\r\n  [ngnTemplate]=\"internalTemplateTypes.regularItem\"\r\n  let-item\r\n  let-index=\"index\"\r\n>\r\n  @if (item.children) {\r\n    <button\r\n      #menuItem\r\n      role=\"menuitem\"\r\n      aria-haspopup=\"menu\"\r\n      [aria-expanded]=\"childMenu.open()\"\r\n      [tabindex]=\"-1\"\r\n      [ngnAutofocus]=\"open() && autofocus() && index === 0\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"{\r\n        item: true,\r\n        'item-opened': childMenu.open(),\r\n      }\"\r\n      [disabled]=\"item.disabled\"\r\n      (click)=\"openChildMenu(childMenu, menuItem, 'click')\"\r\n      (mouseenter)=\"openChildMenu(childMenu, menuItem, 'hover')\"\r\n      (keydown)=\"handleKeydown($event, childMenu)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\r\n    </button>\r\n    <ngn-menu\r\n      #childMenu\r\n      [anchor]=\"menuItem\"\r\n      [items]=\"item.children\"\r\n      [placement]=\"'right-start'\"\r\n      [popover]=\"true\"\r\n      [isSubMenu]=\"true\"\r\n      (closing)=\"menuItem.focus()\"\r\n      (closeAll)=\"doCloseAll()\"\r\n      [elementId]=\"elementId() + '_submenu_' + item.id\"\r\n      [openSubmenuOnHover]=\"openSubmenuOnHover()\"\r\n    />\r\n  } @else {\r\n    <button\r\n      #menuItem\r\n      role=\"menuitem\"\r\n      [tabindex]=\"-1\"\r\n      [ngnAutofocus]=\"open() && autofocus() && index === 0\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'item'\"\r\n      [disabled]=\"item.disabled\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (click)=\"itemClicked(item)\"\r\n      (mouseenter)=\"closeChildMenus('hover', menuItem)\"\r\n      [routerLink]=\"item.route\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  {{ maybeCallback(item.label) }}\r\n  @if (item.children) {\r\n    <ngn-icon\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'icon-children'\"\r\n      defaultIcon=\"chevron_right\"\r\n      [icon]=\"iconSubmenuIndicator()\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate></ng-template>\r\n", dependencies: [{ kind: "component", type: NgnMenu, selector: "ngn-menu", inputs: ["elementId", "anchor", "items", "autoAnchorAria", "popover", "placement", "iconSubmenuIndicator", "isSubMenu", "openSubmenuOnHover", "open"], outputs: ["closed", "closing", "closeAll", "openChange"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgnAutofocus, selector: "[ngnAutofocus]", inputs: ["ngnAutofocus"] }, { kind: "component", type: NgnPopover, selector: "ngn-popover", inputs: ["open", "anchor", "options", "hasShrinkableContent", "closeBy"], outputs: ["closed", "closing", "openChange"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-menu', imports: [NgnPt, NgTemplateOutlet, NgnTemplate, NgnAutofocus, NgnPopover, NgnIcon, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideSelf(NgnMenu)], template: "@if (popover() && anchor(); as anchor) {\r\n  <ngn-popover\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'popover'\"\r\n    [anchor]=\"anchor\"\r\n    [options]=\"{ placement: placement(), padding: isSubMenu() ? 0 : undefined }\"\r\n    (openChange)=\"popoverOpenChange($event)\"\r\n    (closed)=\"popoverClosed()\"\r\n    (closing)=\"closing.emit()\"\r\n  >\r\n    <ng-template #lazy>\r\n      <ng-container *ngTemplateOutlet=\"menu\" />\r\n    </ng-template>\r\n  </ngn-popover>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menu\" />\r\n}\r\n\r\n<ng-template #menu>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'root'\" role=\"menu\" [tabIndex]=\"0\" [id]=\"elementId() + '_menu'\">\r\n    @for (item of items(); track 'id' in item ? item.id : item) {\r\n      @if ('separator' in item) {\r\n        <ng-container *ngTemplateOutlet=\"separatorTemplate\" />\r\n      } @else {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"regularItemTemplate; context: { $implicit: item, index: $index }\"\r\n        />\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #separatorTemplate>\r\n  <hr [ptInt]=\"this\" [ptClass]=\"'separator'\" />\r\n</ng-template>\r\n\r\n<ng-template\r\n  #regularItemTemplate\r\n  [ngnTemplate]=\"internalTemplateTypes.regularItem\"\r\n  let-item\r\n  let-index=\"index\"\r\n>\r\n  @if (item.children) {\r\n    <button\r\n      #menuItem\r\n      role=\"menuitem\"\r\n      aria-haspopup=\"menu\"\r\n      [aria-expanded]=\"childMenu.open()\"\r\n      [tabindex]=\"-1\"\r\n      [ngnAutofocus]=\"open() && autofocus() && index === 0\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"{\r\n        item: true,\r\n        'item-opened': childMenu.open(),\r\n      }\"\r\n      [disabled]=\"item.disabled\"\r\n      (click)=\"openChildMenu(childMenu, menuItem, 'click')\"\r\n      (mouseenter)=\"openChildMenu(childMenu, menuItem, 'hover')\"\r\n      (keydown)=\"handleKeydown($event, childMenu)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\r\n    </button>\r\n    <ngn-menu\r\n      #childMenu\r\n      [anchor]=\"menuItem\"\r\n      [items]=\"item.children\"\r\n      [placement]=\"'right-start'\"\r\n      [popover]=\"true\"\r\n      [isSubMenu]=\"true\"\r\n      (closing)=\"menuItem.focus()\"\r\n      (closeAll)=\"doCloseAll()\"\r\n      [elementId]=\"elementId() + '_submenu_' + item.id\"\r\n      [openSubmenuOnHover]=\"openSubmenuOnHover()\"\r\n    />\r\n  } @else {\r\n    <button\r\n      #menuItem\r\n      role=\"menuitem\"\r\n      [tabindex]=\"-1\"\r\n      [ngnAutofocus]=\"open() && autofocus() && index === 0\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'item'\"\r\n      [disabled]=\"item.disabled\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (click)=\"itemClicked(item)\"\r\n      (mouseenter)=\"closeChildMenus('hover', menuItem)\"\r\n      [routerLink]=\"item.route\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  {{ maybeCallback(item.label) }}\r\n  @if (item.children) {\r\n    <ngn-icon\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'icon-children'\"\r\n      defaultIcon=\"chevron_right\"\r\n      [icon]=\"iconSubmenuIndicator()\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate></ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { elementId: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementId", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], autoAnchorAria: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoAnchorAria", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], iconSubmenuIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSubmenuIndicator", required: false }] }], isSubMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenu", required: false }] }], openSubmenuOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "openSubmenuOnHover", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], closing: [{ type: i0.Output, args: ["closing"] }], closeAll: [{ type: i0.Output, args: ["closeAll"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], _popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnPopover), { isSignal: true }] }], _menuItems: [{ type: i0.ViewChildren, args: ['menuItem', { isSignal: true }] }], _childMenus: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => NgnMenu), { isSignal: true }] }] } });
+
+class NgnContextMenu {
+    _elementRef = inject(ElementRef);
+    _vcr = inject(ViewContainerRef);
+    _menu;
+    ngnContextMenu = input.required(...(ngDevMode ? [{ debugName: "ngnContextMenu" }] : []));
+    constructor() {
+        domEventHandler(this._elementRef, 'contextmenu', this.handleClick.bind(this));
+    }
+    ngOnDestroy() {
+        this._menu?.destroy();
+    }
+    handleClick(event) {
+        if (event.button !== 2) {
+            return;
+        }
+        if (this._menu?.instance.open()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.openMenu(event);
+        return false;
+    }
+    createMenu() {
+        if (!this._menu) {
+            this._menu = this._vcr.createComponent(NgnMenu);
+        }
+        return this._menu;
+    }
+    openMenu(event) {
+        const menu = this.createMenu();
+        setComponentInput(menu, 'items', this.ngnContextMenu());
+        setComponentInput(menu, 'anchor', { x: event.clientX, y: event.clientY });
+        setComponentInput(menu, 'popover', true);
+        setTimeout(() => {
+            menu.instance.show();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: NgnContextMenu, isStandalone: true, selector: "[ngnContextMenu]", inputs: { ngnContextMenu: { classPropertyName: "ngnContextMenu", publicName: "ngnContextMenu", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnContextMenu, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ngnContextMenu]' }]
+        }], ctorParameters: () => [], propDecorators: { ngnContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngnContextMenu", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnContextMenu, NgnMenu };
+//# sourceMappingURL=ngneers-controls-menu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-menu.mjs","sources":["../../src/menu/menu-templates.ts","../../src/menu/menu.ts","../../src/menu/menu.html","../../src/menu/context-menu.ts","../../src/menu/ngneers-controls-menu.ts"],"sourcesContent":["import { computed, contentChild, Directive, input, TemplateRef, viewChild } from '@angular/core';\r\nimport { templateTypesFn } from '@ngneers/controls/api/ng';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\n\r\nimport type { MenuItemDefault } from './types';\r\n\r\n@Directive()\r\nexport abstract class MenuTemplates extends NgnBase<'menu'> {\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  /**\r\n   * Set a custom template for an item of the menu.\r\n   * Can also be set using an `<ng-template>` element with `#item` template reference variable.\r\n   */\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\r\n  // Group template\r\n  private readonly _defaultGroupTemplate =\r\n    viewChild.required<TemplateRef<unknown>>('defaultGroupTemplate');\r\n  private readonly _userGroupTemplate = contentChild<TemplateRef<unknown>>('group');\r\n  /**\r\n   * Set a custom template for a group of items in the menu.\r\n   * Can also be set using an `<ng-template>` element with `#group` template reference variable.\r\n   */\r\n  public readonly templateGroup = input<TemplateRef<unknown> | 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: MenuItemDefault;\r\n    };\r\n  }>();\r\n\r\n  protected readonly internalTemplateTypes = templateTypesFn<{\r\n    regularItem: {\r\n      $implicit: MenuItemDefault;\r\n      index: number;\r\n    };\r\n  }>();\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n  booleanAttribute,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  ElementRef,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n  viewChild,\r\n  viewChildren,\r\n} from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\nimport { type Anchor, NgnTemplate, type Openable, Platform } from '@ngneers/controls/api/ng';\r\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnAutofocus } from '@ngneers/controls/directives';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { NgnPopover } from '@ngneers/controls/popover';\r\nimport { maybeCallback, NgnError } from '@ngneers/controls/utils';\r\nimport { effectWithPrevious, explicitEffect, generateElementId } from '@ngneers/controls/utils-ng';\r\nimport { menuControlTemplate } from '@ngneers/controls-themes/templates/menu';\r\n\r\nimport { MenuTemplates } from './menu-templates';\r\n\r\nimport type { MenuItem } from './types';\r\nimport type { Placement } from '@floating-ui/dom';\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  selector: 'ngn-menu',\r\n  imports: [NgnPt, NgTemplateOutlet, NgnTemplate, NgnAutofocus, NgnPopover, NgnIcon, RouterLink],\r\n  templateUrl: './menu.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  providers: [provideSelf(NgnMenu)],\r\n})\r\nexport class NgnMenu extends MenuTemplates implements Openable {\r\n  protected readonly theme = this.injectThemeTemplate(menuControlTemplate, {\r\n    submenu: () => this.isSubMenu(),\r\n  });\r\n  protected readonly elementId = input(generateElementId());\r\n  /**\r\n   * The element to which the menu is anchored. Required if `popover` is true.\r\n   */\r\n  public readonly anchor = input<Anchor>();\r\n  /**\r\n   * The menu items to display.\r\n   */\r\n  public readonly items = input.required<MenuItem[]>();\r\n  /**\r\n   * Whether to automatically set ARIA attributes on the anchor element.\r\n   * @default true if anchor is an HTMLButtonElement, false otherwise.\r\n   */\r\n  public readonly autoAnchorAria = input<boolean>();\r\n  /**\r\n   * Whether the menu is a popover. Requires `anchor` to be set.\r\n   */\r\n  public readonly popover = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * The placement of the menu relative to the anchor element. Only used if `popover` is true.\r\n   * @default 'bottom-start'\r\n   */\r\n  public readonly placement = input<Placement>('bottom-start');\r\n  /**\r\n   * Icon type for children indicator (submenu indicator). If not set, a default icon will be used.\r\n   */\r\n  public readonly iconSubmenuIndicator = input<IconType>();\r\n  /**\r\n   * Whether this menu is a submenu. Used internally.\r\n   * @internal\r\n   */\r\n  public readonly isSubMenu = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Whether to open submenus on hover. Defaults to true in popover mode.\r\n   * @default popover()\r\n   */\r\n  public readonly openSubmenuOnHover = input(false, { transform: booleanAttribute });\r\n\r\n  /**\r\n   * Emitted when the menu is fully closed.\r\n   */\r\n  public readonly closed = output<void>();\r\n  /**\r\n   * Emitted when the menu is about to close.\r\n   */\r\n  public readonly closing = output<void>();\r\n  /**\r\n   * Emitted when all menus should be closed (including parent menus). Used internally.\r\n   * @internal\r\n   */\r\n  public readonly closeAll = output<void>();\r\n  /**\r\n   * Shows or hides the menu.\r\n   *\r\n   * You probably want to react to openChange events from outside to update your variable accordingly.\r\n   */\r\n  public readonly open = model(false);\r\n\r\n  protected readonly maybeCallback = maybeCallback;\r\n\r\n  private readonly _isTouchDevice = inject(Platform).isTouchDevice;\r\n  private readonly _popover = viewChild(NgnPopover);\r\n  private readonly _menuItems = viewChildren<ElementRef<HTMLElement>>('menuItem');\r\n  private readonly _childMenus = viewChildren(NgnMenu);\r\n  private readonly _openSubmenuOnHover = computed(\r\n    () => this.openSubmenuOnHover() ?? this.popover()\r\n  );\r\n  protected readonly autofocus = signal(false);\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      if (this.popover() && !this.anchor()) {\r\n        throw new NgnError(\r\n          'NgnMenu',\r\n          'When using popover mode, the anchor input must be provided.'\r\n        );\r\n      }\r\n    });\r\n\r\n    const autoAriaEnabled = computed(() => {\r\n      if (this.autoAnchorAria() !== undefined) {\r\n        return this.autoAnchorAria();\r\n      }\r\n      return this.anchor() instanceof HTMLButtonElement;\r\n    });\r\n\r\n    effectWithPrevious(this.anchor, (current, previous) => {\r\n      if (previous instanceof HTMLElement && autoAriaEnabled()) {\r\n        previous.removeAttribute('aria-controls');\r\n        previous.removeAttribute('aria-expanded');\r\n        previous.removeAttribute('aria-haspopup');\r\n      }\r\n      if (current instanceof HTMLElement && autoAriaEnabled()) {\r\n        current.setAttribute('aria-controls', `${this.elementId()}_menu`);\r\n        current.setAttribute('aria-haspopup', 'menu');\r\n      }\r\n    });\r\n\r\n    effect(() => {\r\n      const anchor = this.anchor();\r\n      if (anchor instanceof HTMLElement && autoAriaEnabled()) {\r\n        anchor.setAttribute('aria-expanded', this.open() ? 'true' : 'false');\r\n      }\r\n    });\r\n\r\n    explicitEffect([this.open], ([open]) => {\r\n      if (!open) {\r\n        if (this._popover()?.open()) {\r\n          this.hide();\r\n        }\r\n      }\r\n      if (open) {\r\n        if (!this._popover()?.open()) {\r\n          this.show(this.autofocus());\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Shows the menu.\r\n   * @param focus Whether to focus the menu after showing it. Defaults to `true`.\r\n   */\r\n  public show(focus = true) {\r\n    if (!this.popover()) {\r\n      throw new NgnError(\r\n        'NgnMenu',\r\n        'The show() method can only be used when popover mode is enabled.'\r\n      );\r\n    }\r\n    this._popover()?.show();\r\n    this.autofocus.set(focus);\r\n  }\r\n\r\n  /**\r\n   * Hides the menu.\r\n   * @param emitCloseEvent Whether to emit the close event. Defaults to `true`.\r\n   */\r\n  public hide(emitCloseEvent = true) {\r\n    if (!this.popover()) {\r\n      throw new NgnError(\r\n        'NgnMenu',\r\n        'The hide() method can only be used when popover mode is enabled.'\r\n      );\r\n    }\r\n    this._popover()?.hide(emitCloseEvent);\r\n  }\r\n\r\n  /**\r\n   * Toggles the menu open or closed.\r\n   */\r\n  public toggle() {\r\n    if (!this.popover()) {\r\n      throw new NgnError(\r\n        'NgnMenu',\r\n        'The toggle() method can only be used when popover mode is enabled.'\r\n      );\r\n    }\r\n    const popoverEl = this._popover();\r\n    if (!popoverEl) {\r\n      throw new NgnError('NgnMenu', 'Popover element is not available.');\r\n    }\r\n    if (popoverEl.open()) {\r\n      popoverEl.hide();\r\n    } else {\r\n      popoverEl.open();\r\n    }\r\n  }\r\n\r\n  protected handleKeydown(event: KeyboardEvent, subMenu?: NgnMenu) {\r\n    let currentIndex = this._menuItems()\r\n      .map(x => x.nativeElement)\r\n      .indexOf(event.target as HTMLElement);\r\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\r\n      event.preventDefault();\r\n      if (event.key === 'ArrowDown') {\r\n        currentIndex++;\r\n      } else if (event.key === 'ArrowUp') {\r\n        currentIndex--;\r\n      }\r\n      if (currentIndex < 0) {\r\n        currentIndex = this._menuItems().length - 1;\r\n      } else if (currentIndex >= this._menuItems().length) {\r\n        currentIndex = 0;\r\n      }\r\n      this._menuItems()[currentIndex]?.nativeElement.focus();\r\n    } else if (event.key === 'ArrowRight' && subMenu) {\r\n      this.openChildMenu(subMenu, null, 'arrow');\r\n    } else if (event.key === 'ArrowLeft' && this.isSubMenu()) {\r\n      this._popover()?.hide();\r\n    }\r\n  }\r\n\r\n  protected doCloseAll() {\r\n    this.hide();\r\n    // Delay the closing of the parents to ensure the children close first (for animation purposes)\r\n    requestAnimationFrame(() => {\r\n      this.closeAll.emit();\r\n    });\r\n  }\r\n\r\n  protected itemClicked(item: MenuItem) {\r\n    if (this.popover()) {\r\n      this.doCloseAll();\r\n    }\r\n    if ('callback' in item) {\r\n      item.callback?.();\r\n    }\r\n  }\r\n\r\n  protected closeChildMenus(\r\n    closeBy: 'hover' | 'click' | 'arrow',\r\n    menuItem: HTMLButtonElement | null\r\n  ) {\r\n    if (closeBy === 'hover') {\r\n      if (this._isTouchDevice() || !this._openSubmenuOnHover()) {\r\n        return;\r\n      }\r\n      if (this._openSubmenuOnHover()) {\r\n        menuItem?.focus();\r\n      }\r\n    }\r\n    this._childMenus().forEach(menu => {\r\n      menu.hide(false);\r\n    });\r\n  }\r\n\r\n  protected openChildMenu(\r\n    childMenu: NgnMenu,\r\n    menuItem: HTMLButtonElement | null,\r\n    openBy: 'hover' | 'click' | 'arrow'\r\n  ) {\r\n    if (openBy === 'hover') {\r\n      if (this._isTouchDevice() || !this._openSubmenuOnHover()) {\r\n        return;\r\n      }\r\n    }\r\n    if (childMenu.open()) {\r\n      menuItem?.focus();\r\n      return;\r\n    }\r\n    this.closeChildMenus(openBy, menuItem);\r\n    setTimeout(() => {\r\n      childMenu.show(openBy === 'arrow');\r\n    });\r\n  }\r\n\r\n  protected popoverOpenChange(newState: boolean) {\r\n    this.open.set(newState);\r\n  }\r\n\r\n  protected popoverClosed() {\r\n    this.closed.emit();\r\n  }\r\n}\r\n","@if (popover() && anchor(); as anchor) {\r\n  <ngn-popover\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'popover'\"\r\n    [anchor]=\"anchor\"\r\n    [options]=\"{ placement: placement(), padding: isSubMenu() ? 0 : undefined }\"\r\n    (openChange)=\"popoverOpenChange($event)\"\r\n    (closed)=\"popoverClosed()\"\r\n    (closing)=\"closing.emit()\"\r\n  >\r\n    <ng-template #lazy>\r\n      <ng-container *ngTemplateOutlet=\"menu\" />\r\n    </ng-template>\r\n  </ngn-popover>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"menu\" />\r\n}\r\n\r\n<ng-template #menu>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'root'\" role=\"menu\" [tabIndex]=\"0\" [id]=\"elementId() + '_menu'\">\r\n    @for (item of items(); track 'id' in item ? item.id : item) {\r\n      @if ('separator' in item) {\r\n        <ng-container *ngTemplateOutlet=\"separatorTemplate\" />\r\n      } @else {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"regularItemTemplate; context: { $implicit: item, index: $index }\"\r\n        />\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #separatorTemplate>\r\n  <hr [ptInt]=\"this\" [ptClass]=\"'separator'\" />\r\n</ng-template>\r\n\r\n<ng-template\r\n  #regularItemTemplate\r\n  [ngnTemplate]=\"internalTemplateTypes.regularItem\"\r\n  let-item\r\n  let-index=\"index\"\r\n>\r\n  @if (item.children) {\r\n    <button\r\n      #menuItem\r\n      role=\"menuitem\"\r\n      aria-haspopup=\"menu\"\r\n      [aria-expanded]=\"childMenu.open()\"\r\n      [tabindex]=\"-1\"\r\n      [ngnAutofocus]=\"open() && autofocus() && index === 0\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"{\r\n        item: true,\r\n        'item-opened': childMenu.open(),\r\n      }\"\r\n      [disabled]=\"item.disabled\"\r\n      (click)=\"openChildMenu(childMenu, menuItem, 'click')\"\r\n      (mouseenter)=\"openChildMenu(childMenu, menuItem, 'hover')\"\r\n      (keydown)=\"handleKeydown($event, childMenu)\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\r\n    </button>\r\n    <ngn-menu\r\n      #childMenu\r\n      [anchor]=\"menuItem\"\r\n      [items]=\"item.children\"\r\n      [placement]=\"'right-start'\"\r\n      [popover]=\"true\"\r\n      [isSubMenu]=\"true\"\r\n      (closing)=\"menuItem.focus()\"\r\n      (closeAll)=\"doCloseAll()\"\r\n      [elementId]=\"elementId() + '_submenu_' + item.id\"\r\n      [openSubmenuOnHover]=\"openSubmenuOnHover()\"\r\n    />\r\n  } @else {\r\n    <button\r\n      #menuItem\r\n      role=\"menuitem\"\r\n      [tabindex]=\"-1\"\r\n      [ngnAutofocus]=\"open() && autofocus() && index === 0\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'item'\"\r\n      [disabled]=\"item.disabled\"\r\n      (keydown)=\"handleKeydown($event)\"\r\n      (click)=\"itemClicked(item)\"\r\n      (mouseenter)=\"closeChildMenus('hover', menuItem)\"\r\n      [routerLink]=\"item.route\"\r\n    >\r\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\" />\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultItemTemplate [ngnTemplate]=\"templateTypes.item\" let-item>\r\n  {{ maybeCallback(item.label) }}\r\n  @if (item.children) {\r\n    <ngn-icon\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'icon-children'\"\r\n      defaultIcon=\"chevron_right\"\r\n      [icon]=\"iconSubmenuIndicator()\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultGroupTemplate></ng-template>\r\n","import {\r\n  ComponentRef,\r\n  Directive,\r\n  ElementRef,\r\n  inject,\r\n  input,\r\n  type OnDestroy,\r\n  ViewContainerRef,\r\n} from '@angular/core';\r\nimport { domEventHandler, setComponentInput } from '@ngneers/controls/api/ng';\r\n\r\nimport { NgnMenu } from './menu';\r\n\r\nimport type { MenuItem } from './types';\r\n\r\n@Directive({ selector: '[ngnContextMenu]' })\r\nexport class NgnContextMenu implements OnDestroy {\r\n  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  private readonly _vcr = inject(ViewContainerRef);\r\n  private _menu?: ComponentRef<NgnMenu>;\r\n\r\n  public readonly ngnContextMenu = input.required<MenuItem[]>();\r\n\r\n  constructor() {\r\n    domEventHandler(this._elementRef, 'contextmenu', this.handleClick.bind(this));\r\n  }\r\n\r\n  public ngOnDestroy(): void {\r\n    this._menu?.destroy();\r\n  }\r\n\r\n  private handleClick(event: PointerEvent) {\r\n    if (event.button !== 2) {\r\n      return;\r\n    }\r\n    if (this._menu?.instance.open()) {\r\n      return;\r\n    }\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.openMenu(event);\r\n    return false;\r\n  }\r\n\r\n  private createMenu() {\r\n    if (!this._menu) {\r\n      this._menu = this._vcr.createComponent(NgnMenu);\r\n    }\r\n    return this._menu;\r\n  }\r\n\r\n  private openMenu(event: PointerEvent) {\r\n    const menu = this.createMenu();\r\n\r\n    setComponentInput(menu, 'items', this.ngnContextMenu());\r\n    setComponentInput(menu, 'anchor', { x: event.clientX, y: event.clientY });\r\n    setComponentInput(menu, 'popover', true);\r\n    setTimeout(() => {\r\n      menu.instance.show();\r\n    });\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-message.mjs

@@ -0,0 +1,29 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { messageControlTemplate } from '@ngneers/controls-themes/templates/message';
+
+/**
+ * @category control
+ */
+class NgnMessage extends NgnBase {
+    theme = this.injectThemeTemplate(messageControlTemplate, 'root');
+    /**
+     * Set an icon to display before the text.
+     */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnMessage, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnMessage, isStandalone: true, selector: "ngn-message", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnMessage)], usesInheritance: true, ngImport: i0, template: "@if (icon()) {\r\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\r\n}\r\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ng-content />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnMessage, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-message', imports: [NgnPt, NgnIcon], providers: [provideSelf(NgnMessage)], template: "@if (icon()) {\r\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\r\n}\r\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ng-content />\r\n</div>\r\n" }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnMessage };
+//# sourceMappingURL=ngneers-controls-message.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-message.mjs","sources":["../../src/message/message.ts","../../src/message/message.html","../../src/message/ngneers-controls-message.ts"],"sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { messageControlTemplate } from '@ngneers/controls-themes/templates/message';\r\n\r\nimport type { IconType } from '@ngneers/controls-custom-types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-message',\r\n  templateUrl: './message.html',\r\n  imports: [NgnPt, NgnIcon],\r\n  providers: [provideSelf(NgnMessage)],\r\n})\r\nexport class NgnMessage extends NgnBase<'message'> {\r\n  protected readonly theme = this.injectThemeTemplate(messageControlTemplate, 'root');\r\n\r\n  /**\r\n   * Set an icon to display before the text.\r\n   */\r\n  public readonly icon = input<IconType>();\r\n}\r\n","@if (icon()) {\r\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\r\n}\r\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n  <ng-content />\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;AAEG;AAQG,MAAO,UAAW,SAAQ,OAAkB,CAAA;IAC7B,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,MAAM,CAAC;AAEnF;;AAEG;IACa,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAY;uGAN7B,UAAU,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,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,EAAA,SAAA,EAFV,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECftC,mLAMA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGb,UAAU,EAAA,UAAA,EAAA,CAAA;kBAPtB,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,aAAa,WAEd,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,SAAA,EACd,CAAC,WAAW,YAAY,CAAC,EAAA,QAAA,EAAA,mLAAA,EAAA;;;AEftC;;AAEG;;;;"}

package/fesm2022/ngneers-controls-paginator.mjs

@@ -0,0 +1,111 @@
+import { NgStyle } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, model, computed, output, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgnTemplate } from '@ngneers/controls/api/ng';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnButton } from '@ngneers/controls/button';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { NgnItemView } from '@ngneers/controls/item-view';
+import { NgnSelect } from '@ngneers/controls/select';
+import { throwExp } from '@ngneers/controls/utils';
+import { paginatorControlTemplate } from '@ngneers/controls-themes/templates/paginator';
+
+/**
+ * @category control
+ */
+class NgnPaginator extends NgnBase {
+    theme = this.injectThemeTemplate(paginatorControlTemplate, 'root');
+    i18n = inject(I18n).translations;
+    /**
+     * Total number of items to paginate.
+     */
+    totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    /**
+     * Number of items per page. If not set, the first value from `possiblePageSizes` will be used.
+     */
+    pageSize = model(...(ngDevMode ? [undefined, { debugName: "pageSize" }] : []));
+    /**
+     * Possible page sizes to choose from.
+     * @default [5, 10, 25, 50]
+     */
+    possiblePageSizes = input([5, 10, 25, 50], { ...(ngDevMode ? { debugName: "possiblePageSizes" } : {}), transform: (sizes) => sizes.sort((a, b) => a - b) });
+    /**
+     * If set to `true`, the page size selector will be hidden and the page size cannot be changed by the user.
+     * @default false
+     */
+    fixedPageSize = input(false, ...(ngDevMode ? [{ debugName: "fixedPageSize" }] : []));
+    appliedPageSize = computed(() => this.pageSize() ||
+        this.possiblePageSizes()[0] ||
+        throwExp('NgnPaginator', 'At least one page size must be provided'), ...(ngDevMode ? [{ debugName: "appliedPageSize" }] : []));
+    pageCount = computed(() => Math.ceil(this.totalItems() / this.appliedPageSize()), ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
+    pages = computed(() => Array.from({ length: this.pageCount() }, (_, i) => ({ page: i })), ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    pageSizeOptions = computed(() => this.possiblePageSizes().map(size => ({
+        label: size.toString(),
+        value: size,
+    })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    /**
+     * Emits the current pagination state whenever the page or page size changes.
+     */
+    value = output();
+    /**
+     * Current page index (zero-based).
+     * @default 0
+     */
+    page = model(0, ...(ngDevMode ? [{ debugName: "page" }] : []));
+    constructor() {
+        super();
+        effect(() => {
+            const page = this.page();
+            const pageSize = this.appliedPageSize();
+            this.value.emit({
+                page: {
+                    current: page,
+                    size: pageSize,
+                },
+                slice: {
+                    skip: page * pageSize,
+                    take: pageSize,
+                },
+            });
+        });
+    }
+    previousPage(event) {
+        const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;
+        const newPage = Math.max(this.page() - amount, 0);
+        this.page.set(newPage);
+    }
+    nextPage(event) {
+        const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;
+        const newPage = Math.min(this.page() + amount, this.pageCount() - 1);
+        this.page.set(newPage);
+    }
+    getButtonFontStyles(page) {
+        function getFontSizeMultiplier() {
+            const charCount = (page + 1).toString().length;
+            if (charCount <= 2) {
+                return 1;
+            }
+            return Math.pow(0.85, charCount - 2);
+        }
+        return {
+            fontSize: `${getFontSizeMultiplier()}em`,
+            width: 'calc(1rem + 2 * var(--padding))',
+            height: 'calc(1rem + 2 * var(--padding))',
+            lineHeight: '0',
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnPaginator, isStandalone: true, selector: "ngn-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, possiblePageSizes: { classPropertyName: "possiblePageSizes", publicName: "possiblePageSizes", isSignal: true, isRequired: false, transformFunction: null }, fixedPageSize: { classPropertyName: "fixedPageSize", publicName: "fixedPageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", value: "value", page: "pageChange" }, providers: [provideSelf(NgnPaginator)], usesInheritance: true, ngImport: i0, template: "<button ngnButton [kind]=\"'icon'\" (click)=\"previousPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n</button>\r\n\r\n<ngn-item-view\r\n  #itemView\r\n  [items]=\"pages()\"\r\n  [idField]=\"'page'\"\r\n  [overflowStrategy]=\"'aroundIndex'\"\r\n  [overflowStrategyFreezeCount]=\"1\"\r\n  [overflowStrategyIndex]=\"page()\"\r\n  [sameWidthItems]=\"true\"\r\n>\r\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n    @let buttonStyles = getButtonFontStyles(item.page);\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [ngStyle]=\"buttonStyles\"\r\n      [style.background]=\"page() === item.page ? 'var(--ngn-color-secondary-500)' : null\"\r\n      (click)=\"page.set(item.page)\"\r\n    >\r\n      {{ item.page + 1 }}\r\n    </button>\r\n  </ng-template>\r\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\r\n    <button ngnButton [kind]=\"'icon'\" style=\"opacity: 0.5\" disabled>...</button>\r\n  </ng-template>\r\n</ngn-item-view>\r\n\r\n<button ngnButton [kind]=\"'icon'\" (click)=\"nextPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n</button>\r\n\r\n@if (!fixedPageSize()) {\r\n  <ngn-select\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'page-size-options'\"\r\n    [options]=\"pageSizeOptions()\"\r\n    [value]=\"appliedPageSize()\"\r\n    (valueChange)=\"pageSize.set($event)\"\r\n  />\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "component", type: NgnItemView, selector: "ngn-item-view", inputs: ["idField", "items", "separator", "iconItemSeparator", "overflowStrategy", "overflowStrategyFreezeCount", "overflowStrategyIndex", "sameWidthItems"] }, { kind: "component", type: NgnSelect, selector: "ngn-select", inputs: ["popoverOptions", "options", "filter", "filterText", "filterIcon", "dropdownIcon", "virtual", "itemHeight", "editable", "editableAutoFilter", "multiple", "scrollToSelectedItemOnOpen", "tabindex", "checkbox"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnPaginator, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-paginator', imports: [NgnButton, NgnIcon, NgnItemView, NgnSelect, NgnTemplate, NgStyle, NgnPt], providers: [provideSelf(NgnPaginator)], template: "<button ngnButton [kind]=\"'icon'\" (click)=\"previousPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n</button>\r\n\r\n<ngn-item-view\r\n  #itemView\r\n  [items]=\"pages()\"\r\n  [idField]=\"'page'\"\r\n  [overflowStrategy]=\"'aroundIndex'\"\r\n  [overflowStrategyFreezeCount]=\"1\"\r\n  [overflowStrategyIndex]=\"page()\"\r\n  [sameWidthItems]=\"true\"\r\n>\r\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n    @let buttonStyles = getButtonFontStyles(item.page);\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [ngStyle]=\"buttonStyles\"\r\n      [style.background]=\"page() === item.page ? 'var(--ngn-color-secondary-500)' : null\"\r\n      (click)=\"page.set(item.page)\"\r\n    >\r\n      {{ item.page + 1 }}\r\n    </button>\r\n  </ng-template>\r\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\r\n    <button ngnButton [kind]=\"'icon'\" style=\"opacity: 0.5\" disabled>...</button>\r\n  </ng-template>\r\n</ngn-item-view>\r\n\r\n<button ngnButton [kind]=\"'icon'\" (click)=\"nextPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n</button>\r\n\r\n@if (!fixedPageSize()) {\r\n  <ngn-select\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'page-size-options'\"\r\n    [options]=\"pageSizeOptions()\"\r\n    [value]=\"appliedPageSize()\"\r\n    (valueChange)=\"pageSize.set($event)\"\r\n  />\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], possiblePageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "possiblePageSizes", required: false }] }], fixedPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPageSize", required: false }] }], value: [{ type: i0.Output, args: ["value"] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnPaginator };
+//# sourceMappingURL=ngneers-controls-paginator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-paginator.mjs","sources":["../../src/paginator/paginator.ts","../../src/paginator/paginator.html","../../src/paginator/ngneers-controls-paginator.ts"],"sourcesContent":["import { NgStyle } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { NgnTemplate } from '@ngneers/controls/api/ng';\r\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { I18n } from '@ngneers/controls/i18n';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { NgnItemView } from '@ngneers/controls/item-view';\r\nimport { NgnSelect } from '@ngneers/controls/select';\r\nimport { throwExp } from '@ngneers/controls/utils';\r\nimport { paginatorControlTemplate } from '@ngneers/controls-themes/templates/paginator';\r\n\r\nimport type { PaginationState } from './types';\r\nimport type { NgnItem } from '@ngneers/controls/api';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-paginator',\r\n  templateUrl: './paginator.html',\r\n  imports: [NgnButton, NgnIcon, NgnItemView, NgnSelect, NgnTemplate, NgStyle, NgnPt],\r\n  providers: [provideSelf(NgnPaginator)],\r\n})\r\nexport class NgnPaginator extends NgnBase<'paginator'> {\r\n  protected readonly theme = this.injectThemeTemplate(paginatorControlTemplate, 'root');\r\n  protected readonly i18n = inject(I18n).translations;\r\n\r\n  /**\r\n   * Total number of items to paginate.\r\n   */\r\n  public readonly totalItems = input.required<number>();\r\n  /**\r\n   * Number of items per page. If not set, the first value from `possiblePageSizes` will be used.\r\n   */\r\n  public readonly pageSize = model<number>();\r\n  /**\r\n   * Possible page sizes to choose from.\r\n   * @default [5, 10, 25, 50]\r\n   */\r\n  public readonly possiblePageSizes = input([5, 10, 25, 50], {\r\n    transform: (sizes: number[]) => sizes.sort((a, b) => a - b),\r\n  });\r\n  /**\r\n   * If set to `true`, the page size selector will be hidden and the page size cannot be changed by the user.\r\n   * @default false\r\n   */\r\n  public readonly fixedPageSize = input(false);\r\n\r\n  protected readonly appliedPageSize = computed(\r\n    () =>\r\n      this.pageSize() ||\r\n      this.possiblePageSizes()[0] ||\r\n      throwExp('NgnPaginator', 'At least one page size must be provided')\r\n  );\r\n  protected readonly pageCount = computed(() =>\r\n    Math.ceil(this.totalItems() / this.appliedPageSize())\r\n  );\r\n  protected readonly pages = computed(() =>\r\n    Array.from({ length: this.pageCount() }, (_, i) => ({ page: i }))\r\n  );\r\n  protected readonly pageSizeOptions = computed<NgnItem[]>(() =>\r\n    this.possiblePageSizes().map(size => ({\r\n      label: size.toString(),\r\n      value: size,\r\n    }))\r\n  );\r\n\r\n  /**\r\n   * Emits the current pagination state whenever the page or page size changes.\r\n   */\r\n  public readonly value = output<PaginationState>();\r\n  /**\r\n   * Current page index (zero-based).\r\n   * @default 0\r\n   */\r\n  public readonly page = model(0);\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      const page = this.page();\r\n      const pageSize = this.appliedPageSize();\r\n      this.value.emit({\r\n        page: {\r\n          current: page,\r\n          size: pageSize,\r\n        },\r\n        slice: {\r\n          skip: page * pageSize,\r\n          take: pageSize,\r\n        },\r\n      });\r\n    });\r\n  }\r\n\r\n  protected previousPage(event: PointerEvent): void {\r\n    const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;\r\n    const newPage = Math.max(this.page() - amount, 0);\r\n    this.page.set(newPage);\r\n  }\r\n\r\n  protected nextPage(event: PointerEvent): void {\r\n    const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;\r\n    const newPage = Math.min(this.page() + amount, this.pageCount() - 1);\r\n    this.page.set(newPage);\r\n  }\r\n\r\n  protected getButtonFontStyles(page: number): {\r\n    [klass: string]: string;\r\n  } {\r\n    function getFontSizeMultiplier() {\r\n      const charCount = (page + 1).toString().length;\r\n      if (charCount <= 2) {\r\n        return 1;\r\n      }\r\n      return Math.pow(0.85, charCount - 2);\r\n    }\r\n\r\n    return {\r\n      fontSize: `${getFontSizeMultiplier()}em`,\r\n      width: 'calc(1rem + 2 * var(--padding))',\r\n      height: 'calc(1rem + 2 * var(--padding))',\r\n      lineHeight: '0',\r\n    };\r\n  }\r\n}\r\n","<button ngnButton [kind]=\"'icon'\" (click)=\"previousPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_left'\" />\r\n</button>\r\n\r\n<ngn-item-view\r\n  #itemView\r\n  [items]=\"pages()\"\r\n  [idField]=\"'page'\"\r\n  [overflowStrategy]=\"'aroundIndex'\"\r\n  [overflowStrategyFreezeCount]=\"1\"\r\n  [overflowStrategyIndex]=\"page()\"\r\n  [sameWidthItems]=\"true\"\r\n>\r\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\r\n    @let buttonStyles = getButtonFontStyles(item.page);\r\n    <button\r\n      ngnButton\r\n      [kind]=\"'icon'\"\r\n      [ngStyle]=\"buttonStyles\"\r\n      [style.background]=\"page() === item.page ? 'var(--ngn-color-secondary-500)' : null\"\r\n      (click)=\"page.set(item.page)\"\r\n    >\r\n      {{ item.page + 1 }}\r\n    </button>\r\n  </ng-template>\r\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\r\n    <button ngnButton [kind]=\"'icon'\" style=\"opacity: 0.5\" disabled>...</button>\r\n  </ng-template>\r\n</ngn-item-view>\r\n\r\n<button ngnButton [kind]=\"'icon'\" (click)=\"nextPage($event)\">\r\n  <ngn-icon [defaultIcon]=\"'chevron_right'\" />\r\n</button>\r\n\r\n@if (!fixedPageSize()) {\r\n  <ngn-select\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'page-size-options'\"\r\n    [options]=\"pageSizeOptions()\"\r\n    [value]=\"appliedPageSize()\"\r\n    (valueChange)=\"pageSize.set($event)\"\r\n  />\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}