circletone/fesm2022/circletone.mjs

import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Pipe, Injectable, inject, DestroyRef, ContentChildren, Directive, HostListener, forwardRef, ChangeDetectorRef, signal, ViewChild } from '@angular/core';
import { NgClass, AsyncPipe, KeyValuePipe, JsonPipe } from '@angular/common';
import * as i1 from '@angular/platform-browser';
import { RouterLink } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { withLatestFrom, debounceTime, skip, BehaviorSubject, filter, Subject } from 'rxjs';
import * as i1$1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, ControlContainer, FormGroupDirective } from '@angular/forms';

/**
 * Used for some components to determine colouring of various elements. Relates to CSS classes to facilitate dev's life
 */
var TypeEnum;
(function (TypeEnum) {
    TypeEnum["PRIMARY"] = "primary";
    TypeEnum["SECONDARY"] = "secondary";
    TypeEnum["TERTIARY"] = "tertiary";
    TypeEnum["SUCCESS"] = "success";
    TypeEnum["WARNING"] = "warning";
    TypeEnum["ERROR"] = "error";
})(TypeEnum || (TypeEnum = {}));

/**
 * Used for some components to determine sizing of various elements. Relates to 'tailwind' classes to facilitate dev's life
 */
var SizeEnum;
(function (SizeEnum) {
    /** extra-small */
    SizeEnum["XS"] = "xs";
    /** small */
    SizeEnum["SM"] = "sm";
    /** default size */
    SizeEnum["BASE"] = "base";
    /** large */
    SizeEnum["LG"] = "lg";
    /** extra-large */
    SizeEnum["XL"] = "xl";
})(SizeEnum || (SizeEnum = {}));

/**
 * Used for some components to determine the variance of diverse elements.
 */
var VariantEnum;
(function (VariantEnum) {
    /** produces a non-styled element */
    VariantEnum["BLANK"] = "blank";
    /** produces a solid element */
    VariantEnum["SOLID"] = "solid";
    /** produces a bordered element */
    VariantEnum["OUTLINE"] = "outline";
    /** produces a solid-gradient element */
    VariantEnum["GRADIENT"] = "gradient";
})(VariantEnum || (VariantEnum = {}));

class IconComponent {
    constructor() {
        this.icon = '';
        this.fill = 'currentColor';
        this.strokeWidth = 1.5;
        this.strokeColor = 'currentColor';
        this.size = SizeEnum.BASE;
        this.variant = VariantEnum.OUTLINE;
    }
    ngOnInit() {
        this.strokeColor = this.getFormattedColor(this.strokeColor);
        this.fill = this.getFormattedColor(this.fill);
    }
    get iconPath() {
        const icon = this.variant === VariantEnum.SOLID ? `${this.icon}-solid` : this.icon;
        return `/assets/icons.svg#${icon}`;
    }
    getFormattedColor(color) {
        if (color.startsWith('--')) {
            const rgbValue = getComputedStyle(document.documentElement).getPropertyValue(color).trim();
            return `rgb(${rgbValue})`;
        }
        return color;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: IconComponent, isStandalone: true, selector: "ct-icon", inputs: { icon: "icon", fill: "fill", strokeWidth: "strokeWidth", strokeColor: "strokeColor", size: "size", variant: "variant" }, ngImport: i0, template: "<svg\n  [attr.fill]=\"variant === 'solid' ? fill : 'none'\"\n  [attr.stroke-width]=\"variant === 'outline' ? strokeWidth : 0\"\n  [attr.stroke]=\"strokeColor\"\n  class=\"flex\"\n  [class.size-3]=\"size === 'xs'\"\n  [class.size-4]=\"size === 'sm'\"\n  [class.size-5]=\"size === 'base'\"\n  [class.size-6]=\"size === 'lg'\"\n  [class.size-8]=\"size === 'xl'\">\n  <use [attr.xlink:href]=\"iconPath\"></use>\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-icon', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  [attr.fill]=\"variant === 'solid' ? fill : 'none'\"\n  [attr.stroke-width]=\"variant === 'outline' ? strokeWidth : 0\"\n  [attr.stroke]=\"strokeColor\"\n  class=\"flex\"\n  [class.size-3]=\"size === 'xs'\"\n  [class.size-4]=\"size === 'sm'\"\n  [class.size-5]=\"size === 'base'\"\n  [class.size-6]=\"size === 'lg'\"\n  [class.size-8]=\"size === 'xl'\">\n  <use [attr.xlink:href]=\"iconPath\"></use>\n</svg>\n" }]
        }], propDecorators: { icon: [{
                type: Input
            }], fill: [{
                type: Input
            }], strokeWidth: [{
                type: Input
            }], strokeColor: [{
                type: Input
            }], size: [{
                type: Input
            }], variant: [{
                type: Input
            }] } });

/**
 * This is the ButtonComponent, widely used among other components
 */
class ButtonComponent {
    constructor() {
        this.iconPosition = 'left';
        this.fullSize = false;
        this.size = 'base';
        this.type = 'primary';
        this.variant = 'solid';
    }
    get cssClassmap() {
        return {
            [`text-on-${this.type} dark:text-on-${this.type}-dark`]: this.variant === VariantEnum.SOLID || this.variant === VariantEnum.GRADIENT,
            [`text-neutral-950 dark:text-neutral-50 hover:text-${this.type}-dark dark:hover:text-${this.type}`]: this.variant === VariantEnum.GRADIENT || this.variant === VariantEnum.BLANK,
            [`bg-${this.type} dark:bg-${this.type}-dark hover:bg-${this.type}-variant hover:dark:bg-${this.type}-variant-dark`]: this.variant === VariantEnum.SOLID,
            [`from-${this.type}-variant from-30% to-${this.type} bg-gradient-to-tl hover:bg-gradient-to-br dark:from-${this.type}-variant-dark dark:to-${this.type}-dark`]: this.variant === VariantEnum.GRADIENT,
            [`border border-2 border-${this.type} hover:border-${this.type}-variant dark:border-${this.type}-dark`]: this.variant === VariantEnum.OUTLINE,
            'px-3 py-2': (this.size === SizeEnum.XS || this.size === SizeEnum.SM) && !this.hasJustIcon(),
            'px-5 py-2.5': (this.size === SizeEnum.BASE || this.size === SizeEnum.LG) && !this.hasJustIcon(),
            'px-6 py-3': this.size === SizeEnum.XL && !this.hasJustIcon(),
            'p-2': this.hasJustIcon() && this.variant !== 'blank',
            'text-xs': this.size === SizeEnum.XS,
            'text-sm': this.size === SizeEnum.SM || this.size === SizeEnum.BASE,
            'text-base': this.size === SizeEnum.LG || this.size === SizeEnum.XL,
            'w-full': this.fullSize,
        };
    }
    hasJustIcon() {
        return this.icon !== undefined && this.text === undefined;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: ButtonComponent, isStandalone: true, selector: "ct-button", inputs: { text: "text", icon: "icon", iconPosition: "iconPosition", fullSize: "fullSize", size: "size", type: "type", variant: "variant" }, ngImport: i0, template: "<button class=\"flex flex-row items-center justify-center gap-1.5 rounded-md font-medium\" [ngClass]=\"cssClassmap\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"size\" [icon]=\"icon\" />\n  }\n  @if (text) {\n    <span [class.order-first]=\"iconPosition === 'right'\">\n      {{ text }}\n    </span>\n  }\n</button>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-button', standalone: true, imports: [NgClass, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"flex flex-row items-center justify-center gap-1.5 rounded-md font-medium\" [ngClass]=\"cssClassmap\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"size\" [icon]=\"icon\" />\n  }\n  @if (text) {\n    <span [class.order-first]=\"iconPosition === 'right'\">\n      {{ text }}\n    </span>\n  }\n</button>\n" }]
        }], propDecorators: { text: [{
                type: Input
            }], icon: [{
                type: Input
            }], iconPosition: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], size: [{
                type: Input
            }], type: [{
                type: Input
            }], variant: [{
                type: Input
            }] } });

/**
 * The alert component is responsible to show alerts for diverse elements. Including `FormErrorComponent` among others.
 */
class AlertComponent {
    constructor() {
        this.dismissable = false;
        this.fullSize = true;
        this.text = '';
        this.type = TypeEnum.PRIMARY;
        this.variant = VariantEnum.SOLID;
        this.withIcon = true;
        this.dismiss = new EventEmitter();
    }
    get icon() {
        switch (this.type) {
            case TypeEnum.PRIMARY:
            case TypeEnum.SECONDARY:
                return 'information-circle';
            case TypeEnum.ERROR:
                return 'exclamation-triangle';
            case TypeEnum.WARNING:
                return 'exclamation-circle';
            case TypeEnum.SUCCESS:
                return 'check-circle';
            default:
                return '';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AlertComponent, isStandalone: true, selector: "ct-alert", inputs: { dismissable: "dismissable", fullSize: "fullSize", text: "text", type: "type", variant: "variant", withIcon: "withIcon" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div\n  class=\"mb-4 flex flex-row items-center gap-1 rounded-lg\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\"\n  role=\"alert\"\n  [ngClass]=\"{\n    'bg-surface-variant dark:bg-surface-variant-dark text-on-surface dark:text-on-surface-dark':\n      type === 'primary' && variant === 'solid',\n    'bg-warning dark:bg-warning-dark text-on-warning dark:text-on-warning-dark':\n      type === 'warning' && variant === 'solid',\n    'bg-error dark:bg-error-dark text-on-error dark:text-on-error-dark': type === 'error' && variant === 'solid',\n    'bg-success dark:bg-success-dark text-on-success dark:text-on-success-dark':\n      type === 'success' && variant === 'solid',\n    border: variant === 'outline',\n    'border-surface-variant dark:border-surface-variant-dark': type === 'primary' && variant === 'outline',\n    'border-warning dark:border-warning-dark': type === 'warning' && variant === 'outline',\n    'border-error dark:border-error-dark': type === 'error' && variant === 'outline',\n    'border-success dark:border-success-dark': type === 'success' && variant === 'outline',\n    'px-4 py-2': variant !== 'blank'\n  }\">\n  @if (withIcon) {\n    <ct-icon [icon]=\"this.icon\" />\n  }\n  <span class=\"grow text-sm font-semibold\">{{ text }}</span>\n  @if (dismissable) {\n    <ct-button icon=\"x-mark\" size=\"sm\" variant=\"blank\" [type]=\"type\" (click)=\"dismiss.emit()\" />\n  }\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "component", type: ButtonComponent, selector: "ct-button", inputs: ["text", "icon", "iconPosition", "fullSize", "size", "type", "variant"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AlertComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-alert', standalone: true, imports: [IconComponent, ButtonComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"mb-4 flex flex-row items-center gap-1 rounded-lg\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\"\n  role=\"alert\"\n  [ngClass]=\"{\n    'bg-surface-variant dark:bg-surface-variant-dark text-on-surface dark:text-on-surface-dark':\n      type === 'primary' && variant === 'solid',\n    'bg-warning dark:bg-warning-dark text-on-warning dark:text-on-warning-dark':\n      type === 'warning' && variant === 'solid',\n    'bg-error dark:bg-error-dark text-on-error dark:text-on-error-dark': type === 'error' && variant === 'solid',\n    'bg-success dark:bg-success-dark text-on-success dark:text-on-success-dark':\n      type === 'success' && variant === 'solid',\n    border: variant === 'outline',\n    'border-surface-variant dark:border-surface-variant-dark': type === 'primary' && variant === 'outline',\n    'border-warning dark:border-warning-dark': type === 'warning' && variant === 'outline',\n    'border-error dark:border-error-dark': type === 'error' && variant === 'outline',\n    'border-success dark:border-success-dark': type === 'success' && variant === 'outline',\n    'px-4 py-2': variant !== 'blank'\n  }\">\n  @if (withIcon) {\n    <ct-icon [icon]=\"this.icon\" />\n  }\n  <span class=\"grow text-sm font-semibold\">{{ text }}</span>\n  @if (dismissable) {\n    <ct-button icon=\"x-mark\" size=\"sm\" variant=\"blank\" [type]=\"type\" (click)=\"dismiss.emit()\" />\n  }\n</div>\n" }]
        }], propDecorators: { dismissable: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], text: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input
            }], variant: [{
                type: Input
            }], withIcon: [{
                type: Input
            }], dismiss: [{
                type: Output
            }] } });

class SafeImagePipe {
    constructor(sanitizer) {
        this.sanitizer = sanitizer;
    }
    transform(value, type = 'image/webp') {
        const imageBase64 = `data:${type};base64,${value}`;
        return this.sanitizer.bypassSecurityTrustUrl(imageBase64);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: SafeImagePipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: SafeImagePipe, isStandalone: true, name: "safeImage" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: SafeImagePipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'safeImage',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });

class AvatarComponent {
    constructor() {
        this.picture = '';
        this.title = '';
        this.titleInitials = '';
    }
    ngOnInit() {
        this.titleInitials = this.title
            .split(' ')
            .map(word => word[0]?.toLocaleUpperCase())
            .splice(0, 2)
            .join('');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AvatarComponent, isStandalone: true, selector: "ct-avatar", inputs: { picture: "picture", title: "title" }, ngImport: i0, template: "@if (picture) {\n  <img\n    [src]=\"picture\"\n    alt=\"{{ title }}\"\n    class=\"size-16 rounded-full border-2 border-primary object-cover dark:border-primary-dark\" />\n} @else {\n  <div\n    class=\"size-16 truncate text-ellipsis rounded-full border border-primary bg-primary-container p-4 text-on-primary-container dark:bg-primary-container-dark dark:text-on-primary-container-dark\">\n    <span class=\"text-2xl font-medium\"> {{ titleInitials }}</span>\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AvatarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-avatar', standalone: true, imports: [IconComponent, SafeImagePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (picture) {\n  <img\n    [src]=\"picture\"\n    alt=\"{{ title }}\"\n    class=\"size-16 rounded-full border-2 border-primary object-cover dark:border-primary-dark\" />\n} @else {\n  <div\n    class=\"size-16 truncate text-ellipsis rounded-full border border-primary bg-primary-container p-4 text-on-primary-container dark:bg-primary-container-dark dark:text-on-primary-container-dark\">\n    <span class=\"text-2xl font-medium\"> {{ titleInitials }}</span>\n  </div>\n}\n" }]
        }], propDecorators: { picture: [{
                type: Input
            }], title: [{
                type: Input
            }] } });

class HeaderComponent {
    constructor() {
        this.title = '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: HeaderComponent, isStandalone: true, selector: "ct-header", inputs: { title: "title" }, ngImport: i0, template: "<div\n  class=\"flex h-14 w-full items-center justify-between bg-gradient-to-b from-surface to-primary px-4 py-2 dark:from-surface-variant-dark dark:to-primary-container-dark\">\n  <div class=\"flex grow font-logo\">{{ title }}</div>\n  <ng-content />\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: HeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-header', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex h-14 w-full items-center justify-between bg-gradient-to-b from-surface to-primary px-4 py-2 dark:from-surface-variant-dark dark:to-primary-container-dark\">\n  <div class=\"flex grow font-logo\">{{ title }}</div>\n  <ng-content />\n</div>\n" }]
        }], propDecorators: { title: [{
                type: Input
            }] } });

class MenuItemComponent {
    constructor() {
        this.text = '';
        this.link = '';
        this.type = 'internal';
        this.icon = undefined;
        this.iconSize = SizeEnum.BASE;
        this.iconAlone = false;
        this.iconDirection = 'horizontal';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: MenuItemComponent, isStandalone: true, selector: "ct-menu-item", inputs: { text: "text", link: "link", type: "type", icon: "icon", iconSize: "iconSize", iconAlone: "iconAlone", iconDirection: "iconDirection" }, ngImport: i0, template: "<a\n  [routerLink]=\"(type === 'internal' && link)! || null\"\n  [attr.href]=\"type === 'external' && link\"\n  class=\"block rounded-md px-4 py-2 text-on-surface hover:bg-primary/25 dark:text-on-surface-dark dark:hover:bg-primary-dark/25\">\n  <span\n    class=\"flex items-center gap-3\"\n    [class.flex-row]=\"iconDirection === 'horizontal'\"\n    [class.flex-col]=\"iconDirection === 'vertical'\">\n    @if (icon) {\n      <ct-icon [icon]=\"icon\" variant=\"solid\" size=\"xl\" />\n    }\n    @if (text && !iconAlone) {\n      <span>{{ text }}</span>\n    }\n  </span>\n</a>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MenuItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-menu-item', standalone: true, imports: [RouterLink, IconComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  [routerLink]=\"(type === 'internal' && link)! || null\"\n  [attr.href]=\"type === 'external' && link\"\n  class=\"block rounded-md px-4 py-2 text-on-surface hover:bg-primary/25 dark:text-on-surface-dark dark:hover:bg-primary-dark/25\">\n  <span\n    class=\"flex items-center gap-3\"\n    [class.flex-row]=\"iconDirection === 'horizontal'\"\n    [class.flex-col]=\"iconDirection === 'vertical'\">\n    @if (icon) {\n      <ct-icon [icon]=\"icon\" variant=\"solid\" size=\"xl\" />\n    }\n    @if (text && !iconAlone) {\n      <span>{{ text }}</span>\n    }\n  </span>\n</a>\n" }]
        }], propDecorators: { text: [{
                type: Input
            }], link: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input,
                args: [{ required: true }]
            }], icon: [{
                type: Input
            }], iconSize: [{
                type: Input
            }], iconAlone: [{
                type: Input
            }], iconDirection: [{
                type: Input
            }] } });

class AccordionRegistryService {
    constructor() {
        this.accordions = new Map();
    }
    register(id, element) {
        this.accordions.set(id, element);
    }
    get(id) {
        return this.accordions.get(id);
    }
    unregister(id) {
        this.accordions.delete(id);
    }
    getItem(accordion, itemId) {
        const accordionObject = this.accordions.get(accordion);
        return accordionObject.accordionItems.find(item => item.id === itemId);
    }
    openItem(accordion, itemId) {
        this.accordions
            .get(accordion)
            ?.accordionItems.find(item => item.id === itemId)
            ?.isOpen.next(true);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionRegistryService, providedIn: 'any' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionRegistryService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'any' }]
        }] });

class AccordionComponent {
    constructor() {
        this.destroyRef = inject(DestroyRef);
        this.accordionRegistryService = inject(AccordionRegistryService);
        this.label = '';
        this.policy = 'collapse';
        this.gap = 0;
        this.parentAccordion = '';
        this.parentTrigger = '';
    }
    ngAfterViewInit() {
        this.accordionItems.forEach(accordionItem => {
            accordionItem.toggle
                .pipe(takeUntilDestroyed(this.destroyRef), withLatestFrom(accordionItem.isOpen), debounceTime(10))
                .subscribe(([_, isOpen]) => {
                accordionItem.isOpen.next(!isOpen);
            });
            accordionItem.isOpen.pipe(takeUntilDestroyed(this.destroyRef), skip(1), debounceTime(10)).subscribe(isOpen => {
                if (isOpen) {
                    if (this.parentTrigger) {
                        this.accordionRegistryService.getItem(this.parentAccordion, this.parentTrigger)?.isOpen.next(true);
                    }
                    if (this.policy === 'collapse') {
                        this.accordionItems.forEach(otherAccordionItem => {
                            if (accordionItem.id !== otherAccordionItem.id && otherAccordionItem.isOpen) {
                                otherAccordionItem.isOpen.next(false);
                            }
                        });
                    }
                }
            });
        });
        this.accordionRegistryService.register(this.id, this);
    }
    ngOnDestroy() {
        this.accordionRegistryService.unregister(this.id);
    }
    closePanes() {
        this.accordionItems.forEach(accordionItem => accordionItem.isOpen.next(false));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AccordionComponent, isStandalone: true, selector: "ct-accordion", inputs: { label: "label", id: "id", policy: "policy", gap: "gap", parentAccordion: "parentAccordion", parentTrigger: "parentTrigger" }, queries: [{ propertyName: "accordionItems", predicate: AccordionItemComponent }], ngImport: i0, template: "<div class=\"flex flex-col gap-{{ gap }}\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-accordion', standalone: true, imports: [AsyncPipe, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-{{ gap }}\">\n  <ng-content></ng-content>\n</div>\n" }]
        }], propDecorators: { label: [{
                type: Input
            }], id: [{
                type: Input,
                args: [{ required: true }]
            }], policy: [{
                type: Input
            }], gap: [{
                type: Input
            }], parentAccordion: [{
                type: Input
            }], parentTrigger: [{
                type: Input
            }], accordionItems: [{
                type: ContentChildren,
                args: [AccordionItemComponent]
            }] } });

class AccordionItemComponent {
    constructor() {
        this.destroyRef = inject(DestroyRef);
        this.id = '';
        this.label = '';
        this.isOpen = new BehaviorSubject(false);
        this.toggle = new EventEmitter();
    }
    ngAfterViewInit() {
        this.isOpen
            .pipe(takeUntilDestroyed(this.destroyRef), skip(1), filter(isOpen => !isOpen))
            .subscribe(() => {
            this.accordions.forEach(accordion => {
                accordion.closePanes();
            });
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AccordionItemComponent, isStandalone: true, selector: "ct-accordion-item", inputs: { id: "id", label: "label", isOpen: "isOpen" }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "accordions", predicate: AccordionComponent }], ngImport: i0, template: "<div\n  tabindex=\"0\"\n  class=\"flex cursor-pointer flex-row items-center justify-between gap-1.5 bg-surface px-4 py-2 text-on-surface hover:bg-primary/50 dark:bg-surface-dark dark:text-on-surface-dark hover:dark:bg-surface-variant-dark\"\n  [class.rounded-t-md]=\"isOpen | async\"\n  [class.rounded-md]=\"(isOpen | async) === false\"\n  (click)=\"toggle.emit()\">\n  <span class=\"grow\">{{ label }}</span>\n  <ct-icon size=\"sm\" [icon]=\"(isOpen | async) ? 'chevron-up' : 'chevron-down'\" />\n</div>\n@if (isOpen | async) {\n  <div class=\"flex flex-col rounded-b-md bg-surface/35 p-4 dark:bg-surface-dark/50\">\n    <ng-content></ng-content>\n  </div>\n}\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AccordionItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-accordion-item', standalone: true, imports: [IconComponent, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  tabindex=\"0\"\n  class=\"flex cursor-pointer flex-row items-center justify-between gap-1.5 bg-surface px-4 py-2 text-on-surface hover:bg-primary/50 dark:bg-surface-dark dark:text-on-surface-dark hover:dark:bg-surface-variant-dark\"\n  [class.rounded-t-md]=\"isOpen | async\"\n  [class.rounded-md]=\"(isOpen | async) === false\"\n  (click)=\"toggle.emit()\">\n  <span class=\"grow\">{{ label }}</span>\n  <ct-icon size=\"sm\" [icon]=\"(isOpen | async) ? 'chevron-up' : 'chevron-down'\" />\n</div>\n@if (isOpen | async) {\n  <div class=\"flex flex-col rounded-b-md bg-surface/35 p-4 dark:bg-surface-dark/50\">\n    <ng-content></ng-content>\n  </div>\n}\n" }]
        }], propDecorators: { id: [{
                type: Input,
                args: [{ required: true }]
            }], label: [{
                type: Input
            }], isOpen: [{
                type: Input
            }], toggle: [{
                type: Output
            }], accordions: [{
                type: ContentChildren,
                args: [AccordionComponent]
            }] } });

class CardComponent {
    constructor() {
        this.header = '';
        this.subHeader = '';
        this.title = '';
        this.subTitle = '';
        this.avatar = '';
        this.image = '';
        this.imageThumbnail = '';
        this.withActions = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: CardComponent, isStandalone: true, selector: "ct-card", inputs: { header: "header", subHeader: "subHeader", title: "title", subTitle: "subTitle", avatar: "avatar", image: "image", imageThumbnail: "imageThumbnail", withActions: "withActions" }, ngImport: i0, template: "<div class=\"flex w-full flex-col rounded-xl bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n  <div class=\"flex w-full flex-row items-stretch rounded-md\">\n    <div class=\"flex w-full grow flex-row items-center gap-4 px-4 py-2\">\n      <div class=\"items-center\">\n        <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n      </div>\n      <div class=\"flex grow flex-col\">\n        @if (header) {\n          <span class=\"grow text-lg font-semibold\" [innerHTML]=\"header\"></span>\n        }\n        @if (subHeader) {\n          <span class=\"grow text-sm\" [innerHTML]=\"subHeader\"></span>\n        }\n      </div>\n    </div>\n    <div class=\"flex flex-col justify-between rounded-r-xl\">\n      @if (imageThumbnail) {\n        <img class=\"flex max-w-24 rounded-tr-xl object-cover\" [src]=\"imageThumbnail\" [alt]=\"title\" />\n      } @else {\n        <ng-content select=\"[header-extra]\" />\n      }\n    </div>\n  </div>\n  @if (image) {\n    <img class=\"size-full object-cover\" [src]=\"image\" [alt]=\"title\" />\n  }\n  @if (title || subTitle) {\n    <div class=\"flex w-full flex-col px-4 py-2\">\n      <div class=\"text-xl font-bold\" [innerHTML]=\"title\"></div>\n      <div class=\"mb-2 text-base font-semibold\" [innerHTML]=\"subTitle\"></div>\n      <div class=\"flex w-fit grow-0\"><ng-content select=\"[body]\" /></div>\n    </div>\n  }\n  @if (withActions) {\n    <div class=\"flex flex-row justify-end gap-2 px-4 py-2\">\n      <ct-button text=\"test\" />\n      <ct-button text=\"test\" type=\"secondary\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "ct-avatar", inputs: ["picture", "title"] }, { kind: "component", type: ButtonComponent, selector: "ct-button", inputs: ["text", "icon", "iconPosition", "fullSize", "size", "type", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-card', standalone: true, imports: [AvatarComponent, ButtonComponent, SafeImagePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex w-full flex-col rounded-xl bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\">\n  <div class=\"flex w-full flex-row items-stretch rounded-md\">\n    <div class=\"flex w-full grow flex-row items-center gap-4 px-4 py-2\">\n      <div class=\"items-center\">\n        <ct-avatar [picture]=\"avatar\" [title]=\"title\" />\n      </div>\n      <div class=\"flex grow flex-col\">\n        @if (header) {\n          <span class=\"grow text-lg font-semibold\" [innerHTML]=\"header\"></span>\n        }\n        @if (subHeader) {\n          <span class=\"grow text-sm\" [innerHTML]=\"subHeader\"></span>\n        }\n      </div>\n    </div>\n    <div class=\"flex flex-col justify-between rounded-r-xl\">\n      @if (imageThumbnail) {\n        <img class=\"flex max-w-24 rounded-tr-xl object-cover\" [src]=\"imageThumbnail\" [alt]=\"title\" />\n      } @else {\n        <ng-content select=\"[header-extra]\" />\n      }\n    </div>\n  </div>\n  @if (image) {\n    <img class=\"size-full object-cover\" [src]=\"image\" [alt]=\"title\" />\n  }\n  @if (title || subTitle) {\n    <div class=\"flex w-full flex-col px-4 py-2\">\n      <div class=\"text-xl font-bold\" [innerHTML]=\"title\"></div>\n      <div class=\"mb-2 text-base font-semibold\" [innerHTML]=\"subTitle\"></div>\n      <div class=\"flex w-fit grow-0\"><ng-content select=\"[body]\" /></div>\n    </div>\n  }\n  @if (withActions) {\n    <div class=\"flex flex-row justify-end gap-2 px-4 py-2\">\n      <ct-button text=\"test\" />\n      <ct-button text=\"test\" type=\"secondary\" />\n    </div>\n  }\n</div>\n" }]
        }], propDecorators: { header: [{
                type: Input
            }], subHeader: [{
                type: Input
            }], title: [{
                type: Input
            }], subTitle: [{
                type: Input
            }], avatar: [{
                type: Input
            }], image: [{
                type: Input
            }], imageThumbnail: [{
                type: Input
            }], withActions: [{
                type: Input
            }] } });

class DropdownDirective {
    constructor(
    //private element: ElementRef,
    renderer) {
        this.renderer = renderer;
        this.targetId = '';
        this.isVisible = false;
    }
    onBlur() {
        this.close(document.getElementById(this.targetId));
    }
    onClick() {
        this.toggle(document.getElementById(this.targetId));
    }
    toggle(element) {
        this.isVisible = !this.isVisible;
        this.renderer.addClass(element, this.isVisible ? 'block' : 'hidden');
        this.renderer.removeClass(element, this.isVisible ? 'hidden' : 'block');
    }
    close(element) {
        this.isVisible = false;
        this.renderer.addClass(element, 'hidden');
        this.renderer.removeClass(element, 'block');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DropdownDirective, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: DropdownDirective, isStandalone: true, selector: "[ctDropdown]", inputs: { targetId: "targetId" }, host: { listeners: { "blur": "onBlur()", "focusout": "onBlur()", "click": "onClick()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DropdownDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ctDropdown]',
                    standalone: true,
                }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { targetId: [{
                type: Input,
                args: [{ required: true }]
            }], onBlur: [{
                type: HostListener,
                args: ['blur']
            }, {
                type: HostListener,
                args: ['focusout']
            }], onClick: [{
                type: HostListener,
                args: ['click']
            }] } });

class MenuComponent {
    constructor() {
        this.items = [];
        this.fullSize = true;
        this.direction = 'vertical';
        this.iconAlone = false;
        this.iconDirection = 'horizontal';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: MenuComponent, isStandalone: true, selector: "ct-menu", inputs: { items: "items", fullSize: "fullSize", direction: "direction", iconAlone: "iconAlone", iconDirection: "iconDirection" }, ngImport: i0, template: "<div\n  class=\"z-10 flex flex-col rounded-md bg-surface p-2 text-on-surface shadow-lg dark:bg-surface-dark\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\">\n  <ul\n    class=\"flex justify-around\"\n    [class.flex-col]=\"direction === 'vertical'\"\n    [class.flex-row]=\"direction === 'horizontal'\">\n    @for (item of items; track item) {\n      <li>\n        <!-- @if (item.subMenu && item.subMenu.length > 0) {\n          <button ctDropdown [targetId]=\"'test'\">{{ item.text }}</button>\n          <ct-menu class=\"absolute hidden\" [id]=\"'test'\" [items]=\"item.subMenu\" />\n        } @else { -->\n        <ct-menu-item\n          [text]=\"item.text\"\n          [link]=\"item.link\"\n          [type]=\"item.type\"\n          [icon]=\"item.icon!\"\n          [iconAlone]=\"iconAlone\"\n          [iconDirection]=\"iconDirection\" />\n        <!-- } -->\n      </li>\n    }\n  </ul>\n</div>\n", dependencies: [{ kind: "component", type: MenuItemComponent, selector: "ct-menu-item", inputs: ["text", "link", "type", "icon", "iconSize", "iconAlone", "iconDirection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-menu', standalone: true, imports: [MenuItemComponent, DropdownDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"z-10 flex flex-col rounded-md bg-surface p-2 text-on-surface shadow-lg dark:bg-surface-dark\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\">\n  <ul\n    class=\"flex justify-around\"\n    [class.flex-col]=\"direction === 'vertical'\"\n    [class.flex-row]=\"direction === 'horizontal'\">\n    @for (item of items; track item) {\n      <li>\n        <!-- @if (item.subMenu && item.subMenu.length > 0) {\n          <button ctDropdown [targetId]=\"'test'\">{{ item.text }}</button>\n          <ct-menu class=\"absolute hidden\" [id]=\"'test'\" [items]=\"item.subMenu\" />\n        } @else { -->\n        <ct-menu-item\n          [text]=\"item.text\"\n          [link]=\"item.link\"\n          [type]=\"item.type\"\n          [icon]=\"item.icon!\"\n          [iconAlone]=\"iconAlone\"\n          [iconDirection]=\"iconDirection\" />\n        <!-- } -->\n      </li>\n    }\n  </ul>\n</div>\n" }]
        }], propDecorators: { items: [{
                type: Input,
                args: [{ required: true }]
            }], fullSize: [{
                type: Input
            }], direction: [{
                type: Input
            }], iconAlone: [{
                type: Input
            }], iconDirection: [{
                type: Input
            }] } });

class OptionComponent {
    constructor() {
        this.label = '';
        this.icon = '';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: OptionComponent, isStandalone: true, selector: "ct-option", inputs: { label: "label", icon: "icon" }, ngImport: i0, template: "<div\n  class=\"flex cursor-pointer flex-row rounded-md px-4 py-2 text-sm hover:bg-surface/35 dark:hover:bg-surface-dark/35\">\n  @if (icon) {\n    <ct-icon [icon]=\"icon\" />\n  }\n  {{ label }}\n</div>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: OptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-option', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex cursor-pointer flex-row rounded-md px-4 py-2 text-sm hover:bg-surface/35 dark:hover:bg-surface-dark/35\">\n  @if (icon) {\n    <ct-icon [icon]=\"icon\" />\n  }\n  {{ label }}\n</div>\n" }]
        }], propDecorators: { label: [{
                type: Input,
                args: [{ required: true }]
            }], icon: [{
                type: Input
            }] } });

class LabelComponent {
    constructor() {
        this.text = '';
        this.type = TypeEnum.PRIMARY;
        this.formControlName = '';
        this.hasError = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: LabelComponent, isStandalone: true, selector: "ct-form-label", inputs: { text: "text", type: "type", formControlName: "formControlName", hasError: "hasError" }, ngImport: i0, template: "<label\n  class=\"mb-1 flex font-medium\"\n  [class.text-on-surface]=\"type === 'primary' && !hasError\"\n  [class.text-secondary]=\"type === 'secondary'\"\n  [class.text-warning-variation]=\"type === 'warning'\"\n  [class.text-error-variation]=\"type === 'error' || hasError\"\n  [class.text-success-variation]=\"type === 'success'\"\n  [for]=\"formControlName\"\n  >{{ text }}</label\n>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-form-label', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  class=\"mb-1 flex font-medium\"\n  [class.text-on-surface]=\"type === 'primary' && !hasError\"\n  [class.text-secondary]=\"type === 'secondary'\"\n  [class.text-warning-variation]=\"type === 'warning'\"\n  [class.text-error-variation]=\"type === 'error' || hasError\"\n  [class.text-success-variation]=\"type === 'success'\"\n  [for]=\"formControlName\"\n  >{{ text }}</label\n>\n" }]
        }], propDecorators: { text: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input
            }], formControlName: [{
                type: Input
            }], hasError: [{
                type: Input
            }] } });

/**
 * Creates a value accessor provider for a form component.
 * @param component - The component that implements the NG_VALUE_ACCESSOR interface.
 * @returns An ExistingProvider object for the value accessor.
 */
const provideValueAccessor = (component) => ({
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => component),
    multi: true,
});
/**
 * Creates a control container provider using FormGroupDirective.
 * @returns An ExistingProvider object for the control container.
 */
const provideControlContainer = () => ({
    provide: ControlContainer,
    useExisting: FormGroupDirective,
});

class FormGenericComponent {
    constructor(formGroupDirective) {
        this.formGroupDirective = formGroupDirective;
        this.onChange = () => { };
        this.onTouched = () => { };
        this.changeDetectorRef = inject(ChangeDetectorRef);
    }
    hasErrors(formControl) {
        return (formControl && !formControl.pristine && formControl.touched && !!formControl.errors);
    }
    get formControl() {
        return this.formGroupDirective.form.get(this.formControlName);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    triggerChange(value) {
        this.onChange(value);
    }
    triggerTouched() {
        this.onTouched();
    }
    triggerChangeDetection() {
        this.changeDetectorRef.markForCheck();
    }
}

class FormErrorComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: FormErrorComponent, isStandalone: true, selector: "ct-form-error", inputs: { errors: "errors" }, ngImport: i0, template: "<div class=\"my-2 flex flex-col gap-1\">\n  @for (error of errors | keyvalue; track error) {\n    @if (error.key === 'required') {\n      <ct-alert [text]=\"'Field is required'\" type=\"error\" [withIcon]=\"true\" variant=\"blank\" />\n    } @else {\n      <ct-alert [text]=\"error.key\" type=\"error\" [withIcon]=\"true\" variant=\"blank\" />\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: AlertComponent, selector: "ct-alert", inputs: ["dismissable", "fullSize", "text", "type", "variant", "withIcon"], outputs: ["dismiss"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: FormErrorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-form-error', standalone: true, imports: [AlertComponent, KeyValuePipe, JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"my-2 flex flex-col gap-1\">\n  @for (error of errors | keyvalue; track error) {\n    @if (error.key === 'required') {\n      <ct-alert [text]=\"'Field is required'\" type=\"error\" [withIcon]=\"true\" variant=\"blank\" />\n    } @else {\n      <ct-alert [text]=\"error.key\" type=\"error\" [withIcon]=\"true\" variant=\"blank\" />\n    }\n  }\n</div>\n" }]
        }], propDecorators: { errors: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class SelectComponent extends FormGenericComponent {
    constructor(formGroupDirective, destroyRef) {
        super(formGroupDirective);
        this.destroyRef = destroyRef;
        this.focusOut$ = new Subject();
        this.isOpen = false;
        this.option = '';
        this.option$ = signal('');
        this.placeholder = '';
        this.label = '';
        this.value = '';
        this.type = TypeEnum.PRIMARY;
        this.fullSize = true;
        this.shouldShowError = true;
        this.key = '';
        this.options = [];
        this.selected = new EventEmitter();
    }
    ngOnInit() {
        this.selectOption(this.value, false);
        this.focusOut$.pipe(takeUntilDestroyed(this.destroyRef), debounceTime(200)).subscribe(() => {
            this.triggerChangeDetection();
            this.close();
        });
    }
    toggle() {
        this.isOpen = !this.isOpen;
        if (!this.isOpen) {
            this.triggerTouched();
        }
    }
    close() {
        this.isOpen = false;
        this.triggerTouched();
    }
    selectOption(key, propagate = true) {
        const selectedOption = this.options.find(option => option.key === key);
        this.option = key === null ? this.placeholder : selectedOption?.label;
        if (propagate) {
            this.selected.emit(key);
            this.triggerChange(selectedOption?.key ?? null);
            this.close();
        }
    }
    writeValue(value) {
        this.triggerChangeDetection();
        this.selectOption(value, false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: SelectComponent, deps: [{ token: i1$1.FormGroupDirective }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: SelectComponent, isStandalone: true, selector: "ct-select", inputs: { formControlName: "formControlName", placeholder: "placeholder", label: "label", value: "value", type: "type", fullSize: "fullSize", shouldShowError: "shouldShowError", key: "key", options: "options" }, outputs: { selected: "selected" }, providers: [provideValueAccessor(forwardRef(() => SelectComponent))], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["triggerElement"], descendants: true }, { propertyName: "panel", first: true, predicate: ["optionsPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ct-form-label [text]=\"label\" [hasError]=\"hasErrors(formControl)\" />\n<div\n  class=\"flex flex-row items-center justify-between gap-1.5 rounded-md border bg-surface-variant px-4 py-2 text-sm text-on-surface-variant dark:bg-surface-variant-dark dark:text-on-surface-variant-dark\"\n  [class.border-error]=\"hasErrors(formControl)\"\n  [class.border-neutral-300]=\"!hasErrors(formControl)\"\n  [class.text-neutral-400]=\"option === placeholder\"\n  [class.text-on-surface-variant]=\"option !== placeholder\"\n  #triggerElement\n  tabindex=\"0\"\n  (focusout)=\"focusOut$.next($event)\"\n  (click)=\"toggle()\">\n  {{ option }}\n  <ct-icon class=\"flex\" [size]=\"'sm'\" [icon]=\"isOpen ? 'chevron-up' : 'chevron-down'\" />\n</div>\n@if (isOpen) {\n  <div class=\"relative\">\n    <div\n      #optionsPanel\n      [class.w-full]=\"fullSize\"\n      [class.w-fit]=\"!fullSize\"\n      class=\"absolute top-1 z-10 flex flex-col rounded-md border border-neutral-400 bg-surface-variant text-on-surface-variant dark:bg-surface-variant-dark dark:text-on-surface-variant-dark\">\n      <ct-option (click)=\"selectOption(null)\" [label]=\"placeholder\" />\n      @for (option of options; track option) {\n        <ct-option (click)=\"selectOption(option.key)\" [label]=\"option.label\" [icon]=\"option.icon!\" />\n      }\n    </div>\n  </div>\n}\n@if (hasErrors(formControl)) {\n  <ct-form-error [errors]=\"formControl.errors ?? {}\" />\n}\n", dependencies: [{ kind: "component", type: OptionComponent, selector: "ct-option", inputs: ["label", "icon"] }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "component", type: LabelComponent, selector: "ct-form-label", inputs: ["text", "type", "formControlName", "hasError"] }, { kind: "component", type: FormErrorComponent, selector: "ct-form-error", inputs: ["errors"] }], viewProviders: [provideControlContainer()], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: SelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-select', standalone: true, imports: [OptionComponent, ButtonComponent, IconComponent, LabelComponent, AlertComponent, FormErrorComponent], providers: [provideValueAccessor(forwardRef(() => SelectComponent))], viewProviders: [provideControlContainer()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ct-form-label [text]=\"label\" [hasError]=\"hasErrors(formControl)\" />\n<div\n  class=\"flex flex-row items-center justify-between gap-1.5 rounded-md border bg-surface-variant px-4 py-2 text-sm text-on-surface-variant dark:bg-surface-variant-dark dark:text-on-surface-variant-dark\"\n  [class.border-error]=\"hasErrors(formControl)\"\n  [class.border-neutral-300]=\"!hasErrors(formControl)\"\n  [class.text-neutral-400]=\"option === placeholder\"\n  [class.text-on-surface-variant]=\"option !== placeholder\"\n  #triggerElement\n  tabindex=\"0\"\n  (focusout)=\"focusOut$.next($event)\"\n  (click)=\"toggle()\">\n  {{ option }}\n  <ct-icon class=\"flex\" [size]=\"'sm'\" [icon]=\"isOpen ? 'chevron-up' : 'chevron-down'\" />\n</div>\n@if (isOpen) {\n  <div class=\"relative\">\n    <div\n      #optionsPanel\n      [class.w-full]=\"fullSize\"\n      [class.w-fit]=\"!fullSize\"\n      class=\"absolute top-1 z-10 flex flex-col rounded-md border border-neutral-400 bg-surface-variant text-on-surface-variant dark:bg-surface-variant-dark dark:text-on-surface-variant-dark\">\n      <ct-option (click)=\"selectOption(null)\" [label]=\"placeholder\" />\n      @for (option of options; track option) {\n        <ct-option (click)=\"selectOption(option.key)\" [label]=\"option.label\" [icon]=\"option.icon!\" />\n      }\n    </div>\n  </div>\n}\n@if (hasErrors(formControl)) {\n  <ct-form-error [errors]=\"formControl.errors ?? {}\" />\n}\n" }]
        }], ctorParameters: () => [{ type: i1$1.FormGroupDirective }, { type: i0.DestroyRef }], propDecorators: { formControlName: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], label: [{
                type: Input
            }], value: [{
                type: Input
            }], type: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], shouldShowError: [{
                type: Input
            }], key: [{
                type: Input,
                args: [{ required: true }]
            }], options: [{
                type: Input,
                args: [{ required: true }]
            }], selected: [{
                type: Output
            }], trigger: [{
                type: ViewChild,
                args: ['triggerElement']
            }], panel: [{
                type: ViewChild,
                args: ['optionsPanel']
            }] } });

class InputComponent extends FormGenericComponent {
    onFocusOut() {
        this.triggerTouched();
    }
    constructor(formGroupDirective) {
        super(formGroupDirective);
        this.key = '';
        this.label = '';
        this.placeholder = '';
        this.value = '';
        this.type = TypeEnum.PRIMARY;
        this.fullSize = true;
        this.typed = new EventEmitter();
    }
    input(event) {
        this.setValue(event.target.value);
    }
    setValue(value, propagate = true) {
        this.value = value;
        if (propagate) {
            this.triggerChange(value);
            this.typed.emit(value);
        }
    }
    writeValue(value) {
        this.triggerChangeDetection();
        this.setValue(value, false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: InputComponent, deps: [{ token: i1$1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: InputComponent, isStandalone: true, selector: "ct-input", inputs: { formControlName: "formControlName", key: "key", label: "label", placeholder: "placeholder", value: "value", type: "type", fullSize: "fullSize" }, outputs: { typed: "typed" }, host: { listeners: { "focusout": "onFocusOut()" } }, providers: [provideValueAccessor(forwardRef(() => InputComponent))], usesInheritance: true, ngImport: i0, template: "<ct-form-label [text]=\"label\" [hasError]=\"hasErrors(formControl)\" />\n<input\n  tabindex=\"0\"\n  class=\"rounded-md border bg-surface-variant px-4 py-2 text-sm text-on-surface-variant outline-none dark:bg-surface-variant-dark dark:text-on-surface-variant-dark\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\"\n  [class.border-neutral-400]=\"formControl && (formControl.pristine || formControl.valid)\"\n  [class.border-error]=\"hasErrors(formControl)\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  (input)=\"input($event)\" />\n@if (hasErrors(formControl)) {\n  <ct-form-error [errors]=\"formControl.errors ?? {}\" />\n}\n", dependencies: [{ kind: "component", type: LabelComponent, selector: "ct-form-label", inputs: ["text", "type", "formControlName", "hasError"] }, { kind: "component", type: FormErrorComponent, selector: "ct-form-error", inputs: ["errors"] }], viewProviders: [provideControlContainer()], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: InputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-input', standalone: true, imports: [NgClass, LabelComponent, FormErrorComponent], providers: [provideValueAccessor(forwardRef(() => InputComponent))], viewProviders: [provideControlContainer()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ct-form-label [text]=\"label\" [hasError]=\"hasErrors(formControl)\" />\n<input\n  tabindex=\"0\"\n  class=\"rounded-md border bg-surface-variant px-4 py-2 text-sm text-on-surface-variant outline-none dark:bg-surface-variant-dark dark:text-on-surface-variant-dark\"\n  [class.w-fit]=\"!fullSize\"\n  [class.w-full]=\"fullSize\"\n  [class.border-neutral-400]=\"formControl && (formControl.pristine || formControl.valid)\"\n  [class.border-error]=\"hasErrors(formControl)\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  (input)=\"input($event)\" />\n@if (hasErrors(formControl)) {\n  <ct-form-error [errors]=\"formControl.errors ?? {}\" />\n}\n" }]
        }], ctorParameters: () => [{ type: i1$1.FormGroupDirective }], propDecorators: { formControlName: [{
                type: Input,
                args: [{ required: true }]
            }], key: [{
                type: Input,
                args: [{ required: true }]
            }], label: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], value: [{
                type: Input
            }], type: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], typed: [{
                type: Output
            }], onFocusOut: [{
                type: HostListener,
                args: ['focusout']
            }] } });

class FormBase {
    constructor(options = {}) {
        this.value = options.value;
        this.key = options.key || undefined;
        this.label = options.label || '';
        this.placeholder = options.placeholder || '';
        this.required = !!options.required;
        this.controlType = options.controlType || '';
        this.options = options.options || [];
    }
}

class SelectFormBase extends FormBase {
    constructor() {
        super(...arguments);
        this.controlType = 'select';
    }
}

class InputFormBase extends FormBase {
    constructor() {
        super(...arguments);
        this.controlType = 'input';
    }
}

/*
 * Public API Surface of circletone
 */
// Atoms

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

export { AccordionComponent, AccordionItemComponent, AccordionRegistryService, AlertComponent, AvatarComponent, ButtonComponent, CardComponent, DropdownDirective, FormBase, HeaderComponent, IconComponent, InputComponent, InputFormBase, MenuComponent, MenuItemComponent, SafeImagePipe, SelectComponent, SelectFormBase, SizeEnum, TypeEnum, VariantEnum };
//# sourceMappingURL=circletone.mjs.map