skcr-autechre 0.0.1 → 1.0.1

package/fesm2022/skcr-autechre.mjs

@@ -1,29 +1,44 @@
 import * as i0 from '@angular/core';
-import { Component, input, model, signal, computed, inject, ElementRef, viewChild, effect, output } from '@angular/core';
-import { trigger, transition, style, animate } from '@angular/animations';
+import { input, model, signal, computed, inject, ElementRef, viewChild, effect, Component, output, ViewChild, Injectable, contentChild, contentChildren, booleanAttribute, HostBinding, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { trigger, transition, style, animate, group, query, animateChild } from '@angular/animations';
 import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { NgClass } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { NgIcon } from '@ng-icons/core';
+import * as i1$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { DateAdapter, MatNativeDateModule, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { Subject } from 'rxjs';
 
-class Autechre {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Autechre, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: Autechre, isStandalone: true, selector: "lib-autechre", ngImport: i0, template: `
-    <p>
-      autechre works!
-    </p>
-  `, isInline: true, styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Autechre, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-autechre', imports: [], template: `
-    <p>
-      autechre works!
-    </p>
-  ` }]
-        }] });
+var ESortDirection;
+(function (ESortDirection) {
+    ESortDirection["Ascending"] = "ascending";
+    ESortDirection["Descending"] = "descending";
+    ESortDirection["None"] = "none";
+})(ESortDirection || (ESortDirection = {}));
+
+var EButtonColorVariant$1;
+(function (EButtonColorVariant) {
+    EButtonColorVariant["Primary"] = "btn-primary";
+    EButtonColorVariant["Danger"] = "btn-danger";
+})(EButtonColorVariant$1 || (EButtonColorVariant$1 = {}));
+
+var EConfirmLevelVariant;
+(function (EConfirmLevelVariant) {
+    EConfirmLevelVariant["Danger"] = "danger";
+    EConfirmLevelVariant["Info"] = "info";
+    EConfirmLevelVariant["Success"] = "success";
+})(EConfirmLevelVariant || (EConfirmLevelVariant = {}));
+
+var EModalCloseCondition;
+(function (EModalCloseCondition) {
+    EModalCloseCondition["SubmitSuccess"] = "SubmitSuccess";
+    EModalCloseCondition["Close"] = "close";
+})(EModalCloseCondition || (EModalCloseCondition = {}));
 
 class MultiSelectComponent {
     constructor() {
@@ -311,13 +326,895 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                     ], template: "<button\n  class=\"btn btn-large w-full\"\n  type=\"button\"\n  [class]=\"colorVariant()\"\n  [ngClass]=\"{\n    'btn-success': isSuccessIconDisplayed(),\n    'btn-full': isFullWidth(),\n  }\"\n  [disabled]=\"isLoading() || isSuccessIconDisplayed() || isDisabled()\"\n  (click)=\"handleCLick()\"\n>\n  @if (isLoading()) {\n    <span class=\"spinner\"></span>\n  }\n\n  @if (isSuccessIconDisplayed()) {\n    <span class=\"flex items-center justify-center text-inherit\">\n      <ng-icon\n        name=\"heroCheck\"\n        size=\"20px\"\n      />\n    </span>\n  }\n\n  @if (!isLoading() && !isSuccessIconDisplayed()) {\n    {{ label() }}\n  }\n</button>\n", styles: [".spinner{display:inline-block;border-radius:50%;width:1em;height:1em;border:.215em solid transparent;vertical-align:middle;font-size:16px;border-top-color:#fff;animation:spin 1s cubic-bezier(.55,.15,.45,.85) infinite}.btn.btn-success{line-height:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSuccess", required: false }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], submitClicked: [{ type: i0.Output, args: ["submitClicked"] }] } });
 
-/*
- * Public API Surface of autechre
- */
+class CheckboxComponent {
+    constructor() {
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.subLabel = input('', ...(ngDevMode ? [{ debugName: "subLabel" }] : []));
+        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.isWithFullSpace = input(false, ...(ngDevMode ? [{ debugName: "isWithFullSpace" }] : []));
+        this.isLabelLeft = input(false, ...(ngDevMode ? [{ debugName: "isLabelLeft" }] : []));
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    }
+    handleToggleClick() {
+        if (!this.isDisabled()) {
+            this.checked.update(currentValue => !currentValue);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CheckboxComponent, isStandalone: true, selector: "skcr-checkbox", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isWithFullSpace: { classPropertyName: "isWithFullSpace", publicName: "isWithFullSpace", isSignal: true, isRequired: false, transformFunction: null }, isLabelLeft: { classPropertyName: "isLabelLeft", publicName: "isLabelLeft", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center gap-2\"\n  [class.flex-row-reverse]=\"!isLabelLeft()\"\n  [ngClass]=\"{\n    'justify-between': isWithFullSpace(),\n  }\"\n>\n  <div class=\"flex flex-col gap-1\">\n    <label\n      [ngClass]=\"{\n        'opacity-50': isDisabled(),\n        'cursor-pointer': !isDisabled(),\n      }\"\n      [for]=\"name()\"\n    >\n      {{ label() }}\n    </label>\n\n    @if (subLabel()) {\n      <p class=\"text-slate-500\">\n        {{ subLabel() }}\n      </p>\n    }\n  </div>\n\n  <button\n    class=\"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-hidden\"\n    type=\"button\"\n    [ngClass]=\"{\n      'bg-primary': checked(),\n      'bg-slate-200': !checked(),\n      'opacity-50 cursor-not-allowed': isDisabled(),\n    }\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"handleToggleClick()\"\n    [id]=\"name()\"\n  >\n    <span class=\"sr-only\">\n      {{ label() }}\n    </span>\n\n    <span\n      [class]=\"\n        'pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ' +\n        (checked() ? 'translate-x-5' : 'translate-x-0')\n      \"\n      aria-hidden=\"true\"\n    ></span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-checkbox', imports: [
+                        NgClass,
+                    ], template: "<div\n  class=\"flex items-center gap-2\"\n  [class.flex-row-reverse]=\"!isLabelLeft()\"\n  [ngClass]=\"{\n    'justify-between': isWithFullSpace(),\n  }\"\n>\n  <div class=\"flex flex-col gap-1\">\n    <label\n      [ngClass]=\"{\n        'opacity-50': isDisabled(),\n        'cursor-pointer': !isDisabled(),\n      }\"\n      [for]=\"name()\"\n    >\n      {{ label() }}\n    </label>\n\n    @if (subLabel()) {\n      <p class=\"text-slate-500\">\n        {{ subLabel() }}\n      </p>\n    }\n  </div>\n\n  <button\n    class=\"relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-hidden\"\n    type=\"button\"\n    [ngClass]=\"{\n      'bg-primary': checked(),\n      'bg-slate-200': !checked(),\n      'opacity-50 cursor-not-allowed': isDisabled(),\n    }\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"handleToggleClick()\"\n    [id]=\"name()\"\n  >\n    <span class=\"sr-only\">\n      {{ label() }}\n    </span>\n\n    <span\n      [class]=\"\n        'pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ' +\n        (checked() ? 'translate-x-5' : 'translate-x-0')\n      \"\n      aria-hidden=\"true\"\n    ></span>\n  </button>\n</div>\n" }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isWithFullSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "isWithFullSpace", required: false }] }], isLabelLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLabelLeft", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+
+class CheckboxClassicComponent {
+    constructor() {
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    }
+    handleToggleClick() {
+        if (!this.isDisabled()) {
+            this.checked.set(!this.checked());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxClassicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: CheckboxClassicComponent, isStandalone: true, selector: "skcr-checkbox-classic", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<div class=\"flex gap-1.5 items-center\" (click)=\"handleToggleClick()\">\n  <div class=\"group grid size-4 grid-cols-1\">\n    <input\n      class=\"col-start-1 row-start-1 appearance-none rounded-sm border border-border-color bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-border-color disabled:bg-slate-50 disabled:checked:bg-slate-50\"\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n    />\n\n    <svg\n      class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-slate-950/25 dark:group-has-disabled:stroke-white/25\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n    >\n      <path\n        class=\"opacity-0 group-has-checked:opacity-100\"\n        d=\"M3 8L6 11L11 3.5\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        class=\"opacity-0 group-has-indeterminate:opacity-100\"\n        d=\"M3 7H11\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </div>\n\n  <label\n    class=\"leading-none cursor-pointer\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [class.opacity-50]=\"isDisabled()\"\n  >\n    {{ label() }} {{ checked() }}\n  </label>\n</div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxClassicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-checkbox-classic', template: "<div class=\"flex gap-1.5 items-center\" (click)=\"handleToggleClick()\">\n  <div class=\"group grid size-4 grid-cols-1\">\n    <input\n      class=\"col-start-1 row-start-1 appearance-none rounded-sm border border-border-color bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-border-color disabled:bg-slate-50 disabled:checked:bg-slate-50\"\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n    />\n\n    <svg\n      class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-slate-950/25 dark:group-has-disabled:stroke-white/25\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n    >\n      <path\n        class=\"opacity-0 group-has-checked:opacity-100\"\n        d=\"M3 8L6 11L11 3.5\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        class=\"opacity-0 group-has-indeterminate:opacity-100\"\n        d=\"M3 7H11\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </div>\n\n  <label\n    class=\"leading-none cursor-pointer\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [class.opacity-50]=\"isDisabled()\"\n  >\n    {{ label() }} {{ checked() }}\n  </label>\n</div>\n" }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+
+class SelectComponent {
+    constructor() {
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.isInvalid = input(false, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+        this.isSearchDisplayed = input(false, ...(ngDevMode ? [{ debugName: "isSearchDisplayed" }] : []));
+        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.isOptional = input(false, ...(ngDevMode ? [{ debugName: "isOptional" }] : []));
+        this.isFullWidth = input(false, ...(ngDevMode ? [{ debugName: "isFullWidth" }] : []));
+        this.isShort = input(false, ...(ngDevMode ? [{ debugName: "isShort" }] : []));
+        this.isResetDisplayed = input(true, ...(ngDevMode ? [{ debugName: "isResetDisplayed" }] : []));
+        this.searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.dropdownTop = 0;
+        this.dropdownLeft = 0;
+        this.dropdownWidth = 0;
+        this.formattedOptions = computed(() => {
+            let formattedOptions = this.options() || [];
+            if (formattedOptions[0]?.value === undefined) {
+                formattedOptions = formattedOptions.map(option => {
+                    return {
+                        ...option,
+                        value: option.id,
+                    };
+                });
+            }
+            return formattedOptions;
+        }, ...(ngDevMode ? [{ debugName: "formattedOptions" }] : []));
+        this.displayedValue = computed(() => {
+            let displayedValue;
+            if (this.value() !== null && this.value() !== undefined) {
+                displayedValue = this.formattedOptions().find(option => option.value === this.value()).name;
+            }
+            else {
+                if (this.placeholder) {
+                    displayedValue = this.placeholder();
+                }
+                else if (this.isOptional()) {
+                    displayedValue = 'None';
+                }
+                else {
+                    displayedValue = 'To select';
+                }
+            }
+            return displayedValue;
+        }, ...(ngDevMode ? [{ debugName: "displayedValue" }] : []));
+        this.filteredOptions = computed(() => {
+            const normalizedQuery = this.normalizeString(this.searchTerm());
+            return this.formattedOptions().filter(option => {
+                return this.normalizeString(option.name).includes(normalizedQuery);
+            });
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+        this.elRef = inject(ElementRef);
+        this.clickOutsideHandler = (e) => {
+            if (!this.elRef.nativeElement.contains(e.target) && this.isOpen()) {
+                this.toggleSelect();
+            }
+        };
+    }
+    toggleSelect() {
+        if (this.isSearchDisplayed()) {
+            this.searchTerm.set('');
+        }
+        this.isOpen.update(isOpen => !isOpen);
+        if (this.isOpen()) {
+            this.updateDropdownPosition();
+            document.addEventListener('click', this.clickOutsideHandler);
+            setTimeout(() => {
+                if (this.isSearchDisplayed()) {
+                    this.searchInput.nativeElement.focus();
+                }
+            });
+        }
+        else if (!this.isOpen) {
+            document.removeEventListener('click', this.clickOutsideHandler);
+        }
+    }
+    optionByValue(index, option) {
+        return option.value;
+    }
+    onSearchTermInput(event) {
+        this.searchTerm.set(event.target.value);
+    }
+    handleOptionClick(item, event) {
+        if (this.isOptional() && this.value() === item.value) {
+            this.value.set(null);
+        }
+        else {
+            this.value.set(item.value);
+        }
+        this.toggleSelect();
+        event.preventDefault();
+    }
+    isItemSelected(item) {
+        return this.value() === item.value;
+    }
+    getSelectedOption() {
+        return this.formattedOptions().find(option => option.value === this.value());
+    }
+    clearSelection(event) {
+        this.value.set(null);
+        event.stopPropagation();
+    }
+    normalizeString(value) {
+        return value
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .toLocaleLowerCase();
+    }
+    updateDropdownPosition() {
+        const buttonElement = this.elRef.nativeElement.querySelector('button');
+        if (buttonElement) {
+            const rect = buttonElement.getBoundingClientRect();
+            this.dropdownTop = rect.bottom + window.scrollY;
+            this.dropdownLeft = rect.left + window.scrollX;
+            this.dropdownWidth = rect.width;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SelectComponent, isStandalone: true, selector: "skcr-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isSearchDisplayed: { classPropertyName: "isSearchDisplayed", publicName: "isSearchDisplayed", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isOptional: { classPropertyName: "isOptional", publicName: "isOptional", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isShort: { classPropertyName: "isShort", publicName: "isShort", isSignal: true, isRequired: false, transformFunction: null }, isResetDisplayed: { classPropertyName: "isResetDisplayed", publicName: "isResetDisplayed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div>\n  @if (label()) {\n    <label class=\"flex items-center gap-2\">\n      {{ label() }}\n\n      @if (isOptional()) {\n        <span class=\"text-xs text-slate-500\">\n          {{ 'Optional' }}\n        </span>\n      }\n    </label>\n  }\n\n  <div\n    class=\"relative\"\n    [ngClass]=\"{\n      'w-fit min-w-[180px]': isShort(),\n      'w-full': isFullWidth(),\n      'mt-1': label(),\n    }\"\n  >\n    <button\n      class=\"grid w-full shadow-sm cursor-default grid-cols-1 rounded-md py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary\"\n      (click)=\"toggleSelect()\"\n      [disabled]=\"isDisabled() || !options().length\"\n      [ngClass]=\"{\n        'border-destructive focus:border-destructive focus:ring-destructive': isInvalid(),\n        'border-border-color focus:border-primaryBlue focus:ring-primaryBlue': !isInvalid(),\n        'cursor-not-allowed bg-slate-50': isDisabled() || !options().length,\n        'cursor-pointer bg-white': !isDisabled() && !!options().length,\n      }\"\n      type=\"button\"\n      aria-expanded=\"true\"\n      aria-haspopup=\"listbox\"\n      aria-labelledby=\"multiselect-label\"\n    >\n      <span\n        class=\"col-start-1 row-start-1 flex items-center gap-2 truncate pr-6\"\n        [ngClass]=\"{\n          'text-slate-400': !this.value(),\n        }\"\n      >\n        {{ this.displayedValue() }}\n      </span>\n\n      <span class=\"col-start-1 row-start-1 flex items-center gap-2 self-center justify-self-end text-slate-500\">\n        @if (isResetDisplayed() && value() !== null && value() !== undefined) {\n          <span\n            class=\"size-5 sm:size-4 cursor-pointer\"\n            (click)=\"clearSelection($event)\"\n          >\n            <ng-icon name=\"heroXMark\" />\n          </span>\n        }\n        <span class=\"size-5 sm:size-4\">\n          <ng-icon name=\"heroChevronUpDown\" />\n        </span>\n      </span>\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        class=\"fixed z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small\"\n        [style.top.px]=\"dropdownTop\"\n        [style.left.px]=\"dropdownLeft\"\n        [style.width.px]=\"dropdownWidth\"\n        @AnimationTrigger0\n        role=\"listbox\"\n      >\n        @if (isSearchDisplayed()) {\n          <li class=\"relative cursor-default py-2 px-3 shadow-sm select-none\">\n            <div class=\"pointer-events-none absolute inset-y-0 left-1 flex items-center pl-3\">\n              <span class=\"flex items-center\">\n                <ng-icon name=\"heroMagnifyingGlass\" />\n              </span>\n            </div>\n\n            <input\n              class=\"block rounded-md w-full pl-6 pr-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary placeholder:text-slate-500\"\n              #searchInput\n              type=\"text\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchTermInput($event)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </li>\n        }\n\n        @for (option of filteredOptions(); track optionByValue(i, option); let i = $index) {\n          <li\n            class=\"relative cursor-pointer select-none py-2 pl-8 pr-4 text-left hover:bg-primary-50\"\n            (click)=\"handleOptionClick(option, $event)\"\n            [id]=\"'listbox-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"isItemSelected(option)\"\n          >\n            <span\n              class=\"flex items-center gap-2 truncate\"\n              [ngClass]=\"{\n                'font-semibold': isItemSelected(option),\n                'font-normal': !isItemSelected(option),\n              }\"\n            >\n              {{ option.name }}\n              @if (option.icon) {\n                <img\n                  class=\"size-4\"\n                  [src]=\"'assets/icons/' + option.icon + '.svg'\"\n                  alt=\"\"\n                />\n              }\n            </span>\n\n            @if (isItemSelected(option)) {\n              <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n                <ng-icon name=\"heroCheck\" />\n              </span>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: FormsModule }], animations: [
+            trigger('AnimationTrigger0', [
+                transition(':leave', [
+                    style({ opacity: 1 }),
+                    animate('200ms ease-in-out', style({ opacity: 0 })),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-select', animations: [
+                        trigger('AnimationTrigger0', [
+                            transition(':leave', [
+                                style({ opacity: 1 }),
+                                animate('200ms ease-in-out', style({ opacity: 0 })),
+                            ]),
+                        ]),
+                    ], imports: [
+                        NgClass,
+                        NgIcon,
+                        FormsModule,
+                    ], template: "<div>\n  @if (label()) {\n    <label class=\"flex items-center gap-2\">\n      {{ label() }}\n\n      @if (isOptional()) {\n        <span class=\"text-xs text-slate-500\">\n          {{ 'Optional' }}\n        </span>\n      }\n    </label>\n  }\n\n  <div\n    class=\"relative\"\n    [ngClass]=\"{\n      'w-fit min-w-[180px]': isShort(),\n      'w-full': isFullWidth(),\n      'mt-1': label(),\n    }\"\n  >\n    <button\n      class=\"grid w-full shadow-sm cursor-default grid-cols-1 rounded-md py-2 px-3 text-left outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary\"\n      (click)=\"toggleSelect()\"\n      [disabled]=\"isDisabled() || !options().length\"\n      [ngClass]=\"{\n        'border-destructive focus:border-destructive focus:ring-destructive': isInvalid(),\n        'border-border-color focus:border-primaryBlue focus:ring-primaryBlue': !isInvalid(),\n        'cursor-not-allowed bg-slate-50': isDisabled() || !options().length,\n        'cursor-pointer bg-white': !isDisabled() && !!options().length,\n      }\"\n      type=\"button\"\n      aria-expanded=\"true\"\n      aria-haspopup=\"listbox\"\n      aria-labelledby=\"multiselect-label\"\n    >\n      <span\n        class=\"col-start-1 row-start-1 flex items-center gap-2 truncate pr-6\"\n        [ngClass]=\"{\n          'text-slate-400': !this.value(),\n        }\"\n      >\n        {{ this.displayedValue() }}\n      </span>\n\n      <span class=\"col-start-1 row-start-1 flex items-center gap-2 self-center justify-self-end text-slate-500\">\n        @if (isResetDisplayed() && value() !== null && value() !== undefined) {\n          <span\n            class=\"size-5 sm:size-4 cursor-pointer\"\n            (click)=\"clearSelection($event)\"\n          >\n            <ng-icon name=\"heroXMark\" />\n          </span>\n        }\n        <span class=\"size-5 sm:size-4\">\n          <ng-icon name=\"heroChevronUpDown\" />\n        </span>\n      </span>\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        class=\"fixed z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden sm:text-body-small\"\n        [style.top.px]=\"dropdownTop\"\n        [style.left.px]=\"dropdownLeft\"\n        [style.width.px]=\"dropdownWidth\"\n        @AnimationTrigger0\n        role=\"listbox\"\n      >\n        @if (isSearchDisplayed()) {\n          <li class=\"relative cursor-default py-2 px-3 shadow-sm select-none\">\n            <div class=\"pointer-events-none absolute inset-y-0 left-1 flex items-center pl-3\">\n              <span class=\"flex items-center\">\n                <ng-icon name=\"heroMagnifyingGlass\" />\n              </span>\n            </div>\n\n            <input\n              class=\"block rounded-md w-full pl-6 pr-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 focus:outline-primary placeholder:text-slate-500\"\n              #searchInput\n              type=\"text\"\n              [value]=\"searchTerm()\"\n              (input)=\"onSearchTermInput($event)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </li>\n        }\n\n        @for (option of filteredOptions(); track optionByValue(i, option); let i = $index) {\n          <li\n            class=\"relative cursor-pointer select-none py-2 pl-8 pr-4 text-left hover:bg-primary-50\"\n            (click)=\"handleOptionClick(option, $event)\"\n            [id]=\"'listbox-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"isItemSelected(option)\"\n          >\n            <span\n              class=\"flex items-center gap-2 truncate\"\n              [ngClass]=\"{\n                'font-semibold': isItemSelected(option),\n                'font-normal': !isItemSelected(option),\n              }\"\n            >\n              {{ option.name }}\n              @if (option.icon) {\n                <img\n                  class=\"size-4\"\n                  [src]=\"'assets/icons/' + option.icon + '.svg'\"\n                  alt=\"\"\n                />\n              }\n            </span>\n\n            @if (isItemSelected(option)) {\n              <span class=\"absolute inset-y-0 right-0 flex items-center pr-4 text-primary\">\n                <ng-icon name=\"heroCheck\" />\n              </span>\n            }\n          </li>\n        }\n      </ul>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], isSearchDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSearchDisplayed", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isOptional: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOptional", required: false }] }], isFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullWidth", required: false }] }], isShort: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShort", required: false }] }], isResetDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isResetDisplayed", required: false }] }] } });
+
+class LoaderComponent {
+    constructor() {
+        this.size = input('xl', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.isNotAbsolute = input(false, ...(ngDevMode ? [{ debugName: "isNotAbsolute" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: LoaderComponent, isStandalone: true, selector: "app-loader", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isNotAbsolute: { classPropertyName: "isNotAbsolute", publicName: "isNotAbsolute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"'loader ' + size\"></div>\n", styles: [".loader{width:100px;aspect-ratio:1;display:grid;border:4px solid rgba(0,0,0,0);border-radius:50%;border-right-color:var(--color-primary-l);animation:l15 1s infinite linear}.loader:before,.loader:after{content:\"\";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:l15 2s infinite}.loader:after{margin:8px;animation-duration:3s}@keyframes l15{to{transform:rotate(1turn)}}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-loader', template: "<div [class]=\"'loader ' + size\"></div>\n", styles: [".loader{width:100px;aspect-ratio:1;display:grid;border:4px solid rgba(0,0,0,0);border-radius:50%;border-right-color:var(--color-primary-l);animation:l15 1s infinite linear}.loader:before,.loader:after{content:\"\";grid-area:1/1;margin:2px;border:inherit;border-radius:50%;animation:l15 2s infinite}.loader:after{margin:8px;animation-duration:3s}@keyframes l15{to{transform:rotate(1turn)}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isNotAbsolute: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotAbsolute", required: false }] }] } });
+
+class TooltipService {
+    constructor() {
+        this.activeTooltip = null;
+    }
+    showTooltip(event, content) {
+        this.hideTooltip();
+        const tooltip = document.createElement('div');
+        tooltip.className =
+            'bg-gray-800 text-white p-2 rounded text-xs max-w-md whitespace-normal z-[9999] fixed pointer-events-none';
+        tooltip.style.visibility = 'visible';
+        tooltip.textContent = content;
+        tooltip.style.left = event.clientX + 10 + 'px';
+        tooltip.style.top = event.clientY - 30 + 'px';
+        document.body.appendChild(tooltip);
+        this.activeTooltip = tooltip;
+    }
+    hideTooltip() {
+        if (this.activeTooltip) {
+            document.body.removeChild(this.activeTooltip);
+            this.activeTooltip = null;
+        }
+    }
+    updateTooltipPosition(event) {
+        if (this.activeTooltip) {
+            this.activeTooltip.style.left = event.clientX + 10 + 'px';
+            this.activeTooltip.style.top = event.clientY - 30 + 'px';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TooltipService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class TableHeaderCellComponent {
+    constructor() {
+        this.tooltipService = inject(TooltipService);
+        this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.sortDirection = input(ESortDirection.None, ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
+        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.isOrderByDisplayed = input(false, ...(ngDevMode ? [{ debugName: "isOrderByDisplayed" }] : []));
+        this.disabledText = input('Sorting is possible on this value only for query with less than 10000 results.', ...(ngDevMode ? [{ debugName: "disabledText" }] : []));
+        this.toolTipText = input(...(ngDevMode ? [undefined, { debugName: "toolTipText" }] : []));
+        this.clickEvent = output();
+        this.hasTooltipToDisplay = computed(() => {
+            return this.isDisabled() || !!this.toolTipText();
+        }, ...(ngDevMode ? [{ debugName: "hasTooltipToDisplay" }] : []));
+        this.ESortDirection = ESortDirection;
+    }
+    emitClickEvent() {
+        if (!this.isDisabled()) {
+            this.clickEvent.emit();
+        }
+    }
+    showTooltip(event, content) {
+        this.tooltipService.showTooltip(event, content);
+    }
+    hideTooltip() {
+        this.tooltipService.hideTooltip();
+    }
+    updateTooltipPosition(event) {
+        this.tooltipService.updateTooltipPosition(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TableHeaderCellComponent, isStandalone: true, selector: "skcr-table-header-cell", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isOrderByDisplayed: { classPropertyName: "isOrderByDisplayed", publicName: "isOrderByDisplayed", isSignal: true, isRequired: false, transformFunction: null }, disabledText: { classPropertyName: "disabledText", publicName: "disabledText", isSignal: true, isRequired: false, transformFunction: null }, toolTipText: { classPropertyName: "toolTipText", publicName: "toolTipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div>\n  <button\n    class=\"flex items-center gap-1.5 text-start text-caption font-medium text-slate-500\"\n    type=\"button\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [class.opacity-50]=\"isDisabled()\"\n    (click)=\"!isDisabled() && emitClickEvent()\"\n    (mouseenter)=\"hasTooltipToDisplay() ? showTooltip($event, disabledText()) : null\"\n    (mouseleave)=\"hasTooltipToDisplay() ? hideTooltip() : null\"\n    (mousemove)=\"hasTooltipToDisplay() ? updateTooltipPosition($event) : null\"\n  >\n    <span\n      class=\"inline-block whitespace-normal break-words leading-tight\"\n      [class.w-[150px]]=\"isOrderByDisplayed()\"\n      [class.w-[144px]]=\"!isOrderByDisplayed()\"\n    >\n      <ng-content></ng-content>\n    </span>\n\n    @if (isOrderByDisplayed()) {\n      <div class=\"shrink-0 flex items-center\">\n        <div class=\"shrink-0 flex items-center relative\">\n          @switch (sortDirection()) {\n            @case (ESortDirection.Ascending) {\n              <ng-icon\n                class=\"absolute transition-opacity duration-300\"\n                name=\"heroChevronUp\"\n                @fadeIn\n                aria-hidden=\"true\"\n              ></ng-icon>\n            }\n            @case (ESortDirection.Descending) {\n              <ng-icon\n                class=\"absolute transition-opacity duration-300\"\n                name=\"heroChevronDown\"\n                @fadeIn\n                aria-hidden=\"true\"\n              ></ng-icon>\n            }\n            @case (ESortDirection.None) {\n              <ng-icon\n                class=\"absolute transition-opacity duration-300\"\n                name=\"heroChevronUpDown\"\n                @fadeIn\n                aria-hidden=\"true\"\n              ></ng-icon>\n            }\n          }\n        </div>\n      </div>\n    }\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], animations: [
+            trigger('fadeIn', [
+                transition(':enter', [
+                    style({ opacity: 0 }),
+                    animate('300ms', style({ opacity: 1 })),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-table-header-cell', imports: [
+                        NgIcon,
+                    ], animations: [
+                        trigger('fadeIn', [
+                            transition(':enter', [
+                                style({ opacity: 0 }),
+                                animate('300ms', style({ opacity: 1 })),
+                            ]),
+                        ]),
+                    ], template: "<div>\n  <button\n    class=\"flex items-center gap-1.5 text-start text-caption font-medium text-slate-500\"\n    type=\"button\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [class.opacity-50]=\"isDisabled()\"\n    (click)=\"!isDisabled() && emitClickEvent()\"\n    (mouseenter)=\"hasTooltipToDisplay() ? showTooltip($event, disabledText()) : null\"\n    (mouseleave)=\"hasTooltipToDisplay() ? hideTooltip() : null\"\n    (mousemove)=\"hasTooltipToDisplay() ? updateTooltipPosition($event) : null\"\n  >\n    <span\n      class=\"inline-block whitespace-normal break-words leading-tight\"\n      [class.w-[150px]]=\"isOrderByDisplayed()\"\n      [class.w-[144px]]=\"!isOrderByDisplayed()\"\n    >\n      <ng-content></ng-content>\n    </span>\n\n    @if (isOrderByDisplayed()) {\n      <div class=\"shrink-0 flex items-center\">\n        <div class=\"shrink-0 flex items-center relative\">\n          @switch (sortDirection()) {\n            @case (ESortDirection.Ascending) {\n              <ng-icon\n                class=\"absolute transition-opacity duration-300\"\n                name=\"heroChevronUp\"\n                @fadeIn\n                aria-hidden=\"true\"\n              ></ng-icon>\n            }\n            @case (ESortDirection.Descending) {\n              <ng-icon\n                class=\"absolute transition-opacity duration-300\"\n                name=\"heroChevronDown\"\n                @fadeIn\n                aria-hidden=\"true\"\n              ></ng-icon>\n            }\n            @case (ESortDirection.None) {\n              <ng-icon\n                class=\"absolute transition-opacity duration-300\"\n                name=\"heroChevronUpDown\"\n                @fadeIn\n                aria-hidden=\"true\"\n              ></ng-icon>\n            }\n          }\n        </div>\n      </div>\n    }\n  </button>\n</div>\n" }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isOrderByDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOrderByDisplayed", required: false }] }], disabledText: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledText", required: false }] }], toolTipText: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolTipText", required: false }] }], clickEvent: [{ type: i0.Output, args: ["clickEvent"] }] } });
+
+class TableComponent {
+    constructor() {
+        this.itemsList = input.required(...(ngDevMode ? [{ debugName: "itemsList" }] : []));
+        this.isContentLoading = input(false, ...(ngDevMode ? [{ debugName: "isContentLoading" }] : []));
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.columnCategories = input(...(ngDevMode ? [undefined, { debugName: "columnCategories" }] : []));
+        this.noRowsMessage = input('', ...(ngDevMode ? [{ debugName: "noRowsMessage" }] : []));
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.fixedColumnsCount = input(0, ...(ngDevMode ? [{ debugName: "fixedColumnsCount" }] : []));
+        this.selectedItemIds = input(...(ngDevMode ? [undefined, { debugName: "selectedItemIds" }] : []));
+        this.tableEndClose = output();
+        this.headerCellTemplateRef = contentChild('headerCell', ...(ngDevMode ? [{ debugName: "headerCellTemplateRef" }] : []));
+        this.rowCellTemplateRef = contentChild('rowCell', ...(ngDevMode ? [{ debugName: "rowCellTemplateRef" }] : []));
+        this.sortButtons = contentChildren(TableHeaderCellComponent, ...(ngDevMode ? [{ debugName: "sortButtons" }] : []));
+        this.sortingItem = computed(() => {
+            const sortButtons = this.sortButtons();
+            const sortingButton = sortButtons.find(button => button.sortDirection() !== ESortDirection.None);
+            return sortingButton
+                ? {
+                    column: sortingButton.name(),
+                    direction: sortingButton.sortDirection(),
+                }
+                : null;
+        }, ...(ngDevMode ? [{ debugName: "sortingItem" }] : []));
+    }
+    get inverseOfTranslation() {
+        if (!this.viewPort || !this.viewPort['_renderedContentOffset']) {
+            return '-0px';
+        }
+        let offset = this.viewPort['_renderedContentOffset'];
+        return `-${offset}px`;
+    }
+    onScroll(index) {
+        const bufferZone = 250;
+        if (index + bufferZone > this.itemsList().length) {
+            this.tableEndClose.emit();
+        }
+    }
+    scrollToTop() {
+        this.viewPort.scrollToIndex(0);
+    }
+    refreshViewport() {
+        if (this.viewPort) {
+            this.viewPort.checkViewportSize();
+            setTimeout(() => {
+                this.viewPort.checkViewportSize();
+            }, 100);
+        }
+    }
+    getColumnLeftPosition(columnIndex) {
+        if (columnIndex === 0) {
+            return '0px';
+        }
+        const columnWidth = 174;
+        return `${columnIndex * columnWidth}px`;
+    }
+    isRowSelected(item) {
+        return this.selectedItemIds()?.has(item['id']) ?? false;
+    }
+    isCategoryStart(columnIndex) {
+        if (!this.columnCategories() || columnIndex === 0) {
+            return false;
+        }
+        const categories = this.columnCategories();
+        let currentColumnCount = 0;
+        for (const category of categories) {
+            if (currentColumnCount === columnIndex) {
+                return true;
+            }
+            currentColumnCount += category.colspan;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TableComponent, isStandalone: true, selector: "skcr-table", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: true, transformFunction: null }, isContentLoading: { classPropertyName: "isContentLoading", publicName: "isContentLoading", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, columnCategories: { classPropertyName: "columnCategories", publicName: "columnCategories", isSignal: true, isRequired: false, transformFunction: null }, noRowsMessage: { classPropertyName: "noRowsMessage", publicName: "noRowsMessage", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, fixedColumnsCount: { classPropertyName: "fixedColumnsCount", publicName: "fixedColumnsCount", isSignal: true, isRequired: false, transformFunction: null }, selectedItemIds: { classPropertyName: "selectedItemIds", publicName: "selectedItemIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableEndClose: "tableEndClose" }, queries: [{ propertyName: "headerCellTemplateRef", first: true, predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "rowCellTemplateRef", first: true, predicate: ["rowCell"], descendants: true, isSignal: true }, { propertyName: "sortButtons", predicate: TableHeaderCellComponent, isSignal: true }], viewQueries: [{ propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div class=\"border-collapse overflow-hidden w-full mb-6 flex flex-col h-full\">\n  <cdk-virtual-scroll-viewport\n    class=\"flex-grow block overflow-y-auto overflow-x-auto\"\n    (scrolledIndexChange)=\"onScroll($event)\"\n    itemSize=\"52\"\n    minBufferPx=\"2080\"\n    maxBufferPx=\"4160\"\n  >\n    <table class=\"w-full relative table-auto whitespace-nowrap\">\n      <thead\n        class=\"bg-white sticky top-0 z-10 before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[1px] before:bg-slate-200\"\n        [style.top]=\"inverseOfTranslation\"\n      >\n        @if (columnCategories()) {\n          <tr>\n            @for (category of columnCategories(); track category; let i = $index) {\n              <th\n                class=\"py-2 p-3 text-left text-caption text-slate-500\"\n                style=\"box-shadow: inset 0 -1px 0 0 rgb(226 232 240)\"\n                scope=\"colgroup\"\n                [attr.colspan]=\"category.colspan\"\n                [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n                [ngClass]=\"{\n                  'pl-5': i === 0,\n                  'sticky z-[1] bg-white': i === 0,\n                  'border-l border-slate-200': i > 0,\n                }\"\n              >\n                {{ category.label }}\n              </th>\n            }\n          </tr>\n        }\n        <tr>\n          @for (column of columns(); track column; let isLast = $last; let i = $index) {\n            <th\n              class=\"p-3 text-left text-caption font-medium text-slate-500\"\n              style=\"box-shadow: inset 0 -1px 0 0 rgb(226 232 240)\"\n              scope=\"col\"\n              [attr.aria-sort]=\"sortingItem()?.column === column ? sortingItem()!.direction : null\"\n              [ngClass]=\"{\n                'pr-5': isLast,\n                'sticky z-[1] bg-white': i < fixedColumnsCount(),\n                'border-l border-slate-200': isCategoryStart(i),\n              }\"\n              [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n            >\n              <ng-container *ngTemplateOutlet=\"headerCellTemplateRef()!; context: { column }\"></ng-container>\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody>\n        @if (isContentLoading()) {\n          <td\n            class=\"pt-10 sm:px-3\"\n            [colSpan]=\"columns().length\"\n          >\n            <div class=\"flex h-[400px] items-center justify-center\">\n              <app-loader [isNotAbsolute]=\"true\"></app-loader>\n            </div>\n          </td>\n        } @else if (!!itemsList().length) {\n          <tr\n            class=\"height-[50px] border-b border-slate-200\"\n            *cdkVirtualFor=\"let item of !isContentLoading() ? itemsList() : []; let index = index\"\n          >\n            @for (column of columns(); track column; let isFirst = $first; let islast = $last; let i = $index) {\n              <td\n                class=\"py-2 px-3 text-body-small whitespace-nowrap\"\n                [ngClass]=\"{\n                  'pr-5': islast,\n                  'sticky z-[1]': i < fixedColumnsCount(),\n                  'border-l border-slate-200': isCategoryStart(i),\n                  'bg-white': !isRowSelected(item),\n                  'bg-slate-100': isRowSelected(item),\n                }\"\n                [class.text-end]=\"column === 'actions'\"\n                [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n              >\n                <span class=\"inline-block w-[150px] whitespace-normal break-words leading-tight\">\n                  <ng-container *ngTemplateOutlet=\"rowCellTemplateRef()!; context: { column, item }\"></ng-container>\n                </span>\n              </td>\n            }\n          </tr>\n        } @else {\n          <td\n            class=\"pt-10 sm:px-3\"\n            [ngClass]=\"{\n              hidden: isContentLoading(),\n            }\"\n            [colSpan]=\"columns().length\"\n          >\n            <span class=\"flex items-center justify-center\"> No results </span>\n          </td>\n        }\n      </tbody>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["size", "isNotAbsolute"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-table', imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        ScrollingModule,
+                        LoaderComponent,
+                    ], template: "<div class=\"border-collapse overflow-hidden w-full mb-6 flex flex-col h-full\">\n  <cdk-virtual-scroll-viewport\n    class=\"flex-grow block overflow-y-auto overflow-x-auto\"\n    (scrolledIndexChange)=\"onScroll($event)\"\n    itemSize=\"52\"\n    minBufferPx=\"2080\"\n    maxBufferPx=\"4160\"\n  >\n    <table class=\"w-full relative table-auto whitespace-nowrap\">\n      <thead\n        class=\"bg-white sticky top-0 z-10 before:content-[''] before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[1px] before:bg-slate-200\"\n        [style.top]=\"inverseOfTranslation\"\n      >\n        @if (columnCategories()) {\n          <tr>\n            @for (category of columnCategories(); track category; let i = $index) {\n              <th\n                class=\"py-2 p-3 text-left text-caption text-slate-500\"\n                style=\"box-shadow: inset 0 -1px 0 0 rgb(226 232 240)\"\n                scope=\"colgroup\"\n                [attr.colspan]=\"category.colspan\"\n                [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n                [ngClass]=\"{\n                  'pl-5': i === 0,\n                  'sticky z-[1] bg-white': i === 0,\n                  'border-l border-slate-200': i > 0,\n                }\"\n              >\n                {{ category.label }}\n              </th>\n            }\n          </tr>\n        }\n        <tr>\n          @for (column of columns(); track column; let isLast = $last; let i = $index) {\n            <th\n              class=\"p-3 text-left text-caption font-medium text-slate-500\"\n              style=\"box-shadow: inset 0 -1px 0 0 rgb(226 232 240)\"\n              scope=\"col\"\n              [attr.aria-sort]=\"sortingItem()?.column === column ? sortingItem()!.direction : null\"\n              [ngClass]=\"{\n                'pr-5': isLast,\n                'sticky z-[1] bg-white': i < fixedColumnsCount(),\n                'border-l border-slate-200': isCategoryStart(i),\n              }\"\n              [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n            >\n              <ng-container *ngTemplateOutlet=\"headerCellTemplateRef()!; context: { column }\"></ng-container>\n            </th>\n          }\n        </tr>\n      </thead>\n\n      <tbody>\n        @if (isContentLoading()) {\n          <td\n            class=\"pt-10 sm:px-3\"\n            [colSpan]=\"columns().length\"\n          >\n            <div class=\"flex h-[400px] items-center justify-center\">\n              <app-loader [isNotAbsolute]=\"true\"></app-loader>\n            </div>\n          </td>\n        } @else if (!!itemsList().length) {\n          <tr\n            class=\"height-[50px] border-b border-slate-200\"\n            *cdkVirtualFor=\"let item of !isContentLoading() ? itemsList() : []; let index = index\"\n          >\n            @for (column of columns(); track column; let isFirst = $first; let islast = $last; let i = $index) {\n              <td\n                class=\"py-2 px-3 text-body-small whitespace-nowrap\"\n                [ngClass]=\"{\n                  'pr-5': islast,\n                  'sticky z-[1]': i < fixedColumnsCount(),\n                  'border-l border-slate-200': isCategoryStart(i),\n                  'bg-white': !isRowSelected(item),\n                  'bg-slate-100': isRowSelected(item),\n                }\"\n                [class.text-end]=\"column === 'actions'\"\n                [style.left]=\"i < fixedColumnsCount() ? getColumnLeftPosition(i) : null\"\n              >\n                <span class=\"inline-block w-[150px] whitespace-normal break-words leading-tight\">\n                  <ng-container *ngTemplateOutlet=\"rowCellTemplateRef()!; context: { column, item }\"></ng-container>\n                </span>\n              </td>\n            }\n          </tr>\n        } @else {\n          <td\n            class=\"pt-10 sm:px-3\"\n            [ngClass]=\"{\n              hidden: isContentLoading(),\n            }\"\n            [colSpan]=\"columns().length\"\n          >\n            <span class=\"flex items-center justify-center\"> No results </span>\n          </td>\n        }\n      </tbody>\n    </table>\n  </cdk-virtual-scroll-viewport>\n</div>\n" }]
+        }], propDecorators: { viewPort: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport, { static: false }]
+            }], itemsList: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsList", required: true }] }], isContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isContentLoading", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], columnCategories: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnCategories", required: false }] }], noRowsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noRowsMessage", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], fixedColumnsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedColumnsCount", required: false }] }], selectedItemIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemIds", required: false }] }], tableEndClose: [{ type: i0.Output, args: ["tableEndClose"] }], headerCellTemplateRef: [{ type: i0.ContentChild, args: ['headerCell', { isSignal: true }] }], rowCellTemplateRef: [{ type: i0.ContentChild, args: ['rowCell', { isSignal: true }] }], sortButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableHeaderCellComponent), { isSignal: true }] }] } });
+
+class DialogComponent {
+    constructor() {
+        this.hasAnimation = true;
+        this.isLarge = input(false, ...(ngDevMode ? [{ debugName: "isLarge" }] : []));
+        this.isOpen = input(true, { ...(ngDevMode ? { debugName: "isOpen" } : {}), transform: booleanAttribute });
+        this.isCloseAnimDone = output();
+        this.escapeKeyListener = null;
+        this.dialogElement = signal(null, ...(ngDevMode ? [{ debugName: "dialogElement" }] : []));
+    }
+    set dialogElementComponent(dialogElement) {
+        if (dialogElement) {
+            this.dialogElement.set(dialogElement);
+            dialogElement.nativeElement.showModal();
+            this.escapeKeyListener = (event) => {
+                console.log(event.key);
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                }
+            };
+            dialogElement.nativeElement.addEventListener('keydown', this.escapeKeyListener);
+        }
+    }
+    onDialogAnimDone(e) {
+        if (e.toState === 'void') {
+            const dialogEl = this.dialogElement()?.nativeElement;
+            if (dialogEl && this.escapeKeyListener) {
+                dialogEl.removeEventListener('keydown', this.escapeKeyListener);
+                this.escapeKeyListener = null;
+            }
+            dialogEl?.close();
+            this.dialogElement.set(null);
+            this.isCloseAnimDone.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DialogComponent, isStandalone: true, selector: "skcr-dialog", inputs: { isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCloseAnimDone: "isCloseAnimDone" }, host: { properties: { "@ModalTrigger": "this.hasAnimation" } }, viewQueries: [{ propertyName: "dialogElementComponent", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "@if (isOpen()) {\n  <div\n    class=\"fixed inset-0 z-50 bg-slate-500/75 transition-opacity\"\n    [@BackdropTrigger]\n  ></div>\n\n  <dialog\n    class=\"z-[60] fixed inset-0 m-auto rounded-lg shadow-xl backdrop:invisible max-h-[90vh] flex flex-col overflow-hidden scrollbar-hide\"\n    #dialog\n    (cancel)=\"$event.preventDefault()\"\n    [@DialogTrigger]\n    (@DialogTrigger.done)=\"onDialogAnimDone($event)\"\n    [ngClass]=\"{\n      'max-w-lg': !isLarge(),\n      'max-w-4xl': isLarge(),\n    }\"\n  >\n    <ng-content></ng-content>\n  </dialog>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+            trigger('DialogTrigger', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateY(1rem)' }),
+                    animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                ]),
+                transition(':leave', [
+                    style({ opacity: 1, transform: 'translateY(0)' }),
+                    animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(1rem)' })),
+                ]),
+            ]),
+            trigger('BackdropTrigger', [
+                transition(':enter', [
+                    style({ opacity: 0 }),
+                    animate('300ms ease-out', style({ opacity: 1 })),
+                ]),
+                transition(':leave', [
+                    style({ opacity: 1 }),
+                    animate('200ms ease-in', style({ opacity: 0 })),
+                ]),
+            ]),
+            trigger('ModalTrigger', [
+                transition(':enter', [
+                    group([
+                        query('@DialogTrigger', animateChild()),
+                        query('@BackdropTrigger', animateChild()),
+                    ]),
+                ]),
+                transition(':leave', [
+                    group([
+                        query('@DialogTrigger', animateChild()),
+                        query('@BackdropTrigger', animateChild()),
+                    ]),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-dialog', animations: [
+                        trigger('DialogTrigger', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'translateY(1rem)' }),
+                                animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, transform: 'translateY(0)' }),
+                                animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(1rem)' })),
+                            ]),
+                        ]),
+                        trigger('BackdropTrigger', [
+                            transition(':enter', [
+                                style({ opacity: 0 }),
+                                animate('300ms ease-out', style({ opacity: 1 })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1 }),
+                                animate('200ms ease-in', style({ opacity: 0 })),
+                            ]),
+                        ]),
+                        trigger('ModalTrigger', [
+                            transition(':enter', [
+                                group([
+                                    query('@DialogTrigger', animateChild()),
+                                    query('@BackdropTrigger', animateChild()),
+                                ]),
+                            ]),
+                            transition(':leave', [
+                                group([
+                                    query('@DialogTrigger', animateChild()),
+                                    query('@BackdropTrigger', animateChild()),
+                                ]),
+                            ]),
+                        ]),
+                    ], imports: [
+                        NgClass,
+                    ], template: "@if (isOpen()) {\n  <div\n    class=\"fixed inset-0 z-50 bg-slate-500/75 transition-opacity\"\n    [@BackdropTrigger]\n  ></div>\n\n  <dialog\n    class=\"z-[60] fixed inset-0 m-auto rounded-lg shadow-xl backdrop:invisible max-h-[90vh] flex flex-col overflow-hidden scrollbar-hide\"\n    #dialog\n    (cancel)=\"$event.preventDefault()\"\n    [@DialogTrigger]\n    (@DialogTrigger.done)=\"onDialogAnimDone($event)\"\n    [ngClass]=\"{\n      'max-w-lg': !isLarge(),\n      'max-w-4xl': isLarge(),\n    }\"\n  >\n    <ng-content></ng-content>\n  </dialog>\n}\n" }]
+        }], propDecorators: { hasAnimation: [{
+                type: HostBinding,
+                args: ['@ModalTrigger']
+            }], isLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLarge", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], isCloseAnimDone: [{ type: i0.Output, args: ["isCloseAnimDone"] }], dialogElementComponent: [{
+                type: ViewChild,
+                args: ['dialog', { static: false }]
+            }] } });
+
+class ModalComponent {
+    constructor() {
+        this.submitLabel = input('', ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
+        this.isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+        this.isSuccess = input(false, ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
+        this.isLarge = input(false, ...(ngDevMode ? [{ debugName: "isLarge" }] : []));
+        this.form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.submitColorVariant = input(EButtonColorVariant$1.Primary, ...(ngDevMode ? [{ debugName: "submitColorVariant" }] : []));
+        this.closingCondition = input(EModalCloseCondition.Close, ...(ngDevMode ? [{ debugName: "closingCondition" }] : []));
+        this.isCancelButtonVisible = input(false, ...(ngDevMode ? [{ debugName: "isCancelButtonVisible" }] : []));
+        this.cancelLabel = input('', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+        this.isCrossButtonVisible = input(false, ...(ngDevMode ? [{ debugName: "isCrossButtonVisible" }] : []));
+        this.isFooterInvisible = input(false, ...(ngDevMode ? [{ debugName: "isFooterInvisible" }] : []));
+        this.closeEvent = output();
+        this.submitEvent = output();
+        this.isOpen = signal(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        effect(() => {
+            const closingCondition = this.closingCondition();
+            const isSuccess = this.isSuccess();
+            if (closingCondition === EModalCloseCondition.SubmitSuccess && isSuccess) {
+                setTimeout(() => {
+                    this.handleCloseClick();
+                }, 1000);
+            }
+        });
+    }
+    handleCloseClick() {
+        this.isOpen.set(false);
+    }
+    emitCloseEvent() {
+        this.closeEvent.emit();
+    }
+    emitSubmitEvent() {
+        this.submitEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ModalComponent, isStandalone: true, selector: "skcr-modal", inputs: { submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, submitColorVariant: { classPropertyName: "submitColorVariant", publicName: "submitColorVariant", isSignal: true, isRequired: false, transformFunction: null }, closingCondition: { classPropertyName: "closingCondition", publicName: "closingCondition", isSignal: true, isRequired: false, transformFunction: null }, isCancelButtonVisible: { classPropertyName: "isCancelButtonVisible", publicName: "isCancelButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, isCrossButtonVisible: { classPropertyName: "isCrossButtonVisible", publicName: "isCrossButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, isFooterInvisible: { classPropertyName: "isFooterInvisible", publicName: "isFooterInvisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent", submitEvent: "submitEvent" }, ngImport: i0, template: "<skcr-dialog\n  [isOpen]=\"isOpen()\"\n  (isCloseAnimDone)=\"emitCloseEvent()\"\n  [isLarge]=\"isLarge()\"\n>\n  <div\n    class=\"relative flex flex-col h-full overflow-hidden py-4 sm:py-6\"\n    [ngClass]=\"{\n      'px-9': isCrossButtonVisible(),\n      'px-4 sm:px-6': !isCrossButtonVisible(),\n      'max-w-4xl w-4xl': isLarge(),\n      'max-w-lg w-lg': !isLarge(),\n    }\"\n  >\n    @if (isCrossButtonVisible()) {\n      <div class=\"absolute right-0 top-0 pr-4 pt-4\">\n        <button\n          class=\"rounded-md bg-white text-slate-950\"\n          type=\"button\"\n          [disabled]=\"isSubmitting() || isSuccess() || !isOpen()\"\n          (click)=\"handleCloseClick()\"\n        >\n          <span class=\"sr-only\"> Close </span>\n\n          <ng-icon\n            name=\"heroXMark\"\n            size=\"20px\"\n          />\n        </button>\n      </div>\n    }\n\n    <div class=\"flex-1 px-1 overflow-y-auto scrollbar-hide\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (!isFooterInvisible()) {\n      <div\n        class=\"mt-6 flex flex-col justify-center gap-3 pb-1\"\n        [ngClass]=\"{\n          'grid grid-flow-row-dense grid-cols-2': isCancelButtonVisible(),\n          'w-full': !isCancelButtonVisible(),\n        }\"\n      >\n        <skcr-submit-button\n          [label]=\"submitLabel()\"\n          [isLoading]=\"isSubmitting()\"\n          [isSuccess]=\"isSuccess()\"\n          [colorVariant]=\"submitColorVariant()\"\n          (submitClicked)=\"emitSubmitEvent()\"\n          [isFullWidth]=\"true\"\n          [ngClass]=\"{\n            'col-start-2': isCancelButtonVisible(),\n          }\"\n        ></skcr-submit-button>\n\n        @if (isCancelButtonVisible()) {\n          <button\n            class=\"btn btn-neutral max-w-full\"\n            type=\"button\"\n            [disabled]=\"isSubmitting() || isSuccess() || !isOpen()\"\n            (click)=\"handleCloseClick()\"\n          >\n            {{ cancelLabel() || 'Cancel' }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n</skcr-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "skcr-dialog", inputs: ["isLarge", "isOpen"], outputs: ["isCloseAnimDone"] }, { kind: "component", type: SubmitButtonComponent, selector: "skcr-submit-button", inputs: ["label", "isLoading", "isFullWidth", "isDisabled", "isSuccess", "colorVariant"], outputs: ["submitClicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-modal', imports: [
+                        DialogComponent,
+                        SubmitButtonComponent,
+                        NgClass,
+                        NgIcon,
+                    ], template: "<skcr-dialog\n  [isOpen]=\"isOpen()\"\n  (isCloseAnimDone)=\"emitCloseEvent()\"\n  [isLarge]=\"isLarge()\"\n>\n  <div\n    class=\"relative flex flex-col h-full overflow-hidden py-4 sm:py-6\"\n    [ngClass]=\"{\n      'px-9': isCrossButtonVisible(),\n      'px-4 sm:px-6': !isCrossButtonVisible(),\n      'max-w-4xl w-4xl': isLarge(),\n      'max-w-lg w-lg': !isLarge(),\n    }\"\n  >\n    @if (isCrossButtonVisible()) {\n      <div class=\"absolute right-0 top-0 pr-4 pt-4\">\n        <button\n          class=\"rounded-md bg-white text-slate-950\"\n          type=\"button\"\n          [disabled]=\"isSubmitting() || isSuccess() || !isOpen()\"\n          (click)=\"handleCloseClick()\"\n        >\n          <span class=\"sr-only\"> Close </span>\n\n          <ng-icon\n            name=\"heroXMark\"\n            size=\"20px\"\n          />\n        </button>\n      </div>\n    }\n\n    <div class=\"flex-1 px-1 overflow-y-auto scrollbar-hide\">\n      <ng-content></ng-content>\n    </div>\n\n    @if (!isFooterInvisible()) {\n      <div\n        class=\"mt-6 flex flex-col justify-center gap-3 pb-1\"\n        [ngClass]=\"{\n          'grid grid-flow-row-dense grid-cols-2': isCancelButtonVisible(),\n          'w-full': !isCancelButtonVisible(),\n        }\"\n      >\n        <skcr-submit-button\n          [label]=\"submitLabel()\"\n          [isLoading]=\"isSubmitting()\"\n          [isSuccess]=\"isSuccess()\"\n          [colorVariant]=\"submitColorVariant()\"\n          (submitClicked)=\"emitSubmitEvent()\"\n          [isFullWidth]=\"true\"\n          [ngClass]=\"{\n            'col-start-2': isCancelButtonVisible(),\n          }\"\n        ></skcr-submit-button>\n\n        @if (isCancelButtonVisible()) {\n          <button\n            class=\"btn btn-neutral max-w-full\"\n            type=\"button\"\n            [disabled]=\"isSubmitting() || isSuccess() || !isOpen()\"\n            (click)=\"handleCloseClick()\"\n          >\n            {{ cancelLabel() || 'Cancel' }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n</skcr-dialog>\n" }]
+        }], ctorParameters: () => [], propDecorators: { submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], isSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSuccess", required: false }] }], isLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLarge", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], submitColorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitColorVariant", required: false }] }], closingCondition: [{ type: i0.Input, args: [{ isSignal: true, alias: "closingCondition", required: false }] }], isCancelButtonVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCancelButtonVisible", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], isCrossButtonVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCrossButtonVisible", required: false }] }], isFooterInvisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFooterInvisible", required: false }] }], closeEvent: [{ type: i0.Output, args: ["closeEvent"] }], submitEvent: [{ type: i0.Output, args: ["submitEvent"] }] } });
+
+class ConfirmationModalComponent {
+    constructor() {
+        this.class = 'absolute';
+        this.submitLabel = input.required(...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
+        this.isSubmitting = input(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+        this.isSuccess = input(false, ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
+        this.form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.isCloseButtonVisible = input(false, ...(ngDevMode ? [{ debugName: "isCloseButtonVisible" }] : []));
+        this.cancelLabel = input('', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+        this.levelVariant = input(EConfirmLevelVariant.Info, ...(ngDevMode ? [{ debugName: "levelVariant" }] : []));
+        this.closingCondition = input(EModalCloseCondition.SubmitSuccess, ...(ngDevMode ? [{ debugName: "closingCondition" }] : []));
+        this.closeEvent = output();
+        this.submitEvent = output();
+        this.iconKey = computed(() => {
+            return this.levelVariant() === EConfirmLevelVariant.Success ? 'heroCheckCircle' : 'heroExclamationTriangle';
+        }, ...(ngDevMode ? [{ debugName: "iconKey" }] : []));
+        this.submitColorVariant = computed(() => {
+            return this.levelVariant() === EConfirmLevelVariant.Danger
+                ? EButtonColorVariant$1.Danger
+                : EButtonColorVariant$1.Primary;
+        }, ...(ngDevMode ? [{ debugName: "submitColorVariant" }] : []));
+        this.iconColorVariant = computed(() => {
+            return this.levelVariant() === EConfirmLevelVariant.Danger ? 'text-red-500' : 'text-primary-l';
+        }, ...(ngDevMode ? [{ debugName: "iconColorVariant" }] : []));
+    }
+    emitCloseEvent() {
+        this.closeEvent.emit();
+    }
+    emitSubmitEvent() {
+        this.submitEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ConfirmationModalComponent, isStandalone: true, selector: "skcr-confirmation-modal", inputs: { submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: true, transformFunction: null }, isSubmitting: { classPropertyName: "isSubmitting", publicName: "isSubmitting", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, isCloseButtonVisible: { classPropertyName: "isCloseButtonVisible", publicName: "isCloseButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, levelVariant: { classPropertyName: "levelVariant", publicName: "levelVariant", isSignal: true, isRequired: false, transformFunction: null }, closingCondition: { classPropertyName: "closingCondition", publicName: "closingCondition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent", submitEvent: "submitEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<skcr-modal\n  [submitColorVariant]=\"submitColorVariant()\"\n  [submitLabel]=\"submitLabel()\"\n  [isSubmitting]=\"isSubmitting()\"\n  [isSuccess]=\"isSuccess()\"\n  [closingCondition]=\"closingCondition()\"\n  [isCancelButtonVisible]=\"isCloseButtonVisible()\"\n  (submitEvent)=\"emitSubmitEvent()\"\n  (closeEvent)=\"emitCloseEvent()\"\n>\n  <div class=\"flex max-w-xl flex-col gap-3\">\n    @if (iconKey()) {\n      <div [class]=\"'mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full ' + iconColorVariant()\">\n        <ng-icon\n          [name]=\"iconKey()!\"\n          size=\"48px\"\n        />\n      </div>\n    }\n\n    <div class=\"flex flex-col gap-8\">\n      <ng-content select=\"[title]\"></ng-content>\n\n      <ng-content select=\"[content]\"></ng-content>\n    </div>\n  </div>\n</skcr-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "skcr-modal", inputs: ["submitLabel", "isSubmitting", "isSuccess", "isLarge", "form", "submitColorVariant", "closingCondition", "isCancelButtonVisible", "cancelLabel", "isCrossButtonVisible", "isFooterInvisible"], outputs: ["closeEvent", "submitEvent"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-confirmation-modal', imports: [
+                        ModalComponent,
+                        NgIcon,
+                    ], template: "<skcr-modal\n  [submitColorVariant]=\"submitColorVariant()\"\n  [submitLabel]=\"submitLabel()\"\n  [isSubmitting]=\"isSubmitting()\"\n  [isSuccess]=\"isSuccess()\"\n  [closingCondition]=\"closingCondition()\"\n  [isCancelButtonVisible]=\"isCloseButtonVisible()\"\n  (submitEvent)=\"emitSubmitEvent()\"\n  (closeEvent)=\"emitCloseEvent()\"\n>\n  <div class=\"flex max-w-xl flex-col gap-3\">\n    @if (iconKey()) {\n      <div [class]=\"'mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full ' + iconColorVariant()\">\n        <ng-icon\n          [name]=\"iconKey()!\"\n          size=\"48px\"\n        />\n      </div>\n    }\n\n    <div class=\"flex flex-col gap-8\">\n      <ng-content select=\"[title]\"></ng-content>\n\n      <ng-content select=\"[content]\"></ng-content>\n    </div>\n  </div>\n</skcr-modal>\n" }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: true }] }], isSubmitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmitting", required: false }] }], isSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSuccess", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], isCloseButtonVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCloseButtonVisible", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], levelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelVariant", required: false }] }], closingCondition: [{ type: i0.Input, args: [{ isSignal: true, alias: "closingCondition", required: false }] }], closeEvent: [{ type: i0.Output, args: ["closeEvent"] }], submitEvent: [{ type: i0.Output, args: ["submitEvent"] }] } });
+
+class DropdownMenuComponent {
+    constructor() {
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.labelIcon = input(...(ngDevMode ? [undefined, { debugName: "labelIcon" }] : []));
+        this.isOpeningOnLeft = input(false, ...(ngDevMode ? [{ debugName: "isOpeningOnLeft" }] : []));
+        this.menuClosed = output();
+        this.isMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : []));
+        this.clickOutsideHandler = (e) => {
+            const target = e.target;
+            const isClickInDropdown = this.dropdownMenu?.nativeElement.contains(target);
+            const isClickInToggleButton = this.toggleButton?.nativeElement.contains(target);
+            if (!isClickInDropdown && !isClickInToggleButton) {
+                this.closeMenu();
+            }
+        };
+    }
+    toggleMenu() {
+        this.isMenuOpen.update(isOpen => !isOpen);
+        if (this.isMenuOpen()) {
+            document.addEventListener('click', this.clickOutsideHandler);
+        }
+        else {
+            document.removeEventListener('click', this.clickOutsideHandler);
+        }
+    }
+    closeMenu() {
+        this.isMenuOpen.set(false);
+        document.removeEventListener('click', this.clickOutsideHandler);
+        this.menuClosed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DropdownMenuComponent, isStandalone: true, selector: "skcr-dropdown-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, isOpeningOnLeft: { classPropertyName: "isOpeningOnLeft", publicName: "isOpeningOnLeft", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuClosed: "menuClosed" }, viewQueries: [{ propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }, { propertyName: "toggleButton", first: true, predicate: ["toggleButton"], descendants: true }], ngImport: i0, template: "<div class=\"relative h-fit inline-block text-left\">\n  <div>\n    <button\n      class=\"cursor-pointer inline-flex items-center rounded-md gap-1 h-full items-center border-b-2 border-transparent px-3 py-2 hover:bg-slate-100\"\n      #toggleButton\n      type=\"button\"\n      (click)=\"toggleMenu()\"\n    >\n      {{ label() }}\n\n      <ng-icon\n        [name]=\"labelIcon() ?? 'heroChevronDown'\"\n        [size]=\"labelIcon() ? '1.25rem' : '1rem'\"\n      ></ng-icon>\n    </button>\n  </div>\n\n  @if (isMenuOpen()) {\n    <div\n      class=\"absolute z-10 mt-2 min-w-33 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-hidden\"\n      #dropdownMenu\n      role=\"menu\"\n      tabindex=\"-1\"\n      @dropdownAnimation\n      [class.left-0]=\"!isOpeningOnLeft()\"\n      [class.right-0]=\"isOpeningOnLeft()\"\n      aria-orientation=\"vertical\"\n      aria-labelledby=\"menu-button\"\n    >\n      <div\n        class=\"flex flex-col py-1\"\n        role=\"none\"\n        (click)=\"closeMenu()\"\n      >\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], animations: [
+            trigger('dropdownAnimation', [
+                transition(':enter', [
+                    style({ opacity: 0, transform: 'translateY(-10px)' }),
+                    animate('200ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                ]),
+                transition(':leave', [
+                    style({ opacity: 1 }),
+                    animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(-10px)' })),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-dropdown-menu', imports: [
+                        NgIcon,
+                    ], animations: [
+                        trigger('dropdownAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, transform: 'translateY(-10px)' }),
+                                animate('200ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1 }),
+                                animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(-10px)' })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"relative h-fit inline-block text-left\">\n  <div>\n    <button\n      class=\"cursor-pointer inline-flex items-center rounded-md gap-1 h-full items-center border-b-2 border-transparent px-3 py-2 hover:bg-slate-100\"\n      #toggleButton\n      type=\"button\"\n      (click)=\"toggleMenu()\"\n    >\n      {{ label() }}\n\n      <ng-icon\n        [name]=\"labelIcon() ?? 'heroChevronDown'\"\n        [size]=\"labelIcon() ? '1.25rem' : '1rem'\"\n      ></ng-icon>\n    </button>\n  </div>\n\n  @if (isMenuOpen()) {\n    <div\n      class=\"absolute z-10 mt-2 min-w-33 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-hidden\"\n      #dropdownMenu\n      role=\"menu\"\n      tabindex=\"-1\"\n      @dropdownAnimation\n      [class.left-0]=\"!isOpeningOnLeft()\"\n      [class.right-0]=\"isOpeningOnLeft()\"\n      aria-orientation=\"vertical\"\n      aria-labelledby=\"menu-button\"\n    >\n      <div\n        class=\"flex flex-col py-1\"\n        role=\"none\"\n        (click)=\"closeMenu()\"\n      >\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { dropdownMenu: [{
+                type: ViewChild,
+                args: ['dropdownMenu']
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['toggleButton']
+            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIcon", required: false }] }], isOpeningOnLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpeningOnLeft", required: false }] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
+
+const DD_MM_YYYY_FORMAT = {
+    parse: {
+        dateInput: 'DD/MM/YYYY',
+    },
+    display: {
+        dateInput: 'DD/MM/YYYY',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'LL',
+        monthYearA11yLabel: 'MMMM YYYY',
+    },
+};
+class DatePickerComponent {
+    constructor() {
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.isInvalid = input(false, ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
+        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.dateAdapter = inject((DateAdapter));
+        this.dateAdapter.setLocale('fr-FR');
+    }
+    formatDate(date) {
+        if (!date)
+            return '';
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+    parseDate(dateStr) {
+        if (!dateStr)
+            return null;
+        dateStr = dateStr.replace(/[^\d/]/g, '');
+        if (dateStr.length === 2 && !dateStr.includes('/')) {
+            dateStr += '/';
+        }
+        else if (dateStr.length === 5 && dateStr.indexOf('/', 3) === -1) {
+            dateStr += '/';
+        }
+        const parts = dateStr.split('/');
+        if (parts.length !== 3)
+            return null;
+        const day = parseInt(parts[0], 10);
+        const month = parseInt(parts[1], 10) - 1;
+        const year = parseInt(parts[2], 10);
+        if (isNaN(day) || isNaN(month) || isNaN(year))
+            return null;
+        const date = new Date(year, month, day);
+        if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
+            return null;
+        }
+        return date;
+    }
+    onDateChange(date) {
+        this.value.set(date);
+        // this.markAsTouched();
+    }
+    onInputChange(event) {
+        const input = event.target;
+        const value = input.value;
+        let formattedValue = value.replace(/[^\d/]/g, '');
+        if (formattedValue.length === 2 && !formattedValue.includes('/')) {
+            formattedValue = formattedValue + '/';
+            input.value = formattedValue;
+        }
+        else if (formattedValue.length === 5 && formattedValue.indexOf('/', 3) === -1) {
+            formattedValue = formattedValue + '/';
+            input.value = formattedValue;
+        }
+        const date = this.parseDate(formattedValue);
+        this.value.set(date);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: DatePickerComponent, isStandalone: true, selector: "skcr-date-picker", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            { provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_FORMAT },
+            { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
+        ], ngImport: i0, template: "<div>\n  <label\n    class=\"mb-1 block\"\n    [for]=\"name()\"\n  >\n    {{ label() }}\n  </label>\n\n  <!-- Custom styled input that looks like other inputs in the project -->\n  <div class=\"relative\">\n    <input\n      class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 placeholder:text-slate-500\"\n      [id]=\"name()\"\n      [name]=\"name()\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [matDatepicker]=\"picker\"\n      [value]=\"value()\"\n      [attr.value]=\"value() ? formatDate(value()) : ''\"\n      (dateChange)=\"onDateChange($event.value)\"\n      (input)=\"onInputChange($event)\"\n      [disabled]=\"isDisabled()\"\n      [ngClass]=\"{\n        'border-destructive placeholder-destructive focus:border-destructive focus:ring-destructive': isInvalid(),\n        'border-lightGrey focus:border-primary focus:ring-primaryBlue': !isInvalid(),\n        'cursor-not-allowed bg-slate-50': isDisabled(),\n      }\"\n    />\n    <button\n      class=\"absolute right-2 top-1/2 -translate-y-1/2\"\n      type=\"button\"\n      (click)=\"picker.open()\"\n      [disabled]=\"isDisabled()\"\n    >\n      <svg\n        class=\"h-5 w-5\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Hidden Material datepicker -->\n  <mat-datepicker\n    #picker\n    [startAt]=\"value()\"\n    [disabled]=\"isDisabled()\"\n  ></mat-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-date-picker', providers: [
+                        { provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_FORMAT },
+                        { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
+                    ], imports: [
+                        NgClass,
+                        FormsModule,
+                        MatDatepickerModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatNativeDateModule,
+                        FormsModule,
+                        MatDatepickerModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatNativeDateModule,
+                    ], template: "<div>\n  <label\n    class=\"mb-1 block\"\n    [for]=\"name()\"\n  >\n    {{ label() }}\n  </label>\n\n  <!-- Custom styled input that looks like other inputs in the project -->\n  <div class=\"relative\">\n    <input\n      class=\"block w-full rounded-md px-3 py-2 text-body-small shadow-sm outline-1 -outline-offset-1 outline-border-color focus:outline-2 focus:-outline-offset-2 placeholder:text-slate-500\"\n      [id]=\"name()\"\n      [name]=\"name()\"\n      type=\"text\"\n      [placeholder]=\"placeholder()\"\n      [matDatepicker]=\"picker\"\n      [value]=\"value()\"\n      [attr.value]=\"value() ? formatDate(value()) : ''\"\n      (dateChange)=\"onDateChange($event.value)\"\n      (input)=\"onInputChange($event)\"\n      [disabled]=\"isDisabled()\"\n      [ngClass]=\"{\n        'border-destructive placeholder-destructive focus:border-destructive focus:ring-destructive': isInvalid(),\n        'border-lightGrey focus:border-primary focus:ring-primaryBlue': !isInvalid(),\n        'cursor-not-allowed bg-slate-50': isDisabled(),\n      }\"\n    />\n    <button\n      class=\"absolute right-2 top-1/2 -translate-y-1/2\"\n      type=\"button\"\n      (click)=\"picker.open()\"\n      [disabled]=\"isDisabled()\"\n    >\n      <svg\n        class=\"h-5 w-5\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n        />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Hidden Material datepicker -->\n  <mat-datepicker\n    #picker\n    [startAt]=\"value()\"\n    [disabled]=\"isDisabled()\"\n  ></mat-datepicker>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class RadioButtonComponent {
+    constructor() {
+        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    }
+    onRadioChange(value) {
+        this.value.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: RadioButtonComponent, isStandalone: true, selector: "skcr-radio-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<fieldset class=\"flex items-center gap-4 flex-row\">\n  <legend>{{ label() }}</legend>\n\n  <div class=\"flex gap-4\">\n    @for (option of options(); track option.value) {\n      <div class=\"flex items-center\">\n        <input\n          class=\"relative size-4 appearance-none rounded-full border border-border-color bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-primary checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-border-color disabled:bg-slate-100 disabled:before:bg-slate-400 forced-colors:appearance-auto forced-colors:before:hidden\"\n          [id]=\"option.name\"\n          type=\"radio\"\n          [name]=\"label()\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled()\"\n          (change)=\"onRadioChange(option.value)\"\n        />\n\n        <label\n          class=\"ml-3 block\"\n          [for]=\"option.name\"\n          >{{ option.name }}</label\n        >\n      </div>\n    }\n  </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-radio-button', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<fieldset class=\"flex items-center gap-4 flex-row\">\n  <legend>{{ label() }}</legend>\n\n  <div class=\"flex gap-4\">\n    @for (option of options(); track option.value) {\n      <div class=\"flex items-center\">\n        <input\n          class=\"relative size-4 appearance-none rounded-full border border-border-color bg-white before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-primary checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:border-border-color disabled:bg-slate-100 disabled:before:bg-slate-400 forced-colors:appearance-auto forced-colors:before:hidden\"\n          [id]=\"option.name\"\n          type=\"radio\"\n          [name]=\"label()\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled()\"\n          (change)=\"onRadioChange(option.value)\"\n        />\n\n        <label\n          class=\"ml-3 block\"\n          [for]=\"option.name\"\n          >{{ option.name }}</label\n        >\n      </div>\n    }\n  </div>\n</fieldset>\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class ToastService {
+    constructor() {
+        this.newToastEvent$ = new Subject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ToastComponent {
+    constructor() {
+        this.class = 'flex w-full flex-col items-center space-y-4 sm:items-end';
+        this.toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : []));
+        this.disposeEvent = output();
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.closeToast();
+        }, 5000);
+    }
+    closeToast() {
+        this.disposeEvent.emit(this.toast());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ToastComponent, isStandalone: true, selector: "app-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { disposeEvent: "disposeEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div\n  class=\"ring-opacity/5 pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg\"\n  @AnimationTrigger0\n>\n  <div class=\"p-4\">\n    <div class=\"flex items-center\">\n      <ng-icon\n        class=\"shrink-0 text-destructive\"\n        name=\"heroXCircle\"\n      />\n\n      <div class=\"ml-3 w-0 flex-1 pt-0.5\">\n        <p class=\"text-destructive\">An error occured</p>\n\n        @if (!!toast().message || !!toast().key) {\n          <p class=\"mt-1 text-body-small text-slate-500\">\n            <span>\n              {{ toast().message }}\n            </span>\n          </p>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], animations: [
+            trigger('AnimationTrigger0', [
+                transition(':enter', [
+                    style({ transform: 'translateY(0.5rem)', opacity: 0 }),
+                    animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 })),
+                ]),
+                transition(':leave', [
+                    style({ opacity: 1 }),
+                    animate('100ms ease-in', style({ opacity: 0 })),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-toast', animations: [
+                        trigger('AnimationTrigger0', [
+                            transition(':enter', [
+                                style({ transform: 'translateY(0.5rem)', opacity: 0 }),
+                                animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 })),
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1 }),
+                                animate('100ms ease-in', style({ opacity: 0 })),
+                            ]),
+                        ]),
+                    ], imports: [
+                        NgIcon,
+                    ], template: "<div\n  class=\"ring-opacity/5 pointer-events-auto w-full max-w-sm overflow-hidden rounded-md bg-white shadow-lg\"\n  @AnimationTrigger0\n>\n  <div class=\"p-4\">\n    <div class=\"flex items-center\">\n      <ng-icon\n        class=\"shrink-0 text-destructive\"\n        name=\"heroXCircle\"\n      />\n\n      <div class=\"ml-3 w-0 flex-1 pt-0.5\">\n        <p class=\"text-destructive\">An error occured</p>\n\n        @if (!!toast().message || !!toast().key) {\n          <p class=\"mt-1 text-body-small text-slate-500\">\n            <span>\n              {{ toast().message }}\n            </span>\n          </p>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], disposeEvent: [{ type: i0.Output, args: ["disposeEvent"] }] } });
+
+class ToasterComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.toastService = inject(ToastService);
+        this.currentToasts = [];
+    }
+    ngOnInit() {
+        this.subscribeToToasts();
+    }
+    subscribeToToasts() {
+        this.newToastSub = this.toastService.newToastEvent$.subscribe(toast => {
+            const currentToast = {
+                id: Date.now(),
+                key: toast.key,
+                message: toast.message,
+            };
+            this.currentToasts.push(currentToast);
+            this.cdr.detectChanges();
+        });
+    }
+    dispose(toastToRemove) {
+        const toastIndex = this.currentToasts.findIndex(toast => toast.id === toastToRemove.id);
+        this.currentToasts.splice(toastIndex, 1);
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ToasterComponent, isStandalone: true, selector: "skcr-toaster", ngImport: i0, template: "<div class=\"fixed end-0 top-0 z-100 m-16 px-3 py-2\">\n  <div\n    class=\"pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6\"\n    aria-live=\"assertive\"\n  >\n    <div class=\"flex w-full flex-col items-center space-y-4 sm:items-end\">\n      @for (toast of currentToasts; track toast; let i = $index) {\n        <app-toast\n          [toast]=\"toast\"\n          (disposeEvent)=\"dispose($event)\"\n        ></app-toast>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: ToastComponent, selector: "app-toast", inputs: ["toast"], outputs: ["disposeEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ToasterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'skcr-toaster', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ToastComponent,
+                    ], template: "<div class=\"fixed end-0 top-0 z-100 m-16 px-3 py-2\">\n  <div\n    class=\"pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6\"\n    aria-live=\"assertive\"\n  >\n    <div class=\"flex w-full flex-col items-center space-y-4 sm:items-end\">\n      @for (toast of currentToasts; track toast; let i = $index) {\n        <app-toast\n          [toast]=\"toast\"\n          (disposeEvent)=\"dispose($event)\"\n        ></app-toast>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Autechre, InputComponent, InputNumberComponent, MultiSelectComponent, SubmitButtonComponent };
+export { CheckboxClassicComponent, CheckboxComponent, ConfirmationModalComponent, DD_MM_YYYY_FORMAT, DatePickerComponent, DialogComponent, DropdownMenuComponent, EButtonColorVariant$1 as EButtonColorVariant, EConfirmLevelVariant, EModalCloseCondition, ESortDirection, InputComponent, InputNumberComponent, LoaderComponent, ModalComponent, MultiSelectComponent, RadioButtonComponent, SelectComponent, SubmitButtonComponent, TableComponent, TableHeaderCellComponent, ToastComponent, ToastService, ToasterComponent };
 //# sourceMappingURL=skcr-autechre.mjs.map