import { NgClass, DOCUMENT, isPlatformBrowser, Location, DatePipe, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, inject, Renderer2, ElementRef, ViewChild, ChangeDetectionStrategy, Component, effect, EventEmitter, Output, ApplicationRef, Injector, EnvironmentInjector, createComponent, Injectable, HostListener, Directive, output, NgZone, Input, PLATFORM_ID, ContentChildren, model, forwardRef, HostBinding, TemplateRef, Pipe, ViewContainerRef, Inject } from '@angular/core';
import { fromEvent, firstValueFrom, Subject, throttleTime, debounceTime, startWith, takeUntil } from 'rxjs';
import { RouterLink, RouterLinkWithHref } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import * as i1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';

class KageAccordion {
    header;
    content;
    cssClass = input();
    color = input();
    expanded = input(false);
    renderer = inject(Renderer2);
    ngAfterViewInit() {
        fromEvent(this.header.nativeElement, 'click').subscribe({
            next: (_) => {
                const currentHeight = getComputedStyle(this.content.nativeElement).maxHeight;
                const scrollHeight = this.content.nativeElement.scrollHeight;
                if (parseInt(currentHeight)) {
                    this.renderer.setStyle(this.header.nativeElement, 'background', 'transparent');
                    this.renderer.setStyle(this.content.nativeElement, 'maxHeight', '0px');
                }
                else {
                    this.renderer.setStyle(this.header.nativeElement, 'background', 'color-mix(in srgb, var(--border-color) 20%, transparent 80%)');
                    this.renderer.setStyle(this.content.nativeElement, 'maxHeight', `${scrollHeight}px`);
                }
            },
        });
        if (this.expanded()) {
            this.header.nativeElement.click();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageAccordion, isStandalone: true, selector: "kage-accordion", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"kage-accordion-wrapper\" [ngClass]=\"[color() ?? '', cssClass() ?? '']\">\r\n    <div class=\"kage-accordion-header\" #header><ng-content select=\"[slot='header']\"></ng-content></div>\r\n    <div class=\"kage-accordion-content\" #content><ng-content select=\"[slot='content']\"></ng-content></div>\r\n</div>", styles: [":host{display:block}:host .kage-accordion-wrapper .kage-accordion-header{min-height:var(--kage-accordion-header-min-height, 20px);padding:var(--kage-accordion-header-padding, 10px);border:var(--kage-accordion-border-width, 1px) solid var(--kage-accordion-header-border-color, transparent);cursor:var(--kage-accordion-header-cursor-style, pointer);transition:.3s}:host .kage-accordion-wrapper .kage-accordion-header:hover{background:var(--kage-accordion-header-hover-background)}:host .kage-accordion-wrapper .kage-accordion-content{border:var(--kage-accordion-border-width, 1px) solid var(--kage-accordion-content-border-color, transparent);border-top:none;max-height:0;overflow:hidden;transition:max-height var(--kage-accordion-animation-transition-time, .2s) ease-out;margin-top:calc(var(--kage-accordion-border-width, 1px) * -1)}:host .kage-accordion-wrapper .kage-accordion-content::ng-deep [slot=content]{padding:var(--kage-accordion-content-padding, 10px)}:host .kage-accordion-wrapper.primary{--kage-accordion-header-border-color: var(--color-primary);--kage-accordion-content-border-color: var(--color-primary)}:host .kage-accordion-wrapper.secondary{--kage-accordion-header-border-color: var(--color-secondary);--kage-accordion-content-border-color: var(--color-secondary)}:host .kage-accordion-wrapper.tertiary{--kage-accordion-header-border-color: var(--color-tertiary);--kage-accordion-content-border-color: var(--color-tertiary)}:host .kage-accordion-wrapper.success{--kage-accordion-header-border-color: var(--color-success);--kage-accordion-content-border-color: var(--color-success)}:host .kage-accordion-wrapper.danger{--kage-accordion-header-border-color: var(--color-danger);--kage-accordion-content-border-color: var(--color-danger)}:host .kage-accordion-wrapper.warning{--kage-accordion-header-border-color: var(--color-warning);--kage-accordion-content-border-color: var(--color-warning)}:host .kage-accordion-wrapper.info{--kage-accordion-header-border-color: var(--color-info);--kage-accordion-content-border-color: var(--color-info)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAccordion, decorators: [{
            type: Component,
            args: [{ selector: 'kage-accordion', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kage-accordion-wrapper\" [ngClass]=\"[color() ?? '', cssClass() ?? '']\">\r\n    <div class=\"kage-accordion-header\" #header><ng-content select=\"[slot='header']\"></ng-content></div>\r\n    <div class=\"kage-accordion-content\" #content><ng-content select=\"[slot='content']\"></ng-content></div>\r\n</div>", styles: [":host{display:block}:host .kage-accordion-wrapper .kage-accordion-header{min-height:var(--kage-accordion-header-min-height, 20px);padding:var(--kage-accordion-header-padding, 10px);border:var(--kage-accordion-border-width, 1px) solid var(--kage-accordion-header-border-color, transparent);cursor:var(--kage-accordion-header-cursor-style, pointer);transition:.3s}:host .kage-accordion-wrapper .kage-accordion-header:hover{background:var(--kage-accordion-header-hover-background)}:host .kage-accordion-wrapper .kage-accordion-content{border:var(--kage-accordion-border-width, 1px) solid var(--kage-accordion-content-border-color, transparent);border-top:none;max-height:0;overflow:hidden;transition:max-height var(--kage-accordion-animation-transition-time, .2s) ease-out;margin-top:calc(var(--kage-accordion-border-width, 1px) * -1)}:host .kage-accordion-wrapper .kage-accordion-content::ng-deep [slot=content]{padding:var(--kage-accordion-content-padding, 10px)}:host .kage-accordion-wrapper.primary{--kage-accordion-header-border-color: var(--color-primary);--kage-accordion-content-border-color: var(--color-primary)}:host .kage-accordion-wrapper.secondary{--kage-accordion-header-border-color: var(--color-secondary);--kage-accordion-content-border-color: var(--color-secondary)}:host .kage-accordion-wrapper.tertiary{--kage-accordion-header-border-color: var(--color-tertiary);--kage-accordion-content-border-color: var(--color-tertiary)}:host .kage-accordion-wrapper.success{--kage-accordion-header-border-color: var(--color-success);--kage-accordion-content-border-color: var(--color-success)}:host .kage-accordion-wrapper.danger{--kage-accordion-header-border-color: var(--color-danger);--kage-accordion-content-border-color: var(--color-danger)}:host .kage-accordion-wrapper.warning{--kage-accordion-header-border-color: var(--color-warning);--kage-accordion-content-border-color: var(--color-warning)}:host .kage-accordion-wrapper.info{--kage-accordion-header-border-color: var(--color-info);--kage-accordion-content-border-color: var(--color-info)}\n"] }]
        }], propDecorators: { header: [{
                type: ViewChild,
                args: ['header', { read: ElementRef }]
            }], content: [{
                type: ViewChild,
                args: ['content', { read: ElementRef }]
            }] } });

class KageAvatar {
    src = input();
    alt = input();
    cssClass = input();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageAvatar, isStandalone: true, selector: "kage-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kage-avatar-wrapper\" [class]=\"cssClass() ?? ''\">\r\n    <img [src]=\"src()\" [attr.alt]=\"alt()\">\r\n</div>", styles: [":host{display:contents}:host .kage-avatar-wrapper{display:flex;align-items:center;justify-content:center;border-radius:var(--kage-avatar-border-radius, 0px);width:var(--kage-avatar-size, 35px);height:var(--kage-avatar-size, 35px);background:var(--kage-avatar-background, transparent);border:var(--kage-avatar-border-width, 1px) solid var(--kage-avatar-border-color, var(--color-medium, transparent));overflow:hidden}:host .kage-avatar-wrapper img{max-width:100%;max-height:100%;border-radius:var(--kage-avatar-border-radius, 0px)}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAvatar, decorators: [{
            type: Component,
            args: [{ selector: 'kage-avatar', imports: [], template: "<div class=\"kage-avatar-wrapper\" [class]=\"cssClass() ?? ''\">\r\n    <img [src]=\"src()\" [attr.alt]=\"alt()\">\r\n</div>", styles: [":host{display:contents}:host .kage-avatar-wrapper{display:flex;align-items:center;justify-content:center;border-radius:var(--kage-avatar-border-radius, 0px);width:var(--kage-avatar-size, 35px);height:var(--kage-avatar-size, 35px);background:var(--kage-avatar-background, transparent);border:var(--kage-avatar-border-width, 1px) solid var(--kage-avatar-border-color, var(--color-medium, transparent));overflow:hidden}:host .kage-avatar-wrapper img{max-width:100%;max-height:100%;border-radius:var(--kage-avatar-border-radius, 0px)}\n"] }]
        }] });

class KageBadge {
    cssClass = input();
    color = input();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageBadge, isStandalone: true, selector: "kage-badge", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p class=\"kage-badge-wrapper\" [ngClass]=\"[color() ?? '', cssClass() ?? '']\"><ng-content></ng-content></p>\r\n", styles: [":host{display:inline-block}:host .kage-badge-wrapper{padding:var(--kage-badge-padding-top, 2px) var(--kage-badge-padding-right, 5px) var(--kage-badge-padding-bottom, 2px) var(--kage-badge-padding-left, 5px);background:var(--kage-badge-background, transparent);font-family:var(--kage-badge-font-family, inherit);display:inline-block;font-size:var(--kage-badge-font-size, inherit);color:var(--kage-badge-color, inherit);border:var(--kage-badge-border-width, 1px) solid var(--kage-badge-border-color, transparent)}:host .kage-badge-wrapper.primary{--kage-badge-border-color: var(--color-primary);--kage-badge-color: var(--color-primary)}:host .kage-badge-wrapper.secondary{--kage-badge-border-color: var(--color-secondary);--kage-badge-color: var(--color-secondary)}:host .kage-badge-wrapper.tertiary{--kage-badge-border-color: var(--color-tertiary);--kage-badge-color: var(--color-tertiary)}:host .kage-badge-wrapper.danger{--kage-badge-border-color: var(--color-danger);--kage-badge-color: var(--color-danger)}:host .kage-badge-wrapper.warning{--kage-badge-border-color: var(--color-warning);--kage-badge-color: var(--color-warning)}:host .kage-badge-wrapper.success{--kage-badge-border-color: var(--color-success);--kage-badge-color: var(--color-success)}:host .kage-badge-wrapper.info{--kage-badge-border-color: var(--color-info);--kage-badge-color: var(--color-info)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageBadge, decorators: [{
            type: Component,
            args: [{ selector: 'kage-badge', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p class=\"kage-badge-wrapper\" [ngClass]=\"[color() ?? '', cssClass() ?? '']\"><ng-content></ng-content></p>\r\n", styles: [":host{display:inline-block}:host .kage-badge-wrapper{padding:var(--kage-badge-padding-top, 2px) var(--kage-badge-padding-right, 5px) var(--kage-badge-padding-bottom, 2px) var(--kage-badge-padding-left, 5px);background:var(--kage-badge-background, transparent);font-family:var(--kage-badge-font-family, inherit);display:inline-block;font-size:var(--kage-badge-font-size, inherit);color:var(--kage-badge-color, inherit);border:var(--kage-badge-border-width, 1px) solid var(--kage-badge-border-color, transparent)}:host .kage-badge-wrapper.primary{--kage-badge-border-color: var(--color-primary);--kage-badge-color: var(--color-primary)}:host .kage-badge-wrapper.secondary{--kage-badge-border-color: var(--color-secondary);--kage-badge-color: var(--color-secondary)}:host .kage-badge-wrapper.tertiary{--kage-badge-border-color: var(--color-tertiary);--kage-badge-color: var(--color-tertiary)}:host .kage-badge-wrapper.danger{--kage-badge-border-color: var(--color-danger);--kage-badge-color: var(--color-danger)}:host .kage-badge-wrapper.warning{--kage-badge-border-color: var(--color-warning);--kage-badge-color: var(--color-warning)}:host .kage-badge-wrapper.success{--kage-badge-border-color: var(--color-success);--kage-badge-color: var(--color-success)}:host .kage-badge-wrapper.info{--kage-badge-border-color: var(--color-info);--kage-badge-color: var(--color-info)}\n"] }]
        }] });

class KageBreadCrumb {
    label = input();
    href = input();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageBreadCrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageBreadCrumb, isStandalone: true, selector: "kage-bread-crumb", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageBreadCrumb, decorators: [{
            type: Component,
            args: [{
                    selector: 'kage-bread-crumb',
                    template: '',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }] });

const ICONS = {
    add: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><line x1="20" y1="8" x2="20" y2="32" /><line x1="8" y1="20" x2="32" y2="20" /></svg>`,
    analytics: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><line x1="10" y1="32" x2="10" y2="20" /><line x1="20" y1="32" x2="20" y2="12" /><line x1="30" y1="32" x2="30" y2="24" /></svg>`,
    archive: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="5" width="30" height="6.67" /><rect x="8.33" y="13.33" width="23.33" height="21.67" /></svg>`,
    'arrow-backward': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M32 20H12" /><path d="M18 12l-8 8 8 8" /></svg>`,
    'arrow-downward': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 8v20" /><path d="M12 22l8 8 8-8" /></svg>`,
    'arrow-forward': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M8 20h20" /><path d="M22 12l8 8-8 8" /></svg>`,
    'arrow-upward': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 32V12" /><path d="M12 18l8-8 8 8" /></svg>`,
    'arrow-undo': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M15 8.33L5 20L15 31.67" /><path d="M5 20H21.67C28.33 20 33.33 25 33.33 31.67" /></svg>`,
    attach: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M26.67 11.67L15 23.33C12.5 25.83 12.5 30 15 32.5C17.5 35 21.67 35 24.17 32.5L33.33 23.33C36.67 20 36.67 15 33.33 11.67C30 8.33 25 8.33 21.67 11.67L11.67 21.67" /></svg>`,
    'at-the-rate': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 5C11.67 5 5 11.67 5 20C5 28.33 11.67 35 20 35C25 35 28.33 31.67 28.33 26.67V16.67C28.33 15 26.67 13.33 25 13.33H20C16.67 13.33 15 15 15 18.33C15 21.67 16.67 23.33 20 23.33H25" /><line x1="25" y1="23.33" x2="25" y2="26.67" /></svg>`,
    bag: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter"><rect x="8.33" y="11.67" width="23.33" height="23.33" /><path d="M15 11.67V8.33H25V11.67" /></svg>`,
    balloon: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 3.33 L26.67 6.67 L30 13.33 L26.67 23.33 L20 30 L13.33 23.33 L10 13.33 L13.33 6.67 Z" /><path d="M20 30 L20 36.67" /></svg>`,
    ban: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="15" /><line x1="10" y1="10" x2="30" y2="30" /></svg>`,
    barcode: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter"><line x1="3.33" y1="6.67" x2="3.33" y2="33.33" /><line x1="6.67" y1="6.67" x2="6.67" y2="33.33" /><line x1="11.67" y1="6.67" x2="11.67" y2="33.33" /><line x1="15" y1="6.67" x2="15" y2="33.33" /><line x1="18.33" y1="6.67" x2="18.33" y2="33.33" /><line x1="23.33" y1="6.67" x2="23.33" y2="33.33" /><line x1="28.33" y1="6.67" x2="28.33" y2="33.33" /><line x1="33.33" y1="6.67" x2="33.33" y2="33.33" /></svg>`,
    baseball: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="15" /><line x1="11.67" y1="11.67" x2="16.67" y2="16.67" /><line x1="16.67" y1="23.33" x2="11.67" y2="28.33" /><line x1="28.33" y1="11.67" x2="23.33" y2="16.67" /><line x1="23.33" y1="23.33" x2="28.33" y2="28.33" /></svg>`,
    basket: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" stroke="currentColor" class="kage-icon" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="6.67" y="16.67" width="26.67" height="16.67" /><path d="M6.67 16.67 L20 6.67 L33.33 16.67" /></svg>`,
    basketball: `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke="currentColor" class="kage-icon" stroke-width="var(--kage-icon-depth)" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="15" /><line x1="20" y1="5" x2="20" y2="35" /><line x1="5" y1="20" x2="35" y2="20" /><line x1="10" y1="10" x2="30" y2="30" /><line x1="10" y1="30" x2="30" y2="10" /></svg>`,
    'battery-charging': `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" stroke="currentColor" class="kage-icon" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="3.33" y="11.67" width="30" height="16.67" /><rect x="33.33" y="16.67" width="3.33" height="6.67" /><path d="M16.67 13.33 L20 20 H15 L21.67 26.67" /></svg>`,
    'battery-dead': `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke="currentColor" class="kage-icon" stroke-width="var(--kage-icon-depth)" stroke-linecap="square" stroke-linejoin="miter"><rect x="3.33" y="11.67" width="30" height="16.67" /><rect x="33.33" y="16.67" width="3.33" height="6.67" /><line x1="15.33" y1="16.67" x2="21.33" y2="23.33" /><line x1="21.33" y1="16.67" x2="15.33" y2="23.33" /></svg>`,
    'battery-half': `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter"><rect x="3.33" y="11.67" width="30" height="16.67" /><rect x="33.33" y="16.67" width="3.33" height="6.67" /><rect x="5" y="13.33" width="13.33" height="13.33" /><rect x="5" y="13.33" width="6.665" height="13.33" fill="currentColor" stroke="none" /></svg>`,
    bicycle: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter"><circle cx="10" cy="30" r="5" /><circle cx="30" cy="30" r="5" /><line x1="10" y1="30" x2="20" y2="20" /><line x1="20" y1="20" x2="25" y2="30" /><line x1="20" y1="20" x2="20" y2="13" /><line x1="20" y1="13" x2="15" y2="13" /><line x1="20" y1="13" x2="28" y2="13" /><line x1="18.5" y1="23" x2="21.5" y2="23" /></svg>`,
    beaker: `<svg class="kage-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="square" stroke-linejoin="miter"><path d="M16 6 V12 L11 30 L29 30 L24 12 V6 Z" /><path d="M13.5 25 L26.5 25 L26 28 L14 28 Z" fill="currentColor" stroke="none" /><circle cx="20" cy="26.5" r="1" fill="white" /><circle cx="17" cy="27.5" r="0.7" fill="white" /></svg>`,
    bed: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="16.67" width="30" height="11.67" /><line x1="5" y1="16.67" x2="5" y2="8.33" /><rect x="8.33" y="18.33" width="6.67" height="5" /></svg>`,
    beer: `<svg class="kage-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="square" stroke-linejoin="miter"><rect x="10" y="12" width="16" height="20" /><path d="M26 14 H30 V28 H26" /><line x1="13" y1="14" x2="13" y2="30" /><line x1="17" y1="14" x2="17" y2="30" /><line x1="21" y1="14" x2="21" y2="30" /><path d="M10 12 Q12 8 14 10 Q16 6 18 9 Q20 6 22 10 Q24 8 26 12 Z" fill="currentColor" stroke="none" /></svg>`,
    bluetooth: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke-linecap="square" stroke-linejoin="miter"><path d="M11.67 11.67 L28.33 28.33 L20 36.67 V3.33 L28.33 11.67 L11.67 28.33" /></svg>`,
    body: `<svg class="kage-icon" stroke-width="var(--kage-icon-depth)" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="6.67" r="3.33" /><line x1="20" y1="10" x2="20" y2="23.33" /><line x1="20" y1="13.33" x2="13.33" y2="16.67" /><line x1="20" y1="13.33" x2="26.67" y2="16.67" /><line x1="20" y1="23.33" x2="15" y2="33.33" /><line x1="20" y1="23.33" x2="25" y2="33.33" /></svg>`,
    bonfire: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 5 C25 13, 15 17, 20 30 C26 22, 30 15, 20 5 Z" /><line x1="12" y1="32" x2="28" y2="35" /><line x1="12" y1="35" x2="28" y2="32" /></svg>`,
    book: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 10 Q20 2 35 10" /><path d="M5 10 V30 C10 27, 15 27, 20 30" /><path d="M35 10 V30 C30 27, 25 27, 20 30" /><line x1="20" y1="10" x2="20" y2="30" /></svg>`,
    bookmark: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 6 H30 V34 L20 28 L10 34 V6 Z" /></svg>`,
    'bowling-ball': `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" fill="none" class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="15" /><circle cx="15" cy="15" r="1.6" fill="none" /><circle cx="21.6" cy="11.6" r="1.6" fill="none" /><circle cx="25" cy="18.4" r="1.6" fill="none" /></svg>`,
    bulb: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M15 30h10v2H15zM14 33h12v2H14z" /><path d="M20 4C13.37 4 8 9.37 8 16c0 3.76 2.48 6.88 5 9.5V28h14v-2.5c2.52-2.62 5-5.74 5-9.5 0-6.63-5.37-12-12-12z" /></svg>`,
    bus: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="8" width="30" height="20" rx="2" /><path d="M5 28h30v5H5zM10 35a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM30 35a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" /><line x1="11" y1="14" x2="29" y2="14" /></svg>`,
    business: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="5" width="10" height="30" /><rect x="17" y="10" width="13" height="25" /><line x1="8" y1="8" x2="12" y2="8" /><line x1="8" y1="14" x2="12" y2="14" /><line x1="8" y1="20" x2="12" y2="20" /></svg>`,
    cafe: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="10" width="25" height="15" rx="2" /><path d="M30 12h3a3 3 0 0 1 0 6h-3" /><path d="M12 25v4h16v-4" /></svg>`,
    calculator: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="5" width="30" height="30" rx="2" /><line x1="10" y1="10" x2="30" y2="10" /><circle cx="10" cy="17" r="1.5" /><circle cx="16" cy="17" r="1.5" /><circle cx="22" cy="17" r="1.5" /><circle cx="10" cy="23" r="1.5" /><circle cx="16" cy="23" r="1.5" /><circle cx="22" cy="23" r="1.5" /></svg>`,
    calendar: `<svg class="kage-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="7" width="30" height="30"/><line x1="5" y1="17" x2="35" y2="17"/><line x1="12" y1="3" x2="12" y2="10"/><line x1="28" y1="3" x2="28" y2="10"/><circle cx="12" cy="24" r="0.8"/><circle cx="20" cy="24" r="0.8"/><circle cx="28" cy="24" r="0.8"/><circle cx="12" cy="32" r="0.8"/><circle cx="20" cy="32" r="0.8"/><circle cx="28" cy="32" r="0.8"/></svg>`,
    call: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 8c5 7.5 10 12.5 18 18l5-5c1 3.5-1.5 7-5 7-7.5-1.5-13.5-7.5-18-18 0-3.5 3.5-6 7-5l-5 5z" /></svg>`,
    camera: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="10" width="30" height="20" rx="2" /><circle cx="20" cy="20" r="5" /><rect x="12" y="5" width="5" height="3" /></svg>`,
    car: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="15" width="30" height="10" /><path d="M8 15l-3 7h30l-3-7H8z" /><circle cx="10" cy="30" r="3" /><circle cx="30" cy="30" r="3" /></svg>`,
    card: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="10" width="30" height="20" rx="2" /><line x1="5" y1="15" x2="35" y2="15" /><rect x="8" y="18" width="8" height="2" /><rect x="18" y="18" width="5" height="2" /></svg>`,
    cart: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><circle cx="15" cy="32" r="2" /><circle cx="30" cy="32" r="2" /><path d="M8 8h4l4 18h16l4-10H14" /></svg>`,
    cash: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="10" width="30" height="20" rx="2" /><circle cx="20" cy="20" r="4" /><path d="M5 10v20M35 10v20" /></svg>`,
    cellular: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="30" width="4" height="5" /><rect x="11" y="25" width="4" height="10" /><rect x="17" y="20" width="4" height="15" /><rect x="23" y="15" width="4" height="20" /><rect x="29" y="10" width="4" height="25" /></svg>`,
    chatbox: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 10h30v20H12l-7 5v-5H5z" /></svg>`,
    chatbubbles: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M6 12h22v14H14l-8 6v-6H6z" /><path d="M14 10h20v14h-6v4l-6-4H14z" /></svg>`,
    checkmark: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 20l8 8 12-16" /></svg>`,
    'checkmark-done': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 20l6 6 8-10" /><path d="M16 22l6 6 8-12" /></svg>`,
    'chevron-backward': `<svg class="kage-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="100%" height="100%"><path d="M25.6 8.75L14.38 20 25.6 31.25" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="var(--kage-icon-depth)" /></svg>`,
    'chevron-down': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 15l10 10 10-10" /></svg>`,
    'chevron-forward': `<svg class="kage-icon" width="100%" height="100%" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.33 6.67L26.67 20L13.33 33.33" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
    'chevron-up': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 25l10-10 10 10" /></svg>`,
    cloud: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M30 24a6 6 0 0 0-6-6h-1a8 8 0 0 0-15 3 5 5 0 0 0 0 10h22a5 5 0 0 0 0-10z" /></svg>`,
    'cloud-done': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M30 24a6 6 0 0 0-6-6h-1a8 8 0 0 0-15 3 5 5 0 0 0 0 10h22a5 5 0 0 0 0-10z" /><path d="M15 22l3 3 6-6" /></svg>`,
    'cloud-download': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M30 24a6 6 0 0 0-6-6h-1a8 8 0 0 0-15 3 5 5 0 0 0 0 10h22a5 5 0 0 0 0-10z" /><path d="M20 18v10M16 26l4 4 4-4" /></svg>`,
    'cloud-offline': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M30 24a6 6 0 0 0-6-6h-1a8 8 0 0 0-15 3 5 5 0 0 0 0 10h22a5 5 0 0 0 0-10z" /><line x1="12" y1="12" x2="28" y2="28" /></svg>`,
    'cloud-upload': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M30 24a6 6 0 0 0-6-6h-1a8 8 0 0 0-15 3 5 5 0 0 0 0 10h22a5 5 0 0 0 0-10z" /><path d="M20 28V18M16 22l4-4 4 4" /></svg>`,
    code: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 12l-6 8 6 8M28 12l6 8-6 8" /><line x1="20" y1="10" x2="20" y2="30" /></svg>`,
    'color-fill': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M14 12l12 12-6 6-12-12z" /><path d="M28 28c0 3 3 6 3 6s3-3 3-6a3 3 0 1 0-6 0z" /></svg>`,
    'color-pallet': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 5a15 15 0 0 1 0 30 5 5 0 0 1-5-5h-5a10 10 0 0 1 10-25z" /><circle cx="15" cy="15" r="1.5" /><circle cx="25" cy="12" r="1.5" /><circle cx="28" cy="20" r="1.5" /><circle cx="22" cy="26" r="1.5" /></svg>`,
    compass: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="15" /><polygon points="20,10 25,25 15,25" /></svg>`,
    construct: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 5l5 5-3 3 7 7 3-3 5 5-10 10-5-5 3-3-7-7-3 3-5-5z" /></svg>`,
    contrast: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="15" /><path d="M20 5a15 15 0 0 1 0 30z" /></svg>`,
    copy: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><rect x="10" y="10" width="20" height="20" /><path d="M10 10v-5h20v5" /><path d="M5 15v20h20v-5" /></svg>`,
    crop: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 5v25h25"/><path d="M30 35V10H5"/></svg>`,
    cube: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 10l10-5 10 5v20l-10 5-10-5z"/><path d="M10 10l10 5 10-5"/><path d="M20 15v20"/></svg>`,
    cut: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="10" cy="10" r="3"/><circle cx="10" cy="30" r="3"/><path d="M13 13l14 14M13 27l14-14"/></svg>`,
    desktop: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="8" width="30" height="20" rx="2"/><path d="M15 32h10M20 28v4"/></svg>`,
    diamond: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><polygon points="20,5 35,20 20,35 5,20"/></svg>`,
    dice: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="10" y="10" width="20" height="20"/><circle cx="15" cy="15" r="1"/><circle cx="25" cy="15" r="1"/><circle cx="20" cy="20" r="1"/><circle cx="15" cy="25" r="1"/><circle cx="25" cy="25" r="1"/></svg>`,
    document: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 5h15l5 5v25H10z"/><path d="M25 5v5h5"/></svg>`,
    download: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 5v20"/><path d="M15 20l5 5 5-5"/><path d="M10 30h20"/></svg>`,
    duplicate: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="10" y="10" width="20" height="20"/><path d="M5 15h5v20h20v5"/></svg>`,
    ear: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M25 10a10 10 0 0 0-15 10c0 5 2 8 5 10s5 5 5 5"/><path d="M20 25c0 3-3 5-3 0"/></svg>`,
    earth: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="15"/><path d="M10 15h10v-5h5v5h5"/><path d="M15 30c0-5 10-5 10 0"/></svg>`,
    egg: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 5c-7 0-10 10-10 15s3 15 10 15 10-10 10-15-3-15-10-15z"/></svg>`,
    'ellipsis-horizontal': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="10" cy="20" r="2"/><circle cx="20" cy="20" r="2"/><circle cx="30" cy="20" r="2"/></svg>`,
    'ellipsis-vertical': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="10" r="2"/><circle cx="20" cy="20" r="2"/><circle cx="20" cy="30" r="2"/></svg>`,
    expand: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 10h10v-5"/><path d="M30 10h-10v-5"/><path d="M10 30h10v5"/><path d="M30 30h-10v5"/></svg>`,
    eye: `<svg class="kage-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="round" stroke-linejoin="round"><path d="M1.67 20C4.55 12.68 11.53 7.5 20 7.5C28.47 7.5 35.45 12.68 38.33 20C35.45 27.32 28.47 32.5 20 32.5C11.53 32.5 4.55 27.32 1.67 20Z"/><circle cx="20" cy="20" r="5"/></svg>`,
    'eye-off': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 5l30 30"/><path d="M10 20s5-8 10-8 10 8 10 8-5 8-10 8-10-8-10-8z"/><circle cx="20" cy="20" r="3"/></svg>`,
    female: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="12" r="6"/><line x1="20" y1="18" x2="20" y2="30"/><line x1="16" y1="26" x2="24" y2="26"/></svg>`,
    film: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="10" width="30" height="20"/><line x1="15" y1="10" x2="15" y2="30"/><line x1="25" y1="10" x2="25" y2="30"/><circle cx="10" cy="15" r="1"/><circle cx="10" cy="25" r="1"/><circle cx="30" cy="15" r="1"/><circle cx="30" cy="25" r="1"/></svg>`,
    filter: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 10h30l-10 10v10l-10 5V20z"/></svg>`,
    fingerprint: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 10a10 10 0 0 1 10 10"/><path d="M20 15a5 5 0 0 1 5 5v5"/><path d="M20 20v10"/><path d="M15 15a5 5 0 0 0-5 5"/><path d="M25 30v-5"/></svg>`,
    fish: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 20s5-10 15-10 15 10 15 10-5 10-15 10-15-10-15-10z"/><circle cx="28" cy="20" r="1"/></svg>`,
    fitness: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="17" y="5" width="6" height="30"/><line x1="10" y1="10" x2="10" y2="30"/><line x1="30" y1="10" x2="30" y2="30"/></svg>`,
    flag: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 5v30"/><path d="M10 5h20l-5 10 5 10H10"/></svg>`,
    flame: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 5c4 5 5 10 2 15s-1 10 3 10 5-5 5-10c0-5-5-10-10-15z"/></svg>`,
    flash: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 5l-10 15h8l-3 15 15-20h-10z"/></svg>`,
    flask: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M15 5h10v10l7 15H8l7-15z"/></svg>`,
    flower: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="3"/><path d="M20 5v5 M35 20h-5 M20 35v-5 M5 20h5 M30 10l-3 3 M10 10l3 3 M30 30l-3-3 M10 30l3-3"/></svg>`,
    folder: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 10h10l5 5h15v15H5z"/></svg>`,
    football: `<svg class="kage-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="18" /><polygon points="20,13 17,17 20,21 23,17" /><polygon points="20,13 15,12 14,16 17,17" /><polygon points="20,13 25,12 26,16 23,17" /><polygon points="17,17 14,16 13,20 17,21" /><polygon points="23,17 26,16 27,20 23,21" /><polygon points="20,21 17,21 20,25 23,21" /></svg>`,
    footsteps: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><ellipse cx="13" cy="12" rx="3" ry="5"/><ellipse cx="27" cy="28" rx="3" ry="5"/><circle cx="13" cy="20" r="2"/><circle cx="27" cy="35" r="2"/></svg>`,
    'game-controller': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="5" y="15" width="30" height="15" rx="5"/><line x1="13" y1="20" x2="17" y2="20"/><line x1="15" y1="18" x2="15" y2="22"/><circle cx="25" cy="20" r="1"/><circle cx="28" cy="22" r="1"/></svg>`,
    gift: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><rect x="10" y="15" width="20" height="20"/><line x1="20" y1="15" x2="20" y2="35"/><path d="M10 15c0-10 10 0 10 0s10-10 10 0"/></svg>`,
    'git-branch': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="10" cy="10" r="2"/><circle cx="10" cy="30" r="2"/><circle cx="30" cy="30" r="2"/><path d="M10 12v16a10 10 0 0 0 10 10h10"/></svg>`,
    'git-commit': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="4"/><line x1="0" y1="20" x2="16" y2="20"/><line x1="24" y1="20" x2="40" y2="20"/></svg>`,
    'git-compare': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 10v20M30 30V10"/><path d="M10 10l5 5h-5z"/><path d="M30 30l-5-5h5z"/></svg>`,
    'git-merge': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="10" cy="10" r="2"/><circle cx="10" cy="30" r="2"/><circle cx="30" cy="20" r="2"/><path d="M10 12v16a10 10 0 0 0 10 10h10"/></svg>`,
    'git-network': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="10" cy="10" r="2"/><circle cx="10" cy="30" r="2"/><circle cx="30" cy="20" r="2"/><path d="M10 12v16M10 30h20"/></svg>`,
    'git-pull-request': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="10" cy="10" r="2"/><circle cx="10" cy="30" r="2"/><circle cx="30" cy="20" r="2"/><path d="M10 12v16M10 20h20"/></svg>`,
    glasses: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke-linecap="square" stroke-linejoin="miter"><circle cx="12" cy="20" r="5"/><circle cx="28" cy="20" r="5"/><path d="M7 20h-2v-5M33 20h2v-5M17 20h6"/></svg>`,
    globe: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="15"/><ellipse cx="20" cy="20" rx="15" ry="6"/><path d="M20 5v30"/></svg>`,
    golf: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 5v30"/><path d="M20 5l10 5-10 5z"/></svg>`,
    graduate: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polygon points="5,15 20,5 35,15 20,25"/><path d="M20 25v10"/></svg>`,
    grid: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="5" width="10" height="10"/><rect x="5" y="20" width="10" height="10"/><rect x="20" y="5" width="10" height="10"/><rect x="20" y="20" width="10" height="10"/></svg>`,
    'hand-left': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M15 5v15M10 7v13M20 10v10M25 15v5M10 20l2 10h10l3-5v-5"/></svg>`,
    'hand-right': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M25 5v15M30 7v13M20 10v10M15 15v5M30 20l-2 10H18l-3-5v-5"/></svg>`,
    'hardware-chip': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="10" y="10" width="20" height="20"/><path d="M20 5v5M20 35v-5M5 20h5M35 20h-5"/></svg>`,
    headset: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 25v-5a10 10 0 0 1 20 0v5"/><rect x="5" y="20" width="5" height="10"/><rect x="30" y="20" width="5" height="10"/></svg>`,
    heart: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 15a5 5 0 0 1 10 0 5 5 0 0 1 10 0c0 10-10 15-10 15s-10-5-10-15z"/></svg>`,
    help: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="20" r="15"/><path d="M20 12a4 4 0 0 1 0 8c0 2-1 3-1 3"/><circle cx="20" cy="30" r="1"/></svg>`,
    home: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" fill="none" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M5 18L20 5L35 18V33C35 33.5523 34.5523 34 34 34H25C24.4477 34 24 33.5523 24 33V27C24 26.4477 23.5523 26 23 26H17C16.4477 26 16 26.4477 16 27V33C16 33.5523 15.5523 34 15 34H6C5.44772 34 5 33.5523 5 33V18Z" stroke-linejoin="miter" stroke-linecap="butt"/></svg>`,
    'hour-glass': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 5h20M10 35h20M10 5c5 5 5 10 0 15 5 5 5 10 0 15M30 5c-5 5-5 10 0 15-5 5-5 10 0 15"/></svg>`,
    'ice-cream': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M20 25l-5 10h10z"/><path d="M10 15a10 5 0 0 1 20 0c0 5-5 10-10 10s-10-5-10-10z"/></svg>`,
    'id-card': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="10" width="30" height="20"/><circle cx="12" cy="20" r="3"/><path d="M20 17h10M20 23h7"/></svg>`,
    image: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="10" width="30" height="20"/><circle cx="12" cy="15" r="2"/><path d="M5 30l10-10 5 5 10-10 5 5"/></svg>`,
    infinite: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 20c5-10 15 10 20 0s-15-10-20 0z"/></svg>`,
    information: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="20" r="15"/><line x1="20" y1="14" x2="20" y2="14"/><line x1="20" y1="18" x2="20" y2="28"/></svg>`,
    key: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="12" cy="20" r="5"/><path d="M17 20h8v4h3v-4h2v-4"/></svg>`,
    keypad: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="10" cy="10" r="2"/><circle cx="20" cy="10" r="2"/><circle cx="30" cy="10" r="2"/><circle cx="10" cy="20" r="2"/><circle cx="20" cy="20" r="2"/><circle cx="30" cy="20" r="2"/><circle cx="10" cy="30" r="2"/><circle cx="20" cy="30" r="2"/><circle cx="30" cy="30" r="2"/></svg>`,
    language: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="20" r="15"/><path d="M10 20h20M20 5c5 5 5 25 0 30-5-5-5-25 0-30z"/></svg>`,
    layers: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 15l10-5 10 5-10 5z"/><path d="M10 25l10-5 10 5"/><path d="M10 20l10 5 10-5"/></svg>`,
    leaf: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 30c10-20 20-20 20-20s0 20-20 20z"/><path d="M10 30l20-20"/></svg>`,
    library: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="10" width="5" height="20"/><rect x="15" y="10" width="5" height="20"/><rect x="25" y="10" width="5" height="20"/></svg>`,
    link: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M12 20a6 6 0 0 1 6-6h4"/><path d="M28 20a6 6 0 0 1-6 6h-4"/><line x1="16" y1="20" x2="24" y2="20"/></svg>`,
    list: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="8" cy="10" r="1"/><circle cx="8" cy="20" r="1"/><circle cx="8" cy="30" r="1"/><line x1="12" y1="10" x2="32" y2="10"/><line x1="12" y1="20" x2="32" y2="20"/><line x1="12" y1="30" x2="32" y2="30"/></svg>`,
    locate: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="20" r="3"/><path d="M20 2v6M20 32v6M2 20h6M32 20h6"/><circle cx="20" cy="20" r="15"/></svg>`,
    location: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M20 5c-6 0-10 4-10 10 0 7 10 20 10 20s10-13 10-20c0-6-4-10-10-10z"/><circle cx="20" cy="15" r="3"/></svg>`,
    'lock-closed': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="10" y="18" width="20" height="15"/><path d="M14 18v-5a6 6 0 0 1 12 0v5"/></svg>`,
    'lock-open': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="10" y="18" width="20" height="15"/><path d="M26 18v-5a6 6 0 0 0-12 0"/></svg>`,
    magnet: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 5v15a10 10 0 0 0 20 0V5"/><line x1="10" y1="5" x2="18" y2="5"/><line x1="22" y1="5" x2="30" y2="5"/></svg>`,
    mail: `<svg class="kage-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="square" stroke-linejoin="miter"><rect x="3.33" y="6.67" width="33.33" height="26.67" /><polyline points="3.33,6.67 20,21.67 36.67,6.67" /></svg>`,
    male: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="15" cy="25" r="8"/><path d="M20 20l10-10M25 10h5v5"/></svg>`,
    'male-female': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="15" cy="25" r="6"/><path d="M15 31v5M12 36h6M20 20l10-10M25 10h5v5"/></svg>`,
    medal: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="15" r="7"/><path d="M14 22l-4 10h20l-4-10"/></svg>`,
    megaphone: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M5 15v10l25-5V10L5 15z"/><path d="M30 13v4M30 21v4"/><path d="M12 25l2 7h4l2-7"/></svg>`,
    menu: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><line x1="8" y1="10" x2="32" y2="10"/><line x1="8" y1="20" x2="32" y2="20"/><line x1="8" y1="30" x2="32" y2="30"/></svg>`,
    mic: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="15" y="10" width="10" height="16" rx="2"/><path d="M10 20a10 10 0 0 0 20 0M20 26v6M16 32h8"/></svg>`,
    'mic-off': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><line x1="10" y1="10" x2="30" y2="30"/><rect x="15" y="10" width="10" height="16" rx="2"/><path d="M10 20a10 10 0 0 0 20 0M20 26v6M16 32h8"/></svg>`,
    moon: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M25 5a15 15 0 1 0 0 30A13 13 0 1 1 25 5z"/></svg>`,
    'musical-note': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M28 10v15a6 6 0 1 1-2-4V10h-10v15a6 6 0 1 1-2-4V8h14z"/></svg>`,
    'musical-notes': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 12v12a4 4 0 1 0 2-3V12h6v10a4 4 0 1 0 2-3V10h10"/></svg>`,
    navigate: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="20" r="16"/><path d="M20 20l7-10-14 5-5 14 12-9z"/></svg>`,
    newspaper: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="10" width="30" height="20"/><path d="M10 15h10M10 20h10M10 25h10M25 15h5v10h-5z"/></svg>`,
    notification: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M20 35a4 4 0 0 0 4-4H16a4 4 0 0 0 4 4z"/><path d="M10 30h20l-2-4V18a8 8 0 1 0-16 0v8z"/></svg>`,
    'notification-off': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><line x1="8" y1="8" x2="32" y2="32"/><path d="M10 30h20l-2-4V18a8 8 0 0 0-10-7.8"/></svg>`,
    pause: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="12" y="10" width="4" height="20"/><rect x="24" y="10" width="4" height="20"/></svg>`,
    people: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="14" cy="14" r="4"/><circle cx="26" cy="14" r="4"/><path d="M8 28c0-4 4-6 6-6s6 2 6 6"/><path d="M20 28c0-4 4-6 6-6s6 2 6 6"/></svg>`,
    person: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="12" r="6"/><path d="M10 30c0-6 20-6 20 0"/></svg>`,
    'pi-chart': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="20" r="15"/><path d="M20 20V5M20 20h15"/></svg>`,
    play: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polygon points="14,10 30,20 14,30" fill="none"/></svg>`,
    'play-back': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polygon points="26,10 10,20 26,30" fill="none"/><line x1="30" y1="10" x2="30" y2="30"/></svg>`,
    'play-forward': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polygon points="14,10 30,20 14,30" fill="none"/><line x1="10" y1="10" x2="10" y2="30"/></svg>`,
    power: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><line x1="20" y1="5" x2="20" y2="20"/><path d="M10 10a15 15 0 1 0 20 0"/></svg>`,
    'price-tag': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M5 20l15 15 15-15V5H20z"/><circle cx="30" cy="10" r="2"/></svg>`,
    prism: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polygon points="20,5 35,30 5,30"/><path d="M20 5v25"/></svg>`,
    pulse: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polyline points="5,20 12,20 16,10 20,30 24,20 35,20"/></svg>`,
    puzzle: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 10h5a2.5 2.5 0 1 1 5 0h5v5a2.5 2.5 0 1 1 0 5v5h-5a2.5 2.5 0 1 1-5 0h-5v-5a2.5 2.5 0 1 1 0-5z"/></svg>`,
    'qr-code': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="5" width="10" height="10"/><rect x="25" y="5" width="10" height="10"/><rect x="5" y="25" width="10" height="10"/><path d="M25 25h5v5h-5zM30 30h5v5h-5z"/></svg>`,
    rainy: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 20a8 8 0 1 1 20-5 6 6 0 1 1 0 12H10z"/><line x1="15" y1="30" x2="15" y2="35"/><line x1="20" y1="30" x2="20" y2="35"/><line x1="25" y1="30" x2="25" y2="35"/></svg>`,
    refresh: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polyline points="30,10 35,10 35,5"/><path d="M35 10a15 15 0 1 0 0 20"/></svg>`,
    reload: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 10a15 15 0 1 1-5 10h5"/><polyline points="5,10 10,10 10,5"/></svg>`,
    remove: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><line x1="10" y1="10" x2="30" y2="30"/><line x1="30" y1="10" x2="10" y2="30"/></svg>`,
    resize: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polyline points="10,20 5,20 5,15"/><polyline points="30,20 35,20 35,25"/><line x1="5" y1="15" x2="35" y2="25"/></svg>`,
    rocket: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 30l5-10L30 10l-10 15-10 5z"/><circle cx="25" cy="15" r="2"/></svg>`,
    sailboat: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none" width="100%" height="100%" stroke-linecap="square" stroke-linejoin="miter"><path d="M6.67 28.33 H33.33 L30 33.33 H10 L6.67 28.33 Z" /><line x1="20" y1="6.67" x2="20" y2="28.33" /><path d="M20 6.67 L10 20 H20 Z" /></svg>`,
    save: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M5 5h30v30H5z"/><rect x="10" y="5" width="20" height="10"/><rect x="15" y="20" width="10" height="10"/></svg>`,
    search: `<svg class="kage-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="var(--kage-icon-depth)" stroke-linecap="round" stroke-linejoin="round"><circle cx="18.33" cy="18.33" r="11.67" /><line x1="27.75" y1="27.75" x2="35" y2="35" /></svg>`,
    server: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="5" width="30" height="10"/><rect x="5" y="15" width="30" height="10"/><rect x="5" y="25" width="30" height="10"/></svg>`,
    shapes: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="5" width="10" height="10"/><circle cx="30" cy="10" r="5"/><polygon points="10,30 20,20 30,30"/></svg>`,
    'social-share': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="10" cy="10" r="3"/><circle cx="30" cy="10" r="3"/><circle cx="20" cy="30" r="3"/><path d="M10 10l10 20M30 10l-10 20"/></svg>`,
    shield: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M20 5l15 5v10c0 10-15 15-15 15S5 30 5 20V10l15-5z"/></svg>`,
    shirt: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 10L5 20v15h10V25h10v10h10V20l-5-10-5 5h-10z"/></svg>`,
    shuffle: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M5 10h5l20 20h5"/><path d="M35 10h-5l-5 5"/><path d="M5 30h5l5-5"/></svg>`,
    skull: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="20" r="10"/><circle cx="16" cy="18" r="1"/><circle cx="24" cy="18" r="1"/><path d="M18 25v5M22 25v5"/></svg>`,
    snow: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><line x1="20" y1="5" x2="20" y2="35"/><line x1="5" y1="20" x2="35" y2="20"/><line x1="10" y1="10" x2="30" y2="30"/><line x1="10" y1="30" x2="30" y2="10"/></svg>`,
    star: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polygon points="20,5 25,15 35,15 27,22 30,32 20,26 10,32 13,22 5,15 15,15"/></svg>`,
    stop: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="10" y="10" width="20" height="20"/></svg>`,
    sun: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-linecap="square" stroke-linejoin="miter"><circle cx="20" cy="20" r="5" /><path d="M20 5v5M20 30v5M5 20h5M30 20h5M10 10l3 3M27 27l3 3M10 30l3-3M27 13l3-3" /></svg>`,
    sync: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polyline points="25,5 35,5 35,15"/><path d="M35 5a15 15 0 1 0 0 30"/></svg>`,
    terminal: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="5" width="30" height="30"/><polyline points="10,15 15,20 10,25"/><line x1="20" y1="25" x2="30" y2="25"/></svg>`,
    text: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><line x1="5" y1="10" x2="35" y2="10"/><line x1="10" y1="20" x2="30" y2="20"/><line x1="15" y1="30" x2="25" y2="30"/></svg>`,
    time: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><circle cx="20" cy="20" r="14" /><line x1="20" y1="20" x2="20" y2="12" /><line x1="20" y1="20" x2="26" y2="20" /></svg>`,
    trash: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="10" y="12" width="20" height="20" /><line x1="16" y1="16" x2="16" y2="28" /><line x1="20" y1="16" x2="20" y2="28" /><line x1="24" y1="16" x2="24" y2="28" /><polyline points="12,12 12,8 28,8 28,12" /><line x1="16" y1="8" x2="24" y2="8" /></svg>`,
    'trending-down': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,12 16,22 24,14 34,30" /><polyline points="28,30 34,30 34,24" /></svg>`,
    'trending-up': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,28 16,18 24,26 34,10" /><polyline points="28,10 34,10 34,16" /></svg>`,
    trophy: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M10 10h20v10c0 10-20 10-20 0z"/><line x1="20" y1="20" x2="20" y2="30"/><rect x="15" y="30" width="10" height="5"/></svg>`,
    'thumbs-down': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5l1.5 6-0.5 2-6-6v-14z" /><line x1="10" y1="10" x2="10" y2="24" /></svg>`,
    'thumbs-up': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none" stroke-linejoin="round"><path d="M14 18v12a2 2 0 0 0 2 2h7l4-10V12h-6l1-6-1-2-6 6v6h-1a1 1 0 0 0-1 1z" /><path d="M10 18v12" /></svg>`,
    'video-cam': `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><rect x="5" y="10" width="20" height="20"/><polygon points="25,15 35,10 35,30 25,25"/></svg>`,
    volume: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polygon points="10,15 20,15 25,10 25,30 20,25 10,25"/><path d="M28 15l4 5-4 5"/></svg>`,
    warning: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><polygon points="20,5 5,35 35,35"/><line x1="20" y1="15" x2="20" y2="25"/><circle cx="20" cy="30" r="1"/></svg>`,
    wifi: `<svg class="kage-icon" stroke="currentColor" stroke-width="var(--kage-icon-depth)" viewBox="0 0 40 40" width="100%" height="100%" fill="none"><path d="M5 15a25 25 0 0 1 30 0"/><path d="M10 20a18 18 0 0 1 20 0"/><path d="M15 25a10 10 0 0 1 10 0"/><circle cx="20" cy="30" r="1"/></svg>`,
};

class KageIcon {
    name = input();
    svgSrc = input();
    size = input();
    depth = input();
    color = input();
    renderer = inject(Renderer2);
    elementRef = inject(ElementRef);
    http = inject(HttpClient);
    constructor() {
        effect(() => this.decide());
    }
    ngAfterViewInit() {
        this.decide();
    }
    decide() {
        const svgSrc = this.svgSrc();
        const iconName = this.name();
        if (svgSrc) {
            firstValueFrom(this.http.get(svgSrc, { responseType: 'text' }))
                .then((rawSvg) => this.insertSvg(rawSvg))
                .catch((err) => console.warn(`Failed to load SVG from URI: ${svgSrc}`, err));
        }
        else if (iconName) {
            this.insertSvg(ICONS[iconName ?? '']);
        }
        else {
            console.warn(`Icon "${iconName}" not found in registry, and no svgSrc provided.`);
        }
    }
    insertSvg(svgContent) {
        const calculateIconDepth = (depth) => {
            if (depth) {
                // If depth is already defined then nothing to do
                return depth;
            }
            else {
                if (this.size()) {
                    return Math.ceil(this.size() % 20);
                }
                else {
                    return 1;
                }
            }
        };
        this.renderer.setAttribute(this.elementRef.nativeElement, 'style', `height: ${this.size() ?? 20}px; --kage-icon-depth: ${calculateIconDepth(this.depth())}; color: ${this.color() ? 'var(--color-' + this.color() + ')' : 'inherit'}`);
        this.elementRef.nativeElement.innerHTML = svgContent;
        // this.renderer.appendChild(this.elementRef.nativeElement, div);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageIcon, isStandalone: true, selector: "kage-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, svgSrc: { classPropertyName: "svgSrc", publicName: "svgSrc", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;width:max-content}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageIcon, decorators: [{
            type: Component,
            args: [{ selector: 'kage-icon', imports: [], template: '', styles: [":host{display:flex;align-items:center;justify-content:center;width:max-content}\n"] }]
        }], ctorParameters: () => [] });

class KageToastHost {
    message = input('');
    type = input('info');
    dismiss = new EventEmitter();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageToastHost, isStandalone: true, selector: "k-toast-host", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: `
    <div class="k-toast-container" [ngClass]="[type()]">
      <p>{{ message() }}</p>
      <div class="icon" (click)="dismiss.emit()">
        <kage-icon name="remove"></kage-icon>
      </div>
    </div>
  `, isInline: true, styles: [".k-toast-container{background:var(--border-color);color:var(--color-text);padding:7px 10px;min-width:240px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 6px rgba(var(--color-light-rgb),.3);pointer-events:auto;margin-bottom:.5rem;animation:fadeIn .3s ease;border-left:var(--border-width, 2px) solid var(--border-color)}.k-toast-container.success{background:color-mix(in srgb,var(--color-background) 95%,var(--color-success) 5%);color:var(--color-success);border-color:var(--color-success)}.k-toast-container.success k-icon{color:var(--color-success)}.k-toast-container.danger{background:color-mix(in srgb,var(--color-background) 95%,var(--color-danger) 5%);border-color:var(--color-danger);color:var(--color-danger)}.k-toast-container.danger k-icon{color:var(--color-danger)}.k-toast-container.warning{background:color-mix(in srgb,var(--color-background) 95%,var(--color-warning) 5%);border-color:var(--color-warning);color:var(--color-warning)}.k-toast-container.warning k-icon{color:var(--color-warning)}.k-toast-container.info{background:color-mix(in srgb,var(--color-background) 95%,var(--color-info) 5%);border-color:var(--color-info);color:var(--color-info)}.k-toast-container .icon{display:flex;align-items:center;justify-content:center;cursor:pointer}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: KageIcon, selector: "kage-icon", inputs: ["name", "svgSrc", "size", "depth", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageToastHost, decorators: [{
            type: Component,
            args: [{ selector: 'k-toast-host', template: `
    <div class="k-toast-container" [ngClass]="[type()]">
      <p>{{ message() }}</p>
      <div class="icon" (click)="dismiss.emit()">
        <kage-icon name="remove"></kage-icon>
      </div>
    </div>
  `, imports: [KageIcon, NgClass], styles: [".k-toast-container{background:var(--border-color);color:var(--color-text);padding:7px 10px;min-width:240px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 6px rgba(var(--color-light-rgb),.3);pointer-events:auto;margin-bottom:.5rem;animation:fadeIn .3s ease;border-left:var(--border-width, 2px) solid var(--border-color)}.k-toast-container.success{background:color-mix(in srgb,var(--color-background) 95%,var(--color-success) 5%);color:var(--color-success);border-color:var(--color-success)}.k-toast-container.success k-icon{color:var(--color-success)}.k-toast-container.danger{background:color-mix(in srgb,var(--color-background) 95%,var(--color-danger) 5%);border-color:var(--color-danger);color:var(--color-danger)}.k-toast-container.danger k-icon{color:var(--color-danger)}.k-toast-container.warning{background:color-mix(in srgb,var(--color-background) 95%,var(--color-warning) 5%);border-color:var(--color-warning);color:var(--color-warning)}.k-toast-container.warning k-icon{color:var(--color-warning)}.k-toast-container.info{background:color-mix(in srgb,var(--color-background) 95%,var(--color-info) 5%);border-color:var(--color-info);color:var(--color-info)}.k-toast-container .icon{display:flex;align-items:center;justify-content:center;cursor:pointer}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
        }], propDecorators: { dismiss: [{
                type: Output
            }] } });

class KageToastCtrl {
    wrappers = new Map();
    appRef = inject(ApplicationRef);
    injector = inject(Injector);
    envInjector = inject(EnvironmentInjector);
    document = inject(DOCUMENT);
    show(options) {
        const { message, type = 'info', duration = 3000, position = 'top-right', } = options;
        const wrapper = this.ensureWrapper(position);
        const componentRef = createComponent(KageToastHost, {
            environmentInjector: this.envInjector,
            elementInjector: this.injector,
        });
        componentRef.setInput('message', message);
        componentRef.setInput('type', type);
        componentRef.instance.dismiss.subscribe(() => {
            this.removeToast(wrapper, componentRef);
        });
        this.appRef.attachView(componentRef.hostView);
        wrapper.appendChild(componentRef.location.nativeElement);
        if (duration > 0) {
            setTimeout(() => this.removeToast(wrapper, componentRef), duration);
        }
    }
    removeToast(wrapper, componentRef) {
        this.appRef.detachView(componentRef.hostView);
        componentRef.destroy();
        if (wrapper.children.length === 0) {
            wrapper.remove();
            this.wrappers.forEach((el, key) => {
                if (el === wrapper)
                    this.wrappers.delete(key);
            });
        }
    }
    ensureWrapper(position) {
        if (this.wrappers.has(position)) {
            return this.wrappers.get(position);
        }
        const wrapper = this.document.createElement('div');
        wrapper.classList.add('k-toast-wrapper', position);
        this.document.body.appendChild(wrapper);
        this.wrappers.set(position, wrapper);
        return wrapper;
    }
    clearAll() {
        this.wrappers.forEach((wrapper) => {
            while (wrapper.firstChild) {
                wrapper.firstChild.remove();
            }
            wrapper.remove();
        });
        this.wrappers.clear();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageToastCtrl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageToastCtrl, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageToastCtrl, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

class KageCopyDirective {
    kageCopy = input('');
    toast = inject(KageToastCtrl);
    onClick() {
        if (!this.kageCopy()) {
            this.toast.show({
                message: `No text provided to copy.`,
                duration: 2500,
                position: 'top-right',
                type: 'warning',
            });
            console.warn('No text provided to copy.');
            return;
        }
        navigator.clipboard
            .writeText(this.kageCopy())
            .then(() => {
            this.toast.show({
                message: `Copied`,
                duration: 2500,
                position: 'top-right',
                type: 'success',
            });
        })
            .catch((err) => {
            this.toast.show({
                message: `Failed to copy`,
                duration: 2500,
                position: 'top-right',
                type: 'danger',
            });
            console.error('Failed to copy text: ', err);
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCopyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: KageCopyDirective, isStandalone: true, selector: "[kageCopy]", inputs: { kageCopy: { classPropertyName: "kageCopy", publicName: "kageCopy", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCopyDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kageCopy]',
                }]
        }], propDecorators: { onClick: [{
                type: HostListener,
                args: ['click']
            }] } });

class KageImageViewDirective {
    element = inject(ElementRef);
    document = inject(DOCUMENT);
    toastService = inject(KageToastCtrl);
    imageCmp = inject(KageAvatar, { optional: true, host: true });
    ngAfterViewInit() {
        const ele = this.element.nativeElement;
        ele.style.cursor = 'pointer';
        const src = ele.src || this.imageCmp?.src();
        const alt = ele.alt || this.imageCmp?.alt();
        ele.onclick = () => this.previewImage(src, alt);
    }
    previewImage(imageUrl, imageAlt) {
        const urlConfig = new URL(this.document.URL);
        const container = this.document.createElement('div');
        container.setAttribute('class', 'kage-image-preview-container');
        const loaderContainer = this.document.createElement('div');
        loaderContainer.setAttribute('class', 'kage-image-preview-loader');
        const spanOne = this.document.createElement('span');
        loaderContainer.append(spanOne);
        const spanTwo = this.document.createElement('span');
        loaderContainer.append(spanTwo);
        const spanThree = this.document.createElement('span');
        loaderContainer.append(spanThree);
        const spanFour = this.document.createElement('span');
        loaderContainer.append(spanFour);
        const spanFive = this.document.createElement('span');
        loaderContainer.append(spanFive);
        container.appendChild(loaderContainer);
        const image = this.document.createElement('img');
        image.src = imageUrl;
        image.alt = imageAlt ?? 'image';
        image.title = imageAlt ?? 'Image';
        image.loading = 'lazy';
        image.style.display = 'none';
        image.onload = () => {
            container.removeChild(loaderContainer);
            image.style.display = 'inherit';
            image.setAttribute('class', 'kage-image-preview-image-loaded');
        };
        container.appendChild(image);
        const options = this.document.createElement('div');
        options.setAttribute('class', 'kage-image-preview-options');
        const optionsDownload = this.document.createElement('div');
        // Need to provide icon url
        optionsDownload.setAttribute('class', 'kage-image-preview-option-download');
        optionsDownload.innerText = 'Download';
        optionsDownload.addEventListener('click', () => {
            if (imageUrl) {
                if (imageUrl.startsWith('/')) {
                    this.downloadImage(`${urlConfig.origin}${imageUrl}`, imageAlt);
                }
                else if (imageUrl.startsWith('http://') ||
                    imageUrl.startsWith('https://')) {
                    this.downloadImage(imageUrl, imageAlt);
                }
            }
        });
        options.appendChild(optionsDownload);
        const optionsClose = this.document.createElement('div');
        // Need to provide icon url
        optionsClose.setAttribute('class', 'kage-image-preview-option-close');
        optionsClose.innerText = 'Close';
        optionsClose.addEventListener('click', () => this.document.body.removeChild(container));
        options.appendChild(optionsClose);
        container.appendChild(options);
        this.document.body.appendChild(container);
    }
    async downloadImage(src, fileName) {
        if (src) {
            const response = await fetch(src);
            const blobImage = await response.blob();
            const href = URL.createObjectURL(blobImage);
            const anchorElement = this.document.createElement('a');
            anchorElement.href = href;
            anchorElement.download = `${cleanText(fileName ?? 'Image')}.${getFileExtensionFromUrl(src) ?? 'png'}`;
            this.document.body.appendChild(anchorElement);
            anchorElement.click();
            this.document.body.removeChild(anchorElement);
            URL.revokeObjectURL(href);
        }
        else {
            this.toastService.show({
                message: "Couldn't download image.",
                position: 'top-right',
                duration: 2500,
                type: 'danger',
            });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageImageViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: KageImageViewDirective, isStandalone: true, selector: "[kageImageView]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageImageViewDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kageImageView]',
                }]
        }] });
const getFileExtensionFromUrl = (url) => {
    if (url) {
        if (typeof url === 'string') {
            return url.split('.').pop() ?? null;
        }
    }
    return null;
};
const cleanText = (name) => {
    if (name && typeof name === 'string') {
        return name
            .toLowerCase()
            .replaceAll(' ', '_')
            .replaceAll('-', '_')
            .replaceAll('/', '_');
    }
    return null;
};

class KageResizeDirective {
    observeWidth = input(true);
    observeHeight = input(true);
    debounceTime = input(100);
    resizeMode = input('debounce');
    minWidthClass = input();
    maxWidthClass = input();
    minHeightClass = input();
    maxHeightClass = input();
    onResize;
    kageResized = output();
    resizeSubject = new Subject();
    observer;
    el = inject(ElementRef);
    zone = inject(NgZone);
    renderer = inject(Renderer2);
    ngOnInit() {
        const stream = this.resizeMode() === 'throttle'
            ? this.resizeSubject.pipe(throttleTime(this.debounceTime()))
            : this.resizeSubject.pipe(debounceTime(this.debounceTime()));
        stream.subscribe((rect) => {
            this.kageResized.emit(rect);
            if (this.onResize)
                this.onResize(rect);
            this.applyClasses(rect);
        });
        this.zone.runOutsideAngular(() => {
            this.observer = new ResizeObserver((entries) => {
                for (const entry of entries) {
                    const rect = entry.contentRect;
                    if ((this.observeWidth() && rect.width !== 0) ||
                        (this.observeHeight() && rect.height !== 0)) {
                        this.resizeSubject.next(rect);
                    }
                }
            });
            this.observer.observe(this.el.nativeElement);
        });
    }
    applyClasses(rect) {
        const el = this.el.nativeElement;
        const applyClass = (condition, match) => {
            if (!condition)
                return;
            const hasClass = el.classList.contains(condition.className);
            if (match && !hasClass) {
                this.renderer.addClass(el, condition.className);
            }
            else if (!match && hasClass) {
                this.renderer.removeClass(el, condition.className);
            }
        };
        applyClass(this.minWidthClass(), !!this.minWidthClass()?.width &&
            rect.width >= this.minWidthClass()?.width);
        applyClass(this.maxWidthClass(), !!this.maxWidthClass()?.width &&
            rect.width <= this.maxWidthClass()?.width);
        applyClass(this.minHeightClass(), !!this.minHeightClass()?.height &&
            rect.height >= this.minHeightClass()?.height);
        applyClass(this.maxHeightClass(), !!this.maxHeightClass()?.height &&
            rect.height <= this.maxHeightClass()?.height);
    }
    ngOnDestroy() {
        this.observer?.disconnect();
        this.resizeSubject.complete();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: KageResizeDirective, isStandalone: true, selector: "[kageResized]", inputs: { observeWidth: { classPropertyName: "observeWidth", publicName: "observeWidth", isSignal: true, isRequired: false, transformFunction: null }, observeHeight: { classPropertyName: "observeHeight", publicName: "observeHeight", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, minWidthClass: { classPropertyName: "minWidthClass", publicName: "minWidthClass", isSignal: true, isRequired: false, transformFunction: null }, maxWidthClass: { classPropertyName: "maxWidthClass", publicName: "maxWidthClass", isSignal: true, isRequired: false, transformFunction: null }, minHeightClass: { classPropertyName: "minHeightClass", publicName: "minHeightClass", isSignal: true, isRequired: false, transformFunction: null }, maxHeightClass: { classPropertyName: "maxHeightClass", publicName: "maxHeightClass", isSignal: true, isRequired: false, transformFunction: null }, onResize: { classPropertyName: "onResize", publicName: "onResize", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { kageResized: "kageResized" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageResizeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kageResized]',
                }]
        }], propDecorators: { onResize: [{
                type: Input
            }] } });

class KageRippleDirective {
    rippleColor = input();
    container;
    keyframesInjected = false;
    el = inject((ElementRef));
    renderer = inject(Renderer2);
    document = inject(DOCUMENT);
    platformId = inject(PLATFORM_ID);
    constructor() {
        if (isPlatformBrowser(this.platformId)) {
            this.renderer.setAttribute(this.el.nativeElement, 'ripple-host', '');
            this.container = this.renderer.createElement('span');
            this.renderer.addClass(this.container, 'ripple-container');
            this.renderer.setStyle(this.container, 'position', 'absolute');
            this.renderer.appendChild(this.el.nativeElement, this.container);
            this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
            this.renderer.setStyle(this.el.nativeElement, 'overflow', 'hidden');
        }
    }
    onClick(event) {
        const rippleColor = this.rippleColor() ?? 'var(--color-primary)';
        const ripple = this.renderer.createElement('span');
        const rect = this.el.nativeElement.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = event.clientX - rect.left - size / 2;
        const y = event.clientY - rect.top - size / 2;
        this.renderer.setStyle(ripple, 'position', 'absolute');
        this.renderer.setStyle(ripple, 'border-radius', '50%');
        this.renderer.setStyle(ripple, 'width', `${size}px`);
        this.renderer.setStyle(ripple, 'height', `${size}px`);
        this.renderer.setStyle(ripple, 'left', `${x}px`);
        this.renderer.setStyle(ripple, 'top', `${y}px`);
        this.renderer.setStyle(ripple, 'background-color', rippleColor);
        this.renderer.setStyle(ripple, 'transform', 'scale(0)');
        this.renderer.setStyle(ripple, 'opacity', '0.75');
        this.renderer.setStyle(ripple, 'pointer-events', 'none');
        this.renderer.setStyle(ripple, 'animation', 'ripple 600ms ease-out');
        this.injectRippleKeyframes();
        this.renderer.appendChild(this.container, ripple);
        setTimeout(() => {
            this.renderer.removeChild(this.container, ripple);
        }, 600);
    }
    injectRippleKeyframes() {
        if (this.keyframesInjected)
            return;
        const style = this.renderer.createElement('style');
        style.innerHTML = `
      @keyframes ripple {
        to {
          transform: scale(2);
          opacity: 0;
        }
      }
    `;
        this.renderer.appendChild(this.document.head, style);
        this.keyframesInjected = true;
    }
    ngOnDestroy() {
        if (isPlatformBrowser(this.platformId)) {
            this.container.remove();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: KageRippleDirective, isStandalone: true, selector: "[kageRipple]", inputs: { rippleColor: { classPropertyName: "rippleColor", publicName: "rippleColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRippleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kageRipple]',
                }]
        }], ctorParameters: () => [], propDecorators: { onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class KageImageFallbackDirective {
    el;
    renderer;
    fallbackUrl = input('', { alias: 'kageImageFallback' });
    constructor(el, renderer) {
        this.el = el;
        this.renderer = renderer;
    }
    loadFallbackOnError() {
        if (this.el.nativeElement.tagName.toLowerCase() === 'img') {
            this.renderer.setAttribute(this.el.nativeElement, 'src', this.fallbackUrl());
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageImageFallbackDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: KageImageFallbackDirective, isStandalone: true, selector: "[kageImageFallback]", inputs: { fallbackUrl: { classPropertyName: "fallbackUrl", publicName: "kageImageFallback", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "error": "loadFallbackOnError()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageImageFallbackDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[kageImageFallback]'
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { loadFallbackOnError: [{
                type: HostListener,
                args: ['error']
            }] } });

class KageBreadCrumbs {
    cssClass = input();
    iconDepth = input();
    breadCrumps;
    location = inject(Location);
    backToPreviousPage() {
        this.location.back();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageBreadCrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageBreadCrumbs, isStandalone: true, selector: "kage-bread-crumbs", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, iconDepth: { classPropertyName: "iconDepth", publicName: "iconDepth", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "breadCrumps", predicate: KageBreadCrumb }], ngImport: i0, template: "<div class=\"kage-breadcrumbs-wrapper\" [class]=\"cssClass() ?? ''\">\r\n    <span class=\"back\" kageRipple [rippleColor]=\"'var(--color-medium)'\" (click)=\"backToPreviousPage()\">\r\n        <kage-icon [depth]=\"iconDepth()\" name=\"arrow-backward\"></kage-icon>\r\n    </span>    \r\n    @if (breadCrumps.length) {\r\n        <div class=\"links\">\r\n            @for (item of breadCrumps; track $index; let l = $last) {\r\n                @if (!l) {\r\n                    <a [routerLink]=\"item.href()\">{{item.label()}}</a>\r\n                    <kage-icon name=\"chevron-forward\" [depth]=\"iconDepth()\"></kage-icon>\r\n                } @else {\r\n                    <p>{{item.label()}}</p>\r\n                }\r\n            }\r\n        </div>\r\n    }\r\n</div>", styles: [".kage-breadcrumbs-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:20px;flex-direction:var(--kage-breadcrumbs-flow-direction, row)}.kage-breadcrumbs-wrapper .back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer}.kage-breadcrumbs-wrapper .links{display:flex;align-items:center;gap:var(--kage-bread-crumbs-space, 10px);flex-wrap:var(--kage-bread-crumbs-overflow, wrap)}.kage-breadcrumbs-wrapper .links a,.kage-breadcrumbs-wrapper .links p{text-decoration:var(--kage-bread-crumb-link-decoration, none);color:var(--kage-bread-crumb-link-color, inherit);font-family:var(--kage-bread-crumb-font-family, inherit);transition:color .3s}.kage-breadcrumbs-wrapper .links a:hover,.kage-breadcrumbs-wrapper .links p:hover{color:var(--kage-bread-crumb-link-hover-color, var(--color-primary, inherit))}.kage-breadcrumbs-wrapper .links p{pointer-events:none;color:var(--kage-bread-crumb-no-link-color, var(--color-primary, inherit))}\n"], dependencies: [{ kind: "component", type: KageIcon, selector: "kage-icon", inputs: ["name", "svgSrc", "size", "depth", "color"] }, { kind: "directive", type: KageRippleDirective, selector: "[kageRipple]", inputs: ["rippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageBreadCrumbs, decorators: [{
            type: Component,
            args: [{ selector: 'kage-bread-crumbs', imports: [KageIcon, KageRippleDirective, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kage-breadcrumbs-wrapper\" [class]=\"cssClass() ?? ''\">\r\n    <span class=\"back\" kageRipple [rippleColor]=\"'var(--color-medium)'\" (click)=\"backToPreviousPage()\">\r\n        <kage-icon [depth]=\"iconDepth()\" name=\"arrow-backward\"></kage-icon>\r\n    </span>    \r\n    @if (breadCrumps.length) {\r\n        <div class=\"links\">\r\n            @for (item of breadCrumps; track $index; let l = $last) {\r\n                @if (!l) {\r\n                    <a [routerLink]=\"item.href()\">{{item.label()}}</a>\r\n                    <kage-icon name=\"chevron-forward\" [depth]=\"iconDepth()\"></kage-icon>\r\n                } @else {\r\n                    <p>{{item.label()}}</p>\r\n                }\r\n            }\r\n        </div>\r\n    }\r\n</div>", styles: [".kage-breadcrumbs-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:20px;flex-direction:var(--kage-breadcrumbs-flow-direction, row)}.kage-breadcrumbs-wrapper .back{width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer}.kage-breadcrumbs-wrapper .links{display:flex;align-items:center;gap:var(--kage-bread-crumbs-space, 10px);flex-wrap:var(--kage-bread-crumbs-overflow, wrap)}.kage-breadcrumbs-wrapper .links a,.kage-breadcrumbs-wrapper .links p{text-decoration:var(--kage-bread-crumb-link-decoration, none);color:var(--kage-bread-crumb-link-color, inherit);font-family:var(--kage-bread-crumb-font-family, inherit);transition:color .3s}.kage-breadcrumbs-wrapper .links a:hover,.kage-breadcrumbs-wrapper .links p:hover{color:var(--kage-bread-crumb-link-hover-color, var(--color-primary, inherit))}.kage-breadcrumbs-wrapper .links p{pointer-events:none;color:var(--kage-bread-crumb-no-link-color, var(--color-primary, inherit))}\n"] }]
        }], propDecorators: { breadCrumps: [{
                type: ContentChildren,
                args: [KageBreadCrumb]
            }] } });

class KageButton {
    cssClass = input();
    type = input('button');
    color = input();
    disabled = model(false);
    loading = input(false);
    iconRight = input(false);
    ariaLabel = input('Button');
    fill = input('outline');
    onChange = (value) => { };
    onTouched = () => { };
    value;
    get getRippleColor() {
        if (this.color() === 'primary') {
            return `var(--color-primary)`;
        }
        else if (this.color() === 'secondary') {
            return `var(--color-secondary)`;
        }
        else if (this.color() === 'tertiary') {
            return `var(--color-tertiary)`;
        }
        else if (this.color() === 'success') {
            return `var(--color-success)`;
        }
        else if (this.color() === 'warning') {
            return `var(--color-warning)`;
        }
        else if (this.color() === 'danger') {
            return `var(--color-danger)`;
        }
        else if (this.color() === 'info') {
            return `var(--color-info)`;
        }
        else {
            return `var(--border-color)`;
        }
    }
    writeValue(value) {
        this.value = value;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    handleClick() {
        if (!this.disabled() && !this.loading()) {
            this.onTouched();
            this.onChange(true);
        }
    }
    handleKeydown(event) {
        if ((event.key === 'Enter' || event.key === ' ') &&
            !this.disabled() &&
            !this.loading()) {
            event.preventDefault();
            this.handleClick();
        }
    }
    onHostClick(event) {
        if (this.disabled()) {
            event.preventDefault();
            event.stopImmediatePropagation();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageButton, isStandalone: true, selector: "kage-button", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "keydown": "handleKeydown($event)", "click": "onHostClick($event)" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageButton),
                multi: true,
            },
        ], ngImport: i0, template: "<button\r\n  [attr.type]=\"type()\"\r\n  [disabled]=\"disabled() || loading()\"\r\n  [ngClass]=\"[color() ?? '', fill(), cssClass() ?? '']\"\r\n  class=\"kage-button-wrapper\"\r\n  (click)=\"handleClick()\"\r\n  [attr.aria-disabled]=\"disabled() || loading()\"\r\n  [attr.aria-busy]=\"loading()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  kageRipple\r\n  [rippleColor]=\"getRippleColor\"\r\n>\r\n    @if (loading()) {\r\n        <span class=\"spinner\" aria-hidden=\"true\"></span>\r\n    }\r\n    @if (!iconRight() && !loading()) {\r\n        <ng-content select=\"[icon]\"></ng-content>\r\n    }\r\n    @if (!loading()) {\r\n        <ng-content></ng-content>\r\n    }\r\n    @if (iconRight() && !loading()) {\r\n        <ng-content select=\"[icon]\"></ng-content>\r\n    }\r\n</button>", styles: [":host{display:contents}:host .kage-button-wrapper{display:inline-flex;align-items:center;justify-content:center;padding:var(--kage-button-padding-top, 9px) var(--kage-button-padding-right, 10px) var(--kage-button-padding-bottom, 9px) var(--kage-button-padding-left, 10px);cursor:pointer;width:inherit!important;background:var(--kage-button-background, transparent);transition:background .2s ease,transform .1s ease;position:relative;font-family:var(--kage-button-font-family, inherit);border:var(--kage-button-border-width, 1px) solid var(--kage-button-border-color, var(--color-primary, inherit));text-transform:var(--kage-button-text-transform, uppercase);color:var(--kage-button-color, var(--color-primary, inherit));font-size:var(--kage-button-font-size, 15px);border-radius:var(--kage-button-radial-value, 0px)}:host .kage-button-wrapper:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}:host .kage-button-wrapper .spinner{width:var(--kage-button-spinner-size, 17px);height:var(--kage-button-spinner-size, 17px);border:var(--kage-button-border-width, 1px) solid var(--kage-button-spinner-color, var(--color-primary, inherit));border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}:host .kage-button-wrapper.primary{--kage-button-border-color: var(--color-primary);--kage-button-color: var(--color-primary);--kage-button-spinner-color: var(--color-primary)}:host .kage-button-wrapper.secondary{--kage-button-border-color: var(--color-secondary);--kage-button-color: var(--color-secondary);--kage-button-spinner-color: var(--color-secondary)}:host .kage-button-wrapper.tertiary{--kage-button-border-color: var(--color-tertiary);--kage-button-color: var(--color-tertiary);--kage-button-spinner-color: var(--color-tertiary)}:host .kage-button-wrapper.warning{--kage-button-border-color: var(--color-warning);--kage-button-color: var(--color-warning);--kage-button-spinner-color: var(--color-warning)}:host .kage-button-wrapper.danger{--kage-button-border-color: var(--color-danger);--kage-button-color: var(--color-danger);--kage-button-spinner-color: var(--color-danger)}:host .kage-button-wrapper.success{--kage-button-border-color: var(--color-success);--kage-button-color: var(--color-success);--kage-button-spinner-color: var(--color-success)}:host .kage-button-wrapper.info{--kage-button-border-color: var(--color-info);--kage-button-color: var(--color-info);--kage-button-spinner-color: var(--color-info)}:host .kage-button-wrapper.clear{--kage-button-border-color: transparent !important}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KageRippleDirective, selector: "[kageRipple]", inputs: ["rippleColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageButton, decorators: [{
            type: Component,
            args: [{ selector: 'kage-button', imports: [NgClass, KageRippleDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageButton),
                            multi: true,
                        },
                    ], template: "<button\r\n  [attr.type]=\"type()\"\r\n  [disabled]=\"disabled() || loading()\"\r\n  [ngClass]=\"[color() ?? '', fill(), cssClass() ?? '']\"\r\n  class=\"kage-button-wrapper\"\r\n  (click)=\"handleClick()\"\r\n  [attr.aria-disabled]=\"disabled() || loading()\"\r\n  [attr.aria-busy]=\"loading()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  role=\"button\"\r\n  tabindex=\"0\"\r\n  kageRipple\r\n  [rippleColor]=\"getRippleColor\"\r\n>\r\n    @if (loading()) {\r\n        <span class=\"spinner\" aria-hidden=\"true\"></span>\r\n    }\r\n    @if (!iconRight() && !loading()) {\r\n        <ng-content select=\"[icon]\"></ng-content>\r\n    }\r\n    @if (!loading()) {\r\n        <ng-content></ng-content>\r\n    }\r\n    @if (iconRight() && !loading()) {\r\n        <ng-content select=\"[icon]\"></ng-content>\r\n    }\r\n</button>", styles: [":host{display:contents}:host .kage-button-wrapper{display:inline-flex;align-items:center;justify-content:center;padding:var(--kage-button-padding-top, 9px) var(--kage-button-padding-right, 10px) var(--kage-button-padding-bottom, 9px) var(--kage-button-padding-left, 10px);cursor:pointer;width:inherit!important;background:var(--kage-button-background, transparent);transition:background .2s ease,transform .1s ease;position:relative;font-family:var(--kage-button-font-family, inherit);border:var(--kage-button-border-width, 1px) solid var(--kage-button-border-color, var(--color-primary, inherit));text-transform:var(--kage-button-text-transform, uppercase);color:var(--kage-button-color, var(--color-primary, inherit));font-size:var(--kage-button-font-size, 15px);border-radius:var(--kage-button-radial-value, 0px)}:host .kage-button-wrapper:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}:host .kage-button-wrapper .spinner{width:var(--kage-button-spinner-size, 17px);height:var(--kage-button-spinner-size, 17px);border:var(--kage-button-border-width, 1px) solid var(--kage-button-spinner-color, var(--color-primary, inherit));border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}:host .kage-button-wrapper.primary{--kage-button-border-color: var(--color-primary);--kage-button-color: var(--color-primary);--kage-button-spinner-color: var(--color-primary)}:host .kage-button-wrapper.secondary{--kage-button-border-color: var(--color-secondary);--kage-button-color: var(--color-secondary);--kage-button-spinner-color: var(--color-secondary)}:host .kage-button-wrapper.tertiary{--kage-button-border-color: var(--color-tertiary);--kage-button-color: var(--color-tertiary);--kage-button-spinner-color: var(--color-tertiary)}:host .kage-button-wrapper.warning{--kage-button-border-color: var(--color-warning);--kage-button-color: var(--color-warning);--kage-button-spinner-color: var(--color-warning)}:host .kage-button-wrapper.danger{--kage-button-border-color: var(--color-danger);--kage-button-color: var(--color-danger);--kage-button-spinner-color: var(--color-danger)}:host .kage-button-wrapper.success{--kage-button-border-color: var(--color-success);--kage-button-color: var(--color-success);--kage-button-spinner-color: var(--color-success)}:host .kage-button-wrapper.info{--kage-button-border-color: var(--color-info);--kage-button-color: var(--color-info);--kage-button-spinner-color: var(--color-info)}:host .kage-button-wrapper.clear{--kage-button-border-color: transparent !important}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
        }], propDecorators: { handleKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }], onHostClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class KageCalendar {
    mode = input('single');
    disabled = model(false);
    disabledDateFn = input();
    invalidDateFn = input();
    // Element function
    onChange = (_) => { };
    onTouched = () => { };
    // Output Events
    kageChange = output();
    kageTouched = output();
    // Local variable
    calendar = [];
    value = {};
    range = {};
    multipleDates = [];
    constructor() {
        const d = new Date();
        this.createCalendar(d.getMonth(), d.getFullYear());
    }
    // Default options
    writeValue(obj) {
        this.value = obj;
    }
    registerOnChange(fn) {
        this.onChange = fn;
        this.kageTouched.emit();
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
        this.kageChange.emit();
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    onBlur() {
        this.onTouched();
    }
    /**
     * Adjust class based on boolean values
     * @param date - Disable date
     * @returns - boolean
     */
    isDateMultiple(date) {
        if (date) {
            const toDateString = (date) => new Date(date).toISOString().split('T')[0];
            return this.multipleDates.some((d) => toDateString(d) === toDateString(date));
        }
        return false;
    }
    /**
     * Adjust class based on boolean values
     * @param date - Disable date
     * @returns - boolean
     */
    isDateSelected(date) {
        if (date && this.value?.hasOwnProperty('selected')) {
            const d = new Date(this.value.selected);
            return (date.getDate() === d.getDate() &&
                date.getMonth() === d.getMonth() &&
                date.getFullYear() === d.getFullYear());
        }
        return false;
    }
    /**
     * Modify calendar based on these
     * @param date - Date
     * @returns - Booelan
     */
    isInRange(date) {
        if (date) {
            const dateObj = this.range;
            if (dateObj.hasOwnProperty('start') && dateObj?.hasOwnProperty('end')) {
                return date >= new Date(dateObj.start) && date <= new Date(dateObj.end);
            }
            return false;
        }
        return false;
    }
    /**
     * Adjust class based on boolean values
     * @param date - Disable date
     * @returns - boolean
     */
    isDateDisabled(date) {
        const fn = this.disabledDateFn();
        if (fn) {
            return fn(date);
        }
        return false;
    }
    /**
     * Depends on user which date to be set as invalid
     * @param date - Date
     * @returns - Boolean
     */
    isinvalidDate(date) {
        const fn = this.invalidDateFn();
        if (fn) {
            return fn(date);
        }
        return false;
    }
    /**
     * Today validation
     * @param date - For any date
     * @returns - boolean
     */
    isToday(date) {
        if (date) {
            const today = new Date();
            return (date.getDate() === today.getDate() &&
                date.getMonth() === today.getMonth() &&
                date.getFullYear() === today.getFullYear());
        }
        return false;
    }
    /**
     * Calculate and recalculate date
     * @param date
     */
    dateClicked(date) {
        if (date) {
            if (this.mode() === 'single') {
                const obj = { selected: date };
                if (!this.isDateDisabled(date) && !this.isinvalidDate(date)) {
                    this.writeValue(obj);
                    this.onChange(obj);
                }
            }
            else if (this.mode() === 'range') {
                if (!this.isDateDisabled(date) && !this.isinvalidDate(date)) {
                    if (this.range?.hasOwnProperty('start')) {
                        if (this.range?.hasOwnProperty('end')) {
                            delete this.range.end;
                            Object.assign(this.range, { start: date });
                            this.onChange(this.range);
                        }
                        else {
                            Object.assign(this.range, { end: date });
                            this.writeValue(this.range);
                            this.onChange(this.range);
                        }
                    }
                    else {
                        Object.assign(this.range, { start: date });
                        this.onChange(this.range);
                    }
                }
            }
            else if (this.mode() === 'multiple') {
                if (!this.isDateDisabled(date) && !this.isinvalidDate(date)) {
                    const toDateString = (date) => new Date(date).toISOString().split('T')[0];
                    const index = this.multipleDates.findIndex((d) => toDateString(d) === toDateString(date));
                    if (index === -1) {
                        this.multipleDates.push(date);
                    }
                    else {
                        this.multipleDates.splice(index, 1);
                    }
                    this.writeValue(this.multipleDates);
                    this.onChange(this.multipleDates);
                }
            }
        }
    }
    /**
     * Calendar navigation next month
     */
    nextMonth() {
        const currentCalendar = this.calendar[1][0];
        if (currentCalendar?.getMonth() === 11) {
            const month = 0;
            const year = (currentCalendar?.getFullYear() ?? 0) + 1;
            this.createCalendar(month, year);
        }
        else {
            const month = (currentCalendar?.getMonth() ?? 0) + 1;
            const year = currentCalendar?.getFullYear();
            this.createCalendar(month, year);
        }
    }
    /**
     * Calendar navigation prev month
     */
    prevMonth() {
        const currentCalendar = this.calendar[1][0];
        if (currentCalendar?.getMonth() === 0) {
            const month = 11;
            const year = (currentCalendar?.getFullYear() ?? 0) - 1;
            this.createCalendar(month, year);
        }
        else {
            const month = (currentCalendar?.getMonth() ?? 0) - 1;
            const year = currentCalendar?.getFullYear();
            this.createCalendar(month, year);
        }
    }
    // Create calendar dates
    createCalendar(month, year) {
        // Create date object
        const date = new Date();
        date.setFullYear(year);
        date.setMonth(month);
        date.setDate(1);
        // last date of a month
        const lastDate = new Date(year, month + 1, 0);
        // get week day of the date
        const weekDay = date.getDay();
        const output = [];
        let arr = [];
        if (weekDay) {
            for (let wk = 0; wk < weekDay; wk++) {
                arr.push(null);
            }
        }
        for (let i = 0; i < lastDate.getDate(); i++) {
            const addedDate = new Date();
            addedDate.setFullYear(year);
            addedDate.setMonth(month);
            addedDate.setDate(i + 1);
            arr.push(addedDate);
            if (arr.length === 7 || i + 1 === lastDate.getDate()) {
                output.push(arr);
                arr = [];
            }
        }
        // check if last array is filled or not
        const lastArr = output[output.length - 1];
        if (lastArr.length !== 7) {
            const extraArr = new Array(7 - lastArr.length).fill(null);
            output.splice(output.length - 1, 1, lastArr.concat(extraArr));
        }
        this.calendar = output;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageCalendar, isStandalone: true, selector: "kage-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDateFn: { classPropertyName: "disabledDateFn", publicName: "disabledDateFn", isSignal: true, isRequired: false, transformFunction: null }, invalidDateFn: { classPropertyName: "invalidDateFn", publicName: "invalidDateFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", kageChange: "kageChange", kageTouched: "kageTouched" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageCalendar),
                multi: true,
            },
        ], ngImport: i0, template: "<div class=\"kage-calendar-wrapper\">\r\n  <div class=\"kage-calendar-header\">\r\n    <div class=\"kage-calendar-button\" (click)=\"prevMonth()\">\r\n      <kage-icon name=\"chevron-backward\" color=\"primary\" [depth]=\"3\" [size]=\"16\"></kage-icon>\r\n    </div>\r\n    <p class=\"kage-calendar-month-year-selected\">{{calendar.length ? (calendar[1][0] | date: 'MMM y') : ''}}</p>\r\n    <div class=\"kage-calendar-button\" (click)=\"nextMonth()\">\r\n      <kage-icon name=\"chevron-forward\" color=\"primary\" [depth]=\"3\" [size]=\"16\"></kage-icon>\r\n    </div>\r\n  </div>\r\n  <div class=\"kage-calendar-body\">\r\n    <div class=\"kage-calendar-cells kage-calendar-weeks-names\">\r\n      @for (wk of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track $index) {\r\n        <p>{{wk}}</p>\r\n      }\r\n    </div>\r\n    <div class=\"kage-calendar-cells kage-calendar-date-cells\">\r\n      @for (dates of calendar; track $index) {\r\n        <div class=\"kage-calendar-date-cells-row\">\r\n          @for (date of dates; track $index) {\r\n            <p \r\n              [attr.tabIndex]=\"date ? 0 : null\"\r\n              [style.cursor]=\"date ? 'pointer' : 'inherit'\"\r\n              [class.kage-calendar-today]=\"isToday(date)\" \r\n              [class.kage-calendar-date-on-range]=\"isInRange(date)\"\r\n              [class.kage-calendar-date-selected]=\"isDateSelected(date)\"\r\n              [class.kage-calender-date-multiple]=\"isDateMultiple(date)\"\r\n              [class.kage-calendar-date-disabled]=\"isDateDisabled(date)\" \r\n              [class.kage-calendar-invalid-date]=\"isinvalidDate(date)\"\r\n              (keyup.enter)=\"dateClicked(date)\"\r\n              (click)=\"dateClicked(date)\">\r\n                <span>{{date ? (date | date: 'd') : ''}}</span>\r\n            </p>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <!-- @if (mode() === 'multiple' || mode() === 'range') {\r\n      <div class=\"kage-calendar-btn-holder\">\r\n        <kage-button color=\"danger\" fill=\"clear\">Cancel</kage-button>\r\n        <kage-button color=\"success\" fill=\"clear\">Apply</kage-button>\r\n      </div>\r\n    } -->\r\n  </div>\r\n</div>", styles: [":host{display:inline-block;min-width:var(--kage-calendar-min-width, 260px)}:host .kage-calendar-wrapper{background:var(--kage-calendar-background, color-mix(in srgb, var(--color-background) 90%, var(--color-medium) 10%));border:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-border-color, var(--color-medium));overflow:hidden;width:100%}:host .kage-calendar-wrapper .kage-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}:host .kage-calendar-wrapper .kage-calendar-header .kage-calendar-button{width:22px;height:22px;border-radius:0;border:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-border-color, var(--color-medium));display:flex;align-items:center;justify-content:center;cursor:pointer}:host .kage-calendar-wrapper .kage-calendar-header .kage-calendar-button.disabled{pointer-events:none;opacity:.5}:host .kage-calendar-wrapper .kage-calendar-header .kage-calendar-month-year-selected{font-family:inherit;font-size:14px;padding:5px 50px}:host .kage-calendar-wrapper .kage-calendar-body{border-top:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-border-color, var(--color-medium));display:flex;flex-direction:column}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-weeks-names{background:var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row{display:grid;grid-template-columns:minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr);gap:0;border-bottom:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p{display:flex;align-items:center;justify-content:center;min-height:30px;border-right:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p span{display:inline-block}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p:focus,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p:focus{background:var(--kage-calendar-disabled-date-background, rgba(var(--color-medium-rgb), .3))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-today,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-today{position:relative}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-today span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-today span{color:var(--color-tertiary)}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-today:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-today:after{content:\"\";position:absolute;inset:0;background:rgba(var(--color-tertiary-rgb),.2)}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-on-range,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-selected,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calender-date-multiple,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-on-range,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-selected,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calender-date-multiple{position:relative;pointer-events:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-on-range span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-selected span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calender-date-multiple span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-on-range span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-selected span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calender-date-multiple span{color:var(--kage-calendar-selection-color, var(--color-secondary))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-on-range:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-selected:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calender-date-multiple:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-on-range:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-selected:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calender-date-multiple:after{content:\"\";position:absolute;inset:0;background:var(--kage-calendar-selection-background, rgba(var(--color-secondary-rgb), .4))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-disabled,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-disabled{position:relative;pointer-events:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-disabled span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-disabled span{color:var(--kage-calendar-disabled-date-color, var(--color-medium))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-disabled:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-disabled:after{content:\"\";position:absolute;inset:0;background:var(--kage-calendar-disabled-date-background, rgba(var(--color-medium-rgb), .1))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-invalid-date,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-invalid-date{position:relative;pointer-events:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-invalid-date span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-invalid-date span{color:var(--kage-calendar-invalid-date-color, var(--color-danger))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-invalid-date:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-invalid-date:after{content:\"\";position:absolute;inset:0;background:var(--kage-calendar-disabled-date-background, rgba(var(--color-danger-rgb), .1))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p:nth-child(7),:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p:nth-child(7){border-right:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells:last-child,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row:last-child{border-bottom:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells{display:flex;flex-direction:column}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells .kage-calendar-date-cells-row.disabled p{pointer-events:none;cursor:alias}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-btn-holder{display:flex;align-items:center;justify-content:space-between;padding:3px 10px;border-top:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-border-color, var(--color-medium));background:var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: KageIcon, selector: "kage-icon", inputs: ["name", "svgSrc", "size", "depth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCalendar, decorators: [{
            type: Component,
            args: [{ selector: 'kage-calendar', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageCalendar),
                            multi: true,
                        },
                    ], imports: [DatePipe, KageIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kage-calendar-wrapper\">\r\n  <div class=\"kage-calendar-header\">\r\n    <div class=\"kage-calendar-button\" (click)=\"prevMonth()\">\r\n      <kage-icon name=\"chevron-backward\" color=\"primary\" [depth]=\"3\" [size]=\"16\"></kage-icon>\r\n    </div>\r\n    <p class=\"kage-calendar-month-year-selected\">{{calendar.length ? (calendar[1][0] | date: 'MMM y') : ''}}</p>\r\n    <div class=\"kage-calendar-button\" (click)=\"nextMonth()\">\r\n      <kage-icon name=\"chevron-forward\" color=\"primary\" [depth]=\"3\" [size]=\"16\"></kage-icon>\r\n    </div>\r\n  </div>\r\n  <div class=\"kage-calendar-body\">\r\n    <div class=\"kage-calendar-cells kage-calendar-weeks-names\">\r\n      @for (wk of ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; track $index) {\r\n        <p>{{wk}}</p>\r\n      }\r\n    </div>\r\n    <div class=\"kage-calendar-cells kage-calendar-date-cells\">\r\n      @for (dates of calendar; track $index) {\r\n        <div class=\"kage-calendar-date-cells-row\">\r\n          @for (date of dates; track $index) {\r\n            <p \r\n              [attr.tabIndex]=\"date ? 0 : null\"\r\n              [style.cursor]=\"date ? 'pointer' : 'inherit'\"\r\n              [class.kage-calendar-today]=\"isToday(date)\" \r\n              [class.kage-calendar-date-on-range]=\"isInRange(date)\"\r\n              [class.kage-calendar-date-selected]=\"isDateSelected(date)\"\r\n              [class.kage-calender-date-multiple]=\"isDateMultiple(date)\"\r\n              [class.kage-calendar-date-disabled]=\"isDateDisabled(date)\" \r\n              [class.kage-calendar-invalid-date]=\"isinvalidDate(date)\"\r\n              (keyup.enter)=\"dateClicked(date)\"\r\n              (click)=\"dateClicked(date)\">\r\n                <span>{{date ? (date | date: 'd') : ''}}</span>\r\n            </p>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n    <!-- @if (mode() === 'multiple' || mode() === 'range') {\r\n      <div class=\"kage-calendar-btn-holder\">\r\n        <kage-button color=\"danger\" fill=\"clear\">Cancel</kage-button>\r\n        <kage-button color=\"success\" fill=\"clear\">Apply</kage-button>\r\n      </div>\r\n    } -->\r\n  </div>\r\n</div>", styles: [":host{display:inline-block;min-width:var(--kage-calendar-min-width, 260px)}:host .kage-calendar-wrapper{background:var(--kage-calendar-background, color-mix(in srgb, var(--color-background) 90%, var(--color-medium) 10%));border:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-border-color, var(--color-medium));overflow:hidden;width:100%}:host .kage-calendar-wrapper .kage-calendar-header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}:host .kage-calendar-wrapper .kage-calendar-header .kage-calendar-button{width:22px;height:22px;border-radius:0;border:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-border-color, var(--color-medium));display:flex;align-items:center;justify-content:center;cursor:pointer}:host .kage-calendar-wrapper .kage-calendar-header .kage-calendar-button.disabled{pointer-events:none;opacity:.5}:host .kage-calendar-wrapper .kage-calendar-header .kage-calendar-month-year-selected{font-family:inherit;font-size:14px;padding:5px 50px}:host .kage-calendar-wrapper .kage-calendar-body{border-top:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-border-color, var(--color-medium));display:flex;flex-direction:column}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-weeks-names{background:var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row{display:grid;grid-template-columns:minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr) minmax(14.2857142857%,1fr);gap:0;border-bottom:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p{display:flex;align-items:center;justify-content:center;min-height:30px;border-right:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p span{display:inline-block}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p:focus,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p:focus{background:var(--kage-calendar-disabled-date-background, rgba(var(--color-medium-rgb), .3))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-today,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-today{position:relative}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-today span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-today span{color:var(--color-tertiary)}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-today:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-today:after{content:\"\";position:absolute;inset:0;background:rgba(var(--color-tertiary-rgb),.2)}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-on-range,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-selected,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calender-date-multiple,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-on-range,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-selected,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calender-date-multiple{position:relative;pointer-events:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-on-range span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-selected span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calender-date-multiple span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-on-range span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-selected span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calender-date-multiple span{color:var(--kage-calendar-selection-color, var(--color-secondary))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-on-range:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-selected:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calender-date-multiple:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-on-range:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-selected:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calender-date-multiple:after{content:\"\";position:absolute;inset:0;background:var(--kage-calendar-selection-background, rgba(var(--color-secondary-rgb), .4))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-disabled,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-disabled{position:relative;pointer-events:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-disabled span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-disabled span{color:var(--kage-calendar-disabled-date-color, var(--color-medium))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-date-disabled:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-date-disabled:after{content:\"\";position:absolute;inset:0;background:var(--kage-calendar-disabled-date-background, rgba(var(--color-medium-rgb), .1))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-invalid-date,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-invalid-date{position:relative;pointer-events:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-invalid-date span,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-invalid-date span{color:var(--kage-calendar-invalid-date-color, var(--color-danger))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p.kage-calendar-invalid-date:after,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p.kage-calendar-invalid-date:after{content:\"\";position:absolute;inset:0;background:var(--kage-calendar-disabled-date-background, rgba(var(--color-danger-rgb), .1))}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells p:nth-child(7),:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row p:nth-child(7){border-right:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-cells:last-child,:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells-row:last-child{border-bottom:none}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells{display:flex;flex-direction:column}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-date-cells .kage-calendar-date-cells-row.disabled p{pointer-events:none;cursor:alias}:host .kage-calendar-wrapper .kage-calendar-body .kage-calendar-btn-holder{display:flex;align-items:center;justify-content:space-between;padding:3px 10px;border-top:var(--kage-calendar-border-width, 1px) solid var(--kage-calendar-border-color, var(--color-medium));background:var(--kage-calendar-sections-background, color-mix(in srgb, var(--color-background) 80%, var(--color-medium) 20%))}\n"] }]
        }], ctorParameters: () => [] });

class KageCard {
    href = input();
    cssClass = input();
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageCard, isStandalone: true, selector: "kage-card", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (href()) {\r\n    <a class=\"kage-card-link-wrapper\" [routerLink]=\"href()\" tabindex=\"0\">\r\n      <div class=\"kage-card-wrapper\" [class]=\"cssClass() ?? ''\">\r\n        <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\r\n      </div>\r\n    </a>\r\n} @else {\r\n    <div class=\"kage-card-wrapper\" [class]=\"cssClass() ?? ''\">\r\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\r\n    </div>\r\n}\r\n\r\n<ng-template #cardContent>\r\n  <div class=\"kage-card-image\">\r\n    <ng-content select=\"[slot='card-image']\"></ng-content>\r\n  </div>\r\n  <div class=\"kage-card-body\">\r\n    <div class=\"card-header\">\r\n      <ng-content select=\"[slot='card-title']\"></ng-content>\r\n      <ng-content select=\"[slot='card-subtitle']\"></ng-content>\r\n    </div>\r\n    <div class=\"kage-card-content\">\r\n      <ng-content select=\"[slot='card-content']\"></ng-content>\r\n    </div>\r\n    <div class=\"kage-card-footer\">\r\n      <ng-content select=\"[slot='card-action']\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [":host{display:block}:host .kage-card-link-wrapper{text-decoration:none;color:inherit;cursor:pointer}:host .kage-card-wrapper{display:flex;flex-direction:column;border-style:solid;border-color:var(--kage-card-border-color, transparent);border-top-width:var(--kage-card-border-top-width, 0px);border-right-width:var(--kage-card-border-right-width, 0px);border-bottom-width:var(--kage-card-border-bottom-width, 0px);border-left-width:var(--kage-card-border-left-width, 0px);border-radius:var(--kage-card-border-radious, 0px);overflow:hidden;box-shadow:0 2px 8px #0000001a;background:var(--kage-card-background, color-mix(in srgb, var(--color-background) 90%, var(--color-medium) 10%))}:host .kage-card-wrapper .kage-card-image::ng-deep img{max-width:100%;display:block}:host .kage-card-wrapper .kage-card-body{padding:var(--kage-card-padding, 15px)}:host .kage-card-wrapper .kage-card-body .kage-card-header{margin-bottom:.5rem}:host .kage-card-wrapper .kage-card-body .kage-card-header::ng-deep [slot=card-title]{display:block}:host .kage-card-wrapper .kage-card-body .kage-card-header::ng-deep [slot=card-subtitle]{color:var(--kage-card-subtitle-color, var(--color-medium, inherit));margin-top:5px;display:block}:host .kage-card-wrapper .kage-card-body .kage-card-footer{text-align:right}:host .kage-card-wrapper .kage-card-body .kage-card-footer:not(:empty){margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCard, decorators: [{
            type: Component,
            args: [{ selector: 'kage-card', imports: [RouterLink, RouterLinkWithHref, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (href()) {\r\n    <a class=\"kage-card-link-wrapper\" [routerLink]=\"href()\" tabindex=\"0\">\r\n      <div class=\"kage-card-wrapper\" [class]=\"cssClass() ?? ''\">\r\n        <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\r\n      </div>\r\n    </a>\r\n} @else {\r\n    <div class=\"kage-card-wrapper\" [class]=\"cssClass() ?? ''\">\r\n      <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\r\n    </div>\r\n}\r\n\r\n<ng-template #cardContent>\r\n  <div class=\"kage-card-image\">\r\n    <ng-content select=\"[slot='card-image']\"></ng-content>\r\n  </div>\r\n  <div class=\"kage-card-body\">\r\n    <div class=\"card-header\">\r\n      <ng-content select=\"[slot='card-title']\"></ng-content>\r\n      <ng-content select=\"[slot='card-subtitle']\"></ng-content>\r\n    </div>\r\n    <div class=\"kage-card-content\">\r\n      <ng-content select=\"[slot='card-content']\"></ng-content>\r\n    </div>\r\n    <div class=\"kage-card-footer\">\r\n      <ng-content select=\"[slot='card-action']\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [":host{display:block}:host .kage-card-link-wrapper{text-decoration:none;color:inherit;cursor:pointer}:host .kage-card-wrapper{display:flex;flex-direction:column;border-style:solid;border-color:var(--kage-card-border-color, transparent);border-top-width:var(--kage-card-border-top-width, 0px);border-right-width:var(--kage-card-border-right-width, 0px);border-bottom-width:var(--kage-card-border-bottom-width, 0px);border-left-width:var(--kage-card-border-left-width, 0px);border-radius:var(--kage-card-border-radious, 0px);overflow:hidden;box-shadow:0 2px 8px #0000001a;background:var(--kage-card-background, color-mix(in srgb, var(--color-background) 90%, var(--color-medium) 10%))}:host .kage-card-wrapper .kage-card-image::ng-deep img{max-width:100%;display:block}:host .kage-card-wrapper .kage-card-body{padding:var(--kage-card-padding, 15px)}:host .kage-card-wrapper .kage-card-body .kage-card-header{margin-bottom:.5rem}:host .kage-card-wrapper .kage-card-body .kage-card-header::ng-deep [slot=card-title]{display:block}:host .kage-card-wrapper .kage-card-body .kage-card-header::ng-deep [slot=card-subtitle]{color:var(--kage-card-subtitle-color, var(--color-medium, inherit));margin-top:5px;display:block}:host .kage-card-wrapper .kage-card-body .kage-card-footer{text-align:right}:host .kage-card-wrapper .kage-card-body .kage-card-footer:not(:empty){margin-top:1rem}\n"] }]
        }] });

class KageCheckbox {
    label = input('');
    color = input();
    disabled = model(false);
    checked = false;
    name = input();
    id = input();
    cssClass = input();
    onChange = (value) => { };
    onTouched = () => { };
    writeValue(value) {
        this.checked = value;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    toggleChecked() {
        this.checked = !this.checked;
        this.onChange(this.checked);
        this.onTouched();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageCheckbox, isStandalone: true, selector: "kage-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageCheckbox),
                multi: true,
            },
        ], ngImport: i0, template: "<label class=\"kage-checkbox-wrapper\" [ngClass]=\"[color() ?? '', cssClass() ?? '']\" [class.disabled]=\"disabled()\">\r\n    <input type=\"checkbox\" [disabled]=\"disabled()\" [attr.name]=\"name()\" [attr.id]=\"id()\">\r\n    <span class=\"check-box\"></span>\r\n    <p class=\"checkbox-label\"><ng-content></ng-content></p>\r\n</label>", styles: [".kage-checkbox-wrapper{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;width:var(--kage-checkbox-area-width, fit-content)}.kage-checkbox-wrapper input{display:none}.kage-checkbox-wrapper .check-box{height:var(--kage-checkbox-size, 18px);width:var(--kage-checkbox-size, 18px);background-color:transparent;border:calc(var(--kage-checkbox-size, 18px) * .1) solid var(--kage-checkbox-color, var(--color-medium, inherit));position:relative;display:inline-block;box-sizing:border-box;transition:border-color ease calc(var(--kage-checkbox-animation-duration, .4s) / 2);cursor:pointer;border-radius:var(--kage-checkbox-radius, 0px)}.kage-checkbox-wrapper .check-box:before,.kage-checkbox-wrapper .check-box:after{box-sizing:border-box;position:absolute;height:0;width:calc(var(--kage-checkbox-size, 18px) * .2);display:inline-block;transform-origin:left top;content:\" \";transition:opacity ease .5;background-color:var(--kage-checkbox-checked-color, var(--color-primary))}.kage-checkbox-wrapper .check-box:before{top:calc(var(--kage-checkbox-size, 18px) * .72);left:calc(var(--kage-checkbox-size, 18px) * .41);box-shadow:0 0 0 calc(var(--kage-checkbox-size, 18px) * .05) transparent;transform:rotate(-135deg)}.kage-checkbox-wrapper .check-box:after{top:calc(var(--kage-checkbox-size, 18px) * .37);left:calc(var(--kage-checkbox-size, 18px) * .05);transform:rotate(-45deg)}.kage-checkbox-wrapper .checkbox-label:not(:empty){margin-left:10px}.kage-checkbox-wrapper.disabled{opacity:var(--kage-checkbox-disabled-opacity, .6);pointer-events:none}.kage-checkbox-wrapper input:checked+.check-box,.kage-checkbox-wrapper .check-box.checked{border-color:var(--kage-checkbox-checked-color, var(--color-primary))}.kage-checkbox-wrapper input:checked+.check-box:after,.kage-checkbox-wrapper .check-box.checked:after{height:calc(var(--kage-checkbox-size, 18px) * .5);animation:dothabottomcheck calc(var(--kage-checkbox-animation-duration, .4s) / 2) ease 0s forwards}.kage-checkbox-wrapper input:checked+.check-box:before,.kage-checkbox-wrapper .check-box.checked:before{height:calc(var(--kage-checkbox-size, 18px) * 1.2);animation:dothatopcheck var(--kage-checkbox-animation-duration, .4s) ease 0s forwards}.kage-checkbox-wrapper.primary{--kage-checkbox-checked-color: var(--color-primary)}.kage-checkbox-wrapper.secondary{--kage-checkbox-checked-color: var(--color-secondary)}.kage-checkbox-wrapper.tertiary{--kage-checkbox-checked-color: var(--color-tertiary)}.kage-checkbox-wrapper.success{--kage-checkbox-checked-color: var(--color-success)}.kage-checkbox-wrapper.danger{--kage-checkbox-checked-color: var(--color-danger)}.kage-checkbox-wrapper.warning{--kage-checkbox-checked-color: var(--color-warning)}.kage-checkbox-wrapper.info{--kage-checkbox-checked-color: var(--color-info)}@keyframes dothabottomcheck{0%{height:0}to{height:calc(var(--kage-checkbox-size, 18px) / 2)}}@keyframes dothatopcheck{0%{height:0}50%{height:0}to{height:calc(var(--kage-checkbox-size, 18px) * 1.2)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCheckbox, decorators: [{
            type: Component,
            args: [{ selector: 'kage-checkbox', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageCheckbox),
                            multi: true,
                        },
                    ], template: "<label class=\"kage-checkbox-wrapper\" [ngClass]=\"[color() ?? '', cssClass() ?? '']\" [class.disabled]=\"disabled()\">\r\n    <input type=\"checkbox\" [disabled]=\"disabled()\" [attr.name]=\"name()\" [attr.id]=\"id()\">\r\n    <span class=\"check-box\"></span>\r\n    <p class=\"checkbox-label\"><ng-content></ng-content></p>\r\n</label>", styles: [".kage-checkbox-wrapper{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;width:var(--kage-checkbox-area-width, fit-content)}.kage-checkbox-wrapper input{display:none}.kage-checkbox-wrapper .check-box{height:var(--kage-checkbox-size, 18px);width:var(--kage-checkbox-size, 18px);background-color:transparent;border:calc(var(--kage-checkbox-size, 18px) * .1) solid var(--kage-checkbox-color, var(--color-medium, inherit));position:relative;display:inline-block;box-sizing:border-box;transition:border-color ease calc(var(--kage-checkbox-animation-duration, .4s) / 2);cursor:pointer;border-radius:var(--kage-checkbox-radius, 0px)}.kage-checkbox-wrapper .check-box:before,.kage-checkbox-wrapper .check-box:after{box-sizing:border-box;position:absolute;height:0;width:calc(var(--kage-checkbox-size, 18px) * .2);display:inline-block;transform-origin:left top;content:\" \";transition:opacity ease .5;background-color:var(--kage-checkbox-checked-color, var(--color-primary))}.kage-checkbox-wrapper .check-box:before{top:calc(var(--kage-checkbox-size, 18px) * .72);left:calc(var(--kage-checkbox-size, 18px) * .41);box-shadow:0 0 0 calc(var(--kage-checkbox-size, 18px) * .05) transparent;transform:rotate(-135deg)}.kage-checkbox-wrapper .check-box:after{top:calc(var(--kage-checkbox-size, 18px) * .37);left:calc(var(--kage-checkbox-size, 18px) * .05);transform:rotate(-45deg)}.kage-checkbox-wrapper .checkbox-label:not(:empty){margin-left:10px}.kage-checkbox-wrapper.disabled{opacity:var(--kage-checkbox-disabled-opacity, .6);pointer-events:none}.kage-checkbox-wrapper input:checked+.check-box,.kage-checkbox-wrapper .check-box.checked{border-color:var(--kage-checkbox-checked-color, var(--color-primary))}.kage-checkbox-wrapper input:checked+.check-box:after,.kage-checkbox-wrapper .check-box.checked:after{height:calc(var(--kage-checkbox-size, 18px) * .5);animation:dothabottomcheck calc(var(--kage-checkbox-animation-duration, .4s) / 2) ease 0s forwards}.kage-checkbox-wrapper input:checked+.check-box:before,.kage-checkbox-wrapper .check-box.checked:before{height:calc(var(--kage-checkbox-size, 18px) * 1.2);animation:dothatopcheck var(--kage-checkbox-animation-duration, .4s) ease 0s forwards}.kage-checkbox-wrapper.primary{--kage-checkbox-checked-color: var(--color-primary)}.kage-checkbox-wrapper.secondary{--kage-checkbox-checked-color: var(--color-secondary)}.kage-checkbox-wrapper.tertiary{--kage-checkbox-checked-color: var(--color-tertiary)}.kage-checkbox-wrapper.success{--kage-checkbox-checked-color: var(--color-success)}.kage-checkbox-wrapper.danger{--kage-checkbox-checked-color: var(--color-danger)}.kage-checkbox-wrapper.warning{--kage-checkbox-checked-color: var(--color-warning)}.kage-checkbox-wrapper.info{--kage-checkbox-checked-color: var(--color-info)}@keyframes dothabottomcheck{0%{height:0}to{height:calc(var(--kage-checkbox-size, 18px) / 2)}}@keyframes dothatopcheck{0%{height:0}50%{height:0}to{height:calc(var(--kage-checkbox-size, 18px) * 1.2)}}\n"] }]
        }] });

class KageChip {
    color = input();
    onRemove = output();
    removable = input(false);
    removeIconDepth = input();
    removeChip() {
        this.onRemove.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageChip, isStandalone: true, selector: "kage-chip", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeIconDepth: { classPropertyName: "removeIconDepth", publicName: "removeIconDepth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, ngImport: i0, template: "<div class=\"kage-chip-wrapper\" [class]=\"color() ?? ''\">\r\n    <ng-content select=\"[slot='icon']\"></ng-content>\r\n    <p><ng-content></ng-content></p>\r\n    @if (removable()) {\r\n        <span class=\"k-chip-remove\" (click)=\"removeChip()\">\r\n            <kage-icon name=\"remove\" [depth]=\"removeIconDepth() ?? 2\"></kage-icon>\r\n        </span>\r\n    }\r\n</div>\r\n", styles: [":host{display:inline-block}:host .kage-chip-wrapper{display:inline-flex;align-items:center;width:fit-content;border-style:solid;border-color:var(--kage-chip-color, var(--color-primary, inherit));border-top-width:var(--kage-chip-border-top-width, 1px);border-right-width:var(--kage-chip-border-right-width, 1px);border-bottom-width:var(--kage-chip-border-bottom-width, 1px);border-left-width:var(--kage-chip-border-left-width, 1px);transition:.4s;background:var(--kage-chip-background, transparent);color:var(--kage-chip-color, var(--color-primary, inherit));border-radius:var(--kage-chip-border-radius, 0px);text-transform:var(--kage-chip-text-transform, inherit)}:host .kage-chip-wrapper:has(.k-chip-remove){padding:5px 5px 5px 15px}:host .kage-chip-wrapper:not(:has(.k-chip-remove)){padding:5px 15px}:host .kage-chip-wrapper::ng-deep [slot=icon]{margin-right:5px;margin-left:-5px;font-size:16px;display:flex;align-items:center;justify-content:center;height:19px;width:27px;overflow:hidden}:host .kage-chip-wrapper p{font-family:var(--kage-chip-font-family)}:host .kage-chip-wrapper .k-chip-remove{margin-left:10px;cursor:pointer;height:20px;display:flex;align-items:center;justify-content:center}:host .kage-chip-wrapper:hover{background:var(--kage-chip-hover-background, transparent)}:host .kage-chip-wrapper.primary{--kage-chip-color: var(--color-primary)}:host .kage-chip-wrapper.secondary{--kage-chip-color: var(--color-secondary)}:host .kage-chip-wrapper.tertiary{--kage-chip-color: var(--color-tertiary)}:host .kage-chip-wrapper.danger{--kage-chip-color: var(--color-danger)}:host .kage-chip-wrapper.success{--kage-chip-color: var(--color-success)}:host .kage-chip-wrapper.warning{--kage-chip-color: var(--color-warning)}:host .kage-chip-wrapper.info{--kage-chip-color: var(--color-info)}\n"], dependencies: [{ kind: "component", type: KageIcon, selector: "kage-icon", inputs: ["name", "svgSrc", "size", "depth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageChip, decorators: [{
            type: Component,
            args: [{ selector: 'kage-chip', imports: [KageIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kage-chip-wrapper\" [class]=\"color() ?? ''\">\r\n    <ng-content select=\"[slot='icon']\"></ng-content>\r\n    <p><ng-content></ng-content></p>\r\n    @if (removable()) {\r\n        <span class=\"k-chip-remove\" (click)=\"removeChip()\">\r\n            <kage-icon name=\"remove\" [depth]=\"removeIconDepth() ?? 2\"></kage-icon>\r\n        </span>\r\n    }\r\n</div>\r\n", styles: [":host{display:inline-block}:host .kage-chip-wrapper{display:inline-flex;align-items:center;width:fit-content;border-style:solid;border-color:var(--kage-chip-color, var(--color-primary, inherit));border-top-width:var(--kage-chip-border-top-width, 1px);border-right-width:var(--kage-chip-border-right-width, 1px);border-bottom-width:var(--kage-chip-border-bottom-width, 1px);border-left-width:var(--kage-chip-border-left-width, 1px);transition:.4s;background:var(--kage-chip-background, transparent);color:var(--kage-chip-color, var(--color-primary, inherit));border-radius:var(--kage-chip-border-radius, 0px);text-transform:var(--kage-chip-text-transform, inherit)}:host .kage-chip-wrapper:has(.k-chip-remove){padding:5px 5px 5px 15px}:host .kage-chip-wrapper:not(:has(.k-chip-remove)){padding:5px 15px}:host .kage-chip-wrapper::ng-deep [slot=icon]{margin-right:5px;margin-left:-5px;font-size:16px;display:flex;align-items:center;justify-content:center;height:19px;width:27px;overflow:hidden}:host .kage-chip-wrapper p{font-family:var(--kage-chip-font-family)}:host .kage-chip-wrapper .k-chip-remove{margin-left:10px;cursor:pointer;height:20px;display:flex;align-items:center;justify-content:center}:host .kage-chip-wrapper:hover{background:var(--kage-chip-hover-background, transparent)}:host .kage-chip-wrapper.primary{--kage-chip-color: var(--color-primary)}:host .kage-chip-wrapper.secondary{--kage-chip-color: var(--color-secondary)}:host .kage-chip-wrapper.tertiary{--kage-chip-color: var(--color-tertiary)}:host .kage-chip-wrapper.danger{--kage-chip-color: var(--color-danger)}:host .kage-chip-wrapper.success{--kage-chip-color: var(--color-success)}:host .kage-chip-wrapper.warning{--kage-chip-color: var(--color-warning)}:host .kage-chip-wrapper.info{--kage-chip-color: var(--color-info)}\n"] }]
        }] });

class KageCol {
    // Responsive span inputs
    xs = input();
    sm = input();
    md = input();
    lg = input();
    xl = input();
    // Responsive offsets
    offsetXs = input();
    offsetSm = input();
    offsetMd = input();
    offsetLg = input();
    offsetXl = input();
    // Non-responsive fallback
    span = input();
    offset = input();
    get isXs() {
        return this.xs() != null;
    }
    get isSm() {
        return this.sm() != null;
    }
    get isMd() {
        return this.md() != null;
    }
    get isLg() {
        return this.lg() != null;
    }
    get isXl() {
        return this.xl() != null;
    }
    // Default stack unless xs is provided
    get autoStack() {
        return (this.xs() == null &&
            this.sm() == null &&
            this.md() == null &&
            this.lg() == null &&
            this.xl() == null);
    }
    // Dynamic CSS vars for responsive spans
    get xsSpan() {
        return this.xs() ? `${(this.xs() / 12) * 100}%` : null;
    }
    get smSpan() {
        return this.sm() ? `${(this.sm() / 12) * 100}%` : null;
    }
    get mdSpan() {
        return this.md() ? `${(this.md() / 12) * 100}%` : null;
    }
    get lgSpan() {
        return this.lg() ? `${(this.lg() / 12) * 100}%` : null;
    }
    get xlSpan() {
        return this.xl() ? `${(this.xl() / 12) * 100}%` : null;
    }
    // Offsets
    get xsOffset() {
        return this.offsetXs() ? `${(this.offsetXs() / 12) * 100}%` : null;
    }
    get smOffset() {
        return this.offsetSm() ? `${(this.offsetSm() / 12) * 100}%` : null;
    }
    get mdOffset() {
        return this.offsetMd() ? `${(this.offsetMd() / 12) * 100}%` : null;
    }
    get lgOffset() {
        return this.offsetLg() ? `${(this.offsetLg() / 12) * 100}%` : null;
    }
    get xlOffset() {
        return this.offsetXl() ? `${(this.offsetXl() / 12) * 100}%` : null;
    }
    // Non-responsive fallback
    get baseFlex() {
        return this.span() != null ? `0 0 ${(this.span() / 12) * 100}%` : null;
    }
    get baseOffset() {
        return this.offset() != null ? `${(this.offset() / 12) * 100}%` : null;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCol, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageCol, isStandalone: true, selector: "kage-col", inputs: { xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, offsetXs: { classPropertyName: "offsetXs", publicName: "offsetXs", isSignal: true, isRequired: false, transformFunction: null }, offsetSm: { classPropertyName: "offsetSm", publicName: "offsetSm", isSignal: true, isRequired: false, transformFunction: null }, offsetMd: { classPropertyName: "offsetMd", publicName: "offsetMd", isSignal: true, isRequired: false, transformFunction: null }, offsetLg: { classPropertyName: "offsetLg", publicName: "offsetLg", isSignal: true, isRequired: false, transformFunction: null }, offsetXl: { classPropertyName: "offsetXl", publicName: "offsetXl", isSignal: true, isRequired: false, transformFunction: null }, span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "this.isXs", "class.sm": "this.isSm", "class.md": "this.isMd", "class.lg": "this.isLg", "class.xl": "this.isXl", "class.auto-stack": "this.autoStack", "style.--xs-span": "this.xsSpan", "style.--sm-span": "this.smSpan", "style.--md-span": "this.mdSpan", "style.--lg-span": "this.lgSpan", "style.--xl-span": "this.xlSpan", "style.--xs-offset": "this.xsOffset", "style.--sm-offset": "this.smOffset", "style.--md-offset": "this.mdOffset", "style.--lg-offset": "this.lgOffset", "style.--xl-offset": "this.xlOffset", "style.flex": "this.baseFlex", "style.margin-left": "this.baseOffset" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;box-sizing:border-box;width:100%}:host(.auto-stack){flex:0 0 100%;max-width:100%}@media (max-width: 575.98px){:host(.xs){flex:0 0 var(--xs-span, 100%);max-width:var(--xs-span, 100%);margin-left:var(--xs-offset, 0)}}@media (min-width: 576px){:host(.sm){flex:0 0 var(--sm-span);max-width:var(--sm-span);margin-left:var(--sm-offset, 0)}}@media (min-width: 768px){:host(.md){flex:0 0 var(--md-span);max-width:var(--md-span);margin-left:var(--md-offset, 0)}}@media (min-width: 992px){:host(.lg){flex:0 0 var(--lg-span);max-width:var(--lg-span);margin-left:var(--lg-offset, 0)}}@media (min-width: 1200px){:host(.xl){flex:0 0 var(--xl-span);max-width:var(--xl-span);margin-left:var(--xl-offset, 0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCol, decorators: [{
            type: Component,
            args: [{ selector: 'kage-col', imports: [], template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;box-sizing:border-box;width:100%}:host(.auto-stack){flex:0 0 100%;max-width:100%}@media (max-width: 575.98px){:host(.xs){flex:0 0 var(--xs-span, 100%);max-width:var(--xs-span, 100%);margin-left:var(--xs-offset, 0)}}@media (min-width: 576px){:host(.sm){flex:0 0 var(--sm-span);max-width:var(--sm-span);margin-left:var(--sm-offset, 0)}}@media (min-width: 768px){:host(.md){flex:0 0 var(--md-span);max-width:var(--md-span);margin-left:var(--md-offset, 0)}}@media (min-width: 992px){:host(.lg){flex:0 0 var(--lg-span);max-width:var(--lg-span);margin-left:var(--lg-offset, 0)}}@media (min-width: 1200px){:host(.xl){flex:0 0 var(--xl-span);max-width:var(--xl-span);margin-left:var(--xl-offset, 0)}}\n"] }]
        }], propDecorators: { isXs: [{
                type: HostBinding,
                args: ['class.xs']
            }], isSm: [{
                type: HostBinding,
                args: ['class.sm']
            }], isMd: [{
                type: HostBinding,
                args: ['class.md']
            }], isLg: [{
                type: HostBinding,
                args: ['class.lg']
            }], isXl: [{
                type: HostBinding,
                args: ['class.xl']
            }], autoStack: [{
                type: HostBinding,
                args: ['class.auto-stack']
            }], xsSpan: [{
                type: HostBinding,
                args: ['style.--xs-span']
            }], smSpan: [{
                type: HostBinding,
                args: ['style.--sm-span']
            }], mdSpan: [{
                type: HostBinding,
                args: ['style.--md-span']
            }], lgSpan: [{
                type: HostBinding,
                args: ['style.--lg-span']
            }], xlSpan: [{
                type: HostBinding,
                args: ['style.--xl-span']
            }], xsOffset: [{
                type: HostBinding,
                args: ['style.--xs-offset']
            }], smOffset: [{
                type: HostBinding,
                args: ['style.--sm-offset']
            }], mdOffset: [{
                type: HostBinding,
                args: ['style.--md-offset']
            }], lgOffset: [{
                type: HostBinding,
                args: ['style.--lg-offset']
            }], xlOffset: [{
                type: HostBinding,
                args: ['style.--xl-offset']
            }], baseFlex: [{
                type: HostBinding,
                args: ['style.flex']
            }], baseOffset: [{
                type: HostBinding,
                args: ['style.margin-left']
            }] } });

class KageFabItem {
    title = input();
    color = input();
    redirectURI = input();
    disabled = input(false);
    cssClass = input();
    content;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageFabItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageFabItem, isStandalone: true, selector: "kage-fab-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, redirectURI: { classPropertyName: "redirectURI", publicName: "redirectURI", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: TemplateRef }], ngImport: i0, template: '<ng-template #content><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageFabItem, decorators: [{
            type: Component,
            args: [{
                    selector: 'kage-fab-item',
                    template: '<ng-template #content><ng-content></ng-content></ng-template>',
                    imports: [],
                    changeDetection: ChangeDetectionStrategy.OnPush,
                }]
        }], propDecorators: { content: [{
                type: ViewChild,
                args: ['content', { read: TemplateRef }]
            }] } });

class KageFab {
    expandItems;
    color = input();
    position = input('bottom-left');
    cssClass = input();
    onClick = output();
    onChange = output();
    clicked(event) {
        this.onClick.emit(event);
    }
    onChangeEffect(event) {
        const checked = event.target.checked;
        this.onChange.emit(checked ? 'opened' : 'closed');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageFab, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageFab, isStandalone: true, selector: "kage-fab-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onChange: "onChange" }, queries: [{ propertyName: "expandItems", predicate: KageFabItem }], ngImport: i0, template: "<div class=\"kage-fab-button-wrapper\" [ngClass]=\"[color() ?? '', position(), cssClass() ?? '']\">\r\n\t<input type=\"checkbox\" (change)=\"onChangeEffect($event)\" />\r\n\t<div class=\"fab-button\" (click)=\"clicked($event)\"><ng-content select=\"[slot='icon']\"></ng-content></div>\r\n    @if (expandItems.length) {\r\n        <div class=\"fab-slot-buttons\">\r\n            @for (item of expandItems; track $index) {\r\n                <a [routerLink]=\"item.redirectURI()\" [ngClass]=\"[item.color() ?? '', item.cssClass() ?? '']\" [attr.title]=\"item.title() ?? ''\" [class.disabled]=\"item.disabled()\">\r\n                    <ng-container *ngTemplateOutlet=\"item.content\"></ng-container>\r\n                </a>\r\n            }\r\n        </div>\r\n    }\r\n</div>", styles: [":host .kage-fab-button-wrapper{position:fixed}:host .kage-fab-button-wrapper input{appearance:none;position:absolute;top:0;left:0;margin:0;width:100%;height:100%;cursor:pointer;background:transparent;border:none;outline:none;z-index:2;transition:box-shadow .2s ease-in-out}:host .kage-fab-button-wrapper input:checked~.fab-slot-buttons a{opacity:1;visibility:visible}:host .kage-fab-button-wrapper input:checked~.fab-button:empty:after,:host .kage-fab-button-wrapper input:checked~.fab-button:empty:before{transform:translate(-50%,-50%) rotate(45deg)}:host .kage-fab-button-wrapper .fab-button{height:var(--kage-fab-size, 50px);width:var(--kage-fab-size, 50px);background:var(--kage-fab-background, var(--color-background, transparent));display:flex;align-items:center;justify-content:center;color:var(--kage-fab-icon-color, var(--kage-fab-color, var(--color-primary, transparent)));text-align:center;position:relative;border:var(--kage-fab-border-width, 1px) solid var(--kage-fab-border-color, var(--kage-fab-color, var(--color-primary, transparent)));z-index:1;border-radius:var(--kage-fab-border-radius, 0px)}:host .kage-fab-button-wrapper .fab-button:empty:after{content:\"\";width:2px;height:16px;background:var(--kage-fab-icon-color, var(--kage-fab-color, var(--color-primary, transparent)));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.4s}:host .kage-fab-button-wrapper .fab-button:empty:before{content:\"\";width:16px;height:2px;background:var(--kage-fab-icon-color, var(--kage-fab-color, var(--color-primary, transparent)));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.4s}:host .kage-fab-button-wrapper .fab-slot-buttons{position:absolute;width:100%;text-align:center}:host .kage-fab-button-wrapper .fab-slot-buttons a{display:flex;align-items:center;justify-content:center;width:var(--kage-fab-item-size, 36px);height:var(--kage-fab-item-size, 36px);border:var(--kage-fab-item-border-width, 1px) solid var(--kage-fab-item-border-color, var(--color-primary, transparent));text-decoration:none;margin:10px auto 0;line-height:1.15;opacity:0;visibility:hidden;position:relative;cursor:pointer;background:var(--kage-fab-item-background, var(--color-background, transparent));color:var(--kage-fab-item-color, var(--color-primary, inherit));transition:opacity .2s ease-in-out .3s,transform .15s ease-in-out;border-radius:var(--kage-fab-item-border-radius, 0px)}:host .kage-fab-button-wrapper .fab-slot-buttons a:hover{transform:scale(1.05)}:host .kage-fab-button-wrapper .fab-slot-buttons a.disabled{opacity:var(--kage-fab-item-disable-opacity, .6)!important;pointer-events:none;cursor:none}:host .kage-fab-button-wrapper .fab-slot-buttons a.primary{--kage-fab-item-border-color: var(--color-primary);--kage-fab-item-color: var(--color-primary)}:host .kage-fab-button-wrapper .fab-slot-buttons a.secondary{--kage-fab-item-border-color: var(--color-secondary);--kage-fab-item-color: var(--color-secondary)}:host .kage-fab-button-wrapper .fab-slot-buttons a.tertiary{--kage-fab-item-border-color: var(--color-tertiary);--kage-fab-item-color: var(--color-tertiary)}:host .kage-fab-button-wrapper .fab-slot-buttons a.success{--kage-fab-item-border-color: var(--color-success);--kage-fab-item-color: var(--color-success)}:host .kage-fab-button-wrapper .fab-slot-buttons a.danger{--kage-fab-item-border-color: var(--color-danger);--kage-fab-item-color: var(--color-danger)}:host .kage-fab-button-wrapper .fab-slot-buttons a.warning{--kage-fab-item-border-color: var(--color-warning);--kage-fab-item-color: var(--color-warning)}:host .kage-fab-button-wrapper .fab-slot-buttons a.info{--kage-fab-item-border-color: var(--color-info);--kage-fab-item-color: var(--color-info)}:host .kage-fab-button-wrapper.top-right{top:35px;right:35px}:host .kage-fab-button-wrapper.top-right .fab-slot-buttons{top:100%}:host .kage-fab-button-wrapper.top-left{top:35px;left:35px}:host .kage-fab-button-wrapper.top-left .fab-slot-buttons{top:100%}:host .kage-fab-button-wrapper.bottom-left{bottom:35px;left:35px}:host .kage-fab-button-wrapper.bottom-left .fab-slot-buttons{bottom:120%}:host .kage-fab-button-wrapper.bottom-right{bottom:35px;right:35px}:host .kage-fab-button-wrapper.bottom-right .fab-slot-buttons{bottom:120%}:host .kage-fab-button-wrapper.primary{--kage-fab-color: var(--color-primary)}:host .kage-fab-button-wrapper.secondary{--kage-fab-color: var(--color-secondary)}:host .kage-fab-button-wrapper.tertiary{--kage-fab-color: var(--color-tertiary)}:host .kage-fab-button-wrapper.success{--kage-fab-color: var(--color-success)}:host .kage-fab-button-wrapper.danger{--kage-fab-color: var(--color-danger)}:host .kage-fab-button-wrapper.warning{--kage-fab-color: var(--color-warning)}:host .kage-fab-button-wrapper.info{--kage-fab-color: var(--color-info)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageFab, decorators: [{
            type: Component,
            args: [{ selector: 'kage-fab-button', imports: [NgClass, NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kage-fab-button-wrapper\" [ngClass]=\"[color() ?? '', position(), cssClass() ?? '']\">\r\n\t<input type=\"checkbox\" (change)=\"onChangeEffect($event)\" />\r\n\t<div class=\"fab-button\" (click)=\"clicked($event)\"><ng-content select=\"[slot='icon']\"></ng-content></div>\r\n    @if (expandItems.length) {\r\n        <div class=\"fab-slot-buttons\">\r\n            @for (item of expandItems; track $index) {\r\n                <a [routerLink]=\"item.redirectURI()\" [ngClass]=\"[item.color() ?? '', item.cssClass() ?? '']\" [attr.title]=\"item.title() ?? ''\" [class.disabled]=\"item.disabled()\">\r\n                    <ng-container *ngTemplateOutlet=\"item.content\"></ng-container>\r\n                </a>\r\n            }\r\n        </div>\r\n    }\r\n</div>", styles: [":host .kage-fab-button-wrapper{position:fixed}:host .kage-fab-button-wrapper input{appearance:none;position:absolute;top:0;left:0;margin:0;width:100%;height:100%;cursor:pointer;background:transparent;border:none;outline:none;z-index:2;transition:box-shadow .2s ease-in-out}:host .kage-fab-button-wrapper input:checked~.fab-slot-buttons a{opacity:1;visibility:visible}:host .kage-fab-button-wrapper input:checked~.fab-button:empty:after,:host .kage-fab-button-wrapper input:checked~.fab-button:empty:before{transform:translate(-50%,-50%) rotate(45deg)}:host .kage-fab-button-wrapper .fab-button{height:var(--kage-fab-size, 50px);width:var(--kage-fab-size, 50px);background:var(--kage-fab-background, var(--color-background, transparent));display:flex;align-items:center;justify-content:center;color:var(--kage-fab-icon-color, var(--kage-fab-color, var(--color-primary, transparent)));text-align:center;position:relative;border:var(--kage-fab-border-width, 1px) solid var(--kage-fab-border-color, var(--kage-fab-color, var(--color-primary, transparent)));z-index:1;border-radius:var(--kage-fab-border-radius, 0px)}:host .kage-fab-button-wrapper .fab-button:empty:after{content:\"\";width:2px;height:16px;background:var(--kage-fab-icon-color, var(--kage-fab-color, var(--color-primary, transparent)));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.4s}:host .kage-fab-button-wrapper .fab-button:empty:before{content:\"\";width:16px;height:2px;background:var(--kage-fab-icon-color, var(--kage-fab-color, var(--color-primary, transparent)));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.4s}:host .kage-fab-button-wrapper .fab-slot-buttons{position:absolute;width:100%;text-align:center}:host .kage-fab-button-wrapper .fab-slot-buttons a{display:flex;align-items:center;justify-content:center;width:var(--kage-fab-item-size, 36px);height:var(--kage-fab-item-size, 36px);border:var(--kage-fab-item-border-width, 1px) solid var(--kage-fab-item-border-color, var(--color-primary, transparent));text-decoration:none;margin:10px auto 0;line-height:1.15;opacity:0;visibility:hidden;position:relative;cursor:pointer;background:var(--kage-fab-item-background, var(--color-background, transparent));color:var(--kage-fab-item-color, var(--color-primary, inherit));transition:opacity .2s ease-in-out .3s,transform .15s ease-in-out;border-radius:var(--kage-fab-item-border-radius, 0px)}:host .kage-fab-button-wrapper .fab-slot-buttons a:hover{transform:scale(1.05)}:host .kage-fab-button-wrapper .fab-slot-buttons a.disabled{opacity:var(--kage-fab-item-disable-opacity, .6)!important;pointer-events:none;cursor:none}:host .kage-fab-button-wrapper .fab-slot-buttons a.primary{--kage-fab-item-border-color: var(--color-primary);--kage-fab-item-color: var(--color-primary)}:host .kage-fab-button-wrapper .fab-slot-buttons a.secondary{--kage-fab-item-border-color: var(--color-secondary);--kage-fab-item-color: var(--color-secondary)}:host .kage-fab-button-wrapper .fab-slot-buttons a.tertiary{--kage-fab-item-border-color: var(--color-tertiary);--kage-fab-item-color: var(--color-tertiary)}:host .kage-fab-button-wrapper .fab-slot-buttons a.success{--kage-fab-item-border-color: var(--color-success);--kage-fab-item-color: var(--color-success)}:host .kage-fab-button-wrapper .fab-slot-buttons a.danger{--kage-fab-item-border-color: var(--color-danger);--kage-fab-item-color: var(--color-danger)}:host .kage-fab-button-wrapper .fab-slot-buttons a.warning{--kage-fab-item-border-color: var(--color-warning);--kage-fab-item-color: var(--color-warning)}:host .kage-fab-button-wrapper .fab-slot-buttons a.info{--kage-fab-item-border-color: var(--color-info);--kage-fab-item-color: var(--color-info)}:host .kage-fab-button-wrapper.top-right{top:35px;right:35px}:host .kage-fab-button-wrapper.top-right .fab-slot-buttons{top:100%}:host .kage-fab-button-wrapper.top-left{top:35px;left:35px}:host .kage-fab-button-wrapper.top-left .fab-slot-buttons{top:100%}:host .kage-fab-button-wrapper.bottom-left{bottom:35px;left:35px}:host .kage-fab-button-wrapper.bottom-left .fab-slot-buttons{bottom:120%}:host .kage-fab-button-wrapper.bottom-right{bottom:35px;right:35px}:host .kage-fab-button-wrapper.bottom-right .fab-slot-buttons{bottom:120%}:host .kage-fab-button-wrapper.primary{--kage-fab-color: var(--color-primary)}:host .kage-fab-button-wrapper.secondary{--kage-fab-color: var(--color-secondary)}:host .kage-fab-button-wrapper.tertiary{--kage-fab-color: var(--color-tertiary)}:host .kage-fab-button-wrapper.success{--kage-fab-color: var(--color-success)}:host .kage-fab-button-wrapper.danger{--kage-fab-color: var(--color-danger)}:host .kage-fab-button-wrapper.warning{--kage-fab-color: var(--color-warning)}:host .kage-fab-button-wrapper.info{--kage-fab-color: var(--color-info)}\n"] }]
        }], propDecorators: { expandItems: [{
                type: ContentChildren,
                args: [KageFabItem]
            }] } });

class KageGrid {
    gap = input(0);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageGrid, isStandalone: true, selector: "kage-grid", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"k-grid\" [ngClass]=\"[gap() ? 'gap-' + gap() : '']\"><ng-content></ng-content></div>", styles: [".k-grid{display:flex;flex-direction:column;width:100%}.k-grid.gap-0{gap:0}.k-grid.gap-1{gap:.25rem}.k-grid.gap-2{gap:.5rem}.k-grid.gap-3{gap:1rem}.k-grid.gap-4{gap:1.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageGrid, decorators: [{
            type: Component,
            args: [{ selector: 'kage-grid', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"k-grid\" [ngClass]=\"[gap() ? 'gap-' + gap() : '']\"><ng-content></ng-content></div>", styles: [".k-grid{display:flex;flex-direction:column;width:100%}.k-grid.gap-0{gap:0}.k-grid.gap-1{gap:.25rem}.k-grid.gap-2{gap:.5rem}.k-grid.gap-3{gap:1rem}.k-grid.gap-4{gap:1.5rem}\n"] }]
        }] });

class KageInput {
    label = input('');
    name = input('');
    type = input('text');
    placeholder = input('');
    disabled = model(false);
    readonly = input(false);
    autoFocus = input(false);
    debounce = input();
    autocomplete = input('off');
    cssClass = input();
    valueChanged = output();
    maxLength = input();
    inputRef;
    debouncer = new Subject();
    value = '';
    platformId = inject(PLATFORM_ID);
    onChange = (_) => { };
    onTouched = () => { };
    ngAfterViewInit() {
        // As these are specifically client side events or tasks
        // this needs to check for pltformBrowser
        if (isPlatformBrowser(this.platformId)) {
            // Work on debounce
            this.debouncer
                .pipe(debounceTime(this.debounce() ?? 0))
                .subscribe((val) => this.valueChanged.emit(val));
            // Set up the focus on element
            if (this.autoFocus()) {
                setTimeout(() => this.inputRef?.nativeElement?.focus(), 100);
            }
        }
    }
    writeValue(val) {
        this.value = val ?? '';
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    handleInput(event) {
        const input = event.target.value;
        this.updateValue(input);
    }
    updateValue(val) {
        this.value = val;
        this.onChange(val);
        this.onTouched();
        this.debouncer.next(val);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageInput, isStandalone: true, selector: "kage-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", valueChanged: "valueChanged" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageInput),
                multi: true,
            },
        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputField"], descendants: true }], ngImport: i0, template: "<label class=\"kage-input-wrapper\" [class]=\"cssClass() ?? ''\">\r\n    @if (label()) {\r\n        <p class=\"label-title\">{{label()}}</p>\r\n    }\r\n    <div class=\"input-area\">\r\n        <div class=\"icon start\">\r\n            <ng-content select=\"[slot='icon-start']\"></ng-content>\r\n        </div>\r\n        <div class=\"input\">\r\n            <input \r\n                [value]=\"value\"\r\n                [type]=\"type()\" \r\n                [placeholder]=\"placeholder()\" \r\n                [disabled]=\"disabled()\" \r\n                [readOnly]=\"readonly()\" \r\n                [attr.maxLength]=\"maxLength()\"\r\n                [autofocus]=\"autoFocus()\"\r\n                [autocomplete]=\"autocomplete()\"\r\n                (input)=\"handleInput($event)\"\r\n                (blur)=\"onTouched()\"\r\n                [name]=\"name()\"\r\n                #inputField\r\n            />\r\n        </div>\r\n        <div class=\"icon end\">\r\n            <ng-content select=\"[slot='icon-end']\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <div class=\"validators\">\r\n        <div class=\"left\">\r\n            <div class=\"hint\"><ng-content select=\"[slot='hint']\"></ng-content></div>\r\n            <div class=\"error\"><ng-content select=\"[slot='error']\"></ng-content></div>\r\n        </div>\r\n        <div class=\"right\">\r\n            @if (maxLength()) {\r\n                <div class=\"counter\"><span>{{value.length}}</span>/{{maxLength()}}</div>\r\n            }\r\n        </div>\r\n    </div>\r\n</label>", styles: [":host{display:block}:host .kage-input-wrapper{display:flex;flex-direction:column}:host .kage-input-wrapper .label-title:not(:empty){margin-bottom:6px}:host .kage-input-wrapper .input-area{display:flex;background:var(--kage-input-background, transparent);border-style:solid;border-color:var(--kage-input-border-color, var(--kage-input-border-color, var(--color-medium, transparent)));border-top-width:var(--kage-input-border-top-width, 1px);border-right-width:var(--kage-input-border-right-width, 1px);border-bottom-width:var(--kage-input-border-bottom-width, 1px);border-left-width:var(--kage-input-border-left-width, 1px);transition:.4s;border-radius:var(--kage-input-border-radius, 0px);overflow:hidden}:host .kage-input-wrapper .input-area .input{display:flex;flex-direction:column;width:100%}:host .kage-input-wrapper .input-area .input input{padding:var(--kage-input-padding-top, 9px) var(--kage-input-padding-right, 10px) var(--kage-input-padding-bottom, 9px) var(--kage-input-padding-left, 10px);color:var(--kage-input-text-color, inherit);font-family:var(--kage-input-font-family);background:transparent;font-size:15px}:host .kage-input-wrapper .input-area .icon{display:none;transition:.3s}:host .kage-input-wrapper .input-area .icon:not(:empty){width:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}:host .kage-input-wrapper .input-area .icon:not(:empty).start{border-right:var(--kage-input-border-left-width, 1px) solid var(--kage-input-icon-border-color, var(--kage-input-border-color, var(--color-medium, transparent)))}:host .kage-input-wrapper .input-area .icon:not(:empty).end{border-left:var(--kage-input-border-right-width, 1px) solid var(--kage-input-icon-border-color, var(--kage-input-border-color, var(--color-medium, transparent)))}:host .kage-input-wrapper .input-area:focus-within{border-color:var(--kage-input-active-border-color, var(--color-primary, inherit))}:host .kage-input-wrapper .input-area:focus-within .icon.start,:host .kage-input-wrapper .input-area:focus-within .icon.end{border-color:var(--kage-input-active-border-color, var(--color-primary, inherit))!important}:host .kage-input-wrapper .validators{display:flex}:host .kage-input-wrapper .validators .left{width:100%;display:flex;flex-direction:column}:host .kage-input-wrapper .validators .left .hint{display:none}:host .kage-input-wrapper .validators .left .hint:not(:empty){display:block;margin-top:5px;color:var(--color-medium)}:host .kage-input-wrapper .validators .left .hint::ng-deep [slot=hint]{font-size:10px}:host .kage-input-wrapper .validators .left .error{display:none}:host .kage-input-wrapper .validators .left .error:not(:empty){display:block;margin-top:3px}:host .kage-input-wrapper .validators .right:not(:empty){margin-left:10px;margin-top:3px}:host .kage-input-wrapper .validators .right .counter{display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:var(--color-medium)}:host .kage-input-wrapper .validators .right .counter span{margin-right:3px;color:var(--color-dark)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageInput, decorators: [{
            type: Component,
            args: [{ selector: 'kage-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageInput),
                            multi: true,
                        },
                    ], template: "<label class=\"kage-input-wrapper\" [class]=\"cssClass() ?? ''\">\r\n    @if (label()) {\r\n        <p class=\"label-title\">{{label()}}</p>\r\n    }\r\n    <div class=\"input-area\">\r\n        <div class=\"icon start\">\r\n            <ng-content select=\"[slot='icon-start']\"></ng-content>\r\n        </div>\r\n        <div class=\"input\">\r\n            <input \r\n                [value]=\"value\"\r\n                [type]=\"type()\" \r\n                [placeholder]=\"placeholder()\" \r\n                [disabled]=\"disabled()\" \r\n                [readOnly]=\"readonly()\" \r\n                [attr.maxLength]=\"maxLength()\"\r\n                [autofocus]=\"autoFocus()\"\r\n                [autocomplete]=\"autocomplete()\"\r\n                (input)=\"handleInput($event)\"\r\n                (blur)=\"onTouched()\"\r\n                [name]=\"name()\"\r\n                #inputField\r\n            />\r\n        </div>\r\n        <div class=\"icon end\">\r\n            <ng-content select=\"[slot='icon-end']\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <div class=\"validators\">\r\n        <div class=\"left\">\r\n            <div class=\"hint\"><ng-content select=\"[slot='hint']\"></ng-content></div>\r\n            <div class=\"error\"><ng-content select=\"[slot='error']\"></ng-content></div>\r\n        </div>\r\n        <div class=\"right\">\r\n            @if (maxLength()) {\r\n                <div class=\"counter\"><span>{{value.length}}</span>/{{maxLength()}}</div>\r\n            }\r\n        </div>\r\n    </div>\r\n</label>", styles: [":host{display:block}:host .kage-input-wrapper{display:flex;flex-direction:column}:host .kage-input-wrapper .label-title:not(:empty){margin-bottom:6px}:host .kage-input-wrapper .input-area{display:flex;background:var(--kage-input-background, transparent);border-style:solid;border-color:var(--kage-input-border-color, var(--kage-input-border-color, var(--color-medium, transparent)));border-top-width:var(--kage-input-border-top-width, 1px);border-right-width:var(--kage-input-border-right-width, 1px);border-bottom-width:var(--kage-input-border-bottom-width, 1px);border-left-width:var(--kage-input-border-left-width, 1px);transition:.4s;border-radius:var(--kage-input-border-radius, 0px);overflow:hidden}:host .kage-input-wrapper .input-area .input{display:flex;flex-direction:column;width:100%}:host .kage-input-wrapper .input-area .input input{padding:var(--kage-input-padding-top, 9px) var(--kage-input-padding-right, 10px) var(--kage-input-padding-bottom, 9px) var(--kage-input-padding-left, 10px);color:var(--kage-input-text-color, inherit);font-family:var(--kage-input-font-family);background:transparent;font-size:15px}:host .kage-input-wrapper .input-area .icon{display:none;transition:.3s}:host .kage-input-wrapper .input-area .icon:not(:empty){width:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}:host .kage-input-wrapper .input-area .icon:not(:empty).start{border-right:var(--kage-input-border-left-width, 1px) solid var(--kage-input-icon-border-color, var(--kage-input-border-color, var(--color-medium, transparent)))}:host .kage-input-wrapper .input-area .icon:not(:empty).end{border-left:var(--kage-input-border-right-width, 1px) solid var(--kage-input-icon-border-color, var(--kage-input-border-color, var(--color-medium, transparent)))}:host .kage-input-wrapper .input-area:focus-within{border-color:var(--kage-input-active-border-color, var(--color-primary, inherit))}:host .kage-input-wrapper .input-area:focus-within .icon.start,:host .kage-input-wrapper .input-area:focus-within .icon.end{border-color:var(--kage-input-active-border-color, var(--color-primary, inherit))!important}:host .kage-input-wrapper .validators{display:flex}:host .kage-input-wrapper .validators .left{width:100%;display:flex;flex-direction:column}:host .kage-input-wrapper .validators .left .hint{display:none}:host .kage-input-wrapper .validators .left .hint:not(:empty){display:block;margin-top:5px;color:var(--color-medium)}:host .kage-input-wrapper .validators .left .hint::ng-deep [slot=hint]{font-size:10px}:host .kage-input-wrapper .validators .left .error{display:none}:host .kage-input-wrapper .validators .left .error:not(:empty){display:block;margin-top:3px}:host .kage-input-wrapper .validators .right:not(:empty){margin-left:10px;margin-top:3px}:host .kage-input-wrapper .validators .right .counter{display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:var(--color-medium)}:host .kage-input-wrapper .validators .right .counter span{margin-right:3px;color:var(--color-dark)}\n"] }]
        }], propDecorators: { inputRef: [{
                type: ViewChild,
                args: ['inputField']
            }] } });

class KageOption {
    value = input();
    label = input('');
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageOption, isStandalone: true, selector: "kage-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageOption, decorators: [{
            type: Component,
            args: [{ selector: 'kage-option', template: '', changeDetection: ChangeDetectionStrategy.OnPush }]
        }] });

class KageProgressBar {
    mode = input('indeterminate');
    value = input(0);
    color = input('primary');
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageProgressBar, isStandalone: true, selector: "kage-progress-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kage-progress-bar-wrapper\" [ngClass]=\"[mode(), color()]\">\r\n    <div class=\"progress-bar-track\">\r\n        @if (mode() !== 'indeterminate') {\r\n            <div class=\"progress-bar-fill\" [style.width.%]=\"value()\"></div>\r\n        } @else if (mode() === 'buffer') {\r\n            <div class=\"progress-bar-buffer\" [style.width.%]=\"value()\"></div>\r\n        } @else {\r\n            <div class=\"progress-bar-indeterminate\"><div class=\"indeterminate-bar\"></div></div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".kage-progress-bar-wrapper{width:100%;height:var(--kage-progress-bar-size, 3px);overflow:hidden}.kage-progress-bar-wrapper .progress-bar-track{width:100%;height:100%;position:relative;background:var(--kage-progress-bar-track-color, transparent)}.kage-progress-bar-wrapper .progress-bar-track .progress-bar-fill,.kage-progress-bar-wrapper .progress-bar-track .progress-bar-buffer{background:var(--kage-progress-bar-thumb-color, var(--color-primary, transparent));height:100%;transition:width .3s ease;position:absolute;top:0;left:0}.kage-progress-bar-wrapper .progress-bar-track .progress-bar-buffer{opacity:.4}.kage-progress-bar-wrapper .progress-bar-track .progress-bar-indeterminate{position:absolute;inset:0;overflow:hidden}.kage-progress-bar-wrapper .progress-bar-track .progress-bar-indeterminate .indeterminate-bar{width:40%;height:100%;position:absolute;background:var(--kage-progress-bar-thumb-color, var(--color-primary, transparent));animation:indeterminate 2s infinite ease-in-out}.kage-progress-bar-wrapper.primary{--kage-progress-bar-thumb-color: var(--color-primary)}.kage-progress-bar-wrapper.secondary{--kage-progress-bar-thumb-color: var(--color-secondary)}.kage-progress-bar-wrapper.tertiary{--kage-progress-bar-thumb-color: var(--color-tertiary)}.kage-progress-bar-wrapper.success{--kage-progress-bar-thumb-color: var(--color-success)}.kage-progress-bar-wrapper.danger{--kage-progress-bar-thumb-color: var(--color-danger)}.kage-progress-bar-wrapper.warning{--kage-progress-bar-thumb-color: var(--color-warning)}.kage-progress-bar-wrapper.info{--kage-progress-bar-thumb-color: var(--color-info)}@keyframes indeterminate{0%{left:-40%}50%{left:60%}to{left:100%}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageProgressBar, decorators: [{
            type: Component,
            args: [{ selector: 'kage-progress-bar', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kage-progress-bar-wrapper\" [ngClass]=\"[mode(), color()]\">\r\n    <div class=\"progress-bar-track\">\r\n        @if (mode() !== 'indeterminate') {\r\n            <div class=\"progress-bar-fill\" [style.width.%]=\"value()\"></div>\r\n        } @else if (mode() === 'buffer') {\r\n            <div class=\"progress-bar-buffer\" [style.width.%]=\"value()\"></div>\r\n        } @else {\r\n            <div class=\"progress-bar-indeterminate\"><div class=\"indeterminate-bar\"></div></div>\r\n        }\r\n    </div>\r\n</div>\r\n", styles: [".kage-progress-bar-wrapper{width:100%;height:var(--kage-progress-bar-size, 3px);overflow:hidden}.kage-progress-bar-wrapper .progress-bar-track{width:100%;height:100%;position:relative;background:var(--kage-progress-bar-track-color, transparent)}.kage-progress-bar-wrapper .progress-bar-track .progress-bar-fill,.kage-progress-bar-wrapper .progress-bar-track .progress-bar-buffer{background:var(--kage-progress-bar-thumb-color, var(--color-primary, transparent));height:100%;transition:width .3s ease;position:absolute;top:0;left:0}.kage-progress-bar-wrapper .progress-bar-track .progress-bar-buffer{opacity:.4}.kage-progress-bar-wrapper .progress-bar-track .progress-bar-indeterminate{position:absolute;inset:0;overflow:hidden}.kage-progress-bar-wrapper .progress-bar-track .progress-bar-indeterminate .indeterminate-bar{width:40%;height:100%;position:absolute;background:var(--kage-progress-bar-thumb-color, var(--color-primary, transparent));animation:indeterminate 2s infinite ease-in-out}.kage-progress-bar-wrapper.primary{--kage-progress-bar-thumb-color: var(--color-primary)}.kage-progress-bar-wrapper.secondary{--kage-progress-bar-thumb-color: var(--color-secondary)}.kage-progress-bar-wrapper.tertiary{--kage-progress-bar-thumb-color: var(--color-tertiary)}.kage-progress-bar-wrapper.success{--kage-progress-bar-thumb-color: var(--color-success)}.kage-progress-bar-wrapper.danger{--kage-progress-bar-thumb-color: var(--color-danger)}.kage-progress-bar-wrapper.warning{--kage-progress-bar-thumb-color: var(--color-warning)}.kage-progress-bar-wrapper.info{--kage-progress-bar-thumb-color: var(--color-info)}@keyframes indeterminate{0%{left:-40%}50%{left:60%}to{left:100%}}\n"] }]
        }] });

class KageRadio {
    value = input();
    disabled = model(false);
    color = input('primary');
    checked = false;
    cssClass = input();
    name = '';
    group;
    setGroup(group) {
        this.group = group;
        this.name = group.name();
    }
    setDisabled(disabled) {
        this.disabled.set(disabled);
    }
    onSelect() {
        if (this.group) {
            if (!this.disabled()) {
                this.group.selectValue(this.value());
            }
        }
        else {
            throw new Error('Radio buttons must be wrapped by <k-radio-group>');
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageRadio, isStandalone: true, selector: "kage-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, ngImport: i0, template: "<label class=\"kage-radio-wrapper\" [ngClass]=\"[color(), cssClass() ?? '']\">\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"value()\"\r\n        [checked]=\"checked\"\r\n        [disabled]=\"disabled()\"\r\n        (change)=\"onSelect()\"\r\n    />\r\n    <span class=\"kage-radio\"></span>\r\n    <ng-content></ng-content>\r\n</label>", styles: [":host{display:block}:host .kage-radio-wrapper{display:flex;align-items:center;cursor:pointer}:host .kage-radio-wrapper input{display:none}:host .kage-radio-wrapper input:checked+.kage-radio{border-color:var(--kage-radio-color-checked, var(--color-primary, transparent))}:host .kage-radio-wrapper input:checked+.kage-radio:after{background:var(--kage-radio-color-checked, var(--color-primary, transparent))}:host .kage-radio-wrapper input:disabled+.k-radio{opacity:var(--kage-radio-disable-opacity, .6);pointer-events:none}:host .kage-radio-wrapper .kage-radio{width:var(--kage-radio-size, 16px);height:var(--kage-radio-size, 16px);border-radius:var(--kage-radio-border-radius, 0px);border:var(--kage-radio-border-width, 1px) solid var(--kage-radio-border-color, var(--color-medium, transparent));display:inline-block;position:relative;transition:.4s;margin-right:10px}:host .kage-radio-wrapper .kage-radio:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--kage-radio-indicator-size, 9px);height:var(--kage-radio-indicator-size, 9px);background:transparent;border-radius:var(--kage-radio-border-radius, 0px);transition:.4s}:host .kage-radio-wrapper.primary{--kage-radio-color-checked: var(--color-primary)}:host .kage-radio-wrapper.secondary{--kage-radio-color-checked: var(--color-secondary)}:host .kage-radio-wrapper.tertiary{--kage-radio-color-checked: var(--color-tertiary)}:host .kage-radio-wrapper.success{--kage-radio-color-checked: var(--color-success)}:host .kage-radio-wrapper.danger{--kage-radio-color-checked: var(--color-danger)}:host .kage-radio-wrapper.warning{--kage-radio-color-checked: var(--color-warning)}:host .kage-radio-wrapper.info{--kage-radio-color-checked: var(--color-info)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRadio, decorators: [{
            type: Component,
            args: [{ selector: 'kage-radio', imports: [NgClass], template: "<label class=\"kage-radio-wrapper\" [ngClass]=\"[color(), cssClass() ?? '']\">\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"value()\"\r\n        [checked]=\"checked\"\r\n        [disabled]=\"disabled()\"\r\n        (change)=\"onSelect()\"\r\n    />\r\n    <span class=\"kage-radio\"></span>\r\n    <ng-content></ng-content>\r\n</label>", styles: [":host{display:block}:host .kage-radio-wrapper{display:flex;align-items:center;cursor:pointer}:host .kage-radio-wrapper input{display:none}:host .kage-radio-wrapper input:checked+.kage-radio{border-color:var(--kage-radio-color-checked, var(--color-primary, transparent))}:host .kage-radio-wrapper input:checked+.kage-radio:after{background:var(--kage-radio-color-checked, var(--color-primary, transparent))}:host .kage-radio-wrapper input:disabled+.k-radio{opacity:var(--kage-radio-disable-opacity, .6);pointer-events:none}:host .kage-radio-wrapper .kage-radio{width:var(--kage-radio-size, 16px);height:var(--kage-radio-size, 16px);border-radius:var(--kage-radio-border-radius, 0px);border:var(--kage-radio-border-width, 1px) solid var(--kage-radio-border-color, var(--color-medium, transparent));display:inline-block;position:relative;transition:.4s;margin-right:10px}:host .kage-radio-wrapper .kage-radio:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--kage-radio-indicator-size, 9px);height:var(--kage-radio-indicator-size, 9px);background:transparent;border-radius:var(--kage-radio-border-radius, 0px);transition:.4s}:host .kage-radio-wrapper.primary{--kage-radio-color-checked: var(--color-primary)}:host .kage-radio-wrapper.secondary{--kage-radio-color-checked: var(--color-secondary)}:host .kage-radio-wrapper.tertiary{--kage-radio-color-checked: var(--color-tertiary)}:host .kage-radio-wrapper.success{--kage-radio-color-checked: var(--color-success)}:host .kage-radio-wrapper.danger{--kage-radio-color-checked: var(--color-danger)}:host .kage-radio-wrapper.warning{--kage-radio-color-checked: var(--color-warning)}:host .kage-radio-wrapper.info{--kage-radio-color-checked: var(--color-info)}\n"] }]
        }] });

class KageRadioGroup {
    name = input('');
    disabled = model(false);
    radios;
    _value;
    onChange = (value) => { };
    onTouched = () => { };
    constructor() {
        effect(() => this.updateDisabled());
    }
    ngAfterContentInit() {
        if (!this.radios || this.radios.length === 0) {
            throw new Error('No <k-radio> found inside <k-radio-group>');
        }
        this.radios.forEach((radio) => {
            radio.setGroup(this);
        });
        this.updateSelection();
        this.updateDisabled();
    }
    writeValue(value) {
        this._value = value;
        this.updateSelection();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
        this.updateDisabled();
    }
    selectValue(value) {
        if (!this.disabled()) {
            this._value = value;
            this.updateSelection();
            this.onChange(value);
            this.onTouched();
        }
    }
    updateSelection() {
        this.radios?.forEach((r) => (r.checked = r.value() === this._value));
    }
    updateDisabled() {
        this.radios?.forEach((r) => r.setDisabled(this.disabled()));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageRadioGroup, isStandalone: true, selector: "kage-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageRadioGroup),
                multi: true,
            },
        ], queries: [{ propertyName: "radios", predicate: KageRadio }], ngImport: i0, template: `
    <div class="kage-radio-group" [class.disabled]="disabled() === true">
      <ng-content></ng-content>
    </div>
  `, isInline: true, styles: [".kage-radio-group{display:flex;flex-wrap:wrap;flex-direction:var(--kage-radio-buttons-direction, column);gap:var(--kage-radio-buttons-gap, 10px)}.kage-radio-group.disabled{opacity:var(--kage-radio-buttons-disable-opacity, .6);pointer-events:none}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRadioGroup, decorators: [{
            type: Component,
            args: [{ selector: 'kage-radio-group', imports: [], template: `
    <div class="kage-radio-group" [class.disabled]="disabled() === true">
      <ng-content></ng-content>
    </div>
  `, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageRadioGroup),
                            multi: true,
                        },
                    ], styles: [".kage-radio-group{display:flex;flex-wrap:wrap;flex-direction:var(--kage-radio-buttons-direction, column);gap:var(--kage-radio-buttons-gap, 10px)}.kage-radio-group.disabled{opacity:var(--kage-radio-buttons-disable-opacity, .6);pointer-events:none}\n"] }]
        }], ctorParameters: () => [], propDecorators: { radios: [{
                type: ContentChildren,
                args: [KageRadio]
            }] } });

class KageRange {
    min = input(0);
    max = input(100);
    step = input(1);
    disabled = model(false);
    ticks = input(false);
    vertical = input(false);
    showTooltip = input(false);
    valueChange = output();
    focus = output();
    blur = output();
    cssClass = input();
    color = input();
    value = 0;
    onChange = (value) => { };
    onTouched = () => { };
    valueChange$ = new Subject();
    constructor() {
        this.valueChange$.pipe(debounceTime(100)).subscribe((val) => {
            this.valueChange.emit(val);
            this.onChange(val);
        });
    }
    get tickArray() {
        const ticks = [];
        for (let i = this.min(); i <= this.max(); i += this.step()) {
            ticks.push(i);
        }
        return ticks;
    }
    get tickLabels() {
        return Array.isArray(this.ticks()) ? this.ticks() : [];
    }
    get hasLabeledTicks() {
        return Array.isArray(this.ticks());
    }
    get tooltipPosition() {
        const percentage = ((this.value - this.min()) / (this.max() - this.min())) * 100;
        return this.vertical()
            ? `top: ${100 - percentage}%;`
            : `left: ${percentage}%;`;
    }
    onInput(event) {
        const input = event.target;
        this.value = +input.value;
        this.valueChange$.next(this.value);
    }
    onFocus() {
        this.focus.emit();
    }
    onBlur() {
        this.onTouched();
        this.blur.emit();
    }
    writeValue(val) {
        this.value = val ?? 0;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageRange, isStandalone: true, selector: "kage-range", inputs: { 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ticks: { classPropertyName: "ticks", publicName: "ticks", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", valueChange: "valueChange", focus: "focus", blur: "blur" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageRange),
                multi: true,
            },
        ], ngImport: i0, template: "<label class=\"kage-range-wrapper\" [ngClass]=\"[color() ?? '', cssClass() ?? '']\">\r\n    <div class=\"kage-field\">\r\n        <input \r\n            type=\"range\" \r\n            [attr.min]=\"min()\"\r\n            [attr.max]=\"max()\"\r\n            [attr.step]=\"step()\"\r\n            (input)=\"onInput($event)\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\"\r\n            [value]=\"value\"\r\n        />\r\n    </div>\r\n    @if (showTooltip()) {\r\n        <div class=\"kage-range-tooltip\">\r\n            <span>{{value}}</span>\r\n        </div>\r\n    }\r\n</label>", styles: [".kage-range-wrapper{min-height:var(--kage-range-min-height, 48px);display:flex;align-items:center;justify-content:center;width:100%}.kage-range-wrapper .kage-field{width:100%;display:flex;align-items:center;justify-content:center}.kage-range-wrapper .kage-field input{appearance:none;width:100%;height:var(--kage-range-track-size, 1px);background:var(--kage-range-track-color, var(--color-primary, transparent));opacity:.9;transition:opacity .2s}.kage-range-wrapper .kage-field input:hover{opacity:1}.kage-range-wrapper .kage-field input::-webkit-slider-thumb{appearance:none;width:var(--kage-range-thumb-size, 20px);height:var(--kage-range-thumb-size, 20px);border-radius:50%;background:var(--color-background);border:var(--kage-range-track-size, 1px) solid var(--kage-range-thumb-color, var(--color-primary, transparent));cursor:pointer}.kage-range-wrapper .kage-field input::-moz-range-thumb{width:var(--kage-range-thumb-size, 20px);height:var(--kage-range-thumb-size, 20px);background:var(--kage-range-thumb-color, var(--color-primary, transparent));cursor:pointer}.kage-range-wrapper .kage-range-tooltip{border:var(--kage-range-track-size, 1px) solid var(--kage-range-tooltip-color, var(--color-primary, transparent));display:flex;align-items:center;justify-content:center;width:var(--kage-range-tooltip-size, 80px);margin-left:10px}.kage-range-wrapper .kage-range-tooltip span{display:flex;align-items:center;justify-content:center;width:100%;height:var(--kage-range-tooltip-height, 25px);position:relative;font-family:var(--kage-range-tooltip-font-family, inherit);color:var(--kage-range-tooltip-color, var(--color-primary, transparent))}.kage-range-wrapper .kage-range-tooltip span:before{content:\"\";border-top:8px solid transparent;border-right:8px solid var(--kage-range-tooltip-color, var(--color-primary, transparent));border-bottom:8px solid transparent;border-left:8px solid transparent;position:absolute;top:50%;left:-16px;transform:translateY(-50%)}.kage-range-wrapper.primary{--kage-range-thumb-color: var(--color-primary);--kage-range-track-color: var(--color-primary);--kage-range-tooltip-color: var(--color-primary)}.kage-range-wrapper.secondary{--kage-range-thumb-color: var(--color-secondary);--kage-range-track-color: var(--color-secondary);--kage-range-tooltip-color: var(--color-secondary)}.kage-range-wrapper.tertiary{--kage-range-thumb-color: var(--color-tertiary);--kage-range-track-color: var(--color-tertiary);--kage-range-tooltip-color: var(--color-tertiary)}.kage-range-wrapper.danger{--kage-range-thumb-color: var(--color-danger);--kage-range-track-color: var(--color-danger);--kage-range-tooltip-color: var(--color-danger)}.kage-range-wrapper.success{--kage-range-thumb-color: var(--color-success);--kage-range-track-color: var(--color-success);--kage-range-tooltip-color: var(--color-success)}.kage-range-wrapper.warning{--kage-range-thumb-color: var(--color-warning);--kage-range-track-color: var(--color-warning);--kage-range-tooltip-color: var(--color-warning)}.kage-range-wrapper.info{--kage-range-thumb-color: var(--color-info);--kage-range-track-color: var(--color-info);--kage-range-tooltip-color: var(--color-info)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRange, decorators: [{
            type: Component,
            args: [{ selector: 'kage-range', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageRange),
                            multi: true,
                        },
                    ], template: "<label class=\"kage-range-wrapper\" [ngClass]=\"[color() ?? '', cssClass() ?? '']\">\r\n    <div class=\"kage-field\">\r\n        <input \r\n            type=\"range\" \r\n            [attr.min]=\"min()\"\r\n            [attr.max]=\"max()\"\r\n            [attr.step]=\"step()\"\r\n            (input)=\"onInput($event)\"\r\n            (focus)=\"onFocus()\"\r\n            (blur)=\"onBlur()\"\r\n            [value]=\"value\"\r\n        />\r\n    </div>\r\n    @if (showTooltip()) {\r\n        <div class=\"kage-range-tooltip\">\r\n            <span>{{value}}</span>\r\n        </div>\r\n    }\r\n</label>", styles: [".kage-range-wrapper{min-height:var(--kage-range-min-height, 48px);display:flex;align-items:center;justify-content:center;width:100%}.kage-range-wrapper .kage-field{width:100%;display:flex;align-items:center;justify-content:center}.kage-range-wrapper .kage-field input{appearance:none;width:100%;height:var(--kage-range-track-size, 1px);background:var(--kage-range-track-color, var(--color-primary, transparent));opacity:.9;transition:opacity .2s}.kage-range-wrapper .kage-field input:hover{opacity:1}.kage-range-wrapper .kage-field input::-webkit-slider-thumb{appearance:none;width:var(--kage-range-thumb-size, 20px);height:var(--kage-range-thumb-size, 20px);border-radius:50%;background:var(--color-background);border:var(--kage-range-track-size, 1px) solid var(--kage-range-thumb-color, var(--color-primary, transparent));cursor:pointer}.kage-range-wrapper .kage-field input::-moz-range-thumb{width:var(--kage-range-thumb-size, 20px);height:var(--kage-range-thumb-size, 20px);background:var(--kage-range-thumb-color, var(--color-primary, transparent));cursor:pointer}.kage-range-wrapper .kage-range-tooltip{border:var(--kage-range-track-size, 1px) solid var(--kage-range-tooltip-color, var(--color-primary, transparent));display:flex;align-items:center;justify-content:center;width:var(--kage-range-tooltip-size, 80px);margin-left:10px}.kage-range-wrapper .kage-range-tooltip span{display:flex;align-items:center;justify-content:center;width:100%;height:var(--kage-range-tooltip-height, 25px);position:relative;font-family:var(--kage-range-tooltip-font-family, inherit);color:var(--kage-range-tooltip-color, var(--color-primary, transparent))}.kage-range-wrapper .kage-range-tooltip span:before{content:\"\";border-top:8px solid transparent;border-right:8px solid var(--kage-range-tooltip-color, var(--color-primary, transparent));border-bottom:8px solid transparent;border-left:8px solid transparent;position:absolute;top:50%;left:-16px;transform:translateY(-50%)}.kage-range-wrapper.primary{--kage-range-thumb-color: var(--color-primary);--kage-range-track-color: var(--color-primary);--kage-range-tooltip-color: var(--color-primary)}.kage-range-wrapper.secondary{--kage-range-thumb-color: var(--color-secondary);--kage-range-track-color: var(--color-secondary);--kage-range-tooltip-color: var(--color-secondary)}.kage-range-wrapper.tertiary{--kage-range-thumb-color: var(--color-tertiary);--kage-range-track-color: var(--color-tertiary);--kage-range-tooltip-color: var(--color-tertiary)}.kage-range-wrapper.danger{--kage-range-thumb-color: var(--color-danger);--kage-range-track-color: var(--color-danger);--kage-range-tooltip-color: var(--color-danger)}.kage-range-wrapper.success{--kage-range-thumb-color: var(--color-success);--kage-range-track-color: var(--color-success);--kage-range-tooltip-color: var(--color-success)}.kage-range-wrapper.warning{--kage-range-thumb-color: var(--color-warning);--kage-range-track-color: var(--color-warning);--kage-range-tooltip-color: var(--color-warning)}.kage-range-wrapper.info{--kage-range-thumb-color: var(--color-info);--kage-range-track-color: var(--color-info);--kage-range-tooltip-color: var(--color-info)}\n"] }]
        }], ctorParameters: () => [] });

class KageRow {
    align = input('start');
    justify = input('start');
    get alignClass() {
        return 'align-' + this.align();
    }
    get justifyClass() {
        return 'justify-' + this.justify();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageRow, isStandalone: true, selector: "kage-row", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"k-row\" [ngClass]=\"[alignClass, justifyClass]\"><ng-content></ng-content></div>", styles: [".k-row{display:flex;flex-wrap:wrap;width:100%}.k-row.align-start{align-items:flex-start}.k-row.align-center{align-items:center}.k-row.align-end{align-items:flex-end}.k-row.justify-start{justify-content:flex-start}.k-row.justify-center{justify-content:center}.k-row.justify-end{justify-content:flex-end}.k-row.justify-between{justify-content:space-between}.k-row.justify-around{justify-content:space-around}.k-row.justify-evenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRow, decorators: [{
            type: Component,
            args: [{ selector: 'kage-row', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"k-row\" [ngClass]=\"[alignClass, justifyClass]\"><ng-content></ng-content></div>", styles: [".k-row{display:flex;flex-wrap:wrap;width:100%}.k-row.align-start{align-items:flex-start}.k-row.align-center{align-items:center}.k-row.align-end{align-items:flex-end}.k-row.justify-start{justify-content:flex-start}.k-row.justify-center{justify-content:center}.k-row.justify-end{justify-content:flex-end}.k-row.justify-between{justify-content:space-between}.k-row.justify-around{justify-content:space-around}.k-row.justify-evenly{justify-content:space-evenly}\n"] }]
        }] });

class KageSearchbar {
    placeholder = input('Search...');
    debounce = input(300);
    autofocus = input(false);
    disabled = model(false);
    showClear = input(true);
    search = output();
    value = '';
    onChange = (value) => { };
    onTouched = () => { };
    input$ = new Subject();
    ngOnInit() {
        this.input$.pipe(debounceTime(this.debounce())).subscribe((val) => {
            this.search.emit(val);
        });
    }
    onInput(event) {
        const target = event.target;
        this.value = target.value;
        this.onChange(this.value);
        this.input$.next(this.value);
    }
    clear() {
        this.value = '';
        this.onChange(this.value);
        this.input$.next(this.value);
    }
    writeValue(value) {
        this.value = value ?? '';
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(disabled) {
        this.disabled.set(Boolean(disabled));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageSearchbar, isStandalone: true, selector: "kage-searchbar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", search: "search" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageSearchbar),
                multi: true,
            },
        ], ngImport: i0, template: "<div class=\"kage-searchbar-wrapper\" [class.disabled]=\"disabled()\">\r\n  <span class=\"search-icon\" aria-hidden=\"true\">\r\n    <kage-icon name=\"search\" [depth]=\"3\"></kage-icon>\r\n  </span>\r\n\r\n  <input\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [value]=\"value\"\r\n    [disabled]=\"disabled()\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onTouched()\"\r\n    [attr.aria-label]=\"placeholder()\"\r\n    [autofocus]=\"autofocus()\"\r\n  />\r\n\r\n  @if (value && showClear()) {\r\n    <div class=\"clear-btn\" type=\"button\" aria-label=\"Clear search\" (click)=\"clear()\">\r\n      <kage-icon name=\"remove\" [depth]=\"3\"></kage-icon>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}:host .kage-searchbar-wrapper{display:flex;border:var(--kage-searchbar-border-width, 1px) solid var(--kage-searchbar-border-color, var(--color-medium, transparent));transition:.4s}:host .kage-searchbar-wrapper.disabled{opacity:var(--kage-searchbar-disable-opacity, .6);pointer-events:none}:host .kage-searchbar-wrapper input{border:none;outline:none;width:100%;font-family:var(--kage-searchbar-font-family, inherit);background:transparent;color:var(--kage-searchbar-text-color, inherit);padding:var(--kage-searchbar-padding-top, 9px) var(--kage-searchbar-padding-right, 10px) var(--kage-searchbar-padding-bottom, 9px) var(--kage-searchbar-padding-left, 10px)}:host .kage-searchbar-wrapper .search-icon{color:var(--kage-searchbar-border-color, var(--color-medium, transparent));width:40px;display:flex;align-items:center;justify-content:center;border-right:var(--kage-searchbar-border-width, 1px) solid var(--kage-searchbar-border-color, var(--color-medium, transparent))}:host .kage-searchbar-wrapper .clear-btn{cursor:pointer;width:40px;display:flex;align-items:center;justify-content:center;color:var(--kage-searchbar-active-border-color, var(--color-primary, inherit));border-left:var(--kage-searchbar-border-width, 1px) solid var(--kage-searchbar-border-color, var(--color-medium, transparent))}:host .kage-searchbar-wrapper:focus-within{--kage-searchbar-border-color: var(--kage-searchbar-active-border-color, var(--color-primary, inherit))}\n"], dependencies: [{ kind: "component", type: KageIcon, selector: "kage-icon", inputs: ["name", "svgSrc", "size", "depth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageSearchbar, decorators: [{
            type: Component,
            args: [{ selector: 'kage-searchbar', imports: [KageIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageSearchbar),
                            multi: true,
                        },
                    ], template: "<div class=\"kage-searchbar-wrapper\" [class.disabled]=\"disabled()\">\r\n  <span class=\"search-icon\" aria-hidden=\"true\">\r\n    <kage-icon name=\"search\" [depth]=\"3\"></kage-icon>\r\n  </span>\r\n\r\n  <input\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [value]=\"value\"\r\n    [disabled]=\"disabled()\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onTouched()\"\r\n    [attr.aria-label]=\"placeholder()\"\r\n    [autofocus]=\"autofocus()\"\r\n  />\r\n\r\n  @if (value && showClear()) {\r\n    <div class=\"clear-btn\" type=\"button\" aria-label=\"Clear search\" (click)=\"clear()\">\r\n      <kage-icon name=\"remove\" [depth]=\"3\"></kage-icon>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}:host .kage-searchbar-wrapper{display:flex;border:var(--kage-searchbar-border-width, 1px) solid var(--kage-searchbar-border-color, var(--color-medium, transparent));transition:.4s}:host .kage-searchbar-wrapper.disabled{opacity:var(--kage-searchbar-disable-opacity, .6);pointer-events:none}:host .kage-searchbar-wrapper input{border:none;outline:none;width:100%;font-family:var(--kage-searchbar-font-family, inherit);background:transparent;color:var(--kage-searchbar-text-color, inherit);padding:var(--kage-searchbar-padding-top, 9px) var(--kage-searchbar-padding-right, 10px) var(--kage-searchbar-padding-bottom, 9px) var(--kage-searchbar-padding-left, 10px)}:host .kage-searchbar-wrapper .search-icon{color:var(--kage-searchbar-border-color, var(--color-medium, transparent));width:40px;display:flex;align-items:center;justify-content:center;border-right:var(--kage-searchbar-border-width, 1px) solid var(--kage-searchbar-border-color, var(--color-medium, transparent))}:host .kage-searchbar-wrapper .clear-btn{cursor:pointer;width:40px;display:flex;align-items:center;justify-content:center;color:var(--kage-searchbar-active-border-color, var(--color-primary, inherit));border-left:var(--kage-searchbar-border-width, 1px) solid var(--kage-searchbar-border-color, var(--color-medium, transparent))}:host .kage-searchbar-wrapper:focus-within{--kage-searchbar-border-color: var(--kage-searchbar-active-border-color, var(--color-primary, inherit))}\n"] }]
        }] });

class KageSegment {
    options = input([]);
    disabled = model(false);
    onSegmentChange = output();
    selectedValue;
    onChange = (value) => { };
    onTouched = () => { };
    get normalizedOptions() {
        return this.options().map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt);
    }
    select(value, disabled = false) {
        if (disabled || this.disabled())
            return;
        this.selectedValue = value;
        this.onSegmentChange.emit(value);
        this.onChange(value);
        this.onTouched();
    }
    onKeyDown(e) {
        const index = this.normalizedOptions.findIndex((o) => o.value === this.selectedValue);
        let nextIndex = index;
        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
            nextIndex = (index + 1) % this.normalizedOptions.length;
        }
        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
            nextIndex =
                (index - 1 + this.normalizedOptions.length) %
                    this.normalizedOptions.length;
        }
        else {
            return;
        }
        const next = this.normalizedOptions[nextIndex];
        if (!next.disabled) {
            this.select(next.value);
        }
        e.preventDefault();
    }
    writeValue(val) {
        this.selectedValue = val;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageSegment, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageSegment, isStandalone: true, selector: "kage-segment", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", onSegmentChange: "onSegmentChange" }, host: { attributes: { "role": "radiogroup", "tabindex": "0" }, listeners: { "keydown": "onKeyDown($event)" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageSegment),
                multi: true,
            },
        ], ngImport: i0, template: "<div class=\"k-segment-container\" [class.disabled]=\"disabled()\">\r\n    <div class=\"k-segments\">\r\n        @for (opt of normalizedOptions; track $index) {\r\n            <button\r\n                [class.active]=\"opt.value === selectedValue\"\r\n                [disabled]=\"opt.disabled || disabled()\"\r\n                (click)=\"select(opt.value, opt.disabled)\"\r\n                role=\"radio\"\r\n                [attr.aria-checked]=\"opt.value === selectedValue\"\r\n                [attr.aria-disabled]=\"opt.disabled || disabled()\"\r\n            >\r\n                {{ opt.label }}\r\n            </button>\r\n        }\r\n    </div>\r\n    <div class=\"k-segment-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".k-segment-container{display:flex;flex-direction:column}.k-segment-container .k-segments{display:flex;align-items:center;justify-content:flex-start}.k-segment-container .k-segments button{padding:8px 14px;border:var(--border-width, 1px) solid var(--border-color);border-right:none;border-bottom:none;background:var(--color-background);cursor:pointer;font-size:14px;color:var(--color-text);text-transform:inherit;transition:.3s}.k-segment-container .k-segments button.active{background:var(--border-color);position:relative;pointer-events:none}.k-segment-container .k-segments button.active:before{content:\"\";border-top:5px solid var(--border-color);border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.k-segment-container .k-segments button:last-child{border-right:var(--border-width, 1px) solid var(--border-color)}.k-segment-container .k-segments button:disabled{opacity:.5;pointer-events:none}.k-segment-container .k-segment-content:not(:empty){padding:10px;border:var(--border-width, 1px) solid var(--border-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageSegment, decorators: [{
            type: Component,
            args: [{ selector: 'kage-segment', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageSegment),
                            multi: true,
                        },
                    ], host: {
                        role: 'radiogroup',
                        tabindex: '0',
                        '(keydown)': 'onKeyDown($event)',
                    }, template: "<div class=\"k-segment-container\" [class.disabled]=\"disabled()\">\r\n    <div class=\"k-segments\">\r\n        @for (opt of normalizedOptions; track $index) {\r\n            <button\r\n                [class.active]=\"opt.value === selectedValue\"\r\n                [disabled]=\"opt.disabled || disabled()\"\r\n                (click)=\"select(opt.value, opt.disabled)\"\r\n                role=\"radio\"\r\n                [attr.aria-checked]=\"opt.value === selectedValue\"\r\n                [attr.aria-disabled]=\"opt.disabled || disabled()\"\r\n            >\r\n                {{ opt.label }}\r\n            </button>\r\n        }\r\n    </div>\r\n    <div class=\"k-segment-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".k-segment-container{display:flex;flex-direction:column}.k-segment-container .k-segments{display:flex;align-items:center;justify-content:flex-start}.k-segment-container .k-segments button{padding:8px 14px;border:var(--border-width, 1px) solid var(--border-color);border-right:none;border-bottom:none;background:var(--color-background);cursor:pointer;font-size:14px;color:var(--color-text);text-transform:inherit;transition:.3s}.k-segment-container .k-segments button.active{background:var(--border-color);position:relative;pointer-events:none}.k-segment-container .k-segments button.active:before{content:\"\";border-top:5px solid var(--border-color);border-right:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid transparent;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.k-segment-container .k-segments button:last-child{border-right:var(--border-width, 1px) solid var(--border-color)}.k-segment-container .k-segments button:disabled{opacity:.5;pointer-events:none}.k-segment-container .k-segment-content:not(:empty){padding:10px;border:var(--border-width, 1px) solid var(--border-color)}\n"] }]
        }] });

class KageSelect {
    containerRef;
    childrens;
    obsDestroyer$ = new Subject();
    label = input();
    placeholder = input('Select...');
    disabled = model(false);
    cssClass = input();
    valueChange = output();
    isOpen = false;
    selectedOption = null;
    focusedIndex = -1;
    options = [];
    onChange = (value) => { };
    onTouched = () => { };
    ngAfterContentInit() {
        this.childrens.changes
            .pipe(startWith(null), takeUntil(this.obsDestroyer$))
            .subscribe({
            next: () => {
                this.options = this.childrens.map((el) => ({
                    label: el.label(),
                    value: el.value(),
                }));
            },
        });
    }
    toggleDropdown() {
        if (this.disabled()) {
            return;
        }
        this.isOpen = !this.isOpen;
    }
    selectOption(option, index) {
        this.selectedOption = option;
        this.isOpen = false;
        this.focusedIndex = index;
        this.onChange(option.value);
        this.valueChange.emit(option.value);
        this.onTouched();
    }
    onKeyDown(event) {
        if (!this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
            this.isOpen = true;
        }
        if (this.isOpen) {
            const max = this.options.length - 1;
            if (event.key === 'ArrowDown') {
                this.focusedIndex =
                    this.focusedIndex + 1 > max ? 0 : this.focusedIndex + 1;
                event.preventDefault();
            }
            else if (event.key === 'ArrowUp') {
                this.focusedIndex =
                    this.focusedIndex - 1 < 0 ? max : this.focusedIndex - 1;
                event.preventDefault();
            }
            else if (event.key === 'Enter' && this.focusedIndex >= 0) {
                this.selectOption(this.options[this.focusedIndex], this.focusedIndex);
                event.preventDefault();
            }
            else if (event.key === 'Escape') {
                this.isOpen = false;
            }
        }
    }
    handleOutsideClick(event) {
        if (!this.containerRef.nativeElement.contains(event.target)) {
            this.isOpen = false;
        }
    }
    writeValue(value) {
        this.selectedOption =
            this.options.find((opt) => opt.value === value) || null;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    ngOnDestroy() {
        this.obsDestroyer$.next();
        this.obsDestroyer$.complete();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageSelect, isStandalone: true, selector: "kage-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", valueChange: "valueChange" }, host: { listeners: { "document:click": "handleOutsideClick($event)" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageSelect),
                multi: true,
            },
        ], queries: [{ propertyName: "childrens", predicate: KageOption }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"kage-select-wrapper\" [class.disabled]=\"disabled()\" [class]=\"cssClass() ?? ''\" tabindex=\"0\" (keydown)=\"onKeyDown($event)\" #container>\r\n  @if (label()) {\r\n    <div class=\"kage-select-label-view\">\r\n      <p>{{label()}}</p>\r\n    </div>\r\n  }\r\n  <div class=\"kage-select-selection-area\">\r\n    <div class=\"kage-select-selected\" (click)=\"toggleDropdown()\">\r\n      <div class=\"kage-select-icon start\"><ng-content select=\"[slot='icon-start']\"></ng-content></div>\r\n      <div class=\"kage-select-stage-area\">\r\n        {{ selectedOption?.label || placeholder() }}\r\n        <kage-icon [name]=\"isOpen ? 'chevron-up' : 'chevron-down'\" [depth]=\"3\" [size]=\"20\"></kage-icon>\r\n      </div>\r\n      <div class=\"kage-select-icon end\"><ng-content select=\"[slot='icon-end']\"></ng-content></div>\r\n    </div>\r\n\r\n    @if (isOpen) {\r\n      <ul class=\"kage-select-options\">\r\n        @for (option of options; track $index; let i = $index) {\r\n          <li\r\n            (click)=\"selectOption(option, i)\"\r\n            [class.focused]=\"i === focusedIndex\"\r\n            [class.selected]=\"option.value === selectedOption?.value\"\r\n          >\r\n            {{ option.label }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </div>\r\n</div>", styles: [":host{display:block}:host .kage-select-wrapper{display:flex;flex-direction:column}:host .kage-select-wrapper .kage-select-label-view{margin-bottom:8px;margin-top:.4px}:host .kage-select-wrapper .kage-select-label-view p{margin:0;color:var(--color-dark);font-size:14px}:host .kage-select-wrapper .kage-select-selection-area{position:relative;width:100%;border-style:solid;border-color:var(--kage-select-border-color, var(--color-medium, transparent));border-top-width:var(--kage-select-border-top-width, 1px);border-right-width:var(--kage-select-border-right-width, 1px);border-bottom-width:var(--kage-select-border-bottom-width, 1px);border-left-width:var(--kage-select-border-left-width, 1px);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:sans-serif;background:var(--kage-select-background, transparent);border-radius:var(--kage-select-border-radius, 0px)}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected{display:flex}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected .kage-select-icon:not(:empty){width:40px;display:flex;align-items:center;justify-content:center}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected .kage-select-icon:not(:empty).start{border-right:var(--kage-select-border-width, 1px) solid var(--kage-select-border-color, var(--color-medium, transparent))}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected .kage-select-icon:not(:empty).end{border-left:var(--kage-select-border-width, 1px) solid var(--kage-select-border-color, var(--color-medium, transparent))}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected .kage-select-stage-area{width:100%;display:flex;justify-content:space-between;align-items:center;padding:9px 10px;font-size:15px}:host .kage-select-wrapper .kage-select-selection-area .kage-select-options{list-style:none;margin:0;padding:0;border:var(--kage-select-border-width, 1px) solid var(--kage-select-border-color, var(--color-medium, transparent));border-top:none;background:var(--kage-select-background, var(--color-background, transparent));position:absolute;top:45px;left:-1px;width:100%;z-index:10}:host .kage-select-wrapper .kage-select-selection-area .kage-select-options li{padding:10px;border-top:var(--kage-select-border-width, 1px) solid var(--kage-select-border-color, var(--color-medium, transparent))}:host .kage-select-wrapper .kage-select-selection-area .kage-select-options li.focused,:host .kage-select-wrapper .kage-select-selection-area .kage-select-options li:hover{background-color:var(--kage-select-background-hover, transparent)}:host .kage-select-wrapper .kage-select-selection-area .kage-select-options li.selected{font-weight:700}:host .kage-select-wrapper .kage-select-selection-area.disabled{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "component", type: KageIcon, selector: "kage-icon", inputs: ["name", "svgSrc", "size", "depth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageSelect, decorators: [{
            type: Component,
            args: [{ selector: 'kage-select', imports: [KageIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageSelect),
                            multi: true,
                        },
                    ], template: "<div class=\"kage-select-wrapper\" [class.disabled]=\"disabled()\" [class]=\"cssClass() ?? ''\" tabindex=\"0\" (keydown)=\"onKeyDown($event)\" #container>\r\n  @if (label()) {\r\n    <div class=\"kage-select-label-view\">\r\n      <p>{{label()}}</p>\r\n    </div>\r\n  }\r\n  <div class=\"kage-select-selection-area\">\r\n    <div class=\"kage-select-selected\" (click)=\"toggleDropdown()\">\r\n      <div class=\"kage-select-icon start\"><ng-content select=\"[slot='icon-start']\"></ng-content></div>\r\n      <div class=\"kage-select-stage-area\">\r\n        {{ selectedOption?.label || placeholder() }}\r\n        <kage-icon [name]=\"isOpen ? 'chevron-up' : 'chevron-down'\" [depth]=\"3\" [size]=\"20\"></kage-icon>\r\n      </div>\r\n      <div class=\"kage-select-icon end\"><ng-content select=\"[slot='icon-end']\"></ng-content></div>\r\n    </div>\r\n\r\n    @if (isOpen) {\r\n      <ul class=\"kage-select-options\">\r\n        @for (option of options; track $index; let i = $index) {\r\n          <li\r\n            (click)=\"selectOption(option, i)\"\r\n            [class.focused]=\"i === focusedIndex\"\r\n            [class.selected]=\"option.value === selectedOption?.value\"\r\n          >\r\n            {{ option.label }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  </div>\r\n</div>", styles: [":host{display:block}:host .kage-select-wrapper{display:flex;flex-direction:column}:host .kage-select-wrapper .kage-select-label-view{margin-bottom:8px;margin-top:.4px}:host .kage-select-wrapper .kage-select-label-view p{margin:0;color:var(--color-dark);font-size:14px}:host .kage-select-wrapper .kage-select-selection-area{position:relative;width:100%;border-style:solid;border-color:var(--kage-select-border-color, var(--color-medium, transparent));border-top-width:var(--kage-select-border-top-width, 1px);border-right-width:var(--kage-select-border-right-width, 1px);border-bottom-width:var(--kage-select-border-bottom-width, 1px);border-left-width:var(--kage-select-border-left-width, 1px);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:sans-serif;background:var(--kage-select-background, transparent);border-radius:var(--kage-select-border-radius, 0px)}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected{display:flex}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected .kage-select-icon:not(:empty){width:40px;display:flex;align-items:center;justify-content:center}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected .kage-select-icon:not(:empty).start{border-right:var(--kage-select-border-width, 1px) solid var(--kage-select-border-color, var(--color-medium, transparent))}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected .kage-select-icon:not(:empty).end{border-left:var(--kage-select-border-width, 1px) solid var(--kage-select-border-color, var(--color-medium, transparent))}:host .kage-select-wrapper .kage-select-selection-area .kage-select-selected .kage-select-stage-area{width:100%;display:flex;justify-content:space-between;align-items:center;padding:9px 10px;font-size:15px}:host .kage-select-wrapper .kage-select-selection-area .kage-select-options{list-style:none;margin:0;padding:0;border:var(--kage-select-border-width, 1px) solid var(--kage-select-border-color, var(--color-medium, transparent));border-top:none;background:var(--kage-select-background, var(--color-background, transparent));position:absolute;top:45px;left:-1px;width:100%;z-index:10}:host .kage-select-wrapper .kage-select-selection-area .kage-select-options li{padding:10px;border-top:var(--kage-select-border-width, 1px) solid var(--kage-select-border-color, var(--color-medium, transparent))}:host .kage-select-wrapper .kage-select-selection-area .kage-select-options li.focused,:host .kage-select-wrapper .kage-select-selection-area .kage-select-options li:hover{background-color:var(--kage-select-background-hover, transparent)}:host .kage-select-wrapper .kage-select-selection-area .kage-select-options li.selected{font-weight:700}:host .kage-select-wrapper .kage-select-selection-area.disabled{opacity:.6;pointer-events:none}\n"] }]
        }], propDecorators: { containerRef: [{
                type: ViewChild,
                args: ['container']
            }], childrens: [{
                type: ContentChildren,
                args: [KageOption]
            }], handleOutsideClick: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });

class KageTextarea {
    label = input('');
    placeholder = input('');
    disabled = model(false);
    readonly = input(false);
    maxLength = input();
    autoFocus = input(false);
    debounce = input();
    rows = input(4);
    autoResize = input();
    autocomplete = input('off');
    cssClass = input();
    valueChanged = output();
    textareaRef;
    debouncer = new Subject();
    value = '';
    platformId = inject(PLATFORM_ID);
    onChange = (_) => { };
    onTouched = () => { };
    ngAfterViewInit() {
        // As these are specifically client side events or tasks
        // this needs to check for pltformBrowser
        if (isPlatformBrowser(this.platformId)) {
            // Work on debounce
            this.debouncer
                .pipe(debounceTime(this.debounce() ?? 0))
                .subscribe((val) => this.valueChanged.emit(val));
            // Set up the focus on element
            if (this.autoFocus()) {
                setTimeout(() => this.textareaRef?.nativeElement?.focus(), 100);
            }
        }
    }
    writeValue(val) {
        this.value = val ?? '';
        this.resizeTextarea();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    handleInput(event) {
        const input = event.target.value;
        this.updateValue(input);
    }
    updateValue(val) {
        this.value = val;
        this.onChange(val);
        this.onTouched();
        this.debouncer.next(val);
    }
    resizeTextarea() {
        if (this.autoResize() && this.textareaRef) {
            const el = this.textareaRef.nativeElement;
            el.style.height = 'auto';
            el.style.height = el.scrollHeight + 'px';
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageTextarea, isStandalone: true, selector: "kage-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", valueChanged: "valueChanged" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageTextarea),
                multi: true,
            },
        ], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<label class=\"kage-textarea-wrapper\" [class]=\"cssClass() ?? ''\">\r\n    @if (label()) {\r\n        <p class=\"label-title\">{{label()}}</p>\r\n    }\r\n    <div class=\"input-area\">\r\n        <div class=\"icon\">\r\n            <ng-content select=\"[slot='icon-start']\"></ng-content>\r\n        </div>\r\n        <div class=\"input\">\r\n            <textarea \r\n                [value]=\"value\"\r\n                [placeholder]=\"placeholder()\" \r\n                [disabled]=\"disabled()\" \r\n                [readOnly]=\"readonly()\" \r\n                [attr.maxLength]=\"maxLength()\"\r\n                [autofocus]=\"autoFocus()\"\r\n                [autocomplete]=\"autocomplete()\"\r\n                (input)=\"handleInput($event)\"\r\n                (blur)=\"onTouched()\"\r\n                [rows]=\"rows()\"\r\n                #textareaRef\r\n            ></textarea>\r\n        </div>\r\n        <div class=\"icon\">\r\n            <ng-content select=\"[slot='icon-end']\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <div class=\"validators\">\r\n        <div class=\"left\">\r\n            <div class=\"hint\"><ng-content select=\"[slot='hint']\"></ng-content></div>\r\n            <div class=\"error\"><ng-content select=\"[slot='error']\"></ng-content></div>\r\n        </div>\r\n        <div class=\"right\">\r\n            @if (maxLength()) {\r\n                <div class=\"counter\"><span>{{value.length}}</span>/{{maxLength()}}</div>\r\n            }\r\n        </div>\r\n    </div>\r\n</label>", styles: [":host{display:block}:host .kage-textarea-wrapper{display:flex;flex-direction:column}:host .kage-textarea-wrapper .label-title:not(:empty){margin-bottom:6px}:host .kage-textarea-wrapper .input-area{display:flex;background:var(--kage-textarea-background, transparent);border-style:solid;border-color:var(--kage-textarea-border-color, var(--color-medium, transparent));border-top-width:var(--kage-textarea-border-top-width, 1px);border-right-width:var(--kage-textarea-border-right-width, 1px);border-bottom-width:var(--kage-textarea-border-bottom-width, 1px);border-left-width:var(--kage-textarea-border-left-width, 1px);border-radius:var(--kage-textarea-border-radius, 0px);transition:.4s}:host .kage-textarea-wrapper .input-area .input{display:flex;flex-direction:column;width:100%}:host .kage-textarea-wrapper .input-area .input textarea{padding:var(--kage-textarea-padding-top, 9px) var(--kage-textarea-padding-right, 10px) var(--kage-textarea-padding-bottom, 9px) var(--kage-textarea-padding-left, 10px);color:var(--kage-textarea-text-color, inherit);font-family:var(--kage-textarea-font-family, inherit);background:transparent;resize:none}:host .kage-textarea-wrapper .input-area .icon{display:none}:host .kage-textarea-wrapper .input-area .icon:not(:empty){width:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}:host .kage-textarea-wrapper .input-area:focus-within{border-color:var(--kage-textarea-active-border-color, var(--color-primary, inherit))}:host .kage-textarea-wrapper .input-area:focus-within .icon.start,:host .kage-textarea-wrapper .input-area:focus-within .icon.end{border-color:var(--kage-textarea-active-border-color, var(--color-primary, inherit))}:host .kage-textarea-wrapper .validators{display:flex}:host .kage-textarea-wrapper .validators .left{width:100%;display:flex;flex-direction:column}:host .kage-textarea-wrapper .validators .left .hint{display:none}:host .kage-textarea-wrapper .validators .left .hint:not(:empty){display:block;margin-top:3px;color:var(--color-medium)}:host .kage-textarea-wrapper .validators .left .error{display:none}:host .kage-textarea-wrapper .validators .left .error:not(:empty){display:block;margin-top:3px}:host .kage-textarea-wrapper .validators .right:not(:empty){margin-left:10px;margin-top:3px}:host .kage-textarea-wrapper .validators .right .counter{display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:var(--color-medium)}:host .kage-textarea-wrapper .validators .right .counter span{margin-right:3px;color:var(--color-dark)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageTextarea, decorators: [{
            type: Component,
            args: [{ selector: 'kage-textarea', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageTextarea),
                            multi: true,
                        },
                    ], template: "<label class=\"kage-textarea-wrapper\" [class]=\"cssClass() ?? ''\">\r\n    @if (label()) {\r\n        <p class=\"label-title\">{{label()}}</p>\r\n    }\r\n    <div class=\"input-area\">\r\n        <div class=\"icon\">\r\n            <ng-content select=\"[slot='icon-start']\"></ng-content>\r\n        </div>\r\n        <div class=\"input\">\r\n            <textarea \r\n                [value]=\"value\"\r\n                [placeholder]=\"placeholder()\" \r\n                [disabled]=\"disabled()\" \r\n                [readOnly]=\"readonly()\" \r\n                [attr.maxLength]=\"maxLength()\"\r\n                [autofocus]=\"autoFocus()\"\r\n                [autocomplete]=\"autocomplete()\"\r\n                (input)=\"handleInput($event)\"\r\n                (blur)=\"onTouched()\"\r\n                [rows]=\"rows()\"\r\n                #textareaRef\r\n            ></textarea>\r\n        </div>\r\n        <div class=\"icon\">\r\n            <ng-content select=\"[slot='icon-end']\"></ng-content>\r\n        </div>\r\n    </div>\r\n    <div class=\"validators\">\r\n        <div class=\"left\">\r\n            <div class=\"hint\"><ng-content select=\"[slot='hint']\"></ng-content></div>\r\n            <div class=\"error\"><ng-content select=\"[slot='error']\"></ng-content></div>\r\n        </div>\r\n        <div class=\"right\">\r\n            @if (maxLength()) {\r\n                <div class=\"counter\"><span>{{value.length}}</span>/{{maxLength()}}</div>\r\n            }\r\n        </div>\r\n    </div>\r\n</label>", styles: [":host{display:block}:host .kage-textarea-wrapper{display:flex;flex-direction:column}:host .kage-textarea-wrapper .label-title:not(:empty){margin-bottom:6px}:host .kage-textarea-wrapper .input-area{display:flex;background:var(--kage-textarea-background, transparent);border-style:solid;border-color:var(--kage-textarea-border-color, var(--color-medium, transparent));border-top-width:var(--kage-textarea-border-top-width, 1px);border-right-width:var(--kage-textarea-border-right-width, 1px);border-bottom-width:var(--kage-textarea-border-bottom-width, 1px);border-left-width:var(--kage-textarea-border-left-width, 1px);border-radius:var(--kage-textarea-border-radius, 0px);transition:.4s}:host .kage-textarea-wrapper .input-area .input{display:flex;flex-direction:column;width:100%}:host .kage-textarea-wrapper .input-area .input textarea{padding:var(--kage-textarea-padding-top, 9px) var(--kage-textarea-padding-right, 10px) var(--kage-textarea-padding-bottom, 9px) var(--kage-textarea-padding-left, 10px);color:var(--kage-textarea-text-color, inherit);font-family:var(--kage-textarea-font-family, inherit);background:transparent;resize:none}:host .kage-textarea-wrapper .input-area .icon{display:none}:host .kage-textarea-wrapper .input-area .icon:not(:empty){width:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}:host .kage-textarea-wrapper .input-area:focus-within{border-color:var(--kage-textarea-active-border-color, var(--color-primary, inherit))}:host .kage-textarea-wrapper .input-area:focus-within .icon.start,:host .kage-textarea-wrapper .input-area:focus-within .icon.end{border-color:var(--kage-textarea-active-border-color, var(--color-primary, inherit))}:host .kage-textarea-wrapper .validators{display:flex}:host .kage-textarea-wrapper .validators .left{width:100%;display:flex;flex-direction:column}:host .kage-textarea-wrapper .validators .left .hint{display:none}:host .kage-textarea-wrapper .validators .left .hint:not(:empty){display:block;margin-top:3px;color:var(--color-medium)}:host .kage-textarea-wrapper .validators .left .error{display:none}:host .kage-textarea-wrapper .validators .left .error:not(:empty){display:block;margin-top:3px}:host .kage-textarea-wrapper .validators .right:not(:empty){margin-left:10px;margin-top:3px}:host .kage-textarea-wrapper .validators .right .counter{display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:var(--color-medium)}:host .kage-textarea-wrapper .validators .right .counter span{margin-right:3px;color:var(--color-dark)}\n"] }]
        }], propDecorators: { textareaRef: [{
                type: ViewChild,
                args: ['textareaRef']
            }] } });

class KageToggle {
    color = input();
    disabled = model(false);
    checked = false;
    onChange = (value) => { };
    onTouched = () => { };
    writeValue(value) {
        this.checked = value;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(Boolean(isDisabled));
    }
    handleToggle(event) {
        this.checked = event.target.checked;
        this.onChange(this.checked);
        this.onTouched();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KageToggle, isStandalone: true, selector: "kage-toggle", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => KageToggle),
                multi: true,
            },
        ], ngImport: i0, template: "<label class=\"kage-toggle-wrapper\" [ngClass]=\"color() ?? ''\">\r\n    <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled()\" (change)=\"handleToggle($event)\">\r\n    <span class=\"k-toggle\"></span>\r\n    <p><ng-content></ng-content></p>\r\n</label>", styles: [":host{display:block}:host .kage-toggle-wrapper{display:flex;align-items:center;cursor:pointer}:host .kage-toggle-wrapper input{display:none}:host .kage-toggle-wrapper input:checked+span.k-toggle{border-color:var(--kage-toggle-active-color, var(--color-primary, transparent))}:host .kage-toggle-wrapper input:checked+span.k-toggle:after{transform:translateY(-50%) translate(var(--kage-toggle-indication-active-position, 19px));background:var(--kage-toggle-active-color, var(--color-primary, transparent))}:host .kage-toggle-wrapper input:disabled+span.k-toggle{pointer-events:none;opacity:var(--kage-toggle-disable-opacity, .6)}:host .kage-toggle-wrapper span.k-toggle{width:var(--kage-toggle-width, 35px);height:var(--kage-toggle-height, 16px);background:var(--kage-toggle-background, transparent);display:inline-block;border:var(--kage-toggle-border-width, 1px) solid var(--kage-toggle-inactive-color, var(--color-medium, transparent));border-radius:var(--kage-toggle-border-radius, 0px);position:relative;overflow:hidden}:host .kage-toggle-wrapper span.k-toggle:after{content:\"\";width:var(--kage-toggle-indicator-size, 10px);height:var(--kage-toggle-indicator-size, 10px);background:var(--kage-toggle-inactive-color, var(--color-medium, transparent));border-radius:var(--kage-toggle-border-radius, 0px);position:absolute;top:50%;left:var(--kage-toggle-indication-inactive-position, 3px);transform:translateY(-50%);transition:.4s}:host .kage-toggle-wrapper p{display:none}:host .kage-toggle-wrapper p:not(:empty){margin-left:10px;display:block}:host .kage-toggle-wrapper.primary{--kage-toggle-active-color: var(--color-primary)}:host .kage-toggle-wrapper.secondary{--kage-toggle-active-color: var(--color-secondary)}:host .kage-toggle-wrapper.tertiary{--kage-toggle-active-color: var(--color-tertiary)}:host .kage-toggle-wrapper.success{--kage-toggle-active-color: var(--color-success)}:host .kage-toggle-wrapper.danger{--kage-toggle-active-color: var(--color-danger)}:host .kage-toggle-wrapper.warning{--kage-toggle-active-color: var(--color-warning)}:host .kage-toggle-wrapper.info{--kage-toggle-active-color: var(--color-info)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageToggle, decorators: [{
            type: Component,
            args: [{ selector: 'kage-toggle', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => KageToggle),
                            multi: true,
                        },
                    ], template: "<label class=\"kage-toggle-wrapper\" [ngClass]=\"color() ?? ''\">\r\n    <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled()\" (change)=\"handleToggle($event)\">\r\n    <span class=\"k-toggle\"></span>\r\n    <p><ng-content></ng-content></p>\r\n</label>", styles: [":host{display:block}:host .kage-toggle-wrapper{display:flex;align-items:center;cursor:pointer}:host .kage-toggle-wrapper input{display:none}:host .kage-toggle-wrapper input:checked+span.k-toggle{border-color:var(--kage-toggle-active-color, var(--color-primary, transparent))}:host .kage-toggle-wrapper input:checked+span.k-toggle:after{transform:translateY(-50%) translate(var(--kage-toggle-indication-active-position, 19px));background:var(--kage-toggle-active-color, var(--color-primary, transparent))}:host .kage-toggle-wrapper input:disabled+span.k-toggle{pointer-events:none;opacity:var(--kage-toggle-disable-opacity, .6)}:host .kage-toggle-wrapper span.k-toggle{width:var(--kage-toggle-width, 35px);height:var(--kage-toggle-height, 16px);background:var(--kage-toggle-background, transparent);display:inline-block;border:var(--kage-toggle-border-width, 1px) solid var(--kage-toggle-inactive-color, var(--color-medium, transparent));border-radius:var(--kage-toggle-border-radius, 0px);position:relative;overflow:hidden}:host .kage-toggle-wrapper span.k-toggle:after{content:\"\";width:var(--kage-toggle-indicator-size, 10px);height:var(--kage-toggle-indicator-size, 10px);background:var(--kage-toggle-inactive-color, var(--color-medium, transparent));border-radius:var(--kage-toggle-border-radius, 0px);position:absolute;top:50%;left:var(--kage-toggle-indication-inactive-position, 3px);transform:translateY(-50%);transition:.4s}:host .kage-toggle-wrapper p{display:none}:host .kage-toggle-wrapper p:not(:empty){margin-left:10px;display:block}:host .kage-toggle-wrapper.primary{--kage-toggle-active-color: var(--color-primary)}:host .kage-toggle-wrapper.secondary{--kage-toggle-active-color: var(--color-secondary)}:host .kage-toggle-wrapper.tertiary{--kage-toggle-active-color: var(--color-tertiary)}:host .kage-toggle-wrapper.success{--kage-toggle-active-color: var(--color-success)}:host .kage-toggle-wrapper.danger{--kage-toggle-active-color: var(--color-danger)}:host .kage-toggle-wrapper.warning{--kage-toggle-active-color: var(--color-warning)}:host .kage-toggle-wrapper.info{--kage-toggle-active-color: var(--color-info)}\n"] }]
        }] });

class KageBytesPipe {
    transform(value, decimalPlaces = 2) {
        if (value == null || isNaN(value))
            return '0 Bytes';
        if (value === 0)
            return '0 Bytes';
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
        const i = Math.floor(Math.log(value) / Math.log(1024));
        const result = parseFloat((value / Math.pow(1024, i)).toFixed(decimalPlaces));
        return `${result} ${sizes[i]}`;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageBytesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageBytesPipe, isStandalone: true, name: "bytes" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageBytesPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'bytes',
                }]
        }] });

class KageCapitalizePipe {
    transform(value) {
        if (!value)
            return '';
        return value
            .split(' ')
            .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
            .join(' ');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCapitalizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageCapitalizePipe, isStandalone: true, name: "capitalize" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageCapitalizePipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'capitalize',
                }]
        }] });

class KageHighlightPipe {
    transform(text, search, tag = 'mark') {
        if (!search || !text)
            return text;
        const escapedSearch = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
        const regex = new RegExp(escapedSearch, 'gi');
        return text.replace(regex, (match) => `<${tag}>${match}</${tag}>`);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageHighlightPipe, isStandalone: true, name: "highlight" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageHighlightPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'highlight',
                }]
        }] });

class KageMaskPipe {
    transform(value, maskChar = '*', visibleStart = 0, visibleEnd = 0, preset) {
        if (!value || typeof value !== 'string')
            return '';
        // Handle presets
        if (preset) {
            switch (preset) {
                case 'email':
                    return this.maskEmail(value, maskChar);
                case 'phone':
                    return this.maskPhone(value, maskChar);
                case 'card':
                    return this.maskCard(value, maskChar);
            }
        }
        // Default masking logic
        const start = value.slice(0, visibleStart);
        const end = visibleEnd > 0 ? value.slice(-visibleEnd) : '';
        const maskedLength = value.length - (visibleStart + visibleEnd);
        const masked = maskChar.repeat(Math.max(maskedLength, 0));
        return `${start}${masked}${end}`;
    }
    maskEmail(email, maskChar) {
        const [local, domain] = email.split('@');
        if (!domain)
            return email;
        const visible = 2;
        const masked = maskChar.repeat(Math.max(local.length - visible, 0));
        return local.slice(0, visible) + masked + '@' + domain;
    }
    maskPhone(phone, maskChar) {
        const clean = phone.replace(/\D/g, '');
        if (clean.length < 10)
            return phone;
        return (clean.slice(0, 2) + maskChar.repeat(clean.length - 6) + clean.slice(-4));
    }
    maskCard(card, maskChar) {
        const clean = card.replace(/\D/g, '');
        if (clean.length < 12)
            return card;
        return maskChar.repeat(clean.length - 4) + clean.slice(-4);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageMaskPipe, isStandalone: true, name: "mask" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageMaskPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'mask',
                }]
        }] });

class KageOrdinatePipe {
    transform(value) {
        if (value == null || isNaN(value))
            return '';
        const suffix = this.getOrdinalSuffix(value);
        return `${value}${suffix}`;
    }
    getOrdinalSuffix(n) {
        const lastDigit = n % 10;
        const lastTwoDigits = n % 100;
        if (lastTwoDigits >= 11 && lastTwoDigits <= 13)
            return 'th';
        switch (lastDigit) {
            case 1:
                return 'st';
            case 2:
                return 'nd';
            case 3:
                return 'rd';
            default:
                return 'th';
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageOrdinatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageOrdinatePipe, isStandalone: true, name: "ordinate" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageOrdinatePipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'ordinate',
                }]
        }] });

class KageRepeatPipe {
    transform(value, count = 1) {
        if (!value || count <= 0)
            return '';
        return value.repeat(count);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRepeatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageRepeatPipe, isStandalone: true, name: "repeat" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageRepeatPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'repeat',
                }]
        }] });

class KageSlugifyPipe {
    transform(value) {
        if (!value)
            return '';
        return value
            .toLowerCase()
            .trim()
            .replace(/[\s_]+/g, '-') // spaces/underscores → dash
            .replace(/[^\w\-]+/g, '') // remove non-word characters
            .replace(/\-\-+/g, '-') // collapse multiple dashes
            .replace(/^-+|-+$/g, ''); // trim leading/trailing dash
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageSlugifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageSlugifyPipe, isStandalone: true, name: "slugify" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageSlugifyPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'slugify',
                }]
        }] });

class KageTimeAgoPipe {
    transform(value) {
        const now = new Date();
        const date = new Date(value);
        const diff = Math.floor((now.getTime() - date.getTime()) / 1000); // seconds
        if (isNaN(diff))
            return '';
        const units = [
            [60, 'second'],
            [60, 'minute'],
            [24, 'hour'],
            [7, 'day'],
            [4.34524, 'week'],
            [12, 'month'],
            [Infinity, 'year'],
        ];
        let i = 0;
        let count = diff;
        while (i < units.length && count >= units[i][0]) {
            count = Math.floor(count / units[i][0]);
            i++;
        }
        const unit = units[i][1];
        return `${count} ${unit}${count !== 1 ? 's' : ''} ago`;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageTimeAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageTimeAgoPipe, isStandalone: true, name: "timeAgo" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageTimeAgoPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'timeAgo',
                }]
        }] });

class KageTruncatePipe {
    transform(value, limit = 20, suffix = '...') {
        if (!value || typeof value !== 'string')
            return '';
        if (value.length <= limit)
            return value;
        return value.slice(0, limit) + suffix;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageTruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: KageTruncatePipe, isStandalone: true, name: "truncate" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageTruncatePipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'truncate',
                }]
        }] });

class KageAlertHost {
    options = model();
    result = output();
    close = output();
    inputValues = {};
    ngOnInit() {
        // Pre-fill default input values
        this.options()?.inputs?.forEach((input) => {
            this.inputValues[input.name] = input.value ?? '';
        });
    }
    async handle(button) {
        if (button.handler) {
            await button.handler(this.inputValues); // pass input values
        }
        this.result.emit({ values: this.inputValues, button });
        this.close.emit();
    }
    onBackdrop() {
        if (this.options()?.dismissible) {
            this.result.emit({ values: this.inputValues, button: null });
            this.close.emit();
        }
    }
    trackByIndex = (index) => index;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAlertHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageAlertHost, isStandalone: true, selector: "kage-alert-host", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { options: "optionsChange", result: "result", close: "close" }, ngImport: i0, template: "<!-- Backdrop -->\r\n<div class=\"kage-alert-backdrop\" (click)=\"onBackdrop()\"></div>\r\n\r\n<!-- Alert Box -->\r\n<div class=\"kage-alert-box\" role=\"alertdialog\" aria-modal=\"true\">\r\n  <!-- Title -->\r\n   @if (options()?.title) {\r\n    <h3>{{ options()?.title }}</h3>\r\n   }\r\n\r\n  <!-- Message -->\r\n  <p class=\"kage-alert-message\">{{ options()?.message }}</p>\r\n\r\n  <!-- Inputs -->\r\n   @if (options()?.inputs?.length) {\r\n    <form #form=\"ngForm\" class=\"inputs\">\r\n        @for (input of options()?.inputs; track trackByIndex($index)) {\r\n            <kage-input\r\n                [label]=\"input.label ?? ''\"\r\n                [type]=\"input.type || 'text'\"\r\n                [placeholder]=\"input.placeholder ?? ''\"\r\n                [name]=\"input.name\"\r\n                [(ngModel)]=\"inputValues[input.name]\"\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n            ></kage-input>\r\n        }\r\n    </form>\r\n   }\r\n\r\n  <!-- Action Buttons -->\r\n   @if (options()?.buttons?.length) {\r\n    <div class=\"actions\">\r\n        @for (btn of options()?.buttons; track trackByIndex($index)) {\r\n            <kage-button\r\n                [disabled]=\"btn.disabled ?? false\"\r\n                [class.primary]=\"btn.primary\"\r\n                [color]=\"btn.color ?? 'primary'\"\r\n                [fill]=\"options()?.inputs?.length ? 'outline' : 'clear'\"\r\n                (click)=\"handle(btn)\"\r\n            >\r\n            {{ btn.label }}\r\n            </kage-button>\r\n        }\r\n    </div>\r\n   }\r\n</div>\r\n", styles: [":host{display:contents}:host .kage-alert-backdrop{position:fixed;inset:0;background:rgba(var(--color-light-rgb),.4);z-index:9998}:host .kage-alert-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:var(--kage-alert-content-padding, 15px);background:var(--color-background);border:var(--kage-alert-border-width, 1px) solid var(--kage-alert-border-color, var(--color-medium));z-index:9999;opacity:0;animation:fadeIn .2s forwards;min-width:280px}:host .kage-alert-box h3:not(:empty){margin-bottom:5px}:host .kage-alert-box .kage-alert-message{color:var(--kage-alert-message-color, var(--color-medium))}:host .kage-alert-box .inputs{display:flex;flex-direction:column;gap:10px;margin:10px 0 20px}:host .kage-alert-box .actions{display:flex;justify-content:flex-end;gap:8px}:host .kage-alert-box:not(:has(.inputs)) .actions{margin-top:20px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: KageButton, selector: "kage-button", inputs: ["cssClass", "type", "color", "disabled", "loading", "iconRight", "ariaLabel", "fill"], outputs: ["disabledChange"] }, { kind: "component", type: KageInput, selector: "kage-input", inputs: ["label", "name", "type", "placeholder", "disabled", "readonly", "autoFocus", "debounce", "autocomplete", "cssClass", "maxLength"], outputs: ["disabledChange", "valueChanged"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAlertHost, decorators: [{
            type: Component,
            args: [{ selector: 'kage-alert-host', imports: [FormsModule, KageButton, KageInput], template: "<!-- Backdrop -->\r\n<div class=\"kage-alert-backdrop\" (click)=\"onBackdrop()\"></div>\r\n\r\n<!-- Alert Box -->\r\n<div class=\"kage-alert-box\" role=\"alertdialog\" aria-modal=\"true\">\r\n  <!-- Title -->\r\n   @if (options()?.title) {\r\n    <h3>{{ options()?.title }}</h3>\r\n   }\r\n\r\n  <!-- Message -->\r\n  <p class=\"kage-alert-message\">{{ options()?.message }}</p>\r\n\r\n  <!-- Inputs -->\r\n   @if (options()?.inputs?.length) {\r\n    <form #form=\"ngForm\" class=\"inputs\">\r\n        @for (input of options()?.inputs; track trackByIndex($index)) {\r\n            <kage-input\r\n                [label]=\"input.label ?? ''\"\r\n                [type]=\"input.type || 'text'\"\r\n                [placeholder]=\"input.placeholder ?? ''\"\r\n                [name]=\"input.name\"\r\n                [(ngModel)]=\"inputValues[input.name]\"\r\n                [ngModelOptions]=\"{ standalone: true }\"\r\n            ></kage-input>\r\n        }\r\n    </form>\r\n   }\r\n\r\n  <!-- Action Buttons -->\r\n   @if (options()?.buttons?.length) {\r\n    <div class=\"actions\">\r\n        @for (btn of options()?.buttons; track trackByIndex($index)) {\r\n            <kage-button\r\n                [disabled]=\"btn.disabled ?? false\"\r\n                [class.primary]=\"btn.primary\"\r\n                [color]=\"btn.color ?? 'primary'\"\r\n                [fill]=\"options()?.inputs?.length ? 'outline' : 'clear'\"\r\n                (click)=\"handle(btn)\"\r\n            >\r\n            {{ btn.label }}\r\n            </kage-button>\r\n        }\r\n    </div>\r\n   }\r\n</div>\r\n", styles: [":host{display:contents}:host .kage-alert-backdrop{position:fixed;inset:0;background:rgba(var(--color-light-rgb),.4);z-index:9998}:host .kage-alert-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:var(--kage-alert-content-padding, 15px);background:var(--color-background);border:var(--kage-alert-border-width, 1px) solid var(--kage-alert-border-color, var(--color-medium));z-index:9999;opacity:0;animation:fadeIn .2s forwards;min-width:280px}:host .kage-alert-box h3:not(:empty){margin-bottom:5px}:host .kage-alert-box .kage-alert-message{color:var(--kage-alert-message-color, var(--color-medium))}:host .kage-alert-box .inputs{display:flex;flex-direction:column;gap:10px;margin:10px 0 20px}:host .kage-alert-box .actions{display:flex;justify-content:flex-end;gap:8px}:host .kage-alert-box:not(:has(.inputs)) .actions{margin-top:20px}@keyframes fadeIn{to{opacity:1}}\n"] }]
        }] });

class KageAlertCtrl {
    appRef = inject(ApplicationRef);
    injector = inject(EnvironmentInjector);
    compRef = null;
    show(options) {
        if (this.compRef)
            this.close();
        this.compRef = createComponent(KageAlertHost, {
            environmentInjector: this.injector,
        });
        const instance = this.compRef.instance;
        instance.options.set(options);
        const promise = new Promise((resolve) => {
            instance.result.subscribe(resolve);
            instance.close.subscribe(() => this.close());
        });
        this.appRef.attachView(this.compRef.hostView);
        const domElem = this.compRef.hostView.rootNodes[0];
        document.body.appendChild(domElem);
        if (!options.buttons?.length) {
            setTimeout(() => {
                instance.result.emit({ values: {}, button: null });
                instance.close.emit();
            }, 3000);
        }
        return promise;
    }
    close() {
        if (this.compRef) {
            this.appRef.detachView(this.compRef.hostView);
            this.compRef.destroy();
            this.compRef = null;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAlertCtrl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAlertCtrl, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageAlertCtrl, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

class KageDrawerHost {
    content;
    position = 'left';
    width = '300px';
    mode = 'template';
    dynamicComponentType;
    dynamicInputs = {};
    dynamicOutputs = {};
    closed = new EventEmitter();
    vcRef;
    cmpRef;
    isOpen = false;
    ngAfterViewInit() {
        setTimeout(() => {
            this.isOpen = true;
        });
        if (this.mode === 'component' && this.dynamicComponentType) {
            this.vcRef.clear();
            this.cmpRef = this.vcRef.createComponent(this.dynamicComponentType);
            Object.entries(this.dynamicInputs).forEach(([k, v]) => (this.cmpRef.instance[k] = v));
            Object.entries(this.dynamicOutputs).forEach(([key, fn]) => {
                if (this.cmpRef.instance[key]?.subscribe) {
                    this.cmpRef.instance[key].subscribe(fn);
                }
            });
        }
    }
    close() {
        this.isOpen = false;
        setTimeout(() => this.closed.emit(), 300);
    }
    onEsc(event) {
        if (event.key === 'Escape')
            this.close();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageDrawerHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KageDrawerHost, isStandalone: true, selector: "kage-drawer-host", inputs: { content: "content", position: "position", width: "width", mode: "mode", dynamicComponentType: "dynamicComponentType", dynamicInputs: "dynamicInputs", dynamicOutputs: "dynamicOutputs" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"k-drawer-backdrop\" (click)=\"close()\" tabindex=\"-1\" (keydown)=\"onEsc($event)\"></div>\r\n\r\n<aside\r\n  class=\"k-drawer\"\r\n  [class.left]=\"position === 'left'\"\r\n  [class.right]=\"position === 'right'\"\r\n  [class.open]=\"isOpen\"\r\n  [style.width]=\"width\"\r\n>\r\n    @if (mode === 'template') {\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    } @else if (mode === 'component') {\r\n        <ng-container #vc></ng-container>\r\n    }\r\n</aside>", styles: [":host{position:fixed;inset:0;z-index:1100;pointer-events:none}:host .k-drawer-backdrop{position:absolute;inset:var(--k-drawer-backdrop-inset);background:var(--k-drawer-backdrop-background);pointer-events:auto;opacity:var(--k-drawer-backdrop-opacity);animation:fadeIn .3s forwards}:host .k-drawer{position:absolute;top:0;bottom:0;background:var(--k-drawer-background);box-shadow:var(--k-drawer-box-shadow);transition:transform .3s ease;overflow:auto;pointer-events:auto}:host .k-drawer.left{left:0;transform:translate(-100%)}:host .k-drawer.right{right:0;transform:translate(100%)}:host .k-drawer.open{transform:translate(0)}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageDrawerHost, decorators: [{
            type: Component,
            args: [{ selector: 'kage-drawer-host', imports: [NgTemplateOutlet], template: "<div class=\"k-drawer-backdrop\" (click)=\"close()\" tabindex=\"-1\" (keydown)=\"onEsc($event)\"></div>\r\n\r\n<aside\r\n  class=\"k-drawer\"\r\n  [class.left]=\"position === 'left'\"\r\n  [class.right]=\"position === 'right'\"\r\n  [class.open]=\"isOpen\"\r\n  [style.width]=\"width\"\r\n>\r\n    @if (mode === 'template') {\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n    } @else if (mode === 'component') {\r\n        <ng-container #vc></ng-container>\r\n    }\r\n</aside>", styles: [":host{position:fixed;inset:0;z-index:1100;pointer-events:none}:host .k-drawer-backdrop{position:absolute;inset:var(--k-drawer-backdrop-inset);background:var(--k-drawer-backdrop-background);pointer-events:auto;opacity:var(--k-drawer-backdrop-opacity);animation:fadeIn .3s forwards}:host .k-drawer{position:absolute;top:0;bottom:0;background:var(--k-drawer-background);box-shadow:var(--k-drawer-box-shadow);transition:transform .3s ease;overflow:auto;pointer-events:auto}:host .k-drawer.left{left:0;transform:translate(-100%)}:host .k-drawer.right{right:0;transform:translate(100%)}:host .k-drawer.open{transform:translate(0)}@keyframes fadeIn{to{opacity:1}}\n"] }]
        }], propDecorators: { content: [{
                type: Input
            }], position: [{
                type: Input
            }], width: [{
                type: Input
            }], mode: [{
                type: Input
            }], dynamicComponentType: [{
                type: Input
            }], dynamicInputs: [{
                type: Input
            }], dynamicOutputs: [{
                type: Input
            }], closed: [{
                type: Output
            }], vcRef: [{
                type: ViewChild,
                args: ['vc', { read: ViewContainerRef }]
            }] } });

class KageDrawerCtrl {
    stack = [];
    envInjector = inject(EnvironmentInjector);
    injector = inject(Injector);
    appRef = inject(ApplicationRef);
    document = inject(DOCUMENT);
    openFromTemplate(content, config) {
        this.createDrawer(content, undefined, config);
    }
    openFromComponent(component, config) {
        this.createDrawer(undefined, { component, config });
    }
    close() {
        const ref = this.stack.pop();
        if (this.stack.length === 0) {
            this.document.body.classList.remove('drawer-open');
        }
        ref?.destroy();
    }
    closeAll() {
        this.stack.forEach((ref) => ref.destroy());
        this.stack = [];
        this.document.body.classList.remove('drawer-open');
    }
    createDrawer(tpl, dynamicComponent, templateConfig) {
        const cmpRef = createComponent(KageDrawerHost, {
            environmentInjector: this.envInjector,
            elementInjector: this.injector,
        });
        cmpRef.location.nativeElement.style.position = 'fixed';
        cmpRef.location.nativeElement.style.inset = '0';
        cmpRef.location.nativeElement.style.zIndex = `${1100 + this.stack.length * 10}`;
        this.document.body.appendChild(cmpRef.location.nativeElement);
        this.appRef.attachView(cmpRef.hostView);
        const instance = cmpRef.instance;
        if (tpl) {
            instance.content = tpl;
            instance.mode = 'template';
            instance.position = templateConfig?.position ?? 'left';
            instance.width = templateConfig?.width ?? '300px';
        }
        else if (dynamicComponent) {
            const { component, config } = dynamicComponent;
            instance.dynamicComponentType = component;
            instance.mode = 'component';
            instance.position = config?.position ?? 'left';
            instance.width = config?.width ?? '300px';
            instance.dynamicInputs = config?.inputs ?? {};
            instance.dynamicOutputs = config?.outputs ?? {};
        }
        instance.closed.subscribe(() => this.close());
        this.stack.push(cmpRef);
        this.document.body.classList.add('drawer-open');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageDrawerCtrl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageDrawerCtrl, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageDrawerCtrl, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

class KageModalHost {
    document;
    container;
    closed = output();
    activeComponentRef;
    constructor(document) {
        this.document = document;
    }
    ngAfterViewInit() {
        this.document.body.style.overflow = 'hidden';
    }
    close() {
        this.closed.emit();
    }
    onBackdropClick(event) {
        if (event.target.classList.contains('modal-backdrop')) {
            this.close();
        }
    }
    inject(compRef) {
        this.container.clear();
        this.activeComponentRef = compRef;
        this.container.insert(compRef.hostView);
    }
    ngOnDestroy() {
        this.container.clear();
        this.document.body.style.overflow = '';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageModalHost, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: KageModalHost, isStandalone: true, selector: "kage-modal-host", outputs: { closed: "closed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
    <div class="k-modal-backdrop" (click)="onBackdropClick($event)">
      <div class="k-modal-content" tabindex="0">
        <button class="k-modal-close-btn" (click)="close()">&times;</button>
        <ng-container #container></ng-container>
      </div>
    </div>
  `, isInline: true, styles: [".k-modal-backdrop{position:fixed;inset:0;background:rgba(var(--color-light-rgb),.5);display:grid;place-items:center;z-index:1000}.k-modal-backdrop .k-modal-content{background:var(--color-background);position:relative;width:600px;height:520px;border:var(--border-width, 1px) solid var(--border-color)}.k-modal-backdrop .k-modal-content .k-modal-close-btn{position:absolute;top:-7px;right:-10px;background:var(--color-background);border:var(--border-width, 1px) solid var(--border-color);width:30px;height:30px;color:var(--color-dark);border-radius:50%;cursor:pointer}@media only screen and (max-width: 622px){.k-modal-content{height:96vh!important;width:96vw!important}}\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageModalHost, decorators: [{
            type: Component,
            args: [{ selector: 'kage-modal-host', template: `
    <div class="k-modal-backdrop" (click)="onBackdropClick($event)">
      <div class="k-modal-content" tabindex="0">
        <button class="k-modal-close-btn" (click)="close()">&times;</button>
        <ng-container #container></ng-container>
      </div>
    </div>
  `, imports: [], styles: [".k-modal-backdrop{position:fixed;inset:0;background:rgba(var(--color-light-rgb),.5);display:grid;place-items:center;z-index:1000}.k-modal-backdrop .k-modal-content{background:var(--color-background);position:relative;width:600px;height:520px;border:var(--border-width, 1px) solid var(--border-color)}.k-modal-backdrop .k-modal-content .k-modal-close-btn{position:absolute;top:-7px;right:-10px;background:var(--color-background);border:var(--border-width, 1px) solid var(--border-color);width:30px;height:30px;color:var(--color-dark);border-radius:50%;cursor:pointer}@media only screen and (max-width: 622px){.k-modal-content{height:96vh!important;width:96vw!important}}\n"] }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }], propDecorators: { container: [{
                type: ViewChild,
                args: ['container', { read: ViewContainerRef, static: true }]
            }] } });

class KageModalCtrl {
    hostRef;
    injector = inject(Injector);
    appRef = inject(ApplicationRef);
    envInjector = inject(EnvironmentInjector);
    document = inject(DOCUMENT);
    open(component, componentInputs) {
        if (this.hostRef)
            this.close();
        this.hostRef = createComponent(KageModalHost, {
            environmentInjector: this.envInjector,
            elementInjector: this.injector,
        });
        this.hostRef.instance.closed.subscribe(() => this.close());
        const compRef = createComponent(component, {
            environmentInjector: this.envInjector,
            elementInjector: this.injector,
        });
        if (componentInputs) {
            Object.assign(compRef.instance, componentInputs);
        }
        this.hostRef.instance.inject(compRef);
        this.document.body.appendChild(this.hostRef.location.nativeElement);
        this.appRef.attachView(this.hostRef.hostView);
        return compRef;
    }
    close() {
        if (this.hostRef) {
            this.appRef.detachView(this.hostRef.hostView);
            this.hostRef.destroy();
            this.hostRef = undefined;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageModalCtrl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageModalCtrl, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KageModalCtrl, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root',
                }]
        }] });

class KagePopoverRef {
    closed$ = new Subject();
    componentRef;
    viewRef;
    close(result) {
        this.componentRef?.destroy();
        this.viewRef?.destroy();
        this.closed$.next(result);
        this.closed$.complete();
    }
    afterClosed() {
        return this.closed$.asObservable();
    }
    _setComponent(componentRef) {
        this.componentRef = componentRef;
    }
    _setView(viewRef) {
        this.viewRef = viewRef;
    }
}

class KagePopoverCtrl {
    activePopover;
    outsideClickHandler;
    appRef = inject(ApplicationRef);
    envInjector = inject(EnvironmentInjector);
    document = inject(DOCUMENT);
    open(config) {
        const popoverRef = new KagePopoverRef();
        let element;
        // Handle TemplateRef
        if (config.content instanceof TemplateRef) {
            const viewRef = config.content.createEmbeddedView({
                $implicit: config.data,
                popoverRef,
            });
            this.appRef.attachView(viewRef);
            element = viewRef.rootNodes[0];
            popoverRef._setView(viewRef);
        }
        else {
            const componentRef = createComponent(config.content, {
                environmentInjector: this.envInjector,
            });
            if (config.data) {
                Object.assign(componentRef.instance, config.data);
            }
            if ('popoverRef' in componentRef.instance) {
                componentRef.instance.popoverRef = popoverRef;
            }
            this.appRef.attachView(componentRef.hostView);
            element = componentRef.hostView
                .rootNodes[0];
            popoverRef._setComponent(componentRef);
        }
        // Add to DOM
        element.style.position = 'absolute';
        element.style.zIndex = '9999';
        element.style.opacity = '0';
        element.style.transition = 'opacity 150ms ease';
        this.disablePageScroll();
        this.document.body.appendChild(element);
        this.activePopover = element;
        setTimeout(() => {
            requestAnimationFrame(() => {
                const { top, left } = this.calculateSmartPosition(config.trigger, element, config.offsetX ?? 8, config.offsetY ?? 8);
                element.style.top = `${top}px`;
                element.style.left = `${left}px`;
                element.style.opacity = '1';
            });
            this.enablePageScroll();
        });
        // Optional: Close on outside click
        if (config.closeOnOutsideClick) {
            this.outsideClickHandler = (e) => {
                if (this.activePopover &&
                    !this.activePopover.contains(e.target)) {
                    popoverRef.close();
                }
            };
            this.document.addEventListener('mousedown', this.outsideClickHandler);
        }
        popoverRef.afterClosed().subscribe(() => this.destroyPopover());
        return popoverRef;
    }
    calculateSmartPosition(trigger, popoverEl, offsetX, offsetY) {
        const vw = window.innerWidth;
        const vh = window.innerHeight;
        const spacing = 8;
        const pw = popoverEl.offsetWidth;
        const ph = popoverEl.offsetHeight;
        let tx = 0, ty = 0, tw = 0, th = 0;
        if (trigger instanceof MouseEvent) {
            tx = trigger.clientX;
            ty = trigger.clientY;
        }
        else if (trigger instanceof HTMLElement) {
            const rect = trigger.getBoundingClientRect();
            tx = rect.left;
            ty = rect.top;
            tw = rect.width;
            th = rect.height;
        }
        // Determine edge proximity (25% margins)
        const edgeThresholdX = vw * 0.25;
        const edgeThresholdY = vh * 0.25;
        const nearLeft = tx < edgeThresholdX;
        const nearRight = tx > vw - edgeThresholdX;
        const nearTop = ty < edgeThresholdY;
        const nearBottom = ty > vh - edgeThresholdY;
        // Default: right + bottom
        let left = tx + tw + offsetX;
        let top = ty + th + offsetY;
        if (nearRight) {
            left = tx - pw - offsetX;
            console.log('Position left', left);
        }
        else if (nearLeft) {
            left = tx + tw + offsetX;
        }
        if (nearBottom) {
            top = ty - ph - offsetY;
        }
        else if (nearTop) {
            top = ty + th + offsetY;
        }
        // Clamp inside viewport
        left = Math.max(spacing, Math.min(left, vw - pw - spacing));
        top = Math.max(spacing, Math.min(top, vh - ph - spacing));
        return { top, left };
    }
    destroyPopover() {
        if (this.activePopover?.parentElement) {
            this.activePopover.parentElement.removeChild(this.activePopover);
        }
        this.activePopover = undefined;
        if (this.outsideClickHandler) {
            this.document.removeEventListener('mousedown', this.outsideClickHandler);
            this.outsideClickHandler = undefined;
        }
    }
    disablePageScroll() {
        this.document.body.style.overflow = 'hidden';
    }
    enablePageScroll() {
        this.document.body.style.overflow = '';
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KagePopoverCtrl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KagePopoverCtrl, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KagePopoverCtrl, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

// ============= COMPONENTS =================== //

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

export { KageAccordion, KageAlertCtrl, KageAvatar, KageBadge, KageBreadCrumb, KageBreadCrumbs, KageButton, KageBytesPipe, KageCalendar, KageCapitalizePipe, KageCard, KageCheckbox, KageChip, KageCol, KageCopyDirective, KageDrawerCtrl, KageFab, KageFabItem, KageGrid, KageHighlightPipe, KageIcon, KageImageFallbackDirective, KageImageViewDirective, KageInput, KageMaskPipe, KageModalCtrl, KageOption, KageOrdinatePipe, KagePopoverCtrl, KageProgressBar, KageRadio, KageRadioGroup, KageRange, KageRepeatPipe, KageResizeDirective, KageRippleDirective, KageRow, KageSearchbar, KageSegment, KageSelect, KageSlugifyPipe, KageTextarea, KageTimeAgoPipe, KageToastCtrl, KageToggle, KageTruncatePipe };
//# sourceMappingURL=kage-ui.mjs.map