@kern-ux-annex/kern-angular-kit/fesm2022/kern-ux-annex-kern-angular-kit.mjs

Angular-Umsetzung der KERN UX-Standard Komponenten

import * as i0 from '@angular/core';
import { input, 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" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: KernTitle, isStandalone: true, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-title--small": "size() === \"small\"", "class.kern-title--large": "size() === \"large\"" }, classAttribute: "kern-title" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernTitle, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        class: 'kern-title',
                        '[class.kern-title--small]': 'size() === "small"',
                        '[class.kern-title--large]': 'size() === "large"'
                    },
                    selector: 'h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]',
                    standalone: true
                }]
        }] });

class KernAccordion {
    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: KernAccordion, isStandalone: true, selector: "kern-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<details class=\"kern-accordion\" [open]=\"open()\">\n  <summary class=\"kern-accordion__header\">\n    <span kernTitle>{{ title() }}</span>\n  </summary>\n  <section class=\"kern-accordion__body\">\n    <ng-content />\n  </section>\n</details>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernAccordionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: KernAccordionGroup, isStandalone: true, selector: "kern-accordion-group", host: { classAttribute: "kern-accordion-group" }, ngImport: i0, template: `<ng-content />`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: KernIcon, isStandalone: true, selector: "kern-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"kern-icon kern-icon--{{ name() }}\"\n  [attr.aria-hidden]=\"ariaHidden()\"\n  [class.kern-icon--small]=\"size() === 'small'\"\n  [class.kern-icon--large]=\"size() === 'large'\"\n  [class.kern-icon--x-large]=\"size() === 'x-large'\"\n></span>\n", styles: [":host{display:contents}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: KernAlert, isStandalone: true, selector: "kern-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kern-alert kern-alert--{{ variant() }}\" role=\"alert\">\n  <div class=\"kern-alert__header\">\n    <kern-icon [name]=\"variant()\"></kern-icon>\n    <span kernTitle>{{ title() }}</span>\n  </div>\n  <div class=\"kern-alert__body\"><ng-content /></div>\n</div>\n", styles: [".kern-alert__body:empty{display:none}\n"], dependencies: [{ kind: "component", type: KernIcon, selector: "kern-icon", inputs: ["name", "ariaHidden", "size"] }, { kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: UniqueIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UniqueIdService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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
        }]));
    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.2.3", ngImport: i0, type: KernLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: KernLabel, isStandalone: true, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, srOnly: { classPropertyName: "srOnly", publicName: "srOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-label--small": "size() === \"small\"", "class.kern-label--large": "size() === \"large\"", "class.kern-sr-only": "srOnly()" }, classAttribute: "kern-label" }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernLabel, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        class: 'kern-label',
                        '[class.kern-label--small]': 'size() === "small"',
                        '[class.kern-label--large]': 'size() === "large"',
                        '[class.kern-sr-only]': 'srOnly()'
                    },
                    selector: 'label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]',
                    standalone: true
                }]
        }] });

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.2.3", ngImport: i0, type: KernButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: KernButton, isStandalone: true, selector: "kern-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, srOnlyLabel: { classPropertyName: "srOnlyLabel", publicName: "srOnlyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<button\n  class=\"kern-btn kern-btn--{{ variant() }}\"\n  [class.kern-btn--block]=\"block()\"\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  (click)=\"clickEvent.emit($event)\"\n>\n  @if (iconLeft()) {\n    <span class=\"kern-icon kern-icon--{{ iconLeft() }}\" aria-hidden=\"true\"></span>\n  }\n  <span kernLabel [srOnly]=\"srOnlyLabel()\"><ng-content /></span>\n  @if (iconRight()) {\n    <span class=\"kern-icon kern-icon--{{ iconRight() }}\" aria-hidden=\"true\"></span>\n  }\n</button>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: KernDialog, isStandalone: true, selector: "kern-dialog", inputs: { dialogId: { classPropertyName: "dialogId", publicName: "dialogId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, btnCloseLabelText: { classPropertyName: "btnCloseLabelText", publicName: "btnCloseLabelText", isSignal: true, isRequired: false, transformFunction: null }, btnPrimaryLabelText: { classPropertyName: "btnPrimaryLabelText", publicName: "btnPrimaryLabelText", isSignal: true, isRequired: false, transformFunction: null }, btnSecondaryLabelText: { classPropertyName: "btnSecondaryLabelText", publicName: "btnSecondaryLabelText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEvent: "cancelEvent", btnPrimaryClickEvent: "btnPrimaryClickEvent", btnSecondaryClickEvent: "btnSecondaryClickEvent" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialog\n  [id]=\"effectiveId()\"\n  class=\"kern-dialog\"\n  [attr.aria-describedby]=\"effectiveId() + '_heading'\"\n  (cancel)=\"cancelEvent.emit($event)\"\n>\n  <header class=\"kern-dialog__header\">\n    <h2 kernTitle size=\"large\" id=\"{{ effectiveId() }}_heading\">{{ title() }}</h2>\n    <kern-button variant=\"tertiary\" iconLeft=\"close\" [srOnlyLabel]=\"true\" (clickEvent)=\"dialog.close()\">\n      {{ btnCloseLabelText() }}\n    </kern-button>\n  </header>\n  <section class=\"kern-dialog__body\">\n    <ng-content />\n  </section>\n  @if (btnPrimaryLabelText() || btnSecondaryLabelText()) {\n    <footer class=\"kern-dialog__footer\">\n      @if (btnSecondaryLabelText()) {\n        <kern-button variant=\"secondary\" (clickEvent)=\"btnSecondaryClickEvent.emit($event)\">\n          {{ btnSecondaryLabelText() }}\n        </kern-button>\n      }\n      @if (btnPrimaryLabelText()) {\n        <kern-button (clickEvent)=\"btnPrimaryClickEvent.emit($event)\">\n          {{ btnPrimaryLabelText() }}\n        </kern-button>\n      }\n    </footer>\n  }\n</dialog>\n", dependencies: [{ kind: "component", type: KernButton, selector: "kern-button", inputs: ["variant", "block", "disabled", "type", "iconLeft", "iconRight", "srOnlyLabel"], outputs: ["clickEvent"] }, { kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernLoader, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: KernLoader, isStandalone: true, selector: "kern-loader", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kern-loader kern-loader--visible\" role=\"status\">\n  <span class=\"kern-sr-only\">{{ text() }}</span>\n</div>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: KernBadge, isStandalone: true, selector: "kern-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"kern-badge kern-badge--{{ variant() }}\">\n  @if (icon()) {\n    <kern-icon [name]=\"icon()!\" />\n  }\n  <span kernLabel size=\"small\">\n    <ng-content />\n  </span>\n</span>\n", dependencies: [{ kind: "component", type: KernIcon, selector: "kern-icon", inputs: ["name", "ariaHidden", "size"] }, { kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernPreline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: KernPreline, isStandalone: true, selector: "h1[kernPreline], h2[kernPreline], h3[kernPreline], h4[kernPreline], h5[kernPreline], h6[kernPreline], span[kernPreline], p[kernPreline]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-preline--small": "size() === \"small\"", "class.kern-preline--large": "size() === \"large\"" }, classAttribute: "kern-preline" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernPreline, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        class: 'kern-preline',
                        '[class.kern-preline--small]': 'size() === "small"',
                        '[class.kern-preline--large]': 'size() === "large"'
                    },
                    selector: 'h1[kernPreline], h2[kernPreline], h3[kernPreline], h4[kernPreline], h5[kernPreline], h6[kernPreline], span[kernPreline], p[kernPreline]',
                    standalone: true
                }]
        }] });

class KernSubline {
    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernSubline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.3", type: KernSubline, isStandalone: true, selector: "h1[kernSubline], h2[kernSubline], h3[kernSubline], h4[kernSubline], h5[kernSubline], h6[kernSubline], span[kernSubline], p[kernSubline]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-subline--small": "size() === \"small\"", "class.kern-subline--large": "size() === \"large\"" }, classAttribute: "kern-subline" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernSubline, decorators: [{
            type: Directive,
            args: [{
                    host: {
                        class: 'kern-subline',
                        '[class.kern-subline--small]': 'size() === "small"',
                        '[class.kern-subline--large]': 'size() === "large"'
                    },
                    selector: 'h1[kernSubline], h2[kernSubline], h3[kernSubline], h4[kernSubline], h5[kernSubline], h6[kernSubline], span[kernSubline], p[kernSubline]',
                    standalone: true
                }]
        }] });

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.2.3", ngImport: i0, type: KernCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: KernCard, isStandalone: true, selector: "kern-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleLinkHref: { classPropertyName: "titleLinkHref", publicName: "titleLinkHref", isSignal: true, isRequired: false, transformFunction: null }, titleLinkTarget: { classPropertyName: "titleLinkTarget", publicName: "titleLinkTarget", isSignal: true, isRequired: false, transformFunction: null }, preline: { classPropertyName: "preline", publicName: "preline", isSignal: true, isRequired: false, transformFunction: null }, subline: { classPropertyName: "subline", publicName: "subline", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, imgAlt: { classPropertyName: "imgAlt", publicName: "imgAlt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, btnPrimaryLabelText: { classPropertyName: "btnPrimaryLabelText", publicName: "btnPrimaryLabelText", isSignal: true, isRequired: false, transformFunction: null }, btnSecondaryLabelText: { classPropertyName: "btnSecondaryLabelText", publicName: "btnSecondaryLabelText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { titleLinkClickEvent: "titleLinkClickEvent", btnPrimaryClickEvent: "btnPrimaryClickEvent", btnSecondaryClickEvent: "btnSecondaryClickEvent" }, ngImport: i0, template: "<article\n  class=\"kern-card\"\n  [class.kern-card--active]=\"title() && titleLinkHref()\"\n  [class.kern-card--small]=\"size() === 'small'\"\n  [class.kern-card--large]=\"size() === 'large'\"\n>\n  @if (imgSrc()) {\n    <div class=\"kern-card__media\">\n      <img [src]=\"imgSrc()\" [attr.alt]=\"imgAlt()\" />\n    </div>\n  }\n  <div class=\"kern-card__container\">\n    @if (title() || preline() || subline()) {\n      <header class=\"kern-card__header\">\n        @if (preline()) {\n          <p kernPreline>{{ preline() }}</p>\n        }\n        @if (title()) {\n          <ng-template #headingContent>\n            @if (titleLinkHref()) {\n              <a\n                [href]=\"titleLinkHref()\"\n                class=\"kern-link--stretched\"\n                [target]=\"titleLinkTarget()\"\n                [attr.rel]=\"titleLinkTarget() === '_blank' ? 'noopener noreferrer' : null\"\n                (click)=\"titleLinkClickEvent.emit($event)\"\n              >\n                {{ title() }}\n              </a>\n            } @else {\n              {{ title() }}\n            }\n          </ng-template>\n\n          @switch (headingLevel()) {\n            @case ('1') {\n              <h1 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h1>\n            }\n            @case ('2') {\n              <h2 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h2>\n            }\n            @case ('3') {\n              <h3 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h3>\n            }\n            @case ('4') {\n              <h4 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h4>\n            }\n            @case ('5') {\n              <h5 kernTitle><ng-container [ngTemplateOutlet]=\"headingContent\" /></h5>\n            }\n          }\n        }\n        @if (subline()) {\n          @switch (headingLevel()) {\n            @case ('1') {\n              <h2 kernSubline>{{ subline() }}</h2>\n            }\n            @case ('2') {\n              <h3 kernSubline>{{ subline() }}</h3>\n            }\n            @case ('3') {\n              <h4 kernSubline>{{ subline() }}</h4>\n            }\n            @case ('4') {\n              <h5 kernSubline>{{ subline() }}</h5>\n            }\n            @case ('5') {\n              <h6 kernSubline>{{ subline() }}</h6>\n            }\n          }\n        }\n      </header>\n    }\n    <section class=\"kern-card__body\">\n      <ng-content />\n    </section>\n    @if (btnPrimaryLabelText() || btnSecondaryLabelText()) {\n      <footer class=\"kern-card__footer\">\n        @if (btnPrimaryLabelText()) {\n          <kern-button (clickEvent)=\"btnPrimaryClickEvent.emit($event)\">\n            {{ btnPrimaryLabelText() }}\n          </kern-button>\n        }\n        @if (btnSecondaryLabelText()) {\n          <kern-button variant=\"secondary\" (clickEvent)=\"btnSecondaryClickEvent.emit($event)\">\n            {{ btnSecondaryLabelText() }}\n          </kern-button>\n        }\n      </footer>\n    }\n  </div>\n</article>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KernPreline, selector: "h1[kernPreline], h2[kernPreline], h3[kernPreline], h4[kernPreline], h5[kernPreline], h6[kernPreline], span[kernPreline], p[kernPreline]", inputs: ["size"] }, { kind: "directive", type: KernTitle, selector: "h1[kernTitle], h2[kernTitle], h3[kernTitle], h4[kernTitle], h5[kernTitle], h6[kernTitle], span[kernTitle], caption[kernTitle], p[kernTitle]", inputs: ["size"] }, { kind: "directive", type: KernSubline, selector: "h1[kernSubline], h2[kernSubline], h3[kernSubline], h4[kernSubline], h5[kernSubline], h6[kernSubline], span[kernSubline], p[kernSubline]", inputs: ["size"] }, { kind: "component", type: KernButton, selector: "kern-button", inputs: ["variant", "block", "disabled", "type", "iconLeft", "iconRight", "srOnlyLabel"], outputs: ["clickEvent"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: KernDivider, isStandalone: true, selector: "kern-divider", inputs: { ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<hr class=\"kern-divider\" [attr.aria-hidden]=\"ariaHidden()\" />\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: KernLink, isStandalone: true, selector: "kern-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, stretched: { classPropertyName: "stretched", publicName: "stretched", isSignal: true, isRequired: false, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, linkDescribedBy: { classPropertyName: "linkDescribedBy", publicName: "linkDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<a\n  class=\"kern-link\"\n  [class.kern-link--small]=\"small()\"\n  [class.kern-link--stretched]=\"stretched()\"\n  [href]=\"href()\"\n  [target]=\"target()\"\n  [attr.rel]=\"target() === '_blank' ? 'noopener noreferrer' : null\"\n  [attr.aria-describedby]=\"linkDescribedBy() || null\"\n  (click)=\"clickEvent.emit($event)\"\n>\n  @if (iconLeft()) {\n    <kern-icon [name]=\"iconLeft()!\"></kern-icon>\n  }\n  <ng-content />\n  @if (iconRight()) {\n    <kern-icon [name]=\"iconRight()!\"></kern-icon>\n  }\n</a>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: KernIcon, selector: "kern-icon", inputs: ["name", "ariaHidden", "size"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: KernProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: KernProgress, isStandalone: true, selector: "kern-progress", inputs: { progressId: { classPropertyName: "progressId", publicName: "progressId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kern-progress" }, ngImport: i0, template: "@if (label() && labelPosition() === 'top') {\n  <label kernLabel [for]=\"effectiveId()\">{{ label() }}</label>\n}\n<progress [value]=\"value()\" [max]=\"max()\" [id]=\"effectiveId()\"></progress>\n@if (label() && labelPosition() === 'bottom') {\n  <label kernLabel [for]=\"effectiveId()\">{{ label() }}</label>\n}\n", dependencies: [{ kind: "directive", type: KernLabel, selector: "label[kernLabel], legend[kernLabel], span[kernLabel], p[kernLabel]", inputs: ["size", "optional", "srOnly"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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 KernContainer {
    fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: KernContainer, isStandalone: true, selector: "kern-container", inputs: { fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kern-container": "!fluid()", "class.kern-container-fluid": "fluid()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernContainer, decorators: [{
            type: Component,
            args: [{ selector: 'kern-container', host: {
                        '[class.kern-container]': '!fluid()',
                        '[class.kern-container-fluid]': 'fluid()'
                    }, template: '<ng-content />', styles: [":host{display:block}\n"] }]
        }] });

class KernKopfzeile {
    fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernKopfzeile, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: KernKopfzeile, isStandalone: true, selector: "kern-kopfzeile", inputs: { fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kern-kopfzeile" }, ngImport: i0, template: "<kern-container [fluid]=\"fluid()\">\n  <div class=\"kern-kopfzeile__content\">\n    <span class=\"kern-kopfzeile__flagge\" aria-hidden=\"true\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 16\">\n        <path fill=\"#000\" d=\"M0 .5h24v5.333H0z\" />\n        <path fill=\"red\" d=\"M0 5.833h24v5.333H0z\" />\n        <path fill=\"#FACA2C\" d=\"M0 11.167h24V16.5H0z\" />\n      </svg>\n    </span>\n    <span class=\"kern-kopfzeile__label\" i18n=\"@@kernAngularKit.kopfzeile.label\">\n      Offizielle Website \u2013 Bundesrepublik Deutschland\n    </span>\n  </div>\n</kern-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: KernContainer, selector: "kern-container", inputs: ["fluid"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: KernKopfzeile, decorators: [{
            type: Component,
            args: [{ selector: 'kern-kopfzeile', imports: [KernContainer], host: { class: 'kern-kopfzeile' }, template: "<kern-container [fluid]=\"fluid()\">\n  <div class=\"kern-kopfzeile__content\">\n    <span class=\"kern-kopfzeile__flagge\" aria-hidden=\"true\">\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 16\">\n        <path fill=\"#000\" d=\"M0 .5h24v5.333H0z\" />\n        <path fill=\"red\" d=\"M0 5.833h24v5.333H0z\" />\n        <path fill=\"#FACA2C\" d=\"M0 11.167h24V16.5H0z\" />\n      </svg>\n    </span>\n    <span class=\"kern-kopfzeile__label\" i18n=\"@@kernAngularKit.kopfzeile.label\">\n      Offizielle Website \u2013 Bundesrepublik Deutschland\n    </span>\n  </div>\n</kern-container>\n", styles: [":host{display:block}\n"] }]
        }] });

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.ɵɵngDeclare