@ngneers/controls 0.0.1-pre1 → 0.0.1-pre3

package/fesm2022/ngneers-controls-inplace.mjs

@@ -0,0 +1,107 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { contentChild, input, computed, Directive, model, booleanAttribute, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnDefer } from '@ngneers/controls/defer';
+import { inplaceControlTemplate } from '@ngneers/controls-themes/templates/inplace';
+import { templateTypesFn } from '@ngneers/controls/api/ng';
+
+class InplaceTemplates extends NgnBase {
+    // Display template
+    _userDisplayTemplate = contentChild('display', ...(ngDevMode ? [{ debugName: "_userDisplayTemplate" }] : []));
+    /**
+     * Set a custom template for the display.
+     * Can also be set using an `<ng-template>` element with `#display` template reference variable.
+     */
+    templateDisplay = input(null, ...(ngDevMode ? [{ debugName: "templateDisplay" }] : []));
+    displayTemplate = computed(() => this._userDisplayTemplate() ?? this.templateDisplay(), ...(ngDevMode ? [{ debugName: "displayTemplate" }] : []));
+    /**
+     * Context for the display template.
+     */
+    templateDisplayContext = input(...(ngDevMode ? [undefined, { debugName: "templateDisplayContext" }] : []));
+    // Content template
+    _userContentTemplate = contentChild('content', ...(ngDevMode ? [{ debugName: "_userContentTemplate" }] : []));
+    /**
+     * Set a custom template for the content.
+     * Can also be set using an `<ng-template>` element with `#content` template reference variable.
+     */
+    templateContent = input(null, ...(ngDevMode ? [{ debugName: "templateContent" }] : []));
+    contentTemplate = computed(() => this._userContentTemplate() ?? this.templateContent(), ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+    /**
+     * Context for the content template.
+     */
+    templateContentContext = input(...(ngDevMode ? [undefined, { debugName: "templateContentContext" }] : []));
+    /**
+     * Types for the drawer templates.
+     */
+    templateTypes = templateTypesFn();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InplaceTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: InplaceTemplates, isStandalone: true, inputs: { templateDisplay: { classPropertyName: "templateDisplay", publicName: "templateDisplay", isSignal: true, isRequired: false, transformFunction: null }, templateDisplayContext: { classPropertyName: "templateDisplayContext", publicName: "templateDisplayContext", isSignal: true, isRequired: false, transformFunction: null }, templateContent: { classPropertyName: "templateContent", publicName: "templateContent", isSignal: true, isRequired: false, transformFunction: null }, templateContentContext: { classPropertyName: "templateContentContext", publicName: "templateContentContext", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userDisplayTemplate", first: true, predicate: ["display"], descendants: true, isSignal: true }, { propertyName: "_userContentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InplaceTemplates, decorators: [{
+            type: Directive
+        }], propDecorators: { _userDisplayTemplate: [{ type: i0.ContentChild, args: ['display', { isSignal: true }] }], templateDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateDisplay", required: false }] }], templateDisplayContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateDisplayContext", required: false }] }], _userContentTemplate: [{ type: i0.ContentChild, args: ['content', { isSignal: true }] }], templateContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContent", required: false }] }], templateContentContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContentContext", required: false }] }] } });
+
+/**
+ * @category control
+ */
+class NgnInplace extends InplaceTemplates {
+    theme = this.injectThemeTemplate(inplaceControlTemplate, {
+        root: true,
+        disabled: () => this.disabled(),
+    });
+    closeContent = this.switchToDisplay.bind(this);
+    /**
+     * Controls the visibility of the content.
+     */
+    contentVisible = model(false, ...(ngDevMode ? [{ debugName: "contentVisible" }] : []));
+    /**
+     * Whether the content is loaded lazily.
+     * @default true
+     */
+    lazy = input(true, { ...(ngDevMode ? { debugName: "lazy" } : {}), transform: booleanAttribute });
+    /**
+     * Whether the content is cached when closed.
+     * @default false
+     */
+    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : {}), transform: booleanAttribute });
+    /**
+     * Explicitly apply disabled state styling
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /**
+     * Switches to the content view.
+     */
+    switchToContent() {
+        if (this.disabled()) {
+            return;
+        }
+        this.contentVisible.set(true);
+    }
+    /**
+     * Switches to the display view.
+     */
+    switchToDisplay() {
+        this.contentVisible.set(false);
+    }
+    /**
+     * Toggles between the display and content views.
+     */
+    toggle() {
+        this.contentVisible.update(v => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnInplace, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnInplace, isStandalone: true, selector: "ngn-inplace", inputs: { contentVisible: { classPropertyName: "contentVisible", publicName: "contentVisible", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "cache", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentVisible: "contentVisibleChange" }, providers: [provideSelf(NgnInplace)], usesInheritance: true, ngImport: i0, template: "@if (contentVisible()) {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n    <ngn-defer\r\n      [open]=\"contentVisible()\"\r\n      [lazyContent]=\"contentTemplate()\"\r\n      [lazyContentContext]=\"templateContentContext() ?? { $implicit: { close: closeContent } }\"\r\n      [lazy]=\"lazy()\"\r\n      [cache]=\"cache()\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <button [ptInt]=\"this\" [ptClass]=\"'display'\" role=\"button\" (click)=\"switchToContent()\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"displayTemplate()\"\r\n      [ngTemplateOutletContext]=\"templateDisplayContext()\"\r\n    />\r\n  </button>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnDefer, selector: "ngn-defer", inputs: ["lazyContent", "lazyContentContext", "open", "lazy", "cache", "hiddenOnClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnInplace, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-inplace', imports: [NgnPt, NgTemplateOutlet, NgnDefer], providers: [provideSelf(NgnInplace)], template: "@if (contentVisible()) {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n    <ngn-defer\r\n      [open]=\"contentVisible()\"\r\n      [lazyContent]=\"contentTemplate()\"\r\n      [lazyContentContext]=\"templateContentContext() ?? { $implicit: { close: closeContent } }\"\r\n      [lazy]=\"lazy()\"\r\n      [cache]=\"cache()\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <button [ptInt]=\"this\" [ptClass]=\"'display'\" role=\"button\" (click)=\"switchToContent()\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"displayTemplate()\"\r\n      [ngTemplateOutletContext]=\"templateDisplayContext()\"\r\n    />\r\n  </button>\r\n}\r\n" }]
+        }], propDecorators: { contentVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentVisible", required: false }] }, { type: i0.Output, args: ["contentVisibleChange"] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], cache: [{ type: i0.Input, args: [{ isSignal: true, alias: "cache", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgnInplace };
+//# sourceMappingURL=ngneers-controls-inplace.mjs.map

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';\r\nimport { templateTypesFn } from '@ngneers/controls/api/ng';\r\nimport { NgnBase } from '@ngneers/controls/base';\r\n\r\nimport type { ContentTemplateType } from './types';\r\n\r\n@Directive()\r\nexport abstract class InplaceTemplates extends NgnBase<'inplace'> {\r\n  // Display template\r\n  private readonly _userDisplayTemplate = contentChild<TemplateRef<unknown>>('display');\r\n  /**\r\n   * Set a custom template for the display.\r\n   * Can also be set using an `<ng-template>` element with `#display` template reference variable.\r\n   */\r\n  public readonly templateDisplay = input<TemplateRef<unknown> | null>(null);\r\n  protected readonly displayTemplate = computed(\r\n    () => this._userDisplayTemplate() ?? this.templateDisplay()\r\n  );\r\n  /**\r\n   * Context for the display template.\r\n   */\r\n  public readonly templateDisplayContext = input<unknown>();\r\n\r\n  // Content template\r\n  private readonly _userContentTemplate =\r\n    contentChild<TemplateRef<typeof this.templateTypes.content>>('content');\r\n  /**\r\n   * Set a custom template for the content.\r\n   * Can also be set using an `<ng-template>` element with `#content` template reference variable.\r\n   */\r\n  public readonly templateContent = input<TemplateRef<typeof this.templateTypes.content> | null>(\r\n    null\r\n  );\r\n  protected readonly contentTemplate = computed(\r\n    () => this._userContentTemplate() ?? this.templateContent()\r\n  );\r\n  /**\r\n   * Context for the content template.\r\n   */\r\n  public readonly templateContentContext = input<unknown>();\r\n\r\n  /**\r\n   * Types for the drawer templates.\r\n   */\r\n  public readonly templateTypes = templateTypesFn<{\r\n    /**\r\n     * Type of the template variable for the display template.\r\n     */\r\n    content: ContentTemplateType;\r\n  }>();\r\n}\r\n","import { NgTemplateOutlet } from '@angular/common';\r\nimport { booleanAttribute, Component, input, model, ChangeDetectionStrategy } from '@angular/core';\r\nimport { NgnPt, provideSelf } from '@ngneers/controls/base';\r\nimport { NgnDefer } from '@ngneers/controls/defer';\r\nimport { inplaceControlTemplate } from '@ngneers/controls-themes/templates/inplace';\r\n\r\nimport { InplaceTemplates } from './inplace-templates';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-inplace',\r\n  templateUrl: './inplace.html',\r\n  imports: [NgnPt, NgTemplateOutlet, NgnDefer],\r\n  providers: [provideSelf(NgnInplace)],\r\n})\r\nexport class NgnInplace extends InplaceTemplates {\r\n  protected readonly theme = this.injectThemeTemplate(inplaceControlTemplate, {\r\n    root: true,\r\n    disabled: () => this.disabled(),\r\n  });\r\n\r\n  protected readonly closeContent = this.switchToDisplay.bind(this);\r\n\r\n  /**\r\n   * Controls the visibility of the content.\r\n   */\r\n  public readonly contentVisible = model<boolean>(false);\r\n  /**\r\n   * Whether the content is loaded lazily.\r\n   * @default true\r\n   */\r\n  public readonly lazy = input(true, { transform: booleanAttribute });\r\n  /**\r\n   * Whether the content is cached when closed.\r\n   * @default false\r\n   */\r\n  public readonly cache = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Explicitly apply disabled state styling\r\n   * @default false\r\n   */\r\n  public readonly disabled = input(false, { transform: booleanAttribute });\r\n\r\n  /**\r\n   * Switches to the content view.\r\n   */\r\n  public switchToContent() {\r\n    if (this.disabled()) {\r\n      return;\r\n    }\r\n    this.contentVisible.set(true);\r\n  }\r\n\r\n  /**\r\n   * Switches to the display view.\r\n   */\r\n  public switchToDisplay() {\r\n    this.contentVisible.set(false);\r\n  }\r\n\r\n  /**\r\n   * Toggles between the display and content views.\r\n   */\r\n  public toggle() {\r\n    this.contentVisible.update(v => !v);\r\n  }\r\n}\r\n","@if (contentVisible()) {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'content'\">\r\n    <ngn-defer\r\n      [open]=\"contentVisible()\"\r\n      [lazyContent]=\"contentTemplate()\"\r\n      [lazyContentContext]=\"templateContentContext() ?? { $implicit: { close: closeContent } }\"\r\n      [lazy]=\"lazy()\"\r\n      [cache]=\"cache()\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <button [ptInt]=\"this\" [ptClass]=\"'display'\" role=\"button\" (click)=\"switchToContent()\">\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"displayTemplate()\"\r\n      [ngTemplateOutletContext]=\"templateDisplayContext()\"\r\n    />\r\n  </button>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,141 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, contentChild, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnButton } from '@ngneers/controls/button';
+import { I18n } from '@ngneers/controls/i18n';
+import { NgnIcon } from '@ngneers/controls/icon';
+import { NgnInput } from '@ngneers/controls/input';
+import { generateElementId } from '@ngneers/controls/utils-ng';
+import { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';
+
+const INPUT_FIELD = new InjectionToken('Inputfield');
+
+/**
+ * @category control
+ */
+class NgnInputField extends NgnBase {
+    theme = this.injectThemeTemplate(inputFieldControlTemplate, 'host');
+    i18n = inject(I18n).translations;
+    _parentInputfield = inject(INPUT_FIELD, { optional: true, skipSelf: true });
+    hasParentInputfield = !!this._parentInputfield;
+    /**
+     * Label for the input field
+     * @default null
+     */
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /**
+     * Sets the `aria-labelledby` attribute on the input element
+     * @default null
+     */
+    labelledBy = input(null, ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
+    /**
+     * The kind of label presentation
+     * @todo add link to custom kind documentation subsection label
+     * @default undefined
+     */
+    labelKind = input(undefined, ...(ngDevMode ? [{ debugName: "labelKind" }] : []));
+    /**
+     * ID for the input element
+     */
+    inputId = input(generateElementId(), ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /**
+     * Show clear button
+     * @default false
+     */
+    showClearButton = input(false, { ...(ngDevMode ? { debugName: "showClearButton" } : {}), transform: booleanAttribute });
+    /**
+     * Custom icon for the clear button. Use with `showClearButton`.
+     */
+    iconClearButton = input(...(ngDevMode ? [undefined, { debugName: "iconClearButton" }] : []));
+    /**
+     * 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, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    /**
+     * Explicitly apply invalid state styling
+     * @default false
+     */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : {}), transform: booleanAttribute });
+    /**
+     * Explicitly apply readonly state styling
+     * @default false
+     */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    /**
+     * Explicitly apply disabled state styling
+     * @default false
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    _ngnInput = contentChild(NgnInput, ...(ngDevMode ? [{ debugName: "_ngnInput" }] : []));
+    constructor() {
+        super();
+        this.initializeAutoThemeClasses('labelKind', this.labelKind);
+        effect(() => {
+            const ngnInput = this._ngnInput();
+            if (!ngnInput) {
+                return;
+            }
+            ngnInput.element.nativeElement.id = this.inputId();
+        });
+        effect(() => {
+            const ngnInput = this._ngnInput();
+            if (!ngnInput) {
+                return;
+            }
+            const labelledBy = this.labelledBy();
+            ngnInput.element.nativeElement.setAttribute('aria-labelledby', labelledBy ?? '');
+        });
+    }
+    clicked(event) {
+        // Prevent click event from propagating to parent input field
+        if (this.hasParentInputfield) {
+            return;
+        }
+        if (event.target instanceof HTMLElement) {
+            // Focus the input element when the input field is clicked
+            const inputElement = event.target.querySelector('input, textarea');
+            if (inputElement) {
+                inputElement.focus();
+            }
+        }
+    }
+    clearButtonClicked(event) {
+        event.stopPropagation();
+        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: "21.1.0", ngImport: i0, type: NgnInputField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: [
+            {
+                provide: INPUT_FIELD,
+                useExisting: forwardRef(() => NgnInputField),
+            },
+            provideSelf(NgnInputField),
+        ], queries: [{ propertyName: "_ngnInput", first: true, predicate: NgnInput, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (label(); as label) {\r\n  <label [ptInt]=\"this\" [ptClass]=\"'label'\" [for]=\"inputId()\">{{ label }}</label>\r\n}\r\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{\r\n    root: !hasParentInputfield,\r\n    invalid: invalid(),\r\n    readonly: readonly(),\r\n    disabled: disabled(),\r\n  }\"\r\n  (click)=\"clicked($event)\"\r\n  [tabindex]=\"tabindex()\"\r\n>\r\n  <ng-content select=\"input, textarea\" />\r\n  @if (showClearButton()) {\r\n    <button\r\n      tabindex=\"-1\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'clear-button'\"\r\n      ngnButton\r\n      type=\"button\"\r\n      [kind]=\"'icon'\"\r\n      inline\r\n      (click)=\"clearButtonClicked($event)\"\r\n      [attr.aria-label]=\"i18n['inputField_clearInput']()\"\r\n    >\r\n      <ngn-icon defaultIcon=\"xmark\" [icon]=\"iconClearButton()\" />\r\n    </button>\r\n  }\r\n  <ng-content />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnInputField, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgnPt, NgnIcon, NgnButton], selector: 'ngn-input-field', host: {
+                        '[inert]': 'disabled()',
+                    }, providers: [
+                        {
+                            provide: INPUT_FIELD,
+                            useExisting: forwardRef(() => NgnInputField),
+                        },
+                        provideSelf(NgnInputField),
+                    ], template: "@if (label(); as label) {\r\n  <label [ptInt]=\"this\" [ptClass]=\"'label'\" [for]=\"inputId()\">{{ label }}</label>\r\n}\r\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{\r\n    root: !hasParentInputfield,\r\n    invalid: invalid(),\r\n    readonly: readonly(),\r\n    disabled: disabled(),\r\n  }\"\r\n  (click)=\"clicked($event)\"\r\n  [tabindex]=\"tabindex()\"\r\n>\r\n  <ng-content select=\"input, textarea\" />\r\n  @if (showClearButton()) {\r\n    <button\r\n      tabindex=\"-1\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'clear-button'\"\r\n      ngnButton\r\n      type=\"button\"\r\n      [kind]=\"'icon'\"\r\n      inline\r\n      (click)=\"clearButtonClicked($event)\"\r\n      [attr.aria-label]=\"i18n['inputField_clearInput']()\"\r\n    >\r\n      <ngn-icon defaultIcon=\"xmark\" [icon]=\"iconClearButton()\" />\r\n    </button>\r\n  }\r\n  <ng-content />\r\n</div>\r\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 }] }], _ngnInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgnInput), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { INPUT_FIELD, 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/token.ts","../../src/input-field/input-field.ts","../../src/input-field/input-field.html","../../src/input-field/ngneers-controls-input-field.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nimport { NgnInputField } from './input-field';\r\n\r\nexport const INPUT_FIELD = new InjectionToken<NgnInputField>('Inputfield');\r\n","import {\r\n  booleanAttribute,\r\n  Component,\r\n  forwardRef,\r\n  inject,\r\n  input,\r\n  ChangeDetectionStrategy,\r\n  effect,\r\n  contentChild,\r\n} from '@angular/core';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnButton } from '@ngneers/controls/button';\r\nimport { I18n } from '@ngneers/controls/i18n';\r\nimport { NgnIcon } from '@ngneers/controls/icon';\r\nimport { NgnInput } from '@ngneers/controls/input';\r\nimport { generateElementId } from '@ngneers/controls/utils-ng';\r\nimport { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';\r\n\r\nimport { INPUT_FIELD } from './token';\r\n\r\nimport type { CustomKind, IconType } from '@ngneers/controls-custom-types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [NgnPt, NgnIcon, NgnButton],\r\n  selector: 'ngn-input-field',\r\n  templateUrl: './input-field.html',\r\n  host: {\r\n    '[inert]': 'disabled()',\r\n  },\r\n  providers: [\r\n    {\r\n      provide: INPUT_FIELD,\r\n      useExisting: forwardRef(() => NgnInputField),\r\n    },\r\n    provideSelf(NgnInputField),\r\n  ],\r\n})\r\nexport class NgnInputField extends NgnBase<'inputField'> {\r\n  protected readonly theme = this.injectThemeTemplate(inputFieldControlTemplate, 'host');\r\n  protected readonly i18n = inject(I18n).translations;\r\n  private readonly _parentInputfield = inject(INPUT_FIELD, { optional: true, skipSelf: true });\r\n  protected readonly hasParentInputfield = !!this._parentInputfield;\r\n\r\n  /**\r\n   * Label for the input field\r\n   * @default null\r\n   */\r\n  public readonly label = input<string | null>(null);\r\n  /**\r\n   * Sets the `aria-labelledby` attribute on the input element\r\n   * @default null\r\n   */\r\n  public readonly labelledBy = input<string | null>(null);\r\n  /**\r\n   * The kind of label presentation\r\n   * @todo add link to custom kind documentation subsection label\r\n   * @default undefined\r\n   */\r\n  public readonly labelKind = input<CustomKind<'inputFieldLabel'>>(undefined as never);\r\n  /**\r\n   * ID for the input element\r\n   */\r\n  public readonly inputId = input<string>(generateElementId());\r\n  /**\r\n   * Show clear button\r\n   * @default false\r\n   */\r\n  public readonly showClearButton = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Custom icon for the clear button. Use with `showClearButton`.\r\n   */\r\n  public readonly iconClearButton = input<IconType>();\r\n  /**\r\n   * Tabindex for the input field itself.\r\n   * When another focusable (input) element is present inside the input field, this should be set to -1.\r\n   * @default -1\r\n   */\r\n  public readonly tabindex = input<number>(-1);\r\n  /**\r\n   * Explicitly apply invalid state styling\r\n   * @default false\r\n   */\r\n  public readonly invalid = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Explicitly apply readonly state styling\r\n   * @default false\r\n   */\r\n  public readonly readonly = input(false, { transform: booleanAttribute });\r\n  /**\r\n   * Explicitly apply disabled state styling\r\n   * @default false\r\n   */\r\n  public readonly disabled = input(false, { transform: booleanAttribute });\r\n\r\n  private readonly _ngnInput = contentChild(NgnInput);\r\n\r\n  constructor() {\r\n    super();\r\n    this.initializeAutoThemeClasses('labelKind', this.labelKind);\r\n    effect(() => {\r\n      const ngnInput = this._ngnInput();\r\n      if (!ngnInput) {\r\n        return;\r\n      }\r\n      ngnInput.element.nativeElement.id = this.inputId();\r\n    });\r\n    effect(() => {\r\n      const ngnInput = this._ngnInput();\r\n      if (!ngnInput) {\r\n        return;\r\n      }\r\n      const labelledBy = this.labelledBy();\r\n      ngnInput.element.nativeElement.setAttribute('aria-labelledby', labelledBy ?? '');\r\n    });\r\n  }\r\n\r\n  protected clicked(event: MouseEvent) {\r\n    // Prevent click event from propagating to parent input field\r\n    if (this.hasParentInputfield) {\r\n      return;\r\n    }\r\n    if (event.target instanceof HTMLElement) {\r\n      // Focus the input element when the input field is clicked\r\n      const inputElement = event.target.querySelector('input, textarea');\r\n      if (inputElement) {\r\n        (inputElement as HTMLInputElement | HTMLTextAreaElement).focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  protected clearButtonClicked(event: MouseEvent) {\r\n    event.stopPropagation();\r\n    const inputElement = this.element.nativeElement.querySelector('input, textarea');\r\n    if (inputElement) {\r\n      (inputElement as HTMLInputElement | HTMLTextAreaElement).value = '';\r\n      inputElement.dispatchEvent(new Event('input', { bubbles: true }));\r\n      inputElement.dispatchEvent(new Event('change', { bubbles: true }));\r\n      (inputElement as HTMLInputElement | HTMLTextAreaElement).focus();\r\n    }\r\n  }\r\n}\r\n","@if (label(); as label) {\r\n  <label [ptInt]=\"this\" [ptClass]=\"'label'\" [for]=\"inputId()\">{{ label }}</label>\r\n}\r\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\r\n<div\r\n  [ptInt]=\"this\"\r\n  [ptClass]=\"{\r\n    root: !hasParentInputfield,\r\n    invalid: invalid(),\r\n    readonly: readonly(),\r\n    disabled: disabled(),\r\n  }\"\r\n  (click)=\"clicked($event)\"\r\n  [tabindex]=\"tabindex()\"\r\n>\r\n  <ng-content select=\"input, textarea\" />\r\n  @if (showClearButton()) {\r\n    <button\r\n      tabindex=\"-1\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'clear-button'\"\r\n      ngnButton\r\n      type=\"button\"\r\n      [kind]=\"'icon'\"\r\n      inline\r\n      (click)=\"clearButtonClicked($event)\"\r\n      [attr.aria-label]=\"i18n['inputField_clearInput']()\"\r\n    >\r\n      <ngn-icon defaultIcon=\"xmark\" [icon]=\"iconClearButton()\" />\r\n    </button>\r\n  }\r\n  <ng-content />\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,282 @@
+import * as i0 from '@angular/core';
+import { input, contentChild, computed, afterRenderEffect, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { domEventHandler } from '@ngneers/controls/api/ng';
+import { NgnBase, NgnPt, provideSelf } from '@ngneers/controls/base';
+import { NgnInput } from '@ngneers/controls/input';
+import { inputMaskControlTemplate } from '@ngneers/controls-themes/templates/input-mask';
+
+const time = [
+    {
+        accepts: /^\d$/,
+        default: '0',
+        placeholder: 'H',
+    },
+    {
+        accepts: /^\d$/,
+        default: '0',
+        placeholder: 'H',
+    },
+    ':',
+    {
+        accepts: /^\d$/,
+        default: '0',
+        placeholder: 'M',
+    },
+    {
+        accepts: /^\d$/,
+        default: '0',
+        placeholder: 'M',
+    },
+];
+const timeSeconds = [
+    ...time,
+    ':',
+    {
+        accepts: /^\d$/,
+        default: '0',
+        placeholder: 'S',
+    },
+    {
+        accepts: /^\d$/,
+        default: '0',
+        placeholder: 'S',
+    },
+];
+const MASKS = {
+    time,
+    timeSeconds,
+};
+
+/**
+ * Helper class for handling masked input functionality
+ */
+class MaskHelper {
+    _data;
+    constructor(data) {
+        this._data = data;
+    }
+    /**
+     * Ensure the mask is in the correct format
+     * Converts string masks to TextFieldMaskCfg format
+     * Returns null if no mask is provided
+     */
+    ensureMask(mask) {
+        if (!mask)
+            return null;
+        if (typeof mask === 'string') {
+            if (mask === 'time') {
+                return MASKS.time;
+            }
+            // Convert string mask to TextFieldMaskCfg
+            // 0 => digit, A => letter, * => alphanumeric
+            return mask.split('').map(char => {
+                if (char === '0') {
+                    return { placeholder: char, accepts: /\d/, default: '0' };
+                }
+                else if (char === 'A') {
+                    return { placeholder: char, accepts: /[a-zA-Z]/, default: 'A' };
+                }
+                else if (char === '*') {
+                    return { placeholder: char, accepts: /[a-zA-Z0-9]/, default: 'A' };
+                }
+                return char;
+            });
+        }
+        return mask;
+    }
+    /**
+     * Handle key down events to manage special keys like Backspace and Delete
+     */
+    handleKeyDown(event, mask) {
+        if (!mask || this._shouldIgnoreEvent(event)) {
+            return;
+        }
+        const el = event.target;
+        const key = event.key;
+        const currentPosition = el.selectionStart ?? 0;
+        if (this._isSpecialKey(key)) {
+            this._handleSpecialKey(event, el, key, currentPosition, mask);
+        }
+    }
+    /**
+     * Handle before input event to manage character input with mask validation
+     */
+    handleBeforeInput(event, mask) {
+        const el = event.target;
+        const key = event.data;
+        const currentPosition = el.selectionStart ?? 0;
+        if (!key) {
+            // If no key data, just return
+            return;
+        }
+        // Route to appropriate handler based on key type
+        if (!this._isSpecialKey(key)) {
+            this._handleCharacterInput(event, el, key, currentPosition, mask);
+        }
+    }
+    /**
+     * Check if the event should be ignored (modifier keys)
+     */
+    _shouldIgnoreEvent(event) {
+        return event.ctrlKey || event.metaKey || event.altKey;
+    }
+    /**
+     * Check if key is a special key (Backspace/Delete)
+     */
+    _isSpecialKey(key) {
+        return key.length > 1;
+    }
+    /**
+     * Handle special keys like Backspace and Delete
+     */
+    _handleSpecialKey(event, el, key, currentPosition, mask) {
+        if (key === 'Backspace' && currentPosition > 0) {
+            const maskEntry = mask[currentPosition - 1];
+            if (!maskEntry) {
+                return;
+            }
+            // Get the default character for this position
+            const defaultChar = typeof maskEntry === 'string' ? maskEntry : maskEntry.default;
+            if (currentPosition === el.value.length) {
+                return;
+            }
+            const newVal = el.value.slice(0, currentPosition - 1) + defaultChar + el.value.slice(currentPosition);
+            this._data.updateValue(el, newVal, currentPosition - 1);
+            event.preventDefault();
+        }
+        else if (key === 'Delete' && currentPosition < el.value.length) {
+            const maskEntry = mask[currentPosition];
+            if (!maskEntry) {
+                return;
+            }
+            // Get the default character for this position
+            const defaultChar = typeof maskEntry === 'string' ? maskEntry : maskEntry.default;
+            const newVal = el.value.slice(0, currentPosition) + defaultChar + el.value.slice(currentPosition + 1);
+            this._data.updateValue(el, newVal, currentPosition + 1);
+            event.preventDefault();
+        }
+    }
+    /**
+     * Handle regular character input with mask validation
+     */
+    _handleCharacterInput(event, el, key, currentPosition, mask) {
+        // Skip over static characters and find the next input position
+        const { position, autoPrintChars } = this._processStaticCharacters(el, currentPosition, mask);
+        const maskEntry = mask[position];
+        // Check if we're at a valid input position
+        if (!maskEntry || typeof maskEntry === 'string') {
+            event.preventDefault();
+            return;
+        }
+        // Validate the character against the mask requirements
+        if (!maskEntry.accepts.test(key)) {
+            event.preventDefault();
+            setTimeout(() => {
+                // Ensure the cursor position is set after the value update for android compatibility
+                el.setSelectionRange(position, position);
+            });
+            return;
+        }
+        // Build the new value with auto-inserted static characters
+        const newVal = el.value.slice(0, position) + autoPrintChars + key + el.value.slice(position + 1);
+        this._data.updateValue(el, newVal, position + 1);
+        event.preventDefault();
+    }
+    /**
+     * Process static characters in the mask and auto-insert them
+     * Returns the next input position and any static characters to insert
+     */
+    _processStaticCharacters(el, startPosition, mask) {
+        let currentPosition = startPosition;
+        let autoPrintChars = '';
+        let currentMaskEntry = mask[currentPosition];
+        // Skip over static characters and collect them for auto-insertion
+        while (currentMaskEntry && typeof currentMaskEntry === 'string') {
+            if (el.value.charAt(currentPosition) !== currentMaskEntry) {
+                autoPrintChars += currentMaskEntry;
+            }
+            currentPosition++;
+            currentMaskEntry = mask[currentPosition];
+        }
+        return { position: currentPosition, autoPrintChars };
+    }
+}
+
+/**
+ * @category control
+ */
+class NgnInputMask extends NgnBase {
+    theme = this.injectThemeTemplate(inputMaskControlTemplate);
+    /**
+     * The mask to apply to the input. Can be a predefined mask key, a custom mask configuration, or a string pattern.
+     */
+    mask = input(null, ...(ngDevMode ? [{ debugName: "mask" }] : []));
+    _ngnInput = contentChild.required(NgnInput);
+    _inputElement = computed(() => this._ngnInput().element.nativeElement, ...(ngDevMode ? [{ debugName: "_inputElement" }] : []));
+    constructor() {
+        super();
+        domEventHandler(this._inputElement, 'keydown', event => this.onKeyDown(event));
+        domEventHandler(this._inputElement, 'beforeinput', event => this.onBeforeInput(event));
+        afterRenderEffect(() => {
+            if (this._ngnInput().value() !== this.currentInputValue()) {
+                this.currentInputValue.set(this._ngnInput().value() ?? '');
+            }
+        });
+    }
+    _maskHelper = new MaskHelper({
+        updateValue: (e, v, i) => this._updateValue(e, v, i),
+    });
+    onInput(event) {
+        // Update the current input value
+        this.currentInputValue.set(event.target.value);
+    }
+    currentInputValue = signal('', ...(ngDevMode ? [{ debugName: "currentInputValue" }] : []));
+    _mask = computed(() => this._maskHelper.ensureMask(this.mask()), ...(ngDevMode ? [{ debugName: "_mask" }] : []));
+    maskWatermark = computed(() => {
+        const mask = this._mask();
+        if (!mask)
+            return null;
+        const maskString = mask
+            .map(entry => {
+            if (typeof entry === 'string')
+                return entry;
+            return entry.placeholder;
+        })
+            .join('');
+        return maskString.substring(this.currentInputValue().length, maskString.length);
+    }, ...(ngDevMode ? [{ debugName: "maskWatermark" }] : []));
+    onKeyDown(event) {
+        const mask = this._mask();
+        if (!mask)
+            return;
+        this._maskHelper.handleKeyDown(event, mask);
+    }
+    onBeforeInput(event) {
+        const mask = this._mask();
+        if (!mask)
+            return;
+        this._maskHelper.handleBeforeInput(event, mask);
+    }
+    _updateValue(el, newValue, cursorPosition) {
+        el.value = newValue;
+        this.currentInputValue.set(newValue);
+        setTimeout(() => {
+            // Ensure the cursor position is set after the value update for android compatibility
+            el.setSelectionRange(cursorPosition, cursorPosition);
+        });
+        this._inputElement().dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnInputMask, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: NgnInputMask, isStandalone: true, selector: "ngn-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSelf(NgnInputMask)], queries: [{ propertyName: "_ngnInput", first: true, predicate: NgnInput, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [ptInt]=\"this\" [ptClass]=\"'root'\">\r\n  <ng-content />\r\n  <span [ptInt]=\"this\" [ptClass]=\"'mask'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'mask-placeholder'\" aria-hidden=\"true\" style=\"opacity: 0\">{{\r\n      currentInputValue()\r\n    }}</span>\r\n    <span [ptInt]=\"this\" [ptClass]=\"'mask-text'\">{{ maskWatermark() }}</span>\r\n  </span>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnInputMask, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-input-mask', imports: [NgnPt], providers: [provideSelf(NgnInputMask)], template: "<div [ptInt]=\"this\" [ptClass]=\"'root'\">\r\n  <ng-content />\r\n  <span [ptInt]=\"this\" [ptClass]=\"'mask'\">\r\n    <span [ptInt]=\"this\" [ptClass]=\"'mask-placeholder'\" aria-hidden=\"true\" style=\"opacity: 0\">{{\r\n      currentInputValue()\r\n    }}</span>\r\n    <span [ptInt]=\"this\" [ptClass]=\"'mask-text'\">{{ maskWatermark() }}</span>\r\n  </span>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], _ngnInput: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgnInput), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MASKS, NgnInputMask };
+//# sourceMappingURL=ngneers-controls-input-mask.mjs.map