@sebgroup/green-angular 5.7.0 → 5.7.1
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/lib/shared/core-control/core-control.directive.mjs +9 -3
- package/esm2022/src/lib/shared/core-control/core-control.directive.mjs +9 -3
- package/esm2022/src/v-angular/input/input.component.mjs +2 -2
- package/esm2022/v-angular/input/input.component.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-shared.mjs +8 -2
- package/fesm2022/sebgroup-green-angular-src-lib-shared.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular.mjs +8 -2
- package/fesm2022/sebgroup-green-angular.mjs.map +1 -1
- package/lib/shared/core-control/core-control.directive.d.ts +1 -1
- package/package.json +2 -2
- package/src/lib/shared/core-control/core-control.directive.d.ts +1 -1
|
@@ -49,7 +49,7 @@ export class NggCoreControlDirective {
|
|
|
49
49
|
this.renderer.setProperty(this.el.nativeElement, 'disabled', isDisabled);
|
|
50
50
|
}
|
|
51
51
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
52
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggCoreControlDirective, selector: "gds-input
|
|
52
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggCoreControlDirective, selector: "gds-input:not([ngDefaultControl]),\n gds-textarea:not([ngDefaultControl]),\n gds-dropdown:not([ngDefaultControl]),\n gds-datepicker:not([ngDefaultControl]),\n gds-select:not([ngDefaultControl]),\n gds-radio-group:not([ngDefaultControl]),\n [nggCoreControl]", providers: [
|
|
53
53
|
{
|
|
54
54
|
provide: NG_VALUE_ACCESSOR,
|
|
55
55
|
useExisting: forwardRef(() => NggCoreControlDirective),
|
|
@@ -60,7 +60,13 @@ export class NggCoreControlDirective {
|
|
|
60
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreControlDirective, decorators: [{
|
|
61
61
|
type: Directive,
|
|
62
62
|
args: [{
|
|
63
|
-
selector:
|
|
63
|
+
selector: `gds-input:not([ngDefaultControl]),
|
|
64
|
+
gds-textarea:not([ngDefaultControl]),
|
|
65
|
+
gds-dropdown:not([ngDefaultControl]),
|
|
66
|
+
gds-datepicker:not([ngDefaultControl]),
|
|
67
|
+
gds-select:not([ngDefaultControl]),
|
|
68
|
+
gds-radio-group:not([ngDefaultControl]),
|
|
69
|
+
[nggCoreControl]`,
|
|
64
70
|
providers: [
|
|
65
71
|
{
|
|
66
72
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -70,4 +76,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
70
76
|
],
|
|
71
77
|
}]
|
|
72
78
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
73
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
79
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29yZS1jb250cm9sLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9zcmMvbGliL3NoYXJlZC9jb3JlLWNvbnRyb2wvY29yZS1jb250cm9sLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsVUFBVSxFQUNWLFFBQVEsRUFDUixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUE7QUFDdEIsT0FBTyxFQUVMLGlCQUFpQixFQUNqQixTQUFTLEdBRVYsTUFBTSxnQkFBZ0IsQ0FBQTs7QUFrQnZCLE1BQU0sT0FBTyx1QkFBdUI7SUFLbEMsWUFDVSxFQUFjLEVBQ2QsUUFBbUIsRUFDbkIsUUFBa0IsRUFDbEIsR0FBc0I7UUFIdEIsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUNkLGFBQVEsR0FBUixRQUFRLENBQVc7UUFDbkIsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUNsQixRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUM3QixDQUFDO0lBRUosZUFBZTtRQUNiLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUE7UUFFM0MsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEVBQUUsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUN6QyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQTtRQUMzQixDQUFDLENBQUMsQ0FBQTtRQUVGLElBQUksQ0FBQyxPQUFPLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDeEMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUE7UUFDM0IsQ0FBQyxDQUFDLENBQUE7UUFFRixtQkFBbUI7UUFDbkIsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFBO1FBQ3ZDLElBQUksSUFBSSxFQUFFLENBQUM7WUFDVCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLEdBQUcsRUFBRTtnQkFDbkMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsYUFBYSxFQUFFLENBQUE7Z0JBQ3RDLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFBO1lBQzNCLENBQUMsQ0FBQyxDQUFBO1FBQ0osQ0FBQztRQUVELElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFBO0lBQzNCLENBQUM7SUFFTyxrQkFBa0I7UUFDeEIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUE7UUFDckMsSUFBSSxPQUFPLEVBQUUsQ0FBQztZQUNaLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUN2QixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFDckIsU0FBUyxFQUNULENBQUMsT0FBTyxDQUFDLEtBQUssSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FDdEQsQ0FBQTtRQUNILENBQUM7SUFDSCxDQUFDO0lBRUQsc0NBQXNDO0lBQ3RDLFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxLQUFLLENBQUMsQ0FBQTtJQUNsRSxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBb0I7UUFDbkMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLENBQUMsS0FBVSxFQUFFLEVBQUU7WUFDN0QsRUFBRSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUE7WUFDdEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQTtRQUN6QixDQUFDLENBQUMsQ0FBQTtJQUNKLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsQ0FBQTtJQUNwRCxDQUFDO0lBRUQsZ0JBQWdCLENBQUUsVUFBbUI7UUFDbkMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFBO0lBQzFFLENBQUM7K0dBaEVVLHVCQUF1QjttR0FBdkIsdUJBQXVCLG1UQVJ2QjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsdUJBQXVCLENBQUM7Z0JBQ3RELEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRjs7NEZBRVUsdUJBQXVCO2tCQWhCbkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUU7Ozs7OztzQkFNVTtvQkFDcEIsU0FBUyxFQUFFO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHdCQUF3QixDQUFDOzRCQUN0RCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIGZvcndhcmRSZWYsXG4gIEluamVjdG9yLFxuICBSZW5kZXJlcjIsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5pbXBvcnQge1xuICBDb250cm9sVmFsdWVBY2Nlc3NvcixcbiAgTkdfVkFMVUVfQUNDRVNTT1IsXG4gIE5nQ29udHJvbCxcbiAgVmFsaWRhdG9ycyxcbn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnXG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogYGdkcy1pbnB1dDpub3QoW25nRGVmYXVsdENvbnRyb2xdKSxcbiAgICAgZ2RzLXRleHRhcmVhOm5vdChbbmdEZWZhdWx0Q29udHJvbF0pLFxuICAgICBnZHMtZHJvcGRvd246bm90KFtuZ0RlZmF1bHRDb250cm9sXSksXG4gICAgIGdkcy1kYXRlcGlja2VyOm5vdChbbmdEZWZhdWx0Q29udHJvbF0pLFxuICAgICBnZHMtc2VsZWN0Om5vdChbbmdEZWZhdWx0Q29udHJvbF0pLFxuICAgICBnZHMtcmFkaW8tZ3JvdXA6bm90KFtuZ0RlZmF1bHRDb250cm9sXSksXG4gICAgIFtuZ2dDb3JlQ29udHJvbF1gLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE5nZ0NvcmVDb250cm9sRGlyZWN0aXZlKSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE5nZ0NvcmVDb250cm9sRGlyZWN0aXZlXG4gIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEFmdGVyVmlld0luaXRcbntcbiAgcHJpdmF0ZSBjb250cm9sPzogTmdDb250cm9sXG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBpbmplY3RvcjogSW5qZWN0b3IsXG4gICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmLFxuICApIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuY29udHJvbCA9IHRoaXMuaW5qZWN0b3IuZ2V0KE5nQ29udHJvbClcblxuICAgIHRoaXMuY29udHJvbC5zdGF0dXNDaGFuZ2VzPy5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgdGhpcy51cGRhdGVDb250cm9sU3RhdGUoKVxuICAgIH0pXG5cbiAgICB0aGlzLmNvbnRyb2wudmFsdWVDaGFuZ2VzPy5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgdGhpcy51cGRhdGVDb250cm9sU3RhdGUoKVxuICAgIH0pXG5cbiAgICAvLyBVcGRhdGUgb24gc3VibWl0XG4gICAgY29uc3QgZm9ybSA9IHRoaXMuZWwubmF0aXZlRWxlbWVudC5mb3JtXG4gICAgaWYgKGZvcm0pIHtcbiAgICAgIGZvcm0uYWRkRXZlbnRMaXN0ZW5lcignc3VibWl0JywgKCkgPT4ge1xuICAgICAgICB0aGlzLmNvbnRyb2w/LmNvbnRyb2w/Lm1hcmtBc1RvdWNoZWQoKVxuICAgICAgICB0aGlzLnVwZGF0ZUNvbnRyb2xTdGF0ZSgpXG4gICAgICB9KVxuICAgIH1cblxuICAgIHRoaXMudXBkYXRlQ29udHJvbFN0YXRlKClcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlQ29udHJvbFN0YXRlKCkge1xuICAgIGNvbnN0IGNvbnRyb2wgPSB0aGlzLmNvbnRyb2w/LmNvbnRyb2xcbiAgICBpZiAoY29udHJvbCkge1xuICAgICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eShcbiAgICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LFxuICAgICAgICAnaW52YWxpZCcsXG4gICAgICAgIChjb250cm9sLmRpcnR5IHx8IGNvbnRyb2wudG91Y2hlZCkgJiYgY29udHJvbC5pbnZhbGlkLFxuICAgICAgKVxuICAgIH1cbiAgfVxuXG4gIC8vIENvbnRyb2xWYWx1ZUFjY2Vzc29yIGltcGxlbWVudGF0aW9uXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0UHJvcGVydHkodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAndmFsdWUnLCB2YWx1ZSlcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IChfOiBhbnkpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCAoZXZlbnQ6IGFueSkgPT4ge1xuICAgICAgZm4oZXZlbnQudGFyZ2V0LnZhbHVlKVxuICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKClcbiAgICB9KVxuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgZm4pXG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdkaXNhYmxlZCcsIGlzRGlzYWJsZWQpXG4gIH1cbn1cbiJdfQ==
|
|
@@ -49,7 +49,7 @@ export class NggCoreControlDirective {
|
|
|
49
49
|
this.renderer.setProperty(this.el.nativeElement, 'disabled', isDisabled);
|
|
50
50
|
}
|
|
51
51
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
52
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggCoreControlDirective, selector: "gds-input
|
|
52
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggCoreControlDirective, selector: "gds-input:not([ngDefaultControl]),\n gds-textarea:not([ngDefaultControl]),\n gds-dropdown:not([ngDefaultControl]),\n gds-datepicker:not([ngDefaultControl]),\n gds-select:not([ngDefaultControl]),\n gds-radio-group:not([ngDefaultControl]),\n [nggCoreControl]", providers: [
|
|
53
53
|
{
|
|
54
54
|
provide: NG_VALUE_ACCESSOR,
|
|
55
55
|
useExisting: forwardRef(() => NggCoreControlDirective),
|
|
@@ -60,7 +60,13 @@ export class NggCoreControlDirective {
|
|
|
60
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggCoreControlDirective, decorators: [{
|
|
61
61
|
type: Directive,
|
|
62
62
|
args: [{
|
|
63
|
-
selector:
|
|
63
|
+
selector: `gds-input:not([ngDefaultControl]),
|
|
64
|
+
gds-textarea:not([ngDefaultControl]),
|
|
65
|
+
gds-dropdown:not([ngDefaultControl]),
|
|
66
|
+
gds-datepicker:not([ngDefaultControl]),
|
|
67
|
+
gds-select:not([ngDefaultControl]),
|
|
68
|
+
gds-radio-group:not([ngDefaultControl]),
|
|
69
|
+
[nggCoreControl]`,
|
|
64
70
|
providers: [
|
|
65
71
|
{
|
|
66
72
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -70,4 +76,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
70
76
|
],
|
|
71
77
|
}]
|
|
72
78
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
73
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
79
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29yZS1jb250cm9sLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYW5ndWxhci9zcmMvbGliL3NoYXJlZC9jb3JlLWNvbnRyb2wvY29yZS1jb250cm9sLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsVUFBVSxFQUNWLFFBQVEsRUFDUixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUE7QUFDdEIsT0FBTyxFQUVMLGlCQUFpQixFQUNqQixTQUFTLEdBRVYsTUFBTSxnQkFBZ0IsQ0FBQTs7QUFrQnZCLE1BQU0sT0FBTyx1QkFBdUI7SUFLbEMsWUFDVSxFQUFjLEVBQ2QsUUFBbUIsRUFDbkIsUUFBa0IsRUFDbEIsR0FBc0I7UUFIdEIsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUNkLGFBQVEsR0FBUixRQUFRLENBQVc7UUFDbkIsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUNsQixRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUM3QixDQUFDO0lBRUosZUFBZTtRQUNiLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUE7UUFFM0MsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEVBQUUsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUN6QyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQTtRQUMzQixDQUFDLENBQUMsQ0FBQTtRQUVGLElBQUksQ0FBQyxPQUFPLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDeEMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUE7UUFDM0IsQ0FBQyxDQUFDLENBQUE7UUFFRixtQkFBbUI7UUFDbkIsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFBO1FBQ3ZDLElBQUksSUFBSSxFQUFFLENBQUM7WUFDVCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLEdBQUcsRUFBRTtnQkFDbkMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsYUFBYSxFQUFFLENBQUE7Z0JBQ3RDLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFBO1lBQzNCLENBQUMsQ0FBQyxDQUFBO1FBQ0osQ0FBQztRQUVELElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFBO0lBQzNCLENBQUM7SUFFTyxrQkFBa0I7UUFDeEIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUE7UUFDckMsSUFBSSxPQUFPLEVBQUUsQ0FBQztZQUNaLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUN2QixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFDckIsU0FBUyxFQUNULENBQUMsT0FBTyxDQUFDLEtBQUssSUFBSSxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksT0FBTyxDQUFDLE9BQU8sQ0FDdEQsQ0FBQTtRQUNILENBQUM7SUFDSCxDQUFDO0lBRUQsc0NBQXNDO0lBQ3RDLFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxLQUFLLENBQUMsQ0FBQTtJQUNsRSxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBb0I7UUFDbkMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLENBQUMsS0FBVSxFQUFFLEVBQUU7WUFDN0QsRUFBRSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUE7WUFDdEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQTtRQUN6QixDQUFDLENBQUMsQ0FBQTtJQUNKLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsQ0FBQTtJQUNwRCxDQUFDO0lBRUQsZ0JBQWdCLENBQUUsVUFBbUI7UUFDbkMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxFQUFFLFVBQVUsQ0FBQyxDQUFBO0lBQzFFLENBQUM7K0dBaEVVLHVCQUF1QjttR0FBdkIsdUJBQXVCLG1UQVJ2QjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsdUJBQXVCLENBQUM7Z0JBQ3RELEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRjs7NEZBRVUsdUJBQXVCO2tCQWhCbkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUU7Ozs7OztzQkFNVTtvQkFDcEIsU0FBUyxFQUFFO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHdCQUF3QixDQUFDOzRCQUN0RCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIGZvcndhcmRSZWYsXG4gIEluamVjdG9yLFxuICBSZW5kZXJlcjIsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5pbXBvcnQge1xuICBDb250cm9sVmFsdWVBY2Nlc3NvcixcbiAgTkdfVkFMVUVfQUNDRVNTT1IsXG4gIE5nQ29udHJvbCxcbiAgVmFsaWRhdG9ycyxcbn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnXG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogYGdkcy1pbnB1dDpub3QoW25nRGVmYXVsdENvbnRyb2xdKSxcbiAgICAgZ2RzLXRleHRhcmVhOm5vdChbbmdEZWZhdWx0Q29udHJvbF0pLFxuICAgICBnZHMtZHJvcGRvd246bm90KFtuZ0RlZmF1bHRDb250cm9sXSksXG4gICAgIGdkcy1kYXRlcGlja2VyOm5vdChbbmdEZWZhdWx0Q29udHJvbF0pLFxuICAgICBnZHMtc2VsZWN0Om5vdChbbmdEZWZhdWx0Q29udHJvbF0pLFxuICAgICBnZHMtcmFkaW8tZ3JvdXA6bm90KFtuZ0RlZmF1bHRDb250cm9sXSksXG4gICAgIFtuZ2dDb3JlQ29udHJvbF1gLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE5nZ0NvcmVDb250cm9sRGlyZWN0aXZlKSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE5nZ0NvcmVDb250cm9sRGlyZWN0aXZlXG4gIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEFmdGVyVmlld0luaXRcbntcbiAgcHJpdmF0ZSBjb250cm9sPzogTmdDb250cm9sXG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBlbDogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBpbmplY3RvcjogSW5qZWN0b3IsXG4gICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmLFxuICApIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuY29udHJvbCA9IHRoaXMuaW5qZWN0b3IuZ2V0KE5nQ29udHJvbClcblxuICAgIHRoaXMuY29udHJvbC5zdGF0dXNDaGFuZ2VzPy5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgdGhpcy51cGRhdGVDb250cm9sU3RhdGUoKVxuICAgIH0pXG5cbiAgICB0aGlzLmNvbnRyb2wudmFsdWVDaGFuZ2VzPy5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgdGhpcy51cGRhdGVDb250cm9sU3RhdGUoKVxuICAgIH0pXG5cbiAgICAvLyBVcGRhdGUgb24gc3VibWl0XG4gICAgY29uc3QgZm9ybSA9IHRoaXMuZWwubmF0aXZlRWxlbWVudC5mb3JtXG4gICAgaWYgKGZvcm0pIHtcbiAgICAgIGZvcm0uYWRkRXZlbnRMaXN0ZW5lcignc3VibWl0JywgKCkgPT4ge1xuICAgICAgICB0aGlzLmNvbnRyb2w/LmNvbnRyb2w/Lm1hcmtBc1RvdWNoZWQoKVxuICAgICAgICB0aGlzLnVwZGF0ZUNvbnRyb2xTdGF0ZSgpXG4gICAgICB9KVxuICAgIH1cblxuICAgIHRoaXMudXBkYXRlQ29udHJvbFN0YXRlKClcbiAgfVxuXG4gIHByaXZhdGUgdXBkYXRlQ29udHJvbFN0YXRlKCkge1xuICAgIGNvbnN0IGNvbnRyb2wgPSB0aGlzLmNvbnRyb2w/LmNvbnRyb2xcbiAgICBpZiAoY29udHJvbCkge1xuICAgICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eShcbiAgICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LFxuICAgICAgICAnaW52YWxpZCcsXG4gICAgICAgIChjb250cm9sLmRpcnR5IHx8IGNvbnRyb2wudG91Y2hlZCkgJiYgY29udHJvbC5pbnZhbGlkLFxuICAgICAgKVxuICAgIH1cbiAgfVxuXG4gIC8vIENvbnRyb2xWYWx1ZUFjY2Vzc29yIGltcGxlbWVudGF0aW9uXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0UHJvcGVydHkodGhpcy5lbC5uYXRpdmVFbGVtZW50LCAndmFsdWUnLCB2YWx1ZSlcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IChfOiBhbnkpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCAoZXZlbnQ6IGFueSkgPT4ge1xuICAgICAgZm4oZXZlbnQudGFyZ2V0LnZhbHVlKVxuICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKClcbiAgICB9KVxuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5hZGRFdmVudExpc3RlbmVyKCdibHVyJywgZm4pXG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRQcm9wZXJ0eSh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdkaXNhYmxlZCcsIGlzRGlzYWJsZWQpXG4gIH1cbn1cbiJdfQ==
|
|
@@ -183,11 +183,11 @@ export class NggvInputComponent extends NggvBaseControlValueAccessorComponent {
|
|
|
183
183
|
this.inputChange$.next(this.state);
|
|
184
184
|
}
|
|
185
185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputComponent, selector: "nggv-input", inputs: { size: "size", 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", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-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=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\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=\"gds-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 title=\"\"\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=\"gds-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 title=\"\"\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.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}: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:.5rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span,:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info{font-weight:500}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error .error-icon{align-items:center}:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info--countdown{font-weight:400}: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%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;display:flex;flex-direction:row}: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 .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}: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: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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\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", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, 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: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i6.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputComponent, selector: "nggv-input", inputs: { size: "size", 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", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-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=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\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=\"gds-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 title=\"\"\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=\"gds-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 title=\"\"\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.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}: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%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;display:flex;flex-direction:row}: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 .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}: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: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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\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", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, 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: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i6.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
187
187
|
}
|
|
188
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
190
|
-
args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-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=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\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=\"gds-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 title=\"\"\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=\"gds-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 title=\"\"\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.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}: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:.5rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span,:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info{font-weight:500}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error .error-icon{align-items:center}:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info--countdown{font-weight:400}: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%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;display:flex;flex-direction:row}: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 .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}: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: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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
|
|
190
|
+
args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-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=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\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=\"gds-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 title=\"\"\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=\"gds-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 title=\"\"\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.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}: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%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;display:flex;flex-direction:row}: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 .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}: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: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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
|
|
191
191
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
192
192
|
type: Self
|
|
193
193
|
}, {
|
|
@@ -183,11 +183,11 @@ export class NggvInputComponent extends NggvBaseControlValueAccessorComponent {
|
|
|
183
183
|
this.inputChange$.next(this.state);
|
|
184
184
|
}
|
|
185
185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputComponent, selector: "nggv-input", inputs: { size: "size", 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", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-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=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\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=\"gds-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 title=\"\"\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=\"gds-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 title=\"\"\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.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}: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:.5rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span,:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info{font-weight:500}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error .error-icon{align-items:center}:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info--countdown{font-weight:400}: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%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;display:flex;flex-direction:row}: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 .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}: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: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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\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", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, 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: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i6.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputComponent, selector: "nggv-input", inputs: { size: "size", 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", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-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=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\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=\"gds-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 title=\"\"\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=\"gds-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 title=\"\"\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.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}: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%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;display:flex;flex-direction:row}: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 .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}: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: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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\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", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggvInputMaskDirective, 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: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i6.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
187
187
|
}
|
|
188
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
190
|
-
args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-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=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\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=\"gds-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 title=\"\"\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=\"gds-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 title=\"\"\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.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}: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:.5rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span,:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info{font-weight:500}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error .error-icon{align-items:center}:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info--countdown{font-weight:400}: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%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;display:flex;flex-direction:row}: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 .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}: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: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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
|
|
190
|
+
args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-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=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\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=\"gds-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 title=\"\"\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=\"gds-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 title=\"\"\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.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\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 form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .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__expandable-info>div{padding-bottom:.5rem}:host .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__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}: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%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;display:flex;flex-direction:row}: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 .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label{font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:2rem;min-height:2rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:2rem;min-height:2rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}: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: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 label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
|
|
191
191
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
192
192
|
type: Self
|
|
193
193
|
}, {
|