@ngneers/controls 0.0.1-next.0

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, NgClass } from '@angular/common';\nimport {\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { NgnTemplate } from '@ngneers/controls/api/ng';\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\nimport { NgnButton } from '@ngneers/controls/button';\nimport { I18n } from '@ngneers/controls/i18n';\nimport { NgnIcon } from '@ngneers/controls/icon';\nimport { NgnInputField } from '@ngneers/controls/input-field';\nimport { NgnItemView } from '@ngneers/controls/item-view';\nimport { NgnSelect } from '@ngneers/controls/select';\nimport { throwExp } from '@ngneers/controls/utils';\nimport { paginatorControlTemplate } from '@ngneers/controls-themes/templates/paginator';\n\nimport type { PaginationState } from './types';\nimport type { NgnItem } from '@ngneers/controls/api';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-paginator',\n  templateUrl: './paginator.html',\n  imports: [\n    NgnButton,\n    NgnIcon,\n    NgnItemView,\n    NgnSelect,\n    NgnTemplate,\n    NgStyle,\n    NgnPt,\n    NgnInputField,\n    NgClass,\n  ],\n  providers: [provideSelf(NgnPaginator)],\n})\nexport class NgnPaginator extends NgnBase<'paginator'> {\n  protected readonly theme = this.injectThemeTemplate(paginatorControlTemplate, 'root');\n  protected readonly i18n = inject(I18n).translations;\n\n  /**\n   * Total number of items to paginate.\n   */\n  public readonly totalItems = input.required<number>();\n  /**\n   * Number of items per page. If not set, the first value from {@link possiblePageSizes} is used.\n   */\n  public readonly pageSize = model<number>();\n  /**\n   * Possible page sizes to choose from.\n   * @default [5, 10, 25, 50]\n   */\n  public readonly possiblePageSizes = input([5, 10, 25, 50], {\n    transform: (sizes: number[]) => sizes.sort((a, b) => a - b),\n  });\n  /**\n   * If set to `true`, the page size selector will be hidden and the page size cannot be changed by the user.\n   * @default false\n   */\n  public readonly fixedPageSize = input(false, { transform: booleanAttribute });\n\n  protected readonly appliedPageSize = computed(\n    () =>\n      this.pageSize() ||\n      this.possiblePageSizes()[0] ||\n      throwExp('NgnPaginator', 'At least one page size must be provided')\n  );\n  protected readonly pageCount = computed(() =>\n    Math.ceil(this.totalItems() / this.appliedPageSize())\n  );\n  protected readonly pages = computed(() =>\n    Array.from({ length: this.pageCount() }, (_, i) => ({ page: i }))\n  );\n  protected readonly pageSizeOptions = computed<NgnItem[]>(() =>\n    this.possiblePageSizes().map(size => ({\n      label: size.toString(),\n      value: size,\n    }))\n  );\n\n  /**\n   * Emits the current pagination state whenever the page or page size changes.\n   */\n  public readonly value = output<PaginationState>();\n  /**\n   * Current page index (zero-based).\n   * @default 0\n   */\n  public readonly page = model(0);\n\n  constructor() {\n    super();\n    effect(() => {\n      const page = this.page();\n      const pageSize = this.appliedPageSize();\n      this.value.emit({\n        page: {\n          current: page,\n          size: pageSize,\n        },\n        slice: {\n          skip: page * pageSize,\n          take: pageSize,\n        },\n      });\n    });\n  }\n\n  protected previousPage(event: PointerEvent): void {\n    const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;\n    const newPage = Math.max(this.page() - amount, 0);\n    this.page.set(newPage);\n  }\n\n  protected nextPage(event: PointerEvent): void {\n    const amount = event.shiftKey ? 10 : event.ctrlKey ? 100 : 1;\n    const newPage = Math.min(this.page() + amount, this.pageCount() - 1);\n    this.page.set(newPage);\n  }\n\n  protected getButtonFontStyles(page: number): {\n    [klass: string]: string;\n  } {\n    function getFontSizeMultiplier() {\n      const charCount = (page + 1).toString().length;\n      if (charCount <= 2) {\n        return 1;\n      }\n      return Math.pow(0.85, charCount - 2);\n    }\n\n    return {\n      fontSize: `${getFontSizeMultiplier()}em`,\n      width: 'calc(1rem + 2 * var(--padding))',\n      height: 'calc(1rem + 2 * var(--padding))',\n      lineHeight: '0',\n    };\n  }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-popover.mjs

@@ -0,0 +1,215 @@
+import * as i0 from '@angular/core';
+import { contentChild, Directive, output, model, input, booleanAttribute, viewChild, computed, signal, inject, Injector, ChangeDetectorRef, untracked, Component } from '@angular/core';
+import { toPopoverCloseBy, autoPositionElement } from '@ngneers/controls/api/ng';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnDefer } from '@ngneers/controls/defer';
+import { computedWithPrevious, explicitAfterRenderEffect } from '@ngneers/controls/utils-ng';
+import { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';
+
+/**
+ * Template projection for {@link NgnPopover}, extracted into a dedicated base class so the
+ * component itself stays focused on positioning and open/close behavior.
+ */
+class PopoverTemplates extends NgnBase {
+    /**
+     * User-provided lazy content, projected via an `<ng-template #lazy>` inside the popover.
+     * Rendered only once the popover first opens.
+     */
+    lazyContent = contentChild('lazy', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: PopoverTemplates, isStandalone: true, queries: [{ propertyName: "lazyContent", first: true, predicate: ["lazy"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { lazyContent: [{ type: i0.ContentChild, args: ['lazy', { isSignal: true }] }] } });
+
+/**
+ * @category control
+ */
+class NgnPopover extends PopoverTemplates {
+    theme = this.injectThemeTemplate(popoverControlTemplate);
+    /**
+     * Emits when the popover has fully closed.
+     */
+    closed = output();
+    /**
+     * Emits when the popover is closed.
+     */
+    closing = output();
+    /**
+     * Shows or hides the popover.
+     *
+     * You probably want to react to openChange events from outside to update your variable accordingly.
+     */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * The element to which the popover is anchored.
+     */
+    anchor = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    /**
+     * The popover options.
+     */
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * Set to true for scrollable/shrink-able content
+     */
+    hasShrinkableContent = input(false, { ...(ngDevMode ? { debugName: "hasShrinkableContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * How the popover closes depending on user interaction.
+     * @default any
+     */
+    closeBy = input('any', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeBy" }] : /* istanbul ignore next */ []));
+    _content = viewChild.required('content');
+    closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeByPopover" }] : /* istanbul ignore next */ []));
+    isFullyClosed = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullyClosed" }] : /* istanbul ignore next */ []));
+    _skipEmitCloseEvent = false;
+    _triggeredByInput = false;
+    // Set by `onToggle` when the open state changed because the popover itself
+    // toggled (native show/hide). The `[open]` effect then skips re-running
+    // show()/hide() for that echo — otherwise the redundant show() schedules a
+    // second deferred `togglePopover(true)` that can re-open the popover right
+    // after a quick close (e.g. Enter then Escape). The effect still reacts to
+    // genuine external `[open]` input changes.
+    _internalToggle = false;
+    appliedOptions = computed(() => ({
+        cache: false,
+        ...this.options(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedOptions" }] : /* istanbul ignore next */ []));
+    _injector = inject(Injector);
+    _cdr = inject(ChangeDetectorRef);
+    _popoverRef = viewChild.required('popover');
+    _popover = computed(() => this._popoverRef().nativeElement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popover" }] : /* istanbul ignore next */ []));
+    _autoPos = computedWithPrevious(prev => {
+        prev?.stop();
+        const popoverEl = this._popover();
+        if (!popoverEl) {
+            return undefined;
+        }
+        return autoPositionElement(this.anchor(), popoverEl, {
+            injector: this._injector,
+            stopped: true,
+            sizeConstraints: this.appliedOptions()?.sizeConstraints,
+            placement: this.appliedOptions()?.placement,
+            offset: this.appliedOptions()?.padding,
+            hasShrinkableContent: this.hasShrinkableContent(),
+        });
+    });
+    constructor() {
+        super();
+        explicitAfterRenderEffect([this.open], ([open]) => {
+            // Ignore the echo from our own onToggle-driven open change; only react to
+            // external `[open]` input changes.
+            if (this._internalToggle) {
+                this._internalToggle = false;
+                return;
+            }
+            if (!open) {
+                this._triggeredByInput = true;
+                this.hide();
+            }
+            if (open) {
+                this._triggeredByInput = true;
+                this.show();
+            }
+        });
+    }
+    /**
+     * Opens the popover. Alternatively, you can also set the {@link open} input to `true`.
+     */
+    show() {
+        untracked(() => {
+            if (this.open() && !this._triggeredByInput) {
+                return;
+            }
+            this._triggeredByInput = false;
+            this.isFullyClosed.set(false);
+            this._cdr.detectChanges();
+            requestAnimationFrame(() => {
+                this._autoPos()?.start();
+                this._popover().togglePopover(true);
+            });
+        });
+    }
+    /**
+     * Closes the popover. Alternatively, you can also set the {@link open} input to `false`.
+     */
+    hide(emitCloseEvent = true) {
+        untracked(() => {
+            if (!this.open() && !this._triggeredByInput) {
+                return;
+            }
+            this._triggeredByInput = false;
+            this._skipEmitCloseEvent = !emitCloseEvent;
+            this._autoPos()?.stop();
+            this._popover().togglePopover(false);
+        });
+    }
+    /**
+     * Toggles the popover open or closed. Alternatively, you can also set the {@link open} input accordingly.
+     */
+    toggle() {
+        if (untracked(this.open)) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    onToggle(event) {
+        const evt = event;
+        // Mark this open-state change as internal so the `[open]` effect doesn't
+        // echo it back into another show()/hide().
+        this._internalToggle = true;
+        if (evt.newState === 'closed') {
+            this.open.set(false);
+            if (this._skipEmitCloseEvent) {
+                this._skipEmitCloseEvent = false;
+            }
+            else {
+                this.closing.emit();
+            }
+            this._autoPos()?.stop();
+            requestAnimationFrame(() => {
+                const allAnimationsDone = Promise.all(this._content()
+                    .nativeElement.getAnimations()
+                    .map(x => x.finished));
+                allAnimationsDone
+                    .then(() => {
+                    this.isFullyClosed.set(true);
+                    this.closed.emit();
+                })
+                    .catch(() => {
+                    // ignore cancelled animation
+                });
+            });
+        }
+        else {
+            this.open.set(true);
+            this.isFullyClosed.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: NgnPopover, isStandalone: true, selector: "ngn-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hasShrinkableContent: { classPropertyName: "hasShrinkableContent", publicName: "hasShrinkableContent", isSignal: true, isRequired: false, transformFunction: null }, closeBy: { classPropertyName: "closeBy", publicName: "closeBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", closing: "closing", open: "openChange" }, host: { listeners: { "click": "$event.stopPropagation()" } }, providers: [provideSelf(NgnPopover)], viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "_popoverRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ptInt]=\"this\"\n  [ptClass]=\"'root'\"\n  #popover\n  [attr.popover]=\"closeByPopover()\"\n  (toggle)=\"onToggle($event)\"\n  [style.min-height]=\"\n    hasShrinkableContent()\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\n      : 'fit-content'\n  \"\n>\n  <div\n    #content\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      content: true,\n      'content-closing': !this.open() && !this.isFullyClosed(),\n    }\"\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\n  >\n    <ngn-defer\n      [lazyContent]=\"lazyContent()\"\n      [open]=\"open() || !isFullyClosed()\"\n      [cache]=\"appliedOptions().cache\"\n    >\n      <ng-content></ng-content>\n    </ngn-defer>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-popover', imports: [NgnPt, NgnDefer], providers: [provideSelf(NgnPopover)], host: {
+                        '(click)': '$event.stopPropagation()',
+                    }, template: "<div\n  [ptInt]=\"this\"\n  [ptClass]=\"'root'\"\n  #popover\n  [attr.popover]=\"closeByPopover()\"\n  (toggle)=\"onToggle($event)\"\n  [style.min-height]=\"\n    hasShrinkableContent()\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\n      : 'fit-content'\n  \"\n>\n  <div\n    #content\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      content: true,\n      'content-closing': !this.open() && !this.isFullyClosed(),\n    }\"\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\n  >\n    <ngn-defer\n      [lazyContent]=\"lazyContent()\"\n      [open]=\"open() || !isFullyClosed()\"\n      [cache]=\"appliedOptions().cache\"\n    >\n      <ng-content></ng-content>\n    </ngn-defer>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { closed: [{ type: i0.Output, args: ["closed"] }], closing: [{ type: i0.Output, args: ["closing"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hasShrinkableContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShrinkableContent", required: false }] }], closeBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeBy", required: false }] }], _content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], _popoverRef: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnPopover };
+//# sourceMappingURL=ngneers-controls-popover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-popover.mjs","sources":["../../src/popover/popover-templates.ts","../../src/popover/popover.ts","../../src/popover/popover.html","../../src/popover/ngneers-controls-popover.ts"],"sourcesContent":["import { contentChild, Directive, TemplateRef } from '@angular/core';\nimport { NgnBase } from '@ngneers/controls/base';\n\n/**\n * Template projection for {@link NgnPopover}, extracted into a dedicated base class so the\n * component itself stays focused on positioning and open/close behavior.\n */\n@Directive()\nexport abstract class PopoverTemplates extends NgnBase<'popover'> {\n  /**\n   * User-provided lazy content, projected via an `<ng-template #lazy>` inside the popover.\n   * Rendered only once the popover first opens.\n   */\n  protected readonly lazyContent = contentChild<TemplateRef<unknown>>('lazy');\n}\n","import {\n  booleanAttribute,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  Injector,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport {\n  type PopoverCloseBy,\n  toPopoverCloseBy,\n  autoPositionElement,\n  type AutoPositioningHandle,\n  type Openable,\n  type Anchor,\n} from '@ngneers/controls/api/ng';\nimport { provideSelf, NgnPt } from '@ngneers/controls/base';\nimport { NgnDefer } from '@ngneers/controls/defer';\nimport { computedWithPrevious, explicitAfterRenderEffect } from '@ngneers/controls/utils-ng';\nimport { popoverControlTemplate } from '@ngneers/controls-themes/templates/popover';\n\nimport { PopoverTemplates } from './popover-templates';\n\nimport type { PopoverOptions } from './types';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-popover',\n  templateUrl: './popover.html',\n  imports: [NgnPt, NgnDefer],\n  providers: [provideSelf(NgnPopover)],\n  host: {\n    '(click)': '$event.stopPropagation()',\n  },\n})\nexport class NgnPopover extends PopoverTemplates implements Openable {\n  protected readonly theme = this.injectThemeTemplate(popoverControlTemplate);\n\n  /**\n   * Emits when the popover has fully closed.\n   */\n  public readonly closed = output();\n  /**\n   * Emits when the popover is closed.\n   */\n  public readonly closing = output();\n  /**\n   * Shows or hides the popover.\n   *\n   * You probably want to react to openChange events from outside to update your variable accordingly.\n   */\n  public readonly open = model<boolean>(false);\n  /**\n   * The element to which the popover is anchored.\n   */\n  public readonly anchor = input.required<Anchor>();\n  /**\n   * The popover options.\n   */\n  public readonly options = input<PopoverOptions>();\n  /**\n   * Set to true for scrollable/shrink-able content\n   */\n  public readonly hasShrinkableContent = input(false, { transform: booleanAttribute });\n  /**\n   * How the popover closes depending on user interaction.\n   * @default any\n   */\n  public readonly closeBy = input<PopoverCloseBy>('any');\n\n  protected readonly _content = viewChild.required<ElementRef<HTMLElement>>('content');\n  protected readonly closeByPopover = computed(() => toPopoverCloseBy(this.closeBy()));\n  protected readonly isFullyClosed = signal(true);\n\n  private _skipEmitCloseEvent = false;\n  private _triggeredByInput = false;\n  // Set by `onToggle` when the open state changed because the popover itself\n  // toggled (native show/hide). The `[open]` effect then skips re-running\n  // show()/hide() for that echo — otherwise the redundant show() schedules a\n  // second deferred `togglePopover(true)` that can re-open the popover right\n  // after a quick close (e.g. Enter then Escape). The effect still reacts to\n  // genuine external `[open]` input changes.\n  private _internalToggle = false;\n\n  protected readonly appliedOptions = computed(() => ({\n    cache: false,\n    ...this.options(),\n  }));\n\n  private readonly _injector = inject(Injector);\n  private readonly _cdr = inject(ChangeDetectorRef);\n  private readonly _popoverRef = viewChild.required<ElementRef<HTMLElement>>('popover');\n  private readonly _popover = computed(() => this._popoverRef().nativeElement);\n  private readonly _autoPos = computedWithPrevious<AutoPositioningHandle | undefined>(prev => {\n    prev?.stop();\n    const popoverEl = this._popover();\n    if (!popoverEl) {\n      return undefined;\n    }\n    return autoPositionElement(this.anchor(), popoverEl, {\n      injector: this._injector,\n      stopped: true,\n      sizeConstraints: this.appliedOptions()?.sizeConstraints,\n      placement: this.appliedOptions()?.placement,\n      offset: this.appliedOptions()?.padding,\n      hasShrinkableContent: this.hasShrinkableContent(),\n    });\n  });\n\n  constructor() {\n    super();\n\n    explicitAfterRenderEffect([this.open], ([open]) => {\n      // Ignore the echo from our own onToggle-driven open change; only react to\n      // external `[open]` input changes.\n      if (this._internalToggle) {\n        this._internalToggle = false;\n        return;\n      }\n      if (!open) {\n        this._triggeredByInput = true;\n        this.hide();\n      }\n      if (open) {\n        this._triggeredByInput = true;\n        this.show();\n      }\n    });\n  }\n\n  /**\n   * Opens the popover. Alternatively, you can also set the {@link open} input to `true`.\n   */\n  public show() {\n    untracked(() => {\n      if (this.open() && !this._triggeredByInput) {\n        return;\n      }\n      this._triggeredByInput = false;\n      this.isFullyClosed.set(false);\n      this._cdr.detectChanges();\n      requestAnimationFrame(() => {\n        this._autoPos()?.start();\n        this._popover().togglePopover(true);\n      });\n    });\n  }\n\n  /**\n   * Closes the popover. Alternatively, you can also set the {@link open} input to `false`.\n   */\n  public hide(emitCloseEvent = true) {\n    untracked(() => {\n      if (!this.open() && !this._triggeredByInput) {\n        return;\n      }\n      this._triggeredByInput = false;\n      this._skipEmitCloseEvent = !emitCloseEvent;\n      this._autoPos()?.stop();\n      this._popover().togglePopover(false);\n    });\n  }\n\n  /**\n   * Toggles the popover open or closed. Alternatively, you can also set the {@link open} input accordingly.\n   */\n  public toggle() {\n    if (untracked(this.open)) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  protected onToggle(event: Event) {\n    const evt = event as ToggleEvent;\n    // Mark this open-state change as internal so the `[open]` effect doesn't\n    // echo it back into another show()/hide().\n    this._internalToggle = true;\n    if (evt.newState === 'closed') {\n      this.open.set(false);\n\n      if (this._skipEmitCloseEvent) {\n        this._skipEmitCloseEvent = false;\n      } else {\n        this.closing.emit();\n      }\n      this._autoPos()?.stop();\n\n      requestAnimationFrame(() => {\n        const allAnimationsDone = Promise.all(\n          this._content()\n            .nativeElement.getAnimations()\n            .map(x => x.finished)\n        );\n        allAnimationsDone\n          .then(() => {\n            this.isFullyClosed.set(true);\n            this.closed.emit();\n          })\n          .catch(() => {\n            // ignore cancelled animation\n          });\n      });\n    } else {\n      this.open.set(true);\n      this.isFullyClosed.set(false);\n    }\n  }\n}\n","<div\n  [ptInt]=\"this\"\n  [ptClass]=\"'root'\"\n  #popover\n  [attr.popover]=\"closeByPopover()\"\n  (toggle)=\"onToggle($event)\"\n  [style.min-height]=\"\n    hasShrinkableContent()\n      ? (this.appliedOptions().sizeConstraints?.minHeight ?? null)\n      : 'fit-content'\n  \"\n>\n  <div\n    #content\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      content: true,\n      'content-closing': !this.open() && !this.isFullyClosed(),\n    }\"\n    [style.min-height]=\"hasShrinkableContent() ? null : 'fit-content'\"\n  >\n    <ngn-defer\n      [lazyContent]=\"lazyContent()\"\n      [open]=\"open() || !isFullyClosed()\"\n      [cache]=\"appliedOptions().cache\"\n    >\n      <ng-content></ng-content>\n    </ngn-defer>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngneers-controls-progress.mjs

@@ -0,0 +1,98 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Component } from '@angular/core';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { progressControlTemplate } from '@ngneers/controls-themes/templates/progress';
+
+const TAU = Math.PI * 2;
+/**
+ * @category control
+ */
+class NgnProgress extends NgnBase {
+    theme = this.injectThemeTemplate(progressControlTemplate, {
+        root: true,
+        indeterminate: () => this.indeterminate(),
+        circular: () => this.circular(),
+    });
+    /**
+     * The current progress value, clamped to the 0-100 range.
+     * @default 0
+     */
+    value = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the progress indicator is indeterminate (animated, no fixed value).
+     * @default false
+     */
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the progress indicator renders as a circle instead of a bar.
+     * @default false
+     */
+    circular = input(false, { ...(ngDevMode ? { debugName: "circular" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Radius of the circular progress indicator, in px. Only applies when {@link circular} is `true`.
+     * @default 40
+     */
+    radius = input(40, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    /**
+     * Thickness of the circular progress indicator stroke, in px. Only applies when {@link circular} is `true`.
+     * @default 8
+     */
+    thickness = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+    safeValue = computed(() => Math.min(Math.max(this.value(), 0), 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safeValue" }] : /* istanbul ignore next */ []));
+    safeRadius = computed(() => Math.max(this.radius(), 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safeRadius" }] : /* istanbul ignore next */ []));
+    safeThickness = computed(() => Math.max(this.thickness(), 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safeThickness" }] : /* istanbul ignore next */ []));
+    svgSize = computed(() => {
+        // Full size of the SVG in px.
+        return this.safeRadius() * 2 + this.safeThickness();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgSize" }] : /* istanbul ignore next */ []));
+    svgCenter = computed(() => this.svgSize() / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgCenter" }] : /* istanbul ignore next */ []));
+    circumference = computed(() => TAU * this.safeRadius(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []));
+    strokeDasharray = computed(() => {
+        const circumference = this.circumference();
+        // Arc length for indeterminate mode.
+        if (this.indeterminate()) {
+            return `${circumference * 0.28} ${circumference}`;
+        }
+        return `${circumference}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeDasharray" }] : /* istanbul ignore next */ []));
+    strokeDashoffset = computed(() => {
+        const circumference = this.circumference();
+        if (this.indeterminate()) {
+            return `${circumference * 0.72}`;
+        }
+        return `${circumference * (1 - this.safeValue() / 100)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeDashoffset" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnProgress, isStandalone: true, selector: "ngn-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "indeterminate() ? null : safeValue()", "style.--progress.%": "indeterminate() ? null : safeValue()" } }, providers: [provideSelf(NgnProgress)], usesInheritance: true, ngImport: i0, template: "@if (circular()) {\n  <svg\n    [attr.width]=\"svgSize()\"\n    [attr.height]=\"svgSize()\"\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'svg'\"\n  >\n    <circle\n      [attr.cx]=\"svgCenter()\"\n      [attr.cy]=\"svgCenter()\"\n      [attr.r]=\"safeRadius()\"\n      [attr.stroke-width]=\"safeThickness()\"\n      fill=\"none\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'track'\"\n    />\n    <circle\n      [attr.cx]=\"svgCenter()\"\n      [attr.cy]=\"svgCenter()\"\n      [attr.r]=\"safeRadius()\"\n      [attr.stroke-width]=\"safeThickness()\"\n      fill=\"none\"\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'fill'\"\n    />\n  </svg>\n} @else {\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\n    @if (indeterminate()) {\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnProgress, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-progress', imports: [NgnPt], providers: [provideSelf(NgnProgress)], host: {
+                        role: 'progressbar',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '[attr.aria-valuenow]': 'indeterminate() ? null : safeValue()',
+                        '[style.--progress.%]': 'indeterminate() ? null : safeValue()',
+                    }, template: "@if (circular()) {\n  <svg\n    [attr.width]=\"svgSize()\"\n    [attr.height]=\"svgSize()\"\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'svg'\"\n  >\n    <circle\n      [attr.cx]=\"svgCenter()\"\n      [attr.cy]=\"svgCenter()\"\n      [attr.r]=\"safeRadius()\"\n      [attr.stroke-width]=\"safeThickness()\"\n      fill=\"none\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'track'\"\n    />\n    <circle\n      [attr.cx]=\"svgCenter()\"\n      [attr.cy]=\"svgCenter()\"\n      [attr.r]=\"safeRadius()\"\n      [attr.stroke-width]=\"safeThickness()\"\n      fill=\"none\"\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'fill'\"\n    />\n  </svg>\n} @else {\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\n    @if (indeterminate()) {\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnProgress };
+//# sourceMappingURL=ngneers-controls-progress.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-progress.mjs","sources":["../../src/progress/progress.ts","../../src/progress/progress.html","../../src/progress/ngneers-controls-progress.ts"],"sourcesContent":["import { Component, input, computed, booleanAttribute } from '@angular/core';\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\nimport { progressControlTemplate } from '@ngneers/controls-themes/templates/progress';\n\nconst TAU = Math.PI * 2;\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-progress',\n  templateUrl: './progress.html',\n  imports: [NgnPt],\n  providers: [provideSelf(NgnProgress)],\n  host: {\n    role: 'progressbar',\n    '[attr.aria-valuemin]': '0',\n    '[attr.aria-valuemax]': '100',\n    '[attr.aria-valuenow]': 'indeterminate() ? null : safeValue()',\n    '[style.--progress.%]': 'indeterminate() ? null : safeValue()',\n  },\n})\nexport class NgnProgress extends NgnBase<'progress'> {\n  protected readonly theme = this.injectThemeTemplate(progressControlTemplate, {\n    root: true,\n    indeterminate: () => this.indeterminate(),\n    circular: () => this.circular(),\n  });\n\n  /**\n   * The current progress value, clamped to the 0-100 range.\n   * @default 0\n   */\n  public readonly value = input<number>(0);\n  /**\n   * Whether the progress indicator is indeterminate (animated, no fixed value).\n   * @default false\n   */\n  public readonly indeterminate = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the progress indicator renders as a circle instead of a bar.\n   * @default false\n   */\n  public readonly circular = input(false, { transform: booleanAttribute });\n\n  /**\n   * Radius of the circular progress indicator, in px. Only applies when {@link circular} is `true`.\n   * @default 40\n   */\n  public readonly radius = input<number>(40);\n\n  /**\n   * Thickness of the circular progress indicator stroke, in px. Only applies when {@link circular} is `true`.\n   * @default 8\n   */\n  public readonly thickness = input<number>(8);\n\n  protected readonly safeValue = computed(() => Math.min(Math.max(this.value(), 0), 100));\n\n  protected readonly safeRadius = computed(() => Math.max(this.radius(), 0));\n  protected readonly safeThickness = computed(() => Math.max(this.thickness(), 1));\n\n  protected readonly svgSize = computed(() => {\n    // Full size of the SVG in px.\n    return this.safeRadius() * 2 + this.safeThickness();\n  });\n\n  protected readonly svgCenter = computed(() => this.svgSize() / 2);\n\n  protected readonly circumference = computed(() => TAU * this.safeRadius());\n\n  protected readonly strokeDasharray = computed(() => {\n    const circumference = this.circumference();\n    // Arc length for indeterminate mode.\n    if (this.indeterminate()) {\n      return `${circumference * 0.28} ${circumference}`;\n    }\n    return `${circumference}`;\n  });\n\n  protected readonly strokeDashoffset = computed(() => {\n    const circumference = this.circumference();\n    if (this.indeterminate()) {\n      return `${circumference * 0.72}`;\n    }\n    return `${circumference * (1 - this.safeValue() / 100)}`;\n  });\n\n  constructor() {\n    super();\n  }\n}\n","@if (circular()) {\n  <svg\n    [attr.width]=\"svgSize()\"\n    [attr.height]=\"svgSize()\"\n    [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'svg'\"\n  >\n    <circle\n      [attr.cx]=\"svgCenter()\"\n      [attr.cy]=\"svgCenter()\"\n      [attr.r]=\"safeRadius()\"\n      [attr.stroke-width]=\"safeThickness()\"\n      fill=\"none\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'track'\"\n    />\n    <circle\n      [attr.cx]=\"svgCenter()\"\n      [attr.cy]=\"svgCenter()\"\n      [attr.r]=\"safeRadius()\"\n      [attr.stroke-width]=\"safeThickness()\"\n      fill=\"none\"\n      [attr.stroke-dasharray]=\"strokeDasharray()\"\n      [attr.stroke-dashoffset]=\"strokeDashoffset()\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'fill'\"\n    />\n  </svg>\n} @else {\n  <div [ptInt]=\"this\" [ptClass]=\"'track'\" [style.height.px]=\"safeThickness()\">\n    <div [ptInt]=\"this\" [ptClass]=\"'fill'\"></div>\n    @if (indeterminate()) {\n      <div [ptInt]=\"this\" [ptClass]=\"'fill2'\"></div>\n    }\n  </div>\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-radio.mjs

@@ -0,0 +1,152 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, DestroyRef, effect, Component, input, booleanAttribute, computed } from '@angular/core';
+import { ValueControlBase, provideSelf, NgnBase, NgnPt } from '@ngneers/controls/base';
+import * as i1 from '@ngneers/controls/roving-focus';
+import { NgnRovingGroup, NgnRovingItem } from '@ngneers/controls/roving-focus';
+import { radioGroupControlTemplate } from '@ngneers/controls-themes/templates/radio-group';
+import { radioControlTemplate } from '@ngneers/controls-themes/templates/radio';
+
+const NGN_RADIO_GROUP = new InjectionToken('NGN_RADIO_GROUP');
+
+/**
+ * A themed radio group. Owns the selected {@link value}; the individual
+ * `ngn-radio` children projected inside are presentational and report their
+ * payload up through {@link register}.
+ *
+ * Keyboard handling and roving tab order are delegated to `NgnRovingGroup`
+ * (applied as a host directive). Selection follows focus: moving the roving
+ * active item (arrows / Home / End / pointer) selects it, matching native
+ * radio-group behavior.
+ *
+ * @category control
+ */
+class NgnRadioGroup extends ValueControlBase {
+    theme = this.injectThemeTemplate(radioGroupControlTemplate, {
+        root: true,
+        invalid: () => this.invalid(),
+    });
+    /** The roving-focus host directive that drives keyboard/tab coordination. */
+    roving = inject(NgnRovingGroup);
+    _radios = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_radios" }] : /* istanbul ignore next */ []));
+    register(ref) {
+        this._radios.update(list => (list.includes(ref) ? list : [...list, ref]));
+    }
+    unregister(ref) {
+        this._radios.update(list => list.filter(r => r !== ref));
+    }
+    constructor() {
+        super();
+        // Selection follows focus: the roving group emits only on genuine
+        // navigation/activation (never on mount or plain Tab-in), so wiring value
+        // here gives native "arrow selects" behavior without spurious writes.
+        const sub = this.roving.activeItemChange.subscribe(index => {
+            if (this.readonly() || this.disabled()) {
+                return;
+            }
+            const element = this.roving.items()[index]?.element;
+            const radio = this._radios().find(r => r.element === element);
+            if (!radio || radio.disabled()) {
+                return;
+            }
+            this.value.set(radio.value());
+            this.touched.set(true);
+        });
+        inject(DestroyRef).onDestroy(() => sub.unsubscribe());
+        // Keep the roving tab stop on the selected radio so Tab-in lands on the
+        // checked option (native behavior). Disabled radios are skipped so a
+        // selected-but-disabled option never becomes the tab stop. `syncActiveIndex`
+        // updates the tab stop silently — no emit, no focus move — so a programmatic
+        // `value` change never yanks DOM focus into the group.
+        effect(() => {
+            const items = this.roving.items();
+            if (!items.length) {
+                return;
+            }
+            const radios = this._radios();
+            const value = this.value();
+            const index = items.findIndex(item => {
+                const radio = radios.find(r => r.element === item.element);
+                return radio ? !radio.disabled() && radio.value() === value : false;
+            });
+            if (index >= 0) {
+                this.roving.syncActiveIndex(index);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: NgnRadioGroup, isStandalone: true, selector: "ngn-radio-group", host: { attributes: { "role": "radiogroup" }, properties: { "attr.aria-label": "label()", "attr.aria-labelledby": "labelledBy()", "attr.aria-orientation": "roving.orientation()", "attr.aria-invalid": "invalid() ? 'true' : null", "attr.aria-disabled": "disabled() ? 'true' : null" } }, providers: [provideSelf(NgnRadioGroup), { provide: NGN_RADIO_GROUP, useExisting: NgnRadioGroup }], usesInheritance: true, hostDirectives: [{ directive: i1.NgnRovingGroup, inputs: ["orientation", "orientation", "rovingWrap", "rovingWrap"] }], ngImport: i0, template: "<ng-content />\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-radio-group', hostDirectives: [{ directive: NgnRovingGroup, inputs: ['orientation', 'rovingWrap'] }], providers: [provideSelf(NgnRadioGroup), { provide: NGN_RADIO_GROUP, useExisting: NgnRadioGroup }], host: {
+                        role: 'radiogroup',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-orientation]': 'roving.orientation()',
+                        '[attr.aria-invalid]': "invalid() ? 'true' : null",
+                        '[attr.aria-disabled]': "disabled() ? 'true' : null",
+                    }, template: "<ng-content />\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * A single radio option. Must be projected inside an `ngn-radio-group`, which
+ * owns the selected value — this control only contributes its {@link value}
+ * payload and renders the themed dot. The label is authored via content
+ * projection (`<ngn-radio [value]="…">Label</ngn-radio>`) with an optional
+ * {@link label} input fallback.
+ *
+ * @category control
+ */
+class NgnRadio extends NgnBase {
+    theme = this.injectThemeTemplate(radioControlTemplate, {
+        root: true,
+    });
+    /** The payload this radio selects into the enclosing group. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disables this individual option. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Optional accessible label; overrides projected content for the a11y name. */
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    _group = inject(NGN_RADIO_GROUP);
+    _rovingItem = inject(NgnRovingItem);
+    /** Whether this radio is the currently selected option in its group. */
+    checked = computed(() => this._group.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Disabled if this option or the whole group is disabled. */
+    effectiveDisabled = computed(() => this.disabled() || this._group.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Feed the roving-focus item so keyboard nav / pointer activation skip a
+        // disabled radio.
+        effect(() => this._rovingItem.disabled.set(this.effectiveDisabled()));
+        const ref = {
+            element: this.element.nativeElement,
+            value: this.value,
+            disabled: this.effectiveDisabled,
+        };
+        this._group.register(ref);
+        inject(DestroyRef).onDestroy(() => this._group.unregister(ref));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: NgnRadio, isStandalone: true, selector: "ngn-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radio" }, properties: { "attr.aria-checked": "checked()", "attr.aria-disabled": "effectiveDisabled() ? 'true' : null", "attr.aria-label": "label()" } }, providers: [provideSelf(NgnRadio)], usesInheritance: true, hostDirectives: [{ directive: i1.NgnRovingItem }], ngImport: i0, template: "<span\n  [ptInt]=\"this\"\n  [ptClass]=\"{\n    circle: true,\n    'circle-checked': checked(),\n  }\"\n>\n  <span [ptInt]=\"this\" [ptClass]=\"'dot'\"></span>\n</span>\n<span [ptInt]=\"this\" [ptClass]=\"'label'\"><ng-content /></span>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-radio', imports: [NgnPt], hostDirectives: [NgnRovingItem], providers: [provideSelf(NgnRadio)], host: {
+                        role: 'radio',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.aria-disabled]': "effectiveDisabled() ? 'true' : null",
+                        '[attr.aria-label]': 'label()',
+                    }, template: "<span\n  [ptInt]=\"this\"\n  [ptClass]=\"{\n    circle: true,\n    'circle-checked': checked(),\n  }\"\n>\n  <span [ptInt]=\"this\" [ptClass]=\"'dot'\"></span>\n</span>\n<span [ptInt]=\"this\" [ptClass]=\"'label'\"><ng-content /></span>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGN_RADIO_GROUP, NgnRadio, NgnRadioGroup };
+//# sourceMappingURL=ngneers-controls-radio.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-radio.mjs","sources":["../../src/radio/radio-group.token.ts","../../src/radio/radio-group.ts","../../src/radio/radio-group.html","../../src/radio/radio.ts","../../src/radio/radio.html","../../src/radio/ngneers-controls-radio.ts"],"sourcesContent":["import { InjectionToken, type Signal } from '@angular/core';\n\n/**\n * A single radio option registered with its enclosing group. The group keys\n * selection and keyboard coordination off these refs; `element` correlates a\n * roving-focus item back to its payload `value`.\n */\nexport interface NgnRadioRef<V> {\n  readonly element: HTMLElement;\n  /** The option payload this radio contributes to the group value. */\n  readonly value: Signal<V>;\n  /** Effective disabled state (own disabled OR the group being disabled). */\n  readonly disabled: Signal<boolean>;\n}\n\n/**\n * The slice of the radio group that child `ngn-radio`s consume. Kept as a\n * token + interface (rather than the concrete class) so the child never imports\n * the group component — avoiding a circular dependency between the two files.\n */\nexport interface NgnRadioGroupApi<V> {\n  /** The currently selected group value. */\n  readonly value: Signal<V>;\n  /** Whether the whole group is disabled. */\n  readonly disabled: Signal<boolean>;\n  /** Whether the group is read-only (navigable, but selection is frozen). */\n  readonly readonly: Signal<boolean>;\n  register(ref: NgnRadioRef<V>): void;\n  unregister(ref: NgnRadioRef<V>): void;\n}\n\nexport const NGN_RADIO_GROUP = new InjectionToken<NgnRadioGroupApi<unknown>>('NGN_RADIO_GROUP');\n","import { Component, DestroyRef, effect, inject, signal } from '@angular/core';\nimport { provideSelf, ValueControlBase } from '@ngneers/controls/base';\nimport { NgnRovingGroup } from '@ngneers/controls/roving-focus';\nimport { radioGroupControlTemplate } from '@ngneers/controls-themes/templates/radio-group';\n\nimport { NGN_RADIO_GROUP, type NgnRadioGroupApi, type NgnRadioRef } from './radio-group.token';\n\n/**\n * A themed radio group. Owns the selected {@link value}; the individual\n * `ngn-radio` children projected inside are presentational and report their\n * payload up through {@link register}.\n *\n * Keyboard handling and roving tab order are delegated to `NgnRovingGroup`\n * (applied as a host directive). Selection follows focus: moving the roving\n * active item (arrows / Home / End / pointer) selects it, matching native\n * radio-group behavior.\n *\n * @category control\n */\n@Component({\n  selector: 'ngn-radio-group',\n  templateUrl: './radio-group.html',\n  hostDirectives: [{ directive: NgnRovingGroup, inputs: ['orientation', 'rovingWrap'] }],\n  providers: [provideSelf(NgnRadioGroup), { provide: NGN_RADIO_GROUP, useExisting: NgnRadioGroup }],\n  host: {\n    role: 'radiogroup',\n    '[attr.aria-label]': 'label()',\n    '[attr.aria-labelledby]': 'labelledBy()',\n    '[attr.aria-orientation]': 'roving.orientation()',\n    '[attr.aria-invalid]': \"invalid() ? 'true' : null\",\n    '[attr.aria-disabled]': \"disabled() ? 'true' : null\",\n  },\n})\nexport class NgnRadioGroup<V>\n  extends ValueControlBase<'radioGroup', V>\n  implements NgnRadioGroupApi<V>\n{\n  protected readonly theme = this.injectThemeTemplate(radioGroupControlTemplate, {\n    root: true,\n    invalid: () => this.invalid(),\n  });\n\n  /** The roving-focus host directive that drives keyboard/tab coordination. */\n  protected readonly roving = inject(NgnRovingGroup);\n\n  private readonly _radios = signal<readonly NgnRadioRef<V>[]>([]);\n\n  public register(ref: NgnRadioRef<V>): void {\n    this._radios.update(list => (list.includes(ref) ? list : [...list, ref]));\n  }\n\n  public unregister(ref: NgnRadioRef<V>): void {\n    this._radios.update(list => list.filter(r => r !== ref));\n  }\n\n  constructor() {\n    super();\n\n    // Selection follows focus: the roving group emits only on genuine\n    // navigation/activation (never on mount or plain Tab-in), so wiring value\n    // here gives native \"arrow selects\" behavior without spurious writes.\n    const sub = this.roving.activeItemChange.subscribe(index => {\n      if (this.readonly() || this.disabled()) {\n        return;\n      }\n      const element = this.roving.items()[index]?.element;\n      const radio = this._radios().find(r => r.element === element);\n      if (!radio || radio.disabled()) {\n        return;\n      }\n      this.value.set(radio.value());\n      this.touched.set(true);\n    });\n    inject(DestroyRef).onDestroy(() => sub.unsubscribe());\n\n    // Keep the roving tab stop on the selected radio so Tab-in lands on the\n    // checked option (native behavior). Disabled radios are skipped so a\n    // selected-but-disabled option never becomes the tab stop. `syncActiveIndex`\n    // updates the tab stop silently — no emit, no focus move — so a programmatic\n    // `value` change never yanks DOM focus into the group.\n    effect(() => {\n      const items = this.roving.items();\n      if (!items.length) {\n        return;\n      }\n      const radios = this._radios();\n      const value = this.value();\n      const index = items.findIndex(item => {\n        const radio = radios.find(r => r.element === item.element);\n        return radio ? !radio.disabled() && radio.value() === value : false;\n      });\n      if (index >= 0) {\n        this.roving.syncActiveIndex(index);\n      }\n    });\n  }\n}\n","<ng-content />\n","import {\n  booleanAttribute,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  inject,\n  input,\n} from '@angular/core';\nimport { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';\nimport { NgnRovingItem } from '@ngneers/controls/roving-focus';\nimport { radioControlTemplate } from '@ngneers/controls-themes/templates/radio';\n\nimport { NGN_RADIO_GROUP } from './radio-group.token';\n\n/**\n * A single radio option. Must be projected inside an `ngn-radio-group`, which\n * owns the selected value — this control only contributes its {@link value}\n * payload and renders the themed dot. The label is authored via content\n * projection (`<ngn-radio [value]=\"…\">Label</ngn-radio>`) with an optional\n * {@link label} input fallback.\n *\n * @category control\n */\n@Component({\n  selector: 'ngn-radio',\n  templateUrl: './radio.html',\n  imports: [NgnPt],\n  hostDirectives: [NgnRovingItem],\n  providers: [provideSelf(NgnRadio)],\n  host: {\n    role: 'radio',\n    '[attr.aria-checked]': 'checked()',\n    '[attr.aria-disabled]': \"effectiveDisabled() ? 'true' : null\",\n    '[attr.aria-label]': 'label()',\n  },\n})\nexport class NgnRadio<V> extends NgnBase<'radio'> {\n  protected readonly theme = this.injectThemeTemplate(radioControlTemplate, {\n    root: true,\n  });\n\n  /** The payload this radio selects into the enclosing group. */\n  public readonly value = input.required<V>();\n  /** Disables this individual option. */\n  public readonly disabled = input(false, { transform: booleanAttribute });\n  /** Optional accessible label; overrides projected content for the a11y name. */\n  public readonly label = input<string | null>(null);\n\n  private readonly _group = inject(NGN_RADIO_GROUP);\n  private readonly _rovingItem = inject(NgnRovingItem);\n\n  /** Whether this radio is the currently selected option in its group. */\n  protected readonly checked = computed(() => this._group.value() === this.value());\n\n  /** Disabled if this option or the whole group is disabled. */\n  protected readonly effectiveDisabled = computed(() => this.disabled() || this._group.disabled());\n\n  constructor() {\n    super();\n\n    // Feed the roving-focus item so keyboard nav / pointer activation skip a\n    // disabled radio.\n    effect(() => this._rovingItem.disabled.set(this.effectiveDisabled()));\n\n    const ref = {\n      element: this.element.nativeElement,\n      value: this.value,\n      disabled: this.effectiveDisabled,\n    };\n    this._group.register(ref);\n    inject(DestroyRef).onDestroy(() => this._group.unregister(ref));\n  }\n}\n","<span\n  [ptInt]=\"this\"\n  [ptClass]=\"{\n    circle: true,\n    'circle-checked': checked(),\n  }\"\n>\n  <span [ptInt]=\"this\" [ptClass]=\"'dot'\"></span>\n</span>\n<span [ptInt]=\"this\" [ptClass]=\"'label'\"><ng-content /></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}