@nxa-lab/nxa-ui 0.3.6

package/fesm2022/nxa-lab-nxa-ui.mjs

@@ -0,0 +1,3571 @@
+import * as i0 from '@angular/core';
+import { Component, signal, EventEmitter, computed, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, effect, forwardRef, Injectable, InjectionToken, inject, Injector, contentChildren, HostBinding, Directive, ElementRef, NgZone, viewChild, ViewContainerRef, HostListener } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { provideIcons, NgIcon } from '@ng-icons/core';
+import { heroChevronUpSolid, heroChevronDownSolid } from '@ng-icons/heroicons/solid';
+import { BehaviorSubject, map, throttleTime, isObservable, firstValueFrom, timer, switchMap, finalize } from 'rxjs';
+import { HttpContextToken } from '@angular/common/http';
+import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { bootstrapInfoCircle } from '@ng-icons/bootstrap-icons';
+import { heroChevronLeft, heroChevronRight } from '@ng-icons/heroicons/outline';
+import * as i2 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { moveItemInArray, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
+import { DomSanitizer } from '@angular/platform-browser';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+
+const NXA_COLORS_ALL = [
+    'primary',
+    'secondary',
+    'accent',
+    'neutral',
+    'info',
+    'warning',
+    'error',
+    'success',
+    'content',
+    'ghost',
+    'link',
+];
+const NXA_NEUTRAL_COLORS = [
+    'neutral'
+];
+const NXA_CONTENT_COLORS = [
+    'content'
+];
+const NXA_BRAND_COLORS = [
+    'primary',
+    'secondary',
+    'accent',
+];
+const NXA_STATUS_COLORS = [
+    'info',
+    'success',
+    'warning',
+    'error',
+];
+
+function applyMixins(derivedCtor, constructors) {
+    constructors.forEach((baseCtor) => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
+            Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
+                Object.create(null));
+        });
+    });
+}
+
+const NXA_SIZES = [
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl'
+];
+
+const NXA_HOST_CONTENTS_ONLY = 'contents';
+const NXA_HOST_BLOCK = 'block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border';
+const NXA_HOST_LAYOUT = 'w-full h-full min-h-0 flex flex-col flex-1';
+function sanitizeIcon(icon, sanitizer) {
+    return sanitizer.bypassSecurityTrustHtml(icon);
+}
+function isBrowserContext() {
+    return typeof document !== "undefined";
+}
+function isServerContext() {
+    return typeof document === "undefined";
+}
+function shallowEqual(obj1, obj2) {
+    if (obj1 === obj2)
+        return true;
+    if (!obj1 || !obj2)
+        return false;
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length)
+        return false;
+    for (const key of keys1) {
+        if (obj1[key] !== obj2[key])
+            return false;
+    }
+    return true;
+}
+function deepEqual(a, b) {
+    if (a === b)
+        return true;
+    // Handle NaN
+    if (typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b)) {
+        return true;
+    }
+    if (typeof a !== 'object' || a === null ||
+        typeof b !== 'object' || b === null) {
+        return false;
+    }
+    // Date
+    if (a instanceof Date && b instanceof Date) {
+        return a.getTime() === b.getTime();
+    }
+    // RegExp
+    if (a instanceof RegExp && b instanceof RegExp) {
+        return a.toString() === b.toString();
+    }
+    // Arrays
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    for (const key of keysA) {
+        if (!keysB.includes(key))
+            return false;
+        if (!deepEqual(a[key], b[key]))
+            return false;
+    }
+    return true;
+}
+function getStyleVariable(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(`${name}`).trim();
+}
+
+class NxaFormControl {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaFormControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaFormControl, isStandalone: true, selector: "nxa-form-control", host: { properties: { "attr.id": "null" }, classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border" }, ngImport: i0, template: "<!--  container -->\n<div class=\"nxa-form-control-container\">\n  <!-- Top Label Container -->\n  <div class=\"nxa-form-control-top\">\n    <div>\n      <ng-content select=\"[top-left]\"></ng-content>\n    </div>\n    <div>\n      <ng-content select=\"[top-right]\"></ng-content>\n    </div>\n  </div>\n  <!-- Input container -->\n  <div class=\"nxa-form-control-input-container\">\n    <div>\n      <ng-content select=\"[leading]\"></ng-content>\n    </div>\n    <ng-content select=\"\"></ng-content>\n    <div>\n      <ng-content select=\"[trailing]\"></ng-content>\n    </div>\n\n  </div>\n  <!-- Bottom Label Container -->\n  <div class=\"nxa-form-control-bottom\">\n    <div>\n      <ng-content select=\"[bottom-left]\"></ng-content>\n    </div>\n    <div>\n      <ng-content select=\"[bottom-right]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- Error message Container -->\n<div class=\"nxa-form-control-error-message\">\n  <ng-content select=\"[error-message]\"></ng-content>\n</div>", styles: [".nxa-form-control-container{width:100%;min-width:calc(var(--spacing, .25rem) * 10)}.nxa-form-control-input-container{display:flex;width:100%;flex-direction:row;align-items:center;padding-top:calc(var(--spacing, .25rem) * 0)}.nxa-form-control-top{width:100%;flex-direction:row;justify-content:space-between;padding-bottom:calc(var(--spacing, .25rem) * 0)}@layer daisyui.l1.l2.l3{.nxa-form-control-top{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;color:currentcolor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-top{color:color-mix(in oklab,currentcolor 60%,transparent)}}.nxa-form-control-top:has(input){cursor:pointer}.nxa-form-control-top:is(.input>*,.select>*){display:flex;height:calc(100% - .5rem);align-items:center;padding-inline:.75rem;white-space:nowrap;font-size:inherit}.nxa-form-control-top:is(.input>*,.select>*):first-child{margin-inline-start:-.75rem;margin-inline-end:.75rem;border-inline-end:var(--border) solid currentColor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-top:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid color-mix(in oklab,currentColor 10%,#0000)}}.nxa-form-control-top:is(.input>*,.select>*):last-child{margin-inline-start:.75rem;margin-inline-end:-.75rem;border-inline-start:var(--border) solid currentColor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-top:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid color-mix(in oklab,currentColor 10%,#0000)}}}.nxa-form-control-bottom{width:100%;flex-direction:row;justify-content:space-between;padding-bottom:calc(var(--spacing, .25rem) * 0)}@layer daisyui.l1.l2.l3{.nxa-form-control-bottom{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;color:currentcolor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-bottom{color:color-mix(in oklab,currentcolor 60%,transparent)}}.nxa-form-control-bottom:has(input){cursor:pointer}.nxa-form-control-bottom:is(.input>*,.select>*){display:flex;height:calc(100% - .5rem);align-items:center;padding-inline:.75rem;white-space:nowrap;font-size:inherit}.nxa-form-control-bottom:is(.input>*,.select>*):first-child{margin-inline-start:-.75rem;margin-inline-end:.75rem;border-inline-end:var(--border) solid currentColor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-bottom:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid color-mix(in oklab,currentColor 10%,#0000)}}.nxa-form-control-bottom:is(.input>*,.select>*):last-child{margin-inline-start:.75rem;margin-inline-end:-.75rem;border-inline-start:var(--border) solid currentColor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-bottom:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid color-mix(in oklab,currentColor 10%,#0000)}}}.nxa-form-control-error-message{margin:calc(var(--spacing, .25rem) * 0);display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-error)}@layer base{:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}}@layer base{:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root{--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")}}@layer base{:root{scrollbar-color:currentColor #0000}@supports (color: color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000) #0000}}}@layer base{@property --radialprogress{syntax: \"<percentage>\"; inherits: true; initial-value: 0%;}}@layer base{:root:not(span){overflow:var(--page-overflow)}}@layer base{:root{background:var(--page-scroll-bg, var(--root-bg));--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) var(--root-bg, #0000);--page-scroll-transition-on: background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter, unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset)}@supports (color: color-mix(in lab,red,red)){:root{--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%))}}@keyframes set-page-has-scroll{0%,to{--page-has-scroll: 1}}}@layer base{:root,[data-theme]{background:var(--page-scroll-bg, var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg: var(--color-base-100)}}@keyframes rating{0%,40%{scale:1.1;filter:brightness(1.05) contrast(1.05)}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{scale:.9;opacity:0}to{scale:1;opacity:1}}@keyframes rotator{89.9999%,to{--first-item-position: 0 0%}90%,99.9999%{--first-item-position: 0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaFormControl, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-form-control', host: {
+                        '[attr.id]': 'null',
+                        class: NXA_HOST_BLOCK,
+                    }, template: "<!--  container -->\n<div class=\"nxa-form-control-container\">\n  <!-- Top Label Container -->\n  <div class=\"nxa-form-control-top\">\n    <div>\n      <ng-content select=\"[top-left]\"></ng-content>\n    </div>\n    <div>\n      <ng-content select=\"[top-right]\"></ng-content>\n    </div>\n  </div>\n  <!-- Input container -->\n  <div class=\"nxa-form-control-input-container\">\n    <div>\n      <ng-content select=\"[leading]\"></ng-content>\n    </div>\n    <ng-content select=\"\"></ng-content>\n    <div>\n      <ng-content select=\"[trailing]\"></ng-content>\n    </div>\n\n  </div>\n  <!-- Bottom Label Container -->\n  <div class=\"nxa-form-control-bottom\">\n    <div>\n      <ng-content select=\"[bottom-left]\"></ng-content>\n    </div>\n    <div>\n      <ng-content select=\"[bottom-right]\"></ng-content>\n    </div>\n  </div>\n</div>\n<!-- Error message Container -->\n<div class=\"nxa-form-control-error-message\">\n  <ng-content select=\"[error-message]\"></ng-content>\n</div>", styles: [".nxa-form-control-container{width:100%;min-width:calc(var(--spacing, .25rem) * 10)}.nxa-form-control-input-container{display:flex;width:100%;flex-direction:row;align-items:center;padding-top:calc(var(--spacing, .25rem) * 0)}.nxa-form-control-top{width:100%;flex-direction:row;justify-content:space-between;padding-bottom:calc(var(--spacing, .25rem) * 0)}@layer daisyui.l1.l2.l3{.nxa-form-control-top{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;color:currentcolor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-top{color:color-mix(in oklab,currentcolor 60%,transparent)}}.nxa-form-control-top:has(input){cursor:pointer}.nxa-form-control-top:is(.input>*,.select>*){display:flex;height:calc(100% - .5rem);align-items:center;padding-inline:.75rem;white-space:nowrap;font-size:inherit}.nxa-form-control-top:is(.input>*,.select>*):first-child{margin-inline-start:-.75rem;margin-inline-end:.75rem;border-inline-end:var(--border) solid currentColor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-top:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid color-mix(in oklab,currentColor 10%,#0000)}}.nxa-form-control-top:is(.input>*,.select>*):last-child{margin-inline-start:.75rem;margin-inline-end:-.75rem;border-inline-start:var(--border) solid currentColor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-top:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid color-mix(in oklab,currentColor 10%,#0000)}}}.nxa-form-control-bottom{width:100%;flex-direction:row;justify-content:space-between;padding-bottom:calc(var(--spacing, .25rem) * 0)}@layer daisyui.l1.l2.l3{.nxa-form-control-bottom{display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;color:currentcolor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-bottom{color:color-mix(in oklab,currentcolor 60%,transparent)}}.nxa-form-control-bottom:has(input){cursor:pointer}.nxa-form-control-bottom:is(.input>*,.select>*){display:flex;height:calc(100% - .5rem);align-items:center;padding-inline:.75rem;white-space:nowrap;font-size:inherit}.nxa-form-control-bottom:is(.input>*,.select>*):first-child{margin-inline-start:-.75rem;margin-inline-end:.75rem;border-inline-end:var(--border) solid currentColor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-bottom:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid color-mix(in oklab,currentColor 10%,#0000)}}.nxa-form-control-bottom:is(.input>*,.select>*):last-child{margin-inline-start:.75rem;margin-inline-end:-.75rem;border-inline-start:var(--border) solid currentColor}@supports (color: color-mix(in lab,red,red)){.nxa-form-control-bottom:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid color-mix(in oklab,currentColor 10%,#0000)}}}.nxa-form-control-error-message{margin:calc(var(--spacing, .25rem) * 0);display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%;padding:calc(var(--spacing, .25rem) * 0);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-error)}@layer base{:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}}@layer base{:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root{--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")}}@layer base{:root{scrollbar-color:currentColor #0000}@supports (color: color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000) #0000}}}@layer base{@property --radialprogress{syntax: \"<percentage>\"; inherits: true; initial-value: 0%;}}@layer base{:root:not(span){overflow:var(--page-overflow)}}@layer base{:root{background:var(--page-scroll-bg, var(--root-bg));--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) var(--root-bg, #0000);--page-scroll-transition-on: background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter, unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset)}@supports (color: color-mix(in lab,red,red)){:root{--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%))}}@keyframes set-page-has-scroll{0%,to{--page-has-scroll: 1}}}@layer base{:root,[data-theme]{background:var(--page-scroll-bg, var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg: var(--color-base-100)}}@keyframes rating{0%,40%{scale:1.1;filter:brightness(1.05) contrast(1.05)}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{scale:.9;opacity:0}to{scale:1;opacity:1}}@keyframes rotator{89.9999%,to{--first-item-position: 0 0%}90%,99.9999%{--first-item-position: 0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class NxaButton {
+    //#region Private Singnal
+    /**
+     * @ignore
+     */
+    _color = signal('neutral', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    /**
+     * @ignore
+     */
+    _size = signal("md", ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    /**
+     * @ignore
+     */
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    /**
+     * @ignore
+     */
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    /**
+     * @ignore
+     */
+    _routerLink = signal(null, ...(ngDevMode ? [{ debugName: "_routerLink" }] : []));
+    /**
+     * @ignore
+     */
+    _outlined = signal(false, ...(ngDevMode ? [{ debugName: "_outlined" }] : []));
+    /**
+     * @ignore
+     */
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    /**
+     * @ignore
+     */
+    _type = signal('button', ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    /**
+     * @ignore
+     */
+    _spinnerTemplateRef = signal(null, ...(ngDevMode ? [{ debugName: "_spinnerTemplateRef" }] : []));
+    /**
+     *
+     */
+    _label = signal('', ...(ngDevMode ? [{ debugName: "_label" }] : []));
+    set label(value) {
+        this._label.set(value);
+    }
+    get label() {
+        return this._label();
+    }
+    //#endregion
+    //#region public Input
+    // /**
+    //  * Color of the button based on DaisyUI Theme Colors
+    //  * @param {NxaColorAll}
+    //  * {@link NxaColorAll}
+    //  */
+    set color(value) { this._color.set(value); }
+    ;
+    /**
+     * Size of the button based on DaisyUI Theme Sizes
+     */
+    set size(value) { this._size.set(value); }
+    ;
+    /**
+     * Disabled button effect + handleClick won't fire an event
+     */
+    set disabled(value) { this._disabled.set(value); }
+    ;
+    /**
+   * show a loading spinner + diabled fire events from button
+   */
+    set loading(value) { this._loading.set(value); }
+    ;
+    /**
+     * if value is provided it change the button into a link that is navigable
+     */
+    set routerLink(value) {
+        this._routerLink.set(value);
+    }
+    /**
+     * set the style to outlinee
+     */
+    set outlined(value) {
+        this._outlined.set(value);
+    }
+    ;
+    /**
+   * classes provided will be injected into the button
+   */
+    set className(value) {
+        this._className.set(value);
+    }
+    ;
+    /**
+   * type of button, work only if it's a button without routerLink
+   */
+    set type(value) {
+        this._type.set(value);
+    }
+    ;
+    /**
+     * custom spinner for the loading state
+     */
+    set spinnerTemplateRef(value) {
+        this._spinnerTemplateRef.set(value);
+    }
+    ;
+    //#endregion
+    /**
+     * click event handled with disabled & loading condition to prevent multiple clicks
+     */
+    nxaClick = new EventEmitter();
+    //#region Output
+    /**
+     * @ignore
+     */
+    computedClasses = computed(() => {
+        const consumerClasses = this._className().split(/\s+/).filter(Boolean).reduce((acc, cls) => ({ ...acc, [cls]: true }), {});
+        const defaultClasses = {
+            'btn': true,
+            [`btn-${this._color()}`]: true,
+            [`btn-${this._size()}`]: true,
+            'btn-disabled': this._disabled() || this._loading(),
+            'btn-outline': this._outlined(),
+            ['pointer-events-none']: this._disabled() || this._loading(),
+        };
+        return { ...defaultClasses, ...consumerClasses };
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    handleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this._disabled() || this._loading()) {
+            return;
+        }
+        this.nxaClick.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaButton, isStandalone: true, selector: "nxa-button", inputs: { label: "label", color: "color", size: "size", disabled: "disabled", loading: "loading", routerLink: "routerLink", outlined: "outlined", className: "className", type: "type", spinnerTemplateRef: "spinnerTemplateRef" }, outputs: { nxaClick: "nxaClick" }, host: { attributes: { "role": "button" }, listeners: { "click": "handleClick($event)" }, classAttribute: "contents" }, ngImport: i0, template: "<!-- Button Content Wrapper -->\n<ng-container>\n    <!-- Link Button -->\n    @if (!!_routerLink()) {\n\n    <a role=\"button\" [ngClass]=\"computedClasses()\" [routerLink]=\"_routerLink()\"\n        [attr.aria-disabled]=\"_disabled() || _loading()\" [attr.aria-busy]=\"_loading()\"\n        [routerLinkActive]=\"'btn-disabled'\" [attr.aria-label]=\"label\">\n        <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n    </a>\n    }\n    <!-- Norml Button Behaviour -->\n    @else {\n\n    <button role=\"button\" [ngClass]=\"computedClasses()\" [disabled]=\"_disabled() || _loading()\"\n        [attr.aria-disabled]=\"_disabled() || _loading()\" [attr.aria-busy]=\"_loading()\" [type]=\"_type()\"\n        [attr.aria-label]=\"label\">\n        @if(_loading()){\n        <ng-container *ngTemplateOutlet=\"_spinnerTemplateRef()??defaultSpinner\"></ng-container>\n        }\n        <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n    </button>\n\n    }\n</ng-container>\n<ng-template #defaultSpinner>\n    <span class=\"loading loading-spinner\"\n        [ngClass]=\"\n    {'loading-xs':_size()==='xs', 'loading-sm':_size()==='sm', 'loading-md':_size()==='md', 'loading-lg':_size()==='lg','loading-xl':_size()==='xl'}\"></span>\n</ng-template>\n<!-- Button Template with slots -->\n<ng-template #buttonContent>\n    <ng-content select=\"[leading]\"></ng-content>\n    <ng-content select=\"\"></ng-content>\n    <ng-content select=\"[trailing]\"></ng-content>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-button', imports: [CommonModule, RouterLink, RouterLinkActive], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        role: "button",
+                        class: NXA_HOST_CONTENTS_ONLY,
+                        "(click)": "handleClick($event)"
+                    }, template: "<!-- Button Content Wrapper -->\n<ng-container>\n    <!-- Link Button -->\n    @if (!!_routerLink()) {\n\n    <a role=\"button\" [ngClass]=\"computedClasses()\" [routerLink]=\"_routerLink()\"\n        [attr.aria-disabled]=\"_disabled() || _loading()\" [attr.aria-busy]=\"_loading()\"\n        [routerLinkActive]=\"'btn-disabled'\" [attr.aria-label]=\"label\">\n        <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n    </a>\n    }\n    <!-- Norml Button Behaviour -->\n    @else {\n\n    <button role=\"button\" [ngClass]=\"computedClasses()\" [disabled]=\"_disabled() || _loading()\"\n        [attr.aria-disabled]=\"_disabled() || _loading()\" [attr.aria-busy]=\"_loading()\" [type]=\"_type()\"\n        [attr.aria-label]=\"label\">\n        @if(_loading()){\n        <ng-container *ngTemplateOutlet=\"_spinnerTemplateRef()??defaultSpinner\"></ng-container>\n        }\n        <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\n    </button>\n\n    }\n</ng-container>\n<ng-template #defaultSpinner>\n    <span class=\"loading loading-spinner\"\n        [ngClass]=\"\n    {'loading-xs':_size()==='xs', 'loading-sm':_size()==='sm', 'loading-md':_size()==='md', 'loading-lg':_size()==='lg','loading-xl':_size()==='xl'}\"></span>\n</ng-template>\n<!-- Button Template with slots -->\n<ng-template #buttonContent>\n    <ng-content select=\"[leading]\"></ng-content>\n    <ng-content select=\"\"></ng-content>\n    <ng-content select=\"[trailing]\"></ng-content>\n</ng-template>" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], outlined: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], spinnerTemplateRef: [{
+                type: Input
+            }], nxaClick: [{
+                type: Output
+            }] } });
+
+function modelState(initialValue, autoEmit = false) {
+    const _modelSig = signal(initialValue, ...(ngDevMode ? [{ debugName: "_modelSig" }] : []));
+    const emitter = new EventEmitter();
+    if (autoEmit) {
+        let initialized = false;
+        effect(() => {
+            const value = _modelSig();
+            if (!initialized) {
+                initialized = true;
+                return;
+            }
+            emitter.emit(value);
+        });
+    }
+    return {
+        sig: _modelSig,
+        emitter,
+        get: () => _modelSig(),
+        set: (v) => {
+            _modelSig.set(v);
+        },
+        update: (updateFn) => {
+            _modelSig.update(updateFn);
+        },
+    };
+}
+
+class NxaCheckbox {
+    //#region private signals
+    _value = modelState(true, true);
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _color = signal('neutral', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _displayAs = signal('checkbox', ...(ngDevMode ? [{ debugName: "_displayAs" }] : []));
+    _id = signal('', ...(ngDevMode ? [{ debugName: "_id" }] : []));
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    ///
+    /// Control Value Accessor Stat Functions
+    ///
+    onChange = () => { return; };
+    onTouched = () => { return; };
+    //#region inputs
+    /**
+     * Checkbox Value
+     * @type {boolean}
+     * @default false
+     */
+    set value(value) {
+        this._value.update(() => value);
+    }
+    get value() {
+        return this._value.get();
+    }
+    /**
+     * Checkbox disabled state
+     * @type {boolean}
+     * @default false
+     * @description If true, the checkbox will be disabled and cannot be interacted with.
+     */
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    /**
+     * Checkbox color
+     * @type {NxaBrandColor | NxaStatusColor | NxaNeutralColor}
+     * @default 'neutral'
+     */
+    set color(value) {
+        this._color.set(value);
+    }
+    /**
+   * Checkbox size
+   * @type {NxaSize}
+   * @default 'md'
+   */
+    set size(value) {
+        this._size.set(value);
+    }
+    /**
+   * Show checkbox as checkbox or toggle
+   * @type {'checkbox' | 'toggle'}
+   * @default 'checkbox'
+   * @description If 'checkbox', it will show as a checkbox, if 'toggle', it will show as a toggle switch.
+   * This is useful for different use cases where you want to show a checkbox or a toggle switch.
+   */
+    set displayAs(value) {
+        this._displayAs.set(value);
+    }
+    set id(value) {
+        this._id.set(value);
+    }
+    set className(value) {
+        this._className.set(value);
+    }
+    //#endregion
+    //#region outputs
+    valueChange = this._value.emitter;
+    //#endregion
+    //#region control value accessor
+    /**
+     * @ignore
+     * Control value accessor write value function
+     * update state value when form inject current value
+     */
+    writeValue(obj) {
+        this._value.sig.set(obj);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = (isDisabled);
+    }
+    onInput(event) {
+        const input = event.target;
+        this._value.set(input.checked);
+        this.onChange(input.checked);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    //#endregion
+    computedNgClasses = computed(() => {
+        return {
+            [`${this._displayAs()}`]: true,
+            [`disabled`]: this._disabled(),
+            [`${this._displayAs()}-xs`]: this._size() === 'xs',
+            [`${this._displayAs()}-sm`]: this._size() === 'sm',
+            [`${this._displayAs()}-md`]: this._size() === 'md',
+            [`${this._displayAs()}-lg`]: this._size() === 'lg',
+            [`${this._displayAs()}-primary`]: this._color() === 'primary',
+            [`${this._displayAs()}-secondary`]: this._color() === 'secondary',
+            [`${this._displayAs()}-accent`]: this._color() === 'accent',
+            [`${this._displayAs()}-info`]: this._color() === 'info',
+            [`${this._displayAs()}-warning`]: this._color() === 'warning',
+            [`${this._displayAs()}-error`]: this._color() === 'error',
+            [`${this._displayAs()}-success`]: this._color() === 'success',
+            [`${this._displayAs()}-neutral`]: this._color() === 'neutral',
+        };
+    }, ...(ngDevMode ? [{ debugName: "computedNgClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaCheckbox, isStandalone: true, selector: "nxa-checkbox", inputs: { value: "value", disabled: "disabled", color: "color", size: "size", displayAs: "displayAs", id: "id", className: "className" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.id": "null" }, classAttribute: "contents" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NxaCheckbox),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"form-control w-fit min-w-5 flex flex-row items-center\" [class]=\"_className()\">\n  <label class=\"label cursor-pointer\" [for]=\"_id()\">\n    <span class=\"label-text\">\n      <ng-content select=\"[label]\"></ng-content>\n    </span> \n  </label>\n  <input \n    [attr.id]=\"_id()\"\n    type=\"checkbox\"\n    [disabled]=\"_disabled()\" \n    (input)=\"onInput($event)\"\n    class=\"mx-2\"\n    [checked]=\"_value.get()\"\n    [aria-checked]=\"_value.get()\"\n    [ngClass]=\"computedNgClasses()\"\n    (blur)=\"onBlur()\" />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-checkbox', standalone: true, host: {
+                        '[attr.id]': 'null',
+                        class: NXA_HOST_CONTENTS_ONLY
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NxaCheckbox),
+                            multi: true
+                        }
+                    ], encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<div class=\"form-control w-fit min-w-5 flex flex-row items-center\" [class]=\"_className()\">\n  <label class=\"label cursor-pointer\" [for]=\"_id()\">\n    <span class=\"label-text\">\n      <ng-content select=\"[label]\"></ng-content>\n    </span> \n  </label>\n  <input \n    [attr.id]=\"_id()\"\n    type=\"checkbox\"\n    [disabled]=\"_disabled()\" \n    (input)=\"onInput($event)\"\n    class=\"mx-2\"\n    [checked]=\"_value.get()\"\n    [aria-checked]=\"_value.get()\"\n    [ngClass]=\"computedNgClasses()\"\n    (blur)=\"onBlur()\" />\n</div>\n" }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], displayAs: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class NxaDateTimeInput {
+    //#region state
+    //#endregion
+    //#region inputs
+    _type = signal('datetime-local', ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    set type(value) { this._type.set(value); }
+    ;
+    get type() { return this._type(); }
+    //#endregion
+    writeValue(obj) {
+        throw new Error('Method not implemented.');
+    }
+    registerOnChange(fn) {
+        throw new Error('Method not implemented.');
+    }
+    registerOnTouched(fn) {
+        throw new Error('Method not implemented.');
+    }
+    setDisabledState(isDisabled) {
+        throw new Error('Method not implemented.');
+    }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDateTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaDateTimeInput, isStandalone: true, selector: "nxa-date-time-input", inputs: { type: "type" }, host: { classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border p-2" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NxaDateTimeInput),
+                multi: true,
+            }
+        ], ngImport: i0, template: "<input [type]=\"_type()\" placeholder=\"\" class=\"input w-full\" />" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDateTimeInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-date-time-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NxaDateTimeInput),
+                            multi: true,
+                        }
+                    ], host: {
+                        class: `${NXA_HOST_BLOCK} p-2`
+                    }, imports: [], template: "<input [type]=\"_type()\" placeholder=\"\" class=\"input w-full\" />" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }] } });
+
+class NxaDrawerService {
+    /**
+     * store state of any drawer
+     */
+    _drawerStates$ = new BehaviorSubject([]);
+    /**
+     * register a drawer so that it can be used
+     * @param drawerState initial drawer state
+     */
+    registerDrawer(drawerState) {
+        const states = this._drawerStates$.value;
+        const index = states.findIndex(drawer => drawer.id === drawerState.id);
+        if (index !== -1) {
+            // Replace existing drawer state with the same id
+            const updatedStates = [...states];
+            updatedStates[index] = drawerState;
+            this._drawerStates$.next(updatedStates);
+        }
+        else {
+            // Add new drawer state
+            this._drawerStates$.next([...states, drawerState]);
+        }
+    }
+    /**
+     * remove drawer state
+     * @param id id of the drawer
+     */
+    unregisterDrawer(id) {
+        this._drawerStates$.next(this._drawerStates$.value.filter(drawer => drawer.id !== id));
+    }
+    /**
+     * get drawer state stream by Id
+     * @param id id of the drawer
+     * @returns Observable state of the drawer
+     */
+    getDrawerState$(id) {
+        return this._drawerStates$.asObservable().pipe(
+        // Map the array to the drawer state with the given id
+        map(states => states.find(x => x.id === id)));
+    }
+    /**
+     * get current drawer state by Id
+     * @param id id of the drawer
+     * @returns NxaDrawerState
+     */
+    getDrawerState(id) {
+        return this._drawerStates$.value.find(x => x.id === id);
+    }
+    /**
+     * update state of a drawer
+     * @param drawerState
+     */
+    updateDrawerState(drawerState) {
+        this._drawerStates$.next(this._drawerStates$.value.map(drawer => drawer.id === drawerState.id ? { ...drawer, ...drawerState } : drawer));
+    }
+    /**
+     * Toggle State of a drawer
+     * @param id drawer Id
+     */
+    toggle(id) {
+        const state = this.getDrawerState(id);
+        this.updateDrawerState({ ...state, state: state?.state == "OPEN" ? "CLOSE" : "OPEN" });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDrawerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDrawerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+const DEFAULT_TAILWIND_BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+const NXA_BREAKPOINTS = new InjectionToken('NXA_BREAKPOINTS', {
+    providedIn: 'root',
+    factory: () => DEFAULT_TAILWIND_BREAKPOINTS,
+});
+class NxaLayoutService {
+    breakpoints = inject(NXA_BREAKPOINTS);
+    _breakpoint$ = new BehaviorSubject(this.getBreakpoint());
+    _resizeObserver;
+    constructor() {
+        if (typeof window === "undefined")
+            return;
+        this._resizeObserver = new ResizeObserver(() => {
+            this._breakpoint$.next(this.getBreakpoint());
+        });
+        this._resizeObserver.observe(document.documentElement);
+    }
+    get breakpoint$() {
+        return this._breakpoint$.asObservable().pipe(throttleTime(10));
+    }
+    get current() {
+        return this._breakpoint$.value;
+    }
+    getBreakpoint() {
+        if (typeof window === "undefined")
+            return 'md';
+        const width = window.innerWidth;
+        const { sm = 640, md = 768, lg = 1024, xl = 1280, ['2xl']: x2l = 1536 } = this.breakpoints;
+        if (width < sm)
+            return 'xs';
+        if (width < md)
+            return 'sm';
+        if (width < lg)
+            return 'md';
+        if (width < xl)
+            return 'lg';
+        if (width < x2l)
+            return 'xl';
+        return '2xl';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaLayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaLayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+const SKIP_LOADING = new HttpContextToken(() => false);
+class NxaLoadingService {
+    _isLoading$ = new BehaviorSubject(0);
+    get isLoading$() {
+        return this._isLoading$.pipe(map((count) => count > 0));
+    }
+    get isLoading() {
+        return this._isLoading$.value > 0;
+    }
+    addLoading() {
+        this._isLoading$.next(this._isLoading$.value + 1);
+    }
+    removeLoading() {
+        const current = this._isLoading$.value;
+        if (current > 0) {
+            this._isLoading$.next(current - 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaLoadingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaLoadingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class NxaOverlayRef {
+    overlayRef;
+    _afterClose$ = new BehaviorSubject(null);
+    afterClose$ = this._afterClose$.asObservable();
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+    }
+    close(returnValue) {
+        this.overlayRef.dispose();
+        this._afterClose$.next(returnValue);
+    }
+}
+const NXA_OVERLAY_DATA = new InjectionToken('NXA_OVERLAY_DATA', {
+    providedIn: 'root',
+    factory: () => null,
+});
+const NXA_OVERLAY_CONFIG_DEFAULTS = new InjectionToken('NXA_OVERLAY_CONFIG_DEFAULTS', {
+    providedIn: 'root',
+    factory: () => {
+        const overlay = inject(Overlay);
+        return {
+            disposeOnNavigation: true,
+            width: '80%',
+            height: '60%',
+            usePopover: true,
+            hasBackdrop: true,
+            scrollStrategy: overlay.scrollStrategies.block(),
+            backdropClickDismiss: true,
+        };
+    },
+});
+class NxaOverlayService {
+    overlay = inject(Overlay);
+    defaultConfig = inject(NXA_OVERLAY_CONFIG_DEFAULTS);
+    positionBuilder = inject(OverlayPositionBuilder);
+    create(component, data, config) {
+        // merge Configurations
+        const finalConfig = {
+            ...this.defaultConfig,
+            ...config,
+        };
+        // create position strategy if missing
+        if (!finalConfig.positionStrategy) {
+            finalConfig.positionStrategy = this.positionBuilder
+                .global()
+                .centerHorizontally()
+                .centerVertically();
+        }
+        //create Overlay Ref
+        const modalRef = new NxaOverlayRef(this.overlay.create(finalConfig));
+        // create injection context
+        const injector = Injector.create({
+            providers: [
+                { provide: NxaOverlayRef, useValue: modalRef },
+                { provide: NXA_OVERLAY_DATA, useValue: data },
+            ],
+        });
+        // Create Portal for the overlay and attach component to it
+        const componentPortal = new ComponentPortal(component, null, injector);
+        modalRef.overlayRef.attach(componentPortal);
+        // dismiss on backdrop click
+        if (finalConfig.backdropClickDismiss) {
+            modalRef.overlayRef.backdropClick().subscribe(() => {
+                modalRef.close();
+            });
+        }
+        return modalRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaOverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const NXA_DEFAULT_THEME_BRIGHTNESS_MAP = {
+    light: "light",
+    dark: "dark",
+    cupcake: "light",
+    bumblebee: "light",
+    emerald: "light",
+    corporate: "light",
+    synthwave: "dark",
+    retro: "light",
+    cyberpunk: "light",
+    valentine: "light",
+    halloween: "dark",
+    garden: "light",
+    forest: "dark",
+    aqua: "light",
+    lofi: "light",
+    pastel: "light",
+    fantasy: "light",
+    wireframe: "light",
+    black: "dark",
+    luxury: "dark",
+    dracula: "dark",
+    cmyk: "light",
+    autumn: "light",
+    business: "dark",
+    acid: "light",
+    lemonade: "light",
+    night: "dark",
+    coffee: "dark",
+    winter: "light",
+};
+const NXA_THEME_BRIGHTNESS_MAP = new InjectionToken("NXA_THEME_BRIGHTNESS_MAP", {
+    providedIn: "root",
+    factory: () => NXA_DEFAULT_THEME_BRIGHTNESS_MAP,
+});
+/**
+ * Default Light theme name
+ */
+const NXA_DEFAULT_LIGHT_THEME = new InjectionToken('NXA_DEFAULT_LIGHT_THEME', {
+    providedIn: 'root',
+    factory: () => 'light'
+});
+/**
+ * Default Dark theme name
+ */
+const NXA_DEFAULT_DARK_THEME = new InjectionToken('NXA_DEFAULT_DARK_THEME', {
+    providedIn: 'root',
+    factory: () => 'dark'
+});
+/**
+ * Preference for dark theme
+ * If true, the service will set the default theme to dark
+ * If false, it will set the default theme to light
+ */
+const NXA_PREFER_DARK_THEME = new InjectionToken('NXA_PREFERRED_DARK_THEME', {
+    providedIn: 'root',
+    factory: () => true
+});
+/**
+ * Theme Loader function
+ * allow to load theme dynamically
+ * can be override to load theme from local storage, server or any other source
+ */
+const NXA_THEME_LOADER = new InjectionToken('NXA_THEME_LOADER', {
+    providedIn: 'root',
+    factory: () => () => {
+        if (inject(NXA_PREFER_DARK_THEME)) {
+            return inject(NXA_DEFAULT_DARK_THEME);
+        }
+        return inject(NXA_DEFAULT_LIGHT_THEME);
+    },
+});
+/**
+ * Theme Saving function
+ * allow to save theme name when it is changed
+ * can be override to save theme in local storage, server or any other source
+ */
+const NXA_THEME_SAVING = new InjectionToken('NXA_THEME_SAVING', {
+    providedIn: 'root',
+    factory: () => (themeName) => {
+        console.debug(`Inject a function to store ${themeName} the selected theme of the user`);
+    }
+});
+class NxaThemeService {
+    _defaultLightTheme = inject(NXA_DEFAULT_LIGHT_THEME);
+    _defaultDarkTheme = inject(NXA_DEFAULT_DARK_THEME);
+    _preferDarkTheme = inject(NXA_PREFER_DARK_THEME);
+    _themeBrightnessMap = inject(NXA_THEME_BRIGHTNESS_MAP);
+    _themeLoaderFn = inject(NXA_THEME_LOADER);
+    _themeSavingFn = inject(NXA_THEME_SAVING);
+    _currentTheme = null;
+    get currentTheme() {
+        return this._currentTheme;
+    }
+    set currentTheme(value) {
+        this._currentTheme = value;
+        if (value)
+            this._currentBrightness$.next(this.getColorScheme(value));
+    }
+    _currentBrightness$ = new BehaviorSubject("dark");
+    get currentBrightness$() { return this._currentBrightness$.asObservable(); }
+    ;
+    getTheme() {
+        return this.currentTheme;
+    }
+    getColorScheme(themeName) {
+        if (themeName)
+            return this._themeBrightnessMap[themeName];
+        return this._preferDarkTheme ? "dark" : "light";
+    }
+    setTheme(theme) {
+        if (!isBrowserContext())
+            return;
+        this._currentBrightness$.next(this.getColorScheme(theme));
+        if (this._currentTheme === theme)
+            return;
+        this._currentTheme = theme;
+        document.documentElement.setAttribute('data-theme', theme);
+        if (this._themeSavingFn) {
+            this._themeSavingFn(this._currentTheme);
+        }
+    }
+    constructor() {
+        this._initializeTheme();
+    }
+    async _initializeTheme() {
+        if (typeof document === "undefined")
+            return;
+        // Load theme from HTML
+        const htmlTheme = document.documentElement.getAttribute('data-theme');
+        // if no theme is provided in html
+        if (!htmlTheme) {
+            try {
+                // try to read with the theme loaded function
+                const loadedTheme = await this._resolveTheme(this._themeLoaderFn);
+                // if it not work then throw an error and go on the fall back
+                if (!loadedTheme) {
+                    throw new Error('Theme loader returned null or undefined');
+                }
+                this.setTheme(loadedTheme);
+            }
+            catch {
+                // fall back to default theme
+                const fallback = this._preferDarkTheme ? this._defaultDarkTheme : this._defaultLightTheme;
+                this.setTheme(fallback);
+            }
+        }
+        else {
+            // set theme from html and save it
+            this.setTheme(htmlTheme);
+        }
+    }
+    async _resolveTheme(loader) {
+        if (isObservable(loader)) {
+            return await firstValueFrom(loader);
+        }
+        else if (loader instanceof Promise) {
+            return await loader;
+        }
+        else {
+            return loader();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+const NXA_TOAST_CONFIG_DEFAULTS = new InjectionToken('NXA_TOAST_CONFIG_DEFAULTS', {
+    providedIn: 'any',
+    factory: () => {
+        return {
+            component: NxaToast,
+            direction: 'bottom-right',
+            width: 'auto',
+            height: 'auto',
+            maxWidth: '20rem',
+            maxHeight: '1rem',
+            /**
+             * x and y distance from the edge of the screen.
+             * The first value is for x (left or right)
+             * and the second value is for y (top or bottom).
+             * You can use any valid CSS length unit (e.g., px, rem, %, etc.).
+             */
+            distance: ['1em', '3em'],
+        };
+    },
+});
+class NxaToastService {
+    static count = 0;
+    overlayService = inject(NxaOverlayService);
+    toastDefaultConfig = inject(NXA_TOAST_CONFIG_DEFAULTS);
+    overlay = inject(Overlay);
+    show(title, message, color, duration = 3000, config) {
+        const finalConf = { ...this.toastDefaultConfig, ...config };
+        let positionStrategy = this.overlay.position().global();
+        if (finalConf.direction.includes('top')) {
+            positionStrategy = positionStrategy.top(`${finalConf.distance[1]}`);
+        }
+        if (finalConf.direction.includes('bottom')) {
+            positionStrategy = positionStrategy.bottom(`${finalConf.distance[1]}`);
+        }
+        if (finalConf.direction.includes('right')) {
+            positionStrategy = positionStrategy.right(`${finalConf.distance[0]}`);
+        }
+        if (finalConf.direction.includes('left')) {
+            positionStrategy = positionStrategy.left(`${finalConf.distance[0]}`);
+        }
+        const ref = this.overlayService.create(config?.component ?? NxaToast, { title: title, message, color, duration }, {
+            hasBackdrop: false,
+            positionStrategy: positionStrategy,
+            panelClass: finalConf.panelClass,
+            height: finalConf.height,
+            maxHeight: finalConf.maxHeight,
+            maxWidth: finalConf.maxWidth,
+            width: finalConf.width,
+        });
+        NxaToastService.count++;
+        timer(duration).subscribe(() => {
+            NxaToastService.count--;
+            ref.close();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// import { inject } from '@angular/core';
+// import { NxaConstructor } from '../utils/nxa-mixin-utils';
+// import {
+//   NxaOverlayService,
+// } from '../services/overlay/nxa-overlay.service';
+// import { NxaOverlayHandler, NXA_OVERLAY_DATA, NXA_OVERLAY_HANDLER, NxaOverlayState } from '../services';
+// Base overlay
+const NxaOverlayBase = NxaOverlayBaseMixin(class {
+});
+// // Overlay + draggable contract
+// export interface INxaOverlayDraggable<TData> extends INxaOverlay<TData> {
+//   startDrag(): void;
+//   stopDrag(): void;
+//   updateOverlayPosition(x: number, y: number): void;
+// }
+// Base mixin: injects overlay services
+function NxaOverlayBaseMixin(Base) {
+    return class extends Base {
+        overlayService = inject(NxaOverlayService);
+        overlayRef = inject(NxaOverlayRef);
+        overlayData = inject(NXA_OVERLAY_DATA);
+    };
+}
+// // Draggable mixin: requires the base overlay mixin
+// export function NxaOverlayDraggableMixin<
+//   TData,
+//   TBase extends NxaConstructor<object>,
+// >(Base: TBase) {
+//   return class
+//     extends NxaOverlayBaseMixin<TData, TBase>(Base)
+//     implements INxaOverlayDraggable<TData>
+//   {
+//     startDrag(): void {
+//       (this.overlayState.value as any).dragging = true;
+//     }
+//     updateOverlayPosition(x: number, y: number) {
+//       if (!(this.overlayState.value as any).dragging) return;
+//       const offset = (this.overlayState.value as any).offset || { x: 0, y: 0 };
+//       const newLeft = x + offset.x;
+//       const newTop = y + offset.y;
+//       this.overlayService.updateOverlayConfig({
+//         ...this.overlayState,
+//         left: `${newLeft}px`,
+//         top: `${newTop}px`,
+//       });
+//     }
+//     stopDrag(): void {
+//       (this.overlayState.value as any).dragging = false;
+//     }
+//   };
+// }
+
+const WithClassName = WithClassNameMixin(class {
+});
+function WithClassNameMixin(Base) {
+    return class extends Base {
+        /** Raw internal value from the component's @Input() */
+        _className = signal(null, ...(ngDevMode ? [{ debugName: "_className" }] : []));
+        /** Normalized final string */
+        _classNameObject = computed(() => {
+            const classes = this._className();
+            let out = {};
+            if (!classes)
+                return '';
+            if (typeof classes === 'string') {
+                out = classes
+                    .split(/\s+/)
+                    .filter(Boolean)
+                    .reduce((acc, val) => ({ ...acc, [val]: true }), {});
+            }
+            else if (typeof classes === 'object') {
+                out = classes;
+            }
+            else {
+                throw new Error('ClassName type is not valid', classes);
+            }
+            return out;
+        }, ...(ngDevMode ? [{ debugName: "_classNameObject" }] : []));
+    };
+}
+function WithClassHeaderMixin(base) {
+    return class extends base {
+        _classHeader = signal('', ...(ngDevMode ? [{ debugName: "_classHeader" }] : []));
+        _classHeaderObject = computed(() => {
+            const classes = this._classHeader();
+            let out = {};
+            if (!classes)
+                return {};
+            if (typeof classes === 'string') {
+                // String to object
+                out = classes
+                    .split(/\s+/)
+                    .filter(Boolean)
+                    .reduce((acc, val) => ({ ...acc, [val]: true }), {});
+            }
+            else if (typeof classes === 'object') {
+                out = classes;
+            }
+            else {
+                throw new Error('ClassBody type is not valid', classes);
+            }
+            return out;
+        }, ...(ngDevMode ? [{ debugName: "_classHeaderObject" }] : []));
+    };
+}
+function WithClassBodyMixin(base) {
+    return class extends base {
+        _classBody = signal({}, ...(ngDevMode ? [{ debugName: "_classBody" }] : []));
+        _classBodyObject = computed(() => {
+            const classes = this._classBody();
+            let out = {};
+            if (!classes)
+                return {};
+            if (typeof classes === 'string') {
+                // String to object
+                out = classes
+                    .split(/\s+/)
+                    .filter(Boolean)
+                    .reduce((acc, val) => ({ ...acc, [val]: true }), {});
+            }
+            else if (typeof classes === 'object') {
+                out = classes;
+            }
+            else {
+                throw new Error('ClassBody type is not valid', classes);
+            }
+            return out;
+        }, ...(ngDevMode ? [{ debugName: "_classBodyObject" }] : []));
+    };
+}
+function WithClassFooterMixin(base) {
+    return class extends base {
+        _classFooter = signal('', ...(ngDevMode ? [{ debugName: "_classFooter" }] : []));
+        _classFooterObject = computed(() => {
+            const classes = this._classFooter();
+            let out = {};
+            if (!classes)
+                return {};
+            if (typeof classes === 'string') {
+                // String to object
+                out = classes
+                    .split(/\s+/)
+                    .filter(Boolean)
+                    .reduce((acc, val) => ({ ...acc, [val]: true }), {});
+            }
+            else if (typeof classes === 'object') {
+                out = classes;
+            }
+            else {
+                throw new Error('ClassBody type is not valid', classes);
+            }
+            return out;
+        }, ...(ngDevMode ? [{ debugName: "_classFooterObject" }] : []));
+    };
+}
+
+// Typeguard
+function isNxaDropDownOption(obj) {
+    return obj && typeof obj === 'object' && 'label' in obj && 'value' in obj;
+}
+class NxaDropdown extends WithClassNameMixin(class {
+}) {
+    //#region state
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    _label = signal('', ...(ngDevMode ? [{ debugName: "_label" }] : []));
+    _options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
+    _buttonTemplateRef = signal(null, ...(ngDevMode ? [{ debugName: "_buttonTemplateRef" }] : []));
+    _itemTemplateRef = signal(null, ...(ngDevMode ? [{ debugName: "_itemTemplateRef" }] : []));
+    _value = modelState(null, true);
+    //#endregion
+    //#region inputs/outputs
+    set isOpen(value) {
+        this._isOpen.set(value);
+    }
+    get isOpen() {
+        return this._isOpen();
+    }
+    set label(value) {
+        this._label.set(value);
+    }
+    get label() {
+        return this._label();
+    }
+    set options(value) {
+        this._options.set(value);
+    }
+    get options() {
+        return this._options();
+    }
+    set buttonTemplateRef(value) {
+        this._buttonTemplateRef.set(value);
+    }
+    get buttonTemplateRef() {
+        return this._buttonTemplateRef();
+    }
+    set itemTemplateRef(value) {
+        this._itemTemplateRef.set(value);
+    }
+    get itemTemplateRef() {
+        return this._itemTemplateRef();
+    }
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    set value(value) {
+        if (isNxaDropDownOption(value)) {
+            this._value.set(value); // full option object
+        }
+        else {
+            this._value.set(value != null ? { label: String(value), value } : null);
+        }
+    }
+    get value() {
+        return this._value.get();
+    }
+    valueChange = this._value.emitter;
+    //#endregion
+    selectByValue(value) {
+        const options = this.options;
+        const match = options.find((opt) => {
+            if (typeof opt === 'string') {
+                return opt === value;
+            }
+            return opt.value === value;
+        });
+        if (!match)
+            return;
+        if (typeof match === 'string') {
+            this._value.set({
+                label: match,
+                value: match,
+            });
+            return;
+        }
+        this._value.set(match);
+    }
+    selectItem(selectedItem) {
+        this._value.set(selectedItem);
+        // this.valueChange.emit(selectedItem.value);
+    }
+    _normalizedOptions = computed(() => this._options().map(item => typeof item === 'string'
+        ? { label: item, value: item }
+        : item), ...(ngDevMode ? [{ debugName: "_normalizedOptions" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDropdown, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaDropdown, isStandalone: true, selector: "nxa-dropdown", inputs: { isOpen: "isOpen", label: "label", options: "options", buttonTemplateRef: "buttonTemplateRef", itemTemplateRef: "itemTemplateRef", className: "className", value: "value" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<!-- Drop Down Container -->\n<div class=\"dropdown nxa-dropdown\" [ngClass]=\"_classNameObject()\" (focusin)=\"_isOpen.set(true)\"\n  (focusout)=\"_isOpen.set(false)\">\n  <!-- Drop Down Button -->\n  @if(!!_buttonTemplateRef()){\n  <!-- DropDown Template Injected Button -->\n  <ng-container *ngTemplateOutlet=\"_buttonTemplateRef()!\"></ng-container>\n  }@else {\n  <!-- DropDown Default Button -->\n  <nxa-button color=\"primary\" className=\"w-full h-full\">\n    <p class=\"font-semibold menu\">{{ _value.get()?.label || _label() }}</p>\n    <div trailing class=\"swap swap-rotate fill-current\">\n      <ng-icon name=\"heroChevronDownSolid\" [class.swap-on]=\"_isOpen()\" [class.swap-off]=\"!_isOpen()\"\n        class=\"fill-current\"></ng-icon>\n      <ng-icon name=\"heroChevronUpSolid\" [class.swap-on]=\"!_isOpen()\" [class.swap-off]=\"_isOpen()\"\n        class=\"fill-current\"></ng-icon>\n    </div>\n  </nxa-button>\n  }\n  <!-- Drop Down List Of Items -->\n  <ul tabindex=\"0\" class=\"dropdown-content menu bg-base-100 rounded-box z-100 min-w-32 p-2 w-fit nxa-dropdown-content\">\n    @for (item of _normalizedOptions(); track $index) {\n    <li class=\"w-fit cursor-pointer\" tabindex=\"0\" (click)=\"selectItem(item)\" (keypress.enter)=\"selectItem(item)\">\n      @if (!!_itemTemplateRef()) {\n      <ng-container\n        *ngTemplateOutlet=\"_itemTemplateRef()!; context: { label: item.label, value: item.value }\"></ng-container>\n      } @else {\n      <p>{{ item.label }}</p>\n      }\n    </li>\n    }\n  </ul>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxaButton, selector: "nxa-button", inputs: ["label", "color", "size", "disabled", "loading", "routerLink", "outlined", "className", "type", "spinnerTemplateRef"], outputs: ["nxaClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [provideIcons({ heroChevronDownSolid, heroChevronUpSolid })], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDropdown, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-dropdown', imports: [CommonModule, NxaButton, NgIcon], viewProviders: [provideIcons({ heroChevronDownSolid, heroChevronUpSolid })], encapsulation: ViewEncapsulation.None, template: "<!-- Drop Down Container -->\n<div class=\"dropdown nxa-dropdown\" [ngClass]=\"_classNameObject()\" (focusin)=\"_isOpen.set(true)\"\n  (focusout)=\"_isOpen.set(false)\">\n  <!-- Drop Down Button -->\n  @if(!!_buttonTemplateRef()){\n  <!-- DropDown Template Injected Button -->\n  <ng-container *ngTemplateOutlet=\"_buttonTemplateRef()!\"></ng-container>\n  }@else {\n  <!-- DropDown Default Button -->\n  <nxa-button color=\"primary\" className=\"w-full h-full\">\n    <p class=\"font-semibold menu\">{{ _value.get()?.label || _label() }}</p>\n    <div trailing class=\"swap swap-rotate fill-current\">\n      <ng-icon name=\"heroChevronDownSolid\" [class.swap-on]=\"_isOpen()\" [class.swap-off]=\"!_isOpen()\"\n        class=\"fill-current\"></ng-icon>\n      <ng-icon name=\"heroChevronUpSolid\" [class.swap-on]=\"!_isOpen()\" [class.swap-off]=\"_isOpen()\"\n        class=\"fill-current\"></ng-icon>\n    </div>\n  </nxa-button>\n  }\n  <!-- Drop Down List Of Items -->\n  <ul tabindex=\"0\" class=\"dropdown-content menu bg-base-100 rounded-box z-100 min-w-32 p-2 w-fit nxa-dropdown-content\">\n    @for (item of _normalizedOptions(); track $index) {\n    <li class=\"w-fit cursor-pointer\" tabindex=\"0\" (click)=\"selectItem(item)\" (keypress.enter)=\"selectItem(item)\">\n      @if (!!_itemTemplateRef()) {\n      <ng-container\n        *ngTemplateOutlet=\"_itemTemplateRef()!; context: { label: item.label, value: item.value }\"></ng-container>\n      } @else {\n      <p>{{ item.label }}</p>\n      }\n    </li>\n    }\n  </ul>\n</div>" }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], buttonTemplateRef: [{
+                type: Input
+            }], itemTemplateRef: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class NxaFileInput {
+    //#region state  
+    _multiFile = signal(false, ...(ngDevMode ? [{ debugName: "_multiFile" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _color = signal('neutral', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    _value = modelState(null, true);
+    //#endregion
+    //#region Input/Output
+    set multiFile(value) {
+        this._multiFile.set(value);
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    set color(value) {
+        this._color.set(value);
+    }
+    set size(value) {
+        this._size.set(value);
+    }
+    set className(value) {
+        this._className.set(value);
+    }
+    set value(value) {
+        this._value.set(value);
+    }
+    valueChange = this._value.emitter;
+    //#endregion
+    //#region Input State Fn
+    onChange = () => { return; };
+    onTouched = () => { return; };
+    //#endregion
+    //#region  Compute Class
+    computedInputNgClasses = computed(() => ({
+        [`file-input-${this._size()}`]: true,
+        [`file-input-${this._color()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "computedInputNgClasses" }] : []));
+    //#endregion
+    //#region control value Accessor
+    writeValue(obj) {
+        this._value.set(obj);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        this._value.set(input.files ?? null);
+        this.onChange(this._value.get());
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaFileInput, isStandalone: true, selector: "nxa-file-input", inputs: { multiFile: "multiFile", disabled: "disabled", color: "color", size: "size", className: "className", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "w-full h-full min-h-0 flex flex-col flex-1 p-2" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NxaFileInput),
+                multi: true,
+            }
+        ], ngImport: i0, template: "<input \ntype=\"file\" \nclass=\"file-input\" \n[ngClass]=\"computedInputNgClasses()\"\n[class]=\"_className()\"\n(change)=\"onFileSelected($event)\" \n[multiple]=\"_multiFile()\" \n[disabled]=\"_disabled()\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaFileInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-file-input', host: {
+                        class: `${NXA_HOST_LAYOUT} p-2`,
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NxaFileInput),
+                            multi: true,
+                        }
+                    ], imports: [CommonModule], template: "<input \ntype=\"file\" \nclass=\"file-input\" \n[ngClass]=\"computedInputNgClasses()\"\n[class]=\"_className()\"\n(change)=\"onFileSelected($event)\" \n[multiple]=\"_multiFile()\" \n[disabled]=\"_disabled()\"\n/>\n" }]
+        }], propDecorators: { multiFile: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class NxaRadio {
+    //#region State
+    _id = signal('', ...(ngDevMode ? [{ debugName: "_id" }] : []));
+    set id(value) { this._id.set(value); }
+    get id() { return this._id(); }
+    _name = signal('', ...(ngDevMode ? [{ debugName: "_name" }] : []));
+    set name(value) { this._name.set(value); }
+    get name() { return this._name(); }
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    set value(value) { this._value.set(value); }
+    get value() { return this._value(); }
+    _checked = modelState(false, true);
+    set checked(value) { this._checked.set(value); }
+    get checked() { return this._checked.get(); }
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
+    _color = signal('neutral', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    set color(value) { this._color.set(value); }
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    set size(value) { this._size.set(value); }
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    set className(value) { this._className.set(value); }
+    get className() { return this._className(); }
+    //#endregion
+    selectedChangeEffect = effect(() => {
+        const checked = this._checked.get();
+        if (checked) {
+            this.selected.emit();
+        }
+    }, ...(ngDevMode ? [{ debugName: "selectedChangeEffect" }] : []));
+    selected = new EventEmitter();
+    checkedChange = this._checked.emitter;
+    //#endregion
+    //#region Computed classes
+    computedNgClasses = computed(() => ({
+        [`radio-${this._color()}`]: true,
+        [`radio-${this._size()}`]: true,
+        'disabled': this._disabled(),
+        'checked': this._checked.get()
+    }), ...(ngDevMode ? [{ debugName: "computedNgClasses" }] : []));
+    //#endregion
+    //#region Methods
+    /** Called by group to set checked state */
+    setChecked(value) {
+        this._checked.set(value);
+    }
+    /** Trigger selection event */
+    select() {
+        if (!this._disabled()) {
+            // this.selected.emit(this._value()!);
+            this._checked.set(true);
+        }
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    /** For native input change if used directly */
+    onNativeChange(event) {
+        const input = event.target;
+        this._checked.set(input.checked);
+        if (input.checked)
+            this.selected.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaRadio, isStandalone: true, selector: "nxa-radio", inputs: { id: "id", name: "name", value: "value", checked: "checked", disabled: "disabled", color: "color", size: "size", className: "className" }, outputs: { selected: "selected", checkedChange: "checkedChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div class=\"form-control min-w-fit w-fit display flex flex-row items-center nxa-radio\" [class]=\"_className()\">\n  <div class=\"label label-text w-fit\">\n    <ng-content select=\"[label]\" class=\"label-text\"></ng-content>\n  </div>\n  <input \n    tabindex=\"0\" \n    [id]=\"_id()\" \n    type=\"radio\" \n    [name]=\"_name()\" \n    [value]=\"_value()\"\n    [checked]=\"_checked.get()\"\n    [disabled]=\"_disabled()\" \n    [aria-checked]=\"_checked.get()\"\n    [aria-disabled]=\"_disabled()\"\n    (input)=\"onNativeChange($event)\"\n    class=\"radio mx-2\" [ngClass]=\"computedNgClasses()\" />\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-radio', standalone: true, encapsulation: ViewEncapsulation.None, host: {
+                        class: NXA_HOST_CONTENTS_ONLY
+                    }, imports: [CommonModule], template: "<div class=\"form-control min-w-fit w-fit display flex flex-row items-center nxa-radio\" [class]=\"_className()\">\n  <div class=\"label label-text w-fit\">\n    <ng-content select=\"[label]\" class=\"label-text\"></ng-content>\n  </div>\n  <input \n    tabindex=\"0\" \n    [id]=\"_id()\" \n    type=\"radio\" \n    [name]=\"_name()\" \n    [value]=\"_value()\"\n    [checked]=\"_checked.get()\"\n    [disabled]=\"_disabled()\" \n    [aria-checked]=\"_checked.get()\"\n    [aria-disabled]=\"_disabled()\"\n    (input)=\"onNativeChange($event)\"\n    class=\"radio mx-2\" [ngClass]=\"computedNgClasses()\" />\n</div>" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }], checkedChange: [{
+                type: Output
+            }] } });
+
+class NxaRadioGroup {
+    _radiosSig = contentChildren(NxaRadio, { ...(ngDevMode ? { debugName: "_radiosSig" } : {}), descendants: true });
+    _selectedValue = modelState(null, true);
+    get selectedValue() {
+        return this._selectedValue.get();
+    }
+    set selectedValue(value) {
+        this._selectedValue.set(value);
+        this.updateRadios();
+        this.onChange(value);
+        this.onTouched();
+    }
+    _name = signal('', ...(ngDevMode ? [{ debugName: "_name" }] : []));
+    set name(value) {
+        this._name.set(value);
+        this._radiosSig().forEach((radio) => (radio.name = value));
+    }
+    get name() {
+        return this._name();
+    }
+    onChange = () => {
+        return;
+    };
+    onTouched = () => {
+        return;
+    };
+    ngAfterContentInit() {
+        this._radiosSig().forEach((radio) => {
+            radio.name = this.name;
+            radio.selected.subscribe(() => {
+                this.selectedValue = radio.value;
+            });
+        });
+        this.updateRadios(); // initial sync
+    }
+    writeValue(obj) {
+        this._selectedValue.set(obj);
+        this.updateRadios();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._radiosSig().forEach((radio) => radio.setDisabledState(isDisabled));
+    }
+    /** Sync all radios with the selected value */
+    updateRadios() {
+        const value = this._selectedValue.get();
+        this._radiosSig()?.forEach((radio) => {
+            radio.setChecked(radio.value === value);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: NxaRadioGroup, isStandalone: true, selector: "nxa-radio-group", inputs: { selectedValue: "selectedValue", name: "name" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NxaRadioGroup),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "_radiosSig", predicate: NxaRadio, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-content select=""></ng-content> `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxa-radio-group',
+                    template: ` <ng-content select=""></ng-content> `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NxaRadioGroup),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { _radiosSig: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxaRadio), { ...{ descendants: true }, isSignal: true }] }], selectedValue: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
+class NxaRange {
+    _min = signal(0, ...(ngDevMode ? [{ debugName: "_min" }] : []));
+    set min(value) { this._min.set(value); }
+    get min() { return this._min(); }
+    ;
+    _max = signal(100, ...(ngDevMode ? [{ debugName: "_max" }] : []));
+    set max(value) {
+        this._max.set(value);
+    }
+    get max() {
+        return this._max();
+    }
+    _step = signal(1, ...(ngDevMode ? [{ debugName: "_step" }] : []));
+    set step(value) { this._step.set(value); }
+    get step() { return this._step(); }
+    _value = modelState(0, true);
+    set value(value) { this._value.set(value); }
+    get value() { return this._value.get(); }
+    valueChange = this._value.emitter;
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    set disabled(value) { this._disabled.set(value); }
+    get disabled() { return this._disabled(); }
+    _size = signal("md", ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    set size(size) { this._size.set(size); }
+    get size() {
+        return this._size();
+    }
+    _color = signal('neutral', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    set color(color) { this._color.set(color); }
+    get color() {
+        return this._color();
+    }
+    _className = signal("", ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    set className(value) { this._className.set(value); }
+    get className() { return this._className(); }
+    computedNgClasses = computed(() => {
+        const consumerClasses = this._className().split(/\s+/).filter(Boolean).reduce((acc, cls) => ({ ...acc, [cls]: true }), {});
+        return {
+            "range": true,
+            [`range-${this._size()}`]: true,
+            [`range-${this._color()}`]: true,
+            ...consumerClasses,
+        };
+    }, ...(ngDevMode ? [{ debugName: "computedNgClasses" }] : []));
+    onChange = () => { return; };
+    onTouched = () => { return; };
+    writeValue(obj) {
+        if (obj == null)
+            return;
+        const value = parseFloat(obj);
+        if (isNaN(value))
+            throw Error("Write value is not a number");
+        this._value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onValueChange($event) {
+        const inputEl = $event.target;
+        this.value = parseFloat(inputEl.value);
+        this.onChange(this.value);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaRange, isStandalone: true, selector: "nxa-range", inputs: { min: "min", max: "max", step: "step", value: "value", disabled: "disabled", size: "size", color: "color", className: "className" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NxaRange),
+                multi: true,
+            }
+        ], ngImport: i0, template: "<input \n  tooltip\n  type=\"range\" \n  [min]=\"_min()\"\n  [max]=\"_max()\"\n  [value]=\"_value.get()\"\n  [step]=\"_step()\"\n  [disabled]=\"_disabled()\"\n  [ariaValueMin]=\"_min()\"\n  [ariaValueMax]=\"_max()\"\n  [ariaValueNow]=\"_value.get()\"\n  [ngClass]=\"computedNgClasses()\"\n  [title]=\"_value.get()\"\n  (input)=\"onValueChange($event)\"\n  class=\"range w-full min-h-fit\" />", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaRange, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-range', host: {
+                        class: NXA_HOST_BLOCK,
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NxaRange),
+                            multi: true,
+                        }
+                    ], imports: [CommonModule], template: "<input \n  tooltip\n  type=\"range\" \n  [min]=\"_min()\"\n  [max]=\"_max()\"\n  [value]=\"_value.get()\"\n  [step]=\"_step()\"\n  [disabled]=\"_disabled()\"\n  [ariaValueMin]=\"_min()\"\n  [ariaValueMax]=\"_max()\"\n  [ariaValueNow]=\"_value.get()\"\n  [ngClass]=\"computedNgClasses()\"\n  [title]=\"_value.get()\"\n  (input)=\"onValueChange($event)\"\n  class=\"range w-full min-h-fit\" />" }]
+        }], propDecorators: { min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+class NxaSelect {
+    //#region State
+    //#endregion
+    //#region Input/Output
+    /**
+     * doc protected
+     */
+    _id = signal('', ...(ngDevMode ? [{ debugName: "_id" }] : []));
+    /**
+     * doc setter
+     */
+    set id(value) {
+        this._id.set(value);
+    }
+    /**
+     * doc getter
+     */
+    get id() { return this._id(); }
+    ;
+    _optionTemplateRef = signal(null, ...(ngDevMode ? [{ debugName: "_optionTemplateRef" }] : []));
+    set optionTemplateRef(value) {
+        this._optionTemplateRef.set(value);
+    }
+    get optionTemplateRef() { return this._optionTemplateRef(); }
+    ;
+    _value = modelState(null, true);
+    set selected(value) {
+        this._value.set(value);
+    }
+    get selected() { return this._value.get(); }
+    _options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
+    set options(values) {
+        this._options.set(values);
+    }
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    _color = signal('neutral', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    set color(value) {
+        this._color.set(value);
+    }
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    set size(value) {
+        this._size.set(value);
+    }
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    set className(value) {
+        this._className.set(value);
+    }
+    _compareFn = (a, b) => a === b;
+    set compareFn(value) {
+        this._compareFn = value;
+    }
+    nxaSelectedChange = this._value.emitter;
+    //#endregion
+    computeNgClasses = computed(() => {
+        return {
+            [`select-${this._size()}`]: true,
+            [`select-${this._color()}`]: true,
+            // [this.className()]: !!this.className(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "computeNgClasses" }] : []));
+    onChange = () => { return; };
+    onTouched = () => { return; };
+    isGroup(item) {
+        return item && typeof item === 'object' && 'options' in item && Array.isArray(item.options);
+    }
+    getIndexFromValue() {
+        if (!this._value.get())
+            return -1;
+        return this._options().indexOf(this._value.get());
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this._value.set(null);
+            return;
+        }
+        let found = null;
+        for (const item of this._options()) {
+            if (this.isGroup(item)) {
+                const inner = item.options.find(opt => this._compareFn(opt, obj));
+                if (inner) {
+                    found = inner;
+                    break;
+                }
+            }
+            else {
+                if (this._compareFn(item, obj)) {
+                    found = item;
+                    break;
+                }
+            }
+        }
+        // fallback: accept obj directly if not found
+        this._value.set(found ?? obj);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    selectedChange(event) {
+        const value = event.target.value;
+        // value format: "i" or "i-j" where i = group index or option index, j = index inside group
+        let selectedOption;
+        if (value.includes('-')) {
+            const [groupIndexStr, optionIndexStr] = value.split('-');
+            const groupIndex = parseInt(groupIndexStr, 10);
+            const optionIndex = parseInt(optionIndexStr, 10);
+            const group = this._options()[groupIndex];
+            selectedOption = group.options[optionIndex];
+        }
+        else {
+            const index = parseInt(value, 10);
+            selectedOption = this._options()[index];
+        }
+        this._value.set(selectedOption);
+        this.onChange(selectedOption);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaSelect, isStandalone: true, selector: "nxa-select", inputs: { id: "id", optionTemplateRef: "optionTemplateRef", selected: "selected", options: "options", disabled: "disabled", color: "color", size: "size", className: "className", compareFn: "compareFn" }, outputs: { nxaSelectedChange: "nxaSelectedChange" }, host: { properties: { "attr.id": "null" }, classAttribute: "contents" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NxaSelect),
+                multi: true,
+            }
+        ], ngImport: i0, template: "<div class=\"form-control h-full w-full\" [class]=\"_className()\">\n  <div class=\"label min-h-0 p-0 m-0\">\n    <div class=\"label-text\">\n      <ng-content select=\"[top-left]\"></ng-content>\n    </div>\n    <div class=\"label-text-alt\">\n      <ng-content select=\"[top-right]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"flex flex-row gap-2 justify-center items-center pb-2\">\n    <div class=\"w-fit label-text min-h-0\">\n      <ng-content select=\"[label]\"></ng-content>\n    </div>\n    <select class=\"select select-bordered w-full\" [id]=\"_id()\" [ngClass]=\"computeNgClasses()\" [value]=\"getIndexFromValue()\" (input)=\"selectedChange($event)\"\n      [disabled]=\"_disabled()\">\n      @for (element of _options(); track $index; let i = $index) {\n        @if (isGroup(element)) {\n          <optgroup [label]=\"element.label\">\n            @for (item of element.options; track $index; let j = $index) {\n              <option [value]=\"i + '-' + j\">\n                <ng-container *ngTemplateOutlet=\"_optionTemplateRef() ?? defaultRow; context: { $implicit: item }\"></ng-container>\n              </option>\n            }\n          </optgroup>\n        } @else {\n          <option [value]=\"i.toString()\">\n            <ng-container *ngTemplateOutlet=\"_optionTemplateRef() ?? defaultRow; context: { $implicit: element }\"></ng-container>\n          </option>\n        }\n      }\n    </select>\n  </div>\n  <div class=\"label p-0\">\n    <div class=\"label-text\">\n      <ng-content select=\"[bottom-left]\"></ng-content>\n    </div>\n    <div class=\"label-text-alt\">\n      <ng-content select=\"[bottom-right]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultRow let-item>\n  {{item}}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-select', host: {
+                        '[attr.id]': 'null',
+                        class: NXA_HOST_CONTENTS_ONLY
+                    }, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NxaSelect),
+                            multi: true,
+                        }
+                    ], template: "<div class=\"form-control h-full w-full\" [class]=\"_className()\">\n  <div class=\"label min-h-0 p-0 m-0\">\n    <div class=\"label-text\">\n      <ng-content select=\"[top-left]\"></ng-content>\n    </div>\n    <div class=\"label-text-alt\">\n      <ng-content select=\"[top-right]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"flex flex-row gap-2 justify-center items-center pb-2\">\n    <div class=\"w-fit label-text min-h-0\">\n      <ng-content select=\"[label]\"></ng-content>\n    </div>\n    <select class=\"select select-bordered w-full\" [id]=\"_id()\" [ngClass]=\"computeNgClasses()\" [value]=\"getIndexFromValue()\" (input)=\"selectedChange($event)\"\n      [disabled]=\"_disabled()\">\n      @for (element of _options(); track $index; let i = $index) {\n        @if (isGroup(element)) {\n          <optgroup [label]=\"element.label\">\n            @for (item of element.options; track $index; let j = $index) {\n              <option [value]=\"i + '-' + j\">\n                <ng-container *ngTemplateOutlet=\"_optionTemplateRef() ?? defaultRow; context: { $implicit: item }\"></ng-container>\n              </option>\n            }\n          </optgroup>\n        } @else {\n          <option [value]=\"i.toString()\">\n            <ng-container *ngTemplateOutlet=\"_optionTemplateRef() ?? defaultRow; context: { $implicit: element }\"></ng-container>\n          </option>\n        }\n      }\n    </select>\n  </div>\n  <div class=\"label p-0\">\n    <div class=\"label-text\">\n      <ng-content select=\"[bottom-left]\"></ng-content>\n    </div>\n    <div class=\"label-text-alt\">\n      <ng-content select=\"[bottom-right]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #defaultRow let-item>\n  {{item}}\n</ng-template>\n" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], optionTemplateRef: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], compareFn: [{
+                type: Input
+            }], nxaSelectedChange: [{
+                type: Output
+            }] } });
+
+class NxaTextInput extends WithClassBodyMixin(WithClassNameMixin(class {
+})) {
+    _placeholder = signal('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    /**
+     * Placeholder displayed Text
+     *  */
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
+    _type = signal('text', ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    /**
+     * Input type (text, email, password, search, url, tel, number)
+     */
+    set type(value) {
+        this._type.set(value);
+    }
+    get type() {
+        return this._type();
+    }
+    _name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : []));
+    /**
+     * Name Of Input Element
+     */
+    set name(value) {
+        this._name.set(value);
+    }
+    get name() {
+        return this._name();
+    }
+    _id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
+    /**
+     * Html element id
+     */
+    set id(value) {
+        this._id.set(value);
+    }
+    get id() {
+        return this._id();
+    }
+    _color = signal('neutral', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    /**
+     * Color of the input ( "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error" | "neutral")
+     */
+    set color(value) {
+        this._color.set(value);
+    }
+    get color() {
+        return this._color();
+    }
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
+    _autocomplete = signal(undefined, ...(ngDevMode ? [{ debugName: "_autocomplete" }] : []));
+    set autocomplete(value) {
+        this._autocomplete.set(value);
+    }
+    get autocomplete() {
+        return this._autocomplete();
+    }
+    _maxlength = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxlength" }] : []));
+    set maxlength(value) {
+        this._maxlength.set(value);
+    }
+    get maxlength() {
+        return this._maxlength();
+    }
+    _minlength = signal(undefined, ...(ngDevMode ? [{ debugName: "_minlength" }] : []));
+    set minlength(value) {
+        this._minlength.set(value);
+    }
+    get minlength() {
+        return this._minlength();
+    }
+    _required = signal(undefined, ...(ngDevMode ? [{ debugName: "_required" }] : []));
+    set required(value) {
+        this._required.set(value);
+    }
+    get required() {
+        return this._required();
+    }
+    _readonly = signal(undefined, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    set readonly(value) {
+        this._readonly.set(value);
+    }
+    get readonly() {
+        return this._readonly();
+    }
+    set classBody(value) {
+        this._classBody.set(value);
+    }
+    get classBody() {
+        return this._classBody();
+    }
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    _value = modelState(null, true);
+    set value(value) {
+        this._value.set(value);
+    }
+    get value() {
+        return this._value.get();
+    }
+    nxValueChange = this._value.emitter;
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    /** @ignore */
+    computedNgClasses = computed(() => ({
+        [`input-${this._color()}`]: true,
+        ['disabled']: this._disabled(),
+        [`input-${this._size()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "computedNgClasses" }] : []));
+    onChange = () => {
+        return;
+    };
+    onTouched = () => {
+        return;
+    };
+    writeValue(obj) {
+        this._value.set(obj);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    onInput(event) {
+        const input = event.target;
+        this._value.set(input.value);
+        this.onChange(input.value);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    ngOnInit() { return; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTextInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaTextInput, isStandalone: true, selector: "nxa-text-input", inputs: { placeholder: "placeholder", type: "type", name: "name", id: "id", color: "color", size: "size", autocomplete: "autocomplete", maxlength: "maxlength", minlength: "minlength", required: "required", readonly: "readonly", classBody: "classBody", className: "className", value: "value", disabled: "disabled" }, outputs: { nxValueChange: "nxValueChange" }, host: { properties: { "attr.id": "null" }, classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NxaTextInput),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<span class=\"nxa-text-input-container\" [ngClass]=\"_classNameObject()\">\n  <div class=\"content label\">\n      <ng-content select=\"[left]\"></ng-content>\n  </div>\n\n  <span \n    class=\"input input-bordered flex flex-row flex-1 justify-start items-center my-2 px-0\" \n    [ngClass]=\"{...computedNgClasses(),..._classBodyObject()}\"\n  >\n    <div class=\"min-w-0 px-0 w-fit\">\n      <ng-content select=\"[leading]\"></ng-content>\n    </div>\n\n    <input\n      class=\"grow flex-1 ps-2 min-w-fit\"\n      [attr.type]=\"_type()\"\n      [attr.placeholder]=\"_placeholder()\"\n      [attr.name]=\"_name()\"\n      [attr.id]=\"_id()\"\n      [attr.autocomplete]=\"_autocomplete()\"\n      [attr.maxlength]=\"_maxlength()\"\n      [attr.minlength]=\"_minlength()\"\n      [attr.required]=\"_required() ? true : null\"\n      [attr.readonly]=\"_readonly() ? true : null\"\n      [ngClass]=\"computedNgClasses()\"\n      [value]=\"_value.get() ?? ''\"\n      [disabled]=\"_disabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n\n    <div class=\"px-0 min-w-0\">\n      <ng-content select=\"[trailing]\"></ng-content>\n    </div>\n  </span>\n\n  <div class=\"contents label\">\n      <ng-content select=\"[right]\"></ng-content>\n  </div>\n</span>\n\n<div class=\"w-full min-h-0 p-0 m-0 text-error text-sm\">\n  <ng-content select=\"[error-message]\"></ng-content>\n</div>", styles: ["@layer properties;.nxa-text-input-container{display:flex;height:fit-content;width:100%;flex:auto;flex-direction:row;align-items:center}.nxa-text-input-container::nth-child{width:100%;border-style:var(--tw-border-style);border-width:1px}.nxa-text-input-container::first-child,.nxa-text-input-container::last-child{width:fit-content}@layer base{:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}}@layer base{:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root{--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")}}@layer base{:root{scrollbar-color:currentColor #0000}@supports (color: color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000) #0000}}}@layer base{@property --radialprogress{syntax: \"<percentage>\"; inherits: true; initial-value: 0%;}}@layer base{:root:not(span){overflow:var(--page-overflow)}}@layer base{:root{background:var(--page-scroll-bg, var(--root-bg));--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) var(--root-bg, #0000);--page-scroll-transition-on: background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter, unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset)}@supports (color: color-mix(in lab,red,red)){:root{--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%))}}@keyframes set-page-has-scroll{0%,to{--page-has-scroll: 1}}}@layer base{:root,[data-theme]{background:var(--page-scroll-bg, var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg: var(--color-base-100)}}@keyframes rating{0%,40%{scale:1.1;filter:brightness(1.05) contrast(1.05)}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{scale:.9;opacity:0}to{scale:1;opacity:1}}@keyframes rotator{89.9999%,to{--first-item-position: 0 0%}90%,99.9999%{--first-item-position: 0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTextInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-text-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NxaTextInput),
+                            multi: true,
+                        },
+                    ], standalone: true, host: {
+                        '[attr.id]': 'null',
+                        class: NXA_HOST_BLOCK,
+                    }, imports: [CommonModule], template: "<span class=\"nxa-text-input-container\" [ngClass]=\"_classNameObject()\">\n  <div class=\"content label\">\n      <ng-content select=\"[left]\"></ng-content>\n  </div>\n\n  <span \n    class=\"input input-bordered flex flex-row flex-1 justify-start items-center my-2 px-0\" \n    [ngClass]=\"{...computedNgClasses(),..._classBodyObject()}\"\n  >\n    <div class=\"min-w-0 px-0 w-fit\">\n      <ng-content select=\"[leading]\"></ng-content>\n    </div>\n\n    <input\n      class=\"grow flex-1 ps-2 min-w-fit\"\n      [attr.type]=\"_type()\"\n      [attr.placeholder]=\"_placeholder()\"\n      [attr.name]=\"_name()\"\n      [attr.id]=\"_id()\"\n      [attr.autocomplete]=\"_autocomplete()\"\n      [attr.maxlength]=\"_maxlength()\"\n      [attr.minlength]=\"_minlength()\"\n      [attr.required]=\"_required() ? true : null\"\n      [attr.readonly]=\"_readonly() ? true : null\"\n      [ngClass]=\"computedNgClasses()\"\n      [value]=\"_value.get() ?? ''\"\n      [disabled]=\"_disabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n\n    <div class=\"px-0 min-w-0\">\n      <ng-content select=\"[trailing]\"></ng-content>\n    </div>\n  </span>\n\n  <div class=\"contents label\">\n      <ng-content select=\"[right]\"></ng-content>\n  </div>\n</span>\n\n<div class=\"w-full min-h-0 p-0 m-0 text-error text-sm\">\n  <ng-content select=\"[error-message]\"></ng-content>\n</div>", styles: ["@layer properties;.nxa-text-input-container{display:flex;height:fit-content;width:100%;flex:auto;flex-direction:row;align-items:center}.nxa-text-input-container::nth-child{width:100%;border-style:var(--tw-border-style);border-width:1px}.nxa-text-input-container::first-child,.nxa-text-input-container::last-child{width:fit-content}@layer base{:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}}@layer base{:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root{--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")}}@layer base{:root{scrollbar-color:currentColor #0000}@supports (color: color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000) #0000}}}@layer base{@property --radialprogress{syntax: \"<percentage>\"; inherits: true; initial-value: 0%;}}@layer base{:root:not(span){overflow:var(--page-overflow)}}@layer base{:root{background:var(--page-scroll-bg, var(--root-bg));--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) var(--root-bg, #0000);--page-scroll-transition-on: background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter, unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset)}@supports (color: color-mix(in lab,red,red)){:root{--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%))}}@keyframes set-page-has-scroll{0%,to{--page-has-scroll: 1}}}@layer base{:root,[data-theme]{background:var(--page-scroll-bg, var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg: var(--color-base-100)}}@keyframes rating{0%,40%{scale:1.1;filter:brightness(1.05) contrast(1.05)}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{scale:.9;opacity:0}to{scale:1;opacity:1}}@keyframes rotator{89.9999%,to{--first-item-position: 0 0%}90%,99.9999%{--first-item-position: 0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], classBody: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], nxValueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class NxaLinearLayout {
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    /**
+     * Allows the consumer to pass additional CSS classes to the component.
+     * These classes will be merged with the component's own classes,
+     * allowing for further customization of the layout's appearance and behavior.
+     * className="flex-col"
+     */
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    _gap = signal('0', ...(ngDevMode ? [{ debugName: "_gap" }] : []));
+    set gap(value) {
+        this._gap.set(value);
+    }
+    get gap() {
+        return this._gap();
+    }
+    _justify = signal('between', ...(ngDevMode ? [{ debugName: "_justify" }] : []));
+    set justify(value) {
+        this._justify.set(value);
+    }
+    get justify() {
+        return this._justify();
+    }
+    _align = signal('start', ...(ngDevMode ? [{ debugName: "_align" }] : []));
+    set align(value) {
+        this._align.set(value);
+    }
+    get align() {
+        return this._align();
+    }
+    _wrap = signal('wrap', ...(ngDevMode ? [{ debugName: "_wrap" }] : [])); // nowrap, wrap, wrap-reverse
+    set wrap(value) {
+        this._wrap.set(value);
+    }
+    get wrap() {
+        return this._wrap();
+    }
+    _direction = signal('col', ...(ngDevMode ? [{ debugName: "_direction" }] : [])); // row, row-reverse, col, col-reverse
+    set direction(value) {
+        this._direction.set(value);
+    }
+    get direction() {
+        return this._direction();
+    }
+    // computed
+    computedClasses = computed(() => {
+        const consumerClasses = this._className().split(/\s+/).filter(Boolean).reduce((acc, cls) => ({ ...acc, [cls]: true }), {});
+        return {
+            [`justify-${this._justify()}`]: !!this._justify(),
+            [`items-${this._align()}`]: !!this._align(),
+            [`flex-${this._wrap()}`]: !!this._wrap(),
+            [`flex-${this._direction()}`]: !!this._direction(),
+            ...consumerClasses
+        };
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaLinearLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaLinearLayout, isStandalone: true, selector: "nxa-linear-layout", inputs: { className: "className", gap: "gap", justify: "justify", align: "align", wrap: "wrap", direction: "direction" }, host: { classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border" }, ngImport: i0, template: ` 
+  <div class="flex items-stretch min-h-fit h-full" [ngClass]="computedClasses()" [style.gap]="_gap()||'calc(var(--spacing) * 1)'">
+    <ng-content></ng-content>
+  </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaLinearLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxa-linear-layout',
+                    template: ` 
+  <div class="flex items-stretch min-h-fit h-full" [ngClass]="computedClasses()" [style.gap]="_gap()||'calc(var(--spacing) * 1)'">
+    <ng-content></ng-content>
+  </div>
+  `,
+                    imports: [CommonModule],
+                    host: {
+                        class: NXA_HOST_BLOCK,
+                    },
+                }]
+        }], propDecorators: { className: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }] } });
+
+class NxaContainer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaContainer, isStandalone: true, selector: "nxa-container", host: { classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border relative z-0 inset-0 box-border" }, ngImport: i0, template: `
+      <ng-content></ng-content>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxa-container',
+                    template: `
+      <ng-content></ng-content>
+  `,
+                    host: {
+                        class: `${NXA_HOST_BLOCK} relative z-0 inset-0 box-border`,
+                    }
+                }]
+        }] });
+
+class NxaExpansionPanel {
+    _isOpen = modelState(false, true);
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    _classHeader = signal('', ...(ngDevMode ? [{ debugName: "_classHeader" }] : []));
+    _classBody = signal('', ...(ngDevMode ? [{ debugName: "_classBody" }] : []));
+    set isOpen(value) { this._isOpen.set(value); }
+    get isOpen() { return this._isOpen.get(); }
+    set className(value) { this._className.set(value); }
+    set classHeader(value) { this._classHeader.set(value); }
+    set classBody(value) { this._classBody.set(value); }
+    isOpenChange = this._isOpen.emitter;
+    headerClicked() {
+        this._isOpen.set(!this._isOpen.get());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaExpansionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaExpansionPanel, isStandalone: true, selector: "nxa-expansion-panel", inputs: { isOpen: "isOpen", className: "className", classHeader: "classHeader", classBody: "classBody" }, outputs: { isOpenChange: "isOpenChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div class=\"collapse collapse-arrow bg-base-200 relative overflow-visible pointer-events-all\"\n  [class.collapse-open]=\"_isOpen.get()\" [class.collapse-close]=\"!_isOpen.get()\" [class]=\"_className()\">\n  <div class=\"collapse-title max-h-12 content-stretch overflow-visible pointer-events-auto cursor-pointer\" tabindex=\"0\"\n    (keyup.enter)=\"headerClicked()\" (click)=\"headerClicked()\" [class]=\"_classHeader()\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  </div>\n  <div class=\"collapse-content nxa-expansion-body \" [class]=\"_classBody()\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n  </div>\n</div>\n<ng-template #headerTemplate>\n  <ng-content select=\"[expansion-header]\"></ng-content>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <ng-content select=\"[expansion-body]\"></ng-content>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaExpansionPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-expansion-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: NXA_HOST_CONTENTS_ONLY
+                    }, imports: [
+                        CommonModule
+                    ], template: "<div class=\"collapse collapse-arrow bg-base-200 relative overflow-visible pointer-events-all\"\n  [class.collapse-open]=\"_isOpen.get()\" [class.collapse-close]=\"!_isOpen.get()\" [class]=\"_className()\">\n  <div class=\"collapse-title max-h-12 content-stretch overflow-visible pointer-events-auto cursor-pointer\" tabindex=\"0\"\n    (keyup.enter)=\"headerClicked()\" (click)=\"headerClicked()\" [class]=\"_classHeader()\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  </div>\n  <div class=\"collapse-content nxa-expansion-body \" [class]=\"_classBody()\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n  </div>\n</div>\n<ng-template #headerTemplate>\n  <ng-content select=\"[expansion-header]\"></ng-content>\n</ng-template>\n\n<ng-template #bodyTemplate>\n  <ng-content select=\"[expansion-body]\"></ng-content>\n</ng-template>" }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], classHeader: [{
+                type: Input
+            }], classBody: [{
+                type: Input
+            }], isOpenChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @group UI Components
+ */
+class NxaAccordion {
+    /**
+     * Get Expansion Panel Children
+     */
+    expansionPanelsSig = contentChildren(NxaExpansionPanel, ...(ngDevMode ? [{ debugName: "expansionPanelsSig" }] : []));
+    /**
+     * Map Expansion Panel state into a signal
+     */
+    expansionPanelStateSig = computed(() => this.expansionPanelsSig().map((x) => x.isOpen), ...(ngDevMode ? [{ debugName: "expansionPanelStateSig" }] : []));
+    /**
+     * Store old state
+     */
+    _oldState;
+    /**
+     * detect index of changed expansion panel (toggled) or NaN
+     */
+    changedPanel = computed(() => {
+        let index = NaN;
+        const oldState = this._oldState;
+        const newState = this.expansionPanelStateSig();
+        if (typeof this._oldState === 'undefined')
+            return NaN;
+        // Check for changes in state array
+        for (let i = 0; i < newState.length; i++) {
+            if (typeof oldState !== 'undefined' && oldState[i] !== newState[i]) {
+                index = i;
+                break;
+            }
+        }
+        // update old values
+        this._oldState = newState;
+        return index;
+    }, ...(ngDevMode ? [{ debugName: "changedPanel" }] : []));
+    updatePanels = effect(() => {
+        const index = this.changedPanel();
+        const panels = this.expansionPanelsSig();
+        if (Number.isNaN(index) || !panels[index].isOpen)
+            return;
+        for (let i = 0; i < panels.length; i++) {
+            const updatedPanel = panels[i];
+            if (index !== i) {
+                updatedPanel.isOpen = false;
+            }
+        }
+    }, ...(ngDevMode ? [{ debugName: "updatePanels" }] : []));
+    ngAfterContentInit() {
+        this._oldState = this.expansionPanelStateSig();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: NxaAccordion, isStandalone: true, selector: "nxa-accordion", host: { classAttribute: "w-full h-full min-h-0 flex flex-col flex-1" }, queries: [{ propertyName: "expansionPanelsSig", predicate: NxaExpansionPanel, isSignal: true }], ngImport: i0, template: "<div class=\"overflow-visible\">\n    <ng-container *ngTemplateOutlet=\"expansionPanelContainer\"></ng-container>\n</div>\n<ng-template #expansionPanelContainer>\n    <ng-content select=\"nxa-expansion-panel\"></ng-content>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaAccordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-accordion', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: `${NXA_HOST_LAYOUT}`,
+                    }, imports: [CommonModule], template: "<div class=\"overflow-visible\">\n    <ng-container *ngTemplateOutlet=\"expansionPanelContainer\"></ng-container>\n</div>\n<ng-template #expansionPanelContainer>\n    <ng-content select=\"nxa-expansion-panel\"></ng-content>\n</ng-template>" }]
+        }], propDecorators: { expansionPanelsSig: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxaExpansionPanel), { isSignal: true }] }] } });
+
+class NxaCard extends WithClassNameMixin(WithClassHeaderMixin(WithClassBodyMixin(WithClassFooterMixin(class {
+})))) {
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    sizeComputed = computed(() => {
+        return { [`card-${this._size()}`]: true };
+    }, ...(ngDevMode ? [{ debugName: "sizeComputed" }] : []));
+    set size(size) {
+        this._size.set(size);
+    }
+    get size() {
+        return this._size();
+    }
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    set classHeader(value) {
+        this._classHeader.set(value);
+    }
+    get classHeader() {
+        return this._classHeader();
+    }
+    set classBody(value) {
+        this._classBody.set(value);
+    }
+    get classBody() {
+        return this._classBody();
+    }
+    set classFooter(value) {
+        this._classFooter.set(value);
+    }
+    get classFooter() {
+        return this._classFooter();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaCard, isStandalone: true, selector: "nxa-card", inputs: { size: "size", className: "className", classHeader: "classHeader", classBody: "classBody", classFooter: "classFooter" }, host: { classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card bg-base-200 drop-shadow-xl flex h-full max-h-full nxa-card-component\" [ngClass]=\"{...sizeComputed(),..._classNameObject()}\">\n  <ng-content select=\"[card-image]\"></ng-content>\n  <div class=\"card-body flex flex-1 flex-col min-h-0 basis-full\">\n    <div class=\"card-title flex flex-0 min-h-0 h-fit nxa-card-title\" [ngClass]=\"_classHeaderObject()\">\n      <ng-content select=\"[card-header]\"></ng-content>\n    </div>\n    <div class=\"flex grow min-h-0 basis-full overflow-hidden nxa-card-body\"  [ngClass]=\"_classBodyObject()\">\n        <ng-content select=\"[card-body]\"></ng-content>\n    </div>\n    <div class=\"card-actions flex grow-0 min-h-0 h-fit nxa-card-footer\" [ngClass]=\"_classFooterObject()\">\n      <ng-content select=\"[card-footer]\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[card-image-bottom]\"></ng-content>\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: NXA_HOST_BLOCK,
+                    }, imports: [CommonModule], template: "<div class=\"card bg-base-200 drop-shadow-xl flex h-full max-h-full nxa-card-component\" [ngClass]=\"{...sizeComputed(),..._classNameObject()}\">\n  <ng-content select=\"[card-image]\"></ng-content>\n  <div class=\"card-body flex flex-1 flex-col min-h-0 basis-full\">\n    <div class=\"card-title flex flex-0 min-h-0 h-fit nxa-card-title\" [ngClass]=\"_classHeaderObject()\">\n      <ng-content select=\"[card-header]\"></ng-content>\n    </div>\n    <div class=\"flex grow min-h-0 basis-full overflow-hidden nxa-card-body\"  [ngClass]=\"_classBodyObject()\">\n        <ng-content select=\"[card-body]\"></ng-content>\n    </div>\n    <div class=\"card-actions flex grow-0 min-h-0 h-fit nxa-card-footer\" [ngClass]=\"_classFooterObject()\">\n      <ng-content select=\"[card-footer]\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[card-image-bottom]\"></ng-content>\n\n</div>\n" }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], classHeader: [{
+                type: Input
+            }], classBody: [{
+                type: Input
+            }], classFooter: [{
+                type: Input
+            }] } });
+
+class NxaAutoSizeDirective {
+    _nxaAutoSize = signal('xy', ...(ngDevMode ? [{ debugName: "_nxaAutoSize" }] : []));
+    set nxaAutoSize(value) {
+        this._nxaAutoSize.set(value);
+    }
+    ;
+    get height() {
+        return this._nxaAutoSize().includes('y') ? '100%' : null;
+    }
+    get flexGrow() {
+        return this._nxaAutoSize().includes('y') ? '1' : null;
+    }
+    get flexShrink() {
+        return this._nxaAutoSize().includes('y') ? '1' : null;
+    }
+    get flexBasis() {
+        return this._nxaAutoSize().includes('y') ? '0' : null;
+    }
+    get minHeight() {
+        return this._nxaAutoSize().includes('y') ? '0' : null;
+    }
+    get width() {
+        return this._nxaAutoSize().includes('x') ? '100%' : null;
+    }
+    get minWidth() {
+        return this._nxaAutoSize().includes('x') ? '0' : null;
+    }
+    position = 'relative';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaAutoSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: NxaAutoSizeDirective, isStandalone: true, selector: "[nxaAutoSize]", inputs: { nxaAutoSize: "nxaAutoSize" }, host: { properties: { "style.height": "this.height", "style.flex-grow": "this.flexGrow", "style.flex-shrink": "this.flexShrink", "style.flex-basis": "this.flexBasis", "style.min-height": "this.minHeight", "style.width": "this.width", "style.min-width": "this.minWidth", "style.position": "this.position" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaAutoSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxaAutoSize]',
+                    standalone: true,
+                }]
+        }], propDecorators: { nxaAutoSize: [{
+                type: Input
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }], flexGrow: [{
+                type: HostBinding,
+                args: ['style.flex-grow']
+            }], flexShrink: [{
+                type: HostBinding,
+                args: ['style.flex-shrink']
+            }], flexBasis: [{
+                type: HostBinding,
+                args: ['style.flex-basis']
+            }], minHeight: [{
+                type: HostBinding,
+                args: ['style.min-height']
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], minWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], position: [{
+                type: HostBinding,
+                args: ['style.position']
+            }] } });
+
+class NxaForceSizeDirective {
+    el = inject(ElementRef);
+    zone = inject(NgZone);
+    set nxaForceSize(value) {
+        this._nxaForceSize.set(value);
+    }
+    ;
+    _nxaForceSize = signal('xy', { ...(ngDevMode ? { debugName: "_nxaForceSize" } : {}) });
+    _resizeObserver;
+    hostWidth;
+    hostHeight;
+    ngAfterViewInit() {
+        if (typeof window === 'undefined')
+            return;
+        requestAnimationFrame(() => {
+            this.zone.runOutsideAngular(() => {
+                this.setDimensions();
+                const parent = this.el.nativeElement.parentElement;
+                if (parent) {
+                    this._resizeObserver = new ResizeObserver(() => this.setDimensions());
+                    this._resizeObserver.observe(parent);
+                }
+                window.addEventListener('resize', this.setDimensions);
+            });
+        });
+    }
+    setDimensions = () => {
+        const parent = this.el.nativeElement.parentElement;
+        if (!parent)
+            return;
+        const { height, width } = parent.getBoundingClientRect();
+        const size = this._nxaForceSize();
+        this.hostHeight = size.includes('y') ? `${height}px` : undefined;
+        this.hostWidth = size.includes('x') ? `${width}px` : undefined;
+    };
+    ngOnDestroy() {
+        this._resizeObserver?.disconnect();
+        if (typeof window === 'undefined')
+            return;
+        window.removeEventListener('resize', this.setDimensions);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaForceSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: NxaForceSizeDirective, isStandalone: true, selector: "[nxaForceSize]", inputs: { nxaForceSize: "nxaForceSize" }, host: { properties: { "style.width": "this.hostWidth", "style.height": "this.hostHeight" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaForceSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxaForceSize]',
+                    standalone: true,
+                }]
+        }], propDecorators: { nxaForceSize: [{
+                type: Input
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostHeight: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
+
+class NxaPagination {
+    _label = signal('Page', ...(ngDevMode ? [{ debugName: "_label" }] : []));
+    set label(value) {
+        this._label.set(value);
+    }
+    get label() {
+        return this._label();
+    }
+    _totalPages = signal(10, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
+    set totalPages(value) {
+        this._totalPages.set(value);
+    }
+    get totalPages() {
+        return this._totalPages();
+    }
+    _currentPage = modelState(1, true);
+    set currentPage(value) {
+        this._currentPage.set(value);
+    }
+    get currentPage() {
+        return this._currentPage.get();
+    }
+    currentPageChange = this._currentPage.emitter;
+    nextPage() {
+        this.currentPageChange.emit(this._currentPage.get() + 1);
+    }
+    prevPage() {
+        this.currentPageChange.emit(this._currentPage.get() - 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaPagination, isStandalone: true, selector: "nxa-pagination", inputs: { label: "label", totalPages: "totalPages", currentPage: "currentPage" }, outputs: { currentPageChange: "currentPageChange" }, ngImport: i0, template: "<div class=\"join w-72 py-1 my-3 flex flex-row justify-between items-center ms-4\">\n  <nxa-button color=\"primary\" classes=\"min-w-14 join-item\" [outlined]=\"true\" (click)=\"prevPage()\"\n    [disabled]=\"_currentPage.get() === 1\">\n    <ng-icon name=\"heroChevronLeft\"></ng-icon>\n  </nxa-button>\n  <span class=\"join-item bg-base-200 self-stretch flex-1 px-1 text-center content-center\">\n    <p class=\"text-center \">{{_label()}}</p>\n  </span>\n  <nxa-button color=\"primary\" classes=\"min-w-14 join-item\" [outlined]=\"true\" (click)=\"nextPage()\"\n    [disabled]=\"_currentPage.get() === _totalPages()\">\n    <ng-icon name=\"heroChevronRight\"></ng-icon>\n  </nxa-button>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: NxaButton, selector: "nxa-button", inputs: ["label", "color", "size", "disabled", "loading", "routerLink", "outlined", "className", "type", "spinnerTemplateRef"], outputs: ["nxaClick"] }], viewProviders: [provideIcons({ heroChevronRight, heroChevronLeft })] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaPagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-pagination', encapsulation: ViewEncapsulation.Emulated, viewProviders: [provideIcons({ heroChevronRight, heroChevronLeft })], imports: [CommonModule, NgIcon, NxaButton], template: "<div class=\"join w-72 py-1 my-3 flex flex-row justify-between items-center ms-4\">\n  <nxa-button color=\"primary\" classes=\"min-w-14 join-item\" [outlined]=\"true\" (click)=\"prevPage()\"\n    [disabled]=\"_currentPage.get() === 1\">\n    <ng-icon name=\"heroChevronLeft\"></ng-icon>\n  </nxa-button>\n  <span class=\"join-item bg-base-200 self-stretch flex-1 px-1 text-center content-center\">\n    <p class=\"text-center \">{{_label()}}</p>\n  </span>\n  <nxa-button color=\"primary\" classes=\"min-w-14 join-item\" [outlined]=\"true\" (click)=\"nextPage()\"\n    [disabled]=\"_currentPage.get() === _totalPages()\">\n    <ng-icon name=\"heroChevronRight\"></ng-icon>\n  </nxa-button>\n</div>" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], currentPageChange: [{
+                type: Output
+            }] } });
+
+class NxaDatagrid {
+    _data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
+    _headers = signal([], ...(ngDevMode ? [{ debugName: "_headers" }] : []));
+    set headers(value) {
+        this._headers.set(value);
+    }
+    get headers() {
+        return this._headers();
+    }
+    _headerRowTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_headerRowTemplate" }] : []));
+    set headerRowTemplate(value) {
+        this._headerRowTemplate.set(value);
+    }
+    get headerRowTemplate() {
+        return this._headerRowTemplate();
+    }
+    _dataRowTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_dataRowTemplate" }] : []));
+    set dataRowTemplate(value) {
+        this._dataRowTemplate.set(value);
+    }
+    get dataRowTemplate() {
+        return this._dataRowTemplate();
+    }
+    getObjectKeys(value) {
+        return Object.keys(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDatagrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaDatagrid, isStandalone: true, selector: "nxa-datagrid", inputs: { data: "data", headers: "headers", headerRowTemplate: "headerRowTemplate", dataRowTemplate: "dataRowTemplate" }, host: { classAttribute: "w-full h-full min-h-0 flex flex-col flex-1" }, ngImport: i0, template: "<div class=\"nxa-datagrid-container overflow-visible h-full min-h-0 flex flex-col flex-1\">\n  <div class=\"flex flex-row nxa-datagrid-headers relative top-0 left-0 w-full h-10 justify-between items-center overflow-visible\">\n    <div *ngFor=\"let header of _headers(); let hi = index\" class=\"w-full justify-stretch flex flex-row\">\n      <ng-container\n        *ngTemplateOutlet=\"_headerRowTemplate()|| defaultHeaders; context: { $implicit: header, index: hi }\"></ng-container>\n    </div>\n  </div>\n  <div class=\"w-full flex flex-col overflow-y-auto\" nxaAutoSize=\"y\">\n    <div class=\"flex flex-row justify-between\" *ngFor=\"let row of _data(); let ri = index\">\n      <ng-container\n        *ngTemplateOutlet=\"_dataRowTemplate() || defaultRow; context: { $implicit: row, index: ri }\"></ng-container>\n    </div>\n  </div>\n  <div>\n    <nxa-pagination class=\"h-20\" [currentPage]=\"1\" [totalPages]=\"20\" [label]=\"`page 1/20`\"></nxa-pagination>\n  </div>\n</div>\n\n<ng-template #defaultHeaders let-header let-index=\"index\">\n  <div class=\"flex flex-row w-full justify-stretch bg-purple-700 border\">\n    @for (key of getObjectKeys(header); track key) {\n      <div class=\"flex flex-row bg-red-500 w-full text-center\">\n        <p>\n          {{header[key]}}\n        </p>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #defaultRow let-row let-index=\"index\">\n  <div class=\"flex flex-row w-full justify-between shadow-xl\">\n    @for (key of getObjectKeys(row); track key) {\n      <div class=\"flex flex-row justify-between\">\n        {{row[key]}} {{index}}\n      </div>\n    }\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NxaAutoSizeDirective, selector: "[nxaAutoSize]", inputs: ["nxaAutoSize"] }, { kind: "component", type: NxaPagination, selector: "nxa-pagination", inputs: ["label", "totalPages", "currentPage"], outputs: ["currentPageChange"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDatagrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-datagrid', imports: [CommonModule, NxaAutoSizeDirective, NxaPagination], encapsulation: ViewEncapsulation.None, host: {
+                        class: NXA_HOST_LAYOUT
+                    }, template: "<div class=\"nxa-datagrid-container overflow-visible h-full min-h-0 flex flex-col flex-1\">\n  <div class=\"flex flex-row nxa-datagrid-headers relative top-0 left-0 w-full h-10 justify-between items-center overflow-visible\">\n    <div *ngFor=\"let header of _headers(); let hi = index\" class=\"w-full justify-stretch flex flex-row\">\n      <ng-container\n        *ngTemplateOutlet=\"_headerRowTemplate()|| defaultHeaders; context: { $implicit: header, index: hi }\"></ng-container>\n    </div>\n  </div>\n  <div class=\"w-full flex flex-col overflow-y-auto\" nxaAutoSize=\"y\">\n    <div class=\"flex flex-row justify-between\" *ngFor=\"let row of _data(); let ri = index\">\n      <ng-container\n        *ngTemplateOutlet=\"_dataRowTemplate() || defaultRow; context: { $implicit: row, index: ri }\"></ng-container>\n    </div>\n  </div>\n  <div>\n    <nxa-pagination class=\"h-20\" [currentPage]=\"1\" [totalPages]=\"20\" [label]=\"`page 1/20`\"></nxa-pagination>\n  </div>\n</div>\n\n<ng-template #defaultHeaders let-header let-index=\"index\">\n  <div class=\"flex flex-row w-full justify-stretch bg-purple-700 border\">\n    @for (key of getObjectKeys(header); track key) {\n      <div class=\"flex flex-row bg-red-500 w-full text-center\">\n        <p>\n          {{header[key]}}\n        </p>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #defaultRow let-row let-index=\"index\">\n  <div class=\"flex flex-row w-full justify-between shadow-xl\">\n    @for (key of getObjectKeys(row); track key) {\n      <div class=\"flex flex-row justify-between\">\n        {{row[key]}} {{index}}\n      </div>\n    }\n  </div>\n</ng-template>" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], headers: [{
+                type: Input
+            }], headerRowTemplate: [{
+                type: Input
+            }], dataRowTemplate: [{
+                type: Input
+            }] } });
+
+class NxaDynamicList {
+    _rowTemplateRef = signal(null, ...(ngDevMode ? [{ debugName: "_rowTemplateRef" }] : []));
+    set rowTemplateRef(value) {
+        this._rowTemplateRef.set(value);
+    }
+    get rowTemplateRef() {
+        return this._rowTemplateRef();
+    }
+    _data = signal(null, ...(ngDevMode ? [{ debugName: "_data" }] : []));
+    set data(value) {
+        this._data.set(value);
+    }
+    get data() {
+        return this._data();
+    }
+    _enableSorting = signal(false, ...(ngDevMode ? [{ debugName: "_enableSorting" }] : []));
+    set enableSorting(value) {
+        this._enableSorting.set(value);
+    }
+    get enableSorting() {
+        return this._enableSorting();
+    }
+    _enableDrop = signal(false, ...(ngDevMode ? [{ debugName: "_enableDrop" }] : []));
+    set enableDrop(value) {
+        this._enableDrop.set(value);
+    }
+    get enableDrop() {
+        return this._enableDrop();
+    }
+    _enableDrag = signal(false, ...(ngDevMode ? [{ debugName: "_enableDrag" }] : []));
+    set enableDrag(value) {
+        this._enableDrag.set(value);
+    }
+    get enableDrag() {
+        return this._enableDrag();
+    }
+    _rowHeight = signal(48, ...(ngDevMode ? [{ debugName: "_rowHeight" }] : []));
+    set rowHeight(value) {
+        this._rowHeight.set(value);
+    }
+    get rowHeight() {
+        return this._rowHeight();
+    }
+    elementSorted = new EventEmitter();
+    elementDropped(event) {
+        this._data.update((currentData) => {
+            if (!currentData) {
+                console.warn("NxaDynamicList: Data array is not initialized during drop operation.");
+                return [];
+            }
+            const newData = [...currentData];
+            this.elementSorted.emit({ prevIndex: event.previousIndex, currentIndex: event.currentIndex });
+            moveItemInArray(newData, event.previousIndex, event.currentIndex);
+            return newData;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDynamicList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaDynamicList, isStandalone: true, selector: "nxa-dynamic-list", inputs: { rowTemplateRef: "rowTemplateRef", data: "data", enableSorting: "enableSorting", enableDrop: "enableDrop", enableDrag: "enableDrag", rowHeight: "rowHeight" }, outputs: { elementSorted: "elementSorted" }, host: { classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border" }, ngImport: i0, template: "<cdk-virtual-scroll-viewport [itemSize]=\"_rowHeight()\" class=\"h-full w-full\" cdkDropList\n  [cdkDropListDisabled]=\"!_enableDrop()\" [cdkDropListSortingDisabled]=\"!_enableSorting()\"\n  (cdkDropListDropped)=\"elementDropped($event)\">\n  <div *cdkVirtualFor=\"let item of _data(); let i = index\" cdkDrag [cdkDragDisabled]=\"!_enableDrag()\">\n    <ng-container *ngTemplateOutlet=\"_rowTemplateRef(); context: { $implicit: item, index: i }\"></ng-container>\n  </div>\n</cdk-virtual-scroll-viewport>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDynamicList, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-dynamic-list', standalone: true, host: {
+                        class: NXA_HOST_BLOCK
+                    }, imports: [CommonModule, ScrollingModule, CdkDrag, CdkDropList, NxaContainer], template: "<cdk-virtual-scroll-viewport [itemSize]=\"_rowHeight()\" class=\"h-full w-full\" cdkDropList\n  [cdkDropListDisabled]=\"!_enableDrop()\" [cdkDropListSortingDisabled]=\"!_enableSorting()\"\n  (cdkDropListDropped)=\"elementDropped($event)\">\n  <div *cdkVirtualFor=\"let item of _data(); let i = index\" cdkDrag [cdkDragDisabled]=\"!_enableDrag()\">\n    <ng-container *ngTemplateOutlet=\"_rowTemplateRef(); context: { $implicit: item, index: i }\"></ng-container>\n  </div>\n</cdk-virtual-scroll-viewport>" }]
+        }], propDecorators: { rowTemplateRef: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], enableSorting: [{
+                type: Input
+            }], enableDrop: [{
+                type: Input
+            }], enableDrag: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], elementSorted: [{
+                type: Output
+            }] } });
+
+class NxaListTile {
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaListTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaListTile, isStandalone: true, selector: "nxa-list-tile", inputs: { className: "className" }, host: { classAttribute: "contents" }, ngImport: i0, template: "<div class=\"w-full grid bg-inherit grid-cols-[auto_auto_auto] gap-1 h-12\" [class]=\"_className()\">\n  <div class=\"nxa-list-tile-leading content-center\">\n    <ng-content select=\"[leading]\"></ng-content>\n  </div>\n  <div class=\"nxa-list-tile-content content-center\">\n    <ng-content select=\"\"></ng-content>\n  </div>\n  <div class=\"nxa-list-tile-trailing content-center\">\n    <ng-content select=\"[trailing]\"></ng-content>\n  </div>\n</div>" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaListTile, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-list-tile', host: {
+                        class: NXA_HOST_CONTENTS_ONLY,
+                    }, template: "<div class=\"w-full grid bg-inherit grid-cols-[auto_auto_auto] gap-1 h-12\" [class]=\"_className()\">\n  <div class=\"nxa-list-tile-leading content-center\">\n    <ng-content select=\"[leading]\"></ng-content>\n  </div>\n  <div class=\"nxa-list-tile-content content-center\">\n    <ng-content select=\"\"></ng-content>\n  </div>\n  <div class=\"nxa-list-tile-trailing content-center\">\n    <ng-content select=\"[trailing]\"></ng-content>\n  </div>\n</div>" }]
+        }], propDecorators: { className: [{
+                type: Input
+            }] } });
+
+class NxaBadge extends WithClassNameMixin(class {
+}) {
+    domSanitizer = inject(DomSanitizer);
+    // Signals
+    _color = signal('accent', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    _outlined = signal(false, ...(ngDevMode ? [{ debugName: "_outlined" }] : []));
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _label = signal('', ...(ngDevMode ? [{ debugName: "_label" }] : []));
+    _icon = signal('', ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    // @Input() setters
+    set color(value) {
+        this._color.set(value);
+    }
+    get color() {
+        return this._color();
+    }
+    set outlined(value) {
+        this._outlined.set(value);
+    }
+    get outlined() {
+        return this._outlined();
+    }
+    set size(value) {
+        this._size.set(value);
+    }
+    get size() {
+        return this._size();
+    }
+    set label(value) {
+        this._label.set(value);
+    }
+    get label() {
+        return this._label();
+    }
+    set icon(value) {
+        this._icon.set(value);
+    }
+    get icon() {
+        return this._icon();
+    }
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    computedClasses = computed(() => {
+        return {
+            [`badge-${this._size()}`]: true,
+            [`badge-${this._color()}`]: true,
+            [`badge-outline`]: this._outlined(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    getIconHTML() {
+        if (this._icon()) {
+            return sanitizeIcon(this._icon(), this.domSanitizer);
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaBadge, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaBadge, isStandalone: true, selector: "nxa-badge", inputs: { color: "color", outlined: "outlined", size: "size", label: "label", icon: "icon", className: "className" }, usesInheritance: true, ngImport: i0, template: "<div class=\"badge flex flex-row items-center nxa-badge-component\" [ngClass]=\"{\n            'badge-neutral':_color()==='neutral',\n            'badge-primary':_color()==='primary',\n            'badge-secondary':_color()==='secondary',\n            'badge-accent':_color()==='accent',\n            'badge-ghost':_color()==='ghost',\n            'badge-link':_color()==='link',\n            'badge-info':_color()==='info',\n            'badge-success':_color()==='success',\n            'badge-warning':_color()==='warning',\n            'badge-error':_color()==='error',\n            'badge-xs':_size()==='xs',\n            'badge-sm':_size()==='sm',\n            'badge-md':_size()==='md',\n            'badge-lg':_size()==='lg',\n            'badge-xl':_size()==='xl', \n            ...computedClasses(),\n            ..._classNameObject()\n        }\">\n  <div class=\"w-fit h-fit\">\n    <ng-content select=\"[leading]\"></ng-content>\n  </div>\n  @if (_label()) {\n  <p class=\"me-1 font-light text-sm\">{{_label()}}</p>\n  }\n  <ng-content></ng-content>\n  @if(!!_icon()){\n  <div class=\"w-4 h-4 flex items-center justify-center text-[1rem]\" [innerHTML]=\"getIconHTML()\"></div>\n  }\n  <div class=\"w-fit h-fit\">\n    <ng-content select=\"[trailing]\"></ng-content>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaBadge, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-badge', encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<div class=\"badge flex flex-row items-center nxa-badge-component\" [ngClass]=\"{\n            'badge-neutral':_color()==='neutral',\n            'badge-primary':_color()==='primary',\n            'badge-secondary':_color()==='secondary',\n            'badge-accent':_color()==='accent',\n            'badge-ghost':_color()==='ghost',\n            'badge-link':_color()==='link',\n            'badge-info':_color()==='info',\n            'badge-success':_color()==='success',\n            'badge-warning':_color()==='warning',\n            'badge-error':_color()==='error',\n            'badge-xs':_size()==='xs',\n            'badge-sm':_size()==='sm',\n            'badge-md':_size()==='md',\n            'badge-lg':_size()==='lg',\n            'badge-xl':_size()==='xl', \n            ...computedClasses(),\n            ..._classNameObject()\n        }\">\n  <div class=\"w-fit h-fit\">\n    <ng-content select=\"[leading]\"></ng-content>\n  </div>\n  @if (_label()) {\n  <p class=\"me-1 font-light text-sm\">{{_label()}}</p>\n  }\n  <ng-content></ng-content>\n  @if(!!_icon()){\n  <div class=\"w-4 h-4 flex items-center justify-center text-[1rem]\" [innerHTML]=\"getIconHTML()\"></div>\n  }\n  <div class=\"w-fit h-fit\">\n    <ng-content select=\"[trailing]\"></ng-content>\n  </div>\n</div>" }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], outlined: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+class NxaText {
+    _layoutService = inject(NxaLayoutService);
+    _screenSizeChanged = toSignal(this._layoutService.breakpoint$);
+    _for = signal('', ...(ngDevMode ? [{ debugName: "_for" }] : []));
+    set for(value) { this._for.set(value); }
+    get for() { return this._for(); }
+    _useLabelTag = computed(() => !!this._for(), ...(ngDevMode ? [{ debugName: "_useLabelTag" }] : []));
+    /**
+     * The type of text to render.
+     */
+    _type = signal('paragraph', ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    set type(value) { this._type.set(value); }
+    get type() { return this._type(); }
+    /**
+     * The size of the text.
+     * default depends on the type of text
+     */
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    set size(value) { this._size.set(value); }
+    get size() { return this._size(); }
+    _computeSizeSuffix = computed(() => {
+        const screenBreakPoint = this._screenSizeChanged();
+        const sizeInput = this._size();
+        let result = 'md';
+        if (!!sizeInput && typeof sizeInput === 'object') {
+            result = sizeInput[screenBreakPoint] || 'md';
+        }
+        else if (!!sizeInput && typeof sizeInput === 'string') {
+            result = sizeInput;
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "_computeSizeSuffix" }] : []));
+    /**
+     * The weight of the text.
+     * default depends on the type of text
+     * Possible values: 'extralight', 'thin', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'
+     */
+    _weight = signal(null, ...(ngDevMode ? [{ debugName: "_weight" }] : []));
+    set weight(value) { this._weight.set(value); }
+    ;
+    get weight() { return this._weight(); }
+    /**
+     * The italic style of the text.
+     * default false
+     */
+    _italic = signal(false, ...(ngDevMode ? [{ debugName: "_italic" }] : []));
+    set italic(value) { this._italic.set(value); }
+    ;
+    get italic() { return this._italic(); }
+    /**
+     * The color of the text.
+     * default 'content'
+     * Possible values: 'primary', 'secondary', 'success', 'warning', 'error', 'content', 'info', 'neutral'
+     *
+     * Note: This is a custom color, not a tailwind color.
+     * You can use this to set the color of the text to any color you want.
+     */
+    _color = signal('content', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    set color(value) { this._color.set(value); }
+    ;
+    get color() { return this._color(); }
+    // Alternative using input from angular core
+    //
+    /**
+     * Custom class name to add to the text element.
+     * This can be used to add additional styles to the text element.
+     * It will be added to the computed classes of the text element.
+     *
+     * Note: use tailwind/ global classes to override local value, some time !important is required.
+     */
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    set className(value) {
+        this._className.set(value);
+    }
+    ;
+    get className() {
+        return this._className();
+    }
+    ;
+    computedClasses = computed(() => {
+        let classes = `nxa-text ${'nxa-text-' + this._type()}`;
+        const size = this._computeSizeSuffix();
+        classes += ` nxa-text-${size}`;
+        if (this._weight()) {
+            classes += ` nxa-text-${this._weight()}`;
+        }
+        if (this._color()) {
+            classes += ` nxa-text-${this._color()}`;
+        }
+        return `${classes} ${this._className()}`;
+    }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaText, isStandalone: true, selector: "nxa-text", inputs: { for: "for", type: "type", size: "size", weight: "weight", italic: "italic", color: "color", className: "className" }, host: { properties: { "attr.for": "null" }, classAttribute: "contents" }, ngImport: i0, template: "@if(!!_for()){\n<label class=\"min-h-fit h-fit w-fit\" [for]=\"_for()\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</label>\n}@else if(_type()===\"title\" && _size()==='xl')\n{\n<h1 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h1>\n}@else if(_type()===\"title\" && _size()==='lg')\n{\n<h2 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h2>\n}@else if(_type()===\"title\" && _size()==='md')\n{\n<h3 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h3>\n}@else if(_type()===\"title\" && _size()==='sm')\n{\n<h4 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h4>\n}@else if(_type()===\"title\" && _size()==='xs')\n{\n<h5 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h5>\n}@else{\n<p class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</p>\n}\n\n<ng-template #content>\n  <ng-content select=\"\"></ng-content>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaText, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-text', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], host: {
+                        class: NXA_HOST_CONTENTS_ONLY,
+                        '[attr.for]': "null",
+                    }, template: "@if(!!_for()){\n<label class=\"min-h-fit h-fit w-fit\" [for]=\"_for()\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</label>\n}@else if(_type()===\"title\" && _size()==='xl')\n{\n<h1 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h1>\n}@else if(_type()===\"title\" && _size()==='lg')\n{\n<h2 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h2>\n}@else if(_type()===\"title\" && _size()==='md')\n{\n<h3 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h3>\n}@else if(_type()===\"title\" && _size()==='sm')\n{\n<h4 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h4>\n}@else if(_type()===\"title\" && _size()==='xs')\n{\n<h5 class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</h5>\n}@else{\n<p class=\"min-h-fit h-fit\" [class]=\"computedClasses()\" [ngClass]=\"{\n    'italic': _italic(),\n  }\">\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n</p>\n}\n\n<ng-template #content>\n  <ng-content select=\"\"></ng-content>\n</ng-template>" }]
+        }], propDecorators: { for: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }], italic: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+class NxaDrawer {
+    domSanitizer = inject(DomSanitizer);
+    _headerContent = signal(null, ...(ngDevMode ? [{ debugName: "_headerContent" }] : []));
+    set headerContent(value) {
+        this._headerContent.set(value);
+    }
+    get headerContent() {
+        return this._headerContent();
+    }
+    _footerContent = signal(null, ...(ngDevMode ? [{ debugName: "_footerContent" }] : []));
+    set footerContent(value) {
+        this._footerContent.set(value);
+    }
+    get footerContent() {
+        return this._footerContent();
+    }
+    _menuEntries = signal([], ...(ngDevMode ? [{ debugName: "_menuEntries" }] : []));
+    set menuEntries(value) {
+        this._menuEntries.set(value);
+    }
+    get menuEntries() {
+        return this._menuEntries();
+    }
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    getIconHtml(icon) {
+        return sanitizeIcon(icon, this.domSanitizer);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaDrawer, isStandalone: true, selector: "nxa-drawer", inputs: { headerContent: "headerContent", footerContent: "footerContent", menuEntries: "menuEntries", className: "className" }, host: { classAttribute: "w-full h-full min-h-0 flex flex-col flex-1" }, ngImport: i0, template: "<!-- nxa Drawer Container -->\n<div class=\"nxa-drawer-container\" [class]=\"_className()\">\n    <!-- nxa Drawer Header -->\n    @if(!!_headerContent()){\n    <div class=\"nxa-drawer-header\">\n        <ng-container *ngTemplateOutlet=\"_headerContent()!\"></ng-container>\n    </div>\n    }\n    <!-- nxa Drawer Menu -->\n    <div class=\"nxa-drawer-menu\">\n        <!-- For each Section in the menu Entries -->\n        @for (section of _menuEntries(); track $index) {\n        <div class=\"nxa-drawer-menu-section\">\n            <!-- Menu Section Title -->\n            <nxa-text className=\"nxa-drawer-menu-section-title\" type=\"label\" size=\"xl\"\n                color=\"primary\">{{section.label}}</nxa-text>\n            <!-- Menu Section Entries -->\n            <ul class=\"w-full\">\n                @for (item of section.entries; track $index) {\n                <ng-container *ngTemplateOutlet=\"renderMenuEntry; context: { $implicit: item }\"></ng-container>\n                }\n            </ul>\n        </div>\n        }\n    </div>\n\n\n    @if(!!_footerContent()){\n    <div class=\"nxa-drawer-footer\">\n        <ng-container *ngTemplateOutlet=\"_footerContent()!\"></ng-container>\n    </div>\n    }\n</div>\n\n<ng-template #renderMenuEntry let-item>\n    @if(!item.subEntries && item.routerLink){\n    <!-- Menu Entry single line  -->\n    <a class=\"nxa-drawer-menu-entry nxa-click-animation\" [id]=\"item.id||''\" [routerLink]=\"item.routerLink\"\n        [fragment]=\"item.fragment\" [routerLinkActive]=\"'active'\">\n        <!-- Display icon if needed  or placeholder-->\n        @if(!!item.icon){\n        <div class=\"nxa-drawer-menu-icon\" [innerHTML]=\"getIconHtml(item.icon)\"></div>\n        }\n        @else {\n        <div class=\"\"></div>\n        }\n        <!-- Actual Entry label -->\n        <nxa-text className=\"nxa-drawer-menu-label\" type=\"label\" [size]=\"{\n            'xs': 'sm',\n            'sm': 'md',\n            'md': 'md',\n            'lg': 'md',\n            'xl': 'lg',\n            '2xl': 'lg'\n        }\" weight=\"light\" color=\"content\">{{item.label}}</nxa-text>\n        <!-- Display Badge If needed -->\n        @if (!!item.badge) {\n        <nxa-badge class=\"nxa-drawer-menu-badge\" [label]=\"item.badge.label\" [color]=\"item.badge.color\"\n            [size]=\"item.badge.size\" [icon]=\"item.badge.icon\">\n        </nxa-badge>\n        }\n    </a>\n    }@else if(item.onClick){\n    <!-- Menu Entry single line  -->\n    <button class=\"nxa-drawer-menu-entry nxa-click-animation\" [id]=\"item.id||''\" [routerLink]=\"item.routerLink\"\n        [fragment]=\"item.fragment\" [routerLinkActive]=\"'active'\" (click)=\"item.onClick()\">\n        <!-- Display icon if needed  or placeholder-->\n        @if(!!item.icon){\n        <div class=\"nxa-drawer-menu-icon\" [innerHTML]=\"getIconHtml(item.icon)\"></div>\n        }\n        @else {\n        <div class=\"\"></div>\n        }\n        <!-- Actual Entry label -->\n        <nxa-text className=\"nxa-drawer-menu-label\" type=\"label\" [size]=\"{\n            'xs': 'sm',\n            'sm': 'md',\n            'md': 'md',\n            'lg': 'md',\n            'xl': 'lg',\n            '2xl': 'lg'\n        }\" weight=\"light\" color=\"content\">{{item.label}}</nxa-text>\n        <!-- Display Badge If needed -->\n        @if (!!item.badge) {\n        <nxa-badge class=\"nxa-drawer-menu-badge\" [label]=\"item.badge.label\" [color]=\"item.badge.color\"\n            [size]=\"item.badge.size\" [icon]=\"item.badge.icon\">\n        </nxa-badge>\n        }\n    </button>\n    }\n    @else{\n    <!-- Menu section Subentries (recursive) -->\n    <nxa-expansion-panel [isOpen]=\"item.defaultOpen || false\" className=\"mx-0\" classBody=\"px-0\">\n        <div expansion-header class=\"nxa-drawer-menu-expansion h-10 pointer-events-auto\">\n            <!-- Display icon if needed  or placeholder-->\n            @if(!!item.icon){\n            <div class=\"nxa-drawer-menu-icon\" [innerHTML]=\"getIconHtml(item.icon)\">\n            </div>\n            }@else {\n            <div class=\"\"></div>\n            }\n            <!-- Actual Entry label -->\n            <nxa-text className=\"nxa-drawer-menu-label\" type=\"label\" size=\"md\">{{item.label}}</nxa-text>\n            <!-- Display Badge If needed -->\n            @if (!!item.badge) {\n            <nxa-badge class=\"nxa-drawer-menu-badge\" [label]=\"item.badge.label\" [color]=\"item.badge.color\"\n                [size]=\"item.badge.size\" [icon]=\"item.badge.icon\">\n            </nxa-badge>\n            }\n        </div>\n        <div expansion-body>\n            <ul>\n                @for (subItem of item.subEntries; track $index) {\n                <ng-container *ngTemplateOutlet=\"renderMenuEntry; context: { $implicit: subItem }\"></ng-container>\n                }\n            </ul>\n        </div>\n    </nxa-expansion-panel>\n    }\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxaBadge, selector: "nxa-badge", inputs: ["color", "outlined", "size", "label", "icon", "className"] }, { kind: "component", type: NxaExpansionPanel, selector: "nxa-expansion-panel", inputs: ["isOpen", "className", "classHeader", "classBody"], outputs: ["isOpenChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NxaText, selector: "nxa-text", inputs: ["for", "type", "size", "weight", "italic", "color", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-drawer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, NxaBadge, NxaExpansionPanel, RouterLink, RouterLinkActive, NxaText], host: {
+                        class: NXA_HOST_LAYOUT
+                    }, template: "<!-- nxa Drawer Container -->\n<div class=\"nxa-drawer-container\" [class]=\"_className()\">\n    <!-- nxa Drawer Header -->\n    @if(!!_headerContent()){\n    <div class=\"nxa-drawer-header\">\n        <ng-container *ngTemplateOutlet=\"_headerContent()!\"></ng-container>\n    </div>\n    }\n    <!-- nxa Drawer Menu -->\n    <div class=\"nxa-drawer-menu\">\n        <!-- For each Section in the menu Entries -->\n        @for (section of _menuEntries(); track $index) {\n        <div class=\"nxa-drawer-menu-section\">\n            <!-- Menu Section Title -->\n            <nxa-text className=\"nxa-drawer-menu-section-title\" type=\"label\" size=\"xl\"\n                color=\"primary\">{{section.label}}</nxa-text>\n            <!-- Menu Section Entries -->\n            <ul class=\"w-full\">\n                @for (item of section.entries; track $index) {\n                <ng-container *ngTemplateOutlet=\"renderMenuEntry; context: { $implicit: item }\"></ng-container>\n                }\n            </ul>\n        </div>\n        }\n    </div>\n\n\n    @if(!!_footerContent()){\n    <div class=\"nxa-drawer-footer\">\n        <ng-container *ngTemplateOutlet=\"_footerContent()!\"></ng-container>\n    </div>\n    }\n</div>\n\n<ng-template #renderMenuEntry let-item>\n    @if(!item.subEntries && item.routerLink){\n    <!-- Menu Entry single line  -->\n    <a class=\"nxa-drawer-menu-entry nxa-click-animation\" [id]=\"item.id||''\" [routerLink]=\"item.routerLink\"\n        [fragment]=\"item.fragment\" [routerLinkActive]=\"'active'\">\n        <!-- Display icon if needed  or placeholder-->\n        @if(!!item.icon){\n        <div class=\"nxa-drawer-menu-icon\" [innerHTML]=\"getIconHtml(item.icon)\"></div>\n        }\n        @else {\n        <div class=\"\"></div>\n        }\n        <!-- Actual Entry label -->\n        <nxa-text className=\"nxa-drawer-menu-label\" type=\"label\" [size]=\"{\n            'xs': 'sm',\n            'sm': 'md',\n            'md': 'md',\n            'lg': 'md',\n            'xl': 'lg',\n            '2xl': 'lg'\n        }\" weight=\"light\" color=\"content\">{{item.label}}</nxa-text>\n        <!-- Display Badge If needed -->\n        @if (!!item.badge) {\n        <nxa-badge class=\"nxa-drawer-menu-badge\" [label]=\"item.badge.label\" [color]=\"item.badge.color\"\n            [size]=\"item.badge.size\" [icon]=\"item.badge.icon\">\n        </nxa-badge>\n        }\n    </a>\n    }@else if(item.onClick){\n    <!-- Menu Entry single line  -->\n    <button class=\"nxa-drawer-menu-entry nxa-click-animation\" [id]=\"item.id||''\" [routerLink]=\"item.routerLink\"\n        [fragment]=\"item.fragment\" [routerLinkActive]=\"'active'\" (click)=\"item.onClick()\">\n        <!-- Display icon if needed  or placeholder-->\n        @if(!!item.icon){\n        <div class=\"nxa-drawer-menu-icon\" [innerHTML]=\"getIconHtml(item.icon)\"></div>\n        }\n        @else {\n        <div class=\"\"></div>\n        }\n        <!-- Actual Entry label -->\n        <nxa-text className=\"nxa-drawer-menu-label\" type=\"label\" [size]=\"{\n            'xs': 'sm',\n            'sm': 'md',\n            'md': 'md',\n            'lg': 'md',\n            'xl': 'lg',\n            '2xl': 'lg'\n        }\" weight=\"light\" color=\"content\">{{item.label}}</nxa-text>\n        <!-- Display Badge If needed -->\n        @if (!!item.badge) {\n        <nxa-badge class=\"nxa-drawer-menu-badge\" [label]=\"item.badge.label\" [color]=\"item.badge.color\"\n            [size]=\"item.badge.size\" [icon]=\"item.badge.icon\">\n        </nxa-badge>\n        }\n    </button>\n    }\n    @else{\n    <!-- Menu section Subentries (recursive) -->\n    <nxa-expansion-panel [isOpen]=\"item.defaultOpen || false\" className=\"mx-0\" classBody=\"px-0\">\n        <div expansion-header class=\"nxa-drawer-menu-expansion h-10 pointer-events-auto\">\n            <!-- Display icon if needed  or placeholder-->\n            @if(!!item.icon){\n            <div class=\"nxa-drawer-menu-icon\" [innerHTML]=\"getIconHtml(item.icon)\">\n            </div>\n            }@else {\n            <div class=\"\"></div>\n            }\n            <!-- Actual Entry label -->\n            <nxa-text className=\"nxa-drawer-menu-label\" type=\"label\" size=\"md\">{{item.label}}</nxa-text>\n            <!-- Display Badge If needed -->\n            @if (!!item.badge) {\n            <nxa-badge class=\"nxa-drawer-menu-badge\" [label]=\"item.badge.label\" [color]=\"item.badge.color\"\n                [size]=\"item.badge.size\" [icon]=\"item.badge.icon\">\n            </nxa-badge>\n            }\n        </div>\n        <div expansion-body>\n            <ul>\n                @for (subItem of item.subEntries; track $index) {\n                <ng-container *ngTemplateOutlet=\"renderMenuEntry; context: { $implicit: subItem }\"></ng-container>\n                }\n            </ul>\n        </div>\n    </nxa-expansion-panel>\n    }\n</ng-template>" }]
+        }], propDecorators: { headerContent: [{
+                type: Input
+            }], footerContent: [{
+                type: Input
+            }], menuEntries: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+class NxaProgressApiCall {
+    loadingService = inject(NxaLoadingService);
+    isLoading = toSignal(this.loadingService.isLoading$);
+    get hidden() {
+        return !this.isLoading();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaProgressApiCall, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaProgressApiCall, isStandalone: true, selector: "nxa-progress-api-call", host: { properties: { "class.hidden": "this.hidden" } }, ngImport: i0, template: "<progress class=\"progress w-full progress-accent\"></progress>" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaProgressApiCall, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-progress-api-call', template: "<progress class=\"progress w-full progress-accent\"></progress>" }]
+        }], propDecorators: { hidden: [{
+                type: HostBinding,
+                args: ['class.hidden']
+            }] } });
+
+class NxaToast extends NxaOverlayBaseMixin(class {
+}) {
+    isVisible = signal(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+    ngOnInit() {
+        // Initialization logic here if needed
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaToast, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: NxaToast, isStandalone: true, selector: "nxa-toast", host: { classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border" }, usesInheritance: true, ngImport: i0, template: "<div class=\"transition-transform duration-200\" [class.translate-x-[100%]]=\"!isVisible()\">\n  <div class=\"alert\" [ngClass]=\"{\n    'alert-info':overlayData.color==='info',\n    'alert-success':overlayData.color==='success',\n    'alert-warning':overlayData.color==='warning',\n    'alert-error':overlayData.color==='error',\n  }\">\n    <ng-icon name=\"bootstrapInfoCircle\"></ng-icon>\n    <span>{{overlayData.title}}</span>\n    <span>{{overlayData.message}}</span>\n  </div>\n</div>", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], viewProviders: [provideIcons({ bootstrapInfoCircle })] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaToast, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-toast', viewProviders: [provideIcons({ bootstrapInfoCircle })], imports: [NgIcon, CommonModule], host: {
+                        class: `${NXA_HOST_BLOCK}`
+                    }, template: "<div class=\"transition-transform duration-200\" [class.translate-x-[100%]]=\"!isVisible()\">\n  <div class=\"alert\" [ngClass]=\"{\n    'alert-info':overlayData.color==='info',\n    'alert-success':overlayData.color==='success',\n    'alert-warning':overlayData.color==='warning',\n    'alert-error':overlayData.color==='error',\n  }\">\n    <ng-icon name=\"bootstrapInfoCircle\"></ng-icon>\n    <span>{{overlayData.title}}</span>\n    <span>{{overlayData.message}}</span>\n  </div>\n</div>" }]
+        }] });
+
+class NxaTooltip {
+    // tooltipMessage
+    _tooltipMessage = signal('', ...(ngDevMode ? [{ debugName: "_tooltipMessage" }] : []));
+    set tooltipMessage(value) {
+        this._tooltipMessage.set(value ?? '');
+    }
+    get tooltipMessage() {
+        return this._tooltipMessage();
+    }
+    // anchorId
+    _anchorId = signal('', ...(ngDevMode ? [{ debugName: "_anchorId" }] : []));
+    set anchorId(value) {
+        this._anchorId.set(value ?? '');
+    }
+    get anchorId() {
+        return this._anchorId();
+    }
+    tooltipRef = viewChild.required('tooltip');
+    setAnchorEffect = effect(() => {
+        const anchorId = this._anchorId();
+        if (anchorId) {
+            const anchorElement = document.getElementById(anchorId);
+            if (anchorElement && this.tooltipRef()) {
+                const rect = anchorElement.getBoundingClientRect();
+                this.tooltipRef().style.position = 'absolute';
+                this.tooltipRef().style.overflowAnchor = anchorId;
+                this.tooltipRef().style.top = `${rect.bottom + window.scrollY}px`;
+                this.tooltipRef().style.left = `${rect.left + window.scrollX}px`;
+            }
+        }
+    }, ...(ngDevMode ? [{ debugName: "setAnchorEffect" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: NxaTooltip, isStandalone: true, selector: "nxa-tooltip", inputs: { tooltipMessage: "tooltipMessage", anchorId: "anchorId" }, host: { classAttribute: "contents" }, viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "<nxa-text type=\"caption\" className=\"tooltip-primary p-2 rounded-md absolute z-[999]\" #tooltip>\n  {{ _tooltipMessage() }}\n</nxa-text>", dependencies: [{ kind: "component", type: NxaText, selector: "nxa-text", inputs: ["for", "type", "size", "weight", "italic", "color", "className"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTooltip, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-tooltip', host: {
+                        class: NXA_HOST_CONTENTS_ONLY
+                    }, imports: [NxaText], template: "<nxa-text type=\"caption\" className=\"tooltip-primary p-2 rounded-md absolute z-[999]\" #tooltip>\n  {{ _tooltipMessage() }}\n</nxa-text>" }]
+        }], propDecorators: { tooltipMessage: [{
+                type: Input
+            }], anchorId: [{
+                type: Input
+            }], tooltipRef: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
+
+class NxaTooltipDirective {
+    viewContainerRef = inject(ViewContainerRef);
+    tooltipComponentRef;
+    // Signals for inputs
+    _anchorId = signal(null, ...(ngDevMode ? [{ debugName: "_anchorId" }] : []));
+    _tooltipMessage = signal(null, ...(ngDevMode ? [{ debugName: "_tooltipMessage" }] : []));
+    _direction = signal(null, ...(ngDevMode ? [{ debugName: "_direction" }] : []));
+    set anchorId(value) {
+        this._anchorId.set(value);
+    }
+    get anchorId() {
+        return this._anchorId();
+    }
+    set tooltipMessage(value) {
+        this._tooltipMessage.set(value);
+    }
+    get tooltipMessage() {
+        return this._tooltipMessage();
+    }
+    set direction(value) {
+        this._direction.set(value);
+    }
+    get direction() {
+        return this._direction();
+    }
+    _relativeClass = true;
+    onMouseEnter() {
+        this.viewContainerRef.clear();
+        this.tooltipComponentRef = this.viewContainerRef.createComponent(NxaTooltip);
+        if (this._tooltipMessage())
+            this.tooltipComponentRef.instance.tooltipMessage = this._tooltipMessage();
+    }
+    onMouseLeave() {
+        if (this.tooltipComponentRef) {
+            this.tooltipComponentRef.destroy();
+            this.tooltipComponentRef = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: NxaTooltipDirective, isStandalone: true, selector: "[nxaTooltip]", inputs: { anchorId: "anchorId", tooltipMessage: "tooltipMessage", direction: "direction" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.relative": "this._relativeClass" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxaTooltip]'
+                }]
+        }], propDecorators: { anchorId: [{
+                type: Input
+            }], tooltipMessage: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], _relativeClass: [{
+                type: HostBinding,
+                args: ['class.relative']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class NxaNavbar extends WithClassNameMixin(class {
+}) {
+    _leadingTemplate = signal(null, ...(ngDevMode ? [{ debugName: "_leadingTemplate" }] : []));
+    set leadingTemplate(value) {
+        this._leadingTemplate.set(value);
+    }
+    get leadingTemplate() {
+        return this._leadingTemplate();
+    }
+    _contentTemplate = signal(null, ...(ngDevMode ? [{ debugName: "_contentTemplate" }] : []));
+    set contentTemplate(value) {
+        this._contentTemplate.set(value);
+    }
+    get contentTemplate() {
+        return this._contentTemplate();
+    }
+    _trailingTemplate = signal(null, ...(ngDevMode ? [{ debugName: "_trailingTemplate" }] : []));
+    set trailingTemplate(value) {
+        this._trailingTemplate.set(value);
+    }
+    get trailingTemplate() {
+        return this._trailingTemplate();
+    }
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaNavbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaNavbar, isStandalone: true, selector: "nxa-navbar", inputs: { leadingTemplate: "leadingTemplate", contentTemplate: "contentTemplate", trailingTemplate: "trailingTemplate", className: "className" }, usesInheritance: true, ngImport: i0, template: "<div class=\"navbar shadow-xl\" [ngClass]=\"_classNameObject()\">\n  <div class=\"navbar-start\">\n    @if(!!_leadingTemplate()){\n    <ng-container [ngTemplateOutlet]=\"_leadingTemplate()!\"></ng-container>\n    }@else {\n    <ng-content select=\"[leading]\"></ng-content>\n    }\n  </div>\n  <div class=\"navbar-center\">\n    @if(!!_contentTemplate()){\n    <ng-container [ngTemplateOutlet]=\"_contentTemplate()!\"></ng-container>\n    }@else {\n    <ng-content select=\"[content]\"></ng-content>\n    }\n  </div>\n  <div class=\"navbar-end\">\n    @if(!!_trailingTemplate()){\n    <ng-container [ngTemplateOutlet]=\"_trailingTemplate()!\"></ng-container>\n    }@else {\n    <ng-content select=\"[trailing]\"></ng-content>\n    }\n  </div>\n</div>\n<div class=\"relative inset-0 h-1\">\n  <nxa-progress-api-call class=\"absolute w-full top-0 bottom-0\"></nxa-progress-api-call>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NxaProgressApiCall, selector: "nxa-progress-api-call" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaNavbar, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-navbar', encapsulation: ViewEncapsulation.None, imports: [CommonModule, NxaProgressApiCall], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navbar shadow-xl\" [ngClass]=\"_classNameObject()\">\n  <div class=\"navbar-start\">\n    @if(!!_leadingTemplate()){\n    <ng-container [ngTemplateOutlet]=\"_leadingTemplate()!\"></ng-container>\n    }@else {\n    <ng-content select=\"[leading]\"></ng-content>\n    }\n  </div>\n  <div class=\"navbar-center\">\n    @if(!!_contentTemplate()){\n    <ng-container [ngTemplateOutlet]=\"_contentTemplate()!\"></ng-container>\n    }@else {\n    <ng-content select=\"[content]\"></ng-content>\n    }\n  </div>\n  <div class=\"navbar-end\">\n    @if(!!_trailingTemplate()){\n    <ng-container [ngTemplateOutlet]=\"_trailingTemplate()!\"></ng-container>\n    }@else {\n    <ng-content select=\"[trailing]\"></ng-content>\n    }\n  </div>\n</div>\n<div class=\"relative inset-0 h-1\">\n  <nxa-progress-api-call class=\"absolute w-full top-0 bottom-0\"></nxa-progress-api-call>\n</div>" }]
+        }], propDecorators: { leadingTemplate: [{
+                type: Input
+            }], contentTemplate: [{
+                type: Input
+            }], trailingTemplate: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }] } });
+
+const BREAKPOINT_ORDER = {
+    xs: 0,
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+    '2xl': 5,
+};
+class NxaPage extends WithClassNameMixin(WithClassBodyMixin(class {
+})) {
+    //#region Injection
+    /**
+     *
+     */
+    drawerService = inject(NxaDrawerService);
+    layoutService = inject(NxaLayoutService);
+    nxaBreakpoints = inject(NXA_BREAKPOINTS);
+    //#endregion
+    //#region State
+    _isRoot = signal(false, ...(ngDevMode ? [{ debugName: "_isRoot" }] : []));
+    _drawer = signal(null, ...(ngDevMode ? [{ debugName: "_drawer" }] : []));
+    _navBar = signal(null, ...(ngDevMode ? [{ debugName: "_navBar" }] : []));
+    _contentFooter = signal(null, ...(ngDevMode ? [{ debugName: "_contentFooter" }] : []));
+    _pageFooter = signal(null, ...(ngDevMode ? [{ debugName: "_pageFooter" }] : []));
+    _sidebar = signal(null, ...(ngDevMode ? [{ debugName: "_sidebar" }] : []));
+    _drawerId = signal('nxa-drawer', ...(ngDevMode ? [{ debugName: "_drawerId" }] : []));
+    _drawerDefaultOpen = signal(true, ...(ngDevMode ? [{ debugName: "_drawerDefaultOpen" }] : []));
+    _overlayFrom = signal('md', ...(ngDevMode ? [{ debugName: "_overlayFrom" }] : []));
+    _currentBreakpoint = toSignal(this.layoutService.breakpoint$);
+    _oldBreakpoint = signal('md', ...(ngDevMode ? [{ debugName: "_oldBreakpoint" }] : []));
+    // protected _drawerRef = viewChild<ElementRef>("drawer");
+    // protected _contentRef = viewChild<ElementRef>("content");
+    // protected _enforceMaxWidth= signal<boolean>(true);
+    // protected _updateContentWidth=effect(()=>{
+    //   const enforcedWidth = this._enforceMaxWidth();
+    //   const drawerState = this._drawerState()
+    //   if(!enforcedWidth) return;
+    //   const drawerEl = (this._drawerRef()?.nativeElement as HTMLElement);
+    //   const contentEl = (this._contentRef()?.nativeElement as HTMLElement);
+    //   if (!drawerEl || !contentEl) return;
+    //   const drawerWidth = drawerState?.state == 'OPEN' ? drawerEl.clientWidth : 0;
+    //   contentEl.style.maxWidth=`calc(100% - ${drawerWidth}px)`;
+    // });
+    _isOverlay = computed(() => {
+        const current = this._currentBreakpoint();
+        if (!current)
+            return false; // no value yet
+        return (BREAKPOINT_ORDER[current] < BREAKPOINT_ORDER[this._overlayFrom()]);
+    }, ...(ngDevMode ? [{ debugName: "_isOverlay" }] : []));
+    _computedNgClasses = computed(() => {
+        return {
+            ...this._classNameObject(),
+            'is-root': this._isRoot(),
+            'nxa-drawer-overlay': this._isOverlay(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "_computedNgClasses" }] : []));
+    /**
+   * fetch drawer state for this drawer
+   */
+    _drawerState$;
+    /**
+     * fetch drawe state for this drawer again
+     */
+    _drawerState = toSignal(toObservable(this._drawerId).pipe(switchMap(x => this.drawerService.getDrawerState$(x))));
+    //#endregion
+    //#region inputs
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    set classBody(value) {
+        this._classBody.set(value);
+    }
+    get classBody() {
+        return this._classBody();
+    }
+    // @Input() public set enforceMaxWidth(value:boolean){
+    //   this._enforceMaxWidth.set(value);
+    // }
+    // public get enforceMaxWidth():boolean{
+    //   return this._enforceMaxWidth();
+    // }
+    /**
+     * if this page is root of the website page,
+     * set true if it's the base container of the app
+     */
+    set root(value) {
+        this._isRoot.set(value);
+    }
+    ;
+    /**
+     * drawer layout to display
+     */
+    set drawerTemplate(value) {
+        this._drawer.set(value);
+    }
+    /**
+     * navbar to display
+     */
+    set navBarTemplate(value) {
+        this._navBar.set(value);
+    }
+    /**
+     * footer for content
+     */
+    set contentFooterTemplate(value) {
+        this._contentFooter.set(value);
+    }
+    /**
+     * footer for the entire page
+     */
+    set pageFooterTemplate(value) {
+        this._pageFooter.set(value);
+    }
+    /**
+     * sidenav on the side of the page
+     */
+    set sidebarTemplate(value) {
+        this._sidebar.set(value);
+    }
+    ;
+    /**
+     *
+     */
+    set drawerId(value) {
+        this._drawerId.set(value);
+    }
+    ;
+    set drawerDefaultOpen(value) {
+        this._drawerDefaultOpen.set(value);
+    }
+    set overlayFrom(value) {
+        this._overlayFrom.set(value);
+    }
+    //#endregion
+    ngOnInit() {
+        const isOpen = (this.layoutService.current === "lg" || this.layoutService.current === "xl" || this.layoutService.current === "2xl") && this._drawerDefaultOpen();
+        this.drawerService.registerDrawer({ id: this._drawerId(), state: isOpen ? 'OPEN' : 'CLOSE', side: 'LEFT' });
+        this._drawerState$ = this.drawerService.getDrawerState$(this._drawerId());
+    }
+    ngOnDestroy() {
+        this.drawerService.unregisterDrawer(this._drawerId());
+    }
+    /**
+     * handle changes in the value of the checkbox
+     * this sync the state between daisy ui component and service status
+     * @param event
+     */
+    valueChange(event) {
+        const checked = event.target.checked;
+        this.drawerService.updateDrawerState({ ...this._drawerState(), state: checked ? "OPEN" : "CLOSE", side: 'LEFT' });
+    }
+    closeDrawer() {
+        this.drawerService.updateDrawerState({ ...this._drawerState(), state: "CLOSE" });
+    }
+    /**
+     * handle the injection on host element of class root
+     * this is needed to allow the switch of style if root page
+     * */
+    get isRoot() {
+        return this._isRoot();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaPage, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaPage, isStandalone: true, selector: "nxa-page", inputs: { className: "className", classBody: "classBody", root: "root", drawerTemplate: "drawerTemplate", navBarTemplate: "navBarTemplate", contentFooterTemplate: "contentFooterTemplate", pageFooterTemplate: "pageFooterTemplate", sidebarTemplate: "sidebarTemplate", drawerId: "drawerId", drawerDefaultOpen: "drawerDefaultOpen", overlayFrom: "overlayFrom" }, host: { properties: { "class.is-root": "this.isRoot" }, classAttribute: "w-full h-full min-h-0 flex flex-col flex-1" }, usesInheritance: true, ngImport: i0, template: "<div class=\"nxa-page\" [ngClass]=\"_computedNgClasses()\">\n\n  <div class=\"nxa-page-content-container\">\n\n    <!-- Navbar Slot -->\n    @if(!!_navBar()){\n      <ng-container *ngTemplateOutlet=\"_navBar()!\"></ng-container>\n    }@else{\n      <ng-content select=\"[navbar]\"></ng-content>\n    }\n    <!-- Content Slot -->\n    <div class=\"nxa-page-content\" #content>\n      <div class=\"nxa-content\" [ngClass]=\"_classBody()\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"nxa-page-sidenav-container\">\n        <!-- Sidebar slot -->\n        @if(!!_sidebar()){\n          <ng-container [ngTemplateOutlet]=\"_sidebar()!\"></ng-container>\n        }@else{\n          <ng-content select=\"[sidenav]\"></ng-content>\n        }\n      </div>\n    </div>\n    <!-- Content Footer Slot -->\n    <div class=\"grow-0 w-full h-fit\">\n      @if(!!_contentFooter()){\n      <ng-container *ngTemplateOutlet=\"_contentFooter()!\"></ng-container>\n      }@else{\n        <ng-content select=\"[content-footer]\"></ng-content>\n      }\n    </div>\n  </div>\n  @if (_isOverlay() && _drawerState()?.state === 'OPEN') {\n  <div class=\"nxa-drawer-backdrop\" tabindex=\"0\" (click)=\"closeDrawer()\" (keydown.enter)=\"closeDrawer()\">\n  </div>\n  }\n  <!-- Drawer Content Slot-->\n  <div class=\"nxa-drawer-container\" #drawer [ngClass]=\"{\n      'nxa-drawer-open':_drawerState()?.state==='OPEN',\n      'nxa-drawer-close':_drawerState()?.state==='CLOSE',\n      'nxa-drawer-overlay':_isOverlay(),\n    }\n      \">\n    @if(!!_drawer()){\n    <ng-container *ngTemplateOutlet=\"_drawer()!\"></ng-container>\n    }@else{\n      <ng-content select=\"[drawer]\"></ng-content>\n    }\n\n  </div>\n</div>\n<!-- Full page Footer Slot-->\n<div class=\"nxa-page-footer\">\n  @if(!!_pageFooter()){\n  <ng-container *ngTemplateOutlet=\"_pageFooter()!\"></ng-container>\n\n  }@else{\n    <ng-content select=\"[page-footer]\"></ng-content>\n  }\n</div>", styles: ["@layer properties;.nxa-page-sidenav-container{display:block;width:fit-content;min-width:calc(var(--spacing, .25rem) * 0);flex:none}.nxa-content{width:100%}.nxa-page{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;max-width:100%;flex:1;flex-basis:100%;flex-direction:row-reverse;overflow:hidden}.nxa-page.is-root{height:100dvh;width:100dvw}.nxa-page .nxa-drawer-backdrop{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);bottom:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);cursor:pointer;background-color:var(--color-base-300);opacity:75%}.nxa-page .nxa-page-content-container{z-index:0;display:flex;min-height:calc(var(--spacing, .25rem) * 0);width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-basis:100%;flex-direction:column}.nxa-page .nxa-page-content{z-index:0;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-basis:100%}.nxa-page .nxa-page-content .nxa-content{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-basis:100%}.nxa-drawer-container{inset-inline-start:calc(var(--spacing, .25rem) * 0);top:calc(var(--spacing, .25rem) * 0);bottom:calc(var(--spacing, .25rem) * 0);z-index:10;min-height:100%;max-width:fit-content;background-color:var(--color-base-200);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}.nxa-drawer-container.nxa-drawer-overlay{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);top:calc(var(--spacing, .25rem) * 0)}.nxa-drawer-container.nxa-drawer-open{pointer-events:auto;height:100%;width:fit-content;min-width:fit-content;--tw-translate-x: calc(var(--spacing, .25rem) * 0);translate:var(--tw-translate-x) var(--tw-translate-y);opacity:100%}.nxa-drawer-container.nxa-drawer-close{pointer-events:none;z-index:50;min-width:calc(var(--spacing, .25rem) * 0);opacity:0%;transition-delay:0s,0s,.3s,ease-out}.nxa-drawer-container.nxa-drawer-close:where(:dir(ltr),[dir=ltr],[dir=ltr] *){--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.nxa-drawer-container.nxa-drawer-close:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x: 100%;translate:var(--tw-translate-x) var(--tw-translate-y)}@layer base{:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}}@layer base{:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root{--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")}}@layer base{:root{scrollbar-color:currentColor #0000}@supports (color: color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000) #0000}}}@layer base{@property --radialprogress{syntax: \"<percentage>\"; inherits: true; initial-value: 0%;}}@layer base{:root:not(span){overflow:var(--page-overflow)}}@layer base{:root{background:var(--page-scroll-bg, var(--root-bg));--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) var(--root-bg, #0000);--page-scroll-transition-on: background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter, unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset)}@supports (color: color-mix(in lab,red,red)){:root{--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%))}}@keyframes set-page-has-scroll{0%,to{--page-has-scroll: 1}}}@layer base{:root,[data-theme]{background:var(--page-scroll-bg, var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg: var(--color-base-100)}}@keyframes rating{0%,40%{scale:1.1;filter:brightness(1.05) contrast(1.05)}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{scale:.9;opacity:0}to{scale:1;opacity:1}}@keyframes rotator{89.9999%,to{--first-item-position: 0 0%}90%,99.9999%{--first-item-position: 0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-ease: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-page', encapsulation: ViewEncapsulation.None, host: {
+                        class: NXA_HOST_LAYOUT
+                    }, imports: [CommonModule], template: "<div class=\"nxa-page\" [ngClass]=\"_computedNgClasses()\">\n\n  <div class=\"nxa-page-content-container\">\n\n    <!-- Navbar Slot -->\n    @if(!!_navBar()){\n      <ng-container *ngTemplateOutlet=\"_navBar()!\"></ng-container>\n    }@else{\n      <ng-content select=\"[navbar]\"></ng-content>\n    }\n    <!-- Content Slot -->\n    <div class=\"nxa-page-content\" #content>\n      <div class=\"nxa-content\" [ngClass]=\"_classBody()\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"nxa-page-sidenav-container\">\n        <!-- Sidebar slot -->\n        @if(!!_sidebar()){\n          <ng-container [ngTemplateOutlet]=\"_sidebar()!\"></ng-container>\n        }@else{\n          <ng-content select=\"[sidenav]\"></ng-content>\n        }\n      </div>\n    </div>\n    <!-- Content Footer Slot -->\n    <div class=\"grow-0 w-full h-fit\">\n      @if(!!_contentFooter()){\n      <ng-container *ngTemplateOutlet=\"_contentFooter()!\"></ng-container>\n      }@else{\n        <ng-content select=\"[content-footer]\"></ng-content>\n      }\n    </div>\n  </div>\n  @if (_isOverlay() && _drawerState()?.state === 'OPEN') {\n  <div class=\"nxa-drawer-backdrop\" tabindex=\"0\" (click)=\"closeDrawer()\" (keydown.enter)=\"closeDrawer()\">\n  </div>\n  }\n  <!-- Drawer Content Slot-->\n  <div class=\"nxa-drawer-container\" #drawer [ngClass]=\"{\n      'nxa-drawer-open':_drawerState()?.state==='OPEN',\n      'nxa-drawer-close':_drawerState()?.state==='CLOSE',\n      'nxa-drawer-overlay':_isOverlay(),\n    }\n      \">\n    @if(!!_drawer()){\n    <ng-container *ngTemplateOutlet=\"_drawer()!\"></ng-container>\n    }@else{\n      <ng-content select=\"[drawer]\"></ng-content>\n    }\n\n  </div>\n</div>\n<!-- Full page Footer Slot-->\n<div class=\"nxa-page-footer\">\n  @if(!!_pageFooter()){\n  <ng-container *ngTemplateOutlet=\"_pageFooter()!\"></ng-container>\n\n  }@else{\n    <ng-content select=\"[page-footer]\"></ng-content>\n  }\n</div>", styles: ["@layer properties;.nxa-page-sidenav-container{display:block;width:fit-content;min-width:calc(var(--spacing, .25rem) * 0);flex:none}.nxa-content{width:100%}.nxa-page{position:relative;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;max-width:100%;flex:1;flex-basis:100%;flex-direction:row-reverse;overflow:hidden}.nxa-page.is-root{height:100dvh;width:100dvw}.nxa-page .nxa-drawer-backdrop{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);bottom:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);cursor:pointer;background-color:var(--color-base-300);opacity:75%}.nxa-page .nxa-page-content-container{z-index:0;display:flex;min-height:calc(var(--spacing, .25rem) * 0);width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-basis:100%;flex-direction:column}.nxa-page .nxa-page-content{z-index:0;display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-basis:100%}.nxa-page .nxa-page-content .nxa-content{display:flex;height:100%;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-basis:100%}.nxa-drawer-container{inset-inline-start:calc(var(--spacing, .25rem) * 0);top:calc(var(--spacing, .25rem) * 0);bottom:calc(var(--spacing, .25rem) * 0);z-index:10;min-height:100%;max-width:fit-content;background-color:var(--color-base-200);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .3s;transition-duration:.3s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}.nxa-drawer-container.nxa-drawer-overlay{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 0);top:calc(var(--spacing, .25rem) * 0)}.nxa-drawer-container.nxa-drawer-open{pointer-events:auto;height:100%;width:fit-content;min-width:fit-content;--tw-translate-x: calc(var(--spacing, .25rem) * 0);translate:var(--tw-translate-x) var(--tw-translate-y);opacity:100%}.nxa-drawer-container.nxa-drawer-close{pointer-events:none;z-index:50;min-width:calc(var(--spacing, .25rem) * 0);opacity:0%;transition-delay:0s,0s,.3s,ease-out}.nxa-drawer-container.nxa-drawer-close:where(:dir(ltr),[dir=ltr],[dir=ltr] *){--tw-translate-x: -100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.nxa-drawer-container.nxa-drawer-close:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x: 100%;translate:var(--tw-translate-x) var(--tw-translate-y)}@layer base{:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}}@layer base{:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100: oklch(100% 0 0);--color-base-200: oklch(98% 0 0);--color-base-300: oklch(95% 0 0);--color-base-content: oklch(21% .006 285.885);--color-primary: oklch(45% .24 277.023);--color-primary-content: oklch(93% .034 272.788);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100: oklch(25.33% .016 252.42);--color-base-200: oklch(23.26% .014 253.1);--color-base-300: oklch(21.15% .012 254.09);--color-base-content: oklch(97.807% .029 256.847);--color-primary: oklch(58% .233 277.117);--color-primary-content: oklch(96% .018 272.314);--color-secondary: oklch(65% .241 354.308);--color-secondary-content: oklch(94% .028 342.258);--color-accent: oklch(77% .152 181.912);--color-accent-content: oklch(38% .063 188.416);--color-neutral: oklch(14% .005 285.823);--color-neutral-content: oklch(92% .004 286.32);--color-info: oklch(74% .16 232.661);--color-info-content: oklch(29% .066 243.157);--color-success: oklch(76% .177 163.223);--color-success-content: oklch(37% .077 168.94);--color-warning: oklch(82% .189 84.429);--color-warning-content: oklch(41% .112 45.904);--color-error: oklch(71% .194 13.428);--color-error-content: oklch(27% .105 12.094);--radius-selector: .5rem;--radius-field: .25rem;--radius-box: .5rem;--size-selector: .25rem;--size-field: .25rem;--border: 1px;--depth: 1;--noise: 0}}@layer base{:root{--fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\")}}@layer base{:root{scrollbar-color:currentColor #0000}@supports (color: color-mix(in lab,red,red)){:root{scrollbar-color:color-mix(in oklch,currentColor 35%,#0000) #0000}}}@layer base{@property --radialprogress{syntax: \"<percentage>\"; inherits: true; initial-value: 0%;}}@layer base{:root:not(span){overflow:var(--page-overflow)}}@layer base{:root{background:var(--page-scroll-bg, var(--root-bg));--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) var(--root-bg, #0000);--page-scroll-transition-on: background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter, unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset)}@supports (color: color-mix(in lab,red,red)){:root{--page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%))}}@keyframes set-page-has-scroll{0%,to{--page-has-scroll: 1}}}@layer base{:root,[data-theme]{background:var(--page-scroll-bg, var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg: var(--color-base-100)}}@keyframes rating{0%,40%{scale:1.1;filter:brightness(1.05) contrast(1.05)}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{scale:.9;opacity:0}to{scale:1;opacity:1}}@keyframes rotator{89.9999%,to{--first-item-position: 0 0%}90%,99.9999%{--first-item-position: 0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-ease: initial;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0}}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { className: [{
+                type: Input
+            }], classBody: [{
+                type: Input
+            }], root: [{
+                type: Input
+            }], drawerTemplate: [{
+                type: Input
+            }], navBarTemplate: [{
+                type: Input
+            }], contentFooterTemplate: [{
+                type: Input
+            }], pageFooterTemplate: [{
+                type: Input
+            }], sidebarTemplate: [{
+                type: Input
+            }], drawerId: [{
+                type: Input
+            }], drawerDefaultOpen: [{
+                type: Input
+            }], overlayFrom: [{
+                type: Input
+            }], isRoot: [{
+                type: HostBinding,
+                args: ['class.is-root']
+            }] } });
+
+class NxaTabDirective {
+    //#region public interface
+    // Signals
+    _tabId = signal('', ...(ngDevMode ? [{ debugName: "_tabId" }] : []));
+    _tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "_tabIndex" }] : []));
+    _openingIndex = signal(0, ...(ngDevMode ? [{ debugName: "_openingIndex" }] : []));
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : []));
+    _title = signal('', ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _icon = signal('', ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _animationDuration = signal(650, ...(ngDevMode ? [{ debugName: "_animationDuration" }] : []));
+    _defaultAnimation = signal(true, ...(ngDevMode ? [{ debugName: "_defaultAnimation" }] : []));
+    // @Input() bindings with getters/setters
+    get tabId() {
+        return this._tabId();
+    }
+    set tabId(value) {
+        this._tabId.set(value);
+    }
+    get tabIndex() {
+        return this._tabIndex();
+    }
+    set tabIndex(value) {
+        this._tabIndex.set(value);
+    }
+    get openingIndex() {
+        return this._openingIndex();
+    }
+    set openingIndex(value) {
+        this._openingIndex.set(value);
+    }
+    get isActive() {
+        return this._isActive();
+    }
+    set isActive(value) {
+        this._isActive.set(value);
+    }
+    get title() {
+        return this._title();
+    }
+    set title(value) {
+        this._title.set(value);
+    }
+    get icon() {
+        return this._icon();
+    }
+    set icon(value) {
+        this._icon.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get animationDuration() {
+        return this._animationDuration();
+    }
+    set animationDuration(value) {
+        this._animationDuration.set(value);
+    }
+    get defaultAnimation() {
+        return this._defaultAnimation();
+    }
+    set defaultAnimation(value) {
+        this._defaultAnimation.set(value);
+    }
+    //#endregion
+    _tabState = signal('OPEN', ...(ngDevMode ? [{ debugName: "_tabState" }] : []));
+    _animationDelayEffect = effect(() => {
+        const isActive = this._isActive();
+        const state = this._tabState();
+        if (isActive && state === 'CLOSE') {
+            this._tabState.set('OPENING');
+            setTimeout(() => {
+                this._tabState.set('OPEN');
+            }, this._animationDuration());
+        }
+        else if (!isActive && state === 'OPEN') {
+            this._tabState.set('CLOSING');
+            setTimeout(() => {
+                this._tabState.set('CLOSE');
+            }, this._animationDuration());
+        }
+    }, ...(ngDevMode ? [{ debugName: "_animationDelayEffect" }] : []));
+    nxaTab = true;
+    fullHeight = true;
+    fullWidth = true;
+    left = 0;
+    top = 0;
+    right = 0;
+    bottom = 0;
+    position = 'absolute';
+    get display() {
+        return this._tabState() == 'CLOSE' ? 'none' : 'block';
+    }
+    get isTabOpening() {
+        return this._tabState() == 'OPENING';
+    }
+    get isTabOpen() {
+        return this._tabState() == 'OPEN';
+    }
+    get isTabClosing() {
+        return this._tabState() == 'CLOSING';
+    }
+    get isTabClose() {
+        return this._tabState() == 'CLOSE';
+    }
+    get isClosingLeft() {
+        return this._tabState() == 'CLOSING' && this._tabIndex() > this._openingIndex();
+    }
+    get isClosingRight() {
+        return this._tabState() == 'CLOSING' && this._tabIndex() < this._openingIndex();
+    }
+    get isOpeningLeft() {
+        return this._tabState() == 'CLOSING' && this._tabIndex() < this._openingIndex();
+    }
+    get isOpeningRight() {
+        return this._tabState() == 'CLOSING' && this._tabIndex() > this._openingIndex();
+    }
+    get animateDefault() {
+        return this._defaultAnimation();
+    }
+    ngOnInit() {
+        this._tabState.set(this._isActive() ? 'OPEN' : 'CLOSE');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: NxaTabDirective, isStandalone: true, selector: "[nxaTab]", inputs: { tabId: "tabId", tabIndex: "tabIndex", openingIndex: "openingIndex", isActive: "isActive", title: "title", icon: "icon", disabled: "disabled", animationDuration: "animationDuration", defaultAnimation: "defaultAnimation" }, host: { properties: { "class.nxa-tab": "this.nxaTab", "class.h-full": "this.fullHeight", "class.w-full": "this.fullWidth", "style.left": "this.left", "style.top": "this.top", "style.right": "this.right", "style.bottom": "this.bottom", "style.position": "this.position", "style.display": "this.display", "class.nxa-tab-opening": "this.isTabOpening", "class.nxa-tab-open": "this.isTabOpen", "class.nxa-tab-closing": "this.isTabClosing", "class.nxa-tab-close": "this.isTabClose", "class.nxa-closing-left": "this.isClosingLeft", "class.nxa-closing-right": "this.isClosingRight", "class.nxa-opening-left": "this.isOpeningLeft", "class.nxa-opening-right": "this.isOpeningRight", "class.tab-animate-default": "this.animateDefault" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTabDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxaTab]'
+                }]
+        }], propDecorators: { tabId: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], openingIndex: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], defaultAnimation: [{
+                type: Input
+            }], nxaTab: [{
+                type: HostBinding,
+                args: ['class.nxa-tab']
+            }], fullHeight: [{
+                type: HostBinding,
+                args: ['class.h-full']
+            }], fullWidth: [{
+                type: HostBinding,
+                args: ['class.w-full']
+            }], left: [{
+                type: HostBinding,
+                args: ['style.left']
+            }], top: [{
+                type: HostBinding,
+                args: ['style.top']
+            }], right: [{
+                type: HostBinding,
+                args: ['style.right']
+            }], bottom: [{
+                type: HostBinding,
+                args: ['style.bottom']
+            }], position: [{
+                type: HostBinding,
+                args: ['style.position']
+            }], display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], isTabOpening: [{
+                type: HostBinding,
+                args: ['class.nxa-tab-opening']
+            }], isTabOpen: [{
+                type: HostBinding,
+                args: ['class.nxa-tab-open']
+            }], isTabClosing: [{
+                type: HostBinding,
+                args: ['class.nxa-tab-closing']
+            }], isTabClose: [{
+                type: HostBinding,
+                args: ['class.nxa-tab-close']
+            }], isClosingLeft: [{
+                type: HostBinding,
+                args: ['class.nxa-closing-left']
+            }], isClosingRight: [{
+                type: HostBinding,
+                args: ['class.nxa-closing-right']
+            }], isOpeningLeft: [{
+                type: HostBinding,
+                args: ['class.nxa-opening-left']
+            }], isOpeningRight: [{
+                type: HostBinding,
+                args: ['class.nxa-opening-right']
+            }], animateDefault: [{
+                type: HostBinding,
+                args: ['class.tab-animate-default']
+            }] } });
+
+class NxaTabView {
+    /* ---- Signals + @Input setters ---- */
+    _tabType = signal('lift', ...(ngDevMode ? [{ debugName: "_tabType" }] : []));
+    set tabType(value) {
+        this._tabType.set(value);
+    }
+    get tabType() {
+        return this._tabType();
+    }
+    _tabSize = signal('md', ...(ngDevMode ? [{ debugName: "_tabSize" }] : []));
+    set tabSize(value) {
+        this._tabSize.set(value);
+    }
+    get tabSize() {
+        return this._tabSize();
+    }
+    _className = signal('', ...(ngDevMode ? [{ debugName: "_className" }] : []));
+    set className(value) {
+        this._className.set(value);
+    }
+    get className() {
+        return this._className();
+    }
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    set animate(value) {
+        this._animate.set(value);
+    }
+    get animate() {
+        return this._animate();
+    }
+    tabs = contentChildren(NxaTabDirective, { ...(ngDevMode ? { debugName: "tabs" } : {}), descendants: true });
+    updateTabState = effect(() => {
+        this.tabs().forEach(x => { if (!this._animate()) {
+            x.animationDuration = 0;
+        } });
+    }, ...(ngDevMode ? [{ debugName: "updateTabState" }] : []));
+    tabsLabelState = computed(() => {
+        return this.tabs().map((tab) => ({
+            label: tab.title,
+            active: tab.isActive
+        }));
+    }, ...(ngDevMode ? [{ debugName: "tabsLabelState" }] : []));
+    computedNgTabClass = computed(() => ({
+        [`tabs-${this._tabType()}`]: true,
+        [`tabs-${this._tabSize()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "computedNgTabClass" }] : []));
+    onTabclick(tabIndex) {
+        this.tabs().forEach((tab, index) => {
+            tab.tabIndex = index;
+            if (tabIndex === index) {
+                tab.isActive = true;
+            }
+            else {
+                tab.isActive = false;
+                tab.openingIndex = tabIndex;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTabView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NxaTabView, isStandalone: true, selector: "nxa-tab-view", inputs: { tabType: "tabType", tabSize: "tabSize", className: "className", animate: "animate" }, host: { classAttribute: "block min-h-0 basis-fit h-fit flex-1 max-h-full w-full max-w-full inset-0 box-border" }, queries: [{ propertyName: "tabs", predicate: NxaTabDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Nxa Tab View Container -->\n<div class=\"flex flex-col flex-1 min-h-0 h-full relative w-full nxa-tab-view-container\" [class]=\"_className()\">\n    <!-- Nxa Tab view Header -->\n    <div class=\"overflow-x-auto px-2 shrink-0 grow-0 min-h-fit nxa-tab-view-header\">\n        <div role=\"tablist\" class=\"tabs tabs-bordered px-1\" [ngClass]=\"computedNgTabClass()\">\n        @for (label of tabsLabelState(); let index = $index; track $index) {\n            <a role=\"tab\" class=\"tab\" tabindex=\"0\" [class.tab-active]=\"label.active\" (click)=\"onTabclick(index)\" (keypress)=\"onTabclick(index)\">\n                {{label.label}}\n            </a>\n        }\n    </div>\n    </div>\n    <!-- Nxa Tab View Body -->\n    <div class=\"flex relative flex-1 min-h-0 h-full basis-full nxa-tab-view-body\">\n        <ng-content select=\"[nxaTab]\"></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NxaTabView, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxa-tab-view', encapsulation: ViewEncapsulation.None, imports: [CommonModule], host: {
+                        class: `${NXA_HOST_BLOCK}`,
+                    }, template: "<!-- Nxa Tab View Container -->\n<div class=\"flex flex-col flex-1 min-h-0 h-full relative w-full nxa-tab-view-container\" [class]=\"_className()\">\n    <!-- Nxa Tab view Header -->\n    <div class=\"overflow-x-auto px-2 shrink-0 grow-0 min-h-fit nxa-tab-view-header\">\n        <div role=\"tablist\" class=\"tabs tabs-bordered px-1\" [ngClass]=\"computedNgTabClass()\">\n        @for (label of tabsLabelState(); let index = $index; track $index) {\n            <a role=\"tab\" class=\"tab\" tabindex=\"0\" [class.tab-active]=\"label.active\" (click)=\"onTabclick(index)\" (keypress)=\"onTabclick(index)\">\n                {{label.label}}\n            </a>\n        }\n    </div>\n    </div>\n    <!-- Nxa Tab View Body -->\n    <div class=\"flex relative flex-1 min-h-0 h-full basis-full nxa-tab-view-body\">\n        <ng-content select=\"[nxaTab]\"></ng-content>\n    </div>\n</div>" }]
+        }], propDecorators: { tabType: [{
+                type: Input
+            }], tabSize: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], animate: [{
+                type: Input
+            }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxaTabDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+
+// Layouts
+
+const NxaLoadingInterceptor = (req, next) => {
+    const loadingService = inject(NxaLoadingService);
+    const shouldTrack = !req.context.get(SKIP_LOADING);
+    if (shouldTrack) {
+        loadingService.addLoading();
+    }
+    return next(req).pipe(finalize(() => {
+        if (shouldTrack) {
+            loadingService.removeLoading();
+        }
+    }));
+};
+
+/*
+ * Public API Surface of nxa-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_TAILWIND_BREAKPOINTS, NXA_BRAND_COLORS, NXA_BREAKPOINTS, NXA_COLORS_ALL, NXA_CONTENT_COLORS, NXA_DEFAULT_DARK_THEME, NXA_DEFAULT_LIGHT_THEME, NXA_DEFAULT_THEME_BRIGHTNESS_MAP, NXA_HOST_BLOCK, NXA_HOST_CONTENTS_ONLY, NXA_HOST_LAYOUT, NXA_NEUTRAL_COLORS, NXA_OVERLAY_CONFIG_DEFAULTS, NXA_OVERLAY_DATA, NXA_PREFER_DARK_THEME, NXA_SIZES, NXA_STATUS_COLORS, NXA_THEME_BRIGHTNESS_MAP, NXA_THEME_LOADER, NXA_THEME_SAVING, NXA_TOAST_CONFIG_DEFAULTS, NxaAccordion, NxaAutoSizeDirective, NxaBadge, NxaButton, NxaCard, NxaCheckbox, NxaContainer, NxaDatagrid, NxaDateTimeInput, NxaDrawer, NxaDrawerService, NxaDropdown, NxaDynamicList, NxaExpansionPanel, NxaFileInput, NxaForceSizeDirective, NxaFormControl, NxaLayoutService, NxaLinearLayout, NxaListTile, NxaLoadingInterceptor, NxaLoadingService, NxaNavbar, NxaOverlayBase, NxaOverlayBaseMixin, NxaOverlayRef, NxaOverlayService, NxaPage, NxaPagination, NxaProgressApiCall, NxaRadio, NxaRadioGroup, NxaRange, NxaSelect, NxaTabDirective, NxaTabView, NxaText, NxaTextInput, NxaThemeService, NxaToast, NxaToastService, NxaTooltip, NxaTooltipDirective, SKIP_LOADING, WithClassBodyMixin, WithClassFooterMixin, WithClassHeaderMixin, WithClassName, WithClassNameMixin, applyMixins, deepEqual, getStyleVariable, isBrowserContext, isServerContext, sanitizeIcon, shallowEqual };
+//# sourceMappingURL=nxa-lab-nxa-ui.mjs.map