@kern-ux-annex/kern-angular-kit 1.3.1 → 1.5.0
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.
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Directive, Component, Injectable, inject, ElementRef, Renderer2, booleanAttribute, output, computed,
|
|
2
|
+
import { input, Directive, Component, viewChild, Injectable, inject, ElementRef, Renderer2, booleanAttribute, output, computed, signal, forwardRef, TemplateRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
3
3
|
import { Router, UrlTree, ActivatedRoute } from '@angular/router';
|
|
4
4
|
import { LocationStrategy, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
6
6
|
|
|
7
7
|
class KernTitle {
|
|
8
8
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
9
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
10
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
10
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: KernTitle, isStandalone: true, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-title--small": "size() === \"small\"", "class.kern-title--large": "size() === \"large\"" }, classAttribute: "kern-title" }, ngImport: i0 });
|
|
11
11
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernTitle, decorators: [{
|
|
13
13
|
type: Directive,
|
|
14
14
|
args: [{
|
|
15
15
|
host: {
|
|
@@ -25,19 +25,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
25
25
|
class KernAccordion {
|
|
26
26
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
27
27
|
open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
28
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
29
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
28
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernAccordion, isStandalone: true, selector: "kern-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<details class=\"kern-accordion\" [open]=\"open()\">\n <summary class=\"kern-accordion__header\">\n <span kernTitle>{{ title() }}</span>\n </summary>\n <section class=\"kern-accordion__body\">\n <ng-content />\n </section>\n</details>\n", styles: [":host{display:contents}:host:not(:first-of-type)>.kern-accordion{margin-top:calc(var(--kern-metric-border-width-light) * -1)}\n"], dependencies: [{ kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }] });
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAccordion, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
33
|
args: [{ selector: 'kern-accordion', imports: [KernTitle], template: "<details class=\"kern-accordion\" [open]=\"open()\">\n <summary class=\"kern-accordion__header\">\n <span kernTitle>{{ title() }}</span>\n </summary>\n <section class=\"kern-accordion__body\">\n <ng-content />\n </section>\n</details>\n", styles: [":host{display:contents}:host:not(:first-of-type)>.kern-accordion{margin-top:calc(var(--kern-metric-border-width-light) * -1)}\n"] }]
|
|
34
34
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }] } });
|
|
35
35
|
|
|
36
36
|
class KernAccordionGroup {
|
|
37
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
37
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAccordionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
38
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: KernAccordionGroup, isStandalone: true, selector: "kern-accordion-group", host: { classAttribute: "kern-accordion-group" }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
39
39
|
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAccordionGroup, decorators: [{
|
|
41
41
|
type: Component,
|
|
42
42
|
args: [{
|
|
43
43
|
selector: 'kern-accordion-group',
|
|
@@ -50,10 +50,10 @@ class KernIcon {
|
|
|
50
50
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
51
51
|
ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
|
|
52
52
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
53
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
54
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
53
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernIcon, isStandalone: true, selector: "kern-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n class=\"kern-icon kern-icon--{{ name() }}\"\n [attr.aria-hidden]=\"ariaHidden()\"\n [class.kern-icon--small]=\"size() === 'small'\"\n [class.kern-icon--large]=\"size() === 'large'\"\n [class.kern-icon--x-large]=\"size() === 'x-large'\"\n></span>\n", styles: [":host{display:contents}\n"] });
|
|
55
55
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernIcon, decorators: [{
|
|
57
57
|
type: Component,
|
|
58
58
|
args: [{ selector: 'kern-icon', template: "<span\n class=\"kern-icon kern-icon--{{ name() }}\"\n [attr.aria-hidden]=\"ariaHidden()\"\n [class.kern-icon--small]=\"size() === 'small'\"\n [class.kern-icon--large]=\"size() === 'large'\"\n [class.kern-icon--x-large]=\"size() === 'x-large'\"\n></span>\n", styles: [":host{display:contents}\n"] }]
|
|
59
59
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
@@ -61,23 +61,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
61
61
|
class KernAlert {
|
|
62
62
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
63
63
|
variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
|
|
65
|
+
alertDiv = viewChild.required('alertDiv');
|
|
66
|
+
ngAfterViewInit() {
|
|
67
|
+
if (this.autoFocus()) {
|
|
68
|
+
this.focus();
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
focus() {
|
|
72
|
+
this.alertDiv().nativeElement.focus();
|
|
73
|
+
}
|
|
74
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: KernAlert, isStandalone: true, selector: "kern-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "alertDiv", first: true, predicate: ["alertDiv"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #alertDiv class=\"kern-alert kern-alert--{{ variant() }}\" role=\"alert\" tabindex=\"-1\">\n <div class=\"kern-alert__header\">\n <kern-icon [name]=\"variant()\"></kern-icon>\n <span kernTitle>{{ title() }}</span>\n </div>\n <div class=\"kern-alert__body\"><ng-content /></div>\n</div>\n", styles: [".kern-alert__body:empty{display:none}\n"], dependencies: [{ kind: "component", type: KernIcon, selector: "kern-icon", inputs: ["name", "ariaHidden", "size"] }, { kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }] });
|
|
66
76
|
}
|
|
67
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAlert, decorators: [{
|
|
68
78
|
type: Component,
|
|
69
|
-
args: [{ selector: 'kern-alert', imports: [KernIcon, KernTitle], template: "<div class=\"kern-alert kern-alert--{{ variant() }}\" role=\"alert\">\n <div class=\"kern-alert__header\">\n <kern-icon [name]=\"variant()\"></kern-icon>\n <span kernTitle>{{ title() }}</span>\n </div>\n <div class=\"kern-alert__body\"><ng-content /></div>\n</div>\n", styles: [".kern-alert__body:empty{display:none}\n"] }]
|
|
70
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
79
|
+
args: [{ selector: 'kern-alert', imports: [KernIcon, KernTitle], template: "<div #alertDiv class=\"kern-alert kern-alert--{{ variant() }}\" role=\"alert\" tabindex=\"-1\">\n <div class=\"kern-alert__header\">\n <kern-icon [name]=\"variant()\"></kern-icon>\n <span kernTitle>{{ title() }}</span>\n </div>\n <div class=\"kern-alert__body\"><ng-content /></div>\n</div>\n", styles: [".kern-alert__body:empty{display:none}\n"] }]
|
|
80
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], alertDiv: [{ type: i0.ViewChild, args: ['alertDiv', { isSignal: true }] }] } });
|
|
71
81
|
|
|
72
82
|
class UniqueIdService {
|
|
73
83
|
counter = 0;
|
|
74
84
|
getUniqueId(prefix = '') {
|
|
75
85
|
return prefix + '_' + (this.counter++).toString();
|
|
76
86
|
}
|
|
77
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
78
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
87
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UniqueIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
88
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UniqueIdService, providedIn: 'root' });
|
|
79
89
|
}
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
90
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: UniqueIdService, decorators: [{
|
|
81
91
|
type: Injectable,
|
|
82
92
|
args: [{
|
|
83
93
|
providedIn: 'root'
|
|
@@ -108,10 +118,10 @@ class KernLabel {
|
|
|
108
118
|
}
|
|
109
119
|
}
|
|
110
120
|
}
|
|
111
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
112
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
121
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
122
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: KernLabel, isStandalone: true, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, srOnly: { classPropertyName: "srOnly", publicName: "srOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-label--small": "size() === \"small\"", "class.kern-label--large": "size() === \"large\"", "class.kern-sr-only": "srOnly()" }, classAttribute: "kern-label" }, usesOnChanges: true, ngImport: i0 });
|
|
113
123
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernLabel, decorators: [{
|
|
115
125
|
type: Directive,
|
|
116
126
|
args: [{
|
|
117
127
|
host: {
|
|
@@ -165,10 +175,10 @@ class NavigationService {
|
|
|
165
175
|
});
|
|
166
176
|
}
|
|
167
177
|
}
|
|
168
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
169
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
178
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
179
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationService, providedIn: 'root' });
|
|
170
180
|
}
|
|
171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationService, decorators: [{
|
|
172
182
|
type: Injectable,
|
|
173
183
|
args: [{
|
|
174
184
|
providedIn: 'root'
|
|
@@ -195,10 +205,10 @@ class KernButton {
|
|
|
195
205
|
this.navigationService.navigate(this.routerLink(), this.routerQueryParams(), this.routerFragment(), this.routerState(), event, this.activatedRoute);
|
|
196
206
|
this.clickEvent.emit(event);
|
|
197
207
|
}
|
|
198
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
208
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
209
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernButton, isStandalone: true, selector: "kern-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, srOnlyLabel: { classPropertyName: "srOnlyLabel", publicName: "srOnlyLabel", isSignal: true, isRequired: false, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerQueryParams: { classPropertyName: "routerQueryParams", publicName: "routerQueryParams", isSignal: true, isRequired: false, transformFunction: null }, routerFragment: { classPropertyName: "routerFragment", publicName: "routerFragment", isSignal: true, isRequired: false, transformFunction: null }, routerState: { classPropertyName: "routerState", publicName: "routerState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\n class=\"kern-btn kern-btn--{{ variant() }}\"\n [class.kern-btn--block]=\"block()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n [attr.form]=\"formId() || null\"\n>\n @if (iconLeft()) {\n <span class=\"kern-icon kern-icon--{{ iconLeft() }}\" aria-hidden=\"true\"></span>\n }\n <span kernLabel [srOnly]=\"srOnlyLabel()\"><ng-content /></span>\n @if (iconRight()) {\n <span class=\"kern-icon kern-icon--{{ iconRight() }}\" aria-hidden=\"true\"></span>\n }\n</button>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
|
|
200
210
|
}
|
|
201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernButton, decorators: [{
|
|
202
212
|
type: Component,
|
|
203
213
|
args: [{ selector: 'kern-button', imports: [KernLabel], template: "<button\n class=\"kern-btn kern-btn--{{ variant() }}\"\n [class.kern-btn--block]=\"block()\"\n [type]=\"type()\"\n [disabled]=\"disabled()\"\n (click)=\"onClick($event)\"\n [attr.form]=\"formId() || null\"\n>\n @if (iconLeft()) {\n <span class=\"kern-icon kern-icon--{{ iconLeft() }}\" aria-hidden=\"true\"></span>\n }\n <span kernLabel [srOnly]=\"srOnlyLabel()\"><ng-content /></span>\n @if (iconRight()) {\n <span class=\"kern-icon kern-icon--{{ iconRight() }}\" aria-hidden=\"true\"></span>\n }\n</button>\n", styles: [":host{display:contents}\n"] }]
|
|
204
214
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], srOnlyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "srOnlyLabel", required: false }] }], formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerQueryParams", required: false }] }], routerFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerFragment", required: false }] }], routerState: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerState", required: false }] }], clickEvent: [{ type: i0.Output, args: ["clickEvent"] }] } });
|
|
@@ -225,10 +235,10 @@ class ScrollLockService {
|
|
|
225
235
|
isLocked() {
|
|
226
236
|
return this.lockCount > 0;
|
|
227
237
|
}
|
|
228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
229
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
238
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScrollLockService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
239
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScrollLockService, providedIn: 'root' });
|
|
230
240
|
}
|
|
231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScrollLockService, decorators: [{
|
|
232
242
|
type: Injectable,
|
|
233
243
|
args: [{
|
|
234
244
|
providedIn: 'root'
|
|
@@ -271,20 +281,20 @@ class KernDialog {
|
|
|
271
281
|
this.scrollLockService.unlock();
|
|
272
282
|
}
|
|
273
283
|
}
|
|
274
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
284
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
285
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernDialog, isStandalone: true, selector: "kern-dialog", inputs: { dialogId: { classPropertyName: "dialogId", publicName: "dialogId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, btnCloseLabelText: { classPropertyName: "btnCloseLabelText", publicName: "btnCloseLabelText", isSignal: true, isRequired: false, transformFunction: null }, btnPrimaryLabelText: { classPropertyName: "btnPrimaryLabelText", publicName: "btnPrimaryLabelText", isSignal: true, isRequired: false, transformFunction: null }, btnSecondaryLabelText: { classPropertyName: "btnSecondaryLabelText", publicName: "btnSecondaryLabelText", isSignal: true, isRequired: false, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, forceBodyScrollLock: { classPropertyName: "forceBodyScrollLock", publicName: "forceBodyScrollLock", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", btnPrimaryClickEvent: "btnPrimaryClickEvent", btnSecondaryClickEvent: "btnSecondaryClickEvent" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #dialog\n [id]=\"effectiveId()\"\n class=\"kern-dialog\"\n [attr.aria-describedby]=\"effectiveId() + '_heading'\"\n (cancel)=\"cancelEvent.emit($event)\"\n (close)=\"unlockBodyScroll()\"\n>\n <header class=\"kern-dialog__header\">\n <h2 kernTitle size=\"large\" id=\"{{ effectiveId() }}_heading\">{{ title() }}</h2>\n <kern-button variant=\"tertiary\" iconLeft=\"close\" [srOnlyLabel]=\"true\" (clickEvent)=\"dialog.close()\">\n {{ btnCloseLabelText() }}\n </kern-button>\n </header>\n <section class=\"kern-dialog__body\">\n <ng-content />\n </section>\n @if (btnPrimaryLabelText() || btnSecondaryLabelText()) {\n <footer class=\"kern-dialog__footer\">\n @if (btnSecondaryLabelText()) {\n <kern-button variant=\"secondary\" (clickEvent)=\"btnSecondaryClickEvent.emit($event)\">\n {{ btnSecondaryLabelText() }}\n </kern-button>\n }\n @if (btnPrimaryLabelText()) {\n <kern-button\n [type]=\"formId() ? 'submit' : 'button'\"\n [formId]=\"formId()\"\n (clickEvent)=\"btnPrimaryClickEvent.emit($event)\"\n >\n {{ btnPrimaryLabelText() }}\n </kern-button>\n }\n </footer>\n }\n</dialog>\n", dependencies: [{ kind: "component", type: KernButton, selector: "kern-button", inputs: ["variant", "block", "disabled", "type", "iconLeft", "iconRight", "srOnlyLabel", "formId", "routerLink", "routerQueryParams", "routerFragment", "routerState"], outputs: ["clickEvent"] }, { kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }] });
|
|
276
286
|
}
|
|
277
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernDialog, decorators: [{
|
|
278
288
|
type: Component,
|
|
279
289
|
args: [{ selector: 'kern-dialog', imports: [KernButton, KernTitle], template: "<dialog\n #dialog\n [id]=\"effectiveId()\"\n class=\"kern-dialog\"\n [attr.aria-describedby]=\"effectiveId() + '_heading'\"\n (cancel)=\"cancelEvent.emit($event)\"\n (close)=\"unlockBodyScroll()\"\n>\n <header class=\"kern-dialog__header\">\n <h2 kernTitle size=\"large\" id=\"{{ effectiveId() }}_heading\">{{ title() }}</h2>\n <kern-button variant=\"tertiary\" iconLeft=\"close\" [srOnlyLabel]=\"true\" (clickEvent)=\"dialog.close()\">\n {{ btnCloseLabelText() }}\n </kern-button>\n </header>\n <section class=\"kern-dialog__body\">\n <ng-content />\n </section>\n @if (btnPrimaryLabelText() || btnSecondaryLabelText()) {\n <footer class=\"kern-dialog__footer\">\n @if (btnSecondaryLabelText()) {\n <kern-button variant=\"secondary\" (clickEvent)=\"btnSecondaryClickEvent.emit($event)\">\n {{ btnSecondaryLabelText() }}\n </kern-button>\n }\n @if (btnPrimaryLabelText()) {\n <kern-button\n [type]=\"formId() ? 'submit' : 'button'\"\n [formId]=\"formId()\"\n (clickEvent)=\"btnPrimaryClickEvent.emit($event)\"\n >\n {{ btnPrimaryLabelText() }}\n </kern-button>\n }\n </footer>\n }\n</dialog>\n" }]
|
|
280
290
|
}], propDecorators: { dialogId: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], btnCloseLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnCloseLabelText", required: false }] }], btnPrimaryLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnPrimaryLabelText", required: false }] }], btnSecondaryLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnSecondaryLabelText", required: false }] }], formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], forceBodyScrollLock: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceBodyScrollLock", required: false }] }], cancelEvent: [{ type: i0.Output, args: ["cancelEvent"] }], btnPrimaryClickEvent: [{ type: i0.Output, args: ["btnPrimaryClickEvent"] }], btnSecondaryClickEvent: [{ type: i0.Output, args: ["btnSecondaryClickEvent"] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
|
|
281
291
|
|
|
282
292
|
class KernLoader {
|
|
283
293
|
text = input('Wird geladen...', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
284
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
285
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
294
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
295
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernLoader, isStandalone: true, selector: "kern-loader", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kern-loader kern-loader--visible\" role=\"status\">\n <span class=\"kern-sr-only\">{{ text() }}</span>\n</div>\n" });
|
|
286
296
|
}
|
|
287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernLoader, decorators: [{
|
|
288
298
|
type: Component,
|
|
289
299
|
args: [{ selector: 'kern-loader', template: "<div class=\"kern-loader kern-loader--visible\" role=\"status\">\n <span class=\"kern-sr-only\">{{ text() }}</span>\n</div>\n" }]
|
|
290
300
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
|
|
@@ -292,20 +302,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
292
302
|
class KernBadge {
|
|
293
303
|
variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
294
304
|
icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
305
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
306
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernBadge, isStandalone: true, selector: "kern-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"kern-badge kern-badge--{{ variant() }}\">\n @if (icon()) {\n <kern-icon [name]=\"icon()!\" />\n }\n <span kernLabel size=\"small\">\n <ng-content />\n </span>\n</span>\n", dependencies: [{ kind: "component", type: KernIcon, selector: "kern-icon", inputs: ["name", "ariaHidden", "size"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
|
|
297
307
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernBadge, decorators: [{
|
|
299
309
|
type: Component,
|
|
300
310
|
args: [{ selector: 'kern-badge', imports: [KernIcon, KernLabel], template: "<span class=\"kern-badge kern-badge--{{ variant() }}\">\n @if (icon()) {\n <kern-icon [name]=\"icon()!\" />\n }\n <span kernLabel size=\"small\">\n <ng-content />\n </span>\n</span>\n" }]
|
|
301
311
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
302
312
|
|
|
303
313
|
class KernPreline {
|
|
304
314
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
305
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
306
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
315
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernPreline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
316
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: KernPreline, isStandalone: true, selector: "h1[kernPreline], h2[kernPreline], h3[kernPreline], h4[kernPreline], h5[kernPreline], h6[kernPreline], span[kernPreline], p[kernPreline]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-preline--small": "size() === \"small\"", "class.kern-preline--large": "size() === \"large\"" }, classAttribute: "kern-preline" }, ngImport: i0 });
|
|
307
317
|
}
|
|
308
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernPreline, decorators: [{
|
|
309
319
|
type: Directive,
|
|
310
320
|
args: [{
|
|
311
321
|
host: {
|
|
@@ -320,10 +330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
320
330
|
|
|
321
331
|
class KernSubline {
|
|
322
332
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
323
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
324
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
333
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernSubline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
334
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: KernSubline, isStandalone: true, selector: "h1[kernSubline], h2[kernSubline], h3[kernSubline], h4[kernSubline], h5[kernSubline], h6[kernSubline], span[kernSubline], p[kernSubline]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-subline--small": "size() === \"small\"", "class.kern-subline--large": "size() === \"large\"" }, classAttribute: "kern-subline" }, ngImport: i0 });
|
|
325
335
|
}
|
|
326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernSubline, decorators: [{
|
|
327
337
|
type: Directive,
|
|
328
338
|
args: [{
|
|
329
339
|
host: {
|
|
@@ -359,20 +369,20 @@ class KernCard {
|
|
|
359
369
|
titleLinkClickEvent = output();
|
|
360
370
|
btnPrimaryClickEvent = output();
|
|
361
371
|
btnSecondaryClickEvent = output();
|
|
362
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
372
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernCard, isStandalone: true, selector: "kern-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLinkHref: { classPropertyName: "titleLinkHref", publicName: "titleLinkHref", isSignal: true, isRequired: false, transformFunction: null }, titleLinkTarget: { classPropertyName: "titleLinkTarget", publicName: "titleLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, preline: { classPropertyName: "preline", publicName: "preline", isSignal: true, isRequired: false, transformFunction: null }, subline: { classPropertyName: "subline", publicName: "subline", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, btnPrimaryLabelText: { classPropertyName: "btnPrimaryLabelText", publicName: "btnPrimaryLabelText", isSignal: true, isRequired: false, transformFunction: null }, btnPrimaryRouterLink: { classPropertyName: "btnPrimaryRouterLink", publicName: "btnPrimaryRouterLink", isSignal: true, isRequired: false, transformFunction: null }, btnPrimaryRouterQueryParams: { classPropertyName: "btnPrimaryRouterQueryParams", publicName: "btnPrimaryRouterQueryParams", isSignal: true, isRequired: false, transformFunction: null }, btnPrimaryRouterFragment: { classPropertyName: "btnPrimaryRouterFragment", publicName: "btnPrimaryRouterFragment", isSignal: true, isRequired: false, transformFunction: null }, btnPrimaryRouterState: { classPropertyName: "btnPrimaryRouterState", publicName: "btnPrimaryRouterState", isSignal: true, isRequired: false, transformFunction: null }, btnSecondaryLabelText: { classPropertyName: "btnSecondaryLabelText", publicName: "btnSecondaryLabelText", isSignal: true, isRequired: false, transformFunction: null }, btnSecondaryRouterLink: { classPropertyName: "btnSecondaryRouterLink", publicName: "btnSecondaryRouterLink", isSignal: true, isRequired: false, transformFunction: null }, btnSecondaryRouterQueryParams: { classPropertyName: "btnSecondaryRouterQueryParams", publicName: "btnSecondaryRouterQueryParams", isSignal: true, isRequired: false, transformFunction: null }, btnSecondaryRouterFragment: { classPropertyName: "btnSecondaryRouterFragment", publicName: "btnSecondaryRouterFragment", isSignal: true, isRequired: false, transformFunction: null }, btnSecondaryRouterState: { classPropertyName: "btnSecondaryRouterState", publicName: "btnSecondaryRouterState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { titleLinkClickEvent: "titleLinkClickEvent", btnPrimaryClickEvent: "btnPrimaryClickEvent", btnSecondaryClickEvent: "btnSecondaryClickEvent" }, ngImport: i0, template: "<article\n class=\"kern-card\"\n [class.kern-card--active]=\"title() && titleLinkHref()\"\n [class.kern-card--small]=\"size() === 'small'\"\n [class.kern-card--large]=\"size() === 'large'\"\n>\n @if (imgSrc()) {\n <div class=\"kern-card__media\">\n <img [src]=\"imgSrc()\" [attr.alt]=\"imgAlt()\" />\n </div>\n }\n <div class=\"kern-card__container\">\n @if (title() || preline() || subline()) {\n <header class=\"kern-card__header\">\n @if (preline()) {\n <p kernPreline>{{ preline() }}</p>\n }\n @if (title()) {\n <ng-template #headingContent>\n @if (titleLinkHref()) {\n <a\n [href]=\"titleLinkHref()\"\n class=\"kern-link--stretched\"\n [target]=\"titleLinkTarget()\"\n [attr.rel]=\"titleLinkTarget() === '_blank' ? 'noopener noreferrer' : null\"\n (click)=\"titleLinkClickEvent.emit($event)\"\n >\n {{ title() }}\n </a>\n } @else {\n {{ title() }}\n }\n </ng-template>\n\n @switch (headingLevel()) {\n @case ('1') {\n <h1 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h1>\n }\n @case ('2') {\n <h2 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h2>\n }\n @case ('3') {\n <h3 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h3>\n }\n @case ('4') {\n <h4 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h4>\n }\n @case ('5') {\n <h5 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h5>\n }\n }\n }\n @if (subline()) {\n @switch (headingLevel()) {\n @case ('1') {\n <h2 kernSubline>{{ subline() }}</h2>\n }\n @case ('2') {\n <h3 kernSubline>{{ subline() }}</h3>\n }\n @case ('3') {\n <h4 kernSubline>{{ subline() }}</h4>\n }\n @case ('4') {\n <h5 kernSubline>{{ subline() }}</h5>\n }\n @case ('5') {\n <h6 kernSubline>{{ subline() }}</h6>\n }\n }\n }\n </header>\n }\n <section class=\"kern-card__body\">\n <ng-content />\n </section>\n @if (btnPrimaryLabelText() || btnSecondaryLabelText()) {\n <footer class=\"kern-card__footer\">\n @if (btnPrimaryLabelText()) {\n <kern-button\n (clickEvent)=\"btnPrimaryClickEvent.emit($event)\"\n [routerLink]=\"btnPrimaryRouterLink()\"\n [routerQueryParams]=\"btnPrimaryRouterQueryParams()\"\n [routerFragment]=\"btnPrimaryRouterFragment()\"\n [routerState]=\"btnPrimaryRouterState()\"\n >\n {{ btnPrimaryLabelText() }}\n </kern-button>\n }\n @if (btnSecondaryLabelText()) {\n <kern-button\n variant=\"secondary\"\n (clickEvent)=\"btnSecondaryClickEvent.emit($event)\"\n [routerLink]=\"btnSecondaryRouterLink()\"\n [routerQueryParams]=\"btnSecondaryRouterQueryParams()\"\n [routerFragment]=\"btnSecondaryRouterFragment()\"\n [routerState]=\"btnSecondaryRouterState()\"\n >\n {{ btnSecondaryLabelText() }}\n </kern-button>\n }\n </footer>\n }\n </div>\n</article>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KernPreline, selector: "h1[kernPreline], h2[kernPreline], h3[kernPreline], h4[kernPreline], h5[kernPreline], h6[kernPreline], span[kernPreline], p[kernPreline]", inputs: ["size"] }, { kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }, { kind: "directive", type: KernSubline, selector: "h1[kernSubline], h2[kernSubline], h3[kernSubline], h4[kernSubline], h5[kernSubline], h6[kernSubline], span[kernSubline], p[kernSubline]", inputs: ["size"] }, { kind: "component", type: KernButton, selector: "kern-button", inputs: ["variant", "block", "disabled", "type", "iconLeft", "iconRight", "srOnlyLabel", "formId", "routerLink", "routerQueryParams", "routerFragment", "routerState"], outputs: ["clickEvent"] }] });
|
|
364
374
|
}
|
|
365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernCard, decorators: [{
|
|
366
376
|
type: Component,
|
|
367
377
|
args: [{ selector: 'kern-card', imports: [NgTemplateOutlet, KernPreline, KernTitle, KernSubline, KernButton], template: "<article\n class=\"kern-card\"\n [class.kern-card--active]=\"title() && titleLinkHref()\"\n [class.kern-card--small]=\"size() === 'small'\"\n [class.kern-card--large]=\"size() === 'large'\"\n>\n @if (imgSrc()) {\n <div class=\"kern-card__media\">\n <img [src]=\"imgSrc()\" [attr.alt]=\"imgAlt()\" />\n </div>\n }\n <div class=\"kern-card__container\">\n @if (title() || preline() || subline()) {\n <header class=\"kern-card__header\">\n @if (preline()) {\n <p kernPreline>{{ preline() }}</p>\n }\n @if (title()) {\n <ng-template #headingContent>\n @if (titleLinkHref()) {\n <a\n [href]=\"titleLinkHref()\"\n class=\"kern-link--stretched\"\n [target]=\"titleLinkTarget()\"\n [attr.rel]=\"titleLinkTarget() === '_blank' ? 'noopener noreferrer' : null\"\n (click)=\"titleLinkClickEvent.emit($event)\"\n >\n {{ title() }}\n </a>\n } @else {\n {{ title() }}\n }\n </ng-template>\n\n @switch (headingLevel()) {\n @case ('1') {\n <h1 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h1>\n }\n @case ('2') {\n <h2 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h2>\n }\n @case ('3') {\n <h3 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h3>\n }\n @case ('4') {\n <h4 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h4>\n }\n @case ('5') {\n <h5 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h5>\n }\n }\n }\n @if (subline()) {\n @switch (headingLevel()) {\n @case ('1') {\n <h2 kernSubline>{{ subline() }}</h2>\n }\n @case ('2') {\n <h3 kernSubline>{{ subline() }}</h3>\n }\n @case ('3') {\n <h4 kernSubline>{{ subline() }}</h4>\n }\n @case ('4') {\n <h5 kernSubline>{{ subline() }}</h5>\n }\n @case ('5') {\n <h6 kernSubline>{{ subline() }}</h6>\n }\n }\n }\n </header>\n }\n <section class=\"kern-card__body\">\n <ng-content />\n </section>\n @if (btnPrimaryLabelText() || btnSecondaryLabelText()) {\n <footer class=\"kern-card__footer\">\n @if (btnPrimaryLabelText()) {\n <kern-button\n (clickEvent)=\"btnPrimaryClickEvent.emit($event)\"\n [routerLink]=\"btnPrimaryRouterLink()\"\n [routerQueryParams]=\"btnPrimaryRouterQueryParams()\"\n [routerFragment]=\"btnPrimaryRouterFragment()\"\n [routerState]=\"btnPrimaryRouterState()\"\n >\n {{ btnPrimaryLabelText() }}\n </kern-button>\n }\n @if (btnSecondaryLabelText()) {\n <kern-button\n variant=\"secondary\"\n (clickEvent)=\"btnSecondaryClickEvent.emit($event)\"\n [routerLink]=\"btnSecondaryRouterLink()\"\n [routerQueryParams]=\"btnSecondaryRouterQueryParams()\"\n [routerFragment]=\"btnSecondaryRouterFragment()\"\n [routerState]=\"btnSecondaryRouterState()\"\n >\n {{ btnSecondaryLabelText() }}\n </kern-button>\n }\n </footer>\n }\n </div>\n</article>\n", styles: [":host{display:contents}\n"] }]
|
|
368
378
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleLinkHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLinkHref", required: false }] }], titleLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLinkTarget", required: false }] }], preline: [{ type: i0.Input, args: [{ isSignal: true, alias: "preline", required: false }] }], subline: [{ type: i0.Input, args: [{ isSignal: true, alias: "subline", required: false }] }], imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSrc", required: false }] }], imgAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgAlt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], btnPrimaryLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnPrimaryLabelText", required: false }] }], btnPrimaryRouterLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnPrimaryRouterLink", required: false }] }], btnPrimaryRouterQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnPrimaryRouterQueryParams", required: false }] }], btnPrimaryRouterFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnPrimaryRouterFragment", required: false }] }], btnPrimaryRouterState: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnPrimaryRouterState", required: false }] }], btnSecondaryLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnSecondaryLabelText", required: false }] }], btnSecondaryRouterLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnSecondaryRouterLink", required: false }] }], btnSecondaryRouterQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnSecondaryRouterQueryParams", required: false }] }], btnSecondaryRouterFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnSecondaryRouterFragment", required: false }] }], btnSecondaryRouterState: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnSecondaryRouterState", required: false }] }], titleLinkClickEvent: [{ type: i0.Output, args: ["titleLinkClickEvent"] }], btnPrimaryClickEvent: [{ type: i0.Output, args: ["btnPrimaryClickEvent"] }], btnSecondaryClickEvent: [{ type: i0.Output, args: ["btnSecondaryClickEvent"] }] } });
|
|
369
379
|
|
|
370
380
|
class KernDivider {
|
|
371
381
|
ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
|
|
372
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
373
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernDivider, isStandalone: true, selector: "kern-divider", inputs: { ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<hr class=\"kern-divider\" [attr.aria-hidden]=\"ariaHidden()\" />\n" });
|
|
374
384
|
}
|
|
375
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernDivider, decorators: [{
|
|
376
386
|
type: Component,
|
|
377
387
|
args: [{ selector: 'kern-divider', template: "<hr class=\"kern-divider\" [attr.aria-hidden]=\"ariaHidden()\" />\n" }]
|
|
378
388
|
}], propDecorators: { ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }] } });
|
|
@@ -401,10 +411,10 @@ class KernLink {
|
|
|
401
411
|
}
|
|
402
412
|
this.clickEvent.emit(event);
|
|
403
413
|
}
|
|
404
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
414
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernLink, isStandalone: true, selector: "kern-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerQueryParams: { classPropertyName: "routerQueryParams", publicName: "routerQueryParams", isSignal: true, isRequired: false, transformFunction: null }, routerFragment: { classPropertyName: "routerFragment", publicName: "routerFragment", isSignal: true, isRequired: false, transformFunction: null }, routerState: { classPropertyName: "routerState", publicName: "routerState", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, stretched: { classPropertyName: "stretched", publicName: "stretched", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, linkDescribedBy: { classPropertyName: "linkDescribedBy", publicName: "linkDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<a\n class=\"kern-link\"\n [class.kern-link--small]=\"small()\"\n [class.kern-link--stretched]=\"stretched()\"\n [href]=\"effectiveHref()\"\n [target]=\"target()\"\n [attr.rel]=\"target() === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-describedby]=\"linkDescribedBy() || null\"\n (click)=\"onClick($event)\"\n>\n @if (iconLeft()) {\n <kern-icon [name]=\"iconLeft()!\"></kern-icon>\n }\n <ng-content />\n @if (iconRight()) {\n <kern-icon [name]=\"iconRight()!\"></kern-icon>\n }\n</a>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: KernIcon, selector: "kern-icon", inputs: ["name", "ariaHidden", "size"] }] });
|
|
406
416
|
}
|
|
407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernLink, decorators: [{
|
|
408
418
|
type: Component,
|
|
409
419
|
args: [{ selector: 'kern-link', imports: [KernIcon], template: "<a\n class=\"kern-link\"\n [class.kern-link--small]=\"small()\"\n [class.kern-link--stretched]=\"stretched()\"\n [href]=\"effectiveHref()\"\n [target]=\"target()\"\n [attr.rel]=\"target() === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-describedby]=\"linkDescribedBy() || null\"\n (click)=\"onClick($event)\"\n>\n @if (iconLeft()) {\n <kern-icon [name]=\"iconLeft()!\"></kern-icon>\n }\n <ng-content />\n @if (iconRight()) {\n <kern-icon [name]=\"iconRight()!\"></kern-icon>\n }\n</a>\n", styles: [":host{display:contents}\n"] }]
|
|
410
420
|
}], propDecorators: { href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerQueryParams", required: false }] }], routerFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerFragment", required: false }] }], routerState: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerState", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], stretched: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretched", required: false }] }], iconLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeft", required: false }] }], iconRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRight", required: false }] }], linkDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkDescribedBy", required: false }] }], clickEvent: [{ type: i0.Output, args: ["clickEvent"] }] } });
|
|
@@ -417,20 +427,20 @@ class KernProgress {
|
|
|
417
427
|
labelPosition = input('top', ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
418
428
|
generatedId = inject(UniqueIdService).getUniqueId('progress');
|
|
419
429
|
effectiveId = computed(() => this.progressId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
420
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
421
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
430
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
431
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernProgress, isStandalone: true, selector: "kern-progress", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kern-progress" }, ngImport: i0, template: "@if (label() && labelPosition() === 'top') {\n <label kernLabel [for]=\"effectiveId()\">{{ label() }}</label>\n}\n<progress [value]=\"value()\" [max]=\"max()\" [id]=\"effectiveId()\"></progress>\n@if (label() && labelPosition() === 'bottom') {\n <label kernLabel [for]=\"effectiveId()\">{{ label() }}</label>\n}\n", dependencies: [{ kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
|
|
422
432
|
}
|
|
423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernProgress, decorators: [{
|
|
424
434
|
type: Component,
|
|
425
435
|
args: [{ selector: 'kern-progress', imports: [KernLabel], host: { class: 'kern-progress' }, template: "@if (label() && labelPosition() === 'top') {\n <label kernLabel [for]=\"effectiveId()\">{{ label() }}</label>\n}\n<progress [value]=\"value()\" [max]=\"max()\" [id]=\"effectiveId()\"></progress>\n@if (label() && labelPosition() === 'bottom') {\n <label kernLabel [for]=\"effectiveId()\">{{ label() }}</label>\n}\n" }]
|
|
426
436
|
}], propDecorators: { progressId: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
|
|
427
437
|
|
|
428
438
|
class KernContainer {
|
|
429
439
|
fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : /* istanbul ignore next */ []));
|
|
430
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
431
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernContainer, isStandalone: true, selector: "kern-container", inputs: { fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-container": "!fluid()", "class.kern-container-fluid": "fluid()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
|
|
432
442
|
}
|
|
433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
443
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernContainer, decorators: [{
|
|
434
444
|
type: Component,
|
|
435
445
|
args: [{ selector: 'kern-container', host: {
|
|
436
446
|
'[class.kern-container]': '!fluid()',
|
|
@@ -440,10 +450,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
440
450
|
|
|
441
451
|
class KernKopfzeile {
|
|
442
452
|
fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : /* istanbul ignore next */ []));
|
|
443
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
444
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
453
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernKopfzeile, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
454
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernKopfzeile, isStandalone: true, selector: "kern-kopfzeile", inputs: { fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kern-kopfzeile" }, ngImport: i0, template: "<kern-container [fluid]=\"fluid()\">\n <div class=\"kern-kopfzeile__content\">\n <span class=\"kern-kopfzeile__flagge\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 16\">\n <path fill=\"#000\" d=\"M0 .5h24v5.333H0z\" />\n <path fill=\"red\" d=\"M0 5.833h24v5.333H0z\" />\n <path fill=\"#FACA2C\" d=\"M0 11.167h24V16.5H0z\" />\n </svg>\n </span>\n <span class=\"kern-kopfzeile__label\" i18n=\"@@kernAngularKit.kopfzeile.label\">\n Offizielle Website \u2013 Bundesrepublik Deutschland\n </span>\n </div>\n</kern-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: KernContainer, selector: "kern-container", inputs: ["fluid"] }] });
|
|
445
455
|
}
|
|
446
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernKopfzeile, decorators: [{
|
|
447
457
|
type: Component,
|
|
448
458
|
args: [{ selector: 'kern-kopfzeile', imports: [KernContainer], host: { class: 'kern-kopfzeile' }, template: "<kern-container [fluid]=\"fluid()\">\n <div class=\"kern-kopfzeile__content\">\n <span class=\"kern-kopfzeile__flagge\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 16\">\n <path fill=\"#000\" d=\"M0 .5h24v5.333H0z\" />\n <path fill=\"red\" d=\"M0 5.833h24v5.333H0z\" />\n <path fill=\"#FACA2C\" d=\"M0 11.167h24V16.5H0z\" />\n </svg>\n </span>\n <span class=\"kern-kopfzeile__label\" i18n=\"@@kernAngularKit.kopfzeile.label\">\n Offizielle Website \u2013 Bundesrepublik Deutschland\n </span>\n </div>\n</kern-container>\n", styles: [":host{display:block}\n"] }]
|
|
449
459
|
}], propDecorators: { fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }] } });
|
|
@@ -504,10 +514,10 @@ class KernHeading {
|
|
|
504
514
|
};
|
|
505
515
|
return levelToSizeMap[level] || 'medium';
|
|
506
516
|
}
|
|
507
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
508
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
517
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
518
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernHeading, isStandalone: true, selector: "kern-heading", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:contents}\n"] });
|
|
509
519
|
}
|
|
510
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernHeading, decorators: [{
|
|
511
521
|
type: Component,
|
|
512
522
|
args: [{ selector: 'kern-heading', template: `<ng-content />`, styles: [":host{display:contents}\n"] }]
|
|
513
523
|
}], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
@@ -515,10 +525,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
515
525
|
class KernBody {
|
|
516
526
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
517
527
|
weight = input('default', ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
|
|
518
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
519
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
528
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
529
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: KernBody, isStandalone: true, selector: "p[kernBody], span[kernBody]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-body--small": "size() === \"small\"", "class.kern-body--large": "size() === \"large\"", "class.kern-body--bold": "weight() === \"bold\"", "class.kern-body--muted": "weight() === \"muted\"" }, classAttribute: "kern-body" }, ngImport: i0 });
|
|
520
530
|
}
|
|
521
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernBody, decorators: [{
|
|
522
532
|
type: Directive,
|
|
523
533
|
args: [{
|
|
524
534
|
host: {
|
|
@@ -536,10 +546,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
536
546
|
class KernList {
|
|
537
547
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
538
548
|
type = input('simple', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
539
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
540
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.
|
|
549
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
550
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: KernList, isStandalone: true, selector: "ul[kernList], ol[kernList]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-list--small": "size() === \"small\"", "class.kern-list--large": "size() === \"large\"", "class.kern-list--bullet": "type() === \"bullet\"", "class.kern-list--number": "type() === \"number\"" }, classAttribute: "kern-list" }, ngImport: i0 });
|
|
541
551
|
}
|
|
542
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernList, decorators: [{
|
|
543
553
|
type: Directive,
|
|
544
554
|
args: [{
|
|
545
555
|
host: {
|
|
@@ -580,8 +590,8 @@ class ControlValueAccessorDirective {
|
|
|
580
590
|
setDisabledState(isDisabled) {
|
|
581
591
|
this.disabled.set(isDisabled);
|
|
582
592
|
}
|
|
583
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
584
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.
|
|
593
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ControlValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
594
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: ControlValueAccessorDirective, isStandalone: true, selector: "[kernControlValueAccessor]", providers: [
|
|
585
595
|
{
|
|
586
596
|
provide: NG_VALUE_ACCESSOR,
|
|
587
597
|
useExisting: forwardRef(() => ControlValueAccessorDirective),
|
|
@@ -589,7 +599,7 @@ class ControlValueAccessorDirective {
|
|
|
589
599
|
}
|
|
590
600
|
], ngImport: i0 });
|
|
591
601
|
}
|
|
592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
|
|
593
603
|
type: Directive,
|
|
594
604
|
args: [{
|
|
595
605
|
selector: '[kernControlValueAccessor]',
|
|
@@ -616,10 +626,10 @@ class KernInputCheckbox {
|
|
|
616
626
|
const { checked } = event.target;
|
|
617
627
|
this.cva.changeValue(checked);
|
|
618
628
|
}
|
|
619
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
620
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
629
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
630
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputCheckbox, isStandalone: true, selector: "kern-input-checkbox", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelTemplate: { classPropertyName: "labelTemplate", publicName: "labelTemplate", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-check\">\n <input\n [id]=\"effectiveId()\"\n [name]=\"effectiveId()\"\n type=\"checkbox\"\n class=\"kern-form-check__checkbox\"\n [class.kern-form-check__checkbox--error]=\"error()\"\n [disabled]=\"cva.disabled()\"\n [checked]=\"cva.value()\"\n (change)=\"onChange($event)\"\n [attr.title]=\"titleText()\"\n [attr.aria-labelledby]=\"effectiveId() + '-label'\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n />\n\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\">\n @if (labelTemplate() !== null) {\n <ng-container [ngTemplateOutlet]=\"labelTemplate()\" />\n } @else {\n {{ labelText() ?? '' }}\n }\n </label>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
|
|
621
631
|
}
|
|
622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputCheckbox, decorators: [{
|
|
623
633
|
type: Component,
|
|
624
634
|
args: [{ selector: 'kern-input-checkbox', imports: [NgTemplateOutlet, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-check\">\n <input\n [id]=\"effectiveId()\"\n [name]=\"effectiveId()\"\n type=\"checkbox\"\n class=\"kern-form-check__checkbox\"\n [class.kern-form-check__checkbox--error]=\"error()\"\n [disabled]=\"cva.disabled()\"\n [checked]=\"cva.value()\"\n (change)=\"onChange($event)\"\n [attr.title]=\"titleText()\"\n [attr.aria-labelledby]=\"effectiveId() + '-label'\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n />\n\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\">\n @if (labelTemplate() !== null) {\n <ng-container [ngTemplateOutlet]=\"labelTemplate()\" />\n } @else {\n {{ labelText() ?? '' }}\n }\n </label>\n</div>\n" }]
|
|
625
635
|
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelTemplate", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }] } });
|
|
@@ -627,13 +637,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
627
637
|
class KernInputError {
|
|
628
638
|
effectiveId = input.required(...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
629
639
|
text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
630
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
631
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
640
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputError, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
641
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernInputError, isStandalone: true, selector: "kern-input-error", inputs: { effectiveId: { classPropertyName: "effectiveId", publicName: "effectiveId", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<p class="kern-error" [id]="effectiveId() + '-error'" role="alert">
|
|
632
642
|
<kern-icon name="danger" />
|
|
633
643
|
<span kernBody>{{ text() }}</span>
|
|
634
644
|
</p>`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: KernIcon, selector: "kern-icon", inputs: ["name", "ariaHidden", "size"] }, { kind: "directive", type: KernBody, selector: "p[kernBody], span[kernBody]", inputs: ["size", "weight"] }] });
|
|
635
645
|
}
|
|
636
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputError, decorators: [{
|
|
637
647
|
type: Component,
|
|
638
648
|
args: [{ selector: 'kern-input-error', imports: [KernIcon, KernBody], template: `<p class="kern-error" [id]="effectiveId() + '-error'" role="alert">
|
|
639
649
|
<kern-icon name="danger" />
|
|
@@ -648,30 +658,25 @@ class KernInputHint {
|
|
|
648
658
|
text: typeof value === 'string' ? value : ''
|
|
649
659
|
};
|
|
650
660
|
} });
|
|
651
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
652
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
661
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
662
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputHint, isStandalone: true, selector: "kern-input-hint", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "kern-hint" }, ngImport: i0, template: `@if (hint().template; as templateRef) {
|
|
653
663
|
<ng-container [ngTemplateOutlet]="templateRef" />
|
|
654
664
|
} @else {
|
|
655
665
|
{{ hint().text }}
|
|
656
|
-
}`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
666
|
+
}`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
657
667
|
}
|
|
658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
668
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputHint, decorators: [{
|
|
659
669
|
type: Component,
|
|
660
|
-
args: [{
|
|
661
|
-
selector: 'kern-input-hint',
|
|
662
|
-
imports: [NgTemplateOutlet],
|
|
663
|
-
host: { class: 'kern-hint' },
|
|
664
|
-
template: `@if (hint().template; as templateRef) {
|
|
670
|
+
args: [{ selector: 'kern-input-hint', imports: [NgTemplateOutlet], host: { class: 'kern-hint' }, template: `@if (hint().template; as templateRef) {
|
|
665
671
|
<ng-container [ngTemplateOutlet]="templateRef" />
|
|
666
672
|
} @else {
|
|
667
673
|
{{ hint().text }}
|
|
668
|
-
}
|
|
669
|
-
}]
|
|
674
|
+
}`, styles: [":host{display:block}\n"] }]
|
|
670
675
|
}], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: true }] }] } });
|
|
671
676
|
|
|
672
677
|
class KernFieldset {
|
|
673
678
|
fieldsetId = input(...(ngDevMode ? [undefined, { debugName: "fieldsetId" }] : /* istanbul ignore next */ []));
|
|
674
|
-
legendText = input
|
|
679
|
+
legendText = input(null, ...(ngDevMode ? [{ debugName: "legendText" }] : /* istanbul ignore next */ []));
|
|
675
680
|
legendSize = input('large', ...(ngDevMode ? [{ debugName: "legendSize" }] : /* istanbul ignore next */ []));
|
|
676
681
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
677
682
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
@@ -686,17 +691,17 @@ class KernFieldset {
|
|
|
686
691
|
? this.effectiveId() + '-hint'
|
|
687
692
|
: null;
|
|
688
693
|
}, ...(ngDevMode ? [{ debugName: "fieldsetDescribedBy" }] : /* istanbul ignore next */ []));
|
|
689
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
690
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
694
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
695
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernFieldset, isStandalone: true, selector: "kern-fieldset", inputs: { fieldsetId: { classPropertyName: "fieldsetId", publicName: "fieldsetId", isSignal: true, isRequired: false, transformFunction: null }, legendText: { classPropertyName: "legendText", publicName: "legendText", isSignal: true, isRequired: false, transformFunction: null }, legendSize: { classPropertyName: "legendSize", publicName: "legendSize", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<fieldset\n class=\"kern-fieldset\"\n [class.kern-fieldset--error]=\"errorText()\"\n [attr.aria-describedby]=\"fieldsetDescribedBy()\"\n [id]=\"effectiveId()\"\n>\n @if (legendText()) {\n <legend kernLabel [size]=\"legendSize()\" [optional]=\"optional()\">\n {{ legendText() }}\n </legend>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <div class=\"kern-fieldset__body\" [class.kern-fieldset__body--horizontal]=\"horizontalAlignment()\">\n <ng-content />\n </div>\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</fieldset>\n", dependencies: [{ kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }, { kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }] });
|
|
691
696
|
}
|
|
692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
697
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernFieldset, decorators: [{
|
|
693
698
|
type: Component,
|
|
694
|
-
args: [{ selector: 'kern-fieldset', imports: [KernLabel, KernInputError, KernInputHint], template: "<fieldset\n class=\"kern-fieldset\"\n [class.kern-fieldset--error]=\"errorText()\"\n [attr.aria-describedby]=\"fieldsetDescribedBy()\"\n [id]=\"effectiveId()\"\n>\n <legend kernLabel [size]=\"legendSize()\" [optional]=\"optional()\">\n
|
|
695
|
-
}], propDecorators: { fieldsetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsetId", required: false }] }], legendText: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendText", required:
|
|
699
|
+
args: [{ selector: 'kern-fieldset', imports: [KernLabel, KernInputError, KernInputHint], template: "<fieldset\n class=\"kern-fieldset\"\n [class.kern-fieldset--error]=\"errorText()\"\n [attr.aria-describedby]=\"fieldsetDescribedBy()\"\n [id]=\"effectiveId()\"\n>\n @if (legendText()) {\n <legend kernLabel [size]=\"legendSize()\" [optional]=\"optional()\">\n {{ legendText() }}\n </legend>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <div class=\"kern-fieldset__body\" [class.kern-fieldset__body--horizontal]=\"horizontalAlignment()\">\n <ng-content />\n </div>\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</fieldset>\n" }]
|
|
700
|
+
}], propDecorators: { fieldsetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsetId", required: false }] }], legendText: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendText", required: false }] }], legendSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendSize", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], horizontalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlignment", required: false }] }] } });
|
|
696
701
|
|
|
697
702
|
class KernInputDate {
|
|
698
703
|
fieldsetId = input(...(ngDevMode ? [undefined, { debugName: "fieldsetId" }] : /* istanbul ignore next */ []));
|
|
699
|
-
labelText = input
|
|
704
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
700
705
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
701
706
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
702
707
|
hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : /* istanbul ignore next */ []));
|
|
@@ -877,8 +882,8 @@ class KernInputDate {
|
|
|
877
882
|
}
|
|
878
883
|
}
|
|
879
884
|
}
|
|
880
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
881
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
885
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
886
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: KernInputDate, isStandalone: true, selector: "kern-input-date", inputs: { fieldsetId: { classPropertyName: "fieldsetId", publicName: "fieldsetId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
882
887
|
{
|
|
883
888
|
provide: NG_VALUE_ACCESSOR,
|
|
884
889
|
multi: true,
|
|
@@ -886,7 +891,7 @@ class KernInputDate {
|
|
|
886
891
|
}
|
|
887
892
|
], viewQueries: [{ propertyName: "dayInput", first: true, predicate: ["dayInput"], descendants: true, isSignal: true }, { propertyName: "monthInput", first: true, predicate: ["monthInput"], descendants: true, isSignal: true }, { propertyName: "yearInput", first: true, predicate: ["yearInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<kern-fieldset\n [fieldsetId]=\"effectiveId()\"\n [legendText]=\"labelText()\"\n legendSize=\"default\"\n [optional]=\"optional()\"\n [hintText]=\"hintText()\"\n [hintTemplate]=\"hintTemplate()\"\n [errorText]=\"errorText()\"\n [horizontalAlignment]=\"true\"\n>\n <div class=\"kern-form-input\">\n <label kernLabel [for]=\"effectiveId() + '-day'\" [id]=\"effectiveId() + '-day-label'\">\n <span i18n=\"@@kernAngularKit.inputDate.day\">Tag</span>\n </label>\n\n <input\n #dayInput\n [id]=\"effectiveId() + '-day'\"\n class=\"kern-form-input__input kern-form-input__input--width-2\"\n [class.kern-form-input__input--error]=\"errorText()\"\n type=\"text\"\n inputmode=\"numeric\"\n [readonly]=\"readonly()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n maxlength=\"2\"\n (input)=\"onInput($event, 'day')\"\n (paste)=\"onPaste($event)\"\n (change)=\"onInput($event, 'day')\"\n (keydown)=\"onKeydown($event, 'day')\"\n (blur)=\"onBlur($event, 'day')\"\n />\n </div>\n <div class=\"kern-form-input\">\n <label kernLabel [for]=\"effectiveId() + '-month'\" [id]=\"effectiveId() + '-month-label'\">\n <span i18n=\"@@kernAngularKit.inputDate.month\">Monat</span>\n </label>\n <input\n #monthInput\n [id]=\"effectiveId() + '-month'\"\n class=\"kern-form-input__input kern-form-input__input--width-2\"\n [class.kern-form-input__input--error]=\"errorText()\"\n type=\"text\"\n inputmode=\"numeric\"\n [readonly]=\"readonly()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n maxlength=\"2\"\n (input)=\"onInput($event, 'month')\"\n (paste)=\"onPaste($event)\"\n (change)=\"onInput($event, 'month')\"\n (keydown)=\"onKeydown($event, 'month')\"\n (blur)=\"onBlur($event, 'month')\"\n />\n </div>\n <div class=\"kern-form-input\">\n <label kernLabel [for]=\"effectiveId() + '-year'\" [id]=\"effectiveId() + '-year-label'\">\n <span i18n=\"@@kernAngularKit.inputDate.year\">Jahr</span>\n </label>\n <input\n #yearInput\n [id]=\"effectiveId() + '-year'\"\n class=\"kern-form-input__input kern-form-input__input--width-4\"\n [class.kern-form-input__input--error]=\"errorText()\"\n type=\"text\"\n inputmode=\"numeric\"\n [readonly]=\"readonly()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n maxlength=\"4\"\n (input)=\"onInput($event, 'year')\"\n (paste)=\"onPaste($event)\"\n (change)=\"onInput($event, 'year')\"\n (keydown)=\"onKeydown($event, 'year')\"\n (blur)=\"onBlur($event, 'year')\"\n />\n </div>\n</kern-fieldset>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }, { kind: "component", type: KernFieldset, selector: "kern-fieldset", inputs: ["fieldsetId", "legendText", "legendSize", "optional", "disabled", "hintTemplate", "hintText", "errorText", "horizontalAlignment"] }] });
|
|
888
893
|
}
|
|
889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
894
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputDate, decorators: [{
|
|
890
895
|
type: Component,
|
|
891
896
|
args: [{ selector: 'kern-input-date', imports: [FormsModule, KernLabel, KernFieldset], providers: [
|
|
892
897
|
{
|
|
@@ -895,12 +900,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
895
900
|
useExisting: forwardRef(() => KernInputDate)
|
|
896
901
|
}
|
|
897
902
|
], template: "<kern-fieldset\n [fieldsetId]=\"effectiveId()\"\n [legendText]=\"labelText()\"\n legendSize=\"default\"\n [optional]=\"optional()\"\n [hintText]=\"hintText()\"\n [hintTemplate]=\"hintTemplate()\"\n [errorText]=\"errorText()\"\n [horizontalAlignment]=\"true\"\n>\n <div class=\"kern-form-input\">\n <label kernLabel [for]=\"effectiveId() + '-day'\" [id]=\"effectiveId() + '-day-label'\">\n <span i18n=\"@@kernAngularKit.inputDate.day\">Tag</span>\n </label>\n\n <input\n #dayInput\n [id]=\"effectiveId() + '-day'\"\n class=\"kern-form-input__input kern-form-input__input--width-2\"\n [class.kern-form-input__input--error]=\"errorText()\"\n type=\"text\"\n inputmode=\"numeric\"\n [readonly]=\"readonly()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n maxlength=\"2\"\n (input)=\"onInput($event, 'day')\"\n (paste)=\"onPaste($event)\"\n (change)=\"onInput($event, 'day')\"\n (keydown)=\"onKeydown($event, 'day')\"\n (blur)=\"onBlur($event, 'day')\"\n />\n </div>\n <div class=\"kern-form-input\">\n <label kernLabel [for]=\"effectiveId() + '-month'\" [id]=\"effectiveId() + '-month-label'\">\n <span i18n=\"@@kernAngularKit.inputDate.month\">Monat</span>\n </label>\n <input\n #monthInput\n [id]=\"effectiveId() + '-month'\"\n class=\"kern-form-input__input kern-form-input__input--width-2\"\n [class.kern-form-input__input--error]=\"errorText()\"\n type=\"text\"\n inputmode=\"numeric\"\n [readonly]=\"readonly()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n maxlength=\"2\"\n (input)=\"onInput($event, 'month')\"\n (paste)=\"onPaste($event)\"\n (change)=\"onInput($event, 'month')\"\n (keydown)=\"onKeydown($event, 'month')\"\n (blur)=\"onBlur($event, 'month')\"\n />\n </div>\n <div class=\"kern-form-input\">\n <label kernLabel [for]=\"effectiveId() + '-year'\" [id]=\"effectiveId() + '-year-label'\">\n <span i18n=\"@@kernAngularKit.inputDate.year\">Jahr</span>\n </label>\n <input\n #yearInput\n [id]=\"effectiveId() + '-year'\"\n class=\"kern-form-input__input kern-form-input__input--width-4\"\n [class.kern-form-input__input--error]=\"errorText()\"\n type=\"text\"\n inputmode=\"numeric\"\n [readonly]=\"readonly()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n maxlength=\"4\"\n (input)=\"onInput($event, 'year')\"\n (paste)=\"onPaste($event)\"\n (change)=\"onInput($event, 'year')\"\n (keydown)=\"onKeydown($event, 'year')\"\n (blur)=\"onBlur($event, 'year')\"\n />\n </div>\n</kern-fieldset>\n" }]
|
|
898
|
-
}], propDecorators: { fieldsetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsetId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
903
|
+
}], propDecorators: { fieldsetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsetId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], dayInput: [{ type: i0.ViewChild, args: ['dayInput', { isSignal: true }] }], monthInput: [{ type: i0.ViewChild, args: ['monthInput', { isSignal: true }] }], yearInput: [{ type: i0.ViewChild, args: ['yearInput', { isSignal: true }] }] } });
|
|
899
904
|
|
|
900
905
|
class KernInputEmail {
|
|
901
906
|
cva = inject(ControlValueAccessorDirective);
|
|
902
907
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
903
|
-
labelText = input
|
|
908
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
904
909
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
905
910
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
906
911
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
@@ -934,18 +939,18 @@ class KernInputEmail {
|
|
|
934
939
|
this.cva.markTouched();
|
|
935
940
|
}
|
|
936
941
|
}
|
|
937
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
938
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
942
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputEmail, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
943
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputEmail, isStandalone: true, selector: "kern-input-email", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [for]=\"effectiveId()\" [id]=\"effectiveId() + '-label'\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"email\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n [value]=\"cva.value()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n autocomplete=\"email\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n />\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }] });
|
|
939
944
|
}
|
|
940
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
945
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputEmail, decorators: [{
|
|
941
946
|
type: Component,
|
|
942
|
-
args: [{ selector: 'kern-input-email', imports: [KernInputError, KernLabel, KernInputHint], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [for]=\"effectiveId()\" [id]=\"effectiveId() + '-label'\" [optional]=\"optional()\">\n
|
|
943
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
947
|
+
args: [{ selector: 'kern-input-email', imports: [KernInputError, KernLabel, KernInputHint], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [for]=\"effectiveId()\" [id]=\"effectiveId() + '-label'\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"email\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n [value]=\"cva.value()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n autocomplete=\"email\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n />\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
948
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
944
949
|
|
|
945
950
|
class KernInputFile {
|
|
946
|
-
cva = inject(ControlValueAccessorDirective);
|
|
951
|
+
cva = inject((ControlValueAccessorDirective));
|
|
947
952
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
948
|
-
labelText = input
|
|
953
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
949
954
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
950
955
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
951
956
|
hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : /* istanbul ignore next */ []));
|
|
@@ -953,7 +958,7 @@ class KernInputFile {
|
|
|
953
958
|
errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
954
959
|
accept = input(null, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
955
960
|
titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : /* istanbul ignore next */ []));
|
|
956
|
-
|
|
961
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
957
962
|
generatedId = inject(UniqueIdService).getUniqueId('input-file');
|
|
958
963
|
effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
|
|
959
964
|
inputDescribedBy = computed(() => {
|
|
@@ -969,24 +974,32 @@ class KernInputFile {
|
|
|
969
974
|
}, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : /* istanbul ignore next */ []));
|
|
970
975
|
fileInput = viewChild.required('fileInput');
|
|
971
976
|
get fileList() {
|
|
972
|
-
return this.fileInput().nativeElement
|
|
977
|
+
return this.fileInput().nativeElement.files;
|
|
978
|
+
}
|
|
979
|
+
get files() {
|
|
980
|
+
return Array.from(this.fileList ?? []);
|
|
981
|
+
}
|
|
982
|
+
clear() {
|
|
983
|
+
this.fileInput().nativeElement.value = '';
|
|
984
|
+
this.cva.changeValue(null);
|
|
973
985
|
}
|
|
974
986
|
onChange(event) {
|
|
975
|
-
const
|
|
976
|
-
|
|
987
|
+
const input = event.target;
|
|
988
|
+
const files = Array.from(input.files ?? []);
|
|
989
|
+
this.cva.changeValue(files.length ? files : null);
|
|
977
990
|
}
|
|
978
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
979
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
991
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
992
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputFile, isStandalone: true, selector: "kern-input-file", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [for]=\"effectiveId()\" [id]=\"effectiveId() + '-label'\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [id]=\"effectiveId()\"\n type=\"file\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n [disabled]=\"cva.disabled()\"\n (change)=\"onChange($event)\"\n (blur)=\"cva.markTouched()\"\n [required]=\"required()\"\n [multiple]=\"multiple()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.accept]=\"accept()\"\n #fileInput\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
|
|
980
993
|
}
|
|
981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputFile, decorators: [{
|
|
982
995
|
type: Component,
|
|
983
|
-
args: [{ selector: 'kern-input-file', imports: [FormsModule, KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [for]=\"effectiveId()\" [id]=\"effectiveId() + '-label'\" [optional]=\"optional()\">\n
|
|
984
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
996
|
+
args: [{ selector: 'kern-input-file', imports: [FormsModule, KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [for]=\"effectiveId()\" [id]=\"effectiveId() + '-label'\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [id]=\"effectiveId()\"\n type=\"file\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n [disabled]=\"cva.disabled()\"\n (change)=\"onChange($event)\"\n (blur)=\"cva.markTouched()\"\n [required]=\"required()\"\n [multiple]=\"multiple()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.accept]=\"accept()\"\n #fileInput\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
997
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
985
998
|
|
|
986
999
|
class KernInputNumber {
|
|
987
1000
|
cva = inject(ControlValueAccessorDirective);
|
|
988
1001
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
989
|
-
labelText = input
|
|
1002
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
990
1003
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
991
1004
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
992
1005
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
@@ -1023,18 +1036,18 @@ class KernInputNumber {
|
|
|
1023
1036
|
this.cva.markTouched();
|
|
1024
1037
|
}
|
|
1025
1038
|
}
|
|
1026
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1027
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1039
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1040
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputNumber, isStandalone: true, selector: "kern-input-number", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"number\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }] });
|
|
1028
1041
|
}
|
|
1029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1042
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputNumber, decorators: [{
|
|
1030
1043
|
type: Component,
|
|
1031
|
-
args: [{ selector: 'kern-input-number', imports: [KernInputError, KernLabel, KernInputHint], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n
|
|
1032
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
1044
|
+
args: [{ selector: 'kern-input-number', imports: [KernInputError, KernLabel, KernInputHint], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"number\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
1045
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
1033
1046
|
|
|
1034
1047
|
class KernInputPassword {
|
|
1035
1048
|
cva = inject(ControlValueAccessorDirective);
|
|
1036
1049
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1037
|
-
labelText = input
|
|
1050
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
1038
1051
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
1039
1052
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1040
1053
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
@@ -1068,18 +1081,18 @@ class KernInputPassword {
|
|
|
1068
1081
|
this.cva.markTouched();
|
|
1069
1082
|
}
|
|
1070
1083
|
}
|
|
1071
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1072
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1084
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputPassword, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1085
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputPassword, isStandalone: true, selector: "kern-input-password", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"password\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
|
|
1073
1086
|
}
|
|
1074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1087
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputPassword, decorators: [{
|
|
1075
1088
|
type: Component,
|
|
1076
|
-
args: [{ selector: 'kern-input-password', imports: [KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n
|
|
1077
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
1089
|
+
args: [{ selector: 'kern-input-password', imports: [KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"password\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
1090
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
1078
1091
|
|
|
1079
1092
|
class KernInputRadio {
|
|
1080
1093
|
cva = inject(ControlValueAccessorDirective);
|
|
1081
1094
|
fieldsetId = input(...(ngDevMode ? [undefined, { debugName: "fieldsetId" }] : /* istanbul ignore next */ []));
|
|
1082
|
-
labelText = input
|
|
1095
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
1083
1096
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
1084
1097
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1085
1098
|
hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : /* istanbul ignore next */ []));
|
|
@@ -1097,18 +1110,18 @@ class KernInputRadio {
|
|
|
1097
1110
|
this.cva.markTouched();
|
|
1098
1111
|
}
|
|
1099
1112
|
}
|
|
1100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1113
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1114
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputRadio, isStandalone: true, selector: "kern-input-radio", inputs: { fieldsetId: { classPropertyName: "fieldsetId", publicName: "fieldsetId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlignment: { classPropertyName: "horizontalAlignment", publicName: "horizontalAlignment", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<kern-fieldset\n [fieldsetId]=\"effectiveId()\"\n [legendText]=\"labelText()\"\n legendSize=\"default\"\n [optional]=\"optional()\"\n [hintText]=\"hintText()\"\n [hintTemplate]=\"hintTemplate()\"\n [errorText]=\"errorText()\"\n [horizontalAlignment]=\"horizontalAlignment()\"\n>\n @for (option of options(); track option.value) {\n <div class=\"kern-form-check\">\n <input\n [attr.title]=\"titleText()\"\n type=\"radio\"\n [id]=\"effectiveId() + '_' + option.value\"\n class=\"kern-form-check__radio\"\n [class.kern-form-check__radio--error]=\"errorText()\"\n [checked]=\"cva.value() === option.value\"\n [disabled]=\"cva.disabled()\"\n (change)=\"cva.changeValue(option.value)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [name]=\"effectiveId()\"\n [required]=\"required()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n />\n <label\n class=\"kern-label\"\n [for]=\"effectiveId() + '_' + option.value\"\n [id]=\"effectiveId() + '_' + option.value + '-label'\"\n >\n {{ option.label }}\n </label>\n </div>\n }\n</kern-fieldset>\n", dependencies: [{ kind: "component", type: KernFieldset, selector: "kern-fieldset", inputs: ["fieldsetId", "legendText", "legendSize", "optional", "disabled", "hintTemplate", "hintText", "errorText", "horizontalAlignment"] }] });
|
|
1102
1115
|
}
|
|
1103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputRadio, decorators: [{
|
|
1104
1117
|
type: Component,
|
|
1105
1118
|
args: [{ selector: 'kern-input-radio', imports: [KernFieldset], hostDirectives: [ControlValueAccessorDirective], template: "<kern-fieldset\n [fieldsetId]=\"effectiveId()\"\n [legendText]=\"labelText()\"\n legendSize=\"default\"\n [optional]=\"optional()\"\n [hintText]=\"hintText()\"\n [hintTemplate]=\"hintTemplate()\"\n [errorText]=\"errorText()\"\n [horizontalAlignment]=\"horizontalAlignment()\"\n>\n @for (option of options(); track option.value) {\n <div class=\"kern-form-check\">\n <input\n [attr.title]=\"titleText()\"\n type=\"radio\"\n [id]=\"effectiveId() + '_' + option.value\"\n class=\"kern-form-check__radio\"\n [class.kern-form-check__radio--error]=\"errorText()\"\n [checked]=\"cva.value() === option.value\"\n [disabled]=\"cva.disabled()\"\n (change)=\"cva.changeValue(option.value)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [name]=\"effectiveId()\"\n [required]=\"required()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n />\n <label\n class=\"kern-label\"\n [for]=\"effectiveId() + '_' + option.value\"\n [id]=\"effectiveId() + '_' + option.value + '-label'\"\n >\n {{ option.label }}\n </label>\n </div>\n }\n</kern-fieldset>\n" }]
|
|
1106
|
-
}], propDecorators: { fieldsetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsetId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
1119
|
+
}], propDecorators: { fieldsetId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldsetId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], horizontalAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlignment", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
|
|
1107
1120
|
|
|
1108
1121
|
class KernInputSelect {
|
|
1109
1122
|
cva = inject(ControlValueAccessorDirective);
|
|
1110
1123
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1111
|
-
labelText = input
|
|
1124
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
1112
1125
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
1113
1126
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1114
1127
|
hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : /* istanbul ignore next */ []));
|
|
@@ -1141,18 +1154,18 @@ class KernInputSelect {
|
|
|
1141
1154
|
this.cva.markTouched();
|
|
1142
1155
|
}
|
|
1143
1156
|
}
|
|
1144
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1145
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1157
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputSelect, isStandalone: true, selector: "kern-input-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, emptyPlaceholder: { classPropertyName: "emptyPlaceholder", publicName: "emptyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <div class=\"kern-form-input__select-wrapper\">\n <select\n [id]=\"effectiveId()\"\n class=\"kern-form-input__select\"\n [class.kern-form-input__select--error]=\"errorText()\"\n (change)=\"onChange($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [required]=\"required()\"\n [disabled]=\"cva.disabled()\"\n [attr.title]=\"titleText()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.aria-label]=\"labelText()\"\n >\n <option value=\"\" disabled hidden [selected]=\"!cva.value()\">{{ emptyPlaceholder() }}</option>\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [selected]=\"option.value === cva.value()\">{{ option.label }}</option>\n }\n </select>\n </div>\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
|
|
1146
1159
|
}
|
|
1147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputSelect, decorators: [{
|
|
1148
1161
|
type: Component,
|
|
1149
|
-
args: [{ selector: 'kern-input-select', imports: [KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n
|
|
1150
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
1162
|
+
args: [{ selector: 'kern-input-select', imports: [KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <div class=\"kern-form-input__select-wrapper\">\n <select\n [id]=\"effectiveId()\"\n class=\"kern-form-input__select\"\n [class.kern-form-input__select--error]=\"errorText()\"\n (change)=\"onChange($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [required]=\"required()\"\n [disabled]=\"cva.disabled()\"\n [attr.title]=\"titleText()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.aria-label]=\"labelText()\"\n >\n <option value=\"\" disabled hidden [selected]=\"!cva.value()\">{{ emptyPlaceholder() }}</option>\n @for (option of options(); track option.value) {\n <option [value]=\"option.value\" [selected]=\"option.value === cva.value()\">{{ option.label }}</option>\n }\n </select>\n </div>\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
1163
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], emptyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
|
|
1151
1164
|
|
|
1152
1165
|
class KernInputTel {
|
|
1153
1166
|
cva = inject(ControlValueAccessorDirective);
|
|
1154
1167
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1155
|
-
labelText = input
|
|
1168
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
1156
1169
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
1157
1170
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1158
1171
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
@@ -1186,18 +1199,18 @@ class KernInputTel {
|
|
|
1186
1199
|
this.cva.markTouched();
|
|
1187
1200
|
}
|
|
1188
1201
|
}
|
|
1189
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1190
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1202
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputTel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1203
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputTel, isStandalone: true, selector: "kern-input-tel", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"tel\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n autocomplete=\"tel\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }] });
|
|
1191
1204
|
}
|
|
1192
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1205
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputTel, decorators: [{
|
|
1193
1206
|
type: Component,
|
|
1194
|
-
args: [{ selector: 'kern-input-tel', imports: [KernInputError, KernLabel, KernInputHint], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n
|
|
1195
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
1207
|
+
args: [{ selector: 'kern-input-tel', imports: [KernInputError, KernLabel, KernInputHint], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"tel\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n autocomplete=\"tel\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
1208
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
1196
1209
|
|
|
1197
1210
|
class KernInputText {
|
|
1198
1211
|
cva = inject(ControlValueAccessorDirective);
|
|
1199
1212
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1200
|
-
labelText = input
|
|
1213
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
1201
1214
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
1202
1215
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1203
1216
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
@@ -1233,18 +1246,18 @@ class KernInputText {
|
|
|
1233
1246
|
this.cva.markTouched();
|
|
1234
1247
|
}
|
|
1235
1248
|
}
|
|
1236
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1237
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputText, isStandalone: true, selector: "kern-input-text", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"text\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n [value]=\"cva.value()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.inputmode]=\"inputmode()\"\n [attr.maxlength]=\"maxlength()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1238
1251
|
}
|
|
1239
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputText, decorators: [{
|
|
1240
1253
|
type: Component,
|
|
1241
|
-
args: [{ selector: 'kern-input-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n
|
|
1242
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
1254
|
+
args: [{ selector: 'kern-input-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"text\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n [value]=\"cva.value()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.inputmode]=\"inputmode()\"\n [attr.maxlength]=\"maxlength()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
1255
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
1243
1256
|
|
|
1244
1257
|
class KernInputTextarea {
|
|
1245
1258
|
cva = inject(ControlValueAccessorDirective);
|
|
1246
1259
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1247
|
-
labelText = input
|
|
1260
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
1248
1261
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
1249
1262
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1250
1263
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
@@ -1271,18 +1284,18 @@ class KernInputTextarea {
|
|
|
1271
1284
|
const { value } = event.target;
|
|
1272
1285
|
this.cva.changeValue(value);
|
|
1273
1286
|
}
|
|
1274
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1287
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1288
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputTextarea, isStandalone: true, selector: "kern-input-textarea", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <textarea\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n ></textarea>\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1276
1289
|
}
|
|
1277
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputTextarea, decorators: [{
|
|
1278
1291
|
type: Component,
|
|
1279
|
-
args: [{ selector: 'kern-input-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KernInputError, KernLabel, KernInputHint], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n
|
|
1280
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
1292
|
+
args: [{ selector: 'kern-input-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KernInputError, KernLabel, KernInputHint], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <textarea\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n ></textarea>\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
1293
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
1281
1294
|
|
|
1282
1295
|
class KernInputUrl {
|
|
1283
1296
|
cva = inject(ControlValueAccessorDirective);
|
|
1284
1297
|
inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1285
|
-
labelText = input
|
|
1298
|
+
labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
1286
1299
|
optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
1287
1300
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1288
1301
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
@@ -1316,13 +1329,13 @@ class KernInputUrl {
|
|
|
1316
1329
|
this.cva.markTouched();
|
|
1317
1330
|
}
|
|
1318
1331
|
}
|
|
1319
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1320
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1332
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputUrl, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernInputUrl, isStandalone: true, selector: "kern-input-url", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, hintTemplate: { classPropertyName: "hintTemplate", publicName: "hintTemplate", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: ControlValueAccessorDirective }], ngImport: i0, template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"url\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n", dependencies: [{ kind: "component", type: KernInputError, selector: "kern-input-error", inputs: ["effectiveId", "text"] }, { kind: "component", type: KernInputHint, selector: "kern-input-hint", inputs: ["hint"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1321
1334
|
}
|
|
1322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernInputUrl, decorators: [{
|
|
1323
1336
|
type: Component,
|
|
1324
|
-
args: [{ selector: 'kern-input-url', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n
|
|
1325
|
-
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required:
|
|
1337
|
+
args: [{ selector: 'kern-input-url', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KernInputError, KernInputHint, KernLabel], hostDirectives: [ControlValueAccessorDirective], template: "<div class=\"kern-form-input\" [class.kern-form-input--error]=\"errorText()\">\n @if (labelText()) {\n <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\n }\n\n @if (hintTemplate() || hintText(); as hint) {\n <kern-input-hint [hint]=\"hint\" />\n }\n\n <input\n [attr.title]=\"titleText()\"\n [attr.placeholder]=\"placeholder()\"\n [id]=\"effectiveId()\"\n type=\"url\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [disabled]=\"cva.disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\n [attr.aria-describedby]=\"inputDescribedBy()\"\n [attr.aria-required]=\"required() ? 'true' : null\"\n [attr.aria-invalid]=\"errorText() ? 'true' : null\"\n [attr.aria-errormessage]=\"errorText() ? effectiveId() + '-error' : null\"\n [attr.maxlength]=\"maxlength()\"\n />\n\n @if (errorText(); as errorText) {\n <kern-input-error [effectiveId]=\"effectiveId()\" [text]=\"errorText\" />\n }\n</div>\n" }]
|
|
1338
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], hintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintTemplate", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
|
|
1326
1339
|
|
|
1327
1340
|
class KernTable {
|
|
1328
1341
|
responsive = input(true, ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
|
|
@@ -1336,10 +1349,10 @@ class KernTable {
|
|
|
1336
1349
|
getCellText(row, key) {
|
|
1337
1350
|
return row[key] ?? '';
|
|
1338
1351
|
}
|
|
1339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1352
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1353
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernTable, isStandalone: true, selector: "kern-table", inputs: { responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, rowHeaderKey: { classPropertyName: "rowHeaderKey", publicName: "rowHeaderKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-table-responsive": "responsive()", "attr.tabindex": "responsive() ? 0 : null" } }, ngImport: i0, template: "<table class=\"kern-table\" [class.kern-table--small]=\"small()\" [class.kern-table--striped]=\"striped()\">\n @if (caption()) {\n <caption kernTitle>\n {{\n caption()\n }}\n </caption>\n }\n\n <thead class=\"kern-table__head\">\n <tr class=\"kern-table__row\">\n @for (col of columns(); track col.key) {\n <th scope=\"col\" class=\"kern-table__header\" [class.kern-table__header--numeric]=\"col.numeric\">\n {{ col.header }}\n </th>\n }\n </tr>\n </thead>\n\n <tbody class=\"kern-table__body\">\n @for (row of data(); track $index) {\n <tr class=\"kern-table__row\">\n @for (col of columns(); track col.key) {\n @if (rowHeaderKey() && rowHeaderKey() === col.key) {\n <th scope=\"row\" class=\"kern-table__header\" [class.kern-table__header--numeric]=\"col.numeric\">\n {{ getCellText(row, col.key) }}\n </th>\n } @else {\n <td class=\"kern-table__cell\" [class.kern-table__cell--numeric]=\"col.numeric\">\n {{ getCellText(row, col.key) }}\n </td>\n }\n }\n </tr>\n }\n </tbody>\n\n @if (footer()?.length) {\n <tfoot class=\"kern-table__footer\">\n @for (frow of footer()!; track $index) {\n <tr class=\"kern-table__row\">\n @for (col of columns(); track col.key) {\n <th scope=\"col\" class=\"kern-table__header\" [class.kern-table__header--numeric]=\"col.numeric\">\n {{ getCellText(frow, col.key) }}\n </th>\n }\n </tr>\n }\n </tfoot>\n }\n</table>\n", dependencies: [{ kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }] });
|
|
1341
1354
|
}
|
|
1342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernTable, decorators: [{
|
|
1343
1356
|
type: Component,
|
|
1344
1357
|
args: [{ selector: 'kern-table', imports: [KernTitle], host: {
|
|
1345
1358
|
'[class.kern-table-responsive]': 'responsive()',
|
|
@@ -1350,10 +1363,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
1350
1363
|
class KernDescriptionList {
|
|
1351
1364
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
1352
1365
|
column = input(false, ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
|
|
1353
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1354
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1366
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernDescriptionList, isStandalone: true, selector: "kern-description-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dl class=\"kern-description-list\" [class.kern-description-list--col]=\"column()\">\n @for (item of items(); track item.term) {\n <div class=\"kern-description-list-item\">\n <dt class=\"kern-description-list-item__key\">{{ item.term }}</dt>\n <dd class=\"kern-description-list-item__value\">{{ item.description }}</dd>\n </div>\n }\n</dl>\n" });
|
|
1355
1368
|
}
|
|
1356
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernDescriptionList, decorators: [{
|
|
1357
1370
|
type: Component,
|
|
1358
1371
|
args: [{ selector: 'kern-description-list', template: "<dl class=\"kern-description-list\" [class.kern-description-list--col]=\"column()\">\n @for (item of items(); track item.term) {\n <div class=\"kern-description-list-item\">\n <dt class=\"kern-description-list-item__key\">{{ item.term }}</dt>\n <dd class=\"kern-description-list-item__value\">{{ item.description }}</dd>\n </div>\n }\n</dl>\n" }]
|
|
1359
1372
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }] } });
|
|
@@ -1366,10 +1379,10 @@ class KernTasklist {
|
|
|
1366
1379
|
getGeneratedStatusId(taskIndex, itemIndex) {
|
|
1367
1380
|
return (this.generatedId + '_' + taskIndex.toString() + '_' + itemIndex.toString());
|
|
1368
1381
|
}
|
|
1369
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1370
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernTasklist, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernTasklist, isStandalone: true, selector: "kern-tasklist", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, linkTarget: { classPropertyName: "linkTarget", publicName: "linkTarget", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kern-task-list" }, ngImport: i0, template: "@for (task of tasks(); track $index) {\n @let taskIndex = $index;\n\n <div class=\"kern-task-list__header\">\n <kern-heading size=\"medium\" [level]=\"headingLevel()\">{{ task.heading }}</kern-heading>\n </div>\n\n <ul class=\"kern-task-list__list\">\n @for (item of task.items; track $index) {\n @let statusId = item.statusId ?? getGeneratedStatusId(taskIndex, $index);\n\n <li class=\"kern-task-list__item\">\n @if (item.number) {\n <span class=\"kern-number\">{{ item.number }}</span>\n }\n <div class=\"kern-task-list__title\">\n @if (item.linkHref || item.routerLink) {\n <kern-link\n [href]=\"item.linkHref || null\"\n [routerLink]=\"item.routerLink || null\"\n [routerQueryParams]=\"item.routerQueryParams ?? null\"\n [routerFragment]=\"item.routerFragment || null\"\n [routerState]=\"item.routerState ?? null\"\n [stretched]=\"true\"\n [target]=\"linkTarget()\"\n [linkDescribedBy]=\"item.status && item.status !== 'new' ? statusId : null\"\n >\n {{ item.task }}\n </kern-link>\n } @else {\n <p kernBody>{{ item.task }}</p>\n }\n\n @if (item.status && item.status !== 'new') {\n <div class=\"kern-task-list__status\" [id]=\"statusId\">\n @switch (item.status) {\n @case ('incomplete') {\n <kern-badge variant=\"warning\" i18n=\"@@kernAngularKit.tasklist.status.incomplete\">\n Unvollst\u00E4ndig\n </kern-badge>\n }\n @case ('completed') {\n <kern-badge variant=\"success\" icon=\"success\" i18n=\"@@kernAngularKit.tasklist.status.completed\">\n Erledigt\n </kern-badge>\n }\n @case ('unavailable') {\n <kern-badge variant=\"info\" i18n=\"@@kernAngularKit.tasklist.status.unavailable\">\n Noch nicht zu bearbeiten\n </kern-badge>\n }\n }\n </div>\n }\n </div>\n </li>\n }\n </ul>\n}\n", dependencies: [{ kind: "component", type: KernHeading, selector: "kern-heading", inputs: ["level", "size"] }, { kind: "component", type: KernLink, selector: "kern-link", inputs: ["href", "target", "routerLink", "routerQueryParams", "routerFragment", "routerState", "small", "stretched", "iconLeft", "iconRight", "linkDescribedBy"], outputs: ["clickEvent"] }, { kind: "directive", type: KernBody, selector: "p[kernBody], span[kernBody]", inputs: ["size", "weight"] }, { kind: "component", type: KernBadge, selector: "kern-badge", inputs: ["variant", "icon"] }] });
|
|
1371
1384
|
}
|
|
1372
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernTasklist, decorators: [{
|
|
1373
1386
|
type: Component,
|
|
1374
1387
|
args: [{ selector: 'kern-tasklist', imports: [KernHeading, KernLink, KernBody, KernBadge], host: { class: 'kern-task-list' }, template: "@for (task of tasks(); track $index) {\n @let taskIndex = $index;\n\n <div class=\"kern-task-list__header\">\n <kern-heading size=\"medium\" [level]=\"headingLevel()\">{{ task.heading }}</kern-heading>\n </div>\n\n <ul class=\"kern-task-list__list\">\n @for (item of task.items; track $index) {\n @let statusId = item.statusId ?? getGeneratedStatusId(taskIndex, $index);\n\n <li class=\"kern-task-list__item\">\n @if (item.number) {\n <span class=\"kern-number\">{{ item.number }}</span>\n }\n <div class=\"kern-task-list__title\">\n @if (item.linkHref || item.routerLink) {\n <kern-link\n [href]=\"item.linkHref || null\"\n [routerLink]=\"item.routerLink || null\"\n [routerQueryParams]=\"item.routerQueryParams ?? null\"\n [routerFragment]=\"item.routerFragment || null\"\n [routerState]=\"item.routerState ?? null\"\n [stretched]=\"true\"\n [target]=\"linkTarget()\"\n [linkDescribedBy]=\"item.status && item.status !== 'new' ? statusId : null\"\n >\n {{ item.task }}\n </kern-link>\n } @else {\n <p kernBody>{{ item.task }}</p>\n }\n\n @if (item.status && item.status !== 'new') {\n <div class=\"kern-task-list__status\" [id]=\"statusId\">\n @switch (item.status) {\n @case ('incomplete') {\n <kern-badge variant=\"warning\" i18n=\"@@kernAngularKit.tasklist.status.incomplete\">\n Unvollst\u00E4ndig\n </kern-badge>\n }\n @case ('completed') {\n <kern-badge variant=\"success\" icon=\"success\" i18n=\"@@kernAngularKit.tasklist.status.completed\">\n Erledigt\n </kern-badge>\n }\n @case ('unavailable') {\n <kern-badge variant=\"info\" i18n=\"@@kernAngularKit.tasklist.status.unavailable\">\n Noch nicht zu bearbeiten\n </kern-badge>\n }\n }\n </div>\n }\n </div>\n </li>\n }\n </ul>\n}\n" }]
|
|
1375
1388
|
}], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: true }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], linkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkTarget", required: false }] }] } });
|
|
@@ -1389,10 +1402,10 @@ class KernSummary {
|
|
|
1389
1402
|
actionLinkClickEvent = output();
|
|
1390
1403
|
generatedTitleId = inject(UniqueIdService).getUniqueId('title');
|
|
1391
1404
|
effectiveTitleId = computed(() => this.titleId() ?? this.generatedTitleId, ...(ngDevMode ? [{ debugName: "effectiveTitleId" }] : /* istanbul ignore next */ []));
|
|
1392
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1393
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1405
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1406
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernSummary, isStandalone: true, selector: "kern-summary", inputs: { titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleNumber: { classPropertyName: "titleNumber", publicName: "titleNumber", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, actionLinkHref: { classPropertyName: "actionLinkHref", publicName: "actionLinkHref", isSignal: true, isRequired: false, transformFunction: null }, actionLinkTarget: { classPropertyName: "actionLinkTarget", publicName: "actionLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, actionLinkRouterLink: { classPropertyName: "actionLinkRouterLink", publicName: "actionLinkRouterLink", isSignal: true, isRequired: false, transformFunction: null }, actionLinkRouterQueryParams: { classPropertyName: "actionLinkRouterQueryParams", publicName: "actionLinkRouterQueryParams", isSignal: true, isRequired: false, transformFunction: null }, actionLinkRouterFragment: { classPropertyName: "actionLinkRouterFragment", publicName: "actionLinkRouterFragment", isSignal: true, isRequired: false, transformFunction: null }, actionLinkRouterState: { classPropertyName: "actionLinkRouterState", publicName: "actionLinkRouterState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionLinkClickEvent: "actionLinkClickEvent" }, host: { classAttribute: "kern-summary" }, ngImport: i0, template: "@if (titleNumber() || title()) {\n <div class=\"kern-summary__header\">\n @if (titleNumber()) {\n <span class=\"kern-number\">{{ titleNumber() }}</span>\n }\n @if (title()) {\n @switch (headingLevel()) {\n @case ('1') {\n <h1 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h1>\n }\n @case ('2') {\n <h2 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h2>\n }\n @case ('3') {\n <h3 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h3>\n }\n @case ('4') {\n <h4 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h4>\n }\n @case ('5') {\n <h5 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h5>\n }\n @case ('6') {\n <h6 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h6>\n }\n }\n }\n </div>\n}\n\n<div class=\"kern-summary__body\">\n <kern-description-list [items]=\"items()\" />\n @if (actionLinkHref()) {\n <div class=\"kern-summary__actions\">\n <kern-link\n [href]=\"actionLinkHref()\"\n [target]=\"actionLinkTarget()\"\n iconLeft=\"edit\"\n [linkDescribedBy]=\"title() ? effectiveTitleId() : null\"\n [routerLink]=\"actionLinkRouterLink()\"\n [routerQueryParams]=\"actionLinkRouterQueryParams()\"\n [routerFragment]=\"actionLinkRouterFragment()\"\n [routerState]=\"actionLinkRouterState()\"\n (clickEvent)=\"actionLinkClickEvent.emit($event)\"\n >\n <span i18n=\"@@kernAngularKit.summary.actionLink\">Bearbeiten</span>\n </kern-link>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: KernLink, selector: "kern-link", inputs: ["href", "target", "routerLink", "routerQueryParams", "routerFragment", "routerState", "small", "stretched", "iconLeft", "iconRight", "linkDescribedBy"], outputs: ["clickEvent"] }, { kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }, { kind: "component", type: KernDescriptionList, selector: "kern-description-list", inputs: ["items", "column"] }] });
|
|
1394
1407
|
}
|
|
1395
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernSummary, decorators: [{
|
|
1396
1409
|
type: Component,
|
|
1397
1410
|
args: [{ selector: 'kern-summary', imports: [KernLink, KernTitle, KernDescriptionList], host: { class: 'kern-summary' }, template: "@if (titleNumber() || title()) {\n <div class=\"kern-summary__header\">\n @if (titleNumber()) {\n <span class=\"kern-number\">{{ titleNumber() }}</span>\n }\n @if (title()) {\n @switch (headingLevel()) {\n @case ('1') {\n <h1 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h1>\n }\n @case ('2') {\n <h2 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h2>\n }\n @case ('3') {\n <h3 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h3>\n }\n @case ('4') {\n <h4 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h4>\n }\n @case ('5') {\n <h5 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h5>\n }\n @case ('6') {\n <h6 kernTitle size=\"small\" [id]=\"effectiveTitleId()\">{{ title() }}</h6>\n }\n }\n }\n </div>\n}\n\n<div class=\"kern-summary__body\">\n <kern-description-list [items]=\"items()\" />\n @if (actionLinkHref()) {\n <div class=\"kern-summary__actions\">\n <kern-link\n [href]=\"actionLinkHref()\"\n [target]=\"actionLinkTarget()\"\n iconLeft=\"edit\"\n [linkDescribedBy]=\"title() ? effectiveTitleId() : null\"\n [routerLink]=\"actionLinkRouterLink()\"\n [routerQueryParams]=\"actionLinkRouterQueryParams()\"\n [routerFragment]=\"actionLinkRouterFragment()\"\n [routerState]=\"actionLinkRouterState()\"\n (clickEvent)=\"actionLinkClickEvent.emit($event)\"\n >\n <span i18n=\"@@kernAngularKit.summary.actionLink\">Bearbeiten</span>\n </kern-link>\n </div>\n }\n</div>\n" }]
|
|
1398
1411
|
}], propDecorators: { titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleNumber", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], actionLinkHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLinkHref", required: false }] }], actionLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLinkTarget", required: false }] }], actionLinkRouterLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLinkRouterLink", required: false }] }], actionLinkRouterQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLinkRouterQueryParams", required: false }] }], actionLinkRouterFragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLinkRouterFragment", required: false }] }], actionLinkRouterState: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLinkRouterState", required: false }] }], actionLinkClickEvent: [{ type: i0.Output, args: ["actionLinkClickEvent"] }] } });
|
|
@@ -1400,8 +1413,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
1400
1413
|
class KernSummaryGroup {
|
|
1401
1414
|
heading = input(null, ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
|
|
1402
1415
|
headingLevel = input('2', ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
1403
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1404
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
1416
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernSummaryGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: KernSummaryGroup, isStandalone: true, selector: "kern-summary-group", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kern-summary-group" }, ngImport: i0, template: `
|
|
1405
1418
|
@if (heading()) {
|
|
1406
1419
|
<div class="kern-summary-group__header">
|
|
1407
1420
|
<kern-heading [level]="headingLevel()" size="medium">{{
|
|
@@ -1412,7 +1425,7 @@ class KernSummaryGroup {
|
|
|
1412
1425
|
<ng-content />
|
|
1413
1426
|
`, isInline: true, dependencies: [{ kind: "component", type: KernHeading, selector: "kern-heading", inputs: ["level", "size"] }] });
|
|
1414
1427
|
}
|
|
1415
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernSummaryGroup, decorators: [{
|
|
1416
1429
|
type: Component,
|
|
1417
1430
|
args: [{
|
|
1418
1431
|
selector: 'kern-summary-group',
|
|
@@ -1434,10 +1447,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
1434
1447
|
class KernRow {
|
|
1435
1448
|
verticalAlign = input(null, ...(ngDevMode ? [{ debugName: "verticalAlign" }] : /* istanbul ignore next */ []));
|
|
1436
1449
|
horizontalAlign = input(null, ...(ngDevMode ? [{ debugName: "horizontalAlign" }] : /* istanbul ignore next */ []));
|
|
1437
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1450
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1451
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernRow, isStandalone: true, selector: "kern-row", inputs: { verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-align-items-start": "verticalAlign() === \"start\"", "class.kern-align-items-center": "verticalAlign() === \"center\"", "class.kern-align-items-end": "verticalAlign() === \"end\"", "class.kern-justify-content-start": "horizontalAlign() === \"start\"", "class.kern-justify-content-center": "horizontalAlign() === \"center\"", "class.kern-justify-content-end": "horizontalAlign() === \"end\"", "class.kern-justify-content-around": "horizontalAlign() === \"around\"", "class.kern-justify-content-between": "horizontalAlign() === \"between\"", "class.kern-justify-content-evenly": "horizontalAlign() === \"evenly\"" }, classAttribute: "kern-row" }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
1439
1452
|
}
|
|
1440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernRow, decorators: [{
|
|
1441
1454
|
type: Component,
|
|
1442
1455
|
args: [{
|
|
1443
1456
|
selector: 'kern-row',
|
|
@@ -1487,10 +1500,10 @@ class KernCol {
|
|
|
1487
1500
|
}
|
|
1488
1501
|
return classes;
|
|
1489
1502
|
}
|
|
1490
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1491
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
1503
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernCol, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1504
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: KernCol, isStandalone: true, selector: "kern-col", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "colClasses.join(' ')" } }, ngImport: i0, template: '<ng-content />', isInline: true });
|
|
1492
1505
|
}
|
|
1493
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernCol, decorators: [{
|
|
1494
1507
|
type: Component,
|
|
1495
1508
|
args: [{
|
|
1496
1509
|
selector: 'kern-col',
|
|
@@ -1503,8 +1516,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
1503
1516
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }] } });
|
|
1504
1517
|
|
|
1505
1518
|
class KernAngularKitModule {
|
|
1506
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1507
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.
|
|
1519
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1520
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: KernAngularKitModule, imports: [KernAccordion,
|
|
1508
1521
|
KernAccordionGroup,
|
|
1509
1522
|
KernAlert,
|
|
1510
1523
|
KernDialog,
|
|
@@ -1585,10 +1598,10 @@ class KernAngularKitModule {
|
|
|
1585
1598
|
KernTitle,
|
|
1586
1599
|
KernPreline,
|
|
1587
1600
|
KernSubline] });
|
|
1588
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.
|
|
1601
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAngularKitModule, imports: [KernInputDate,
|
|
1589
1602
|
KernInputFile] });
|
|
1590
1603
|
}
|
|
1591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: KernAngularKitModule, decorators: [{
|
|
1592
1605
|
type: NgModule,
|
|
1593
1606
|
args: [{
|
|
1594
1607
|
imports: [
|