npm - @ngneers/controls - Versions diffs - 0.0.1-pre5 → 0.0.1-pre7 - Mend

@ngneers/controls 0.0.1-pre5 → 0.0.1-pre7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

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

	@@ -1 +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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"}
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=\"input-clear\" [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 CHANGED Viewed

@@ -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.10", ngImport: i0, type: NgnInputMask, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", 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.10", 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 CHANGED Viewed

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

package/fesm2022/ngneers-controls-input.mjs CHANGED Viewed

@@ -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)], exportAs: ["ngnInput"], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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.10", ngImport: i0, type: NgnInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[ngnInput], textarea[ngnInput]',

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

	@@ -1 +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 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~~,+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,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;;;;"}
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 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;wGApDW,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,SAAA,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;;4FAGvB,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;;;;"}

package/fesm2022/ngneers-controls-item-view.mjs CHANGED Viewed

@@ -196,38 +196,38 @@ class ItemViewTemplates extends NgnBase {
      * The template to be used for rendering each item in the item view.
      * Can also be set using the `item` content child.
      */
-    templateItem = input(null, ...(ngDevMode ? [{ debugName: "templateItem" }] : []));
-    _userItemTemplate = contentChild('item', ...(ngDevMode ? [{ debugName: "_userItemTemplate" }] : []));
-    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem(), ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    templateItem = input(null, ...(ngDevMode ? [{ debugName: "templateItem" }] : /* istanbul ignore next */ []));
+    _userItemTemplate = contentChild('item', ...(ngDevMode ? [{ debugName: "_userItemTemplate" }] : /* istanbul ignore next */ []));
+    itemTemplate = computed(() => this._userItemTemplate() ?? this.templateItem(), ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
     // Separator template
     _defaultSeparatorTemplate = viewChild.required('defaultSeparatorTemplate');
-    _userSeparatorTemplate = contentChild('separator', ...(ngDevMode ? [{ debugName: "_userSeparatorTemplate" }] : []));
+    _userSeparatorTemplate = contentChild('separator', ...(ngDevMode ? [{ debugName: "_userSeparatorTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Set a custom template for the separators of the breadcrumb.
      * Can also be set using an `<ng-template>` element with `#separator` template reference variable.
      */
-    templateSeparator = input(null, ...(ngDevMode ? [{ debugName: "templateSeparator" }] : []));
-    separatorTemplate = computed(() => this._userSeparatorTemplate() ?? this.templateSeparator() ?? this._defaultSeparatorTemplate(), ...(ngDevMode ? [{ debugName: "separatorTemplate" }] : []));
+    templateSeparator = input(null, ...(ngDevMode ? [{ debugName: "templateSeparator" }] : /* istanbul ignore next */ []));
+    separatorTemplate = computed(() => this._userSeparatorTemplate() ?? this.templateSeparator() ?? this._defaultSeparatorTemplate(), ...(ngDevMode ? [{ debugName: "separatorTemplate" }] : /* istanbul ignore next */ []));
     // Overflow item template
     _defaultOverflowItemTemplate = viewChild.required('defaultOverflowItemTemplate');
-    _userOverflowItemTemplate = contentChild('overflow', ...(ngDevMode ? [{ debugName: "_userOverflowItemTemplate" }] : []));
+    _userOverflowItemTemplate = contentChild('overflow', ...(ngDevMode ? [{ debugName: "_userOverflowItemTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Set a custom template for the overflow item.
      * Can also be set using an `<ng-template>` element with `#overflow` template reference variable.
      */
-    templateOverflow = input(null, ...(ngDevMode ? [{ debugName: "templateOverflow" }] : []));
+    templateOverflow = input(null, ...(ngDevMode ? [{ debugName: "templateOverflow" }] : /* istanbul ignore next */ []));
     overflowTemplate = computed(() => this._userOverflowItemTemplate() ??
         this.templateOverflow() ??
-        this._defaultOverflowItemTemplate(), ...(ngDevMode ? [{ debugName: "overflowTemplate" }] : []));
+        this._defaultOverflowItemTemplate(), ...(ngDevMode ? [{ debugName: "overflowTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Template types for the item-view.
      * Can be used with the {@link NgnTemplate} directive for type safe ng-templates.
      */
     templateTypes = templateTypesFn();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ItemViewTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.1.0", type: ItemViewTemplates, isStandalone: true, inputs: { templateItem: { classPropertyName: "templateItem", publicName: "templateItem", isSignal: true, isRequired: false, transformFunction: null }, templateSeparator: { classPropertyName: "templateSeparator", publicName: "templateSeparator", isSignal: true, isRequired: false, transformFunction: null }, templateOverflow: { classPropertyName: "templateOverflow", publicName: "templateOverflow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userItemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "_userSeparatorTemplate", first: true, predicate: ["separator"], descendants: true, isSignal: true }, { propertyName: "_userOverflowItemTemplate", first: true, predicate: ["overflow"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultSeparatorTemplate", first: true, predicate: ["defaultSeparatorTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultOverflowItemTemplate", first: true, predicate: ["defaultOverflowItemTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ItemViewTemplates, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.10", type: ItemViewTemplates, isStandalone: true, inputs: { templateItem: { classPropertyName: "templateItem", publicName: "templateItem", isSignal: true, isRequired: false, transformFunction: null }, templateSeparator: { classPropertyName: "templateSeparator", publicName: "templateSeparator", isSignal: true, isRequired: false, transformFunction: null }, templateOverflow: { classPropertyName: "templateOverflow", publicName: "templateOverflow", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_userItemTemplate", first: true, predicate: ["item"], descendants: true, isSignal: true }, { propertyName: "_userSeparatorTemplate", first: true, predicate: ["separator"], descendants: true, isSignal: true }, { propertyName: "_userOverflowItemTemplate", first: true, predicate: ["overflow"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_defaultSeparatorTemplate", first: true, predicate: ["defaultSeparatorTemplate"], descendants: true, isSignal: true }, { propertyName: "_defaultOverflowItemTemplate", first: true, predicate: ["defaultOverflowItemTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ItemViewTemplates, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: ItemViewTemplates, decorators: [{
             type: Directive
         }], propDecorators: { templateItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateItem", required: false }] }], _userItemTemplate: [{ type: i0.ContentChild, args: ['item', { isSignal: true }] }], _defaultSeparatorTemplate: [{ type: i0.ViewChild, args: ['defaultSeparatorTemplate', { isSignal: true }] }], _userSeparatorTemplate: [{ type: i0.ContentChild, args: ['separator', { isSignal: true }] }], templateSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateSeparator", required: false }] }], _defaultOverflowItemTemplate: [{ type: i0.ViewChild, args: ['defaultOverflowItemTemplate', { isSignal: true }] }], _userOverflowItemTemplate: [{ type: i0.ContentChild, args: ['overflow', { isSignal: true }] }], templateOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateOverflow", required: false }] }] } });
@@ -239,37 +239,37 @@ class NgnItemView extends ItemViewTemplates {
     /**
      * The key of the id property in the item object. This is used to track items in the template.
      */
-    idField = input.required(...(ngDevMode ? [{ debugName: "idField" }] : []));
+    idField = input.required(...(ngDevMode ? [{ debugName: "idField" }] : /* istanbul ignore next */ []));
     /**
      * The items to be displayed in the item view.
      * This is a required input and should be an array of items of type {@link T}.
      */
-    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     /**
      * A separator string (character) to be displayed between items. Set `true` for `,` or provide a custom string.
      */
-    separator = input(...(ngDevMode ? [undefined, { debugName: "separator" }] : []));
+    separator = input(...(ngDevMode ? [undefined, { debugName: "separator" }] : /* istanbul ignore next */ []));
     /**
      * A separator icon to be displayed between items.
      */
-    iconItemSeparator = input(...(ngDevMode ? [undefined, { debugName: "iconItemSeparator" }] : []));
+    iconItemSeparator = input(...(ngDevMode ? [undefined, { debugName: "iconItemSeparator" }] : /* istanbul ignore next */ []));
     /**
      * Strategy to use when there are more items than can be displayed in the available space.
      * The value determines where the items should start to overflow.
      * @default 'end'
      */
-    overflowStrategy = input('end', ...(ngDevMode ? [{ debugName: "overflowStrategy" }] : []));
+    overflowStrategy = input('end', ...(ngDevMode ? [{ debugName: "overflowStrategy" }] : /* istanbul ignore next */ []));
     /**
      * The amount of items to keep visible after or before overflowing, depending on the {@link overflowStrategy}.
      * @default 0
      */
-    overflowStrategyFreezeCount = input(0, ...(ngDevMode ? [{ debugName: "overflowStrategyFreezeCount" }] : []));
+    overflowStrategyFreezeCount = input(0, ...(ngDevMode ? [{ debugName: "overflowStrategyFreezeCount" }] : /* istanbul ignore next */ []));
     /**
      * Index of the item to be used as the overflow indicator when using the 'aroundIndex' overflow strategy.
      * This input is only relevant when the {@link overflowStrategy} is set to 'aroundIndex'.
      * @default 0
      */
-    overflowStrategyIndex = input(0, ...(ngDevMode ? [{ debugName: "overflowStrategyIndex" }] : []));
+    overflowStrategyIndex = input(0, ...(ngDevMode ? [{ debugName: "overflowStrategyIndex" }] : /* istanbul ignore next */ []));
     /**
      * Set this to `true` for greatly improving performance when all items have the same width.
      * Especially true for large lists of items.
@@ -280,23 +280,23 @@ class NgnItemView extends ItemViewTemplates {
      * need to access overflowed items directly.
      * @default false
      */
-    sameWidthItems = input(false, ...(ngDevMode ? [{ debugName: "sameWidthItems" }] : []));
-    _themeGap = signal(0, ...(ngDevMode ? [{ debugName: "_themeGap" }] : []));
+    sameWidthItems = input(false, ...(ngDevMode ? [{ debugName: "sameWidthItems" }] : /* istanbul ignore next */ []));
+    _themeGap = signal(0, ...(ngDevMode ? [{ debugName: "_themeGap" }] : /* istanbul ignore next */ []));
     _isBrowser = inject(Platform).isBrowser;
     separatorChar = computed(() => {
         const sep = this.separator();
         return typeof sep === 'boolean' ? (sep ? ', ' : '') : sep;
-    }, ...(ngDevMode ? [{ debugName: "separatorChar" }] : []));
-    _enableSizeMeasuring = computed(() => !this.sameWidthItems(), ...(ngDevMode ? [{ debugName: "_enableSizeMeasuring" }] : []));
-    _renderedItemRefs = viewChildren('itemRef', ...(ngDevMode ? [{ debugName: "_renderedItemRefs" }] : []));
-    _firstItemRef = viewChild('itemRef', ...(ngDevMode ? [{ debugName: "_firstItemRef" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "separatorChar" }] : /* istanbul ignore next */ []));
+    _enableSizeMeasuring = computed(() => !this.sameWidthItems(), ...(ngDevMode ? [{ debugName: "_enableSizeMeasuring" }] : /* istanbul ignore next */ []));
+    _renderedItemRefs = viewChildren('itemRef', ...(ngDevMode ? [{ debugName: "_renderedItemRefs" }] : /* istanbul ignore next */ []));
+    _firstItemRef = viewChild('itemRef', ...(ngDevMode ? [{ debugName: "_firstItemRef" }] : /* istanbul ignore next */ []));
     _firstItemWidth = elementSizeSignal(this._firstItemRef);
     _renderedItemSizes = elementsSizesSignal(this._renderedItemRefs, this._enableSizeMeasuring);
     _renderedItemWidths = computed(() => this.sameWidthItems()
         ? this.items().map(() => this._firstItemWidth().width || Number.MAX_SAFE_INTEGER)
-        : this._renderedItemSizes().map(size => size.width), { ...(ngDevMode ? { debugName: "_renderedItemWidths" } : {}), equal: areArraysDeepEqual });
+        : this._renderedItemSizes().map(size => size.width), { ...(ngDevMode ? { debugName: "_renderedItemWidths" } : /* istanbul ignore next */ {}), equal: areArraysDeepEqual });
     _containerSize = elementSizeSignal(this.element.nativeElement);
-    _overflowItemRef = viewChild('overflowItem', ...(ngDevMode ? [{ debugName: "_overflowItemRef" }] : []));
+    _overflowItemRef = viewChild('overflowItem', ...(ngDevMode ? [{ debugName: "_overflowItemRef" }] : /* istanbul ignore next */ []));
     _overflowItemSize = elementSizeSignal(this._overflowItemRef);
     itemOverflowCheckOrder = computed(() => {
         const count = this.items().length;
@@ -307,7 +307,7 @@ class NgnItemView extends ItemViewTemplates {
             freezeCount,
             strategyIndex: this.overflowStrategyIndex(),
         });
-    }, ...(ngDevMode ? [{ debugName: "itemOverflowCheckOrder" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "itemOverflowCheckOrder" }] : /* istanbul ignore next */ []));
     renderedItems = computed(() => {
         const containerWidth = this._containerSize().width;
         const renderedItemWidths = this._renderedItemWidths();
@@ -407,11 +407,11 @@ class NgnItemView extends ItemViewTemplates {
             res = res.filter((item, index) => item.kind !== 'overflowItem' || index === 0);
         }
         return res;
-    }, ...(ngDevMode ? [{ debugName: "renderedItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "renderedItems" }] : /* istanbul ignore next */ []));
     maxWidth = computed(() => {
         return Math.ceil(this._renderedItemWidths().reduce((sum, w) => sum + w, 0) +
             this._themeGap() * Math.max(0, this.items().length - 1));
-    }, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
         if (!this._isBrowser) {
             return;
@@ -422,10 +422,10 @@ class NgnItemView extends ItemViewTemplates {
             this._themeGap.set(gap);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnItemView, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnItemView, isStandalone: true, selector: "ngn-item-view", inputs: { idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, iconItemSeparator: { classPropertyName: "iconItemSeparator", publicName: "iconItemSeparator", isSignal: true, isRequired: false, transformFunction: null }, overflowStrategy: { classPropertyName: "overflowStrategy", publicName: "overflowStrategy", isSignal: true, isRequired: false, transformFunction: null }, overflowStrategyFreezeCount: { classPropertyName: "overflowStrategyFreezeCount", publicName: "overflowStrategyFreezeCount", isSignal: true, isRequired: false, transformFunction: null }, overflowStrategyIndex: { classPropertyName: "overflowStrategyIndex", publicName: "overflowStrategyIndex", isSignal: true, isRequired: false, transformFunction: null }, sameWidthItems: { classPropertyName: "sameWidthItems", publicName: "sameWidthItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"list\"", "style.maxWidth.px": "maxWidth()" } }, providers: [provideSelf(NgnItemView)], viewQueries: [{ propertyName: "_renderedItemRefs", predicate: ["itemRef"], descendants: true, isSignal: true }, { propertyName: "_firstItemRef", first: true, predicate: ["itemRef"], descendants: true, isSignal: true }, { propertyName: "_overflowItemRef", first: true, predicate: ["overflowItem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (item of renderedItems(); track item.id; let i = $index) {\r\n  @if (item.kind === 'visibleItem' || item.kind === 'overflowItem') {\r\n    <span\r\n      role=\"listitem\"\r\n      #itemRef\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"{\r\n        item: true,\r\n        'item-overflowing': item.kind === 'overflowItem',\r\n      }\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          itemTemplate();\r\n          context: { $implicit: item.item, index: i, last: $last, first: $first }\r\n        \"\r\n      />\r\n      @if (!$last) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            separatorTemplate();\r\n            context: { $implicit: { character: separatorChar(), icon: iconItemSeparator() } }\r\n          \"\r\n        />\r\n      }\r\n    </span>\r\n  } @else if (item.kind === 'overflowIndicator') {\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"{ 'more-items': true, 'more-items-hidden': !item.visible }\"\r\n      aria-hidden=\"true\"\r\n      #overflowItem\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          overflowTemplate();\r\n          context: {\r\n            $implicit: {\r\n              totalCount: items().length,\r\n              overflowCount: item.items.length,\r\n              overflowItems: item.items,\r\n            },\r\n          }\r\n        \"\r\n      />\r\n      @if (!$last) {\r\n        <span\r\n          [style.visibility]=\"item.hasSeparator ? 'visible' : 'hidden'\"\r\n          style=\"display: contents\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              separatorTemplate();\r\n              context: { $implicit: { character: separatorChar(), icon: iconItemSeparator() } }\r\n            \"\r\n          />\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n}\r\n\r\n<ng-template #defaultSeparatorTemplate [ngnTemplate]=\"templateTypes.separator\" let-separator>\r\n  @if (separator.character) {\r\n    <span>{{ separator.character }}</span>\r\n  } @else if (separator.icon) {\r\n    <ngn-icon [icon]=\"separator.icon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultOverflowItemTemplate [ngnTemplate]=\"templateTypes.overflow\" let-overflow>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'more-items-default'\">+{{ overflow.overflowCount }}</span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnItemView, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgnItemView, isStandalone: true, selector: "ngn-item-view", inputs: { idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, iconItemSeparator: { classPropertyName: "iconItemSeparator", publicName: "iconItemSeparator", isSignal: true, isRequired: false, transformFunction: null }, overflowStrategy: { classPropertyName: "overflowStrategy", publicName: "overflowStrategy", isSignal: true, isRequired: false, transformFunction: null }, overflowStrategyFreezeCount: { classPropertyName: "overflowStrategyFreezeCount", publicName: "overflowStrategyFreezeCount", isSignal: true, isRequired: false, transformFunction: null }, overflowStrategyIndex: { classPropertyName: "overflowStrategyIndex", publicName: "overflowStrategyIndex", isSignal: true, isRequired: false, transformFunction: null }, sameWidthItems: { classPropertyName: "sameWidthItems", publicName: "sameWidthItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"list\"", "style.maxWidth.px": "maxWidth()" } }, providers: [provideSelf(NgnItemView)], viewQueries: [{ propertyName: "_renderedItemRefs", predicate: ["itemRef"], descendants: true, isSignal: true }, { propertyName: "_firstItemRef", first: true, predicate: ["itemRef"], descendants: true, isSignal: true }, { propertyName: "_overflowItemRef", first: true, predicate: ["overflowItem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@for (item of renderedItems(); track item.id; let i = $index) {\r\n  @if (item.kind === 'visibleItem' || item.kind === 'overflowItem') {\r\n    <span\r\n      role=\"listitem\"\r\n      #itemRef\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"{\r\n        item: true,\r\n        'item-overflowing': item.kind === 'overflowItem',\r\n      }\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          itemTemplate();\r\n          context: { $implicit: item.item, index: i, last: $last, first: $first }\r\n        \"\r\n      />\r\n      @if (!$last) {\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            separatorTemplate();\r\n            context: { $implicit: { character: separatorChar(), icon: iconItemSeparator() } }\r\n          \"\r\n        />\r\n      }\r\n    </span>\r\n  } @else if (item.kind === 'overflowIndicator') {\r\n    <div\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"{ 'more-items': true, 'more-items-hidden': !item.visible }\"\r\n      aria-hidden=\"true\"\r\n      #overflowItem\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"\r\n          overflowTemplate();\r\n          context: {\r\n            $implicit: {\r\n              totalCount: items().length,\r\n              overflowCount: item.items.length,\r\n              overflowItems: item.items,\r\n            },\r\n          }\r\n        \"\r\n      />\r\n      @if (!$last) {\r\n        <span\r\n          [style.visibility]=\"item.hasSeparator ? 'visible' : 'hidden'\"\r\n          style=\"display: contents\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"\r\n              separatorTemplate();\r\n              context: { $implicit: { character: separatorChar(), icon: iconItemSeparator() } }\r\n            \"\r\n          />\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n}\r\n\r\n<ng-template #defaultSeparatorTemplate [ngnTemplate]=\"templateTypes.separator\" let-separator>\r\n  @if (separator.character) {\r\n    <span>{{ separator.character }}</span>\r\n  } @else if (separator.icon) {\r\n    <ngn-icon [icon]=\"separator.icon\" />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #defaultOverflowItemTemplate [ngnTemplate]=\"templateTypes.overflow\" let-overflow>\r\n  <span [ptInt]=\"this\" [ptClass]=\"'more-items-default'\">+{{ overflow.overflowCount }}</span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnItemView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnItemView, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-item-view', imports: [NgnPt, NgTemplateOutlet, NgnTemplate, NgnIcon], providers: [provideSelf(NgnItemView)], host: {
                         '[attr.role]': '"list"',