@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-message.mjs

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { input, 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(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnMessage, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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()) {\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\n}\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\n  <ng-content />\n</div>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-message', imports: [NgnPt, NgnIcon], providers: [provideSelf(NgnMessage)], template: "@if (icon()) {\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\n}\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\n  <ng-content />\n</div>\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 } from '@angular/core';\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\nimport { NgnIcon } from '@ngneers/controls/icon';\nimport { messageControlTemplate } from '@ngneers/controls-themes/templates/message';\n\nimport type { IconType } from '@ngneers/controls-custom-types';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-message',\n  templateUrl: './message.html',\n  imports: [NgnPt, NgnIcon],\n  providers: [provideSelf(NgnMessage)],\n})\nexport class NgnMessage extends NgnBase<'message'> {\n  protected readonly theme = this.injectThemeTemplate(messageControlTemplate, 'root');\n\n  /**\n   * Set an icon to display before the text.\n   */\n  public readonly icon = input<IconType>();\n}\n","@if (icon()) {\n  <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" [icon]=\"icon()\" />\n}\n<div [ptInt]=\"this\" [ptClass]=\"'content'\">\n  <ng-content />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;AAEG;AAOG,MAAO,UAAW,SAAQ,OAAkB,CAAA;IAC7B,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,MAAM,CAAC;AAEnF;;AAEG;AACa,IAAA,IAAI,GAAG,KAAK;wFAAY;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,ECdtC,uKAMA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDOY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,OAAA,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,CAAA;;2FAGb,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,SAAS;+BACE,aAAa,EAAA,OAAA,EAEd,CAAC,KAAK,EAAE,OAAO,CAAC,EAAA,SAAA,EACd,CAAC,WAAW,CAAA,UAAA,CAAY,CAAC,EAAA,QAAA,EAAA,uKAAA,EAAA;;;AEdtC;;AAEG;;;;"}

package/fesm2022/ngneers-controls-number-input.mjs

@@ -0,0 +1,366 @@
+import * as i0 from '@angular/core';
+import { numberAttribute, input, inject, LOCALE_ID, computed, signal, effect, untracked, Directive } from '@angular/core';
+import { domEventHandler } from '@ngneers/controls/api/ng';
+import { ValueControlBase, provideSelf } from '@ngneers/controls/base';
+import { inputControlTemplate } from '@ngneers/controls-themes/templates/input';
+
+/** Derives the decimal/grouping separators and digit glyphs for a locale. */
+function localeNumberInfo(locale) {
+    const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
+    const plain = new Intl.NumberFormat(locale, { useGrouping: false });
+    const digits = Array.from({ length: 10 }, (_, i) => plain.format(i));
+    const isAscii = digits.every((glyph, i) => glyph === String(i));
+    return {
+        decimal: parts.find(p => p.type === 'decimal')?.value ?? '.',
+        group: parts.find(p => p.type === 'group')?.value ?? ',',
+        digits: isAscii ? null : digits,
+    };
+}
+/**
+ * Parses user-typed text into a number using the locale's separators:
+ * grouping separators (and non-breaking spaces used as such) are stripped,
+ * the locale decimal separator is normalized to `.`. Exponent notation is
+ * accepted; anything else non-numeric is `invalid`.
+ */
+function parseLocaleNumber(text, info) {
+    const trimmed = text.trim();
+    if (!trimmed) {
+        return { kind: 'empty' };
+    }
+    let normalized = trimmed;
+    // Map non-Latin digit glyphs (e.g. ar-EG ٠…٩) back to ASCII before validating.
+    if (info.digits) {
+        for (let i = 0; i < 10; i++) {
+            normalized = normalized.split(info.digits[i]).join(String(i));
+        }
+    }
+    normalized = normalized.split(info.group).join('');
+    // Locales that group with spaces render non-breaking variants; users type
+    // plain spaces — \s covers both, so strip all whitespace flavors.
+    normalized = normalized.replace(/\s/g, '');
+    if (info.decimal !== '.') {
+        normalized = normalized.split(info.decimal).join('.');
+    }
+    if (!/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i.test(normalized)) {
+        return { kind: 'invalid' };
+    }
+    const value = Number(normalized);
+    if (!Number.isFinite(value)) {
+        return { kind: 'invalid' };
+    }
+    return { kind: 'value', value };
+}
+/** Number of decimal places of `value` (bounded to 20, exponent-safe). */
+function decimalPlaces(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    let factor = 1;
+    let places = 0;
+    while (Math.round(value * factor) / factor !== value && places < 20) {
+        factor *= 10;
+        places++;
+    }
+    return places;
+}
+/** Rounds `value` to `decimals` decimal places (float-drift cleanup). */
+function roundToPrecision(value, decimals) {
+    const factor = Math.pow(10, decimals);
+    return Math.round(value * factor) / factor;
+}
+/** Clamps `value` into `[min, max]`; open bounds when `null`/`undefined`. */
+function clampValue(value, min, max) {
+    if (min != null && value < min) {
+        return min;
+    }
+    if (max != null && value > max) {
+        return max;
+    }
+    return value;
+}
+/**
+ * Steps `current` by `amount` in `direction`, clamped into `[min, max]` (no
+ * wrapping). The result is rounded to the combined precision of the operands
+ * so float drift (`0.1 + 0.2`) never surfaces. Stepping from `null` seeds at
+ * `min` (increment) or `max` (decrement), falling back to `0` on open bounds.
+ */
+function stepNumberValue(current, direction, amount, min, max) {
+    if (current === null) {
+        const seed = direction === 1 ? (min ?? 0) : (max ?? 0);
+        return clampValue(seed, min, max);
+    }
+    const decimals = Math.max(decimalPlaces(current), decimalPlaces(amount));
+    const next = roundToPrecision(current + direction * amount, decimals);
+    return clampValue(next, min, max);
+}
+
+/** `numberAttribute` that keeps `undefined`/`null`/`''` as "no bound" instead of `NaN`. */
+function optionalNumberAttribute(value) {
+    return value == null || value === '' ? undefined : numberAttribute(value);
+}
+/** A finite, strictly-positive step, or `undefined` for an invalid input. */
+function positiveStep(value) {
+    return value != null && Number.isFinite(value) && value > 0 ? value : undefined;
+}
+/**
+ * Turns a native `<input>` into a locale-aware number input with a
+ * `number | null` value model:
+ *
+ * - Free typing while focused; the value is committed on blur/Enter
+ *   (unparseable text reverts, out-of-range values are clamped — no wrapping).
+ * - Display is formatted via `Intl.NumberFormat` while blurred; while focused
+ *   the text is the raw, ungrouped edit form.
+ * - `ArrowUp`/`ArrowDown` step by `step`, with `Shift` by `bigStep`.
+ *   Results are rounded to the operands' precision so float drift never shows.
+ * - Exposes the {@link NgnBase.stepValue}/{@link NgnBase.canStepValue} hooks,
+ *   so `ngn-spin-buttons` (or a surrounding field) can step the value.
+ *
+ * @category control
+ */
+class NgnNumberInput extends ValueControlBase {
+    isFieldControl = true;
+    theme = this.injectThemeTemplate(inputControlTemplate, {
+        root: true,
+        invalid: () => this.invalid(),
+        empty: () => this.empty(),
+    });
+    /**
+     * The minimum allowed value (inclusive). Typed values below are clamped on
+     * commit; stepping stops here.
+     */
+    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    /**
+     * The maximum allowed value (inclusive). Typed values above are clamped on
+     * commit; stepping stops here.
+     */
+    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    /**
+     * The step amount applied by the spin buttons and `ArrowUp`/`ArrowDown`.
+     * Non-finite or non-positive values fall back to `1`.
+     * @default 1
+     */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * The step amount applied with `Shift+ArrowUp`/`Shift+ArrowDown`.
+     * Non-finite or non-positive values fall back to `appliedStep * 10`.
+     * @default step * 10
+     */
+    bigStep = input(undefined, { ...(ngDevMode ? { debugName: "bigStep" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    /**
+     * The locale used for formatting and parsing.
+     * @default LOCALE_ID
+     */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Additional `Intl.NumberFormat` options for the blurred display format only
+     * (e.g. `{ minimumFractionDigits: 2 }`). While focused the input shows the
+     * plain, ungrouped edit form, so display options never round or reshape the
+     * value the user is typing.
+     */
+    formatOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatOptions" }] : /* istanbul ignore next */ []));
+    _input = this.element.nativeElement;
+    _localeId = inject(LOCALE_ID);
+    appliedLocale = computed(() => this.locale() ?? this._localeId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedLocale" }] : /* istanbul ignore next */ []));
+    /** Sanitized step — a finite positive number, defaulting to `1`. */
+    appliedStep = computed(() => positiveStep(this.step()) ?? 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedStep" }] : /* istanbul ignore next */ []));
+    appliedBigStep = computed(() => positiveStep(this.bigStep()) ?? this.appliedStep() * 10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedBigStep" }] : /* istanbul ignore next */ []));
+    _localeInfo = computed(() => localeNumberInfo(this.appliedLocale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_localeInfo" }] : /* istanbul ignore next */ []));
+    _displayFormat = computed(() => new Intl.NumberFormat(this.appliedLocale(), {
+        maximumFractionDigits: 20,
+        ...this.formatOptions(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayFormat" }] : /* istanbul ignore next */ []));
+    // The edit formatter is deliberately plain — it does NOT apply formatOptions.
+    // Display options (fraction digits, currency, percent) would round the
+    // in-progress value or make the editable text unparsable on commit.
+    _editFormat = computed(() => new Intl.NumberFormat(this.appliedLocale(), {
+        maximumFractionDigits: 20,
+        useGrouping: false,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_editFormat" }] : /* istanbul ignore next */ []));
+    /** Whether the input currently holds focus (raw edit format while focused). */
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** Mirror of the input element's current text (drives the `empty` class). */
+    _text = signal(this._input.value ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_text" }] : /* istanbul ignore next */ []));
+    /**
+     * The last value applied by an internal mutation (step/commit/clear) that
+     * already set the edit text itself. Lets the value→text effect ignore those
+     * changes while focused, so a deferred flush can't clobber text the user
+     * typed right after (`undefined` = nothing applied internally yet).
+     */
+    _appliedValue = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_appliedValue" }] : /* istanbul ignore next */ []));
+    /** Whether the input holds no text at all. */
+    empty = computed(() => this._text() === '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // External value → text. While focused only overwrite when the parsed text
+        // semantically differs (programmatic set wins, typing is never clobbered).
+        effect(() => {
+            const value = this.value() ?? null;
+            const text = untracked(() => this._text());
+            if (!this.focused()) {
+                const next = value === null ? '' : this._displayFormat().format(value);
+                if (next !== text) {
+                    this._setText(next);
+                }
+                // Record the reconciled value so a later focus (with no intervening
+                // external change) short-circuits below instead of re-parsing the
+                // edit text — otherwise focusing then typing can race this effect,
+                // which would clobber the freshly typed text back to `value`.
+                this._appliedValue.set(value);
+                return;
+            }
+            // Only reflect EXTERNAL value changes into the edit text. Internal
+            // mutations (step/commit/clear) set the text themselves and record
+            // `_appliedValue`; skipping them here prevents a deferred effect flush
+            // from clobbering text the user typed right after such a mutation.
+            if (value === untracked(() => this._appliedValue())) {
+                return;
+            }
+            const parsed = parseLocaleNumber(text, untracked(() => this._localeInfo()));
+            const current = parsed.kind === 'value' ? parsed.value : null;
+            if (current !== value) {
+                this._setText(value === null ? '' : this._editFormat().format(value));
+            }
+            this._appliedValue.set(value);
+        });
+        domEventHandler(this.element, 'input', () => {
+            this._text.set(this._input.value);
+        });
+        domEventHandler(this.element, 'focus', () => {
+            this.focused.set(true);
+            const value = this.value() ?? null;
+            if (value !== null) {
+                this._setText(this._editFormat().format(value));
+            }
+        });
+        domEventHandler(this.element, 'blur', () => {
+            this._commit();
+            this.focused.set(false);
+            this.touched.set(true);
+        });
+        domEventHandler(this.element, 'keydown', event => {
+            if (this.disabled() || this.readonly()) {
+                return;
+            }
+            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+                if (event.altKey || event.ctrlKey || event.metaKey) {
+                    return;
+                }
+                event.preventDefault();
+                this.stepValue(event.key === 'ArrowUp' ? 1 : -1, event.shiftKey);
+            }
+            else if (event.key === 'Enter') {
+                // Commit before a potential form submit sees the value.
+                this._commit();
+            }
+        });
+    }
+    /**
+     * Steps the value by `step` (or `bigStep`) without wrapping. Uncommitted
+     * typed text is parsed and used as the base; an empty value seeds at `min`
+     * (increment) or `max` (decrement), falling back to `0` on open bounds.
+     */
+    stepValue(direction, big = false) {
+        if (this.disabled() || this.readonly()) {
+            return false;
+        }
+        const parsed = parseLocaleNumber(this._input.value, this._localeInfo());
+        const base = parsed.kind === 'value'
+            ? clampValue(parsed.value, this.min(), this.max())
+            : (this.value() ?? null);
+        const amount = big ? this.appliedBigStep() : this.appliedStep();
+        const next = stepNumberValue(base, direction, amount, this.min(), this.max());
+        this._appliedValue.set(next);
+        this.value.set(next);
+        this._setText((this.focused() ? this._editFormat() : this._displayFormat()).format(next));
+        return true;
+    }
+    /** Whether stepping in `direction` is currently possible (bound not reached). */
+    canStepValue(direction) {
+        if (this.disabled() || this.readonly()) {
+            return false;
+        }
+        const value = this.value() ?? null;
+        if (value === null) {
+            return true;
+        }
+        const bound = direction === 1 ? this.max() : this.min();
+        if (bound == null) {
+            return true;
+        }
+        return direction === 1 ? value < bound : value > bound;
+    }
+    /** Clears value and text (invoked by a surrounding field's clear button). */
+    clearValue() {
+        if (this.disabled() || this.readonly()) {
+            return false;
+        }
+        this._appliedValue.set(null);
+        this.value.set(null);
+        this._setText('');
+        return true;
+    }
+    /**
+     * Parses the current text and commits it to the value model: empty → `null`,
+     * out-of-range → clamped, unparseable → reverted to the last committed value.
+     */
+    _commit() {
+        const format = this.focused() ? this._editFormat() : this._displayFormat();
+        const parsed = parseLocaleNumber(this._input.value, this._localeInfo());
+        if (parsed.kind === 'invalid') {
+            const value = this.value() ?? null;
+            this._appliedValue.set(value);
+            this._setText(value === null ? '' : format.format(value));
+            return;
+        }
+        const next = parsed.kind === 'empty' ? null : clampValue(parsed.value, this.min(), this.max());
+        this._appliedValue.set(next);
+        this.value.set(next);
+        this._setText(next === null ? '' : format.format(next));
+    }
+    _setText(text) {
+        this._input.value = text;
+        this._text.set(text);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnNumberInput, isStandalone: true, selector: "input[ngnNumberInput]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, bigStep: { classPropertyName: "bigStep", publicName: "bigStep", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, formatOptions: { classPropertyName: "formatOptions", publicName: "formatOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "spinbutton", "inputmode": "decimal", "autocomplete": "off" }, properties: { "attr.aria-valuenow": "value() ?? null", "attr.aria-valuemin": "min() ?? null", "attr.aria-valuemax": "max() ?? null", "attr.aria-label": "label()", "attr.aria-invalid": "invalid() ? \"true\" : null", "disabled": "disabled()", "readOnly": "readonly()" } }, providers: [provideSelf(NgnNumberInput)], exportAs: ["ngnNumberInput"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnNumberInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngnNumberInput]',
+                    providers: [provideSelf(NgnNumberInput)],
+                    exportAs: 'ngnNumberInput',
+                    host: {
+                        type: 'text',
+                        role: 'spinbutton',
+                        inputmode: 'decimal',
+                        autocomplete: 'off',
+                        '[attr.aria-valuenow]': 'value() ?? null',
+                        '[attr.aria-valuemin]': 'min() ?? null',
+                        '[attr.aria-valuemax]': 'max() ?? null',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                        '[disabled]': 'disabled()',
+                        '[readOnly]': 'readonly()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], bigStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "bigStep", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], formatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOptions", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnNumberInput, clampValue, decimalPlaces, localeNumberInfo, parseLocaleNumber, roundToPrecision, stepNumberValue };
+//# sourceMappingURL=ngneers-controls-number-input.mjs.map

package/fesm2022/ngneers-controls-number-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-number-input.mjs","sources":["../../src/number-input/helper.ts","../../src/number-input/number-input.ts","../../src/number-input/ngneers-controls-number-input.ts"],"sourcesContent":["/** Locale-specific separators derived from `Intl.NumberFormat`. */\nexport type LocaleNumberInfo = {\n  /** The decimal separator, e.g. `.` (en) or `,` (de). */\n  decimal: string;\n  /** The grouping (thousands) separator, e.g. `,` (en) or `.` (de). */\n  group: string;\n  /**\n   * The locale's digit glyphs indexed by value (`digits[0]` … `digits[9]`).\n   * Non-Latin numbering systems (e.g. `ar-EG` → `٠…٩`) are mapped back to\n   * ASCII before parsing. `null` when the locale already uses ASCII digits.\n   */\n  digits: readonly string[] | null;\n};\n\n/** Derives the decimal/grouping separators and digit glyphs for a locale. */\nexport function localeNumberInfo(locale: string): LocaleNumberInfo {\n  const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);\n  const plain = new Intl.NumberFormat(locale, { useGrouping: false });\n  const digits = Array.from({ length: 10 }, (_, i) => plain.format(i));\n  const isAscii = digits.every((glyph, i) => glyph === String(i));\n  return {\n    decimal: parts.find(p => p.type === 'decimal')?.value ?? '.',\n    group: parts.find(p => p.type === 'group')?.value ?? ',',\n    digits: isAscii ? null : digits,\n  };\n}\n\nexport type ParsedNumber =\n  | { kind: 'empty' }\n  | { kind: 'invalid' }\n  | { kind: 'value'; value: number };\n\n/**\n * Parses user-typed text into a number using the locale's separators:\n * grouping separators (and non-breaking spaces used as such) are stripped,\n * the locale decimal separator is normalized to `.`. Exponent notation is\n * accepted; anything else non-numeric is `invalid`.\n */\nexport function parseLocaleNumber(text: string, info: LocaleNumberInfo): ParsedNumber {\n  const trimmed = text.trim();\n  if (!trimmed) {\n    return { kind: 'empty' };\n  }\n  let normalized = trimmed;\n  // Map non-Latin digit glyphs (e.g. ar-EG ٠…٩) back to ASCII before validating.\n  if (info.digits) {\n    for (let i = 0; i < 10; i++) {\n      normalized = normalized.split(info.digits[i]!).join(String(i));\n    }\n  }\n  normalized = normalized.split(info.group).join('');\n  // Locales that group with spaces render non-breaking variants; users type\n  // plain spaces — \\s covers both, so strip all whitespace flavors.\n  normalized = normalized.replace(/\\s/g, '');\n  if (info.decimal !== '.') {\n    normalized = normalized.split(info.decimal).join('.');\n  }\n  if (!/^[+-]?(\\d+(\\.\\d*)?|\\.\\d+)(e[+-]?\\d+)?$/i.test(normalized)) {\n    return { kind: 'invalid' };\n  }\n  const value = Number(normalized);\n  if (!Number.isFinite(value)) {\n    return { kind: 'invalid' };\n  }\n  return { kind: 'value', value };\n}\n\n/** Number of decimal places of `value` (bounded to 20, exponent-safe). */\nexport function decimalPlaces(value: number): number {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n  let factor = 1;\n  let places = 0;\n  while (Math.round(value * factor) / factor !== value && places < 20) {\n    factor *= 10;\n    places++;\n  }\n  return places;\n}\n\n/** Rounds `value` to `decimals` decimal places (float-drift cleanup). */\nexport function roundToPrecision(value: number, decimals: number): number {\n  const factor = Math.pow(10, decimals);\n  return Math.round(value * factor) / factor;\n}\n\n/** Clamps `value` into `[min, max]`; open bounds when `null`/`undefined`. */\nexport function clampValue(value: number, min?: number | null, max?: number | null): number {\n  if (min != null && value < min) {\n    return min;\n  }\n  if (max != null && value > max) {\n    return max;\n  }\n  return value;\n}\n\n/**\n * Steps `current` by `amount` in `direction`, clamped into `[min, max]` (no\n * wrapping). The result is rounded to the combined precision of the operands\n * so float drift (`0.1 + 0.2`) never surfaces. Stepping from `null` seeds at\n * `min` (increment) or `max` (decrement), falling back to `0` on open bounds.\n */\nexport function stepNumberValue(\n  current: number | null,\n  direction: 1 | -1,\n  amount: number,\n  min?: number | null,\n  max?: number | null\n): number {\n  if (current === null) {\n    const seed = direction === 1 ? (min ?? 0) : (max ?? 0);\n    return clampValue(seed, min, max);\n  }\n  const decimals = Math.max(decimalPlaces(current), decimalPlaces(amount));\n  const next = roundToPrecision(current + direction * amount, decimals);\n  return clampValue(next, min, max);\n}\n","import {\n  computed,\n  Directive,\n  effect,\n  inject,\n  input,\n  LOCALE_ID,\n  numberAttribute,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { domEventHandler } from '@ngneers/controls/api/ng';\nimport { provideSelf, ValueControlBase } from '@ngneers/controls/base';\nimport { inputControlTemplate } from '@ngneers/controls-themes/templates/input';\n\nimport { clampValue, localeNumberInfo, parseLocaleNumber, stepNumberValue } from './helper';\n\n/** `numberAttribute` that keeps `undefined`/`null`/`''` as \"no bound\" instead of `NaN`. */\nfunction optionalNumberAttribute(value: unknown): number | undefined {\n  return value == null || value === '' ? undefined : numberAttribute(value);\n}\n\n/** A finite, strictly-positive step, or `undefined` for an invalid input. */\nfunction positiveStep(value: number | undefined): number | undefined {\n  return value != null && Number.isFinite(value) && value > 0 ? value : undefined;\n}\n\n/**\n * Turns a native `<input>` into a locale-aware number input with a\n * `number | null` value model:\n *\n * - Free typing while focused; the value is committed on blur/Enter\n *   (unparseable text reverts, out-of-range values are clamped — no wrapping).\n * - Display is formatted via `Intl.NumberFormat` while blurred; while focused\n *   the text is the raw, ungrouped edit form.\n * - `ArrowUp`/`ArrowDown` step by `step`, with `Shift` by `bigStep`.\n *   Results are rounded to the operands' precision so float drift never shows.\n * - Exposes the {@link NgnBase.stepValue}/{@link NgnBase.canStepValue} hooks,\n *   so `ngn-spin-buttons` (or a surrounding field) can step the value.\n *\n * @category control\n */\n@Directive({\n  selector: 'input[ngnNumberInput]',\n  providers: [provideSelf(NgnNumberInput)],\n  exportAs: 'ngnNumberInput',\n  host: {\n    type: 'text',\n    role: 'spinbutton',\n    inputmode: 'decimal',\n    autocomplete: 'off',\n    '[attr.aria-valuenow]': 'value() ?? null',\n    '[attr.aria-valuemin]': 'min() ?? null',\n    '[attr.aria-valuemax]': 'max() ?? null',\n    '[attr.aria-label]': 'label()',\n    '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n    '[disabled]': 'disabled()',\n    '[readOnly]': 'readonly()',\n  },\n})\nexport class NgnNumberInput extends ValueControlBase<'numberInput', number | null> {\n  public override readonly isFieldControl = true;\n  protected readonly theme = this.injectThemeTemplate(inputControlTemplate, {\n    root: true,\n    invalid: () => this.invalid(),\n    empty: () => this.empty(),\n  });\n\n  /**\n   * The minimum allowed value (inclusive). Typed values below are clamped on\n   * commit; stepping stops here.\n   */\n  public readonly min = input(undefined, { transform: optionalNumberAttribute });\n  /**\n   * The maximum allowed value (inclusive). Typed values above are clamped on\n   * commit; stepping stops here.\n   */\n  public readonly max = input(undefined, { transform: optionalNumberAttribute });\n  /**\n   * The step amount applied by the spin buttons and `ArrowUp`/`ArrowDown`.\n   * Non-finite or non-positive values fall back to `1`.\n   * @default 1\n   */\n  public readonly step = input(1, { transform: numberAttribute });\n  /**\n   * The step amount applied with `Shift+ArrowUp`/`Shift+ArrowDown`.\n   * Non-finite or non-positive values fall back to `appliedStep * 10`.\n   * @default step * 10\n   */\n  public readonly bigStep = input(undefined, { transform: optionalNumberAttribute });\n  /**\n   * The locale used for formatting and parsing.\n   * @default LOCALE_ID\n   */\n  public readonly locale = input<string | undefined>(undefined);\n  /**\n   * Additional `Intl.NumberFormat` options for the blurred display format only\n   * (e.g. `{ minimumFractionDigits: 2 }`). While focused the input shows the\n   * plain, ungrouped edit form, so display options never round or reshape the\n   * value the user is typing.\n   */\n  public readonly formatOptions = input<Intl.NumberFormatOptions | undefined>(undefined);\n\n  private readonly _input = this.element.nativeElement as HTMLInputElement;\n  private readonly _localeId = inject(LOCALE_ID);\n\n  protected readonly appliedLocale = computed(() => this.locale() ?? this._localeId);\n  /** Sanitized step — a finite positive number, defaulting to `1`. */\n  protected readonly appliedStep = computed(() => positiveStep(this.step()) ?? 1);\n  protected readonly appliedBigStep = computed(\n    () => positiveStep(this.bigStep()) ?? this.appliedStep() * 10\n  );\n\n  private readonly _localeInfo = computed(() => localeNumberInfo(this.appliedLocale()));\n  private readonly _displayFormat = computed(\n    () =>\n      new Intl.NumberFormat(this.appliedLocale(), {\n        maximumFractionDigits: 20,\n        ...this.formatOptions(),\n      })\n  );\n  // The edit formatter is deliberately plain — it does NOT apply formatOptions.\n  // Display options (fraction digits, currency, percent) would round the\n  // in-progress value or make the editable text unparsable on commit.\n  private readonly _editFormat = computed(\n    () =>\n      new Intl.NumberFormat(this.appliedLocale(), {\n        maximumFractionDigits: 20,\n        useGrouping: false,\n      })\n  );\n\n  /** Whether the input currently holds focus (raw edit format while focused). */\n  protected readonly focused = signal(false);\n\n  /** Mirror of the input element's current text (drives the `empty` class). */\n  private readonly _text = signal(this._input.value ?? '');\n\n  /**\n   * The last value applied by an internal mutation (step/commit/clear) that\n   * already set the edit text itself. Lets the value→text effect ignore those\n   * changes while focused, so a deferred flush can't clobber text the user\n   * typed right after (`undefined` = nothing applied internally yet).\n   */\n  private readonly _appliedValue = signal<number | null | undefined>(undefined);\n\n  /** Whether the input holds no text at all. */\n  public readonly empty = computed(() => this._text() === '');\n\n  constructor() {\n    super();\n\n    // External value → text. While focused only overwrite when the parsed text\n    // semantically differs (programmatic set wins, typing is never clobbered).\n    effect(() => {\n      const value = this.value() ?? null;\n      const text = untracked(() => this._text());\n      if (!this.focused()) {\n        const next = value === null ? '' : this._displayFormat().format(value);\n        if (next !== text) {\n          this._setText(next);\n        }\n        // Record the reconciled value so a later focus (with no intervening\n        // external change) short-circuits below instead of re-parsing the\n        // edit text — otherwise focusing then typing can race this effect,\n        // which would clobber the freshly typed text back to `value`.\n        this._appliedValue.set(value);\n        return;\n      }\n      // Only reflect EXTERNAL value changes into the edit text. Internal\n      // mutations (step/commit/clear) set the text themselves and record\n      // `_appliedValue`; skipping them here prevents a deferred effect flush\n      // from clobbering text the user typed right after such a mutation.\n      if (value === untracked(() => this._appliedValue())) {\n        return;\n      }\n      const parsed = parseLocaleNumber(\n        text,\n        untracked(() => this._localeInfo())\n      );\n      const current = parsed.kind === 'value' ? parsed.value : null;\n      if (current !== value) {\n        this._setText(value === null ? '' : this._editFormat().format(value));\n      }\n      this._appliedValue.set(value);\n    });\n\n    domEventHandler(this.element, 'input', () => {\n      this._text.set(this._input.value);\n    });\n\n    domEventHandler(this.element, 'focus', () => {\n      this.focused.set(true);\n      const value = this.value() ?? null;\n      if (value !== null) {\n        this._setText(this._editFormat().format(value));\n      }\n    });\n\n    domEventHandler(this.element, 'blur', () => {\n      this._commit();\n      this.focused.set(false);\n      this.touched.set(true);\n    });\n\n    domEventHandler(this.element, 'keydown', event => {\n      if (this.disabled() || this.readonly()) {\n        return;\n      }\n      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n        if (event.altKey || event.ctrlKey || event.metaKey) {\n          return;\n        }\n        event.preventDefault();\n        this.stepValue(event.key === 'ArrowUp' ? 1 : -1, event.shiftKey);\n      } else if (event.key === 'Enter') {\n        // Commit before a potential form submit sees the value.\n        this._commit();\n      }\n    });\n  }\n\n  /**\n   * Steps the value by `step` (or `bigStep`) without wrapping. Uncommitted\n   * typed text is parsed and used as the base; an empty value seeds at `min`\n   * (increment) or `max` (decrement), falling back to `0` on open bounds.\n   */\n  public override stepValue(direction: 1 | -1, big = false): boolean {\n    if (this.disabled() || this.readonly()) {\n      return false;\n    }\n    const parsed = parseLocaleNumber(this._input.value, this._localeInfo());\n    const base =\n      parsed.kind === 'value'\n        ? clampValue(parsed.value, this.min(), this.max())\n        : (this.value() ?? null);\n    const amount = big ? this.appliedBigStep() : this.appliedStep();\n    const next = stepNumberValue(base, direction, amount, this.min(), this.max());\n    this._appliedValue.set(next);\n    this.value.set(next);\n    this._setText((this.focused() ? this._editFormat() : this._displayFormat()).format(next));\n    return true;\n  }\n\n  /** Whether stepping in `direction` is currently possible (bound not reached). */\n  public override canStepValue(direction: 1 | -1): boolean {\n    if (this.disabled() || this.readonly()) {\n      return false;\n    }\n    const value = this.value() ?? null;\n    if (value === null) {\n      return true;\n    }\n    const bound = direction === 1 ? this.max() : this.min();\n    if (bound == null) {\n      return true;\n    }\n    return direction === 1 ? value < bound : value > bound;\n  }\n\n  /** Clears value and text (invoked by a surrounding field's clear button). */\n  public override clearValue(): boolean {\n    if (this.disabled() || this.readonly()) {\n      return false;\n    }\n    this._appliedValue.set(null);\n    this.value.set(null);\n    this._setText('');\n    return true;\n  }\n\n  /**\n   * Parses the current text and commits it to the value model: empty → `null`,\n   * out-of-range → clamped, unparseable → reverted to the last committed value.\n   */\n  private _commit(): void {\n    const format = this.focused() ? this._editFormat() : this._displayFormat();\n    const parsed = parseLocaleNumber(this._input.value, this._localeInfo());\n    if (parsed.kind === 'invalid') {\n      const value = this.value() ?? null;\n      this._appliedValue.set(value);\n      this._setText(value === null ? '' : format.format(value));\n      return;\n    }\n    const next = parsed.kind === 'empty' ? null : clampValue(parsed.value, this.min(), this.max());\n    this._appliedValue.set(next);\n    this.value.set(next);\n    this._setText(next === null ? '' : format.format(next));\n  }\n\n  private _setText(text: string): void {\n    this._input.value = text;\n    this._text.set(text);\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-paginator.mjs

@@ -0,0 +1,129 @@
+import { NgStyle, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, model, booleanAttribute, computed, output, effect, 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 { NgnInputField } from '@ngneers/controls/input-field';
+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(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Number of items per page. If not set, the first value from {@link possiblePageSizes} is used.
+     */
+    pageSize = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Possible page sizes to choose from.
+     * @default [5, 10, 25, 50]
+     */
+    possiblePageSizes = input([5, 10, 25, 50], { ...(ngDevMode ? { debugName: "possiblePageSizes" } : /* istanbul ignore next */ {}), 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" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    appliedPageSize = computed(() => this.pageSize() ||
+        this.possiblePageSizes()[0] ||
+        throwExp('NgnPaginator', 'At least one page size must be provided'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedPageSize" }] : /* istanbul ignore next */ []));
+    pageCount = computed(() => Math.ceil(this.totalItems() / this.appliedPageSize()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+    pages = computed(() => Array.from({ length: this.pageCount() }, (_, i) => ({ page: i })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = computed(() => this.possiblePageSizes().map(size => ({
+        label: size.toString(),
+        value: size,
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the current pagination state whenever the page or page size changes.
+     */
+    value = output();
+    /**
+     * Current page index (zero-based).
+     * @default 0
+     */
+    page = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    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: "22.0.5", ngImport: i0, type: NgnPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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\n  ngnButton\n  [kind]=\"'icon'\"\n  [ptInt]=\"this\"\n  [ptDep]=\"'previous'\"\n  [attr.aria-label]=\"i18n['paginator_previousPage']()\"\n  (click)=\"previousPage($event)\"\n>\n  <ngn-icon [defaultIcon]=\"'paginator-previous'\" />\n</button>\n\n<ngn-item-view\n  #itemView\n  [ptInt]=\"this\"\n  [ptDep]=\"'item-view'\"\n  [items]=\"pages()\"\n  [idField]=\"'page'\"\n  [overflowStrategy]=\"'aroundIndex'\"\n  [overflowStrategyFreezeCount]=\"1\"\n  [overflowStrategyIndex]=\"page()\"\n  [sameWidthItems]=\"true\"\n>\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\n    @let buttonStyles = getButtonFontStyles(item.page);\n    <button\n      ngnButton\n      [kind]=\"'icon'\"\n      [ptInt]=\"this\"\n      [ptDep]=\"'page-number'\"\n      [ngStyle]=\"buttonStyles\"\n      [attr.aria-current]=\"page() === item.page ? 'page' : null\"\n      [ngClass]=\"\n        theme.classes({\n          'active-page': page() === item.page,\n        })\n      \"\n      (click)=\"page.set(item.page)\"\n    >\n      {{ item.page + 1 }}\n    </button>\n  </ng-template>\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\n    <button\n      ngnButton\n      [kind]=\"'icon'\"\n      [ptInt]=\"this\"\n      [ptDep]=\"'overflow'\"\n      style=\"opacity: 0.5\"\n      disabled\n    >\n      ...\n    </button>\n  </ng-template>\n</ngn-item-view>\n\n<button\n  ngnButton\n  [kind]=\"'icon'\"\n  [ptInt]=\"this\"\n  [ptDep]=\"'next'\"\n  [attr.aria-label]=\"i18n['paginator_nextPage']()\"\n  (click)=\"nextPage($event)\"\n>\n  <ngn-icon [defaultIcon]=\"'paginator-next'\" />\n</button>\n\n@if (!fixedPageSize()) {\n  <ngn-input-field [ptInt]=\"this\" [ptClass]=\"'page-size-options'\">\n    <ngn-select\n      [options]=\"pageSizeOptions()\"\n      [value]=\"appliedPageSize()\"\n      (valueChange)=\"pageSize.set($event)\"\n    />\n  </ngn-input-field>\n}\n", dependencies: [{ kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["ngnButtonInline"], exportAs: ["ngnButton"] }, { 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", "iconFilter", "iconDropdown", "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", "ptDep"] }, { kind: "component", type: NgnInputField, selector: "ngn-input-field", inputs: ["label", "labelledBy", "labelKind", "inputId", "showClearButton", "iconClearButton", "tabindex", "invalid", "readonly", "disabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnPaginator, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-paginator', imports: [
+                        NgnButton,
+                        NgnIcon,
+                        NgnItemView,
+                        NgnSelect,
+                        NgnTemplate,
+                        NgStyle,
+                        NgnPt,
+                        NgnInputField,
+                        NgClass,
+                    ], providers: [provideSelf(NgnPaginator)], template: "<button\n  ngnButton\n  [kind]=\"'icon'\"\n  [ptInt]=\"this\"\n  [ptDep]=\"'previous'\"\n  [attr.aria-label]=\"i18n['paginator_previousPage']()\"\n  (click)=\"previousPage($event)\"\n>\n  <ngn-icon [defaultIcon]=\"'paginator-previous'\" />\n</button>\n\n<ngn-item-view\n  #itemView\n  [ptInt]=\"this\"\n  [ptDep]=\"'item-view'\"\n  [items]=\"pages()\"\n  [idField]=\"'page'\"\n  [overflowStrategy]=\"'aroundIndex'\"\n  [overflowStrategyFreezeCount]=\"1\"\n  [overflowStrategyIndex]=\"page()\"\n  [sameWidthItems]=\"true\"\n>\n  <ng-template #item let-item [ngnTemplate]=\"itemView.templateTypes.item\">\n    @let buttonStyles = getButtonFontStyles(item.page);\n    <button\n      ngnButton\n      [kind]=\"'icon'\"\n      [ptInt]=\"this\"\n      [ptDep]=\"'page-number'\"\n      [ngStyle]=\"buttonStyles\"\n      [attr.aria-current]=\"page() === item.page ? 'page' : null\"\n      [ngClass]=\"\n        theme.classes({\n          'active-page': page() === item.page,\n        })\n      \"\n      (click)=\"page.set(item.page)\"\n    >\n      {{ item.page + 1 }}\n    </button>\n  </ng-template>\n  <ng-template #overflow let-item [ngnTemplate]=\"itemView.templateTypes.overflow\">\n    <button\n      ngnButton\n      [kind]=\"'icon'\"\n      [ptInt]=\"this\"\n      [ptDep]=\"'overflow'\"\n      style=\"opacity: 0.5\"\n      disabled\n    >\n      ...\n    </button>\n  </ng-template>\n</ngn-item-view>\n\n<button\n  ngnButton\n  [kind]=\"'icon'\"\n  [ptInt]=\"this\"\n  [ptDep]=\"'next'\"\n  [attr.aria-label]=\"i18n['paginator_nextPage']()\"\n  (click)=\"nextPage($event)\"\n>\n  <ngn-icon [defaultIcon]=\"'paginator-next'\" />\n</button>\n\n@if (!fixedPageSize()) {\n  <ngn-input-field [ptInt]=\"this\" [ptClass]=\"'page-size-options'\">\n    <ngn-select\n      [options]=\"pageSizeOptions()\"\n      [value]=\"appliedPageSize()\"\n      (valueChange)=\"pageSize.set($event)\"\n    />\n  </ngn-input-field>\n}\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