import * as i0 from '@angular/core';
import { input, HostBinding, Directive, Component, Injectable, inject, ElementRef, Renderer2, booleanAttribute, output, computed, viewChild, signal, forwardRef, TemplateRef, ChangeDetectionStrategy, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';

class KernTitle {
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    baseClass = true;
    get isSmall() {
        return this.size() === 'small';
    }
    get isLarge() {
        return this.size() === 'large';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernTitle, decorators: [{
            type: Directive,
            args: [{
                    selector: 'h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]',
                    standalone: true
                }]
        }], propDecorators: { baseClass: [{
                type: HostBinding,
                args: ['class.kern-title']
            }], isSmall: [{
                type: HostBinding,
                args: ['class.kern-title--small']
            }], isLarge: [{
                type: HostBinding,
                args: ['class.kern-title--large']
            }] } });

class KernAccordion {
    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAccordion, decorators: [{
            type: Component,
            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"] }]
        }] });

class KernAccordionGroup {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAccordionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: KernAccordionGroup, isStandalone: true, selector: "kern-accordion-group", host: { classAttribute: "kern-accordion-group" }, ngImport: i0, template: `<ng-content />`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAccordionGroup, decorators: [{
            type: Component,
            args: [{
                    selector: 'kern-accordion-group',
                    host: { class: 'kern-accordion-group' },
                    template: `<ng-content />`
                }]
        }] });

class KernIcon {
    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
    ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", 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"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernIcon, decorators: [{
            type: Component,
            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"] }]
        }] });

class KernAlert {
    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAlert, decorators: [{
            type: Component,
            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"] }]
        }] });

class UniqueIdService {
    counter = 0;
    getUniqueId(prefix = '') {
        return prefix + '_' + (this.counter++).toString();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UniqueIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UniqueIdService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: UniqueIdService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }] });

class KernLabel {
    optionalSpan;
    elementRef = inject(ElementRef);
    renderer = inject(Renderer2);
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional", transform: booleanAttribute }] : [{
            transform: booleanAttribute
        }]));
    srOnly = input(false, ...(ngDevMode ? [{ debugName: "srOnly", transform: booleanAttribute }] : [{
            transform: booleanAttribute
        }]));
    baseClass = true;
    get isSmall() {
        return this.size() === 'small';
    }
    get isLarge() {
        return this.size() === 'large';
    }
    get isSrOnly() {
        return this.srOnly();
    }
    ngOnChanges(changes) {
        if (changes['optional']) {
            if (this.optional()) {
                if (!this.optionalSpan) {
                    this.optionalSpan = this.renderer.createElement('span');
                    this.renderer.addClass(this.optionalSpan, 'kern-label__optional');
                    this.renderer.setAttribute(this.optionalSpan, 'i18n', '@@kernAngularKit.label.optional');
                    this.renderer.setProperty(this.optionalSpan, 'textContent', '- Optional');
                    this.renderer.appendChild(this.elementRef.nativeElement, this.optionalSpan);
                }
            }
            else if (this.optionalSpan) {
                this.renderer.removeChild(this.elementRef.nativeElement, this.optionalSpan);
                this.optionalSpan = undefined;
            }
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", 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": "this.baseClass", "class.kern-label--small": "this.isSmall", "class.kern-label--large": "this.isLarge", "class.kern-sr-only": "this.isSrOnly" } }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernLabel, decorators: [{
            type: Directive,
            args: [{
                    selector: 'label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]',
                    standalone: true
                }]
        }], propDecorators: { baseClass: [{
                type: HostBinding,
                args: ['class.kern-label']
            }], isSmall: [{
                type: HostBinding,
                args: ['class.kern-label--small']
            }], isLarge: [{
                type: HostBinding,
                args: ['class.kern-label--large']
            }], isSrOnly: [{
                type: HostBinding,
                args: ['class.kern-sr-only']
            }] } });

class KernButton {
    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
    block = input(false, ...(ngDevMode ? [{ debugName: "block" }] : []));
    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
    iconLeft = input(null, ...(ngDevMode ? [{ debugName: "iconLeft" }] : []));
    iconRight = input(null, ...(ngDevMode ? [{ debugName: "iconRight" }] : []));
    srOnlyLabel = input(false, ...(ngDevMode ? [{ debugName: "srOnlyLabel" }] : []));
    clickEvent = output();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernButton, decorators: [{
            type: Component,
            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"] }]
        }] });

class KernDialog {
    dialogId = input(...(ngDevMode ? [undefined, { debugName: "dialogId" }] : []));
    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
    btnCloseLabelText = input('Schließen', ...(ngDevMode ? [{ debugName: "btnCloseLabelText" }] : []));
    btnPrimaryLabelText = input(null, ...(ngDevMode ? [{ debugName: "btnPrimaryLabelText" }] : []));
    btnSecondaryLabelText = input(null, ...(ngDevMode ? [{ debugName: "btnSecondaryLabelText" }] : []));
    cancelEvent = output();
    btnPrimaryClickEvent = output();
    btnSecondaryClickEvent = output();
    generatedId = inject(UniqueIdService).getUniqueId('dialog');
    effectiveId = computed(() => this.dialogId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    dialog = viewChild.required('dialog');
    showModal() {
        this.dialog().nativeElement?.showModal();
    }
    closeModal() {
        this.dialog().nativeElement?.close();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernDialog, decorators: [{
            type: Component,
            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" }]
        }] });

class KernLoader {
    text = input('Wird geladen...', ...(ngDevMode ? [{ debugName: "text" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", 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" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernLoader, decorators: [{
            type: Component,
            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" }]
        }] });

class KernBadge {
    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : []));
    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernBadge, decorators: [{
            type: Component,
            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" }]
        }] });

class KernPreline {
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    baseClass = true;
    get isSmall() {
        return this.size() === 'small';
    }
    get isLarge() {
        return this.size() === 'large';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernPreline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernPreline, decorators: [{
            type: Directive,
            args: [{
                    selector: 'h1[kernPreline], h2[kernPreline], h3[kernPreline], h4[kernPreline], h5[kernPreline], h6[kernPreline], span[kernPreline], p[kernPreline]',
                    standalone: true
                }]
        }], propDecorators: { baseClass: [{
                type: HostBinding,
                args: ['class.kern-preline']
            }], isSmall: [{
                type: HostBinding,
                args: ['class.kern-preline--small']
            }], isLarge: [{
                type: HostBinding,
                args: ['class.kern-preline--large']
            }] } });

class KernSubline {
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    baseClass = true;
    get isSmall() {
        return this.size() === 'small';
    }
    get isLarge() {
        return this.size() === 'large';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernSubline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernSubline, decorators: [{
            type: Directive,
            args: [{
                    selector: 'h1[kernSubline], h2[kernSubline], h3[kernSubline], h4[kernSubline], h5[kernSubline], h6[kernSubline], span[kernSubline], p[kernSubline]',
                    standalone: true
                }]
        }], propDecorators: { baseClass: [{
                type: HostBinding,
                args: ['class.kern-subline']
            }], isSmall: [{
                type: HostBinding,
                args: ['class.kern-subline--small']
            }], isLarge: [{
                type: HostBinding,
                args: ['class.kern-subline--large']
            }] } });

class KernCard {
    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
    titleLinkHref = input(null, ...(ngDevMode ? [{ debugName: "titleLinkHref" }] : []));
    titleLinkTarget = input('_self', ...(ngDevMode ? [{ debugName: "titleLinkTarget" }] : []));
    preline = input(null, ...(ngDevMode ? [{ debugName: "preline" }] : []));
    subline = input(null, ...(ngDevMode ? [{ debugName: "subline" }] : []));
    imgSrc = input(null, ...(ngDevMode ? [{ debugName: "imgSrc" }] : []));
    imgAlt = input(null, ...(ngDevMode ? [{ debugName: "imgAlt" }] : []));
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    headingLevel = input('2', ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
    btnPrimaryLabelText = input(null, ...(ngDevMode ? [{ debugName: "btnPrimaryLabelText" }] : []));
    btnSecondaryLabelText = input(null, ...(ngDevMode ? [{ debugName: "btnSecondaryLabelText" }] : []));
    titleLinkClickEvent = output();
    btnPrimaryClickEvent = output();
    btnSecondaryClickEvent = output();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernCard, decorators: [{
            type: Component,
            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"] }]
        }] });

class KernDivider {
    ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", 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" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernDivider, decorators: [{
            type: Component,
            args: [{ selector: 'kern-divider', template: "<hr class=\"kern-divider\" [attr.aria-hidden]=\"ariaHidden()\" />\n" }]
        }] });

class KernLink {
    href = input(null, ...(ngDevMode ? [{ debugName: "href" }] : []));
    target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
    small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
    stretched = input(false, ...(ngDevMode ? [{ debugName: "stretched" }] : []));
    iconLeft = input(null, ...(ngDevMode ? [{ debugName: "iconLeft" }] : []));
    iconRight = input(null, ...(ngDevMode ? [{ debugName: "iconRight" }] : []));
    linkDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "linkDescribedBy" }] : []));
    clickEvent = output();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernLink, decorators: [{
            type: Component,
            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"] }]
        }] });

class KernProgress {
    progressId = input(...(ngDevMode ? [undefined, { debugName: "progressId" }] : []));
    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : []));
    labelPosition = input('top', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('progress');
    effectiveId = computed(() => this.progressId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernProgress, decorators: [{
            type: Component,
            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" }]
        }] });

class KernHeading {
    elementRef = inject(ElementRef);
    renderer = inject(Renderer2);
    level = input('1', ...(ngDevMode ? [{ debugName: "level" }] : []));
    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : []));
    // Compute the CSS class based on level (with default size mapping) and optional size override
    cssClass = computed(() => {
        const sizeOverride = this.size();
        const effectiveSize = sizeOverride || this.getDefaultSizeForLevel(this.level());
        // Map to actual CSS classes available for kern-heading
        if (effectiveSize === 'display') {
            return 'kern-heading-display';
        }
        else if (effectiveSize === 'x-large') {
            return 'kern-heading-x-large';
        }
        else if (effectiveSize === 'large') {
            return 'kern-heading-large';
        }
        else if (effectiveSize === 'medium') {
            return 'kern-heading-medium';
        }
        else if (effectiveSize === 'small') {
            return 'kern-heading-small';
        }
        else {
            // Default case
            return 'kern-heading-medium';
        }
    }, ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
    ngAfterViewInit() {
        const hostElement = this.elementRef.nativeElement;
        const level = this.level();
        // Create the appropriate heading element
        const headingElement = this.renderer.createElement(`h${level}`);
        // Add CSS class
        this.renderer.addClass(headingElement, this.cssClass());
        // Move all child nodes (including ng-content) to the heading element
        while (hostElement.firstChild) {
            this.renderer.appendChild(headingElement, hostElement.firstChild);
        }
        // Add the heading element to the host
        this.renderer.appendChild(hostElement, headingElement);
    }
    // Map HTML heading levels to default KERN heading sizes
    getDefaultSizeForLevel(level) {
        const levelToSizeMap = {
            '1': 'display', // h1 -> kern-heading-display (largest)
            '2': 'x-large', // h2 -> kern-heading-x-large
            '3': 'large', // h3 -> kern-heading-large
            '4': 'medium', // h4 -> kern-heading-medium
            '5': 'small', // h5 -> kern-heading-small
            '6': 'small' // h6 -> kern-heading-small (smallest available)
        };
        return levelToSizeMap[level] || 'medium';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", 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"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernHeading, decorators: [{
            type: Component,
            args: [{ selector: 'kern-heading', template: `<ng-content />`, styles: [":host{display:contents}\n"] }]
        }] });

class KernBody {
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    weight = input('default', ...(ngDevMode ? [{ debugName: "weight" }] : []));
    baseClass = true;
    get isSmall() {
        return this.size() === 'small';
    }
    get isLarge() {
        return this.size() === 'large';
    }
    get isBold() {
        return this.weight() === 'bold';
    }
    get isMuted() {
        return this.weight() === 'muted';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernBody, decorators: [{
            type: Directive,
            args: [{
                    selector: 'p[kernBody], span[kernBody]',
                    standalone: true
                }]
        }], propDecorators: { baseClass: [{
                type: HostBinding,
                args: ['class.kern-body']
            }], isSmall: [{
                type: HostBinding,
                args: ['class.kern-body--small']
            }], isLarge: [{
                type: HostBinding,
                args: ['class.kern-body--large']
            }], isBold: [{
                type: HostBinding,
                args: ['class.kern-body--bold']
            }], isMuted: [{
                type: HostBinding,
                args: ['class.kern-body--muted']
            }] } });

class KernList {
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    type = input('simple', ...(ngDevMode ? [{ debugName: "type" }] : []));
    baseClass = true;
    get isSmall() {
        return this.size() === 'small';
    }
    get isLarge() {
        return this.size() === 'large';
    }
    get isBulletType() {
        return this.type() === 'bullet';
    }
    get isNumberType() {
        return this.type() === 'number';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernList, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ul[kernList], ol[kernList]',
                    standalone: true
                }]
        }], propDecorators: { baseClass: [{
                type: HostBinding,
                args: ['class.kern-list']
            }], isSmall: [{
                type: HostBinding,
                args: ['class.kern-list--small']
            }], isLarge: [{
                type: HostBinding,
                args: ['class.kern-list--large']
            }], isBulletType: [{
                type: HostBinding,
                args: ['class.kern-list--bullet']
            }], isNumberType: [{
                type: HostBinding,
                args: ['class.kern-list--number']
            }] } });

class ControlValueAccessorDirective {
    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    onChange = (_value) => { };
    onTouched = () => { };
    changeValue(value) {
        this.value.set(value);
        this.onChange(value);
    }
    markTouched() {
        this.onTouched();
    }
    writeValue(value) {
        this.value.set(value);
    }
    registerOnChange(onChange) {
        this.onChange = onChange;
    }
    registerOnTouched(onTouched) {
        this.onTouched = onTouched;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(isDisabled);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ControlValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: ControlValueAccessorDirective, isStandalone: true, selector: "[kernControlValueAccessor]", providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => ControlValueAccessorDirective),
                multi: true
            }
        ], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ControlValueAccessorDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kernControlValueAccessor]',
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => ControlValueAccessorDirective),
                            multi: true
                        }
                    ]
                }]
        }] });

class KernInputCheckbox {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelTemplate = input(null, ...(ngDevMode ? [{ debugName: "labelTemplate" }] : []));
    labelText = input(null, ...(ngDevMode ? [{ debugName: "labelText" }] : []));
    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-checkbox');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    onChange(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputCheckbox, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputError {
    effectiveId = input.required(...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputError, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", 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">
    <kern-icon name="danger" />
    <span kernBody>{{ text() }}</span>
  </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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputError, decorators: [{
            type: Component,
            args: [{ selector: 'kern-input-error', imports: [KernIcon, KernBody], template: `<p class="kern-error" [id]="effectiveId() + '-error'" role="alert">
    <kern-icon name="danger" />
    <span kernBody>{{ text() }}</span>
  </p>`, styles: [":host{display:contents}\n"] }]
        }] });

class KernInputHint {
    hint = input.required(...(ngDevMode ? [{ debugName: "hint", transform: (value) => {
                return {
                    template: value instanceof TemplateRef ? value : null,
                    text: typeof value === 'string' ? value : ''
                };
            } }] : [{
            transform: (value) => {
                return {
                    template: value instanceof TemplateRef ? value : null,
                    text: typeof value === 'string' ? value : ''
                };
            }
        }]));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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) {
      <ng-container [ngTemplateOutlet]="templateRef" />
    } @else {
      {{ hint().text }}
    }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputHint, decorators: [{
            type: Component,
            args: [{
                    selector: 'kern-input-hint',
                    imports: [NgTemplateOutlet],
                    host: { class: 'kern-hint' },
                    template: `@if (hint().template; as templateRef) {
      <ng-container [ngTemplateOutlet]="templateRef" />
    } @else {
      {{ hint().text }}
    }`
                }]
        }] });

class KernFieldset {
    fieldsetId = input(...(ngDevMode ? [undefined, { debugName: "fieldsetId" }] : []));
    legendText = input.required(...(ngDevMode ? [{ debugName: "legendText" }] : []));
    legendSize = input('large', ...(ngDevMode ? [{ debugName: "legendSize" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    horizontalAlignment = input(false, ...(ngDevMode ? [{ debugName: "horizontalAlignment" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('fieldset');
    effectiveId = computed(() => this.fieldsetId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    fieldsetDescribedBy = computed(() => {
        return this.hintTemplate() !== null || this.hintText()
            ? this.effectiveId() + '-hint'
            : null;
    }, ...(ngDevMode ? [{ debugName: "fieldsetDescribedBy" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernFieldset, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputDate {
    fieldsetId = input(...(ngDevMode ? [undefined, { debugName: "fieldsetId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('fieldset-date');
    effectiveId = computed(() => this.fieldsetId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        return this.errorText() ? this.effectiveId() + '-error' : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    dayInput = viewChild.required('dayInput');
    monthInput = viewChild.required('monthInput');
    yearInput = viewChild.required('yearInput');
    day = null;
    month = null;
    year = null;
    onChange = (value) => { };
    onTouched = () => { };
    writeValue(value) {
        this.day = null;
        this.month = null;
        this.year = null;
        if (value !== null) {
            const [yearStr, monthStr, dayStr] = value.split('-');
            const day = parseInt(dayStr ?? '');
            if (!isNaN(day) && day >= 1 && day <= 31) {
                this.day = day;
            }
            const month = parseInt(monthStr ?? '');
            if (!isNaN(month) && month >= 1 && month <= 12) {
                this.month = month;
            }
            const year = parseInt(yearStr ?? '');
            if (!isNaN(year) && year >= 1000 && year <= 9999) {
                this.year = year;
            }
        }
        this.renderValue();
    }
    ngAfterViewInit() {
        this.renderValue();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    onKeydown(event, type) {
        if (event.target &&
            event.target instanceof HTMLInputElement &&
            (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            this.onBlur(event, type);
        }
    }
    onInput(event, type) {
        if (!event.target) {
            return;
        }
        const input = event.target;
        input.value = input.value.replace(/\D/g, '');
        const value = parseInt(input.value);
        switch (type) {
            case 'day':
                if (isNaN(value) || value < 1 || value > 31) {
                    this.day = null;
                }
                else {
                    this.day = value;
                }
                break;
            case 'month':
                if (isNaN(value) || value < 1 || value > 12) {
                    this.month = null;
                }
                else {
                    this.month = value;
                }
                break;
            case 'year':
                if (isNaN(value) || value < 1000 || value > 9999) {
                    this.year = null;
                }
                else {
                    this.year = value;
                }
                break;
        }
    }
    renderValue() {
        const dayInput = this.dayInput().nativeElement;
        const monthInput = this.monthInput().nativeElement;
        const yearInput = this.yearInput().nativeElement;
        if (!dayInput || !monthInput || !yearInput) {
            return;
        }
        if (this.day === null) {
            dayInput.value = '';
        }
        else {
            dayInput.value = this.day.toString().padStart(2, '0');
        }
        if (this.month === null) {
            monthInput.value = '';
        }
        else {
            monthInput.value = this.month.toString().padStart(2, '0');
        }
        if (this.year === null) {
            yearInput.value = '';
        }
        else {
            yearInput.value = this.year.toString();
        }
    }
    onBlur(event, type) {
        if (!event.target) {
            return;
        }
        this.onInput(event, type);
        this.renderValue();
        this.onChange(this.value);
        if ((this.day !== null && this.month !== null && this.year !== null) ||
            type === 'year') {
            this.onTouched();
        }
    }
    get value() {
        if (this.day === null || this.month === null || this.year === null) {
            return null;
        }
        return (this.year.toString() +
            '-' +
            this.month.toString().padStart(2, '0') +
            '-' +
            this.day.toString().padStart(2, '0'));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.4", 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: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: forwardRef(() => KernInputDate)
            }
        ], 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)=\"onInput($event, 'day')\"\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)=\"onInput($event, 'month')\"\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)=\"onInput($event, 'year')\"\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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputDate, decorators: [{
            type: Component,
            args: [{ selector: 'kern-input-date', imports: [FormsModule, KernLabel, KernFieldset], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: forwardRef(() => KernInputDate)
                        }
                    ], 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)=\"onInput($event, 'day')\"\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)=\"onInput($event, 'month')\"\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)=\"onInput($event, 'year')\"\n      (change)=\"onInput($event, 'year')\"\n      (keydown)=\"onKeydown($event, 'year')\"\n      (blur)=\"onBlur($event, 'year')\"\n    />\n  </div>\n</kern-fieldset>\n" }]
        }] });

class KernInputEmail {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-email');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    onKeydown(event) {
        if (event.target &&
            event.target instanceof HTMLInputElement &&
            (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            this.cva.markTouched();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputEmail, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputEmail, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputFile {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    accept = input(null, ...(ngDevMode ? [{ debugName: "accept" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-file');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    fileInput = viewChild.required('fileInput');
    get fileList() {
        return this.fileInput().nativeElement?.files ?? null;
    }
    onChange(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputFile, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputFile, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputNumber {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : []));
    autocomplete = input(null, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-number');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    onInput(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    onKeydown(event) {
        if (event.target &&
            event.target instanceof HTMLInputElement &&
            (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            this.cva.markTouched();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputNumber, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputPassword {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-password');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    onInput(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    onKeydown(event) {
        if (event.target &&
            event.target instanceof HTMLInputElement &&
            (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            this.cva.markTouched();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputPassword, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputPassword, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputRadio {
    cva = inject(ControlValueAccessorDirective);
    fieldsetId = input(...(ngDevMode ? [undefined, { debugName: "fieldsetId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    horizontalAlignment = input(false, ...(ngDevMode ? [{ debugName: "horizontalAlignment" }] : []));
    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('fieldset-radio');
    effectiveId = computed(() => this.fieldsetId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    onKeydown(event) {
        if (event.target &&
            event.target instanceof HTMLInputElement &&
            (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            this.cva.markTouched();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputRadio, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputSelect {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-select');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    onInput(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    onKeydown(event) {
        if (event.target &&
            event.target instanceof HTMLInputElement &&
            (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            this.cva.markTouched();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputSelect, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputTel {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-tel');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    onInput(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    onKeydown(event) {
        if (event.target &&
            event.target instanceof HTMLInputElement &&
            (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            this.cva.markTouched();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputTel, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputTel, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputText {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    inputmode = input(null, ...(ngDevMode ? [{ debugName: "inputmode" }] : []));
    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
    autocomplete = input(null, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-text');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    onInput(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputText, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputText, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputTextarea {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-textarea');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    onInput(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputTextarea, decorators: [{
            type: Component,
            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" }]
        }] });

class KernInputUrl {
    cva = inject(ControlValueAccessorDirective);
    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
    labelText = input.required(...(ngDevMode ? [{ debugName: "labelText" }] : []));
    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    maxlength = input(null, ...(ngDevMode ? [{ debugName: "maxlength" }] : []));
    hintTemplate = input(null, ...(ngDevMode ? [{ debugName: "hintTemplate" }] : []));
    hintText = input(null, ...(ngDevMode ? [{ debugName: "hintText" }] : []));
    errorText = input(null, ...(ngDevMode ? [{ debugName: "errorText" }] : []));
    titleText = input(null, ...(ngDevMode ? [{ debugName: "titleText" }] : []));
    placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('input-url');
    effectiveId = computed(() => this.inputId() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "effectiveId" }] : []));
    inputDescribedBy = computed(() => {
        const baseId = this.effectiveId();
        const ids = [];
        if (this.hintTemplate() !== null || this.hintText()) {
            ids.push(`${baseId}-hint`);
        }
        if (this.errorText()) {
            ids.push(`${baseId}-error`);
        }
        return ids.length ? ids.join(' ') : null;
    }, ...(ngDevMode ? [{ debugName: "inputDescribedBy" }] : []));
    onInput(event) {
        const { value } = event.target;
        this.cva.changeValue(value);
    }
    onKeydown(event) {
        if (event.target &&
            event.target instanceof HTMLInputElement &&
            (event.code === 'Enter' || event.code === 'NumpadEnter')) {
            this.cva.markTouched();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputUrl, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernInputUrl, decorators: [{
            type: Component,
            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" }]
        }] });

class KernTable {
    responsive = input(true, ...(ngDevMode ? [{ debugName: "responsive" }] : []));
    small = input(false, ...(ngDevMode ? [{ debugName: "small" }] : []));
    striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : []));
    caption = input(null, ...(ngDevMode ? [{ debugName: "caption" }] : []));
    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
    footer = input(null, ...(ngDevMode ? [{ debugName: "footer" }] : []));
    rowHeaderKey = input(null, ...(ngDevMode ? [{ debugName: "rowHeaderKey" }] : []));
    getCellText(row, key) {
        return row?.[key] ?? '';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernTable, decorators: [{
            type: Component,
            args: [{ selector: 'kern-table', imports: [KernTitle], host: {
                        '[class.kern-table-responsive]': 'responsive()',
                        '[attr.tabindex]': 'responsive() ? 0 : null'
                    }, 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" }]
        }] });

class KernDescriptionList {
    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
    column = input(false, ...(ngDevMode ? [{ debugName: "column" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernDescriptionList, decorators: [{
            type: Component,
            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" }]
        }] });

class KernTasklist {
    tasks = input.required(...(ngDevMode ? [{ debugName: "tasks" }] : []));
    headingLevel = input('2', ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
    linkTarget = input('_self', ...(ngDevMode ? [{ debugName: "linkTarget" }] : []));
    generatedId = inject(UniqueIdService).getUniqueId('tasklist');
    getGeneratedStatusId(taskIndex, itemIndex) {
        return (this.generatedId + '_' + taskIndex.toString() + '_' + itemIndex.toString());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernTasklist, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernTasklist, decorators: [{
            type: Component,
            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" }]
        }] });

class KernSummary {
    titleId = input(...(ngDevMode ? [undefined, { debugName: "titleId" }] : []));
    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
    titleNumber = input(null, ...(ngDevMode ? [{ debugName: "titleNumber" }] : []));
    headingLevel = input('3', ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
    actionLinkHref = input(null, ...(ngDevMode ? [{ debugName: "actionLinkHref" }] : []));
    actionLinkTarget = input('_self', ...(ngDevMode ? [{ debugName: "actionLinkTarget" }] : []));
    actionLinkClickEvent = output();
    generatedTitleId = inject(UniqueIdService).getUniqueId('title');
    effectiveTitleId = computed(() => this.titleId() ?? this.generatedTitleId, ...(ngDevMode ? [{ debugName: "effectiveTitleId" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernSummary, decorators: [{
            type: Component,
            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" }]
        }] });

class KernSummaryGroup {
    heading = input(null, ...(ngDevMode ? [{ debugName: "heading" }] : []));
    headingLevel = input('2', ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernSummaryGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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: `
    @if (heading()) {
      <div class="kern-summary-group__header">
        <kern-heading [level]="headingLevel()" size="medium">{{
          heading()
        }}</kern-heading>
      </div>
    }
    <ng-content />
  `, isInline: true, dependencies: [{ kind: "component", type: KernHeading, selector: "kern-heading", inputs: ["level", "size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernSummaryGroup, decorators: [{
            type: Component,
            args: [{
                    selector: 'kern-summary-group',
                    imports: [KernHeading],
                    host: { class: 'kern-summary-group' },
                    template: `
    @if (heading()) {
      <div class="kern-summary-group__header">
        <kern-heading [level]="headingLevel()" size="medium">{{
          heading()
        }}</kern-heading>
      </div>
    }
    <ng-content />
  `
                }]
        }] });

class KernAngularKitModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAngularKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: KernAngularKitModule, imports: [KernAccordion,
            KernAccordionGroup,
            KernAlert,
            KernDialog,
            KernLoader,
            KernInputCheckbox,
            KernInputDate,
            KernInputEmail,
            KernInputFile,
            KernInputPassword,
            KernInputRadio,
            KernInputSelect,
            KernInputTel,
            KernInputText,
            KernInputTextarea,
            KernInputUrl,
            KernInputNumber,
            KernFieldset,
            KernHeading,
            KernButton,
            KernBadge,
            KernCard,
            KernIcon,
            KernLink,
            KernProgress,
            KernDivider,
            KernTable,
            KernDescriptionList,
            KernTasklist,
            KernSummary,
            KernSummaryGroup,
            KernBody,
            KernLabel,
            KernList,
            KernTitle,
            KernPreline,
            KernSubline], exports: [KernAccordion,
            KernAccordionGroup,
            KernAlert,
            KernDialog,
            KernLoader,
            KernInputCheckbox,
            KernInputDate,
            KernInputEmail,
            KernInputFile,
            KernInputPassword,
            KernInputRadio,
            KernInputSelect,
            KernInputTel,
            KernInputText,
            KernInputTextarea,
            KernInputUrl,
            KernInputNumber,
            KernFieldset,
            KernHeading,
            KernButton,
            KernBadge,
            KernCard,
            KernIcon,
            KernLink,
            KernProgress,
            KernDivider,
            KernTable,
            KernDescriptionList,
            KernTasklist,
            KernSummary,
            KernSummaryGroup,
            KernBody,
            KernLabel,
            KernList,
            KernTitle,
            KernPreline,
            KernSubline] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAngularKitModule, imports: [KernInputDate,
            KernInputFile] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernAngularKitModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        KernAccordion,
                        KernAccordionGroup,
                        KernAlert,
                        KernDialog,
                        KernLoader,
                        KernInputCheckbox,
                        KernInputDate,
                        KernInputEmail,
                        KernInputFile,
                        KernInputPassword,
                        KernInputRadio,
                        KernInputSelect,
                        KernInputTel,
                        KernInputText,
                        KernInputTextarea,
                        KernInputUrl,
                        KernInputNumber,
                        KernFieldset,
                        KernHeading,
                        KernButton,
                        KernBadge,
                        KernCard,
                        KernIcon,
                        KernLink,
                        KernProgress,
                        KernDivider,
                        KernTable,
                        KernDescriptionList,
                        KernTasklist,
                        KernSummary,
                        KernSummaryGroup,
                        KernBody,
                        KernLabel,
                        KernList,
                        KernTitle,
                        KernPreline,
                        KernSubline
                    ],
                    exports: [
                        KernAccordion,
                        KernAccordionGroup,
                        KernAlert,
                        KernDialog,
                        KernLoader,
                        KernInputCheckbox,
                        KernInputDate,
                        KernInputEmail,
                        KernInputFile,
                        KernInputPassword,
                        KernInputRadio,
                        KernInputSelect,
                        KernInputTel,
                        KernInputText,
                        KernInputTextarea,
                        KernInputUrl,
                        KernInputNumber,
                        KernFieldset,
                        KernHeading,
                        KernButton,
                        KernBadge,
                        KernCard,
                        KernIcon,
                        KernLink,
                        KernProgress,
                        KernDivider,
                        KernTable,
                        KernDescriptionList,
                        KernTasklist,
                        KernSummary,
                        KernSummaryGroup,
                        KernBody,
                        KernLabel,
                        KernList,
                        KernTitle,
                        KernPreline,
                        KernSubline
                    ]
                }]
        }] });

/**
 * TypeScript interfaces for KERN Angular Kit components
 * Provides IntelliSense support and type safety
 */

/**
 * Angular Element Type Definitions for KERN Angular Kit
 * Provides IntelliSense support for custom elements and JSX/TSX usage
 */
/**
 * Angular module that enables custom element schemas
 * Import this module to allow Angular to recognize KERN components as valid custom elements
 */
class KernElementsModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: KernElementsModule });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernElementsModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: KernElementsModule, decorators: [{
            type: NgModule,
            args: [{
                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
                }]
        }] });
/**
 * Type guards for KERN custom elements
 */
function isKernAccordion(element) {
    return element.tagName.toLowerCase() === 'kern-accordion';
}
function isKernAlert(element) {
    return element.tagName.toLowerCase() === 'kern-alert';
}
function isKernDialog(element) {
    return element.tagName.toLowerCase() === 'kern-dialog';
}
function isKernLoader(element) {
    return element.tagName.toLowerCase() === 'kern-loader';
}
function isKernInput(element) {
    return element.tagName.toLowerCase().startsWith('kern-input-');
}

/*
 * Public API Surface of kern-angular-kit
 */

/**
 * Generated bundle index. Do not edit.
 */

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 };
//# sourceMappingURL=kern-ux-annex-kern-angular-kit.mjs.map