@sebgroup/green-angular 4.6.2 → 4.6.3
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.
- package/esm2022/src/v-angular/base-control-value-accessor/base-control-value-accessor.component.mjs +9 -9
- package/esm2022/src/v-angular/button/button.component.mjs +5 -5
- package/esm2022/src/v-angular/character-countdown/character-countdown.directive.mjs +5 -5
- package/esm2022/src/v-angular/core/core.globals.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +4 -4
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +5 -5
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead.directive.mjs +7 -7
- package/esm2022/src/v-angular/info-circle/info-circle.component.mjs +3 -3
- package/esm2022/src/v-angular/input/input.component.mjs +7 -7
- package/esm2022/src/v-angular/input-mask/input-mask-format.pipe.mjs +5 -4
- package/esm2022/src/v-angular/input-mask/input-mask.directive.mjs +8 -8
- package/esm2022/src/v-angular/modal/dialog/dialog.component.mjs +16 -16
- package/esm2022/src/v-angular/modal/fold-out/fold-out.directive.mjs +3 -3
- package/esm2022/src/v-angular/modal/modal.globals.mjs +3 -3
- package/esm2022/src/v-angular/modal/slide-out/slide-out.component.mjs +15 -15
- package/esm2022/src/v-angular/textarea/textarea.component.mjs +4 -3
- package/esm2022/src/v-angular/textarea/textarea.module.mjs +5 -4
- package/esm2022/src/v-angular/tooltip/tooltip.directive.mjs +13 -13
- package/esm2022/v-angular/base-control-value-accessor/base-control-value-accessor.component.mjs +9 -9
- package/esm2022/v-angular/button/button.component.mjs +5 -5
- package/esm2022/v-angular/character-countdown/character-countdown.directive.mjs +51 -0
- package/esm2022/v-angular/character-countdown/character-countdown.module.mjs +18 -0
- package/esm2022/v-angular/character-countdown/index.mjs +3 -0
- package/esm2022/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +4 -4
- package/esm2022/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +5 -5
- package/esm2022/v-angular/dropdown/typeahead/typeahead.directive.mjs +7 -7
- package/esm2022/v-angular/index.mjs +2 -1
- package/esm2022/v-angular/info-circle/info-circle.component.mjs +3 -3
- package/esm2022/v-angular/input/input.component.mjs +7 -7
- package/esm2022/v-angular/input-mask/input-mask-format.pipe.mjs +5 -4
- package/esm2022/v-angular/input-mask/input-mask.directive.mjs +8 -8
- package/esm2022/v-angular/modal/dialog/dialog.component.mjs +16 -16
- package/esm2022/v-angular/modal/fold-out/fold-out.directive.mjs +3 -3
- package/esm2022/v-angular/modal/modal.globals.mjs +3 -3
- package/esm2022/v-angular/modal/slide-out/slide-out.component.mjs +15 -15
- package/esm2022/v-angular/textarea/textarea.component.mjs +4 -3
- package/esm2022/v-angular/textarea/textarea.module.mjs +5 -4
- package/esm2022/v-angular/tooltip/tooltip.directive.mjs +13 -13
- package/esm2022/v-angular/v-angular.module.mjs +5 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-base-control-value-accessor.mjs +8 -8
- package/fesm2022/sebgroup-green-angular-src-v-angular-base-control-value-accessor.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs +4 -4
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-character-countdown.mjs +4 -4
- package/fesm2022/sebgroup-green-angular-src-v-angular-character-countdown.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +13 -13
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-input-mask.mjs +11 -10
- package/fesm2022/sebgroup-green-angular-src-v-angular-input-mask.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs +6 -6
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs +33 -33
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs +7 -5
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-tooltip.mjs +12 -12
- package/fesm2022/sebgroup-green-angular-src-v-angular-tooltip.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +162 -95
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/package.json +2 -2
- package/src/v-angular/base-control-value-accessor/base-control-value-accessor.component.d.ts +3 -3
- package/src/v-angular/button/button.component.d.ts +2 -2
- package/src/v-angular/character-countdown/character-countdown.directive.d.ts +1 -1
- package/src/v-angular/core/core.globals.d.ts +1 -1
- package/src/v-angular/dropdown/typeahead/typeahead.directive.d.ts +2 -2
- package/src/v-angular/input/input.component.d.ts +3 -3
- package/src/v-angular/input-mask/input-mask-format.pipe.d.ts +1 -1
- package/src/v-angular/input-mask/input-mask.directive.d.ts +2 -2
- package/src/v-angular/modal/dialog/dialog.component.d.ts +5 -5
- package/src/v-angular/modal/fold-out/fold-out.directive.d.ts +1 -1
- package/src/v-angular/modal/modal.globals.d.ts +1 -1
- package/src/v-angular/modal/slide-out/slide-out.component.d.ts +6 -6
- package/src/v-angular/textarea/textarea.module.d.ts +2 -1
- package/src/v-angular/tooltip/tooltip.directive.d.ts +4 -4
- package/v-angular/base-control-value-accessor/base-control-value-accessor.component.d.ts +3 -3
- package/v-angular/button/button.component.d.ts +2 -2
- package/v-angular/character-countdown/character-countdown.directive.d.ts +17 -0
- package/v-angular/character-countdown/character-countdown.module.d.ts +8 -0
- package/v-angular/character-countdown/index.d.ts +2 -0
- package/v-angular/dropdown/typeahead/typeahead.directive.d.ts +2 -2
- package/v-angular/index.d.ts +1 -0
- package/v-angular/input/input.component.d.ts +3 -3
- package/v-angular/input-mask/input-mask-format.pipe.d.ts +1 -1
- package/v-angular/input-mask/input-mask.directive.d.ts +2 -2
- package/v-angular/modal/dialog/dialog.component.d.ts +5 -5
- package/v-angular/modal/fold-out/fold-out.directive.d.ts +1 -1
- package/v-angular/modal/modal.globals.d.ts +1 -1
- package/v-angular/modal/slide-out/slide-out.component.d.ts +6 -6
- package/v-angular/textarea/textarea.module.d.ts +2 -1
- package/v-angular/tooltip/tooltip.directive.d.ts +4 -4
- package/v-angular/v-angular.module.d.ts +13 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sebgroup-green-angular-src-v-angular-input-mask.mjs","sources":["../../../../libs/angular/src/v-angular/input-mask/input-mask-format.pipe.ts","../../../../libs/angular/src/v-angular/input-mask/config.ts","../../../../libs/angular/src/v-angular/input-mask/input-mask.directive.ts","../../../../libs/angular/src/v-angular/input-mask/input-mask.module.ts","../../../../libs/angular/src/v-angular/input-mask/constants.ts","../../../../libs/angular/src/v-angular/input-mask/sebgroup-green-angular-src-v-angular-input-mask.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\nimport type Inputmask from 'inputmask';\nimport _Inputmask from 'inputmask';\n\nimport type { InputmaskOptions } from './input-mask.types';\n\nconst InputmaskStatic = (_Inputmask as unknown as { default?: Inputmask.Static }).default || _Inputmask;\n\n@Pipe({\n name: 'ngvInputMaskFormat',\n})\nexport class InputMaskFormatPipe implements PipeTransform {\n transform<T = any>(value: any, options: InputmaskOptions<T>): any {\n if (!value) return value;\n return InputmaskStatic.format(value, options);\n }\n}\n","import { InjectionToken } from '@angular/core';\n\nexport class InputMaskConfig {\n isAsync = false;\n inputSelector = 'input';\n}\n\nexport const INPUT_MASK_CONFIG = new InjectionToken<InputMaskConfig>(\n 'InputMaskConfig'\n);\n","import { isPlatformServer } from '@angular/common'\nimport {\n AfterViewInit,\n Directive,\n ElementRef,\n HostListener,\n Inject,\n Input,\n NgZone,\n OnDestroy,\n OnInit,\n Optional,\n PLATFORM_ID,\n Renderer2,\n Self,\n} from '@angular/core'\nimport {\n AbstractControl,\n ControlValueAccessor,\n NgControl,\n Validator,\n} from '@angular/forms'\n\nimport type Inputmask from 'inputmask'\nimport _Inputmask from 'inputmask'\n\nimport { INPUT_MASK_CONFIG, InputMaskConfig } from './config'\nimport type { InputmaskOptions } from './input-mask.types'\n\nconst InputmaskConstructor =\n (_Inputmask as unknown as { default?: Inputmask.Static }).default ||\n _Inputmask\n\n@Directive({\n selector: '[ngvInputMask]',\n})\nexport class NgvInputMaskDirective<T = any>\n implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator\n{\n /** Input settings of directive */\n @Input() ngvInputMask: InputmaskOptions<T> = {}\n\n inputMaskPlugin: Inputmask.Instance | undefined\n nativeInputElement: HTMLInputElement | undefined\n defaultInputMaskConfig = new InputMaskConfig()\n\n private mutationObserver: MutationObserver | undefined\n\n constructor(\n @Optional() @Self() public ngControl: NgControl,\n @Inject(INPUT_MASK_CONFIG) config: InputMaskConfig,\n @Inject(PLATFORM_ID) private platformId: string,\n private elementRef: ElementRef<HTMLInputElement | any>,\n private renderer: Renderer2,\n private ngZone: NgZone,\n ) {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this\n }\n this.setNativeInputElement(config)\n }\n\n @HostListener('input', ['$event.target.value'])\n onInput = (_: any) => {\n // Empty method\n }\n\n @HostListener('blur', ['$event.target.value'])\n onTouched = (_: any) => {\n // Empty method\n }\n\n @HostListener('keyup', ['$event'])\n onKeyUp(event: KeyboardEvent) {\n // Trigger \"onInput\" when pressing delete or backspace, when input is focused\n if (['Delete', 'Backspace'].includes(event.key)) {\n this.elementRef.nativeElement.dispatchEvent(\n new Event('input', {\n bubbles: true,\n cancelable: true,\n }),\n )\n }\n }\n\n ngOnInit() {\n if (this.control) {\n this.control.setValidators(\n this.control.validator\n ? [this.control.validator, this.validate]\n : [this.validate],\n )\n\n this.control.updateValueAndValidity()\n }\n }\n\n ngOnDestroy(): void {\n this.inputMaskPlugin?.remove()\n this.mutationObserver?.disconnect()\n }\n\n initInputMask() {\n if (\n isPlatformServer(this.platformId) ||\n !this.nativeInputElement ||\n !Object.keys(this.ngvInputMask).length\n ) {\n return\n }\n\n this.inputMaskPlugin = this.ngZone.runOutsideAngular(() =>\n new InputmaskConstructor(this.inputMaskOptions).mask(\n this.nativeInputElement as HTMLInputElement,\n ),\n )\n\n if (this.control) {\n setTimeout(() => {\n this.control!.updateValueAndValidity()\n })\n }\n }\n\n ngAfterViewInit() {\n this.initInputMask()\n }\n\n get inputMaskOptions(): Inputmask.Options {\n const { parser, ...options } = this.ngvInputMask\n return options\n }\n\n writeValue(value: string): void {\n if (this.nativeInputElement) {\n this.renderer.setProperty(this.nativeInputElement, 'value', value ?? '')\n }\n }\n\n registerOnChange(fn: (_: T | null) => void): void {\n // Use injected parser from settings to modify value\n // of users desire\n this.onInput = (value) => {\n const parser = this.ngvInputMask?.parser\n const newValue = parser && value ? parser(value) : value\n fn(newValue)\n }\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn\n }\n\n validate = (control: AbstractControl): { [key: string]: any } | null =>\n !control.value || !this.inputMaskPlugin || this.inputMaskPlugin.isValid()\n ? null\n : { invalidformat: true }\n\n setDisabledState(disabled: boolean): void {\n if (this.nativeInputElement) {\n this.renderer.setProperty(this.nativeInputElement, 'disabled', disabled)\n }\n }\n\n private get control(): AbstractControl | null | undefined {\n return this.ngControl?.control\n }\n\n private setNativeInputElement(config: InputMaskConfig) {\n if (this.elementRef.nativeElement.tagName === 'INPUT') {\n this.nativeInputElement = this.elementRef.nativeElement\n } else {\n this.defaultInputMaskConfig = {\n ...this.defaultInputMaskConfig,\n ...config,\n }\n if (this.defaultInputMaskConfig.isAsync) {\n // Create an observer instance linked to the callback function\n this.mutationObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'childList') {\n const nativeInputElement =\n this.elementRef.nativeElement.querySelector(\n this.defaultInputMaskConfig.inputSelector,\n )\n if (nativeInputElement) {\n this.nativeInputElement = nativeInputElement\n this.mutationObserver?.disconnect()\n this.initInputMask()\n }\n }\n }\n })\n\n // Start observing the target node for configured mutations\n this.mutationObserver.observe(this.elementRef.nativeElement, {\n childList: true,\n subtree: true,\n })\n } else {\n this.nativeInputElement = this.elementRef.nativeElement.querySelector(\n this.defaultInputMaskConfig.inputSelector,\n )\n }\n }\n }\n}\n","import { ModuleWithProviders, NgModule } from '@angular/core'\n\nimport { INPUT_MASK_CONFIG, InputMaskConfig } from './config'\nimport { InputMaskFormatPipe } from './input-mask-format.pipe'\nimport { NgvInputMaskDirective } from './input-mask.directive'\n\n@NgModule({\n declarations: [NgvInputMaskDirective, InputMaskFormatPipe],\n exports: [NgvInputMaskDirective, InputMaskFormatPipe],\n providers: [\n {\n provide: INPUT_MASK_CONFIG,\n useClass: InputMaskConfig,\n },\n ],\n})\nexport class NgvInputMaskModule {\n static forRoot(\n config?: Partial<InputMaskConfig>,\n ): ModuleWithProviders<NgvInputMaskModule> {\n return {\n ngModule: NgvInputMaskModule,\n providers: [{ provide: INPUT_MASK_CONFIG, useValue: config }],\n }\n }\n}\n","import { InputmaskOptions } from './input-mask.types';\n\nexport const createMask = <T>(\n options: string | InputmaskOptions<T>\n): InputmaskOptions<T> =>\n typeof options === 'string' ? { mask: options } : options;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sebgroup-green-angular-src-v-angular-input-mask.mjs","sources":["../../../../libs/angular/src/v-angular/input-mask/input-mask-format.pipe.ts","../../../../libs/angular/src/v-angular/input-mask/config.ts","../../../../libs/angular/src/v-angular/input-mask/input-mask.directive.ts","../../../../libs/angular/src/v-angular/input-mask/input-mask.module.ts","../../../../libs/angular/src/v-angular/input-mask/constants.ts","../../../../libs/angular/src/v-angular/input-mask/sebgroup-green-angular-src-v-angular-input-mask.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core'\n\nimport type Inputmask from 'inputmask'\nimport _Inputmask from 'inputmask'\n\nimport type { InputmaskOptions } from './input-mask.types'\n\nconst InputmaskStatic =\n (_Inputmask as unknown as { default?: Inputmask.Static }).default ||\n _Inputmask\n\n@Pipe({\n name: 'nggvInputMaskFormat',\n})\nexport class InputMaskFormatPipe implements PipeTransform {\n transform<T = any>(value: any, options: InputmaskOptions<T>): any {\n if (!value) return value\n return InputmaskStatic.format(value, options)\n }\n}\n","import { InjectionToken } from '@angular/core';\n\nexport class InputMaskConfig {\n isAsync = false;\n inputSelector = 'input';\n}\n\nexport const INPUT_MASK_CONFIG = new InjectionToken<InputMaskConfig>(\n 'InputMaskConfig'\n);\n","import { isPlatformServer } from '@angular/common'\nimport {\n AfterViewInit,\n Directive,\n ElementRef,\n HostListener,\n Inject,\n Input,\n NgZone,\n OnDestroy,\n OnInit,\n Optional,\n PLATFORM_ID,\n Renderer2,\n Self,\n} from '@angular/core'\nimport {\n AbstractControl,\n ControlValueAccessor,\n NgControl,\n Validator,\n} from '@angular/forms'\n\nimport type Inputmask from 'inputmask'\nimport _Inputmask from 'inputmask'\n\nimport { INPUT_MASK_CONFIG, InputMaskConfig } from './config'\nimport type { InputmaskOptions } from './input-mask.types'\n\nconst InputmaskConstructor =\n (_Inputmask as unknown as { default?: Inputmask.Static }).default ||\n _Inputmask\n\n@Directive({\n selector: '[nggvInputMask]',\n})\nexport class NgvInputMaskDirective<T = any>\n implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator\n{\n /** Input settings of directive */\n @Input() nggvInputMask: InputmaskOptions<T> = {}\n\n inputMaskPlugin: Inputmask.Instance | undefined\n nativeInputElement: HTMLInputElement | undefined\n defaultInputMaskConfig = new InputMaskConfig()\n\n private mutationObserver: MutationObserver | undefined\n\n constructor(\n @Optional() @Self() public ngControl: NgControl,\n @Inject(INPUT_MASK_CONFIG) config: InputMaskConfig,\n @Inject(PLATFORM_ID) private platformId: string,\n private elementRef: ElementRef<HTMLInputElement | any>,\n private renderer: Renderer2,\n private ngZone: NgZone,\n ) {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this\n }\n this.setNativeInputElement(config)\n }\n\n @HostListener('input', ['$event.target.value'])\n onInput = (_: any) => {\n // Empty method\n }\n\n @HostListener('blur', ['$event.target.value'])\n onTouched = (_: any) => {\n // Empty method\n }\n\n @HostListener('keyup', ['$event'])\n onKeyUp(event: KeyboardEvent) {\n // Trigger \"onInput\" when pressing delete or backspace, when input is focused\n if (['Delete', 'Backspace'].includes(event.key)) {\n this.elementRef.nativeElement.dispatchEvent(\n new Event('input', {\n bubbles: true,\n cancelable: true,\n }),\n )\n }\n }\n\n ngOnInit() {\n if (this.control) {\n this.control.setValidators(\n this.control.validator\n ? [this.control.validator, this.validate]\n : [this.validate],\n )\n\n this.control.updateValueAndValidity()\n }\n }\n\n ngOnDestroy(): void {\n this.inputMaskPlugin?.remove()\n this.mutationObserver?.disconnect()\n }\n\n initInputMask() {\n if (\n isPlatformServer(this.platformId) ||\n !this.nativeInputElement ||\n !Object.keys(this.nggvInputMask).length\n ) {\n return\n }\n\n this.inputMaskPlugin = this.ngZone.runOutsideAngular(() =>\n new InputmaskConstructor(this.inputMaskOptions).mask(\n this.nativeInputElement as HTMLInputElement,\n ),\n )\n\n if (this.control) {\n setTimeout(() => {\n this.control!.updateValueAndValidity()\n })\n }\n }\n\n ngAfterViewInit() {\n this.initInputMask()\n }\n\n get inputMaskOptions(): Inputmask.Options {\n const { parser, ...options } = this.nggvInputMask\n return options\n }\n\n writeValue(value: string): void {\n if (this.nativeInputElement) {\n this.renderer.setProperty(this.nativeInputElement, 'value', value ?? '')\n }\n }\n\n registerOnChange(fn: (_: T | null) => void): void {\n // Use injected parser from settings to modify value\n // of users desire\n this.onInput = (value) => {\n const parser = this.nggvInputMask?.parser\n const newValue = parser && value ? parser(value) : value\n fn(newValue)\n }\n }\n\n registerOnTouched(fn: any): void {\n this.onTouched = fn\n }\n\n validate = (control: AbstractControl): { [key: string]: any } | null =>\n !control.value || !this.inputMaskPlugin || this.inputMaskPlugin.isValid()\n ? null\n : { invalidformat: true }\n\n setDisabledState(disabled: boolean): void {\n if (this.nativeInputElement) {\n this.renderer.setProperty(this.nativeInputElement, 'disabled', disabled)\n }\n }\n\n private get control(): AbstractControl | null | undefined {\n return this.ngControl?.control\n }\n\n private setNativeInputElement(config: InputMaskConfig) {\n if (this.elementRef.nativeElement.tagName === 'INPUT') {\n this.nativeInputElement = this.elementRef.nativeElement\n } else {\n this.defaultInputMaskConfig = {\n ...this.defaultInputMaskConfig,\n ...config,\n }\n if (this.defaultInputMaskConfig.isAsync) {\n // Create an observer instance linked to the callback function\n this.mutationObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'childList') {\n const nativeInputElement =\n this.elementRef.nativeElement.querySelector(\n this.defaultInputMaskConfig.inputSelector,\n )\n if (nativeInputElement) {\n this.nativeInputElement = nativeInputElement\n this.mutationObserver?.disconnect()\n this.initInputMask()\n }\n }\n }\n })\n\n // Start observing the target node for configured mutations\n this.mutationObserver.observe(this.elementRef.nativeElement, {\n childList: true,\n subtree: true,\n })\n } else {\n this.nativeInputElement = this.elementRef.nativeElement.querySelector(\n this.defaultInputMaskConfig.inputSelector,\n )\n }\n }\n }\n}\n","import { ModuleWithProviders, NgModule } from '@angular/core'\n\nimport { INPUT_MASK_CONFIG, InputMaskConfig } from './config'\nimport { InputMaskFormatPipe } from './input-mask-format.pipe'\nimport { NgvInputMaskDirective } from './input-mask.directive'\n\n@NgModule({\n declarations: [NgvInputMaskDirective, InputMaskFormatPipe],\n exports: [NgvInputMaskDirective, InputMaskFormatPipe],\n providers: [\n {\n provide: INPUT_MASK_CONFIG,\n useClass: InputMaskConfig,\n },\n ],\n})\nexport class NgvInputMaskModule {\n static forRoot(\n config?: Partial<InputMaskConfig>,\n ): ModuleWithProviders<NgvInputMaskModule> {\n return {\n ngModule: NgvInputMaskModule,\n providers: [{ provide: INPUT_MASK_CONFIG, useValue: config }],\n }\n }\n}\n","import { InputmaskOptions } from './input-mask.types';\n\nexport const createMask = <T>(\n options: string | InputmaskOptions<T>\n): InputmaskOptions<T> =>\n typeof options === 'string' ? { mask: options } : options;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -104,7 +104,7 @@ class NgvInputComponent extends NgvBaseControlValueAccessorComponent {
|
|
|
104
104
|
this._showCharacterCountDown = true;
|
|
105
105
|
/** Pattern the value must match to be valid. */
|
|
106
106
|
this.pattern = '';
|
|
107
|
-
/** Amount of time to wait until emitting (
|
|
107
|
+
/** Amount of time to wait until emitting (nggvINput) event */
|
|
108
108
|
this.debounceTime = 500;
|
|
109
109
|
/**
|
|
110
110
|
* @deprecated
|
|
@@ -112,7 +112,7 @@ class NgvInputComponent extends NgvBaseControlValueAccessorComponent {
|
|
|
112
112
|
*/
|
|
113
113
|
this.badgeText = '';
|
|
114
114
|
/** Emits every time the value of the inner input field changes, independantly of updates on the formcontroller */
|
|
115
|
-
this.
|
|
115
|
+
this.nggvInput = new EventEmitter();
|
|
116
116
|
this._formControl = new UntypedFormControl();
|
|
117
117
|
/** Toggler for showing or hiding the input field */
|
|
118
118
|
this.hideInput$ = new Subject();
|
|
@@ -124,7 +124,7 @@ class NgvInputComponent extends NgvBaseControlValueAccessorComponent {
|
|
|
124
124
|
this.inputChange$
|
|
125
125
|
.pipe(takeUntil(this._destroy$), debounceTime(this.debounceTime))
|
|
126
126
|
.subscribe((inputValue) => {
|
|
127
|
-
this.
|
|
127
|
+
this.nggvInput.emit(inputValue);
|
|
128
128
|
});
|
|
129
129
|
}
|
|
130
130
|
ngOnDestroy() {
|
|
@@ -163,11 +163,11 @@ class NgvInputComponent extends NgvBaseControlValueAccessorComponent {
|
|
|
163
163
|
this.inputChange$.next(this.state);
|
|
164
164
|
}
|
|
165
165
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
166
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvInputComponent, selector: "nggv-input", inputs: { thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", badgeText: "badgeText", inputMask: "inputMask" }, outputs: { ngvInput: "ngvInput" }, host: { properties: { "class": "this.class", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"sdv-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"sdv-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | ngvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [ngvInputMask]=\"inputMask\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.id]=\"id + '-message'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span *ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *ngvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:-moz-fit-content;width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{color:var(--intent-danger-background, #9f000a)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NgvInputMaskDirective, selector: "[ngvInputMask]", inputs: ["ngvInputMask"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "ngvInputMaskFormat" }] }); }
|
|
166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvInputComponent, selector: "nggv-input", inputs: { thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", badgeText: "badgeText", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.class", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"sdv-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"sdv-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.id]=\"id + '-message'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span *ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:-moz-fit-content;width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{color:var(--intent-danger-background, #9f000a)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NgvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
167
167
|
}
|
|
168
168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvInputComponent, decorators: [{
|
|
169
169
|
type: Component,
|
|
170
|
-
args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"sdv-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"sdv-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | ngvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [ngvInputMask]=\"inputMask\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.id]=\"id + '-message'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span *ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *ngvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:-moz-fit-content;width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{color:var(--intent-danger-background, #9f000a)}\n"] }]
|
|
170
|
+
args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"sdv-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"sdv-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.id]=\"id + '-message'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span *ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%}:host .gds-input-wrapper{display:flex;flex-direction:column;position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:-moz-fit-content;width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{color:var(--intent-danger-background, #9f000a)}\n"] }]
|
|
171
171
|
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
|
|
172
172
|
type: Self
|
|
173
173
|
}, {
|
|
@@ -219,7 +219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
219
219
|
type: Input
|
|
220
220
|
}], inputMask: [{
|
|
221
221
|
type: Input
|
|
222
|
-
}],
|
|
222
|
+
}], nggvInput: [{
|
|
223
223
|
type: Output
|
|
224
224
|
}] } });
|
|
225
225
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sebgroup-green-angular-src-v-angular-input.mjs","sources":["../../../../libs/angular/src/v-angular/input/input.component.ts","../../../../libs/angular/src/v-angular/input/input.component.html","../../../../libs/angular/src/v-angular/input/input.module.ts","../../../../libs/angular/src/v-angular/input/sebgroup-green-angular-src-v-angular-input.ts"],"sourcesContent":["import {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n Self,\n} from '@angular/core'\nimport { NgControl, UntypedFormControl } from '@angular/forms'\n\nimport { Subject } from 'rxjs'\nimport { debounceTime, takeUntil } from 'rxjs/operators'\n\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@ngneat/transloco'\nimport type { InputmaskOptions } from '@sebgroup/green-angular/src/v-angular/input-mask'\n\nimport { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/**\n * Input fields allow users to add and edit text.\n * https://designlibrary.sebgroup.com/components/component-input\n */\n@Component({\n selector: 'nggv-input',\n templateUrl: './input.component.html',\n styleUrls: ['./input.component.scss'],\n})\nexport class NgvInputComponent\n extends NgvBaseControlValueAccessorComponent\n implements OnInit, OnDestroy\n{\n /** Adding .gds-form-item as a class to host element */\n @HostBinding('class') class = 'gds-form-item'\n /** Special property used for selecting DOM elements during automated UI testing. */\n @HostBinding('attr.data-thook') @Input() thook = 'input'\n /** Type of input field. Should avoid types that modify field too much such as range. */\n @Input() type = 'text'\n /** Text shown before input has a written value. */\n @Input() placeholder?: string\n /** If set to \"on\", hint for form autofill feature. */\n @Input() autocomplete = 'on'\n /** If set to true, the value will not be editable. */\n @Input() readonly = false\n /** If set to true, enables the Angular template-driven email validator. */\n @Input() email = false\n /** Minimum value required for numeric input types. */\n @Input() min = 0\n /** Maximum value required for numeric input types. */\n @Input() max = Number.MAX_SAFE_INTEGER\n /** Incremental values that are valid for numeric input types. */\n @Input() step = 1\n /** Minimum length (number of characters) of value. */\n @Input() set minLength(length: number) {\n this._minlength = length\n }\n /**\n * Minimum length (number of characters) of value.\n * @deprecated minlength triggers angular-template-validation. Use @Input() minLength instead.\n */\n @Input() set minlength(length: number) {\n this._minlength = length\n }\n get minlength(): number {\n return this._minlength\n }\n /** Maximum length (number of characters) of value. */\n @Input() set maxLength(length: number) {\n this._maxlength = length\n this.writeValue(this.state)\n }\n get maxlength(): number {\n return this._maxlength\n }\n /**\n * Maximum length (number of characters) of value.\n * @deprecated maxlength triggers angular-template-validation. Use @Input() maxLength instead.\n */\n @Input() set maxlength(length: number) {\n this._maxlength = length\n this.writeValue(this.state)\n }\n private _maxlength = Number.MAX_SAFE_INTEGER\n\n private _minlength = 0\n\n /** Wether to show label that tells how many characters are still left to be entered. Will only be set if maxLength is also set */\n private _showCharacterCountDown = true\n @Input() set showCharacterCountdown(option: boolean) {\n this._showCharacterCountDown = option\n }\n get showCharacterCountdown(): boolean {\n return this._showCharacterCountDown && this.hasMaxLength\n }\n\n /** Pattern the value must match to be valid. */\n @Input() pattern = ''\n /** Amount of time to wait until emitting (ngvINput) event */\n @Input() debounceTime = 500\n /**\n * @deprecated\n * Text to put in badge\n */\n @Input() badgeText = ''\n\n /** Settings for input mask if requested */\n private _inputMask!: InputmaskOptions<any>\n @Input() set inputMask(newInputMask: InputmaskOptions<any>) {\n // Hide input field\n this.hideInput$.next(true)\n this.cdr.detectChanges()\n this._inputMask = newInputMask\n\n // Show input field to reload input-mask settings upon update\n setTimeout(() => {\n this.hideInput$.next(false)\n this.cdr.detectChanges()\n }, 200)\n }\n get inputMask(): InputmaskOptions<any> {\n return this._inputMask\n }\n\n /** Emits every time the value of the inner input field changes, independantly of updates on the formcontroller */\n @Output() ngvInput = new EventEmitter<any>()\n\n private _formControl = new UntypedFormControl()\n get control(): UntypedFormControl {\n return (this.ngControl?.control as UntypedFormControl) ?? this._formControl\n }\n /** Returns if maxlength is used */\n get hasMaxLength(): boolean {\n return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER\n }\n\n /** Toggler for showing or hiding the input field */\n hideInput$ = new Subject<boolean>()\n\n protected inputChange$ = new Subject<any>()\n protected _destroy$ = new Subject<boolean>()\n\n constructor(\n @Self() @Optional() public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n ngOnInit() {\n super.ngOnInit()\n this.inputChange$\n .pipe(takeUntil(this._destroy$), debounceTime(this.debounceTime))\n .subscribe((inputValue) => {\n this.ngvInput.emit(inputValue)\n })\n }\n\n ngOnDestroy(): void {\n this._destroy$.next(true)\n this._destroy$.complete()\n }\n\n writeValue(value: any) {\n // maxLength will only work with string values\n if (value?.length && value.length > this.maxlength) {\n // cut value to match max length\n this.state = this.cutTextAfterMaxLength(value)\n if (value.length !== this.state.length) {\n this.onChange(this.state)\n }\n // emit value\n } else {\n // update state\n this.state = value\n }\n this.cdr.detectChanges()\n }\n\n cutTextAfterMaxLength(value: any): any {\n if (typeof value === 'string') {\n return value.substring(0, this.maxlength)\n }\n return value\n }\n\n /** @internal */\n onInput(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = (event.target as HTMLInputElement).value\n this.onChange(this.state)\n this.inputChange$.next(this.state)\n }\n}\n","<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"sdv-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"sdv-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | ngvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [ngvInputMask]=\"inputMask\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.id]=\"id + '-message'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span *ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *ngvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { ReactiveFormsModule } from '@angular/forms'\nimport { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NgvInputComponent } from './input.component'\nimport { NgvInputMaskModule } from '@sebgroup/green-angular/src/v-angular/input-mask'\n\n@NgModule({\n declarations: [NgvInputComponent],\n imports: [\n CommonModule,\n NgvI18nModule,\n NgvInputMaskModule,\n ReactiveFormsModule,\n ],\n exports: [NgvInputComponent],\n})\nexport class NgvInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sebgroup-green-angular-src-v-angular-input.mjs","sources":["../../../../libs/angular/src/v-angular/input/input.component.ts","../../../../libs/angular/src/v-angular/input/input.component.html","../../../../libs/angular/src/v-angular/input/input.module.ts","../../../../libs/angular/src/v-angular/input/sebgroup-green-angular-src-v-angular-input.ts"],"sourcesContent":["import {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n Self,\n} from '@angular/core'\nimport { NgControl, UntypedFormControl } from '@angular/forms'\n\nimport { Subject } from 'rxjs'\nimport { debounceTime, takeUntil } from 'rxjs/operators'\n\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@ngneat/transloco'\nimport type { InputmaskOptions } from '@sebgroup/green-angular/src/v-angular/input-mask'\n\nimport { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/**\n * Input fields allow users to add and edit text.\n * https://designlibrary.sebgroup.com/components/component-input\n */\n@Component({\n selector: 'nggv-input',\n templateUrl: './input.component.html',\n styleUrls: ['./input.component.scss'],\n})\nexport class NgvInputComponent\n extends NgvBaseControlValueAccessorComponent\n implements OnInit, OnDestroy\n{\n /** Adding .gds-form-item as a class to host element */\n @HostBinding('class') class = 'gds-form-item'\n /** Special property used for selecting DOM elements during automated UI testing. */\n @HostBinding('attr.data-thook') @Input() thook = 'input'\n /** Type of input field. Should avoid types that modify field too much such as range. */\n @Input() type = 'text'\n /** Text shown before input has a written value. */\n @Input() placeholder?: string\n /** If set to \"on\", hint for form autofill feature. */\n @Input() autocomplete = 'on'\n /** If set to true, the value will not be editable. */\n @Input() readonly = false\n /** If set to true, enables the Angular template-driven email validator. */\n @Input() email = false\n /** Minimum value required for numeric input types. */\n @Input() min = 0\n /** Maximum value required for numeric input types. */\n @Input() max = Number.MAX_SAFE_INTEGER\n /** Incremental values that are valid for numeric input types. */\n @Input() step = 1\n /** Minimum length (number of characters) of value. */\n @Input() set minLength(length: number) {\n this._minlength = length\n }\n /**\n * Minimum length (number of characters) of value.\n * @deprecated minlength triggers angular-template-validation. Use @Input() minLength instead.\n */\n @Input() set minlength(length: number) {\n this._minlength = length\n }\n get minlength(): number {\n return this._minlength\n }\n /** Maximum length (number of characters) of value. */\n @Input() set maxLength(length: number) {\n this._maxlength = length\n this.writeValue(this.state)\n }\n get maxlength(): number {\n return this._maxlength\n }\n /**\n * Maximum length (number of characters) of value.\n * @deprecated maxlength triggers angular-template-validation. Use @Input() maxLength instead.\n */\n @Input() set maxlength(length: number) {\n this._maxlength = length\n this.writeValue(this.state)\n }\n private _maxlength = Number.MAX_SAFE_INTEGER\n\n private _minlength = 0\n\n /** Wether to show label that tells how many characters are still left to be entered. Will only be set if maxLength is also set */\n private _showCharacterCountDown = true\n @Input() set showCharacterCountdown(option: boolean) {\n this._showCharacterCountDown = option\n }\n get showCharacterCountdown(): boolean {\n return this._showCharacterCountDown && this.hasMaxLength\n }\n\n /** Pattern the value must match to be valid. */\n @Input() pattern = ''\n /** Amount of time to wait until emitting (nggvINput) event */\n @Input() debounceTime = 500\n /**\n * @deprecated\n * Text to put in badge\n */\n @Input() badgeText = ''\n\n /** Settings for input mask if requested */\n private _inputMask!: InputmaskOptions<any>\n @Input() set inputMask(newInputMask: InputmaskOptions<any>) {\n // Hide input field\n this.hideInput$.next(true)\n this.cdr.detectChanges()\n this._inputMask = newInputMask\n\n // Show input field to reload input-mask settings upon update\n setTimeout(() => {\n this.hideInput$.next(false)\n this.cdr.detectChanges()\n }, 200)\n }\n get inputMask(): InputmaskOptions<any> {\n return this._inputMask\n }\n\n /** Emits every time the value of the inner input field changes, independantly of updates on the formcontroller */\n @Output() nggvInput = new EventEmitter<any>()\n\n private _formControl = new UntypedFormControl()\n get control(): UntypedFormControl {\n return (this.ngControl?.control as UntypedFormControl) ?? this._formControl\n }\n /** Returns if maxlength is used */\n get hasMaxLength(): boolean {\n return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER\n }\n\n /** Toggler for showing or hiding the input field */\n hideInput$ = new Subject<boolean>()\n\n protected inputChange$ = new Subject<any>()\n protected _destroy$ = new Subject<boolean>()\n\n constructor(\n @Self() @Optional() public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n ngOnInit() {\n super.ngOnInit()\n this.inputChange$\n .pipe(takeUntil(this._destroy$), debounceTime(this.debounceTime))\n .subscribe((inputValue) => {\n this.nggvInput.emit(inputValue)\n })\n }\n\n ngOnDestroy(): void {\n this._destroy$.next(true)\n this._destroy$.complete()\n }\n\n writeValue(value: any) {\n // maxLength will only work with string values\n if (value?.length && value.length > this.maxlength) {\n // cut value to match max length\n this.state = this.cutTextAfterMaxLength(value)\n if (value.length !== this.state.length) {\n this.onChange(this.state)\n }\n // emit value\n } else {\n // update state\n this.state = value\n }\n this.cdr.detectChanges()\n }\n\n cutTextAfterMaxLength(value: any): any {\n if (typeof value === 'string') {\n return value.substring(0, this.maxlength)\n }\n return value\n }\n\n /** @internal */\n onInput(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = (event.target as HTMLInputElement).value\n this.onChange(this.state)\n this.inputChange$.next(this.state)\n }\n}\n","<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"sdv-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"sdv-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.id]=\"id + '-message'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span *ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { ReactiveFormsModule } from '@angular/forms'\nimport { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NgvInputComponent } from './input.component'\nimport { NgvInputMaskModule } from '@sebgroup/green-angular/src/v-angular/input-mask'\n\n@NgModule({\n declarations: [NgvInputComponent],\n imports: [\n CommonModule,\n NgvI18nModule,\n NgvInputMaskModule,\n ReactiveFormsModule,\n ],\n exports: [NgvInputComponent],\n})\nexport class NgvInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;AAGG;AAMG,MAAO,iBACX,SAAQ,oCAAoC,CAAA;;IAwB5C,IAAa,SAAS,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;KACzB;AACD;;;AAGG;IACH,IAAa,SAAS,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;KACzB;AACD,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU,CAAA;KACvB;;IAED,IAAa,SAAS,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC5B;AACD,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU,CAAA;KACvB;AACD;;;AAGG;IACH,IAAa,SAAS,CAAC,MAAc,EAAA;AACnC,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC5B;IAOD,IAAa,sBAAsB,CAAC,MAAe,EAAA;AACjD,QAAA,IAAI,CAAC,uBAAuB,GAAG,MAAM,CAAA;KACtC;AACD,IAAA,IAAI,sBAAsB,GAAA;AACxB,QAAA,OAAO,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,YAAY,CAAA;KACzD;IAcD,IAAa,SAAS,CAAC,YAAmC,EAAA;;AAExD,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC1B,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAA;AACxB,QAAA,IAAI,CAAC,UAAU,GAAG,YAAY,CAAA;;QAG9B,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC3B,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAA;SACzB,EAAE,GAAG,CAAC,CAAA;KACR;AACD,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU,CAAA;KACvB;AAMD,IAAA,IAAI,OAAO,GAAA;QACT,OAAQ,IAAI,CAAC,SAAS,EAAE,OAA8B,IAAI,IAAI,CAAC,YAAY,CAAA;KAC5E;;AAED,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,gBAAgB,CAAA;KACtE;AAQD,IAAA,WAAA,CAC6B,SAAoB,EAGrC,cAA8B,EAC9B,GAAsB,EAAA;AAEhC,QAAA,KAAK,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;QANV,IAAS,CAAA,SAAA,GAAT,SAAS,CAAW;QAGrC,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAC9B,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;;QAjHZ,IAAK,CAAA,KAAA,GAAG,eAAe,CAAA;;QAEJ,IAAK,CAAA,KAAA,GAAG,OAAO,CAAA;;QAE/C,IAAI,CAAA,IAAA,GAAG,MAAM,CAAA;;QAIb,IAAY,CAAA,YAAA,GAAG,IAAI,CAAA;;QAEnB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAA;;QAEhB,IAAK,CAAA,KAAA,GAAG,KAAK,CAAA;;QAEb,IAAG,CAAA,GAAA,GAAG,CAAC,CAAA;;AAEP,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,gBAAgB,CAAA;;QAE7B,IAAI,CAAA,IAAA,GAAG,CAAC,CAAA;AA+BT,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAA;QAEpC,IAAU,CAAA,UAAA,GAAG,CAAC,CAAA;;QAGd,IAAuB,CAAA,uBAAA,GAAG,IAAI,CAAA;;QAS7B,IAAO,CAAA,OAAA,GAAG,EAAE,CAAA;;QAEZ,IAAY,CAAA,YAAA,GAAG,GAAG,CAAA;AAC3B;;;AAGG;QACM,IAAS,CAAA,SAAA,GAAG,EAAE,CAAA;;AAqBb,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,YAAY,EAAO,CAAA;AAErC,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,kBAAkB,EAAE,CAAA;;AAU/C,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,OAAO,EAAW,CAAA;AAEzB,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAAO,CAAA;AACjC,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,OAAO,EAAW,CAAA;KAU3C;IAED,QAAQ,GAAA;QACN,KAAK,CAAC,QAAQ,EAAE,CAAA;AAChB,QAAA,IAAI,CAAC,YAAY;AACd,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AAChE,aAAA,SAAS,CAAC,CAAC,UAAU,KAAI;AACxB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;AACjC,SAAC,CAAC,CAAA;KACL;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAA;KAC1B;AAED,IAAA,UAAU,CAAC,KAAU,EAAA;;QAEnB,IAAI,KAAK,EAAE,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;;YAElD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;YAC9C,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACtC,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC1B,aAAA;;AAEF,SAAA;AAAM,aAAA;;AAEL,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;AACnB,SAAA;AACD,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAA;KACzB;AAED,IAAA,qBAAqB,CAAC,KAAU,EAAA;AAC9B,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;AAC1C,SAAA;AACD,QAAA,OAAO,KAAK,CAAA;KACb;;AAGD,IAAA,OAAO,CAAC,KAAY,EAAA;QAClB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;QACzB,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAA;AACrD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KACnC;AAvKU,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,uEAoHlB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AApHd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,omBChC9B,4xIAqJA,EAAA,MAAA,EAAA,CAAA,4lXAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FDrHa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,SAAS;+BACE,YAAY,EAAA,QAAA,EAAA,4xIAAA,EAAA,MAAA,EAAA,CAAA,4lXAAA,CAAA,EAAA,CAAA;;0BAsHnB,IAAI;;0BAAI,QAAQ;;0BAChB,QAAQ;;0BACR,MAAM;2BAAC,eAAe,CAAA;4EA/GH,KAAK,EAAA,CAAA;sBAA1B,WAAW;uBAAC,OAAO,CAAA;gBAEqB,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,iBAAiB,CAAA;;sBAAG,KAAK;gBAE7B,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAEG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBAEG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAEG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAEG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBAEG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBAEG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAOO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAOO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAWO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAUO,sBAAsB,EAAA,CAAA;sBAAlC,KAAK;gBAQG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAEG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBAKG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAIO,SAAS,EAAA,CAAA;sBAArB,KAAK;gBAiBI,SAAS,EAAA,CAAA;sBAAlB,MAAM;;;ME/GI,cAAc,CAAA;+GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAd,cAAc,EAAA,YAAA,EAAA,CATV,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAE9B,YAAY;YACZ,aAAa;YACb,kBAAkB;AAClB,YAAA,mBAAmB,aAEX,iBAAiB,CAAA,EAAA,CAAA,CAAA,EAAA;AAEhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,YAPvB,YAAY;YACZ,aAAa;YACb,kBAAkB;YAClB,mBAAmB,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAIV,cAAc,EAAA,UAAA,EAAA,CAAA;kBAV1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,iBAAiB,CAAC;AACjC,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,aAAa;wBACb,kBAAkB;wBAClB,mBAAmB;AACpB,qBAAA;oBACD,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC7B,iBAAA,CAAA;;;AChBD;;AAEG;;;;"}
|