@ngneers/controls 0.0.1-pre4 → 0.0.1-pre6

package/fesm2022/ngneers-controls-inplace.mjs

@@ -8,37 +8,37 @@ import { templateTypesFn } from '@ngneers/controls/api/ng';
 
 class InplaceTemplates extends NgnBase {
     // Display template
-    _userDisplayTemplate = contentChild('display', ...(ngDevMode ? [{ debugName: "_userDisplayTemplate" }] : []));
+    _userDisplayTemplate = contentChild('display', ...(ngDevMode ? [{ debugName: "_userDisplayTemplate" }] : /* istanbul ignore next */ []));
     /**
      * 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" }] : []));
+    templateDisplay = input(null, ...(ngDevMode ? [{ debugName: "templateDisplay" }] : /* istanbul ignore next */ []));
+    displayTemplate = computed(() => this._userDisplayTemplate() ?? this.templateDisplay(), ...(ngDevMode ? [{ debugName: "displayTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Context for the display template.
      */
-    templateDisplayContext = input(...(ngDevMode ? [undefined, { debugName: "templateDisplayContext" }] : []));
+    templateDisplayContext = input(...(ngDevMode ? [undefined, { debugName: "templateDisplayContext" }] : /* istanbul ignore next */ []));
     // Content template
-    _userContentTemplate = contentChild('content', ...(ngDevMode ? [{ debugName: "_userContentTemplate" }] : []));
+    _userContentTemplate = contentChild('content', ...(ngDevMode ? [{ debugName: "_userContentTemplate" }] : /* istanbul ignore next */ []));
     /**
      * 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" }] : []));
+    templateContent = input(null, ...(ngDevMode ? [{ debugName: "templateContent" }] : /* istanbul ignore next */ []));
+    contentTemplate = computed(() => this._userContentTemplate() ?? this.templateContent(), ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Context for the content template.
      */
-    templateContentContext = input(...(ngDevMode ? [undefined, { debugName: "templateContentContext" }] : []));
+    templateContentContext = input(...(ngDevMode ? [undefined, { debugName: "templateContentContext" }] : /* istanbul ignore next */ []));
     /**
      * 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InplaceTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", 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 }] }] } });
 
@@ -54,22 +54,22 @@ class NgnInplace extends InplaceTemplates {
     /**
      * Controls the visibility of the content.
      */
-    contentVisible = model(false, ...(ngDevMode ? [{ debugName: "contentVisible" }] : []));
+    contentVisible = model(false, ...(ngDevMode ? [{ debugName: "contentVisible" }] : /* istanbul ignore next */ []));
     /**
      * Whether the content is loaded lazily.
      * @default true
      */
-    lazy = input(true, { ...(ngDevMode ? { debugName: "lazy" } : {}), transform: booleanAttribute });
+    lazy = input(true, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Whether the content is cached when closed.
      * @default false
      */
-    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : {}), transform: booleanAttribute });
+    cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Explicitly apply disabled state styling
      * @default false
      */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Switches to the content view.
      */
@@ -91,10 +91,10 @@ class NgnInplace extends InplaceTemplates {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnInplace, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", 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 }] }] } });

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

@@ -1 +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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"}
+{"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

@@ -22,53 +22,53 @@ class NgnInputField extends NgnBase {
      * Label for the input field
      * @default null
      */
-    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /**
      * Sets the `aria-labelledby` attribute on the input element
      * @default null
      */
-    labelledBy = input(null, ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
+    labelledBy = input(null, ...(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, ...(ngDevMode ? [{ debugName: "labelKind" }] : []));
+    labelKind = input(undefined, ...(ngDevMode ? [{ debugName: "labelKind" }] : /* istanbul ignore next */ []));
     /**
      * ID for the input element
      */
-    inputId = input(generateElementId(), ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    inputId = input(generateElementId(), ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
     /**
      * Show clear button
      * @default false
      */
-    showClearButton = input(false, { ...(ngDevMode ? { debugName: "showClearButton" } : {}), transform: booleanAttribute });
+    showClearButton = input(false, { ...(ngDevMode ? { debugName: "showClearButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Custom icon for the clear button. Use with `showClearButton`.
      */
-    iconClearButton = input(...(ngDevMode ? [undefined, { debugName: "iconClearButton" }] : []));
+    iconClearButton = input(...(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, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    tabindex = input(-1, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
     /**
      * Explicitly apply invalid state styling
      * @default false
      */
-    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Explicitly apply readonly state styling
      * @default false
      */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Explicitly apply disabled state styling
      * @default false
      */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
-    _ngnInput = contentChild(NgnInput, ...(ngDevMode ? [{ debugName: "_ngnInput" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    _ngnInput = contentChild(NgnInput, ...(ngDevMode ? [{ debugName: "_ngnInput" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         this.initializeAutoThemeClasses('labelKind', this.labelKind);
@@ -111,16 +111,16 @@ class NgnInputField extends NgnBase {
             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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnInputField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", 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 });
+        ], 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"], exportAs: ["ngnButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnInputField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnInputField, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgnPt, NgnIcon, NgnButton], selector: 'ngn-input-field', host: {
                         '[inert]': 'disabled()',

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

@@ -1 +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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"}
+{"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

@@ -210,9 +210,9 @@ class NgnInputMask extends NgnBase {
     /**
      * 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" }] : []));
+    mask = input(null, ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
     _ngnInput = contentChild.required(NgnInput);
-    _inputElement = computed(() => this._ngnInput().element.nativeElement, ...(ngDevMode ? [{ debugName: "_inputElement" }] : []));
+    _inputElement = computed(() => this._ngnInput().element.nativeElement, ...(ngDevMode ? [{ debugName: "_inputElement" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         domEventHandler(this._inputElement, 'keydown', event => this.onKeyDown(event));
@@ -230,8 +230,8 @@ class NgnInputMask extends NgnBase {
         // 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" }] : []));
+    currentInputValue = signal('', ...(ngDevMode ? [{ debugName: "currentInputValue" }] : /* istanbul ignore next */ []));
+    _mask = computed(() => this._maskHelper.ensureMask(this.mask()), ...(ngDevMode ? [{ debugName: "_mask" }] : /* istanbul ignore next */ []));
     maskWatermark = computed(() => {
         const mask = this._mask();
         if (!mask)
@@ -244,7 +244,7 @@ class NgnInputMask extends NgnBase {
         })
             .join('');
         return maskString.substring(this.currentInputValue().length, maskString.length);
-    }, ...(ngDevMode ? [{ debugName: "maskWatermark" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "maskWatermark" }] : /* istanbul ignore next */ []));
     onKeyDown(event) {
         const mask = this._mask();
         if (!mask)
@@ -266,10 +266,10 @@ class NgnInputMask extends NgnBase {
         });
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnInputMask, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", 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 }] }] } });

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

@@ -1 +1 @@
-{"version":3,"file":"ngneers-controls-input-mask.mjs","sources":["../../src/input-mask/masks.ts","../../src/input-mask/helper.ts","../../src/input-mask/input-mask.ts","../../src/input-mask/input-mask.html","../../src/input-mask/ngneers-controls-input-mask.ts"],"sourcesContent":["import type { InputMaskCfg } from './types';\r\n\r\nconst time = [\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'H',\r\n  },\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'H',\r\n  },\r\n  ':',\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'M',\r\n  },\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'M',\r\n  },\r\n] as const satisfies InputMaskCfg;\r\n\r\nconst timeSeconds = [\r\n  ...time,\r\n  ':',\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'S',\r\n  },\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'S',\r\n  },\r\n] as const satisfies InputMaskCfg;\r\n\r\nexport const MASKS = {\r\n  time,\r\n  timeSeconds,\r\n} as const satisfies Record<string, InputMaskCfg>;\r\n","import { MASKS } from './masks';\r\n\r\nimport type { InputMaskCfg } from './types';\r\n\r\n// Interface for communicating with the parent component\r\ntype MaskData = {\r\n  updateValue: (element: HTMLInputElement, value: string, position: number) => void;\r\n};\r\n\r\n/**\r\n * Helper class for handling masked input functionality\r\n */\r\nexport class MaskHelper {\r\n  private readonly _data: MaskData;\r\n\r\n  constructor(data: MaskData) {\r\n    this._data = data;\r\n  }\r\n\r\n  /**\r\n   * Ensure the mask is in the correct format\r\n   * Converts string masks to TextFieldMaskCfg format\r\n   * Returns null if no mask is provided\r\n   */\r\n  public ensureMask(mask: InputMaskCfg | string | null): InputMaskCfg | null {\r\n    if (!mask) return null;\r\n    if (typeof mask === 'string') {\r\n      if (mask === 'time') {\r\n        return MASKS.time;\r\n      }\r\n      // Convert string mask to TextFieldMaskCfg\r\n      // 0 => digit, A => letter, * => alphanumeric\r\n      return mask.split('').map(char => {\r\n        if (char === '0') {\r\n          return { placeholder: char, accepts: /\\d/, default: '0' };\r\n        } else if (char === 'A') {\r\n          return { placeholder: char, accepts: /[a-zA-Z]/, default: 'A' };\r\n        } else if (char === '*') {\r\n          return { placeholder: char, accepts: /[a-zA-Z0-9]/, default: 'A' };\r\n        }\r\n        return char;\r\n      });\r\n    }\r\n    return mask;\r\n  }\r\n\r\n  /**\r\n   * Handle key down events to manage special keys like Backspace and Delete\r\n   */\r\n  public handleKeyDown(event: KeyboardEvent, mask: InputMaskCfg): void {\r\n    if (!mask || this._shouldIgnoreEvent(event)) {\r\n      return;\r\n    }\r\n    const el = event.target as HTMLInputElement;\r\n    const key = event.key;\r\n    const currentPosition = el.selectionStart ?? 0;\r\n\r\n    if (this._isSpecialKey(key)) {\r\n      this._handleSpecialKey(event, el, key, currentPosition, mask);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle before input event to manage character input with mask validation\r\n   */\r\n  public handleBeforeInput(event: InputEvent, mask: InputMaskCfg): void {\r\n    const el = event.target as HTMLInputElement;\r\n    const key = event.data;\r\n    const currentPosition = el.selectionStart ?? 0;\r\n\r\n    if (!key) {\r\n      // If no key data, just return\r\n      return;\r\n    }\r\n\r\n    // Route to appropriate handler based on key type\r\n    if (!this._isSpecialKey(key)) {\r\n      this._handleCharacterInput(event, el, key, currentPosition, mask);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if the event should be ignored (modifier keys)\r\n   */\r\n  private _shouldIgnoreEvent(event: KeyboardEvent): boolean {\r\n    return event.ctrlKey || event.metaKey || event.altKey;\r\n  }\r\n\r\n  /**\r\n   * Check if key is a special key (Backspace/Delete)\r\n   */\r\n  private _isSpecialKey(key: string): boolean {\r\n    return key.length > 1;\r\n  }\r\n\r\n  /**\r\n   * Handle special keys like Backspace and Delete\r\n   */\r\n  private _handleSpecialKey(\r\n    event: KeyboardEvent,\r\n    el: HTMLInputElement,\r\n    key: string,\r\n    currentPosition: number,\r\n    mask: InputMaskCfg\r\n  ): void {\r\n    if (key === 'Backspace' && currentPosition > 0) {\r\n      const maskEntry = mask[currentPosition - 1];\r\n      if (!maskEntry) {\r\n        return;\r\n      }\r\n      // Get the default character for this position\r\n      const defaultChar = typeof maskEntry === 'string' ? maskEntry : maskEntry.default;\r\n\r\n      if (currentPosition === el.value.length) {\r\n        return;\r\n      }\r\n\r\n      const newVal =\r\n        el.value.slice(0, currentPosition - 1) + defaultChar + el.value.slice(currentPosition);\r\n\r\n      this._data.updateValue(el, newVal, currentPosition - 1);\r\n      event.preventDefault();\r\n    } else if (key === 'Delete' && currentPosition < el.value.length) {\r\n      const maskEntry = mask[currentPosition];\r\n      if (!maskEntry) {\r\n        return;\r\n      }\r\n      // Get the default character for this position\r\n      const defaultChar = typeof maskEntry === 'string' ? maskEntry : maskEntry.default;\r\n      const newVal =\r\n        el.value.slice(0, currentPosition) + defaultChar + el.value.slice(currentPosition + 1);\r\n\r\n      this._data.updateValue(el, newVal, currentPosition + 1);\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle regular character input with mask validation\r\n   */\r\n  private _handleCharacterInput(\r\n    event: InputEvent,\r\n    el: HTMLInputElement,\r\n    key: string,\r\n    currentPosition: number,\r\n    mask: InputMaskCfg\r\n  ): void {\r\n    // Skip over static characters and find the next input position\r\n    const { position, autoPrintChars } = this._processStaticCharacters(el, currentPosition, mask);\r\n    const maskEntry = mask[position];\r\n\r\n    // Check if we're at a valid input position\r\n    if (!maskEntry || typeof maskEntry === 'string') {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    // Validate the character against the mask requirements\r\n    if (!maskEntry.accepts.test(key)) {\r\n      event.preventDefault();\r\n      setTimeout(() => {\r\n        // Ensure the cursor position is set after the value update for android compatibility\r\n        el.setSelectionRange(position, position);\r\n      });\r\n      return;\r\n    }\r\n\r\n    // Build the new value with auto-inserted static characters\r\n    const newVal =\r\n      el.value.slice(0, position) + autoPrintChars + key + el.value.slice(position + 1);\r\n\r\n    this._data.updateValue(el, newVal, position + 1);\r\n    event.preventDefault();\r\n  }\r\n\r\n  /**\r\n   * Process static characters in the mask and auto-insert them\r\n   * Returns the next input position and any static characters to insert\r\n   */\r\n  private _processStaticCharacters(\r\n    el: HTMLInputElement,\r\n    startPosition: number,\r\n    mask: InputMaskCfg\r\n  ): { position: number; autoPrintChars: string } {\r\n    let currentPosition = startPosition;\r\n    let autoPrintChars = '';\r\n    let currentMaskEntry = mask[currentPosition];\r\n\r\n    // Skip over static characters and collect them for auto-insertion\r\n    while (currentMaskEntry && typeof currentMaskEntry === 'string') {\r\n      if (el.value.charAt(currentPosition) !== currentMaskEntry) {\r\n        autoPrintChars += currentMaskEntry;\r\n      }\r\n      currentPosition++;\r\n      currentMaskEntry = mask[currentPosition];\r\n    }\r\n\r\n    return { position: currentPosition, autoPrintChars };\r\n  }\r\n}\r\n","import {\r\n  afterRenderEffect,\r\n  Component,\r\n  computed,\r\n  contentChild,\r\n  input,\r\n  signal,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { domEventHandler } from '@ngneers/controls/api/ng';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnInput } from '@ngneers/controls/input';\r\nimport { inputMaskControlTemplate } from '@ngneers/controls-themes/templates/input-mask';\r\n\r\nimport { MaskHelper } from './helper';\r\n\r\nimport type { InputMaskCfg } from './types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-input-mask',\r\n  templateUrl: './input-mask.html',\r\n  imports: [NgnPt],\r\n  providers: [provideSelf(NgnInputMask)],\r\n})\r\nexport class NgnInputMask extends NgnBase<'inputMask'> {\r\n  protected readonly theme = this.injectThemeTemplate(inputMaskControlTemplate);\r\n  /**\r\n   * The mask to apply to the input. Can be a predefined mask key, a custom mask configuration, or a string pattern.\r\n   */\r\n  public readonly mask = input<'time' | InputMaskCfg | string | null>(null);\r\n\r\n  private readonly _ngnInput = contentChild.required<NgnInput>(NgnInput);\r\n  private readonly _inputElement = computed(\r\n    () => this._ngnInput().element.nativeElement as HTMLInputElement\r\n  );\r\n\r\n  constructor() {\r\n    super();\r\n    domEventHandler(this._inputElement, 'keydown', event => this.onKeyDown(event));\r\n    domEventHandler(this._inputElement, 'beforeinput', event => this.onBeforeInput(event));\r\n\r\n    afterRenderEffect(() => {\r\n      if (this._ngnInput().value() !== this.currentInputValue()) {\r\n        this.currentInputValue.set(this._ngnInput().value() ?? '');\r\n      }\r\n    });\r\n  }\r\n\r\n  private readonly _maskHelper = new MaskHelper({\r\n    updateValue: (e, v, i) => this._updateValue(e, v, i),\r\n  });\r\n\r\n  protected onInput(event: Event) {\r\n    // Update the current input value\r\n    this.currentInputValue.set((event.target as HTMLInputElement).value);\r\n  }\r\n\r\n  protected readonly currentInputValue = signal<string>('');\r\n\r\n  private readonly _mask = computed(() => this._maskHelper.ensureMask(this.mask()));\r\n\r\n  protected readonly maskWatermark = computed(() => {\r\n    const mask = this._mask();\r\n    if (!mask) return null;\r\n    const maskString = mask\r\n      .map(entry => {\r\n        if (typeof entry === 'string') return entry;\r\n        return entry.placeholder;\r\n      })\r\n      .join('');\r\n    return maskString.substring(this.currentInputValue().length, maskString.length);\r\n  });\r\n\r\n  protected onKeyDown(event: KeyboardEvent) {\r\n    const mask = this._mask();\r\n    if (!mask) return;\r\n    this._maskHelper.handleKeyDown(event, mask);\r\n  }\r\n\r\n  protected onBeforeInput(event: Event) {\r\n    const mask = this._mask();\r\n    if (!mask) return;\r\n    this._maskHelper.handleBeforeInput(event as InputEvent, mask);\r\n  }\r\n\r\n  private _updateValue(el: HTMLInputElement, newValue: string, cursorPosition: number): void {\r\n    el.value = newValue;\r\n    this.currentInputValue.set(newValue);\r\n    setTimeout(() => {\r\n      // Ensure the cursor position is set after the value update for android compatibility\r\n      el.setSelectionRange(cursorPosition, cursorPosition);\r\n    });\r\n    this._inputElement().dispatchEvent(new Event('input', { bubbles: true }));\r\n  }\r\n}\r\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngneers-controls-input-mask.mjs","sources":["../../src/input-mask/masks.ts","../../src/input-mask/helper.ts","../../src/input-mask/input-mask.ts","../../src/input-mask/input-mask.html","../../src/input-mask/ngneers-controls-input-mask.ts"],"sourcesContent":["import type { InputMaskCfg } from './types';\r\n\r\nconst time = [\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'H',\r\n  },\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'H',\r\n  },\r\n  ':',\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'M',\r\n  },\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'M',\r\n  },\r\n] as const satisfies InputMaskCfg;\r\n\r\nconst timeSeconds = [\r\n  ...time,\r\n  ':',\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'S',\r\n  },\r\n  {\r\n    accepts: /^\\d$/,\r\n    default: '0',\r\n    placeholder: 'S',\r\n  },\r\n] as const satisfies InputMaskCfg;\r\n\r\nexport const MASKS = {\r\n  time,\r\n  timeSeconds,\r\n} as const satisfies Record<string, InputMaskCfg>;\r\n","import { MASKS } from './masks';\r\n\r\nimport type { InputMaskCfg } from './types';\r\n\r\n// Interface for communicating with the parent component\r\ntype MaskData = {\r\n  updateValue: (element: HTMLInputElement, value: string, position: number) => void;\r\n};\r\n\r\n/**\r\n * Helper class for handling masked input functionality\r\n */\r\nexport class MaskHelper {\r\n  private readonly _data: MaskData;\r\n\r\n  constructor(data: MaskData) {\r\n    this._data = data;\r\n  }\r\n\r\n  /**\r\n   * Ensure the mask is in the correct format\r\n   * Converts string masks to TextFieldMaskCfg format\r\n   * Returns null if no mask is provided\r\n   */\r\n  public ensureMask(mask: InputMaskCfg | string | null): InputMaskCfg | null {\r\n    if (!mask) return null;\r\n    if (typeof mask === 'string') {\r\n      if (mask === 'time') {\r\n        return MASKS.time;\r\n      }\r\n      // Convert string mask to TextFieldMaskCfg\r\n      // 0 => digit, A => letter, * => alphanumeric\r\n      return mask.split('').map(char => {\r\n        if (char === '0') {\r\n          return { placeholder: char, accepts: /\\d/, default: '0' };\r\n        } else if (char === 'A') {\r\n          return { placeholder: char, accepts: /[a-zA-Z]/, default: 'A' };\r\n        } else if (char === '*') {\r\n          return { placeholder: char, accepts: /[a-zA-Z0-9]/, default: 'A' };\r\n        }\r\n        return char;\r\n      });\r\n    }\r\n    return mask;\r\n  }\r\n\r\n  /**\r\n   * Handle key down events to manage special keys like Backspace and Delete\r\n   */\r\n  public handleKeyDown(event: KeyboardEvent, mask: InputMaskCfg): void {\r\n    if (!mask || this._shouldIgnoreEvent(event)) {\r\n      return;\r\n    }\r\n    const el = event.target as HTMLInputElement;\r\n    const key = event.key;\r\n    const currentPosition = el.selectionStart ?? 0;\r\n\r\n    if (this._isSpecialKey(key)) {\r\n      this._handleSpecialKey(event, el, key, currentPosition, mask);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle before input event to manage character input with mask validation\r\n   */\r\n  public handleBeforeInput(event: InputEvent, mask: InputMaskCfg): void {\r\n    const el = event.target as HTMLInputElement;\r\n    const key = event.data;\r\n    const currentPosition = el.selectionStart ?? 0;\r\n\r\n    if (!key) {\r\n      // If no key data, just return\r\n      return;\r\n    }\r\n\r\n    // Route to appropriate handler based on key type\r\n    if (!this._isSpecialKey(key)) {\r\n      this._handleCharacterInput(event, el, key, currentPosition, mask);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if the event should be ignored (modifier keys)\r\n   */\r\n  private _shouldIgnoreEvent(event: KeyboardEvent): boolean {\r\n    return event.ctrlKey || event.metaKey || event.altKey;\r\n  }\r\n\r\n  /**\r\n   * Check if key is a special key (Backspace/Delete)\r\n   */\r\n  private _isSpecialKey(key: string): boolean {\r\n    return key.length > 1;\r\n  }\r\n\r\n  /**\r\n   * Handle special keys like Backspace and Delete\r\n   */\r\n  private _handleSpecialKey(\r\n    event: KeyboardEvent,\r\n    el: HTMLInputElement,\r\n    key: string,\r\n    currentPosition: number,\r\n    mask: InputMaskCfg\r\n  ): void {\r\n    if (key === 'Backspace' && currentPosition > 0) {\r\n      const maskEntry = mask[currentPosition - 1];\r\n      if (!maskEntry) {\r\n        return;\r\n      }\r\n      // Get the default character for this position\r\n      const defaultChar = typeof maskEntry === 'string' ? maskEntry : maskEntry.default;\r\n\r\n      if (currentPosition === el.value.length) {\r\n        return;\r\n      }\r\n\r\n      const newVal =\r\n        el.value.slice(0, currentPosition - 1) + defaultChar + el.value.slice(currentPosition);\r\n\r\n      this._data.updateValue(el, newVal, currentPosition - 1);\r\n      event.preventDefault();\r\n    } else if (key === 'Delete' && currentPosition < el.value.length) {\r\n      const maskEntry = mask[currentPosition];\r\n      if (!maskEntry) {\r\n        return;\r\n      }\r\n      // Get the default character for this position\r\n      const defaultChar = typeof maskEntry === 'string' ? maskEntry : maskEntry.default;\r\n      const newVal =\r\n        el.value.slice(0, currentPosition) + defaultChar + el.value.slice(currentPosition + 1);\r\n\r\n      this._data.updateValue(el, newVal, currentPosition + 1);\r\n      event.preventDefault();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle regular character input with mask validation\r\n   */\r\n  private _handleCharacterInput(\r\n    event: InputEvent,\r\n    el: HTMLInputElement,\r\n    key: string,\r\n    currentPosition: number,\r\n    mask: InputMaskCfg\r\n  ): void {\r\n    // Skip over static characters and find the next input position\r\n    const { position, autoPrintChars } = this._processStaticCharacters(el, currentPosition, mask);\r\n    const maskEntry = mask[position];\r\n\r\n    // Check if we're at a valid input position\r\n    if (!maskEntry || typeof maskEntry === 'string') {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    // Validate the character against the mask requirements\r\n    if (!maskEntry.accepts.test(key)) {\r\n      event.preventDefault();\r\n      setTimeout(() => {\r\n        // Ensure the cursor position is set after the value update for android compatibility\r\n        el.setSelectionRange(position, position);\r\n      });\r\n      return;\r\n    }\r\n\r\n    // Build the new value with auto-inserted static characters\r\n    const newVal =\r\n      el.value.slice(0, position) + autoPrintChars + key + el.value.slice(position + 1);\r\n\r\n    this._data.updateValue(el, newVal, position + 1);\r\n    event.preventDefault();\r\n  }\r\n\r\n  /**\r\n   * Process static characters in the mask and auto-insert them\r\n   * Returns the next input position and any static characters to insert\r\n   */\r\n  private _processStaticCharacters(\r\n    el: HTMLInputElement,\r\n    startPosition: number,\r\n    mask: InputMaskCfg\r\n  ): { position: number; autoPrintChars: string } {\r\n    let currentPosition = startPosition;\r\n    let autoPrintChars = '';\r\n    let currentMaskEntry = mask[currentPosition];\r\n\r\n    // Skip over static characters and collect them for auto-insertion\r\n    while (currentMaskEntry && typeof currentMaskEntry === 'string') {\r\n      if (el.value.charAt(currentPosition) !== currentMaskEntry) {\r\n        autoPrintChars += currentMaskEntry;\r\n      }\r\n      currentPosition++;\r\n      currentMaskEntry = mask[currentPosition];\r\n    }\r\n\r\n    return { position: currentPosition, autoPrintChars };\r\n  }\r\n}\r\n","import {\r\n  afterRenderEffect,\r\n  Component,\r\n  computed,\r\n  contentChild,\r\n  input,\r\n  signal,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { domEventHandler } from '@ngneers/controls/api/ng';\r\nimport { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';\r\nimport { NgnInput } from '@ngneers/controls/input';\r\nimport { inputMaskControlTemplate } from '@ngneers/controls-themes/templates/input-mask';\r\n\r\nimport { MaskHelper } from './helper';\r\n\r\nimport type { InputMaskCfg } from './types';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Component({\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  selector: 'ngn-input-mask',\r\n  templateUrl: './input-mask.html',\r\n  imports: [NgnPt],\r\n  providers: [provideSelf(NgnInputMask)],\r\n})\r\nexport class NgnInputMask extends NgnBase<'inputMask'> {\r\n  protected readonly theme = this.injectThemeTemplate(inputMaskControlTemplate);\r\n  /**\r\n   * The mask to apply to the input. Can be a predefined mask key, a custom mask configuration, or a string pattern.\r\n   */\r\n  public readonly mask = input<'time' | InputMaskCfg | string | null>(null);\r\n\r\n  private readonly _ngnInput = contentChild.required<NgnInput>(NgnInput);\r\n  private readonly _inputElement = computed(\r\n    () => this._ngnInput().element.nativeElement as HTMLInputElement\r\n  );\r\n\r\n  constructor() {\r\n    super();\r\n    domEventHandler(this._inputElement, 'keydown', event => this.onKeyDown(event));\r\n    domEventHandler(this._inputElement, 'beforeinput', event => this.onBeforeInput(event));\r\n\r\n    afterRenderEffect(() => {\r\n      if (this._ngnInput().value() !== this.currentInputValue()) {\r\n        this.currentInputValue.set(this._ngnInput().value() ?? '');\r\n      }\r\n    });\r\n  }\r\n\r\n  private readonly _maskHelper = new MaskHelper({\r\n    updateValue: (e, v, i) => this._updateValue(e, v, i),\r\n  });\r\n\r\n  protected onInput(event: Event) {\r\n    // Update the current input value\r\n    this.currentInputValue.set((event.target as HTMLInputElement).value);\r\n  }\r\n\r\n  protected readonly currentInputValue = signal<string>('');\r\n\r\n  private readonly _mask = computed(() => this._maskHelper.ensureMask(this.mask()));\r\n\r\n  protected readonly maskWatermark = computed(() => {\r\n    const mask = this._mask();\r\n    if (!mask) return null;\r\n    const maskString = mask\r\n      .map(entry => {\r\n        if (typeof entry === 'string') return entry;\r\n        return entry.placeholder;\r\n      })\r\n      .join('');\r\n    return maskString.substring(this.currentInputValue().length, maskString.length);\r\n  });\r\n\r\n  protected onKeyDown(event: KeyboardEvent) {\r\n    const mask = this._mask();\r\n    if (!mask) return;\r\n    this._maskHelper.handleKeyDown(event, mask);\r\n  }\r\n\r\n  protected onBeforeInput(event: Event) {\r\n    const mask = this._mask();\r\n    if (!mask) return;\r\n    this._maskHelper.handleBeforeInput(event as InputEvent, mask);\r\n  }\r\n\r\n  private _updateValue(el: HTMLInputElement, newValue: string, cursorPosition: number): void {\r\n    el.value = newValue;\r\n    this.currentInputValue.set(newValue);\r\n    setTimeout(() => {\r\n      // Ensure the cursor position is set after the value update for android compatibility\r\n      el.setSelectionRange(cursorPosition, cursorPosition);\r\n    });\r\n    this._inputElement().dispatchEvent(new Event('input', { bubbles: true }));\r\n  }\r\n}\r\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAEA,MAAM,IAAI,GAAG;AACX,IAAA;AACE,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,WAAW,EAAE,GAAG;AACjB,KAAA;AACD,IAAA;AACE,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,WAAW,EAAE,GAAG;AACjB,KAAA;IACD,GAAG;AACH,IAAA;AACE,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,WAAW,EAAE,GAAG;AACjB,KAAA;AACD,IAAA;AACE,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,WAAW,EAAE,GAAG;AACjB,KAAA;CAC8B;AAEjC,MAAM,WAAW,GAAG;AAClB,IAAA,GAAG,IAAI;IACP,GAAG;AACH,IAAA;AACE,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,WAAW,EAAE,GAAG;AACjB,KAAA;AACD,IAAA;AACE,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,WAAW,EAAE,GAAG;AACjB,KAAA;CAC8B;AAE1B,MAAM,KAAK,GAAG;IACnB,IAAI;IACJ,WAAW;;;AClCb;;AAEG;MACU,UAAU,CAAA;AACJ,IAAA,KAAK;AAEtB,IAAA,WAAA,CAAY,IAAc,EAAA;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI;IACnB;AAEA;;;;AAIG;AACI,IAAA,UAAU,CAAC,IAAkC,EAAA;AAClD,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;AACtB,QAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC5B,YAAA,IAAI,IAAI,KAAK,MAAM,EAAE;gBACnB,OAAO,KAAK,CAAC,IAAI;YACnB;;;YAGA,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,IAAG;AAC/B,gBAAA,IAAI,IAAI,KAAK,GAAG,EAAE;AAChB,oBAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE;gBAC3D;AAAO,qBAAA,IAAI,IAAI,KAAK,GAAG,EAAE;AACvB,oBAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE;gBACjE;AAAO,qBAAA,IAAI,IAAI,KAAK,GAAG,EAAE;AACvB,oBAAA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE;gBACpE;AACA,gBAAA,OAAO,IAAI;AACb,YAAA,CAAC,CAAC;QACJ;AACA,QAAA,OAAO,IAAI;IACb;AAEA;;AAEG;IACI,aAAa,CAAC,KAAoB,EAAE,IAAkB,EAAA;QAC3D,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;YAC3C;QACF;AACA,QAAA,MAAM,EAAE,GAAG,KAAK,CAAC,MAA0B;AAC3C,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG;AACrB,QAAA,MAAM,eAAe,GAAG,EAAE,CAAC,cAAc,IAAI,CAAC;AAE9C,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;AAC3B,YAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC;QAC/D;IACF;AAEA;;AAEG;IACI,iBAAiB,CAAC,KAAiB,EAAE,IAAkB,EAAA;AAC5D,QAAA,MAAM,EAAE,GAAG,KAAK,CAAC,MAA0B;AAC3C,QAAA,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI;AACtB,QAAA,MAAM,eAAe,GAAG,EAAE,CAAC,cAAc,IAAI,CAAC;QAE9C,IAAI,CAAC,GAAG,EAAE;;YAER;QACF;;QAGA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;AAC5B,YAAA,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC;QACnE;IACF;AAEA;;AAEG;AACK,IAAA,kBAAkB,CAAC,KAAoB,EAAA;QAC7C,OAAO,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM;IACvD;AAEA;;AAEG;AACK,IAAA,aAAa,CAAC,GAAW,EAAA;AAC/B,QAAA,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC;IACvB;AAEA;;AAEG;IACK,iBAAiB,CACvB,KAAoB,EACpB,EAAoB,EACpB,GAAW,EACX,eAAuB,EACvB,IAAkB,EAAA;QAElB,IAAI,GAAG,KAAK,WAAW,IAAI,eAAe,GAAG,CAAC,EAAE;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;YAC3C,IAAI,CAAC,SAAS,EAAE;gBACd;YACF;;AAEA,YAAA,MAAM,WAAW,GAAG,OAAO,SAAS,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,OAAO;YAEjF,IAAI,eAAe,KAAK,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE;gBACvC;YACF;YAEA,MAAM,MAAM,GACV,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC;AAExF,YAAA,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,GAAG,CAAC,CAAC;YACvD,KAAK,CAAC,cAAc,EAAE;QACxB;AAAO,aAAA,IAAI,GAAG,KAAK,QAAQ,IAAI,eAAe,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE;AAChE,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC;YACvC,IAAI,CAAC,SAAS,EAAE;gBACd;YACF;;AAEA,YAAA,MAAM,WAAW,GAAG,OAAO,SAAS,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,OAAO;YACjF,MAAM,MAAM,GACV,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,eAAe,CAAC,GAAG,WAAW,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,CAAC;AAExF,YAAA,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,GAAG,CAAC,CAAC;YACvD,KAAK,CAAC,cAAc,EAAE;QACxB;IACF;AAEA;;AAEG;IACK,qBAAqB,CAC3B,KAAiB,EACjB,EAAoB,EACpB,GAAW,EACX,eAAuB,EACvB,IAAkB,EAAA;;AAGlB,QAAA,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,wBAAwB,CAAC,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC;AAC7F,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;;QAGhC,IAAI,CAAC,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;YAC/C,KAAK,CAAC,cAAc,EAAE;YACtB;QACF;;QAGA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YAChC,KAAK,CAAC,cAAc,EAAE;YACtB,UAAU,CAAC,MAAK;;AAEd,gBAAA,EAAE,CAAC,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC1C,YAAA,CAAC,CAAC;YACF;QACF;;QAGA,MAAM,MAAM,GACV,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,cAAc,GAAG,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;AAEnF,QAAA,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAG,CAAC,CAAC;QAChD,KAAK,CAAC,cAAc,EAAE;IACxB;AAEA;;;AAGG;AACK,IAAA,wBAAwB,CAC9B,EAAoB,EACpB,aAAqB,EACrB,IAAkB,EAAA;QAElB,IAAI,eAAe,GAAG,aAAa;QACnC,IAAI,cAAc,GAAG,EAAE;AACvB,QAAA,IAAI,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC;;AAG5C,QAAA,OAAO,gBAAgB,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;YAC/D,IAAI,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,gBAAgB,EAAE;gBACzD,cAAc,IAAI,gBAAgB;YACpC;AACA,YAAA,eAAe,EAAE;AACjB,YAAA,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC;QAC1C;AAEA,QAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,cAAc,EAAE;IACtD;AACD;;ACrLD;;AAEG;AAQG,MAAO,YAAa,SAAQ,OAAoB,CAAA;AACjC,IAAA,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,wBAAwB,CAAC;AAC7E;;AAEG;AACa,IAAA,IAAI,GAAG,KAAK,CAAwC,IAAI,2EAAC;AAExD,IAAA,SAAS,GAAG,YAAY,CAAC,QAAQ,CAAW,QAAQ,CAAC;AACrD,IAAA,aAAa,GAAG,QAAQ,CACvC,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,aAAiC,oFACjE;AAED,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;AACP,QAAA,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAC9E,QAAA,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,aAAa,EAAE,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAEtF,iBAAiB,CAAC,MAAK;AACrB,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,iBAAiB,EAAE,EAAE;AACzD,gBAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC;YAC5D;AACF,QAAA,CAAC,CAAC;IACJ;IAEiB,WAAW,GAAG,IAAI,UAAU,CAAC;AAC5C,QAAA,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACrD,KAAA,CAAC;AAEQ,IAAA,OAAO,CAAC,KAAY,EAAA;;QAE5B,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IACtE;AAEmB,IAAA,iBAAiB,GAAG,MAAM,CAAS,EAAE,wFAAC;AAExC,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,4EAAC;AAE9D,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE;AACzB,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;QACtB,MAAM,UAAU,GAAG;aAChB,GAAG,CAAC,KAAK,IAAG;YACX,IAAI,OAAO,KAAK,KAAK,QAAQ;AAAE,gBAAA,OAAO,KAAK;YAC3C,OAAO,KAAK,CAAC,WAAW;AAC1B,QAAA,CAAC;aACA,IAAI,CAAC,EAAE,CAAC;AACX,QAAA,OAAO,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC;AACjF,IAAA,CAAC,oFAAC;AAEQ,IAAA,SAAS,CAAC,KAAoB,EAAA;AACtC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE;AACzB,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC;IAC7C;AAEU,IAAA,aAAa,CAAC,KAAY,EAAA;AAClC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE;AACzB,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAmB,EAAE,IAAI,CAAC;IAC/D;AAEQ,IAAA,YAAY,CAAC,EAAoB,EAAE,QAAgB,EAAE,cAAsB,EAAA;AACjF,QAAA,EAAE,CAAC,KAAK,GAAG,QAAQ;AACnB,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC;QACpC,UAAU,CAAC,MAAK;;AAEd,YAAA,EAAE,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAC;AACtD,QAAA,CAAC,CAAC;AACF,QAAA,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3E;uGArEW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAFZ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EASuB,QAAQ,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnCvE,6XASA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDgBY,KAAK,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAGJ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AACS,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,gBAAgB,EAAA,OAAA,EAEjB,CAAC,KAAK,CAAC,EAAA,SAAA,EACL,CAAC,WAAW,CAAA,YAAA,CAAc,CAAC,EAAA,QAAA,EAAA,6XAAA,EAAA;gNASuB,QAAQ,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEnCvE;;AAEG;;;;"}

package/fesm2022/ngneers-controls-input.mjs

@@ -9,7 +9,7 @@ import { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/in
  * @category control
  */
 class NgnInput extends NgnBase {
-    hasParentInputfield = signal(false, ...(ngDevMode ? [{ debugName: "hasParentInputfield" }] : []));
+    hasParentInputfield = signal(false, ...(ngDevMode ? [{ debugName: "hasParentInputfield" }] : /* istanbul ignore next */ []));
     theme = this.injectThemeTemplate(inputControlTemplate, {
         root: true,
         invalid: () => this.invalid(),
@@ -20,8 +20,8 @@ class NgnInput extends NgnBase {
      * Explicitly apply invalid state styling
      * @default false
      */
-    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : {}), transform: booleanAttribute });
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     _input = this.element.nativeElement;
     ngAfterViewInit() {
         this.hasParentInputfield.set(!!this.element.nativeElement.closest('ngn-input-field'));
@@ -47,10 +47,10 @@ class NgnInput extends NgnBase {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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: { "class": "(hasParentInputfield() ? \"\" : ` ${inputFieldTheme.class(\"root\")}`)" } }, providers: [provideSelf(NgnInput)], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.2", 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: { "class": "(hasParentInputfield() ? \"\" : ` ${inputFieldTheme.class(\"root\")}`)" } }, providers: [provideSelf(NgnInput)], exportAs: ["ngnInput"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[ngnInput], textarea[ngnInput]',
@@ -58,6 +58,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[class]': '(hasParentInputfield() ? "" : ` ${inputFieldTheme.class("root")}`)',
                     },
                     providers: [provideSelf(NgnInput)],
+                    exportAs: 'ngnInput',
                 }]
         }], 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"] }] } });
 

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

@@ -1 +1 @@
-{"version":3,"file":"ngneers-controls-input.mjs","sources":["../../src/input/input.ts","../../src/input/ngneers-controls-input.ts"],"sourcesContent":["import {\r\n  type AfterViewInit,\r\n  booleanAttribute,\r\n  Directive,\r\n  effect,\r\n  input,\r\n  model,\r\n  runInInjectionContext,\r\n  signal,\r\n} from '@angular/core';\r\nimport { domEventSignal } from '@ngneers/controls/api/ng';\r\nimport { NgnBase, provideSelf } from '@ngneers/controls/base';\r\nimport { inputControlTemplate } from '@ngneers/controls-themes/templates/input';\r\nimport { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Directive({\r\n  selector: 'input[ngnInput], textarea[ngnInput]',\r\n  host: {\r\n    '[class]': '(hasParentInputfield() ? \"\" : ` ${inputFieldTheme.class(\"root\")}`)',\r\n  },\r\n  providers: [provideSelf(NgnInput)],\r\n})\r\nexport class NgnInput extends NgnBase<'input'> implements AfterViewInit {\r\n  protected readonly hasParentInputfield = signal(false);\r\n\r\n  protected readonly theme = this.injectThemeTemplate(inputControlTemplate, {\r\n    root: true,\r\n    invalid: () => this.invalid(),\r\n    empty: () => !this.value(),\r\n  });\r\n  protected readonly inputFieldTheme = this.injectThemeTemplate<true>(inputFieldControlTemplate);\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  public readonly value = model<string | null>('');\r\n\r\n  private readonly _input = this.element.nativeElement as HTMLInputElement;\r\n\r\n  public ngAfterViewInit() {\r\n    this.hasParentInputfield.set(!!this.element.nativeElement.closest('ngn-input-field'));\r\n    const changeEvent = domEventSignal(\r\n      this.element.nativeElement as HTMLInputElement,\r\n      'change',\r\n      this.injector\r\n    );\r\n    const inputEvent = domEventSignal(\r\n      this.element.nativeElement as HTMLInputElement,\r\n      'input',\r\n      this.injector\r\n    );\r\n\r\n    runInInjectionContext(this.injector, () => {\r\n      effect(() => {\r\n        const _changeEvent = changeEvent();\r\n        const _inputEvent = inputEvent();\r\n        if (!_changeEvent && !_inputEvent) {\r\n          return;\r\n        }\r\n        const val = this._input.value;\r\n        this.value.set(val ?? '');\r\n      });\r\n    });\r\n  }\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      if (this._input.value !== this.value()) {\r\n        this._input.value = this.value() || '';\r\n      }\r\n    });\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAeA;;AAEG;AAQG,MAAO,QAAS,SAAQ,OAAgB,CAAA;AACzB,IAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,+DAAC;AAEnC,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;AACiB,IAAA,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAO,yBAAyB,CAAC;AAC9F;;;AAGG;IACa,OAAO,GAAG,KAAK,CAAC,KAAK,oDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEvD,IAAA,KAAK,GAAG,KAAK,CAAgB,EAAE,iDAAC;AAE/B,IAAA,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,aAAiC;IAEjE,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;AACrF,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;uGApDW,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,oeAFR,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAEvB,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAPpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qCAAqC;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,oEAAoE;AAChF,qBAAA;AACD,oBAAA,SAAS,EAAE,CAAC,WAAW,CAAA,QAAA,CAAU,CAAC;AACnC,iBAAA;;;ACxBD;;AAEG;;;;"}
+{"version":3,"file":"ngneers-controls-input.mjs","sources":["../../src/input/input.ts","../../src/input/ngneers-controls-input.ts"],"sourcesContent":["import {\r\n  type AfterViewInit,\r\n  booleanAttribute,\r\n  Directive,\r\n  effect,\r\n  input,\r\n  model,\r\n  runInInjectionContext,\r\n  signal,\r\n} from '@angular/core';\r\nimport { domEventSignal } from '@ngneers/controls/api/ng';\r\nimport { NgnBase, provideSelf } from '@ngneers/controls/base';\r\nimport { inputControlTemplate } from '@ngneers/controls-themes/templates/input';\r\nimport { inputFieldControlTemplate } from '@ngneers/controls-themes/templates/input-field';\r\n\r\n/**\r\n * @category control\r\n */\r\n@Directive({\r\n  selector: 'input[ngnInput], textarea[ngnInput]',\r\n  host: {\r\n    '[class]': '(hasParentInputfield() ? \"\" : ` ${inputFieldTheme.class(\"root\")}`)',\r\n  },\r\n  providers: [provideSelf(NgnInput)],\r\n  exportAs: 'ngnInput',\r\n})\r\nexport class NgnInput extends NgnBase<'input'> implements AfterViewInit {\r\n  protected readonly hasParentInputfield = signal(false);\r\n\r\n  protected readonly theme = this.injectThemeTemplate(inputControlTemplate, {\r\n    root: true,\r\n    invalid: () => this.invalid(),\r\n    empty: () => !this.value(),\r\n  });\r\n  protected readonly inputFieldTheme = this.injectThemeTemplate<true>(inputFieldControlTemplate);\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  public readonly value = model<string | null>('');\r\n\r\n  private readonly _input = this.element.nativeElement as HTMLInputElement;\r\n\r\n  public ngAfterViewInit() {\r\n    this.hasParentInputfield.set(!!this.element.nativeElement.closest('ngn-input-field'));\r\n    const changeEvent = domEventSignal(\r\n      this.element.nativeElement as HTMLInputElement,\r\n      'change',\r\n      this.injector\r\n    );\r\n    const inputEvent = domEventSignal(\r\n      this.element.nativeElement as HTMLInputElement,\r\n      'input',\r\n      this.injector\r\n    );\r\n\r\n    runInInjectionContext(this.injector, () => {\r\n      effect(() => {\r\n        const _changeEvent = changeEvent();\r\n        const _inputEvent = inputEvent();\r\n        if (!_changeEvent && !_inputEvent) {\r\n          return;\r\n        }\r\n        const val = this._input.value;\r\n        this.value.set(val ?? '');\r\n      });\r\n    });\r\n  }\r\n\r\n  constructor() {\r\n    super();\r\n    effect(() => {\r\n      if (this._input.value !== this.value()) {\r\n        this._input.value = this.value() || '';\r\n      }\r\n    });\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAeA;;AAEG;AASG,MAAO,QAAS,SAAQ,OAAgB,CAAA;AACzB,IAAA,mBAAmB,GAAG,MAAM,CAAC,KAAK,0FAAC;AAEnC,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;AACiB,IAAA,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAO,yBAAyB,CAAC;AAC9F;;;AAGG;IACa,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEvD,IAAA,KAAK,GAAG,KAAK,CAAgB,EAAE,4EAAC;AAE/B,IAAA,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,aAAiC;IAEjE,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;AACrF,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;uGApDW,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,oeAHR,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAGvB,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qCAAqC;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,oEAAoE;AAChF,qBAAA;AACD,oBAAA,SAAS,EAAE,CAAC,WAAW,CAAA,QAAA,CAAU,CAAC;AAClC,oBAAA,QAAQ,EAAE,UAAU;AACrB,iBAAA;;;ACzBD;;AAEG;;;;"}