@kern-ux-annex/kern-angular-kit 0.3.7 → 1.0.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.
- package/INTELLISENSE.md +513 -22
- package/README.md +19 -7
- package/fesm2022/kern-ux-annex-kern-angular-kit.mjs +375 -279
- package/fesm2022/kern-ux-annex-kern-angular-kit.mjs.map +1 -1
- package/index.d.ts +456 -32
- package/package.json +5 -6
- package/schemas/kern-components.schema.json +530 -1
- package/src/lib/schemas/kern-components.schema.json +809 -0
- package/COMPONENTS.md +0 -816
|
@@ -1,53 +1,42 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input,
|
|
2
|
+
import { input, Directive, Component, Injectable, inject, ElementRef, Renderer2, booleanAttribute, output, computed, viewChild, signal, forwardRef, TemplateRef, ChangeDetectionStrategy, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
3
3
|
import { NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
5
5
|
|
|
6
6
|
class KernTitle {
|
|
7
7
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return this.size() === 'small';
|
|
11
|
-
}
|
|
12
|
-
get isLarge() {
|
|
13
|
-
return this.size() === 'large';
|
|
14
|
-
}
|
|
15
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
16
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", 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": "this.baseClass", "class.kern-title--small": "this.isSmall", "class.kern-title--large": "this.isLarge" } }, ngImport: i0 });
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", 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 });
|
|
17
10
|
}
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernTitle, decorators: [{
|
|
19
12
|
type: Directive,
|
|
20
13
|
args: [{
|
|
14
|
+
host: {
|
|
15
|
+
class: 'kern-title',
|
|
16
|
+
'[class.kern-title--small]': 'size() === "small"',
|
|
17
|
+
'[class.kern-title--large]': 'size() === "large"'
|
|
18
|
+
},
|
|
21
19
|
selector: 'h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]',
|
|
22
20
|
standalone: true
|
|
23
21
|
}]
|
|
24
|
-
}]
|
|
25
|
-
type: HostBinding,
|
|
26
|
-
args: ['class.kern-title']
|
|
27
|
-
}], isSmall: [{
|
|
28
|
-
type: HostBinding,
|
|
29
|
-
args: ['class.kern-title--small']
|
|
30
|
-
}], isLarge: [{
|
|
31
|
-
type: HostBinding,
|
|
32
|
-
args: ['class.kern-title--large']
|
|
33
|
-
}] } });
|
|
22
|
+
}] });
|
|
34
23
|
|
|
35
24
|
class KernAccordion {
|
|
36
25
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
37
26
|
open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
38
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
39
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
27
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
28
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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}\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"] }] });
|
|
40
29
|
}
|
|
41
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAccordion, decorators: [{
|
|
42
31
|
type: Component,
|
|
43
32
|
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}\n"] }]
|
|
44
33
|
}] });
|
|
45
34
|
|
|
46
35
|
class KernAccordionGroup {
|
|
47
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
48
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
36
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAccordionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
37
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: KernAccordionGroup, isStandalone: true, selector: "kern-accordion-group", host: { classAttribute: "kern-accordion-group" }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
49
38
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
39
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAccordionGroup, decorators: [{
|
|
51
40
|
type: Component,
|
|
52
41
|
args: [{
|
|
53
42
|
selector: 'kern-accordion-group',
|
|
@@ -60,10 +49,10 @@ class KernIcon {
|
|
|
60
49
|
name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
61
50
|
ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
|
|
62
51
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
63
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
64
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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"] });
|
|
65
54
|
}
|
|
66
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernIcon, decorators: [{
|
|
67
56
|
type: Component,
|
|
68
57
|
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"] }]
|
|
69
58
|
}] });
|
|
@@ -71,10 +60,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
71
60
|
class KernAlert {
|
|
72
61
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
73
62
|
variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
75
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
63
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
64
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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 } }, ngImport: i0, 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"], 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"] }] });
|
|
76
65
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAlert, decorators: [{
|
|
78
67
|
type: Component,
|
|
79
68
|
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"] }]
|
|
80
69
|
}] });
|
|
@@ -84,10 +73,10 @@ class UniqueIdService {
|
|
|
84
73
|
getUniqueId(prefix = '') {
|
|
85
74
|
return prefix + '_' + (this.counter++).toString();
|
|
86
75
|
}
|
|
87
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
88
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
76
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UniqueIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
77
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UniqueIdService, providedIn: 'root' });
|
|
89
78
|
}
|
|
90
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UniqueIdService, decorators: [{
|
|
91
80
|
type: Injectable,
|
|
92
81
|
args: [{
|
|
93
82
|
providedIn: 'root'
|
|
@@ -105,16 +94,6 @@ class KernLabel {
|
|
|
105
94
|
srOnly = input(false, ...(ngDevMode ? [{ debugName: "srOnly", transform: booleanAttribute }] : [{
|
|
106
95
|
transform: booleanAttribute
|
|
107
96
|
}]));
|
|
108
|
-
baseClass = true;
|
|
109
|
-
get isSmall() {
|
|
110
|
-
return this.size() === 'small';
|
|
111
|
-
}
|
|
112
|
-
get isLarge() {
|
|
113
|
-
return this.size() === 'large';
|
|
114
|
-
}
|
|
115
|
-
get isSrOnly() {
|
|
116
|
-
return this.srOnly();
|
|
117
|
-
}
|
|
118
97
|
ngOnChanges(changes) {
|
|
119
98
|
if (changes['optional']) {
|
|
120
99
|
if (this.optional()) {
|
|
@@ -132,28 +111,22 @@ class KernLabel {
|
|
|
132
111
|
}
|
|
133
112
|
}
|
|
134
113
|
}
|
|
135
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
136
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.
|
|
114
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
115
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", 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 });
|
|
137
116
|
}
|
|
138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernLabel, decorators: [{
|
|
139
118
|
type: Directive,
|
|
140
119
|
args: [{
|
|
120
|
+
host: {
|
|
121
|
+
class: 'kern-label',
|
|
122
|
+
'[class.kern-label--small]': 'size() === "small"',
|
|
123
|
+
'[class.kern-label--large]': 'size() === "large"',
|
|
124
|
+
'[class.kern-sr-only]': 'srOnly()'
|
|
125
|
+
},
|
|
141
126
|
selector: 'label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]',
|
|
142
127
|
standalone: true
|
|
143
128
|
}]
|
|
144
|
-
}]
|
|
145
|
-
type: HostBinding,
|
|
146
|
-
args: ['class.kern-label']
|
|
147
|
-
}], isSmall: [{
|
|
148
|
-
type: HostBinding,
|
|
149
|
-
args: ['class.kern-label--small']
|
|
150
|
-
}], isLarge: [{
|
|
151
|
-
type: HostBinding,
|
|
152
|
-
args: ['class.kern-label--large']
|
|
153
|
-
}], isSrOnly: [{
|
|
154
|
-
type: HostBinding,
|
|
155
|
-
args: ['class.kern-sr-only']
|
|
156
|
-
}] } });
|
|
129
|
+
}] });
|
|
157
130
|
|
|
158
131
|
class KernButton {
|
|
159
132
|
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
@@ -164,10 +137,10 @@ class KernButton {
|
|
|
164
137
|
iconRight = input(null, ...(ngDevMode ? [{ debugName: "iconRight" }] : []));
|
|
165
138
|
srOnlyLabel = input(false, ...(ngDevMode ? [{ debugName: "srOnlyLabel" }] : []));
|
|
166
139
|
clickEvent = output();
|
|
167
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
168
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
140
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
141
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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 } }, 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)=\"clickEvent.emit($event)\"\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"] }] });
|
|
169
142
|
}
|
|
170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernButton, decorators: [{
|
|
171
144
|
type: Component,
|
|
172
145
|
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)=\"clickEvent.emit($event)\"\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"] }]
|
|
173
146
|
}] });
|
|
@@ -190,20 +163,20 @@ class KernDialog {
|
|
|
190
163
|
closeModal() {
|
|
191
164
|
this.dialog().nativeElement?.close();
|
|
192
165
|
}
|
|
193
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
166
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
167
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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 } }, 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>\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 (clickEvent)=\"btnPrimaryClickEvent.emit($event)\">\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"], 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"] }] });
|
|
195
168
|
}
|
|
196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernDialog, decorators: [{
|
|
197
170
|
type: Component,
|
|
198
171
|
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>\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 (clickEvent)=\"btnPrimaryClickEvent.emit($event)\">\n {{ btnPrimaryLabelText() }}\n </kern-button>\n }\n </footer>\n }\n</dialog>\n" }]
|
|
199
172
|
}] });
|
|
200
173
|
|
|
201
174
|
class KernLoader {
|
|
202
175
|
text = input('Wird geladen...', ...(ngDevMode ? [{ debugName: "text" }] : []));
|
|
203
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
204
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
176
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
177
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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" });
|
|
205
178
|
}
|
|
206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernLoader, decorators: [{
|
|
207
180
|
type: Component,
|
|
208
181
|
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" }]
|
|
209
182
|
}] });
|
|
@@ -211,71 +184,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
211
184
|
class KernBadge {
|
|
212
185
|
variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
213
186
|
icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
214
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
215
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
187
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
188
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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"] }] });
|
|
216
189
|
}
|
|
217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernBadge, decorators: [{
|
|
218
191
|
type: Component,
|
|
219
192
|
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" }]
|
|
220
193
|
}] });
|
|
221
194
|
|
|
222
195
|
class KernPreline {
|
|
223
196
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
return this.size() === 'small';
|
|
227
|
-
}
|
|
228
|
-
get isLarge() {
|
|
229
|
-
return this.size() === 'large';
|
|
230
|
-
}
|
|
231
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernPreline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
232
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", 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": "this.baseClass", "class.kern-preline--small": "this.isSmall", "class.kern-preline--large": "this.isLarge" } }, ngImport: i0 });
|
|
197
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernPreline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
198
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", 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 });
|
|
233
199
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernPreline, decorators: [{
|
|
235
201
|
type: Directive,
|
|
236
202
|
args: [{
|
|
203
|
+
host: {
|
|
204
|
+
class: 'kern-preline',
|
|
205
|
+
'[class.kern-preline--small]': 'size() === "small"',
|
|
206
|
+
'[class.kern-preline--large]': 'size() === "large"'
|
|
207
|
+
},
|
|
237
208
|
selector: 'h1[kernPreline], h2[kernPreline], h3[kernPreline], h4[kernPreline], h5[kernPreline], h6[kernPreline], span[kernPreline], p[kernPreline]',
|
|
238
209
|
standalone: true
|
|
239
210
|
}]
|
|
240
|
-
}]
|
|
241
|
-
type: HostBinding,
|
|
242
|
-
args: ['class.kern-preline']
|
|
243
|
-
}], isSmall: [{
|
|
244
|
-
type: HostBinding,
|
|
245
|
-
args: ['class.kern-preline--small']
|
|
246
|
-
}], isLarge: [{
|
|
247
|
-
type: HostBinding,
|
|
248
|
-
args: ['class.kern-preline--large']
|
|
249
|
-
}] } });
|
|
211
|
+
}] });
|
|
250
212
|
|
|
251
213
|
class KernSubline {
|
|
252
214
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
return this.size() === 'small';
|
|
256
|
-
}
|
|
257
|
-
get isLarge() {
|
|
258
|
-
return this.size() === 'large';
|
|
259
|
-
}
|
|
260
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernSubline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
261
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", 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": "this.baseClass", "class.kern-subline--small": "this.isSmall", "class.kern-subline--large": "this.isLarge" } }, ngImport: i0 });
|
|
215
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernSubline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
216
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", 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 });
|
|
262
217
|
}
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernSubline, decorators: [{
|
|
264
219
|
type: Directive,
|
|
265
220
|
args: [{
|
|
221
|
+
host: {
|
|
222
|
+
class: 'kern-subline',
|
|
223
|
+
'[class.kern-subline--small]': 'size() === "small"',
|
|
224
|
+
'[class.kern-subline--large]': 'size() === "large"'
|
|
225
|
+
},
|
|
266
226
|
selector: 'h1[kernSubline], h2[kernSubline], h3[kernSubline], h4[kernSubline], h5[kernSubline], h6[kernSubline], span[kernSubline], p[kernSubline]',
|
|
267
227
|
standalone: true
|
|
268
228
|
}]
|
|
269
|
-
}]
|
|
270
|
-
type: HostBinding,
|
|
271
|
-
args: ['class.kern-subline']
|
|
272
|
-
}], isSmall: [{
|
|
273
|
-
type: HostBinding,
|
|
274
|
-
args: ['class.kern-subline--small']
|
|
275
|
-
}], isLarge: [{
|
|
276
|
-
type: HostBinding,
|
|
277
|
-
args: ['class.kern-subline--large']
|
|
278
|
-
}] } });
|
|
229
|
+
}] });
|
|
279
230
|
|
|
280
231
|
class KernCard {
|
|
281
232
|
title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
|
|
@@ -292,20 +243,20 @@ class KernCard {
|
|
|
292
243
|
titleLinkClickEvent = output();
|
|
293
244
|
btnPrimaryClickEvent = output();
|
|
294
245
|
btnSecondaryClickEvent = output();
|
|
295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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 }, btnSecondaryLabelText: { classPropertyName: "btnSecondaryLabelText", publicName: "btnSecondaryLabelText", 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 (clickEvent)=\"btnPrimaryClickEvent.emit($event)\">\n {{ btnPrimaryLabelText() }}\n </kern-button>\n }\n @if (btnSecondaryLabelText()) {\n <kern-button variant=\"secondary\" (clickEvent)=\"btnSecondaryClickEvent.emit($event)\">\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"], outputs: ["clickEvent"] }] });
|
|
297
248
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernCard, decorators: [{
|
|
299
250
|
type: Component,
|
|
300
251
|
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 (clickEvent)=\"btnPrimaryClickEvent.emit($event)\">\n {{ btnPrimaryLabelText() }}\n </kern-button>\n }\n @if (btnSecondaryLabelText()) {\n <kern-button variant=\"secondary\" (clickEvent)=\"btnSecondaryClickEvent.emit($event)\">\n {{ btnSecondaryLabelText() }}\n </kern-button>\n }\n </footer>\n }\n </div>\n</article>\n", styles: [":host{display:contents}\n"] }]
|
|
301
252
|
}] });
|
|
302
253
|
|
|
303
254
|
class KernDivider {
|
|
304
255
|
ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
|
|
305
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
256
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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" });
|
|
307
258
|
}
|
|
308
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernDivider, decorators: [{
|
|
309
260
|
type: Component,
|
|
310
261
|
args: [{ selector: 'kern-divider', template: "<hr class=\"kern-divider\" [attr.aria-hidden]=\"ariaHidden()\" />\n" }]
|
|
311
262
|
}] });
|
|
@@ -319,10 +270,10 @@ class KernLink {
|
|
|
319
270
|
iconRight = input(null, ...(ngDevMode ? [{ debugName: "iconRight" }] : []));
|
|
320
271
|
linkDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "linkDescribedBy" }] : []));
|
|
321
272
|
clickEvent = output();
|
|
322
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
273
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
274
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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 }, 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]=\"href()\"\n [target]=\"target()\"\n [attr.rel]=\"target() === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-describedby]=\"linkDescribedBy() || null\"\n (click)=\"clickEvent.emit($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"] }] });
|
|
324
275
|
}
|
|
325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
276
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernLink, decorators: [{
|
|
326
277
|
type: Component,
|
|
327
278
|
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]=\"href()\"\n [target]=\"target()\"\n [attr.rel]=\"target() === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-describedby]=\"linkDescribedBy() || null\"\n (click)=\"clickEvent.emit($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"] }]
|
|
328
279
|
}] });
|
|
@@ -335,14 +286,37 @@ class KernProgress {
|
|
|
335
286
|
labelPosition = input('top', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
|
|
336
287
|
generatedId = inject(UniqueIdService).getUniqueId('progress');
|
|
337
288
|
effectiveId = computed(() => this.progressId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
|
|
338
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
339
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
289
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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"] }] });
|
|
340
291
|
}
|
|
341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernProgress, decorators: [{
|
|
342
293
|
type: Component,
|
|
343
294
|
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" }]
|
|
344
295
|
}] });
|
|
345
296
|
|
|
297
|
+
class KernContainer {
|
|
298
|
+
fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : []));
|
|
299
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
300
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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"] });
|
|
301
|
+
}
|
|
302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernContainer, decorators: [{
|
|
303
|
+
type: Component,
|
|
304
|
+
args: [{ selector: 'kern-container', host: {
|
|
305
|
+
'[class.kern-container]': '!fluid()',
|
|
306
|
+
'[class.kern-container-fluid]': 'fluid()'
|
|
307
|
+
}, template: '<ng-content />', styles: [":host{display:block}\n"] }]
|
|
308
|
+
}] });
|
|
309
|
+
|
|
310
|
+
class KernKopfzeile {
|
|
311
|
+
fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : []));
|
|
312
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernKopfzeile, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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"] }] });
|
|
314
|
+
}
|
|
315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernKopfzeile, decorators: [{
|
|
316
|
+
type: Component,
|
|
317
|
+
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"] }]
|
|
318
|
+
}] });
|
|
319
|
+
|
|
346
320
|
class KernHeading {
|
|
347
321
|
elementRef = inject(ElementRef);
|
|
348
322
|
renderer = inject(Renderer2);
|
|
@@ -399,10 +373,10 @@ class KernHeading {
|
|
|
399
373
|
};
|
|
400
374
|
return levelToSizeMap[level] || 'medium';
|
|
401
375
|
}
|
|
402
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
403
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
376
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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"] });
|
|
404
378
|
}
|
|
405
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernHeading, decorators: [{
|
|
406
380
|
type: Component,
|
|
407
381
|
args: [{ selector: 'kern-heading', template: `<ng-content />`, styles: [":host{display:contents}\n"] }]
|
|
408
382
|
}] });
|
|
@@ -410,86 +384,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
410
384
|
class KernBody {
|
|
411
385
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
412
386
|
weight = input('default', ...(ngDevMode ? [{ debugName: "weight" }] : []));
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
return this.size() === 'small';
|
|
416
|
-
}
|
|
417
|
-
get isLarge() {
|
|
418
|
-
return this.size() === 'large';
|
|
419
|
-
}
|
|
420
|
-
get isBold() {
|
|
421
|
-
return this.weight() === 'bold';
|
|
422
|
-
}
|
|
423
|
-
get isMuted() {
|
|
424
|
-
return this.weight() === 'muted';
|
|
425
|
-
}
|
|
426
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
427
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", 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": "this.baseClass", "class.kern-body--small": "this.isSmall", "class.kern-body--large": "this.isLarge", "class.kern-body--bold": "this.isBold", "class.kern-body--muted": "this.isMuted" } }, ngImport: i0 });
|
|
387
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
388
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", 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 });
|
|
428
389
|
}
|
|
429
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernBody, decorators: [{
|
|
430
391
|
type: Directive,
|
|
431
392
|
args: [{
|
|
393
|
+
host: {
|
|
394
|
+
class: 'kern-body',
|
|
395
|
+
'[class.kern-body--small]': 'size() === "small"',
|
|
396
|
+
'[class.kern-body--large]': 'size() === "large"',
|
|
397
|
+
'[class.kern-body--bold]': 'weight() === "bold"',
|
|
398
|
+
'[class.kern-body--muted]': 'weight() === "muted"'
|
|
399
|
+
},
|
|
432
400
|
selector: 'p[kernBody], span[kernBody]',
|
|
433
401
|
standalone: true
|
|
434
402
|
}]
|
|
435
|
-
}]
|
|
436
|
-
type: HostBinding,
|
|
437
|
-
args: ['class.kern-body']
|
|
438
|
-
}], isSmall: [{
|
|
439
|
-
type: HostBinding,
|
|
440
|
-
args: ['class.kern-body--small']
|
|
441
|
-
}], isLarge: [{
|
|
442
|
-
type: HostBinding,
|
|
443
|
-
args: ['class.kern-body--large']
|
|
444
|
-
}], isBold: [{
|
|
445
|
-
type: HostBinding,
|
|
446
|
-
args: ['class.kern-body--bold']
|
|
447
|
-
}], isMuted: [{
|
|
448
|
-
type: HostBinding,
|
|
449
|
-
args: ['class.kern-body--muted']
|
|
450
|
-
}] } });
|
|
403
|
+
}] });
|
|
451
404
|
|
|
452
405
|
class KernList {
|
|
453
406
|
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
454
407
|
type = input('simple', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
return this.size() === 'small';
|
|
458
|
-
}
|
|
459
|
-
get isLarge() {
|
|
460
|
-
return this.size() === 'large';
|
|
461
|
-
}
|
|
462
|
-
get isBulletType() {
|
|
463
|
-
return this.type() === 'bullet';
|
|
464
|
-
}
|
|
465
|
-
get isNumberType() {
|
|
466
|
-
return this.type() === 'number';
|
|
467
|
-
}
|
|
468
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
469
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", 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": "this.baseClass", "class.kern-list--small": "this.isSmall", "class.kern-list--large": "this.isLarge", "class.kern-list--bullet": "this.isBulletType", "class.kern-list--number": "this.isNumberType" } }, ngImport: i0 });
|
|
408
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
409
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", 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 });
|
|
470
410
|
}
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
411
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernList, decorators: [{
|
|
472
412
|
type: Directive,
|
|
473
413
|
args: [{
|
|
414
|
+
host: {
|
|
415
|
+
class: 'kern-list',
|
|
416
|
+
'[class.kern-list--small]': 'size() === "small"',
|
|
417
|
+
'[class.kern-list--large]': 'size() === "large"',
|
|
418
|
+
'[class.kern-list--bullet]': 'type() === "bullet"',
|
|
419
|
+
'[class.kern-list--number]': 'type() === "number"'
|
|
420
|
+
},
|
|
474
421
|
selector: 'ul[kernList], ol[kernList]',
|
|
475
422
|
standalone: true
|
|
476
423
|
}]
|
|
477
|
-
}]
|
|
478
|
-
type: HostBinding,
|
|
479
|
-
args: ['class.kern-list']
|
|
480
|
-
}], isSmall: [{
|
|
481
|
-
type: HostBinding,
|
|
482
|
-
args: ['class.kern-list--small']
|
|
483
|
-
}], isLarge: [{
|
|
484
|
-
type: HostBinding,
|
|
485
|
-
args: ['class.kern-list--large']
|
|
486
|
-
}], isBulletType: [{
|
|
487
|
-
type: HostBinding,
|
|
488
|
-
args: ['class.kern-list--bullet']
|
|
489
|
-
}], isNumberType: [{
|
|
490
|
-
type: HostBinding,
|
|
491
|
-
args: ['class.kern-list--number']
|
|
492
|
-
}] } });
|
|
424
|
+
}] });
|
|
493
425
|
|
|
494
426
|
class ControlValueAccessorDirective {
|
|
495
427
|
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
@@ -515,8 +447,8 @@ class ControlValueAccessorDirective {
|
|
|
515
447
|
setDisabledState(isDisabled) {
|
|
516
448
|
this.disabled.set(isDisabled);
|
|
517
449
|
}
|
|
518
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
519
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
450
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ControlValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
451
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: ControlValueAccessorDirective, isStandalone: true, selector: "[kernControlValueAccessor]", providers: [
|
|
520
452
|
{
|
|
521
453
|
provide: NG_VALUE_ACCESSOR,
|
|
522
454
|
useExisting: forwardRef(() => ControlValueAccessorDirective),
|
|
@@ -524,7 +456,7 @@ class ControlValueAccessorDirective {
|
|
|
524
456
|
}
|
|
525
457
|
], ngImport: i0 });
|
|
526
458
|
}
|
|
527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
|
|
528
460
|
type: Directive,
|
|
529
461
|
args: [{
|
|
530
462
|
selector: '[kernControlValueAccessor]',
|
|
@@ -551,10 +483,10 @@ class KernInputCheckbox {
|
|
|
551
483
|
const { value } = event.target;
|
|
552
484
|
this.cva.changeValue(value);
|
|
553
485
|
}
|
|
554
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
486
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
487
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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"] }] });
|
|
556
488
|
}
|
|
557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
489
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputCheckbox, decorators: [{
|
|
558
490
|
type: Component,
|
|
559
491
|
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" }]
|
|
560
492
|
}] });
|
|
@@ -562,13 +494,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
562
494
|
class KernInputError {
|
|
563
495
|
effectiveId = input.required(...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
|
|
564
496
|
text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
|
|
565
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
566
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.
|
|
497
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputError, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
498
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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">
|
|
567
499
|
<kern-icon name="danger" />
|
|
568
500
|
<span kernBody>{{ text() }}</span>
|
|
569
501
|
</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"] }] });
|
|
570
502
|
}
|
|
571
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
503
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputError, decorators: [{
|
|
572
504
|
type: Component,
|
|
573
505
|
args: [{ selector: 'kern-input-error', imports: [KernIcon, KernBody], template: `<p class="kern-error" [id]="effectiveId() + '-error'" role="alert">
|
|
574
506
|
<kern-icon name="danger" />
|
|
@@ -590,14 +522,14 @@ class KernInputHint {
|
|
|
590
522
|
};
|
|
591
523
|
}
|
|
592
524
|
}]));
|
|
593
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
594
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
525
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
526
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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) {
|
|
595
527
|
<ng-container [ngTemplateOutlet]="templateRef" />
|
|
596
528
|
} @else {
|
|
597
529
|
{{ hint().text }}
|
|
598
530
|
}`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
599
531
|
}
|
|
600
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputHint, decorators: [{
|
|
601
533
|
type: Component,
|
|
602
534
|
args: [{
|
|
603
535
|
selector: 'kern-input-hint',
|
|
@@ -628,10 +560,10 @@ class KernFieldset {
|
|
|
628
560
|
? this.effectiveId() + '-hint'
|
|
629
561
|
: null;
|
|
630
562
|
}, ...(ngDevMode ? [{ debugName: "fieldsetDescribedBy" }] : []));
|
|
631
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
632
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
563
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
564
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 <legend kernLabel [size]=\"legendSize()\" [optional]=\"optional()\">\n {{ legendText() }}\n </legend>\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"] }] });
|
|
633
565
|
}
|
|
634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernFieldset, decorators: [{
|
|
635
567
|
type: Component,
|
|
636
568
|
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 {{ legendText() }}\n </legend>\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" }]
|
|
637
569
|
}] });
|
|
@@ -663,15 +595,15 @@ class KernInputDate {
|
|
|
663
595
|
this.year = null;
|
|
664
596
|
if (value !== null) {
|
|
665
597
|
const [yearStr, monthStr, dayStr] = value.split('-');
|
|
666
|
-
const day = parseInt(dayStr ?? '');
|
|
598
|
+
const day = parseInt(dayStr ?? '', 10);
|
|
667
599
|
if (!isNaN(day) && day >= 1 && day <= 31) {
|
|
668
600
|
this.day = day;
|
|
669
601
|
}
|
|
670
|
-
const month = parseInt(monthStr ?? '');
|
|
602
|
+
const month = parseInt(monthStr ?? '', 10);
|
|
671
603
|
if (!isNaN(month) && month >= 1 && month <= 12) {
|
|
672
604
|
this.month = month;
|
|
673
605
|
}
|
|
674
|
-
const year = parseInt(yearStr ?? '');
|
|
606
|
+
const year = parseInt(yearStr ?? '', 10);
|
|
675
607
|
if (!isNaN(year) && year >= 1000 && year <= 9999) {
|
|
676
608
|
this.year = year;
|
|
677
609
|
}
|
|
@@ -688,11 +620,25 @@ class KernInputDate {
|
|
|
688
620
|
this.onTouched = fn;
|
|
689
621
|
}
|
|
690
622
|
onKeydown(event, type) {
|
|
691
|
-
if (event.target
|
|
692
|
-
|
|
693
|
-
|
|
623
|
+
if (!event.target || !(event.target instanceof HTMLInputElement)) {
|
|
624
|
+
return;
|
|
625
|
+
}
|
|
626
|
+
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
694
627
|
this.onBlur(event, type);
|
|
695
628
|
}
|
|
629
|
+
else if (event.key === '.' ||
|
|
630
|
+
event.key === '-' ||
|
|
631
|
+
event.code === 'Space') {
|
|
632
|
+
event.preventDefault();
|
|
633
|
+
switch (type) {
|
|
634
|
+
case 'day':
|
|
635
|
+
this.monthInput().nativeElement.focus();
|
|
636
|
+
break;
|
|
637
|
+
case 'month':
|
|
638
|
+
this.yearInput().nativeElement.focus();
|
|
639
|
+
break;
|
|
640
|
+
}
|
|
641
|
+
}
|
|
696
642
|
}
|
|
697
643
|
onInput(event, type) {
|
|
698
644
|
if (!event.target) {
|
|
@@ -700,7 +646,7 @@ class KernInputDate {
|
|
|
700
646
|
}
|
|
701
647
|
const input = event.target;
|
|
702
648
|
input.value = input.value.replace(/\D/g, '');
|
|
703
|
-
const value = parseInt(input.value);
|
|
649
|
+
const value = parseInt(input.value, 10);
|
|
704
650
|
switch (type) {
|
|
705
651
|
case 'day':
|
|
706
652
|
if (isNaN(value) || value < 1 || value > 31) {
|
|
@@ -776,16 +722,43 @@ class KernInputDate {
|
|
|
776
722
|
'-' +
|
|
777
723
|
this.day.toString().padStart(2, '0'));
|
|
778
724
|
}
|
|
779
|
-
|
|
780
|
-
|
|
725
|
+
onPaste(event) {
|
|
726
|
+
if (!event.clipboardData) {
|
|
727
|
+
return;
|
|
728
|
+
}
|
|
729
|
+
const pasted = event.clipboardData.getData('text').trim();
|
|
730
|
+
const match = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/.exec(pasted);
|
|
731
|
+
if (match) {
|
|
732
|
+
event.preventDefault();
|
|
733
|
+
const [, dayStr, monthStr, yearStr] = match;
|
|
734
|
+
const day = parseInt(dayStr, 10);
|
|
735
|
+
const month = parseInt(monthStr, 10);
|
|
736
|
+
const year = parseInt(yearStr, 10);
|
|
737
|
+
if (day >= 1 &&
|
|
738
|
+
day <= 31 &&
|
|
739
|
+
month >= 1 &&
|
|
740
|
+
month <= 12 &&
|
|
741
|
+
year >= 1000 &&
|
|
742
|
+
year <= 9999) {
|
|
743
|
+
this.day = day;
|
|
744
|
+
this.month = month;
|
|
745
|
+
this.year = year;
|
|
746
|
+
this.renderValue();
|
|
747
|
+
this.onChange(this.value);
|
|
748
|
+
this.onTouched();
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
753
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", 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: true, 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: [
|
|
781
754
|
{
|
|
782
755
|
provide: NG_VALUE_ACCESSOR,
|
|
783
756
|
multi: true,
|
|
784
757
|
useExisting: forwardRef(() => KernInputDate)
|
|
785
758
|
}
|
|
786
|
-
], 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)=\"
|
|
759
|
+
], 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"] }] });
|
|
787
760
|
}
|
|
788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
761
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputDate, decorators: [{
|
|
789
762
|
type: Component,
|
|
790
763
|
args: [{ selector: 'kern-input-date', imports: [FormsModule, KernLabel, KernFieldset], providers: [
|
|
791
764
|
{
|
|
@@ -793,7 +766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
793
766
|
multi: true,
|
|
794
767
|
useExisting: forwardRef(() => KernInputDate)
|
|
795
768
|
}
|
|
796
|
-
], 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)=\"
|
|
769
|
+
], 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" }]
|
|
797
770
|
}] });
|
|
798
771
|
|
|
799
772
|
class KernInputEmail {
|
|
@@ -829,10 +802,10 @@ class KernInputEmail {
|
|
|
829
802
|
this.cva.markTouched();
|
|
830
803
|
}
|
|
831
804
|
}
|
|
832
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
805
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputEmail, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
806
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 <label kernLabel [for]=\"effectiveId()\" [id]=\"effectiveId() + '-label'\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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 [disabled]=\"cva.disabled()\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\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"] }] });
|
|
834
807
|
}
|
|
835
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
808
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputEmail, decorators: [{
|
|
836
809
|
type: Component,
|
|
837
810
|
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 {{ labelText() }}\n </label>\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 [disabled]=\"cva.disabled()\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\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" }]
|
|
838
811
|
}] });
|
|
@@ -870,10 +843,10 @@ class KernInputFile {
|
|
|
870
843
|
const { value } = event.target;
|
|
871
844
|
this.cva.changeValue(value);
|
|
872
845
|
}
|
|
873
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
874
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
846
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
847
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 <label kernLabel [for]=\"effectiveId()\" [id]=\"effectiveId() + '-label'\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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=\"file\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n [value]=\"cva.value()\"\n [disabled]=\"cva.disabled()\"\n (change)=\"onChange($event)\"\n [required]=\"required()\"\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"] }] });
|
|
875
848
|
}
|
|
876
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputFile, decorators: [{
|
|
877
850
|
type: Component,
|
|
878
851
|
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 {{ labelText() }}\n </label>\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=\"file\"\n class=\"kern-form-input__input\"\n [class.kern-form-input__input--error]=\"errorText()\"\n [value]=\"cva.value()\"\n [disabled]=\"cva.disabled()\"\n (change)=\"onChange($event)\"\n [required]=\"required()\"\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" }]
|
|
879
852
|
}] });
|
|
@@ -918,10 +891,10 @@ class KernInputNumber {
|
|
|
918
891
|
this.cva.markTouched();
|
|
919
892
|
}
|
|
920
893
|
}
|
|
921
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
922
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
894
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
895
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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"] }] });
|
|
923
896
|
}
|
|
924
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputNumber, decorators: [{
|
|
925
898
|
type: Component,
|
|
926
899
|
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 {{ labelText() }}\n </label>\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" }]
|
|
927
900
|
}] });
|
|
@@ -963,10 +936,10 @@ class KernInputPassword {
|
|
|
963
936
|
this.cva.markTouched();
|
|
964
937
|
}
|
|
965
938
|
}
|
|
966
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
967
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
939
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputPassword, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
940
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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"] }] });
|
|
968
941
|
}
|
|
969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputPassword, decorators: [{
|
|
970
943
|
type: Component,
|
|
971
944
|
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 {{ labelText() }}\n </label>\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" }]
|
|
972
945
|
}] });
|
|
@@ -992,10 +965,10 @@ class KernInputRadio {
|
|
|
992
965
|
this.cva.markTouched();
|
|
993
966
|
}
|
|
994
967
|
}
|
|
995
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
996
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
968
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
969
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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.writeValue(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"] }] });
|
|
997
970
|
}
|
|
998
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputRadio, decorators: [{
|
|
999
972
|
type: Component,
|
|
1000
973
|
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.writeValue(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" }]
|
|
1001
974
|
}] });
|
|
@@ -1035,10 +1008,10 @@ class KernInputSelect {
|
|
|
1035
1008
|
this.cva.markTouched();
|
|
1036
1009
|
}
|
|
1037
1010
|
}
|
|
1038
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1039
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1011
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1012
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 }, 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 <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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 (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\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 @for (option of options(); track option.value) {\n <option [value]=\"option.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"] }] });
|
|
1040
1013
|
}
|
|
1041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1014
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputSelect, decorators: [{
|
|
1042
1015
|
type: Component,
|
|
1043
1016
|
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 {{ labelText() }}\n </label>\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 (input)=\"onInput($event)\"\n (blur)=\"cva.markTouched()\"\n (keydown)=\"onKeydown($event)\"\n [required]=\"required()\"\n [value]=\"cva.value()\"\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 @for (option of options(); track option.value) {\n <option [value]=\"option.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" }]
|
|
1044
1017
|
}] });
|
|
@@ -1080,10 +1053,10 @@ class KernInputTel {
|
|
|
1080
1053
|
this.cva.markTouched();
|
|
1081
1054
|
}
|
|
1082
1055
|
}
|
|
1083
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1084
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1056
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputTel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1057
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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"] }] });
|
|
1085
1058
|
}
|
|
1086
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputTel, decorators: [{
|
|
1087
1060
|
type: Component,
|
|
1088
1061
|
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 {{ labelText() }}\n </label>\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" }]
|
|
1089
1062
|
}] });
|
|
@@ -1120,10 +1093,10 @@ class KernInputText {
|
|
|
1120
1093
|
const { value } = event.target;
|
|
1121
1094
|
this.cva.changeValue(value);
|
|
1122
1095
|
}
|
|
1123
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1124
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1096
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1097
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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 [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 });
|
|
1125
1098
|
}
|
|
1126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputText, decorators: [{
|
|
1127
1100
|
type: Component,
|
|
1128
1101
|
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 {{ labelText() }}\n </label>\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 [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" }]
|
|
1129
1102
|
}] });
|
|
@@ -1158,10 +1131,10 @@ class KernInputTextarea {
|
|
|
1158
1131
|
const { value } = event.target;
|
|
1159
1132
|
this.cva.changeValue(value);
|
|
1160
1133
|
}
|
|
1161
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1134
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1135
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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 });
|
|
1163
1136
|
}
|
|
1164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputTextarea, decorators: [{
|
|
1165
1138
|
type: Component,
|
|
1166
1139
|
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 {{ labelText() }}\n </label>\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" }]
|
|
1167
1140
|
}] });
|
|
@@ -1203,10 +1176,10 @@ class KernInputUrl {
|
|
|
1203
1176
|
this.cva.markTouched();
|
|
1204
1177
|
}
|
|
1205
1178
|
}
|
|
1206
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputUrl, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: true, 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 <label kernLabel [id]=\"effectiveId() + '-label'\" [for]=\"effectiveId()\" [optional]=\"optional()\">\n {{ labelText() }}\n </label>\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 });
|
|
1208
1181
|
}
|
|
1209
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernInputUrl, decorators: [{
|
|
1210
1183
|
type: Component,
|
|
1211
1184
|
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 {{ labelText() }}\n </label>\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" }]
|
|
1212
1185
|
}] });
|
|
@@ -1223,10 +1196,10 @@ class KernTable {
|
|
|
1223
1196
|
getCellText(row, key) {
|
|
1224
1197
|
return row?.[key] ?? '';
|
|
1225
1198
|
}
|
|
1226
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1227
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1199
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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"] }] });
|
|
1228
1201
|
}
|
|
1229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernTable, decorators: [{
|
|
1230
1203
|
type: Component,
|
|
1231
1204
|
args: [{ selector: 'kern-table', imports: [KernTitle], host: {
|
|
1232
1205
|
'[class.kern-table-responsive]': 'responsive()',
|
|
@@ -1237,10 +1210,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1237
1210
|
class KernDescriptionList {
|
|
1238
1211
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
1239
1212
|
column = input(false, ...(ngDevMode ? [{ debugName: "column" }] : []));
|
|
1240
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1241
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1213
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1214
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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" });
|
|
1242
1215
|
}
|
|
1243
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1216
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernDescriptionList, decorators: [{
|
|
1244
1217
|
type: Component,
|
|
1245
1218
|
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" }]
|
|
1246
1219
|
}] });
|
|
@@ -1253,10 +1226,10 @@ class KernTasklist {
|
|
|
1253
1226
|
getGeneratedStatusId(taskIndex, itemIndex) {
|
|
1254
1227
|
return (this.generatedId + '_' + taskIndex.toString() + '_' + itemIndex.toString());
|
|
1255
1228
|
}
|
|
1256
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1229
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernTasklist, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1230
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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) {\n <kern-link\n [href]=\"item.linkHref\"\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", "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"] }] });
|
|
1258
1231
|
}
|
|
1259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernTasklist, decorators: [{
|
|
1260
1233
|
type: Component,
|
|
1261
1234
|
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) {\n <kern-link\n [href]=\"item.linkHref\"\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" }]
|
|
1262
1235
|
}] });
|
|
@@ -1272,10 +1245,10 @@ class KernSummary {
|
|
|
1272
1245
|
actionLinkClickEvent = output();
|
|
1273
1246
|
generatedTitleId = inject(UniqueIdService).getUniqueId('title');
|
|
1274
1247
|
effectiveTitleId = computed(() => this.titleId() ?? this.generatedTitleId, ...(ngDevMode ? [{ debugName: "effectiveTitleId" }] : []));
|
|
1275
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1276
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1248
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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 } }, 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 (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", "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"] }] });
|
|
1277
1250
|
}
|
|
1278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernSummary, decorators: [{
|
|
1279
1252
|
type: Component,
|
|
1280
1253
|
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 (clickEvent)=\"actionLinkClickEvent.emit($event)\"\n >\n <span i18n=\"@@kernAngularKit.summary.actionLink\">Bearbeiten</span>\n </kern-link>\n </div>\n }\n</div>\n" }]
|
|
1281
1254
|
}] });
|
|
@@ -1283,8 +1256,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1283
1256
|
class KernSummaryGroup {
|
|
1284
1257
|
heading = input(null, ...(ngDevMode ? [{ debugName: "heading" }] : []));
|
|
1285
1258
|
headingLevel = input('2', ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
|
|
1286
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1287
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1259
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernSummaryGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1260
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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: `
|
|
1288
1261
|
@if (heading()) {
|
|
1289
1262
|
<div class="kern-summary-group__header">
|
|
1290
1263
|
<kern-heading [level]="headingLevel()" size="medium">{{
|
|
@@ -1295,7 +1268,7 @@ class KernSummaryGroup {
|
|
|
1295
1268
|
<ng-content />
|
|
1296
1269
|
`, isInline: true, dependencies: [{ kind: "component", type: KernHeading, selector: "kern-heading", inputs: ["level", "size"] }] });
|
|
1297
1270
|
}
|
|
1298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernSummaryGroup, decorators: [{
|
|
1299
1272
|
type: Component,
|
|
1300
1273
|
args: [{
|
|
1301
1274
|
selector: 'kern-summary-group',
|
|
@@ -1314,9 +1287,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1314
1287
|
}]
|
|
1315
1288
|
}] });
|
|
1316
1289
|
|
|
1290
|
+
class KernRow {
|
|
1291
|
+
verticalAlign = input(null, ...(ngDevMode ? [{ debugName: "verticalAlign" }] : []));
|
|
1292
|
+
horizontalAlign = input(null, ...(ngDevMode ? [{ debugName: "horizontalAlign" }] : []));
|
|
1293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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 });
|
|
1295
|
+
}
|
|
1296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernRow, decorators: [{
|
|
1297
|
+
type: Component,
|
|
1298
|
+
args: [{
|
|
1299
|
+
selector: 'kern-row',
|
|
1300
|
+
host: {
|
|
1301
|
+
class: 'kern-row',
|
|
1302
|
+
'[class.kern-align-items-start]': 'verticalAlign() === "start"',
|
|
1303
|
+
'[class.kern-align-items-center]': 'verticalAlign() === "center"',
|
|
1304
|
+
'[class.kern-align-items-end]': 'verticalAlign() === "end"',
|
|
1305
|
+
'[class.kern-justify-content-start]': 'horizontalAlign() === "start"',
|
|
1306
|
+
'[class.kern-justify-content-center]': 'horizontalAlign() === "center"',
|
|
1307
|
+
'[class.kern-justify-content-end]': 'horizontalAlign() === "end"',
|
|
1308
|
+
'[class.kern-justify-content-around]': 'horizontalAlign() === "around"',
|
|
1309
|
+
'[class.kern-justify-content-between]': 'horizontalAlign() === "between"',
|
|
1310
|
+
'[class.kern-justify-content-evenly]': 'horizontalAlign() === "evenly"'
|
|
1311
|
+
},
|
|
1312
|
+
template: '<ng-content />'
|
|
1313
|
+
}]
|
|
1314
|
+
}] });
|
|
1315
|
+
|
|
1316
|
+
class KernCol {
|
|
1317
|
+
size = input({}, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
1318
|
+
offset = input({}, ...(ngDevMode ? [{ debugName: "offset" }] : []));
|
|
1319
|
+
get colClasses() {
|
|
1320
|
+
const classes = [];
|
|
1321
|
+
const size = this.size();
|
|
1322
|
+
if (typeof size === 'number') {
|
|
1323
|
+
classes.push(`kern-col-${size}`);
|
|
1324
|
+
}
|
|
1325
|
+
else {
|
|
1326
|
+
for (const [bp, val] of Object.entries(size)) {
|
|
1327
|
+
classes.push(bp === 'base' ? `kern-col-${val}` : `kern-col-${bp}-${val}`);
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1330
|
+
if (classes.length === 0) {
|
|
1331
|
+
classes.push('kern-col');
|
|
1332
|
+
}
|
|
1333
|
+
const offset = this.offset();
|
|
1334
|
+
if (typeof offset === 'number') {
|
|
1335
|
+
classes.push(`kern-col-offset-${offset}`);
|
|
1336
|
+
}
|
|
1337
|
+
else {
|
|
1338
|
+
for (const [bp, val] of Object.entries(offset)) {
|
|
1339
|
+
classes.push(bp === 'base'
|
|
1340
|
+
? `kern-col-offset-${val}`
|
|
1341
|
+
: `kern-col-${bp}-offset-${val}`);
|
|
1342
|
+
}
|
|
1343
|
+
}
|
|
1344
|
+
return classes;
|
|
1345
|
+
}
|
|
1346
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernCol, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1347
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", 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 });
|
|
1348
|
+
}
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernCol, decorators: [{
|
|
1350
|
+
type: Component,
|
|
1351
|
+
args: [{
|
|
1352
|
+
selector: 'kern-col',
|
|
1353
|
+
standalone: true,
|
|
1354
|
+
template: '<ng-content />',
|
|
1355
|
+
host: {
|
|
1356
|
+
'[class]': "colClasses.join(' ')"
|
|
1357
|
+
}
|
|
1358
|
+
}]
|
|
1359
|
+
}] });
|
|
1360
|
+
|
|
1317
1361
|
class KernAngularKitModule {
|
|
1318
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1319
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
1362
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1363
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: KernAngularKitModule, imports: [KernAccordion,
|
|
1320
1364
|
KernAccordionGroup,
|
|
1321
1365
|
KernAlert,
|
|
1322
1366
|
KernDialog,
|
|
@@ -1342,11 +1386,15 @@ class KernAngularKitModule {
|
|
|
1342
1386
|
KernLink,
|
|
1343
1387
|
KernProgress,
|
|
1344
1388
|
KernDivider,
|
|
1389
|
+
KernKopfzeile,
|
|
1345
1390
|
KernTable,
|
|
1346
1391
|
KernDescriptionList,
|
|
1347
1392
|
KernTasklist,
|
|
1348
1393
|
KernSummary,
|
|
1349
1394
|
KernSummaryGroup,
|
|
1395
|
+
KernContainer,
|
|
1396
|
+
KernRow,
|
|
1397
|
+
KernCol,
|
|
1350
1398
|
KernBody,
|
|
1351
1399
|
KernLabel,
|
|
1352
1400
|
KernList,
|
|
@@ -1378,21 +1426,25 @@ class KernAngularKitModule {
|
|
|
1378
1426
|
KernLink,
|
|
1379
1427
|
KernProgress,
|
|
1380
1428
|
KernDivider,
|
|
1429
|
+
KernKopfzeile,
|
|
1381
1430
|
KernTable,
|
|
1382
1431
|
KernDescriptionList,
|
|
1383
1432
|
KernTasklist,
|
|
1384
1433
|
KernSummary,
|
|
1385
1434
|
KernSummaryGroup,
|
|
1435
|
+
KernContainer,
|
|
1436
|
+
KernRow,
|
|
1437
|
+
KernCol,
|
|
1386
1438
|
KernBody,
|
|
1387
1439
|
KernLabel,
|
|
1388
1440
|
KernList,
|
|
1389
1441
|
KernTitle,
|
|
1390
1442
|
KernPreline,
|
|
1391
1443
|
KernSubline] });
|
|
1392
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
1444
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAngularKitModule, imports: [KernInputDate,
|
|
1393
1445
|
KernInputFile] });
|
|
1394
1446
|
}
|
|
1395
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1447
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAngularKitModule, decorators: [{
|
|
1396
1448
|
type: NgModule,
|
|
1397
1449
|
args: [{
|
|
1398
1450
|
imports: [
|
|
@@ -1422,11 +1474,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1422
1474
|
KernLink,
|
|
1423
1475
|
KernProgress,
|
|
1424
1476
|
KernDivider,
|
|
1477
|
+
KernKopfzeile,
|
|
1425
1478
|
KernTable,
|
|
1426
1479
|
KernDescriptionList,
|
|
1427
1480
|
KernTasklist,
|
|
1428
1481
|
KernSummary,
|
|
1429
1482
|
KernSummaryGroup,
|
|
1483
|
+
KernContainer,
|
|
1484
|
+
KernRow,
|
|
1485
|
+
KernCol,
|
|
1430
1486
|
KernBody,
|
|
1431
1487
|
KernLabel,
|
|
1432
1488
|
KernList,
|
|
@@ -1461,11 +1517,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1461
1517
|
KernLink,
|
|
1462
1518
|
KernProgress,
|
|
1463
1519
|
KernDivider,
|
|
1520
|
+
KernKopfzeile,
|
|
1464
1521
|
KernTable,
|
|
1465
1522
|
KernDescriptionList,
|
|
1466
1523
|
KernTasklist,
|
|
1467
1524
|
KernSummary,
|
|
1468
1525
|
KernSummaryGroup,
|
|
1526
|
+
KernContainer,
|
|
1527
|
+
KernRow,
|
|
1528
|
+
KernCol,
|
|
1469
1529
|
KernBody,
|
|
1470
1530
|
KernLabel,
|
|
1471
1531
|
KernList,
|
|
@@ -1490,11 +1550,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1490
1550
|
* Import this module to allow Angular to recognize KERN components as valid custom elements
|
|
1491
1551
|
*/
|
|
1492
1552
|
class KernElementsModule {
|
|
1493
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1494
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.
|
|
1495
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.
|
|
1553
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1554
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: KernElementsModule });
|
|
1555
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernElementsModule });
|
|
1496
1556
|
}
|
|
1497
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernElementsModule, decorators: [{
|
|
1498
1558
|
type: NgModule,
|
|
1499
1559
|
args: [{
|
|
1500
1560
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
|
@@ -1504,19 +1564,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1504
1564
|
* Type guards for KERN custom elements
|
|
1505
1565
|
*/
|
|
1506
1566
|
function isKernAccordion(element) {
|
|
1507
|
-
return element
|
|
1567
|
+
return element?.tagName.toLowerCase() === 'kern-accordion';
|
|
1508
1568
|
}
|
|
1509
1569
|
function isKernAlert(element) {
|
|
1510
|
-
return element
|
|
1570
|
+
return element?.tagName.toLowerCase() === 'kern-alert';
|
|
1571
|
+
}
|
|
1572
|
+
function isKernBadge(element) {
|
|
1573
|
+
return element?.tagName.toLowerCase() === 'kern-badge';
|
|
1574
|
+
}
|
|
1575
|
+
function isKernButton(element) {
|
|
1576
|
+
return element?.tagName.toLowerCase() === 'kern-button';
|
|
1577
|
+
}
|
|
1578
|
+
function isKernCard(element) {
|
|
1579
|
+
return element?.tagName.toLowerCase() === 'kern-card';
|
|
1511
1580
|
}
|
|
1512
1581
|
function isKernDialog(element) {
|
|
1513
|
-
return element
|
|
1582
|
+
return element?.tagName.toLowerCase() === 'kern-dialog';
|
|
1583
|
+
}
|
|
1584
|
+
function isKernIcon(element) {
|
|
1585
|
+
return element?.tagName.toLowerCase() === 'kern-icon';
|
|
1586
|
+
}
|
|
1587
|
+
function isKernLink(element) {
|
|
1588
|
+
return element?.tagName.toLowerCase() === 'kern-link';
|
|
1514
1589
|
}
|
|
1515
1590
|
function isKernLoader(element) {
|
|
1516
|
-
return element
|
|
1591
|
+
return element?.tagName.toLowerCase() === 'kern-loader';
|
|
1592
|
+
}
|
|
1593
|
+
function isKernProgress(element) {
|
|
1594
|
+
return element?.tagName.toLowerCase() === 'kern-progress';
|
|
1595
|
+
}
|
|
1596
|
+
function isKernKopfzeile(element) {
|
|
1597
|
+
return element?.tagName.toLowerCase() === 'kern-kopfzeile';
|
|
1598
|
+
}
|
|
1599
|
+
function isKernTable(element) {
|
|
1600
|
+
return element?.tagName.toLowerCase() === 'kern-table';
|
|
1601
|
+
}
|
|
1602
|
+
function isKernSummary(element) {
|
|
1603
|
+
return element?.tagName.toLowerCase() === 'kern-summary';
|
|
1517
1604
|
}
|
|
1518
1605
|
function isKernInput(element) {
|
|
1519
|
-
return element
|
|
1606
|
+
return element?.tagName.toLowerCase().startsWith('kern-input-') ?? false;
|
|
1607
|
+
}
|
|
1608
|
+
function isKernContainer(element) {
|
|
1609
|
+
return element?.tagName.toLowerCase() === 'kern-container';
|
|
1610
|
+
}
|
|
1611
|
+
function isKernRow(element) {
|
|
1612
|
+
return element?.tagName.toLowerCase() === 'kern-row';
|
|
1613
|
+
}
|
|
1614
|
+
function isKernCol(element) {
|
|
1615
|
+
return element?.tagName.toLowerCase() === 'kern-col';
|
|
1520
1616
|
}
|
|
1521
1617
|
|
|
1522
1618
|
/*
|
|
@@ -1527,5 +1623,5 @@ function isKernInput(element) {
|
|
|
1527
1623
|
* Generated bundle index. Do not edit.
|
|
1528
1624
|
*/
|
|
1529
1625
|
|
|
1530
|
-
export { ControlValueAccessorDirective, KernAccordion, KernAccordionGroup, KernAlert, KernAngularKitModule, KernBadge, KernBody, KernButton, KernCard, KernDescriptionList, KernDialog, KernDivider, KernElementsModule, KernFieldset, KernHeading, KernIcon, KernInputCheckbox, KernInputDate, KernInputEmail, KernInputFile, KernInputNumber, KernInputPassword, KernInputRadio, KernInputSelect, KernInputTel, KernInputText, KernInputTextarea, KernInputUrl, KernLabel, KernLink, KernList, KernLoader, KernPreline, KernProgress, KernSubline, KernSummary, KernSummaryGroup, KernTable, KernTasklist, KernTitle, UniqueIdService, isKernAccordion, isKernAlert, isKernDialog, isKernInput, isKernLoader };
|
|
1626
|
+
export { ControlValueAccessorDirective, KernAccordion, KernAccordionGroup, KernAlert, KernAngularKitModule, KernBadge, KernBody, KernButton, KernCard, KernCol, KernContainer, KernDescriptionList, KernDialog, KernDivider, KernElementsModule, KernFieldset, KernHeading, KernIcon, KernInputCheckbox, KernInputDate, KernInputEmail, KernInputError, KernInputFile, KernInputHint, KernInputNumber, KernInputPassword, KernInputRadio, KernInputSelect, KernInputTel, KernInputText, KernInputTextarea, KernInputUrl, KernKopfzeile, KernLabel, KernLink, KernList, KernLoader, KernPreline, KernProgress, KernRow, KernSubline, KernSummary, KernSummaryGroup, KernTable, KernTasklist, KernTitle, UniqueIdService, isKernAccordion, isKernAlert, isKernBadge, isKernButton, isKernCard, isKernCol, isKernContainer, isKernDialog, isKernIcon, isKernInput, isKernKopfzeile, isKernLink, isKernLoader, isKernProgress, isKernRow, isKernSummary, isKernTable };
|
|
1531
1627
|
//# sourceMappingURL=kern-ux-annex-kern-angular-kit.mjs.map
|