@ngneers/controls 0.0.1-next.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-inplace.mjs","sources":["../../src/inplace/inplace-templates.ts","../../src/inplace/inplace.ts","../../src/inplace/inplace.html","../../src/inplace/ngneers-controls-inplace.ts"],"sourcesContent":["import { computed, contentChild, Directive, input, TemplateRef } from '@angular/core';\nimport { templateTypesFn } from '@ngneers/controls/api/ng';\nimport { NgnBase } from '@ngneers/controls/base';\n\nimport type { ContentTemplateType } from './types';\n\n@Directive()\nexport abstract class InplaceTemplates extends NgnBase<'inplace'> {\n  // Display template\n  private readonly _userDisplayTemplate = contentChild<TemplateRef<unknown>>('display');\n  /**\n   * Set a custom template for the display.\n   * Can also be set using an `<ng-template>` element with `#display` template reference variable.\n   */\n  public readonly templateDisplay = input<TemplateRef<unknown> | null>(null);\n  protected readonly displayTemplate = computed(\n    () => this._userDisplayTemplate() ?? this.templateDisplay()\n  );\n  /**\n   * Context for the display template.\n   */\n  public readonly templateDisplayContext = input<unknown>();\n\n  // Content template\n  private readonly _userContentTemplate =\n    contentChild<TemplateRef<typeof this.templateTypes.content>>('content');\n  /**\n   * Set a custom template for the content.\n   * Can also be set using an `<ng-template>` element with `#content` template reference variable.\n   */\n  public readonly templateContent = input<TemplateRef<typeof this.templateTypes.content> | null>(\n    null\n  );\n  protected readonly contentTemplate = computed(\n    () => this._userContentTemplate() ?? this.templateContent()\n  );\n  /**\n   * Context for the content template.\n   */\n  public readonly templateContentContext = input<unknown>();\n\n  /**\n   * Types for the inplace templates.\n   */\n  public readonly templateTypes = templateTypesFn<{\n    /**\n     * Type of the template variable for the content template.\n     */\n    content: ContentTemplateType;\n  }>();\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  afterRenderEffect,\n  booleanAttribute,\n  Component,\n  type ElementRef,\n  input,\n  model,\n  viewChild,\n} from '@angular/core';\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\nimport { NgnDefer } from '@ngneers/controls/defer';\nimport { signalWithPrevious } from '@ngneers/controls/utils-ng';\nimport { inplaceControlTemplate } from '@ngneers/controls-themes/templates/inplace';\n\nimport { InplaceTemplates } from './inplace-templates';\n\n/**\n * @category control\n */\n@Component({\n  selector: 'ngn-inplace',\n  templateUrl: './inplace.html',\n  imports: [NgnPt, NgTemplateOutlet, NgnDefer],\n  providers: [provideSelf(NgnInplace)],\n})\nexport class NgnInplace extends InplaceTemplates {\n  protected readonly theme = this.injectThemeTemplate(inplaceControlTemplate, {\n    root: true,\n    disabled: () => this.disabled(),\n  });\n\n  protected readonly closeContent = this.switchToDisplay.bind(this);\n\n  private readonly _displayTrigger = viewChild<ElementRef<HTMLButtonElement>>('displayTrigger');\n  private readonly _contentRef = viewChild<ElementRef<HTMLElement>>('contentRef');\n\n  constructor() {\n    super();\n    // `contentVisible` is declared below; its field initializer has already run by\n    // the time this constructor body executes, so it is safe to read here.\n    const contentVisibleWithPrevious = signalWithPrevious(this.contentVisible);\n    // Keep focus with the user across the display↔content swap — the outgoing view\n    // is unmounted, which would otherwise drop focus to the document body. Both\n    // directions only act when focus WAS dropped to the body, never when the content\n    // (or something else on the page) already claimed it — so a content control that\n    // autofocuses itself (e.g. edit-inplace's input) keeps focus. Runs after render\n    // so the target element exists.\n    afterRenderEffect(() => {\n      const { current: visible, previous } = contentVisibleWithPrevious();\n      const doc = this.element.nativeElement.ownerDocument;\n      const active = doc.activeElement;\n      const droppedToBody = active === null || active === doc.body;\n      if (!droppedToBody) {\n        return;\n      }\n      if (visible && previous === false) {\n        // Opened: move focus into the content region so it is not stranded.\n        this._contentRef()?.nativeElement.focus();\n      } else if (!visible && previous === true) {\n        // Closed: return focus to the display trigger.\n        this._displayTrigger()?.nativeElement.focus();\n      }\n    });\n  }\n\n  /**\n   * Controls the visibility of the content.\n   */\n  public readonly contentVisible = model<boolean>(false);\n  /**\n   * Whether the content is loaded lazily.\n   * @default true\n   */\n  public readonly lazy = input(true, { transform: booleanAttribute });\n  /**\n   * Whether the content is cached when closed.\n   * @default false\n   */\n  public readonly cache = input(false, { transform: booleanAttribute });\n  /**\n   * Explicitly apply disabled state styling\n   * @default false\n   */\n  public readonly disabled = input(false, { transform: booleanAttribute });\n\n  /**\n   * Switches to the content view.\n   */\n  public switchToContent() {\n    if (this.disabled()) {\n      return;\n    }\n    this.contentVisible.set(true);\n  }\n\n  /**\n   * Switches to the display view.\n   */\n  public switchToDisplay() {\n    this.contentVisible.set(false);\n  }\n\n  /**\n   * Toggles between the display and content views.\n   */\n  public toggle() {\n    this.contentVisible.update(v => !v);\n  }\n}\n","@if (contentVisible()) {\n  <div #contentRef tabindex=\"-1\" [ptInt]=\"this\" [ptClass]=\"'content'\">\n    <ngn-defer\n      [open]=\"contentVisible()\"\n      [lazyContent]=\"contentTemplate()\"\n      [lazyContentContext]=\"templateContentContext() ?? { $implicit: { close: closeContent } }\"\n      [lazy]=\"lazy()\"\n      [cache]=\"cache()\"\n    />\n  </div>\n} @else {\n  <button\n    #displayTrigger\n    type=\"button\"\n    [ptInt]=\"this\"\n    [ptClass]=\"'display'\"\n    (click)=\"switchToContent()\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"displayTemplate()\"\n      [ngTemplateOutletContext]=\"templateDisplayContext()\"\n    />\n  </button>\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-input-field.mjs

@@ -0,0 +1,165 @@
+import * as i0 from '@angular/core';
+import { inject, input, booleanAttribute, contentChildren, computed, effect, Component } from '@angular/core';
+import { NgnBase, NGN_CONTROL, 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 { generateElementId } from '@ngneers/controls/utils-ng';
+import { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';
+
+/**
+ * @category control
+ */
+class NgnInputField extends NgnBase {
+    theme = this.injectThemeTemplate(inputFieldControlTemplate, 'host');
+    i18n = inject(I18n).translations;
+    /**
+     * Label for the input field
+     * @default null
+     */
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the `aria-labelledby` attribute on the input element
+     * @default null
+     */
+    labelledBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * The kind of label presentation
+     * @todo add link to custom kind documentation subsection label
+     * @default undefined
+     */
+    labelKind = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelKind" }] : /* istanbul ignore next */ []));
+    /**
+     * ID for the input element. Defaults to a generated id.
+     */
+    inputId = input(generateElementId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /**
+     * Show clear button
+     * @default false
+     */
+    showClearButton = input(false, { ...(ngDevMode ? { debugName: "showClearButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Custom icon for the clear button. Use with {@link showClearButton}.
+     * @default undefined
+     */
+    iconClearButton = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "iconClearButton" }] : /* istanbul ignore next */ []));
+    /**
+     * Tabindex for the input field itself.
+     * When another focusable (input) element is present inside the input field, this should be set to -1.
+     * @default -1
+     */
+    tabindex = input(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Explicitly apply readonly state styling
+     * @default false
+     */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Explicitly apply disabled state styling
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _projectedControls = contentChildren(NGN_CONTROL, { ...(ngDevMode ? { debugName: "_projectedControls" } : /* istanbul ignore next */ {}), descendants: true });
+    /**
+     * The projected primary control (input, mask, calendar, …), used to delegate
+     * pointer focus, clearing and stepping. Auxiliary controls inside the field
+     * (buttons, icons, spin buttons, …) are skipped via `isFieldControl`, so
+     * their placement/order never shadows the actual input.
+     */
+    control = computed(() => this._projectedControls().find(c => c.isFieldControl), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    /** The primary control's element when it is a native input/textarea. */
+    _inputElement = computed(() => {
+        const el = this.control()?.element.nativeElement;
+        return el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA')
+            ? el
+            : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_inputElement" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.initializeAutoThemeClasses('labelKind', this.labelKind);
+        effect(() => {
+            const inputElement = this._inputElement();
+            if (!inputElement) {
+                return;
+            }
+            inputElement.id = this.inputId();
+        });
+        effect(() => {
+            const inputElement = this._inputElement();
+            if (!inputElement) {
+                return;
+            }
+            const labelledBy = this.labelledBy();
+            inputElement.setAttribute('aria-labelledby', labelledBy ?? '');
+        });
+    }
+    clicked(event) {
+        // Give the projected control a chance to place focus from the pointer
+        // location (e.g. mask-input selects the section nearest the click). If it
+        // handles the event, skip the primitive focusing below.
+        if (this.control()?.focusFromPointer(event))
+            return;
+        if (!(event.target instanceof Node))
+            return;
+        const root = this.element.nativeElement;
+        const targetElement = event.target instanceof Element ? event.target : null;
+        // Controls that open/toggle on click (select combobox, calendar field) expose
+        // their interactive host as the focusable element (tabindex="0") -> redirect click there.
+        const focusable = root.querySelector('[tabindex="0"]');
+        if (focusable && !focusable.contains(event.target)) {
+            focusable.click();
+            return;
+        }
+        // Keep real projected actions (buttons, links, explicit tab stops) in charge of their own click.
+        const interactiveTarget = targetElement?.closest('button, a[href], select, [role="button"], [tabindex]:not([tabindex="-1"])');
+        if (interactiveTarget && root.contains(interactiveTarget)) {
+            return;
+        }
+        // Plain input fields: clicking the field chrome or non-interactive adornments should focus
+        // the actual input, even when the pointer target is SVG content inside an icon/state control.
+        this._inputElement()?.focus();
+    }
+    clearButtonClicked(event) {
+        event.stopPropagation();
+        // Controls that manage their own value (e.g. mask-input) clear via the hook;
+        // the DOM fallback below only works for plain text inputs.
+        if (this.control()?.clearValue()) {
+            return;
+        }
+        const inputElement = this.element.nativeElement.querySelector('input, textarea');
+        if (inputElement) {
+            inputElement.value = '';
+            inputElement.dispatchEvent(new Event('input', { bubbles: true }));
+            inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+            inputElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnInputField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NgnInputField, isStandalone: true, selector: "ngn-input-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, labelKind: { classPropertyName: "labelKind", publicName: "labelKind", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, iconClearButton: { classPropertyName: "iconClearButton", publicName: "iconClearButton", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "inert": "disabled()" } }, providers: [provideSelf(NgnInputField)], queries: [{ propertyName: "_projectedControls", predicate: NGN_CONTROL, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (label(); as label) {\n  <label [ptInt]=\"this\" [ptClass]=\"'label'\" [for]=\"inputId()\">{{ label }}</label>\n}\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  [ptInt]=\"this\"\n  [ptClass]=\"{\n    root: true,\n    invalid: invalid(),\n    readonly: readonly(),\n    disabled: disabled(),\n  }\"\n  (click)=\"clicked($event)\"\n  [tabindex]=\"tabindex()\"\n>\n  <ng-content select=\"input, textarea\" />\n  @if (showClearButton()) {\n    <button\n      tabindex=\"-1\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'clear-button'\"\n      ngnButton\n      type=\"button\"\n      [kind]=\"'icon'\"\n      ngnButtonInline\n      (click)=\"clearButtonClicked($event)\"\n      [attr.aria-label]=\"i18n['inputField_clearInput']()\"\n    >\n      <ngn-icon defaultIcon=\"input-clear\" [icon]=\"iconClearButton()\" />\n    </button>\n  }\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"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["ngnButtonInline"], exportAs: ["ngnButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnInputField, decorators: [{
+            type: Component,
+            args: [{ imports: [NgnPt, NgnIcon, NgnButton], selector: 'ngn-input-field', host: {
+                        '[inert]': 'disabled()',
+                    }, providers: [provideSelf(NgnInputField)], template: "@if (label(); as label) {\n  <label [ptInt]=\"this\" [ptClass]=\"'label'\" [for]=\"inputId()\">{{ label }}</label>\n}\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  [ptInt]=\"this\"\n  [ptClass]=\"{\n    root: true,\n    invalid: invalid(),\n    readonly: readonly(),\n    disabled: disabled(),\n  }\"\n  (click)=\"clicked($event)\"\n  [tabindex]=\"tabindex()\"\n>\n  <ng-content select=\"input, textarea\" />\n  @if (showClearButton()) {\n    <button\n      tabindex=\"-1\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'clear-button'\"\n      ngnButton\n      type=\"button\"\n      [kind]=\"'icon'\"\n      ngnButtonInline\n      (click)=\"clearButtonClicked($event)\"\n      [attr.aria-label]=\"i18n['inputField_clearInput']()\"\n    >\n      <ngn-icon defaultIcon=\"input-clear\" [icon]=\"iconClearButton()\" />\n    </button>\n  }\n  <ng-content />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelledBy", required: false }] }], labelKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKind", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], iconClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClearButton", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _projectedControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NGN_CONTROL), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnInputField };
+//# sourceMappingURL=ngneers-controls-input-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-input-field.mjs","sources":["../../src/input-field/input-field.ts","../../src/input-field/input-field.html","../../src/input-field/ngneers-controls-input-field.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  Component,\n  computed,\n  contentChildren,\n  effect,\n  inject,\n  input,\n} from '@angular/core';\nimport { NgnBase, NGN_CONTROL, provideSelf, NgnPt } from '@ngneers/controls/base';\nimport { NgnButton } from '@ngneers/controls/button';\nimport { I18n } from '@ngneers/controls/i18n';\nimport { NgnIcon } from '@ngneers/controls/icon';\nimport { generateElementId } from '@ngneers/controls/utils-ng';\nimport { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';\n\nimport type { CustomKind, IconType } from '@ngneers/controls-custom-types';\n\n/**\n * @category control\n */\n@Component({\n  imports: [NgnPt, NgnIcon, NgnButton],\n  selector: 'ngn-input-field',\n  templateUrl: './input-field.html',\n  host: {\n    '[inert]': 'disabled()',\n  },\n  providers: [provideSelf(NgnInputField)],\n})\nexport class NgnInputField extends NgnBase<'inputField'> {\n  protected readonly theme = this.injectThemeTemplate(inputFieldControlTemplate, 'host');\n  protected readonly i18n = inject(I18n).translations;\n\n  /**\n   * Label for the input field\n   * @default null\n   */\n  public readonly label = input<string | null>(null);\n  /**\n   * Sets the `aria-labelledby` attribute on the input element\n   * @default null\n   */\n  public readonly labelledBy = input<string | null>(null);\n  /**\n   * The kind of label presentation\n   * @todo add link to custom kind documentation subsection label\n   * @default undefined\n   */\n  public readonly labelKind = input<CustomKind<'inputFieldLabel'>>(undefined as never);\n  /**\n   * ID for the input element. Defaults to a generated id.\n   */\n  public readonly inputId = input<string>(generateElementId());\n  /**\n   * Show clear button\n   * @default false\n   */\n  public readonly showClearButton = input(false, { transform: booleanAttribute });\n  /**\n   * Custom icon for the clear button. Use with {@link showClearButton}.\n   * @default undefined\n   */\n  public readonly iconClearButton = input<IconType>();\n  /**\n   * Tabindex for the input field itself.\n   * When another focusable (input) element is present inside the input field, this should be set to -1.\n   * @default -1\n   */\n  public readonly tabindex = input<number>(-1);\n  /**\n   * Explicitly apply invalid state styling\n   * @default false\n   */\n  public readonly invalid = input(false, { transform: booleanAttribute });\n  /**\n   * Explicitly apply readonly state styling\n   * @default false\n   */\n  public readonly readonly = input(false, { transform: booleanAttribute });\n  /**\n   * Explicitly apply disabled state styling\n   * @default false\n   */\n  public readonly disabled = input(false, { transform: booleanAttribute });\n\n  private readonly _projectedControls = contentChildren(NGN_CONTROL, { descendants: true });\n  /**\n   * The projected primary control (input, mask, calendar, …), used to delegate\n   * pointer focus, clearing and stepping. Auxiliary controls inside the field\n   * (buttons, icons, spin buttons, …) are skipped via `isFieldControl`, so\n   * their placement/order never shadows the actual input.\n   */\n  public readonly control = computed(() => this._projectedControls().find(c => c.isFieldControl));\n\n  /** The primary control's element when it is a native input/textarea. */\n  private readonly _inputElement = computed(() => {\n    const el = this.control()?.element.nativeElement;\n    return el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA')\n      ? (el as HTMLInputElement | HTMLTextAreaElement)\n      : undefined;\n  });\n\n  constructor() {\n    super();\n    this.initializeAutoThemeClasses('labelKind', this.labelKind);\n    effect(() => {\n      const inputElement = this._inputElement();\n      if (!inputElement) {\n        return;\n      }\n      inputElement.id = this.inputId();\n    });\n    effect(() => {\n      const inputElement = this._inputElement();\n      if (!inputElement) {\n        return;\n      }\n      const labelledBy = this.labelledBy();\n      inputElement.setAttribute('aria-labelledby', labelledBy ?? '');\n    });\n  }\n\n  protected clicked(event: MouseEvent) {\n    // Give the projected control a chance to place focus from the pointer\n    // location (e.g. mask-input selects the section nearest the click). If it\n    // handles the event, skip the primitive focusing below.\n    if (this.control()?.focusFromPointer(event)) return;\n\n    if (!(event.target instanceof Node)) return;\n\n    const root = this.element.nativeElement;\n    const targetElement = event.target instanceof Element ? event.target : null;\n\n    // Controls that open/toggle on click (select combobox, calendar field) expose\n    // their interactive host as the focusable element (tabindex=\"0\") -> redirect click there.\n    const focusable = root.querySelector<HTMLElement>('[tabindex=\"0\"]');\n    if (focusable && !focusable.contains(event.target)) {\n      focusable.click();\n      return;\n    }\n\n    // Keep real projected actions (buttons, links, explicit tab stops) in charge of their own click.\n    const interactiveTarget = targetElement?.closest(\n      'button, a[href], select, [role=\"button\"], [tabindex]:not([tabindex=\"-1\"])'\n    );\n    if (interactiveTarget && root.contains(interactiveTarget)) {\n      return;\n    }\n\n    // Plain input fields: clicking the field chrome or non-interactive adornments should focus\n    // the actual input, even when the pointer target is SVG content inside an icon/state control.\n    this._inputElement()?.focus();\n  }\n\n  protected clearButtonClicked(event: MouseEvent) {\n    event.stopPropagation();\n    // Controls that manage their own value (e.g. mask-input) clear via the hook;\n    // the DOM fallback below only works for plain text inputs.\n    if (this.control()?.clearValue()) {\n      return;\n    }\n    const inputElement = this.element.nativeElement.querySelector('input, textarea');\n    if (inputElement) {\n      (inputElement as HTMLInputElement | HTMLTextAreaElement).value = '';\n      inputElement.dispatchEvent(new Event('input', { bubbles: true }));\n      inputElement.dispatchEvent(new Event('change', { bubbles: true }));\n      (inputElement as HTMLInputElement | HTMLTextAreaElement).focus();\n    }\n  }\n}\n","@if (label(); as label) {\n  <label [ptInt]=\"this\" [ptClass]=\"'label'\" [for]=\"inputId()\">{{ label }}</label>\n}\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  [ptInt]=\"this\"\n  [ptClass]=\"{\n    root: true,\n    invalid: invalid(),\n    readonly: readonly(),\n    disabled: disabled(),\n  }\"\n  (click)=\"clicked($event)\"\n  [tabindex]=\"tabindex()\"\n>\n  <ng-content select=\"input, textarea\" />\n  @if (showClearButton()) {\n    <button\n      tabindex=\"-1\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'clear-button'\"\n      ngnButton\n      type=\"button\"\n      [kind]=\"'icon'\"\n      ngnButtonInline\n      (click)=\"clearButtonClicked($event)\"\n      [attr.aria-label]=\"i18n['inputField_clearInput']()\"\n    >\n      <ngn-icon defaultIcon=\"input-clear\" [icon]=\"iconClearButton()\" />\n    </button>\n  }\n  <ng-content />\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-input.mjs

@@ -0,0 +1,72 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, runInInjectionContext, effect, Directive } from '@angular/core';
+import { domEventSignal } from '@ngneers/controls/api/ng';
+import { NgnBase, provideSelf } from '@ngneers/controls/base';
+import { inputControlTemplate } from '@ngneers/controls-themes/templates/input';
+
+/**
+ * @category control
+ */
+class NgnInput extends NgnBase {
+    isFieldControl = true;
+    theme = this.injectThemeTemplate(inputControlTemplate, {
+        root: true,
+        invalid: () => this.invalid(),
+        empty: () => !this.value(),
+    });
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The current value of the input, kept in sync with the native element in both directions.
+     * @default ''
+     */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    _input = this.element.nativeElement;
+    ngAfterViewInit() {
+        const changeEvent = domEventSignal(this.element.nativeElement, 'change', this.injector);
+        const inputEvent = domEventSignal(this.element.nativeElement, 'input', this.injector);
+        runInInjectionContext(this.injector, () => {
+            effect(() => {
+                const _changeEvent = changeEvent();
+                const _inputEvent = inputEvent();
+                if (!_changeEvent && !_inputEvent) {
+                    return;
+                }
+                const val = this._input.value;
+                this.value.set(val ?? '');
+            });
+        });
+    }
+    constructor() {
+        super();
+        effect(() => {
+            if (this._input.value !== this.value()) {
+                this._input.value = this.value() || '';
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: NgnInput, isStandalone: true, selector: "input[ngnInput], textarea[ngnInput]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.aria-invalid": "invalid() ? \"true\" : null" } }, providers: [provideSelf(NgnInput)], exportAs: ["ngnInput"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[ngnInput], textarea[ngnInput]',
+                    providers: [provideSelf(NgnInput)],
+                    exportAs: 'ngnInput',
+                    host: {
+                        '[attr.aria-invalid]': 'invalid() ? "true" : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnInput };
+//# sourceMappingURL=ngneers-controls-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngneers-controls-input.mjs","sources":["../../src/input/input.ts","../../src/input/ngneers-controls-input.ts"],"sourcesContent":["import {\n  type AfterViewInit,\n  booleanAttribute,\n  Directive,\n  effect,\n  input,\n  model,\n  runInInjectionContext,\n} from '@angular/core';\nimport { domEventSignal } from '@ngneers/controls/api/ng';\nimport { NgnBase, provideSelf } from '@ngneers/controls/base';\nimport { inputControlTemplate } from '@ngneers/controls-themes/templates/input';\n\n/**\n * @category control\n */\n@Directive({\n  selector: 'input[ngnInput], textarea[ngnInput]',\n  providers: [provideSelf(NgnInput)],\n  exportAs: 'ngnInput',\n  host: {\n    '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n  },\n})\nexport class NgnInput extends NgnBase<'input'> implements AfterViewInit {\n  public override readonly isFieldControl = true;\n  protected readonly theme = this.injectThemeTemplate(inputControlTemplate, {\n    root: true,\n    invalid: () => this.invalid(),\n    empty: () => !this.value(),\n  });\n  /**\n   * Explicitly apply invalid state styling\n   * @default false\n   */\n  public readonly invalid = input(false, { transform: booleanAttribute });\n\n  /**\n   * The current value of the input, kept in sync with the native element in both directions.\n   * @default ''\n   */\n  public readonly value = model<string | null>('');\n\n  private readonly _input = this.element.nativeElement as HTMLInputElement;\n\n  public ngAfterViewInit() {\n    const changeEvent = domEventSignal(\n      this.element.nativeElement as HTMLInputElement,\n      'change',\n      this.injector\n    );\n    const inputEvent = domEventSignal(\n      this.element.nativeElement as HTMLInputElement,\n      'input',\n      this.injector\n    );\n\n    runInInjectionContext(this.injector, () => {\n      effect(() => {\n        const _changeEvent = changeEvent();\n        const _inputEvent = inputEvent();\n        if (!_changeEvent && !_inputEvent) {\n          return;\n        }\n        const val = this._input.value;\n        this.value.set(val ?? '');\n      });\n    });\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this._input.value !== this.value()) {\n        this._input.value = this.value() || '';\n      }\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAaA;;AAEG;AASG,MAAO,QAAS,SAAQ,OAAgB,CAAA;IACnB,cAAc,GAAG,IAAI;AAC3B,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE;AACxE,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE;QAC7B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE;AAC3B,KAAA,CAAC;AACF;;;AAGG;IACa,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEvE;;;AAGG;IACa,KAAK,GAAG,KAAK,CAAgB,EAAE;8EAAC;AAE/B,IAAA,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,aAAiC;IAEjE,eAAe,GAAA;AACpB,QAAA,MAAM,WAAW,GAAG,cAAc,CAChC,IAAI,CAAC,OAAO,CAAC,aAAiC,EAC9C,QAAQ,EACR,IAAI,CAAC,QAAQ,CACd;AACD,QAAA,MAAM,UAAU,GAAG,cAAc,CAC/B,IAAI,CAAC,OAAO,CAAC,aAAiC,EAC9C,OAAO,EACP,IAAI,CAAC,QAAQ,CACd;AAED,QAAA,qBAAqB,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAK;YACxC,MAAM,CAAC,MAAK;AACV,gBAAA,MAAM,YAAY,GAAG,WAAW,EAAE;AAClC,gBAAA,MAAM,WAAW,GAAG,UAAU,EAAE;AAChC,gBAAA,IAAI,CAAC,YAAY,IAAI,CAAC,WAAW,EAAE;oBACjC;gBACF;AACA,gBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK;gBAC7B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;AAC3B,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QACP,MAAM,CAAC,MAAK;YACV,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,EAAE;gBACtC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE;YACxC;AACF,QAAA,CAAC,CAAC;IACJ;uGArDW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,qcANR,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAMvB,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qCAAqC;AAC/C,oBAAA,SAAS,EAAE,CAAC,WAAW,CAAA,QAAA,CAAU,CAAC;AAClC,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,2BAA2B;AACnD,qBAAA;AACF,iBAAA;;;ACvBD;;AAEG;;;;"}